if文を使った条件分岐~Web制作JavaScriptプログラミングjQueryシェアTweetこんにちは。2月14日はふんどしの日だと言い張って聞かない人々が世間にはいるようです。それはそれで面白いと思います。今回も引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」そんな方です。Blog脱jQuery初心者!コピペに頼らないプログラミング入門講座~その1~こんにちは。気が付けばもう12月ですね。2016年も残り一か月です。クラスの追加と削除~こんにちは。2017年になりました。前回の酉年に起こった出来事というと和泉元彌がプロレスデビューした年だそうです。空中元彌チョップ...忘れられないですね。前回に引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになる...前回までの講座では簡単なクリックイベントとclassを追加、削除する方法をご紹介しました。今回はif文を使った条件分岐についてご紹介していきます。今回のまとめif文ってなに?if文とは「もし~の場合」のように特定の条件を満たした場合にのみ適用される処理を書くことが出来るものです。条件を満たした場合に適用したい処理をここに書く}こんな感じです。それでは前回の講座で作成したクリックでクラスを追加するボタンに手を加えて試してみましょう。});});jqueryの記述は下記になります。});});新しく出てきたメソッドについてhasClass.hasClass('nekodenai')指定された要素が特定のクラスを持っているかを判断するメソッドになります。text.text("猫になりました!!");指定された要素のテキスト情報を取得・設定するメソッドです。引数(括弧)の中にテキストを入れるとそのテキストと要素のテキストを差し替えることもできます。今回の場合はボタンに入っている「猫にする」というテキストを「猫になりました!」に差し替えています。.btn”)のテキストを「猫になりました!!」に変更するという処理になります。今回は指定した要素が特定のクラスを持っていた場合に何か処理を行うという条件分岐です。.wagahaiにクラスnekodenaiが付いていない場合は何も起こりません。複数のif文を組み合わせた条件分岐if文を使用することで様々な条件を判断して処理の出し分けができるようになります。複数のif文を組み合わせることも可能です。サンプル1に手を加えてみましょう。});});jqueryの記述は下記になります。ifは「そうじゃないとき、もし~の場合」というものでifと組み合わせて使用します。.wagahai’)がクラスnekodearuを持っている場合という振り分けになります。ifのほかにelseという記述もあります。elseは「そうじゃない場合」という時に使用します。.wagahai’)がクラスnekodenaiを持っている場合以外はすべてelseの中の処理を行う。その他!というイメージです。.btn”)のテキストを「猫でなくなりました!!」に変更する2パターンの処理を.wagahaiが持っているクラスによって振り分けています。利用することで様々な条件分岐を実現することが出来ます。ここではいくつか実例を紹介します。2;これは変数といってtestという名前の入れ物の中に2が入っている状態です。入れ物の名前を呼び出すことで何度でも利用することができます。今回は「%」の前で呼び出していますね。頻出する記述を変数に入れておくことで修正を容易にできたりするのでよく使います。「%」という文字が出てきましたね。見た方は混乱するかと思いますが、これは「演算子」といって特別な意味を持つ文字で「%」は余剰を求める除算(割り算)を意味しています。演算子は他にも+...加算(足し算)-...減算(引き算)*...乗算(掛け算)/...除算(割り算)などがあります。=にも特別な意味があって=...データの代入==...等しい===厳密に等しいという意味になります。「偶数です!」というメッセージを表示する処理となります。alert('吾輩は消えています!');}クラスwagahaiを持つ要素のCSSがdisplay:none;だった場合に「吾輩は消えています!」というメッセージを表示する処理となります。alert('ぐーぐるのページです!');}現在いるページのURLがhttp://google.com/だった場合に「ぐーぐるのページです!」というメッセージを表示する処理となります。今回のまとめこのようにif文を使うことで様々な条件分岐が実現できます。classやidの操作とif文を組み合わせるだけでも色々できますよ!振り分けの条件に関しては検索すればいくらでも情報が出てくるので思い浮かんだものを検索してみるといいでしょう。条件分岐に少し慣れてくると実現できることが増えてきてプログラミングしているなぁという実感が湧いてきますよ!次回は4回目となりますが、一区切りとして応用的なまとめをやろうと思っています。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。