JavaScript函数、异常捕获和事件

一、函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

1.定义函数

function 函数名(){
函数体；（代码块）
}
注意：JavaScript对大小写十分敏感，所以这里的function必须小写。在函数调用时，也必须按照函数的相同名称来调用函数

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

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);

参数的个数可以为任意多，每个参数用“，”隔开

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

4.带返回值的函数

返回值

有时我们需要将函数的值返回给调用他的地方，可以通过return语句就可以实现
注意：在使用return语句时，函数会停止执行，同时返回值

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

5.局部变量和全局变量

局部变量：函数中声明的变量，只能在当前函数中使用，函数执行结束就被销毁
全局变量：声明在函数之外的变量，在全局任何地方都可以使用

<script>
    var v = 10;  m=20//全局变量 
    function demo(){
        var i = 10;//局部变量
        x = 20;//全局变量   demo()方法调用后x才可以成为全局变量可被调用
    }
</script>

二、异常捕获

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()">
    <div class="div" onmouseout="onOut(this)" 
    onmouseover="onOver(this)"></div>
    <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>