zoukankan      html  css  js  c++  java
  • JavaScript---事件

    首先对上节中的运算符进行回顾


    运算符包含

     

    算数运算

    比较运算

    逻辑运算|| &&,!

    自增运算

    复合运算符+=

     

    一切事物皆是对象

    对象具有属性和方法

    点击按钮触发一个事件,就是调用了该对象的方法,之后该方法去触发某一个函数


    函数的定义



    Function函数名()

    {

     函数体;

    }


    函数分为系统函数和自定义函数

     

    如上例子中,点击按钮触发的是对象的 OnClick事件。OnClick="javascript:函数名();"是在标记里写的


    之后就是对函数的编写了


    例如

     

    <html>
    <body>
    <input type="button" name="button" id="subName" value="登录"  onclick="javascript:aaa();"/>
    </body>
    </html>
    <script language="javascript" type="text/javascript">
    function aaa()
    {
    //自定义函数
    alert("大家好,欢迎到来");
    }
    </script>


    例如:我们想点击按钮,获得表单里文本框中数据的字符

     

    如何获取出


    基本方法:

    Document.表单名称.文本框名称.value


    document是一个文档集合,包含页面的所有信息


    上例子中就可以这样编写

     

    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>事件测试</title>
    </head>
     
    <body>
    <form action="" method="post"enctype="multipart/form-data" name="form1"id="form1">
      
      <input type="text"name="txtName" id="txtName" />
        <input type="button"name="button" id="button" value="获取"   onclick="javascript:aaa();"/>
    </form>
    </body>
    </html>
    <script language="javascript" type="text/javascript">
    function aaa()
    {
    //自定义函数
    //获取元素的值
    Var a=
    Document.form1.txtName.value
    Alert(a);
    }
    </script>


    表单的认识


    表单(form

    用于搜集不同类型的用户输入

    它的类型包含

    文本框

    单选按钮多选

    下拉列表

    按钮



    表单实例代码


    <form>
    First name:
    <inputtype="text" name="firstname" />
    <br />
    Last name:
    <inputtype="text" name="lastname" />
    </form>


    为了更好的获取上例子中的信息,避免出现不友好的现象
    .

    我们进行判断


    三个控制结构中的选择结构


    选择结构

     

    if (表达式,结果为boolean的类型表达式) 

    {

    } 

       else

    {

    }

    检测用户为空

     

     名字==""或者是名字=null,但是有时候文本框获取的是null或是”

    所以两个都写上,然后返回return,否则就是弹出获取的值

     

    If(a==null|| a=="")
    {
    Alert("用户名不能为空");
    return
    }
    Else
    {
    Alert(a);
    }
     


    循环结构


     获取数组中的值,使用循环结构时优选的选择

     

    Forwhile循环

     

     while循环不自带自增条件

    需要在循环体中编写

     

    例如
    20个3 相乘的结果是多少呢,来看看吧
     
    <script language="javascript" type="text/javascript" >
     
    var i =1;
    var resourt=1;
    while(  i<=20)
    {
    resourt*=3;
     
    i++;
    //i+=1;
    }
    alert("结果是20个3想成是"+resourt);
    </script>


    for循环1100相加是多少呢


     

    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>for循环</title>
    </head>
     
    <body>
    </body>
    </html>
    <script language="javascript" type="text/javascript" >
     
     
    /*varresourt=0;
    for(vari=1;i<=100;i++)
    {
    resourt+=i;
    }
    alert("1到100相加是"+resourt);/*/
    </script>


     

    如何获取复选框和单选的值呢?


    例如如何获取性别呢 男,女


    1 首先将两个单选放在一个组中xingbie,使其只有一个可选

    2 设置他们的值分别为"","",

    3 判断是否选中checked,属性


    看一个例子吧

     

    <p>性别:
        <input name="radio1"type="radio" id="radio" value="男" />
        <labelfor="radio1"></label>
        男
         
        <input name="radio1"type="radio" id="radio2" value="女"checked="checked" />
        <label for="radio1"></label>
      女</p>
    <script language="javascript" type="text/javascript">
    function aaa()
    {
    //自定义函数
    //获取元素的值
    if(!radio1[0].checked)
    {
    varsex=document.form1.radio1[1].value;//获取选定值
    }
    else
    {
    varsex=document.form1.radio1[0].value;//获取选定值
    }
     
    }
    </script>

     

    以上是对基本的控制结构和简单的事件编写做的小结,不足之处欢迎指正

     

  • 相关阅读:
    多测师讲解requests __上_高级讲师肖sir
    多测师讲解接口自动化测试 _requests_高级讲师肖sir
    jmeter录制
    构造函数
    函数和方法的区别
    python中类的定义
    jmeter图片的上传
    jmeter图片的下载
    jmeter出现乱码怎么解决
    jmeter目录讲解
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3180290.html
Copyright © 2011-2022 走看看