JavaScript学习路径
Javascript基础
JS特点
–解释型语言
–类似于C和Java的语法结构
–动态语言
–基于原型的面向对象
使用
引用
<script type="text/javascript">
</script>
alert()
下面我们使用alert()写一个警告框
js一般放于head标签内
代码如下
<!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("这是第一行js代码")
</script>
</head>
<body>
</body>
</html>
运行效果如下
document.write()
下面我们使用document.write()
<!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">
</script>
</head>
<body>
</body>
</html>
效果如下
我们的body内是没有内容的，则这个document.write是写入body内的
console.log()
下面我们使用console.log向控制台输入
<!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">
console.log("在哪里出现")
</script>
</head>
<body>
</body>
</html>
效果
我们可以看到这里页面中是没有数据的，那么这个输出到哪里的呢？
我们发现它出现在开发者控制台的控制台中
如果我们将上面三个放在同一个页面会怎么样呢
这里就不放代码，直接看效果了
我们可以看到这些是按顺序进行的。
上面的三个都是输出语句
JS编写位置
我们可以将js代码编写到标签的onclick属性中
下面我们使用js来编写一个点击事件
这里放关键代码
<body>
<button onclick="alert('已点击');">点我一下</button>
</body>
下面我们来看看效果
只有当我们点击按钮时才会触发js代码，这是由于我们的onclick属性决定的。
下面我们将js代码写入超链接的herf中
如此，点击超链接时会执行js代码
<body>
<a href="javascript:alert('已点击');">点击</a>
</body>
下面我们看看效果
上面的种种，虽然js可以写在标签的属性内，但是题目属于结构与行为耦合，不方便维护，所以这里不推荐使用。
那么我们写在哪里呢？
开始时我们将js写在script标签内的。同样我们可以将js写在一个单独的文件中，引入来使用
由script标签引入
和css引入方式类似，我们在head内使用
<script src=""></script>
这样就实现了js的引入，这里就不过多说明了。
将JS写入到外部文件夹中可以在不同页面中同时引用，也可以利用到浏览器的缓存机制，这是很推荐的使用方式
Tips：script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了，浏览器也会忽略。如果需要那直接可以创建一个新的script标签
例如
<script src=""></script>
<script>***</script>
第一行是引入外部js文件，所以我们另起一个来运行
JS基本语法
JS注释
/*
~~
*/
这是多行注释，和CSS差不多，注释内容不会运行，但是可以在源码中查看
//单行注释
这是单行注释，只对其后的有作用
1.JS中严格区分大小写
2.JS中每一条语句以分号（;）结尾
但是如果我们不加分号，浏览器会自动添加，但是会消耗一些系统资源，而且有时候浏览器会错加分号，所以开发中分号必须写
*3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化
字面量和变量
字面量：一些不可以改变的值
例如：1、2、3之类
字面量是可以直接使用的，但是我们一般都不会直接使用字面量
变量：变量可以用来保存字面量，而且变量的值是可以任意改变的
变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而且我们很少直接使用字面量。也可以通过变量来描述字面量
声明变量
那么我们怎么声明变量呢？
我们使用var关键字来声明一个变量
var a;
a=123;
a=45678;
console.log(a);
上面内容是写入到script标签内的，我们看看运行效果
我们可以看到控制台输出了第二次赋值的a。
我们可以将声明和赋值同时进行
var b = 789;
var c = 975;
标识符
标识符：所有可以由我们自主命名的都可以称为标识符。
例如：变量名、函数名、属性名都属于标识符。
命名一个标识符时需要遵守如下的规则
1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或者保留字
4.标识符一般都采用驼峰命名法：首字母小写，每个单词的开头字母大写，其余字母小写
数据类型
数据类型值得就是字面量的类型
在JS中一共有六种数据类型
String字符串
Number数值
Boolean布尔值
Null空值
Undefined未定义
Object对象
其中String Number Boolean Null Undefined属于基本数据类型，而Object属于引用数据类型
String字符串
在JS中字符串要引号引起来
使用双引号或单引号都可以，但是不能混着用
引号不能嵌套：双引号不能放双引号，单引号不能放单引号
var str = "hello";
在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用\转义
var str = "我说：\"今天天气真不错！\"";
\"表示"
\'表示'
\n表示换行
\t表示制表符
\\表示\
Number
在JS中所有的数值都是Number类型，包括整数和浮点数（小数）
其中
var a = "123";
var b = 123;
上面两个不是同一个东西，a为字符串123，b为数字。
那么我们如何检查这类现象呢？
我们使用typeof检查
语法
typeof 变量
typeof a
但是这样是无法输出结果的，所以我们都使用控制台输出
console.log(typeof a);
这样我们就可以在控制台看到类型。
JS中我们可以表示的数字的最大值为
Number.MAX_VALUE
我们来看看值为多少
上面为我们JS的最大值输出结果
如果我们使用最大值平方，那么他会输出Infinity表示无穷
使用typeof检查Infinity同样会返回Number
如果我们计算如下
a = "abc" * "bcd";
console.log(a);
他会输出什么呢？
结果为NAN
NAN是一个特殊的数字，表示Not A Number不是一个数字
如果a=NAN那么检查会输出什么呢
他也会输出number。
既然有最大值，那么就会有最小值，这个最小值不是负的最大值而是另外一种
我们令a = Number.MIN_VALUE;
这里输出结果为5e-324他依然为正数，所以这不是一般我们所理解的最小值，而是零以上的最小值。
布尔值
布尔值只有两个，主要用来做逻辑判断
true表示真
false表示假
使用typeof检查布尔值还会返回boolean
Null和Undefined
Null类型的值只有一个，就是null
null这个值专门用来表示一个为空的对象
使用typeof检查一个null值会返回object
Undefined类型值只有一个，就是undefined
当声明一个变量，但是不给变量赋值时，它的值就是undefined
使用typeof检查一个undefined时也会返回一个undefined
强制类型转换
String
强制类型转换：将一个数据类型强制转换为其他的数据类型，类型转换主要指，将其他的数据类型转换为String、Number、Boolean
那么我们怎么将其他数据类型转为String呢？
法一：
调用被转换数据类型的toString()方法，这个方法不会影响到原变量
举例
var a = 123;
var b = a.toString();
console.log(typeof b);
console.log(b);
输出结果如图
这里我们可以看到数据类型成功转换，
那么我i吗如果不想另创新值，我们可以直接使用a = a.toString();来转换，效果是一样的
Tips：null和undefined是没有toString()方法，如果调用则会报错
法二：
调用String()函数并将被转换的数据作为参数传递给函数。
a = 123
a = String(a);
输出结果是和法一相同的
但是这种方法可使null和undefined转换为字符串
Number
调用Number()函数将值转换为Number类型
如果我们被转换的为字母之类的呢，转换后输出值为NaN
str–>数字
如果是纯数字的字符串，则直接将其转换为数字
如果字符串内含有非数字的内容，则转为NaN
如果字符串是一个空串或者是一个全是空格字符则转换为0
布尔–>数字
true转为1
false转为0
null–>数字 0
undefined–>数字NaN
法二
这种专门对付字符串
parseInt()把一个字符串转换为一个整数
parseFloat()把一个字符串转换为一个浮点数
parseInt()可以将一个字符串中有效整数内容取出来
同样parseFloat()他获得有效小数例如123.236.21则会筛出123.236会忽略后面.21因为他不是有效小数
其他进制的数字
如果需要16进制数字，则需以0x开头
eg：a = 0x10;则输出结果为16
如果a =0xff则输出255
如果需要以8进制数字则以0开头
如果表示2进制数字则以0b开头，但是不是所有的浏览器都是支持的
像070之类的字符串，有些浏览器会当成8进制数转换有些会以10进制转换那么我们怎么解决呢
a = "070"
a = parseInt(a,10); //10表示10进制
可以在parseInt()中传递一个第二参数，来指定数字的进制
布尔值
将其他数据类型转换为Boolean使用Boolean()函数
数字
var a=123
a = Boolean(a);
console.log(a);
输出结果为true，而a赋值为-123输出还是true；
输入Infinity输出依然为true而赋值为0则输出false；
综上我们知道非零为true及除了0和NaN其余都是true
字符串
除了空串其余都为true
null和undefined都会转换为false
算数运算符
运算符也叫操作符，通过运算符我们可以对一个或多个值进行运算，并获取运算结果。
例如：typeof就是运算符，可以获得一个值的类型，他会将该值的类型以字符串的形式返回。
算数运算符：
+ 可以将两个值进行加法运算并将结果返回，如果对两个字符串进行加法运算，则会做拼串操作，任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作
-
*
/
%取余
由上面加法的转换字符串操作，我们可以利用，只需要为任意的数据类型＋一个""即可将其转换为字符串，这是一种隐式类型转换
Tips：除了加法会将其余数据类型转换为字符串，其余都是转换为数字类型
一元运算符
一元运算符只需要一个操作数，例如typeof()、+正号（不会对数字产生任何影响）、-负号（可以对数字进行负号的取反），对于非数字类型的值他会先转换为数字类型然后再计算，可以对一个其他类型数据使用+，来将其转换为number，他的原理和Number()函数是一样的
自增和自减
自增为++
通过自增可以使变量在自身基础上加1
对于一个变量自增后，原变量的值会立即自增1
无论是a++还是++a都会立即使原变量值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值（自增前的值）
++a的值等于原变量的新值（自增后的值）
自减为–
和自增几乎一样这里就不赘述了
逻辑运算符
！非
&&与
||或
！
如果计算
a =!a;
那么输出结果为false
所谓非运算符就是对一个布尔值进行取反操作
true变false，false变true
如果对一个布尔值去两次反，它不会变化
如果对非布尔值运算，则会将其转换为布尔值然后取反。
所以我们可以为任意数据类型取两次反，来将其转换为布尔值原理和Boolean()一样
&&
&&可以对符号两侧值进行运算并返回结果
运算规则：
两个值中只要由一个值为false就返回false
只有两个值都为true才返回true
JS中的与属于短路与，如果第一个值为false则不会看第二个值
||
||可以对符号两侧的值进行或运算并返回结果
运算规则：
两个值中只要有一个true就返回true
如果两个值都为false才返回false
JS中的或属于短路的或
如果第一个值为true则不会检查第二个值
非布尔值的与或运算
&&和||对非布尔值运算
会先将其转换为布尔值，然后运算
&&
如果第一个值为true则必然返回第二个值
如果第一个值为false则直接返回第一个值
||
如果第一个值为true则直接返回第一个值
如果第一个值为false则返回第二个值
赋值运算符
=可以将符号右侧的值赋值给左侧的变量
+=
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
关系运算符
通过关系运算符可以比较两个值之间的大小关系
如果关系成立他会返回true，如果关系不成立则额返回false
>
判断符号左侧值是否大于右侧值
如果关系成立他会返回true，如果关系不成立则额返回false
>=
判断符号左侧的值是否大于或等于右侧的值
<
<=
注意的是
比较两个字符串时，比较的时字符串的字符编码，比较字符编码时时一位一位进行比较的
如果两位一样，则比较下一位，所以借用他来对英文排序。
比较中文是没有意义的
如果比较的两个字符串型数字，可能得到不可预期的结果
Tips：比较两个字符串型数字时，一定要转型
Unicode编码
在字符串中使用转义字符输入Unicode编码
\u四位编码
console.log("\u2620");
在网页中使用Unicode编码
&#编码；这里使用的编码需要10进制
相等运算符
相等运算符用来比较两个值是否相等
如果相等则会返回true否则返回false
==
相等运算
当使用==来比较两个值时，如果值类型不同，则会自动进行类型转换，将其转换为相同的类型然后再比较
不相等
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
使用！=来做不相等运算
不相等也会对变量进行自动类型转换，如果转换后相等它也会返回false
===
全等
用来判断两个值是否全等，他和相等类似，不同的时它不会做自动类型转换
如果两个值类型不同直接返回false
！==
不全等
用来判断两个值是否不全等，和不等类似，不同的时它不会做自动类型转换
如果两个值类型不同直接返回true
undefined衍生自null所以这两个值做相等判断时，会返回true
NaN不和任何值相等，包括他自己
可以通过isNaN()来判断一个值是否为NaN
条件运算符（三元运算符）
语法：
条件表达式？语句1：语句2；
执行流程：
条件运算符在执行时，首先对条件表达式进行求值
如果该值为true则执行语句1并返回结果
如果该值为false则执行语句2并返回结果
如果条件表达式求值结果是一个非布尔值，会将其转换为布尔值然后运算
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
