書き方

HTML上で動かす場合

HTML上で読み込む

example.html

<script type = "text/javascript">
// ここにコードを書く
</script>

外部ファイルとして読み込む

example.html

<script src = "JavaScriptのファイルパス" > </script>

基本

コンソールに出力

example.js

console.log('Hello World');
console.log("Hello World");

//文字列は、シングルorダブルクォーテーションで囲む

ダイアログに出力

example.js

alert("Hello World!!");

コメントアウト

example.js

//これは例です

数値と文字列の出力

example.js

console.log(5 + 3); //出力結果：8
console.log(5 - 3); //出力結果：2
console.log(4 * 2); //出力結果：8
console.log(4 / 2); //出力結果：2
console.log(9 % 2); //出力結果：1 ※余りの計算
console.log("5 + 3"); //出力結果：5 + 3
console.log("5" + "3"); //出力結果：53
console.log("あい" + "うえお"); //出力結果：あいうえお
console.log("A" + "B" + "C"); //出力結果：ABC

変数

変数とはプログラミング言語における値を入れておく箱のこと。「var」はvariable(ヴェアリアブル)のことで、日本で変数という意味。変数を宣言するときに使用する。

example.js

var name = "tanaka";　//変数名はtanaka
console.log(name); //出力結果：tanaka

example.js

var name = "tanaka";
console.log(name + tarou); //出力結果：tanakatarou

example.js

var x = 1 + 100;
alert(x); //出力結果：101

変数名にはルールがあり「数字開始・アンダーバー・ローマ字・日本語」は、エラーが出るので望ましくない。

変数の更新

変数は一度代入した値を変更することができる

example.js

var x = 1 + 100;
alert(x); //出力結果：101
x = 2; //変数を更新する時は「var」はつけない
alert(x); //出力結果：2

example.js

var x = 1 + 100;
alert(x); //出力結果：101
x = x + 2;
alert(x); //出力結果：103

計算式の省略

計算式は、下記のような省略した書き方もできる。

example.js

省略前　　　　省略後
x = x + 1　 x += 1
x = x - 1　 x -= 1
x = x * 1　 x *= 1
x = x / 1　 x /= 1
x = x % 1　 x %= 1

真偽値

「true（真）」と「false（偽）」2つの値がある

example.js

a === b //aとbが等しければtrue
a !== b //aとbが等しくなければtrue
a < b   //aの方がbより小さいときtrue
a <= b  //aの方がbより小さいまたは等しいときtrue

example.js

&& = かつ

xが2のとき
x　> 1 && x < 3 //複数の条件がすべて真だからtrue

example.js

|| = または

xが2のとき
x　< 1 && x < 3 //複数の条件のうち1つでも真だからtrue

条件分岐(if文)

if文を用いると「もし○○ならば○○を行う」という条件分岐が可能になる。elseは「もし○○なら○○を行う、そうでなければxxを行う」という処理ができるようになる。elseは日本語で「別の方法で、他に」の意味を持つ。

example.js

if (条件式) {
	処理 //条件式がtrueのとき実行
} else {
	処理 //条件式がfalseのとき実行
}

example.js

if (条件式1) {
	処理 //条件式がtrueのとき実行
} else if (　条件式2　) {
	処理 //条件式1がfalseで、条件式2がtrueのとき実行
}　
else　 {
	処理 //条件式1と2両方ともfalseのとき実行
}

条件分岐(switch文)

switch文はif文よりも記述量が少ないため、見た目がシンプルになる

example.js

switch (対象) {
	case 値１: //式の結果が値1に等しい場合に実行
		　　break;
	case 値2: //式の結果が値2に等しい場合に実行
		　　break;　　
	default: //式の結果がどれにも該当しない場合に実行
		　処理
}

example.js

var food = "チョコレート"; //food === "チョコレート"のとき
switch (food) {
	case "チョコレート":
		console.log("チョコレートは食べ物です"); //実行される
		　　
		bleak;
	case "コーラ":
		console.log("コーラは飲み物です");　 //実行さない
		　　
		bleak;
	default:
		console.log("食べ物でも飲み物でもありません");
}

//bleakがあるのでswitch文を抜ける
//bleakがないと他のcase内の処理も実行される

繰り返し処理(while文・for文)

繰り返し処理とは、一定の処理を自動で繰り返し行う処理のこと。JSでループ（繰り返し）処理をおこなうときは、while文とfor文の2種類がある。

while文

example.js

while (条件式) {　
	処理
}

example.js

var x = 1;　//変数の定義
while (x <= 5) {　//条件（条件式の真偽が判定される）
	console.log(x);　//繰り返す処理(条件式がtrueのとき処理が実行、falseのとき繰り返しが終了)
	x = x + 1;　//変数の更新（変数の値が更新され、再び条件に戻る）
}

for文

example.js

for(変数の定義;条件式;変数の更新){
 処理
}

example.js

for (var x = 1; x <= 1; x += 1) {
	console.log(x);　
}

配列

配列を使うと複数の値をまとめて書くことができる。

example.js

//例えば、名前の値がいくつもある場合、配列を使うとシンプルになる
var name1 = "tanaka";
var name2 = "sasaki";
var name3 = "yamada";

//配列の出力
var name = ["tanaka","sasaki","yamada"]
console.log(name);

//配列の要素を取り出す(インデックス番号：「0=tanaka」「1=satou」「2=yamada」)
var name = ["tanaka","sasaki","yamada"]
console.log(name[0]); //出力結果：tanaka

lengthメソッド

配列には要素の数を数えるlengthメソッドがある。length(レングス)は日本語で「長さ」を意味する。

example.js

var name = ["tanaka", "sasaki", "yamada"]
console.log(name[0]); //出力結果：tanaka

pushメソッド

配列に要素を追加する

example.js

var name = ["tanaka","sasaki","yamada"]
name.push("suzuki")
console.log(name);　//出力結果：tanaka,sasaki,yamada,suzuki

連想配列

配列は複数の値を並べて管理するのに対して、連想配列はそれぞれの値にキーと呼ばれる名前をつけて管理する。

example.js

[値1, 値2] //配列
{
	キー1: 値1,
	キー2: 値2
} //連想配列

example.js

var fruit = {
	"name": "banana",
	"color": "yellow"
};
console.log(fruit.name); //出力結果：banana

関数

関数とは、ある処理をまとめたプログラムのこと。同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの。

関数の呼び出し

example.js

function hello() {　　　　　　　　　　　　　　　 //hello　= 関数名
	console.log("こんにちは")　　 //console.log("こんにちは") = 実行される処理
}
hello(); //出力結果：こんにちは

スコープ

スコープとは変数名や関数名の有効範囲のこと。変数はどの範囲からアクセスできるかによって、グローバル変数・ローカル変数の２種類のスコープ（範囲）をもつ。

関数の外側で宣言した変数はグローバル変数として扱われ、プログラムのどこからでもアクセスすることができる。一方、関数の内側で宣言された変数はローカル変数として扱われ、宣言された関数内からのみアクセスできる。

例1

example.js

var x = "tanaka";　
var x = "sasaki";
alert(x);　//出力結果は後に書かれた「sasaki」

例2（スコープの範囲を確認する）

example.js

var x = "tanaka"; //グローバル変数
function name() {
	var x = "sasaki"; //ローカル変数
	alert(x);　//出力結果：sasaki
}
console.log(x); //出力結果：tanaka
name();

サンプル2では「sasaki」は関数nameの中で宣言されているローカル変数のため、関数nameの中でのみ有効。よってconsole.log(x)で表示される文字列は、グローバル変数の「tanaka」が表示される。

引数

引数(ひきすう)とは関数に与える追加情報のようなもの。関数を呼び出すときに一緒に引数を渡すことで、関数の中でその値を利用することができる。

メールを例に出すと、関数は同じ処理を何度も繰り返すことができる（同じメールを何通も送れる）が、宛名だけ変えたい場合もある。そこで使われるのが引数。

example.js

function 関数名(引数名) {　
	処理
}
関数名(値); //関数の呼び出し

example.js

function introduce(name) {　
	console.log(name);
}
intoroduce("tanaka");　//出力結果：tanaka

複数の因数を受け取る関数の呼び出し

example.js

function introduce(name, age) {　
	console.log("名前は" + name + "です");　
	console.log(age + "歳です");
}
introduce("田中", 20);　//出力結果：名前はtanakaです。20歳です。

戻り値

関数の処理結果を呼び出し元で受け取る方法。呼び出し元で受け取る処理結果を戻り値と呼び、このことを「関数が戻り値を返す」と言う。

example.js

function 関数名(){
　return　値; //「return 値」と書くことで、関数はその値を戻り値として返す。
}

下の図では、add関数が1と3を受け取り、処理結果の4を呼び出し元に返している。この4が戻り値にあたる。

example.js

function add(a, b) {　
	return　 a + b;
}
sun = add(1, 3) //呼び出し部分
console.log(sun);

以上。