初めてのJavaScript その3

前回の続きとなります。
初めてのJavaScript その2 - Qiita

色々な関数

ローカル関数に関して

index.html

  <script>
        function hello() {   
            var local = 3 + 12 - 4  // ローカル変数
            alert(local); // OK
        }
        alert(local);  // NG エラーになる
  </script>

上記の通り、関数の中で定義した変数はその関数内でしか使えません！！

即時関数

index.html

  <script>
        // 引数を渡す書き方
        (function(name) {
            // alert(name);
        })("Me"); 

　　　　 //　即時間数のメリット
        (function() {
            var x = 10,
                y = 20;
            // x , y はローカル変数となり、外部からの影響を受けなくなる
        })();
  </script>

上記の通り、即時に実行する関数を即時間数といいます。
主に、ローカル変数を実現するために使ってきましたが、今では代わりにletやconst（後述）を使うのが一般的な気がします。

タイマー処理の書き方

setTimeout

index.html

  <script>
        var i = 0;
        function show() {
            var t = setTimeout(function() {
                show();    // 自分自身を飛び出すので結果ループ処理となる
            }, 1000);  // 一秒ごとに実行
            if (i > 3) {
                clearTimeout(tid);  // clearTimeoutを使うことでsetTimeout処理を終了させることができる。
            }
        }
        show();  
  </script>

ほかにsetIntervalというタイマー系の関数もありますが、使い勝手がイマイチなので、特にもし必要なければ覚えなくてもいいかもしれません。
興味ある方はこちらを見てみてください。

配列

グループ化されたデータである

index.html

    <script>

        // var eki_1 = "東京", eki_2 = "名古屋";
        // ↑のように書くのはすこしだるいし、変数が多くて読みづらいかと思います。
        // 下のように配列で書くとすっきりします。
        var eki= ["東京", "名古屋", 100];  // 異なる型を入れることができる

        eki[0] = "大阪";　// 東京が大阪に書き換えられます

        // 下記のような配列の中に配列を書くことができます。
        var m = [
            [1, 2, 3],
            [4, 5, 6]
        ];
        // m[1][2]);  で6という数字が取れます。
    </script>

配列の添え字は「0」始まりであるのを忘れないでください!

オブジェクトについて

名前と値をもつ、オリジナルなまとめられたデータ

index.html

    <script>
        var user = {
            name: "kato", // 名前はプロパティと呼ばれます（例：nameプロパティ）
            age: 20
        };
        alert(user.name);  // katoと出力される
        user.age= 20;　　　 // ageを20に書き換え
        alert(user.age);　　// 20と出力される
    </script>

オブジェクト内のメソッドについて

オブジェクト内にメソッドをはやすことができます

index.html

    <script>
        var user = {
            name: "kato", // プロパティ
            age: 80,
            getUserInfo: function() {    // getUserInfoメソッド
                alert("名前：" + this.name + "年齢：" + this.age);
            }
        };
        user.getUserInfo();
    </script>

this.hogehogeのように、thisを使うことで同じオブジェクトのプロパティにアクセスすることができます！

今日はここまで、続きは次回で！！