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

条件文を使ってみよう(if…else...)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
条件によって、実行結果が変わるようなプログラムに挑戦してみましょう。
講師:
04:49

字幕

このレッスンでは JavaScript による条件文を学びます。それでは chapter02 lesson05 のファイルを開いてみましょう。まず begin のファイルをブラウザで開きます。そして同様に同じファイルをSublime Text にドラッグ&ドロップで開きます。そしてウィンドウの幅を調整して同時が見えるようにしました。それでは早速プログラムを書いていきましょう。まず20行目で一度 Tab を打ってインデントして変数を宣言しましょう。今回は X という変数を宣言してその中に 70 という数値を代入しました。それでは条件の位置に移動して条件を書いていきましょう。条件式はまず if そして ( )そして { } を書いて Enterそして } の先で elseそしてもう1回 { }そして Enterそして終了のところにセミコロンちょっと複雑ですがまずこの形を覚えてしまいましょう。この ( ) の中身に条件が入ります。そしてその結果、条件に当てはまればこのエリアにそして条件に当てはまらなければこの else の先の { } の中に結果が入る、ということを覚えておきます。では if のこの ( ) の中にX が 60 より大きいという条件を書きました。 これに当てはまればというこのエリアにdocument.writeこれで HTML に記述する準備ができましたので( ) の中に内容を書きます。シングルクォーテーションそして「合格です」テストを想定して60点より上だったら合格です、というメッセージそしてこの行で一度セミコロンで行を閉じておいてこの行でコピー、 Command+CCtrl+C でコピーをとったらelse の位置にカーソルを移動してCommand+V または Ctrl+V でぺ^-ストをしておきます。そして合格ではなく「不合格」という風に入力をしました。さて、上書き保存をして結果を確かめてみましょう。ではブラウザをフォーカスして更新。Command+R または Ctrl+R で更新をしてみましょう。更新をすると点数は今回変数に入っているのが70ですので60より上ということで「合格です!」というメッセージが出ました。もしもこの X が50点であるということで上書き保存をしてブラウザを更新しましょう。残念ながら、60を超えなかったということで「不合格」というメッセージが出てしまいました。では、60ではどうでしょう。上書き保存をしてブラウザ上で更新。 そうするとやはり「60以上」ではなく「60より上」なのでこの条件でも残念ながら不合格となってしまいます。ただ、ここに「より上」という比較演算子ではなく= という「以上」という比較演算子にしてあげて上書き保存、そしてブラウザ上で更新。そうしますと、今回は60点はボーダーに入るということになるので「合格です!」となります。今回はとても簡単な数値での比較による条件でしたけれども他にもいろいろな条件を設定することでプログラムを分岐させることができますのでif 文の基本形は是非覚えておくようにしましょう。今回は JavaScript を使った条件文について学びました。

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

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

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

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

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

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