JavaScriptの基本文法

#デイトラWeb制作コース中級編DAY1の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習27日目⏩<br><br>Web制作コース中級編DAY1💻<br><br>学習時間:4時間6分⏳<br><br>学習内容:JavaScriptの基本文法①✏<br><br>学び📚<br>・文字の出力<br>・変数<br>・定数<br>・文字の埋め込み<br>・関数<br>・条件分岐<br><br>難易度が一気に上がった気がします！<br>楽しい！🔥<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/fSyqAqaYZZ">pic.twitter.com/fSyqAqaYZZ</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1365801023256813574?ref_src=twsrc%5Etfw">February 27, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#　【学び】

1　`console.log`
 文字を出力する

```maiin.js
　console.log("こんにちは")

```

###↓

``「こんにちは」``

＊半角で入力しないと反映されない！

2 エラー表示
![スクリーンショット 2021-02-25 5.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/358f1584-6429-f8b4-8f0d-35e4a50b0251.png)
このエターが出たら、文法が間違っている！
緑の部分は、エラーの説明（今回のは、「”」は使えないと書いている）

3 数字の計算
算数で習う数式と一緒

＊あまりを出す計算のみ、``「％」``を使う

例：
![スクリーンショット 2021-02-25 5.51.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/70a28d27-cf0d-fba9-b818-29bb6aec475b.png)

4 変数
データにラベルをつけるイメージ
``「let 変数名＝〇〇〇」``で入力する
 
![スクリーンショット 2021-02-25 6.30.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/25d6f928-2675-0d25-84a6-9154753b1a5e.png)

・変数なので、値を変えることもできる
![スクリーンショット 2021-02-25 6.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/8a5ee427-144a-b5ae-61b3-5ac821ba8719.png)

・変数を使って定義もできる
![スクリーンショット 2021-02-25 6.36.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/a62a331e-0a3a-10a3-d8cc-70cb09342b79.png)

５　変数名のルール
・アルファベットと数字のみ
・小文字
・数字を先頭に置かない

6 定数
変数と違い、値を変更することができない
``「const 変数名＝〇〇〇」``で入力する

7 変数を使った文字の埋め込み
![スクリーンショット 2021-02-25 6.44.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/09b5e9c6-b813-fedf-30a8-f21971af4cb2.png)

###↓　打ち込むのが面倒くさい、、、、

![スクリーンショット 2021-02-25 6.44.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/2ecbaee9-dc24-4711-d4bf-ffca7f4ce335.png)

「`${変数名}`」を使えば簡単に文字を埋め込むことができる！

8 関数
特定の処理をまとめたもの

ルール：`function 関数名（引数）{//処理を書く}`

重要な概念

・引数：関数に値を渡す役割

・返り値：関数の出力のこと。　例：計算した結果を関数の外に伝える
　　　　＊返り値を指定するときは、`return`を入力する
![スクリーンショット 2021-02-28 5.37.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/e73a0f2a-aa9d-0e04-57ff-b1954b7f946e.png)

9 関数とスコープ
　スコープ＝変数や定数がどこまで使えるか

・＜関数の中で定義された定数や変数は実行することができない＞
![スクリーンショット 2021-02-28 5.56.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/72986755-1823-7b83-cbf0-26a6f1c950b4.png)

・＜関数（function）の外で定義された定数や変数は、関数（functuon）の中で実行できる＞
![スクリーンショット 2021-02-28 5.59.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/12c48bf8-81e7-c91a-11ee-0380e32ac292.png)

10 条件分岐 【if文】
　〇〇の場合□□する　→　`if(条件){//処理}`
　＊条件にはBooleanを使う（true or false） true = 表示する　　false　= 表示しない
![スクリーンショット 2021-02-28 6.27.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/c2b9353f-ac2c-2908-52bf-a33f94285119.png)

11 特定の値を設定する
　・`===` ３連イコール　→　同じ
　・`!==` びっくりマーク＋２連続イコール　→　同じではない
![スクリーンショット 2021-02-28 6.30.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/245e1742-f539-4b20-226a-e5aeaf7860a3.png)

12 条件を複数指定する
　スコアが20以上でかつ90以下　→　`if (score > 20 && score <90)`
  　* &&をつかう！
  
　スコアが０または８９　→　`if (score === 0 || score == 89)`

13 条件分岐 【else文】
 〇〇が満たされなかった場合□□する
![スクリーンショット 2021-02-28 7.31.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/5d09ac63-b212-7b3d-3c56-3f432f7827d1.png)

14 条件分岐 【else-if文】
![スクリーンショット 2021-02-28 7.38.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/0cb65aa7-8388-a3b4-cae3-93db33f24a01.png)

15 条件の中に条件を含めることができる
　　入れ子構造が可能
![スクリーンショット 2021-02-28 7.46.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/6d1a3051-48af-bc02-7f54-f0528708e9c6.png)

16 条件分岐 【switch文】
＊　breakで区切るのを忘れない！ 
＊　defaultはそれ以外という意味
![スクリーンショット 2021-02-28 7.57.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/0693a229-a16a-3547-d12f-b9d9e9b03292.png)