1. 程式人生 > >javaweb學習筆記(九):JavaScript(2)

javaweb學習筆記(九):JavaScript(2)

目錄

1.BOM

1.1window物件

1.2history物件

1.3location物件

2. DOM

2.1dom節點及獲取

2.2Event


1.BOM

1.1window物件

一般來說,Window 物件的方法都是對瀏覽器視窗或框架進行某種操作。而alert()方法、confirm()方法和prompt()方法則不同,它們通過簡單的對話方塊與使用者進行互動。

window物件由瀏覽器直接建立,當瀏覽器載入頁面時,瀏覽器會立刻自動建立window物件,如果要獲得,直接使用即可。

alert() 方法用於顯示帶有一條指定訊息和一個確定按鈕的警告框。

confirm()彈出確認框,點選確定返回true,點選取消返回false。

prompt()彈出對話方塊,兩個可選引數,第一個引數是要在對話方塊顯示的純文字,第二個引數是預設的輸入文字。點選確定返回輸入欄位當前顯示的文字,點選取消返回null。

例:

<!doctype html>

<html>
<head>
	<title>我的js</title>
	<meta charset="utf-8">
        <!--xiao hua  2018-10-30>
	<script type="text/javascript" >

		var num;
		function guess(){
			if(num==undefined){
				num=Math.round(Math.random()*99);
			}
			var input=prompt("請輸入一個100以內的整數!","0");
			if(num==input){
				var bool=confirm("輸入正確,是否重新開始?");
				if(bool==true){
					num=undefined;
					guess();
				}else{
				}
			}else{
				if(input>num){
					alert("大了");
				}else{
					alert("小了");
				}
				guess();
			}
		}
	</script>
</head>
<body>
	<input type="button" onclick="guess();" value="猜猜看" /> <br/>
</body>
</html>

 開啟瀏覽器,檢視,示例如下:

點選猜猜看:

 

②setInterval(code,millisec) 方法與clearInterval() 方法

setInterval(code,millisec) 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。該方法會不停地呼叫函式,直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。

code :要呼叫的函式或要執行的程式碼串。

millisec :週期性執行或呼叫 code 之間的時間間隔,以毫秒計。

返回值:一個可以傳遞給Window.clearInterval()從而取消對 code 的週期性執行的值。

clearInterval() 方法可取消由 setInterval() 設定的 timeout。該方法的引數必須是由 setInterval() 返回的 ID 值。

setTimeout(code,millisec) 方法用於在指定的毫秒數後呼叫函式或計算表示式。該方法只執行code一次。

code :要呼叫的函式或要執行的 JavaScript 程式碼串。

millisec :在執行程式碼前需等待的毫秒數。

clearTimeout() 方法可取消由 setTimeout() 方法設定的 timeout。

③常用屬性:

frames[] 返回視窗中所有命名的框架。

parent 返回父視窗。

opener 返回對建立此視窗的視窗的引用。

1.2history物件

length 返回瀏覽器歷史列表中的URL數量

back() 載入 history列表中的前一個URL。

forward() 載入 history列表中的下一個URL。

go() 載入 history 列表中的某個具體頁面。 例:

window.history.forward();

window.history.back();

window.history.go(1);

1.3location物件

2. DOM

2.1dom節點及獲取

父類(node)

①整個文件是一個文件節點(document)

②每個 HTML 元素是元素節點(element)

③HTML 元素內的文字是文字節點(text)

④每個 HTML 屬性是屬性節點(attribute)

⑤註釋是註釋節點(common)

 

2.2Event

例:事件的兩種新增方式

<html>
<head>
</head>
<body>
	<input type="button" value="點選" id="one"/>
        <!--方式一 -->
	<input type="button" value="點選"  onclick="alert('嘿嘿');" />
</body>
	<script type="text/javascript">
	//方式二:
		var one=document.getElementById("one");
		one.onclick=function(){
			alert("哈哈");
		}
	</script>
</html>