jsp语言基础6-函数

来源：互联网发布：幼儿英语网络课程编辑：程序博客网时间：2024/05/17 23:31

JavaScript语言基础---函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript语言基础---函数function,Function</title>
</head>
<body>
<pre>
js函数的定义格式：
function 函数名(形参列表){
执行语句；
[return 返回值；]
}
</pre>
<script type="text/javascript">
//跟Java的区别：函数没有返回类型，形参也没类型---因为都是var，没必要写
function hello() {
//alert(hello);
document.write(hello);
//function hello() ; alert(hello); document.write(hello); document.write("hello"); }hello
document.write("hello");////hello
}
//hello();//调用hello
</script>
<script type="text/javascript">
function sum(a, b) {
return a + b;
alert("a+b");
}
function fun() {
var x = sum(4, 6);
document.write(x);//10
}
//fun();
</script>
<input type="button" onclick="hello();" value="函数1"> <br/>
<input type="button" onclick="fun();" value="函数2"> <br/>
<hr>

<h3>以下演示函数的若干细节</h3>
<input type="button" onclick="demo();" value="函数的细节演示1"> <br/>
<input type="button" onclick="demo2();" value="函数的细节演示2"> <br/>
<input type="button" onclick="demo3();" value="函数的细节演示3"> <br/>
<script type="text/javascript">
function getsum(){
return 10;
}
function demo(){
// var x = getsum();
// alert(x);

var y = getsum; //函数其实是一个Function对象，函数名即是对象名，本句相当于是引用赋值---y和getSum指向同一个Function对象
alert(y); //相当于调用 : y.toString(),输出整数函数的特征字符串---函数的定义代码
//输出结果 function getsum(){return 10;}
alert( y() ); //输出:10 ---调用引用y所指向的那个Function对象对应的函数代码
}
</script>

<script type="text/javascript">
//2有关函数书写位置的细节
function demo2(){
show(1,2);
}
//demo2();//☆WA:不能执行，因为浏览器在解析当前<script>标记时，还没有加载下一个<script>标记，因此不认识show(a,b)这个函数
//☆如果在上面按钮"函数的细节演示2"的单击事件中调用demo2()，则可以，因为事件发生时，浏览器已经把整个页面都解析完(显示完成)。
//☆综上，为了我们以为写的所有js函数在页面都能被认识，通常把这些js代码写在<head>中，然后在页面元素事件中调用，此时<head>部分早就解析完了。

//如果两个function在一个script里面，可以用demo
</script>

<script type="text/javascript">
function show(a,b){ //这里的a,b不是用来识别函数用的，而且让js帮忙把前两个实参装配到这个两个变量，以便于使用
alert(a+","+b);

//有关函数参数的细节说明：js在内部是用一个名为arguments的数组去接收实参的，接受所有的实参数据，根据形参去装配数据
alert("arguments.length:"+arguments.length);//arguments.length: 2
for(var i=0;i<arguments.length;i++){
document.write(arguments[i]+" ");//1,2
}

}
</script>

<script type="text/javascript">
//3有关函数参数的细节: js中的函数不存在重载，参数根据调用时的实参进行自动装配---给了就赋值，没给就是undefined,多给了没接住
//js中参数跟函数的识别没有关系，只以函数名识别，而且函数名实际上是引用变量，和函数名捆绑的引用变量指的是同一个函数
function demo3(){
//show(1,2);
//show(1,2,4);
//show(1);
//show();
show(3,5,"ab",true,8);//arguments.length: 5 //3,5,

}

</script>

<hr color="red" size="3"/>

<pre>
js动态函数的定义格式：
var 函数名 = new Function(形参列表,函数体描述); //形参列表和函数体描述必须都以字符串的形式给出
</pre>
<script type="text/javascript">
/*对add函数的描述
function add(a,b){
var s=0;
s = a+b;
return s;
}
*/
</script>

<script type="text/javascript">
//var add= new Function("a","b","var s=0; s=a+b; return s;");//参数列表分开写
var add= new Function("a,b","var s=0; s=a+b; return s;");//参数列表合用一个字符串参数
alert( add(3,5) );//8
</script>

<h3>动态函数解耦用法演示---类似于Java中的类反射</h3>
函数参数列表:<input type="text" name="param"> 函数体描述:<input type="text" name="desc"> <input type="button" value="执行函数" onclick="aa();">
<script type="text/javascript">
function aa(){
var param = document.getElementsByName("param")[0].value;//在文本框中填写函数列表和函数体，再进行获取这样更灵活
var desc = document.getElementsByName("desc")[0].value;
var f= new Function(param,desc);//参数列表合用一个字符串参数
alert( f(3,5) );
}
</script>

</body>
</html>

0 0