JavaScriptをHTMLに組み込む
JavaScriptのコードをHTMLファイルに組み込むには、<script>要素の
役割です。
◆<script>要素
<script type="text/javascript">
javascriptのコード
</script>
type属性はスクリプトの種類を表します。
一般的には 「text/javascript」以外を指定することはありません。
HTML5では 「text/javascript」がデフォルト値なっているため省略しても
問題ありません。
ここでは、「windou.alert]という命令で、指定された文字列を
ダイヤログで表示します。
簡単なテキストを出力する際に、よく利用する命令です。
<script>要素を記述する場所
<script>要素を記述する場所は、大きく下記のように分類できます。
<body>要素の配下(任意の位置)
<script>要素での処理結果を、ページに直接出力するために利用します。
昔はよくしようされてた書き方ですが。
コンテンツコードとコードとが混在するのは、ページの可能性/保守性の観点からも望ましくありません。
現在は、殆ど使用されることはありません。
一部の例外を除いて使うべきではありません。<body>要素の配下(</body>閉じタグの直前)
ブラウザーでは、スクリプトの読み込みや実行が完了するまで
以降の描画を行いません。
このため、読み込みや実行に時間がかかるスクリプトは、そのままページ描画の遅れに直結します。
巨大なスクリプトがある場合にはなおさらです。
ページ速度化の手法としてページの末尾(</body>の直前)に<script> 要素を配置することがよく行われます。
これによって、ページ描画を終えたあと、おもむろにスクリプトを
読み込み/実行できるまで見た目の描画速度が改善します。
Javascriptによる処理は、ページがすべて準備できてから行うべきなので
これによる弊害もほぼありません。<head>要素の配下
まかなえないケースがあり、JavaScriptでは、「関数を呼び出すための
<script>要素よりも、関数定義の<script>要素を先に記述していなければならない」
ルールがあるので (関数の定義、呼び出しがひとつの<script>要素に まとまっていても構いません)
例えば＜body＞要素の配下で呼び出す必要があるような関数は、 <head>要素の配下で事前に読み込んでおく必要があります。
スクリプトからスタイルシートを出力するような状況でも、本文の出力に
<head>要素の配下で<script>要素を記述します。
実行結果を文書内に埋め込みたい→<body>要素の配下に記述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTG-8" />
<title>javaScriptトレーニング</title>
</head>
<body>
<script type="text/javascript">
....JavaScriptのコード....
</script>
…任意のコンテンツ…
</body>
</html>ページを操作するコードを定義したい→</body>閉じタグの直前に記述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTG-8" />
<title>javaScriptトレーニング</title>
</head>
<body>
…任意のコンテンツ…
<script type="text/javascript">
....JavaScriptのコード....
</script>
</body>
</html><body>配下で直接呼び出すための関数を定義したい
→<head>要素の配下に記述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTG-8" />
<title>javaScriptトレーニング</title>
<script type="text/javascript">
....JavaScriptのコード....
</script>
</head>
<body>
…任意のコンテンツ…
</body>
</html>
ここから先は
¥ 200
この記事が参加している募集
この記事が気に入ったらチップで応援してみませんか？