[첫번째] JavaScript - Web Browser / 기본

웹브라우저 상에서의 자바스크립트

<1> Javscript를 로드하기

html은 html끼리

JS는 JS끼리 모여있는게 유지보수하기 편하다.

html 은 정보에 집중

JS 는 제어에 집중

1) inline 방식

한줄에 HTML 태그와 Javascript 언어를 모두 작성한다.

정보와 제어방식이 함께 있어서 유지보수가 불편하다.

2) <script></script>로 끼어두기

하지만 여기서도 html문서내에 JS 구문이 남아있기에 불편

3) 외부 파일 로드 방식(src 속성 이용)

<script src="./script_1.js"></script>

+) script 태그의 위치 :

head 태그에 위치

Uncaught TypeError: Cannot read property 'addEventListner' of null

js태그를 발견을 하면 외부에 있는 js파일을 다운로드를 받은 다음에 나머지 내용을 실행한다.

그말은

var hw = document.getElementById('hw');

    hw.addEventListner('click', function(){

        alert('hello world');

})

에서

첫번째 줄을 읽다가 hw를 찾지 못한 상태에서 addEventListener를 입력하니

존재하지 않는 것의 메소드를 불러오라는 말이되서 null값이 출력된다.

window.onload = function(){} 으로 감싸줘야 한다.

window는 전역객체 이기에 null 값은 도출되지 않지만 문서 전체를 모두 다운받으므로 느리다는 문제가 발생한다.

body 끝 태그 위에 위치하면 문제가 없다.

html 문서를 웹브라우저가 위에서 아래로 읽어오기 때문이다.

head파일에 위치하는게 더 느리다.

두번째 방법을 권장;

<2> Object Model

웹브라우저를 제어하는 자바스크립트의 객체를 크게 세부분으로 나눌 수 있다.

DOM / BOM / Core

1) DOM = Document Object Model

ex: document

2) BOM = Browser Object Model

ex: navigator, screen 등

3) Core는 호스트 환경에 상관없이 자바스크립체 자체적으로 갖고 있는 객체들을 말한다.

ex: object, array 등

이 모든 객체들은 window라는 전역객체에 속해 있다.

첫 번째는 짧게 포스팅.//

생활코딩 이고잉님 감사합니다^^

-..-