JavaScript基础：编程入门及命令 | 深圳可链科技有限公司官网

本章是JavaScript基础教程系列的第一章。在本章中，我们将介绍什么是JavaScript，以及它可以实现什么样的功能。我们还将学习如何使用JavaScript向电脑发送命令，就像我们在日常生活中使用命令一样。

什么是JavaScript?

自然语言 & 编程语言

你有没有想过，你是怎么学会说话的？你可能会说：“ too simple! 我从小就听父母和老师说话，然后模仿他们的发音和用法，慢慢地就学会了。”

但其实，你学习语言的过程，不仅仅是模仿和记忆，还有理解和运用。对于现代汉语，你需要理解每个字、词、句的意思，知道何时采用何种表达。

让我们想想在日常生活中我们是怎么使用语言的：你运用你所学的中文，和别人交流、表达、沟通，完成各种任务，实现各种目标。比如，你要告诉别人这道解几怎么做，这个导数怎么求；或者问别人“最后一道选择题选什么？！”

这些都是你用语言发出的命令，也就是你向别人发出的指示或请求，让别人做某件事或给你某种信息。

那么，你有没有想过，你能不能用语言和电脑交流，向电脑发出命令呢？答案是肯定的。但显然，你不能用中文或英文和电脑交流，因为电脑不懂这些语言。

你要用一种电脑能懂的语言，也就是编程语言！

编程语言和自然语言（如中文、英文）有很多相似之处，也有很多不同之处。

相同之处在于，它们都有自己的规则和方法，都可以用来发出命令。

但是，它们之间也有很大的差异：

自然语言更加灵活和多样，可以用来表达各种各样的意思和情感。而编程语言更加严格和精确，只能用来描述逻辑和数据。通常情况下，没人会用编程语言进行日常交流。

另外，自然语言更加容易理解和记忆，因为它们是我们从小就接触和使用的。相较之下，作为一门陌生和严格的语言，编程语言显得更加难以掌握和运用。但别被吓住了，编程语言只是规则更加严格而已，只要你愿意，你一样可以学会它！

总之，自然语言更加适合人与人之间的交流。而编程语言更加适合人与机器之间的交流。

为了更好地与机器“交流”，在本系列的教程中，我们将学习一种非常流行和实用的编程语言——JavaScript。

JavaScript 简介

热知识

JavaScript由Netscape公司开发，刚开始名为LiveScript，在1995年发布前夕，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript。

因此，虽然名字是JavaScript，但是它和Java并没有什么关系。JavaScript是一种完全独立的编程语言，它的设计和用法与Java完全不同。

JavaScript是一种脚本语言，也就是说，它是一种可以直接在浏览器中运行的编程语言。就像汽车的驱动需要汽车引擎一样，JavaScript在浏览器中的运行也需要一种引擎，这种引擎就是 JavaScript引擎。

虽然你驾驶汽车无需知道汽车引擎的复杂原理，但了解一些基本的原理，对于成为一名老司机是有帮助的。同样地，了解JavaScript引擎的基本原理，对于你更好地使用JavaScript是有大有裨益的。一般来说，JavaScript引擎是这样工作的：

读取（或者说加载）脚本文件，比如index.js。
解析脚本文件，将其转换为一种中间表示（IR），这是一种介于源代码和机器代码之间的语言。
优化IR，通过一些技术（如即时编译）提高代码的执行效率。
执行IR，完成脚本的运行。

解释型语言 & 编译型语言

了解过其他编程语言的读者可能注意到了：

JavaScript的运行过程与C、C++、Java的有所区别：编译时机不同。

这是因为JavaScript是一种解释型语言，而C、C++、Java是一种编译型语言。至于前面提到的脚本语言，它属于解释型语言中的一类。在编译型语言中，代码是在开发阶段就编译成一个可执行文件的，而对于解释型语言，代码是在运行阶段才被解释执行的。这也就是为什么你能在浏览器中看到JavaScript代码的源码，而在各种可执行文件(如exe文件)中看不到C、C++、Java代码的源码的原因。

你不难想到，有 JavaScript 引擎的地方就可以运行 JavaScript 代码，比如浏览器、Node.js 等。但在本系列教程在我们主要使用浏览器来运行 JavaScript 代码。

浏览器是我们浏览网页的工具，而一个简单的网页正是我们使用HTML、CSS和JavaScript这些语言，告诉浏览器网页的每个地方应该怎么呈现，从而实现出来的。

HTML( HyperText Markup Language, 超文本标记语言 )定义了网页的内容和结构，比如标题、段落、图片、链接等，HTML的语言形式为尖括号包围的HTML元素。

CSS( Cascading Style Sheets, 层叠样式表 )定义了网页的样式和布局，比如颜色、字体、大小、位置等。

而 JavaScript 则定义了网页的行为和逻辑，比如动画效果、用户操作、表单验证、数据交互等。

如果你觉得上面的定义有些抽象，你可以把HTML、CSS和JavaScript比作一座房子的三个部分：

HTML是房子的骨架，支撑着整个结构；

CSS则是房子的装修，美化了外观和风格；

而JavaScript就是房子的电器，增加了功能和便利。

好吧，你可能还是不太明白，那么我们就来看下面这个例子：

注意到第一行的 <!DOCUTYPE html> 了吗？它是HTML的声明，表明这是一个HTML文档；你还可以注意到，在某些HTML标签内，我们使用 style 来自定义这个标签的外观。

而 <script> 和 </script> 之间的内容，就是我们之后要学习的JavaScript代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<body>
    <h1 style="color: red; font-size: 24px;">JavaScript</h1>
    <p>JavaScript是一种脚本语言</p>
    <script>
        alert('Hello, world!');
    </script>
</body>
</html>

在上面的例子中，我们可以直观地看到：HTML的标签根据其位置的不同定义出了网站的结构，也能猜到CSS定义了网页各种元素的样式，包括颜色、字体、大小等。

最重要的，我们使用JavaScript命令浏览器：向用户发出alert（警报），内容是 “Hello World”。

试一试

你可以把这段代码复制下来，剪贴进电脑的文本编辑器，然后把文件后缀名改 .html，接着双击用浏览器打开，看看效果。

对于其他的HTML标签（ <html>、<head>、<body>、<h1>、<p>）和CSS样式（ color、font-size ），我知道你很急但是你别急，我们会在后面的教程中介绍。

不管怎么说，有了JavaScript，我们就可以让网页变得更加动态和交互。

什么叫动态？所谓动态就是指网页可以根据不同的情况变化，而不是一成不变。

比如，我们可以用JavaScript来告诉电脑：“多少时间间隔后，网页上某一张图片应该自动切换”，从而实现一个幻灯片效果。

什么又是交互呢？交互就是指网页可以响应用户的操作，而不是被动地显示。

比如，在一个网页计算器中，我们可以用JavaScript告诉电脑：“用户按下数字键后需要显示对应数字、并记录下来；按下四则运算键需要对记录下来的数字进行对应运算”等等，从而让一个计算器不仅仅只有一副皮囊。

总之，JavaScript可以让网页变得更加生动和有趣，而不是只有一成不变的内容。

JavaScript 用法

要使用JavaScript，我们有两种方法：

一种是直接在HTML文档中嵌入JavaScript代码，用 <script> 标签包围起来，就像上面的例子一样。另一种是把JavaScript代码单独保存为一个.js文件（也就是它的缩写），并在HTML文档中用 <script> 标签引用它。

这两种方法各有优缺点，我们将在后面的章节详细介绍。

命令你的浏览器！

命令是向浏览器发出的指示，让浏览器执行某些操作，就像我们上面例子中的 alert('Hello, world!'); 会让浏览器弹出一个警报那样。

在JavaScript中，每一条命令都是一条语句，通常以一个分号( ; )结束。

例如，下面这条语句就是一个命令，它的作用是向id为"demo"的HTML元素输出文本"你好 Dolly"：

document.getElementById("demo").innerHTML = "你好 Dolly";

别被吓到了😊

上面这条语句看起来很长，但是我们可以把它分成三部分来看：

document.getElementById("demo")：这是一个命令，正如其名，它的作用是获取id为"demo"的HTML元素。
.innerHTML = "你好 Dolly"：这也是一个命令，它的作用是把文本"你好 Dolly"赋值给上一条命令获取到的HTML元素。（要注意！！！= 跟数学上的相等符号意义并不相同，在JavaScript中，它的意思是“赋值”，即把等号右边的值赋给等号左边）
;：这是一条空语句，它的作用是告诉浏览器，这条命令已经结束了。

有时候，我们可能需要在一行中写多个命令，或者把一个命令分成多行写，这样可以让代码更加简洁或清晰。

但是，无论怎么写，我们都要记得在每个命令的末尾加上一个分号(;)，这样浏览器才能知道哪里是一个命令的结束。

例如，下面这两种写法都是正确的，它们都是在一行中写了两个命令：

var x = 10; var y = 20; // 正确
var z = 30; var w = 40; // 正确

下面这两种写法也都是正确的，它们都是把一个命令分成了两行写：

document.write("你好 \
世界!"); // 正确
document.write("Hello World!"
); // 正确

别忘了分号！

事实上，大部分情况下JavaScript 引擎（你的浏览器里面就有一个这样的引擎）是可以识别出语句的结束位置并且自动插入分号，但根据《JavaScript 高级程序设计》中的描述:

「即使语句末尾的分号不是必需的，也应该加上。记着加分号有助于防止省略造成的问题，比如可以避免输入内容不完整。此外，加分号也便于开发者通过删除空行来压缩代码(如果没有结尾的分号，只删除空行，则会导致语法错误)。加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。」

有时候，我们可能需要把多个命令放在一起，作为一个整体来执行，这样可以让代码更加有组织和逻辑。

这时候，我们就可以用一对花括号( { 与 } )把这些命令括起来，形成一个代码块。

代码块通常用于定义一些特殊的结构，比如函数、循环、条件等。我们将在后面的章节详细介绍这些结构。

例如，下面这个代码块就是一个函数（function），它把多条命令当做一个整体来执行：弹出一个对话框，并在控制台输出一句话：

// 声明一个函数，名字叫 sayHello
function sayHello() {
  alert("你好"); // 弹出对话框
  console.log("你好"); // 输出到控制台
}

info

在浏览器中，我们可以通过按下 F12 键来打开开发者工具，然后点击console(控制台)进入控制台视图，这样我们就可以在控制台中看到 console.log() 输出的内容了。

函数是一种非常有用的结构，它可以让我们把一些常用的代码封装起来，方便我们重复调用。我们只需要给函数起一个名字（比如 sayHello ），然后在需要的地方调用它（在函数名后加个括号，比如 sayHello() ），就可以执行函数里面的所有命令。

关于更多有关函数的思想，我们将在JavaScript基础教程：函数中学习。

让命令简洁精确

在前面，我们已经学习了如何向浏览器发出命令，让我们回忆一下：

alert("你好");

这条命令的作用是弹出一个对话框，里面显示文本"你好"。

document.getElementById("demo").innerHTML = "你好 Dolly";

这条命令的作用是向id为"demo"的HTML元素输出文本"你好 Dolly"。

console.log("你好");

这条命令的作用是在控制台输出文本"你好"。

我们之后还会学习更多的命令，但是无论我们学习多少命令，它们的作用都是一样的：向浏览器发出命令，让浏览器执行某些操作。

为了让浏览器能够正确地执行我们的命令，我们还需要思考如何让命令简洁精确。这很好理解：当我们向机器人发出命令，我们必须确保机器人能够理解我们的命令，否则它可能会做出错误的事情。原则上，你不能使用机器人不知道和不理解的词，也不能使用模糊的词汇。

例如，如果你告诉一个机器人“将垃圾拿出来”，它可能会将垃圾拿到室外并放在走廊上。如果你让它将垃圾带往垃圾桶，它可能会将袋子放在垃圾桶顶上。

虽然浏览器不能帮我们扔垃圾，但和机器人一样，它也需要我们发出精确的命令。而要发出合理有效的命令，我们必须思考所需的信息量。

如果我们给出的信息太少或太多，或者使用了错误或模糊的词汇，那么浏览器可能无法正确地执行我们的命令，或者执行出我们不想要的结果。

例如，请看以下这个例子：

// 例子：向id为"demo"的HTML元素输出一个数字
document.getElementById("demo").innerHTML = 5; // 正确
document.getElementById("demo").innerHTML = five; // 错误，five不是一个数字
document.getElementById("demo").innerHTML = "5"; // 正确，但不推荐，"5"是一个字符串
document.getElementById("demo").innerHTML = 5 + 5; // 正确，5+5是一个表达式，等价于10
document.getElementById("demo").innerHTML = "5" + "5"; // 错误，"5"+"5"是一个表达式，等价于"55"
document.getElementById("demo").innerHTML = 五; // 错误，你绝对不要这么写

在这个例子中我们可以发现，对数字和字符串的运算方式和结果是不一样的。关于更多不同类型数据的运算方式，我们将在第六章详细介绍。

总结

本章是JavaScript基础教程系列的第一章，介绍了JavaScript的基本概念和用途。

JavaScript是一种编程语言，用于与计算机进行交互。它可以在网页中实现动态和交互的功能。
JavaScript与自然语言（如中文、英文）有很多不同之处。编程语言更加严格和精确，只用于描述逻辑和数据，适合人与机器之间的交流。
JavaScript是一种脚本语言，可以直接在浏览器中运行。它与HTML和CSS一起用于定义网页的行为、样式和结构。
使用JavaScript可以实现网页的动态和交互效果，例如幻灯片、表单验证和数据交互等。
JavaScript的使用方法有两种：直接嵌入HTML文档中或保存为单独的.js文件，并在HTML文档中引用。每条JavaScript命令都是一条语句，通常以分号结尾，可以通过代码块组织多条命令。当然，你也可以直接打开控制台运行一些简单的JavaScript代码。
使用JavaScript，我们可以向浏览器发出命令，让浏览器执行某些操作。为了让浏览器能够正确地执行我们的命令，我们还需要思考如何让命令简洁精确。

小试牛刀

现在，我们将通过几个小练习来巩固本节所学的知识。别担心，不会很难！

info

你可以将你的答案发送到评论区和大家一起讨论😊

自然语言 vs 编程语言

自然语言和编程语言有哪些相似之处和不同之处？请列举出至少两点相似之处和两点不同之处。

Hello World

利用本文中提到的开发者工具，在浏览器中显示一个警报框，内容为"Hello, world!"。

大小写转换

在控制台中，将以下字符串转换为大写，最好用上定义的str（我们把它叫做变量），并将结果在控制台中输出：

var str = "hello, world!";

提示

你可以使用 toUpperCase() 方法来将字符串转换为大写。例如，对于命令

"hello".toUpperCase()

它的结果是 "HELLO"

变量和输出

下面这段代码中有几个命令？请标识出每个命令，并简要解释它们的作用。

var x = 5; var y = 10;
var z = 20;
console.log("result 1: " + x + y + z);
console.log("result 2: " + (x + y + z));

什么是JavaScript?​

自然语言 & 编程语言​

JavaScript 简介​

热知识

解释型语言 & 编译型语言

试一试

JavaScript 用法​

命令你的浏览器！​

别被吓到了😊

别忘了分号！

info

让命令简洁精确​

总结​

小试牛刀​

info

自然语言 vs 编程语言​

Hello World​

大小写转换​

提示

变量和输出​

暂无评论，来留下友好的评论吧

什么是JavaScript?

自然语言 & 编程语言

JavaScript 简介

JavaScript 用法

命令你的浏览器！

让命令简洁精确

总结

小试牛刀

自然语言 vs 编程语言

Hello World

大小写转换

变量和输出