WebデザイナーのためのJavaScript & jQuery入門

条件分岐を使ってみよう(switch)

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
条件は2つ以上設定することができます。こちらも、日常で遭遇するシチュエーションからプログラムを作ってみましょう。
講師:
06:32

字幕

このレッスンでは JavaScript による分岐、switch を使ってみるということを学んでいきましょう。それでは Chapter02 の Lesson06 のファイルを開きます。まず begin のファイルをブラウザで開きそして Sublime text でbegin のファイルを開きます。この様にしたら Sublime text の方で早速プログラムを書いていきましょう。では、変数を宣言の下で改行をして変数をまず宣言をしましょう。まず var x そしてその中に今度は文字列を入れたいと思いますので文字列は必ずシングルクォテーションで囲います。今回、観光名所を入れていきたいと思います。ここに「清水寺」と入れてみました。そして行末にはセミコロンを打っておきます。では、条件分岐を書いていきましょう。まず switch という単語を書きます。そして ( ) の中に今回 x つまり清水寺と書かれた部分が入ります。そして、{ }そして改行をします。そしてここに case というものを書いていきます。この switch 文は選択肢が多い場合に非常に役に立つ書き方です。case 半角スペースそして文字列を書いていきます。 「ヴェネティア」そしてここはコロンを打ちます。そして一行書いたらこの行で Command+CWindows は Ctrl+C を押してCommad+V で複製を2回とりました。そして、この「ヴェネティア」の中身を「ローマ」に変えたりもう1個は「フィレンツェ」に変えてみました。そして、3つの条件の時は改行します。document.write でHTML に書く準備をして( ) の中身は文字列を入れたいのでシングルクォテーションを打って「私もイタリアが好きです」と いう文章を入れておきました。そして文章の最後で改行そして break と打っておきます。そして Enter を打って次の条件を書いていきましょう。今度はまるっと、この case からbreak までをコピーしてこちらを選択してペーストをして複製をとっておきます。今度の条件は日本の地名日本の名所にしておきたいと思います。では「伊勢神宮」とかここに「清水寺」であるとかここに「浅草寺」であるとかを記入してみました。そしてここは日本なので「イタリア」ではなくて「日本」としておきます。そしてまたこの document.writeこの2行分を選択してコピーそして改行をしてもう1回改行をしてペーストインデントはできるだけ合わせてあげると良いでしょう。 そしてもう一度、この上の行に改行を入れておいてそして defaultそしてコロンここはセミコロンではなくてコロンです。そして上書き保存をします。これは、この x が どの文字かによって三択に答えが分かれるのですね。そして、1つ目はこの3つに一致している。2つ目は、この日本の地名に一致しているかどうかを判別することができます。3つ目の default これはこの上の6つに当てはまらない時の答えですのでメッセージを変えてあげたいと思います。では「その場所は知りません。」というようなメッセージがでてくるということにしましょう。では上書き保存をしてブラウザにフォーカスしてCommand+RWindows では Ctrl+R で更新そうすると、今回は清水寺というのはここ、「清水寺」の case にあたるのでdocument.write によってHTML に書き込まれる文章はこちら、ということになっています。それでは、この「清水寺」を消して例えば「ローマ」と入力しました。そして上書き保存そしてブラウザ上で更新そうすると、ローマの case はこちらにある。なのででてくる文章も、こちらになる。では全く別の地名を書いてみたいと思います。 ここはじゃあ「ウィ―ン」と入力してみました。そして、上書き保存をします。そしてブラウザ上で更新残念ながら ここにリストがないということはそれ以外ということになりますのでこの default のエリアが適用されてこのメッセージが表示されるといった具合になります。この様に選択肢 case が多い場合はこのような書き方が便利です。このレッスンでは switch による条件文を学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。