JavaScriptの基本文法

##JavaScriptの文法
JavaScript(ジャバスクリプト)はブラウザ上で動く言語です。
ブラウザ上で二本指クリック→「検証」を選択→Consoleを選択でコンソールを開けてコードが書けます。
HTMLのコードにScriptタグでJavaScriptのコードを呼び出すことができます。
【例】

```index.html
<body>
    <script>
        // この中にJavaScriptのコードを記述します
    </script>
</body>
```
またjsファイルを指定することで読み込むこともできます。
【例】script.jsがあるとして


```index.html
<body>
    <script src="script.js"></script>
</body>
```
上記のほうが外部のjsファイルに記述できるのでコードもわかりやすいと思います。
【例】

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>
```
##window.alertメソッド
ブラウザ上に引数または変数としてアラートに表示させる情報を渡すことができます。
【例】

```script.js
window.alert('おはよう');
```
ブラウザ上で二本指クリック→「検証」を選択→Consoleを選択で上記を記述すると「このページの内容　おはよう」と出てきます。
##console.logメソッド
引数としてコンソールに表示させる情報を渡すことができます。window.alertと同様に変数を引数に渡すこともできます。
【例】

````script.js
let name = '佐藤';
console.log(name + 'さん、おはよう');
```
上記をConsole上で記述すると佐藤さん、おはようとなります。
変数にはletとconstがあります。
##let
後で書き換えることができる変数宣言です。
##const
後で書き換えることができない変数宣言です。
##条件分岐
条件分岐にはif文を使います。if文の終わりにはendを付与します。
条件式は()でくくります。
条件式の後に続く{}内の処理が実行されます。
複数条件を指定する場合は、elseのあとにif文を記述します。
【例】

```script.js
let num = 30;

if (num % 15 == 0) {
  console.log(num + 'は3と5の倍数です');
} else if (num % 3 == 0) {
  console.log(num + 'は3の倍数です');
} else if (num % 5 == 0) {
  console.log(num + 'は5の倍数です');
} else {
  console.log(num + 'は3の倍数でも、5の倍数でもありません');
}
```
上記をConsole上で記述すると「30は3と5の倍数です」と出力されます。
##JavaScriptの配列
【例】

```script.js
let list = ['おはよう', 'こんにちは', 'こんばんは', 'おやすみ'];
console.log(list);
```
(4) ["おはよう", "こんにちは", "こんばんは", "おやすみ"]
0: "おはよう"
1: "こんにちは"
2: "こんばんは"
3: "おやすみ"
length: 4
▶︎___proto__: Array(0)
▶︎の部分を押すことで配列の中身を確認することができます。
##配列の要素を取得
【例】

```script.js
let list = ['おはよう', 'こんにちは', 'こんばんは', 'おやすみ'];
console.log(list[2]);
```
index.htmlを開いているブラウザのコンソールが、「こんにちは」という文字列が出力されます。
##配列の要素数を取得
lengthメソッドを使います。
【例】

```script.js
let list = ['おはよう', 'こんにちは', 'こんばんは', 'おやすみ'];
console.log(list.length);
```
index.htmlを開いているブラウザのコンソールが、4と出力されます。
##配列の要素を追加
pushメソッドを使います。
【例】

```script.js
let list = ['おはよう', 'こんにちは', 'こんばんは', 'おやすみ'];
list.push('こんにちは');
console.log(list);
```
index.htmlを開いているブラウザのコンソールが、「こんにちは」という文字列が5番目の要素として含まます。
##配列の要素を削除する
popメソッドを使います。
【例】

```script.js
let list = ['おはよう', 'こんにちは', 'こんばんは', 'おやすみ'];
list.pop();
console.log(list);
```
index.htmlを開いているブラウザのコンソールが、「おやすみ」という文字列が消えます。
list.shift();で先頭の文字列「おはよう」が消えます。
##JSのオブジェクト
JSのオブジェクトの定義

```
let obj = {};
```
【例】

```script.js
let obj = { name: '佐藤', age: 25, address: '東京' };
console.log(obj);
```
変数objに代入したオブジェクトの情報が表示されます。
##プロパティの値を取得
【例】

```script.js
let obj = { name: '佐藤', age: 25, address: '東京' };
console.log(obj.name);
```
ブラウザのコンソールが、佐藤という文字列が出力されます。
##プロパティの値を変更
```script.js
let obj = { name: '佐藤', age: 25, address: '東京' };
obj.name = '田中';
console.log(obj.name);
```
ブラウザのコンソールが、田中という文字列が出力されます。
##for文
繰り返しの基本的な構文です。

```
for (let i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}
```
i = i + 1の部分は変数iを1増やすという意味です。この部分は処理が一回繰り返すごとに呼ばれます。
【例】

```script.js
num = 1;
for (let i = 0; i < 10; i += 1) {
  console.log(num + '回目の出力')
  num +=  1
}
```
ブラウザのコンソールを確認すると1回目の出力〜10回目の出力まで繰り返しの処理がされます。
## 関数を定義function文

```
function 関数名(引数) {
  // 処理の内容
}
```
【例】

```script.js
function sayHello(){
  console.log('おはよう');
}

function sayName(name){
  console.log(name);
}

let myName = '佐藤';
sayHello();
sayName(myName);
```
ブラウザのコンソールで「おはよう」と「佐藤」が出力されます。
##関数の戻り値

```script.js
function calc(num1,num2){
  return num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));
```
ブラウザのコンソールが12になります。JSの戻り値にはreturnを用います。
##無名関数の定義
関数自体に名前が無いため無名関数と呼びます。

```script.js
let hello = function(){
    console.log('hello');
}

hello();
```
ブラウザのコンソールに、「hello」と出力されます。
関数宣言と関数式では読み込まれるタイミングが異なります

```script.js
hello();

let hello = function(){
    console.log('hello');
};
```
1行目で関数helloは定義されていないのでエラーが表示されます。

```script.js
hello();

function hello(){
    console.log('hello');
}
```
関数宣言は先に読み込まれるために、エラーが表示されてしまいます。一方で、関数式であれば先に読み込れないので「hello」が出力されます。
##関数宣言と関数式の違い
関数宣言（function文）で関数式（function演算子）です。
違いはFunctionオブジェクトの生成されるタイミングが違うといった感じでしょうか。