Web APIs五、BOM操作浏览器

零、文章目录

Web APIs五、BOM操作浏览器

1、Window对象

(1)BOM(浏览器对象模型)
  • BOM(Browser Object Model ) 是浏览器对象模型
  • window对象是一个全局对象,也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

Web APIs五、BOM操作浏览器_第1张图片

案例如下:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOMtitle>
head>

<body>
    <script>
        // document是window对象的对象属性
        console.log(document === window.document)
        
        // fn是window的方法
        function fn() {
            console.log(11)
        }
        window.fn()

        // num是window对象的属性
        var num = 10
        console.log(window.num)
    script>
body>

html>
(2)JS执行机制
  • 单线程和多线程

    • JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。

    • 这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。

    • 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

    • 为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步。

  • 同步和异步

    • 同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
    • 异步:你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
    • 他们的本质区别: 这条流水线上各个流程的执行顺序不同。
  • 同步任务和异步任务

    • 同步任务:同步任务都在主线程上执行,形成一个执行栈。
    • 异步任务:JS 的异步是通过回调函数实现的。一般而言,异步任务有三种类型:
      • 1、普通事件,如 click、resize 等
      • 2、资源加载,如 load、error 等
      • 3、定时器,包括 setInterval、setTimeout 等
    • 异步任务相关添加到任务队列中(任务队列也称为消息队列)。
  • JS执行机制:由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop) 。

    • 先执行执行栈中的同步任务。
    • 异步任务放入任务队列中。
    • 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。

Web APIs五、BOM操作浏览器_第2张图片

Web APIs五、BOM操作浏览器_第3张图片

案例如下:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS执行机制title>
head>

<body>
    <script>
        console.log(1)
        console.log(2)
        setTimeout(function() {
            console.log(3)
        }, 0)
        console.log(4)
        //结果 1 2 4 3
    script>
body>

html>
(3)location对象
  • location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分
  • 常用属性和方法:
    • href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
    • search 属性获取地址中携带的参数,符号 ?后面部分
    • hash 属性获取地址中的啥希值,符号 # 后面部分,后期vue路由的铺垫,经常用于不刷新页面,显示不同页面,比如 网易云音乐
    • reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新

案例如下:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location对象title>
head>

<body>
    <button class="reload">刷新button>

    <script>
        // location
        // console.log(window.location)
        // console.log(location)
        // console.log(location.href)        

        // 1. href 经常用href 利用js的方法去跳转页面
        // location.href = 'http://www.baidu.com'

        // 2.强制刷新
        const reload = document.querySelector('.reload')
        reload.addEventListener('click', function() {
            // f5 刷新页面
            // location.reload()
            // 强制刷新  ctrl+f5
            location.reload(true)
        })
    script>
body>

html>

5秒钟之后自动跳转页面:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5秒钟之后自动跳转页面title>
    <style>
        span {
            color: red;
        }
    style>
head>

<body>
    <a href="https://www.baidu.com">支付成功<span>5span>秒钟之后跳转到首页a>
    <script>
        // 1. 获取元素
        const a = document.querySelector('a')
            // 2.开启定时器
            // 3. 声明倒计时变量
        let num = 5
        let timerId = setInterval(function() {
            num--
            a.innerHTML = `支付成功${num}秒钟之后跳转到首页`
                // 如果num === 0 则停止定时器,并且完成跳转功能
            if (num === 0) {
                clearInterval(timerId)
                    // 4. 跳转  location.href
                location.href = 'https://www.baidu.com'
            }
        }, 1000)
    script>
body>

html>
(4)navigator对象
  • navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息
  • 常用属性和方法:
    • 通过 userAgent 检测浏览器的版本及平台

案例如下:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动跳转到移动端title>
    <script>
        // 检测 userAgent(浏览器信息)
        !(function() {
            const userAgent = navigator.userAgent
                // 验证是否为Android或iPhone
            const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
            const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
                // 如果是Android或iPhone,则跳转至移动站点
            if (android || iphone) {
                location.href = 'http://m.jd.com'
            }
        })()
    script>
head>

<body>
    这是pc端的页面
body>

html>
(5)histroy对象
  • history的数据类型是对象,主要管理历史记录,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等
  • 常用属性和方法:

Web APIs五、BOM操作浏览器_第4张图片

  • history对象一般在实际开发中比较少用,但是会在一些OA办公系统中见到。

案例如下:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>history对象title>
head>

<body>
    <button>后退button>
    <button>前进button>
    <script>
        const back = document.querySelector('button:first-child')
        const forward = back.nextElementSibling
        back.addEventListener('click', function() {
            // 后退一步
            // history.back()
            history.go(-1)
        })
        forward.addEventListener('click', function() {
            // 前进一步
            // history.forward()
            history.go(1)
        })
    script>
body>

html>

2、本地存储

(1)本地存储介绍
  • 以前我们页面写的数据一刷新页面就没有了,是不是?
  • 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
    • 1、数据存储在用户浏览器中
    • 2、设置、读取方便、甚至页面刷新不丢失数据
    • 3、容量较大,sessionStorage和localStorage约 5M 左右
(2)本地存储分类
  • 作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在

  • 特性:

    • 可以多窗口(页面)共享(同一浏览器可以共享)
    • 以键值对的形式存储使用
  • 语法:

    • 存储数据:localStorage.setItem(key, value),存在更新,不存在新增
    • 获取数据:localStorage.getItem(key)
    • 删除数据:localStorage.removeItem(key)
  • 浏览器查看本地数据:

Web APIs五、BOM操作浏览器_第5张图片

  • 特性:

    • 生命周期为关闭浏览器窗口

    • 在同一个窗口(页面)下数据可以共享

    • 以键值对的形式存储使用

    • 用法跟localStorage 基本相同

案例如下:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage存储title>
head>

<body>
    <script>
        // 1. 要存储一个名字  'uname', 'pink老师'
        // localStorage.setItem('键','值')
        localStorage.setItem('uname', 'pink老师')
            // 2. 获取方式  都加引号
        console.log(localStorage.getItem('uname'))
            // 3. 删除本地存储  只删除名字
            // localStorage.removeItem('uname')
            // 4. 改  如果原来有这个键,则是改,如果没有这个键是增
        localStorage.setItem('uname', 'red老师')

        // 我要存一个年龄
        // 2. 本地存储只能存储字符串数据类型
        localStorage.setItem('age', 18)
        console.log(localStorage.getItem('age'))
    script>
body>

html>
(3)存取复杂数据类型
  • 存储对象

    • **问题:**本地只能存储字符串,无法存储复杂数据类型。

    • **解决:**需要将复杂数据类型转换成JSON字符串,再存储到本地

    • 语法:JSON.stringify(复杂数据类型)

Web APIs五、BOM操作浏览器_第6张图片

Web APIs五、BOM操作浏览器_第7张图片

Web APIs五、BOM操作浏览器_第8张图片

  • 取出对象

    • **问题:**因为本地存储里面取出来的是字符串,不是对象,无法直接使用

    • **解决:**把取出来的字符串转换为对象

    • 语法:JSON.parse(JSON字符串)

Web APIs五、BOM操作浏览器_第9张图片

image-20230311213045801

Web APIs五、BOM操作浏览器_第10张图片

案例如下:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>存储复杂数据类型title>
head>

<body>
    <script>
        const obj = {
                uname: 'pink老师',
                age: 18,
                gender: '女'
            }
            // 存储 复杂数据类型  无法直接使用
            // localStorage.setItem('obj', obj)  [object object]
            // console.log(localStorage.getItem('obj'))//[object object]

        // 1.复杂数据类型存储必须转换为 JSON字符串存储
        localStorage.setItem('obj', JSON.stringify(obj))
            // JSON 对象  属性和值有引号,而是引号统一是双引号
            // {"uname":"pink老师","age":18,"gender":"女"}
            // 取出来的是字符串不是对象,需要转换
            // console.log(typeof localStorage.getItem('obj'))
            // 2. 把JSON字符串转换为 对象
        const str = localStorage.getItem('obj') // {"uname":"pink老师","age":18,"gender":"女"}
        console.log(JSON.parse(str))
    script>
body>

html>

3、综合案例

(1)需求

Web APIs五、BOM操作浏览器_第11张图片

(2)模块分析

Web APIs五、BOM操作浏览器_第12张图片

(3)思路分析

Web APIs五、BOM操作浏览器_第13张图片

(4)步骤

Web APIs五、BOM操作浏览器_第14张图片

Web APIs五、BOM操作浏览器_第15张图片

Web APIs五、BOM操作浏览器_第16张图片

Web APIs五、BOM操作浏览器_第17张图片

Web APIs五、BOM操作浏览器_第18张图片

Web APIs五、BOM操作浏览器_第19张图片

Web APIs五、BOM操作浏览器_第20张图片

image-20230313133330441

(5)代码
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理title>
    <link rel="stylesheet" href="css/index.css" />
head>

<body>
    <h1>新增学员h1>
    <form class="info" autocomplete="off">
        姓名:<input type="text" class="uname" name="uname" /> 年龄:
        <input type="text" class="age" name="age" /> 性别:
        <select name="gender" class="gender">
      <option value="">option>
      <option value="">option>
    select> 薪资:
        <input type="text" class="salary" name="salary" /> 就业城市:
        <select name="city" class="city">
      <option value="北京">北京option>
      <option value="上海">上海option>
      <option value="广州">广州option>
      <option value="深圳">深圳option>
      <option value="曹县">曹县option>
    select>
        <button class="add">录入button>
    form>

    <h1>就业榜h1>
    <table>
        <thead>
            <tr>
                <th>学号th>
                <th>姓名th>
                <th>年龄th>
                <th>性别th>
                <th>薪资th>
                <th>就业城市th>
                <th>操作th>
            tr>
        thead>
        <tbody>
            
        tbody>
    table>
    <script>
        // 参考数据
        // const initData = [
        //   {
        //     stuId: 1001,
        //     uname: '欧阳霸天',
        //     age: 19,
        //     gender: '男',
        //     salary: '20000',
        //     city: '上海',
        //   }
        // ]

        // 1. 读取本地存储的数据   student-data  本地存储的命名
        const data = localStorage.getItem('student-data')
            // console.log(data)
            // 2. 如果有就返回对象,没有就声明一个空的数组  arr 一会渲染的时候用的
        const arr = data ? JSON.parse(data) : []

        // console.log(arr)
        // 获取 tbody
        const tbody = document.querySelector('tbody')
            // 3. 渲染模块函数
        function render() {
            // 遍历数组 arr,有几个对象就生成几个 tr,然后追击给tbody
            // map 返回的是个数组  [tr, tr]
            const trArr = arr.map(function(item, i) {
                    // console.log(item)
                    // console.log(item.uname)  // 欧阳霸天
                    return `
        
          ${item.stuId}
          ${item.uname}
          ${item.age}
          ${item.gender}
          ${item.salary}
          ${item.city}
          
            ${i}>删除
          
         
        `
                })
                // console.log(trArr)
                // 追加给tbody
                // 因为 trArr 是个数组, 我们不要数组,我们要的是 tr的字符串 join()
            tbody.innerHTML = trArr.join('')
        }
        render()


        // 4. 录入模块
        const info = document.querySelector('.info')
            // 获取表单form 里面带有 name属性的元素
        const items = info.querySelectorAll('[name]')
            // console.log(items)
        info.addEventListener('submit', function(e) {
            // 阻止提交
            e.preventDefault()
                // 声明空的对象
            const obj = {}
                // obj.stuId = arr.length + 1
                // 加入有2条数据   2 
            obj.stuId = arr.length ? arr[arr.length - 1].stuId + 1 : 1
                // 非空判断
            for (let i = 0; i < items.length; i++) {
                // console.log(items) // 数组里面包含 5个表单  name
                // console.log(items[i]) //  每一个表单 对象
                // console.log(items[i].name) //  
                // item 是每一个表单
                const item = items[i]
                if (items[i].value === '') {
                    return alert('输入内容不能为空')
                }
                // console.log(item.name)  uname  age gender
                // obj[item.name]   === obj.uname  obj.age 
                obj[item.name] = item.value
            }
            // console.log(obj)
            // 追加给数组
            arr.push(obj)
                //  把数组 arr 存储到本地存储里面
            localStorage.setItem('student-data', JSON.stringify(arr))
                // 渲染页面
            render()
                // 重置表单
            this.reset()
        })


        // 5. 删除模块
        tbody.addEventListener('click', function(e) {
            if (e.target.tagName === 'A') {
                // alert(1)
                // console.log(e.target.dataset.id)
                // 删除数组对应的这个数据
                arr.splice(e.target.dataset.id, 1)
                    // 写入本地存储
                localStorage.setItem('student-data', JSON.stringify(arr))
                    // 重新渲染
                render()
            }
        })
    script>
body>

html>

你可能感兴趣的:(大前端,前端,javascript,html)