Blog

2장 HTML 속의 자바스크립트

March 19, 2014

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> 바로 앞에 두는게 좋다.