JavaScript_02_面向对象、内置对象、BOM以及封装
面向对象
1.定义和使用类
定义格式：
class 类名{
constructor(变量列表){ 变量赋值; }
方法名(参数列表){ 方法体; return 返回值; }
}
使用格式：
let 对象名 = new 类名(实际变量值);
对象名.方法名();
<script>
//定义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();
</script>
2.字面量定义类和使用
定义格式：
let 对象名 = { 变量名：变量值，… 方法名：方法…}
使用格式：
对象名.变量名 对象名.方法名();
<script>
//定义person
let person = {
name : "张三",
age : 23,
hobby : ["听课","学习"],
eat : function() {
document.write("吃饭...");
}
};
//使用person
document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
person.eat();
</script>
3.继承
继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
继承关键字：extends
顶级父类：Object
<script>
//定义Person类
class Person{
//构造方法
constructor(name,age){
this.name = name;
this.age = age;
}
//eat方法
eat(){
document.write("吃饭...");
}
}
//定义Worker类继承Person
class Worker extends Person{
constructor(name,age,salary){
super(name,age);
this.salary = salary;
}
show(){
document.write(this.name + "," + this.age + "," + this.salary + "<br>");
}
}
//使用Worker
let w = new Worker("张三",23,10000);
w.show();
w.eat();
</script>
内置对象
1.Number
成员方法：
-
parseFloat() 将传入的字符串浮点数转为浮点数
-
parseInt() 将传入的字符串整数转为整数
<script>
//1. parseFloat() 将传入的字符串浮点数转为浮点数
document.write(Number.parseFloat("3.14") + "<br>");
//2. parseInt() 将传入的字符串整数转为整数
document.write(Number.parseInt("100") + "<br>");
document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换，直到不是数字为止
let n = 100;
document.write(Number.isNaN(NaN));
</script>
2.Math
成员方法：
-
ceil(x) 向上取整
-
floor(x) 向下取整
-
round(x) 把数四舍五入为最接近的整数
-
random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
-
pow(x,y) 幂运算 x的y次方
<script>
//1. ceil(x) 向上取整
document.write(Math.ceil(4.4) + "<br>"); // 5
//2. floor(x) 向下取整
document.write(Math.floor(4.4) + "<br>"); // 4
//3. round(x) 把数四舍五入为最接近的整数
document.write(Math.round(4.1) + "<br>"); // 4
document.write(Math.round(4.6) + "<br>"); // 5
//4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
document.write(Math.random() + "<br>"); // 随机数
//5. pow(x,y) 幂运算 x的y次方
document.write(Math.pow(2,3) + "<br>"); // 8
</script>
3.Date
构造方法：
-
Date() 根据当前时间创建对象
-
Date(value) 根据指定毫秒值创建对象
-
Date(year,month,[day,hours,minutes,seconds,milliseconds])
根据指定字段创建对象(月份是0~11)
成员方法：
-
getFullYear() 获取年份
-
getMonth() 获取月份
-
getDate() 获取天数
-
getHours() 获取小时
-
getMinutes() 获取分钟
-
getSeconds() 获取秒数
-
getTime() 返回据1970年1月1日至今的毫秒数
-
toLocaleString() 返回本地日期格式的字符串
<script>
//构造方法
//1. Date() 根据当前时间创建对象
let d1 = new Date();
document.write(d1 + "<br>");
//2. Date(value) 根据指定毫秒值创建对象
let d2 = new Date(10000);
document.write(d2 + "<br>");
//3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
let d3 = new Date(2222,2,2,20,20,20);
document.write(d3 + "<br>");
//成员方法
//1. getFullYear() 获取年份
document.write(d3.getFullYear() + "<br>");
//2. getMonth() 获取月份
document.write(d3.getMonth() + "<br>");
//3. getDate() 获取天数
document.write(d3.getDate() + "<br>");
//4. toLocaleString() 返回本地日期格式的字符串
document.write(d3.toLocaleString());
// let d = new Date();
// document.write(d.toLocaleString());
</script>
4.String
构造方法：
- String(value) 根据指定字符串创建对象
- let s = “字符串” 直接赋值
成员方法：
-
length属性 获取字符串长度
-
charAt(index) 获取指定索引处的字符
-
indexOf(value) 获取指定字符串出现的索引位置,找不到为-1
-
substring(start,end) 根据指定索引范围截取字符串 (含头不含尾)
-
split(value) 根据指定规则切割字符串，返回数组
-
replace(old,new) 使用新字符串替换老字符串
<script>
//1. 构造方法创建字符串对象
let s1 = new String("hello");
document.write(s1 + "<br>");
//2. 直接赋值
let s2 = "hello";
document.write(s2 + "<br>");
//属性
//1. length 获取字符串的长度
document.write(s2.length + "<br>");
//成员方法
//1. charAt(index) 获取指定索引处的字符
document.write(s2.charAt(1) + "<br>");
//2. indexOf(value) 获取指定字符串出现的索引位置
document.write(s2.indexOf("l") + "<br>");
//3. substring(start,end) 根据指定索引范围截取字符串(含头不含尾)
document.write(s2.substring(2,4) + "<br>");
//4. split(value) 根据指定规则切割字符串，返回数组
let s3 = "张三,23,男";
let arr = s3.split(",");
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br>");
}
//5. replace(old,new) 使用新字符串替换老字符串
let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
let s5 = s4.replace("你妹的","***");
document.write(s5 + "<br>");
</script>
5.RegExp
正则表达式：是一种对字符串进行匹配的规则
构造方法：
- RegExp(规则) 根据指定规则创建对象
- let reg = /^规则$/ 直接赋值
成员方法：
test(匹配的字符串) 根据指定规则验证字符串是否符合
匹配规则
[a-z] a到z中某一个
[0-9] 0到9中某一个
{5} 出现5次
{1,6} 可以出现1到6次
<script>
//1.验证手机号
//规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
let reg1 = /^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888") + "<br>");
//2.验证用户名
//规则：字母、数字、下划线组成。总长度4~16
let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zhang_san123"));
</script>
6.Array
成员方法：
- push(元素) 添加元素到数组的末尾
- pop() 删除数组末尾的元素
- shift() 删除数组最前面的元素
- includes(元素) 判断数组是否包含给定的值
- reverse() 反转数组中的元素
- sort() 对数组元素进行排序
<script>
let arr = [1,2,3,4,5];
//1. push(元素) 添加元素到数组的末尾
arr.push(6);
document.write(arr + "<br>");
//2. pop() 删除数组末尾的元素
arr.pop();
document.write(arr + "<br>");
//3. shift() 删除数组最前面的元素
arr.shift();
document.write(arr + "<br>");
//4. includes(元素) 判断数组中是否包含指定的元素
document.write(arr.includes(2) + "<br>");
//5. reverse() 反转数组元素
arr.reverse();
document.write(arr + "<br>");
//6. sort() 对数组元素排序
arr.sort();
document.write(arr + "<br>");
</script>
7.JSON
JSON(JavaScript Object Notation, JavaScript对象标记)，是一种轻量级的数据交换格式，用于服务器与浏览器之间传输数据。
成员方法：
- stringify(对象) 将指定对象转换为json格式字符串
- parse(字符串) 将指定json格式字符串解析成对象
<script>
//定义天气对象
let weather = {
city : "北京",
date : "2088-08-08",
wendu : "10° ~ 23°",
shidu : "22%"
};
//1.将天气对象转换为JSON格式的字符串
let str = JSON.stringify(weather);
document.write(str + "<br>");
function aa(){
console.log("hh");
}
//2.将JSON格式字符串解析成JS对象
let weather2 = JSON.parse(str);
document.write(typeof(aa)+"<br>");
document.write(typeof(weather)+"<br>");
document.write("城市：" + weather2.city + "<br>");
document.write("日期：" + weather2.date + "<br>");
document.write("温度：" + weather2.wendu + "<br>");
document.write("湿度：" + weather2.shidu + "<br>");
</script>
JSON和字面量的区别
- json必须是符合以下
- 1.键一定要用双引号，值如果是字符串也要用双引号包括
- 2.数据只包括，数字，布尔，数组，null，对象，字符串
- 而JavaScript对象字面量属性不用引号也可以，而且值可以是任何类型，函数，undefined或者是正则都是可以的 。json只是JavaScript语法集中的一种，还有很多其他部分的东西都是不符合json的规范。
BOM
- BOM(Browser Object Model)：浏览器对象模型。
- 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
History历史记录对象，Location地址栏对象，Window窗口对象，Navigator浏览器对象，Screen显示器屏幕对象
| BOM常用对象 | 作用 |
|---|---|
| window | 浏览器窗口 prompt(), alert(), setInterval() confirm() 确定框，有2个选择按钮(确定，取消)等 |
| location | 代表浏览器的地址栏 href属性:1. 获取属性值，得到当前访问的地址2. 设置属性值，跳转到指定的页面 search属性:获取?后面的参数字符串 reload()方法：重载加载当前的页面，类似于刷新 |
| history | 浏览的历史记录 forward():相当于浏览器上前进按钮 back():相当于浏览器上后退按钮 go(正数或负数):go(1)相当于前进，go(-1)相当于后退 |
定时器
- 唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
- clearTimeout(标识)：取消一次性定时器。
- 唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
- clearInterval(标识)：取消循环定时器。
<body>
<p>
注册成功！<span id="time">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>
封装
定义一个my.js文件
//封装document.getElementById方法
function getById(id){
return document.getElementById(id);
}
function getByName(name) {
return document.getElementsByName(name);
}
function getByTag(tag) {
return document.getElementsByTagName(tag);
}
导入my.js文件
<script src="my.js"></script>
<script>
let div1 = getById("div1");//调用封装的方法
alert(div1);
// let div1 = document.getElementById("div1");
// alert(div1);
// let divs = document.getElementsByName("div2");
// alert(divs.length);
// let divs2 = document.getElementsByTagName("div");
// alert(divs2.length);
</script>
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
