第四章 HTML与JavaScript
DHTML就是与CSS和Web文档进行交互生成动态页面的JavaScript。
4.1HTML文档剖析
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>my first page</title>
</head>
<body>hello html!</body>
</html>
HTML文档是一种文本文档，它以DOCTYPE开头，告诉用户代理这个文档是什么以及它应该如何被处理。接着使用了一个HTML元素，它包含了所有的其他元素以及文本的内容。HTML元素中应包含一个lang属性（定义所使用的语言（人类语言））和一个dir属性（定义文本的读取顺序）。在HTML元素中需要一个带有TITLE元素的HEAD元素。可以添加一个可选的META元素，它决定了使用什么编码来显示（如果你还没有在服务器上设置编码）
4.2在网页中使用JavaScript提供反馈信息的方式
1）使用window方法：prompt(),alert(),confirm()
alert警告窗口,它只是简单地给用户一个信息，并在OK按钮激活之前停止代码的进一步执行。这与prompt()和confrim()是不同的，前者允许访问者输入一些东西，但后者要求用户确认一个动作。
confirm()是根据用户激活OK或Cancel按钮而返回布尔型值（True或False）的方法.确认对话框时一种可以防止用户在Web应用程序中执行错误步骤的简单的方法。
var user=prompt('please choose a name',' s'); 当用户激活OK按钮时，变量user的值可能是s（如果用户没有更改预设值）或者用户输入的任何值。当用户激活Cancel按钮时，这个变量的值就会是null.
4.3通过DOM访问文档
两种方法得到文档的元素：
document。getElementsByTagName('p'); //返回所有名称为P的对象集合。
document.getElementById('id').//返回带有这个ID的元素
4.4 元素的子节点，父节点，兄弟节点和值。
我们知道通过拼接getElementsByTagName()方法可以访问到其他元素内部的元素，然而这种方式相当笨拙，它意味着要知道锁更改的HTML文档，DOM提供了一种更好的方法，就是通过子节点，父节点和兄弟结点。
文档中的每个结点都有一些重要的属性：
1）最重要的是nodeType,它描述该节点是什么--元素，属性，注释，文本或其他几种类型（共12个）
2）另一个重要的性质是nodeName，它表示元素的名字，如果是文本结点的话则表示#text.根据文档类型和用户代理，nodeName可以是大写的，也可以是小写的。
3）nodeValue是节点的值：如果节点是个元素，则它为null;如果元素是文本节点，则它为文本内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Date example</title>
<style type="text/css">
.error{color:#c00;font-weight:bold;}
</style>
<script type="text/javascript">
function checkDate()
{
if(!document.getElementById||!document.createTextNode)
{
return;
}
var dateField=document.getElementById('date');
if(!dateField)
{
return;
}
var errorContainer=dateField.parentNode.getElementsByTagName('span')[0];
if(!errorContainer)
{
return;
}
var checkPattern=new RegExp("\\d{2}/\\d{2}/\\d{4}");
var errorMessage='';
errorContainer.firstChild.nodeValue='';
var dateValue=dateField.value;
if(dateValue=='')
{
errorMessage='Please provide a date.';
}
else if(!checkPattern.test(dateValue))
{
errorMessage='Please provide the date in the defined format';
}
if(errorMessage!='')
{
errorContainer.firstChild.nodeValue=errorMessage;
dateField.focus();
return false;
}
else
{
return true;
}
}
</script>
</head>
<body>
<form action="eventssearch.php" method="post" onsubmit="return checkDate();">
<p>
<label for="date">Date in the format DD/MM/YYYY:</label></br>
<input type="text" id="date" name="date"/>
<input type="submit" value="Check" /><br/>
<span class="error"></span>
</p>
</form>
</body>
</html>
技术不是一般的差，这个东西检查不错哪里出问题了，又不能运行，囧。。。
4.5 修改元素属性
DOM规范提供了两种方法来读取和设置属性值---getAttribute()和setAttribute()；getAttribute()方法有一个参数---属性名；setAttribute()方法需要两个参数---属性名和新的属性值
4.6 创建，移除和替换元素
document.createElement('element') //创建一个标签名为element的新元素
document.createTextNode('string') //创建一个节点值为string的文本节点
node.appendChild(newNode) 将newNode作为子节点，添加在node的所有子节点之后
newNode=node.cloneNode(bool) 创建newNode节点作为node的副本。如果bool值为true，这个克隆将包括所有原节点的子节点机器属性的克隆。
node.insertBefore(newNode, oldNode) 把newNode作为一个node的新节点插入到oldNode之前。
node.removeChild(oldNode) 移除node节点的子节点oldNode
node.replaceChild(newNode, oldNode)使用节点newNode替换node节点的子节点oldNode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Date example</title>
<style type="text/css">
.error{color:#c00;font-weight:bold;}
</style>
<script type="text/javascript" src="submitToLinks.js"></script>
</head>
<body>
<form action="eventssearch.php" method="post" onsubmit="return checkDate();">
<p>
<label for="Name">name:</label></br>
<input type="text" id="Name" name="Name"/>
<input type="submit" value="send" /><br/>
</p>
</form>
</body>
</html>
function submitToLinks()
{
if(!document.getElementById||!document.createTextNode)
{
return;
}
var inputs,i,newLink,newText;
inputs=document.getElementsByTagName('input');
for(i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type').toLowerCase()!='submit')
{
continue;
i++;
}
newLink=document.createElement('a');
newText=document.createTextNode(inputs[i].getAttribute('value'));
newLink.appendChild(newText);
newLink.setAttribute('href','javascript:document.forms[0].submit()');
inputs[i].parentNode.replaceChild(newLink,inputs[i]);
}
}
window.onload=submitToLinks;
有些不知所谓了，有些痛苦，但是得坚持，或许这种方式得改变，不过应该是自己浮躁引起的。不是书本的问题。。。
4.6.1避免NOSCRIPT
SCRIPT元素有一个对立的NOSCRIPT. 这个元素最初目的是在JavaScript不可用的时候为用户提供可选择的内容。
4.6.2 通过innerHTML简化脚本
element.innerHTML：读写给定element的HTML内容，它是一个字符串，包括所有子节点及它们的属性和文本内容。（以前接触过但是一直不知道它的用途。。囧啊）
DOMhelp：自己的辅助函数库。。 好多函数呀。。。
第四章 HTML与JavaScript的更多相关文章
- 读《编写可维护的JavaScript》第四章总结
第四章 变量 函数和运算符 4.1 ① 变量声明 变量声明是通过var语句来完成的,并且所有的var语句都提前到包含这段逻辑的函数的顶部执行. function doSomething() { + v ...
- Javascript权威指南——第二章词法结构，第三章类型、值和变量，第四章表达式和运算符，第五章语句
第二章 词法结构 一.HTML并不区分大小写(尽管XHTML区分大小写),而javascript区分大小写:在HTML中,这些标签和属性名可以使用大写也可以使用小写,而在javascript中必须小写 ...
- JavaScript高级程序设计：第十四章
第十四章 一.表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在javascript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继 ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- 为什么我要放弃javaScript数据结构与算法（第四章）—— 队列
有两种结构类似于数组,但在添加和删除元素时更加可控,它们就是栈和队列. 第四章 队列 队列数据结构 队列是遵循FIFO(First In First Out,先进先出,也称为先来先服务)原则的一组有序 ...
- 进击的Python【第十四章】：Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- [书籍翻译] 《JavaScript并发编程》第四章 使用Generators实现惰性计算
本文是我翻译<JavaScript Concurrency>书籍的第四章 使用Generators实现惰性计算,该书主要以Promises.Generator.Web workers等技术 ...
- JavaScript DOM编程艺术-学习笔记（第三章、第四章）
第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯 ...
- 读高性能JavaScript编程 第四章 Duff's Device
又要开始罗里吧嗦的 第四章 Summary 了. 这一次我尽量精简语言. 如果你认为 重复调用一个方法数次有点辣眼睛的话 比如: function test(i){ process(i++); pr ...
随机推荐
- Object-C内存管理－对象引用计数的特例
看到OC中内存管理这块,其中的引用计数部分,部分10.5上的EBOOK示例已经在10.9上不能运行正确了,比如下面的代码: NSString * str1 = @"string 1" ...
- HttpServletRequest的Attribute和Parameter区别
HttpServletRequest类既有getAttribute()方法,也由getParameter()方法,这两个方法有以下的组件通过getParameter()方法来获得请求参数,例如假定we ...
- java和android及IOS对接RSA加密经验
1.网上找的java生成RSA密钥对的例子,产生的字附串实际上是hax后和密钥串 你可以将他们当成静态字附串存在java代码里 2.android和java可以代码复用,IOS对接比较麻烦 3.IOS ...
- 自己做了一个json格式化工具,亲测可以使用
随笔背景:在向后台请求数据之后,我们常常会拿到一串json格式.此时,为了方便查看key-value,程序猿们常常使用一些在线json格式化工具或者是类似于notepadd++这样的工具进行转换.今天 ...
- Ceph性能测试工具和方法。
0. 测试环境 同 Ceph 的基本操作和常见故障排除方法 一文中的测试环境. 1. 测试准备 1.1 磁盘读写性能 1.1.1 单个 OSD 磁盘写性能,大概 165MB/s. root@ceph1 ...
- SCI Index
Nature.[link] Science.[link] ...
- linux-12基本命令之 cat,more,head, tail ,tr,od,wc,cut,diff
1.cat 命令 用于查看纯文本文件(较短),格式:"cat[选项][文件]" 查看文本文件 [root@localhost /]# cat 文件名 cat 参数 参数 作用 -n ...
- linux配置java环境变量(详细) -copy
一. 解压安装jdk 在shell终端下进入jdk-6u14-linux-i586.bin文件所在目录, 执行命令 ./jdk-6u14-linux-i586.bin 这时会出现一段协议,连继敲回车, ...
- Python文件读取编码错误问题解决之（PyCharm开发工具默认设置的坑。。。）
刚接触Python学习,正准备做个爬虫的例子,谁知道代码一开始就遇到了一个大坑,狂汗啊. 问题是这样的:我通过代码爬取了博客园首页的HTML代码并存入到blog.txt文件当中,然后准备读取出来之后进 ...
- Golang通过Thrift框架完美实现跨语言调用
每种语言都有自己最擅长的领域,Golang 最适合的领域就是服务器端程序. 做为服务器端程序,需要考虑性能同时也要考虑与各种语言之间方便的通讯.采用http协议简单,但性能不高.采用TCP通讯,则需要 ...