【初心者】ドットインストールでjavascriptを二時間で一通りやってみて詰まってわからなかったところを補完してメモ

無名関数

関数の定義の仕方は二通り 1.　普通のやり方

function greet(){alert("hello");}

greet();

2.無名関数

var greet = function(){alert("hello");}

greet();

即時関数で変数を囲う

即時関数...無名関数を定義して即座に実行する

ローカル変数にすることで他人のコードに影響を与えないようにする

(function(引数){
    式挿入
})();

ループ内にif文の中のcontinue

ループ処理の途中で処理をさせたくないものをif文で囲みcontinueすることで回避することができる。

タイマー処理

setInterval

前の処理が終ったか考えずにすぐに処理を行う

setTimeout

前の処理が終わったかどうかを考えた後に処理を行うループではsetTimeoutが良く使われる

タイマーを止めるときはif文の中にclearTimeout(引数)で終了させることができる。

<script>
        /*
            タイマー処理
                setInterval
                setTimeout
        */
        var i = 0;
        function show() {
            console.log(i++);
            var tid = setTimeout(function() {
                show();
            }, 1000);
            if (i > 3) {
                clearTimeout(tid);
            }
        }
        show();
 
</script>

配列の作り方

大カッコをつかう[]

var score = [100, 300, 500];

配列の中の配列

var m = [
    [1, 2, 3]
    [4, 5, 6]
];

console.log(m[1][1]); //5

javascriptのオブジェクト

名前と値のペアがグループ化されているそれぞれのペアのことをプロパティと呼び、名前のことをプロパティ名と呼ぶ

呼び出し方は二通り

変数の呼び方のように大カッコ[]で囲いプロパティ名
ドットで繋げて呼び出す

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JavaScriptの練習</title>
</head>
<body>
    <script>
        /*
            オブジェクト
                名前と値                
        */
        var user = {
            name: "taguchi", // プロパティ
            score: 80
        };
        // console.log(user["name"]);
        // console.log(user.name);
        user.score = 100;
        console.log(user);
 
    </script>
</body>
</html>

プロパティの値に関数を用いる(無名関数を用いることが可能)

オブジェクトのプロパティの値に関数が来た場合その関数のことをメソッドと呼ぶ

メソッドの中にオブジェクト内のプロパティにアクセスが可能

下記の様にthis.◯◯として利用する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JavaScriptの練習</title>
</head>
<body>
    <script>
        /*
            オブジェクト
                名前と値
        */
        var user = {
            email: "taguchi@gmail.com", // プロパティ
            score: 80,
            greet: function(name) { // メソッド
                console.log("hello, " + name + " from " + this.email);
            }
        };
        //console.log(user["email"]);
        //console.log(user.email);
        //user.score = 100;
        //console.log(user);
        user.greet("Tom");


    </script>
</body>
</html>

組み込みオブジェクト

組み込みオブジェクトとは...javascriptが元々用意してくれているオブジェクトのこと

Stringオブジェクトを使ってみる

下記のように、文字列リテラルから文字列オブジェクトと同様に書き下すだけで、javascript側が文字列オブジェクトを利用したいんだなと理解してくれるので、そのまま文字列オブジェクトを利用することができる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JavaScriptの練習</title>
</head>
<body>
    <script>
        /*
            組み込みオブジェクト

            - String
            - Array
            - Math
            - Date
        */
        // var s = new String("taguchi");
        var s = "taguchi"; // 文字列リテラル
        console.log(s.length);
        console.log(s.replace("t", "T"));
        console.log(s.substr(1, 3));


    </script>
</body>
</html>

※組み込みオブジェクトである、Arrayオブジェクトやその他も同様

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JavaScriptの練習</title>
</head>
<body>
    <script>
        /*
            組み込みオブジェクト

            - String
            - Array
            - Math
            - Date
        */

        var a = new Array(100, 300, 200);
        // var a = [100, 300, 200];
        console.log(a.length);
        // unshift -> array <- push
        // shift   <- array -> pop
        a.push(500);
        console.log(a);
        a.splice(1, 2, 800, 1000);//削除したいとき、その後追加したいに利用
        console.log(a);


    </script>
</body>
</html>

DOM

DOMとはwindowオブジェクトのこと(document object modelのこと) ブラウザ処理についてjavascriptから実行することが出来る ※ブラウザにより処理が変わるので注意が必要

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JavaScriptの練習</title>
</head>
<body>
    <h1>見出し</h1>
    <p id="msg">こんにちは！</p>
    <script>
        /*

        */
        // console.dir(window);
        // console.log(window.outerHeight);//windowの高さを得る
        // window.location.href = 'http://dotinstall.com';//他のページに遷移

        // document - 今開いているページ

        // document object model (DOM)

    </script>
</body>
</html>

DOMの操作

DOMを操作するにはhtmlのツリー構造が重要

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JavaScriptの練習</title>
    <style>
        .myStyle {
            font-weight: bold;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <h1>見出し</h1>
    <p id="msg">こんにちは！</p>
    <script>
        var e = document.getElementById('msg');
        e.textContent = 'hello!';//eのtextを変更する
        e.style.color = 'red';
        e.className = 'myStyle';//eのstyleを変える

        /*
            body
                p
                    text
        */
       //bodyの中のp要素の中にtextを仕込む
        var greet = document.createElement('p'),
            text = document.createTextNode('hello world');
        document.body.appendChild(greet).appendChild(text);

    </script>
</body>
</html>

イベント操作

getElementById('id')

指定されたidの要素を取得することができる

target.addEventListener('type', function)

type...対象とするイベントの種類をあらわす ex.'click'など listener...指定されたタイプのイベント発生時に通知を受け取るオブジェクト。基本は関数

全体として

DOM以降の#22〜#24が重かった。基本的な使い方を理解することができたので、あとは実際に作りながら、他の情報を参考にして理解を深める

参考URL

【旧版】JavaScript基礎文法徹底マスター (全24回) - プログラミングならドットインストール

[JavaScript] 猿でもわかるクロージャ超入門３無名関数 · DQNEO日記

せいぞんかくにん今何処

基本的に向上心のないばかです