| 118 | |
| 119 | さて、先ほどのプログラムと比べると、今回のプログラムはかなり複雑です。今はプログラムの内容は気にせず、プログラムが記述されている場所と、その雰囲気に注目してください。 |
| 120 | |
| 121 | 先ほどと同様、今回も <input> タグには onclick 属性が指定されています。 |
| 122 | |
| 123 | {{{ |
| 124 | <input type="button" value="hoge" onclick="putHoge();"> |
| 125 | }}} |
| 126 | |
| 127 | しかし、そこに書かれているのは、 putHoge という名前の、恐らくは関数呼び出しに見える (後ろに丸かっこが付いているので) もののみが記述されています。 |
| 128 | |
| 129 | HTML ファイルの上の方に、なんだか見慣れない記述がありますね。以下の部分です。 |
| 130 | |
| 131 | {{{ |
| 132 | <script type="text/javascript" language="JavaScript"><!-- |
| 133 | function 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 | {{{ |
| 155 | function 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[ |
| 172 | function 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 | {{{ |
| 211 | function 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 のみを別ファイルで記述する方がより一般的です。 |