JavaScript基本介绍

JavaScript介绍

一、JavaScript 概述

1. 介绍 :

简称JS,是浏览器解释型语言,直接交给浏览器,由浏览器的
解释引擎运行(脚本语言)

2. 作用 :

实现页面动态效果和用户交互.

3. 组成

1. 核心语法 ECMAScript
2. 内置对象 (数组，日期，正则，字符串)
3. 外置对象 (BOM DOM)
	DOM (重点 Document Object Model)
	BOM (Browser Object Model)
3. 自定义对象

4. JS语法规范

1. JS严格区分大小写
2. JS可以使用英文;作为语句结束的标志
3. JS注释
	// 单行注释
	/* 多行注释 */

二、JS的使用方式

在HTML文档中引入JS代码,有三种方式

1. 通过元素绑定事件的方式引入JS代码

事件 : 用户行为触发的操作
事件处理：元素监听用户的行为并且做出响应
语法 :
	<元素 事件函数名="JS代码语句">
	事件函数 :
		鼠标单击事件 onclick
	JS 代码 :
		弹框显示信息   alert('文本');
		控制台输出信息 console.log('文本信息');

2. 通过标签书写JS代码,标签内容就是JS

代码.可以书写在任意位置,书写任意多次.
注意 :
浏览器遵循从上到下执行代码,书写位置可能会影响效果
JS代码语句 :
1. prompt(''); 带有输入框的弹框,可用来接收用户输入
2. document.write(''); 在网页中写入内容
	使用 :
	1. 普通的书写方式,按照从上到下的执行顺序,依次在网页的相应位置插入内容,可以识别标签
	2. 如果以元素绑定事件的方式,在页面中写入内容,相当于重写页面

3. 引入外部的JS文件

1. 创建外部的.js文件
2. 在HTML文档中使用<script src="url"></script>引入
3. 如果<script></script>做外部文件的引入操作,标签内部就不能再写JS代码，二选一

三、输出语句

alter('')			普通警告框
prompt('')			带有输入框的弹框,可用来接收用户输入
console.log('')		控制台输出
document.write('')
	* 代码书写位置即为写入位置，最终输出到网页中能够识别标签语法
	* 如果使用绑定事件的方式动态写入，会造成页面重写

四、JS 的变量与常量

1. 变量

1. 在程序运行过程中可以随时修改的数据
2. 语法 :
		var 变量名; //使用关键字var声明变量
		变量 = 值;  //为变量赋值
3. 使用 :
	1. var 关键字可以省略,但是一般不建议省略,关系到变量的的作用域
	2. 变量如果只使用var关键字声明,不赋值,默认为undefined
	3. 如果变量未使用var关键字声明,也不赋值,会报错
4. 命名规范
	1. 变量名,常量名,函数名由数字,字母,下划线,$组成,不能以数字开头，尽量见名知意,禁止与JS的保留字和关键字冲突
		et :
			var function while for in each switch case 
			break default continue class name new Number
			String Array do if else...
	2. 变量名由多个单词组成,采用小驼峰标识
		et :
			userName				

2. 常量

1. 常量一经定义就不能更改,强制修改会报错
2. 语法 :
		const 常量名 = 值;
		常量在定义时,必须声明并赋值
3. 使用 :
		常量名采用全大写字母,与变量名区分

3. 小数位的操作

小数在计算机中存储或是计算都存在误差,不准确.
可以设置小数的显示位数
方法 : toFixed(n)
n表示保留的小数位数
	et :
		var n = 62.800004;
		n = n.toFixed(2);

五、数据类型

1. Number 数字类型

整数和小数统称为Number类型.
1. 整数
1. 十进制表示方法
	var n = 100;
2. 八进制表示整数
	八进制以 0 为 前缀 ,表示逢8进1
	et :
		var num = 015;// 5*8(0) + 1 * 8(1)
	十进制转八进制,需要先将十进制转二进制,从右向左
	每三位为一组,再将二进制的结果计算出来
	111 : 十进制的7
	八进制 : 以八位存数据
3. 十六进制
	十六进制以 0x 为前缀
	et :
		var num2 = 0x35; // 5*16(0)+3*16(1) = 53
	十进制转十六进制,先将十进制转换为二进制,从右向左
	每四位为一组,计算结果
	1111 : 15 -> f
4. 如果使用console.log输出整数值,不管是什么进制
表示,都转换十进制输出
2. 小数
	1. 直接以小数点表示小数
		var f1 = 10.5;
	2. 科学计数法
		var f2 = 1.5e3;
		e : 表示10为底
		3 : 表示10的次方数
		1.5 * 10 (3) = 1500;

2. String 字符串类型

1. 所有使用''或者""引起来的内容,都是字符串
2. 字符串中的所有字符都是以Unicode码存储的,
	字母和数字的Unicode码值与ASC码值一致,
	中文字符的Unicode编码,在计算机中以16进制存储
3. 查看指定字符的Unicode码值
	1. 方法 : charCodeAt(index)
		index 表示指定字符的下标,字符串中默认从0开始
		为每一位字符分配下标
		et :
			var str = "张三丰";
			str.charCodeAt(0);
	2. 中文字符在计算机中以16进制存储,查看中文的十六进制
		使用 :
			toString(16); //将Unicode码转换为16进制表示
	3. 已知中文的十六进制字符串,想转换为中文显示,
		添加\u转义即可
			"\u5f20"
	4. 中文的范围:
		"\u4e00" ~ "\u9fa5"
		"\u4e00"为中文的'一'
	5. 转义字符
		\u
		\n 换行
		\t 制表符
		\' 表示'
		\\ 表示\

3. Boolean 布尔类型

只有真和假两个值 true/false
true = 1
false = 0;

4. undefined

当变量声明未定义时,默认值为undefined
访问对象不存在的属性时, 默认值为undefined

5. null

null表示对象类型

6. 检测数据类型

使用 typeof
	et :
		typeof num;
		typeof (num + str);	

7. 引用数据类型

对象 Number String

六、数据类型转换

1. 自动类型转换(隐式)

1. 不同类型的数据在做运算时,会自动转换
2. 分类 :
	1. 字符串与其他数据类型做 + 法运算
		+ 一旦与字符串结合使用,变成字符串的拼接运算,最终结果都为字符串类型
		et:
			var r1 = '小泽' + 'Maria';
			var r2 = '100' + 10; //10010
			var r3 = 10 + 5 + '20'; //1520
			var r4 = 5 + '20' + 10; //52010
			var r5 = 'hello' + true; 
	
	1. number + boolean
		会将boolean类型自动转换为number:
			true = 1
			false = 0
		转换之后参与数学运算,最终结果为number
	3. 字符串参与除+以外的其他数学运算，一律自动转换为number参与数学运算，转换失败则变成NaN参与运算，结果为NaN
		et :
			var res3 = 100 + undefined; //NaN (Not a Number)
			var res4 = 100 + null; // 100
			var res5 = true + undefined; //NaN
			var res6 = false + null; //0
	4. null可以转换number:null = 0;

2. 强制类型转换

1. 将其他数据类型转为字符串类型
	方法 : toString();
	返回字符串结果

2. 将字符串或布尔值转换为number类型
	方法 : Number(变量)
	整体转换，失败返回NaN(not a number)
	返回转换后的结果 :
		1. 数字字符串"100",可以直接转换为number 100
		2. 非数字字符串 "100a" "张3",转换失败,返回NaN
		3. 布尔类型转number :
			true = 1
			false = 0

3. 解析字符串中的数字
	方法 :
		parseInt(变量) : 解析字符串中的整数部分
		parseFloat(变量) : 解析字符串中的number部分
	解析过程:
		自动将参数转换为字符串；
		从第一个字符开始向后解析,对每一位进行转number的操作，碰到非数字,停止解析,返回结果
		parseFloat(变量)中将第一个小数点认为是合法字符，后续如果出现多个小数点则是非法字符
		et:
			console.log(parseInt(35.56))
			console.log(parseInt('35.56'))
			console.log(parseInt('a35.56'))
			console.log(parseInt('35.56a'))
			console.log(parseInt('1.5e3'))
			console.log(parseInt(true))
			console.log(parseFloat('35.5.5'))
			console.log(parseFloat('1.5e3'))
			console.log(parseFloat('2/3'))
			//35 35 NaN 35  1 NaN 35.5 1500 2

4. Boolean(n)
	1. '零'值以外都为真
		1. '零'值的情况：0 0.0 '' undefined null NaN

七、运算符

1. 赋值运算符

=

2. 算数运算符

+ - * / %
eg:
	'a' * 10 // Number('a') NaN
	'100' - 'true' // NaN
	只要有NaN参与数学运算，结果永远是NaN

3. 复合运算符

+= -= *= /= %=

4. 自增和自减

++  --
1. 变量在自身的基础上加1或减1
2. 单独与变量结合，做前缀或做后缀没有区别；包含自动类型的转换，转换number后进行+1或-1
3. 与其他运算符结合使用，区分前缀和后缀，前缀就先自增，后缀后自增
	1 var m = 5;
	2 var res1 = m++;
	3 console.log(res1,m); //5 6
	4 var res2 = ++m;
	5 console.log(res2,m);//7 7

5. 比较运算符

> >= < <= == != ===(全等) !==(不全等)
1. 比较运算的结果永远是布尔值
2. 以下情况
	1. number与number比较，直接比大小
	2. string与number，boolean与number，string与boolean，boolean与boolean，一律将操作数转换number比大小，如果转换失败，NaN参与比较运算，结果永远为false
		示例：
			var r2 = '10' > 5; //true
			var r3 = '10a' > 5; //Number('10a') = NaN --> NaN>5 -->  false
			var r4 = '10' > true; //true
			var r5 = '10' > 'true'; //false
			var r7 = 100 > undefined; //100 > NaN
			var r8 = 100 > null; //100 > 0 
	3. string与string比较，同为字符串，不会自动转换类型，逐位比较字符的Unicode编码，只要某一位不相等，就出结果
		示例：
			var s1 = '10' > '5'; //按位比 '1' > '5' false
3. 相等与全等( == 与 === )
	1. 相等：包含自动类型转换，只要值相等就成立
	2. 全等：不会转换类型，要求类型一致值相等才成立
	3. 示例：
		1. '10' == 10; //true
		2. '10' === 10; //false

6. 逻辑运算符

1. 逻辑与 &&
	1. 规则：全1则1
2. 逻辑或 ||
	1. 规则：有1则1
3. 逻辑非 !
	1. 规则：对布尔结果取反
	2. 例：
		var a = 10;
		var r = !a; // false
4. 练习：
	1. 定义变量，给出闰年判断的条件：能被4整除同时不能被100整除或能被400整除
5. 注意：
	1. 逻辑与 优先级高于 逻辑或

7. 位运算符

将操作数转换成二进制，按位操作
1. 位与 &
	1. 规则：全1则1
	2. 例：
		3 & 5 --> 011 & 101 --> 001 --> 1
	3. 使用：任意整数与1做位与运算，结果为1表示奇数，结果为0表示偶数 
2. 位或 |
3. 异或 ^
	1. 规则：相同为0，不同为1
	2. 使用：变量绑定的值互换
		var  a = 3,b = 5;
		a = a ^ b;
		b = a ^ b;
		a = a ^ b; 

8. 三目（三元）运算符

表达式1 ? 表达式2 : 表达式3
运算：
	判断表达式1是否成立
	如果成立，则执行或返回表达式2
	不成立，执行
示例：
	var score = prompt('请输入成绩');
	// console.log(score,typeof score);
	var score = 50;
	var res = score >= 90? '优秀':score >= 80? '还不错':score >= 60? '及格':'不及格';
	console.log(res)