【JSP初学】JSP 的编写和运行/包含指令

最新推荐文章于 2023-02-27 09:12:37 发布

倔强青铜刀刀

最新推荐文章于 2023-02-27 09:12:37 发布

阅读量1.9k

点赞数

文章标签： java servlet maven

本文链接：https://blog.csdn.net/qq_56494741/article/details/129015380

版权

使用JSP

目的
1、新建 web maven 项目 jsp
2、编写显示 HelloWorld！的 JSP
3、在显示 HelloWorld！的 JSP 中使用注释
4、使用包含指令
5. 使用<%= %>和<%%>完成一个乘法表页面
6. 使用 jstl 和 el 表达式完成一个乘法表页面

目的

1）掌握 JSP 的结构；
2）掌握 JSP 的编写和运行；
3）JSP 中使用包含指令。

1、新建 web maven 项目 jsp

参考这里步骤！

2、编写显示 HelloWorld！的 JSP

在 idea 中创建第一个 JSP，文件名是 helloworld.jsp，客户端浏览器访问该文件会显示HelloWorld！。

helloworld.jsp下代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h2>Hello World!</h2>
</body>
</html>

在这里插入图片描述

3、在显示 HelloWorld！的 JSP 中使用注释

JSP注释常用的有两种：HTML注释和隐藏注释（JSP专有注释）知识点

使用注释的代码如下：
<%-- This comment will not be visible in the page source --%>
在浏览器中查看注释的显示情况。

helloworld.jsp下代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>hello</title>
</head>
<body>
    <h2>HelloWorld！</h2>
    <!-- This file displays the user login screen -->
    <!--This page was loaded on <%= (new java.util.Date()).toString() %> -->
    <%-- This comment will not be visible in the page source --%>

</body>
</html>

启动tomcat运行，在HTML界面查看，结果如下：
在这里插入图片描述

4、使用包含指令

知识点！

编写 2 个 jsp 文件，主文件是 include.jsp，被包含的文件是 included.jsp。
在这里插入图片描述

代码如下：
include.jsp：

<!--include.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>test include</title>
</head>

<body bgcolor="white">
<font color="blue">
    The current date and time are
    <%@ include file="included.jsp"%>
    <br>执行完了 include 后执行本行。
</font>
    </body>
</html>

included.jsp：

<!--included.jsp-->
<%@ page import="java.util.*" %> 
<%=(new java.util.Date() ).toLocaleString() %>

启动tomcat运行，结果如下：

在这里插入图片描述

5. 使用<%= %>和<%%>完成一个乘法表页面

编写一个 jsp 页面，使用<%=%>和<%%>在页面中显示一个 9*9 的乘法表。
在这里插入图片描述

<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>9*9乘法表</title>
    <style type="text/css">
        font {
            position: relative;
            left: 300px;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<h2>这里是九九乘法表：</h2>
<div>
    <%      for (int i=1; i<=9; i++) {
               for (int j=1; j<=i; j++) {
    %>
    <font>
        <%out.println(i + " x " + j + " = " + (i*j));    %>
        <%if (j==2 && i*j<10) {     %>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <%     } else {     %>
        &nbsp;&nbsp;
        <%          }      %>
    </font>
    <%     }  %>
    <br>
    <%    }  %>
</div>
</body>
</html>

启动tomcat运行，结果如下：

在这里插入图片描述

6. 使用 jstl 和 el 表达式完成一个乘法表页面

将步骤 5 中的乘法表使用 jstl 标签完成。
**！！要先添加jar包依赖！**去maven仓库里找，然后下载添加。
在Maven 构建的项目中的 pom.xml 文件中依赖添加：

<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/taglibs/standard -->
<dependency>
    <groupId>taglibs</groupId>
    <artifactId>standard</artifactId>
    <version>1.1.2</version>
</dependency>

在这里插入图片描述
创建好jsp项目后，然后在该jsp下写入代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>zhengchenfan-test</title>
</head>
<body>
<h2>9*9乘法表</h2>
<table>
    <c:forEach var="i" begin="1" end="9">
        <tr>
            <c:forEach var="j" begin="1" end="${ i }">
                <td style="border: 1px solid;">
                    <c:out value="${i}x${j}=${i*j}"></c:out>
                </td>
            </c:forEach>
        </tr>
    </c:forEach>
</table>
</body>
</html>

启动tomcat运行，结果如下：
在这里插入图片描述