面向对象、内置对象、BOM对象
【第一章】javascript面向对象【了解】
1 类的定义和使用方式一(了解)
//定义Person类
class Person{
//构造方法
constructor(name,age){
this.name = name;
this.age = age;
}
//show方法
show(){
document.write(this.name + "," + this.age + "<br>");
}
//eat方法
eat(){
document.write("吃饭...");
}
}
//使用Person类
let p = new Person("张三",23);
p.show();
p.eat();
2 类的定义和使用方式二-字面量方式【重要】
类的第二种定义方式–字面量/直接量方式，因为定义出来的就是对象，不需要new可以直接使用
语法：
let 对象名={
属性名:属性值,
属性名:属性值,
…
属性名:属性值 //属性值可以是任意类型，原始数据类型、数组、函数
}
//定义对象
let person={
name:"xxx",
age:20,
hobby:["唱","跳","rap","basketball"],
show:function () {
document.write(`${this.name},${this.age}<br>`);
},
add:function (a,b) {
return a+b;
},
eat(){ //也可以
document.write("吃饭...<br>")
}
};
//使用对象
document.write(person.hobby+"<br>"); //["唱","跳","rap","basketball"]
person.show(); //xxx,20
let sum = person.add(10,20);
document.write(`sum=${sum}<br>`); //sum=30
person.eat(); //吃饭...
【第二章】javascript内置对象【理解】
1 Number类
//1. parseFloat() 将传入的字符串浮点数转为浮点数
// let f=Number.parseFloat("13.14");
let f=Number.parseFloat("13.1452abc"); //从左往右一个字符一个字符的转换，遇到不能转换的字符为止
document.write(f+","+typeof (f)+"<br>");
//2. parseInt() 将传入的字符串整数转为整数
// let n = Number.parseInt("100abc");
let n = Number.parseInt("101.25");
document.write(n+","+typeof (n)+"<br>");//从左往右一个字符一个字符的转换，遇到不能转换的字符为止
2 Math类(掌握)
//1. ceil(x) 向上取整 ****************掌握
document.write(Math.ceil(5.3)+"<br>"); //6
document.write(Math.ceil(-5.3)+"<br>"); //-5
//2. floor(x) 向下取整 ****************掌握
document.write(Math.floor(5.3)+"<br>"); //5
document.write(Math.floor(-5.3)+"<br>"); //-6
//3. round(x) 把数四舍五入为最接近的整数
document.write(Math.round(5.3)+"<br>"); //5
document.write(Math.round(-5.3)+"<br>"); //-5
//4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
document.write(Math.random()+"<br>"); //[0.0,1.0)
//需求：生成[10,100]的整数 [10,100]-->[0,90]+10-->[0,91)+10
let num=Math.floor(Math.random()*91)+10;
document.write("num="+num+"<br>");
//5. pow(x,y) 幂运算 x的y次方
document.write(Math.pow(2,3)+"<br>");
3 Date类(掌握)
3.1 构造方法
3.2 成员方法
//构造方法 ****************掌握
let date=new Date();
//成员方法
document.write(`年份：${date.getFullYear()}<br>`);
document.write(`月份：${date.getMonth()}<br>`);
document.write(`日期：${date.getDate()}<br>`);
document.write(`小时：${date.getHours()}<br>`);
document.write(`分钟：${date.getMinutes()}<br>`);
'document.write(`年月日时分秒：${date.toLocaleString()}<br>`); //年月日时分秒
'document.write(`年月日：${date.toLocaleDateString()}<br>`); //年月日
'document.write(`时分秒：${date.toLocaleTimeString()}<br>`); //时分秒
4 String类
4.1 构造方法
4.2 成员方法
//2. 直接赋值
let s1 = "hello";
document.write(`${s1}<br>`);// hello
//属性
//1. length 获取字符串的长度
document.write(`${s1.length}<br>`);// 5
//成员方法
//1. charAt(index) 获取指定索引处的字符
document.write(`${s1.charAt(2)}<br>`);// l
//2. indexOf(value) 获取指定字符串出现的索引位置
document.write(`${s1.indexOf("ll")}<br>`);// 2
//3. substring(start,end) 根据指定索引范围截取字符串(含头不含尾)
document.write(`${s1.substring(2,4)}<br>`);// ll
//4. split(value) 根据指定规则切割字符串，返回数组
document.write(`----------------------<br>`);// hello
let s2 = "张三,23,男";
let splits = s2.split(",");
for (let s of splits) {
document.write(`${s}<br>`);//
}
document.write(`----------------------<br>`);// hello
//5. replace(old,new) 使用新字符串替换老字符串
let s3 = "你会不会跳伞啊？让我落地成盒。你妹的。";
let s=s3.replace("你妹的","***");
document.write(`${s}<br>`);
5 RegExp类
正则表达式：是一种对字符串进行匹配的规则。
5.1 匹配的规则
5.2 构造方法和成员方法
//1.验证手机号
//规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
let regExp = new RegExp("[1][358][0-9]{9}");
document.write(regExp.test("16578907890")+"<br>"); //false
//2.验证用户名
//规则：字母、数字、下划线组成。总长度4~16
//regExp=/^[0-9a-zA-Z_]{4,16}$/; //直接量方式不能使用引号引起来,正则是一个对象不是字符串。
regExp=/^\w{4,16}$/; //直接量方式不能使用引号引起来,正则是一个对象不是字符串。
document.write(regExp.test("sfsdfa")+"<br>"); //true
6 Array类
表示数组对象，构造方法为：Array();一般定义数组使用[]方式定义。
成员方法：
let arr = [1,2,3,4,5];
//1. push(元素) 添加元素到数组的末尾
arr.push(6); //等价于arr[5]=6;
document.write(arr + "<br>"); //1,2,3,4,5,6
//2. pop() 删除数组末尾的元素
arr.pop();
document.write(arr + "<br>"); //1,2,3,4,5
//3. shift() 删除数组最前面的元素
arr.shift();
document.write(arr + "<br>"); //2,3,4,5
//4. includes(元素) 判断数组中是否包含指定的元素
document.write( arr.includes(3)+ "<br>"); //true
//5. reverse() 反转数组元素
arr.reverse();
document.write(arr + "<br>"); //5,4,3,2
//6. sort() 对数组元素排序
arr.sort(); //升序
document.write(arr + "<br>"); //2,3,4,5
arr.sort((m,n)=>n-m); //传递比较器,降序
document.write(arr + "<br>"); //5,4,3,2
7 Set集合类
JavaScript中的Set集合，元素唯一，存取顺序一致。
构造方法和成员方法
// Set() 创建集合对象
let set = new Set();
// add(元素) 添加元素
set.add(10);
set.add(20);
set.add(20); //重复了就不会添加进去
set.add(30);
// size属性 获取集合的长度
document.write(`size=${set.size}<br>`); //3
// keys() 获取迭代器对象
for (let m of set) {
document.write(`m=${m}<br>`); //10
}
// delete(元素) 删除指定元素
let flag = set.delete(20);
document.write(`flag=${flag}<br>`);
//打印结果
for (let m of set) {
document.write(`m=${m}<br>`); //10
}
8 Map集合类
JavaScript 中的 Map 集合，key 唯一，存取顺序一致。
构造方法和成员方法
// Map() 创建Map集合对象
let map = new Map();
// set(key,value) 添加元素
map.set("name","田宇豪");
map.set("gender","女");
map.set("age",30);
// size属性 获取集合的长度
document.write(`size=${map.size}<br>`);
// get(key) 根据key获取value
document.write(`name=${map.get("name")}<br>`);
document.write(`gender=${map.get("gender")}<br>`);
document.write(`age=${map.get("age")}<br>`);
// entries() 获取迭代器对象
var entries = map.entries();
for (let entry of entries) {
document.write(`${entry[0]},${entry[1]}<br>`);
}
// delete(key) 根据key删除键值对
map.delete("age")
var entries = map.entries();
for (let entry of entries) {
document.write(`${entry[0]},${entry[1]}<br>`);
}
9 JSON类(掌握)
JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。
//定义商品对象
let products=[
{"key":"笔记本电脑","qre":"906390"},
{"key":"笔记本子","qre":"937799"},
{"key":"笔记本文具","qre":"400132"},
{"key":"笔记本散热器","qre":"105018"},
{"key":"笔记本支架","qre":"179625"},
{"key":"笔记本自营","qre":"934656"},
{"key":"笔记本游戏本","qre":"705309"},
{"key":"笔记本包","qre":"872031"},
{"key":"笔记本华为","qre":"7400"},
{"key":"笔记本硬盘","qre":"129374"},
{"key":"笔记本键盘","qre":"703076"},
{"key":"笔记本联想","qre":"149953"},
{"key":"笔记本内存条","qre":"97605"},
];
//1.将商品对象转换为JSON格式的字符串
let json = JSON.stringify(products);
document.write(json+"<br>");
document.write(typeof (json)+"<br>");
//2.将JSON格式字符串解析成JS对象
let arr=JSON.parse(json);
for (let p of arr) {
document.write(p.key+"<br>");
}
10 案例-表单校验(掌握)
//1 给form表单添加一个onsubmit事件
document.querySelector("#regist").onsubmit=function () {
//2 获取用户名和密码输入框中的内容
let username = document.querySelector("#username").value;
let password = document.querySelector("#password").value;
//3 校验用户名，如果不符合阻止提交,请输入4到16位的纯字母
let regExp=/^[a-zA-Z]{4,16}$/;
if(!regExp.test(username)){
//校验失败
alert("用户名不符合要求，请输入4到16位的纯字母😣");
return false;// 阻止提交
}
//4 校验密码，如果不符合阻止提交,请输入6位纯数字的密码
regExp=/^\d{6}$/;
if(!regExp.test(password)){
//校验失败
alert("密码不符合要求，请输入6位纯数字的密码😣");
return false;// 阻止提交
}
//return false表示阻止提交，return true表示允许提交，不写默认允许提交
//5 都符合就允许提交
return true;
}
【第三章】BOM对象【了解】
1 window对象
一次性定时器
//设置一次性定时器
setTimeout(要执行的代码字符串或者函数对象,毫秒值);
//let d1 = setTimeout("fun()",2000); //✅
//let d1 = setTimeout("fun",2000); //❌
let d1 = setTimeout(fun,2000); //✅
// let d1 = setTimeout(fun(),2000); // ❌，立刻调用fun()方法，然后将方法的返回值传递给setTimeout()方法。
//取消一次性定时器
//clearTimeout(d1);
循环定时器
//设置循环性定时器
setInterval(要执行的代码字符串或者函数对象,毫秒值);
//let d1 = setInterval("fun()",2000); //✅
//let d1 = setInterval("fun",2000); //❌
let d1 = setInterval(fun,2000); //✅
// let d1 = setInterval(fun(),2000); // ❌，立刻调用fun()方法，然后将方法的返回值传递给setInterval()方法。
//取消一次性定时器
//clearInterval(d1);
2 location对象【重要】
location表示浏览器地址栏对象，封装了地址栏中的信息，可以通过href属性获取URL或者设置URL路径实现页面跳转。
href 属性：
<body>
<p>
注册成功！<span id="spTime">5</span>秒之后自动跳转到首页...
</p>
</body>
<script>
//1.定义方法。改变秒数，跳转页面
let num = 5;
function showTime() {
num--;
if(num <= 0) {
//跳转首页
location.href = "index.html";
}
let span = document.getElementById("time");
span.innerHTML = num;
}
//2.设置循环定时器，每1秒钟执行showTime方法
setInterval("showTime()",1000);
</script>
3 案例-动态广告
//1.设置定时器，3秒后显示广告图片
setTimeout(()=>{
document.querySelector("#ad_big").style.display="block";
},3000);
//2.设置定时器，3秒后隐藏广告图片
setTimeout(()=>{
document.querySelector("#ad_big").style.display="none";
},6000)
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
