javaScript学习

JavaScript是运行在客户端的脚本语言；
	脚本语言：不需要编译，运行过程中由js引擎逐行来解释执行;
	现在也可以基于Node.js进行服务器端编程;

JavaScript作用：
	表单动态验证;---------------最初目的;
	网页特效;
	服务端开发(Node.js)
	桌面程序(Electron)
	App(Cordova)
	控制硬件-物联网(Ruff)
	游戏开发(cocos2d-js)

HTML/CSS  描述类语言;
JS脚本语言  编程类语言，实现业务逻辑和页面控制(决定功能)，相当于人的各种动作;

浏览器由两种部分组成：
     渲染引擎：用来解析HTML和CSS,俗称内核
	 JS引擎：也成为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行;

浏览器本身不会执行JS代码，而是通过内置JS引擎来执行代码，JS引擎执行代码时逐行解释每一句源码，转化为机器语言，由计算机去执行，所以JavaScript语言归为脚本语言，逐行解释;

JS的组成：ECMAScript  (JavaScript语法)
	     DOM  (页面文档对象模型)
	     BOM  (浏览器对象模型)

ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS工业标准;

DOM:通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等);

BOM：指浏览器对象模型，提供了独立于内容的，可与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等;

JS有行内式、内嵌式、外部三种写法;

JavaScript输入输出语句：
	方法           				说明       
	alert(msg)    		浏览器弹出警示框
	console.log(msg)  	浏览器控制台打印输出信息
	prompt(info)    	0浏览器弹出输入框，用户可以输入

变量使用：1.声明变量；2.赋值;
     1.声明变量：var age;
           var是一个JS关键字，用来声明变量，计算机会为变量自动分配空间;
     2.赋值：age = 18;

     变量的初始化：声明并初始化;   var age = 18;

只声明不赋值，结果为未定义undefined;

变量命名规范：
	大小写字母、下划线、美元符号$、数字来组成;
	不能以数字开头;
	不能是关键字、保留字;
	遵循驼峰命名法;

数据类型：JavaScript是一种弱类型语言或者动态语言，意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定;类型可以变化;

简单数据类型：
Number:数字型包含整数值和浮点值;
Boolean:布尔值;
String:字符串类型;
Undefined:声明了变量a,但没有给值;
Null:声明了变量a为空;

数字型Number：
	八进制：var num1 = 010;   //8
	十六进制：var num2 = 0x10 //16
	Number.MAX_VALUE;数字型最大值;
	Number.MIN_VALUE;数字型最小值;
	Infinity;//无穷大，大于任何数;
	-Infinity;//无穷小，小于任何数;
	NaN;//Not a Number;非数值;
	isNaN();方法用来判断非数字，如果是数字，返回false,是不是数字,返回true;

字符串型：String:加入单引号或者双引号，推荐单引号;
	引号嵌套规则：单引号嵌双引号，双引号嵌单引号;
	字符串长度：通过字符串length获取字符串长度;
	var str = "my name is weibo";
	字符串拼接：多个字符串间可以使用+拼接
	未定义类型和字符串相连+,结果为字符串类型;
	未定义类型和数字相加+,结果为NaN;
	//null空值
	空值+字符串相加返回字符串类型;
	空值和数字类型相加返回数字类型;

获取数据类型：typeof 变量;
prompt取过来的值是字符串类型;

数据类型转换：将一种数据类型转换为另一种数据类型;
	1.把其他类型转换为字符串类型：
		toString();
		String(num);
		+;
	2.把其他类型转换为数字类型：
		parseInt(String)函数;
		parseFloat(String)函数;
		Number()强制类型转换;
		js隐式转换 '12'-0;

		parseInt('120px');//120  会去掉px单位;
	3.将其他类型转换为布尔值：
		Boolean()函数;  Boolean('true');
		代表空、否定的值转换为false;如0、NaN、null、undefined、'';

不要直接判断两个浮点数是否相等;

==判等号(会转型);
!=不等号;
===  全等，要求数据类型和值都一致;
!==  不全等;

与优先级大于或优先级;

JS中数组创建方式：
	1.利用new创建数组;
	2.利用数组字面量创建数组;
	var array = new Array();
	var 数组名 = ['小白','小南'];
	var arr1 = [1,2,'pink',true];

    var arr1 = ['red','green'];
    arr1[2] = 'blue';
    arr1 = ['red','green','blue'];

    newArr[newArr.length] = i;

函数： function getSum(num1,num2){
			//执行过程;
	   }

	   如果实参个数多于形参个数，会取形参个数;
	   实参个数小于形参个数，缺失的形参默认为undefined,结果值为NaN;

    当不确定有多少个参数传递的时候，使用arguments来获取，JavaScript中，arguments实际上它是当前函数的一个内置对象，
    所有函数都内置了一个arguments对象，存储了传递的所有实参;

    arguments展示形式是一个伪数组，因此可以进行遍历，具有以下特点：
    	具有length属性;
    	按索引方式存储数据;
    	不具有数组的push,pop方法;


    函数第二种声明方式：匿名函数;
    	var fun = function(){   }
    	fun是变量名不是函数名;
    	函数表达式声明方式和声明变量差不多，只不过变量里卖弄存的是值，函数表达式里里面村的是函数;
    	var fun = function(argu){ 
    		console.log(argu);
    	}
    	fun('pink');

 

JavaScript的作用域：
	1.全局作用域;
	2.局部作用域;

全局作用域：整个Script标签内或者整个JS文件;
局部作用域：在函数内部起效果和作用;

注意：如果在函数内部没有声明直接赋值的变量也属于全局变量;

JavaScript代码是由浏览器的JavaScript解析器执行的，JavaScript在运行JavaScript代码的时候分为两步：预解析和代码执行;

	预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面;

	代码执行：按照代码书写顺序从上到下执行;

预解析分为两步：变量预解析(变量提升)和函数预解析(函数提升);

	变量提升：就是把所有变量声明提升到当前作用域最前面,不提升赋值操作;

	函数提升:就是把所有的函数声明提升到当前作用域最前面,不调用函数;
	参考例子：

	fun();
	var fun = fn(){
		//
	}

	等价于：
	var fun;
	fun();  //此时没有函数,所以会报错;
	fun = fn(){
		//
	}

JavaScript对象：
    对象是一组无序的相关属性和方法的集合,所有的事物都是属性;

    属性：事物的特征,在对象中用属性表示;
    方法：事物的行为，在对象中用方法表示;

    创建对象的三种方式：
    	1.利用字面量创建对象;
    	2.利用new Object创建对象;
    	3.利用构造函数创建对象;

    1.利用字面量创建对象:
    	var obj = {};//创建了一个空的对象;
    	var obj1 = {
    		uname: '张三疯',
    		age: 18,
    		sex: '男',
    		sayHi: function(){
    			console.log("hi~");
    		}
    	}
    	采取键值对形式;
    	多个属性或者方法使用,隔开;
    	方法冒号后面跟的是一个匿名函数;

    使用对象:
    	1.调用对象的属性：对象名.属性;
    	2.调用对象的属性:对象名['属性名'];

    	3.调用对象的方法：对象名.方法名();obj.sayHi();
    	
    2.创建对象的第二种方法:
    	利用new Object创建对象;
    	var obj = new Object();//创建了一个空的对象;
    	obj.name = '张三疯';
    	obj.age = 18;
    	obj.sex = '男';

    	obj.sayHi = function(){
    		console.log('hi~');
    	}

    	使用等号赋值的方法向对象添加属性和方法;

    3.利用构造函数来创建对象;
    	前面两种创建方式一次只能创建一个对象;
    	可以使用构造函数一次创建多个对象;

    	构造函数：把我们对象里面一些相同的属性和方法抽象出来封装到函数里面;

    	构造函数语法格式：
    		function 构造函数名(){
    			this.属性 = 值;
    			this.方法 = function(){

    			}
    		}

    		new 构造函数名();
    	构造函数不需要返回值就可以返回结果;

    	new关键字执行过程：
    		1.new构造函数在内存中创建了一个空的对象;
    		2.this就会指向刚才创建的空对象;
    		3.执行构造函数里面的代码，给这个空对象添加属性和方法;
    		4.返回这个对象;

    遍历对象:
        var obj = {
        	name: 'pink老师',
        	age: 18,
        	sex: '男'
        }
        for...in语句：遍历我们的对象,得到的是属性;
        for(变量 in 对象){

        }


JavaScript内置对象：
	JavaScript中对象分为三种：自定义对象、内置对象、浏览器对象;
	前面两种属于JS基础内容，属于ECMAScript;第三个浏览器对象属于JS独有的，在JS API讲解;

	内置对象：JS语言自带的一些对象，这些对象由开发者提供使用，提供了一些常用的必要的功能;
	常用的有：Math、Date、Array、String;

	查用文档：MDN;

	Math对象：
		Math不是一个构造函数，所以不需要new来调用，而是直接使用里面的属性和方法;

		Math.PI :   圆周率;
		Math.max(2,3,4); 获得最大值;
		Math.max();返回无穷大;
		Math.abs(-1);返回绝对值;可能会有隐式转换;
		Math.floor();向下取整;
		Math.ceil();向上取整;
		Math.round();四舍五入;
		其他数字都是四舍五入，但是.5比较特殊，它往大了取;
		随机数方法Math.random();返回一个随机的浮点数,浮点数范围在0-1之间;

    日期对象：是一个构造函数，必须使用new来创建我们的日期对象;必须实例化才能使用;

    var date1 = new Date();
    var date2 = new Date(2020,10,1);//这里面返回的月份会大1;
    var date3 = new Date('2020-10-1 12:12:21');
    获取日期指定的部分：
    对象名.getFullYear();获取当年;
    对象名.getMonth();获取当月;(0-11);返回的月份小于1;
    对象名.getDate();获取当天日期;
    对象名.getDay();获取星期几;
    对象名.getHours();获取当前小时;
    对象名.getMinutes();获取当前分钟;
    对象名.getSeconds();获取当前秒钟;

    获取日期的总毫秒形式:距离1970/1/1经过的总毫秒数;
    1.date.valueOf();
    2.date.getTime();
    3.var date1 = +new Date();
    4.Date.now();

    数组对象：Array;
    reverrse([1,2,3]);反转数组;

    判断arr是否为数组：
    1) arr instanceof Array;
    2) Array.isArray([1,2,3]);

    添加删除数组元素的方法：
    	1) push(参数..)  在数组末尾添加一个或者多个数组元素;
    	var arr = [1,2,3];
    	arr.push(4);
    	push完毕后返回的是新数组的长度;
    	2) unshift(参数..) 在数组前面添加元素;

    删除数组元素的方法：
    	1) pop();删除数组的最后一个元素;返回的是删除的元素;
    	2) shift();删除数组的第一个元素;返回的是删除的元素;

    数组排序：
    	1.反转数组：arr.revers();直接将数组本身进行了反转;
    	2.数组排序(冒泡排序):arr.sort();
    	arr.sort(function(a,b){
    		return a-b;//升序排列;
    		return b-a;//降序排列;
    	})

    数组索引的方法:
    	indexOf();数组中查找给定元素的索引号;
    	var arr = ['red','blue','green'];
    	console.log(arr.indexOf('blue'));
    	如果有重复元素，返回第一个指定元素索引，如果不存在指定元素，则返回-1;

    	lastIndexOf();

    	console.log(arr.lastIndexOf('blue'));
    	从后面查找，返回索引号;


    数组转化为字符串：
    	1) toString();
    	arr.toString();
    	2)join(分隔符);
    	arr.join('-');

    concat();连接两个或多个数组,返回一个新的数组;
    slice();数组截取slice(begin,end);返回被截取的项目的数组;
    splice();数组删除splice(第几个开始,要删除的个数);返回被删除项目的新数组，这个不会影响原数组;

字符串对象：
	基本包装类型:将简单数据类型包装成为了复杂数据类型;
	1.把简单数据类型包装成了复杂数据类型;
	var str = 'andy';等价于 var str = new String('andy');

	字符串不可变：指的是里面的值不可变，虽然看上去可以改变内容，但其实地址改变了，内存中新开辟了一个内存空间;
	根据字符返回位置：
		字符串所有方法都不会修改字符串本身，操作完成后会返回一个新的字符串;
		indexOf(字符);
		lastIndexOf(字符);

	根据位置返回字符：
		1) charAt(index);根据位置返回字符;
		2) charCodeAt(index);获取指定字符的ASCII码;目的：判断用户按了哪个键;
		3)str[index];获取指定字符串;h5新增的，需要考虑兼容性问题;

	字符串操作方法：
		1) concat(str1,str2,...)  concat()方法用于连接两个或者多个字符串，拼接字符串，等效于+;
		2) substr(start,length);  从start位置开始，取length个数;
		3) slice(start,end);      从start开始，截取到end位置，end取不到;
		4) substring(start,end);  从start位置开始，截取到end位置，end取不到,但是不接受负值;

	字符串替换：
		str.replace('被替换的字符','替换的字符');只会替换第一个字符;
		str.split('分隔符');将字符串转换为数组;

		toUpperCase();转换为大写;
		toLowerCase();转换为小写;

简单数据类型(基本数据类型/值类型);string、number、undefined、null、boolean;
复杂数据类型(引用数据类型);Object、Array、Date等;

简单数据类型放在栈中;
复杂数据类型放在堆中;

 

Web API与JS基础关联性：
JS三大部分组成：
	1.ECMAScript JavaScript语法;
	2.DOM  页面文档对象模型;
	3 BOM  浏览器对象模型;

	JS基础：学习JS语法;ECMAScript标准规定
	Web API: 学习DOM和BOM;W3C组织标准;


API:Application Programming interface,给程序员提供的一种工具，能够更轻松的实现想要完成的功能;

Web API:是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM);

参考文档：MDN

DOM:Document Object Model 处理可扩展标记语言(HTML或者XML)的标准编程接口;
W3C定义了一系列DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式;

DOM树：
	文档：一个页面就是一个文档，用document表示;
	元素：页面中所有标签都是元素，用element表示;
	节点：网页中所有内容都是节点（标签、属性、文本、注释等),DOM中使用node表示;
	DOM把以上内容都看作对象;

获取元素：
	通过ID获取；
	通过标签名获取；
	通过HTML5新增的获取;

	根据ID：
		使用getElementByID(id)获取带有元素ID的对象;
		参数是一个字符串;(需要加单引号);
		返回的是一个元素对象
		console.dir();打印返回的元素对象，查看里面的属性和方法;
	根据标签名获取：
		使用getElementsByTagName()方法获取返回值带有指定标签名的对象集合;
		返回的是 获取过来的元素对象的集合，以伪数组的形式存储;

		注意：
			因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历;
			得到的元素是动态的;
		element.getElementsByTageName();可以得到这个元素里面的某些标签;

	2.通过HTML5新增的方法获取：
		注意：IE6,7,8因为兼容性不支持;
		document.getElementsByClassName('类名');//根据类名返回元素对象集合

	    document.querySelector('选择器');//根据指定选择器返回第一个元素对象;	

	     document.querySelectorAll('选择器');//返回指定选择器所有元素对象;以伪数组形式返回;

	获取body元素:document.body;返回一个元素对象;
	获取html元素：document.documentElement;


事件基础：
	事件：是被JavaScript检测到的行为，即触发-响应机制；每个网页元素都可以触发javaScript的事件;
		比如：在用户点击了某按钮时产生了一个事件，然后去执行某些事件;

	事件有三部分组成：事件源、事件类型、事件处理程序，称为事件三要素;

	事件源：事件被触发的对象;    按钮;
	事件类型：如何触发，什么事件？  比如鼠标点击(onclick)、鼠标经过、键盘按下等;
	事件处理程序：通过一个函数赋值的方式完成;匿名函数;

	常见鼠标事件：
		onclick		鼠标左键点击触发;
		onmouseover 鼠标经过触发;
		onmouseout	鼠标离开触发;
		onfocus		获得鼠标焦点触发;
		onblur		失去鼠标焦点触发;
		onmousemove	鼠标移动触发;
		onmouseup	鼠标弹起触发;
		onmousedown	鼠标按下触发;

	改变元素内容：
		element.innerText;从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉;
		element.innerHTML;从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行;

		innerText和innerHTML区别：
			innerText不识别HTML标签;
			innerHTML识别HTML标签;
			这两个属性是可读写的，可以获取元素中内容;
			获取元素时，innerText会显示从头到尾位置，去除HTML标签，同时空格和换行也会去掉;
			innerHTML会保留标签，空格以及换行;

	修改元素属性：前面步骤和前面一样，注册事件时改为对元素属性的赋值;

	利用DOM可以操作如下表单元素属性：
		type、value、checked、selected、disabled;
		

 

事件注册（绑定）

分为静态注册和动态注册两种。

当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册：通过html标签事件属性直接赋予事件响应后的代码，成为静态注册。

动态注册：通过js得到标签的dom对象，然后通过dom对象.事件名 = function(){}这种形式赋予响应后的代码。

DOM模型

DOM全称Document Object Model 文档对象模型

把文档中的标签、属性、文本都转化为对象来管理

Document对象的理解：

1.Document管理了所有的HTML文档内容

2.Document是一种树形结构的文档，有层级关系

3.他让我们把所有的标签都对象化

4.我们可以通过document访问所有的标签对象

getElementById("")     返回对拥有指定id的第一个对象的引用

getElementsByName("")   返回带有指定名称的对象集合

getElementsByTagName("")  返回带有指定标签名的对象集合

使用优先顺序：ById>ByName>ByTagName

以上三个方法，一定要在页面加载完成之后才能查询到

节点的常用属性和方法：

      节点就是标签对象

常用方法：

      getElementsByTagName() 方法   获取当前节点的指定标签名孩子节点

      appendChild(ChildNode)方法   可以添加一个子节点，childNode是要添加的节点

属性：

     childNodes属性：获取当前节点的所有子节点

     firstChild属性：获取当前节点的第一个子节点

     lastChild属性：获取当前节点的最后一个子节点

    parentNode属性：获取当前节点的父节点

    nextSibling属性：获取当前节点的下一个节点

    previousSibling属性：获取当前节点的上一个节点

    className:用于获取或设置标签的class属性值

    innerHTML属性：表示获取、设置起始标签和结束标签中的内容

    innerText属性：表示获取、设置起始标签和结束标签中的文本

 window.onload = function () {
                //使用js代码创建html标签并显示在页面上
                var divObj = document.createElement("div");//在内存中
                divObj.innerHTML = "一段代码";
                document.body.appendChild(divObj);
            }