JavaWeb学习笔记-part3

最新推荐文章于 2024-09-15 19:46:31 发布

这是我了

最新推荐文章于 2024-09-15 19:46:31 发布

阅读量180

点赞数 2

分类专栏：学习笔记文章标签： java javascript jsp json 后端

本文链接：https://blog.csdn.net/qq_51704510/article/details/119892979

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JSP规范

介绍

来自于JAVAEE规范中的一种
JSP规范制定了如何开发JSP文件代替响应对象将处理结果写入到响应体的开发流程
JSP规范制定了Http服务器应该如何调用管理JSP文件

响应对象存在弊端

适合将数据量较少的处理结果写入到响应体中
如果处理结果数量太多，使用响应对象增加开发难度

JSP优势

JSP文件在互联网通信过程，是响应对象替代品
降低将处理结果写入到响应体的开发工作量降低处理结果维护难度
在JSP文件开发中，可以直接将处理结果写入到JSP文件不需要手写out.print命令，在Http服务器调用JSP文件时，根据JSP规范要求自动将JSP文件书写的所有内容通过输出流写入到响应体

JSP文件运行原理

HTTP服务器调用JSP文件步骤

HTTP服务器将JSP文件内容编辑为一个Servlet接口实现类
HTTP服务器将Servlet接口实现类编译为一个class文件
HTTP服务器负责创建这个class的实例对象，这个实例对象就是Servlet实例对象
Http服务器通过Servlet实例对象调用jsp_service方法，将JSP文件内容写入到响应体

Servlet与JSP

分工：
- Servlet：负责处理业务并得到处理结果
- JSP：不负责业务处理，主要任务将Servlet中处理结果写入到响应体中
调用关系：
- Servlet工作完毕后，一般通过请求转发方式，向Tomcat中申请调用JSP
如何实现数据共享：
- Servlet将处理结果添加到请求作用域对象
- JSP文件在运行时从请求作用域对象得到处理结果

JSP-EL工具包

介绍：
- 由Java技术开发的一个jar包
- 作用是降低JSP文件开发时Java命令开发强度
- Tomcat服务器本身自带了EL工具包
EL表达式
- 命令格式：
```
${作用域对象别名.共享数据}
```
- 命令作用：
  - EL表达式是EL工具包提供的一种特殊命令格式表达式命令格式
  - EL表达式在JSP文件上使用
  - 负责在JSP文件上从作用域对象读取指定的共享数据并把它输出到响应体中
作用域对象别名
- JSP文件可以使用的作用域对象
  - ServletContext application：全局作用域对象
  - HttpSession session：会话作用域对象
  - HttpServletRequest request：请求作用域对象
  - PageContext pageContext：当前页作用域对象
    
    [1] 是JSP文件里面独有的作用域对象。servlet中不存在;在当前页作用域对象存放的共享数据仅能在当前jsp文件中使用，不能共享给其他Servlet或者其他jsp文件;真实开发过程中，主要用于JSTL标签与JSP文件之间数据共享;
- EL表达式提供的作用域对象别名
  
  JSP EL表达式
  application ${applicationScope.共享数据名}
  session ${sessionScope.共享数据名}
  request ${requestScope.共享数据名}
  pageContext ${pageScope.共享数据名}
EL表达式将引用对象属性写入到响应体中
- 命令格式：${作用域对象别名.共享数据名.属性名}
- 命令作用：从作用域对象读取指定共享数据关联的引用对象的属性值，并自动将属性的结果写入响应体中
- 属性名：一定要去引用类型属性名完全一致（包括大小写）
- EL表达式没有提供遍历集合的方法，因此无法从作用域对象读取集合内容输出到响应体中。后续可以通过JSTL来补充
EL表达式简化版
- 命令格式：${共享数据名}
- 命令作用：EL表达式允许开发人员开发时省略作用域对象别名
- 工作原理：EL简化版由于没有指定作用域对象，所有在执行时采用猜算法
  - 首先到pageContext定位共享数据，如果有就直接读取输出并结束执行
  - 如果在pageContext没有定位成功，则到request定位共享数据，如果有就直接读取输出并结束执行
  - 如果在request没有定位成功，则到session定位共享数据，如果有就直接读取输出并结束执行
  - 如果在session没有定位成功，则到application定位共享数据，如果有就直接读取输出并结束执行
  - 如果在application没有定位成功，则返回null
- 存在隐患：
  - 容易降低程序执行速度
  - 容易造成数据定位错误
- 简化版应用场景：
  
  设计目的：简化从pageContext读取共享数据并输出的难度
- EL表达式简化版尽管存在很多隐患，但是在实际开发过程中，开发人员为了节省时间，一般都使用简化版而拒绝标准版。
EL表达式——支持运算表达式
- 前提：在JSP文件有时需要将读取共享数据进行运算之后，将运算结果写入到响应体中
- 运算表达式：
  - 数学运算：+，-，*，/
  - 关系运算：>,<,==
  - 逻辑运算：&&，||，！

JSP	EL表达式
application	${applicationScope.共享数据名}
session	${sessionScope.共享数据名}
request	${requestScope.共享数据名}
pageContext	${pageScope.共享数据名}

EL表达式提供内置对象

命令格式：${param.请求参数名}
命令作用：从通过请求对象读取当前请求包中请求对象参数内容，并将请求参数内容写入到响应体中

代替命令：

<!--index.jsp-->
<!--发送请求:Http://localhost:8080/myWeb/index.jsp?userName=mike&password=123-->
<%
    String userName = request.getParameter("userName");
    String password = request.getParameter("password");
%>
<%=userName%>
<%=password%>

<!--使用EL表达式-->

${param.userName}
${param.password}

命令格式：${paramValues.请求参数名[下标]}
命令作用：如果浏览器发送的请求参数是一个请求参数关联多个值，此时可以通过paramValues读取请求参数下指定位置的值并写入响应体中

替代命令：

<!--index.jsp-->
<!--发送请求:Http://localhost:8080/myWeb/index.jsp?pageNo=1&pageNo=2&pageNo=3-->
<%
    String array[] = request.getParameterValues("pageNo");
%>
<%=array[0]%>
<%=array[1]%>
<%=array[2]%>

<!--使用EL表达式-->

${paramValues.pageNo[0]}
${paramValues.pageNo[1]}
${paramValues.pageNo[2]}

EL表达式常见异常
- javax.el.PropertyNotFoundException：没有找到属性。
  
  常常是在EL表达式中写错了属性名

JavaScript

介绍

JavaScript是一种专门在浏览器编译并执行的编程语言
JavaScript处理用户与浏览器之间请求问题
JavaScript采用弱类型编程语言风格对面向对象思想来进行实现的编程语言

弱类型编程语言风格vs强类型编程语言风格

强类型编程语言风格

认为对象行为应该受到其修饰类型严格约束。

Java采用强类型编程语言风格对面向对象思想来实现的编程语言

class student {
    public String sname;
    public void sayHello() {
        System.out.print("hello world");
    }
}

Student stu = new Student();
stu.sname = "mike"; //合法
stu.sayHello(); //合法
stu.sid = 10; //在java认为是语法错误，修饰stu对象的Student类型没有提供这个属性

弱类型编程语言风格

认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定对象可以调用属性和方法

JavaScript采用弱类型编程语言风格对面向对象思想来进行实现的编程语言

var stu = new Object();
stu.car = "劳斯莱斯"; //合法
stu.play = function() { return "打游戏"} //合法
stu.play();

JavaScript入门语法

JavaScript中变量声明方式

命令格式：
```
var a;
var b = 1;
var c,d=2;
```
注意：在JavaScript变量/对象，在声明不允许指定修饰类型，只能通过var来修饰

JavaScript中标识符命名规则

标识符只能由四种符号组成：英语字母，数字，下划线，美元符号$
标识符首字母不能以数字开头
标识符不能采用JavaScript中的关键字，比如var

JavaScript数据类型

基本数据类型：
- 数字类型（number）：JS中将整数与小数合称number类型
- 字符串类型（string）：JS中字符与字符串合称为string类型；既可以使用''也可以使用""
- 布尔类型（boolean）：JS中boolean类型的值只有true和false
高级引用数据类型：
- object类型：JS中所有通过构造函数生成的对象都是object类型
- function类型：JS所有函数都是function类型

JavaScript中特殊值

undefined：JS中所有变量在没有赋值时，其默认值都是undefined由于Js根据变量的赋值来判断变量类型，此时由于变量没有赋值因此JS无法判断当前遍历数据类型，此时返回也是undefined，因此初学者认为undefined也是一种数据类型这种理解是错误的。
null：JS中当一个对象赋值为null时，表示对象引用了一个空内存，这个空内存既不能存数据也不能读数据；此时这个对象数据类型，在JS中仍被认为是object类型。
NaN：JS中当一个变量赋值为NaN，表示变量接收了一个非法数字（abc123）此时这个变量数据类型，在JS中仍被认为number类型
infinity：JS中当一个变量赋值为infinity，表示变量接收到一个无穷大数字，此时JS仍认为是number类型

JavaScript控制语句

和Java完全一致、

JavaScript函数声明方式

命令格式：

function 函数名(形参1，形参2){
    ...
    ...
    
    return //返回运行结果
}

注意：
- JS中，所有函数在声明时，都需要使用function进行修饰
- JS中，所有函数在声明时，禁止指定函数返回数据类型
- JS中，所有函数在声明时，形参既不能使用var来修饰也不能用数据类型修饰
- JS中，所有函数在声明时，如果有返回值，此时应该通过return返回

JavaScript函数调用方式

浏览器并不会自动调用JS函数
可以通过命令行的方式来调用JS函数
通过绑定在HTML标签上的监听事件通知浏览器调用指定函数进行处理

JavaScript应用篇

JavaScript作用

帮助浏览器对用户提出请求进行处理

DOM对象

DOM = Document Object Model，文档模型对象
JS不能直接操作HTML标签，只能通过HTML标签关联的DOM对象对HTML标签下达指令

DOM对象生命周期

浏览器在接收到HTML文件之后，将HTML文件标签加载到浏览器缓存中，每当加载一个HTML标签的时候，自动为这个标签生成生成一个实例对象，这个实例对象就是DOM对象
在浏览器关闭之前或者浏览器请求其他资源文件之前，本次生成的DOM对象一直存活在浏览器缓存中
在浏览器关闭时，浏览器缓存中的DOM对象将被销毁
在浏览器请求到新资源文件后，浏览器缓存中原有的DOM对象将被覆盖

document对象

document对象被称为文档对象
document对象用于在浏览器内存中根据定位条件定位DOM对象

document对象生命周期

在浏览器将网页中所有标签加载完毕后，在内存中将使用树形结构储存这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树（DOM树）
一个浏览器运行期间，只会生成一个document对象
在浏览器关闭时，会将document对象销毁

通过document对象定位DOM对象

根据HTML标签的id属性值定位DOM对象

var domObj = document.getElementById("id属性");

根据HTML标签的name属性值定位DOM对象

var domArray = document.getElementsByName("name属性");

根据HTML标签类型定位DOM对象

var domArray = document.getElementsByTagName("标签类型");

DOM对象控制标签属性

DOM对象对标签value属性进行取值与赋值操作

//取值操作
    var domObj = document.getElementById("one");
    var num = domObj.value;
//赋值操作
    domObj.value = "abc";

DOM对象对标签样式属性进行取值与赋值操作

    var domObj = document.getElementById("one");
//取值操作
    var color = domObj.style.背景颜色属性
//赋值操作
    domObj.style.背景颜色属性 = 值

DOM对象对标签状态属性进行取值与赋值操作
- 状态属性：状态属性都是boolean类型
  - disabled：标签是否可用
  - checked：标签是否被选中
```
    var domObj = document.getElementById("one");
//取值操作
    var num = domObj.checked;
//赋值操作
    domObj.checked = true; 
```
DOM对象对标签文字显示内容进行取值与赋值操作
- 文字显示内容：只存在于双目标签之间
```
    var domObj = document.getElementById("one");
//取值操作
    var num1 = domObj.innerText;
//赋值操作
    domObj.innerText = 值; 
```
- innerText与innerHTML区别：
  - innerText与innnerHTML都可以对标签文字显示内容属性进行赋值与取值
  - innerText只能接收字符串
  - innerHTML既可以接收字符串又可以接收HTML标签

JavaScript监听事件

监听事件：

监听用户在何时以何种方式对当前标签进行操作。当监听到相关行为时，通知浏览器调用对应JavaScript函数对当前用户请求进行处理
监听事件分类：
- 监听用户何时使用鼠标操作当前标签
  1. onclick：监听用户何时使用鼠标单击当前标签
  2. onmouseover：监听用户何时将鼠标悬停在当前标签上方
  3. onmouseout：监听用户何时将鼠标从当前标签上方离开
  4. onfocus：监听用户何时通过鼠标让当前标签获得光标
  5. onblur：监听用户何时通过鼠标让当前标签丢失光标
- 监听用户何时使用键盘操作当前标签
  1. onkeydown：监听用户何时在当前标签上按下键盘
  2. onkeyup：监听用户何时在当前标签上抬起键盘
- onload监听事件
  - 作用：监听浏览器何时将网页中HTML标签加载完毕
  - 意义：浏览器每加载一个HTML标签时，自动在内存中生成一个DOM对象。在浏览器将网页所有标签加载完毕时，意味当前网页中所有标签都生成对应DOM对象。onload此时就可以触发调用函数对浏览器中标签进行处理，此时不会出现未找到DOM对象。

基于DOM对象实现监听事件与HTML标签之间的绑定

前提：

实际开发过程中，同一个监听事件往往与多个HTML标签进行绑定，这样增加开发难度，在未来维护过程中增加难度

命令形式

var domObj = document.getElementByTagName("");
domObj.监听事件名 = 处理函数名; //此处处理函数名后面不能写()

JavaScript高级篇

arguments属性

JS中每个函数都包含一个arguments属性
arguments属性是一个数组
在函数调用时，将实参传入到函数的arguments中，再由arguments将数据传递给形参
arguments属性存在，可以将JS中函数在调用时传递实参与形参进行格式，增加函数调用的灵活性
arguments属性只能在函数体内使用，不能在函数体外使用

function类型对象

介绍：
- function是JS中一个高级数据类型
- 一个function类型对象用于管理一个具体函数
- JS中function类型相当于Java中Method类型

function类型对象生命周期

标准声明方式

function 函数对象名(参数1,参数2) {
    命令...
}

匿名声明方式（命令行）

var 函数对象名 = function (参数1,参数2) {命令...}

function类型对象的创建时机
- 浏览器在加载<script>时，共加载两次
- 第一次加载，将<script>标签所有以标准形式声明函数对象进行创建
- 第二次加载，将<script>标签所有命令行按照自上而下顺序来执行

全局变量与局部变量

局部变量：
- 定义：在函数执行体内，通过var修饰符声明的变量
- 特征：局部变量只能在当前函数执行体使用，不能再函数执行体外使用
全局变量：
- 定义：
  - 全局变量可以在当前HTML文件中所有的函数使用
  - 全局变量被声明时，自动分配给window对象作为其属性
- 声明全局变量：
  - 第一种方法：直接在script标签下，通过var声明的变量，就是全局变量
  - 第二种方式：在函数执行体内，没有通过var修饰的变量也是全局变量

object类型对象特征

定义：在JS认为所有通过构造函数生成的对象其数据类型都是object类型
特征：object类型对象在创建完毕后们可以根据实际情况，任意添加属性和方法，也可以一处属性和方法

属性维护：

第一种维护方案：

//添加属性
    object对象.新属性名 = 值;
//添加函数
    object对象.新函数对象名 = function(){};

第二种维护方案：

//添加属性
    object对象["新属性名"] = 值;
//添加函数
    object对象["新函数对象名"] = function(){};

移除对象属性和方法：

//移除属性
    del object对象.属性名;
//移除函数
    del object对象.函数对象名;

自定义构造函数

命令：

function 函数对象名() {

}
//调用
var object类型对象 = new 函数对象名();

普通函数与构造函数区分：
- 函数没有调用之前，无法区分函数身份，只能根据函数调用形式区分
- 判断普通函数：var num = 函数对象名 ();
- 判断构造函数：var num = new 函数对象名 ();
- 返回值：
  
  普通函数运行后需要通过return将执行结果返回；
  
  构造函数运行后直接返回一个object类型对象，此时函数return相当于无效的

JavaScript中this指向

JS中this指向与Java中this指向完全一致
- 在构造函数，this指向当前构造函数生成object类型对象
- 在普通函数，this指向调用当前函数的实例对象

JSON

前提：JS中得到object类型对象方式
- 方式1：由构造函数生成的对象都是object类型对象
- 方式2：由JSON数据描述格式生成对象都是object类型对象
JSON数据描述格式：
- JS中获得object类型对象简化版
标准命令格式：
```
var obj = {"属性名1":值,"属性名2":值...}
```
开发人员习惯于将由JSON生成object类型对象称为JSON对象
JSON数组：
- 专门存放JSON对象的数组被称为JSON数组