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

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

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

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

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) // Assumes: Attribute is a string // Results: removes the cookie value under the name Attribute { var now = new Date(); document.cookie = Attribute + "=; expires=" + now; }

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

<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

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 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")

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

Client-Side programming with JavaScript 3