티스토리 뷰


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

<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라는 전역객체에 속해 있다.



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

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


«   2022/08   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Total
1,592,200
Today
17
Yesterday
221