目次
こんにちは、あおしまロボです🤖
10月に入って後期の授業が始まりました。
後期からはJavaScriptの授業が加わり、よりフロントエンド的なことを専門的に学ぶことになります。
そしてつい先日、第1回目のJavaScriptの授業がありました。
その時の授業でやったことと、それを踏まえて書いたコードについて掲載していこうと思います。
学んだこと１：alertとconfirm
window.alert()とwindow.confirmについて学びました。
正式にはwindowオブジェクトについてなのですが、実際授業で書いて見たコードがこの二つです。
こちらは独学だとあまり着目しない内容なので、windowオブジェクトにどんなものがあるのかも自主的に調べていけたらと思います。
学んだこと２：getElementByとstyle付与
getElementBy〇〇と.styleついて学びました。
私はgetElementByの形で要素取得することをあまりしてこなかったので、ElementとElementsと書くことがあるのは知りませんでした。
エラーの原因で多いようなので間違えず覚えていたいです。
.styleはキャメルケースでプロパティを指定しなければいけないので、background-colorやfont-sizeをうっかりそのまま書かないようにしたいものです。
学んだこと３：addEventListener
イベントの発動条件を決めておくものです。
これが出てくるとやはり楽しいですね。
今回はclickとmouseover、mouseoutの３つのイベントを授業内で学びました。
こちらもwindowオブジェクトと同様に、自主的にイベント知識を増やしていきたいと思います。
学んだこと４：set(get)Attribute
属性を付与、取得するものでした。
授業では画像のsrcを取得、条件で差し替えというような使い方をしました。
いろんな用途があるようで、しっかりと知識を深めたいです。
書きかえてみたプログラム
授業で学んだことを踏まえて、授業の演習で行ったプログラム改造、または書き換えたものを二つ用意しました。
※いずれもGitHubにあげたリンクです
こちらはwindow.confirmを使用して書きました。
リロードするたびにアラートで背景色を反転させるか聞かれるのですが、
リロードしてもその前に選んだ色が保持されるようにしてあります。
こちらはもともとホバーで画像が切り替わるものだったのですが、クリックでも切り替わるように書きました。
さいごに
念願のJavaScriptの授業が始まったので、予習復習を欠かさずに勉強していきたいと思います。
以上、あおしまロボでした🤖
