【JavaScript基礎】ダイアログボックスでif文を学習する【day112】

今日は、【JavaScript基礎】ダイアログボックスでif文を学習する
をアウトプットしていきます。

こんにちは。駆け出しコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
まだHTML/CSS(SCSS)/jQuery のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

さて、JavaScriptの学習に入った！と思ったところで、初案件をいただき一時中断していた基礎学習に戻ってきました。

✅JavaScript3週間後のゴール
・JSの仕組み
・広告タグ
・form送信、バリデーション
・GTM埋め込み
・jQueryと@media書き換え
・Intersection Observer
・便利なレンダリング

先生ありがとうございます！#もりけん塾 @terrace_tech #駆け出しエンジニアと繋がりたい

— はる🌸ARUTEGA (@fuwafuwahappy) August 8, 2020

わたしのJavaScriptのゴールはいったんこちらです↑
これらを書けるようになるべく、まずは基礎の基礎を学習していきます。

前回の記事はこちらです。

【JavaScript基礎】ダイアログボックスでif文を学習する
- window.alert()
- 確認のダイアログボックスを作る
else ifで複数分岐をする
あとがき

【JavaScript基礎】ダイアログボックスでif文を学習する

今日は、ダイアログボックスを学習したのでアウトプットします。

・window.alert()
・confirm()
・if文

これらを学習したのでまとめていきます。

window.alert()

alert()メソッドを使うと、windowにアラートダイアログボックスを表示させることができます。

<script>
'use strict';
window.alert('おつかれさまでした');
</script>

これらのコードを<script></script>内に書くか、別のJSファイルに書き<script src="">で読み込みます。

alert()メソッドに文字を入れ保存→ブラウザからhtmlファイルを開くとダイアログボックスが表示されます。

このダイアログボックスは、ブラウザの種類によって見た目が異なります。
たとえば、SafariではOKボタンは「閉じる」で表示されます。上図はChromeです。

また、前回のブログで、「JavaScriptの共通プログラミングパターン」が出てきました。せっかくなので、復習にそれらに当てはめて見ます。

（前回のブログ切り取りました。）

イベント発生→インプット→加工→アウトプットの順で考えてみます。

window.alert('お疲れさまでした')
①イベント発生：ページを開いたら　←これは特にプログラムなし
②インプット：('お疲れさまでした')
③加工：なし
④アウトプット：alert によってダイアログを出す

このようになります。今回は加工はありませんが、たとえば()内が数式だった場合は、数式が加工です。加工された数字がアウトプットによって表示されます。

確認のダイアログボックスを作る

次に、if文を使って確認のダイアログボックスを作ってみます。

確認のダイアログボックスは、

①ダイアログボックスに書かれた内容に対して「OK」「キャンセル」を選べる
②選んだ選択肢によって、処理を変える

というものです。

①をconfirm()メソッド、②をif文で作っていきます。

confirm()メソッド

confirm()メソッドでダイアログを作ってみます。

<script> 
　'use strict';
　window.confirm('寝かしつけは終わりましたか？');
</script>

alert()をconfirm()に変えるだけで確認のダイアログボックスになりました。

「寝かしつけは終わりましたか？」にしてみた(´･ω･`)

confirm()メソッドを使うと、ダイアログの表示 + リターンを返してくれます。

リターンを返すとは？
リターンは、日本語では「戻り値」「返り値」と呼ばれます。
実行の結果を報告してくれるものです。例）
console.log(window.confirm('寝かしつけは終わりましたか？'))
・OK→console.log( true );
・キャンセル→console.log( false );
がそれぞれリターンとして返ってきます。

trueは成り立つ、falseは成り立たないという意味。両方を合わせてブール値（またはブーリアン値）と呼びます。

if文や繰り返し文などは、ブール値がtrueなのか？falseなのか？を使って条件分岐をしていきます。

if文

if分で、条件分岐をしていきます。

if(window.confirm('寝かしつけは終わりましたか？')){
   console.log('勉強を開始します');
} else {
   console.log('勉強おあずけです');
}

if文の構図はこちらです。

if(条件式){
  //trueのときの処理
} else {
  //falseのときの処理
}

else文は省略することもできます。＝何も実行しないとき

キャンセル

それぞれコンソールに別の文章が出力されました。

ここまでが、javascript超入門の内容です(p46~64)

<br />

else ifで複数分岐をする

ここからは、書籍：javascript本格入門でif文をもう少し掘っていきます。

わたしの先生もりけんさん(@terrace_tec)がおすすめしてくださったバイブル的な1冊です。

---------

if文では、true・falseの2つの処理を作りました。

else ifを使うと、さらに分岐して複数の処理を設定することが可能です。

if(条件式1){ 
　//trueのときの処理 
} else if(条件式2) { 
　//trueのときの処理
} else {
　//falseのときの処理
}

テストの点数で、実際にコードを書いてみます！

var score = 100;

if(score === 100){ 　
  console.log('おめでとう！');
 } else if(score > 70) {
  console.log('もう少し！'); 
} else {
  console.log('がんばろう！');
 }

結果＊　「score = 100」を定義してあるので、consoleには「おめでとう！」が表示されます。

ここで、最初に定義したscore=100 は
・score === 100
・score > 70
の２つの条件式に当てはまりますが、先に当てはまった条件のみ命令が実行されます。
よって、今回は「おめでとう！」のみが表示されます。

<br />

(JavaScript本格入門、p82~85)