JSP简介及简单案例

  Servlet做界面非常困难, 而JSP做页面非常容易, JSP = html + Java片段 + jsp标签 + js(css), 用于做前端.

(1) 指令

  1. page

  <%@ page contentType="text/html;charset=utf-8"%>

  2. include

  <%@ include file="filename"%>

  3. taglib

  这个指令允许在jsp页面使用自定义标签, <myTag: yourTag num1="123">

(2) 脚本元素

  简单理解为Java片段

(3) 动作元素

  是使用xml语法写的, 是jsp规定的一种动作标准, 遇到动作元素会有相应的执行动作

(4) 九大内置对象[JSP的核心]

  out  request  response  session  application  pageContext  exception  page  config

  可以直接调用, 不需要创建

(5) 访问JSP的过程

  浏览器第一次访问JSP页面时, 在Tomcat中先将*.jsp转.java(就是一个servlet), 然后编译成.class加载到内存中, 所以第一次访问会比较慢,

第二次访问的时候速度很快, 相当于直接访问.class

------------------------------------------------

1. jsp和servlet是互相对应的

2. servlet是jsp的基础

<!-- 声明我是一个jsp文件, 编码格式utf-8 -->
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<body>
<h1>JSP</h1>
<%
out.print("hello world, 世界, 您好!");
%>
</body>
</html>

---------------------------------------------------------------------

范例1: 计算器

 myCal.jsp:

<%@ page contentType="text/html;charset=gb2312" %>

<html>
<head>
<script>
function checkNum() {
// 一、是否为空
if (form1.num1.value == "" || form1.num2.value == "") {
window.alert("数据不能为空,请输入...") ;
return false ;
}

// 二、是否为数字(整数、小数、负数)
if (!(/^(-)?\d+(\.\d+)?$/.test(form1.num1.value)
&& /^(-)?\d+(\.\d+)?$/.test(form1.num2.value))) {
window.alert("输入的不是数字,请重新输入...") ;
return false ;
}

// 三、除数是否为零
if (form1.num2.value == 0) {
window.alert("除数不能为零,请重新输入...") ;
return false ;
}
}
</script>
</head>
<body>
<%
// 以下是Java片段

// 一、接收从myCal.jsp传递过来的数据及运算符
String s_num1 = request.getParameter("num1") ;
String s_num2 = request.getParameter("num2") ;
String s_flag = request.getParameter("flag") ;

// 二、声明变量以及转换数据类型
double num1 = 0 ;
double num2 = 0 ;
double result = 0 ;
/*
* 当用户第一次打开myCal.jsp页面时,s_num1和s_num2都为空,
* 导致NumberFormatException异常,为避免这种情况,加if判断
*/
if ((s_num1 != null) && ((s_num2 != null)) && ((s_flag != null))) {
num1 = Double.parseDouble(s_num1) ;
num2 = Double.parseDouble(s_num2) ;

// 三、进行四则运算
if (request.getParameter("flag").equals("+")) {
// 3.1 加法计算
result = num1 + num2 ;
} else if (request.getParameter("flag").equals("-")) {
// 3.2 减法计算
result = num1 - num2 ;
} else if (request.getParameter("flag").equals("*")) {
// 3.3 乘法计算
result = num1 * num2 ;
} else {
// 3.4 除法计算
result = num1 / num2 ;
}
}
%>
<h2>我的计算器</h2>
<hr>
<form action="myCal.jsp" name="form1">
请输入第一个数:<input type="text" size="20" name="num1" value="<%=num1%>"><br><br>
请选择运算法则:
<select name="flag">
<option value=+>+</option>
<option value=->-</option>
<option value=*>×</option>
<option value=/>÷</option>
</select>
<br><br>
请输入第二个数:<input type="text" size="20" name="num2" value="<%=num2%>"/>
<!-- 当点击计算按钮,立刻触发onclick,进行checkNum验证,
如果返回true,则跳转到myResult.jsp
如果返回false,则弹出提示框,留在本页面
-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="计&nbsp;算" onclick="return checkNum();">
</form>
<hr><br>
<h2>计算结果:<%= result %></h2>
<hr>
</body>
</html>

测试:

 

posted @ 2017-03-13 16:10  半生戎马,共话桑麻、  阅读(523)  评论(0)    收藏  举报
levels of contents