Client-Side Web Application Development with Java

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 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: – List <ul>– Image– Table: <table>, <tr>: a new row in table, <td>: a new cell in

a table row.– Form: <form>, <input>, <select>, <textarea>

TABLE Tag<table border="1" width="100%"> <tr> <td width="25%"></td> <td width="25%"> </td> <td width="25%"> </td> <td width="25%"> </td> </tr> <tr> <td width="25%"> </td> <td width="25%"> </td> <td width="25%"> </td> <td width="25%"> </td> </tr></table>

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

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”>

http://my.com/Target.htm?CustID=C1&Cname=Chao

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

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>

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>

Client Side Script

• <script type="text/javascript"> • </script>

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

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

Document Object Model

N a v ig a to r L o ca tion

T e xt

R a d io

C h e ckB ox , e tc

F o rm co lle c tion

Im a ge

L ink

A n ch o r, e tc

O th e r co llec tio ns

D o cum e nt H is to ry F ra m e

W in d ow

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

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

AB B

A

Y

X

IF StatementsJS: 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 Statementsswitch(varable name) {case value1:

statements;break;

case value2:statements;break;

…default:

statements;break;

}

Loop Structures1. 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

<script language=javascript type="text/javascript"></script>

JavaScript to compute the future value

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>

<script type="text/javascript"></script>

Code Example

Years to Reach Goal

Code Example<script type="text/javascript"></script>

Validating Data: The two boxes cannot be blank

<script type="text/javascript"></script>

Date post:	13-Jan-2016
Category:	Documents
Upload:	zea
View:	31 times
Download:	0 times

Client-Side Web Application Development with Java

Documents