JavaScript | Hello World?【三】

举报
xcc-2022 发表于 2022/06/28 16:49:27 2022/06/28
【摘要】 Hello, world!本教程的这一部分内容是关于 JavaScript 语言本身的。但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert),所以如果你打算专注于另一个环境(比如 Node.js),你就不必多花时间来关心这些特定指令了。我们将在本教程的 【下一部分】 中专注于浏览器中的 Java...

Hello, world!

在这里插入图片描述

本教程的这一部分内容是关于 JavaScript 语言本身的。

但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert),所以如果你打算专注于另一个环境(比如 Node.js),你就不必多花时间来关心这些特定指令了。我们将在本教程的 【下一部分】 中专注于浏览器中的 JavaScript。

首先,让我们看看如何将脚本添加到网页上。对于服务器端环境(如 Node.js),你只需要使用诸如 "node my.js" 的命令行来执行它。

“script” 标签

我们几乎可以使用 <script> 标签将 JavaScript 程序插入到 HTML 文档的任何位置。

比如:

<!DOCTYPE HTML>
<html>

<body>

  <p>script 标签之前...</p>

  <script>
    alert('Hello, world!');
  </script>

  <p>...script 标签之后</p>

</body>

</html>

你可以通过点击右上角的“播放”按钮来运行这个例子。

<script> 标签中包裹了 JavaScript 代码,当浏览器遇到 <script> 标签,代码会自动运行。 ## 现代的标记(markup) <script> 标签有一些现在很少用到的特性(attribute),但是我们可以在老代码中找到它们: - `type` 特性:`<script type=…>` 在老的 HTML4 标准中,要求 script 标签有 `type` 特性。通常是 `type="text/javascript"`。这样的特性声明现在已经不再需要。而且,现代 HTML 标准已经完全改变了此特性的含义。现在,它可以用于 JavaScript 模块。但这是一个高阶话题,我们将在本教程的另一部分中探讨 JavaScript 模块。 - `language` **特性**:`<script language=…>` 这个特性是为了显示脚本使用的语言。这个特性现在已经没有任何意义,因为语言默认就是 JavaScript。不再需要使用它了。 - **脚本前后的注释**。 在非常古老的书籍和指南中,你可能会在 `<script>` 标签里面找到注释,就像这样: ```javascript <script type="text/javascript"></script>

现代 JavaScript 中已经不这样使用了。这些注释是用于不支持 `<script>` 标签的古老的浏览器隐藏 JavaScript 代码的。由于最近 15 年内发布的浏览器都没有这样的问题,因此这种注释能帮你辨认出一些老掉牙的代码。

## 外部脚本

如果你有大量的 JavaScript 代码,我们可以将它放入一个单独的文件。

脚本文件可以通过 `src` 特性(attribute)添加到 HTML 文件中。

```javascript
<script src="/path/to/script.js"></script>

这里,/path/to/script.js 是脚本文件从网站根目录开始的绝对路径。当然也可以提供当前页面的相对路径。例如,src ="script.js",就像 src="./script.js",表示当前文件夹中的 "script.js" 文件。

我们也可以提供一个完整的 URL 地址,例如:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

要附加多个脚本,请使用多个标签:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>

请注意:

一般来说,只有最简单的脚本才嵌入到 HTML 中。更复杂的脚本存放在单独的文件中。

使用独立文件的好处是浏览器会下载它,然后将它保存到浏览器的 缓存 中。

之后,其他页面想要相同的脚本就会从缓存中获取,而不是下载它。所以文件实际上只会下载一次。

这可以节省流量,并使得页面(加载)更快。

🚫如果设置了 src 特性,script 标签内容将会被忽略。

一个单独的 <script> 标签不能同时有 src 特性和内部包裹的代码。

这将不会工作:

<script src="file.js">
  alert(1); // 此内容会被忽略,因为设定了 src
</script>

我们必须进行选择,要么使用外部的 <script src="…">,要么使用正常包裹代码的 <script>

为了让上面的例子工作,我们可以将它分成两个 <script> 标签。

<script src="file.js"></script>
<script>
  alert(1);
</script>

总结

  • 我们可以使用一个 <script> 标签将 JavaScript 代码添加到页面中。
  • typelanguage 特性(attribute)不是必需的。
  • 外部的脚本可以通过 <script src="path/to/script.js"></script> 的方式插入。

有关浏览器脚本以及它们和网页的关系,还有很多可学的。但是请记住,教程的这部分主要是针对 JavaScript 语言本身的,所以我们不该被浏览器特定的实现分散自己的注意力。我们将使用浏览器作为运行 JavaScript 的一种方式,这种方式非常便于我们在线阅读,但这只是很多种方式中的一种。

✅任务

显示一个提示语

重要程度: 5

创建一个页面,然后显示一个消息 “I’m JavaScript!”。

在沙箱中或者在你的硬盘上做这件事都无所谓,只要确保它能运行起来。

在新窗口中演示

解决方案

<!DOCTYPE html>
<html>

<body>

  <script>
    alert( "I'm JavaScript!" );
  </script>

</body>

</html>

使用沙箱打开解决方案。

使用外部的脚本显示一个提示语

重要程度: 5

打开前一个任务 【显示一个提示语】 的答案。将脚本的内容提取到一个外部的 alert.js 文件中,放置在相同的文件夹中。

打开页面,确保它能够工作。

解决方案

<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>

同一个文件夹中的 alert.js 文件:

alert("I'm JavaScript!");

代码结构

我们将要学习的第一个内容就是构建代码块。

语句

语句是执行行为(action)的语法结构和命令。

我们已经见过了 alert('Hello, world!') 这样可以用来显示消息的语句。

我们可以在代码中编写任意数量的语句。语句之间可以使用分号进行分割。

例如,我们将 “Hello World” 这条信息一分为二:

alert('Hello'); alert('World');

通常,每条语句独占一行,以提高代码的可读性:

alert('Hello');
alert('World');

分号

当存在换行符(line break)时,在大多数情况下可以省略分号。

下面的代码也是可以运行的:

alert('Hello')
alert('World')

在这,JavaScript 将换行符理解成“隐式”的分号。这也被称为 自动分号插入

在大多数情况下,换行意味着一个分号。但是“大多数情况”并不意味着“总是”!

有很多换行并不是分号的例子,例如:

alert(3 +
1
+ 2);

代码输出 6,因为 JavaScript 并没有在这里插入分号。显而易见的是,如果一行以加号 "+" 结尾,那么这是一个“不完整的表达式”,不需要分号。所以,这个例子得到了预期的结果。

但存在 JavaScript 无法确定是否真的需要自动插入分号的情况。

这种情况下发生的错误是很难被找到和解决的。

❗一个错误的例子

如果你好奇地想知道一个这种错误的具体例子,那你可以看看下面这段代码:

alert("Hello");

[1, 2].forEach(alert);

你不需要考虑方括号 []forEach 的含义,现在它们并不重要,之后我们会学习它们。让我们先记住这段代码的运行结果:先显示 Hello,然后显示 1,然后 2

现在,让我们删除 alert 语句后的分号:

alert("Hello")

[1, 2].forEach(alert);

与上面的代码相比只有一个字符的区别:第一行末尾的分号不见了。

如果我们运行这段代码,只有第一个 Hello 会被显示出来(并且有一个报错,你可能需要打开控制台才能看到它)。并且不会再有数字被显示出来。

这是因为,JavaScript 引擎并没有假设在方括号 [...] 前有一个分号。因此,最后一个示例中的代码被视为了单个语句。

对于引擎来说,它是这样的:

alert("Hello")[1, 2].forEach(alert);

看起来很奇怪,对吧?在这种情况下,这样将两行代码合并到一起是不对的。我们需要在 alert 后面加一个分号,代码才能正常运行。

这也可能发生在其他情况下。

即使语句被换行符分隔了,我们依然建议在它们之间加分号。这个规则被社区广泛采用。我们再次强调一下 —— 大部分时候可以省略分号,但是最好不要省略分号,尤其对新手来说。

注释

随着时间推移,程序变得越来越复杂。为代码添加 注释 来描述它做了什么和为什么要这样做,变得非常有必要了。

你可以在脚本的任何地方添加注释,它们并不会影响代码的执行,因为引擎会直接忽略它们。

单行注释以两个正斜杠字符 // 开始。

这一行的剩余部分是注释。它可能独占一行或者跟随在一条语句的后面。

就像这样:

// 这行注释独占一行
alert('Hello');

alert('World'); // 这行注释跟随在语句后面

多行注释以一个正斜杠和星号开始 “/\*” 并以一个星号和正斜杠结束 “\*/”

就像这样:

/* 两个消息的例子。
这是一个多行注释。
*/
alert('Hello');
alert('World');

注释的内容被忽略了,所以如果我们在 /* … */ 中放入代码,并不会执行。

有时候,可以很方便地临时禁用代码:

/* 注释代码
alert('Hello');
*/
alert('World');

使用快捷键!

在大多数的编辑器中,一行代码可以使用 Ctrl+/ 快捷键进行单行注释,诸如 Ctrl+Shift+/ 的快捷键可以进行多行注释(选择代码,然后按下快捷键)。对于 Mac 电脑,应使用 Cmd 而不是 Ctrl,使用 Option 而不是 Shift。

不支持注释嵌套!

不要在 /*...*/ 内嵌套另一个 /*...*/

下面这段代码报错而无法执行:

/*
  /* 嵌套注释 ?!? */
*/
alert( 'World' );

对你的代码进行注释,这还有什么可犹豫的!

注释会增加代码总量,但这一点也不是什么问题。有很多工具可以帮你在把代码部署到服务器之前缩减代码。这些工具会移除注释,这样注释就不会出现在发布的脚本中。所以,注释对我们的生产没有任何负面影响。

在后面的教程中,会有一章 【代码质量】的内容解释如何更好地写注释。

现代模式,“use strict”

长久以来,JavaScript 不断向前发展且并未带来任何兼容性问题。新的特性被加入,旧的功能也没有改变。

这么做有利于兼容旧代码,但缺点是 JavaScript 创造者的任何错误或不完善的决定也将永远被保留在 JavaScript 语言中。

这种情况一直持续到 2009 年 ECMAScript 5 (ES5) 的出现。ES5 规范增加了新的语言特性并且修改了一些已经存在的特性。为了保证旧的功能能够使用,大部分的修改是默认不生效的。你需要一个特殊的指令 —— "use strict" 来明确地激活这些特性。

“use strict”

这个指令看上去像一个字符串 "use strict" 或者 'use strict'。当它处于脚本文件的顶部时,则整个脚本文件都将以“现代”模式进行工作。

比如:

"use strict";

// 代码以现代模式工作
...

很快我们就会学习到函数(一种组合命令的方式),所以让我们提前注意一下,"use strict" 可以被放在函数体的开头。这样则可以只在该函数中启用严格模式。但通常人们会在整个脚本中启用严格模式。

🚫确保 “use strict” 出现在最顶部

请确保 "use strict" 出现在脚本的最顶部,否则严格模式可能无法启用。

这里的严格模式就没有被启用:

alert("some code");
// 下面的 "use strict" 会被忽略,必须在最顶部。

"use strict";

// 严格模式没有被激活

只有注释可以出现在 "use strict" 的上面。

🚫没有办法取消 use strict

没有类似于 "no use strict" 这样的指令可以使程序返回默认模式。

一旦进入了严格模式,就没有回头路了。

浏览器控制台

当你使用 【开发者控制台】 运行代码时,请注意它默认是不启动 use strict 的。

有时,当 use strict 会对代码产生一些影响时,你会得到错误的结果。

那么,怎么在控制台中启用 use strict 呢?

首先,你可以尝试搭配使用 Shift+Enter 按键去输入多行代码,然后将 use strict 放在代码最顶部,就像这样:

'use strict'; <Shift+Enter 换行>
//  ...你的代码
<按下 Enter 以运行>

它在大部分浏览器中都有效,像 Firefox 和 Chrome。

如果依然不行,例如你使用的是旧版本的浏览器,那么有一种很丑但可靠的启用 use strict 的方法。将你的代码放在这样的包装器中:

(function() {
  'use strict';

  // ...你的代码...
})()

我们应该使用 “use strict” 吗?

这个问题的答案好像很显而易见,但事实并非如此。

有人可能会建议在脚本的最顶部放置 "use strict" 这行代码…… 但你知道更酷的方式吗?

现代 JavaScript 支持 “class” 和 “module” —— 高级语言结构(本教程后续章节会讲到),它们会自动启用 use strict。因此,如果我们使用它们,则无需添加 "use strict" 指令。

因此,目前我们欢迎将 "use strict"; 写在脚本的顶部。稍后,当你的代码全都写在了 class 和 module 中时,你则可以将 "use strict"; 这行代码省略掉。

目前,我们已经基本了解了 use strict

在接下来的章节中,当我们学习语言功能时,我们会看到严格模式与旧的模式之间的差异。幸运的是,差异其实没有那么多。并且,这些差异实际上提升了我们的编程体验。

本教程的所有例子都默认采用严格模式,除非特别指定(非常少)。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。