Table of contents
Preface
This article is a homework exercise for if, switch, while, do-while, and for syntax in JavaScript. It is also a test for me to master my knowledge.
mind Mapping
1. Job resources
css code part: This file is saved in the style.css file, because all subsequent jobs will use this style
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;
}The picture part is in the images folder:
2. If statement practice
If you don’t know the basics of outputting text to a page, you can read my previous article:
2.1 Code interpretation:
Here is an exercise on if statements and else if statements
The syntax format is (the usage here is consistent with the C language):
if{
code block
}
else if {
code block
}
<!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, Result display:
3. Switch statement practice
3.1, code interpretation:
Here is an exercise on the switch statement
Syntax format:
switch(judgment condition)
{
case condition 1: code is fast;break;
case condition 2: code block;break;
}
default: code block; //If none of the conditions are met, execute the 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, Result display:
4.while loop exercise
4.1, code interpretation:
Here is an exercise for the while loop
Syntax format:
while(loop condition){
code block;
Control the condition of the loop (i++);
}
`${i} * 5 = ${result}<br>` where ` ` is the symbol that must be used when using station identifiers
${} represents the location symbol. If you have learned python, you will know that this is initialized in f"{name}", which means filling in the value of the variable in the above code.
<!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.Result display:
5.do-while loop exercise
5.1, code interpretation:
Here is an exercise on a do-while loop
Syntax format:
do{
code block;
}while(control condition);
<!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, Result display:
6.for loop exercise
6.1, code interpretation:
Here is the for loop exercise
Syntax format:
for(definition; conditional judgment; iteration){
code block;
}
Character splicing + "<br>" represents line break. Character splicing uses the + sign.
<!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, Result display:
7. Summary
This article is mainly an exercise on the basic syntax of js. It uses interesting examples to practice, so that it can increase the impression of the code and master the knowledge more thoroughly.
A word a day
Every day without dancing is a failure of life.
If my study notes are useful to you, please like and save them. Thank you for your support. Of course, you are also welcome to give me suggestions or supplement the shortcomings in the notes. It will be of great help to my study. Thank you.