JS-bom

4~3發表於2020-09-27
JS

// BOM：Brower Object Model：瀏覽器物件模型

//window是全域性物件
//（屬性只識別var宣告的,方法只識別字面量宣告的）
/* let i = 10;
console.log(i); //10
console.log(window.i); //un

const k = 30;
console.log(k); //30
console.log(window.k); //un

var j = 20;
console.log(j); //20
console.log(window.j); //20 */

// function f70() {
// console.log(“F70”);
// }
// window.f70();
// let f71 = function() {
// console.log(“F71”);
// }

// let全域性變數與var全域性變數的區別
// let全域性變數無法被window使用
// var全域性變數可以被window使用

// 即var宣告變數(非函式內部)為window的屬性
/* delete window.i;
delete window.j;
delete window.k;

console.log( window.i,window.k,window.j);//un un 20 */

// window.f71();
// console.log(i);
// let i = 0;
// Cannot access ‘i’ before initialization

// console.log(i);
// let i;
// Cannot access ‘i’ before initialization

// console.log(i);
// i;
// i is not defined

// function f70() {
// console.log(i);//un
// i = 0;
// }
// f70()

// 只要開啟一個瀏覽器，就會建立一個window物件
// window的屬性和方法

/* // 不支援低版本IE瀏覽器(IE8)
// 瀏覽器離螢幕左側的距離
console.log(window.screenX);
// 瀏覽器離螢幕頂部的距離
console.log(window.screenY);

// 不支援火狐瀏覽器
// 瀏覽器離螢幕左側的距離
console.log(window.screenLeft);
// 瀏覽器離螢幕頂部的距離
console.log(window.screenTop); */

// 獲取視窗的尺寸(width,height)
/* // inner獲取的是視口尺寸
console.log(window.innerWidth);
console.log(window.innerHeight);
//outer獲取的是整個瀏覽器的尺寸
console.log(window.outerWidth);
console.log(window.outerHeight);
*/

// 獲取當前滾動條移動的距離
// console.log(水平滾動條移動${window.pageXOffset}px);
// console.log(垂直滾動條移動${window.pageYOffset}px);

// window的方法
// 警示框、提示框
// window.alert(“game over!”)

// 穩定性
/* let option = window.confirm(是否繼續下一個);
if(option){
window.alert(“正在載入下一關”);
}else{
window.alert(“已退出！！”);
} */

// 輸入框，返回值是使用者的輸入內容
/* let user = window.prompt(“請輸入你的手機號：”)
let re=/1[3-9][0-9]{9}$/;
let ruselt = user.match(re);
if(ruselt){
window.alert(“正在載入…”)
}else{
window.alert(“手機號輸入錯誤！！！”)
} */

// 新開啟一個頁面
// window.open();

/*
//時間函式：在規定的時間執行你要執行的程式碼
setInterval(多個引數)
2個
第一個引數：函式名(需要執行的程式碼)
第二個引數：設定的時間(毫秒)

功能：根據設定的時間，執行函式
例:setInterval(f70, 1000);
每一秒鐘呼叫一次f70函式

第三個引數及以後：為第一個引數中函式的實參

*/

/* let i = 5;

function f70() {
console.log(i–);
if (i == 0) {
//停掉時間函式
clearInterval(time1);
return;
}
}

let time1 = setInterval(f70, 1000);
// let time2 =setInterval(f70, 1000); */

/*
由於js是有多個時間函式的。
如果需要停止時間函式，需要告知停掉哪個時間函式。
因此在建立時間函式的時候，用比那裡接收當前時間函式。

停止時間函式的書寫格式：
clearInterval(接收時間函式返回值的變數);

例：
let time1=setInterval(f70, 1000);
clearInterval(time1);

*/

/*
功能：當達到設定時間後，執行相應的函式(只執行一次)
setInterval(f70, 3000);
引數1：執行的函式
引數2：時間
*/

/* // 時間函式第一個引數(函式)加小括號的書寫方式
function f74(a, b) {
console.log(a + b);
}

setInterval(“f74(1,2)”, 1000); */

/* // [screen]
// 獲取螢幕的尺寸(不包含工作列)
// let pingmukuadu = screen.availWidth;
// let pingmugaodu = screen.availHeight;
// console.log(pingmukuadu,pingmugaodu); */

/* // [navigator]
// 獲取瀏覽器版本號
console.log(navigator.appVersion);
// 獲取瀏覽器名字
console.log(navigator.appName);
// 瀏覽器的語言(zh-CN簡體中文)
console.log(navigator.language); */

/* // [location]
// 獲取位址列問號後的內容
let info = location.search;
console.log(info);

// 獲取位址列所有內容
let info2 = location.href;
console.log(info2);

// 獲取埠號
let info3 = location.port;
console.log(info3); */

/* // replace()替換
// 當前頁面顯示新頁面內容(公用一個視窗)
// 注：replace沒有返回功能
function f70(){
location.replace("./index.html");
}

// assign()載入新頁面
// 當前頁面顯示新頁面內容(與原頁面不公用一個視窗)
// 注：assign有返回功能
function f71(){
location.assign("./index.html");
} */

// [history]
// history.back() 返回上一頁
// history.forward() 到下一頁
// history.go(-1) 上一頁
// history.go(0) 重新整理
// history.g4(1) 下一頁

  1. 1 ↩︎