web前端学习（四）JavaScript学习笔记部分（3）-- JavaScript函数+异常处理+事件处理

1、Javascript函数-了解函数的用途

1.1、函数：

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

2、Javascript函数-定义函数

2.1、function必须小写

3、Javascript函数-调用函数

3.1、调用方式：

　　在<script>标签内部调用

　　在HTML文件中调用

　　　　加一个onclick()函数

4、Javascript函数-带参数的函数

　　onclick="demo('iwen',20)";

　　在这里要注意的是在双引号内部传string类型数值时需要使用单引号。

5、Javascript函数-带返回值的函数

　　有时需要将函数的值返回给调用他的地方。

　　通过使用return语句就可以实现

　　注意：在使用return语句时，函数会停止执行，同时返回值；

　　return

6、Javascript函数-局部变量和全局变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var n = 10; m = 10;//全局变量

    function demo(){

        var i = 10;//局部变量

        x = 10;//全局变量（但是要等x所在的demo函数调用之后才可以使用）

    }

    demo();

    alert(x);

</script>

</body>

</html>

2、事件

2.1、什么是事件？

　　事件是可以被JavaScript侦测到的行为

2.2、主要事件

事件	描述
onClick	单击事件
onMouseOver	鼠标经过事件
onMouseOut	鼠标移出事件
onChange	文本内容改变事件
onSelect	文本框选中事件
onFocus	光标聚集事件
onBlur	移开光标事件
onLoad	网页加载事件
onUnload	关闭网页事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body onload="mgs()">

    <div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)">this</div>

    <script>

        function onOver(ooj){

            ooj.innerHTML = "hello";

        }

        function onOut(ooj){

            ooj.innerHTML = "world";

        }

    </script>

    <form>

        <input type="text" onchange="alert('内容改变了');">

        <input type="text" onselect="changeDemo(this)">

    </form>

    <script>

        function changeDemo(bg){

            bg.style.background = "blue";

        }

        function mgs(){

            alert("网页内容加载完毕");

        }

    </script>

</body>

</html>

异常处理

1、异常：

　　当JavaScript引擎执行JavaScript代码时，发生了错误，导致程序停止运行

2、异常抛出

　　当异常产生，并且将这个异常生成一个错误信息

3、异常捕获

　　try{

　　　　//发生异常的代码块;

　　}catch(err){

　　　　错误信息处理;

　　}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    function demo(){

        try{

            alert(str);//正确错误都要执行。

        }catch(err){

            alert(err);

        }

    }

    demo();

</script>

</body>

</html>

4、Throw语句

　　通过throw语句创建一个自定义错误

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form>

    <input type="text" id="txt">

    <input type="button" id="button" onclick="demo()" value="按钮">

</form>

<script>

    function demo(){

        try{

            var e = document.getElementById("txt").value;

            if(e == ""){

                throw "用户输入异常 == null";

            }

        }catch(err){

            alert(err);

        }

    }

</script>

</body>

</html>

巴特西