カードバインド機能を実装する

jQueryjQueryBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

このプロジェクトでは、jQueryとAJAXを使ってカードバインド機能を実装する方法を学びます。このプロジェクトは、フロントエンド開発における重要なスキルであるデータの動的化の基本を理解するのに役立ちます。

👀 プレビュー

成功した結果は以下の通りです。

成功したカードバインド結果

失敗した場合のエフェクトは以下の通りです。

カードバインド失敗メッセージ

🎯 タスク

このプロジェクトでは、以下のことを学びます。

  • jQueryのajax関数を使ってJSONファイルからデータを取得する方法
  • ユーザー入力と取得したカードデータを比較する方法
  • 比較結果に基づいて成功または失敗のメッセージを表示する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

  • jQueryとAJAXを使ってカードバインド機能を実装する
  • フロントエンド開発における重要なスキルであるデータの動的化の基本を理解する
  • サーバーからデータを取得するためのAJAXリクエストを行う
  • jQueryを使ってDOMを操作して動的なコンテンツを表示する
  • Bootstrapクラスを使ってアラートの表示と非表示を制御する

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("jQuery")) -.-> jquery/EventHandlingGroup(["Event Handling"]) jquery(("jQuery")) -.-> jquery/DOMManipulationGroup(["DOM Manipulation"]) jquery(("jQuery")) -.-> jquery/DataHandlingGroup(["Data Handling"]) jquery/EventHandlingGroup -.-> jquery/event_methods("Event Methods") jquery/EventHandlingGroup -.-> jquery/event_effects("Event Effects") jquery/DOMManipulationGroup -.-> jquery/dom_traversal("DOM Traversal") jquery/DOMManipulationGroup -.-> jquery/element_management("Element Creation and Removal") jquery/DataHandlingGroup -.-> jquery/ajax("AJAX Calls") subgraph Lab Skills jquery/event_methods -.-> lab-445662{{"カードバインド機能を実装する"}} jquery/event_effects -.-> lab-445662{{"カードバインド機能を実装する"}} jquery/dom_traversal -.-> lab-445662{{"カードバインド機能を実装する"}} jquery/element_management -.-> lab-445662{{"カードバインド機能を実装する"}} jquery/ajax -.-> lab-445662{{"カードバインド機能を実装する"}} end

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── index.html ## カードバインドページ
├── bootstrap.min.css ## Bootstrapファイル
├── js
├───────cardnolist.json  ## JSONファイル
├───────index.js ## 完成させるコードが記載されたJavaScriptファイル
├───────jquery-3.6.0.min.js ## jQueryファイル

WebIDEの右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

カードデータを取得する

このステップでは、jQueryのajax関数を使ってjs/cardnolist.jsonファイルからカードデータを取得する方法を学びます。

  1. js/index.jsファイルを開きます。
  2. bind関数の中に、以下のコードを追加してcardnolist.jsonファイルに対してAJAXリクエストを行います。
function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // カードデータは現在 'data' 変数に格納されています
    console.log(data);
  });
}

このコードはjs/cardnolist.jsonファイルに対してAJAXリクエストを行います。

カードバインド機能を実装する

このステップでは、カードバインド機能を実装して、ユーザーの入力と取得したカードデータを比較します。

  1. js/index.jsファイルの中で、bind(cardno, password)関数を探します。
  2. // TODOのコメントを以下のコードに置き換えます。
$.get("js/cardnolist.json", (data) => {
  let flag = data.cardnolist.some(
    (value) => value.cardno == cardno && value.password == password
  );
  if (flag) {
    $("#tip1").removeClass("fade").addClass("show");
    $("#tip2").removeClass("show").addClass("fade");
  } else {
    $("#tip2").removeClass("fade").addClass("show");
    $("#tip1").removeClass("show").addClass("fade");
  }
});

このコードはJSONファイルからカードデータを取得し、ユーザーの入力がカード番号とパスワードのいずれかと一致するかどうかを確認し、その後Bootstrapクラスを使用して適切な成功または失敗のメッセージを表示します。

カードバインド機能をテストする

  1. js/index.jsファイルを保存し、ブラウザでindex.htmlページを更新します。

  2. 有効なカード番号とパスワード(例:「001431562123561238」と「123456」)を入力し、「submit」ボタンをクリックします。

    • 成功メッセージが表示されるはずです。
表示された成功メッセージ
  1. 無効なカード番号とパスワードを入力し、「submit」ボタンをクリックします。

    • 失敗メッセージが表示されるはずです。
失敗時のエラーメッセージ

おめでとうございます!カードバインド機能を正常に実装しました。

✨ 解答を確認して練習

まとめ

おめでとうございます!このプロジェクトを完了しました。実力を向上させるために、LabExでさらに多くの実験を行って練習してください。