《python全栈工程师 - web开发前端基础》:javascript语句

最新推荐文章于 2024-04-05 06:10:52 发布

五月的霾

最新推荐文章于 2024-04-05 06:10:52 发布

阅读量138

点赞数

原文链接：https://blog.csdn.net/u014257214/article/details/104039798

版权

《python全栈工程师 - web开发前端基础》:javascript语句

一、课程目标
二详情解读

一、课程目标

语句与注释
赋值语句
条件语句
while语句
for语句

二详情解读

1.1单行语句与语句注释

//用于单行注释
/* */ 用于多行注释
每行语句以;结束
console.log、console.info、console.debug、console.warn

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 单行注释
			/*
			   一次性注释多行
			   可以大块大块的注释
			*/
		   // console.log、console.info、console.debug、console.warn、console.error
		    
			//var a = 10
			var b = 20
			var c = 20
		</script>
	</body>
</html>

在这里插入图片描述

1.2赋值语句

1.var a=10
2.var a=b=c=10
3.var a=10,b=12,c=13
4.复合赋值-=、+=、*=、/=、<<=、>>=、>>>=

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	     <script>
			 /* 
			 var  a = 10;
			 var  a=b=c=10;
			 var  a=10, b=12, c=13;
			 复合赋值 -=、+=、*=、/=、<<=、>>=、>>>=
			 移位： 首先转换为二进制，比如 2 转为 0000...0000010
			 取反码：							1111....1111101
			 取补码：						    1111....1111110
			 */
			// var a = 10;
			// a = b = c = 20
			// a = b = c = 100-81
		 </script>	
	</body>
</html>

1.3条件语句

比较运算符：>、<、>=、<=、==、！=、 === 、! ==
1.如果操作数是数值、直接比较、返回true或者false
2.如果操作数是字符串，则比较字符串的对应字符编码值
3.如果一个操作数是数值，则将另一个操作数变为数值进行比较
4.如果有一个值是布尔值，先转换为数值再比较
5.null与undefined相等
6.NaN不等于任何数，包括NaN
7.使用相等比较两个对象时，如果两个对象指向同一个对象，返回true
8.全等与全不等比较前不做任何类型转换

在这里插入图片描述

1.3逻辑表达式

布尔操作符-逻辑非！
1.如果操作数是一个对象，返回false
2.如果操作数是一个空字符串，返回true
3.如果是非空字符串，返回false
4.如果操作数是0，返回false
5.如果操作数是任意非0数，返回false
6.如果操作数是null、NaN、undifiend，返回true

在这里插入图片描述

布尔操作符-逻辑或 ||：
var res = 操作数1 || 操作数2
1.如果第一个操作数是对象，返回第一个操作数
2.如果第一个操作数的求值结果是false，返回第二个操作数
短路操作: 如果操作数1的布尔值是true，那么不会对操作数2

在这里插入图片描述

if(condition)
	//单行语句
else if(condition){
	//多行语句
	}
else{
	//多行语句
	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">			
			a = 10
			b = 11

			condition = a < b 
			if (!condition) {
				console.log(condition)
			}   
			  
			if (!condition) {
		   	   console.log(condition)
			} else {
		   	   console.info(condition)
			} 			
			
			a = 1
			b = 2
		
			condition = a + b
		    if (condition==1) {
		    	console.log("condition=",condition)
		    } else if (condition==2) {
		    	console.info("condition=", condition)
		    } else if (condition==4){
		    	console.warn("condition=", condition)

		    } else {
				console.debug("condition=", condition)
			}		   
		</script>
	</body>
</html>

1.4多条件分支语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			a=10
			b=11
			
			condition=a+b
			switch(condition){
				case 51:
					console.info(condition);
					//break;
				case 31:
					console.error(condition);
					//break;
				default:
					console.warn(condition)
			}
		</script>
	</body>
</html>

1.5三元操作符

var=(condition)? true_value:false_value;
//例子
a=12
b=11
c=(a>b)?a:b;//c=12

1.6while循环语句

while(condition){
	//do
}
//第二种：该语句结构至少执行一次循环
do{
	//do
}while(condition)
//注意：一般不适用死循环，否则浏览器会卡死导致崩溃

//示例：
a=10
while(a>0){
	a--
	console.log(a)
}
do{
	a--
	console.log(a)
}while(a>0)

两个程序的运行结果是一样的
在这里插入图片描述

1.7 for循环语句

for(initialization; expression; post-loop-expression) {
	//do
}


// 示例：
for (i=0;i<=10; i++) {
	console.log(i)
	console.log("hello")
}		
			
i = 5
for (;i<10; i++) {
	console.log(i)
}	   
		   
i = 5
for (;i<10;) {
	i++
	console.log(i)
}
		  
i = 5
for (i=0, j=0;i<10 && j < 18;i++, j+=1) {
	console.log(i, j)
}

1.8 for…in…循环语句

for(item in items){
	//do
}
该语句结构为迭代语句

示例：

array=[1,2,3,4,5]
for(item in array){
	console.log(array[item])
}

运行结果
在这里插入图片描述

1.9循环控制

break语句

break语句用于中断循环

continue语句

continue语句用于跳过本次循环

label语句

label语句可以添加一个标签，用于break、continue引用

代码示例：

No1:
for (i=0;i<10;i++) {
	for (j=0;j<3;j++){
		if (j > 1) {
			console.warn(j)
			break No1
		}
		console.log("j=", j)
	 }
	 console.debug("i=",i)
}

在这里插入图片描述

i = 0
No2:
while (i < 100){
	i++
	console.debug("i=", i)
	for (j=0; j<5; j++){
		if (i%2==0) continue No2
		console.warn(j)
	}			
	console.log("---------------------------")
}