一、JS简介

1.1 学习内容

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

1.2 特点

解释型语言
类似于C和Java的语法结构
动态语言
基于原型的面向对象

二、JS入门基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        alert(" 这是一个警告框")；
        document.write("这是一个文档")；
        console.log("在控制台输出")；
    </script>
</head>
<body>
</body>
</html>

效果如下

其中 alert(" “)中输出效果为一个警告框，点击确定即可继续执行网页样式
document.write(”“)中document表示输出一个文档，write即表示在文档里面写材料
console.log(”")即表示在控制台中输入相应的材料

三、JS外部引用

注意：JS引用一般可能不成功，可以将html文件与js文件放在同一个文件夹中

3.1 JS引用与CSS引用相同

JS引用在JS的格式：script内
在Script中，如果该Script已经使用了外部引用样式，则该Script标签中的其他样式将不可使用

3.2 使用方法

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

./script.js即为写入的文件

四、JS基础-语法

JS中严格区分大小写
JS中每一条语句以分号(;)结尾

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

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

五、JS基础-字面量和变量

5.1 字面量：都是一些不可以改变的值

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

5.2 变量：变量可以用来保存字面量，而且变量的值是可以任意改变的

变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量而很少直接使用字面量
声明变量

在JS中使用var关键字来声明一个变量
示例如下：

    <script>
        var a；
        a=16；
        var b=32；
        var age=56；
    </script>

可以用两段语言定义并标识一个变量a，也可以只用一段如var b=32；
var可以用一个字母定义一个变量，也可以用一个单词如age，weight等单词，这样在下面程序的运行中可以清楚的看到变量代表什么

六、JS基础-标识符

6.1 标识符

在JS中，所有的可以由我们自主命名的都可以称为标识符例如：变量名，函数名，属性名都属于标识符

标识符规则

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

首字母小写，每个字母开头的字母大写，其余字母小写，如helloWorld xxxYyyZzz
JS底层保存标识符实际上是采用的Unicode编码，所以理论上来讲，所有的utf-8中含有的内容都可以作为标识符，中文也可以用作标识符，但一般不用中文做标识符

七、JS基础-字符串

7.1 数据类型指的就是字面量的类型

在JS中一共有六种数据类型类型

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象

7.2 各个数据类型

String 字符串

在JS中字符串需要用引号引起来
使用单引号或者双引号都可以，但是不要混着用
引号不能嵌套

引号不能被嵌套的解决方法

将最外层引号改成双引号

<script>
        str='我说："这是一个段落"'；
        alert(str)；
    </script>

在引号前面加上转译标签

    <script>
        str="我说：\"这是一个段落\""；
        alert(str)；
    </script>

Number 数值

在JS中所有的数值都是Number类型
包括整数和浮点数（小数）
JS中可以表示的数字的最大值与最小值

var b=Number.MAX_VALUE；
var c=Number.MIN_VALUE；

其中，最大值即为Number.MAX_VALUE数值为1.7976931348623157e+308
最小值即为Number.MIN_VALUE数值为5e-324(大于零的最小）
如果使用Number表示的值超过了最大值，则会返回一个Infinity

如下所示，定义的b的大小为一个最大值的平方

<script> 
        var b=Number.MAX_VALUE*Number.MAX_VALUE；
        alert(b)；
    </script>

Number相乘时出错
两个字符相乘，无法得出结果，程序得出来的就是NaN

<script> 
        a="af"*"wfhni"；
        alert(a)；
    </script>

NaN是一个特殊的数字，表示Not A Number
使用typeof A 检查一个NaN也会检查
如何使用typeof进行检查？

var a=2312；
console.log(typeof a)；

var a="WFA"；
console.log(typeof a)；

JS的运算
在JS中整数的运算基本可以保证精确但有时候会产生一些不正常的差错
所以千万不要使用JS进行对精确度比较高的计算
Boolean 布尔值
布尔值只有两个，主要用来逻辑判断
true-表示真
false-表示假

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

Null 空值
Null 类型的值只有一个，就是Null
Null专门用来表示一个为空的对象
使用typeof检查一个Null值时，会返回object
Undefined 未定义
Undefined类型的值只有一个，就是undefined
当声明一个变量，但并不给变量赋值时，它的值就是undefined

八、JS基础-强制类型转换

8.1 将其他的数据类型转换为String

方式一：调用被转换数据类型的toString()方法

var a=13

调用a的toString()方法
调用xxx的yyy()方法，就是xxx.yyy()

var a=42;
var b=a.toString();
console.log(a);
console.log(typeof a);
console.log(b);
console.log(typeof b);

该方法不会影响到原变量,它会将转换的结果返回

可知：a，b的值都为42，但a的数据类型是正常的且为number；b的数据类型为string
也可以使a直接转换成string类型，如下所示：

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

但是注意：null和undefined这两个值没有toString()方法，如果调用他们的方法，会报错

方法二：调用string()函数,并将转换的数据作为参数传递给函数

调用xxx函数一般就是xxx函数
例如调用string函数即为String()
调用alert函数即为alert()

a=null;    
a=String(a);
console.log(a);
console.log(typeof a);

使用String()函数做强制类型转换时

对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法：他会将null直接转化为“null”将undefined直接转换为“undefined”

8.2 将其他数据类型转换为Number

方式一：使用Number()函数
调用Number函数将a转换为Number类型

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

var a=123;
a = Number(a);
console.log(typeof a);

如果将字符串中有非数字内容，则会转换为NaN

var a=abc
a=Number(a);
console.log(typeof a);
console.log(a);

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

布尔→数字，true 转成 1，false 转成 2
Null→数字 0
undefined→数字 NaN

这种方式有缺陷，如a = "123px"不能表示出来

方法二：这种方式专门用来对付字符串

parseInt() 把一个字符串转换成一个整数（int整数）

parseInt()可将一个字符串中有效的整数内容取出来，然后转换为Number
例如
示例一
a = "123.456px";
a = parseInt(a);
document.write(a);
如示例一所示，小数点后面的数全部被忽略了
示例二
b = "789ald95px";
b = parseInt(b);
document.write(b);
如示例二所示，字母及字母后面的数全部被忽略了

parseFloat() 把一个字符转换成一个浮点数（ float浮点数）
parseFloat() 和parseInt()类似，但是它可以获得有效的小数

a = "123.456.789px";
a = parseFloat(a);
document.write(a);

如示例所示，a = "123.456.789px使用parseFloat() 后输出的数为123.456因为后面的.789为无效的小数值

如果对非String使用parseInt()或parseFloat() ，它会先将其转换为String然后再操作

8.3 在JS中表示其他进制

表示16进制的数字，需要以0x开头（零X）
表示8进制的数字，需要以0开头（零）

a = "070"为例，有的浏览器会将其解析为十进制的70，有的浏览器会将其解析为八进制的数
为了解决这个问题，可以在 parseInt()中传递一个第二个参数： a = parseInt(a,10)此样式中的10表示即为将a转换为10进制
事实上一般都不用到8进制，所以尽量避免这种数字前面带0的写法

表示2进制的数字，以0b开头（零b）{但不是所有的浏览器都支持2进制}

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

使用Boolean()函数

var a = 123;
a = Boolean(a);
console.log(typeof a);
console.log(a);

对于数字，除了0和NaN，其余都是true
对于字符串，除了空串，其余都是true
null和undefined都会转换为false

对象也会转换为true

九、JS基础-算数运算符

9.1 介绍

运算符也叫操作符，通过运算符可以对一个或多个值进行运算
例如：typeof就是运算符，可以来获得一个值的类型。typeof a；可以帮助我们获得a的类型它会将该值的类型以字符串的形式返回
number string boolean undefined object

9.2 算术运算符

当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算

+  
-
*
/
%

9.2.1 +运算符

+可以对两个值进行加法运算，并将结果返回。
如果对两个字符串进行加法运算，则会做拼串，即将两个字符串拼接为一个字符串并返回。
任何的值和字符串做加法运算，都会先转换为字符串然后再和字符串做拼串操作

示例
(1) Number相加

var a = 123
a = a + 456 
document.write(a)

(2) 字符串相加

var a = "123"；
a = a + "456" ；
document.write(a)；

var a = 123;
a = a + "jiaozhu" ;
document.write(a);

var a = "nanfang";
a = a + "jiaozhu" ;
document.write(a);

我们可以利用这一特点，来将一个任意的数据类型转换为String
我们只需要为任意的数据类型+一个""即可将其转换为String
这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用的String()函数

9.2.2 -运算符

可以对两个值进行减法运算，并将结果返回

9.2.3 *运算符

可以对两个值进行乘法运算

9.2.4 /运算符

可以对两个值进行除法运算

任何值做-减法乘法 /除法都会自动转换为Number
我们可以利用这一特性做隐式的类型转换
可以通过一个值-01/1来将其转换为Number
原理和Number()函数一样，使用起来更简单

9.2.5 %运算符

取模运算（取余数）

十、JS基础-一元运算符

一元运算符：只需要一个操作数

正号
正好不会对数字产生任何影响

负号负号可以对数字进行负号的取反
对于非Number类型的值，
它会将数值先转换为Number，然后再运算
可以对一个其他数据类型使用+，来将其转换为number
它的原理和Number()函数一样

十一、JS基础-自增和自减

自增：

通过自增可以使变量在自身的基础上增加1
对于一个变量自增以后，原变量的值立即自增1
自增分成两种：后++和前++（即a++和++a）
无论是a++或++a，都会立即使原变量的值自增1
不同的是a++和++a的值不同

a++的值等于原变量的值
++a的值等于原变量自增后的值

自减

通过自减可以使变量在自身的基础上减一
自减也曾分成两种：后–和前–

无论是a–或–a，都会立即使原变量的值自增1,不同的是a–和–a的值不同

a–是变量的原值（自减前的值）
–a是变量的新值（自减以后的值）

十二、JS基础-逻辑运算符(布尔值系列)

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

! ：非

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

&& ：与

&& 可以对符合两边的值进行与运算并返回结果
如果两个都是true结果就返回true
只要有一个false，结果就返回false

如果第一个值为true，会检查第二个值
如果第一个值为false，则不会检查第二个值

|| 或

||可以对符号两侧的值进行或运算并返回结果
运算规则：
两个值中只要有一个true，就会返回true
如果两个值都为false，才会返回false

JS中的或属于短路的或
第一个值为false，则继续检查第二个值，如果第一个值为true，则不会继续检查第二个值

十二、JS基础-非布尔值的与或运算

对于非布尔值进行与或运算时，会向将其转换为布尔值，然后再运算，并且返回原值

与计算
如果第一个值为true，则必然返回第二个值
如果第一个值为false，则直接返回第一个值
例如

var a = 3 && 4;
console.log("a = " + a)；

或运算
如果第一个值为true，则直接返回第一个值
如果第一个值为false，则直接返回第二个值

var a = 3 || 4;
console.log("a = " + a);

十二、JS基础-赋值运算符

可以将符号左侧的值赋给符号左边的变量
示例：

var a = 10 ,b = 12;
a = a + 5;
b  += 1 ;
console.log(a)
console.log(b)

由示例可知；

a += 5等价于 a = a + 5
a -= 5等价于 a = a - 5
a *= 5等价于 a = a * 5
a %= 5等价于 a = a % 5

十三、JS基础-关系运算符

数值的情况
通过关系运算符可以比较两个值之间的大小关系
如果关系成立它会返回true，如果关系不成立则返回false

大于号
判断符号左侧的值是否大于右侧的
如果关系成立，返回true，如果关系不成立则返回false

var a = 5 > 10
console.log("a ="+a)

大于等于>=
小于<
小于等于<=

非数值的情况

字符串与一般数字比较
示例如下

var a = 2 > true
console.log("a ="+a)
var b = 1 > true
console.log("b ="+b)

其中，这里把true按照1进行计算
任何值和NaN做任何比较都是false

如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别比较字符串中的字符的Unicode

比较字符串时，比较的是字符串的字符编码
比较字符编码时是一位一位进行比较
如果两位一样，则比较下一位，所以可以借用它来对英文字母进行排序
比较中文时没有意义
如果比较两个字符串型的数字，可能会得到不可预期的结果（注意：在比较两个字符串型的数字时，一定要转型）

十四、JS基础-Unicode编码

Unicode编码是对大部分文字编写的编码，包含各种英文，中文，甲骨文，，德语，法语，阿拉伯语甚至有☠之类的特殊符号

在script标签里输入Unicode编码
例如：console.log(“\u2620”)

以转译字符\u开头，可以在Script中给一些元素添加Unicode的转译字符，如上示例即可出现平常不会出现的☠符号

在网页中使用Unicode编码
&#编码；这里的编码需要是十进制，而本来的Unicode编码是16进制的
示例如下:
<h1>&#9760</h1>

如果想在网页（body）内部使用Unicode编码，开发者需要先用计算器手动将其转换为十进制，再进行编译

十五、JS基础-相等运算符

15.1 相等运算符

var a = 4;
console.log( a == 10);

这里用a == 10表示等于比较，等于即为==，必须用两个挨在一块的等于号表示。如果相等会返回true，否则会返回false
使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较
NaN不合任何值相等，包括它本身

即var a = NaN; console.log( a == NaN);返回结果为false

可以用isNaN()函数判断一个值是否是NaN

var a = NaN;
console.log( a == NaN);
console.log(isNaN(a))

isNaN()函数如果该值是NaN则返回true，否则返回false

15.2 不相等运算符

用来判断两个值是否不相等，如果不相等返回true，否则返回false

不相等符号：!=
不相等也会对变量进行自动的类型转换，如果转换后它相等也会返回false
全等：===
用来判断两个值是否全等，它和相等类似，不同的是它不会做类型转换
不全等：!==
用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，则直接返回true

十六、JS基础-条件运算符

条件运算符
条件运算符也叫三元运算符
语法：
条件表达式?语句1:语句2;
执行的流程：
条件运算符在执行时，首先对条件表达式进行求值
如果该值为true，则执行语句1，并返回执行结果
如果该值为false，则执行语句2，并返回执行结果
如果条件表达式的结果时一个非布尔值，则会将其先转换为布尔值然后再运算

示例原理

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

如上所示，执行语句1

实际使用

var a = 124 , b = 213;
a>b?alert("a大"):alert("b大");

可以先进行一个判断,再输出

另一种方式获取a与b中的最大值(另一种三元运算符)
比较a与b的大小

var max = c > d ? c : d;

其中c > d ?进入条件运算，c : d进行两者比较，最后将比较出的最大值赋值给max（var max =）

选出a ，b，c，中的最大值
方法一

var max = a > b ? a : b;
max = max > c ? max :c;

先将a,b,分别比较，再取a，b，中的最大值与c比较，最后输出最大值

方法二

var max = a > b ? a > c ? a : b : c > c ? b : c;

(var max = a > b ? ( a > c ? a : c ) : (b > c ? b : c);)

这种写法不推荐使用：不方便阅读

JS基础教程