您的位置：首页 > Web前端 > JavaScript

事件驱动的Web之旅——JSP与JavaScript的融合

2004-04-23 13:30 477 查看
事件驱动的Web之旅——JSP与JavaScript的融合
（此文献给所有使用Delphi的程序员）
说正题之前，我先写个序吧！
我深爱着Delphi，不能自拔。可是我也看到了B/S是以后程序设计的大方向，多年更随Delphi，使我在这个时候选择Java/JSP（你知道吗？第一个尝试跨平台开发的语言是Pascal）。说句实话，在Windows的桌面开发领域Delphi当之无愧为老大。他是那么的快捷和方便，在学习Web的时候，我也带进了Delphi的思想，为什么Web不可以像Windows Application那样方面呢？基于事件驱动的，状态自动保持的（这其实是Windows的思想）。然而，学了Web开发才知道，当你要做一些让服务器知道得页面变动时，你就必须提交，提交可以改变页面的状态。当然，这也增加了保持页面状态的复杂性。不过不要紧，我们慢慢来。

JSP与JavaScript的融合
说句极端的话，对于用户来说，JSP和JavaScript的效果是一样的？也许现在就开始有人扔鸡蛋了。不过你想想，怎样才能开发出理想的适合于用户使用的Application呢？这当然是站在用户的角度。如果站在程序员的角度，我刚才的话会招来很多人嘲笑，但是对于用户来说，他们不管你有多少代码，不管你有什么样的数据库支持，不管你用的是起泡排序还是快速排序，他们关心的只是面子上的问题。本文也不是讨论美工设计的。我这时要让JSP和JavaScript达到相同的效果，不过这是对于用户来说的。
也曾在CSDN的论坛上看到JSP的变量能不能被JavaScript调用，JavaScript可不可以控制JSP的问题，答案通常是两种：第一种便是直截了当的回答“不能，这根本是两码事”、第二种无非是比较诚恳“这一个是服务端、一个是客户端，怎么可能，看看书吧”。其实，殊不知，这是一个非常值得探讨的问题。
不过先别扯远了，我们先看看在用户的角度，JSP和JavaScript相同的效果。

程序一：一个方向控制程序，浏览器里有五个按钮，上下左右中。点击上面的按钮中间的按钮向上移动，点击下面的按钮中间的按钮向下移动……以此类推，点击中间的按钮恢复初始状态。
先来看一看JSP代码：
FiveButtons.jsp
<%@ page contentType="text/html; charset=utf-8" language="java" %> <%@ page import="java.sql.*"%>
<%
int iLeft;
int iTop;
if (request.getParameter("hidL") != null) {
iLeft = Integer.parseInt(request.getParameter("hidL"));
iTop = Integer.parseInt(request.getParameter("hidT"));
if (request.getParameter("btnU") != null
&& request.getParameter("btnU").compareTo("U") == 0)
iTop -= 10;
if (request.getParameter("btnD") != null
&& request.getParameter("btnD").compareTo("D") == 0)
iTop += 10;
if (request.getParameter("btnL") != null
&& request.getParameter("btnL").compareTo("L") == 0)
iLeft -= 10;
if (request.getParameter("btnR") != null
&& request.getParameter("btnR").compareTo("R") == 0)
iLeft += 10;
if (request.getParameter("btnM") != null
&& request.getParameter("btnM").compareTo("M") == 0) {
iLeft = 400;
iTop = 200;
}
} else {
iLeft = 400;
iTop = 200;
}
%>
<HTML>
<HEAD>
<TITLE>FiveButtons</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<FORM>
<INPUT NAME="btnU" TYPE="SUBMIT" VALUE="U"
STYLE="position:absolute; top:100; left:400">
<INPUT NAME="btnD" TYPE="SUBMIT" VALUE="D"
STYLE="position:absolute; top:300; left:400">
<INPUT NAME="btnL" TYPE="SUBMIT" VALUE="L"
STYLE="position:absolute; top:200; left:300">
<INPUT NAME="btnR" TYPE="SUBMIT" VALUE="R"
STYLE="position:absolute; top:200; left:500">
<INPUT NAME="btnM" TYPE="SUBMIT" VALUE="M"
STYLE="position:absolute; top:<%=iTop%>; left:<%=iLeft%>">
<INPUT NAME="hidL" TYPE="HIDDEN" VALUE="<%=iLeft%>">
<INPUT NAME="hidT" TYPE="HIDDEN" VALUE="<%=iTop%>">
</FORM>
<BODY>

</BODY>
</HTML>
再来看一下JavaScript代码：FiveButtons.htm
<HTML>
<SCRIPT language="JavaScript1.2" TYPE="TEXT/JAVASCRIPT">
function btnClick(s) {
if (s == "U")
this.btnM.style.top = parseInt(this.btnM.style.top) - 10;
if (s == "D")
this.btnM.style.top = parseInt(this.btnM.style.top) + 10;
if (s == "L")
this.btnM.style.left = parseInt(this.btnM.style.left) - 10;
if (s == "R")
this.btnM.style.left = parseInt(this.btnM.style.left) + 10;
if (s == "M") {
this.btnM.style.top = 200;
this.btnM.style.left = 400;
}
}
</SCRIPT>
<HEAD>
<TITLE>FiveButtons</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>

<BODY>
<INPUT NAME="btnU" TYPE="SUBMIT" VALUE="U"
STYLE="position:absolute; top:100; left:400"
onClick="btnClick(this.value)">
<INPUT NAME="btnD" TYPE="SUBMIT" VALUE="D"
STYLE="position:absolute; top:300; left:400"
onClick="btnClick(this.value)">
<INPUT NAME="btnL" TYPE="SUBMIT" VALUE="L"
STYLE="position:absolute; top:200; left:300"
onClick="btnClick(this.value)">
<INPUT NAME="btnR" TYPE="SUBMIT" VALUE="R"
STYLE="position:absolute; top:200; left:500"
onClick="btnClick(this.value)">
<INPUT NAME="btnM" TYPE="SUBMIT" VALUE="M"
STYLE="position:absolute; top:200; left:400"
onClick="btnClick(this.value)">
</BODY>
</HTML>
大家看一看效果对于用户来说是不是一样？(不能发太长，分次来，待续)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航