JavaScript中的函数

前言


很多情况下,程序在执行过程中会反复完成相同或类似的任务,为了避免多次重复编写相同的代码段,


JavaScript把部分代码包装为能够重复使用的模块,称为“函数”。函数可以在程序的其他部分使用,就像它是


JavaScript语言的组成部分一样。


使用函数可以让代码更加易读和维护。函数是JavaScript的基本模块之一,几乎会出现在每个脚本中。


.1     基本语法


创建函数就好像是创建一个新的JavaScript命令,能够在脚本的其他部分使用。创建函数可以使用关键字


funcition,接着是函数的名称,后面紧跟一对圆括号,然后是一对花括号。花括号里面是构成函数的JavaScript语


句,如以下范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        function showAlert(){
            alert("Hello JavaScript")
        }
    </script>
</body>
</html>


.2     调用函数


在页面加载时,包含在函数定义区域内的代码不会被执行,而是在被调用时执行,调用函数只需要使用函数名


称,就可以在需要的地方执行函数的代码,如以下范例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function showAlert(){
        alert("Hello JavaScript")
    }
</script>
<input type="button" value="Show Alert" οnclick="showAlert()"/>
</body>
</html>


显示的效果如下:




把JavaScript代码放置到页面的<head>区域


到目前为止,我们的范例都把JavaScript代码放置到HTML页面的<body>区域。为了更好地发挥函数的作用,我


们要采取更适当的方式,也就是把JavaScript代码放置到页面的<head>区域。当函数位于页面<head>区域的<script>


元素里,或是位于页面<head>区域的<script>元素的src属性所指向的外部文件时,它就可以从页面的任何位置被调


用。把函数放到文档的head部分能够确保它们被调用之前已经被定义了。如以下范例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function showAlert(){
            alert("Hello JavaScript")
        }
    </script>
</head>
<body>
<input type="button" value="Show Alert" οnclick="showAlert()"/>
</body>
</html>


.3     参数


如果函数只是像前面范例中那样在每次调用时只能实现完成相同的操作,那么其应用就会受到很大的局限。好在


我们可以通过向函数传递数据来扩展函数的功能,其实现方法在调用函数时给它传递一个或多个”参数“。如以下范


例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function sum(a,b){
            alert(a+b);
        }
    </script>
</head>
<body>
    <input type="button" value="ADD" οnclick="sum(2,6)"/>
</body>
</html>


我们通过传递两个参数,通过alert来显示两数相加的结果。


效果如下:






.4     从函数返回值


前面范例展示了如何向函数传递参数,让函数来对这些数据进行处理,那么,如何从函数获得数据呢?毕竟,我


们不能只通过弹出对话框来获得函数的结果。从函数返回数据,我们可以使用关键字return。如以下范例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function sum(a,b){
            var num=a+b;
            return num;
        }
    </script>
</head>
<body>
    <input type="button" value="ADD" οnclick="document.write(sum(2,6))"/>
</body>
</html>


以上通过onClick点击事件调用了函数sum,并传入两个参数,函数sum通过return返回两数的和,并通过document对象


的write方法向页面输出数据。(var关键字是用于声明变量的)


效果如下:







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

转载请注明出处:http://blog.csdn.net/hai_qing_xu_kong/article/details/48207901情绪控




©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页