書き方
HTML上で動かす場合
- HTML上で読み込む
<script type = "text/javascript">
// ここにコードを書く
</script>
- 外部ファイルとして読み込む
<script src = "JavaScriptのファイルパス" > </script>
基本
- コンソールに出力
console.log('Hello World');
console.log("Hello World");
//文字列は、シングルorダブルクォーテーションで囲む
- ダイアログに出力
alert("Hello World!!");
- コメントアウト
//これは例です
数値と文字列の出力
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(ヴェアリアブル)のことで、日本で変数という意味。変数を宣言するときに使用する。
var name = "tanaka"; //変数名はtanaka
console.log(name); //出力結果：tanaka
var name = "tanaka";
console.log(name + tarou); //出力結果：tanakatarou
var x = 1 + 100;
alert(x); //出力結果：101
変数名にはルールがあり「数字開始・アンダーバー・ローマ字・日本語」は、エラーが出るので望ましくない。
変数の更新
変数は一度代入した値を変更することができる
var x = 1 + 100;
alert(x); //出力結果：101
x = 2; //変数を更新する時は「var」はつけない
alert(x); //出力結果：2
var x = 1 + 100;
alert(x); //出力結果：101
x = x + 2;
alert(x); //出力結果：103
計算式の省略
計算式は、下記のような省略した書き方もできる。
省略前 省略後
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つの値がある
a === b //aとbが等しければtrue
a !== b //aとbが等しくなければtrue
a < b //aの方がbより小さいときtrue
a <= b //aの方がbより小さいまたは等しいときtrue
&& = かつ
xが2のとき
x > 1 && x < 3 //複数の条件がすべて真だからtrue
|| = または
xが2のとき
x < 1 && x < 3 //複数の条件のうち1つでも真だからtrue
条件分岐(if文)
if文を用いると「もし○○ならば○○を行う」という条件分岐が可能になる。elseは「もし○○なら○○を行う、そうでなければxxを行う」という処理ができるようになる。elseは日本語で「別の方法で、他に」の意味を持つ。
if (条件式) {
処理 //条件式がtrueのとき実行
} else {
処理 //条件式がfalseのとき実行
}
if (条件式1) {
処理 //条件式がtrueのとき実行
} else if ( 条件式2 ) {
処理 //条件式1がfalseで、条件式2がtrueのとき実行
}
else {
処理 //条件式1と2両方ともfalseのとき実行
}
条件分岐(switch文)
switch文はif文よりも記述量が少ないため、見た目がシンプルになる
switch (対象) {
case 値１: //式の結果が値1に等しい場合に実行
break;
case 値2: //式の結果が値2に等しい場合に実行
break;
default: //式の結果がどれにも該当しない場合に実行
処理
}
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文
while (条件式) {
処理
}
var x = 1; //変数の定義
while (x <= 5) { //条件（条件式の真偽が判定される）
console.log(x); //繰り返す処理(条件式がtrueのとき処理が実行、falseのとき繰り返しが終了)
x = x + 1; //変数の更新（変数の値が更新され、再び条件に戻る）
}
for文
for(変数の定義;条件式;変数の更新){
処理
}
for (var x = 1; x <= 1; x += 1) {
console.log(x);
}
配列
配列を使うと複数の値をまとめて書くことができる。
//例えば、名前の値がいくつもある場合、配列を使うとシンプルになる
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(レングス)は日本語で「長さ」を意味する。
var name = ["tanaka", "sasaki", "yamada"]
console.log(name[0]); //出力結果：tanaka
pushメソッド
配列に要素を追加する
var name = ["tanaka","sasaki","yamada"]
name.push("suzuki")
console.log(name); //出力結果：tanaka,sasaki,yamada,suzuki
連想配列
配列は複数の値を並べて管理するのに対して、連想配列はそれぞれの値にキーと呼ばれる名前をつけて管理する。
[値1, 値2] //配列
{
キー1: 値1,
キー2: 値2
} //連想配列
var fruit = {
"name": "banana",
"color": "yellow"
};
console.log(fruit.name); //出力結果：banana
関数
関数とは、ある処理をまとめたプログラムのこと。同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの。
関数の呼び出し
function hello() { //hello = 関数名
console.log("こんにちは") //console.log("こんにちは") = 実行される処理
}
hello(); //出力結果：こんにちは
スコープ
スコープとは変数名や関数名の有効範囲のこと。変数はどの範囲からアクセスできるかによって、グローバル変数・ローカル変数の２種類のスコープ（範囲）をもつ。
関数の外側で宣言した変数はグローバル変数として扱われ、プログラムのどこからでもアクセスすることができる。一方、関数の内側で宣言された変数はローカル変数として扱われ、宣言された関数内からのみアクセスできる。
例1
var x = "tanaka";
var x = "sasaki";
alert(x); //出力結果は後に書かれた「sasaki」
例2（スコープの範囲を確認する）
var x = "tanaka"; //グローバル変数
function name() {
var x = "sasaki"; //ローカル変数
alert(x); //出力結果：sasaki
}
console.log(x); //出力結果：tanaka
name();
サンプル2では「sasaki」は関数nameの中で宣言されているローカル変数のため、関数nameの中でのみ有効。よってconsole.log(x)で表示される文字列は、グローバル変数の「tanaka」が表示される。
引数
引数(ひきすう)とは関数に与える追加情報のようなもの。関数を呼び出すときに一緒に引数を渡すことで、関数の中でその値を利用することができる。
メールを例に出すと、関数は同じ処理を何度も繰り返すことができる（同じメールを何通も送れる）が、宛名だけ変えたい場合もある。そこで使われるのが引数。
function 関数名(引数名) {
処理
}
関数名(値); //関数の呼び出し
function introduce(name) {
console.log(name);
}
intoroduce("tanaka"); //出力結果：tanaka
複数の因数を受け取る関数の呼び出し
function introduce(name, age) {
console.log("名前は" + name + "です");
console.log(age + "歳です");
}
introduce("田中", 20); //出力結果：名前はtanakaです。20歳です。
戻り値
関数の処理結果を呼び出し元で受け取る方法。呼び出し元で受け取る処理結果を戻り値と呼び、このことを「関数が戻り値を返す」と言う。
function 関数名(){
return 値; //「return 値」と書くことで、関数はその値を戻り値として返す。
}
下の図では、add関数が1と3を受け取り、処理結果の4を呼び出し元に返している。この4が戻り値にあたる。
function add(a, b) {
return a + b;
}
sun = add(1, 3) //呼び出し部分
console.log(sun);
以上。