zoukankan      html  css  js  c++  java
  • Javascript函数的简单学习

    第九课
    函数的定义与调用
    1:函数的定义
        语法格式
        function 函数名(数据类型 参数1){//function是定义函数的关键字
            方法体;//statements,用于实现函数功能的语句
            [返回值return expression]//expression可选参数,用于返回函数值
            
        }

      命名规则:函数名的命名规则,当一个名字包含多个单词的时候,习惯上用下划线把单词分隔开,如like_this()。另一种习惯是在第一个单词以后的所有单词都以一个大写字母开始,如likeThis()。
        //1:函数名:区分大小写,并且在同一个页面中,函数名是唯一的
        //2:parameter:可选参数,用于指定参数列表,但使用多个参数时
        //,参数间使用逗号进行分割,一个函数最多使用255个参数
        实例
        var a=10;
        var sum=0;
        function add(a,b){
            sum=a+b;
            return sum;
        }
        
    2:函数的调用

      函数的参数:javascript函数可以以任意的数目的参数来调用,而不管函数定义中参数名字有多少个,由于函数是宽松类型的,它就没有办法声明所期望的参数的类型,并且,任何函数传递任意类型的参数都是合法的。当调用一个函数的参数少于声明的参数个数的时候,其他的参数就有一个undefined的值。

      编写这样的函数常常是很有用的:某些参数为可选的并且在调用函数的时候可以忽略它们

    关键代码如下所示
    <script language="javascript">
            function checkName(){
                var str=form1.useName.value;//关键代码,可以尝试学习html,调用form标签名字是form1的名字是useName的value值
                if(str==""){
                    alert("请输入姓名");
                }else{
                    alert(str);
                }
            }
        </script>

    <body>
        <form name="form1" method="post" action="">
        请输入姓名<input type="text" name="useName" id="useName" size=20/>
        <br/>
        <input type="button" value="检测" onclick="checkName()">
        </form>
    </body>

    案例如下

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>自己模仿的函数调用检测</title>
        <script language="javascript">
            function checkName(){
                var str=form1.useName.value;
                if(str==""){
                    alert("请输入姓名");
                }else{
                    alert(str);
                }
            }
        </script>
    </head>
    <body>
        <form name="form1" method="post" action="">
        请输入姓名<input type="text" name="useName" id="useName" size=20/>
        <br/>
        <input type="button" value="检测" onclick="checkName()">
        </form>
    </body>
    </html>

    案例运行结果如下


                

                     

    第十课
    事件与事件处理
    1:事件
        什么事事件?例如在页面载入完毕时,将触发onload()事件;
        当用户单击按钮时,将触发按钮的onclick事件等。
        
        常用事件:
        onabort:        对象载入被中断时触发
        onblur:         元素或者窗口本身失去焦点时触发
        onchange:       改变<select>元素中的选项或其他表单元素失去焦点,并且在其获取焦点后内容发生过改变时触发
        onerror:        出现错误时触发
        onfocus:        任何元素或窗口本身获得焦点时触发
        onkeydown:      键盘键包括shift,alt被按下时触发
        onkeypress:     键盘键被按下,并产生一个字符时触发,也就是说按下shift或者alt等键不会触发
        onkeyup:        释放键盘上的按键时触发
        onload:         页面完全载入后触发
        onunload:       页面完全卸载后触发
        onclick:        单击鼠标左键时触发,当光标的焦点在按钮上,并按enter键也会触发
        ondblclick:     双击鼠标左键时触发
        onmousedown:    单击任何一个鼠标按键时触发
        onmousemove:    鼠标在某个元素上移动时持续触发
        onmouseout:     鼠标从指定的元素上移动开始触发
        onmouseover:    鼠标移动到某个元素时触发
        onmouseup:      释放任意一个鼠标按键时触发
        onreset:        单击重置按钮时,在form标签上触发
        onresize:       窗口或者框架的大小发生改变时触发
        onscroll:       在任何滚动条的元素或者窗口上滚动时触发
        onsubmit:       单击提交按钮时,在<form>上触发
        
    2:事件处理
        事件处理程序是用来响应某个事件而执行的处理程序。事件处理程序
        可以是任意的javascript语句,通常使用函数来对事件进行处理
        
        调用函数的两种方式:
        第一种方式,在HTML中绑定
        第二种方式,在javascript中绑定(第二种方式要注意先执行
        form标签内的内容,然后再执行script标签内的内容)
        
     案例1代码如下

     1 <html>
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     4 <title>调用函数的方法1</title>
     5     <script language="javascript">
     6         function save(){
     7             alert("单击做出反应");
     8         }
     9     </script>
    10 </head>
    11 <body>
    12     <input type="button" name="save" id="save" value="保存" onclick="save()">
    13 </body>
    14 </html>

    案例1运行结果如下


                 

    案例2代码如下

     1 <html>
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     4 <title>调用函数的方法1</title>
     5     
     6 </head>
     7 <body>
     8     <input type="button" name="save" id="save" value="保存">
     9     
    10     <script language="javascript">
    11         var bt_save=document.getElementById("save");
    12         bt_save.onclick=function(){//匿名函数
    13             alert("单击做出反应");
    14         }
    15     </script>
    16 </body>
    17 </html>

    案例2运行结果如下


             
        

  • 相关阅读:
    最大上升子序列
    vue的keep-alive组件
    对小程序的研究3
    对getBoundingClientRect属性的研究
    消除浮动的方式
    对微信小程序的研究2
    对小程序的研究1
    对props的研究
    对provide/inject的研究
    对calc()的研究
  • 原文地址:https://www.cnblogs.com/biehongli/p/5765833.html
Copyright © 2011-2022 走看看