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

原创 2004年04月23日 13:30:00

事件驱动的Web之旅——JSPJavaScript的融合

(此文献给所有使用Delphi的程序员)

说正题之前,我先写个序吧!

我深爱着Delphi,不能自拔。可是我也看到了B/S是以后程序设计的大方向,多年更随Delphi,使我在这个时候选择Java/JSP(你知道吗?第一个尝试跨平台开发的语言是Pascal)。说句实话,在Windows的桌面开发领域Delphi当之无愧为老大。他是那么的快捷和方便,在学习Web的时候,我也带进了Delphi的思想,为什么Web不可以像Windows Application那样方面呢?基于事件驱动的,状态自动保持的(这其实是Windows的思想)。然而,学了Web开发才知道,当你要做一些让服务器知道得页面变动时,你就必须提交,提交可以改变页面的状态。当然,这也增加了保持页面状态的复杂性。不过不要紧,我们慢慢来。

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

 

JSPJavaScript的融合

说句极端的话,对于用户来说,JSPJavaScript的效果是一样的?也许现在就开始有人扔鸡蛋了。不过你想想,怎样才能开发出理想的适合于用户使用的Application呢?这当然是站在用户的角度。如果站在程序员的角度,我刚才的话会招来很多人嘲笑,但是对于用户来说,他们不管你有多少代码,不管你有什么样的数据库支持,不管你用的是起泡排序还是快速排序,他们关心的只是面子上的问题。本文也不是讨论美工设计的。我这时要让JSPJavaScript达到相同的效果,不过这是对于用户来说的。

也曾在CSDN的论坛上看到JSP的变量能不能被JavaScript调用,JavaScript可不可以控制JSP的问题,答案通常是两种:第一种便是直截了当的回答“不能,这根本是两码事”、第二种无非是比较诚恳“这一个是服务端、一个是客户端,怎么可能,看看书吧”。其实,殊不知,这是一个非常值得探讨的问题。

不过先别扯远了,我们先看看在用户的角度,JSPJavaScript相同的效果。

 

程序一:一个方向控制程序,浏览器里有五个按钮,上下左右中。点击上面的按钮中间的按钮向上移动,点击下面的按钮中间的按钮向下移动……以此类推,点击中间的按钮恢复初始状态。

先来看一看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>

 

大家看一看效果对于用户来说是不是一样?(不能发太长,分次来,待续)

 

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

事件驱动的Web之旅——JSP与JavaScript的融合(此文献给所有使用Delphi的程序员)说正题之前,我先写个序吧!我深爱着Delphi,不能自拔。可是我也看到了B/S是以后程序设计的大方向,...
  • merak_wuyj
  • merak_wuyj
  • 2006年10月27日 09:32
  • 769

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

我们再来说一说JSP和JavaScript的搭配使用和相互访问。也许你用过Delphi的WebBroker开发过Web Application当你每做的一件事(提交)就是一个WebAction,说白了...
  • dext
  • dext
  • 2004年04月23日 13:26
  • 1234

一.javaweb笔记之javaScript简介+基本语法+事件驱动+DOM

1.JavaScript简介 起源          在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。Net...
  • yuexianchang
  • yuexianchang
  • 2017年04月20日 07:09
  • 521

js事件驱动

转载地地址面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?还有non-blocking IO, ev...
  • true_hsf
  • true_hsf
  • 2015年07月31日 15:24
  • 1395

JavaScript事件驱动机制&定时器机制

在浏览器中,事件作为一个极为重要的机制,给予JavaScript响应用户操作与DOM变化的能力;在NodeJS中,异步事件驱动模型则是提高并发能力的基础。 一、程序如何响应事件 程序响应外部的事件有...
  • ligang2585116
  • ligang2585116
  • 2015年07月03日 11:37
  • 2364

JavaScipt——基于对象和事件驱动的客户端语言

JavaScript(下面简称JS)是一种基于对象和事件驱动的语言。所谓基于对象,这和我们常说的面向对象语言是有所不同的。 面向对象,简单而言就是用户可以自己定义设计类。 JavaScript(下...
  • Helios_2015
  • Helios_2015
  • 2014年10月14日 09:07
  • 1132

JS和JSP的区别

最近很多同学在纠结于名词缩写之间的相似性,因此本人也来写一篇,讲讲JS和JSP的区别。简单的说——JS是在客户端执行的,需要浏览器支持Javascript。JSP是在服务器端执行的,jsp 要先翻译,...
  • a2806005024
  • a2806005024
  • 2014年06月03日 16:43
  • 88596

Javascript事件驱动编程

Javascript事件驱动编程 基本概述     JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理。 PS:...
  • q547550831
  • q547550831
  • 2015年12月25日 14:10
  • 2227

一个使用Java jdk8中Nashorn(Java javascript引擎)设计的Web开发框架

使用Nashorn开发Web的框架,效率高
  • alaclp
  • alaclp
  • 2014年06月23日 09:15
  • 1166

Echo2一个基于事件驱动的web框架(开源)

Echo2 是在一个在原Echo Web FrameWork基础上重新改造,构建于Ajax (Asynchronous JavaScript and XML)异步的javascript和xml机制的表...
  • zmxj
  • zmxj
  • 2005年03月29日 17:22
  • 2180
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:事件驱动的Web之旅——JSP与JavaScript的融合
举报原因:
原因补充:

(最多只允许输入30个字)