Tabla de contenido
2. Si la práctica de la declaración
2.1 Interpretación del código:
2.2, Visualización de resultados:
3. Práctica de declaración de cambio
3.1, interpretación del código:
3.2, Visualización de resultados:
4.1, interpretación del código:
4.2.Visualización de resultados:
5.ejercicio de bucle do- while
5.1, interpretación del código:
5.2, Visualización de resultados:
6.1, interpretación del código:
6.2, Visualización de resultados:
Prefacio
Este artículo es un ejercicio de tarea para if, switch, while, do- while y sintaxis en JavaScript. Para mí, también es una prueba de mis conocimientos.
mapas mentales
1. Recursos laborales
parte del código CSS: este archivo se guarda en el archivo style.css, porque todos los trabajos posteriores usarán este estilo
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;
}La parte de la imagen está en la carpeta de imágenes:
2. Si la práctica de la declaración
Si no conoce los conceptos básicos de enviar texto a una página, puede leer mi artículo anterior:
2.1 Interpretación del código:
Aquí hay un ejercicio sobre declaraciones if y declaraciones else if.
El formato de sintaxis es (el uso aquí es consistente con el lenguaje C):
si{
bloque de código
}
de lo contrario si {
bloque de código
}
<!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, Visualización de resultados:
3. Práctica de declaración de cambio
3.1, interpretación del código:
Aquí hay un ejercicio sobre la declaración de cambio.
Formato de sintaxis:
interruptor (condición de juicio)
{
condición del caso 1: el código es rápido; se rompe;
condición del caso 2: bloque de código; ruptura;
}
predeterminado: bloque de código; //Si no se cumple ninguna de las condiciones, ejecuta el bloque de código
<!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, Visualización de resultados:
4.ejercicio de bucle while
4.1, interpretación del código:
Aquí hay un ejercicio para el ciclo while.
Formato de sintaxis:
while(condición de bucle){
bloque de código;
Controlar la condición del bucle (i++);
}
`${i} * 5 = ${resultado}<br>` donde ` ` es el símbolo que se debe utilizar al utilizar identificadores de estación
${} representa el símbolo de ubicación. Si ha aprendido Python, sabrá que esto se inicializa en f "{nombre}", lo que significa completar el valor de la variable en el código anterior.
<!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.Visualización de resultados:
5.ejercicio de bucle do- while
5.1, interpretación del código:
Aquí hay un ejercicio sobre un ciclo do- while
Formato de sintaxis:
hacer{
bloque de código;
} while (condición de control);
<!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, Visualización de resultados:
6.para ejercicio de bucle
6.1, interpretación del código:
Aquí está el ejercicio del bucle for.
Formato de sintaxis:
for(definición; juicio condicional; iteración){
bloque de código;
}
La unión de caracteres + "<br>" representa un salto de línea. La unión de caracteres utiliza el signo +.
<!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, Visualización de resultados:
7. Resumen
Este artículo es principalmente un ejercicio sobre la sintaxis básica de js, utiliza ejemplos interesantes para practicar, de modo que pueda aumentar la impresión del código y dominar el conocimiento más a fondo.
Una palabra al día
Cada día sin bailar es un fracaso en la vida.
Si mis notas de estudio te son útiles, dale me gusta y guárdalas. Gracias por tu apoyo. Por supuesto, también puedes darme sugerencias o complementar las deficiencias de las notas. Serán de gran ayuda para mi estudio. Gracias.