JavaScript学习笔记3.---案例研究"JavaScript美术馆"改进版

*把事件处理移出html文档;
*如何改善向后兼容;
*确保访问性;
1.分离JavaScriopt的问题
    图片清单里的各个连接有一个共同点:他们都包含在同一个列表清单元素<ul>里.给整个清单设置一个独一无二的ID
    <ul id="imagegallery">
2.添加事件处理函数
    现在需要一个简短的函数把有关操作关联到onclick事件上,我们命名为prepareGallery

function prepareGallery()
{
    //如果getElementsByTagName未定义，返回否
    if (!document.getElementById("placeholder")) return true;
    //如果getElementById未定义，返回否
    if (!document.getElementById) return false;
    //如果id:imagegallery未定义，返回否
    if (!document.getElementById("imagegallery")) return false;
    //定义2个变量
    //找到id为imagegallery
    var gallery = document.getElementById("imagegallery");
    //找到的节点里面a
    var links = gallery.getElementsByTagName("a");
    //遍历imagegallery元素中的所有连接
    for ( var i=0; i < links.length; i++) 
    {
    links[i].onclick = function() {
      return showPic(this);
    }
    links[i].onkeypress = links[i].onclick;
    }
}

3.showPic(whichpic) 函数的改进

 1function showPic(whichpic)
 2 {
 3  if (!document.getElementById("placeholder")) return true;
 4  var source = whichpic.getAttribute("href");
 5  var placeholder = document.getElementById("placeholder");
 6  placeholder.setAttribute("src",source);
 7  if (!document.getElementById("description")) return false;
 8  if (whichpic.getAttribute("title"))
 9  {
    var text = whichpic.getAttribute("title");
  } 
  else 
  {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) 
  {
    description.firstChild.nodeValue = text;
  }
  return false;
}

4.addLoadEventIO函数
    功能:
    把现有的window.onload事件处理函数的值存如变量oldonload.
    如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它.
    如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有的指令末尾.
    

 1function addLoadEvent(func) 
 2{
 3  var oldonload = window.onload;
 4  if (typeof window.onload != 'function') 
 5  {
 6    window.onload = func;
 7  } else {
 8    window.onload = function() 
 9    {
      oldonload();
      func();
    }
  }
}
addLoadEvent(prepareGallery);

5.把网页中的文字连接换成缩略图片,这样看起来更Cool;

Code
<ul id="imagegallery">
    <li><a href="images/fireworks.jpg" title="A fireworks display">
        <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" /></a></li>
   <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >
      <img src="images/thumbnail_coffee.jpg" alt="Coffee" /></a></li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">
      <img src="images/thumbnail_rose.jpg" alt="Rose" /></a></li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">
      <img src="images/thumbnail_bigben.jpg" alt="Big Ben" /></a></li>
  </ul>

6.CSS清单,这次我决定把CSS清单贴出来,因为这个gually看上去已经是一个不错的guallery了

Code
 1body {
 2  font-family: "Helvetica","Arial",serif;
 3  color: #333;
 4  background-color: #ccc;
 5  margin: 1em 10%;
 6}
 7h1 {
 8  color: #333;
 9  background-color: transparent;
}
a {
  color: #c60;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
}
ul {
  padding: 0;
}
li {
  float: left;
  padding: 1em;
  list-style: none;
}
#imagegallery {
  list-style: none;
}

#imagegallery li {
  display: inline;
}

#imagegallery li a img {
  border: 0;
}

7.最后贴一下效果图片