基本的な使い方 / Basic Usage

ファイル拡張子：
*.js

指数表現(1)：
1.5e+20　→　1.5 x 10²⁰

指数表現(2)：
2 ** 3　→　2³ = 8

エスケープシーケンス：
'シングルクォートの記号は\'です。'

算術演算子：
足し算 +
引き算 -
乗算 *
除算 /
除算の余り %

コメント：
//コメント

厳密なコンパイルチェック(厳密モード)：
'use strict';

ブロックスコープ変数　const, let(ES6)：
値を一度しか代入できない定数を宣言する　→　const
{}で囲まれた中でのみ使える変数を宣言する　→　let

論理演算子：
否定：!
論理和： ||
論理積： &&

比較演算子：
1 < 2 : 1は2より小さい (未満)
1 <= 2 : 1は2以下
1 > 2 : 1は2より大きい (false)
1 >= 2 : 1は2以上 (false)
1 === 2 : 1は2と等しい (false)
1 !== 2 : 1は2と異なる (true)
等しいかどうかは'='を3つ使う (C言語は'='を2つ)

制御文はC言語と同じ(if, for, while, do while, switch, break, continue)：
if-else：
if (xxx) {
xxx;
} else if (xxx) {
xxx;
} else {
xxx;
}

Arrayオブジェクトの要素でループ(for...in文)：
a = new Array(1,2,3);
for (i in a) {
document.write(a[i],"
");
}

値が無いを意味する: null

ループ中のラベル(break ラベル名)：
label1:
for (var i = 1; i < 101; i++) {
document.write(i + ' ');
if (i == 50) break label1;
}

typeof演算子(型を調べる)：
typeof 123; // number 数値型
typeof window; // object型
typeof null; // object型
typeof window; // object型

delete演算子(変数を削除して未使用状態にする)：
a = 1;
delete a; // 削除に成功するとtrue、失敗するとfalseが返る

関数 / Functions

関数の引数
オブジェクト以外 : 値渡し(関数内部の変更が関数呼び出し側に反映されない)
オブジェクト：参照渡し(関数内部の変更が関数呼び出し側に反映される)

無名関数(コールバック関数でよく使われる)：
var func = function() { alert(); };
func(); // 関数呼び出し

無名関数(アロー関数)(ES6)：
xxxButton.onclick = () => { xxx; };

組み込み関数 / Built-in Functions

型の変換：
a = "255"; num = parseInt(a); // 文字列を整数に変換
a = "255.36"; num = parseFloat(a); // 文字列を浮動小数に変換
a = 255; str = a.toString(); // 整数を文字列に変換

NaN (非数：Not a Number)とInifinity(無限)：
a = "あいう"; num = parseInt(a); // 数ではない文字列を整数に変換仕様とした場合NaNとなる
num = 100/0; // 正の数を0で割るとInifinityになる

配列 / Arrays

配列の初期化(1):
a = new Array(1, 2, 3);

配列の初期化(2):
a = [1, 2, 3];

配列の初期化(3):
a = new Array();
a[0] = 1;
a[1] = 2;
a[2] = 3;

配列の要素：数値、文字列、など異なる型の要素を代入できる
a = new Array();
a[0] = 1;
a[1] = "one";
a[2] = "いち";

連想配列：
a = new Array();
a['dog'] = '犬';
a['cat'] = '猫';

二次元配列：
a = new Array();
a['dog']['name'] = '犬';
a['dog']['food'] = '肉';
a['cat']['name'] = '猫';
a['cat']['food'] = '魚';

配列の要素を破棄する：
a = [1, 2, 3];
delete a[1]; // 要素a[1]を破棄する
delete a; // 配列aを破棄する (varで宣言されたオブジェクトは破棄できない)

配列の要素を破棄する：
a = [1, 2, 3];
delete a[1]; // 要素a[1]を破棄する
delete a; // 配列aを破棄する (varで宣言されたオブジェクトは破棄できない)

配列の要素を切り出す：
a = [1,2,3,4];
b = a.slice(1, 3); // 2番目から4番目の手前までを切り出す(番号は0から始まるので)

配列の末尾に要素を追加・削除：
a = [1,2];
a.push(3); // 配列の末尾に3を代入
b = a.pop(); // 配列aの末尾を取り出して、bに代入する(配列aのindexは後ろへずれる:a[0]=1,a[1]=2,a[2]=3となる)

配列の先頭に要素を追加・削除：
a = [2,3];
a.unshift(1); // 配列の先頭に1を代入
b = a.shift(); // 配列aの先頭を取り出して、bに代入する(配列aの残りのindexは前にずれる:a[0]=2,a[1]=3となる)

Stringオブジェクト / String Object

文字列の長さを取得する(length)：全角文字も１文字として数える
str = "全角文字"";
len = str.length;

文字列から指定された文字を取り出す：
str = new String("にほんご");
c = str.charAt(1);

文字列を配列に分解する
str = "2017/12/31";
arr = str.split("/"); // '/'で文字列を配列に分解する。arr[0]="2017",arr[1]="12",arr[2]="31"となる。

文字列を検索する：
str = "にほんご";
idx = str.indexOf("ほ",1); // "ほ"という字をindex番号1から検索する

Dateオブジェクト / Date Object

初期化
day = new Date(2017, 12-1, 31, 0, 0, 0); // 2017年12月31日0時0分0秒

日付と時刻の取得
now = new Date();
year = now.getFullYear(); // 西暦
month = now.getMonth() + 1; // 月(0から始まる)
date = now.getDate(); // 日
day = now.getDay(); // 曜日を取得(0:日、1：月、・・・)
hour = now.getHours(); // 時間
minute = now.getMinutes(); // 分
second = now.getSeconds(); // 秒
time = now.getTime(); // 1970/1/1 0:0:0からの時間をミリ秒で取得

正規表現 / Regular Expressions

メタ文字

文字クラス

RegExpオブジェクト
str = "I like sushi.";
reg = new RegExp("[a-z]{5}"); // 小文字英字5文字のパターンのオブジェクト
mat = str.match(reg); // パターンマッチした文字列を含む配列を返す(mat[0] = "sushi", mat['index']=7, mat['input']="I like sushi.")

str = "I like sushi.";
reg = new RegExp("[A-Z]{5}", "i"); // iフラグを設定すると大文字小文字を区別しない
mat = str.match(reg);

str = "I like sushi and curry.";
reg = new RegExp("[a-z]{5}", "g"); // gフラグを設定するとマッチしたすべての文字列を取得する
mat = str.match(reg); // mat[0] = "sushi", mat[1] = "curry"

str = "I like sushi.";
rep = "curry";
reg = new RegExp("[a-z]{5}");
strr = str.replace(reg, rep); // マッチした文字列を置換する

strr = str.replace(reg, "$&"); // 置換文字列の中では特殊文字が使える
// $& : マッチした部分文字列
// $` : マッチした部分文字列の直前の文字列
// $' : マッチした部分文字列の直後の文字列
// $1, $2, ... : 1番目、2番目、・・・にマッチした文字列
// $$ : $記号

最長マッチ：「.+」 // 一番長い組み合わせが採用される
最短マッチ：「.+?」 // 一番短い組み合わせが採用される

サンプルコード(RegExp：特定の文字列の色付け)：
sample-replace.html

ブラウザオブジェクト(Windowオブジェクト) / Browser Object (Window)

Windowオブジェクトはブラウザのウィンドウに相当する最上位のオブジェクト。

コンソールへのデバッグメッセージ表示：
window.console.debug('デバッグ'); // window.は省略可能

警告ダイアログ表示：
window.alert('警告メッセージ'); // window.は省略可能

確認ダイアログ表示(OK、キャンセル)：
window.confirm('確認メッセージ'); // window.は省略可能

一定時間ごとに関数を呼び出す：
window.setInterval(処理関数, 間隔(ミリ秒)); // window.は省略可能

ブラウザオブジェクト(Documentオブジェクト) / Browser Object (Document)

Documentオブジェクトは、ブラウザに表示される文字列、画像、フォーム、リンクなどに相当する。

キーが押されたときのコールバック関数を登録する：
document.body.onkeypress = function;

ボタンがクリックされたときのコールバック関数を登録する：
const xxxButton = document.getElementById('xxx-button');
xxxButton.onclick = function() { xxx; };

ブラウザオブジェクト(Formオブジェクト) / Browser Object (Form)

Formオブジェクトは入力フォーム<form>に相当する

a = document.forms.length; // フォームの数を参照
b = document.forms[0].length; // forms[0]に含まれるエレメント数を参照
c = document.myform.length; // myformは<form>タグのname属性で指定したフォーム名

ブラウザオブジェクト(Elementオブジェクト) / Browser Object (Element)

Elementオブジェクトは入力フォーム<form>の各部品(エレメント)<input>タグ、<textarea>タグ、<select>タグに相当する。

a = document.forms[0].elements[0].type; // elemenmts[0]のエレメントの種類
b = document.myform.mycheck.type; // myformは<form>タグのname属性で指定したフォーム名、mycheckは<input>タグのname属性で指定したエレメント名

ブラウザオブジェクト(Select,Optionオブジェクト) / Browser Object (Select, Option)

Selectオブジェクトは<select>タグ、Optionオブジェクトは<option>タグに相当する。

<select name="myselect">
<option value="C言語" selected>C言語</option>
<option value="C++言語">C++言語</option>
<option value="C#言語">C#言語</option>
</select>

a = document.myform.myselect.option[2].text; // myselectは<select>タグのname属性で指定したもの。optionsは0から始まる参照番号でOptionオブジェクトを指定

フォームの空欄をチェックするサンプルコード：
sample-null-form.html

ブラウザオブジェクト(Locationオブジェクト) / Browser Object (Location)

Locationオブジェクトを使うと、現在のページの情報を参照するだけでなく、ほかのページに移動できる。

ブラウザオブジェクト(Eventオブジェクト) / Browser Object (Event)

ブラウザオブジェクト(Styleオブジェクト) / Browser Object (Style)

CSSのスタイルプロパティの設定や参照。style属性に対応。

特定の要素にスタイルを設定するには、DOMのdocument.getElementById()メソッドなどでHTML要素を取り出す。

ブラウザオブジェクト(Historyオブジェクト) / Browser Object (History)

ブラウザの「進む」「戻る」ボタンと同じ動作。Windowオブジェクトのhistoryプロパティから利用する。

ブラウザオブジェクト(Imageオブジェクト) / Browser Object (Image)

imgタグで埋め込まれている画像に対応。Documentオブジェクトのimagesプロパティから連想配列として取得できる。

ブラウザオブジェクト(Anchorオブジェクト) / Browser Object (Anchor)

<a href="URL">で指定されるリンク。Documenmtオブジェクトのanchorsプロパティにより連想配列として取得できる。

ブラウザオブジェクト(Navigatorオブジェクト) / Browser Object (Navigator)

ユーザーのブラウザやOS環境に関数ｒ情報を取得する。Windowオブジェクトのnavigatorプロパティ。

ブラウザオブジェクト(DOM) / Browser Object (DOM)

DOM(Document Object Model)はHTMLやXMLのプロパティやメソッドを参照したり操作したりする方法を定義したもの。ツリー構造で管理しており、要素はノードという単位であらわされる。

ブラウザオブジェクト(Cookie) / Browser Object (Cookie)

クッキーはサーバーが発行したデータをブラウザ側の所定の位置に保存するしくみ。これを使うとページ間で変数を引き継げる。

クッキーからの値の取得：
str = document.cookie;

クッキーへの値の設定：
document.cookie = "a=100; expires=Sat,1-Sep-2017 00:00:00 GMT";

サンプルコード：
sample-cookie.html

ブラウザオブジェクト(動的イベント) / Browser Object (Dynamic Events)

イベントオブジェクトを自分で作って、フォーム部品などに送ることで、イベントを疑似的に発生させる。

var e = document.getElementById("disp");
// bubbles: バブリングする、cancelable:キャンセル可能、composed:シャドーDOM境界を越えられる(DOMの要素の集まりをコンポネントとして扱う) var evt = new Event("click", {bubbles:false, cancelable:false, composed: false});
e.dispatchEvent(evt);

// イベント追加
e.addEventListener("click", newclick, false); // 3番目がtrueの場合(通常はfalse)はバブリングをせず、ノードの上位から順にハンドラを呼び出す
// イベント削除
e.removeEventListener("click", newclick, false);

サンプルコード：
sample-dynamic-event.html

ブラウザオブジェクト(その他のオブジェクト) / Browser Object (Other Objects)

URIエンコード：
encodeURIComponent('あ');
URIデコード：
decodeURIComponent('%E3%81%82');

参考資料 / Reference Materials

• 高校生から始めるプログラミング(KADOKAWA)
• JavaScriptの絵本　第２版(アンク)