2015年1月30日金曜日

HTML内のJavaScript記述場所

HTMLファイル作成時に、Javascriptを<head>と<body>どちらに書くか悩んだことありませんか?。
コピペで、作成ばかりしていると、このようなちょっとした疑問に気づきませんでした。

今、ホームページの作り替えで、今更なのですが、疑問になったので調べてみました。

<head>に入力すると<body>より先に実行され、<body>に入力すると入力された位置で実行されることになります。
<head>に書くと、要素読み込まれないと実行できない場合がある(ロードに時間がかかるので)ので、関数などは、<body>前及び<body>内で定義すると、正常動作するといった現象が発生します。

一般的に、<head>には関数を定義するのに使います。
(JavaScriptは関数の呼び出しより先に関数を定義する必要があるため、body要素の中で実行する関数やライブラリなどはhead要素の中で読み込む)

<body>内のタグの中にイベントを組み込んで、そこに直接JavaScriptを記入もできます。

外部ファイルに、複数のWebページ内で同じ処理を行いたい場合は、 外部ファイルにスクリプトを書いて、それを各ページが読み込むようにします。
注意すべきは、取得が終わるまで先に進めなくなるため、応答の遅いサーバに置かれたスクリプトや実行に時間がかかるスクリプトは画面の描画をブロックする原因になりますので、可能であれば、<body>要素を閉じる直前に配置することが望ましいです。


下の参考URLの2番目を読むと、HTMLとJavaScriptとの関係がよくわかります。


【参考URL】
http://js.k-sakabe.com/js00.html
http://www.atmarkit.co.jp/fwcr/design/benkyo/htmltuning02/02.html

0 件のコメント:

コメントを投稿