JavaWeb之JavaScript（二）
一、函数深入用法
1、将函数赋给一个变量
function func(a,b){
return a*b;
}
var x = func;
2、将函数赋给对象的属性
3、将函数作为参数传递给另一个函数（高阶函数）
4、将函数作为返回值
什么是闭包
“闭包”是指内层函数可以贮存外层函数的局部变量或参数。
实例1：将函数赋给一个变量、赋给对象的属性、高阶函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的深入用法</title>
<script type="text/javascript">
function giveAnother() {
function func() {
var a = 100;
var b = 200;
alert(a + b);
}
var x = func;//将函数赋给一个变量
x();
}
function asAttribute() {
var per={};
//将函数赋给对象的属性
per.say = function (){
var div = document.getElementById("saydiv");
div.innerHTML="<h3>你好，我正在学习JavaScript</h3>";
};
per.say();
}
//f参数可以接收另一个函数
function highFunc(s,f) {
return f(s);
}
//该函数可以将传入的字符串转换为大写格式
function upper(a) {
return a.toUpperCase();
}
function func() {
var result = highFunc("hello javascript",upper);
alert("高阶函数的调用结果是：" + result);
}
</script>
</head>
<body>
<input type="button" value="将函数赋给一个变量" onclick="giveAnother()">
<br/><br/>
<input type="button" value="将函数赋值给对象的属性" onclick="asAttribute()">
<br/><br/>
<div id="saydiv"></div>
<input type="button" value="高阶函数" onclick="func()"><br/><br/>
</body>
</html>显示结果：
实例2：函数作为返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将函数作为返回值</title>
<script type="text/javascript">
function outer() {
var a = 10;
var b = 5;
return function inner(){
return a+b;
}
}
var x = outer();//接收外部函数返回的内部函数
alert(x);
var y = x();//接收内部函数返回的值
alert(y);
</script>
</head>
<body>
</body>
</html>显示结果：
实例3：闭包的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包的应用</title>
<script type="text/javascript">
var array=[];
function outer(){
var a = ["a","b","c","d"];
for (var i = 0; i < a.length; i++) {
var x = {};
x.index = i;
x.name=a[i];
x.func=function () {
alert(i);
};
array.push(x);
}
}
outer();
for (var j = 0; j < array.length; j++) {
array[j].func();
}
</script>
</head>
<body>
</body>
</html>在outer函数中循环进行4次i=3的时候，循环结束；由于js的运行是一行一行的，所以在下面一个循环中调用了内部函数，因此i要自加，变为4，然后将最后的结果存入到array数组中，循环进行四次，结果就会输出4个4.
二、函数的参数
1、JavaScript中传递给函数的参数是通过arguments对象来保存的。
2、arguments对象有length属性，可以根据此属性得知实际调用时传递参数的个数，也可以通过下标操作符来获取arguments中的元素
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arguments接收实际参数</title>
<script type="text/javascript">
function func(a,b) {
alert("a=" + a);
alert("b=" + b);
for (var i = 0; i < arguments.length; i++) {
alert("传入的实参索引" + i + "，具体值是：" + arguments[i]);
}
}
func(91,285,true,"hello");
</script>
</head>
<body>
</body>
</html>显示结果：
三、JavaScript的内置对象
1、String
常用属性：length 返回字符串的长度
常用方法：toUpperCase()
toLowerCase()
indexOf("子字符串")
lastIndexOf("子字符串")
cahrAt(index)
substring(beginIndex)
substring(beginIndex,endIndex)
实例：String对象的属性集常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String内置对象</title>
<script type="text/javascript">
var s = "hello world";
alert("字符串的长度是：" + s.length + "\n" +
"变为大写：" + s.toUpperCase() + "\n" +
"w在字符串中的位置：" + s.indexOf("w")+ "\n" +
"获取索引位置为4的字符：" + s.charAt(4) + "\n" +
"从索引位置为4开始截取到结束：" + s.substring(4) + "\n" +
"截取索引2到9（不包含）的内容：" + s.substring(2,9) );
</script>
</head>
<body>
</body>
</html>显示结果：
2、Math内置对象
常用属性：PI 圆周率
常用方法：Math.random() 获取0.0到1.0之间点的随机数
Mathpow(a,b) a的b次方
Math.sqrt(num) 求某个数的平方根
Math.ceil(num) 上舍入
Math.floor(num) 下舍入
Math.round(num) 四舍五入
实例：Math对象的常用属性及方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math内置对象</title>
<script type="text/javascript">
alert("圆周率：" + Math.PI + "\n" +
"2的3次方：" + Math.pow(2,3) + "\n" +
"9的平方根：" + Math.sqrt(9) + "\n" +
"2.1上舍入：" + Math.ceil(2.1) + "\n" +
"9.99下舍入：" + Math.floor(9.99) + "\n" +
"5.51四舍五入：" + Math.round(5.51));
</script>
</head>
<body>
</body>
</html>显示结果：
3、Array内置对象
声明数组的方式：
var 数组名称 = [元素1,元素2,元素3...];
JS中数组的特性：
（1）可以存储不同的数据类型的元素。
（2）数组的长度可变。
（3）数组的索引可以是数字，也可以是字符串
数组的属性：length长度属性可以变化。
数组的方法：push(元素);将元素添加到数组中
注意：给数组添加元素的另一种方式：数组名[索引]=元素
pop()弹出一个元素
用for...in语法糖遍历数组
for(var index in array){
//array[index] 当前遍历到的元素
}
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array内置对象</title>
<script type="text/javascript">
var array = ["a",true,"c",2.01];
alert("之前的长度：" + array.length)
for (var i = 0; i < array.length; i++) {
alert(array[i]);
}
array.length = 2;
alert("改变之后的长度为：" + array.length);
for (var i = 0; i < array.length; i++) {
alert(array[i]);
}
array["sport"] = "篮球";
for(var p in array){
alert(p + "------>" + array[p]);
}
</script>
</head>
<body>
</body>
</html>显示结果：
4、Date内置对象
var date = new Date();
常用方法：getFullYear(); //获取年
getMonth(); //获取月
getDate(); //获取一个月中的第几天
getDay(); //获取一周中的第几天
getHours(); //获取时
getMinutes(); //获取分
getSeconds(); //获取秒
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<script type="text/javascript">
function showTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var div = document.getElementById("clock");
div.innerHTML="<h3>现在时间是："+year+"-"+(month+1)+"-"+day+" "+hour+":"+minute+":"+second+"</h3>";
}
setInterval("showTime()");
</script>
</head>
<body>
<div id="clock">div原来默认的文件</div>
</body>
</html>上一篇： *小笑话