JavaScript 语句

最新推荐文章于 2024-07-22 15:13:59 发布

Suxiaomowang

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量121

点赞数 1

分类专栏： JavaScript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/Suxiaomowang/article/details/120046869

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1. 条件语句

根据条件结果去执行，符合条件就执行，不符合就不执行

1. if 语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
            //拿到时间赋值给 c
			var c = new Date().getHours();
            //判断时间大于18是否成立，成立 true 不成立 false
			if (c >= 18) {
				alert("到晚上了");
			}
		</script>
	</head>
	<body>
	</body>
</html>

true 执行结果，false 不执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var c = new Date().getHours();
			if( c < 12 ){
				alert("早！！");
			}else{
				alert("现在不是早上！！");
			}
		</script>
	</head>
	<body>
	</body>
</html>

true 执行 alert("早！！"); false 执行 alert("现在不是早上！！");

else if 的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var c = new Date().getHours();
			if (c >= 0 && c < 6) {
				alert("凌晨");
			} else if (c >= 6 && c < 11) {
				alert("早安！");
			} else if (c >= 11 && c < 14) {
				alert("中午好啊！");
			} else if (c >= 14 && c < 19) {
				alert("下午好啊！");
			} else {
				alert("晚上好啊！");
			}	
		</script>
	</head>
	<body>
	</body>
</html>

1.1 if 语句的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			if (true) {
				if (true) {
					alert("true  true");
				} else {
					alert("true  false");
				}
			} else {
				if (true) {
					alert("false  true");
				} else {
					alert("false  false");
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

改变参数 true ，false。结果会各不相同

2. switch语句

case 常量 default 剩下的量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function getDay() {
				var day = new Date().getDay();
				switch (day) {
					case 1:
						alert("星期一");
						break;
					case 2:
						alert("星期二");
						break;
					case 3:
						alert("星期三");
						break;
					case 4:
						alert("星期四");
						break;
					case 5:
						alert("星期五");
						break;
					case 6:
						alert("星期六");
						break;
					default:
						alert("星期天");
						break;
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="星期几？" onclick="getDay();" />
	</body>
</html>

2. 循环语句

for 循环代码块一定的次数

例如：从 1 输出到 10；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			for (var i = 1; i <= 10; i++) {
				alert(i);
			}
		</script>
	</head>
	<body>
	</body>
</html>

例如：从 10 输出到 1；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			for (var i = 10; i >= 1; i--) {
				alert(i);
			}
		</script>
	</head>
	<body>
	</body>
</html>

1. 遍历数组

将数组中的数据值逐个取出数组名称（下标）从0开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = ["小暖", 21, "西安"];
			for (var i = 0; i < arr.length; i++) {
				alert(arr[i]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

依次取出数组中的值

1.1 for / in 遍历数组得到数组下标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = ["小暖", 21, "西安"];
			for (var xiao in arr) {
				alert(arr[xiao]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

forEach(function(index,element){ });

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// forEach(function(index,element){ }); 方法
			var arr = ["小暖", 21, "xian"];
			arr.forEach(function(element) {
				alert(element);
			});
		</script>
	</head>
	<body>
	</body>
</html>

依次取出数组中的值

2. while 语句

当指定的条件为 true 时循环指定的代码块

先执行判断条件，在执行被循环执行的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var i = 1;
			while (i <= 10) {
				alert(i);
				i++;
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.1 do / while 语句

同样当指定的条件为 true 时循环指定的代码块

先执行被循环执行的代码，在执行判断条件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var i = 1;
			do {
				alert(i);
				i++;
			} while (i <= 10);
		</script>
	</head>
	<body>
	</body>
</html>

while 语句与 do / while 语句区别

while 语句先执行判断条件，在执行被循环执行的代码

do / while 语句先执行被循环执行的代码，在执行判断条件

可以知道当俩种语句的判断条件与执行代码相同时，do / while 语句多执行一次

循环总结：明确知道自己需要循环多少次的时候使用for循环，

不知道需要循环多少次的时候使用while循环，do...while()循环

3. break 和 continue 语句

break 语句用于结束循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			for (var i = 1; i <= 5; i++) {
				if (i == 3) {
					break;
				}
				alert(i);
			}
		</script>
	</head>
	<body>
	</body>
</html>

当 i == 3 时，循环强制结束

continue 语句结束当前循环，进入下次循环中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			for (var i = 1; i <= 5; i++) {
				if (i == 3) {
					continue;
				}
				alert(i);
			}
		</script>
	</head>
	<body>
	</body>
</html>

当 i == 3 时，结束当前循环，进入下次循环中

4. JavaScript 错误处理

try{} 包围可能出现错误的代码
catch(e) {} e[错误对象]/{}--捕获与处理错误
finally{} 一般出现在catch(e){}后面，有误错误都执行，也可以不用写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function testErr() {
				try {
					var str = "try 和 catch";
					unButton(str);//unButton未定义，出错
				} catch (eobj) {
					alert(eobj.name);
					alert(eobj.message);
				} finally {
					alert("finally");
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="try catch finally" onclick="testErr();" />
	</body>
</html>

将可能出现的错误的代码用try{}catch(error对象){捕获处理异常}包围
使用catch中的error对象打印输出错误提示信息

throw 语句允许我们创建自定义错误,并抛出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function createArray(xia) {
				try {
					if (xia < 0) {
						throw "数组下标个数为负数，错误";
					} else {
						var arr = new Array(xia);
						alert(arr.length);
					}
				} catch (eobj) {
					alert(eobj);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="数组" onclick="createArray(-3);" />
	</body>
</html>

错误指出

测试链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#">测试href="#"</a><br />
		<a href="javascript:void(0)">测试href="javascript:void(0)"</a>
	</body>
</html>

点击 href="#" 链接网页刷新，链接变为点击后状态

点击 href="javascript:void(0)" 死链接无反应，链接不变

Suxiaomowang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 语句

1. 条件语句根据条件结果去执行，符合条件就执行，不符合就不执行1. if 语句<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //拿到时间赋值给 c var c = new Date().get...
复制链接

扫一扫

专栏目录