HTML5+CSS3+JavaScript从入门到精通-15
2023-04-18 14:27:21 时间
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, "    ");
document.write(" 性别:", xb, "    ");
document.write(" 年龄:", nl, "    ");
document.write(" 职业:", zy, "    ");
document.write(" 爱好:", ah, "    ");
}
</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] + "    ");
}
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], "  ")
}
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], "  ")
}
document.write("<br>");
example(x, y);
document.write("<hr>调用函数后:<br>");
document.write("基本类型变量的值为:", y, "<br>");
document.write("数组的值为:");
for (i in x) {
document.write(x[i], "  ")
}
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>
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击