client-side programming with javascript 3. the javascript switch statement syntax switch(n) { case...

Client-Side programming with

JavaScript 3

The JavaScript Switch Statement

• Syntaxswitch(n){case 1: execute code block 1 break case 2: execute code block 2 Breakdefault: 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") breakcase 6: document.write("Super Saturday") breakcase 0: document.write("Sleepy Sunday") breakdefault: document.write("I'm looking forward to this weekend!")

}</script>

view page

The while loop

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

The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5The number is 6The number is 7The number is 8The number is 9

The number is 10

The do...while Loop

<html><body><script type="text/javascript">var i=0do {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=0for (i=0;i<=10;i++){if (i==3){break}document.write("The number is " + i)document.write("<br />")}</script></body></html>

The number is 0The number is 1The 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=0for (i=0;i<=10;i++){if (i==3){continue}document.write("The number is " + i)document.write("<br />")}</script></body></html>

The number is 0The number is 1The number is 2The number is 4The number is 5The number is 6The number is 7The number is 8The 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>

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


• Required Fields:

function validate_required(field,alerttxt){with (field){if (value==null || value=="") {alert(alerttxt) return false}else {return true}}}


function validate_form(thisform){with (thisform){if (validate_required(email,"Email must be filled out!")==false)

{email.focus()return false}}}

view page


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

• Email format:

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 .

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

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

1. Propertie1. The syntax for accessing a property of an object is:

objName.propName

2. Methods1. You can call a method with the following syntax:

objName.methodName()

personObj.firstname="John“personObj.lastname="Doe“personObj.age=30personObj.eyecolor="blue“document.write(personObj.firstname)

personObj.sleep()


function person(firstname,lastname,age,eyecolor){this.firstname=firstnamethis.lastname=lastnamethis.age=agethis.eyecolor=eyecolor}

myFather=new person("John","Doe",50,"blue")myMother=new person("Sally","Rally",48,"green")

The template defines the structure of an object:


function person(firstname,lastname,age,eyecolor)

{this.firstname=firstnamethis.lastname=lastnamethis.age=agethis.eyecolor=eyecolorthis.newlastname=newlastname

}

function newlastname(new_lastname){this.lastname=new_lastname}

mySister.newlastname(“Mazen").

view page

client-side programming with javascript 3. the javascript switch statement syntax switch(n) { case...

Documents