JavaScript（ECMAScript5）の基本構文を紹介します。この記事は、2017年3月に調べたものを紹介しています。
記述方法
HTMLに埋め込む方法
|
1 2 3 4 5 |
<script type="text/javascript"> // JavaScript </script> |
scriptタグは、headerやbodyに埋め込み可能です。
かつては、
<script language="JavaScript"> としていたようですが、最近のブラウザであればtypeで大丈夫ではないでしょうか。また、コメントで囲む必要もないようです。
イベントハンドラに埋め込む方法
HTMLのイベントハンドラに直接JavaScriptを書くことができます。
|
1 2 3 |
<a onclick="alert('Hello!!')">Ckick</a> |
外部のソースファイルを読み込む方法
|
1 2 3 |
<script type="text/javascript" charset="utf-8" src="test.js"></script> |
scriptタグのsrc属性にファイル名を指定します。また、読み込むファイルの文字コードを明示しておくと良さそうです。
また、特に問題がなければ「</body>」の直前に記述するのが良いようです。
[topBannar]
変数宣言
変数宣言には、「var」を用います。型指定はありません。
|
1 2 3 4 5 6 |
var 変数名: 型名; // 例 var n1 = 0; |
関数
関数定義
関数定義は以下の通りです。（関数リテラル）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function 関数名(引数1, 引数2, ...){ // 処理...; return; }; //または 関数名 = function(引数1, 引数2, ...){ // 処理...; return; }; |
ちなみに、JavaScriptの関数は、関数のオブジェクトです。
関数呼び出し
関数の呼び出し方法は以下の通りです。
|
1 2 3 |
関数名( 引数1, 引数2, ...); |
関数呼び出しの際に、引数が足りない場合、その引数にはnullが渡されます。
可変長引数
可変長引数に該当するような構文はありませんが、関数内で「arguments」オブジェクトを使うと似たようなことができます。
|
1 2 3 4 5 6 7 8 9 10 |
function argTest(first) { var sum = first; // 2つ目以降を足し込む for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } |
参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_the_arguments_object
無名関数
無名関数もサポートされています。無名関数は、変数に代入可能です。「function(引数リスト){}」の形式で定義できます（関数名を省略した形です）。
|
1 2 3 4 5 6 |
var hello = function(name) { return name; }; |
クラス
クラス定義に対応する構文はありません。ただし、「prototype chain」と呼ばれる仕様を利用することで、クラスのような振る舞いを記述できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// クラスとコンストラクタの定義 var Vector2D = function(x, y) { // this は生成されたオブジェクト。 this.x = x; this.y = y; }; // メソッドはコンストラクタ関数のprototypeプロパティに設定します Vector2D.prototype.getX = function() { return this.x; }; Vector2D.prototype.getY = function() { return this.y; }; |
メソッド定義は以下のように書くことも出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 |
Vector2D.prototype = { getX: function () { return this.x; }, getY: function () { return this.y; } }; |
JavaScriptは、this必須です。また、JavaやC++のthisとは仕様が異なるため、注意が必要です。JavaScriptのthisの仕様は、「ある関数が呼び出された際にその関数を格納していたオブジェクト」を指します。普段はあまり意識することはないかもしれませんが、コールバック関数として登録した場合などには注意が必要です。コールバック関数としてメンバ関数を登録し、thisを固定するには「bind」を使います。詳細はこちらを御覧ください。
メソッドのオーバーロード
対応していません。
静的メンバ
クラスの仕様がないため、該当する仕様はありません。ただし、JavaScriptのオブジェクトは連想配列であり、関数をプロパティとして持つことができるため、その仕様を利用すると、静的メンバ変数や関数相当の機能を実現できます。
オブジェクト生成（new）・メンバへのアクセス
「new」を使用します。new のあとには、コンストラクタ用の関数を指定します。
|
1 2 3 |
var v = new Vector2D(10, 10); |
メンバへのアクセス方法
|
1 2 3 4 5 6 7 8 9 |
var obj = new MyClass(); //メンバ変数 obj.member; //メンバメソッドの呼び出し obj.Hello(); |
オブジェクトのメンバにアクセスするためには、ドット演算子「.」を使用します。
アクセス修飾子
ありません。すべてのメンバが、外部からアクセス可能です。
継承
prototype chainを利用することで、継承に近い記述が可能です。
（http://www.yunabe.jp/docs/javascript_class_in_google.html より引用）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var inherits = function(childCtor, parentCtor) { // 子クラスの prototype のプロトタイプとして 親クラスの // prototype を指定することで継承が実現される Object.setPrototypeOf(childCtor.prototype, parentCtor.prototype); }; // 子クラスのコンストラクタ var Employee = function(name, age, salary) { // 親クラスのコンストラクタの呼び出しには call を使用 Person.call(this, name, age); this.salary = salary; }; // inherits を使って親子関係を明示する inherits(Employee, Person); // 子クラスのメソッド Employee.prototype.getSalary = function() { return this.salary; }; // 同じ名前のメソッドを子クラスで定義すればオーバーライドになる。 Employee.prototype.sayHello = function() { // 親クラスのメソッドを呼び出す場合は親クラスの prototype に // 定義されているメソッドを call を使って呼び出す。 Person.prototype.sayHello.call(this); console.log('Salary is ' + this.salary); }; |
コンストラクタ・デストラクタ
クラスの定義方法で紹介したように、コンストラクタ関数の定義は可能です。
インタフェース定義
該当する仕様はありません。
演算子
算術演算子
| 四則演算 | + – * / |
| 剰余 | % |
代入演算子
| 代入 | = |
論理演算子
| 論理積 | && |
| 論理和 | || |
| 否定 | ! |
比較演算子
| 大小比較 | > < >= <= |
| 等しい（型変換後に比較） | == |
| 等しくない（型変換後に比較） | != <> |
| 等しい（型が等しく、値も等しい） | === |
| 等しくない（型もしくは値が等しくない） | !== |
| ３項演算子 | (条件) ? (true) : (false) |
型演算子
| キャスト | なし | |
| 型を調べる | 変数 instanceof コンストラクタ関数名 |
例) a instanceof MyClass |
| 型を調べる | typeof 変数 | 例) typeof n |
instanceof は、指定したオブジェクトがどのコンストラクタから生成されたかを判別します。一方、typeofはその変数の（JavaScriptにおける本当の）型名を文字列で返します。
ビット演算子
| ビット積 | & |
| ビット和 | | |
| 否定 | ^ |
| 排他的論理和 | ~ |
| 左シフト | << |
| 右シフト | >> |
文字列演算子
| 文字列結合 | + |
コメント
コメントは、以下の形式がサポートされています。
|
1 2 3 4 5 6 |
// 行末まで /* 閉じる まで */ |
配列
JavaScriptではそもそも全てのオブジェクトが連想配列（マップ）です。ただし、配列専用のArrayが用意されています。
|
1 2 3 |
var nums = new Array(); |
Arrayの引数に数値を渡すと、配列のサイズを明示的に定義することができます。
また、配列の生成時に以下のように初期化することもできます。
|
1 2 3 4 |
var arr = [0, 1, 2]; var arrS = ["あ", "い", "う"]; |
値の取得・設定
値の取得や設定は [] を用います。
|
1 2 3 4 5 6 7 |
// 0にvalue を格納 arr[0] = value; // v に0番目の値を取得 v = arr[0]; |
ちなみに、通常のオブジェクトのメンバにアクセスする際にも [] が利用できます。[] 内に文字列を渡すことで、オブジェクトのメンバにアクセス可能です。
要素数の取得
配列の「length」メンバにアクセスします。
|
1 2 3 |
array.length |
条件分岐構文
if文とswitch文がサポートされています。
if文
|
1 2 3 4 5 6 7 8 9 |
if (条件1) { // 条件1がtrueの時 } else if (条件2) { // 条件1がfalseで条件2がtrueの時 } else { // 条件1・条件2がfalseの時 } |
switch文
|
1 2 3 4 5 6 7 8 9 10 11 12 |
switch (比較対象) { case 条件1: //... break; case 条件2: //... break; default: //それ以外 //... } |
ループ構文
for文
|
1 2 3 4 5 |
for (var i = 1; $i <= array.length; i++) { array[i]; } |
while文
|
1 2 3 4 5 6 |
var num = 0; while (num < array.length ){ num++; } |
foreach文（配列の列挙）
該当するような言語仕様はありません。（似たような構文に「for … in」がありますが、これは、オブジェクトのプロパティ名を列挙していく構文です）
break, continue
break、continueともにサポートされています。
演算子のオーバーロード
対応していません。
プロパティ（アクセッサ）
該当する仕様はありません。
インデクサ
対応していないようです。
Math関数
「Math」クラスの静的メソッドとして用意されています。
管理者がよく使うもの
| 円周率 | Math.PI |
| 三角関数 | Math.sin Math.cos Math.tan Math.atan2 |
| 端数の切り捨て | Math.floor |
| 平方根 | Math.sqrt |
| 最大値 最小値 | Math.max Math.min |
インクルード（他ソースファイルの読み込み）
基本的にJavaScriptに該当する仕様はありません。ただし、HTML側から複数のファイルを読み込ませることができます。
エントリポイント（main関数）
特にエントリポイントの指定は必要ありません。上から順に実行されていきます。
多くの場合、HTML側で、bodyのonload時に関数を呼び出すことで、エントリポイントを指定することができます。
文字列リテラル
シングルクォート（””）もしくはダブルクォート（”）でくくります。特殊文字も使用可能です。
定数
ECMAScript5の時点では、該当する仕様はないようです。
[bottomBannar]