js 화일의 개념과 사용하기

*.js 화일 사용조건
*.js 화일 만들기
*.js 화일의 효율성
*.js 화일 사용시 주의점
*.js 화일 엿보기

확장자가 *.js인 화일은 외부 JavaScript 화일입니다. JavaScript 코드만을 가지고 있는 text 화일인데, 이 화일의 용도는 웹 페이지에서 사용할 JavaScript 코드를 화일형태로 페이지에 끼워서 사용할 수 있습니다. nn3, ie3.02 이상에서 지원됩니다.

<script language="JavaScript" src="아무.js"></script>

<img src="이미지경로.jpg"> 로 <img> 택에 이미지의 경로를 지정하는 src 처럼 <script> 택도 SRC attribute를 가지고 있습니다. 이 SRC에 *.js 화일의 경로를 지정하여 사용합니다. 절대경로, 상대경로 모두 지정할 수 있습니다. 그리고 사용하고 있는 웹 서버가 *.js 화일을 지원을 해야합니다. 서버가 지원하지 않는다면 사용할 수 없습니다. 개인용 서버 프로그램에도 마찬가지인데, "application/x-javascript" MIME TYPE을 지정해 주어야 합니다. mime.types 같은 서버설정 화일안에

type=application/x-javascript          exts=js

를 지정하면 *.js 화일을 사용할 수 있습니다. local에서는 mime type을 지정하지 않아도 사용할 수 있습니다. *.js 화일을 자신의 웹 페이지에서 사용할 수 없다면 서버로 사용하고 있는 ISP에게 메일을 보내서 요구를 하세요. 근데, 제 경험상 말하면 답장을 잘 안줄것입니다. :(

*.js 화일 만들기

*.js 화일은 오직 JavaScript 구문만을 작성할 수 있는 text 화일입니다. 그래서 HTML은 넣을 수 없습니다. 작성은 메모장 같은 text edit 로 사용할 JavaScript 구문을 적고 확장자를 *.js로 저장하면 끝입니다. 마찬가지로 읽을 때에도 메모장으로 읽어보면 됩니다.

hello = "안녕하세요.."
function myJs() {
	alert( hello )
}

위의 식으로 작성된 *.js 화일을 페이지에 연결을 해놓았다면 그 페이지에서는 외부변수 hello, 함수 myJs() 를 사용할 수 있습니다. 페이지에서 사용할려면

<a href="#" onClick="myJs()">JS 화일안의 함수 부르기</a>

로 JS 화일안의 함수를 부르면 됩니다. 위의 링크를 누르면 "안녕하세요.."를 alert 창이 보여줍니다.

*.js 화일의 효율성

<script language="JavaScript" src="아무.js"></script>

여러 페이지에서 위의 구문을 넣어 놓았다면 지정한 모든 페이지에서는 "아무.js" 화일의 JavaScript 변수, 함수를 사용할 수 있습니다. 그래서 "아무.js" 화일의 내용을 바꾸어 주면 모든 페이지에서 바꾸어진 JavaScript 코드를 사용할 수 있습니다. 그래서 관리하기가 편리합니다.

또 한가지 좋은 점은 속도를 높일수 있다는 것입니다. 웹 페이지에서 화일이 의미하는 것은 다른 *.html, *.htm 화일처럼 사용할 수 있다는 의미인데, 사용상의 편리함 뿐만이 아니라 페이지의 출력속도도 빨라집니다. 즉, 한번 *.js 화일이 출력이 되면 브라우저의 CACHE에 저장이 됩니다. 그래서, 다른 페이지에서는 같은 이름의 화일은 cache에 있는 *.js 화일을 사용하기 때문에 모든 페이지에 일일이 적는것과 비교하여 문서의 크기를 작게 만들수 있어서 페이지 출력시간을 줄일 수 있습니다.

그리고 어떤 특정한 기능을 하는 코드를 만드는 단위화란 관점에서 *.js 화일로 만들면 다른 페이지에서도 혹은 다른 사람도 쉽게 재사용할 수 있습니다.

이런 좋은 점으로 *.js 화일을 사용하지 결코 코드를 숨기기 위한 것이 아닙니다. 숨길수도 없습니다.

*.js 화일 사용시 주의점

1) nn3에서도 *.js 화일을 사용할 수 있습니다. 하지만, 웹 서버에 올리고 사용하면 nn3에서 오작동하는 버그가 있습니다. 그래서, nn3에서는 *.js 화일을 사용할 수 없습니다.

2) *.js 화일안에 특정 Object를 참조하는 코드가 있다면 주의를 해야합니다. JavaScript는 페이지의 html을 다룹니다. 모든 html을 DOM에 지정된 Object 계층으로 다루기 때문에 *.js 화일안에서는 페이지의 특정 object를 다룰때에는 그 object가 출력이 끝나고 그 object를 다루어야 합니다. 그렇지 않으면 에러가 납니다. 이런 에러를 방지하기 위해서는 주로 body 택의 onLoad 이벤트 헨들러를 사용할 수 있습니다.

3) 여러 페이지에서 같은 js 화일을 사용할 때에는 js 화일이 다루는 object가 모든 페이지에 같이 있어야 합니다. 예를들면 폼 하나를 다루를 코드가 있는데, 한 페이지에는 그 폼이 있고 다른 페이지에는 그 폼이 없다면 없는 페이지에서는 에러가 납니다.

4) nn4에서 *.js 화일안에서 document.write()로 html을 출력시 많은 경우에 에러가 날 수 있습니다. 이 문제를 피하기 위해서는 *.js 화일안에서 직접 document.write()를 사용하지 말고 문자열로만 처리를 하고 이 문자들을 각 페이지에서 불러서 페이지에 적을수 있습니다.

아무.js 화일..

function writeHtml() {
	var out = ""
	for( var i=0; i < 5; i++ ) {
		out += "<HR>"
	}
	return out
}

로 지정한 js 화일을 넣어주고 페이지에서 <script>document.write( writeHtml() ) </script> 로 적으면 페이지에 <HR>을 5개 출력합니다.

5) document.write()로 <script>택을 페이지에 적을때는

document.write("<\script src="아무.js"><\/scrpt>")

로 일반적인 HTML과는 다르게 다음 문자가 특수문자임을 나타내는 \를 넣어주어야 합니다. 백스페이스 바로 옆의 자판(key)입니다.

*.js 화일 엿보기

*.html, *.htm, *.txt, *.css, *.js 같은 text 화일은 view-source:화일경로 로 간단하게 소스를 볼 수 있습니다. 브라우저의 주소 나오는 location 상자에

view-source:http://www.some.com/some.js

를 넣고 엔터하면 some.js 화일의 소스를 브라우저가 보여줍니다.

위의 주소는 예를든 것입니다. 페이지의 소스를 보고 src에 지정되어 있는 *.js 화일의 전체 주소를 넣어주면 됩니다. (어떤 분이 위의 주소를 그대로 넣었다가 안된다는 메일을 받았습니다. :)

--
낙서판에 그리고 메일로 생각보다 많은 분들이 *.js 화일의 개념에 대해서 오해를 하고 있더군요. 그래서 이참에 정리를 했습니다.

TOP Go to Source TOP