Javascript函数的简单学习

简介: 第九课函数的定义与调用1:函数的定义    语法格式    function 函数名(数据类型 参数1){//function是定义函数的关键字        方法体;//statements,用于实现函数功能的语句        [返回值return expression]//expression可选参数,用于返回函数值            }   命名规则:函数名的命名规则,当一个名字包含多个单词的时候,习惯上用下划线把单词分隔开,如like_this()。

第九课
函数的定义与调用
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运行结果如下

 


 

         
    

目录
相关文章
|
16天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
16天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
10 0
|
16天前
|
JavaScript
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
9 0
|
27天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
17 1
|
1月前
|
前端开发 JavaScript 数据处理
在JavaScript中,什么是异步函数执行的例子
在JavaScript中,什么是异步函数执行的例子
10 0
|
1月前
|
JavaScript
JS封装节流函数
JS封装节流函数
15 0
|
1月前
|
JavaScript 前端开发
JavaScript函数科里化
JavaScript函数科里化
|
3天前
|
缓存 JavaScript 前端开发
js的入口函数,入口函数的作用
js的入口函数,入口函数的作用
12 4
|
4天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习