JavaScript

# JavaScript 基础知识

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

# 一、JS的基本语法与结构

# 1.1 JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body>和 </body>最后部分或最前部分中。

内嵌方式

<script type="text/javascript">
    window.alert("Hello,JavaScript")
    console.log("Hello,JavaScript")
    document.write("JavaScript")
    </script>

1
2
3
4
5

外部引入方式

<script src="js/test.js" type="text/javascript" charset="utf-8"></script>

# 1.2 JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。该方法是 HTML DOM (opens new window) 中定义的。

innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

# 1.3 JavaScript基本语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

# 1. 字面量

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e):
字符串（String）字面量 可以使用单引号或双引号 :"John Doe" 'John Doe'
数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]
对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}

# 2. 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

var x, length

x = 5

length = 6

1
2
3
4
5

# 3. 操作符

JavaScript使用 算术运算符 来计算值: (5 + 6) * 10

JavaScript使用赋值运算符给变量赋值

x = 5
y = 6
z = (x + y) * 10

1
2
3

# 4. 关键词

JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量：

var x = 5 + 6;
var y = x * 10;

1
2

# 5. 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

1
2
3
4
5

# 6. 函数

JavaScript 语句可以写在函数内，函数可以重复引用：引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘于 b 的结果
}

1
2
3

function calc() {
			var n = 1;
			for (let t = 9; t >= 1; t--) {
				n = (n+1)*2;
			}
			console.log(n);
			document.getElementById("result").innerHTML ="一共有"+ n +"个桃子";
		}

1
2
3
4
5
6
7
8

# 1.4 JavaScript 语句

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello Dolly" ：

实例

document.getElementById("demo").innerHTML = "你好 Dolly.";

# 1. JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。下表列出了 JavaScript 语句标识符 (关键字) ：

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

# 1.5 JavaScript 变量

# 1.声明（创建） JavaScript 变量

var carname;

carname="Volvo";

var carname="Volvo";

var lastname="Doe", age=30, job="carpenter";

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

1
2
3
4
5
6
7
8
9
10
11

# 1.6 JavaScript 比较和逻辑运算符

比较和逻辑运算符用于测试 true 或者 false。

# 1. 比较运算符

运算符	描述
==	判断
===	绝对等于（值和类型均相等）
!=	不等于
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）
>	大于
<	小于
>=	大于或等于
<=	小于或等于
=	赋值

# 2.逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

&& and与
|| or或
! not非

# 二、JavaScript 流程语句

# 2.1 if…else 语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
JavaScript三目运算 - 当条件为true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

# 1. 语法

if (condition){       
    当条件为 true 时执行的代码
}

1
2
3

if (condition){       
    当条件为 true 时执行的代码      
}else{        
    当条件不为 true 时执行的代码        
}

1
2
3
4
5

if (condition1){        
    当条件 1 为 true 时执行的代码
}else if (condition2){        
    当条件 2 为 true 时执行的代码
}else{        
    当条件 1 和 条件 2 都不为 true 时执行的代码
}

1
2
3
4
5
6
7

# 2. 实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分数页面优化输出</title>
	</head>
	<body>
		<form action="" method="post">
			<!-- 1、设置页面 -->
			<input type="text" id="score" placeholder="请输入你的分数" />
			<!-- 2、设置事件驱动提交按钮 -->
			<input type="button" name="anniu" value="领取奖励" onclick="jiangli()" />
			<!-- js与dom交互 -->
			<div id="msg"></div>
		</form>
	</body>
	<script type="text/javascript">
		// 3、自定义函数,函数声明
		function jiangli() {
			// div中msg初始化
			document.getElementById("msg").innerHTML = "";
			// 4、输入框 得到页面上文本框text的score中的输入的值
			let a = document.getElementById("score").value;
			// 5、类型转换
			a = parseFloat(a);
			// 6、控制输入数字为1-100；
			if (!(a >= 0 && a <= 100)) {
				document.getElementById("msg").innerHTML = "请输入0-100范围内的分数！";
				return;
			}
			// 7、分数a的条件判断
			let msg = ""
			if (a >= 90 && a <= 100) {
				msg = "奖励两根雪糕！";
			} else if (a >= 80) {
				msg = "奖励一根冰棒！";
			} else if (a >= 70) {
				msg = "奖励女子单打！";
			} else if (a >= 60) {
				msg = "奖励男子单打！";
			} else if(a >= 0) {
				msg = "奖励男女组合双打！";
			}
			document.getElementById("msg").innerHTML = msg;
		}
	</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 2.2 switch case 语句

# 1. 语法

<script type="text/javascript">
		switch (n) {
			case 1:
				执行代码块 1
				break;
				
			case 2:
				执行代码块 2
				break;
			default:
				n 与 case 1 和 case 2 不同时执行的代码
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2. 实例

<script type="text/javascript">
		// 小括号内是一个变量或表达式
		let a = "A";
		switch (a) {
			// 用a和case后面的每个值进行一次匹配
			case 'A':
				// hello =>执行的代码块
				console.log('A')
				break; // break跳出
			case 'B':
				// hello =>执行的代码块
				console.log('B')
				break; // break跳出
			case 'C':
				// hello =>执行的代码块
				console.log('C')
				break; // break跳出
			default: //上面所有的case都不匹配，走default的代码块
				console.log('default')
				break;
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 2.3 while 循环

while 循环会在指定条件为真时循环执行代码块。

先判断条件，再执行循环体

# 1. 语法

while (条件)
   {
  需要执行的代码
   }

1
2
3
4

# 2. 实例

<script type="text/javascript">
		// 自定义变量
		function calc() {
			let i = 101;
			
			let str ="";
			// 循环条件
			while (i <= 199) {
				// 条件判断,满足则输出结果
				if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {
					console.log("人数可能为" + i + "人");
					str = str +i+" "; 
				}
				// i自增
				i++;
			}
			document.getElementById("result").innerHTML = str;
		}
	</script>

//--------------------------------------------------------------------------------

<script type="text/javascript">
		// 循环结构常见要素：循环变量；循环条件；
		// while循环
		let i = 1;	//循环变量
		while(i<=100){	//循环条件；一定在某一刻为false
			console.log("helloword" + i)
			i++;	//循环变量要变化，目的是为了在某一刻循环条件为false;
			// 循环内部，通过特定的条件判断来执行跳出循环操作
			break;
		}	
	</script>

//--------------------------------------------------------------------------------

<script type="text/javascript">
		function calc() {
			// 获取文本框中输入的值；
			let num = document.getElementById("num").value;
			num = parseInt(num);
			let i = 1; //循环变量
			let sum = 0; //定义一个变量和sum，初始值为0；
			while (i <= num) { //循环条件；一定在某一刻为false
				// 累加
				sum = sum + i; // sum+ = i;
				i++;
			}
			document.getElementById("result").innerHTML = sum;
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

// 1 <= 4 判断完了  再++ 2
// 2 <= 4 判断完了  再++ 3
// 3 <= 4 判断完了  再++ 4
// 4 <= 4 判断完了  再++ 5
// 5 <= 4 判断完了  再++ 6
<script type="text/javascript">
		let i = 1;
		while(i++<=4);
		console.log("i"+i);
	</script>

i++   //先引用后自增
++i	  //先自增后引用

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.4 do/while 循环

先执行一次，再判断。当程序执行到 while 循环时，会首先判断小括号里的值，如果值：

为假：结束while语句，程序继续向下走

为真：会把while循环里大括号里的所有内容执行一次，全部执行完毕之后，会再度来到条件处

判断小括号里的值，如果值条件一直为true ，且没有break return，那么循环会一直循环下去（死循环）

# 1. 语法

 do   {  需要执行的代码   } while (循环条件);

# 2. 实例

let i =1; 
do
   {
  console.log("i"+i);
   }
 while (i--<=0);

1
2
3
4
5
6

# 2.5 for 循环

循环可以将代码块执行指定的次数。

先判断条件，再执行循环体

# 1.语法

for (语句 1; 语句 2; 语句 3)        
  {        
  被执行的代码块        
  }

1
2
3
4

# 2.实例

<script type="text/javascript">
			let sum = 0;
			// 循环条件，一定要在某一刻为false
			for (let i = 0; i<= 100;i++) {
				if (i%3 == 0) {
					console.log("i = " + i);
					// 累加求和
					sum = sum + i;
				}
				// 累加
			}
			console.log("sum = " + sum);
		</script>

//--------------------------------------------------------------------------------
<script type="text/javascript">
		function calc() {
			// 获取文本框中输入的值；
			let num = document.getElementById("num").value;
			num = parseInt(num);
			let sum = 0; //定义一个变量和sum，初始值为0；
			for (let i = 1;i <= num;i++) { //循环条件；一定在某一刻为false
				// 累加
				sum = sum + i; // sum+ = i;
			}
			document.getElementById("result").innerHTML = sum;
		}
	</script>

//--------------------------------------------------------------------------------
<!-- 操场100多人,三人一组多1人,四人一组多2人,五人一组多3人 -->
	<script type="text/javascript">
		// 自定义变量
		function calc() {
			let str ="";
			// 循环条件
			for (i = 101;i <= 199;i++) {
				// 条件判断,满足则输出结果
				if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {
					console.log("人数可能为" + i + "人");
					str = str +i+" "; 
				}
			}
			document.getElementById("result").innerHTML = str;
		}
	</script>

//--------------------------------------------------------------------------------
<script type="text/javascript">
		// 自定义函数
		function calc() {
			// 定义变量
			let h = 0.1;  //纸张高度
			let c = 0;    //折纸次数
			let height = 8848000;    //珠峰高度
			// 循环结构
			for(;h <= height;){
				//折纸一次
				h = h * 2;
				//折纸次数自增
				c++;
				console.log("第"+c+"次折纸"+"高度为"+h+"mm");
			}
			// 循环结束
			console.log("折纸"+c+"次后"+"高度大于8848000mm");
			document.getElementById("result").innerHTML ="折纸"+c+"次后"+"高度大于8848000mm";
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

# 2.5 for in

let array = [1,2,3,5]

for(let v1 in array){
    
}

1
2
3
4
5

# 2.6 for of

# 2.6 Break 和 Continue关键字

break 语句可用于跳出循环。

continue 结束档次循环，尝试进行下一次循环。语句跳出循环后，会继续执行该循环之后的代码（如果有的话）

# 1.Break 语句

<script type="text/javascript">
for (i=0;i<10;i++)
{
    if (i==3){
        break;
    }
    x=x + "The number is " + i + "<br>";
}
	</script>

1
2
3
4
5
6
7
8
9

# 2.Continue 语句

<script type = "text/javascript" >
			for (i = 0; i <= 10; i++) {
				if (i == 3) continue;
				x = x + "The number is " + i + "<br>";
			}
	</script>

1
2
3
4
5
6

# 2.7 嵌套循环

# 1. for套for循环

<script type="text/javascript">
		// 外循环，外面的循环先执行
		for (let i = 0; i <=6; i++) {
			// 当外循环= 0
			// 内循环 j=0 循环到6
			for (let j = 0; j < 6; j++) {
				console.log(j);
			}
		}
	</script>

1
2
3
4
5
6
7
8
9
10

for循环嵌套实例

<script type="text/javascript">
		// 我国古代数学家张丘建在《算经》一书中提出的数学问题：
		// 鸡翁一值钱五，鸡母一值钱三，鸡雏三值钱一。
		// 百钱买百鸡，问鸡翁、鸡母、鸡雏各几何？
		// 100元 全部拿去买公鸡 最少买0只，最多买20只；
		// 100元 全部拿去买母鸡 最少买0只，最多买33只；
		// 100元 全部拿去买小鸡 最少买0只，最多买100只；
		// 1、公鸡数量
		for (let i = 0; i < 20; i++) {
			// 2、母鸡数量
			for (let j = 0; j < 33; j++) {
				// 3、小鸡数量
				let k;
				// 4、数量与总钱数条件判断
				if ((i + j + k == 100) && (i * 5 + j * 3 + k / 3 == 100)) {
					console.log("公鸡买" + i + "只" + "母鸡买" + j + "只" + "小鸡买" + k + "只");
				}
			}
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

公鸡买0只母鸡买25只小鸡买75只公鸡买4只母鸡买18只小鸡买78只公鸡买8只母鸡买11只小鸡买81只公鸡买12只母鸡买4只小鸡买84只

<script type="text/javascript">
		// 100元换钱
		// 50元 全部拿去换 最少0，最多2；
		// 20元 全部拿去换 最少0，最多5；
		// 10元 全部拿去换 最少0，最多10；
		for (let i = 0; i <= 2; i++) {
			for (let j = 0; j <= 5; j++) {
				// 4、张数条件判断
				for (let k = 0; k <= 10; k++) {
					if (i * 50 + j * 20 + k * 10 == 100) {
						console.log("50元换" + i + "张;" + "20元换" + j + "张;" + "10元换" + k + "张");
					}
				}
			}
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

50元换0张;20元换0张;10元换10张 50元换0张;20元换1张;10元换8张 50元换0张;20元换2张;10元换6张 50元换0张;20元换3张;10元换4张 50元换0张;20元换4张;10元换2张 50元换0张;20元换5张;10元换0张 50元换1张;20元换0张;10元换5张 50元换1张;20元换1张;10元换3张 50元换1张;20元换2张;10元换1张 50元换2张;20元换0张;10元换0张

# 2.8 打印图像

外循环打印行，内循环打印列

<script type="text/javascript">
		// 外循环打印行
		for (let i = 1; i <= 10; i++) {
			let star = " ";
			// 内循环打印每行的列(*号的个数)
			for (let j = 1; j <= i; j++) {
				// log每次输出都换一行
				// 每次打印之前先凭借好*字符串，再每一行集中打印一下
				star = star + "*"
			}
			console.log(star);
		}
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 三、JavaScript 函数

在JavaScript中，函数即对象，可以随意地被程序操控，函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用域中的任何变量。

1、定义函数 function jiangli(){ }

2、调用函数 事件=函数名() 对象名.事件=函数 函数直接项目调用 函数自调用—递归调用

# 3.1 定义函数

JavaScript 函数语法

function functionname(){
    执行代码
}

function functionname(参数){
    执行代码
    return;   //返回值
}

1
2
3
4
5
6
7
8

无参数，无返回值

无参数，有返回值

有参数，无返回值

有参数，有返回值 (常用)

<script type="text/javascript">
			// 3、自定义函数,函数声明
			function jiangli(){
				document.getElementById("msg").innerHTML = "";
				// 4、输入框 得到页面上文本框text的score中的输入的值
				let a = document.getElementById("score").value;
				// 5、类型转换
				a = parseFloat(a);
				
				// 6、控制输入数字为1-100；
				if(!(a>=0 && a<=100)){
					document.getElementById("msg").innerHTML = "输入的范围应该在0-100之间!";
					return;
				}
				let msg = "";
				// 7、分数a的条件判断
				if (a >= 90 && a <= 100) {
					msg = "奖励两根雪糕！";
				} else if (a >= 80) {
					msg = "奖励一根冰棒！";
				} else if (a >= 70) {
					msg = "奖励女子单打！";
				} else if (a >= 60) {
					msg = "奖励男子单打！";
				} else if (a >= 0) {
					msg = "奖励男女组合双打！";
				}
				// 得到页面上div中msg的值
				document.getElementById("msg").innerHTML = msg;
			}
		</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 3.2 调用函数

# 1.`事件 = 函数名()`

function fun01(){
    
}

1
2
3

# 2.`对象名.事件=函数`

window.onload = fun02();

# 3. `函数直接项目调用`

function fun02(){
    fun01();
}

1
2
3

# 4. `函数自调用—递归调用`

<input type="button" value="立即组成" onclick="fun03()" />

function fun03(){
    fun03();
}

1
2
3
4
5

function fun03(){
    console.log("fun03")
    if(.....){                // 必须保证不能无限制的进行自我调用
       fun03();
       }
}

1
2
3
4
5
6

function fun04(参数){    //写在小括号内部的就是参数，参数就是这个函数执行的条件；
                        //函数要完成这个特定的功能，参数是必须的，否则函数将无法执行；
}

1
2
3

注意：

写在小括号内部的就是参数，参数就是这个函数执行的条件；

函数要完成这个特定的功能，参数是必须的，否则函数将无法执行；

// 典型案例
function fun04(选择商品，付款){     //参数
    .....
    将商品从出货口出来
    //返回值
    return 矿泉水
}

1
2
3
4
5
6
7

function fun05(n){
    if(n==1);{
        return 1;
    }
    return fun05(n-1)+n;
}
function fun06(n){
    let result = fun05(n);
    console.log("fun==>"+result);
}

1
2
3
4
5
6
7
8
9
10

# 四、JavaScript 对象—数组

数组对象的作用是：使用单独的变量名来存储一系列的值。

# 4.1 创建数组

<script type="text/javascript">
			// 定义数组
			let array01 = ['apple','banana'];
			// 访问数组元素
			console.log(array01);
			// 下标访问
			console.log(array01[0]+";"+array01[1]);
		</script>

1
2
3
4
5
6
7
8

// new 一个数组
<script type="text/javascript">
			let array01 = new Array('a','b','c');
// 遍历数组
			array01.forEach(function (item){
				console.log(item);
			})
		</script>

1
2
3
4
5
6
7
8

// new 一个数组
<script type="text/javascript">			
			let array02 = new Array(3);
			console.log(array02.length);
// 遍历数组
			array02.forEach(function (item){
				console.log("==>"+item);
			})
		</script>

1
2
3
4
5
6
7
8
9

let array03 = Array.of(1, 2.3, 4, 5)
			array04.forEach(function(item) {
				console.log("==>" + item);
			})

1
2
3
4

["apple", "banana"]

apple;banana

# 4.2 遍历数组

# 1. forEach遍历数组

<script type="text/javascript">
			// 定义数组
			let array01 = ['apple','banana'];	
			// forEach遍历数组
			array01.forEach(function(item,index){
				console.log(item+";"+index);
			})
		</script>

1
2
3
4
5
6
7
8

apple;0 banana;1

# 2. for遍历数组

<script type="text/javascript">
			// 定义数组
			let array01 = ['apple','banana'];
			// for遍历数组
			for(let i = 0; i < array01.length; i++){
				console.log(array01[i]+";"+i);
			}
		</script>

1
2
3
4
5
6
7
8

apple;0 banana;1

# 4.3 数组操作

添加元素到数组的末尾

var newLength = fruits.push('Orange');
// newLength:3; fruits: ["Apple", "Banana", "Orange"]

1
2

添加元素到数组的头部

var newLength = fruits.unshift('Strawberry') // add to the front
// ["Strawberry", "Banana"];

1
2

删除数组末尾的元素

var last = fruits.pop(); // remove Orange (from the end)
// last: "Orange"; fruits: ["Apple", "Banana"];

1
2

删除数组最前面（头部）的元素

var first = fruits.shift(); // remove Apple from the front
// first: "Apple"; fruits: ["Banana"];

1
2

# 1. 删除首位和末尾实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<input type="text" id="number" placeholder="请输入一个数字" />
			<input type="button" value="添加" onclick="addMumber()" />
			<input type="button" value="删除数组第一个元素" onclick="removeElement('first')" />
			<input type="button" value="删除数组最后一个元素" onclick="removeElement('last')" />
			<div id="result"></div>
		</form>
		<script type="text/javascript">
			// 1、定义一个数组
			let array = [];
			// 2、自定义函数addMumber()
			function addMumber() {
				// 3、获取用户text中输入的数值并字符强转
				let number = parseInt(document.getElementById("number").value);
				// 4、先判断当前要添加的值和数组中的元素相比是否重复
				// indexOf 查找我们的数组中是否包含某个元素，如果包含返回特定的索引，不包含返回-1;
				if (array.indexOf(number) != -1) {
					alert("重复了！");
					return;
				}
				// 7、添加后清空rusult页面的值；
				document.getElementById("result").innerHTML = " ";
				// 5、如果不重复将text中的值添加到数组
				array.push(number);
				// 6、将数组元素遍历并显示在<div id="result">中
				array.forEach(function(item) {
					console.log(item);
					document.getElementById("result").innerHTML += item + "<br />"
				})
			}

			function removeElement(pos) {
				if (array.length > 0) {
					if (pos == "first") {
						let f = array.shift();
						console.log("f" + f);
					} else if (pos == "last") {
						let p = array.pop();
						console.log("p" + p);
					}
					console.log(array);
					document.getElementById("result").innerHTML = " ";

					// 将数组元素遍历并显示在div中
					array.forEach(function(item) {
						console.log(item);
						document.getElementById("result").innerHTML += item + "<br />"
					})
				} else {
					alert("数组中无元素！");
				}
			}
		</script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# 2. 找出某个元素在数组中的索引

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]
var pos = fruits.indexOf('Banana');
// 1

1
2
3
4

<script type="text/javascript">
			// 1、定义一个数组
			let array = [];
			// 2、自定义函数addMumber()
			function addMumber() {
				// 3、获取用户text中输入的数值并字符强转
				let number = parseInt(document.getElementById("number").value);
				// 4、先判断当前要添加的值和数组中的元素相比是否重复
				// indexOf 查找我们的数组中是否包含某个元素，如果包含返回特定的索引，不包含返回-1;
				if (array.indexOf(number) != -1) {
					alert("重复了！");
					return;
				}
				// 7、添加后清空rusult页面的值；
				document.getElementById("result").innerHTML = " ";
				// 5、如果不重复将text中的值添加到数组
				array.push(number);
				// 6、将数组元素遍历并显示在<div id="result">中
				array.forEach(function(item) {
					console.log(item);
					document.getElementById("result").innerHTML += item + "<br />"
				})
			}
		</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 3. 找出数组中最大元素和最小元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<input type="text" id="number" placeholder="请输入一个数字" />
			<input type="button" value="添加" onclick="addMumber()" />
			<input type="button" value="删除数组第一个元素" onclick="removeElement('first')" />
			<input type="button" value="删除数组最后一个元素" onclick="removeElement('last')" />
			<input type="button" value="最大值" onclick="showMax()" />
			<input type="button" value="最小值" onclick="showMin()" />
			<div id="result"></div>
		</form>
		<script type="text/javascript">
			// 1、定义一个数组
			let array = [];
			// 2、自定义函数addMumber()
			function addMumber() {
				// 3、获取用户text中输入的数值并字符强转
				let number = parseInt(document.getElementById("number").value);
				// 4、先判断当前要添加的值和数组中的元素相比是否重复
				// indexOf 查找我们的数组中是否包含某个元素，如果包含返回特定的索引，不包含返回-1;
				if (array.indexOf(number) != -1) {
					alert("重复了！");
					return;
				}
				// 7、添加后清空rusult页面的值；
				document.getElementById("result").innerHTML = " ";
				// 5、如果不重复将text中的值添加到数组
				array.push(number);
				// 6、将数组元素遍历并显示在<div id="result">中
				array.forEach(function(item) {
					console.log(item);
					document.getElementById("result").innerHTML += item + "<br />"
				})
			}

			function removeElement(pos) {
				if (array.length > 0) {
					if (pos == "first") {
						let f = array.shift();
						console.log("f" + f);
					} else if (pos == "last") {
						let p = array.pop();
						console.log("p" + p);
					}
					console.log(array);
					document.getElementById("result").innerHTML = " ";

					// 将数组元素遍历并显示在div中
					array.forEach(function(item) {
						console.log(item);
						document.getElementById("result").innerHTML += item + "<br />"
					})
				} else {
					alert("数组中无元素！");
				}
			}

			function showMax() {
				// 获取array中的最大值
				// 假设数组中第一个为最大值，将最大值存入自定义max中
				let max = array[0];
				// 遍历比较后面所有数组元素；
				// 如果max < array [i] ，将array [i] == max;
				for (let i = 1; i < array.length; i++) {
					if (max < array[i]) {
						max = array[i];
					}
					document.getElementById("result").innerHTML = ("数组中最大值为：" + max);
				}
			}

			function showMin() {
				// 获取array中的最大值
				// 假设数组中第一个为最大值，将最大值存入自定义max中
				let min = array[0];
				// 遍历比较后面所有数组元素；
				// 如果min > array [i] ，将array [i] = min;
				for (let i = 1; i < array.length; i++) {
					if (min > array[i]) {
						min = array[i];
					}
					document.getElementById("result").innerHTML = ("数组中最小值为：" + min);
				}
			}
		</script>
	</body>
</html>

# 4. 将数字插入数组中且不能有重复数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<input type="text" id="number" placeholder="请输入一个数字" />
			<input type="button" value="添加" onclick="addMumber()" />
			<div id="result"></div>
		</form>
	</body>

	<script type="text/javascript">
		// 1、定义一个数组
		let array = [];
		// 2、自定义函数addMumber()
		function addMumber() {
			// 3、获取用户text中输入的数值并字符强转
			let number = parseInt(document.getElementById("number").value);
			// 4、先判断当前要添加的值和数组中的元素相比是否重复
			for (let i = 0; i < array.length; i++) {
				if (array[i] == number) {
					alert("重复了！");
					return;
				}
			}
			// 7、添加后清空rusult页面的值；
			document.getElementById("result").innerHTML = " ";
			// 5、如果不重复将text中的值添加到数组
			array.push(number);
			// 6、将数组元素遍历并显示在<div id="result">中
			array.forEach(function(item,index) {
				console.log(item,index);
				document.getElementById("result").innerHTML += item+index + "<br/>";
			})
		}
	</script>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 五、JavaScript 内置对象

# 5.1 Date

创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp (opens new window)

即自1970年1月1日（UTC）起经过的毫秒数。

# 1. 常见对象

const date1 = new Date('December 17, 1995 03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

const date2 = new Date('1995-12-17T03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

console.log(date1 === date2);
// expected output: false;

console.log(date1 - date2);
// expected output: 0

1
2
3
4
5
6
7
8
9
10
11

# 2. 定时器

setInterval(function() {
				// 设置img的src是数组中的某个元素
				document.getElementById("pic").src = arraypic[index];
				
				//如果已经是最后一张了，index变成0； 
				if (index == 3) {
					index = 0;
				} else {
					index++;
				}
			}, 2000); //每隔2秒执行一次函数

1
2
3
4
5
6
7
8
9
10
11

# 3. 轮播图小练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>

	</head>
	<body>
		<div id="mog">
			<!-- 默认图片 -->
			<img src="img/01.jpg" id="pic">
		</div>


		<script type="text/javascript">
			// 数组定义，存储图片路径
			let arraypic = ['img/01.jpg', 'img/02.jpg', 'img/03.jpg', 'img/04.jpg'];

			// 定义索引，从1开始
			let index = 1;
			setInterval(function() {
				// 设置img的src是数组中的某个元素
				document.getElementById("pic").src = arraypic[index];

				//如果已经是最后一张了，index变成0； 
				if (index == 3) {
					index = 0;
				} else {
					index++;
				}
			}, 2000); //每隔2秒执行一次函数
		</script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 5.2 Math

Math.E (opens new window)

欧拉常数，也是自然对数的底数，约等于 2.718。

Math.PI (opens new window)

圆周率，一个圆的周长和直径之比，约等于 3.14159。

Math.SQRT2 (opens new window)

2 的平方根，约等于 1.414。

Math.sqrt(x) (opens new window)

返回一个数的平方根。

Math.round(x) (opens new window)

返回四舍五入后的整数。

Math.pow(x, y) (opens new window)

返回一个数的 y 次幂。

Math.max() (opens new window)

返回一组数中的最大值

Math.random() (opens new window)

返回一个0 到1之间的伪随机数。

<script type="text/javascript">
			for (var i = 0; i <= 100; i++) {
				console.log(Math.random());
			}
		</script>

1
2
3
4
5

# 其他知识点汇总

input中name和id的区别：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。

id：作为标签的唯一标识。一般用于css和js中引用,
name：用于表单提交,只有加了name属性的标签元素才会提交到服务器

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。使用 document.write() 方法将内容写到 HTML 文档中。
eval(num1+op+num2) 计算函数
placeholder：框内提示语
function calc（）{ } ：自定义函数声明
onclick = "calc()" 事件驱动—单击事件
onchange = "showFPA()" 事件驱动—选择事件
let var 定义变量
promot 弹窗输入，是用于显示提示对话框
console.log(); 控制台输出
a = parseFloat(a) 强转为数值类型
alert("请输入0-100范围内的分数！") 浏览器弹窗提示框
if...else if 多条件判断，某一个区间范围的值
swich-case 多重条件，某个值是否相等
循环结构体三要素：循环变量；循环条件；变量要变化
sum = sum+i; sum+ = i;
循环次数固定用for循环，循环次数不固定用while循环；
let c 只能在局部变量内使用
var c 可在外部使用
循环嵌套时，循环次数多的放在内循环，循环次数少的放在外循环。
a = a+1 => a += 1
str += j + "x" + i + "=" + (i * j) + "  &nbsp";

# 综合练习题

输入分数，求最高分，最低分，平均分和排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#score {
				width: 150px;
				height: 30px;
				font-size: larger;
			}

			#add {
				width: 150px;
				height: 40px;
				font-size: larger;
				background-color: #7FFF00;
				color: black;
			}

			#del {
				width: 150px;
				height: 40px;
				font-size: larger;
				background-color: #ff0000;
				color: black;
			}

			#singerw {
				width: 150px;
				height: 40px;
				font-size: larger;
			}

			#result {
				width: 500px;
				height: 100px;
				font-size: larger;
			}
		</style>
	</head>
	<body>
		<form id="shuri" action="" method="post">
			<input type="text" id="score" placeholder="请输入学生分数" />
			<button type="button" id="add" onclick="addScore()">添加分数</button>
			<button type="button" id="del" onclick="chongxin()">清空所有成绩</button>
			<button type="button" id="singerw" onclick="showMax()">最高分</button>
			<button type="button" id="singerw" onclick="showMin()">最低分</button>
			<button type="button" id="singerw" onclick="showAvg()">平均分</button>
			<button type="button" id="singerw" onclick="showSortgao()">降序</button>
			<button type="button" id="singerw" onclick="showSortdi()">升序</button>

		</form>
		<div id="result"></div>



		<script type="text/javascript">
			// 3.定义数组存取分数
			let arrayscore = [];
			// 1.自定义函数
			function addScore() {
				// 2.获取用户在text中输入的值并强转为数值类型
				let score = parseInt(document.getElementById("score").value);

				// 6.添加后清空rusult页面的值；
				document.getElementById("result").innerHTML = " ";

				// 7.如果输入非数字，提示错误
				if (isNaN(score)) {
					document.getElementById("result").innerHTML = "你输入的是非数字，请输入正确的数字分数！" + "<br />";
					return;
					// 8.分数范围判断，小于0或大于100提示错误
				} else if (!(score >= 0 && score <= 100)) {
					document.getElementById("result").innerHTML = "你输入的分数范围有误，请输入0-100范围内的分数！" + "<br />";
				} else {
					// 4.将text中的值添加到数组
					arrayscore.push(score);
					console.log(arrayscore);
				}

				// 5.将数组元素遍历并显示在<div id="result">中
				arrayscore.forEach(function(item) {
					document.getElementById("result").innerHTML += item + "<br />";
				})
			}

			function chongxin() {
				arrayscore.splice(0, arrayscore.length); //清空数组 
				console.log(arrayscore); // 输出 []，空数组，即被清空了
				document.getElementById("result").innerHTML = "";
			}


			// 判断数组中分数的最高分
			function showMax() {
				// 获取array中的最大值
				// 假设数组中第一个为最大值，将最大值存入自定义max中
				let max = arrayscore[0];
				// 遍历比较后面所有数组元素；
				// 如果max < array [i] ，将array [i] == max;
				for (let i = 1; i < arrayscore.length; i++) {
					if (max < arrayscore[i]) {
						max = arrayscore[i];
					}
					document.getElementById("result").innerHTML = ("最高分为：" + max + "分");
				}
			}

			// 判断数组中分数的最低分
			function showMin() {
				// 获取array中的最小值
				// 假设数组中第一个为最小值，将最小值存入自定义max中
				let min = arrayscore[0];
				// 遍历比较后面所有数组元素；
				// 如果min > array [i] ，将array [i] = min;
				for (let i = 1; i < arrayscore.length; i++) {
					if (min > arrayscore[i]) {
						min = arrayscore[i];
					}
					document.getElementById("result").innerHTML = ("最低分为：" + min + "分");
				}
			}

			// 判断数组中分数的平均分
			function showAvg() {
				// 自定义平均数，将数组的平均数存储到vag中
				let sum = 0;
				// 遍历比较后面所有数组元素；
				for (let i = 0; i < arrayscore.length; i++) {
					sum += arrayscore[i];
				}
				let avg = sum / arrayscore.length;
				document.getElementById("result").innerHTML = ("平均数为：" + avg + "分");
			}

			// 数组中分数排序，降序！
			function showSortgao() {
				arrayscore.sort(function(a, b) {
					return b - a;
				});
				console.log(arrayscore);
				document.getElementById("result").innerHTML = ("成绩从高到底排序为" + arrayscore);
			}

			// 数组中分数排序，降序！
			function showSortdi() {
				arrayscore.sort(function(a, b) {
					return a - b;
				});
				console.log(arrayscore);
				document.getElementById("result").innerHTML = ("成绩从低到高升序为" + arrayscore);
			}
		</script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

2.明星介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100%;
				height: 100%;
				background-image;
			}
			#remark{
				font-size: larger;
			}
			
			#image{
				width: 35%;
				float: left;
			}
			
			#video{
				
				width: 525px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<select onchange="ShowStar(this.value)">
			<option value="0">--请选择--</option>
			<option value="1">张子枫</option>
			<option value="2">迪丽热巴</option>
			<option value="3">古力娜扎</option>
		</select>
		<div id="div1">
			<p><a id="remark"> 默认页面 </a></p>
			<p><img id="image" src="img/reba.jpg" /></p>
			<video id="video" width="600" height="400" controls="controls">
				<source src="video/zifeng.mp4" type="audio/mp4"></source>
			</video>
		</div>


		<script type="text/javascript">
			// 用数组来存取文字
			var stars = [];
			stars[0] = "请选择一位明星";
			stars[1] = "子枫妹妹，我爱你";
			stars[2] = "热巴热巴我爱你";
			stars[3] = "古力娜扎大长腿";
			// 用数组来存取图片
			var starimage = ['img/reba.jpg', 'img/zifen.jpg', 'img/reba.jpg', 'img/nazha.jpg'];
			// 用数组来存取视频
			var starvideo = ['video/reba.mp4', 'video/zifeng.mp4','video/reba.mp4','video/nazha.mp4'];
			// 自定义函数，采用Index参数
			function ShowStar(index) {
				document.getElementById("remark").innerHTML = stars[index];
				document.getElementById("image").src = starimage[index];
				document.getElementById("video").src = starvideo[index];
			}
		</script>

	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# JavaScript 思维导图

编辑

#JavaWeb

← HTML基础知识 jsp 动态网页开发技术→

JavaScript

# JavaScript 基础知识

# 一、JS的基本语法与结构

# 1.1 JavaScript 用法

# 1.2 JavaScript 输出

# 1.3 JavaScript基本语法

# 1. 字面量

# 2. 变量

# 3. 操作符

# 4. 关键词

# 5. 数据类型

# 6. 函数

# 1.4 JavaScript 语句

# 1. JavaScript 语句标识符

# 1.5 JavaScript 变量

# 1.声明（创建） JavaScript 变量

# 1.6 JavaScript 比较和逻辑运算符

# 1. 比较运算符

# 2.逻辑运算符

# 二、JavaScript 流程语句

# 2.1 if…else 语句

# 1. 语法

# 2. 实例

# 2.2 switch case 语句

# 1. 语法

# 2. 实例

# 2.3 while 循环

# 1. 语法

# 2. 实例

# 2.4 do/while 循环

# 1. 语法

# 2. 实例

# 2.5 for 循环

# 1.语法

# 2.实例

# 2.5 for in

# 2.6 for of

# 2.6 Break 和 Continue关键字

# 1.Break 语句

# 2.Continue 语句

# 2.7 嵌套循环

# 1. for套for循环

# 2.8 打印图像

# 三、JavaScript 函数

# 3.1 定义函数

# 3.2 调用函数

# 1.事件 = 函数名()

# 2.对象名.事件=函数

# 3. 函数直接项目调用

# 4. 函数自调用—递归调用

# 四、JavaScript 对象—数组

# 4.1 创建数组

# 4.2 遍历数组

# 1. forEach遍历数组

# 2. for遍历数组

# 4.3 数组操作

# 1. 删除首位和末尾实例

# 2. 找出某个元素在数组中的索引

# 3. 找出数组中最大元素和最小元素

# 4. 将数字插入数组中且不能有重复数字

# 五、JavaScript 内置对象

# 5.1 Date

# 1. 常见对象

# 2. 定时器

# 3. 轮播图小练习

# 5.2 Math

# 其他知识点汇总

# 综合练习题

# JavaScript 思维导图

# 1.`事件 = 函数名()`

# 2.`对象名.事件=函数`

# 3. `函数直接项目调用`

# 4. `函数自调用—递归调用`