JavaWeb(HTML +css+js+Servlet....)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

注意
1.不要把函数命名为add()，不然容易和自带的冲突报错
2.是createElement 不要把create中的e写掉了
3.记得是getElementsByTaxName和getElementsByName，返回数组，不要掉e
4.注意if,while判断时，是==，不要漏掉只写一个=
5.目前java不支持new泛型数组快捷键
1.Eclipse 右键重构提取方法
2.覆盖方法 alt+shift+s 选择覆盖
3.set 和 get 属性值 alt+shift+s 选择 stters and getters
4.重写toString方法 alt+shift+s
5.ctrl+1快速修正
6.ctrl+alt+↓快速复制当前行
7.ctrl+shift+←，选择上个单词
8.end光标移到末尾 home光标移到开头
9.alt+/快速提示
10.ctrl+shift+/ 多行注释 ctrl+shift+\取消注释 ctrl+/ 单行注释
11.main方法生成：alt+/ System.out.println(); syso alt+/
12.增强for循环 for alt+/ 选择foreach
13.ctrl+F11 运行java文件
14.ctrl+/ 快速注释取消注释
15.ctrl+D 删除当前行
16.ctrl+shift+o自动导包
17.ctrl+shift+f 代码格式化或者 alt+shift+s F 格式化
18.17 ctrl+f 查找
19.end home
20.菜单栏windows--preferences--gerneral--keys
这里是设置快捷键的界面，
找到new(Class)，就是新建Class，自己设置个就可以了
我设置的是 shift+N
21.debug F6：单步执行 F8：结束断点跳到下一个断点
22.复制限定名（包+类）选中类名鼠标右键+YDay 1
1. html简介 * 什么是html？
- HyperText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴，使用html可以轻松实现这样操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
** 网页语言：
* 第一个html程序。
- 创建java文件.java
** 先编译，然后再运行（jvm）
- html后缀是 .html .htm
** 直接通过浏览器就可以运行
- 代码
** 这是我的<font size="5" color="red">第一个html程序！</font> * html的规范（遵循）
1、一个html文件开始标签和结束的标签 <html> </html>
- 定义一个java方法 { }
2、html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显示在页面上的内容都写在body里面</body>
3、html的标签有开始标签，也要有结束标签
- <head></head>
4、html的代码不区分大小写的
5、有些标签，没有结束标签，在标签内结束
- 比如换行 <br/> break row
添加水平线 <hr/>2. html的操作思想
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化。一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。3. 文字标签和注释标签* 文字标签：修改文字的样式
- <font></font>
- 属性：
* size: 文字的大小取值范围 1-7,超出了7，默认还是7
* color：文字颜色
- 两种表示方式
** 英文单词：red green blue black white yellow gray......
** 使用十六进制数表示 #ffffff : RGB
- 通过工具实现不同的颜色 #66cc66* 注释标签
- java注释几种？三种
- html的注释： 4. 标题标签、水平线标签和特殊字符
* 标题标签
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 从h1到h6，大小是依次变小，同时会自动换行 * 水平线标签
- <hr/>
- 属性
** size: 水平线的粗细取值范围 1-7
** color: 颜色
- 代码
<hr size="5" color="blue"/> * 特殊字符
- 想要在页面上显示这样的内容 <html>:是网页的开始！
- 需要对特殊字符进行转义
* < <
* > >
* 空格： 
* & : &5. 列表标签
- 比如现在显示这样的效果
传智播客
财务部
学工部
人事部
** <dl> </dl>: 表示列表的范围
** 在dl里面 <dt></dt>: 上层内容
** 在dl里面 <dd></dd>：下层内容
- 代码
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl> - 想要在页面上显示这样的效果
1. 财务部
2. 学工部
3. 人事部 a. 财务部
b. 学工部
c. 人事部 i. 财务部
ii. 学工部
iii. 人事部 ** <ol></ol> : 有序列表的范围
- 属性 type：设置排序方式 1(默认) a i
** 在ol标签里面 <li>具体内容</li>
- 代码
<ol>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol> - 想要在页面上显示这样的效果
特殊符号（方框）财务部
特殊符号（方框）学工部 ** <ul></ul> : 表示无序列表的范围
属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
在ul里面 <li></li>
- 代码
<ul ultype=”circle”sa>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>6. 图像标签
* <img src="图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度 - alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
** 有些浏览器下不显示（没有效果）7. 路径的介绍
* 分类：两类
** 绝对路径
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg ** 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- <img src="b1.jpg" alt="这是一个美女"/> ** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg -- C:\Users\asus\Desktop\0413\day01\code\ 4.html
-- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg ** 图片在html文件的上层目录 --- C:\Users\asus\Desktop\0413\day01\ code\4.html
--- C:\Users\asus\Desktop\0413\day01\ c.png *** html文件所在的目录和图片是一个目录
** 图片和html文件是什么关系？
- 图片在html的所在目录的上层目录 day01
** 怎么表示上层路径 ../
- ../: day01
-- ../c.png
** 想要表示上层的上层 ../../8. 超链接标签
* 链接资源(******)
- <a href="链接到资源的路径"> 显示在页面上的内容 </a>
** href: 链接的资源的地址
** target：设置打开的方式，默认是在当前页打开
-- _blank : 在一个新窗口打开
-- _self: 在当前页打开默认
eg：<a href="hello.html" target = “_blank”> 显示在页面上的内容 </a> - 当超链接不需要到任何的地址在href里面加#
- <a href="#">这是一个超链接2</a> * 定位资源
** 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href="#top">回到顶部</a> ** 引入一个标签 pre：原样输出9. 表格标签（重要的标签）
* 可以对数据进行格式化，使数据显示更加清晰 * <table></table>: 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度 ** 在table里面 <tr></tr>
- 设置对齐方式 align： left center right *** 在tr里面 <td></td>
- 设置显示方式 align： left center right *** 使用th也可以表示单元格
- 表示可以实现居中和加粗 * 代码<table border="1" bordercolor="blue" cellspacing="0" width="400" height = "150">
<caption>人员信息</caption>
<tr>
<td align = "center"><strong>姓名</strong></td>
<td><font size="" color="red">年龄</font></td>
<td>性别</td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
</tr> </table> * 画图分析表格的写法
- 首先定义一个表格的范围使用table
- 定义一行使用 tr
- 定义一个单元格使用 td
** 操作技巧：
- 首先数有多少行，数每行里面有多少个单元格 ** 表格的标题
<caption></caption> ** 合并单元格
- rowspan：跨行
** <td rowspan="3">人员信息</td>
- colspan：跨列
** <td colspan="3">人员信息</td>10. 表单标签（今天最重要的标签）
* 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现 * <form></form>: 定义一个表单的范围
- 属性
** action：提交到地址，默认提交到当前的页面
** method: 表单提交方式
- 常用的有两种 get和post，默认是get请求 ** 面试题目： get和post区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制 ** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传） ** 输入项：可以输入内容或者选择内容的部分
- 大部分的输入项使用 <input type="输入项的类型"/> ******* 在输入项里面需要有一个name属性 *** 普通输入项：<input type="text"/>
*** 密码输入项：<input type="password"/> *** 单选输入项：<input type="radio"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值 **** 实现默认选中的属性
-- checked="checked" *** 复选输入项：<input type="checkbox"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值 **** 实现默认选中的属性
-- checked="checked" *** 文件输入项（在后面上传时候用到）
- <input type="file"/> *** 下拉输入项（不是在input标签里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select> - 默认选择
*** selected="selected" *** 文本域
<textarea cols="10" rows="10"></textarea> *** 隐藏项（不会显示在页面上，但是存在于html代码里面）
<input type="hidden" /> *** 提交按钮
<input type="submit"/>
<input type="submit" value="注册"/> - file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?sex=on&love=on&love=on&birth=1991 当在输入项里面写了name属性之后
- file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid= - file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?
phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid= ** ?输入项name的值=输入的值&
** 参数类似于key-value形式 *** 使用图片提交
<input type="image" src="图片路径"/> *** 重置按钮：回到输入项的初始状态
<input type="reset"/> *** 普通按钮(和明天讲js在一起使用的)
<input type="button" value=""/>eg:
<body>
<form action ="pic.html" method = "post"> 账号:<input type = "text" name = "phone"/><br/>
密码:<input type= "password" name = "password"/><br/>
性别:<input type="radio" name = "sex" value = "women" checked = "checked"/>女 <input type="radio" name = "sex" value = "man"/>男<br/>
爱好:<input type = "checkbox" name = love value ="bas" checked = "checked" />篮球 <input type = "checkbox" name = love value ="foot"/>足球 <input type = "checkbox" name = love value= "ten"/>羽毛球<br/>
文件:<input type = "file"/><br/> 
生日:<select name = "birth">
<option value = "0">请选择</option>
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993" selected = "sellected">1993</option>
</select>
<br/>

自我描述:<textarea cols = "10" rows="10" name = "tex"> </textarea> 
<input type = "hidden" name ="hid"/> </br> 
<input type = "submit" value ="注册"/></br> 
<input type = "reset" value ="重置注册"/></br> 
<input type = "button" value = "普通按钮"></br> 
<input type ="image" src="2.jpg"/> </form> </body>11. 案例：使用表单标签实现注册页面
- 使用表格实现页面效果
- 超链接不想要他有效果 href="#"
- 如果表格里面的单元格没有内容，使用空格作为占位符  
- 使用图片提交表单 <input type="image" src="图片的路径"/><body>
<form action = "pic.html">
<h2>免费注册</h2><br/>
<table width= "100%">
<tr>
<td align = "right">注册邮箱</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td align = "right">&nbsp</td>
<td><font size="2" color="">你还可以使用<a href = "#">账号</a>注册或者<a href="#">手机号</a>注册</font></td>
</tr>
<tr>
<td align = "right">创建密码</td>
<td><input type = "password" name = "pwd"/></td>
</tr>
<tr>
<td align = "right">真实姓名</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td align = "right">性别</td>
<td><input type="radio" name = "male" value="women">女
<input type="radio" name = "male" value="men">男
</td>
</tr>
<tr>
<td align = "right">生日</td>
<td>
<select name="year">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>年
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>月
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>日
</td>
</tr>
<tr>
<td align = "right">我正在</td>
<td>
<select name="state">
<option value="study">上学</option>
<option value="work">工作</option>
</select>
</td>
</tr>
<tr>
<td>&nbsp</td>
<td><img src="2.jpg" height="100"><a href ="#">看不清？</a></td>
</tr>
<tr>
<td align = "right">验证码</td>
<td><input type = "text"></td>
</tr>
<tr>
<td>&nbsp</td>
<td><input type ="image" src = "1.jpg" height = "50"></td>
</tr>
</table>
</form>
</body>12. html中的其他的常用标签的使用
b : 加粗 eg: <b>天之道</b>
s ：删除线
u ：下划线
i ：斜体 pre ：原样输出 sub : 下标
sup : 上标 p ：段落标签比br标签多一行 ====明天css时候一直使用
div ：自动换行 <div>****</div>
span：在一行显示13. html的头标签的使用
* html两部分组成 head和body
** 在head里面的标签就是头标签 ** title标签：表示在标签上显示的内容 ** <meta>标签：设置页面的一些相关内容（类似于文章的关键字，搜索时用的，不常用）
- <meta name="keywords" content="毕姥爷，熊出没，刘翔">
<meta http-equiv="refresh" content="3;url=01-hello.html" />
3秒之后跳到***，不用记，会用就行 ** base标签：设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target="_blank"/> ** link标签：引入外部文件
** 明天css，可以使用link标签引入css文件14. 框架标签的使用（过时了，会用即可）
* <frameset>
- rows:按照行进行划分
** <frameset rows="80,*"> //*表示剩下的部分都给第二行 - cols:按照列进行划分
** <frameset cols="80,*">
* <frame>
- 具体显示的页面
- <frame name="lower_left" src="b.html"> *** 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉 * <frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="a.html"> //上面页面 <frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset> * 如果在左边的页面超链接，想让内容显示在右边的页面中
- 设置超链接里面属性 target值设置成名称
- <a href="01-hello.html" target="right">超链接1</a>15. a标签的扩展（了解）
- 百度是网络资源
- 当a标签里面访问网络资源时候，必须要加一个协议 http：表示一个网络的公共协议，
如果加上http协议之后，自动识别访问资源是一个网络资源 - 当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。
如果不是公共协议，会去本地电脑找支持这个协议的应用程序。16. 今天内容的总结
1、html操作思想（****）
* 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2、font标签属性：size 取值范围 1-7 color：英文单词，十六进制数 #ffffff
3、标题标签 <h1></h1>.....<h6></h6> : 从h1到h6越来越小，自动换行
4、注释  5、列表标签
** <dl> <dt></dt> <dd></dd></dl>
** 有序 <ol><li></li></ol>
** 无序 <ul><li></li></ul> 6、图像标签(******)
<img src="图片的路径" width="" height="" alt=""/>
** alt:浏览器兼容性很差 7、路径（相对路径）(****)
** 在同一级目录：直接写
** 在下一层目录： images/1.jpg
** 在上层目录： ../ 8、超链接标签（*****）
<a href="路径">显示在页面上的内容</a>
- 打开方式 target="_self _ blank"
- 默认是在当前页面打开 9、表格标签（*****）
<table>
<tr>
<td></td>
<th></th> //加粗和居中
</tr>
</table>
- 技巧：先数有多少行，数每行里面有多少个单元格 10、表单标签（*** 今天最重要的标签***）
* <form></form>:
- action: 提交到地址
- method：提交方式：常用的有两种 get和post
- get和post区别 - enctype属性（上传时候使用）
* 输入项
* 输入项里面写name属性
* 普通输入项 <input type="text"/>
* 密码：password
* 单选框：radio
* 复选框：checkbox
* 下拉框
<select name="">
<option value=""></option>
</select>
* 文本域
<textarea cols="" rows="" name=""></textarea> * 文件 file * 提交按钮 submit
* 重置 reset
* 使用图片提交 <input type="image" src=""/> * 隐藏项 hidden
* 普通按钮 button 11、div和span(******) 12、框架标签（会用）Day 2
0. 昨天内容回顾
1、html的操作思想
** 使用标签把要操作的数据包起来，通过修改标签的属性值来实现标签内数据样式的变化
*** <font size="5"></font> 2、图像标签
<img src="图片的路径"/>
** 通过html访问本地图片，使用绝对路径，目前有问题 3、超链接标签
<a href="" target="_blank"></a> 4、表格标签
** 技巧：数里面有多少行，每行里面有多少个单元格
** <table></table>
<tr> <td> <th> 5、表单标签
** <form></form>
- action method enctype
- method: get post ** 输入项
*** 有name属性
* 普通输入项 type="text"
* 密码： password
* 单选：radio
- name值相同
- value值
* 复选框：checkbox
- name值相同
- value值 * 下拉框 select option
* 文本域 textarea
* 隐藏项：type="hidden"
* 文件： type="file" * 提交按钮 type="submit"
* 重置： reset
* 使用图片提交： <input type="image" src=""/>
* 普通按钮 type="button" 6、div和span
* div: 自动换行
* span：在一行显示1. css的简介—非重点，代码看懂就可以，一般是美工做的
* css：层叠样式表
** 层叠：一层一层的 ** 样式表：
很多的属性和属性值
* 是页面显示效果更加好
* CSS将网页内容和显示样式进行分离，提高了显示功能。2. *css和html的结合方式（四种结合方式）
（1）在每个html标签上面都有一个属性 style，把css和html结合在一起
- <div style="background-color:red;color:green;">//注意格式：；（2）使用html的一个标签实现 <style>标签，写在head里面
* <style type="text/css">
css代码;
</style> * <style type="text/css">
div {
background-color:blue;
color: red;
}
</style> （3）在style标签里面使用语句（在某些浏览器下不起作用）
@import url(css文件的路径); - 第一步，创建一个css文件 <style type="text/css">
@import url(div.css);
</style> （4）使用头标签 link，引入外部css文件
- 第一步，创建一个css文件 - <link rel="stylesheet" type="text/css" href="css文件的路径" /> *** 第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式 *** 优先级（一般情况）
由上到下，由外到内。优先级由低到高。
*** 后加载的优先级高
*** 格式选择器名称 { 属性名：属性值；属性名：属性值；…….}
3. *css的基本选择器（三种）
** 要对哪个标签里面的数据进行操作（1）标签选择器
* 使用标签名作为选择器的名称
div { background-color:gray; color:white;
} （2）class选择器
* 每个html标签都有一个属性 class - .haha {
background-color: orange;
} - <div class="haha">aaaaaaa</div>
（3）id选择器
* 每个html标签上面有一个属性 id - #hehe {
background-color: #333300;
} - <div id="hehe">bbbbb</div>*** 优先级
style > id选择器 > class选择器 > 标签选择器4. css的扩展选择器
（1）关联选择器
* <div><p>wwwwwwww</p></div>
* 设置div标签里面p标签的样式，嵌套标签里面的样式
* div p {
background-color: green;
} （2）组合选择器
* <div>1111</div>
<p>22222</p>
* 把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
* div,p {
background-color: orange;
} （3）伪元素选择器(了解，浏览器的兼容性比较差)
* css里面提供了一些定义好的样式，可以拿过来使用
* 比如超链接
** 超链接的状态
原始状态鼠标放上去状态点击点击之后
:link :hover :active :visited ** 记忆的方法
lv ha5. css的盒子模型
** 在进行布局前需要把数据封装到一块一块的区域内（div）
（1）边框
border: 2px solid blue;
border：统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right （2）内边距
padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个内边距（3）外边距
margin: 20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距6. css的布局的漂浮(了解)
float：
** 属性值
left : 文本流向对象的右边
right : 文本流向对象的左边 or 7. css的布局的定位（了解）
position：
** 属性值
- absolute ：
*** 将对象从文档流中拖出
*** 可以是top、bottom等属性进行定位 - relative ：
*** 不会把对象从文档流中拖出
*** 可以使用top、bottom等属性进行定位8、案例图文混排案例
** 图片和文字在一起显示9. 案例图像签名
** 在图片上面显示文字10. 上午内容总结
1、css和html的四种结合方式（****） 2、css的基本选择器（****）
* 标签选择器使用标签名
* class选择器 .名称
* id选择器 #名称 ** 优先级
style > id > class > 标签 3、css的扩展选择器(了解)
* 关联选择器
- 设置嵌套标签的样式 div p {}
* 组合选择器
- 不同的标签具有相同的样式 div,p{}
* 伪元素选择器
* 超链接的状态
- 原始 :link
- 悬停 :hover
- 点击 :active
- 点击之后 :visited 4、盒子模型(了解)
* 边框 border:2px solid red;
上下左右 border-top border-bottom border-left border-right * 内边距 padding:20px
上下左右 * 外边距 margin:20px
上下左右 * 对数据进行操作，需要把数据放到一个区域里面（div） 5、布局的漂浮(了解)
float
- left: 后面的div到右边
- right：后面的div到左边 6、布局的定位(了解)
position
- absolute
** 从文档流中拖出
- relative
** 不会从文档流中拖出一般在目录里面，标出符号
（********）：重点，代码看懂，代码会写，代码理解
- （****重点中的重点***）
（了解）：代码看懂
（理解）：能够把原理讲清楚1. javascrip t的简介—重点
* 是基于对象和事件驱动的语言，应用于客户端。
- 基于对象：
** 提供好了很多对象，可以直接拿过来使用
- 事件驱动：
** html做网站静态效果，javascript动态效果 - 客户端：专门指的是浏览器 * js的特点
（1）交互性
- 信息的动态交互（2）安全性
- js不能访问本地磁盘的文件（3）跨平台性
- java里面跨平台性，虚拟机
- 只有能够支持js的浏览器，都可以运行 * javascript和java的区别（雷锋和雷峰塔）
（1）java是sun公司，现在oracle；js是网景公司
（2）JavaScript 是基于对象的，java是面向对象
（3）java是强类型的语言，js是弱类型的语言
- 比如java里面 int i = "10";
- js: var i = 10; var m = "10";
（4）JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。 * javascript的组成（下面js）
三部分组成
（1）ECMAScript
- ECMA : 欧洲计算机协会
- 有ECMA组织制定的js的语法，语句..... （2）BOM
- broswer object model: 浏览器对象模型（3）DOM
- document object model：文档对象模型2. js和html的结合方式（两种）
第一种：
- 使用一个标签 <script type="text/javascript">
js代码;
</script> 第二种：
- 使用script标签，引入一个外部的js文件
*** 创建一个js文件，写js代码
- <script type="text/javascript" src="1.js"></script> ** 使用第二种方式时候，就不要在script标签里面写js代码了，不会执行。3. js的原始类型和声明变量
** java的基本数据类型 byte short int long float double char boolean ** 定义变量都使用关键字 var ** js的原始类型（五个） *** var str = "abc"; - number：数字类型
*** var m = 123; - boolean：true和false
*** var flag = true; - null
*** var date = new Date();
*** 获取对象的引用，null表示对象引用为空，所有对象的引用也是object
- undifined
*** 定义一个变量，没有赋值
*** var aa;
** typeof(); 查看当前变量的数据类型4. js的语句
- java里面的语句：
** if判断
** switch语句
** 循环 for while do-while -js里面的这些语句
** if判断语句
**** =:表示赋值
**** ==：表示判断 ** switch语句
- java里面支持数据类型 string支持吗？在jdk1.7开始支持
- js里面都支持
- switch(a) {
case 5:
break;
case 6:
break;
default:
......
}
** 循环语句 for while do-while
- while循环
**** var i = 5;
while(i>1) {
alert(i);
i--;
} - for循环
*** for(int i=0;i<=10;i++) { }
for(var mm=0;mm<=3;mm++) {
alert(mm);
} ** i++ ++i和java里面一样5. js的运算符
** += ： x+=y; ===> x=x+y; ** js里面不区分整数和小数
var j = 123;
alert(j/1000*1000);
// j/1000*1000 在java里面得到结果是 0
// 在js里面不区分整数和小数，123/1000=0.123 * 1000 = 123 ** 字符串的相加和相减的操作
var str = "123"; ** 如果相加时候，做是字符串连接
** 如果相减，做的是相减的运算 * //字符串的操作
var str = "456";
//alert(str+1); //在java里面操作的结果是 4561 ，在js里面还是 4561
alert(str-1); //相减时候，执行减法的运算
* 提示NaN:表示不是一个数字 ** boolean类型也可以操作
*** 如果设置成true，相当于这个值是1
*** 如果设置成false，相当于这个值是0 ** == 和 === 区别
** 做判断 ** == 比较的只是值
** === 比较的是值和类型 ** 引入知识
直接向页面输出的语句（可以把内容显示在页面上）
* document.write("aaa");
document.wirte("<hr/>");
** 可以向页面输出变量，固定值和html代码
6. 实现99乘法表（输出到页面上）
* document.write("<table border='1' bordercolor='blue'>");
//循环行 9
for(var i=1;i<=9;i++) { document.write("<tr>");
//循环列
for(var j=1;j<=i;j++) {
document.write("<td>");
//运算
document.write(j+"*"+i+"="+i*j);
document.write("</td>");
}
//document.write("<br/>");
document.write("</tr>");
}
document.write("</table>"); - document.write里面是双引号，如果设置标签的属性需要使用单引号
- document.write可以输出变量，还可以输出html代码7. js的数组
* 什么是数组？
- 使用变量，var m = 10;
- java里面的数组定义 int[] arr = {1,2,3}; * 定义方式（三种）
第一种： var arr = [1,2,3]; var arr = [1,"4",true];
第二种：使用内置对象 Array对象
var arr1 = new Array(5); //定义一个数组，数组的长度是5
arr1[0] = "1"; 第三种：使用内置对象 Array
var arr2 = new Array(3,4,5); //定义一个数组，数组里面的元素是3 4 5 * 数组里面有一个属性 length：获取到数组的长度 * 数组可以存放不同的数据类型的数据8. js的函数
** 在java里面定义方法
public 返回类型void /int 方法名(参数列表) {
方法体;
返回值;
} public int add(int a,int b) {
int sum = a+b;
return sum;
} ** 在js里面定义函数（方法）有三种方式
**** 函数的参数列表里面，不需要写var，直接写参数名称
第一种方式：
**** 使用到一个关键字 function
**** function 方法名(参数列表) {
方法体;
返回值可有可无（根据实际需要）;
} **** 代码
//使用第一种方式创建函数
function test() {
alert("qqqqq");
} //调用方法
//test(); //定义一个有参数的方法实现两个数的相加
function add1(a,b) {
var sum = a+b;
alert(sum);
} //add1(2,3); //有返回值的效果
function add2(a,b,c) {
var sum1 = a+b+c;
return sum1;
}
alert(add2(3,4,5)); 第二种方式：
**** 匿名函数
var add = function(参数列表) {
方法体和返回值;
}
**** 代码
//第二种方式创建函数
var add3 = function(m,n) {
alert(m+n);
} //调用方法
add3(5,6); 第三种方式：（用的少，了解）
*** 动态函数
*** 使用到js里面的一个内置对象 Function
var add = new Function("参数列表","方法体和返回值");9、js的全局变量和局部变量
** 全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
- 在方法外部使用，在方法内部使用，在另外一个script标签使用 ** 局部变量：在方法内部定义一个变量，只能在方法内部使用
- 如果在方法的外部调用这个变量，提示出错
- SCRIPT5009: “nn”未定义
12-js的局部变量.html, 行18 字符3 ** ie自带了一个调试工具，ie8及其以上的版本中，键盘上 F12，在页面下方出现一个条10、script标签放在的位置
* 建议把script标签放到 </body>后面
* 如果现在有这样一个需求：
在js里面需要获取到input里面的值，如果把script标签放到head里面
会出现问题。
html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值，
因为页面还没有解析到input那一行，肯定取不到。11、js的重载
* 什么是重载？方法名相同，参数列表不同
- java里面有重载，肯定有 * js里面是否有重载？12、今天的内容的总结
* css
** css和html的四种结合方式(*******) ** css的基本选择器(********)
* 标签选择器 div {css代码}
* class选择器 .名称 {}
* id选择器 #名称{} ** css的扩展选择器(了解)
* 关联选择器
*** 嵌套标签的样式的设置
* 组合选择器
*** 不同标签设置相同的样式
* 伪元素选择器
** a标签的状态
lv ha
** 盒子模型(了解)
* 边框 border
上下左右
* 内边距 padding
上下左右
* 外边距 margin
上下左右 ** 漂浮(了解)
float : left right ** 定位(了解)
position：absolute relative * javascript(*******)
** 什么是javascript
- 基于对象和事件驱动的语言，应用与客户端。
- 特点：
交互性安全性跨平台性 - javascript和java区别 - 组成（3部分）
* ECMAScript
* bom
* dom ** js和html的结合方式（两种）
第一种 <script type="text/javascript"> js代码; </script>
第二种 <script type="text/javascript" src="js的路径"> </script> ** js的数据类型
* 五种原始类型
string number boolean null undifined
* 定义变量使用 var ** js的语句
* if
* switch
* for while do-while ** js的运算符
* 字符串的操作
*** 字符串相加：连接
*** 字符串相减：执行相减运算
* boolean类型相加
true： 1
false：0
* == 和 === 区别
** == ：判断值
** === ：判断值和类型 ** js的数组
三种定义方式
** var arr = [1,2,"3"];
** var arr1 = new Array(9); //长度9
** var arr2 = new Array(1,2,3); //元素是 1 2 3 ** 属性 length：数组的长度 ** js的函数
*** function add(a,b) {方法体和返回值;}
*** var add1 = function(m,n) {方法体和返回值;}
*** var add2 = new Function("a,b","方法体和返回值"); **** 不要忘记调用，不然不起作用的 ** js的全局变量和局部变量
** 全局变量：在页面中任何js的部分，都可以使用
** 局部变量：在方法内部定义一个变量，这个变量只能在方法内部使用 ** script标签位置
** 建议放在</body>后面 ** js的重载（回去思考这个问题）Day 3
1. js的String对象
** 创建String对象
*** var str = "abc"; ** 方法和属性（文档）
*** 属性 length：字符串的长度 *** 方法 str.方法()
（1）与html相关的方法
- bold()：加粗
document.write(str.bold());
- fontcolor(): 设置字符串的颜色
- fontsize(1-7): 设置字体的大小 1-7 - link(): 将字符串显示成超链接
**** str4.link("hello.html") - sub() sup(): 下标和上标（2）与java相似的方法
- concat(): 连接字符串
** //concat方法
var str1 = "abc";
var str2 = "dfg";
document.write(str1.concat(str2)); - charAt():返回指定指定位置的字符串
** var str3 = "abcdefg";
document.write(str3.charAt(20)); //字符位置不存在，返回空字符串 - indexOf()：返回字符串位置
** var str4 = "poiuyt";
document.write(str4.indexOf("w")); //字符不存在，返回-1 - split()：切分字符串，成数组
** var str5 = "a-b-c-d";
var arr1 = str5.split("-");
document.write("length: "+arr1.length); - replace() ：替换字符串
* 传递两个参数：
-- 第一个参数是原始字符
-- 要替换成的字符
* var str6 = "abcd";
document.write(str6);
document.write("<br/>");
document.write(str6.replace("a","Q")); - substr()和substring()
* var str7 = "abcdefghuiop";
//document.write(str7.substr(5,5)); //fghui 从第五位开始，向后截取五个字符
*** 从第几位开始，向后截取几位 document.write("<br/>");
document.write(str7.substring(3,5)); //de 从第几位开始到第几位结束 [3,5)
*** 从第几位开始，到第几位结束，但是不包含最后哪一位2. js的Array对象
** 创建数组（三种）
- var arr1 = [1,2,3];
- var arr2 = new Array(3); //长度是3
- var arr3 = new Array(1,2,3); //数组中的元素是1 2 3 - var arr = []; //创建一个空数组 ** 属性：length：查看数组的长度 //属性，不是方法，所以不要括号 ** 方法
- concat方法：数组的连接
* var arr11 = [1,2,3];
var arr12 = [4,5,6];
document.write(arr11.concat(arr12)); - join()：根据指定的字符分割数组
* var arr13 = new Array(3);
arr13[0] = "a";
arr13[1] = "b";
arr13[2] = "c"; document.write(arr13);
document.write("<br/>");
document.write(arr13.join("-"));
结果a-b-c - push():向数组末尾添加元素，返回数组的新的长度
** 如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去 * //push方法
var arr14 = new Array(3);
arr14[0] = "tom";
arr14[1] = "lucy";
arr14[2] = "jack";
document.write("old array: "+arr14); document.write("<br/>");
document.write("old length:"+arr14.length); document.write("<br/>");
document.write("new length: "+arr14.push("zhangsan")); document.write("<br/>");
document.write("new array: "+arr14);** 如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去
注：push数组的话会把整个数组添加到最后，但是长度只增加一* var arr15 = ["aaa","bbb","ccc"];
var arr16 = ["www","qqq"]; document.write("old array:"+arr15);
document.write("<br/>");
document.write("old length:"+arr15.length); document.write("<br/>");
document.write("new length:"+arr15.push(arr16));
document.write("<br/>");
document.write("new array: "+arr15);
for(var i=0;i<arr15.length;i++) {
alert(arr15[i]);
} - pop()：表示删除最后一个元素，返回删除的那个元素
* var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
document.write("old array: "+arr17);
document.write("<br/>"); document.write("return: "+arr17.pop());
document.write("<br/>");
document.write("new array: "+arr17); - reverse():颠倒数组中的元素的顺序
* var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
document.write("old array: "+arr17);
document.write("<br/>"); document.write("return: "+arr17.pop());
document.write("<br/>");
document.write("new array: "+arr17); //reverse方法
document.write("<hr/>");
var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];
document.write("old array: "+arr18);
document.write("<br/>");
document.write("new array:"+arr18.reverse());3. js的Date对象
** 在java里面获取当前时间
Date date = new Date();
//格式化
//toLocaleString() //2015年4月17日 11:17:12 ** js里面获取当前时间
var date = new Date();
//获取当前时间
var date = new Date();
document.write(date); // Fri Apr 17 10:47:46 UTC+0800 2015 //转换成习惯的格式
document.write("<hr/>");
document.write(date.toLocaleString()); ** 获取当前的年方法
getFullYear()：得到当前的年
**** document.write("year: "+date.getFullYear()); ** 获取当前的月方法
getMonth()：获取当前的月
*** 返回的是 0-11月，如果想要得到准确的值，加1
**** var date1 = date.getMonth()+1;
document.write("month: "+date1); ** 获取当前的星期
getDay()：星期,返回的是 (0 ~ 6)
** 外国朋友，把星期日作为一周的第一天，星期日返回的是 0
而星期一到星期六返回的是 1-6
** document.write("week: "+date.getDay()); ** 获取当前的日
getDate()：得到当前的天 1-31
** document.write("day: "+date.getDate()); ** 获取当前的小时
getHours()：获取小时
** document.write("hour: "+date.getHours()); ** 获取当前的分钟
getMinutes()：分钟
** document.write("minute: "+date.getMinutes()); ** 获取当前的秒
getSeconds(): 秒
** document.write("second: "+date.getSeconds()); ** 获取毫秒数
getTime()
返回的是1970 1 1 至今的毫秒数 ** 应用场景：
*** 使用毫秒数处理缓存的效果（不有缓存）
http://www.baidu.com?毫秒数4. js的Math对象
* 数学的运算
** 里面的都是静态方法，使用可以直接使用 Math.方法()
不能new 类名.方法(); ** ceil(x): 向上舍人 ** floor(x)：向下舍人 ** round(x)：四舍五入 ** random()：得到随机数（伪随机数）
- 得到0-9的随机数
Math.random()*10
Math.floor(Math.random()*10));5. js的全局函数
* 由于不属于任何一个对象，直接写名称使用 ** eval() ：执行js代码（如果字符串是一个js代码，使用方法直接执行）
**** var str = "alert('1234');";
//alert(str);
eval(str); ** encodeURI() ：对字符进行编码 //有部分不编码
- %E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa1234 decodeURI() ：对字符进行解码 encodeURIComponent() 和 decodeURIComponent() ** isNaN():判断当前字符串是否是数字
-- var str2 = "aaaa";
alert(isNaN(str2));
*** 如果是数字，返回false
*** 如果不是数字，返回true ** parseInt()：类型转换 //字符转转数字
** var str3 = "123";
document.write(parseInt(str3)+1);6、js的函数的重载
** 什么是重载？方法名相同，参数不同 ** js的重载是否存在？不存在
** 调用最后一个方法
** 把传递的参数保存到 arguments数组里面 ** js里面是否存在重载？(面试题目)
（1）js里面不存在重载。
（2）但是可以通过其他方式模拟重载的效果（通过aruguments数组来实现） *** function add1() {
//比如传递的是两个参数
if(arguments.length == 2) {
return arguments[0]+arguments[1]; } else if (arguments.length == 3) {
return arguments[0]+arguments[1]+arguments[2]; } else if (arguments.length == 4) { return arguments[0]+arguments[1]+arguments[2]+arguments[3];
} else {
return 0;
}
}7. js的bom对象
** bom：broswer object model: 浏览器对象模型 ** 有哪些对象？
△了解即可*** navigator：获取客户机的信息（浏览器的信息）
- navigator.appName
- document.write(navigator.appName); △*** screen: 获取屏幕的信息
- document.write(screen.width);
document.write("<br/>");
document.write(screen.height); △*** location: 请求url地址
- href属性
**** 获取到请求的url地址
- document.write(location.href); **** 设置url地址
- 页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个页面
- location.href = "hello.html"; **** <input type="button" value="tiaozhuan" onclick="href1();"/>
- 鼠标点击事件 onclick="js的方法;" △*** history：请求的url的历史记录
- 创建三个页面
1、创建第一个页面 a.html 写一个超链接到 b.html
2、创建b.html 超链接到 c.html
3、创建c.html - 到访问的上一个页面
history.back();
history.go(-1); - 到访问的下一个页面
history.forward();
history.go(1); ☆**** window（****）
* 窗口对象
* 顶层对象（所用的bom对象都是在window里面操作的） ** 方法（必须记住）
- window.alert() : 页面弹出一个框，显示内容
** 简写alert() - confirm()：确认框
- var flag = window.confirm("显示的内容"); - prompt()：输入的对话框
- window.prompt("please input : ","0");
- window.prompt("在显示的内容","输入框里面的默认值"); - open() :打开一个新的窗口
** open("打开的新窗口的地址url","","窗口特征，比如窗口宽度和高度")
- 创建一个按钮，点击这个按钮，打开一个新的窗口
- window.open("hello.html","","width=200,height=100"); - close(): 关闭窗口(浏览器兼容性比较差)
- window.close(); - 做定时器
** setInterval("js代码",毫秒数) 1秒=1000毫秒
- 表示每三秒，执行一次alert方法
window.setInterval("alert('123');",3000);//注意格式 ** setTimeout("js代码",毫秒数)
- 表示在毫秒数之后执行，但是只会执行一次 - 表示四秒之后执行js代码，只会执行一次
window.setTimeout("alert('abc');",4000); ** clearInterval(): 清除setInterval设置的定时器
var id1 = setInterval("alert('123');",3000);//通过setInterval会有一个返回值
clearInterval(id1); ** clearTimeout() : 清除setTimeout设置的定时器
var id2 = setTimeout("alert('abc');",4000);
clearTimeout(id2);8、js的dom对象（****）
* dom：document object model: 文档对象模型
** 文档：
超文本文档（超文本标记文档） html 、xml
** 对象：
提供了属性和方法
** 模型：使用属性和方法操作超文本标记型文档 *** 可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作 *** 想要对标记型文档进行操作，首先需要对标记型文档里面的所有内容封装成对象
-- 需要把html里面的标签、属性、文本内容都封装成对象 *** 要想对标记型文档进行操作，解析标记型文档
- 画图分析，如何使用dom解析html *** 解析过程
根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，
- document对象：整个文档
- element对象：标签对象
- 属性对象
- 文本对象 -- Node节点对象：这个对象是这些对象的父对象
*** 如果在对象里面找不到想要的方法，这个时候到Node对象里面去找 DOM模型有三种：
DOM level 1：将html文档封装成对象。
DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
DOM level 3：支持xml1.0的一些新特性。 * DHTML：是很多技术的简称
** html: 封装数据
** css：使用属性和属性值设置样式
** dom：操作html文档（标记型文档）
** javascript：专门指的是js的语法语句（ECMAScript）9. document对象
* 表示整个的文档 ** 常用方法
**** write()方法：
（1）向页面输出变量（值）
（2）向页面输出html代码
- var str = "abc";
document.write(str);
document.write("<hr/>"); **** getElementById();
<input type=”text” id=”nameid” name = “name1” value=”aaaa”>
- 通过id得到元素（标签）
- //使用getElementById得到input标签
var input1 = document.getElementById("nameid"); //传递的参数是标签里面的id的值
//得到input里面的value值
alert(input1.name); //标签对象.属性名称
//向input里面设置一个值value
input1.value = "bbbbb"; **** getElementsByName(); //注意有s
- 通过标签的name的属性值得到标签
- 返回的是一个集合（数组）
- //使用getElementsByName得到input标签**** getElementsByTagName("标签名称");
- 通过标签名称得到元素
- //演示getElementsByTagName
var inputs1 = document.getElementsByTagName("input"); //传递的参数，是标签名称
//alert(inputs1.length);
//遍历数组，得到每个input标签
for(var m=0;m<inputs1.length;m++) { //得到每个input标签
var input1 = inputs1[m]; //得到value值
alert(input1.value);
} **** 注意地方
**** 只有一个标签，这个标签使用name获取到时，使用getElementsByName返回的是一个数组，
但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值
//通过name得到input标签
var inputs2 = document.getElementsByName("name11")[0];
alert(inputs2.value); var inputss = document.getElementsByTagName("input")[0];
alert(inputss.value);10. 案例：window弹窗案例
- 实现过程
1、创建一个页面
** 有两个输入项和一个按钮
** 按钮上面有一个事件：弹出一个新窗口 open 2、创建弹出页面
** 表格
** 每一行有一个按钮和编号和姓名
** 按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置 ****//实现s1方法
function s1(num1,name1) {
//需要把num1和name1赋值到window页面
//跨页面的操作 opener：得到创建这个窗口的窗口得到window页面
var pwin = window.opener; //得到window页面
pwin.document.getElementById("numid").value = num1;
pwin.document.getElementById("nameid").value = name1;
//关闭窗口
window.close();
} －opener:属性，获取创建当前窗口的窗口 - 做这个案例时候会有一个问题
*** 由于我们现在访问的是本地文件，js安全性，谷歌浏览器安全级别很高，不允许访问本地文件
*** 在实际开发中，没有这样的问题，实际中不可能访问本地的文件。
*** http://www.baidu.comDay 4
上节内容回顾
1、Date对象里面
** 获取当前的月 getMonth(): 返回 0-11
** 获取当前星期，星期日返回 0 2、Math对象里面
** 静态方法，Math.floor() 3、全局函数
eval() 4、js里面的重载
arguments：数组，存储参数 5、js的bom里面对象
navigator screen location history 6、window对象
setInterval和setTimeout * clearInterval和clearTimeout * alert confirm prompt close
**open("地址","","宽度高度")：打开新窗口 * opener：得到创建此窗口的窗口 7、dom解析html 8、对象有哪些？
document对象：整个文档
element对象：标签
属性对象
文本对象
Node节点对象 9、document对象
** getElementById
** getElementsByName: 返回数组
** getElementsByTagName: 返回数组
//因此单个的定义id geElementstById，多个通过getElementsName获得
** write方法1. 案例一：在末尾添加节点
第一步：获取到ul标签
第二步：创建li标签
document.createElement("标签名称")方法
第三步：创建文本
document.createTextNode("文本内容"); 第四步：把文本添加到li下面
使用 appendChild方法
第五步：把里添加到ul末尾
使用 appendChild方法<body>
<ul id="ulid">
<li>七里香</li>
<li>再见</li>
</ul>
<input type="button" id="addid" value="add" onclick="add1()">
<script type = "text/javascript">
function add1(){
var ul1 = document.getElementById("ulid");
var liend = document.createElement("li");
var text1 = document.createTextNode("我爱台妹");
liend.appendChild(text1);
ul1.appendChild(liend);
}
</script>
</body>2. 元素对象（element对象）
** 要操作element对象，首先必须要获取到element，
- 使用document里面相应的方法获取 ** 方法
*** 获取属性里面的值
getAttribute("属性名称")
- var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value")); *** 设置属性的值
input1.setAttribute("class","haha"); *** 删除属性
input1.removeAttribute("name"); ** 不能删除value *** 想要获取标签下面的子标签
** 使用属性 childNodes，但是这个属性兼容性很差
** 获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法 //先通过ById得到父标签
- var ul11 = document.getElementById("ulid1");
//获取ul下面的子标签
//var lis = ul11.childNodes;
//alert(lis.length);
var lis = ul11.getElementsByTagName("li");
alert(lis.length);3. Node对象属性一
* nodeName
* nodeType
* nodeValue * 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象 * 标签节点对应的值
nodeType： 1
nodeName：大写标签名称比如SPAN
nodeValue: null
* 属性节点对应的值
nodeType： 2
nodeName：属性名称
nodeValue: 属性的值
* 文本节点对应的值
nodeType： 3
nodeName： #text
nodeValue: 文本内容4. Node对象的属性二
<ul>
<li>qqqqq</li>
<li>wwww</li>
</ul> * 父节点
- ul是li的父节点
- parentNode
- //得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id); * 子节点
- li是ul的子节点
- childNodes：得到所有子节点，但是兼容性很差 - firstChild：获取第一个子节点
- //获取ul的第一个子节点 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一个子节点
var li1 = ul1.firstChild;
alert(li1.id);
- lastChild：获取最后一个子节点
//得到最后一个子节点
var li4 = ul1.lastChild;
alert(li4.id); * 同辈节点
- li直接关系是同辈节点
- nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。 - //获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
//alert(li3.nextSibling.id);
alert(li3.previousSibling.id);5. 操作dom树
** 操作dom总结
* 获取节点使用方法
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
* 插入节点的方法
insertBefore方法：在某个节点之前插入
appendChild方法：在末尾添加，剪切黏贴
* 删除节点方法
removeChild方法：通过父节点删除
* 替换节点方法
replaceChild方法：通过父节点替换
* 复制节点方法（用的比较少，了解下就ok了）
cloneNode方法：结合appendChild方法实现 ** appendChild方法
- 添加子节点到末尾
- 特点：类似于剪切黏贴的效果 ** insertBefore(newNode,oldNode)方法
- 在某个节点之前插入一个新的节点
- 两个参数
* 要插入的节点
* 在谁之前插入
- 插入一个节点，节点不存在，创建
1、创建标签
2、创建文本
3、把文本添加到标签下面
- 代码
/*
1、获取到li13标签
2、创建li
3、创建文本
4、把文本添加到li下面
5、获取到ul
6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
*/
//获取li3 标签
var li13 = document.getElementById("li13");//需要获取
//创建li
var li15 = document.createElement("li");
//创建文本
var text15 = document.createTextNode("董小宛");
//把文本添加到li下面 appendChild
li15.appendChild(text15);
//获取到ul
var ul21 = document.getElementById("ulid21");
//在<li>貂蝉</li>之前添加 <li>董小宛</li>
//insertBefore(newNode,oldNode)
ul21.insertBefore(li15,li13); *** 不存在没有insertAfter()方法 ** removeChild方法：删除节点
- 通过父节点删除，不能自己删除自己
- /*
1、获取到li24标签
2、获取父节点ul标签
3、执行删除（通过父节点删除）
*/
//获取li标签
var li24 = document.getElementById("li24");
//获取父节点
//两种方式 1、通过id获取； 2、通过属性 parentNode获取
var ul31 = document.getElementById("ulid31");
//删除（通过父节点）
ul31.removeChild(li24); ** replaceChild(newNode,oldNode)方法: 替换节点
- 不能自己替换自己，通过父节点替换
- 两个参数
** 第一个参数：新的节点（替换成的节点）
** 第二个参数：旧的节点（被替换的节点）
- 代码
/*
1、获取到li34
2、创建标签li
3、创建文本
4、把文本添加到li下面
5、获取ul标签（父节点）
6、执行替换操作（replaceChild(newNode,oldNode)）
*/
//获取li34
var li34 = document.getElementById("li34");
//创建li
var li35 = document.createElement("li");
//创建文本
var text35 = document.createTextNode("张无忌");
//把文本添加到li下面
li35.appendChild(text35);
//获取ul
var ul41 = document.getElementById("ulid41");
//替换节点
ul41.replaceChild(li35,li34); ** cloneNode(boolean): 复制节点 //boolean判断是否复制子节点
- //把ul列表复制到另外一个div里面
/*
1、获取到ul
2、执行复制方法 cloneNode方法复制 true
3、把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
//获取ul
var ul41 = document.getElementById("ulid41");
//复制ul，放到类似剪切板里面
var ulcopy = ul41.cloneNode(true)
//获取到div
var divv = document.getElementById("divv");
//把副本放到div里面去
divv.appendChild(ulcopy);6. innerHTML属性
* 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性第一个作用：获取文本内容
*** //获取span标签
<span id=”sid”>哈哈哈</span>
var span1 = document.getElementById("sid");
alert(span1.innerHTML); 第二个作用：向标签里面设置内容（可以是html代码）
*** //向div里面设置内容 <h1>AAAAA</h1>
<div id=”divv”>
</div>
//获取到div
var div11 = document.getElementById("div11");
//设置内容
div11.innerHTML = "<h1>AAAAA</h1>"; ** 练习：向div里面添加一个表格
- //向div里面添加一个表格
//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>"; var tab = "<table>";
tab += "</table>"; //相当于 var tab = "<table></table>"; div11.innerHTML = tab;7. 案例二：动态显示时间
* 得到当前的时间
var date = new Date(); //得到不是常规的格式
var d1 = date.toLocaleString(); //格式化
* 需要让页面每一秒获取时间
setInterval方法定时器
* 显示到页面上
每一秒向div里面写一次时间
* 使用innerHTML属性
* 代码
function getD1() {
//当前时间
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
} //使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);8. 案例三：全选练习
** 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中 * 创建一个页面
** 复选框和按钮
- 四个复选框表示爱好
- 还有一个复选框操作全选和选不选，也有一个事件 ** 三个按钮，分别有事件
- 全选
- 全不选
- 反选
* 全选操作
步骤：
/*
1、获取要操作的复选框
- 使用getElementsByName()
2、返回是数组，
- 属性 checked判断复选框是否选中
*** checked = true; //表示选中
*** checked = false;//表示不选中
- 遍历数组，得到的是每一个checkbox
* 把每一个checkbox属性checked=true
*/ * 全不选操作
步骤
/*
1、获取到要操作的复选框
2、返回的是数组，遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
*/ * 反选操作
步骤
/*
1、获取到要操作的复选框
2、返回数组，遍历数组
3、得到每一个复选框 4、判断当前的复选框是选中还是不选中
- if(love1.checked == true) {}
5、如果选中，属性checked设置成false，否则，设置成true
*/ * 使用复选框实现全选和全不选
步骤
/*
1、得到上面那个复选框
- 通过id获取到
2、判断这个复选框是否是选中
- if条件，checked==true //注意是 = =
3、如果是选中，下面是全选
4、如果不是选中，下面是全不选
*/9. 案例四：下拉列表左右选择
<div id="s1" style="float:left"> * 下拉选择框
<select id="sel1" multiple="multiple" style="width:100px;height:200px">
<option>111</option>
<option>111</option>
</select> function toRight(){
var sel1= document.getElementById("sel1");
var sel2= document.getElementById("sel2"); var options= sel1.getElementsByTagName("option");//要先得到父标签
for(var i = 0;i<options.length;i++)
{
if(options[i].selected == true)//记得两个==
{
sel2.appendChild(options[i]);
i--;
}
}
} * 创建一个页面
** 两个下拉选择框
- 设置属性 multiple属性
** 四个按钮，有事件 * 选中添加到右边
步骤
/*
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组，得到每一个option
2、判断option是否被选中
- 属性 selected，判断是否被选中
** selected= true: 选中
** selected= false：没有选择
3、如果是选中，把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
*/ * 全部添加到右边
步骤
/*
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
*/ * 选中添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件属性 selected == true：选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
*/ * 全部添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象 4、获取到select1
5、添加到select1里面
- 使用appendChild方法
*/10. 案例五：省市联动
* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
*
/*
1、遍历二维数组
2、得到也是一个数组（国家对应关系） 3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同，获取到第一个值后面的元素
5、得到city的select
6、添加过去（使用）appendChild方法
- 创建option（三步）
*/ /*
由于每次都要向city里面添加option
第二次添加，会追加。 * 每次添加之前，判断一下city里面是否有option，如果有，删除
*/<select id="country" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
</select>ps: this.value对应的是option中 value的值11. 案例六：动态生成表格
*创建一个页面：两个输入框和一个按钮 *代码和步骤
/*
1、得到输入的行和列的值
2、生成表格
** 循环行
** 在行里面循环单元格
3、显示到页面上
- 把表格的代码设置到div里面
- 使用innerHTML属性
*/
//获取输入的行和列
var h = document.getElementById("h").value;
var l = document.getElementById("l").value; //把表格代码放到一个变量里面
var tab = "<table border='1' bordercolor='blue'>";
//循环行
for(var i=1;i<=h;i++) {
tab += "<tr>";//注意需要加引号
//循环单元格
for(var j=1;j<=l;j++) {
tab += "<td>aaaaaaa</td>"
}
tab += "</tr>";
} tab += "</table>"; //alert(tab);
//得到div标签 // 注意需要div标签
var divv = document.getElementById("divv");
//把table的代码设置到div里面去
divv.innerHTML = tab;
}
Day 5
昨天内容回顾
1、在末尾添加节点：
* 创建标签 createElement
* 创建文本 createTextNode
* 把文本添加到标签下面 appendChild 2、获取标签下面的子标签的唯一有效方法
* getElementsByTagName 3、nodeType
* 标签节点：1
* 属性节点：2
* 文本节点：3 * 父节点：parentNode 4、方法
* appendChild
* 在某个节点之前插入节点：insertBefore(new,old);
- 通过父节点插入
* 删除节点：removeChild方法
- 通过父节点删除
* 替换节点：replaceChild(new,old)
- - 通过父节点替换 5、innerHTML属性
* 获取文本内容
* 向标签内设置内容（可以是html代码） ** 写js的方法的命名
add1()、add_1() ** 不要写单一的单词 add()
** 不要把下划线放在开始位置 _add()1. 表单提交方式（*****）
* 使用submit提交
<form>
.....
<input type="submit" />
</form> * 使用button提交表单
- 代码
//实现提交方法
function form1() {
//获取form
var form1 = document.getElementById("form1");
//设置action
form1.action = "hello.html";
//提交form表单
form1.submit();
} * 使用超链接提交
- 代码
<a href="hello.html?username=123456">使用超链接提交</a> * onclick：鼠标点击事件
onchange：改变内容（一般和select一起使用） onfocus:得到焦点 (ie5、某些版本的ie6不兼容)
onblur:失去焦点2. xml的简介（了解）
* eXtensible Markup Language：可扩展标记型语言
** 标记型语言：html是标记型语言
- 也是使用标签来操作
** 可扩展：
- html里面的标签是固定，每个标签都有特定的含义 <h1> <br/> <hr/>
- xml标签可以自己定义,可以写中文的标签 <person></person、<猫></猫> * xml用途
** html是用于显示数据，xml也可以显示数据（不是主要功能）
** xml主要功能，为了存储数据 * xml是w3c组织发布的技术 * xml有两个版本 1.0 1.1
- 使用都是1.0版本，（1.1版本不能向下兼容）3、xml的应用
* 不同的系统之间传输数据
** qq之间数据的传输
** 画图分析过程 * 用来表示生活中有关系的数据 * 经常用在文件配置
* 比如现在连接数据库肯定知道数据库的用户名和密码，数据名称
* 如果修改数据库的信息，不需要修改源代码，只要修改配置文件就可以了4. xml的语法
（1）xml的文档声明（***）
* 创建一个文件后缀名是 .xml
* 如果写xml，第一步必须要有一个文档声明（写了文档声明之后，表示写xml文件的内容）
** <?xml version="1.0" encoding="gbk"?>
*** 文档声明必须写在第一行第一列 * 属性
- version：xml的版本 1.0(使用) 1.1
- encoding：xml编码 gbk utf-8 iso8859-1(不包含中文)
- standalone：是否需要依赖其他文件 yes/no * xml的中文乱码问题解决
** 画图分析乱码问题
** 保存时候的编码和设置打开时候的编码一致，不会出现乱码（2）定义元素（标签）（***）
（3）定义属性（***）
（4）注释（***）
（5）特殊字符（***）
（6）CDATA区（了解）
（7）PI指令（了解）5. xml的元素（标签）定义（*****）
** 标签定义 ** 标签定义有开始必须要有结束：<person></person>
** 标签没有内容，可以在标签内结束 ; <aa/>
** 标签可以嵌套，必须要合理嵌套
*** 合理嵌套 <aa><bb></bb></aa>
*** 不合理嵌套 <aa><bb></aa></bb>: 这种方式是不正确的
** 一个xml中，只能有一个根标签，其他标签都是这个标签下面的标签 ** 在xml中把空格和换行都当成内容来解析，
**** 下面这两段代码含义是不一样的
* <aa>1111111</aa>
* <aa>
11111111111
</aa> ** xml标签可以是中文 ** xml中标签的名称规则
（1）xml代码区分大小写
<p> <P>:这两个标签是不一样的
（2）xml的标签不能以数字和下划线(_)开头
<2a> <_aa>: 这样是不正确的
（3）xml的标签不能以xml、XML、Xml等开头
<xmla> <XmlB> <XMLC>: 这些都是不正确的
（4）xml的标签不能包含空格和冒号
<a b> <b:c> : 这些是不正确的6. xml中属性的定义（*****）
* html是标记型文档，可以有属性
* xml也是标记型文档，可以有属性 * <person id1="aaa" id2="bbb"></person> ** 属性定义的要求
（1）一个标签上可以有多个属性
<person id1="aaa" id2="bbb"></person>
（2）属性名称不能相同
<person id1="aaa" id1="bbb"></person>：这个是不正确，不能有两个id1
（3）属性名称和属性值之间使用= ，属性值使用引号包起来（可以是单引号，也可以是双引号）
（4）xml属性的名称规范和元素的名称规范一致7. xml中的注释（*****）
* 写法 
** 注意的地方
**** 注释不能嵌套
 -->
 -->
** 注释也不能放到第一行，第一行第一列必须放文档声明8. xml中的特殊字符（*****）
* 如果想要在xml中现在 a<b ,不能正常显示，因为把<当做标签
* 如果就想要显示，需要对特殊字符 < 进行转义
** < < //一定要有分号
> >
“ "
‘ '9. CDATA区（了解）
* 可以解决多个字符都需要转义的操作 if(a<b && b<c && d>f) {}
* 把这些内容放到CDATA区里面，不需要转义了
** 写法
<![CDATA[ 内容 ]]>
- 代码
<![CDATA[ <b>if(a<b && b<c && d>f) {}</b> ]]>
** 把特殊字符，当做文本内容，而不是标签10. PI指令（处理指令）（了解）
* 可以在xml中设置样式
* 写法： <?xml-stylesheet type="text/css" href="css的路径"?> * 设置样式，只能对英文标签名称起作用，对于中文的标签名称不起作用的。 ** xml的语法的总结
所有 XML 元素都须有关闭标签
XML 标签对大小写敏感
XML 必须正确地嵌套顺序
XML 文档必须有根元素(只有一个)
XML 的属性值须加引号
特殊字符必须转义 --- CDATA
XML 中的空格、回车换行会解析时被保留11. xml的约束
* 为什么需要约束？
** 比如现在定义一个person的xml文件，只想要这个文件里面保存人的信息，比如name age等，但是如果在xml文件中
写了一个标签<猫>，发现可以正常显示，因为符合语法规范。但是猫肯定不是人的信息，xml的标签是自定义的，需要技术来
规定xml中只能出现的元素，这个时候需要约束。 * xml的约束的技术： dtd约束和 schema约束（看懂）12. dtd的快速入门
* 创建一个文件后缀名 .dtd 步骤：
（1）看xml中有多少个元素，有几个元素，在dtd文件中写几个 <!ELEMENT>
（2）判断元素是简单元素还是复杂元素
- 复杂元素：有子元素的元素
<!ELEMENT 元素名称 (子元素)>
- 简单元素：没有子元素
<!ELEMENT 元素名称 (#PCDATA)>
（3）需要在xml文件中引入dtd文件
<!DOCTYPE 根元素名称 SYSTEM "dtd文件的路径"> ** 打开xml文件使用浏览器打开的，浏览器只负责校验xml的语法，不负责校验约束 ** 如果想要校验xml的约束，需要使用工具（myeclipse工具） ** 打开myeclipse开发工具
*** 创建一个项目 day05
*** 在day05的src目录下面创建一个xml文件和一个dtd文件
*** 当xml中引入dtd文件之后，比如只能出现name age，多写了一个a，会提示出错13. dtd的三种引入方式
（1）引入外部的dtd文件
<!DOCTYPE 根元素名称 SYSTEM "dtd路径">
（2）使用内部的dtd文件
- <!DOCTYPE 根元素名称 [
<!ELEMENT person (name,age)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
]>
（3）使用外部的dtd文件（网络上的dtd文件）
<!DOCTYPE 根元素 PUBLIC "DTD名称" "DTD文档的URL">
- 后面学到框架 struts2 使用配置文件使用外部的dtd文件
- <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">14. 使用dtd定义元素
* 语法： <!ELEMENT 元素名约束> * 简单元素：没有子元素的元素
<!ELEMENT name (#PCDATA)>
*** (#PCDATA): 约束name是字符串类型
*** EMPTY : 元素为空（没有内容）
- <sex></sex>
*** ANY:任意
* 复杂元素：
<!ELEMENT person (name,age,sex,school)>
- 子元素只能出现一次
* <!ELEMENT 元素名称 (子元素)> * 表示子元素出现的次数
+ : 表示一次或者多次
? ：表示零次或者一次
* ：表示零次或者多次 * 子元素直接使用逗号进行隔开 ,
** 表示元素出现的顺序 * 子元素直接使用|隔开
** 表示元素只能出现其中的任意一个15. 使用dtd定义属性
* 语法： <!ATTLIST 元素名称
属性名称属性类型属性的约束
> * 属性类型
- CDATA: 字符串
- <!ATTLIST birthday
ID1 CDATA #REQUIRED
> - 枚举：表示只能在一定的范围内出现值，但是只能每次出现其中的一个
** 红绿灯效果
** (aa|bb|cc)
- <!ATTLIST age
ID2 (AA|BB|CC) #REQUIRED
> - ID: 值只能是字母或者下划线开头
- <!ATTLIST name
ID3 ID #REQUIRED
> * 属性的约束
- #REQUIRED：属性必须存在 - #IMPLIED：属性可有可无 - #FIXED: 表示一个固定值 #FIXED "AAA"
- 属性的值必须是设置的这个固定值
- <!ATTLIST sex
ID4 CDATA #FIXED "ABC"
>
- 直接值
* 不写属性，使用直接值
* 写了属性，使用设置那个值
- <!ATTLIST school
ID5 CDATA "WWW" //WWW直接值
> 16. 实体的定义
* 语法： <!ENTITY 实体名称 "实体的值">
*** <!ENTITY TEST "HAHAHEHE">
*** 使用实体 &实体名称; 比如 &TEST;
<name>&TEST;</name> ** 注意
* 定义实体需要写在内部dtd里面，
如果写在外部的dtd里面，有某些浏览器下，内容得不到17. xml的解析的简介（写到java代码）（***今天最重要的内容*****）
* xml是标记型文档
* js使用dom解析标记型文档？
- 根据html的层级结构，在内存中分配一个树形结构，把html的标签，属性和文本都封装成对象
- document对象、element对象、属性对象、文本对象、Node节点对象 * xml的解析方式（技术）：dom 和 sax
** 画图分析使用dom和sax解析xml过程
*** dom解析和sax解析区别：** dom方式解析
* 根据xml的层级结构在内存中分配一个树形结构，把xml的标签，属性和文本都封装成对象
* 缺点：如果文件过大，造成内存溢出
* 优点：很方便实现增删改操作 ** sax方式解析
* 采用事件驱动，边读边解析
- 从上到下，一行一行的解析，解析到某一个对象，返回对象名称
* 缺点：不能实现增删改操作
* 优点：如果文件过大，不会造成内存溢出，方便实现查询操作 * 想要解析xml，首先需要解析器
** 不同的公司和组织提供了针对dom和sax方式的解析器，通过api方式提供
*** sun公司提供了针对dom和sax解析器 jaxp
*** dom4j组织，针对dom和sax解析器 dom4j（*** 实际开发中****）
*** jdom组织，针对dom和sax解析器 jdom18. jaxp的api的查看
** jaxp是javase的一部分 ** jaxp解析器在jdk的javax.xml.parsers包里面
** 四个类：分别是针对dom和sax解析使用的类
*** dom：
DocumentBuilder : 解析器类
- 这个类是一个抽象类，不能new，
此类的实例可以从 DocumentBuilderFactory.newDocumentBuilder() 方法获取 - 一个方法，可以解析xml parse("xml路径") 返回是 Document 整个文档
- 返回的document是一个接口，父节点是Node，如果在document里面找不到想要的方法，到Node里面去找 - 在document里面方法
getElementsByTagName(String tagname)
-- 这个方法可以得到标签
-- 返回集合 NodeList createElement(String tagName)
-- 创建标签 createTextNode(String data)
-- 创建文本 appendChild(Node newChild)
-- 把文本添加到标签下面 removeChild(Node oldChild)
-- 删除节点 getParentNode()
-- 获取父节点 NodeList list
- getLength() 得到集合的长度
- item(int index)下标取到具体的值
for(int i=0;i<list.getLength();i++) {
list.item(i)
} getTextContent()
- 得到标签里面的内容 DocumentBuilderFactory：解析器工厂
- 这个类也是一个抽象类，不能new
newInstance() 获取 DocumentBuilderFactory 的实例。 *** sax：
SAXParser：解析器类
SAXParserFactory: 解析器工厂19. 使用jaxp实现查询操作
*** 查询xml中所有的name元素的值
* 步骤
//查询所有name元素的值
/*
* 1、创建解析器工厂
DocumentBuilderFactory.newInstance();
* 2、根据解析器工厂创建解析器
builderFactory.newDocumentBuilder();
* 3、解析xml返回document
* Document document = builder.parse("src/person.xml");
* 4、得到所有的name元素
使用document.getElementsByTagName("name");
* 5、返回集合，遍历集合，得到每一个name元素
- 遍历 getLength() item()
- 得到元素里面值使用 getTextContent()
* */ *** 查询xml中第一个name元素的值
* 步骤
/*
* 1、创建解析器工厂
* 2、根据解析器工厂创建解析器
* 3、解析xml，返回document
*
* 4、得到所有name元素
* 5、使用返回集合，里面方法 item，下标获取具体的元素
NodeList.item(下标)：集合下标从0开始
* 6、得到具体的值，使用 getTextContent方法
*
* */20. 使用jaxp添加节点
*** 在第一个p1下面（末尾）添加 <sex>nv</sex>
**步骤
/*
* 1、创建解析器工厂
* 2、根据解析器工厂创建解析器
* 3、解析xml，返回document
*
* 4、得到第一个p1
* - 得到所有p1，使用item方法下标得到 * 5、创建sex标签 createElement
* 6、创建文本 createTextNode
* 7、把文本添加到sex下面 appendChild * 8、把sex添加到第一个p1下面appendChild
*
* 9、回写xml
* */21. 使用jaxp修改节点
*** 修改第一个p1下面的sex内容是nan
** 步骤
/*
* 1、创建解析器工厂
* 2、根据解析器工厂创建解析器
* 3、解析xml，返回document
*
* 4、得到sex item方法
* 5、修改sex里面的值
*** setTextContent方法
*
* 6、回写xml
* */22. 使用jaxp删除节点
*** 删除<sex>nan</sex>节点
** 步骤
/*
* 1、创建解析器工厂
* 2、根据解析器工厂创建解析器
* 3、解析xml，返回document
*
* 4、获取sex元素
* 5、获取sex的父节点使用getParentNode方法
* 6、删除使用父节点删除 removeChild方法
*
* 7、回写xml
* */23. 使用jaxp遍历节点
** 把xml中的所有元素名称打印出来
** 步骤
/*
* 1、创建解析器工厂
* 2、根据解析器工厂创建解析器
* 3、解析xml，返回document
*
* ====使用递归实现=====
* 4、得到根节点
* 5、得到根节点子节点
* 6、得到根节点子节点的子节点
* */
** 遍历的方法
//递归遍历的方法
private static void list1(Node node) {
//判断是元素类型时候才打印
if(node.getNodeType() == Node.ELEMENT_NODE) {
System.out.println(node.getNodeName());
} //得到一层子节点
NodeList list = node.getChildNodes();
//遍历list
for(int i=0;i<list.getLength();i++) {
//得到每一个节点
Node node1 = list.item(i);
//继续得到node1的子节点
//node1.getChildNodes()
list1(node1);
}
}day06
上节内容回顾
1、表单的提交方式
* button提交：
** 获取到form
** 执行submit方法 * 超链接提交
** 地址?username=1234 * onclick
onchange
onfocus: 获取焦点
onblur：失去焦点 2、xml的语法
* 文档声明，放在第一行第一列
* 乱码问题：保存时候编码和设置编码一致 * 注释 
** 不能嵌套 3、xml的约束
dtd 和 scheam 4、dtd约束元素
(#PCDATA): 字符串
EMPTY: 空
ANY:任意
5、复杂元素
(a,b,c) : 按顺序出现
(a|b|c) : 只能出现其中的一个 * 出现的次数
+: 一次或者多次
?: 零次或者一次
*: 零次一次或者多次
6、属性的定义
** CDATA: 字符串
** 枚举：只能出现一个范围中的任意一个 (a|b|c)
** ID: 字母和下划线开头 7、dtd的引入
三种方式
** 引入dtd文件
** 内部引入dtd
** 公共的dtd 8、xml的解析技术 dom和sax
** sun公司 jaxp
** dom4j（重点要学）
** jdom 9、使用jaxp操作xml
** 查询操作
getElementsByTagName
getTextContext ** 查询到某一个元素值
下标获取，item ** 添加操作
创建标签 createElement
创建文本 createTextNode
把文本添加到标签下面 appendChild ** 回写xml ** 修改操作
setTextContent方法
** 回写xml ** 删除操作
removeChild方法
-- 通过父节点删除
** 回写xml ** 查询所有的元素的名称
查询元素下面的子节点使用方法 getChildNodes1. schema约束
dtd语法： <!ELEMENT 元素名称约束>
** schema符合xml的语法，xml语句
** 一个xml中可以有多个schema，多个schema使用名称空间区分（类似于java包名）
** dtd里面有PCDATA类型，但是在schema里面可以支持更多的数据类型
*** 比如年龄只能是整数，在schema可以直接定义一个整数类型
*** schema语法更加复杂，schema目前不能替代dtd2. schema的快速入门
* 创建一个schema文件后缀名是 .xsd
** 根节点 <schema>
** 在schema文件里面
** 属性 xmlns="http://www.w3.org/2001/XMLSchema"
- 表示当前xml文件是一个约束文件
** targetNamespace="http://www.itcast.cn/20151111"
- 使用schema约束文件，直接通过这个地址引入约束文件
** elementFormDefault="qualified"
步骤
（1）看xml中有多少个元素
<element>
（2）看简单元素和复杂元素
* 如果复杂元素
<complexType>
<sequence>
子元素
</sequence>
</complexType>
（3）简单元素，写在复杂元素的
<element name="person">
<complexType>
<sequence>
<element name="name" type="string"></element>
<element name="age" type="int"></element>
</sequence>
</complexType>
</element> （4）在被约束文件里面引入约束文件
<person xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.itcast.cn/20151111"
xsi:schemaLocation="http://www.itcast.cn/20151111 1.xsd"> ** xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-- 表示xml是一个被约束文件
** xmlns="http://www.itcast.cn/20151111"
-- 是约束文档里面 targetNamespace
** xsi:schemaLocation="http://www.itcast.cn/20151111 1.xsd">
-- targetNamespace 空格约束文档的地址路径eg:
1.xsd
<?xml version="1.0" encoding="UTF-8"?>
<schema xmlns="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.example.org/1"
xmlns:tns="http://www.example.org/1" elementFormDefault="qualified">
<element name="person">
<complexType>
<sequence>
<element name="name" type="String"></element>
<element name="age" type="int"></element>
</sequence>
</complexType>
</element>
</schema><?xml version="1.0" encoding="UTF-8"?>
<person xmlns:tns="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.example.org/1"
tns:schemaLocation="http://www.example.org/1 1.xsd">
<name>zhangsan</name>
<age>20</age>
<a>111</a> //报错
</person>看懂即可：
* <sequence>：表示元素的出现的顺序
<all>: 元素只能出现一次
<choice>：元素只能出现其中的一个
maxOccurs="unbounded"：表示元素的出现的次数 //在type后面写
<any></any>:表示任意元素 * 可以约束属性
* 写在复杂元素里面
***写在</complexType>之前
－－
<attribute name="id1" type="int" use="required"></attribute>
- name: 属性名称
- type：属性类型 int stirng
- use：属性是否必须出现 required * 复杂的schema约束
<company xmlns = "http://www.example.org/company"
xmlns:dept="http://www.example.org/department"
xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.example.org/company company.xsd http://www.example.org/department department.xsd"
>
* 引入多个schema文件，可以给每个起一个别名 <employee age="30">

<dept:name>100</dept:name>
* 想要引入部门的约束文件里面的name，使用部门的别名 detp:元素名称

<name>王晓晓</name>
</employee>3. sax解析的原理（********）
* 解析xml有两种技术 dom 和sax * 根据xml的层级结构在内存中分配一个树形结构
** 把xml中标签，属性，文本封装成对象 * sax方式：事件驱动，边读边解析
* 在javax.xml.parsers包里面
** SAXParser
此类的实例可以从 SAXParserFactory.newSAXParser() 方法获得
- parse(File f, DefaultHandler dh)
* 两个参数
** 第一个参数：xml的路径
** 事件处理器 ** SAXParserFactory
实例 newInstance() 方法得到* 画图分析一下sax执行过程
* 当解析到开始标签时候，自动执行startElement方法
* 当解析到文本时候，自动执行characters方法
* 当解析到结束标签时候，自动执行endElement方法4. 使用jaxp的sax方式解析xml（**会写***）
* sax方式不能实现增删改操作，只能做查询操作
** 打印出整个文档
*** 执行parse方法，第一个参数xml路径，第二个参数是事件处理器
*** 创建一个类，继承事件处理器的类，
***重写里面的三个方法 alt+shift+s+覆盖
* startElement方法
* characters方法
* endElement方法 * 获取到所有的name元素的值
** 定义一个成员变量 flag= false
** 判断开始方法是否是name元素，如果是name元素，把flag值设置成true if(“name”.equals(qName))
** 如果flag值是true，在characters方法里面打印内容
** 当执行到结束方法时候，把flag值设置成false * 获取第一个name元素的值
** 定义一个成员变量 idx=1
** 在结束方法时候，idx+1 idx++
** 想要打印出第一个name元素的值，
- 在characters方法里面判断，
-- 判断flag=true 并且 idx==1，在打印内容5、使用dom4j解析xml
* dom4j，是一个组织，针对xml解析，提供解析器 dom4j * dom4j不是javase的一部分，想要使用第一步需要怎么做？
*** 导入dom4j提供jar包
-- 创建一个文件夹 lib
-- 复制jar包到lib下面，
-- 右键点击jar包，build path -- add to build path
-- 看到jar包，变成奶瓶样子，表示导入成功 * 得到document
SAXReader reader = new SAXReader();
Document document = reader.read(url);
* document的父接口是Node
* 如果在document里面找不到想要的方法，到Node里面去找 * document里面的方法 getRootElement() ：获取根节点返回的是Element * Element也是一个接口，父接口是Node
- Element和Node里面方法
** getParent()：获取父节点
** addElement：添加标签 * element(qname)
** 表示获取标签下面的第一个子标签
** qname：标签的名称
* elements(qname)
** 获取标签下面是这个名称的所有子标签（一层）
** qname：标签名称
* elements()
** 获取标签下面的所有一层子标签6. 使用dom4j查询xml
* 解析是从上到下解析
* 查询所有name元素里面的值
/*
1、创建解析器
2、得到document
3、得到根节点 getRootElement() 返回Element 4、得到所有的p1标签
* elements("p1") 返回list集合
* 遍历list得到每一个p1
5、得到name
* 在p1下面执行 element("name")方法返回Element
6、得到name里面的值
* getText方法得到值
*/
eg:
public static void selectName() throws DocumentException{
SAXReader sr = new SAXReader(); //直接new
Document d = sr.read("src/p1.xml");
Element e = d.getRootElement();
List<Element> le = e.elements("p1"); //注意泛型
for (Element element : le) {
Element name = element.element("name");
System.out.println(name.getText());
} * 获取第二个name元素的值
/*
* 1、创建解析器
* 2、得到document
* 3、得到根节点
*
* 4、得到所有的p1
** 返回 list集合
* 5、遍历得到第二个p1
** 使用list下标得到 get方法，集合的下标从 0 开始，想要得到第二个值，下标写 1 Element p2 = list.ge1(1);
* 6、得到第二个p1下面的name
** element("name")方法返回Element
* 7、得到name的值
** getText方法
* */7. 使用dom4j实现添加操作
* 在第一个p1标签末尾添加一个元素 <sex>nv</sex>
* 步骤
/*
* 1、创建解析器
* 2、得到document
* 3、得到根节点
*
* 4、获取到第一个p1
* 使用element方法
* 5、在p1下面添加元素
* 在p1上面直接使用 addElement("标签名称")方法返回一个Element * 6、在添加完成之后的元素下面添加文本
* 在sex上直接使用 setText("文本内容")方法
* 7、回写xml
* 格式化 OutputFormat,使用 createPrettyPrint方法，表示一个漂亮的格式
* 使用类XMLWriter 直接new 这个类，传递两个参数
*** 第一个参数是xml文件路径 new FileOutputStream("路径")
*** 第二个参数是格式化类的值
* */
eg:
public static void selectName() throws DocumentException, IOException{
SAXReader sr = new SAXReader();
Document document = sr.read("src/p1.xml");
Element root = document.getRootElement();
Element p1 = root.element("p1");
Element sex = p1.addElement("sex");
sex.setText("female");
OutputFormat format = OutputFormat.createPrettyPrint();
XMLWriter xw = new XMLWriter(new FileOutputStream ("src/p1.xml"),format);
xw.write(document);
xw.close(); }8. 使用dom4j实现在特定位置添加元素
* 在第一个p1下面的age标签之前添加 <school>ecit.edu.cn</schlool>
* 步骤
/*
* 1、创建解析器
* 2、得到document
* 3、得到根节点
* 4、获取到第一个p1
*
* 5、获取p1下面的所有的元素
* ** elements()方法返回 list集合 * ** 使用list里面的方法，在特定位置添加元素
* ** 首先创建元素在元素下面创建文本
- 使用DocumentHelper类方法createElement创建标签
- 把文本添加到标签下面使用 setText("文本内容")方法 * *** list集合里面的 add(int index, E element)
* - 第一个参数是位置下标，从0开始
* - 第二个参数是要添加的元素
* 6、回写xml
* */
eg:
public static void addSchool() throws Exception{
SAXReader sa = new SAXReader();
Document d = sa.read("src/p1.xml");
Element root = d.getRootElement();
Element p1 = root.element("p1");
List<Element> list = p1.elements();
Element school = DocumentHelper.createElement("school");
school.setText("huake");
list.add(1, school);
OutputFormat format = OutputFormat.createPrettyPrint();
XMLWriter xw = new XMLWriter(new FileOutputStream("src/p1.xml"), format);
xw.write(d);
xw.close();
} ** 可以对得到document的操作和回写xml的操作，封装成方法
** 也可以把传递的文件路径，封装成一个常量
public static final String PATH = “src/p1.xml”;
*** 好处：可以提高开发速度，可以提交代码可维护性
- 比如想要修改文件路径（名称），这个时候只需要修改常量的值就可以了，其他代码不需要做任何改变9. 使用dom4j实现修改节点的操作
* 修改第一个p1下面的age元素的值 <age>30</age>
* 步骤
/*
* 1、得到document
* 2、得到根节点，然后再得到第一个p1元素
* 3、得到第一个p1下面的age
element("")方法
* 4、修改值是 30
* * 使用setText("文本内容")方法
* 5、回写xml
*
* */10. 使用dom4j实现删除节点的操作
* 删除第一个p1下面的<school>ecit</school>元素
* 步骤
/*
* 1、得到document
* 2、得到根节点
* 3、得到第一个p1标签
* 4、得到第一个p1下面的school元素 * 5、删除（使用p1删除school）
* * 得到school的父节点
- 第一种直接得到p1
- 使用方法 getParent方法得到
* 删除操作
- 在p1上面执行remove方法删除节点
p1.remove(sch);
* 6、回写xml
* */11. 使用dom4j获取属性的操作
* 获取第一个p1里面的属性id1的值
* 步骤
/*
* 1、得到document
* 2、得到根节点
* 3、得到第一个p1元素
* 4、得到p1里面的属性值
- p1.attributeValue("id1");
- 在p1上面执行这个方法，里面的参数是属性名称
* */12. 使用dom4j支持xpath的操作
* 可以直接获取到某个元素 * 第一种形式
/AAA/DDD/BBB：表示一层一层的，AAA下面 DDD下面的BBB
* 第二种形式
//BBB：表示和这个名称相同，表示只要名称是BBB，都得到
* 第三种形式
/*: 所有元素
* 第四种形式
**BBB[1]：表示第一个BBB元素
××BBB[last()]：表示最后一个BBB元素
* 第五种形式
** //BBB[@id]：表示只要BBB元素上面有id属性，都得到
* 第六种形式
** //BBB[@id='b1'] 表示元素名称是BBB,在BBB上面有id属性，并且id的属性值是b113. 使用dom4j支持xpath具体操作
** 默认的情况下，dom4j不支持xpath
** 如果想要在dom4j里面使用xpath
* 第一步需要，引入支持xpath的jar包，使用 jaxen-1.1-beta-6.jar
** 需要把jar包导入到项目中 ** 在dom4j里面提供了两个方法，用来支持xpath
*** selectNodes("xpath表达式")
- 获取多个节点
*** selectSingleNode("xpath表达式")
- 获取一个节点 ** 使用xpath实现：查询xml中所有name元素的值
** 所有name元素的xpath表示： //name
** 使用selectNodes("//name");
** 代码和步骤
/*
* 1、得到document
* 2、直接使用selectNodes("//name")方法得到所有的name元素
*
* */
//得到document
Document document = Dom4jUtils.getDocument(Dom4jUtils.PATH);
//使用selectNodes("//name")方法得到所有的name元素
List<Node> list = document.selectNodes("//name");
//遍历list集合
for (Node node : list) {
//node是每一个name元素
//得到name元素里面的值
String s = node.getText();
System.out.println(s);
} ** 使用xpath实现：获取第一个p1下面的name的值
* //p1[@id1='aaaa']/name
* 使用到 selectSingleNode("//p1[@id1='aaaa']/name")
* 步骤和代码
/*
* 1、得到document
* 2、直接使用selectSingleNode方法实现
* - xpath ： //p1[@id1='aaaa']/name
* */
//得到document
Document document = Dom4jUtils.getDocument(Dom4jUtils.PATH);
//直接使用selectSingleNode方法实现
Node name1 = document.selectSingleNode("//p1[@id1='aaaa']/name"); //name的元素
//得到name里面的值
String s1 = name1.getText();
System.out.println(s1);14. 实现简单的学生管理系统
** 使用xml当做数据，存储学生信息 ** 创建一个xml文件，写一些学生信息 ** 增加操作
/*
* 1、创建解析器
* 2、得到document
* 3、获取到根节点
* 4、在根节点上面创建stu标签
* 5、在stu标签上面依次添加id name age
** addElement方法添加
* 6、在id name age上面依次添加值
* ** setText方法
* 7、回写xml
* */
public static void add(Student s) throws Exception {
SAXReader sa = new SAXReader();
Document d = sa.read("src/student.xml");
Element root = d.getRootElement();
Element stu = root.addElement("stu");
Element id1 = stu.addElement("id");
Element name = stu.addElement("name");
Element age = stu.addElement("age");
id1.setText(s.getId());
age.setText(s.getAge());
name.setText(s.getName());
OutputFormat f = OutputFormat.createPrettyPrint();
XMLWriter xw = new XMLWriter(new FileOutputStream("src/student.xml"), f);
xw.write(d);
xw.close();
}
** 删除操作（根据id删除）
/*
* 1、创建解析器
* 2、得到document
*
* 3、获取到所有的id
* 使用xpath //id 返回 list集合
* 4、遍历list集合
* 5、判断集合里面的id和传递的id是否相同
* 6、如果相同，把id所在的stu删除
*
* */
public static void delete(String id) throws Exception {
SAXReader sa = new SAXReader();
Document d = sa.read("src/student.xml");
List<Node> list = d.selectNodes("//id");
for (Node node : list) {
if(node.getText().equals(id))
{
Element student = node.getParent().getParent();
student.remove(node.getParent());
}
}
OutputFormat f = OutputFormat.createPrettyPrint();
XMLWriter xw = new XMLWriter(new FileOutputStream("src/student.xml"), f);
xw.write(d);
xw.close();
} ** 查询操作（根据id查询）
/*
* 1、创建解析器
* 2、得到document
*
* 3、获取到所有的id
* 4、返回的是list集合，遍历list集合
* 5、得到每一个id的节点
* 6、id节点的值
* 7、判断id的值和传递的id值是否相同
* 8、如果相同，先获取到id的父节点stu
* 9、通过stu获取到name age值 ** 把这些值封装到一个对象里面返回对象
*
* */
public static Student getStu(String id) throws Exception {
SAXReader sa = new SAXReader();
Document d = sa.read("src/student.xml");
List<Node> list = d.selectNodes("//id");
Student s = new Student();
for (Node node : list) {
if(node.getText().equals(id))
{
Element stu = node.getParent();
Element agev = stu.element("age");
Element namev = stu.element("name");
s.setAge(agev.getText());
s.setName(namev.getText());
s.setId(id);
}
}
return s;
}day07
上节内容回顾
1、schema约束 2、sax解析原理
* 采用事件驱动，边读边解析
** 解析到开始标签时候，执行startElement方法
** 解析到文本时候，执行characters方法
** 解析到结束标签时候，执行endElement方法 dom的解析原理：
* 根据xml的层级结构在内存中分配一个树形结构
* 会把xml的标签、属性和内容，都封装成对象 3、dom4j解析xml
* 使用dom4j，第一步导入jar包 * 使用dom4j实现查询操作
** element("")：获取第一个子标签
** elements(""):获取相同名称的子标签
** elements(): 获取所有的子标签 ** 获取标签里面的内容： getText方法 * 使用dom4j实现增加操作（在末尾添加）
** 在p1上面执行addElement方法
** 在标签上添加文本内容使用 setText方法
** 回写xml
- 格式化： OutputFormat...
- XMLWriter
- 执行write方法把document
- 关闭流 * 使用dom4j实现增加操作（在特定为位置添加）
** 首先获取到标签下面的所有的子标签
** 返回list集合
** list里面的方法 add(位置,"添加的元素")
** list集合的位置从0开始的 * 使用dom4j实现修改的操作
** setText("内容")方法 * 使用dom4j实现删除操作
** remove方法
** 通过父节点删除
- getParent方法
4、学生管理系统简单实现
* 实现增加操作
- 通过对象传递进来 * 删除操作
- 通过id删除
步骤：
1、获取所有的id
- xpath //id
2、返回list集合
3、遍历list集合
4、得到每一个id的值
5、判断这两个id是否相同
6、如果相同，获取id的父节点
7、使用父节点删除 * 查询操作
- 通过id查询
- 步骤：
1、获取所有的id
2、返回的list集合
3、遍历list集合
4、判断id是否相同
5、如果相同，获取相应的内容1、myeclipse的安装和使用
* eclipse：是一个免费的开发工具
* myeclipse：是一个收费的插件，破解myeclipse，
** 安装目录的要求：不能有中文和空格
** 安装完成之后，选择一个工作空间，这个工作空间不能有中文和空格
* 破解myeclipse
** 运行run.bat文件，但是运行之前，必须要安装jdk，通过配置环境变量 * myeclipse的使用
* 创建一个工程
- 类型 java project web project
- 选择依赖的jdk，可以使用myeclipse自带的jdk，或者可以使用安装的jdk * 创建包 package
- cn.itcast.test XX.XX.XX * 在包里面创建一个类
- 类的命名规范：
** 首字母要大写
比如： TestDemo1 UserManager * 在类里面创建方法
public void test1(参数列表) {
方法体或者返回值;
}
- 方法的命名规范
首字母小写比如：addNum() * 定义变量
- 变量的命名规范
** 首字母小写，第二个单词的首字母要大写，比如 userName * 这些命名还有一种方式
** 使用汉语拼音命名 yonghuming mima
** 不能把汉语拼音和英文字母混合使用
userMing * 命名的最基本的原则：看到名字知道是什么含义 * 代码需要有缩进 * 运行程序 run as java application
debug as java application2. debug的调试模式（断点调试模式）
* 使用这种模式，调试程序（看到程序里面数据的变化） * 使用debug第一步需要设置一个断点（让程序运行停止在这一行）
- 显示出来行号
- 双击左边，出现一个圆点，表示设置了一个断点
* 使用debug as方式，运行程序（绿色甲虫）
- 提示是否进入到调试界面，yes
- 在断点那一个，有一个绿色条，表示程序停止在这一行，没有向下运行 * 可以让程序向下执行，
- 使用 step over 快捷键是 F6（单步执行）
- resume F8：表示调试结束，直接向下运行
** 比如当前的断点之后还有断点，跳到下一个断点，
**如果当前断点后面没有断点，程序直接运行结束 * debug另外一个用途
** 查看程序的源代码
** F5 step into：进入到方法
** F7 step return :返回3. myeclipse的快捷键的使用
* 代码提示 alt /
* 快速导包 ctrl shift o
* 单行注释 ctrl /
* 去掉单行注释 ctrl /
* 多行注释 ctrl shift /
* 去掉多行注释 ctrl shift \
* 删除行 ctrl d4. junit的使用
* 单元测试 * 测试对象是是一个类中的方法 * juint不是javase的一部分，想要使用导入jar包
** 但是，在myeclipse中自带了junit的jar包 * 首先junit版本 3.x 4.x
* 单元测试方法时候，方法命名规则 public void 方法名() {}//不能有返回值与src同级，建立test源文件夹，下面的包名要相同 * 使用注解方式运行测试方法, 在方法的上面
** @Test：表示方法进行单元测试 --- @Test
public void testAdd1() {
TestJunit test01 = new TestJunit();
test01.testAdd(2, 3);
}
- 选中方法名称，右键运行点击run as --- junit test
- 当出现绿色条，表示方法测试通过
- 当出现了红棕色条，表示方法测试不通过 --- 要运行类中的多个测试方法，点击类中的其他位置，run as --- junit test ** @Ignore ：表示这个方法不进行单元测试 ** @Before: 在每个方法执行运行
** @After：在每个方法之后运行 ** 断言（了解）
- Assert.assertEquals("测试期望的值", "方法运行的实际的值")jdk5.0新特性
jdk 1.1 1.2 1.4 5.0
** 泛型、枚举、静态导入、自动拆装箱、增强for、可变参数
** 反射5. 泛型的简介
* 为什么要使用泛型？
- 一般使用在集合上
** 比如现在把一个字符串类型的值放入到集合里面，这个时候，这个值放入到集合之后，失去本事的类型，只能是object类型，
这个时候，比如想要对这个值进行类型转换，很容易出现类型转换错误，怎么解决这个问题，可以使用泛型来解决 * 在集合上如何使用泛型
- 常用集合 list set map
- 泛型语法集合<String> 比如 List<String>
* 在泛型里面写是一个对象，String
不能写基本的数据类型比如int (****)
** 写基本的数据类型对应包装类
byte -- Byte
short -- Short int -- Integer long -- Long float -- Float
double -- Double char -- Character boolean -- Boolean * 在list上使用泛型
list的三种实现 ArrayList linkedList Vector
代码：
@Test
public void testList() {
List<String> list = new ArrayList<String>();
list.add("aaa");
list.add("bbb");
list.add("ccc"); //遍历list集合有几种方式三种
//普通for循环迭代器增强for //普通for循环
for(int i=0;i<list.size();i++) {
String s = list.get(i);
System.out.println(s);
} System.out.println("=================");
//使用增强for
for (String s1 : list) {
System.out.println(s1);
} System.out.println("=================");
//使用迭代器遍历
Iterator<String> it = list.iterator();
while(it.hasNext()) {
System.out.println(it.next());
} * 作业1： ArrayList linkedList Vector 这三个区别 * 在set上使用泛型
代码：
//泛型使用set集合上
@Test
public void testSet() {
Set<String> set = new HashSet<String>();
set.add("www");
set.add("qqq");
set.add("zzz");
//set.add("qqq");
//遍历set 有几种方式两种
//迭代器增强for
//使用增强for遍历
for (String s2 : set) {
System.out.println(s2);
}
System.out.println("=================");
//使用迭代器遍历
Iterator<String> it1 = set.iterator();
while(it1.hasNext()) {
System.out.println(it1.next());
}
} * 在map上面使用泛型
- map结构：key-valu形式
代码：
//在map上使用泛型
@Test
public void testMap() {
Map<String,String> map = new HashMap<String,String>();
map.put("aaa", "111");
map.put("bbb", "222");
map.put("ccc", "333");//遍历map 有几种遍历方式两种
// 1、获取所有的key，通过key得到value 使用get方法
// 2、获取key和value的关系
//使用第一种方式遍历
//获取所有的key
Set<String> keys= map.keySet();
//遍历所有key返回的set
for (String key : keys) {
//通过key得到value
String value = map.get(key);
System.out.println(key+" : "+value);
} System.out.println("==============");//得到key和value的关系
Set<Entry<String, String>> maps= map.entrySet();
//遍历sets1
for (Entry<String, String> entry : maps) {
//entry是key和value关系
String keyv = entry.getKey();
String valuev = entry.getValue();
System.out.println(keyv+" : "+valuev);
}
}6. 泛型使用在方法上
* 定义一个数组，实现指定位置上数组元素的交换
* 方法逻辑相同，只是数据类型不同，这个时候使用泛型方法（重载）
* /*
* 使用泛型方法需要定义一个类型使用大写字母表示 T :这个T表示任意的类型
* 写在返回值之前 void之前 <T>
* =======表示定义了一个类型这个类型是 T
* 在下面就可以使用这个类型了 T
* */ public static <T> void swap1(T[] arr ,int a,int b) {
T temp = arr[a];
arr[a] = arr[b];
arr[b] = temp;
} public static void main(String[] args) {
Integer [] arr1 = {1,2,3,4,5,6};
String [] arr2 = {"aa","bb","cc","dd","ee"};
swap(arr1,1,2);
swap(arr2,3,4);
System.out.println(Arrays.toString(arr1));
System.out.println(Arrays.toString(arr2));
} public static <T> void swap(T[] arr,int i,int j){
T temp = arr[i];
arr[i]=arr[j];
arr[j]=temp;
} ** 作业2：实现一个泛型方法，接受任意一个数组，颠倒数组中所有元素public static void main(String[] args) {
Integer [] arr1 = {1,2,3,4,5,6};
String [] arr2 = {"aa","bb","cc","dd","ee"};
reverse(arr1); //注意，竟然可以不用再 arr1= reverse(arr1)，有点怪
reverse(arr2);
System.out.println(Arrays.toString(arr1));
System.out.println(Arrays.toString(arr2));
} public static <T> T[] reverse(T[] arr){
List<T> list = Arrays.asList(arr);
Collections.reverse(list);
T[] reverseArr = (T[]) list.toArray(); //强制转换，toArray传回的是Object
return reverseArr;
}7、泛型在类上的使用（了解）
* 在一个类上定义一个类型，这个类型可以在类里面直接使用
* public class TestDemo04<T> { //在类里面可以直接使用T的类型
T aa;
public void test11(T bb) {} //写一个静态方法在类上面定义的泛型，不能在静态方法里面使用
public static <A> void test12(A cc) {}
}8. 枚举的简介
* 什么是枚举？
** 需要在一定的范围内取值，这个值只能是这个范围内中的任意一个。
** 现实场景：交通信号灯，有三种颜色，但是每次只能亮三种颜色里面的任意一个 * 使用一个关键字 enum
** enum Color3 {
RED,GREEN,YELLOW;
}
* 枚举的构造方法也是私有的 * 特殊枚举的操作（了解）
** 在枚举类里面有构造方法
** 构造方法里面有参数，需要在每个实例上面都写参数
eg:
enum Color {
Red("red"),Green("green"),Yellow("yellow");
private Color(String name) {}
} ** 在枚举类里面有抽象方法
** 在枚举的每个实例里面都重写这个抽象方法
eg:
enum Color {
Red("red"){
@Override
public void print1() {
// TODO 自动生成的方法存根
System.out.println("red");
}
},
Green("green"){
@Override
public void print1() {
// TODO 自动生成的方法存根
System.out.println("green");
}
},
}
9. 枚举的api的操作
** name() ：返回枚举的名称
** ordinal() ：枚举的下标，下标从0开始
** valueOf(Class<T> enumType, String name) ：得到枚举的对象 ** 还有两个方法，都是这两个方法不在api里面，编译的时候生成两个方法
*** valueof(String name) 转换枚举对象
*** values() 获得所有枚举对象数组 * 练习：枚举对象、枚举对象下标、枚举对象名称表示之间的转换
- //知道枚举的对象，得到枚举名称和下标
@Test
public void test1() {
//得到枚举对象
Color100 c100 = Color100.RED;
//枚举名称
String name = c100.name();
//枚举的下标
int idx = c100.ordinal();
System.out.println(name+" "+idx);
} - //知道枚举的名称，得到枚举的对象和下标
@Test
public void test2() {
String name1 = "GREEN";
//得到对象
Color100 c1 = Color100.valueOf(name1);
//枚举下标
int idx1 = c1.ordinal();
System.out.println(idx1);
} - //知道枚举的下标，得到枚举的对象和名称
@Test
public void test3() {
int idx2 = 2;
//得到枚举的对象
Color100[] cs = Color100.values();
//根据下标得到对象
Color100 c12 = cs[idx2];
//得到枚举的名称
String name = c12.name();
System.out.println(name);
}10. 静态导入(了解)
* 可以在代码里面，直接使用静态导入方式，导入静态方法或者常量
* import static XX.XX.xxx * import static java.lang.System.out;
import static java.util.Arrays.sort; ** 比如现在实现一个计算器在Math类里面这样就不用写system了11. 自动拆装箱
* 装箱
** 把基本的数据类型转换成包装类
* 拆箱
** 把包装类转换成基本的数据类型 ** //自动装箱
Integer i = 10; //自动拆箱
int m = i; i是包装类，m是基本数据类型 ** 在jdk1.4里面如何实现装箱和拆箱
- //在jdk1.4里面实现拆装箱
public void test1() {
//装箱
Integer m = new Integer(10);
//拆箱
int a = m.intValue();
}
** jdk是会向下兼容
- 比如 jdk1.4里面写的代码，这个时候到5.0里面也可以运行 **向下兼容特性
== 执行的结果是会调用 doSomething(double m)
== 首先在jdk1.4里面肯定调用这个方法，如果调用下面的方法，需要类型转换，但是jdk1.4不能实现自动拆装箱
== 由于jdk是向下兼容，所以，在jdk1.4调用这个方法，在jdk5.0里面还是会调用这个方法
public static void main(String[] args) {
doSomething(10); } public static void doSomething(double m) {
System.out.println("double......");
} public static void doSomething(Integer a){
System.out.println("integer.....");
}
** 记住：八种基本的数据类型对应的包装类
* int --- Integer
* char--- Character12. 增强for循环（*****）
* 语法 for(遍历出来的值 : 要遍历的集合) {}
- for(String s : list) {
System.out.println(s);
}
* 使用场景：数组；实现Iterable接口的集合可以使用增强for循环 * 在集合上使用增强for循环遍历
list set 实现了Iterator接口，所以可以使用增强for循环
map不能使用增强for循环，没有实现Iterator接口，所以不能使用增强for循环 * 增强for循环出现目的：为了替代迭代器
** 增强for底层就是迭代器实现的 class文件放在bin目录左下角+号，选择Navigator13. 内容补充
（1）泛型擦除
* 首先泛型只是出现在源代码阶段，当编译之后泛型不存在了（2）练习：实现一个泛型方法，接受任意类型的数组，颠倒数组中所有元素
代码
public static <T> void reverses(T[] arr1) {
/*
* 基本思想：把第一个元素和最后一个元素交换位置，把第二个元素和倒数第二个元素交换位置。。。。
* 交换长度/2
* */
//遍历数组
for(int i=0;i<arr1.length/2;i++) {
/*int temp = arr1[0];
arr1[0] = arr1[arr1.length-1];*/
T temp = arr1[i];
arr1[i] = arr1[arr1.length-i-1];
arr1[arr1.length-i-1] = temp;
} }14. 可变参数
* 可变参数可以应用在什么场景：
** 实现两个数的相加，实现三个数的相加四个数的相加
-- 如果实现的多个方法，这些方法里面逻辑基本相同，唯一不同的是传递的参数的个数，可以使用可变参数 * 可变参数的定义方法数据类型...数组的名称
* 理解为一个数组，这个数组存储传递过来的参数
- 代码
public static void add1(int...nums) {
//nums理解为一个数组，这个数组存储传递过来的参数
//System.out.println(nums.length);
int sum = 0;
//遍历数组
for(int i=0;i<nums.length;i++) {
sum += nums[i];
}
System.out.println(sum);
} * 注意的地方
（1）可变参数需要写在方法的参数列表中，不能单独定义
（2）在方法的参数列表中只能有一个可变参数
（3）方法的参数列表中的可变参数，必须放在参数最后
- add1(int a,int...nums)
新特性小结：15. 反射的原理（********理解********）
* 应用在一些通用性比较高的代码中
* 后面学到的框架，大多数都是使用反射来实现的 * 在框架开发中，都是基于配置文件开发
** 在配置文件中配置了类，可以通过反射得到类中的所有内容，可以让类中的某个方法来执行 * 类中的所有内容：属性、没有参数的构造方法、有参数的构造方法、普通方法 * 画图分析反射的原理
* 首先需要把java文件保存到本地硬盘 .java
* 编译java文件，成.class文件
* 使用jvm，把class文件通过类加载加载到内存中
* 万事万物都是对象，class文件在内存中使用Class类表示 * 当使用反射时候，首先需要获取到Class类，得到了这个类之后，就可以得到class文件里面的所有内容
- 包含属性构造方法普通方法
* 属性通过一个类 Filed
* 构造方法通过一个类 Constructor
* 普通方法通过一个类 Method16、使用反射操作类里面的无参数的构造方法（**会写**）
* 首先获取到Class类
- // 获取Class类的三种方式（任选一种）
Class clazz1 = Person.class;
Class clazz2 = new Person().getClass();
Class clazz3 = Class.forName("cn.itcast.test09.Person");//用得最多 * 比如：要对一个类进行实例化，可以new，不使用new，怎么获取？
- //得到Class
Class c3 = Class.forName("cn.itcast.test09.Person");//选中Person类中的Person，右键，Y，复制限定名
//得到Person类的实例
Person p = (Person) c3.newInstance();
* 代码
//操作无参数的构造方法
@Test
public void test1() throws Exception {
//得到Class
Class c3 = Class.forName("cn.itcast.test09.Person");
//得到Person类的实例
Person p = (Person) c3.newInstance();
//设置值
p.setName("zhangsan");
System.out.println(p.getName());
}17. 使用反射操作有参数的构造方法（**会写**）
//操作有参数的构造方法
@Test
public void test2() throws Exception {
//得到Class
Class c1 = Class.forName("cn.itcast.test09.Person");
//使用有参数的构造方法
//c1.getConstructors();//用的很少，获取所有的构造方法
//传递是有参数的构造方法里面参数类型，类型使用class形式传递
Constructor cs = c1.getConstructor(String.class,String.class);
//通过有参数的构造方法设置值
//通过有参数的构造方法创建Person实例
Person p1 = (Person) cs.newInstance("lisi","100");
System.out.println(p1.getId()+" "+p1.getName());
}18. 使用反射操作属性（**会写**）
* //操作name属性
@Test
public void test3() {
try {
//得到Class类
Class c2 = Class.forName("cn.itcast.test09.Person");
//得到name属性
//c2.getDeclaredFields();//表示得到所有的属性
//得到Person类的实例
Person p11 = (Person) c2.newInstance();
//通过这个方法得到属性，参数是属性的名称
Field f1 = c2.getDeclaredField("name");
//操作的是私有的属性，不让操作，需要设置可以操作私有属性setAccessible(true),可以操作私有属性
f1.setAccessible(true);
//设置name值 set方法，两个参数：第一个参数类的实例，第二个参数是设置的值
f1.set(p11, "wangwu"); //相当于在 p.name = "wangwu";
System.out.println(f1.get(p11)); //相当于 p.name
}catch(Exception e) {
e.printStackTrace();
}
}19. 使用泛型操作普通方法（**会写**）
* 使用Method类表示普通方法
* 代码
//操作普通方法，比如操作 setName
@Test
public void test4() throws Exception {
//得到Class类
Class c4 = Class.forName("cn.itcast.test09.Person");
//得到Person实例
Person p4 = (Person) c4.newInstance();
//得到普通方法
//c4.getDeclaredMethods();//得到所有的普通方法
//传递两个参数：第一个参数，方法名称；第二个参数，方法里面参数的类型
Method m1 = c4.getDeclaredMethod("setName", String.class);
//让setName方法执行，执行设置值
//使用invoke(p4, "niuqi");传递两个参数：第一个参数，person实例；第二个参数，设置的值
//执行了invoke方法之后，相当于，执行了setName方法，同时通过这个方法设置了一个值是niuqi
m1.invoke(p4, "niuqi");
System.out.println(p4.getName());
} * //操作的私有的方法，需要设置值是true
* //m1.setAccessible(true); * 当操作的方法是静态的方法时候，因为静态方法调用方式是类名.方法名，不需要类的实例
* 使用反射操作静态方式时候，也是不需要实例
* 在invokie方法的第一个参数里面，写一个 null
- m1.invoke(null, "niuqi");Day08
web内容概述
上节内容回顾
1、dom4j，首先导入jar包 2、实现dom4j实现crud操作 3、查询的方法：
element("")
elements("")
elements() 4、增加的方法
addElement方法
setText方法 5、在特定位置添加
* 使用DocumentHelper createElement方法
* 操作list集合，add(位置,元素) 6、修改的方法
setText方法 7、删除的方法
* remove方法：通过父节点执行 8、获得属性的方法
attributeValue方法 9、使用xpath操作
* //name: 所有的name的标签
* [@id='bbb']: 属性名称是id，属性值是bbb * dom4j默认情况下不支持xpath，需要导入支持的jar包 * 两个方法
** selectNodes：返回list集合
** selectSingleNode：Node节点 10、学生管理系统练习
* 删除操作
** 使用id进行删除 * 查询操作
** 使用id进行查询1. web内容的概述
* web：网页。javaweb：使用java开发网站（动态网站）
* 动态网站：指的是数据的变化 * 使用java开发动态网站 * 静态网站：使用技术 html css JavaScript * 动态网站：使用的技术
** sun公司提供了用于开发动态网站的技术：servlet jsp
** php：，模板 phpcms
** asp
................. * 如果单纯的开发网站，java没有任何优势 * java一般开发企业级的应用，比如网银系统企业管理系统oa erp * 两种架构
** c s ：客户端Client -服务器server
* qq，迅雷.....
* 优点：
** 需要本地电脑安装软件，减轻服务器的一些压力 * 缺点：
** 如果服务器升级软件，客户端也需要升级 ** b s ：浏览器Browser -服务器server
* 网银，支付宝....
** 缺点：
** 都需要在服务器端运行，服务器端压力会很大 * 优点：
** 服务器如果升级软件，本地不需要升级 * AJAX技术：实现局部的刷新，本身就是js代码，js运行在浏览器里面，也可以减轻服务器端的压力2. web服务器的通信和常见的web服务器
* 比如在浏览器的地址栏输入 http://www.baidu.com
** 如何进行通信的？
** 访问到百度的服务器，把百度的页面显示到浏览器中 ** 把域名进行解析成ip地址，通过ip地址+端口号进行访问
** 默认的80端口，这个端口可以省略 * 想让在浏览器地址栏输入一个地址，可以直接访问我本地的电脑文件
** 使用什么技术：网络编程 * 服务器：
** 硬件：一台电脑
** 软件：安装服务器软件的电脑，称为一台服务器 * ip地址
** 静态ip（公共ip）：只要可以上网，都可以直接通过这个ip进行访问
拨号上网 * 常见的web服务器
** tomcat服务器：是apache组织，免费开源的服务器（中小公司） ** weblogic服务器：bea公司，服务器是收费的服务器（大公司常用） ** websphere服务器：ibm公司，服务器是收费的服务器（政府机构、银行提供一整套服务）3. tomcat服务器的安装（*****）
* tomcat7.X版本，jdk使用1.7版本 * 前提条件：安装tomcat之前，必须安装jdk，必须配置环境变量 JAVA_HOME * tomcat默认的端口号： 8080 ** 两种方式
** 第一种方式：使用exe文件进行安装 ** 第二种方式：使用压缩文件进行安装（一般使用这种方式）
* 解压到没有中文和空格的文件夹下面
* 如果检验是否安装成功
** 是否可以正常启动
*** 找到tomcat目录 bin ，找到一个文件 startup.bat，执行这个文件就可以启动tomcat服务器
**** 出现一个黑色的框，里面如果没有异常，同时下面出现ms，表示启动成功了 ** 在tomcat里面放入一个html页面，是否可以访问这个页面
*** 找到tomcat目录 webapps，创建文件夹bb，在文件夹里面创建一个html文件 a.html
*** 可以使用ip+端口号进行访问，现在访问本地电脑本地的ip可以 localhost 127.0.0.1 ** 通过ip地址+端口号进行访问，出现一个猫的页面
eg: 浏览器输入http://127.0.0.1:8080/bb/a.html ** 关闭tomcat服务器
*** 可以直接把窗口关闭
*** 到tomcat的bin目录里面执行shutdown.bat文本4. tomcat常见的问题的解决（*****）
（1）配置环境变量 JAVA_HOME，出现效果就是一闪就消失了
** 查看错误的方式：启动cmd窗口，进入到bin目录下面，执行startup.bat
出现错误的提示
Neither the JAVA_HOME nor the JRE_HOME environment variable is defined
At least one of these environment variable is needed to run this program （2）端口冲突
* 到tomcat的logs目录里面找文件 catalina.log：
** java.net.BindException: Address already in use: JVM_Bind <null>:8080 * 两种解决方式：
** 第一种方式：结束到占用的那个端口
** 使用doc命令 netstat -ano 找到当前占用的端口的pid的值
** 启动任务管理器找到进程，在进程里面找到pid的值结束 ** 第二种方式：修改启动的端口
** 找到tomcat里面conf目录，找到一个文件 server.xml
** <Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" /> ** 可以修改为 80 端口，直接通过ip进行访问了
eg: 浏览器输入http://127.0.0.1/bb/a.html 获得ip: cmd: ipconfig /all
以太网适配器，IPv4115.156.197.55
5. tomcat的目录结构（*****）
* bin目录：启动和关闭tomcat服务器
* conf目录（***）：放置的是tomcat配置文件 server.xml web.xml
* lib目录：放置tomcat的一些jar包（支持tomcat运行的jar包；tomcat支持的其他的功能的jar包）
* logs目录：放置tomcat的日志文件
* temp目录：放置临时文件
* webapps目录（***）：如果项目想要在tomcat里面运行，这个项目必须要放到webapps下面
* work目录：sun公司提供servlet jsp，jsp编译成servlet放到这个目录里面6. 动态网站的目录结构（*****）
* 使用java开发动态网站项目 * 如果想要在tomcat里面运行动态网站的项目，必须要满足一定目录结构，才可以运行 * website
* WEB-INF(这个目录是必须要有的)
** 在WEB-INF下面必须要有一个文件 web.xml(必须有)
** 在WEB-INF下面有两个文件夹可选的
*** classes: 放的是java文件编译成class文件
*** lib ：项目的jar包 *** classes和lib可以不写，但是如果写必须是这个名称7. 使用myeclipse集成tomcat（*****）
* myeclipse10.X版本
* 集成步骤：
** 选择window-- 属性 --- myeclipse --- servers ---- tomcat ---- 选择相应的版本
enabl--第一栏“浏览”选择路径
* 在myeclipse中启动tomcat：找到tomcat，右键点击run server 可以启动tomcat服务器
* 在myeclipse中关闭tomcat：
** 直接点击红色按钮（相当于直接关闭电源）
** 找到tomcat右键点击stop server（正常关闭）8. 使用myeclipse向tomcat中部署项目
* 从现在创建项目就不是java project，而是web project（动态网站） * 部署方式右键点击tomcat -- add dep...--- 选择要部署项目
** 部署的目录结构：会把web项目里面 webroot下面的内容都放到tomcat里面去，webroot变成项目名称 *** 访问方式 http:// 115.156.197.55/项目名称/index.jsp * 名称问题（一般用一样的）
** 上面的名称项目显示的名称
** 下面的名称部署到tomcat里面名称：要通过下面的名称进行访问9. tomcat的manager配置（了解）
* 管理tomcat的项目（运行，关闭）
* 启动tomcat，进入到猫的页面 * 配置管理员的用户名和密码
** conf/tomcat-users.xml10. tomcat的虚拟路径的配置（※※※）
* 虚拟路径：把本地文件夹里面的项目，配置到tomcat里面，不需要部署
** 比如在c盘上面有一个项目，如果这个项目很大，比如10g，复制到webapps下面。通过虚拟路径配置项目，不需要复制。 * 配置有两种方式
** 第一种方式：找到conf下面server.xml，做配置
<Context docBase="本地项目路径" path="通过浏览器访问路径"></Context>
* 这个配置需要写在 </Host>之前
** <Context docBase="I:\itcast" path="/demo"></Context>
** 访问： http://127.0.0.1/demo/1.html ** 第二种方式：找到conf文件夹 Catalina下面的localhost（用的较多，避免sever.xml文件错误，导致不能启动）
*** 在localhost里面创建xml文件比如 aa.xml
*** 在这个xml文件中做配置 <Context docBase="i:\itcast"></Context>，但是不需要有path属性
*** 访问：通过xml的文件名称进行访问
*** 访问： http://127.0.0.1/aa/1.html小结：
*** 在tomcat里面如何部署项目（三种方式）
**** 直接在tomcat的webapps下面创建目录（动态网站的结构）
**** 使用myeclipse中集成tomcat，直接部署项目
**** 通过虚拟路径进行部署项目（有两种配置方式）11. 访问网站的全过程（※※※）
* 比如在地址栏输入地址 http://www.itcast.cn
** 这个地址如何进行访问？
** 这个地址域名，这个首先会到本地电脑去找一个文件 hosts文件，文件里面使用有这个域名对应的ip。
** 如果找到了ip，直接返回ip进行访问
** 如果找不到ip，到网络上去找一个域名解析服务器，服务器里面是否有域名对应的ip地址，
** 如果找到了ip，直接返回ip进行访问 ** 操作host文件，当前登录用户必须有管理员权限12. 配置tomcat的虚拟主机
* 找到conf下面server.xml，可以配置虚拟主机
* 在tomcat里面默认的虚拟主机，可以配置多个虚拟主机13. 仿百度页面的效果
* 首先修改host文件 127.0.0.1 www.baidu.com
* 配置虚拟主机
<Host name="www.baidu.com" appBase="I:\baidu"
unpackWARs="true" autoDeploy="true">
<Context docBase="\website" path="/"></Context>
</Host>
* 在tomcat的conf的web.xml中，welcome-file>baidu.htm</welcome-file>
默认访问页面
14. http协议的简介
* 协议：双方达成共同的目标 * 请求：在浏览器的地址栏输入一个地址，点击回车，这个地址到访问的服务器，这个过程称为请求
* 响应：服务器接受到发出的请求，根据请求返回数据到浏览器里面进行显示，这个过程响应 * http协议：请求和响应的过程中，遵循一定的数据格式 * 特点：
** 请求和响应同时存在，先有请求之后有响应
** http协议，默认端口是80知道就好【 * 使用命令 telnet 模拟http协议
** 首先连接tomcat服务器 telnet localhost 80
*** 不能输入的问题使用解决问题在键盘上 ctrl ] *** 请求的数据格式：
GET /bb/a.html HTTP/1.1
host:localhost *** 响应的数据格式
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Accept-Ranges: bytes
ETag: W/"27-1432777730225"
Last-Modified: Thu, 28 May 2015 01:48:50 GMT
Content-Type: text/html
Content-Length: 27
Date: Thu, 28 May 2015 07:03:37 GMT <h1>AAAAAAAAAAAAAAAAAA</h1> * 在win7系统里面，默认情况下不是直接是telnet命令，需要打开这个命令
** 如果安装系统使用ghost安装
】 * 一个软件的介绍 httpwatch（只能在ie上使用）
** 当安装之后，打开ie浏览器，可以使用这个软件
*** 在ie浏览器工具里面自动添加 httpwatch p...
**** 如果在工具里面找不到，使用快捷键 shift f2 ** 使用这个软件，必须要点击 record（红色按钮）
** 在地址栏输入一个地址，点击回车，在下面出现请求地址，点击这个地址
**在最下面点击 stream，在stream下面有左右两部分，左边的部分是请求的数据格式，右边的部分是响应的数据格式 * 因为httpwatch只能在ie下使用，在火狐或者谷歌浏览器里面可以使用自带的调试工具
** 都是使用f12打开调试工具
*** 在火狐里面，点击网络，就可以查看到当前请求和响应的数据
*** 在谷歌里面，点击NetWork，查看到当前请求和响应的数据 * HTTP/1.0 和 HTTP/1.1区别
** 使用telnet命令，分别操作这两个版本的HTTP
*** 使用HTTP/1.0，如果做出响应立刻断开连接
*** 使用HTTP/1.1,做出了响应之后不会立刻断开15. http协议的请求（※※※）
* 分别是 get 和 post 提交表单，查看请求的数据格式
** get提交：在地址栏会携带请求的数据，
** post提交：在地址栏不会携带数据，数据在请求体里面 ** 创建一个页面，创建一个表单，使用get方式进行提交
*** 使用get提交之后，请求的数据格式
**
GET /day07/request/formget.html?username=zhangsan HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://127.0.0.1/day07/request/formget.html
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; MAAU)
Accept-Encoding: gzip, deflate
Host: 127.0.0.1
If-Modified-Since: Thu, 28 May 2015 07:27:11 GMT
If-None-Match: W/"591-1432798031872"
Connection: Keep-Alive * http协议的请求三部分组成：
** 第一部分：请求行
** 请求行里面包含：请求方式、请求地址、http版本
** 第二部分：请求头
** 类似key-value形式，一个key可以对应一个value，也可以对应多个value
** 三个重要的请求头
【记住这三个请求头】
*** Referer：防盗链，得到当前请求的地址 **** 创建两个文件夹 my 和 other
**** 分别创建两个页面 my.html other.html
***** 只能是my文件夹里面的文件才可以访问
***** 只有my文件夹里面的文件才可以访问servlet *** User-Agent：获取当前请求的浏览器的信息 *** If-Modified-Since：经常和响应里面Last-Modified一起使用，用于查询本地缓存 ** 第三部分：请求体
** 通过post提交的数据 user=lisi ** 表单提交的方式有很多种，常用的两种 get和post ** Accept: text/html,image/* 客户端识别文件类型
Accept-Charset: ISO-8859-1 客户端字符集
Accept-Encoding: gzip 客户端支持编码类型 gzip 压缩格式
Accept-Language:zh-cn 客户端语言
Host: www.itcast.com:80 访问服务器地址
If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT （重要）和Last-Modified 一起使用控制缓存
Referer: http://www.itcast.com/index.jsp （重要）防止盗链
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) 浏览器类型（文件下载时，不同浏览器进行不同处理）
Connection: close/Keep-Alive 请求后连接是关闭还是保持
Date: Tue, 11 Jul 2000 18:23:51 GMT 请求时间 16. http协议的响应
* HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Accept-Ranges: bytes
ETag: W/"578-1432798092723"
Last-Modified: Thu, 28 May 2015 07:28:12 GMT
Content-Type: text/html
Content-Length: 578
Date: Thu, 28 May 2015 07:49:29 GMT <!DOCTYPE html>
<html>
<head>
<title>formpost.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
....................... * http协议的响应有三部分组成：
** 第一部分：响应行
** 结构：http版本、状态码、状态码描述
** 状态码：当前的响应的状态
*** 常见的状态码
* 200：成功 ok
* 302：重定向
* 304：查找本地缓存
* 404：资源找不到
* 500：服务器内部错误（代码写错了）
* 503：服务器挂了 ** 第二部分：响应头
** 类似key value形式，一个key可以有一个或者多个value
*** 三个重要的响应头信息
* Location
** 经常和302一起实现重定向的操作
* 代码
//重定向使用状态码 302
response.setStatus(302);
//设置头信息 Location 完成重定向的操作
response.setHeader("Location", "/day07/my/my.html"); * Refresh
** 在页面的定时跳转
** 代码
response.getWriter().write("页面将在3秒之后跳转..");
//使用Refresh头信息实现定时跳转
response.setHeader("Refresh", "3;url=/day07/other/other.html"); * Last-Modified：
** 经常请求里面If-Modified-Since一起使用查找本地缓存 * Content-Disposition：做文件下载时候
*** 禁用浏览器缓存
* Expires: -1
Cache-Control: no-cache
Pragma: no-cache ** 第三部分：响应体
** 显示到页面上的内容 ** 重定向和转发区别
*** 在一个请求里面，又做了一次请求
** 重定向：比如找小文借钱10万，小文没有钱，告诉我小温有钱，我再去找小温，把钱拿到
*** 请求两次，响应两次 ** 转发：比如找张三借钱，但是张三没有钱，张三去帮我找李四借钱，最终把钱给我
*** 请求一次，响应一次17. If-Modified-Since和Last-Modified查找本地缓存
* 画图分析执行的过程 * 比如访问图片，第一次访问时候，在服务器端产生访问时间使用头信息存储 Last-Modified
* 给一个响应：首先把图片显示到页面上，携带第一次产生的时间，把时间存到浏览器中使用 If-Modified-Since * 第二次访问图片，请求时候携带第一次这个时间发送请求，到了服务器，拿着请求的时间和服务器上面的时间进行比较，
如果有相同的时间，返回状态码 304，让找本地缓存；如果没有相同的时间，重新请求新的数据18. web开发中缓存处理
* 使用快捷键 ctrl f5：表示无缓存刷新
* 移除项目重新部署，或者找到tomcat的work目录，把work里面内容都删除
* 直接使用浏览器清除缓存(工具—iternet选项—设置—文件)
* 请求的地址后面加一个随机数 http://127.0.0./day11/1.html?id=随机数Day09
1.servlet快速入门
*什么事servlet?
**servlet就是一个java程序，可以接收和响应客户端的请求。**实现servlet？
***实现Servlet接口
***继承GenericServlet类
***继承HttpServlet类 ***如果实现Servlet接口，需要把接口里面的所有方法都实现
***但是如果使用继承，则不需要实现所有方法*第一个Servlet程序
**使用记事本开发一个Servlet程序
***开发步骤
（1）继承GenericServlet类实现Servlet
（2）向页面输出内容，使用Service方法里面呃阐述response向页面输出
（3）不熟到tomcat里面，通过配置让服务器知道它不是一个普通的java程序，而是一个servlet
找到WEB-INF下面的web.xml文件 <servlet>
<servlet-name>hello</servlet-name> //名称可以随便写
<servlet-class>cn.itcast.servlet.hello</servlet-class> //包类路径
</servlet> <servlet-mapping>
<servlet-name>hello</servlet-name> //与上面的名称相同
<url-pattern>/hello</url-pattern> //访问名
</servlet-mapping>2.servlet的执行过程
画图分析：3.servlet的生命周期
*servlet的生命周期：servlet从创建到销毁
*servlet接口里面有五个方法，有三个方法是与servlet生命周期相关：
**init方法，servlet创建时执行这个方法，第一次访问时创建，执行一次
**service方法，每次处理客户端请求时执行这个方法，执行多次
**destroy方法，销毁servlet时执行这个方法，执行一次4.接口的继承关系
ServletRequest HttpServletRequest
ServletResponse HttpServletResponse** Http*是子接口** Http*是专注于http协议的接口，目前只有http5.Servlet开发注意细节
（1）GenericServlet里面init方法有参数和无参数的关系
**inti有参数的方法最终也会执行无参数的方法，所以用无参的inti()即可
（2）HttpServletRequest里面service和do*方法
**根据提交的方式执行相应的do*方法，比如提交方式是get/post，执行doGet/doPost方法
**直接实现doGet和doPost就可以了，service最终也是执行do*方法***在实际开发中，一般是使用继承HttpServlet，实现doGet和doPost新建时，直接创建Servlet，然后下一步，修改URL，自动生成web.xml（3）简化编程
**无论什么提交方式，都会执行这个代码
***在doPost中，调用doGet方法： this.doGet(request, response);
（4）Servlet启动时创建，而不是第一次访问时创建
**解决第一次访问时很慢这个问题**需要进行配置，在web.xml中找到要启动的servlet，
<load-in-startiup>正整数值</load-in-startiup>//注意不能是1
eg:
<servlet>
<servlet-name>Demo4</servlet-name>
<servlet-class>cn.itcast.servlet.Demo4</servlet-class>
<load-in-startiup>2</load-in-startiup>
</servlet>
（5）修改servlet模板

正文

相关阅读

Servlet中加入JavaScript，servlet怎么json方法

最新版J2EE教学视频servlet讲解全15讲主讲-韩顺平视频教程

【编程开发技术】王勇老师Servlet全新力作 Servlet精华实战视频教程动力节点Servlet视频教程

【JAVAEE】【No834】MSB Java web 连老师servlet视频教程

js请求的五个步骤，js请求servlet

黑色射击游戏视频大全，黑色scar突击步枪

济南如何做网络推广，济南网络推广公司电话

erp系统扫描出库，仓库erp系统扫码

目录[+]