注意 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模板