01. 자바스크립트란 무엇인가?

1.1 자바스크립트의 역사

통신환경이 열악하던 때, 클라이언트에서 간단한 데이터 유효성 검사를 위해 고안된 언어 표준이 없어, 브라우저 제조사별로 독자적인 스크립트 언어를 만들었음 같은 내용을 브라우저별로 다르게 개발해야 하는 불편함으로 인해 표준화에 대한 요청이 생김 ECMA에서 스크립트 언어에 대한 표준명세인 ECMAScript를 발표 이후, 브라우저마다 해당 명세를 기준으로 동작하도록 개발하였음

1.2 자바스크립트 구현

자바스크립트 = ECMAScript + DOM + BOM

ECMAScript:

• 실행환경(브라우저, 노드, 어도비 플래시 등)에서 독립적인 언어 그 자체
• 판 - 버전을 가리키는 말, 5판인 ES5부터 잘 자리잡았다고 평가됨

DOM:

• HTML을 document 하위 노드의 계층 구조로 변환하는 API

BOM:

• 브라우저 객체에 접근할 수 있는 API
• 예) location, window, navigator, screen 객체

02 HTML 속의 자바스크립트

Script 태그

HTML 속에서 자바스크립트를 실행하는 방법

• 인라인 자바스크립트 / 외부 자바스크립트(src 프로퍼티 사용)
• 어트리뷰트
  • src: 외부 자바스크립트 파일의 URI를 표기
  • type: 자바스크립트 버전 또는 모듈 타입으로 임포트될 수 있음을 표기
  • async: 비동기로 내려받고, 즉시 실행 / 동적으로 실행한 스크립트 엘리먼트는 기본으로 async true, 그렇지 않으면 async false (DOMContentLoaded를 보장할 수 없음. 다만, onload 전))
  • defer: 즉시 내려받고, HTML DOM 엘리먼트가 구조화된 후에 실행됨 (domContentLoaded 이전)
• 주의 사항: 내부 코드에 </script>가 있으면 안 된다.
• 일반적으로 선언된 순서대로 실행된다.
• html 태그의 위치: HEAD에 모아서 X
  • 왜? 모든 자바스크립트 파일이 로드되고, 실행되기 전까지 브라우저 렌더링이 멈춘다
  • 그럼 어떻게? body 뒤에 모아서 넣는다.

<!DOCTYPE> 표준모드

• DOM 객체의 버전을 명시하는 방법(다큐먼트가 어떻게 해석될 지 정하는 것)
• DOM이 표준화되지 않았을 때, 넷스케이프 버전, 인터넷익스플로러 버전 등 브라우저에 맞는 파싱 방법을 지정하는 것이었음
• 현존하는 브라우저는 모두 표준모드
• 인터넷 익스플로러 9 또는 그 이전 버전에서는 DOCTYPE 이전에 주석이나 XML 선언부 등 무엇이든 작성된 상태라면 해당 문서를 호환 모드로 렌더링하게 된다. (주의!)

출처

https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Browser_compatibility