javascript 기초개념 02_firefox를 통해서 객체 속성 추적하기

객체들의 속성및 함수 딸린 객체를 추적하고 싶으면 firefox에서 f12를 눌러 firebug를 실행 시킨 후에 콘솔텝에서
아래와 같이 script를 입력후 run 하면, 해당 객체의 속성들을 확인할수 있따.

console.log(example);

* example 에 궁금한 객체를 타이핑한다 . window, document, appendChild 등등..
* 나는 window로 test 하였음

console 은 무슨 함수 ?? firebug에서 만든거라서, firefox에서 콘솔화면에서 치면 딸린 함수들이 나와.

 

1. f12 눌러서 콘솔로 들어가기
2. 스크립트 입력
3. 실행 클릭
4. 화면에 나타난 window edu_01.html (미선이 작업중인)클릭


window edu_01.html 를 클릭하면 아래와같이 수많은 속성, 함수, 그리고 상속된 객체등이 나열된다.

자세히 살펴보면 document 가 보인다 : document 는 window 객체에 상속된 객체로, 부자관계임.
앞에 + 누르면 또 많은 속성, 함수, 딸린 객체가 나오는데, window에서 상속받은 값들도 볼수가 있다.

document 는 객체 : 속성(attribute)과 함수(function) 같이 뭉쳐있다.

두꺼운 검은 글씨 : firefox, firebug 에서 나온 속성 아니면 객체. 주로 속성
검은 글씨 : 객체 : 속성값 밖에 안들어있는 객체/ 변수/ 객체속 또 다른 객체 (앞에+)
두꺼운 녹색 글씨 : 브러우저에서 만들어진 함수, 브라우저에서 동작 가능한 event
녹색 글씨 : 함수 (method () 괄호가 달려있다)
앞에 + 표시가 없으면 속성으로 보면돼.

* 상속 : 모든 프로그래밍의 기초 개념
당장에 사람을 만든다고 예를 들면 뇌에 과부화가 걸린다.
하지만 공통적 분류인 동물의 속성을 가져오면, 조금더 수월해진다.

스크립트도 가벼워지고, 로딩도 빨라지며, 체계화된다.

* 상속의 장점
 : 소스의 재활용이 가능
 : 하나만 수정해도 여러개 한방에 반영 됨. (예: parent 고치면 상속된 child 애들 다 바껴)
 : 소스를 자유자재로 써먹을 수 있다.

*추상화 : 눈 두개, 코하나, 머리하나. 등등의 특징적 요소를 관찰하여 정리하는 것.

 

null : 비어있다라는 뜻. null 키워드는 아무 개체도 참조하지 않는 null 참조를 나타내는 리터럴입니다. null은 참조 형식 변수의 기본값입니다.

onLoad..onClick.. 같이 on 뭐뭐 인것은 Event : 당장 일어나지 않는 함수
firefox에서 보면 옆에 null이라고되어있는데, 이건 눌러야 동작하기 때문에 지금 동작 안해서 그런것임.

undefined : 잘못된 js. 에러가 나면 그 밑에 다른 스크립트도 작동이 안된다. 

관련 링크
 -> javascript 기초개념 01_객체 object
 -> javascript 기초개념 03_소스 판독하기