JS基础-2_mdn菜鸟-优快云博客

本文围绕JavaScript展开，介绍了脚本调用策略，如使用async和defer解决加载顺序问题；阐述了事件监听器和处理器，解释了事件冒泡和捕捉；还介绍了数组split()方法、lable标签。此外，详细说明了JavaScript、API和其他工具的关系，列举了常见浏览器和第三方API，以及异步操作和API的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新的一周，新的学习

1.脚本调用策略

要让脚本调用的时机符合预期，需要解决一系列的问题。这里看似简单，实际大有文章。最常见的问题就是：HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用文档对象模型 DOM），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。

脚本调用策略小结：

如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

2.事件

侦听事件发生的结构称为事件监听器（Event Listener）
响应事件触发而运行的代码块被称为事件处理器（Event Handler）。

3.数组中的split();方法

split() 方法使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。

let str = 'The quick brown fox jumps over the lazy dog.';

let words = str.split(' ');
console.log(words[3]);
// expected output: "fox"

let chars = str.split('');
console.log(chars[8]);
// expected output: "k"

let strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

4.lable标签

标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label
元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

5.对事件冒泡和捕捉的解释

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Show video box example</title>
    <style>
      div {
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 480px;
        height: 380px;
        border-radius: 10px;
        background-color: #eee;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
      }
      .hidden {
        left: -50%;
      }
      .showing {
        left: 50%;
      }
      div video {
        display: block;
        width: 400px;
        margin: 40px auto;
      }
    </style>
  </head>
  <body>
    <button>Display video</button>

    <div class="hidden">
      <video>
        <source src="rabbit320.mp4" type="video/mp4">
        <source src="rabbit320.webm" type="video/webm">
        <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> 
      </video>
    </div>

    <script>
      let btn = document.querySelector('button');
      let  videoBox = document.querySelector('div');
      let  video = document.querySelector('video');
      btn.onclick = function() {
        videoBox.setAttribute('class','showing');
      }
      videoBox.onclick = function() {
        videoBox.setAttribute('class','hidden');
      };
      video.onclick = function() {
        video.play();
      };
      
    </script>
  </body>
</html>

当一个事件发生在具有父元素的元素上(例如，在我们的例子中是元素)时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段：

浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反:

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此，在我们当前的示例中，当您单击视频时，这个单击事件从元素向外冒泡直到元素。沿着这个事件冒泡线路：
它发现了video.onclick…事件处理器并且运行它，因此这个视频第一次开始播放。
接着它发现了（往外冒泡找到的） videoBox.onclick…事件处理器并且运行它，因此这个视频也隐藏起来了。
用stopPropagation()修复问题
这是令人讨厌的行为，但有一种方法来解决它！标准事件对象具有可用的名为 stopPropagation()的函数, 当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行(不会向上冒泡)。所以，我们可以通过改变前面代码块中的第二个处理函数来解决当前的问题:

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

6.JavaScript，API和其他JavaScript工具之间的关系

JavaScript：一种内置于浏览器的高级脚本语言，可以用来实现Web页面/应用中的功能。
客户端API：置于浏览器的结构程序，位于JavaScript语言的顶部，使你可以更容易地实现功能。
第三方API：置于第三方地结构程序（例如Twitter,Facebook），使你可以在自己地Web页面中使用那些平台地某些功能，例如在你的Web页面显示最新地推送。
JavaScript库：通常是包含具有特定功能地一个或多个JavaScript文件，把这些文件关联到你地Web页以快速获取或授权编写常见地功能。例如包含jQuery和Mootools
JavaScript框架：从库开始的下一步，JavaScript框架框架视图把HTML、CSS、JavaScript和其它安装的技术打包在一起，然后用来从头编写一个完整地Web应用。

7.常见浏览器API

操作文档API 内置于浏览器中。最明显的例子是DOM（文档对象模型）API，允许你操作HTML和CSS，动态地将新样式应用到你的页面。
从服务器获取数据的API 用于更新网页的一小部分是相当好用的，不用重新加载整个页面。。使这成为可能的API包括XMLHttpRequest和Fetch API。你也可能会遇到描述这种技术的术语Ajax。
用于操作和绘制图形的API 目前已被浏览器广泛支持，最流行的是允许您以编程方式更新包含在HTML 元素中的像素数据以创建2D和3D场景的Canvas和WebGL。这些API经常用于创建动画循环的API（例如window.requestAnimationFrame()）和其他API一起不断更新诸如动画和游戏之类的场景。
音频和视频API 例如HTMLMediaElement，Web Audio API和WebRTC允许您使用多媒体来做一些非常有趣的事情，比如创建用于播放音频和视频的自定义UI控件，显示字幕字幕和您的视频，从网络摄像机抓取视频，通过画布操纵（见上），或在网络会议中显示在别人的电脑上，或者添加效果到音轨（如增益，失真，平移等）。
设备API 基本上是以对网络应用程序有用的方式操作和检索现代设备硬件中的数据的API。
客户端API 在Web浏览器中的使用变得越来越普遍，如果你想创建一个应用程序来保存页面加载之间的状态，升值让设备在处于脱机状态时可用，那么在客户端存储数据将会是非常有用的。例如使用Web Storage API的简单的键 - 值存储以及使用IndexedDB API的更复杂的表格数据存储。

8.常见第三方API

The Twitter API, 允许您在您的网站上展示您最近的推文等
The Google Maps API 允许你在网页上对地图进行很多操作（这很有趣，它也是Google地图的驱动器）。
The Facebook suite of API 允许你将很多Facebook生态系统中的功能应用到你的app，使之受益，比如说它提供了通过Facebook账户登录、接受应用内支付、推送有针对性的广告活动等功能。
The YouTube API, 允许你将Youtube上的视频嵌入到网站中去，同时提供搜索Youtube，创建播放列表等众多功能。
The Twilio API, 其为您的app提供了针对语音通话和视频聊天的框架，以及从您的app发送短信息或多媒体信息等诸多功能。