深入JS 学习日记

学习目标：

1能够说出Web APIs阶段与JavaScript语法阶段的关联性

2 能够说出什么是API和Web API

3.案例展示

---

学习内容：

一  API和Web API Web APIs和JS基础关联性

1.1 Web APIs和JS基础关联性

 JS的组成

1.2API和Web API

 API（Application Programming Interface应用程序编程接口）是一些预先定义的函数，奴目的是提供应用程序与开发人员基于某软件或者硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

Web API是历览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。

MDN详细 http://developer.mozilla.org/zh-CN/docs/Web/API

总结：

（1）API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会用就可以了，不必纠结于内部如何实现。

（2）Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。

（3）Web API一般都有输入和输出（函数传参和返回值），Web API很多都是方法（函数）

二 DOM

2.1DOM简介

文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

2.1.1DOM树

1. 文档：一个页面就是一个文档，DOM中使用document表示
2. 元素：页面中的所有标签都是元素，DOM中使用element表示
3. 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用nide表示

2.2获取元素

获取页面中的元素可以使用以下几种方式

1.根据ID获取

2.根据标签名获取

3.通过HTML5新增的方法获取

4.特殊元素获取

2.2.1根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象

语法：

参数：

element是一个Element对象，如果当前文档中拥有特定ID的元素不存在则返回null

id是大小写敏感的字符串，代表了所要查找的元素的唯一ID

返回值:

返回一个匹配到ID的DOM Element对象。若在当前Document下没有找到，则返回null

2.2.2根据标签名获取

使用getElementsBy TagName()方法可以返回值带有指定标签名的组合对象的集合。

注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己。

2.2.3通过HTML5新增的方法获取

2.3事件基础

2.3.1

简单理解：触发 — 响应机制。

点击一个按钮，弹出对话框

1.事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为时间三要素

（1）事件源 事件被触发的对象 谁按钮

（2）事件类型 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过 还是键盘按下

（3）事件处理程序 通过一个函数赋值的方式完成

2.3.2执行事件的步骤

1获取事件源

2注册事件（绑定事件）

3添加事件处理程序（采取函数赋值形式）

2.3.3

常见的鼠标触发事件

鼠标事件	触发事件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开出发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseuo	鼠标弹起触发
onmousedown	鼠标按下触发

 2.3.4分析事件三要素

下拉菜单三要素

关闭广告三要素

2.4操作元素

  JavaScript的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等

2.4.1改变元素内容

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

从起始位置到终止位置的内容，包括html标签，同时保留空格和换行。

innerText 和innerHTML的区别

innerText不识别html标签 非标准

div.innerHTML识别html标签 W3C标准

2.4.2常用元素的属性操作

2.4.3表单元素的属性操作

利用Domain可以操作如下表单元的属性：

2.5 定时器（回调函数）

2.5.1 setTimeout

1.window.setTimeout(调用函数，延时时间);

2.延时单位是毫秒，可省略，默认是0；

3.这个调用函数可以直接写函数，还可以写函数名。包括以下三种：

（1）直接写函数

 （2）写函数名

清除定时器clearTimeout(定时器名字)

因为清除定时器要指明清除哪个定时器，所以要给定时器起一个名字，即赋值给一个变量。

（3） setInterval

1.window.setTimeout(调用函数，延时时间);

2.延时单位是毫秒，可省略，默认是0；

3.与setTimeout不同的是，setInterval是每隔“延时时间”间隔就调用一次，属于重复调用。

4.清除定时器clearInterval(定时器名字)

---

学习成果： 计时器案例