目錄
JavaScript自定義函數
函數的定義
函數就是爲了完成程序中的某些特定功能而進行專門定義的一段程序代碼。
函數包括自定義函數和系統函數function 函數名(形式參數 1, 形式參數 2,…, 形式參數 n) { 語句 }
求一個面積的函數
function getArea(width,height){
var result = width * height;
document.write('長方形的面積是：'+result);
}
/*調用方法*/
<script>
getArea(4,5);
</script>
🐬函數的參數
- 函數參數作用：調用函數時將數據傳遞給被調函數的方式
- JavaScript中函數參數的特殊性：
- 函數聲明瞭參數，調用時也可以不傳遞參數，這在其他編程語言中是會出現編譯錯誤的
- 不管函數聲明時有多少個參數，調用函數時可以傳遞若干個參數值給函數，並且實際傳遞的參數值還可以在函數內部獲得
- 在函數被調用時，一個
arguments對象就會被創建，它只能使用在函數體中，以數組的形式來管理函數的實際參數
例如：
<script>
function getTotal(){
document.writeln(arguments.length);
}
getTotal(43,3434,34,3,43,43,343,232);
</script>
輸出：
8
在這裏
getTotal()裏面的所有參數都被當成了arguments的數組元素
匿名函數
語法一 😆
(function (形式參數){ 語句 })(實際參數);語法二 😆
var 變量 =（function （形式參數列表）{ 語句 } ）; 變量（實際參數列表）;
匿名函數的使用
使用一
<script type="text/javascript">
// 調用匿名的函數
(function(width,height){
// 輸出長方形的面積
document.write(width*height);
})(3,4);
</script>
使用二
<script type="text/javascript">
// 定義函數
var area=function(width,height) {
document.write(width*height);
};
</script>
<h1> 寬度是：3，高度是：4 的長方形面積是：<br/>
<script type="text/javascript">
// 調用函數
area(3,4);
</script>
</h1>
JavaScript系統函數
parseInt(string) parseFloat(string) isNaN(string) eval(expression)
JavaScript 事件
💄
- JavaScript 是基於對象、採用事件驅動的腳本語言
- 事件：用戶使用鼠標或鍵盤在瀏覽器窗口或頁面元素上執行的操作
- 事件源：產生事件的元素
- 事件處理程序：對事件進行處理的程序或函數
- 事件驅動：將一段程序代碼與某個事件源上發生的事件進行綁定，當觸發此事件，瀏覽器就會自動執行與之綁定的程序代碼
兩種事件與處理程序綁定的方法
方法一:在事件源對象所對應的 HTML 頁面標籤上增加一個要處理的事件屬性，讓事件屬性值等於處理該事件的函數名或程序代碼
<script>
function changeSize(){
var obj = document.getElementById('text');
obj.style.fontSize = "30px";
}
</script>
<p onclick = 'changeSize()'>這裏是事件綁定</p>
方法二：可以直接在 JavaScript 代碼中設置元素對象的事件屬性，讓事件屬性值等於處理該事件的函數名或程序代碼
<script>
function changeSize(){
var obj = document.getElementById('text');
obj.style.fontSize = "20px";
}
document.getElementById('text').onclick = changeSize;
</script>
JavaScript 的常用事件
- 鼠標事件
onclick事件<script> document.querySelector('button').onclick = function(){ alert('按鈕點擊事件'); } </script>onmouseover 和 onmouseout事件<script> <p onmouseover='onOver()'></p> </script> - 其他事件
onblur事件<body> <input type="text" onblur="blur_1()"> </body> <script> var input = document.querySelector('input'); function blur_1() { input.value = '失去焦點'; } </script>結果：
![在這裏插入圖片描述]()
- 表單事件
💍單擊表單元素的“提交按鈕”會觸發form標籤的
onsubmit事件，瀏覽器對這個事件的默認處理方式是提交數據給action屬性指定的頁面進行處理
👣如果要阻止提交數據到指定的頁面，就需要編寫一個事件處理程序來改變瀏覽器對form標籤的
onsubmit事件的默認處理方式