WebApi的概念

WebAPI概念介绍

• API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
  • 任何开发语言都有自己的API
  • API的特征输入和输出(I/O)
  • API的使用方法(console.log())
• WebAPI概念
  • 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
  • 此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

JavaScript组成三个部分

• 1.ECMAScript - JavaScript的核心
  • 定义了javascript的语法规范
  • JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准
• 2.DOM - 文档对象模型
  • 一套操作页面元素的API
  • DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
• 3.BOM - 浏览器对象模型
  • 一套操作浏览器功能的API
  • 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM

• Docuemnt Object Model（文档对象模型）

  • 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
  • HTML DOM 模型被构造为对象的树。

• HTML DOM 树
  

• 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

• DOM工作原理介绍:
  硬盘代码读取到内存 -> 浏览器渲染引擎生成DOM树（document） -> 开始渲染页面

   js为什么可以操作网页的html元素?
   因为浏览器会将html代码读取到内存中，生成一颗dom树对象（document）
   修改了dom树内容，最终页面也会变化
  

BOM

• rowerser object model:浏览器对象模型
• BOM定义了一套操作浏览器功能的API
  

获取页面元素

• css和js语言都是可以通过选择器获取页面元素的

• id选择器 : #id名
• 类选择器: .类名
• 标签选择器:标签名
• 子代选择器:ul>li
• 后代选择器:ul li

1. document.querySelector(‘css选择器’)
   a. 只能获取满足选择器条件的 第一个元素
   b. 如果无法获取元素， 则会返回null
2. document.querySelectorAll(‘css选择器’)
   a. 可以获取满足选择器条件的 所有元素
   b. 返回值一定是数组（伪数组）

获取元素的属性

• 两种语法: 点语法:
  元素.属性名
  字符串语法:
  元素[‘属性名’]
  • div.style
• div.id
  • div.className

事件介绍及注册事件

• 1.事件：js处理用户交互的一种机制
  • 交互：什么元素在什么时刻做什么事
• 2.事件的三要素：组成事件的三要素
  • 事件源：什么元素（div p）
  • 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
  • 事件处理函数：做什么事（一段代码：函数）
• 3.注册事件:本质是给元素属性赋值
  • 事件源.事件类型 = 事件处理函数
    • box.onclick = function(){}
• 4.事件工作原理
  • a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
  • b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
• 5.页面中 任何元素 都可以注册 很多个事件(点击，移入等)

我写代码的思路

1.功能开发思路

• 1.分析需求
  • 点击了(事件类型)哪个元素(事件源),发生了什么事(事件响应)
• 2.根据需求理清思路
  • 事件三要素：事件源、事件类型、事件响应
• 3.根据思路编写代码
  • 熟能生巧