Javascript学习第二季（5）
总结 javascript 图片馆
上4篇文章我们讲了 从简单到 复杂 写了一个javascript 图片馆 .
也许你对会发现 dom编程 其实也不是很复杂嘛，就那几个老方法 用来用去。呵呵。
今天我们来总结下 前4节的内容，巩固下基础。 然后明天我们将 继续实战（用javascript做 动画效果）。那是明天的事，今天我们就把 今天要做的做好。
1, js中的预留退路。
这个问题在某种情况下会发生，就是客户禁用了js怎么办。
我们看下面3段代码：
代码1：
<a href=”javascript:showPic(this);return false;” > test1 </a>
如果客户端不支持js或者禁用了js。那么 这段代码将没用。
如果改成这样呢：
<a href=”＃” onclick=” showPic(this);return false;“ > test1 </a>
当然是换汤不换药，一样不能得到我们想要的结果。
如果改成下面的呢：
<a href=”images/a.jpg” onclick=” showPic(this);return false;“ > test1 </a>
当客户端禁用了js后，用户将链接到一张新图片。虽然效果不怎么人性化了，但至少客户还是能正常访问。
2，分离js和html。
还记得我们的第一个图片馆例子吗？
其中代码我们是这么写的：
<ul>
<li><a href=”images/a.jpg” onclick=” showPic(this);return false;“ > test1 </a></li>
<li><a href=”images/b.jpg” onclick=” showPic(this);return false;“ > test2</a></li>
</ul>
显然，这是不符合分离的原则。
再看看下面的代码：
<ul id=” imagegallery”>
<li><a href=”images/a.jpg” > test1 </a></li>
<li><a href=”images/b.jpg” > test2</a></li>
</ul>
Script:
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);
}
}
// 这样我们就给每个 a 标签添加了 onclick事件。
达到了js和html的分离。
3，添加必要的检查。
比如:
检查浏览器是否支持 getElementByTagName()方法。
检查浏览器是否支持 getElementById()方法。
检查某个ID的元素是否存在。
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
4， 自己编写一个window.onload函数。
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;
上面的代码发现 值输出 b ；
然后我们用 addLoadEvent：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function t(){
alert("t")
}
function b(){
alert("b")
}
function c(){
alert("c")
}
addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于 window.onload = function () { t() ; b() ; c() }
发现都输出了。
适用范围：当window.onload在加载很多个函数时，可以使用这个函数。
5，getAttribute()在IE和FF下不同的返回值。
<body>
<p title="test">aaaa</p>
<p>bbbb</p>
<script type="text/JavaScript">
var paras = document.getElementsByTagName("p");
for (var i=0; i< paras.length; i++) {
var title_text = paras[i].getAttribute("title");
if (title_text != null) {
//这样写会有个问题：ff只弹一次，ie却弹了2次。
//如果 if (title_text != "") 这样写，ie只弹1次，ff却弹出2次。
//如果这样写呢？ if (title_text) ，我们发现，ie只弹1次，ff也只弹出1次。
//if (title_text) 才是我们想要的。
//注意：如果不存在 ff下返回null
//ie返回 "" ;
alert(title_text);
}
}
</script>
</body>
总结，从javascript图片馆 中总结的一些。
不怎么深奥。。。 很容易理解 。
明天我们讲开始
实战2（用javascript做 动画效果）。
动画在目前来说 是非常流行的。能自己写出一个动画效果，
是不是觉得自己挺new 的。^_^。
明天再会。
