web大前端之旅Ⅵ

JavaScript简介

起源

由于九十年代末期网速极慢，向后端发送请求浏览器需长时间得到响应，故创立JavaScript用于处理网页中的前端验证–检查用户输入的内容是否符合一定的规则。

JavaScript的组成

ECMAScript是一个标准，需要由各个厂商去实现，不同的浏览器厂商对该标准会有不同的实现。

浏览器	JavaScript实现方式
FireFox	SpiderMonkey
Internet Explorer	JScript/Chakra
Safari	JavaScriptCore
Chrome	v8
Carakan	Carakan

完整的JavaScript由以下三部分构成

JavaScript的特点

• 解释型语言

优势：不需要编译，直接执行
劣势：运行速度较慢

• 类似于 C 和 Java 的语法结构
• 动态语言
• 基于原型的面向对象
• 严格区分大小写
• 每一条语句以分号(;)结尾
• JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

JS的使用

弹出警告框

    <script>
        alert("404 not found!")
    </script>

输出内容

    <script>
        document.write("What 'Error 404' means and how to fix it")
    </script>

控制台输出

    <script>
        console.log("The browser then displays this error code.")
    </script>

JS编写位置

• 将JS代码编写到外部JS文件中，通过script标签引入（推荐）

<script src="./script.js"></script>

script标签一旦引入外部文件，编写的代码会被忽略，解决方法是可再创建一个新的script标签用于编写内部代码

• 将JS代码写入HTML中的script标签内，编写进onclick属性中

JS基本语法

单行注释：//注释内容

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

字面量：不可改变的值，如：6、null、"access"等

变量：值可以任意改变，可以用来保存字面量对字面量进行描述

变量声明：

var a;

变量赋值：

a = 666;

声明和赋值同时进行：

var a = 666；

标识符

在JS中可以指给变量、函数、属性或函数的参数自主命名
命名规则

1. 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
2. 其它字符可以是字母、下划线、美元符号或数字。
3. 按照惯例，ECMAScript 标识符采用驼峰命名法。
4. 标识符不能是关键字和保留字符。
   
   
   JS底层保存标识符时实际上是采用的Unicode编码，
   所以理论上讲，所有的utf-8中含有的内容都可以作为标识符

关键字：
保留字：

数据类型

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

String字符串
String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。
引号不能嵌套

var str = "hello world";

转义字符：

转义字符	含义
\n	换行
\t	制表
\b	空格
\r	回车
\\	斜杠
\’	单引号
\"	双引号

Number
Number 类型用来表示整数和浮点数
可以利用typeof运算符检查一个变量的类型

var a = 666;
var b = "666";
// console.log(typeof a);
console.log(typeof b);

Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity

最大值：Number.Max_VALUE
+1.7976931348623157e+308
最小值：Number.Min_VALUE
-1.7976931348623157e+308
0以上的最小值：5e-324
正无穷：Infinity
负无穷：-Infinity

NaN 是一个特殊的数字，表示Not A Number

Boolean
用于做逻辑判断

• true
• false

// var bool = true;
var bool = false;
console.log(typeof bool);

Null
只有一个值的数据类型，这个特殊的值是 null
从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object

Undefined
只有一个值的数据类型，这个特殊的值是 undefined
当声明一个变量，但不是给变量赋值时，它的值就是undefined
使用typeof对没有初始化和没有声明的变量，会返回undefined

强制类型转换

将其它的数据类型转换为String、Number、Boolean

• 转换为String类型

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

var a = 666;
var a = a.toString();
console.log(typeof a)
console.log(a);

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

var a = 666;
var a = String(a);
console.log(typeof a)
console.log(a);

• 转换为Number
  1.使用Number()函数

var a = "666";
var a = Number(a);
console.log(typeof a)
console.log(a);

2. 针对字符串，parseInt() 把一个字符串转换为一个整数

var a = "666px";
var a = parseInt(a);
console.log(typeof a)
console.log(a);

3. parseFloat() 把一个字符串转换为一个浮点数

var a = "666.99px";
var a = parseFloat(a);
console.log(typeof a)
console.log(a);

在JS中如果需要表示16进制的数字，需以0x开头
表示8进制的数字，需以0开头
表示2进制的数字，需以0b开头

如"070"字符串，可能会当成八进制或十进制解析
可在parseInt()中传递一个第二个参数，来指定数字的进制

var a = "070";
// var a = parseInt(a,8);
var a = parseInt(a,10);
console.log(typeof a)
console.log(a);

• 转换为Boolean类型

运算符

通过运算符可以对一个或多个值进行运算并获取运算结果
比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回（number string boolean undefined object）

• 算数运算符（可进行隐式转换）

用于表达式计算

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取余
++	自增
- -	自减

注：任何的值和字符串做加法运算，会先转换为字符串，然后拼串

无论是a++ 还是++a，都会立即使原变量的值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值（自增前的值）
++a的值等于原变量新值（自增后的值）
自减同理

• 一元运算符

对于非Number类型的值
它会先转换为Number，然后再运算
可以对一个其他的数据类型使用+，将其转换为number
原理与Number()函数一样

a = true;
var a = 2;
a = +a;
console.log(a);
console.log(typeof a);

• 关系运算符

逻辑语句中使用，以测定变量或值是否相等

运算符	描述
>	大于
<	小于
>=	大于或等于
<=	小于或等于

1. 任何值和NaN作任何比较结果都是false
2. 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较
   而会分别比较字符串中字符的Unicode编码
3. 比较字符编码是一位一位比较
   如果两位一样，则比较下一位，所以借用它来对英文字符进行排序
4. 比较中文时没有意义
5. 如果比较的两个字符串类型的数字，可能会超出预期的效果
   ！！必须进行转型

• 赋值运算符

用于给 JavaScript 变量赋值

运算符	例子	等同于
=	x=y
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

• 逻辑运算符

用于测定变量或值之间的逻辑

运算符	描述	例子
&&	and 与	(x < 10 && y > 1) 为 true
ΙΙ	or 或	(x==5 ΙΙ y==5) 为 false
!	not 非	!(x==y) 为 true

注：

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

2. && || 非布尔值的情况
   对于非布尔值进行与或运算时
   会将其转换为布尔值，然后再运算，并且返回原值
   对于&&只要出现false
   返回前边的
   反之亦然
   对于||只要出现true
   返回前边的
   第一个值为false则直接返回第二个值

var result = 3 && 6;
console.log("result="+result);

var result = NaN && true;
console.log("result="+result);

• 相等运算符

比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false

1. 使用 == 来做相等运算
   当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较
   
   NaN不和任何值相等，包括它本身（可以通过isNaN()函数来判断一个值是否是NaN）
2. 使用 != 来做不相等运算
   不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
3. 使用 === 来做全等运算
   用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
4. 使用 !== 来做不全等运算
   用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

• 条件运算符
  语法：条件表达式?语句1:语句2;
  执行流程：

1. 首先对表达式进行求值
2. 判断
   如果该值为true，则执行语句1，并返回执行结果
   如果为false，则执行语句2，并返回执行结果
   如果条件的表达式的求值结果是一个非布尔值
   会将其转换为布尔值然后再运算

true?alert("1"):alert("2");

false?alert("1"):alert("2");