객체의 쓰기와 읽기
객체와 반복문
프로퍼티와 메소드
댓글
-
감사합니다. -
잘 모르겠습니다 하지만 계속 가겠습니다 ㅜㅜ -
안녕 난 객체라고해
세상의 모든것을 담을수 있지
나와 함께라면 두려울게 없어 -
꿀재미 입니다
-
감사합니다.
-
[객체]
순서가 있게 정보를 저장하는것이 배열(array)라면
순서가 없이 정보를 저장할수있는것이 객체이다.
배열은 [] 객체는 {}
var coworkers={"warrior":"changmin"}
{key값 : value값} // 내부에 들어가는 'warrior:changmin' 이 한덩어리를 property (속성값)이라고한다.
<h2>Coworkers</h2>
<script>
var coworkers={"warrior":"changmin",
"magiction":"abc",
"tanker":"qqwerr",
["mad scientist"]:"yezi"}; //띄어쓰기가 되어있을 경우 괄호를 씌워 줘야 한다.
document.write("warrior : "+coworkers.warrior+"<br>");// '.' 점은 오브젝트 엑세스 오퍼레이터라고한다. 즉 객체에 접근하기위한것//
document.write("magiction : "+coworkers.magiction+"<br>");
document.write("tanker : "+coworkers.tanker+"<br>");
document.write("mad scientist : "+coworkers["mad scientist"]+"<br>"); //띄어쓰기가 되어있을경우는 오브젝트 오프레이터로
//불러오지 못하고 array와 비슷하게 불러오게된다.
coworkers.keeper="mysql"; //정보를 더넣을 때 쓰인다.
document.write("keeper : "+coworkers.keeper+"<br>"); //
coworkers["my day"]="global"; //위에서 말했듯이 띄어쓰기 할떄 괄호를 넣는다.
document.write("my day :"+coworkers["my day"]+"<br>");
</script>
-객체와 반복문 : 객체내부에서 모든 데이터를 뽑아내야 할때 위와 같이 쓰면 매우 비생산적이다.
반복문을 통해서 데이터를 꺼내자
<h2>iterate</h2>
<script>
for(var key in coworkers){ //coworkers 라는 객체내에서 key 값을 가져온다는 반복문이다.
document.write(key+'<br>'); //객체로 반복문을 만들고 싶을때 구문이다.
}
</script>
<br>
<script>
for(var key in coworkers){
document.write(coworkers[key]+'<br>'); //객체의 키값에해당하는 데이터를 가져오겠다는구문이다.
}
</script>
<br>
<script>
for(var key in coworkers){
document.write(key + ':' +coworkers[key]+'<br>') // 이렇게 하면 반복문을 하기전에 했던 구문과 같아진다.
}
</script>
위와 같이 처음에 했던 객체의 예문을 단 세줄로 줄일수가 있다.
-Property & Method
property : 위에서 설명했지만 한번더 하자면 객체 내부에 들어가는 속성값을 말한다.
var coworkers={"warrior":"changmin"}
{key값 : value값} // 내부에 들어가는 'warrior:changmin' 이 한덩어리를 property (속성값)이라고한다.
Method : 객체 내부에 들어가는 함수를 메소드라고한다. -
검색해보니,
Object.keys(객체명).length;
라고 나오네요.
"자바스크립트 객체 사이즈(크기)"나 "javascript object size"로 검색해보시면 더 알아보실 수 있을 것 같아요. -
배열에는 배열명[0]부터 내용물이 순서대로 인덱스가 매겨지는데,
객체에는 객체명[키값]에 따라 내용물에 접근할 수 있는 부분을 말씀하신 것 같아요!
예)
배열의 경우:
var arrayName = ['a', 'b', 'c', 'd'];
// 여기서 내용물은 왼쪽부터 순서대로 a[0], a[1], a[2], a[3] => 순서있는 인덱스마다 값이 정해져 있음
객체의 경우:
var objectName = { "name":"happy", "number": 3, "id":777 };
// objectName[name], object[number], object[id] => 순서없이 키(key)에 따라 값(value) 정해져 있음
구글에서 "자바스크립트 객체 배열" 등의 키워드로 검색해보시면 여러 자료가 있을거에요.
방금 하나 찾은 곳이 있어 링크 남겨드려봅니다.
https://www.zerocho.com......ee3 -
index: 배열 안의 데이터는 순서대로 배치되어 있음.
key: 객체에 속한 데이터는 순서대로 정리되어 있지 않음.
어떤 비유로 적용해야 할지는 아직 모르겠네요.
단순하게 딸기랑 바나나라는 데이터가 있을때 빨간색 과일은 딸기 노랑색 과일은 바나나는 배열이라고 말할 수는 없겠고.
또 과일주스는 딸기랑 바나나가 모두 속한다라고 해석하는건 오류가 있는거 같고.
아무래도 얼마나 단순한지 아니면 얼마나 복잡한지에 따라 배열과 객체로 나눈다라는 말이 납득할 수 있을거 같네요.
또는 얼마나 구체적인지 아니면 복잡해서 오히려 핵심만 집어야 나을거 같은 추상적인지에 따라 나눠질 수 있을거 같기도 하고요.
정확하다고는 말할 수는 없겠지만 제가 생각하기에
단순하다는 건, 이것이 채소인지 아니면 과일인지.
복잡한건 기차역에서 무엇을 하기에 이 사람은 손님이라고 불리는 것인가, 또 이사람은 (what,why,how,when,where) 하기에 역무원이라고 불리는 것인가? -
카렌 에델 웅 1강 까지 완료
-
감사합니다.
-
감사합니다. 열심히 듣고 있습니다.
이번 강의는 조금 어렵네요. -
감사합니다!!
20180831 -
다소 어렵지만, 쉽게 이해시켜주는 훌륭한 강의입니다. 어디에 어떻게 사용하게 될진 아직 정해진 바가 없지만 하루하루 일신우일신 하고 있습니다. 덕분에 감사합니다.
-
ㅋㅋ 어려워요 ^^ 그래도 고고^^
-
공부하시는분들 참조하세요~
===================
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파일을 만들면 접근에 이상이 없는데 그 안에 폴더를 만들어서 강의내용을 따로 접근 하려고 하니 접근권한이 없다는 메세지가 뜨네요. 해결책을 알수있을까요? -
쉽지 않은 내용이네요, 감사합니다~
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
