条件分岐
条件を指定して処理するifとif...else
例)
もし◯◯だったら◯◯
この条件に合わない場合、△△
といった条件ん応じさせることが出来る
ifを使う理由
1つの流れしか記述できなかったJavascriptに対してif文を使うことにより条件に応じた処理の切り替えることが出来る。変化する時間に応じて違う処理したりユーザーによって異なる値の対応が可能になるためである
もし◯◯だったらというif文は【条件を設定】してそれに【合致】すればという考え
Javascriptで記述する際には条件式を記述しその式を【真偽】で判定する。
合致すれば【真】、合致しなければ【偽】になり【真】の場合はこのようにするという処理を記述させる
【else】を組み合わせることにより【偽】の場合はこのようにするという処理を記述でき、if...else構文として大変便利である。このように条件を判定し処理を分けることを【条件分岐】という
比較演算子
== 左辺と右辺は等しいか？
例) a == 10 aが10なら真、それ以外は偽
!= 左辺と右辺は等しくないか？
例)a != 10 aが10なら偽、それ以外は真
=== データ型も含め左辺と右辺は等しいか？
例) '10' === 10 文字列型の10と数値型の10なので判定は偽
!== データ型も含め左辺と右辺はデータ型も含め等しくないか？
例) '10' !== 10 同じ10だが、型が違うので真
値の大小を比較する比較演算子
< 左辺は右辺より小さいか？
例) a < 10 aが10【未満】の場合は真
> 左辺は右辺より大きいか？
例) a > 10 aが10位上の場合は真
左辺と右辺が同じ場合も含める比較演算子
<= 左辺は右辺と等しいかまたはより小さいか？
例) aが10と10未満の場合は真
>= 左辺は右辺と等しいかまたはより大きいか？
例) aが10と10位上の場合は真
if...elseの使い方
if (条件式) {
【真】の時の処理
}else {
【偽】の時の処理
}
条件を分岐させたい部分ではじめにifと記述して()内に条件式を記述。
続く{}のブロック内に条件式が【真】になるときに行わせたい処理を記述。さらに条件式の判定が【偽】になるときに行わせたい処理がある場合、elseと記述し次に{}のブロック内に処理を記述する
トレーニング
条件分岐の構文、if...elseを使用した例
記述が少し長くなるので外部のJavascriptファイルとして読み込むようにする
ここでのトレーニングはdateオブジェクトから取得した現在の時刻を判定し、それぞれ午前と午後の場合でメッセージを変えて表示させる
新規ファイルを作り下記コードを記述しなさい
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if...elseのトレーニング</title>
<script type="text/javascript" src="conditional01.js"></script>
</head>
<body>
<script type="text/javascript">
<!--
document.write(timeMessage());
console.log(timeM);
// -->
</script>
</body>
</html>
完成したらtest02.htmlとして保存
解説
<script type="text/javascript" src="conditional01.js"></script>
はscript要素のsrc属性を使用して読み込むJavascriptファイルを指定。
conditional01.jsはこれから作成する外部Javascriptファイル
続いてbody要素の中のscript要素を記述
body要素の中で関数名だけを記述することにより呼び出して使用
関数名(timeMessage)はこれから作成する外部Javascriptファイルの中で定義する関数名
Dreamweaverで外部ファイルconditional01.jsファイルを作成
function timeMessage(){
var myClock = new Date();
var myHour = myClock.getHours();
if(myHour > 11){
myHour = myHour - 12;
var a_p = '現在、午後';
}else{
var a_p = '現在、午前';
}
var myMessage = a_p + myHour + '時です。';
return myMessage;
}
保存したらブラウザで確認
現在午前(後)◯◯時です。
と表示されていたら完成
解説
ifの条件に合うときの処理
if条件 (myHour条件式 >比較演算子 11 ※myHourは11より大きいか？) {
myHour = myHour - 12;
変数myHourから12を引く
var a_p = '現在、午後';
変数a_pを文字列【現在、午後とする】
} elseifの条件に対して一致しない(偽)だった場合 {
ifの条件に合わないときの処理
var a_p = '現在、午前';
変数a_pを文字列【現在、午前】とする
