2장 HTML 속의 자바스크립트
– 자바스크립트가 처음 나왔을 때 HTML에 종속되었다.
– HTML과 분리되면서 공존하는 길을 찾아보게 되었고 이를 통해 HTML명세서가 만들어 졌다.
1. <script>
– 속성 1. async : [옵션] 자원을 받거나 다른 스크립트 불러오기 등 페이지 작업 방해하는 것을 막음. (외부 자원을 받을 때)
– 속성 2. charset : [옵션] 코드의 문자셋 지정. 잘 안 씀.
– 속성 3. defer : [옵션] 콘텐츠 완벽 파싱 후 스크립트 실행해도 안전함을 나타냄.(외부 자원 받을 때) ; IE7이하에서는 인라인 스크립트에서도 이 속성 O
– 속성 4. language : [폐기] ‘JavaScript’, ‘JavaScript1.2’, ‘VBScript’ 등등 하려 했으나 브라우저에서 무시함.
– 속성 5. src : [옵션] 실행할 외부 파일의 위치
– 속성 6. type : [옵션] ‘text/javascript’이 기본값.
– 인라인 자바스크립트 코드 : <script> 요소 안에 직접 작성된 코드
– 인라인 자바스크립트 코드 내에서는 </script>를 쓸 수 없다. » 에러
– ‘/’ 때문인데 ‘\’를 이용해 이스케이프 해서 해결 할 수 있다.
– 외부js는 <script type=”text/javascript” src=”example.js”></script> 요롷게
– example.js 안에는 오직 자바스크립트만 있어야 한다.
– example.js 안에는 <script> </script>는 생략
– <script ~~~~~ /> 도 가능하다. 하지만 HTML 문법에 맞지않고 IE에서는 제대로 처리 되지 않으므로 이렇게 쓰지 않는게 좋다.
– 다른 도메인에 있는 자바스크립트도 불러올 수 있다.
– <script type=”text/javascript” src=”http://www.somewhere.com/afile.js”></scrpit>
1.1 태그 위치
– <haed> : 자바스크립트 코드 내려받고 > 파싱 > 해석 > 페이지 렌더링 시작
: 스크립트 불러오는 동안 렌더링이 안되 빈 페이지 노출.. GG..– <body> 마지막 : 페이지 렌더링 > 자바스크립트 시작
: 우선 페이지가 뜨므로 사용자에게 편리
– defer 설정 : 해당 요소를 만나면 코드를 즉시 받지만 실행은 </html> 이후.
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” defer src=”example1.js”> </script>
<script type=”text/javascript” defer src=”example2.js”> </script>
</head>
<body>
<!— 페이지 콘텐츠 —>
</body>
</html>
– defer로 지연시킨 스크립트가 순서대로 실행 된다는 보장 없음.
– 외부 스크립트 파일 불러올때만 유효.
– defer 속성은 IE4, firefox 3.5, safari 5, chrome 7 부터 지원
– 그러므로……. 여전히 </body>직전에 놓는게 좋다.
– async 설정 : defer와 비슷, 스크립트가 마크업 순서대로 실행 ㄴㄴ
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” async src=”example1.js”> </script>
<script type=”text/javascript” async src=”example2.js”> </script>
</head>
<body>
<!— 페이지 콘텐츠 —>
</body>
</html>
– example1.js와 example2.js가 서로 의존성이 있으면 망가질수 있음.
– 스크립트 실행이 DOMContentLoaded 이 전일수도, 이 후일수도 있음.
– firefox 3.6, safari 5, chrome 7 부터 지원.
1.2 XHTML : HTML에 XML을 적용한 것. 코드 규칙이 매우 엄격.
– ex. 비교연산자 ‘<’를 태그로 인식 » CDATA로 감싸줘야 함.
<![CDATA[ ~~ ]]>
– XHTML비호환 브러우저의 경우
//<![CDATA[ ~~ ]]>
– type = “application/xhtml+xml” 도 가능 but 브라우저를 탄다.
2. 인라인 코드와 외부 파일
외부파일로 쓰면 좋은점!
1. 관리하기가 쉽다.
2. 캐싱 : 한번 파일을 사용하면 페이지 불러오는 시간이 짧아진다.
3. 안전 : 앞 서 본 CDATA 같은거 안써도 됨. HTML, XHTML 모두 똑같이 불러옴
3. 문서 모드
– doctype을 설정하지 않으면 쿽스 모드( :비표준 기능을 사용, 브라우저마다 다름)
– 표준모드
<!— HTML 4.01 Strict —>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”><!— XHTML 1.0 Strict —>
<!DOCTYPE html PUBLIC
”-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><!— HTML5 —>
<!DOCTYPE html>
4. <noscript>
– 브라우저가 자바스크립트를 지원 하지 않을 때
– 브라우저의 스프립트 지원이 꺼져 있을 때
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>
– 위 두 상황이 아니라면 <noscript> 내 컨텐츠는 노출되지 않는다.
요약
– 외부 자바스크립트 파일은 <script src=”~~”> </script>
– 랜더링 순서 때문에 </body> 바로 앞에 두는게 좋다.
