JavaScript

JavaScript 是Web的编程语言，可以操作html的内容，属性，样式

一个完整的JavaScript包含三个部分：

ECMAScript（标准语法）
DOM
BOM

Java 和 JavaScript 的区别

1 JavaScript没有采用Java的静态类型
2 JavaScript中，函数是一种独立的数据类型，以及采用基于原型对象（prototype）的继承链。
3 Java运行需要编译，而JavaScript由解释器直接执行

ECMAScript

ECMA基本语法

方式1 先声明再赋值
    var 变量名;   // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
    变量名 = 变量值;
方式2 声明并赋值
    var 变量名 = 变量值;
方式3 一行可以声明多个变量.并且可以是不同类型
  	var name="xxx", age=20;

ECMAScript基本数据类型

数字类型
	JavaScipt只有一种数字类型：number类型

字符串
	字符串对象内置属性	length
	字符串对象内置方法	
		toUpperCase()
		toLowerCase()
		indexOf()
		slice() 切片
		split() 正则分隔
		substr() 截取
		trim() 移除字符串首尾空白
		
		
布尔值
	true 和 false

空值
	undifined类型：
		变量声明未赋值、函数无明确返回值
	null类型：
		用于尚未存在的对象

类型转换

强制转换
	1. 转换为数值类型
		parseInt
		parseFloat
		Number
		
		对于转换数值,如果转换失败的话,则结果为 NaN ,是 Not a Number ,但是NaN的类型也是number类型

	2. 转换为字符串
		变量.toString()
		String(数据)
	
	3.转换为布尔类型
		Boolean()

自动转换
	所谓的自动转换,其实弱类型中的变量会根据当前代码的需要,进行类型的自动隐式转化
	1+true
	1+"200"
	1-"200"

运算符

算数运算符
赋值运算符
比较运算符
逻辑运算符
条件运算符（三目运算符）
	条件 ? true : false

流程控制

顺序

分支	
	if else
	switch case
循环
	for
	while
		do{}while(): 先执行一次，再判断

数组对象

内置属性
	length
	
内置方法
	pop()	删除最后一个元素所为返回值
	push()	数组后追加
	shift()	删除第一个元素
	unshift(value)	将value插入数组开头
	reverse()
	slice() 切片，开区间
	sort()	按字符排序，不是数值 [1, 10, 2, 3]
	splice(index, 0或1）添加删除或替换
	concat() 	数组合并
	join()	拼接
	find()	返回符合条件的第一个成员
	filter()	返回符合条件的结果
	map()	处理数组的每个成员，并返回
	includes
	indexOf()
	isArray()

Object对象

创建的两种方式

	1
	var person = new Object();
	person.name = 'xxx'
	person.age = 18
	
	2
	var person = {
		name: "xxx",
		age: 18
	}

JSON序列化和反序列化
	JSON：JavaScript对象表示法(JavaScript Object Notation), 是一种轻量级的数据交换格式
	json对象 转换成 json字符串
		JSON.stringify(data)
	json字符串 转换成 json对象
		JSON.parse(str)

Date对象

var now = new Date()

时间转换
	toLocalString()	本地格式时间字符串
	toUTCString()	国际标准时间字符串
	Date.parse(x)	累计毫秒数（1970/1/1 ~ 本地时间）
	Date.UTC(x)		累计毫秒数（1970/1/1 ~ 国际时间）

时间获取
	getDate()	日
	getDay()	星期
	getFullYear()
	getYear()
	getHours()
	getMinutes()
	getSeconds()
	getTime()	返回累计毫秒数（1970/1/1）

Math对象

内置方法
	abs()
	max()
	min()
	ceil()		向上取整
	floor()		向下取整
	random()	生成0-1随机数
	round()		四舍五入

Function对象

函数在程序中代表的就是一段具有功能性的代码

函数声明
	1:	function name(args){
			body;
			return value
		}

	2:	var name = new Function("args", "function_body")

函数调用
	func_name()
	预编译：检测代码的语法，变量、函数的声明
	执行阶段：变量的赋值，函数的调用

函数参数
	基本使用
		位置参数，默认参数
	arguments对象
		例：argument.length

函数返回值
	一旦执行return语句，将停止函数的运行
	如果函数不包含返回值，则最后返回 undifined

匿名函数
	即没有变量的函数
		(function (x,y) {
	           console.log(x+y);
	       })(2,3)

函数作用域

	作用域，即变量可访问的范围，控制着变量与函数的可见性和生命周期
	分为全局作用域和局部作用域
	
	局部变量：
		函数内部声明
		生命周期：当前函数被调用完毕后，被内存销毁
		
	全局变量：
		函数外部声明
		生命周期：当前文件执行完毕后，被内存销毁

JS的预编译
	js运行三个阶段:
		1. 语法分析
		2. 预编译：	内存中开辟空间，存放变量和函数
		3. 解释执行
		
	js加载后先检查语法，然后全局预编译，然后解释一行执行一行，执行到函数调用进行局部预编译
	
	全局预编译
		1 创建全局对象Global Object, 即window对象
		2 找变量声明，将变量名作为GO属性名，值undefined
		3 查找函数声明，作为GO属性，值函数体
		
	局部预编译
		1 创建Activation Object对象，执行其上下文
		2 找形参和变量声明，作为AO属性名，值undefined
		3 将实参值和形参统一
		4 函数体里找函数声明，值函数体

BOM对象

Browser object model 浏览器对象模型
，即用于操作浏览器的对象

windows对象

窗口方法
	alert()
	confirm()	弹出确认框
	prompt()	弹出消息输入框，可设默认值
	close()
	open()
	
定时方法
	循环定时器
		var ID = window.setInterval(code, millisec)
		window.clearInterval(ID);
	单词定时器
		var ID = window.setTimeout(code, millisec)
		window.clearTimeout(ID)

Location对象（地址栏）

location.protocol	协议
location.port		端口
location.hostname	域名
location.host		域名：端口
location.pathname	路径
location.search		查询字符串
location.href		完整地址信息
location.assign()	页面跳转
location.reload()	刷新页面

本地存储对象

localStorage	本地永久存储
	localStorage.setItem("变量名","变量值");
	localStorage.getItem("变量名")
	localStorage.removeItem("变量名")	从存储对象中删除一个变量对应的数据
	localStorage.clear()				从存储对象中删除所有数据

sessionStorage	本地会话存储
	（同上）

均只能存储字符串类型的对象

DOM对象

Document Object Model 文档对象模型
整个html文档，会保存一个文档对象document

查找标签

直接查找
	document.getElementsByTagname()
	document.getElementsById()
	document.getElementsByClassName()

导航查找
	elementNode.parentElement           父节点标签元素
	elementNode.children                所有子标签
	elementNode.firstElementChild       第一个子标签元素
	elementNode.lastElementChild        最后一个子标签元素
	elementNode.nextElementSibling     	下一个兄弟标签元素
	elementNode.previousElementSibling  上一个兄弟标签元素

CSS选择器查找
	document.querySelector("css选择器")  	获取查找到的第一个元素，返回标签对象（dom对象）
	document.querySelectorAll("css选择器"); 	获取查找到的所有元素,返回数组

绑定事件

静态绑定：直接把事件写在标签元素中
	例：<div id="div" onclick="foo(this)">click</div>
动态绑定：先获取，后绑定

常用事件：
	onload
	onsubmit
	onchange
	onmouseover
	onmouseleave	离开被选元素
	onkeydown
	onkeyup
	onfocus		获取焦点
	onblur		失去焦点

如何阻止事件冒泡
	event.stopPropagtation()

this关键字

操作标签

文本操作
	innerHTML
	innterText
	
value操作
	input, select, textarea标签没有文本，显示内容为value属性
	
css样式操作
	例：ele.onclick = function (){
	        this.style.color = "red"
	    }

class属性操作
	elementNode.setAttribute("属性名","属性值")    
	elementNode.getAttribute("属性名")       
	elementNode.removeAttribute("属性名");

节点操作
	document.createElement("标签名")		创建节点：
	somenode.appendChild(newnode)		插入节点
	somenode.insertBefore(newnode,某个节点)  
	somenode.removeChild()		获得要删除的元素，通过父元素调用删除
	somenode.replaceChild(newnode, 某个节点);		//替换节点

阻止事件冒泡

event.stopPropagation
	这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。

event.preventDefault()
	这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素。

return false
	它会同时阻止事件冒泡也会阻止默认事件, 可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

事件委派

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

利用事件冒泡原理，将事件触发绑定在父级元素上，可根据事件对象event.target获取到事件原

do-while: 先执行一次，再判断

var sum = 0;
var i = 1;
do{
	sum = sum + i;
	i++;
	console.log(sum);
}while(i <= 1);

迭代方法filter() 过滤

var numbers = [1,2,3,6,19,4,20];
var filterResult = numbers.filter(function(item,index,array){
	console.log('item:'+ item);
	console.log('index:'+ index);
	console.log('array:'+ array);
	return item > 10
});
console.log(filterResult);

迭代方法map()

var mapresult = numbers.map(function(item,index,array){
	return item * 2;
})
console.log(mapresult);

迭代方法foreach()

mapresult.forEach(function(item,index){
	console.log(item);
})

字符串的常用方法

属性
length
方法
charAt() 获取指定的字符
charCodeAt()获取指定的字符对应的编码
concat() 拼接字符串 通常情况下不使用，而用+

字符串的切片方法

第一个参数是起始的位置，第二个参数是结束的位置，顾头不顾尾

slice(start, end) 
方法可提取字符串的某个部分，并以新的字符串返回被提取的部分

substring (start, end)
用于提取字符串中介于两个指定下标之间的字符。

与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数

substr(start, length)

// 第一个参数是起始的位置,第二个参数是结束的位置 顾头不顾尾
console.log(str.slice(2,4));
console.log(str.substring(2,4));
// 第二个参数是返回的字符数
console.log(str.substr(2,6));
console.log(str.slice(-3,-1)); //rld slice(8,10)
console.log(str.slice(8,10)); 

Date:

var now = new Date();
console.log(now);
console.log(now.getDate())  //获取月份的第几天（1-31）
console.log(now.getMonth())  //获取月份（0~11）
console.log(now.getFullYear())  //获取年份
console.log(now.getDay()) //获取一星期中的第几天(0~6)
//日期格式化方法
console.log(now.toDateString());
console.log(now.toTImeString());
//常用
console.log(now.toLocaleDateString());
console.log(now.toLocaleTimeString());
console.log(now.toLocaleString());

获取数字时钟格式的时间

function nowNumTime(){
	var now = new Date();
	var hour  = now.getHours(); //0 ~ 23.   //19
	var minute = now.getMinutes();
	var second = now.getSeconds();
	// 18 > 12  ? 18-12  : 8
	var temp = '' + (hour > 12 ?  hour - 12 : hour);
	if(hour === 0){
		temp = '12';
	}
	temp  = temp +(minute < 10 ?  ':0': ":")+ minute;
	temp  = temp +(second < 10 ?  ':0': ":")+ second;
	temp = temp + (hour >= 12 ?  ' P.M.': " A.M.");
	return temp;
}
var nownum = nowNumTime();
console.log(nownum);

字符串和数值相互转换

var str = '13131.9090013';
// 字符串转数值类型
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(typeof parseFloat(str));
var a  = Number(str);
console.log(isNaN(a)); //NaN  

var  num = 1313.179;
// 强制类型转换
console.log(num.toString());
console.log(typeof num.toString());
console.log(String(num));

// 隐式转换
console.log('' + num);
console.log(''.concat(num));
console.log(Number(num.toFixed(2)));

Global对象的方法

// URI
var uri = 'http://www.apeland.cn/web index.html?name=zhangsan';
// encodeURIComponent()编码 使用最多的方法
console.log(encodeURI(uri));
console.log(encodeURIComponent(uri));

// 解码 decodeURIComponent()
// decodeURI(encodeuri);
// decodeURIComponent(encodeuri);

random运用

// 1.获取min到max之间的整数 (1~100)
function random(max,min){
	return Math.floor(Math.random() * (max-min) + min);
}

// 2.获取随机颜色  rgb(0~255,0~255,0~255);
function randomColor(){

	// var result
	var r = random(0,256),g = random(0,256),b = random(0,256);
	// 模板字符串 ``
	var result = `rgb(${r},${g},${b})`;
	return result;
}
var rc = randomColor();
console.log(rc);
document.body.style.backgroundColor = rc;


// 3.随机验证码   四位  数字+ 字母 (大写) 65Yz
function creatCode(){
	// 设置默认的空的字符串  
	var  code = '';
	// 设置长度 
	var codeLength = 4;
	var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
	for(var i  = 0; i < codeLength; i++){
		// 设置随机范围 0~36
		var index = random(0,36);
		code +=  randomCode[index];
	}
	return code;
}
var rndcode = creatCode();
console.log(rndcode);
document.write(`<h1>${rndcode}</h1`)