HTML5+CSS3+JavaScript从入门到精通-15

HTML5+CSS3+JavaScript从入门到精通

作者：王征，李晓波

第十五章 JavaScript编程的函数和正则表达式

案例

15-01 函数的定义与调用

<!DOCTYPE html>
<!--web15-01-->
<!--
    函数定义在HTML网页的head元素中的script子元素中；
    亦可在单独的脚本文件中定义，并保存在外部文件中；
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>函数的定义与调用</title>
    <script type="text/javascript">
        function myresume()
        {
            document.write("姓名：张平");
            document.write("<br>性别：男");
            document.write("<br>年龄：36");
            document.write("<br>职业：教师");
            document.write("<br>爱好：足球");
        }
    </script>
</head>
<body>
    <h3>函数的定义与调用</h3>
    <hr />
    <script type="text/javascript">
        myresume();
    </script>
</body>

</html>

复制

15-02 函数参数的值传递

<!DOCTYPE html>
<!--web15-02-->
<!--
    若实参少于形参，少的形参用undefined来使用；
    若实参多于形参，按顺序调用，多的实参不使用；
    一般调用时，都是相等的。
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>函数参数的值传递</title>
    <script type="text/javascript">
        function myresume(xm, xb, nl, zy, ah)
        {
            document.write("<br>姓名：", xm, "&nbsp&nbsp&nbsp&nbsp");
            document.write("    性别：", xb, "&nbsp&nbsp&nbsp&nbsp");
            document.write("    年龄：", nl, "&nbsp&nbsp&nbsp&nbsp");
            document.write("    职业：", zy, "&nbsp&nbsp&nbsp&nbsp");
            document.write("    爱好：", ah, "&nbsp&nbsp&nbsp&nbsp");
        }
    </script>
</head>
<body>
    <h3>函数参数的值传递</h3>
    <hr />
    <script type="text/javascript">
        var name, sex, age, profession, interest;
        name = "张三";
        sex = "男";
        age = 28;
        profession = "教师";
        interest = "足球";
        myresume(name, sex, age, profession, interest);

        name = "王五";
        profession = "工人";
        myresume("李四", "女", 25, "记者", "音乐");
        myresume(name, "男", 32, profession, "读书");
    </script>
</body>
</html>

复制

15-03 函数参数的地址传递

<!DOCTYPE html>
<!--web15-03-->
<html>
<head>
    <meta charset="utf-8" />
    <title>函数参数的地址传递</title>
    <script type="text/javascript">
        function myresume(a)
        {
            for (i in a)
            {
                document.write(a[i] + "&nbsp&nbsp&nbsp&nbsp");
            }
            document.write("<br>");
        }
    </script>
</head>
<body>
    <h3>函数参数的地址传递</h3>
    <hr />
    <script type="text/javascript">
        var a = new Array("张三", "男", 28, "教师", "足球");
        document.write("姓名  性别  年龄  职业  爱好<br>");
        myresume(a);
        a[0] = "李四";
        a[1] = "女";
        a[2] = 25;
        a[3] = "记者";
        a[4] = "音乐";
        myresume(a);
    </script>
</body>
</html>

复制

15-04 函数参数的值传递和地址传递

<!DOCTYPE html>
<!--web15-04-->
<html>
<head>
    <meta charset="utf-8" />
    <title>函数参数的值传递和地址传递</title>
    <script type="text/javascript">
        function example(a, b)
        {
            a[0] = 10;
            a[1] = 20;
            a[2] = 30;
            b = 50;
            document.write("<hr>函数中：<br>");
            document.write("基本类型变量的值为：", b, "<br>");
            document.write("数组的值为:");
            for (i in a)
            {
                document.write(a[i], "&nbsp&nbsp")
            }
            document.write("<br>");
        }
    </script>
</head>
<body>
    <h3 align="center">函数参数的值传递和地址传递</h3>
    <hr />
    <script type="text/javascript">
        var x = new Array(1, 2, 3);
        var y = 5;
        document.write("调用函数前：<br>");
        document.write("基本类型变量的值为：", y, "<br>");
        document.write("数组的值为:");
        for (i in x) {
            document.write(x[i], "&nbsp&nbsp")
        }
        document.write("<br>");

        example(x, y);

        document.write("<hr>调用函数后：<br>");
        document.write("基本类型变量的值为：", y, "<br>");
        document.write("数组的值为:");
        for (i in x) {
            document.write(x[i], "&nbsp&nbsp")
        }
        document.write("<br>");
    </script>
</body>
</html>

复制

15-05 显示数组中的最大数

<!DOCTYPE html>
<!--web15-05-->
<html>
<head>
    <meta charset="utf-8" />
    <title>显示数组中的最大数</title>
    <script type="text/javascript">
        function max(xlist)
        {
            var m = 0;
            for (i in xlist)
            {
                m = m > xlist[i] ? m : xlist[i];
            }
            return m;
        }
    </script>
</head>
<body>
    <h3 align="center">显示数组中的最大数</h3>
    <hr />
    <script type="text/javascript">
        var x = new Array(302, 416, 78, 155, 403, 861);
        document.write("显示数组中所有元素的值：", x, "<br><br>");
        document.write("这组数中的最大值是：", max(x), "<br>");
    </script>
</body>
</html>

复制

15-06 递归函数

<!DOCTYPE html>
<!--web15-06-->
<html>
<head>
    <meta charset="utf-8" />
    <title>递归函数</title>
    <script type="text/javascript">
        function myn(n)
        {
            if (n == 0 || n == 1) {
                result = 1;
            }
            else {
                result = myn(n - 1) * n;
            }
            return result;
        }
    </script>
</head>
<body>
    <h3 align="center">递归函数</h3>
    <hr />
    <script type="text/javascript">
        var x = myn(8);
        document.write("递归函数的返回值，即myn(8)=", x);
    </script>
</body>

</html>

复制

15-07 match()方法的应用

<!DOCTYPE html>
<!--web15-07-->
<!--
    正则表达式:
    flag--i(忽略大小写)g(全局匹配)m(多行匹配)
    1. var varname=/pattern/flags; 
        eg.language=/JavaScript/ig;  其中flag:
    2. var varname=new RegExp("pattern"[,"flag"]);
        eg.var language=new RegExp("JavaScript", "ig");

    字符串测试和匹配：
    1. 正则表达式对象： exec(), test()
    2. String对象： match(), replace(), search(), split()

    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>match()方法的应用</title>
</head>
<body>
    <h3>match()方法的应用</h3>
    <hr />
    <script type="text/javascript">
        var mymatch = new Array();
        var s = "JavaScript is powerful and javascript is very easy!";
        var regex = new RegExp("JavaScript", "ig");
        mymatch = s.match(regex);

        document.write("最近一次匹配的字符为：" + RegExp.input + "<br><hr>"); //最近一次匹配的字符为：JavaScript is powerful and javascript is very easy!
        document.write("匹配字串的个数为：" + mymatch.length + "<br>");      //匹配字串的个数为：2
        for (i = 0; i < mymatch.length; i++)
        {
            //第0个匹配字符串为：JavaScript
            //第1个匹配字符串为：javascript
            document.write("第" + i + "个匹配字符串为：" + mymatch[i] + "<br>"); 
        }
        document.write("<hr>最近一次匹配的字符前面的字串为：" + RegExp.leftContext + "<br>");   //最近一次匹配的字符前面的字串为：JavaScript is powerful and 
        document.write("最近一次匹配字符后面的字串为：" + RegExp.rightContext + "<br>");       //最近一次匹配字符后面的字串为： is very easy!

    </script>
</body>
</html>

复制

15-08 replace()方法的应用

<!DOCTYPE html>
<!--web15-08-->
<html>
<head>
    <meta charset="utf-8" />
    <title>replace()方法的应用</title>
</head>
<body>
    <h3 align="center">replace()方法的应用</h3>
    <hr />
    <script type="text/javascript">
        var beforeString = "JavaScript is powerful and javascript is very easy!";
        var regex = /javascript/ig;
        document.write("替换前的字符串为：" + beforeString + "<br><br>");
        var afterString = beforeString.replace(regex, "JAVASCRIPT");//replace的使用方法
        document.write("替换后的字符串为：" + afterString + "<br>");

    </script>
</body>
</html>

复制

15-09 search()方法的应用

<!DOCTYPE html>
<!--web15-09-->
<html>
<head>
    <meta charset="utf-8" />
    <title>search()方法的应用</title>
</head>
<body>
    <h3 align="center">search()方法的应用</h3>
    <hr />
    <script type="text/javascript">
        var myString = "I XX like javascript!";
        var regex = /like/;
        var index = myString.search(regex);//返回位置，从0开始计算，未找到匹配模式返回-1；
        //在字符串'I XX like javascript!'的第5个字符位置找到匹配模式/like/
        document.write("在字符串\'" + myString + "\'的第" + index + "个字符位置找到匹配模式" + regex);
    </script>
</body>

</html>

复制

15-10 split()方法的应用

<!DOCTYPE html>
<!--web15-10-->
<html>
<head>
    <meta charset="utf-8" />
    <title>split()方法的应用</title>
</head>
<body>
    <h3 align="center">split()方法的应用</h3>
    <hr />
    <script type="text/javascript">
        var myArray = new Array();
        var s = "JavaScript,C,C++,Java,HTML,CSS";
        var regex = /,/;
        myArray = s.split(regex);//直接返回为数组，并丢弃regex“，”
        document.write("原字符串为：\'" + s + "\'<br><hr>");
        document.write("分隔后的字串分别为：<br>");
        for (i = 0; i < myArray.length; i++)
        {
            document.write(myArray[i]+"<br>");
        }
    </script>
</body>
</html>

复制