JavaScript程序基础(八)函数定义与调用

一、函数的定义
编程时,经常遇到一种现象,就是想要实现的功能,可以借鉴以前相同或相似的代码,稍作修改来实现。此时,我们会拷贝原来的一段代码,做简单修改。
这是模块化编程的雏形,如果可以把一段代码做成标准模块,直接拿来使用,就会极大提高编程效率。
要把一段代码做出标准模块,需要掌握规定的格式,下面,我们就学习如何把一段JavaScript代码,做成模块。格式:
function 函数名([参数 1, 参数 2,……]){
语句
[return 返回值]
}
函数定义了以后,并不会被执行。示例:

function hello(){
        document.write("你好");
}

在网页中执行上面的代码,看效果。
函数定义了以后,并不会被执行,只是表明有这样一个模块存在。
函数必须先定义,再调用。只有被调用,函数才会真正执行。
在上面定义hello()的基础上,再添加下面的调用的代码,看效果。

hello();
hello();

二、函数的调用
1. 函数的简单调用
函数简单调用就是通过函数名()来调用对应的代码。示例:

//先定义
function test(str){
        alert(str);
}
//后调用
test(“我喜欢JavaScript”);

2. 在事件响应中调用函数
定义好的函数,也可以在支持事件的HTML标签中调用,示例:

//先定义
function test(str){
        alert(str);
}
//后调用
<input type=“button” value=“提交” onClick=“test(‘我喜欢JavaScript’);”/>

3. 通过链接调用函数
定义好的函数,也可以在不支持事件的HTML标签中通过链接调用,示例:

//先定义
function test(str){
        alert(str);
}
//后调用
<a href=“javascript:test(‘我喜欢JavaScript’);”>单击链接<a/>

在标签中的href属性中使用“javascript:函数名()”格式来调用函数,当用户单击这个链接时,相关函数将被执行。

三、案例演示
1. 编写函数,计算1~100以内所有3的倍数的和。


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<script type="text/javascript">
			function compute(){
			      var sum=0;
			      for(var i=1;i<=100;i++)
			      {
			            if(i%3!=0){
			                  continue;
			            }
			            sum+=i;
			      }
			      document.write(i);
			}
			
			//后调用
			compute();
		script>
	body>
html>

2. 编写函数,生成4位数字的验证码。


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<script type="text/javascript">
			//先定义
			function checkcode(){
				var code="";
				for(var i=1;i<=4;i++){
					var a=Math.random();
					var b=a*10;
					b=Math.floor(b);
					code+=b; 	
			                 }
				return code;
			}
			
			//后调用
			alert(checkcode());
		script>
	body>
html>

你可能感兴趣的:(javascript,javascript,前端,html)