Download presentation
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") case 0: document.write("Sleepy Sunday") 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
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
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
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
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 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( ," must be filled out!")==false) .focus() return false } view page
16
JavaScript Form Validation
format: function validate_ (field,alerttxt) { with (field) dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) alert(alerttxt) return false } else {return true} view page
17
JavaScript Animation <a href=" 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) // Results: removes the cookie value under the name Attribute var now = new Date(); document.cookie = Attribute + "=; expires=" + now;
24
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));
25
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>
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
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")
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.