JavaScript DOM编程艺术(2－1)

发布时间：2025-05-12 21:38

学习编程语言的语法和特性，如JavaScript的DOM操作。 #生活知识# #科技生活# #编程学习#

本章内容

q 语句

q 变量和数组

q 操作符

q 条件语句和循环语句

q 函数与对象

本章将对JavaScript语法中最重要的一些概念进行简要的介绍。

一个普通的文本编辑器和一个Web浏览器就足够了。

用JavaScript编写的代码必须嵌在一份HTML/XHTML文档中才能得以执行。这可以通过两种方法做到。第一种方法是将JavaScript代码插入文档<head>部分的<script>标签间，如下所示：

更好的方法是先把JavaScript代码存入一个独立的文件——建议把.js作为这种文件的扩展名，再利用<script>标签的src属性指向该文件，如下所示：

如果有兴趣试一下本章中的示例，可以用文本编辑器先创建一两个文件。首先，创建一个简单的HTML或XHTML文档框架，这个文件可以命名为诸如test.html之类的名称。这里的要点是，在这份文档中的<head>部分包含一个<script>标签，该标签的src属性设置为用文本编辑器将要创建的第二个文件的名字，比如example.js。

test.html应该包含如下所示的内容：

这一章的示例脚本仅只使用一个简单的对话框来显示消息。

如果改变了example.js文件的内容，只需在Web浏览器中重新加载test.html文档即可查看到其执行效果。

程序设计语言分为解释型和编译型两大类。Java或C++等语言需要一个编译器(complier)。编译器是一种能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的二进制可执行文件的程序。

解释型程序设计语言不需要编译器——它们仅需要解释器。对于JavaScript语言，Web浏览器将负责完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并加以执行。如果没有解释器，JavaScript代码将无法得到执行。

如果用编译型程序设计语言编写的代码包含着错误，那些错误在代码编译阶段就会被发现并报告。对于解释型程序设计语言，代码中的错误只有等到解释器实际执行到有关代码时才会被发现并报告。

JavaScript的优点之一是比较容易学习和掌握，但千万不要因此而小看JavaScript能力：它能够完成许多相当复杂的编程任务。不过，本章将只介绍它的最基本的语法和用途。

英语是一种解释型的语言。在阅读和处理别人用英语写出来的文字时，阅读者本人就相当于一个英语解释器。只要作者遵守了英语的语法规则，他想表达的意思就可以被阅读者正确地解读出来。语法(syntax)的广义含义包括语句，单词，标点符号等各个方面，它的狭义含义则特指语句结构方面的各项规则。在接下来的讨论中，我们使用的是“语法”这个词的狭义含义。

JavaScript语言的语法与Java和C++等其他一些程序设计语言的语法非常相似。

用JavaScript或任何一种其他程序设计语言编写出来的脚本都是由一系列指令构成的，这些指令称为语句(statement)。只有按照正确的语法编写出来的语句才能得到正确的解释。

英语语法要求每个句子必须以一个大写字母开头，以一个句号结尾。JavaScript在这方面的要求不那么严格，程序员只需简单地把各条语句放在不同的行上就可以分隔它们，如下所示：

first statement
second statement

如果你想把多条语句放在同一行上，就必须像下面这样用分号来分隔它们：

first statement;second statement;

即使没有把多条语句放在同一行上，但在每条语句的末尾加上一个分号，也是一种良好的编程习惯：

first statement;
second statement;

这可以让代码更容易阅读。将每条语句单独占用一行的做法可以让你本人或其他程序员更容易追踪JavaScript脚本的执行流程。

注释

有时，需要在脚本中写出一些仅供参考或提示性信息，但并不希望JavaScript解释器真的去执行这样的语句。这种语句称为注释(comment)。

注释语句非常有用，它们可以让你把编写代码时的一些想法和考虑记载下来供今后参考，还可以帮助你追踪有关代码的执行流程。类似于日常生活中的便条，注释语句可以帮助程序员跟踪和追查在脚本中发生的事情。

有多种在JavaScript脚本中插入注释的具体做法。例如，如果使用了两个斜杠作为一行的开头，这一行就将被解释为一条注释：

// Note to self:comments are good.

如果使用这种记号方式，就必须在每行注释的开头加上两个斜杠。也就是说，像下面这样的做法是有问题的——第2行将不会被解释为一条注释：

// Not to self:
comments are good.

如果你想写出两行注释，就必须把它们写成如下所示的样子：

// Note to self:
// comments are good.

一条跨越多行的注释还可以用下面这个方式来给出：在整段注释内容的开头加上一个“/*”，在整段注释内容的末尾加上一个“*/”。下面是一个多行注释的例子：

/*Note to self:
comments are good.*/

还可以使用HTML风格的注释，但这种做法仅适用于单行注释。换句话说，JavaScript解释器对“<!-”的处理与对“//”的处理是一样的：

<!-这是一个JavaScript的注释。

这个注释如果是用于HTML文档中，还需要以“->”来结束这种注释语句，如下所示：

JavaScript不要求这样做，它会把“->”视为注释内容的一部分。

请注意，HTML允许上面这样的注释跨越多行，但JavaScript要求这种注释的每行都必须在开头加上“<!-”来作为标志。

因为JavaScript解释器在处理这种风格的注释时与大家所熟悉的HTML做法不同，为避免发生混淆，强烈建议大家最好不要在JavaScript脚本中使用HTML风格的注释。如果没有特别的理由，用“//”记号给出单行注释，用“/**/”记号给出多行注释。

在日常生活里，有些东西是固定不变的，有些东西则会发生变化。例如，人的姓名和生日是固定不变的，但心情和年龄却会随着时间的推移而发生变化。在谈论程序设计语言时，人们把那些会发生变化的东西称为变量(variable)。

把值存入变量的操作称为赋值(assignment)。我把变量mood赋值为"happy"，把变量age赋值为33。

下面是在JavaScript中对这些变量进行赋值的语法：

mood="happy";

age=33;

把值赋给变量后，我们就可以说该变量包含这个值。例如，变量mood现在包含值“happy”，变量age现在包含值33.我们可以用如下所示的语句把这两个变量的值显示在一个弹出式警告窗口中：

alert(mood);

alert(age);

默然说话：你可以把上面的四句代码依序写入example.js文件中，然后双击test.html文件(如果你已经打开了test.html文件，那只需要刷新一下就可以了，刷新之前，记得保存example.js哦！)，就可以看到效果了。

下面是一个显示mood变量值的例子。

下面是一个显示age变量值的例子。

我们将在本书后面的章节中用变量做一些有用的事情，请大家耐心地阅读下去。

请注意，JavaScript允许程序员直接对变量进行赋值而无需提前对它们做出声明。这在许多程序设计语言中都是不允许的。有相当一部分程序设计语言要求在使用变量之前必须先对它做出“介绍”——术语称之为声明(declare)。

在JavaScript脚本中，如果程序员在对某个变量进行赋值之前未对其做出声明，赋值操作将自动声明该变量。虽然JavaScript没有要求程序员必须这么做，但提前对变量做出声明仍是一种良好的编程习惯。下面的语句对变量mood和age做出了声明：

var mood;

var age;

每次只声明一个变量的做法并不是绝对的，JavaScript也允许程序员用一条语句声明多个变量，如下所示：

var mood,age;

JavaScript也允许程序员把声明变量和对该变量进行赋值这两项操作合起来一次完成：

var mood="happy";

var age=33;

我们甚至还可以像下面这样做：

var mood="happy",age=33;

在JavaScript语言里，变量和其他语法元素的名字都是区分大小写的。名字是mood的变量与名字是Mood，MOOD或mOOd的变量没有任何关系，它们不是同一个变量。下面的语句是在对两个不同的变量进行赋值：

var mood="happy";

MOOD="sad";

默然说话：坚决禁用上面的这种变量命名方法，因为这样会导致我们对变量名的混淆和使用的错误！坚决禁用！

JavaScript变量名允许包含字母，数字，美元符号和下划线字符。不允许包含空格，所以下面这条语句将导致语法错误：

var my mood="happy";

为了让比较长的变量名有更好的可读性，可以在变量名中的适当位置插入一个下划线字符就像下面这样：

var my_mood="happy";

2.4.1数据类型

变量mood的值是字符串类型，变量age的值则是一个数值类型。虽然它们是两种不同的数据类型，但在JavaScript脚本中为它们做出声明和进行赋值的语法无任何区别。有些程序设计语言要求程序员在声明变量的同时还必须明确地对其数据类型做出声明，这种做法称为类型声明(typing)。

要求程序员必须明确地对数据类型做出声明的程序设计语言被称为强类型(strongly typed)语言。像JavaScript这样不要求程序员进行类型声明的语言则被称为弱类型(weakly typed)语言。所谓弱类型意味着程序员可以随意改变某个变量的数据类型。

下面这条语句在强类型语言中是非法的，但在JavaScript语言里却完全没有问题：

var age="thirty three";

age=33;

JavaScript并不关心变量age的值是字符串还是数值。

接下来，我们一起看看JavaScript语言中最重要的几种数据类型。

1.字符串

字符串由零个或多个字符构成。字符包括字母，数字，标点符号和空格。字符串必须放在引号里——单引号或双引号都允许使用。下面这两条语句有着同样的效果：

var mood='happy';

var mood="happy";

默然说话：上面这两条语句不能同时放到“example.js”中，这会导致一个语法错误：变量名重复！但你可以分两次，一次放一条，分别实验，这样你就会发现，这两条语句的效果是完全一样的。

var mood="don't ask";

上面这条语句中的字符串包含了单引号，就必须保证字母“n”和“t”之间的单引号能被解释为这个字符串的一部分。换句话说，必须保证这个单引号被解释为这个字符串里的一个字符，而不是被解释为这个字符串的结束标志。一般而言，只要在最外面使用双引号就可以了，同理，如果要在一个字符串里包含双引号，那就在最外面使用单引号就可以了。如下所示：

var mood='i say:"Happy!"';

但有一种特殊情况：我的字符串中既要包含单引号又要包含双引号，那应该怎么办呢？这个问题需要使用字符转义(escaping)功能来解决。在JavaScript语言中，对字符进行转义需要用到反斜杠字符，如下所示：

var mood='don/'t ask';

类似的，我们可以这样来完成既要包含双引号，又要包含单引号的字符串。

var height="about 5'10/" tall";

因为最外层使用了双引号，所以表示5英尺的单引号，就没有加反斜杠，而表示10英寸的双引号就加了一个反斜杠。

你们可以自己验证这一点：把下面这段代码添加到example.js文件中，然后重新加载test.html(双击这个文件或点刷新)：

var height="about 5'10/" tall";

alert(height);

下面是用反斜杠字符对有关字符进行转义后的一个屏幕输出示例。

就个人而言，笔者比较喜欢用双引号来给出字符串。作为一种良好的编程习惯，不管你们选择的是双引号还是单引号，最好能在整个脚本中保持一致。如果在同一个脚本中一会儿使用双引号，一会儿又使用单引号，代码很快就会变得难以阅读和理解。

2.数值

如果想让某个变量包含一个数值，不用限定它必须是一个整数。JavaScript允许程序员使用带小数点的数值，并且允许数值是任意位数，这类数值称为浮点数(floating-point number)：

var age=33.25;

还可以使用负数。负数表示方式是在有关数值的前面加上一个减号(-)，如下所示：

var temperature=-20;

JavaScript并不要求负数必须是一个整数：

var temperature=-20.3333333;

3.布尔值

另一种重要的JavaScript数据类型是布尔(boolean)类型。

默然说话：布尔是什么？布尔是一个人，是他发明的逻辑运算，逻辑运算就是一类运算结果只会是“真”或者“假”的运算法则。所以布尔数据只有两种取值——true或false。假设需要这样一个变量：如果我正在睡觉，这个变量将存储一个值；如果我没有睡觉，这个变量将存储另一个值。可以用字符串数据类型来解决这个问题——只要根据具体情况把有关变量赋值为“sleeping”或“not sleeping”即可达到目的，但布尔数据类型显然是一个更好的选择：

var sleeping=true;

从某种意义上讲，为计算机设计程序就是与布尔值打交道。作为最基本的事实，所有的电子电路只能识别和使用布尔数据：电路中有电流或是没有电流。根据具体情况，这两种状态可以代表“真或假”，“是或否”或者“1或0”,但不管它们代表什么，这两种状态绝不可能同时出现——换句话说，在任意时刻只能使用两种可取值中的一种。

与字符串值不同，千万不要把布尔值用引号括起来。布尔值false与字符串值'false'或"false"是两回事！

下面这条语句将把变量married设置为布尔值true：

var married=true;

下面这条语句将把变量married设置为一个包含着单词"true"的字符串：

var married="true";

2.4.2数组

如果想用一个变量来存储一组值，就需要使用数组(array)。

数组是由名字相同的多个值构成的一个集合，集合中的每个值都是这个数组的元素(element)。例如，我们可以用名为beatles的变量来保存Beatles乐队全体四位成员的姓名。

在JavaScript脚本中，数组要用关键字Array来声明。在声明数组的同时，程序员还可以对这个数组的元素个数，也就是这个数组的长度(length)做出规定：

var beatles=Array(4);

有时我们无法提前预知某个数组最终会容纳多少个元素。这没有关系，JavaScript并不要求在声明数组时必须给出它的元素个数，我们完全可以在声明数组时不给出明确具体的元素个数：

var beatles=Array();

向数组中添加元素的操作称为填充(populating)，它类似于变量的赋值操作，但在填充数组时，不仅需要给出新元素的值，还要在数组中为新元素指定存放位置，这个位置要通过数组名加下标(index)给出。数组里的每个元素都有一个相应的下标。在语句中，下标值必须放在方括号内，如下所示：

array[index]=element;

现在来填充刚才声明的beatles数组。我们将按照人们在提到Beatles乐队成员时的传统顺序(即John,Paul,George和Ringo)进行。首先是第一个下标和元素：

beatles[0]="John";

以0而不是1作为第一个下标值多少会让人感到有些不习惯，但JavaScript语言就是这么规定的，所以我们这里只能这么做。这一点很重要，但也很容易被忘记，初出茅庐的程序员在刚接触JavaScript数组时经常在这个问题上犯错误。

下面是声明和填充beatles数组的全过程：

var beatles=Array(4);

beatles[0]="John";

beatles[1]="Paul";

beatles[2]="George";

beatles[3]="Ringo";

有了上面这些代码，我们即可在脚本中通过下标值“2”(beatles[2])来检索取值为“George”的元素了。请注意，beatles数组的长度是4,但它最后一个元素的下标却是3。因为数组下标是从0开始计数的，你们或许需要一些时间才能习惯这一事实。

像上面这样填充数组未免有些麻烦。这里有一种相对简单的方式：在声明数组的同时对它进行填充。这么做时别忘记了用逗号把各个元素分隔开：

上面这条语句会为beatles数组中的每个元素自动分配一个下标：第一个下标是0,第二个是1,依此类推。因此，beatles[2]仍将对应于取值为“George”的元素。

我们甚至用不着明确地表明我们是在创建数组。事实上，只需用一对方括号把各个元素的初始值括起来就足以创建出我们想要的数组了：

var beatles = [ " John " , " Paul " , " George " , " Ringo " ];

不过，在声明或填充数组时写出Array关键字是一个良好的编程习惯，这可以提高JavaScript脚本的可读性，并让我们一眼就看出哪些变量是数组。

数组元素不必非得是字符串。可以把一些布尔值存入一个数组，还可以把一组数值存入一个数组：

var years = Array( 1940 , 1941 , 1942 , 1943 );

甚至可以把三种数据类型混在一起存入一个数组：

var lennon = Array( " John " , 1940 , false );

数组元素还可以是变量：

var name = " John " ;
beatles[ 0 ] = name;

这将把beatles数组的第一个元素赋值为“John”；

数组元素的值还可以是另一个数组的元素。下面两条语句将把beatles数组的第二个元素赋值为“Paul”：

var names = Array( " Ringo " , " John " , " George " , " Paul " );
beatles[ 1 ] = names[ 3 ];

事实上，数组还可以包含其他的数组！数组中的任何一个元素都可以把一个数组作为它的值：

现在，beatles数组的第一个元素的值是另外一个数组。要想获得那个数组里的某个元素的值，我们需要使用更多的方括号。beastles[0][0]的值是“John”，beatles[0][1]的值是1940,beatles[0][2]的值是false。

这是一种功能相当强大的存储和获取信息的方式，但如果我们不得不记住每个下标数字的话，编程工作将是一种非常痛苦和麻烦的体验。还好，有一种办法可以让我们以更可读的方式去填充数组。

关联数组

beastles数组是数值数组的一个典型例子：每个元素的下标是一个数字，每增加一个元素，这个数字就依次增加1。第一个元素的下标是0,第二个元素的下标 1,依此类推。

如果在填充数组时只给出了元素的值，这个数组就将是一个数值数组，它的各个元素的下标将被自动创建和刷新。

我们可以通过在填充数组时为每个新元素明确地给出下标的方式来改变这种默认的行为。在为新元素给出下标时，不必局限于整数数字。数组下标可以是字符串：

这称为关联数组(associative array)。用关联数组来代替数值数组的做法意味着，我们可以通过各元素的名字而不是一个下标数字来引用它们。这可以大大提高脚本的可读性。

您好：
    当您在阅读和使用我所提供的各种内容的时候，我非常感谢，您的阅读已是对我最大的支持。
    我更希望您能给予我更多的支持。
    1.希望您帮助我宣传我的博客，让更多的人知道它，从中获益(别忘记了提醒他们帮我点点广告，嘿嘿)。
    2.希望您能多提出宝贵意见，包括我所提供的内容中的错误，建设性的意见，更希望获得哪些方面的帮助，您的经验之谈等等。
    3.更希望能得到您经济上的支持。

我博客上面的内容均属于个人的经验，所有的内容均为开源内容，允许您用于任何非商业用途，并不以付费为前提，如果您觉得在阅读和使用我所提供的各种内容的过程中，您得到了帮助，并能在经济上给予我支持，我将感激不尽。

您可以通过点击我网站上的广告表示对我的支持。

网址：JavaScript DOM编程艺术(2－1) https://www.yuejiaxmz.com/news/view/959492

⬅️上一篇：人文艺术学院举办“AI融入日常：

➡️下一篇：【预售】日文原版 An Extr

JavaScript DOM编程艺术(2－1)

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享