C/S: Client/Server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序

如：QQ，迅雷…
- 优点：
  
  用户体验好
- 缺点：
  
  开发、安装，部署，维护麻烦
B/S: Browser/Server 浏览器/服务器端

扫描二维码关注公众号，回复： 10433006 查看本文章

只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
- 优点：开发、安装，部署，维护简单
- 缺点：
  1. 如果应用过大，用户的体验可能会受到影响
  2. 对硬件要求过高

1.2.B/S架构详解

资源分类：
- 静态资源：使用静态网页开发技术发布的资源。
  - 特点：
    - 所有用户访问，得到的结果是一样的。
    - 如：文本，图片，音频、视频, HTML,CSS,JavaScript…
    - 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
- 动态资源：使用动态网页及时发布的资源。
  
  特点：
  - 所有用户访问，得到的结果可能不一样。
  - 如：jsp/servlet,php,asp…
  - 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

2.HTML基础

2.1.概述

概念：是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言
超文本:

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言:

由标签构成的语言。<标签名称> 如 html，xml

标记语言不是编程语言。

2.2.快熟入门

语法：

html文档后缀名 .html 或者 .htm
标签分为
- 围堵标签：有开始标签和结束标签。如 <html> </html>
- 自闭和标签：开始标签和结束标签在一起。如 <br/>
标签可以嵌套：

需要正确嵌套，不能你中有我，我中有你
- 错误：<a><b></a></b>
- 正确：<a><b></b></a>
在开始标签中可以定义属性。属性是由键值对构成，值需要用**引号(单双都可)**引起来
html的标签不区分大小写，但是建议使用小写。

<html>
        <head>
            <title>title</title>
        </head>

        <body>
            <FONT color='red'>Hello World</font><br/>

            <font color='green'>Hello World</font>
        </body>
	
</html>

2.3.标签学习（部分）

2.3.1.文件标签：

构成 html 最基本的标签

<html> : html文档的根标签
<head>：头标签。用于指定 html 文档的一些属性。引入外部的资源
- <meta charset="utf-8"/>：提供有关页面的元信息 参考
- <link rel="stylesheet" type="text/css" href="css/webbase.css"/>：链接一个外部样式表
<title>：标题标签。
<body>：体标签
<!DOCTYPE html>：html5 中定义该文档是 html 文档。

2.3.2.文本标签：

注释：
<h1> to <h6>：标题标签。 h1~h6:字体大小逐渐递减

<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线

它的属性：
- color：颜色
- width：宽度
- size：高度
- align：对其方式
  
  可选：center：居中；left：左对齐；right：右对齐
<b>：字体加粗
<i>：字体斜体
<font>:字体标签
<center>:文本居中
- 属性：
  
  color：颜色；size：大小； face：字体

属性定义：
* 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. 数值%：占比相对于父元素的比例

2.3.3.图片标签：

<img>：展示图片
- 属性：
  - src：指定图片的位置
  - alt：规定图像的替代文本。

<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
 <!--相对路径
		* 以.开头的路径
			* ./：代表当前目录  ./image/1.jpg
			* ../:代表上一级目录
		     -->
 <img src="./image/jiangwai_1.jpg">
 <img src="../image/jiangwai_1.jpg">

2.3.4.列表标签：

无序列表：

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

有序列表：

<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

2.3.5.链接标签：

<a>:定义一个超链接

属性：
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开

  <a href="http://www.baidu.com">点我</a>

2.3.6.div 和 span：

<p>：标记了一个段落，中间写一段文字
<div>:每一个 div 占满一整行。块级标签(自动换行)
<span>：文本信息在一行展示。行内标签内联标签（不会换行）

具体用法，参见：

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

<p><span>some text.</span>some other text.</p>

2.3.7.语义化标签：

html5 中为了提高程序的可读性，提供了一些标签。

<header>：页眉
<footer>：页脚

2.3.8.表格标签：

<table>：定义表格
* width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
<tr>：定义行
- bgcolor：背景色
- align：对齐方式
<td>：定义单元格
- colspan：合并列
- rowspan：合并行
<th>：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

  <table border="1">
  <caption>Monthly savings</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </tbody>
</table>

2.4.表单标签

2.4.1.表单：

概念：用于采集用户输入的数据的。用于和服务器进行交互。

<form>：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

属性：

action：指定提交数据的URL
method:指定提交方式

分类：一共7种，2 种比较常用。

get：
1. 请求参数会在地址栏中显示。会封装到请求行中。
2. 请求参数大小是有限制的。
3. 不太安全。
post：
2. 请求参数不会再地址栏中显示。会封装在请求体中。
2. 请求参数的大小没有限制。
3. 较为安全。
其它：HEAD、 PUT、DELETE、OPTIONS、TRACE

总结：

get 查看数据,
post 创建新数据行,
put 更新数据,
delete 删除数据行

表单项中的数据要想被提交：必须指定其name属性

2.4.2.表单项标签：

<input>：可以通过type属性值，改变元素展示的样式

type属性：

text：文本输入框，默认值

placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio:单选框

注意：
- 要想让多个单选框实现单选的效果，则多个单选框的 name 属性值必须一样。
- 一般会给每一个单选框提供 value 属性，指定其被选中后提交的值
- checked 属性，可以指定默认值。如下，默认为 male

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
</form>

checkbox：复选框

注意：
- 一般会给每一个单选框提供 value 属性，指定其被选中后提交的值
- checked属性，可以指定默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息。

按钮类：

submit：提交按钮。可以提交表单
button：普通按钮
image：图片提交按钮

<select>: 下拉列表

子元素：option，指定列表项

<form>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected="selected">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

<textarea>：文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行。

<textarea rows="10" cols="30">
The cat was playing in the garden. </textarea>

**label **：指定输入项的文字描述信息

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

注意：label 的 for 属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

3.CSS基础

3.1.概述

概念： Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效
好处：
1. 功能强大
2. 将内容展示和样式控制分离
  - 降低耦合度。解耦
  - 让分工协作更容易
  - 提高开发效率

3.2.CSS的使用

3.2.1.CSS 与html 结合方式

内联样式
- 在标签内使用 style 属性指定css代码
- 如：
```
<div style="color:red;">hello css</div>
```

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码,
使用选择器，控制所需要的对象

如：

		<style>
		        div{
		            color:blue;
		        }	
		</style>

			<div>hello css</div>

外部样式
1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
  
  前两个属性为固定写法：
  - rel="stylesheet"：定义 href 连接的文档是一个新样式表（定义文档关系）
  - type="text/css"：规定被链接文档的 MIME 类型（文本/css,即css文本）
    
    说如果某种浏览器不能识别css的，会将代码认为text，从而不显示也不报错。

       a.css文件：				
       				div{
       				    color:green;
       					}


		<link rel="stylesheet" type="text/css" 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>3.2.2 css语法

3.2.2.css语法

格式：

选择器 {
		属性名1:属性值1;
		属性名2:属性值2;
		...
		}

选择器:筛选具有相似特征的元素

多重声明：

如果要定义不止一个声明，每一对属性需要使用；隔开，最后一对属性可以不加。
记得写引号

**提示：**如果值为若干单词，则要给值加引号""
- p {font-family: "sans serif";}
值的不同写法和单位
1. 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：p { color: #ff0000; }
2. 为了节约字节，我们可以使用 CSS 的缩写形式：p { color: #f00; }
3. 我们还可以通过两种方法使用 RGB 值：
  - p { color: rgb(255,0,0); }
  - p { color: rgb(100%,0%,0%); }
请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：
```
body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }
```

3.2.3.选择器

基础选择器（优先级1>3>2）

id选择器：选择具体的id属性值的元素。建议在一个html页面中id值唯一
- 语法：#id属性值{}
```
     #red {color:red;}
```
元素选择器：选择具有相同标签名称的元素
- 语法：标签名称{}
- 注意：id选择器优先级高于元素选择器
```
[html {color:black;}
```
类选择器：选择具有相同的class属性值的元素。
- 语法：.class属性值{}
- 注意：类选择器选择器优先级高于元素选择器
```
.fancy td {
	color: #f60;
	background: #666;
	}
```

扩展选择器：

选择所有元素
- 语法： *{}
并集选择器：选择两个
- 选择器1,选择器2{}
```
h2, p {color:gray;}
```
后代选择器(包含选择器)：选择器1元素下的选择器2元素
- 语法： 选择器1 选择器2{}
```
h1 em {color:red;}
```
```
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
```
- 注意：两个元素之间的层次间隔可以是无限的，可选择任意后代
子元素选择器：只选择某个元素的子元素（一层）
- 语法： 选择器1 > 选择器2{}
```
h1 > strong {color:red;}
```
```
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
```
- 拓展：结合后代选择器和子选择器
```
table.company td > p
```
  上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该table元素有一个包含 company 的 class 属性。

属性选择器：选择元素名称，属性名=属性值的元素

语法： 元素名称[属性名]{}

<!--对有 href 属性的锚（a 元素）应用样式>
	a[href] {color:red;}
<!将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色>
	a[href][title] {color:red;}

<h1>可以应用样式：</h1>
<a title="W3School Home" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式：</h1>
<a href="http://w3school.com.cn">W3School</a>

相邻兄弟选择器：选择紧接在另一元素后的元素（二者必须有相同父元素）。
- 语法：元素1 + 元素2 {}
```
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
```
```
li + li {font-weight:bold;}
```
  - 上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
  - 这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
  - 请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。

伪类选择器：选择一些元素具有的状态

语法： 元素:状态{}

如：在 <a>标签上设置

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

拓展：

first-child 伪类：选择元素的第一个子元素

 p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

<div>
	<p>These are the necessary steps:</p>
<ul>
	<li>Intert Key</li>
	<li>Turn key <strong>clockwise</strong></li>
	<li>Push accelerator</li>
</ul>
	<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。
第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。

:lang 伪类：使你有能力为不同的语言定义特殊的规则

在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

<html>
<head>
<style type="text/css">
    q:lang(no)
       {
       quotes: "~" "~"
       }
</style>
</head>

<body>
	<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

伪元素：用于向某些选择器设置特殊效果

参考链接
1. :first-line ：用于向文本的首行设置特殊样式。
2. :first-letter：用于向文本的首字母设置特殊样式
3. :before：在元素的内容前面插入新内容。
4. :after：可以在元素的内容之后插入新内容。

3.2.4.属性

字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：对其方式
- line-height：行高
背景
- background：
边框
- border：设置边框，符合属性
尺寸
- width：宽度
- height：高度
盒子模型：控制布局 建议参考
- margin：外边距
- padding：内边距
  - 默认情况下内边距会影响整个盒子的大小
  - box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
- float：浮动
- left
- right

4.JavaScript

4.1.概述

概念： 一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有 JavaScript 的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能：可以来增强用户和 html 页面的交互过程，可以来控制 html 元素，让页面有一些**动态的效果，**增强用户的体验。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

命名规范：JS 大小写敏感

常量：全部大写 NUM
变量：小驼峰式 userInfo
函数 & 方法：小驼峰式 getName()
类 & 构造函数：大写驼峰式 Persion
私有属性和方法：前缀为下划线 _name: string;

4.2.ECMAScript基本语法

客户端脚本语言的标准。

4.2.1.与html结合方式

内部 JS：
- 定义<script>，标签体内容就是js代码
外部 JS：
- 定义<script>，通过src属性引入外部的js文件

注意：

<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
<script>可以定义多个。

4.2.2.注释

单行注释：//注释内容
多行注释：/* 注释内容 */

4.2.3.数据类型

字符串值
数值
布尔值
数组
对象。

JavaScript 定义了 5 种原始数据类型，举例：

number：数字。整数/小数/NaN(比如字符串转换失败的数字"123aa")
string：字符串。字符串 “abc” “a” ‘abc’
boolean: true 和 false
null：一个对象为空的占位符
undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为 undefined

4.2.4.变量

变量：一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言。
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
- 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法：
- var 变量名 = 初始化值;
- typeof 运算符：获取变量的类型。
  
  注：null 运算后得到的是 object
- 未使用等号赋值，声明之后，变量是没有值的。（技术上，它的值是 undefined。）

4.2.5.运算

一元运算符：只有一个运算数的运算符

++与--：自增、自减

混合用：前++先运算在使用，后++先用后运算。（运算即自增、自减）
- +(-)：正负号
  
  注意：在 JS 中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
其他类型转 number：
- string 转 number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
- boolean 转 number：true转为1，false转为0

算数运算符

+ - * / %…

赋值运算符

= += -+=…

比较运算符

> < >= <= == ===(全等于)

比较方式

类型相同：直接比较

字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

类型不同：先进行类型判断，再比较
- ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

逻辑运算符

&& || !

其他类型转boolean：

number：0或NaN为假，其他为真
string：除了空字符串("")，其他都是true
null&undefined:都是 false
对象：所有对象都为true

三元运算符

表达式? 值1:值2;判断表达式的值，如果是**true **则取值1，如果是 false 则取值2；

 var c = a > b ? 1:0;

4.2.6.流程控制语句

if...else...
switch:
- 在java中，switch语句可以接受的数据类型：
  
  byte int shor char,枚举(1.5) ,String(1.7)
- 在JS中,switch语句可以接受任意的原始数据类型
while
do...while
for

4.2.7. JS 特殊语法

语句以;结尾，如果一行只有一条语句则;可以省略 (不建议)
变量的定义使用var关键字，也可以不使用
- 用：定义的变量是局部变量
- 不用：定义的变量是全局变量(不建议)
tips：若定义在方法内部，需要调用才可使用。

4.2.8.基本对象

在 JavaScript 中，几乎“所有事物”都是对象。除了前面数据类型提到的5种原始值，都是对象。

Function：函数(方法)对象

创建方式：

 1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
 2. 
     function 方法名称(形式参数列表){
              方法体
     }

 3. 
        var 方法名 = function(形式参数列表){
                        方法体
         }

属性：方法名称.length:代表形参的个数
特点：
1. 方法定义是，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关(无重载)
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
调用：

方法名称(实际参数列表);

Array:数组对象

创建：
- var arr = new Array(元素列表);
- var arr = new Array(默认长度);
- var arr = [元素列表];
方法
- join(参数):将数组中的元素按照指定的分隔符拼接为字符串
- push()：向数组的末尾添加一个或更多元素，并返回新的长度。
属性：length:数组的长度
特点：JS中，数组元素的类型可变的，数组长度可变的。

Boolean

new Boolean(value);	//构造函数
Boolean(value);		//转换函数,返回 bool 值

Date：日期对象

创建： var date = new Date();
方法：
- toLocaleString()：返回当前date对象对应的时间本地字符串格式
- getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

Math：数学对象

创建：Math对象不用创建，直接使用。 Math.方法名();
方法：
- random():返回 0 ~ 1 之间的随机数。含0不含1
- ceil(x)：对数进行上舍入。
- floor(x)：对数进行下舍入。
- round(x)：把数四舍五入为最接近的整数。
属性： PI 圆周率

Number

var myNum=new Number(value);//返回一个新创建的 Number 对象
var myNum=Number(value);//它将把自己的参数转换成一个原始的数值，并且返回这个值

String

new String(s);//它返回一个新创建的 String 对象
String(s);//只把 s 转换成原始的字符串，并返回转换后的值

Global

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
方法：
- encodeURI():urI 编码
- decodeURI():urI 解码
- encodeURIComponent():url 编码,编码的字符更多(解析含有分隔符，比如 ? 和 #)
- decodeURIComponent():url 解码
- parseInt():将字符串转为数字
  
  逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
- isNaN():判断一个值是否是 NaN
  
  NaN六亲不认，连自己都不认。NaN参与的==比较全部为 false
- eval():计算 JavaScript 字符串，并把它作为脚本代码来执行。
URl 编码： %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

RegExp：正则表达式对象

正则表达式：定义字符串的组成规则。
欲更详细，参考链接

单个字符:[]：方括号用于查找某个范围内的字符：
- 如： [a] [ab] [a-zA-Z0-9_]
元字符:代表特殊含义的单个字符:
- \d:单个数字字符 [0-9]
- \w:单个单词字符[a-z A-Z 0-9]
量词符号：
- ?：表示出现0次或1次
- *：表示出现0次或多次
- +：出现1次或多次
- {m,n}:表示 m<= 数量 <= n
  
  m如果缺省： {,n}最多n次
  
  n如果缺省：{m,} 最少m次
开始结束符号
- ^:开始
- $:结束
正则对象：

创建
- var reg = new RegExp("正则表达式");
- var reg = /正则表达式/;
方法
- test(参数):验证指定的字符串是否符合正则定义的规范

4.3.BOM

4.3.1.概述

概念：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象。

组成：

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

4.3.2.Window：窗口对象

方法

与弹出框有关的方法：
- alert() 显示带有一段消息和一个确认按钮的警告框。
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
  - 如果用户点击确定按钮，则方法返回 true
  - 如果用户点击取消按钮，则方法返回 false
- prompt() 显示可提示用户输入的对话框。
  - 返回值：获取用户输入的值
与打开关闭有关的方法：
- close() 关闭浏览器窗口。谁调用我，我关谁
- open() 打开一个新的浏览器窗口。返回新的Window对象
与定时器有关的方式
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
  - 参数：
    1. js代码或者方法对象
    2. 毫秒值
  - 返回值：唯一标识，用于取消定时器
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
- clearInterval() 取消由 setInterval() 设置的 timeout。

属性：

获取其他BOM对象：
- history
- location
- Navigator
- Screen:
获取DOM对象
- document

特点：

Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();

4.3.3.Location：地址栏对象

创建(获取)：
1. window.location
2. location
方法：
- reload() 重新加载当前文档。刷新
属性
- href 设置或返回完整的 URL。

4.3.4.History：历史记录对象

创建(获取)：
1. window.history
2. history
方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。

参数：
- 正数：前进几个历史记录
- 负数：后退几个历史记录

属性：
- length 返回当前窗口历史列表中的 URL 数量。

4.4.DOM

4.4.1.概述

概念： Document Object Model 文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他5个的父对象
XML DOM：针对 XML 文档的标准模型
HTML DOM ：针对 HTML 文档的标准模型

4.4.2.核心DOM

Document：文档对象

创建(获取)：在html中dom模型中可以使用 window 对象来获取
- window.document
- document
方法：

获取 Element 对象：
- getElementById() ：根据 id 属性值获取元素对象。id 属性值一般唯一
- getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据 Class 属性值获取元素对象们。返回值是一个数组
- getElementsByName(): 根据 name 属性值获取元素对象们。返回值是一个数组
创建其他 DOM 对象：
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()

Element：元素对象

获取/创建：通过document 来获取和创建
方法：
- removeAttribute()：删除属性
- setAttribute()：设置属性

Node：节点对象，其他5个的父对象

特点：所有dom对象都可以被认为是一个节点
方法：

CRUD dom树：
- appendChild()：向节点的子节点列表的结尾添加新的子节点。
- removeChild() ：删除（并返回）当前节点的指定子节点。
- replaceChild()：用新节点替换一个子节点。
属性：
- parentNode 返回节点的父节点。

4.4.3.HTML DOM

标签体的设置和获取：innerHTML
使用 html 元素对象的属性
控制元素样式
1. 使用元素的style属性来设置

提前定义好类选择器的样式，通过元素的 className 属性来设置其 class 属性值。

 <script>
   	document.getElementById("p1").innerHTML="New text!";
   	//修改样式，font-size--> fontSize
   	document.getElementById("p2").style.fontSize = "20px";
</script>

4.4.4.事情监听

概念：某些组件被执行了某些操作后，触发某些代码的执行。

事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮文本输入框…
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件：

点击事件：
- onclick：单击事件
- ondblclick：双击事件
焦点事件
- onblur：失去焦点
- onfocus:元素获得焦点。
加载事件：
- onload：一张页面或一幅图像完成加载。
加载事件：
- onload：一张页面或一幅图像完成加载。
鼠标事件：
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
键盘事件：
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
选择和改变
onchange 域的内容被改变。
onselect 文本被选中。
表单事件：
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。

5.JSP

JSP（全称 Java Server Pages）是由 Sun Microsystems 公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求，而动态生成 HTML、XML 或其他格式文档的Web网页的技术标准。菜鸟教程

一个特殊的页面，其中既可以指定定义html标签，又可以定义 java 代码
JSP 本质上就是一个 Servlet
通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。
JSP标签有多种功能，比如访问数据库、记录用户选择信息、访问JavaBeans组件等，还可以在不同的网页中传递控制信息和共享信息。

生命周期，与 servlet 相似

编译阶段：servlet容器编译servlet源文件，生成servlet类
初始化阶段：加载与JSP对应的servlet类，创建其实例，并调用它的初始化方法
执行阶段：调用与 JSP 对应的 servlet 实例的服务方法
销毁阶段：调用与JSP对应的servlet实例的销毁方法，然后销毁servlet实例

5.1.语法

脚本程序 可以包含任意量的Java语句、变量、方法或表达式，只要它们在脚本语言中是有效的。
JSP声明 一个声明语句可以声明一个或多个变量、方法，供后面的Java代码使用。在JSP文件中，您必须先声明这些变量和方法然后才能使用它们。
JSP表达式 一个JSP表达式中包含的脚本语言表达式，先被转化成String，然后插入到表达式出现的地方。表达式元素中可以包含任何符合 Java 语言规范的表达式，但是不能使用分号来结束表达式。

格式：

<% 代码片段 %>：脚本程序，在service方法中。service方法中可以定义什么，该脚本中就可以定义什么。
<%! 代码 %>：JSP声明，在 jsp 转换后的 java 类的成员位置。
<%= 代码 %>：JSP表达式，会输出到页面上。输出语句中可以定义什么，该脚本中就可以定义什么。

XML 表示：

<jsp:scriptlet>
   代码片段
</jsp:scriptlet>

<jsp:declaration>
   代码片段
</jsp:declaration>

<jsp:expression>
   表达式
</jsp:expression>

注释规则

html 注释：: 只能注释 html 代码片段
jsp注释：（推荐使用）<%-- --%>：可以注释所有

5.2.指令

作用：用于配置 JSP 页面，导入资源文件

格式：<%@ 指令名称属性名1=属性值1 属性名2=属性值2 ... %>

分类：

page：配置 JSP 页面的
- contentType：等同于response.setContentType()。设置响应体的 mime 类型以及字符集，也可以设置当前 jsp 页面的编码
- import：导包
- errorPage：当前页面发生异常后，会自动跳转到指定的错误页面
- isErrorPage：标识当前是否为错误页面。
  - true：是，可以使用内置对象 exception
  - false：否。默认值。不可以使用内置对象 exception

中文乱码

在 JSP 文件头部添加以下代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

include：页面包含的。导入页面的资源文件

<%@ include file="top.jsp"%>

taglib：导入资源

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

prefix：前缀，自定义的

5.3.内置对象

在 jsp 页面中不需要创建，直接使用的对象
一共有9个：前面4个为域对象

变量名	真实类型	作用
pageContext	PageContext	当前页面共享数据，还可以获取其他八个内置对象
request	HttpServletRequest	一次请求访问的多个资源(转发)
session	HttpSession	一次会话的多个请求间
application	ServletContext	所有用户间共享数据
response	HttpServletResponse	响应对象
page	Object	当前页面(Servlet)的对象 this
out	JspWriter	输出对象，数据输出到页面上
config	ServletConfig	Servlet的配置对象
exception	Throwable	异常对象

response.getWriter() 和 out.write() 的区别：

在 tomcat 服务器真正给客户端做出响应之前，会先找 response 缓冲区数据，再找 out 缓冲区数据。
response.getWriter() 数据输出永远在 out.write() 之前
参考

5.4.示例交互

SpringMVC + JSP
JSP：

function changePageSize() {
			//获取下拉框的值
			var pageSize = $("#changePageSize").val();

			//向服务器发送请求，改变每页显示条数
			location.href = "${pageContext.request.contextPath}/orders/findAll.do?page=1&pageSize=" + pageSize;
		}
		$(document).ready(function() {
			// 选择框
			$(".select2").select2();

			// WYSIHTML5编辑器
			$(".textarea").wysihtml5({
				locale : 'zh-CN'
			});
		});

Controller：

@RequestMapping("/findAll.do") 
public ModelAndView findAll(
    @RequestParam(name = "page", required = true, defaultValue = "1") Integer page, 
    @RequestParam(name = "pageSize", required = true, defaultValue = "10") Integer pageSize) throws Exception { 
    List<Orders> ordersList = ordersService.findAllByPage(page, pageSize); 
    PageInfo pageInfo = new PageInfo(ordersList); 
    ModelAndView mv = new ModelAndView(); 
    mv.setViewName("order-list"); //JSP页面名称
    mv.addObject("pageInfo", pageInfo); 
    return mv; 
}

6.EL表达式

概念：Expression Language 表达式语言
作用：**替换和简化 **jsp 页面中 java 代码的编写。
语法：${表达式}
- 注意：jsp 默认支持 el 表达式的。如果要忽略 el 表达式
  - 设置 jsp 中 page 指令中：isELIgnored="true" 忽略当前 jsp 页面中所有的 el 表达式
  - \${表达式} ：忽略当前这个el表达式

运算：
- 运算符：
  - 算数运算符： + - * /(div) %(mod)
  - 比较运算符： > < >= <= == !=
  - 逻辑运算符： &&(and) ||(or) !(not)
  - 空运算符： empty
- 功能：用于判断字符串、集合、数组对象是否为null或者长度是否为0
- ${empty list}:判断字符串、集合、数组对象是否为null或者长度为0
- ${not empty str}:表示判断字符串、集合、数组对象是否不为null 并且长度>0

获取值：el 表达式只能从域对象中获取值

语法：

${域名称.键名}：从指定域中获取指定键的值

域名称：（范围升序）

pageScope	pageContext
requestScope	request
sessionScope	session
applicationScope	application（ServletContext）

举例：在 request 域中存储了name=张三
获取：${requestScope.name}，为空则显示为 null

${键名}：表示依次从最小的域中查找是否有该键对应的值，直到找到为止。
获取对象、List集合、Map集合的值
1. 对象：${域名称.键名.属性名}
  * 本质上会去调用对象的getter方法
2. List集合：${域名称.键名[索引]}
3. Map集合：
- ${域名称.键名.key名称}
- ${域名称.键名["key名称"]}

隐式对象：

el 表达式中有11个隐式对象

隐含对象	类型	说明
PageContext	javax.servlet.ServletContext	表示此JSP的PageContext
PageScope	java.util.Map	取得Page范围的属性名称所对应的值
RequestScope	java.util.Map	取得Request范围的属性名称所对应的值
sessionScope	java.util.Map	取得Session范围的属性名称所对应的值
applicationScope	java.util.Map	取得Application范围的属性名称所对应的值
param	java.util.Map	如同ServletRequest.getParameter(String name)。回传String类型的值
paramValues	java.util.Map	如同ServletRequest.getParameterValues(String name)。回传String[]类型的值
header	java.util.Map	如同ServletRequest.getHeader(String name)。回传String类型的值
headerValues	java.util.Map	如同ServletRequest.getHeaders(String name)。回传String[]类型的值
cookie	java.util.Map	如同HttpServletRequest.getCookies()
initParam	java.util.Map	如同ServletContext.getInitParameter(String name)。回传String类型的值

pageContext：获取 jsp 其他八个内置对象
- ${pageContext.request.contextPath}：动态获取虚拟目录

重要拓展

EL 提供.和[ ]两种运算符来存取数据。

如果要动态取值时，就可以用[ ]来做，而.无法做到动态取值
${ user. My-Name}应当改为${user["My-Name"]}
${sessionScope.user[data]}中 data 是一个变量

7.JSTL

概念：JavaServer Pages Tag Library JSP标准标签库
- 是由Apache组织提供的开源的免费的jsp标签 <标签>
作用：用于简化和替换jsp页面上的 java 代码
使用步骤：
1. 导入jstl相关jar包
2. 引入标签库：taglib指令
```
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
```
使用标签
常用的JSTL标签

if:相当于java代码的if语句

属性：
test 必须属性，接受boolean表达式
- 如果表达式为true，则显示if标签体内容，如果为false，则不显示标签体内容
- 一般情况下，test属性值会结合el表达式一起使用

注意：

c:if标签没有else情况，想要else情况，则可以再定义一个c:if标签

 <c:if test="${not empty list}">
        遍历集合...
 </c:if>

choose:相当于java代码的switch语句

使用choose标签声明相当于switch声明
使用when标签做判断相当于case
使用otherwise标签做其他情况的声明相当于default

 <c:choose>
        <c:when test="${number == 1}">星期一</c:when>
        <c:when test="${number == 2}">星期二</c:when>
        <c:when test="${number == 3}">星期三</c:when>
        <c:when test="${number == 4}">星期四</c:when>
        <c:when test="${number == 5}">星期五</c:when>
        <c:when test="${number == 6}">星期六</c:when>
        <c:when test="${number == 7}">星期天</c:when>

        <c:otherwise>数字输入有误</c:otherwise>
 </c:choose>

foreach:相当于java代码的for语句
- items:容器对象
- var:容器中元素的临时变量
- varStatus:循环状态对象
index:容器中元素的索引，从0开始

count:循环次数，从1开始

<c:forEach begin="1" end="10" var="i" step="2" varStatus="s">
    ${i} <h3>${s.index}<h3> <h4> ${s.count} </h4><br>

</c:forEach>

ages Tag Library JSP标准标签库

- 是由Apache组织提供的开源的免费的jsp标签		`<标签>`

作用：用于简化和替换jsp页面上的 java 代码
使用步骤：
1. 导入jstl相关jar包
2. 引入标签库：taglib指令
```
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
```
使用标签
常用的JSTL标签

if:相当于java代码的if语句

属性：
test 必须属性，接受boolean表达式
- 如果表达式为true，则显示if标签体内容，如果为false，则不显示标签体内容
- 一般情况下，test属性值会结合el表达式一起使用

注意：