目次
序文
この記事は、JavaScript の if、switch、while、do-while および構文の宿題であり、知識を習得するためのテストでもあります。
マインドマッピング
1. 人材リソース
css コード部分: 後続のすべてのジョブでこのスタイルが使用されるため、このファイルは style.css ファイルに保存されます。
body {
background-color: #523620;
color: #fff;
font-family: 微软雅黑,黑体;
font-size: 150%;
margin: 0px 0px 0px 0px;
}
h1 {
background-image: url('images/bullseye-logo.png');
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
height: 109px;
width: 643px;
margin: 40px auto;
}
#teacher {
float:right;
margin:135px 30px 0px 0px;
}
#page1 {
background-color: #fecc6f;
height: 730px;
padding: 10px;
min-width: 779px;
}
#answer {
background-color: #425a5a;
border: 25px solid #523620;
border-radius: 20px;
padding: 40px 20px;
margin: 0px auto;
height: 370px;
width: 600px;
text-align: center;
}画像部分は画像フォルダーにあります。
2. if文の練習
ページにテキストを出力する基本がわからない場合は、私の以前の記事を読んでください。
2.1 コードの解釈:
ここでは if ステートメントと else if ステートメントの演習を行います。
構文形式は次のとおりです (ここでの使用法は C 言語と一致しています)。
もし{
コードブロック
}
そうでなければ、{
コードブロック
}
<!doctype html> <html lang="cn"> <head> <meta charset="utf-8"> <title>if语句练习</title> <link rel="stylesheet" href="style.css" /> <script> window.onload= function(){ var cash= 160; //口袋里的现金 //1.写出if-else语句，分别分为三种情况： //现金大于等于150；现金大于等于100并小于150；现金小于100 if(cash>=150){ result= '大吃一顿团票看电影'; } else if (100<=cash&&cash<150){ result= '吃开封菜团票看电影'; } else if(cash<100){ result= '宿舍吃泡面电脑看电影'; } //将结果输出到网页中 var el = document.getElementById('answer'); el.innerHTML = '决定: ' + result; } </script> </head> <body> <section id="page1"> <h1>Bullseye</h1> <img src="images/teacher.png" id="teacher" alt="teacher" /> <section id="answer"></section> </section> </body> </html>
2.2、結果の表示:
3. switch ステートメントの練習
3.1、コードの解釈:
これは switch ステートメントの練習です
構文形式:
スイッチ(判定条件)
{
ケース条件 1: コードが高速である; ブレーク;
ケース条件 2: コード ブロック;ブレーク;
}
デフォルト: code block; //どの条件も満たされない場合は、コード ブロックを実行します
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>switch语句练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload= function(){
var msg; //显示的信息
var level = 2; //当前第几关
//1.用level作为switch后的表达式，根据level值写出完整switch语句
switch (level){
case 1:msg = '第一关';break;
case 2:msg = '第二关。继续！';break;
case 3:msg = '最后一关';break;
case 4:msg = '好运';break;//默认
}
//输出到页面
var el = document.getElementById('answer');
el.textContent = msg;
}
</script>
</head>
<body>
<section id="page1">
<h1>Bullseye</h1>
<img src="images/teacher.png" id="teacher" alt="teacher" />
<section id="answer"></section>
</section>
</body>
</html>
3.2、結果の表示:
4.while ループ演習
4.1、コードの解釈:
これは while ループの練習です
構文形式:
while(ループ条件){
コードブロック。
ループの条件を制御します (i++)。
}
`${i} * 5 = ${result}<br>` ここで、` ` はステーション識別子を使用するときに使用する必要がある記号です
${} は位置記号を表します。Python を学習したことがある方なら、これが f"{name}" で初期化されることがわかるでしょう。これは、上記のコードの変数の値を埋めることを意味します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>while循环练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){
var i = 1; //设置循环变量初始值
var msg = ''; //显示的信息
//1.用while循环分别计算1至9的5倍
//将“ix5=?”字符串添加到变量msg中，并添加换行标签。
while (i < 10) {
const result = i * 5;
msg += `${i} * 5 = ${result}<br>`;
i++;
}
//用变量msg的值替换原网页中显示的信息
//2.写完1-2后将下面语句中的注释符删除
document.getElementById('answer').innerHTML = msg;
}
</script>
</head>
<body>
<section id="page1">
<h1>Bullseye</h1>
<img src="images/teacher.png" id="teacher" alt="teacher" />
<section id="answer">1x5=5<br>2x5=10<br>……<br>9x5=45</section>
</section>
</body>
</html>
4.2.結果の表示:
5.do-whileループエクササイズ
5.1、コードの解釈:
これは do-while ループの演習です
構文形式:
する{
コードブロック。
}while(制御条件);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>do-while循环练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){
var i = 1; //设置循环变量初始值
var msg = ''; //显示的信息
//1.用do-while循环分别计算1至9的5倍
do{
const result = i * 5;
msg += `${i} * 5 = ${result}<br>`;
i++;
}while(i<=9);
//用变量msg的值替换原网页中显示的信息
//2.完成第1步后将下面语句前的注释符删掉
document.getElementById('answer').innerHTML = msg;
}
</script>
</head>
<body>
<section id="page1">
<h1>Bullseye</h1>
<img src="images/teacher.png" id="teacher" alt="teacher" />
<section id="answer">1x5=5<br>2x5=10<br>……<br>9x5=45</section>
</section>
</body>
</html>
5.2、結果の表示:
6.forループ演習
6.1、コードの解釈:
for ループの演習は次のとおりです
構文形式:
for(定義; 条件判断; 反復){
コードブロック。
}
文字の結合 + "<br>" は改行を表します。文字の結合には + 記号が使用されます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>for循环练习</title>
<link rel="stylesheet" href="style.css" />
<script>
window.onload=function(){
var scores = [90, 70, 50]; //游戏中每一关得分
var arrayLength = scores.length; //数组长度
var roundNumber = 0; //当前第几关
var msg = ''; //显示的信息
//使用for循环遍历数组scores的元素，显示每关的得分。
//1.写出for循环的条件
//2.存放当前关数
//3.将“第几关”字符串添加到变量msg的值中
//4.将数组scores中当前关的得分添加到变量msg的值中，并添加换行标签
for (var i = 0; i < arrayLength; i++) {
roundNumber += 1;
msg += '第' + roundNumber + '关'+ ':';
msg += scores[i] + '<br>';
}
//用变量msg的值替换原网页中显示的信息
//5.写完1-4后将下面语句前的注释符删掉
document.getElementById('answer').innerHTML = msg;
}
</script>
</head>
<body>
<section id="page1">
<h1>Bullseye</h1>
<img src="images/teacher.png" id="teacher" alt="teacher" />
<section id="answer">第1关：10<br>第2关：20<br>第3关：30</section>
</section>
</body>
</html>
6.2、結果の表示:
7. まとめ
この記事は主に js の基本構文の演習であり、コードの印象を高め、知識をより深く習得できるように、興味深い例を使用して練習します。
一日一言
ダンスのない毎日は人生の失敗です。
私の学習ノートがお役に立ちましたら、「いいね！」や「保存」をしていただけますと幸いです。ありがとう。