JavaScript基础前奏

JavaScript嵌入页面的方式：

1.页面script标签写入

<script type="text/javascript">
	//单行注释
	/*多行注释*/
	var a = "你好";
	console.log(a)			//页面检查中的console控制台显示
	document.write(a)		//直接显示在页面中
	alert(a)				//弹窗显示
</script>

2外部引入

// 通过script标签的src属性引入外部js文件
// 注意：如果使用外部引入js文件的方式，则在标签当中不能再写js代码，就算写入不会生效

<script type="text/javascript" src="js文件路径">
	// alert("如果在script标签中再写alert，那么这个弹窗是不会生效的")
</script>

// 一般外链引入，放在代码的最后面

行间样式，当点击它的时候会触发

<input type="botton" value="登陆" onclick="alert('登陆成功!');">

一条JavaScript语句应以一个";"作为结尾，因为js是以换行符表示每条语句的结束，后期js文件可能会进行压缩，所有代码全部一行连接显示。

JavaScript以 var 来声明一个变量

<script>
	var box = 123;			//使用关键字 var 声明一个变量
	var a = 34, b = "abc" , c="68"		//可以使用var来一次定义多个变量，中间用逗号隔开
	alert(box)
</script>

变量，函数，属性值的命名规范：

由数字，字母，下划线和$组成；
不能以数字开头；
区分大小写；
不能使用系统关键字；

数值类型

boolean布尔类型：只有true和false两个数值，且字母全部小写；
数值类型：包含整数，浮点数，二进制，八进制，十六进制，特殊的NaN;

<script>
	var num = 0b11;			//js和python中都是用0b表示二进制数，
	console.log(num);			//控制台显示 3。二进制11转化为十进制就是3;
	
	//0x表示十六进制，十六进制f转为十进制是15;十六进制数的取值范围是0-9,a-f
	num = 0xff;            	 //ff转十进制15+15*16**1=255
	console.log(num);
</script>

NaN：Not a Number。非数值，是一个特殊的值，用于表示一个本来要返回数值的操作未返回数值的情况。NaN与自身不相等（NaN不与任何值相等）
isNaN() is not a number 函数用来判断这个值到底是不是NaN。

如果它是一个数，返回的false，如果不是一个数，返回的是true;
var num = "12";
console.log(num, isNaN(num));

字符串类型，只要是单引号或双引号括起来的字符，都是字符串类型

如果数值类型+号的前面是字符串类型，那么两个数值就会拼接，而不是做加法，当第一个"1"和第二个1拼接的时候，会变成字符串类型的"11",第三个数值类型的1与前面的结果"11"拼接，又变成"111"，到结束的时候就会成为字符串型的"1111"。

var str1 = "1"
var str2 = "true"		//这个也是字符串类型

**注意：js中字符串和数值类型可以进行拼接**
var str3 = "1“ + 1 + 1 + 1;
console.log(str3)			//显示结果为：1111

但是如果对它做减法的话，前两个拼接之后为"11"，接下来的-1操作会对之前的字符串类型"11"又变为数值类型减1，所以，“1”+1-1这里会变成10，之后都是数值类型的加法，最终结果为12

var str1 = "1" + 1 - 1 + 1 + 1;
console.log(str1); 			// 控制台显示12;

如果上一步的-1操作之后变为+“1”，那么它又是变成字符串的拼接

var str1 = "1" + 1 - 1 + '1' + 1;
console.log(str1)			// 控制台显示1011;

object 对象类型：对象，数组，null

var ob1 = {name: "张三", age: 18};		//js中没有字典类型，
console.log(ob1, typeof(ob1)); 			//控制台输出{name: "张三", age: 18};，它的类型为"object"类型
var list = [1,2,3,4];						// 这种在js中叫做数组，
console.log(list, typeof(list));			// 控制台显示索引和它所对应的值，类型也是"object"
var nu = null;						
console.log(nu, typeof(nu));				//控制台显示值为null，类型为"object"

undefined类型

**如果定义一个变量而没有给他赋值的话，那么他的值和类型就是undefined类型**
var un;
console.log(un, typeof(un));

function函数

var Func = function(){
	
};
console.log(Func);

强制数值类型转换

有 3 个函数可以把非数值转换为数值：Number()、parseInt()和 parseFloat()。

// 当字符串中包含有任意一个非数值型的字符时，Number()方法就会返回一个NaN
var str = "1abw22";
var str10 = "123";
res = Number(str)

console.log(res);				// 显示NaN;
console.log(Number(str10))			//如果字符串内都是可以转换为数值，那么结果就是123
console.log(Number(true));			//true和flase分别转换为 1 和 0；
consoe.log(Number(null));			// null转换为0；
console.log(Number(undefined));		//undefined返回NaN:

由于 Number()函数在转换字符串时比较复杂且不够合理，因此在处理整数的时候更常用的是 parseInt()。
parseInt()和parseFloat()只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN。

console.log(parseInt("123abc"))		//显示456，返回前面的整数部分
console.log(parseInt("a123bc"))		// 当第一个不是数值时，显示的是NaN;
console.log(parseInt("12ab345d"))		// 显示12， 从头开始转换，当碰到一个非数值时，那么就直接结束转换
console.log(parseInt("12.34"))		// 显示12， 碰到小数点就结束，因为小数点不能转换为数值

**也可以为parseInt()指定第二个参数，用于进制间的转换**
console.log(parseInt('101010101',2));			//314, 二进制转换

parseFloat()是用于浮点数值转换的，和 parseInt()一样，从第一位解析到非浮点数值位置。

console.log(parseFloat("123LEE"))		// 123，别的部分不转换
console.log(parseFloat('123.4.5'));		//123.4，只认一个小数点

toString()方法可以把值转换成字符串。

var box = 11;
alert(box.toString());

toString()方法一般是不需要传参的，但在数值转成字符串的时候，可以传递进制参数。
var box = 11;
var box2 = box.toString(2);			// 以二进制转换
console.log(box2, typeof(box2))  		// 以二进制转换为字符串显示 1011

转换为Boolean类型

/*为空字符串的时候，转化为boolea类型的值为false*/
var str = '"";
console.log(str, Boolean(str));
/*数值为0的时候，转化布尔也是false*/
var num = 0;
console.log(num, Boolean(num));
/*当为NaN, null或undefined， 转化布尔也是false*/
var box = null;
console.log(box Boolean(num));			//null "false"

运算符

ECMAScript 定义了 5 个算术运算符，加减乘除求模(取余)。如果在算术运算的值不是数值，那么后台会先使用 Number()转型函数将其转换为数值(隐式转换)。

var box = 1 + NaN;		//NaN，只要有一个NaN 就为 NaN
var box = 100 - true;		//99，true 转成数值为 1
var box = 100 - '';		//100，''转成了 0

用于进行比较的运算符称作为关系运算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等()，不等(!=)，全等(恒等)(=)、不全等(不恒等)(!==)

和其他运算符一样，当关系运算符操作非数值时要遵循一下规则：

两个操作数都是数值，则数值比较；
两个操作数都是字符串，则比较两个字符串对应的字符编码值；
两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；
两个操作数有一个是对象，则先调用 valueOf()方法或 toString()方法，再用结果比较；

**相等**
var box 1 == 1;				// 1 == 1返回true，将true赋值给box;
console.log(box);				// 显示结果为true

var box 1 == "1";				// 系统做隐式转换，将字符串"1"转换为1，所以结果还是true;
console.log(box);				// 显示结果为true;

**全等（恒等）**
var box 1 === "1";				// false，全等要求数值和类型都要相同

左移运算

左移运算由两个小于号表示（<<）。它把数字中的所有数位向左移动指定的数量。例如，把数字 2（等于二进制中的 10）左移 5 位，结果为 64（等于二进制中的 1000000）：

var iOld = 2;			//等于二进制 10
var iNew = iOld << 5;	//等于二进制 1000000 十进制 64

注意：在左移数位时，数字右边多出 5 个空位。左移运算用 0 填充这些空位，使结果成为完整的 32 位数字。
!左移运算保留数字的符号位。例如，如果把 -2 左移 5 位，得到的是 -64，而不是 64。“符号仍然存储在第 32 位中吗？”是的，不过这在 ECMAScript 后台进行，开发者不能直接访问第 32 个数位。即使输出二进制字符串形式的负数，显示的也是负号形式（例如，-2 将显示 -10。）

有符号右移运算

有符号右移运算符由两个大于号表示（>>）。它把 32 位数字中的所有数位整体右移，同时保留该数的符号（正号或负号）。有符号右移运算符恰好与左移运算相反。例如，把 64 右移 5 位，将变为 2：

var iOld = 64;			//等于二进制 1000000
var iNew = iOld >> 5;	//等于二进制 10 十进制 2

同样，移动数位后会造成空位。这次，空位位于数字的左侧，但位于符号位之后。ECMAScript 用符号位的值填充这些空位，创建完整的数字，如下图所示：
在这里插入图片描述

三元运算符

var num = 判断条件 ？ 条件为真时的操作 ： 条件为假时的操作;
var num = 5 > 4 ? 5 : 4; 			// 条件为真时执行？后面的操作，为假时执行：后面的操作
console.log(num);