本案例参照《JavaScript DOM编程艺术（第二版）》 chapter4 完成。
过程中参考 https://www.w3school.com.cnl网站学习到很多CSS相关属性的知识。
目的：
用javascript和dom建立一个图片库，点击图片无需跳转到新页面，可以直接在本页面查看，图片下显示对应的文字注解。
结果展示：
点击第二个超链接后：
嘿嘿的确是很不起眼的功能，我准备把这个模块放到我以后某个项目里作为首页图片展示！
下面上代码：
1.jsdom.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="ut-8" />
<title>Image Gallary</title>
<link rel="stylesheet" href="styles/layout.CSS" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="Pic/海口五源河体育馆.jpg" οnclick="showPic(this);return false;" title="十爷：带ET们走进新世界——2019海口五源河火星演唱会">2019火星演唱会</a>
</li>
<li>
<a href="Pic/鸟巢.jpg" οnclick="showPic(this);return false;" title="壳哥：兑现和ET的“五年之约”——2018北京鸟巢十万人火星演唱会">2018火星演唱会</a>
</li>
<li>
<a href="Pic/红睡衣炸炸2.jpg" οnclick="showPic(this);return false;" title="炸炸：红色睡衣衬衫——2017北京五棵松四面台演唱会">2017火星演唱会</a>
</li>
<li>
<a href="Pic/智障障.jpg" οnclick="showPic(this);return false;" title="智障障：花火爱情的开始——2016北京五棵松火星演唱会">2016火星演唱会</a>
</li>
<li>
<a href="Pic/15大魔王.jpg" οnclick="showPic(this);return false;" title="大魔王：三天连开——2015上海大舞台火星演唱会">2015火星演唱会</a>
</li>
</ul>
<img id="placeholder" src="Pic/logo.png" alt="My Image Gallary" />
<p id="description">Choose an image.</p>
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>
2.showPic.js
//点击超链接 不跳转到其他页面显示 在本页面显示 同时显示出该图片的title
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
3.layout.CSS
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1.5em 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: square inside url('/i/eg_arrow.gif')
}
img {
display: block;
clear: both;
}
p {
color: black;
font-weight: bold;
}
我是第一次自己写js，感觉语法学过C的话很好上手。在之前做的小系统的前端部分也是用过的，但那时候根本搞不懂js代码怎么运用到html里，所以一直都是一知半解地参照已有的样式。不得不说js的应用非常有用及有意思！能够使得显示的内容变得更加生动！
再者就是css板块，这一块我也在之前系统里接触过。那次在老师要求检查期末大作业的前一天晚上，我哼哧哼哧研究了人家的网页代码几个钟头，终于理解了很多属性的具体用法。这里贴一个我根据研究出来的那些属性写出来的一个登录/注册界面：
嘻嘻。时隔一个月再写css又是忘得一干二净了，于是今天又把书上例子的那部分一个个查了一遍，有趣至极。
以下分享今日新知识（css相关）：
body部分：作为父元素，如果子元素没有特殊设定则保管所有！
1.font-family 改变字体（但是这里用到的那三个我不太懂哪里来的…）
2.margin 边距
1em:和顶的距离
10%：和左侧边的距离
h1部分：
background-color: transparent; :没有背景颜色->继承原有的
a部分：
1. font-weight: bold; ：加粗字体
从粗到细：bolder-bold-normal-lighter
或由【数字表示】：400normal 700bold
2.text-decoration :–划线
overline 上划线
overline 划掉
line-through 下划线
blink 定义闪烁的文本
none 默认
ul部分：
1.padding:内边距
自定义：单位一般用px
1，2，3，4：↑、→、↓、←
1，2，3：↑、左右一致、↓
1，2：顶底、左右
1：顶底两侧都一致
默认设定：
auto：浏览器计算内边距
length：以具体单位计（默认值：0px）
%：基于父元素宽度的一定比例
inherit：继承父元素
li部分：
1.float:元素浮动的方向 left/right/none/inherit
这里使得5行小标题左对齐，在一行排开。
2.padding使得五个小标题隔开一定距离。
3.list-style:li专用 每行开头的标识符
list-style-type:circle 空心圆
list-style-type:square 实心方
list-style-type:upper-roman 罗马数字
list-style-type:lower-alpha 26个字母
但这里用了list-style: square inside url(’/i/eg_arrow.gif’) 可能因为在 一行平铺不适合用上述的
img部分：
1.display：定义生成框的类型
2.此处block：显示为块级元素，元素前后自带换行符。
其他的详见：https://www.w3school.com.cn/cssref/pr_class_display.asp
p部分：
clear：定义元素哪一侧不允许其他浮动元素。
clear：both可以将两张并排放置的图像分为两列放置。
2020-2-26改进
今天针对昨天的代码做了优化（根据《JavaScript DOM 编程艺术（第二版）》第五章：最佳实践）
新增功能：
点击超链接 在本页面弹出一个规定大小的新窗口显示。（这里瞎写了一个baidu，可根据需求写成别的，我觉得在网页里那种客服在线联系可以这样做）
其他功能暂无变化。
优化点：
1 分离JavaScript
2 增加对象检测（针对老旧浏览器）
-> jsdom.html（元素节点处去除onclick 添加id）
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="ut-8" />
<title>Image Gallary</title>
<link rel="stylesheet" href="styles/layout.CSS" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id=showPic>
<li>
<a href="Pic/海口五源河体育馆.jpg" title="十爷：带ET们走进新世界——2019海口五源河火星演唱会">2019火星演唱会</a>
</li>
<li>
<a href="Pic/鸟巢.jpg" title="壳哥：兑现和ET的“五年之约”——2018北京鸟巢十万人火星演唱会">2018火星演唱会</a>
</li>
<li>
<a href="Pic/红睡衣炸炸2.jpg" title="炸炸：红色睡衣衬衫——2017北京五棵松四面台演唱会">2017火星演唱会</a>
</li>
<li>
<a href="Pic/智障障.jpg" title="智障障：花火爱情的开始——2016北京五棵松火星演唱会">2016火星演唱会</a>
</li>
<li>
<a href="Pic/15大魔王.jpg" title="大魔王：三天连开——2015上海大舞台火星演唱会">2015火星演唱会</a>
</li>
</ul>
<img id="placeholder" src="Pic/logo.png" alt="My Image Gallary" />
<p id="description">Choose an image.</p>
<a href="http://www.baidu.com/" id="showWeb">更多资讯请进入官方微博查看</a>
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>
</html>
->showPic.js (改动较大)
window.onload = prepareLinks;
function prepareLinks() {
//向后兼容->对象检测 （某些老旧浏览器不能理解DOM 故DOM的方法无法被加载）
if (!document.getElementsByTagName || !document.getElementById) return false;
//将所有事件处理函数写到js文件一起封装 完全分离JavaScript ->平稳退化
var pictures = document.getElementsByTagName("a");
for (var i = 0; i < pictures.length; i++) {
if (pictures[i].getAttribute("class") == "showPic") {
pictures[i].onclick = function() {
showPic(this); // 这里的参数是<a>元素节点
return false;
}
} else if (pictures[i].getAttribute("class") == "showWeb") {
pictures[i].onclick = function() {
popUp(this.href); // 这里的参数是url
return false;
}
}
}
}
//点击超链接 不跳转到其他页面显示 在本页面显示 同时显示出该图片的title
function showPic(a) {
var source = a.getAttribute("href");
document.getElementById("placeholder").setAttribute("src", source);
var text = a.getAttribute("title");
document.getElementById("description").firstChild.nodeValue = text;
}
//点击超链接 在本页面弹出一个规定大小的新窗口显示
function popUp(winURL) {
window.open(winURL, "popUp", "width=500,height=300");
}
->css无改动
概括第五章重点：
1 平稳退化：在老旧浏览器不支持js/客户认为屏蔽js等的情况下仍然不影响网页信息访问
2 分离js：参照CSS、html分离，将所有事件处理函数归入js脚本文件中->平稳退化
3 向后兼容性
3.1 对象检测：在js方法一开始用if检测DOM方法是否存在
3.2 浏览器嗅探技术（正被取代）
4 性能考虑
4.1 尽量少访问DOM（document.getElementxxx）：多次遍历DOM树耗时
4.2 尽量减少标记：过多不必要元素只会增加DOM树的规模->同上
4.3 合并脚本：尽量减少脚本文件数量->减少加载页面时发送的请求数量->减少加载时间及压力
4.4 放置脚本：推荐放在之上->加载页面时给块中的图像/脚本文件留出加载空间（HTTP下浏览器每次从同一域名中最多只能同时下载2个文件）
4.5 压缩脚本：删除不必要的字节（空格、注释、多余变量等）；使用更短的变量名 （现有专门的代码压缩工具）->加快加载速度（为解决代码可读性降低的问题可以备有工作副本、精简副本2个版本）
2020-2-29优化
参照该书的第六章，并基于之前的改进版本进行了优化。添加了很多拍错处理（不要做过多的假设 万一本来就不在假设的情况下呢？）
->showPic.js (改动较大)
window.onload = prepareLinks; // 当要加载多个函数时需要使用addLoadEvent函数
function prepareLinks() {
//向后兼容->对象检测 （某些老旧浏览器不能理解DOM 故DOM的方法无法被加载）
if (!document.getElementsByTagName || !document.getElementById) return false;
//检测当前网页有无showPic的id元素
if (!document.getElementById("showPic") || !document.getElementById("showWeb")) return false;
//将所有事件处理函数写到js文件一起封装 完全分离JavaScript ->平稳退化
var gallery = document.getElementById("showPic");
var pictures = gallery.getElementsByTagName("a");
for (var i = 0; i < pictures.length; i++) {
pictures[i].onclick = function() { //匿名函数
return showPic(this) ? false : true; //若placeholder图片不存在浏览器将会打开该链接（只不过是新窗口）
}
}
var web = document.getElementById("showWeb");
web.onclick = function() {
popUp(this.href); // 这里的参数是url
return false;
}
}
//点击超链接 不跳转到其他页面显示 在本页面显示 同时显示出该图片的title
function showPic(a) {
if (!document.getElementById("placeholder")) return false;
var source = a.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if (placeholder.nodeName != "IMG") return false; //确保是图片形式占位 IMG一定要大写！！！
placeholder.setAttribute("src", source);
if (document.getElementById("description")) {
var text = a.getAttribute("title") ? a.getAttribute("title") : ""; //判别title是否为空 是则用空字符串
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) { //确保title是文本节点
description.firstChild.nodeValue = text;
}
}
return true;
}
//点击超链接 在本页面弹出一个规定大小的新窗口显示
function popUp(winURL) {
window.open(winURL, "popUp", "width=500,height=300");
}
发现要考虑的内容真的很多，要求思考的时候就要非常谨慎，不能想当然，要跟着逻辑一步步来分类讨论才可。
目前这个图片库应该就到此结束了。
1646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
