😸

JavaScriptとは①

2023/03/07に公開

MDN（ https://developer.mozilla.org/ja/docs/Web/JavaScript ）
を参考に勉強するように注意が入ったので、こらを教本にしていきます。
その為、抜粋しながら進めたいと思います。
今回はこちらのページです。

JavaScript の実行順序

ブラウザー^[1]が JavaScript のブロック^[2]を見つけたとき、たいていは先頭から最後に向かって順番に実行されます。

//文章段落を選択 
const para = document.querySelector('p');

//イベントリスナーを登録
para.addEventListener('click', updateName); 

//updateName() というコードブロックが実行
function updateName() {
  const name = prompt('名前を入力して下さい');
  para.textContent = `Player 1: ${name}`;
}

このコードでは文章段落を選択して、イベントリスナー^[3]を登録して段落がクリックされたとき、updateName() というコードブロックが実行されます。
updateName() というコードブロック (再利用可能なコードブロックで「関数」と呼びます) は、ユーザーに新しい名前を尋ねて、表示内容を変更するため、段落にその名前を挿入します。

もし、最初の2行を入れ替えた場合、動かなくなってしまいます。
代わりにブラウザーの開発者コンソールに『TypeError: para is undefined』 para オブジェクトがまだ存在しないため、イベントリスナーを設定できないというエラーが出るでしょう。

こちらを実際に試した所私はこのエラーが表示されました。

estelleさんがGitHubにソースコードをUPしてくださっているので、
皆さんも試してみてください。

ページに JavaScript を追加する方法

内部の JavaScript

どのように書くのか見てみましょう。

まずはhtmlを入力します。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Apply JavaScript example</title>
  </head>
  <body>
    <button>Click me</button>
  </body>
</html>

テキストエディターとウェブブラウザーでそのファイルを開いてください。『Click me』と書かれたボタンが1つあると思います。
次に、テキストエディターで </head> タグの直前に以下のコードを追加します。

  <script>

  // JavaScript をここに書きます

</script>

「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'ボタンが押されました!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

ファイルを保存してブラウザーを更新してください。ボタンを押す度に新しい段落が作られて、『ボタンが押されました』と下に表示されるようになります。

estelleさんがGitHubにソースコードをUPしてくださっているので、
皆さんも試してみてください。

外部の JavaScript

JavaScriptを外部のファイルに書きたいときはこちらの例。

先ほどのHTMLファイルと同じディレクトリーに新しいファイルを作ります。これを 〇〇.jsと名付けます。 .js という拡張子であることを確認してください。それで JavaScriptであると認識されます。
<script> 要素を以下のコードで置き換えます。

<script src="script.js" defer></script>

〇〇.jsに、次のスクリプトを追加します。

function createParagraph() {
  const para = document.createElement('p');
  para.textContent = 'ボタンが押されました!';
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  button.addEventListener('click', createParagraph);
}

HTML ファイルを保存して、ブラウザーを更新してください。同じように動いていますが、今回は外部のJavaScriptファイルです。コードを整理して、複数のHTMLファイルから再利用できるようにするには、こちらの方がおすすめですし、読みやすくなります。

estelleさんがGitHubにソースコードをUPしてくださっています。

インライン^[4]のJavaScriptハンドラー^[5]

このようにはしないでください。
JavaScript のコードが HTML の途中に書かれている

function createParagraph() {
  const para = document.createElement('p');
  para.textContent = 'ボタンが押されました！';
  document.body.appendChild(para);
}

<button onclick="createParagraph()">押してください</button>

こちらは <button> 要素にonclick属性を付けてボタンが押されたときに関数が実行されるようにハンドラーを直接書いています。
JavaScriptのコードがHTMLの途中に書くのもダメですが、onclick="createParagraph()" という属性をJavaScriptを適用したいボタンすべてに書かなければなりませんので、とても非効率です。

代わりに addEventListner を使用する

querySelectorAll()関数を使うと、ページ上のすべてのボタンを選択することができます。そして、ループ処理でそれぞれのボタンに対して、 addEventListener()を使ってハンドラーを割り当てることができます。このためのコードを以下に示します。

const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  button.addEventListener('click', createParagraph);
}

ページ上にいくつボタンがあっても、またいくつ追加されたり削除されたりしても、すべてのボタンに対して機能します。 JavaScript は変更する必要がありません。

querySelectorAll()

指定したスタイルを適用する条件と一致したHTML要素を全て返します。（ここでは'button'）
返り値は配列として返されます。

addEventListener()

//構文
対象要素.addEventListener('イベント名', イベントを検知した時にする処理（関数）, オプション)

JavaScriptからさまざまなイベント処理を実行することができる手法です。

脚注

ブラウザーとはWEBサイトを閲覧するために使うソフトのこと(Google ChromeやSafariの事です) ↩︎
ブロックとは『ブロック文』、『複合文』、または『コードブロック』と呼ばれ、複数の文をグループ化するときに使われる構文です。 ↩︎
イベントリスナーとはイベントが発生した際に実行する関数を紐付けるための方法です。 addEventListener メソッドが使われることから、イベントリスナーと呼ばれています。イベントリスナーの特徴は、一つのイベントに対して複数のハンドラ^[5:1]の割り当てができることです。 ↩︎
インラインとは「その場に埋め込む」という意味 ↩︎
ハンドラ（handler）とは、要求が発生した時にプログラム処理を中断して呼び出される関数などのことです。プログラムモジュール。 ↩︎ ↩︎