D01 html
补全前面对象：
ctrl+2+l
01-01 html入门
html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。
html语言由标记组成。学习html语言，掌握一些常用的标记即可！
<font color="red" size="10">Hello World sunyang</font>
<br/>
<img src="../1.jpg">
html语法：
2.1 基本结构：
<html>
<head> --文件头（用户在浏览器看不到）
</head>
<body> --文件体（用户在浏览器的主体看得到）
</body>
</html>
2.2 head文件头
作用：告诉浏览器如何解释该html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--文件头 -->
<head>
<!--html标签分类： 有标签体，有开始，有结束 <title></title>，没有标签体，<meta /> -->
<!--告诉浏览器使用什么码表解析内容 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--关键词： keywords 搜索引擎：百度 输入 java培训
网页的排名 推广 SEO（搜索引擎优化） 关键词是网页排名的一个因素
100% 权重 50% 33.3% 3-5个合适
-->
<meta name="keywords" content="java培训，net培训"/>
<meta name="description" content="这个一家专门培训的公司"/>
<!-- 标题：在窗口的标题栏看到 -->
<title>This is a title</title>
</head>
<!--文件体 -->
<body>
你好
</body>
</html>
01-02 文本标签
2.3 文本标签
标题(h1~h6)：
<body>
<!--标题(h1~h6)-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
水平线(hr)：
段落(p)
段落缩进(blockquote)
上下标(sup和sub)
换行(br)
原样输出(pre)
有序列表ol li
无序列表ul li
项目列表标签(dl dt dd)
行内标签(span)
块标签<div>
-------------------------------------
<body>
<!--标题(h1~h6)-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--水平线(hr)-->
<hr/>
<!--段落(p)-->
<p>用户在浏览器看不到用户在浏览器看不到用户在浏览器看不到用户在浏览器看不到用户在浏览器看不到用户在浏览器看不到用户在浏览器看不到用户在浏览器看不到用户在浏览器看不到</p>
<p>用户在浏览器的主体看得到用户在浏览器的主体看得到用户在浏览器的主体看得到用户在浏览器的主体看得到用户在浏览器的主体看得到用户在浏览器的主体看得到用户在浏览器的主体看得到</p>
<!--段落缩进(blockquote)-->
<blockquote>段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进段落缩进</blockquote>
<!--上下标(sup和sub)用于公式-->
数学公式：x的平方：y=x<sup>2</sup>
水的化学式：H<sub>2</sub>O
<!--换行(br)-->
<br/>
葡萄美酒夜光杯，<br/>欲饮琵琶马上催。
<!--原样输出(pre)-->
<pre>
凉州词
葡萄美酒夜光杯，欲饮琵琶马上催。
</pre>
<!--有序列表ol li 是有序的带数字-->
最喜欢的明星？
<ol>
<li>凤姐</li>
<li>张杰</li>
<li>如花</li>
</ol>
<ol type="i">
<li>凤姐</li>
<li>张杰</li>
<li>如花</li>
</ol>
<!--无序列表ul li-->
<ul>
<li>凤姐</li>
<li>张杰</li>
<li>如花</li>
</ul>
<ul type="disc">
<li>凤姐</li>
<li>张杰</li>
<li>如花</li>
</ul>
学生管理系统
<ul type="disc">
<li>学生管理</li>
<li>成绩管理</li>
<li>系统管理</li>
</ul>
<!--项目列表标签(dl dt dd)-->
<dl>
<dt>技术总监</dt>
<dd>工程师1</dd>
<dd>工程师2</dd>
<dt>财务总监</dt>
<dd>财务1</dd>
<dd>财务2</dd>
</dl>
<!--行内标签(span)-->
<span>span的内容</span>
<!--块标签<div>-->
<div>div的内容</div>
<!--div+css的网页布局,在html使用少，主要用在css-->
</body>
</html>
-------------------------------------
01-03 超链接
<body>
<!--
超链接标签：
常用的属性：
href 表示链接到的地址
-->
<a href="html文本标签.html">超链接地址</a><br/>
<a href="./1.jpg">链接到图片</a><br/>
<a href="https://www.baidu.com">链接到百度</a>
</body>
http协议流程：
<body>
<!--
超链接标签：
常用的属性：
href 表示链接到的地址
协议执行资源的基本流程（超链接的原理）
常见的协议：
file:// 本地文件协议（本地或局域网）
http:// http协议
超链接的作用：
1、链接到资源
2、作为锚点使用
打锚点：<a name="ch01"></a>
去到锚点：<a href="">内容</a>
-->
<a name="top"></a>
<a href="html文本标签.html">超链接地址</a><br/>
<a href="./1.jpg">链接到图片</a><br/>
<a href="https://www.baidu.com">链接到百度</a><br/>
<a href="#ch01">去到底部</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="ch01">在第一章。。。</a>
<a href="#top">返回顶部</a>
</body>
1、在body第一行写：
<a name="top"></a>
2、在需要的地方写：
<a href="#top">返回顶部</a>
不同页面跳转打锚点：
1、在html文本标签.html中打点，<a name="list"></a>
2、<a href="html文本标签.html#list" target="_blank">超链接地址</a>
01-04 图像和表格标签
<!--
img 图像标签
常见属性：
src：表示图片源位置
width：图片宽度
height：图片高度
px：像素
alt：替代文本。当图片的src属性失效时，alt属性的内容就会生效
title：提示文本，当鼠标放在图片上时出现。
area：热点
-->
<body>
<img src="../2.jpg" alt="替代文字" width="300px" height="400px" border="0" usemap="#Map" title="提示文本" />
<map name="Map" id="Map">
<!--矩形：左上、右下坐标-->
<area shape="rect" coords="52,65,216,225" href="01.html结构.html" target="_self" />
<!--圆形：圆心、半径-->
<area shape="circle" coords="52,65,216" href="01.html结构.html" target="_blank"/>
</map>
</body>
2.6 转义字符：
<!--
< < letter than
> > greater than
& &
空格
详见：HTML.PPT(资料)
-->
2.7 表格标签
<!--
表格：<table></table>
行：<tr></tr>
单元格：<td></td>
常用属性：
table属性：
border 表格的边框
width: 宽度
height: 高度
align: 对齐方式 left: center: right:
表头属性：
<th></th> 居中、加粗
表格标题：caption
名字合并：
行合并：rowspan="2"
列合并：colspan="2"
-->
原始代码：
<table border="1px" width="200px" height="100px" align="center">
<caption>2018期末总成绩</caption>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
<tr>
<td>孙1</td>
<td>机1</td>
<td>100</td>
</tr>
<tr>
<td>孙1</td>
<td>算1</td>
<td>90</td>
</tr>
<tr>
<td>孙2</td>
<td>机2</td>
<td>90</td>
</tr>
<tr>
<td>孙3</td>
<td>机3</td>
<td>80</td>
</tr>
</table>
行合并前：
行合并后：
<tr>
<td rowspan="2">孙1</td>
<td>机1</td>
<td>100</td>
</tr>
<tr>
<td>孙1</td> <!--删除这行-->
<td>算1</td>
<td>90</td>
</tr>
列合并：
<tr>
<td colspan="2">平均分</td>
<!--删除这行-->
<td>85</td>
</tr>
01-05 表单标签1
01-06 表单标签2
作用：采集用户输入信息，提交给后台处理
<body>
<!--
表单标签：<form>
<input type="text"/> 单行输入域
<input type="password"/> 密码输入域
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
<select/> 下来选项
<input type="hidden"/> 隐藏域。特点：不会显示到html页面，但是可以携带数据
<input type="file"/> 文件选择器
<input type="submit"/> 提交按钮
<input type="button"/>
<input type="reset"/> 重置安装
<textarea></textarea>多行输入域
action:表单提交到的地址
<form action="地址" method="post">
get数据不超过1kb
点击提交按钮submit，myeclipse接收表单数据
-->
<form action="地址" method="post">
<!--
value:默认字
name:id
size:25字符长度
用户名:<input type="text" value="4-10位" name="userName"/>
单选：<input type="radio"/>
1、如果是同一组单选选项使用相同name属性值
2、单选按钮的value属性一定要填，这个value值就是要发送给后台
男:<input type="radio" name="r2" value="男"/>女:<input type="radio" name="r2" value="女"/>
多选：<input type="checkbox"/>
1、如果是同一组单选选项使用相同name属性值
足球:<input type="checkbox" name="hobit" value="足球"/>篮球:<input type="checkbox" name="hobit" value="篮球"/>乒乓:<input type="checkbox" name="hobit" value="乒乓"/>
下拉：
1、如果是同一组单选选项使用相同name属性值
<select name="jiguan">
<option value="shanxi">陕西</option>
<option value="guangdong">广东</option>
<option value="guangxi">广西</option>
</select>
隐藏域：<input type="hidden"/>
1、特点：不会显示到html页面，但是可以携带数据
<input type="hidden" name="id" value="yingcangyu"/>
提交按钮:<input type="submit"/>
1、点击按钮，form中的全部数据会发送到后台
2、按钮上默认文字是 提交查询，value：表示按钮上显示文字
按钮:<input type="submit" value="提交"/>
重置:<input type="reset"/>
-->
用户名:<input type="text" value="4-10位" name="userName"/><br/>
密码:<input type="password" name="pWd"/><br/>
男:<input type="radio" name="r2" value="男"/>女:<input type="radio" name="r2" value="女"/><br/>
足球:<input type="checkbox" name="hobit" value="足球"/>篮球:<input type="checkbox" name="hobit" value="篮球"/>乒乓:<input type="checkbox" name="hobit" value="乒乓"/><br/>
下拉选项:<select name="jiguan">
<option value="shanxi">陕西</option>
<option value="guangdong">广东</option>
<option value="guangxi">广西</option>
</select><br/>
<input type="hidden" name="id" value="yingcangyu"/> 隐藏域。特点：不会显示到html页面，但是可以携带数据<br/>
文件选择器:<input type="file"/><br/>
提交按钮:<input type="submit" value="提交"/><br/>
按钮:<input type="button"/><br/>
重置:<input type="reset"/><br/>
多行输入域:<textarea rows="5" cols="20"></textarea>
</form>
</body>
D02 CSS
02-01框架标签
框架标签需要放在body外面
<frameset rows="10%,*,10%">
<frame src="0201header.html" />
<frameset cols="20%,*">
<frame src="0201menu.html" />
<frame src="0201main.html" name="main" />
</frameset>
<frame src="0201footer.html" />
</frameset><noframes></noframes>
<!--超链接的target属性还可以指定一个框架名称-->
<li><a href="0201student.html" target="main">学生管理</a></li>
02-02 css使用方法
全称CSS（Cascading Style Sheet） 样式
作用：网页的美化
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css使用方法</title>
<style type="text/css">
a{
font-size:24px;
color:#F00;
}
</style>
</head>
<body>
<a href="xxxx" >超链接</a>
<a href="xxxx" >超链接</a>
<a href="xxxx" >超链接</a>
</body>
1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
<a href="xxxx" style="font-size:24px;">超链接</a>
2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>
3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件
<!-- 导入外部css文件
href : 表示外部css文件的位置
rel: 表示关联的是样式表
-->
<link href="01.css" rel="stylesheet"/>
例子：
1、创建xx.css文件
@charset "utf-8";
/* CSS Document */
a{
font-size:24px;
color:#0F0;
}
2、创建html引入样式
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css使用方法</title>
<!--
href:外部css位置
rel:层叠样式表
-->
<link href="0202css.css" rel="stylesheet"/>
</head>
02-03 css选择器
<style type="text/css">
/*
优先级：id选择器>类选择器>标签选择器
选择器（selector）：使用选择器来选择需要添加样式的标签
*/
/*
标签选择器:
选择所有同名标签
*/
div{
font-size:24px;
color:#F00;
}
span{
font-size:24px;
color:#F00;
}
/*
类选择器：
选择同类标签
<div class="c1">div的内容3</div>
*/
.c1{
font-size:24px;
color:#0F0;
}
/*
id选择器：
只选择一个标签，在同一个html界面，建议不要使用2个同名的id，后面使用JavaScript时，如果使用2个同步标签，就选择不到
<div id="d1">div的内容2</div>
*/
#d1{
font-size:24px;
color:#00F;
}
/*
并集选择器：
当多个选择器的内容是一样的可以合并
.c1和#dl的内容相同时可以合并
*/
.c1,#dl{
font-size:24px;
color:#00F;
}
/*
交集选择器：
<div><span>内部的span</span></div>
*/
div span{
font-size:24px;
color:#F00;
}
/*
通用选择器：
选择所有标签，不管是什么类型
*/
*{
font-size:24px;
color:#F00;
}
/*
伪类选择器：
控制标签在不同状态下的样式
4种状态：是有顺序的，不然hover会失效
顺序：link-visited-hover-active
link：没有访问过的状态
hover：鼠标经过没有点击的状态
active:鼠标激活（按下没有松开）的状态
visited:已经访问过的状态（鼠标点下且松开）
*/
a:link{
font-size:24px;
color:#F00;
}
a:visited{
font-size:34px;
color:#0FF;
text-decoration:none;
}
a:hover{
font-size:14px;
color:#0F0;
}
a:active{
font-size:34px;
color:#00F;
}
</style>
</head>
<body>
<div>div的内容1</div>
<div id="d1">div的内容2</div>
<div class="c1">div的内容3</div>
<div>div的内容4</div>
<div><span>内部的span</span></div>
<span>外部的span</span>
<a href="xxx">超链接</a>
</body>
02-04 css常用属性
文本：
<style type="text/css">
body{
color:#F00;
/*字符间距*/
letter-spacing:10px;
/*对齐方式*/
text-align:center;
/*文本修饰：下划线、中划线、没有*/
text-decoration:underline;
/*单词间距*/
word-spacing:30px;
}
</style>
<body>
今天天气不错！
</body>
字体：
<style type="text/css">
body{
/*字体类型 系统有的字体：c:winodws/fonts*/
font-family:"黑体";
font-size:24px;
font-style:italic;
font-weight:bold;
/*按照顺序*/
font:italic bold 24px "黑体"
}
</style>
背景：
<style type="text/css">
body{
/*背景颜色*/
background-color:#F00;
/*x-y重叠*/
background-image:url(../2.jpg);
background-repeat:no-repeat;
background-position:top center;
/*2 表达*/
background:#F00 url(../2.jpg) bottom left
}
</style>
列表：
<style type="text/css">
ul{
/*列表符号类型*/
list-style-type:square;
list-style-image:url(../2.jpg);
}
</style>
</head>
<body>
系统菜单
<ul>
<li>学生管理</li>
<li>教师管理</li>
<li>课程管理</li>
</ul>
</body>
表格：
<style type="text/css">
table{
/*合并表格的边框*/
border-collapse:collapse;
}
</style>
</head>
<body>
<table border="1px" width="300px" height="100px" align="center">
<caption>2014年期末考试成绩单</caption>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
<tr>
<td>sun1</td>
<td>sun1</td>
<td>sun1</td>
</tr>
</table>
</body>
边框：
<style type="text/css">
div{
/*边框颜色*/
border-color:F00;
/*边框宽度*/
border-width:10px;
/*边框样式，必须设置样式才会显示*/
border-style:solid;
}
</style>
</head>
<body>
<div>div1</div>
02-05 盒子模型
<!--
盒子模型：把html页面上每个标签看做一个盒子
盒子相关的属性：宽度和高度，决定盒子的容量
-->
<style type="text/css">
div{
width:100px;
height:200px;
/*设置边框*/
border:3px #F00;
padding:10px;
margin:50px;
}
</style>
</body>
<div>div1</div>
<div>div2</div>
02-06 定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ登录页面</title>
<style type="text/css">
#main{
width:300px;
height:200px;
border:1px solid #000;
margin-left:300px;
margin-top:200px;
background-image:url(../2.jpg);
background-repeat:no-repeat;;
background-position:center center
}
#userName{
margin-left:30px;
margin-top:70px;
}
#userPwd{
margin-left:30px;
}
#logobutton{
margin-left:100px;
}
</style>
</head>
<body>
<div id="main">
<form>
<div id="userName">
用户名:<input type="text" name="userName"/>
</div>
<div id="userPwd">
密 码:<input type="password" name="userPwd"/>
</div>
<div id="logobutton">
<input type="submit" value="登录"/>
<input type="button" value="立即注册"/>
</div>
</form>
</div>
</body>
</html>
<!--
相对定位：相对之前的位置
left:10px;
top:10px;
绝对定位：相对于父标签
-->
02-07 JavaScript入门
作用：用户和浏览器交互
小程序：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ登录页面</title>
<style type="text/css">
#main{
width:300px;
height:200px;
border:1px solid #000;
margin-left:300px;
margin-top:200px;
background-image:url(../2.jpg);
background-repeat:no-repeat;;
background-position:center center
}
#userName{
margin-left:30px;
margin-top:70px;
}
#userPwd{
margin-left:30px;
}
#logobutton{
margin-left:100px;
}
</style>
<script type="text/javascript">
function checkName() {
var userName = document.getElementById("userName").value;
var reg = /^[a-z0-9]{4,14}$/i;
if(!reg.test(userName)) {
alert("用户名格式不对");
return false;
}
return true;
}
</script>
</head>
<body>
<div id="main">
<form action="xxx.html" method="post" onsubmit="return checkName()">
<div id="userName">
用户名:<input type="text" name="userName"/>
</div>
<div id="userPwd">
密 码:<input type="password" name="userPwd"/>
</div>
<div id="logobutton">
<input type="submit" value="登录"/>
<input type="button" value="立即注册"/>
</div>
</form>
</div>
</body>
</html>
D03 JavaScript
1、直接写在html文档
<script type="text/javascript">
/*
alert("提示框")
document.write("向浏览器输出内容")
*/
alert("提示框");
document.write("输出内容到浏览器");
/*
*/
</script>
/*2、导入外部js文件*/
<script src="0301js.js"></script>
03-01 JavaScript数据类型和运算符
1、EMCA 基础语法
2、BOM编程
3、DOM编程
<script type="text/javascript">
/*
1、定义和赋值变量： var 变量名=值
注：var可要可不要，不建议省略
2、在js中可以重复定义变量，以后面定义的变量会覆盖前面
3、数据类型： number string boolean object
4、如果var h;未赋值，undefined，不会默认赋值，js中变量的类型是由变量的值决定
*/
var a = 10;
var b = 10;
document.write("a的值为:"+a+",a的数据类型:"+typeof(a)+"<br/>");
var c = 3.14;
document.write("a的值为:"+c+"<br/>");
var d = 'd';
document.write("d的值为:"+d+"<br/>");
var e = true;
document.write("e的值为:"+e+"<br/>");
var f = new Object();
document.write("f的值为:"+f+"<br/>");
var g = "hello";
document.write("g的值为:"+g+"<br/>");
</script>
类型的转换函数：
string->number
/*
1、定义和赋值变量： var 变量名=值
注：var可要可不要，不建议省略
2、在js中可以重复定义变量，以后面定义的变量会覆盖前面
3、数据类型： number string boolean object
4、如果var h;未赋值，undefined，不会默认赋值，js中变量的类型是由变量的值决定
*/
var a = 10;
var b = 10;
document.write("a的值为:"+a+",a的数据类型:"+typeof(a)+"<br/>");
var c = 3.14;
document.write("a的值为:"+c+"<br/>");
var d = 'd';
document.write("d的值为:"+d+"<br/>");
var e = true;
document.write("e的值为:"+e+"<br/>");
var f = new Object();
document.write("f的值为:"+f+"<br/>");
var g = "hello";
document.write("g的值为:"+g+"<br/>");
/*string->int*/
var a = "10";
document.write("a的类型"+typeof(a));
a = parseInt(a);
document.write("a的类型"+typeof(a));
/*转换失败*/
var b = "a10";
document.write("b的类型"+typeof(b));
b = parseInt(b);
document.write("b的类型"+typeof(b));
/*转换成功，如果转换的第一个类型是数字就可转换，直到遇到未数字为止停止*/
var c = "10a";
document.write("c的类型"+typeof(c));
c = parseInt(c);
document.write("c的类型"+typeof(c));
/*string->float*/
var d = "3.14";
d = parseFloat(d);
document.write("d的类型"+typeof(d));
运算符：
/*算术运算符 + - ^ / %
true=1,false=0*/
var a = 10;
var b = true;
document.write("结果为:"+(a*b)+"<br/>"+"10");
document.write("结果为:"+(a+b)+"<br/>"+"11");
var a = 10;
var b = 20;
document.write("结果为:"+(a*b)+"<br/>"+"200");
document.write("结果为:"+(a+b)+"<br/>"+"30");
/*比较运算符 > < >= <= ==
*/
var a = 10;
var b = 20;
document.write("结果为:"+(a>b)+"<br/>");
document.write("结果为:"+(a<b)+"<br/>");
document.write("结果为:"+(a=b)+"<br/>");
/*逻辑运算符 && || ！
*/
/*三目运算符 (a>b)? true:false
*/
/*a=b,将b的值赋给a*/
03-02 流程控制语句1
03-03 流程控制语句2
<script type="text/javascript">
/*
条件可以是：
布尔值：true 成立 false 不成立
number 非0 成立 0 不成立
string 非空字符串 成立 空字符串 不成立
object 非null 成立 null 不成立
*/
if(0) {
alert("success");
} else {
alert("failed");
}
/*
switch(变量) {
case 0:
break;
}
case的条件：
可以是常量 string number
可以是变量，java不能是变量
*/
var i = 2;
switch(i) {
case 2:
alert("i="+i);
break;
default:
break;
}
/*
for语句：
*/
var result = 0;
for(var i=1;i<=100;i++) {
result+=i;
document.write(result);
}
/*
while语句：
*/
var i = 0;
while(5>i) {
document.write("helloword");
i++;
}
/*
do-while
*/
var i=1;
do{
document.write("helloword<br/>");
i++;
}while(i<5);
/*
1、显示*为三角形，5行
2、显示乘法口诀
*/
for(var i=1;i<=5;i++) {
for(var j=1;j<i;j++) {
document.write("* ");
}
document.write("<br/>");
}
document.write("<hr/>");
for(var i=1;i<9;i++) {
for(var j=1;j<=i;j++) {
document.write(i+"*"+j+"="+(i*j)+" ");
}
document.write("<br/>");
}
/*for-in语句
1、遍历数组
2、遍历对象
*/
var arr = [20,30,40];
for(var i in arr) {
document.write(arr[i]+",");
}
/*定义对象*/
function Person(age,name){
this.name = name;
this.age = age;
}
var p = new Person(20,"sun");
/*遍历对象 i,只是名字，p[i],对象的内容*/
for(var i in p){
document.write(p[i]);
}
/*with语句，方便函数的调用*/
with(document){
for(var i in p){
write(p[i]);
}
}
</script>
03-04 函数
/*
函数定义1
function add(a, b) {
var result = a + b;
document.write("结果为:"+result);
}
调用1
add(10,20);
*/
function add(a, b) {
var result = a + b;
document.write("结果为:"+result);
return result;
}
add(10,20);
/*可以有返回值*/
function add(a, b) {
var result = a + b;
document.write("结果为:"+result);
return result;
}
var s = add(10,20);
/*没有重载的概念*/
/*js中形式参数的数量和实际参数数量不一致也可以*/
/*js的每个函数中都隐藏一个arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值*/
function add(a, b) {
for(var i=0;i<arguments.length;i++) {
document.write("结果为:"+arguments[i]);
}
}
add(10,20,40);
03-05 函数练习
<script type="text/javascript">
function check(){
alert("调用");
var month = document.getElementById("month").value;
alert(month);
if(month==1 || month==3) {
alert("有31天");
} else if(month==4 || month==6) {
alert("有30天");
} else{
alert("28天");
}
}
</script>
</head>
<body>
请输入一个月份：
<input type="text" id="month"/><br/>
<input type="button" value="查询" onclick="check()"/>
</body>
03-06 内置对象
<script type="text/javascript">
/*内置对象
String
Number
Boolean
Math
Date
Array
*/
/*方法1：String*/
var str1 = new String("hello");
var str2 = new String("hello");
document.write("结果:"+(str1==str2)+"<br/>");
//valueOf() 返回的内容
document.write("结果:"+(str1.valueOf()==str2.valueOf())+"<br/>");
/*方法2：String*/
var str1 = "hello";
var str2 = "hello";
//上红色
str1.fontcolor("red");
str2.replace("he","word");
var str3 = "java-net-php";
var strArray = str3.split("-");
for(var i=0;i<strArray.length;i++){
document.write(strArray[i]);
}
var str = str3.substring(0,4);
/*Number*/
var num1 = new Number(20);
var num2 = new Number(20);
document.write(num1==num2);
document.write(num1.valueOf()==num2.valueOf());
var num1 = 20;
var num2 = 20;
document.write(num1==num2);
/*Boolean*/
var b1 = new Boolean(true);
var b2 = new Boolean(true);
/*Math
ceil() 向上取整
floor() 向下取整
round() 四舍五入取整
random()
max()
min()
*/
var num =3.1415;
Math.ceil(num);
Math.floor(num);
Math.round((Math.random()*100));
/*Date 2015年06月01日 15时12分20秒*/
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
date.getDay();
date.getHours();
date.getMinutes();
date.getSeconds();
var date = new Date();
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
var dateTip = document.getElementById("dateTip");
dateTip.innerHTML=dateStr;
</script>
时钟案例：
<body>
当前时间为：<span id="dateTip"></span>
</body>
<script type="text/javascript">
function genNewDate(){
var date = new Date();
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
var dateTip = document.getElementById("dateTip");
dateTip.innerHTML=dateStr;
}
//定时器
window.setInterval("genNewDate()",1000);
</script>
/*
方法1：创建数组
方法2：不指定长度
*/
var arr = new Array(3);
//给数组赋值
arr[0]=10;
var arr = new Array();
alert(arr.length);
var arr = new Array();
arr[0]=10;
arr[1]="hello";
arr[2]=true;
for(var i=0;i<arr.length;i++){
document.write(arr[i]);
}
var arr = new Array(10,"hi",true);
//方法2
var arr =[10,"java",false];
/*
常用方法：
join():使用指定的字符串，把数组的所有元素连接在一起，最终组成新的字符串
*/
var arr=["java","net","php"];
//拼接:java-net-php
var str = arr.join("-");
//反转: php net java
arr.reverse();
03-07 自定义对象
<script type="text/javascript">
/*
定义对象1
*/
function Person(name,age){
//定义属性
this.name=name;
this.age=age;
//定义方法
this.say=function(){
alert("这个对象的方法");
}
}
//创建对象
var p = new Person("gouwa",23);
p.name;
p.age;
p.say();
for(var i in p){
p[i]
}
</script>
/*定义对象方法2 无参的构造函数*/
function Person(){}
var p = new Person();
p.name="xxx";
p.age=14;
p.haha=function(){
alert("追加属性和方法");
}
/*定义对象方法3 使用Object对象*/
var p = new Object();
p.name="xxx";
p.age=14;
p.haha=function(){
alert("追加属性和方法");
}
/*定义对象方法4 使用自变量形式*/
var p = {
//定义属性
"name":"gousheng",
"age":23,
//定义方法
"say":function(){
alert("444");
}
};
03-08 自定义对象练习
js：
// JavaScript Document
/*
设计一个数组工具类对象，例如ArrayUtils对象，该对象提供以下两个方法：
search(array,str):传入指定的数组和指定的字符串，返回指定字符串所在的位置
max(array):传入指定的数组，返回该数组中的最大值
*/
function ArrayUtils(){
//定义方法
this.search=function(array,str){
for(var i=0;i<array.length;i++){
if(array[i]==str){
return i;
}
}
return -1;
}
this.max=function(array){
var max = array[0];
for(var i=0;i<array.length;i++){
if(array[i]>max){
max=array[i];
}
}
return max;
}
}
调用：
<script src="ArrayUtils.js"></script>
<script type="text/javascript">
var arr=[10,43,21,3,89];
var arrayUtils = new ArrayUtils();
var str = arrayUtils.search(arr,20);
document.write(str+"<br/>");
var maxStr = arrayUtils.max(arr);
document.write(maxStr);
</script>
</head>
03-09 BOM编程入门
给内置对象追加方法：
<script type="text/javascript">
/*
问题：不使用ArrayUtils工具，但也想实现search和max方法的功能
预期解决方法：想把search和max方法设计到Array内置对象中
问题：如何给Array对象扩展两个方法？
方案1：拿到Array定义对象的代码，在代码上加
function Array(){
this.join=function(){}
this.reverse=function(){}
this.search=function(){}
}
拿不到Array对象的源码
方案2：使用原型属性给Array对象添加方法
什么是原型？
1、js的每个对象中都包含有原型属性(prototype)
2、如果往某个对象的原型属性添加了方法，那么添加的这个方法就会
自动地添加到当前对象的方法中。
3、原型的作用：给内置对象添加方法
function Array(){
//属性,原型对象
this.prototype = new Prototype();
}
function Prototype(){
this.search=function(){}
this.max=function(){}
}
*/
Array.prototype.search=function(str){
for(var i=0;i<this.length;i++){
if(array[i]==str){
return i;
}
}
return -1;
}
Array.prototype.max=function(){
var max = this[0];
for(var i=0;i<this.length;i++){
if(this[i]>max){
max=this[i];
}
}
return max;
}
var arr=[10,34,29,49];
var index=arr.search(3);
document.write("位置是:"+index+"<br/>");
var maxStr =arr.max();
document.write("最大值是:"+maxStr+"<br/>");
</script>
作业：
1、使用原型给String对象添加两个方法
toCharArray() 返回当前字符串的字符数组
reverse() 返回反转后的字符串
helloworld
dlrowolleh
/*
给String对象，添加两个方法：
toCharArray() 返回字符数组
reverse() 反转字符串的内容
*/
<script type="text/javascript">
String.prototype.toCharArray=function(){
//1、创建数组
var charArray = new Array();
//2、遍历字符
for(var i=0;i<this.length;i++){
charArray[i]=this.charAt(i);
}
return charArray;
}
String.prototype.reverse=function(){
//1、字符串转成数组
var charArray = this.toCharArray();
//2、对数组反转
charArray = charArray.reverse();
return charArray.join("");
}
var str ="hellojava";
var arr = str.toCharArray();
for(var i=0;i<arr.length;i++){
document.write(arr[i]+",");
if(i==arr.length-1){
document.write(arr[i]);
}
}
</script>
D04
2.1 BOM编程
BOM是（Broswer Object Model）
什么是BOM编程？
通过JavaScript提供的4个对象操作浏览器，就是BOM编程。
浏览器在加载这个html文件时，JavaScript引擎会把浏览器的各个部分的信息封装到对象中，浏览器
会分为以下几个对象：
窗口：window对象
地址栏：location对象
历史记录栏：history对象
整个屏幕：screen对象
04-01 window和location对象
1.1 入门
BOM就是浏览器对象模型编程，通过JavaScript引擎提供的四个浏览器对象，操作浏览器。
1.2 window对象
window代表一个窗口
<script type="text/javascript">
/*
open():在一个窗口中打开页面
setInterval() 设置定时器
setTimeout() 设置定时器
clearInterval()清除定时器
clearTimeout() 清除定时器
alert() 提示框
confirm() 确认提示框
propmt() 输入提示框
*/
function testOpen(){
alert("aaaa");
/* BOM编程没有统一，各个浏览器不一致
参1：打开xxx.html
参2：打开的方式：_self:本窗口,_blank:新窗口
参3：设置窗口参数：窗口大小，是否显示任务栏
参4：
*/
window.open("练习.html","_blank","width=300px;height=400px;toolbar=0");
}
var taskId;
function testInterval(){
/*定时器：
参1：指定的任务(函数)
*/
taskId = window.setInterval("testOpen()",2000);
}
var timeoutId;
function testTimeout(){
/*定时器：timeout只执行一次
参1：指定的任务(函数)
*/
taskId = window.setTimeout("testOpen()",2000);
}
function testClearInterval(){
/*清除任务
参数1：需要清除的任务ID
*/
window.clearInterval(taskId);
}
function testClearTimeout(){
/*清除任务
参数1：需要清除的任务ID
*/
window.clearTimeout(timeoutId);
}
function testAlert(){
/*提示框
参数1：
*/
window.alert("提示框");
}
function testConfirm(){
/*确认提示框
返回值：点击了确认还是取消
*/
var flag = window.confirm("确认删除？");
if(flag){
alert("删除");
}else{
alert("想想");
}
}
function testPrompt(){
/*
参数1：
*/
var flag = window.prompt("请输入你的密码");
if(flag){
alert("转账中");
}else{
alert();
}
}
1.3 location对象
location对象表示一个窗口中的地址栏
<script type="text/javascript">
/*
实现页面跳转：
href属性：地址栏的URL,URL统一资源定位符
reload方法：刷新当前页面
*/
function testHref(){
var hrefURL = window.location.href;
alert(hrefURL);
window.location.href="练习.html";
}
function testReload(){
window.location.reload();
}
function testRefresh(){
window.setInterval("testReload()",2000);
}
//主动调用一次
window.setTimeout("testReload()",2000);
</script>
</head>
<body>
<a href="练习.html" >超链接</a>
<input type="button" value="跳转" onclick="testHref()"/>
<input type="button" value="定时刷新" onclick="testRefresh()"/>
</script>
1.4 history对象
history对象表示窗口的历史记录栏
<script type="text/javascript">
/*
forward()
back()
go() go(2)正数前进2，go(-2)负数后退2
*/
function testForward(){
window.history.forward();
}
function testBackward(){
window.history.back();
}
</script>
</head>
<body>
<a href="练习.html">跳转到练习</a>
<input type="button" value="下一页" onclick="testForward()"/>
<input type="button" value="上一页" onclick="testBackward()"/>
1.5 screen对象
代表是一个屏幕
<script type="text/javascript">
/*
availWidth:排除任务栏后的宽度
*/
document.write(window.screen.availWidth);
document.write(window.screen.availHeight);
document.write(window.screen.width);
document.write(window.screen.height);
</script>
04-02 事件编程
2.1 回顾javase的事件编程
GUI编程三个要素：
事件源：按钮、JButton JFrame
事件：KeyEvent WindowEvent
监听器：KeyListener WindowListener
GUI编程具体的步骤：
1、创建事件源
2、编写监听器
3、在事件源上注册监听器
JavaScript事件编程：
1、事件源：html标签 按钮、下拉框、输入域
2、事件：click、dblclick mouseover
3、监听器：函数
<title>事件编程</title>
<script type="text/javascript">
function test(){
alert("触发事件");
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="test()"/>
</body>
事件：
<script type="text/javascript">
/*
事件分类：
点击相关：单击 onclick
双击 ondbclick
焦点相关：
聚焦 onfocus
失去焦点 onblur
选项相关：
改变选项 onchange
鼠标相关：
鼠标经过 onmouseover
鼠标移除 onmouseout
页面加载相关：
页面加载 onload
*/
function test(){
alert("触发事件");
}
function testDblclick(){
}
function testFocus(){
var userName=document.getElementById("userName");
userName.value="";
}
function testBlur(){
var userName=document.getElementById("userName");
if(userName=="sun"){
var spanText=document.getElementById("spanText");
}else{
spanText.innerHTML="账号已存在".fontcolor("red");
}
}
function testChange(){
alert("选项改变");
var jiguan=document.getElementById("jiguan").value;
}
</script>
</head>
<body>
<input type="button" value="单击" onclick="test()"/>
<input type="button" value="双击" ondblclick="testDblclick()"/>
<input type="text" id="userName" value="4-12位数字" onfocus="testFocus() onblur="testBlur()"/><span id="spanText">提示信息</span>
<hr/>
籍贯
<select id ="jiguan" onchange="testChange()">
<option value="广西">广西</option>
<option value="广东">广东</option>
<option value="陕西">陕西</option>
</select>
</body>
城市选择案例：
<script type="text/javascript">
function testChange(){
var sheng = document.getElementById("sheng").value;
var city = document.getElementById("city");
city.innerHTML="";
if(sheng=="广东"){
var arr=["广州","珠海","深圳"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value= '"+arr[i]+"'>"+arr[i]+"</option>";
}
}else if(sheng=="广西"){
var arr=["柳州","桂林","南宁"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value= '"+arr[i]+"'>"+arr[i]+"</option>";
}
}else{
var arr=["张家界","湘潭","长沙"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value= '"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
</script>
</head>
<body>
请选择籍贯：<br/>
省：
<select onchange="testChange()" id="sheng">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
市：
<select id="city">
<option value="广州">广州</option>
<option value="珠海">珠海</option>
<option value="深圳">深圳</option>
</select>
</body>
鼠标相关：
function testOut(){
alert("鼠标移出");
}
function testOver(){
alert("鼠标经过");
}
<div id="div1" onmouseover="testOver()" onmouseout="testOut()"></div>
页面加载相关
//事件是在加载完标签后再触发，通常用在body里
function testLoad(){
alert("触发了onload方法");
<body "testLoad()">
</body>
04-03 DOM编程入门
DOM编程：Document Object Model 文档对象编程
在浏览器加载完html页面的时候，JavaScript引擎把整个html页面的所有html标签封装成对象，通过这些
标签对象来操作（控制）html页面的显示效果。
JavaScript引擎加载完html页面后，会把每个标签封装成对象，这些标签对象形成一个树状结构
步骤：
1、找到需要控制的标签对象
2、通过标签对象的属性和方法改变标签
04-04 查询标签对象方法
/*
all:获取所有标签对象
forms:获取form标签对象
images：获取img标签对象
links:获取a标签对象
*/
var nodeList = document.all;
for(var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
var nodeForms = document.forms;
var nodeLinks = document.links;
注意：childNodes属性获取的子节点包含以下元素：
1、标签
2、空格换行
3、html注释
在子节点中筛选出标签，使用
通过关系查询标签对象
//获取第一个a标签对象
var aNode = document.links[0];
alert(aNode.nodeName);
//得到父标签
var formNode = aNode.parentNode;
alert(formNode.nodeName);
//得到子标签
var nodeList = aNode.childNodes;
for(var i=0;i<nodeList.length;i++){
if(nodeList[i].nodeType==1){
document.write(nodeList.nodeName+",节点属性:"+nodeList[i].nodeType+"<br/>");
}
}
var firstChild = formNode.firstChild;
alert(firstChild.nodeName);
var lastChild = formNode.lastChild;
alert(lastChild.nodeName);
var next = document.nextSibling;
alert(next.nodeName);
var pre = document.previousSibling;
alert(pre.nodeName);
通过document方法查询标签对象，三种方式
<body>
用户名：<input type="text" id="userName" name="user" onblur="getValue()"/>
</body>
<script type="text/javascript">
function getValue(){
var userName = document.getElementById("userName");
alert(userName.value);
var userName = document.getElementsByName("user")[0];
var userName = document.getElementsByTagName("input")[0];
}
</script>
04-05 设置标签属性
修改标签对象的属性：
<body>
<span id="mySpan"></span>
</body>
<script type="text/javascript">
var mySpan = document.getElementById("mySpan");
//设置标签内的HTML内容
mySpan.innerHTML="<h3>内容</h3>";
//mySpan.text="hehe"
</script>
<input type="text" id="userName" value="4-12位字母或数字"/>
<img src="4.jpg" width="300px" height="400px"/><input type="button" value="切换图片" onclick="changeImg()"/>
<hr/>
<input type="button" value="全选" onclick="quanxuan()"/>
<input type="checkbox" value="男" name="hobit"/>男<input type="checkbox" value="女" name="hobit"/>女
<body>
</body>
<script type="text/javascript">
var stext = document.getElementById("userName");
stext.value="";//清空值
stext.value="名字";
function changeImg(){
var simg = document.getElementsByTagName("img")[0];
simg.src = "2.img";
}
function quanxuan(){
var nan = document.getElementsByName("hobit");
for(var i=0;i<nan.length;i++){
nan[i].checked = true;
}
}
</script>
04-06 设置标签属性练习
04-07 动态表格案例
//标签对象的方法
//添加相关的：
function add(){
var input = document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("value","按钮");
插入相关的：
var mBody = document.getElementsByTagName("body")[0];
//mBody.appendChild(input);
//新的按钮对象加入到btn按钮前面
var isnert = document.getElementById("insert");
//参1 新的对象 参2 插入到前面的对象
mBody.insertBefore(input,insert);
}
标签对象的方法：动态表格案例
<body>
<table border="1" align="center" width="300px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text"/></td>
<td><input type="password"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="button" value="添加一行" onclick="addItem()"/></td>
<td><input type="button" value="删除一行" onclick="delItem()"/></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
<script type="text/javascript">
/*
*/
var count =2;
function addItem(){
//创建一个tr
var tr = document.createElement("tr");
//td
var td1 = document.createElement("td");
td1.innerHTML=count;
var td2 = document.createElement("td");
var input1 = document.createElement("input");
//讲input1放到td2
input1.setAttribute("type","text");
td2.appendChild(input1);
var td3 = document.createElement("td");
var input2 = document.createElement("input");
//讲input1放到td2
input1.setAttribute("type","password");
td3.appendChild(input2);
//把3个td放到tr
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//放到上一个tr后面
var tbodyNode = document.getElementsByTagName("tbody")[0];
tbodyNode.appendChild(tr);
count++;
}
function delItem(){
if(count == 1){
alert("没有了啦");
return;
}
//找到tbody最后一行
var tbody = document.getElementsByTagName("tbody")[0];
var lastChild = tbody.lastChild;
tbody.removeChild(lastChild);
count--;
}
</script>
04-08 正则表达式
<script type="text/javascript">
/*
var 变量 = /正则规则/
* 0个或多个
a-z 字母
+ 1个或多个
? 0或者1个
{n,m} 大于n,小于m,代表n-m个
{n} n=4 4个数字
注意：在js中，如果遇到符合规则的内容，就代表匹配成功
/[0-9]{2}/ "1234" 也满足
如果需要和java一样的完全匹配，需要添加边界符号
开始标记： ^
结束标记： $
/^[a-z]{2}$/
*/
/*
var str = "abc";
var reg = /^[a-z]{2}$/;
if(reg.test(str)){
}
*/
function checkName(){
var userName = document.getElementById("userName").value;
var reg = /^[a-zA-Z0-9]{4,14}$/;
var nameTip = document.getElementById("nameTip1");
if(reg.test(userName)){
nameTip.innerHTML="用户名正确".fontcolor("green");
}else{
nameTip.innerHTML="用户名有误".fontcolor("red");
}
}
function checkPwd(){
}
function checkEmil(){
var userEmil = document.getElementById("emil").value;
var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/;
var nameTip = document.getElementById("nameTip4");
if(reg.test(userEmil)){
nameTip.innerHTML="用户名正确".fontcolor("green");
}else{
nameTip.innerHTML="用户名有误".fontcolor("red");
}
}
var flag = true;
function checkAll(){
if(flag){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form action="xxxx.html" method="post" onsubmit="return checkAll()">
用户名：<input type="text" id="userName" onblur="checkName()"/><span id="nameTip1"></span><br/>
密 码：<input type="password" id="passwd" onblur="checkPwd()"/><span id="nameTip2"></span><br/>
确 认：<input type="repassword"/><span id="nameTip3"></span><br/>
邮 箱：<input type="text" id="emil" onblur="checkEmil()"/><span id="nameTip4"></span><br/>
<input type="submit" value="提交"/>
</form>
</body>
D05
05-02 xml作业
HTML:超文本标记语言
1、标签不区分大小写
2、标签可以不匹配
由w3c组织，针对html的语法缺陷，设计了xml语言
1.2 XML语言
xml，Extend Markup Lanuage 可扩展标记语言
描述带关系的数据结构（作为软件的配置文件）
作用：
1、配置文件
2、数据库
05-03 xml语法
<!--
语法：
3.1 标签
<student>学生</student>
1、分 带标签体的标签和空标签
2、标签是区分大小写
3、标签一定要配对
4、标签中间不能含有空格
5、不能以数字开头
6、如果没有指定的名称空间，标签之间不能出现:
3.2 属性
注意：
1、一个属性分为属性名和属性值。属性名和值之间使用=号分割。
2、属性值一定要使用单引号或双引号包含，不能省略，也不能单双混用。
3、一个标签内可以包含多个属性，但不能出现同名的属性。
3.4 文档声明
<?xml version="1.0" encoding="UTF-8"?>
3.5 转义字符
<student>student<name>张三</name></student>
<name> </name>
<name> </name>
3.6 CDATA块
<student>student<name>张三</name><name>李四</name></student>
把CDATA块的内容全部原样输出
<student>student
<![CDATA[
<name>李四</name><name>王五</name>
]]>
</student>
3.7 处理指令
<?xml-stylesheet type="text/css" href="03.css"?>
-->
css:
student{
width:100px;
height:100px;
background-color:red;
font-size:50px;
}
xml:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="03.css"?>
<student>
<name>张三</name>
<age>20</age>
</student>
05-04 _dom4j读取xml文件
定义xml：根标签只有一个
<?xml version="1.0" encoding="UTF-8"?>
<!--方式1
<contact id="001" name="zhangsan">
</contact>
-->
<!--方式2
<contact id="002">
<name>lisi</name>
</contact>
-->
<contact-list>
<contact id="001">
<name>wangwu</name>
</contact>
<contact id="002">
<name>tianliu</name>
</contact>
</contact-list>
4 xml解析：
4.1解析方式
1、DOM解析：JavaScript的DOM，基于对象的编程
2、SAX解析：
4.2 DOM解析的工具（叠加开发工具）
sun官方jaxp工具
jdom工具
dom4j工具，三大框架读取xml文件的程序
4.3 dom4j工具使用
1、下载dom4j-1.6.1.jar
2、导入jar
删除jar
05-05 _dom4j读取标签和属性
contact.xml
<?xml version="1.0" encoding="UTF-8"?>
<contact-list>
<contact id="001">
<name>wangwu</name>
</contact>
<contact id="002">
<name>tianliu</name>
</contact>
</contact-list>
main()
SAXReader reader = new SAXReader();
File file = new File("./src/contact.xml");
Document document = reader.read(file);
遍历集合3种方式：
List<Element> elementsList = rootElement.elements("contact");
//遍历list
for(int i=0;i<elementsList.size();i++) {
elementsList.get(i);
}
for (Element e : elementsList) {
}
//迭代器
Iterator<Element> it = elementsList.iterator();
while(it.hasNext()) {//判断是否有下一个元素
Element next = it.next();
}
SAXReader reader = new SAXReader();
File file = new File("./src/contact.xml");
Document doc = reader.read(file);
//读取属性
Element conElem = doc.getRootElement().element("contact");
//获取标签上的属性
String id = conElem.attributeValue("id");
System.out.println(id);
//想拿到id=002属性
Element conElem2 = (Element) doc.getRootElement().elements().get(1);
Element element = doc.getRootElement().element("contact");
Attribute idAttr = element.attribute("id");
idAttr.getName();
idAttr.getValue();
//所有属性值
List<Attribute> attributes = element.attributes();
for (Attribute attr : attributes) {
System.out.println(attr.getName()+"="+attr.getValue());
}
05-06 _dom4j修改xml内容
SAXReader reader = new SAXReader();
File file = new File("./src/contact.xml");
Document doc = reader.read(file);
Element nameElem = doc.getRootElement().element("contact").element("name");
String name = nameElem.getText();
System.out.println(name);
//通过父标签获取指定子标签的文本
Element element = doc.getRootElement().element("contact");
String nameElement = element.elementText("name");
//xml中的空格和换行，会被作为xml的内容被解析到
读xml：
//1、读取xml文件
SAXReader reader = new SAXReader();
File file = new File("./src/contact.xml");
Document doc = reader.read(file);
//2、创建List对象
List<Contact> list = new ArrayList<>();
//3、将xml-》list对象
//3.1读取所有contact对象
List<Element> conList = doc.getRootElement().elements("contact");
System.out.println(conList);
for (Element elem : conList) {
//3.2 创建contact对象
Contact con = new Contact();
//3.3把contact标签数据放入contact对象
String id = elem.attributeValue("id");
String name = elem.attributeValue("name");
con.setId(id);
con.setName(name);
//3.4把contact对象放入list对象
list.add(con);
}
//4、输出
for (Contact cont : list) {
System.out.println(cont.toString());
}
写xml：
//1、先读xml
Document doc = new SAXReader().read(new File("./src/contact.xml"));
//2、修改属性值
//3、写入xml
FileOutputStream fops = new FileOutputStream("e:/contact01.xml");
//4、设置输出格式
//紧凑的
OutputFormat format = OutputFormat.createCompactFormat();
//OutputFormat format2 = OutputFormat.createPrettyPrint();
//5、设置输出编码
format.setEncoding("UTF-8");
XMLWriter xmlWriter = new XMLWriter(fops,format);
xmlWriter.write(doc);
创建新的文档：
//1、创建新文档
Document doc = DocumentHelper.createDocument();
//2、添加标签
Element conListElem = doc.addElement("contact-list");
Element conElem = conListElem.addElement("contact");
//3、添加属性
conElem.addAttribute("name", "zhangsan");
conElem.addAttribute("id", "001");
FileOutputStream fops = new FileOutputStream("e:/contact01.xml");
//4、设置输出格式
//紧凑的
//OutputFormat format = OutputFormat.createCompactFormat();
OutputFormat format = OutputFormat.createPrettyPrint();
//5、设置输出编码
format.setEncoding("UTF-8");
XMLWriter xmlWriter = new XMLWriter(fops,format);
xmlWriter.write(doc);
结果：
<?xml version="1.0" encoding="UTF-8"?>
<contact-list>
<contact name="zhangsan" id="001"/>
</contact-list>
修改：
//2、修改属性值
Element conElem = doc.getRootElement().element("contact");
System.out.println(conElem);
Attribute idAttr = conElem.attribute("id");
idAttr.setValue("003");
//方法2：如果是存在就覆盖
conElem.addAttribute("id", "004");
Element nameElem = conElem.element("name");
nameElem.setText("lisi4");
删除：
Element conElem = doc.getRootElement().element("contact");
conElem.detach();
//方法2
conElem.getParent().remove(conElem);
//删除属性
Attribute idAttr = doc.getRootElement().element("contact").attribute("id");
idAttr.detach();
Java知识点复习：
/*
* 数组：
*ArrayList: 底层是数组，查询快，数组的增删慢，先挪出位置1.2
*LinkedList: 底层链表，从连头查，增删快，直接接回来
*Vector:线程安全的 1.1
*/
/**
* 输出流：
* 字符输出流
* Writer->FileWriter/BufferedWriter
*
* write(char c)
* write(char[] data)
* write(String str)
* 字节输出流
* OutputStream->FileOutputStream/BufferedOutputStream/ObjectOutputStream
* write(byte)
* write(byte[] data)
*/
06-01 回顾
06-02 xpath表达式语法详解
之前DOM的方式：
删除id=002的contact
//1、读取contact.xml
SAXReader reader = new SAXReader();
Document doc = reader.read(new File("e:/contact.xml"));
List<Element> conList = doc.getRootElement().elements("contact");
//2、删除id=002的contact标签
for (Element ele : conList) {
if(ele.attributeValue("id").equals("002")) {
//删除
ele.detach();
break;
}
}
//3、将修改后的document写出到硬盘的xml文件中
FileOutputStream fos = new FileOutputStream("e:/contact-w.xml");
OutputFormat format = OutputFormat.createPrettyPrint();
XMLWriter writer = new XMLWriter(fos,format);
writer.write(doc);
writer.close();
1.1作用：快速地查询到xml文件中节点
当xml层级很深时，如何快速定位到所需标签，就用的xpath技术，xpath属于dom4j插件
1、找到jar 在dom4j库中 jaxen-1.1-beta-6.jar
E:\javaee\tools\dom4j-1.6.1\dom4j-1.6.1\lib\jaxen-1.1-beta-6.jar
使用xpath
使用xpath：
//1、读取contact.xml
SAXReader reader = new SAXReader();
Document doc = reader.read(new File("e:/contact.xml"));
//2、查询到id属性值为002的contact标签
Element conElem = (Element)doc.selectSingleNode("//contact[@id='002']");
//3、删除id=002的contact标签
conElem.detach();
//4、将修改后的document写出到硬盘的xml文件中
FileOutputStream fos = new FileOutputStream("e:/contact-w.xml");
OutputFormat format = OutputFormat.createPrettyPrint();
XMLWriter writer = new XMLWriter(fos,format);
writer.write(doc);
writer.close();
xpath语法：文档：G:\架构师\javaee\day06xml\day06xml\XPathTutorial.zip
。。。。。。
06-03 xpath表达式语法详解+案例
//3、利用xpath方法查询xml文件
String xpath = "";
//2.1 /
//xpath = "/contact-list";//根标签contact-list
xpath = "/contact-list/contact";//根标签下的子标签contact
//2.2 //
xpath = "//contact";//选取所有contact标签(不分层次)
xpath = "//contact/name";//选取所有父标签是contact的name标签
//2.3 *
xpath = "/contact-list/*";//选取根标签contact-list下的子标签
xpath = "/contact-list//*";//选取根标签contact-list下所有标签
//2.4 []
xpath = "//contact[1]";//第一个contact标签
xpath = "//contact[last()]";
//2.5 @
xpath = "//@id";//选择所有id属性
xpath = "//contact[@id]";//所有包含id属性的标签
//2.6 =
xpath = "//contact[@id='002']";
//2.7 and 逻辑与
//选取id属性为002，且name属性为eric的contact标签
xpath = "//contact[@id='002' and @name='eric']";
//2.8 选取文本 text()
xpath = "//name[1]/text()";
xpath = "//contact[@id='001']/name[1]/text()";
xpath = "//name[text()='陈六']";
List<Node> list = doc.selectNodes(xpath);
for (Node node : list) {
System.out.println(node);
}
案例：
<?xml version="1.0" encoding="utf-8"?>
<user-list>
<user id="001">
<name>eric1</name>
<password>123456</password>
</user>
<user id="002">
<name>eric2</name>
<password>123456</password>
</user>
<user id="003">
<name>eric3</name>
<password>123456</password>
</user>
</user-list>
注：未调试成功
//1、获取用户输入的用户名和密码
BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
System.out.println("请输入用户名：");
String name = br.readLine();
System.out.println("name:"+name);
System.out.println("请输入密码：");
String pwd = br.readLine();
//2、在user.xml中，查找name，password标签
Document doc = new SAXReader().read(new File("./src/user.xml"));
System.out.println("doc:"+doc);
Element nameElem = (Element) doc.selectSingleNode("//user/name[text()='"+name+"']");
System.out.println(nameElem.attributeValue("name"));
if(nameElem != null){
//获取父标签
Element userElem = nameElem.getParent();
//判断password子标签的文本内容
String dbpwd = userElem.elementText("password");
if(pwd.equals(dbpwd)) {
System.out.println("登录成功");
} else{
System.out.println("密码错误，请重新输入");
}
} else{
//用户名不存在
System.out.println("用户名不存在");
}
06-04 xpath案例
Document doc = new SAXReader().read(new File("./src/day06/personList.html"));
System.out.println(doc);
//获取title标签文本
Element titleElem = (Element) doc.selectSingleNode("//title");
System.out.println(titleElem.getText());
//获取tbody/tr
List<Element> trList = (List<Element>)doc.selectNodes("//tbody/tr");
System.out.println("编号\t姓名\t性别\t年龄\t地址\t电话");
for (Element trElem : trList) {
//获取第一个td内容
//((Element)trElem.elements("td").get(0)).getText();
String id = trElem.selectSingleNode("td[1]").getText();
String name = trElem.selectSingleNode("td[2]").getText();
String gender = trElem.selectSingleNode("td[3]").getText();
String age = trElem.selectSingleNode("td[4]").getText();
String address = trElem.selectSingleNode("td[5]").getText();
String phone = trElem.selectSingleNode("td[6]").getText();
System.out.println(id+"\t"+name+"\t"+gender+"\t"+age+"\t"+address+"\t"+phone+"\t");
}
06-05 sax解析原理
xml解析方式：
dom解析：原理xml解析引擎一次性把整个文件加载进内存，在内存创建一颗document树
问题：大文件，使用dom解析效率低，会导致内存溢出
编程方式：面向对象编程方式
sax解析：原理加载一点，读取一点，处理一点。优势：占用内存比较小
编程方式：基于事件编程方式
2.2 SAX解析工具
sun公司官方的sax解析工具，在jdk中包含sax解析工具的api
2.3 SAX解析的开发步骤：
package day06;
import java.io.File;
import java.io.IOException;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;
import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;
public class Demo6 {
public static void main(String[] args) {
// TODO Auto-generated method stub
try {
//1、创建SAXParser解析对象
SAXParser parser = SAXParserFactory.newInstance().newSAXParser();
//2、解析xml文件
/**
* 参1：需要解析的xml文件
* 参2：指定的DefaultHandler
*/
/**
* 事件编程模式三要素:
* 事件源：xml文件
* 事件：解析到开始标签(包含属性)，解析到结束标签，解析文本内容
* 监听器：DefaultHandler
*/
try {
parser.parse(new File("./src/contact.xml"), new MyDefaultHandler1());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} catch (ParserConfigurationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SAXException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private static class MyDefaultHandler1 extends DefaultHandler {
/**
* 遇到开始标签触发方法
*
* qName:表示当前读到的开始标签名称
* attributes:属性列表
*/
@Override
public void startElement(String uri, String localName, String qName, Attributes attributes)
throws SAXException {
// TODO Auto-generated method stub
//super.startElement(uri, localName, qName, attributes);
System.out.println("开始标签名："+qName);
}
/**
* 遇到结束标签触发方法
*
* qName:表示当前读到的结束标签名称
*/
@Override
public void endElement(String uri, String localName, String qName) throws SAXException {
// TODO Auto-generated method stub
//super.endElement(uri, localName, qName);
System.out.println("结束标签名："+qName);
}
/**
* 遇到文本内容触发此方法
* 如何获取当前读到的内容
* char[]:表示到目前为止读到的文本内容
* 数组：长城 男 1245
* start:表示当前内容的起始位置 男的位置就是start 20
* length:表示当前内容的长度
*/
@Override
public void characters(char[] ch, int start, int length) throws SAXException {
// TODO Auto-generated method stub
//super.characters(ch, start, length);
//获取当前读到的内容
String curContent = new String(ch,start,length);
System.out.println(curContent);
}
/**
* 遇到xml文档开始，只调用一次
*/
@Override
public void startDocument() throws SAXException {
// TODO Auto-generated method stub
super.startDocument();
}
/**
* 遇到xml文档结尾，只调用一次
*/
@Override
public void endDocument() throws SAXException {
// TODO Auto-generated method stub
super.endDocument();
}
}
}
06-06 sax案例
读出文件：
package day06;
import java.io.File;
import java.io.IOException;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;
import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;
public class Demo7 {
public static void main(String[] args) {
// TODO Auto-generated method stub
try {
//1、创建SAXParser解析对象
SAXParser parser = SAXParserFactory.newInstance().newSAXParser();
//2、解析xml文件
try {
MyDefaultHandler2 handler2 = new MyDefaultHandler2();
parser.parse(new File("./src/day06/contact.xml"), handler2);
String content = handler2.getContent();
System.out.println(content);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} catch (ParserConfigurationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SAXException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private static class MyDefaultHandler2 extends DefaultHandler {
private StringBuffer sb = new StringBuffer();
public String getContent() {
return sb.toString();
}
/**
* qName:开始标签的名字
* attributes:属性
*/
@Override
public void startElement(String uri, String localName, String qName, Attributes attributes)
throws SAXException {
// TODO Auto-generated method stub
super.startElement(uri, localName, qName, attributes);
sb.append("<"+qName);
//属性列表
if(attributes != null) {
//遍历属性
for (int i = 0; i < attributes.getLength(); i++) {
String name = attributes.getQName(i);
String value = attributes.getValue(i);
sb.append(" "+name+"=\""+value+"\"");
}
}
sb.append(">");
}
@Override
public void endElement(String uri, String localName, String qName) throws SAXException {
// TODO Auto-generated method stub
super.endElement(uri, localName, qName);
sb.append("</"+qName+">");
}
@Override
public void characters(char[] ch, int start, int length) throws SAXException {
// TODO Auto-generated method stub
super.characters(ch, start, length);
String content = new String(ch,start,length);
sb.append(content);
}
}
}
06-07 sax封装对象案例
package day06;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;
import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;
public class Demo8 {
public static void main(String[] args) {
// TODO Auto-generated method stub
try {
//1、创建SAXParser解析对象
SAXParser parser = SAXParserFactory.newInstance().newSAXParser();
//2、解析xml文件
try {
MyDefaultHandler2 handler2 = new MyDefaultHandler2();
parser.parse(new File("./src/day06/contact.xml"), handler2);
//String content = handler2.getContent();
//System.out.println(content);
List<Contact> conList = handler2.getList();
for (Contact contact : conList) {
System.out.println(contact);
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} catch (ParserConfigurationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SAXException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private static class MyDefaultHandler2 extends DefaultHandler {
//用于存储所有contact对象信息
List<Contact> conList = new ArrayList<Contact>();
//用于存储一个contact标签中的信息
private Contact contact = null;
public List<Contact> getList() {
return conList;
}
//用于记录当前标签是哪个
private String curTag;
/**
* 思路：
* 1、创建一个新的Contact对象，用于封装contact标签信息
* 2、把当前读到的这个contact标签信息封装到Contact对象中
* 3、把封装好的Contact对象放入List中
*/
/**
* qName:开始标签的名字
* attributes:属性
*/
@Override
public void startElement(String uri, String localName, String qName, Attributes attributes)
throws SAXException {
// TODO Auto-generated method stub
super.startElement(uri, localName, qName, attributes);
curTag = qName;
//在读到contact开始标签时创建contact对象
if(qName.equals("contact")) {
//创建Contact对象
contact = new Contact();
String id = attributes.getValue("id");
contact.id = id;
}
}
@Override
public void endElement(String uri, String localName, String qName) throws SAXException {
// TODO Auto-generated method stub
super.endElement(uri, localName, qName);
//把curTag置null
curTag = null;
//3、在读到contact结束标签时把contact对象放到List中
if(qName.equals("contact")) {
//创建Contact对象
conList.add(contact);
}
}
//文本内容(包含空格换行)
@Override
public void characters(char[] ch, int start, int length) throws SAXException {
// TODO Auto-generated method stub
super.characters(ch, start, length);
String content = new String(ch,start,length);
//子标签中文本内容封装到Contact对象
if("name".equals(curTag)) {
contact.name = content;
} else if("gender".equals(curTag)) {
contact.gender = content;
} else if("phone".equals(curTag)) {
contact.phone = content;
} else if("email".equals(curTag)) {
contact.email = content;
} else if("address".equals(curTag)) {
contact.address = content;
}
}
}
static class Contact {
public String id;
public String name;
public String gender;
public String phone;
public String email;
public String address;
@Override
public String toString() {
return "Contact [id=" + id + ", name=" + name + ", gender=" + gender + ", phone=" + phone + ", email="
+ email + ", address=" + address + "]";
}
}
}
DOM解析、SAX解析区别
06-08 dtd约束
3、XML三大内容：
语法：w3c组织对xml文件的编程规则规范
解析：
约束：由开发者指定的对xml文件内容规范
3.1、什么是约束？
3.2、约束分类
DTD约束：相对简单的，数据类型简单
场景：hibernate struts2
Schema约束：相对复杂，功能强大，数据类型非常丰富，为了替代DTD
tem1：xml和dta
<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
tem2：dtd和xml分离
note.dtd
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
note.xml
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
SYSTEM :本地文件
PUBLIC:网络上的
约束标签：
EMPTY:空标签
PCDATA:普通字符串(不能包含子标签)
ANY:任意内容(可以包含子标签)
顺序问题：先后不能错
数量问题：
子元素，有且仅有1个
+ 1个或多个
* 0个或多个
？ 0个或1个
<!ELEMENT note (message+)>
约束属性：
<!ATTLIST 元素名称 属性名称 属性类型 默认值>
<!ATTLIST body id CDATA #REQUIRED>
<body id="001">Don't forget me this weekend</body>
属性类型：w3c文档
06-09 schema约束
名称空间约束xml
<?xml version="1.0" encoding="UTF-8"?>
<itcast:书架 xmlns:itcast="http://www.itcast.cn"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
**xsi:schemaLocation="http://www.itcast.cn book.xsd"**>
<itcast:书 id="1">
<itcast:书名>true</itcast:书名>
<itcast:作者>老张</itcast:作者>
<itcast:售价>2015-06-04</itcast:售价>
</itcast:书>
</itcast:书架>
book.xsd
<?xml version="1.0" encoding="UTF-8" ?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.itcast.cn"
elementFormDefault="qualified">
<xs:element name='书架' >
<xs:complexType>
<xs:sequence maxOccurs='unbounded' >
<xs:element name='书' >
<xs:complexType>
<xs:sequence>
<xs:element name='书名' type='xs:boolean'></xs:element>
<xs:element name='作者' type='xs:string' fixed="老张" />
<xs:element name='售价' type='xs:date' />
</xs:sequence>
<xs:attribute name="id" type="xs:integer"></xs:attribute>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
D07 tomcat服务器
07-01 作业讲解_通讯录系统
Contact.java
package cn.nubia;
public class Contact {
public String id;
public String name;
public String gender;
public String phone;
public String email;
public String address;
public Contact() {
super();
}
public Contact(String id, String name, String gender, String phone, String email, String address) {
super();
this.id = id;
this.name = name;
this.gender = gender;
this.phone = phone;
this.email = email;
this.address = address;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
@Override
public String toString() {
return "Contact [id=" + id + ", name=" + name + ", gender=" + gender + ", phone=" + phone + ", email=" + email
+ ", address=" + address + "]";
}
}
ContactDao.java
package cn.nubia;
import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.SAXReader;
import org.dom4j.io.XMLWriter;
public class ContactDao {
public static void insert(Contact contact) throws Exception {
//把联系人保存到xml
//1、把e：//contact.xml文件读进来
Document doc = new SAXReader().read(new File("e:/contact.xml"));
//2、修改document对象
Element rootElem = doc.getRootElement();
//添加标签
Element conElem = rootElem.addElement("contact");
//添加属性
//使用UUID的算法生成随机且唯一的字符串
conElem.addAttribute("id", contact.getId());
//添加子标签
conElem.addElement("name").setText(contact.getName());
conElem.addElement("gender").setText(contact.getGender());
conElem.addElement("phone").setText(contact.getPhone());
conElem.addElement("email").setText(contact.getEmail());
conElem.addElement("address").setText(contact.getAddress());
//3、把修改后的对象写到原来xml中
FileOutputStream foups = new FileOutputStream("e:/contact.xml");
OutputFormat format = OutputFormat.createPrettyPrint();
XMLWriter writer = new XMLWriter(foups,format);
writer.write(doc);
writer.close();
}
public static void delete(String id) throws Exception {
//把联系人保存到xml
//1、把e：//contact.xml文件读进来
Document doc = new SAXReader().read(new File("e:/contact.xml"));
//2、删除contact标签
//2.1、根据id查询对应的contact标签
Element conElem = (Element) doc.selectSingleNode("//contact[@id='"+id+"']");
//2.2、删除
conElem.detach();
//3、把修改后的对象写到原来xml中
FileOutputStream foups = new FileOutputStream("e:/contact.xml");
OutputFormat format = OutputFormat.createPrettyPrint();
XMLWriter writer = new XMLWriter(foups,format);
writer.write(doc);
writer.close();
}
public static void update(Contact contact) throws Exception {
//把联系人保存到xml
//1、把e：//contact.xml文件读进来
Document doc = new SAXReader().read(new File("e:/contact.xml"));
//2、修改document对象
//2.1根据id查询对应的contact标签,xpath
Element conElem = (Element) doc.selectSingleNode("//contact[@id='"+contact.getId()+"']");
conElem.element("name").setText(contact.getName());
conElem.element("gender").setText(contact.getGender());
conElem.element("phone").setText(contact.getPhone());
conElem.element("email").setText(contact.getEmail());
conElem.element("address").setText(contact.getAddress());
//3、把修改后的对象写到原来xml中
FileOutputStream foups = new FileOutputStream("e:/contact.xml");
OutputFormat format = OutputFormat.createPrettyPrint();
XMLWriter writer = new XMLWriter(foups,format);
writer.write(doc);
writer.close();
}
public static List<Contact> query() throws Exception {
//把联系人保存到xml
//1、把e：//contact.xml文件读进来
Document doc = new SAXReader().read(new File("e:/contact.xml"));
//2、获取所有contact标签
List<Element> conList = (List<Element>) doc.getRootElement().elements("contact");
List<Contact> list = new ArrayList<Contact>();
for (Element element : conList) {
//2.1、创建contact对象
Contact contact = new Contact();
//2.2、把contact标签信息封装到contact对象中
contact.setId(element.attributeValue("id"));
contact.setName(element.elementText("name"));
contact.setGender(element.elementText("gender"));
contact.setPhone(element.elementText("phone"));
contact.setEmail(element.elementText("email"));
contact.setAddress(element.elementText("address"));
//2.3、把contact对象放入List
list.add(contact);
}
return list;
}
}
Main.java
package cn.nubia;
import java.io.BufferedReader;
import java.io.File;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.List;
import java.util.UUID;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
public class Main {
public static void main(String[] args) throws Exception {
// TODO Auto-generated method stub
//使用UUID的算法生成随机且唯一的字符串
String uuid = UUID.randomUUID().toString();
System.out.println(uuid);
BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
while(true) {
//1、查询菜单
System.out.println("===============");
System.out.println("[1] 增加联系人");
System.out.println("[2] 删除联系人");
System.out.println("[3] 修改联系人");
System.out.println("[4] 查询联系人");
System.out.println("[Q] 退出程序");
System.out.println("===============");
//2、获取用户输入
System.out.println("请输入你的选择");
String command = br.readLine();
if ("1".equals(command)) {
insetContact();
}else if("2".equals(command)) {
deleteContact();
}else if("3".equals(command)) {
updateContact();
}else if("4".equals(command)) {
queryContacts();
}else if("Q".equals(command)) {
break;
}
}
}
private static void queryContacts() throws Exception {
// TODO Auto-generated method stub
List<Contact> contactsList = ContactDao.query();
System.out.println(contactsList);
}
private static void updateContact() throws Exception {
String id = "001";
Contact contact = new Contact(id, "孙杨", "男", "15686201111", "gordon@nubia.cm", "唐嫣南路");
ContactDao.update(contact);
System.out.println("update success");
}
private static void deleteContact() {
// TODO Auto-generated method stub
//ContactDao.delete(contact);
}
private static void insetContact() throws Exception {
String id = UUID.randomUUID().toString();
Contact contact = new Contact(id, "孙杨", "男", "15686201111", "gordon@nubia.cm", "唐嫣南路");
ContactDao.insert(contact);
System.out.println("insert success");
}
}
07-02 web服务软件作业详解
/*
*输入流：
* 输入字节流：InputStream
* FileInputStream
* BufferedInputStream
*
* 方法：
* read() 读取一个字节
* read(byte[] data) 读取多个字节
*
* 输入字符流：Reader
* FileReader
* BufferedReader
* 方法：
* read()
* read(char[] data) 读取多个字符
*/
//1、创建ServerSocket对象,监听某个端口
ServerSocket server = new ServerSocket(8888);
System.out.println("服务器正在启动...");
while(true) {
//2、接收客户端连接
Socket socket = server.accept();
//3、把本地的hello.html的内容发送给socket客户端
//3.1、构建数据发送通道
OutputStream os = socket.getOutputStream();
//3.2、读取本地hello.html文件内容
FileInputStream fis = new FileInputStream("e:/web_server/06.转义字符.html");
//边读边写
/*int len1 = 0;
while((len1 = fis.read())!= -1) {
os.write(len1);
}*/
//使用字节数组形式
byte[] buffer = new byte[1024];
int len2 = 0;
while((len2 = fis.read(buffer))!= -1) {
//os.write(buffer);
os.write(buffer,0,len2);
}
//4、关闭资源
os.close();
fis.close();
}
07-03 tomcat服务器基本使用
运行class和jar包
配置首页
07-05 网站部署+添加站点
tomcat与网站是在一起的
虚拟网站的配置：
tomcat和网站不在一起时：在E:\javaee\server\apache-tomcat-7.0.73-windows-x64\apache-tomcat-7.0.73\conf\server.xml
<!--配置虚拟网站
docBase:网站绝对路径
path:访问网站的名称
-->
<Context docBase="C:\web" path="/nubia"/>
path不写内容，表示当前网站是默认网站，优先于ROOT的网站
优点：软件和网站分离
弊端：修改server.xml文件，风险比较大
5.3 通过添加xml文件的方式配置虚拟网站
不动conf\server.xml
修改：conf\Catalina\localhost\newsnubia.xml
访问：http://localhost:8080/newsnubia/
<?xml version="1.0" encoding="utf-8"?>
<!--配置虚拟网站
docBase:网站绝对路径
path:访问网站的名称
-->
<Context docBase="C:\web"/>
隐藏端口：
站点配置：目录在\conf\server.xml
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log." suffix=".txt"
pattern="%h %l %u %t "%r" %s %b" />
</Host>
name="localhost" appBase="webapps"
站点和网站的关系?
一个站点放置很多网站，放网站的目录是webapps
添加站点步骤：
1、目录在\conf\server.xml
<!--新建站点-->
<Host name="www.nubia.com" appBase="C:\baidu"
unpackWARs="true" autoDeploy="true"
xmlValidation="false" xmlNamespaceAware="false">
</Host>
2、在本地的hosts文件中添加一个站点和ip地址的映射
C:\Windows\System32\drivers\etc\hosts
127.0.0.1 www.nubia.com
访问：http://www.nubia.com/zhidao/zhidao.html
注：未调试通
7 动态网站的开发
html/css/javascript 前端（静态网页）
静态网站： 只包含静态网页
动态网站： 既有静态网页，可以有动态网页
静态网页：用户多个访问这个网页时，网页的源码是不会改变的。
动态网页：用户多个访问这个网页时，网页的源码是有可能改变的。
07-06 开发servlet程序
使用servlet技术开发动态网页
1）servlet就是一个普通java类，继承HttpServlet类
2）servlet交给tomcat服务器运行（web服务器软件）！！！
jdk 是javase
jdk没有自带serverlt javaee的lib，需要导包
E:\javaee\server\apache-tomcat-7.0.73-windows-x64\apache-tomcat-7.0.73\lib\servlet-api.jar
运行servlet程序：使用tomcat服务器
package b_servlet;
import java.io.IOException;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
//super.doGet(req, resp);
resp.setContentType("text/html;charset=utf-8");
//向浏览器输出内容
resp.getWriter().write("当前时间为："+ new Date());
}
}
1、找到程序字节码文件，在代码目录对应的目录
E:\javaeeprj\day07\bin\b_servlet
2、在tomcat下建立目录
apache-tomcat-7.0.73\webapps\nubiaweb\WEB-INF\classes\
3、需要根据java类的包结构拷贝对应class
4、外部要访问WEB-INF内容需要配置web.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0"
metadata-complete="true">
<servlet>
<!--servlet名称，自定义-->
<servlet-name>HelloServlet</servlet-name>
<servlet-class>b_servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<!--servlet名称，和上面的名称保持一致-->
<servlet-name>HelloServlet</servlet-name>
<!--公开给外部访问这个servlet的名称(路径)-->
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>
5、访问
http://localhost:8080/nubiaweb/hello
右键查看源码：
当前时间为：Tue Dec 18 17:51:30 CST 2018
手动开发servlet程序
1)编写一个普通的java类，继承HttpServlet类，覆盖doGet方法(
注意： 到tomcat的lib目录下拷贝servlet-api.jar导入到你的项目中
public class HelloServlet extends HttpServlet{
//覆盖doGet
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//向浏览器输出内容
resp.getWriter().write("当前时间为："+new Date());
}
}
2)把servlet交给tomcat服务器运行！！！！！！
2.1 把servlet对应的class文件拷贝到tomcat的某个项目（bbs）的WEB-INF/classes目录下
2.2 在bbs项目的WEB-INF/web.xml文件配置servlet
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<!--配置servlet -->
<servlet>
<!-- servlet名称，自定义-->
<servlet-name>HelloServlet</servlet-name>
<!-- servlet类的全名：包名+类名 -->
<servlet-class>gz.itcast.b_servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<!-- servlet名称，和上面的名称保持一致 -->
<servlet-name>HelloServlet</servlet-name>
<!-- 公开给外部访问这个servlet的名称（路径） -->
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>
3.通过URl访问这个servlet
http://localhost:8080/bbs/hello
工具开发servlet程序
1)创建一个bbs的web project
2）在WebRoot下编写静态网页
3）在src下编写动态网页
3.1 在src右键选择 “servlet”
3.2 写上servlet的包，名，选择覆盖doGet方法 -> next
3.3 修改servlet的名称，修改访问servlet的url -> finished
4)myecplise关联tomcat服务器
4.1 window-> preferences -》 搜索“tomcat” -> 找到“tomcat6.x”
4.2 选择 tomcat的根目录
4.3 把disable -> enable
5)部署网站
5.1 点击发布图标 -> 选择网站- 》 选择发布的tomcat服务器
-> ok
6)访问：
静态文件： http://localhost:8080/bbs/index.html
动态文件： http://locahost:8080/bbs/hello
总结
1）web服务软件作用：把本地资源共享给外部访问
2）tomcat服务软件基本使用：
2.1 启动： startup.bat
2.2 关闭： shutdown.bat
3）网站的目录结构
|-webRoot 根目录
|-文件
|-WEB-INF
|-classes
|-lib
web.xml 配置servlet,配置首页
4）部署网站的三种方式
4.1 直接拷贝到webapps目录
4.2 虚拟网站
server.xml
<Context docBase="网站的绝对路径" path="/访问网站名称"/>
4.3 添加xml文件方式配置虚拟网站
在conf/Catalina/locahost
添加bbs.xml
<Context docBase="网站的绝对路径"/>
访问网站名称就是xml的文件名称
5）增加站点
5.1 server.xml添加host标签
5.2 修改hosts文件
5.3 访问站点使用站点名称
D08 http
08-01 http协议入门
有内核的浏览器：IE、谷歌、火狐
tcp/ip协议：专注的是客户端和服务端之间的数据是否传输成功
http协议：就是在tcp/ip协议的基础上封装的一套协议，专注的客户端和服务端数据传输的格式是否一致
08-02 http请求信息
GET / HTTP/1.1请求行
Host: www.baidu.com请求头
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
2.1请求行
http协议版本：
http1.0：当浏览器和服务器连接之后，在一次连接中只能发一次请求
http1.1：发多次
常见问题：
在一个html页面，页面上有三张图片，访问这个html页面，问：一共发出几次请求?
答案：4次，html一次，图片资源3次
08-03 HttpServletRequest对象使用
08-04 http请求案例（浏览器类型+防止非法链接+获取请求参数数据）
08-05 获取请求参数+web项目断点调式
08-06 http响应详解+http响应案例
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
