Opentutorials.org

객체

2017-11-28 23:32:58

객체의 쓰기와 읽기

변경사항

객체와 반복문

변경사항

프로퍼티와 메소드

변경사항

zze21일 전

nomadlife 말씀처럼 파이썬의 사전형(dict)과 비슷하네요.

다만 파이썬의 dict는 말 그대로 자료형(데이터)만을 담는 그릇이고 JS처럼 함수를 담을 수는 없습니다. 말하자면 객체를 다루기 위해 별도로 클래스라는 개념을 생성, 분리해놨다... 고 해야 하는 반면, JS는 별도의 클래스 개념은 없는 듯 보이네요. 자료형과 함수의 동거라니 @_@

답글 수정 삭제
스페이스몽키27일 전

감사합니다!

답글
소금돌27일 전

객체에 함수를 만드는 과정이 조금 이해가 어렵네요.

답글
이하빛한 달 전

어디에 써먹는 것들인고!!! 저도 동감입니다ㅜ
"+ +" 따옴표 안에 플러스가 왜 들어가야하는지 모르겠지만
객체를 불러들이는 방법(?)을 여러가지 보여주신거같은데,
이해가 되고있는지 의심스러움을 안고 다음 강의로 고고~!!

답글
옥슬이한 달 전

대체 이런것들을 어디에 써먹을지 궁금하군요

답글
jayxwoo한 달 전

강의 잘 들었습니다. 항상 잘 보고 있습니다. 감사합니다.

답글
옥슬이한 달 전

너무 어렵네

답글
jayxwoo한 달 전

객체 쓰기와 읽기 완료! 퇴근전 짬내서 듣고갑니다 : )

답글
키썬한 달 전

감사합니다~~~~~~~~~~~~~

답글
Younghun Liam Youn한 달 전

벌써 여기까지 달렸네요.
감사합니다!

답글
1한 달 전

function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}

답글 수정 삭제
1한 달 전

function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}

답글 수정 삭제
3한 달 전

체력이없어

답글 수정 삭제
응아니야한 달 전

이고잉억개

답글 수정 삭제
응아니야한 달 전

1억개쓰다가체력이없어서죽을것같은데.....

답글 수정 삭제
상상예찬한 달 전

김예찬 배재영

답글
우탄한 달 전

객체에는 length가 없는 듯한데... for 반복문에서 i를 뭐보다 작다고 해야 하는지 뭐라고 구글링 해야 하나요?..

답글
Byoung Nam Soh2개월 전

아리송 하지만 계속 고합니다!

답글
매쏘드2개월 전

마음이 편하지 않네요ㅜㅜ

답글 수정 삭제
Jay2개월 전

감사합니다..

답글
13개월 전

http://blog.naver.com......iew
emmet 라는 플러그인 인것 같습니다.
대화보기
답글 수정 삭제
정병성3개월 전

<script 하고 나머지 부분 자동완성이 안되네요 .. tab , enter 으로 자동완성 기능을 사용한다는건 알겠는데 ...제가 많이 부족한지 아직 찾기가 힘드네요 ..
저의 검색어는 atom auto completion 이었습니다... word completion 도 같이 검색했구여 ㅠ
<>
<> 둘다 제가 완성해야하니 되게 힘드네요 .. html 기본 틀 자동완성은 되는데 다른 기능이 안됩니다. 알려주실분
없으신가요 ㅠ

답글
제갈량3개월 전

자바스크립트는 제가 공부를 더 해야할 부분이라
이해가 부족하지만, 따라해 가면서 최선을 다하고 있습니다.
감사합니다. ^^

답글
Mingi Son4개월 전

180214 감사합니다!

답글
JN874개월 전

180211 감사합니다!

답글
nomadlife4개월 전

강의 감사합니다. 파이썬과 같이 공부하고 있는데, 자바스크립트의 객체가 파이썬의 Dictionary 데이터 타입과 생김새가 유사하네요. dot(.) 표기법만 빼구요. 물론 내부 구조는 다를거라 생각하지만, 아직 정확히는 모르겠네요. 구글에 질문했더니, 비슷한 질문을 한 사람도 꽤 있더라구요 ㅎㅎ 좀더 알아바야 겠습니다.
그리고 js 예제를 인터넷에서 찾다보니, function 을 nesting 해서 객체로 만들기도 하더라구요. 근데 이건 또 new 생성자라는걸 통해서 사용을 하는걸로 봐서 느낌은 파이썬의 class 같아 보여서 이것도 찾아보고 있긴합니다만, 꼬리에 꼬리를 물고 머릿속이 엉켜가는 중입니다 ㅎㅎ 혹시 객체에 대해서 추가로 강의하실 계획 있으시면 요 부분(객체를 만드는 여러가지 방법)도 한번 다뤄주시면 감사하겠습니다.

답글
thdbsgh3443@naver.com4개월 전

감사합니다 이런 강의 만들어주셔서ㅎㅎ 이해가 잘 되는편입니다~ㅎ

답글 수정 삭제
egoing4개월 전

저의 동료에요~
대화보기
답글
꼬맹파파4개월 전

강의 잘 보고 있습니다.
egoing님 프로그래머시고
와이프분(?) leezche님은 디자이너시군요. 맞죠?
그렇다면 저랑 비슷하네요 ㅋ

답글 수정 삭제
PassionOfStudy4개월 전

<< 2018-01-20 - 3일차 _다섯 번째 강의 >> --> 완료!

객체에 포함된 변수 - Property
객체에 포함된 함수 - Method

Property와 Method가 뭔지 알게되었습니다. ^_^

답글
atnskynst5개월 전

질문 있습니다. 윈도우 업데이트 후 기본 디렉토리가 C:\Bitnami\wampstack-7.1.11-0\apache2\htdocs에서
C:\APM_Setup\htdocs로 바뀌었어요. 게다가 bitnami WAMP Stack으로 아파치 서버를 보니까 Stopped 돼있고 start를 눌러도 바뀌질 않네요. 바뀐 폴더에서 html파일을 만들면 접근에 이상이 없는데 그 안에 폴더를 만들어서 강의내용을 따로 접근 하려고 하니 접근권한이 없다는 메세지가 뜨네요. 해결책을 알수있을까요?

답글
Fiat5개월 전

쉽지 않은 내용이네요, 감사합니다~

답글
사주5개월 전

객체부터는 정말 어렵네요.. 몇번이고 돌려 봐야겠어요

답글
이유리5개월 전

감사합니다.

답글
SanFrancisco5개월 전

여기서 설명한 객체가 저번에 웹어플리케이션 강의하신 것 중의 연관 배열 (Associative Array)과 어떤 차이가 있나요?

답글
elanore5개월 전

반복문 안에서 흐름을 중지하고 다시 루프를 돌리는 continue를 이용할수도 있답니당
"showAll": function() {
for (var key in this) {
if (key === "showAll") continue;
document.write('<p>' + book[key] + '</p>')
}
}
대화보기
답글
Days5개월 전

세번째 강의 에서 나온 예제 중에

key 인덱스 값에서 showAll 을 제외하는 조건은 다음과 같은 연산을 주면 되겠네요.

<h2>Property and Method</h2>

<script>
coworkers.showAll = function() {
for(var key in this){
if(key != "showAll"){
document.write(key + ' : ' + this[key] +'<br>');
}
}
}
coworkers.showAll();
</script>

답글
Jupi6개월 전

-정리-

- 정보의 양이 많아졌을 때 서로 연관된 정보를 정리하는 도구로써 '배열'
배열은 순서에 따라서 정보를 정리정돈

- 객체(object)는 순서 없이 정보를 저장할 수 있다.
- 객체는 이름이 있는 정리정돈 상자.
ex) 옷을 정리하기 위해서 수납상자를 산다. 그 수납함에 이름표를 단 옷을 보관한다.

- 객체 만들기
var coworkers = {
"programmer" : "egoing",
"designer" : "leezche"
};
coworkers의 이름을 가진 객체를 만드는데, 2개의 속성을 넣었다.
하나의 속성은, 속성명(key)이 programmer, 속성값(value)을 egoing,
다른 하나의 속성은, 속성명(key)이 designer, 속성값(value)을 leezche로 만들었다.
(배열은 []대괄호를 쓰지만, 객체는 {}중괄호)

- 객체 불러오기
coworkers.programmer;
coworkers뒤에 있는 마침표는 'object access operator'라고 한다.
글자에 빈칸이 있을 때
coworkers["data scientist"];

- 객체 추가하기
coworkers.bookkeeper = "duru";
글자에 빈칸이 있을 때
coworkers["data scientist"] = "taeho";

- 객체에 저장된 데이터를 모조리 가져올 때
for(var key in coworkers){
document.write(key);
}

- 객체의 value에 '함수'도 넣을 수 있다.
- 함수를 정의하는 법 다시
기본 > function ** () {}
다른 > var ** = function () {}

- 객체 안에 함수 넣기
coworkers.showAll = function(){
for(var key in coworkers){
document.write(key);
}
}
위와 같이 적용한다면,
나중에 객체의 이름이 바뀌었을 때 'showAll'이라는 함수 안에,
그대로 coworkers가 들어가 져 있어, 객체의 이름에 자동반응하지 못한다.
그러므로, showAll함수 안의 coworkers를 this로 바꾸어주면 객체의 이름이 바뀐다 해도 대응 가능하다.

답글
Jupi6개월 전

그렇군요! 답변 고맙습니다 ^^
그리고 언제나 격하게 감사드립니다!
대화보기
답글
egoing6개월 전

찾으신 내용이 더 정확한 구분이 되겠네요~ 잘하셨어요 ^^
대화보기
답글
Jupi6개월 전

이고잉님, 객체의 명칭에 대해 공부차 찾아 보았는데요.
객체 프로퍼티를 동영상에서 "programmer" , "designer", "showAll" 과 같은 것이라 하셨는데,
그 값의 "egoing" 이나 "leezche"는 프로퍼티에 속해 있지 않은 건가요?

제가 참고한 사이트는 programmer : 'egoing' 전부가 속성이고,
programmer는 키(key), 'egoing'은 값(value)라고 하더라구요..

둘 다 포함 한게 속성이 맞나요??

객체에 대한 추가정보(명칭 등)
https://goo.gl/2qSweF

답글