前端三剑客: html,css,js(javascript)
html: Hyper Text Markup Language:超文本标记语言
针对字体,图片,视频,音频等等进行操作,设置字体颜色,大小,设置图片的宽度和高度
h5的一些标签对视频或者音频操作!
通过html标签 写半成品的网页 ----- 类似于房屋的主体结构
通过css(层叠样式表):能针对html标签进行修饰 ----类似于房屋的装修
通过js(javascript):实现效果(轮播图,js事件编程)----类似房屋中的功能
html页面----- 通过js完成和后台通信(Jquery框架: 封装js库)
1.基本标签
1.1标题标签 h1-h6
<h1>JavaEE</h1>
<h2>JavaEE</h2>
<h3>JavaEE</h3>
<h4>JavaEE</h4>
<h5>JavaEE</h5>
<h6>JavaEE</h6>
1.2滚动标签marquee
<!-- 滚动标签marquee
不指定滚动方向,默认从右到左滚动
属性:
behavior:滚动方式
slide:滚动到一边停止
alternate:来回滚动
scroll:(交替滚动 碰到边框不会停止)
direction:滚动的方向:默认值 left(右到左)
scrollamount:滚动的速度: 正整数值(越大,速度快)
bgcolor:背景色
-->
<marquee behavior="scroll"direction
="right" scrollamount="22" bgcolor="pink">hello,html</marquee>
1.3段落标签p 闭合标签
<p>
高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人
<p>
1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注 [2] 。2005年，因在剧情片《青红》中饰演女主人公青红入围戛纳电影节最佳女主角
</p>
1.4换行标签 非闭合标签 br
hello,高圆圆 <br />
hello,马三奇<br />
1.5水平标签 非闭合标签 hr
1.6上下标标签sup和sub
数学公式:x^2 <br />
x<sup>2</sup> <br />
化学公式: H<sub>2</sub>O
1.7html转义字符
<!-- html转义字符
版权所有 : © 代表 © 版权所有
注册商品 : ® 代表 ®
空格 : 一个 代表一个空格
  一个转义字符 代表两个空格
-->
xxx公司版权所有2021-2022<sup>©</sup> <br/>
xx公司注册商品<sup>®</sup><br/>
中  国<br />
1.8加粗标签 strong / b
<!-- 加粗标签 strong / b
语义强调的加粗使用b标签,一般通用strong
-->
<strong>阿富汗</strong>
<b>奥拉夫</b><br />
1.9倾斜标签 em/ i
<em>毛泽东</em>
<i>毛泽东</i>
<!-- 居中标签center 将文本内容进行居中-->
1.10居中标签center
<center>HTML</center>
1.11原样输出标签 pre
<pre>
举头望明月,低头思故乡.
funciton hello(){
alert("hello") ;
}
</pre>
1.12列表标签
<!-- 列表标签
无序列表ul li (列表项)
有序列表ol li
-->
<br/>
以下的明星喜欢谁?
<!-- 无序列表
ul:
type属性 :指定列表项前面的标记disc
-->
<ul type="square">
<li>高圆圆</li>
<li>姆巴佩</li>
<li>赵又廷</li>
</ul>
<hr/>
以下的明星喜欢谁?
<ol>
<li>高圆圆</li>
<li>姆巴佩</li>
<li>赵又廷</li>
</ol>
2.form表单(重点)
html表单标签的action和method分别的含义:
action:提交的后台地址(url:统一资源定位符)
method:提交方式
常用的:get/post
get:默认的方式(直接在地址栏访问都是属于get)
1)将用户的数据提交到地址栏上
http://ip地址:端口号/访问路径?key1=value1&key2=value2.....
2)相对Post来说,不安全,不适合提交隐私数据
3)因为在地址上,所以提交数据大小有限制!
post:1)不会将数据提交到地址栏上
通过浏览器---> netWork查看
requestHeader:请求头
实体内容:FORM DATA key1=value1&key2=value2.....
2)相对get方式,安全
3)提交的数据大小无限制
3.frameset框架标签
rosw和cols属性的含义
frame标签: 一个frame包含一个html页面
src属性:包含指定的某一个html页面
当整个结构的组成由两个或者两个以上的html组成,使用frameset框架集标签
rows:从上往下看(竖向划分),每一个部分所占当前整个部分的权重百分比
cols:从左到右看(横向划分),每一个部分所占当前整个部分的权重百分比
4.CSS样式
CSS:Cascading Style Sheet层叠样式表
4.1使用方式
1)行内样式:不推荐
弊端:一次只能控制某一个标签,加入样式
任何html标签中都有style属性
style="样式属性名称1:属性值1;样式属性名称2:属性值2;..."
2)内联样式(内部样式)
使用选择器
标签名称选择器
在head标签体中:style标签
选择器{
样式属性名称1:属性值1;
样式属性清楚2:属性值2;
....
}
弊端:style中样式代码和html标签在同一个页面使用,不利于后期管理!(优于第一种)
3)使用外联样式(外部样式)
单独在当前项目下css文件夹
书写关联当前html标签的css样式文件
在当前html页面要 使用css外部文件,需要导入
<link href="css文件" rel="stylesheet" />
rel="stylesheet" 关联层叠样式表 固定写法
4.2css选择器
标签选择器: 通过标签名进行访问body{}、form{}...
class选择器: 就是当前html标签上面给定义class属性,给定一个属性值
在样式标签中,打点访问:.class属性值{
样式属性名称1:value1;
样式属性名称2:value2;
}
特点:同一个html页面上,多个标签可以指定相同的class属性值
id选择器: 在标签中指定id属性以及属性值
在style标签中
#id属性值{
样式属性名称1:value1;
样式属性名称2:value2;
...
}
特点:在同一个html页面,标签中id属性值必须唯一,否则后面通过javascript的id属性值获取标签对象可能获取不到!
优先级:id选择器 > class选择器 > 标签（element）选择器
子元素选择器
选择器1 选择器2{ 空格只作用于子选择器 ','连接表示并集,选择器1和2都作用
属性样式:属性值;
}
注意:选择器2选中的元素是选择器1选中的元素的子元素
4.3伪类选择器
伪类选择器的几种状态:
link:未访问过当前标签的状态
hover:鼠标悬停在标签的状态
active:鼠标正在访问(激活状态) 点击标签,但是没有松开的状态
visited:已经访问过的状态(点击了,并且已经松开)
语法:
选择器:状态名称(不区分大小写){
样式属性:属性值;
}
循环状态效果：必须遵循下面的先后顺序
在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。
在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。
所以一般是link,visited,hover,active.
4.4背景样式
背景样式的四种情况
background-color:背景颜色
background-image:背景图片
图片不是当前系统默认分辨率大小,图片就会自动x轴,y轴重复
background-repeat:设置背景图片是否重复以及如何重复
background-repeat:默认值 repeat(x轴/y轴重复)
no-repeat;不重复
repeat-x:x轴重复
repeat-y:y轴重复
background-position:设置背景图片的起始位置
background-position:默认值就是 left top
content center
right bottom
简写:(要按顺序赋值)
background:background-color、ckground-image、ackground-repeat、ackground-position
4.5边框样式
上右下左(顺时针四个边)简写也是按照这个顺序进行
边框颜色,边框宽度,边框样式的简写属性border-color/border-width/border-style
设置边框颜色 border-方向-color
border-left-color:#00F ;
border-right-color:#F00 ;
border-top-color:#0F0 ;
border-bottom-color:darkgray
设置边框看度border-方向-width
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px
光有颜色和宽度不行,必须指定四个边框的样式属性:border-方向-style
solid:单实线
double:双实现
dotted:点
dashed:虚线
4.6浮动属性
浮动属性float属性一旦某个元素进行浮动,那么就会脱落当前文档流(当前body中的先后顺序),直到它的外边缘碰到某一个框或者是浏览器边框停止掉.
left(使用居多)
right(其次)
设置不浮动
css样式属性clear :清除浮动!
both:两边都不浮动 (推荐)
left:左不浮动
right:右不浮动
在布局当中,使用浮动时,当一个部分结束时,在下一个div进行浮动前加一个空的div
<style>
/*分别给三个div设置边框 */
#div1{
border:1px solid #000;
background-color: #0F0;
width: 150px;
height: 150px;
/* 右浮动 */
/* float: right; */
/*左浮动*/
float: left;
}
#div2{
border:1px solid #000;
background-color: #00F;
width: 150px;
height: 150px;
float: left;
}
#div3{
border:1px solid #000;
background-color: #F00;
width: 150px;
height: 150px;
/* float: left; */
}
#clear{
clear: both;
}
</style>
<div id="div1">div1</div>
<div id="div2">div2</div>
<!-- 没有文本的div
设置空的div
-->
<div id="clear"></div>
<!--
如果不需要浮动
-->
<div id="div3">div3</div>
4.7文本样式
文本对齐方式text-align:center
text-decoration 属性用于设置或删除文本装饰
underline:下划线
overline:上划线
line-through:中划线
none:去掉装饰
字符间隙 letter-spacing:像素值
word-spacing 针对中文:单词间距系统认为:两个字组成一个单词
4.8字体样式
font-family:字体类型:一定是字体库存在的类型
font-style:字体样式
normal - 文字正常显示 默认值
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-size:字体大小20px;
font-weight:字体粗细程度(100-900) bold bolder;
4.9盒子模式
内边距:简写属性(顺时针):padding:padding-top padding-right padding-bottom padding-left
外边距:margin:同样,上右下左
4.10css定位属性
定位属性:position left:向右移动 top:向下移动
三种定位方式:
1.绝对定位 absolute 针对他的父元素进行移动:body父元素进行移动
2.相对定位 relative 针对当前元素以前的位置进行移动
3.固定定位 fixed(使用居多) 垃圾小广告,一直在跟随页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS定位属性</title>
<style>
.di1{
border:1px solid #000 ;
background-color: cornflowerblue;
width: 150px;
height: 150px;
}
.di2{
border:1px solid #000 ;
background-color: seagreen;
width: 150px;
height: 150px;
}
.di3{
border:1px solid #000 ;
background-color: bisque;
width: 150px;
height: 150px;
/* 定位属性 */
/* 绝对定位position: absolute; */
/* 相对定位*/
/* position: relative; */
/* 向右移动30*/
/* left: 30px;
top:50px */
}
/* 设置class="adv"的样式 */
.adv{
border: 2px solid #000;
background-color: plum;
width: 150px;
height: 150px;
/* 固定定位 */
position: fixed;
left: 550px;
top:200px;
}
</style>
</head>
<body>
<div class="di1">div1</div>
<div class="di2">div2</div>
<div class="di3">div3</div>
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容
网站内容网站内容网站内容网站内容网站内容网站内容网站内容
网站内容网站内容网站内容网站内容网站内容网站内容<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<div class="adv">
<a href="#" style="text-decoration: none;">立刻咨询</a>
</div>
</body>
</html>
5.javascript
5.1变量定义
1)在js中，定义变量是var定义,var可以省略不写(前期学习阶段不建议省略).js是一个弱类型语言(语法以及语句不严谨),可以重复定义变量,后面的值将前面的值覆盖.
2)var可以定义任何数据类型, 如何查看数据类型 typeof(变量名),js中数据类型:通过值判定的
3)基本数据类型划分:
无论整数还是小数,都是number类型 -----提升为js的内置对象Number(引用类型)
无论是字符串还是字符,都是string类型----提升为js的内置对象String(引用类型)
boolean类型----提升为js内置对象Boolean(引用类型)
undefined:未定义类型,没有给变量赋值(毫无意义)
object---自动提升js内置对象 (引用类型:代表任意Javascript内置对象的模板)
其实和python的定义差不多!
5.2算数运算符
算术运算符
比较
逻辑
三元...
和java的运算规则一样
5.3流程语句
顺序
选择
js中弱类型语言:boolean的值:true,成立;false不成立;
表达式中如果是非0的number类型,条件成立,否则不成立;
表达式中如果是string类型,非空字符串,条件成立,否则不成立;
表达式如果是object类型,非null对象,条件成立,否则不成立;
实际开发中,if语句中表达式(通过一些逻辑运算符 || &&)
if(new Object()){
alert("条件成立") ;
}else{
alert("条件不成立") ;
}
switch:弱类型语言的switch中的case后面 既可以是变量,也可以是常量
var week = 4 ;
var b = 4 ;
switch(week){
case 1:
alert("星期一")
break ;
case 2:
alert("星期二")
break ;
case 3:
alert("星期三")
break ;
case b:
alert("星期四")
break
case 5:
alert("星期五")
break ;
default:
alert("非法数据")
break
}
循环
for循环
while循环
do-while循环
不同于java的循环 for-in语句:遍历数组或者自定义对象的数据
for(var 变量名 in 数组对象/自定义对象){ //类似于Java中增强for循环
使用变量名
如果是数组 数组对象[变量名]
}
var arr = [10,20,30,40,50] ;
//普通for循环
for(var i = 0 ; i < arr.length ; i++){
document.write(arr[i]+" ")
}
for(var x in arr){
document.write(arr[x]+" ");
}
5.4函数的定义和调用
js中函数定义
注意事项:
1)形式参数列表:只需要书写参数名称即可,不需要带var
2)js中定义函数的时候,可以书写return,也可以不书写
3)js是弱类型语言,没有函数重载的概念,函数名称相同,后面的函数将前面函数就覆盖了
如果形式参数个数大于实际参数列表,函数会被调用,只不过值NaN
有某个形参没赋值:导致结果是NaN
如果形式参数个数小于实际参数列表,函数会被调用,会将多余的实际参数去掉然后将前面 的实际参数分别绑定给形式参数,进行计算...
4)js中函数中默认存在一个数组对象:arguments
作用:就是将实际参数赋值给形式参数
function 函数名称(形式参数列表){
1)可以写return语句
2)直接输出
}
调用
1) var 结果 = 函数名称(实际参数列表) ;
输出结果
2)单独调用 函数名称(实际参数列表) ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中函数的定义以及调用</title>
<script>
//定义求两个数据之后的函数
//function add(var a, var b ){ //不需要数据类型
function add(a,b){
//return语句
//return a + b ;
var result = a+ b ;
document.write("两个数据之和是:"+result) ;
}
function add(a,b,c){//a=20,b=30,c=10
//默认存在arguments数组对象
for(var i = 0 ; i<arguments.length ; i++){
alert(arguments[i]) ;
}
var result = a+ b+ c ;
document.write("三个数据之和是:"+result) ;
}
//调用
//var result = add(10,20) ;
//document.write("reuslt:"+result) ;
//方式2调用
//单独调用
add(20,30,10) ;
</script>
</head>
<body>
</body>
</html>
5.5函数以及流程语句的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
</head>
<!--
通过文本输入框输入月份的值,点击按钮进行查询,获取是夏季,秋季,春季,冬季
键入的值
3,4,5 春季
6,7,8 夏季
9,10,11 秋季
1,2,12,冬季
-->
<body>
<!-- js时事件编程的三要素
1)事件源
html标签
2)编写事件监听器
编写一个js函数
3)绑定事件监听器
利用html一些事件属性和js函数进行关
on事件="js函数()"
dom操作:浏览器加载html页面 ---内置js引擎将标签都封装对象,然后形成"树结构"
想办法获取某个标签对象,然后改变属性
-->
<!-- 事件源 -->
<input type="text" id="month" /><input type="button" value="点击查询" onclick="checkButton()" />
</body>
<script>
/* 编写一个js函数 */
function checkButton(){
//alert("触发点击事件...") ;
//业务:需要通过文本输入框的id属性值"month"获取所在的标签对象
//oElement = document.getElementById(sIDValue) :通过id属性值获取标签对象
/* var textInput = document.getElementById("month") ; //原生js对象
//alert(textInput);
//获取标签属性
var content = textInput.value ;
alert(content) ; */
//一步走
var content = document.getElementById("month").value ; //content---->String
//alert(content) ;
//document.write("content的数据类型:"+typeof(content)) ;
//if..else if...else...
//if中的string和number比较,string---自动转换number然后在和number比较
/* if(content<0 || content>12){
alert("非法数据") ;
} else if(content>=3 && content<=5){
alert("春季") ;
}else if(content>=6 && content<=8){
alert("夏季") ;
}else if(content>=9 && content<=11){
alert("秋季") ;
}else{
alert("冬季") ;
} */
//switch语句 :content:表单输入的内容string 不能自动转换number
//alert(typeof(content)) ;
content = parseInt(content) ; //类型转换函数:将string--->number
//alert(typeof(content)) ;
switch(content){
case 3:
case 4:
case 5:
alert("春季") ;
break ;
case 6:
case 7:
case 8:
alert("夏季") ;
break ;
case 9:
case 10:
case 11:
alert("秋季") ;
break ;
case 12:
case 1:
case 2:
alert("冬季") ;
break ;
default:
alert("非法数据");
break ;
}
}
</script>
</html>
5.6内置对象String
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置String</title>
<!--
基本类型:无论字符还是字符串 string---- String内置对象
-->
<script>
//语法格式
// var newString = new String(["stringLiteral"])
var s1 = new String("hello") ;
var s2 = new String("hello") ;
/*
==:比较的是地址值是否相同
*/
document.write((s1==s2)+"<br/>");
/*
js内置String对象:valueOf()获取指定对象的原始值。(字符串本身的内容值)
比较两个字符串的内容是否一致
*/
document.write((s1.valueOf()==s2.valueOf())+"<br/>") ;
document.write("<br/>") ;
//简化格式: js中创建String对象
var str1 = "world" ;
var str2 = "world" ;
document.write((str1==str2)+"<br/>");
document.write("<hr/>") ;
var str = "hellojavascript" ;
//获取指定索引处的字符:charAt(var index)
document.write("charAt():"+str.charAt(5)+"<br/>") ;
//concat(var str):拼接功能
document.write("concat():"+str.concat("javaee")+"<br/>") ;
//indexOf(var childStr):查找指定子字符串第一次出现索引值
document.write("indexOf():"+str.indexOf("oja")+"<br/>") ;
//lastIndexOf(var childStr):子字符串最后一次出现的索引值
//fontcolor(颜色单词/或者RGB的写法#字符值)
document.write("fontcolor():"+str.fontcolor("#ffaa00")+"<br/>") ;
//截取substring(start,end):[start,end-1]
document.write("substring():"+str.substring(5,9)+"<br/>") ;
//substr(start [, length ]):参数1:起始索引,参数2:指定截取长度
document.write("substr():"+str.substr(5,4)+"<br/>") ;
document.write("<hr/>") ;
//分割功能(拆分)spilt("分隔符号")
var strs = "JavaEE-Python-Php-Hadoop-R-Go" ;
var strArray = strs.split("-") ;//字符串数组
for(var i = 0 ; i < strArray.length; i++){
document.write(strArray[i]+" ") ;
}
</script>
</head>
<body>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8priUl4D-1630145513091)(C:\Users\李朋刚\AppData\Roaming\Typora\typora-user-images\image-20210824192431160.png)]
5.6内置对象Date
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置对象Date</title>
<script>
//js创建Date对象
// var dateObj = new Date()
var date = new Date() ;
//document.write(date) ; //当前系统时间
//获取年
//getYear():获取当前系统时间年份和1900之间的差值
//getFullYear()
//document.write(date.getYear()+"年") ;
document.write(date.getFullYear()+"年") ;
//获取月
//getMonth():0-11之间的整数
document.write(date.getMonth()+1+"月") ;
//获取月中的日期getDate()
document.write(date.getDate()+"日  ") ;
//获取时getHours
document.write(date.getHours()+":") ;
//获取分钟getMinutes()
document.write(date.getMinutes()+":") ;
//获取秒getSeconds()
document.write(date.getSeconds()) ;
</script>
</head>
<body>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tiIpQEh3-1630145513094)(C:\Users\李朋刚\AppData\Roaming\Typora\typora-user-images\image-20210824192609096.png)]
5.7网页时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页时钟</title>
</head>
<body>
<font>当前系统时间是:</font><span id="spanTip"></span>
<!-- 事件源 -->
<input type="button" value="清除定时器" onclick="clearTask()" />
</body>
<script>
function genDate(){
//1)创建当前Date对象:拼接当前系统时间
var date = new Date() ;
//2)拼接日期字符串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"  "+
date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
//alert(dateStr)
//通过id属性值获取span标签对象
var spanObject = document.getElementById("spanTip") ;
//设置span标签对象的innerHTML属性: 添加文本内容(可以加入html标签 渲染)
//innerText属性:只是添加普通文本: 如果添加标签体,不会将标签进行转义
spanObject.innerHTML = "<h4>"+dateStr +"</h4>";
}
//window对象(可以省略不写)中有网页定时器
//window.setInterval(vCode, iMilliSeconds ): 每经过iMilliSeconds毫秒值重复执行vCode
//参数1:任务函数
//参数2:毫秒数
var taskId = setInterval("genDate()",1000) ;//每经过1000毫秒执行这个任务
//window.setTimeout(vCode, iMilliSeconds):经过iMilliSeconds毫秒值后执行一次vCode
//参数1:任务函数
//参数2:毫秒数
//清除定时器
//window.clearInterval(iIntervalID) :参数任务id
function clearTask(){
//alert("触发点击...");
window.clearInterval(taskId) ;
}
</script>
</html>
5.8常用事件的分类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js常用事件分类</title>
<style>
#div1{
border: 1 solid #000;
background-color: olivedrab;
width: 100px;
height: 100px;
}
</style>
<!--
点击相关的事件
单击:click
双击:dbclick
和焦点相关的事件
获取焦点:focus
失去焦点:blur
和选项卡发生变化事件相关的change(下列菜单 选择子选项...)
和鼠标相关的:鼠标经过mouseover,鼠标移出mouseout...
页面载入事件load
键盘按下:keyup ----参考文档...
-->
</head>
<!-- 将整个body内容加载完毕之后,触发一个函数 -->
<body onload="testLoad()">
<input type="button" value="单击" onclick="testClick()" /><br/>
<input type="button" value="双击" ondblclick="testDbClick()" /><br/>
用户名:<input type="text" id="username" value="请输入用户名" onblur="testBlur()" onfocus="testFocus()" /><span id="usernameSpan"></span><br/>
籍贯:
<select id="province" onchange="testChange()">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="江西省">江西省</option>
<option value="广东省">广东省</option>
</select>
<select id="city">
<!-- <option value="西安市">西安市</option> -->
</select>
<br />
<div id="div1" onmouseover="testMouseOver()" onmouseout="testMouseOut()">
div
</div>
</body>
<script>
/* 编写事件监听器 */
function testClick(){
alert("触发了单击点击事件...") ;
}
function testDbClick(){
alert("双击点击事件触发了...") ;
}
//获取焦点
function testFocus(){
//alert("触发获取焦点事件...");
//需要通过id="username"获取input标签对象
var inputObj = document.getElementById("username") ;
inputObj.value = "" ; //清空掉
}
//失去焦点函数
function testBlur(){
需要通过id="username"获取input标签对象并且同时获取文本框的内容
var username = document.getElementById("username").value ;
//alert(username) ;
//id="usernameSpan"所在的标签对象
var spanObj = document.getElementById("usernameSpan") ;
if(username !="马三奇"){
//设置span标签对象的innerHTML内容
spanObj.innerHTML="对不起,用户名不可用".fontcolor("red") ;
}else{
spanObj.innerHTML="√".fontcolor("green") ;
}
}
//选项卡发生变化的事件函数
function testChange(){
//alert("change事件触发了...") ;
//获取当前的省份内容:
//id="province"获取的标签对象同时内容
var jiguan = document.getElementById("province").value;
//alert(jiguan) ;
//获取id="city"所在的标签对象
var city = document.getElementById("city") ;
//每次选项卡变化,将之前的innerHTML清空掉
city.innerHTML = "" ;
//选择某个省份之后,出现城市 :省市联动
//判断如果jiguan如果是陕西省
if(jiguan=="陕西省"){
//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式
var arr = ["西安市","宝鸡市","咸阳市","渭南市","神木市"] ;
//遍历
for(var i = 0 ; i <arr.length; i ++){
//获取到每一个元素
//设置城市所在的select标签对象的innerHTML属性
city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="山西省"){
//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式
var arr = ["太原市","运城市","晋中市","吕梁市","大同市"] ;
//遍历
for(var i = 0 ; i <arr.length; i ++){
//获取到每一个元素
//设置城市所在的select标签对象的innerHTML属性
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="江西省"){
//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式
var arr = ["赣州市","南昌市","上饶市","滨海市","宜春市"] ;
//遍历
for(var i = 0 ; i <arr.length; i ++){
//获取到每一个元素
//设置城市所在的select标签对象的innerHTML属性
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="广东省"){
//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式
var arr = ["深圳市","广州市","东莞市","惠州市","中山市"] ;
//遍历
for(var i = 0 ; i <arr.length; i ++){
//获取到每一个元素
//设置城市所在的select标签对象的innerHTML属性
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
//鼠标经过事件的函数
function testMouseOver(){
//alert("触发鼠标经过事件...") ;
window.open("03_js中的运算符.html") ;
}
function testMouseOut(){
alert("鼠标移出事件触发...") ;
}
//页面载入事件load 一般用在body里面
/* function testLoad(){
//alert("body加载完比了") ;
} */
/* 绑定onLoad事件 */
window.onload = function(){
alert("页面载入事件触发了") ;
}
</script>
</html>
5.9js的自定义对象
自定义对象格式 var 对象名 = new 对象(实际参数列表)
四种格式
<!--方式1:类似于java中的有参构造-->
<script>
//方式1:类似于Java中有参构造函数
//定义一个Person对象
function Person(name,age){//姓名和年龄属性
//赋值
//追加属性
this.name = name ; //zhangsan
this.age = age ; //20
//追加方法
this.speakEnglish=function(){
alert("会说英语") ;
}
}
//创建一个对象
var p = new Person("高圆圆",41) ;
//for-in
for(var i in p){//遍历属性
document.write(p[i]+" ") ;
}
</script>
<!--方式2:类似于java中的无参构造-->
<script>
//方式2:类似Java中的无参构造函数
//定义一个对象
function Person(){
}
//创建对象
var p = new Person() ;
//通过对象名追加属性和追加功能呢
p.name = "赵又廷" ;
p.age = 45 ;
p.speakEnglish=function(msg){
alert("会说"+msg) ;
}
</script>
<!--方式3:利用Js模板对象Object:内置对象:代表所有Js内置对象的模板-->
<script>
// 直接创建new Object() ;
//创建对象
var p = new Object() ;
//追加属性
p.name = "张安" ;
p.age = 20 ;
//追加功能
p.speak=function(msg){
alert("会说"+msg) ;
}
</script>
<!--方式4:字面量值 "json格式"-->
<script>
/**
* 最简单的字符串
* {"name":"张三","age":20,"address":"西安市"}
* 列表数据
* [{"id":1,"name":"李四","age":20},
* {"id":2,"name":"李四2","age":22},
* {"id":3,"name":"李四3","age":23},
* {"id":4,"name":"李四4","age":24}]
*
* 复杂数据: 类似Map<String,ArrayList<Citys>>
* var provinces ={
* "陕西省":[{"id":1,"city":"西安市"},{"id":2,"city":"咸阳市"}...]
* };
*/
var p = { //p:json对象 json对象.key获取 value
"id":1,
"name":"高圆圆",
"age":42,
"address":"西安市",
"gender":"女",
"speak":function (msg) {
alert("会话"+msg) ;
}
}
/*
* Java后台的实体类: Person类
* id,name,age,address,gender..
*
* Person----->json数据
* jsonlib.jar包
* 第三方:gson,fastJson,springmvc提供的内置的json解析插件jackson.jar
*
* */
document.write("学号是:"+p.id+"<br/>") ;
document.write("姓名是:"+p.name+"<br/>") ;
document.write("年龄是:"+p.age+"<br/>") ;
document.write("地址是:"+p.address+"<br/>") ;
document.write("性别是:"+p.gender+"<br/>") ;
p.speak("日语") ;
</script>
5.10js的正则表达式
正则表达式:能够浏览器(js引擎)进行解析的
限定用户输入数据的时候的一种约束!
常用语法:
X字符:X代表字符
数量词相关的语法:
X+:表示X字符出现一次或者多次
X?:表示X字符出现0次或者一次
X*:表示X字符出现零次或多次
范围相关的
\w 等价于 [A-Za-z0-9_] :任意的大小写字母或者数字字符
X{n,}:表示至少n次
X{n}: 表示恰好出现n次
X{n,m}:X字符串至少出现n次,不超过m次
正则表达对象:
var 变量名 = /正则语法/;
变量名.test(被校验的字符串)---返回true,匹配成功,否则匹配失败
举例:
正则规则 [A-Za-z0-9_]+ 任意的大小写字母或者数字字符出现一次或多次
String QQ:919081924
var 变量名 = /正则语法/; 不完全匹配,只要的字符串中某个子字符串满足条件就通过...
如果需要进行完全匹配,需要在正则语法的前后加上边界匹配器
^:以xxx指定的内容开头
$:以xxx指定的内容结尾...
5.11js原生的表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的原生表单校验</title>
<!--
用户名:8-16位的数字或者字母
密码:6-16位的数字字母组成
确认密码和密码一致
邮箱符合邮箱格式:
数字或字母@数字字母.(com/.com.cn/)
-->
<style>
#formDiv{
border: 1px solid #000;
width: 420px;
height: 240px;
margin: 150px 0 0 400px;
}
#userDiv{
margin: 30px 0 0 60px;
}
#pwdDiv{
margin: 10px 0 0 60px;
}
#repwdDiv{
margin: 10px 0 0 60px;
}
#emailDiv{
margin: 10px 0 0 60px;
}
#btnDiv{
margin: 10px 0 0 80px;
}
</style>
</head>
<body>
<div id="formDiv">
<!--
表单是否能够提交取决于当前onsbumit事件(绑定一个函数:将所有的表单项都必须校验)的返回值如果true,表示能够提交
否则false,不能提交
-->
<!-- <h3>GET方式提交</h3>-->
<div>
<h3>Post方式提交</h3>
</div>
<!--action:servlet后台地址-->
<form action="http://localhost:8080/Web_02/args" method="post" onsubmit="return checkAll()">
<div id="userDiv">
用户名:<input type="text" name="username" id="username" onblur="checkUserName()" placeholder="请输入用户名"><span id="userTip"></span>
</div>
<div id="pwdDiv">
密  码:<input type="password" name="password" onblur="checkPassword()" id="password" placeholder="请输入密码"><span id="pwdTip"></span>
</div>
<div id="repwdDiv">
确认密码:<input type="password" name="repwd" id="repwd" onblur="checkRePassword()" placeholder="请输入密码"><span id="repwdTip"></span>
</div>
<div id="emailDiv">
邮箱:<input type="text" name="email" id="email" onblur="checkEmail()" placeholder="请输入邮箱"><span id="emailTip"></span>
</div>
<div id="btnDiv">
<input type="submit" value="注册"><input type="button" style="margin-left: 30px" value="登录">
</div>
</form>
</div>
<hr/>
<script>
//校验用户名:
function checkUserName(){
//通过 id="username"获取当前用户名所在的文本框的标签对象并获取它的内容
var username = document.getElementById("username").value ;
//密码:6-16位的数字字母组成
//定义正则表达式
var reg = /^[A-Za-z0-9_]{6,16}$/ ;
//获取id="userTip"的span标签对象
var spanTip = document.getElementById("userTip") ;
//校验用户名
if(reg.test(username)){
//成立
spanTip.innerHTML = "恭喜您,可用".fontcolor("green") ;
return true ;
}else{
//不成立
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//校验用户名:
function checkPassword(){
//通过 id="password"获取当前密码所在的文本框的标签对象并获取它的内容
var password = document.getElementById("password").value ;
//用户名:8-16位的数字或者字母
//定义正则表达式
var reg = /^[A-Za-z0-9_]{8,16}$/ ;
//获取id="pwdTip"的span标签对象
var spanTip = document.getElementById("pwdTip") ;
//校验用户名
if(reg.test(password)){
//成立
spanTip.innerHTML = "√".fontcolor("green") ;
return true ;
}else{
//不成立
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//确认密码和密码一致
function checkRePassword() {
//通过 id="password"获取当前密码所在的文本框的标签对象并获取它的内容
var password = document.getElementById("password").value ;
//获取当前确认密码框的内容id="repwd"
var repassword = document.getElementById("repwd").value;
//获取span标签对象
// id="repwdTip"
var spanTip = document.getElementById("repwdTip");
if(repassword==password){
spanTip.innerHTML="√".fontcolor("green") ;
return true ;
}else{
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//校验邮箱
function checkEmail() {
// id="email"的输入的内容
var email = document.getElementById("email").value ;
// 邮箱符合邮箱格式:
//数字或字母@数字字母.(com/.com.cn/.ISTone/)
//纯QQ邮箱 数字@qq.com
//本身字符:就是.----转义 \.
var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[A-Za-z]{2,3}){1,2}$/ ;
//获取id="emailTip"的span标签对象
var spanTip = document.getElementById("emailTip");
//校验
if(reg.test(email)){
spanTip.innerHTML="√".fontcolor("green") ;
return true ;
}else{
spanTip.innerHTML="×".fontcolor("red") ;
return false ;
}
}
//表单能否提交
function checkAll() {
//将所有的表单项都必须满足规则
if(checkUserName() && checkPassword() && checkRePassword() && checkEmail()){
return true ;
}else{
return false ;
}
}
</script>
</body>
</html>
5.12表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--get提交-->
<form method="get" action="http://localhost:8080/Web_02/resolve">
用户名:<input type="text" name="username" /><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="提交" />
</form>
<hr/>
<!--post提交-->
<form method="post" action="http://localhost:8080/Web_02/resolve">
用户名:<input type="text" name="username" /><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
服务器正在校验...
</body>
</html>
6.servlet
6.1servlet的概念
Servlet的本质:servlet----狭义的规范接口/广义的规范:是一个能够实现Servlet接口的一个类
Servlet: server Applet (Java连接器)针对服务端程序的开发,主要作用交互浏览和生成数据,产生动态的web内容!
本质就是:实现Servlet接口的普通类
自定义一个类继承自Servlet接口的抽象类HttpServlet
6.2使用步骤:xml配置方式
1)导入servlet-api.jar包
2)在src下创建一个类 如MyServlet 继承子HttpServlet
(来自于java.Servlet.http.HttpServlet)
3)重写HttpServlet的doGet(执行前台get提交的信息)/doPost(执行前台post提交的信息)
4)在当前web工程中的WEB-INF的web.xml文件取配置servlet
<!--servlet的基本配置-->
<servlet>
<!--servlet的名称-->
<servlet-name>MyServlet</servlet-name>
<servlet-class>com.qf.servlet_01.MyServlet</servlet-class>
</servlet>
<!--servlet的映射配置 访问的请求路径-->
<servlet-mapping>
<servlet-name>MyServlet</servlet-name>
<!--映射路径必须以"/指定的路径"-->
<url-pattern>/myFirst</url-pattern>
</servlet-mapping>
5)访问路径:http://localhost:8080/Web_02/myFirst URL 属于URI子集
/Web_02/myFirst :URI
6.3对doGet和doPost方法的重写
package com.qf.servlet_01;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author Kuke
* @date 2021/8/25
* Servlet的入门
*/
public class MyServlet extends HttpServlet {
//执行get提交
@Override
//Http协议:在请求的时候就创建了,服务器响应的时候就创建了
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1)访问servlet---给tomcat发送请求
//2)tomcat需要给浏览器进行相应:将响应数据封装到HttpServletResponse 响应对象
//解决响应的中文乱码
//void setContentType(String var1);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("hello,这是我第一个Servlet");
}
//执行post提交
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
6.4关于get和post提交时的中文乱码
package com.qf.servet_03_getArgs;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Enumeration;
//get提交和post提交后台接收参数的都是相同,所以后台在doPost将doGet()复用(get提交方式居多)或者是在doGet()/复用doPost
//get提交tomcat8.0不会出现中文乱码(优化了)
//post提交tomcat8.0必须解决中文乱码
public class GetArgsServlet extends HttpServlet {
//doGet:接收get提交参数
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//前提一提交:
//http://localhost:8080/Web_02/args?username=zhangsanfeng123&password=12345678&repwd=12345678&email=zhangsan%40qq.com
//HttpServletRequest接口
//String getParameter(String var1);接收前台提交过来的参数 (在doPost通用) 通过参数名称获取参数值
/* String username = request.getParameter("username");
System.out.println("username:"+username);
String password = request.getParameter("password");
System.out.println("password:"+password);
String email = request.getParameter("email");
System.out.println("email:"+email);*/
// Enumeration<String> getParameterNames(); 获取所有的参数名称
//前提要求:必须在页面上指定name属性的属性值:给后台标记内容
//Enumeration<String> getParameterNames();
Enumeration<String> enums = request.getParameterNames();
while(enums.hasMoreElements()){
//获取下一个元素
String parameterName = enums.nextElement();
//在通过参数名称获取参数值
String value = request.getParameter(parameterName);
System.out.println(parameterName+"----"+value);
}
}
//接收post提交
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//将doGet()复用
doGet(request,response);
/* //一次获取单个参数
String getParameter(String var1);接收前台提交过来的参数
String username = request.getParameter("username");
System.out.println("username:"+username);
String password = request.getParameter("password");
System.out.println("password:"+password);
String email = request.getParameter("email");
System.out.println("email:"+email);*/
// Enumeration<String> getParameterNames();
/*Enumeration<String> enums = request.getParameterNames();
while(enums.hasMoreElements()){
//获取下一个元素
String parameterName = enums.nextElement();
//在通过参数名称获取参数值
String value = request.getParameter(parameterName);
System.out.println(parameterName+"----"+value);
}*/
}
}
package com.qf.servet_03_getArgs;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*
* doPost()必须解决前提提交的中文乱码
* doget()不需要解决中文乱码,tomcat8.0以后优化了
* */
public class ServletResolveEncoding extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//解决post提交乱码
//解决响应给浏览器的中文乱码
response.setContentType("text/html;charset=utf-8");
//获取前提提交参数:中文格式
//获取用户名
String username = request.getParameter("username");
System.out.println("username:"+username);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException,IOException{
//HttpServletReuqest它的父接口中有就这个方法
//void setCharacterEncoding(String var1) throws UnsupportedEncodingException;
/* request.setCharacterEncoding("utf-8");*/
//获取前提提交参数:中文格式
/* //获取用户名
String username = request.getParameter("username");
System.out.println("username:"+username);*/
doGet(request,response);
}
}
6.5servlet的创建流程
1)导包: 导入servlet-api.jar(ee规范的:HttpServlet/Servlet接口) /jsp-api.jar(支持jsp格式)
2)自定义一个类,继承自HttpServlet
重写doGet和doPost方法
doGet()---->接收get提交(用户直接在浏览器地址栏默认都是 get)
doPost()--->接收post提交
3)编写后台的业务处理doGet()....
调用service层-----进行业务功能实现
调用dao层:完成jdbc操作
4)web.xml文件进行配置servlet (xml配置)
<servlet>
<serlvet-name>默认servlet名称</servlet-name>
<servlet-class>类的全限定名称</servlet-class>
</servlet>
<servlet-mapping>
<serlvet-name>默认servlet名称</servlet-name>
<url-pattern>/路径</url-pattern>
/路径: 精确匹配 /hello (推荐)
模糊匹配
*.do/.action
*.html
</servlet-mapping>
6.6servlet的生命周期
三个阶段:init(初始化)、service（业务服务方法）、destory（销毁）。
package com.qf.servlet_life_02;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Servlet的生命周期
*
* void init(ServletConfig var1) throws ServletException;初始化
*
* //业务服务方法
* void service(ServletRequest var1, ServletResponse var2) throws ServletException, IOException;
*
* void destroy();servlet的销毁
*
*
* Servlet是一个单例的,线程不安全
* 当前我们定义的servlet就被创建一次,初始化也是一次
* service方法是业务方法,不断被调用,因为我们使用具体的get提交还是post提交,覆盖的应该具体的doXXX()方法
*/
public class ServletLife extends HttpServlet {
/**
* 提供无参构造方法
*/
public ServletLife(){
System.out.println("servletLife对象被创建了...");
}
@Override
public void init(ServletConfig config) throws ServletException {
//ServletConfig:接口 servlet的配置对象:每一个servlet都会自己的配置对象:
// 获取servlet名称以及当前servlet的初始化参数
System.out.println("servletLife初始化了...");
}
//servlet入口:业务方法服务方法
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("程序的入口service方法被调用了...");
}
//servlet销毁
@Override
public void destroy() {
System.out.println("当前servlet被销毁了...");
}
}
//总结
public void init(ServletConfig config) throws ServletException :初始化 web容器对当前servlet进行数据初始化
public void service(ServletRequest req, ServletResponse res) throws ServletException, java.io.IOException :业务调用方法(web客户端发送请求,web容器(tomcat)调用这个方法解析请求)
public void destroy():servlet销毁,当前web容器(tomcat)正常关闭或者服务器(Linux:安装tomcat)停止了都会造成销毁
6.7servlet的执行流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Dtw6EUk-1630145513097)(C:\Users\李朋刚\AppData\Roaming\Typora\typora-user-images\image-20210825195718879.png)]
1)Web客户端向服务器发送请求 http://loclhost:8080/web工程名称/hello
2)服务器接收请求,解析访问路径uri: /web工程/hello
找当前web工程是否存在url-pattern为"/hello",web.xml去查找
3)如果找不到,404---->找不到路径
如果找到了,解析servlet-mapping 获取url-pattern对应的servlt-name
在通过servlet-name找servlet的基本配置里面servlet-class : 当前servlet的全限定名称:包名.类名
4)反射的方式Class.forName("包名.类名")--->Class clazz
5)创建当前类实例----clazz.newIntance()---->Object obj
6)获取当前字节码文件对象中Method类对象
Method method = clazz.getDeclaredMethod("doGet()",HttpServletRequest.class,HttpServletResponse.class) ;
7)调用方法
method.setAccessiable(true) ;
method.invoke(obj,request,response) ;
6.8servlet的体系结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V61ffl5H-1630145513099)(C:\Users\李朋刚\AppData\Roaming\Typora\typora-user-images\image-20210825195845140.png)]
Servlet接口
public void service(ServletRequest req, ServletResponse res)
抽象的GenericServlet 子实现类
public void service(ServletRequest req, ServletResponse res)
抽象的HttpServlt类 子实现类
public void service(ServletRequest req, ServletResponse res) {
//获取前提的提交方式
//public String getMethod()
String method = req.getMethod() ;
//选择结构语句判断
if(method.equals("GET")){
..
doGet(req,res) ;
}else if(method.equals("POST")){
doPost(req,res) ;
}
}
xxxServlet继承自HttpServlet
doGet()/doPost()
子类继承父类,子类可以获取父类的对象吗?
可以,为了节耦,通过反射即可.当然,new也可以
6.9servlet的ServletConfig对象的作用
ServletConfig对象:通过父类的父类的ServletConfig getServletConfig()方法获取ServletConfig对象(即HttpServlet的父类GenericServlet中的方法)
通过这个对象可以获取servlet配置文件的信息
但是,这个对象的方法都是封装在HttpServletRequest当中的,直接通过形参就可以在doGet方法操作
更加简便
其次,在servlet配置文件中,可以对servlet对象的创建时机进行更改
servlet对象的创建是由Tomcat自动完成的,默认在访问servlet的时候创建
通过<load-on-startup>1</load-on-startup>就可以更改
数字越小,则优先级越高(大于0)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ytNRm0fn-1630145513101)(C:\Users\李朋刚\AppData\Roaming\Typora\typora-user-images\image-20210826191259917.png)]
package com.qf.servletconfig_02;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*
* Servlet默认访问的时候创建当前类对象(web容器反射的方式创建)
* 在web.xml
* <servlet>
<servlet-name>MyServlet</servlet-name>
<servlet-class>com.qf.servletconfig_02.MyServlet</servlet-class>
<!--配置:初始化时机:默认的时候访问serlvet的创建
在web容器启动的时候,就创建Servlet对象
数字越小,优先级越大(默认1)
-->
<load-on-startup>1</load-on-startup>
</servlet>
*
* */
public class MyServlet extends HttpServlet {
/* public MyServlet(){
System.out.println("MyServlet对象创建了...");
}*/
//初始化: 就可以配置对象获取初始化参数
@Override
public void init(ServletConfig config) throws ServletException {
System.out.println("init方法被调用了...");
//获取ServletConfig对象:接口 代表每一个servlet的配置对象
//在父类中的父类有一个成员方法
//ServletConfig getServletConfig()
//this:代表当前Servlet对象的地址值引用(web容器创建)
//public String getServletName()
String servletName = config.getServletName();
System.out.println(servletName);
System.out.println("------------------------");
//作用2;获取初始化参数init-param参数值
//String getInitParameter(String var1);通过初始化参数名称的参数值
String path = config.getInitParameter("path");
System.out.println(path);
//后面:进行io流文件传输(复制)
}
/*
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("业务方法service调用了....");
}
@Override
public void destroy() {
System.out.println("servlet被销毁了...");
}*/
/* @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取ServletConfig对象:接口 代表每一个servlet的配置对象
//在父类中的父类有一个成员方法
//ServletConfig getServletConfig()
//this:代表当前Servlet对象的地址值引用(web容器创建)
ServletConfig servletConfig = this.getServletConfig();
//public String getServletName()
String servletName = servletConfig.getServletName();
System.out.println(servletName);
System.out.println("------------------------");
//作用2;获取初始化参数init-param参数值
//String getInitParameter(String var1);通过初始化参数名称的参数值
String path = servletConfig.getInitParameter("path");
System.out.println(path);
//后面:进行io流文件传输(复制)
//获取当前servlet的名称
//获取初始化参数
}*/
/*@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}*/
}
6.10servlet的ServletContext对象的作用(重点)
1)获取上下文路径
2)请求转发
3)获取全局参数
4)域对象
6.10.1获取上下文路径
//作用1 获取上下文路径
//1)先获取ServletContext接口(web容器反射创建)
//ServletContext servletContext = this.getServletContext();
//2)获取上下文路径 String getContextPath();
//String contextPath = servletContext.getContextPath();
//ServletContext对象的一些方法:
//String getContextPath(); 获取上下文路径(一般是web工程名 +_war_exploded,如
// Servlet_jsp_war_exploded)
//StringBuffer getRequestURL(); 获取URL路径
//String getRequestURL(); 获取URI路径
//String getProtocol(); 获取协议版本号 (Http 1.1)
//String getMethod(); 获取web提交方式 (get/post/put)
//String getHeader(); 获取用户使用的浏览器类型
package com.qf.servletcontext_03;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* ServletContext:代表整个web application (全局对象)
*
* 作用1:
* 获取上下文路径
* jsp/html :href/src(写路径:最好使用全局路径):绝对不会出现404
* html:
* http://localhost:8080/URI
*
*
*/
public class ServletContextDemo1 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1)先获取ServletContext 接口(web容器反射创建)
//public ServletContext getServletContext()
/* ServletContext servletContext = this.getServletContext();
//2)获取上下文路径 String getContextPath();
String contextPath = servletContext.getContextPath();
//URI:/Servlet_jsp_war_exploded/contextDemo1
System.out.println(contextPath); 是URI的一部分
/Servlet_jsp_war_exploded(上下文路径)*/
//HttpServletRequest
//请求信息： 请求行+key（请求头）：value）内容）
//GET /Servlet_jsp_war_exploded/contextDemo1 HTTP/1.1
// 获取url和uri
//String getRequestURI();
// StringBuffer getRequestURL();
String url = request.getRequestURL().toString();
System.out.println("url:"+url);
String uri = request.getRequestURI();
System.out.println("uri:"+uri);
String protocol = request.getProtocol();//获取协议版本号（Http/1.1反复请求）
System.out.println("protocol:"+protocol);
//获取默认提交方式
String method = request.getMethod();
System.out.println("method:"+method);
//获取请求头信息
//String getHeader(请求头名称)---> 获取内容
String header = request.getHeader("User-Agent");//用户使用的浏览器类型
if(header.contains("Chrome")){
System.out.println("你使用的谷歌浏览器");
}else if(header.contains("firefox")){
System.out.println("你使用的火狐浏览器");
}else{
System.out.println("浏览器未知...");
}
System.out.println("----------------------");
//简化格式
//HttpServletRequest
//获取上下文
// 路径 String getContextPath();
String contextPath = request.getContextPath();
System.out.println(contextPath);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
6.10.2请求转发
2)请求转发
一般步骤:
1)获取全局对象
ServletContext servletContext = this.getServletContext();
2)获取当前项目的请求分发器(接收web客户端的请求之后,将请求通过服务器进行转发到指定 的页面上)
public RequestDispatcher getRequestDispatcher(String path)
RequestDispatcher requestDispatcher = servletContext.getRequestDispatcher("/login.html");
3)从当前servlet后台转发到前台资源地址上
requestDispatcher.forward(request,response);将结果反馈到login.html页面
public RequestDispatcher getRequestDispatcher(String path)被封装请求对象中
简化步骤:
请求转发不需要携带上下文路径
request.getRequestDispatcher("/WEB-INF/login.html").forward(request,response);
package com.qf.servletcontext_03;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*
* ServletContext作用2:请求转发 本质属于"服务器行为"
*
* 当前请求当前后台/contextDemo3 跳转到前前台 login.html 登录页面中
* */
public class ServletContextDemo3 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取全局对象
/* ServletContext servletContext = this.getServletContext();
//public RequestDispatcher getRequestDispatcher(String path)
//获取当前项目的请求分发器(接收web客户端的请求之后,将请求通过服务器进行转发到指定的页面上)
//路径必须"/"
RequestDispatcher requestDispatcher = servletContext.getRequestDispatcher("/login.html");
//public void forward(ServletRequest request, ServletResponse response)
//从当前servlet后台转发到前台资源地址上
requestDispatcher.forward(request,response);*/
//请求转发的简写格式
//public RequestDispatcher getRequestDispatcher(String path)被封装请求对象中
//请求转发不需要携带上下文路径
//request.getRequestDispatcher("/login.html").forward(request,response);
request.getRequestDispatcher("/WEB-INF/hello.html").forward(request,response);
System.out.println("请求转发成功...");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
6.10.3获取全局配置参数
package com.qf.servletcontext_03;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
*Servletcontext:全局对象
* 作用3:获取全局配置参数
*/
public class ServletContextDemo2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取ServletContext对象
ServletContext servletContext = this.getServletContext();
//获取全局参数
//String getInitParameter(String var1);
String value = servletContext.getInitParameter("characterEncoding");
System.out.println("value:"+value);
//解决post提交的中文乱码
request.setCharacterEncoding(value);
//解决响应的乱码
response.setContentType("text/html;charset="+value+"");
response.getWriter().write("Servletcontext的作用3,获取全局参数配置");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
6.10.4作为域对象
域对象的作用就是可以在不同的servlet之间进行"数据共享"--------web容器(同一tomcat下)
转发: 第一个参数"user"是将属性名称绑定
servletContext.setAttribute("user",user);
接收: 传入参数为转发时候用的绑定名称
User user = (User) servletContext.getAttribute("user");
package com.qf.servletcontext_04;
import com.qf.entity.User;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.List;
/**
* ServletContext的作用4:
* 作为"域对象"
*
* 什么叫域对象:
* 就是可以在不同的servlet之间进行"数据共享"----web容器(tomcat')
*/
public class ServletDemo1 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1)获取全局对象
ServletContext servletContext = this.getServletContext();
//2)public void setAttribute(String name, Object object)
/* List<String> list = new ArrayList<>() ;
list.add("eric") ;
list.add("jakcy") ;
list.add("Lee") ;
servletContext.setAttribute("list",list);
*/
User user = new User() ;
user.setUsername("张三");
user.setPassword("123456");
//将属性名称对应的值进行绑定 "user"即是绑定
servletContext.setAttribute("user",user);
System.out.println("保存数据成功...");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
package com.qf.servletcontext_04;
import com.qf.entity.User;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
/**
* 获取数据
*/
public class ServletDemo2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1)获取全局对象
ServletContext servletContext = this.getServletContext();
//2)当前域对象中获取数据
//public Object getAttribute(String name):获取在域对象中绑定的内容,通过属性名称
/* List<String> list = (List<String>) servletContext.getAttribute("list");
for (String s : list) {
System.out.println(s);
}*/
//"user"是绑定内容
User user = (User) servletContext.getAttribute("user");
System.out.println("用户名是:"+user.getUsername());
System.out.println("获取数据成功...");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
6.10.5什么是域对象
四种域对象
数据类型 对象名称 范围(小->大)
PageContext page域 在某一个jsp页面
HttpServletRequest(使用居多) request 在一次请求中有效
HttpSession(使用居多) session 在一次会话中有效(存储在服务器断)
ServletContext context/application 全局对象:在整个web工程下有效
(只要web容器处于运行状态)
cookie不同于session
cookie(String key,String value)存储在浏览器端,范围也小于session,只能存储String类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aGj6IDON-1630145513102)(C:\Users\李朋刚\AppData\Roaming\Typora\typora-user-images\image-20210826202424086.png)]
6.11jsp的使用
jsp:Java Server Page:java服务页面 能够书写Java代码的服务页面
只限定于Java语言，能够和后台服务器端程序进行交互 ：主要展示视图层，服务端程序，获取数据
能够处理后台的业务数据 通俗讲,就是前台请求到后台数据要通过jsp反映(打印输出)到前台界面上
jsp可以动态的填充前台静态页面.
6.11.1jsp的解析过程
总两个阶段:
举例:
第一阶段:hello.jsp---->通过web容器 "翻译" 成 hello_jsp.java文件
会将当前jsp页面中所有内容通过JspWriter(输出对象)给浏览器中拼接内容
class hello_jsp ---->规定了jsp的生命周期:
_jspInit()
_jspService(请求对象,响应对象)
_jspDestory()
第二阶段:需要将hello_jsp.java----hello_jsp.class
(web容器通过反射机制(内省机制)获取当前类对象,调用_jspservice:程序入口方法)
jsp的本质就是 servlet 从源代码的继承中可以看出最终继承自sevlet
public final class hello_jsp extends org.apache.jasper.runtime.HttpJspBase{}
public abstract class HttpJspBase extends HttpServlet implements HttpJspPage {}
6.11.2jsp的三大指令
<%@Page
import:导入java的一些核心类或者接口
contentType="text/html;charset=UTF-8" 设置jsp的内容格式以及编码
language="java":只支持Java语言
buffer：jsp默认的缓冲区大小(jsp中可以不断向浏览器输出:写数据过去):默认8kb(一般不用设置)
errorPage:当jsp发生异常,跳转到错误页面上
session:是否启用HttpSession域对象, (不用去设置,默认就是自动启动)
isErrorPage:当前页面是否为错误页面 默认false
%>
<%@include jsp静态导入%>
file属性:导入资源文件
静态导入:原理
不会将被导入的jsp文件单独进行翻译和编译,而只是将当前被导入jsp文件的内容加载进来,节省内存!
<%@taglib 导入jsp的核心标签库jstl%>
6.11.3jsp的九大内置对象
九大内置对象:包括四个域对象,五个非域对象:
四个域对象 简写
PageContext pageContext pageScope
HttpServletRequest request requestScope
HttpSession session sessionscope
ServletContext application applicationScope
非域对象
ServletConfig config 配置对象
JspWriter out 字符输出流,向浏览器写内容
Object this 代表当前jsp对象(类)地址值引用
Throwable t 异常:当jsp中出现异常,获取异常信息
HttpServlerResponse
6.11.4jsp的el表达式(javaBean导航)
<body>
<h3>没有使用el表达式之前的写法</h3>
<%
//给pageContext域中绑定数据
//pageContext.setAttribute("name","lucy");
//给reqest域中绑定数据
request.setAttribute("name","eric");
//给session域中绑定数据
// session.setAttribute("name","zhangsan");
//给applictation域中绑定数据
// application.setAttribute("name","蒋乐乐") ;
%>
<%=request.getAttribute("name")%> //打印
<hr/>
<h3>使用el表达式</h3>
<%-- ${域.属性名称} --%>
<%--name是:${requestScope.name} - name是:${sessionScope.name}--%>
<%--name是:${pageScope.name}<br/>
name是:${applicationScope.name}--%>
<%--最终的简化格式
直接将域的写法省略了
${域对象中绑定参数名称}---就会从四个域对象中搜索,从小到大,
绑定到这个参数名称,先使用这个数据: 使用最多的域对象就是request!
--%>
${name}
</body>
JavaBean导航
JavaBean是设计规范:
1)当前类是具体类(公共的类)
2)具备私有字段(私有的成员变量)
3)提供setXXX()/getXXX()公共方法,暴露出来(public的)
4)实现序列化接口serializable
例如:
将User
private String username ;
private String password ;
public String getUsername() {//getUserName() get去掉 ,()去掉
username:就获取当前的用户名内容(username属于User的bean属性)
return username;
}
${属性名称.bean属性}
<% User user = (User)request.getAttribute("user")
String username =user.getUsername() ; %>
获取用户名: ${user.username} - ${user.password}
6.11.4jsp快速从后台获取数据
通过域对象就能获取对象
通过从jsp向前端页面展示一个Person类数据为例,模拟前后端交互过程中,服务器将数据返回给前端的过程.
//实体Person类
package entity;
public class Person {
private String name;
private int age;
private String gender;
public Person() {
}
public Person(String name, int age, String gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
//控制器Personsevlet进行数据转发,到/jsp_el/el_person.jsp
package controller;
import entity.Person;
import java.io.IOException;
@javax.servlet.annotation.WebServlet("/person")
public class PersonServlet extends javax.servlet.http.HttpServlet {
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
Person person = new Person("高圆圆",42,"女");
request.setAttribute("person",person);
request.getRequestDispatcher("/jsp_el/el_person.jsp").forward(request,response);
}
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doGet(request,response);
}
}
///jsp_el/el_person.jsp将数据展示在前端页面
<%--
Created by IntelliJ IDEA.
User: 李朋刚
Date: 2021/8/26
Time: 17:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
${person.name} - ${person.age} - ${person.gender}
</body>
</html>
7.前后端交互,模拟登录界面
day40_mvc_jiaohu
tring username ;
private String password ;
public String getUsername() {//getUserName() get去掉 ,()去掉
username:就获取当前的用户名内容(username属于User的bean属性)
return username;
}
${属性名称.bean属性}
<% User user = (User)request.getAttribute("user")
String username =user.getUsername() ; %>
获取用户名: ${user.username} - ${user.password}
#### 6.11.4jsp快速从后台获取数据
**通过域对象就能获取对象**
通过从jsp向前端页面展示一个Person类数据为例,模拟前后端交互过程中,服务器将数据返回给前端的过程.
```java
//实体Person类
package entity;
public class Person {
private String name;
private int age;
private String gender;
public Person() {
}
public Person(String name, int age, String gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
//控制器Personsevlet进行数据转发,到/jsp_el/el_person.jsp
package controller;
import entity.Person;
import java.io.IOException;
@javax.servlet.annotation.WebServlet("/person")
public class PersonServlet extends javax.servlet.http.HttpServlet {
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
Person person = new Person("高圆圆",42,"女");
request.setAttribute("person",person);
request.getRequestDispatcher("/jsp_el/el_person.jsp").forward(request,response);
}
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doGet(request,response);
}
}
///jsp_el/el_person.jsp将数据展示在前端页面
<%--
Created by IntelliJ IDEA.
User: 李朋刚
Date: 2021/8/26
Time: 17:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
${person.name} - ${person.age} - ${person.gender}
</body>
</html>
扫一扫
1788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
