Web制作初級編 DAY18~19(復習)　DAY21〜22jQuery実践課題

butterspring

2024年9月20日 21:37

日記

動いた。
Menuを押すとMenuリストのところに飛んじゃうけどもちゃんとドロワーメニューが表示される。
画面右下に置いたTOPボタンを押すと一番上までスクロールしてくれる。
よかった。まだ詰まってない。まだやれることがわかってよかった。

調べれば簡単に実装できるコードを、数時間〜数日かけて自作する行為は無駄です。

デイトラ講義の一文より

DAY22のモーダルウィンドウ、、、あまりにもやることが膨大に見えて気持ちが萎えたので、、、明日以降にやるとしよう。
今日はここまで。

まとめ

クリックイベント（クリックすると何かが起こる）

jQuery("セレクタ").on("click", function() {
//ここに処理を書く
});

ホバーイベント(ホバーした時と外した時と２つの処理を書く）

jQuery("#js-title").on({
 　mouseenter: function () {
　　　jQuery(this).css("color", "orange");
　 },
   mouseleave: function () {
     jQuery(this).css("color", "#082b48");
   },
});

クリックイベント　（ボタンクリックでアラートを表示しよう）

javascript
document.querySelector("#js-button-alert").addEventListener("click",function(){
   alert("おはよう！")
});

jQuery
jQuery("#js-button-alert").on("click",function(){
  alert("おはよう！")
});

・button type="button"　　　
jsと連携し、クリックされた際に任意の処理を実行することができる

button type="submit"　
ボタンが押された際にデータをサーバーに送信する役割を持つ

アコーディオンメニュー（スライドトグル）

(CSSで[display: none;]で最初隠れてる説明文が出たり消えたりする)

jQuery(".js-accordion").on("click",function({
       jQuery(this).next().slideToggle();
});

<button type="button" class="accordion__title js-accordion">質問</button>

accordion__title と js-accordion　というふうに
cssで操作する[accordion__title]とjsで操作する[js-accordion]というふうにクラス名を２つ書いた方がわかりやすい。

・トップへ戻るボタン

jQuery("#js-button-top").on("click",function(){
     jQuery("html, body").animate({ scrollTop: 0},500);
})

>jQuery("html, body")
html 要素と body 要素を対象にアニメーションを実行します。
>.animate({ scrollTop: 0 }, 500);
スクロール位置を0（ページの一番上）に0.5秒で移動。

ドロワーメニュー(ハンバーガー)

jQuery("#js-button-drawer").on("click",function(){
    jQuery(this).toggleClass("is-checked");
    jQuery("#js-drawer").slideToggle();
    jQuery("body").toggleClass("is-fixed");
})

    jQuery(this).toggleClass("is-checked");

クリックされた要素（this で指す要素）に "is-checked" というクラスを付けたり、外したりするという動作を行う。cssには次のように書かれている。

.button-drawer.is-checked {
  background-image: url(../img/icon-cross-mark.png);
}

jQuery("#js-drawer").slideToggle();

IDが "js-drawer" の要素に対して、スライドして表示・非表示を切り替える動作を行います。

jQuery("body").toggleClass("is-fixed");

Webページのbody要素に対して、"is-fixed" というクラスを付けたり外したりするという動作を行う。cssには次のように書かれている。

body.is-fixed {
  overflow: hidden;
}

フォーム送信

標準ではフォームの送信によってページがリロードされるのでその動きを無効化するための記述をする。次のように書く。決まりごとみたいなもの。

jQuery("#js-form-name").on("submit",function(e){
　　e.preventDefault();

　　return false;
})

<input type="text" id="js-input-name" class="input" placeholder="山田 太郎">

<input>: HTMLの要素で、HTMLのフォーム内でテキスト入力欄を作成するものです
type="text": 入力欄の種類を指定します。この場合、"text" は一般的なテキスト入力欄を意味します。
id="js-input-name": この入力欄を一意に識別するためのID属性です。JavaScriptなどでこの要素を操作する際に使用します。
class="input": この入力欄にCSSスタイルを適用するためのクラス属性です。CSSで.inputというクラスに対してスタイルを定義することで、この入力欄の見た目を変更できます。
placeholder="山田太郎": 入力欄に何も入力されていないときに、薄い文字で表示されるヒントとなるテキストです。ユーザーが入力する前に、どのような情報を期待しているかを示すために使用されます。

jQuery("#js-form-name").on("submit",function(e){
　　e.preventDefault();

　　　// 入力欄を定数nameinputと定義
　　const nameInput = jQuery("#js-input-name");
　　　//入力した内容を定数yourNameと定義
　　const yourName = nameInput.val();
　　　// 入力内容が空の場合の処理を書いていく
　　if (!yourName) {
　　　nameInput.next(".error-message").text("必須項目です")
　　　return;
　　}
　　　// 入力があった場合の処理を書いていく。
　　　// 文字列を空にすればエラーメッセージは消える。
　　nameInput.next(".error-message").text("");
　　　// 文字列``の中に変数を記述したい場合は${}で囲む
　　alert(`${yourName}さん、こんにちは`);

　　return false;
})

const nameInput = jQuery("#js-input-name");
- #js -input-name というIDを持つ入力欄（例えば、テキストボックス）をjQueryを使って取得し、nameInput という変数に代入しています。この変数を使って、後ほど入力された名前を取り出します。
const yourName = nameInput.val();
- nameInput 変数で表される入力欄に入力された値（つまり、ユーザーが入力した名前）を取得し、yourName という変数に代入しています。
if (!yourName) { ... }
- yourName の値が空（何も入力されていない）かどうかを判定しています。
- もし空であれば、if 文の中の処理が実行されます。
nameInput.next(".error-message").text("必須項目です");
- nameInput の次の要素（通常はエラーメッセージを表示する場所）を探し、その要素のテキストを「必須項目です」に変更しています。つまり、名前が入力されていない場合にエラーメッセージを表示します。
nameInput.next(".error-message").text("");
- nameInput の次の要素のテキストを空文字にしています。つまり、エラーメッセージを消去します。
alert(${yourName}さん、こんにちは);
- yourName 変数に格納された名前を使って、アラートで挨拶を表示します。$ {} の部分はテンプレートリテラルと呼ばれ、変数を文字列の中に埋め込むことができます。