注意 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.复制限定名（包+类） 选中类名 鼠标右键+Y Day 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的注释 ： <!-- 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:UsersasusDesktop 413day01codea.jpg - http://www.baidu.com/b.jpg ** 相对路径 - 一个文件相对于另外一个文件的位置 - 三种： ** html文件和图片在一个路径下，可以直接写文件名称 - <img src="b1.jpg" alt="这是一个美女"/> ** 图片在html的下层目录 在html文件中，使用img文件夹下面的a.jpg -- C:UsersasusDesktop 413day01code 4.html -- C:UsersasusDesktop 413day01code imga.jpg *** 在html中使用图片 4.html和img在一个路径下 imga.jpg ** 图片在html文件的上层目录 --- C:UsersasusDesktop 413day01 code4.html --- C:UsersasusDesktop 413day01 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"> </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> </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> </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、注释 <!-- html的注释 --> 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 ha 5. 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.com Day 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="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中的注释（*****） * 写法 <!-- xml的注释 --> ** 注意的地方 **** 注释不能嵌套 <!-- <!-- --> --> <!-- <!-- <sex>nv</sex>--> --> ** 注释也不能放到第一行，第一行第一列必须放文档声明 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解析器 jdom 18. 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 ** 查询所有的元素的名称 查询元素下面的子节点 使用方法 getChildNodes 1. schema约束 dtd语法： <!ELEMENT 元素名称 约束> ** schema符合xml的语法，xml语句 ** 一个xml中可以有多个schema，多个schema使用名称空间区分（类似于java包名） ** dtd里面有PCDATA类型，但是在schema里面可以支持更多的数据类型 *** 比如 年龄 只能是整数，在schema可以直接定义一个整数类型 *** schema语法更加复杂，schema目前不能替代dtd 2. 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的属性值是b1 13. 使用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 application 2. 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 d 4. 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--- Character 12. 增强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目录 左下角+号，选择Navigator 13. 内容补充 （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 * 普通方法通过一个类 Method 16、使用反射操作类里面的无参数的构造方法（**会写**） * 首先获取到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 以太网适配器，IPv4 115.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.xml 10. 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:aidu" 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协议的接口，目前只有http 5.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模板