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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です