文字列の表示

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

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

比較演算子

`==`	等しい
`!=`	等しくない
`===`	厳密に等しい（同じ型）
`!==`	厳密には等しくない（同じ型）
`>`	左が右より大きい
`<`	左が右より小さい
`>=`	左が右以上
`<=`	左が右以下

論理演算子

`&&`	AND
`\|\|`	OR
`!`	NOT

例：

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

代入演算子

短縮した演算子	意味
`x += y`	`x = x + y`
`x -= y`	`x = x - y`
`x *= y`	`x = x * y`
`x /= y`	`x = x / y`
`x %= y`	`x = x % y`

文字列

変数に代入

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の仕様

	オブジェクト	JSON
プロパティ/メンバー^*1	囲まない	ダブルクォーテーションで囲む
空文字のプロパティ/メンバー	○	○
16進数表記	○	×
数値の前に0をつける^*2	○	×
数値の前に+をつける	○	×
小数点から始まる数値	○	×
文字列を囲むもの	シングル/ダブルクォーテーション	ダブルクォーテーションのみ
エスケープ文字^*3	○	○
`undefined, NaN`	○	×
`null`	○	○
真偽値（`true / false`）	○	○
`function`	○	×

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

*2：001, 002, 003など。

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

組み込みオブジェクト

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

String
Array
Math
Date

Stringオブジェクト

var s = 'Hello, world!';

メソッド名	説明	備考
.charAt(n)	n文字目の文字	添字は0から始まる
.length	文字数
.contains('s')	sが含まれているか	`true` / `false`
.indexOf('s')	最初にsが現れるのは何文字目か	添字は0から始まる存在しない場合-1を返す
.lastIndexOf('s')	最後にsが現れるのは何文字目か	添字は0から始まる存在しない場合-1を返す
.substr(n1, n2)	n1文字目からn2文字の文字列	添字は0から始まる
.toString	文字列に変換
.toLowerCase	小文字に変換
.toUpperCase	大文字に変換

Arrayオブジェクト

var a = [100, 200, 300];

メソッド名	説明	備考
.length	要素数を返す
.unshift(e)	先頭に追加
.push(e)	末尾に追加
.shift	先頭から削除
.pop	末尾から削除
.reverse	順番を反対にする
.splice(n1, n2, e1...)	n1要素目からn2個の要素をe1...に置換	e1...未指定の場合削除添字は0から始まる

Mathオブジェクト

console.log(Math.PI);

メソッド名	説明
.abs	絶対値
.PI	円周率
.ceil(n)	切り上げ
.floor(n)	切り捨て
.round(n)	四捨五入

Dateオブジェクト

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

メソッド名	説明
getFullYear()	西暦
getMonth	月
getDate	日
getDay	曜日
getHours	時
getMinutes	分
getSeconds	秒
getMilliseconds	ミリ秒
getTime()	1970/1/1からの経過ミリ秒

その他のメソッド

メソッド名	説明	備考
parseInt(s)	整数に変換	第2引数で何進数か指定できる
parseFloat(s)	浮動小数点数に変換
encodeURI(s)	URLエンコード	`; , / ? : @ & = + $ #`と下記のものはエスケープしない
encodeURIComponent(s)	URLエンコード	`アルファベット、数字、- _ . ! ~ * ' ( )`はエスケープしない
decodeURI(s)	URLデコード	`encodeURI`でエンコードされたものをデコード
decodeURIComponent(s)	URLデコード	`encodeURIComponent`でエンコードされたものをデコード

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

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

MD5	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js
SHA-1	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha1.js
SHA-224	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha224.js
SHA-256	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha256.js
SHA-384	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha384.js
SHA-512	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha512.js
SHA-3	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha3.js
AES	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js
Base64	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/enc-base64-min.js
UTF-8, Hex, Latin1	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/core-min.js
UTF-16	http://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/enc-utf16-min.js

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);

文字列の表示

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

コメント

1行コメント

複数行コメント

変数・データ型

変数を宣言

変数を宣言・代入

変数に代入

データ型

演算子

算術演算子

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

比較演算子

論理演算子

代入演算子

文字列

変数に代入

文字列の連結

条件分岐

if

真偽値判定

三項演算子

switch

繰り返し

while

do ... while

for

break;

continue;

ダイアログ

ダイアログを表示

確認ダイアログを表示

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

関数

関数の定義

関数の実行

返り値

返り値付き関数の実行

ローカル変数

無名関数 / 匿名関数

即時関数

タイマー処理

setInterval

clearInterval

setTimeout

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

clearTimeout

配列

配列の定義

配列の値の取得

配列の値の書き換え

多次元配列

多次元配列の値の取得

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

オブジェクトの定義

オブジェクトの値の取得

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

メソッド

メソッドを実行

メソッド内のthis

オブジェクトとJSONの仕様

組み込みオブジェクト

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

Stringオブジェクト

Arrayオブジェクト

Mathオブジェクト

Dateオブジェクト

その他のメソッド

DOM

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

指定IDの要素を取得

指定Classの要素を取得

指定nameの要素を取得

指定タグの要素を取得

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

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

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

指定タグの要素を作成

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

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