所謂的BOM(Browser Object Model)指的就是瀏覽器物件，大部分瀏覽器都有支援這些功能，早期因為沒有標準規範因此常發生跨瀏覽器問題，例如同樣的功能在Chrome可以正常執行但是在IE會出現錯誤，但近年W3C已經將各家瀏覽器納入HTML5標準中，所以逐漸已經不存在跨瀏覽器的問題
常用的基礎功能
確認視窗(confirm)
<button id="btn">confirm</button>
<script type="text/javascript">
document.getElementById('btn').addEventListener('click',function(){
if(confirm('是否送出頁面?')){//confirm會回傳true或false
alert('頁面已送出!');
}else{
return;
}
})
</script>
計時器功能
<button id="btnTimeout">setTimeout</button>
<button id="btnInterval">setInterval</button>
<script type="text/javascript">
document.getElementById('btnTimeout').addEventListener('click',function(){
setTimeout(function(){//setTimeout只會單次執行
console.log('setTimeout!');
},2000);//執行間隔為2000毫秒
});
document.getElementById('btnInterval').addEventListener('click',function(){
setInterval(function(){//setInterval會重複執行
console.log('setInterval!');
},1000);//執行間隔為1000毫秒
});
</script>
依據歷史紀錄切換頁面
<body>
<a href="JavaScript:history.back()">上一頁</a>
<a href="JavaScript:history.forward()">下一頁</a>
</body>
Console物件
log:一般log
info:一般資訊
warn:警告
error:錯誤
格式化參數
console.log('name is %s,TEL is %d','bill',123456789);//%s代表輸出字串，%d代表整數
console.log('現在溫度 %.2f度',30.3);//%.2f輸出小數點第二位
log群組
console.group('father');//父群組
for(var i=0;i<5;i++){
console.group('son'+i);//子群組
for(var j=0;j<5;j++){
console.log(i,j);
}
console.groupEnd();//結束子群組
}
console.groupEnd();//結束父群組
計算程式執行次數
for(var i=0;i<5;i++){
console.count('LOOP');
}
console.count('LOOP');
堆疊追蹤
可以檢查出函數之間的關係
function func1(){
func2();
}
function func2(){
func3();
}
function func3(){
console.trace();
}
func1();
程式執行時間測量
console.time('time1');//time1是label
alert('TEST');
console.timeEnd('time1');
Storage物件
所謂Storage就是瀏覽器內建的資料儲存區，以鍵值方式儲存，以網域為單位管理資料
var storage=localStorage//將localStorage的傳回值儲存在變數
storage.setItem('a','1');//設定a鍵
storage.b='2';//設定b鍵
storage['c']='3';//設定c鍵
console.log(storage.getItem('a'));//取得a鍵
console.log(storage.b);//取得b鍵
console.log(storage['c']);//取得c鍵
清除Storage
button id="btn">清除Storage</button>
<p id="result"></p>
<script type="text/javascript">
var storage=localStorage;
document.getElementById('btn').onclick=function(){
storage.clear();}
</script>
使用迴圈取出Storage資料
for(var i=0;i<storage.length;i++){
var k=storage.key(i);
var v=storage[k];
console.log(k+':'+v);
}