JavaScriptの実用例(2)

前回、HTML文書の中にJavaScriptを混在させて、その実行結果がHTMLの一部になって表示に使われるという話をしました。

document.writeで出力する内容は、HTMLのタグが混じっていても大丈夫です。だから、下のようなものを書いても期待通りに動きますよ。Aタグの書き方は知っているという前提で、そこは詳しく説明しませんが。

<html>
<body>
hello
<script>
document.write('<a href="http://w3c.org/">world</a>');
</script>
how do yo do
</body>
</html>

(実際のサンプル)

でも、実際のところ、これだけでは大して役に立ちません。document.writeで決まった文字列を出力させるくらいなら、最初から全部HTMLで書いておけばよかっただけですからね。

このJavaScriptの部分を、別のファイルとして独立させてしまうと、ちょっとは役に立てられそうな気がしてきます。たとえば直前の例なら、下のような二つのファイルに分けてしまうんです。

<html>
<body>
hello
<script src="./sample2.js"></script>
how do yo do
</body>
</html>
// これを sample2.js とします
document.write('<a href="http://w3c.org/">world</a>');

ひとつめにはHTMLだけ、ふたつめにはJavaScriptだけ書かれています。そしてHTMLの途中には、「ここにはsample2.jsっていう外部スクリプトを読み込むよ」っていう意味のscriptタグが書いてあります。Webブラウザの上でHTMLのほうを表示させると、内部的にJavaScriptも指定位置に読み込まれて、その内容が実行されるというわけです。

実行結果は直前のと同じですが、一応見ておきましょう。(実際のサンプル)

もしもHTMLが割と大きなもので、毎日ちょっとだけ決まって更新される部分があるとします。たとえば何かの公共機関のページでも扱っていて、本日の開館・閉館予定時刻なんかをトップページの決まった位置に表示したくなったときなんかどうでしょう。制約条件として、トップページ自体は、PHPのようなものでなく、素のHTMLだとします。(トップページで、開館・閉館時間以外にろくな変化がないってのも例としてはおかしいんですが…)

そんな場合の対応策のひとつとして、HTML内の、新たに表示を足したい部分にscriptタグを書き足します。そして、それが読み込む外部JavaScriptには、例えば下のような命令が書かれているようにするわけです。

document.write('本日の閉館時間は、午後4時30分です。');

直す部分が大きなHTMLファイルでなく、とても小さいサイズのJavaScriptだけで済むわけですから、少し気楽になるでしょう? 大きなHTMLファイルを操作ミスで壊してしまうのは怖いですから、そこらへんも安心感が増します。ページ全体をPHPみたいなサーバーサイド生成のものに変更する必要も、ひとまずはなくなりました。

f:id:yamatt2:20131022211408j:plain

ところで、直前のJavaScriptの例は、日本語が混じっています。日本語をこうして扱うことは全く問題ありませんが、JavaScriptのファイルエンコーディングがちゃんと把握されているか、そこは少し注意が必要です。下のように、例えばsample3.jsという外部スクリプトを使おうとして、それがUTF-8エンコードされている場合は、明示的に下のように書くのが適切です。

<script src="./sample3.js" charset="utf-8"></script>

適切…といえば、今までの例で、単純に書こうとしていくつか適切さを犠牲にした部分がありましたので、そこは改めて書いておきます。

ひとつは、HTMLをもう少し丁寧に書いたほうがいい件。ちゃんとHTML宣言とかmetaタグとかtitleタグとかを書き足しておきましょう。文字のエンコーディングも、UTF8ならUTF8とはっきり宣言しておかなくてはいけません。

もうひとつは、scriptタグは、スクリプトの内容がJavaScriptであることを本来は明示しなければいけないこと。省略しちゃってもたいていは大丈夫なんですが、これも正しくは、type="text/javascript" という属性をちゃんとつけておくべきです。

もうひとつは、document.writeしたあとは、本来、document.closeで書き出し終了を宣言しなくてはいけない、とされている件。省略しちゃってもたいていは問題なく動くのですが、余計なトラブルで悩まないように、これも書き足しておくといいらしいです。だからJavaScriptを外部から読み込んで実行するHTMLと、そのJavaScriptのセットは、下のようにするのがより適切です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>page sample</title>
</head>
<body>
hello
<script src="./sample2.js" type="text/javascript" charset="utf-8"></script>
how do yo do
</body>
</html>
// これを sample2.js とします
document.write('<a href="http://w3c.org/">world</a>');
document.close();

ちょっと七面倒な雰囲気になっていますが、本質はさっきまでの単純なやつと変わりません。いきなりこれ見ると、目がくらんでどこが重要かわかんなくなっちゃいそうでしたから。

さて、JavaScriptファイルだけをまめに更新することにしてちょっと楽できる、ということが実現できると、やがて次のような望みに育っていきます。すなわち、毎日お決まりの内容に更新されるような部分だったら、JavaScriptの内容に工夫を加えて、手で毎回更新するまでもなく、もっと自動的に賢い動作をするようにできないか、ということです。

JavaScriptは「プログラム言語」なんですから、当然そういったことがいろいろできますよ。

(つづく)

広告を非表示にする