JavaScript教程

博客主页：划水的阿瞒的博客主页
欢迎关注🖱点赞🎀收藏⭐留言✒
系列专栏：JavaScript 首发时间：🎞2022年8月5日🎠
如果觉得博主的文章还不错的话，请三连支持一下博主哦

1.JavaScript介绍

1.1 JavaScript是什么

JavaScript是一种网页编程技术，大部分使用者将它用于创建动态交互网页JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法
JavaScript是一种使用简单，功能强大的编程语言发展历史 网景公司在Netscape2.0首先推出了JavaScript
微软公司从IE3.0开始提供对客户端JavaScript的支持，并另取名为JScript

1.2 JavaScript的特点以及使用范围

特点：
简单易用
简洁易用，与Java有类似的语法
可以使用任何文本编辑工具编写
只需要浏览器就可以执行程序
解释执行
事先不编译
逐行执行
无需进行严格的变量声明 var i = 10;
基于对象
内置大量现成对象，编写少量程序可以完成目标字符类型的函数
范围：
适合做哪些事情
客户端数据计算
客户端表单合法性验证
浏览器对象的调用
浏览器事件的触发
网页特殊显示效果制作
不适合做哪些事情
大型应用程序 ,图像、多媒体处理, 网络实时通讯应用.

1.3 JavaScript和Java的区别：

Script与Java运行方式不一样 JavaScript是解释执行 Java是编译执行 JavaScript不是Java的简化版本
逻辑运算符、语句结构类似 变量申明、对象调用等不同 JavaScript和Java功能实现不一样 JavaScript通过浏览器实现程序功能
Java通过Java虚拟机实现程序功能

2.如何在HTML页面中使用JavaScript

2.1.写在html元素的属性中

变红
变绿
1
2
3
4

2.2. 写在script元素中:

	变红
	变绿
1
2
3
4
5
6
7
8
9

2.3. 写在一个js文件中:

把JS的代码写入一个JS文件中，然后网页中导入该JS文件即可

		
		
		
	
	
		变红
		变绿
	
1
2
3
4
5
6
7
8
9
10

2.4.几种方式总结：

第一种：
优点：简单，代码直接和html元素直接绑定
缺点：元素和JavaScript代码混合在一起，木有重用性，不利于分工
第二种：
优点：代码可以在当前页面重用
缺点：操作HTML元素前需要选中元素
第三种：
优点：代码可以在多个页面重用(推荐使用的方式)
缺点：操作HTML元素前需要选中元素

3.JavaScript的变量使用

3.1 JavaScript变量的定义

在JavaScript中变量的命名语法为:
var 变量名;
var 变量名 = 值;
注意:变量有数据类型，变量的数据类型不是在声明的时候定义的而是由变量中所保存的数据来决定的，也就是说同一个变量，当该变量中保存了不同的数值，此时变量对应的数据类型是会变化的。

3.2 JavaScript区分大小写

在HTML中大小写是不敏感的，但是在JavaScript程序中大小写是敏感的
1

3.3 常量和变量

 常量
1

直接在程序中出现的数据值
标识符命名规则
由不以数字开头的字母、数字、下划线(_)、美元符号($)组成常用于表示函数、变量等的名称例如{：}_{a}bc,$abc,abc,abc123是标识符，而1abc不是
JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符
ECMA v3标准保留的JavaScript的关键字

    案例
1

4.JavaScript数据类型

4.1 JavaScript数据类型分类

4.2 数字类型

简介
最基本的数据类型不区分整型数值和浮点型数值
所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式

4.3 String类型

简介
是由Unicode字符、数字、标点符号组成的序列
字符串常量首尾由单引号或双引号括起
JavaScript中没有字符类型
常用特殊字符在字符串中的表达
字符串中部分特殊字符必须加上右划线
常用的转义字符(换行\n)

4.4 Boolean数据类型

  简介
1

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作1/0对应true/false
Boolean值主要用于JavaScript的控制语句，例如：

4.5 Null、Undefined

  简介
1

Null在程序中代表变量没有值或者不是一个对象
Undefined代表变量的值尚未指定或者对象属性根本不存在

4.6 类型转换

强制类型转换函数
1

函数parseInt：强制转换成整数
例如parseInt(“6.12”)=6
函数parseFloat： 强制转换成浮点数
例如parseFloat(“6.12”)=6.12
函数eval：将字符串强制转换为表达式并返回结果
例如eval(“1+1”)=2,eval(“1<2”)=true
自动类型转换
JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换

5.JavaScript运算符

5.1 算术运算符

 加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% )
1

加、减、乘、除、余数和数学中的运算方法一样
例如：9/2=4.5，4*5=20，9%2=1
-除了可以表示减号还可以表示负号
例如：x=-y
+除了可以表示加法运算还可以用于字符串的连接
例如：“abc”+“def”=“abcdef”
递增(＋＋) 、递减(－－)
假如x=2，那么x++表达式执行后的值为3，x–表达式执行后的值为1
i++相当于i=i+1，i–相当于i=i-1
递增和递减可以放在变量前也可以放在变量后

5.2 逻辑运算符

   等于 ( == )  、不等于( != ) 、 大于( > ) 、 小于( < ) 大于等于(>=) 、小于等于(<=)
1

与 (&&) 、或(||) 、非(!)
运算规则
与 或 非
1&&1=1 1||1=1 ！1=0
1&&0=0 1||0=1 ！0=1
0&&0=0 0||0=0
7.3 位运算
左移(<<) 、 右移(>>)

位与(&) 、位或(|)、异或(^)

5.4 赋值运算符

赋值 =
JavaScript中=代表赋值，两个等号表示相等
例如，x=1表示给x赋值为1
if (x1){…}程序表示当x与1相等时
配合其他运算符形成的简化表达式oP=
例如i+=1相当于i=i+1，x&=y相当于x=x&y

5.5 运算符的优先级

6.JavaScript控制语句

if-else基本格式
if (表达式){
语句１;
......
}else{
语句２;
.....
}
功能说明
如果表达式的值为true则执行语句1，否则执行语句2
    if语句嵌套格式
if (表达式1) {
	语句1;
}else if (表达式2){
	语句2;
}else if (表达式3){
	语句3;
} else{
	语句4;
} 
switch基本格式
switch (表达式) {
	case 值1:语句1;break;
	case 值2:语句2;break;
	case 值3:语句3;break;
	default:语句4;
}
   for循环基本格式
for (初始化;条件;增量){
	语句1;
	...
}
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

功能说明

实现条件循环，当条件成立时，执行语句1，否则跳出循环体
while循环基本格式
while (条件){
语句1；
…
}
功能说明
运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环

7.函数的声明与使用

函数的定义
function 函数名 (参数){
函数体;
return 返回值;
}
功能说明
可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
使用范例（简单函数）

<script language="JavaScript">
			function jiafa(){
		 		//获取第一个数字和第二个数字(默认获取的数据类型是字符串)
		 		var num1 = document.getElementById("txtNum1").value;
		 		var num2 = document.getElementById("txtNum2").value;
		 		//需要把文本框中输入的字符串转换成数字才能进行计算
		 		num1 =  parseInt(num1);
		 		num2 = parseInt(num2);
		 		//计算
		 		var resu = num1 + num2;
		 		//显示结果(通过为文本框的value属性赋值，实现显示结果的功能)
		 		document.getElementById("txtResu").value =  resu;
		    } 
		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<h2>简单的一个计算器</h2>
		第一个数:<input type="text" name="txtNum1" id="txtNum1"/><br/>
		第二个数:<input type="text" name="txtNum2" id="txtNum2"/><br/>
		<input type="button" value=" + " onclick="jiafa()" /><br/>
		结果是:<input type="text" name="txtResu" id="txtResu" />
1
2
3
4
5

综合案例（使用基本语法实现计算器效果）

<script language="JavaScript">
			//点击的是数字
			function clickNum(op) {
				if(isClickOp == false){
					//获取显示框中的原数据
					var oldnum = document.getElementById("txtResu1").value;
	
					if(oldnum == '' || oldnum == '0') {
						document.getElementById("txtResu1").value = op;
					} else {
						document.getElementById("txtResu1").value = oldnum + op;
					} 
				}else{
					document.getElementById("txtResu1").value = op;
				}
				//一旦点击了数字则符号状态改变
				isClickOp = false;
			}
			//定义全局变量，保存上一次的结果和上一次的运算符,以及是否点击了运算符号的状态
			var backnum = 0;
			var backop = "";
			var isClickOp = false;
			//点击的是符号
			function clickOp( op ){
				isClickOp = true;
				 //获取当前文本框中的内容
				 var nownum = document.getElementById("txtResu1").value;
				 //判断上一次的符号
				 if(backop !=""){
				 	var resu = "";
				 	switch(backop){
				 		case "+":
				 		resu = parseInt(backnum) + parseInt(nownum);
				 		break;
				 		case "-":
				 		resu = parseInt(backnum) - parseInt(nownum);
				 		break;
				 		case "*":
				 		resu = parseInt(backnum) * parseInt(nownum);
				 		break;
				 		case "/":
				 		resu = parseInt(backnum) / parseInt(nownum);
				 		break;				 		
				 	}
				 	document.getElementById("txtResu1").value = resu;
				 }
				//保存当前的符号和当前的内容
				backop = op;
				backnum = document.getElementById("txtResu1").value;
			}
			
			function clearInfo(){
				document.getElementById("txtResu1").value =0;
				backnum = 0;
			   backop = "";
			  isClickOp = false;
			 }
		</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

网页基本标签

<table border="1">
				<tr>
					<td colspan="4">
						<input type="text" id="txtResu1" readonly="readonly" />
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value=" 1 " onclick="clickNum(1)" />
					</td>
					<td>
						<input type="button" value=" 2 " onclick="clickNum(2)"/>
					</td>
					<td>
						<input type="button" value=" 3 " onclick="clickNum(3)"/>
					</td>
					<td>
						<input type="button" value=" + " onclick="clickOp('+')"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value=" 4 " onclick="clickNum(4)"/>
					</td>
					<td>
						<input type="button" value=" 5 " onclick="clickNum(5)"/>
					</td>
					<td>
						<input type="button" value=" 6 " onclick="clickNum(6)"/>
					</td>
					<td>
						<input type="button" value=" - " onclick="clickOp('-')"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value=" 7 " onclick="clickNum(7)"/>
					</td>
					<td>
						<input type="button" value=" 8 " onclick="clickNum(8)"/>
					</td>
					<td>
						<input type="button" value=" 9 " onclick="clickNum(9)"/>
					</td>
					<td>
						<input type="button" value=" * " onclick="clickOp('*')"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value=" 0 " onclick="clickNum(0)"/>
					</td>
					<td>
						<input type="button" value=" C " onclick="clearInfo()"/>
					</td>
					<td>
						<input type="button" value=" = " onclick="clickOp('=')"/>
					</td>
					<td>
						<input type="button" value=" / " onclick="clickOp('/')"/>
					</td>
				</tr>
			</table>
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

运行结果