【ハンズオンJavaScript】最速でJavaScriptを扱えるようになる１日目　クイズゲーム①

2021年 05月 27日

タグ：

JavaScript

クイズゲーム

ハンズオンJavaScriptを進めていく上での補助記事です。 (html,cssの基本が分かっていて、エディターは何を使うとか、scriptの書き方はどうするみたいな話は省略。)

最初に１２章のwebを学ぶから初め、クイズゲームを作ることを目指します。

やること：addEventListener(),getElementById(),setAttribute(),function()とthis,textContent
やらないこと：let,const,if,for,Object,アロー関数,イベントハンドラ, など

簡単なクイズゲームの作成

イベントとaddEventListener()

JavaScriptにはクリックやマウスの移動といった出来事に反応してコードを動かすことができます。このことを**イベント**と呼びます。まず最初にaddEventListenrというモノを用いて、クリックに反応して"Hello World"を出力するサンプルを確認します。

document.body.addEventListener("click",function(){
    console.log("Hello World!");
}

上記の例では、前から「場所→イベントの種類→やりたいこと」の順番に並んでいます。

場所：document.body
イベントの種類: addEventListener("click", )
やりたいこと: function(){console.log("Hello World")}

getElementById()によるID属性の指定

次に場所を指定する方法を見ていきます。
代表的なのがgetElementById() です。これはID属性によって場所を指定することができます。
また、function() 内では

this.style.CSSプロパティ名によってCSSを設定・変更する
this.textContentによってテキストを設定・変更するといったことをすることができます。

下記にコードで、正解であるAをクリックするとhtmlとcssの変更が適用されます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            width: 200px;
        }
    </style>
</head>

<body>
    <div>
        <p>問題文</p>
    </div>
    <ul>
        <li id="A">A</li>
        <li id="B">B</li>
        <li id="C">C</li>
        <li id="D">D</li>
    </ul>
</body>
<script>
    document.getElementById("A").addEventListener("click", function () {
        console.log("正解！")
        this.style.backgroundColor = "blue"
        this.style.color = "white"
        this.textContent = "正解!"
        // ついでにthisとは何かを確認する。
        console.log(this) // <li id="A">A</li>
    })
</script>
</html>

setAttribute()による属性の変更

setAttribute()を使うと、属性を変更できることを説明し、class属性を追加してみます。クリックするとAのクラス属性にtrueが設定され、cssの適用を受けるようになることが確認できます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            width: 200px;
        }
        .true {
            background-color: blue;
            color: white;
        }
    </style>
</head>

<body>
    <div>
        <p>問題文</p>
    </div>
    <ul>
        <li id="A">A</li>
        <li id="B">B</li>
        <li id="C">C</li>
        <li id="D">D</li>
    </ul>
</body>
<script>
    document.getElementById("A").addEventListener("click", function () {
        console.log("正解！")
        this.setAttribute("class","true")
        this.textContents = "正解!"
    })
</script>
</html>

これでクイズゲームの骨格ができましたので、htmlとcssを整えれば最低限の動きを作れると思います。