JavaScript DOM 编程艺术 阅读总结 （第十二章 实践案例代码）
程序员文章站
2024-03-17 17:41:04
...
JavaScript DOM 编程艺术 第十二章 实践案例
在开始学习前端的时候买了这本书，看了很多视频这本书也就没太认真看，最近终于是看完了这本书，最后的这章算是综合了前面大部分章节的内容的一个实例，这本书内容简单易懂，就像是一个人在你身边一点一点的教，很适合入门的小白，有一些基础的人看起来会很快，因为很多都是已经掌握的基础。
这第十二章如果你前面都跟着做了，其实很简单。
首先是css
第一个是 basic.css 导入了样式 颜色 和 布局
@import url("layout.css");
@import url("color.css");
@import url("typography.css");
/*@import url("reset.css");*/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: #455;
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: 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;
}
/*table*/
td{
padding: .5em 3em;
}
th{
color: #edc;
background: #445555;
}
tr td{
color: #223;
background: #eb6;
}
dt{
margin-right: 1em;
}
dd{
margin-right: 3em;
}
tr.odd td {
color: #222233;
background: #EECC88;
}
tr.highlight td {
color: #222233;
background: #cba;
}
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-width: .1em;
border-style: solid;
border-bottom-width: 0;
}
#about header{
background-image: url(../images/lineup.gif);
}
header nav{
background-image: url(../images/navbar.gif);
background-repeat: repeat-x;
background-position: bottom left;
border-width: .1em;
border-style: solid;
border-bottom: 0;
border-top: 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;
}
#slidshow{
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}
#preview{
position: absolute;
border-width: 0;
outline-width:0;
}
#imagegallery li{
display: inline;
}
/* 表格*/
dl{overflow: hidden;}
dt,dd{
float: left;
}
/*留言*/
label{
display: block;
}
fieldset{
border: 0;
}
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{
font-weight: bold;
text-decoration:none;
}
article{
line-height: 1.8em;
}
article p {
margin: 1em 0;
}
h1{
font-family: 'georgia',"times new roman",sans-serif;
font: 2.4em normal;
/*margin-top: 1em;*/
}
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;
}
li{
list-style-type:none ;
}
textarea{
font-family: 'helvetica','arial',sans-serif;
}
js部分
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}else{
window.onload = function (argument) {
oldonload();
func();
}
}
}
function insertAfter (newElemnet, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElemnet);
}
else{
parent.insertBefore(newElemnet,targetElement.nextSibling);
}
}
function addClass (elemnet,value) {
if (elemnet.className) {
elemnet.className = value;
}else{
newClassName = elemnet.className;
newClassName += ' ';
newClassName+=value;
elemnet.className = newClassName;
}
}
function highlightPage () {
var navs = document.getElementsByTagName("nav");
// console.log(navs)
var links = navs[0].getElementsByTagName("a");
var linkurl;
for (var i = 0; i<links.length; i++) {
linkurl = links[i].getAttribute("href");
if (window.location.href.indexOf(linkurl)!= -1) {
links[i].className = "here";
//给nav页面添加id
var text = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",text);
}
}
}
addLoadEvent(highlightPage);
function moveElement (elementID,final_x,final_y,interval) {
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xops= parseInt(elem.style.left);
var yops= parseInt(elem.style.top);
if (xops ==final_x && yops==final_y) {
return true;
}
if (xops < final_x) {
var dist = Math.ceil((final_x - xops)/10);
xops = xops + dist;
}
if (xops > final_x) {
var dist = Math.ceil((xops - final_x)/10);
xops = xops - dist;
}
if (yops < final_y) {
var dist = Math.ceil((final_y - yops)/10);
yops = yops + dist;
}
if (yops > final_y) {
var dist = Math.ceil((yops - final_y)/10);
yops = yops + dist;
}
elem.style.left = xops +"px";
elem.style.top = yops + 'px';
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function prepareSlideshow () {
if (!document.getElementById("intro")) {
return false;
}
var intro = document.getElementById("intro");
var slidshow = document.createElement("div");
slidshow.setAttribute("id","slidshow");
slidshow.style.borderRadius = "10px";
var preview = document.createElement("img");
preview.setAttribute("src","./images/slideshow.gif");
preview.setAttribute("id","preview");
slidshow.appendChild(preview);
insertAfter(slidshow,intro);
// intro 换成 documnet 就可以实现所有的a标签都能触发 动画
var links = document.getElementsByTagName("a");
var destination;
for (var i = 0;i<links.length; i++ ) {
links[i].onmouseover = function(){
destination = this.getAttribute("href");
if (destination.indexOf("index.html") != -1) {
moveElement("preview",0,0,5);
}
if (destination.indexOf("about.html") != -1) {
moveElement("preview",-150,0,5);
}
if (destination.indexOf("photos.html") != -1) {
moveElement("preview",-300,0,5);
}
if (destination.indexOf("live.html") != -1) {
moveElement("preview",-450,0,5);
}
if (destination.indexOf("contact.html") != -1) {
moveElement("preview",-600,0,5);
}
}
}
}
addLoadEvent(prepareSlideshow);
function showSection (id) {
var sections = document.getElementsByTagName("section");
for (var i=0; i<sections.length;i++) {
if (sections[i].getAttribute("id")!=id) {
sections[i].style.display = "none";
}else{
sections[i].style.display = "block";
}
}
}
function preparInternalnav () {
var articles = document.getElementsByTagName("article");
var navs = articles[0].getElementsByTagName("nav");
if (navs.length == 0) return false;
var nav = navs[0];
var links = nav.getElementsByTagName("a");
for (var i =0 ; i<links.length;i++) {
var sectionId = links[i].getAttribute("href").split("#")[1];
document.getElementById(sectionId).style.display = "none";
links[i].destination = sectionId;
links[i].onclick = function () {
showSection(this.destination);
return false;
}
}
}
addLoadEvent(preparInternalnav);
//photos
function showPic (whichpic) {
if (!document.getElementById("placeholder")) {
return false;
}
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
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;
}
function preparePlaceholder() {
if (!document.createElement) return 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/logo.gif");
placeholder.setAttribute("alt","buguanle andasda");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("chose one pic");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(description,gallery);
insertAfter(placeholder,description);
}
function prepareGallery () {
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);
}
}
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
//table
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],"odd");
odd = false;
} else {
odd = true;
}
}
}
}
function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
rows[i].oldClassName = rows[i].className
rows[i].onmouseover = function() {
addClass(this,"highlight");
}
rows[i].onmouseout = function() {
this.className = this.oldClassName
}
}
}
function displayAbbreviations() {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
var abbreviations = document.getElementsByTagName("abbr");
if (abbreviations.length < 1) return false;
var defs = new Array();
for (var i=0; i<abbreviations.length; i++) {
var current_abbr = abbreviations[i];
if (current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
var dlist = document.createElement("dl");
for (key in defs) {
var definition = defs[key];
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false;
var header = document.createElement("h3");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
var articles = document.getElementsByTagName("article");
if(articles.length==0)return false;
var container = articles[0];
container.appendChild(header);
container.appendChild(dlist);
}
addLoadEvent(stripeTables);
addLoadEvent(highlightRows);
addLoadEvent(displayAbbreviations);
//ajax
function getHTTPObject() {
if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function(){
try{
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(e){}
try{
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e){}
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){}
return false;
}
}
return new XMLHttpRequest();
}
function displayAjaxLoading (element) {
while (element.hasChildNodes()){
element.removeChild(element.lastChild);
}
var content = document.createElement("img");
content.setAttribute("src","./images/loading.gif");
content.setAttribute("alt","loading...");
console.log(element);
element.appendChild(content);
}
function submitFormWithAjax (whichform,thetarget) {
var request = getHTTPObject();
if (!request) {
return false;
}
displayAjaxLoading(thetarget);
var dataParts = [];
var element;
for (var i = 0;i<whichform.elements.length;i++) {
element= whichform.elements[i];
dataParts[i]= element.name + '=' +encodeURIComponent(element.value);
}
var data = dataParts.join("&");
request.open('GET',whichform.getAttribute("action"),true);
request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
request.onreadystatechange= function () {
if (request.readyState == 4) {
if (request.status ==200 ||request.status ==0) {
var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/);
if (matches.length > 0) {
thetarget.innerHTML = matches[1];
}else{
thetarget.innerHTML = '<p>' + oops +'<p>';
}
}else{
console.log("status error");
}
}
};
request.send(data);
console.log("成功了");
return true;
}
function preparForms () {
for (var i=0; i<document.forms.length;i++) {
var thisform = document.forms[i];
// resetFields(thisform);
thisform.onsubmit = function () {
var article = document.getElementsByTagName("article")[0];
if (submitFormWithAjax(this,article)) {
return false;
}
return true;
}
}
}
addLoadEvent(preparForms);各个页面：
index.html也就是home页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Jay sckript and the Domsters</title>
<link rel="stylesheet" type="text/css" href="styles/basic.css"/>
</head>
<body>
<!-- 头部开始-->
<header>
<!--头部上半部分-->
<img src="images/logo.gif"/>
<!--头部下半部分-->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="photos.html">photo</a></li>
<li><a href="live.html">live</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<!--内容-->
<article>
<h1>Lorem Ipsum Dolor</h1>
<p id="intro">Welcome to the official website of Jay Skript and the Domsters.
Here, <a href="index.html">Home</a>you can learn more about<a href="about.html">about</a> the band, view photos of the band,
find out <a href="photos.html">photo</a>about tour <a href="contact.html">contact</a>dates <a href="live.html">live</a>and get in touch with the band.
<a href="https://domscripting.com/domsters/index.html">我是一个演示案例好像是官方</a>
</p>
</article>
<script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Jay sckript and the Domsters</title>
<link rel="stylesheet" type="text/css" href="styles/basic.css"/>
</head>
<body>
<!-- 头部开始-->
<header>
<!--头部上半部分-->
<img src="images/logo.gif"/>
<!--头部下半部分-->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="photos.html">photo</a></li>
<li><a href="live.html">live</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<!--内容-->
<article>
<h1>Lorem Ipsum Dolor</h1>
<nav>
<ul>
<li><a href="#jay">jav</a></li>
<li><a href="#dom">dom</a></li>
</ul>
</nav>
<section id="jay">
<h2>jay</h2>
<p>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.</p>
</section>
<section id="dom">
<h2>dom</h2>
<p>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</p>
</section>
</article>
<script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>
photos.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Jay sckript and the Domsters</title>
<link rel="stylesheet" type="text/css" href="styles/basic.css"/>
</head>
<body>
<!-- 头部开始-->
<header>
<!--头部上半部分-->
<img src="images/logo.gif"/>
<!--头部下半部分-->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="photos.html">photo</a></li>
<li><a href="live.html">live</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<!--内容-->
<article>
<h1>tour data</h1>
<table>
<thead>
<tr>
<th>Data</th>
<th>City</th>
<th>Venue</th>
</tr>
</thead>
<tbody>
<tr>
<td>June</td>
<td>Portland <abbr title="Orgnr">OR</abbr></td>
<td>croasdasdasd</td>
</tr>
<tr>
<td>June</td>
<td>Portland <abbr title="Orgnr">OR</abbr></td>
<td>croasdasdasd</td>
</tr>
<tr>
<td>June</td>
<td>Portland <abbr title="Orgnr">OR</abbr></td>
<td>croasdasdasd</td>
</tr>
<tr>
<td>June</td>
<td>Portland <abbr title="Orgnr">OR</abbr></td>
<td>croasdasdasd</td>
</tr>
</tbody>
</table>
</article>
<script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>
live.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Jay sckript and the Domsters</title>
<link rel="stylesheet" type="text/css" href="styles/basic.css"/>
</head>
<body>
<!-- 头部开始-->
<header>
<!--头部上半部分-->
<img src="images/logo.gif"/>
<!--头部下半部分-->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="photos.html">photo</a></li>
<li><a href="live.html">live</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<!--内容-->
<article>
<h1>tour data</h1>
<table>
<thead>
<tr>
<th>Data</th>
<th>City</th>
<th>Venue</th>
</tr>
</thead>
<tbody>
<tr>
<td>June</td>
<td>Portland <abbr title="Orgnr">OR</abbr></td>
<td>croasdasdasd</td>
</tr>
<tr>
<td>June</td>
<td>Portland <abbr title="Orgnr">OR</abbr></td>
<td>croasdasdasd</td>
</tr>
<tr>
<td>June</td>
<td>Portland <abbr title="Orgnr">OR</abbr></td>
<td>croasdasdasd</td>
</tr>
<tr>
<td>June</td>
<td>Portland <abbr title="Orgnr">OR</abbr></td>
<td>croasdasdasd</td>
</tr>
</tbody>
</table>
</article>
<script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Jay sckript and the Domsters</title>
<link rel="stylesheet" type="text/css" href="styles/basic.css"/>
</head>
<body>
<!-- 头部开始-->
<header>
<!--头部上半部分-->
<img src="images/logo.gif"/>
<!--头部下半部分-->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="photos.html">photo</a></li>
<li><a href="live.html">live</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<!--内容-->
<article>
<h1>Contact the band data</h1>
<form action="submit.html" method="get">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="名" required="required"/>
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="youxiang" required="required" />
</p>
<p>
<label for="message">Message:</label>
<textarea name="message" rows="7" cols="45" id="message" placeholder="asd as"></textarea>
</p>
<input type="submit" value="Send" />
</fieldset>
</form>
</article>
<script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>
submit.html 这个和ajax相关的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Jay sckript and the Domsters</title>
<link rel="stylesheet" type="text/css" href="styles/basic.css"/>
</head>
<body>
<!-- 头部开始-->
<header>
<!--头部上半部分-->
<img src="images/logo.gif"/>
<!--头部下半部分-->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="photos.html">photo</a></li>
<li><a href="live.html">live</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<!--内容-->
<article>
<h1>Thanks!</h1>
<p>thanks for contact us we will back to you as soon as we can </p>
</article>
<script src="scripts/global.js" type="text/javascript" charset="utf-8"></script>
</html>