Nagashima Laboratory

JavaScriptの体験2

フォルダ：javascript_sample_02

【準備】

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

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

事例5-1：繰り返し

事例1で触れた背景色を変更する事例について、3つのボタンをつくって、背景色を変更する場合のプログラムを考えます。

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

<h2>5-1｜繰り返し</h2>
<ul>
  <li><button type="button" class="btn-red">RED</button></li>
  <li><button type="button" class="btn-green">GREEN</button></li>
  <li><button type="button" class="btn-blue">BLUE</button></li>
</ul>

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

//5-1｜繰り返し
const btnRed = document.querySelector('.btn-red');
const btnGreen = document.querySelector('.btn-green');
const btnBlue = document.querySelector('.btn-blue');

btnRed.addEventListener('click', () => {
  document.body.style.backgroundColor = 'red';
});
btnGreen.addEventListener('click', () => {
  document.body.style.backgroundColor = 'green';
});
btnBlue.addEventListener('click', () => {
  document.body.style.backgroundColor = 'blue';
});

繰り返し記述することで、処理自体は可能です。しかし、このように同じような処理が繰り返し出てくるときには、プログラムは効率に書くことが可能です。

↓

事例5-2：引数（ひきすう）

一つの関数で複数の処理に対応するため「引数」を使用します。引数とは、関数を実行するときに渡される値のことです。

function 関数名( 引数 ) { 処理 }

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

<h2>5-2｜引数</h2>
<ul>
 <li><button type="button" class="btn-arg" data-color="red">RED</button></li>
 <li><button type="button" class="btn-arg" data-color="green">GREEN</button></li>
 <li><button type="button" class="btn-arg" data-color="blue">BLUE</button></li>
</ul>

▼script.js　続きに追加

// 5-2｜引数
function changeBgColor(color) {
  document.body.style.backgroundColor = color;
}

const btnArgs = document.querySelectorAll('.btn-arg');
btnArgs.forEach(btn => {
  btn.addEventListener('click', () => {
    const color = btn.getAttribute('data-color');
    changeBgColor(color); // 引数として渡す
  });
});

最初のボタンをクリックすると、data-color属性に書かれた'red'という文字列を color に受けとり、その結果、背景色を red にすることができます。

  • forEach　配列の数分、繰り返し処理を行う（作例の場合、.btn-argの数だけ繰り返しを実行する）

事例6：汎用性のある関数

汎用性とは、ひとつの用途だけではなく、さまざまなことに広く利用、応用できることです。

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

<h2>６｜汎用性のある関数</h2>
<button type="button" class="btn-generic">クリック</button>

▼script.js　続きに追加

// ６｜汎用性のある関数
// ランダムな16進6桁のカラーコードを生成
function randomColor() {
  const col = Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0');
  return '#' + col;
}

// 関数の呼び出し
const btnGeneric = document.querySelector('.btn-generic');
btnGeneric.addEventListener('click', () => {
  document.body.style.backgroundColor = randomColor();
});
  • Math.floor()　整数を返します
  • Math.randam()　0 以上 1 未満の範囲で乱数（ランダムな数字）を作ります
  • Math.random() * 0xFFFFFF　0 以上 16777215（16進数でFFFFFF）未満のランダムな数値を生成（数値の前に0xがつくと以降を16進数として扱う）
  • toString(16)　16進数を返します
  • padStart(6, ‘0’)　6桁に満たない場合に先頭を0で追加
  • return ‘#’ + col　colの値の前に#をつける（returnは関数を終了し値を返す）

エラーの確認方法〜JavaScript console（コンソール）

JavaScriptは、ブラウザ上で動作しますが、文法や構造に問題があった場合に、ブラウザ上では機能が無視されるだけで、表向き、エラーメッセージが表示されません。

そこで、スクリプトを開発する場合、ブラウザのコンソール機能を使用します

Chromeの場合

メニュー＞表示＞開発/管理＞JavaScriptコンソール

▼エラーが表示されたところ

参考書籍・リンク