JavaScript 美术馆（改进2）

改进：
1、实现预留后路
2、实现分离javascript
3、实现向后兼容性
4、利用css让网页变得更美观。

一、预留后路
已经具备
<a href="images/fireworks.jpg" title="A fireworks display" >Fireworks</a>
即使浏览器禁用javascript也可以显示图片来。

二、分离javascript

还有οnclick="showPic(this); return false;"，
我们应该在外部文件里完成添加onclick事件处理函数的工作，那样才能让我们的html文档没有“杂质”。
我们发现图片清单里的各个设置有一个共同点：它们都包含在同一个列表清单元素（<ul>）里。
给整个清单设置一个独一无二的ID就可以了：


  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display" >Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
    </li>
    <li>

      <a href="images/rose.jpg" title="A red, red rose" >Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock" >Big Ben</a>
    </li>
  </ul>

编写函数prepareGallery()把有关操作关联到onclick事件上。



function prepareGallery() {
//三、进行必要的检查,向后兼容性
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
//三、进行必要的检查,向后兼容性

  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
      return false;
    }
}
=======================
showPic()函数的完整代码：

function  showPic(whichpic)  ... {
//前面这些if都是三、进行必要的检查,向后兼容性，不做太多的假设
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) ...{
    var text = whichpic.getAttribute("title");
  } else ...{
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) ...{
    description.firstChild.nodeValue = text;
  }
  return false;
}

prepareGallery()函数的完整代码：

function  prepareGallery()  ... {
//三、进行必要的检查,向后兼容性
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
//三、进行必要的检查,向后兼容性
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) ...{
    links[i].onclick = function() ...{
      return showPic(this);
    }
//键盘浏览功能
    links[i].onkeypress = links[i].onclick;
  }
}

由于在html文档完成加载之前，DOM是不完整的。必须让 prepareGallery()函数 只在网页加载之后才得到执行。网页加载完毕时会触发一个onload事件，这个事件与window对象相关联。为了让事态的发展不偏离计划，必须把 prepareGallery()函数 绑定到这个事件上：
window.οnlοad= prepareGallery;
还有个更通用的决解方案----不管你打算在页面加载完毕时执行几个函数，它都可以应对自如。它是由Simon编写的一个函数addLoadEvent()，功能：
-------把现有的 window.onload事件处理函数的值存入变量oldonload。
-------如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它。
-------如果在这个 处理函数上已经绑定了一些函数，就把新函数追加到现有的指令的末尾。
addLoadEvent()函数的完整代码：

function  addLoadEvent(func)  ... {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') ...{
    window.onload = func;
  } else ...{
    window.onload = function() ...{
      oldonload();
      func();
    }
  }
}
// 这里只有一个prepareGallery（）函数，所以就添加一行
addLoadEvent(prepareGallery);

// 如果还有function1()函数，就在addLoadEvent(prepareGallery);下面添加addLoadEvent(function1);
// 无论我们打算在页面加载完毕时执行多少函数，都只要多写一条语句就可以安排一切了。呵呵
// 为以后的扩展做准备，预留后路

 showPic(whichpic)、prepareGallery() 和addLoadEvent(func)函数组成showPic.js

页面的完整代码：

<! 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"  xml:lang ="en" >
< head >
   < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8"   />
   < title > Image Gallery </ title >
     < script  type ="text/javascript"  src ="scripts/showPic.js" ></ script >
     < link  rel ="stylesheet"  href ="styles/layout.css"  type ="text/css"  media ="screen"   />
</ head >
< body >
   < h1 > Snapshots </ h1 >
   < 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 >
   < img  id ="placeholder"  src ="images/placeholder.gif"  alt ="my image gallery"   />
   < p  id ="description" > Choose an image. </ p >
</ body >
</ html >

layout.css的完整代码：

body  {...} {
  font-family: "Helvetica","Arial",serif;
  color: #333;
  background-color: #ccc;
  margin: 1em 10%;
}
h1  {...} {
  color: #333;
  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;
}