【Web前端学习笔记】Javascript_02_运算符，控制语句，常用语句，函数定义

Javascript_02

A.js中的运算符

1.算术运算符

<title>js中的运算符</title>
		<script type="text/javascript">
			// 算术运算符
			var a = 3;
			var b = 4;
			document.write("a + b = " + (a + b) + "<br />");
			document.write("a - b = " + (a - b) + "<br />");
			document.write("a * b = " + (a * b) + "<br />");
			document.write("a / b = " + (a / b) + "<br />");
			document.write("a % b = " + (a % b) + "<br />");
		</script>

2.比较运算符

<title>js中的运算符</title>
		<script type="text/javascript">
			// 比较运算符
			var a = 1;
			var b = true;
			
			document.write((a == b) + "<br />");
			
			// js中true的值为1;false值为0
			document.write("a + b = " + (a + b) + "<br />")
		</script>

3.逻辑运算符

<title>js中的运算符</title>
		<script type="text/javascript">
			// 逻辑运算符
			document.write((true && false) + "<br />");
			document.write((true || false) + "<br />");
			document.write((!true) + "<br />");
		</script>

4.三目运算符

<title>js中的运算符</title>
		<script type="text/javascript">
			// 三目运算符
			var age = 12;
			document.write(age > 18 ? "成年人" : "未成年人" + "<br />");
		</script>

5.注意：js中，true和false分别代表1和0

B.控制语句

1.流程控制语句if

a.格式

if(表达式){
					
					语句1;
				}else{
					语句2;
				}

b.注意

1）如果条件是boolean类型,如果是true,那么条件成立;否则,不成立

2）如果是number类型，number类型是非0数据，条件成立；如果该值是0,条件不成立

3）string类型：字符和字符串;如果是空字符串/空字符都是不成立,如果有值则成立

4）对象类型，如果非null对象，条件成立；如果对象为null，不成立

2.流程控制语句switch

a.格式

switch (表达式){
				case 值1:
					语句1;
					break; //如果没有break，case穿透
				default:
					break;
			}

b.注意

1）case后面的值：可以使string,number类型常量

2）case后面的值：可以是变量

3）case后面的值：可以是表达式

4）java中，只能是常量

<script type="text/javascript">
			var i = "b";
			var b = "b";
			switch (i){
				case "a":
					document.write("您选择了a");
					break;
				case "b":
					document.write("您选择了b");
					break;
				case "c":
					document.write("您选择了c");
					break;
				case "d":
					document.write("您选择了d");
					break;	
				default:
					break;
			}
		</script>

<script type="text/javascript">
			var age = 20;
			switch (true){
				case age >= 18:
					document.write("是成年人..");
					break;
				case age <= 18:
					document.write("是未成年人..");
					break;	
				default:
					break;
			}
		</script>

3.流程控制语句for

a.格式

for (初始化语句;条件判断语句;步长语句) {
				循环体语句;
			}

b.求1-100之间的和

<script type="text/javascript">
			var sum = 0;
			for (var i = 1; i <= 100; i++) {
				sum += i;
			}
			
			document.write("sum = " + sum);
		</script>

4.流程控制语句while

a.格式

while (条件判断语句){
				循环体语句;
				控制体语句;
			}

b.输出5行helloworld

<script type="text/javascript">
			var i = 1;
			while (i <= 5){
				document.write("hello world" + "<br />")
				i++;
			}
		</script>

5.流程控制语句do-while

a.格式

do{
			 		循环体语句;
			 		控制体语句;
			 	}while(条件判断语句);

b.特点：循环体语句至少执行一次

c.输出五行helloworld

		<script type="text/javascript">
			var i = 1;
			do{
				document.write("hello world" + "<br />")
				i++;
			}while(i <= 5);
		</script>

6.练习

a.显示"*"为三角型，5行，第1行有1个"*"，第2行有2个"*"……

b.显示乘法口诀

<title>控制语句</title>
		<style type="text/css">
			table {
				/*合并表格的边框*/
				border-collapse: collapse;
			}
		</style>
		<script type="text/javascript">
			// 1)三角形
			for (var i = 1; i <= 5; i++) {
				for (var j = 1; j <= i; j++) {
					document.write("*");
				}
				document.write("<br />");
			}
			
			// 分割线
			document.write("<hr />")
			
			// 2)乘法表，带表格
			document.write("<table border='1px'width='400px' height='300px' align='center' bgcolor='blue'>");
			for (var i = 1; i <= 9; i++) {
				document.write("<tr>")
				for (var j = 1; j <= i; j++) {
					document.write("<td>"+ j + "*" + i + "=" + j * i + "</td>")
				}
				document.write("</tr>")
			}
			document.write("</table>");
		</script>

C.常用语句

1.with语句

是为了方便函数的调用

with(对象名){

函数名("输出内容");输出内容的时候不需要再去使用对象名调用了

}

<script type="text/javascript">
			with (document){
				for (var i = 1; i <= 5; i++) {
					write("hello world" + "<br />");
				}
			}
		</script>

2.for-in语句：类似于java中的增强for

a.格式

for(var 遍历的时候变量名 in 数组名称或者对象名称){

输出变量名称:数组名称[变量名]

}

b.该for-in语句可以遍历数组和对象类型

1）数组

<script type="text/javascript">
			with (document){
				// 定义一个数组
				var arr = [10, 20, 30, 40];
				
				// for-in遍历
				write("arr = [");
				for (var i in arr) {
					if (i == arr.length - 1) {
						write(arr[i] + "]");
					} else {
						write(arr[i] + ",")						
					}
				}
			}
		</script>

2）对象

<script type="text/javascript">
			with(document) {
				// 创建对象
				// 定义函数
				function Person (name, age) {
					this.name = name;
					this.age = age;
				}
				
				// 定义对象
				var p = new Person("张三", 20);
				
				// 遍历
				for (var i in p) {
					write(p[i] + "<br />")
				}
			}
		</script>

注意：遍历对象，变量名就是对象的属性，属性值:对象名[变量名]

D.函数定义

1.定义函数的格式

function 函数名(形式参数列表){

语句;

}

2.调用函数

函数名称(实际参数)

3.注意事项

a.使用function定义函数，形式参数列表不能使用var定义

b.js中定义函数的时候，是可以直接返回的，有return语句

c.js中是没有方法重载的概念，后面定义的同名的函数会覆盖掉前面的

d.不管实际参数是否大于形式参数，函数都会被调用

e.实际参数中隐含了一个数组:arguments数组，实际参数就是通过数组进行值传递

4.js中的对象

String,Number,Date,Array

5.代码实现

<title>函数定义</title>
		<script type="text/javascript">
			// 定规三个数字求和的函数
			function add (a, b, c) {// a=10,b=20,c=NaN; 10 + 20 + NaN= NaN;
				//alert(arguments.length);// 3
				for (var i = 0; i < arguments.length; i++) {
					document.write(arguments[i] + " " + "<br />");
				}
				var sum = a + b + c;
				document.write("sum = " + sum);
			}
			
			// 调用：
			add(10,20,30); // 实际参数：隐含了一个数字：arguments[10,20,30]
			add(10,20); // 形式参数(length)>实际参数：sum = 10 + 20 + NaN= NaN;
			add(10,20,30,40); // 形式参数<实际参数：最终会传递前面的值进行求和,而后面的值就直接去掉了
		</script>

形式参数和实际参数不相符的情况:

形式参数>实际参数 ---->最终输出的结果:NaN

形式参数<实际参数---->最终会传递前面的值进行求和,而后面的值就直接去掉了.

6.练习

判断月份的天数

<head>
		<meta charset="UTF-8">
		<title>输入月份，显示天数</title>
		<script type="text/javascript">
			// 定义函数
			function check () {
				// 获取用户输入的表单中的内容
				// getElementById("id属性值")
				var month = document.getElementById("month").value;// 这句话的意思:获取当前表单标签中的内容
				
				// switch语句：month:string类型
				// 函数转换 parseInt
				month = parseInt(month);
				switch (month){
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 10:
					case 12:
						// 提示框显示
						alert(month + "月有31天！");
						break;
					case 4:	
					case 6:	
					case 9:	
					case 11:
						alert(month + "月有30天！");
						break;
					case 2:	
						alert(month + "月平年有28天，闰年有29天！");
						break;
					default:
						alert("地球上没有该月份")
						break;
				}
			}
		</script>
	</head>
	<body>
		<!--onclick：单机点击-->
		请输入月份的值：<input type="text" id="month" />
		<input type="button" value="查询" οnclick="check()" />
	</body>