1. 程式人生 > >JavaWeb總複習——js基礎

JavaWeb總複習——js基礎

js簡介:

		JavaScript一種直譯式指令碼語言,是一種動態型別、弱型別、基於原型的語言,
	內建支援型別。它的直譯器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的指令碼語言

1. js的組成:

		ECMAScript(語法)
		BOM(瀏覽器物件模型)
		DOM(文件物件模型)

2. html和js的整合

		方式1:內部編寫js
			<script type="text/javascript">js程式碼</script>
		方式2:
			外部有一個獨立的js檔案  字尾名:.js
			在html中通過script的src屬性匯入
				<script src="js的路徑"></script>
		注意:
			一旦使用了src屬性,那麼script標籤體中的js程式碼將不再執行了.		

3. 變數:

		var 變數名=初始化值;

4. 資料型別:

		原始型別(5種)
			Undefined
			Null
			String 用引號引起來的內容
			Number
			Boolean
			
			通過typeof可以判斷一個值或者變數是否是原始型別,若是原始型別,還可以判斷屬於那種.
				typeof 變數|值
		引用型別

5. 運算子:

		關係運算符:
			兩邊值都是字串,比較ascii碼
			兩邊都是數字,和java一樣
			一邊是數字,一遍是字串形式的數字, 可以比較
			一邊是數字,一遍是普通字串 可以比較 值永遠是false
		等性運算子
			"66"==66  true
			"666"===666 false

6. js的語句

		if while for 和java一樣
		//////////////////
		獲取元素:
			var obj=document.getElementById("id值");
		獲取元素的value屬性
			var val=document.getElementById("id值").value;
		設定元素的value屬性	
			document.getElementById("id值").value="sdfsdf";
		獲取元素的標籤體 
			var ht=document.getElementById("id值").innerHTML;
		設定元素的標籤體
			document.getElementById("id值").innerHTML="ssss";
	
		定義函式:
			方式1:function 函式名(引數列表){函式體}
			方式2:
				var 函式名=function(引數列表){函式體}
			注意:
				函式宣告的時候不用宣告返回值型別
				引數列表上不要寫引數型別
				通過return結束方法和將值返回

7. 事件:

		onclick 單擊
		onsubmit 表單提交
		onload  頁面載入成功或者元素載入成功

8. 事件和函式繫結

		方式1:通過元素的事件屬性
			<xxx onxxx="函式名(引數列表)">
		方式2:派發事件
			document.getElementById("id值").onxxx=function(){...};
			document.getElementById("id值").onxxx=函式名;

案例1-定時彈出廣告

需求:
	開啟頁面後4秒,展示廣告,2秒之後,該廣告隱藏.再停2秒,繼續展示.
技術分析:
	定時器
定時器(BOM-window物件)
	setInterval(code,毫秒數):週期執行
	setTimeout(code,毫秒數):延遲多長事件後 只執行一次.
	
	清除定時器
		clearInterval(id):
		clearTimeout(id):

bom(瀏覽器物件模型)總結

所有的瀏覽器都有5個物件
	window:視窗
	location:定位資訊 (位址列)
	history:歷史

window物件詳解:

如果文件包含框架(frame 或 iframe 標籤),瀏覽器會為 HTML 文件建立一個 window 物件,
併為每個框架建立一個額外的 window 物件。
常用的屬性:
	通過window可以獲取其他的四個物件
		window.location 等價域 location
		window.history 等價於 history
		...
常用的方法
	訊息框
		alert("...."):警告框
		confirm("你確定要刪除嗎?"):確定框 返回值:boolean
		prompt("請輸入您的姓名"):輸入框 返回值:你輸入的內容
	定時器
		設定定時器
			setInterval(code,毫秒數):週期執行
			setTimeout(code,毫秒數):延遲多長事件後 只執行一次.
			
			例如:
				setInterval(showAd,4000);
				serInterval("showAd()",4000);
		
		清除定時器
			clearInterval(id):
			clearTimeout(id):
	開啟和關閉
		open(url):開啟
		close():關閉

location:定位資訊

常用屬性:
	href:獲取或者設定當前頁面的url(定位資訊)
	
	location.href; 獲取url
	location.href="...";設定url 相當於 a標籤

history:歷史

back();後退
forward():向前
★go(int)
	go(-1) 相當於 back()
	go(1) 相當於 forward()

事件總結:

常見的事件:
	焦點事件:★
		onfocus
		onblur
	表單事件:★
		onsubmit
		onchange 改變
	頁面載入事件:★
		onload
	
	滑鼠事件(掌握)
		onclick
	滑鼠事件(瞭解)
		ondblclick:雙擊
		onmousedown:按下
		onmouserup:彈起
		onmousemove:移動
		onmouserover:懸停
		onmouserout:移出
	鍵盤事件(理解)
		onkeydown:按下
		onkeyup:彈起
		onkeypress:按住

繫結事件:

方式1:
	元素的事件屬性
方式2:
	派發事件

dom(文件物件模型)

當瀏覽器接受到html程式碼的時候,瀏覽器會將所有的程式碼裝載到記憶體中,形成一棵樹(document樹)
節點(Node)
	文件節點 document
	元素節點 element
	屬性節點 attribute
	文字節點 text
獲取節點:
	通過document可以獲取其他節點:
		常用方法:
			document.getElementById("id值"):獲取一個特定的元素
			document.getElementsByTagName("標籤名"):通過標籤名獲取一種元素(多個)
			document.getElementsByClassName("class屬性的值"):通過class屬性獲取一類元素(多個)
			document.getElementsByName("name屬性的值"):通過name屬性獲取一類元素(多個)
	設定獲取獲取節點的value屬性
		dom物件.value;獲取
		dom物件.value="";設定
	設定或者獲取節點的標籤體
		dom物件.innerHTML;獲取
		dom物件.innerHTML="";設定
	獲取或者設定style屬性
		dom物件.style.屬性;獲取
		dom物件.style.屬性="";設定
	獲取或者設定屬性
		dom物件.屬性

陣列:

語法:
	new Array();//長度為0
	new Array(size);//指定長度的
	new Array(e1,e2..);//指定元素
	非官方
		var arr4=["aa","bb"];
常用屬性:
	length
注意:
	陣列是可變的
	陣列可以存放任意值
常用方法:(瞭解)
	存放值:對內容的操作
		pop():彈	最後一個
		push():插入 到最後
		
		shift():刪除第一個
		unshift():插入到首位
	列印陣列:
		join(分隔符):將數組裡的元素按照指定的分隔符列印
	拼接陣列:
		concat():連線兩個或更多的陣列,並返回結果。
	對結構的操作:
		sort();排序
		reverse();反轉

引用型別總結:

原始型別中的String Number Boolean都是偽物件,可以呼叫相應的方法
Array:陣列
String:
	語法:
		new String(值|變數);//返回一個物件
		String(值|變數);//返回原始型別
	常用方法:
		substring(start,end):[start,end)
		substr(start,size):從索引為指定的值開始向後擷取幾個
		
		charAt(index):返回在指定位置的字元。
		indexOf(""):返回字串所在索引
		
		replace():替換
		split():切割
		
	常用屬性:length	
Boolean:
	語法:
		new Boolean(值|變數);
		Boolean(值|變數);
		非0數字 非空字串 非空物件 轉成true
Number
	語法:
		new Number(值|變數);
		Number(值|變數);
	注意:
	
		null====>0 
		fale====>0 true====>1
		字串的數字=====>對應的數字
		其他的NaN
Date:
	new Date();
	常用方法:
		toLocalString()
RegExp:正則表示式
	語法:
		直接量語法  /正則表示式/引數
		直接量語法  /正則表示式/
		
		new RegExp("正則表示式")
		new RegExp("正則表示式","引數") 
		引數:
			i:忽略大小寫
			g:全域性
		常用方法:
			test() :返回值為boolean
Math:
	Math.常量|方法
	Math.PI
	Math.random()  [0,1)

全域性★:

	decodeURI() 解碼某個編碼的 URI。 
	encodeURI() 把字串編碼為 URI。

	Number():強制轉換成數字
	String():轉成字串
	
	parseInt():嘗試轉換成整數
	parseFloat():嘗試轉換成小數
	
	eval() 計算 JavaScript 字串,並把它作為指令碼程式碼來執行。