JavaScriptコードの外部ファイル化

http://allabout.co.jp/contents/print_gs_c/javascript/CU20050228A/index/を見ながら遊んでみる。

JavaScriptコードの記述方法は以下のとおり。前回は1.と3.を併用して記述しました。今回はHTMLとJavaScriptを完全に分離させたいので、イベントハンドラをHTMLから分離させるとともに上記2.を目指します。

script要素内にJavaScriptコードを記述する

scriptタグのsrc要素から、JavaScriptコードを記述した外部ファイルを読み込む

HTMLのタグの属性としてイベントハンドラを設定し、属性値にJavaScriptコードを記述する

URL内にJavaScriptコードを記述する

独習JavaScript

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="shortcut icon" href="favicon.ico" />
<title>base.html</title>
<script type="text/javascript" src="./requestData.js"></script>
</head>
<body>
<form id="form" name="form">
	<input type="text" name="q" size="55" value="" />
	<input type="button" name="btn" value="検索" />
<pre id="content"></pre>
</form>
</body>
</html>

JavaScript

window.onload = function init(){
	/**
	 * 検索ボタンが押されたら起動します
	 */ 
	document.form.btn.onclick = function requestData(){
		// XMLHttpRequestオブジェクトを生成します
		try {
			// Win IE6以上の場合
			xmlReq = new ActiveXObject( "Msxml2.XMLHTTP" );
			} catch (e){
				// Win IE以外のXMLHttpRequestオブジェクト実装ブラウザ用
				xmlReq = new XMLHttpRequest();
			}
(snip)

実行結果

html→JavaScriptの順にロードされる。

二回目以降はどちらもキャッシュが効いて、コンテンツのみが通信路を流れる。