Client-Side Web Application Development with Java ISYS 350

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

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

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

HTML Introduction Heading section –,,,, etc. Body section –,, to,, – Formatting:,,, – Comment: – List – Image – Table:, : a new row in table, : a new cell in a table row. – Form:,,,

TABLE Tag

FORM Tag Form attribute: – Action: Specify the URL of a program on a server or an 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

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:

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

Creating a New Web Project File/New Project/Java Web – Web Application Folders of a web project: – Web – Src

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 to start a new line or use Table to align controls.

Dropdown List Example 4% 4.5% 5% 5.5% 6%

RadioButton Example: RadioButtons having the same name belong to one group 10-year 15-year 30-year

Client Side Script

HTML Tags and Events Link : click, mouseOver, mouseOut Image : abort(loading is interrupted), error, load. Area : mouseOver, mouseOut 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

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

Example Value1: Value2: Sum:

Document Object Model

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.

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.

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”

Testing Location Object function openNew(){ site=window.prompt("enter url:"); window.open (site); location.href=“FVForm.htm"; }

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

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

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

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.

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

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

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: &&, ||, !

Formula to Expression

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;}

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

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 ;

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

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.

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

JavaScript to compute the future value

Form Enter Present Value: Select interest rate: 4% 4.5% 5% 5.5% 6% 6.5% 7% Select year: 10-year 15-year 30-year Future value is:

<!-- 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(); } --> Code Example

Years to Reach Goal

Code Example <!-- 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; } -->

Validating Data: The two boxes cannot be blank <!-- 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();} } -->