1-2-2.스크립트의 위치
스크립트 코드를 작성하는 <script> 태그는 HTML 문서의 어느 곳에나 필요할 때 삽입해 넣을 수 있다. 페이지를
동적으로 생성할 때는 <body> 태그의 적당한 곳에 작성한다. 앞 예제는 조사한 날짜를 문자열로 조립하여 페이지에 출력하므로
<body> 태그 안에 스크립트를 작성했다.
브라우저는 HTML 파일을 순서대로 읽어서 실행하므로 스크립트가 있는
위치에 문자열이 출력된다. 스크립트 코드를 <head>에
작성하면 <body>보다 먼저 실행되므로 출력 순서가 달라진다. 앞 예제를 다음과 같이 수정하여 <script> 태그를 <head>로 옮겨 보자.
jshead.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>jshead</title>
<script>
var
now = new Date();
document.write("현재
시간 : " + now);
</script>
</head>
<body>
<p>현재
시간을 표시합니다.</p>
</body>
</html>
브라우저는 <head>를 먼저 처리한 후 <body>를 처리하므로 현재 시간이 먼저 출력되고 본문의
<p> 태그 문단이 나중에 출력된다. 이 경우에는 시간을 표시한다는 안내문이
먼저 와야 하므로 <body>에 스크립트를 작성하는 것이 더 적합하다.
자주 사용하는 기능은 함수로 미리 정의해 놓고 필요할 때 호출한다. 함수는
호출하기 전에 미리 정의하는 것이 상식적이므로 페이지가 로드될 때인 <head> 태그에 작성하는
것이 일반적이다. 다음 예제는 <head> 태그에
시간 출력 코드를 outdate라는 함수로 정의하고
<body> 태그에서 이 함수를 호출한다. 스크립트 코드는 어디에나 올 수 있으며
여러 번 넣어도 상관없다.
jsheadbody.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>jsheadbody</title>
<script>
function
outdate() {
var
now = new Date();
document.write("현재
시간 : " + now);
}
</script>
</head>
<body>
<p>현재
시간을 표시합니다.</p>
<script>
outdate();
</script>
</body>
</html>
<head>에서는 날짜를 바로 출력하는 함수 outdate만 정의한다. <body>에서 outdate() 함수를 호출하는 코드가 <p> 태그보다
뒤쪽에 있으므로 안내문이 먼저 출력되고 현재 시간이 출력된다. 순서를 바꾸면 물론 반대로 출력될 것이다. 이 책은 예제 작성의 편의상 살펴볼 코드를 한곳에 모으기 위해 가급적이면
<body>의 아래쪽에 스크립트를 작성하였다.
스크립트의 내용이 아주 길고 복잡할 때는 아예 별도의 파일로 분리하여 작성할 수도 있다. 이때 스크립트 파일에는 <script> 태그를 쓰지 않고
순수한 자바스크립트 코드만 작성하며 확장자 .js로 저장한다.
HTML 문서에 포함되어 실행되므로 같은 문자셋으로 작성해야 한다.
outdate.js
var now = new Date();
document.write("현재 시간 : " + now);
날짜를 조사 및 출력하는 코드만 작성하여 outdate.js파일로
저장했다. 이 파일을 HTML 문서와 같은 폴더에 저장하고 <script> 태그의 src 속성으로 파일의 이름을 밝힌다. 상대 경로나 절대 경로를 사용하여 임의의 위치에 두더라도 위치만 정확하게 밝히면 상관없다. 다음과 같이 수정해 보자.
jsoutdate.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>jsoutdate</title>
</head>
<body>
<p>현재
시간을 표시합니다.</p>
<script
src="outdate.js"></script>
</body>
</html>
outdate.js의 코드가 <script>
태그 위치에 삽입되어 실행되므로 출력 결과는 같다. 주의할 것은 <script> 태그 안에 내용이 없다고 해서 다음과 같이 적어서는 안된다는 것이다. <script> 태그는 빈 태그가 아니므로 설사 내용이 없더라도 닫는 태그를 반드시 써야 한다.
<script src="outdate.js" />
스크립트를 별도의 파일로 분리해 두면 관리하기 쉽다는 이점이 있다. 여러
페이지에 공통으로 사용되는 코드를 외부 파일로 작성해 놓으면 일괄적으로 수정할 수 있으며 잘 작성된 코드를 다른 프로젝트에 재사용하기도 수월하다. 기획자와 개발자가 분담해서 작업하기도 용이하며 반복적으로 사용되는 코드가 한번만 다운로드되므로 네트워크 대역폭도
절약된다.
기능적으로 서로 다른 모듈을 분리하면 단점보다는 장점이 훨씬 더 많은 것이 일반적이다. 그래서 실제 프로젝트에서는 짧은 코드라도 스크립트는 별도의 분리된 파일로 작성하여 관리한다. 단, 이 책에서는 일일이 파일을 따로 작성하면 실습이 번거롭고 코드를
한눈에 살펴 보기도 어려우므로 가급적이면 HTML 파일안에 스크립트를 작성하기로 한다.