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 onClick="MyFunctionR()">RED</button></li>
  <li><button onClick="MyFunctionG()">GREEN</button></li>
  <li><button onClick="MyFunctionB()">BLUE</button></li>
</ul>

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

//背景色を変える
function MyFunctionR(){
  const obj = document.body;
  obj.style.backgroundColor = 'red';
}

function MyFunctionG(){
  const obj = document.body;        
  obj.style.backgroundColor = 'green';
}

function MyFunctionB(){
  const obj = document.body;
  obj.style.backgroundColor = 'blue';
}

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

↓

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

一つの関数で複数の処理に対応します

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

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

<h2>5-2｜引数</h2>
<ul>
  <li><button onClick="MyFunction05('red')">RED</button></li>
  <li><button onClick="MyFunction05('green')">GREEN</button></li>
  <li><button onClick="MyFunction05('blue')">BLUE</button></li>
</ul>
▼script.js　続きに追加
//引数を用いた背景色の変更
function MyFunction05( color ){
  const obj = document.body;
  obj.style.backgroundColor = color;
}

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

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

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

function 関数名( 引数 ){ 汎用性のある処理 };

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

<h2>６｜汎用性のある関数</h2>
<button onClick="MyFunction06()">クリック</button>

▼script.js　続きに追加

//ランダムな16進6桁のカラーコードを生成（汎用性のある関数）
function randomColor() {
  let col = Math.floor(Math.random() * 0xFFFFFF).toString(16);
  for (let i = col.length; i < 6; i++) {
    col = '0' + col;
  }
  return '#' + col;
}

// 背景色の変更
function MyFunction06(){
  const obj = document.body;
  obj.style.backgroundColor = randomColor();
}
  • Math.floor()　整数を返します
  • Math.randam()　0 以上 1 未満の範囲で乱数（ランダムな数字）を作ります
  • toString(16)　16進数を返します

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

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

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

Chromeの場合

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

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

参考書籍・リンク