1 / 42

Understanding Client-Side Web Application Development with Java and Dynamic Web Pages

This document explores the fundamentals of client-side web application development utilizing Java and associated technologies. It outlines the differences between static and dynamic web pages, including examples, and discusses key technologies like HTML, DOM, and JavaScript. Moreover, it offers insights into creating forms, utilizing Query Strings, and leveraging client-side scripting events. This comprehensive introduction is essential for developers seeking to build interactive web applications effectively.

zea
Télécharger la présentation

Understanding Client-Side Web Application Development with Java and Dynamic Web Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Client-Side Web Application Development with Java ISYS 350

  2. Types of Web pages • Static page: • The contents of a web page is predefined by HTML tags and other mark up languages. • Example: david chao’s home page. • Dynamic page • A web page includes contents produced by a programming language when the page is opened. • Examples: • Pages that display current date/time, visitor counter • Yahoo home page • Pages that display results based on a database query. • Yahoo’s Finance/Enter symbol/Historical prices

  3. Technologies for Creating Dynamic Pages • Client-side technology • HTML, Document Object Model (DOM), JavaScript • Server-side technology • Microsoft .Net • PHP • Java • Others

  4. Example of Client-side Page using HTML, DOM and JavaScript

  5. HTML Introductionhttp://www.w3schools.com/default.asp • Heading section • <head>, <title>, <meta>, <script>, etc. • Body section • <body>, <p>, <h1> to <h6>, <a>, <br> • Formatting: <b>, <I>, <u>, <center> • Comment: <!-- comment --> • List <ul> • Image • Table: <table>, <tr>: a new row in table, <td>: a new cell in a table row. • Form: <form>, <input>, <select>, <textarea>

  6. TABLE Tag <table border="1" width="100%"> <tr> <td width="25%"></td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> <tr> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> </table>

  7. FORM Tag • Form attribute: • Action: Specify the URL of a program on a server or an email address to which a form’s data will be submitted. • Method: • Get: the form’s data is appended to the URL specified by the Action attribute as a QueryString. • Post: A preferred method for database processing. Form’s data is sent in the HTTP body. • Name: Form’s name

  8. QueryString • A QueryString is a set of name=value pairs appended to a target URL. • It can be used to pass information from one webpage to another. • To create a QueryString: • Add a question mark (?) immediately after a URL. • Followed by name=value pairs separated by ampersands (&). • Example: • <A Href=“http://my.com/Target.htm?CustID=C1&Cname=Chao”>

  9. NetBeans IDE • A free, open-source Integrated Development Environment for software developers. You get all the tools you need to create professional desktop, enterprise, web, and mobile applications. • Support many languages: • Java, PHP, C++, Ruby • Support many platforms: • Windows, Linux, Mac OS X and Solaris

  10. Creating a New Web Project • File/New Project/Java Web • Web Application • Folders of a web project: • Web • Src

  11. Create a Form • Right Click Project’s Web folder and choose: • New/HTML • Window/Palette to access the HTML support • From HTML Palette: • Drag Form and drop it between Body tag • Add Text input • Add Button • Note: Use <p></P> to start a new line or use Table to align controls.

  12. Dropdown List Example <select name="Rate"> <option value=.04>4%</option> <option value=045>4.5%</option> <option value=.05 >5%</option> <option value=.055>5.5%</option> <option value=.06>6%</option> </select>

  13. RadioButton Example:RadioButtons having the same name belong to one group <p> <input type="radio" name="Term" value="10" /> 10-year</p> <p> <input type="radio" name="Term" value="15" /> 15-year</p> <p><input type="radio" name="Term" value="30" /> 30-year</p>

  14. Client Side Script • <script type="text/javascript"> • </script>

  15. HTML Tags and Events • Link <a> </a>: click, mouseOver, mouseOut • Image <img>: abort(loading is interrupted), error, load. • Area <area>: mouseOver, mouseOut • Body <body>: blur, error, focus, load, unload • Frameset: blur, error, focus, load, unload • Frame: blur, focus • Form: submit, reset • Textbox, Text area: blur, focus, change, select • Button, Radio button, check box: click • List: blur, focus, change

  16. Event Handler • Event handler name: on + event name • Ex. onClick • Calling a handler: • onClick="CompSumJS()“ • onClick="window.alert('you click me')" • Note: single quote/double quote

  17. Example <form method="POST" name="testForm" action=""> <p>Value1: <input type="text" name="num1" size="20"></p> <p>Value2: <input type="text" name="num2" size="20"></p> <p>Sum: <input type="text" name="valueSum" size="20"></p> <p><input type="button" value="ComputeSum" name="btnCompute" onClick="ComputeSum()"></p> </form>

  18. Document Object Model

  19. Window Object • The Window object represents a Web browser window. • Properties: • window.status, window.defaultstatus • window.document, window.history, window.location. • Window.name • Methods: • window.open (“url”, “name”, Options) • Options: menubar=no, status=no, toolbar=no, etc. • window.close • window.alert(“string”) • window.prompt(“string”) • Window.focus • Etc.

  20. Navigator Object • The navigator object provides information about the browser. • Properties: • Navigator.appName:browser name • Navigator.appCodeName: browser code name • Navigator.appVersion • Navigator.platform: the operating system in use.

  21. Location Object • Allows you to change to a new web page from within a script code. • Properties: • Host, hostname, pathname • Href: full URL address • Search: A URL’s queryString • Methods: • location.reload() • To open a page: location.href = “URL”

  22. Testing Location Object <html> <script type="text/javascript"> function openNew(){ site=window.prompt("enter url:"); window.open (site); location.href=“FVForm.htm"; } </script><head> <body> <p><input type="button" value="Button" name="B3" onclick="openNew()"></p> </body></html>

  23. History Object • Maintain a history list of all the documents that have been opened during current session. • Methods: • history.back() • history.forward() • history.go(): ex. History.go(-2) • Demo: testDocOpenClose.htm

  24. Document Object • The document object represents the actual web page within the window. • Properties: • background, bgColor, fgColor, title, url, lastModified, domain, referrer, cookie, linkColor, etc. • Ex. document.bgColor=“silver”; • Methods: • Document.write (“string”) • Document.open, close

  25. Accessing data entered on a form • Textbox: • document.LoanForm.Loan.value • Dropdown list: • document.LoanForm.Rate.options[document.LoanForm.Rate.selectedIndex].value) • Radiobuttons: • document.LoanForm.Term[0].checked • checkBox: • document.LoanForm.checkBox1.checked

  26. JavaScript Variable Declaration • var intrate, term, amount; • Data Type: • Variant - a variable’s data type is determined when it is initialized to its first value. • Variable scope: • Local: Variables declared in a function or procedure. • Global: Variables declared in the heading section, but not in a function or procedure. • Variable name is case-sensitive.

  27. Statements • Statements: • End with “;” • Block of code: { } • Comments: • Single-line comment: //comment • Block comment: • /* comment comment */

  28. Arrays • var arrayName = new Array(array size); • var Pet = new Array(2); • Pet[0]=“dog”; • Pet[1]=“cat”; • Pet[2]=“bird”;

  29. Operators • Arithmetic operators: +, -, *, /, Math.pow(x,y), etc. • Math is an object with many methods such as round(x), random(), sqrt(x), ceil(x), floor(x), etc. • Comparison operators: = = , !=, <, >, <=, >= • Logical operators: &&, ||, !

  30. Formula to Expression

  31. IF Statements JS: if (condition) { statements; } else { statements; } if (document.LoanForm.Term[0].checked) {myTerm=10;} else if (document.LoanForm.Term[1].checked) {myTerm=15;} else {myTerm=30;}

  32. Switch Case Statements switch(varable name) { case value1: statements; break; case value2: statements; break; … default: statements; break; }

  33. Loop Structures 1. while (condition) { statements; } 2. for (var I = 0; I<5;I=I+1){ statements; } Note: Use Break statement to exit loop earlier. Ex. Break ;

  34. JavaScript’s Conversion Functions • toString() example: • Price=5; • Qty=10; • Amount=Price*Qty; • Document.write (Amount.toString()); • eval • strVar = “5”; • numVar = eval(strVar)

  35. JavaScript Functions • Defining functions • function functionName(arg1,..,argN){ • Statements; • return return value; • } Note: 1. The arguments are optional. 2. The return statement is optional. A JavaScript function is not required to return a value.

  36. Example: JavaScript to Compute the sum of two values <script language=javascript type="text/javascript"> <!-- function ComputeSum(){ n1=document.testForm.num1.value; n2=document.testForm.num2.value; document.testForm.valueSum.value=eval(n1)+eval(n2); } --> </script>

  37. JavaScript to compute the future value

  38. Form <form name="fvForm" action=""> <p>Enter Present Value: <input type="text" name="PV" value="" /></p> <p>Select interest rate:<select name="Rate"> <option value=.04>4%</option> <option value=045>4.5%</option> <option value=.05 >5%</option> <option value=.055>5.5%</option> <option value=.06>6%</option> <option value=.065>6.5%</option> <option value=.07>7%</option> </select> <p>Select year:</p> <p> <input type="radio" name="Year" value="10" /> 10-year</p> <p> <input type="radio" name="Year" value="15" /> 15-year</p> <p><input type="radio" name="Year" value="30" /> 30-year</p> <p>Future value is:<input type="text" name="FV" value="" /></p> <input type="button" value="ComputeFV" name="btnCompute" onClick="ComputeFV()"/> </form>

  39. Code Example <script type="text/javascript"> <!-- function ComputeFV(){ myPV=eval(document.fvForm.PV.value); myRate=eval(document.fvForm.Rate.options[document.fvForm.Rate.selectedIndex].value); if (document.fvForm.Year[0].checked) {myYear=10;} else if (document.fvForm.Year[1].checked) {myYear=15;} else {myYear=30;} fv=myPV*Math.pow(1+myRate,myYear); document.fvForm.FV.value=fv.toString(); } --> </script>

  40. Years to Reach Goal

  41. Code Example <script type="text/javascript"> <!-- function ComputeJS(){ pv=eval(document.testForm.txtPv.value); rate=eval(document.testForm.txtRate.value); goal=eval(document.testForm.txtGoal.value); fv=0; for (i=1; i<=9999; ++i){ fv=pv*Math.pow(1+rate,i); if(fv>=goal){ document.testForm.yearNeeded.value=i; break; } } } --> </script>

  42. Validating Data: The two boxes cannot be blank <script type="text/javascript"> <!-- function Validating(){ var Valid; Valid=true; if (document.ValidForm.Loan.value=="" ||document.ValidForm.Rate.value==""){Valid=false;} if (Valid==false){alert("Cannot contain blank");} else {document.ValidForm.submit();} } --> </script>

More Related