zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    NB-IoT成为3GPP后会有哪些优势
    NB-IOT覆盖范围有多大 NB-IOT的强覆盖是怎么实现的
    4G DTU无线数据透明传输终端
    NB-IoT DTU是什么 NB-IoT的优势有哪些
    4G DTU是什么 4G DTU的功能和特点
    LoRa技术的发展应用和LoRa应用设备
    4G DTU为什么要具有透传的功能
    跨链在SIPC.VIP上的使用流程
    SimpleChain 开发挑战赛邀你来报名啦
    SimpleChain区块链管理系统使用教程
  • 原文地址:https://www.cnblogs.com/foreverlin/p/10070046.html
Copyright © 2011-2022 走看看