javaweb學習筆記(九):JavaScript(2)
目錄
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>