盒子
目录
文章目录
  1. 充实文档的内容
    1. 不应该做什么
      1. 渐进增强(progressive enhancement)
      2. 平稳退化(graceful degradation)
    2. 把“不可见”变为“可见”
    3. 内容
      1. HTML?XHTML?HTML5
      2. CSS
      3. JavaScript
    4. 显示 “缩略语列表”
      1. 创建标记
      2. 一个浏览器“地雷”
      3. 显示“文献来源连接表”
    5. 显示快捷键菜单

【JavaScript】【学习心得】学习JavaScript 第七天

文章取自我的 Github repos: Learning-JavaScript, 作者:@paddingme
原文链接:https://github.com/paddingme/Learning-JavaScript/issues/11

眼看着七天马上就要结束。这个周末你有没有好好休息,有没有 get 什么新技能呢?
如果没有的话,我们快来抓紧时间学点有用的吧。

在上一章中我们已经学习了如何动态的创建标记,今天我们来学习如何充实文档的内容。

充实文档的内容

不应该做什么

渐进增强(progressive enhancement)

从核心的部分开始,即从内容开始。根据内容实现良好的结构,再逐步增强这些内容。
可以通过 CSS 改进呈现效果,通过 DOM 添加各种行为。核心内容应该在刚开始时
编写文档时就成为文档的组成部分。

平稳退化(graceful degradation)

渐进增强的实现必然支持平稳退化。如果你按照渐进增强的原则去充实内容,你为内容添加的样式和行为就自然支持平稳退化,那些缺乏必要的 CSS 和 DOM 支持的访问者可以访问到你的核心内容。

把“不可见”变为“可见”

alt 属性原本的作用是:在图片不可用(无法显示)时用一段描述文字来解释这个位置的图片。

内容

1
2
3
4
5
6
7
8
9
10
11
12
<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 and style of documents.
</p>
</blockquote>
<p>It is an <abbr title="Application Programming Interface">API</abbr>
that cam be used to navigate <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr> documents.
</p>

<abbr> 标签的含义是“缩略语(abbreviation)”,它是对单词或短语的简写形式的统称。
<acronym> 标签的含义是被当成一个单词来读的“首字母缩写词”。为避免混淆,在 HTML5中 <acronym> 已被 <abbr> 取代。

HTML?XHTML?HTML5

XHTML 语法更严格,标签字母必须全小写,不可以省略结束标签,所有的标签都必须闭合。

CSS

1
2
3
4
5
6
7
8
9
body {
font-family: "Helvetica","Arial",sans-serif;
font-size: 10pt;
}
abbr {
text-decoration: none;
border: 0;
font-style: normal;
}

JavaScript

可以用 DOM 改变浏览器的默认行为。

显示 “缩略语列表”

1
2
3
4
5
6
7
8
9
10
11
function displayAbbreviations() {
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];
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
}

创建标记

1
2
3
4
5
6
<dl>
<dt>Title 1</dt>
<dd>Description1</dd>
<dt>Title 2</dt>
<dd>Description2</dd>
</dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
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);
}
1
2
3
var header = document.createElement("h2");
var headerText = document.createTextNode("Abbreviations");
header.appendChild(headerText);

引用 DOM 标签:

  • DOM Core

    1
    document.getElementsByTagName("body")[0]
  • HTML-DOM

    1
    document.body
1
document.body.appendChild(dlist);

displayAbbreviations 函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function displayAbbreviations() {
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];
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);
}

var header = document.createElement("h2");
var headerText = document.createTextNode("Abbreviations");
header.appendChild(headerText);
document.body.appendChild(header);
document.body.appendChild(dlist);
}

一个浏览器“地雷”

IE 浏览器直到 IE7 才支持 abbr

1
2
3
4
5
6
7
8
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//创建定义列表
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);
}

//对于 dl 没有任何子节点,则立即退出 displayAbbreviations。
if (dlist.childNodes.length < 1) return false;

显示“文献来源连接表”

如上只能处理让不识别 abbr 的低版本 IE 浏览器 不报错,却不显示我们的自定义列表,肿么办呢?
我们让文献以链接形式显示出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function displayCitations() {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;

//取得所有引用
var quotes = document.getElementById("blockquote");
//遍历所有引用
for (var i=0; i<quotes.length; i++) {
//如果没有 cite 属性,继续循环
if(!qutotes[i].getAttribute("cite")) continue;
//保存 cite 属性
var url = quotes[i].getAttribute("cite");
//取得引用中的所有元素节点
var quoteElements = quotes[i].getElementsByTagName("*");
//如果没有元素节点,继续循环
if (quoteElements.length < 1) continue;
//取得引用中最后一个元素节点
var elem = quoteElements[quoteElements.length-1];
//创建标记
var link = document.createElement("a");
var link_text = document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href",url);
var siperscript = document.createElement("sup");
siperscript.appendChild(link);
//把标记添加到引用中的最后一个元素节点
elem.appendChild(siperscript);
}
}

显示快捷键菜单

access 属性可以把一个元素(如链接)与肩哦按上的某个特定按键关联在一起,一般来说,在适应于 Winodws 的系统的浏览器里,快捷键的用法是在键盘上同时按下 Alt 键和特定按键,在适用于 Mac 系统的浏览器里,快捷键的用法是同时按下 Ctrl 键和特定按键。

设置太多的快捷键会适得其反,他们会与浏览器内建的快捷方式发生冲突

一些基本的快捷键都有约定俗成的设置方法,详细的可参考: http://www.clagnut.com/blog/193/

  • accesskey=”1”对应着一个 “返回到本网站主页” 的链接;
  • accesskey=”2”对应着一个 “后退到前一个页面” 的链接;
  • accesskey=”4”对应着一个 “打开本网站的搜索表单/页面” 的链接;
  • accesskey=”9”对应着一个 “本网站联系方法” 的链接;
  • accesskey=”0”对应着一个 “查看本网站的快捷键清单” 的链接;
1
2
3
4
5
<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>

来创建一份快捷键清单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function displayAccesskeys() {
if (!document.getElementsByTagName || !document.createTextNode || !document.createElement) return false;
//取得文章当中的所有链接
var links = document.getElementsByTagName("a");
//创建一个数组,保存快捷键
var akeys = new Array();
//遍历链接
for (var i=0; i<links.length; i++) {
var current_link = links[i];
//如果没有 accesskey 属性,继续循环
if (!links[i].getAttribute("accesskey")) continue;
//取得 accesskey 的值
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("h1");
var header_text = document.createTextNode("Acceskeys");
header.appendChild(header_text);
//把标题添加到主体上
document.body.appendChild(header);
//把列表放到主体上
document.body.appendChild(list);
}

addLoadEvent(displayAccesskeys);

在线 DEMO 地址:codepen or github

好了,今天的学习就到了,明天周一了,请记得定闹钟!