01JavaScript初识

一、简介

什么是JavaScript

  • JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境。
  • JavaScript 作为被应用最广泛的浏览器语言,且与 HTML/CSS 完全集成,具有独特的地位。
  • 有很多其他的语言可以被“编译”成 JavaScript,这些语言还提供了更多的功能。建议最好了解一下这些语言,至少在掌握了 JavaScript 之后大致的了解一下。
  • JavaScript是 web 开发人员必须学习的 3 门语言中的一门:
    1. HTML 定义了网页的内容
    2. CSS 描述了网页的布局
    3. JavaScript 控制了网页的行为

IDE

  • Visual Studio Code(跨平台,可拓展性强)。
  • Trae(与VS Code类似,AI编辑器)。
  • WebStorm(跨平台,大学生可以申请免费试用)。

二、入门

<Script>标签

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html>

<body>

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

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

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

</body>

</html>

<script> 标签中包裹了JavaScript代码,当浏览器遇到 <script> 标签,代码会自动运行。

外部脚本

外部的脚本可以通过 <script src="path/to/script.js"></script> 的方式插入。如果设置了 src 特性,script 标签内容将会被忽略。

⚠️一般来说,只有最简单的脚本才嵌入到 HTML 中。更复杂的脚本存放在单独的文件中。使用独立文件的好处是浏览器会下载它,然后将它保存到浏览器的 缓存 中。之后,其他页面想要相同的脚本就会从缓存中获取,而不是下载它。所以文件实际上只会下载一次。这可以节省流量,并使得页面(加载)更快。

如果你更改了脚本文件,却没有在页面中产生变化,可以在页面使用Ctrl+F5来清理浏览器缓存。

三、代码结构

语句

语句是执行行为(action)的语法结构和命令。我们可以在代码中编写任意数量的语句。语句之间可以使用分号进行分割。通常,每条语句独占一行,以提高代码的可读性:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<script>

"use strict";

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

</script>

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

注释

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<script>

"use strict";

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

</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>

<script>

"use strict";

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

</script>

“use strict”

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

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

"use strict" 也可以被放在函数体的开头。这样则可以只在该函数中启用严格模式。但通常人们会在整个脚本中启用严格模式。

Author

WaterNorth

Posted on

2025-08-19

Updated on

2025-08-19

Licensed under