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 – Browser Document Object Model (DOM) – JavaScript – Cascade Style Sheet, CSS 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 5: – Multimedia controls Video, audio, canvas – Controls with build-in validation

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

7. HTML Tags (Elements) 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. 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:

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

10. FORM Tag Form attributes: – mame: Form’s name, id For server-side form: – 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.

11. A form may contains: Textbox Check box Listbox Radiobutton Button Etc.

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

13. Creating HTML Form: Double-click Form element

14. Create a Form Using NetBean

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

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

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

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

19. HTML Tags and Events http://www.w3schools.com/tags/ref_eventattributes.asp 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

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

21. 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: " + sum.toString()); }

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

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

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

25. Location Object Allows you to change to a new web page from within a script code. To reload a page: – location.reload() To open a page:Assign() – Ex. location.assign(URL)

26. Testing function openNew(){ site=window.prompt("enter url:"); window.open (site); site=window.prompt("enter url:"); location.assign(site); }

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

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

29. Use document object to access 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

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

31. CheckBox document.LoanForm.checkBox1.checked

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

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

34. Client Side Script ……..statements Note: Typically the script is embedded in the section.

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

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

37. Arrays var arrayName = new Array(array size); var Pet = new Array(2); Pet[0]=“dog”; Pet[1]=“cat”; Pet[2]=“bird”; var names=new Array(); names[0]="peter"; names[1]="paul"; names[2]="mary"; Note: Optionally, it is not require to declare array size.

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

39. Formula to Expression Math.pow(A,B)Math.pow(X/Y,A/B)

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

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

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

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

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

45. 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); }

46. JavaScript Functions Defining functions – function functionName(arg1,..,argN){ Statements; return valueToReturn; } Note: 1. The arguments are optional. 2. The return statement is optional. A JavaScriopt function is not required to return a value.

47. 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); }

48. JavaScript to compute the future value

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

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

51. Using document.getElementById Enter PV: 4% 5% 6% 7% 8% Select Year: 10 year 15 year 30 year Future Value:

52. function ComputeFV(){ //myPV=eval(document.fvForm.PV.value); myPV=parseFloat(document.getElementById("PV").value); myRate=parseFloat(document.getElementById("Rate").value); if (document.getElementById("Year10").checked) {myYear=10;} else if (document.getElementById("Year15").checked) {myYear=15;} else {myYear=30;} fv=myPV*Math.pow(1+myRate,myYear); document.getElementById("FV").value=fv.toString(); //document.fvForm.FV.value=fv.toString(); }

53. Years to Reach Goal

54. Form Code PV: Rate: Goal: Year:

55. Code Example function ComputeYear(){ pv=eval(document.testForm.PV.value); rate=eval(document.testForm.Rate.value); goal=eval(document.testForm.Goal.value); for (i=0; true; ++i){ fv=pv*Math.pow(1+rate,i); if(fv>=goal){ document.testForm.Year.value=i; break; }

56. Using while loop year=0; while (fv<goal) { year=year+1; fv=pv*Math.pow(1+rate,year); if(fv>=goal) { document.testForm.Year.value=year; break; }

57. Working with Table Straight Line Depreciation Table

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

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

60. 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) deleteRow(index) Data Row object method: – insertCell(index) Cell object: – innerHTML property: cell’s data

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

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

63. 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:

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

65. isNaN example function 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(); }