Client-Side programming with JavaScript 3. The JavaScript Switch Statement Syntax switch(n) { case...
-
Upload
laurence-underwood -
Category
Documents
-
view
233 -
download
0
Transcript of Client-Side programming with JavaScript 3. The JavaScript Switch Statement Syntax switch(n) { case...
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?
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
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
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
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()
JavaScript Create Your Own Objects
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: