【受講記録】デイトラWeb制作コース初級編DAY16

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

初級編DAY16の押さえておきたいポイント

DOM

HTMLなどのドキュメントにJavaScriptからアクセスするための仕組み

HTML要素の取得

取り出しの方法はおおきく、2つ。

• 汎用的に使えるquerySelector(“セレクタ”)
  セレクタの書き方はCSS同様だが、””ダブルクォーテーションの中に書く。
  また、属性を指定して取得するときにHTML内で””が使われているものをそのまま””で囲うとエラーになる。
  そのときは’’シングルクォーテーションで囲うようにすること。
• Id,class,tagに特化したgetElementBy~~
  querySelectorとは異なり、()内はセレクタ指定時の.や＃は不要。
  　getElementById()
  　getElementsByClassName()
  　getElementsByTagName()

// idで取得
document.querySelector("#id名")
document.getElementById("id名")
// classで取得
document.querySelectorAll(".class名")
document.getElementsByClassName("class名")
// タグで取得
document.querySelectorAll("タグ名")
document.getElementsByTagName("タグ名")
// 属性で取得
document.querySelector("[属性]")

汎用的なquerySelectorを使った方がよい。。

なお、querySelector メソッドは、一致した一番最初の要素が取得されるので、
すべて取得するには、querySelectorAllメソッドを使う。

取得した要素を加工する

JavaScriptで行う処理のほとんどは、取得→加工→出力の流れになる。

innerText()を使うことで、テキスト文字を変えることができる。
JavaScriptで書き換えを行うことを「DOMを操作する」という。

innerText以外にも操作するためのメソッドはたくさんある。

• appendChild()　指定された親の子の末尾に子を追加する
  今回は指定したdivタグの中に、定義したaタグのボタンを追加した。
• setAttribute() 属性を指定する
• createElement()　タグ（型）を指定する

ボタンの操作

.click()　Clickメソッドを使えば、マウスでクリックせずJavaScriptでクリックできる

イベント監視

ページが読み込まれた時やクリックされた時など、特定のイベントをきっかけに処理を実行させる。

•  onloadイベント　ページの読み込みが完了したらイベント発生
• .addEventListener() 指定した動作が実行されれたときに指定したイベントを発生させる

Trial and Error memo

aタグの追加はできたが属性が付与されていない

ログインボタンの追加を書いてみたときに、
createElementでaタグを追加、innerTextでログインの文言を付与したあと、
setAttributeで属性を指定したときに、()の前に=を入れてしまっていたため、属性が付与されていなかった。

//間違い
button.setAttribute = ("class", "btn");
//正解
button.setAttribute("class", "btn");

innerTextは=なので、勘違いした・・・しっかり覚えておこう！

初級編DAY16の追加で調べたいことメモ

• outerHTMLってなにかよくわかっていないので調べる
• eventListenerについて、click以外には何があるのか調べる

初級編DAY16の感想と記録

前回までは、基本的な概念でconsoleとのにらめっこだったけれど、
今回はHTMLの画面上でに実際の動きがみえて、おおJavaScript触ってる〜！という実感がとても楽しかった！

ただ、JavaScriptの書き方のルールがいまいち感覚つかめていないので、しばらくはひとつひとつをよく観察しながらコード書いていきたい。
慣れれば違和感を感じるようになるはす。

あと最初のjsファイルのの読み込みとかは、覚えていたので・・・
解説見ずに自分で設定してconsole logで設定の確認までできた！
すごい簡単な部分だけど、できる！と思えるとうれしい！
学習のモチベーションってこういうことなんだな！

引き続きがんばろう！

DAY16 完了日　：　2024年11月2日（土）
DAY16 所要時間　：　1.5h
Web制作コース 初級編Total ：　31h