HTML JavaScript v1.2 1 Day

IBM Global Business Services
Copyright IBM Corporation 2009

HTML Forms
&
JavaScript
Welcome!
Day 1
Housekeeping
Breaks
Washrooms
Transportation / parking
No pagers or cell phones
Participation
Parking lot issues
Questions

4 JavaScript
Course objectives
After completing this course, you should be able to:
Create HTML Forms
Put in your own words an introduction to JavaScript
Explain JavaScript operators and expressions
Define flow control and functions
Identify objects and arrays
Describe document object model
Describe Cookies
Explain session outline
5 JavaScript

Course map
Module1 : HTML Forms
Module 2: Introduction to JavaScript
Module 3: JavaScript operators and expressions
Module 4: Flow control and functions
Module 5: Objects and arrays
Module 6: Document object model
Module 7: Cookies
Module 8: Session outline
6 JavaScript
Developing
HTML Forms
Form
An HTML form is a section of a document containing normal content, markup,
special elements called controls (checkboxes, radio buttons, menus, etc.),
and labels on those controls.
Users generally "complete" a form by modifying its controls (entering text,
selecting menu items, etc.), before submitting the form to an agent for
processing (e.g., to a Web server, to a mail server, etc.)
Form (Contd.)
A form is defined with the <form> tag.
Form Controls
TextField:
Are used to accept user input. It is a single line input control.
CheckBox
Checkboxes are used when you want the user to select one or more
options of a limited number of choices.
RadioButton
Radio Buttons are used when you want the user to select one of a limited
number of choices.
Select
Are used when you want users to choose options from a selectable lists.
TextArea
Are used to accept user input. TextArea allows entry of multiple lines.

Form Controls (Contd.)
PushButton
Each push button may have client side script associated with the
element's event attributes. When an event occurs (e.g., the user presses
the button, releases it, etc.), the associated script is triggered.
Submit Button
When activated, a submit button submits a form. A form may contain more
than one submit button.
Reset Button
When activated, a reset button resets all controls to their initial values.

Form Controls (Contd)
Form
Component Tag Usage Output
TextField <input> type name value <input type="text" name="t1" value="Paul">
Checkbox <input> type name value <input type="checkbox" name="c1" value="v1">
RadioButton <input> type name value <input type="radio" name="r1" value="v2">
<select> name
<option> value
TextArea
<textarea> row col name <textarea name="n1" row="5" col="20">
<input> type name value <input type="button" name="b1" value="Click">
<input type="submit" name="s1" value="Submit">
<input type="reset" value="Reset">
PushButton
Attribute
ComboBox
<select name="s1"><option value="v1">Display
item</option></select>
Paul
Select an item
Click
Submit
Reset
Form Controls using Attributes:
INPUT Attribute definitions
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button
This attribute specifies the type of control to create. The default value for
this attribute is "text".
name = cdata
This attribute assigns the control name.
value = cdata
This attribute specifies the initial value of the control. It is optional except
when the type attribute has the value "radio" or "checkbox".
size = cdata
This attribute tells the initial width of the control. The width is given in
pixels except when type attribute has the value "text" or "password". In
that case, its value refers to the (integer) number of characters.
INPUT Attribute definitions (Contd )
maxlength = number
When the type attribute has the value "text" or "password", this
attribute specifies the maximum number of characters the user may
enter. This number may exceed the specified size, in which case the
user should offer a scrolling mechanism. The default value for this
attribute is an unlimited number.
Checked
When the type attribute has the value "radio" or "checkbox", this
boolean attribute specifies that the button is on.
src = uri
When the type attribute has the value "image", this attribute specifies
the location of the image to be used to decorate the graphical submit
button.
SELECT Attribute definitions
name = cdata
This attribute assigns the control name.
size = number
If a SELECT element is presented as a scrolled list box, this attribute
specifies the number of rows in the list that should be visible at the
same time.
Multiple
If set, this boolean attribute allows multiple selections. If not set, the
SELECT element only permits single selections.

Pre Selected Options:
Zero or more choices may be pre-selected for the user. Users
should determine which choices are pre-selected as follows:
If no OPTION element has the selected attribute set, the
initial state has the first option selected.
If one OPTION element has the selected attribute set, it
should be pre-selected.
If the SELECT element has the multiple attribute set and
more than one OPTION element has the selected attribute
set, they should all be pre-selected.
It is considered an error if more than one OPTION element
has the selected attribute set and the SELECT element does
not have the multiple attribute set.
Example of a Form
<html>
<head>
<title>
Form Example</title>
</head>
<body bgcolor=pink >
<center>
<h3> Data Entry Form</h3>
<form>
<table>
<tr><td>Name</td><td> <input type="text"
name="t1"> </td></tr>
<tr><td>Gender</td><td> <input type="radio"
name=r1 value=m> Male
<input type="radio" name=r1
value=f>Female</td></tr>

<tr><td>Qualification</td><td><select
name=s>
<option >Select</option>
<option value=M.Sc>M Sc</option>
<option value=M.A.>MA</option>
<option
value="other">other</option></select>
</td></tr>
<tr><td> <input type="submit"
value="submit"> </td>
<td> <input type="reset" value="reset">
</td></tr>
</table>
</center>
</form>
</body>
</html>

Output of the Form
Fieldset & Legend Tag
The fieldset tag is used to group the form elements whilst the legend
tag provides a label for the fieldset.

The HTML legend tag is used for labelling the fieldset element.

By using the fieldset tag and the legend tag, you can make your
forms much easier to understand for your users.

Output Required
Code Snippet
<html>
<body>
<fieldset style="text-align:right;">
<legend><b>Address Details</b></legend>
Favorite Address <input type="text" /><br/>
Least Favorite Address <input type="text" /><br/>
Current Address <input type="text" /><br/>
Your Next Address <input type="text" /><br/>
</fieldset>
<br>

<fieldset align="left">
<legend>Personal Info</legend>
Name : <input type="text">
Age : <input type="text">
Gender :
<input type="radio"
name="r1">Male
<input type="radio"
name="r1">Female
</fieldset>
</body>
</html>
<fieldset> tag is used to group the form elements
<html>
<body>
</fieldset>
<br>

Gender :
<input type="radio"
name="r1">Male
<input type="radio"
name="r1">Female
</fieldset>
</body>
</html>
<legend> tag is used give a suitable label to the group.
<html>
<body>
</fieldset>
<br>

Gender :
<input type="radio"
name="r1">Male
<input type="radio"
name="r1">Female
</fieldset>
</body>
</html>
Given a Label using legend tag
Created groups using fieldset tag

Course map
Module 7: Cookies
25 JavaScript
Introduction to JavaScripts
What is JavaScript?
JavaScript is a scripting language created by Netscape

What is a
scripting
language?
Scripting language is a lightweight
programming language.
Scripting languages are not needed
to be compiled.
The language is interpreted at
runtime.

26 JavaScript
Introduction to JavaScript (continued)
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.

27 JavaScript
Is
JavaScript
same as
Java?
Java is a programming 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.

Introduction to JavaScript (continued)
28 JavaScript
Types of JavaScript
Client-Side JavaScript (CSJS) This is an extended version of JavaScript
that enables the enhancement and manipulation of web pages and client
browsers.
Server-Side JavaScript (SSJS) This is an extended version of JavaScript
that enables back-end access to databases, file systems, and servers.
Core JavaScript This is the base JavaScript language.

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

30 JavaScript
Client-side Java scripting
CSJS is composed of core JavaScript and many additional objects, such as
the following:
Document
Form
Frame
Window
Navigator
History

31 JavaScript
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.
SSJS enables developers to quickly and easily create database-driven web
applications by leveraging their existing knowledge of JavaScript. It's used to
create and/or customize server-based applications by scripting the interaction
between objects.

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

33 JavaScript
Client side JavaScript
Server side JavaScript
Core JavaScript

________________ is an extended
version of JavaScript that enables the
enhancement and manipulation of web
pages and client browsers.

Test your understanding
34 JavaScript
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.

35 JavaScript
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.
JavaScript in the head section will be executed when called.
JavaScript in the body section will be executed while the HTML page is
loaded.
Unlimited number of JavaScripts can be placed both in head and body
section in a HTML document.
36 JavaScript
Using <script> tag
Example:
<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
37 JavaScript
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.
Example

</script>
The two forward slashes at the end of comment
line (//) are a JavaScript comment symbol. This
prevents the JavaScript compiler from
compiling the line.
38 JavaScript
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.
39 JavaScript
Using external JavaScript (continued)

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
40 JavaScript
<script></script> is embedded within
<head> </head>
<script></script is embedded
within <body></body>
<title></title>

Select the correct statement / s
41 JavaScript
<head> </head>
<script></script is embedded
within <body></body>
<title></title>

Select the correct statement / s
42 JavaScript

Course map
Module 7: Cookies
43 JavaScript
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.

44 JavaScript
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
Example
var firstname=Samuel
OR
firstname=Samuel

45 JavaScript
Data type in JavaScript
JavaScript is a loosely typed language.
Data Type of Variable need not
be specified during declaration.
Data types are automatically
converted during script
execution.

Loosely Typed?
46 JavaScript
JavaScript recognizes the following type of values:

Values
string
numbers
null
boolean
9, 3.56
true or false
Samuel, Samuel J Palmisano
A special keyword which refers to nothing
Data type in JavaScript (continued)
47 JavaScript
Data type in JavaScript (continued)
JavaScript 48
JavaScript operators
Arithmetic Assignment
Conditional
String
Comparison
Logical
Operators
typeof
49 JavaScript
Arithmetic
JavaScript operators (continued)
50 JavaScript
Comparison
51 JavaScript
Assignment
52 JavaScript
Logical
53 JavaScript
String
54 JavaScript
Conditional
55 JavaScript
typeof
56 JavaScript
Number
String
null

x=20
x=Test
typeof(x) evaluates to
57 JavaScript

Course map
Module 7: Cookies
58 JavaScript
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.

59 JavaScript
While statement
60 JavaScript
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.
61 JavaScript
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>
Result

The number is 0
The number is 1
The number is 2
62
JavaScript
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>
Result
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
63
JavaScript
For loop
64 JavaScript
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.
65 JavaScript
Predefined functions in JavaScript
DialogBoxes
alert( message)
Displays an alert box with a message
defined by the string message.
Example:
alert(An Error Occurred!)

66 JavaScript
Predefined functions in JavaScript (continued)
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.
Example
confirm(Do you wish to Continue?)

67 JavaScript
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.
Example:
Prompt (enter your Name)

68 JavaScript
Conversion Functions
eval(string)
Converts a string to an integer or a float value.
Example:
x=20
y=eval(x)+10
y contains the value 30

69 JavaScript
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.
Example
x=Samuel
y=isNaN(x)
The value stored in y is true

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

71 JavaScript
parseFloat(string)
Converts a string to an float value .
Example
x=77.5AB67
y=parseFloat(x)
y stores the value 77.5

72 JavaScript
User defined functions
73 JavaScript
User defined functions (continued)
74 JavaScript
User defined functions (continued)
75 JavaScript
Events
76 JavaScript
Events (continued)
77 JavaScript
Event handlers
78 JavaScript
Common event handlers
79 JavaScript
Common event handlers (continued)
80 JavaScript
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()>
81 JavaScript
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()">;
82 JavaScript
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()">
83 JavaScript
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>
84 JavaScript
85 JavaScript
86 JavaScript
Example
87 JavaScript
Example (continued)
88 JavaScript
Example (continued)
89 JavaScript
Example (continued)
90 JavaScript
Example (continued)
91 JavaScript
Example (continued)
92 JavaScript
Example (continued)

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
}

93 JavaScript
Example (continued)

function Addition (x,y)
{
var x1=parseInt(x)
var y1=parseInt(y)
var temp=x1+y1
}

94 JavaScript
Example (continued)
{
var x1=parseInt(x)
var y1=parseInt(y)
var temp=x1+y1
}

<INPUT TYPE=button value= +op
onClick=Addition(text1.value,text2.value)>

95 JavaScript
Example (continued)
{
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)
}
}
96 JavaScript
97 JavaScript
98 JavaScript
A complete program
<html>
<head>
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>

<input type="button"
onClick="myfunction('Good Morning!')"
value="In the Morning">

<input type="button"
onClick="myfunction('Good Evening!')"
value="In the Evening">
</form>
<p>
When you click on one of the buttons, a
function will be called. The function will
alert
the argument that is passed to it.
</p>
</body>
</html>
99 JavaScript
Output
100 JavaScript
myfunction (txt) receives Good Morning!
101 JavaScript
myfunction (txt) receives Good Evening !
102 JavaScript

Course map
Module 7: Cookies
103 JavaScript
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.

104 JavaScript
JavaScript objects (continued)
105 JavaScript
106 JavaScript
107 JavaScript
108 JavaScript
109 JavaScript
110 JavaScript
111 JavaScript
112 JavaScript
113 JavaScript
Instances of computer objects (continued)
114 JavaScript
JavaScript core objects
115 JavaScript
JavaScript core objects (continued)
Boolean
Math
Date
Function
Number
String
1. Boolean
2. Date
3. Function
4. Math
5. Number
6. String
116 JavaScript
Boolean
Math
Date
Function
Number
String
1. Boolean
2. Date
3. Function
4. Math
5. Number
6. String
117 JavaScript
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()

118 JavaScript
JavaScript Core Objects (contd.)
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)

119 JavaScript
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")
120 JavaScript
121 JavaScript
122 JavaScript
Boolean Math
Date
Function
Number
String
1. Boolean
2. Date
3. Function
4. Math
5. Number
6. String
123 JavaScript
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)

124 JavaScript
125 JavaScript
126 JavaScript
127 JavaScript
128 JavaScript
129 JavaScript
130 JavaScript
131 JavaScript
132 JavaScript
133 JavaScript
Commonly used methods of the Date Object
134 JavaScript
135 JavaScript
Boolean
Math
Date
Function
Number
String
1. Boolean
2. Date
3. Function
4. Math
5. Number
6. String
136 JavaScript
137 JavaScript
138 JavaScript
139 JavaScript
140 JavaScript
Boolean
Math
Date
Function
Number
String
1. Boolean
2. Date
3. Function
4. Math
5. Number
6. String
141 JavaScript
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.
142 JavaScript
Mathematical values provided by JavaScript
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

143 JavaScript
Methods of Math object
144 JavaScript
145 JavaScript
146 JavaScript
Boolean
Math
Date
Function
Number
String
1. Boolean
2. Date
3. Function
4. Math
5. Number
6. String
147 JavaScript
148 JavaScript
149 JavaScript
150 JavaScript
Boolean
Math
Date
Function
Number
String
1. Boolean
2. Date
3. Function
4. Math
5. Number
6. String
151 JavaScript
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.

152 JavaScript
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
eval(s1) // returns the number 4
eval(s2) // returns the string "2 + 2
eval(s2.valueOf()); // returns the number 4

153 JavaScript
Common Methods of String Object
154 JavaScript
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)

155 JavaScript
Arrays (continued)
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)

156 JavaScript
Arrays (continued)
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]
The starting index
157 JavaScript

Course map
Module 7: Cookies
158 JavaScript
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>

159 JavaScript
Document object model (continued)
Graphical representation of the DOM of the example table
160 JavaScript
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.
161 JavaScript
Document Tree
162 JavaScript
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

163 JavaScript
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.

164 JavaScript
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.

165 JavaScript
Navigator object methods
JavaEnabled() Returns a boolean telling if the browser has JavaScript
enabled.

166 JavaScript
Window object and collections
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.
Window object collections
Frames[] Returns all named frames in the window.

167 JavaScript
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.
Status bar - sets whether or not the browsers status bar should be
visible.
toolbar - sets whether or not the browsers toolbar should be visible.
closed Returns all named frames in the window
document
history

168 JavaScript
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.
169 JavaScript
Frame object
Frame object represents an HTML frame.
For each instance of a <frame> tag in an HTML document, a Frame object is
created.

170 JavaScript
In
Document Object
Model
Frames are
instances of
Window object

Frame object (continued)
171 JavaScript

172 JavaScript

173 JavaScript

174 JavaScript

175 JavaScript

176 JavaScript

177 JavaScript

178 JavaScript

179 JavaScript

180 JavaScript

181 JavaScript

182 JavaScript

183 JavaScript

184 JavaScript

185 JavaScript

186 JavaScript

187 JavaScript

188 JavaScript

189 JavaScript
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.
190 JavaScript
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.

191 JavaScript
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.

192 JavaScript
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.

193 JavaScript
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.

Location object
194 JavaScript

Location object (continued)
195 JavaScript

196 JavaScript

197 JavaScript

198 JavaScript

199 JavaScript

200 JavaScript
Location object methods
Assign (url) It loads a new document.
Reload() the current document.
Replace() Replaces the current document with a new one.

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

202 JavaScript
Output:
If Accessed from the Local File System

JavaScript
203
Output:
If the page is delivered by a Web Server.

JavaScript
204
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 and accessed through window.history property.
JavaScript
205

History object
206 JavaScript

History object
207 JavaScript

History object
208 JavaScript

History object
209 JavaScript

210 JavaScript

211 JavaScript

Form object model
212 JavaScript

Form object model (continued)
213 JavaScript

214 JavaScript

215 JavaScript

216 JavaScript

217 JavaScript

218 JavaScript

219 JavaScript

220 JavaScript

221 JavaScript

222 JavaScript

223 JavaScript

224 JavaScript

225 JavaScript

226 JavaScript

227 JavaScript

228 JavaScript

229 JavaScript

230 JavaScript

231 JavaScript

232 JavaScript

233 JavaScript

234 JavaScript

235 JavaScript

Course map
Module 7: Cookies
236 JavaScript
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.
237 JavaScript
Cookies (continued)
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.
Cookies can be created, read and erased by JavaScript. They are accessible
through the property document.cookie

238 JavaScript
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.

Cookies (continued)
239 JavaScript
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.

Cookies (continued)
240 JavaScript
First
Second
Third

The name-value pair is the
_____________ element in the
Cookie

Questions
241 JavaScript

The name-value pair is the
_____________ element in the
Cookie

Answer
First
Second
Third
242 JavaScript
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 3
rd
party software:
Cookie Pal, CookieMaster, CookieCrusher to monitor, browse and edit Cookies.
243 JavaScript
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.
244 JavaScript
Format of cookie (continued)
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=/'
245 JavaScript
Example of setting a cookie
<html>
<head>
<script language="JavaScript">
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>
Set an expiry date
What does the
escape function
do?
246 JavaScript
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";
247 JavaScript
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>
Setting the cookie
The value stored is
user=Paul Smith
248 JavaScript
Reading a cookie
<html>
<head>
function readCookie() {

var ca = document.cookie
document.write(ca)

}

</script>
</head>
<body>
<form><input type="button"
value="read"
onClick="readCookie()">
</form>
</body>
</html>

Returns the cookie
name value pair
Value retrieved is
user=Paul Smith
249 JavaScript
Extracting only the value from the Cookie
<html><head>
function readCookie(c_name)
{
if (document.cookie.length>0)
{c_start=document.cookie.indexOf(c_name +
"=")
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
document.write(
document.cookie.substring(c_start,
c_end))
}
}
}
</script>
</head>
<body>
<form> <input type="button"
value="read"
onClick="readCookie('user')">
</form>
</body></html>

Displays the value:
Paul Smith
250 JavaScript
Delete Cookies
<html>
<head>
function deleteCookie ( cookie_name)
{
var cookie_date = new Date ( )
cookie_date.setTime (
cookie_date.getTime() - 1 )
document.cookie = cookie_name +=
"=; expires=" +
cookie_date.toGMTString()
}
</script>
</head>

<body>
<form>
<input type="button" value=delete"
onClick="deleteCookie(user')">
</form>
</body>
</html>

The cookie's expiry date is set
to one second less then the
current date.
251 JavaScript
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.
252 JavaScript

Course map
Module 6: Cookies
253 JavaScript
Session outline
What is ajax?
Advantages and disadvantages
Xmlhttprequest
A first example
254 JavaScript
Asynchronous JavaScript and XML.
Ajax is group of interrelated development techniques used for creating
interactive web applications.
It allows web applications to retrieve data from the server
asynchronously
Without interfering with the current state of the page
Data is retrieved using the XMLHttpRequest object
or, in browsers that do not support it, through the use of Remote Scripting

What is Ajax?
255 JavaScript
What is Ajax? (Continued)
Two components:
Client Side (e.g. JavaScript)
determine when to contact server
contact it
display results on page
Server side (e.g. PHP)
like normal PHP script but return specifically what is required
maybe just OK or Fail
maybe XML or HTML
256 JavaScript
XHTML and CSS for presentation
the Document Object Model for dynamic display of and interaction with
data
XML and XSLT for the interchange and manipulation of data, respectively
the XMLHttpRequest object for asynchronous communication
JavaScript to bring the above technologies together

Technologies used for Ajax
257 JavaScript

What is Ajax?
258 JavaScript
updating page information
real-time data validation
obtaining data for a control
responding to server events
pushing data to the client
real-time interaction
real-time monitoring
auto completion
Google Suggest helped to initially
popularise Ajax in 2005

AJAX has many potential uses including:

Uses of Ajax
259 JavaScript
Different pages on a website often have much common content
with traditional web-techniques, that content has to be reloaded on
every request
with Ajax a web application can request only the content that needs to
be updated
sections of pages can be reloaded individually
reduces bandwidth usage / load time

Advantages of Ajax
260 JavaScript
The use of asynchronous requests allows a client's browser to be
more interactive / respond more quickly to input
_ Application will appear faster / responsive - even if the application has not
changed on the server side
Use of Ajax reduces connections to the server, since scripts and style
sheets only have to be requested once
Ajax allows programmers to make a separation between the methods
they use to deliver information via the Internet and formats they use to
present it

Advantages of Ajax
261 JavaScript
Dynamically created pages do not register themselves in a browser's history
BACK button does not return the user to an earlier state of an Ajax-enabled page
but to the last page visited
Workarounds include changing the anchor portion of the URL (following the #) when
AJAX is run and monitoring it for changes
Dynamic web page updates make it difficult for a user to bookmark a
particular state of an application
solutions to this problem exist, many of which also use the URL fragment
identifier
To keep track of, and allow users to return to, the application in a given state

Disadvantages of Ajax
262 JavaScript
XMLHttpRequest (XHR)
An API that can be used by javascript
and other web browser scripting
languages
Used to transfer XML and other text data
between a web server and a browser
Though it can do synchronous fetches, it
is almost always asynchronous
Due to the greater UI responsiveness
Examples of web apps that make use of
XMLHttpRequest include:
Google maps
Windows live's virtual
earth
Mapquests dynamic
map interface
Facebook

XMLHttpRequest (XHR)
263 JavaScript
Different browsers use different methods to create the XMLHttpRequest
object
IE uses an ActiveXObject
other browsers uses the
built-in JavaScript object
XMLHttpRequest
Can use JavaScript try/catch to
handle the creation of the
XMLHttpRequest object

XMLHttpRequest (XHR): (Continued)
264 JavaScript

<body>
// JavaScript function here
...
</script>
<form name="myForm">
<h3>Simple Ajax Test</h3>
<p>Input string:
<input type="text"

onkeyup="ajaxFunction(this.value);"
name="username"
/>
</p>
<p>Backwards: <em><span
id="myElem"></span></em></p>
</form></body>

Example of HTML
265 JavaScript

<body>
function ajaxFunction(myStr) {
var xmlHttp;
try {
...
} // end of try section
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.getElementById('myElem').innerHTML =
xmlHttp.responseText;
}
}
$path = "http://www.cs.kent.ac.uk/people/staff/amlf/";
xmlHttp.open("GET",
$path + "reverse.php?str=" + myStr, true);
xmlHttp.send(null);
}
</script></body>

The whole JavaScript function
266 JavaScript
Revision
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.
267 JavaScript
Reading material (AJAX)
Overview
http://en.wikipedia.org/wiki/AJAX
http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html?cid=59754
Examples
http://www.sitepoint.com/article/remote-scripting-ajax.html
http://www.mousewhisperer.co.uk/ajax_page.html
http://www.clearnova.com/ajax/
http://www.webpasties.com/xmlHttpRequest/
AJAX based Applications
http://www.ajaxreview.com/
http://ajaxblog.com/
268 JavaScript
Questions
269 JavaScript
Summary
At the completion of this course, we see that you are now able to:
Put in your own words an introduction to JavaScript
Explain JavaScript operators and expressions
Define flow control and functions
Identify objects and arrays
Describe document object model
Describe Cookies
Explain session outline
270 JavaScript
Copyright IBM Corporation 2009 271
THANK YOU
JavaScript

HTML JavaScript v1.2 1 Day

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML JavaScript v1.2 1 Day

Hochgeladen von

Copyright:

Verfügbare Formate

IBM Global Business Services

Copyright IBM Corporation 2009

Das könnte Ihnen auch gefallen