JavaScript高级程序设计 | Ch1-Ch3读书笔记

最新推荐文章于 2024-07-06 16:47:02 发布

风筝风

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量96

点赞数

分类专栏： JavaScript笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_42376600/article/details/127202286

版权

来自《JavaScript高级程序设计（第4版）》

Ch1-Ch3

1 什么是JavaScript

1.1 简短的历史回顾

1.2 JavaScript实现

JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。

ECMAScript：由 ECMA-262 定义并提供核心功能
文档对象模型（DOM）：提供与网页内容交互的方法和接口
浏览器对象模型（BOM）：提供与浏览器交互的方法和接口

1.2.1 ECMAScript

ECMAScript，即 ECMA-262 定义的语言，并不局限于 Web 浏览器。ECMA-262 将这门语言作为一个基准来定义，以便在它之上再构建更稳健的脚本语言。Web 浏览器只是 ECMAScript 实现可能存在的一种宿主环境（host environment）。

1.2.1 DOM

文档对象模型（Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的XML。
DOM将整个页面抽象为一组分层节点。HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。
DOM通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。使用DOM API，可以轻松地删除、添加、替换、修改节点。

1.2.2 BOM

浏览器对象模型（Browser Object Model）主要针对浏览器窗口和子窗口（frame），不过人们通常会把任何特定于浏览器的扩展都归在BOM的范畴内。

1.3 JavaScript新版本

2 HTML中的JavaScript

2.1 script元素

<script src="http://www.somewhere.com/afile.js"></script>

浏览器在解析这个资源时，会向src属性指定的路径发送一个get请求，以取得相应资源。
来自外部域的代码会被当作加载它的页面的一部分来加载和解释，这样可以让我们通过不同域分发JavaScript。

2.1.1 标签位置

现代 Web 应用程序通常将所有 JavaScript 引用放在body元素中的页面内容后面。
如果把所有 JavaScript文件都放在head里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到body的起始标签时开始渲染），容易导致页面渲染明显延迟，在此期间浏览器窗口完全空白。

2.1.2 推迟执行脚本

在script元素上设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。

defer只适用于外部脚本。
HTML5 规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在 DOMContentLoaded 事件之前执行

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Example HTML Page</title> 
  <script defer src="example1.js"></script> 
  <script defer src="example2.js"></script> 
  </head> 
  <body> 
  <!-- 这里是页面内容 --> 
  </body> 
</html>

虽然这个例子中的script元素包含在页面的head中，但它们会在浏览器解析到结束的html标签后才会执行。

2.1.3 异步执行脚本

async和defer的异同：

同：
->都只适用于外部脚本
->都会告诉浏览器立即开始下载
异：
->标记为 async 的脚本并不保证能按照它们出现的次序执行。例子中，第二个脚本可能先于第一个脚本执行。

<html> 
  <head> 
  <title>Example HTML Page</title> 
  <script async src="example1.js"></script> 
  <script async src="example2.js"></script> 
  </head> 
  <body>