[자바스크립트]자바스크립트 역사와 꼭 알아야할 것들 1

1. 자바스크립트 역사

1)처음 -> DHTML(Dynamic HTML의 줄임말로 특정 기술이 아니라 HTML, CSS, 자바스크립트를 결합한 말)

2) 넷스케이프 네비게이터 vs 인터넷 익스플로러 : 두 회사의 브라우저에서 처음엔 자바스크립트 형식이 달랐다 그래서 초기에 개발자들은 DOM을 다루기 위해 코드를 나눠야 했다.  그래서 실패했다. ex) 넷스케이프 : document.layers['myelement'], 익스플로러 : document.all['myelement']

3)그래서 W3C에서 DOM 표준을 만들어 모든 브라우저 회사들의 DOM 형식을 통합했다. ex)document.getElementByID('myelement')

4)W3C가 정의한 DOM : 문서의 외양과 구조, 내용을 스크립트와 프로그램 언어가 동적으로 접근해 고칠 수 있는 플랫폼과 개발 언어에 중리적인 인터페이스.

5)WaSP라는 모임이 생겨 모든 브라우저 회사들이 W3C의 권고 표준안을 쓰도록 독려함

6)넷스케이프가 지고 익스플로러가 이기게 되었으며 그 이후 DOM 표준을 지원하는 애플의 사파리, 파이어폭스, 모질라, 카미노, 오페라, 퀀커러 등이 나왔다.

7)현재는 95% 이상의 웹브라우저들이 표준 DOM을 지원하고 있다.

2.자바스크립트 기본 문법

1)자바스크립트의 escape 문자 = \로 '',"" 따옴표가 겹쳐져서 쓰이는 경우에 따옴표 앞에 사용한다.

3.DOM이란?

1)문서객체모델(DOM) : 문서 내에 있는 내용을 뽑아내서 개념화하는 방법

2)O: Object로 브라우저에서 생성하는 브라우저 객체 모델(BOM)도 이에 해당한다. Window 객체 또한 브라우저 객체 모델에 해당한다. 브라우저 객체 모델은 지금 말하는 DOM과는 상관이 없는 객체다

3)M : Model

4.자바스크립트의 꼭 알아야 할 기본기

1)<a href="javascript:함수"> 와 같은 수도 프로토콜 을 쓰는 것은 안좋은 방법이다. 왜냐하면 자바스크립트를 비활성화한 브라우저에서는 동작하지 않기 때문이다.

2)<a href="#" onclick="함수명"; return false;>와 같은 코드도 안좋은 방법이다. 왜냐하면 href="#"을 쓰면  브라우저에 따라 문서 최상단으로 이동하기도 하고, href가 마우스 모양을 바꿔주는 것 말고는 필요없기 때문이다. 그리고 이 코드도 자바스크립트를 비활성화 시키면 동작하지 않는다.

3)<a href="url" onclick="함수명(this.href)"; return false;>과 같이 사용하면 자바스크립트가 비활성화 되었어도 url을 통해 크롤러가 크롤링을 할 수 있게된다. 하지만 새창으로 뜨지 않는 단점이 있다.

4)html 태그 안에는 될 수 있으면 style 속성이나 자바스크립트를 쓰지 않아야 한다. style 속성은 css를 이용해 분리해 코딩을 하는데 자바스크립트는 잘 분리되지 않고 있다. 자바스크립트 또한 외부 js파일을 만들고 각태그들의 class,id값을 통해 이벤트 핸들러를 만들어 주도록 코딩하는게 맞는 방법이다. 

5)외부 js파일에 이벤트 핸들러를 만든 경우 DOM객체가 모두 불려진 후에 함수를 동작해야 제대로 동작이 된다. 그렇기 때문에 예전 자바스크립트에서는 window.onload 함수를 사용했었는데 onload에는 몇가지 단점이 있었다. 이 함수는 페이지 안의 이미지나 외부 파일이 로드 될때까지도 기다린 후에 사용되기 때문에 엔드유저 입장에서 불필요하게 로딩시간이 길어지게 된다. 더욱 심각한것은 동일한 페이지 내에서 onload 함수는 하나만 존재해야 한다는 것인데, 만약 외부 라이브러리에서 onload가 이미 선언 되어 있다면 이를 찾거나 하나로 합치는 것은 여간 어려운일이 아니다.

 그래서 jquery에서 대안으로 ready함수를 제공한다. $(document).ready() 함수 또한 onload와 같이  DOM트리 생성 직후에 호출되는 함수로 여러개의 선언도 가능하고, 외부 리소스가 불려지기 전에 호출되기 때문에 효율적이다.

(참고 : http://jinolog.com/programming/javascript/2011/03/21/jquery-ready-function.html)

6) 브라우저 버전에 따라 지원하는 자바스크립트 함수가 달라진다. 이것을 확인하는 방법이 있는데 if(!함수) { alert("지원안함"); } 과 같이 함수명을 if문에 넣으면 그 객체가 생성되는지 아닌지 알 수 있다. 이 방법은 브라우저 하위 호환을 위해 사용될 수 있다.