JavaScript DOM编程艺术笔记

本书在一些基础的JavaScript语法上，通过一个个小例子讲解了简单的dom操作，最后把例子综合起来做成一个网站。难得可贵的是其中的平稳退化，渐进增强的web设计理念——确保页面在没有JavaScript的情况下也能正常工作。其中对兼容性的考虑和结构、样式、行为相分离的思想也是值得学习的。

---

1. 什么是JavaScript

JavaScript是一种运行在浏览器端的脚本语言。JavaScript主要包括ECMAscript（规定标准JavaScript的语法）、BOM（浏览器窗口对象的一组API ）、和重要的DOM（文档对象模型，即如何操作文档，对文档的内容进行抽象和概念化的方法）。
至于JavaScript的弱类型语言、解释性语言和基于原型的特性在此不再赘述。

2.通用型函数

1. onload让函数在网页加载完毕后立即执行。else，如果window.onload上已经绑定了函数，那么就将新函数追加到现有指令下面。

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

2. inserAfter函数在元素后插入一个新元素。 如果目标元素是其父元素的最后一个子元素，那么就插入在其父元素后面；如果不是，那么就插入在目标元素的下一个兄弟元素前面。

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

3. 类jQuery的addClass()添加类名函数

function addClass(element,value) {
  if (!element.className) {
    element.className = value;//如果没有类名则直接添加
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;//如果有类名将其转化为字符串连接起来
    element.className = newClassName;
  }
}

---

3. JavaScript图片库

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

这里prepareGallery函数获得图片库每个a标签的值，并对他们执行showPic函数。这里前三句可以保证浏览器部分不支持JavaScript或者imagegallery不存在时脚本也可以正常工作，即渐进增强。

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  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;
}

这里showPic函数将获得a标签的src和alt属性，并将其赋值给placeholder。配合prepareGallery可以实现点击a标签更新img标签placeholder的src属性和p标签description的nodevalue，从而做到图片切换的效果。
优点：

1. 将onclick事件处理程序从a标签中解放出来，不仅做到结构和行为相分离，而且简化了代码。
2. 把showPic函数单独抽象出来，其中的whichpic参数通过传入不同的参数，使showpic函数具有一定的普适性（组件化）。
3. 遍历a标签，对每个标签执行showpic函数，而不是每个a标签依次调用showpic函数，简化了代码，return false取消a链接默认的跳转行为。
   后面还会介绍将缩略图包含在a标签内，使页面更美观。结构和行为相分离的理念要求我们动态生成img标签placeholder的src属性和p标签description，因为这些标签仅仅是为了showpic函数服务的。结构和行为分离固然很好，但这同时也会增加js的代码量，其中的平衡也是实际开发中要考虑的因素。

4. Ajax异步加载页面技术

优势：

1. 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2. 用户可以继续浏览页面并与页面交互，通过ajax可以按需加载和创建页面内容，而不会打断用户的浏览体验，从而使web应用呈现出功能丰富，交互敏捷，类似桌面应用般的体验。

---

XMLHttpRequest是ajax技术的核心，用于在后台与服务器交换数据。ajax承担浏览器和服务器端的中间人的角色，JavaScript通过ajax可以自己发送请求，也可以自己处理相应。

1. 创建ajax对象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2. 向服务器发送请求
   将请求发送到服务器，我们使用XMLHttpRequest对象的open()方法。

open(method,url,async);

method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步）；大部分情况下使用GET类型。

3. 请求实例
   `
   function getNewContent(){
   var request = getHTTPObject();//创建ajax对象
   if(request){
   request.open("GET","example.txt",true);//向服务器端(此处是txt文件)发送请求
   request.onstatechange = function(){
   if(request.readyState == 4){//readyState为4即请求成功
   var para = document.createElement("p");
   var txt = document.createTextNode(request.responseText);
   para.appendChild(txt);
   document.getElementById("new").appendChild(para);//将请求的内容插入到id为new的div中
   }
   };
   request.send(null);//将请求发送到服务器 string类型
   }else{
   alert("Sorry,your browser does not support ajx")
   }
   }
   addLoadEvent(getNewContent);

`

5. 实现移动元素效果

function moveElement(elementID,final_x,final_y,interval) {//参数代表元素id 最终xy位置 移动速度
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {//属性不会产生局部变量和全局变量的作用域问题 清除定时器
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);//这个公式可以实现移动动画先快后慢的效果
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);//setTimeout递归调用自己可以实现类似setInterval每一帧结束后再次调用定时器的功能 
}//但是递归调用浪费空间时间，存在效率问题

利用此函数可以实现图片切换或者轮播之类的效果。

6. 最后的综合项目 即大作业

预览效果： https://richardyou.github.io/JavaScript-DOM-/index.html
代码地址：https://github.com/richardyou/JavaScript-DOM-