要素内に JavaScript を書いて、もうちょっと面白いことをしてみましょう。「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。
document.addEventListener("DOMContentLoaded", function() {
function createParagraph() {
let para = document.createElement('p');
para.textContent = 'ボタンが押されました!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
});
5.ファイルを保存してブラウザーを更新してください。ボタンを押す度に新しい段落が作られて、下に表示されるようになりましたね。
注: もし上記の例が上手く動いていないとしたら、もう一度最初から手順を確認してください。コピーしてコードを書いたファイルは .html というファイル名ですか？ ＜script> 要素を ＜/head> タグの直前に追加しましたか？ JavaScript を上の例の通りに書きましたか？ JavaScript は大文字小文字を区別しますので、見えている通りに書かなければなりません。正しく書いていなければ、動いてくれません。文字化けしているなら、テキストエディターの文字エンコーディングの設定が UTF-8 になっていることを確認してください。
注: GitHub にあるこちらのバージョン、apply-javascript-internal.html (動くバージョンもあります) を見ることもできます。
JavaScript をページの外に書く
これで JavaScript が動きましたね。しかし、JavaScript を外部のファイルに書きたいときはどうすればよいでしょうか？ 次の例を見てみましょう。
1.まず、先ほどの HTML ファイルと同じディレクトリーに新しいファイルを作ります。これを script.js と名付けます。.js という拡張子であることを確認してください。それで JavaScript であると認識されるのです。
2.＜script> 要素を以下のコードで置き換えます。
＜script src="script.js" defer>＜/script>
3.script.js に、次のスクリプトを追加します:
function createParagraph() {
let para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
4.HTML ファイルを保存して、ブラウザーを更新してください。同じページが見えますね！ 同じように動いていますが、今回は外部の JavaScript ファイルです。コードを整理して、複数の HTML ファイルから再利用できるようにするには、このようにするのが良いでしょう。大きなスクリプトの塊がないほうが、HTML も読みやすくなります。
注: GitHub でこちらのバージョンも見られます。apply-javascript-external.html と script.js です (動いているバージョンもあります)。
HTML に JavaScript のハンドラーを混ぜる
たまに JavaScript のコードが HTML の途中に書かれているのを見かけます。こんな感じで。
＜script>
function createParagraph() {
let para = document.createElement('p');
para.textContent = 'ボタンが押されました！';
document.body.appendChild(para);}
＜/script>
＜script>
このバージョンのデモをボタンを押して確認してください。(一番下に出ます）
このデモは先ほどのセクションのものと同じ機能を持っていますが、＜ｂｕｔｔｏｎ＞ 要素に onclick 属性を付けてボタンが押されたときに関数が実行されるようにハンドラーを直接書いています。
書けはしますが、このようにはしないでください。この書き方は HTML を JavaScript で汚してしまう悪い書き方です。さらに、onclick="createParagraph()" という属性を JavaScript を適用したいボタンすべてに書かなければなりませんので、とても非効率です。
純粋な JavaScript では、1 つの命令ですべてのボタンが取得できます。先ほど使用した、すべてのボタンを取得するためのコードは以下の通りでした。
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
これは onclick 属性を用いて書くより少し長いように見えますが、どれだけそのページにボタンを追加し、削除し、いくつあろうとも期待通りに動くでしょう。コードを変更することなく。
注: 自分の apply-javascript.html ファイルを編集して、いくつかボタンを追加してみて下さい。再度読み込むとどのボタンを押しても段落が作られるのがわかるでしょう。素敵でしょ！
ｈｔｔｐｓ://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript