week12.md

第十二週

上課網頁

瀏覽器物件模型 ( Browser Object Model ; BOM )

window

window.innerHeight 瀏覽器內緣高度
window.innerWidth 瀏覽器內緣寬度
window.open() 開新視窗，()內放網址
window.close() 關掉視窗，只能關閉由JS自己打開的
window.moveTo() 移動視窗
window.resizeTo() 重設視窗大小

取得網頁長寬用↓
document.documentElement.clientHeight
document.documentElement.clientWidth
or
document.body.clientHeight
document.body.clientWidth

screen

常用
screen.width
screen.height
screen.availWidth 可用寬度
screen.availHeight
screen.colorDepth
screen.pixelDepth

window.location

window.location.href 網址
window.location.hostname 域名
window.location.pathname 域名後的部分
window.location.protocol 傳輸協議
window.location.port 連接埠
window.location.assign() 令位置為()中內容

window.history

history.back() 上一頁
history.forward() 下一頁

window.navigator

取得瀏覽器資訊

JavaScript Popup Boxes

window.alert() 提醒視窗
window.confirm() 詢問是否
window.prompt() 問題及輸入

用法:
var a;
a = window.prompt("answer")

補充:"\n"為換行

JavaScript Timing Events

setTimeout(a,b) b毫秒後執行a
setInterval(a,b) 同上 但重複執行

clearTimeout() 停止計時
用法:
c = setTimeout(a,b);
clearTimeout(c);

Cookies(類似快取)

document.cookie = " ";

文件物件模型 ( Document Object Model ; DOM )

Find Element

document.getElementById()
document.getElementsByClassName()[] 取得陣列，[]中為索引值
document.getElementsByTagName()[]
document.querySelectorAll("p.intro") 取得class為intro的

更改html(也可用更改innerHTML的方式)

document.createElement(element)	創建元素
document.removeChild(element) 刪除元素
document.appendChild(element) 添加元素
document.replaceChild(new, old)	替換元素
document.write(text) 在html中寫上text(在已存在網頁使用會導致頁面清空)

更改元素CSS

document.getElementById().style.??? = "" ; ???如寬度、字型等屬性

事件

onclick 點擊
onload 進入頁面
onunload 離開頁面
onchange 內容改變
onmouseover 游標移入
onmouseout 游標移出
onmousedown 按著左鍵
onmouseup 放開左鍵

document.getElementById("a").addEventListener("click", b); 添加"被點擊時執行b"到a,此方法可添加多個函式
document.getElementById("a").removeEventListener("click", b); 移除上方指令

Navigation

上級為parent
下級為child
Text也是node

parentNode 取得上級
childNodes[i] 取得第i個子級
firstChild 取得第一個子級
lastChild 取得最後一個子級
nextSibling 下一個同級
previousSibling 上一個同級

appendChild(a) 加入子節點(a)
replaceChild(a,b) 用子節點a替換掉b

nodevalue

對<>節點為null
對文字節點為文字本身
對屬性節點為屬性狀態

nodeType

node	Type
元素	1
屬性	2
文字	3
備註	8
文件	9
文件類型標記	10

node

document.createElement("") 創建元素節點，""中為元素種類
document.createTextNode("") 創建文字節點，""中為文字內容