1 / 29

Client-Side programming with JavaScript 3

Client-Side programming with JavaScript 3. The JavaScript Switch Statement. Syntax switch(n) { case 1: execute code block 1 break case 2: execute code block 2 Break default: code to be executed if n is different from case 1 and 2 }. The JavaScript Switch Statement.

jsharpe
Download Presentation

Client-Side programming with JavaScript 3

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 programming with JavaScript 3

  2. The JavaScript Switch Statement • Syntax switch(n) { case 1: execute code block 1 break case 2: execute code block 2 Break default: code to be executed if n is different from case 1 and 2 }

  3. The JavaScript Switch Statement <script type="text/javascript"> //You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d=new Date() theDay=d.getDay() switch (theDay) { case 5: document.write("Finally Friday") break case 6: document.write("Super Saturday") break case 0: document.write("Sleepy Sunday") break default: document.write("I'm looking forward to this weekend!") } </script> view page

  4. The while loop <html> <body> <script type="text/javascript"> var i=0 while (i<=10) { document.write("The number is " + i) document.write("<br />")i=i+1 } </script> </body> </html> The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10

  5. The do...while Loop <html> <body> <script type="text/javascript"> var i=0 do { document.write("The number is " + i) document.write("<br />")i=i+1 } while (i<0) </script> </body> </html> The number is 0

  6. JavaScript Break and Continue • Break • The break command will break the loop and continue executing the code that follows after the loop (if any). <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3){break} document.write("The number is " + i) document.write("<br />") } </script> </body> </html> The number is 0 The number is 1 The number is 2

  7. JavaScript Break and Continue • Continue • The continue command will break the current loop and continue with the next value. <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3){continue} document.write("The number is " + i) document.write("<br />") } </script> </body> </html> The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10

  8. //When user clicks on the “Submit” button, //the content of the form is sent to //another file. <form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <br> <input type="submit" value="Submit"> </form> Submission Button • Output Username: view page

  9. Submission Button • Another type of input field is the SUBMIT type, this tells the browser to draw a button. • When the user clicks on the button the browser knows to submit the contents of the form to the URL specified as the ACTION in the form tag. • Submit inputs support the attribute VALUE which is the string you want displayed in the button. If you don't include a VALUE attribute the browser will put the string "Submit" in the button.

  10. Submission Button • Notes on the "get" method: • This method appends the form-data to the URL in name/value pairs • This method is useful for form submissions where a user want to bookmark the result • There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred • Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar) • Notes on the "post" method: • This method sends the form-data as an HTTP post transaction • Form submissions with the "post" method cannot be bookmarked • The "post" method is more robust and secure than "get", and "post" does not have size limitations

  11. OnSubmit • The OnSubmit event is used to validate ALL form fields before submitting it. <form method="post" action=“MMM.htm“ onsubmit="return checkForm()"> The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled

  12. JavaScript indexOf() Method • Definition and Usage • The indexOf() method returns the position of the first occurrence of a specified string value in a string. • Syntax • stringObject.indexOf(searchvalue,fromindex) • The indexOf() method is case sensitive! • This method returns -1 if the string value to search for never occurs.

  13. JavaScript Form Validation • JavaScript can be used to validate input data in HTML forms before sending off the content to a server. • Form data that typically are checked by a JavaScript could be: • has the user left required fields empty? • has the user entered a valid e-mail address? • has the user entered a valid date? • has the user entered text in a numeric field?

  14. JavaScript Form Validation • Required Fields: function validate_required(field,alerttxt) { with (field) { if (value==null || value=="") {alert(alerttxt) return false} else {return true} } }

  15. JavaScript Form Validation function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) { email.focus() return false } } } view page

  16. JavaScript Form Validation • Email format: function validate_email(field,alerttxt) { with (field) {apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) { alert(alerttxt) return false } else {return true} } } view page

  17. JavaScript Animation <a href="http://www.Google.com" target="_blank“ onmouseOver="mouseOver()“ onmouseOut="mouseOut()"> <img border="0" alt="Visit Google!"src="b_pink.gif" name="b1" /> </a>

  18. JavaScript Animation <script type="text/javascript"> function mouseOver() { document.b1.src ="b_blue.gif“ } function mouseOut() { document.b1.src ="planets.gif“ } </script> view page

  19. Cookies & JavaScript Recall that cookies are data files stored on the client machine can be accessed and/or modified by the server can also be accessed and/or modified directly by JavaScript code in a page (With JavaScript, you can both create and retrieve cookie values) Potential applications: e-commerce: remember customer name, past visits/purchases, password, … tutorials: remember past experience, performance on quizzes, … games: remember high score, best times, …

  20. Cookies & JavaScript • Examples of cookies: • Name cookie - The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. • Password cookie - The first time a visitor arrives to your web page, he or she must fill in a password. The password is then stored in a cookie. • Date cookie - The first time a visitor arrives to your web page, the current date is stored in a cookie.

  21. Cookies & JavaScript each Web page can have its own cookie Document.cookie is a string of attribute=value pairs, separated by ; "userName=Dave; score=100 ;expires=Mon, 21-Feb-09 00:00:01 GMT"

  22. Escape/unscape function • This function explains how to "escape" any text, HTML, or Javascript to make it generally unreadable to the common user. URL Escape Codes are two-character Hexadecimal (8-bit) values preceeded by a % sign. This is used primarily in browser URLs or for use when making cookies for characters .

  23. cookie.js function setCookie(Attribute, Value) // Assumes: Attribute is a string // Results: stores Value under the name Attribute, expires in 30 days { var ExpireDate = new Date(); ExpireDate.setTime(ExpireDate.getTime() + (30*24*3600*1000)); document.cookie = Attribute + "=" + escape(Value) + "; expires=" + ExpireDate.toGMTString(); document.cookie= Attribute + "=" +escape(Value)+ ((expiredays==null) ? "" : ";expires="+ExpireDate) } function delCookie(Attribute) // Assumes: Attribute is a string // Results: removes the cookie value under the name Attribute { var now = new Date(); document.cookie = Attribute + "=; expires=" + now; }

  24. function getCookie(Attribute) // Assumes: Attribute is a string // Results: gets the value stored under the Attribute { if document.cookie.indexOf(Attribute+"=")==-1 ) { return ""; } else { var begin = document.cookie.indexOf(Attribute+"=") + Attribute.length+1; var end = document.cookie.indexOf(";", begin); if (end == -1) end = document.cookie.length; Return unescape(document.cookie.substring(begin, end)); } } cookie.js

  25. <html> <head> <title> Fun with Cookies </title> <script type="text/javascript" src= cookie.js"> </script> <script type="text/javascript"> function Greeting() // Results: displays greeting using cookie { visitCount = getCookie("visits"); if (visitCount == "") { alert("Welcome to my page, new friend."); setCookie("visits", 1); } else { visitCount = parseFloat(visitCount)+1; alert("Welcome back for visit #" + visitCount); setCookie("visits", visitCount); } } </script> </head> Cookie Example

  26. Cookie Example <body onload="Greeting();"> Here is the stuff in my page. <form name="ClearForm"> <div style="text-align: center;"> <input type="button" value="Clear Cookie“ onclick="delCookie('visits');"> </div> </form> </body> </html> view page

  27. JavaScript Create Your Own Objects • Propertie • The syntax for accessing a property of an object is: objName.propName • Methods • You can call a method with the following syntax: objName.methodName() personObj.firstname="John“ personObj.lastname="Doe“ personObj.age=30 personObj.eyecolor="blue“ document.write(personObj.firstname) personObj.sleep()

  28. JavaScript Create Your Own Objects function person(firstname,lastname,age,eyecolor) { this.firstname=firstname this.lastname=lastname this.age=age this.eyecolor=eyecolor } The template defines the structure of an object: myFather=new person("John","Doe",50,"blue") myMother=new person("Sally","Rally",48,"green")

  29. JavaScript Create Your Own Objects function person(firstname,lastname,age,eyecolor) { this.firstname=firstname this.lastname=lastname this.age=age this.eyecolor=eyecolor this.newlastname=newlastname } function newlastname(new_lastname) {this.lastname=new_lastname} mySister.newlastname(“Mazen"). view page

More Related