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 4 • HTML 5: <!DOCTYPE html> • Multimedia controls • Video, audio, canvas • Web storage: With HTML5, web pages can store data locally within the user's browser.

Online Resources for Learning HTML • w3schools.com • 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. • Examples: • Id: Specifies a unique id for an element • title: Specifies extra information about an element (displayed as a tool tip)

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

Adding HTML ControlsTools/Palette/HTML, JSPCode Clips

Creating HTML Form

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>

Form Datalist Control

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

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.Rate.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. • Comparison operators: = = , !=, <, >, <=, >= • Logical operators: &&, ||, !

Formula to Expression

IF Statements JS: 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 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 • 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).

Client-Side Web Application Development with JavaScript