予習

2019.7.29

教材用HTMLの基礎テンプレート（Jquery,Bootstarap含む）

今後、教材として必ず使うHTMLのセットをご自分で用意して頂くよう、手順を作りました。 自分で作ると、フォルダの構造が理解できるようになってきます。

ファイルが準備できたらindex.htmlファイルとassets/js/script.jsファイルをエディタで開きましょう。

算術演算子

JavaScriptでは、数値を計算して出力することができます。
その計算に用いるのが算術演算子と呼ばれるものです。
算術演算子は以下のような使い方をします。

• 加算-足し算 +
• 減算-引き算 –
• 乗算-掛け算 *
• 除算-割り算 /
• 剰余-あまり %

JavaScriptで数値と算術演算子を使う方法【初心者向け】 | TechAcademyマガジン

計算プログラム

では、すべての算術演算子とその計算結果を表示してみましょう。
script.jsに以下を追加

//変数の定義
var x;
//足し算を変数に代入
x = 5 + 4;
console.log(x);

//引き算
console.log(10-4);

//掛け算
console.log(10*4);

//割り算
console.log(10/4);

//あまり
console.log(10%4);

ファイルを保存したら動作確認してみましょう。
ブラウザ上で右クリック＞検証でDevToolsを呼び出し、Consoleタブをクリックして表示します。

if文とは？

ifを使う事により真偽を判定し、その結果次第の処理を行います。
書き方は以下のような形になります。

if (条件) {
条件が真であれば実行
} else {
条件が偽であれば実行
}

比較演算子

比較演算子とは、2つの値を比較することが目的の演算子です。
比較演算子は以下のような使い方をします。

• > 左辺が右辺よりも大きい
• >= 左辺が右辺より大きいか同じ
• < 左辺より右辺が大きい
• <= 左辺より右辺が大きいか同じ
• == 左辺と右辺の値が同じ

【JavaScript入門】比較演算子の使い方まとめ | 侍エンジニア塾ブログ（Samurai Blog）

if文を利用したプログラム

script.jsに以下を追加

//変数yを定義し値を代入
var score = 70;

//条件比較
if (score >= 75) {
	console.log('合格');
} else if(score >= 50){
	console.log('補欠合格');
} else {
	console.log('不合格');
}

DevToolsで確認すると、「合格」と表示されました。
条件や値を変更し、結果を見てみましょう。

JavaScriptでIF文を使って条件分岐させる方法【初心者向け】 | TechAcademyマガジン

イベントの例

JavaScriptでよく使われるプログラムとして、ボタンをクリックしたらイベントが起こる、クリックイベントがあります。
よくあるクリックイベントとして以下のようなものがあります。

• メール送信
• SNSのいいね！やフォローボタン
• タブの切り替え
• ページ内リンク

イベントプログラム-1

では、クリックしたらアラートが出るプログラミングを書いてみましょう。
index.htmlに以下を追加

<button class="btn btn-primary event_1">アラートを呼び出す</button>

script.jsに以下を追加

//イベント発火の対象を選択
var event_1 = document.querySelector(".event_1");

//イベントする関数を選択して動作
event_1.addEventListener('click', pg_1);

//アラートをだす関数
function pg_1(){
	alert("これがアラートです");
}

ファイルを保存したら動作確認してみましょう。
ネットでよくみるアラートと呼ばれるウインドウが表示されます。

イベントプログラム-2

次に、入力された内容をアラートで表示するプログラミングを書いてみましょう。
index.htmlに以下を追加

<div class="form-group">
	<input type="text" class="form-control" id="event_2_input">
</div>
<button class="btn btn-primary event_2">テキスト内容をアラートに表示</button>

script.jsに以下を追加

//イベント発火の対象を選択
var event_2 = document.querySelector(".event_2");

//イベントする関数を選択して動作
event_2.addEventListener('click', pg_2);

//アラートをだす関数
function pg_2(){
	//アラート内容を取得
	var event_2_input = document.querySelector("#event_2_input").value;
	alert(event_2_input);
}

問題なく動作したら、フォームの内容が空だった場合の動作を考えてみましょう。

【JavaScript入門】addEventListener()によるイベント処理の使い方！ | 侍エンジニア塾ブログ

ゲーム概要

算術演算子を利用し、簡単な穴埋め計算ゲームを作りましょう。
ここで利用する知識はHTMLとJavaScriptになりますが、最初の枠組みをコピペで済ませます。

その後の応用で枠組みを編集して応用問題を作っていきましょう。

ゲームプログラム

index.htmlに以下を追加

	<div class="panel panel-default">
		<div class="panel-heading">
			計算ゲーム
		</div>
		<div class="panel-body">
			<div class="form-group">
				<label id="Q1_1">32</label>
				<label id="Q1_2">*</label>
				<label id="Q1_3">15</label>
				 = 
				<input type="text" id="Q1_4">
				<button class="btn btn-primary event_3">解答</button>
			</div>
			
			<div class="form-group">
				<input type="text" id="Q2_1">
				<select id="Q2_2">
					<option value="+">+</option>
					<option value="-">-</option>
					<option value="*">*</option>
					<option value="/">/</option>
				</select>				
				<input type="text" id="Q2_3">
				 = 
				<label id="Q2_4">120</label>
				<button class="btn btn-primary event_4">解答</button>
			</div>
			
		</div>
	</div>

script.jsに以下を追加

//イベント発火の対象を選択
var event_3 = document.querySelector(".event_3");

//イベントする関数を選択して動作
event_3.addEventListener('click', pg_3);

//解答アラートをだす関数
function pg_3(){
	//数字と演算子を取得
	var Q1_1 = document.querySelector("#Q1_1").innerHTML;
	var Q1_2 = document.querySelector("#Q1_2").innerHTML;
	var Q1_3 = document.querySelector("#Q1_3").innerHTML;
	
	//解答を取得
	var Q1_4 = document.querySelector("#Q1_4").value;
	
	//計算式を代入
	var formula = Q1_1 + Q1_2 + Q1_3;

	//正答を計算
	var answer = safeEval(formula);

	//表示用計算式
	var formula_dsp =  formula+'='+Q1_4;
	
	if(Q1_4 == answer){
		alert('正解\n'+formula_dsp);
	}else{
		alert('残念\n'+formula_dsp);
	}
}


//イベント発火の対象を選択
var event_4 = document.querySelector(".event_4");

//イベントする関数を選択して動作
event_4.addEventListener('click', pg_4);

//解答アラートをだす関数
function pg_4(){
	//数字と演算子を取得
	var Q2_1 = document.querySelector("#Q2_1").value;
	var Q2_2 = document.querySelector("#Q2_2").value;
	var Q2_3 = document.querySelector("#Q2_3").value;
	
	//解答を取得
	var Q2_4 = document.querySelector("#Q2_4").innerHTML;
	
	//計算式を代入
	var formula = Q2_1 + Q2_2 + Q2_3;

	//正答を計算
	var answer = safeEval(formula);

	//表示用計算式
	var formula_dsp =  formula+'='+answer;
	
	if(Q2_4 == answer){
		alert('正解\n'+formula_dsp);
	}else{
		alert('残念\n'+formula_dsp);
	}

}


//文字列を計算式に変換する関数
function safeEval(val){
    return Function('"use strict";return ('+val+')')();
}

ファイルを保存したら動作確認してみましょう。
完成形は以下のようになります。
教材WEBページ

後半に行った計算ゲームプログラムに関しては、今回学習した内容を盛り込みました。
見慣れない文字列が長々と続くと少々嫌気がさすでしょうが、一度で理解する必要はありません。
本来、JavaScriptを学習するにはかなりの時間を要するので、このような書き方をすればプログラムが動作するという事を理解するだけでも十分です。

本講義をきっかけにJavaScriptに興味を持ち、自主学習に繋げてください。