jQuery課題 #jQuery

jQuery課題用フォルダ作成

jQuery課題を始める前に、課題用のフォルダを作成します。
VSCodeでProgrammingフォルダを開きましょう。
そして、tasksフォルダをクリックして、フォルダ作成マークをクリックし、新しいフォルダを作成して、jQueryと名前を付けましょう。

これでjQuery課題用のフォルダが完成しました。

課題提出方法

以下の手順で、Discordの個別テキストチャンネルに課題を提出してください。

①各課題ごとのフォルダ作成

各課題には、指定したフォルダ名が記載されております。
そのフォルダ名のフォルダをtasksフォルダ下のjQueryフォルダ内に作成してください。
例：フォルダ名「〇〇〇〇_text」
〇〇〇〇の中には、皆さん自身のフルネームを名前を入力してください。

②作成したフォルダをzip形式に圧縮

zip化の方法
・Macの方向け
・Windowsの方向け

③Discordの個別テキストチャンネルへ送信

圧縮したzipファイルを個別テキストチャンネルへ送信してください。

課題を進める上での注意点

インデントを意識してください。
インデントなどでは、半角スペースを使用してください。
調べたことをコピペするだけではなく、しっかりとコードの意味を理解してから使用しましょう。
課題ごとに記載されている検索ワードは、詰まるまでなるべく見ないようにしましょう。

課題提出時の注意点

課題を提出する時は、業務で誰かに提出することをイメージして課題を提出しましょう！
課題はできたものから順次提出してください。
課題と関係のないファイルやフォルダは、提出するフォルダ(zipファイル)内に入れないでください。
提出する前に、正しく画像などが反映されているかの確認をしてください。
課題提出時はどの課題を提出するのかを明記してください。
例：
h1タグの使い方
pタグの使い方
brタグの使い方
上記課題を提出します。

テキストの変更

フォルダ名：「〇〇〇〇_text」
〇〇〇〇にはご自身のフルネームを入力してください。

htmlファイルでp要素を作成し、その内容をjQueryを使用して書き換えてください。
例)

★検索ワード
・jQuery テキスト変更

新しいクラスの追加

フォルダ名：「〇〇〇〇_new_class」
〇〇〇〇にはご自身のフルネームを入力してください。

id="new-color"を指定したdiv要素にclass名add-classを追加してください。

★検索ワード
・jQuery クラス追加

要素の追加

フォルダ名：「〇〇〇〇_add_elem」
〇〇〇〇にはご自身のフルネームを入力してください。

id="add-elem"を指定したul要素に3つのli要素を追加してください。

★検索ワード
・jQuery 要素追加

要素の削除

フォルダ名：「〇〇〇〇_delete_elem」
〇〇〇〇にはご自身のフルネームを入力してください。

id="delete-elem"を指定したdiv要素を削除してください。

★検索ワード
・jQuery 要素削除

自動住所入力

フォルダ名：「〇〇〇〇_postal_api」
〇〇〇〇にはご自身のフルネームを入力してください。

郵便番号検索APIを使用して、以下の要件を満たすプログラムを作成してください。

・郵便番号が入力されたときに、入力された郵便番号によって都道府県、市区町村、番地以降に自動で住所が入力されるようにしてください。

○注意点
・郵便番号の入力の有無は、郵便番号のinput要素をblurイベントで判定してください
・郵便番号はハイフンなしの半角数字で入力させてください
・郵便番号が不正な場合は、入力欄(郵便番号・都道府県・市区町村・番地以降)を初期値に戻して、アラートを出してください。
・郵便番号のアラート例：郵便番号はハイフンを入れず、半角数字で入力してください。
・都道府県の入力欄はセレクトボックスを使用してください
・見た目を厳密に合わせる必要はありません

・郵便番号検索APIのURL
https://zipcloud.ibsnet.co.jp/api/search?zipcode=○○○○○○○
※○○○○○○○には郵便番号が入ります。