JavaScript函數、異常捕獲和事件

一、函數

函數是由事件驅動的 或者當它被調用時執行的可重復使用的代碼塊

1.定義函數

function 函數名(){

函數體;(代碼塊)

}

註意:JavaScript對大小寫十分敏感,所以這裡的function必須小寫。在函數調用時,也必須按照函數的相同名稱來調用函數

function demo(){
    var a = 10;
    var b = 11;
    alert(a+b);
}
function tell(){
    var n = 10;
    var m = 33;
    alert(n*m);
}

2.調用函數

方法本身不能執行,隻能被調用後執行。

調用方式:

1)在

<script>
    function demo(){
    var a = 10;
    var b = 11;
    alert(a+b);
}
demo()
</script>
<form>
    <input type="button" value="按鈕" onclick="demo()"/>
</form>

3.帶參數的函數

函數參數

在函數的調用中,也可以傳遞值,這些值被稱為參數,

例:demo(arg1,arg2);

參數的個數可以為任意多,每個參數用“,”隔開

function demo(a,b){
    var sum = a+b;
    alert(sum);
}
demo(12,23);

4.帶返回值的函數

返回值

有時我們需要將函數的值返回給調用他的地方,可以通過return語句就可以實現

註意:在使用return語句時,函數會停止執行,同時返回值

<p id="pid"></p>
<script>
function demo(){
    return "Hello!"; 
}
demo();
document.getElementById("pid").innerHTML=demo(12,10);
</script>

5.局部變量和全局變量

局部變量:函數中聲明的變量,隻能在當前函數中使用,函數執行結束就被銷毀

全局變量:聲明在函數之外的變量,在全局任何地方都可以使用

    var v = 10;  m=20//全局變量 
    function demo(){
        var i = 10;//局部變量
        x = 20;//全局變量   demo()方法調用後x才可以成為全局變量可被調用
    }

二、異常捕獲

1.異常

當JavaScript引擎執行JavaScript代碼時,發生瞭錯誤,導致程序停止運行

2.異常拋出

當異常產生,並且將這個異常生成一個錯誤信息

3.異常捕獲

try{
    發生異常的代碼塊;
}catch(err){
    錯誤信息處理;
}
<script>
function demo(){
    try{
        alert(str);
    }catch(err){
        alert(err);
    }
}
demo();
</script>

4.Throw語句

通過throw語句創建一個自定義錯誤

<form>
    <input id="txt" type="text">
    <input id="btn" type="button" onclick="demo()" value="按鈕">
</form>
<script>
function demo(){
    try{
        var e = document.getElementById("txt").value;
        if(e==""){
            throw "請輸入";
        }
    }catch(err){
        alert(err);
    }
}
demo();
</script>

三、事件

1.什麼是事件?

事件是可以被JavaScript偵測到的行為

事件描述

onClick單擊事件

onMouseOver鼠標經過事件

onMouseOut鼠標移出事件

onChange文本內容改變事件

onSelect文本框選中事件

onFocus光標聚集事件

onBlur移開光標事件

onLoad網頁加載事件

onUnload關閉網頁事件

<body onload="mgs()">
    <p class="p" onmouseout="onOut(this)" 
    onmouseover="onOver(this)"></p>
    <form>
    <input type="text" onchange="changeDemo(this)">
    <input type="text" onchange="alert('hello,change')">
    <input type="text" onselect="changeDemo1(this)">
    <input type="text" onselect="changeDemo2(this)">
    </form>
    <script>
    function onOver(ooj){
        ooj.innerHTML = "hello";
    }
    function onOut(ooj){
        ooj.innerHTML = "world";
    }
    function changeDemo(bg){
        alert("hello,內容改變瞭!");
    }
    function changeDemo1(bg){
        bg.style.background="red";
    }
    function changeDemo2(bg){
        bg.style.background="blue";
    }
    function mgs(){
        alert("網頁內容加載完畢!");
    }
    </script>
</body>

發佈留言