javascript美术馆改进版

时间：2008-04-04 来源：biaoflying

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

2，分离javascript问题
在之前的版本中html和js代码混在了一起。
<a href="images/fireworks.jpg" title="A fireworks
   display" onclick="showPic(this); return
   false;">Fireworks</a>
应该在外部文件中完成js的添加操作，这样才能让html完全没有杂质：
<a href="images/fireworks.jpg" title=“The fireworks”
    >Fireworks</a>
使用挂钩(方便js的使用)：

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

添加事件处理函数：
·检查当前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;