フロントエンド - JavaScript/jQuery - 条件分岐

[fr-sato]

■目的

jQueryでの条件分岐の書き方について学びます。

■課題

以下の要素をHTMLファイルの<article>タグ内に追加して下さい。

<form action="#" method="get">
  <input type="text" name="val"><input type="submit" value="送信">
</form>

送信を押したら、テキストフィールドの値によってアラートを表示する条件分岐を実装して下さい。

• 入力した値が空だったら入力して下さいとアラート表示
• 入力した値が数字だったら数字ですとアラート表示
• 入力した値が上記以外だったら数字以外ですとアラート表示

[fr-itaya]

本課題は12：30開始、工数見積3時間で行います。

---

内訳

• 調査：1時間
• 実装：1時間
• 確認・デバッグ等：1時間

[fr-itaya]

つまづいた箇所まとめ

---

比較演算子

	JS	PHP
一致	===	==
一致しない	!==	!=

★PHPと同じ書き方でも動作はするが、JS標準に則った方が厳密に比較される。

if文を繋げる時

JS	PHP
else if	elseif

★JSは間にスペースが要る。

jQueryのthisセレクタがif文で使えなかった

★thisはイベントが発生した要素を取得する。

$(function() {
  $('form').submit(
    function() {
      var str = $('input[name="val"]').val();
      if (str === '') {
        alert('入力してください');
      } else if (str.match(/^[0-9]+$/)) {
        alert('数字です');
      } else {
        alert('数字以外です');
      }
    });
});

このコードで:input[name="val"]をthisに置き換えると、thisはsubmitメソッドが発生したform要素を取得するためエラーになる。

[fr-sato]

確認しました、OKです。お疲れ様でした。