問題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>
コメント