javascriptの埋め込み

javascriptはいろいろな場所に埋め込むことができます。今回は、document.write()を(1)HTML文書内,(2)外部ファイル, (3 - a)ブラウザで直接実行 (3 - b) の4パターンにわけてみたいと思います。


(1)HTML文書内

$ vim hello1.html


 <html>
<head>

<!-- HTML 4からmetaタグでデフォルトスクリプト言語をしていることが推奨されている -->
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Hello, javascript</title>
</head>


<body>

<script language="JavaScript" type="text/javascript">
<!--   
        document.write("Hello embedded in body.");
// -->
</script>

</body>

</html>


$ open hello1.html





(2)外部ファイル
$ vim hello2.html

<html>
<head>

<!-- HTML 4からmetaタグでデフォルトスクリプト言語をしていることが推奨されている -->
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello, javascript</title>
</head>

<body>

<!-- 外部ファイルを読み込ませて事項するためにはsrc属性を追加すればよい -->
<script language="JavaScript" type="text/javascript" src="./hello.js">
</script>

</body>
</html>


$ vim hello.js

document.write("Hello embedded in the external source file.");

$ open hello2.html





(3 - a)ブラウザで直接実行
なにかページを開いている状態で、下の一行をアドレスバーへ入力
:javascript:alert("Hello in the address bar.")




(3 - b)リンクから実行

$ vim hello3b.html



<html>
<head>

<!-- HTML 4からmetaタグでデフォルトスクリプト言語をしていることが推奨されている -->
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Hello, javascript</title>
</head>


<body>

<!-- リンク先にjavascriptのコードを入力することでリンク先としてコードを実行できる -->
<a href="javascript:alert('hello in link.');">Hello</a>

</body>

</html>

$ open hello3b.html




【参考文献】市井あきら 「 Ajax+JavaScriptコマンドブック」2006  Softbank Creative