第四章 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 ...
随机推荐
- gulp 初级教程 会着让道
1.全局安装一遍: $ npm install gulp -g 2.cd 到项目的根目录 (如果跟程序配合,程序先建好程序的话,你可找到放js和css还有images的文件夹.)我当时就在这挡住了,不 ...
- android 的闪屏效果
android的闪屏效果,就是我们刚开始启动应用的时候弹出的界面或者动画,过2秒之后自动的跳转到主界面. 其实,实现这个效果很简单,使用Handler对象的postDelayed方法就可以实现.在这个 ...
- c# 根据文件流查看文件真实格式
今天在做图片注册的功能的时候,测试提出一个问题:将随便一个非图片文件将后缀名改为jpg或其他,上传时应检验图片合法性.然后同事给提供了根据文件流前两个字节判断文件真实格式的思路,代码如下: publi ...
- c++使用stdint.h和inttypes.h
我们有时候需要使用int有关的宏,比如PRId64,int64_t等,就需要包含那两个头文件. 由于那两个头文件是为c99默认使用的,c++要使用它可能要定义__STDC_FORMAT_MACROS, ...
- windows编程:资源和播放声音
要播放声音,要附加项:winmm.lib,然后包含头文件:#include <mmsystem.h> 播放声音用PlaySound函数,只能播放midi和wav波形文件. #define ...
- UEditor编辑器并不难
1.背景: 其实学习UEditor本该在这之前就应该学习整合到自己的项目中的了,第一次接触UEditor是在暑假期间,当时做东西在师兄的代码中发现了这东西,心想:卧槽,竟然可以这样整合别 ...
- 关于网页pc端以及移动端的兼容性——测试
对于经常做网页设计的人员来说,网页的兼容性测试是不可缺少的,记得刚来单位的新手,都是要安装一款浏览器测试软件的,看自己制作的网页是否在各大浏览器中正常显示,有没有变形,或者网页效果不兼容等. 不仅仅是 ...
- Java中类继承、接口实现的一些细节（长期更新）
前言 在Java中,子类继承父类,类实现接口是属于常识性的内容了,作为一个Java程序员应该也比较熟悉.不过子类继承父类,类实现接口中还是有一些小细节值得注意一下,本文就从个人工作.学习中入手,总结一 ...
- Java多线程10：ThreadLocal的作用及使用
ThreadLocal的作用 从上一篇对于ThreadLocal的分析来看,可以得出结论:ThreadLocal不是用来解决共享对象的多线程访问问题的,通过ThreadLocal的set()方法设置到 ...
- 【Java】ThreadLocal细节分析
ThreadLocal通过中文解释就是线程本地变量,是线程的一个局部变量.根据哲学家黑格尔“的存在即合理”的说法,ThreadLocal的出现肯定是有它的意义,它的出现也是因为多线程的一个产物.Thr ...