前端day14-JS(WebApi)学习笔记(BOM、定时器)

原创

帅的一麻皮

修改于 2020-05-06 07:40:02

1.7K00

代码可运行

文章被收录于专栏：前端与Java学习前端与Java学习

运行总次数：0

代码可运行

01-BOM浏览器对象模型

1.1-BOM与DOM介绍

JavaScript语言由三部分组成
ECMAJavaScript：定义了js的语法规范
Dom：document object model文档对象模型：一个HTML文档中所有的一切都是dom对象 * Dom定义了一套操作HTML文档的API（节点的增删改查）
Bom：Brower object model浏览器对象模型例如：一个浏览器的窗口就是一个window对象 * Bom定义了一套操作浏览器窗口的API

Bom主要由五大对象组成：

window:浏览器核心对象
location：包含当前页面的URL信息
history：history对象主要用于记录你当前窗口的历史记录
navigator：包含当前浏览器的信息，例如用的什么浏览器，操作系统版本等
screen：获取用户电脑的屏幕分辨率（这个一般不用，因为对开发者没啥作用）

1.2-window对象

1.window对象：指的是当前浏览器窗口，它是JS中的顶级对象
- (1).所有的全局变量都是window对象的属性：最顶级的对象
  - document对象
  - bom对象
  - 全局的方法：alert(),setInterval()...........
- (2).只要是window的属性和方法，在使用的时候都可以省略window
  - 例如：window.alert() 可以省略window写成alert()
  - 例如：window.document 可以省略window写成document
- (3).window对象有一个特殊属性叫做name
  - 它永远都是一个字符串，无论给他赋什么值
2.window对象有两个常用的方法：open()与close()
- open():打开一个窗口
- close():关闭一个窗口

1.3-window对象三个事件

window对象有三个事件，记录了浏览器窗口从打开到关闭的三个过程

1.window.onload:界面上所有的内容加载完毕之后才触发这个事件
2.window.onbeforeunload:界面在关闭之前会触发这个事件
3.window.onunload:界面在关闭的那一瞬间会触发这个事件

1.4-location对象

1.location对象：包含当前页面的URL信息
- url：全球统一资源定位符
- url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径
- 暂时只需要知道location对象包含一个网页的网络url信息即可，具体的含义将在后面阶段学习网络的时候详细讲解
2.location对象有三个常用的方法
- （1）打开新网页：location.assign('你要打开的新网页的url')
- （2）替换当前网页：location.replace('要替换的网页url')
- (3) 刷新当前网页: location.reload()

下面这两种写法是等价的

window.location.assign('http://www.baidu.com');

window.location.href = 'http://www.baidu.com';

1.5-history对象

history对象主要用于记录你当前窗口的历史记录

主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
history.forward():前进
history.back():后退

1.6-navigator对象

navigator对象：包含当前浏览器的信息

工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    /*navigator对象：包含当前浏览器的信息
        工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）

     */
    console.log ( navigator );//navigator对象
    console.log ( navigator.appVersion );//当前浏览器版本信息
    console.log ( navigator.platform );//当前浏览器的硬件平台
    console.log ( navigator.userAgent );//当前浏览器信息
    //使用场景1：判断当前用户的操作系统是32位还是64位
    //谷歌和IE  64位显示WOW64    火狐显示Win64
    if(navigator.userAgent.indexOf('WOW64') != -1 || navigator.userAgent.indexOf('Win64') != -1){
        console.log ( "64位" );
    }else{
        console.log ( "32位" );
    }
    //使用场景2：判断用户当前使用哪种浏览器
    if(navigator.userAgent.indexOf('Chrome') != -1){
        console.log ( "谷歌浏览器" );
    }else if(navigator.userAgent.indexOf('Firefox') != -1){
        console.log ( "火狐浏览器" );
    }else{
        console.log ( "IE浏览器" );//也有可能是其他小众浏览器，可以忽略不计
    }

</script>
</html>

02-localstorage与sessionstorage

1.1-localstorage

1.localStorage:本地存储

将数据存储到浏览器

2.语法

存： localStorage.setItem('属性名','属性值')

取： localStorage.getItem('属性名')

删： localStorage.removeItem('属性名')

清空： localStorage.clear()

3.注意点

a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串

b.永久存储。除非自己删，否则一直存在于浏览器

1.2-sessionStorage

1.sessionStorage相当于短命版的localStorage，其他用法完全一致

2.两者区别：HP值不同

localStorage：永久存储（存在硬盘，HP值无限）

sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）

02-定时器作用及语法

1.1-setInterval

定时器：某一件事（一段代码）并不是马上执行，而是隔一段时间执行

setInterval:创建定时器
- 特点：一旦创建立即计时，必须要手动停止，否则会无限的每隔一段时间执行代码
clearInterval(定时器id)：清除定时器
- 一个页面可以创建很多个定时器，通过制定定时器id可以清除特定的定时器

1.2-setTimeout

定时器setTimeout与setInterval唯一的区别是，setTimeout定时器只会执行一次
总结：
- 1.如果你想让这个代码一段时间后只执行一次，使用setTimeout
- 2.如果你想让这个代码每隔一段时间执行一次（执行多次），使用setInterval

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网站

php

http

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网站

php

http

登录后参与评论

0 条评论

热度