객체 활용

2017-12-02 16:21:10

변경사항

승방이한 달 전

사랑해요 이고잉....코딩의 재미를 옴팡지게 느끼고 있습니다.. -이걸 들을때만은 코딩 천재가 되는 코린이 드림-

답글 수정 삭제
Weini Jeon한 달 전

오아... 저는 빡데가린가 봐요.. 이해가 된거 같으면서도 이해안된 이느낌은 대체...;;;

답글
hyegineer한 달 전

완료!
우왕 객체 활용까지 다 들었다
재밌었땋ㅎㅎㅎ
얼른 객체의 메소드와프로퍼티 등등 쓰임새 익숙해지고싶다

답글 수정 삭제
Hyeon-Jun Ha한 달 전

완료

답글
영미한 달 전

궁금한 부분이 있습니다.

body.setcolor('black') 에서 setcolor는 프로퍼티라고 할수 있나요 메소드라고 해야하나요?

답글
kumkum한 달 전

객체: 많은 함수와 프라퍼티를 정리할 수 있음.

답글
강기석2개월 전

감사합니다 !
대화보기
답글
박아람2개월 전

안녕하세요 강기석님, 지나가던 학생입니다.

기존 코드에서 변수 body 를 Body 로 수정하시면 정상적으로 됩니다.

전체 소문자 body 는 변수 적용이 안되는것 같으세요 ( html 태그 라 그런게 아닐까 추정합니다. )

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<input
type="button"
value="click"
onclick="
Body.color('red');"
/>
<script>
var Body = {
color: function(color) {
document.querySelector("body").style.backgroundColor = color;
}
};
</script>
</body>
</html>
대화보기
답글 수정 삭제
주워니2개월 전

완료!

답글 수정 삭제
위준우2개월 전

완료

답글
허공2개월 전

190509 감사합니다.

답글
수오2개월 전

Body.SetBackgroundColor('black');
의 코드에서
SetBackgroundColor는 프로퍼티면서 매소드라고도 불리는건가요??

반복해서 시청해도 정립이 잘 안되어서 우선 이렇게 이해하고 있는데
아시는 분 계시면 혹시 제 이해가 틀렸다면 틀렸다라는 말 한마디라도 부탁드리겠습니다!

답글
최승윤2개월 전

완료!

답글
Gimme_Gsuit3개월 전

var Body = {
setColor:function (color){
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color){
document.querySelector('body').style.backgroundColor = color;
}
}
강의에서는 이렇게 var Body = {} -<객체 생성을 하였구요. 그다음 Body안에
{ setColor:function (color){
document.querySelector('body').style.color = color; } 요렇게 메소드(함수)를 생성하였습니다.
Body자체를 객체로 만들어 준거구요. Body.메소드(객체안의 함수를 메소드)를 선언해서 코드의 가독성을 높이기 위해서 구조화 하였다고 보시면 될 것 같습니다.
대화보기
답글
힝3개월 전

Body 객체 안에, 중복되는 'document.querySelector('body).style'부분을 없애고 싶어서 해당 객체에 새로운 property(target) 로 넣어버리고 this로 호출했는데, 작동이 안되네요..ㅠ 혹시 왜 그런지 아시는분 ㅠㅠㅠ

var Body = {

target : document.querySelector('body').style,
bodyBGColorChange : function() {
this.target.backgroundColor = 'black';
},
bodyColorChange : function () {
this.target.color = 'white';
}

}

답글 수정 삭제
SaeyanNarae3개월 전

var Links = { }
var Body= { }

위에 2개는 객체를 생성하는 명령어이고

function Links = { }
function Body = { }

function이 들어간 2개는 함수를 생성하는 명령어를 말씀하시는 것 같습니다.
함수를 저렇게 생성하는건 문법 오류이구요.

만약 함수를 생성하고자 한다면

function Links() { }
function Body() { }

혹은

Links = function() { }
Body = function() { }

이렇게 선언하셔야 됩니다.
대화보기
답글 수정 삭제
김주성3개월 전

강의에서는
function Links = {

function Body = {

이렇게 나와 있어서 따라하니까 안되더라구요? 근데 댓글에 보니까

var Links = {

var Body = {

이렇게 선언 해서 그대로 하니까 됩니다. 왜 강의에서는 function으로 했는데 되고 저는 var 로 새로 선언해야 되는 건가요???

답글 수정 삭제
dudwn75044개월 전

감사합니다~
대화보기
답글
와이에스4개월 전

객체의 메소드 사용할때는 '='을 빼고 '( )'만 사용해보세요
<수정전>
Body.setBackgroundColor = ('black');
Body.setColor = ('white');
<수정후>
Body.setBackgroundColor('black');
Body.setColor('white');
대화보기
답글 수정 삭제
dudwn75044개월 전

버튼을 눌러도 버튼 이름만 바뀌고 나머지는 동작을 안해요 이유를 모르겠어요. 어디가 잘못되어 있는지 알려주세요 ㅠㅠ

<script>
var Body = {
setBackgroundColor:function (color){
document.querySelector('body').style.backgroundColor = color;
},
setColor:function (color){
document.querySelector('body').style.color = color;
}
}

function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
Body.setBackgroundColor = ('black');
Body.setColor = ('white');
self.value = 'day';
} else {
Body.setBackgroundColor = ('white');
Body.setColor = ('black');
self.value = 'night';
}
}
</script>
</head>
<body>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">

답글
didQk4개월 전

완료!

답글
lygon5개월 전

2019-02-21 완료

답글
우도순5개월 전

완료

답글
재래5개월 전

어떻게 이렇게 쉽고 쏙쏙 이해되게 설명하실 수가 있죠. 어느새 여기까지 왔네요.

답글 수정 삭제
발헤5개월 전

감사합니다.완료

답글
호두5개월 전

아 강의에 있네요 제가 실수 했습니다.

답글
호두5개월 전

What's “this” in JavaScript onclick?
Ask Question

<a onclick="javascript:func(this)" >here</a>

Answers

In the case you are asking about, this represents the HTML DOM element.

So it would be the <a> element that was clicked on.

답글
호두5개월 전

<input type="button" value="night" onClick="
nightDayHandler(value);
">

에서
<input type="button" value="night" onClick="
nightDayHandler(this);
">

로 변경하니까 제대로 동작하네요

이 차이점 알려주실 수 있나요?

onClick 이 HTML 의 DOM을 리턴한다는데

버튼을 클릭하는 순간 this값으로 input 태그의 value값이 전달되는건가요?

답글
함가죠5개월 전

완료 감사합니다:)

답글 수정 삭제
gravity2515개월 전

완료

답글
지미츄5개월 전

완료 감사합니다~~

답글 수정 삭제
이수하5개월 전

완료

답글
cg6개월 전

어렵네요....

답글
김용범7개월 전

몰아쳐서 객채까지 공부를 완료했습니다. 속도가 정말 빠르네요! 뿌듯합니다

답글 수정 삭제
막시무스7개월 전

전 코딩이 어디서 시작되었는지 몰라 직접 강의내용 보고 코딩 해봤습니다.
처음부터 코딩하다 보니 setColor -> setcolor 이런 철자 오류로 인해 대부분 동작이안되더군요?
밑 참조하시어 어디서 틀렸는지 함 대조해 보세요 ! 감사합니다.

<!doctype html>
<head>
<title>생활코딩</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script>
var Link = {
setColor:function(color){
var alist = document.queryselectorAll('a');
var i = 0;
while(i < alist.lenght){
alist[i].style.color = color;
i = i + 1;
}
}
}
var Body = {
setColor:function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color){
document.querySelector('body').style.backgroundColor = color;
}
}
function nightDayHandler(self){
var target = document.querySelector('body');
if (self.value ==='night'){
Body.setBackgroundColor('black');
Body.setColor('white')
self.value = 'day';

Link.setColor('powerblue');
} else {
Body.setBackgroundColor('white');
Body.setColor('black')
self.value = 'night';

Link.setColor('blue');
}
}

</script>
</head>
<body>
<a href="main.html"><h1>생활코딩</h1></a>
<h2>object</h2>
<h5>객체는 수납해서 꺼내쓸수있다</h5>
<br>
<input id="night_day" type="button" value="night"
onclick="nightDayHandler(this); ">

</body>
</html>

답글 수정 삭제
돼지천재7개월 전

감사합니다.

답글
카페산7개월 전

파일 전체 내용을 공유해주셔야 디버깅이 가능할 것 같아요^^;;
대화보기
답글
김귀인7개월 전

어렵네요 ㅋㅋ

답글
일단시작하고본다9개월 전

Body 객체부분의 코드를 보여주셔야 디버깅이 가능할 듯 합니다.
대화보기
답글
답변9개월 전

var Body 부분에서 setBackgroundColor 을 변경해보니 저도 같은 에러가나네요 오타확인해보세요~

var Body = {
setColor: function(color) {document.querySelector('body').style.color = color;},
setBackgroundColor: function(color) {document.querySelector('body').style.backgroundColor = color;}
}
대화보기
답글 수정 삭제
안다9개월 전

강의 잘보고 있습니다. 다름이 아니라, 이 전까지는 잘 따라오고 있었는데요.
var Body로 묶은 뒤에 실행해보았는데 아래처럼 에러가 납니다. (저 부분은 따로 손대지도 않았어요...)

function nightDayHandler(self){
var target = document.querySelector('body')
if(self.value === 'night'){
Body.setBackgroundColor('black'); --> 에러난 부분

Uncaught TypeError: Body.setBackgroundColor is not a function
at nightDayHandler (3.html:26)
구글링해보니 setBackgroundColor 이름을 바꿔보라고 해서 해봤는데도 안되네요. 도움 부탁 드립니다.

답글 수정 삭제
풀등9개월 전

감사합니다.^^

답글
몽고르스9개월 전

변경사항 소스를 그대로 복사해서 실행 해봤는데 작동이 안되요 그래서 영상 보면서 쳤는데 실행이 안되네요
body 부분만 보입니다. 예제로 했던 전체적인 소스 올려주실 수 있나요?

답글 수정 삭제
LEE10개월 전

var target = document.querySelector('body');
은 없어도 되죠?

답글 수정 삭제
고수로가는길10개월 전

여기까지 클리어

답글 수정 삭제
Inyeong Gim10개월 전

배열, ,함수, 객체 넘어오면서 스스로 한번 되새김질이 필요한 것 같네요. 감사합니다.

답글
kim10개월 전

감사합니다^^
20180831

답글
flyhoon10개월 전

감사합니다.

답글
SungWoon10개월 전

잘봤습니다!!!

답글 수정 삭제
로버트한11개월 전

감사합니다. ~~ 어렵지만 고고^^

답글