JavaScript 编程 笔记
10月20日
JavaScript：
1 表单的检测
2 AJAX操作----网页中的异步传输机制----DOM（文档对象模型）
3 网页的特效
运行机制：
与html一样，从服务器，传输客户端后，由浏览器解释执行
--------- JavaScript一个客户端脚本技术
xhtml+div+css+ajax+jsp || php || asp
PHP---LAMP---Linux,Apache,Mysql,PHP(Perl,python)
胖客户端(C/S)
瘦客户端(B/S)---Browser/Server
富客户端(Rich Client---AJAX)
发展：
由Netspace(网景)参考java语法实现的
以浏览器为生
JavaScript基于对象
new,this
是一个弱性语言---语法相对来说是比较宽松的
嵌入到html || xhtml中的
通过：
<script type=”text/javascript”>
</script>
或
<script language=”javascript”>
</script>
由于浏览器默认的脚本为JavaScript，所以可以简写：
<script>
</script>
MS—VBScript
第一个JacaScript：
1 新建动态项目----FirstJavaScript
2 新建FirstJavaScript.html
Javascript导入：
1 WebContent/js
2 js/first.js
3 WebContent/improtjs.html
<script src=”xxx.js”></script>
JavaScript语法：
1 变量
1.1数值
1.2 布尔型
1.3 字符串
1.4 null
js/var.js
var.html
2 循环，分支
js/99list.js
99list.html
作业：
1 html示例代码 示例查看，解读，移植
2 复习javascript,现在的web发展，javascrip运行机制，javascrip的变量声明，使用
10月21日
ifelse.html
switch.html
1、Date() //javascript 内置对象获得客户端时间
2、JavaScript的调试：
firefox：Tools----Error Console(错误控制台)
3、JavaScript函数function
function.html
java:
public void add(int a,int b){
int sum = a+b;
System.out.println(sum);
}
javaScript:
function add(a,b){
sum = a+b;
document.write(sum+"<br />");
}
JavaScript中的数组：
Java：
int a[] = {1,2,3,4,5,6}; //静态分配
int a[] = new int[1024]; //动态分配
a[0] = 22;
a[1] = 33;
JavaScript：
var aName = new Array();
aName[0] = "张三";
aName[1] = 20;
var a = new Array(2,4,6,8,10);
ArrayTest.html
JavaScript为数组提供的方法：
reverse() //将数组中的内容反转
reverse.html
concat() //连接数组
concat.html
join() //将指定的内容加入到数组中
join.html
示例：
var myArr = new Array(3,4,5,6,7);
var tmp = myArr.join(“*”);
结果：tmp=3*4*5*6*
pop() //移除数组中的最后一个元素，并返回该元素
示例：
var myArr = new Array(2,3,4,5);
var myPop = myArr.pop();
document.write(myPop + “<br />” + myArr);
结果：myPop=5, myArr=2,3,4
shift() //方法移除数组中的第一个元素，并返回该元素
slice() //分割数组
示例：
var myArr = new Array(2,3,4,5);
var tmp = myArr.slice(0,3);
document.write(tmp + “<br />”);
slice.html
JavaScript中的字符串String:
var str = “aaa”;
var str1 = new String(“aaaa”);
String常用的方法：
length //变量字符串的长度
document.write(str.length);
StringTest.html
indexOf(“xx”); //返回参数中的索引，如果不存在，返回-1
Emailvalidate.html
10月23日
1 JavaScript基本语法:
变量,分支,循环
2 数组
3 函数
4 字符串
5 内置对象
1 Date( )
tt.html
escape() //中文字的处理
unescape()
eval() //乘法
parseInt() //取整数
Math.max(2,3,4,5,6,7);
random.html
picture.html
在JavaScript中自定义数据类型------自定义对象
自定义对象：
第一种方法：
var student = new Object( );
student.name = “Jack”;
student.age = 25;
student.sex = “man”;
第二种方法：
var student = {name：”Jack”,
sex：”male”,
age：20
};
custom.html
DOM处理----文档对象模型-----重点
在实际开发中：对网页的内容进行取值，动态处理
文档树：
在树中的每一个标签（组件），被视为一个节点（node)
在实际开发中：对网页的节点进行取值，动态处理
示例：
<html>
<body>
<input type=”text” name=”user” id=”user” />
</body>
</html>
文档树模型：-----节点
html
---àbody
-----àinput(name=user)
简介
document：代表当前页面
window：代表当前的浏览器
frames[]：框架
history：历史记录
location：当前位置
navigator：描述浏览器基本信息
DOM操作：
1 访问节点 //重点
document.getElementById(“xxx”);
示例：
<input type=”text” id=”username” name=”username” />
document.getElementById(“username”); //返回值为node类型
getElementById.html
myNode.nodeName 返回标签的名字
myNode.value返回客户输入的值
2 添加节点 //了解
appendChild(Element) //添加节点
appendChild.html
3 删除节点：
removeChild(string);
4 插入节点：
insertBefore(string);
5 创建属性：
createAttribute(name);
setAttribute(“attr”,value);
attr.html
10月24日
1 javascript中的事件处理：
onclick：
ondblclick //双击
dblclick.html
onChange //当输入内容发生变化时，光标移出当前区域
onChange.html
onMouseOver //鼠标在所在区域上方
onMouseOut
Mouse.html
onSelect //当选择内容时
onSelect.html
onFocus //当获得焦点时（虚线边框）
onFocus.html
onLoad //当加载时
onLoad.html
OnUnLoad //卸载时
OnUnLoad.html
onkeyup //当键盘按下，释放时
onkeyup.html
2 window的控制：
window中的对话框：
confirm(“xxx”)
comfirm.html
openwindow.html
window.open( )
windowname.close( ) //关闭窗口，javascript只可以关闭自己打开的窗口
location //定位
location.html
javascript中掌握的内容：
1 javascript基本语法
2 数组的控制
3 字符串控制
4 表单验证
5 函数，编写，调用
6 内置对象
String, Boolean, Number, Math, Array, Object, function, RegExp
7 自定义对象
8 DOM操作
9 Window对象
10 事件驱动
11 正则表达式 //了解
3正则表达式用来从某一段字符串匹配所需要的字符。一个正则表达式是由正规字符和元字符构成的，元字符联合构成了一个文本模式的程序性描述
例：Email验证，密码验证….
常用方法：
1 RegExp对象
2 exec方法
RegExp.html
exec.html
语法规则：
/ 最大匹配数目
\ 转义字符，按照字面值对待元字符
| 匹配任何一个，如cat | dog 匹配 cat或dog
( ) 把字符，元字符和子表达式合成组
[ ] 建立一个字符类，该类将匹配括号内所包含的任意一个字符或表达式
{ } 为前导表达式建立一个最小匹配数目
^ 匹配一行的起点：在一个字符类中，表示否定字符类
$ 匹配一行的结束点
* 匹配0个或多个前导表达式
？ 匹配0个或1个前导表达式
+ 匹配0个或多个前导表达式
. 匹配任意一个前导表达式
pattern_demo.html
^出现在中括号中，代表取反
i忽略大小写比较
练习：
判断
<input type=”text” name=”phone” />中用户的输入必须为数字
isphone.html
思路：
1 可以取得phone中的value
取值方法：
方法一：document.getElenmentById( )
方法二：document.xxxForm.name.value
2 将取得的value与正则表达式进行对比
作业：
判断用户的输入必须为南通电话号码
0513-12345678
1 判断区号
2 有-
3 后边必须为数字，并且为8位（8）
number.html
2 合理的判断用户的E-mail地址：
[email protected]
1 @前边为字母，数字
2 @必须出现
3 @后边为字母，数字
4 . .符号的出现
5 . .符号后边可以为字母
www.extjs.com
email.html
10月25日
aptana_update_009905.zip
eclipse插件
ext-2.2.zip
Ext库简介（Ext JavaScript Library）：
是一个客户端的，专注于Web应用程序的一套JavaScript框架
优势：
集成了各种优秀的Ajax框架，具有丰富且华丽的UI组件库
ICEFace, Dojo
缺点：
库文件比较大，造成用户在访问时，时间较长，下载ext支持库---Ext
注：官方提供一个功能，程序员可以按照需求重新编译ext支持库
如何使用Ext?
1 导入Ext库文件：
1.1 ext-all.css
1.2 yui-utilities.js
1.3 ext-yui-adapter.js
1.4 ext-all.js
1.5 myExt.js
目录结构：
WebContent
----lib
----ext
节点获得：
JS: var myDiv= document.getElementById(‘myDiv’);
Ext:
Var myDiv = Ext.get(‘myDiv’)
优势：缓存处理（访问同一节点时提高效率）
new_file.html
main.html
节点选择（得到节点）
Ext.select(‘p’);
示例：
//每段高显示
Ext.select(‘p’).highlight( );
select.html
事件响应
Element.on(event, function)
示例：
Ext.get(‘myButton’).on(‘click), function( ){
Alert(“你点击了我”);
}
);
event.html
MessageBox.html
11月17日
中级：
1 MySQL数据库
1.1 SQL
1.2 这种数据库的方式----DBA
2 JDBC：
1 数据库的连接，驱动的配置
2 传入SQL语句：增，删，改，查
3 处理结果集
4 JDBC的优化
4.1 SQL语句的预处理
4.2 存储过程的调用方式
4.3 连接池（DBCP-----www.apache.org）
5 DAO设计模试
为数据库的编程实现分层：
第一层：数据持久层 （Hibernate---DAO , EJB3.0）
第二层：业务逻辑层 (Spring , EJB3.0)
第三层：表现层（Swing,jsp）(Struts,JSF)
SSH
项目实践：
1 学生成绩管理系统
2 超市管理系统------演示
6 HTML || XHTML
7 CSS-----DIV+CSS
移动公司的业务计费系统进行了重构
网站发布系统（前台：普通用户使用，后台：管理员）
8 JavaScript-----DOM
9 AJAX框架---Ext2.0-----社团活动
第二阶段余下的内容：
1 XML
2 jsp
3 servlet
4 网站开发模式
项目
第三阶段：
1 Struts1.x 2.x SSH2 , JSF
2 Linux
3 设计模式
4 AJAX
5 Hibernate
6 Spring
7 EJB3.0
8 JUNIT , ant , maven , SubVersion , UML
JUNIT----单元测试
ant , maven2-----à 项目管理-------www.apache.org
SubVersion || CVS --à 版本控制：
1 Team拿到一个项目或模块
XP-------极限编程---RUP
UML----统一建模语言：
类图，用例图，序列图
XML
什么是XML语言？
XML称为可扩展标记语言(Extensible Markup Language)，是一种可以用来创建自己的标记的标记语言。它由万维网（W3C）创建，用来克服HTML即超文本标记语言（Hypertext Markup Language），它是所有网页的基础的局限
XML的特点：
1 XML并不是标记语言，它是用来创造标记的语言
2 XML并不是HTML的替代产品，XML不是HTML的升级，它只是HTML的补充
3 不能用XML来直接写网页，即便是包含了XML数据，依然要转换成HTML格式才能在浏览器上显示
XML的实际应用：
1 数据交换
什么是数据交换？
为什么数据交换？
1 传统数据：JDBC----数据库-----得到数据
XML数据：JDBC----数据库---得到数据----处理为XML------普通用户读取XML
1.1可以有效的解决数据库的访问的瓶颈问题
1.2 数据共享---（RSS）
总结：XML通过自定义标签存储数据
2 语法严格-------配置文件------WEB.xml
XML的由来：XML来源于SGML，一种比HTML更早的标记语言标准
XML语法格式：
1 所有的标记都必须要有一个相应的结束标记；
2 所有的XML标记都必须合理的嵌套—要有根元素包含；
3 所有XML标都区分大小写；
4 所有标记的属性必须用“”括起来；
5 名字中可以包含字母，数字以及其它字母；
6 名字不能以数字或“-”（下划线）开头；
7 名字不能以字母xml(或XML或Xml….)开头；
8 名字中不能包含空格
eclipse:
1 新建一个动态Web 项目
2 在WebContent/employees.xml
练习：
students.xml在里面声明2—3个学生
XML的文档类型：
1 结构良好的文档：这类文档符合XML基本规则（属性必须放在引号中，标签必须正确嵌套等等）；
2 有效文档：这些结构良好的文档同时还符合文档类型定义（DTD）或XML Schema所定义的规则；
Schema是DTD的升级版
3 无效文档：所有其他文档
XSL介绍：
XSL全称是Extensible Stylesheet Language（可扩展样式语言），是将来设计XML文档显示样式的主要文件类型。它本身也是基于XML语言的，使用XSL，可以灵活的设置文档显示样式，所以XSL类似于CSS
XSL特点：
XSL包含三种语言：
XSLT – a language for transforming XML documents //翻译
Xpath –a language for navigating XML documents //转换路径
XSL-FO - a language for formatting XML documents //格式化输出
结构图：
SGML
|
XML HTML
|
XSL
|
XSLT XSL-FO(formatting objects)-----CSS
|
XSLT Xpath
first.xml
first.xsl
XSLT<XSL Transformations)语法示例
后缀：.xml || .xslt
1 <?xml version=”1.0”?>
2<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
XSLT语法分类
1 匹配（模板）模式：
<xsl::template match=”/”>
//开始定义文档模板：如html, “/”代表根元素
2 选择模式：
1 <xsl:for-each select=” ” > //循环选择元素
2 <xsl:value-of select=” “ > //取值
3 <xsl:choose > //选择条件
XSL功能：
XSL包含3部分：
1 转换XML文档
2 定义XML部分和模式
3 格式化XML文档
编写xsl的步骤（用于转换xml---html）：
1 新建xml后缀名为：.xsl || .xslt
2 书写xslt的根元素：
<xsl:stylesheet> </xsl:stylesheet>
3定义转换模板：
3.1 <xsl:template match=”/”>XPath
</xsl:template>
3.2 选择匹配
4 在需要被转换的xml中导入xxx.xsl
作业：
Employee.xml
Employee..xsl
11月19日
library.xml
library.xsl
或
BookStore.xml
BookStore.xsl
xml+xsl
理论:
XML的应用领域:
1 数据交换
2 配置文件
XML存储数据的文本文件
之前:
jsp---数据库----html
html存储着大量的数据
现在:
jsp----数据库-----xml---html
实现了:数据和页面的分离
如果查xml---à使用xsl进行xml的转换
Xpath比较符号:
符号含义
and 逻辑与
or 逻辑或
not( ) 非
<* 小于
<=* 小于或等于
>* 大于
>=* 大于或等于
l集运算：返回两个节点集的联合
if.xml
if.xsl
XSLT语法分类：
测试模式：
1、<xsl:if test="条件">
2、<xsl:when>//通常与<xsl:choose>
3、<xsl:otherwise>//相当于when的else，通常与when同时出现。
select关键字是XPath表达式。
xml+xsl+css的整合：
在xsl的html模板中加入：
<link rel="stylesheet" href="css/main.css" type="text/css" />
实现有效的xml：
1、xml使用DTD(文档类型定义)
2、xml使用Schema
DTD是一种保证XML文档格式正确的有效方法，可以比较XML文档和DTD文件来看文档是否符合规范，元素和标签使用是否
正确。
一个DTD文档包含：
1、元素的定义规则；
2、元素见关系的定义规则；
3、元素可使用的属性；
4、可使用的实体或符号规则。
DTD文件也是一个ASCII的文本文件，后缀名为.dtd。例如：myfile.dtd。
DTD优点：
它满足了网络共享和数据交互，使用DTD最大的好处在于DTD文件的共享。
DTD语法符号：
+：最少一个<!ELEMENT element(A+)>
*：零个或多个
?：零个或一个
|：元素之一<!ELEMENT element(A|B|C)>
EMPTY：不包含任何内容
ANY：任何元素
#PCDATA(parsed character data)：元素可能包含经过语法分析的字符数据
<!ENTITY element "entity regerence">//引用
示例：<!ENTITY hel "hello World">
使用&hel
ATTLIST：用于属性控制。语法如下，
<!ATTLIST element att1 ID #IMPLIED>
元素 属性名 类型 条件
类型：ID唯一值，CDATA(character data)任何字符串
条件：#IMPLIED:可选属性
#FIXED：固定属性
#REQUIRED：必须属性
XML Schema：
XML Schema是基于XML的DTDtidai者。
XML Schema描述XML文档的结构。
XML Schema语言也称作XML Schema定义的（SML Schema Definition，XSD）。
今天回顾：
1、xml+xsl的bookStore的实践
2、xslt的测试模式。了解
3、DTD可以写简单的DTD
4、了解Schema
作业：
复习html中的DOM
JavaScript对DOM的操作
明天：JavaScript+xml DOM
Java+xml DOM
11月20日
1 JavaScript对于XML DOM的操作：
问题：
1.1 XML中无法嵌入JavaScript
解决：
loadXMLDoc( ) 加载XML到JavaScript中
问题：
1.2 XML中没有ID固定属性
问题：
解决：
getElementsByTagName( )获得节点名
问题：
1.3 取值：
childNodes[0].nodeValue
新建项目：
JavaScriptXMLDOM
WebContent/Employee.xml
readXml.html
readXml.html中加<script>粘贴loadXMLDoc.js </script>
2 Java对于XML DOM的操作：
XML对应Java的接口
Java API for XML Processing(JAXP)
(javax.xml.parsers)
Simple API for XML(SAX), Version 2.0(org.xml.sax)
JDOM一种简单Java API
注：（DOM， SAX和JDOM）定义了如何访问与表示XML文档的内容，JAXP包含创建解析器对象的类，要创建DOM或SAX解析器，您需要使用JAXP。JDOM在后台也是将JAXP封装处理。一一各有所长
XML解析器（parser）
XML解析器具有读取XML文档并分析XML结构的功能
使用解析器步骤：
1 创建一个解析器对象
2 使解析器指XML文档
3 处理结果
Java(JAXP||SAX)类库简介：
Javax.xml.parsers
DocumentBuilderFactory
创建DOM解析器的工厂API，使用这个工厂API，您的代码不需要知道实现DOM的具体类。如果发现更好的DOM解析器，不必修改或重新编译您的代码就可以使用新的解析器。、
DocumentBuilder
定义了从DOM解析器中获得DOM Document对象的API
SAXParserFactory
创建SAX解析器的工厂API和DocumentBuilderFactory类似，这个API使您不需要了解实现SAX解析器的类名
SAXParser
包装SAX XMLReader类的API。当XMLReader读取时生成SAX事件
新建项目：JAXP
src/Employee.xml
JAXPReadXML.java
JAXPReadXML的执行步骤：
1 初始化JAXP
2 解析xml并返回xml的Document
3 通过xml的Document打印所有的xml内容
使用JAXP创建新的XML：
src/JAXPCreateXML.java
粘贴createXML.java到src/JAXPCreateXML.java中，运行，在项目上F5，出来jaxp.xml，在里面Ctrl+Shift+f
作业:
尝试使用JDBC创建XML:
步骤:
1 建库
2 建表:Student
3 插入测试数据
4 Java项目
5 JDBC连接数据库
6 读出数据创建xml节点
7 将xml写入磁盘
明天：JDOM，DOM4j
11月21日
1 JDOM的使用：
1.1 配置JDOM的环境
解压：c:\mysql_jar\jdom-1.1.tar.gz
jdom-1.1\build\jdom.jar
配置eclipse与配置数据库驱动一样
新建项目：JDOM
src/JDOMReadXML.java
src/Employee.xml
src/JDOMCreateXML.java
2 DOM4J的使用：
2.1 配置JDOM的环境
解压：c:\mysql_jar\dom4j-1.6.1.tar.gz
练习：
使用DOM4J打印输出Employee.xml
新建项目：DOM4JReadXML
配置DOM4J环境
src/DOM4JReadXML.java
src/Employee.xml
src/ DOM4JCreateXML.java
作业；
使用DOM4J将Employee.xsl与Employee.xml进行转换，转换为：
WebContent/Employee.html
JavaScript：
1 表单的检测
2 AJAX操作----网页中的异步传输机制----DOM（文档对象模型）
3 网页的特效
运行机制：
与html一样，从服务器，传输客户端后，由浏览器解释执行
--------- JavaScript一个客户端脚本技术
xhtml+div+css+ajax+jsp || php || asp
PHP---LAMP---Linux,Apache,Mysql,PHP(Perl,python)
胖客户端(C/S)
瘦客户端(B/S)---Browser/Server
富客户端(Rich Client---AJAX)
发展：
由Netspace(网景)参考java语法实现的
以浏览器为生
JavaScript基于对象
new,this
是一个弱性语言---语法相对来说是比较宽松的
嵌入到html || xhtml中的
通过：
<script type=”text/javascript”>
</script>
或
<script language=”javascript”>
</script>
由于浏览器默认的脚本为JavaScript，所以可以简写：
<script>
</script>
MS—VBScript
第一个JacaScript：
1 新建动态项目----FirstJavaScript
2 新建FirstJavaScript.html
Javascript导入：
1 WebContent/js
2 js/first.js
3 WebContent/improtjs.html
<script src=”xxx.js”></script>
JavaScript语法：
1 变量
1.1数值
1.2 布尔型
1.3 字符串
1.4 null
js/var.js
var.html
2 循环，分支
js/99list.js
99list.html
作业：
1 html示例代码 示例查看，解读，移植
2 复习javascript,现在的web发展，javascrip运行机制，javascrip的变量声明，使用
10月21日
ifelse.html
switch.html
1、Date() //javascript 内置对象获得客户端时间
2、JavaScript的调试：
firefox：Tools----Error Console(错误控制台)
3、JavaScript函数function
function.html
java:
public void add(int a,int b){
int sum = a+b;
System.out.println(sum);
}
javaScript:
function add(a,b){
sum = a+b;
document.write(sum+"<br />");
}
JavaScript中的数组：
Java：
int a[] = {1,2,3,4,5,6}; //静态分配
int a[] = new int[1024]; //动态分配
a[0] = 22;
a[1] = 33;
JavaScript：
var aName = new Array();
aName[0] = "张三";
aName[1] = 20;
var a = new Array(2,4,6,8,10);
ArrayTest.html
JavaScript为数组提供的方法：
reverse() //将数组中的内容反转
reverse.html
concat() //连接数组
concat.html
join() //将指定的内容加入到数组中
join.html
示例：
var myArr = new Array(3,4,5,6,7);
var tmp = myArr.join(“*”);
结果：tmp=3*4*5*6*
pop() //移除数组中的最后一个元素，并返回该元素
示例：
var myArr = new Array(2,3,4,5);
var myPop = myArr.pop();
document.write(myPop + “<br />” + myArr);
结果：myPop=5, myArr=2,3,4
shift() //方法移除数组中的第一个元素，并返回该元素
slice() //分割数组
示例：
var myArr = new Array(2,3,4,5);
var tmp = myArr.slice(0,3);
document.write(tmp + “<br />”);
slice.html
JavaScript中的字符串String:
var str = “aaa”;
var str1 = new String(“aaaa”);
String常用的方法：
length //变量字符串的长度
document.write(str.length);
StringTest.html
indexOf(“xx”); //返回参数中的索引，如果不存在，返回-1
Emailvalidate.html
10月23日
1 JavaScript基本语法:
变量,分支,循环
2 数组
3 函数
4 字符串
5 内置对象
1 Date( )
tt.html
escape() //中文字的处理
unescape()
eval() //乘法
parseInt() //取整数
Math.max(2,3,4,5,6,7);
random.html
picture.html
在JavaScript中自定义数据类型------自定义对象
自定义对象：
第一种方法：
var student = new Object( );
student.name = “Jack”;
student.age = 25;
student.sex = “man”;
第二种方法：
var student = {name：”Jack”,
sex：”male”,
age：20
};
custom.html
DOM处理----文档对象模型-----重点
在实际开发中：对网页的内容进行取值，动态处理
文档树：
在树中的每一个标签（组件），被视为一个节点（node)
在实际开发中：对网页的节点进行取值，动态处理
示例：
<html>
<body>
<input type=”text” name=”user” id=”user” />
</body>
</html>
文档树模型：-----节点
html
---àbody
-----àinput(name=user)
简介
document：代表当前页面
window：代表当前的浏览器
frames[]：框架
history：历史记录
location：当前位置
navigator：描述浏览器基本信息
DOM操作：
1 访问节点 //重点
document.getElementById(“xxx”);
示例：
<input type=”text” id=”username” name=”username” />
document.getElementById(“username”); //返回值为node类型
getElementById.html
myNode.nodeName 返回标签的名字
myNode.value返回客户输入的值
2 添加节点 //了解
appendChild(Element) //添加节点
appendChild.html
3 删除节点：
removeChild(string);
4 插入节点：
insertBefore(string);
5 创建属性：
createAttribute(name);
setAttribute(“attr”,value);
attr.html
10月24日
1 javascript中的事件处理：
onclick：
ondblclick //双击
dblclick.html
onChange //当输入内容发生变化时，光标移出当前区域
onChange.html
onMouseOver //鼠标在所在区域上方
onMouseOut
Mouse.html
onSelect //当选择内容时
onSelect.html
onFocus //当获得焦点时（虚线边框）
onFocus.html
onLoad //当加载时
onLoad.html
OnUnLoad //卸载时
OnUnLoad.html
onkeyup //当键盘按下，释放时
onkeyup.html
2 window的控制：
window中的对话框：
confirm(“xxx”)
comfirm.html
openwindow.html
window.open( )
windowname.close( ) //关闭窗口，javascript只可以关闭自己打开的窗口
location //定位
location.html
javascript中掌握的内容：
1 javascript基本语法
2 数组的控制
3 字符串控制
4 表单验证
5 函数，编写，调用
6 内置对象
String, Boolean, Number, Math, Array, Object, function, RegExp
7 自定义对象
8 DOM操作
9 Window对象
10 事件驱动
11 正则表达式 //了解
3正则表达式用来从某一段字符串匹配所需要的字符。一个正则表达式是由正规字符和元字符构成的，元字符联合构成了一个文本模式的程序性描述
例：Email验证，密码验证….
常用方法：
1 RegExp对象
2 exec方法
RegExp.html
exec.html
语法规则：
/ 最大匹配数目
\ 转义字符，按照字面值对待元字符
| 匹配任何一个，如cat | dog 匹配 cat或dog
( ) 把字符，元字符和子表达式合成组
[ ] 建立一个字符类，该类将匹配括号内所包含的任意一个字符或表达式
{ } 为前导表达式建立一个最小匹配数目
^ 匹配一行的起点：在一个字符类中，表示否定字符类
$ 匹配一行的结束点
* 匹配0个或多个前导表达式
？ 匹配0个或1个前导表达式
+ 匹配0个或多个前导表达式
. 匹配任意一个前导表达式
pattern_demo.html
^出现在中括号中，代表取反
i忽略大小写比较
练习：
判断
<input type=”text” name=”phone” />中用户的输入必须为数字
isphone.html
思路：
1 可以取得phone中的value
取值方法：
方法一：document.getElenmentById( )
方法二：document.xxxForm.name.value
2 将取得的value与正则表达式进行对比
作业：
判断用户的输入必须为南通电话号码
0513-12345678
1 判断区号
2 有-
3 后边必须为数字，并且为8位（8）
number.html
2 合理的判断用户的E-mail地址：
[email protected]
1 @前边为字母，数字
2 @必须出现
3 @后边为字母，数字
4 . .符号的出现
5 . .符号后边可以为字母
www.extjs.com
email.html
10月25日
aptana_update_009905.zip
eclipse插件
ext-2.2.zip
Ext库简介（Ext JavaScript Library）：
是一个客户端的，专注于Web应用程序的一套JavaScript框架
优势：
集成了各种优秀的Ajax框架，具有丰富且华丽的UI组件库
ICEFace, Dojo
缺点：
库文件比较大，造成用户在访问时，时间较长，下载ext支持库---Ext
注：官方提供一个功能，程序员可以按照需求重新编译ext支持库
如何使用Ext?
1 导入Ext库文件：
1.1 ext-all.css
1.2 yui-utilities.js
1.3 ext-yui-adapter.js
1.4 ext-all.js
1.5 myExt.js
目录结构：
WebContent
----lib
----ext
节点获得：
JS: var myDiv= document.getElementById(‘myDiv’);
Ext:
Var myDiv = Ext.get(‘myDiv’)
优势：缓存处理（访问同一节点时提高效率）
new_file.html
main.html
节点选择（得到节点）
Ext.select(‘p’);
示例：
//每段高显示
Ext.select(‘p’).highlight( );
select.html
事件响应
Element.on(event, function)
示例：
Ext.get(‘myButton’).on(‘click), function( ){
Alert(“你点击了我”);
}
);
event.html
MessageBox.html
11月17日
中级：
1 MySQL数据库
1.1 SQL
1.2 这种数据库的方式----DBA
2 JDBC：
1 数据库的连接，驱动的配置
2 传入SQL语句：增，删，改，查
3 处理结果集
4 JDBC的优化
4.1 SQL语句的预处理
4.2 存储过程的调用方式
4.3 连接池（DBCP-----www.apache.org）
5 DAO设计模试
为数据库的编程实现分层：
第一层：数据持久层 （Hibernate---DAO , EJB3.0）
第二层：业务逻辑层 (Spring , EJB3.0)
第三层：表现层（Swing,jsp）(Struts,JSF)
SSH
项目实践：
1 学生成绩管理系统
2 超市管理系统------演示
6 HTML || XHTML
7 CSS-----DIV+CSS
移动公司的业务计费系统进行了重构
网站发布系统（前台：普通用户使用，后台：管理员）
8 JavaScript-----DOM
9 AJAX框架---Ext2.0-----社团活动
第二阶段余下的内容：
1 XML
2 jsp
3 servlet
4 网站开发模式
项目
第三阶段：
1 Struts1.x 2.x SSH2 , JSF
2 Linux
3 设计模式
4 AJAX
5 Hibernate
6 Spring
7 EJB3.0
8 JUNIT , ant , maven , SubVersion , UML
JUNIT----单元测试
ant , maven2-----à 项目管理-------www.apache.org
SubVersion || CVS --à 版本控制：
1 Team拿到一个项目或模块
XP-------极限编程---RUP
UML----统一建模语言：
类图，用例图，序列图
XML
什么是XML语言？
XML称为可扩展标记语言(Extensible Markup Language)，是一种可以用来创建自己的标记的标记语言。它由万维网（W3C）创建，用来克服HTML即超文本标记语言（Hypertext Markup Language），它是所有网页的基础的局限
XML的特点：
1 XML并不是标记语言，它是用来创造标记的语言
2 XML并不是HTML的替代产品，XML不是HTML的升级，它只是HTML的补充
3 不能用XML来直接写网页，即便是包含了XML数据，依然要转换成HTML格式才能在浏览器上显示
XML的实际应用：
1 数据交换
什么是数据交换？
为什么数据交换？
1 传统数据：JDBC----数据库-----得到数据
XML数据：JDBC----数据库---得到数据----处理为XML------普通用户读取XML
1.1可以有效的解决数据库的访问的瓶颈问题
1.2 数据共享---（RSS）
总结：XML通过自定义标签存储数据
2 语法严格-------配置文件------WEB.xml
XML的由来：XML来源于SGML，一种比HTML更早的标记语言标准
XML语法格式：
1 所有的标记都必须要有一个相应的结束标记；
2 所有的XML标记都必须合理的嵌套—要有根元素包含；
3 所有XML标都区分大小写；
4 所有标记的属性必须用“”括起来；
5 名字中可以包含字母，数字以及其它字母；
6 名字不能以数字或“-”（下划线）开头；
7 名字不能以字母xml(或XML或Xml….)开头；
8 名字中不能包含空格
eclipse:
1 新建一个动态Web 项目
2 在WebContent/employees.xml
练习：
students.xml在里面声明2—3个学生
XML的文档类型：
1 结构良好的文档：这类文档符合XML基本规则（属性必须放在引号中，标签必须正确嵌套等等）；
2 有效文档：这些结构良好的文档同时还符合文档类型定义（DTD）或XML Schema所定义的规则；
Schema是DTD的升级版
3 无效文档：所有其他文档
XSL介绍：
XSL全称是Extensible Stylesheet Language（可扩展样式语言），是将来设计XML文档显示样式的主要文件类型。它本身也是基于XML语言的，使用XSL，可以灵活的设置文档显示样式，所以XSL类似于CSS
XSL特点：
XSL包含三种语言：
XSLT – a language for transforming XML documents //翻译
Xpath –a language for navigating XML documents //转换路径
XSL-FO - a language for formatting XML documents //格式化输出
结构图：
SGML
|
XML HTML
|
XSL
|
XSLT XSL-FO(formatting objects)-----CSS
|
XSLT Xpath
first.xml
first.xsl
XSLT<XSL Transformations)语法示例
后缀：.xml || .xslt
1 <?xml version=”1.0”?>
2<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
XSLT语法分类
1 匹配（模板）模式：
<xsl::template match=”/”>
//开始定义文档模板：如html, “/”代表根元素
2 选择模式：
1 <xsl:for-each select=” ” > //循环选择元素
2 <xsl:value-of select=” “ > //取值
3 <xsl:choose > //选择条件
XSL功能：
XSL包含3部分：
1 转换XML文档
2 定义XML部分和模式
3 格式化XML文档
编写xsl的步骤（用于转换xml---html）：
1 新建xml后缀名为：.xsl || .xslt
2 书写xslt的根元素：
<xsl:stylesheet> </xsl:stylesheet>
3定义转换模板：
3.1 <xsl:template match=”/”>XPath
</xsl:template>
3.2 选择匹配
4 在需要被转换的xml中导入xxx.xsl
作业：
Employee.xml
Employee..xsl
11月19日
library.xml
library.xsl
或
BookStore.xml
BookStore.xsl
xml+xsl
理论:
XML的应用领域:
1 数据交换
2 配置文件
XML存储数据的文本文件
之前:
jsp---数据库----html
html存储着大量的数据
现在:
jsp----数据库-----xml---html
实现了:数据和页面的分离
如果查xml---à使用xsl进行xml的转换
Xpath比较符号:
符号含义
and 逻辑与
or 逻辑或
not( ) 非
<* 小于
<=* 小于或等于
>* 大于
>=* 大于或等于
l集运算：返回两个节点集的联合
if.xml
if.xsl
XSLT语法分类：
测试模式：
1、<xsl:if test="条件">
2、<xsl:when>//通常与<xsl:choose>
3、<xsl:otherwise>//相当于when的else，通常与when同时出现。
select关键字是XPath表达式。
xml+xsl+css的整合：
在xsl的html模板中加入：
<link rel="stylesheet" href="css/main.css" type="text/css" />
实现有效的xml：
1、xml使用DTD(文档类型定义)
2、xml使用Schema
DTD是一种保证XML文档格式正确的有效方法，可以比较XML文档和DTD文件来看文档是否符合规范，元素和标签使用是否
正确。
一个DTD文档包含：
1、元素的定义规则；
2、元素见关系的定义规则；
3、元素可使用的属性；
4、可使用的实体或符号规则。
DTD文件也是一个ASCII的文本文件，后缀名为.dtd。例如：myfile.dtd。
DTD优点：
它满足了网络共享和数据交互，使用DTD最大的好处在于DTD文件的共享。
DTD语法符号：
+：最少一个<!ELEMENT element(A+)>
*：零个或多个
?：零个或一个
|：元素之一<!ELEMENT element(A|B|C)>
EMPTY：不包含任何内容
ANY：任何元素
#PCDATA(parsed character data)：元素可能包含经过语法分析的字符数据
<!ENTITY element "entity regerence">//引用
示例：<!ENTITY hel "hello World">
使用&hel
ATTLIST：用于属性控制。语法如下，
<!ATTLIST element att1 ID #IMPLIED>
元素 属性名 类型 条件
类型：ID唯一值，CDATA(character data)任何字符串
条件：#IMPLIED:可选属性
#FIXED：固定属性
#REQUIRED：必须属性
XML Schema：
XML Schema是基于XML的DTDtidai者。
XML Schema描述XML文档的结构。
XML Schema语言也称作XML Schema定义的（SML Schema Definition，XSD）。
今天回顾：
1、xml+xsl的bookStore的实践
2、xslt的测试模式。了解
3、DTD可以写简单的DTD
4、了解Schema
作业：
复习html中的DOM
JavaScript对DOM的操作
明天：JavaScript+xml DOM
Java+xml DOM
11月20日
1 JavaScript对于XML DOM的操作：
问题：
1.1 XML中无法嵌入JavaScript
解决：
loadXMLDoc( ) 加载XML到JavaScript中
问题：
1.2 XML中没有ID固定属性
问题：
解决：
getElementsByTagName( )获得节点名
问题：
1.3 取值：
childNodes[0].nodeValue
新建项目：
JavaScriptXMLDOM
WebContent/Employee.xml
readXml.html
readXml.html中加<script>粘贴loadXMLDoc.js </script>
2 Java对于XML DOM的操作：
XML对应Java的接口
Java API for XML Processing(JAXP)
(javax.xml.parsers)
Simple API for XML(SAX), Version 2.0(org.xml.sax)
JDOM一种简单Java API
注：（DOM， SAX和JDOM）定义了如何访问与表示XML文档的内容，JAXP包含创建解析器对象的类，要创建DOM或SAX解析器，您需要使用JAXP。JDOM在后台也是将JAXP封装处理。一一各有所长
XML解析器（parser）
XML解析器具有读取XML文档并分析XML结构的功能
使用解析器步骤：
1 创建一个解析器对象
2 使解析器指XML文档
3 处理结果
Java(JAXP||SAX)类库简介：
Javax.xml.parsers
DocumentBuilderFactory
创建DOM解析器的工厂API，使用这个工厂API，您的代码不需要知道实现DOM的具体类。如果发现更好的DOM解析器，不必修改或重新编译您的代码就可以使用新的解析器。、
DocumentBuilder
定义了从DOM解析器中获得DOM Document对象的API
SAXParserFactory
创建SAX解析器的工厂API和DocumentBuilderFactory类似，这个API使您不需要了解实现SAX解析器的类名
SAXParser
包装SAX XMLReader类的API。当XMLReader读取时生成SAX事件
新建项目：JAXP
src/Employee.xml
JAXPReadXML.java
JAXPReadXML的执行步骤：
1 初始化JAXP
2 解析xml并返回xml的Document
3 通过xml的Document打印所有的xml内容
使用JAXP创建新的XML：
src/JAXPCreateXML.java
粘贴createXML.java到src/JAXPCreateXML.java中，运行，在项目上F5，出来jaxp.xml，在里面Ctrl+Shift+f
作业:
尝试使用JDBC创建XML:
步骤:
1 建库
2 建表:Student
3 插入测试数据
4 Java项目
5 JDBC连接数据库
6 读出数据创建xml节点
7 将xml写入磁盘
明天：JDOM，DOM4j
11月21日
1 JDOM的使用：
1.1 配置JDOM的环境
解压：c:\mysql_jar\jdom-1.1.tar.gz
jdom-1.1\build\jdom.jar
配置eclipse与配置数据库驱动一样
新建项目：JDOM
src/JDOMReadXML.java
src/Employee.xml
src/JDOMCreateXML.java
2 DOM4J的使用：
2.1 配置JDOM的环境
解压：c:\mysql_jar\dom4j-1.6.1.tar.gz
练习：
使用DOM4J打印输出Employee.xml
新建项目：DOM4JReadXML
配置DOM4J环境
src/DOM4JReadXML.java
src/Employee.xml
src/ DOM4JCreateXML.java
作业；
使用DOM4J将Employee.xsl与Employee.xml进行转换，转换为：
WebContent/Employee.html