javascript を使用してみる_2 ポケモンカードのクイズまで 20221210作業

前回記事の続きで

JavaScript を使っていきたいと思います

//変数
let word = "CEML AI TASK FORCE";
console.log(word);
//配列
let num_b = ["one","two","three","three","three"];
console.log(num_b[0]);
//繰り返し　ループ文
let index = 0;
while(index < 4){
    //繰り返したい命令
    console.log(num_b[index]);
    index++;
}
//関数　arg の部分が引数　下の関数の実行では　6 や　３　にしています
const test = (arg) => {
    //ここに実行したい命令を書く
    if(num_b.length > arg){
        console.log("5より大きいです");
    }else{
        console.log("5より小さいです");
    }
};

//関数の実行
test(6);
test(3);

//オブジェクト　（データの塊）
const un2 = {
    color: "pink",
    size: "large",
    purfume: "mint"
};

//オブジェクトを参照してみる
console.log(un2);

//オブジェクトの　プロパティ　を参照する
console.log(un2.color);
console.log(un2.size);


//オブジェクトに　関数も入れることができる
const un2_ = {
    color: "pink",
    size: "large",
    purfume: "mint",
    //関数を作成し　オブジェクトに入れる
    goToilet: () => {
     console.log("Hello world!");
    }
};

//オブジェクトを参照してみる
console.log(un2_);

//既にある　オブジェクト　ウインドウでアラートを出す テスト動作確認の時にも使う
console.log(window.alert("アラートの内容を入れる部分です"));

//既にある　オブジェクト　document を使う
console.log(document);

//HTML の要素を取り出す 以下の方法で　ボタンの要素を取り出す
console.log(document.getElementsByTagName("button"));


//HTML　最初のボタンが押されたタイミングで以下の関数が実行を実行するという命令
document.getElementsByTagName("button")[0].addEventListener("click", ()=>{
    //命令を書く
    window.alert('最初のボタンを押していただき有難うございます')
});

//関数　作ってみたけどダメだった
const test_html = (arg) => {
    //ここに実行したい命令を書く
    //HTML　最初のボタンが押されたタイミングで以下の関数が実行を実行するという命令
    document.getElementsByTagName("button")[arg].addEventListener("click", ()=>{
        //命令を書く
        window.alert('２番目以降のボタンを押していただき有難うございます')
    });
};


test_html(1);
test_html(2);
test_html(3);
test_html(4);
test_html(5);
test_html(6);

Secondary 以降のボタンを押すと
以下のようなウインドウアラートが出てくれるようになりました！

こちらの動画を見ながら
作成しました　

addEventListener　については
1:00:30 頃から詳しく説明されています

リファクタリング

1:36:00
までの動画を見て
自分なりに書いてみました

const question = "ポケモンカードが一番高くなる時期は？";

const answers = ["1月","2月","3月","4月","5月","6月","10月","11月","12月","1月"];

const correct = "10月";

//HTMLに反映させる必要性

/*

htmlでは以下のような問題文をアラートに表示させたいので
タグの名前　div をとってくる

<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>

*/


//HTML でタグIDが　js-question　のものが　console.log で表示される
console.log(document.getElementById("js-question"));

//HTML でタグIDが　js-question　のものを　textContent で文字列を取り出し　書き換えることができる
document.getElementById("js-question").textContent = question;

//HTML でタグIDが　js-question　のものを　textContent で文字列を取り出し　書き換えることができる
console.log(document.getElementsByTagName("button")[0].textContent = answers[0]);

//定数の文字列をHTMLに反映させる
//HTMLのオブジェクトが入っている場合 $ ボタンを押す
const $button = document.getElementsByTagName("button")

/*
$button[0].textContent = answers[0];
$button[1].textContent = answers[1];
$button[2].textContent = answers[2];
$button[3].textContent = answers[3];
*/
// 上のコードを見やすくする　リファクタリング
let buttonIndex = 0
// $button.length 配列のボタン の分だけの数を取得できる
let buttonLength = $button.length;
while(buttonIndex < buttonLength){
    $button[buttonIndex].textContent = answers[buttonIndex];
    buttonIndex++;
}


//ボタンをクリックしたら正誤判定
/*
$button[0].addEventListener('click', () => {
    //ここに実行したい命令を書く
    //HTML　最初のボタンが押されたタイミングで以下の関数が実行を実行するという命令
    //命令を書く　correctという変数に答えが入っている
    if(correct === document.getElementsByTagName("button")[0].textContent){
        window.alert("正解！");
    }else{
        window.alert("不正解！");
        }
});
*/

//上のソースコードをリファクタリングする


//イベントのオブジェクト e　を利用する button[0]の内容をeとする
/*
$button[0].addEventListener('click', (e) => {
    //ここに実行したい命令を書く
    //HTML　最初のボタンが押されたタイミングで以下の関数が実行を実行するという命令
    //命令を書く　correctという変数に答えが入っている
    if(correct === e.target.textContent){
        window.alert("正解！");
    }else{
        window.alert("不正解！");
        }
});
*/


// if文の中身を関数にする
const clickHandler = (e) => {
    if(correct === e.target.textContent){
        window.alert("正解");
    } else { 
        window.alert("不正解");
    }
};

// 関数を利用したif文にする
$button[1].addEventListener('click', (e) => {
    clickHandler();
});


// $button.length 配列のボタン の分だけの数を取得できる
const buttonLength_ = $button.length;
// let buttonLength = $button.length; でボタンの要素の数を取れた
let buttonIndex_ = 0;
while(buttonIndex_ < buttonLength_){
    
    // 関数を利用したif文にする
    $button[buttonIndex_].addEventListener('click', (e) => {
        clickHandler(e);
    });

    buttonIndex_++;
}

ポケモンカードのクイズが作れました