零基础JavaWeb入门——第2课：让网页“活”起来 —— JSP是什么？

本系列文章适合JavaWeb入门以及大学期末复习

一、先聊聊天：HTML的"无能为力"

二、在Eclipse中准备今天的练习文件

[三、第一种：脚本片段 <% ... %> ------ "做事情"](#三、第一种：脚本片段 <% ... %> —— “做事情”)

[3.1 它是什么？](#3.1 它是什么？)

[3.2 它会放在哪？](#3.2 它会放在哪？)

[3.3 动手试一下](#3.3 动手试一下)

[3.4 关键点](#3.4 关键点)

[四、第二种：表达式 <%= ... %> ------ "说出来"](#四、第二种：表达式 <%= ... %> —— “说出来”)

[4.1 它是什么？](#4.1 它是什么？)

[4.2 它等价于什么？](#4.2 它等价于什么？)

[4.3 两个绝对不能犯的错](#4.3 两个绝对不能犯的错)

[4.4 动手试一下](#4.4 动手试一下)

[五、第三种：声明 <%! ... %> ------ "拥有什么"](#五、第三种：声明 <%! ... %> —— “拥有什么”)

[5.1 它是什么？](#5.1 它是什么？)

[5.2 它和 <% %> 的本质区别](#5.2 它和 <% %> 的本质区别)

[六、JSP注释 ------ 一个重要补充](#六、JSP注释 —— 一个重要补充)

七、帮你捋一捋（本节课总结）

本节课目标 ：理解JSP的本质，搞懂 <% %>、<%= %>、<%! %> 三种脚本元素的区别和用法。

预计时间：25-30分钟

一、先聊聊天：HTML的"无能为力"

上节课我们写了两个文件：

hello.html → 内容永远不变
hello.jsp → 每次刷新，时间都在变

为什么HTML做不到"动态"？

因为HTML就是一个纯文本文件，Tomcat看到HTML文件，直接把它原封不动地发给浏览器，不做任何处理。

复制代码

浏览器请求 hello.html
       ↓
Tomcat："哦，这是HTML文件，我不需要处理，直接发过去"
       ↓
浏览器收到一模一样的HTML

而JSP不一样：

复制代码

浏览器请求 hello.jsp
       ↓
Tomcat："哦，这是JSP文件，我需要先把它变成一个Java程序来执行"
       ↓
Java程序运行，生成HTML
       ↓
浏览器收到生成的HTML

核心理解 ：JSP在运行前，会被Tomcat翻译成一个Java类（Servlet），然后执行这个Java类来生成HTML。

二、在Eclipse中准备今天的练习文件

先创建一个新的JSP文件：

右键 WebContent → New → JSP File
文件名输入 script_demo.jsp
点击 Finish
把Eclipse自动生成的代码全部删掉，替换成这个基础模板：

html 复制代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三种脚本元素演示</title>
</head>
<body>
    <h1>🎯 三种脚本元素演示</h1>
    <!-- 后面的代码我们都加在这里 -->
</body>
</html>

保存（Ctrl+S）。右键 → Run As → Run on Server，确保空白页面能正常显示。

三、第一种：脚本片段 `<% ... %>` ------ "做事情"

3.1 它是什么？

脚本片段 就是在JSP里嵌入一段Java代码，这段代码会执行某些操作。

3.2 它会放在哪？

编译后，<% %> 里的代码会出现在 _jspService() 方法里面。你就把它理解成：在Java方法的 { } 里写代码。

3.3 动手试一下

在 <body> 标签里，<h1> 下面加入以下代码：

html 复制代码

<h2>一、脚本片段 &lt;% %&gt; ------ 写逻辑</h2>

<%
    // 这里面可以写任意Java代码，就像在main方法里一样
    String studentName = "张三";
    int score = 85;

    // 可以写条件判断
    if (score >= 90) {
        out.println("<p>📊 成绩等级：<b>优秀</b></p>");
    } else if (score >= 60) {
        out.println("<p>📊 成绩等级：<b>及格</b></p>");
    } else {
        out.println("<p>📊 成绩等级：<b>不及格</b></p>");
    }

    // 可以写循环
    out.println("<p>🔢 1到5的平方：");
    for (int i = 1; i <= 5; i++) {
        out.print(i * i + " ");
    }
    out.println("</p>");
%>

<div class="note">
    💡 <b>理解</b>：&lt;% %&gt; 里面的代码会在服务器端执行，执行结果通过 out.println() 输出到页面。
</div>

保存，刷新浏览器。

你看到了什么？ 成绩等级和平方数都显示出来了。

3.4 关键点

要点	说明
里面写什么	任意Java代码（判断、循环、变量声明）
编译后在哪	`_jspService()` 方法里
什么时候用	需要写逻辑、做计算、做判断的时候

四、第二种：表达式 `<%= ... %>` ------ "说出来"

4.1 它是什么？

表达式 用来把一个变量的值输出到HTML页面。

4.2 它等价于什么？

html 复制代码

<%= studentName %>

本质上等价于：

java 复制代码

out.print(studentName);

4.3 两个绝对不能犯的错

❌ 不能加分号 ;
❌ <% 和 = 之间不能有空格

4.4 动手试一下

继续在下面添加：

html 复制代码

<h2>二、表达式 &lt;%= %&gt; ------ 输出内容</h2>

<%
    // 先定义一些变量
    String userName = "李四";
    int userAge = 22;
    java.util.Date now = new java.util.Date();
%>

<p>👤 用户名：<b><%= userName %></b></p>
<p>🎂 年龄：<b><%= userAge %></b></p>
<p>🕐 当前时间：<b><%= now %></b></p>

<%-- 表达式里可以写方法调用 --%>
<p>🔠 用户名大写：<b><%= userName.toUpperCase() %></b></p>

<%-- 表达式里可以写算术运算 --%>
<p>📅 10年后的年龄：<b><%= userAge + 10 %></b></p>

<div class="note">
    💡 <b>理解</b>：&lt;%= 变量名 %&gt; 就是把这个变量的值"嵌入"到HTML中。等价于 out.print(变量名)。
</div>

保存，刷新。

你看到了什么？ 变量值直接嵌入了HTML中，和周围的文字融为一体。

五、第三种：声明 `<%! ... %>` ------ "拥有什么"

5.1 它是什么？

声明用来定义成员变量 和成员方法。

5.2 它和 `<% %>` 的本质区别

java 复制代码

JSP编译后的Java类：

public class script_demo_jsp extends HttpJspBase {
    
    // <%! %> 声明的东西在这里 ------ 成员变量、成员方法
    private int visitCount = 0;
    
    public String getGreeting() { ... }
    
    // ========================================
    
    public void _jspService(request, response) {
        // <% %> 脚本片段的东西在这里 ------ 局部变量、逻辑代码
        String userName = "李四";
        int score = 85;
    }
}

	`<%! %>` 声明	`<% %>` 脚本片段
编译后在哪	类里面（成员位置）	方法里面（局部位置）
定义的变量	成员变量（整个类共享）	局部变量（方法内可用）
定义的方法	成员方法	❌ 方法里不能定义方法

六、JSP注释 ------ 一个重要补充

在JSP中，有两种注释：

html 复制代码

<!-- 这是HTML注释 → 用户右键"查看源代码"能看到 -->

<%-- 这是JSP注释 → 用户完全看不到，推荐使用 --%>

注释类型	语法	用户能看到吗？
HTML注释	`<!-- -->`	✅ 能（右键查看源代码）
JSP注释	`<%-- --%>`	❌ 不能

建议：在JSP里写注释，一律用 <%-- --%>，更安全。

七、帮你捋一捋（本节课总结）

再次区分一下三个脚本元素在java类中的位置：

首先我们要知道你写的 .jsp 文件，Tomcat会把它翻译成一个 .java 文件，再编译成 .class 文件，最后执行

<%！%>定义的是类的成员变量，在整个类内都能使用，不会重置

<% %>和<%= %>都是存在类内的方法当中，是会重置的

例如：

html 复制代码

<%!
    private int count = 0;
%>
<%
    count++;
    out.print(count);
%>

效果：每次刷新，数字累加：1、2、3、4...

原因：count 是成员变量，只初始化一次。

html 复制代码

<%
    int count = 0;
    count++;
    out.print(count);
%>

效果：每次刷新都显示：1、1、1、1...

原因：count 是局部变量，每次访问都重新初始化为0。

复制代码

JSP = HTML + 三种写Java代码的方式
┌──────────┬─────────┬──────────────────────┬──────────────────┐
│ 语法 │ 叫什么 │ 编译后在哪 │ 用途 │
├──────────┼─────────┼──────────────────────┼──────────────────┤
│ \<% %\> │ 脚本片段 │ _jspService()方法内 │ 写逻辑、判断、循环│
│ \<%= %\> │ 表达式 │ 变成 out.print() │ 输出变量值 │
│ \<%! %\> │ 声明 │ Servlet类的成员位置 │ 定义成员变量/方法 │
└──────────┴─────────┴──────────────────────┴──────────────────┘
记忆口诀：
\<% %\> → "做"（执行代码）
\<%= %\> → "说"（输出内容）
\<%! %\> → "有"（拥有成员）