Javascript

コードを詳しく見ていこう

前回書いたコードについて詳しく説明していきます。

  • getElementById()
  • addEventListener()
  • アロー関数

getElementById()

・昨日の続きでコードについてもっと詳しく見ていきましょう。

https://teatree-blog.com/980/javascript/

・まずは document.getElementById('target’)の部分です。これは単にtarget要素を指定しています。

・documentは文書全体のことを意味し.(ドット)でつなげてgetElementByIdで指定したidを持った要素を探してとなり(‘targt’)とするとid属性を持った’targetが呼び出されます。

・他にもたくさんの命令がありますが今回使ったdocumentやgetElementById()はよく使われるのでしっかりと覚えておきましょう。

addEventListener()

・次にaddEventListener()はクリックしたら処理をしてというような命令で今回はクリックしたら赤色に変えるような命令を書いています。

・EventListenerは何かが起こったら何かしらの処理をするという仕組みのことなので文字通り’target’に対して処理を追加してというような命令になります。

・起こすイベントを変えることもできるので例えばdblclickとするとダブルクリックによって処理を開始させることができます。

・またいろいろな処理をまとめて書くための関数という仕組みで書かれているので処理の内容を複数書くことができます。

・例えばクリックしたら丸くなるという処理を追加したい場合、処理を{}内に続けて書いていきますdocument.getElementById('target').style.borderRadius = '50%’;としてあげれば丸いアイコンのような形に処理することができます。

アロー関数

・関数を書く場合いろいろな書き方がありますが今回のように()や=>, {}を組み合わせたような形をアロー関数と言います。

・アロー関数は使う条件など複雑なのでこういったものを使うんだなぁくらいで覚えて起きましょう。

・最近ではよく使われるので追々学んで行きます

-Javascript