javascript 기초개념 03_소스 판독하기

window.onload = function () {
// 변수를 선언합니다.
    var header = document.createElement('h1');
    var textNode = document.createTextNode('Hello DOM');    

// 노드를 연결합니다.
    header.appendChild(textNode);
    document.body.appendChild(header);};

--------------------------------------------------------------

window.onload = function () {

window : 브라우저 에 속해있는 객체
onload : 함수이나 당장 일어나지 않음. 대기중 .Event 라고 함 (큰틀에서는 함수, defalut로는 아무동작 하지 않는다.)


window는 뭐고 document는 무엇일까?

document 에서 객체를 가져오기 (id기준/class기준)

document.getElementId : id 기준
: document 의 #top-menu 를 가져온다.

document.getElementClass : Class 기준 (!!IE 8 에는 내장되어 있지 않다.)
: document 의 .top-menu 를 가져온다. 
-->문제점 : IE 8 에는 내장되어 있지 않다. 

해결방법
$(#example);
$(.example);   ie 8 이하에서는 jquery 에서 get 과정자체를 만들어줘야 한다.
From 최 : 왠만하면 id 기준으로 get 할수 있도록, 코딩한다. 위의 방법은 로딩이 오래 걸릴 수 있다.

 

그냥 무조건 외우지 말고,  패턴을 생각하면서 외우자

다시 처음으로 돌아가서 위에 있는 소스를 해독해보자.

첫번쨰 줄,
: document라는 객체의 create 라는 method가 있다. h1이라 태그를 만들어 (document 하부 있는 객체) header로 반영한다

두번째 줄,
: 'Hello Dom' 이라는 문자열을 textNode에 대입

세번째 줄, 노드연결
: 위에서 생성된 textNode('Hello Dom') 이라는 문자열을 header('h1')에 연결한다.

네번째 줄, 브라우저에 반영
: header('h1')를 document. body에 반영
: document라는 객체 속 appendChild(객체에 노드를 연결하는 함수) 라는 함수를 사용하여, header (위의 만들어진 값: 'h1') 을
body로 불러와라.

appendChild : 객체에 자식 엘레멘트를 첨부한다.
문법 : [oVal=]object.appendChild(oNode)
*question : appendChild vs innerHtml 의 차이점 검색해보기.

Final, 브라우저로 확인
: html소스를 건드린적이 없는데,
firefox 화면을 통해서 보니까, h1 태그가 들어간게 보인다.

곁가지..

: tag를 구성할대 아래와 같이 너무 깊이 들어가면 로딩이 느리다. 특히 mobile browser 에서 로딩이 어렵다.

: 웹사이트를 만들때 html, css, javascript 가 어떻게 서로 맞물려 돌아가는지 인지하고 사이트를 구축해야 함. 체화되어야 함.

 * 더알아보기
1. google 검색에 이미지 탭에서 Dom 계층(한/영) 에 대해 검색해보기
또는 Dom, document object model 등등 검색해보기.

 

관련 링크
 -> javascript 기초개념 01_객체 object
 -> javascript 기초개념 02_firefox를 통해서 객체속성 추적하기