javaScript之内置对象与BOM(游览器对象模型)

面向对象

​ 在java中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。

类的定义和使用

• 定义格式

  class 类名{
      //构造方法
      constructor(变量1,变量2...){
          变量赋值
      }
      
      //定义方法
      方法名(参数列表) {
          方法体;
          return 返回值;
      }
  }
  

  注意：javaScript中在创建类的时候不需要提前指定属性。

• 使用格式

  //创建对象
  let 对象名 = new (实际变量值);
  对象名.方法名()
  

• 代码示例

  //创建一个学生类
  class student {
  
  	//创建构造方法
  	constructor(name, age, sex) {
  		this.name = name;
  		this.age = age;
  		this.sex = sex;
  	}
  
  	//创建一个方法
  	show() {
  		console.log(this.name);
  		console.log(this.age);
  		console.log(this.sex);
  	}
  }
  
  //创建对象
  let stu = new student("mini", 4, '女');
  //调用方法
  stu.show();
  //调用属性
  stu.name
  

字面量定义类和使用

• 定义格式

  let 对象名 = {
      变量名: 变量值,
      变量名: 变量值,
      ...
      方法名: function(参数列表) {
          方法体;
          return 返回值;
      }
  }
  

• 使用格式

  对象名.变量名;
  对象名.方法名();
  

• 代码示例

  //创建一个学生类
  let student = {
  	//定义变量
  	name: "不知火舞",
  	age: 36,
  	sex: '女',
  	eat: ["牛欢喜", "红烧狮子头"],
  	//定义方法
  	show:function(hobby) {
  		console.log(hobby);
  	},
  	eats: function() {
  		console.log(this.eat[0] + "---" + this.eat[1]);
  	}
  }
  
  //调用属性
  student.name
  //调用方法
  student.show("游泳");
  student.eats();
  

  字面量定义类，有点类似于json格式的使用。

继承

• 继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。

• 继承关键字：extends

• 顶级父类：Object

• 代码示例

  //定义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 + "
  ");
  	}
  }
  
  //使用Worker
  let w = new Worker("张三",23,10000);
  w.show();
  w.eat();
  

内置对象

Number

方法名	说明
parseFloat()	将传入的字符串浮点数转为浮点数
parseInt()	将传入的字符串整数转为整数

Math

方法名	说明
ceil(x)	向上取整
floor(x)	向下取整
round(x)	把数四舍五入为最接近的整数
random()	随机数,返回的是0.0-1.0之间范围(含头不含尾)
pow(x,y)	幂运算 x的y次方

Date

• 构造方法

  构造方法	说明
  Date()	根据当前时间创建对象
  Date(value)	根据指定毫秒值创建对象
  Date(year,month,[day,hours,minutes,seconds ,milliseconds])	根据指定字段创建对象(月份是0~11)

• 成员方法

  成员方法	说明
  getFullYear()	获取年份
  getMonth()	获取月份(0~11，0代表1月，1代表2月，以此推类)
  getDate()	获取天数
  getHours()	获取小时
  getMinutes()	获取分钟
  getSeconds()	获取秒数
  getTime()	返回据1970年1月1日至今的毫秒数
  toLocaleString()	返回本地日期格式的字符串

String

• 构造方法

  构造方法	说明
  String(value)	根据指定字符串创建对象
  let s = “字符串”	直接赋值

• 成员方法

  成员方法	说明
  length属性	获取字符串长度
  charAt(index)	获取指定索引处的字符
  indexOf(value)	获取指定字符串在源字符串中第一次出现的索引位置,找不到为-1
  substring(start,end)	根据指定索引范围截取字符串 (含头不含尾)
  split(value)	根据指定规则切割字符串，返回数组
  replace(old,new)	使用新字符串替换老字符串

RegExp(正则表达式)

• 构造方法

  构造方法	说明
  RegExp(规则)	根据指定规则创建对象
  let reg = /^规则$/	直接赋值

• 成员方法

  成员方法	说明
  test(匹配的字符串)	根据指定规则验证字符串是否符合

• 规则

  表达式	说明
  [a]	只能是a
  [abc]	只能是abc中的某一个
  [1]	只能是1
  [123]	只能是123中的某一个
  [a-z]	可以是a到z中的某一个
  [A-Z]	可以是A到Z中的某一个
  [0-9]	可以是0到9中的某一个
  \d	任何数字[0-9]的简写
  \D	任何非数字的简写
  \w	单词字符：[a-zA-Z_0-9]的简写
  \W	非单词字符
  {5}	只能出现5次
  {4,6}	只能出现4到6次

• 代码示例

  使用正则表达式验证手机号是否正确

  //定义正则表达式，验证手机号11位
  let reg1 = /^[1][356789][\d]{9}$/;
  reg1.test("17764809513");
  

Array

• 构造方法

  构造方法	说明
  let arr = [元素1, 元素2…]	直接创建一个数组

• 成员方法

  成员方法	说明
  push(元素)	添加元素到数组的末尾
  pop()	删除数组末尾的元素
  shift()	删除数组最前面的元素
  includes(元素)	判断数组是否包含给定的值
  reverse()	反转数组中的元素
  sort()	对数组元素进行排序

Set

• 特点

  JavaScript 中的 Set 集合，元素唯一，存取顺序一致。

• 构造方法

  构造方法	说明
  Set()	创建Set集合对象

• 成员方法

  成员方法	说明
  add(元素)	向集合中添加元素
  size属性	获取集合长度
  keys()	获取迭代器对象
  delete(元素)	删除指定元素

• 遍历

  for(let 变量名 of 要遍历的集合) {
      
  }
  //变量名表示集合中的每个元素，取名可以随意。
  
  

Map

• 特点

  JavaScript 中的 Map 集合，key 唯一，存取顺序一致。

• 构造方法

  构造方法	说明
  Map()	创建Map集合对象

• 成员方法

  成员方法	说明
  set(key,value)	向集合中添加元素
  size属性	获取集合长度
  get(key)	根据key获取value
  entries()	获取迭代器对象
  delete(key)	根据key删除键值对

• 遍历

  for(let 变量名 of 要遍历的集合) {
      
  }
  //变量名表示集合中的每个元素，取名可以随意。
  
  

JSON

• 介绍

  1. JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
  2. 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
  3. 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。

• 常用方法

  成员方法	说明
  stringify(对象)	将指定对象转化为json格式字符串
  parse(字符串)	将指定json格式字符串解析为对象

• 代码示例

  //创建一个对象
  let student = {
  	name: "不知火舞",
  	age: 18,
  	show() {
  		console.log(this.name + "----" + this.age);
  	}
  }
  
  //将对象转化为json字符串
  let stus = JSON.stringify(student);
  console.log(stus);
  
  //将json字符串转化为一个对象
  let student1 = JSON.parse(stus);
  console.log(student1);
  
  

BOM

BOM介绍

• BOM(Browser Object Model)：浏览器对象模型。

• 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。

  • Navigator：游览器对象

  • Screen：显示器屏幕对象

  • History：历史记录对象

  • Window：窗口对象

  • Location：地址栏对象

    我们使用较多的就是window对象及location对象

Window窗口对象

1. 定时器

   • 一次性定时器

     • 使用定时器

       window.setTimeout(功能，毫秒值)

       注意：该函数会返回一个定时器的唯一标识，可以通过表示清除定时器。

     • 清除一次性定时器

       clearTimeout(标识)

   • 循环定时器

     • 使用定时器

       window.setInterval(功能，毫秒值)

       注意：该函数会返回一个定时器的唯一标识，可以通过表示清除定时器。

     • 清除循环定时器

       clearInterval(标识)

   • 代码示例

     //弹窗函数
     function fun() {
         alert("hehe");
     }
     //设置一次性定时器
     let d1 = window.setTimeout("fun()", 2000);
     //清除一次性定时器
     window.clearTimeout(d1);
     
     //设置循环定时器
     let d2 = window.setInterval("fun()", 2000);
     //清除循环定时器
     window.clearInterval(d2);
     
     

2. 页面加载事件

   • window.onload：在页面加载完毕后触发此事件的功能。

   • 代码示例

     //定义页面加载事件
     window.onload = function() {
     	alert("页面加载已完成！");
     }
     
     

Location地址栏对象

• href属性

  就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

• 代码示例

  定时跳转

  //定义变量
  let num = 5;
  
  //定义跳转函数
  function jump() {
  	num--;
  	//判断变量是否为0，为0则进行跳转
  	if(num == 1) {
  		//跳转到百度网址
  		location.href = "www.baidu.com";
  	}
  
  	//设置span的内容
  	document.getElementById("time").innerText = num;
  }
  
  //创建定时器
  window.setInterval("jump()", 1000);
  
  

javaScript封装

• 封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。

• 例如，获取元素，删除元素的方法是不是很麻烦啊，尤其是删除元素，每次一删除一个元素都需要找到他的父元素，然后利用父元素再删除子元素，想想都很麻烦；所以我们就可以选择将这些繁琐的步骤封装成一个方法，简化我们的使用。

• 代码示例：封装一个删除元素的方法

  html

  
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>封装一个函数，用于删除自己title>
  head>
  
  <body>
      <div id="div1">div1div>
      <div id="div2">div2div>
  body>
  
  <script src="js/my.js">script>
  <script type="text/javascript">
      //获取要删除的子元素
      let div1 = document.getElementById("div1");
      //调用自定义的方法，进行删除子元素标签
      remove(div1);
  script>
  html>
  
  

  封装的方法

  function remove(element) {
      //找到传入的元素的父元素
      let parent = element.parentElement;
      //利用父元素，删除子元素
      parent.removeChild(element);
  }
  
  

• 注意：要先引入js，才能调用方法，因为程序的执行是由上往下执行的；要先引入，才能使用。