客户端(前端)技术：
HTML：超文本标记语言实现页面展现，形成静态网页
CSS：层叠样式表，实现页面美化
JS javascript：脚本语言，实现页面前端和后端的数据交互，形成动态网页
React facebook：出品前端、移动端JavaScript框架
Angular google： 出品基于TypeScript的开源 Web 应用框架
Vue： 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发
NodeJS： 基于 Chrome V8 引擎的 JavaScript 运行环境
一.html
1：概述：
Html是超文本标记语言，即网页中的元素内容可以超过文本的内容，
html中提供了大量的标记或标签，如开始标签和结束标签。
2：结构
<!DOCTYPE html> <!--文档的声明行,用来声明这是一个HTML文件 -->
<html> <!-- HTML文件里的根元素-->
<head> <!-- 网页中的头部分,优先于body加载,用来设置网页的属性-->
<meta charset="utf-8"> <!-- 设置网页的编码 -->
<title>你好,HTML</title> <!-- 设置网页的标题 -->
</head>
<body><!-- 网页的体部分,放展示的数据 -->
hell o html~
hello html~ <br></br>
<!-- br标签是换行；
表示一个空格 -->
</body>
</html>
3：html中的标签
1.标题标签： h1大~h6小 自动换行。
2.列表标签
orderlist：ol：定义有序列表 li：定义列表项；
unoderlist:ul：定义无序列表 li：定义列表项。
<dl> 标签用于结合， 标签定义了定义列表（definition list),定义列表的结构
<dt> （定义列表中的项目)定义列表的名称
<dd> （描述列表中的项目）:定义类表的内容。
3.图片标签
src属性用来指定图片的位置(先保证图片资源和网页在同一级目录)
width属性用来指定图片的宽度,单位是像素px
height属性用来指定图片的高度,单位是百分比。
4.超链接：
跳转：
<a href="https://www.baidu.com">百度一下1</a><br/>在当前页面跳转
<a href="https://www.baidu.com" target="_blank">百度一下2</a>打开一个新的页面跳转
锚定：
<a name="top">回到锚定的位置</a>
<!-- 通过#获取name的属性值-->
<a href="#top">点击，回到顶部锚定</a>
5.输入框：
普通文本框：<input type="text" /> <br />
密码文本框：<input type="password" /> <br/>
单选文本框： <input type="radio" />男 <br/>
复选文本框：<input type="checkbox" />一号 <br/>
下拉框：<select name="city">
<option>-请选择-</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">云南</option>
</select> <br/>
数字值文本框：<input type="number" /> <br/>
日历文本框：<input type="week" /> <br/>
日期输入框：<input type="date" /><br/>
文本域：<textarea>提示信息……</textarea><br/>
按钮文本框：<input type="button" value="按钮1"/>
<button>按钮2</button> <br/><br/>
提交：把用户在浏览器输入的数据提交给后端进行处理<br/>
提交按钮1：<input type="submit" /> <br/>
提交按钮2：<button type="submit">提交2</button><br/>
6.表格标签:table
结构：table里包含tr行，tr行里包含td列，
属性：border设置边框，width表格宽度，bgcolor背景色，cellspacing单元格的距离，
表格的表头使用 <th> 标签进行定义。
colspan是列合并:把多个列合并成一个大列,值是指合并几个
rowspan是行合并:把多个行合并成一个大行,值是指合并几个
7.表单标签:form
表单标签，用来提交数据:
1.标签:form表单,table表格,tr行,td列,th表头,h1标题,
select是下拉框,option是下拉选项,textarea文本域。
2.属性:type="file"是浏览文件,type="email"是邮箱,align是元素的位置。
3.提交数据的要求:必须用form标签+必须有submit按钮+必须有name属性
提交的数据都在地址栏:被拼接在了?之后。
4.name用来收集用户从浏览器填的数据,value用来设置提交的值。
5.数据提交的方式: get和post
get方式: 默认的就是get方式,数据拼接在地址栏中,缺点是不安全,长度受限；
post方式:好处是安全,数据大小没有要求,但是数据不在地址栏展示了。
6.method属性用来设置数据的提交方式，默认是get，
action属性用来指定是哪段java程序来处理这次提交的数据。
代码片段：
<form method="post" action="#" >
<td>用户名： <input type="text" name="user"/></td>
<td>密码：<input type="password" name="pwd" /></td>
<td>确认密码：</td><input type="password" name="repwd"/></td>
<td>邮箱：<input type="email" name="mail"/></td>
<button type="submit">提交</button> <!-- 提交按钮 -->
</td>
</form>
8.其他标签
div标签，每个div标签独占一行
<div>1</div>
<div>2</div>
<div>3</div>
p标签，每个p标签独占一行，每个p标签代表一个段落
<p>1</p>
<p>2</p>
<p>3</p>
span标签：行级标签
<span>1</span>
<span>2</span>
<span>3</span>
音频标签，controls属性必须有，用来作为控制器
<audio controls="controls">
<source src="../zorer/apple.mp3"></source>
</audio>
视频标签
<video controls="controls">
<source src="../zorer/badapple.mp4"></source>
</video>
4．元素类型
(1)块级元素：(div,p,h1~h6)
默认情况下，块级元素独自占一行，可以设置宽和高。如果不设置宽和高，
其中宽是默认填满父元素，而高是由内容，外边距、边框、内边距都可以设置。
(2)行内元素：(img,a,span)
默认情况下，多个行内元素处在同一行,不能设置宽和高,左右外边距、边框、
内边距都可 以设置，上下外边距设置无效。
(3)行内块元素：
既具备行内元素的特征，还具备块级元素的特征
二．CSS
color修饰文字的颜色；
font-size修饰字号,
1．概念：
CSS(stylesheet)全称叫做层叠样式表，是用来修饰HTML网页的一门技术，
增强网页的展示能力。主要是使用CSS属性来实现，最终可以将css代码和
HTML网页代码进行分离，也可以提高css代码的复用性。
2．CSS代码可以出现的位置(用style修饰):
(1)行内CSS：行内CSS(优先级高),效果只作用在这一行. 属性名:属性值;
(2)内部CSS：写下当前页面内的样式，语法: 选择器 { 属性名:属性值;样式2; }
(3)外部CSS：以链接的形式加入通过: <link rel="stylesheet" href="#.css"/>
3．选择器分类
方便的选中网页中的一些元素。
分类:简单选择器 , 复杂选择器。
简单选择器：
3.1.标签名选择器:按照标签的名字选中元素
3.2.class选择器:先给元素添加class属性+通过.选中元素
3.3.id选择器:先给元素添加id属性（值必须唯一）+通过#获取id的值，
选择器有好几种,优先使用id选择器选择高效。
高效选择器：
3.4.分组选择器：选择器1,选择器2,选择器3{声明的样式}
如:通过多种选择器选择多个元素 。
div,#a,.b{
font-size: 15px; /* 字号 */
text-indent: 20px; /* 文本缩进 */
}
3.5.属性选择器：根据属性选中元素:
[type]{
/* 只要有type属性就会被选中 */
background-color: #00FFFF;
}
[type='text']{
/* 只要属性值为text就会被选中 */
background-color: #FF0000;
}
[type='passowrd']{
background-color: chocolate;
}
4．盒子模型：
定义：CSS把html里的元素看为是一个个的盒子。
(1)外边距margin:设置盒子间的距离
margin:上右下左都有边距；
margin-top:设置上边距，和上边盒子的距离；
margin-bottom:设置下边距，和下边盒子的距离；
margin-left:设置左边距，和左边盒子的距离；
margin-right:设置右边距，和右边盒子的距离；
(2)内边距pading:设置盒子内部内容的距离
pading:上右下左都有边距；
pading-top:设置上边距，和上边框的距离；
pading-bottom:设置下边距，和下边框的距离；
pading-left:设置左边距，和左边框的距离；
pading-right:设置右边距，和右边框的距离；
(3)边框border：设置盒子的边框
结构： 边框的宽度 样式(实线/虚线) 边框的颜色
style="border: 1px solid/dashed red ;"
三．JavaScript
1.概念：
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。
微软出了符合规范类似javascript的称为js，但一般开发者忽略它们的差异，
全称就习惯叫javascript，简称就习惯叫js。全称JavaScript，是一种弱类型语言，
同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。
2.特点：
直译式,不需要编译的过程.
js是一种弱类型的语言,用来提高网页与用户的交互性
事件驱动: 指JS代码以什么方式来触发执行
基于对象: JS也有类似于OOP的思想,可以自己new对象
脚本语言: 只能在特定场景执行的语言,JS只能在浏览器来执行
js中严格区分大小写，在html和css中不用。
3.在html当中
用<script> 内容</script>
js可以让网页动起来，基于对象，事件驱动，脚本语言；
基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，
也没有编译的过程。是一边解释一边执行。
事件驱动：在JS中，不满足条件不会触发事件的驱动，大部分情况下都是
通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将
内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。
js可以出现的位置：行内js，内部js，外部js
行内js：用于行标记内部，<a href="#" onclick="alert()">鼠标点击事件...</a>
内部js：用<script> 内容</script>
外部js：<script src="#.js"> </script>
事件驱动：不满足条件不会触发事件的驱动，js代码符合相对应的方式会被触发执行。
4.JavaScript 数据类型(基本数据类型,复杂数据类型)
基本类型(值类型)：
1.数字(Number)：在js中，数值类型只有一种，就是浮点型。
2.字符串（String）：字符串直接量是通过单引号或者双引号引起来；
3.布尔(Boolean)：值为true或者是false；
4.对空（Null）:值也只有一个，就是null。表示空值或者不存在的对象。
5.未定义（Undefined）：值只有一个就是undefined。表示变量没有初始化值。
6.Symbol:是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
引用数据类型(复杂数据类型)：
数组(Array)、函数(Function)，对象(Object)(自定义对象、内置对象、DOM对象、BOM对象…）
<script>
//1.数据类型：number string boolean null undefined
alert(2.4+5.6); //8,结果是number类型的。
/*数字类型可能的取值：Infinity:正无穷大;-Infinity:负无穷大;
NaN:Not a Number非数字，和任何值都不相等，包括它本身*/
alert("10");//10,,结果是字符串类型的。
alert("10"+23);//遇到字符串，输出的结果都是字符串。
alert('10'+12+34);//字符串可以用单引号或双引号引起来。
alert(10+32+"43"+55);//未遇到字符串前是数字类型的直接运算。
alert(false); //布尔数据类型
alert(true);
alert(null);//空数据类型
alert(undefined);//未被定义的数据类型
var num; //为赋值或初始化，运行时可能会报错
alert(num);
</script>
5.js变量：
js是一种弱类型语言,所有类型的变量都是用var关键字定义，并且参数的类型可以随时转换。
var：关键字没有作用域的概念；
let：相当于var，有作用域，更加的安全；
const：定义常量用的；
格式：变量类型 变量名=变量值
var b=10;
b=20;// number
b=1.6 //number
b=true;//boolean
alert(b);
//交换变量的值(首位相连斜相对)
var a=1; var b=6;
alert("交换前："+a+","+b);
var tmp=a; a=b; b=tmp;
alert("交换后："+a+","+b);
6.js的运算符
//1.算数运算符： + - * / % ++ --
alert(5/2); //2.5,js是弱类型语言
alert(5%2);//1,取余数
var a=10; var b=10; alert(a++);//10
alert(++b);//11
var a=10; var b=10; var c=a+++b;//++ -- 的优先级大于+，-
alert(c);//20
var a=10; var b=10; var d=++a+b;
alert(d);//21
var a=10; a=a++; //把a++的结果10,交给a保存
alert(a);//10
var b=10; b=++b;//把++b的结果11,交给a保存
alert(b);//11
//2.赋值运算符： =，+=，-=，*=，/=，%=
var d=10;
alert(d%=3);//1
//d%=3相当于d=d%3;
//3.比较运算符，描述的是成立为true，
不成立为false； ==，!=, =，!, > ，< ，>=，<=
alert(1==1);//true
alert(1=="1");//true，==只是比较值
alert(1==="1");//false,===比较的是类型和值
alert(1===1);//true,类型和值都相等
alert(1!=1);//false
//4.三元运算符：求两个数中的最大值：a?b :c;
var e=10;
var f=3;
var g=e>f ? e: f; //记录最大的值
alert(g); //10
//5.逻辑运算符: &&，||，& ， |
//6.位运算符:
移位运算符分为左移(<<)、右移(>>)、无符号位移(>>>)。
<<:空位补0，最高位丢弃。相当于数据乘以2的n次幂。
3的原码：11
原码 00000000 00000000 00000000 00000011
反码 00000000 00000000 00000000 00000011
补码 00000000 00000000 00000000 00000011
左移(00)000000 00000000 00000000 0000001100（补码）
正数的原反补都相同，所以结果为12。
-3的原码
原码 10000000 00000000 00000000 00000011
反码 11111111 11111111 11111111 11111100
补码 11111111 11111111 11111111 11111101
左移 (11)11111111 11111111 11111111 11110100(补码)
反码 11111111 11111111 11111111 11110011
原码 10000000 00000000 00000000 00001100（-12）
>>:最高位是0，左边补齐0；最高位是1，左边补齐1。相当于数据除以2的n次幂。
原理与左移相同。
>>>:无论最高位是0还是1，左边补齐0。
正数>>>的结果与>>相同，重点看负数。
-12的原码
原码 10000000 00000000 00000000 00001100
反码 11111111 11111111 11111111 11110011
补码 11111111 11111111 11111111 11110100
>>> 0011111111 11111111 11111111 111101(00)(补码）
变成了正数，原反补都相同，通过计算得1073741821。
//7.前置逻辑运算符: ! (not)
//8.typeof运算符: 用于返回变量或者表达式 的数据类型
var i = 3; console.log(typeof i);//number
i=true; console.log(typeof i);//boolean
i="hello"; console.log(typeof i);//string
7.注释：
单行注释： //注释内容
多行注释： /* 注释内容 */
8.JS语句：
JS中的语句和Java中的语句用法也大致相同；
// 1.if…else语句
var a=3;
if(a==="3"){ //false,要求值和类型相等
console.log("ok");
}else{
console.log("bad");
}
//练习：判断成绩所属的等级
/* 100-80 优秀； 80-60 中等； 60-0 不及格； 其他值 输入错误 */
var score="u";
if(score<=100&&score>80){
console.log("优秀");
}else if(score>=60){
console.log("及格");
}else if(score>0){
console.log("不及格");
}else{
console.log("输入错误");
}
//2.switch…case语句
//判断今天周几
var a=prompt('请输入数字：');//输入框
var day=(Number)(a); //强制把String类型转换为number类型
switch(day){
case 1:alert("今天星期一");break;
case 2:alert("今天星期二");break;
case 3:alert("今天星期三");break;
case 4:alert("今天星期四");break;
case 5:alert("今天星期五");break;
case 6:alert("今天星期六");break;
case 7:alert("今天星期天");break;
default:
alert("输入错误。")
}
//3.循环语句
//for循环; //循环语句中没有增强for循环
for(var i=0;i<7;i++){
alert(i);
console.log(i); }
var sum=0;
for(var i=0;i<=100;i++){
sum +=i;//sum=sum+i; }
console.log(sum);
//求1~100的偶数的和
var sum=0;
for (var i =0; i <= 100; i++) {
if(i%2==0){
sum +=i; //修改变量的值
} }
console.log("1~100的偶数的和："+sum);
//while循环
var i=0;
while(i<5){
alert(i);
i++; }
var i=0,sum=0 ;
while(true){
i++;
sum +=i;
if(i==100){
alert(sum);
break;
} }
//do{}while();循环
var i=0;
do{
i++;
alert(i);
}while(i<5);
//练习1:1亿，每天花一半，用几天
var money=100000000;
var day=0;
while(money>1){
money=money/2;
day++;
}
console.log("1亿能花："+day+"天~");
9.js的数组：
定义：js数组用于在单个变量中存储多个值。
特点: 长度可变,数据类型可以存的非常丰富。
创建方式：
1:存放任何类型的数据：var arr1=new Array();
<script>
js数组的特点：存放的数据类型丰富，有下标0，有长度length,且长度可变
1.方式1：var a1=new Array();
var a1=new Array();
console.log(a1);//[]
console.log(a1.length);//0,获取数组长度
var arr2=new Array("abc",1,"hello",true);
console.log(arr2);
console.log(arr2.length);//4
console.log(arr2[2]);//hello
console.log(arr2[4]);// undefined
2.方式2： var a2=[];
console.log(a2.length);//0
a2=["hello",'abc',true,1,2.3];
console.log(a2);
console.log(a2.length);//5
a2[99]=true;//改变数组的长度
console.log(a2.length);//100
var a21=["df",2,true];
console.log(a21);
//遍历数组1
for (var i = 0; i < a2.length; i++) {
// alert(i);//输出的是下标
console.log(a2[i]);//输出的是下标
}
//遍历数组2
//在java中foreach:for(Object o: arr){o是数据}
//在js中forin的语法：for(var o in arr){o是下标}
for(var o in a2){
console.log(a2[o]);//输出的是下标
}
</script>
10.js的函数：
js函数就是一个有具体功能的代码块，可以反复调用；
函数就是包裹在花括号里的代码块，通过function关键字
<script>
//1.js函数的创建方式1
//声明1：function 函数名称([参数列表]){函数体}
//调用：函数名称([参数列表]);
//列1：创建
function save(){
console.log("save()被调用成功");
}
//调用
save();
//练习1：统计1~10的总和(使用数组和函数)
//a.创建函数
function sum1(){
var a=[1,2,3,4,5,6,7,8,9,10];
var b=0;
for(var i in a){
b=b+a[i];
}
console.log("1~10的总和："+b);
}
//b.调用函数
sum1();
//a.先调用
s(2);
//b.后创建
function s(a){
console.log(a);
}
//声明2： var 函数名称=function([参数列表]){函数体}
//不可以先调用后创建
var get=function(){
console.log("声明函数方式2被调用");
}
//调用
get();
//练习2：统计1~10的偶数个数(使用数组和函数)
var sumdoub=function(){
sumdoub=0;
for (var i = 1; i <=10; i++) {
if(i%2==0){
sumdoub++;
} }
console.log(sumdoub);
}
sumdoub();
var count=function(){
var a=[1,2,3,4,5,6,7,8,9,10];
var b=0;//记录个数
for(var i in a){
if(a[i]%2==0){
b++;
} }
console.log("1到10的偶数个数："+b);
}
//调用;
count();
//含有返回值的函数：
function vodv(){
return "返回的内容。";
}
var cv=vodv();
console.log(cv);
// 或者：console.log(vodv());
//3.设计函数，并提供一个有返回值的函数。
function vocon(a,b){ //定义含参函数求和
return a+b;
}
//调用
var c=vocon(5,7);
console.log(c);
//打印指定数组中的数据
function tostring(a){
var s1="";//定义变量保存值
for(var i in a){//i是下标，a[i]是数据
s1=s1+a[i]+" ";//把每个数据拼接为字符串
}
return s1;
}
//调用含参含返回值的函数
var arr1=new Array("dsf","hello",1,3.5,true);
var ao=tostring(arr1);//调用函数，准备参数，接返回值
console.log(ao);
</script>
11.js的对象:
分类：
内置对象：String/Array/Number/Math/JSON…
自定义对象：语法: var 对象名={k:"v",k:"v",k:function(){}}
<script>
<!-- 内置对象 -->
//1.string的功能
function a(){
var a="hello";
//求字符串的长度
console.log(a.length);
//拼接字符串
var b=a+"word1";
console.log(b);
var c=a.concat("word2");
console.log(c);
//全转大写
var d=a.toUpperCase();//全传大写
console.log(d);
//截取字符串
var e=a.substring(1,3);// [1,3)
console.log(e);
}
//2.Array的功能
function b(){
//创建数组
var a=new Array(3,2,5,34,4,20); //var a=[3,2,5,34,4,20];
console.log(a);
var b=a.toString();//将a数组变为字符串
console.log(b);
var c=a.sort();//对数组进行从小到大的顺序排序,以字典的顺序排序
console.log(c);//
}
//3.Math的功能
function m(){
console.log(Math.PI);//获取π的值
console.log(Math.random());//获取随机数(默认的范围)：0~1
console.log(Math.random()*10);//获取随机数：0~10
var x=Math.round(2.6); //四舍五入
console.log(x);
console.log(Math.round(Math.random()*100));//去一个随机整数
}
</script>
<button onclick="a();">单机触发string的功能</button>
<button onclick="b()">单机触发Array的功能</button>
<button onclick="m()">单机触发Math的功能</button>
//4.window
Window对象–代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代
window.onload() 在浏览器加载完整个html后立即执行!
window.alert("text") 提示信息会话框
window.confirm("text") 确认会话框
window.prompt("text") 键盘输入会话框
window.event 事件对象
window.document 文档对象
//5.document
Document对象–代表整个HTML文档，可用来访问页面中的所有元素
document.write() 动态向页面写入内容
document.getElementById(id) 获得指定id值的元素
document.getElementsByName(name) 获得指定Name值的元素
学会简单使用，后期被jQuery封装，在后期被Vue框架封装
<!-- 自定义对象 -->
<script>
//方式1：
// 1.声明对象
function Person(){}
//2.创建对象
var p = new Person();
console.log(p);
//3.1:创建或设置属性
p.name="Reimu";
console.log(p);
//3.2:设置方法
p.run=function(){
console.log("方法1");
}
function eat(){
console.log("设置函数2");
}
//4.1:获取属性
console.log(p.name);
//4.2:获取方法,调用函数
//run();报错，该方法没有定义
p.run(); //在对象里的函数需要先找到相对应的对象
eat(); //作用范围比较广，没有对象限制。
//练习创建Car对象完成相关的功能
//1.声明对象
function Car(){}
//2.创建对象
var car=new Car();
//3.设置属性和方法
car.name="小汽车";
car.price=54.43;
console.log(car);//输出设计好的属性
console.log(car.name);
console.log(car.price);
//方法
car.run=function(x){
return x*10;
}
var y=car.run(39);
console.log(y);//390
var y=car.run();//没有传入参数
console.log(y); //NaN,
console.log(car.run(39));//390
//方式2：
//语法：
// var 对象名={ key:value, key:value,……}
// var 对象名={ "k":"v", "k":"v",……}
//var 对象名={特征1,特征2，……}
var Car1={
//对象的属性
"name":"卡车",
"value1":"534",
//创建对象的函数或方法
"buy":function(){
console.log("练习对象方式2的方法或函数");
},
"run":function(){
//用this调用对象里的属性
console.log(this.name+this.value1);
}
}
console.log(Car1);
// console.log(Car1.name);
/*name="dsf";
console.log(name);*/
//buy();//不能直接使用
Car1.buy();
Car1.run();
</script>
12.DOM树结构
根据document对象获取html网页中的元素。
ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口
核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，
history浏览器历史信息，screen用户屏幕信息。
DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）
文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素
进行访问及增删改查操作。实际开发更多通过js操作DOM对象实现对html页面的操作，
BOM也用，比较少用。
--1.获取对象: window.document，window可以不写
--调用方法:
getElementById("元素的id的属性的值")--返回1个元素
getElementsByName("元素的name属性的值")--返回多个元素(用数组)
getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容
innerText属性---获取内部的内容
innerHTML和innerText的区别?前者可以解析HTML代码,后者不能
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试DMO</title>
<script>
function get(){
//1.获取id="ia"的元素的内容
//获取document对象,调用函数或方法
console.log("按照id获取元素的内容");
var x=document.getElementById("ia"); //获取整个的元素
console.log(x);
var y=x.innerHTML; //获取元素内部的内容
console.log(y);
//1.0.获取id="ib"的元素内容
var xb=document.getElementById("ib").innerHTML;
console.log(xb);
//1.1.修改id="ib"的元素内容
xb="修改1";
console.log(xb);
//1.2.修改id="ib"的元素内容
var xb=document.getElementById("ib").innerHTML="修改2";
console.log(xb);
//2. 获取class="ca"的元素的内容
console.log("按照class获取元素的内容");
var vca=document.getElementsByClassName("ca");
console.log(vca); //按照class获取到了数组
console.log(vca[0]);//获取整个的元素
var vcb=vca[0].innerHTML; //获取元素内部的内容
console.log(vcb);
//3.按照标签名获取元素的内容
console.log("按照标签名获取元素的内容");
var da=document.getElementsByTagName("span")[0].innerHTML;
console.log(da);
//3.1.修改span2的元素内容
var ds=document.getElementsByTagName("span")[1];
var ds1=ds.innerHTML="<h1>行级标记2</h1>";
var ds2=ds.innerText="<h1>行级标记2</h1>";
console.log(ds1+"\t"+ds2);
}
</script>
<script>
//document.getElementById("test1").innerHTML="段落。3"; //报错，未找到内容
window.onload=function(){
document.getElementById("test1").innerHTML="段落。1";
}
</script>
</head>
<body>
<button onclick="get();">按钮1</button>
<div id="ia">div1</div>
<div id="ib">div2</div>
<span class="ca">行级标记1</span>
<span class="ca">行级标记2</span>
<div id="test1">我的第一个段落。</div>
</body>
</html>
13.JSON
1.概述：是一种轻量级的数据交换格式。
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation),它是一种轻量级的数据交换格式。
它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发
方式（ajax异步请求，json返回）。
2.作用：JSON 是存储和交换文本信息的语法。规定了一种客户端和服务端进行数据交换的一种字符串格式。
当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何
JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON
转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，
无需复杂的解析和转译。
语法
JSON 数据：var a =' "firstName" : "Reimu" ' ；
JSON 对象：var a = '{ "firstName":"Reimu" , "lastName":"Marisa" }'；
JSON 数组：var a = '
[{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" }]';
JSON 嵌套：var a='[18,true,["a","b",{"name":"灵梦","hobbys":["money","睡觉"]}]]'
转换工具
使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串 和 原生 JavaScript 对象互转.
给服务器发送数据: 将JS对象转成JSON字符串 JSON.stringify(Js对象); //转换字符串
接受服务器的数据: JSON字符串转成JS对象 JSON.parse("json字符串"); //解析字符串
例子：
<script>
//1.创建json数据
var a='"name":"Reimu"';
console.log(a);
//求长度：
console.log(a.length);
//拼接字符串
console.log(a.concat("拼接字符串……"));
//数据json与js对象的区别
var as={
name:"Reimu"
}
console.log(as);
//2.创建json对象--为了方便操作字符串
var a1='{"name1":"Marisa","age1":"16"}';
console.log(a1);
console.log(a1.length);//求长度
console.log(a1.concat(202));
//js对象--为了方便的解析对象的属性即内容
var a1s={
name1:"Morils",
age1:17
}
console.log(a1s);
console.log(a1s.name1);//获取属性的值
//3.创建json数组
var a3='[{"name2":"Linxin","age2":"23"},{"name2":"YiD","age2":"453"}]';
console.log(a3);
console.log(a3.length);
console.log(a3.concat(303));
//截取字符串
//eg:解析a3里的每个属性值，
//方法：把json字符串转换为js对象，通过对象调用属性，
//利用js的内置对象JSON,把js与json互转，
// js对象-->字符串json：stringify
// 字符串json-->js对象：parse
console.log(JSON.parse(a1));
console.log(JSON.stringify(a1s));
//json--->js对象
var obj=JSON.parse(a3);
console.log(obj);
console.log(obj[0].name2);
console.log(obj[0].age2);
//js对象--->json字符串
var parson1={name:"Mouis",age:45};
var str1=JSON.stringify(parson1);
console.log(str1);
console.log(str1.length);
console.log(str1.substring(9,14));//截取Mouis字符串
</script>
14.ajax
定义：
AJAX (Asynchronous JavaScript And XML), AJAX 并非编程语言。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。
这意味着可以更新网页的部分，而不需要重新加载整个页面。
作用：更新局部页面。
所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。
这意味着可以更新网页的部分，而不需要重新加载整个页面。
<script>
function change(){
// 1. 创建xhr对象,用于同幕后服务器交换数据
var xhr = new XMLHttpRequest();
// 2. 定义当 readyState 属性发生变化时被调用的函数
xhr.onreadystatechange=function(){
//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
if(this.status==200 && this.readyState==4){
// document.getElementById("d1").innerHTML="hi ajax";
//5.以字符串返回响应数据,并展示
document.getElementById("d1").innerHTML=this.responseText;
} }
//3.规定请求的类型(请求方式,文件位置,异步)
xhr.open('get','1.json',true);
//xhr.open('get','http://localhost:8080/car/get',true);
//4.xhr将请求发送到服务器
xhr.send();
}
</script>
</head>
<body>
<!-- 点击时,使用ajax修改文字 -->
<div id='d1' onclick="change()">你好</div>
</body>
15.其他
1.显示当前日期：document.write(Date());
2.<div onclick="alert()">点击出现弹框1</div>
<div onclick="alert('含有内容的弹框') ">单击出现弹框2</div>
<div onmouseenter="alert('路过一个弹窗')">当鼠标在当前div内出现弹窗</div>
<div ondblclick="alert()">双击出现弹框4</div>
16.调试
console调试网页
Chrome：专业人用专业的工具，浏览器调试谷歌、火狐最佳，
使用F12打开调试窗口。也可以快捷键打开：ctrl+shift+i。
支持自动补全，提示下，按tab键补全
清除日志
Console控制台菜单
四.Vue
1.概念：是一个轻量级的前端框架，封装了HTML CSS JS的代码。
2.特点:
1, 是一个轻量级的 渐进式的框架, 其核心思想是数据驱动、组件化的前端开发，
可以按需配置，可以实现数据的动态更新。
2, 实现了数据驱动/双向绑定 和 组件化的思想(高内聚)。
3, vue框架可以避免了DOM的API，传统方式关注的是都像的document结构的api，而vue关注的是数据。
4, 遵循了MVVM设计模式,实现前端代码的松耦合,实现了页面和数据的分离。
特点：代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，
这是javascript、jquery、bootstrap等无法做到的
M是Model,是指数据
V是View,是指视图
VM是ViewModel,是指在指定视图里渲染指定数据，在内存中进行数据的渲染
3.Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。
与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。
可以只使用核心vue.js
可以只使用核心vue.js + components组件
可以只使用核心vue.js + components组件 + router路由
可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<!-- 1. 引入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2. 准备一个div，数据渲染区 ,{{ 插值表达式 }}-->
<div id="app">{{msg}}</div>
{{msg}} <!-- 不是挂在点，Vue不解析-->
<!-- 3. 创建Vue对象 -->
<script>
var a = {msg:"hello vue~"}
var com = { el:"#app" , /* 通过css选择器定位元素，挂载点*/
data:a }, /* 数据驱动，把数据加载到指定位置*/
var v = new Vue(com);
</script>
</body>
</html>
<!-- 1.引入vue.js来用vue框架的功能 -->
<script src="vue.js"></script>
<body>
<!-- 2.准备解析vue的数据,数据渲染区域-->
<div id="app">{{message}}</div> <!-- {{插入值的表达式}} -->
<!-- 3.准备所需的数据 -->
<script>
//3.2准备数据
var a={ message:"hello vue~" }
//3.1.创建Vue对象
new Vue({
//el是document对象的方法Element的缩写，挂载点，把数据挂载到指定的位置
el:'#app', //利用CSS的id选择，选中网页中的元素
//data是vue为了挂载点准备好的数据
data:a
});
</script>
<!-- 3.创建vue对象 -->
<script>
new Vue({
el:"#app",
// 定义函数返回对象data的3种写法
//方式1
// data:{name:"Reimu"}
//方式2:
//通过函数+设置返回值(返回js的对象)
/*data:function(){
return{
name:"Molis",
arr2:["ad","ap"],
person:{//返回对象
name:"二号",
age:20,
} } }
*/
//方式3:
//定义函数，es6的简写方法
data(){
return{
name:"Molis",
arr2:["ad","ap"],
person:{//返回对象
name:"二号",
age:20,
}
} }
})
</script>
4.基础语法：
<div id="app">
<p> 加法:{{2+3}} </p>
<p> 减法:{{2-3}} </p>
<p> 乘法:{{2*3}} </p>
<p> 除法:{{3/2}} </p>
<p> 取余:{{10%2}} </p>
<p> 三元表达式: {{age>10?'yes':'no'}}</p>
<p> 字符串操作: </p>
<p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}} </p>
</div>
<script>
new Vue({
el:"#app",
data:{
str:"hellovue~",
age:12
}
});
</script>
5.方法(methods)：
<div id="app">
<!-- vue的事件,使用v-on调用指定函数 -->
按钮1:<button onclick="alert(100)">点我</button>
按钮2:<button v-on:click="show()">点我</button>
<h2> vue调用无参函数：{{ show() }} </h2>
<h3> vue调用含参函数：{{ sysout(100) }} </h3>
</div>
<script>
new Vue({
el:"#app",
data:{
address:"北京",
name:"张三",
age:20,
person:{
name:"jack",
age:18,
salary:1100
},
hobby:["吃","喝","玩"],
url:"https://thwiki.cc/"
},
methods: { /* 必须在methods里,创建Vue函数 */
show:function(){
console.log('hello vue');
},
sysout: function(color){
console.log(color);
}
}
});
</script>
6.v-命令：
指令集
指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等。
1.双向绑定 v-model(核心):
双向绑定，改一方的数据，另一方也改变
v-model:双向绑定，指v和m的数据可以实时同步，即vue的 属性 和 页面输入框 之间进行绑定。
属性的值是指数据和哪个属性进行绑定，可以获取和设置属性的值
通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。
vue的设计思想：
MVVM是将"数据模型双向绑定"的思想作为核心，在View和Model之间没有联系，
通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，
因此View视图的数据的变化会同时修改Model数据源，而Model数据源数据的变化也
会立即反应到View视图上。
2.闪现 v-cloak
(解决插值表达式闪现的问题):
作用：在插值表达式未解析时，避免用户看到插值表达式，避免用户看到编写的代码。
实现在页面未渲染完成时先隐藏标签，渲染完成后在展示，这样就解决了闪烁问题。
步骤：
1.找到数据渲染区域的标签，添加v-cloak指令；<div id="app" v-cloak><div>
2.增加style标签，[v-cloak]属性选择器，设置先不展示display:none;
在头部标签中添加：<style> [v-cloak]{ display: none; } </style>
3. 解析标签 :
<h1>{{name}}</h1> <!-- <p>Tony</p> -->
<h1 v-text="name"></h1> <!-- <p>Tony</p> -->
<h1 v-html="name"></h1><!-- Tony -->
4.判断:
4.1:v-if指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素
用来判断,类似于java的if else if else,判断成立就显示不成立就不显示
<p v-if="person.salary>=2000">金领</p>
<p v-else-if="person.salary>=1000">白领</p>
<p v-else>屌丝</p>
4.2.v-show:和v-if一样也可以判断,只是条件不满足也会在页面加载,不显示而已.
v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的
v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；
v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有
更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在
运行时条件很少改变，则使用 v-if 较好。
5.循环 v-for
v-for 指令可以绑定数组的数据来渲染一个项目列表
<!-- 数组的遍历:类似于java里的foreach循环,o表示每次获取到的数据 -->
<p v-for="o in hobby">{{o}}</p>
<!-- o是数据,i是下标 -->
<p v-for="o,i in hobby">下标是:{{i}}---数据是:{{o}}</p>
<p v-for="(o,i) in hobby">下标是:{{i}}---数据是:{{o}}</p>
6.事件 v-on
给按钮提供点击事件
<button onclick='alert("按钮1")'>点击1</button><!-- html提供的一个特殊属性onclick -->
<button v-on:click="show()">单点击2</button>
<button v-on:dblclick="show1(64)">双击3</button>
<!-- 简化 -->
<button @click="add(1,2,3)">单机2.1</button>
<button @dblclick="dep(873,31)">双击3.1</button>
7.绑定 v-bind
当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理
全称: v-bind:href
简称： :href 冒号开头就说明后面跟的是变量
把url当成变量，去获取变量的值进行跳转
<a href="https://www.baidu.com/">百度1</a>
<a v-bind:href="url">百度2</a>
7.component组件
1.概述
扩展了HTML的元素,好处是: 提高了组件代码的复用性
使用步骤: 1,创建组件 2,使用组件(当做HTML标签)
1,分类: 全局组件 和 局部组件 : 作用域
全局组件语法: Vue.component(1,2)–1是标签名/组件名2是配置选项
局部组件语法:给Vue对象添加components属性
1.全局组件
// 3.1创建全局组件:1-->组件名称，2-->组件的内容(template:组件具体的内容);
需要先创建全局组件，后创建对象。
// Vue.component(1,2)
Vue.component("Person",{
template:"<h1>编号：001，姓名：jack</h1>"
})
// 3.2:使用组件，就像使用html标签一样
<div id="app"> <Person></Person> </div>
<div id="a"> <Person></Person> </div>
2.局部组件：只能在当前对象(指定的数据渲染区域)使用
components:{a:b}
a:组件名；
b(组件内容)：template："<p>需要用html的标签进行包裹</p>";
8.Vue路由
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.
最终获取服务器端的数据. 把互联网中网络的链路称之为路由。
VUE中的路由: 根据用户的请求URL地址,展现特定的
组件(页面)信息. (控制用户程序跳转过程)。
使用步骤：vue.js + vue-router.js引入网页中注意顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue路由</title>
<!-- 1.引入js文件 -->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区域，展示相关组件的功能 -->
<div id="app">
<!-- 3.4:点击不同的元素匹配不同的组件
<router-link>被html翻译为a标签
to被html翻译为a标签的href属性
-->
<router-link to="/home">主页</router-link>
<router-link to="/help">帮助</router-link>
<button><router-link to="/home">主页</router-link></button>
<!--3.5:路由出口，匹配成功在该处显示 -->
<router-view></router-view>
</div>
</body>
<!-- 3.创建vue对象 -->
<script>
// 定义全局组件
Vue.component("allcom",{
template:"<p>helle afd</p>"
})
// 3.3.定义组件
var home={
template:"<h1>我是主页……</h1>"
}
var help={
template:"<h1>我是帮助页面……</h1>"
}
//3.2创建vue路由的细则
//VueRouter表示vue路由的对象，routes属性用来描述细则
var router=new VueRouter({
//属性名:属性值
routes:[
//属性值-->细则1,细则2……
//细则-->路径:访问路径,组件:组件名称
{path:"/home",component:home},
{path:"/help",component:help}
]
})
new Vue({
el:"#app",
//3.1给对象设置路由功能:属性名:变量名,当k和v名字一致时可简写为router
router:router
})
</script>
</html>
9.Vue的Ajax
jax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax原理
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
1.常见post请求种类：
from表单提交----method="post" 同步：页面是否刷新
axios.post() 异步操作
axios
1.Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
2. 使用步骤: 要使用一个单独的js文件,注意导入顺序
<script src="vue.js"></script>
<script src="axios.min.js"></script>
3. 语法
1.axios.get("url地址信息","参数信息").then(res=>{
console.log(res.data);
})
2.axios.get("url地址","传递的数据")
.then(function (result){//回调函数
console.log(result)
})
10.vue拓展
1.npm 概念
npm（node package manager）：nodejs的包管理器，
用于node插件管理（包括安装、卸载、管理依赖等）。
npm 为你和你的团队打开了连接整个 JavaScript 世界的一扇大门。
它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，
包含超过 600000 个 包（package） （即，代码模块）。来
自各大洲的开源软件开发者使用 npm 互相分享和借鉴。
包的结构使您能够轻松跟踪依赖项和版本。
官网：
https://docs.npmjs.com/about-npm 英文官网
https://www.npmjs.cn/ 中文官网
2.配置npm
Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像
npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/
3.webpack 概念
Webpack是前端自动化构建工具，它基于nodejs实现，可以帮助我们实现资源的
合并、打包、压缩、混淆的诸多功能。可以快速构建一个Vue项目，
包括各类文件（assets资源、scripts脚本、images图片、styles样式）。
官网：
https://webpack.js.org/
4.vue-cli脚手架
作用:
vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，
它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli就是Vue的脚手架工具，和工地看到的脚手架一样，它帮助我们搭建基本的
开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，
热加载及代码部署等。
vue-cli是由Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。
它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了
batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，
保存时 lint 校验，以及生产环境可用的构建版本。
脚手架安装
vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，
也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）
npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟
npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必
vue –V #查看版本
where vue #vue安装在哪里
5.创建Vue项目 npm
前提安装好node.js；
1.创建一个文件夹，用来存放下载好的vue资源
2.在文件夹处，执行下载命令：
vue init webpack jt01 #此处项目名不能使用大写---可能比较慢,要等
基于vue.js的官方webpack模板：(乱码无需理会)
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端
需要发布的静态资源做相应的准备，比如资源的合并和打包。
4.启动项目 & 停止项目
cd jt01 # 进入项目目录
npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟。
5.测试访问
注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，
它会自动改变端口号，以其具体提示的端口信息为准。
6.HBuilderX管理Vue项目
HBuilderX是最新前端开发利器之一，全面支持Vue的开发，具有丰富的提示，
使用它打开：D:\workspace\vue\jt01目录（可自行定义自己的目录）
6.1.项目结构：
6.3.在vue项目中添加自定义组件
在src/components文件夹里创建组件
在sec/App.vue文件里注册组件
使用组件
在vue项目中创建路由
1.自定义组件t1
2.自定义路由router.js
3.修改app.vue使用路由
7.elementUI
网址：https://element.eleme.cn/
五.Servlet
1.概述
Servlet（Server Applet）是Java Servlet的简称，称为小服务程序或服务连接器，
用Java编写的服务器端程序，具有独立于平台和协议的特性，主要功能在于交互
式地浏览和生成数据，生成 动态Web内容。这个过程为：
1,客户端发送请求至服务器端
2,服务器将请求信息发送至 Servlet
3,Servlet 生成响应内容并将其传给服务器。响应内容动态生成，通常取决于客户端的请求
4,服务器将响应返回给客户端
Servlet 看起来像是通常的 Java 程序。Servlet 需要导入特定的属于 Java Servlet API 的包。
2.准备工作
在IDEA里创建一个web工程
File-New-Project-选Java Enterprise并勾选右侧的Web Application-next-输入工程名称-Finish
3.配置web.xml文件
在Servlet3.0版本中,被@WebServlet注解代替,如:@WebServlet("/myservlet")括号中,就可以规定访问方式。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!-- 配置servlet类的访问信息，使用定义好的标签 -->
<servlet>
<!-- 给servlet设置一个名字，一般和类名相同，但是名字一定要唯一 -->
<servlet-name>Servlet102</servlet-name>
<!-- 指定servlet类的全路径-->
<servlet-class>com.web.Servlet102</servlet-class>
</servlet>
<!-- 指定浏览器的访问规则-->
<servlet-mapping>
<!-- 根据指定的名字，去找到一个要被访问的servlet类-->
<servlet-name>Servlet102</servlet-name>
<!-- 指定了浏览器的访问方式-->
<url-pattern>/a/s/d</url-pattern>
</servlet-mapping>
<!--配置访问信息-->
<servlet>
<servlet-name>conwj1</servlet-name>
<servlet-class>com.web.SerTest1</servlet-class>
</servlet>
<!-- 配置访问细则-->
<servlet-mapping>
<servlet-name>conwj1</servlet-name>
<url-pattern>/conwj1</url-pattern>
</servlet-mapping>
<!-- 1.配置访问信息-->
<servlet>
<servlet-name>ServletDemo3</servlet-name>
<servlet-class>com.web.ServletDemo3</servlet-class>
</servlet>
<!-- 2.配置访问细则-->
<servlet-mapping>
<servlet-name>ServletDemo3</servlet-name>
<url-pattern>/ServletDemo3</url-pattern>
</servlet-mapping>
</web-app>
4.servlet的生命周期
分为三大阶段
1.初始化--由servlet主动调用init()
2.提供服务--由servlet主动调用service()/doGet/doPost();
3.销毁--由servlet主动调用destroy()
测试方法
1.创建serlvet程序，使用注解开发方法方式
2.测试
package com.web.requset;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ServletTest6")
public class ServletTest6 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//doGet(request,response);
String method=request.getMethod();//验证请求方式
System.out.println("----解决中文乱码-----");
request.setCharacterEncoding("utf-8");
String user2= request.getParameter("user");
System.out.println(user2+method);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String method=request.getMethod();//验证请求方式
String user1 = request.getParameter("user");
String pwd1 = request.getParameter("pwd");
System.out.println("用户名："+user1+"\n密码："+pwd1+method);
}
}
5.Request
1.概述
是指从前端浏览器 到 后端的Servlet程序 的访问过程,叫请求的过程
可以使用Servlet提供的Request对象,来解析请求中的请求参数。
2.常用方法
getParamter()--按照参数名获取参数值,但是只得到一个值
getParamterValues()--按照参数名获取参数值,但是得到多个值,存入数组
setCharacterEncoding()--如果请求参数中有中文,设置字符集为utf-8
setAttribute()--设置属性
getAttribute()--获取属性
3.当用户以get方式提交数据时,Servlet会自动调用doGet()
get方式提交的数据,可以一个一个的解析getParameter()
也可以解析多个值getParameterValues()
如果使用的是Tomcat7.0以上的版本,get方式提交中文数据不会乱码
1.Servlet什么时候会自动调用doPost()?什么时候会自动调用doGet()?
Servlet会调用getMethod()来获取用户的访问方式,如果是POST会调用doPost()
Servlet会调用getMethod()来获取用户的访问方式,如果是GET会调用doGet()
2:中文乱码问题?
get方式提交数据没有乱码问题,Tomcat已经配置好了(URIEncoding="utf-8"),不必关心
post方式提交的数据如果有中文一定乱码,request.setCharacterEncoding("utf-8");
处理post方式提交的数据--如果请求参数包含中,一定乱码。
6.请求转发
1.概述
作用是想让AServlet调用BServlet的功能.
过程: 浏览器访问AServlet ,但是AServlet偷偷调用了BServlet ,此时浏览器的地址栏没变
全程只是一次请求
实现:request.getRequsetDispather(访问BServlet的方式).forward(request,response)
实现请求转发:想让AServlet调用BServlet,本质上这是服务器的动作,浏览器没变化发现不了
//要求:两个资源可以互相调用,但是要求两个资源必须在同一项目中
//getRequestDispatcher()的参数是,对方的访问方式
//请求转发本质上就是一次请求:在AServlet添加请求的数据,试试BServlet也能获取到就可以了
//获取在AServlet中存入的数据,其实就是根据key获取value
7.响应Response
1.概述
是指 从java程序组织好的数据 发送给 前端浏览器 的过程,叫响应
2.常用方法
1.getwriter()---给浏览器响应数据
2.setContentType()---用来解决防止响应时的中文乱码
3.senRedirect()--重定向：
特点:
1.整个过程有 两个请求 两个响应
2.地址栏会发生改变
使用: response.sendRedirect(对方的访问方式)
此时,你想访问哪个程序都可以
8.模拟原码Servlet解析请求参数getParamter()：
public String getParamter(String keyword){
String url="http://localhost:8080/ServletDemo6?user=Reimu&pwd=123" ;
/*方式1*/
// 1,按照?切割字符串,切出来两部分,存入数组
//[http://localhost:8080/ServletDemo6,user=Reimu&pwd=123]
String[] strs = url.split("\\?");//转义
// 2,重点解析数组中的第二个元素,下标为1的元素
String datas = strs[1];//user=Reimu&pwd=123
// 3,把第二步的结果,按照&切割
//[user=Reimu,pwd=123]
String[] data = datas.split("&");
// 4,遍历数组,获取每个数据
for(String s : data){//遍历两次,第一次s是user=Reimu,第二次s是pwd=123
// 5,按照=切割,得到数组 [user,jack],只要第二个元素
// String params = s.split("=")[1];//和下面两行等效,只是简写形式
String[] ss = s.split("=");
String params = ss[1];
System.out.println(params);
}
/*方式2*/
String[] data = url.split("\\?")[1].split("&");
//Map存数据有特性,数据必须以键值对的形式存在,可以根据key找value
Map<String,String> map = new HashMap<>();
// 遍历数组,获取每个数据
for(String s : data){//遍历两次,第一次s是user=Reimu,第二次s是pwd=123
// 按照=切割,得到数组 [user,jack],只要第二个元素
String[] ss = s.split("=");
String value = ss[1];
String key = ss[0];
map.put(key,value);//存入map
}
return map.get(keyword);//去map里找key对应的value
}
9. 过滤器(收费站)：
用来过滤请求或响应
当A请求B时，可以在中间添加一个guolvq
当A给B做出响应时，可以在中间添加一个过滤器。
可以有4种配置方式:
1,具体文件: /index.jsp ,是指只有访问index.jsp这一个资源时,过滤器会被执行
2,匹配前缀: /user/* ,是指访问user下的所有资源时,过滤器会被执行
3,匹配后缀: * .jsp, 是指访问所有后缀名为jsp的文件时,过滤器会被执行
4,匹配所有: /* ,是指访问所有资源时,过滤器会被执行
FilterChain过滤器链
执行顺序:
有多个过滤器配置时,依次按照:
过滤器1
过滤器2
执行资源
过滤器2
过滤器1
过滤器的先后顺序
注解配置: 哪个过滤器将会先被执行,会按照类名的字符串比较规则,
较小的先执行.如: AFilter先于BFilter执行,Filter3先于Filter4执行
web.xml配置: 依次按照的顺序执行,谁在上面就先执行谁
package com.web.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;
//创建过滤器：implements Filter+重写抽象方法
//1.拦截所有请求，只要访问这个项目里的资源,全都拦截,不放行就阻塞
//@WebFilter("/*")
//2.拦截请求，必须访问/Servleta，才拦截
//@WebFilter("/Servleta")
//3.匹配前缀
//@WebFilter("/user/*")
//4.过滤器链
@WebFilter({"/Servleta", "/user/*"})
public class Filtertest1 implements Filter {
//销毁，执行1次
public void destroy() {
System.out.println("释放过滤器...");
}
//可以被执行多次
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
System.out.println("过滤器拦截...");
//chain.doFilter(req, resp);//放行，解除阻塞状态
}
// 初始化，执行一次
public void init(FilterConfig config) throws ServletException {
System.out.println("创建过滤器...");
}
}
6.报错
400异常：参数类型不匹配
404异常：找不到网页
3889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
