| 客戶端JavaScript概要 |
| 植入JavaScript的方法 |
| 《script》中 |
《script》
...
《/script》 |
| 《script》連接外部 |
《script src="..."》《/script》 |
事件句柄裏(字符串)
基本不用 |
《... onclick="..." ...》 |
JavaScript: URL
基本不用 |
《a href="..."》...《/a》
href內部制定JavaScript
例: |
|
| 瀏覽器上的JavaScript處理流程 |
| |
生成Window Object
注: 這是網頁的全局變量，一個tab一個 |
| |
生成Window Object的屬性Document Object
開始解析網頁，構築DOM
Document Object的屬性readyState 賦值 "loading"
注:
DOM: 文檔對象模型(Document Object Model) |
| |
解析網頁時候遇到《script》，則同期解析script
解析script是html的解析暫停 |
| |
解析完成，構築好DOM
Document Object的屬性readyState 賦值 "interactive"
|
| |
瀏覽器對Document Object發生DOMContentLoaded事件
開始讀取img等外部資源 |
| |
讀取完成後
Document Object的屬性readyState 賦值 "complete"
瀏覽器對Window Object發生load事件 |
| |
自定義的事件等登錄到WindowWObject的load事件上
Window.onload
注: load發生在全部文件讀取完成後(包括圖象等資源), 會讓用戶等待
因此能夠增長事件監聽器，把初期登錄加在DOMContentLoaded
上 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
async
defer |
| async |
非同期讀取script
html的讀取不會暫停 |
| defer |
html讀取完(DOM構築完成後)讀取
能夠代替DOMContentLoaded來進行事件登錄 |
|
| |
|
| |
|
| |
|
| Window Object |
| 概要 |
全局Object
全部Object都是Window Object的屬性
訪問時能夠省略window. |
| 主要屬性 |
| screen |
|
| document |
|
| location |
|
| navigator |
|
| history |
|
| event |
|
| console |
|
| window |
Window本身 |
| self |
和window同樣 |
| parent |
window是表格內的window時返回上一層window
不然返回本身 |
| top |
window是表格內的window時返回最上層window
不然返回本身 |
| opener |
返回打開如今窗口的窗口 |
| frames[] |
包含window內各表格的參照 |
| closed |
如今的窗口是否關閉
true/false |
| name |
取得/設置如今窗口的名字 |
| status |
取得/設置狀態欄的text |
screenX
screenY |
瀏覽器在屏幕的位置
IE不支持 |
screenLeft
screenTop |
和上一個相同
Firefox不支持 |
innerHeight
innerWidth |
window高與框(不包含scroll bar) |
outerHeight
outerWidth |
window高與框(包含scroll bar) |
scrollX
scrollY |
水平/垂直方向滾動的像素(pixel) |
pageXOffset
pageYOffset |
和上一個相同 |
| |
|
| |
|
| |
|
|
| 主要方法 |
| |
|
| prompt("...", default) |
|
| confirm("...") |
|
| setTimeout(callback, interval) |
|
| setInterval(callback, delay) |
|
| clearTimeout(timeoutID) |
|
| clearInterval(intervalID) |
|
| blur() |
從當前窗口移除聚焦 |
| focus() |
給指定窗口聚焦 |
| close() |
關閉窗口 |
| open() |
打開新窗口 |
| moveBy(x, y) |
相對移動 |
| moveTo(x, y) |
絕對移動 |
| resizeBy(width, height) |
窗口大小按指定尺寸放大 |
| resizeTo(width, height) |
窗口大小變爲指定尺寸 |
| scrollBy(x, y) |
滾動指定距離 |
| scrollTo(x, y) |
滾動到指定位置 |
| print() |
打開確認打印的對話框 |
| |
|
| |
|
|
| |
|
| |
|
| Location Object |
| |
管理地址欄 |
| 呼出方法 |
location
window.location
document.location |
| 屬性 |
| hash |
標籤
例:
#anchor |
| host |
主機名: 接口號
例: www.example.com:80 |
| hostname |
主機名
例: www.example.com |
| href |
完整的URL
例: http://www.example.com:80/test/index.html?q=value#anchor
注:
location.assign(...)
location.href = ...二者做用相同 |
| pathname |
相對於主頁的相對路徑
例: /test |
| port |
接口號
例: 80 |
| protocol |
協議
例: http: |
| search |
請求的字符串
例: ?q=value |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 方法 |
assign(url)
字符串 |
讀取指定的url
記錄在瀏覽歷史
注:
location.assign(...)
location.href = ...二者做用相同 |
| reload() |
從新讀取 |
| replace(url) |
跳向網頁
不記錄在瀏覽歷史裏 |
| toString() |
返回location.href |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| |
|
| URL encode |
| 概要 |
字符串的16進制字符編碼以比特爲單位用%分隔表示
字母, 數字, -_!~*.()'不會被轉換 |
| 編碼方法 |
| |
encodeURIComponent |
| |
encodeURI
不編碼字母, 數字, -_!~*.()'不會被轉換
和(;,.?:@&=+$),(#) |
|
| 解碼方法 |
| |
decodeURIComponent |
| |
decodeURI |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| History Object |
| |
管理窗口的瀏覽歷史 |
| 呼出方法 |
history
window.history |
| 屬性 |
| length |
只可讀
如今session的履歷數 |
| scrollRestoration |
操做瀏覽瀏覽歷史後滾動位置是否自動復原
"auto"/"manual" |
| state |
只可讀
在pushState, replaceState設定的state的值 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 方法 |
| back() |
返回一個 |
| forward() |
前進一個 |
| go(number) |
指定移動數
正: 前進
負: 返回 |
| pushState(state, title, url) |
不跳轉而且追加窗口瀏覽歷史
| state |
經過popstate時間的state屬性參照 |
| title |
新履歷的標題 |
| url |
可省略，省略則爲當前url |
| |
|
| |
|
|
| replaceState(state, title, url) |
跳轉而且追加窗口瀏覽歷史 |
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| Navigator Object |
| 概要 |
Navigator 對象包含有關瀏覽器的信息 |
| 呼出 |
navigator
window.navigator |
屬性
只可讀 |
只可讀
| appCodeName |
瀏覽器的代碼名字
不必定正確 |
| appName |
瀏覽器的名字
不必定正確 |
| appVersion |
瀏覽器的版本
不必定正確 |
| geolocation |
表示瀏覽器物理位置的Geolocation Object |
| language |
瀏覽器對應的MIME類型的 MimeTypeArray |
| mimeTypes[] |
|
| onLine |
是否鏈接網絡 |
| platform |
系統名
Windows --- "win32"
Mac --- "MacIntel" |
| plugins |
瀏覽器安裝的常見一覽
Plugin Object的數組 |
| userAgent |
USER-AGENT header部分傳送的字符串 |
|
| 方法 |
| |
是否可使用Java |
| getUserMedia() |
獲取設備的麥克風, 攝像頭的流
audio, video |
| registerContentHandler(mimeType, uri, title) |
把網頁和特定mime類型關聯 |
| registerProtocolHandler(protocol, uri, title) |
把網頁和特定協議關聯 |
| vibrate() |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| Screen Object |
| 概要 |
包含顯示屏大小以及色數等信息 |
| 呼出 |
screen
window.screen |
屬性
只可讀 |
只可讀
| availTop |
可使用的最小的y座標
可用指除了任務欄之外的部分 |
| availLeft |
可使用的最小的x座標 |
| availHeight |
可使用的高度 |
| availWidth |
可使用的寬度 |
| colorDepth |
豁免的色深度(位數): 約1678萬色的話24 |
| height |
畫面高度 |
| width |
畫面寬度 |
| orientation |
畫面方向 |
| |
|
| |
|
|
| |
|
| |
|
| |
|
| Document Object |
| 概要 |
表示頁面內容
接入DOM |
| 呼出 |
document
window.document |
| DOM關聯 |
http://blog.sina.com.cn/s/blog_dcb875d90102yc1u.html |
| 主要屬性 |
| characterSet |
只可讀
使用的字符編碼 |
| cookie |
獲取cookies
以；分隔的列表(list?) |
| domain |
只可讀
主頁 |
| lastModified |
只可讀
最終更新日 |
| location |
document.location
window.location
location
三個同樣 |
| readyState |
只可讀
文件讀取情況 |
| referrer |
只可讀
連接向當前頁面的url |
| title |
頁面的標題 |
| URL |
只可讀
頁面的URL |
| |
|
|
| 主要方法 |
| close() |
關閉document.open()打開的頁面
終止寫入 |
| open() |
爲了寫入打開頁面 |
write(text)
不用 |
寫入到document.open()打開的文件 |
| writeIn(text) |
寫入到document.open()打開的文件
並換行 |
| |
|
|
| |
|
| |
|
| |
|
| Window的操做 |
| |
暫略，p362 |
