第九章 javaScript基础

javaScript基础

什么是JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点
向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释

JavaScript组成

在这里插入图片描述

JavaScript的基本结构

1.页面内引用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			//js代码
		</script>
	</head>
	<body>
		
	</body>
</html>

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

2.通过外部文件引用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/index.js"></script>
	</head>
	<body>
		
	</body>
</html>
index.js
//在页面输出信息
document.write("<h1>你好!</h1>");
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.直接在HTML标签中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/index.js"></script>
	</head>
	<body>
		<input name="btn" type="button" value="弹出消息框"   
					onclick="javascript:alert('欢迎你');"/>

	</body>
</html>

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

JavaScript核心语法

在这里插入图片描述

注释

单行注释以 // 开头

多行注释以 /* 开始，以 */ 结尾

语法约定

代码区分大小写
变量、对象和函数的名称

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

分号

分号可以省略,但是不建议

核心语法—变量

声明时,无论任何类型都是用var来声明

1.先声明再赋值

var a;
a=3;
1
2

2.边声明边赋值

var b="张三";
1

3.不声明直接赋值

name="强";
1

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用

数据类型

undefined var width;变量width没有初始值，将被赋予值undefined
null 表示一个空值，与undefined值相等
number 数字,整数,小数(浮点)
boolean 布尔类型
string 字符串

			var a;//没有初始值,undefined
			var b=null;//表示一个空值，与undefined值相等
			var c=123;//number类型
			var d=true;//boolean类型
			var e="李壮壮";//字符串
		
1
2
3
4
5
6

typeof运算符

检测变量的数据类型

var a;//没有初始值,undefined
			var b=null;//表示一个空值，与undefined值相等
			var c=123;//number类型
			var d=true;//boolean类型
			var e="李壮壮";//字符串
			document.write("<h1>"+typeof(a)+"</h1>");
			document.write("<h1>"+typeof(b)+"</h1>");
			document.write("<h1>"+typeof(c)+"</h1>");
			document.write("<h1>"+typeof(d)+"</h1>");
			document.write("<h1>"+typeof(e)+"</h1>");
1
2
3
4
5
6
7
8
9
10

数组对象

在这里插入图片描述

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
sort()	对数组排序
push()	向数组末尾添加一个或更多元素，并返回新的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
	</head>
	<body>
		<script>
			//边声明,边赋值
			var nums=new Array(91,88,45,24,15,66);
			//先声明后赋值
			var arr=new Array(6);
			arr[0]=122;
			arr[1]=154;
			document.write(arr.length+"<br>");
			arr[7]=222;//数组长度可变
			document.write(arr.length+"<br>");
			//把数组变成字符串
			document.write(nums.join()+"<br>");
			//数组排序,升序
			nums.sort();
			document.write(nums.join()+"<br>");
		</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

String对象

方法名称	说明
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1,index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String对象</title>
	</head>
	<body>
		<script>
			var str="hello word!";
			//字符串长度
			document.write("<h1>"+str.length+"</h1>");
			//返回在指定位置的字符**
			document.write("<h1>"+str.charAt(0)+"</h1>");
			//查找某个指定的字符串在字符串中首次出现的位置
			document.write("<h1>"+str.indexOf("o")+"</h1>");
			/*返回位于指定索引**index1和index2之间的字符串，
			并且包括索引index1对应的字符，不包括索引index2对应的字符*/
			document.write("<h1>"+str.substring(2,5)+"</h1>");
			/*将字符串分割为字符串数组*/
			var s=str.split("");
			document.write("<h1>"+s+"</h1>");
		</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

运算符号

算术运算符	+ - ***** / % ++ —
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& \|\| !

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>运算符</title>
	</head>
	<body>
		<script>
			var a=13;
			var b="13";
			//等等于 ,直接比较值,不管数据类型(把数据类型统一之后再进行比较)
			var c= a==b;
			/*绝对等于,先比较数据类型,再比较值*/
			var d= a===b;
			document.write("<h1>"+c+"</h1>")
			document.write("<h1>"+d+"</h1>")
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

逻辑控制语句

在 JavaScript 中，我们可使用以下条件语句：
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if…else if…else 语句 - 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for/in</title>
	</head>
	<body>
		<script>
			var n=9;
			if(n>10){
				document.write("<h1>对</h1>");
			}
			/*if语句如果只有一个语句,可以省略大括号*/
			if(n>8)
			document.write("<h1>对</h1>");
			
			var nums=new Array(11,22,33,44,55);
			for(var i=0;i<nums.length;i++){
				document.write("<h1>"+nums[i]+"</h1>");
			}
			document.write("<hr>");
			// a(0~length-1)
			for(a in nums){
				document.write("<h1>"+nums[a]+"</h1>");
			}
		</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

常用的输入/输出

alert()弹出警告

prompt(“提示信息”, “输入框的默认信息”); 弹出一个带有输入的提示框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入输出</title>
	</head>
	<body>
		<script>
			//("输入提示","默认值")
			var str= prompt("请输入阿吉的性别:","女");
			//输出,弹出警告框
			alert(str);
			
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

常用系统函数

parseInt (“字符串”)
将字符串转换为整型数字
如: parseInt (“86”)将字符串“86“转换为整型值86
parseFloat(“字符串”)
将字符串转换为浮点型数字
如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入输出</title>
	</head>
	<body>
		<script>
			var a="a123";
			var b="123a";
			var c="12a3";
			var d="123.4";
			var e="123";
			document.write("<h1>"+parseInt(a)+"</h1>");
			document.write("<h1>"+parseInt(b)+"</h1>");
			document.write("<h1>"+parseInt(c)+"</h1>");
			document.write("<h1>"+parseInt(d)+"</h1>");
			document.write("<h1>"+parseInt(e)+"</h1>");
			document.write("<h1>"+parseFloat(e)+"</h1>");
			//isNaN  判断非数字 不是数字 true 是数字 false
			document.write("<h1>"+isNaN(a)+"</h1>");
			document.write("<h1>"+isNaN(e)+"</h1>");
		</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

自定义函数

在这里插入图片描述

调用函数
函数调用一般和表单元素的事件一起使用，调用格式

事件名＝ “函数名( )” ;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
		<script>
			//无参函数
			function a(){
				alert("你好！");
			}
			//有参函数  (参数列表)  参数不需要写参数类型
			function b(age){
				alert("你的年龄是:"+age);
			}
			//有返回值的函数
			function c(){
				var age=prompt("请输入你的年龄:");
				return age;
			}
			function d(){
				var age=c();//接收返回值
				alert("你的年龄是"+age);
			}
		</script>
	</head>
	<body>
		<!-- οnclick="a()" 单击按钮后调用函数a()  -->
		<input type="button" value="你好" onclick="a()">
		<input type="button" value="年龄" onclick="b(123)">
		<input type="button" value="年龄" onclick="d()">
	</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

事件

在这里插入图片描述

属性	此事件发生在何时…
[onabort]	图像的加载被中断。
[onblur]	元素失去焦点。
[onchange]	域的内容被改变。
[onclick]	当用户点击某个对象时调用的事件句柄。
[ondblclick]	当用户双击某个对象时调用的事件句柄。
[onerror]	在加载文档或图像时发生错误。
[onfocus]	元素获得焦点。
[onkeydown]	某个键盘按键被按下。
[onkeypress]	某个键盘按键被按下并松开。
[onkeyup]	某个键盘按键被松开。
[onload]	一张页面或一幅图像完成加载。
[onmousedown]	鼠标按钮被按下。
[onmousemove]	鼠标被移动。
[onmouseout]	鼠标从某元素移开。
[onmouseover]	鼠标移到某元素之上。
[onmouseup]	鼠标按键被松开。
[onreset]	重置按钮被点击。
[onresize]	窗口或框架被重新调整大小。
[onselect]	文本被选中。
[onsubmit]	确认按钮被点击。
[onunload]	用户退出页面。

鼠标 / 键盘属性

属性	描述
[altKey]	返回当事件被触发时，“ALT” 是否被按下。
[button]	返回当事件被触发时，哪个鼠标按钮被点击。
[clientX]	返回当事件被触发时，鼠标指针的水平坐标。
[clientY]	返回当事件被触发时，鼠标指针的垂直坐标。
[ctrlKey]	返回当事件被触发时，“CTRL” 键是否被按下。
[metaKey]	返回当事件被触发时，“meta” 键是否被按下。
[relatedTarget]	返回与事件的目标节点相关的节点。
[screenX]	返回当某个事件被触发时，鼠标指针的水平坐标。
[screenY]	返回当某个事件被触发时，鼠标指针的垂直坐标。
[shiftKey]	返回当事件被触发时，“SHIFT” 键是否被按下。

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

属性	描述
cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性	描述
[bubbles]	返回布尔值，指示事件是否是起泡事件类型。
[cancelable]	返回布尔值，指示事件是否可拥可取消的默认动作。
[currentTarget]	返回其事件监听器触发该事件的元素。
[eventPhase]	返回事件传播的当前阶段。
[target]	返回触发此事件的元素（事件的目标节点）。
[timeStamp]	返回事件生成的日期和时间。
[type]	返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法	描述
[initEvent()]	初始化新创建的 Event 对象的属性。
[preventDefault()]	通知浏览器不要执行与事件关联的默认动作。
[stopPropagation()]	不再派发事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<style>
			div{
				height: 200px;
				width: 200px;
				border: 1px solid red;
				margin-left: 20px;
				float: left;
			}
		</style>
		<script>
			function a(str){
				alert(str+"触发事件!")
			}
			
			
		</script>
	</head>
	<body onload="a('文档加载完毕')">
		<div class="d1" onclick="a('单击')">单击</div>
		<div class="d2" ondblclick="a('双击')">双击</div>
		<div class="d3" onmousemove="a('鼠标移入')">鼠标移入</div>
		<div class="d4" onmouseout="a('鼠标移出')">鼠标移出</div>
		
	</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

相关阅读:
架构师社区爆火的分布式微服务神仙笔记究竟有什么魅力？
Spark的数据输入、数据计算、数据输出
 HTTPS 的加密流程
 5.2Unix/Linux上的五种IO模型
 SpringMVC组件解析
 Thinkphp6实现定时任务功能
 责任链模式应用案例
 爬虫与反爬虫技术简介
 linux rm文件后空间不释放怎么处理
 createSocketTask:fail wcwss url not in domain list 小程序网络异常
原文地址：https://blog.csdn.net/qq_36827283/article/details/125603734