Changes between Version 14 and Version 15 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Jun 19, 2010, 11:02:05 AM (14 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v14 v15  
    8080
    8181{{{
    82 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    83 <html>
    84 
    85 <head>
    86   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     82</html>
     83<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     84<html>
     85
     86<head>
     87  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     88  <meta http-equiv="content-style-type" content="text/css">
     89  <meta http-equiv="content-script-type" content="text/javascript">
    8790  <title>hoge</title>
     91<script type="text/javascript" language="JavaScript"><!--
     92function putHoge() {
     93    var span = document.createElement("span");
     94    with (span.style) {
     95        position = "absolute";
     96        left = (Math.floor(Math.random() *
     97            (window.innerWidth ? window.innerWidth :
     98            document.documentElement.clientWidth ? document.documentElement.clientWidth :
     99            document.body.clientWidth))) + "px";
     100        top = (Math.floor(Math.random() *
     101            (window.innerHeight ? window.innerHeight :
     102            document.documentElement.clientHeight ? document.documentElement.clientHeight :
     103            document.body.clientHeight))) + "px";
     104    }
     105    span.appendChild(document.createTextNode("hoge"));
     106    document.getElementById("hoge_place").appendChild(span);
     107};
     108//--></script>
     109</head>
     110
     111<body>
     112
     113<form>
     114<input type="button" value="hoge" onclick="putHoge();">
     115</form>
     116
     117<div style="position: absolute; left: 0; top: 0;" id="hoge_place"></div>
     118
     119</body>
     120
     121</html>
     122}}}
     123
     124さて、先ほどのプログラムと比べると、今回のプログラムはかなり複雑です。今はプログラムの内容は気にせず、プログラムが記述されている場所と、その雰囲気に注目してください。
     125
     126先ほどと同様、今回も <input> タグには onclick 属性が指定されています。
     127
     128{{{
     129  <input type="button" value="hoge" onclick="putHoge();">
     130}}}
     131
     132しかし、そこに書かれているのは、 putHoge という名前の、恐らくは関数呼び出しに見える (後ろに丸かっこが付いているので) もののみが記述されています。
     133
     134HTML ファイルの上の方に、なんだか見慣れない記述がありますね。以下の部分です。
     135
     136{{{
    88137  <script type="text/javascript" language="JavaScript"><!--
    89138function putHoge() {
    … …  
    104153};
    105154//--></script>
     155}}}
     156
     157この、 <script> タグに囲まれた部分も、 !JavaScript プログラムです。そしてこのプログラム、
     158
     159{{{
     160function putHoge() {
     161}}}
     162
     163で始まっていることから分かるように、先ほど <input> 要素の onclick 属性で呼び出そうとしていた putHoge() 関数の定義であることが、何となくおわかりいただけるかと思います。
     164
     165このように、通常は <script> タグを用いて複雑な処理を行う'''関数'''を記述し、その関数をイベントハンドラから呼び出す、というスタイルで記述されるのが一般的です。
     166
     167なお、上記の例では HTML 4.01 で記述している為、<script> タグの内側は HTML のコメントタグ (<!-- ～ -->) で包んでいます。これには以下の 2つの理由があります。
     168
     169 * <script> タグに対応していない古いブラウザや未知のブラウザでも、画面上に !JavaScript のプログラムを表示してしまわないようにする為。
     170 * !JavaScript 中に出現する不等号記号 (<, >) が、 HTML タグと混同されてしまうのを防ぐ為。
     171
     172一方、 XHTML で記述する場合には、 <script> タグの内側に記述するプログラムを HTML のコメントタグで包むことは禁止されています。 XHTML であれば、 <script> タグには必ず対応しているので、画面上に !JavaScript のプログラムを表示してしまう危険性はありませんが、不等号記号が HTML タグだと誤解されるが故の誤動作の危険性は残っています。それを防ぐ為、 XHTML の場合は以下のように、コメントタグの代わりに <![CDATA[ ～ ]]> で囲うようにする必要があります。
     173
     174{{{
     175  <script type="text/javascript" language="JavaScript">
     176// <![CDATA[
     177function putHoge() {
     178    // (...省略)
     179};
     180// ]]>
     181</script>
     182}}}
     183
     184=== !JavaScript のみを別ファイルに記述する ===
     185
     186<script> タグを用いれば、 !JavaScript で記述された複雑な処理のプログラムを、 HTML ファイルとは別のファイルに記述して実行させることも可能です。
     187
     188その場合、 HTML ファイルは以下のように記述します。
     189
     190{{{
     191<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     192<html>
     193
     194<head>
     195  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     196  <title>hoge</title>
     197  <script src="hoge.js" type="text/javascript" language="JavaScript"></script>
    106198</head>
    107199
    … …  
    119211}}}
    120212
    121 さて、先ほどのプログラムと比べると、今回のプログラムはかなり複雑です。今はプログラムの内容は気にせず、プログラムが記述されている場所と、その雰囲気に注目してください。
    122 
    123 先ほどと同様、今回も <input> タグには onclick 属性が指定されています。
    124 
    125 {{{
    126   <input type="button" value="hoge" onclick="putHoge();">
    127 }}}
    128 
    129 しかし、そこに書かれているのは、 putHoge という名前の、恐らくは関数呼び出しに見える (後ろに丸かっこが付いているので) もののみが記述されています。
    130 
    131 HTML ファイルの上の方に、なんだか見慣れない記述がありますね。以下の部分です。
    132 
    133 {{{
    134   <script type="text/javascript" language="JavaScript"><!--
     213そして、 hoge.js ファイルは以下のような内容となります。といっても、前のサンプルで <script> タグの内側に記述していた内容と全く同じです。もちろん、 HTML コメントタグ <!-- ～ --> や CDATA セクション <![CDATA[ ～ ]]> で囲う必要はありません。
     214
     215{{{
    135216function putHoge() {
    136217    var span = document.createElement("span");
    … …  
    149230    document.getElementById("hoge_place").appendChild(span);
    150231};
    151 //--></script>
    152 }}}
    153 
    154 この、 <script> タグに囲まれた部分も、 !JavaScript プログラムです。そしてこのプログラム、
    155 
    156 {{{
    157 function putHoge() {
    158 }}}
    159 
    160 で始まっていることから分かるように、先ほど <input> 要素の onclick 属性で呼び出そうとしていた putHoge() 関数の定義であることが、何となくおわかりいただけるかと思います。
    161 
    162 このように、通常は <script> タグを用いて複雑な処理を行う'''関数'''を記述し、その関数をイベントハンドラから呼び出す、というスタイルで記述されるのが一般的です。
    163 
    164 なお、上記の例では HTML 4.01 で記述している為、<script> タグの内側は HTML のコメントタグ (<!-- ～ -->) で包んでいます。これには以下の 2つの理由があります。
    165 
    166  * <script> タグに対応していない古いブラウザや未知のブラウザでも、画面上に !JavaScript のプログラムを表示してしまわないようにする為。
    167  * !JavaScript 中に出現する不等号記号 (<, >) が、 HTML タグと混同されてしまうのを防ぐ為。
    168 
    169 一方、 XHTML で記述する場合には、 <script> タグの内側に記述するプログラムを HTML のコメントタグで包むことは禁止されています。 XHTML であれば、 <script> タグには必ず対応しているので、画面上に !JavaScript のプログラムを表示してしまう危険性はありませんが、不等号記号が HTML タグだと誤解されるが故の誤動作の危険性は残っています。それを防ぐ為、 XHTML の場合は以下のように、コメントタグの代わりに <![CDATA[ ～ ]]> で囲うようにする必要があります。
    170 
    171 {{{
    172   <script type="text/javascript" language="JavaScript">
    173 // <![CDATA[
    174 function putHoge() {
    175     // (...省略)
    176 };
    177 // ]]>
    178 </script>
    179 }}}
    180 
    181 === !JavaScript のみを別ファイルに記述する ===
    182 
    183 <script> タグを用いれば、 !JavaScript で記述された複雑な処理のプログラムを、 HTML ファイルとは別のファイルに記述して実行させることも可能です。
    184 
    185 その場合、 HTML ファイルは以下のように記述します。
    186 
    187 {{{
    188 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    189 <html>
    190 
    191 <head>
    192   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    193   <title>hoge</title>
    194   <script src="hoge.js" type="text/javascript" language="JavaScript"></script>
    195 </head>
    196 
    197 <body>
    198 
    199 <form>
    200   <input type="button" value="hoge" onclick="putHoge();">
    201 </form>
    202 
    203 <div style="position: absolute; left: 0; top: 0;" id="hoge_place"></div>
    204 
    205 </body>
    206 
    207 </html>
    208 }}}
    209 
    210 そして、 hoge.js ファイルは以下のような内容となります。といっても、前のサンプルで <script> タグの内側に記述していた内容と全く同じです。もちろん、 HTML コメントタグ <!-- ～ --> や CDATA セクション <![CDATA[ ～ ]]> で囲う必要はありません。
    211 
    212 {{{
    213 function putHoge() {
    214     var span = document.createElement("span");
    215     with (span.style) {
    216         position = "absolute";
    217         left = (Math.floor(Math.random() *
    218             (window.innerWidth ? window.innerWidth :
    219             document.documentElement.clientWidth ? document.documentElement.clientWidth :
    220             document.body.clientWidth))) + "px";
    221         top = (Math.floor(Math.random() *
    222             (window.innerHeight ? window.innerHeight :
    223             document.documentElement.clientHeight ? document.documentElement.clientHeight :
    224             document.body.clientHeight))) + "px";
    225     }
    226     span.appendChild(document.createTextNode("hoge"));
    227     document.getElementById("hoge_place").appendChild(span);
    228 };
    229232}}}
    230233