객체 활용

2017-12-02 16:21:10

변경사항

eddylee1234562일 전

완료

답글 수정 삭제
Harry5일 전

감사합니다.완료

답글
nange14일 전

감사해요!

답글 수정 삭제
moon14일 전

항상 감사합니다.!!

답글
춤춤20일 전

완료

답글
thsths23일 전

완료

답글
스티븐잡숴26일 전

완료

답글
Jeremy Jo한 달 전

완료

답글 수정 삭제
문병민한 달 전

완료!!

답글 수정 삭제
샬롬한 달 전

완료

답글
BoBo2개월 전

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

답글 수정 삭제
딥허브2개월 전

2019.12.21

답글
codinginpain2개월 전

완료쓰

답글 수정 삭제
홍주호3개월 전

20191116 완료

답글
우유병3개월 전

다솜 화이팅

답글
육포3개월 전

20191103

답글
은별3개월 전

완료

답글
민경4개월 전

이거만 보고 자야지했는데 다음거까지 보고 자게 만드시네여...참..ㅠㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

답글
답글4개월 전

그니까요 들으면 들을수록 매력적이예요
대화보기
답글 수정 삭제
굼벵이4개월 전

완료

답글 수정 삭제
ㄷㄷ4개월 전

목소리 너무 좋아여

답글 수정 삭제
Ted4개월 전

20191001 Ted 완료!

답글 수정 삭제
난뀨4개월 전

안녕하세요 개발공부 입문자입니다!
질문이 있어서요!
오류코드가 두개가 뜨는데 도대체 무엇이 틀렸는지 궁금합니다 도와주세요ㅠㅠ
Uncaught SyntaxError: Unexpected end of input
객체답안.HTML:54 Uncaught ReferenceError: nightDayHandler is not defined
at HTMLInputElement.onclick

<!doctype html>
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<script>
function LinksSetColor(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
var Links = {
setColor:function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
}
}
}
function BodySetColor(color){
document.querySelector('body').style.color = color;
}
function BodySetBackgroundColor(color){
document.querySelector('body').style.backgroundColor = color;
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';
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.setColor('blue');
}
}
</script>
</head>
<body>
<h1>객체연습</h1>
<input type="button"value="night" onclick="nightDayHandler(this);">
</body>
</html>

답글 수정 삭제
코딩만이 살길이다4개월 전

완료

답글
쑤우5개월 전

수강완료. 감사합니다.

답글
신입인생 30대충분5개월 전

vscode로 하시는분들은 var Body 하지 마시고 다른 이름으로 하세요..

답글 수정 삭제
피닭씨5개월 전

완료

답글
현우5개월 전

완료

답글 수정 삭제
정완료5개월 전

완료

답글 수정 삭제
한조5개월 전

감사합니다!

답글
들국화6개월 전

잘봤습니다

답글
JT_brand6개월 전

완료

답글
에듀케이티드키드7개월 전

이렇게 해주는이유가 코드를 간단하게만들어줄려고 해주는건가요?

답글
성균관대학교7개월 전

절차지향 언어 프로그래밍을 주로 하다가 객체지향 언어를 하니 느낌이 다르네요..ㅎㅎㅎ

답글
승방이8개월 전

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

답글 수정 삭제
Weini Jeon8개월 전

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

답글
hyegineer8개월 전

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

답글 수정 삭제
Hyeon-Jun Ha9개월 전

완료

답글
영미9개월 전

궁금한 부분이 있습니다.

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

답글
kumkum9개월 전

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

답글
강기석9개월 전

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

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

기존 코드에서 변수 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>
대화보기
답글 수정 삭제
주워니9개월 전

완료!

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

완료

답글
허공9개월 전

190509 감사합니다.

답글
수오9개월 전

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

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

답글
최승윤10개월 전

완료!

답글
Gimme_Gsuit10개월 전

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.메소드(객체안의 함수를 메소드)를 선언해서 코드의 가독성을 높이기 위해서 구조화 하였다고 보시면 될 것 같습니다.
대화보기
답글
힝10개월 전

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';
}

}

답글 수정 삭제
SaeyanNarae11개월 전

var Links = { }
var Body= { }

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

function Links = { }
function Body = { }

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

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

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

혹은

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

이렇게 선언하셔야 됩니다.
대화보기
답글 수정 삭제