This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 1 year has passed since last update.

jQuery課題

jQuery

Last updated at 2022-10-18Posted at 2022-04-06

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=○○○○○○○
※○○○○○○○には郵便番号が入ります。