JS中的函數和BOM

標籤：nav   url路徑   def   ack   oca   js代碼   作用   false   tin   

文檔注釋：開頭兩個*。寫在函數上方，在調用函數時，
 可以看到文檔中的描述資訊；

function aaa(){

}

【函數的聲明及調用】
1、函數的聲明格式：
function 函數名(參數1，參數2，..){
// 函數體代碼
return 傳回值；
}

函數的調用：
① 直接調用：函數名(參數1的值，參數2的值，..);
② 事件調用：在HTML標籤中，使用事件名="函數名()"
<button onclick="saySth(‘hhh‘,‘red‘)">點擊按鈕，列印內容</button>

2、函數的注意事項：
① 函數名，必須要符合小駝峰法則！！(首字母小寫，之後每個單字首大寫)
② 函數名後面的()中，可以有參數，也可以沒有參數。分別稱為有參函數和無參函數；
③ 聲明函數時的參數列表，稱為形參列表，形式參數。(變數的名字)
function saySth(str,color){}
調用函數時的參數列表，稱為實參列表，實際參數。(變數的賦值)
saySth("呵呵呵呵","blue");
④ 函數的形參列表個數，與實參列表個數，沒有實際關聯關係。
函數參數的個數，取決於實參列表。
如果實參列表的個數<形參列表，則未賦值的形參，將為Undefined。
⑤ 函數可以有傳回值，使用return返回結果；
調用函數時，可以使用一個變數接收函數的返回結果。
如果函數沒有傳回值，則接收的結果為undefined；
function func(){
return "haha";
}
var num = func(); // num = "haha";
⑥ 函數中變數的範圍：
在函數中，使用var聲明的變數，為局部變數，只能在函數內部訪問；
不用var聲明的變數，為全域變數，在函數外面也能訪問；
函數的形參列表，預設為函數的局部變數，只能在函數內部使用。
>>>>JS中沒有塊級範圍的概念！！！只有函數範圍和全域範圍。
⑦ 函數的聲明與函數的調用，沒有先後之分。 即，可以在聲明函數前，調用函數。

func()；// 聲明func之前調用也是可以的。
function func(){}；

[匿名函數的聲明使用]
 1、聲明一個匿名函數，直接賦值給某一個事件；
window.onload=function(){}

2、使用匿名函數運算式。將匿名函數賦值給一個變數。
 聲明：var func = function(){}
調用：func()；

注意：使用匿名函數運算式時，函數的調用語句，必須
 放在函式宣告語句之後！！！！(與普通函數區別！！！)

 3、自執行函數：
 ① ！function(){}(); // 可以使用多種運算子開頭，但一般用!
！function(形參列表){}(實參列表)；
 ② (function(){}()); // 使用()將函數及函數後的括弧包裹
 ③ (function(){})(){}; // 使用()值包裹函數部分；

 三種寫法的特點：
 ① 使用！開頭，結構清晰，不容易混亂，推薦使用；
 ② 能夠表明匿名函數與調用的()為一個整體，官方推薦使用；
 ③ 無法表明函數與之後的()的整體性，不推薦使用；

[函數的內部屬性]

 1、Auguments對象
 ① 作用：用於儲存調用函數時的所有實參。
 當我們調用函數並用實參賦值時，實際上參數列表
 已經儲存到arguments數組中，可以在函數中，
 使用argument[n]的形式調用。n從0開始。

 ② arguments數組的個數，取決於實參列表，與形參無關。
 但是，一旦第N個位置的形參、實參、arguments都存在時，
 形參將與arguments綁定，同步變化。(即在函數中修改形參的值，
 arguments也會改變，反之亦成立。)

③ arguments.callee 是arguments的重要屬性。表示
arguments所在函數的引用地址：
在函數裡面，可以使用arguments.callee()調用函數本身。

在函數內部，調用函數自身的寫法，叫做遞迴。
 遞迴分為兩部分：遞和歸。以遞迴調用語句為界限，可以將函數分為
 上下兩部分。
 遞：當函數執行上半部分，遇到自身的調用語句時，繼續進入內層函數，
 再執行上半部分。直到執行完最內層函數。
 歸：當最內層函數執行完以後，再從最內層函數開始，逐漸執行
函數的下半部分。

 當最外層函數執行時，遇到自身的調用語句，會進入內層函數執行，
 而外層函數的後半部分暫不執行，直到最內層函數執行完以後，再逐步向外執行。

[JS代碼的執行順序問題]
 JS代碼在運行時，會分為兩大部分，檢查裝載和執行階段
 檢查裝載階段：會先檢測代碼的語法錯誤，進行變數、函數的聲明；
 執行階段：變數的賦值、函數的調用等，都屬於執行階段。
 以下列代碼為例：
 consoloe.log(num); // Undefined
 var num = 10;
 func1(); // 函數可以正常執行
 function func1(){}
 func2(); // 函數不能執行，列印func2時顯示Undefined；
 var func2 = function(){}

 原因：上述代碼的執行順序為：

 ------------檢查裝載階段-------------
 var num；
 function func1(){}
 var func2;
-------------執行階段---------------
 consoloe.log(num);
 num = 10;
 func1();
 func2();
 func2 = function;

 Screen對象

console.log(screen.width); // 螢幕寬度
console.log(screen.height); // 螢幕高度
console.log(screen.availWidth); // 可用寬度
console.log(screen.availHeight); // 可用高度=螢幕高度-底部工具列


 location對象

 取到瀏覽器的URL地址資訊；
 完整的URL路徑；
 協議名：//主機名稱(IP地址)：連接埠號碼/檔案所在路徑？傳遞參數
 (name1=value1&&name2=value2)#錨點

 例如：
 http：//127.0.0.1:8080/wenjianjia/index.html?name=jredu#top





console.log(location.href); // 返回當前完整路徑
console.log(location.protocol); // 返回協議名
console.log(location.host); // 返回主機名稱+連接埠號碼
console.log(location.hostname); // 返回主機名稱
console.log(location.port); // 返回連接埠號碼
console.log(location.pathname); // 返迴文件路徑
console.log(location.search); // 返回？開頭的參數列表
console.log(location.hash); // 返回#開頭的錨點*/

// 使用JS跳轉頁面
window.location = "http://www.baidu.com";*/

 其他使用location提供的方法跳轉頁面的方式

location.assign("http://www.baidu.com");
location.replace("http://www.baidu.com");*/

function assign(){
// 載入新的文檔，載入以後，可以回退。
location.assign("http://www.baidu.com");
}
function replace(){
// 使用新文檔替換當前文檔。替換以後，不能回退。
location.replace("http://www.baidu.com");
}
function reload(){
 重新載入當前文檔。重新整理頁面
 reload()：在本地重新整理當前頁面，相當於F5
 reload(true)；強制重新整理，從伺服器端重新載入頁面，相當於Ctrl+F5

 location.reload();
}

 history 瀏覽曆史

console.log(history);
console.log(history.length); // 瀏覽曆史列表的個數
function back(){
history.back(); // 後退按鈕
}
function forward(){
history.forward(); // 前進按鈕
}
function go(){*/
 跳轉到瀏覽曆史的任意一個頁面；
 0表示當前頁面，-1表示後一個頁面(back)，1表示前一個頁面(forward)

 history.go(1);
}

 navigator 瞭解即可
 包含瀏覽器的各種系統資訊。

//console.log(navigator);

 檢測瀏覽器安裝的各種外掛程式。

//console.log(navigator.plugins);

// 判斷有沒有外掛程式
if(navigator.plugins[2].name == "Native Client"){
alert("有");
}else{
alert("沒有");
}

// 尋找所有外掛程式
for(var i=0; i<navigator.plugins.length;i++
alert(navigator.plugins[i].name);
}

 Window對象的常用方法：
 >>> 在window對象中的所有方法和屬性，均可以省略window關鍵字。
 window.alert(); --> alert(); √

 1、alert()：彈出一個警告提示框；
 2、prompt()：彈窗接收使用者的輸入；
 3、confirm()：彈出一個帶有"確定""取消"按鈕的對話方塊，點擊
 按鈕返回true或false。
 4、close()：關閉當前瀏覽器視窗。在個別瀏覽器中，只能關閉在
 當前指令碼新開啟的頁面(使用超連結、window.open()等方式開啟的頁面)
 5、open()：開啟一個新視窗。
 參數一：新視窗的地址；
 參數二：新視窗的名字，並沒有卵用；
 參數三：新視窗的各種屬性設定，"屬性1=值1，屬性2=值2，屬性3=值3"
 6、setTimeout：設定延時執行，只會執行一次；
 setIntervar：設定定時器，每隔n毫秒執行一次。
 接收兩個參數，需要執行的function、毫秒數；
 7、clearTimeout：清除延時器；
 clearIntervar：清除定時器；
 使用方法：設定延時器或定時器時，可以使用變數接收定時器ID；
 var id = setInterval；
 調用clearInterval時，將id傳入，即可清除對應的定時器；
 clearInterval(id)

JS中的函數和BOM