新手解读JSP

一.解读简单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>首页</title>
<style >
.a{
        font-size: 26px;//设置或获取对象文本使用的字体大小
        margin-top: 20px;//设置或获取对象的上边距宽度

    }

</style>
</head>
<body>
<div align="center">//dive框架居中
<h1 style="color: red;">信息管理系统</h1>//一级标题
        <div class="a">
            <a href="add.jsp">信息录入</a>//<a> 标签的 href 属性用于指定超链接目标的 URL
        </div>
        <div class="a">
            <a href="TypeServlet?method=list">信息修改</a>
        </div>
        <div class="a">
            <a href="delete.jsp">信息删除</a>
        </div>
        <div class="a">
            <a href="select.jsp">信息查询</a>
        </div>
</div>
</body>
</html>

页面显示：

<%@ 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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
         Object message = request.getAttribute("message");
         if(message!=null && !"".equals(message)){
     
    %>
         <script type="text/javascript">//说明中间是JavaScript的代码，页面里的脚本程序。（<script>到</script>之间的 ）

              alert("<%=request.getAttribute("message")%>");//弹出对话框
         </script>
    <%} %>
    <div align="center">
        <h1 style="color: red;">课程信息录入</h1>
        <a href="index.jsp">返回主页</a>
        <form action="TypeServlet?method=add" method="post" onsubmit="return check()">
            <div >
                课程名称<input type="text" id="name" name="name"/>
            </div>
            <div >
                任课教师<input type="text" id="teacher" name="teacher" />
            </div>
            <div >
                上课地点<input type="text" id="classroom" name="classroom" />
            </div>
            <div >
                <button type="submit" >保&nbsp;&nbsp;&nbsp;存</button>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        function check() {
            var name = document.getElementById("name");;
            var teacher = document.getElementById("teacher");
            var classroom = document.getElementById("classroom");
            
            //非空
            if(name.value == '') {
                alert('课程名称为空');
                name.focus();
                return false;
            }
            if(teacher.value == '') {
                alert('教师为空');
                teacher.focus();
                return false;
            }
            if(classroom.value == '') {
                alert('上课地点为空');
                classroom.focus();
                return false;
            }
            
            //教师
            if(teacher.value != '王建民' && teacher.value != '王辉' && teacher.value != '刘丹' && teacher.value != '刘立嘉' && teacher.value != '杨子光'){
                alert('教师名称错误');
                return false;
            }
            
            //教室
            if(!/^基教/.test(classroom.value) && !/^一教/.test(classroom.value) && !/^二教/.test(classroom.value) && !/^三教/.test(classroom.value)) {
                alert('上课地点错误');
                return false;
            }
        }
    </script>
</body>
</html>

二.语法

1.标题

<h1>--<h6> 标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。

标签是成对出现的，<hn(n=1,2,3,4,5,6)>标签共分为六级，在<h1>...</h1>之间的文字就是第一级标题，是最大最粗的标题；<h6>...</h6>之间的文字是最后一级，是最小最细的标题文字.

2.JSP页面中的<% %>,<%！%>，<%= %>

JSP运行原理：JSP的本质就是一个Servlet，JSP运行之前会先被Tomcat服务器翻译为.java文件，然后在将.java文本编译为.class文件，而我们在访问jsp时，处理请求的就是那个翻译后的类。

<% %>称作脚本片段，其中写的内容会翻译在Servlet的Service方法中,我们可以在<%%>中定义局部变量或者调用方法，但不能定义方法。

<%!%>称作声明，其中写的内容将来会直接翻译在Servlet类中，因为我们可以在类中定义方法和属性以及全局变量，所以我们可以在<%!%>中声明方法、属性、全局变量。

<%=%>称作jsp表达式，用于将已经声明的变量或者表达式输出到网页上面。

直接写在jsp页面<body></body>中的代码称作模板元素，将来会在Servlet的Service方法中的out.write("___")中，作为输出内容。

示例：

<body>
<% for (int i=0;i<3;i++) {%>
     out.println(i);
     <%} %>
     
     
<%! int i=1; %>//声明
<% int i=2; %>
<h1><% out.println(i++); %></h1>
<h1><%= this.i %></h1>//输出已声明
</body>

页面显示：

3.<input> 标签：用于搜集用户信息。

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="田"><br>
Last name: <input type="text" name="LastName" value="智凯"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

三.Javascript

1.javascript运行在浏览器，而且javascript不需要提前编译，但是java需要提前编译。

2.javascript运行在浏览器，可以对客户端进行数据计算。

3.如果将所有的表单都提交到服务器，让服务器来验证表单是否符合输入规则的话，这样会增加服务器压力，因此在数据上传到服务器之前，我们需要先验证客户端表单合法性，javascript可以验证客户端表单合法性。

4.html页面上有很多的行为，都是使用js来做的，比如当点击鼠标时候，触发某一个事件。

5.除此之外，javascript在页面中使用的比较多的就是用来做特效。比如很多网页首页的轮播图就是使用js做出来的。

6.javascript还有一个作用就是用来做服务器的异步数据提交。

四.Javascript三种对话框弹出方式

1 . 警告框alert()

alert是警告框，只有一个按钮“确定”无返回值，警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert("文本")。

示例：

<script type="text/javascript">
alert("确定要删除吗？");
alert("狠心删除吗？");</script>

页面显示：

2.确认框confirm()

confirm是确认框，两个按钮，确定或者取消，返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：confirm("文本")

示例1：

<script type="text/javascript">
confirm("确定删除？");
</script>

示例2：学会利用返回的布尔值

<script type="text/javascript">
var cf;
cf=confirm("你喜欢我吗？");
if(cf==true)alert("喜欢!");
else alert("滚!");
</script>

3.提示框prompt()

prompt是提示框，返回输入的消息，或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法：prompt("文本","默认值")

示例：

<script type="text/javascript">
var name;
name=prompt("请输入姓名");
alert(name);
</script>

猜你喜欢