虽然在JavaScript中由于之前版本导致的滥用问题，以致让JavaScript落下了一个特别不好的名声。
从这些观察结果可以看出，JavaScript 已经达到以下这些成为一流编程语言的标准：
被创业公司和大型公司用作后端服务框架（NodeJS）
有一个蓬勃发展的开源社区（在 GitHub 上最活跃）
作为一门专业技能，有大量的招聘需求中要求掌握 JavaScript 的知识（Indee.com）
话不多少，我们上代码：
我们需要三个文件，分别为：js文件：处理事件；css文件：实现样式；html文件：进行页面布局
分别存储在三个文件夹中：scripts、styles、html。
pic.html文件 <!DOCTYPE html> <html>
<head> <title>Picture</title> </head> <body id="body"> <h1>Snapshots</h1> <ul id="imageGallery"> <li> <a href= "../images/1.jpg" title="hongbao" onclick="showPic(this);return false;">微信红包</a> </li> <!-- --> <li> <a href="../images/2.png" title="dingdanjietu" >订单截图</a> <!-- onmousemove ="showPic(this);return false;" onmouseleave="Back(this)" onclick="showPic(this);return false;" --> </li> <li> <a href="../images/top250.png" title="doubandianying" >豆瓣电影</a> <!-- onmousemove ="showPic(this);return false;" onmouseleave="Back(this)" --> </li> <li> <a href="../images/tuijian.jpg" title="tuijian" >网易云推荐</a> <!-- onclick="showPic(this);return false;" --> </li> </ul> <img src="../images/12.jpg" id="placeholder" alt="my image gallery" height="333px" width="333px"> <p id="description">Choose an image!</p> <script type="text/javascript" src="../scripts/showPic.js"></script> <link rel="stylesheet" type="text/css" href="../styles/pic.css"> </body> </html>
showPic.js文件
// alert("hello world");
//如果有两个函数需要再加载的时候执行，如果我们只是罗列他们那么将只会执行第二个。或者是最后一个。
//我们可以使用毙命的函数对他们及逆行包括。
// window.onload = function() {
// countBodyChildren();
// prepareGallery();
// }
addLoadEvent(countBodyChildren);
addLoadEvent(prepareGallery);
//定义一个函数，将一个函数添加到onload中
function addLoadEvent(Afunction) {
var oldonload = window.onload;
if(typeof window.onload != "function") {
window.onload = Afunction;
}else{
window.onload = function() {
oldonload();
Afunction();
}
}
}
//展示图片并且可以将描述信息替换掉
function showPic(whichpic) {
//获取到当前的对象的href值
//判断是否有Id为placeholder的元素
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
// placeholder.setAttribute("src", source);
placeholder.src = source;
//判断是否存在Id为description的元素
// if(document.getElementById("description")) {
// if (!whichpic.getAttribute("title")) {
// var text = whichpic.getAttribute("title");
// }else{
// return text = "";
// }
// // var text = whichpic.getAttribute("title")? whichpic.getAttribute("title"):"";
// var description = document.getElementById("description");
// description.firstChild.nodeValue = text; //修改节点的值
// }
// return true;
if(document.getElementById("description")) {
var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return true;
}
//之前定义的，如果我们的鼠标从选定的a上面移开之后，执行的的back函数
function Back(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
// placeholder.setAttribute("src", source);
placeholder.src = "../images/12.jpg";
}
//查看body元素下第一个子元素的节点类型
function countBodyChildren() {
//返回数组时，我们使用getElementsByTagName
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.nodeType);
}
//将原本位于各个a标签中的onclick动作事件，统一放在js文件中，
//进行分离并且判断是否可以使用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);
}
}
}
pic.css文件
body {
font-size: "Helvetica", "Arial", 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;
}
img {
display: block;
clear: both;
}