JavaScript 初心者向け

ここに記載されているコードは単体で動くようになっているのでイメージが湧かない場合は動かしてみてください。

#HTMLでの読み込み
###HTML上で動かす場合

```html:sample.html
<script type = "text/javascript">
// ここにコードを書く
</script>
```

###外部ファイルとして読み込む
```html:sample.html
<script src="JavaScriptのファイルパス"></script>
```
#コメントアウト
```js:sample.js
1行の時
// これは例です

複数行の時
/*
これは例です
これは例です
*/
```

#コンソールに出力
主にデバックで使用します。

```js:sample.js
console.log('Hello World');
console.log("Hello World");

//文字列は、シングルorダブルクォーテーションで囲む
```
#ダイアログ
```js:sample.js
alert("Hello World!!"); 
```
#数値と文字列の出力
```js:sample.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
```
#計算式の省略
```js:sample.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
```
#変数
変数とはプログラミング言語における値を入れておく箱のこと
変数名にはルールがあり「数字開始・アンダーバー・ローマ字・日本語」は、エラーが出るのでNG

```js:sample.js
const name = "tanaka"; // 変数名はtanaka
console.log(name); // 出力結果：tanaka
/*--------------------------------------------------*/
const name = "tanaka";
console.log(name + tarou); // 出力結果：tanakatarou
/*--------------------------------------------------*/
const x = 1 + 100;
alert(x); // 出力結果：101
```

#変数の種類
変数にはvar、let、constがあり現場で使用するのはlet、constを使う
###const
再代入できない変数。

```js:sample.js
const name = "yamada";
name = "tanaka";
console.log(name) // エラーになる
```
###let
再代入できる変数。

```js:sample.js
let name = "yamada";
name = "tanaka";
console.log(name) // 出力結果:tanaka
```
#真偽値
「true（真）」と「false（偽）」2つの値のこと

```js:sample.js
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文を用いると「もし○○ならば○○を行う」という条件分岐が可能になる。elseは「もし○○なら○○を行う、そうでなければxxを行う」という処理ができるようになる。elseは日本語で「別の方法で、他に」の意味を持つ

###if文
```js:sample.js
if (条件式) {
    処理 // 条件式がtrueのとき実行
} else {
    処理 // 条件式がfalseのとき実行
}
/*--------------------------------------------------*/
const name = "yamada"
if (name === "yamada") {
    console.log("yamadaです") // 条件式がtrueのとき実行
} else if (name === "tanaka") {
    console.log("tanakaです") // 条件式1がfalseで、条件式2がtrueのとき実行
} else {
    console.log("yamadaでもtanakaでもないです") // 条件式1と2両方ともfalseのとき実行
}
```

###switch文
```js:sample.js
switch (対象) {
    case 値１: // 式の結果が値1に等しい場合に実行
        break;
    case 値2: // 式の結果が値2に等しい場合に実行
        break;
    default: // 式の結果がどれにも該当しない場合に実行
        処理
}
/*--------------------------------------------------*/
const food = "チョコレート"; // food === "チョコレート"のとき
switch (food) {
    case "チョコレート":
        console.log("チョコレートは食べ物です"); // 実行される
        break;
    case "コーラ":
        console.log("コーラは飲み物です");　 // 実行さない
        break;
    default:
        console.log("食べ物でも飲み物でもありません");
}

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

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

###while文
```js:sample.js
while (条件式) {
    処理
}
/*--------------------------------------------------*/
let x = 1; // 変数の定義
while (x <= 5) { // 条件（条件式の真偽が判定される）
    console.log(x); // 繰り返す処理(条件式がtrueのとき処理が実行、falseのとき繰り返しが終了)
    x = x + 1; // 変数の更新（変数の値が更新され、再び条件に戻る）
}
```
###for文
```js:sample.js
for(変数の定義;条件式;変数の更新){
 処理
}
/*--------------------------------------------------*/
for (let x = 1; x <= 1; x += 1) {
    console.log(x); // 条件式がtrue（真）になるまで出力する
}
```

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

```js:sample.js
// 例えば、名前の値がいくつもある場合、配列を使うとシンプルになる
let name01 = "tanaka";
let name02 = "sasaki";
let name03 = "yamada";

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

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

#lengthメソッド
```js:sample.js
const name = ["tanaka", "sasaki", "yamada"]
console.log(name.length); //出力結果：3
```
#pushメソッド
```js:sample.js
const name = ["tanaka","sasaki","yamada"]
name.push("suzuki")
console.log(name); // 出力結果：tanaka,sasaki,yamada,suzuki
```

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

```js:sample.js
[値1, 値2] // 配列
{
    キー1: 値1,
    キー2: 値2,
} // 連想配列
/*--------------------------------------------------*/
let fruit = {
    "name": "banana",
    "color": "yellow",
};
console.log(fruit.name); // 出力結果：banana
console.log(fruit.color); // 出力結果:yellow
```

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

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

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

```js:sample.js
const 関数名 = (引数名) => {
    処理
}
関数名(値); // 関数の呼び出し
/*--------------------------------------------------*/
const introduce = (name) => {
    console.log(name);
}
introduce("tanaka"); // 出力結果：tanaka
/*--------------------------------------------------*/
const introduce = (name, age) => {
    console.log("名前は" + name + "です");
    console.log(age + "歳です");
}
introduce("田中", 20); // 出力結果：名前はtanakaです。20歳です。
```
#戻り値
関数の処理結果を呼び出し元で受け取る方法。呼び出し元で受け取る処理結果を戻り値と呼び、このことを「関数が戻り値を返す」と言う。

```js:sample.js
const 関数名 = () =>  {
    return 値; // 「return 値」と書くことで、関数はその値を戻り値として返す。
}
/*--------------------------------------------------*/
const add = (a, b) => {
    return a + b;
}
sun = add(1, 3)   // 呼び出し部分
console.log(sun); // 結果４

```
#DOM取得
DOMとは「Document Object Model」の略。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み

```html:sample.html
<input type="text" id="text_area">
```

```js:sample.js
const textArea = document.getElementById("text_area")
console.log(textArea) // 出力結果:<input type="text" id="text_area">
```

###値（value）を取得
```html:sample.html
<input type="text" id="text_area" value="banana">
```

```js:sample.js
const textArea = document.getElementById("text_area")
console.log(textArea.value) // 出力結果:banana
```

###入力した値（value）を取得

```html:sample.html
<input type="text" id="text_area">
<button id="send_button">送信</button>
```

```js:sample.js
const textArea = document.getElementById("text_area") // inputタグのDOMを取得
const sendButton = document.getElementById("send_button") // buttonタグのDOMを取得

sendButton.addEventListener('click', () => {
    console.log(textArea.value) // 出力結果:入力された値
})
```