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