实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

javascript美术馆(改进2)

一、javascript编程过程中的好习惯

1、实现预留退路

js被禁掉,图片也可以显示出来,href属性带有图片路径

实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等
<script src="js/showPic.js"></script>
        <h1>Snapshots</h1>
        <ul id="imagegallery">
            <li><a href="images/01.jpg" title="01 display"><img width="100px" src="images/01.jpg" alt="01"/></a></li>
            <li><a href="images/02.jpg" title="01 display"><img width="100px" src="images/02.jpg" alt="01"/></a></li>
            <li><a href="images/03.jpg" title="01 display"><img width="100px" src="images/03.jpg" alt="01"/></a></li>
        </ul>
实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

通过专用的id,图片的点击显示在单独的js文件中处理。

上面的代码就做到了我们在编程过程中所说的预留退路。因为在上面的href链接 中,我们写全了图片的路径,这样即使用户禁用了javascript,但是我们预留了退路,所以在没有javascript“干扰”的情况下,浏览器将沿着href属性给出的连接前进,用户看到了新图片而不是“该页无法显示”之类的信息。虽然这样与javascript在当前页面上进行切换的显示效果略差,但是总比什么都不显示强很多。

2、实现分离javascript

    外部文件里完成添加onclick事件处理函数的工作,那样才能让我们的html文档没有“杂质。

仍然是上面的代码,把点击图片的js代码全部放到了外部的js文件中,这样关联起来全靠一个独一无二的id号。


3、实现向后兼容

     进行必要的检查,确保老浏览器不会因为我们的javascript脚本而死机,

例如:if (!document.getElementsByTagName) return false                         //对象检测,如果浏览器不支持,就立即退出,不执行。

 

二、搞懂了的问题

1、return false;

实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等
<a href="javascript:showPic(‘images/coffee.jpg‘); return false" title="A cup of coffee">Coffee</a>
实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

return false这个语句的作用,就是阻止浏览器的默认行为不发生

当点击这个链接时,因为onclick事件处理函数所触发的javascript代码返回给它的值是false,所以这个链接 在被点击时默认行为将不会发生。

同样,onclick="showPic(this);return false;"加了return false后可以不让用户被他们所点击的链接带到另一个图片查看窗口去。

2、document.body(专用记号)

等价于一下:

var body_element = document.getElementByTagName("body")[0];

3、结构化设计原则

每个函数应该只有一个入口和一个出口。

4、如何将多个javascript函数绑定到onload事件处理函数上

法一:匿名函数

window.onload = function(){

   firstFun();

   secondFun();

}

法二:

自己编写代码(写一个判断函数)

如果未加载,就加载事件函数;如果已加载,则追加到后面。!!注意:要把window.onload事件处理函数的值放进oldonload中

实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等
function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != ‘function‘){  //判断页面是否已加载  ,已加载的话就追加到后面
        window.onload = func;          
    }else{
        window.onload = function(){
            oldonload();                      //
            func();
        }
    }
}
实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

 

三、javascript美术馆(改进)全部代码

gallery.html文件

实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="style/css/gallery.css" type="text/css" />
        <script src="js/showPic.js"></script>
    </head>
    <!--
        作者:1107989194@qq.com
        时间:2014-04-14
        描述:javascript美术馆
        占位符、动态创建元素、
        1、实现预留退路 (js被禁掉,图片也可以显示出来,href属性带有图片路径)
        2、实现分离javascript(外部文件里完成添加onclick事件处理函数的工作,那样才能让我们的html文档没有“杂质)
        3、实现向后兼容(进行必要的检查,向后兼容性if (!document.getElementsByTagName) return false)
    -->
    <body>
        <h1>Snapshots</h1>
        <ul id="imagegallery">
            <li><a href="images/01.jpg" title="01 display"><img width="100px" src="images/01.jpg" alt="01"/></a></li>
            <li><a href="images/02.jpg" title="01 display"><img width="100px" src="images/02.jpg" alt="01"/></a></li>
            <li><a href="images/03.jpg" title="01 display"><img width="100px" src="images/03.jpg" alt="01"/></a></li>
        </ul>
    </body>
</html>
实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

css文件

实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等
*{
    margin: 0;
    padding: 0;
    border: 0px;
    list-style: none;
}
body{
    font-family:"arial, helvetica, sans-serif";
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}


h1{
    color: #333;
    background-color: transparent;
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul{
    padding: 0;
}
li{
    float: left;
    padding: 1em;
    list-style: none;
}
#imagegallery{
    list-style: none;
}
#imagegallery li{
    display: inline;
}

#imagegallery li a img{
    border: 0px;
}
实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

js文件:

实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等
/***********判断页面是否已加载事件的函数********************************/
function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != ‘function‘){  //判断页面是否已加载  ,已加载的话就追加到后面
        window.onload = func;          
    }else{
        window.onload = function(){
            oldonload();                      //
            func();
        }
    }
}

/***********自定义函数   将元素插入到一个元素的后面************************/
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);        
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}


/***************动态创建  占位符 ***********************************/
function preparePlaceholder(){
    if(!document.createElement) return false;      //对象检测    如果浏览器不支持,则停止执行并返回false
    if(!document.createTextNode) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById(‘imagegallery‘)) return false;
    
    var placeholder = document.createElement(‘img‘);
    placeholder.setAttribute(‘id‘,‘placeholder‘);
    placeholder.setAttribute(‘src‘,‘images/placeholder.jpg‘);
    placeholder.setAttribute(‘width‘,‘400px‘);
    placeholder.setAttribute(‘alt‘,‘my image gallery‘);
    
    var description = document.createElement(‘p‘);
    description.setAttribute(‘id‘,‘description‘);
    var desctext = document.createTextNode(‘choose an image‘);
    description.appendChild(desctext);
    var gallery = document.getElementById(‘imagegallery‘);
    insertAfter(placeholder,gallery);
    insertAfter(description,placeholder);
}

/****************循环输出所有的照片**********************************/
function prepareGallery(){
    if(!document.getElementById) return false;      //对象检测
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById(‘imagegallery‘)) return false;
    
    var gallery = document.getElementById(‘imagegallery‘);   //根据它的父级元素,找到所要的a标签,缩短查找事件(即使通过tagName可直接找到所有的a标签)
    var links = gallery.getElementsByTagName(‘a‘);
    for(var i =0; i<links.length; i++){
        links[i].onclick = function(){
            return showPic(this);
        }
        links.onkeypress = links[i].onclick;
    }
}

/**************显示图片********************************************/
function showPic(whichpic){
    if(!document.getElementById(‘placeholder‘)) return false;  //对象检测
    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;
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

 

 

 

 

 

 

 

 

 

 

 

 

 

实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等,布布扣,bubuko.com

实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

上一篇:java.io.DataInput接口和java.io.DataOutput接口详解


下一篇:10个你可能不知道的JavaScript小技巧