1 / 64

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

alexa
Download Presentation

Client-Side Web Application Development with JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • Standard • The World Wide Web Consortium (W3C) • HTML 5: <!DOCTYPE html> • Multimedia controls • Video, audio, canvas

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

  7. 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: <!-- comment --> • List <ul> • Image • Table: <table>, <tr>: a new row in table, <td>: a new cell in a table row. • Form: <form>, <input>, <select>

  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.

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

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

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

  12. Adding HTML ControlsTools/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 <br> to start a new line

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

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

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

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

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

  22. Browser Object Modelhttp://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. • 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)

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

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

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

  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 • <script> • …… • ..statements • </script>

  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”;

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

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

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

  48. JavaScript to compute the future value

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

  50. Code Example <script> <!-- 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].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>

More Related