【js 编程艺术】小制作二

首先是一个html文档

/* explanation.html */<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <title>Explaining the Doucment Object Model</title>
     <link rel="stylesheet" type="text/css" href="styles/typography.css">    //注意href所指向的文件
 </head>
 <body>
    <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="9">Contact</a></li>
    </ul>
     <h1>What is the Document Object Model ?</h1>
     <p>
         The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <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 an style of documents.
        </p>
     </blockquote>
     <p>
         It‘s an <abbr title="Application Programming interface">API</abbr> that can be used to navegate <abbr title="HyperText <arkup Language">HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr> doucments.
     </p>
     <script type="text/javascript" src="scripts/displayAbbreviations.js"></script>  //注意href所指向的文件
 </body> </html>

注意我的 link 标签和 script 标签所引用的文件夹的位置。然后就是css

/* typography.css*/
body{
    font-family: "Hevetica", "Arial", sans-serif;
    font-size:10pt;
}
abbr{
    text-decoration: none;
    border: 0;
    font-style: normal;
}

最后就是精髓之所在js文件了:

/* displayAbbreviations.js */function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

function dispalyAbbreviations() {

    //检查兼容性
    if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;

    //取得所有缩略词
    var dlist = document.createElement("dl");
    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];

        //ie6及更早不支持abbr元素,但是添加if语句不显示
        // if(current_abbr.chileNodes.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.chileNodes.length < 1) return false;

    //创建标题
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);

    //把标题添加到页面主体
    document.body.appendChild(header);
    document.body.appendChild(dlist);
}

function displayCitations(){

    //检查兼容性
    if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;

    //取得所有引用
    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 displayAccessKeys(){

    //检查兼容性
    if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;

    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 item_text = document.createTextNode(str);
        item.appendChild(item_text);
        list.appendChild(item);
    }

    //创建标题
    var header = document.createElement("h3");
    var header_text = document.createTextNode("Accesskeys");
    header.appendChild(header_text);
    document.body.appendChild(list);
}

addLoadEvent(dispalyAbbreviations);
addLoadEvent(displayCitations);
addLoadEvent(displayAccessKeys);

显示出来就是这样子的:


.

.

.

就这么多了。

时间: 01-18

【js 编程艺术】小制作二的相关文章

Win8 HTML5与JS编程学习笔记(二)

近期一直受到win8应用的Grid布局困扰,经过了半下午加半个晚上的奋斗,终于是弄明白了Grid布局方法的规则.之前我是阅读的微软官方的开发教程,书中没有详细说明CSS3的布局规则,自己鼓捣了半天也是一头雾水,于是又找到了官方的启蒙教程的布局一张,仔细阅读了一遍,又思考了代码,并在代码的基础上实验,终于是明白了布局方法.官方教程地址是:http://msdn.microsoft.com/zh-cn/library/windows/apps/jj841108.aspx 微软基于CSS3开发了Gri

【js 编程艺术】小制作四

1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cities</title> <link rel="stylesheet" type="text/css" href="styles/format.css"> </head> <body>

【js编程艺术】小制作五

1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Design</title> <link rel="stylesheet" type="text/css" href="styles/list.css"> </head> <body&g

JavaScript DOM编程艺术学习笔记(二)

第二章 JavaScript语法 2.1 准备工作 编写JavaScript的环境:文本编辑器 + Web浏览器 用JavaScript编写的代码必须通过HTML/XHTML文档才能执行.有两种方式可以做到这点. 第一种是将JavaScript代码放到文档<head>便签中的<script>标签之间: <!DOCTYPE html> <html lang="en"> <head> <meta charset="

js实现2048小游戏二维数组更新算法

2048小游戏是当下比较流行的益智游戏了,而它最关键的模块莫过于当手指滑过或鼠标按下后如何确定更新的值. 首先该游戏可以看作一个4*4的二维数组的更新游戏,玩家通过控制数组内元素的合并来不断产生更大的数字,当方向确定时,每一行或每一列的计算方式实际上是一样的,例如,当我确定方向为向左时,每一行的计算方式都是一样的,这样,我们就可以将二维数组的计算简化为一维数组的计算了,然后通过循环计算其他行即可. 而一维数组中主要就是寻找相邻的两个非空值进行合并,相关函数可表示如下: // 一维数组合并相邻非空

【js编程艺术】 之有用的函数

学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof window.onload != "function"){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } //功能:将新节点newElement添加到目标节点targetE

dom编程艺术笔记1--第二章

第二章语法部分: 1.js注释:<!-- XXXXX 而"-->"这部分js会认为是注释内容的一部分 2.var 声明变量 不用声明变量类型 3.声明使用一个数组语法:var object = Array(arg) 或者var object = Array(xxx,xxx,xxx) 4.对象声明:var a = Object(); 语句结束用分号 a.name a.year用这种对象+点的方式创建对象属性 或者var a = {key:value}方式 创建+添加对象属性

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数