Javascript教程（二）——JavaScript基础语法

JS的输出语句

//向浏览器弹出一个警告框
alert("Hello world");

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

//向控制台输出一个message
console.log("Hello world");

JS的编写位置

1、写到标签的属性中，属于结构与行为耦合，不方便维护，不太推荐

<!--写到onclick属性中,当我们点击时，js代码才会执行-->
<button onclick="alert('msg');">点我</button>

<!--写到href属性中,当我们点击超链接时，js代码会执行-->
<a href="javascript:alert('msg');">点我</a>

<!--此时点击无反应-->
<a href="javascript:;">点我</a>

2、在script标签中写

<script type="text/javascript">
	alert("msg");
</script>

3、编写到外部js文件中，然后通过script标签引入，推荐使用。

script标签一旦用于引入外部文件了，此时再在script标签内部写东西是无效的，就算写了，浏览器也会忽略。
如有需要，再建立如2的script标签。

<script type="text/javascript" src="js/script.js"></script>

JS注意事项

1、JS中严格区分大小写。
2、JS代码每一条语句后要以（;）结尾。

如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
而且有时候，浏览器会加错分号，所以在开发中分号必须写

3、JS中会忽略多个空格和换行，所以我们可以利用空格和换行，使代码美观清晰。

JS基础语法

1、字面量与变量

（1）字面量：一些不可改变的值

比如：1 2 3 4 5
字面量可以直接使用，但是我们一般不直接使用

（2）变量：可以用来保存字面量，而变量的值是可以任意改变的

变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量。
声明变量 var a;
为变量赋值 a = 123;（没有赋值的时候，console.log(a)会是undefined）
声明和赋值也可以同时进行：var b = 789;

2、标识符

在JS中所有可以由我们自主命名的都可以称为标识符，例如：变量名，函数名，属性名
命名一个标识符需要遵守以下规则：

1、标识符中可以含有字母，数字，_ ，$
2、标识符不能以数字开头
3、标识符不能是ES中的关键字或保留字
4、标识符一般采用驼峰命名法

JS底层保存标识符时，实际上采用的时Unicode编码，所以理论上讲，所有utf-8中含有的内容都可以用作标识符。（所以其实中文也可以用作变量名……但正常人一般不这么做……）

主要就是变量的定义，变量类型，if…else，while，for…这些，学过其他语言的JS语法很好掌握

3、JS中的数据类型（6种）

（1）String 字符串

JS中单双引号都可以，但是嵌套引号时，要么单引号嵌套双引号，要么双引号嵌套单引号，不能双引号嵌套双引号或是单引号嵌套单引号。
引号中可以用转义字符:

\"    表示  "
\'    表示  '
\n    表示换行
\t    制表符
\\    表示   \
……

（2）Number 数值

JS中所有的数值都是Number类型（包括整数和浮点数）
如何区分var a = 123; var b = "123"呢？
使用typeof运算符来检查一个变量的类型，检查字符串时，会返回string，检查数值时，会返回number
语法：typeof 变量
Number.MAX_VALUE：JS中可以表示的数字的最大值为：1.79769031348623157e+308
Number.MAX_VALUE：JS中可以表示的最小的小数（0以上的最小值）为：5e-324
如果使用Number表示的数字超过了最大值，则会返回Infinity，表示正无穷

//Infinity 正无穷
//-Infinity 负无穷

var a = Infinity
console.log(typeof Infinity); //返回“number”

NaN 是一个特殊的数字，表示Not a number; 使用typeof检查NaN，返回也是number。
JS中整数的运算基本可保证精确
JS进行浮点运算，可能得到一个不精确的结果，所以千万不要用JS进行对精确度要求较高的运算

（3）Boolean 布尔值

true & false
使用typeof检查布尔值，返回是boolean

（4）Null （空值）

Null类型的值只有一个，就是null

var a = null;

console.log(a); //输出"null"
console.log(typeof a); //输出"object"

null这个值专门用来表示一个为空的对象

（5）Undefined （未定义）

Undefined类型的值只有一个，就是undefined
当声明一个变量，但是并不给变量赋值时候，它的值就是undefined

（6）Object 对象（在下一节中详细讲解）

4、JS中的强制数据类型转换

是指将数据类型，转为String，Number或Boolean类型。

（1）将其他数据类型转为String

方式一：
- 调用被转换数据类型的toString()方法:a.toString()
- 该方法不会影响到原变量，只会将转换的结果返回
- 但是注意：null和undefined这两个值没有toString()方法，调了就会报错
方式二：
- 调用String()函数，并将被转换的数据，作为参数传递给函数:String(a)
- 调用String()函数做强转时，
  - 对于Number和Boolean类型的值，实际就是调用的toString()方法
  - 但是对于null和undefined，是直接转换为"null"和"undefined"

（2）将其他数据类型转为Number

方式一：
- 调用Number()函数，并将被转换的数据，作为参数传递给函数:Number(a)
  - 字符串 —> 数字
    1、如果是纯数字的字符串，则直接转为数字
    2、如果含有非数字的内容，则转为NaN
    3、如果字符串是空串或是全为空格，则转换为0
  - 布尔 —> 数字
    true 转成 1
    false 转成 0
  - null —> 数字 0
  - undefined —> 数字 NaN
方式二：这种方式专门用来对付字符串
- parseInt() 把一个字符串转换为一个整数
  - 可以将一个字符串中有效的整数内容取出来，其他内容舍去，然后转为Number
  - 只会取非法字符前的整数内容，小数点也不行，就比如
    - a = "123.456; a = parseInt(a); "a也是会变成123的
- parseFloat() 把一个字符串转换为一个浮点数
  - 与parseInt() 类似，不同的是它可以获得有效的小数部分
- 如果对非String类型的值使用parseInt()和parseFloat()
  - JS会先将其转换为String，然后再按以上操作。

（3）将其他数据类型转为Boolean

使用Boolean()函数
- 数字 —> 布尔
  - 除了0和NaN，其余都是true
- 字符串 —> 布尔
  - 除了空串，其余都是true
- null和undefined都会转换为false
- 对象也会转换为true

5、运算符

算数运算符

逻辑操作符

JS中为我们提供了三种逻辑运算符

(1) ! 非

!可以用来对一个值进行非运算
所谓非运算就是值对一个布尔值进行取反操作，
- true变false，false变true
如果对一个值进行两次取反，它不会变化
如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反
- 所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值
- 可以为一个任意数据类型取两次反，来将其转换为布尔值，
- 原理和Boolean()函数一样

(2) && 与

&&可以对符号两侧的值进行与运算并返回结果
运算规则
- 两个值中只要有一个值为false就返回false，
  - 只有两个值都为true时，才会返回true
- JS中的“与”属于短路的与，
  - 如果第一个值为false，则不会看第二个值

(3) || 或

||可以对符号两侧的值进行或运算并返回结果
运算规则：
- 两个值中只要有一个true，就返回true
  - 如果两个值都为false，才返回false
- JS中的“或”属于短路的或
  - 如果第一个值为true，则不会检查第二个值

(4) && || 非布尔值的情况

对于非布尔值进行与或运算时
- 会先将其转换为布尔值，然后再运算，并且返回原值
与运算：
- 如果第一个值为true，则必然返回第二个值
- 如果第一个值为false，则直接返回第一个值
或运算:
- 如果第一个值为true，则直接返回第一个值
- 如果第一个值为false，则返回第二个值

赋值运算符

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

关系运算符

小于（<）、大于（>）、小于等于（<=）和大于等于（>=）
这几个运算符都返回一个布尔值。用来表示两个值之间的关系是否成立。
- – 5 > 10 false
- – 5 < 10 true
- – 5 <= 10 true
- – 5 >= 10 false

相等 == & 不等 !=

全等

除了== 以外，JS中还提供了 ===。
=== 表示全等，他和 == 基本一致，不过 == 在判断两个值时会进行自动的类型转换，而===不会。
也就是说 “55”==55 会返回 true ，而 “55”===55 会返回false；
同样我们还有 !== 表示不全等，同样比较时不会自动转型。
也就是说 “55”!=55 会返回false，而 “55”!==55 会返回 true；

逗号

使用逗号可以在一条语句中执行多次操作。
比如：var num1=1, num2=2, num3=3;
使用逗号运算符分隔的语句会从左到右顺序依次执行。

条件运算符

条件运算符也称为三元运算符。通常运算符写为?:。
例如：x > 0 ? x : -x // 求x的绝对值
上边的例子，首先会执行x>0
- 如果返回true则执行冒号左边的代码，并将结果返回
- 如果返回false则执行冒号右边的代码，并将结果返回

运算符优先级（表中越靠上优先级越高）

6、Unicode编码表

/*
	在字符串中使用转义字符输入Unicode编码
	\u四位编码
*/
console.log("\u2620")

/*
	在网页中使用Unicode编码
	&#编码；
	这里的编码需要的是10进制
*/
<h1>&#9760;</h1>

语句

前边我所说表达式和运算符等内容可以理解成是我们一门语言中的单词，短语。
而语句（statement）就是我们这个语言中一句一句完整的话了。
语句是一个程序的基本单位，JS的程序就是由一条一条语句构成的，每一条语句使用;结尾。
JS中的语句默认是由上至下顺序执行的，但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

代码块

我们的程序是由一条一条语句构成的
语句是按照自上向下的顺序一条一条执行的
在JS中可以使用 {} 来为语句进行分组,
- 同一个 {} 中的语句我们称为是一组语句，它们要么都执行，要么都不执行
- 一个 {} 中的语句我们也称为叫一个代码块
  - 在代码块的后边就不用再编写;了
- JS中的代码块，只具有分组的的作用，没有其他的用途
  - 代码块内部的内容，在外部是完全可见的

流程控制语句（略）

1、条件判断语句

if…else语句

2、条件分支语句

switch…case语句

3、循环语句

for循环
while循环
do…while循环

【补充知识】

prompt()函数

可以弹出一个提示框，该提示框中会带有一个文本框，
用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，
该字符串将会作为提示框的提示文字
用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
prompt()函数的返回值是String类型的
所以前面放一个+来把返回值转为Number类型