JS(JavaScript)の書き方基本 ~初心者向け~

##書き方

###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ダブルクォーテーションで囲む
```
[![https://gyazo.com/e709323c915b22c41e8850f7a1fc0181](https://i.gyazo.com/e709323c915b22c41e8850f7a1fc0181.png)](https://gyazo.com/e709323c915b22c41e8850f7a1fc0181)


- ダイアログに出力

```example.js
alert("Hello World!!"); 
```
[![https://gyazo.com/8f3d23a191c852f79558241676969ee9](https://i.gyazo.com/8f3d23a191c852f79558241676969ee9.png)](https://gyazo.com/8f3d23a191c852f79558241676969ee9)

- コメントアウト

```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);
```

以上。