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

JavaScript

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

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

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

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

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

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

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

 

【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文は省略することもできます。=何も実行しないとき

OK

キャンセル

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

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

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
の2つの条件式に当てはまりますが、先に当てはまった条件のみ命令が実行されます。
よって、今回は「おめでとう!」のみが表示されます。

(JavaScript本格入門、p82~85)

あとがき

JavaScript超入門でザーッとハンズオン学習をして、JavaScript本格入門でより詳しく調べるのがわかりやすくてよいです。

超入門は、twitter上でもたくさんの初学者に支持されている通りかなりわかりやすいです。しかし、内容は薄く書いてない内容も多いです。より深く知りたい場合は、先生おすすめの本格入門がやはり良いようです。

亀ペースですが、今日は以上です(;ω;)!

Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら