Changes between Version 3 and Version 4 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Jun 16, 2010, 10:17:35 AM (16 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v3 v4  
    5252
    5353{{{
    54 <input type="button" value="hoge" onclick="alert('hoge');">
     54  <input type="button" value="hoge" onclick="alert('hoge');">
    5555}}}
    5656
    … …  
    7171このような、「○○されたら××する」というプログラム上の仕組みのことを、'''イベントハンドラ'''と呼びます。多くの場合、 !JavaScript はイベントハンドラから実行されるように記述します。
    7272
    73 === <script> タグ ===
     73== <script> タグ ==
    7474
    7575HTML 要素の属性値として !JavaScript を記述することができるのは分かりましたが、これだけだと、より長くて複雑なプログラムを記述したい場合には不便です。
    … …  
    8282
    8383<head>
    84         <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
    85         <title>hoge</title>
    86 <script type="text/javascript" language="JavaScript"><!--
     84  <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
     85  <title>hoge</title>
     86  <script type="text/javascript" language="JavaScript"><!--
    8787function putHoge() {
    8888    var span = document.createElement("span");
    … …  
    9090        position = "absolute";
    9191        left = (Math.floor(Math.random() *
    92             (window.innerWidth ? window.innerWidth : document.documentElement.clientWidth))) + "px";
     92            (window.innerWidth ? window.innerWidth :
     93            document.documentElement.clientWidth ? document.documentElement.clientWidth :
     94            document.body.clientWidth))) + "px";
    9395        top = (Math.floor(Math.random() *
    94             (window.innerHeight ? window.innerHeight : document.documentElement.clientHeight))) + "px";
     96            (window.innerHeight ? window.innerHeight :
     97            document.documentElement.clientHeight ? document.documentElement.clientHeight :
     98            document.body.clientHeight))) + "px";
    9599    }
    96100    span.appendChild(document.createTextNode("hoge"));
    … …  
    103107
    104108<form>
    105 <input type="button" value="hoge" OnClick="putHoge();">
     109  <input type="button" value="hoge" onclick="putHoge();">
    106110</form>
    107111
    … …  
    112116</html>
    113117}}}
     118
     119さて、先ほどのプログラムと比べると、今回のプログラムはかなり複雑です。今はプログラムの内容は気にせず、プログラムが記述されている場所と、その雰囲気に注目してください。
     120
     121先ほどと同様、今回も <input> タグには onclick 属性が指定されています。
     122
     123{{{
     124  <input type="button" value="hoge" onclick="putHoge();">
     125}}}
     126
     127しかし、そこに書かれているのは、 putHoge という名前の、恐らくは関数呼び出しに見える (後ろに丸かっこが付いているので) もののみが記述されています。
     128
     129HTML ファイルの上の方に、なんだか見慣れない記述がありますね。以下の部分です。
     130
     131{{{
     132  <script type="text/javascript" language="JavaScript"><!--
     133function putHoge() {
     134    var span = document.createElement("span");
     135    with (span.style) {
     136        position = "absolute";
     137        left = (Math.floor(Math.random() *
     138            (window.innerWidth ? window.innerWidth :
     139            document.documentElement.clientWidth ? document.documentElement.clientWidth :
     140            document.body.clientWidth))) + "px";
     141        top = (Math.floor(Math.random() *
     142            (window.innerHeight ? window.innerHeight :
     143            document.documentElement.clientHeight ? document.documentElement.clientHeight :
     144            document.body.clientHeight))) + "px";
     145    }
     146    span.appendChild(document.createTextNode("hoge"));
     147    document.getElementById("hoge_place").appendChild(span);
     148};
     149//--></script>
     150}}}
     151
     152この、 <script> タグに囲まれた部分も、 !JavaScript プログラムです。そしてこのプログラム、
     153
     154{{{
     155function putHoge() {
     156}}}
     157
     158で始まっていることから分かるように、先ほど <input> 要素の onclick 属性で呼び出そうとしていた putHoge() 関数の定義であることが、何となくおわかりいただけるかと思います。
     159
     160このように、通常は <script> タグを用いて複雑な処理を行う'''関数'''を記述し、その関数をイベントハンドラから呼び出す、というスタイルで記述されるのが一般的です。
     161
     162なお、上記の例では HTML 4.01 で記述している為、<script> タグの内側は HTML のコメントタグ (<!-- ～ -->) で包んでいます。これには以下の 2つの理由があります。
     163
     164 * <script> タグに対応していない古いブラウザや未知のブラウザでも、画面上に !JavaScript のプログラムを表示してしまわないようにする為。
     165 * !JavaScript 中に出現する不等号記号 (<, >) が、 HTML タグと混同されてしまうのを防ぐ為。
     166
     167一方、 XHTML で記述する場合には、 <script> タグの内側に記述するプログラムを HTML のコメントタグで包むことは禁止されています。 XHTML であれば、 <script> タグには必ず対応しているので、画面上に !JavaScript のプログラムを表示してしまう危険性はありませんが、不等号記号が HTML タグだと誤解されるが故の誤動作の危険性は残っています。それを防ぐ為、 XHTML の場合は以下のように、コメントタグの代わりに <![CDATA[ ～ ]]> で囲うようにする必要があります。
     168
     169{{{
     170  <script type="text/javascript" language="JavaScript">
     171// <![CDATA[
     172function putHoge() {
     173    // (...省略)
     174};
     175// ]]>
     176</script>
     177}}}
     178
     179=== !JavaScript のみを別ファイルに記述する ===
     180
     181<script> タグを用いれば、 !JavaScript で記述された複雑な処理のプログラムを、 HTML ファイルとは別のファイルに記述して実行させることも可能です。
     182
     183その場合、 HTML ファイルは以下のように記述します。
     184
     185{{{
     186<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     187<html>
     188
     189<head>
     190  <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
     191  <title>hoge</title>
     192  <script src="hoge.js" type="text/javascript" language="JavaScript"></script>
     193</head>
     194
     195<body>
     196
     197<form>
     198  <input type="button" value="hoge" onclick="putHoge();">
     199</form>
     200
     201<div style="position: absolute; left: 0; top: 0;" id="hoge_place"></div>
     202
     203</body>
     204
     205</html>
     206}}}
     207
     208そして、 hoge.js ファイルは以下のような内容となります。といっても、前のサンプルで <script> タグの内側に記述していた内容と全く同じです。もちろん、 HTML コメントタグ <!-- ～ --> や CDATA セクション <![CDATA[ ～ ]]> で囲う必要はありません。
     209
     210{{{
     211function putHoge() {
     212    var span = document.createElement("span");
     213    with (span.style) {
     214        position = "absolute";
     215        left = (Math.floor(Math.random() *
     216            (window.innerWidth ? window.innerWidth :
     217            document.documentElement.clientWidth ? document.documentElement.clientWidth :
     218            document.body.clientWidth))) + "px";
     219        top = (Math.floor(Math.random() *
     220            (window.innerHeight ? window.innerHeight :
     221            document.documentElement.clientHeight ? document.documentElement.clientHeight :
     222            document.body.clientHeight))) + "px";
     223    }
     224    span.appendChild(document.createTextNode("hoge"));
     225    document.getElementById("hoge_place").appendChild(span);
     226};
     227}}}
     228
     229大規模な Web アプリケーションの場合、HTML 自体がサーバーサイドで動的に生成され、そこから !JavaScript で記述された同一の処理を実行する、といった作りになることが多い為、このような方法で !JavaScript のみを別ファイルで記述する方がより一般的です。