0%

一.Request概述
用户通过浏览器访问服务器时,Tomcat将HTTP请求中所有信息封装在Request对象中
作用:开发人员可以通过Request对象方法,来获取浏览器发送的所有信息

Request体系结构

ServletRequest

HttpServletRequest

org.apache.catalina.connector.RequestFacade(由tomcat厂商提供实现类)
二.Request获取Http请求信息
2.1 获取请求行信息
例如:
GET /Day34_Request_war_exploded/RequestDemo01 HTTP/1.1
相关API:
说明
API
获取请求方式 String getMethod()
获取项目虚拟路径名 String getContextPath()
获取URI
(统一资源标识符) String getRequestURI()
获取URL
(统一资源定位符) StringBuffer getRequestURL()
获取协议和版本号 String getProtocol()
获取客户端IP String getRemoteAddr()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@WebServlet("/RequestDemo01")
public class RequestDemo01 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// System.out.println(req);
//1.获取请求方式
System.out.println("Request Method "+req.getMethod());
//2.获取项目路径
System.out.println("Project Path "+req.getContextPath());
//3.获取URI
System.out.println("URI "+req.getRequestURI());
//4.获取URL
System.out.println("URI "+req.getRequestURL());
//5.协议和版本
System.out.println("Protocol & Version "+ req.getProtocol());
//6.客户端IP
System.out.println("IP "+ req.getRemoteAddr());}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}

//输出
Request Method: GET
Project Path: /Day34_Request_war_exploded
URI: /Day34_Request_war_exploded/RequestDemo01
URL: http://127.0.0.1:8080/Day34_Request_war_exploded/RequestDemo01
Protocol & Version: HTTP/1.1
IP: 127.0.0.1
2.2 获取请求头信息
例如:

Host:locaohost:8080

相关API

说明
API
获取请求头名称对应的值 String getHeader(String name)
获取所有请求头的名称 Enumeration getHeaderNames()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@WebServlet("/RequestDemo02")
public class RequestDemo02 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取所有请求头名称
Enumeration<String> headerNames = req.getHeaderNames();
//遍历
while (headerNames.hasMoreElements()){
//取出元素名(请求头名称)
String name = headerNames.nextElement();
//根据名称获取值
String value = req.getHeader(name);
System.out.println(value);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}

案例:模拟视频防盗链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@WebServlet("/RefereRequest")
public class RefereRequest extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//0.设置编码,让中文不乱码
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求来源(如果是浏览器地址栏直接访问,referer是Null)
String referer = req.getHeader("referer");
//2.判断是否自己网站发起的请求
if(referer != null && referer.startsWith("http://127.0.0.1:8080")){
resp.getWriter().write("Play Video");
}else {
resp.getWriter().write("Permission Denied");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}

案例:浏览器兼容性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@WebServlet("/UserAgentRequest")
public class UserAgentRequest extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//0.设置语言编码
resp.setContentType("text/html;charset=UTF-8");
//1.获取浏览器版本信息
String useragent = req.getHeader("user-agent");
//2.判断浏览器版本
System.out.println(useragent);
if (useragent.contains("Chrome")){
System.out.println("Chrome");
}else if (useragent.contains("Firefox")){
System.out.println("Firefox");
}else {
System.out.println("Others");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}

2.3 获取请求参数(请求体)
不论是get还是post请求方式,都可以使用下列方式来获取请求参数
参数:
username=jack&password=123
说明
API
获取指定参数名的值 String getParameter(String name);
获取指定参数名的值数组 String[] getParameterValues(String name);
获取所有参数名和对应值数组 Map<String,String[]> getParameterMap()
中文乱码
get:在Tomcat 8 及以上版本,内部URL编码(UTF-8)
post:编码解码不一致,造成乱码现象
客户端(浏览器)编码UTF-8
服务器默认解码:ISO-8859-1
指定解码:void setCharacterEncoding(String env)
注意:指定解码必须在行首

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

@WebServlet("/RequestDemo03")
public class RequestDemo03 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//Get manually
// String username = req.getParameter("username");
// System.out.println(username);
// String password = req.getParameter("password");
// System.out.println(password);
// String[] hobbies = req.getParameterValues("hobby");
// System.out.println(Arrays.toString(hobbies));
//Automatic acquisition
Map<String, String[]> parameterMap = req.getParameterMap();
parameterMap.forEach((k, v) -> {
System.out.println(k + "" + Arrays.toString(v));
});
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
//使用方法一样,可以直接调用get方法
this.doGet(req, resp);
}
}

2.4 BeanUtils
Apache提供的工具类,简化参数封装,即将前端数据直接封装到想要的JavaBean中

导入Jar包

使用工具类封装数据(要求:map集合的key,必须为JavaBean属性名)

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
public class User {
private String username;
private String password;
private String[] hobby;

// 此处省略getter setter toString

@WebServlet("/RequestDemo04")
public class RequestDemo04 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//Get manually
String username = req.getParameter("username");
System.out.println(username);
String password = req.getParameter("password");
System.out.println(password);
String[] hobbies = req.getParameterValues("hobby");
//Automatic acquisition
Map<String, String[]> parameterMap = req.getParameterMap();
parameterMap.forEach((k, v) -> {
System.out.println(k + "" + Arrays.toString(v));
});
//将前端表单数据赋值到user对象中,保存到数据库
User user = new User();
user.setUsername(username);
user.setPassword(password);
user.setHobby(hobbies);
System.out.println(user);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
//使用方法一样,可以直接调用get方法
this.doGet(req, resp);

//使用BeanUtils快速封装数据到User对象中
//map集合的key,必须为JavaBean属性名
Map<String, String[]> parameterMap = req.getParameterMap();
//
User user = new User();
try {
BeanUtils.populate(user, parameterMap);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
System.out.println(user);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
<h3>Bean Utils:</h3>
<form action="/Day34_Request_war_exploded/RequestDemo04" method="post">
Name:
<input type="text" name="username"><br>
Password:
<input type="password" name="password"><br>
Hobby:
<input type="checkbox" name="hobby" value="smoke">smoke
<input type="checkbox" name="hobby" value="drink">drink
<input type="checkbox" name="hobby" value="perm">perm<br>
<input type="submit" value="Post Submit Method">
</form>

2.4.1 变量名是否等于属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//成员变量名username
private String username;


//属性Username,是方法的命名
public String getUsername() {
return username;
}

//属性是getter/setter方法截取之后的产物
//通常情况下,使用IDEA自动生成getter&setter时,变量名 equals 属性
getUsername-Username-username

//不一样的情况
//成员变量名
private String user;
//属性名
public String getUsername() {
return user;
}

三.Request其他功能
3.1 请求转发
一种在服务器内部的资源跳转方式
说明
API
通过request对象,获得转发器对象 RequestDispatcher getRequestDispatcher(String path);
通过转发器对象,实现转发功能 void forward(ServletRequest request,ServletResponse response);
请求转发的特点:
浏览器:只发了一次请求
地址栏:没有改变
只能转发到服务器内部资源

链式编程
request.getRequestDispatcher(“/bServlet”).forward(reqeust,response)
3.2 域对象(共享数据)
域对象:一个有作用访问的对象,可以在范围内共享数据

request域:代表一次请求范围,一般用于一次请求中转发的多个资源中共享数据

说明
API
设置数据 void setAttribute(String name,Object o);
获取数据 Object getAttribute(String name)
删除数据 void removeAttribute(String name)
生命周期

创建时间 用户发送请求时,发送request
销毁时间 服务器返回响应时,销毁request
作用范围 一次请求,包含多次转发

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

@WebServlet("/AServlet")
public class AServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//转发到BServlet
//1.获取转发器对象 path=@WebServlet("/BServlet")
// RequestDispatcher requestDispatcher = req.getRequestDispatcher("/BServlet");
//2.实现转发功能
// requestDispatcher.forward(req,resp);
//AServlet存一个数据
req.setAttribute("name","This is A Object");

//链式编程
req.getRequestDispatcher("/BServlet").forward(req,resp);
}
}

@WebServlet("/BServlet")
public class BServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("B");
String name = (String) req.getAttribute("name");
resp.getWriter().write(name);
}
}

3.3 获取ServletContext对象
应用上下文对象,表示一个web项目
通过request,可以获取ServletContext对象
public ServletContext getServletContext();

1
2
3
4
5
6
7
8
9
10
11
@WebServlet("/RequestDemo05")
public class RequestDemo05 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取当前web项目对象
ServletContext servletContext = req.getServletContext();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}

四.用户登陆案例
实现用户的登录功能
登录成功跳转到SuccessServlet展示:登录成功!xxx,欢迎您
登录失败跳转到FailServlet展示:登录失败,用户名或密码错误

创建web项目,导入BeanUtils(工具类)
编写index.html
User实体类
创建LoginServlet,SuccessServlet,FailedServlet

1
2
3
4
5
<form action="/Day34_Request_war_exploded/loginServlet" method="post">Login
Name:<input type="text" name="username"><br>
Password:<input type="password" name="password"><br>
<input type="submit" value="Login Submit">
</form>
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
55
56
57
58
59
60
61
62
63
64
65
66
67
public class User {
private String username;
private String password;
//此处getter & setter ,toString省略
}


@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.设置request解码方式
req.setCharacterEncoding("UTF-8");
//2.获取浏览器参数,map集合
Map<String, String[]> parameterMap = req.getParameterMap();
//3.使用BeanUtils工具类,封装到User中
User user = new User();
try {
BeanUtils.populate(user, parameterMap);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}

//4.判断(写一个file文件,存储真实到用户名密码,判断)
if ("jack".equals(user.getUsername()) && "123".equals(user.getPassword())){
req.setAttribute("user",user);
req.getRequestDispatcher("/successServlet").forward(req, resp);
}else{
req.getRequestDispatcher("/failedServlet").forward(req, resp);
}
}
}


@WebServlet("/successServlet")
public class SuccessServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.从request域获取user对象
User user = (User) req.getAttribute("user");
//2.提示
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write(user.getUsername()+"Successful");
}
}
@WebServlet("/failedServlet")
public class FailedServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("Login Failed,Wrong Username or Password");
}
}

附录:Servlet模版设置
IDEA-Settings-Editor-File and Code Templates-Other-Web>Jaava code templates>Servlet Annotated Class.java
更改为如下代码

1
2
3
4
5
6
7
#if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NAME};#end #parse("File Header.java") @javax.servlet.annotation.WebServlet("/${Class_Name}")
public class ${Class_Name} extends javax.servlet.http.HttpServlet {
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, java.io.IOException {
this.doPost(request,response); }
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, java.io.IOException {

} }

总结
一 Request概述
开发人员可以通过request对象方法,来获取浏览器发送的所有信息.
二 Request获取Http请求信息

getMethod()

请求方式

get
post
getContextPath()

项目名(虚拟路径)
getRemoteAddr()

客户端的ip地址

getHeader(String key)

Referer

防盗链
User-Agent

浏览器兼容器
getHeaderNames()

参数(体)
api

getParameter()
getParameterValues()
getParameterMap()
BeanUtils工具类

中文乱码

get:tomcat8及以上版本,解决了get方式乱码问题
post:request.setCharacterEncoding(“utf-8”);
三 Request其他功能
请求转发
一种在服务器内部的资源跳转方式

request.getRequestDispatcher(“/内部资源”).forward(request,response);

特点

转发是一次请求
浏览器地址栏不发生变化
只能跳转到服务器内部资源
域对象(共享数据)
api

void setAttribute(String name, Object o)
Object getAttribute(String name)
void removeAttribute(String name)
生命周期

何时创建

用户发送请求时
何时销毁

服务器做出响应后
作用范围

一次请求转发中
获取ServletContext
api

ServletContext getServletContext()

一.Servlet概述
Servlet 运行在服务端的Java小程序,是sun公司提供一套规范,用来处理客户端请求、响应给浏览器的动态资源。
但servlet的实质就是java代码,通过java的API动态的向客户端输出内容

servlet= server+applet 运行在服务器端的java程序。
Servlet是一个接口,一个类要想通过浏览器被访问到,那么这个类就必须直接或间接的实现Servlet接口
二.Servlet快速入门
2.1 代码编写
创建web项目

编写普通java类,实现Servlet接口
写抽象方法(service方法)

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

public class QuickServlet implements Servlet {
@Override
public void init(ServletConfig servletConfig) throws ServletException {}

@Override
public ServletConfig getServletConfig() {
return null;
}

//对外提供服务
/*
request:代表请求
response:代表响应
*/
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
//向浏览器写一句话
servletResponse.getWriter().write("QuickServlet");
}

//表示当前Servlet对象的描述信息
@Override
public String getServletInfo() {
return "快速入门";
}

@Override
public void destroy() {

}}

配置web.xml
配置servlet网络访问路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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_3_1.xsd"
version="3.1">
<!--
把QuickServlet交给tomcat管理
servlet-name:当前servlet的别名(使用类名即可)
servlet-class:全限定类名
-->
<servlet>
<servlet-name>QuickServlet</servlet-name>
<servlet-class>Project.QuickServlet</servlet-class>
</servlet>
<!--
给servlet社长一个网络访问地址(路径)
servlet-name:给指定别名的servlet配置映射
url-pattern:网络访问地址(注意:必须以"/"开头)
-->
<servlet-mapping>
<servlet-name>QuickServlet</servlet-name>
<url-pattern>/QuickServlet</url-pattern>
</servlet-mapping>
</web-app>

部署web项目
启动测试
2.2 执行原理
步骤:
Step 1: Browser通过 Domain 在网络中Request到该 Server(Tomcat)
Step 2: 找到该Server后,通过Project Name查找项目(Day32_Servlet_XML)
Step 3: 通过Source Name(QuickServlet)查找web.xml中同名的url-pattern标签
Step 4: 找到url-pattern同名标签后,查找其映射的servlet-name
Step 5: 通过servlet-name寻找servlet-class
Step 6: 通过反射机制创建QuickServlet
Step 7: 创建后,自动调用service方法,Response to Browser

三.Servlet相关API
3.1 生命周期相关
3.1.1 思想介绍
生命周期:指的是一个对象从创建到销毁到过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//servlet对象创建时,调用此方法
@Override
public void init(ServletConfig servletConfig) throws ServletException {
System.out.println("LifeServlet Created");
}

//用户访问servlet时,调用此方法
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
System.out.println("LifeServlet carried out");
}

//servlet对象销毁时,调用此方法
@Override
public void destroy() {
System.out.println("LifeServlet destroy");
}

创建

1)默认
用户第一次访问时,创建servlet,执行init方法
2)修改servlet创建时机

值 说明
正数 服务器启动时创建
(Tomcat默认1-3,建议4开始)
负数(默认值):-1 用户第一次访问时创建
运行

第二次开始,都调用执行service方法

销毁

服务器正常关闭时,销毁servlet,执行destroy方法

3.1.2 代码演示
LifeServlet

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
public class LifeServlet implements Servlet {
@Override
public void init(ServletConfig servletConfig) throws ServletException {
System.out.println("LifeServlet Created");
}

@Override
public ServletConfig getServletConfig() {
return null;
}

@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
System.out.println("LifeServlet carried out");
}

@Override
public String getServletInfo() {
return null;
}

@Override
public void destroy() {
System.out.println("LifeServlet destroy");
}
}

web.xml

1
2
3
4
5
6
7
8
9
10
11
12
<!--
servlet生命周期
-->
<servlet>
<servlet-name>LifeServlet</servlet-name>
<servlet-class>Project.Demo02.LifeServlet</servlet-class>
<load-on-startup>4</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>LifeServlet</servlet-name>
<url-pattern>/LifeServlet</url-pattern>
</servlet-mapping>

3.2 拓展:ServletConfig接口
Tomcat在Servlet对象创建时,执行init()方法,并创建一个ServletConfig配置对象

主要作用:读取web.xml配置文件Servlet中信息,实现参数和代码的解耦

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
public class EncodingServlet implements Servlet {
//定义全局变量
private ServletConfig servletConfig;
@Override
public void init(ServletConfig servletConfig) throws ServletException {
this.servletConfig = servletConfig;
}

@Override
public ServletConfig getServletConfig() {
return servletConfig;
}

//用户访问,执行service方法
@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
// String encode = "UTF-8";
// servletResponse.getWriter().write(encode);
String encode = getServletConfig().getInitParameter("encode");
servletResponse.getWriter().write(encode);
}
@Override
public String getServletInfo() {
return null;
}

@Override
public void destroy() {

}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--servlet配置对象-->
<servlet>
<servlet-name>EncodingServlet</servlet-name>
<servlet-class>Project.Demo02.EncodingServlet</servlet-class>
<init-param>
<param-name>encode</param-name>
<param-value>UTF-8</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>EncodingServlet</servlet-name>
<url-pattern>/EncodingServlet</url-pattern>
</servlet-mapping>

四.Servlet体系结构
Servlet
顶级接口,提供了5个抽象方法

GenericServlet 抽象类,重写绝大多数的抽象方法,只需要开发者重写service方法

HttpServlet 抽象类,处理Http协议的交互信息(请求,响应),根据不同的请求方式作出不同的处理
4.1 GenericServlet
编写普通Java类继承GenericServlet抽象类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class ServletDemo01 extends GenericServlet {
@Override
public void init() throws ServletException {
System.out.println("ServletDemo01 Created");
}

@Override
public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
super.getServletConfig();//调用父类的配置对象
servletResponse.getWriter().write("ServletDemo01 extends GenericServlet");
}

@Override
public void destroy() {
System.out.println("ServletDemo01 Destroyed");
}
}

配置web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--servlet继承GenericServlet-->
<servlet>
<servlet-name>ServletDemo01</servlet-name>
<servlet-class>Project.Demo03_inherit.ServletDemo01</servlet-class>
<init-param>
<param-name>encode</param-name>
<param-value>UTF-8</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>ServletDemo01</servlet-name>
<url-pattern>/ServletDemo01</url-pattern>
</servlet-mapping>

4.2 HttpServlet
编写前端HTML页面提交表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>


<body>
<h3>Login</h3>
<form action="http://localhost:8080/Day33_Servlet_war_exploded/ServletDemo02" method="get">
<input type="submit" value="Update Form">
</form>

</body>
</html>

编写普通java类,继承HttpServlet抽象类

1
2
3
4
5
6
7
8
9
10
public class ServletDemo02 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("Get");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("Post");
}
}

配置web.xml

1
2
3
4
5
6
7
8
9
<!--servlet继承HttpServlet-->
<servlet>
<servlet-name>ServletDemo02</servlet-name>
<servlet-class>Project.Demo03_inherit.ServletDemo02</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServletDemo02</servlet-name>
<url-pattern>/ServletDemo02</url-pattern>
</servlet-mapping>

4.3 Http错误
响应状态码405
方法没有重写,父类抛出405
例:
ServletDemo02 extends HttpServlet 没有重写get方法,而form使用get方法,则抛出父类405错误

1
2
3
4
5
6
7
8
9
10
//父类方法
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String protocol = req.getProtocol();
String msg = lStrings.getString("http.method_get_not_supported");
if (protocol.endsWith("1.1")) {
resp.sendError(405, msg);
} else {
resp.sendError(400, msg);
}
}

响应状态码500
Java代码写错了

五.Servlet路径
5.1 url-patterns
作用:讲一个请求的网络地址和servlet建立一个映射关系

5.1.1 Servlet映射多个路径

1
2
3
4
5
6
7
8
9
10
11

public class ServletDemo03 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("ServletDemo3 Get Method Run");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("ServletDemo3 Post Method Run");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--    一个Servlet类可以映射多个网络访问地址        -->
<servlet>
<servlet-name>ServletDemo03</servlet-name>
<servlet-class>Project.Demo04_URL_Partten.ServletDemo03</servlet-class>
</servlet>
<!-- 映射地址一 -->
<servlet-mapping>
<servlet-name>ServletDemo03</servlet-name>
<url-pattern>/ServletDemo03</url-pattern>
</servlet-mapping>
<!-- 映射地址二 -->
<servlet-mapping>
<servlet-name>ServletDemo03</servlet-name>
<url-pattern>/Demo03</url-pattern>
</servlet-mapping>

5.1.2 url映射模式
配置url地址取值可以是:

精确匹配

1
2
3
4
5
6
7
8
9
10
11

public class ServletDemo04 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("ServletDemo4 Get Method Run");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("ServletDemo4 Post Method Run");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
<!--目录的匹配规则
只要浏览器符合规则:/aa/xxx
都访问ServletDemo04
-->
<servlet>
<servlet-name>ServletDemo04</servlet-name>
<servlet-class>com.test.Demo04_URL_Partten.ServletDemo04</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServletDemo04</servlet-name>
<url-pattern>/aa/*</url-pattern>
</servlet-mapping>

后缀匹配
*.xxx

例如:*.do

1
2
3
4
5
6
7
8
9
public class ServletDemo05 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("ServletDemo5 Get Method Run");
}@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("ServletDemo5 Post Method Run");
}
}
1
2
3
4
5
6
7
8
9
<!-- 只要浏览器符合后缀匹配规则,都可以访问到这个servlet-->
<servlet>
<servlet-name>ServletDemo05</servlet-name>
<servlet-class>com.test.Demo04_URL_Partten.ServletDemo05</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServletDemo05</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>

5.2 相对/绝对路径
浏览器的地址栏
a标签的href属性
form表单的action属性
js的location.href属性
ajax请求地址

//访问地址:http://localhost:8080/projectname/static/Path.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
27
28
29
30
31
32
33
34
<html>
<head>
<meta charset="UTF-8">
<title>Path</title>
</head>
<body>

<h3>Text Interview Path</h3>

<h4>绝对路径</h4>

<!--
在开发时,强烈建议使用绝对路径
完整:protocol://domain:port/project/SourceName
推荐:/项目名/资源名
-->
<a href="http://localhost:8080/Day33_Servlet_war_exploded/QuickServlet">
带HTTP协议的绝对路径:QuickServlet
</a><br/>

<a href="/Day33_Servlet_war_exploded/QuickServlet">不带HTTP协议的绝对路径:QuickServlet</a>
<br/>

<h4>相对路径</h4>

<!--
相对路径语法:
./当前目录
../上级目录
-->
<a href="../QuickServlet">相对路径:QuickServlet</a>

</body>
</html>

六.Servlet3.0
通过注解配置Servlet,简化web.xml配置Servlet复杂性,提高开发效率,集合所有框架都使用注解

创建web项目
编写普通Java类继承HttpServlet抽象类
配置@WebServlet

1
2
3
4
5
6
7
8
9
@WebServlet("/QuickServlet")
public class QuickServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("Quick Servlet 3.0 Get Method");
}@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("Quick Servlet 3.0 Post Method");
}}

总结
一 Servlet概述
运行在服务器端的java程序
一个类要想通过浏览器被访问到,那么这个类就必须直接或间接的实现Servlet接口
二 Servlet快速入门
① 创建web项目
② 创建普通的java类,实现servlet接口,重写抽象方法
③ 配置web.xml
④ 部署web项目
⑤ 启动测试
三 Servlet相关API
生命周期相关
创建

1)默认情况下,用户第一次访问时创建,执行init方法,只创建一次
2)修改创建时机,在tomcat启动时,创建servlet,执行init方法,只创建一次
运行(提供服务)

用户访问servlet资源时,执行service方法
销毁

服务器正常关闭,销毁servlet,执行destroy方法
ServletConfig接口
加载web.xml配置文件信息,实现参数和代码的解耦
四 Servlet体系结构
Servlet
GenericServlet

HttpServlet
五 Servlet路径
url-pattern
Servlet映射多个url

url映射模式

精确匹配
目录匹配
后缀匹配
相对/绝对路径
绝对路径…
六 Servlet3.0
@WebServlet(“/网络访问地址”)

一.Web知识概述
JavaWeb:将编写好的代码,发布到互联网,可以让所有用户访问

1.1 软件架构
•网络中有很多的计算机,它们直接的信息交流,我们称之为:交互
•在互联网交互的过程的有两个非常典型的交互方式——B/S 交互模型(架构)和 C/S 交互模型(架构)

C/S架构

Client/Server 客户端/服务器
访问服务器资源必须安装客户端软件
优点:用户体验好
缺点:开发(客户端,服务器),部署和维护繁琐

B/S架构

Browser/Server 浏览器/服务器
访问服务器资源不需要专门安装客户端软件,而是直接通过浏览器访问服务器资源.
优点:开发、部署,更新简单
缺点:用户体验差

C/S架构也是一种特殊的B/S架构

1.2 Web服务器作用
开发者通过web服务器可以把本地资源发布到互联网
用户就可以通过浏览器访问这些资源
1.3 资源的分类
资源:计算机中数据文件

静态资源
对于同一个页面,不同用户看到的内容是一样的。
例如:体育新闻、网站门户等,常见后缀: .html、.js、*.css

动态资源 用对于同一个页面,不同用户看到的内容可能不一样。
例如:购物车、我的订单等,常见后缀: .jsp、.aspx、*.php

1.4 常见的Web服务器
Tomcat: Apache组织开源免费的web服务器,支持JavaEE规范(Servlet/Jsp).
Jetty:Apache组织开源免费的小型web服务器,支持JavaEE规范.
JBoss: RedHat红帽公司的开源免费的web服务器,支持JavaEE规范.
Glass Fish:Sun公司开源免费的web服务器,支持JavaEE规范.
WebLogic: Oracle公司收费的web服务器,支持JavaEE规范.
WebSphere:IBM公司收费的web服务器,支持JavaEE规范.
JavaEE规范
在Java中所有的服务器厂商都要实现一组Oracle公司规定的接口,这些接口是称为JavaEE规范。不同厂商的JavaWeb服务器都实现了这些接口,在JavaEE中一共有13种规范。实现的规范越多,功能越强。
二.Tomcat服务器
2.1 Tomcat使用
2.1.1 下载
Tomcat 官网下载地址:https://tomcat.apache.org/download-80.cgi

2.1.2 安装
解压即用

2.1.3 目录结构
ls -F | grep “/

目录 说明
bin/ 启停命令
conf/ 配置文件
lib/ 运行时所依赖的jar包
logs/ 运行日志
temp/ 缓存
webapps/ 发布自己的网站目录
work/ 存放编译生产的.java与.class文件
cd webapps/

目录 说明
docs tomcat的帮助文档
examples web应用实例
host-manager 主机管理
manager 主机管理
ROOT 说默认站点根目录明
[root@localhost webapps]# cd ../conf/

目录 说明
Catalina
catalina.policy
catalina.properties
context.xml
logging.properties
logs
server.xml tomcat 主配置文件
tomcat-users.xml tomcat 管理用户配置文件
tomcat-users.xsd
web.xml
ls -l | grep ^- | awk ‘{print $9}’

文件 说明
BUILDING.txt
CONTRIBUTING.md
LICENSE
NOTICE
README.md
RELEASE-NOTES
RUNNING.txt
2.1.4 启动和关闭
cd apache-tomcat-8.5.54/bin
chmod +x *.sh
./startup.sh
./shutdown.sh

2.1.5 启动报错问题
Java环境变量

解决方法:
配置JAVA_HOME

8080端口被占用
启动时报错

解决方式一:kill pid
netstat -anpl | grep ‘8080’

解决方式二:修改Tomcat端口号
进入Tomcat安装目录/conf/server.xml 文件修改
cat server.xml| grep ‘Connector port’
Connector port=”8080”

如果要启动多个tomcat,需要修改三个端口
2.1.6 发布项目的三种方式
webapps部署
直接放置在 webapps 目录下
cp -r myapp tomcat/webapps
这种方案,一般在开发完毕后使用

server.xml部署不建议使用
在tomcat/conf/server.xml中找到标签,添加标签

1
2

 <Context path="myapp" docBase="apache-tomcat-8.5.54/webapps/myapp"/>

缺点:

I.配置文件修改完后,需要重启才生效
II.server.xml是tomcat核心配置文件,如果操作错误会导致tomcat启动失败

独立xml部署
在tomcat/conf/Catalina/localhost 目录下创建一个xml文件,添加标签

myapp.xml
文件名就是虚拟路径
localhost:8080/myapp/index.html

1
2

2.2 Web项目结构 前端项目

1
2
3
4
5
6
|– myapp(项目名称)
|– css 目录
|– js 目录
|– html目录
|– img 目录
|– index.html
Web项目

1
2
3
4
5
6
7
|– myapp(项目名称)
|– 静态资源目录(html,css,js,img)
|– WEB-INF 目录 (浏览器无法直接访问内部资源)
|– classes 目录(java字节码文件)
|– lib 目录 (当前项目所需要的第三方jar包)
|– web.xml 文件 (当前项目核心配置文件,servlet3.0可以省略)
|– index.html or index.jsp
2.3 IDEA中使用Tomcat
2.3.1 配置Tomcat
IDEA->Edit Configuration->在Application server添加Tomcat解压的路径即可

2.3.2 创建Web项目
IDEA->New Moudle->左侧选Java Enterprise->右侧选Moudle SDK选1.8,JAVAEE Version选JAVAEE 7,Application Server选tomcat,下拉列表勾选Web Application并勾选创建web.xml,下一步即可

2.3.3 发布Web页面
IDEA->选择Edit Configurations->进入Deployment指定context(新版本会默认生成)

2.3.4 页面资源热更新
IDEA->选择Edit Configurations->On ‘Update’ action 和On frame deactivation都选择Update resources

注意:WEB-INF动态资源是无法被浏览器直接访问的,会出现404错误

三.Http协议
3.1 Http协议概述
超文本传输协议(Hyper Text Transfer Protocol)是互联网上应用最为广泛的一种网络协议。
传输协议:在客户端和服务器端通信时,规范了传输数据的格式
HTTP协议特点:
I.基于TCP协议
II.默认端口80
III.基于请求/响应模型
IV.无状态协议(多次请求之间都是独立,不能交互数据)

HTTPS协议:
本质就是HTTP,对通信对数据进行加密
默认端口号443

3.2 Http请求
3.2.1 浏览器查看Http请求协议
get方式(查看Inspect-Network-Request Headers)
请求行 GET /Day32_Tomcat/web/index.html?username=jack&password=123 HTTP/1.1
请求头 Host: localhost:63343
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36 Edg/80.0.361.109
Sec-Fetch-Dest: document
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Referer: http://localhost:63343/Day32_Tomcat/web/index.html
Accept-Encoding: gzip, deflate, br
Accept-Language: zh,en-CN;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Idea-b40ac89=cb70dd01-3e65-4870-9e53-e3ad801dd2b0;
If-Modified-Since: Mon, 13 Apr 2020 10:05:39 GMT
post方式(查看Inspect-Network-Request Headers)
请求头 POST /Day32_Tomcat/web/index.html?username=jack&password=123 HTTP/1.1
请求行 Host: localhost:63343
Connection: keep-alive
Content-Length: 26
Cache-Control: max-age=0
Origin: http://localhost:63343
Upgrade-Insecure-Requests: 1
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36 Edg/80.0.361.109
Sec-Fetch-Dest: document
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Referer: http://localhost:63343/Day32_Tomcat/web/index.html?username=jack&password=123
Accept-Encoding: gzip, deflate, br
Accept-Language: zh,en-CN;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Idea-b40ac89=cb70dd01-3e65-4870-9e53-e3ad801dd2b0;
请求体
(位于Form Data) username=jack&password=123
3.2.2 HTTP请求消息格式
3.2.2.1 请求行
格式
请求方式 请求路径 协议/版本号
例如
POST /Day32_Tomcat/web/index.html?username=jack&password=123 HTTP/1.1
GET /Day32_Tomcat/web/index.html?username=jack&password=123 HTTP/1.1

请求方式区别
get
1.请求参数在地址栏显示(请求行)
2.请求参数大小有限制
3.数据不太安全

post
1.请求参数不在地址栏显示(请求体)
2.请求参数大小没有限制
3.数据相对安全
3.2.2.2 请求头
格式
请求头名称:请求头的值
例如
Host: localhost:8080
常见请求头:Accept开头的,都是浏览器告诉服务器的一些暗语

Host: 访问服务器的地址(域名+端口)

Host: localhost:8080

Connection: 长连接(http1.1协议)

Connection: keep-alive

Cache-Control: 设置缓存数据的存活时间,单位秒

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 客户端支持https加密协议

Upgrade-Insecure-Requests:1

Content-Type: 发送数据的媒体类型

Content-Type: application/x-www-form-urlencoded

Accept: 客户端告诉服务器,客户端支持的数据类型

Accept: text/html,/;

Accept-Charset: 客户端告诉服务器,客户端支持的字符集

Accept-Charset: UTF-8

Accept-Encoding: 客户告诉服务器,客户端支持的压缩格式

Accept-Encoding: gzip, deflate

Accept-Language: 客户端告诉服务器,客户端系统语言环境 简体中文

Accept-Language: zh-CN,zh;q=0.9

Cookie:

Referer: http://baidu.com 上一次请求的地址

User-Agent: 客户端系统和浏览器版本
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) Chrome/63.0 Safari/537.36
浏览器兼容性

3.2.2.3 请求体(正文)
格式
参数名=参数值&参数名=参数值

例如
username=jack&password=123

注意
get方式没有请求体,post有请求体

3.3 Http响应
3.3.1 浏览器查看Http响应协议(查看Inspect-Network-Response Headers,响应体查看Network的Response栏)
响应行 HTTP/1.1 200 OK
响应头 HTTP/1.1 200 OK
content-type: text/html
server: IntelliJ IDEA 2020.1
date: Mon, 13 Apr 2020 10:25:17 GMT
X-Frame-Options: SameOrigin
X-Content-Type-Options: nosniff
x-xss-protection: 1; mode=block
accept-ranges: bytes
cache-control: private, must-revalidate
last-modified: Mon, 13 Apr 2020 10:12:12 GMT
content-length: 317
access-control-allow-origin: http://localhost:63343
vary: origin
access-control-allow-credentials: true
响应体

Login

Login

Name:
Password
3.3.2 HTTP响应消息格式 3.3.2.1 响应行 格式 协议/版本号 状态码

例如
tomcat8:HTTP/1.1 200
tomcat7:HTTP/1.1 200 OK

• 常见状态码

状态码 说明
200 成功
302 重定向
304 从缓存中读取数据
404 请求资源未找到
405 请求的方法未找到
500 服务器内部错误
3.3.2.2 响应头
格式
响应头名称:响应头的值

例如
last-modified: Mon, 13 Apr 2020 10:12:12 GMT

常见响应头:Content开头都是服务器告诉客户端一些暗语

Location:通常与状态码302一起使用,实现重定向操作

Location:http://www.baidu.com

Content-Type:服务器告诉客户端,返回响应体的数据类型和编码方式

Content-Type:text/html;charset=utf-8

Content-Disposition:服务器告诉客户端,以什么样方式打开响应体

in-line(默认):浏览器直接打开相应内容,展示给用户
attachment;filename=文件名:浏览器以附件的方式保存文件 【文件下载】

Refresh::在指定间隔时间后,跳转到某个页面

Refresh:5;http://www.baidu.com

Last-Modified:通常与状态码304一起使用,实现缓存机制

last-modified: Mon, 13 Apr 2020 10:12:12 GMT

3.3.2.3 响应体
服务器返回的数据,由浏览器解析后展示给用户
用户看到页面所有的内容,都是在响应体中返回的
总结
web知识概述
架构分类
C/S

客户端专门安装软件
B/S

浏览器作为客户端
web服务器作用
将本地资源发布到互联网,用户可以通过浏览器访问
资源分类
静态

.html .css .js .jpg
动态

.jsp
常见服务器
Tomcat
tomcat服务器
下载
apache-tomcat-8.5.31-windows-x64.zip
安装
解压缩即可
目录结构
bin

startup.bat

启动
shutdown.bat

关闭
conf

server.xml

配置恩建
lib

logs

temp

webapps

存放自己编写web项目,对外发布
work

启停
startup.bat
shutdown.bat
启动有问题
JAVA_HOME环境变量

端口占用

找到占用端口软件,关闭掉,在启动tomcat
修改tomcat在启动
tomcat发布项目方式
webapps目录

热部署
conf/server.xml

不推荐
conf/catalina/localhost

热部署
web项目目录结构
WEB-INF

classes

lib

web.xml

web3.0之后可选
静态资源

index.html或index.jsp

idea中使用tomcat
配置tomcat

创建web项目

启动

重启tomcat
重新部署项目
http协议
概述
在客户端和服务器端通信时,规范了传输数据的格式
构成
请求格式

请求方式

get
post
URL

协议

请求的描述信息

Referer
User-Agent

数据内容

get方式没有,post才有
响应格式

协议

状态码

200
302
304
404
405
500

响应的描述信息

Location
Content-Type
Content-Disposition
refresh
Last-Modified

数据内容

一.JSON
1.1 JSON概述
Javascript对象表现形式(JavaScript Object Notation)

JavaScript对象表现形式

1
2
let user = {“username”:”ObjName”,”age”:”10”,”gender”:”male/female”};
let product = {“Brander”:”Apple”,”Price”:”8999”};

取代厚重XML,比起XML更小更快更易解析

Json,XML作用:作为数据的载体,在网络中传输

1.2 JSON基础语法

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
55
56
对象类型
{name:value,name:value}

数组类型

[
{name:value,name:value},
{name:value,name:value},
{name:value,name:value}
]

复杂对象:

{
name:value,
array:[{name:value},{},{}],
user:{name:value}
}


<script>
//1.描述用户对象
let user = {"username": "Trump", "Gender": "male", "Age": "103"}
alert(typeof user);//object
alert(user.username + user.Gender + user.Age);

//2.描述用户数组
let users = [
{"username": "John", "Gender": "male", "Age": "103"},
{"username": "Jack", "Gender": "Female", "Age": "23"},
{"username": "Bobe", "Gender": "male", "Age": "13"}
]

for (let user of users) {
console.log(user.username + "," + user.Gender + "," + user.Age);
}

//3.描述复杂对象
let Emperor = {
"Age": 20,
"Wife": [
{"username": "Queen", "Gender": "Female", "Age": "23"},
{"username": "Concubine", "Gender": "Female", "Age": "18"}
],
"Father_Emperor": {"username": "Lord"}
}
console.log(Emperor);
console.log(Emperor.Age);
let wifes = Emperor.Wife;
for(let wife of wifes){
console.log(wife.username + "," + wife.Gender + "," + wife.Age);
}

let fatherEmperor = Emperor.Father_Emperor;
console.log(fatherEmperor.username);
</script>

1.3 JSON格式转换
JSON对象与字符串的相关函数
语法:
语法 作用
JSON.stringify(object) 把JSON对象转换为字符串
JSON.parse 把字符串转换为JSON对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<script>
let user = {"username": "Trump"}
alert(typeof user);//object

let userstr = '{"username": "Trump"}'
alert(typeof userstr);//string

//1. JSON.parse 把字符串转换为JSON对象
let user_parse = JSON.parse(userstr);
console.log(typeof user_parse);//object

//2. JSON.stringify(object) 把JSON对象转换为字符串
let user_stringify = JSON.stringify(user);
console.log(typeof user_stringify);//string
</script>
</body>

二.AJAX
2.1 AJAX概述
AJAX是浏览器提供的一套方法,在无需重新加载整个网页的情况下,能够更新部分网页技术,从而提高用户浏览器网站应用的体验
应用场景

搜索框提示
表单数据验证
无刷新分页

2.2 JS原生AJAX
代码实现
•创建Ajax对象
let xhr = new XMLHttpRequest();
•告诉Ajax请求方式和请求地址
xhr.open(请求方式,请求地址)

•发送请求
xhr.send();

•获取服务器返回的数据
xhr.onload=function(){
xhr.responseText;
}

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
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input type="text" id="username" placeholder="Input Username"><span id="userwarn"></span>

<script>
document.getElementById('username').onblur = function () {
console.log(this.value);
//创建Ajax对象
let xhr = new XMLHttpRequest();

//告诉Ajax请求方式和请求地址
xhr.open('get', 'http://localhost:8080/check?username=' + this.value);

//发送请求
xhr.send();

//获取服务器返回的数据
xhr.onload = function () {
console.log(xhr.responseText); //返回的字符串
document.getElementById('userwarn').innerText=xhr.responseText;
}
}
</script>
</body>

2.3 jQuery的Ajax插件
2.3.1 ajax函数
语法:
$.ajax(json对象格式);
参数:
url:请求地址
type:请求方式(get:不安全且大小有限制,post大小无限制且相对安全)
data:请求参数
success:请求成功时,执行回调函数
error:请求失败时,执行的回调函数
dataType:预期服务器返回的数据类型:text,json

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
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input type="text" id="username" placeholder="Input Username"><span id="userwarn"></span>

<script>
//给文本绑定失去焦点事件
$('#username').blur(function () {
//使用ajax发送请求
$.ajax({
url: "http://localhost:8080/check",
type: "post",
data: "username=" + $(this).val(),
success: function (resp) {
//实现局部刷新
$('#userwarn').text(resp);
},
error: function () {
alert('Server Busy ,Please Retry');
},
//dataType: "json"//相当于把字符串转为JSON对象
})
})
</script>
</body>

2.3.2 get函数
语法:
$.get(url,callback)
参数:
url:请求地址
success:请求地址成功时的回调函数

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
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input type="text" id="username" placeholder="Input Username"><span id="userwarn"></span>

<script>
//给文本绑定失去焦点事件
$('#username').blur(function () {
//使用get发送函数
let url = 'http://localhost:8080/check?username' + $(this).val();
$.get(url, function (resp) {
//局部刷新
$('#userwarn').text(resp);
})
})
</script>
</body>

2.3.3 post函数
语法:
$.post(url,data,success)
参数:
url:请求地址
data:请求参数
success:请求地址成功时的回调函数

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
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input type="text" id="username" placeholder="Input Username"><span id="userwarn"></span>

<script>
//给文本绑定失去焦点事件
$('#username').blur(function () {
//使用post发送函数
let url = 'http://localhost:8080/check';
let data = 'username=' + $(this).val();
$.post(url, data, function (resp) {
//局部刷新
$('userwarn').text(resp);
})
})
</script>
</body>

2.4 同步和异步概述
使用ajax发送的是异步请求
**同步和异步请求指的是:客户端和服务器的交互行为
同步:客户端发送请求后,必须等待服务器端响应。在等待的期间客户端不能做其他操作
异步:客户端发送请求后,不需要等待服务器端的响应。在服务器处理的过程中,客户端可以进行其他操作

感知同步和异步区别:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
</head>
<body>
<button id="btn">Send Ajax</button>

<script>
//给按钮绑定事件
$('#btn').click(function () {
// 使用ajax函数发送请求,ajax默认的是异步提交,可以改为同步(了解)
$.ajax({
url: 'http://localhost:8080/sleep',
type: 'get',
success: function (resp) {
alert(resp)
},
async: false // 同步提交
})
})
</script>
</body>

三.搜索案例

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Search Case</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style type="text/css">
.content {
width: 643px;
margin: 200px auto;
text-align: center;
}

input[type='text'] {
width: 530px;
height: 40px;
font-size: 14px;
}

input[type='button'] {
width: 100px;
height: 46px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px
}

.show {
position: absolute;
width: 535px;
height: 100px;
border: 1px solid #999;
border-top: 0;
}
</style>
</head>
<body>
<div class="content">
<img src="../img/logo.png" alt=""><br/><br/>
<input type="text" id="search" name="keyword">
<input type="button" value="Search">
<div class="show" style="display: none"></div>
</div>

<script>
//1.搜索框绑定键盘弹起事件
$('#search').keyup(function () {
//显示div
$('.show').show();

//2.获取用户输入的值
console.log($(this).val());
//判断用户输入的值,JS提供了trim()方法,JQ使用需要转换
if (this.value.trim().length == 0) {
return $('.show').hide();//拦截代码,不再向下执行
}

//3.使用post函数发送请求
let url = 'http://localhost:8080/search';
let data = 'keyword=' + $(this).val();
$.post(url, data, function (resp) {
//清空上次搜索的内容
$('.show').empty();
//4.局部更新
console.log(resp);
for (let ele of resp) {
$('.show').append(`<div style="cursor: pointer;
text-align: left;
padding-left: 5px"
onmouseover="highlight(this)"
onmouseout="restores(this)"
onclick="set(this)">${ele}</div>`)
}
})
})

function highlight(obj) {
$(obj).css('background-color', '#f0f0f0');
}

function restores(obj) {
$(obj).css('background-color', 'white');
}

function set(obj) {
//设置选中文字色
$('#search').val($(obj).text()).css('color','brown');
//跳转网址
location.href = "http://www.baidu.com";
// $('.show').css('display', "none");
$('.show').hide();
}
</script>
</body>
</html>

一.jQuery概述
1.1 简介
jQuery是一个优秀的javascript的轻量级框架之一,封装了dom操作、事件、页面动画、异步操 作等功能。
特别值得一提的是基于jQuery的插件非常丰富,大多数2015年之前的前端业务场景都有其封装好的工具框架。

注意:如果公司使用的老版本插件,升级jQuery之后,可能会让插件失效

库名 说明
jQuery-x.js 开发版本:有良好的锁紧格式和注释,方便开发者阅读
jQuery-x.min.js 生产版本:代码进行压缩,体积小方便网络传输
1.2 自定义JS框架
框架(Framework)是完成某种功能的半成品,抽取重复繁琐代码,提高简介强大的方法实现。

感知jQuery的强大

1
2
3
4
5
// 抽取获取id的方法 function jQuery(id) {
return document.getElementById(id); }
// 简化名称方案 function $(id) {
return document.getElementById(id); }

1
2
3
4
5
6
7
8
9
10
11
12

Title
AAAAAAAAAA

小结:jQuery本质上就是js的一个类库文件,使用它时,就能简化代码

二.jQuery基础语法
2.1 HTML引入jQuery
1
2
3
4
5
6
7
8
9
10
11
12

HTML Intro Jqurey
AAAAAAAAAA
2.2 jQuery与JS区别 jQuery虽然本质也是JS,但是如果使用jQuery的属性和方法那么必须包装对象是jQuery对象而不是js对象。 通过js方式获取的是js对象,通过jQuery方式获取的是jQuery对象,两者关系和区别如下:

jQuery与JS的相互转换
js—>jq
$(js对象)或者jQuery(js对象)
jq—>js
js对象[] 或者 jq对象.get(索引)
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

Mutual conversion
AAAAA

页面加载事件 js window.onload=function(){}

jq
$(function(){})

区别
js:只能定义因此,如果定义多次,后加载会进行覆盖
jq:可以定义多次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

window onload
三.jQuery选择器
3.1 基本选择器
标签(元素)选择器
语法:
$(“html标签名”) 根据标签匹配元素 格式 标签
id选择器
语法:
$(“#id的属性值”) 根据id值匹配元素 id属性是标签的唯一标志 #id
类选择器
语法:
$(“.class的属性值”) 根据class的值匹配元素 class属性是给标签归类添加样式 格式 .class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

古力娜扎 迪丽热巴 黑寡妇

钢铁侠
超人

3.2 层级关系选择器 后代选择器 语法: $(“A B”) 选择A元素内部的所有B元素 并集选择器 语法: $(“选择器1,选择器2….”) 获取多个选择器选中的所有元素 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
儿子:雍正

孙子:乾隆

牛顿

3.3 属性选择器
属性选择器
语法:$(“A[属性名=’值’]”) 包含指定属性等于指定值的选择器
复合属性选择器
语法:$(“A[属性名=’值’][]…”) 包含多个属性条件的选择器
1
2
3
4
5
6
7
8
9
10
11
12



3.4 过滤选择器 首元素选择器 语法: :first 获得选择的元素中的第一个元素 尾元素选择器 语法: :last 获得选择的元素中的最后一个元素 偶数选择器 语法: :even 偶数,从 0 开始计数 奇数选择器 语法: :odd 奇数,从 0 开始计数 指定索引选择器 语法: :eq(index) 指定索引元素 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
  • 大娃(红娃)
  • 二娃(橙娃)
  • 三娃(黄娃)
  • 四娃(绿娃)
  • 五娃(青娃)
  • 六娃(蓝娃)
  • 七娃(紫娃)

3.5 对象遍历
语法
jq对象.each(function(index,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

  • 北京
  • 上海
  • 天津
四.jQuery的DOM操作 4.1 jQuery操作内容 text():获取/设置元素的标签体纯文本内容 相当于js: innerText属性 html():获取/设置元素的标签体超文本内容 相当于js: innerHTML属性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

天王盖地虎

4.2 jQuery操作属性 val():获取/设置元素的value属性值 相当于:js对象.value attr():获取/设置元素的属性 removeAttr() 删除属性 相当于:js对象.setAttribute() / js对象.getAttribute() prop():获取/设置元素的属性 removeAttr() 删除属性 jq在1.6版本之后,提供另一组API prop 通常处理属性值为布尔类型操作 例如:checked selected等 做条件判断用prop,做属性封装做attr

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

姓名
爱好
<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br/>
<input id="hobby_undefined" type="checkbox" name="hobby" value="perm" >烫头<br/>


<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
4.3 jQuery操作样式 直接修改jq对象样式属性 语法: jq对象.css() css(样式名) 获取 css(样式名,样式值) 设置 优点:支持css语法 举例:font-size

添加/删除jq对象样式
语法:
jq对象.addClass()
jq对象.removeClass()

切换jq对象样式
语法:
jq对象.toggleClass() 无添加,有删除

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

Title
六.综合案例 6.1 隔行换色 1 2 3 4 6.2 商品全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
6.3 QQ表情
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

Title QQ表情选择

一.BOM对象
1.1 BOM简介
浏览器对象模型(Browser Object Model)
作用:把浏览器抽象成一个对象模型,可以使用JS模拟一些浏览器功能
1.2 Window对象
三种弹框
警告框:提示信息
alert()
确认框:确认信息
confirm()
输入框:输入信息
prompt()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
//警告框:提示信息
alert("Hello")
//确认框:确认信息
let result = confirm("Sure to Delete?Y/N")
if (result == true) {
console.log("Y");
} else {
console.log("N");
}
//输入框:输入信息
let age = prompt("Please Input Your Age");
if (age != null) {
console.log("Please Input Age",`${age}`)
}else {
console.log("Canceled");
}
</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
33
34
35
36
37
38
39
40
41
42
43
44
<body>
<!--
JS两个定时器
1)一次性定时器
创建:let 定时器对象 = setTimeout(`函数()`,毫秒)
关闭:clearTimeout(定时器对象)
2)循环型定时器
创建: let 定时器对象 = setInterval(函数,毫秒)
关闭:clearInterval()
-->
<button id="btn1">Cancel Print Time</button>
<button id="btn2">Cancel Print Number</button>

<script>


//1.定时1s在控制台打印当前时间
function fun1() {
console.log(new Date().toLocaleString());
}

let timeout = setTimeout(`fun1()`, 1000);

//2.点击按钮取消打印时间
document.getElementById("btn1").onclick = function () {
clearTimeout(timeout);
}

//3.每隔2秒在控制台打印递增自然数
let num = 1;

function fun2() {
console.log(num++);
}

let interval = setInterval(fun2, 2000);

//4.点击按钮取消打印自然数
document.getElementById('btn2').onclick = function () {
clearInterval(interval);
}

</script>
</body>

1.3 Location对象

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
<body>
<!--
location地址
1)获取当前窗口地址
location.href
2)刷新当前页面
location.reload
3)跳转页面
location.href='new location'
-->

<button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()">跳转页面(重点)</button>

<script>
function addr() {
console.log(location.href);
}
function refresh() {
console.log(location.reload());
}
function jump() {
console.log(location.href = 'https://www.baidu.com/');;
}
</script>

</body>

二.DOM对象
2.1 DOM简介
DOM(Document Object Model) 页面文档对象模型
JS把页面抽象成为一个对象,允许我们使用js来操作页面

2.2 DOM获取元素
第一种:es6之前的获取方式
1)获取一个:
document.getElementById(id属性值)
2)获取多个:
document.getElementByTagName(标签名属性值) 根据标签名获取,返回数组对象
document.getElementByClassName(class属性值) 根据class属性获取,返回数组对象
document.getElementByName(name属性值) 根据name属性获取,返回数组对象
第二种:es6可根据CSS选择器获取
1)获取一个:
document.querySelector(id选择器)
2)获取多个:
document.querySelectorAll(css选择器)
标签
class
属性
后代
并集
父子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
//1.获取id="name"对象
console.log(document.getElementById('name'));
console.log(document.querySelector('name'));
//2.获取class="radio"的标签数组
console.log(document.getElementsByClassName('radio'));
console.log(document.querySelectorAll('radio'));
//3.获取所有option标签对象数组
console.log(document.getElementsByTagName('option'));
console.log(document.querySelectorAll('option'));

//4.获取name="hobby"的input标签对象数组
console.log(document.getElementsByName('hobby'));
console.log(document.querySelectorAll('input[name="hobby"]'));//CSS的属性选择器

//5.获取文件上传选择框
console.log(document.querySelectorAll('form input[type="file"]'));
</script>

2.3 DOM操作内容
获取或修改元素(标签)的纯文本内容
语法:
element.innerText
获取或者修改元素的html内容
element.innerHTML;
获取或者修改包含自身的html内容
element.outerHTML;
总结:

innerText 获取的是纯文本 innerHTML获取的是所有html内容
innerText 设置到页面中的是纯文本 innerHTML设置到页面中的html会展示出外观效果
innerHTML不包含自身 outerHTML包含自身的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
27
28
29
30
31
32
33
34
35
36
37


<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myDiv {
border: 1px solid red;
}
</style>
</head>

<body>

<div id="myDiv">AAA</div>
<script>
let myDIV = document.getElementById('myDiv');
//1.innetText操作div内容
//1.1获取纯文本
console.log(myDIV.innerText);
//1.2 获取纯文本,无法更改标签等属性
myDIV.innerText = "BBBBB";//覆盖
myDIV.innerText += "BBBBB";//追加


//2.innerHTML操作div内容
//2.1 获取超文本内容
console.log(myDIV.innerHTML);
//2.2 设置超文本,可以更改标签等属性
myDIV.innerHTML = '<h1>CCCCCC</h1>'//覆盖
myDIV.innerHTML += '<h1>CCCCCC</h1>'//追加

//3.outerHTML操作div
myDIV.outerHTML='<p>DDDDDDDD</p>'//不仅可以修改纯文本,还能修改标签

</script>
</body>

2.4 DOM操作属性
获取文本框的值,单选框或复选框的选中状态
语法:
element.properties 获取或者修改元素对象的原生属性
给元素设置自定义属性
语法:
element.setAttribute(属性名,属性值) 给元素设置一个属性值,可以设置原生和自定义
获取元素的自定义属性值
语法:
element.getAttribute(属性名) 获取元素的一个属性值,可以获取原生和自定义
移除元素的自定义属性
语法:
element.removeAttribute(属性名)

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
<body>

<form action="#" method="post">
Name: <input type="text" name="username" id="username" value="AAAAA"/><br/>


Hobby:
<input type="checkbox" name="hobby" value="smoke">X
<input type="checkbox" name="hobby" value="drink">Y
<input type="checkbox" name="hobby" value="perm">Z<br/>

<input type="reset" value="清空按钮">
<input type="submit" value="提交按钮"><br/>

</form>

<script>
//1.获取文本框预定义的属性值
let username = document.getElementById('username');
console.log(username);
console.log(username.type);
console.log(username.name);
console.log(username.value);
//2.给文本框设置自定义属性
username.setAttribute('customize', 'customize properties');
//3.获取文本框自定义属性
console.log(username.getAttribute('customize'));
//4.移除文本框自定义属性
username.removeAttribute('customize');
username.removeAttribute('value');
</script>

</body>

2.5 DOM操作样式
设置一个css样式
语法:
element.style.样式名=’样式值’ 获取或者修改一个css样式
特点:
驼峰格式样式属性名
css格式:font-size
js格式:fontSize

批量设置css样式
语法:
element.style.cssText 获取后者修改 标签的style属性的文本值
特点:有耦合性,无提示较麻烦

通过class设置样式
语法:
element.className=’class选择器名’ 获取或者修改标签的class属性的文本值

切换class样式
语法:
element.classList es6特别提供的操作元素class的接口
常用方法有四个:
add() 添加一个class样式
remove() 移除一个class样式
contains() 判断是否包含某一个样式
toggle() 切换一个class样式 有则删除,无则添加

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


<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
background-color: red;
}


.mp {
color: green;
font-size: 30px;
font-family: "Cascadia Code";
}

.mpp {
background-color: lightgray;
}

</style>

</head>
<body>

<p id="p1">Set One CSS Style</p>
<p id="p2">Set CSS Style</p>
<p id="p3">Set CSS Style By Class</p>

<script>
let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');


//1.设置一个css样式
p1.style.backgroundColor = 'black';
p1.style.color = 'white';

//2.批量设置css样式
p2.style.cssText = 'border:1px solid red;font-size:20px';

//3.通过class设置样式
p3.className = 'mp mpp';//注意不要添加'.'符号,可以添加多个组

</script>
</body>

2.6 DOM操作元素
创建一个标签对象
语法:
innerHTML 获取或者设置标签的html内容
父标签添加子标签
语法:
document.createElement(标签名称) 创建一个标签对象
parentNode.appendChild(newNode) 给父标签添加一个子标签
移除元素
outerHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>

<ul id="name">
<li>A</li>
<li>B</li>
</ul>
<script>
//添加一个心列表
//方式一
document.getElementById("name").innerHTML += '<li>C</li>';
//方式二
//1.1 创建li标签
let li = document.createElement('li');
li.innerText = 'All';
console.log(li);
//1.2 父标签添加子标签
document.getElementById('name').appendChild(li);
</script>

</body>

三.正则表达式
作用:根据定义好的规则,过滤文本内容

在js中使用正则表达式
创建方式
1)let reg1 = new RegExp(‘正则表达式字符串’);
2)let reg1 = /正则表达式/;
验证方法
1)正则对象.test(字符串)
符号正则规则就返回true,否则false
2)字符串对象.match(正则对象)
返回字符串中符号正则规则的内容

正则表达式修饰符
i忽略大小写 g全局匹配 m 多行匹配

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
<body>

<script>
//1.创建正则对象
let reg1 = new RegExp('\\d+');
console.log(reg1.test('abc'));
console.log(reg1.test('123'));


let reg2 = /\d+/;
console.log(reg2.test('abc'));
console.log(reg2.test('123'));

//验证方法
console.log("a1".match(reg2));//表示获取字符串符号正则规则的部分

//正则表达式修饰符
//i忽略大小写 g全局匹配 m 多行匹配
let regi = /[]amn]/i;//不区分大小写匹配amn ignore忽略大小写
let resi = 'ABC'.match(regi);//从ABC中匹配regi模式字符串
console.log(resi);
let regg = /\d/g;//全局查找数组 global 全局
let resg = "1 plus 2 equels 3".match(regg);
console.log(resg);
let regm = /^\d/m;//多行匹配开头的数字(^限定开始 $限定结束) ,multipart
let resm = "abc1 plus 2 equals 3\n6abcmnk".match(regm);
console.log(resm);

</script>
</body>

四.综合案例
4.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//1.两次密码输入一致
//2.获取密码框和确认密码框的js对象
let
pwd1 = document.getElementById('pwd1');
let pwd2 = document.getElementById('pwd2');

//1.2 校验密码是否一致的方法
function checkPwd() {
let boo = pwd1.value == pwd2.value;
if (boo == true) {
document.getElementById('pwdwarn').style.display = 'none';
} else {
document.getElementById('pwdwarn').style.display = 'inline';
}
return boo;
}

//1.3 给确认密码框绑定失去焦点时间
pwd2.onblur = checkPwd;//不能加括号()

//2.邮箱格式正确
//2.1 定义邮箱正则表达式

//2.2 获取邮箱的js对象
let email = document.getElementById('email');
let emailReg = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

//2.3 定义校验函数(方法)
function checkEmail() {
let boo = emailReg.test(email.value);
if (boo == true) {
document.getElementById('emailwarn').style.display = 'none';
} else {
document.getElementById('emailwarn').style.display = 'inline';
}
return boo;
}

//2.4 给邮箱绑定失去焦点事件
email.onblur = checkEmail;

//3.手机号格式正确

let phone = document.getElementById('phone');
let phoneReg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;

function checkPhone() {
let boo = phoneReg.test(phone.value);
if (boo == true) {
document.getElementById('phonewarn').style.display = 'none';
} else {
document.getElementById('phonewarn').style.display = 'inline';
}
return boo;
}

phone.onblur = checkPhone;

//表单提交时进行校验 一定触发onsubmit()事件
document.getElementById('myForm').onsubmit = function () {
if (checkPwd() && checkEmail() && checkPhone()) {
alert('Successful')
return true;
} else {
alert('Something Wrong')
}
}

点我展开html和css
4.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
<body>
<button id="btn1">1.全选</button>
<button id="btn2">2.反选</button>
<button id="btn3">3.全部取消</button>
<br>
<input type="checkbox">Computer
<input type="checkbox">Phone
<input type="checkbox">Car
<input type="checkbox">House
<input type="checkbox" checked="true">NoteBook

<script>
let boxs = document.querySelectorAll('input[type="checkbox"]');


document.getElementById('btn1').onclick = function () {
for (let box of boxs) {
box.checked=true;
}
}
document.getElementById('btn2').onclick = function () {
for (let box of boxs) {
box.checked=!box.checked;
}
}

document.getElementById('btn3').onclick = function () {
for (let box of boxs) {
box.checked=false;
}
}

</script>
</body>

4.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
var data = new Array();
data['A'] = ['A1', 'A2', 'A3'];
data['B'] = ['B1', 'B2', 'B3'];
data['C'] = ['C1', 'C2', 'C3'];

let provinceID = document.getElementById("provinceId");
let cityID = document.getElementById("cityId");

//1.页面加载成功后,初始化省份数据
window.onload = function () {
for (let index in data) {
console.log(index);
provinceId.innerHTML +=`<option value="${index}">${index}</option>`;
}
}
//2.给省份下拉框绑定onchange事件
provinceId.onchange = function () {
console.log(this.value);//当前用户选中的value值,它就是二维数组的索引
console.log(data[this.value]);
//3.城市列表
cityId.innerHTML = '<option value="">----请-选-择-市----</option>';
console.log(this.value);
console.log(data[this.value]);
let citys = data[this.value];
for (let city of citys) {
cityId.innerHTML += `<option value="${city}">${city}</option>`;
}
}

4.4 隔行换色

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
let oldColor;
//获取所有数组对象
let trs = document.querySelectorAll('table tr');//注意:这里使用的是后代选择器,这里是js的一个小坑

for (let i = 0; i < trs.length; i++) {
if (i % 2 == 0) {//偶数索引,奇数行
trs[i].style.backgroundColor = 'lightgray';
} else {//奇数索引,偶数行
trs[i].style.backgroundColor = 'skyblue';
}
trs[i].onmouseover = function () {//鼠标移入某一行
//获取当前行的颜色
oldColor=trs[i].style.backgroundColor;
trs[i].style.backgroundColor = 'brown';
}
trs[i].onmouseout = function () {//鼠标移出某一行
trs[i].style.backgroundColor=oldColor;
}
}
let tds = document.querySelectorAll('table td');
for (let i = 0; i < tds.length; i++) {
tds[i].onmouseover=function(){
tds[i].style.backgroundColor='Green';
}
tds[i].onmouseout = function () {//鼠标移出某一行
tds[i].style.backgroundColor=oldColor;
}
}

4.5 拓展:为什么不用var
ES6之前作用域为全局,容易导致变量有值被新值替代,局部变量使用let可以自动销毁,推荐let

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20


// for循环举例:var声明变量全局作用域、let声明变量是局部作用域
for (var i = 0; i < 5; i++) {
document.write('<h3>我是var修饰遍历的内容</h3>')
}
console.log(i);

for (let j = 0; j < 5; j++) {
document.write('<h3>我是let修饰遍历的内容</h3>')
}
// console.log(j);


{
var a = 10;
let b = 5;
}
console.log(a); // 可以取到
console.log(b); // 不能取到

总结:
BOM对象
简介
浏览器对象模型
Window对象
三种弹框

alert()
confim()
prompt()
二种定时器

setTimeout(函数,毫秒)

clearTimeout(定时器)
setInterval(函数,毫秒)

clearInterval(定时器)
Location对象
reload()

href

跳转页面
DOM对象
简介
文档对象模型
获取元素
ES5

getElementById(id属性值)
ES6

querySelector(CSS选择器)
querySelectorAll(CSS选择器)
操作内容
innerText
innerHTML
操作属性
js对象.属性名

原生属性
操作样式
js对象.style.样式名(驼峰格式)
js对象.style.cssText
js对象.className
操作元素
添加元素

js对象.innerHTML +=追加内容

document.createjs对象(标签)

parentNode.appendChild(newNode)
正则表达式
创建
let rege = new RegExp(“正则表达式”);
let regex = /正则表达式/;
验证方法
正则对象.test(字符串)
综合案例
表单校验
发挥大家的想象力
商品全选
省市联动
隔行换色

一.JavaScript基础语法
1.1 JS运算符
算术运算符

      • / % ++ –

赋值运算符
= += -= *= /=

比较运算符

1
> < ==(===) !=(!==)

逻辑运算符
&& || !

三元(目)运算符
条件表达式?为真:为假

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


<script>
//算数运算符
//在JS中数值可以与字符串进行数学运算,底层实现了隐式转换
let a =10;//num
let b = '4';//String
console.log(a+b);//104 字符串拼接
console.log(a-b);//6
console.log(a*b);//40
console.log(a/b);//2.5 保留小数位


//比较运算符
let c='10';
console.log(a == c);//比较的是内容
console.log(a === c);//比较的是类型+内容

//!= 比较的是内容
//!== 比较的是类型+内容

</script>

1.2 JS流程控制
条件判断
•if判断
if(条件表达式){
代码块
}else if(条件表达式){
代码块
}else{
代码块
}
•switch判断
switch(条件表达式){
case 满足条件1 :
代码块 break;
case 满足条件2 :
代码块 break;
case 满足条件3 :
代码块 break;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
/*
条件表达式
1)布尔型
2)数值型:非0为真
3)字符串:非空串为真
4)变量:null 或 undefined 都为假
*/
let flag = true;
flag = 15;
flag = "Hello";
flag = null;
if(flag){
console.log("Right");
}else{
console.log("Wrong");
}
</script>

循环语句
•普通for循环
for (let i = 0; i < ; i++) {
//需要执行的代码
}

•增强for循环
for(let obj of array){
//需要执行的代码
}

•索引for循环
for(let index in array){
//需要执行的代码
}

•while循环
while(条件表达式){
//需要执行的代码
}

•do…while循环
do{
//需要执行的代码
}while(条件表达式)

•break和continue
break:跳出整个循环
continue:跳出本次循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
let arr=['a','b','c'];


//普通for循环
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

//增强for循环
for(let element of arr){
console.log(element);
}
//索引for循环
for (let index in arr) {
console.log(index);
console.log(arr[index]);
}

</script>

二.JS函数
功能:js函数用于执行特定功能的代码块,为了方便立即也可以称为JS方法

2.1 普通函数
语法:
function 函数名(参数列表){
函数体;
[return 返回值;] //中括号表示内容可以省略
}

js不支持方法重载,重名的方法会被覆盖

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
<script>
//两数求和
function sum(a, b) {
//console.log(a + b); //无返回值
return a + b;
}
// sum(1,10);

//三数求和
//NaN:not a number 这不是一个数
//js是弱类型语言,不支持方法重载,重名的方法会覆盖
//js函数定义的参数个数,可以与实际调用的参数个数不同
function sum(a, b, c) {
return a + b + c;
}

let result = sum(1, 5);
console.log(result);

console.log(sum(1, 2, 3));
function new_sum(a, b, c) {
//js函数题内置arguments[]数组对象,获取实际调用者的参数值
console.log(arguments[3]);//可以获取额外传入的第4个参数,但是不允许这样使用
}

new_sum(1, 2, 3, 4, 5);

//可变参数,本质就是一个数组
function sum(...args) {
console.log(args);
}

let resut = sum(5, 6, 7, 8);
// console.log(resut);

2.2 匿名函数
通常与事件结合使用
语法:
function (参数列表){
函数体;
[return 返回值;]//中括号表示内容可以省略
}

1
2
3
4
5
6
7
8
9
10
<body>
<button id="btn">Button</button>

<script>
document.getElementById("btn").onclick = function () {
alert("匿名函数触发事件");
};
</script>

</body>

2.3 案例:轮插图
分析:
展示图片的
通过js代码修改img标签的src数学

每隔3秒,切换一次,使用定时器

通过定时器,触发一个方法,修改img标签src属性的图片地址

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
<body>
<!--
setInterval(函数,间隔时间) 每隔固定间隔时间(毫秒)执行一次函数
document.querySelector(css选择器) 根据css选择器获取匹配到的一个标签
-->

<div>
<img id="myImg" src="" alt="" width="500px">
</div>


<script>
//通过DOM获取img标签的js对象
let img = document.getElementById("myImg");
console.log(img);
console.log(img.src);//获取img标签的src属性值



//图片编号
let num = 1;

//定义一个修改图片的方法
function change() {
img.src = '../img/' + num + '1.jpg';
if (num == 4) {
num = 0;
}else {
num++;
}
}

//每间隔3秒,触发此方法
setInterval('change()', 3000);


//每间隔1秒,向控制台输出一句话
//''相当于script标签
// setInterval('console.log("Hello");', 1000);

</script>

三.JS事件
3.1 常用事件
点击事件
•onclick:单击事件
•ondblclick:双击事件

焦点事件
•onblur:失去焦点
•onfocus:元素获得焦点

加载事件
•onload:页面加载完后立即发送

鼠标事件
•onmousedown:鼠标按钮被按下
•onmouseup:鼠标按钮被松开
•onmousemove:鼠标被移动
•onmouseover:鼠标移到某元素之上
•onmouseout:鼠标从某元素一开

键盘事件
•onkeydown:某个键盘按键被按下
•onkeyup:某个键盘按键被松开
•onkeypress:某个键盘按键被按下并松开

改变事件
•onchange:域的内容被改变

表单事件
•onsubmit:提交按钮被点击

3.2 事件绑定
将事件与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
<body>

<input type="button" value="普通函数" onclick="show()"><br>
<input type="button" value="匿名函数" id="myBtn">

<script>
//单击事件
//普通函数 此方案有耦合性
function show() {
alert("普通函数触发事件");
}


//匿名函数
//通过DOM技术获取按钮标签的js对象
// var myBtn = document.getElementById("myBtn");
// myBtn.onclick = function () {
// alert("匿名函数触发事件");
// }

document.getElementById("myBtn").onclick = function () {
alert("匿名函数触发事件");
};

</script>
</body>

3.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<body>
<!--
常用事件
1)onload:页面加载完后立即发送
2)onfocus:元素获得焦点
3)onblur:失去焦点
4)onchange:域的内容被改变
5)onclick:单击事件
-->
Name: <input type="text" id="userName"><br/>
Score:

<select name="edu" id="edu">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>

<br/>
<!--button相当于<input type="button" value="button">-->
<button id="btn">Button</button>

<script>


// js代码的执行自上而下(顺序结构)
//1.onload页面加载完成
window.onload = function () {
console.log("Page Load Done");//放在哪里都是最后执行
}
console.log("外部内容");

//2.onfocus
//this 当前对象
document.getElementById('userName').onfocus = function () {
// document.getElementById('userName').value = 'Focus';
this.value = 'Focus';
}

//3.onblur
document.getElementById('userName').onblur = function () {
this.value = 'lose Focus';
}

//4.onchange
document.getElementById("edu").onchange = function () {
alert(this.value);
}

//5.onclick
document.getElementById('btn').onclick = function () {
alert('onclick Event');
}

</script>
</body>

四.JS常用内置对象
4.1 String对象

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
<body>
<!--
1.构造字符串对象可以使用单引号,双引号,反引号
2.字符串常用方法
substring()
toLowerCase()
toUpperCase()
split()
trim()
-->

<script type="text/javascript">
//1.构造字符串对象可以使用单引号,双引号,反引号
//单引号
let str1="String";
console.log(str1);
//双引号
let str2="String";
console.log(str2);
//反引号
let str3=`String`;
console.log(str3);


//反引号案例
let num=100;
let str4=`Need ${num} to do Something`;
console.log(str4);

//字符串常用方法
// substring
let str = '我爱我的祖国'; console.log(str.substring(4, 6));

</script>
</body>

4.2 Array对象

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
<body>
<!--
数组:
1.创建数组
*let array=[ele1,ele2,ele3];
let array=new array(ele1,ele2,ele3);
特点:数组元素的类型任意

2.数组常用方法
concat() 连接两个或更多数组,并返回结果
push() 向数组末尾添加一个或多个元素,并返回一个新的长度
pop()删除并返回数组的最后一个元素
join()把数组所有元素放入一个字符串,元素通过指定的分隔符分隔。
与字符串.split()切割为数组方法相反
sort()对数组进行升序排序
reverse()对数组进行降序排序

-->

<script>
//1.创建数组
let arr1 = ['a', 'b', 'c'];
console.log(arr1);


let arr2 = new Array('AAA', 5, new Date());
console.log(arr2);
//2.数组合并
let concatArr = arr1.concat(arr2);
console.log(concatArr);
//3.添加元素,尾部添加
concatArr.push("New");
console.log(concatArr);
//4.删除元素,尾部删除
concatArr.pop('New');
console.log(concatArr);
//5.数组元素拼接为字符串
console.log(concatArr.join('-'));
//6.排序数组元素
let arr3 = [2, 4, 5, 1, 3, 7];
console.log(arr3.sort());
console.log(arr3.reverse());
//指定sort()排序规则
console.log(arr3.sort(function (a, b) {
return b - a;
}));

</script>
</body>

4.3 Date对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<!--
日期
let date = new Date();
-->

<script>
let date = new Date();


console.log(date);
console.log(date.toLocaleString());//转换为本地日期格式的字符串
console.log(date.getFullYear());//年
console.log(date.getMonth() + 1);//月
console.log(date.getDate());//日
console.log(date.getDay());//星期
console.log(date.getTime());//1970至今的毫秒值

</script>
</body>

4.4 Math对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<!--
数学运算
1)四舍五入 round()
2)向下取整 floor()
3)向上取整 ceil()
4)产生随机数 random() 返回[0,1)至今的随机数。左闭右开
-->

<script>
let a = 1234.567;
//round
console.log(Math.round(a));
console.log(Math.floor(a));
console.log(Math.ceil(a));
console.log(Math.random());
console.log(Math.floor(Math.random() * 100+1));
</script>

</body>

4.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
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
<body>
<!--
全局函数
1)字符串转为数字
parseInt()解析一个字符串并返回一个整数
parseFloat()解析一个字符串并返回一个浮点数
特点:从一个字符开始转换,遇到非数值字符停止转换
NaN:not a number, NaN != NaN
isNaN() 判断一个字符串,如果不是数值返回true,否则返回false,即纯数值返回false

2)对字符串编码和解码
HTTP 不识别中文,需要转码
encodeURI()把字符串编码为uri
decodeURI()把uri解码为字符串

3)把字符串当作js表达式来执行
eval() 计算JavaScript字符串,识别为JS脚本片段


-->

<script>
//1.字符串转为数字
let a = '123.932';
console.log(parseInt(a));//123
console.log(parseFloat(a));//123.932


let b = '123.9a32';
console.log(parseInt(b));//123
console.log(parseFloat(b));//123.9

let c = 'a123.9a32';
console.log(parseInt(c));//NaN
console.log(parseFloat(c));//NaN

console.log(NaN == NaN);//false

console.log(isNaN(a));//false
console.log(isNaN(c));//true

// 2.对字符串编码和解码
let name = "一二三";
var message = encodeURI(name);
console.log(message);
console.log(decodeURI(message));

//3.把字符串当作js表达式来执行
eval('alert(1)');

</script>
</body>

总结:
js基础语法
运算符
算数运算符

数值可以与字符串进行数学运算,底层进行了转换
比较运算符

=== 恒等 先比较类型后比较内容
!== 恒不等 先比较类型后比较内容
流程控制语句
顺序

代码自上而下,逐行执行
分支

条件语句

和java一样

if…else if…else
switch…case..default
循环

和java一样的

while
do…while
for…i
和java不一样的

for…in

数组的索引index
for…of

数组的元素
js函数(方法)
普通函数
在js中,没有方法重载
匿名函数
案例:轮播图
setInterval(函数,间隔时间)
document.getElementById(id属性值)
js事件
作用
JS可以监听用户的行为,并调用函数来完成用户交互功能
常用事件
页面加载完毕事件

window.onload
获取焦点

onfocus
失去焦点

onblur
值改变时

onchange
单击时

onclick
事件绑定
普通函数

匿名函数

解耦合….
案例:页面交互
js常用内置对象
String 对象
构造

双引号

单引号

反引号

我爱我的祖国 ${变量占位符}
常用方法

截取

substring()
分割为数组

split()
转换大小写

toLowerCase()
toUpperCase()
去掉前后空格

trim()
Array 对象
构造

[ele1,ele2,ele3];
new Array(ele1,ele2,ele3);
特点:

数组的长度和类型任意,可以把它当做java的集合
常用方法

连接数组

concat()
拼接为字符串

join()
添加/移出元素

push()
pop()
排序

sort()
Date 对象
Math 对象
round 四舍五入
floor 向下取整
ceil 向上取整
random 返回[0,1)随机小数
全局函数
字符串转为数字

parseInt()

转整数
parseFloat()

转小数
isNaN()

非数字
url编码

encodURI()

编码
decodeURI()

解码
执行字符串

eval()

一.大致了解C#基本编程规则
1.1 基本规则
“标识符(identifier:即程序中拥有特殊含义的单词)”区分大小写
每条语句以分号结尾,多条语句可以使用”{}”组合为一个语句块
编写的代码放在”类(class)”中,类是C#编程的基本单元
存放C#类的源代码文件其扩展名为”.cs”,一个”.cs”文件中可以存放多个C#类
1.2 Visual Studio中文件的组织方式:
“项目(Project)”是Visual Studio编译的最小单元
一个”解决方案(solution)”中可以有多个项目,显示为粗体的是启动项目
一个项目中可以有多个类文件。一个类只有被包括在一个项目中,才可以被Visual Studio编译
程序入口点是Program类中的Main()方法
1.3 为什么要学习面向对象程序设计
面向对象是一种主流的软件开发与设计方法
当前各种软件系统,基本都是应用面向对象思想与计算开发出来的
1.4 软件是如何编写的
面临问题 做出决策
如何设计与选中特定的算法处理信息 可以选择已有的算法,也可以设计新的算法
算法:分而治之,动态规划
程序控制结构:分支,循环,递归
如何表达以方便计算机处理 设计和选用合适的数据结构
如何编写程序实现算法 选择合适的技术手段,设计合理的技术方案。软件系统价格,面向对象的分析与设计,编程语言,开发框架,软件平台…
1.5 需要掌握基础知识
程序如何被计算机执行–>各种信息是如何用0/1表达的–>计算机是由哪些元件组成,工作原理是什么–>操作系统如何启动一个程序的执行

如何编写可以执行的程序–>第一步:编写源代码–>第二步:编译–>第三步:得到可执行的程序

增压构造求解问题的算法–>分析问题–>设计算法–>编写程序

二.程序是如何被计算机执行的
2.1 计算机能直接执行由0和1构成的机器指令
计算机中数值信息,直接用二进制”0”和”1”表达,非数值信息,采用”编码”的手段

“门”是这样的一种电路:它规定各个输入信号之间满足某种逻辑关系时,才有信号输出,通常有下列三种门电路:与门、或门、非门(反相器)。从逻辑关系看,门电路的输入端或输出端只有两种状态,无信号以“0”表示,有信号以“1”表示。

以”0”和”1”表达的指令,可以由计算机硬件直接执行,因此,将它们称为”机器指令”
不同体系结构的计算机硬件,能执行的机器指令是不一样的,每种机器能执行的所有机器指令,称为这种机器的”指令集”
2.2 计算机的大脑——CPU
CPU可以执行机器指令(“0”和”1”)
指令与数据通常保存在文件中
指令&数据->可执行程序文件(.exe)

Win平台下可执行文件通常以.exe结尾,另一种扩展名为.dll(动态链接库)需要被.exe装入后才能执行

2.3 外部存储器 & Memory(内存)与内存条
各种程序平常保存在外部存储器中
如硬盘,U盘等
放在外部存储器中的程序并不能直接允许,需要被装入内存后,才能执行
内存条中的存储新品包容许多存储单元,用于保存程序指令和数据
存储单元的集合,称为”内存”
001011…
011010…
101011…
内存存储数据—>分为指令,指令使用的数据

可执行程序.exe文件保存在外部存储器

在计算机上双击,系统读取文件,把它包容的指令和数据装载到内存

CPU直接存取放在内存存储单元的数据,并负责执行这些指令
2.4 区分两种不同的内存类型
物理内存
计算机上的物理芯片

虚拟内存
操作系统所提供的”虚拟内存”

C#写的.NET程序,无法直接访问物理内存上的特定数据单元,它所访问的上由操作系统负责提供的”虚拟内存”

2.5 程序开发与运行过程简述
软件工程师用各种编程语言写计算机程序

编译器把源程序转换为二进制指令与数据,以文件方式保存在外部存储器中

操作系统将程序文件从外部存储器读入到内存中

CPU从内存中取出指令执行
三.Dot Net运行原理
3.1 “编译”是怎么回事
纯文本形式的源代码
⬇提交
C#编译器编译源码
⬇生成
二进制形式的可执行程序文件(HelloWorld.exe)

1
2
3
4
5
6
7
8
9
10
11
12
13
using System;//表示将使用.Net基类库中的System命名空间

public class Program//类名Program
{
//程序入口点Main(数组[] 参数名)
static void Main(string[] args)
{
Console.WriteLine("Hello,World");
}
}
//保存为ANSI格式(源代码标准格式)
//helloworld.cs
csc helloworld.cs

Microsoft (R) Visual C# Compiler version 3.5.0-beta4-20121-02 (00d6c926)
Copyright (C) Microsoft Corporation. All rights reserved.

“编译(compile)”,粗略地说,它负责把人编写的源代码”翻译”为计算机可以识别并执行的二进制代码

3.2 可执行程序也是分类的
可执行程序也分很多类型,在Windows平台下,可分为
可执行程序
⬇ ⬇
托管程序 非托管程序
例如:使用C#,VB.NET编写的可执行程序,运行时要求目标计算机上必须安装有.NET Framework 例如:使用C/C++编写的可执行程序,可以不需要安装额外软件,就能直接在操作系统中运行
3.3 “托管的”应用程序是什么意思
.NET应用程序是”托管(Managed)”的,意思是它必须在一个独立的运行环境(即CLR)中运行,并收到这个运行环境的管理与控制

.NET应用程序
⬆管理
.NET虚拟机(CLR)
CLR:通用语言运行时.NET应用程序的运行环境,可以看成是一台专用于运行.NET应用程序的虚拟机(Virtual Machine)
⬇调用功能
操作系统(Windows)
⬇管理
构成计算机的各种硬件
3.4 .NET程序的开发与运行”全景图”

image

四.怎样构造求解问题的算法
4.1 什么是”算法(algorithm)”
计算机中的算法,主要是指为了解决某个问题而设计的一种解决方案,包容一系列计算机能够执行的有着特定顺序的命令,计算机执行完这些命令,将得到某种结果,意味着某个问题已经有了一个结论

算法的针对性很强,专用于解决特定的问题
算法的设计,通常与数学有很密切的联系,并且是独立于特定的编程语言和软件平台的,这就是说:
可以使用多种编程语言,以多种方式,在不同的平台上实现同一个算法

4.2 从”结构化”到”面向对象”
程序是一个”黑盒”,程序=数据结构+算法
程序设计可以看成是一种”抽象”的艺术
使用”抽象”的思维方式,构造软件系统的顶层模型
4.2.1 数据结构————对数据进行抽象
先确定一种数据结构,如何基于此数据结构设计算法
在程序设计中,依据要解决的特定问题,分析它所设计的相关数据和其中蕴含的各种信息,安装特定编程语言所制成的语法特性,将它们转换为特定的数据结构,往往是整个开发中至关重要的一步
4.2.2 基于数据结构确定算法
将人的计算方法转换为计算机算法,每个算法用一个函数实现
算法就是一系列的命令,计算机通过执行这些命令,完成特定的数据处理工作
4.2.3 进一步细化与调整设计方案
4.2.4 最终的技术设计方案
“由粗略到详细”,”从上层到下层”地逐层设计
4.2.5 确定开发顺序的基本方法
具体开发时,”从 下层 到 上层”地逐层开发,像盖楼一样
开发被别人调用,自己不用调用别人的函数

开发中间层函数,它需要调用底层已经实现好的函数

开发顶层函数,它需要调用中间层已经实现好的函数,通常情况下,避免跨层调用
点击展开结构化代码
4.3 转为面向对象实现
给函数搬一个家–类

重大变化:
1)DateCalculator这个类的职责很明确,它负责”计算日期”,除此之外什么都不做
2)外界只能”看到”并调用它所定义的唯一一个”公有(public)“方法
CalculateDaysOfTwoDate(),根本家不知道它内部定义是什么样的

面向对象带来的好处:
1)从使用者角度,DateCalculator类因为”简单“,所以”易用“
2)具体计算日期的算法被封装道理DateCalculator类的内部,在必要时可以修改算法,外部调用者不会收到影响,其调用代码不需要改变

点击展开面向对象代码
4.4 使用内置库实现
从如下事例中,可以看到,如果有一个功能强大的组家奴,基于这些组件开发应用程序,可以大大提升软件开发效率,因为可以重用别人的工作,不需要从头开始
即不要重复发明轮子,尽量重用别人的代码

点击展开内置库代码
五.变量、数据类型和表达式
5.1 什么是”变量”
程序运行所需要处理的数据,通常都要放到”变量(variable)”中
变量可以看作是一种数据容器
不同类型的”容器”,适合放置不同类型的数据,这种”类型”,称为”变量的数据类型“
5.1.1 如何在C#中定义变量
语法格式:
数据类型名称 变量名 = 变量初始值;
示例
int value = 100;
该语句定义了一个int(整型) 变量,可以放整数 ,初始值为100,最后以”分号结束,C#语句结束不能省略分号”
5.1.2 变量存储与内存中
内存由多个内存单元构成,每个内存单元都有一个编号,称为”内存地址“
给定一个”内存地址”,就能找到特定的内存单元
计算机可以从内存单元中写入或读出数据
使用比较底层的编程语言,如”汇编语言(Assembly Language)“,可以直接指定地址去存取特定的内存单元,但是由于硬件或系统不同,都可能需要修改程序,因此会低效

解决方案
1)应用程序需要读取存取数据时,不指定具体的内存地址,只给出一个”名字”,这个”名字”引用某块内存区域
2)这个”名字”具体引用哪块内存区域,由OS安排,应用程序不进行管理
3)应用程序只需要指定可以按照”名字”找到并读写区域即可
这个内存区域的”名字”,结束所讲的”变量”

5.1.3 通过变量名”间接”地存取内存
变量的名字,可以看出是特定内存区域的”别名”,通过它计算机就能找到特定的内存单元存取数据
有了变量名,将不再需要显示指定一长串地址数值来访问内存单元了
5.1.4 什么是”给变量赋值”
变量定义好后,可以通过赋值语句给他传不同的值

语法格式:
变量名=变量新值;
给变量赋值,其实就是找到变量所代表的内存区域,把指定的数值写入其中

注意:写入到内存单元中的数据,都被转换为二进制数值,计算机并不能直接处理十进制数

5.1.5 什么是变量间的相互赋值
变量间的相互赋值,本质上是内存单元间的值赋值
不同变量直接相互赋值,虽然值一样,但是变量却是相互独立的,不会因赋值而同步变化
5.2 C#语言数据类型
C#语言内置数据类型 编译时转变为CLR CLR支持的基础数据类型
int <—> System.Int32
long <—> System.Int64
float <—> System.Single
Double <—> System.Double
点我展开示例代码
5.2.1 从内存模型角度,C#变量可分为以下两种类型
C#数据类型
值类型
int 值类型变量存活与”线程堆栈”中
double

引用类型
string 引用类型所引用的对象,生存与”堆”中

5.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
34
35
36
37
38
39
namespace Lesson_04_Operators_and_expressions
{
internal class Program
{
public static void Main(string[] args)
{
UseOperator();
UseExpression();
} #region "运算符与表达式"

///<summary>
///使用运算符
/// </summary>
static void UseOperator()
{
//+-*/,()
double result = ((5 + 3) * 2 - 7) / 6d;
Console.WriteLine(result);

int value = 9 % 4;
Console.WriteLine(value);

int index = 1;

//index++ <==> index=index+1
Console.WriteLine(index++);
Console.WriteLine(++index);
}

///<summary>
///使用表达式
/// </summary>
static void UseExpression()
{
int value = 100;
Console.WriteLine(value*2);
}
#endregion
}

}
5.4 选择结构与逻辑表达式
三种典型的程序代码执行流程
顺序执行
按条件选择一条分支执行 <====> 选择结构
在特定场景中反复执行特定语句 <====> 循环结构
程序流程图
在结构化程序设计中,经常使用一种称为”程序流程图“的示意图来表示程序的执行流程

使用if/else语句实现程序中的选择结构
语法:

1
2
3
4
5
6
7
if(条件 == true)
{
//执行语句A
}else
{
//执行语句B
}

使用逻辑表达式表达条件,”==”是逻辑判断运算符

逻辑表达式通常用于表示某种条件是否得到满足
当程序运行时,计算机解析逻辑表达式,会得到一个值,在C#中,这个值只有”true”或”false”
在if语句中,基于逻辑表达式执行的结构执行特定的分支
用于构建逻辑表达式的运算符
运算符 说明

1
2
3
4
5
6
7
>	大于
< 小于
== 等于
>= 大于等于
<= 小于等于
!= 不等于
注意:=>不是”等于大于”,而是Lambda表达式

一.CSS概述
层叠样式表
作用:美化页面
层叠样式:对同一个标签添加多个不同对样式,所有的样式会叠加在一起显示出效果

优点:
•实现了样式和内容对分离,提高了显示效果和样式的复用性
•降低耦合性,分工更加明确,CSS专门用于美化,HTML专门用于结构搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
span{
font-size: 50px;
color: blueviolet;
border: 1px solid skyblue;
}
</style>
<head>
<meta charset="UTF-8">
<title>CSS & JS</title>
</head>
<body>
<span>AAAAAAAAAAA </span><br>
<span>BBBBBBBBBBB </span><br>
<span>CCCCCCCCCCC </span>
</body>

二.CSS基础语法
2.1 HTML引入CSS

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
<head>
<meta charset="UTF-8">
<title>Introduce CSS</title>

<!--内部样式-->
<style type="text/css">
h1{
color: blue;
}
</style>

<!-- 外部样式 -->
<link rel="stylesheet" href="MyCSS.css">

</head>
<body>
<!--
HTML引入CSS的三种方式
1)行内样式
语法:<h1 style="CSS样式"><h1>
作用范围:当前标签范围
2)内部样式:使用style标签
语法:<style type="text/css"></style>
type="text/css"告知浏览器把解析器切换成CSS类型
作用范围:当前页面
3)外部样式:
使用link标签引入外部CSS样式
语法:<link rel="stylesheet" href="外部CSS文件地址" />
rel="stylesheet" 告知浏览器引入的文件类型是CSS样式表
作用范围:所有引入的html页面


CSS样式优先级:就近原则,浏览器的执行顺序自上而下
CSS样式引入推荐放在head头部
-->

<!-- 行内样式 -->
<h1 style="color: red">A</h1>
<h1>B</h1>
<h1>C</h1>
</body>

2.2 CSS属性规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
/*
css注释内容
css语法:
选择器(css样式)
css样式格式:{样式名:样式值:样式名:样式值}


样式名多个单词用横杠分隔
样式值多个单词用空格分隔
多个样式之间,以分号分隔
*/
span{
color: gray;/*字体颜色*/
font-size: 10px;/*字体大小*/
border: 2px solid chartreuse;
}
</style>

2.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<head>
<meta charset="UTF-8">
<title>Basic_Selector</title>
<style>
/*标签*/
span{
color: red;
font-size: 20px;
}

/*class类 选择器*/
.a{
color: green;
font-size: 30px;
}
.b{
color: blue;
font-size: 40px;
}
.z{
font-weight: bold;
}

/*ID选择器*/
#c{
color: brown;
}

</style>
</head>
<body>
<!--
选择器:作用选定一组特有的标签
1)标签
特点:此名称的所有标签都收到控制
语法:标签名{css样式}
2)class(类)
特点:具有分组特性
语法.class{css样式}

3)id
特点:具有唯一性
语法: #id{css样式}
-->
<span class="a">A</span>
<span class="a z">A Z</span>
<span class="a z">A Z</span>

<span class="b">B</span>
<span class="b z">B Z</span>
<span class="b z">B Z</span>

<span id="c">C</span>
</body>

2.4 扩展选择器

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
<head>
<meta charset="UTF-8">
<title>Extra_Selector</title>
<style>
p, span {
font-family: 楷体; /*字体类型*/
}
div>span{
color: red;
}
input[type="text"]{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<!--
扩展选择器
1)并集
语法:选择器1,选择器2...{CSS样式}
2)后代
语法:父 子(孙子)
3)父子
语法:父>子{css样式}
4)属性过滤
语法:选择器[属性名="属性值"]{CSS样式}
-->
<div>
<span>AAAA</span>
<p>
<span id="gbl">BBBB</span>
</p>
</div>
<span id="jjx">CCCC</span>
<label>Name</label>
<input type="text" name="username" value="Jack">
<br/>
<label>Passwd</label>
<input type="password" name="password" value="123456">
<br>
</body>

三.CSS常用样式
3.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
35
    <style>
/*
渲染需求:
1.所有文字绿色
2.所有文字大小20px
3.所有行高40px
4.所有字体加粗
5.所有字体楷体
6.第一句文字倾斜
7.第一句隐藏下划线
*/
div p {
color: green; /*所有文字绿色*/
font-size: 20px; /*所有文字大小20px*/
line-height: 40px; /*所有行高40px*/
font-weight: bold; /*所有字体加粗*/
font-family: 楷体; /*所有字体楷体*/
}

div p a {
font-style: italic; /*第一句文字倾斜*/
text-decoration: none; /*第一句隐藏下划线*/
}
</style>
</head>
<body>
<div>
<p>
<a href="#">Learn</a><br>
HTML<br>
CSS<br>
Style<br>
</p>
</div>
</body>

3.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
    <style>
body {
/*background-color: gray;*/
/*background-image: url("../img/Danboard.jpg");*/
/*background-repeat: no-repeat;*/
background: gray url("../img/Danboard.jpg") no-repeat;
}

h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<!--
background-color:背景色
background-image:背景图片
取值:url('图片地址')
background-repeat:平铺方式
取值:repeat(水平和垂直),repeat-x(水平),repeat-y(垂直),no-repeat(不平铺)
简写方式:
background:color image repeat;
-->
<h1>Sub Title</h1>

</body>

3.4 显示属性

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
<style>
span,div{
border: 1px solid red;
}
span{
display: block;/*块级元素*/
}
div{
display: inline;/*行内元素*/
}
ul li{
display: inline;
}
#div3{
display: none;
}
</style>
<body>
<!--
显示属性:display
1)inline:将标签改为行内元素
2)block:将标签改为块级元素
3)none:隐藏此标签
-->
<span>span1</span>
<span>span2</span>
<span>span3</span>
<div>div1</div>
<div>div2</div>
<div id="div3">div3</div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>

3.5 浮动属性
打破常规,让div也能变小(实际大小,与宽高有关)

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
    <style>
.box {
width: 150px;
height: 150px;
border: red;

}

#a {
float: left;
}

#b {
float: right;
}

#both {
clear: both;
}
</style>
</head>
<body>
<!--
浮动:float
取值:left,right
清楚浮动:clear
取值:both
-->
<div class="box" id="a">AAA</div>
<div class="box" id="b">BBB</div>
<div id="both"></div>
<div class="box">CCC</div>
</body>

3.6 盒子属性

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
    <style>
.box {
width: 300px;
height: 300px;
border: 10px solid skyblue;
padding: 10px;
margin: 10px;
margin:auto;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
盒子模型:
1)宽和高
width:30opx
height:300px
2)边框
border:宽度 类型 颜色
类型:solid 单线
double 双线
dashed 虚线
3)内边距
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
简写:
padding: 上 右 下 左
4)外边距
margin-top 上
margin-right 右
margin-bottom 下
margin-left 左
简写:
margin: 上 右 下 左
特殊:
margin:auto 水平居中

5)盒子类型
box-sizing:content-box(默认) 盒子大小(宽和高+内边距+边框),计算起来麻烦
box-sizing:border-box盒子大小(宽和高)包含(内边距和边框),计算起来简单

盒子大小=内容大小+padding+border
-->
<div class="box">
<img src="../img/Danboard.jpg" width="260px" height="260px" alt="">

</div>
</body>

四.JavaScript概述
作用:页面交互

特点:
•JavaScrpit源码不需要编译,浏览器可以直接解释运行
•JavaScrpit是弱类型语言,js变量声明不需要指明类型

组成部分 作用
ECMA Scrpit 构成了JS核心的语法规则
BOM Browser Object Model浏览器对象模型,用来操作浏览器上的对象
DOM Document Object Model文档对象模型,用来操作网页中的元素
五.JavaScript基础语法
5.1 HTML引入JS

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
<body>
<!--
HTML引入js的两种方式
1)内部脚本
语法:<script type="text/javascript">JS Code</script>
2)外部脚本
语法:<script src="外部JS文件地址"></script>

补充:script标签可以在页面任意位置,建议放在body尾部
页面顺序:css->html->js

注意:
1)script标签不能自闭和
2)如果script标签使用了src属性,那么浏览器将不会解析此标签体的js代码
-->

<script type="text/javascript">
document.write('<h1>This is Inside Script</h1>')
</script>

<script src="MyJS.js">
// document.write('Useless')
</script>

</body>

5.2 JS三种输出方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<!--
JS三种输出方式:
1)浏览器弹框输出字符
2)输出html内容到页面
3)输出到浏览器控制台
-->
<script>
alert("浏览器弹框输出字符")

document.write("输出html内容到页面")

console.log("输出到浏览器控制台")
</script>
</body>

5.3 JS变量声明
JS是弱类型语言,不注重变量的定义,使用在JS中定义变量的类型方式如下

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
<body>
<!--
JS的变量声明:
ECMAScript 6 之前所有的遍历声明都用var
ES 6 之后开始退出let声明变量,const声明变量
-->

<script>
let str = "AAA";
console.log(str);

let i = 1;
console.log(i);

let d = 123.123;
console.log(d);

const PI = 3.14;
console.log(PI);

//boolean
let b = true;
console.log(b)

//感知弱类型语言不注重变量的定义
let a;
console.log(a);

a = 123;
console.log(a);

a = true;
console.log(a);

a = new Object();
console.log(a);

</script>
</body>

5.4 JS数据类型
JS数据类型也分为基本(原始)数据类型和引用数据类型

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
<body>
<!--
基本数据类型:
1)number 数值(整型,浮点都属于数值)
2)string 字符串(单引号,双引号),在JS中都是字符串,没有字符概念
3)boolean 布尔类型(true/false)
4)undefined 未定义
引用数据类型:
let obj = new Object();
let date = new Date();

判断变量都数据类型:
语法:typeof变量名
-->
<script>

//感知弱类型语言不注重变量的定义
let a;
console.log(typeof a);

a = "ABC";
console.log(typeof a);

a = 'ABC';
console.log(typeof a);

a = 123;
console.log(typeof a);

a = 123.123;
console.log(typeof a);

a = true;
console.log(typeof a);

a=new Object();
console.log(typeof a);

let stu = new Object();
stu.id = 1;
stu.name = 'a';
stu.age = 18;
console.log(stu);
</script>
</body>

7 应用层 <应用层>
Telnet,SSH,HTTP,SMTP,POP,SSL/TLS,FTP,MIME,HTML,SNMP,MIB,SIP,RTP…
6 表示层
5 会话层
4 传输层 <传输层>
TCP,UDP,UDP-Lite,SCTP,DCTP
3 网络层 <网络层>
ARP,IPv4,IPv6,ICMP,IPsec
2 数据链路层
以太网,无线Lan,PPP…
(双绞线,无线,光纤)
1 物理层
一.网络基础知识
1.1 以网络互联方式使用计算机
计算机网络,根据规模可划分为WAN(Wide Area Network,广域网),和LAN(Local Area Network,局域网)

1.2 计算机网络发展的7个阶段
年代 内容
20C 50Y 批处理(Batch Processing)时代
20C 60Y 分时系统(TSS)时代
20C 70Y 计算机间的通信时代
20C 80Y 计算机网络时代
20C 90Y 互联网普及时代
2000 年 以互联网技术为中心时代
IP(Internet Protocol)取代电话网
2010 年 从”单纯建立连接”到”安全建立连接”
手握金刚钻的TCP/IP
互联网许多独立发展的通信技术最终融合成 TCP/IP(通信协议统称)
1.3 协议
“计算机网络体系结构”将现有网络协议进行了系统归纳,TCP/IP就是IP、TCP、HTTP等协议的集合。

网络体系结构 协议 主要用途
TCP/IP IP,ICMP,TCP,UDP,HTTP,TELNET,SNMP,SMTP… 互联网,局域网
IPX/SPX
(Netware) IPX,SPX,NPC… 个人电脑局域网
AppleTalk DDP,RTMP,AEP,ATP,ZIP… Apple产品局域网
DECnet DPR,NSP,SCP… 前DEC小型机
OSI FTAM,MOTIS,VT,CMIS/CMIP,CLNP,CONP… –
XNS IDP,SPP,PEP… 施乐公司网络
协议必要性
在计算机通信中,通信可能因为软硬件不同遇到各种异常,因此要实现达成一个详细的约定,并遵循这一约定,这种约定就是”协议”。
两台计算机必须支持相同的协议,并遵守相同协议进行处理,才能实现相互通信

分组交换协议
分组交换是指将大数据分割为一个个称为Packet的较小单位进行传输。
计算机通信会在每一个分组附上source地址和destination地址,这些地址以及分组序号写入的部分称为”报文首部”
一个较大的数据被分为多个组时,为了标明是原始数据的哪一部分,将有必要将序号写入Packet中。接收端会按照顺序重新装配原始数据

1.4 协议的标准化
为了解决每家都有各自协议无法通信的情况,ISO制定了一个国际标准OSI,对通信系统进行了标准化,但是没有得到普及。
IETF推动了TCP/IP的标准化进程,目前是业界标准。

1.5 协议分层与OSI参考模型
1.6
1.7
1.8
1.9
1.10
二.TCP/IP基础知识
三.数据链路
四.IP协议
五.IP协议相关技术
六.TCP与UDP
七.路由协议
八.应用协议
九.网络安全