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を作成して、関数を書きます。（関数については後述します）

▼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 onClick="MyFunction01()" >クリック</button>

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

// body の背景色を変える
function MyFunction01() {
  const obj = document.body;
  obj.style.backgroundColor = 'gray';
}
  • onClick …クリックで " " 内に書かれている関数を呼び出す（ここでは、MyFunction01() を呼び出している）
  • function…関数
  • const obj…objという名前の変数（データを入れる入れ物）
  • document.body…HTMLのbodyのこと
  • obj = ●● … =の右側の内容を、左側に入れる
  • style.backgroundColor…スタイルプロパティ背景色

Q：関数とは？

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

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

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

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

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

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

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

<h2 id="id01">２｜ID要素</h2>
<button onClick="MyFunction02()">クリック</button>

▼script.js　続きに追加

// ID要素 の背景色を変える
function MyFunction02() {
  const obj = document.getElementById('id01');
  obj.style.backgroundColor = 'orange';
}
  • document.getElementById…ID要素を取得

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

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

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

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

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

<h2>３｜CLASS要素</h2>
<button onClick="MyFunction03()">クリック</button>
<ul>
  <li class="class01">A</li>
  <li>B</li>
  <li class="class01">C</li>
  <li>D</li>
</ul>

▼script.js　続きに追加

// CLASS要素 の背景色を変える
function MyFunction03() {
  const lines = document.getElementsByClassName('class01');
  for( let i=0; i<lines.length; i++){
    lines[i].style.backgroundColor = 'green';
  }
}
  • document.getElementsByClassName…クラス要素を取得 Elements と複数形になっている
  • for（初期条件; 繰り返し条件; ステップ) {処理} 繰り返し処理をする設定
  • let i…iという名前の変数（データを入れる入れ物）
  • lines.lengthは、lines[]の要素数のこと

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

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

Q：constとletは何が違う？

→どちらもデータを入れる入れ物（変数）の役割をします。ここでは深入りはしませんが、letの方は再代入（入れ物の中身が変わる）ができます

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

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

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

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

<h2>４｜HTML</h2>
<button onClick="MyFunction04()">クリック</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要素 の背景色を変える
function MyFunction04() {
  const obj = document.getElementsByTagName('p');
  for( let i=0; i<obj.length; i++ ) {
    obj[i].style.backgroundColor = 'blue';
  }
}

参考書籍・リンク