本周内容

1.前端三剑客:Html,CSS,JS

1.1 前端Html

<!DOCTYPE html>
<html><!-- 根标签 --><!-- html:超文本标记语言针对字体,图片,音频,视频等待设置他们对应的字体大小,颜色,图片的宽度和高度..等等都可以进行操作!--><head><!-- 头标签 --><!-- meta标签 当前字符集格式 --><meta charset="utf-8" /><!-- 浏览器中显示的窗口标题 --><title>html入门</title></head><body><!-- 主体部分 --><img src="img/高圆圆.jpg" width="200px" height="400px" /><br/><font color="red" size="7">hello</font>      </body>
</html>
1.1.1 常用的html标签(Hyper Text Markup Language:超文本标记语言)
注释:!     <!+内容>
超文本标记语言:针对字体,图片,视频等都可以设置他们对应的字体大小,颜色,图片的宽度和高度等,都可以进行操作!
文本标签:1)标题标签h1   <h1>---内容----</h1>,而且从大到小,多级标题2)段落标签    p   <p>---内容---</p>3)换行标签 br    <br>---内容---</br>
滚动标签marquee:具有很多属性behivor(滚动方式):来回滚动alternate 滚动到某一边停止slide 穿插滚动 scrolldirection:滚动方向:  left(默认),   right,up,down;scrollamount:滚动速度bgcolor:背景色
列表标签无序列表ul 和列表项li,属性type是列表项前面的标记值,默认值是disc,是一个实心圆点有序列表ol 和 列表项li属性type是列表项前面的标记值,默认值是1,从1开始
pre标签:原样输出
块标签div:一般将元素包起来+css样式(盒子模型)---简单的层级布局div特点:占一行内容,自动换行
水平线标签  <hr/>
行内标签span:没有任何效果span标签应用场景:结合js里面"原生方式表单接单",在表单后面计入span标签,动态提示"用户信息是否满足正则表达式"
上下标标签上标sup下标sub
居中标签 center
创建跳转标签:<a></a>
图像标签img常见的属性:width/height:指定px(像素单位)或者百分比(根据屏幕的分辨率)alt:替代文本,当图片失效的时候,用文字描述一下src:加载图片资源地址(本地/远程加载:七牛云);相对路径:同一个目录的文件引用,../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。   例如同级目录中<a href = "index.HTML">index.HTML</a> 绝对路径:指带域名的文件的完整路径:就是完整的路径名称:http://www.divcss5.com/html/h50280.shtmltitle:鼠标悬浮在图片上的文字提示
超链接标签相关属性href:加载url统一字符定位符(必须携带协议)url的组成规则:协议:域名或者ip地址/具体的路径协议有http协议,file协议,thunder协议等等target:打开资源文件的方式_self:当前窗口直接打开(默认)_blank:新建一个窗口打开超链接的使用场景:1)普通作用,俩街道href指定地址--后台地址/本地其他地址2)作为"锚连接"使用A.在同一个html页面中使用第一步:打一个锚点(跳转标记)<a name=指定锚点名称></a>----标记地点第二步:创建跳转连接<a href="#锚点名称">跳转...></a>B.在不同html页面中使用第一步:在另一个页面的某个位置打一个猫点(跳转标记) <a name="指定锚点名称"></a>第二步:在当前页面中创建跳转连接   <a href="连接到指定的页面路径+#锚点名称">跳转...</a>
1.1.2 表格标签table
子标签:caption:表格标题标签tr:行标签th:表格中表头元素,特殊单元格,自动加粗,自动居中td:单元格(理解为列)
table的属性: border:边框大小()(像素)width/height:宽高,指定像素或者百分比align:表格在浏览器对齐方式   left(默认),center,rightcellspacing:通过table属性: 设置单元格和边框之间间隔cellpadding 属性规定单元边沿与其内容之间的空白(内边距)
针对单元格的操作:   1)合并行rowspan="所占格子的数量"  默认向下合并2)合并列colspan="所占格子的数量"  默认向右合并

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html语句</title><a name="top"></a><a href="#foot">跳转底部</a></head><body><h1>常用的html标签</h1><!-- 标题标签 --><h2>文本标签</h2><p>Java是一门面向对象编程语言<!-- 换行标签 -->还摒弃了C++里难以理解的多继承、指针等概念</p><p>java的特点:简单,面向对象</p><p>Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点.Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等</p>欢迎学习java <br/><!-- 换行标签 -->今天学习java的历史<br/><ul type="square"><li>封装</li><li>继承</li><li>多态</li><br><!-- 无序列表 --><ol type="1"><li>private</li><li>extend</li><li>implement</li><!-- 有序列表 --><div>登录</div><div>注册</div><!-- 块标签 --><span>父类引用指向子类对象</span><br/><!-- 行内标签 -->X<sup>2</sup><br/><!-- 上下标标签 -->H<sub>2</sub>O<br><img src="img/java之父.jfif" width="300px" height="300px" alt="当前图片表示的是java之父"title="詹姆斯 高斯林"></br><!-- 这是图像标签 --><!-- 超链接标签 --><a name="foot"></a><a href="http://www.baidu.com">跳转顶部</a><marquee behavior="alternate" direction="right"scrollamount="15" bgcolor="aqua" > 加油,奥利给</marquee><!-- 滚动标签 --><table border="1" cellspacing="0" align="center" > //表格标签<caption>学生表</caption><tr><th align="center">姓名</th><th>学号</th><th align="center">成绩</th></tr><tr><td>付新刚</td><td>110</td><td align="center" colspan="3">A</td></tr><tr><td>王东磊</td><td>120</td><td rowspan="2">A</td></tr><tr><td>刘宝寿</td><td>119</td><td>A</td></tr></table></body>
</html>
1.1.3 表单标签form
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件:包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
表单域:他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
属性1)action:提交到地址url(本地地址或者远程服务地址/本地静态页面)2)method:表单提交方式1）get方式2）post方式注意:表单标签的所有表单项都需要实现name属性
应用场景:在应用于登录,注册,搜索功能时使用表单标签
面试题:get和post的区别:
（post请求需要服务器的支持，get可以不需要）
1.get请求时参数会提交到地址栏上，而post请求不会（post请求会将数据存放在请求体中）
2.get请求相对于post而言，不那么安全
3.get请求传递的数据长度是有限的，而post请求基本没有限制（长度与服务器有关）
4.get请求比post请求快（大概是2倍左右）
5.get请求有缓存（会将数据存放在游览器中，即本地磁盘中），而post请求无缓存
1.1.3.1 input(表单项标签)的type属性值系列
场景:在网页中显示手机用户信息的表单信息,如登录注册页面
&nbsp;------空格
&ensp:-----两个空格
input可以通过type属性值的不同,展现不同效果
type属性值
<input type="text"> 定义供文本输入的单行输入字段文本框属性:placeholder:占位符,提示输入内容的文本
<input type="password"> 定义密码字段
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
<input type="radio"> 定义单选按钮。name属性:分组,有相同name属性值的单选框为一组,一组中只有一个被选中checked:默认选中,在特定的单选后跟上checked就可以了
<input type="checkbox"> 定义多选框。
<input type="button"> 定义按钮。submit:提交之后,点击之后提交数据给后台服务器reset:重置按钮,点击之后恢复表单默认值button:普通按钮,默认无功能,之后配合js添加功能
<input type="number"> 用于应该包含数字值的输入字段。
<input type="file"> 用于上传文件 multple:上传多个文件,在file后面跟上就可以了
<input type = "hidden">隐藏域(没有明显效果显示,但是会携带参数)
<input type="date"> 日期组件
1.3.1.2常用的限制
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength   规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly    规定输入字段为只读（无法修改）。
required    规定输入字段是必需的（必需填写）。
size    规定输入字段的宽度（以字符计）。
step    规定输入字段的合法数字间隔。
value   规定输入字段的默认值。
1.1.4button标签(提交,同input的按钮系列)
<button type="button"> 定义按钮。submit:提交之后,点击之后提交数据给后台服务器reset:重置按钮,点击之后恢复表单默认值button:普通按钮,默认无功能,之后配合js添加功能
1.1.5 select标签(下拉列表)
select:代表下拉菜单的整体
option:下拉菜单的每一项selectd:默认选中的(在特定下拉项前面加)<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select>
1.1.6 文本域标签textarea(多行文本框)
应用场景:在网页中提供可输入多行文本的表单控件(多行文本框)
属性:cols:规定了文本域内可见宽度rows:规定了文本域内课件行数(高度)
注意:左下角可以拖拽改变大小2)实际开发中,针对样式效果推荐使用css设置
1.1.7 lable标签
场景:常用于绑定内容与表单标签的关系
使用方法(一):1)使用lable标签吧内容(如文本)包裹起来2)在表单标签上加上id属性3)在lable标签的for属性中设置对应的id值
推荐使用:使用方法(二):1)直接使用lable标签把表单标签一起来包裹起来2)需要吧lable标签的for属性删除即可

1.1.8 框架标签frameset frame

当多个html页面组成整个结构,需要使用frameset(框架集标签),不能与body共存,直接写在body前面
frame :将src下的块标签加载在指定的页面位置中
先执行<frameset rows="由上而下划分的每一个部分所占整个部分的权重百分比>
<frameset cols= 从左往右划分的每一个部分所占整个部分的权重百分比 >
超链接target:如果单独使用,就是打开方式,新建窗口/当前窗口直接打开,而如果和框架标签使用,target如果指定的是frame的名称,那么超链接在指定的frame中打开
属性:name:给某个部分起名字

1.2 引入CCS入门(Cascading style sheet层叠样式表)

书写的样式一定是样式库中的样式
使用方式:三种方式
方式(1):行内样式在每一个标签中都有style属性="样式属性名称1:属性值1;样式属性名称2:属性值2"(一般不使用)弊端:1)一次只能控制一个标签2)样式代码和html代码混合一起使用
方式(2):内联样式(内部样式)可以通过某种选择器,将制定的标签全部选中,在head标签体中加入style标签选择器类型{样式名称1:属性值1;样式名称2:属性值2}弊端:比第一种方式好一点,实际开发中,不利用维护
方式(3)外联方式单独创建一个独立的css文件,放在css文件夹中,在某个html页面中<link href="引入外部的文件" rel="stylesheet">(rel固定属性:关联层叠样式表)
1.2.1 CSS选择器–控制标签
优先级:id>class>标签
在head中书写style标签,选择器都在style中书写
(1)id选择器:同一个html页面中,id属性值必须唯一!如果id重复了,后面去通过javascript document对象.getelementbyid("id属性值");通过id属性值获取标签对象格式:#id属性值{样式属性:属性值;}好处:在不同的浏览器上,在html页面加入id属性值(唯一的),保证浏览器的运行的兼容性!
(2)class选择器:同一个html页面中,标签中可以存在相同的class属性值格式:    .class属性值{样式属性:属性值}
(3)标签选择器格式:标签名称{样式属性:属性值;...}
(4)交集选择器(子元素选择器)格式:选择器选中的标签,选择器2选中的标签{  //选择器2选中的标签是选择器1选中的标签的子标签属性名称:属性值;}
(5)通用选择器格式:*{属性名称:属性值;}
(6)伪类选择器:描述一个标签状态link"鼠标还没有访问的状态hover:鼠标经过状态active:鼠标激活状态(点击,但是没有松开状态)visited:鼠标访问过的状态(点击后,松开了)格式:选择器L状态名称{样式属性名称:属性值}
如果想出现循环效果:hover必须在link和visited之后
antive必须在hover之后
(7)并集选择器格式: 选择器选中的标签,选择器2选中的标签{//将选择器1选中的标签和选择器2选中的标签,同时选中,加入样式修饰属性名称:属性值;}
1.2.1 常见的CSS属性样式
(1)文本样式text-align: center------文本对齐方式text-decoration(设置或者文本修饰): underline添加下划线line-through:中划线overline:上划线none:不加任何修饰letter-spacing:字符之间的间距word-spacing:单词间的间距
(2)边框属性solide:单实线  dashed:虚线 dotted:点  dobble:双实现boder-collapse:collapse:合并边框border-top(上下左右)-color:边框的颜色(要想实现边框的颜色,必须实现边框的宽度和边框的类型)border-top-style:solide:边框类型边框的颜色/宽度/样式的简写格式:border-color/border-width/border-style特点:1)有默认的方向  上右下左(顺时针)2)某一边没有设置颜色,宽度,类型,默认补齐对边边框的简写格式:border:border-width border-style border-color#id1{border: #0000FF solid 1px;width: 200px;}
(3)浮动和清除(重点)
float 方向:规定方向浮动
清除浮动:clearboth:两边都不浮动left:让左边不浮动right:让右边不浮动
(4)字体样式fontfont-family:字体类型--一定是字体库中的类型--楷体,宋体等font-size:字体大小font-style:字体类型(normal:正常  italic:斜体)font-weight:字体粗细(bold:适当加粗)
字体的简写格式(一定顺序,不能更改)font:font-style font-weight font-size font-family;(斜体 加粗 大小 类型)color-------字体颜色
(5)背景属性background-color: bisque-----背景颜色background-image:背景图片background-repeat:设置图片重复以及如何重复repeat(x和y都重复)
上:top 下:buttom  左:left  右:right 中 center
1.2.3 css盒子模型
使用方法:将任何的标签用块标签包裹起来+css选择器
盒子模型:"万物皆盒子",使用快标签
盒子属性:border:边框(盒子的厚度)padding:内边距(默认方向:顺时针)width和height:盒子的容量大小margin:盒子的外边距(盒子和盒子之间的距离)(默认方向:顺时针)盒子模型的宗旨:将任意标签使用div包起来,通过选择器控制标签的样式-->div+css:层级布局
1.2.4 css定位属性
position:absolute:绝对定位(相对父标签移动-浏览器边框)relative:相对定位(相对原来的位置进行移动)fixed:固定定位(不会随着浏览器的滚动条的滚动而滚动)
top:将整个元素向下移动
left:将整个元素向右移动

2.javascruipt入门(重点)

2.1 js基本数据类型

DOM:基于文档对象模型编程,浏览器在解析html页面的时候,将每一个标签封装成对象(标签对象),或者成为"节点对象/元素对象",形成一种"树结构"
DOM编程的核心思想:1)就是通过一些方式获取"标签对象"2)使用标签对象访问标签的属性--通过对象.属性来改变属性
2.1.1 使用方式
a)内部方式在head标签体中或者body下面都可以写:<script>
b)外部方式
2.1.2 js语法
(1)如何定义变量?1)可以使用var定义,var可以省略不写2)js是一门弱类型语言,可以重复定义变量,后面的会把前面的覆盖掉
(2)查看数据类型的函数:typeof(变量名);
(3)常见的基本数据类型划分:整数类型:无论是整数还是小数,都是number--默认提升为js的内置对象Number字符串类型类型:无论是字符串还是字符,都是string----自动提升为String布尔类型:true/flase---默认提升为Boolean对象类型:object----js内置Object(代表所有js的对象)未定义类型:undefined-----没有意义
(4)js运算符var true = 1; var var flase = 0算术运算符 + - * / %赋值运算符 =比较运算符 > <  <= >= ==逻辑运算符 & | && ||三元运算符 (表达式)?true的结果:flase的结果
(5)流程控制语句和java不一样的地方case语句里边不仅可以是常量,也可以是变量,而java中只能是常量(6)for in 语句类似于增强forfor(var x in 对象名){输出语句}
2.1.3 js中常见的函数以及属性
window对象alert("消息内容"):弹出一个提示框
window对象:顶级对象,调用频繁,可以省略不写
console对象:是控制对象console.log(输出内容):控制台打印
通过js脚本向浏览器输出内容:document.write("内容")
innerText:给标签设置普通文本内容,不能渲染,除去了HTML标签
innerHTML:给标签设置HTML内容,可以渲染,从对象的起始位置到结尾位置,包括HTML标签;
parseInt():转换String为number类型
(2)通过标签的id值获取标签对象并给标签设置本文内容//第一步:通过id获取标签对象标签名=document.getElementById("标签id");//第二步:通过标签对象设置HTML文本标签名.innerHTML="内容"
(3)事件属性click---点击事件:onclick();标签上绑定时间:onclick("函数")
(4)Style属性中的显示和隐藏函数display():显示:block;---标签对象.style="block";隐藏:none;----标签对象.style="none";
2.1.4 js中的函数(重点)
如何定义函数funtion 函数名(参数名称列表){语句体中可以直接输出/return 结果}
如何调用函数1)如果有返回值,赋值调用2)如果无返回值,单独调用    函数名称(实际参数列表);
如何自定义对象
注意:(1)定义函数的时候,形式参数直接写参数名称,不能带var(2)定义函数的时候不需要书写返回值类型,语句中可以出现return(3)js中不存在函数重载的概念,后面定义的重名的方法会把前面的方法覆盖掉(4)当实际参数列表个数小于形式参数列表,函数依然可以被调用,结果为空NAN;实参个数大于形参个数时,按照顺序取参,多余的实参不参与运算;(5)js的函数存在默认数组arguments
2.1.5 js事件编程(DOM操作)
事件三要素:
1)事件源:标签-常见的html标签 document.getElementById("方法名")
2)编写事件监听器---就是定义函数
3)绑定事件监听器---定义的函数绑定到事件源--onXXX
常见的事件编程的分类单击事件 click双击事件 dblclick鼠标获取焦点事件 focus鼠标失去焦点事件 blur选项卡发生变化的事件(select标签居多) change鼠标经过事件(经过某个div/某个元素) mouseover---window对象中的方法open():打开另一个页面open("url","_blank/_self":打开方式)鼠标移出事件   mouseout页面载入事件      load事件:一般用在body当body的所有内容加载完毕触发这个事件表单提交事件 submit:当绑定函数返回值是true,能够提交,返回值flase,不能提交;
2.1.6 js如何自定义一个对象?
(1)定义对象--语法格式和函数定义一样function 对象名(参数列表){给属性赋值;添加功能(this.方法名=function 方法名(){})}
(2)创建对象 有参构造 var 对象名称=new 函数(实际参数)无参构造 var 对象名称=new 函数();通过类名创建 var 对象名称=new object();第四种方式 利用字面值的方式---json格式:通过"key":value(键值对)的方式创建对象,能够描述一个对象或者数组的格式,数组的访问形式:对象名[角标].属性key:value 一系列键值对象组成的一种格式;例如:var p = {"属性":"属性值";"方法名":function(){}}//创建数组对象var students = [{属性1:属性值1,属性2:属性值2,...}{属性1:属性值1,属性2:属性值2,...}]
2.1.7 js的内置对象
String内置对象
Array内置对象
Date内置对象(1):创建date的JS内置对象 var date = new Date();(2)调用Date的方法获取年月日时分秒年:getfullyear月:getmonth(表示0-11的整数)+1;日:getdata();时:gethours();分:getminutes()秒:getsecond()重复执行 setInteval(定时任务(),时间毫秒值) ; ,每经过毫秒值,重复执行定时任务//执行一次  setTimeout(定时任务(),时间毫秒值) ; 经过毫秒值后,执行一次任务
2.1.7.1 网页时钟
function  genderteTime(){//0)创建日期对象var date = new Date() ;//1)首先需要获取当前日期+时间,拼接成字符串var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&ensp;&ensp;"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() //2)把时间字符串dataStr---放在span标签中,作为它的文本内容//DOM操作//获取id="spanTip"的标签对象 span标签对象var span = document.getElementById("spanTip") ;//alert(span) ;//设置标签的innerHTML属性span.innerHTML = "<h3>"+dateStr+"</h3>" ;}//定时器://widow对象的功能,window可以不写 window.setInterval("genderteTime()",1000) ;
2.1.8 js正则表达式(js的内置的一种对象)
一般应用在表单上,登录/注册的时候前台通过js进行校验,是否满足正则规则!使用原生js写法完成js的表单校验!
2.1.9 DOM操作
DOM核心:(创建)获取标签对象,使用标签对象改变它的属性,达到某种效果;
2.获取标签对象的三种方法(1)通过document集合属性获取标签对象(2)通过节点的默认属性名称获取
2.1.9.1 DOM操作–获取标签对象的方式一
通过节点的默认属性名称获取
内置属性:
1)parentNode:父节点
2)childNodes:所有的子节点
3)firstChild:第一个子节点
4)lastChild:最后一个子节点
5)previousSibing:上一个兄弟节点
6)nextSibling:下一个兄弟节点
2.1.9.2 DOM操作–通过document的方法获取
通过标签的id值获取标签对象并给标签设置本文内容
1)第一步:通过id获取标签对象标签对象名=document.getElementById("标签id");
2)通过class属性获取标签对象名=document.getElementsByClassName("同名的class属性值"[角标值].value)
3)document.getElementsByTaName("同名的标签名称"[角标值].value)
4)document.getElementsByName("同名的name名称"[角标值].value)
2.1.9.3 DOM操作–通过集合属性获取(了解)
1)all:获取html文档中所有的标签对象
2)links:一般a标签的对象
3)forms:表单标签对象
4)images:img标签对象
2.1.10 js的String对象特有方法
object.valueof():返回值是对象的本身数据值
charAt(index):返回指定索引处的字符
concat(String str):拼接功能
fontcolor("颜色单词"):修改字符颜色
sunstr(startindex,length):从指定位置截取指定数量的字符
substring(start,end):截取从指定位置到指定位置的字符
spit("分割符号"):以指定符号将字符串分割成数组
2.1.11 js内置对象Array相关的特有方法
注意:数组在js中没有角标越界,元素类型不限
数组的创建1)var 数组对象名= new Array(3);2)var 数组对象名 = new Array[size];3)var 数组对象名 = [元素1,元素2,...
join(separator):按照指定的分隔符,拼接成字符串
2.1.12 js的正则表达式
正则表达式的场景:在用户注册/登录的时候输入数据,限定用户的一种规则!
语法:通过下面的常见语法组装皮来--使用变量接受,这就是正则对象
1.数量词1)X+:X字符出现一次或者多次2)X?:X字符出现0次或者1次3)X*:X字符出现0次或者多次
2.匹配范围1)x{n,}:X字符至少出现n次2)x{n,m}表示X字符至少出现n次,但是不能超过M次3)x{n}:X字符恰好出现一次4)\d:匹配的是数字,相当于[0,9]5)\w:等价于[A-Za-z0-9_]
3.边界匹配符号1)^:以xxx字符开头2)$:以xxx字符结尾
4.特殊转义字符1)\:表示转义,将浏览器不能识别的字符转义为能识别的状态,例如\^;
方法:正则表达式内置的方法test(输入的字符串),如果匹配,则返回true,不匹配,返回false;
如果完成完全匹配,必须加上边界匹配符号!例如:/^[o-9]{2}$/
2.1.13 原生js的表单校验
正则表达式的test()方法:返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。rgexp.test(str);--返回值boolean,指出查找的字符串是否存在模式(是否满足正则表达式)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js表单校验</title></head><body><form action="service.html" method="post" onsubmit="return checksubmit()">用户名:<input type="text" id="username" placeholder="请您输入用户名" onblur="checkusername()" /> <span id="usertip"></span><br>密&ensp;&ensp;码: <input type="password"  id="password" placeholder="请您输入密码" onblur="checkpassword()" /><span id="passwordtip"></span><br>确认密码: <input type="text"  id="repassword" placeholder="两次密码需保持一致" onblur="checkrepassword()"/><span id="repasswordtip"></span><br><input type="submit"  id="submit" value="提交" /></form>   </body><script type="text/javascript">function checksubmit(){if(checkusername() && checkpassword() && checkrepassword()){return true;}else{return flase;}}function checkusername(){//1)获取用户名的内容, 通过dom操作:获取标签对象并获取内容var name = document.getElementById("username").value;//2)获取id="userTip"的span标签对象 :var usertip = document.getElementById("usertip");//3)定义用户名的正则规则:6-16位的数字或者字母组成var regex = //^[A-Za-z0-9_]{6,16}$/  ;//4)校验usernameif(regex.test(name)){//如果符合正则表达式,设置span标签的文本内容usertip.innerHTML="输入符合规范".fontcolor("green");return true;}else{//如果不符合正则表达式,设置span标签的文本内容usertip.innerHTML="格式错误".fontcolor("red");return flase;}     }function checkpassword(){var password = document.getElementById("password").value;var passwordtip = document.getElementById("passwordtip");var regex = /^[A-Za-z0-9_]{6,16}$/ ;if(regex.test(password)){passwordtip.innerHTML= "<strong>数据合规</strong>".fontcolor("green");return true;}else{passwordtip.innerHTML= "<strong>数据不合规</strong>".fontcolor("red");return flase;}}function checkrepassword(){var password = document.getElementById("password").value;repassword = document.getElementById("repassword").value;repasswordtip =  document.getElementById("repasswordtip");if(password == repassword){repasswordtip.innerHTML="密码一致".fontcolor("green");  return true;}else{repasswordtip.innerHTML="密码不一致".fontcolor("red");return flase;}}</script>
</html>

3.前后端交互–>Servlet(重点)–后期SpingMVC基础

Server Applet:全称是针对服务器端程序的开发/服务器连接器,主要是和前台进行交互的控制器,目的是:交互的浏览和生成数据!

3.1 Servlet的基本入门操作

1.操作步骤1)导包 tomcat里面自带的servet-api.jar,也可以下载servlet.jar包2)自定义类,继承自HttpServlet,至少重写doGet()或者doPost()方法3)配置servlet

3.2 如何配置Servlet

<!-- xml的配置方式&ndash;&gt;servlet的基本配置--><servlet>
<!--        一般情况下,name就是当前类的类名--><servlet-name>Servlet</servlet-name>
<!--        class就是当前类的字节码的文件的全限定名称--><servlet-class>com.test.Servlet</servlet-class></servlet>
<!--    servlet的映射配置(访问的路径)--><servlet-mapping>
<!--        name的名称必须和servlet基本配置的名称一致--><servlet-name>Servlet</servlet-name>
<!--&lt;!&ndash;这是访问的路径,必须以/开头,但是不能/结尾,/xxx精确配置->--><url-pattern>/first</url-pattern>

3.3servlet的执行原理

1.浏览器发送服务器请求(HttpServletRequest)
2.服务器tomcat接受请求
3.解析请求地址中的URI   -->项目名称_war_exploded/first;项目部署地址first(url-patern)3.1) web.xml在xml文件中找寻是否存在url-patern是first的统一资源定位3.2)解析url-patern中servlet-name的项目名称3.3)再通过映射配置中的servlet-name中的项目名称去servlet基本配置中找该映射配置中的项目名称3.4)找到该项目名称后,获取servlet-class中的全限定名称
4.通过反射区获取该类的字节码文件---Class clazz = Class.forName("全限定名称");
5.创建对象  Obgect obj = clazz.nerInstance();
6.获取成员方法的对象,调用成员方法Method m = obj.getDeclaredMethod("doGET",HttpServletRequest.class,HttpServletResponse.class);
7.取消语言访问机制m.setAssceSsiable();
8.m.invoke(obj,request,response);
9.响应浏览器,输出内容;

3.4 Servlet的生命周期

3.4 tomcat–apache的web应用服务器

web应用服务器(支持JavaEE规范的)  Apache组织机构
https://tomcat.apache.org/
http服务器:nginx 服务器(后期使用)
1)官网下载 tomcat版本 (tomcat8.0以上 针对get提交,自动解决中文乱码)
2)windows系统  xx.zipLinux系统    xx.tar.gz
3)解压后使用tomcat 启动tomcat服务器   可能闪屏---->没有使用JAVA_HOME系统变量   tomcat(使用Java语言编写的)在启动的时候,会寻找系统变量中是否存在JAVA_HOME 如果已经配置了JAVA_HOME,还出现闪屏  在系统变量配置 JRE_HOME    本地启动 进入bin目录---startup.bat---->日志有乱码 在tomcat的conf目录中logging.properties 日志记录配置文件中修改字符集    启动成功:   25-Feb-2022 16:11:48.773 信息 [main] org.apache.catalina.startup.Catalina.start Server startup in 2076 ms             访问tomcat是否启动成功:http://localhost:8080/       http://10.12.156.50:8080/    输入我地址:访问启动的tomcat  服务器底层:TCP/IP  Server 和Client 客户端之间的交互
4)在web文件下创建html文件或者jps文件,浏览器只能访问到web目录下的index.jps文件,其他访问需要添加访问路径;

Week08手写笔记相关推荐

  1. 李永乐线性代数2020年强化课手写笔记汇总

    强化笔记整理如下,便于复习整理. [1]2020年李永乐线性代数强化笔记-行列式与矩阵 [2]2020年李永乐线性代数强化笔记-向量 [3]2020年李永乐线性代数强化笔记-线性方程组 [4]2020 ...

  2. 李永乐线性代数2020年基础课手写笔记汇总

    汇总于此,方便查询,如有帮助,副产品罢了. [1]线性代数手写笔记-行列式与矩阵 [2]线性代数手写笔记-向量 [3]线性代数手写笔记-线性方程组 [4]线性代数手写笔记-特征值和特征向量 [5]线性 ...

  3. 李永乐线性代数手写笔记-二次型

    李永乐线性代数基础知识,整理放在博客上面,方便自己复习查看. 概览请移步:李永乐线性代数2020年基础课手写笔记汇总 文章目录 一 二次型的概念和定理 二 化为标准形 三 正定二次型和正定矩阵 一 二 ...

  4. 李永乐线性代数手写笔记-特征值和特征向量

    李永乐线性代数基础知识,整理放在博客上面,方便自己复习查看. 概览请移步:李永乐线性代数2020年基础课手写笔记汇总 文章目录 一 特征值和特征向量 二 相似矩阵 三 实对称矩阵 一 特征值和特征向量 ...

  5. 李永乐线性代数手写笔记-线性方程组

    李永乐线性代数基础知识,整理放在博客上面,方便自己复习查看. 概览请移步:李永乐线性代数2020年基础课手写笔记汇总 文章目录 一 齐次方程组 二 非齐次方程组 三 公共解.同解 四 方程组的应用 一 ...

  6. 李永乐线性代数手写笔记-向量

    李永乐线性代数基础知识,整理放在博客上面,方便自己复习查看. 概览请移步李永乐线性代数2020年基础课手写笔记汇总 文章目录 一 基本概念和运算 二 线性表示 三 相关和无关 四 向量组和矩阵的秩 一 ...

  7. 李永乐线性代数手写笔记-行列式与矩阵

    李永乐线性代数基础知识,整理放在博客上面,方便自己复习查看. 概览请移步李永乐线性代数2020年基础课手写笔记汇总 文章目录 一 行列式 二 矩阵 一 行列式 二 矩阵

  8. SVM支持向量机-手写笔记（超详细：拉格朗日乘数法、KKT条件、对偶性质、最优化、合页损失、核函数...）

    SVM支持向量机-手写笔记 作者:某丁 日期:2021.05.21 写完了,发现想要真正理解SVM还需要继续深入学习,以上所写只不过是冰山一角,我的管中窥豹而已. 参考 [1] 一文搞懂支持向量机(S ...

  9. 计算机网络手写笔记图片,一键收藏！清华学子这样记笔记！

    原标题:一键收藏!清华学子这样记笔记! 还记得前段时间 朋友圈刷屏的清华学子笔记吗 整齐的排版. 清晰的思路无不令人赞叹 那么这些笔记是如何产生的呢? 相信看完下面这段视频 你会有更直观的了解 笔记教 ...

  10. 深度学习实战14(进阶版)-手写文字OCR识别，手写笔记也可以识别了

    大家好,我是微学AI,今天给大家带来手写OCR识别的项目.手写的文稿在日常生活中较为常见,比如笔记.会议记录,合同签名.手写书信等,手写体的文字到处都有,所以针对手写体识别也是有较大的需求.目前手写体 ...

最新文章

  1. AI一分钟 | “钢铁侠”马斯克冒冷汗直面跳票尴尬；Apollo2.0确定下个月初出征美国，李彦宏发力全球梦
  2. 智慧城市“聪明”在哪儿
  3. 网络编程知识预备(3) ——SOCKET、TCP、HTTP之间的区别与联系
  4. 系统垃圾清理.cmd
  5. 给程序员的忠告:九种不值得你追随的老板
  6. 网易易盾升级内容安全体系 发布智能审核管理系统
  7. php写接口时应该用return还是echo返回数据
  8. Hyper-V网络虚拟化--VM之间拷贝速度慢
  9. linux 终端复制剪贴板,命令行剪贴板复制和粘贴工具？
  10. 公众号引流进阶教程（公众号对接电影，影视资源）
  11. Linux运维踩过的坑---Temporary failure in name resolution
  12. 基于DRL的城市TSC 综述笔记（一）
  13. dell笔记本插上耳机没有声音_笔记本扬声器没声音，但耳机有声音怎么办
  14. Processing残影拖尾效果实现套路分享
  15. r相机采集的图片转化为halcon识别的图像源码_直播系统开发：关于直播源码中美颜SDK的作用...
  16. rsync下行同步和inotify实时同步部署
  17. 【ABAP】SE38的一些使用技巧
  18. 2021APMCM赛后总结——边缘检测
  19. 服务器操作系统怎么做映像,如何网络捕获使用 Sysprep 和 PXE 配置的服务器操作系统映像...
  20. 据说三分之一左右的小米盒子安装了第三方兔子桌面?

热门文章

  1. 海康威视二次开发 python_海康威视面试python后端题
  2. 如何下载和安装iOS 15公测版【附更新建议】
  3. codeblock图形界面编程
  4. 什么是微信62数据？微信62数据原理解读
  5. Spring5入门学习一
  6. 液晶显示器测试软件6,屏幕坏点检测工具(Datum pixel repair)
  7. linux caffe 生成lmdb,Caffe︱构建lmdb数据集与各类文件路径名设置细解
  8. java下载神奇宝贝mega,神奇宝贝mega
  9. Blender-UV Mapping
  10. 计算机专业大一上学期的c语言难吗,我想知道大学里面C语言考试时怎么弄的！难么？还有就是计算机二级考试必须要报考还是？...