JavaScri pt FaaDoOEngineers.com FaaDoO FaaDoO Engin Engin eers.com eers.com
JavaScript
FaaDoOEngineers.comFaaDoOFaaDoOEngiEngineers.comneers.com
Objectives
• Introduction to JavaScript Introduction to JavaScript programming languageUsing Script tag Inserting Java Script into tagsLinking Java Script from separate files
• JavaScript expression and OperatorsDefining and naming variablesData Types ExpressionOperators – Arithmetic, String, Logical, Assignment, typeof
FaaDoOEngineers.com
Objectives (Contd.)
• Functions and Flow ControlFlow Control
• If…else• For loops• while loops• Break and continue statements
Using JavaScript functions
• Built in functions• User defined functions• Returning values from functions• Events, Event Handlers
FaaDoOEngineers.com
Objectives (Contd.)
• Objects and ArraysProperties and Methods
Browser Object Hierarchy
Addressing Objects
Creating Objects
Objects and Variables
External Objects
Security Implications
Arrays and Objects
FaaDoOEngineers.com
Objectives (Contd.)
• Document Object Model Introduction to DOMThe Navigator ObjectThe Window ObjectCommunicating between windowsWorking With Frames in the DOMThe Document objectThe Location & History Object Image ObjectLink Object
FaaDoOEngineers.com
Objectives (Contd.)
• Form Validation The Form Object ModelRecap of Form Elements
Form Tag Events
Controlling Submission
Forms as Navigation
List Events
Buttons
Text Processing
FaaDoOEngineers.com
Objectives (Contd.)
• Cookies Introduction to HTTP Cookies
Formatting Cookies
Persisting Cookies
Cookie Security
JavaScript & Cookies
Reading / Writing Cookies
Modifying and deleting Cookies
FaaDoOEngineers.com
Introduction To
JavaScriptFaaDoOEngineers.comFaaDoOFaaDoOEngiEngineers.comneers.com
Introduction to Java Scripts
• What is JavaScript???JavaScript is a scripting Language created by Netscape
What is a Scripting
Language???
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.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
Introduction to JavaScript (Contd.)
• 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???
Is
JavaScript
same as
Java???
FaaDoOEngineers.com
Types of JavaScript
• 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.
FaaDoOEngineers.com
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
FaaDoOEngineers.com
Client Side Java Scripting
• CSJS is composed of core JavaScript and many additional objects, such as the following:
document
form
frame
window
Navigator
History
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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
FaaDoOEngineers.com
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
FaaDoOEngineers.com
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
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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 JavaScript’s can be placed both in head and body section in a HTML document.
FaaDoOEngineers.com
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
FaaDoOEngineers.com
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.
<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.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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
FaaDoOEngineers.com
Test Your Understanding
<script></script> is embedded within
<head> </head>
<script></script is embedded
within <body></body>
<script></script> is embedded within <title></title>
Select the Correct Statement/s
FaaDoOEngineers.com
Test Your Understanding
<script></script> is embedded within
<head> </head>
<script></script is embedded
within <body></body>
<script></script> is embedded within <title></title>
Select the Correct Statement/s
FaaDoOEngineers.com
JavaScript Operators & Expressions
FaaDoOEngineers.comFaaDoOFaaDoOEngiEngineers.comneers.com
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.
FaaDoOEngineers.com
Rules of a Variable
• Variable DeclarationVariables can be declared using the var statement
var <variable name>=some valueVariables can also be created without using var statement
<variable name>=some value– Eg
var firstname=“Samuel”
OR
firstname=“Samuel”
FaaDoOEngineers.com
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??Loosely Typed??
FaaDoOEngineers.com
Data Type in JavaScript (contd.)
• JavaScript recognizes the following type of values:
ValuesValues
string
numbers
null
boolean9, 3.56 true or false
Samuel, ”Samuel J Palmisano”
A Special keyword which refers to nothing
FaaDoOEngineers.com
Data Type in JavaScript (contd.)
FaaDoOEngineers.com
JavaScript Operators
Arithmetic Assignment Conditional
StringComparison
Logical
OperatorsOperators
typeof
FaaDoOEngineers.com
JavaScript Operator (contd.)
Arithmetic
FaaDoOEngineers.com
JavaScript Operator (contd.)
Comparison
FaaDoOEngineers.com
JavaScript Operator (contd.)
Assignment
FaaDoOEngineers.com
JavaScript Operator (contd.)
Logical
FaaDoOEngineers.com
JavaScript Operator (contd.)
String
FaaDoOEngineers.com
JavaScript Operator (contd.)
Conditional
FaaDoOEngineers.com
JavaScript Operator (contd.)
typeof
FaaDoOEngineers.com
number
string
null
x=20
x=“Test”
typeof(x) evaluates to
Test Your Understanding
FaaDoOEngineers.com
number
string
null
x=20
x=“Test”
typeof(x) evaluates to
Test Your Understanding
FaaDoOEngineers.com
Flow Control &
FunctionsFaaDoOEngineers.comFaaDoOFaaDoOEngiEngineers.comneers.com
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.
FaaDoOEngineers.com
while statement
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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
FaaDoOEngineers.com
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
FaaDoOEngineers.com
For loop
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
Predefined functions in JavaScript
• DialogBoxes
alert( message)
Displays an alert box with a message defined by the string message.
Eg.
alert(“An Error Occurred!”)
FaaDoOEngineers.com
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?”)
FaaDoOEngineers.com
• 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”)
Predefined functions in JavaScript (contd.)
FaaDoOEngineers.com
• Conversion Functionseval(string)
Converts a string to an integer or a float value.
Eg
x=“20”
y=eval(x)+10
y contains the value 30
Predefined functions in JavaScript (contd.)
FaaDoOEngineers.com
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
Predefined functions in JavaScript (contd.)
FaaDoOEngineers.com
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
Predefined functions in JavaScript (contd.)
FaaDoOEngineers.com
parseFloat(string)
Converts a string to an float value .
Eg
x=77.5AB67
y=parseFloat(x)
y stores the value 77.5
Predefined functions in JavaScript (contd.)
FaaDoOEngineers.com
User Defined Functions
FaaDoOEngineers.com
User Defined Functions (contd.)
FaaDoOEngineers.com
User Defined Functions (contd.)
FaaDoOEngineers.com
Events
FaaDoOEngineers.com
Events (contd.)
FaaDoOEngineers.com
Event Handlers
FaaDoOEngineers.com
Common Event Handlers
FaaDoOEngineers.com
Common Event Handlers (contd.)
FaaDoOEngineers.com
• onLoad and onUnloadThe 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()”>
Common Event Handlers (contd.)
FaaDoOEngineers.com
Common Event Handlers (contd.)
• onFocus, onBlur and onChangeThe 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()">;
FaaDoOEngineers.com
Common Event Handlers (contd.)
• onSubmitThe 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()">
FaaDoOEngineers.com
Common Event Handlers (contd.)
• onMouseOver and onMouseOutonMouseOver 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>
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Example
FaaDoOEngineers.com
Example (contd.)
FaaDoOEngineers.com
Example (contd.)
FaaDoOEngineers.com
Example (contd.)
FaaDoOEngineers.com
Example (contd.)
FaaDoOEngineers.com
Example (contd.)
FaaDoOEngineers.com
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
}
FaaDoOEngineers.com
function Addition (x,y) {
var x1=parseInt(x)
var y1=parseInt(y)
var Ans=document.form1.text3.value
var temp=x1+y1
}
Example (contd.)
FaaDoOEngineers.com
Example (contd.)
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)”>
FaaDoOEngineers.com
Example (contd.)
function Addition (x,y) {var x1=parseInt(x)var y1=parseInt(y)var Ans=document.form1.text3.valuevar temp=x1+y1if(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=‘’
}}
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
A Complete Program
<html>
<head>
<script type="text/javascript">
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> FaaDoOEngineers.com
Output
FaaDoOEngineers.com
myfunction (txt) receives “ Good Morning!”
FaaDoOEngineers.com
myfunction (txt) receives “ Good Evening !”
FaaDoOEngineers.com
Objects &
Arrays
FaaDoOEngineers.comFaaDoOFaaDoOEngiEngineers.comneers.com
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.
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
JavaScript Objects (contd.)
FaaDoOEngineers.com
Instances of Computer Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
Boolean Math
Date
Function
Number
String
1.1. BooleanBoolean
2.2. DateDate
3.3. FunctionFunction
4.4. MathMath
5.5. NumberNumber
6.6. StringString
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
Boolean Math
Date
Function
Number
String
1.1. BooleanBoolean
2.2. DateDate
3.3. FunctionFunction
4.4. MathMath
5.5. NumberNumber
6.6. StringString
FaaDoOEngineers.com
• 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()
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
• 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)
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
• 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")
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
Boolean Math
Date
Function
Number
String
1.1. BooleanBoolean
2.2. DateDate
3.3. FunctionFunction
4.4. MathMath
5.5. NumberNumber
6.6. StringString
FaaDoOEngineers.com
• 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)
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
Commonly used methods of the Date Object
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
Boolean Math
Date
Function
Number
String
1.1. BooleanBoolean
2.2. DateDate
3.3. FunctionFunction
4.4. MathMath
5.5. NumberNumber
6.6. StringString
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
Boolean Math
Date
Function
Number
String
1.1. BooleanBoolean
2.2. DateDate
3.3. FunctionFunction
4.4. MathMath
5.5. NumberNumber
6.6. StringString
FaaDoOEngineers.com
• 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.
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
• Mathematical values provided by JavaScript
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
Methods of Math object
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
Boolean Math
Date
Function
Number
String
1.1. BooleanBoolean
2.2. DateDate
3.3. FunctionFunction
4.4. MathMath
5.5. NumberNumber
6.6. StringString
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
JavaScript Core Objects (contd.)
Boolean Math
Date
Function
Number
String
1.1. BooleanBoolean
2.2. DateDate
3.3. FunctionFunction
4.4. MathMath
5.5. NumberNumber
6.6. StringString
FaaDoOEngineers.com
• 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.
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
• 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
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
Common Methods of String Object
JavaScript Core Objects (contd.)
FaaDoOEngineers.com
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)
FaaDoOEngineers.com
Arrays (contd.)
• 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”)
FaaDoOEngineers.com
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 .
var MyArray=new Array()
Myarray [0] The starting indexThe starting index
FaaDoOEngineers.com
Document Object Model
FaaDoOEngineers.comFaaDoOFaaDoOEngiEngineers.comneers.com
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>
FaaDoOEngineers.com
Graphical representation of the DOM of the example tableGraphical representation of the DOM of the example table
Document Object Model (contd.)
FaaDoOEngineers.com
Document Object Model (contd.)
• 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.
FaaDoOEngineers.com
Document Object Model (contd.)
Document TreeDocument Tree
FaaDoOEngineers.com
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
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
Navigator Object Properties
• appCodeName – The name of the browser’s 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.
FaaDoOEngineers.com
Navigator Object Methods
• javaEnabled() – Returns a boolean telling if the browser has JavaScript enabled.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
Window Object Collections
• Frames[] – Returns all named frames in the window.
FaaDoOEngineers.com
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 browser’s statusbar should be visible.
• toolbar - sets whether or not the browser’s toolbar should be visible.
• closed – Returns all named frames in the window
• document
• history
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
Frame Object
• Frame object represents an HTML frame.
• For each instance of a <frame> tag in an HTML document, a Frame object is created.
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
In
Document Object Model
Frames are instances of Window
object
In
Document Object Model
Frames are instances of Window
object
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Frame Object (contd.)Frame Object (contd.)
FaaDoOEngineers.com
Test Your UnderstandingTest Your Understanding
FaaDoOEngineers.com
Test Your UnderstandingTest Your Understanding
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
• 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
FaaDoOEngineers.com
Location Object (contd.)
FaaDoOEngineers.com
Location Object (contd.)
FaaDoOEngineers.com
Location Object (contd.)
FaaDoOEngineers.com
Location Object (contd.)
FaaDoOEngineers.com
Location Object (contd.)
FaaDoOEngineers.com
Location Object (contd.)
FaaDoOEngineers.com
• Assign (url) – It loads a new document.
• Reload() – the current document.
• Replace() – Replaces the current document with a new one.
Location Object Methods
FaaDoOEngineers.com
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>
FaaDoOEngineers.com
Output:
If Accessed from the Local File System
FaaDoOEngineers.com
Output:
If the page is delivered by a Web Server.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
History Object (contd.)
FaaDoOEngineers.com
History Object (contd.)
FaaDoOEngineers.com
History Object (contd.)
FaaDoOEngineers.com
History Object (contd.)
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Form Object Model
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Form Object Model (contd.)
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Test Your Understanding
FaaDoOEngineers.com
Cookies
FaaDoOEngineers.comFaaDoOFaaDoOEngiEngineers.comneers.com
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 user’s 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.
FaaDoOEngineers.com
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 site’s visitors gave last time.
• Cookies can be created, read and erased by JavaScript. They are accessible through the property document.cookie
FaaDoOEngineers.com
• 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 (contd.)
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
Question
first
second
third
The name-value pair is the
_____________ element in the
Cookie
FaaDoOEngineers.com
Answer
first
second
third
The name-value pair is the
_____________ element in the
Cookie
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
Format of Cookie (contd.)
• document.cookie=<name of cookie>=<value of cookie>;<blank space>expires=<date in UTC format>;<blank space>path=<path location>
ExampleExample
document.cookie = ‘user=Paul; expires=Thu, 2 Aug 2008 20:47:11 UTC; path=/' document.cookie = ‘user=Paul; expires=Thu, 2 Aug 2008 20:47:11 UTC; path=/'
FaaDoOEngineers.com
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?
FaaDoOEngineers.com
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";
FaaDoOEngineers.com
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>
Setting the cookie
The value stored is
user=Paul Smith
FaaDoOEngineers.com
Reading a Cookie
<html>
<head>
<script language="JavaScript">
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
FaaDoOEngineers.com
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
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
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
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.
FaaDoOEngineers.com
Thank You For Your
Participation
FaaDoOEngineers.comFaaDoOFaaDoOEngiEngineers.comneers.com