自学WEB前端-3(JavaScript-1)

动态控制之JavaScript（ECMAScript部分）

一、JavaScript是什么？ 有什么特点(为什么要用js)？语法？功能？组成？

JavaScript是解释性脚本语言：不需要编译，直接就可以被浏览器解析执行了，运行在客户端浏览器中。
特点：

• 基于对象：可以对对象进行操作也可以创建对象
• 简单： 采用弱类型的变量类型
• 动态性：采用事件驱动，通过触发事件就可以产生动态效果，而不需要经过web服务器
• 跨平台：不依赖于操作系统

功能：
控制页面的元素，让页面有一些动态的效果。
可以来增强用户和html页面的交互过程。
可以来控制html元素，让界面有一些动态的效果，来增强用户的体验。

应用：

• 网页特效
• 服务器开发(Node.js)
• 命令行工具(Node.js)
• 桌面程序(Electron)
• App(Cordova)
• 控制硬件–物联网(Ruff)
• 游戏开发(cocos2d-js)

核心语法包括两部分：

• 基本的语法构造
• 标准库（一系列功能的对象的集合）
  （每一个浏览器都有JavaScript的解析引擎）

JavaScript = ECMAScript + JavaScript 自己特有的东西（BOM + DOM）
即JavaScript包括：
				1.ECMAScript
				2.BOM
				3.DOM

二、什么是ECMAScript？语法？

ECMAScript：客户端脚本语言的标准
基本语法：
	1.与html结合方式
		1.1 内部JS
			写在html文件之中
		1.2 外部JS
			单独一个.js文件来保存，并通过html的引用来执行
	注意：定义位置影响执行顺序
	2.注释
		单行注释
		多行注释
	3.数据类型
		3.1 原始数据类型   
			number ：		   帧数/小数/NaN（not a number 一个不是数字的数字类型）
			string ： 			字符串类型  
			Boolean ：		    布尔类型		                 true 和 false
			null ：				一个对象为空的占位符
			undefined：			未定义类型 	              如果一个变量没有给初始化值，则会被默认赋值为undefined
		 3.2 引用数据类型：
			Object				对象类型 
			Array				数组类型 
			Function			函数类型 
			也可以把数组和函数 看成是对象
	4.变量
			变量的声明其实是开辟存储数据的内存空间
			语法： 
			var 变量名 = 变量值；
			
			typeof 变量名 
			可以获取变量类型
注：
	变量的名字不能以数字开头，并且只能由字母、数字、下划线和$组成。
	变量的名字不能是关键字。
	java是强类型的语言。JavaScript是弱类型的语言。
	java定义时内存空间类型时确定的，而JavaScript定义内存空间是不确定的。
	如果变量重名，后面的会覆盖前面的变量。
	变量命名尽量使用驼峰法。
	

		5.运算符
			5.1一元运算符
				++ 
		 		-- 
		  		+(正号)
		注意：在JS中 如果运算数不是运算符所要求的类型，那么js引擎会子哦对自动将运算数进行类型转换
		+（正号）造成的自动类型转换
		 其他类型会被转为number类型
		string转number 按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字类型）
		Boolean转number ，true转为1 ，false转为0
		    5.2 算数运算符
		    % 取余
		    5.3 赋值运算符
		    5.4 比较运算符
		 		 > ，<  ， >= ， <= ， ===(全等于)
			 比较方式
				类型相同:直接比较
				字符串，按照字典顺序比较，按位逐一比较，直到得出大小为止
				类型不同，自动进行类型转换，再比较
				===  全等于： 在比较之前，先判断类型，类型不同直接返回false
		 	5.5 逻辑运算符
		  		&& || !
				&& 与 （短路）
				|| 或 （短路）
				！ 非
			5.6三元运算符
			 	?  : 
		  		语法： 表达式    ? 1: 2
			    表达式意义为判断为true则取1 否则取2 
	注：自动类型转换
		其他类型转Boolean
			1.number   			0为假，非0为真
			2.string   			除了空字符串，其他都为真
			3.null&undefined    都为false
			4.对象			    都为true
			
			手动类型转换
				其他类型转string
					string(其他类型的值)
					其他类型的对象.toString()
				其他类型转number
					Number(其他类型的值)
					parseInt(其他类型的值)    //不能识别字符串中非数值的内容和非数字和字符串的内容，结果都会为NaN
					parseFloat(其他类型的值)    //不能识别字符串中非数值的内容和非数字和字符串的内容，结果都会为NaN
				其他类型转Boolean
					Boolean(其他类型的值) 
					
			
			

			/*对象为空报异常*/
			if(obj != null  ){ //防止空指针异常
				alert("异常");				
			}
			/*效果等同于*/
			if(obj  ){ //防止空指针异常
				alert("异常");				
			}

		运算优先级从上到下
		1.()优先级最高
		2.一元运算符 ++ --
		3.算数运算符     先 * / %  后 + -
		4.关系运算符
		5.相等运算符
		6.逻辑运算符    先&&  后 ||
		7.赋值运算符

	6.流程控制语句
			if ..else..
			switch
			while
			do..while     先执行一次代码 ，再判断
			for
注：在java中switch语句可以接受的数据类型： byte、int 、short、char、枚举（1.5）、string（1.7）
而在JS中可以接受任意的原始数据
	7.特殊语法
	 	变量定义可以使用var关键词，也可以不使用var关键词
			使用，定义的变量是局部变量
			不使用，定义的变量是全局变量

三、基本对象

3.1 普通对象

1.1.1 创建
//方法1.实例化  声明对象（内置构造函数）
var obj1={对象列表};
//列表中如果有函数，该函数会称为方法，其他类型的值称为属性。
//方法2.实例化  声明对象（内置构造函数）
var obj2 = new Object();

1.1.2 遍历
for(键 in 对象)      //还可以用来循环数组
例如  for(var i in 对象名){
	//打印结果
	console.log(对象名[i]);
}

3.2 Function 对象:函数对象

	1.创建

方法1.实例化  声明对象（内置构造函数）
 var fun = new Function(形式参数列表，方法体);
				  例如 var test1 = new Function("a","b","alert(a);");
方法2. 自定义构造函数方法
function 方法名称（形式参数列表）{
					方法体
					}
			例如	function test2(a,b){
				alert(a);}
				test1(3,4); 
方法3.实例化自定义构造函数方式来声明对象
var 对象名 = new 函数名();
方法4.
普通匿名函数
var 方法名 = function (形式参数列表){
					方法体}
			例如	var test3 = function(a,b){
							alert(a);}
				test3(3,4); 
自调用匿名函数
(function(){
	alert("自调用");
})();

	2.方法
	函数内方法体可以是一个函数
	把函数名当成参数传入，并加（）表示执行
	function f1(f2){
		f2();
	}
	把函数名当成返回值传入
	function f1(f2){
		return f2;
	}
	3.属性
		length  代表形参的个数
	4.特点
		方法定义时形参的类型不用写，返回值类型也不用写
		方法是一个对象  如果定义名称相同的方法会覆盖之前相同名称的方法
		在JS中方法的调用只与方法的名称有关，和参数列表无关
		在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
	5.调用
		方法名称（实际参数列表）;
注意：function中如果没有return，函数调用会的返回值类型为undefined
function中如果有return，但是后面没有值，函数调用会的返回值类型也为undefined

3.3 Array 对象

	1.创建

	1. var arr = new Array(元素列表);
	2. var arr = new Array(默认长度);    
	例如 var arr = new Array(5); 如果只有一个元素，表示数组的长度
	3. var arr = [元素列表];

	2.方法
		    	join()	把数组的所有元素放入一个字符串。
				push()	向数组的末尾添加一个或更多元素，并返回新的长度。
				sort()	对数组的元素进行排序。
				unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
	3.属性
				length 数组的长度
	4.特点
				1.JS中数组元素的类型是可变的
				2.JS中数组的长度是可变的
	5.调用

3.4 Boolean 对象

Date :日期对象
	1.创建
		car date = new Date();
	2.方法
			toLocaleString()	据本地时间格式，把 Date 对象转换为字符串。
			getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

Math对象:用于执行数学任务
	1.创建
				
	2.方法
			random()	返回 0 ~ 1 之间的随机数， 包含0 不包含1。
			ceil(x)	对数进行上舍入。
			floor(x)	对 x 进行下舍入。
			round(x)	把数四舍五入为最接近的整数。
	3.属性
				
	4.特点
		不用创建直接使用。  Math.方法名();
	5.调用
		Number 对象
		String 对象
		RegExp 对象
		Global 对象
		特点：全局对象 Global中封装的方法不需要对象就可以直接调用    方法名();

decodeURI()      		参数uri		必需。	解码某个编码的 URI。
decodeURIComponent()   	参数uri	 	必需。	解码一个编码的 URI 组件。
encodeURI()				参数uri		必需。	把字符串编码为 URI。
encodeURIComponent()	参数uri		必需。	把字符串编码为 URI 组件。
escape()				参数string	必需。	对字符串进行编码。
eval()					参数string	必需。	计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite()				参数value	必需。	检查某个值是否为有穷大的数。
isNaN()					参数value	必需。	检查某个值是否是NaN。
						NaN参与的==比较全部为false
Number()				参数object	可选。	把对象的值转换为数字。
parseFloat()			参数string	必需。	解析一个字符串并返回一个浮点数。
parseInt()				参数string	必需。	解析一个字符串并返回一个整数。
						参数radix	可选。	表示要解析的数字的基数。该值介于 2 ~ 36 之间。
					逐一判断每一个字符是否是数字，直到不是数字为止，将前面的数字部分转为number
String()				object		必需。	把对象的值转换为字符串。
unescape()   			参数string			对由 escape() 编码的字符串进行解码。

3.5 包装对象

包装对象就是数据在一定条件下可以自动转为对象，包括三种原始数据类型：

1. 数值型
   • var 对象名 = new Number(123);
2. 字符串
3. 布尔类型

注意：包装对象使用完成，自动销毁

四、全局变量和局部变量

1. 全局变量：项目内都可以访问的变量
   全局变量能使用的范围为全局作用域
2. 局部变量：只有再固定的代码片段内才能访问的变量
   局部变量能使用的范围为局部作用域

如果函数与变量重名，那么函数声明会替换变量声明
也就是变量提升，变量类型变成了函数类型
如果再次赋值，就会变成赋的值

4.1 作用域

js本身是全局作用域，函数可以产生新的作用域，也就是局部作用域。
函数内指向函数外的链式结构，成为作用域链。
当函数使用变量时，会先在自己的作用域范围内查找是否有该变量，如果没有就会查找上一级，依次类推，直到全局作用域。

在方法中 this指的是该方法的对象
普通的函数中，this指的是全局对象（window）
即this运行在那个对象下，就指向哪个对象