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: <!-- 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”>
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"><!--function ComputeSum(){n1=document.testForm.num1.value;n2=document.testForm.num2.value;document.testForm.valueSum.value=eval(n1)+eval(n2);}--></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"><!--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>
Code Example
Years to Reach Goal
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>
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>