このドキュメントは http://edu.net.c.dendai.ac.jp/ 上で公開されています。
HTML からJavaScript を動かすには次の方法があります。
ブラウザで HTML の読み込みにより、プログラムを動かしたい場合、 以下の方法がある。
属性にプログラムを直接書く場合、ダブルクォーテーションマーク(")を " でエスケープする必要があります。
script 要素の属性 src で URL でファイルを指定する場合、読み込み方 を指定することができる。 デフォルトでは、指定された場合、そのファイルを読み込んでプログラム を実行します。 そのため、プログラムの内容が単なる関数定義で、ユーザ操作に連動する ような場合、ファイル読み込みの時間にHTMLの表示などが止まることがあ ります。
head 内に置かれた script は body 文書が読み込まれる前に実行されま す。 そのため、文書に関する DOM はすべて参照できません。 プログラムと文書を独立させるために、プログラムを置くのには有効です が、文書を直接操作するプログラムは書けません。
body 要素内の script 要素でプログラムが置かれた場合、デフォルトの 動作では、そこまで文書が解釈された状態で実行されます。 そのため、script 以降のDOM要素は参照できません。 DOM全体に作用させるには defer 属性を指定させるか、 body に onload で関数を呼び出すかする必要がある。
onload など、ブラウザの状態などにより、イベントが生成された場合、 それに対応させたプログラムを実行させることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Defer テスト</title>
<style>
.redmark {background:red;}
</style>
<script>
// × head では DOM は見えない
document.getElementById("id1").setAttribute("class","redmark");
</script>
</head>
<body onload="document.getElementById("id2").setAttribute("class","redmark");">
<!-- 〇 onload は全てを読んでから実行される -->
<p id="id1">1</p>
<p id="id2">2</p>
<p id="id3">3</p>
<script>
// 〇 前のDOMは読める
document.getElementById("id3").setAttribute("class","redmark");
</script>
<script>
// × 後ろのDOMは読めない
document.getElementById("id4").setAttribute("class","redmark");
</script>
<p id="id4">4</p>
<script defer>
// × defer は src を指定するときだけ
document.getElementById("id5").setAttribute("class","redmark");
</script>
<p id="id5">5</p>
</body>
</html>
DOMにおいて、特定のノードに対して、イベントを発生させることができ る。 イベントは、JavaScriptのAPI や、ブラウザの動作や、入力操作など、さ まざまな方法で発生できます。 発生したイベントは、DOMの木構造の子要素にむけ送られる。