デイトラweb制作中級編 DAY1

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を使ってどのようにコードを書くのか、まだつかめてませんが引き続きがんばりたいです!