第四章 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 ...
随机推荐
- Docker ntpdate Permition error
After building a Dockerfile, I run it. I figure out that there is something wrong with local time. S ...
- Unity 通过 www 下载 assetbundle , 在 iOS9 设备无法下载的问题
我们项目是通过 www 下载 Assetbundle 来实现热更新的, 在 iOS 8上一切正常,但在 iOS9 设备上发现无法下载,跟踪调试发现以下错误信息 “App Transport Secur ...
- 64位WIN7下安装MPICH2
1.首先,下载32位的MPICH2,(注意哦,是32位,不是64位) http://202.117.4.228/files/B117000000042632/www.mcs.anl.gov/resea ...
- 网页Email抓取 java
import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.FileReader; impo ...
- yii2 mpdf
安装 php composer.phar require kartik-v/yii2-mpdf "*" 或者把 "kartik-v/yii2-mpdf": &q ...
- Shiro权限验证代码记录，正确找到shiro框架在什么地方做了权限识别
权限验证方式的验证代码: org.apache.shiro.web.servlet.AdviceFilter这个类是所有shiro框架提供的默认权限验证实例类的父类 验证代码: public void ...
- QQ分组显示列表ExpandableListView组件应用源码
ExpandableListView又称为可扩展的ListView组件,他和ListView组件很相似 不过每行的显示有两个xml文件,一个xml文件用于定义分组列表的显示风格, 还有一个xml文件用 ...
- unity发布安卓 手指控制物体缩放和旋转
直接帮到物体的身上就可以了 using UnityEngine; using System.Collections;using System.IO;public class hehe : MonoBe ...
- SecureCRT使用sz和rz命令进行文件的上传和下载
SecureCRT可以使用sz和rz命令进行文件的上传和下载. sz文件下载: 格式:sz 文件名称 即可将服务器的文件下载至本地. rz文件上传: 格式:rz 文件名称 即可将本地文件上传至服务器. ...
- word 多级列表设置
今天写论文碰到了这个问题, 希望能出现这样的效果: 第一章 1.1 1.2 第二章 2.1 2.2 ...... 为了达到这个效果,晕死了.因为我的标题不是普通的默认标题一标题二 比如同济一标题 ...