脚本宝典收集整理的这篇文章主要介绍了

【重温基础】17.WebAPI介绍

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>本文是 <strong>重温基础</strong> 系列文章的第十七篇。<br />今日感受:挑战。 </p> <p>系列目录:</p> <ul> <li><a href="https://juejin.im/post/5c02b106f265da61764aa0c1" rel="nofollow noreferrer" target="_blank">【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)</a></li> <li><a href="http://js.pingan8787.com/" rel="nofollow noreferrer" target="_blank">【重温基础】1-14篇</a></li> <li><a href="https://segmentfault.com/a/1190000017891997">【重温基础】15.JS对象介绍</a></li> <li><a href="https://segmentfault.com/a/1190000017934683" target="_blank">【重温基础】16.JSON对象介绍</a></li> </ul> <p><strong>本章节复习的是JS中的关于Web<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>相关知识,介绍的<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>比较多。</strong> </p> <p><strong>前置知识:</strong> <br />需要了解 <a href="http://pingan8787.com/2019/01/14/131-%E3%80%90JavaScript%E3%80%91%E3%80%90%E9%87%8D%E6%B8%A9%E5%9F%BA%E7%A1%80%E3%80%9115-JS%E5%AF%B9%E8%B1%A1%E4%BB%8B%E7%BB%8D/" rel="nofollow noreferrer" target="_blank">JS 对象</a> 的相关知识。</p> <h1 id="articleHeader0">1.Web<a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a>介绍</h1> <blockquote><p>API:应用程序接口,是基于编程语言构建的结构,使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码,并提供一些简单的接口规则直接使用。</p></blockquote> <p>客户端JavaScript提供很多可用的API,他们本身不是JavaScript语言的一部分,却建立在JavaScript语言核心的顶部,为使用JavaScript代码提供额外的超强能力。他们通常分为两类:</p> <ul> <li> <strong>浏览器API</strong>:</li> </ul> <p>内置于Web浏览器,可以从浏览器和电脑周围环境获取数据,并用于复杂的操作。例如<code>Geo<a href="http://www.js-code.com/tag/location" title="location" target="_blank">location</a> API</code>提供了一些简单的JavaScript结构来获取位置数据,这种API通常抽象很多复杂逻辑,我们只要调用API即可。</p> <ul> <li> <strong>第三方API</strong>:</li> </ul> <p>缺省情况下不会内置于浏览器,而必须在Wen中某个地方获取代码和信息,例如<code>Twitter API</code>可以推送最新推文给我们,它提供一系列第三方API让我们获取Twitter的服务和信息。</p> <h2 id="articleHeader1">1.1 API如何工作</h2> <p><strong>那么,这些API是如何工作的?</strong> <br />不同的JavaScript的API工作内容不同,但具有以下几个相同点:</p> <ol> <li><strong>都是基于对象</strong></li> </ol> <p>API通过使用一个或多个JavaScript对象与我们的代码交互,这些对象作为API使用的数据(包含在对象属性中)的容器,和API提供的功能(包含在对象的方法中)。 <br />如<code>Geo<a href="http://www.js-code.com/tag/location" title="location" target="_blank">location</a> API</code>则是由以下几个对象组成:</p> <ul> <li> <code>Geo<a href="http://www.js-code.com/tag/location" title="浏览关于“location”的文章" target="_blank" class="tag_link">location</a></code>, 包含三种控制地理数据检索的方法。</li> <li> <code>Position</code>, 表示在给定的时间的相关设备的位置。它包含一个当前位置的<code>Coord<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>ates</code> 对象。还包含了一个时间戳,这个时间戳表示获取到位置的时间。</li> <li> <code>Coord<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>ates</code>,包含有关设备位置的大量有用数据,包括经纬度,高度,运动速度和运动方向等。</li> </ul> <p>通常这么使用:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="navigator.geolocation.getCurrentPosition(function(options){ // ... do something });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><a href="http://www.js-code.com/tag/navigator" title="浏览关于“navigator”的文章" target="_blank" class="tag_link">navigator</a>.geolocation.getCurrentPosition(<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params"><a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>s</span>)</span>{ <span class="hljs-comment">// ... <a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a> someth<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>g</span> });</code></pre> <ol> <li><strong>都有可识别的入口点</strong></li> </ol> <p>即API的入口位置,如<code>Geolocation API</code>的入口在<code>Navigator.geolocation</code> 属性, 它返回浏览器的 <code>Geolocation</code> 对象,所有有用的地理定位方法都可用。 <br />在<strong><a href="http://www.js-code.com/tag/%e6%96%87%e6%a1%a3%e5%af%b9%e8%b1%a1%e6%a8%a1%e5%9e%8b" title="文档对象模型" target="_blank">文档对象模型</a>(<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>)</strong>的API入口位置更简单,常常都挂载在<code>Document</code>对象上,或者<code><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></code>元素上:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> a = <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.createElement('<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>');// 创建一个新的<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>元素<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> b = <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.querySelector('<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>');// 获取一个已经存在的div元素<br /> a.<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>Content = &quot;hi leo!&quot;; // 给a元素设置文本<br /> b.appendChild(a); // 将a元素添加到b元素下<br /> // </p> <div>hi leo!</div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> a = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.createElement(<span class="hljs-string">'div'</span>);<span class="hljs-comment">// 创建一个新的div元素</span> <span class="hljs-keyword">let</span> b = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'div'</span>);<span class="hljs-comment">// 获取一个已经存在的div元素</span> a.<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>Content = <span class="hljs-string">"hi leo!"</span>; <span class="hljs-comment">// 给a元素设置文本</span> b.appendChild(a); <span class="hljs-comment">// 将a元素添加到b元素下</span> <span class="hljs-comment">// &lt;div&gt;hi leo!&lt;/div&gt;</span></code></pre> <p>详细的后面介绍。</p> <ol> <li><strong>都使用事件来处理状态的变化</strong></li> </ol> <p>有些特定的API会包含一些事件,当事件触发,我们便可以运行函数的处理属性,做一些不同的操作。例如<code>XMLHttpRequest</code>对象的实例,有很多的事件可以调用。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 简单写 const url = &quot;https://www.baidu.com&quot;; const req = new XMLHttpRequest(); req.open('GET', url); req.responseType = &quot;json&quot;; req.send(); req.onload = function(){ // ... do something }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 简单写</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> url = <span class="hljs-string">"https://www.baidu.com"</span>; <span class="hljs-keyword">const</span> req = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> XMLHttpRequest(); req.<a href="http://www.js-code.com/tag/open" title="浏览关于“open”的文章" target="_blank" class="tag_link">open</a>(<span class="hljs-string">'GET'</span>, url); req.responseType = <span class="hljs-string">"json"</span>; req.send(); req.<a href="http://www.js-code.com/tag/onload" title="浏览关于“onload”的文章" target="_blank" class="tag_link">onload</a> = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">// ... do something</span> }</code></pre> <ol> <li><strong>都会在适当位置提供额外的安全机制</strong></li> </ol> <p>主要还是处于安全考虑,提供额外的安全机制,比如常见同源策略,一些特定页面只能在https协议的网页工作等。 </p> <p>接下来看看这些API都能实现什么作用。</p> <h1 id="articleHeader2">2.文档API</h1> <p>我们在开发web页面和应用时,就会经常操作页面文档的结构,这里就会大量用到<code><a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument</code>对象,控制<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>和样式信息的<strong><a href="http://www.js-code.com/tag/%e6%96%87%e6%a1%a3%e5%af%b9%e8%b1%a1%e6%a8%a1%e5%9e%8b" title="文档对象模型" target="_blank">文档对象模型</a>(<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>)</strong>。 <br />下面贴一张web页面视图中的浏览器的主要部分(来源MDN): <br /><span class="img-wrap"><img data-src="/img/remote/1460000017957071?w=664&amp;h=444" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="浏览器" title="浏览器" style="cursor: pointer;"></span></p> <p><strong>介绍</strong>:</p> <ul> <li> <code><a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a></code>:是载入浏览器的标签,JavaScript中用<code>Window</code>对象表示,可以实现很多操作:获取窗口大小,操作载入窗口的文档,存储文档数据等。</li> <li> <code><a href="http://www.js-code.com/tag/navigator" title="navigator" target="_blank">navigator</a></code>:浏览器存在web上的状态和表示(即用户代理),JavaScript中用<code>Navigator</code>对象表示,用于获取对象的一些信息,如:摄像头的地理信息,用户偏爱的语言等。</li> <li> <code><a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a></code>:是实际载入窗口的页面,JavaScript中用<code>Document</code>对象表示,可以实现很多文档操作:获取<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>元素,修改文本内容,设置新样式等。</li> </ul> <h2 id="articleHeader3">2.1 <a href="http://www.js-code.com/tag/%e6%96%87%e6%a1%a3%e5%af%b9%e8%b1%a1%e6%a8%a1%e5%9e%8b" title="浏览关于“文档对象模型”的文章" target="_blank" class="tag_link">文档对象模型</a>(DOM)</h2> <p>在浏览器标签中当前载入的文档用文档对象模型(Document <a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a> Model,简称DOM)表示。 <br />这是一个由浏览器生成的“树结构”,使得编程语言可以很容易访问<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>结构,操作等。 </p> <p>下面是基本的DOM操作:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let a = document.createElement('a');// 1. 创建一个新的a元素 let b = document.querySelector('a');// 2. 获取一个已经存在的a元素 a.textContent = &quot;进入pingan8787博客&quot;; // 3. 给a元素设置文本 a.href = &quot;http://www.pingan8787.com&quot;; // 4. 给a元素添加跳转地址 a.style.color = &quot;red&quot;; // 5. 给a元素添加样式 a.style.backgroundColor = &quot;black&quot;; a.setAttribute(&quot;my_class&quot;); // 6. 给a元素添加class类名 b.appendChild(a); // 7. 将a元素添加到b元素下" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">let</span> a = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'a'</span>);<span class="hljs-comment">// 1. 创建一个新的a元素</span> <span class="hljs-keyword">let</span> b = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'a'</span>);<span class="hljs-comment">// 2. 获取一个已经存在的a元素</span> a.textContent = <span class="hljs-string">"进入pingan8787博客"</span>; <span class="hljs-comment">// 3. 给a元素设置文本</span> a.href = <span class="hljs-string">"http://www.pingan8787.com"</span>; <span class="hljs-comment">// 4. 给a元素添加跳转地址</span> a.style.color = <span class="hljs-string">"red"</span>; <span class="hljs-comment">// 5. 给a元素添加样式</span> a.style.backgroundColor = <span class="hljs-string">"black"</span>; a.setAttribute(<span class="hljs-string">"my_class"</span>); <span class="hljs-comment">// 6. 给a元素添加class类名</span> b.appendChild(a); <span class="hljs-comment">// 7. 将a元素添加到b元素下</span></code></pre> <p>这么一个简单的例子,实际可以看出DOM提供的方法很多,下面分类介绍下这些方法:</p> <ol> <li><strong>DOM HTML操作</strong></li> </ol> <ul> <li> <strong>改变HTML输出流</strong>:</li> </ul> <p>通过<code>document.write()</code>直接修改HTML输出流写内容。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.write(&quot;hello leo&quot;);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-built_in">document</span>.write(<span class="hljs-string">"hello leo"</span>);</code></pre> <p><strong>注意:</strong>千万不要在文档加载之后使用,否则覆盖文档。</p> <ul> <li> <strong>改变HTML内容</strong>:</li> </ul> <p>通过<code>innerHTML</code>属性来改变HTML元素的内容:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.getElementById(id).innerHTML = new HTML; // 通过ID获取 (getElementById) // 通过name属性(getElementsByName) // 通过标签名 (getElementsByTagName) // 通过类名 (getElementsByClassName) // 获取html的方法 (document.documentElement) // 获取body的方法 (document.body) // 通过选择器获取一个元素(querySelector) // 通过选择器获取一组元素(querySelectorAll)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-built_in">document</span>.getElementById(id).innerHTML = <span class="hljs-keyword">new</span> HTML; <span class="hljs-comment">// 通过ID获取 (getElementById)</span> <span class="hljs-comment">// 通过<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>属性(getElementsByName)</span> <span class="hljs-comment">// 通过标签名 (getElementsByTagName)</span> <span class="hljs-comment">// 通过类名 (getElementsBy<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>Name)</span> <span class="hljs-comment">// 获取html的方法 (document.documentElement)</span> <span class="hljs-comment">// 获取body的方法 (document.body)</span> <span class="hljs-comment">// 通过选择器获取一个元素(querySelector)</span> <span class="hljs-comment">// 通过选择器获取一组元素(querySelectorAll)</span></code></pre> <p>例子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.getElementById(&quot;id1&quot;).innerHTML = &quot;hello leo!&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"id1"</span>).innerHTML = <span class="hljs-string">"hello leo!"</span></code></pre> <ul> <li> <strong>改变HTML属性</strong>:</li> </ul> <p>通过<code>attribute</code>属性来改变元素的属性:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.getElementById(id).attribute = new value" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-built_in">document</span>.getElementById(id).attribute = <span class="hljs-keyword">new</span> value</code></pre> <p>例子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-text="<img id = &quot;id1&quot; src =&quot;a.jpg&quot;>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">id</span> = <span class="hljs-string">"id1"</span> <span class="hljs-attr">src</span> =<span class="hljs-string">"a.jpg"</span>&gt;</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.getElementById(&quot;id1&quot;).src = &quot;leo.png&quot;;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"id1"</span>).src = <span class="hljs-string">"leo.png"</span>;</code></pre> <p>详细的文档可以查看<a href="http://www.w3school.com.cn/jsref/dom_obj_document.asp" rel="nofollow noreferrer" target="_blank">HTML DOM Document 对象</a></p> <ol> <li><strong>DOM <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>操作</strong></li> </ol> <ul> <li><strong>改变HTML样式</strong></li> </ul> <p>通过<code>style.styleName</code>属性修改元素的样式:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.getElementById(id).style.property = new style;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-built_in">document</span>.getElementById(id).style.property = <span class="hljs-keyword">new</span> style;</code></pre> <p>例子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.getElementById(&quot;id1&quot;).style.color = &quot;red&quot;; document.getElementById(&quot;id1&quot;).style.backgroundColor = &quot;green&quot;;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"id1"</span>).style.color = <span class="hljs-string">"red"</span>; <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"id1"</span>).style.backgroundColor = <span class="hljs-string">"green"</span>;</code></pre> <p>注意:<code>style</code>后面的样式的属性名只能使用<strong>命名小驼峰</strong>。</p> <ol> <li><strong>DOM 事件操作</strong></li> </ol> <p>如要对元素做点击事件的绑定,可以在HTML的<code><a href="http://www.js-code.com/tag/onclick" title="onclick" target="_blank">onclick</a></code>事件属性上绑定方法:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="</p> <div onclick=&quot;fun()&quot;></div> <div onclick=&quot;fun(prams)&quot;></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/onclick" title="浏览关于“onclick”的文章" target="_blank" class="tag_link">onclick</a></span>=<span class="hljs-string">"fun()"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"fun(prams)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>另外可以绑定的事件类型还有很多:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div onload=&quot;fun()&quot;></div> <div onchange=&quot;fun()&quot;></div> <div onmouseover=&quot;fun()&quot;></div> <div onmousedown=&quot;fun()&quot;></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;div onload=<span class="hljs-string">"fun()"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> &lt;div onchange=<span class="hljs-string">"fun()"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> &lt;div <a href="http://www.js-code.com/tag/onmouseover" title="浏览关于“onmouseover”的文章" target="_blank" class="tag_link">onmouseover</a>=<span class="hljs-string">"fun()"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> &lt;div <a href="http://www.js-code.com/tag/onmousedown" title="浏览关于“onmousedown”的文章" target="_blank" class="tag_link">onmousedown</a>=<span class="hljs-string">"fun()"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre> <p>详细的文档可以查看<a href="http://www.w3school.com.cn/jsref/dom_obj_event.asp" rel="nofollow noreferrer" target="_blank">HTML DOM Event 对象</a></p> <ol> <li><strong>DOM 节点操作</strong></li> </ol> <ul> <li><strong>创建新的HTML元素</strong></li> </ul> <p>需要先创建一个新元素节点,然后在使用<code>appendChild</code>方法,向一个已存在的元素上追加这个新元素:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id = &quot;id1&quot;></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span> = <span class="hljs-string">"id1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 创建新元素节点 let a = document.createElement('p'); let b = document.createTextNode('新的文本'); a.appendChild(b); // 获取已存在元素 let div = document.getElementById('id1'); // 追加新元素 div.appendChild(a);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 创建新元素节点</span> <span class="hljs-keyword">let</span> a = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'p'</span>); <span class="hljs-keyword">let</span> b = <span class="hljs-built_in">document</span>.createTextNode(<span class="hljs-string">'新的文本'</span>); a.appendChild(b); <span class="hljs-comment">// 获取已存在元素</span> <span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'id1'</span>); <span class="hljs-comment">// 追加新元素</span> div.appendChild(a);</code></pre> <ul> <li><strong>删除已有的HTML元素</strong></li> </ul> <p>如果需要删除HTML元素,就必须先获得该元素的父元素,再使用<code>removeChild</code>方法删除:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id = &quot;id1&quot;> <p id = &quot;id2&quot;>hello leo</p> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span> = <span class="hljs-string">"id1"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span> = <span class="hljs-string">"id2"</span>&gt;</span>hello leo<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let a = document.getElementById(&quot;id1&quot;); let b = document.getElementById(&quot;id2&quot;); a.removeChild(b);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">let</span> a = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"id1"</span>); <span class="hljs-keyword">let</span> b = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"id2"</span>); a.removeChild(b);</code></pre> <h2 id="articleHeader4">2.2 Window对象</h2> <p>Window 对象表示浏览器中打开的窗口。 <br />Window 对象涉及到的属性和方法非常多,具体可以查看 <a href="http://www.w3school.com.cn/jsref/dom_obj_window.asp" rel="nofollow noreferrer" target="_blank">Window 对象</a> 比较详细。 <br />这里一个简单的例子,实现获取视窗(显示文档的内部窗口)的宽高,并设置给指定的Div元素,并且当我们调整窗口时候,也会及时改变Div的宽高。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let div = document.querySelector('div'); // 获取宽高 let w = window.innerWidth; let h = window.innerHeight; // 设置宽高 div.style.width = w + 'px'; div.style.heitgh = h + 'px'; // 设置及时调整div宽高 window.onresize = function(){ w = window.innerWidth; h = window.innerHeight; div.style.width = w + 'px'; div.style.heitgh = h + 'px'; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'div'</span>); <span class="hljs-comment">// 获取宽高</span> <span class="hljs-keyword">let</span> w = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a></span>.<a href="http://www.js-code.com/tag/innerWidth" title="浏览关于“innerWidth”的文章" target="_blank" class="tag_link">innerWidth</a>; <span class="hljs-keyword">let</span> h = <span class="hljs-built_in">window</span>.<a href="http://www.js-code.com/tag/innerHeight" title="浏览关于“innerHeight”的文章" target="_blank" class="tag_link">innerHeight</a>; <span class="hljs-comment">// 设置宽高</span> div.style.width = w + <span class="hljs-string">'px'</span>; div.style.heitgh = h + <span class="hljs-string">'px'</span>; <span class="hljs-comment">// 设置及时调整div宽高</span> <span class="hljs-built_in">window</span>.onresize = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ w = <span class="hljs-built_in">window</span>.innerWidth; h = <span class="hljs-built_in">window</span>.innerHeight; div.style.width = w + <span class="hljs-string">'px'</span>; div.style.heitgh = h + <span class="hljs-string">'px'</span>; }</code></pre> <h1 id="articleHeader5">3.获取服务器数据API</h1> <p>这一部分主要复习<code>Ajax</code>(全称:Asynchronous JavaScript and XML)。 <br /><code>Ajax</code>主要要解决的问题是:避免重复加载刷新整个页面,因为有时候我们只是小部分数据更新,这时候我们这要刷新这部分的数据,而不是整个页面。 <br /><code>Ajax</code>不是新的编程语言,而是一种使用现有标准的新方法。 </p> <p>下面看一下<strong>Ajax</strong>模型图: <br /><span class="img-wrap"><img data-src="/img/remote/1460000017957072?w=1118&amp;h=470" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Ajax模型" title="Ajax模型" style="cursor: pointer;"></span></p> <p>Ajax模型包括使用Web API作为代理来更智能地请求数据,而不仅仅是让浏览器重新加载整个页面。让我们来思考这个意义: <br />比如:我们逛淘宝,搜索或打开商品页面时,顶部导航来和页眉页脚等,都保持不变。 <br />这样做的好处:</p> <ul> <li>页面更新更快,减少等待刷新,体验更好,响应更快。</li> <li>下载的数据更少,减少带宽的浪费。</li> </ul> <p>另外为了提高加载速度,网站有时候也会将首次请求和数据存储在用户计算机中,下次再请求就直接先使用本地版本,如果内容有更新才会去服务器获取新数据,原理图: <br /><span class="img-wrap"><img data-src="/img/remote/1460000017957073?w=1124&amp;h=766" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="存储和获取新数据" title="存储和获取新数据" style="cursor: pointer;"></span></p> <h2 id="articleHeader6">3.1 Ajax基础使用</h2> <p><code>XMLHttpRequest</code> 是 <code><a href="http://www.js-code.com/tag/ajax" title="AJAX" target="_blank">AJAX</a></code> 的基础。<br />所有现代浏览器均支持 <code>XMLHttpRequest</code> 对象(IE5 和 IE6 使用 <code>ActiveX<a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a></code>)。</p> <p>创建 <code>XMLHttpRequest</code> 对象的语法:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="variable=new XMLHttpRequest(); // IE5 和 IE使用 ActiveX 对象: variable=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a>iable=<span class="hljs-keyword">new</span> XMLHttpRequest(); <span class="hljs-comment">// IE5 和 IE使用 ActiveX 对象:</span> variable=<span class="hljs-keyword">new</span> ActiveX<a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a>(<span class="hljs-string">"Microsoft.XMLHTTP"</span>);</code></pre> <p>为了兼容所有浏览器(包括IE5 IE6),我们就必须检查浏览器是否支持<code>XMLHttpRequest</code>对象,若支持则创建<code>XMLHttpRequest</code>对象,否则创建<code>ActiveXObject</code>对象。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let my_http; if (window.XMLHttpRequest){ // 非 ES5 ES6 my_http=new XMLHttpRequest(); if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){ // 网络请求成功后,执行的操作 } } }else{ // ES5 ES6 my_http=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">let</span> my_http; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (<span class="hljs-built_in">window</span>.XMLHttpRequest){ <span class="hljs-comment">// 非 ES5 ES6</span> my_http=<span class="hljs-keyword">new</span> XMLHttpRequest(); <span class="hljs-keyword">if</span> (xmlhttp.ready<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>==<span class="hljs-number">4</span> &amp;&amp; xmlhttp.<a href="http://www.js-code.com/tag/status" title="浏览关于“status”的文章" target="_blank" class="tag_link">status</a>==<span class="hljs-number">200</span>){ <span class="hljs-comment">// 网络请求成功后,执行的操作</span> } } }<span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span>{ <span class="hljs-comment">// ES5 ES6</span> my_http=<span class="hljs-keyword">new</span> ActiveXObject(<span class="hljs-string">"Microsoft.XMLHTTP"</span>); }</code></pre> <h2 id="articleHeader7">3.2 Ajax发送请求</h2> <p>向服务器发送请求时,我们可以使用 <code>XMLHttpRequest</code> 对象的 <code><a href="http://www.js-code.com/tag/open" title="open" target="_blank">open</a>()</code> 和 <code>send()</code> 方法:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="my_http.open(method,url,async); my_http.send(string);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">my_http.open(method,url,<span class="hljs-keyword">async</span>); my_http.send(string);</code></pre> <p>参数解释: <br /><code><a href="http://www.js-code.com/tag/open" title="open" target="_blank">open</a>(method,url,async)</code>方法接收三个参数:</p> <ul> <li> <code>method</code>:请求的类型;<code>GET</code> 或 <code>POST</code>。</li> <li> <code>url</code>:文件在服务器上的位置。</li> <li> <code>async</code>:<code><a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a></code>(异步)或 <code><a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a></code>(同步)。</li> </ul> <p><code>send(string)</code>方法接收一个参数:</p> <ul> <li> <code>string</code>:仅用于 <code>POST</code> 请求。</li> </ul> <p>例子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// GET my_http.open(&quot;GET&quot;,&quot;http://www.baidu.com&quot;,true); my_http.send(); // POST my_http.open(&quot;POST&quot;,&quot;http://www.baidu.com&quot;,true); my_http.setRequestHeader( &quot;Content-type&quot;, &quot;application/x-www-form-urlencoded&quot; ); // 添加 HTTP 头 my_http.send(&quot;name=leo&quot;);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// GET</span> my_http.open(<span class="hljs-string">"GET"</span>,<span class="hljs-string">"http://www.baidu.com"</span>,<span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>); my_http.send(); <span class="hljs-comment">// POST</span> my_http.open(<span class="hljs-string">"POST"</span>,<span class="hljs-string">"http://www.baidu.com"</span>,<span class="hljs-literal">true</span>); my_http.setRequestHeader( <span class="hljs-string">"Content-type"</span>, <span class="hljs-string">"application/x-www-<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>-urlencoded"</span> ); <span class="hljs-comment">// 添加 HTTP 头</span> my_http.send(<span class="hljs-string">"name=leo"</span>);</code></pre> <p>如果POST请求的话需要设置HTTP头:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="setRequestHeader(header,value)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;">setRequestHeader(header,value)</code></pre> <p>参数解释: <br /><code>setRequestHeader(header,value)</code>方法接收两个参数:</p> <ul> <li> <code>header</code>: 规定头的名称。</li> <li> <code>value</code>: 规定头的值。</li> </ul> <h2 id="articleHeader8">3.3 Ajax服务器响应</h2> <p>接收服务器响应,我们可以使用 <code>XMLHttpRequest</code> 对象的 <code>responseText</code> 或 <code>responseXML</code> 属性。</p> <ul> <li> <code>responseText</code>:获得<code>字符串形式</code>的响应数据。</li> <li> <code>responseXML</code>:获得 <code>XML</code> 形式的响应数据。</li> <li><strong>responseText属性</strong></li> </ul> <p>当服务端的响应不是XML,使用<code>responseText</code>属性。 <br />若是字符串的响应就可以直接使用。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.getElementById(&quot;id1&quot;).inndeHTML = my_http.responseText;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"id1"</span>).inndeHTML = my_http.responseText;</code></pre> <h2 id="articleHeader9">3.4 Ajax ready<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a></h2> <p><code>ready<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a></code>保存着<code>XMLHttpRequest</code>对象的状态。 <br />我们发送Ajax请求的整个过程中,<code>XMLHttpRequest</code>对象的<code>readyState</code>会改变,当<code>readyState</code>改变的时候会触发<code>onreadystatechange</code>事件。 </p> <p><code>XMLHttpRequest</code>对象的三个重要属性:</p> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>onreadystatechange</td> <td>存储函数(或函数名),每当 <code>readyState</code> 属性改变时,就会调用该函数。</td> </tr> <tr> <td>readyState</td> <td>存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0(请求未初始化),1(服务器连接已建立),2(请求已接收),3(请求处理中),4(请求已完成,且响应已就绪)</td> </tr> <tr> <td><a href="http://www.js-code.com/tag/status" title="status" target="_blank">status</a></td> <td>200("OK"),404(未找到页面)</td> </tr> </tbody> </table> <p>通常我们会在<code>readyState</code>等于4且<code><a href="http://www.js-code.com/tag/status" title="status" target="_blank">status</a></code>等于200时候表示响应已就绪,可以执行业务操作:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){ // 网络请求成功后,执行的操作 }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">if</span> (xmlhttp.readyState==<span class="hljs-number">4</span> &amp;&amp; xmlhttp.status==<span class="hljs-number">200</span>){ <span class="hljs-comment">// 网络请求成功后,执行的操作</span> }</code></pre> <h1 id="articleHeader10">4.图形绘制API</h1> <p>这里主要介绍的是HTML5新增的<code>canvas</code>元素,JavaScript为<code>canvas</code>添加了很多API,进一步增强<code>canvas</code>。 <br /><code>canvas</code> 元素可以通过JavaScript脚本,在网页上绘制图形。 <br />比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容,这些内容将会在在旧的、不支持<code>canvas</code>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。 </p> <p>详细完整的课程推荐:</p> <ol> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial" rel="nofollow noreferrer" target="_blank">MDN Canvas教程</a></li> <li><a href="http://www.w3school.com.cn/html5/html_5_canvas.asp" rel="nofollow noreferrer" target="_blank">W3C HTML5 Canvas</a></li> </ol> <p>下面复习一下<code>canvas</code>的一个使用流程:</p> <h2 id="articleHeader11">4.1 简单绘制</h2> <ol> <li><strong>创建画布,规定元素id、宽度和高度</strong></li> </ol> <p>要在网页中创建 2D 或者 3D 场景,必须在 HTML 文件中插入一个<code>canvas</code>元素,以界定网页中的绘图区域。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<canvas id=&quot;id1&quot; width=&quot;200&quot; height=&quot;100&quot;><br /> 卧槽你的浏览器竟然不支持 canvas!<br /> </canvas>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"id1"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"100"</span>&gt;</span> 卧槽你的浏览器竟然不支持 canvas! <span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span></code></pre> <p>在<code>canvas</code>标签内,写一些浏览器不支持画布功能时候的提示内容。 <br />画布默认尺寸为 300 × 150 像素。</p> <ol> <li><strong>获取画布上下文,并完成设置</strong></li> </ol> <p>我们需要获得一个对绘画区域的特殊的引用(称为“<strong>上下文</strong>”)用来在画布上绘图。可通过 <code>HTMLCanvasElement.getContext()</code> 方法获得基础的绘画功能,需要提供一个字符串参数来表示所需上下文的类型。 <br />下面创建一个2d画布:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let ctx = canvas.getContext(&quot;2d&quot;);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">let</span> ctx = canvas.getContext(<span class="hljs-string">"2d"</span>);</code></pre> <p><code>ctx</code> 变量包含一个 <code>CanvasRenderingContext2D 对象</code>,画布上所有绘画操作都会涉及到这个对象。 <br />下面将画布背景涂黑:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fillRect(0, 0, 200, 100);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">ctx.fillStyle = <span class="hljs-string">'rgb(0, 0, 0)'</span>; ctx.fillRect(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">200</span>, <span class="hljs-number">100</span>);</code></pre> <h2 id="articleHeader12">4.2 绘制基础</h2> <p>首先需要知道一些2D画布的知识,画布左上角的坐标是(0, 0),横坐标(x)轴向右延伸,纵坐标(y)轴向下延伸。 <br /><span class="img-wrap"><img data-src="/img/remote/1460000006922114?w=220&amp;h=220" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="2D画布" title="2D画布" style="cursor: pointer;"></span></p> <ol> <li>绘制实线</li> </ol> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ctx.lineTo(100,50); // 绘制目标坐标 ctx.lineWidth = 5; // 线条宽度 ctx.stroke(); // 绘制实线" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">ctx.lineTo(<span class="hljs-number">100</span>,<span class="hljs-number">50</span>); <span class="hljs-comment">// 绘制目标坐标</span> ctx.lineWidth = <span class="hljs-number">5</span>; <span class="hljs-comment">// 线条宽度</span> ctx.stroke(); <span class="hljs-comment">// 绘制实线</span></code></pre> <ol> <li>绘制矩形</li> </ol> <p><code>fillRect(x, y, width, height)</code> 绘制一个填充的矩形 <br /><code>strokeRect(x, y, width, height)</code> 绘制一个矩形的边框 <br /><code>clearRect(x, y, width, height)</code> 清除指定矩形区域,让清除部分完全透明。 <br />x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。 <br />width和height设置矩形的尺寸。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 实心矩形 ctx.fillStyle = 'rgb(255, 0, 0)'; // 矩形颜色 ctx.fillRect(50, 50, 100, 150); // 矩形起止坐标 // 空心矩形 ctx.strokeStyle = 'rgb(255, 255, 255)';// 矩形边框颜色 ctx.strokeRect(25, 25, 175, 200);// 矩形起止坐标" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 实心矩形</span> ctx.fillStyle = <span class="hljs-string">'rgb(255, 0, 0)'</span>; <span class="hljs-comment">// 矩形颜色</span> ctx.fillRect(<span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">100</span>, <span class="hljs-number">150</span>); <span class="hljs-comment">// 矩形起止坐标</span> <span class="hljs-comment">// 空心矩形</span> ctx.strokeStyle = <span class="hljs-string">'rgb(255, 255, 255)'</span>;<span class="hljs-comment">// 矩形边框颜色</span> ctx.strokeRect(<span class="hljs-number">25</span>, <span class="hljs-number">25</span>, <span class="hljs-number">175</span>, <span class="hljs-number">200</span>);<span class="hljs-comment">// 矩形起止坐标</span></code></pre> <ol> <li>绘制路径</li> </ol> <p>可以通过路径来实现复杂的图形,下面整理了一些常用到的方法:</p> <ul> <li> <code>beginPath()</code>:在画笔当前所在位置开始绘制一条路径。在新的画布中,画笔起始位置为 (0, 0)。</li> <li> <code>moveTo()</code>:将画笔移动至另一个坐标点,不记录、不留痕迹,只将画笔“跳”至新位置。</li> <li> <code>fill()</code>:通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。</li> <li> <code>stroke()</code>:通过为当前绘制路径的区域描边,来绘制一个只有边框的形状。</li> <li>路径也可和矩形一样使用 <code>lineWidth</code> 和 <code>fillStyle</code> / <code>strokeStyle</code> 等功能。</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ctx.fillStyle = 'rgb(255, 0, 0)'; // 设置填充颜色 ctx.beginPath(); // 开始 ctx.moveTo(50, 50); // 移动到结束点的坐标 // .. 可以在到处移动 ctx.fill(); // 绘制" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">ctx.fillStyle = <span class="hljs-string">'rgb(255, 0, 0)'</span>; <span class="hljs-comment">// 设置填充颜色</span> ctx.beginPath(); <span class="hljs-comment">// 开始</span> ctx.moveTo(<span class="hljs-number">50</span>, <span class="hljs-number">50</span>); <span class="hljs-comment">// 移动到结束点的坐标</span> <span class="hljs-comment">// .. 可以在到处移动</span> ctx.fill(); <span class="hljs-comment">// 绘制</span></code></pre> <ol> <li>绘制圆形</li> </ol> <p><code>arc(x, y, radius, startAngle, endAngle, anticlockwise)</code><br />画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,按照anticlockwise给定的方向(默认为顺时针)来生成。 <br /><code>arcTo(x1, y1, x2, y2, radius)</code><br />根据给定的控制点和半径画一段圆弧,再以直线连接两个控制点。 </p> <p><code>arc</code>方法,该方法有六个参数:</p> <ul> <li> <code>x,y</code>为绘制圆弧所在圆上的圆心坐标。</li> <li> <code>radius</code>为半径。</li> <li> <code>startAngle</code>以及<code>endAngle</code>参数用弧度定义了开始以及结束的弧度。</li> <li> <code>anticlockwise</code>是布尔值,为<a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a>时,是逆时针方向,否则顺时针方向。</li> </ul> <p>这些都是以x轴为基准。 </p> <p><strong>注意</strong>:arc()函数中表示角的单位是弧度,不是角度。角度与弧度的js表达式: <br />弧度=(<a href="http://www.js-code.com/tag/Math" title="Math" target="_blank">Math</a>.PI/180)*角度。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cxt.fillStyle=&quot;#FF0000&quot;; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill();" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">cxt.fillStyle=<span class="hljs-string">"#FF0000"</span>; cxt.beginPath(); cxt.arc(<span class="hljs-number">70</span>,<span class="hljs-number">18</span>,<span class="hljs-number">15</span>,<span class="hljs-number">0</span>,<span class="hljs-built_in"><a href="http://www.js-code.com/tag/Math" title="浏览关于“Math”的文章" target="_blank" class="tag_link">Math</a></span>.PI*<span class="hljs-number">2</span>,<span class="hljs-literal">true</span>); cxt.<a href="http://www.js-code.com/tag/close" title="浏览关于“close”的文章" target="_blank" class="tag_link">close</a>Path(); cxt.fill();</code></pre> <ol> <li>绘制文本</li> </ol> <p><code>fillText(text, x, y [, maxWidth])</code><br />在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. <br /><code>strokeText(text, x, y [, maxWidth])</code><br />在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ctx.strokeStyle = 'white'; ctx.lineWidth = 1; ctx.font = '36px arial'; ctx.strokeText('hello leo !', 50, 50); ctx.fillStyle = 'red'; ctx.font = '48px georgia'; ctx.fillText('hello leo !', 50, 150);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">ctx.strokeStyle = <span class="hljs-string">'white'</span>; ctx.lineWidth = <span class="hljs-number">1</span>; ctx.font = <span class="hljs-string">'36px arial'</span>; ctx.strokeText(<span class="hljs-string">'hello leo !'</span>, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>); ctx.fillStyle = <span class="hljs-string">'red'</span>; ctx.font = <span class="hljs-string">'48px georgia'</span>; ctx.fillText(<span class="hljs-string">'hello leo !'</span>, <span class="hljs-number">50</span>, <span class="hljs-number">150</span>);</code></pre> <p>另外还有一些有样式的文本,可以使用这些属性:</p> <ul> <li><code>font = value</code></li> </ul> <p>当前绘制的文本字体.默认是 10px sans-ser<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>。</p> <ul> <li><code>textAlign = value</code></li> </ul> <p>文本对齐选项. 可选的值包括:<code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>. 默认值是 start。</p> <ul> <li><code>textBaseline = value</code></li> </ul> <p>基线对齐选项. 可选的值包括:<code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>。默认值是 <code>alphabetic</code>。</p> <ul> <li><code>direction = value</code></li> </ul> <p>文本方向。可能的值包括:<code>ltr</code>, <code>rtl</code>, <code>inherit</code>。默认值是 <code>inherit</code>。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ctx.font = &quot;48px serif&quot;; ctx.textBaseline = &quot;hanging&quot;; ctx.strokeText(&quot;Hello leo &quot;, 0, 100);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">ctx.font = <span class="hljs-string">"48px serif"</span>; ctx.textBaseline = <span class="hljs-string">"hanging"</span>; ctx.strokeText(<span class="hljs-string">"Hello leo "</span>, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>);</code></pre> <ol> <li>绘制图片</li> </ol> <ul> <li><code>drawImage(<a href="http://www.js-code.com/tag/image" title="image" target="_blank">image</a>, x, y)</code></li> </ul> <p>其中 <code><a href="http://www.js-code.com/tag/image" title="image" target="_blank">image</a></code> 是 <code><a href="http://www.js-code.com/tag/image" title="浏览关于“image”的文章" target="_blank" class="tag_link">image</a></code> 或者 <code>canvas</code> 对象,<code>x</code> 和 <code>y</code> 是其在目标 <code>canvas</code> 里的起始坐标。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let img = new Image(); img.src = &quot;leo.png&quot;; img.onload = function(){ ctx.drawImage(img, 50, 50); };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">let</span> img = <span class="hljs-keyword">new</span> Image(); img.src = <span class="hljs-string">"leo.png"</span>; img.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ ctx.drawImage(img, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>); };</code></pre> <p><code>drawImage</code>方法还有更多参数:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;">ctx.drawImage(image, <span class="hljs-number">20</span>, <span class="hljs-number">20</span>, <span class="hljs-number">185</span>, <span class="hljs-number">175</span>, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">185</span>, <span class="hljs-number">175</span>);</code></pre> <ul> <li>第一个参数不变,为图片引用。</li> <li>参数 2、3 表示裁切部分左上顶点的坐标,参考原点为原图片本身左上角的坐标。原图片在该坐标左、上的部分均不会绘制出来。</li> <li>参数 4、5 表示裁切部分的长、宽。</li> <li>参数 6、7 表示裁切部分左上顶点在画布中的位置坐标,参考原点为画布左上顶点。</li> <li>参数 8、9 表示裁切部分在画布中绘制的长、宽。本例中绘制时与裁切时面积相同,你也可以定制绘制的尺寸。</li> </ul> <p>详细完整的课程推荐:</p> <ol> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial" rel="nofollow noreferrer" target="_blank">MDN Canvas教程</a></li> <li><a href="http://www.w3school.com.cn/html5/html_5_canvas.asp" rel="nofollow noreferrer" target="_blank">W3C HTML5 Canvas</a></li> </ol> <h1 id="articleHeader13">5.视频音频API</h1> <p>HTML5提供了用于文档中嵌入富媒体的元素<code>&lt;video&gt;</code>和<code>&lt;audio&gt;</code>标签,通过元素自带的API来控制视频和音频的播放搜索等。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<video><source src=&quot;1.mp4&quot; type=&quot;video/mp4&quot;><source src=&quot;2.webm&quot; type=&quot;video/webm&quot;><a href=&quot;3.mp4&quot;>打开mp4</a></video>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">video</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.mp4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"video/mp4"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"2.webm"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"video/webm"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"3.mp4"</span>&gt;</span>打开mp4<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span></code></pre> <h2 id="articleHeader14">5.1 视频</h2> <p>当前,video 元素支持三种视频格式:<code>Ogg</code>/<code>MPEG4</code>和<code>WebM</code>。 <br />简单使用:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<video src=&quot;1.ogg&quot; controls=&quot;controls&quot;></video><br /> <video src=&quot;1.ogg&quot; controls=&quot;controls&quot; width=&quot;320&quot; height=&quot;240&quot;></video>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.ogg"</span> <span class="hljs-attr">controls</span>=<span class="hljs-string">"controls"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.ogg"</span> <span class="hljs-attr">controls</span>=<span class="hljs-string">"controls"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"320"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"240"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span></code></pre> <p>连接不同视频:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<video width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;><source src=&quot;1.ogg&quot; type=&quot;video/ogg&quot;><source src=&quot;2.mp4&quot; type=&quot;video/mp4&quot;>您的浏览器不支持!</video>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"320"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"240"</span> <span class="hljs-attr">controls</span>=<span class="hljs-string">"controls"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.ogg"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"video/ogg"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"2.mp4"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"video/mp4"</span>&gt;</span> 您的浏览器不支持! <span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span></code></pre> <p><code>&lt;video&gt; 与 &lt;/video&gt;</code> 之间插入的内容是供不支持 <code>video</code> 元素的浏览器显示的。 <br /><code>&lt;video&gt;</code> 标签的属性:</p> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>autoplay</code></td> <td>视频在就绪后马上播放</td> </tr> <tr> <td><code>controls</code></td> <td>向用户显示控件,比如播放按钮</td> </tr> <tr> <td><code>height</code></td> <td>设置视频播放器的高度</td> </tr> <tr> <td><code>width</code></td> <td>设置视频播放器的宽度</td> </tr> <tr> <td><code>src</code></td> <td>要播放的视频的 URL</td> </tr> <tr> <td><code>preload</code></td> <td>视频在页面加载时进行加载,并预备播放,如果使用 "autoplay",则忽略该属性</td> </tr> <tr> <td><code>loop</code></td> <td>当媒介文件完成播放后再次开始播放</td> </tr> </tbody> </table> <p>另外我们可以为视频创建简单的播放/暂停和调整尺寸的控件,这里需要使用<code>play()</code>和 <code>pause()</code> 还有两个属性:<code>paused</code> 和 <code>width</code>。 <br />更多方法可以查看 <a href="http://www.w3school.com.cn/html5/html_5_video_dom.asp" rel="nofollow noreferrer" target="_blank">HTML5 video - 方法、属性以及事件</a></p> <h2 id="articleHeader15">5.2 音频</h2> <p><code>audio</code> 元素能够播放声音文件或者音频流。 <br />当前,<code>audio</code> 元素支持三种视频格式:<code>Ogg Vorbis</code>/<code>MP3</code>和<code>Wav</code>。 <br />简单使用:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<audio src=&quot;1.ogg&quot; controls=&quot;controls&quot;></audio>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">audio</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.ogg"</span> <span class="hljs-attr">controls</span>=<span class="hljs-string">"controls"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">audio</span>&gt;</span></code></pre> <p><code>control</code> 属性供添加播放、暂停和音量控件。 <br /><code>&lt;audio&gt; 与 &lt;/audio&gt;</code> 之间插入的内容是供不支持 <code>audio</code> 元素的浏览器显示的。 <br />连接不同音频:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<audio controls=&quot;controls&quot;><source src=&quot;1.ogg&quot; type=&quot;audio/ogg&quot;><source src=&quot;2.mp3&quot; type=&quot;audio/mpeg&quot;>您的浏览器不支持!</audio>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;audio controls=<span class="hljs-string">"controls"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.ogg"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"audio/ogg"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"2.mp3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"audio/mpeg"</span>&gt;</span> 您的浏览器不支持! <span class="hljs-tag">&lt;/<span class="hljs-name">audio</span>&gt;</span></span></code></pre> <p><code>&lt;audio&gt;</code> 标签的属性:</p> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>autoplay</code></td> <td>视频在就绪后马上播放</td> </tr> <tr> <td><code>controls</code></td> <td>向用户显示控件,比如播放按钮</td> </tr> <tr> <td><code>src</code></td> <td>要播放的视频的 URL</td> </tr> <tr> <td><code>preload</code></td> <td>视频在页面加载时进行加载,并预备播放,如果使用 "autoplay",则忽略该属性</td> </tr> <tr> <td><code>loop</code></td> <td>当媒介文件完成播放后再次开始播放</td> </tr> </tbody> </table> <h1 id="articleHeader16">6.客户端存储API</h1> <p>现代web浏览器会提供一些在客户端存储用户数据的方法,只要用户允许,可以随时取出使用。 <br />使用客户端存储API可以存储的数据量是优先的,具体取决于浏览器或者用户设置 。 <br />存储的方式可以这样分类:</p> <ol> <li><strong>传统方法:cookies</strong></li> </ol> <p>cookie使用比较久了,过时,存在各种安全问题,而且无法存储复杂数据,可能唯一的优势就是对非常老旧浏览器支持,如果业务需要,也可以使用cookie</p> <ol> <li><strong>新流派:Web Storage 和 IndexedDB</strong></li> </ol> <p>现代浏览器所提供的更加简单有效的客户端储存API。</p> <ol> <li><strong>未来:Cache API</strong></li> </ol> <p>一些现代浏览器支持新的 <code>Cache</code> API。这个API是为存储特定HTTP请求的响应文件而设计的,它对于像存储离线网站文件这样的事情非常有用,这样网站就可以在没有网络连接的情况下使用。缓存通常与 <code>Service Worker</code> API 组合使用,尽管不一定非要这么做。</p> <h2 id="articleHeader17">6.1 WebStorage</h2> <p><code>web storage</code>API只需存储简单的 <strong>键/值</strong>对的数据(限制为字符串、数字等类型),并在需要的时候检索其值。 <br /><code>web storage</code>API提供了两种在客户端存储数据的新方法:</p> <ul> <li> <code>localStorage</code> : 一直保存数据,甚至到浏览器关闭又开启后也是这样</li> <li> <code>sessionStorage</code> : 只要浏览器开着,数据就会一直保存 (关闭浏览器时数据会丢失)</li> </ul> <p><strong>localStorage</strong>方法:</p> <ul> <li> <code>localStorage.setItem(key, value)</code>:存储一个数据。</li> <li> <code>localStorage.getItem(key)</code>:读取一个数据。</li> <li> <code>localStorage.removeItem(key)</code>:删除一个数据。</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="localStorage.setItem('name','leo'); let leo = localStorage.getItem('name'); leo ; // &quot;leo&quot; localStorage.removeItem('name');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">localStorage.setItem(<span class="hljs-string">'name'</span>,<span class="hljs-string">'leo'</span>); <span class="hljs-keyword">let</span> leo = localStorage.getItem(<span class="hljs-string">'name'</span>); leo ; <span class="hljs-comment">// "leo"</span> localStorage.removeItem(<span class="hljs-string">'name'</span>);</code></pre> <p>关闭浏览器以后数据还在。 </p> <p><strong>sessionStorage</strong>方法:</p> <ul> <li> <code>sessionStorage.setItem(key, value)</code>:存储一个数据。</li> <li> <code>sessionStorage.getItem(key)</code>:读取一个数据。</li> <li> <code>sessionStorage.removeItem(key)</code>:删除一个数据。</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="sessionStorage.setItem('name','leo'); let leo = sessionStorage.getItem('name'); leo ; // &quot;leo&quot; sessionStorage.removeItem('name');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">sessionStorage.setItem(<span class="hljs-string">'name'</span>,<span class="hljs-string">'leo'</span>); <span class="hljs-keyword">let</span> leo = sessionStorage.getItem(<span class="hljs-string">'name'</span>); leo ; <span class="hljs-comment">// "leo"</span> sessionStorage.removeItem(<span class="hljs-string">'name'</span>);</code></pre> <p>关闭浏览器以后数据不在。</p> <h1 id="articleHeader18">7.第三方API</h1> <p>并不是所有的API都是内置在浏览器中,有一些可能是其他网站(如谷歌,Facebook等)提供的API,让开发者调用,从而使用他们的服务和数据等。 </p> <p>API通过使用一个或多个JavaScript对象与我们的代码交互,这些对象作为API使用的数据(包含在对象属性中)的容器,和API提供的功能(包含在对象的方法中)。 <br />例如我们调用谷歌地图的Google <a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>s APIs ,需要先引入他们开放的JavaScript库。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot; src=&quot;https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;">&lt;script type=<span class="hljs-string">"text/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span> src=<span class="hljs-string">"https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <p>然后就可以这么使用:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="navigator.geolocation.getCurrentPosition(function(options){ // ... do something });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">navigator.geolocation.getCurrentPosition(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">options</span>)</span>{ <span class="hljs-comment">// ... do something</span> });</code></pre> <p>如<code>Geolocation API</code>则是由以下几个对象组成:</p> <ul> <li> <code>Geolocation</code>, 包含三种控制地理数据检索的方法。</li> <li> <code>Position</code>, 表示在给定的时间的相关设备的位置。它包含一个当前位置的<code>Coordinates</code> 对象。还包含了一个时间戳,这个时间戳表示获取到位置的时间。</li> <li> <code>Coordinates</code>,包含有关设备位置的大量有用数据,包括经纬度,高度,运动速度和运动方向等。</li> </ul> <h1 id="articleHeader19">参考文章:</h1> <ol> <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs" rel="nofollow noreferrer" target="_blank">MDN JavaScript指南</a></li> <li><a href="http://www.w3school.com.cn/" rel="nofollow noreferrer" target="_blank">W3school JavaScript</a></li> </ol> <p><strong>本部分内容到这结束</strong></p> <table> <thead> <tr> <th>Author</th> <th>王平安</th> </tr> </thead> <tbody> <tr> <td>E-mail</td> <td>pingan8787@qq.com</td> </tr> <tr> <td>博 客</td> <td>www.pingan8787.com</td> </tr> <tr> <td>微 信</td> <td>pingan8787</td> </tr> <tr> <td>每日文章推荐</td> <td><a href="https://github.com/pingan8787/Leo_Reading/issues" rel="nofollow noreferrer" target="_blank">https://github.com/pingan8787...</a></td> </tr> <tr> <td>JS小册</td> <td>js.pingan8787.com</td> </tr> </tbody> </table> <p>欢迎关注微信公众号【前端自习课】每天早晨,与您一起学习一篇优秀的前端技术博文 .</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

【重温基础】17.WebAPI介绍

全部内容,希望文章能够帮你解决

【重温基础】17.WebAPI介绍

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过