day001：
从今天开始正式阅读《javascript DOM编程艺术》一书，感觉对入门的帮助很大，描写的很详细，看到了第四章做了第一个案例，使用setAttribute方法进行改变属性来达到置换图片。对我的帮助非常大，以及初步认识DOM（文本对象模型），虽然说概念还是很模糊，但是希望后期多加理解认识。
今日最大收获是：事件触发这块，添加onclick事件处理函数，他返回值是true或false。如果设置返回值为false，onclick处理函数就认为这个链接没有被点击
第一个是 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>
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
