JavaScriptで遊ぶ【4】

JavaScriptの画像【4】 スキル

楽しいお正月も、早3日。
あっという間ですね。

でも、まだまだ2022年は始まったばかりです。

今日は皆さんに、クイズを用意しました。
名付けて、お正月クイズです。

すっごく難しいですよ!
全問正解できたら天才かもしれませんね。


これもJavaScriptで、
COMOLYの学習会でやった内容をベースに加工して作っています。

名作クイズ番組に学ぶ

少し動画制作の話をしますが、
ちょうどYouTubeの動画に、
クイズのコーナーを入れてみようかと話していたところでした。

それで、気がついたんですけど、
昔の名作クイズ番組はコンテンツの質が高かったですね。

当時は何も考えずに見ていたんですが、
今思うと、番組を面白くするために細かいところまで計算されていたのですね。

演出や見せかたなど、
こういった番組から学ぶことは沢山ありそうです。

学習用メモ

さて、学習用メモですが、
今回のテーマはDOMでしょうか。

DOM操作

DOMとは Document Object Model の略でHTMLやXMLを取り扱うための「API」です。

DOMを利用する事で、HTMLの探索やスタイルの変更・イベントの設定・HTML要素の取得の他に、振る舞いを変えたり、ユーザー操作時の処理を設定することができます。

https://qiita.com/tfrcm/items/8173977de75da1b0e5e9#:~:text=DOM%E3%81%AE%E6%93%8D%E4%BD%9C%E3%81%A8%E3%81%AF,%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E4%BA%8B%E3%81%A7%E3%81%99%E3%80%82

HTMLを操作するものですね。

イベントハンドラ

<button id="btn">テキスト</button>
btn.addEventListener('click', function (e) {
  console.log(e.target.textContent);
});

あとイベントパンドラ。
このセットで、ボタンをクリックした時に「テキスト」がとれます。

超難問【お正月クイズ】

それでは前置きはこの辺にして、
やってみましょう。

超難問【お正月クイズ】です!

5問あります。
果たして何問正解できますかね?

まとめ

いかがでしたか。

えっ、簡単だったって!?

まじですか・・・。
天才なんじゃないですか?


なかなかやりますね。
しかし、次はもっと難しい問題を用意しないといけないですね!

タイトルとURLをコピーしました