JavaScript Web APIs 初学

能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性
能够说出什么是 API
能够说出什么是 Web API
二大知识点

1. Web APIs 和 JS 基础关联性
2. API 和 Web API

Web APIs 和 JS 基础关联性
1.2 JS 基础阶段以及 Web APIs 阶段

JS 基础学习 ECMAScript 基础语法为后面作铺垫 Web APIs 是 JS 的应用 大量使用 JS 基础语法做交互效果

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

简单理解：API 是给程序猿提供的一种工具，以便能够更轻松的实现想要完成的功能
比如手机充电，我们想实现充电这个功能
我们不关心手机内存啊变压器存储等等
我们不关心这个充电线怎么制作的
我们只知道，我们拿着充电线插进充电接口就可以充电
这个充电接口就是一个 API

2.2 Web API
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API（BOM 和 DOM）
现阶段我们主要针对于浏览器讲解常用的 API 主要针对浏览器做交互效果
比如我们想要浏览器弹出一个警示框，直接用 alert（‘弹出’）
MDN 详细 API 添加链接描述
因为 API 很多，所以我们将这个阶段称为 Web APIs

2.3
1.API 是为我们程序猿提供的一个接口，帮助我们实现某种功能，我们会使用就行了，不必纠结内部如何实现
2.Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果
3.Web API 一般都有输入和输出 （函数的传参和返回值），Web API 很多都是方法（函数）
4.学习 Web API 可以结合前面学习内置对象方法的思路学习

DOM

1. 什么是 DOM
   文档对象模型（Document Object Model，简称DOM）是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口
   W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容，结构和样式

1.2 DOM树

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签，属性，文本，注释等）DOM 中使用 node 表示 node就是节点的意思
DOM 把以上内容都看作是对象

获取元素
2.1 如何获取页面元素
有以下几种方式：
1.根据 ID 获取
2.根据标签名获取
3.通过 HTML5 新增的方法获取
4.特殊元素获取

2.2 根据 ID 获取
使用 getElementByld（）方法可以获取带有 ID 的元素对象

<div id="name">
    德玛西亚
</div>
<script>
    // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
    //get 获得  element 元素  by 通过  驼峰命名法 括号里面写id名字
    // 参数 id 是大小写敏感的字符串
    // 返回的是一个元素对象
    var timer = document.getElementById('name')  
    console.log(timer);
    console.log(typeof timer); //object
    console.dir(timer); // dir 打印我们返回的元素对象 更好的查看里面的属性和方法

2.3 根据标签名获取
使用 getElementsByTagName（）方法可以返回带有指定标签名的对象的集合

    <!-- 2.3 根据标签名获取 -->
    <ul>
        <li>阿巴阿巴阿巴1</li>
        <li>阿巴阿巴阿巴2</li>
        <li>阿巴阿巴阿巴3</li>
        <li>阿巴阿巴阿巴4</li>
        <li>阿巴阿巴阿巴5</li>
        <li>阿巴阿巴阿巴6</li>
    </ul>
    <script>
        // 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]); // 打印出来 <li>阿巴阿巴阿巴1<li>
        // 2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>

注意！
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的 就是把上面ul li 里面的元素发生变化之后，下面js代码是不用改动的。

我们的页面中肯定不止一组 ul 和 li ，我想得到另外一组的 ul 和 li

    <ul>
        <li>阿巴阿巴阿巴1</li>
        <li>阿巴阿巴阿巴2</li>
        <li>阿巴阿巴阿巴3</li>
        <li>阿巴阿巴阿巴4</li>
        <li>阿巴阿巴阿巴5</li>
    </ul>
    <ul id="dog">
        <li>德玛西亚1</li>
        <li>德玛西亚2</li>
        <li>德玛西亚3</li>
        <li>德玛西亚4</li>
        <li>德玛西亚5</li>

    </ul>
    <script>
        // 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签
        // 我们可以通过 id 把 想要的 ul 得过来 和其他的ul区别开，再去选择 li
        var nav = document.getElementById('dog'); //1.先通过id去获取想要的ul元素
        var navLis = nav.getElementsByTagName('li') //2.然后在获取这id里面的li
        console.log(navLis); //3.现在就可以得到你想要的li了，不会和其他的li冲突
    </script>

**2.4通过 HTML5新增的方法获取**
    **document.getElementsByClassName('类名'); //根据类名返回元素对象集合**

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        var box1 = document.getElementsByClassName('box');
        console.log(box1); //输出上面二个box内容
    </script>

2.document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象 里面的选择器需要加符号 .box #nav

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        //2.document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象 里面的选择器需要加符号 .box #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox); // 输出盒子1
        var nav = document.querySelector('#nav');
        console.log(nav);
        //把 li 全部选出来
        var li = document.querySelector('li');
        console.log(li); //输出第一个 li 也就是首页
    </script>

3.document.querySelectorAll(‘选择器’); //根据指定选择器返回所有的元素对象集合

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 3.document.querySelectorAll('选择器'); //根据指定选择器返回所有的元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox); // 输出上面所有的box内容
        var lis = document.querySelectorAll('li')
        console.log(lis); //输出上面所有的li内容
    </script>

2.5 获取特殊元素（body，html）
获取body元素
1.document.body 返回body元素对象

    <script>
        var bodyEle = document.body;
        console.log(bodyEle);
    </script>

获取html元素
2.document.documentElement 返回html元素对象

    <script>
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

**3.事件基础**
**3.1事件概述**
JavaScript 使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
简单理解：触发响应的一种机制
执行事件的步骤：
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）

    <button id="btn">李白</button>
    <script>
        //点击一个按钮，弹出对话框
        // 事件是有三部分组成 1.事件源 2.事件类型 3.事件处理程序 我们也称为事件三要素
        // 1.事件源 事件被触发的对象 在这里就是按钮李白
        var btn = document.getElementById('btn') // 已经获得了事件源
        // 2.事件类型 如何触发 什么事件 比如鼠标点击(onclick) 鼠标经过 还是键盘按下等等
        // 3.事件处理程序 通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('杜甫');
        }

自己案列练习：点击一个div 控制台输出 我被选中了

<div id="dog">德玛西亚</div>
<script>
    //1.获取事件源↓
    var dog1 = document.getElementById('dog')
    //2.绑定事件,注册事件↓
    dog1.onclick = function() {
        //3.添加事件处理程序↓ 
        console.log('我被选中了');
    }
</script>

3.3常见的鼠标事件
1.onclick
鼠标点击左键触发
2.onmouseover
鼠标经过触发
3.onmouseout
鼠标离开触发
4.onfocus
获得鼠标焦点触发
5.onblur
失去鼠标焦点触发
6.onmousemove
鼠标移动触发
7.onmouseup
鼠标弹起触发
8.onmousedown
鼠标按下触发

4.操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内
容、属性等。注意以下都是属性

4.1改变元素内容
element.innerText
案列：点击按钮 div里面文字发生变化

<button>显示当前系统的时间</button>
<div>某个时间</div>
<script>
    //当我们点击了按钮,div里面的文字会发生变化
    //1.获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //2.注册事件
    btn.onclick = function() {  //是btn被点击了 然后↓
        div.innerText = '2019-6-6'; //让这个div元素发生变化  写个自定义死日期
    }
</script>

上面是弹出死日期，我想要一个活的实时系统日期呢？

<button>显示当前系统的时间</button>
<div>某个时间</div>
<script>
    //当我们点击了按钮,div里面的文字会发生变化
    //1.获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //2.注册事件
    btn.onclick = function() {
        // div.innerText = '2019-6-6'; //假设想让他显示这个时间
        div.innerText = getDate();//想要一个活的日期 调用下面的函数

    }

    function getDate() {  //封装一个实时时间的函数
        var date = new Date();
        var year = date.getFullYear(); //得到的是年份
        var month = date.getMonth() + 1; // 月份小一个月 记得+1
        var dates = date.getDate(); //得到的是 3日 但是格式没有中国化，我们可以用数组的方法去调用一个大写的 星期三
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 必定是星期日开头，在老外眼里星期日是第一天，索引为0
        var day = date.getDay(); // 得到的是周几
        return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
    }
</script>

我们元素可以不用添加事件

//现在body里面随便创建一个 p 标签
    var p = document.querySelector('p');
    p.innerText = getDate(); //调用上面的时间函数

innerText 和 innerHTML 的区别

<div></div>
<p>
    我是文字
    <span>123</span>
</p>
<script>
    // 1.innerText 不识别html标签 非标准 去除空格和换行
    var div = document.querySelector('div');
    // div.innerText = '<strong>今天是：</strong> 2019'; //输出的是 <strong>今天是：</strong> 2019
    // 2.innerHTML 识别 html 标签 W3C标准 保留空格和换行
    // div.innerHTML = '<strong>今天是：</strong> 2019';
    // 这二个属性是可以读写的 可以获取元素里面的内容
    var p = document.querySelector('p');
    console.log(p.innerText);  //我是文字123
    console.log(p.innerHTML);  //输出我是文字123 下面还有<span>123</span>
</script>