轻装上阵，安卓工程师之路---day04(JavaScript & XML & DTD)

 

00 Node接口的API（续）

createElement()    按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，参数是一个字符串。方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象。

 

innerHTML   浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。xml不支持(正是不支持xml所以才不是标准DOM)

 

appendChild()  为给定元素增加一个子节点：var newreference = element.appendChild(newChild)   给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。方法的返回值是一个指向新增子节点的引用指针。该方法通常与 createElement() createTextNode() 配合使用新节点，可以被追加给文档中的任何一个元素。

 

createTextNode()  创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。var textNode = document.createTextNode(text);方法只有一个参数：新建文本节点所包含的文本字符串方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3。新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性

 

insertBefore()  把一个给定节点插入到一个给定元素节点的给定子节点的前面。var reference =  element.insertBefore(newNode,targetNode)。节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面。节点 targetNode 必须是 element 元素的一个子节点。该方法通常与 createElement() 和 createTextNode() 配合使用

 

removeChild()  从一个给定元素里删除一个子节点，var reference = element.removeChild(node);返回值是一个指向已被删除的子节点的引用指针。某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。如果想删除某个节点，但不知道它的父节点是哪一个，parentNode 属性可以帮忙。

 

childNodes(api中是集合的属性)  返回一个数组，这个数组由给定元素节点的子节点构成：var nodeList = node.childNodes。文本节点和属性节点都不可能再包含任何子节点，所以它们的 childNodes 属性永远会返回一个空数组。如果想知道某个元素有没有子节点，可以用 hasChildNodes 方法。如果想知道某个元素有多少个子节点，可以用 childNodes 数组的 length 属性。childNodes 属性是一个只读属性。

 

firstChild  该属性返回一个给定元素节点的第一个子节点，返回这个节点对象的指针。var reference = node.firstChild。文本节点和属性节点都不可能包含任何子节点，所以它们的 firstChild 属性永远会返回 null。某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点，即：var reference = node.childNodes[0]。firstChild 属性是一个只读属性。

lastChild  对应 firstChild 的一个属性。

nextSibling 获取对此对象的下一个兄弟对象的引用。

previousSibling 返回一个给定节点的上一个兄弟节点

 

parentNode  返回一个给定节点的父节点。parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。document 节点的没有父节点。

 

 

 

01 XML简介

XML 指可扩展标记语言

XML 是一种标记语言，很类似 HTML 

XML和HTML是标准通用标记语言（Standard Generalized Markup Language,SGML）的衍生语言

XML 的设计宗旨是传输数据，而非显示数据 

XML 标签没有被预定义

使用约束的XML文档设计具有自我描述性。 

XML 是 W3C 的推荐标准

 

02 XML在企业中应用

XML有如下应用：

1.存储数据，即在没有数据库的情况下，是一个很好的替代品；

如果在有数据库的情况下，还是用数据库

2.传输数据，即服务器以XML的形式向android发送数据

3.软件配置，即通用配置XML文件，通知应用程序如何处理业务

但今天学的是如何书写XML文件

 

03 XML文档的树形结构

如果一个XML书写的是语法正确的，它必须加载到内存后，

形成一个倒状的树结构

 

 

一个XML文件分为如下六部分内容：

文档声明 

元素

属性

注释  

CDATA区 、特殊字符 

处理指令（processing instruction） 

 

声明：XML文件 = XML文档

04 XML语法－文档声明

作用：在编写XML文档时，需要先使用文档声明，声明XML文档的类型。

 

就是xml文件的第一行代码，即

<?xml version="1.0" encoding="UTF-8"?>

 

version="1.0"表示让浏览器用xml1.0版本的解析器来解析

 

encodding="UTF-8"表示保存时用UTF-8编码，且解析器用UTF-8来解析

 

<?xml version="1.0" encoding="GB2312"  standalone="yes" ?>

standalone="yes"表示该xml是否只是一个单独的文件，没有其它文件引用或约束，yes表示独立，no表示引用其它的文件，现在都不用了。

 

这三个属性，重点掌握version和encoding

初学者要注意：

1.没有写引号：<?xml version=1.0 ?>

2.输入内容中有中文： <?xml version=“1.0”　?>  //中文空格

3.编码错误，记事本设置编码UTF-8，与encoding不相同。如果你使用记事本编辑XML，要确保保存文本的编码与encoding="UTF-8"相同。

 

 

05 XML语法－元素

XML中的元素，就是标签，标签通常用开始和结构组成，中间是标签体，如果没有标签体的话，该标签叫空标签，如果如下书写：<a></a>或<a/>

 

一个标签中也可以嵌套若干子标签。但所有标签必须合理的嵌套，绝对不允许交叉嵌套 ，例如：

<a>welcome to <b>www.baidu.com</a></b>同样的需求，写出来，可能效果不一样，因为XML与HTML相同会把空白字符看作有效的字符对待

 

格式良好的XML文档必须有且仅有一个根标签，其它标签都是这个根标签的子孙标签。 

 

对于XML标签中出现的所有空格和换行，XML解析程序都会当作标签内容进行处理。例如：下面两段内容的意义是不一样的。

第一段：

 

<网址>www.baidu.com</网址>

第二段：

 

<网址>

www.baidu.com

</网址>

由于在XML中，空格和换行都作为原始内容被处理，所以，在编写XML文件时，使用换行和缩进等方式来让原文件中的内容清晰可读的“良好”书写习惯可能要被迫改变。

 

命名规则：

一个XML元素可以包含字母、数字以及其它   一些可见字符，但要遵守下面的一些规范：

区分大小写，例如，大<P>和小<p>是两个不同的标记。

不能以数字或"_" (下划线)开头。

不能以xml(或XML、或Xml 等)开头。

不能包含空格。

名称中间不能包含冒号（:）

 

06 XML语法－属性

属性开始标签中，用单引或双引定界

一个标签可以有多个属性，每个属性都有它自己的名称和取值，例如：

<input type=“text”>

属性值一定要用双引号（"）或单引号（'）引起来

定义属性也要遵循与标签相同的命名规范 

 

07 XML语法-注释

注释是给程序员看，XML的解析器会原样输出

注释不能嵌套

<!--大段注释

……

<!--局部注释-->

……

-->  

XML第一句话是声明，声明前不能有注释

注意：

1_写100行java代码，有30%左右的注释

2_将我们学过的java,html，css,xml技术所有注释，统一书出来

java有三种：

1_单行注释：//

2_多行注释：/* */

3_文档注释：/**   */

 

 

08 XML语法-CDATA区或段

ChacterDATA是给XML解析器看，XML的解析器会做调整后原样输出CDATA区中的内容，对于CDATA区域内的内容，XML解析程序不会处理，而是直接原封不动的输出，但空白符会压缩处理。

语法：

<![CDATA[

select id,name,pass from students where age<22;

]]>

如果将age<22放在CDATA区之外，那么XML解析器会将<22看作是标签是一个组成部份，

会报错，但我的本意是小于号，解决方案有二个：

1_将将它放CDATA区中，那么XML解析器会原样解析其内容

 

 

09 XML语法-转义字符

和上面一样，是第2种解析方案，用转义符

select id,name,pass from students where age<22;

转义字符功能有限，它是有对常见的特殊符号转义

 

 

10 XML语法-处理指令

处理指令，简称PI （processing instruction）。处理指令用来指挥XML解析引擎如何解析XML文档内容。处理指令必须以“<?”作为开头，以“?>”作为结尾，XML声明语句就是最常见的一种处理指令。

用CSS解析XML标签中的内容，如果你要用这个功能，标签就不

要用中文，通常处理指令在XML声明之下，根标签之前

建议：

1_开发工具不能放在中文或空格符的目录下

2_Tomcat这种WEB服务器的目录，最好放在某个盘的根目录下，例如：E:/,

  不能含有中文

3_在开发工具中创建的工程名，尽量用英文，不要用中文和一些特殊符号，例如：&

 

 

例如，在XML文档中可以使用xml-stylesheet指令，通知XML解析引擎，应用css文件显示xml文档内容。

 

 

 

 

 

11 DTD简介

DTD(Document Type Definition)，全称为文档类型定义。

DTD文件应使用UTF-8或Unicode

如果没有约束文件的话，一个需求，可以写多种不同的XML文件，这就要写多个Java程序来解析。如果能有一个XML文件，那么我们只需要书写一个Java程序就行了，为了达到这个目的，我们需要为XML文件量身定做一个约束文件，让XML符合这些

约束文件的规则

 

 

12 会使用JavaScript验证XML和DTD文件

XML和DTD关系有三种方式：

1_使用内部DTD，即XML和DTD在同一个XML文件中

格式

<!DOCTYPE  文档根结点  […具体规范内容…]>

 

2_使用外部本地DTD

外部DTD：引用的文件在本地

格式：<!DOCTYPE 文档根结点 SYSTEM "DTD文件的URL">

 

 

3_使用外部公共DTD

公共DTD：

引用的文件是一个公共的文件

格式：

<!DOCTYPE 文档根结点 PUBLIC "DTD名称" "DTD文件的URL">

 

 

13 XML关联内部DTD

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE bookstore [

<!ELEMENT  bookstore  (book)> 

<!ELEMENT  book       (title,author,price)>

<!ELEMENT    title (#PCDATA)>

<!ELEMENT    author         (#PCDATA)>

<!ELEMENT   price      (#PCDATA)>

]>

 

 

14 XML关联外部DTD

XML符不符合语言，只需要将XML拖入浏览器运行即可，如果能原样输出

表示XML语言正确

<!DOCTYPE bookstore SYSTEM " 本地DTD文件的路径">

这样做XML和DTD可以分离

 

合法的XML：有语法正确的XML,如果浏览器正确显示xml的内容，就表示XML合法

有效的XML：不光XML语法正确，且符合DTD的约束规则，用JS去验让，即validateXmlAndDtd.html

 

合法的XML一定是有效的XML吗？错，因为合法不一定符合规则，别人读不懂。

有效的XML一定是合法的XML吗？对

 

实际：

1_初级软件工程员：只写XML，不写DTD

2_中级高级软件工程员：以写DTD为中心，兼写XML

 

 

 

15 XML关联公共DTD

如果一个软件全世界都统一使用，例如：android，hibernate等等，

且我们必须编写xml文件，那么就必定会有dtd这种约束文件存在，

这样的约束文件也是全世界统一的，我们叫其公共dtd

<!DOCTYPE 

web-app 

PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 

"http://java.sun.com/dtd/web-app_2_3.dtd">

 

 

16 DTD语法-元素

<!ELEMENT bookstore (book)> 

表示bookstore元素下，只允许书写book元素

 

<!ELEMENT book (title,author,price)>

表示book元素下，必须依次书写title,author,price这三个子元素，顺序不能错

 

<!ELEMENT  price (#PCDATA)>

表示price元素中，只能书写可解析的文本字符串，不能再有其它子元素了

 

ANY表示元素中的内容不限,可以加上子元素，但加上的子元素必须被声明

EMPTY表示元素中不能书写内容

上述二个约束，不用加()

 

DTD一直定义到XML中的所有元素都定义完毕了才行

 

DTD中定义的<!ELEMENT顺序无关重要

XML中的标签顺序有关重要

 

 

17 DTD语法-属性

因为属性是定义在元素的上面

语法：

<!ATTLIST 元素名

          属性名 属性类型 属性的约束情况

          属性名 属性类型 属性的约束情况>

 

属性类型分四种：

ID：表示唯一的字符串，以字母开头

IDREF：表示这个唯一的值，要与另一个ID类型的属性值相同

(枚举值)：表示取值只能是枚举中的任何一个

CDATA：表示属性值是字符串类型

 

 

属性的约束情况分四种：

#REQUIRED：表示该属性必写

#IMPLIED：表示该属性可写可不写

#FIXED "JavaEE"：表示该属性可写可不写，如果写的话，一定要叫JavaEE，大小写敏感

"缺省值"：表示该属性可写可不写，如果不写的话，就用默认值，如果写的话，就用实际值替代默认值

 

 

 

18 DTD语法-实体

实体是变量，用于引用普通文本或特殊字符的快捷方式的变量，就是用一个变量去替代一个特殊的字符串。

语法：

实体分为内部实体和外部实体

内部实体分为引用实体和参数实体

 

内部实体

引用实体在DTD中定义，在XML中使用

<!ENTITY 实体名 "一个字符串">

 &实体名;

<!ENTITY copyright “I am a programmer"> 

……

©right;

 

参数实体在DTD中定义，在DTD中使用

<!ENTITY % 实体名 "一个字符串">

 %实体名;

举例：

<!ENTITY  % TAG_NAMES   "姓名 | EMAIL | 电话 | 地址">

<!ELEMENT  个人信息     (%TAG_NAMES; | 生日)>

<!ELEMENT  客户信息     (%TAG_NAMES; | 公司名)>

 

外部实体：

<!ENTITY  实体名 SYSTEM “一个字符串文件名”>

 

 

 

Day04 重点代码

 

动态创建div节点，div节点包含文本节点与属性节点，把div节点连接到body节点上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

  <body>

   <script type="text/javascript">  

   //创建<div>节点，创建"哈哈"文本节点，添加到<body>节点中

//元素节点

var divElement = document.createElement("div");   

//文本节点

var textElement = document.createTextNode("要相信自己");

//属性节点

divElement.setAttribute("id","2015");

//将文本节点添加到元素节点中

divElement.appendChild(textElement);    

   //将div元素节点添加到body元素节点后

   document.body.appendChild(divElement);

  

  </script>

  </body>

</html>

 

 

 

 

 

 

删除Select标签下的指定option节点

  <body>

 

<select id="city" size="6" style="width:100px">

<option>湖南</option>

<option>湖北</option>

<option>广东</option>

<option>广西</option>

<option>山东</option>

<option>山西</option>

</select>

   <script type="text/javascript">

   //双击删除选中的元素

 

  //定位select节点

  document.getElementById("city").ondblclick = function(){

  //获取双击选中的option节点,this表示select节点

  var optionElement = this[this.selectedIndex]

  //直接父节点删除直接子节点

  //this.removeChild(optionElement);

  optionElement.parentNode.removeChild(optionElement);

  }  

  </script>

  </body>

 

 

 

 

演示window对象的showModalDialog方法，非模式方法自己换掉方法名就行了

 

模式：打开该窗体的父窗体不能操作，包括点击等

非模式：打开该窗体的父窗体能继续操作，报货打开多个这种窗体，与模式的表现相反。

 

本例子分开两个HTML页面显示，一个页面打开模式窗体，选择后，把模式窗体的内容显示到主窗体。

 

主窗体代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

用户名：<input id="usernameID" type="text" readonly/>

<input id="buttonID" type="button" value="选择输入" />

 

<script type="text/javascript">

//单击"选择输入"按钮，弹出对话框以供选择输入

document.getElementById("buttonID").onclick = function(){

//以模式方式打开窗口，在窗口中显示16号页面的内容

var sURL = "16_showModalDialog2.html";

//将15号页面的window对象传给16号页面

var vArguments = window;

var sFeatures = "dialogHeight:150px;dialogWidth:70px";

window.showModalDialog(sURL,vArguments,sFeatures);//模式

}

</script>

 

</body>

</html>

 

模式窗体代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

<table border="1" align="center">

<tr>

<th>

操作

</th>

<th>

用户名

</th>

</tr>

<tr><td><input type="button" value="选择输入" onclick="selectInput(this)" /></td><td>张三</td></tr>

<tr><td><input type="button" value="选择输入" onclick="selectInput(this)" /></td><td>李四</td></tr>

<tr><td><input type="button" value="选择输入" onclick="selectInput(this)" /></td><td>王五</td></tr>

</table>

<script type="text/javascript">

   //单击"选择输入"按钮后，会将对应的值显示在父窗口文本框中

   function selectInput(inputElement){

   //获取用户名

   var username = inputElement.parentNode.nextSibling.innerHTML;

   //接收15号页面传过来的参数，这里的window是16号页面的window，但返回值是15号页面的window

   var window15 = window.dialogArguments;

   //将用户名设置到15号页面的姓名文本框中

   window15.document.getElementById("usernameID").value = username;

   }

   </script>

 

</body>

</html>

 

XML部分代码：

演示CDATA用法：

<![CDATA[

……

]]>

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

<!-- 以下是一本图书的信息 -->

<book id="it2015">

<title>JavaWeb基础</title>

</book>

<book>

<![CDATA[

<id>it2016</id>

<title>JavaWeb基础</title>

age < 22

  ]]>

<![CDATA[

select id,name,pass from students where age<22;

  ]]> 

  select id,name,pass from students where age<22;  

</book>

</bookstore>

 

为XML加上样式进行显示，虽然不是XML主要功能，但也说明XML也可以进行样式处理

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="../css/itcast.css"?>

<root>

<span>张三</span>

<span>李四</span>

<span>王五</span>

</root>

 

样式文件代码：

span{

color:red;

font-size:111px

}

 

内部DTD:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE bookstore [

<!ELEMENT bookstore (book+)>

<!ELEMENT book (title,author,price,publish)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<!ELEMENT publish ANY>

<!ELEMENT a     EMPTY>

]>

<bookstore>

<book>

<title>JavaWeb</title>

<author>哈哈</author>

<price>100</price>

<publish></publish>

</book>

<book>

<title>JavaWeb</title>

<author>哈哈</author>

<price>100</price>

<publish><a></a></publish>

</book>

</bookstore>

 

 

外部DTD:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE bookstore SYSTEM "../dtd/book.dtd">

<bookstore>

<book>

<title>JavaWeb</title>

<author>哈哈</author>

<price>100</price>

</book>

<book>

<title>JavaWeb</title>

<author>哈哈</author>

<publish>清华大学出版社</publish>

</book>

</bookstore>

 

DTD文件内容：

<!ELEMENT bookstore  (book+)>

<!ELEMENT book (title,author,(price|publish))>

<!ELEMENT   title (#PCDATA)>

<!ELEMENT   author (#PCDATA)>

<!ELEMENT   price (#PCDATA)>

<!ELEMENT   publish (#PCDATA)>

 

DTD属性的例子：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE bookstore [

<!ELEMENT  bookstore  (book)>

<!ELEMENT  book (title)>

<!ELEMENT   title (#PCDATA)>

<!ATTLIST book

id ID #REQUIRED

isbn  IDREF #IMPLIED

catelog CDATA #FIXED "JavaEE"

location (北京|上海|深圳|广州) "广州">

]>

<bookstore>

<book id="it2015" isbn="it2015" catelog="JavaEE">

<title>JavaWeb</title>

</book>

</bookstore>