本案例参照《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");
}
发现要考虑的内容真的很多,要求思考的时候就要非常谨慎,不能想当然,要跟着逻辑一步步来分类讨论才可。
目前这个图片库应该就到此结束了。