文字列の表示

ブラウザのコンソールに出力

console.log("Hello")

コメント

1行コメント

// コメント

複数行コメント

/* コメント */

変数・データ型

変数を宣言

var foo;

複数の変数をまとめて宣言

var foo, bar;

変数を宣言・代入

var foo = 'bar';

複数の変数をまとめて宣言・代入：

var foo = "bar",
    x   = 20,
    y   = 10;

変数に代入

foo = 'bar';

データ型

• 文字列
• 数値
• 真偽値（true / false）
• オブジェクト
  • 配列
  • 関数
  • 組み込みオブジェクト
• undefined（無定義）
• null（空データ）

演算子

算術演算子

インクリメント / デクリメント演算

var num1 = 10;
var num2 = num1++;
alert(num1);    // 11
alert(num2);    // 10

var num1 = 10;
var num2 = ++num1;
alert(num1);    // 11
alert(num2);    // 11

比較演算子

論理演算子

例：

score < 80 && score > 60    // 60より大きく80より小さい

代入演算子

文字列

変数に代入

var foo = 'bar';

ダブルクォーテーションも使用可能。

特殊文字（\n, \t）なども使用可能。

シングルクォーテーション内にシングルクォーテーションを書くときは、バックスラッシュでエスケープする。

文字列の連結

var foo = 'Hello, ' + 'world!'

var foo = '5' + 5;    // '55'

片方が文字列だと、自動で文字列に変換される

条件分岐

if

if (条件式) {
  真の場合の処理
}

if (条件式) {
  真の場合の処理
} else {
  偽の場合の処理
}

if (条件式) {
  真の場合の処理
} else if (条件式) {
  真の場合の処理
} else {
  偽の場合の処理
}

例：

var score = 70;
if (score > 80) {
  console.log('OK')
} else if (score > 60) {
  console.log('So-so')
} else {
  console.log('NG')
}

真偽値判定

ifなどはif (foo)と書くと、真偽値判定が行われる。

下記のものはfalseになり、それ以外はすべてtrueになる。

• 文字列：空文字
• 数値：0またはNaN
• 真偽値：false
• オブジェクト：null
• undefined, null

NaNはif (n === NaN)と書いてもtrueにならないため、if (isNaN(n))と書く。

三項演算子

if (条件) {
  a = b;
} else {
  a = c;
} 

は次のように書くことができる。

a = (条件) ? b : c;

例：

foo = (x < y) ? x : y;    // 大きい方をfooに代入

switch

値に一致した場合に実行する

switch (変数) {
  case '値':    // 値に一致した場合
    処理
  break;
  case '値':    // 2つの値を指定することも可能（AND）
  case '値':
    処理
  break;
  default:    // どの値にも一致しない場合
    処理
  break;
}

繰り返し

while

条件が真の場合のみ繰り返す

繰り返す前に判定する。

while (条件) {
  処理
}

例：

var i = 0;
while (i < 10) {    // 0〜9まで順番に出力する
  console.log(i);
  i++;
}

do ... whileとの違いは繰り返す前に判定することである。

do ... while

条件が真の場合のみ繰り返す

do {
  処理
} while (条件);

例：

var i = 0;
do {    // 0〜9まで順番に出力する
  console.log(i);
  i++;
} while (i < 10);

whileとの違いは繰り返した後に判定することである（最低1回は実行される）。

for

条件が真の場合のみ繰り返す

for (var 変数 = 初期値; 条件; 変数++) {
  処理
}

例：

for (var i = 0; i < 10; i++) {
  console.log(i);
}

break;

ループ処理を抜ける

continue;

ループ処理を1回スキップ

ダイアログ

ダイアログを表示

ボタン：OKのみ

alert('Hello!');

確認ダイアログを表示

ボタン：OK / キャンセル

var answer = confirm('Hello!');

OKはtrue、キャンセルはfalseが返ってくる。

文字入力ダイアログを表示

ボタン：OK / キャンセル

var answer = confirm('What your name?');

OKはその文字列、キャンセルはnullが返ってくる。

初期値を設定：

var answer = confirm('What your name?', 'Tom');

関数

関数の定義

function 関数名() {
  処理
}

function 関数名(引数1, 引数2...) {
    処理
}

例：

function hello() {
    console.log('Hello!');
}

function hello(name) {
    console.log('Hello!' + name);
}

関数はコンパイル時に定義される。

関数の実行

関数名();

関数名(引数1, 引数2...);

例：

hello();

hello(name);

返り値

関数内でreturnを使用して、返り値を指定できる。

return 'Hello!';

返り値付き関数の実行

var foo = hello();

console.log(hello();)

ローカル変数

関数内で宣言した関数は、その関数内でしか利用できない。

無名関数 / 匿名関数

var 変数 = function(引数1, 引数2...) {
  処理
};

無名関数 / 匿名関数は代入時に定義される。

関数の実行の方法は通常と同じ。

即時関数

定義後、すぐに実行される。

ローカル変数にして、変数が重複しないようにするために使う。

(function 関数名() {
  処理
})();

(function 関数名(引数1, 引数2...) {
  処理
})(引数1, 引数2...);

例：

(function hello() {
  console.log('Hello!');
})();

(function hello(name) {
  console.log('Hello, ' + name)
})('Tom');

無名関数のように、関数名を省略することもできる。

タイマー処理

setInterval

一定時間ごとに処理を繰り返す

setInterval(function() {
  処理
}, ミリ秒);

例：

var i = 0;
setInterval(function() {
  console.log(i++);
}, 1000);                // 1秒ごとに0から1ずつ増やして出力

関数を指定することもできる：

setInterval("show()", 1000)    // 1秒ごとにshow()を実行

処理終了を待たず、次の処理を実行する。

無限ループに注意

clearInterval

setIntervalの繰り返しを停止

var i = 0;
var tid = setInterval(function() {
    console.log(i);
    i++;
    clearInterval(tid);             // 処理が止まるので、0しか出力されない
}, 1000);

setTimeout

指定秒後に処理をする

setTimeout(function() {
  処理
}, ミリ秒);

例：

setTimeout(function() {
  console.log('Hello');
}, 1000);    // 1秒経過後Helloを出力

関数を指定することもできる：

setTimeout("show()", 1000)    // 1秒経過後show()を実行

setTimeoutを使用して、一定時間ごとに処理を繰り返す：

var i = 0;
function show() {
  console.log(i++);        // 1秒ごとに0から1ずつ数字を増やして出力
  setTimeout(function() {
      show();
  }, 1000);
}

処理終了を待ってから、次の処理を実行する。

clearTimeout

setTimeoutのタイマーを停止

var i = 0;
function show() {
  console.log(i++);
  var tid = setTimeout(function() {
      show();
  }, 1000);
  clearTimeout(tid);             // 処理が止まるので、0しか出力されない
}

配列

配列の定義

var ary = [99, 100, 78, 81];

var ary = ['Yamada', 'Yamaguchi', 'Tanaka'];

配列の値の取得

console.log(ary[0]);

console.log(ary[1]);

添字は0から始まる。

配列の値の書き換え

var ary[0] = 67;

var ary[1] = 85;

多次元配列

配列の中に配列を入れる

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

var ary0 = [1, 2, 3],
    ary1 = [4, 5, 6];
var ary = [ary0, ary1];

多次元配列の値の取得

console.log(ary[0][1]);    // ary の 1番目の配列 の 2番目 の 値

オブジェクト（連想配列）

オブジェクトの定義

var obj = {
  email: 'example@gmail.com',    // プロパティ: 値
  score: 80
};

オブジェクトの値の取得

console.log(obj['email']);

console.log(obj.email);

オブジェクトの値の書き換え

var ary['score'] = 97;

var ary.score = 97;

メソッド

var 変数 = {
  プロパティ: function(引数1, 引数2...) {    // メソッド
    処理
  }
};

例：

var user = {
  greet: function(name) {
    console.log('Hello, ' + name);
  }
};

メソッドを実行

変数.メソッド(引数1, 引数2...)

user.greet('Tom');

メソッド内のthis

同じオブジェクト内の他のプロパティにアクセスするときに使う。

var user = {
  email: 'example@gmail.com',
  greet: function(name) {
    console.log('Hello, ' + name + ' from ' + this.email);
  }
};

オブジェクトとJSONの仕様

*1：JSONではプロパティではなくメンバーと呼ぶ。

*2：001, 002, 003など。

*3：\n, \r, \", \\などがある。

組み込みオブジェクト

組み込みオブジェクトの種類

• String
• Array
• Math
• Date

Stringオブジェクト

var s = 'Hello, world!';

Arrayオブジェクト

var a = [100, 200, 300];

Mathオブジェクト

console.log(Math.PI);

Dateオブジェクト

var d = new Date();    // 現在時刻
var d = new Date(2014, 1, 11, 10, 20, 30)    // 指定時刻を代入（月は0から始まる）

その他のメソッド

DOM

ウインドウの幅 / 高さを取得

console.log(outerWidth);

console.log(outerHeight);

指定IDの要素を取得

var e = document.getElementById('nav');

指定Classの要素を取得

var e = document.getElementsByClassName('nav');

IE9以降

指定nameの要素を取得

var e = document.getElementByName('nav');

指定タグの要素を取得

var e = document.getElementByTagName('p');

指定セレクタの1つ目の要素を取得

var e = document.querySelector('p > a');

IE9以降（IE8はCSS2のセレクタのみ）

指定セレクタのすべての要素を配列で取得

var e = document.querySelectorAll('p > a');

IE9以降（IE8はCSS2のセレクタのみ）

*, #, ., >, :hover, [margin], [type="text"], [type^="text"], [type$="text"], [type*="text"]などが使用できる。

指定要素のテキストを取得 / 変更

text = e.textContent;    // 取得

e.textContent = 'foo';    // 変更

等号や不等号などを自動でエンコードする。

IE9以降

IE8以下ではinnerTextが使用できるが、それはFirefoxでは使用できない

指定タグの要素を作成

var p = document.createElement('p');

指定要素内に文字列を挿入

var p = document.createTextNode('hoge');

指定要素内の末尾に要素を追加

var p   = document.createElement('p'),
    txt = document.createTextNode('foo');
document.body.appendChild(p).appendChild(txt);

指定要素内のHTMLを取得 / 変更

html = e.innerHTML;

e.innerHTML = '<p>foo</p>';

指定要素のCSSを変更

e.style.color = 'red';

JavaScriptで指定されたstyleしか取得はできない。

指定要素のclassを変更

e.className = 'wrapper';

ページのタイトルを変更

document.title = 'title';

指定要素の文字列を取得 / 変更

s = e.value;

e.value = 'hoge';

inputやtextareaの文字列を取得する。

URL操作

URLを取得 / 移動

var url = location;

location = 'https://www.google.co.jp';

var url = location.href;

location.href = 'https://www.google.co.jp';

location.assign('https://www.google.co.jp');

URLを取得 / 変更

location.replace('https://www.google.co.jp');

履歴は上書きされ、戻ることができない

ホスト名を取得 / 移動

var hostname = location.host;

location.hostname = 'www.google.co.jp';

ポートを取得 / 移動

var port = location.port;

location.port = '80';

ホスト:ポートを取得 / 移動

var host = location.host;

location.host = 'www.google.co.jp:80';

プロトコルを取得 / 移動

var protocol = location.protocol;    // 末尾に:が付く

location.protocol = 'http';

指定ハッシュ（#）を取得 / 移動

var hash = location.hash;

location.hash = 'hash';

パラメータを取得 / 移動

var search = location.search;    // ?から始まる

location.search = 'q=Google';

パスを取得 / 移動

var paht = location.path;

location.path = '/dir/';

ページを再読み込み

location.reload();    // キャッシュを使用

location.reload(true);    // キャッシュを使用しない

イベント

イベント実行時に実行

document.getElementById('add').addEventListener('click', function() {
    処理    // #addがクリックされた時に実行される
});

イベント一覧はHTMLのページを参照

addEventListenerはIE8以下は非対応のため、IE8以下ではattachEventを使用する。

ページの読み込み時に実行

window.onload = function() {
  // 処理
}

複数のonload属性を設定すると、最後に設定したものしか実行されない。

画像も読み込まれた後に実行される

ライブラリ

jQuery

詳細

CryptoJS

暗号化 / 復号化ライブラリ

core-min.jsは、MD5, SHA, AESには含まれている。

enc-base64-min.jsは、AESには含まれている。

MD5

var hash = CryptoJS.MD5("message");

SHA-1

var hash = CryptoJS.SHA1("message");

SHA-2

var hash = CryptoJS.SHA224("message");
var hash = CryptoJS.SHA256("message");
var hash = CryptoJS.SHA384("message");
var hash = CryptoJS.SHA512("message");

SHA-3

var hash = CryptoJS.SHA3("message", { outputLength: 224 });
var hash = CryptoJS.SHA3("message", { outputLength: 256 });
var hash = CryptoJS.SHA3("message", { outputLength: 384 });
var hash = CryptoJS.SHA3("message");    // デフォルト：512

AES暗号化 / 復号化

var encrypted = CryptoJS.AES.encrypt("message", "password");
var decrypted = CryptoJS.AES.decrypt(encrypted, "password").toString(CryptoJS.enc.Utf8);

Base64符号化 / 復号化

var base64 = CryptoJS.enc.Utf8.parse("message").toString(CryptoJS.enc.Base64);
var words = CryptoJS.enc.Base64.parse(base64).toString(CryptoJS.enc.Utf8);

Latin1符号化 / 復号化

var latin1 = CryptoJS.enc.Utf8.parse("message").toString(CryptoJS.enc.Latin1);
var words  = CryptoJS.enc.Latin1.parse(latin1).toString(CryptoJS.enc.Utf8);

Hex符号化 / 復号化

var hex   = CryptoJS.enc.Utf8.parse("message").toString(CryptoJS.enc.Hex)
var words = CryptoJS.enc.Hex.parse(hex).toString(CryptoJS.enc.Utf8);

UTF-8符号化 / 復号化

var utf8  = CryptoJS.enc.Utf8.parse("message").toString(CryptoJS.enc.Utf8);
var words = CryptoJS.enc.Utf8.parse(utf8).toString(CryptoJS.enc.Utf8);

UTF-16符号化 / 復号化

var utf16 = CryptoJS.enc.Utf8.parse("message").toString(CryptoJS.enc.Utf16);
var words = CryptoJS.enc.Utf16.parse(utf16).toString(CryptoJS.enc.Utf8);

UTF-16LE符号化 / 復号化

var utf16le = CryptoJS.enc.Utf8.parse("message").toString(CryptoJS.enc.Utf16LE);
var words = CryptoJS.enc.Utf16LE.parse(utf16le).toString(CryptoJS.enc.Utf8);