《JavaScript 从入门到精通》原书读书笔记（第1章）_javascript发展过程中有一个版本作为草案-CSDN博客

本文链接：https://blog.csdn.net/shw2080/article/details/145768617

一、初识 JavaScript

1.1、JavaScript 概述

JavaScript 是 Web 页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在 HTML 页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。

1.1.1、JavaScript 起源

JavaScript 语言的前身是 LiveScript 语言。由美国 Netscape（网景）公司的布瑞登.艾克（Brendan Eich）为即将在 1995年发布的 Navigator2.0 浏览器的应用而开发的脚本语言。在与 Sun（升阳）公司联手及时完成了 LiveScript 语言的开发后，就在 Navigator 2.0 即将正式发布前，Netscape 公司将其改名为 JavaScript，也就是最初的 JavaScript 1.0 版本。虽然当时 JavaScript1.0 版本还有很多缺陷，但拥有着 JavaScript 1.0 版本的Navigator 2.0 浏览器几乎主宰着浏览器市场。

因为 JavaScript 1.0 如此成功，Netscape 公司在 Navigator 3.0 中发布了 JavaScript 1.1 版本。同时微软开始进军浏览器市场，发布了 Internet Explorer 3.0 并搭载了一个 JavaScript 的类似版本，其注册名称为 JScript，这成为 JavaScript 语言发展过程中的重要一步。

在微软进入浏览器市场后，此时有 3种不同的 JavaScript 版本同时存在，Navigator 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与其他编程语言不同的是，JavaScript 并没有一个标准来统一其语法或特性，而这 3种不同的版本恰恰突出了这个问题。1997年，JavaScript 1.1 版本作为一个草案提交给欧洲计算机制造商协会（ECMA）。最终由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成了 TC39 委员会，该委员会被委派来标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义。TC39 委员会制定了“ECMAScript程序语言的规范书”（又称为“ECMA-262标准”），该标准通过国际标准化组织（ISO）采纳通过，作为各种浏览器生产开发所使用的脚本程序的统一标准。

1.1.2、JavaScript 主要特点

JavaScript脚本语言的主要特点如下：

（1）解释性

JavaScript 不同于一些编译性的程序语言，例如 C、C++等，它是一种解释性的程序语言，它的源代码不需要经过编译，而直接在浏览器中运行时被解释。

（2）基于对象

JavaScript 是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

（3）事件驱动

JavaScript 可以直接对用户或客户输入做出响应，无须经过 Web 服务程序。它对用户的响应，是以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，此动作称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

（4）跨平台

JavaScript 依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持 JavaScript 的浏览器就可以正确执行。

（5）安全性

JavaScript 是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地防止数据的丢失。

1.1.3、JavaScript 的应用

使用 JavaScript 脚本实现的动态页面，在 Web上随处可见。下面将介绍几种 JavaScript 常见的应用。

（1）验证用户输入的内容

使用 JavaScript 脚本语言可以在客户端对用户输入的数据进行验证。

例如：在制作用户注册信息页面时，要求用户输入确认密码，以确定用户输入密码是否准确。如果用户在“确认密码”文本框中输入的信息与“密码”文本框中输入的信息不同，将弹出相应的提示信息，如图1所示。

图 1 验证两次密码是否相同

（2）动画效果

在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用 JavaScript 脚本语言也可以实现动画效果，例如在页面中实现下雪的效果，如图2所示。

（3）窗口的应用

在打开网页时经常会看到一些浮动的广告窗口，这些广告窗口是网站最大的盈利手段。我们也可以通过JavaScript 脚本语言来实现，例如，如图3 所示的广告窗口。

（4）文字特效

使用 JavaScript 脚本语言可以使文字实现多种特效。例如使文字旋转，如图4 所示。

（5）应用 Ajax 技术实现百度搜索提示

在百度首页的搜索文本框中输入要搜索的关键字时，下方会自动给出相关提示。如果给出的提示有符合要求的内容，可以直接选择，这样可以方便用户。例如，输入“京东”后，在下面将显示如图所示的提示信息。

1.2、HBuilderX 的下载和安装

HBuilderX，H 是 HTML 的首字母，Builder 是构造者，X 是 HBuilder 的下一代版本。我们也简称 HX。 HX 是轻如编辑器、强如 IDE 的合体版本。

让我们简单了解下HX的特点

轻巧仅10余M 的绿色发行包（不含插件）
极速不管是启动速度、大文档打开速度、编码提示，都极速响应 C++ 的架构性能远超Java或Electron架构
vue 开发强化 HX 对 vue 做了大量优化投入，开发体验远超其他开发工具详见
小程序支持国外开发工具没有对中国的小程序开发优化，HX 可新建 uni-app 小程序等项目，为国人提供更高效工具
markdown 利器 HX 是唯一一个新建文件默认类型是 markdown 的编辑器，也是对 md 支持最强的编辑器 HX 为 md 强化了众多功能，请务必点击【菜单-帮助-markdown语法示例】，快速掌握 md 及 HX 的强化技巧！
清爽护眼 HX 的界面比其他工具更清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面详见
强大的语法提示 HX 是中国唯一一家拥有自主 IDE 语法分析引擎的公司，对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)
高效极客工具更强大的多光标、智能双击...让字处理的效率大幅提升详见，
更强的 json 支持现代 js 开发中大量 json 结构的写法，HX 提供了比其他工具更高效的操作详见

下载地址：HBuilderX-高效极客技巧

1.3、JavaScript 在 HTML 中的应用

通常情况下，在 Web 页面中使用 JavaScript 有以下 3 种方法：

（1）在页面中直接嵌入 JavaScript 代码

（2）链接外部 JavaScript 文件

（3）作为标签的属性值使用

1.3.1、在页面中直接嵌入 JavaScript 代码

在 HTML 文档中，可以使用 <script>…</script> 标记将 JavaScript 代码嵌入。此外，还可以使用多个 <script> 标记，每个 <script> 标记中可以包含多个 JavaScript 代码集合，并且不同 <script> 标记中的 JavaScript 代码之间可以相互访问，这如同将所有代码放在一对 <script>…</script> 标记之中。<script> 标记有以下几个常用的属性。

表1 <script>标记常用的属性及说明

属性	说明
language	设置所使用的脚本语言及版本
src	设置一个外部脚本文件的路径位置
type	设置所使用的脚本语言，此属性已代替 language 属性
defer	此属性表示当 HTML 文档加载完毕后再执行脚本语言

1.3.1.1、属性

（1）language 属性

用来指定 HTML 中使用的脚本语言及其版本。language 属性的使用格式如下：

<script language="JavaScript1.8">

如果不定义 language 属性，浏览器默认使用的脚本语言为 JavaScript 1.0

（2）src 属性

src 属性用来指定外部脚本文件的路径，外部脚本文件通常使用 JavaScript 脚本，其扩展名为 .js。src 属性使用的格式如下：

<script src="index.js">

（3）type 属性

type 属性用来指定 HTML 中使用的是哪种脚本语言及其版本，自 HTML4.0 标准开始，推荐使用 type 属性来代替 language 属性。type 属性使用格式如下：

<script type="text/javascript">

（5）defer 属性

defer 属性的作用是当文档加载完毕后再执行脚本，当脚本语言不需要立即运行时，设置 defer 属性后，浏览器将不必等待脚本语言装载。这样页面加载会更快。但当有一些脚本需要在页面加载过程中或加载完成后立即执行时，就不需要使用 defer 属性。defer 属性使用格式如下：

<script defer>

1.3.1.2、编写第一个JavaScript程序

编写第一个 JavaScript 程序，在 WebStorm工具中直接嵌入 JavaScript 代码，在页面中输出“我喜欢学习JavaScript”。

具体步骤如下：

（1）启动WebStorm，如果还未创建过任何项目，会弹出如图所示的对话框。

（2）单击图中的“Create New Project”选项弹出创建新项目对话框，如图所示。在对话框中输入项目名称“Code”，并选择项目存储路径，将项目文件夹存储在计算机中的 D 盘，然后单击 Create 按钮创建项目。

指定路径以及项目名称：D:\CodeLocation\WebStom\DemoJavaScript

（3）在项目名称“DemoJavaScript”上单击鼠标右键，然后依次选择“New”→“Directory”选项，如图所示。

（4）单击“Directory”选项，弹出新建目录对话框，如图所示，在文本框中输入新建目录的名称“Demo01”，然后单击“OK”按钮，完成文件夹 Demo01 的创建。

（5）按照同样的方法，在文件夹 Demo01下创建本章实例文件夹 1，在该文件夹下创建第一个实例文件夹 1。

（6）在第一个实例文件夹 1 上单击鼠标右键，然后依次选择“New”→“HTML File”选项，如图23所示。

（7）单击“HTML File”选项，弹出新建 HTML 文件对话框，如图 24 所示，在文本框中输入新建文件的名称“index”，然后单击“OK”按钮，完成 index.html 文件的创建。此时，开发工具会自动打开刚刚创建的文件，结果如图 25 所示。

（8）在 <title> 标记中将标题设置为“第一个JavaScript程序”，在 <body> 标记中编写 JavaScript 代码，如图所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>

</body>
<script type="text/javascript">
    document.write("我很喜欢 JavaScript！这是一个前后端交互的语言")
</script>
</html>

说明：

（1）<script> 标记可以放在 Web 页面的 <head></head> 标记中，也可以放在 <body></body> 标记中。

（2）脚本中使用的 document.write 是 JavaScript 语句，其功能是直接在页面中输出括号中的内容。

1.3.2、链接外部 JavaScript 代码

在 Web 页面中引入 JavaScript 的另一种方法是采用链接外部 JavaScript 文件的形式。如果代码比较复杂或是同一段代码可以被多个页面所使用，则可以将这些代码放置在一个单独的文件中（保存文件的扩展名为 .js），然后在需要使用该代码的 Web 页面中链接该 JavaScript 文件即可。

在 Web 页面中链接外部 JavaScript 文件的语法格式如下：

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

说明：如果外部 JavaScript 文件保存在本机中，src 属性可以是绝对路径或是相对路径；如果外部 JavaScript文件保存在其他服务器中，src 属性需要指定绝对路径。

【案例】在 HTML 文件中调用外部 JavaScript 文件，运行时在页面中显示对话框，对话框中输出“我喜欢学习JavaScript”。

具体步骤如下：

（1）在本章实例文件夹 1 下创建第二个实例文件夹 2。

（2）在文件夹 2 上单击鼠标右键，然后依次选择“New”→“JavaScript File”选项，如图所示。

（3）单击“JavaScript File”选项，弹出新建 JavaScript 文件对话框，如图所示，在文本框中输入 JavaScript 文件的名称“index”，然后单击 OK 按钮，完成 index.js 件的创建。此时，开发工具会自动打开刚刚创建的文件。

（4）在 index.js 文件中编写 JavaScript 代码，代码如图所示。

alert("我很喜欢 JavaScript！这是一个前后端交互的语言")

说明：代码中使用的 alert 是 JavaScript 语句，其功能是在页面中弹出一个对话框，对话框中显示括号中的内容。

（5）在 2 文件夹下创建 index.html 文件，在该文件中调用外部 JavaScript 文件 index.js，代码如图所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index.js</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>

</body>
</html>

注意：

（1）在外部 JavaScript 文件中，不能将代码用 <script>和</script> 标记括起来。

（2）在使用 src 属性引用外部 JavaScript 文件时，<script></script> 标签中不能包含其他 JavaScript 代码。

（3）在 <script> 标签中使用 src 属性引用外部 JavaScript 文件时，</script> 结束标签不能省略。

1.3.3、作为标签的使用值使用

在 JavaScript 脚本程序中，有些 JavaScript 代码可能需要立即执行，而有些 JavaScript 代码可能需要单击某个超链接或者触发了一些事件（如单击按钮）之后才会执行。下面介绍将 JavaScript 代码作为标签的属性值使用。

（1）通过 "javascript:" 调用

在 HTML 中，可以通过 "javascript:" 的方式来调用 JavaScript 的函数或方法。示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:alert('您单击了这个链接!')">请点击</a>
	</body>
</html>

在上述代码中通过使用“javascript:”来调用 alert() 方法，但该方法并不是在浏览器解析到“javascript:”时就立刻执行，而是在单击该超链接时才会执行。

（2）与事件结合调用

JavaScript 可以支持很多事件，事件可以影响用户的操作。比如单击鼠标左键、按下键盘或移动鼠标等。与事件结合，可以调用执行 JavaScript 的方法或函数。示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button name="button" value="确定" onclick="alert('触发了点击按钮事件')">确定</button>
	</body>
</html>

在上述代码中，onclick 是单击事件，意思是当单击对象时将会触发 JavaScript 的方法或函数。

1.4、JavaScript 基本语法

JavaScript 作为一种脚本语言，其语法规则和其他语言有相同之处也有不同之处。下面简单介绍 JavaScript 的一些基本语法。

1.4.1、执行顺序

JavaScript 程序按照在 HTML 文件中出现的顺序逐行执行。如果需要在整个 HTML 文件中执行（如函数、全局变量等），最好将其放在 HTML 文件的 <head>…</head> 标记中。某些代码，比如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。

1.4.2、字母大小写

JavaScript 对字母大小写是敏感（严格区分字母大小写）的，也就是说，在输入语言的关键字、函数名、变量以及其他标识符时，都必须采用正确的大小写形式。例如，变量 username 与变量 userName 是两个不同的变量，这一点要特别注意，因为同属于与 JavaScript 紧密相关的 HTML 是不区分大小写的，所以很容易混淆。

注意：HTML 并不区分大小写。由于 JavaScript 和 HTML 紧密相连，这一点很容易混淆。许多 JavaScript 对象和属性都与其代表的 HTML 标签或属性同名，在 HTML 中，这些名称可以以任意的大小写方式输入而不会引起混乱，但在 JavaScript 中，这些名称通常都是小写的。例如，HTML 中的事件处理器属性 ONCLICK 通常被声明为 onClick 或 OnClick，而在 JavaScript 中只能使用 onclick。

1.4.3、空格与换行

在 JavaScript 中会忽略程序中的空格、换行和制表符，除非这些符号是字符串或正则表达式中的一部分。因此，可以在程序中随意使用这些特殊符号来进行排版，让代码更加易于阅读和理解。

JavaScript 中的换行有“断句”的意思，即换行能判断一个语句是否已经结束。如以下代码表示两个不同的语句。

a = 100
return false

如果将第二行代码写成

return
false

此时，JavaScript 会认为这是两个不同的语句，这样一来将会产生错误。

1.4.4、每行结尾的分号

与Java语言不同，JavaScript并不要求必须以英文分号（;）作为语句的结束标记。如果语句的结束处没有分号，JavaScript会自动将该行代码的结尾作为语句的结尾。

例如，下面的两行代码都是正确的。

alert("您好！！")

alert("您好！");

注意：最好的代码编写习惯是在每行代码的结尾处加上分号，这样可以保证每行代码的准确性。

1.4.5、注释

为程序添加注释可以起到以下两种作用。

（1）可以解释程序某些语句的作用和功能，使程序更易于理解，通常用于代码的解释说明。

（2）可以用注释来暂时屏蔽某些语句，使浏览器对其暂时忽略，等需要时再取消注释，这些语句就会发挥作用，通常用于代码的调试。

JavaScript 提供了两种注释符号：“//”和“/*…*/”。其中，“//”用于单行注释，“/*…*/”用于多行注释。多行注释符号分为开始和结束两部分，即在需要注释的内容前输入“/*”，同时在注释内容结束后输入“*/”表示注释结束。下面是单行注释和多行注释的示例。

	<script type="text/javascript">
		// 1. 这是单行注释
		
		/**
		 * 2. 这是多行注释
		 */
		
		/* 3. 这是多行注释中的其中某一行的注释 */
	</script>