Javascript 函数介绍

news2025/1/18 3:18:54

Javascript 函数介绍

很多教程书一上来就讲解一堆语法，例如函数定义、函数调用什么。等读者看完了函数这一章都没搞懂什么是函数。

在讲解什么叫函数之前，我们先看下面一段代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var sum=0;
        for(var i=1;i<50;i+=2)
        {
            sum+=i;
        }
        document.write("50以内所有奇数和为："+sum);
    </script>
</head>
<body>
</body>
</html>

大家一看就知道了，上面代码实现的是50以内所有奇数的和。如果要分别计算50以内所有奇数和以及100以内所有奇数和，那读者该怎么实现。很多人很快就写了以下代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var sum1=0;
        for(var i=1;i<50;i+=2)
        {
            sum1+=i;
        }
        document.write("50以内所有奇数和为："+sum1);
        document.write("<br/>");
        var sum2=0;
        for(var j=1;j<100;j+=2)
        {
            sum2+=j;
        }
        document.write("100以内所有奇数和为："+sum2);
    </script>
</head>
<body>
</body>
</html>

那我现在问一个问题，如果我要你实现50以内所有奇数和、100以内所有奇数和、150以内奇数和、200以内所有奇数和、250以内所有奇数和。那你岂不是要每次都重复编写次类似的代码？要是没有一种简单的实现方法，俺们这些程序猿还用活的？

为了解决减轻这种重复编码的负担，函数这种东西就应运而生。例如实现上面5个范围以内的实现方式如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //定义函数
        function sum(n)
        {
            var m=0;
            for(var i=1;i<n;i+=2)
            {
                m+=i;
            }
            document.write(n+"以内所有奇数和为："+m+"<br/>");
        }
        //调用函数，计算50以内所有奇数的和
        sum(50);
        //调用函数，计算100以内所有奇数的和
        sum(100);
        //调用函数，计算150以内所有奇数的和
        sum(150);
        //调用函数，计算200以内所有奇数的和
        sum(200);
        //调用函数，计算250以内所有奇数的和
        sum(250);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：