Tony学前端：JS开篇，新的征程！

本文共有2800字，预计阅读时间：20分钟

本系列累计57100字

在文章末尾可以观看本课的视频

我们先来复习一下上次学习了哪些知识：

垂直对齐：

vertical-align、对行内元素有效。

溢出设置：

overflow、滚动条的设置。

颜色：

RGB颜色、HSL颜色、十六进制、透明。

单位与尺寸：

rm的使用、最小宽度的使用。

到目前为止，我们已经学习了HTML与CSS。在第一讲的时候，曾经说过前端三要素：HTML、CSS与JS。

我们曾经用造房子来形容做网页，HTML负责结构、CSS负责装饰、而 JS则让房子与你可以互动起来，譬如按下开关灯就亮了，打开水龙头就来水了。

而在网页上总离不开人与页面的互动，点击商品加入购物车、保存信息时进行信息验证、甚至是小游戏，这些都是JS实现功能的范畴。

现在，我们就开始学习JS。

首先，我们来说下JS是什么，能做什么？

JS的全称是JavaScript，是一种脚本语言，是一种可插入HTML页面的编程代码。这里有两点要注意：

该语言与Java语言毫无关系。

脚本这个词源自于表演戏剧、拍摄电影等所依据的底本，或者是剧本。这意味着写好的JS会像剧本一样被浏览器按照预定的逻辑执行，如果剧本写错的话，那自然整个剧就表演砸了，就出bug啦！

js能实现的功能很多，譬如：

改变HTML元素、以及其样式。

对事件作出反应。

能做逻辑处理、计算。

图形显示与处理。

能与后台交互。

全世界各处的前端开发者都在用JS，每天都有大量的新功能被开发，因此JS可以说是十八般武艺样样精通。

既然我们要编写JS，那自然就得知道JS写在哪里？

JS代码必须写在

在正式学习JS之前，我们还有几个概念要预先了解。

1、JS语句

JS代码是JS语句的序列，浏览器会按照语句顺序来执行，通常我们在每个语句结尾处加分号（;）表示结束。如以下两句JS语句用分号结束：

alert（"Hello JS!"）;

alert（"你好，JS！"）;

当然也可以不加分号表示结束，但是这种写法不推荐。

另外，JS语句是区分大小写的！

2、JS代码块

在一些结构中，我们会用到代码块，代码块是多条语句的组合，写在花括号内，如以下的两句语句组成了代码块：

function show()

{

alert（"Hello JS!"）;

alert（"你好，JS!"）;

}

function的用法我们会在以后详细学习，此处只是演示代码块。

3、JS注释

我们在HTML的时候学习过注释，有时我们编写代码时要记录一些信息，例如算法、出处、为什么要这样写等等，此类信息不需要浏览器来执行，那么便需要写成注释。

JS注释分为单行注释与多行注释，单行注释以双斜杠（//）开头，多行注释以单斜杠星号（/*）开始，以星号单斜杠结束（*/），以下分别演示单行注释与多行注释：

alert（"Hello JS!"）;//此处弹出信息

/*

以下代码弹出两个信息

第一个为英文

第二个为中文

*/

alert（"Hello JS!"）;

alert（"你好，JS!"）;

接下来我们学习变量的概念，在任何编程语言中都会存在变量，JS也不例外。

什么是变量？简单来说变量就是数据存储的容器，这个说法有些抽象，我们用数学知识来举个例子。

假设有以下这个方程组，相信大家都能解出未知数Z的值为7。

x=3

y=4

z=x+y

仔细思考一下我们的解题过程。首先这个方程组里有三个未知数：x、y、z，其中设置了x等于3，y等于4。那么从编程的角度来理解的话，就是我们声明了三个变量：x、y、z，随后把3赋值给x，把4赋值给y，那么此时x就存储了数字3、而y存储了数字4。

接下来我们计算x与y的和，此时是等于7，随后把7赋值给z，因此最后z就存储了数字7，也就可以说z等于7。

因此，对于变量有很重要的两个概念：声明与赋值。

声明变量：

声明变量实际上就是创建变量，在JS中使用关键字var加变量名称来实现，如刚才的方程组有三个变量，那我们在JS中可以这样声明：

var x;

var y;

var z;

在JS中，变量名的使用是有一定要求的：

要以字母开头。

也可以使用$和_开头，但是不建议。

变量名大小写敏感，因此y和Y是两个不同的变量。

另外，我们在实际项目中尽量使用有实际意义的名称来为变量命名，千万别到处都是a1、a2、a3。。。之类的变量名。

多个变量的声明可以在一个语句中，中间用逗号隔开，因此刚才的变量声明我们可以这样写：

var x,y,z;

赋值：

让变量等于某个特定值称为赋值，JS里用等号（=）来进行赋值，等号左侧为变量名，右侧为值，因此之前方程组的例子，赋值部分可以这样写：

var x,y,z;

x=3;

y=4;

z=x+y;

在大多数编程语言中，变量必须先声明再使用，而JS则可以不声明变量便使用，因此可以直接写：

x=3;

y=4;

z=x+y;

但是这种方法非常不推荐！我们还是要养成先声明变量再使用的习惯。

我们还可以在声明变量的同时变赋值，这样可以进一步减少代码的行数：

var x=3,y=4,z;

z=x+y;

甚至在声明的时候就可以直接计算：

var x=3,y=4,z=x+y;

此句执行完毕后，z已经被赋值为7。但是这样写会破坏代码的结构，因此并不建议这样写。另外要注意的是，以下的语句是错误的：

var z=x+y,x=3,y=4;

因为当计算z时，x与y还并未赋值，自然就无法计算出x+y。

我们不但可以把数字赋值给变量，还可以把其他类型的数据赋值给变量，这样就使得变量具有不同的数据类型，因此接下来我们学习数据类型。

在之前的例子中，x、y和z这三个变量均被赋值为数字，因此这三个变量都是数值型。我们也可以将变量赋值为其他类型，譬如一个字符串：

var x='你好';

此时x就是一个字符串，因此x的数据类型便是字符型了。不同的数据类型会有不同的操作方法。譬如数值型就有很多计算方法，而类似于将内容全部变成大写字母的方法则肯定只属于字符型了。

在js中，支持的数据类型有：

数值型

字符型

布尔型

Undefined

Null

以上几种称之为基本数据类型或者值类型。

数组

时间类型

正则表达式

函数

对象

以上几种称为复杂数据类型或者引用类型。

数据类型是任何一种编程语言的基础，因此接下来我们将会详细学习每一种数据类型。

要注意的是，js的变量是在赋值后决定其数据类型的，并且还会随着赋值的变化而改变其数据类型，如以下代码：

var x;

x=0;

x='你好';

我们声明了一个变量x，首先让其等于0，由于0是一个数字，那么此时x就是数值型。随后又将x设置为“你好”，由于“你好”是一个字符串，因此x又改变为字符型。

由于变量的数据类型是可以改变的，因此这被称为动态类型。JS是一门动态类型的编程语言。

与动态类型相对的是静态类型，静态类型的编程语言在声明变量的时候就得指定其数据类型，随后赋值的时候也只能赋予该数据类型给变量。很多编程语言（尤其是早期的）为静态类型的。

后面暂时没有了，我们来总结一下，今天主要学习了：

JS概念：

什么是JS、JS能做什么、JS的书写位置。

JS代码：

JS语句、代码块、注释。

变量：

什么是变量，变量的声明、变量的赋值。

数据类型：

多种数据类型、静态类型与动态类型。

今天我们开始学习JS，JS是一种编程语言，学好JS也可以为学习其他编程语言打好基础。JS内容很多，而且也比HTML与CSS更有难度，只有熟练掌握了JS，才能编写出真正的网页。娃娃们加油，我们的目标是星辰大海！

点击观看本课视频，也可以在腾讯视频上搜索“Tony学前端”：