0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

(MDN)画像の切り替え

Posted at

お疲れ様です。

今日はMDNというサイトの中にある、「Javascriptの基本」というページにて、Javascriptの初歩について勉強していました。
その中にあった、画像を切り替えるという項目を実践してみました。
切り替えると言ってもイベントを使っての切り替えです。

161.png
162.png
163.png

getAttribute…指定された要素の属性の値を返す
setAttribute…指定された要素の属性の値を設定する。すでに設定されている場合は更新される。


1枚目が切り替え前の画像で、マウスを画像に重ねると2枚目に切り替えられるというコードです。
ここのイベント内容はクリックでも可能です。

そして今回コードを書き終えた後、コメントアウトをコード内容を復習しながら自分で書き起こしました。
「1冊ですべて身につく~」の本にもありましたが、コードが長くなりそうな時や複雑になりそうな時は、まず日本語にして整理してから書いてみるとよいとのことでした。今回はこのコードは何をしているのかを読んで、内容を復習しながら書いてみましたが、自分の言葉で書いてみるのは、なかなかいい復習だなと思いました。

一度コードを書いて、結果思い通りになったとしたら、次に進んだりしがちなのですが、このコードでは何をしているのかを見返すいいきっかけになったと思います。
考え方の訓練にもなると思うので、続けていこうと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?