第七章：JavaScript（第三話）
文章目錄
第一節：函式
函式的定義
- 關鍵字宣告（宣告式）
【格式】：function 函式名(){ }
如：
function sum(){}——聲明瞭一個函式sum
函式的宣告會提前 ==> 解析器會率先讀取函式宣告，並使其在執行任何程式碼之前可用（可以訪問），它提前的是整個函式;
- 函式表示式(賦值式)
【格式】
var sum = function(){}——一個匿名函式賦給了sum
賦值式也會宣告提前，但只是var sum這個變數
函式不同定義方法的區別
例：
<html>
<head>
<meta charset="utf-8">
<title>函式的定義</title>
<script type="text/javascript">
//在函式實體前呼叫函式
show1 控制檯結果：
函式的執行與常用事件
內建函式
當我們在使用輸出alert()、資料類形轉換
Number()等的時候，我們都在直接使用，並沒有給alert等進行定義，這些都是window下的內建函式。可寫成window.alert().window是alert()的物件（能點的就是物件）,平時只是省略了。但在事件函式或屬性時，建議不要省略window。所有的內建函式大致可分為幾個類。
【方法類函式】
例如：
alert()——
parseInt()——
parseFloat()——
Number()——
Boolean()——
【事件類函式】
例如：
window.onload—— 頁面所有元素（包括DOM、圖片等）載入完成後執行
【物件類函式】
例如：
document.getElementById()——
函式的執行（呼叫）
【手動呼叫（主動）】
sum();
【事件驅動（被動）】
格式：元素.事件 = 函式名 ; （注意被動的函式名後不能加（））
buton.onclick = sum;
常見事件觸發函式
onclick—— 點選事件
ondblclick—— 雙擊事件
onmouseover—— 滑鼠移入事件
onmouseout—— 滑鼠移開事件
onchange—— 內容改變並失去焦點事件（一般用於表單元素）
onkeyup—— 鍵盤按鍵彈起事件
事件物件 event
當函式在監聽事件觸發，就是監聽
event物件，比如鍵盤的輸入這個事件，但是想知道輸入的是哪個鍵，就可以通過獲取event的“key”或“keyCode”的值得出。
【常見的keyCode值】
13—— 回 車 鍵 ；
37—— 左方向箭頭 ；38—— 上方向箭頭
38—— 上方向箭頭 ；40—— 下方向箭頭
27—— Esc鍵
32—— 空格鍵
例：監聽使用者鍵盤按鍵彈起事件(鍵盤按下某鍵)，捕獲event內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關於event</title>
<script type="text/javascript">
document.onkeyup = function(event){
console.log(event); //控制檯列印event內容
}
</script>
</head>
<body>
</body>
</html>
控制檯結果：
案例：使用事件移動憤怒的小鳥
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>憤怒的小鳥</title>
<style>
html,body{height:100%;overflow:hidden;}
#ab{position:absolute;top:0;left:0;width:200px;}
.right{transform:rotateY(180deg);}
.down{transform:rotateZ(-90deg);}
.up{transform:rotateZ(90deg);}
</style>
<script>
window.onload = function(){
var bird = document.getElementById('ab');
// 小鳥定位到游標中間位置
// document.onmousemove = function(e){
// bird.style.left = e.clientX - bird.offsetWidth/2 + 'px';
// bird.style.top = e.clientY - bird.offsetHeight/2 + 'px';
// }
var speed = 10;
// 鍵盤方向鍵移動小鳥
document.onkeydown = function(e){
console.log(e.keyCode,e.which);
var key = e.keyCode;
// 獲取小鳥當前所在的位置
var left = bird.offsetLeft;
var top = bird.offsetTop;
if(key === 37){
left -= speed;
bird.className = '';
}else if(key === 39){
left += speed;
// 改變方向
bird.className = 'right';
}else if(key === 38){
top -= speed;
bird.className = 'up';
}else if(key === 40){
top += speed;
bird.className = 'down';
}
// 邊界處理(水平+垂直)
if(left < -bird.offsetWidth){
left = window.innerWidth;
}else if(left > window.innerWidth){
left = -bird.offsetWidth
}
if(top < -bird.offsetHeight){
top = window.innerHeight;
}else if(top > window.innerHeight){
top = -bird.offsetHeight;
}
bird.style.left = left + 'px';
bird.style.top = top + 'px';
}
}
</script>
</head>
<body>
<img src="img/bird.jpg" id="ab"/>
</body>
</html>
函式的作用域
俗稱“使用範圍”，即能夠使用某個變數的範圍，分【全域性作用域】和【區域性作用域】
【全域性變數與區域性變數】
全域性變數：在全域性作用域下宣告的變數，可以在任意地方中使用，作用範圍比較大，我們稱為全域性變數
區域性變數：在函式內（區域性作用域）宣告的變數，只在函式中可以使用，作用範圍較小，我們稱之為區域性變數
【變數的訪問規則】 —— 就近原則（如查詢變數a）：
使用變數a時先從當前函式查詢，如果當前函式有變數a則使用;
如果當前函式無變數a,則往父級函式查詢，如果找到則使用，並停止查詢;
如果在父級函式還是無法找到，則繼續往上一層函式查詢，以此類推，直到最頂層(全域性作用域)，如果還是沒找到，則報not defined錯誤;
【作用域鏈】
每個函式在定義時就形成了區域性作用域，如果存在多個函式巢狀，他們之間就會建立起某種聯絡，直到全域性作用域，這種聯絡稱之為作用域鏈。當函式訪問變數時，根據就近原則在這個作用域鏈中從內到外查詢變數。
例：
<html>
<head>
<meta charset="utf-8">
<title>關於作用域</title>
<script type="text/javascript">
var myname = 'LeiFeng' //myname是全域性作用域下的變數，全域性變數
function show(){
var myage = 18; //myage是區域性作用域下的變數，區域性變數
console.log(myname); //區域性作用域沒有myname，會往上一層作用域找,直到全域性
}
show();
</script>
</head>
<body>
</body>
</html>
函式的引數與返回值
函式引數
【形參】 就是區域性變數
【形參與實參的區別】
形參：宣告函式時圓括號內定義的變數
實參：函式執行時傳入的引數。
形參和實參的數量可以不同
arguments—— 函式內部隱藏的物件（是一個類陣列），儲存著實參的資訊
length—— 實參的數量
引用資料型別與基本資料型別的傳參（引用傳遞與值傳遞）
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關於引數</title>
<script type="text/javascript">
function show(numb){ //宣告的函式引數numb就是形參
// 形參numb 其實就是區域性變數相當於在此處聲明瞭一個‘var numb’
}
show(100); //這裡的100，才是實參
</script>
</head>
<body>
</body>
</html>
函式返回值
函式返回值是函式體返回給函式的一個結果
【注意點】
終止函式的執行,return後的程式碼不會執行
return後如果有值，則把這個值返回到函式執行的地方
如果函式沒有return,執行完後返回undefined
例：有返回值和沒反回值的區別
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關於返回值</title>
<script type="text/javascript">
//下面兩個都是求平方的函式，一個有返回值，一個沒有返回值，
function argum1(numb){
rest = numb * numb;
return rest
}
function argum2(numb){
rest = numb * numb;
}
//列印兩個函式
console.log(argum1(5));
console.log(argum2(5));
</script>
</head>
<body>
</body>
</html>
控制檯結果：
函式中的this
函式中的
this是一個關鍵字，表示當前物件，而當前物件是誰，取決於誰呼叫了這個函式，每個函式都會有this
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函式中的this</title>
<script type="text/javascript">
function func1(){
console.log(this); //列印func1的this
}
func1();
</script>
</head>
<body>
</body>
</html>
控制檯結果：
第二節：函式的封裝與複用
函式的封裝
例：封裝一個獲取隨機顏色的方法
1、新建一個javaScript文件，自定義一個名字（這裡取名為common）,因為是JS文件，所有後綴當然是 .js
2、編緝內容，定義獲取隨機顏色的方法randomColor,並儲存，這樣就完成了函式的封裝
函式的呼叫
封裝好的函式，可以在任何HTML內的script標籤中呼叫
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>呼叫封裝好的函式</title>
<script type="text/javascript" src="./JS/common.js">
//使用src引入js檔案,等效於在此處編寫的JS程式碼
</script>
<script type="text/javascript">
window.onload = function(){
//呼叫函式，隨機更改頁面背景顏色
document.body.style.backgroundColor = randomColor();
}
</script>
</head>
<body>
</body>
</html>
瀏覽器結果：
定時器的設定與清除
專案中，經常會用到定時器來實現資料實時更新、時間等，例如網頁自動重新整理。上面例子中不斷重新整理網頁，就可以看到隨機的不同背景顏色，如何才能讓它自動重新整理，就要使用到定時器功能
【定時器的格式】
設定定時器：
setInterval(fn,duration)——fn表示函式，duration表示時間。即每隔duration時間(ms)，執行一次fn。並返回一個定時器標識
清除定時器：
clearInterval(IntervalName)
例：給隨機背景定時器，實現自動隨機顏色，滑鼠移入停止。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用定時器+滑鼠事件重新整理隨機背景</title>
<script type="text/javascript" src="./JS/common.js">
</script>
<script type="text/javascript">
window.onload = function(){
//使用定時器自動重新整理
timer = setInterval(function(){
//呼叫函式，隨機更改頁面背景顏色
document.body.style.backgroundColor = randomColor();
},500)
}
//滑鼠移入事件
document.onmouseover = function(){
//停止定時器
clearInterval(timer);
}
//滑鼠移出事件
document.onmouseout = function(){
//使用定時器自動重新整理
timer = setInterval(function(){
//呼叫函式，隨機更改頁面背景顏色
document.body.style.backgroundColor = randomColor();
},500)
}
</script>
</head>
<body>
</body>
</html>
瀏覽器結果：略