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 <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") case 0: document.write("Sleepy Sunday") default: document.write("I'm looking forward to this weekend!") } </script> view page
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
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
JavaScript Break and Continue 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
JavaScript Break and 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
Submission Button //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> 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. Note that the NAME attribute is not required for a submit input. Output Username: view page
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.
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
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
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.
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?
JavaScript Form Validation Required Fields: function validate_required(field,alerttxt) { with (field) if (value==null || value=="") {alert(alerttxt) return false} else {return true} }
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
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
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>
JavaScript Animation <script type="text/javascript"> function mouseOver() { document.b1.src ="b_blue.gif“ } function mouseOut() document.b1.src ="planets.gif “ </script> view page
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, …
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.
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"
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 .
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) // Results: removes the cookie value under the name Attribute var now = new Date(); document.cookie = Attribute + "=; expires=" + now;
cookie.js 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 Example <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); </head>
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
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()
JavaScript Create Your Own Objects The template defines the structure of an object: function person(firstname,lastname,age,eyecolor) { this.firstname=firstname this.lastname=lastname this.age=age this.eyecolor=eyecolor } myFather=new person("John","Doe",50,"blue") myMother=new person("Sally","Rally",48,"green")
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