【初心者向け】javascript問題(出力系)

javascript

2024.05.042023.08.16

問題1 : 開発者ツールにデバック
問題2 : アラート表示
問題3 : 要素に出力
問題4 : 値の変更
問題5 : 実践問題

問題1 : 開発者ツールにデバック

下記のソースコードの変数numの値を、開発者ツールに出力してください。

let num = 777;

開発者ツールの開き方は、Windowsの場合は「F12」を押下すれば開きます。

Macの場合は、「Command + Option + I」で開きます。

参考ソース

let num = 777;
console.log(num);

問題2 : アラート表示

「こんにちは」という文字列をアラート表示してください。

alert("こんにちは");

問題3 : 要素に出力

下記ソースコードの「id：color」に「赤色」の文言を表示してください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="color">色の名前を出力します。</div>
</body>
</html>

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="color">色の名前を出力します。</div>
</body><script> let color = document.getElementById("color"); color.innerHTML = "赤色"; </script> </html>

document.getElementById();でid名がcolorの要素の取得をしています。

取得した要素に対して、innerHTMLメソッドを使用して「赤色」を出力しています。

問題4 : 値の変更

下記のソースコードの入力欄の値の「赤色」を「黄色」にjavascriptで変更してください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="text" id="color" value="赤色" />
</body>
</html>

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="color" value="赤色" />
</body>
<script>
let color = document.getElementById("color");
color.value = "黄色";
</script>
</html>

「要素.value=値」で値を更新できます。

問題5 : 実践問題

下記画像のように、ユーザーが入力した値が「hello」であれば、「正解」という文字を出力してください。「hello」でなければ、「不正解」を出力してください。
出力するタイミングは「解答」ボタンを押したら、出力します。

ヒント

条件分岐のif文を使用します。

if () {
  //正解の処理
} else {
  //不正解の処理
}

「ボタンをクリックしたら」を実現するためにはイベント処理を使用します。

answer_btn.addEventListener('click', function(){
  //ボタンをクリックしたら実行する処理
}

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>「こんにちは」を英語(小文字)で何というか解答してください。</div>
  <br/>
  <div>
    <input type="text" id="hello" value="" />
    <input type="button" id="answer_btn" value="解答" />
  </div>
  <br/>
  <div id="result" style="color:red"></div>
</body>
<script>
  let hello = document.getElementById("hello");
  let answer_btn = document.getElementById("answer_btn");
  let result = document.getElementById("result");
  answer_btn.addEventListener('click', function(){
    if (hello.value === "hello") {
      result.innerHTML = "正解";
    } else {
      result.innerHTML = "不正解";
    }
  });
</script>
</html>