Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

JavaScript サイト構築

【Javascript】真偽値・switch構文

投稿日:

                                                                                                                                 

今日も苦手なJSについて調べたことをまとめていきます。

真偽値

if文みたいな比較演算子を使わなくても値自体で真偽値を判定ことができるようです。
データ型に応じて真になる条件と偽になる条件が違うので紹介していきます。

データ型 trueになる条件
文字列 空文字以外のとき
数値 0かNaN以外のとき
true / false trueのとき
object null以外
undefined、null falseになる
(trueにならない)

使い方の例

if (x) {
	// 処理
}

これはxが文字列だったら以下と同じ意味になります。

if (x !== '') {
	// 処理
}

できれば1つに統一してほしいんですけど、そんな望みは叶うことがないので覚えます。

三項演算子

if else文を簡潔に書き換えることもできるみたいです。
もう一回いいますが、できればそんなことしないで1つに統一してほしいんですけど、そんな望みは叶うことがないので覚えます。

まずはよくあるif else文です。
条件が真であればaはb、条件が偽だったらaはcというのを表しています。

var a, b, c;
if (条件) {
	a = b;
} else {
	a = c;
}

これを簡単に書き換えると

a = (条件) ? b : c;

一行で終わった!!
でもifという言葉すらでてこない!!
とうていif else文だと思えない!!
多分出会ってもif else文だと思わない!!
?ってどういう意味だろうとか思ってググっちゃう!!

ひとのコードを見る時とかコピる時にひとつひとつどういうものか確認していくのが、
jsを覚える一番の近道なのかもしれないです。

switch文

if文以外の条件分岐であるswitch文についてみていきます。

var food = "sushi" ; // food(変数)はsushiです
switch (food) { // foodが
	case "sushi": //sushiだった場合
		console.log("great!!"); //コンソールにgreat!!って吐き出すぞ!
		break; // foodがsushiだったときの処理が終わったよっていう合図(重要)
	case "yakiniku": //yakinikuだった場合
		 "tenpura": //tenpuraだった場合
		console.log("happy"); //コンソールにhappyって吐き出すぞ!
		break; 
}

if文よりもすっきり?かける?と定評らしいので、タイミングがあれば使ってみたいと思います。
とりあえずbreakは大事だから忘れない。

今日はここまでです!
また明日!

-JavaScript, サイト構築

執筆者:


comment

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

関連記事

no image

iframeのレスポンシブデザイン

youtube動画をサイトに埋め込む youtube動画をサイトに埋め込みたいというときの埋め込み方法を書いていきます。 動画の下にある共有をクリック 埋め込みコードをクリックするとhtmlが出てくる …

no image

CSS基礎編 .vol2

backgroundプロパティ backgroundプロパティについて調べているときに今まで使ったことがなかったbackgroud-attachmentというプロパティが出てきました。 これは画面や要 …

no image

【Javascript】変数や条件分岐について

変数とは 変数とはデータにつけるラベルのことです。 ラベル名は自分で決めることができます。 たとえば「こんちには!」は”x”というラベルにするときは var x; x = &q …

no image

CSSレイアウト vol.02

2カラムレイアウトをつくる 2カラム・3カラムのレイアウトを作る場合によくfloatが使われます。 今回はmainのcontainerの中にleftとright2つの領域を作っていきます。 <! …

no image

【Javascript】ループ処理

while文 今日は繰り返し処理(ループ)について調べたことをまとめていきます。 最初はwhile文についてです。 ある条件が真である間は処理を続けるという命令になります。 <script&gt …