JavaScript -小記

JS引入方式：
 1、內嵌方式
 2、外鏈方式 
 
js實現幻燈片（圖片播放）

常見變量命名：
1、駝峯式
2、帕斯卡：每個單詞的首字母大寫
3、匈牙利：屬性+類型+對象描述   ,G_Str_w3c 

window中常用的提示框：
	1. alert  
	2. confirm
	3. prompt

數據類型：
	1. 原始數據類型
		存放在棧中，變量與其值存放在一處
		
		undefined、null、number、string、boolean
	
	2. 引用數據類型-複合數據類型
	
typeof -- 查看數據類型

條件控制：
	if、switch（支持字符串的）、三元運算、

循環控制：
	while
	do...while
	for
	for...in  一般在數組或對象中使用  ，直接遍歷結果爲數組的索引或者對象中的屬性名
	break
	continue

類與對象：

	JavaScript類本身也是一種對象。
	
	自定義對象：
		var obj = {
			name:'tom',
			age:2
		} ;
		或者
		var obj = new Object();
		obj.name = 'tom';
		
		if(obj.name){.....}
		或者
		if("name" in obj){.....}
		
		屬性獲取：
		1、使用點操作符  obj.name
		2、使用中括號[]   obj["name"]    --- 可以針對複雜的鍵問題
		
		
		靜態類：
		
		//此種形式叫對象直接量
		var Person = {
		  name:'jerry',
		  age:2
		} ;
		
		非靜態類：
		var Car = function(name,color){
			
			this.name = name ;
			this.color = color ;
			this.say = function(){
				alert(this.name);
				// 此處的this指向的是當前的對象function（函數也是對象），即指向say ，
				// 但是發現say中沒有name這個屬性，所以就到其父親那裏尋找name,如果找到則使用（this就代表有該屬性的對象），否則繼續向上一層父親查找，知道最頂層，如果沒有則undefined
			};
		}
		
		//注意對於非靜態類需要先實例化（採用new操作符）纔可以訪問其內部屬性
		var car = new Car('bmw','red');
		
		
		
	with關鍵字：   --- 儘量少用，容易浪費系統資源
		with(obj){
			alert(name);
		}
	
	this：代表當前對象，對於比較複雜的對象或者調用，如何區分this到底代表誰 ——  誰調用（該方法）則this表示的就是誰。
	
	prototype:
	
	var Car = function(){};
	// 通過prototype放入公開屬性
	Car.prototype.name = 'bmw';
	Car.prototype.color = 'red';
	Car.prototype.say = function(){};
	
	類屬性：
	Car.run = function(){};
	類方法：
	
	對象屬性：
	對象方法：
	

	JavaScript中常用內置對象：
		1、String
			var str = new String('hello world'); // new 方式
			var  str = "hello world" ;  // 對象直接量方式
			常用屬性與方法：
			Global的方法： parseInt parseFloat 
			str.length
			str.charAt(1); //返回指定索引出字符
			str.charCodeAt(2);//返回指定索引處的字符的ASCII編碼
			str.concat('hello','wor','world') ; // 鏈接字符串
			str.indexOf('world'); // 返回首次出現的world的位置
			str.lastIndexOf('hello');
			str.replace('world','heiheiru');//經常配合正則使用 : str.replace(/o/g,'p'); 全局替換所有o
			str.slice(2,6);
			str.split('#');
			str.substr(2,5)
			str.substring();
			"HELLO".toLowerCase();
			str.toUpperCase()
			str.toString();
			str.match(regex) ; // 返回正則匹配的所有結果構成的數組
			可以利用prototype給String追加其他的方法。
			
			
		2、Date
			
			var date = new Date() ;  // 返回當前日期時間
			
			方法：
				getDate() ; // 返回 0-31 
				getDay() ; // 返回一週中的某一天 0 -6 
				getMonth(); // 0-11 
				getFullYear() ;// 返回四位年份  ， getYear() 被廢棄
				getHours() ; // 0-23 
				getMinutes();
				getSeconds(); // 
				getMilliseconds() ;//
				getTime(); //返回從1970年到現在所經過毫秒
				
				Date.parse(dateVal) ; // 返回1970到指定時間的毫秒數
				toTimeString() ; // 將Date對象的時間部分轉化爲字符串
				toDateString() ; // 將Date對象日期部分轉換爲字符串
				
				setDate() ;// 設置日期中月份的某一天（1-31）
				setMonth() ;// 0-11
				setFullYear() ;// 四位數
				setHours() ; // 0-23
				setMinutes() ;// 0-59 
				setTime();// 利用毫秒數設置時間
				
			
		3、Number
			屬性:
				MAX_VALUE 、MIN_VALUE、NaN 、NEGATIVE_INFINITY 負無窮、POSITIVE_INFINITY正無窮
			方法：
				toString() ;
				toFixed(0-20) :  參數指定數字保留多少位小數
				
			
		4、Array
			屬性： length 、prototype
			
			var arr = new Array(1,2,3,4,"a","hello",{x:1,y:3}); // 裏面可以放複雜類型的數據，類型不必一致
			var arr = [1,2,3,4,"a","hello",{x:1,y:3}] ; // 對象直接量定義方式
			
			concat() ; // 連接不同數組,將多個數組內容放置到一個數組中
			var arr1 = [1, 2, 3, 4];
			var arr2 = ['a', 'b', 'c'] ;
			arr1.concat(arr2);  // 
		
		    join() ; //將數組中的元素通過指定的參數連接起來，返回該字符串。
			arr1.toString() // toString默認利用逗號將數組元素連接起來並返回
			pop() ; // 返回並刪除數組中最後一個元素
			push(); //向數組末尾添加一個或多個元素，並返回新的數組長度。
			
			//清空數組
			arr = [] ;
			或者  arr.push();
			
			unshift() ; //向數組頭部添加一個或多個元素
			reverse() ; // 顛倒數組元素
			shift() ; // 刪除數組第一個元素
			slice();
			splice(index,howMany[,elem]); // 從index開始刪除howMany個元素,並添加元素到刪除的元素處
			sort() // 排序 ，有很多排序算法
			sort(); // 無參數時，對數組排序先排序第一位，。。。
			sort(function(a,c){if(a > b){return 1}else{return  -1}) ; // 自定義排序算法
			sort(function(){renturn a-b}) // 從小到大排序
			sort(function(){renturn b-a}) // 從大到小排序
			自定義算法可以利用數軸來表示：  -num ———————————————0————————————————————— +num
			返回負數時，就調換倆個元素的位置，返回正數則不調換，如果是零也不調換
			
			
		5、Math
			屬性：
			     E、LN2、LN10、PI、SQRT2 等
			方法：
				 abs(x) ; // 絕對值
				 ceil(x) ; // 向上舍入  1.1 -》 2  ， 1.000 -》 2
				 floor(x) ; // 向下舍入
				 round(x) ; // 四捨五入
				 exp(x); // e的指數
				 max(x,y,z,....);//返回x y ,z ...中最大的值
				 min(x,y,z,...)
				 pow(x,y); // x的y次冪
				 random() ;// 隨機數在0 - 1 之間
				 
		6、Function
			屬性：
				arguments   、arguments.length（利用參數個數模擬其他語言的方法重載）
				(
					function(i){
						alert(i);
						arguments.callee(++i);
					}
				)(0);
			方法：
				arguments.callee()
			
			使用Function對象定義函數 ,最後一個參數作爲函數體
			var abc = new Function('a','c','c',"alert(a+b+c);");
			abc();
		7、Global
		8、Window
		
		
	DOM  - 文檔對象模型
	
	每當瀏覽器打開一個窗口，就自動構建一個window對象。
							DOM
							 |
						  window
						     |
	|---------------------------------------------------------|
	|            |            |              |
Navigator       Screen       History        Location        Document

	window的方法：
		
		 setTimeout();
		 clearTimeout();
		 setInterval();
		 clearInterval();
		 
    Navigator : 主要包含客戶端瀏覽器的信息
		判斷瀏覽器類型及版本信息
		cookieEnabled --- 判斷cookie是否啓用
		userAgent --  瀏覽器信息，一般利用string的match方法篩選所需要的屬性信息
		
	Screen ：包含了客戶端屏幕信息
		height、width、avaiHeight、avaiWidth
		
    History: 瀏覽器當前window的歷史記錄
		length  -- 歷史記錄長度
		back();
		forward();
		go(-/+num)；
	Location: 包含了當前URL的信息
		hash // 設置或返回url錨點（如 ： #course2）
		href // 設置或返回url
		hostname // 設置或者返回當前主機名
		pathname // 設置或者返回當前url的路徑部分
		protocol // 設置或者返回協議
		search // 設置或返回查詢字符串(包含問號) （不包含錨點部分）
		assign() // 加載新的文檔
		reload() // 重新加載
		replace() //新文檔替換當前文檔
		
DOM節點操作： 通過document對象操作html文檔
	
	訪問節點:
	getElementById();
	getElementsByName(); // 返回數組形式
	getElementsByTagName(); // 返回數組
	
	創建節點:
	createElement();
	creatTextNode();
	
	添加節點：
	appendChild(node) ;
	insertBefore(newNode,oldNode);
	
	刪除節點：
	removeChild(node);
	獲取父節點:
	parentNode ;
	
	替換節點：
	replaceNode(newNode,oldNode);
	
	使用文檔碎片提高js執行效率 ：  寫js時儘量減少操作DOM，可以一次操作完成就不要多次操作，減少DOM元素的查找。
	createDocumentFragment()
	
	表格操作：
	caption ：
		createCaption();
		deleteCaption();
	thead:
		createTHead();
		deleteTHead();
	tfoot:
		createTFoot();
		deleteTFoot();
	tbody:
		rows 
		insertRow();
		deleteRow();
	cell:
		insertCell();
		deleteCell();
		
	DOM元素的屬性：
		setAttribute(name,value);
	    getAttribute(name);
		removeAttribute(name);
		常見如style ,style.cssText
	    innerText ;
		innerHtml ;
		outerText;
		outerHtml ;
		
事件 ：
	HTML事件
		onload();
		onresize();
		onscroll();
	鍵盤鼠標事件
		onclick();
		ondbclick();
		onmousedown();
		onmouseover();
		onkeypress();
		onkeydown();
		onkeyup();
		
	表單事件
		onfocus();
		onblur();
		onchange();
		onreset();
		onsubmit();
		
	Event對象的屬性或方法
		button -  標識鼠標的左中右三個鍵
		ctrlkey 
		altkey
		shiftkey
		type
		target 
		srcElement
		screenX/screenY
		
		preventDefault()
		stopPropagation() ; // 阻止事件冒泡  不同瀏覽器有區別
		
		
	事件流
		捕獲型事件（由外而內的查找過程）
		冒泡型事件（由內而外）
			如常用賦值形式的事件 ： document.getElementById('btnSubmit').onclick = function(){} ;
		
		事件的綁定是可以覆蓋的（同一個事件的先後綁定順序）
		不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload
		
		//阻止事件冒泡函數
		function stopBubble(e)
		{
			if (e && e.stopPropagation)
				e.stopPropagation()
			else
				window.event.cancelBubble=true
		}
		
	事件處理和監聽函數
		addEventListener(eventName,callback,isbublePop); // 第三個參數指定是冒泡式還是捕獲式事件
		removeEventListener();
		attachEvent();
		detachEvent();
		
	Cookie :
		cookie的容量不超過4K 
		添加：
			document.cookie = "值" ; 多個cookie值之間使用分號空格分隔