2021.4.28 js学习第四天

最新推荐文章于 2022-07-19 22:32:20 发布
最新推荐文章于 2022-07-19 22:32:20 发布
阅读量71 收藏
点赞数
分类专栏： Java Script
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JINGMaNong/article/details/116278247
版权

1.javascript 中的流程控制语句

1. 顺序结构 自上往下一行一行逐行执行
2. 选择结构 有选择的执行某一部分程序

2.1 if 语句

1. if(){}
2. If(){}else{} – 条件运算符
3. If(){}else if(){}else if(){}…else{}
4. If 语句的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择结构</title>
		<script>
			window.onload=function(){
			//1.if语句
			/*
			
				var chengji=50;
				if(chengji<60){
					alert("不及格");
				}
				
				*/
			//2.if(){}else(){}
			/*
			var chengji=70;
			if(chengji<60){
				alert("不及格");
			}else{
				alert("及格");
			}
			*/
		   //3.if(){}else if(){}else if(){}...else{}
		   /*
			var chengji=120;
			if(chengji>0 && chengji<60){
				alert("不及格--D");
			}else if(chengji>=60 && chengji<75){
				alert("及格--c");
			}else if(chengji>=75 && chengji<85){
				alert("良好--B");
			}else if(chengji>=85 && chengji<90){
				alert("优秀--A");
			}else{
				alert("成绩无效");
			}
			*/
			//4.if 语句的嵌套
			
			var chengji=0;
			if(chengji>0 ){
					if(chengji<60){
						alert("不及格");
						
					}else{
						alert("及格");
					}
			}else{
				if(chengji==0){
					alert("鸭蛋");
					 
				}else{
					alert("不能为负");
				}
			}
			
		   
		}
		</script>
	</head>
	<body>
	</body>
</html>

**2.2 switch 语句
switch(表达式 n){

case 常量值 1:执行代码块 1; [break;]

case 常量值 2: 执行代码块 2; [break;]

…
case 常量值 n:执行代码块 n; [break;]
default:

表达式的结果与 case 后面常量值都不匹配；
}**

工作原理：
首先设置表达式 n（通常是一个变量）

随后表达式的值会与结构中的每个 case 的值做比较。
如果存在匹配[相等]，则与该 case 关联的代码块会被执行。
请使 用 break 来阻止代码自动地向下一个 case 运行。

注意:
与 case 关联的执行代码块中有没有 break 语句，会影响运行结果。 有 break 语句中断执行，没有 break 语句，消除与小 case 的匹配，直接执行与之关 联的代码块。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>switch 语句</title>
		<script>
			window.onload=function(){
				
			var op="*";
			var num1=10;
			var num2=3;
			switch(op){ 
				case "+": document.write(num1+"+"+num2+"="+(num1+num2)+"<br />");break;
				case "-": document.write(num1+"-"+num2+"="+(num1-num2)+"<br />");break;
				case "*": document.write(num1+"*"+num2+"="+(num1*num2)+"<br />");break;
				case "/": document.write(num1+"/"+num2+"="+(num1/num2)+"<br />");
					default:
						document.write("运算符号不匹配");
			
			}
			}
		</script>
	</head>
	<body>
	</body>
</html>

3. 循环结构 一部分程序不断运行

3.1for 循环 —》for(in)

格式:

for(初始条件;判断条件;自增/自减量){

需要被循环执行的程序 ；

}

在这里插入图片描述
for(in)—

1.循环遍历对象的属性/函数的名称

2.遍历数组得到的下标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for 循环</title>
		<script>
			window.onload=function(){
				/*
				for(var i=1;i<=6;i++){
					//<h1>测试for循环--h1</<h1>
					document.write("<h"+i+">测试for循环--h"+i+"</h"+i+">");
				}
				*/
				/*
				for(var i=6;i>=1;i--){
					//<h1>测试for循环--h1</<h1>
					document.write("<h"+i+">测试for循环--h"+i+"</h"+i+">");
				}
				*/
				//遍历数组
				/*
				var array1=new Array()
				array1[0]="张三";
				array1[1]="peiqi";
				array1[2]="wangwu";
				for(var i=0;i<array1.length;i++){
					document.write("<h1>"+array1[i]+"</h1>")
				}
				*/
			   //for(in)
			   //1.循环遍历对象的属性/函数的名称
			   /*
				var obj={name:"peiqi",
						age:18,
						address:"西安",
						getName:function(){}
					};
				var t="nul1";
				for(t in obj){
					document.write("<h1>"+t+"</h1>");
				}	
				*/
			   //2.遍历数组得到的下标--遍历数组
			   var array2=["xilinna","佩奇","李四"];
			   for(var i  in array2){
				   document.write("<h1>"+array2[i]+"</h1>");
			   }
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.2while 循环

格式:
while(判断条件){

需要被循环执行的程序；

}

  1. 没有初始条件【循环结构之外】，没有自增/自减量【循环体内】

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>while循环</title>
		<script>
			window.onload=function(){
				//循环输出1~10的整数
				//定义初始条件
				/*
				var i=1;
				while(i<=10){
					document.write("<h1>"+i+"</h1>");
					i++;
				}
				*/
			   //循环输出10~1的整数
			   /*
			   var i=10;
			   while(i>=1){
			   	document.write("<h1>"+i+"</h1>");
			   	i--;
			   }
			   */
			  //遍历数组
			  /*
				var array1=["张三","李四","王五"];
				var i=0;
				while(i<array1.length){
					document.write("<h1>"+array1[i]+"</h1>");
					i++;
				}
				*/
			   //while循环执行时不考虑循环次数
			   var array1=["张三","李四","王五"];
			   var boo=true;
			   var i=0;
			   while(boo){
				   if("李四"==array1[i]){
					   alert("找到王五")
					   boo=false;
				   }
				   i++;
			   }
			   alert=("i=="+i)
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.3do…while 循环

格式:

do{

需要被循环执行的程序；

}while(判断条件)

1.没有初始条件【循环结构之外】，没有自增/自减量【循环体内】

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>do...while 循环</title>
		<script>
			window.onload=function(){
			/*	
			var i=1;
			do{
				document.write("<h1>i=="+i+"</h1>");
					i++;
			}while(i<=10);	
			*/	
			//循环输出10~1的整数
			/*
			var i=10;
			do{
				document.write("<h1>"+i+"</h1>");
				i--;
			}while(i>=1);
			*/
				//遍历数组
				/*
				var array1=["张三","李四","王五"];
				var i=0;
				do{
					document.write("<h1>"+array1[i]+"</h1>");
					i++;
				}while(i<array1.length);
				*/
					
				//do...while 循环循环执行时不考虑循环次数
				var array1=["张三","李四","王五"];
				var boo=true;
				var i=0;
				do{
					
						if("李四"==array1[i]){
						alert("找到王五");
						 boo=false;
					}	
					i++;
				}while(boo)
			
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

1. for 循环与 while 和 do…while 循环的区别？

for 循环有初始条件和自增/自减量的书写位置，while 和 do…while 循环没有有初始条件 和自增/自减量的书写位置，while 和 do…while 循环需要初始条件时需要在循环结构之外自 己定义，自增/自减量需要在循环体内控制。

for 循环在运行的时候需要明确循环的次数，while 和 do…while 循环不需要明确循环的 次数，达到条件自动结束。

2. while 和 do…while 循环的区别？

while 循环先判断后执行，do…while 循环先执行后判断，判断条件为 false 时 do…while 循环比 while 循环多执行一次。

4.break 和 continue 语句

break–中断 【switch,循环语句中】

continue --继续 【结束本次循环，进入下一次】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>break--中断</title>
		<script>
			window.onload=function(){
				var i=1;
				while(i<=10){
					document.write("<h1>"+i+"</h1>");
					if(i==5){
						break;
					}	
					i++;
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>continue --继续</title>
		<script>
			window.onload=function(){
				var i=0;
				while(i<=10){
					i++;
					if(i==5){
					continue;	
					}
					
					document.write("<h1>"+i+"</h1>");
					
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>
景抓马
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IDEA 2021.3创建java web项目（最新版，很详细，手把手创建）
m0_67394360的博客
03-08 4775
IDEA 2021.3创建java web项目（最新版，很详细，手把手创建） IntelliJ IDEA：官网下载地址 IntelliJ IDEA是一种商业化销售的Java集成开发环境（Integrated Development Environment，IDE）工具软件，由JetBrains软件公司（前称为IntelliJ）开发，提供Apache 2.0开放式授权的社区版本以及专有软件的商业版本，开发者可选择其所需来下载使用。 因为自身学习的时候第一次使用IDEA，初次创建javaweb项目的时候，发现现
ideaIU-2021.1.3.zip
03-23
标题 "ideaIU-2021.1.3.zip" 暗示了这是一个与IntelliJ IDEA相关的软件包，具体来说是版本2021.1.3的更新。IntelliJ IDEA是一款由JetBrains公司开发的集成开发环境（IDE），尤其适用于Java编程语言，同时也支持其他...
IDEA2021.2安装与配置（持续更新）
热门推荐
用生命研发技术
08-03 21万+
IDEA2021.2安装与配置一、下载二、安装三、配置配置全局生效首次启动激活字体，字体大小配色方案注解生效自动导包移包自动补全快捷键格式化代码代码忽略大小写git配置maven配置四、插件Vue.jsTranslationlombok 一、下载 下载地址：https://www.jetbrains.com/zh-cn/idea/download/other.html 选择相应的版本下载，这里以 2021.2 版本为例。 二、安装 更改安装位置 创建桌面快捷方式 三、配置 配置全局生效 不要打开项目，直
2021.4.30 js学习第六天
JINGMaNong的博客
05-03 79
布尔值对象（Boolean） 1.创建 boolean 对象 var boo1=true; 类型 boolean var boo2=new Boolean(数值); 类 object 通过构造器创建 boolean 对象可以将 数字 0–false 非 0–true 字符串 “”—false 非””–true null—false NaN—false <!DOCTYPE html> <html> <head> <meta cha
2021.3.5实习之学习Javascript
weixin_43497397的博客
03-08 81
2021.3.5实习之学习Javascript 1 DOM查询 #+名称 表示通过id查找 2 DOM 的增删改等方法 3 confirm 显示带有一段消息以及确认按钮和取消按钮的对话框，点击取消或者确认后会返回一个true或false值 4 通过js修改元素样式 5 获取元素当前显示的样式 其他浏览器指IE以外的浏览器，该方法返回的是一个对象 6 冒泡的取消 event.cancelBubble=true 7 时间的委派 通过判断event.target是否是我们想要的来触发事件 eve
Spring Cloud 2021.0.1 发布
程序猿DD
02-20 691
来源：JAVA架构日记Spring Cloud 2021.0.1 正式发布，这是 Spring Cloud 2021 的第一个错误修正版本。支持 2021.0.0 平稳升级目前已经可以从中...
2021.3.8 实习之学习VUE全家桶
weixin_43497397的博客
03-09 109
2021.3.8—— 实习之学习VUE全家桶 1 双向数据绑定 v-model 2 数据显示 {{需要显示的数据}} 3 vue的基本使用 4 v-text 文本标签指令 5 v-html 超链接标签指令 6 v-bind 强制数据绑定 第一个的话是html默认识别，识别不到我们在data里面给imgUrl传的图片地址 7 事件监听 语法： 1 v-on：click=“方法” 2 @click=“方法” 可以任意传参 可传可不传 8 computed和watc 计算属性方法 ...
2021Vue.js面试题汇总及答案【全网最全 建议收藏】
白大锅的博客，毕设WangLoveBai_999
10-09 12万+
文章目录前言一、Vue.js基本问题1.1.Vue 响应式原理1.2.Vue.js 的特点1.3. Vue.js 双向绑定的原理1.4.Vue中如何监控某个属性值的变化？1.5.Vue.js 3.0 放弃defineProperty, 使用Proxy的原因1.6.Vue 2 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？ 前言 之前博主有分享过Vue学习由浅到深的文章(Vue学习之从入门到神经) 现在Vue学的好的话马内真的不必后端差 所以今天博主就汇总下有关Vue的相关面试题
最强IntelliJ IDEA 2021.2.2 版本安装教程集成开发环境总结教程，带安装包。
快乐的小龚
07-19 7893
最强IntelliJ IDEA 2021.2.2 版本安装教程以及常见集成开发环境，使用技巧总结，带安装包。
three.js(自学第一天)
fiaank的博客
05-28 398
2021/5/27 three.js(文件地址) https://github.com/mrdoob/three.js three.js(github的地址) 源目录结构 Build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。 Docs目录：这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。 Editor目录：一个类似3D-max的
45天带你玩转Node（第一天）初探Node.js
官方推荐
05-05 4万+
博主为大家搭建了一个专栏，为了方便大家系统的学习Node.js，大家记得订阅哦！虽然我们的Node.js还很年轻，但是他也已经有了很高的地位，让我们尽情的畅游在Node.js的专栏中吧，希望通过此专栏我们能够系统的将Node.js学好，它将会成为我们的一大亮点，我们可以用这款前端中的后端语言让提升我们的价值与眼界，如今的他也已经成为面试官口中的高并发面试内容了，一起加油！
WebStorm-2021.3.2.exe
05-03
WebStorm-2021.3.2.exe是WebStorm的2021年第三次重大更新版本，提供了最新的特性和改进。 首先，WebStorm 2021.3.2作为一款专业级的源码软件，它具备了完整的代码编辑、调试、测试和重构等功能。内置了对各种前端...
dark+第六次作业留言板 2021.11.20.zip
11-27
【标题】"dark+第六次作业留言板 2021.11.20.zip" 涉及的是一份关于编程作业的压缩文件，很可能包含了一位名为 "dark" 的学生或教师在2021年11月20日提交的第六次作业——一个留言板项目。这个作业可能是一个互动式...
waldo2021.github.io
02-28
标题 "waldo2021.github.io" 暗示这是一个个人或项目网站，托管在 GitHub Pages 上。GitHub Pages 是 GitHub 提供的一项服务，允许用户免费托管静态网站。这个特定的站点可能是一个个人博客、一个开源项目的文档或者...
LucasRocha2021.github.io
03-31
4. **JavaScript 功能**：尽管标签没有提及，但为了实现交互性和动态效果，项目可能会包含 JavaScript 代码，或者链接到外部库如 jQuery 或其他框架（如 React, Vue, Angular 等）。 5. **GitHub Pages 部署**：...
基于Cocos Creator 3.x开发的Excel转Json格式的插件，同时会根据表格中的字段生成数据结构TypeScr代码
最新发布
08-16
oops-plugin-excel-to-json 是基于 Cocos Creator 3.x 开发的Excel转Json格式的插件，同时会根据表格中的字段生成数据结构TypeScript代码
FIJKPlayer-简介
08-16
FIJKPlayer-简介
vue+cesium+heatmap实现全球热力图
08-16
vue+cesium+heatmap实现全球热力图
印象笔记旧版本Evernote-6.22.36.3870.exe
08-16
这个版本还是不错，没有广告，支持多个账号添加同时打开使用。也能专注于笔记内容，列表和菜单栏都可以调节较小，内容窗口编辑界面也可以调节很大。
node.js 删除元素
08-27
在Node.js中删除元素可以通过以下几种方式实现: 1. 使用`splice()`方法: `splice()`方法可以删除数组中的元素，并可选地替换它们。你可以使用这个方法来删除指定位置的元素。例如，如果你有一个数组`arr`，你可以使用`arr.splice(index, 1)`来删除索引为`index`的元素。这将修改原始数组并返回被删除的元素。 2. 使用`filter()`方法: `filter()`方法可以基于指定的条件从数组中过滤出需要的元素。你可以使用这个方法来删除满足特定条件的元素。例如，如果你有一个数组`arr`，你可以使用`arr.filter(element => element !== value)`来删除数组中值为`value`的元素。这将返回一个新的数组，其中包含不满足条件的元素。 3. 使用`pop()`方法: `pop()`方法可以从数组的末尾删除一个元素，并返回被删除的元素。你可以使用这个方法来删除最后一个元素。例如，如果你有一个数组`arr`，你可以使用`arr.pop()`来删除最后一个元素。注意，这会修改原始数组。 4. 使用`shift()`方法: `shift()`方法可以从数组的开头删除一个元素，并返回被删除的元素。你可以使用这个方法来删除第一个元素。例如，如果你有一个数组`arr`，你可以使用`arr.shift()`来删除第一个元素。 注意，这会修改原始数组。 综上所述，你可以使用`splice()`、`filter()`、`pop()`或`shift()`方法来在Node.js中删除元素，具体取决于你的需求和数组的结构。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [2021了，真的不要再说 Node.js 是一门编程语言了](https://blog.csdn.net/CS_DGD/article/details/117232499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Node.js详解（二）：Node.js与JS的关系](https://blog.csdn.net/weixin_44816664/article/details/130956586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值