JavaScript 事件函数异常 DOM

一.函数

函数
　1.1 定义函数：
　function 函数名(){
　　函数体;(代码块)
　}
　1.2 function必须小写，函数调用时，也必须按照函数的相同名称来调用函数；
　1.3 函数名通常小写；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var a = 10;
    var b = 20;
    var sum = a + b;
    alert(sum);
</script>

</body>
</html>

在这里插入图片描述
创建函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function demo(a,b) {
        var sum = a + b;
        return sum;
    }
    var v1 = demo(10,10);
    alert(v1);
</script>

</body>
</html>

函数调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function demo(a,b) {
        var sum = a + b;
        alert(sum)
    }
    //函数调用 方式一
    demo(10,20);
</script>
<!--方式三-->
<button onclick="demo(1,4)"> 按钮</button>
<!--方式二-->
<form>
    <input type="button" value="按钮" onclick="demo(10,30)">
</form>

</body>
</html>

带参数的函数：例如，demo(arg1,arg2)
全局变量与局部变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var n = 10;//局部变量
    m = 20;//全局变量
    function demo() {
        var a = 1;//局部变量
        //b这个全局变量 当demo方法调用之后 才会生效
        b = 2;//全局变量
    }
    demo();
    alert(b);
</script>

</body>
</html>

二.异常

异常：JavaScript引擎执行JavaScript代码时，发生了错误，导致程序停止执行；
异常抛出：当异常产生，并且将这个异常生成一个错误信息；
异常捕获：
　3.1　try catch 捕获
　 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(str);
        }
    }
    demo();
</script>
</body>
</html>

3.2 Throw 抛出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<from>
    <input type="text" id="txt">
    <input id="btn" type="button" onclick="demo()" value="按钮">
</from>
<script>
    function demo() {
        try {
            var e = document.getElementById("txt").value;
            if (e == ""){
                throw "请输入";
            }
        }catch (err) {
            alert(err);
        }
    }
    demo();
</script>
</body>
</html>

三.JavaScript事件

什么是事件？
　事件是可以被JavaScript检测到的行为，比如鼠标点击
主要事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--点击按钮弹出 对话框 鼠标点击事件-->
<button onclick="demo()">按钮</button>
<script>
    function demo() {
        alert("Hello");
    }
</script>
</body>
</html>

onchange

<form >
    <input type="text" onchange="changeDemo(this)"> // 等价于"alert('Hello,内容改变了')"
</form>
<script>
    function changeDemo(bg) {
        alert("Hello,内容改变了");
    }
</script>

onselect

<form >
    <input type="text" onselect="changeDemo(this)">
</form>
<script>
    function changeDemo(bg) {
        bg.style.background = "red";
    }
</script>

在这里插入图片描述
onfocus

<form >
    <input type="text" onselect="changeDemo(this)" onfocus="changeDemo1(this)">
</form>
<script>
    function changeDemo(bg) {
        bg.style.background = "red";
    }
    function changeDemo1(bg) {
        bg.style.background = "blue";
    }
</script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="2..css">
</head>
<body onload="demo()">
<script>
    function demo() {
        alert("网页加载完毕")
    }
</script>
</body>
</html>

在这里插入图片描述

四.DOM

HTML DOM
　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）；

在这里插入图片描述
2. DOM操作HTML
　2.1 JavaScript 能够改变页面中的所有HTML元素；
　2.2 JavaScript 能够改变页面中的所有HTML属性；
　2.3 JavaScript 能够改变页面中的所有CSS样式；
　2.4 JavaScript 能够对页面中的所有事件作出反应；

JavaScript 事件 函数 异常 DOM

一.函数

二.异常

三.JavaScript事件

四.DOM

猜你喜欢

JavaScript 事件函数异常 DOM