ProgrammingJavaScript講座第1章 JavaScript言語仕様
第1章 JavaScript言語仕様

クイックリファレンス

JavaScriptには様々な機能がありますので、簡単な使い方をざっと紹介させていただきます。
詳しい説明や使い方は次章以降を参照ください。

文字列の出力

文字列を出力する一番簡単な方法はwrite関数を使う方法です。

document.write("Hello world");

ただし、HTML5ではdocument.writeが非推奨となったので、innerHTMLプロパティを使ったほうが良いでしょう。
参考までにinnerHTMLプロパティを使う場合は下記のようになります。

window.onload = function() {
	document.getElementById("...").innerHTML = "Hello world";
}

コンソール

ブラウザのコンソールにログを出力します。

console.log("Hello world");

変数と演算子

計算した結果を変数に代入することもできます。

x = 10 + 3 -1;

上記ではxが変数で、右辺の計算結果が代入されます。
+ や - などの記号を演算子、特に上記のような計算に使う演算子を算術演算子と呼びます。

データ型

変数には数値や文字列といった様々なデータ型があります。

数値型
x=1;
文字列型
x="Hello world"
論理型
x=true;
オブジェクト
x = new Object();
配列
x = new Array();
Null
x = null;
未定義
x= undefind;

配列

配列は複数の値を管理することができます。
JavaScriptには配列を生成する方法としてコンストラクとリテラルの2種類が用意されています。

コンストラクタ
var a = new Array();
リテラル
var a = [];

コンストラクタ、リテラルのどちらも次のように宣言時に値を指定できます。

コンストラクタ
var a = new Array( 1, "text" );
リテラル
var a = [ 1, "text" ];

要素の追加

インデックスを指定して要素を追加できます。
配列のインデックスは0から始まるのでご注意ください。

a[0] = 1;
a[1] = "text";

要素へのアクセス

インデックスを指定して配列の要素へアクセスできます。

a[0];

多次元配列

配列の要素に配列を代入することができます。

var a = new Array();
a[0] = new Array( 1, "text" );
a[1] = new Array( 2, "text" );

リテラルだと次のように宣言時に値も指定できます。

var a = [ [1, "text1"], [2, "text2"] ];

多次元配列の要素へのアクセスは次のようにします。

a[1][1];

上記ではインデックス1の要素の、インデックス1の値(text2)を取得しています。

連想配列

連想配列は配列と同じように複数のデータをまとめて管理できる変数です。配列はインデックスで値を管理していましたが、連想配列はキーで値を管理します。連想配列はキーで値を管理できるので、可読性が高いといえます。

コンストラクタ
var hash = new Array();
hash["a"] = 30;
リテラル
var hash = { a: 30 };

各要素にはキーを指定してアクセスします。

hash["a"];

繰り返し処理 (for)

配列の値すべてに処理したいとき、for が便利です。forは、リストの１番目から順番に変数に代入していき、ブロックを実行します。リストが終了した時点で繰り返しが終了されます。

var array = new Array( 1, "text" );
for( var i  = 0; i < array.length; i++ ){
    console.log( array[ i ] );
}

繰り返し処理(for ... in)

変数 (下記の例ではx) に格納されるのは配列のインデックスもしくは連想配列のキーになります。通常のforと違い、配列の要素を処理する順序はインデックス順に処理されるとは限りません。

var array = new Array( 1, "text" );
for( var x in array ){
    console.log( array[ x ] + ',' );
}

条件分岐(if)

if文は「もし～ならば、・・・を実行する」という条件つき命令を実現します。

if ( v == 'A' ) {
　　console.log("Aです");

} else if ( v == 'B' ) {
　　console.log("Bです");

} else {
　　console.log("AでもBでもない");
}

関数

関数とは、決まった処理をプログラムの別のところに記述しておき、使う際にパラメータを渡したりすることができます。また、関数から関数内で処理した結果の値を関数の呼び出し元に返すことができます。それを関数の戻り値(返り値)といいます。

関数の宣言は下記のようにします。

function funcTest(ARG1, ARG2) {
　　return ARG1 + ARG2;
}

ARG1、ARG2に指定された引数が渡されます。
return で呼び戻し元に結果の値を返しています。

関数を呼び出すときは、下記のようにします。

funcTest(1, 2);

引数で渡した 1 + 2 の結果、3 が戻り値となります。

関連記事