JavaScript高级程序设计（第四版）学习笔记一

最新推荐文章于 2025-03-03 00:00:00 发布

leslie_9527

最新推荐文章于 2025-03-03 00:00:00 发布

阅读量996

点赞数 2

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/index_zhao/article/details/109578861

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍JavaScript的基础概念，包括ECMAScript标准、文档对象模型（DOM）及浏览器对象模型（BOM），并详细讲解如何在HTML中使用JavaScript，如使用<script>标签、外部引用脚本等。

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

第一章：什么是JavaScript

一、 JavaScript的实现

虽然JavaScript和ECMAScript基本上是同义词，但是JavaScript远远不限于于 ECMA-262 所定义的那样。

核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）

在这里插入图片描述

二、ECMAScript

ECMAScript是由ECMA-262定义的，ECMAScript与Web浏览器没有依赖关系，Web浏览器只是ECMAScript实现可能的宿主环境之一。其他宿主环境包括Node（一种JavaScript平台）和Adobe Flash。

有些人对于JavaScript和ECMAScript有点傻傻分不清，其实ECMAScript就是对JavaScript的一种实现，是一种标准规范。

ECMA-262 定义了这门语言的语法、类型、语句、关键字、保留字、操作符、全局对象

三、文档对象类型（DOM）

DOM是针对XML但经过扩展用于HTML的应用程序编程接口（API，应用程序编程接口）。DOM把整个页面印射为一个多层节点结构.HTML或XHL页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

看下图：
DOM树形图

通过DOM创建的表示文档的实行图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如地删除，添加，替换，或修改任何节点。

DOM级别：

DOM1级：

由两个模块组成：DOM核心（DOM Core）和DOM HTML。主要目标是映射文档的结构。

DOM2级：

在原来DOM的基础上又扩充了鼠标和用户界面的事件，范围，遍历等细分模块，而且通过对象的接口增加了对CSS（Cascading Sstyle Sheets，层叠样式表）的支持。

新模块

DOM视图（DOM Views）：定义了跟踪不同文档类型视图的接口;
DOM事件（DOM Events）：定义了事件和事件处理的接口;
DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口;
DOM遍历（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

DOM3级引入了以统一方式加载和保存文档的方法 - 在DOM加载和保存模块中定义;新增了验证文档的方法 - 在DOM模块中定义。

其他DOM标准:

SVG（可伸缩矢量图形语言，可伸缩矢量图）;

MathML（数学Markuo语言，数学标记语言）;

SMIL（Synchronized Multimedia Intergration Language，同步多媒体集成语言）;

四、浏览器对象模型（BOM）

可以访问和操作浏览器窗口的浏览器对象模型，开发人员使用BOM可以控制浏览器显示的页面以外的部分。

五、小结

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

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

第二章：HTML中的JavaScript

一、在HTML中使用JavaScript

<script>元素

在HTML页面中插入JavaScript的主要方法有两个：在HTML中使用<script>元素，内部直接嵌入JavaScript代码和外部引用JavaScript脚本

在HTML中使用<script>元素，HTML4.01为<script>元素定义了下列8个属性：

async：表示应该立即下载脚本，但不应该妨碍页面中其他的操作，比如下载其他资源或等待加载其他脚本。只对外部引入脚本文件生效。
charset：表示通过scr属性置顶的代码的字符集。由于大多数浏览器会忽略它charset，很少有人用着个属性。
defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
language：已废弃，
src：表示包含要执行代码的外部文件。
type：表示编写代码使用的脚本语言的内容类型。默认属性text/JavaScript。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。
crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin=
"anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据
标志，意味着出站请求会包含凭据。

内部直接嵌入JavaScript代码：

<script type = "text/javascript">
    function () {
        alert("Hello world!")
    }
</script>

外部引用JavaScript脚本：

<script type = "text/javascript" src = "index.js"></script>

注意点：带有src属性的<script>标签中不能存在额外的JavaScript代码，因为会被直接忽略。

浏览器解析JavaScript文件顺序：

不存在defer和async属性的<script>中，浏览器会按照<script>元素在HTML中出现的先后顺序进行解析。

<script>标签的位置

传统的放在<head>标签中，缺点是必须等到全部JavaScript代码都被下载解析和执行完全以后，才能开始呈现HTML的内容（浏览器在遇到标签时才开始呈现内容）。会导致浏览器在呈现HTML内容时出现明显的延迟，延迟期间的浏览器窗口中僵尸一片空白。

所以为了避免这个问题，把JavaScript引用放在标签上。当页面内容完全呈现在浏览器中，再解析JavaScript代码，浏览器窗口显示空白页面的时间缩短而打开页面的速度也加快了。

延迟脚本（只适用于外部脚本文件）

defer属性：脚本会被延迟到整个页面都解析完毕后执行，相当于告诉浏览器立即下载脚本，但是等所有文件被解析完毕后再解析带有defer属性的<script>引入的JavaScript代码。

异步脚本（只适用于外部脚本文件）

async属性：不让页面等待两个脚本下载和执行，，从而异步加载页
面其他内容。建议异步脚本不要在加载期间修改DOM。

异步脚本一定会在load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

外部引用外部文件的优点：

可维护性：把所有JavaScript文件都放在一个文件夹中，维护更轻松。
可缓存：两个页面同时使用相同的JavaScript文件，这个文件只需要下载一次，加快浏览器加载页面速度。
适应于未来

<noscript>标签

用在不支持JavaScript的浏览器中显示替代的内容。

小结

把JavaScript插入到HTML页面中要使用<script>标签。插入位置放在</body>前，<body>内容后。
在包含外部JavaScript文件时，必须将src属性设置为指向相应文件的url。
在不使用属性为defer和async的情况下，所有<script>标签都会按照先后顺序依次解析JavaScript文件
使用defer属性的<script>可以让脚本在文档完全呈现之后再执行。延迟脚本也是按照先后顺序依次执行。
使用async属性的<script>可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本在页面导入顺序执行。
<noscript>可以指定在不支持JavaScript脚本的浏览器中显示的替代内容，在支持JavaScript脚本下，浏览器不会显示<noscript>标签中的任何内容。