教材推荐
JavaScript DOM 编程艺术
JavaScript高级程序设计
JavaScript权威指南
主要内容
- Ajax读取文本实例
- Bat Letter 读懂程序员的浪漫
- DOM树的购物清单
- 中国地图画展
- 简单的文字移动
- 最后讲一个故事
1. Ajax读取文本实例
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
-
This was loaded asynochronously!
将这句话存入example.txt文件 -
获取http响应(getHTTPObject.js)
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();
}
早期的浏览器战争导致各家厂商生产的浏览器难以互相兼容。一些老版的浏览器对ajax态度千差万别，在编程时，首先检查浏览器的支持的版本，最后返回一个XMLHttpRequest响应。
- 获取文本(getNewContent.js)
function getNewContent(){
var request = new XMLHttpRequest();
if(request)
{
request.open("GET","example.txt",true);
request.onreadystatechange = function()
{
if(request.readyState == 4){
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
request.send(null);
}else{
alert("Sorry,your browser doesn\'t support XMLHttpRequest");
}
}
如果异步响应成功，读取example.txt文件，判断readyState == 4表示已加载状态，所有数据接受完毕，详见教材分析，之后，新建一个P节点，将文本内容添加到P节点中，最后在页面中显示。
ajax.hmtl
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Ajax</title>
</head>
<body>
<div id="new">
</div>
<script src="addLoadEvent.js"></script>
<script src="getHTTPObject.js"></script>
<script src="getNewContent.js"></script>
</body>
</html>
addLoadEvent.js
function addLoadEvent(func){
var oldload = window.onload;
if(typeof window.onLoad != 'function')
window.onload = func;
else
{
oldload();
func();
}
}
Bat Lettet
我面具下是谁不重要，但是我的所作所为会解释这一切。
如果你出门在外，请带个面具。我反抗他们，不怕被发现。
不是为了你自己，是为了你身边的人。
一个div搞定
<div style = "width:550px;">
<h1>Bat Letter</h1>
<img src="batman.jpg" style="width:20%">
<p>
After all the battles we fought together, after all the difficult times we say together,
after all the good and bad moments we've been through, I think It's time I let you know how I feel about you.<br>
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>-the way you see good in the worse</li>
<li>-the way you handle emotionally difficult situations</li>
<li>-the way you look ay justice</li>
</ul>
<p>
I have learned a lot fron you.<br>
You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em>have a heart.
You make my heart beat.
Your smile brings my smile on my face, your pain brings pain to my heart.
</p>
<p><strong>I love you superman.</strong></p>
<p>
Your not-so-secret-lover,<br>
Batman
</p>
</div>
页面展示
DOM购物清单
- 创建一个列表
<ul id="purchases">
<li>A tin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
- 获取你的清单
<script>
{
var shopping = document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));
var paras=document.getElementsByTagName("p");
for(var i=0;i < paras.length;i++){
alert(paras[i].getAttribute("title"));
}
}
</script>
- style 走起
p{
color:yellow;
font-family:"arial",sans-serif;
font-size:1.2em;
}
body{
color:white;
background-color:black;
}
#purchases{
border: 2px solid white;
background-color:#333;
color:#ccc;
padding:1.5em;
}
看看效果
将鼠标移到文字上会有提示文字噢！
一起去旅行
主调用html
<h1>SnapShots</h1>
<ul id="special">
<li><a class = "popup" href="../images/chong.jpg" title="chongqing" οnclick="showPic(this);return false;">重庆</a></li>
<li><a href="../images/si.jpg" title="sichuan" onclick="showPic(this);return false;">四川</a></li>
<li><a href="../images/shan.jpg" title="shanxi" onclick="showPic(this);return false;">陕西</a></li>
</ul>
显示图片
function showPic(whichpic)
{
// alert("showpic");
if(!document.getElementById("China"))return false;
var source = whichpic.getAttribute("href");
var china = document.getElementById("China");
china.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
准备画展
function prepareGallery(){
if(!document.getElementsByTagName)return false;
if(!document.getElementById)return false;
if(!document.getElementById("special"))return false;
var gallery = document.getElementById("special");
var links = gallery.getElementsByTagName("a");
for(var i = 0;i < links.length;++i)
{
links[i].onclick = function(){
showPic(this);
return false;
}
}
}
提升一点颜值
body{
font-family: "Helvetica","Arial",serif;
color:#333;
background-color:#ccc;
margin: 1em 10%;
}
h1{
color:#333;
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}
img{
display:block;
clear:both;
}
看看效果
切换到重庆
切换到陕西
大功告成
尝试动画的时间到了
动画实际上就是快速播放的图片序列，图片快速切换就产生了动态效果。
简单一点，就让文字动起来。
- 新建2个段落
<p id = "message">message</p>
<p id = "msg2">msg2</p>
- move message
function moveMessage()
{
if(!document.getElementById)return false;
if(!document.getElementById("message")) return false;
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "200px";
elem.style.top = "150px";
}
这种方式直接对元素进行操作，耦合度太高，不易扩展，下面还有一种方式。
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById(elementID))return false;
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y)return true;
if(xpos < final_x)xpos++;
if(xpos > final_x)xpos--;
if(ypos < final_y)ypos++;
if(ypos > final_y)ypos--;
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
movement = setTimeout(repeat,interval);
}
- 让文本动起来
function positionMessage(){
if(!document.getElementById)return false;
if(!document.getElementById("message")) return false;
if(!document.getElementById("msg2")) return false;
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "150px";
moveElement("message",200,100,10);
var elem = document.getElementById("msg2");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "50px";
moveElement("msg2",125,200,20);
}
Story
文似看山不喜平，如何让网页不只是一种样式，而且让人印象深刻呢？
像这样
这段情节是不是在说，你来到一个全新的世界，这里面有很多未知的怪物，前面的勇士已经倒下，你需要闯关开启新征程，从这里愉快地开始吧。
编写脚本
function styleHeadersSiblings(){
if(!document.getElementsByTagName)return false;
var headers = document.getElementsByTagName("h1");
var elem;
for(var i = 0;i < headers.length;++i)
{
elem = getNextElement(headers[i].nextSibling);
elem.style.fontWeight = "bold";
elem.style.fontSize = "1.2em";
}
}
function getNextElement(node)
{
if(node.nodeType == 1)return node;
if(node.nextSibling)
return getNextElement(node.nextSibling);
return null;
}
css功不可没
body{
font-family: "Helvetica","Arial",sans-serif;
background-color:#fff;
color:#000;
}
table{
margin:auto;
border:1px solid #699;
}
caption{
margin:auto;
padding:.2em;
font-size:1.2em;
font-weight:bold;
}
th{
font-weight:normal;
font-style:italic;
text-align:left;
border:1px dotted #699;
background-color:#9cc;
color:#000;
}
th,td{
width:10em;
padding:.5em;
}
tr:nth-child(odd){
background-color:#ffc;
}
tr:nth-child(even){
background-color:#fff;
}
tr:hover{
font-weight:bold;
}
结束语
从一段完整代码开启javascript之旅
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>test</title>
<script src = "test.js"></script>
</head>
<body>
<div id = "testdiv">
<p>This is <em>my</em> content</p>
</div>
<ul id="navigation">
<li><a href="index.html" accesskey = "1">Home</a></li>
<li><a href="search.html" accesskey = "4">Search</a></li>
<li><a href="contact.html" accesskey = "0">Contact</a></li>
</ul>
<h1>What is the Document Object Model?</h1>
<p>
The<abbr title = "World Web Consortium"> W3C</abbr> defines<abbr title = "Document Object Model"> DOM </abbr> as:
</p>
<blockquote cite = "http://www.w3.org/DOM/">
<p>
A platform and language neutral interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents.
</p>
</blockquote>
<p>
It is an<abbr title = "Application Programming Interface"> API</abbr> that can be used to nevigate
<abbr title = "HyperText Markup Language"> HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr> documents.
</p>
<blockquote cite = "http://study.163.com" accesskey="9"><p>网易云课堂</p></blockquote>
</body>
</html>
function dispAbbr(){
//兼容性检查
if(!document.getElementsByTagName)return false;
if(!document.createElement)return false;
if(!document.createTextNode)return false;
//取得缩略词
var abbrevation = document.getElementsByTagName("abbr");
if(abbrevation.length < 1)return false;
var defs = Array();
//遍历缩略词
for(var i = 0;i < abbrevation.length;++i)
{
var definiton = abbrevation[i].getAttribute("title");
var key = abbrevation[i].lastChild.nodeValue;
defs[key] = definiton;
}
//创建列表
var dlist = document.createElement("dl");
for(key in defs)
{
var definiton = 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(definiton);
ddesc.appendChild(ddesc_text);
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
//添加标题和列表到主页面
document.body.appendChild(header);
document.body.appendChild(dlist);
}
function dispCit(){
var quotes = document.getElementsByTagName("blockquote");
// 遍历引用
for(var i = 0;i < quotes.length;++i)
{
if(!quotes[i].getAttribute("cite"))continue;
var url = quotes[i].getAttribute("cite");
var quoteChildren = quotes[i].getElementsByTagName('*');
if(quoteChildren.length < 1)continue;
var elem = quoteChildren[quoteChildren.length-1];
// 创建标记
var link = document.createElement("a");
var link_text = document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href",url);
var superscript = document.createElement("sup");
superscript.appendChild(link);
// 把标记添加到最后一个元素节点
elem.appendChild(superscript);
}
}
function dispa(){
var links = document.getElementsByTagName("a");
var akeys = new Array();
// 遍历链接
for(var i = 0;i < links.length;i++)
{
var current_link = links[i];
if(!current_link.getAttribute("accesskey"))continue;
var key = current_link.getAttribute("accesskey");
// 取得链接文本
var text = current_link.lastChild.nodeValue;
akeys[key] = text;
}
// 创建列表
var list = document.createElement("ul");
for(key in akeys)
{
var text = akeys[key];
var str = key + ":"+ text;
var item = document.createElement("li");
var itm_text = document.createTextNode(str);
item.appendChild(itm_text);
list.appendChild(item);
}
// 创建标题
var header = document.createElement("h3");
var header_text = document.createTextNode("Accesskey");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(list);
// 添加标题和列表到主页面
}
window.onload = function(){
dispAbbr();
dispCit();
dispa();
}
编程不易，动辄找手册，耗费无数精力，还是得潜心修炼内功，再求招式变化，方能以不变应万变。
而这内功无疑是算法和数据结构。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
