Javascript学习第一季(5)
2008-08-21 15:44
316 查看
1 ,函数:
function是一个定义一次 却可以多次调用的js代码。
当一个函数被一个对象调用时,那么这个函数就叫做这个对象的方法。
function cssrain( x , y)
{
//code
}
解释:
cssrain : 为函数名;
( ) : 为 运算符;
x , y : 为 参数;
2 ,函数的返回值:
function a(x){
document.write(x);
}
function b(y){
document.write(y);
return y;
}
alert( a(1) ) //因为没写return,所以返回undefined
alert( b(2) )
3 function语句和函数直接量:
function f(x) { return x * x ;} //
var f = function(x){ return x * x ;} //
第一个是function语句创建的,第二个是直接用函数直接量定义一个表达式,当然用这种方式,创建的也是匿名函数。
虽然直接量可以匿名,但也可以指定函数名;
比如:
var f = function fact(x){ return x * fact(x-1) ;} //这样做的好处; 调用自身非常爽。
4 函数命名:
function like_this(){}
或者 function likeThis(){} //驼峰式
5 函数的参数:
由于js是一种宽松类型语言,参数不需要指定什么数据类型。参数也可以多 也可以少,
比如: function x(a,b){} //我们写了2个参数
如果我们传了3个参数,js会自动忽略掉多的/
实例:
function x(a,b){
document.write(a+ " "+b);
}
x(1,2,3,4);
如果我们只传了一个参数,会出现什么情况呢?
function x(a,b){
document.write(a+ " "+b);
}
x(1);
我们发现输出 了undefined,所以js会把少的,赋予undefined;
这样可能会引起程序错误。
解决:
function x(a,b){
var b = b || " "; // 这个是或运算符,如果前面的b为undefined,也就是false,他会取后面的空字符
document.write(a+ " "+b);
}
x(1);
6,实战:
编写一个javascript图片馆:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>Image Gallery</title>
<script type="text/javascript" >
function showPic(whichpic) {
var source = whichpic.getAttribute("href"); //获取当前点击的元素的属性href的值
var placeholder = document.getElementById("placeholder"); //获取目标
placeholder.setAttribute("src",source);
/*
设置目标的属性src。从而达到改变图片。
setAttribute完成了2部操作:即先创建属性,然后赋值。如果属性存在,则覆盖属性的值。
当然我们可以用 placeholder.src = source;
不过,还是建议大家使用setAttribute(),它是1级dom,
他可以对文档中的任何一个元素的任何一个属性做出修改。
另外他的移植性更好。
*/
var text = whichpic.getAttribute("title");
//获取当前点击的元素的属性title的值
var description = document.getElementById("description");//获取目标
description.firstChild.nodeValue = text;
/*
或者使用
description.childNodes[0].nodeValue = text;
*/
}
</script>
</head>
<body>
<h1>javascript 图片馆</h1>
<!--
在a标签上加事件我们要注意,避免要他跳转。
解决方法:函数返回false; 事件认为链接没有被点击。
当然这种情况是在href的值有用的情况下。
如果href的值是javascript:void(0);也可以不跳转。
-->
<ul>
<li>
<a href="images/fireworks.jpg" title="test1" onclick="showPic(this); return false;">test1</a>
</li>
<li>
<a href="images/coffee.jpg" title="test2" onclick="showPic(this); return false;">test2</a>
</li>
<li>
<a href="images/rose.jpg" title="test3" onclick="showPic(this); return false;">test3</a>
</li>
<li>
<a href="images/bigben.jpg" title="test3" onclick="showPic(this); return false;">test4</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">选择图片.</p>
</body>
</html>
function是一个定义一次 却可以多次调用的js代码。
当一个函数被一个对象调用时,那么这个函数就叫做这个对象的方法。
function cssrain( x , y)
{
//code
}
解释:
cssrain : 为函数名;
( ) : 为 运算符;
x , y : 为 参数;
2 ,函数的返回值:
function a(x){
document.write(x);
}
function b(y){
document.write(y);
return y;
}
alert( a(1) ) //因为没写return,所以返回undefined
alert( b(2) )
3 function语句和函数直接量:
function f(x) { return x * x ;} //
var f = function(x){ return x * x ;} //
第一个是function语句创建的,第二个是直接用函数直接量定义一个表达式,当然用这种方式,创建的也是匿名函数。
虽然直接量可以匿名,但也可以指定函数名;
比如:
var f = function fact(x){ return x * fact(x-1) ;} //这样做的好处; 调用自身非常爽。
4 函数命名:
function like_this(){}
或者 function likeThis(){} //驼峰式
5 函数的参数:
由于js是一种宽松类型语言,参数不需要指定什么数据类型。参数也可以多 也可以少,
比如: function x(a,b){} //我们写了2个参数
如果我们传了3个参数,js会自动忽略掉多的/
实例:
function x(a,b){
document.write(a+ " "+b);
}
x(1,2,3,4);
如果我们只传了一个参数,会出现什么情况呢?
function x(a,b){
document.write(a+ " "+b);
}
x(1);
我们发现输出 了undefined,所以js会把少的,赋予undefined;
这样可能会引起程序错误。
解决:
function x(a,b){
var b = b || " "; // 这个是或运算符,如果前面的b为undefined,也就是false,他会取后面的空字符
document.write(a+ " "+b);
}
x(1);
6,实战:
编写一个javascript图片馆:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>Image Gallery</title>
<script type="text/javascript" >
function showPic(whichpic) {
var source = whichpic.getAttribute("href"); //获取当前点击的元素的属性href的值
var placeholder = document.getElementById("placeholder"); //获取目标
placeholder.setAttribute("src",source);
/*
设置目标的属性src。从而达到改变图片。
setAttribute完成了2部操作:即先创建属性,然后赋值。如果属性存在,则覆盖属性的值。
当然我们可以用 placeholder.src = source;
不过,还是建议大家使用setAttribute(),它是1级dom,
他可以对文档中的任何一个元素的任何一个属性做出修改。
另外他的移植性更好。
*/
var text = whichpic.getAttribute("title");
//获取当前点击的元素的属性title的值
var description = document.getElementById("description");//获取目标
description.firstChild.nodeValue = text;
/*
或者使用
description.childNodes[0].nodeValue = text;
*/
}
</script>
</head>
<body>
<h1>javascript 图片馆</h1>
<!--
在a标签上加事件我们要注意,避免要他跳转。
解决方法:函数返回false; 事件认为链接没有被点击。
当然这种情况是在href的值有用的情况下。
如果href的值是javascript:void(0);也可以不跳转。
-->
<ul>
<li>
<a href="images/fireworks.jpg" title="test1" onclick="showPic(this); return false;">test1</a>
</li>
<li>
<a href="images/coffee.jpg" title="test2" onclick="showPic(this); return false;">test2</a>
</li>
<li>
<a href="images/rose.jpg" title="test3" onclick="showPic(this); return false;">test3</a>
</li>
<li>
<a href="images/bigben.jpg" title="test3" onclick="showPic(this); return false;">test4</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">选择图片.</p>
</body>
</html>
相关文章推荐
- 《Javascript入门学习全集》 Javascript学习第一季(4)
- Javascript学习第一季(1)
- Javascript学习第一季(8)
- 《Javascript入门学习全集》 Javascript学习第一季(6)
- Javascript学习第一季(3)
- Javascript学习第一季(1)
- Javascript学习第一季(3)
- Javascript学习第一季(6)
- 《Javascript入门学习全集》 Javascript学习第一季(5)
- Javascript学习第一季(4)
- Javascript学习第一季(1)
- Javascript学习第一季(9)--Javascript DOM 总结
- 《Javascript入门学习全集》 Javascript学习第一季(7)
- Javascript学习第一季(2)
- Javascript学习第一季(5)
- Javascript学习第一季(1)
- ext4 学习笔记(七)[ExtJS扩展原生Javascript](白鹤翔第一季)
- 《Javascript入门学习全集》 Javascript学习第一季(1)
- 《Javascript入门学习全集》 Javascript学习第一季(8)
- 《Javascript入门学习全集》 Javascript学习第一季(2)