html常用标签
html的简介
- 什么是html？
- HyperText Markup Language：超文本标记语言，网页语言
– 超文本：超出文本的范畴，使用html可以轻松实现这样操作
– 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
– 网页语言：
- HyperText Markup Language：超文本标记语言，网页语言
第一个html程序。
- 创建java文件.java
– 先编译，然后再运行（jvm） - html后缀是 .html .htm
– 直接通过浏览器就可以运行 - 代码
– 这是我的第一个html程序！
- 创建java文件.java
html的规范（遵循）
- 一个html文件开始标签和结束的标签
- 定义一个java方法 { }
- html包含两部分内容
（1） 设置相关信息
（2） 显示在页面上的内容都写在body里面 - html的标签有开始标签，也要有结束标签
- html的代码不区分大小写的
- 有些标签，没有结束标签 ，在标签内结束
- 比如 换行
- 比如 换行
- 一个html文件开始标签和结束的标签
html的操作思想（——理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
- 什么是html？
文字标签和注释标签
文字标签：修改文字的样式
- 属性：
- size: 文字的大小 取值范围 1-7,超出了7，默认还是7
- color：文字颜色
- 两种表示方式
– 英文单词：red green blue black white yellow gray……
– 使用十六进制数表示 #ffffff : RGB
- 通过工具实现不同的颜色 #66cc66
- 两种表示方式
- 属性：
注释标签
- java注释几种？三种
- html的注释 ：
标题标签. 水平线标签和特殊字符
标题标签
扫描二维码关注公众号，回复： 3507154 查看本文章
- …….
- 从h1到h6，大小是依次变小，同时会自动换行
水平线标签
-
- 属性
– size: 水平线的粗细 取值范围 1-7
– color: 颜色 - 代码
-
特殊字符
- 想要在页面上显示这样的内容 :是网页的开始！
- 需要对特殊字符进行转义
- < <
- > >
- 空格：
- & : &
列表标签
- 比如现在显示这样的效果
传智播客
财务部
学工部
人事部
–
– 在dl里面 : 上层内容
– 在dl里面 ：下层内容 代码
- 传智播客
- 财务部
- 学工部
- 人事部
想要在页面上显示这样的效果
- 财务部
- 学工部
- 人事部
a. 财务部
b. 学工部
c. 人事部i. 财务部
ii. 学工部
iii. 人事部
–
- 属性 type：设置排序方式 1(默认) a i
– 在ol标签里面- 比如现在显示这样的效果
- 具体内容
代码
- 财务部
- 学工部
- 人事部
想要在页面上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部–
属性： type: 空心圆circle . 实心圆disc . 实心方块square ，默认disc
在ul里面- 代码
- 财务部
- 学工部
- 人事部
图像标签（——-）
- src: 图片的路径
- width：图片的宽度
height：图片的高度
alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
– 有些浏览器下不显示（没有效果）
路径的介绍
- 分类：两类
– 绝对路径
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
– 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
– html文件和图片在一个路径下，可以直接写文件名称
-
-- 图片在html的下层目录 在html文件中，使用img文件夹下面的a.jpg -- C:\Users\asus\Desktop\0413\day01\code\ 4.html -- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg --- 在html中使用图片 4.html和img在一个路径下 img\a.jpg -- 图片在html文件的上层目录 --- C:\Users\asus\Desktop\0413\day01\ code\4.html --- C:\Users\asus\Desktop\0413\day01\ c.png --- html文件所在的目录和图片是一个目录 -- 图片和html文件是什么关系？ - 图片在html的所在目录的上层目录 day01 -- 怎么表示上层路径 ../ - ../: day01 -- ../c.png -- 想要表示上层的上层 ../../- 分类：两类
案例一：列表标签的使用（作业：完成剩余的部分）
超链接标签（——）
表格标签（—-重要的标签—–）
可以对数据进行格式化，使数据显示更加清晰
-
: 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度
– 在table里面
- 设置对齐方式 align： left center right— 在tr里面
设置显示方式 align： left center right
— 使用th也可以表示单元格
表示可以实现居中和加粗
代码
画图分析表格的写法
- 首先定义一个表格的范围使用table
- 定义一行使用 tr
- 定义一个单元格使用 td
– 操作技巧：
- 首先数有多少行 ，数每行里面有多少个单元格
– 表格的标题
– 合并单元格
- rowspan：跨行
– 人员信息
- colspan：跨列
– 人员信息表单标签（—-今天最重要的标签—-）
可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
: 定义一个表单的范围
属性
– action： 提交到地址，默认提交到当前的页面
– method: 表单提交方式
- 常用的有两种 get和post，默认是get请求– 面试题目： get和post区别
1. get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）
2. get请求安全级别较低，post较高
3. get请求数据大小的限制，post没有限制– enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传）
– 输入项：可以输入内容或者选择内容的部分
- 大部分的输入项 使用------- 在输入项里面需要有一个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=""/>案例：使用表单标签实现注册页面
- 使用表格实现页面效果 - 超链接不想要他有效果 href="#" - 如果表格里面的单元格没有内容， 使用空格作为占位符 - 使用图片提交表单 <input type="image" src="图片的路径"/>html中的其他的常用标签的使用
b : 加粗
s ：删除线
u ：下划线
i ：斜体pre ：原样输出
sub : 下标
sup : 上标p ：段落标签 比br标签多一行
====明天css时候一直使用
div ：自动换行
span：在一行显示html的头标签的使用
- html两部分组成 head和body
– 在head里面的标签就是头标签
– title标签：表示在标签上显示的内容
– 标签：设置页面的一些相关内容
-
– base标签：设置超链接的基本设置
- 可以统一设置超链接的打开方式
– link标签：引入外部文件
– 明天css，可以使用link标签引入css文件- html两部分组成 head和body
框架标签的使用（会用）
-
rows:按照行进行划分
–cols:按照列进行划分
–
-
- 具体显示的页面
- 具体显示的页面
— 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
//把页面划分成上下两部分
//上面页面//把下面部分划分成左右两部分
//左边的页面
//右边的页面
如果在左边的页面超链接，想让内容显示在右边的页面中
- 设置超链接里面属性 target值设置成名称
- 超链接1
-
a标签的扩展（了解）
- 百度是网络资源
当a标签里面访问网络资源时候，必须要加一个协议 http：表示一个网络的公共协议，
如果加上http协议之后，自动识别访问资源是一个网络资源当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。
如果不是公共协议，会去本地电脑找支持这个协议的应用程序。
今天内容的总结
- html操作思想（—-）
- 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
- font标签 属性：size 取值范围 1-7 color：英文单词，十六进制数 #ffffff
- 标题标签 ….. : 从h1到h6越来越小，自动换行
注释
列表标签
–
– 有序
– 无序图像标签(——)
– alt:浏览器兼容性很差路径（相对路径）(—-)
– 在同一级目录 ：直接写
– 在下一层目录： images/1.jpg
– 在上层目录： ../超链接标签（—–）
显示在页面上的内容- 打开方式 target=”self blank”
- 默认是在当前页面打开
表格标签（—–）
//加粗和居中- 技巧：先数有多少行，数每行里面有多少个单元格
表单标签（— 今天最重要的标签—）
:
- action: 提交到地址
- method：提交方式 ：常用的有两种 get和post
get和post区别
enctype属性（上传时候使用）
输入项
- 输入项里面写name属性
- 普通输入项
- 密码：password
- 单选框：radio
- 复选框：checkbox
- 下拉框
文本域
文件 file
提交按钮 submit
- 重置 reset
使用图片提交
隐藏项 hidden
- 普通按钮 button
div和span(——)
框架标签（会用）
昨天内容回顾
html的操作思想
– 使用标签把要操作的数据包起来，通过修改标签的属性值来实现标签内数据样式的变化
—图像标签
– 通过html访问本地图片，使用绝对路径，目前有问题表格标签
– 技巧：数里面有多少行，每行里面有多少个单元格
–
表单标签
–
- 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"div和span
- div: 自动换行
- span：在一行显示
- html操作思想（—-）
CSS
css的简介
css： 层叠样式表
– 层叠：一层一层的– 样式表：
很多的属性和属性值- 是页面显示效果更加好
- CSS将网页内容和显示样式进行分离，提高了显示功能。
css和html的结合方式（四种结合方式）
（1）在每个html标签上面都有一个属性 style，把css和html结合在一起
-（2）使用html的一个标签实现 标签，写在head里面
-
javascript
javascript的简介
是基于对象和事件驱动的语言，应用与客户端。
- 基于对象：
– 提供好了很多对象，可以直接拿过来使用 事件驱动：
– 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：文档对象模型
js和html的结合方式（两种）
第一种：
- 使用一个标签第二种：
- 使用script标签，引入一个外部的js文件
— 创建一个js文件，写js代码
-– 使用第二种方式时候，就不要在script标签里面写js代码了，不会执行。
js的原始类型和声明变量
– java的基本数据类型 byte short int long float double char boolean
– 定义变量 都使用关键字 var
– js的原始类型（五个）
- string: 字符串
— var str = “abc”;- number：数字类型 --- var m = 123; - boolean：true和false --- var flag = true; - null --- var date = new Date(); --- 获取对象的引用，null表示对象引用为空 ，所有对象的引用也是object - undifined --- 定义一个变量，没有赋值 --- var aa;– typeof(); 查看当前变量的数据类型
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里面一样- java里面的语句：
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(“
”);
– 可以向页面输出变量，固定值和html代码实现99乘法表（输出到页面上）
document.write(“
”);
//循环行 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(“”);document.write里面是双引号，如果设置标签的属性需要使用单引号
- document.write可以输出变量，还可以输出html代码
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：获取到数组的长度
数组可以存放不同的数据类型的数据
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("参数列表","方法体和返回值");js的全局变量和局部变量
– 全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
- 在方法外部使用，在方法内部使用，在另外一个script标签使用– 局部变量：在方法内部定义一个变量，只能在方法内部使用
- 如果在方法的外部调用这个变量，提示出错
- SCRIPT5009: “nn”未定义
12-js的局部变量.html, 行18 字符3– ie自带了一个调试工具，ie8及其以上的版本中，键盘上 F12，在页面下方出现一个条
script标签放在的位置
- 建议把script标签放到 后面
- 如果现在有这样一个需求：
在js里面需要获取到input里面的值，如果把script标签放到head里面
会出现问题。
html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值，
因为页面还没有解析到input那一行，肯定取不到。
js的重载
什么是重载？方法名相同，参数列表不同
- java里面有重载，肯定有
js里面是否有重载？
今天的内容的总结
css
– css和html的四种结合方式(——-)– css的基本选择器(——–)
- 标签选择器 div {css代码}
- class选择器 .名称 {}
- id选择器 #名称{}– css的扩展选择器(了解)
- 关联选择器
— 嵌套标签的样式的设置
- 组合选择器
— 不同标签设置相同的样式
- 伪元素选择器
– a标签的状态
lv ha
– 盒子模型(了解)
- 边框 border
上下左右
- 内边距 padding
上下左右
- 外边距 margin
上下左右– 漂浮(了解)
float : left right– 定位(了解)
position：absolute relativejavascript(——-)
– 什么是javascript
- 基于对象和事件驱动的语言，应用与客户端。
- 特点：
交互性 安全性 跨平台性- javascript和java区别 - 组成（3部分） - ECMAScript - bom - dom– js和html的结合方式（两种）
第一种
第二种– 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标签位置
– 建议放在后面– js的重载（回去思考这个问题）
Javascript的常见对象
js的String对象
– 创建String对象
— var str = “abc”;– 方法和属性（文档）
— 属性 length：字符串的长度--- 方法 （1）与html相关的方法 - bold()：加粗 - fontcolor(): 设置字符串的颜色 - fontsize(): 设置字体的大小 - 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) --- 从第几位开始，到第几位结束，但是不包含最后一位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("-")); - 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); - 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());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?毫秒数js的Math对象
- 数学的运算
– 里面的都是静态方法，使用可以直接使用 Math.方法()
– ceil(x): 向上舍人
– floor(x)：向下舍人
– round(x)：四舍五入
– random()：得到随机数（伪随机数）
- 得到0-9的随机数
Math.random()-10
Math.floor(Math.random()-10));- 数学的运算
js的全局函数
- 由于不属于任何一个对象，直接写名称使用
– eval() ： 执行js代码（如果字符串是一个js代码，使用方法直接执行）
—- var str = “alert(‘1234’);”;
//alert(str);
eval(str);– encodeURI() ：对字符进行编码
- %E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa1234decodeURI() ：对字符进行解码
encodeURIComponent() 和 decodeURIComponent()
– isNaN():判断当前字符串是否是数字
– var str2 = “aaaa”;
alert(isNaN(str2));
— 如果是数字，返回false
— 如果不是数字，返回true– parseInt()：类型转换
– var str3 = “123”;
document.write(parseInt(str3)+1);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; } }js的bom对象
– bom：broswer object model: 浏览器对象模型
– 有哪些对象？
— navigator： 获取客户机的信息（浏览器的信息）
- navigator.appName
- document.write(navigator.appName);— screen: 获取屏幕的信息
- document.write(screen.width);
document.write(“
”);
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);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）
- dom：document object model: 文档对象模型
document对象
- 表示整个的文档
– 常用方法
—- write()方法：
（1）向页面输出变量（值）
（2）向页面输出html代码
- var str = “abc”;
document.write(str);
document.write(“
”);---- getElementById(); - 通过id得到元素（标签） - //使用getElementById得到input标签 var input1 = document.getElementById("nameid"); //传递的参数是标签里面的id的值 //得到input里面的value值 alert(input1.name); //标签对象.属性名称 //向input里面设置一个值value input1.value = "bbbbb"; ---- getElementsByName(); - 通过标签的name的属性值得到标签 - 返回的是一个集合（数组） - //使用getElementsByName得到input标签 var inputs = document.getElementsByName("name1"); //传递的参数是 标签里面的name的值 //alert(inputs.length); //遍历数组 for(var i=0;i<inputs.length;i++) { //通过遍历数组，得到每个标签里面的具体的值 var input1 = inputs[i]; //每次循环得到input对象，赋值到input1里面 alert(input1.value); //得到每个input标签里面的value值 } ---- 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);案例：window弹窗案例
实现过程
创建一个页面
– 有两个输入项和一个按钮
– 按钮上面有一个事件：弹出一个新窗口 open创建弹出页面
– 表格
– 每一行有一个按钮和编号和姓名
– 按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置—-//实现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
案例一：在末尾添加节点
第一步：获取到ul标签
第二步：创建li标签
document.createElement(“标签名称”)方法
第三步：创建文本
document.createTextNode(“文本内容”);第四步：把文本添加到li下面
使用 appendChild方法
第五步：把里添加到ul末尾
使用 appendChild方法元素对象（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方法
- var ul11 = document.getElementById(“ulid1”);
//获取ul下面的子标签
//var lis = ul11.childNodes;
//alert(lis.length);
var lis = ul11.getElementsByTagName(“li”);
alert(lis.length);Node对象属性一
- nodeName
- nodeType
nodeValue
使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象
标签节点对应的值
nodeType： 1
nodeName： 大写标签名称 比如SPAN
nodeValue: null- 属性节点对应的值
nodeType： 2
nodeName： 属性名称
nodeValue: 属性的值 - 文本节点对应的值
nodeType： 3
nodeName： #text
nodeValue: 文本内容
Node对象的属性二
- qqqqq
- wwww
父节点
- 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);
- //获取ul的第一个子节点 id=li1
- 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);
操作dom树
– appendChild方法
- 添加子节点到末尾
- 特点：类似于剪切黏贴的效果– insertBefore(newNode,oldNode)方法
- 在某个节点之前插入一个新的节点
- 两个参数
- 要插入的节点
- 在谁之前插入
- 插入一个节点，节点不存在，创建
1. 创建标签
2. 创建文本
3. 把文本添加到标签下面
- 代码
/-
1. 获取到li13标签
2. 创建li
3. 创建文本
4. 把文本添加到li下面
5. 获取到ul
6. 把li添加到ul下面（在- 貂蝉 之前添加
- 董小宛 ）
- 貂蝉 之前添加
- 董小宛
innerHTML属性
- 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
第一个作用：获取文本内容
— //获取span标签
var span1 = document.getElementById(“sid”);
alert(span1.innerHTML);第二个作用：向标签里面设置内容（可以是html代码）
— //向div里面设置内容AAAAA
//获取到div
var div11 = document.getElementById(“div11”);
//设置内容
div11.innerHTML = “AAAAA
“;– 练习 ： 向div里面添加一个表格
- //向div里面添加一个表格
//var tab = “
“;aaaaaa bbbbbb cccccc var tab = "<table>"; tab += "</table>"; //相当于 var tab = "<table></table>"; div11.innerHTML = tab;案例二：动态显示时间
- 得到当前的时间
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);- 得到当前的时间
案例三：全选练习
– 使用复选框上面一个属性判断是否选中
- 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. 如果不是选中，下面是全不选
-/
案例四：下拉列表左右选择
下拉选择框
111
111
创建一个页面
– 两个下拉选择框
- 设置属性 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方法-/
案例五：省市联动
- 创建一个页面，有两个下拉选择框
- 在第一个下拉框里面有一个事件 ：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
- 创建一个二维数组，存储数据
每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
/-- 遍历二维数组
得到也是一个数组（国家对应关系）
拿到数组中的第一个值和传递过来的值做比较
- 如果相同，获取到第一个值后面的元素
- 得到city的select
- 添加过去（使用）appendChild方法
- 创建option（三步）
-/
- 创建option（三步）
/-
由于每次都要向city里面添加option
第二次添加，会追加。- 每次添加之前，判断一下city里面是否有option，如果有，删除-/
案例六：动态生成表格
-创建一个页面：两个输入框和一个按钮
-代码和步骤
/-
1. 得到输入的行和列的值
2. 生成表格
– 循环行
– 在行里面循环单元格
3. 显示到页面上
- 把表格的代码设置到div里面
- 使用innerHTML属性
-/
//获取输入的行和列
var h = document.getElementById(“h”).value;
var l = document.getElementById(“l”).value;//把表格代码放到一个变量里面
”;
var tab = “
//循环行
for(var i=1;i<=h;i++) {
tab += ““;
//循环单元格
for(var j=1;j<=l;j++) {
tab += “”
}
tab += ““;
}aaaaaaa tab += “”;
//alert(tab);
//得到div标签
var divv = document.getElementById(“divv”);
//把table的代码设置到div里面去
divv.innerHTML = tab;
}表单提交方式
使用submit提交
…..使用button提交表单
- 代码
//实现提交方法
function form1() {
//获取form
var form1 = document.getElementById(“form1”);
//设置action
form1.action = “hello.html”;
//提交form表单
form1.submit();
}
- 代码
使用超链接提交
- 代码
使用超链接提交
- 代码
onclick：鼠标点击事件
onchange：改变内容（一般和select一起使用）onfocus:得到焦点 (ie5. 某些版本的ie6)
onblur:失去焦点
-/
//获取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”);
//在
//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): 复制节点
- //把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);
– 操作dom总结
- 获取节点使用方法
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
- 插入节点的方法
insertBefore方法：在某个节点之前插入
appendChild方法：在末尾添加，剪切黏贴
- 删除节点方法
removeChild方法：通过父节点删除
- 替换节点方法
replaceChild方法：通过父节点替换
xml
xml的简介
eXtensible Markup Language：可扩展标记型语言
– 标记型语言：html是标记型语言
- 也是使用标签来操作
– 可扩展：
- html里面的标签是固定，每个标签都有特定的含义
- 标签可以自己定义,可以写中文的标签
shema
schema约束
dtd语法：
Java知识回顾
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
debug的调试模式（断点调试模式）
使用这种模式，调试程序（看到程序里面数据的变化）
使用debug第一步需要设置一个断点（让程序运行停止在这一行）
- 显示出来行号
- 双击左边，出现一个圆点，表示设置了一个断点
使用debug as方式，运行程序
- 提示是否进入到调试界面，yes
- 在断点那一个，有一个绿色条，表示程序停止在这一行，没有向下运行
可以让程序向下执行，
- 使用 step over 快捷键是 F6（单步执行）
- resume F8：表示调试结束，直接向下运行
– 比如当前的断点之后还有断点，跳到下一个断点，
– 如果当前断点后面没有断点，程序直接运行结束
debug另外一个用途
– 查看程序的源代码
– F5 step into：进入到方法
– F7 step return :返回
myeclipse的快捷键的使用
- 代码提示 alt /
- 快速导包 ctrl shift o
- 单行注释 ctrl /
- 去掉单行注释 ctrl /
- 多行注释 ctrl shift /
- 去掉多行注释 ctrl shift \
- 删除行 ctrl d
junit的使用
单元测试
测试对象是 是一个类中的方法
juint不是javase的一部分，想要使用导入jar包
– 但是，在myeclipse中自带了junit的jar包首先junit版本 3.x 4.x
- 单元测试方法时候，方法命名规则 public void 方法名() {}
使用注解方式运行测试方法, 在方法的上面
– @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. 可变参数
– 反射
泛型的简介
为什么要使用泛型？
- 一般使用在集合上
– 比如现在把一个字符串类型的值放入到集合里面，这个时候，这个值放入到集合之后，失去本事的类型，只能是object类型，
这个时候，比如想要对这个值进行类型转换，很容易出现类型转换错误，怎么解决这个问题，可以使用泛型来解决
- 一般使用在集合上
在集合上如何使用泛型
- 常用集合 list set map
- 泛型语法 集合 比如 List
在泛型里面写是一个对象，String 不能写基本的数据类型 比如int (—-)
– 写基本的数据类型对应包装类
byte – Byte
short – Shortint -- Integer long -- Long float -- Float double -- Double char -- Character boolean -- Boolean在list上使用泛型
list的三种实现 ArrayList linkedList Vector
代码：
@Test
public void testList() {
List list = new ArrayList();
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 set = new HashSet();
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 it1 = set.iterator();
while(it1.hasNext()) {
System.out.println(it1.next());
}
}在map上面使用泛型
map结构：key-valu形式
代码：
//在map上使用泛型
@Test
public void testMap() {
Map
软件体系结构
C/S：Client/Servlet，例如QQ就是CS结构
需要编写服务器端程序和客户端程序。
缺点：更新需要两端，总要求客户下载新的客户端程序
优点：安全性比较好B/S：Browser/Server
缺点：安全性较差
优点：只需要编写服务器端程序Web资源
- 静态资源：html. css. javascript. 图片等；
- 动态资源：javaweb的动态资源有jsp/servlet，其他web程序动态资源有asp. php等。
静态资源和动态资源的区别
- 客户端访问服务器静态资源，服务器直接响应；
- 客户端访问服务器动态资源，服务器需要先把动态资源转换成静态资源，再响应。
客户端通过浏览器访问服务器
- http://主机名:端口号/路径，例如：http://www.itcast.cn:80/index.html
Web服务器
- Tomcat（Apache）：当前应用最广的JavaWeb服务器，支持servlet规则，不支持JavaEE规范；
- JBoss（Redhat红帽）：支持JavaEE规则；
- GlassFish（Orcale）：支持servlet规则，应用不是很广；
- Resin（Caucho）：支持JavaEE规则，应用越来越广；
- Weblogic（Orcale）：要钱的！支持JavaEE规则，适合大型项目；
- Websphere（IBM）：要钱的！支持JavaEE规则，适合大型项目；
===================================
===================================
Tomcat
tomcat6支持servlet2.5
tomcat7支持servlet3.0
启动关闭tomcat
需要先配置JAVA_HOME- 双击%CATALANA_HOME%\bin\startup.bat
双击%CATALANA_HOME%\bin\shutdown.bat
访问服务器：http://localhost:8080/index.jsp
因为服务器在本机上，所以主机名为localhost，表示本机
tomcat的默认端口为8080
index.jsp是主页
修改端口号
- 修改端口号，%CATALANA_HOME%\conf\server.xml，修改，把8080修改了即可。
- http协议默认端口为80，也就是说http://localhost，等同与http://localhost:80
如果把Tomcat端口号修改成80，那么访问服务器就可以无需再给出端口号。
tomcat目录结构
- bin：二进制可执行文件，例如startup.bat和shutdown.bat
- conf：配置文件，例如：server.xml. context.xml. web.xml. tomcatusers.xml
- lib：tomcat所需jar包
- logs：日志文件
- temp：存放tomcat运行时产生的临时文件，当tomcat关闭后，这个目录中的文件可以删除
- webapps：这个目录下的每个文件夹对应一个JavaWeb应用程序
- work：webapps下的应用程序在运行时会自动生成文件，就在work目录下。work目录删除了也没问题，但再次运行应用程序还要再生成work目录和文件。
创建JavaWeb目录：hello
- 在webapps目录下创建一个hello目录，hello目录就是项目目录了；
- 在hello目录下创建WEB-INF
- 在WEB-INF下创建web.xml
- 在WEB-INF下创建classes目录
- 在WEB-INF下创建lib目录
在hello目录下创建index.html
在web.xml文件中添加如下内容：
===================================
===================================
HTTP协议
安装HttpWatch
http协议
- 即超文本传输协议。它规定了浏览器与服务器之间的通讯规则。
- http是基于请求/响应模式的，所以分为请求协议和响应协议
===================================
请求
请求内容就是客户端发送给服务器的数据！
请求格式：
- 请求首行
- 请求头
- 空行
- 请求体（或称之为请求正文）
请求方法
- 常见请求方法有GET和POST
- 在浏览器地址栏中发送请求，以及点击超链接都是GET请求
- 提交表单可以发送GET请求，以及POST请求
- GET请求没有请求体，但空行是存在的
- POST请求是存在请求体的
使用HttpWatch获取请求信息
- 请求行：请求方法 请求路径 请求协议及版本，例如：GET /hello/index.jsp HTTP/1.1
- 请求头：请求头就是一些键值，格式为：头:值，例如：Host:localhost
- 空行：就是一个空行，用来与请求体分隔
- 请求体：GET方法没有请求体，POST才有请求体，请求体内容为：参数名=参数值&参数名=参数值，其中参数值为中文，会使用URL编码。
常见请求头
- Host：请求的服务器主机名
- User-Agent：客户端浏览器与操作系统相关信息
- Accept-Encoding：客户端支持的数据压缩格式
- Connection：客户端支持的连接方式
- Cookie：客户端发送给服务器的“小甜点”，它服务器寄存在客户端的。如果当前访问的服务器没有在客户端寄存东西，那么就不会存在它！
- Content-Length：请求体的长度
- Referer：当前发出请求的地址，例如在浏览器地址栏直接访问服务器，那么没有这个请求头。如果是在www.baidu.com页面上点击链接访问的服务器，那么这个头的值就是www.baidu.com
作用1：统计来源
作用2：防盗链- Content-Type：如果是POST请求，会有这个头，默认值为application/x-www-form-urlencoded，表示请求体内容使用url编码。
===================================
响应
响应就是服务器发送给客户端的数据！
响应格式：
- 响应首行
- 响应头
- 空行
- 响应体（或称之为响应正文）
状态码
响应首行的结构：协议及版本 状态码 状态码说明，例如：HTTP/1.1 200 OK- 200：请求成功
- 302：请求重定向
- 304：请求资源没有改变
- 404：请求资源不存在，属性客户端错误
- 500：服务器内部错误
响应头
- Content-Type：响应正文的MIME类型，例如image/jpeg表示响应正文为jpg图片，例如text/html;charset=utf-8表示响应正文为html，并且编码为utf-8编码。浏览器会通过这一信息来显示响应数据
- Content-Length：响应正文的长度
- Set-Cookie：服务器寄存在客户端的“小甜点”，当客户端再次访问服务器时会把这个“小甜点”还给服务器
Date：响应时间，可能会有8小时的误差，因为中国的时区问题
通知客户端浏览器不要缓存页面的响应头：
- Expires:-1
- Cache-Control: no-cache
Pragma: no-cache
自动刷新响应头，浏览器会在3秒钟后自动重定向到传智主页
- Refresh: 3;url=http://www.itcast.cn
状态码304
相关头信息- Last-Modified：响应头，表示当前资源的最后修改时间；
If-Modified-Since：请求头，表示缓存的资源最后修改时间；
状态码304：表示访问的资源没有改变
- 客户端首次访问服务器的静态资源index.html，服务器会把index.html响应给客户端，而且还会添加一个名为Last-Modified的响应头，它说明了当前index.html的最后修改时间
- 客户端收到响应后，会把index.html缓存在客户端上，而且还会把Last-Modified缓存起来。
- 客户端第二次请求index.html时，会添加名为If-Modified-Since的请求头，它的值是上次服务器响应头Last-Modified，服务器获取到客户端保存的最后修改时间，以及当前资源的最后修改时间进行比较，如果相同，说明index.html没有改动过，那么服务器不会发送index.html，而是响应状态码304，即通知客户端资源没有改变，你可以使用自己的缓存。
Servlet
什么是Servlet
- Servlet是JavaWeb三大组件之一（Servlet. Filter. Listener）
- Servlet是用来处理客户端请求的动态资源
- Servlet的任务有：
获取请求数据
处理请求
完成响应- Servlet接口方法：
void init(ServletConfig)
void service(ServletRequest,ServletResponse)
void destory()
ServletConfig getServletConfig()
String getServletInfo() 实现Servlet的方式
- 实现Servlet接口（不方便）
- 继承GenericServlet类（不方便）
- 继承HttpServlet类（方便）
Servlet第一例
- 写一个类cn.itcast.MyServlet，实现Servlet接口
- 实现service()方法，在其中给出System.out.println(“hello servlet!”);
- 在web.xml文件中指定Servlet的访问路径为：/myservlet
xxx
cn.itcast.MyServlet
xxx
/myservlet
当用户在地址栏中访问：http://localhost:8080/day04_1/myservlet时，会执行System.out.println(“hello servlet!”);
===============================
Servlet生命周期
Servlet接口一共5个方法，但其中只有三个是生命周期方法：
- void init(ServletConfig)
- void service(ServletRequest,ServletResponse)
- void destory()
1). 服务器创建Servlet：
- 当Servlet第一次被请求时，或服务器启动时，服务器会创建Servlet实例。
- 服务器默认是在servlet第一次被请求时创建Servlet实例，如果希望服务器启动时就创建Servlet实现需要在web.xml中配置
- 服务器只为一个类型的Servlet创建一个实例对象，所以Servlet是单例的；
2). 服务器初始化Servlet：
- 当服务器创建Servlet实例后会马上调用Servlet的init(ServletConfig)方法，完成对Servlet的初始化；
- init(ServletConfig)只会被调用一次
- 服务器会在调用init()方法时传递ServletConfig参数
3). 服务器使用Servlet处理请求：
- 当Servlet被请求时，服务器会调用Servlet的service(ServletRequest,ServletResponse)方法
- service(ServletRequest,ServletResponse)方法每处理一次请求，就会被调用一次，所以它可能会被调用N次
- 因为Servlet是单例的，所以可能在同一时刻一个Servlet对象会被多个请求同时访问，所以这可能出现线程案例问题
- Servlet不是线程案例的，这有助与提高效率，但不能让Servlet具有状态，以免多个线程争抢数据
4). 服务器销毁Servlet
- 服务器通常不会销毁Servlet，通常只有在服务器关闭时才会销毁Servlet
- 服务器会在销毁Servlet之前调用Servlet的destory()方法
- 可以在destory()方法中给出释放Servlet占有的资源，但通常Servlet是没什么可要释放的，所以该方法一般都是空的
===============================
ServletConfig
ServletConfig是Servlet中的init()方法的参数类型，服务器会在调用init()方法时传递ServletConfig对象给init()方法。
ServletConfig对象封装了Servlet在web.xml中的配置信息，它对应元素。ServletConfig类的功能有：
- String getServletName()：获取Servlet配置名，即的值；
- ServletContext getServletContext()：获取ServletContext对象，这个对象稍后介绍
- String getInitParameter(String name)：获取初始化参数
- Enumeration getInitParameterNames()：获取所有初始化参数的名称
在web.xml文件中，配置时可以为配置0~N个初始化参数，例如：
xxx
cn.itcast.servlet.MyServlet
p1
v1
p2
v2
===============================
GenericServlet
GenericServlet是Servlet接口的实现类，但它是一个抽象类，它唯一的抽象方法就是service()方法
GenericServlet实现了Servlet方法：
- 实现了String getServletInfo()方法
- 实现了void destory()方法，空实现
- 实现了void init(ServletConfig)方法，用来保存ServletConfig参数
- 实现了ServletConfig getServletConfig()方法
GenericServlet实现了ServletConfig接口：
- 实现了ServletContext getServletContext()方法
- 实现了String getInitParameter()方法
- 实现了String getServletName()方法
- 实现了Enumeration getInitParameterNames()方法
GenericServlet添加了init()方法：
- 该方法会被init(ServletConfig)方法调用
- 如果希望对Servlet进行初始化，那么应该覆盖init()方法，而不是init(ServletConfig)方法
===============================
HttpServlet
HttpServlet是GenericServlet的子类，它专注HTTP请求
HttpServlet类的方法：
- 实现了void service(ServletRequest,ServletResponse)方法，实现内容是：
把ServletRequest强转成HttpServletRequest
把ServletResponse强转成HttpServletResponse
调用本类添加的void service(HttpServletRequest,HttpServletResponse)方法
- 添加了void service(HttpServletRequest,HttpServletResponse)方法，内容是：
调用request的getMethod()获取请求方式
如果请求方式为GET，那么调用本类添加的doGet(HttpServletRequest,HttpServletResponse)方法
如果请求方式为POST，那么调用本类添加的doPost(HttpServletRequest,HttpServletResponse)方法
- 添加了doGet(HttpServletRequest,HttpServletResponse)方法，内容是响应405，表示错误，所以我们应该去覆盖这个方法
- 添加了doPost(HttpServletRequest,HttpServletResponse)方法，内容是响应405，表示错误，所以我们应用去覆盖这个方法
如果是通过继承HttpServlet类来自定义Sevlet的话，那么：
- 不要去覆盖void service(ServletRequest,ServletResponse)
- 不要去覆盖void service(HttpServletRequest, HttpServletResponse)
- 而应该去覆盖doGet()或doPost()方法。
===============================
是的子元素，用来绑定Servlet的访问路径
可以在一个中给出多个，也就是说一个Servlet可以有多个访问路径：
xxx
/helo1
/hello2
还可以在中使用通配符，即“-”。
- /-：表示匹配任何路径
- /do/-：表示匹配以/do开头的任何路径
- -.do：表示匹配任何以“.do”结尾的路径
注意：
- 通配符要么在开头，要么在结尾，不能在中间，例如：/-.do就是错误的使用。
- 如果不使用通配符，那么必须以“/”开头，例如：abc就是错误的
===============================
===============================
ServletContext
ServletContext是Servlet三大域对象之一
ServletContext在服务器启动时创建，在服务器关闭时销毁，一个JavaWeb应用只创建一个ServletContext对象
它的功能分类：
- 存取数据
- 读取web.xml中的应用初始化参数
- 读取应用资源
获取ServletContext对象
在HttpServlet中可以通过以下方法来获取ServletContext对象- ServletContext sc = this.getServletContext()
- ServletContext sc = this.getServletConfig().getServletContext()
存取数据
因为在一个JavaWeb应用中，只有一个ServletContext对象，所以在ServletContext中保存的数据可以共整个JavaWeb应用中的动态资源共享
ServletContext是Servlet三大域对象之一，域对象内部有一个Map，用来保存数据- void setAttribute(String name, Object value)：用来添加或替换ServletContext域数据
servletContext.setAttribute(“xxx”, “XXX”)，添加域数据
servletContext.setAttribute(“xxx”, “XXXX”)，覆盖域数据，因为在域中已经存在了名为xxx的数据，所以这次就是覆盖了- void setAttribute(String name, Object value)：用来添加或替换ServletContext域数据
- Object getAttribute(String name)：通过名称来获取域数据
- void removeAttribute(String name)：通过名称移除域数据
- Enumeration getAttributeNames()：获取所有ServletContext域数据的名称
读取web.xml中配置的应用初始化参数
p1
v1
p2
v2
- servletContext.getInitParameter(“p1”)，返回v1
- servletContext.getInitParameter(“p2”)，返回v2
- servletContext.getInitParameterNames()，返回Enumeration，包含p1和p2
获取项目资源
String getRealPath(String path)：获取资源的真实名称
String path = servletContext.getRealPath(“/WEB-INF/a.jpg”);
返回值为/WEB-INF/a.jpg真实路径，即磁盘路径：C:/tomcat6/wabapps/hello/WEB-INF/a.jpgInputStream getResourceAsStream(String path)：获取资源的输入流
InputStream in = servletContext.getResourceAsStream(“/WEB-INF/a.jpg”);
返回的是a.jpg的输入流对象，可以从流中得到a.jpg的数据Set getResourcePaths(String path)：获取指定目录下的所有资源路径
Set paths = servletContext.getResourcePaths(“/WEB-INF”);
返回的Set中包含如下字符串：/WEB-INF/lib/
/WEB-INF/classes/
/WEB-INF/web.xml
/WEB-INF/a.jpg
===============================
===============================
获取类路径资源
可以通过Class类的对象来获取类路径下的资源，对应JavaWeb应用的类路径就是classes目录下的资源
例如：
InputStream in = cn.itcast.servlet.MyServlet.class.getResourceAsStream(“a.jpg”);
获取的是：/WEB-INF/classes/cn/itcast/servlet/a.jpg，即与MyServlet.class同目录下的资源
例如：
InputStream in = cn.itcast.servlet.MyServlet.class.getResourceAsStream(“/a.jpg”);
获取的是：/WEB-INF/classes/a.jpg，即类路径的根目录下的资源，类路径的根目录就是/classes目录