【JavaScript授業六日目】if文・論理演算子(続き)、三項演算子、switch文
重要なやつまとめ（忘れた時用）
●算術演算子
| 演算子 | 名称 | 内容 |
|---|---|---|
| + | 加算演算子 | 足し算 |
| - | 減算演算子 | 引き算 |
| * | 乗算演算子 | 掛け算 |
| / | 徐算演算子 | 割り算 |
| % | 徐余演算子 | 割り算の余り |
●代入演算子
| 演算子 | 名称 | 内容 |
|---|---|---|
| ＝ | 代入演算子 | 代入 |
| +＝ | 文字列連結代入演算子 | 文字列連結を代入 |
| +＝ | 加算代入演算子 | 数値の足し算を代入 |
| -＝ | 減算代入演算子 | 数値の引き算を代入 |
| *＝ | 乗算代入演算子 | 数値の掛け算を代入 |
| /＝ | 除算代入演算子 | 数値の割り算を代入 |
| %= | 徐余代入演算子 | 数値の割り算の余りを代入 |
●JSで意味のある記号
| 文字 | 名称 | 内容 |
|---|---|---|
| \' | シングルクォート | 文字列の開始や終了を意味 |
| \' | ダブルクォート | 文字列の開始や終了を意味 |
| \\ | バックスラッシュもしくは円マーク | エスケープシーケンス記号 |
●特殊な文字
| 文字 | 名称 |
|---|---|
| \n | 改行 |
| \r | 復帰 |
| \t | タブ |
●比較演算子
| 演算子 | 名称 | 内容 |
|---|---|---|
| ＝＝＝ | 厳密等価演算子 | データ型も含め等しい場合に真を返す |
| ＝＝ | 等価演算子 | 等しい場合に真を返す データ型が違う場合はどちらかに型を合わせて比較 |
| ！＝＝ | 不等価演算子 | データ型も含め等しくない場合に真を返す |
| ！＝ | 厳密不等価演算子 | 等しくない場合に真を返す データ型が違う場合はどちらかに型を合わせて比較 |
| ＜ | 小なり演算子 | 小さい場合に真を返す |
| ＜＝ | 小なりイコール演算子 | 小さいか等しい場合に真を返す |
| ＞ | 大なり演算子 | 大きい場合に真を返す |
| ＞＝ | 大なりイコール演算子 | 大きいか等しい場合に真を返す |
●論理演算子
| 演算子 | 名称 | 内容 |
|---|---|---|
| ＆＆ | AND演算子（論理積） | 両方真の時に真を返す |
| ｜｜ | OR演算子（論理和） | どちらかの値が真の時に真を返す |
| ！ | NOT演算子（否定） | 真偽値の値を反転させる |
●ifネスト練習
if (hour >= 10) {
if (hour < 18) {
console.log("営業中");
} else {
console.log("営業は終了しました");
}
} else {
console.log("まだ営業前です");
}
●論理演算子
・＆＆：条件が両方満たされるときに実行
・｜｜：条件がどちらか満たされるときに実行
※「shift+￥」でだせる
・！：条件を満たしてないときに実行（true⇔false反転させる）
● 演算子の注意
var num = 10;
console.log(num === 10);//true
console.log(num === '10');//false データ型もみる
console.log(num === 5);//false
console.log(num === '東京');//false
var num = 10;
console.log(num <= 10);//true
console.log(num <= '10');//true 数字になる
console.log(num <= 5);//false
console.log(num <= '東京');//false
console.log(1 < 'A');//false 右の数字を文字列にして比較してる
console.log('Aあ' < 'Aい');//true
文字列型の比較の場合は文字コードの並び順を基準にしてる
●奇数と偶数を判定するときの注意！
var number = -5;
console.log(number);
if (number % 2 == 1) {
数値がマイナス値の時に判定できない
console.log('奇数');
} else {
console.log('偶数');←こっちになる
}
var number = -5;
console.log(number);
if (number % 2) {
余りがあれば「奇数」
console.log('奇数');←こっちになる
} else {
console.log('偶数');
}
////別解////
var number = -5;
console.log(number);
if (!number % 2 == 0) {
余りが0でなければ「奇数」
console.log('奇数');←こっちになる
} else {
console.log('偶数');
}
三項演算子
条件式 ？ true時の処理(値) ： false時の処理(値) ；
・if文と同じで条件によって処理や値を選択可能
・メリット：分岐処理を一行で記述できる
・デメリット：真式や偽式に追加で記述できない
・複雑な分岐処理の場合はわかりづらくなるので使いどころに注意！
num % 2 == 1 ? console.log('奇数') : console.log('偶数');
↓if (num % 2 == 1) {
console.log('奇数');
} else {
console.log('偶数');
}
これを短くしたver
message = (num % 2 == 1) ? '奇数' : '偶数';
↑()はわかりやすくするために囲っている
console.log(message);
↓
if (num % 2 == 1) {
message = '奇数';
} else {
message = '偶数';
}
console.log(message);
これを短くしたver
HTML
<select id="answer0">
</select>
select枠
option value="値"←項目(JSで使用する値)
option value="値"←項目(JSで使用する値)
「解答する」ボタンが押された時に実行される処理
function displayMessage() {
var score = 0;//得点管理用変数
var answer = [];//解答管理用配列
セレクトボックスで選択された項目の
value属性を参照して配列に代入して
console.log(answer);
score += (answer[0] == 1) ? 5 : 0;
条件式が「1」と等しくなっているので〇が正解
ちなみに「2」と等しいのは「×」が正解
HTMLのoption要素value属性と解答を連動させる
score += (answer[1] == 1) ? 3 : 0;
score += (answer[2] == 1) ? 2 : 0;
document.getElementById('display1').innerHTML = score + '点';
console.log(score + '点');
}
switch文
switch(評価する値){
case 値1：
評価する値が値1と一致したときの処理
break;
default：
どのcaseにも合致しないときの処理
}
・default：意味) 本来入れるはずのものを入れなかったから表示されるもの（怠慢の意味だったりする）
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文を抜ける
・厳密等価演算子「＝＝＝」での評価なのでどのcaseにも合致しない
・ ほかの言語だと、等価演算子で評価したりする
・評価に使用する値は数値型だけでなく文字列型も使える
・どのcaseにも合致しない場合はdefault節以降を実行する
・default節は必要なければ省略可能（ifのelseと一緒）
var rank = 'B';
switch(rank){
case 'A' : ←三つ
case 'B' : ←まとめて
case 'C' : ←評価できる
console.log('合格');
break;←ブレイクまで実行される
case 'D' :
console.log('不合格');
break;
}
