JavaScript DOM编程艺术学习心得系列 ——(三)JavaScript语法之准备、语法

在这一部分我们将简要复习一下JavaScript语法,并介绍其中最重要的一些概念。

1. 准备工作

编写 JavaScript 脚本不需要任何特殊的软件,一个普通的文本编辑器和一个 Web浏览器就足够了。
用 JavaScript 编写的代码必须通过 HTML/XHTML 文档才能执行。有两种方式可以做到这点。
第一种方式是将 JavaScript 代码放到文档< head >标签中的< script >标签之间:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        JavaScript goes here...
    </script>
</head>
<body>
    Mark-up goes here...
</body>
</html>

一种更好的方式是把 JavaScript 代码存为一个扩展名为 .js 的独立文件。典型做法是在文档的< head >部分放一个< script >标签,并把它的 src 属性指向该文件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="file.js"></script>
</head>
<body>
    Mark-up goes here...
</body>
</html>

但还有一个更好的做法,把< script >标签放到 HTML 文档的最后,< /body >标签之前:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Mark-up goes here...
    <script src="file.js"></script>
</body>
</html>

这样能够使浏览器更快地加载页面(后面我们会详细讨论这个问题,可能会很后)。
注:前文的例子中的< script >标签没有包含传统的 type = “text/javascript” 属性,是因为脚本默认是 JavaScript,所以没有必要制定这个属性。
如果打算实践的话,可以用文本编译器创建两个文件(HTML编译器个人推荐 VS Code)。先创建一个 HTML 或 XHTML 文件,记得保存为 test.html 重要的是 .html ,这种名称。如果改变了 file.js 或 test.html 中的内容,保存后在浏览器中刷新就可以看到更新后效果。

2. 语法

英语是一种解释性语言,在我们阅读和处理英语的文字时,我们自己就是一个英语解释器,只要遵守英语的语法规则就可以理解语言想要表达的意思。这些语言结构方面的各项规则就称之为“语法”。是跟书面的英语一样,程序语言也有自己的语法,而 JavaScript 的语法与 Java 和 C++ 语言的语法非常相似。

2.1 语句

用 JavaScript 编写的脚本都由一系列指令构成,这些指令叫做语句。只有按照正确的语法编写的语句才能得到正确的解释。语句是构成任何一个脚本的基本单位。
在 JavaScript 中,程序员只需要把各条语句放在不同的行上就可以分隔它们:

first statement
second statement

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

first statement; second statement;

我们建议在每条语句的末尾都加上一个分号,这是一种良好的编程习惯:

first statement;
second statement;

这样做会让代码更容易阅读,让每条语句独占一行的做法能更容易跟踪 JavaScript 脚本的执行顺序。

2.2 注释

有时,你可能会想在脚本中添加一些会被 JavaScript 解释器忽略的信息,用来供自己参考或提醒自己,这时你就需要注释了。
在 JavaScript 中添加注释的方法有很多,你可以像下面这样:

// 自我提醒:有注释是好事

但是请注意,这种方式不能跨越多行,即:

// 自我提醒:
有注释是好事

像上面这样话,第二行是不会注释掉的。如果有多行注释的话,你需要像下面这样:

// 自我提醒:
// 有注释是好事

之前说过注释的方法很多,你也可以像下面这样:

/*自我提醒:
有注释是好事*/

这种方法适合大段的注释,方便多了。你还可以使用 HTML 风格的注释:

<!-- 这是 JavaScript 中的注释

(奶奶的,为啥我试了不好使,莫不是这书骗我)
但是这种方法只适用于单行注释,如果是用在 HTML 文档中,你还需要使用“–>”来结束注释:(但是 HTML 的是好使的)

<!-- 这是 HTML 中的注释 -->

建议大家在 JavaScript 脚本中用“//”来注释单行,用“/*”注释多行。

2.3 变量

在生活中,有些东西是不变的,比如人的出生日期、性别等(别抬杠),有些是会变的,比如人的心情、年龄这种。我们把会发生变化的东西称为变量。
把值存入变量的操作称为赋值(assignment)。
在 JavaScript 中你可以像下面这样赋值:

mood = "happy";
age = 33;

一个变量被赋值之后,我们就说这个变量包含这个值。比如现在,变量 mood 就包含值"happy",我们可以像下面这样通过一个弹出式警告窗口来观察变量中得值:

alert(mood);
alert(age);

有一点对于学过高级语言的同学来说很神奇的事,JavaScript 允许程序员对变量直接赋值而无需提前声明。虽然 JavaScript 没有强制要求程序员必须提前声明变量,但提前声明变量是一种良好的编程习惯。下面的语句对变量 mood 和 age 做出了声明:

var mood;
var age;

你可以不用像上面这样一次一个一行的声明,你可以用一条语句一次声明多个变量:

var mood, age;

你甚至可以把声明和赋值一起进行:

var mood = "happy", age = 33;

其实这样是最有效率的。在 JavaScript 语言里,变量和其他语法元素的名字都是区分字母大小写的。mood、Mood、mOOd、mOod 是四个变量。并且,JavaScript 语法不允许变量中包含空格或标点符号(美元符号“$”除外),像下面这样将导致语法错误:

var my mood = "happy";

JavaScript 变量名中允许包含字母、数字、美元符号以及下划线(但第一个字符不允许是数字)。如果你想让比较长的变量名更容易阅读,可以像下面这样加上一个下划线:

var my_mood = "happy";

你也可以使用驼峰格式:

var myMood = "happy";

值得一提,驼峰格式是函数名、方法名和对象属性名命名的首选格式。

2.4 数据类型

有些同学可能已经发现了一些问题,为什么 JavaScrip 在声明变量时没有声明变量的数据类型呢?因为 JavaScrip 是弱类型语言,不需要声明数据类型,程序员可以在任意阶段改变变量的数据类型。
下面,我们一起来复习一下 JavaScrip 中最重要的几种数据类型。

2.4.1 字符串

字符串由零个或多个字符构成。字符包括但不限于字母、数字、标点符号和空格。字符串必须包在引号里,单引号、双引号都可以,下面两条语句含义完全相同:

var mood = "happy";
var mood = 'happy';

当你使用的字符串中包含单引号时就要用双引号来包住它,当你使用的字符串中有双引号时就要用单引号来包住它,下面举一个双引号包住单引号的例子:

var mood = "don't ask";

如果你想要在字符串中包含单引号或双引号时使用同样的引号来包住它们,那么你就需要用""来对引号字符进行转义,如下:

var mood = 'don\'t ask';
var mood1 = "don\"t ask";
2.4.2 数值

在 JavaScrip 中想给一个变量赋一个数值,不需要限定他是一个整数,可以赋浮点数,即带小数点的数,也可以赋负数,负浮点数也可以:

var num = 11.23;
var num1 = -30;
var num_2 = -33.3;
2.4.3 布尔值

布尔(boolean)类型只有两个可选值——true 或 false。在 JavaScrip 中赋布尔值时需要注意的是,千万不要把布尔值用引号括起来:

var num = true; //这是布尔值true
var num = "true"; //这是字符串true

2.5 数组

字符串、数值、布尔值都是标量(scalar)。如果某个变量是标量,它在任意时刻都只能有一个值。如果想用一个变量来存储一组值,就需要使用数组(array)。
数组是指用一个变量表示一个值的集合,集合中的每个值都是这个数组的一个元素(element)。在 JavaScrip 中,数组可以用 Array 关键字声明,值得一提的是,在 JavaScrip 中声明数组时可以不给出数组中元素的个数,甚至我们都不用明确的表示我们在创建数组,只要用方括号把各个元素的初始值括起来就够了:

var beatles = Array(4);
var beatles_1 = Array();
var beatles_2 = ["小明", 1997, false];

向数组中添加元素的操作称为填充(populating)。在填充数组时,不仅需要给出新元素的值,还需要给出新元素在数组中的存放位置,这个位置就是数组的下标(index)。下面给出一个填充过程:

var beatles = Array(4);
var beatles[0] = "小明";
var beatles[1] = "小红";
var beatles[2] = "小刚";
var beatles[3] = "小力";

有一点要对没有学习过高级程序语言的同学说一下,在数组中,如果一个数组有n个元素,那么这个数组的第一个元素的下标是0,最后一个元素的下标是n-1。结合上面创建数组的例子我们可以知道,填充数组时,不用这么一板一眼,可以很方便的填充:

var num = [1999, 1998, 1997, 1996];

数组元素还可以是变量:

var name = "小明";
var num[0] = name;

这时 num 数组的第一个元素就是“小明”了,数组元素的值还可以是另一个数组的元素:

var num = [1999, 2001, 2003];
var number[0] = num[2];

此时,number[0]中的元素就是2003。数组甚至还可以包含其他数组:

var num = [1999 , 2000 , 2006]
var number = [];
number[0] = num;

这时number[0][0]的值就是1999。

2.5.1 关联数组

如果在填充数组时只给出了元素的值,这个数组就将是一个传统数组,他的各个元素的下标将被自动创建和刷新。
其实,在为新元素给出下标时,不必局限于使用整数数字,可以用字符串:

var num = [];
num["name"] = "God";
num["year"] = "is";
num["living"] = "dead";

这样的数组叫关联数组。由于可以使用字符串来代替数字,使得程序员不用记住大量的数字,因而代码更具有可读性。但是,这种用法不是一个好习惯,不推荐大家使用。本质上,创建关联数组时,你创建的是 Array 对象的属性。在 JavaScript 中,所有的变量实际上都是某种类型的对象。比如,一个布尔值就是一个 Boolean 类型的对象,一个数组就是一个 Array 类型的对象。

2.6 对象

与数组类似,对象也是使用一个名字表示一组值。对象的每个值都是对象的一个属性。若要创建对象,如下:

var lennon = Object();
lennon.say = "God";
lennon.say_1 = "is";
lennon.say_2 = "dead";

还有一种更为简便的创建对象的方式:

var lennon = {say:"God" , say_1:"is" , say_2:"dead"};

属性名与 JavaScript 变量的命名规则有相同之处,属性值可以是任何 JavaScript 值,包括其它对象。
用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。这大大提高了脚本的可读性。比如:

var lennon = {say:"God" , say_1:"is" , say_2:"dead"};
var beatles = Array();
beatles[0] = lennon;

现在,我们可以不用通过很多的数来获得想要的元素了,而且我们要用 beatles[0].say 得到值“God”,而不能用 beatles[0][0] 。
在此基础上,我们还可以这样:

var lennon = {say:"God" , say_1:"is" , say_2:"dead"};
var beatles = {};
beatles.first = lennon;

这时,beatles.first.say 的值为“God”。

3.没什么用的废话

今天这篇文章写完,就一个感觉,好长啊~,真的好长啊,nm6000字了,我感到自己踏入了一个深坑。但是这种心得的总结效果还是不错的,加深印象不说,我感觉自己对书中内容的理解也通透了一些,一些些。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值