JSP,EL表达式,JavaScript

2021-09-26
作者 ZXY39
~12.40K 字

JSP

Http服务器调用JSP文件步骤:【2019年北京地区常考面试题】

Http服务器将JSP文件内容【编辑】为一个Servlet接口实现类（.java）
Http服务器将Servlet接口实现类【编译】为class文件(.class)
Http服务器负责创建这个class的实例对象，这个实例对象就是Servlet实例对象
Http服务器通过Servlet实例对象调用_jspService方法，将jsp文件内容写入到响应体

Http服务器【编辑】与【编译】JSP文件位置

标准答案：在【work】下可以证明

如：C:\Users[登录windows系统用户角色名].IntelliJIdea2018.3\system\tomcat[网站工作空间]\work\Catalina\localhost\【网站别名】\org\apache\jsp

EL表达式

命令格式：

${作用域对象别名.共享数据}

命令作用

1）EL表达式是EL工具包提供一种特殊命令格式【表达式命令格式】

2）EL表达式在JSP文件上使用

3）负责在JSP文件上从作用域对象读取指定的共享数据并输出到响应体

EL表达式——作用域对象别名

JSP文件可以使用的作用域对象

ServletContext application: 全局作用域对象
HttpSession session: 会话作用域对象
HttpServletRequest request: 请求作用域对象
PageContext pageContext：当前页作用域对象，这是JSP文件独有的作用域对象，在Servlet中不存在。在当前页作用域对象存放的共享数据仅能在当前JSP文件中使用，不能共享给其他Servlet或则其他JSP文件。

真实开发过程，主要用于JSTL标签与JSP文件之间数据共享

数据：JSTL——->pageContext—->JSP

EL表达式提供作用域对象别名

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

EL表达式将引用对象属性写入到响应体

命令格式:

${作用域对象别名.共享数据名.属性名}

命令作用:

从作用域对象读取指定共享数据关联的引用对象的属性值，并自动将属性的结果写入到响应体。

属性名：

一定要去引用类型属性名完全一致（大小写）

注意：EL表达式没有提供遍历集合方法，因此无法从作用域对象读取集合内容输出

EL表达式简化版

命令格式：

${共享数据名}

命令作用：

EL表达式允许开发人员开发时省略作用域对象别名

工作原理：

EL表达式简化版由于没有指定作用域对象，所以在执行时采用【猜】算法

顺序：pageContext—>request—>session—>application

首先到【pageContext】定位共享数据，如果存在直接读取输出并结束执行。
如果在【pageContext】没有定位成功，到【request】定位共享数据，如果存在直接读取输出并结束执行。
如果在【request】没有定位成功，到【session】定位共享数据，如果存在直接读取输出并结束执行。
如果在【session】没有定位成功，到【application】定位共享数据，如果存在直接读取输出并结束执行。
如果在【application】没有定位成功，返回null。

存在隐患：

容易降低程序执行速度【南辕北辙】
容易导致数据定位错误

应用场景：

设计目的，就是简化从pageContext读取共享数据并输出难度

EL表达式简化版尽管存在很多隐患，但是在实际开发过程中，开发人员为了节省时间，一般都使用简化版，拒绝使用标准版。

EL表达式—–支持运算表达式

前提：

在JSP文件有时需要将读取共享数据进行一番运算之后，将运算结果写入到响应体

运算表达式:

数学运算
关系运算: > >= == < <= !=分别对应于
1. gt ge eq lt le !=

G（reater）T（han）， G（reater than or）E（qual），EQ（ual），L（ess）T（han），L（ess than or） E（qual）

逻辑运算： && || ！

EL表达式提供内置对象

1.命令格式:

${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%>

2.命令格式：

${paramValues.请求参数名[下标]}

命令作用:

如果浏览器发送的请求参数是[一个请求参数关联多个值]，此时可以通过paramVaues读取请求参数下指定位置的值，并写入到响应体。

代替命令:

http://localhost:8080/myWeb/index_2.jsp?pageNo=1&pageNo=2&pageNo=3

此时pageNo请求参数在请求包以数组形式存在：pageNo:[1,2,3]

<%
  String array[]= request.getParameterValues("pageNo");
%>
第一个值:<%=array[0]%>
第二个值:<%=array[1]%>

EL表达式常见异常:

javax.el.PropertyNotFoundException:在对象中没有找到指定属性

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对象能够调用属性只有sname
 stu.sayHello();  stu对象能够调用方法只有sayHello()
 stu.sid =10; // 在Java认为是语法错误，修饰stu对象的Student类型没有提供这个属性

2. 弱类型编程语言风格：认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定，对象可以调用属性和方法

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

var stu = new Object();//stu对象相当于【阿Q】
stu.car = "劳斯莱斯";//合法
stu.play = function (){ return "天天打游戏"}
stu.play();

JavaScript中变量声明方式:

命令格式:

1
2
3

var 变量名;
   var 变量名 = 值;
   var 变量名1,变量名2=值；

注意：

在JavaScript变量/对象，在声明不允许指定【修饰类型】,只能通过var来进行修饰

JavaScript中标识符命名规则:

标识符只能由四种符号组成英文字母，数字 , 下划线，美元符号($)
标识符首字母不能以”数字”开头
标识符不能采用JavaScript关键字比如 var

JavaScript数据类型：

JavaScript中控制语句

JavaScript中控制语句与Java中控制语句语法格式完全一致

JavaScript中函数声明方式

命令格式:

function   函数名(形参名1，形参名2){	  
 	      JavaScript命令行
 	      JavaScript命令行
	      return  将函数运行结果进行返回
	  }

注意:

JavaScript中，所有函数在声明时：

都需要使用function进行修饰。
禁止指定函数返回数据类型。
形参既不能使用var来修饰也不能使用数据类型修饰。
如果有返回值，此时应该通过return进行返回。

JavaScript函数调用方式:

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

DOM对象

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

DOM对象生命周期

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

document对象

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

document对象生命周期:

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

通过document对象定位DOM对象方式:

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

1
2
3

命令格式       var domObj =  document.getElementById("id属性值")；
举个栗子       var domObj =  document.getElementById("one")；

通知document对象定位id属性等于one的标签关联的DOM对象。

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

命令格式       var domArray =  document.getElementsByName("name属性值");
举个栗子       <input type="checkbox" name="deptNo" value="10">部门10
 	          <input type="checkbox" name="deptNo" value="20">部门20
 			  <input type="checkbox" name="deptNo" value="30">部门30
 			  var domArray =  document.getElementsByName("deptNo");

通知document对象将所有name属性等于deptNo的标签关联的DOM对象进行定位并封装到一个数组进行返回。 domArray就是一个数组存放本次返回的所有DOM对象。

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

命令格式      var domArray =   document.getElementsByTagName("标签类型名");
举个栗子      var  domArray = document.getElementsByTagName("p");

<p>段落标签</p>

通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回。

DOM对象对HTML标签属性操作

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

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

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

取值操作:
 	         var domObj =  document.getElementById("one");
 		     //读取当前标签【背景颜色属性】值
 		     var color = domObj.style.背景颜色属性
赋值操作:
 	         var domObj =  document.getElementById("one");
 		     //通过DOM对象对标签中【背景颜色属性】进行赋值
 		     domObj.style.背景颜色属性 = 值；

3.DOM对象对标签中【状态属性】进行取值与赋值操作

状态属性：  状态属性的值都是boolean类型

 	          disabled = true ; 表示当前标签不可以使用
 			  disabled = false; 表示当前标签可以使用

 			  checked: 只存在与radio标签与checkbox标签
 			  checked = true ;  表示当前标签被选中了
 			  checked = false;  表示当前标签未被选中

取值操作:
 	           var domObj = document.getElementById("one");
 			   var num = domObj.checked;

赋值操作:
 	            var domObj = document.getElementById("one");
 			    domObj.checked = true;

DOM对象对标签中【文字显示内容】进行赋值与取值

文字显示内容:  只存在于双目标签之间;<tr>100</tr>

取值操作:
            var domObj = document.getElementById("one");
 		    var num1 = domObj.innerText;
             
赋值操作:
            var domObj = document.getElementById("one");
		    domObj.innerText = 值；

innerText与innerHTML 区别:

innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值。
innerText只能接收字符串。
innerHTML既可以接收字符串又可以接收html标签。

JavaScript监听事件

监听事件:

监听用户在何时以何种方式对当前标签进行操作。当监听到相关行为时，通知浏览器调用对应JavaScript函数对当前用户请求进行处理。

监听事件分类:

监听用户何时使用鼠标操作当前标签。
监听用户何时使用键盘操作当前标签。

监听用户何时使用鼠标操作当前标签：

onclick :监听用户何时使用鼠标【单击】当前标签。
onmouseover:监听用户何时将鼠标【悬停】当前标签上方。
onmouseout :监听用户何时将鼠标从当前标签上方【移开】。
onfocus :监听用户何时通过鼠标让当前标签获得【光标】。
onblur :监听用户何时通过鼠标让当前标签丢失【光标】。

监听用户何时使用键盘操作当前标签

onkeydown:监听用户何时在当前标签上【按下键盘】
onkeyup:监听用户何时在当前标签上【弹起键盘】

onload监听事件

作用:

监听浏览器何时将网页中HTML标签加载完毕。

意义:

浏览器每加载一个HTML标签时，自动在内存生成一个dom对象。在浏览器将网页所有标签加载完毕时，意味当前网页中所有标签都生成对应DOM对象。onload此时就可以触发调用函数对浏览器中标签进行处理,此时不会出现未找到DOM对象问题。

使用:

<script type="text/javascript">
function fun1() {
window.alert ( "fun1 is run. . .")
</script>
<body onload="fun1()"></body>

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

前提:

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

命令形式:

domobj.监听事件名=处理函数名
此处处理函数名后面不能出现()。

举个栗子:

1
2
3

var domobj = document.getElementById ( "one" ) ;
domobj. onclick = fun1;1/注意函数名后面不能有（相当于
<input type="button" id="one" onclick="fun1()">//此处函数名后面必须有（）

argruments:

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

function类型对象

介绍:

function是Javascript中一种高级数据类型2)一个function类型对象用于管理一个具体函数
Javascript中function类型相当于Java中Method类型J
function类型对象声明方式

1)标准声明方式

2)匿名声明方式

function类型对象声明方式—-标准声明方式

1
2
3

function 函数对象名(参数1，参数2){
	命令;
}

function类型对象声明方式—-匿名声明方式

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

function类型对象的创建时机

1
2
3

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

局部变量与全局变量

局部变量:

定义:

在函数执行体内,通过var修饰符声明的变量

1
2
3

function fun1 (){
var name ="mike"; 1/局部变量
}

特征:

局部变量只能在当前函数执行体使用，不能在函数执行体外使用

全局变量:

定义:

全局变量可以在当前HTML文件中所有的函数中使用
全局变量被声明时，自动分配给window对象作为其属性

声明全局变量:

第一种方式:直接在script标签下，通过var声明的变量，就是全局变量

第二种方式:在函数执行体内，没有通过var修饰符修饰的变量也是全局变量

object类型对象特征:

定义:

在Javascript认为所有通过构造函数生成对象其数据类型都是object类型。

特征:

object类型对象在创建完毕后，可以根据实际情况，任意添加属性和方法，也可以移除属性和方法。

属性维护:

第一种维护方案:

添加属性：

1	object对象.新属性名=值;

添加函数：

1	object对象.新函数对象名=function () {};

第二种维护方案

添加属性：

1	object对象["新属性名"]=值;

添加函数：

1	object对象["新函数对象名"]=function (){};

移除对象属性和方法：

1 2	del object.属性名 del object.函数名

自定义构造函数

命令

1 2	function 函数对象名(){ }

调用

1	var object类型对象 = new 数对象名();

普通函数与构造函数区分:

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

JavaScript中this指向

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

例题：JS实现HashMap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        * 在Java中存在一个HasMap类型
        * 以键值对方式存储数据
        * 一次可以存储多个键值对
        * 并且要求每一个关键字都是唯一
        * 读取可以通过给定关键字读取对应的值
        * 器具体使用方式如下
        * HashMap map = new HashMap();
        * map.put("key1",100)
        * map.put("key2",200)
        * map.get("key1") ==100
        * map.get("key2") ==200
        *
        * JavaScript中并不存在HasMap类型，要求在JavaScript模拟出一个HashMap类型对象
        * 要求具有上述所有功能
        */
        function HashMap(){
            var obj  = new Object(); //object类型对象
            this.put = function(key,value){
                obj[key] =value;
            };
            this.get = function(key){
                 return obj[key];
            }
        }
        var map = new HashMap();
        map.put("key1","100");
        map.put("key2","200");
        var num = map.get("key1")
        window.alert("num = "+num);
    </script>
</head>
<body>
</body>
</html>

JSON

前提:

Javascript中得到object类型对象方式。
方式1:由构造函数生成的对象都是object类型对象。
方式2:由JSON数据描述格式生成对象都是object类型对象。

JSON数据描述格式:

Javascript中获得object类型对象简化版。

标准命令格式:

1	var obj={ "属性名1":值,"属性名2":值};

开发人员习惯于将由JSON生成object类型对象称为【JsON对象】。

JSON数组:

专门存放JsON对象的数组被称为JSON数组。

印·纪

JSP

Http服务器调用JSP文件步骤:【2019年北京地区常考面试题】

Http服务器【编辑】与【编译】JSP文件位置

EL表达式

命令格式：

命令作用

EL表达式——作用域对象别名

JSP文件可以使用的作用域对象

EL表达式提供作用域对象别名

EL表达式将引用对象属性写入到响应体

命令格式:

命令作用:

属性名：

EL表达式简化版

命令格式：

命令作用：

工作原理：

存在隐患：

应用场景：

EL表达式—–支持运算表达式

前提：

运算表达式:

EL表达式提供内置对象

1.命令格式:

命令作用：

代替命令:

2.命令格式：

命令作用:

代替命令:

EL表达式常见异常:

JavaScript

介绍:

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

JavaScript中变量声明方式:

命令格式:

注意：

JavaScript中标识符命名规则:

JavaScript数据类型：

分类：

基本数据类型：

数字类型（number）：

字符串类型(string)：

布尔类型(boolean):

高级引用数据类型:

object类型

function类型

JavaScript中特殊【值】

JavaScript中控制语句

JavaScript中函数声明方式

命令格式:

注意:

JavaScript函数调用方式:

DOM对象

DOM对象生命周期

document对象

document对象生命周期:

通过document对象定位DOM对象方式:

DOM对象对HTML标签属性操作

innerText与innerHTML 区别:

JavaScript监听事件

监听事件:

监听事件分类:

监听用户何时使用鼠标操作当前标签：

监听用户何时使用键盘操作当前标签

onload监听事件

作用:

意义:

使用:

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

前提:

命令形式:

举个栗子:

argruments:

function类型对象

介绍:

function类型对象声明方式

function类型对象声明方式—-标准声明方式

function类型对象声明方式—-匿名声明方式

function类型对象的创建时机

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可