javascript 与Web页面代码的标准化分离小例子

现在很多页面的javascript都是直接写在页面上，当然，很多人也 使用

< script type  = " text/javascript "  srr = .. " ></script>

来隐藏部分代码断，但是对于事件啊，属性都没隐藏。我这里的隐藏是把事件也隐藏了。

先说说隐藏的好处，程序员可以专写javascript，不会由于页面的变化而影响，知道对象的id不变，代码就可以不变，不用写事件在相关的地方，代码和html也不会互相干扰，下面是一个常见图片转换连接的例子，不过我没有美化。

HTML文件

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > 标准javascript图片转换的例子 </ title >
< script  type ="text/javascript"  src ="jsfile.js" ></ script >
</ head >
< body  onload ="OnLoadEven();" >
      < div  id ="aLink" >   </ div >
    < a  href ="#"  id ="picLink" >< img  id ="picSrc"  src =""  alt  ="显示的图片"   /></ a >
</ body >
</ html >

下面的js代码 保存为jsfile.js文件调用

var LinkArray = new  Array();
// 设置图片和要到的连接
LinkArray[ 0 ] = new  Object();
LinkArray[ 0 ].pic = " http://zi.csdn.net/no1.280-187.gif " ;
LinkArray[ 0 ].Link = " http://microsoft.csdn.net/contest2007/ " ;
LinkArray[ 1 ] = new  Object();
LinkArray[ 1 ].pic = " http://images.csdn.net/20071023/qq.gif " ;
LinkArray[ 1 ].Link = " http://subject.csdn.net/carolqq.htm " ;
LinkArray[ 2 ] = new  Object();
LinkArray[ 2 ].pic = " http://images.csdn.net/20071022/fa.gif " ;
LinkArray[ 2 ].Link = " http://subject.csdn.net/computer.htm " ;
LinkArray[ 3 ] = new  Object();
LinkArray[ 3 ].pic = " http://zi.csdn.net/no3.gif " ;
LinkArray[ 3 ].Link = " http://microsoft.csdn.net/contest2007/ " ;

var index = 0 ;
function $(id)
... {
    return document.getElementById (id);
}

function AddLink()
... {
    //添加的目标DIV
    var control=$("aLink");
    //显示1|2|3|4 建立连接
    for(var iCount=0;iCount<LinkArray.length ;iCount++)
    ...{
        var aL =document.createElement ("a");
        aL.setAttribute ("href",LinkArray[iCount].pic);
        aL.setAttribute ("id",iCount);
        aL.onclick=function()
                            ...{
                                ShowPic(this);
                                return false;
                             };
        aL.appendChild(document.createTextNode (iCount));//文本
        control.appendChild(aL);
         control.appendChild (document.createTextNode (" | "));
        
    }
     setTimeout("ChangPic()",1000);
}
// 自动改变图片
function ChangPic()
... {
    $("picLink").setAttribute ("href",LinkArray[index].Link);
    $("picSrc").setAttribute ("src",LinkArray[index].pic);
    index++;
    if(index==LinkArray.length) index=0;
    setTimeout("ChangPic()",1000);
}
// 显示图片
function  ShowPic(control)
... {
    $("picLink").setAttribute ("href",LinkArray[control.id].Link);
    $("picSrc").setAttribute ("src",LinkArray[control.id].pic);
  
}
// onload中添加相关事件，可以把其他要初始化的函数继续添加
function OnLoadEven()
... {
    AddLink();
}

所有的事件都在onload事件中初始化，页面再也看不高关于javascript的任何东西，这就是关于javascript代码页面分离的一个基础例子