デイトラweb制作中級編 DAY1
nakano
JavaScriptとは
JavaScript ・・・ HTMLやCSSで作ったサイトに動きをつけるフロントエンド言語
※JavaScript と Java は別物
具体的な使用例
・ブラウザ上でのポップアップ表示（注意喚起など）
・カウントダウンタイマーの作成
・Webアニメーションの作成
JavaScriptの基本文法
①文字列の表示
console.log("出力したい文字")
②数字の計算
足し算 ・・・ 「 + 」
引き算 ・・・ 「 - 」
掛け算 ・・・ 「 * 」
割り算 ・・・ 「 / 」
割り算の余り ・・・ 「 % 」
③変数と定数（let + const）
・変数（let）
let 変数名 = 数字 or 文字
・定数（const）
const 定数名 = 数字 or 文字
よく使う省略
④関数（function）
関数（function） ・・・ 様々な処理をまとめて、名前を付けたもの
関数を使うと、同じような処理を複数回必要とする場面で、
・わざわざ長いコードを書く必要がなくなる
・同じ処理を何度も書く必要がないため、ミスが減る
そのためコーディングの効率化ができる。
基本的な使い方
function 関数名(引数) {
処理内容
}
※注意点
・関数の中に「return」文を記述することで、処理をした結果（返り値）を得ることができる
・引数が複数ある場合は、「引数1,引数2,・・・」のように「,」で区切る
具体例（円の面積の場合）
⑤条件分岐（if・switch）
条件分岐 とは
ログインしてたら → HOMEを出す
ログインしてなかったら → ログイン画面に飛ばす
このように条件によって処理を分けたいときに使う
条件分岐には「if文」と「switch文」があり、
①二分岐（2つの処理のどちらかを実行する）の場合
→ 「if文」
②多分岐（3つ以上の処理のどれか一つを実行する）の場合
→ 「switch文」
・if文
if (条件式) {
条件式が true 時の処理
} else {
条件式が正しくない false 時の処理
}
※2つ以上の条件文を書く場合は、「else if」を使う
・switch文
switch (条件式） {
case ①:
条件式が①のときの処理
break
case ②:
条件式が②のときの処理
break
case ③:
条件式が③のときの処理
break
default:
上記以外のときの処理
break
}
まとめ
今回はJavaScriptの基本文法について学習しました。
Progateで一通り学んだところだったので、スムーズに学習を進めることができましたが、
HTMLやCSSに比べるとやや難しい内容になっていることがよくわかります。
JavaScriptを使ってどのようにコードを書くのか、まだつかめてませんが引き続きがんばりたいです！
