1. 程式人生 > >JS DOM 程式設計藝術(第2版)讀書筆記 第12章 綜合示例

JS DOM 程式設計藝術(第2版)讀書筆記 第12章 綜合示例

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

/**
 * insterAfter
 */
function insertAfter(newEle, targetEle) {
    var parent = targetEle.parentNode;
    if (parent.lastChild == targetEle) {
        parent.appendChild(newEle);
    }else{
        targetEle.insertBefore(newEle, targetEle.nextSibling)
    }
}

/**
 * addClass
 */
function addClass(ele, value) {
    if (!ele.className) {
        ele.className = value;
    }else {
        ele.className = ele.className + " " + value;
    }
}

/**
 * highlightPage
 */
function highlightPage() {
    var nav = document.getElementsByTagName("nav")[0];
    var links = nav.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        var url = links[i].getAttribute("href");
        if (window.location.href.indexOf(url) != -1) {
            links[i].className = "here";
        }
    }
}
addLoadEvent(highlightPage);

/**
 * photos
 */
function prepareGallery(){
    
    // 檢測物件或方法是否存在
    if(!document.getElementById) return false;
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById("imgBox"))return false;
    var gallery = document.getElementById("imgBox");
    links = gallery.getElementsByTagName("a");
    for (var i = 0, l = links.length; i < l; i++) {
        links[i].onclick = function(){
            // 巧妙的運用showPic函式的返回值
            // return showPic(this) ? false : true;
            return !showPic(this);
        }
        //links[i].onkeypress = //links[i].onclick;
    }
}

function showPic(obj) {
    // 物件檢測
    if(!document.getElementById("placeholder")) return false;

    /* 
     * 獲得當前物件的href值,如安裝有本地伺服器:
     * IE6和IE7返回  "http://localhost/images/Koala.jpg"
     * 標準瀏覽器返回 "images/Koala.jpg"
     * 為了然所有瀏覽器都返回一致的結果,給getAttribute()新增第二個引數為2.
     * 謹記:getAttribute("href")和getAttribute("href", 2);瀏覽器相容性。
*/
    var url = obj.getAttribute("href",2);
    var place = document.getElementById("placeholder");
    place.setAttribute("src", url);

    if(document.getElementById("description")){
        var text = obj.getAttribute("title");
        var description = document.getElementById("description");
        // firstChild必須存在,也就是說 <p id="description">這裡必須有內容</p> 下面這行程式碼才有效。 其實這種情況常用 description.innerHTML = text;
        description.firstChild.nodeValue = text;
    }
    return true;
}

function getHTTPObject(){
    if(typeof XMLHttpRequest == "undefinded"){
        XMLHttpRequest = function(){
            try{return new ActiveXObject("Msxml2.XMLHTTP6.0");}
            catch(e){}
            try{return new ActiveXObject("Msxml2.XMLHTTP3.0");}
            catch(e){}
            try{return new ActiveXObject("Msxml2.XMLHTTP");}
            catch(e){}
            return false;
        }
    }
    return new XMLHttpRequest();
}

/**
 * readyState:
 * 0 表示未初始化
 * 1 表示正在載入
 * 2 表示載入完成
 * 3 表示正在互動
 * 4 表示完成
 */
function getNewContent() {
    var request = getHTTPObject();
    if(request){
        request.open("GET", "example.txt", true);
        request.onreadystatechange = function(){
            // 指令碼依賴伺服器的響應必須放到這裡
            if(request.readyState == 4){
                var p = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                p.appendChild(txt);
                document.body.appendChild(p);
            }
        }
        request.send(null);
    }else{
        alert("sorry you browser does't support XMLHttRequest");
    }
    alert("Function Done");
}

addLoadEvent(getNewContent);

/**
 * moveElement
 */
function moveElement(elementID, final_x, final_y, interval) {
    var elem = document.getElementById(elementID);
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if (elem.movement) {
        clearTimeout(elem.movement);
    }
    var dist = 0;
    if (xpos == final_x && ypos == final_y) {
        return true;
    }
    if (xpos < final_x){
        dist = Math.ceil((final_x - xpos) / 10);
        xpos = xpos + dist;
    }
    if (xpos > final_x) {
        dist = Math.ceil((xpos - final_x) / 10);
        xpos = xpos - dist;
    }
    if (ypos < final_y) {
        dist = Math.ceil((final_y - ypos) / 10);
        ypos = ypos + dist;
    }
    if (ypos > final_y) {
        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);
}