Learning & Knowledge Education - India: © 2007 IBM Corporation

Learning & Knowledge Education - India
Day 2
2007 IBM Corporation
JavaScript
Objectives
Introduction to JavaScript
Introduction to JavaScript programming language
Using Script tag
Inserting Java Script into tags
Linking Java Script from separate files
JavaScript expression and Operators

Defining and naming variables
Data Types
Expression
Operators Arithmetic, String, Logical, Assignment, typeof
Objectives (Contd.)
Functions and Flow Control

Flow Control
Ifelse
For loops
while loops
Break and continue statements
Using JavaScript functions
Built in functions
User defined functions
Returning values from functions
Events, Event Handlers
Objectives (Contd.)
Objects and Arrays

Properties and Methods
Browser Object Hierarchy
Addressing Objects
Creating Objects
Objects and Variables
External Objects
Security Implications
Arrays and Objects
Objectives (Contd.)
Document Object Model

Introduction to DOM
The Navigator Object
The Window Object
Communicating between windows
Working With Frames in the DOM
The Document object
The Location & History Object
Image Object
Link Object
Objectives (Contd.)
Form Validation The Form Object Model

Recap of Form Elements
Form Tag Events
Controlling Submission
Forms as Navigation
List Events
Buttons
Text Processing
Objectives (Contd.)
Cookies
Introduction to HTTP Cookies
Formatting Cookies
Persisting Cookies
Cookie Security
JavaScript & Cookies
Reading / Writing Cookies
Modifying and deleting Cookies
Introduction
To
JavaScript
Introduction to Java Scripts
What is JavaScript???
JavaScript is a scripting Language created by Netscape
What is a
Scripting
Language???
10
Scripting Language is a lightweight

programming language.
Scripting Languages are not
needed to be compiled.
The language is interpreted at
runtime.
Introduction to JavaScript (Contd.)

A JavaScript is usually directly embedded in an HTML page.
External JavaScripts can be created which can be used by
HTML pages.
JavaScript adds interactivity to HTML pages.
JavaScript's are integrated into the browsing environment.
11
Introduction to JavaScript (Contd.)

Java is a programming
Is
JavaScript
same as
Java???
language which requires

compilation and interpretation.
Java is used to make large

scale applications.
JavaScript is a scripting
language which just requires
interpretation. The script is some
set of commands which the
browser interprets.
JavaScript is used to add

interactivity in HTML Pages.
12
Types of JavaScript
13
Client-Side JavaScript (CSJS) -- an extended

version of JavaScript that enables the enhancement
and manipulation of web pages and client browsers.
Server-Side JavaScript (SSJS) -- an extended

version of JavaScript that enables back-end access
to databases, file systems, and servers.
Core JavaScript -- the base JavaScript language.
Core JavaScript
Core JavaScript encompasses all of the statements,
operators, objects, and functions that make up the

basic JavaScript language.
The following objects are part of core JavaScript:

array
date
math
number
string
14
Client Side Java Scripting
CSJS is composed of core JavaScript and many

additional objects, such as the following:
document
form
frame
window
Navigator
History
15
Server Side JavaScript
SSJS is composed of core JavaScript and additional

objects and functions for accessing databases and file
systems, sending e-mail, and so on.
16
Uses of JavaScript (Client Side)

Menus for Navigation
Form Validation
Popup Windows
Password Protecting
Math Functions
Special effects with document and background
Status bar manipulation
Messages
Mouse Cursor Effects
Links
17
Test Your Understanding
________________ is an extended
version of JavaScript that enables
the enhancement and manipulation
of web pages and client browsers
Client Side JavaScript

Core JavaScript
18
________________ is an extended
version of JavaScript that enables
the enhancement and manipulation
of web pages and client browsers
Client Side JavaScript

Core JavaScript
19
Syntax rules of JavaScript
Statements may or may not contain a semicolon at

the end.
Multiple statements on one line must be separated by

a semicolon.
JavaScript is case sensitive.
20
Using <script> tag
The HTML <script> tag is used to enter JavaScript into a HTML.

The <script> tag can be embedded within
<head> tag.
<body> tag.
21
JavaScript in the head section will be executed when called.
Unlimited number of JavaScripts can be placed both in head and

body section in a HTML document.
JavaScript in the body section will be executed while the HTML

page is loaded.
Using <script> tag

Eg:
<html>
<head><title>Example</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Is a standard command for writing output

to a page
22
How to Handle Older Browsers

Browsers that do not support JavaScript will display the
script as it is. Use the HTML comment tag to prevent this.
Eg.
<!-document.write("Hello World!")
// -->
</script>
23
The two forward slashes at the end of comment line

(//) are a JavaScript comment symbol. This prevents
the JavaScript compiler from compiling the line.
Using an External JavaScript
A JavaScript can be written in an external file, which

can be used by different HTML pages.
The external script cannot contain the <script> tag.

The external file needs to end with the .js extension.
24
Using External JavaScript (contd.)

document.write("This line
has been writen in the
External JavaScript!!!")
External.js
<html>
<head><title>Example</title>
</head>
<body>
<script src="External.js">
</script>>
<p >
This line has been written in the
html page!!!
</p>
</body>
</html>
JavaScript.html
25
Select the Correct Statement/s
<script></script> is embedded
within
<head> </head>
<script></script is embedded
within <body></body>
within <title></title>
26
Select the Correct Statement/s
within
<head> </head>
<script></script is embedded
within <body></body>
within <title></title>
27
JavaScript
Operators &
Expressions
JavaScript Variables and expression
JavaScript Variables
Variable:
A variable is a symbolic name that represents
some data in the memory.
A variable value can change during the execution
of the JavaScript.
A variable can be referred by its name to see or
change its value.
Variables are name are case sensitive.
Must begin with a letter or underscore.
29
Rules of a Variable
Variable Declaration
Variables can be declared using the var statement
var <variable name>=some value
Variables can also be created without using var statement
<variable name>=some value
Eg
var firstname=Samuel
OR
firstname=Samuel
30
Data Type in JavaScript
JavaScript is a loosely typed language.

Data Type of Variable
Loosely
Typed??
need not be specified

during declaration.
Data types are

automatically converted
during script execution.
31
Data Type in JavaScript (contd.)
JavaScript recognizes the following type of values:

Values
numbers
string
boolean
9, 3.56
Samuel, Samuel J Palmisano
true or false
null
A Special keyword which refers to
nothing
32
Data Type in JavaScript (contd.)
33
JavaScript Operators
Operators
Arithmetic
Assignment
String
Comparison
Logical
34
Conditional
typeof
JavaScript Operator (contd.)

Arithmetic
35

Comparison
36

Assignment
37

Logical
38

String
39

Conditional
40

typeof
41

x=20
x=Test
typeof(x) evaluates to
number
string
null
42

x=20
x=Test
typeof(x) evaluates to
number
string
null
43
Flow Control
&
Functions
Flow Control
Conditional Statements
if statement - use this statement if you want to execute some
code only if a specified condition is true.
if...else statement - use this statement if you want to execute
some code if the condition is true and another code if the
condition is false.
if...else if....else statement - use this statement if you want to
select one of many blocks of code to be executed.
switch statement - use this statement if you want to select
one of many blocks of code to be executed.
45
while statement
46
break and continue Statements
There are two special statements that can be used inside loops:
break.
continue.
Break
The break command will break the loop and continue executing the
code that follows after the loop (if any).
Continue
The continue command will break the current loop and continue with
the next value.
47
Example of break statement

html>
<body>
var i=0
for (i=0;i<=5;i++)
{ if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
<
48
Result
The number is 0
The number is 1
The number is 2
Example of continue statement

html>
<body>
var i=0
for (i=0;i<=5;i++)
{ if (i==3){continue}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>
<
49
Result
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
For loop
50
Functions
A function is a reusable piece of code that will be

executed when called for.
A function can be called from anywhere from within

the page or even from other pages if the function is
stored in an external JavaScript (.js) file.
Functions can be embedded in the <head></head>

and within the<body> </body> tag.
51
Predefined functions in JavaScript
DialogBoxes
alert( message)
Displays an alert box with a
message defined by the
string message.
Eg.
alert(An Error Occurred!)
52
Predefined functions in JavaScript (contd.)
confirm(message)
When called, it will display the
message and two boxes. One box
is "OK" and the other is "Cancel". If
OK is selected, a value of true is
returned, otherwise a value of false
is returned.
Eg.
confirm(Do you wish to Continue?)
53
prompt(message)
Displays a box with the message
passed to the function displayed.
The user can then enter text in
the prompt field, and choose OK
or Cancel.
If the user chooses Cancel, a
NULL value is returned. If the
user chooses OK, the string value
entered in the field is returned.
Eg:
prompt(enter your Name)
54
Conversion Functions
eval(string)
Converts a string to an integer or a float value.
Eg
x=20
y=eval(x)+10
y contains the value 30
55

isNaN(value)
If the value passed is not a number then a boolean value of
true is returned else the boolean value of false is returned.
Eg
x=Samuel
y=isNaN(x)
The value stored in y is true
56

parseInt(string)
Converts a string to an integer returning the first integer
encountered which is contained in the string.
Eg
x=77AB67
y=parseInt(x)
y stores the value 77
57

parseFloat(string)
Converts a string to an float value .
Eg
x=77.5AB67
y=parseFloat(x)
y stores the value 77.5
58
User Defined Functions
59
User Defined Functions (contd.)
60
User Defined Functions (contd.)
61
Events
62
Events (contd.)
63
Event Handlers
64
Common Event Handlers
65
Common Event Handlers (contd.)
66
onLoad and onUnload

The onload and onUnload events are triggered when the user
enters or leaves the page.
The onload event is also triggered when the image is loaded.
The showstatus() function will be called when a user enters a page

<body onload=showStatus()>
67
onFocus, onBlur and onChange

The onFocus, onBlur and onChange events are often used in
combination with validation of form fields.
The checkEmail() function will be called whenever the user changes the content of the field:
<input type="text" size="30" id="email"

onchange="checkEmail()">;
68
onSubmit
The onSubmit event is used to validate ALL form fields before
submitting it.
The checkForm() function will be called when the user clicks the submit
button in the form.
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
69
onMouseOver and onMouseOut

onMouseOver and onMouseOut are often used to create
"animated" buttons.
An alert box appears when an onMouseOver event is

detected:
<a href="http://www.ibm.com" onmouseover="alert('An
onMouseOver event)> <img src=ibmlogo.gif" width="100"
height="30"> </a>
70
71
72
Example
73
Example (contd.)
74
Example (contd.)
75
Example (contd.)
76
Example (contd.)
77
Example (contd.)
78
Example (contd.)
function Addition(x,y)
{
var x1=document.form1.text1.value
var y1=document.form1.text2.value
var Ans=document.form1.text3.value
var temp=x1+y1
}
79
Example (contd.)
function Addition (x,y) {
var x1=parseInt(x)
var y1=parseInt(y)
var temp=x1+y1
}
80
Example (contd.)
function Addition (x,y) {
var x1=parseInt(x)
var y1=parseInt(y)
var temp=x1+y1
}
<INPUT TYPE=button value= +op
onClick=Addition(text1.value,text2.value)>
81
Example (contd.)
function Addition (x,y)
var x1=parseInt(x)
var y1=parseInt(y)
var temp=x1+y1
if(Ans==temp){
alert(Your Result agrees with JavaScript!)
document.form1.text1.value=
}
else{
alert(No, JavaScript evalutes this operation differently)
}}
82
83
84
A Complete Program
<html>
<head>
function myfunction(txt)
<input type="button"
onClick="myfunction('Good Morning!')"
value="In the Morning">
onClick="myfunction('Good Evening!')"
alert(txt)
value="In the Evening">
</form>
</script>
<p>
</head>
When you click on one of the buttons, a

function will be called. The function will alert
<body>
the argument that is passed to it.
<form>
</p>
</body>
</html>
85
Output
86
myfunction (txt) receives Good Morning!
87
myfunction (txt) receives Good Evening !
88
Objects
&
Arrays
JavaScript Objects
JavaScript is not a true Object Oriented language as C++ or Java
but rather an Object Based language.
Objects in JavaScript are software entities such as the browser
window or an HTML document.
90
JavaScript Objects (contd.)
91
92
93
94
95
96
97
98
99
Instances of Computer Objects (contd.)
100
JavaScript Core Objects
101
JavaScript Core Objects (contd.)
102
1.
Boolean
2.
Date
3.
Function
4.
Math
5.
Number
6.
String
Boolean
Math
Date
Number
Function
String
103
1.
Boolean
2.
Date
3.
Function
4.
Math
5.
Number
6.
String
Boolean
Math
Date
Number
Function
String

Boolean Object
This object is used to convert a non boolean value to a
boolean value.
The Boolean Object is an Object Wrapper for a Boolean
value
Boolean object is defined with the new keyword
var BooleanObj=new Boolean()
104

All the following lines of code create Boolean objects with an
initial value of false :
var myBoolean=new Boolean()
var myBoolean=new Boolean(0)
var myBoolean=new Boolean(null)
var myBoolean=new Boolean("")
var myBoolean=new Boolean(false)
var myBoolean=new Boolean(NaN)
105

All the following lines of code create Boolean objects with an
initial value of true:
var myBoolean=new Boolean(true)
var myBoolean=new Boolean("true")
var myBoolean=new Boolean("false")
var myBoolean=new Boolean("Richard")
106
107
108
109
1.
Boolean
2.
Date
3.
Function
4.
Math
5.
Number
6.
String
Boolean
Math
Date
Number
Function
String

Date Object
The Date object is used to work with dates and times.
An instance of the Date object with the "new" keyword.
An instance of Date object can be created as:
var myDate=new Date()
var myDate=new Date("Month dd, yyyy hh:mm:ss")
var myDate=new Date("Month dd, yyyy")
var myDate=new Date(yy,mm,dd,hh,mm,ss)
var myDate=new Date(yy,mm,dd)
var myDate= new Date(milliseconds)
110
111
112
113
114
115
116
117
118
119

Commonly used methods of the Date Object
120
121
122
1.
Boolean
2.
Date
3.
Function
4.
Math
5.
Number
6.
String
Boolean
Math
Date
Number
Function
String
123
124
125
126
127
1.
Boolean
2.
Date
3.
Function
4.
Math
5.
Number
6.
String
Boolean
Math
Date
Number
Function
String

Math Object
Math object allows to perform common mathematical
functions.
The Math object includes several Mathematical values and
functions.
The Math object need not be defined before using it.
128

Mathematical values provided by JavaScript
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
129

Methods of Math object
130
131
132
133
1.
Boolean
2.
Date
3.
Function
4.
Math
5.
Number
6.
String
Boolean
Math
Date
Number
Function
String
134
135
136
137
1.
Boolean
2.
Date
3.
Function
4.
Math
5.
Number
6.
String
Boolean
Math
Date
Number
Function
String

String object
The String object is used to manipulate a stored piece of text.
String objects must be created using the new keyword.
JavaScript automatically converts the string primitive to a
temporary String object
A string literal can be embedded within a single or double
quotation marks.
138

String primitives and String objects give different results when
evaluated as JavaScript.
Primitives are treated as source code, but String objects are
treated as a character sequence object.
s1 = "2 + 2
// creates a string primitive
s2 = new String("2 + 2") // creates a String object
139
eval(s1)
// returns the number 4
eval(s2)
// returns the string "2 + 2
eval(s2.valueOf());
// returns the number 4

Common Methods of String Object
140
Defining Arrays
An Array object is used to store a set of values in a single
variable name.
An Array object is created with the new keyword.
An array can be created as:
var MyArray=new Array()
An array can also be created by specifying the array size.
var MyArray=new Array(3)
141
Arrays (contd.)
Data can be entered into an array as:
MyArray[0]=Paul
MyArray[1]=Sam
MyArray[2]=Niel
Data can also be entered into an array as:
var MyArray=new Array(Paul,Sam, Niel)
142
Arrays (contd.)
Accessing Arrays
You can refer to a particular element in an array by referring to
the name of the array and the index number.
The index number starts at 0 .
Myarray [0]
143
The starting index
Document
Object
Model
Document Object Model

The DOM is a programming API for documents.
It is based on an object structure that closely resembles the structure of the
documents it models.
For instance, consider this table, taken from an HTML document:
<TABLE>
<TBODY>
<TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR>
<TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR>
</TBODY>
</TABLE>
145
Document Object Model (contd.)

Graphical
Graphicalrepresentation
representationof
ofthe
theDOM
DOMof
ofthe
theexample
exampletable
table
146

With JavaScript you can restructure an entire HTML document.
You can add, remove, change, or reorder items on a page.
To change anything on a page, JavaScript needs access to all
elements in the HTML document. This access, along with
methods and properties to add, move, change, or remove HTML
elements, is given through the Document Object Model (DOM).
In 1998, W3C published the Level 1 DOM specification. This
specification allowed access to and manipulation of every single
element in an HTML page.
All browsers have implemented this recommendation, and
therefore, incompatibility problems in the DOM have almost
disappeared.
147
Document
Document Tree
Tree
148
How to access the nodes in an HTML

You can find the element you want to manipulate in several ways:
By using the getElementById() and getElementsByTagName()
methods
By using the parentNode, firstChild, and lastChild properties
of an element node
149
Navigator Object
Navigator object is the object representation of the client internet
browser or web navigator program that is being used.
This is a top level object to all others object in DOM hierarchy.
150
Navigator Object Properties

appCodeName The name of the browsers code such as
Internet Explorer
appName The name of the browser.
appVersion The version of the browser.
plugins An array of plug-ins supported by the browser and
installed on the browser.
cpuClass The type of CPU which may be x86.
cookieEnabled A boolean value of true or false depending on
whether cookies are enabled in the browser.
151
Navigator Object Methods

javaEnabled() Returns a boolean telling if the browser has
JavaScript enabled.
152
Window Object
The Window object is the top level object in the JavaScript
hierarchy.
The Window object represents a browser window.
A Window object is created automatically with every instance of a
<body> or <frameset> tag.
153
Window Object Collections

Frames[] Returns all named frames in the window.
154
Window Object Properties

name sets of return the name of the window.
status sets or returns the name of the window.
length sets or returns the number of frames in the window.
self returns a reference to the current window.
statusbar - sets whether or not the browsers statusbar should be
visible.
toolbar - sets whether or not the browsers toolbar should be
visible.
closed Returns all named frames in the window
document
history
155
Window Object Methods

open() Opens a new browser window.
createPopup() Creates a popup window.
setInterval(code,millisec[,lang]) Evaluates an expression at
specified intervals.
clearInterval(id_of_setInterval) cancels a timeout that is set with
the setInterval() method.
setTimeout(code,millisec[,lang]) Evaluates an expression after a
specified number of milliseconds.
clearTimeout(id_of_setTimeout) cancels a timeout that is set with
the setTimeout() method.
focus() sets the focus to the current window.
blur() removes focus from the current window.
close() closes the current window.
156
Frame Object
Frame object represents an HTML frame.
For each instance of a <frame> tag in an HTML document, a
Frame object is created.
157
Frame Object (contd.)
In
Document Object
Model
Frames are
instances of Window
object
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
Document Object
The document object represents the entire HTML document and
can be used to access all elements in a page.
The document object is part of the window object and is
accessed through the window.document property or simply
document.
177
Document Object Collections

anchors[] - Returns a reference to all Anchor objects in the
document.
forms[] - Returns a reference to all Form objects in the document.
images[] - Returns a reference to all Image objects in the
document.
links[] - Returns a reference to all Area and Link objects in the
document.
178
Document Object Properties

Body gives direct access to the <body> element.
Cookie Sets or returns all cookies associated with the current
document.
lastModified Returns the date and time a document was last
modified.
Title Returns the title of the current document.
URL Returns the URL of the current document.
179
Document Object Methods

write() - Writes HTML expressions or JavaScript code to a document
writeln() Similar to write(), with the addition of writing a new line
character after each expression.
open() - Opens a stream to collect the output from any document.write()
or document.writeln() methods.
close() - Closes an output stream opened with the document.open()
method, and displays the collected data
getElementByID() Returns a reference to the first object with the
specified id.
getElementsByName() Returns a collection of objects with the
specified name.
getElementsByTagName() Return a collection of objects with the
specified tag name.
180
Location Object
Location object is an JavaScript object it is not an DOM object.
The Location object is automatically created by the JavaScript
runtime engine and contains information about the current URL.
The Location object is part of the Window object and is accessed
through the window.location property.
181
Location Object (contd.)
182
183
184
185
186
187
Location Object Methods

Assign (url) It loads a new document.
Reload() the current document.
Replace() Replaces the current document with a new one.
188
Location Object Example

<html>
<body>
<script>
switch (window.location.protocol)
{
case "http:":
document.write("From Web<BR>\n")
break
case "file:":
document.write("From Local computer<BR>\n")
break
default:
document.write("Unknown Source<BR>\n")
break
}
</script>
</body>
</html>
189
Output:
If Accessed from the Local File System
190
Output:
If the page is delivered by a Web Server.
191
History Object
History object is a JavaScript object.
The History object is automatically created by the JavaScript
runtime engine and consists of and array of URLs.
It is a part of window object & accessed through window.history
property.
192
History Object (contd.)
193
194
195
196
197
198
Form Object Model
199
Form Object Model (contd.)
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
Cookies
Cookies
A cookie can store a small amount of information

about a user visiting a site.
A cookie is a small text file that is stored on the site

visitor's computer by their browser .
Because the cookie is stored on the users computer,

it does not require any server space no matter how
many users you have .
With JavaScript, you can both create and retrieve

cookie values.
224
Cookies (contd.)
You can use cookies to :

save user preferences.
customize data.
remember the last visit.
Keep track of items in an order while a user browses.
Remember the information your sites visitors gave last time.
225
Cookies can be created, read and erased by JavaScript. They

are accessible through the property document.cookie
Cookies (contd.)
What does a cookie contain?

Name value pair
The first element in a cookie is a "name" attribute, followed
by the data to be stored in the cookie.
The expiry date

specifies how long the cookie is valid for.
226
Cookies (contd.)
What does a cookie contain?

The path
this states where the cookie may be accessed from on the
Web site. Most often, this is set to the server's document
root.
The domain
The "domain" attribute allows you to set a domain name for
the cookie. Again, this is optional.
227
Question
The name-value pair is the
first
_____________ element in the

Cookie
second
third
228
Answer
The name-value pair is the
first
_____________ element in the

Cookie
second
third
229
Cookies and Security
Turn up security level on your browser to disable

cookies or prompt for cookie.
Delete the content of a cookie and then write protect

it.
Use 3rd party software:

Cookie Pal, CookieMaster, CookieCrusher to monitor, browse
and edit cookies.
230
Format of Cookie
First the name value pair.

Then a semicolon and a space.
Then the expiry date.
Expiry date should be in UTC format.
Then again a semicolon and a space.

Then the path.
231
Format of Cookie (contd.)
document.cookie=<name of cookie>=<value of
cookie>;<blank space>expires=<date in UTC
format>;<blank space>path=<path location>
Example
document.cookie = user=Paul; expires=Thu, 2 Aug 2008 20:47:11 UTC;

path=/'
232
Example of Setting a Cookie

<html>
<head>
<script language="JavaScript">
function setCookie(name, value) {
</script>
</head>
<body>
var exp=new Date("January 31,2008") <form>

<input type="button" value="Set
document.cookie=name+"="+escape
a Cookie"
(value)+"; expires="+exp.toGMTString() onClick="setCookie(user',Paul
+"; path=/
Smith')">
document.write(Cookie has been set) </form>
)
</body>
</html>
What does the

escape function
do?
Set an expiry date
233
escape() function
There's no escape!
Strictly speaking, we should be escaping our cookie values -encoding non-alphanumeric characters such as spaces and
semicolons.
This is to ensure that our browser can interpret the values
properly.
Fortunately this is easy to do with JavaScript's escape() function.
For example
document.cookie = "username=" + escape(Paul Smith") + ";
expires=15/02/2003 00:00:00";
234
Example of Setting a Cookie

<html>
<head>
function setCookie(name, value) {
var exp=new Date("January 31,2008")
document.cookie=name+"="+escape
(value)+"; expires="+exp.toGMTString()
+"; path=/
document.write(Cookie has been set)
)
</script>
</head>
<body>
<form>
<input type="button" value="Set a
Cookie"
onClick="setCookie(user',Paul
Smith')">
</form>
</body>
</html>
The value stored is

user=Paul Smith
235
Setting the cookie
Reading a Cookie
<html>
</script>
<head>
</head>
<body>
function readCookie() {
<form><input type="button"
value="read"
onClick="readCookie()">
var ca = document.cookie
document.write(ca)
}
</form>
</body>
Value retrieved is
</html>
user=Paul Smith
Returns the cookie

name value pair
236
Extracting only the value from the Cookie

<html>
<head>
document.write( document.cookie.substri
ng(c_start,c_end))
function readCookie(c_name)
if (document.cookie.length>0)
</script>
{c_start=document.cookie.indexOf(c_name +
"=")
</head>
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
237
Displays the value:

Paul Smith
<body>
<form> <input type="button" value="read"
onClick="readCookie('user')">
</form>
</body>
</html>
Delete Cookies
<html>
<head>
<body>
<form>
function deleteCookie ( cookie_name)
value=delete"
onClick="deleteCookie(user')
">
{
var cookie_date = new Date ( )
cookie_date.setTime
( cookie_date.getTime() - 1 )
document.cookie = cookie_name += "=;
expires=" + cookie_date.toGMTString()
}
</script>
</head>
238
</form>
</body>
</html>
The cookie's expiry date is set

to one second less then the
current date.
Modifying a cookie
To modify a cookie simply reset
the values and use

the same procedure for setting the cookie.
Ensure that the cookie name is existing or a new

cookie will be created.
239
Summary
Cookies are small text files that sit on your hard disk.
Cookies are created when you visit websites that use cookies to store
information that they need (or prefer).
Websites often use cookies to personalize the user experience - such

as remembering your name (assuming you supplied it previously) or
remembering the items in your shopping cart from previous visits.
Despite the many misconceptions about cookies being malicious, they

are quite harmless.
Cookies can't give your personal details to other websites, or transmit a

virus or anything like that.
A cookie can only be read by the server that created it.

Websites normally use cookies to make its users' lives easier, not
harder.
240
Thank You
For Your
Participation

Learning & Knowledge Education - India: © 2007 IBM Corporation

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learning & Knowledge Education - India: © 2007 IBM Corporation

Uploaded by

Copyright:

Available Formats

Learning & Knowledge Education - India