1,javascript 組成部分: 1.ECMAscript(核心標準): 定義了基本的語法,比如:if for 數組 字元串 ... 2.BOM : 瀏覽器對象模型(Browser Object Model) 2,BOM 的組成部分: 1.window對象 每一個子視窗對應的又是一個window ...
1,javascript 組成部分:
1.ECMAscript(核心標準): 定義了基本的語法,比如:if for 數組 字元串 ...
2.BOM : 瀏覽器對象模型(Browser Object Model)
2,BOM 的組成部分:
1.window對象 每一個子視窗對應的又是一個window對象
2. screen對象
3.location對象
4.history對象
5.Navigator對象
6.定時器 (兩種)
7.彈框(三種)
8. document (DOM-文檔對象模型)
1.1window 對象(表示瀏覽器視窗):
- 所有瀏覽器都支持 window 對象。它表示瀏覽器視窗。
- 所有 JavaScript 全局對象、函數以及變數均自動成為 window 對象的成員。
- 全局變數是 window 對象的屬性。
- 全局函數是 window 對象的方法。
- 甚至 HTML DOM 的 document 也是 window 對象的屬性之一
1.2window 尺寸:
查看window尺寸有三種方式適用於不同的情況:
1) w3c標準(適用於老版本ie之外的瀏覽器)
- window.innerHeight - 瀏覽器視窗的內部高度
- window.innerWidth - 瀏覽器視窗的內部寬度
2) 老版本的IE瀏覽器
標準模式:
document.documentElement.clientHeight)
document.documentElement.clientWidth)
怪異模式(向後相容)中:
document.body.clientHeight
document.body.clientWidth
(如何知道是何種模式?
console.log(document.compatMode)可以查看文檔是以什麼方式進行解析的
CSS1Compat 標準模式
BackCompat 怪異模式
)
function getScreen(){ //獲取屏幕的可視寬高 if (window.innerWidth) { //如果window底下有這個屬性,就用這個, w3c標準 return { width : window.innerWidth, height : window.innerHeight } }else{ //老版本IE if(document.compatMode == "CSS1Compat"){ //標準模式 return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } }else{ //怪異模式 return { width : document.body.clientWidth, height : document.body.clientHeight } } } } console.log(getScreen())
1.3 其他 Window 方法
•window.open() - 打開新視窗
•window.close() - 關閉當前視窗
•window.moveTo() - 移動當前視窗
•window.resizeTo() - 調整當前視窗的尺寸
2.1 screen 對象(包含有關用戶屏幕的信息)
- screen.availWidth - 可用的屏幕寬度
- screen.availHeight - 可用的屏幕高度
<script> document.write("可用寬度:" + screen.availWidth); document.write("可用高度:" + screen.availHeight); </script>
3.1 location對象(用於獲得當前頁面的地址 (URL),並把瀏覽器重定向到新的頁面)
console.log(location.href) //返回(當前頁面的)整個 URL: console.log(location.hash) //hash 哈希值,也叫錨點,比方說a鏈接中的 console.log(location.host) // host 設置或返回主機名和當前 URL 的埠號。 console.log(location.hostname) // hostname 設置或返回當前 URL 的主機名。 console.log(location.pathname) // pathname 設置或返回當前 URL 的路徑部分。 console.log(location.port) // port 設置或返回當前 URL 的埠號。 console.log(location.protocol) // protocol 設置或返回當前 URL 的協議。 console.log(location.search) // search 參數(查詢字元串) 設置或返回從問號 (?) 開始的 URL(查詢部分)。
// location.href = "http://www.baidu.com" //放到某一個事件中去觸發
4.1 history對象(包含瀏覽器的歷史記錄)
- history.back() - 與在瀏覽器點擊後退按鈕相同
- history.forward() - 與在瀏覽器中點擊按鈕向前相同
<body> <a href="http://www.baidu.com">去百度</a> <button>後退</button> <button>前進</button> <script> var btn1 = document.getElementsByTagName("button")[0]; var btn2 = document.getElementsByTagName("button")[1]; btn1.onclick = function(){ history.back() } btn2.onclick = function(){ history.forward() } </script> </body>
5.1 Navigator對象(記錄了瀏覽器的一些信息的對象)
- appCodeName 返回瀏覽器的代碼名。
- appMinorVersion 返回瀏覽器的次級版本。
- appName 返回瀏覽器的名稱。
- appVersion 返回瀏覽器的平臺和版本信息。
- browserLanguage 返回當前瀏覽器的語言。
- cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值。
- cpuClass 返回瀏覽器系統的 CPU 等級。
- onLine 返回指明系統是否處於離線模式的布爾值。
- platform 返回運行瀏覽器的操作系統平臺。
- systemLanguage 返回 OS 使用的預設語言。
- userAgent 返回由客戶機發送伺服器的 user-agent 頭部的值。
- userLanguage 返回 OS 的自然語言設置。
<div id="example"></div> <script> txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Browser Name: " + navigator.appName + "</p>"; txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt+= "<p>Platform: " + navigator.platform + "</p>"; txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script>
6.1 PopupAlert 對象
警告框:
alert("文本")
確認框:
confirm("文本")
提示框:
prompt("文本","預設值")
7.1 Timing 對象
一次性定時器:
setTimeout()未來的某時執行代碼;
clearTimeout()取消setTimeout();
無限次定時器:
setInterval( );
clearInterval();
8.1 cookie (用來識別用戶)
有關cookie的例子:
名字 cookie:
當訪問者首次訪問頁面時,他或她也許會填寫他/她們的名字。名字會存儲於 cookie 中。當訪問者再次訪問網站時,他們會收到類似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。
密碼 cookie:
當訪問者首次訪問頁面時,他或她也許會填寫他/她們的密碼。密碼也可被存儲於 cookie 中。當他們再次訪問網站時,密碼就會從 cookie 中取回。
日期 cookie:
當訪問者首次訪問你的網站時,當前的日期可存儲於 cookie 中。當他們再次訪問網站時,他們會收到類似這樣的一條消息:"Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。