（函数，数组，算法），对象，常用类，BOM，DOM（重点）

复习

数组

作用

特点

1,有下标,又名索引,从0开始到长度-1结束
2,长度:数组中容纳数据的个数
3,js数组长度可变,java数组长度恒定

使用

1.声明
2.创建
3.使用

语法1:
	数组名 = [值1,值2,值3,...];
语法2:
	数组名 = new Array();

增

​ 给尾部添加

​ 数组名.push(添加的数据)

abb.push(8);

删

​ 删除数据，保留位置

​ delete 数组名[下标];

var abb = [1,2,3,4,5,6,7];
delete abb[2];
document.write(abb);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DLzN7x2R-1679483273157)(C:\Users\MOON\AppData\Roaming\Typora\typora-user-images\image-20230322164210965.png)]

​ 删除数据，不保留位置

​ 数组名.splice(开始位置,删除个数)

var abb = [1,2,3,4,5,6,7];
abb.splice(3,2);//从下标3号位置开始，删除两个
alert(abb);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-21HrzmDM-1679483273158)(C:\Users\MOON\AppData\Roaming\Typora\typora-user-images\image-20230322164457476.png)]

改

​ 修改指定位置的数据

​ 数组名[下标] = 值;

var abb = [1,2,3,4,5,6,7];
abb[3] = 44;
alert(abb);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-08iYXdhs-1679483273158)(C:\Users\MOON\AppData\Roaming\Typora\typora-user-images\image-20230322164723199.png)]

查

​ 查询指定位置的值

​ 数组名[下标] = 值;

​ 查询数组长度

​ 数组名.length

​ 遍历：将数组中的数据逐个取出

var abb = [1,2,3,4,5,6,7];
document.write(abb[2]);
document.write("<br />");
document.write(abb.length);
document.write("<br />");
document.write(abb);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjYlwmNS-1679483273159)(C:\Users\MOON\AppData\Roaming\Typora\typora-user-images\image-20230322165317407.png)]

函数

简介：又名方法

作用：封装一段代码，使其便于使用，降低耦合度，提高使用率

使用步骤：

​ 1.定义

​ 2.调用

注意：

1.return表示结束当前方法，return XXX；表示结束当前方法并放回XXX。

2.实参列表和形参列表要保证顺序一致，长度一致，类型一致

3.如果调用的方法有返回值，可以使用变量接受，没有返回值则不可以使用变量接收

定义

语法1:
function 方法名(形参列表){
方法体
}
语法2:
var 方法名 = function(形参列表){
方法体
}

注意:
1,形参列表在方法定义时声明.本质就是几个变量.但是此时没有值.多个变量之间使用逗号隔开
2,return表示结束当前方法.return xxx;表示结束当前方法并返回xxx
如:
function add(a,b){
return a+b;
}

调用

语法1:
function 方法名(形参列表){
方法体
}
语法2:
var 方法名 = function(形参列表){
方法体
}

注意:
1,形参列表在方法定义时声明.本质就是几个变量.但是此时没有值.多个变量之间使用逗号隔开
2,return表示结束当前方法.return xxx;表示结束当前方法并返回xxx
如:
function add(a,b){
return a+b;
}

var abb = [1,2,3,4,5,6,7];
//定义一个函数，取数组中第三个并用弹框显示
function aa(a){
	alert(a[2]);
}
//调用
aa(abb);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fgfxpgFS-1679483273159)(C:\Users\MOON\AppData\Roaming\Typora\typora-user-images\image-20230322170006098.png)]

算法

作用：提高代码执行效率

如何评判算法是否优良

​ 1.时间复杂度

​ 2.空间复杂度

常用算法

寻找最值、冒泡排序、选择排序、两数交换位置…

---

今日

对象

简介：真实存在的事物，都是对象（要有具体的指向性）

对象的组成：

属性
	描述事物静态特征
	如：人的身高，姓名。姓名等
方法
	描述事物动态特征
	如：人会吃饭，睡觉等

JS代码中的对象定义

语法1：构造器
	var 对象名 = {
	"属性名1":"属性值1",
	"属性名2":"属性值2",
	...
	"方法名1":function(形参列表){},
	"方法名1":function(形参列表){},
	"方法名1":function(形参列表){},
	...
	}
例
var p02 = {
	"name":"李四",
	"sex":"男",
	"age":18,
	"eat":function(){	//方法
		alert(this.name+"吃饭");
	},
	"drink":function(){	//方法
		alert(this.name+"喝水");
	}
};
	
语法2：类
	function 类名(形参列表){
	this.属性名1 = 属性值1;
	this.属性名2 = 属性值2;
	this.属性名3 = 属性值3;
	...
	this.方法名1 = function(形参列表){};
	this.方法名2 = function(形参列表){};
	...
	}
this表示这个对象

例
function Person(n,s,a){
	this.name = n;
//一般此处如此写，this.name = name;后面的name是要与形参相照应的
	this.sex = s;
	this.age = a;
	this.eat = function(){
		alert(this.name+"吃饭");
	};
	this.dirnk = function(){
		alert(this.name+"喝水");
	}
}

对象操作属性

获取属性值
	对象名.属性名
	aa.name;
修改属性值
	对象名.属性名 = 值;
	aa.name = "张三丰"；

对象调用

对象名.方法名(实参列表);
function aa(){
	this.ChiFan = function(){}
}	//这是方法
//对象里面一般有属性和方法，调用对象一般是要用对象里的方法
aa.ChiFan;

练习

创建以下对象
狗
旺财 黄 2 会叫
黑豹 黑 1 会叫
猫
老皮 蓝 2 会抓老鼠
让旺财叫一叫
让老皮抓老鼠
将黑豹的名字修改为来福

function Dog(name,color,age){
	this.name = name;
	this.color = color;
	this.age = age;
	this.call = function(){
		document.write(this.name+"旺旺");
	}
}
var dog01 = new Dog("旺财","黄",2);
var dog02 = new Dog("黑豹","黑",1);
//多看多写多写多写就会了
var cat = {
	"name":"老皮",
	"color":"蓝",
	"age":2,
	"catchMouse":function(){
		document.write(this.name+"抓老鼠");
	}
};
dog01.call();
cat.catchMouse();
dog02.name = "来福";

常用类

简介：右JS提供的一些类

字符串

获取字符串长度:
	字符串.length
获取指定位置的字符:
	var 获取到的字符 = 字符串.charAt(下标);
获取子字符串在字符串中第一次出现的位置
	var 第一次出现的位置 = 字符串.indexOf(子字符串);
	注意:如果字符串中不存在子字符串返回-1
获取子字符串在字符串中最后一次出现的位置
	var 第一次出现的位置 = 字符串.lastIndexOf(子字符串);
	注意:如果字符串中不存在子字符串返回-1
截取字符串:
	var 截取到的字符串 = 字符串.subString(开始的位置,结束的位置)
		注意:结束位置不包含
	var 截取到的字符串 = 字符串.subStr(开始位置,截取的长度);
替换:
	var 替换后的字符串 = 字符串.replace(原子字符串,替换后的字符串);
		注意:js中只能替换第一个
忽略前后空白
	var 忽略空白后的字符串 = 字符串.trim();
js判断字符串内容是否相同
	==:判断值是否相同
	===:判断值与数据类型是否都相同
切割
	var 数组名 = 字符串.split(分割的字符串);

var str01 = "啦啦啦,德玛西亚,草丛才是真正的家,德玛西亚,德玛西亚";
document.write("获取字符串长度:"+str01.length);
document.write("<hr />");
document.write("获取当前字符串中第一个字符:"+str01.charAt(0));
document.write("<hr />");
document.write(10 == "10");
document.write("<hr />");
document.write(10 === "10");
document.write("<hr />");
//indexOf:查询子字符串,在字符串中第一次出现的位置,如果不存在返回-1
document.write(str01.indexOf("德玛西亚"));
document.write("<hr />");
//indexOf:查询子字符串,在字符串中最后一次出现的位置,如果不存在返回-1
document.write(str01.lastIndexOf(","));
document.write("<hr />");
//substring:截取字符串
//1参:开始位置,包含
//2参:结束位置,不包含
document.write(str01.substring(1,5));
document.write("<hr />");
//substr:截取字符串
//1参:开始位置,包含
//2参:截取的字符长度
document.write(str01.substr(1,5));
document.write("<hr />");
//replace:替换
//1参:原字符串
//2参:替换后的字符串
//注意:只会替换第一个
var str02 = str01.replace("德玛西亚","诺克萨斯");
document.write(str02);
			
document.write("<hr />");
var str_old = "德玛西亚";
var str_new = "诺克萨斯";
while(str01.indexOf(str_old) != -1){
	str01 = str01.replace(str_old,str_new);
}
document.write(str01);
document.write("<hr />");
document.write("Hello World".toUpperCase());
document.write("<hr />");
document.write("Hello World".toLowerCase());
document.write("<hr />");
document.write("   xxx   " == "xxx");
document.write("<hr />");
//trim()忽略前后空白
document.write("    xxx   ".trim());
document.write("<hr />");
var time = "2023-3-22";
//split:切割
var ts = time.split("-");
document.write(ts[0]);
document.write("&nbsp;&nbsp;&nbsp;");
document.write(ts[1]);
document.write("&nbsp;&nbsp;&nbsp;");
document.write(ts[2]);

Math

E:自然对数
PI:圆周率
abs():获取绝对值
random():随机获取0~1之间的数
floor():取整

BOM

window:整个浏览器窗口
	document:当前网页加载的html文件
	history:历史记录
	location:地址栏信息
	screen:屏幕
	navigator:浏览器相关信息

DOM（重点）

寻找标签

通过id寻找
	var 寻找到的标签对象 = document.getElementById("id的属性值");
通过class寻找
	var 寻找到的标签对象的数组 =  document.getElementByClassName("class的属性值");

修改标签属性

标签对象.属性名 = 属性值;
注意:
	class属性对应的叫className

获取标签属性

标签对象.属性名
注意:
	class属性对应的叫className

修改标签样式

标签对象.style.css属性 = 值;
注意:只能修改内联样式，即使样式没有定义也可以修改。

获取标签样式

标签对象.style.css属性;
注意:只能获取内联样式

获取标签内容

标签对象.innerHTML
标签对象.innerText

修改标签内容

标签对象.innerHTML = 值;
标签对象.innerText = 值;

删除标签

标签对象.remove();

添加标签

父容器标签对象.appendChild(要添加的标签对象);
父容器标签对象.insetBefore(要添加的标签，标签名);在改标签名之前插入

事件

点击事件

<body>
	<input type="button" value="按钮1" id="btn01" />
	<input type="button" value="按钮2" id="btn02" />
</body>
<script type="text/javascript">
	var btn01 = document.getElementById("btn01");
	//获取标签id给btn01，
	var btn02 = document.getElementById("btn02");
	//获取标签id给btn02，
	
	//设置点击事件监听
	//btn01.onclick就是btn01被点击点击
	//把function的动作给了btn01的点击事件
	btn01.onclick = function(){
		alert("你好世界");
	}
	btn02.onclick = function(){
		alert("hello world");
	}
</script>

网页加载事件

JS代码在body前，里面的逻辑没有实施的对象
如此便有了window.onload，其意义是当网页被加载完成后触发

//网页加载事件
//当网页被加载完成后触发
window.onload = function(){
	var span = document.getElementById("span");
	span.style.color = "#00FF00";//修改标签样式
}：

作业

1,整理笔记
2,点名器制作
3,你画我猜
4,计算器(附加题)