HTML JavaScript

IBM Global Business Services
HTML Forms & JavaScript

Copyright IBM Corporation 2009
Welcome!
Day 1
Housekeeping
Breaks Washrooms Transportation / parking No pagers or cell phones Participation Parking lot issues Questions
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
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
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 TextField Checkbox RadioButton ComboBox TextArea
Tag <input> <input> <input> <select> <option> type type type name value
Attribute name name name
Usage value <input type="text" name="t1" value="Paul"> value <input type="checkbox" name="c1" value="v1"> value <input type="radio" name="r1" value="v2"> <select name="s1"><option value="v1">Display item</option></select> name <textarea name="n1" row="5" col="20"> value <input type="button" name="b1" value="Click"> <input type="submit" name="s1" value="Submit"> <input type="reset" value="Reset">
Output
Paul
O Select an item
<textarea> row <input> type
col name
Click
Submit
PushButton
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 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>
<legend> tag is used give a suitable label to the group.

<html> <body> <fieldset style="text-align:right;"> <legend><b>Address Details</b></legend> <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> <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>
Given a Label using legend tag
Created groups using fieldset tag
Course map
25
JavaScript
Introduction to JavaScripts
What is JavaScript?
JavaScript is a scripting language created by Netscape Scripting language is a lightweight programming language.
What is a What is a scripting scripting language? 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
Introduction to JavaScript (continued)

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.
Is JavaScript same as Java?
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
Test your understanding
Client side JavaScript ________________ is an extended version of JavaScript that enables the enhancement and manipulation of web pages and client browsers. Server side JavaScript Core JavaScript
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 type="text/javascript"> <!-document.write("Hello World!") // --> </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 Select the correct statement / s <head> </head> <script></script is embedded within <body></body> <script></script> is embedded within <title></title>
41
JavaScript
<script></script> is embedded within Select the correct statement / s <head> </head> <script></script is embedded within <body></body> <script></script> is embedded within <title></title>
42
JavaScript
Course map
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. Loosely Typed? Loosely Typed? Data types are automatically converted during script execution.
46
JavaScript
Data type in JavaScript (continued)

JavaScript recognizes the following type of values:
Values
numbers string
boolean true or false null
9, 3.56
Samuel, Samuel J Palmisano
A special keyword which refers to nothing
47
JavaScript
Data type in JavaScript (continued)
48
JavaScript
JavaScript operators
Operators
Arithmetic
Assignment
Conditional
String Comparison typeof Logical
49
JavaScript
JavaScript operators (continued)
Arithmetic
50
JavaScript
Comparison
51
JavaScript
Assignment
52
JavaScript
Logical
53
JavaScript
String
54
JavaScript
Conditional
55
JavaScript
typeof
56
JavaScript
x=20 x=Test typeof(x) evaluates to
Number String null
57
JavaScript
Course map
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> <script type="text/javascript"> 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> <script type="text/javascript"> 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 Ans=document.form1.text3.value var temp=x1+y1
94
JavaScript
Example (continued)
function Addition (x,y) { var x1=parseInt(x) var y1=parseInt(y) var Ans=document.form1.text3.value var temp=x1+y1 }
<INPUT TYPE=button value= +op onClick=Addition(text1.value,text2.value)>
95
JavaScript
Example (continued)
function Addition (x,y) { var x1=parseInt(x) var y1=parseInt(y) var Ans=document.form1.text3.value var temp=x1+y1 if(Ans==temp) { alert(Your Result agrees with JavaScript!) document.form1.text1.value= document.form1.text2.value= document.form1.text3.value= } else { alert(No, JavaScript evalutes this operation differently) document.form1.text3.value= } }
96 JavaScript Copyright IBM Corporation 2009
97
JavaScript
98
JavaScript
A complete program
<html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <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>
<input type="button" onClick="myfunction('Good Morning!')" value="In the Morning">
Output
100
JavaScript
myfunction (txt) receives Good Morning!
101
JavaScript
myfunction (txt) receives Good Evening !
102
JavaScript
Course map
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 1. 2. 3. 4. 5. 6. Boolean Date Function Math Number String Function Date
Math
Number
String
116
JavaScript
1. 2. 3. 4. 5. 6.
Boolean Date Function Math Number String Function Date Boolean
Math
Number
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
1. 2. 3. 4. 5. 6.
Boolean Date Function Math Number String
Boolean
Math Number String
Date
Function
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
1. 2. 3. 4. 5. 6.
Boolean
Math
Date
Number
Function
String
136
JavaScript
137
JavaScript
138
JavaScript
139
JavaScript
140
JavaScript
1. 2. 3. 4. 5. 6.
Boolean Date
Math
Number
Function
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
1. 2. 3. 4. 5. 6.
Boolean Date Function Math Number String Function Date Boolean
Math
Number
String
147
JavaScript
148
JavaScript
149
JavaScript
150
JavaScript
1. 2. 3. 4. 5. 6.
Boolean Date Function Math Number String Date Boolean
Math
Number
String Function
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 // creates a String object // returns the number 4 // returns the string "2 + 2 // returns the number 4 s2 = new String("2 + 2") eval(s1) eval(s2) eval(s2.valueOf());
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:

var MyArray=new Array() 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 . var MyArray=new Array() Myarray [0]
The starting index
157
JavaScript
Course map
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
Frame object (continued)
In Document Object Model Frames are instances of Window object
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
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.
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
203
JavaScript
Output: If the page is delivered by a Web Server.
204
JavaScript
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.
205
JavaScript
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
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
Cookies (continued)
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.
239
JavaScript
Cookies (continued)
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.
240
JavaScript
Questions
The name-value pair is the _____________ element in the Cookie
First
Second
Third
241
JavaScript
Answer
The name-value pair is the _____________ element in the Cookie
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 3rd 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) )
Set an expiry date
</script></head> <body> <form> <input type="button" value="Set a Cookie" onClick="setCookie(user',Paul Smith')"> </form> </body> </html>
What does the escape function do?
246
JavaScript
Escape () function
There's no escape!
Strictly speaking, we should be escaping our cookie values -- encoding nonalphanumeric 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> <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) )
The value stored is user=Paul Smith
248 JavaScript
</script> </head> <body> <form> <input type="button" value="Set a Cookie" onClick="setCookie(user',Paul Smith')"> </form> </body> </html>
Setting the cookie
Reading a cookie
<html> <head> <script language="JavaScript"> function readCookie() { var ca = document.cookie document.write(ca) }
Returns the cookie name value pair
</script> </head> <body> <form><input type="button" value="read" onClick="readCookie()"> </form> </body>

Value retrieved is
</html>
user=Paul Smith
249
JavaScript
Extracting only the value from the Cookie

<html><head> <script language="JavaScript"> 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 } </script> </head> <body> <form> <input type="button" value="read" onClick="readCookie('user')"> </form> </body></html> document.write( document.cookie.substring(c_start, c_end)) } } Displays the value: Paul Smith
250
JavaScript
Delete Cookies
<html> <head> <script language="JavaScript"> 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.
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 1: Introduction to JavaScript Module 2: JavaScript operators and expressions Module 3: Flow control and functions Module 4: Objects and arrays Module 5: Document object model Module 6: Cookies Module 7: Session outline
253
JavaScript
Session outline
What is ajax? Advantages and disadvantages Xmlhttprequest A first example
254
JavaScript
What is Ajax?
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
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
Technologies used for Ajax
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
257
JavaScript
What is Ajax?
258
JavaScript
Uses of Ajax
AJAX has many potential uses including: 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
259
JavaScript
Advantages of Ajax
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
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
261
JavaScript
Disadvantages of Ajax
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
262
JavaScript
XMLHttpRequest (XHR)
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): (Continued)
Different browsers use different methods to create the XMLHttpRequest object
IE uses an ActiveXObject Can use JavaScript try/catch to handle the creation of the XMLHttpRequest object
JavaScript
other browsers uses the built-in JavaScript object XMLHttpRequest
264
Example of HTML
<body> <script type="text/javascript"> // 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>
The whole JavaScript function

<body> <script type="text/javascript"> 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>
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
THANK YOU
271
JavaScript

HTML JavaScript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML JavaScript

Diunggah oleh

Hak Cipta:

Format Tersedia

IBM Global Business Services

HTML Forms & JavaScript

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

Developing HTML Forms

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

A form is defined with the <form> tag.

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

Form Controls (Contd.)

Copyright IBM Corporation 2009

IBM Global Business Services

Form Controls (Contd)

Attribute name name name

<textarea> row <input> type

Copyright IBM Corporation 2009

IBM Global Business Services

Form Controls using Attributes:

Copyright IBM Corporation 2009

IBM Global Business Services

Form Controls using Attributes:

Copyright IBM Corporation 2009

IBM Global Business Services

Form Controls using Attributes:

Copyright IBM Corporation 2009

IBM Global Business Services

Pre Selected Options:

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

Output of the Form

Copyright IBM Corporation 2009

IBM Global Business Services

Fieldset & Legend Tag

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services

IBM Global Business Services

<fieldset> tag is used to group the form elements

IBM Global Business Services

<legend> tag is used give a suitable label to the group.

IBM Global Business Services

Given a Label using legend tag

Created groups using fieldset tag

Copyright IBM Corporation 2009

IBM Global Business Services

Copyright IBM Corporation 2009

IBM Global Business Services