3.2 入力内容に応じて動作を変更する　《変数》　【JavaScript超入門】

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。

jsstudy.hatenablog.com

変数とは
まとめ

今日はJavaScriptの変数について学びます。

「変数」（variable）は、データを入れておく「箱」「容器」みたいなものです。

変数 (プログラミング) - Wikipedia

プログラミングにおいて、変数（へんすう、variable）とは、プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものである。

変数とは

(p.71)

ある行で得られたデータ――今回の実習でいえばpromptメソッドのリターンの内容――を次の行以降でも使いたい場合は、そのデータを保存しておく必要があります。

その、保存のために使うのが「変数」です。

変数の使い方にはパターンがあります。

1) 変数を「定義する」

2) 変数にデータを「代入する」

3-a) 変数からデータを「読み出す」

3-b) 変数のデータを「書き換える」

1) 変数を「定義する」

何かデータを保存したいときは、まず変数を定義します。

var answer

varに続けて半角スペース、その後に変数の名前（変数名）を書けば、その変数名を持つ変数が定義できます。

このコードの場合、「answerという名前の変数」を定義していることになります。

変数名のつけ方

文字か、アンダースコア（_）、ダラーマーク（$）、数字がしよう可能。その他の記号（「-」「=」など）は使えない
1文字目に数字は使えない
予約語は使えない

予約語とは

予約語とは、JavaScript言語自体ですでに使われている単語のことです。

→「if」「else」「for」「var」など、JavaScriptの構文で使われている単語が予約語です。

developer.mozilla.org

アルファベットの大文字・小文字を区別する

JavaScriptはアルファベットの大文字・小文字を区別します。

たとえば、「myName」と「myname」は、違う変数として扱われます。

var myName; // 大文字のN
var myname; // 小文字のn

変数の使用例

以下の内容を「index.html」というファイル名で保存して、Chromeで開きます。

<html>
<head>
    <meta charset="UTF-8">
    <title>3-02_var</title>
</head>
<body>
    <p id="result">ここに計算結果を表示します。</p>
    <script>
        var x = 10;
        var y = 20;
        var z;
        z = x + y;
        document.getElementById('result').textContent = z;
    </script>
</body>
</html>

「ここに計算結果を表示します。」という部分が書き換わって、「30」と表示されます。

上記のプログラムで「x」「y」「z」という３つの変数を使いました。

代入演算子（=）

(p.72)

「=」は、右側のデータを左側の変数やプロパティなどに代入する役割をする記号で、「代入演算子」と呼ばれています。

var x;

x = 10;

と書くと、変数xに10を入れることができます。

変数に保存された内容で動作を切り替える

(p.77)

プロンプトダイアログボックスに入力された文字を変数に保存して、変数の内容が「yes」ならアラートダイアログボックスを表示してみます。

以下の内容を「index.html」というファイル名で保存して、ブラウザーで開きます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-02_var</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>入力内容に応じて動作を変更する</h1>
<h2>変数に保存された内容で動作を切り替える</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
    <p>ブラウザのコンソールを開いてください。</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
var answer = window.prompt('ヘルプを見ますか？');
if(answer === 'yes') {
    window.alert('タップでジャンプ、障害物をよけます。');
}
</script>
</body>
</html>

入力を求めるプロンプトダイアログボックスが表示されたら「yes」と入力して[OK]ボタンをクリックしてみます。

f:id:jsstudy:20170312122011p:plain

すると、アラートダイアログボックスが表示されました。

f:id:jsstudy:20170312122019p:plain

これで、上記プログラムの変数「answer」について、動作確認ができました。

比較演算子

(p.79)

===のように、その記号の左側と右側を比較するものは「比較演算子」と呼ばれています。

===の場合は左右が同じであれば評価結果がtrueになります。

２つのデータが同じか違うか、比較する機能が「比較演算子」です。

JavaScriptの比較演算子には、「==」と「===」という2種類が用意されています。

developer.mozilla.org

「==」→ 「等価演算子」
「===」→ 「厳密等価演算子」

「==」よりも「===」の方が、より厳しく審査します。

（例）以下のJavaScriptプログラムを実行してみます。

<html>
<head>
    <meta charset="UTF-8">
    <title>3-02_var</title>
</head>
<body>
    <p>「==」と「===」の違いをテスト</p>
    <script>
        var intNum = 10; // 10という数値
        var strNum = '10'; // 「10」という文字列
        if (intNum == strNum) {
            window.alert('==で比較すると同じ')
        } else {
            window.alert('==で比較すると違う')
        }
        if (intNum === strNum) {
            window.alert('===で比較すると同じ')
        } else {
            window.alert('===で比較すると違う')
        }
    </script>
</body>
</html>

最初に「==」で比較した結果が、アラートダイアログボックスで表示されます。

f:id:jsstudy:20170312124114p:plain

次に「===」で比較した結果が、アラートダイアログボックスで表示されます。

f:id:jsstudy:20170312124149p:plain

10という数値と文字列があった場合、

「==」では、同じ内容のデータと評価されましたが、

「===」では、違う内容のデータと評価されました。

これは、数値型と文字型の「型」の違いを無視するか、判別するかの違いです。

厳密に審査する「===」では型が違っているとダメですが、

緩い審査を行う「==」では型の違いは無視するので同じに扱われる、という比較結果になります。

データの「型」（文字型とか数値型など）の違いまで判定したい場合は「===」を使えばOKですね。

型とは

型はデータの種類、分類です。

developer.mozilla.org

データ型

最新の ECMAScript 標準化では以下の 7 つの型が定義されています :

6 つのデータ型はプリミティブ型です:

真偽値 (Boolean)。 true または false.

null。null 値を意味する特殊なキーワードです。JavaScript は大文字・小文字を区別するため、null は Null や NULL などとは異なります。

undefined。値が未定義のトップレベルプロパティ。

数値 (Number)。 42 や 3.14159 など。

文字列 (String)。 "Howdy" など。

シンボル (Symbol)（ECMAScript 6 の新機能）。インスタンスが固有で不変となるデータ型。

そしてオブジェクト (Object)。