【JavaScript基礎】プロンプトを表示させて変数を学ぶ【day114】

JavaScript

今日は、JavaScriptの基礎のつづきです。プロンプトを表示させる過程で変数を学んだのでアウトプットしていきます。

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

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

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

【JavaScript基礎】プロンプトを表示させて変数を学ぶ

前回は、alert()とconfirm()メソッドでダイアログボックスを表示させつつ、if文を学びました。

今日は、プロンプト(=テキストエリアのあるダイアログボックス)を表示させつつ、変数を学んだのでアウトプットしていきます。

ちなみに前回のブログはこちらです。

prompt()メソッド

prompt()メソッドを使えば、テキストエリアのあるダイアログボックスを表示させることができます。

<script>
  "use strict";
   let answer = window.prompt("寝かしつけ終わりましたか?");
   console.log(answer);
</script>

↓prompt()内に書いたテキストが表示され、その下にテキストエリアも表示されます。

↓試しに、テキストエリアに文字を入力してみます。 ↓OKを押すと、コンソールにyes!!!!!!が表示されました。

OKを押したときのみ、コンソールに文字が表示されます。
(キャンセルを選んだ時は、何も表示されない = null という特殊な値が代入される)

変数を定義する

先ほどのコードで出てきた、この部分で「変数」というものを定義しています。

let answer = window.prompt(“寝かしつけ終わりましたか?”);

 

変数とは、同じ値を繰り返し使うための「箱」のようなものです。
使いたい時に、変数名(=ここではanswer )を書くだけで、変数を呼び出すことができます。

let 変数名 = 変数

 

ここで使われている = は代入演算子といい、右側のデータを左側に代入するという意味

 変数のデータを書き換える

定義したデータ部分は、書き換えることができます。

 <script>
   "use strict";
   //変数を定義
    let answer = window.prompt("寝かしつけ終わりましたか?");
     console.log(answer); 
   //変数の書き換え
     answer = "no";
     console.log(answer);
</script>

2度目に定義する時は、letは使いません。再定義することで

データ部分である「window.prompt(”寝かしつけは終わりましたか?”);」のリターンが、「”no”」に書き換わります。

この状態で、consoleに変数answerを表示させてみます。

OKだけを押してみます。

answerの新しいデータである「no」が表示されました。

変数名の付け方

変数名には付け方の条件があります。

  1. 「-」「=」は使えない。
  2. 日本語は推奨されない。
  3. 半角スペースは使えない。
  4. 数字から始められない。
  5. 予約語は使えない。

予約語とは

もともとJavaScriptの言語で使われている言葉、これから使われる可能性のあるものは予約語と呼ばれ、変数名につけることができません。

JavaScript Primerには「”特別な意味を持つキーワード”」ともあります。

予約語一覧

(引用:MDN | 予約語一覧)

このほかにも、’use strict’ を使った厳格モードで予約語となるものもあります。詳しくは上記のMDNサイトにあります。

定数を定義する

変数は書き換えができるものでしたが、書き換えができない「定数」というものもあります。

定数はletではなくconstを使います。先ほどのコードを、定数にしてみます。

<script>
  "use strict";
    
  //定数を定義  
  const answer = window.prompt("寝かしつけ終わりましたか?"); 
  console.log(answer); 
  //定数を書き換えようとすると...? 
  answer = "no";
  console.log(answer);
</script>

定数answerを定義して、リターンを書き換えようとしてみます。

コンソールで確認すると「定数を書き換えようとしてるけど、無理だよ!」と怒られています。

このように、constは再代入をすることができません。書き換えてはいけないデータの保存に使います。

プロンプトで条件分岐をしてみる

前回のブログで学習したif文で、プロンプトの条件分岐もやってみます。

<script>
'use strict'

const answer = window.prompt('寝かしつけは終わりましたか?');
if(answer === 'yes') {
  window.alert('うれしい、最高、じぶんの時間');
}

</script>

プロンプトに「yes」 が入力されたときだけ、alertが出るように条件式を書きました。

yes↓

s

↓表示されました( ﹡ˆoˆ﹡ )

割愛しますが、「no」と入れたり、キャンセルをクリックすると何も起きません。

=== は比較演算子の一つです。※左右を比較するものを比較演算子という。
=== の左右が同じとき、trueを返してくれます。

 【追記】変数の命名規則〜読みやすいコードのために〜

JavaScript本格入門から内容の補足として、読みやすいコードのための変数の命名規則についてです。

▶︎気をつけること

  1. 名前から変数の中身が想像できる
  2. 短すぎたり、長すぎたりしない
  3. 紛らわしい名前をつけない
  4. 文頭の_は使わない(特別な意味を持つ場合がある)
  5. 決められた記法で書く
  6. 英単語が基本(ローマ字読みはしない)
5.決められた記法とは?一般的な使い分けは?
・camelCase記法(lastName)      →変数/関数名
・Pascal記法(LastName)     →クラス名
・アンダースコア記法(last_name)→定数名

 

本記事の参考文書

p46,47

先生おすすめのバイブル本です。

p65〜78

内容が易しく挫折しづらそうなハンズオン形式本。

JavaScript Primer

Twitterのフォロワーさんに教わった有料書籍のweb版(無料!)です。
今回は、こちらを参考にしました。

あとがき

今回も、JavaScriptのど基礎の内容でした。

この辺りはjQueryやっていれば全然理解できますね!ペース上げていきたいです!

今日は以上です。

 

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

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