1. 程式人生 > >JavaScript封閉函式、常用內建物件、js除錯方法

JavaScript封閉函式、常用內建物件、js除錯方法

1.封閉函式

封閉函式是JavaScript中匿名函式的另外一種寫法,建立一個一開始就執行而不用命名的函式

/在封閉函式前加’;‘,可以避免js壓縮時出錯/
;(function(){

    alert('hello world!');

})();

/*當i大於78時等於78,小於時等於89*/
var i = 90>78?78:89;
alert(i);

/*第二個寫法*/
!function(){

    alert('hello world!');

}();

/*第三個寫法*/
~function(){

    alert('hello world!');

}();

**2.常用內建物件**

1.document

document.getElementById 通過id獲取元素

document.getElementByTagName 通過標籤名獲取元素

document.referrer 獲取上一個跳轉頁面的地址(需要伺服器環境)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內建物件</title>
<script type="text/javascript">
window.onload = function(){

    /*儲存上一個地址,需要伺服器環境*/
    /*var sUrl = document.referrer;*/
    var oBtn = document.getElementById('btn01');
    oBtn.onclick = function(){

        /*window.location.href = sUrl;*/
        window.location.href = 'http://www.baidu.com';
    }
}

</script>

</head>

<body>

<input type="button" name="" value="跳轉" id="btn01">

</body>
</html>

2.location

window.location.href 獲取或者重定向url地址

window.location.search 獲取地址引數部分

window.location.hash 獲取頁面錨點或者叫雜湊值

例子:通過地址引數更換背景

檔案一:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內建物件</title>
<script type="text/javascript">
window.onload = function(){

    var oBody = document.getElementById('body01');
    /*通過?...傳遞地址*/
    var sDate = window.location.search;

    /*通過#...傳遞地址*/
    var sHash = window.location.hash;
    /*alert(sHash);*/

    if(sDate != ''){
        var iRan = sDate.split('=');  /*以等號分割*/
        var iNum = iRan[1];  /*元素集的第二個*/

        if(iNum==1){
            oBody.style.backgroundColor = 'gold';
        }
        else if(iNum==2){
            oBody.style.backgroundColor = 'red';
        }
        else if(iNum==3){
            oBody.style.backgroundColor = 'blue';
        }
    }
}

</script>

</head>

<body id="body01">

<a href="inner01.html">到inner01</a>

</body>
</html>

JavaScript封閉函式、常用內建物件、js除錯方法

檔案二:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設定背景</title>
</head>

<body>

<a href="innerobject.html?a=1#123">背景一</a>
<br /><br />
<a href="innerobject.html?a=2">背景二</a>
<br /><br />
<a href="innerobject.html?a=3">背景三</a>

</body>
</html>

JavaScript封閉函式、常用內建物件、js除錯方法

3.Math

Math.random 獲取0-1的隨機數

Math.floor 向下取數

Math.ceil 向上取數

例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>math</title>
<script type="text/javascript">

var iNum = Math.PI;
alert(iNum);

var iNum01 = [];
for(var i=0;i<20;i++){
    /*返回0-1的隨機數*/
    iNum02 = Math.random();
    iNum01.push(iNum02); 
}
alert(iNum01);

/*向下取整*/
alert(Math.floor(5.7));

/*向上取整*/
alert(Math.ceil(8.1));

/*產生10-20的隨機數*/
var iNum03 = 10;
var iNum04 = 20;
var iNum05 = [];

for(var i=0;i<20;i++){
    /*因為向下取整,為了出現20,加1,*/
    var iN = Math.floor((iNum04-iNum03+1)*Math.random()) + iNum03;
    iNum05.push(iN);
}
console.log(iNum05); /*在瀏覽器console裡顯示*/
</script>

</head>

<body>
</body>
</html>

JavaScript封閉函式、常用內建物件、js除錯方法

4.js除錯方法

(1)alert():會阻止程式的執行

(2)console.log():瀏覽器console

(3)document.title():頁面標題