客户端编程--项目

两周时间学完客户端编程.项目是修改http://www.lovoinfo.com的网站. 自己只修改了主页效果:http://datuo.roii.net/java/lovoinfo/index.html  采用CSS+DIV修改的界面  javaScript+xml处理的数据.结果网页通过W3C校检.

主要用到的几个技术:
 1.点页面上的+和-动态地添加删除HTML节点 添加的时侯是从XML文件里面读取内容
2. 浏览图片 点previous 和next循环显示图片 图片地址保存在XML文件里
3.利用CSS选择几种不同的颜色

代码1,2:

var xmldoc;
var url = "/j/data.xml"; //XML文件PATH
var nowImg = 1; //默认显示的图片INDEX

if(window.ActiveXObject) //判断浏览器
{
 xmldoc = new ActiveXObject("Microsoft.XMLDOM");
 
xmldoc.async=false;
 xmldoc.load(url);
}
else if(document.implementation && document.implementation.createDocument)
{

 browser=true;
 xmldoc = document.implementation.createDocument("","",null); 
 xmldoc.load(url);
}
else
{
 alert("浏览器不支持该脚本!");
}
function addLi(nodeId)   //添加节点
{
 var list=document.getElementById(nodeId);
 var list_length=list.childNodes.length;
 var node = xmldoc.getElementsByTagName("li"+nodeId);
 if(list_length < node.length)
 {
  var textnode = node[list_length].firstChild.nodeValue;
  var newElement = document.createElement("li");
  list.appendChild(newElement);
  var newText = document.createTextNode(textnode);
  var link = node[list_length].getAttribute("link");
  if(link)  //如果内容有链接
  {
   var aElement = document.createElement("a");
   aElement.appendChild(newText);
   newElement.appendChild(aElement); 
   aElement.setAttribute("href",link);
  }
  else
  {
   newElement.appendChild(newText);
  }  
 }

}
function remove(nodeId)  //删除节点
{
 var list=document.getElementById(nodeId);
 if(list.childNodes.length > 1)
 {
  list.removeChild(list.lastChild);
 }
}

function preImg(nodeId)  //图片前翻
{
 var pathnodes = xmldoc.getElementsByTagName("liimg");
 var pathnum = pathnodes.length;
 if(nowImg==0)
 {
  nowImg=pathnum;
 }
 nowImg--;
 var pathimg = pathnodes[nowImg].firstChild.nodeValue;
 var list = document.getElementById(nodeId);
 list.setAttribute("src",pathimg);
 return false;
}

function nextImg(nodeId)   //图片后翻
{
 var pathnodes = xmldoc.getElementsByTagName("liimg");
 var pathnum = pathnodes.length;
 if(nowImg==pathnum)
 {
  nowImg=0;
 }
 var pathimg = pathnodes[nowImg].firstChild.nodeValue;
 nowImg++;
 var list = document.getElementById(nodeId);
 list.setAttribute("src",pathimg);
 return false;
}

3.利用CSS选择颜色样式
先预加载几套样式:
 <link href="c/colorCss/colorwhite.css" type="text/css" rel="alternate stylesheet" title="white" />
 <link href="c/colorCss/colorblue.css" type="text/css" rel="alternate stylesheet" title="blue"  />
 <link href="c/colorCss/colorfawn.css" type="text/css" rel="alternate stylesheet" title="fawn"  />
 <link href="c/colorCss/colorgreen.css" type="text/css" rel="alternate stylesheet" title="green"  />
 <link href="c/colorCss/colorred.css" type="text/css" rel="alternate stylesheet" title="red" />
再利用javascript 代码:
function changecolor(title)
{
 
 var i, a, main;

  for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
 {
 
  if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title"))
  {
        a.disabled = true;
      
   if(a.getAttribute("title") == title)
   {
    a.disabled = false;
 
   }
  }
 
 }

}

做完了回头一看还是简单的.可当时做还是花了大力气.做了两天三.通过这项目把学的CSS JAVASCRIPT全应用到项目来了,对知识的理解和应用也更加深刻.虽然累了值得.