【WIP】客戶端JavaScript Web Object

建立: 2017/10/11

 

更新: 2017/10/14 標題加上【WIP】，增長【TODO】

更新: 2018/01/22 更改標題 [客戶端JavaScript Web Object, URLEncode] -> [客戶端JavaScript Web Object]

                         給window object部分增長了id

 

【TODO】

增長:  補充Window的操做，p362

客戶端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