Nagashima Laboratory

JavaScriptの体験1

JavaScript（ジャバスクリプト）とは

Webブラウザ上で動くプログラミング言語の一つで、HTML、CSSで作成したWebページに動的な処理を加えることができます（動的とは、閲覧者の操作、入力などによって変化させる効果のことです）。

名前の似ている、Java（ジャバ）というプログラミング言語とは別ものです。Javaは、アプリケーションやシステム開発などに使われています。

JavaScriptでできること

  • HTMLやCSSの書き換え
    • テキストの書き換え
    • 画像の変更
    • 色の変更
  • ユーザーのアクションに応じた動きを付ける
    • スクロールすると表示
    • 入力フォームのチェック（フォームバリデーション）

…など、HTML+CSSで制作したサイトに機能を追加できるようになります。

※「JavaScript入門講座」より

コンソールを使ったJavaScriptの体験

Google Chromeのコンソールを使って、直接JavaScriptを入力してみます。

例1）メッセージの表示

console.log('Hello world!');

例2）計算

console.log(1+2);

参考：コンソールの表示方法（デベロッパー ツール内）

  • F12キー
  • command + option + i
  • ブラウザの画面上で右クリック＞検証

JavaScriptの利用方法

HTMLファイルでJavaScriptを利用するには次の3つの方法があります。

CSSの利用方法と同じく、複数の方法がありますが、3の方法を推奨します。メンテナンスしやすくなる、他のサイトでも再利用しやすくなる、などの利点があります。

  1. HTMLのタグ内に書く
  2. HTML<head>または</body>の直前に、scriptタグを挿入して書く
  3. 別のファイルに記述（HTML側 <head>または</body>の直前に下記を記入）

1.HTMLのタグ内に書く

<input type="button" onClick="alert('Hello');" value="click">

2.HTML<head>または</body>の直前に、scriptタグを挿入して書く

▼bodyの終了タグ直前に書く場合

<body>

<!--中略-->

<script>
  function 関数名・・・
</script>
</body>
</html>

3.別のファイルに記述（HTML側 <head>または</body>の直前に下記を記入）

javascriptファイルの拡張子は .js です。テキストファイルである、xxxxx.jsを作成して、javascriptコードを書きます。

▼headに書く場合

<!--中略-->
<script src="script.js" defer></script>
</head>
<body>
<!--中略-->

▼bodyの終了タグ直前に書く場合

<body>

<!--中略-->

<script src="script.js"></script>
</body>
</html>

JavaScriptの体験

フォルダ：javascript_sample_01

【準備】

①「JavaScriptを書くための準備」の資料を参考にして、空のHTML、CSS、JavaScriptファイルを作ります。

②フォルダの名前を javascript_sample_01に変更します

事例1：ページにアクセス

▼index.htmlへの追記

<main>
<h2>１｜ページ</h2>
<button class="sample01" type="button">クリック</button>

▼script.js（入力済みのコメントの後に追加）

// body の背景色を変える
const btnSample01 = document.querySelector('.sample01');
btnSample01.addEventListener('click', () => {
  const obj = document.body;
  obj.style.backgroundColor = 'gray';
});
  • const…定数の作成（データを入れる入れ物）
  • querySelector…HTML内の要素の取得
  • addEventListener…イベント（動作のきっかけ）の設定
  • document.body…HTMLのbodyのこと
  • ● = ◆ … =の右側の内容を、左側に入れる（代入）
  • style.backgroundColor…スタイルプロパティ背景色

Q：関数とは？

→関数とは「処理をひとまとめにして名前をつけたもの」です

Q：クオーテーションはシングル（' '）か、ダブル（" "）か？

→どちらでも動作しますが、書類内では統一します。このページではシングルクオーテーション（' '）を使用しています。

事例2：ID要素にアクセス

ボタンをクリックすると背景色がorangeになる

※色は好きな色を設定してください

▼index.htmlへの追記　<main>タグ内に追記する

<h2 id="id01">２｜ID要素</h2>
<button class="sample02" type="button">クリック</button>

▼script.js　続きに追加

// ID要素 の背景色を変える
const btnSample02 = document.querySelector('.sample02');
btnSample02.addEventListener('click', () => {
  const obj = document.querySelector('#id01');
  obj.style.backgroundColor = 'orange';
});

querySelectorで要素を取得するときはCSSと同じ書き方をします。そのため、class名であれば「.sample02」のように「.（ドット）」がつき、id名　であれば「#id01」のように「#（ハッシュ）」がつきます。

事例3：CLASS要素にアクセス

ボタンクリックで、CLASS要素の背景色がgreenに変わる

※色は好きな色を設定してください

CLASS要素はページ内に複数存在することを前提としています（一方、ID要素は1つのページ内には1回しか使うことができない決まりです）。すべての要素に対して処理する場合、繰り返し処理が必要になります。

▼index.html　<main>タグ内に追記する

<h2>３｜CLASS要素</h2>
<button class="sample03" type="button">クリック</button>
<ul>
  <li class="class01">A</li>
  <li>B</li>
  <li class="class01">C</li>
  <li>D</li>
</ul>

▼script.js　続きに追加

// CLASS要素 の背景色を変える
const btnSample03 = document.querySelector('.sample03');
btnSample03.addEventListener('click', () => {
  const lines = document.querySelectorAll('.class01');
  for (let i = 0; i < lines.length; i++) {
    lines[i].style.backgroundColor = 'green';
  }
});
  • querySelectorAll…HTML内の複数の要素を取得（そのためAllがついている）
  • for（初期条件; 繰り返し条件; ステップ) {処理} 繰り返し処理をする設定
  • let i…iという名前の変数（データを入れる入れ物）
  • lines.lengthは、lines[]の要素数のこと
  • ++（インクリメント）…1を加算

今回の例では、classが複数あるので「複数の箱」を用意して、箱の中にそれぞれ情報をしまうイメージです。class01は、HTML上に2個あるので、2個の箱にそれぞれ収めます。（lines[0]、lines[1]…という箱に入れます）

繰り返し処理（for文）のところは、linesの箱の数分、同じ命令（背景を緑にする）を繰り返しています。これにより、ページ上に存在する全ての「class='class01'」に対して、同じ設定が有効になります。

Q：constとletは何が違う？

→どちらもデータを入れる入れ物の役割をします。letの方は再代入（入れ物の中身が変わる）ができ「変数」の定義に使います。constは一度しか中身を入れられないため「定数」の定義に使います。

事例4：HTML要素にアクセス

ボタンクリックで、HTML要素（ここでは<p>を指定）の背景色がgreenに変わる

※色は好きな色を設定してください

▼index.html　<main>タグ内に追記する

<h2>４｜HTML</h2>
<button class="sample04" type="button">クリック</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, explicabo quisquam eligendi fugiat ad fuga, vero!</p>
<p>Esse fuga ex, asperiores quisquam consequatur, velit architecto nostrum modi, sunt autem similique rerum.</p>

▼script.js　続きに追加

// HTML要素 の背景色を変える
const btnSample04 = document.querySelector('.sample04');
btnSample04.addEventListener('click', () => {
  const obj = document.querySelectorAll('p');
  for (let i = 0; i < obj.length; i++) {
    obj[i].style.backgroundColor = 'blue';
  }
});

参考書籍・リンク