객체의 쓰기와 읽기
객체와 반복문
프로퍼티와 메소드
댓글
-
다소 어렵지만, 쉽게 이해시켜주는 훌륭한 강의입니다. 어디에 어떻게 사용하게 될진 아직 정해진 바가 없지만 하루하루 일신우일신 하고 있습니다. 덕분에 감사합니다. -
ㅋㅋ 어려워요 ^^ 그래도 고고^^
-
공부하시는분들 참조하세요~
===================
JavaScript의 this는 기존 언어에서 사용하던 this와는 다릅니다. 비슷한 의미로 사용될 때도 있지만, JavaScript의 this는 여러 가지 함수가 호출되는 방식(호출 패턴)에 따라 참조(바인딩)하는 객체가 다르기 때문입니다.
자바에서의 this는 인스턴스 자신을 가리키는 참조변수입니다. this가 객체 자신에 대한 참조 값을 가지고 있다는 것입니다. 주로 매개변수와 객체 자신이 가지고 있는 변수의 이름이 같을 경우 이를 구분하기 위해서 사용됩니다.
javascript의 this가 해당 함수 호출 패턴에 따라 어떻게 객체를 참조(바인딩)하는지에 대한 규칙
1. 기본적으로 this는 전역 객체를 참조한다.
2. 메소드 내부의 this는 해당 메소드를 호출한 부모 객체를 참조한다.
3. 생성자 함수 코드 내부의 this는 새로 생성된 객체를 참조한다.
4. call()과 apply() 메소드로 함수를 호출할 때, 함수의 this는 첫 번째 인자로 넘겨받은 객체를 참조한다.
5. 프로토타입 객체 메소드 내부의 this도 해당 메소드를 호출한 부모 객체를 참조한다.
6. JavaScript의 this 키워드는 접근제어자 public 역할을 한다.
JavaScript에서는 내부 함수 호출 패턴을 정의해 놓지 않기 때문입니다. 내부 함수도 결국 함수이므로 이를 호출할 때는 함수 호출로 취급되어 함수 호출 패턴 규칙에 따라 내부 함수의 this는 전역 객체를 참조하게 됩니다.
출처: http://k9e4h.tistory.com/141 [Kim's :D]
====================== -
property : 객체에 속한 변수
method : 객체에 속한 함수 -
파이썬에서의 함수는 일급 객체이기 때문에 딕셔너리의 value에 들어갈 수 있습니다.
-
nomadlife 말씀처럼 파이썬의 사전형(dict)과 비슷하네요.
다만 파이썬의 dict는 말 그대로 자료형(데이터)만을 담는 그릇이고 JS처럼 함수를 담을 수는 없습니다. 말하자면 객체를 다루기 위해 별도로 클래스라는 개념을 생성, 분리해놨다... 고 해야 하는 반면, JS는 별도의 클래스 개념은 없는 듯 보이네요. 자료형과 함수의 동거라니 @_@ -
감사합니다!
-
객체에 함수를 만드는 과정이 조금 이해가 어렵네요.
-
어디에 써먹는 것들인고!!! 저도 동감입니다ㅜ
"+ +" 따옴표 안에 플러스가 왜 들어가야하는지 모르겠지만
객체를 불러들이는 방법(?)을 여러가지 보여주신거같은데,
이해가 되고있는지 의심스러움을 안고 다음 강의로 고고~!! -
대체 이런것들을 어디에 써먹을지 궁금하군요
-
강의 잘 들었습니다. 항상 잘 보고 있습니다. 감사합니다.
-
너무 어렵네
-
객체 쓰기와 읽기 완료! 퇴근전 짬내서 듣고갑니다 : )
-
감사합니다~~~~~~~~~~~~~
-
벌써 여기까지 달렸네요.
감사합니다! -
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;
}
}
} -
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억개쓰다가체력이없어서죽을것같은데.....
-
김예찬 배재영
-
객체에는 length가 없는 듯한데... for 반복문에서 i를 뭐보다 작다고 해야 하는지 뭐라고 구글링 해야 하나요?.. -
아리송 하지만 계속 고합니다! -
마음이 편하지 않네요ㅜㅜ
-
감사합니다..
-
http://blog.naver.com......iew
emmet 라는 플러그인 인것 같습니다. -
<script 하고 나머지 부분 자동완성이 안되네요 .. tab , enter 으로 자동완성 기능을 사용한다는건 알겠는데 ...제가 많이 부족한지 아직 찾기가 힘드네요 ..
저의 검색어는 atom auto completion 이었습니다... word completion 도 같이 검색했구여 ㅠ
<>
<> 둘다 제가 완성해야하니 되게 힘드네요 .. html 기본 틀 자동완성은 되는데 다른 기능이 안됩니다. 알려주실분
없으신가요 ㅠ -
자바스크립트는 제가 공부를 더 해야할 부분이라
이해가 부족하지만, 따라해 가면서 최선을 다하고 있습니다.
감사합니다. ^^ -
180214 감사합니다! -
180211 감사합니다!
-
강의 감사합니다. 파이썬과 같이 공부하고 있는데, 자바스크립트의 객체가 파이썬의 Dictionary 데이터 타입과 생김새가 유사하네요. dot(.) 표기법만 빼구요. 물론 내부 구조는 다를거라 생각하지만, 아직 정확히는 모르겠네요. 구글에 질문했더니, 비슷한 질문을 한 사람도 꽤 있더라구요 ㅎㅎ 좀더 알아바야 겠습니다.
그리고 js 예제를 인터넷에서 찾다보니, function 을 nesting 해서 객체로 만들기도 하더라구요. 근데 이건 또 new 생성자라는걸 통해서 사용을 하는걸로 봐서 느낌은 파이썬의 class 같아 보여서 이것도 찾아보고 있긴합니다만, 꼬리에 꼬리를 물고 머릿속이 엉켜가는 중입니다 ㅎㅎ 혹시 객체에 대해서 추가로 강의하실 계획 있으시면 요 부분(객체를 만드는 여러가지 방법)도 한번 다뤄주시면 감사하겠습니다. -
감사합니다 이런 강의 만들어주셔서ㅎㅎ 이해가 잘 되는편입니다~ㅎ
-
저의 동료에요~ -
강의 잘 보고 있습니다.
egoing님 프로그래머시고
와이프분(?) leezche님은 디자이너시군요. 맞죠?
그렇다면 저랑 비슷하네요 ㅋ -
<< 2018-01-20 - 3일차 _다섯 번째 강의 >> --> 완료!
객체에 포함된 변수 - Property
객체에 포함된 함수 - Method
Property와 Method가 뭔지 알게되었습니다. ^_^ -
질문 있습니다. 윈도우 업데이트 후 기본 디렉토리가 C:\Bitnami\wampstack-7.1.11-0\apache2\htdocs에서
C:\APM_Setup\htdocs로 바뀌었어요. 게다가 bitnami WAMP Stack으로 아파치 서버를 보니까 Stopped 돼있고 start를 눌러도 바뀌질 않네요. 바뀐 폴더에서 html파일을 만들면 접근에 이상이 없는데 그 안에 폴더를 만들어서 강의내용을 따로 접근 하려고 하니 접근권한이 없다는 메세지가 뜨네요. 해결책을 알수있을까요? -
쉽지 않은 내용이네요, 감사합니다~ -
객체부터는 정말 어렵네요.. 몇번이고 돌려 봐야겠어요
-
감사합니다.
-
여기서 설명한 객체가 저번에 웹어플리케이션 강의하신 것 중의 연관 배열 (Associative Array)과 어떤 차이가 있나요? -
반복문 안에서 흐름을 중지하고 다시 루프를 돌리는 continue를 이용할수도 있답니당
"showAll": function() {
for (var key in this) {
if (key === "showAll") continue;
document.write('<p>' + book[key] + '</p>')
}
} -
세번째 강의 에서 나온 예제 중에
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> -
-정리-
- 정보의 양이 많아졌을 때 서로 연관된 정보를 정리하는 도구로써 '배열'
배열은 순서에 따라서 정보를 정리정돈
- 객체(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로 바꾸어주면 객체의 이름이 바뀐다 해도 대응 가능하다. -
그렇군요! 답변 고맙습니다 ^^
그리고 언제나 격하게 감사드립니다! -
찾으신 내용이 더 정확한 구분이 되겠네요~ 잘하셨어요 ^^
-
이고잉님, 객체의 명칭에 대해 공부차 찾아 보았는데요.
객체 프로퍼티를 동영상에서 "programmer" , "designer", "showAll" 과 같은 것이라 하셨는데,
그 값의 "egoing" 이나 "leezche"는 프로퍼티에 속해 있지 않은 건가요?
제가 참고한 사이트는 programmer : 'egoing' 전부가 속성이고,
programmer는 키(key), 'egoing'은 값(value)라고 하더라구요..
둘 다 포함 한게 속성이 맞나요??
객체에 대한 추가정보(명칭 등)
https://goo.gl/2qSweF
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
