Javascript学习第一季（5）

来源：互联网发布：js所有按钮点击事件编辑：程序博客网时间：2024/05/01 15:37

这章我们先说说函数，然后来点实战。

1 ,函数：

function是一个定义一次却可以多次调用的js代码。

当一个函数被一个对象调用时，那么这个函数就叫做这个对象的方法。

function cssrain( x , y)

{

//code

}

解释:

cssrain : 为函数名；

( ) : 为运算符；

x , y : 为参数；

2 ,函数的返回值：

functiona(x){

document.write(x);

}

functionb(y){

document.write(y);

return y;

}

alert(a(1) ) //因为没写return，所以返回undefined

alert(b(2) )

3 function语句和函数直接量：

functionf(x) { return x * x ;} //

varf = function(x){ return x * x ;} //

第一个是function语句创建的，第二个是直接用函数直接量定义一个表达式，当然用这种方式，创建的也是匿名函数。

虽然直接量可以匿名，但也可以指定函数名；

比如：

varf = function fact(x){ return x * fact(x-1) ;} //这样做的好处;调用自身非常爽。

4 函数命名：

function like_this(){}

或者 function likeThis(){} //驼峰式

5 函数的参数：

由于js是一种宽松类型语言，参数不需要指定什么数据类型。参数也可以多也可以少，

比如： function x(a,b){} //我们写了2个参数

如果我们传了3个参数，js会自动忽略掉多的/

实例：

functionx(a,b){

document.write(a+ " "+b);

}

x(1,2,3,4);

如果我们只传了一个参数，会出现什么情况呢？

functionx(a,b){

document.write(a+ " "+b);

}

x(1);

我们发现输出了undefined，所以js会把少的，赋予undefined；

这样可能会引起程序错误。

解决：

functionx(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">

<head>

<metahttp-equiv="content-type" content="text/html; charset=gbk"/>

<title>Image Gallery</title>

<scripttype="text/javascript" >

functionshowPic(whichpic) {

var source =whichpic.getAttribute("href"); //获取当前点击的元素的属性href的值

varplaceholder = document.getElementById("placeholder"); //获取目标

placeholder.setAttribute("src",source);

设置目标的属性src。从而达到改变图片。

setAttribute完成了2部操作：即先创建属性，然后赋值。如果属性存在，则覆盖属性的值。

当然我们可以用placeholder.src = source;

不过，还是建议大家使用setAttribute(),它是1级dom，

他可以对文档中的任何一个元素的任何一个属性做出修改。

另外他的移植性更好。

var text =whichpic.getAttribute("title");

//获取当前点击的元素的属性title的值

vardescription = 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>

</li>

<li>

<ahref="images/coffee.jpg" title="test2"onclick="showPic(this); return false;">test2</a>

</li>

<li>

<ahref="images/rose.jpg" title="test3"onclick="showPic(this); return false;">test3</a>

</li>

<li>

<ahref="images/bigben.jpg" title="test3"onclick="showPic(this); return false;">test4</a>

</li>

</ul>

<imgid="placeholder" src="images/placeholder.gif" alt="myimage gallery" />

<pid="description">选择图片.</p>

</body>

</html>

看了这个例子，也许你会纳闷，我怎么就看不懂呢？

如果是这样，那么你的纳闷是对的。呵呵。

看不懂就看不懂吧。先把看不懂的拿笔记住，后面几章我们讲学习 DOM编程。

到时候一切不懂都会被化解。。。。。。