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的注释 :
标题标签. 水平线标签和特殊字符
标题标签
- …….
- 从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目录