30歳から目指すキャリアチェンジ

「30歳からキャリアチェンジ」を目標に英語・プログラミング学習をしています。

プログラミング・英語学習:7日目

〇前書き

なんかYoutubeが激重でCPU使用率90%張り付きとかになって困ってるzio_ttです。

何でこんなに重いんだろう…最近PCの調子悪いんですよね。

買い替えるにはちょっと予算足りないかな。

プログラミングスクールとかの検討もしないといけないので我慢です。

 

〇2日目の記録(Python

本日はHTMLに力を入れてみました。

ChatGPT君による学習です。

 

HTML

今日やった内容は

こんな感じでJavaScriptばっかりです。

全く触ったことなかったのでかなり新鮮でした。

全て紹介すると長くなるので少しだけ説明します。

 

JavaScriptの基礎構文

こんな感じです。

まぁ、プログラミングにおいてはド定番の内容なのでイベントとDOM以外は

かなーりとっつきやすかったです。

正直イベントが一番詰まりました。

変数~関数は細部こそ違うものの他のプログラミング言語と同じように感じました。

C++Pythonぐらいしか分かりませんが)

 

なのでイベントについて紹介します。

もう難しい…

この辺りは普段からインターネットに触れていれば何となく理解できます。

ただ、「イベントバブリング」というのが厄介ものでした。

なんのこっちゃ分からん!となるかもしれませんが、

要するに親要素に赤いbox、子要素に黄色のcircleとして、

赤いboxにmouseover、つまりマウスカーソルを赤い□の上に持ってくるとします。

その時に「赤いbox」などテキストを表示したり何かアクションを起こすのがイベント

赤い□の中に黄色の〇があると、親要素のイベントが優先されるので、

「黄色のcircle」というテキストが表示したくても「赤いbox」と表示されます。

これが「イベントバブリング」です。

わざとイベントバブリングを起こすこともあれば、

この例のようにイベントバブリングが起こると困る場面もあります。

そういったとき有効なのが「イベントキャプチャリング」です。

まぁ簡単にいうと優先度付けですね。

イベントキャプチャリングの例

このように、イベントを扱う場合は要素の親・子関係などを気にする必要があります。

 

〇総括とか

今日はHTMLの「イベント」について紹介しました。

明日は久々にコーディングテストでもやってみようかと思います。

(仕事が普通に終わってくれれば)