はじめに
JavaScriptについては初投稿。学習３日目。理解に時間がかかったところを中心にまとめる。とにかく、新しい言葉が多くて、中々頭に入らない。
JavaScriptで何ができるの？
HTMLを操作できる。操作とは、背景色を変えたり、プルダウンメニューを表示させたり。今回はそのHTMLの操作について少し説明をする。
DOM
DOMとはDocument Object Modelの略で、HTMLのデータを解析して、データを作成する仕組みのこと。JavaScript(以降、JS）では、DOMを操作することでHTMLを操作している。
操作についてコードを書くときに、必要な合言葉がある（自作）
〇〇に、△△したら、□□する
つまり、「ユーザーが何をした時に、どんな動きをするのか」をJSで操作をする。
以下、この合言葉を意識しながら、説明していく。
○○に
操作をするにしても、どこに操作をするのか、JSで定義をしてあげなければならない。そこで、HTMLから何を頼りにするかだ。
id名やclass名は指定すれば、簡単に要素にたどり着くことができる。これは、CSSで装飾する感覚に似ている。
documentオブジェクトのメソッドを使う。Documentオブジェクトはブラウザにある、windowオブジェクトの一つ。ブラウザ上で表示された、情報を操作することができる。
①getElementById("id名")
→HTMLから( )に入れたid名の要素を取得する。
②getElementsByClassName("class名")
→HTMLから( )に入れたclass名の要素を取得する。
※Elementsと複数形になっている点に注意。同じclass名はいくつでもつけられるので、初めから複数個取得する想定。一方、同じid名は一つのHTMLファイルには存在し得ないので、Elementは単数形。
③querySelectorAll("セレクタ名")
→HTMLから( )に入れたセレクタを全部取得する。
※Allを取ると、指定したセレクタの一つめだけを取り出すことになる。
const note = document.getElementById("text")
上記のコードは、HTMLファイルのidがtextの要素をnoteという変数に入れる、となる。documentオブジェクトの中のメソッドを使って、取得しているので、必ず、「document.」をつける。
一つ一つのメソッド名は長いが、どれもHTMLの要素を取得するだけの処理だと言うことを意識する。
△△したら
ここでは、ユーザーが何をしたら、JSの処理が動くのかを定義する。具体的には、クリックをしたらやマウスのカーソルを合わせたらなどがある。
addEventListenerメソッドを使う。
要素.addEventListener("イベント",関数)
イベントとは、ブラウザ上で起きた出来事。単純にクリックしたや再読み込みしたなど。
要素とは、「〇〇に」のこと。
つまり、コードを書くと、
note.addEventListener("click",function(){})
先ほど定義したnote（HTML上でid="text"となっているもの）をクリックしたら、となる。
□□する
ここでは、実際にHTMLに何かをさせる処理を説明していく。
具体例としては、
①要素.setAttribute("属性","値")
→要素の開始タグの中に、属性と値を追加（値の変更）する。
②要素.removeAttribute("属性","値")
→要素の開始タグの属性と値を削除する。
要素とは、「〇〇に」のこと。
まとめ
const note = document.getElementById("text") #HTMLのidがtextに
note.addEventListener("click",function(){ #クリックすると
note.setAttribute("style","background-color:red") #背景色を赤にする
})
ポイント
- 要素を取得する、イベントを指定する、動作させる。の３段階。
- ○○に、△△したら、□□する。
最後に
JSはコードが長くて、ごちゃごちゃするが、一つのコードが行っている処理は一つなので、落ち着いて読み解く。
合言葉に当てはまる言葉で、大喜利にしないで（笑