Event-driven Web Tour - JSP and JavaScript

zhaozj2021-02-16  42

Event-driven Web Tour - JSP and JavaScript

(This document gives all programmers using Delphi)

Before the topic, I will write a order first!

I love Delphi deeply, I can't extricate themselves. But I also saw that B / S is the big direction of future programming, and I have more Delphi for many years, so that I choose Java / JSP at this time (do you know? The first thing you try cross-platform is pASCAL). To tell the truth, Delphi is well deserved in the Windows desktop development field. He is so fast and convenient. When you learn the web, I also brought it into Delphi's idea. Why is Web not aspects like Windows Application? Based on event-driven, the state is automatically maintained (this is actually Windows idea). However, learning the web development only knows that when you want to make the server know the page change, you must submit, and submit it to change the status of the page. Of course, this also increases the complexity of keeping the page status. But don't matter, we will come slowly.

JSP and JavaScript integration

To say, what is the effect of JSP and JavaScript for users? Maybe someone started to throw eggs now. However, what do you think, how can I develop an ideal Application suitable for users? This is of course an angle of standing in the user. If you stand in the programmer's point of view, I will make many people ridicule, but for users, they don't care how much code you have, no matter what kind of database support you use, no matter how you use bubbles or quick sort They only care about the problem on the face. This article is not discussing artificial design. I have to achieve the same effects in JSP and JavaScript, but this is for users.

I also saw JSP variables on the 9CBS forum could not be called by JavaScript. JavaScript could not control JSP problems. The answer is usually two: The first kind is straightforward, "can't, this is two yards", Two kinds 不非 比 "" This is the server, one is the client, how it is possible, look at the book. " In fact, I don't know, this is a question that is very worth exploring.

But don't have a long, let's see the same effect as the user's angle, JSP and JavaScript.

Program 1: One direction control program, five buttons in the browser, up and down. Click on the button in the middle of the button to move up, click the button in the middle below to move down ... With this, click the middle button to restore the initial state.

Let's take a look at JSP code:

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

&& recomst.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;

}

%>

FiveButtons </ Title></p> <p><Meta http-equiv = "content-type" content = "text / html; charSet = UTF-8"></p> <p></ HEAD></p> <p><Form></p> <p><Input name = "btnu" type = "submit" value = "u"</p> <p>Style = "Position: absolute; top: 100; Left: 400"></p> <p><Input name = "btnd" type = "submit" value = "d"</p> <p>Style = "Position: absolute; top: 300; Left: 400"></p> <p><Input name = "btnl" type = "submit" value = "l"</p> <p>Style = "Position: absolute; top: 200; Left: 300"></p> <p><Input name = "btnr" type = "submit" value = "r"</p> <p>Style = "Position: absolute; top: 200; Left: 500"></p> <p><Input name = "btnm" type = "submit" value = "m"</p> <p>Style = "Position: absolute; top: <% = ITOP%>; Left: <% = ILEFT%>> <input name =" hidl "type =" hidden "value =" <% = ileft%> "></p> <p><Input name = "hidt" type = "hidden" value = "<% = ket%>">></p> <p></ Form></p> <p><Body></p> <p></ Body></p> <p></ Html></p> <p>Let's take a look at JavaScript code: FiveButtons.htm</p> <p><Html></p> <p><Script language = "javascript1.2" type = "text / javascript"></p> <p>Function btnclick (s) {</p> <p>IF (s == "u")</p> <p>this.btnm.style.top = parseint (this.btnm.style.top) - 10;</p> <p>IF (s == "d")</p> <p>THIS.BTNM.Style.top = parseint (this.btnm.style.top) 10;</p> <p>IF (s == "L")</p> <p>THIS.BTNM.Style.Left = parseint (this.btnm.style.left) - 10;</p> <p>IF (s == "r")</p> <p>THIS.BTNM.Style.Left = parseint (this.btnm.style.left) 10;</p> <p>IF (s == "m") {</p> <p>this.btnm.style.top = 200;</p> <p>this.btnm.style.left = 400;</p> <p>}</p> <p>}</p> <p></ Script></p> <p><HEAD></p> <p><Title> FiveButtons </ Title></p> <p><Meta http-equiv = "content-type" content = "text / html; charSet = UTF-8"></p> <p></ HEAD></p> <p><Body></p> <p><Input name = "btnu" type = "submit" value = "u"</p> <p>Style = "Position: absolute; top: 100; Left: 400"</p> <p>OnClick = "BTNClick (this.value)"></p> <p><Input name = "btnd" type = "submit" value = "d"</p> <p>Style = "Position: absolute; top: 300; Left: 400"</p> <p>OnClick = "BTNClick (this.value)"></p> <p><Input name = "btnl" type = "submit" value = "l"</p> <p>Style = "Position: absolute; Top: 200; Left: 300"</p> <p>OnClick = "this.value"> <input name = "btnr" type = "submit" Value = "r"</p> <p>Style = "Position: absolute; top: 200; Left: 500"</p> <p>OnClick = "BTNClick (this.value)"></p> <p><Input name = "btnm" type = "submit" value = "m"</p> <p>Style = "Position: absolute; top: 200; Left: 400"</p> <p>OnClick = "BTNClick (this.value)"></p> <p></ Body></p> <p></ Html></p> <p>Let's take a look at the effect of the user? (You can't send too long, come back separately, we will continue)</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-28338.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="28338" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.038</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'jFvOq2rzqduM_2BTl_2FC3ox9b1DMpR5Rk5VEj3PIyWvCxSzik_2BA9eqfw1nVHS6orM5mmWPE6HoVr_2B97Q1_2FfGnKAeQ_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>