20200728 授業メモ 論理演算子・三項演算子・switch文・他復習
〇論理演算子
早速例題をまじえての解説
var age = 35;
console.log('１回目の出力');
if (age >= 30 && age < 40) { console.log('30代'); }
//論理演算子「＆＆」は左辺右辺ともにtrueの時にtrueを返す。
console.log('２回目の出力');
if (age < 30 || age >= 40) {
console.log('30代じゃない');
}
//論理演算子「｜｜」は左辺右辺のどちらかtrueの時、trueで返す。
console.log('３回目の出力');
if (!(age >= 30 && age < 40)) { console.log('30代じゃない'); }
//論理演算子「！（not）」は真偽値を逆転させる。
！＝否定（条件式の結果を反転）
〇比較演算子の復習
var num = 10;//数値型の10
console.log('１回目の出力');//true
console.log(num === 10);//false
console.log(num === '10');//false
console.log(num === 5);//false
console.log(num === '東京');//false
//「＝＝＝」はデータ型と値ともに等しいか評価する
//厳密等価演算子という。
//評価の結果「等しい」→true
//評価の結果「等しくない」→false
console.log('２回目の出力');
console.log(num == 10);//true
console.log(num == '10');//true
console.log(num == 5);//false
console.log(num == '東京');//false
console.log('３回目の出力');
console.log(num !== 10);//false
console.log(num !== '10');//true
console.log(num !== 5);//true
console.log(num !== '東京');//true
//左辺右辺が等しくないことを評価
//評価の結果「等しくない」→true
//評価の結果「等しい」→false
console.log('４回目の出力');
console.log(num != 10);//false
console.log(num != '10');//false
console.log(num != 5);//true
console.log(num != '東京');//true
console.log('５回目の出力');
console.log(num < 10);
console.log(num < '10');
console.log(num < 5);
console.log(num < '東京');
console.log('６回目の出力');
console.log(num <= 10);
console.log(num <= '10');
console.log(num <= 5);
console.log(num <= '東京');
console.log('７回目の出力');
console.log(num > 10);
console.log(num > '10');
console.log(num > 5);
console.log(num > '東京');
console.log('８回目の出力');
console.log(num >= 10);
console.log(num >= '10');
console.log(num >= 5);
console.log(num >= '東京');
console.log(-10 < 'A');//?
//保留
console.log('Aあ' < 'Aい');//true
//文字の場合は並び順で比較する。
//あいうえおかき・・・・
//ABCDEF・・・・
〇真偽値への変換
console.log('１回目の出力');
var x;
console.log(x);
if (x) {
console.log('true');
} else {
console.log('false');
}
console.log('２回目の出力');
x = 5;
console.log(x % 2);
if (x % 2) {
//数値型の「1」はtrueに変換される
console.log('true');
} else {
console.log('false');
}
.
.
.
.
.
.
console.log('７回目の出力');
x = '0';
//空文字や数値型の「0」はfalseに変換されるが文字列型の「'0'」はtrueに変換されるので注意！
console.log(x);
if (x) {
console.log('true');
} else {
console.log('false');
}
//追加問題
//偶数・奇数判定をして奇数の時にコンソールに「奇数」と表示する
//プログラムを作成すること。
console.log('追加問題')
var x = 3;
if (!(x % 2 == 0)) {
console.log('奇数だぞ');
}
//→この計算式は整数を2で割った時の余りが0に「ならない」ときにコンソール上に
//奇数だぞを表示させるという意味になる。
条件式？true時の処理（値）：false時の処理（値）;
例題））
var num = 2;
console.log('１回目の出力');
num % 2 == 1 ? console.log('奇数') : console.log('偶数');
//numを2で割った余りが1の時、trueなら奇数とコンソールに表示、
//falseなら偶数とコンソールに表示
//真式、偽式には簡単な処理や値しかおけない。
console.log('２回目の出力');
var message;
message = (num % 2 == 1) ? '奇数' : '偶数';
console.log(message);
//messageを設定
//messageが（numを2で割った余りが1）という値だった場合、
//真なら'奇数'、偽なら'偶数'とする。
//コンソールにそのmessageを表示
if (num % 2 == 1) {
message = '奇数';
} else {
message = '偶数';
}
console.log(message);
//もしnumを2で割った余りが1だった時、真ならmessageは'奇数'、偽ならmessageは'偶数'
//それをコンソールに表示。
console.log('３回目の出力');
message = num % 2 ? '奇数' : '偶数';
console.log(message);
//読み解くことが大事。
HTML
< div class="box" >
<p>問１（5点）：4/4と6/6と8/8と10/10と12/12は毎年すべて同じ曜日である</p>
<select id="answer0">
</select>
<select id="answer1">
</select>
<p>問３（2点）：「123456789」は数字を入れ替えても3で割り切れる</p>
<select id="answer2">
</select>
</select>
<p>問４（2点）：阿久津先生は昔悪魔と呼ばれていた</p>
<select id="answer3">
</select>
<p>問5（100点）：今すごく眠い</p>
<select id="answer4">
</select>
<div class="box">
<p id="display1">得点表示箇所</p>
</div>
<script src="ternary_operator3.js"></script>
</body >
</html >
JSファイル
//↓「解答する」ボタンが押されたときに実行される処理
function displayMessage() {
var score = 0;//得点管理用変数
var answer = [];//解答管理用配列
//セレクトボックスで選択された項目のvalue属性値を参照して配列に代入
console.log(answer);
score += (answer[0] == 1) ? 5 : 0;
score += (answer[1] == 1) ? 3 : 0;
score += (answer[2] == 1) ? 2 : 0;
score += (answer[3] == 1) ? 2 : 0;
score += (answer[4] == 1) ? 100 : 0;
document.getElementById('display1').innerHTML = score + '点';
}
例題をコピペして少しずつ理解を深めること。
※便利機能
alt +↑↓で項目を行ごと移動させることができる
〇switch文の使い方
switch (評価する値) {
case 値1:
評価する値が値1と一致したした時の処理
break;
どのcaseも合致しない時の処理
default:
break;
}
例題
var num = 3;
console.log('１回目の出力');
switch (num) {
case 1:
console.log('1の処理');
break;
case 2:
console.log('2の処理');
break;
case 3:
console.log('3の処理');
break;
default:
console.log('該当なしの処理');
break;
}
//switchの後にある（）内の値とcase値を「＝＝＝」
//で確認していく
//※データ型・値とともに合致するcase節以降を実行
//break；が出てきたところでswitch文を抜ける（終了させる）
console.log('２回目の出力');
switch (num) {
case '1':
console.log('1の処理');
break;
case '2':
console.log('2の処理');
break;
case '3':
console.log('3の処理');
break;
default:
console.log('該当なしの処理');
break;
}
//厳密等価演算子での評価なのでどのcaseにも合致しない
//どのcaseにも合致しない場合はdefault節以降を実行する。
console.log('３回目の出力');
var text = '赤';
switch (text) {
case '黒':
console.log('規律');
break;
case '赤':
console.log('活発');
break;
case '緑':
console.log('信頼');
break;
}
//評価に使用する値は数値型だけではなく文字列型にも使用可
//default節は必要なければ省略可能。
