javaScript 初心者用 基本構文

今回は備忘録を兼ねてjavaScript構文を紹介します。

参考サイト

javaScript学習時に調べたいことが出てきたら次のサイトを参照。

JavaScript | MDN


コメント

// 一行
/* */ 複数行

スクリプトは外部ファイルに書くことが可能

<script src="ファイル名"></script>


使用例

<script src="myscript.js"></script>


変数

変数
var msg;
msg = “hello world!”;

四則演算

% :余り

使用例

var x = 10 % 3;

cnosole.log(x);


+= 代入を伴う演算子

var x;

x = x + 5;
x += 5;

上記2つは同じ意味。
掛け算でも一緒。

x = x * 5;
x *= 5;

++ — 単項演算子

1を足しなさい
1を引きなさい

x++;
x--;


特殊文字

\n 改行
\t タブ
\' シングルクウォート

/**
* PHP等で正規表現を扱う時と同じような考え方
* \(バックスラッシュ)を使って特殊文字を表す
*/

文字列の連結

var str;

str = 'hello' + 'world';



+ 記号を使っているので、四則演算と区別する必要がある。
項の内のどれかが文字列だと、 + は連結器号の役割になる。

var str;

str = '3' + 3; //33


真偽値

次の2つの書き方は同じ意味。

if (x) {
            // 処理
        }

if (x !== '') {
            // 処理
        }

alert, confirm, prompt

    /*
        alert   | ユーザに何らかの情報を提示したいときに
        confirm | ok, cancel ボタンを表示。返り値(true, false)アリ。
        prompt  | ユーザから情報を受け取るときに使用。未入力の場合はnullが返ってくる
    */
        // alert("hello");

        // var ans = confirm("are you ready?");
        // console.log(ans);

        var name = prompt("what you\'re name?", "初期値はコレ");
        console.log(name);


関数の種類

javaScriptでは複数の関数記述方法がある。

通常の関数

通常の関数の扱いは次の通り。

function hello(name){
            var msg = "hello" + '\t' + name;
            return msg;
        }

        var greet = hello('Tom');
        console.log(greet); // hello   Tom と表示される


無名関数(匿名関数)

無名関数(匿名関数)だと、次のような記述になる。

<script>
    /*
        無名関数 | 関数名を変数として扱う
    */
        var hello = function(name) { // 無名関数(匿名関数)
            var msg = "hello" + '\t' + name;
            return msg;
        }

        var greet = hello('Tom');
        console.log(greet); // hello   Tom と表示される

</script>


即時関数

関数を記述した直後に、その関数を実行したい時に。

<script>
    /*
        即時関数 | 関数を定義した直後に呼び出したい時に
                 | →関数全体を () で囲む
                 | →直後に () をつける
    */
        (function hello() {
            var msg = "hello" + '\t' + 'name';
            console.log(msg); // hello   name と表示される
        })()
        
</script>



もちろん、引数も取れる。
さらに、関数記述直後に実行されるので関数名の省略も可能。

<script>
    /*
        即時関数 | 関数を定義した直後に呼び出したい時に
                 | →関数全体を () で囲む
                 | →直後に () をつける
    */
        (function (name) {// 関数名の省略。引数も取れる。
            var msg = "hello" + '\t' + name;
            console.log(msg); // hello   takimoto と表示される
        })('takimoto')

</script>


タイマー処理

次のような処理をしたいときに。

  • ある一定時間ごとに何らかの処理をしたい
  • ある一定時間後に一度だけ処理をしたい

setInterval, setTimeout の使用例は次の通り。


[setInterval]

<script>
    /*
        タイマー処理
        setInterval | 一定時間ごとに処理を繰り返したい時に
        setTimeout  | 一定時間後に処理を一度だけ実行したい時に
    */
        var i = 0;

        function show() {
            console.log(i++);// 呼び出す毎にカウントアップ
        }

        setInterval(
            function(){
                show();//先程定義したshowを呼び出す。
            },
            1000 // ms. 1000ms = 1s
        );

</script>



[setTimeout]

<script>
    /*
        タイマー処理
        setInterval | 一定時間ごとに処理を繰り返したい時に
        setTimeout  | 一定時間後に処理を一度だけ実行したい時に
    */
        var i = 0;

        function show() {
            console.log(i++);// 呼び出す毎にカウントアップ
        }

        setTimeout(
            function(){
                show();//先程定義したshowを呼び出す。
            },
            1000 // ms. 1000ms = 1s
        );

</script>


setInterval, setTimeout の使い分け

上記コードを実行するとわかるが、

setInterval
前の処理が終わったかどうかに関わらず次の処理を実行

setTimeout
前の処理が終わるのを確実に確認


今後私はきっと setTimeout を多用すると思う。
勝手に処理が進んだり、いつまでも終わらなかったり。
想定外の動作を生んでしまう原因になりそう、setInterval は。

タイマーの止め方

clearTimeout を使うとタイマーを止めることができる。

<script>
    /*
        タイマー処理
        setInterval | 一定時間ごとに処理を繰り返したい時に
        setTimeout  | 一定時間後に処理を一度だけ実行したい時に
        clearTimeout| タイマーを止めたい時に
    */
        var i = 0;

        function show() {
            console.log(i++);// 呼び出す毎にカウントアップ

            var timerId;

            timerId = setTimeout(
                            function(){
                                show();//先程定義したshowを呼び出す。
                            },
                            1000 // ms. 1000ms = 1s
                        );

            if (i > 2) {
                clearTimeout(timerId);
            }
        }

        show();//ループ開始

</script>


オブジェクト

オブジェクトとは、名前・値のペアのこと。
記述方法は次の通り。

    <script>
    /*
        オブジェクト | 名前と値のペア
                     | ペアは :(コロン) で区切る
                     | 名前 = プロパティ
                     | プロパティは "" で括らないことが多い
    */
        var user = {
            email: "takimoto@tst.com",
            userId: 3
        };

        console.log(user["email"]);// []で呼び出す方法
        console.log(user.userId);// . で呼び出す方法

    </script>



呼び出し方が2通りある。
可読性が高いのは [] を利用した方かな。
でも、記述の手間は . を利用した方なので、今後私はこちらを採用する。

メソッド

オブジェクト値に関数を指定した場合、それをメソッドと呼ぶ。

<script>
    /*
        メソッド | オブジェクト指向的に関数を扱う
                | オブジェクト内の値の位置に関数を指定する
    */
        var user = {
            email: "takimoto@tst.com",
            userId: 3,
            greet: function(name){
                console.log("It\'s nice to see you, " + name);
            }
        };

        user.greet('takimoto');//メソッド呼び出し

</script>


this

this はオブジェクト自体を表す。
PHPではアロー演算子(->)を使ってプロパティを呼び出した。
javaScriptでは this のみでイケる。

<script>
    /*
        メソッド | オブジェクト指向的に関数を扱う
                 | オブジェクト内に関数を指定する
    */
        var user = {
            email: "takimoto@tst.com",
            userId: 3,
            greet: function(name){
                console.log("It\'s nice to see you, " + name + '\t written in: ' + this.email);
            }
        };

        user.greet('takimoto');//メソッド呼び出し

</script>


組み込みオブジェクト

javaScriptが用意しているオブジェクトがある。
いくつか紹介。

string

文字列の操作について。

<script>
    /*
        組み込みオブジェクト | javaScriptが予め用意しているオブジェクトのこと
            - String 文字列操作
    */
        var s = new String("takimoto");
        console.log(s.length);//文字列長を返す
        console.log(s.replace("t", "T"));//文字列の一部置換
        console.log(s.substr(0,4));//文字列部分抽出 (0,1,2,3 の4文字が返ってくる)
</script>


Array

配列の要素を追加・削除する組み込みオブジェクトも用意されている。

<script>
    /*
        組み込みオブジェクト | javaScriptが予め用意しているオブジェクトのこと
            - Array 配列操作
    */
        var a = new Array(10, 20, 30);

        // 配列の要素数を返す
        console.log(a.length);// 3

        // 配列先頭に要素を追加
        a.unshift("head");
        console.log(a);// ["head", 10, 20, 30]

        // 配列末尾に要素を追加
        a.push("tail");
        console.log(a);// ["head", 10, 20, 30, "tail"]

        // 配列先頭から削除
        a.shift();
        console.log(a);// [10, 20, 30, "tail"]

        // 配列末尾から削除
        a.pop();
        console.log(a);// [10, 20, 30]

        // 配列内の任意の場所の要素を削除・追加
        a.splice(1, 2);// keyが1の場所から要素を2つ削除
        console.log(a);// [10]

        a.splice(0, 1, 100, 200, 300);// keyが0の場所から要素を1つ削除
                                      // さらに 100, 200, 300 を要素に追加
        console.log(a);// [100, 200, 300]

</script>


Math

数学で使うような操作が可能。

<script>
    /*
        組み込みオブジェクト | javaScriptが予め用意しているオブジェクトのこと
            - Math 数学で使うような操作
                → new は不要
    */
        // 円周率(Π)を表示
        console.log(Math.PI);// 3.141592653589793

        // 切り上げ
        console.log(Math.ceil(5.3));// 6

        // 切り捨て
        console.log(Math.floor(5.3));// 5

        // 四捨五入
        console.log(Math.round(5.3));// 5

        // 乱数
        console.log(Math.random());// ランダムな数値を表示

</script>


Date

日付に関する操作。

<script>
    /*
        組み込みオブジェクト | javaScriptが予め用意しているオブジェクトのこと
            - Date 日付に関する操作
    */
        //現在日時を取得
        var d = new Date();
        console.log(d);// 現在時刻、年月日、曜日、タイムゾーン

        // 年を取得
        console.log(d.getFullYear());// 2016

        // 月を取得
        console.log(d.getMonth());// 3 (0始まりに注意)

        // 経過時間 (ms. 1970/1/1が基準)
        console.log(d.getTime());// msで経過時間が表示される

</script>


ブラウザ操作

javaScriptでブラウザの操作が可能。

<script>
        /*
            dir | オブジェクトのプロパティを表示
        */
        // オブジェクトのプロパティを表示する
        console.dir(window); //オブジェクト, プロパティをツリーで表示

        // windowの高さを表示
        console.dir(window.outerHeight); //683 (ブラウザサイズを変えると変化する)

        // 現在のページを別のURIに飛ばす
        window.location.href = 'https://www.facebook.com/BlogTakimotoKengo/';// 私のFBページヘ飛ばす

</script>


DOM

htmlのツリー構造を操作。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>javaScriptの練習</title>
    <style>
            .myStyle {
                font-weight: bold;
                border: 1px dashed blue;
            }
    </style>
</head>
<body>
    <h1>DOMについて学ぶ | たきもとけんご.com</h1>
    <p id="msg">Hello javaScript!</p>
    <!-- <script src="myscript.js"></script> -->

    <script>
        /*
            dir | オブジェクトのプロパティを表示
            window.document | 今開いているページ。window は省略可能
            DOM | Document Object Model. ページを動的に変えたい時に
        */
        var element = document.getElementById('msg');//pタグ内の文字列を取得

        element.textContent = 'change !';// Hello javaScript! が change ! に変更
        element.style.color = 'gray';// 文字色をgrayに
        element.className   = 'myStyle';// 上記のmyStyleを指定

        /*
            要素の操作 | body要素のツリー構造を変えてみる
                       |    body
                       |          p
                       |                text
        createElement  | 要素の作成
        createTextNode | テキストの作成
        appendChild    | 子要素末尾に追加
        */
        var sayHi = document.createElement('p'),// p要素作成
            text  = document.createTextNode('Hi !');// テキスト作成
        document.body.appendChild(sayHi).appendChild(text);// ツリー構造操作

    </script>

</body>
</html>


イベント

クリック等の動作によってブラウザの表示を変化させる。
イベントの概念はVBAと一緒。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>javaScriptの練習</title>
    <style>
            .myStyle {
                font-weight: bold;
                border: 1px dashed blue;
            }
    </style>
</head>
<body>
    <h1>DOMについて学ぶ | たきもとけんご.com</h1>
    <p id="msg">Hello javaScript!</p>
    <button id ="add">Click!</button>
    <script>
        var element = document.getElementById('msg');//pタグ内の文字列を取得

        element.textContent = 'change !';// Hello javaScript! が change ! に変更
        element.style.color = 'gray';// 文字色をgrayに
        element.className   = 'myStyle';// 上記のmyStyleを指定

        /*
            イベントの設定
            addEventListener | ボタンのイベントを紐付ける
                             | 第一引数: イベントの種類
                             | 第二引数: 関数(実行したい動作)
        */
        document.getElementById('add').addEventListener('click', function(){// 今回のイベントはクリック
            var sayHi = document.createElement('p'),// p要素作成
                text  = document.createTextNode('Hi !');// テキスト作成
            document.body.appendChild(sayHi).appendChild(text);// ツリー構造操作
        });

    </script>

</body>
</html>
スポンサーリンク
336 x 280 – レクタングル(大)
336 x 280 – レクタングル(大)
  • このエントリーをはてなブックマークに追加

この記事が気に入ったら
いいね!しよう

スポンサーリンク
336 x 280 – レクタングル(大)
トップへ戻る