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();
			隻能阻止一層事件冒泡