day034 jsp

前言:今天内容知道就行,因为有更好的技术(jstl)来实现今天的内容,在以后开发中基本不会用今天的东西(但是最好能理解今天的内容,虽然不用会敲)。

1 jsp

1.1 jsp概述

Java  server pages,简称jsp。

中文名:java服务器页面技术。

可以帮我们完成页面标签及数据的字符串拼接,主要用于动态数据(通常是从数据库中查询的数据)的展示。

1.2 jsp的创建

使用eclipse的模板直接创建jsp文件即可。

1.3 jsp的执行原理

通过观察tomcat目录下的work目录中的,可以找到jsp编译后的.java和.class文件,证明jsp的实质就是一个servlet!!!

 

执行原理图:

image.png

1.4 Jsp的语法

1.4.1 基本语法--脚本标签

一共有3个,常用的有两个:

<%  java代码  %>        常用

<%=  表达式或变量名  %>        常用

<%!  定义成员变量或定义方法  %>        了解

1.4.2 基本语法--注释

<%--  jsp中的注释,这个注释会在翻译成.java文件的时候自动消失   --%>

<%  java的注释   //   /**/ ,会在.java文件中存在,在.class文件中消失  %>

<!-- html的注释,这个注释,会在jsp、.java、.class中都存在,仅在浏览器上显示的时候消失  -->

建议使用jsp的注释,因为可以尽快的让注释消失。

1.4.3 指令

在jsp中的指令有3种:

<%@ page  属性名1=属性值1  属性名2=属性值2  ...     %>

用于页面控制,例如:页面编码、页面语言、页面使用的其他java类(导包)

常用的属性:

import="包名.类名,包名2.类名2,...."  

<%@ include   file="/其他jsp文件的路径" %>

用于静态包含,将其他的jsp页面内容,复制粘贴到本jsp页面中来(源码级别的复制粘贴)。

File的路径可以是绝对路径也可以是相对路径,建议使用绝对路径。

常用属性:

File="/其他jsp文件的路径"

<%@ taglib  prefix="c"  uri="jstl/core..."%>

用于引入jstl的标签,可以在jsp页面使用jstl标签完成页面上的逻辑循环,与逻辑判断等。

注意:

指令可以写在jsp页面的任意位置。

1.4.4 九大内置对象(背会)(面试常问)

所谓的内置对象就是服务器在编译jsp文件的时候,就会直接创建出来的9个变量,程序员可以直接使用这9个变量,从而实现相应的效果。

9大内置对象:

对象名                      数据类型

Request                   HttpServletRequest

Response                HttpServletResponse

Out                         JspWriter (比我们自己的getWriter获取的流,输出的信息要慢)

Session                    HttpSession

Application           ServletContext

Config            ServletConfig

Page                this(就是编译后的servlet对象)

Exception 必须在错误页面才能使用该对象,其他页面不能使用

pageContext           PageContext          含义:上下文对象;(jsp的容器对象);

 

pageContext的作用:

1:可以获取其他的8个内置对象。(这是一个大管家)

2:可以操作4大域的存值与取值。

 

关于out与response.getWriter的问题:

image.png

代码举例:

9.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>练习9大内置对象</title>
</head>
<body>
    <%
        //9个内置对象,除了exception之外,都可以直接使用
        request.setAttribute("username","杰克");
        向session中存值
        session.setAttribute("age",18);
        //转发
        request.getRequestDispatcher("/9nei/9_2.jsp").forward(request, response);
    %>
</body>
</html>

9_2.jsp

<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP 中实现日期控件,可以使用第三方框架或者自己编写 JavaScript 实现。以下是一个简单的示例代码: 1. 借助第三方框架 使用第三方框架可以简化日期控件的实现过程,常见的框架有 jQuery UI、Bootstrap Datepicker 等。以 jQuery UI 为例: 首先,在 jsp 页面中引入 jQuery 库和 jQuery UI 库: ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> ``` 然后,在需要使用日期控件的 input 标签中添加以下代码: ``` <input type="text" id="datepicker"> ``` 最后,在 JavaScript 中实现日期控件: ``` $( function() { $( "#datepicker" ).datepicker(); } ); ``` 2. 自己编写 JavaScript 实现 如果不想使用第三方框架,也可以自己编写 JavaScript 实现。以下是一个简单的示例代码: 在 jsp 页面中添加以下代码: ``` <input type="text" id="datepicker"> ``` 在 JavaScript 中实现日期控件: ``` var datepicker = document.getElementById("datepicker"); datepicker.addEventListener("focus", function() { var datePickerDiv = document.createElement("div"); datePickerDiv.setAttribute("id", "datePickerDiv"); var currentDate = new Date(); var currentYear = currentDate.getFullYear(); var currentMonth = currentDate.getMonth() + 1; var currentDay = currentDate.getDate(); var yearSelect = "<select id='yearSelect'>"; for (var i = currentYear - 10; i <= currentYear + 10; i++) { yearSelect += "<option value='" + i + "'>" + i + "</option>"; } yearSelect += "</select>"; var monthSelect = "<select id='monthSelect'>"; for (var i = 1; i <= 12; i++) { var monthText = i < 10 ? "0" + i : i; monthSelect += "<option value='" + i + "'>" + monthText + "</option>"; } monthSelect += "</select>"; var daySelect = "<select id='daySelect'>"; for (var i = 1; i <= 31; i++) { var dayText = i < 10 ? "0" + i : i; daySelect += "<option value='" + i + "'>" + dayText + "</option>"; } daySelect += "</select>"; datePickerDiv.innerHTML = yearSelect + monthSelect + daySelect; datePickerDiv.style.position = "absolute"; datePickerDiv.style.left = datepicker.offsetLeft + "px"; datePickerDiv.style.top = datepicker.offsetTop + datepicker.offsetHeight + "px"; datePickerDiv.style.backgroundColor = "#fff"; datePickerDiv.style.border = "1px solid #ccc"; datePickerDiv.style.padding = "5px"; document.body.appendChild(datePickerDiv); var yearSelect = document.getElementById("yearSelect"); var monthSelect = document.getElementById("monthSelect"); var daySelect = document.getElementById("daySelect"); yearSelect.value = currentYear; monthSelect.value = currentMonth; daySelect.value = currentDay; yearSelect.addEventListener("change", function() { setDays(); }); monthSelect.addEventListener("change", function() { setDays(); }); function setDays() { var year = yearSelect.value; var month = monthSelect.value; var day = daySelect.value; var daysInMonth = new Date(year, month, 0).getDate(); daySelect.innerHTML = ""; for (var i = 1; i <= daysInMonth; i++) { var dayText = i < 10 ? "0" + i : i; daySelect.innerHTML += "<option value='" + i + "'>" + dayText + "</option>"; } if (day > daysInMonth) { daySelect.value = daysInMonth; } else { daySelect.value = day; } } function hideDatePicker() { datePickerDiv.parentNode.removeChild(datePickerDiv); } yearSelect.focus(); yearSelect.select(); yearSelect.addEventListener("blur", function() { hideDatePicker(); }); monthSelect.addEventListener("blur", function() { hideDatePicker(); }); daySelect.addEventListener("blur", function() { hideDatePicker(); }); }); ``` 以上代码实现了一个简单的日期控件,包含年、月、日三个下拉框,用户选择日期后会自动填充到 input 标签中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值