Web APIs的第一天

Web APIs的第一天

JavaScript与ECMAScript

ECMAScript 是一套语法标准
简称ES
我们之前学的语法其实就是 ECMAScript 里的语法
变量、数据类型、运算等规则都是 ECMAScript 规定的
JavaScript 是什么？
遵守 ECMAScript 规则的一套编程语言
严格来讲，ECMAScript 配合浏览器提供的 Web APIs 才称之为 JavaScript
Web APIs 是什么？
浏览器提供的一套操作浏览器、页面内容的功能（主要是一些对象和方法）

DOM

DOM概念

什么是DOM

DOM是浏览器提供的一套专门用来操作网页内容的功能
1.DOM的核心思想
把网页内容当做对象来处理
2.DOM作用
开发网页内容特效和实现用户交互
3.DOM全称
Document Object Model（文档对象模型）

DOM 树

DOM树是什么
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

DOM 节点

1.DOM节点
DOM树里每一个内容都称之为节点
2.节点类型
元素节点 所有的标签 比如 body、 div html 是根节点
属性节点 所有的属性 比如 href
文本节点 所有的文本
其他

document

是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
代表浏览器显示网页内容的区域
网页所有内容都在document里面
document 是学习 DOM 的核心

DOM概念总结

1. DOM是什么？
文档对象模型
DOM是浏览器提供的一套专门用来操作网页内容的功能
2. DOM 树是什么？
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
作用：文档树直观的体现了标签与标签之间的关系
3. DOM 节点是什么？
DOM树里每一个内容都称之为节点
常见的DOM 节点类型： 元素节点、属性节点、文本节点等
4. document 是什么？
是 DOM 里提供的一个对象，用来访问和操作网页内容的

查找元素节点

查找元素节点就是选择页面中标签元素

根据 id 来查找dom元素节点

1.语法
doument.getElementById(‘标签的id’)
根据id查找标签
传入的id是字符串，记得加引号，直接写id名即可，不需要加 #
返回一个匹配到 ID 的 DOM Element 对象（所有节点都是对象）
找不到会得到null
可以通过对象里面的 nodeType 属性来标识节点类型

查找html和body元素节点

1.查找html元素语法
doument.getElemen
2.查找body元素语法
document.body

查找元素节点小结

1.找到html节点
document.documentElement
2.找到body节点
document.body
3.如果要找到别的标签
document.getElementById() 查找
传入的id是字符串，记得加引号，直接写id名即可，不需要加 #
返回一个匹配到 ID 的 DOM 元素对象
找不到会得到null
可以通过对象里面的 nodeType 属性来标识节点类型

操作元素节点

操作元素属性

1.直接修改元素的属性
对象.属性 = 值
2. 通过 setAttribute 方法修改
对象.setAttribute(‘属性’，‘值’)
1和2两种方式功能一样 ，推荐使用简单的 对象.属性名
3. 修改元素的样式
对象.style.样式属性 = 值
注意； 具体某个属性名如何连接字符串 ，转换为驼峰命名法
只能获取行内样式

操作元素文本

1. document.write
只能将文本内容追加到 前面的位置
文本中包含的标签会被解析
2. innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
3. innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析

案例

需求：每次刷新页面背景图片都会随机生成
分析：
①：每次刷新页面，页面都会显示不同的页面背景
②：用到随机函数 Math.random()
Math.floor(Math.random() * (max - min + 1)) + min

操作元素小结

操作元素属性有哪些方式？
点语法操作属性（推荐） 对象.属性
setAttribute(‘属性’, ‘值’)
对象.style.样式名
操作元素文本有哪些方式？
document.write()
innterText 不解析标签
innerHTML 解析标签

时间对象

实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
1.获得当前时间
let date = new Date()
2.获得指定时间
let date = new Date(‘2021-11-11’)

时间对象方法

案例

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面
分析：
①：调用时间对象方法进行转换
②：字符串拼接后，通过 innerText 给 标签
1.得到时间对象

2.方法(): 获取当前系统的时间相关数据

3.获取DOM节点

4.封装函数 末尾补零

函数的重点
1.学会时间对象方法使用
2.练习es6 模板字符串
3.函数封装
什么时候用？ 发现某个代码逻辑在上下文某些地方重复出现
关注，是否需要设置形参？ 调用的时候是否需要传入实参 是否需要设置返回值？调用的时候，是否需要返回一个数据

时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

获取时间戳的方法

实例化

1. 使用 getTime() 方法
   
2. 简写 +new Date()
   
3. 使用 Date().now()
   无需实例化
   但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
   

案例

需求：计算到双十一还有多少时间，格式：xx天xx小时xx分钟xx秒
分析：
①：用将来时间减去现在时间就是剩余的时间
②：核心： 使用将来的时间戳减去现在的时间戳
③：把剩余的时间转换为 天 时 分 秒

注意：
通过时间戳得到是毫秒，需要转换为秒在计算
转换公式：
d = Math.floor(总秒数/ 60/60 /24); // 计算天数
h = Math.floor(总秒数/ 60/60 ) %24 // 计算小时
m = Math.floor(总秒数 /60 )%60 ; // 计算分数
s = Math.floor(总秒数)%60; // 计算当前秒数
1.元素对象设置

2.时间对象 当前时间对象 获取指定日期的时间对象
3.得到时间戳

天数

时

分

秒

结果显示在页面

设置定时器 将代码封装在定时器的函数中，自动变换时间

总的函数代码


运行结果

定时器函数

定时器函数介绍

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码
例如：网页中的倒计时
要实现这种需求，需要定时器函数

定时器函数的基本使用

定时器函数可以开启和关闭定时器
1. 开启定时器
setInterval(函数, 间隔时间)
案例
需求1 控制台自动输出

需求2 1-9当index数值为10的时候 回到1，打印1

需求3 做简单轮播图

2. 关闭定时器
let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)
语法 关闭定时器 clearInterval(timer) timer需要接受开启定时器执行结果
一般不会刚创建就停止，而是满足一定条件再停止
案例
需求 1-9的时候，就不在打印 关闭定时器

运行结果

需求2 5s后重试


运行结果

定时器函数总结

定时器函数有什么作用？
可以根据时间自动重复执行某些代码
定时器函数如何开启？
setinterval(函数名, 时间)