第二章 JavaScript基本语法

2.1 js编写位置

我们目前学习的JS全都是客户端的JS，也就是说全都是需要在

浏览器中运行的，所以我们我们的JS代码全都需要在网页中编

写。

•我们的JS代码需要编写到标签中。

•我们一般将script标签写到head中。（和style标签有点像）

•属性：

– type：默认值text/javascript可以不写，不写也是这个值。

– src：当需要引入一个外部的js文件时，使用该属性指向文件的地址。

创建一个html文件。

•在html文件的的head标签中创建一个script标签，并编写如下代码。

//控制浏览器弹出一个警告框

alert("哥，你真帅呀！");

//让计算机在页面中输出一个内容，document.write()，

document.write("看我出不出来~~~")

//向控制台输出一个内容

console.log("你猜我在哪儿呢？");

02.js编写位置

可以将js代码编写到外部js文件中，然后通过script标签引入

写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制

推荐使用的方式

script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略

如果需要则可以在创建一个新的script标签用于编写内部代码

alert("我是内部的JS代码");

可以将js代码编写到script标签

alert("我是script标签中的代码！！");

可以将js代码编写到标签的onclick属性中

当我们点击按钮时，js代码才会执行

虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

点我一下

可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码

你也点我一下

你也点我一下

2.2注释

注释中的内容不会被解析器解析执行，但是会在源码中显示，我们一般会使用注释对程序中的内容进行解释。

•JS中的注释和Java的的一致，分为两种：

– 单行注释： //注释内容

– 多行注释： /*注释内容*/

JavaScript是严格区分大小写的，也就是abc和Abc会被解析器

认为是两个不同的东西

2.JS中每一条语句以分号(;)结尾，- 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写

3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

2.3字面量和变量

1)字面量

都是一些不可改变的值。例如1,2,3,4,5，hello

2)变量

变量的作用是给某一个值或对象标注名称。

•比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。

•变量的声明：

– 使用var关键字声明一个变量。

– var a;

•变量的赋值：

– 使用=为变量赋值。

– a=123;

•声明和赋值同时进行：

– var a = 123;

2.4标识符

所谓标识符，就是指变量、 函数、属性的名字， 或函数的参数。

•标识符可以是按照下列格式规则组合起来的一或多个字符：

– 第一个字符必须是一个字母、下划线（ _ ） 或一个美元符号（ $ ） 。

– 其他字符可以是字母、 下划线、美元符号或数字。

•按照惯例， ECMAScript 标识符采用驼峰命名法。

•但是要注意的是JavaScript中的标识符不能是关键字和保留字

符。

标识符一般采用驼峰命名法

-首字母小写，每个单词的开头字母大写，其余字母小写helloWorld xxxYyyZzz

2.5关键字和保留字符

关键字

•保留字符

其他不建议使用的标识符

2.5数据类型

数据类型决定了一个数据的特征，比如： 123和”123”，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。

•对于不同的数据类型我们在进行操作时会有很大的不同。

•JavaScript中一共有5种基本数据类型：

– 字符串型（ String）

– 数值型（ Number）

– 布尔型（ Boolean）

– null型（ Null）

– undefined型（ Undefined）

•这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

1)type of运算符

使用typeof操作符可以用来检查一个变量的数据类型。

•使用方式： typeof 数据，例如 typeof 123。

•返回结果：

– typeof 数值 number

– typeof 字符串 string

– typeof 布尔型 boolean

– typeof undefined undefined

– typeof null object

2)String

String用于表示一个字符序列，即字符串。

•字符串需要使用 ’ 或“ 括起来。

•转义字符：

将其他数值转换为字符串有三种方式： toString()、 String()、

拼串。

3)Number

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，范围是：

± 1.7976931348623157e+308

如果超过了这个范围，则会返回±Infinity。

NaN， 即非数值（ Not a Number）是一个特殊的数值， JS中当对数值进行计算时没有结果返回，则返回NaN。

js中可以表示数字的最大值Number.MAX_VALUE

布尔型)

布尔型也被称为逻辑值类型或者真假值类型。

•布尔型只能够取真（ true） 和假（ false）两种数值。 除此以外，其他的值都不被支持。

•其他的数据类型也可以通过Boolean()函数转换为布尔类型。

•转换规则：

5)Undefined

Undefined类型只有一个值，即特殊的 undefined 。

•在使用 var 声明变量但未对其加以初始化时，这个变量的值就

是 undefined。例如：

– var message;

– message 的值就是 undefined。

•需要注意的是typeof对没有初始化和没有声明的变量都会返回

undefined。

6)Null

Null类型是第二个只有一个值的数据类型，这个特殊的值是

null 。

•从语义上看null表示的是一个空的对象。所以使用typeof检查

null会返回一个Object。

•undefined值实际上是由null值衍生出来的，所以如果比较

undefined和null是否相等，会返回true；

2.6数值的转换

强制类型转换指将一个数据类型转换为其他数据类型

有三个函数可以把非数值转换为数值： Number()、 parseInt()

和parseFloat()。

将其他数据类型转换为string

①调用被转换数据类型的toString()方法, 该方法不会影响到原变量，它会将转换的结果返回,但是注意：null和undefined这两个值没有toString()方法，如果调用他们的方法会报错

②调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 "null"，将 undefined 直接转换为 "undefined"

将其他数据类型转换为Number

①使用Number()函数

- 字符串 --> 数字

1.如果是纯数字的字符串，则直接将其转换为数字

2.如果字符串中有非数字的内容，则转换为NaN

3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

- 布尔 --> 数字

true 转成 1

false 转成 0

- null --> 数字 0

- undefined --> 数字 NaN

②这种方式专门用来对付字符串, parseInt() 把一个字符串转换为一个整数，parseFloat() 把一个字符串转换为一个浮点数

a ="123567a567px";

//调用parseInt()函数将a转换为Number

/*

* parseInt()可以将一个字符串中的有效的整数内容去出来，

* 然后转换为Number

*/

a = parseInt(a);

console.log(a); //"123567"

/*

* 如果对非String使用parseInt()或parseFloat()

* 它会先将其转换为String然后在操作

*/

a = true;

a = parseInt(a);

console.log(a);// NaN

/*

将其他的数据类型转换为Boolean

- 使用Boolean()函数

- 数字 ---> 布尔

- 除了0和NaN，其余的都是true

- 字符串 ---> 布尔

- 除了空串，其余的都是true

- null和undefined都会转换为false

- 对象也会转换为true

*/

2.7其他进制的数字

在js中，如果需要表示16进制的数字，则需要以0x开头

如果需要表示8进制的数字，则需要以0开头

如果要要表示2进制的数字，则需要以0b开头

但是不是所有的浏览器都支持

2.8运算符

JS中为我们定义了一套对数据进行运算的运算符。这其中包括：算术运算符、位运算符、关系运算符等。

算术运算符顾名思义就是进行算数操作的运算符

JS中为我们提供了多种算数运算符

算数运算符：

+ 对两个值进行加法运算并返回结果

- 对两个值进行减法运算并返回结果

* 对两个值进行乘法运算并返回结果

/ 对两个值进行除法运算并返回结果

% 对两个值进行取余运算并返回结果

- 除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算。

- 而做加法运算时，如果是两个字符串进行相加，则会做拼串操作，将两个字符连接为一个字符串。

- 任何值和字符串做加法，都会先转换为字符串，然后再拼串

2)一元运算符

只需要一个操作数

①一元的+:就是正号，不会对值产生任何影响，但是可以将一个非数字转换为数字。例如:var a=true;a=+a;

②一元的-:就是负号，可以对一个数字进行符号位取反。例子：var a=10;a=-a;

3)自增和自减

①自增

自增可以使变量在原值的基础上自增1

自增使用 ++

自增可以使用 前++（++a）后++(a++)

无论是++a 还是 a++都会立即使原变量自增1

不同的是++a和a++的值是不同的，

++a的值是变量的新值（自增后的值）

a++的值是变量的原值（自增前的值）

②自减

自减可以使变量在原值的基础上自减1

自减使用 --

自减可以使用 前--（--a）后--(a--)

无论是--a 还是 a--都会立即使原变量自减1

同的是--a和a--的值是不同的，

--a的值是变量的新值（自减后的值）

a--的值是变量的原值（自减前的值）

逻辑运算符

一般情况下使用逻辑运算符会返回一个布尔值。

•逻辑运算符主要有三个：非、与、或。

•在进行逻辑操作时如果操作数不是布尔类型则会将其转换

布尔类型在进行计算。

•非使用符号 ! 表示，与使用 && 表示，或使用 || 表示。

①非运算(!)

非运算可以对一个布尔值进行取反，true变false false边true

当对非布尔值使用!时，会先将其转换为布尔值然后再取反

我们可以利用!来将其他的数据类型转换为布尔值

与运算

&&可以对符号两侧的值进行与运算

只有两端的值都为true时，才会返回true。只要有一个false就会返回false。

与是一个短路的与，如果第一个值是false，则不再检查第二个值

对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值

规则：

如果第一个值为false，则返回第一个值，例如result = 0 && 2;返回0

如果第一个值为true，则返回第二个值,例如varresult = 5 && 6;返回6

③或运算(||)

||可以对符号两侧的值进行或运算

只有两端都是false时，才会返回false。只要有一个true，就会返回true。

或是一个短路的或，如果第一个值是true，则不再检查第二个值

对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值

规则：

如果第一个值为true，则返回第一个值

如果第一个值为false，则返回第二个值

赋值运算符

简单的赋值操作符由等于号 （ = ） 表示，

其作用就是把右侧的值赋给左侧的变量。

•如果在等于号左边添加加减乘除等运算符，

就可以完成复合赋值操作。

•+=、 *=、 -=、 /=、 %=

•比如： a+=10和a=a+10是一样的。

=(等于)

可以将符号右侧的值赋值给符号左侧的变量

+=(+等于)

a += 5 等价于 a = a + 5

-=(减等于)

a -= 5 等价于 a = a - 5

*=(乘等于)

a *= 5 等价于 a = a * 5

/=(除等于)

a /= 5 等价于 a = a / 5

%=(模等于)

a %= 5 等价于 a = a % 5

6)关系运算符

小于（ ） 、小于等于（ =）

这几个关系运算符用于对两个值进行比较，比较的规则与我们

在数学课上所学的一样。

•这几个运算符都返回一个布尔值。用来表示两个值之间的关系

是否成立。

5> 10 false

5

5

5>= 10 false

如果比较的两个值都是字符串，此时会比较字符串的Unicode编码，而不会转换为Number。

7)unicode编码表

在网页中使用Unicode编码&#编码; 这里的编码需要的是10进制

☠

8)相等运算符

JS中使用==来判断两个值是否相等，如果相等则返回true。

使用!=来表示两个值是否不相等，如果不等则返回true。

•注意： null和undefined使用==判断时是相等的。

全等

除了==以外， JS中还提供了===。

•===表示全等，他和==基本一致，不过==在判断两个值

时会进行自动的类型转换，而===不会。

•也就是说”55”==55会返回true，而”55”===55会返回

false；

•同样我们还有!==表示不全等，同样比较时不会自动转型。

•也就是说”55”!=55会返回false， 而”55”!==55会返回

true；

9)条件运算符

条件运算符也称为三元运算符。通常运算符写为?:。

•这个运算符需要三个操作数，第一个操作数在?之前，

第二个操作数在?和:之间，第三个操作数在:之后。

•例如：x > 0 ? x : -x// 求x的绝对值

•上边的例子，首先会执行x>0，如果返回true则执行冒

号左边的代码，并将结果返回，这里就是返回x本身，

如果返回false则执行冒号右边的代码，并将结果返回

语法：条件表达式?语句1:语句2;

- 执行的流程：

条件运算符在执行时，首先对条件表达式进行求值，

如果该值为true，则执行语句1，并返回执行结果

如果该值为false，则执行语句2，并返回执行结果

如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算

逗号

•使用逗号可以在一条语句中执行多次操作。

•比如： var num1=1,num2=2, num3=3;

•使用逗号运算符分隔的语句会从左到右顺序依次执行。

10)运算符的优先级

2.9语句和代码块

①语句

前边我所说表达式和运算符等内容可以理解成是我们一门语言中的单词，短语。

•而语句（statement）就是我们这个语言中一句一句完整的话了。

•语句是一个程序的基本单位， JS的程序就是由一条一条语句构成的，每一条语句使用;结尾。

•JS中的语句默认是由上至下顺序执行的，但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

②代码块

•代码块是在大括号 {} 中所写的语句，以此将多条语句的集合视为一条语句来使用。

•例如：

{

var a = 123;

a++;

alert(a);

}

我们一般使用代码块将需要一起执行的语句进行分组，需要注意的是，代码块结尾不需要加分号。