JavaScript函数 - 极悦

JavaScript教程

JavaScript函数

函数function类似于java语言中的方法Method,也是一段可以完成特定功能的代码片段,并且这段代码片段是可以重复利用的。在javascript中定义函数的语法:

定义函数:
  第一种方式:
function 函数名(形式参数列表){ //形参是局部变量
		函数体由js语句构成;
}
调用函数:
  函数名(实参);

  第二种方式:
函数名 = function(形式参数列表){
	函数体由js语句构成;
}

JS语法是弱类型的,所以不需要指定函数的返回值类型。但是JS的函数仍然有返回值。是否返回值取决于程序员的代码决定。包括函数的形参类型也不需要指定。

JS中没有函数重载的概念,在同一个script标签中,函数名不能重名。

示例:

<html>
	<head>
		<title>function_01</title>
		<script language="javascript">
			function sayHello(ename){ //定义函数
				window.document.write("<h1>Hello&nbsp;&nbsp;"+ename+"</h1>");
			}
			sayHello("JACK"); //调用函数
			function getUser(id,name){//定义函数
				return id + "-->" + name;
			}
			document.write("<center>"+getUser(77,"JACK")+"</center>");
			alert(getUser(45)); //参数个数不匹配也可以调用,参数多或少都可以
		</script>
	</head>
</html>

示例:

<html>
	<head>
		<title>JS中函数初步</title>
		<script language="javascript">
			function sayHello(username){
				//alert(username + ",你好!");
				//document是JS中的DOM的顶层对象
				//document内置对象中有一个write方法,可以向浏览器输出HTML代码。
				//document.write(username + ",你好!");
	document.write("<center><font color='blue' size='7'>" + username + ",你好!</font></center>");
			}

			//函数还可以这样定义
			/*
			sayHello = function(username){
				alert(username + ",你好!");
			}
			*/
			//调用函数
			//sayHello("李四");
		</script>
	</head>
	<body>
		<form name="form1">
			<input type="text" name="username"/> 
			<!--
			要获取form表单中的一个标签的value? form的名字.标签的名字.value
			-->
			<inputtype="button"value="sayHello"onclick="sayHello(form1.username.value);"/>
		</form>
	</body>
</html>

示例:

<html>
	<head>
		<title>JS中函数初步</title>

		<script language="javascript">
			
			//JS中的函数也可以有返回值,也可以没有。
			//JS函数最后可以编写return语句,也可以不写。
			function validateName(username){
				//字符串length属性用来获取字符串的长度。
				if(username.length<6){
					return false;
				}
				return true;
			}

			//alert(validateName("jack123123")?"合法":"不合法");
			
			/*
			var flag = validateName("jack");

			if(flag){
				alert("合法");
			}else{
				alert("不合法");
			}
			*/

		</script>
	</head>

	<body>
		<!--
			失去焦点事件:blur
			失去焦点事件句柄:onblur
			以下程序中的this表示当前对象,当前对象是input框。
			this.value是input框的值。
		-->
		<input 
			type="text" 
			name="username" 
			onblur="alert(validateName(this.value)?'合法':'不合法');" />
	</body>
</html>

示例:

<html>
	<head>
		<title>JS中函数初步</title>

		<script language="javascript">
			
			/*
			js中函数声明的时候,不仅是一个函数的声明,还是一种类型的定义。
			JS中类的定义和构造方法于一体。
			*/
			//这里的Dept不但是一个函数名,还是一个类名。
			Dept = function(deptno,dname,loc){
				alert("能执行吗?");
				//this表示当前对象。
				//属性
				this.deptno = deptno;
				this.dname = dname;
				this.loc = loc;

				//动作
				this.print = function(){
	document.write("部门编号:" + this.deptno + ",部门名:" + this.dname + ",部门地理位置:" + this.loc);
				}
				alert("end-->能执行吗?");

			}

			//创建对象
			var d1 =  new Dept(10,"SALES","NEW YORK");
			d1.print();// 调用对象的方法

			alert(d1.deptno);//调用对象的属性
			alert(d1.dname);
			alert(d1.loc);
			
			//这里不会创建对象,这只是普通方法调用。
			Dept(20,"MYSALES","BEIJING");

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

 

技术文档推荐

更多>>

视频教程推荐

更多>>