Javascript入门学习第五篇 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.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>

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

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

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

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

  总节:

  这章没说什么重大的东西,浪费了大家时间了。请原谅我。。。

  不过下几章,相信大家都比较感兴趣。。。保密。^_^。

  如果还有不懂,可以google 搜索资料.