JavaScript DOM 编程艺术一书综合示例
一、本样例中涉及到的一些知识点如下。
- 在HTML页面结构中，常用到的几个区域是头部区域，使用header元素；导航区域，使用nav 元素；在内容区域可以使用article元素来展示每一页的内容。这些标签元素都是HTML5标签。
- 在使用HTML5元素时，建议在文档的元素中包含Modernizer库，用来对浏览器是否支持H5标签进行检验。
- 取得当前页面的URL，可以使用window.location.href 。
- HTML DOM中的每个表单元素都是一个form对象，每个form对象都有一个form.elements.length属性，需要注意的是这个属性返回的是表单中包含的表单元素的个数（不等同的所包含的节点个数）。element.value可得到表单元素的当前值。
- 在通过POST请求发送数据时，需要将表单中每个字段的值都编码为数据字符串（name=value&name2=value2），是使用javascript的encodeURIComponent函数把这些值编码成URL安全的字符串。这会把有歧义的字符转换为对应的ASCII编码。
- var matches = request.responseText.match(/
([\s\S]+)<\/article>/); 正则中使用了捕获组的定义。匹配结果是一个数组，第一个数组元素是与整个模式完整匹配的部分；匹配结果数组的第二个元素（索引为1），是responseText中与捕获组中的模式匹配的部分； 因为本例中只定义了一个捕获组，所以matches也只包含两个元素。 - request.readyState == 4 // 当访问请求处理完成，接收响应也完成后，才可满足左侧代码的等式
二、本样例中使用到的代码文件如下。
本样例实现后的效果图如下。
提供一个网络上的示例，不是基于最新版本的书籍实现的，但基本上95%是相同的。其中不同之处包括，未提供基于Ajax功能的函数实现。
一个版本略旧点的在线网站的示例
1、模板文件template.html
Jay Skript and the Domsters
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius accumsan tellus, in pulvinar lacus fermentum ut. Phasellus sem ante, rhoncus congue pellentesque a, pellentesque in purus. Aliquam in rutrum nulla. Nunc ut turpis a enim aliquam dapibus vitae scelerisque arcu. Ut condimentum nisi aliquet, molestie velit sed, aliquam arcu. Curabitur at est vel quam fringilla tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque lobortis sed quam nec hendrerit. Proin dolor massa, pulvinar ut vestibulum ut, euismod vulputate diam. Quisque nec accumsan lacus, eu ullamcorper orci. Praesent condimentum feugiat vulputate. Suspendisse pulvinar, erat non finibus bibendum, erat urna dictum velit, nec pharetra magna mauris vel massa. Quisque sodales orci vitae ipsum rutrum, et ullamcorper leo posuere. Mauris dapibus ligula quam, nec pharetra ex porta nec. Mauris feugiat, nibh non varius tempus, massa turpis convallis risus, id tempor neque ante vel felis.
2、样式文件basic.css
@import url(layout.css);
@import url(color.css);
@import url(typography.css);
只包含了对另外三个样式文件的引用。
3、样式文件color.css
不管为哪个元素应用什么颜色，都要同时给它一个背景色。否则就有可能导致意外，看不到某些文本。
body {
color: #fb5;
background-color: #334;
}
a:link {
color: #445;
background-color: #eb6;
}
a:visited {
color: #345;
background-color: #eb6;
}
a:hover {
color: #667;
background-color: #fb5;
}
a:active {
color: #778;
background-color: #ec8;
}
header {
color: #ec8;
background-color: #334;
border-color: #667;
}
header nav {
color: #445;
background-color: #789;
border-color: #667;
}
article {
color: #223;
background-color: #edc;
border-color: #667;
}
header nav ul {
border-color: #99a;
}
header nav a:link,header nav a:visited {
color: #eef;
background-color: transparent;
border-color: #99a;
}
header nav a:hover {
color: #445;
background-color: #eb6;
}
header nav a:active {
color: #667;
background-color: #ec8;
}
article img {
border-color: #ba9;
outline-color: #dcb;
}
#imagegallery a {
background-color: transparent;
}
header nav a.here:link,
header nav a.here:visited,
header nav a.here:hover,
header nav a.here:active {
color: #eef;
background-color: #799;
}
tr.odd td {
color: #223;
background-color: #ec8;
}
tr.highlight td {
color: #223;
background-color: #cba;
}
th {
color: #edc;
background-color: #455;
}
tr td {
color: #223;
background-color: #eb6;
}
4、layout.css
首先是为HTML5块元素定义默认的样式，主要针对那些不支持它们的浏览器，好让这些元素都能具有适当的块布局。
其次，使用通配选择器把所有元素的内外边距都设置为零。这样就把不同浏览器为元素设置的不同的内外边距全都删除了。在重设这些值之后，所有样式就可以一视同仁了。
最终，我们使用自己的css定义颜色和布局。
layout.css中主要定义的是各种元素的内边距。
section, header, article, nav {
display: block;
}
* {
padding: 0;
margin: 0;
}
body {
margin: 1em 10%;
background-image: url(../images/background.gif);
background-attachment: fixed;
background-position: top left;
background-repeat: repeat-x;
max-width: 80em;
}
header {
background-image: url(../images/guitarist.gif);
background-repeat: no-repeat;
background-position: bottom right;
border-with: .1em;
border-style: solid;
border-bottom-width: 0;
}
header nav {
background-image: url(../images/navbar.gif);
background-repeat: repeat-x;
background-position: bottom left;
border-with: .1em;
border-style: solid;
border-bottom-width: 0;
border-top-width: 0;
padding-left: 10%;
}
header nav ul {
width: 100%;
overflow: hidden;
border-left-width: .1em;
border-left-style: solid;
}
header nav li {
display: inline;
}
header nav li a {
display: block;
float: left;
padding: .5em 2em;
border-right: .1em solid;
}
article {
border-width: .1em;
border-style: solid;
border-top-width: 0;
padding: 2em 10%;
line-height: 1.8em;
}
article img {
border-width: .1em;
border-style: solid;
outline-width: .1em;
outline-style: solid;
}
#about header {
background-image: url(../images/lineup.gif);
}
#photos header {
background-image: url(../images/basshead.gif);
}
#live header {
background-image: url(../images/bassist.gif);
}
#contact header {
background-image: url(../images/drummer.gif);
}
#slideshow {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}
#preview {
position: absolute;
border-width: 0;
outline-width: 0
}
#frame {
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
#imagegallery li {
display: inline;
}
dl {
overflow: hidden;
}
dt {
float: left;
}
dd {
float: left;
}
td {
padding: .5em 3em;
}
label {
display: block;
}
fieldset {
border: 0;
}
5、typography.css用来定义元素的外边距
body {
font-size: 76%;
font-family: "Helvetica","Arial",sans-serif;
}
body * {
font-size: 1em;
}
a {
font-weight: bold;
text-decoration: none;
}
header nav {
font-family: "Lucida Grande","Helvetica","Arial",sans-serif;
}
header nav a {
text-decoration: none;
font-weight: bold;
}
article {
line-height: 1.8em;
}
article p {
margin: 1em 0;
}
h1 {
font-family: "Georgia","Times New Roman",sans-serif;
font: 2.4em normal;
}
h2 {
font-family: "Georgia","Times New Roman",sans-serif;
font: 1.8em normal;
margin-top: 1em;
}
h3 {
font-family: "Georgia","Times New Roman",sans-serif;
font: 1.4em normal;
margin-top: 1em;
}
#imagegallery li {
list-style-type: none;
}
textarea {
font-family: "Helvetica","Arial",sans-serif;
}
dt {
margin-right: 1em;
}
dd {
margin-right: 3em;
}
6、最为重要的一个基础js函数global.js
在该js文件中将包含以下功能函数：
- addLoadEvent(func)，设置随浏览器自动加载指定函数
- addClass(element,value)，添加新的样式类
- insertAfter(newElement,targetElement)，在指定元素后插入新元素
- highlightPage(href)，突出当前页面链接的显示，同时为几个超链接页面的body元素添加id属性，以支持为每个页面应用不同的样式
- moveElement(elementID,final_x,final_y,interval)，实现js动画效果的函数
- prepareSlideshow()，准备幻灯片元素并准备相应链接
- showSection(id)，根据指定的id显示相应的
，同时隐藏其它部分 - prepareInternalnav()，在article元素中的nav所包含的链接被单击时调用showSection函数
- showPic(whichpic)，在占位符位置上显示相应链接的图片
- preparePlaceholder()，创建和配置图片占位符
- prepareGallery()，创建和配置图片库
- stripeTables()，为表格增加斑马纹
- highlightRows()，高亮当前选择的行
- displayAbbreviations()，将缩略语显示为一个列表
- focusLabels()，点击label时自动将焦点定位到相应的表单元素上
- resetFields(whichform)，重置表单元素初始值
- validateForm(whichform)，表单元素检验函数
- isFilled(field)，检验表单元素是否填写
- isEmail(field)，检查是否是有效的邮件信息
- prepareForms()，设置和处理表单
- getHTTPObject()，获取一个XMLHttpRequest对象
- displayAjaxLoading(element)，显示一个正在加载的图片
- submitFormWithAjax(whichform,thetarget)，调用displayAjaxLoading函数，删除目标元素的子元素，并添加loading.gif图像；把表单的值组织成URL编码的字符串，以便通过Ajax请求发送；创建方法为POST的Ajax请求，把表单的值发送给submit.html； 如果请求成功，解析响应并在目标元素中显示结果； 如果请求失败，显示错误消息。
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
// 突出当前页面链接的显示，同时为几个超链接页面的body元素添加id属性，以支持为每个页面应用不同的样式
function highlightPage(href) {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
var headers = document.getElementsByTagName('header');
if (headers.length == 0) return false;
var navs = headers[0].getElementsByTagName('nav');
if (navs.length == 0) return false;
var links = navs[0].getElementsByTagName("a");
var linkurl;
for (var i=0; i final_x) {
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
//设置elem元素的
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
//迭代调用函数自身，一直循环到满足函数开头的退出条件为止
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function prepareSlideshow() {
// 实现幻灯片功能
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("intro")) return false;
var intro = document.getElementById("intro");
var slideshow = document.createElement("div");
slideshow.setAttribute("id","slideshow");
var frame = document.createElement("img");
frame.setAttribute("src","images/frame.gif");
frame.setAttribute("alt","");
frame.setAttribute("id","frame");
slideshow.appendChild(frame);
var preview = document.createElement("img");
preview.setAttribute("src","images/slideshow.gif");
preview.setAttribute("alt","a glimpse of what awaits you");
preview.setAttribute("id","preview");
slideshow.appendChild(preview);
insertAfter(slideshow,intro);
var links = document.getElementsByTagName("a");
var destination;
for (var i=0; i([\s\S]+)<\/article>/);
if (matches.length > 0) {
// 匹配结果是一个数组，第一个数组元素是与整个模式完整匹配的部分
// 匹配结果数组的第二个元素（索引为1），是responseText中与捕获组中的模式匹配的部分。
// 因为本例中只定义了一个捕获组，所以matches也只包含两个元素。
thetarget.innerHTML = matches[1];
} else {
thetarget.innerHTML = 'Oops, there was an error. Sorry.
';
}
} else {
thetarget.innerHTML = '' + request.statusText + '
';
}
}
};
request.send(data);
return true;
};
关于谷歌浏览器会遇到的一个报错的说明：
Cross origin requests are only ！ 。此为浏览器安全设置造成的，有解决方法但繁琐。建议此时使用一下其它浏览器进行测试即可。
其它页面文件：
index.html
Jay Skript and the Domsters
Welcome to the official website of Jay Skript and the Domsters.
Here, you can learn more about the band,
view photos of the band,
find out about tour dates
and get in touch with the band.
about.html
Jay Skript and the Domsters
About the band
Jay Skript
Jay Skript is going to rock your world!
Together with his compatriots The Domsters, Jay is set for world domination. Just you wait and see.
Jay Skript has been on the scene since the mid nineties. His talent hasn't always been recognized or fully appreciated. In the early days, he was often unfavorably compared to bigger, similarly-named artists. That's all in the past now.
The Domsters
The Domsters have been around, in one form or another, for almost as long. It's only in the past few years that The Domsters have settled down to their current, stable line-up. Now they're a rock-solid bunch: methodical and dependable.
photos.html
Jay Skript And The Domsters: Photos
live.html
Jay Skript and the Domsters
Tour dates
Date
City
Venue
June 9th
Portland, OR
Crystal Ballroom
June 10th
Seattle, WA
Crocodile Cafe
June 12th
Sacramento, CA
Torch Club
June 17th
Austin, TX
Speakeasy
contact.html
Jay Skript and the Domsters
Contact the band
Jay Skript and the Domsters
Thanks!
Thanks for contacting us.We'll get back to you as soon as we can.