1. Client-Side Web Application Development with JavaScript ISYS 350

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

3. Technologies for Creating Dynamic Pages Client-side technology – HTML and Browser Document Object Model (DOM) – JavaScript Server-side technology – Microsoft.Net – PHP – Java – Others

4. Example of Client-side Page using HTML, DOM and JavaScript

5. HTML Introduction History: – http://en.wikipedia.org/wiki/HTML http://en.wikipedia.org/wiki/HTML Standard – The World Wide Web Consortium (W3C) HTML 4 HTML 5 – Multimedia controls

6. Online Resources for Learning HTML w3schools.com – http://www.w3schools.com/default.asp http://www.w3schools.com/default.asp

7. HTML Tags Heading section –,,,, etc. Body section –,, to,, – Formatting:,,, – Comment: – List – Image – Table:, : a new row in table, : a new cell in a table row. – Form:,,,

8. TABLE Tag Year Value at BeginYr Dep During Yr Total to EndOfYr 1 2000 400

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

10. 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: http://my.com/Target.htm?CustID=C1&Cname=Chao

11. Adding HTML Controls Tools/Palette/HTML, JSPCode Clips

12. Creating HTML Form

13. Create a Form Using NetBean

14. 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 to start a new line

15. Dropdown List Example 4% 4.5% 5% 5.5% 6%

16. RadioButton Example: RadioButtons having the same name belong to one group 10 year 15 year 30 year

17. Enter PV: Select Rate: 4% 4.5% 5% 5.5% 6% 6.5% 7% Select Year: 10 year 15 year 30 year Future Value: Note: We can assign an id to a HTML tag (element).

18. HTML Tags and Events Link : click, mouseOver, mouseOut Image : abort(loading is interrupted), error, load. Area : mouseOver, mouseOut 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

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

20. Example of Event Handler <!-- 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); } -->

21. Browser Object Model http://w3schools.com/jsref/default.asp

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

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

24. 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)

25. Testing function openNew(){ site=window.prompt("enter url:"); window.open (site); location.assign("http://localhost:8080/WebApplication5"); }

26. 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)

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

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

29. 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;}

30. CheckBox document.LoanForm.checkBox1.checked

31. Alternative way using the id attribute document.getElementById(“PV").value

32. JavaScript Reference http://w3schools.com/js/default.asp

33. Client Side Script Or:

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

35. Statements Statements: – End with “;” – Block of code: { } Comments: – Single-line comment: //comment – Block comment: /* comment comment */

36. Arrays var arrayName = new Array(array size); var Pet = new Array(2); Pet[0]=“dog”; Pet[1]=“cat”; Pet[2]=“bird”;

37. 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: &&, ||, !

38. Formula to Expression

39. 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;}

40. Switch Case Statements switch(varable name) { case value1: statements; break; case value2: statements; break; … default: statements; break; }

41. 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 ;

42. 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() example: Price=5; Qty=10; Amount=Price*Qty; Document.write (Amount.toString()); eval strVar = “5”; numVar = eval(strVar) Eval(Price*Qty)

43. Try Catch try { //Run some code here } catch(err) { //Handle errors here }

44. window.prompt: similar to VB’s inputBox window.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); }

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

46. Example: JavaScript to Compute the sum of two values <!-- function ComputeSum(){ n1=document.testForm.num1.value; n2=document.testForm.num2.value; document.testForm.valueSum.value=eval(n1)+eval(n2); } -->

47. JavaScript to compute the future value

48. Enter PV: Select Rate: 4% 4.5% 5% 5.5% 6% 6.5% 7% Select Year: 10 year 15 year 30 year Future Value: Note: We can assign an id to a HTML tag (element).

49. <!-- function ComputeFV(){ //myPV=eval(document.fvForm.PV.value); myPV=parseFloat(document.fvForm.PV.value); //myRate=eval(document.fvForm.Rate.options[document.fvForm.Rate.selectedIndex].value); myRate=parseFloat(document.fvForm.Rate.options[document.fvForm.Rate.selectedIndex].va lue); 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(); } --> Code Example

50. Years to Reach Goal

51. Code Example <!-- 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; } -->

52. Working with Table Straight Line Depreciation Table

53. HTML Table Tag : id and name attributes – : Table Heading section : new row – : column heading – : data rows

54. HTML Form Code Straight Line Depreciation Table Enter Property Value: Enter Property Life: Year Value at BeginYr Dep During Yr Total to EndOfYr

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

56. function showTable(){ value=eval(document.depForm.pValue.value); life=eval(document.depForm.pLife.value); depreciation = value / life; var table = document.getElementById('depTable'); var totalDepreciation=0; for(var i = table.rows.length - 1; i > 0; i--) { table.deleteRow(i); } for (count = 1; count <= life; count++) { var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell0 = row.insertCell(0); cell0.innerHTML=count; var cell1 = row.insertCell(1); cell1.innerHTML="$" + value.toFixed(2); var cell2 = row.insertCell(2); cell2.innerHTML="$" + depreciation.toFixed(2); totalDepreciation += depreciation; var cell3 = row.insertCell(3); cell3.innerHTML="$" + totalDepreciation.toFixed(2); value -= depreciation; }

57. Validating Data: The property value and life boxes cannot be blank <!-- function Validating(){ var Valid; Valid=true; if (document.depForm.pValue.value=="" ||document.depForm.pLife.value=="") {Valid=false;} if (Valid==false) {alert("Property value or life cannot contain blank");} else {showTable();} }--> Note: the button’s onClick event will call the Validating function:

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