前端web之JavaScript基础(3)

JavaScript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等。主要用于交互式更新页面。

用途

客户端JavaScript 语言的核心包含一些普遍的编程特性，可用于以下场景：

• 通过 DOM API动态修改 HTML 和 CSS 来更新用户界面。
• 在变量中储存有用的值。比如从浏览器接受数据，然后将其储存到变量中再做额外的业务逻辑处理
• 运行代码以响应网页中发生的特定事件。 例如，用一个 click 事件来检测按钮什么时候被点击，然后运行相应的代码来更新页面信息。
• JavaScript有丰富的API可以用来提供额外的复杂功能。

浏览器API

API 通常分为两类：浏览器 API和三方API。
第三方 API，需要额外下载安装。
浏览器API，内建在浏览器中，我们可以直接使用。
常用内建API如下：

• 文档对象模型 API（DOM（Document Object Model）API） 能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。
• 地理位置 API（Geolocation API） 获取地理信息。
• 画布（Canvas） 和 WebGL API 可以创建生动的 2D 和 3D 图像。
• 影音类 API ，如HTMLMediaElement 和 WebRTC 等可以让我们利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示。

使用方式

在 HTML 中，JavaScript 代码必须位于 标签之间，可以放置于页面内的 或 部分中，也可以放置在外部文件中，还可以通过完整的 URL 或相对于当前网页的路径引用外部脚本。

使用规则

• 如果放置在HTML中：一般把脚本置于 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
• 在外部文件中放置脚本：分离了 HTML 和代码，易于复用和维护，已缓存的 JavaScript 文件可加速页面加载

用法示例

• 直接放置在HTML中

    
        
    
    
        

            demo页面
        
        
"demo">一个段落
        "button" οnclick="myfunc()">点击button
    

• 放在外置js文件中
  脚本放置在./scripts/demo.js文件中

function myfunc()
{
    document.getElementById("demo").innerHTML="段落修改"
}

之后在demo.html文件中引用脚本文件

    
        

            demo页面
        
        
"demo">一个段落
        "button" οnclick="myfunc()">点击button
        
    

• 远程URL引用
  可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
  使用完整的 URL 来链接至脚本示例：

调用策略

在 HTML 和 CSS 集合组装成一个网页后，浏览器的 JavaScript 引擎将执行 JavaScript 代码。这保证了当 JavaScript 开始运行之前，网页的结构和样式已经就位。
JavaScript 最普遍的用处是通过 DOM API（见上文）动态修改 HTML 和 CSS 来更新用户界面 （user interface）。如果 JavaScript 在 HTML 和 CSS 就位之前加载运行，就会引发错误。

• 如果JavaScript 调用于文档头处，解析 HTML 文档体之前。这样做是有隐患的，需要使用一些结构来避免错误发生。
  需要定义一个事件监听器，它监听浏览器的 “DOMContentLoaded” 事件，即 HTML 文档体加载、解释完毕事件。事件触发时将调用 JavaScript代码，从而避免了错误发生。

    
        

            
        
        
"demo">一个段落
        "button">点击button
    

• async 属性也可以解决调用顺序问题，如果使用了async则无需使用 DOMContentLoaded 事件。但是 async 只能用于外部脚本，因此不适用于“HTML内部脚本”。

    
        

            demo页面
        
        
"demo">一个段落
        "button" οnclick="myfunc()">点击button
        
    

async 和 defer
上述的脚本阻塞问题实际有两种解决方案 —— async 和 defer。

• async
  浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，async 是最理想的选择。
• defer
  添加defer 属性的脚本将按照在页面中出现的顺序加载。
  如果脚本无需等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

示例：
页面要加载以下三个脚本，且三个脚本相互独立时用async

三者的调用顺序是不确定的。jquery.js 可能在 script2 和 script3 之前或之后调用，如果这样，后两个脚本中依赖 jquery 的函数将产生错误，因为脚本运行时 jquery 尚未加载。
如果第二个脚本执行依赖jquery.js，则需要使用defer定义执行顺序

参考文献：
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript