Nagashima Laboratory

カラーピッカー2（JavaScript）

カラーピッカー1で作成したプログラムに追記をして、条件分岐を加えます。また、これまでの制作の中で出てきた文法事項についても補足説明をしています。

キーワード：条件分岐（if/else）

作成例（完成イメージ）

【準備】カラーピッカー1で作ったデータに追加していきます。

文字列の結合

これまでは、文字コードだけが表示される形になっていましたが、冒頭に「コード：」を追加して「コード：#000000」のように表示されるように変更します。

文字列をつなげるには + の記号を使います。文字列部分は、シングルクオート（’）で囲っています。ダブルクオート（”）でも動作します。

▼script.js

function changeColor(){
  document.body.style.backgroundColor = color.value;

  //カラーコードを表示
  text.textContent = 'コード：' + color.value;

}

条件分岐（if/else）

値の内容によって、実行するコードを変えたいときには、条件分岐を使います。JavaScriptでは if を使って「条件に当てはまるときには○○○、当てはまらないときには△△△」という設定を行います。この構文は if文 といいます。

▼script.js

//カラーコードを表示
if (color.value === '#ffffff') {
    text.textContent = 'コード：' + color.value + '(white)';
}

「color.value」の値が「#ffffff」と等しいときには「(white)」の表記を追加する、という設定になります。

このままでは、#ffffff 以外のときに、動作しなくなってしまいますので、条件に合わないときの動作も定義が必要です。そこで else を使用します。

elseの追加

else を使うと、条件に当てはまらないときの動作を定義できます。今回の例では「#ffffffではないとき」の振る舞い方を決められます。

▼script.js

  //カラーコードを表示
  if (color.value === '#ffffff') {
    text.textContent = 'コード：' + color.value + '(white)';
  } else {
    text.textContent = 'コード：' + color.value;
  }

else if の追加

else if を使うと、条件を更に追加できます。下記の例では、#000000（黒）のときに「(black)」の表記が追加されるようになります。

▼script.js

  //カラーコードを表示
  if (color.value === '#ffffff') {
    text.textContent = 'コード：' + color.value + '(white)';
  } else if (color.value === '#000000') {
    text.textContent = 'コード：' + color.value + '(black)';
  } else {
    text.textContent = 'コード：' + color.value;
  }

【補足】データ型・演算子

→資料：データ型・演算子

参考書籍・リンク