Skip to main content

JavaScript基础:编程入门及命令

· 约23分钟
Proca

摘要

本章是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引擎是这样工作的:

  1. 读取(或者说加载)脚本文件,比如index.js。
  2. 解析脚本文件,将其转换为一种中间表示(IR),这是一种介于源代码和机器代码之间的语言。
  3. 优化IR,通过一些技术(如即时编译)提高代码的执行效率。
  4. 执行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样式( colorfont-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";
别被吓到了😊

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

  1. document.getElementById("demo"):这是一个命令,正如其名,它的作用是获取id为"demo"的HTML元素。
  2. .innerHTML = "你好 Dolly":这也是一个命令,它的作用是把文本"你好 Dolly"赋值给上一条命令获取到的HTML元素。
  3. ;:这是一条空语句,它的作用是告诉浏览器,这条命令已经结束了。

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

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

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

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() ),就可以执行函数里面的所有命令。

关于更多有关函数的思想,我们将在第二章详细介绍。

让命令简洁精确

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

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的基本概念和用途。

  1. JavaScript是一种编程语言,用于与计算机进行交互。它可以在网页中实现动态和交互的功能。

  2. JavaScript与自然语言(如中文、英文)有很多不同之处。编程语言更加严格和精确,只用于描述逻辑和数据,适合人与机器之间的交流。

  3. JavaScript是一种脚本语言,可以直接在浏览器中运行。它与HTML和CSS一起用于定义网页的行为、样式和结构。

  4. 使用JavaScript可以实现网页的动态和交互效果,例如幻灯片、表单验证和数据交互等。

  5. JavaScript的使用方法有两种:直接嵌入HTML文档中或保存为单独的.js文件,并在HTML文档中引用。 每条JavaScript命令都是一条语句,通常以分号结尾,可以通过代码块组织多条命令。当然,你也可以直接打开控制台运行一些简单的JavaScript代码。

  6. 使用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));
支持一下

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