JavaScript
概述
JavaScript是一种轻量级的编程语言。
基本语法
<!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>
<!--
JS代码也可以编写在外部JS文件中，通过script标签引入
写到外部文件中可以在不同的页面中同时引用，推荐使用
script标签一旦用于引入外部文件，则里面编写的代码无效
需要重新创建新的script标签
-->
<script text="javascript" src="./js/test.js"></script>
<!-- JS代码需要编写在script标签中 -->
<script text="javascript">
// 控制浏览器发出一个警告
alert("Hello JavaScript");
// 在页面中输出一个内容
// document.write() 可以向body中输出一个内容
document.write("BanQ");
// 向控制台输出内容
console.log("半晴Miko");
// JS注释
// 单行注释
/*
多行注释
注释的内容不会被执行，可以在源代码中查看
*/
/*
* 文档注释
*/
/*
注意：
JS中严格区分大小写
JS中每一条语句以分号(;)结尾，如果不写则浏览器会自动添加(不推荐)
JS中会忽略多个空格和空行
*/
// alert("BanQ");
// Alert("BanQ"); 报错
</script>
</head>
<body>
<!--
JS代码虽然可以写在标签的属性中，但是不推荐
-->
<!-- 可以将js代码编写到标签的onclick属性中 -->
<button onclick="alert('BUTTON')">按钮</button>
<!-- 也可以将js代码编写在超链接的href属性中 -->
<a href="javascript:alert('A');">超链接</a>
</body>
</html>字面量和变量和标识符
<!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 text="javascript">
/*
字面量：
指不可改变的值，例如：1,2,3,4
字面量都是可以直接使用,但是我们一般都不会直接使用字面量
变量：
指可以任意改变的，变量可以用来保存字面量，例如：a=1
可以通过变量的名称对字面量进行描述，例如 var age = 18;
*/
/*
声明变量：
使用var关键字来声明一个变量
*/
var a;
/*
给变量赋值：
如果变量还没赋值，则输出undefined
*/
a = 1;
a = 2;
// 同时声明变量和赋值
var b = 3;
var c,d = 4;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
/*
标识符
在]S中所有的可以由我们自主命名的都可以称为是标识符
例如:变量名、函数名、属性名都属于标识符
命名一个标识符时需要遵守如下的规则:
1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或者保留字
4.标识符一般都采用驼峰命名法(首字母小写，后面每个单词开头字母大写，其余小写)
JS底层保存标识符时实际上是采用的Unicode编码, 所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
*/
var a_1_$ = 1;
var myName = "BanQ";
</script>
</head>
<body>
</body>
</html>数据类型
<!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 text="javascript">
/*
数据类型：
指的就是字面量的类型
在JS中一共有6种数据类型
基本数据类型：
String 字符串
Number 数值
Boolean 布尔值
Null 空值
undefined 未定义
引用数据类型：
Object 对象
在JS中可以使用 typeof 来检查一个变量的数据类型
*/
/*
String
字符串：
在JS中字符串需要使用引号("" / '')引起来
注意 "" 和 '' 不要混用，不能嵌套
在字符串中可以使用\作为转义字符
\' 表示 '
\" 表示 "
\\ 表示 \
\t 表示 制表符
\n 表示 换行
*/
var str1 = "BanQ";
var str2 = '半晴';
var str3 = "\"半晴Miko\"";
// 加上引号表示字符串，不加表示变量
console.log(str1);
console.log(str2);
console.log(str3);
console.log('Banqin');
console.log(typeof 'Banqin'); //输出 string
/*
Number
数值：
在JS中所有的数值都是Number类型
包括整数和浮点数(小数)
Number.MAX_VALUE 在JS中表示数字的最大值
如果超出最大值则输出 Infinity 表示正无穷 -Infinity 表示负无穷
Number.MIN_VALUE 在JS中表示 大于0的最小值
如果超出最大值则输出 0
NaN是一个特殊的数字，表示Not A Number
使用typeof检查一个NaN也会返回numeber
在JS中如果使用浮点数进行运算则会得到一个不精确的结果
*/
var num1 = 1;
var num2 = 1.1;
console.log(num1);
console.log(num2);
console.log(Number.MAX_VALUE); //输出 1.7976931348623157e+308
console.log(Number.MIN_VALUE); //输出 5e-324
console.log(Number.MIN_VALUE * Number.MIN_VALUE); //输出 0
console.log(typeof NaN); //输出 numeber
console.log(typeof num2); //输出 number
console.log(0.1 + 0.2); //输出 0.30000000000000004
/*
Boolean
布尔值：
主要用来做逻辑判断
只有两个值：
true: 表示真
false: 表示假
*/
var bool1 = true;
var bool2 = false;
console.log(bool1);
console.log(bool2);
console.log(typeof bool1); //输出 boolean
/*
Null
空值：
Null类型的值只有一个，就是null
null这个值专门用来表示一个为空的对象
使用typeof检查一个null值时，会返回object
*/
var a = null;
console.log(a);
console.log(typeof a); //输出 object
/*
undefined
未定义：
undefined类型的值只有一个，就是undefined
当声明一个变量时，但没有给它赋值，则它的值就是undefined
使用typeof检查一个undefined值时，会返回undefined
*/
var b;
console.log(b);
console.log(typeof b); //输出 undefined
/*
强制类型转换
指将一个数据类型强制转换为其他的数据类型
类型转换
指将其他的数据类型，转换为String Number Boolean
将其他数据类型转换为String
1.调用被转换的数据类型的toString()方法
该方法不会影响到原变量，它会将转换的结果返回
null和undefined 没有该方法 如果使用会报错
2.调用String()函数，并将被转换的数据类型作为参数传递给函数
使用String()函数做强制类型转换时，
对于Number和Boolean实际上就是调用的toString()方法
但是对于null和undefined，就不会调用toString()方法
它会将null直接转换为"null"
它会将undefined直接转换为"undefined"
将其他数据类型转换为Number
1.调用Number()函数，并将被转换的数据类型作为参数传递给函数
字符串 -> 数字
如果是纯数字的字符串，则直接将其转换为数字
如果字符串中有非数字的内容，则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
布尔 -> 数字
true转成1
false转成0
Null -> 数字
0
undefined -> 数字
NaN
2.这种方法专门用来转换字符串
parseInt() 把一个字符串转换为一个整数
将一个字符串中的有效的整数内容取出来,然后转换为Number
可以在parseInt()中传递一个第二个参数,来指定数字的进制
例如：var a = "070";
a = parseInt(a,10); //输出 70
a = parseInt(a,8); //输出 56
parseFloat() 把一个字符串转换为一个浮点数
将一个字符串中的有效的浮点数内容取出来,然后转换为Number
如果对非String使用parseInt()或parseFloat()
它会先将其转换为String然后再操作
将其他数据类型转换为Boolean
1.调用Boolean()函数，并将被转换的数据类型作为参数传递给函数
数字 -> 布尔
除了0和NaN是false，其余的都是true
字符串 -> 布尔
除了空串是false,其余的都是true
null 和 undefined 都是false
对象也会转换为true
2.隐式类型转换:
为任意的数据类型做两次非运算，即可将其转换为布尔值
例如： var a = "hello"; a = !!a; //true
*/
var c = 123;
c = c.toString();
console.log(typeof c);//输出 string
var d = 123;
d = String(d);
console.log(typeof d);//输出 string
var e = "123";
var f = "ABC";
var g = " ";
var h = true;
var i = null;
var j = undefined;
var k = "123px";
e = Number(e);
f = Number(f);
g = Number(g);
h = Number(h);
i = Number(i);
j = Number(j);
k = parseInt(k);
console.log(e);//输出 123
console.log(f);//输出 NaN
console.log(g);//输出 0
console.log(h);//输出 1
console.log(i);//输出 0
console.log(j);//输出 NaN
console.log(k);//输出 123
/*
其他进制数：
在JS中，如果需要表示16进制的数字，则需要以0x开头
如果需要表示8进制的教字，则需要以0开头
如果要要表示2进制的数字，则需要以0b开头
但是不是所有的浏览器都支持
*/
var l = 0x123;
var m = 070;
var n = 0b10;
var o = "070"; //有些浏览器会当成8进制解析,有些会当成10进制解析
o = parseInt(o);
console.log(l);//输出 291
console.log(m);//输出 56
console.log(n);//输出 2
console.log(o);//输出 070 或者 56
</script>
</head>
<body>
</body>
</html>运算符
<!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 text="javascript">
/*
运算符:
也叫操作符, 通过运算符可以对一个或多个值进行运算,并获取运算结果
比如: typeof 就是运算符,可以来获得一个值的类型
它会将该值的类型以字符串的形式返回
number string boolean undefined object
算术运算符：
当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算
(+)
可以对两个值进行加法运算,并将结果返回
如果对两个字符串进行加法运算,则会做拼串,会将两个字符串拼接为一个字符串，并返回
任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作
我们可以利用这一特点,来将一个任意的数据类型转换为String
我们只需要为任意的数据类型+一个""即可将其转换为String
这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数
(-)
可以对两个值进行减法运算,并将结果返回
(*)
可以对两个值进行乘法运算,并将结果返回
(/)
可以对两个值进行除法运算,并将结果返回
(%)
取模运算，取余数
任何值做 - * / 运算时都会自动转换为Number
我们可以利用这一特点做隐式的类型转换
可以通过为一个值 -0 *1 /1 来将其转换为Number
原理和Number()函数一样，使用起来更加简单
*/
var a = 123;
var result = typeof a;
console.log(result);//输出 number
var b = 123;
var c = "123" + "456";
b = b + 1;
console.log(b);//输出 124
console.log(c);//输出 "123456"
/*
一元运算符
只需要一个操作数
+ 正号
正号不会对数字产生任何影响
- 负号
负号可以对数字进行负号的取反
I
对于非Number类型的值，它会将先转换为Number，然后再运算
可以对一个其他的数据类型使用+,来将其转换为number
它的原理和Number()函数一样
*/
var num1 = -1;
console.log(num1);//输出 -1
/*
自增(++)
通过自增可以使变量在自身的基础上增加1
对于一个变量自增以后,原变量的值会立即自增1
自增分成两种: 后++ 和 前++
无论是 后++ 还是 前++，都会立即使原变量的值自增1
不同的是后++ 和前++的值不同
a++的值等于原变量的值(自增前的值)
++a的值等于原变量新值(自增后的值)
自减(--)
通过自减可以使变量在自身的基础上减1
自增分成两种: 后-- 和 前--
无论是 后-- 还是 前--，都会立即使原变量的值自自减1
不同的是后-- 和前--的值不同
a--的值等于原变量的值(自减前的值)
--a的值等于原变量新值(自减后的值)
*/
var num2 = 1;
console.log(num2++);//输出 1
console.log(num2);//输出 2
console.log(++num2);//输出 3
console.log(num2);//输出 3
var num3 = 2;
console.log(num3--);//输出 2
console.log(num3);//输出 1
console.log(--num3);//输出 0
console.log(num3);//输出 0
/*
逻辑运算符
非(!)
可以用来对一个值进行非运算
所谓非运算就是值对一个布尔值进行取反操作
true变false, false变true
如果对一个值进行两次取反，它不会变化
如果对非布尔值进行元素,则会将其转换为布尔值,然后再取反
所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值
可以为一个任意数据类型取两次反，来将其转换为布尔值，
原理和Boolean()函数一样
与(&&)
&&可以对符号两侧的值进行与运算并返回结果
两个值只要有一个值为false就返回false
只有两个值都为true时,才会返回true
短路特性：
第一个值为true，会检查第二个值
第一个值为false，不会检查第二个值
或(||)
||可以对符号两侧的值进行与运算并返回结果
两个值只要有一个值为true就返回true
只有两个值都为false时,才会返回false
短路特性：
第一个值为true，不会检查第二个值
第一个值为false，会检查第二个值
&& || 非布尔值的情况
对于非布尔值进行与或运算时,
会向将其转换为布尔值,然后再运算,并返回原值
与运算: 如果两个值都为true，则返回后边的
与运算: 如果两个值中有false，则返回靠前的false
或运算: 如果第一个值为true，则直接返回第一个值
或运算: 如果第一个值为false，则直接返回第二个值
*/
var num4 = true;
console.log(!num4);// 输出 false
console.log(true && true);// 输出 true
console.log(false && true);// 输出 false
console.log(false || true);// 输出 true
console.log(false || false);// 输出 false
console.log(1 || 2);// 输出 1
console.log(1 && 2);// 输出 2
/*
赋值运算符
=
可以将符号右侧的值赋值给符号左侧的变量
+=
例如：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;
*/
var num5 = 10;
num5 += 5;
console.log(num5);//输出 15
/*
关系运算符
通过关系运算符可以比较两个值之间的大小关系
如果关系成立它会返回true，如果关系不成立则返回false
> 大于号
判断符号左侧的值是否大于右侧的值
如果关系成立,返回true，如果关系不成立则返回false
>=
判断符号左侧的值是否大于或者等于右侧的值
如果关系成立,返回true，如果关系不成立则返回false
<
判断符号左侧的值是否小于右侧的值
如果关系成立,返回true，如果关系不成立则返回false
<=
判断符号左侧的值是否小于或者等于右侧的值
如果关系成立,返回true，如果关系不成立则返回false
非数值的情况：
对于非数值进行比较时,会将其转换为数字然后在比较
如栗符号两侧的值都是字符串时，不会将其转换为数字进行比较
而会分别比较字符串中字符的Uhicode编码
比较字符编码时是一位一位进行比较
如果两位一样,则比较下一位
任何值和NaN做任何比较都是false
*/
console.log(2 > 1);//输出 true
console.log(2 >= 2);//输出 true
console.log(2 < 2);//输出 false
console.log(2 <= 2);//输出 true
/*
在网页中使用Unicode编码
&#编码;这里的编码需要的是10进制
<h1>਼</h1>
在字符串中使用转义字符输入Unicode编码
\u四位编码
*/
/*
相等运算符
相等运算符用来比较两个值是否相等
如果相等会返回true,否则返回false
使用 == 来做相等运算
当使用==来比较两个值时，如果值的类型不同,
则会自动进行类型转换,将其转换为相同的类型然后再比较
undefined衍生自null 所以这两个值做相等判断时,会返回true
NaN不和任何值相等
可以通过isNaN()函数来判断一个值是否是NaN
如果该值是NaN则返回true，否则返回false
使用 != 来做不相等运算
不相等用来判断两个值是否不相等
如果不相等返回true，否则返回false
不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
使用 === 来做全等运算
用来判断两个值是否全等,它和相等类似,不同的是它不会做自动类型转换
如果两个值的类型不同,直接返回false
使用 !== 来做不全等运算
用来判断两个值是否不全等,它和不等类似,不同的是它不会做自动类型转换
如果两个值的类型不同,直接返回false
*/
console.log(1 == 1);//输出 true
console.log(1 != 1);//输出 false
console.log(1 === 1);//输出 true
console.log(1 !== 1);//输出 false
/*
条件运算符
也叫做三元运算符
语法：
条件表达式 ? 语句1 : 语句2;
执行的流程:
条件运算符在执行时,首先对条件表达式进行求值
如果该值为true，则执行语句1，并返回执行结果
如果该值为false，则执行语句2，并返回执行结果
如果条件的表达式的求值结果是一个非布尔值，
会将其转换为布尔值然后再运算
*/
console.log(2 > 1 ? "yes" : "no");//输出 yes
/*
,运算符
使用,可以分割多个语句,一般可以在声明多个变量时使用
*/
var num6, num7 = 1;
/*
运算符的优先级
在JS中有一个运算符优先级的表，
在表中越靠上优先级越高,优先级越高越优先计算，
如果优先级一样，则从左往右计算
可以使用()来改变优先级
*/
</script>
</head>
<body>
</body>
</html>