javascript美术馆改进版

1，解决预留退路问题
  显然预留退路的问题已经不需要解决：
      onclick="showPic(this);return false;">
  反思，如果当初使用的是以下的方式：
 
  预留退路的问题就出现了。
  另外将href=“#”也会导致同样的问题。而设置一个链接只不过是举手之劳。

2，分离javascript问题
  在之前的版本中html和js代码混在了一起。
  Fireworks
  应该在外部文件中完成js的添加操作，这样才能让html完全没有杂质：
      >Fireworks
  使用挂钩(方便js的使用)：

   
• 
        Fireworks
     

   
• 
        Coffee
     

   
• 
        Rose
     

   
• 
        Big Ben
     

 

 
  添加事件处理函数：
  ·检查当前browser是否支持getElementsByTagName，  getElementById等方法。
  ·检查当前网页是否包含一个id属性值是“imagegallery”的元素
  ·构造循环对imagegallery元素中的链接进行遍历处理
  ·添加事件处理函数
 

#编写如下的javascript脚本
function showPic(whichpic) {
  @之所以返回true，是出于预留退路的考虑。保证图片的成  @功切换
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  @即使description切换不成功也要取消onclick事件的
  @默认行为
  if (!document.getElementById("description")) return false;
  @细节上的处理，对title属性是否存在不做假设。
  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;
}

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;
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(prepareGallery);
#TIP：这里除了编写addLoadEvent方法还有一个更为简单的解决方案(addLoadEvent在这里似乎有点大材小用)：
window.onload=function(){
  firstFunction();
  secondFunction();
}

 

3,DOM Core和HTML-DOM

  ·getElementsByTagName
  ·getElemntById
  ·getAttribute
  ·setAttribute
  以上几个方法是DOM  core的组成部分，并不专属于javascript。用途也并非只适用于网页，可以用来处理任何的标记语言如xml写出的文档。
 
  HTML-DOM针对html的DOM
  html-dom提供了一个forms对象，
  可以将如下的语句简化为document.forms;
  document.getElementsByTagName("form");
  又如HTML-DOM为图片提供的src属性可以将：
    element.getAttribute("src")
  简化为：element.src.
 
  具体到javascript美术馆：
  var source=whicpic.getAttribute("href");
  可以简写为：var source=whicpic.href;
  placeholder.setAttribute("src",source);
  可以写为：placeholder.src=source;