一、web概念概述 JavaWeb：使用Java语言开发基于互联网的项目
1.软件架构 C/S: Client/Server 客户端/服务器端
1 2 3 4 5 6 在用户本地有一个客户端程序，在远程有一个服务器端程序 如：QQ，迅雷... 优点： 用户体验好 缺点： 开发、安装，部署，维护 麻烦
B/S: Browser/Server 浏览器/服务器端
1 2 3 4 5 6 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序 优点： 开发、安装，部署，维护 简单 缺点： 如果应用过大，用户的体验可能会受到影响 对硬件要求过高
2.B/S架构资源分类 (1) 静态资源：使用静态网页开发技术发布的资源。
特点：
1 2 3 4 所有用户访问，得到的结果是一样的。 如：文本，图片，音频、视频, HTML,CSS,JavaScript 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
(2) 动态资源：使用动态网页及时发布的资源。
特点：
1 2 3 4 所有用户访问，得到的结果可能不一样。 如：jsp/servlet,php,asp... 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
1 2 3 4 5 * 我们要学习动态资源，必须先学习静态资源！ * 静态资源分工： * HTML ：用于搭建基础网页，展示页面的内容 * CSS ：用于美化页面，布局页面 * JavaScript ：控制页面的元素，让页面有一些动态的效果
二、HTML Hyper Text Markup Language 超文本标记语言，是最基础的网页开发语言
超文本:
1 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言:
1 2 由标签构成的语言。<标签名称> 如 html，xml 标记语言不是编程语言
快速入门：
1.语法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 1.html文档后缀名 .html 或者 .htm 2. 标签分为 1. 围堵标签：有开始标签和结束标签。如 <html > </html > 2. 自闭和标签：开始标签和结束标签在一起。如 <br /> 3. 标签可以嵌套： 需要正确嵌套，不能你中有我，我中有你 错误：<a > <b > </a > </b > 正确：<a > <b > </b > </a > 4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来 5. html的标签不区分大小写，但是建议使用小写。 例如 * 代码： <html > <head > <meat charset = "UTF-8" > <title > title</title > </head > <body > <FONT color ='red' > Hello World</font > <br /> <font color ='green' > Hello World</font > </body > </html >
2.标签学习：根据功能学习 本功能参考链接https://www.w3school.com.cn/tags/html_ref_byfunc.asp
(1) 文件标签html最基本的标签 1 2 3 4 5 html:html文档的根标签 即<html > </html > head：头标签。用于指定html文档的一些属性。引入外部的资源 title：标题标签。 body：体标签 <!DOCTYPE html > ：html5中定义该文档是html文档
(2) 文本标签和文本有关的标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 1.注释： 2.<h1 > to <h6 > ：标题标签 h1~h6:字体大小逐渐递减 <p > ：段落标签<br > ：换行标签 浏览器里的制表符，换行并不换行，需要换行标签<hr > ：展示一条水平线 属性： * color：颜色 * width：宽度 * size：高度 * align：对其方式 * center：居中 * left：左对齐 * right：右对齐 格式化 <b > ：字体加粗 <b > 这是粗体文本</b > <i > ：字体斜体 <i > 标签一定要和结束标签 </i > <center > :文本居中<font > :字体标签 * 属性： * color：颜色 * size：大小 * face：字体 <font size ="3" color ="red" face ="楷体" > This is some text!</font > * 属性定义： * color： 1. 英文单词：red,green,blue 2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255) 3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF * width： 1. 数值：width='20' ,数值的单位，默认是 px(像素) 2. 数值%：占比相对于父元素的比例
(3) 图片标签： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 * img：展示图片 * 属性： * src：指定图片的位置 * 代码： <img src ="image/jingxuan_2.jpg" align ="right" alt ="古镇" width ="500" height ="500" /> 相对路径 以.开头的路径 <img src ="./image/jiangwai_1.jpg" > <img src ="../image/jiangwai_1.jpg" >
(4) 列表标签： 1 2 3 4 5 6 7 8 9 10 11 * 有序列表： * ol: * li: * 无序列表： * ul: * li: <ol > <li > Coffee</li > <li > Tea</li > <li > Milk</li > </ol >
(5) 链接标签： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 a:定义一个超链接 <a href ="http://www.itcast.cn" > 点我</a > 属性： href：指定访问资源的URL(统一资源定位符) target：指定打开资源的方式 _self:默认值，在当前页面打开 _blank：在空白页面打开 代码： <a href ="http://www.itcast.cn" > 点我</a > <br > <a href ="http://www.itcast.cn" target ="_self" > 点我</a > <br > <a href ="http://www.itcast.cn" target ="_blank" > 点我</a > <br > <a href ="./5_列表标签.html" > 列表标签</a > <br > <a href ="mailto:itcast@itcast.cn" > 联系我们</a > <br > <a href ="http://www.itcast.cn" > <img src ="image/jiangwai_1.jpg" > </a >
(6) 块标签 1 2 3 div和span：没有样式，结合CSS用的 div:每一个div占满一整行。块级标签 span：文本信息在一行展示，行内标签 内联标签
(7) 语义化标签 1 2 3 html5中为了提高程序的可读性，提供了一些标签。 结合CSS 1. <header>：页眉 <header> </header> 2. <footer>：页脚
(8) 表格标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 table：定义表格 width：宽度 border：边框 cellpadding：定义内容和单元格的距离 cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、 bgcolor：背景色 align：对齐方式 tr：定义行 * bgcolor：背景色 * align：对齐方式 td：定义单元格 * colspan：合并列 * rowspan：合并行 th：定义表头单元格 <caption>：表格标题 <thead>：表示表格的头部分 <tbody>：表示表格的体部分 <tfoot>：表示表格的脚部分
1 2 3 4 5 6 7 <table border ="1" > <tr > <td > 100</td > <td > 200</td > <td > 300</td > </tr > </table >
(9) 表单标签 概念：用于采集用户输入的数据的。用于和服务器进行交互。
form标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 表单项中的数据要想被提交：必须指定其name属性form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 属性： action：指定提交数据的URL method:指定提交方式 分类：一共7种，2种比较常用 get： 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2. 请求参数大小是有限制的。 3. 不太安全。 post： 2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2. 请求参数的大小没有限制。 3. 较为安全。 表单项中的数据要想被提交：必须指定其name属性
1 2 3 4 5 <form action ="form_action.asp" method ="get" > <p > First name: <input type ="text" name ="fname" /> </p > <p > Last name: <input type ="text" name ="lname" /> </p > <input type ="submit" value ="Submit" /> </form >
input标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 input：可以通过type属性值，改变元素展示的样式 type属性： text：文本输入框，默认值 placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 password：密码输入框 radio:单选框 注意： 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值 checkbox：复选框 注意： 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值 file：文件选择框 hidden：隐藏域，用于提交一些信息。 按钮： submit：提交按钮。可以提交表单 button：普通按钮 image：图片提交按钮 src属性指定图片的路径 label：指定输入项的文字描述信息 注意： label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。 select: 下拉列表 子元素：option，指定列表项 <select > <option value ="volvo" > Volvo</option > <option value ="saab" > Saab</option > <option value ="opel" > Opel</option > <option value ="audi" > Audi</option > </select > textarea：文本域（一个文本框） cols：指定列数，每一行有多少个字符 rows：默认多少行。
例如案例：公司简介
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html > <html lang ="ch" > <head > <meta charset ="UTF-8" > <title > 黑马程序员简介</title > </head > <body > <h1 > 公司简介</h1 > <hr color ="#ffd700" > <p > <font color ="#FF0000" > "黑马程序员"</font > 是由<b > <i > 传智播客</i > </b > 联合中关村 </p > <hr color ="#ffd700" > <font color ="gray" size ="2" > <center > 江苏传智播客教育科技股份有限公司<br > 版权所有Copyright 2006-2018 </center > </font > </body > </html >
三、CSS：页面美化和布局控制 CSS全拼：Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
好处：
1 2 3 4 5 1.功能强大 2.将内容展示和样式控制分离 降低耦合度。解耦 让分工协作更容易 提高开发效率
1.CSS与html结合方式(3种) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 1. 内联样式 * 在标签内使用style属性指定css代码 * 如：<div style ="color:red;" > hello css</div > 2. 内部样式 * 在head标签内，定义style标签，style标签的标签体内容就是css代码 * 如： <style > div { color :blue; } </style > <div > hello css</div > 3. 外部样式 1. 定义css资源文件。 2. 在head标签内，定义link标签，引入外部的资源文件 * 如： * a.css文件： div{ color:green; } 第二个文件引入： <link rel ="stylesheet" href ="css/a.css" > <div > hello css</div > <div > hello css</div > * 注意： * 1,2,3种方式 css作用范围越来越大 * 1方式不常用，后期常用2,3 * 3种格式可以写为： <style > @import "css/a.css" ; </style >
2.css语法 1 2 3 4 5 6 7 8 9 格式： 选择器 { 属性名1:属性值1; 属性名2:属性值2; ... } 选择器:筛选具有相似特征的元素 注意： 每一对属性需要使用；隔开，最后一对属性可以不加；这里说的是在一个选择器内
3.选择器 筛选具有相似特征的元素
分类：
(1) 基础选择器 1 2 3 4 5 6 7 8 9 1 . id选择器：选择具体的id属性值的元素.建议在一个html 页面中id值唯一 语法：#id 属性值{} 比如 <style> #div1 { color :#000 FF; } </style> <div id="div1">dd </div >
1 2 3 4 5 6 7 8 9 2 . 元素选择器：选择具有相同标签名称的元素 语法： 标签名称{} 注意：id选择器优先级高于元素选择器 <style> #div { color :#000 FF; } </style> <div id="div1">dd </div >
1 2 3 4 5 6 7 8 9 3 . 类选择器：选择具有相同的class属性值的元素。 语法：.class 属性值{} 注意：类选择器选择器优先级高于元素选择器,id选择器最高 <style> .cls1 { color :#000 FF; } </style> <p class="cls1">dd </p >
(2) 扩展选择器 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 1 . 选择所有元素： 语法： *{} 2 . 并集选择器： 选择器1 ,选择器2 {} 3 . 子选择器：筛选选择器1 元素下的选择器2 元素 语法： 选择器1 选择器2 {} 4 . 父选择器：选择父元素是 <div > 的所有 <p > 元素。 语法： div > p {} 例如 <style> div >p { background-color :yellow; } </style> <div > <p >我是唐老鸭。</p > <p >我住在 Duckburg。</p > </div > 5 . 属性选择器：选择元素名称，属性名=属性值的元素 语法： 元素名称[属性名="属性值" ] {} <style> a [target=_blank] { background-color :yellow; } </style> <a href="http://www.disney.com" target=" _blank">disney.com</a> 6. 伪类选择器：选择一些元素具有的状态 语法： 元素:状态{} 如： <a> 状态： link：初始化的状态 visited：被访问过的状态 active：正在访问状态 hover：鼠标悬浮状态 a:hover { background-color:yellow; } <a href=" http://www.google.com">Google</a>
4.属性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 1 . 字体、文本 * font-size ：字体大小 * color ：文本颜色 * text-align ：对其方式 * line-height ：行高 2 . 背景 * background ： 3 . 边框 * border ：设置边框，符合属性 4 . 尺寸 * width ：宽度 * height ：高度 5 . 盒子模型：控制布局 * margin ：外边距 * padding ：内边距 * 默认情况下内边距会影响整个盒子的大小 * box-sizing : border-box; 设置盒子的属性，让width 和height 就是最终盒子的大小 * float ：浮动 * left * right
四、JavaScript JavaScript：一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能：
1 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史：
1 2 3 4 5 1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C--,后来更名为：ScriptEase 2.1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，重新命名为JavaScript 3.1996年，微软抄袭JavaScript开发出JScript语言 4.1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。 JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
1.ECMAScript：客户端脚本语言的标准 (1) 基本语法：
与html结合方式
1 2 3 4 5 6 7 8 9 1. 内部JS ： 定义<script>，标签体内容就是js代码 <script></script> 2. 外部JS ： 定义<script>，通过src属性引入外部的js文件 <script src="js/a.js" ></script> 注意： 1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。 2. <script>可以定义多个。
注释
1 2 1. 单行注释：//注释内容 2. 多行注释：/*注释内容*/
数据类型
1 2 3 4 5 6 7 8 1. 原始数据类型(基本数据类型)： 1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型) 2. string：字符串。 字符串 "abc" "a" 'abc' 单双都可以 3. boolean: true和false 4. null：一个对象为空的占位符 5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined 2. 引用数据类型：对象
变量
一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言。
1 2 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法：
1 2 3 4 5 6 7 8 9 10 11 var 变量名 = 初始化值; 或者 var 变量名; 例如： <script> var a = 1 ; document .write (a+typeof (a)+"<br>" ) 1number </script> typeof 运算符：获取变量的类型。 注：null 运算后得到的是object
运算符
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 1. 一元运算符：只有一个运算数的运算符 ++，-- ， +(正号) ++(--) 在前，先自增(自减)，再运算 ++(--) 在后，先运算，再自增(自减) +(-)：正负号 注意：在JS 中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换 其他类型转number： string转number：按照字面值转换。如果字面值不是数字，则转为NaN （不是数字的数字） boolean转number：true 转为1 ，false 转为0 NaN 加任何数字都是NaN 2. 算数运算符 + - * / % ... 3. 赋值运算符 = += -= 4. 比较运算符 > < >= <= == ===(全等于) 比较方式 1. 类型相同：直接比较 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。 2. 类型不同：先进行类型转换，再比较 ==和===: ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false 5. 逻辑运算符 && || ! 其他类型转boolean： 1. number：0 或NaN 为假，其他为真 2. string：除了空字符串("" )，其他都是true 3. null &undefined :都是false 4. 对象：所有对象都为true 6. 三元运算符 ? : 表达式 var a = 3 ; var b = 4 ; var c = a > b ? 1 :0 ; 语法： 表达式? 值1 :值2 ; 判断表达式的值，如果是true 则取值1 ，如果是false 则取值2 ；
流程控制语句：
1 2 3 4 5 6 7 8 9 10 11 12 13 1. if ...else ...2. switch : 在java中，switch 语句可以接受的数据类型：byte int shor char,枚举(1.5 ) ,String (1.7 ) 在JS 中,switch 语句可以接受任意的原始数据类型 switch (变量){ case 值1 : ...;break ; case 值2 : ...;break ; } 3. while 4. do ...while 5. for
JS特殊语法：
1 2 3 4 5 1. 语句以;结尾，如果一行只有一条语句则;可以省略 (不建议) 2. 变量的定义使用var关键字，也可以不使用 用： 定义的变量是局部变量 不用：定义的变量是全局变量(不建议) fun(){b=4};alert(b); 不建议，在外边直接定义就行
习题：99乘法表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表</title> <style> td{ border: 1px solid; } </style> <script> document.write("<table align='center'>"); //1.完成基本的for循环嵌套，展示乘法表 for (var i = 1; i <= 9 ; i++) { document.write("<tr>"); for (var j = 1; j <=i ; j++) { document.write("<td>"); //输出 1 * 1 = 1 document.write(i + " * " + j + " = " +(i*j) +" "); // 空格 document.write("</td>"); } /*//输出换行 document.write("<br>");*/ document.write("</tr>"); } //2.完成表格嵌套 document.write("</table>"); </script> </head> <body> </body> </html>
(2) 基本对象： ① Function：函数(方法)对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3 种创建方式： 1. var fun = new Function (形式参数列表,方法体); 2. function 方法名称(形式参数列表){ 方法体 } 3. var 方法名 = function (形式参数列表 ){ 方法体 } 属性： 函数.length :代表形参的个数 fun (a,b) fun.length 2 特点： 1. 方法定义是，形参的类型不用写,返回值类型也不写。 2. 方法是一个对象，如果定义名称相同的方法，会覆盖 3. 在JS 中，方法的调用只与方法的名称有关，和参数列表无关 4. 在方法声明中有一个隐藏的内置对象（数组），arguments ,封装所有的实际参数 所以对于重载，比如add function add ( var sum = 0 ; for (var i = 0 ;i<arguments .length ;i++){ sum+=arguments [i]; } return sum; } 调用： 方法名称(实际参数列表);
② Array:数组对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1. 创建（3 种方式）： 1. var arr = new Array (元素列表); 2. var arr = new Array (默认长度); 3. var arr = [元素列表]; 2. 方法 join (参数):将数组中的元素按照指定的分隔符拼接为字符串 arr.join ("--" ), 1 --2 --3 --4 空代表默认逗号 push () 向数组的末尾添加一个或更多元素，并返回新的长度。 3. 属性 length :数组的长度 4. 特点： 1. JS 中，数组元素的类型可变的。 2. JS 中，数组长度可变的。 var arr = [1 ,a,"as" ,true ]
③ Boolean
④Date：日期对象
1 2 3 4 5 创建： var date = new Date (); Thu May 17 2021 12 :22 :11 GTM +08 :00 方法： toLocaleString ()：返回当前date对象对应的时间本地字符串格式 getTime ():获取毫秒值。返回当前如期对象描述的时间到1970 年1 月1 日零点的毫秒值差
⑤ Math：数学对象
1 2 3 4 5 6 7 8 9 10 创建： 特点：Math 对象不用创建，直接使用。 Math .方法名(); 方法： random ():返回 0 ~ 1 之间的随机数。 含0 不含1 ceil (x)：对数进行上舍入。 floor (x)：对数进行下舍入。 round (x)：把数四舍五入为最接近的整数。 属性： PI Math .PI
⑥ Number
⑦ String
⑧ RegExp：正则表达式对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 正则表达式：定义字符串的组成规则。 1. 单个字符:[] 如： [a] [ab] [a-zA-Z0 -9_] 特殊符号代表特殊含义的单个字符: \d :单个数字字符 [0 -9 ] \w :单个单词字符[a-zA-Z0 -9_] 2. 量词符号： ?：表示出现0 次或1 次 *：表示出现0 次或多次 +：出现1 次或多次 {m,n}:表示 m<= 数量 <= n m如果缺省： {,n}:最多n次 n如果缺省：{m,} 最少m次 3. 开始结束符号 ^:开始 $ :结束 正则对象： 1. 创建 1. var reg = new RegExp ("正则表达式" ); 字符串转义了 比如： var reg = new RegExp ("\\w{6,12}" ); 2. var reg = /正则表达式/ ; 加入开始结束符号比如： var reg = /^\w{6,12}$/ ; 2. 方法 1. test (参数):验证指定的字符串是否符合正则定义的规范 比如： var reg = /^\w{6,12}$/ ; var usernames = "asdasdasdsada" ; var flag = reg.test (usernames); false ;
⑨ Global
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 特点：全局对象，这个Global 中封装的方法不需要对象就可以直接调用。 方法名(); 直接调用 方法： encodeURI ():url编码 decodeURI ():url解码 encodeURIComponent ():url编码,编码的字符更多，url也会被编码 decodeURIComponent ():url解码 parseInt ():将字符串转为数字 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number，没有NaN isNaN ():判断一个值是否是NaN NaN 六亲不认，连自己都不认。NaN 参与的==比较全部问false 只能 isNaN (a) eval ():讲 JavaScript 字符串，并把它作为脚本代码来执行。 vara jscode = "alert(1)" eval (jscode);
2.DOM简单学习：为了满足案例要求 DOM功能：控制html文档的内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 知道DOM 中一个标签： 获取页面标签(元素)对象：Element document .getElementById ("id值" ):通过元素的id获取元素对象 操作Element 对象： 1. 修改属性值： 1. 明确获取的对象是哪一个？ 2. 查看API 文档，找其中有哪些属性可以设置 <img id="light" src="img/off.gif" > <script > var light = document .getElementById ("light" ) light.scr = "img/on.gif" </script > 2. 修改标签体内容： 属性：innerHTML 1. 获取元素对象 2. 使用innerHTML属性修改标签体内容 <h1 id="title" >第一个内容</h1> <script > var title = document .getElementById ("title" ) title.innerHTML = "第二个内容" </script >
事件简单学习
功能： 某些组件被执行了某些操作后，触发某些代码的执行。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 造句： xxx被xxx,我就xxx 我方水晶被摧毁后，我就责备对友。 敌方水晶被摧毁后，我就夸奖自己。 如何绑定事件 1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码 1. 事件：onclick--- 单击事件 2. 通过js获取元素对象，指定事件属性，设置一个函数 代码： <body> <img id ="light" src ="img/off.gif" onclick ="fun();" > <img id ="light2" src ="img/off.gif" > <script > function fun ( alert ('我被点了' ); alert ('我又被点了' ); } function fun2 ( alert ('咋老点我？' ); } var light2 = document .getElementById ("light2" ); light2.onclick = fun2; </script > </body >
3.BOM BOM：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象。
5部分组成：
1 2 3 4 5 Window ：窗口对象Navigator ：浏览器对象Screen ：显示器屏幕对象History ：历史记录对象Location ：地址栏对象
(1) Window：窗口对象 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 1. 创建2. 方法 1. 与弹出框有关的方法： alert () 显示带有一段消息和一个确认按钮的警告框。 window .alert ("弹出一警告框" ) confirm () 显示带有一段消息以及确认按钮和取消按钮的对话框。 var flag = confirm ("是否退出" ) * 如果用户点击确定按钮，则方法返回true * 如果用户点击取消按钮，则方法返回false prompt () 显示可提示用户输入的对话框。 var message = prompt ("输入数据，返回数据" ) * 返回值：获取用户输入的值 2. 与打开关闭有关的方法： close () 关闭浏览器窗口。 * 谁调用我 ，我关谁, 可以使用Open ()返回window 对象关闭。 open () 打开一个新的浏览器窗口 * 返回新的Window 对象 3. 与定时器有关的方式 setTimeout () 在指定的毫秒数后调用函数或计算表达式 。 * 参数： 1. js代码或者方法对象 2. 毫秒值 * 返回值：唯一标识，用于取消定时器 例如：var timer1 = setTimeout (fun,2000 ); function fun (alert ('boom~~' );} clearTimeout () 取消由 setTimeout () 方法设置的 timeout。 setInterval () 按照指定的周期（以毫秒计）来调用函数或计算表达式。(循环定时器） clearInterval () 取消由 setInterval () 设置的 timeout。
1 2 3 4 5 6 7 8 9 10 11 12 13 3. 属性： 1. 获取其他BOM 对象： history 例如： window .history ; 或者 history; location Navigator Screen : 2. 获取DOM 对象 document window .document 也可以，一般省略window var a = document .getElementById ("openBtn" ); 4. 特点 * Window 对象不需要创建可以直接使用 window 使用。 window .方法名(); * window 引用可以省略。 方法名();
(2) Location：地址栏对象 1 2 3 4 5 6 7 1. 创建(获取)： 1. window .location 2. location 2. 方法： * reload () 重新加载当前文档。刷新 3. 属性 * href 设置或返回完整的 URL 。
例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <body> <input type ="button" id ="btn" value ="刷新" > <input type ="button" id ="gobaidu" value ="去百度" > var btn = document.getElenentById("btn"); btn.onclick = function(){ location.reload(); } var gobaidu = document.getElenentById("gobaidu"); gobaidu.onclick = function(){ location.href = "https:www.baidu.com"; } </body >
(2) History：历史记录对象 1 2 3 4 5 6 7 8 9 10 11 12 13 1. 创建(获取)： 1. window.history 2. history 2. 方法： * back() 加载 history 列表中的前一个 URL。 * forward() 加载 history 列表中的下一个 URL。 * go(参数) 加载 history 列表中的某个具体页面。 * 参数： * 正数：前进几个历史记录 * 负数：后退几个历史记录 3. 属性： * length 返回当前窗口历史列表中的 URL 数量。 注意不是浏览器的全部历史！！！
例如
4.DOM 什么是 DOM？
1 2 3 4 5 6 7 8 9 DOM 是一项 W3C (World Wide Web Consortium) 标准。 DOM 定义了访问文档的标准： “W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： Core DOM - 所有文档类型的标准模型 XML DOM - XML 文档的标准模型 HTML DOM - HTML 文档的标准模型
概念： Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 W3C DOM 标准被分为 3 个不同的部分： 1. 核心 DOM - 针对任何结构化文档的标准模型 （对DOM修改比较多，XML对DOM修改比较少） * Document：文档对象 * Element：元素对象 * Attribute：属性对象 * Text：文本对象 * Comment:注释对象 * Node：节点对象，其他5个的父对象 2. XML DOM - 针对 XML 文档的标准模型 3. HTML DOM - 针对 HTML 文档的标准模型
(1) 核心DOM模型 （对DOM修改比较多，XML对DOM修改比较少）
① Document：文档对象 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1. 创建(获取)：在html dom模型中可以使用window 对象来获取 1. window .document 2. document 2. 方法： 1. 获取Element 对象： 1. getElementById () ： 根据id属性值获取元素对象。id属性值一般唯一 2. getElementsByTagName ()：根据元素名称获取元素对象们。返回值是一个数组 3. getElementsByClassName ():根据Class 属性值获取元素对象们。返回值是一个数组 4. getElementsByName (): 根据name属性值获取元素对象们。返回值是一个数组 var names = document .getElementsByName ("username" ) 2. 创建其他DOM 对象： createAttribute (name) createComment () createElement () createTextNode () 3. 属性
② Element：元素对象 1 2 3 4 5 6 7 8 9 10 11 1. 获取/创建：通过document 来获取和创建2. 方法： 1. removeAttribute ()：删除属性 2. setAttribute ()：设置属性 例子： <script> var a = document .getElementById ("sss" ); a.setAttribute ("href" ,"www.baidu.com" ) a.removeAttribute ("href" ) </script>
③ Node：节点对象 是其他5个的父对象
1 2 3 4 5 6 7 8 特点：所有dom对象都可以被认为是一个节点 方法： CRUD dom树： appendChild()：向节点的子节点列表的结尾添加新的子节点。 removeChild() ：删除（并返回）当前节点的指定子节点。 replaceChild()：用新节点替换一个子节点。 属性： parentNode 返回节点的父节点。
例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Node对象</title> </head> <body> <div id="div1"> <div id="div2">div2</div> div1 </div> <a href="javascript:void(0);" id="del">删除子节点</a> <a href="javascript:void(0);" id="add">添加子节点</a> <!--<input type="button" id="del" value="删除子节点">--> <script> //1.获取超链接 var element_a = document.getElementById("del"); //2.绑定单击事件 element_a.onclick = function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); } //1.获取超链接 var element_add = document.getElementById("add"); //2.绑定单击事件 element_add.onclick = function(){ var div1 = document.getElementById("div1"); //给div1添加子节点 //创建div节点 var div3 = document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); } /* 超链接功能： 1.可以被点击：样式 2.点击后跳转到href指定的url 需求：保留1功能，去掉2功能 实现：href="javascript:void(0);" */ var div2 = document.getElementById("div2"); var div1 = div2.parentNode; alert(div1); </script> </body> </html>
(2) HTML DOM HTML DOM 是 HTML 的标准对象 模型和编程接口 。它定义了：
1 2 3 4 作为对象的 HTML 元素 所有 HTML 元素的属性 访问所有 HTML 元素的方法 所有 HTML 元素的*事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准 。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 1. 标签体的设置和获取：innerHTML <body> <div id ="div1" > text</div > <script > var div = document .getElementById (div1) div.innerHTML += "<input type='text'>" ; </script > </body > 2. 使用html元素对象的属性3. 控制元素样式 1. 使用元素的style属性来设置 如： div1.style .border = "1px solid red" ; div1.style .width = "200px" ; div1.style .fontSize = "20px" ; 2. 提前定义好类选择器的样式，通过元素的className属性来设置其class 属性值。 .di {}.d2 {} var div1. = document .getElementById (div1) div1.className = "d2" ;
(3) 事件监听机制 概念：某些组件被执行了某些操作后，触发某些代码的执行。
1 2 3 4 * 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了 * 事件源：组件。如： 按钮 文本输入框... * 监听器：代码。 * 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
常见的事件：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 表单检验 2. onfocus :元素获得焦点。 百度搜索框，点击闪烁 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4. 鼠标事件： 1. onmousedown 鼠标按钮被按下。 2. onmouseup 鼠标按键被松开。 3. onmousemove 鼠标被移动。 4. onmouseover 鼠标移到某元素之上。 5. onmouseout 鼠标从某元素移开。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 5. 键盘事件： 1. onkeydown 某个键盘按键被按下。 2. onkeyup 某个键盘按键被松开。 3. onkeypress 某个键盘按键被按下并松开。 6. 选择和改变 1. onchange 域的内容被改变。 2. onselect 文本被选中。 7. 表单事件： 1. onsubmit 确认按钮被点击。 document .getElementById (div1).onsubmit = fun{ return false ; } 返回false 不提交 对于 <script> function checkForm ( return false ; } </script> <body> <form action ="#" id ="form" onclick ="return checkForm();" > 2. onreset 重置按钮被点击。
五、Bootstrap 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
1 2 3 4 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 同一套页面可以兼容不同分辨率的设备。
1.快速入门 1 2 3 1.下载Bootstrap 2.在项目中将这三个文件夹复制 3.创建html页面，引入必要的资源文件
名义一样，一个带min，一个不带min，min是压缩过的，把空格都去掉了，项目上线的时候用
1 2 bootstrap.css bootstrap.min.css
2.响应式布局 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 * 同一套页面可以兼容不同分辨率的设备。 * 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子 * 步骤： 1. 定义容器。相当于之前的table、 * 容器分类： 1. container：两边留白 2. container-fluid：每一种设备都是100%宽度 2. 定义行。相当于之前的tr 样式：row 3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目 * 设备代号： 1. xs：超小屏幕 手机 (<768px)：col-xs-12 2. sm：小屏幕 平板 (≥768px) 3. md：中等屏幕 桌面显示器 (≥992px) 4. lg：大屏幕 大桌面显示器 (≥1200px) * 注意： 1. 一行中如果格子数目超过12，则超出部分自动换行。 2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。 3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
CSS样式和JS插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 1. 全局CSS样式： * 按钮：class="btn btn-default" * 图片： * class="img-responsive"：图片在任意尺寸都占100% * 图片形状 * <img src="..." alt="..." class="img-rounded">：方形 * <img src="..." alt="..." class="img-circle"> ： 圆形 * <img src="..." alt="..." class="img-thumbnail"> ：相框 * 表格 * table * table-bordered * table-hover * 表单 * 给表单项添加：class="form-control" 2. 组件： * 导航条 * 分页条 3. 插件： * 轮播图
六、XML 概念：Extensible Markup Language 可扩展标记语言，代替properties配置文件
1 2 3 4 5 6 7 8 9 10 11 12 * 可扩展：标签都是自定义的。 <user> <student> * 功能 * 存储数据 1. 配置文件 2. 在网络中传输 * xml与html的区别 1. xml标签都是自定义的，html标签是预定义。 2. xml的语法严格，html语法松散 3. xml是存储数据的，html是展示数据 * w3c:万维网联盟
1.语法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 * 基本语法： 1. xml文档的后缀名 .xml 2. xml第一行必须定义为文档声明 3. xml文档中有且仅有一个根标签 4. 属性值必须使用引号(单双都可)引起来 5. 标签必须正确关闭 6. xml标签名称区分大小写 * 快速入门： <?xml version='1.0' ?> //文档声明 <users > //根标签 <user id ='1' > <name > zhangsan</name > <age > 23</age > <gender > male</gender > <br /> </user > <user id ='2' > <name > lisi</name > <age > 24</age > <gender > female</gender > </user > </users >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 * 组成部分： 1. 文档声明 1. 格式：<?xml 属性列表 ?> 2. 属性列表： * version：版本号，必须的属性 * encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1 * standalone：是否独立 * 取值： * yes：不依赖其他文件 * no：依赖其他文件 2. 指令(了解)：结合css的 * <?xml-stylesheet type="text/css" href="a.css" ?> 3. 标签：标签名称自定义的 * 规则： * 名称可以包含字母、数字以及其他的字符 * 名称不能以数字或者标点符号开始 * 名称不能以字母 xml（或者 XML、Xml 等等）开始 * 名称不能包含空格 4. 属性： id属性值唯一 5. 文本： * CDATA区：在该区域中的数据会被原样展示 * 格式： <![CDATA[ 数据 ]]> 比如对于 if(a<b && a > c){} 转义 if(a< b & & a > c){}
2.约束 规定xml文档的书写规则
1 2 3 4 5 6 7 * 作为框架的使用者(程序员)： 1. 能够在xml中引入约束文档 2. 能够简单的读懂约束文档 * 分类： 1. DTD:一种简单的约束技术 2. Schema:一种复杂的约束技术
DTD约束技术：
1 2 3 4 5 * 引入dtd文档到xml文档中 * 内部dtd：将约束规则定义在xml文档中 * 外部dtd：将约束的规则定义在外部的dtd文件中 * 本地：<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置"> * 网络：<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
Schema约束技术：
1 2 3 4 5 6 7 8 9 10 11 12 引入： 1.填写xml文档的根元素 2.引入xsi前缀. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3.引入xsd文件命名空间. xsi:schemaLocation="http://www.itcast.cn/xml student.xsd" 4.为每一个xsd约束声明一个前缀,作为标识 xmlns="http://www.itcast.cn/xml" 例如 <students xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance" xmlns ="http://www.itcast.cn/xml" xsi:schemaLocation ="http://www.itcast.cn/xml student.xsd" >
3.解析 操作xml文档，将文档中的数据读取到内存中
1 2 3 4 5 6 7 8 9 10 11 * 操作xml文档 1. 解析(读取)：将文档中的数据读取到内存中 2. 写入：将内存中的数据保存到xml文档中。持久化的存储 * 解析xml的方式： 1. DOM：将标记语言文档一次性加载进内存，在内存中形成一颗dom树 * 优点：操作方便，可以对文档进行CRUD的所有操作 * 缺点：占内存 2. SAX：逐行读取，基于事件驱动的。 * 优点：不占内存。 * 缺点：只能读取，不能增删改
xml常见的解析器：
1 2 3 4 1. JAXP：sun公司提供的解析器，支持dom和sax两种思想 ,比较烂，没人用 2. DOM4J：一款非常优秀的解析器 3. Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。 4. PULL：Android操作系统内置的解析器，sax方式的。
Jsoup
jsoup 是一款Java的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 快速入门： * 步骤： 1. 导入jar包 2. 获取Document对象 3. 获取对应的标签Element对象 4. 获取数据 * 代码： String path = JsoupDemo1.class.getClassLoader().getResource("student.xml" ).getPath(); Document document = Jsoup.parse(new File (path), "utf-8" ); Elements elements = document.getElementsByTag("name" ); System.out.println(elements.size()); Element element = elements.get(0 ); String name = element.text(); System.out.println(name);
对象的使用：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 1. Jsoup：工具类，可以解析html或xml文档，返回Document * parse：解析html或xml文档，返回Document * parse (File in, String charsetName)：解析xml或html文件的。 * parse (String html)：解析xml或html字符串(整个xml文档当作字符串) * parse (URL url, int timeoutMillis)：通过网络路径获取指定的html或xml的文档对象 2. Document：文档对象。代表内存中的dom树 * 获取Element对象 * getElementById (String id)：根据id属性值获取唯一的element对象 * getElementsByTag (String tagName)：根据标签名称获取元素对象集合 * getElementsByAttribute (String key)：根据属性名称获取元素对象集合 * getElementsByAttributeValue (String key, String value)：根据对应的属性名和属性值获取元素对象集合 3. Elements：元素Element对象的集合。可以当做 ArrayList<Element>来使用4. Element：元素对象 注意获取Element是获取的DOM树上的任意一个，下边这个是获取的子标签 1. 获取子元素对象 * getElementById (String id)：根据id属性值获取唯一的element对象 * getElementsByTag (String tagName)：根据标签名称获取元素对象集合 * getElementsByAttribute (String key)：根据属性名称获取元素对象集合 * getElementsByAttributeValue (String key, String value)：根据对应的属性名和属性值获取元素对象集合 2. 获取属性值 * String attr (String key) ：根据属性名称获取属性值 3. 获取文本内容 * String text () :获取文本内容 * String html () :获取标签体的所有内容(包括字标签的字符串内容) 5. Node：节点对象 * 是Document和Element的父类
快捷查询方式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 1. selector:选择器 * 使用的方法：Elements select (String cssQuery) * 语法：参考Selector类中定义的语法 2. XPath：XPath即为XML路径语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言 * 使用Jsoup的Xpath需要额外导入jar包。 * 查询w3cshool参考手册，使用xpath的语法完成查询 * 代码： String path = JsoupDemo6.class.getClassLoader().getResource("student.xml" ).getPath(); Document document = Jsoup.parse(new File (path), "utf-8" ); JXDocument jxDocument = new JXDocument (document); List<JXNode> jxNodes = jxDocument.selN("//student" ); for (JXNode jxNode : jxNodes) { System.out.println(jxNode); } System.out.println("--------------------" ); List<JXNode> jxNodes2 = jxDocument.selN("//student/name" ); for (JXNode jxNode : jxNodes2) { System.out.println(jxNode); } System.out.println("--------------------" ); List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]" ); for (JXNode jxNode : jxNodes3) { System.out.println(jxNode); } System.out.println("--------------------" ); List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']" ); for (JXNode jxNode : jxNodes4) { System.out.println(jxNode); }
七、Servlet和tomcat 1.web相关概念回顾 1 2 3 4 5 6 7 8 9 1. 软件架构 1. C/S：客户端/服务器端 2. B/S：浏览器/服务器端 2. 资源分类 1. 静态资源：所有用户访问后，得到的结果都是一样的，称为静态资源.静态资源可以直接被浏览器解析 * 如： html,css,JavaScript 2. 动态资源:每个用户访问相同资源后，得到的结果可能不一样。称为动态资源。动态资源被访问后，需要先转换为静态资源，在返回给浏览器 * 如：servlet/jsp,php,asp....
1 2 3 4 5 6 7 3. 网络通信三要素 1. IP：电子设备(计算机)在网络中的唯一标识。 2. 端口：应用程序在计算机中的唯一标识。 0~65536 3. 传输协议：规定了数据传输的规则 1. 基础协议： 1. tcp:安全协议，三次握手。 速度稍慢 2. udp：不安全协议。 速度快
2.web服务器软件： 1 2 3 4 5 * 服务器：安装了服务器软件的计算机 * 服务器软件：接收用户的请求，处理请求，做出响应 * web服务器软件：接收用户的请求，处理请求，做出响应。 * 在web服务器软件中，可以部署web项目，让用户通过浏览器来访问这些项目 * web容器
1 2 3 4 5 6 7 8 9 * 常见的java相关的web服务器软件： * webLogic：oracle公司，大型的JavaEE服务器，支持所有的JavaEE规范，收费的。 * webSphere：IBM公司，大型的JavaEE服务器，支持所有的JavaEE规范，收费的。 * JBOSS：JBOSS公司的，大型的JavaEE服务器，支持所有的JavaEE规范，收费的。 * Tomcat：Apache基金组织，中小型的JavaEE服务器，仅仅支持少量的JavaEE规范servlet/jsp。开源的，免费的。 JavaEE是什么？ JavaEE：Java语言在企业级开发中使用的技术规范的总和，一共规定了13项大的规范
(1) Tomcat 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Tomcat：web服务器软件 1. 下载：http://tomcat.apache.org/ 2. 安装：解压压缩包即可。 * 注意：安装目录建议不要有中文和空格 3. 卸载：删除目录就行了 4. 启动： * bin/startup.bat ,双击运行该文件即可 * 访问：浏览器输入：http://localhost:8080 回车访问自己 http://别人的ip:8080 访问别人 * 可能遇到的问题： 1. 黑窗口一闪而过： * 原因： 没有正确配置JAVA_HOME环境变量 * 解决方案：正确配置JAVA_HOME环境变量 2. 启动报错： 1. 暴力：找到占用的端口号，并且找到对应的进程，杀死该进程 * netstat -ano 找到PID，去任务管理器关闭 2. 温柔：修改自身的端口号 * 在tocmcat/conf/server.xml * <Connector port="8888" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8445" /> 一般会将tomcat的默认端口号修改为80。80端口是http协议的默认端口。 * 好处：在访问时，就不用输入端口号 5. 关闭： 1. 正常关闭： * 打开bin/shutdown.bat * ctrl+c 2. 强制关闭： * 点击启动窗口的× 6. 配置: * 部署项目的方式： 1. 直接将项目放到webapps目录下即可。 * /hello：项目的访问路径-->虚拟目录 * 简化部署：将项目打成一个war包，再将war包放置到webapps目录下。 * war包会自动解压缩，删除war包也会自动删除 2. 不想把war包放过去，想指定路径，(这里直接修改配置文件不安全，建议3) 配置conf/server.xml文件,在<Host>标签体中配置 <Context docBase="D:\hello" path="/hehe" /> * docBase:项目存放的路径 * path：虚拟目录 3. 在conf\Catalina\localhost创建任意名称的xml文件。在文件中编写 <Context docBase="D:\hello" /> * 虚拟目录：xml文件的名称 静态项目和动态项目： * 目录结构 * java动态项目的目录结构： -- 项目的根目录 -- WEB-INF目录（有就是动态项目）： -- web.xml：web项目的核心配置文件 -- classes目录：放置字节码文件的目录 -- lib目录：放置依赖的jar包
1 2 * 将Tomcat集成到IDEA中，并且创建JavaEE的项目，部署项目。 IDEA乱码，改下125位置的GBK就行
3.Servlet 全称呼 server applet
1 2 3 * 概念：运行在服务器端的小程序 * Servlet就是一个接口，定义了Java类被浏览器访问到(tomcat识别)的规则。 * 将来我们自定义一个类，实现Servlet接口，复写方法。
(1) 快速入门 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 * 快速入门： 1. 创建JavaEE项目 2. 定义一个类，实现Servlet接口 * public class ServletDemo1 implements Servlet 3. 实现接口中的抽象方法 在service方法打印一句话 4. 配置Servlet 在web.xml中配置： <servlet > <servlet-name > demo1</servlet-name > <servlet-class > cn.itcast.web.servlet.ServletDemo1</servlet-class > </servlet > <servlet-mapping > <servlet-name > demo1</servlet-name > <url-pattern > /demo1</url-pattern > </servlet-mapping >
(2) 执行原理 1 2 3 4 5 6 * 执行原理： 1. 当服务器接受到客户端浏览器的请求后，会解析请求URL路径，获取访问的Servlet的资源路径 2. 查找web.xml文件，是否有对应的<url-pattern>标签体内容。 3. 如果有，则在找到对应的<servlet-class>全类名 4. tomcat会将字节码文件加载进内存，并且创建其对象 5. 调用其方法
(3) Servlet中的生命周期方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 * Servlet中的生命周期方法： 1. 被创建：执行init方法，只执行一次 * Servlet什么时候被创建？ * 默认情况下，第一次被访问时，Servlet被创建 * 可以配置执行Servlet的创建时机。 * 在<servlet>标签下配置 1. 第一次被访问时，创建 * <load-on-startup>的值为负数 2. 在服务器启动时，创建 * <load-on-startup>的值为0或正整数 * Servlet的init方法，只执行一次，说明一个Servlet在内存中只存在一个对象，Servlet是单例的 * 多个用户同时访问时，可能存在线程安全问题。 * 解决：尽量不要在Servlet中定义成员变量。即使定义了成员变量，也不要对修改值 2. 提供服务：执行service方法，执行多次 * 每次访问Servlet时，Service方法都会被调用一次。 3. 被销毁：执行destroy方法，只执行一次 * Servlet被销毁时执行。服务器关闭时，Servlet被销毁 * 只有服务器正常关闭时，才会执行destroy方法。 * destroy方法在Servlet被销毁之前执行，一般用于释放资源
4.Servlet3.0： 1 2 3 好处： * 支持注解配置。可以不需要web.xml了。 IEDA配置，建立JAVA模块，添加框架和支持，web不勾选XML，运行配置TOMCAT，注意没有servlet可以，文件项目结构模块，导入库
(1) 使用步骤： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 * 步骤： 1. 创建JavaEE项目，选择Servlet的版本3.0 以上，可以不创建web.xml 2. 定义一个类，实现Servlet接口 3. 复写方法 4. 在类上使用@WebServlet 注解，进行配置 @WebServlet("资源路径") 其中value可以省略，直接写资源路径：@WebServlet(/demo) @WebServlet("资源路径") 他的内部就是： @Target({ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME) @Documented public @interface WebServlet { String name () default "" ; String[] value() default {}; String[] urlPatterns() default {}; int loadOnStartup () default -1 ; WebInitParam[] initParams() default {}; boolean asyncSupported () default false ; String smallIcon () default "" ; String largeIcon () default "" ; String description () default "" ; String displayName () default "" ; }
5.IDEA与tomcat的相关配置 1 2 3 4 5 6 7 1. IDEA会为每一个tomcat部署的项目单独建立一份配置文件 * 查看控制台的log：Using CATALINA_BASE: "C:\Users\fqy\.IntelliJIdea2018.1\system\tomcat\_itcast" 2. 工作空间项目 和 tomcat部署的web项目 * tomcat真正访问的是“tomcat部署的web项目”，"tomcat部署的web项目"对应着"工作空间项目" 的web目录下的所有资源 * WEB-INF目录下的资源不能被浏览器直接访问。 3. 断点调试：使用"小虫子"启动 dubug 启动
6.Servlet： 1. 概念
2. 步骤
3. 执行原理
4. 生命周期
5. Servlet3.0 注解配置
6. Servlet的体系结构
Servlet -- 接口
|儿子
GenericServlet -- 抽象类（并不用）
|孙子
HttpServlet -- 抽象类（用它）
* GenericServlet：将Servlet接口中其他的方法做了默认空实现，只将service()方法作为抽象
* 将来定义Servlet类时，可以继承GenericServlet，实现service()方法即可
* HttpServlet：对http协议的一种封装，简化操作
1. 定义类继承HttpServlet
2. 复写doGet/doPost方法
7. Servlet相关配置
1. urlpartten:Servlet访问路径
1. 一个Servlet可以定义多个访问路径 ： 比如： @WebServlet({"/d4","/dd4","/ddd4"，"/*"})
2. 路径定义规则：
1. /xxx：路径匹配
2. /xxx/xxx:多层路径，目录结构
3. *.do：扩展名匹配
八、HTTP： 概念：Hyper Text Transfer Protocol 超文本传输协议
1 2 3 4 5 6 7 8 9 10 * 传输协议：定义了，客户端和服务器端通信时，发送数据的格式 * 特点： 1. 基于TCP/IP的高级协议 2. 默认端口号:80 3. 基于请求/响应模型的:一次请求对应一次响应 4. 无状态的：每次请求之间相互独立，不能交互数据 * 历史版本： * 1.0：每一次请求响应都会建立新的连接 * 1.1：复用连接
1.请求消息数据格式 (1) 请求行 1 2 3 4 5 6 7 8 9 10 11 12 13 请求方式 请求url 请求协议/版本 格式： GET /login.html HTTP/1.1 * 请求方式： * HTTP协议有7中请求方式，常用的有2种 * GET： 1. 请求参数在请求行中，在url后。 2. 请求的url长度有限制的 3. 不太安全 * POST： 1. 请求参数在请求体中 2. 请求的url长度没有限制的 3. 相对安全
(2) 请求头 客户端浏览器告诉服务器一些信息
1 2 3 4 5 6 7 8 9 10 11 12 格式： 请求头名称: 请求头值 常见的请求头： 1. User-Agent：浏览器告诉服务器，我访问你使用的浏览器版本信息 * 可以在服务器端获取该头的信息，解决浏览器的兼容性问题 2. Referer：http://localhost/login.html * 告诉服务器，我(当前请求)从哪里来？ * 作用： 1. 防盗链： 2. 统计工作：
(3) 请求空行 1 空行，就是用于分割POST请求的请求头，和请求体的。
(4) 请求体(正文) (5)请求数据例子 1 2 3 4 5 6 7 8 9 10 11 12 字符串格式： POST /login.html HTTP/1.1 /*请求行*/ Host: localhost User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2 Accept-Encoding: gzip, deflate Referer: http://localhost/login.html Connection: keep-alive Upgrade-Insecure-Requests: 1 上边是请求头 请求空行 username=zhangsan 请求体
2.响应消息数据格式 1 2 3 request对象和response对象的原理 1. request和response对象是由服务器创建的。我们来使用它们 2. request对象是来获取请求消息，response对象是来设置响应消息
(1) Request： request对象继承体系结构：
1 2 3 4 5 ServletRequest -- 接口 | 继承 HttpServletRequest -- 接口 | 实现 org.apache.catalina.connector.RequestFacade 类(tomcat)
request功能：
1. 获取请求消息数据
1. 获取请求行数据
* GET /day14/demo1?name=zhangsan HTTP/1.1
* 方法：
1. 获取请求方式 ：GET
* String getMethod()
2. (*)获取虚拟目录：/day14
* String getContextPath()
3. 获取Servlet路径: /demo1
* String getServletPath()
4. 获取get方式请求参数：name=zhangsan
* String getQueryString()
5. (*)获取请求URI：/day14/demo1
* String getRequestURI(): /day14/demo1
* StringBuffer getRequestURL() :http://localhost/day14/demo1
URL和URI区别：
* URL:统一资源定位符 ： http://localhost/day14/demo1 中华人民共和国
* URI：统一资源标识符 : /day14/demo1 共和国
6. 获取协议及版本：HTTP/1.1
* String getProtocol()
7. 获取客户机的IP地址：
* String getRemoteAddr()
2. 获取请求头数据
* 方法：
* (*)String getHeader(String name):通过请求头的名称获取请求头的值
* Enumeration<String> getHeaderNames():获取所有的请求头名称
3. 获取请求体数据:
* 请求体：只有POST请求方式，才有请求体，在请求体中封装了POST请求的请求参数
* 步骤：
1. 获取流对象
BufferedReader getReader()：获取字符输入流，只能操作字符数据
ServletInputStream getInputStream()：获取字节输入流，可以操作所有类型数据
* 在文件上传知识点后讲解
2. 再从流对象中拿数据
2. 其他功能：
1. 获取请求参数通用方式：不论get还是post请求方式都可以使用下列方法来获取请求参数
1. String getParameter(String name):根据参数名称获取参数值 username=zs&password=123
2. String[] getParameterValues(String name):根据参数名称获取参数值的数组 hobby=xx&hobby=game
3. Enumeration<String> getParameterNames():获取所有请求的参数名称
比如 只能获取xx，不能获取game
4. Map<String,String[]> getParameterMap():获取所有参数的map集合
全部获取的到 xx和game
* 中文乱码问题：
* get方式：tomcat 8 已经将get方式乱码问题解决了
* post方式：会乱码
* 解决：在获取参数前，设置request的编码 request.setCharacterEncoding("utf-8");
2. 请求转发：一种在服务器内部的资源跳转方式
1. 步骤：
1. 通过request对象获取请求转发器对象：RequestDispatcher getRequestDispatcher(String path)
2. 使用RequestDispatcher对象来进行转发：forward(ServletRequest request, ServletResponse response)
2. 特点：
1. 浏览器地址栏路径不发生变化
2. 只能转发到当前服务器内部资源中。
3. 转发是一次请求（抓包之后只有一个请求）
3. 共享数据：
* 域对象：一个有作用范围的对象，可以在范围内共享数据
* request域：代表一次请求的范围，一般用于请求转发的多个资源中共享数据
* 方法：
1. void setAttribute(String name,Object obj):存储数据
2. Object getAttitude(String name):通过键获取值
3. void removeAttribute(String name):通过键移除键值对
4. 获取ServletContext：
* ServletContext getServletContext()
案例：用户登录 * 用户登录案例需求：
1.编写login.html登录页面
username & password 两个输入框
2.使用Druid数据库连接池技术,操作mysql，day14数据库中user表
3.使用JdbcTemplate技术封装JDBC
4.登录成功跳转到SuccessServlet展示：登录成功！用户名,欢迎您
5.登录失败跳转到FailServlet展示：登录失败，用户名或密码错误
* 分析
* 开发步骤
1. 创建项目，导入html页面，配置文件，jar包
2. 创建数据库环境
CREATE DATABASE day14;
USE day14;
CREATE TABLE USER(
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(32) UNIQUE NOT NULL,
PASSWORD VARCHAR(32) NOT NULL
);
3. 创建包cn.itcast.domain,创建类User
package cn.itcast.domain;
/**
* 用户的实体类
*/
public class User {
private int id;
private String username;
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
4. 创建包cn.itcast.util,编写工具类JDBCUtils
package cn.itcast.util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import javax.xml.crypto.Data;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
/**
* JDBC工具类 使用Durid连接池
*/
public class JDBCUtils {
private static DataSource ds ;
static {
try {
//1.加载配置文件
Properties pro = new Properties();
//使用ClassLoader加载配置文件，获取字节输入流
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
pro.load(is);
//2.初始化连接池对象
ds = DruidDataSourceFactory.createDataSource(pro);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 获取连接池对象
*/
public static DataSource getDataSource(){
return ds;
}
/**
* 获取连接Connection对象
*/
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
}
5. 创建包cn.itcast.dao,创建类UserDao,提供login方法
package cn.itcast.dao;
import cn.itcast.domain.User;
import cn.itcast.util.JDBCUtils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
/**
* 操作数据库中User表的类
*/
public class UserDao {
//声明JDBCTemplate对象共用
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
/**
* 登录方法
* @param loginUser 只有用户名和密码
* @return user包含用户全部数据,没有查询到，返回null
*/
public User login(User loginUser){
try {
//1.编写sql
String sql = "select * from user where username = ? and password = ?";
//2.调用query方法
User user = template.queryForObject(sql,
new BeanPropertyRowMapper<User>(User.class),
loginUser.getUsername(), loginUser.getPassword());
return user;
} catch (DataAccessException e) {
e.printStackTrace();//记录日志
return null;
}
}
}
6. 编写cn.itcast.web.servlet.LoginServlet类
package cn.itcast.web.servlet;
import cn.itcast.dao.UserDao;
import cn.itcast.domain.User;
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("/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.设置编码
req.setCharacterEncoding("utf-8");
//2.获取请求参数
String username = req.getParameter("username");
String password = req.getParameter("password");
//3.封装user对象
User loginUser = new User();
loginUser.setUsername(username);
loginUser.setPassword(password);
//4.调用UserDao的login方法
UserDao dao = new UserDao();
User user = dao.login(loginUser);
//5.判断user
if(user == null){
//登录失败
req.getRequestDispatcher("/failServlet").forward(req,resp);
}else{
//登录成功
//存储数据
req.setAttribute("user",user);
//转发
req.getRequestDispatcher("/successServlet").forward(req,resp);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
}
7. 编写FailServlet和SuccessServlet类
@WebServlet("/successServlet")
public class SuccessServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取request域中共享的user对象
User user = (User) request.getAttribute("user");
if(user != null){
//给页面写一句话
//设置编码
response.setContentType("text/html;charset=utf-8");
//输出
response.getWriter().write("登录成功！"+user.getUsername()+",欢迎您");
}
}
@WebServlet("/failServlet")
public class FailServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//给页面写一句话
//设置编码
response.setContentType("text/html;charset=utf-8");
//输出
response.getWriter().write("登录失败，用户名或密码错误");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
8. login.html中form表单的action路径的写法
* 虚拟目录+Servlet的资源路径
9. BeanUtils工具类，简化数据封装
* 用于封装JavaBean的
1. JavaBean：标准的Java类
1. 要求：
1. 类必须被public修饰
2. 必须提供空参的构造器
3. 成员变量必须使用private修饰
4. 提供公共setter和getter方法
2. 功能：封装数据
2. 概念：
成员变量：
属性：setter和getter方法截取后的产物
例如：getUsername() --> Username--> username
3. 方法：
1. setProperty()
2. getProperty()
3. populate(Object obj , Map map):将map集合的键值对信息，封装到对应的JavaBean对象中
微信
支付宝
