当前位置： 首页 > news >正文

JavaScript编程语法作业

news 2026/5/13 5:17:36

目录

目录

前言

思维导图

1，作业资源

2，if语句练习

2.1代码解读:

2.2,结果展示:

3，switch语句练习

3.1,代码解读:

3.2,结果展示:

4.while循环练习

4.1,代码解读:

4.2.结果展示:

5.do-while循环练习

5.1,代码解读:

5.2,结果展示:

6.for循环练习

6.1,代码解读:

6.2,结果展示:

7，总结

前言

    本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.

思维导图

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;
}

图片部分在images文件夹中:

2，if语句练习

               如果不知道输出文本到页面的基础方面的知识,那么可以看我前面的文章:

                                                  JavaScript基础输出

2.1代码解读:

                                  这里是对if语句与else if 语句的练习

其中语法格式为(这里用法与c语言一致):

 if{

     代码块

}

else if {

 代码块

}

<!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；现金小于100if(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语句的练习

语法格式:

switch(判断条件)

{

case 条件1: 代码快;break;

case 条件2: 代码块;break;

}

default : 代码块;  //如果条件都不都满足,执行代码块

<!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循环的练习

语法格式:

do{

      代码块;

}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的基础语法进行的一次练习,通过有趣的示例进行练习,使得对于代码能够增加印象,对于知识的掌握更加透彻.

每日一言

每一个不曾起舞的日子，都是对生命的辜负。

  如果我的学习笔记对你有用，不妨点赞收藏一下，感谢你的支持，当然也欢迎大佬给我一下建议或是对笔记中的不足进行补充，对我学习大有帮助，谢谢。  

相关文章：

JavaScript编程语法作业

目录 目录 前言 思维导图 1&#xff0c;作业资源 2&#xff0c;if语句练习 2.1代码解读: 2.2,结果展示: 3&#xff0c;switch语句练习 3.1,代码解读: 3.2,结果展示: 4.while循环练习 4.1,代码解读: 4.2.结果展示: 5.do-while循环练习 5.1,代码解读: 5.2,结果展…...

编程日记 2023/9/11 21:41:28

服务器中了Malloxx勒索病毒应该怎么办？勒索病毒解密，数据恢复

Malloxx勒索病毒是一种近年来发现的电脑病毒&#xff0c;它以加密用户电脑中的重要文件数据为手段&#xff0c;威胁用户并以此勒索钱财。这种病毒的传播方式多种多样&#xff0c;可以通过电子邮件、恶意网站、网络下载等方式进行传播。一旦电脑被感染&#xff0c;病毒会立即锁住…...

编程日记 2023/9/11 21:40:16

如何实现Spring的事务管理功能:@Transactional声明式事务

在Spring MVC中处理SQL事务&#xff0c;可以使用Spring的事务管理功能来实现。Spring提供了多种配置和编程方式来管理事务&#xff0c;以下是一种常见的基于注解的方法来处理SQL事务&#xff1a; 1. 配置数据源和事务管理器&#xff1a;首先&#xff0c;您需要配置数据源和事务…...

编程日记 2023/9/11 21:39:15

LeetCode(力扣)122. 买卖股票的最佳时机 II

LeetCode122. 买卖股票的最佳时机 II 题目链接代码 题目链接 https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-ii/ 代码 class Solution:def maxProfit(self, prices: List[int]) -> int:result 0for i in range(1, len(prices)):result max((prices[i…...

编程日记 2023/9/11 21:38:14

串行通信协议

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、UART二、SPI二、IIC 前言 UART为异步串行通信&#xff0c;使用各自的时钟控制数据的发送和接受过程&#xff0c;不使用同步时钟&#xff0c;而是使用一些特…...

编程日记 2023/9/11 21:37:13

Elasticsearch中RestClient使用

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…...

编程日记 2023/9/11 21:36:10

【LeetCode-中等题】208. 实现 Trie (前缀树)

文章目录 题目方法一&#xff1a;利用数组构建26叉树方法二&#xff1a;利用哈希表构建26叉树 题目 方法一&#xff1a;利用数组构建26叉树 插入图示&#xff1a; 全搜索和前缀搜索&#xff1a; 注意&#xff1a;全局匹配匹配完直接返回插入时的标志位 而前缀匹配时&#xff…...

编程日记 2023/9/11 21:35:07

python队列与多线程——生产者消费者模型

队列相关知识点 多线程相关知识点 import random import time from queue import Queue import threadingclass Consumer(threading.Thread):def __init__(self, name, Q: Queue):super(Consumer, self).__init__()self.name nameself.Q Qdef run(self):while True:time.sl…...

编程日记 2023/9/11 21:34:05

idea的安装

大家可以关注博主&#xff0c;加个微信&#xff0c;私下聊聊 我们先到idea的官网里下载一个ideaidea官网 idea的安装非常简单&#xff0c;只需要一直next就行&#xff0c; 安装完后到你的文件里找到idea64.exe.vmoptions文件&#xff0c;在最后一行添加-javaagent:D:\idea\jetb…...

编程日记 2023/9/11 21:33:03

Unity下如何实现RTMP或RTSP播放端录像？

好多开发者问我们&#xff0c;Unity环境下&#xff0c;除了RTSP或RTMP的播放&#xff0c;如果有录像诉求&#xff0c;怎么实现&#xff1f;实际上录像相对播放来说&#xff0c;更简单一些&#xff0c;因为不涉及到绘制&#xff0c;只要拉流下来数据&#xff0c;直接写mp4文件就…...

编程日记 2023/9/11 21:32:02

【Python】Python基础语法

总感慨万千&#xff0c;虽只道寻常 文章目录 前言1. python与Java的主要区别2. 数据类型3. 输入与输出3.1 输入3.2 输出 4. 注释5. 运算符6. 条件语句7. 循环8. 函数9. 列表9.1 创建9.2 根据下标访问元素9.3 列表切片9.4 遍历9.5 插入元素9.6 查找元素下标9.7 删除元素9.8 列表…...

编程日记 2023/9/11 21:31:01

I2C总线驱动：裸机版、应用层的使用、二级外设驱动三种方法

一、I2C总线背景知识 SOC芯片平台的外设分为&#xff1a; 一级外设&#xff1a;外设控制器集成在SOC芯片内部二级外设&#xff1a;外设控制器由另一块芯片负责&#xff0c;通过一些通讯总线与SOC芯片相连 Inter-Integrated Circuit&#xff1a; 字面意思是用于“集成电路之间…...

编程日记 2023/9/11 21:29:58

Unix Network Programming Episode 77

‘gethostbyaddr’ Function The function gethostbyaddr takes a binary IPv4 address and tries to find the hostname corresponding to that address. This is the reverse of gethostbyname. #include <netdb.h> struct hostent *gethostbyaddr (const char *addr…...

编程日记 2023/9/11 21:28:57

解决Ubuntu无法安装pycairo和PyGObject

环境&#xff1a;虚拟机Ubuntu20.04&#xff0c;vscode无法安装pycairo和PyGObject 虚拟机Ubuntu20.04&#xff0c;vscode中运行Anaconda搭建的vens 的Python3.8.10 首先在vscode中点击ctrlshiftp&#xff0c;选择Python3.8.10的环境&#xff0c;自动激活Python 最近在搞无人…...

编程日记 2023/9/11 21:27:56

Android Handler 机制解析

1、前言 在 Android 开发中&#xff0c;Handler 的机制和运行原理这方面的知识可以说是每个人都需要熟悉的。这不仅是因为 Handler 是 Android 应用的基石之一&#xff0c;也因为 Handler 整体设计上也是十分优秀的。接下来我就梳理总结一下常见的 Handler 相关知识点。 2、基…...

编程日记 2023/9/11 21:26:55

酒店固定资产管理怎么分类

在酒店业中&#xff0c;固定资产的管理是至关重要的一环。它不仅影响到企业的运营效率和盈利能力&#xff0c;而且直接影响到客户体验和品牌形象。因此&#xff0c;对于酒店管理者来说&#xff0c;合理、有效地进行固定资产管理是一项必不可少的任务。本文将探讨酒店固定资产的…...

编程日记 2023/9/11 21:25:53

OpenCV（三十一）：形态学操作

​​​​​​1.形态学操作 OpenCV 提供了丰富的函数来进行形态学操作&#xff0c;包括腐蚀、膨胀、开运算、闭运算等。下面介绍一些常用的 OpenCV 形态学操作函数&#xff1a; 腐蚀操作&#xff08;Erosion&#xff09;&#xff1a; erode(src, dst, kernel, anchor, iteration…...

编程日记 2023/9/11 21:24:52

Python之面向对象(二)

目录 属性和方法静态属性/方法、普通属性/方法、类方法保护和私有属性/方法魔术方法构造方法(\_\_new__/\_\_init\_\_)析构方法(\_\_del__)调用方法&#xff08;\_\_call__&#xff09;toString方法\_\_str__、\_\_repr\_\_\_\_getitem__、setitem、delitem\_\_add__、\_\_gt\_…...

编程日记 2023/9/11 21:23:50

ESP32用作经典蓝牙串口透传模块与手机进行串口通信

ESP32用作经典蓝牙串口透传模块与手机进行串口通信 简介ESP32开发板Arduino程序手机与ESP32开发板进行蓝牙串口透传通信总结 简介 ESP32-WROOM-32模组集成了双模蓝牙包括传统蓝牙&#xff08;BR/EDR&#xff09;、低功耗蓝牙&#xff08;BLE&#xff09;和 Wi-Fi&#xff0c;具…...

编程日记 2023/9/11 21:22:49

Python 操作 CSV

使用过 CSV 文件都知道&#xff1a;如果我们的电脑中装了 WPS 或 Microsoft Office 的话&#xff0c;.csv 文件默认是被 Excel 打开的&#xff0c;那么什么是 CSV 文件&#xff1f;CSV 文件与 Excel 文件有什么区别&#xff1f;如何通过 Python 来操作 CSV 文件呢&#xff1f;带…...

编程日记 2023/9/11 21:21:47

如何高效配置ClickHouse连接器：专业用户的完整指南

如何高效配置ClickHouse连接器&#xff1a;专业用户的完整指南 【免费下载链接】clickhouse-odbc ODBC driver for ClickHouse 项目地址: https://gitcode.com/gh_mirrors/cl/clickhouse-odbc ClickHouse ODBC驱动是连接ClickHouse数据库与各类数据分析工具的关键桥梁&a…...

编程新知 2026/5/13 5:05:46

Selenium自动化测试常见的异常处理

在软件开发和测试领域，Selenium作为一种广泛使用的自动化测试工具，扮演着至关重要的角色。随着自动化测试的不断普及，如何在测试过程中有效捕获并处理异常，成为了每个测试工程师必须掌握的技能。本文旨在深入探讨Selenium异常处理的方法，通过丰富的案例和代码，帮助新手朋…...

编程新知 2026/5/13 4:26:54

终极指南：如何一键下载网易云音乐无损FLAC格式歌曲

终极指南&#xff1a;如何一键下载网易云音乐无损FLAC格式歌曲 【免费下载链接】NeteaseCloudMusicFlac 根据网易云音乐的歌单, 下载flac无损音乐到本地.。 项目地址: https://gitcode.com/gh_mirrors/nete/NeteaseCloudMusicFlac 你是否曾为无法下载网易云音乐的无损音…...

编程新知 2026/5/13 4:24:51

移动端数据抓取实战：基于Capacitor插件实现自动化采集

1. 项目概述&#xff1a;一个为移动端设计的“数据抓手”最近在做一个移动端的数据采集项目&#xff0c;需要从一些应用里提取特定的信息。直接写原生代码去解析页面结构&#xff0c;不仅开发周期长&#xff0c;而且一旦目标应用的界面更新&#xff0c;我们的代码就得跟着改&am…...

编程新知 2026/5/13 3:35:01

macOS Unlocker V3.0：在Windows/Linux电脑上运行macOS虚拟机的终极指南

macOS Unlocker V3.0&#xff1a;在Windows/Linux电脑上运行macOS虚拟机的终极指南 【免费下载链接】unlocker VMware Workstation macOS 项目地址: https://gitcode.com/gh_mirrors/unlo/unlocker macOS Unlocker V3.0是一款革命性的开源工具&#xff0c;专为VMware W…...

编程新知 2026/5/13 3:30:56

Claude Code环境变量配置全解析：从入门到精通

1. 项目概述&#xff1a;Claude Code 环境变量配置生成器如果你和我一样&#xff0c;是 Claude Code 的深度用户&#xff0c;那你一定经历过这样的时刻&#xff1a;面对一个复杂的开发任务&#xff0c;想调整一下模型的思考深度&#xff08;Effort Level&#xff09;来平衡成本…...

编程新知 2026/5/13 3:01:34

016、气压计原理与高度测量

飞控算法从入门到精通 016 气压计原理与高度测量 一、一次炸机带来的教训 去年夏天，我在一个四轴飞行器上调试定高悬停。气压计用的是MS5611，数据手册翻烂了，滤波算法也上了，地面站里高度曲线看着挺平滑。结果一上天，飞机像喝醉了酒——先是莫名其妙往下掉半米，然后猛…...

编程新知 2026/5/13 2:05:17

Docker 部署 XiuXianGame 文字修仙游戏：极空间 NAS 上随时挂机刷资源

前言 挂机刷资源&#xff0c;躺平修成仙。 这类文字修仙游戏&#xff0c;说白了就是佛系养成为主&#xff0c;不用时刻盯着&#xff0c;挂着就行。但问题是——大多数要么得在本地电脑跑&#xff0c;要么依赖第三方平台&#xff0c;体验受限。把这套东西跑在自己的 NAS 上&am…...

编程新知 2026/5/13 1:52:37

5个维度深度解析：如何实现高性能黑苹果系统的架构设计与优化策略

5个维度深度解析&#xff1a;如何实现高性能黑苹果系统的架构设计与优化策略 【免费下载链接】Hackintosh 国光的黑苹果安装教程&#xff1a;手把手教你配置 OpenCore 项目地址: https://gitcode.com/gh_mirrors/hac/Hackintosh 在传统PC硬件与macOS系统兼容性的技术挑战…...

编程新知 2026/5/13 1:11:14

从零基础到AI大模型高手，自学AI大模型学习路线推荐，不走弯路！

本文提供了一条详尽的AI大模型自学路线&#xff0c;旨在帮助新手小白系统学习。路线涵盖数学与编程基础、机器学习入门、深度学习深入、大模型探索、进阶与应用以及社区与资源等多个方面。内容详细列出了各阶段的学习资源&#xff0c;包括经典书籍、在线课程、实践项目等&#…...

编程新知 2026/5/13 0:44:48