René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【JavaScript】【学习心得】学习 JavaScript 第七天","articleBody":"眼看着七天马上就要结束。这个周末你有没有好好休息，有没有 get 什么新技能呢？\n如果没有的话，我们快来抓紧时间学点有用的吧。\n\n在上一章中我们已经学习了如何动态的创建标记，今天我们来学习如何充实文档的内容。\n# 充实文档的内容\n## 不应该做什么\n### 渐进增强（progressive enhancement）\n\n从核心的部分开始，即从内容开始。根据内容实现良好的结构，再逐步增强这些内容。\n可以通过 CSS 改进呈现效果，通过 DOM 添加各种行为。核心内容应该在刚开始时\n编写文档时就成为文档的组成部分。\n### 平稳退化（graceful degradation）\n\n渐进增强的实现必然支持平稳退化。如果你按照渐进增强的原则去充实内容，你为内容添加的样式和行为就自然支持平稳退化，那些缺乏必要的 CSS 和 DOM 支持的访问者可以访问到你的核心内容。\n## 把“不可见”变为“可见”\n\nalt 属性原本的作用是：在图片不可用（无法显示）时用一段描述文字来解释这个位置的图片。\n## 内容\n\n``` html\n\u003ch1\u003eWhat is the Document Object Model\u003c/h1\u003e\n\u003cp\u003e\n    The \u003cabbr title=\"World Wide Web Consortium\"\u003eW3C\u003c/abbr\u003e defines the \u003cabbr title=\"Document Object Model\"\u003eDOM\u003c/abbr\u003e as:\n\u003c/p\u003e\n\u003cblockquote cite=\"http://www.w3.org/DOM\"\u003e\n    \u003cp\u003e\n        A platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content,structure and style of documents.\n    \u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003eIt is an \u003cabbr title=\"Application Programming Interface\"\u003eAPI\u003c/abbr\u003e\nthat cam be used to navigate \u003cabbr title=\"HyperText Markup Language\"\u003eHTML\u003c/abbr\u003e and \u003cabbr title=\"eXtensible Markup Language\"\u003eXML\u003c/abbr\u003e documents.\n\u003c/p\u003e\n```\n\n`\u003cabbr\u003e` 标签的含义是“缩略语(abbreviation)”，它是对单词或短语的简写形式的统称。\n`\u003cacronym\u003e` 标签的含义是被当成一个单词来读的“首字母缩写词”。为避免混淆，在 HTML5中 `\u003cacronym\u003e` 已被 `\u003cabbr\u003e` 取代。\n### HTML?XHTML?HTML5\n\nXHTML 语法更严格，标签字母必须全小写，不可以省略结束标签，所有的标签都必须闭合。\n### CSS\n\n``` css\n    body {\n        font-family: \"Helvetica\",\"Arial\",sans-serif;\n        font-size: 10pt;\n    }\n    abbr {\n        text-decoration: none;\n        border: 0;\n        font-style: normal;\n    }\n```\n### JavaScript\n\n可以用 DOM 改变浏览器的默认行为。\n## 显示 “缩略语列表”\n\n``` javascript\n    function displayAbbreviations() {\n        var abbreviations = document.getElementsByTagName(\"abbr\");\n        if (abbreviations.length \u003c 1) return false;\n        var defs = new Array();\n        for (var i=0; i\u003cabbreviations.length; i++) {\n            var current_abbr =  abbreviations[i];\n            var definition = current_abbr.getAttribute(\"title\");\n            var key = current_abbr.lastChild.nodeValue;\n            defs[key] = definition;\n        }\n    }\n```\n### 创建标记\n\n``` html\n\u003cdl\u003e\n    \u003cdt\u003eTitle 1\u003c/dt\u003e\n    \u003cdd\u003eDescription1\u003c/dd\u003e\n    \u003cdt\u003eTitle 2\u003c/dt\u003e\n    \u003cdd\u003eDescription2\u003c/dd\u003e\n\u003c/dl\u003e\n```\n\n``` javascript\nvar dlist = document.createElement(\"dl\");\n\nfor (key in defs) {\n    var definition = defs[key];\n    var dtitle = document.createElement(\"dt\");\n    var dtitle_text = document.createTextNode(key);\n    dtitle.appendChild(dtitle_text);\n    var ddesc = document.createElement(\"dd\");\n    var ddesc_text = document.createTextNode(definition);\n    ddesc.appendChild(ddesc_text);\n    dlist.appendChild(dtitle);\n    dlist.appendChild(ddesc);\n}\n```\n\n``` javascript\nvar header = document.createElement(\"h2\");\nvar headerText = document.createTextNode(\"Abbreviations\");\nheader.appendChild(headerText);\n```\n\n引用 DOM 标签：\n- DOM Core\n  \n  ```\n  document.getElementsByTagName(\"body\")[0]\n  ```\n- HTML-DOM\n  \n  ```\n  document.body\n  ```\n\n```\ndocument.body.appendChild(dlist);\n```\n\n`displayAbbreviations` 函数：\n\n``` javascript\nfunction displayAbbreviations() {\n        var abbreviations = document.getElementsByTagName(\"abbr\");\n        if (abbreviations.length \u003c 1) return false;\n        var defs = new Array();\n        for (var i=0; i\u003cabbreviations.length; i++) {\n            var current_abbr =  abbreviations[i];\n            var definition = current_abbr.getAttribute(\"title\");\n            var key = current_abbr.lastChild.nodeValue;\n            defs[key] = definition;\n        }\n        var dlist = document.createElement(\"dl\");\n        for (key in defs) {\n            var definition = defs[key];\n            var dtitle = document.createElement(\"dt\");\n            var dtitle_text = document.createTextNode(key);\n            dtitle.appendChild(dtitle_text);\n            var ddesc = document.createElement(\"dd\");\n            var ddesc_text = document.createTextNode(definition);\n            ddesc.appendChild(ddesc_text);\n            dlist.appendChild(dtitle);\n            dlist.appendChild(ddesc);\n        }\n\n        var header = document.createElement(\"h2\");\n        var headerText = document.createTextNode(\"Abbreviations\");\n        header.appendChild(headerText);\n        document.body.appendChild(header);\n        document.body.appendChild(dlist);\n}\n```\n### 一个浏览器“地雷”\n\nIE 浏览器直到 IE7 才支持 `abbr`。\n\n``` javascript\n    for (var i = 0; i \u003c abbreviations.length; i++) {\n        var current_abbr = abbreviations[i];\n        //如果当前元素没有子节点，就立刻开始下一次循环。\n        if (current_abbr.childNodes.length \u003c 1) continue;\n        var definition = current_abbr.getAttribute(\"title\");\n        var key = current_abbr.lastChild.nodeValue;\n        defs[key] = definition;\n    }\n```\n\n``` javascript\n    //创建定义列表\n    var dlist = document.createElement(\"dl\");\n    //遍历定义\n    for (key in defs) {\n        var definition = defs[key];\n        //创建定义标题\n        var dtitle = document.createElement(\"dt\");\n        var dtitle_text = document.createTextNode(key);\n        dtitle.appendChild(dtitle_text);\n        //创建定义描述\n        var ddesc = document.createElement(\"dd\");\n        var ddesc_text = document.createTextNode(definition);\n        ddesc.appendChild(ddesc_text);\n        //把它们添加到定义列表\n        dlist.appendChild(dtitle);\n        dlist.appendChild(ddesc);\n    }\n\n    //对于 dl 没有任何子节点，则立即退出 displayAbbreviations。\n    if (dlist.childNodes.length \u003c 1) return false;\n```\n### 显示“文献来源连接表”\n\n如上只能处理让不识别 `abbr` 的低版本 IE 浏览器 不报错，却不显示我们的自定义列表，肿么办呢？  \n我们让文献以链接形式显示出来。\n\n``` javascript\n    function displayCitations() {\n        if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;\n\n        //取得所有引用\n        var quotes = document.getElementById(\"blockquote\");\n        //遍历所有引用\n        for (var i=0; i\u003cquotes.length; i++) {\n            //如果没有 cite 属性，继续循环\n            if(!qutotes[i].getAttribute(\"cite\")) continue;\n            //保存 cite  属性\n            var url = quotes[i].getAttribute(\"cite\");\n            //取得引用中的所有元素节点\n            var quoteElements = quotes[i].getElementsByTagName(\"*\");\n            //如果没有元素节点，继续循环\n            if (quoteElements.length \u003c 1) continue;\n            //取得引用中最后一个元素节点\n            var elem = quoteElements[quoteElements.length-1];\n            //创建标记\n            var link = document.createElement(\"a\");\n            var link_text = document.createTextNode(\"source\");\n            link.appendChild(link_text);\n            link.setAttribute(\"href\",url);\n            var siperscript = document.createElement(\"sup\");\n            siperscript.appendChild(link);\n            //把标记添加到引用中的最后一个元素节点\n            elem.appendChild(siperscript);\n        }\n    }\n```\n## 显示快捷键菜单\n\naccess 属性可以把一个元素(如链接)与肩哦按上的某个特定按键关联在一起，一般来说，在适应于 Winodws 的系统的浏览器里，快捷键的用法是在键盘上同时按下 Alt 键和特定按键，在适用于 Mac 系统的浏览器里，快捷键的用法是同时按下 Ctrl 键和特定按键。\n\n\u003e 设置太多的快捷键会适得其反，他们会与浏览器内建的快捷方式发生冲突\n\n一些基本的快捷键都有约定俗成的设置方法，详细的可参考: http://www.clagnut.com/blog/193/\n- accesskey=\"1\"对应着一个 “返回到本网站主页” 的链接；\n- accesskey=\"2\"对应着一个 “后退到前一个页面” 的链接；\n- accesskey=\"4\"对应着一个 “打开本网站的搜索表单/页面” 的链接；\n- accesskey=\"9\"对应着一个 “本网站联系方法” 的链接；\n- accesskey=\"0\"对应着一个 “查看本网站的快捷键清单” 的链接；\n\n``` html\n\u003cul id=\"navigation\"\u003e\n    \u003cli\u003e\u003ca href=\"index.html\" accesskey=\"1\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"search.html\" accesskey=\"4\"\u003eSearch\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"contact.html\" accesskey=\"9\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n来创建一份快捷键清单\n\n``` javascript\n    function displayAccesskeys() {\n        if (!document.getElementsByTagName || !document.createTextNode || !document.createElement) return false;\n        //取得文章当中的所有链接\n        var links = document.getElementsByTagName(\"a\");\n        //创建一个数组，保存快捷键\n        var akeys = new Array();\n        //遍历链接\n        for (var i=0; i\u003clinks.length; i++) {\n            var current_link = links[i];\n            //如果没有 accesskey 属性，继续循环\n            if (!links[i].getAttribute(\"accesskey\")) continue;\n            //取得 accesskey 的值\n            var key = current_link.getAttribute(\"accesskey\");\n            // 取得链接文本\n            var text = current_link.lastChild.nodeValue;\n            //添加到数组\n            akeys[key] = text;\n        }\n\n        //创建列表\n        var list = document.createElement(\"ul\");\n        //遍历快捷键\n        for ( key in akeys) {\n            var text = akeys[key];\n            //创建放到列表中的字符串\n            var str = key + \":\" +text;\n            //创建列表象\n            var item = document.createElement(\"li\");\n            var item_text = document.createTextNode(str);\n            item.appendChild(item_text);\n            //把列表创建到列表中\n            list.appendChild(item);\n        }\n\n        //创建标题\n        var header = document.createElement(\"h1\");\n        var header_text = document.createTextNode(\"Acceskeys\");\n        header.appendChild(header_text);\n        //把标题添加到主体上\n        document.body.appendChild(header);\n        //把列表放到主体上\n        document.body.appendChild(list);\n    }\n\n    addLoadEvent(displayAccesskeys);\n```\n\n在线 DEMO 地址：[codepen](http://codepen.io/paddingme/pen/XJJGjv) or [github](https://github.com/paddingme/Learning-JavaScript/blob/master/Demo/1-8.html)。\n\n好了，今天的学习就到了，明天周一了，请记得定闹钟！\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-23T14:04:19.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/11/Learning-JavaScript/issues/11"}