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
http://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%">&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>
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
W indow
Navigator
Location
Docum ent
Form collection
History
Other collections
Text
Image
Radio
Link
CheckBox, etc
Anchor, etc
Frame
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
A
B
A
 X B


Y 
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
<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>
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>
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
<!-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>
Descargar

Introduction to Java