实践javascript美术馆的小案例，学习到的东西还是蛮多的，包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等
javascript美术馆（改进2）
一、javascript编程过程中的好习惯
1、实现预留退路
js被禁掉，图片也可以显示出来，href属性带有图片路径
<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="data:images/01.jpg" alt="01"/></a></li>
<li><a href="images/02.jpg" title="01 display"><img width="100px" src="data:images/02.jpg" alt="01"/></a></li>
<li><a href="images/03.jpg" title="01 display"><img width="100px" src="data:images/03.jpg" alt="01"/></a></li>
</ul>
通过专用的id，图片的点击显示在单独的js文件中处理。
上面的代码就做到了我们在编程过程中所说的预留退路。因为在上面的href链接 中，我们写全了图片的路径，这样即使用户禁用了javascript，但是我们预留了退路，所以在没有javascript“干扰”的情况下，浏览器将沿着href属性给出的连接前进，用户看到了新图片而不是“该页无法显示”之类的信息。虽然这样与javascript在当前页面上进行切换的显示效果略差，但是总比什么都不显示强很多。
2、实现分离javascript
外部文件里完成添加onclick事件处理函数的工作，那样才能让我们的html文档没有“杂质。
仍然是上面的代码，把点击图片的js代码全部放到了外部的js文件中，这样关联起来全靠一个独一无二的id号。
3、实现向后兼容
进行必要的检查,确保老浏览器不会因为我们的javascript脚本而死机，
例如：if (!document.getElementsByTagName) return false //对象检测，如果浏览器不支持，就立即退出，不执行。
二、搞懂了的问题
1、return false;
<a href="javascript:showPic('images/coffee.jpg'); return false" title="A cup of coffee">Coffee</a>
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中
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){ //判断页面是否已加载 ，已加载的话就追加到后面
window.onload = func;
}else{
window.onload = function(){
oldonload(); //
func();
}
}
}
三、javascript美术馆（改进）全部代码
gallery.html文件
<!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="data:images/01.jpg" alt="01"/></a></li>
<li><a href="images/02.jpg" title="01 display"><img width="100px" src="data:images/02.jpg" alt="01"/></a></li>
<li><a href="images/03.jpg" title="01 display"><img width="100px" src="data:images/03.jpg" alt="01"/></a></li>
</ul>
</body>
</html>
css文件
*{
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;
}
js文件：
/***********判断页面是否已加载事件的函数********************************/
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 apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
- javascript之JSON小案例，实现添加数据与清楚数据
对json应用给出一个小案例,加深一些理解: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...
- spring boot入门小案例
spring boot 入门小案例搭建 (1) 在Eclipse中新建一个maven project项目,目录结构如下所示: cn.com.rxyb中存放spring boot的启动类,applica ...
- JavaWeb_(Struts2框架)Ognl小案例查询帖子
此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...
- 小案例带你揭秘JS事件
小案例带你揭秘JS事件 ### 什么是事件? 在js中一个事件的组成由那些呢? 谁触发事件:事件源 触发什么事件: 事件的类型 触发事件干什么事:事件处理函数 事件传播的过程 捕获阶段 就是从wind ...
- SharePoint Framework 在web部件中使用已存在的JavaScript库 - 捆绑打包和外部引用
博客地址:http://blog.csdn.net/FoxDave 在构建SPFx客户端web部件时,你可以使用公网已有的JavaScript库来构建强大的解决方案.但是在使用的时候你需要考虑你引用的 ...
- 【JavaScript定时器小案例】常见的几种定时器实现的案例
[JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- javascript综合小案例，校验用户注册信息提交
完成这个综合小案例,对于html.css.javascript的大部分内容复习快结束了. 这里做一个小案例--要实现的功能,以一张图片的形式给出: 首先,写出提交数据之后进入的页面代码: <!D ...
随机推荐
- Js 简单分页（二）
此次使用了http://www.purecss.org/ 的前端Css 效果图 上代码 //更新分页工具栏的效果展示 function updatepagetoolshow(){ //判断当前页 及 ...
- 【转】WPF中的Binding技巧（二）
WPF中的Binding技巧(二) 接上篇, 我们来看一看Elementname,Source,RelativeSource 三种绑定的方式 1.ElementName顾名思义就是根据Ui元素 ...
- PYTHON之DEF
def sayHello(): print('Hello World!') while True: s = input('Enter something : ') if s == 'quit': br ...
- [转贴]关于C++的抽象的一点新认识
http://my.oschina.net/fzyz999/blog/138491 关于本文 本文是笔者在阅读<C++沉思录>第0章——序幕后的一点想法,可以算作是笔记也可以算作是读后感. ...
- SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-004-消除bean自动装配的歧义@Primary
一. 假设有如下三个类实现同一个接口,则自动装配时会产生歧义 @Component public class Cake implements Dessert { ... } @Component pu ...
- SEH and C++ Exceptions，自定义CSeException
Description of CSeException CSeException class is based on CException class provided by MFC. I overw ...
- php中header函数后是否应该有exit
通常有一下三种: 代码如下 复制代码 Location: xxxx:yyyy/zzzz Content-Type: xxxx/yyyy Status: nnn xxxxxx 常用实例 1.实现重定向 ...
- git从指定的commit创建分支
How do I create a new git branch from an old commit? git checkout -b justin a9c146a09505837ec03b Thi ...
- wikioi 1514 and ZJOI2006 书架
1514 书架 0人推荐 收藏 发题解 提交代码 报错 题目描述 输入描述 输出描述 样例输入 样例输出 提示 题目描述 Description 小 T有一个很大的书柜.这个书柜的构造有些独特,即书柜 ...
- （转载）AS3.0实例学习 熟悉新的事件机制和addChild的运用
(转载)http://www.jb51.net/article/13139.htm 首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英 ...