Python全栈 Web（前端三剑客之JavaScript 从小白鼠到武林盟主）

// HTML嵌套：
// 	元素标签中绑定JS代码：
// 		"<p onclick="js操作">文本</p>"
// 	文档嵌套：
// 		"<script type="text/javascript"> js操作 </script>"
// 	外部链接：
// 		"<script src="外部.js文件""> js操作 </script>"
// 		href：边加载边执行  src：加载完毕后执行

JS常用操作：
	alert("hello wotld!");				普通网页弹窗
	pormpt("please input");				接受用户输入的弹窗
	console.log("hello wotld");			输出到控制台
	document.weite("<h1>Hello</h1>");	
		浏览器可以解析字符串内的 HTML标签
		将标签添加到body末尾  若事件方式会重写网页

var a = 15;					变量
const PI = 3.14;			常量		全大写方式 声明必须赋值

方法：
	var pi = 3.141592693975358;
	pi.tofixed(2);  		保留小数点后两位 //3.14

	var s = "Paris";
	s.charCodeAt(2);		查看r对应的Unicode编码

	var s = "张";
	s.toString();			转换为十六进制
	var s = "\u4e00";		十六进制转换为中文
	"\u4e00" ~ "\u9fa5";	中文的范围

	console.log(typeof s);	查看变量s的数据类型
	console.log(typeof(s));



转移符：
	\n：换行
	\t:制表符
	\':'
	\":"
	\\:\



基本数据类型：
	number：
		整数：
			0~9 	十进制 
			0~7		八进制    以0开头 013 
			0~f		十六进制  以0x为前缀 0x45
		小数：
			3.14	小数点计数法
			1.5e3	指数/科学计数法
	string：
		所有引号引起来的字符串
	boolean：
		true = 1	真
		false = 0	假
	undefined：
		所有声明未赋值的变量或访问对象属性不存在时
	null：
		空类型
引用数据类型：
	数组、函数、对象

数据类型转换：
	隐式转换：
		字符串与任何数据类型相加都等于字符串类型
		boolean类型可以当number类型使用
	强制转换：
		toString()			任意类型转换为字符串类型
		Number()			数字字符串转换为number类型 失败返回NaN
		parseInt()			解析数字开头的字符串 遇到非整数(包括小数)停止 遇到小数只取整数部分
		parseFloat()		等同于parseInt只解析小数部分 可以解析指数计数法
运算符：
	赋值运算符：=
	算数运算符： + - * %  3 / 2
	自增自减：
		++ --	++在后先使用后自增 ++在前先自增后使用（自减用法相同）
	关系运算符：
		> < >= <= == != === !==
		数字与字符串比较：
			先转换为数字 失败返回NaN 结果为False
			NaN 与任何数据做 != 都为 true  包括 NaN != NaN 结果为 true
			NaN 与任何数据 除了!= 其他都为 false
		字符串之间用Unicode码比较
		== != 等 不等:
			先进行数据转换后进行数值得比较
		=== !== 全等/恒等 不全等/不恒等：
			数据类型和值必须全部等
	逻辑运算符：
		!	非
		&&	与
		||	或
	位运算：
		&	按位与
		|	按位或
		^	按位异或
/*
数据交换
	var a = 3;
	var b = 5;
	1.
		var c = a;
		a = b;
		b = c;
	2.
		a = a + b;	a += b;
		b = a - b;	b = a -b;
		a = a - b;	a -= b;
	3.
		a = a ^ b;	a ^= b;
		b = b ^ a;	b ^= a;
		a = a ^ b;	a ^= b;
	4.Python特有
		a, b = b, a
*/
	条件运算符：
		单目运算符：
			++ -- ! typeof -
		双目运算符：
			+ - * % ^ && || & | ! = 等
		三目运算符：
			? : 相当于简单版的 if-else 结构
流程控制：
	if 语句：
		if (条件) {
			语句块;
		} else if{
			语句块2;
		...

		} else {
			语句块n;
		}
	switch 语句：
		switch (变量) {
			case 值1：
				语句块1;
				break;  //可以省略
			case 值2：
				语句块2;
				break;
			...

			default：
				语句块n; //想过与 if-else if 结构的else
		}

	while 循环：
		while (条件) {
			循环操作;
		}

	do...while循环（至少循环一次）：
		do{
			循环操作;
		}while(条件);

	循环可以任意嵌套：外层走一次 内层走一轮

函数：
	定义函数：
		function 函数名(参数列表){
			函数体
			[ return 返回值] //[]代表可省略
		}
		在任何可以书写JS代码的地方都可以调用
	匿名函数：
		function (参数列表) {
			函数体
			[return 返回值]
		}
		为某个事件而生的 只能用作与某个事件

作用域：
	所有用 var 关键字声明的变量都是当前作用域的变量
	如果不使用 var 关键字声明的变量都是全局变量
	变量所在的并可被访问的区域叫做作用域

数组：
	创建数组：
		var arr = [];
		var arr = ["a", "b", "c", 1, 2, 3];
		var arr = new Array(5);	//默认5个 undefined值  下标从5开始
		var arr = new Array();
		var arr = new Array("a", "b", "c", 1, 2, 3);
	索引：
		arr[2]; 	//"c"
		arr[100];  // undefined
	索引赋值：
		arr[arr.length] = 0; //清空数组
		arr[2] = "F"; //["a", "b", "F", 1, 2, 3]
		arr[100] = "张3"; //["a", "b", "F", 1, 2, 3, "张3"]
		"张3"的下标为100  3 的下标为5 中间的下标为空值 取值返回 undefined
	获取数组长度：
		var len = arr.length;
	数组常用的API：
		var arr = [];
		arr.toString();			将数组转换为字符串用“,”链接
		arr.join(seperator);	返回用seperator字符串链接的长字符串
		arr.reverse();			将数组元素翻转 直接改变现有的数组
		arr.sort();				对数组进行排序默认按照Unicode码排序  直接改变现有的数组
		arr.sort(function);	function：			排序函数
		arr.sort(function(a, b) {return a - b});利用匿名函数升序排序
		arr.sort(function(a, b) {return b - a});利用匿名函数降序排序
	进出栈操作：
		arr.push(element);		压入  向数组的尾部添加新元素并返回数组长度
		arr.pop();				弹出	  删除数组中的最后一个元素并返回删除的内容
		arr.unshift(element);	向数组头部添加一个新的元素并返回长度
		arr.shift();			删除数组头部的第一元素并返回删除的内容
二维数组：
	创建二维数组：
		var names = [
			[1, 2, 3, 4, "a", "b"],
			["a", "b", 3, 4, 5, 6]
		];
字符串：
	声明字符串：
		var str = "字符串";
		var str = String("字符串");
		var str = new String("字符串");
	获取字符串长度：
		str.length;
	字符串常用API：
		str.toUpperCase();		返回完全大写字符串
		str.toLowerCase();		返回完全小写字符串
		str.trim();				返回去掉字符串两侧空格后的内容
		str.charAt(index);		返回字符串内下标为index的字符
		str.split(seperator);	返回用seperator字符串拆分后的数组
		str.charCodeAt(index);	获取指定字符的Unicode码
		str.indexOf(value, fromIdex);
			value:
				要查找的字符串
			fromIndex：
				开始位置
			返回值：
				返回第一次出现的字符串 没有返回-1
		str.lastIndexOf(value, fromIdex);
			value：
				查找的字符
			fromIndex：
				开始位置
			返回值：
				返回最后一次出现的字符串 没有返回-1
		str.substring(startm, end);	
			startm：
				开始位置
			end：
				结束位置
			返回值：
				返回 startm~end-1 截取到的字符串
		str.relplace(substr/regexp, replacement);
			substr/regexp:
				正则表达式/修饰符
			replacement:
				要替换的字符串
			返回值：
				返回替换后的字符串
		str.match(substr/regexp);
			substr/regexp:
				正则表达式/修饰符
			返回值:
				返回满足匹配条件的字符串格式


内置对象：
	RegExp对象：
		创建：
			var reg = /正则表达式/修饰符；
			var reg = new RegExp("匹配模式", "修饰符");  //装饰符可以省略
		修饰符：
			i： 	ignorecase (忽略大小写)
			g： global	   (全局匹配)
			m:  multiple   (允许多行匹配)
		方法：
			test(string);
				string：
					要验证的字符串
				返回值：
					如果能够匹配到string返回true否则返回false

	Math对象：
		属性：
			Math.PI;
			Math.E;
		方法：
			三角函数：
				Math.sin();
				Math.cos();
				Math.tan();
			计算函数：
				Math.sqrt();		开平方
				Math.log();			求对数
				Math.pow(x, y);		求x的y次方
			数值函数：
				Math.abs(x);		绝对值
				Math.max(a, b, c);	求最大
				Math.min(a, b, c);	求最小
				Math.random();		随机数(0~1)
				Math.round(x);		将x四舍五入
	Date对象：
		获取当前日期:
			var date = new Date();
		创建自定义时间对象：
			var date = new Date("2018-9-12 12:00:00");
		方法：
			date.getTime();			返回1970-1-1 00:00:00 到date所经过的毫秒
			date.setTime(ms);		返回根据给定的毫秒结合1970计算日期
			date.getFullYear();		返回date对象对应的年
			date.getYear();			返回1970至date时间所进过的年
			date.getMonth();		返回0~11 表示1~12 月 0 代表一月
			date.getDate();			返回date对象所对应的日
			date.getDay();			返回date对应的是星期几
			date.getHours();		返回date对应的小时
			date.getMinutes();		返回date对应的分钟
			date.getSeconds();		返回date对应的秒
			date.getMilliseconds();	返回date对应的毫秒
			date.toString();		返回date转换后的标准时期字符串
			date.toLocaleString();	返回date转换后的本地时间日期字符串
			date.toLocaleTimeString();	返回date转换后的（时分秒）被转换后的字符串
			date.toLocaleDateString();	返回date转换后的（年月日）被转换后的字符串
外部对象：
	window对象（BOM模型）
		window.alert();				警告框
		window.potmpt();			输入框
		window.console.log();		终端输出
		window.confirm();			确认框
		window.setInterval(fun, time);
			fun:
				函数  要周期执行的操作 可以是匿名函数
			time：
				要间隔的时间 以毫秒为单位
			ret：
				返回值 返回周期定时器对象
		window.clearInterval(obj);		清除周期定时器对象
		window.setTimeout(fun, time); 	返回一次性定时器对象
		window.clearTimeout(obj);		清除一次性定时器对象

		window.screen;					获取显示器的相关信息
			window.screen.width;			屏幕的宽度
			window.screen.height;			屏幕的高度
			window.screen.availwidth;		可用的宽度
			window.screen.avalheight;		可用的高度
		window.history;					获取当前窗口URL的地址
			window.history.length;			当前窗口所访问过的URL数量
			window.back();					前进
			window.forward();				后退
			window.go(number);				前进或后退number步 负数代表后退
		window.location;				表示浏览器地址栏信息
			window.location.href;			当前窗口浏览的网址 为其赋值可以实现网页跳转
			window.reload();				重新加载当前网页 相当于刷新
		window.navigator;				浏览器的相关信息
			window.userAgent;				显示浏览器的相关信息
			...								一系列没屌用的信息
		window.document;				真正的大佬来了 上面的都是弟弟 都是弟弟行为
			走丢了...

	document 对象/属性（DOM模型  window.document;）
		DOM树：
			网页加载后在内存中形成的节点树 节点：每一个文本、元素、属性
			直接操作内存实现网页的同步变化

			查找元素节点：
				var elem = window.document.getElementById("元素id");
					window 可以省略不写 包括上面所有的window
					返回值：
						返回对应id的元素 在js中的表现形式（DOM对象）
					DOM对象属性：
						elem.innerHTML;		获取或修改（赋值）DOM对象的HTML文本（只对双标记）
						elem.innerText;		获取或修改（赋值）DOM对象的普通文本（只对双标记）
						elem.value;			获取和设置表单控件的值（只针对表单控件）
			读取节点信息：
				elem.nodeType;
					返回值：
						1：元素节点
						2：属性节点
						3：文本节点
						8：注释节点
						9：文档节点
				elem.nodeName;
					返回值：
						标签名：		元素节点
						属性名：		属性节点
						#text：		文本节点
						#document：	文档节点
						#comment：	注释节点
			设置或获取节点的属性：
				elem.getAttribute("attrName");
					attrName:
						要获取的属性名称
					返回值：
						对用属性的值
				elem.setAttribute("attrName", "attrValue");
					attrName:
						要是设置的属性名
					attrValue：
						要设置的属性值
				elem.removeAttribute("attrName");
					attrName:
						要删除的属性名
		查询节点：
			document.getElementById("idName");		根据id查找节点
			elem.parentNode;						返回当前节点的父节点
			elem.childNodes;						返回当前节点的所有子节点（数组）
			elem.children;							返回当前节点的所有子"元素"节点（数组）
			elem.nextSibling;						返回当前节点的下一个兄弟节点
			elem.nextElementSibling;				返回当前节点的下一个兄弟"元素"节点
			elem.previousSibling;					返回当前节点的上一个兄弟节点
			elem.previousElementSibling;			返回当前节点的上一个兄弟"元素"节点
			document/elem.getElementByTagName("标签名");
				document:
					整个文档内查找
				elem:
					某个元素内查找
				返回值：
					指定标签的数组
			document.getElementsByName("Name属性值");
				返回值：
					name属性的值为Name属性值得所有元素的数组
			document/elem.getElementsByClassName("class属性值");
				返回值：
					包含指定class属性值得所有元素的数组
		增加节点：
			创建节点：
				var text = document.createTextNode("文本内容");
					创建文本节点 文本节点可以添加到元素中
				var elem = document.createElement("标签名");
					返回值：
						创建好的元素
					例如：
						var div = document.createElement("div");
						div.setAttribute("id", "contarner");
						div.innerHTML = "动态创建的元素文本";
						div.style.color = "red";
						div.style.fontWeight = "bold";
			增加节点：(由父元素节点发起)
				document.body.appendChild(elem);	将元素追加到body中
				parentNode.appendChild(elem);		将元素追加到parentNode（父元素节点）中
				parentNode.insertBefore(newElem, oldElem);
					parentNode：
						父元素节点
					newElem：
						要插入的心元素节点（插入到旧节点前）
					oldElem：
						父元素中已有的元素节点
		删除节点：
			parentNode.removeChild(elem);
				parentNode:
					父元素节点（删除节点只能由我（父元素节点）发起  
					没有办法 就是这么强大 哈哈哈哈~）
				elem：
					要删除的元素节点

事件：
	所有事件前面绑定时都必须加 on 例如:click --> onclick

	click:
		当鼠标单击时触发该事件
	dbclick：
		当鼠标双击时触发该事件
	mouseover:
		当鼠标移入元素时触发的事件
	mouseout：
		当鼠标移出元素时触发的事件
	mousemove：
		当鼠标在元素内移动时的事件
	keydown：
		当键盘键位按下时触发的事件
	keypress：
		当键盘键位按下时触发的事件
	keyup：
		当键位抬起时所触发的事件
	load：
		当元素加载完成时所触发的事件（body）
	change：
		当元素内容发生变化时所触发的事件（select）
	input：
		当元素内容发生变化时所触发的   实时同步事件
	focus：
		当元素获取焦点时所触发的事件（输入框类）
	blur：
		当元素失去焦点时所触发的事件（输入框类）
	submit：
		当表单被提交时触发的事件

事件绑定：
	标签绑定:
		"<标签名 on事件名=“触发操作”></标签名>"
	动态绑定：
		DOM对象.on事件名 = function() {};	触发匿名函数操作
			在JS绑定事件中  
			允许使用this来表示触发当前元素事件的DOM对象
			必须是在匿名函数内才可以这么写
事件行为：
	load：(通常为body添加)
		1."<body onload="function"></body>"

		2. window.onload = function{
			网页加载后自行的操作
			通常为避免某些对象或属性由于书写顺序拿不到的问题
		}
	submit：(表单提交)
		表单对象.onsubmit = function() {
			return true;  允许提交
			return false; 不允许提交
		}
	change：
		主要用于下拉列表
		DOM对象.onchange = function() {
			每次当选项发生改变时就会激发一次该事件
		}
事件对象 event：
	任何事件出发后 都会产生一个event对象
	默认自动创建 想调用就当参数传入 不想就省略
	获取event对象：
		1.HTML元素中绑定事件
			<元素名 on事件名=“btnClick(event)”></元素名>

			<script>
				function btnClick(event) {
					event 表示就是事件对象
				}
			</script>
		2.JS动态绑定事件：
			var d1 = document.getElementById("d1");
			d1.onclick = function(event) {
				event表示的就是事件对象
			}
	事件源：
		获取事件源：
			event.target;
			得到的是一个DOM对象
			在JS绑定事件中 事件源等同于 this
		鼠标事件属性：
			mouseover，mouseout，mousemove，click
			1.offsetX，offsetY
				获取鼠标在元素上的坐标点（元素內容区的左上角为0,0 点）
		键盘事件属性：
			keydown，keypress，keyup
				keydown，keypress事件中允许增加返回值 
				通知浏览器是否正常处理按下的字符  true正常显示  false不显示字符
			keydown：
				只要按下键位就触发不管有没有输出
					which属性：
						按下键位的键位码
			keypress：
				只有按下输出键时才会触发
					which属性：
						输出的字符的ASCII码
			keyup：
				只要按下任意键并抬起就会触发

事件冒泡：
	什么是事件冒泡？
		例如有三层的div嵌套 
		分别绑定onclick事件
		当点击最外层元素时执行最外层的onclick事件
		当点击内层的元素时依次向外成执行  有多少成执行多少次
		像冒泡似的执行代码 就是事件的冒泡
	阻止事件冒泡：
		event.stopPropagation();
			只能阻止一层事件冒泡