HTML과 자바스크립트
자바스크립트는 출현 즉시 HTML에 포함되었습니다.
넷스케이프는 자바스크립트가 다른 브라우저의 HTML페이지 렌더링을 방해하지않으면서 공존할 길을 모색했습니다.
이번 포스트에서는 HTML속에서 어떻게 자바스크립트를 사용하는지 알아봅시다.
script요소
자바스크립트를 HTML 페이지에 삽입하는 일차적인 방법은 script 태그를 사용하는 것입니다.
script 요소는 두가지 방식으로 사용합니다.
자바스크립트 코드를 페이지에 직접 작성하거나, 외부파일에서 불러올 수 있습니다.
인라인 스크립트
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
스크립틑 요소 내부의 자바스크립트 코드는 위에서부터 차례대로 해석됩니다.
인라인 자바스크립트 코드 사용시 문자열 /script는 쓸 수 없습니다.
아래 예제를 봅시다.
<script type="text/javascript">
function sayHi(){
alert("</script>!");
}
</script>
인라인 스크립트 파싱하는 방식때문에 alert문자열로 작성한 태그를 닫는 태그로 인식합니다. 그럴때는 아래와 같이 쉽게 해결할 수 있습니다.
<script type="text/javascript">
function sayHi(){
alert("<\/script>!");
}
</script>
‘\’문자로 쉽게 해결이 가능합니다.
외부 자바스크립트 파일 불러오기
외부파일에서 자바스크립트를 불러 올수도 있습니다.
<script type="text/javascript" src="example.js"></script>
example.js란 외부파일을 불러옵니다.
이 파일에는 오직 자바스크립트만 들어가며 script, \script태그를 사용하면 안됩니다.
<script type="text/javascript" src="example.js" />
XHTML문서에서는 다음과 같이 닫는태그를 생략 할 수도 있습니다.
src속성을 사용하여 외부 파일을 가져온 경우 인라인 코드는 무시됩니다.
주의사항
src속성 사용시 외부 도메인을 원래 일부였던 것처럼 불러와서 해석합니다.
그렇기 때문에 다양한 도메인에 존재하는 자바스크립트를 필요한 만큼 사용할 수 있지만 반대로 악의적으로 해당파일을 바꿔버린다면 낭패를 볼수도 있습니다.
그러니 신뢰할 수 있는 곳에서 관리하는 도메인의 파일만 이용하는것을 권장하고 있습니다.
script요소는 페이지에 나타난 순서대로 실행되며 예외는 defer, async 속성이 있을 때 뿐입니다.
첫 번째 script요소를 해석 한 후 두 번째 script 요소를 해석 한후 세 번째 코드를 해석 하는 순입니다.
태그 위치
전통적으로 script요소는 페이지의 head요소 안에 쓰는것이 일반적이었습니다.
하지만 자바스크립트 파일을 전부 head요소에서 불러온다면 코드를 전부 내려받고, 파싱하고, 해석을 끝낼 때까지 페이지 렌더링이 멈추게 됩니다.
브라우저는 body 태그를 만나며 페이지 렌더링을 시작하기 때문입니다.
그런 이유로 최신 웹 애플리케이션에서는 일반적으로 다음과 같이 body 요소 안, 페이지 콘텐츠 마지막에 씁니다
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<!--페이지콘텐츠-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
이렇게 하면 브라우저는 페이지 렌더링을 모두 마친 다음 자바스크립트 코드를 처리합니다.
빈화면만 떠있는 시간이 줄어 사용자는 페이지가 빠르다고 느낄것입니다.
스크립트 처리 지연
script요소에는 defer이라는 속성이 있습니다.
defer속성의 목적은 스크립트에서 페이지 구조를 바꾸지 않는다고 명시하는 것 입니다. 따라서 페이지 전체를 파싱한 후에 스크립트를 실행해도 상관없습니다.
defer 속성을 설정 시 브라우저는 해당 요소를 만날경우 스크립트 코드는 내려받지만 실행은 지연합니다.
아래 예제를 봅시다
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<script type="text/javascript" defer src="example1.js"></script>
<script type="text/javascript" defer src="example2.js"></script>
</head>
<body>
<!--페이지콘텐츠-->
</body>
</html>
이 예제의 스크립트는 head에 있지만 defer속성 때문에 /html태그를 만날 때 실행됩니다.
하지만 defer 스크립트는 지연 순서대로 실행된다는 보장이 없습니다.
그러니 가능하면 하나만 쓰는 것이 최선입니다.
defer경우 외부 스크립트 파일을 불러올 경우만 유효하며 인라인 스크립트의 defer속성은 무시합니다.
defer경우 브라우저 버전별로 속성을 무시하는 경우도 있으니 결국 지연시킬 스크립트는 페이지 맨 마지막에 놓는 편이 최상의 선택입니다!
비동기 스크립트
HTML5에서는 async 속성을 도입했습니다.
async 속성은 defer속성과 비슷한 방법으로 스크립트를 처리합니다.
외부 스크립트에만 적용되며, 브라우저에게 파일을 즉시 내려받으라고 지시하는점 역시 비슷합니다.
목적
스크립트를 모두 내려받아 실행할 때 까지 기다릴 필요 없이 페이지 렌더링을 시작해도 좋음
앞선 스크립트 파일을 기다리지 않고 뒤에있는 스크립트 파일을 내려받아 실행해도 좋음
위와 같은 이유로 DOM을 조작하는 스크립트나 의존성이 있는 스크립트에서는 사용을 하지 않는 것이 좋습니다.
이와 관련된 자세한 기능은 이후 포스트에서 자세히 설명할 예정입니다.
문서모드
IE는 문서모드라는 개념을 도입했습니다.
쿽스모드와 표준모드 두가지 입니다.
쿽스모드
IE버전 5 인것처럼 행동하며 여러 비표준 기능을 사용합니다.
표준모드
좀 더 표준에 가까운 방식으로 동작합니다.
두 모드 사이의 차이는 콘텐츠 렌더링과 관련된 것이지만 자바스크립트에도 영향이 있습니다.
IE가 처음으로 문서모드라는 개념을 도입한 이후 다른 브라우저들도 이를 도입하였고 ‘거의 표준 모드’라고 부릅니다.
이 모드는 표준모드의 기능을 대부분 지원하지만 표준모드처럼 엄격하지는 않습니다.
다음 중 한가지 독타입을 쓰면 표준모드가 사용됩니다
<!-- 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>
거의 표준모드는 트랜지셔널이나 프레임셋 독타입에서 사용됩니다.
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 Frameset-->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 Transitional-->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 Frameset-->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-freamset.dtd">
거의 표준 모드의 경우 표준 모드와 대단히 유사하기 때문에 차이를 느끼기 어렵습니다.
사람들이 표준모드를 말할 때는 두 모드 모두를 말하는 것입니다.
표준 모드라고 하는 용어는 쿽스 모드를 제외한 ‘표준모드’, ‘거의표준모드’라고 생각하시면 됩니다.
noscript 요소
자바스크립트를 지원하지 않는 초기 브라우저에 대해서 대체 콘텐츠를 제공하기 위해 만들어 진 요소입니다.
noscript는 아래 조건을 만족한 경우 렌더링 됩니다.
- 브라우저가 스크립트 지원을 안할 때
- 브라우저의 스크립트 지원이 꺼졌을 때
아래 예제를 봅시다
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<script type="text/javascript" defer src="example1.js"></script>
<script type="text/javascript" defer src="example2.js"></script>
</head>
<body>
<!--페이지콘텐츠-->
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>
스크립트를 사용 할 수 없을 때 noscript에 메시지가 사용자에게 보이게 됩니다.
스크립트가 활성화된 브라우저에서는 메시지가 페이지의 일부이긴 하지만 사용자에게는 절대 표시되지 않습니다.
마치며
HTML에서 script요소를 사용하는 방법, 문서모드, noscript요소에 대해서 알아보았습니다.
아직까진 JavaScript가 무엇인지 맛도 못보고 있었지만 다음 포스트부터는 본격적으로 JavaScript에 대해서 알아보겠습니다.