はじめに
2024年10月からデイトラのWeb制作コースの受講をスタートしました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
初級編DAY19の押さえておきたいポイント
ボタンクリックでアラート表示
JavaScriptやjQueryのクリックイベントに使用するタグはButton type = “button”として作成をおすすめ。
このタグを利用することで、キーボードのTabキーでボタン遷移が可能！
アコーディオンメニューを作る
CSSのclass名とJavaScriptのclass名は分けて管理しておくとコードが見やすくなる。
JavaScriptで操作するためのid名やclass名は「js-◯◯」と名前をつけておくとわかりやすい。
.next で次の要素を取り出しできる。
.slideToggle でスライド表示、非表示を同時に設定できる！
トップへ戻るボタン
画面全体をスクロールさせるイメージで実装する。
ブラウザによってHTMLタグがスクロール対象となるブラウザと、bodyタグが対象になるブラウザがあるため、両方を指定してあげる必要がある。
ドロワーメニューを作る
表示するドロワーメニューがある状態で、クリックされたらハンバーガーをバツにするクラスをつけ外し。
メニュー全体をスライド表示非表示。
後ろの画面のスクロールを無効化する。
という３つの処理を入れる。
フォームに入力された値をアラート表示
フォームの送信（submit）されると自動的にページがリロードされるのがデフォルトの処理なので、それを無効化。
inputタグとinputタグに入力された値を定数に定義。
→インプットタグに入力された値を.valで定義する。
入力された値がブランクの場合は、inputの次のpタグに文字列を表示。
入力されている場合は、inputの次のpタグはブランクにして、アラートを表示。
Trial and Error memo
トップへ戻るボタンが思うように動かない
トップへ戻るボタン作成時、お手本と同じように.animateで書いたと思うのに動かない・・・
結果、グループセレクタの書き方を誤っていた。
// 誤り
jQuery("html”, ”body")
// 正解
jQuery("html, body")細かい部分でハマることが多いな・・・慣れもあるとは思うが気をつけたい！
ただ、今回は自分でコードのどの部分が間違っているのかを少しずつ検証し、
間違っているところを見つけ出すことができた！
- 最初の.onメソッドまではちゃんとかけてるかな？
→アラートにすればちゃんと表示されるからここまではOK - scrollTop0,500msの指定はちゃんとできてるかな？
→html,bodyの複数指定ではなく、htmlだけを指定すれば動いた！ - ってことは、複数指定の方法間違ってる？！
→過去のnote見返すと、やっぱり間違ってるぅぅぅ！！
こうやって少しずつ的を絞り込んでいくことは今後も絶対あると思うから、継続していきたい！
初級編DAY19の追加で調べたいことメモ
- セレクタの複数選択方法を復習しよう
初級編DAY19の感想と記録
実際に画面に動きがつくと感動！
自分でかけるともっと感動！
最後のフォームに入力された値をアラート表示は難しかったなぁ〜
どういうものは定数で定義して処理を書いて、
どういうものはidやclassで指定して処理をするのかがちょっとわかっていないかも。
もう少し繰り返しやってみて、わからなかったら質問してみよう！
引き続きがんばるぞ！
