• JavaScript的函数和事件(转)


    一、默认函数

    JavaScript提供了一些默认的函数

     

    编码函数escape():将非字母、数字字符转换成ASCII

    译码函数unescape():将ASCII码转换成字母、数字字符

    求值函数eval()

    数值判断函数isNaN():判断一个值是否为非数值类型

    整数转换函数parseInt():将不同进制(二、八、十六进制)的数值转换成十进制整数

    浮点数转换函数parseFloat():将数值字串转换成浮点数

    1eval()函数

    求值函数eval()的格式为:eval(<表达式>)

    下面的例子将用eval函数得到一个文本框的值,

    然后通过点击按钮弹出一个对话框将其输出。

    <script>

    function show(obj)

    {

        var str=eval("document.Form."+obj+".value");

        alert(“你输入的姓名是:”+str);

    }

    </script>

    <form name="Form" id="Form">

        姓名:

        <input name="name" type="text" value="韦小宝">

       <input name="button" type="button" value="提交" onClick=show("name")>

    </form>

     

    2isNaN()函数

    数值判断函数isNaN()的格式:isNaN(<>)

     

           下例中isNaN函数将判断变量是否不是数值,并输出判断结果。

    <script>

        var x=15;

        var y="黄雅玲";

        document.write("<LI>x不是数值吗?",isNaN(x));

        document.write("<LI>y不是数值吗?",isNaN(y));

    </script>

    3parseInt()函数

           整数转换函数parseInt()的功能是将不同进制(二、八、十六)的数值转换成十进制整数。

           格式:parseInt(数值字串[,底数])

           下面演示了将一个二进制数和一个十六进制数转换成十进制数。

     

    <script>

        document.write("1101<sub>2</sub>=",parseInt("1101",2),"<sub>10</sub><br>");

        document.write("BFFF<sub>16</sub>=",parseInt("BFFF",16),"<sub>10</sub><br>");

    </script>

    4parseFloat()函数

    parseFloat()是浮点数转换函数,它将数值字串转换成浮点数。

           格式:parseFloat(数值字串)

    <script>

        document.write(parseInt("3.1234A56"),"<br>");

        document.write(parseFloat("3.1234A56"),"<br>");

    </script>

    5、自定义函数

    函数是独立于主程序的、具有特定功能的一段程序代码块。

     

    JavaScript函数定义

     

    function 函数名(参数表,变元)

    {

           函数体;

           return 表达式;

    }

     

    说明:

    ·当调用函数时,所用变量或字面量均可作为变元传递。

    ·函数由关键字function定义。

    ·函数名:定义自己函数的名字。

    ·参数表,是传递给函数使用或操作的值,其值可以是常量、变量或其它表达式。

    ·通过指定函数名(实参)来调用一个函数。

    ·函数的返回值是可选项,如果需要返回值,就必须使用return语句将值返回。

    ·函数名对大小写是敏感的。

    约定:

    ·函数名:易于识别(同变量命名规则)。

    ·程序代码:模块化设计。

    ·函数位置:按逻辑顺序,集中置顶。

     

    6、函数中的形式参数

    在函数的定义中,我们看到函数名后有参数表,这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢?在JavaScript中可通过arguments.length来检查参数的个数。

    <script>

           function function_Name(exp1,exp2,exp3,exp4)

           Number =function_Name.arguments.length;

           if(Number>1)

               document.wrile(exp2);

           if(Number>2)

               document.write(exp3);

           if(Number>3)

               document.write(exp4);

        </script>

    函数的调用

    格式:函数名([参数[,参数...]])

    下面的例子演示了没有返回值的函数的定义及调用。

     

    <script>

        function showName(name)

        {

           document.write("我是"+name);

        }

        showName("玲玲"); //函数调用

    </script>

           上例中的function showName(name)为函数定义,其中括号内的name是函数的形式参数,这一点与C语言是完全相同的,而showName(“玲玲”)则是对函数的调用,用于实现需要的功能。

           下面的例子演示了带返回值的函数的定义及调用。

    <script>

        function showName(name)

        {

           str="我是" +name;

           return str;

        }

        document.write(showName("周伯通"));

    </script>

     

    二、函数与事件

     

    事件驱动及事件处理的基本概念

     

     

     

           JavaScript是基于对象(Object-Based)的语言,这与Java不同,Java是面向对象的语言。而基于对象的基本特征,就是采用事件驱动(Event Driven)。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理的程序或函数,我们称之为事件处理程序(Event Handler)。

     

    事件处理程序

     

           浏览器响应某个事件,实现用户的交互操作而进行的处理(过程)。

     

           事件处理程序的调用:浏览器等待用户的交互操作,并在事件发生时,自动调用事件处理程序(函数),完成事件处理过程。

     

     

     

           HTML标签属性:

     

           格式:<tag on事件=“<语句组>|<函数名>”>

     

    由于在JavaScript中对象事件的处理通常由函数(function)来完成,且其基本格式与函数一样,所以可以将前面所介绍的所有函数作为事件处理程序。

     

    格式如下:

     

    function 事件处理名(参数表)

     

    {

     

           事件处理语句集;

     

           ……

     

    }

     

    三、事件驱动

     

    JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件

     

    单击事件onClick

     

    改变事件onChange

     

    选中事件onSelect

     

    获得焦点事件onFocus

     

    失去焦点onBlur

     

    载入文件onLoad

     

    鼠标指示事件onMouseOver

     

    提交事件onSubmit

     

    1、单击事件onClick

     

           当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生单击事件:

     

    button(按钮对象)

     

    checkbox(复选框)或(检查列表框)

     

    radio(单选钮)

     

    reset buttons(重要按钮)

     

    submit buttons(提交按钮)

     

    比如,可以通过下面的按钮激活change()函数,当然change()函数是需要另外提供的:

     

     

     

    <form>

     

        <input type="button" value=“” onClick="change()">

     

    </form>

     

      在onClick等号后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript的内部函数,还可以直接使用JavaScript的代码等。

     

    <body>

     

        <form>

     

           请输入基本资料:<br>

     

           姓名:

     

           <input type="text" name="usr" size="8">

     

           <input type="button" value="请单击"               onClick="alert('谢谢你的填写...')">

     

        </form>

     

    </body>点击请单击按钮后将引发onClick事件,即弹出谢谢你的填写...”的对话框。

     

    2、改变事件onChange

     

           当一个texttextarea域失去焦点并更改值时触发onChange事件,当select下拉选项中的一个选项状态改变后也会引发该事件。

     

           事件适用对象fileUploadselecttexttextarea

     

           下面的例子在文本框的内容改变后,将弹出一个显示内容即将改变!的对话框:

     

           <form>

     

           <input type="text" name="Test" value="Test"                 onChange="alert('内容即将改变!')">

     

        </form>

     

     

     

           页面运行后在文本框中输入内容,即内容发生改变,然后将鼠标拖走,就会引发.

     

    3onChange事件

     

    选中事件onSelect

     

           texttextarea对象中的文字被选中后(文字高亮显示),引发该事件。

     

           下面的例子中,当文本框的内容被选中后,将弹出一个显示内容已被选中!”的对话框:

     

           <form>

     

           <input type="text" name="Test" value="Test"             onSelect="alert('内容已被选中!')">

     

        </form>

     

    4、获得焦点事件onFocus

     

    当用户单击texttextarea以及select对象时,产生该事件。此时该对象成为前台对象。

     

     

     

           该事件适用对象:buttoncheckboxfileUploadlayerpasswordradioresetselectsubmittexttextareawindow

     

     

     

           下面的例子中,当鼠标移到文本域的地方即获得焦点时,立刻弹出一个提示已经获得焦点!”的对话框:

     

           <input type="textarea" value="" name="valueField" onFocus="alert('已经获得焦点!')">

     

    5、失去焦点onBlur

     

    text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该事件,onBlur事件与onFocus事件是一个对应的关系。

     

           该事件适用对象:buttoncheckboxfileUploadlayerpasswordradioresetselectsubmittexttextareawindow

     

     

     

           下面的例子中,浏览器的起始背景色为“lightgrey”,当鼠标移到文本域的地方即获得焦点时,浏览器的背景色变为“red”,当鼠标焦点移动到浏览器的其他地方时,浏览器的背景色变为“white”

     

    <body bgColor="lightgrey">

     

        <form>

     

           <input type="text"                        onFocus="document.bgColor='red'"           onBlur="document.bgColor='white'" >

     

        </form>

     

    </body>

     

    6、载入文件onLoad

     

    当文件载入时,产生该事件。onLoad的作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。

     

           下面的代码在文档打开时,将弹出提示建议浏览器的分辨率:800x600”的对话框。

     

    <script>

     

        function show()

     

        {

     

           var str="建议浏览器的分辨率:800x600";

     

           alert(str);

     

        }

     

    </script>

     

    <body onload="show();">

     

    7、鼠标指示事件onMouseOver

     

    当鼠标指到相应的位置时引发的事件。

     

    事件适用对象:layerlink

     

           下面的例子中,用href“Click me”加上一个超链接,当鼠标指到超链接“Click me”时,将在状态栏提示“Click this if you dare!”

     

    <a href="http://www.myhome.com/"

     

        onMouseOver="window.status='Click this if you dare!'; return true">

     

    Click me

     

    </a>

     

    当鼠标指到文字“Click me”上时,将在状态栏显示提示文字“Click this if you dare!”

     

    8、提交事件onSubmit

     

    它是在点击提交按钮时引发的事件。

     

    事件适用的对象:form

     

    语法:onSubmit="handlerText"

     

           下面的例子中,在点击提交按钮时,就会弹出一个你确认提交吗?”的提示对话框。

     

    <form onSubmit="alert('你确认提交吗?')">

     

           <input type="text" name="txt" value="测试文本">

     

           <input type="submit" value="提交">

     

        </form>

     

    补充:定时器

     

    定时器是用以指定在一段特定的时间后执行某段程序。常用的定时器函数有以下几个:

     

    setTimeout():定时器

     

    clearTimeout():终止定时器

     

    setInterval():设置定时器

    clearInterval():取消使用setInterval()设置的定时器

     

  • 相关阅读:
    Zabbix——1
    Hive 基础知识——01
    Vim快捷命令
    Shell——2
    Shell——6
    Shell——4
    Shell——3
    Shell——1
    Hive 安装和配置以及基本语法——02
    Shell——5
  • 原文地址:https://www.cnblogs.com/xuepei/p/3742725.html
Copyright © 2020-2023  润新知