注册
登录
| 关键词： nbsp function 函数 参数 一个 document 数名 return undefined write |
上篇文章讲了js中对象和数组的一些方法。 这章我们先说说函数，然后来点实战。 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.webp" title="test1" onclick="showPic(this); return false;">test1</a> </li> <li> <a href="images/coffee.webp" title="test2" onclick="showPic(this); return false;">test2</a> </li> <li> <a href="images/rose.webp" title="test3" onclick="showPic(this); return false;">test3</a> </li> <li> <a href="images/bigben.webp" title="test3" onclick="showPic(this); return false;">test4</a> </li> </ul> <img id="placeholder" src="images/placeholder.webp" alt="my image gallery" /> <p id="description">选择图片.</p> </body> </html> 看了这个例子，也许你会纳闷，我怎么就看不懂呢？ 如果是这样，那么你的纳闷是对的。呵呵。 看不懂就看不懂吧。 先把看不懂的 拿笔记住， 后面几章我们讲 学习 DOM编程。 到时候 一切不懂 都会被化解。。。。。。 总节: 这章没说什么重大的东西，浪费了大家时间了。请原谅我。。。 不过下几章，相信大家都比较感兴趣。。。保密。^_^。 |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
