第四章 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 ...
随机推荐
- linux修改主机名的方法
linux修改主机名的方法 用hostname命令可以临时修改机器名,但机器重新启动之后就会恢复原来的值. #hostname //查看机器名#hostname -i //查看本机器名对应的ip ...
- 在Windows 8.1及IE 11中如何使用HttpWatch
提示:HttpWatch现已更新至v9.1.8,HttpWatch v9.1及以上的版本现都已支持Windows 7,8,8.1和IE 11. 如果你的HttpWatch专业版授权秘钥允许进入vers ...
- C#数据结构杂记
定义任何类时记得要定义无参构造函数,否则在反序列化的时候会抛出异常. [Serialize]声明该类可以被序列化 Const与readonly的区别 const本质上是常量没有任何方法修改值,read ...
- java内存泄漏
java内存泄漏主要分成两个方面: (1)堆中申请的空间没有被释放 (2)对象已不在被使用,但是仍然存在在内存当中 以下集中情况可能会导致内存泄漏 (1)静态集合的使用hashmap和vector,静 ...
- CUTE-WRV2.1+TCP core(COM5402)的TCP带宽测试
问题的提出 测试TCP的带宽,硬件平台CUTE-WRV2.1,固件版本WRPCV3.0+COM5402. 代码.工具及实现 1. 在固件中,增加模块,收到TCP数据包后不断地往外发数: library ...
- jQuery树形菜单(1)jquery.treeview
jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...
- Android性能优化典范第一季
2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...
- MySQL数据库有外键约束时使用truncate命令的办法
MySQL数据库操作中,Delete与Truncate两个命令都可以删除一个数据表中的全部数据,使用办法分别是: DELETE FROM t_question TRUNCATE TABLE t_que ...
- Quartz.net 定时调度时间配置格式说明与实例
格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 1 秒 是 0-59 , - * / 2 分 是 0-59 , - * / 3 小时 ...
- 使用百度网盘+Git，把版本控制托管到云端
之前公司的一个项目使用SVN来做的版本控制,服务器设在我这台电脑上.然后是出于某些原因,我的电脑IP变了多次,每变一次就要重新绑定静态ip,甚是烦人.同时SVN这种集中式的版本控制服务在我关闭了我的电 ...