第四讲 JavaScript基础（二）

最新推荐文章于 2024-06-01 18:37:23 发布

鵼鷡

最新推荐文章于 2024-06-01 18:37:23 发布

阅读量70

点赞数 1

文章标签： js web

本文链接：https://blog.csdn.net/llXlI/article/details/114891131

版权

系列课程目录

第四讲 JavaScript基础（二）

前言

JavaScript的循环语句与基本函数

提示：以下是本篇文章正文内容，下面案例可供参考

一、循环语句

1.while循环与do…while循环

while循环

//while循环结构：
while(条件){  
    //js语句  
}

do...while循环

//do...while循环结构：
do{  
    //js语句  
}while(条件)

九九乘法表案例：

//while循环打印带表格的99乘法表：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("<table align='center' border='1' style='border-collapse: collapse;'>");
			document.write('<tr>');
			var i=1;
			while(i<=9){  
				var j=1;
    			while(j<=i){
					document.write("<td align='center' style='width: 100px; height: 50px;'>"+j+"*"+i+"="+i*j+"</td>");
					j++;
				}
				document.write('</tr>');
				i+=1;
			}
			document.write('</table>');
		</script>
	</body>
</html>

2.for循环与 for…in循环

for循环

//for循环结构：
for(初始化参数;循环条件;增量和减量){
	//JS代码
}

for...in循环

//for...in循环结构：
for(变量名 in 对象名){
	//js代码
}

九九乘法表案例：

//案例：用for循环打印带表格的九九乘法表
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("<table align='center' border='1' style='border-collapse: collapse;'>");
			//border-collapse: collapse的作用是去除表格外边框
			document.write("<tr>");
			for(var i=1;i<=9;i++){
				for(var j=1;j<=i;j++){
					document.write("<td align='center' style='width: 100px; height: 50px;'>"+j+"*"+i+"="+i*j+"</td>");
					//width: 100px; height: 50px;设置单个表格单元的长宽
				}
				document.write("</tr>");
			}
			document.write("</table>")
		</script>
	</body>
</html>

3.中断循环语句

break：立即退出整个循环
continue：退出当前循环

二、函数

1.自定义函数与匿名函数

//自定义函数结构：
function name(参数1,参数2,参数3){
	//要执行的代码
	return 返回值
}

//案例:
function add(a,b){
	return a+b;
}
var result=add(1,3);
console.log(result);


//匿名函数结构：
function (参数1, 参数2, 参数3) {  
    //要执行的代码 
    return 返回值
}


//案例：

//由于匿名函数没有名字，所以想要调用匿名函数，可以将函数赋值给变量然后输出
var add=function(a,b){ //先赋值给变量add
	return a+b;
}
var result=add(1,3); //再由add()传入参数
console.log(result); //最后在控制台上输出

2. 事件调用

<button onclick="display()">点我试试</button>
<script type="text/javascript">
function display(){
	alert('hello world');
}
</script>

三、课堂作业

1.按照要求完成任务

如下（示例）：

在这里插入图片描述

2.解析代码

任务4-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var iN=false
			var num
			while(!iN){
				num=Number(prompt("请输入边长："))
				if(isNaN(num)){
					alert("输入错误")
				}else{
					iN=true
				}
			}
			alert("输入正确")
			if(num>10){
				num=10
			}
			document.write("<table>")
			for(var i=0;i<num;i++){
				document.write("<tr>")
				for(var j=0;j<num;j++){
					document.write("<td>&nbsp#&nbsp</td>")
				}
				document.write("</tr>")
			}
			document.write("</table>")
		</script>
	</body>
</html>

任务4-2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><th colspan="5">简易购物车</th></tr>
			<tr><td>商品名称</td><td>数量（件）</td><td>单价（元）</td><td>运费（元）</td><td><input type="button" name="" id="" value="合计" onclick="heji()"/></td></tr>
			<tr><td>道具</td><td><input type="text" name="sl" id="sl" value="" /></td><td><input type="text" name="dj" id="dj" value="" /></td><td><input type="text" name="yf" id="yf" value="" /></td><td><input type="text" name="hj" id="hj" value="" onclick="heji()"/></td></tr>
		</table>
		
		
		
		<script type="text/javascript">
			function heji(){
				var sl=Number(document.getElementById("sl").value)
				var dj=Number(document.getElementById("dj").value)
				var yf=Number(document.getElementById("yf").value)
				document.getElementById("hj").value=sl*dj+yf
			}
		</script>
	</body>
</html>