Contents hide
1. HTML, CSS和JavaScript分离开发简介
2. JavaScript语法基本概念
2.1. 注释 Comments
3. 变量
4. 数据类型
5. 运算符
5.1. 算数运算符
5.2. 赋值运算符
5.3. 比较运算符
5.4. 逻辑运算符
5.5. 数学函数

HTML, CSS和JavaScript分离开发简介

在正式进入JavaScript语法教学之前，我想稍微补充一下如何对html, css和Javascript进行分别开发。在第一章中，我编辑了一个集合了html, css和Javascript为一体的html文件：

<!DOCTYPE html>
<html>
<head>
<script>
function showTime() {
    var d = new Date();
    document.querySelector("p").innerHTML = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
}
</script>
<style>
h1 { color: red; }
p { background-color: yellow; font-size: 20px;}
</style>
</head>
<body>
<h1 onclick="showTime()">This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

如果将三种语言全部放在一起，随着网页变得复杂，很容易造成开发上的混乱，为了让文件的排版更工程化，我们可以将其中的css代码和Javascript代码提取出来，放入各自专属的文件。比如我们能将以上代码，分别放入以下三个文件：main.html, style.css, script.js

main.html

<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 onclick="showTime()">This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

style.css

h1 { color: red; }
p { background-color: yellow; font-size: 20px;}

script.js

function showTime() {
    var d = new Date();
    document.querySelector("p").innerHTML = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
}

拆分后，使用Chrome打开main.html，会弹出实现相同功能的界面，注意在html文件的<head>标签中，我们多了<script src=”script.js”></script>和<link rel=”stylesheet” href=”style.css”>这两段代码，意思就是将script.js的Javascript代码和style.css中的css代码引入html文件中。在网站的内容越来越复杂后，分开编辑html, css和Javascript可以帮助我们更有效地管理代码库。

虽然在接下来几章的教学中，JavaScript的语法才是我们的重点，但是了解基本的html, css和JavaScript的开发概念还是很重要的。这一章涉及到的语法非常简单，也不涉及HTML和CSS的操作，为了更方便地通过编辑代码，帮助大家理解语法，大家可以直接打开Chrome的console界面，在其中进行JavaScript的代码练习。

JavaScript语法基本概念

简单来说，JavaScript程序就是一个由很多语句（statement）组成的代码库，你可以将一个代码库理解为一篇作文，而作文是由很多的句子组成的，看到下面这个JavaScript程序：

var x = 1;
var y = 2;
var sum = x + y;
console.log(sum);

这个程序由四个语句组成的，每个语句后面都紧跟着一个封号（；），代表此语句结束。这段代码的作用也很好理解，就是创建两个变量x和y，并分别给它们赋值1和2，然后将他们的数值相加，并将和赋于变量sum，然后将sum打印出来。

注释 Comments

注释就是那些用来解释代码，但不影响程序运行的内容。在JavaScript中，注释有两种，一种是单行注释，另一种是多行注释。单行注释需要跟在 // 后面，看到以下的单行注释：

var x = 1;
var y = 2;
var sum = x + y;
console.log(sum); // print sum in the console

第四行语句后面有一段 print sum in console 内容，作用就是告知读代码的人 console.log(sum); 的作用，不影响代码运行的结果。

以下是多行注释，以 /* 为开头，*/为结尾：

/*
The code below will add x and y,
then print sum in the console.
*/
var x = 1;
var y = 2;
var sum = x + y;
console.log(sum);

前四行的内容就是注释，用来解释整个代码块的作用，虽然这两段代码中的注释不一样，但是运用结果是一模一样的，注释只是起到对代码进行解释说明的作用，不会真正影响到代码的运行。

简单来说，JavaScript程序中包含了很多语句，除了简单的赋值语句，我们之后还会学习到更加复杂的语句，比如循环语句等等。接下来我们先来理解赋值语句的最基本概念：变量。

变量

计算机的本质功能就是操作数据，除了基本的数值，计算机也能处理文本、图形、音频、视频、网页等各种形式的数据。JavaScript程序主要用于操作网页，本质上也是处理数据，在JavaScript中，我们可以使用变量来存储数据，变量就好比是存储数据的容器，看到下面的代码：

var x = 5;
var y = 6;
var z = x + y;

在var x = 5;这个语句中，关键字var代表了x是一个variable（变量），然后x是变量名，等于号（=）是一个赋值符号，代表变量 x 存储了数值5。以此类推，后面两个语句代表 y 储存了数值6，z 储存了数值11。

虽然对于JavaScript变量的命名不是很严格，但也要遵循一定的原则，比如变量名最好以字母为开头，虽然也可以下划线( _ )开头，但是不推荐。要注意的是变量名对大小写敏感，所以x和X是不一样的。

当一个变量指向一个数据后，如果想要改变这个变量的内容，我们可以使用赋值符号让这个变量指向别的数据：

var x = 5;
x = "abc";

在这个代码块中，一开始 x 指向数字5，然后指向字符串”abc”，看到第二行x前面不需要var了，因为第一行var x已经将x定义为变量了，不需要重复定义。

除了一行一行地给代码赋值，我们也可以在一行代码同时给多个变量赋值：

var x = 1, y = 9;

除了正常的变量var，我们还有一些变量是恒定不变的，只要我们在变量前面加上关键字 const，那么这个变量一旦被赋值了，就不能改变了：

const PI = 3.14;
PI = 3; // Uncaught TypeError: Assignment to constant variable.

看到第二行语句会产生错误信息，提示我们一个const变量被赋值了，就不能改变了，还要注意到恒定变量的名字最好全是大写。

如果要在游览器的console中输出一个变量的值，我们可以使用console.log(variable_name);

var x = 5;
console.log(x); // 5

执行这段代码后，我们的console就会输出5。

数据类型

除了基本的数值，在JavaScript中还有其它的数据类型，主要为以下几类：字符串（String）、数字（Number）、布尔（Boolean）。

数字很好理解，数字也可以带小数点，也可以不带：

var num1 = 34.00;
var num2 = 34;

而布尔只有两个值：true 或 false，代表正或负，常常用于判断语句的条件控制。

var bool1 = true;
var bool2 = false;

另一个基本的数据类型就是字符串，以下的 str 就是一个字符串：

var str = "Good";

还有一种比较特殊的数据类型叫数组（array），数值就是多个数据的集合，以下的代码就创建了一个数组cars：

var cars = ["BMW", "Honda", "Ferrari"];

这个cars包含了三个字符串”BMW”, “Honda”, “Ferrari”，如果要拿到数值中的值，我们可以通过数组下标来取，数组下标从0开始，n – 1为最后一个元素的下标，在这个cars中，下标就是0, 1, 2，意味着第一个元素的下标为0，最后一个元素下标为2：

console.log(cars[0]); // BMW
console.log(cars[2]); // Ferrari

最后一点要注意的，如果我们不给变量赋值，那么变量则为undefined，代表什么都没有。而另外一个特殊的值为null，代表这个变量为空值。

var undefined_var; // undefined
var null_var = null; // null

运算符

算数运算符

为了让数据之间的交互更加灵活，我们可以使用各种运算符对数据进行操作。比如我们想要实现将两数的相乘，就可以使用星号 * 运算符：

var x = 25;
var y = 2;
x * y; // 50

其中星号（*）代表将符号两边的数值进行相乘，其实运算符很简单，只要我们能理解不同符号之间代表的不同含义，就能正确使用这些运算符了。以下是常用算数运算符的整理：

运算符解释例子
+加法x + y;
– 减法x – y;
* 乘法x * y;
**幂 exponentiationx ** 2;
/除法x / 5;
% 取模5 % 2; // 1
++自增x++;
—自减x–;

赋值运算符

理解了基本的运算符之后，我们在给变量赋值的时候，也可以使用这些基本的运算符进行赋值，使变量的赋值方式更灵活，比如下面 x 和 y 的值一模一样，但是因为y使用了赋值运算符，代码看起来更加简洁：

var x = 5;
var x = x + 5; // 10
var y = 5;
y += 5; // 10

以下是赋值运算符的表格

赋值运算符例子相同代码
=x = yx = y
+=x += yx = x + y
-= x -= yx = x – y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
**=x **= yx = x **y

比较运算符

如果我们要比较不同数值之间的大小和关系，我们可以使用比较运算符来实现，比如我们想要查看一个变量是否比另一个变量小，可以使用以下代码：

var x = 5;
var y = 10;
x < y; // true

注意比较运算符返回的结果是true或者false，代表了比较结果，以下是比较运算符的表格

比较运算符解释例子
==相等x == y
===相等（数值和数据类型）x === y
!=不等于x != y
!==不等于（数值和数据类型）x !== y
>大于x > y
<小于x < y
>=大于等于x >= y
<=小于等于x <=

逻辑运算符

除了这些基本的运算符，我们可以使用逻辑运算符对true和false进行逻辑比较，比如我们要比对两个布尔的和：

var x = true;
var y = false;
true && false; // false
逻辑运算符解释例子
&&和true && false; // false
||或true || false; // true
!否!true; // false

数学函数

除了使用基本的运算符比较，我们也可以使用函数对数值进行对比和操作，关于函数的概念我会在之后的教程中详细讲解，大家只要理解一下就好了：

Math.min(2, 3, 4); // 2 
Math.max(8, 13, 1); // 13

以上Math是一个内置对象，而min和max是这个对象的函数，然后2, 3, 4就是放入这个函数的参数，min的功能就是找出参数中的最小值，关于对象和函数，我们会在之后的章节细讲。

以上就是基本的变量和数据类型的介绍，这些是JavaScript储存数据的基本单位，从下一章开始，我们就开始学习如何使用条件判断和循环，让我们的程序更聪明吧。