Client-Side Web Application Development with JavaScript

Client-Side Web Application Development with JavaScript

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

• History:– http://en.wikipedia.org/wiki/HTML

• Standard– The World Wide Web Consortium (W3C)

• HTML 5: <!DOCTYPE html> – Multimedia controls

• Video, audio, canvas

http://en.wikipedia.org/wiki/HTML

Online Resources for Learning HTML

• w3schools.com – http://www.w3schools.com/default.asp

http://www.w3schools.com/default.asp

HTML Tags (Elements)

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

HTML Attributes• HTML elements can have attributes that provide

additional information about an element.• Attributes are always specified in the start tag• Attributes come in name/value pairs like:

name="value“• Name and value are case-sensitive and lowercase is

recommended.

TABLE Tag<table id=“depTable“ border="1" width=“400"> <thead>

<tr><th>Year</th>

<th>Value at BeginYr</th><th>Dep During Yr</th>

<th>Total to EndOfYr</th> </tr> </thead> <tbody>

<tr> <td>1</td> <td>2000</td> <td>400</td> <td>400</td> </tr> </tbody></table>

FORM Tag

• Form attributes:– 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.

– mame: 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.

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

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

Adding HTML ControlsTools/Palette/HTML, JSPCode Clips

Creating HTML Form: Double-click Form element

Create a Form Using NetBean

Step by Step• 1. Add a form tag:

– Name property– Action: server-side program; leave it blank for client-side

• 2. Add lables by typing• 3. Add text input • 4. Add dropdown list:

– Number of options

• 5. Add radiobutton– All buttons belong to a group

• 6. Add button– Lable– Type:

• Submit – submit to a server• Standard – client-side

• 7. Add <br> to start a new line

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

<input type="radio" name="Year" value=10 />10 year<<br><input type="radio" name="Year" value=15 />15 year<br><input type="radio" name="Year" value=30 />30 year<br>

<form name="fvForm" action=""> Enter PV: <input id='PV' type="text" name="PV" value="" /><br> Select Rate: <select name="Rate"> <option value=0.04>4%</option> <option value=0.045>4.5%</option> <option value=0.05>5%</option> <option value=0.055>5.5%</option> <option value=0.06>6%</option> <option value=0.065>6.5%</option> <option value=0.07>7%</option> </select><br> Select Year: <br> <input type="radio" name="Year" value=10 />10 year<br> <input type="radio" name="Year" value=15 />15 year<br> <input type="radio" name="Year" value=30 />30 year<br> <br> Future Value: <input type="text" name="FV" /> <br> <input type="button" value="ComputeFV" name="btnCompute" onClick="ComputeFV()" /> </form>

Note: We can assign an id to a HTML tag (element).

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 of Event Handler<script > </script> </head> <body> <form name="testText"> <input type="text" id="text1" name="test" /> <input type="button" value="showTest" name="btnTest" onClick="showSum()"/> </form> </body>

Browser Object Modelhttp://w3schools.com/jsref/default.asp

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.

• Try statements at: http://w3schools.com/jsref/default.asp

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: current page’s URL address

• To reload a page:– location.reload()

• To open a page: Assign()– Ex. location.assign(URL)

Testing<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>

function openNew(){

site=window.prompt("enter url:");

window.open (site);

location.assign("http://localhost:8080/WebApplication5");

}

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

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• Using the future value form as an example:

– Form name: fvForm– Textbox name: PV– Dropdown list: Rate– Radiobutton group name: Year

Accessing data entered on a form• Textbox:

– document.fvForm.PV.value

• Dropdown list:– document.fvForm.Rate.options[document.fvForm.R

ate.selectedIndex].value

• Radiobuttons:if (document.fvForm.Year[0].checked) {myYear=10;}else if (document.fvForm.Year[1].checked) {myYear=15;}else {myYear=30;}

CheckBox

document.LoanForm.checkBox1.checked

Alternative way using the id attribute

document.getElementById(“PV").value

JavaScript Reference

• http://w3schools.com/js/default.asp

Client Side Script

• <script>• ……• ..statements• </script>

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.• Note: We can use a variable without declare it.

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.

• Note: “pow” has a lowercase p.

• Comparison operators:= = , !=, <, >, <=, >=

• Logical operators:&&, ||, !

Formula to Expression

AB

B

A

Y

X

Math.pow(A,B) Math.pow(X/Y,A/B)

IF StatementsJS: if (condition) {

statements;}else {

statements;}

if (document.fvForm.Year[0].checked) {myYear=10;}else if (document.fvForm.Year[1].checked) {myYear=15;}else {myYear=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• parseFloat:for conversion to a floating-point number:

– Ex. parseFloat('77.3') -> 77.3

• parseInt: for string-to-integer conversion– Ex. parseInt('123.45') -> 123

• toString(), toFixed(n) example:• Price=5;• Qty=10;• Amount=Price*Qty;• Document.write (Amount.toString());• Document.write (Amount.toFixed(2));

• eval• strVar = “5”;• numVar = eval(strVar)• Eval(Price*Qty)

Try Catch

try { //Run some code here } catch(err) { //Handle errors here }

window.prompt: similar to VB’s inputBoxwindow.alert: like MessageBox

function showSum(){ num1=parseFloat(window.prompt("Enter Num1: ")); num2=parseFloat(window.prompt("Enter Num2: ")); sum=num1+num2; window.alert("The sum is: " + eval(num1+num2)); window.alert("The sum is: " + sum);}

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

JavaScript to compute the future value

<form name="fvForm" action=""> Enter PV: <input id='PV' type="text" name="PV" value="" /><br> Select Rate: <select name="Rate"> <option value=0.04>4%</option> <option value=0.045>4.5%</option> <option value=0.05>5%</option> <option value=0.055>5.5%</option> <option value=0.06>6%</option> <option value=0.065>6.5%</option> <option value=0.07>7%</option> </select><br> Select Year: <br> <input type="radio" name="Year" value=10 />10 year<br> <input type="radio" name="Year" value=15 />15 year<br> <input type="radio" name="Year" value=30 />30 year<br> <br> Future Value: <input type="text" name="FV" /> <br> <input type="button" value="ComputeFV" name="btnCompute" onClick="ComputeFV()" /> </form>

Note: We can assign an id to a HTML tag (element).

Using document.getElementById<form name="fvForm"> Enter PV: <input type="text" id ="PV" name="PV" value="" size="10" /><br> <select name="Rate" id="Rate"> <option value=".04">4%</option> <option value=".05">5%</option> <option value=".06">6%</option> <option value=".07">7%</option> <option value=".08">8%</option> </select><br> Select Year: <br> <input type="radio" name="Year" value=10 id="Year10" />10 year<br> <input type="radio" name="Year" value=15 id="Year15" />15 year<br> <input type="radio" name="Year" value=30 id="Year30" />30 year<br> <br> Future Value: <input type="text" name="FV" /> <br> <input type="button" value="ComputeFV" name="btnCompute" onClick="ComputeFV()" />

Years to Reach Goal

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

Using while loop

year=0;while (fv<goal) { year=year+1; fv=pv*Math.pow(1+rate,year); if(fv>=goal)

{ document.testForm.yearNeeded.value=year; break; } }

Working with TableStraight Line Depreciation Table

HTML Table Tag

• <Table> : id and name attributes– <thead>: Table Heading section

• <tr>: new row– <th>: column heading

– <tbody>: data rows

HTML Form Code<body> Straight Line Depreciation Table <form name="depForm"> Enter Property Value: <input type="text" name="pValue" value="" /><br> Enter Property Life: <input type="text" name="pLife" value="" /><br> <input type="button" value="Show Table" name="btnShowTable" onclick="showTable()" /> </form> <table id="depTable" border="1" width="400" cellspacing="1"> <thead> <tr> <th>Year</th> <th>Value at BeginYr</th> <th>Dep During Yr</th> <th>Total to EndOfYr</th> </tr> </thead> <tbody> </tbody> </table> </body>

Table/Row/Cell Object• Table object:

– Properties:• rows: collection of data rows (including the header row)

– rows.length: number of rows– 0-based index

– Methods:• InsertRow(index)• deleteTow(index)

• Data Row object method:– insertCell(index)

• Cell object:– innerHTML property: cell’s data

HTML element’s innerHTML property

• Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.

• Assigning a value:– document.getElementById(“p”).innerHTML = 5;

Validating Data: The property value and life boxes cannot be blank

<script ></script>

Note: the button’s onClick event will call the Validating function:<input type="button" value="Show Table" name="btnShowTable" onclick="Validating()" />

Useful function for Validation

• isNaN(): The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value is NaN, and false if not.

isNaN examplefunction Validating(){var Valid, Valid2;Valid=true;Valid2=true;

if (document.depForm.pValue.value=="" ||document.depForm.pLife.value=="") {Valid=false;}if (isNaN(document.depForm.pValue.value) ||isNaN(document.depForm.pLife.value)) {Valid2=false;} if (Valid==false) {alert("Property value or life cannot contain blank");}if (Valid2==false) {alert("Enter digits only");} if (Valid && Valid2) { showTable(); }}

Client-Side Web Application Development with JavaScript

Documents

Transcript of Client-Side Web Application Development with JavaScript