• Javascript基础(2)


    开始更咯~~~嘻嘻。

    ----------------------------------------------------------------------------------

    异常捕获:即当Javascript引擎执行Javascript代码时发生了错误,导致程序停止运行。异常产生并将这个错误信息生成。

    try{

          错误信息处理;

    }catch(err){

    错误信息处理;

    }

    1.可以在上述过程用throw语句来自定义建立一个语句。

    例:<form>

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

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

        </form>

         <script>

            function demo(){

                try{

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

               if(e==""){

                           throw "输入的值为空";

                            }

                 }catch(err){

                      alert(err);

                 }

    }

         </script>

    结果:界面显示文本框,和按钮若无输入就点击按钮则弹出框提示“输入的值为空”。若输入,则无提示。

    -------------------------------------------------------------------------------------------------

    javascript事件:事件即可以被javascript检测到的行为。(其实我们上面的例子中已经有使用过了,就比如button中用的onclick)

    1.onclick:点击事件

    2.onmouseover:鼠标经过事件

    3.onmouseout:鼠标移出事件

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    例(针对2.3):<div onmouseout="onOut(this)"  onmouseover="onOver(this)"></div>

                          <script>

                         function onOver(ooj){

                                  ooj.innerHTML="hello";

                          }

                         function onOut(ooj){

                                ooj.innerHTNL="world";

                          }

                         </script>

    执行结果:(ps:可以在用cs中s给div大小颜色等,比较好观察)在div框,鼠标移入出现hello,鼠标移出出现world.

    对上述代码注意的再次解疑惑(上期的一些注意点):函数命名第二个字母大写;ooj为局部变量,当函数执行时才有内存,所以两个可以都用ooj.

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    4.onchange:文本内容改变事件

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    例(针对4):

                <form>

                       <input type="text" onchange="changeDemo(this)"/>

                 </form>

                  <script>

                      function changeDemo(){

                               alert("文本框中内容改变了!");

                              }

                  </script>

    结果:界面出现一文本框,当你输入东西时,弹出提示框“文本框中内容改变了!”。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    5.onselect:文本框选中事件

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    例(针对5):

       <form>

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

       </form>

        <script>

                function changeDemo(bg){

                         bg.style.background="red";

                 }

         </script>

    结果:界面出现文本框,当输入东西时,在文本框中选中这些东西,文本框背景变为红色。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    6.onfocus:光标聚集事件。(跟5的差不多,只是它的执行效果是鼠标放上后就变色什么的。)

    7.onblur:移开光标事件。

    8.onload:网页加载事件。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~

    例(针对8):

    <body onload="demo()">

          <script>

                  function demo(){

                         alert("网页加载完毕。");

                  }

            </script>

    </body>

    结果:当网页加载完毕,出现提示框“网页加载完毕。”

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    9.onunload:关闭网页事件。

    --------------------------------------------------------------------------------------------------------

    接下的我就进入了学习dom,嘻嘻,后续再更。

  • 相关阅读:
    2021.02.09 【ABAP随笔】-Excel高效输出工具-xlsx workbench-输出多个Sheet
    2021.02.07 【ABAP随笔】-Excel高效输出工具-xlsx workbench
    Thrift did not exit cleanly
    Docker部署Springboot项目,Invalid or corrupt jarfile /app.jar
    为jenkins设置nginx作为反向代理
    Jenkins安装报错 No valid crumb was included in request
    判断当前设备是ios还是安卓
    vue 路由跳转四种方式 (带参数)
    Vue table的column属性,render函数生成switch开关和button按钮
    H5页面自定义 pxTorem 函数进行单位转换
  • 原文地址:https://www.cnblogs.com/yanyuanyuan/p/5711406.html
Copyright © 2020-2023  润新知