Internet and Web Programming: Dr. Monoj Kumar Muchahari
Internet and Web Programming: Dr. Monoj Kumar Muchahari
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 1
Outline
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 2
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 3
JavaScript
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 4
First JavaScript
<!DOCTYPE html>
<head>
<meta c h a r s e t =” u t f =8”>
< t i t l e >J a v a S c r i p t H e l l o World </ t i t l e >
</head>
<body>
<h1> F i r s t J a v a S c r i p t </h1>
<hr>
<s c r i p t >
document . w r i t e ( ” H e l l o World from J a v a S c r i p t ! ” ) ;
</ s c r i p t >
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 5
Basic Definitions
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 6
Execution Order
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 7
Case Sensitivity
JavaScript is case-sensitive.
For example, if you use the identifiers result, Result, and RESULT in
your script, each identifier refers to a separate, distinct variable.
Case sensitivity applies to all aspects of the language: keywords, oper-
ators, variable names, event handlers, object properties, and so on.
All JavaScript keywords are lowercase, so when using a feature such as
an if statement, you need to make sure you type “if” and not “If” or
“IF.”
Because JavaScript uses the “camel-back” naming convention, many
methods and properties use mixed casing.
For example, the M in the name of the lastModified property of the
Document object (document.lastModified) must be uppercase; using a
lowercase m (document.lastmodified) will retrieve an undefined value.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 8
Whitespace
i s t h e same a s ;
x=x +1;
This suggests that the use of whitespace is more for the benefit of the
programmer than the interpreter.
Indeed, thoughtful use of whitespace to offset comments, loop con-
tents, and declarations results in more readable, and hopefully, under-
standable code.
As a rule, JavaScript ignores extra whitespace but there are exceptions.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 9
Whitespace (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 10
Semicolons
x = x + 1; ;; i f ( x > 10) { x = 0 ; } ; y = y = 1 ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 11
Semicolons (contd.)
x = x + 1
y = y = 1
is t r e a t e d as
x = x + 1;
y = y = 1;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 12
Blocks
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 13
Variables
A variable stores data. Every variable has a name, called its identifier.
Variables are declared in JavaScript using var, a keyword that allocates
storage space for new data and indicates to the interpreter that a new
identifier is in use.
Declaring a variable is simple:
var x ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 14
Variables (contd.)
You should not use variables without first declaring them, although it
is possible to do so in many cases.
In JavaScript, variables are either in the global scope or the local scope.
Variables declared within a function belong strictly to that function and
cannot be accessed outside of that scope.
Variables declared outside of a function are global to the application.
However, if a variable is used without a var declaration, even inside of
a function, that variable will belong to the global scope.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 15
Basic Data Types
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 16
Weak Typing
For example, given the following script that manipulates various string
and number values, we
document . write (4*3);
document . w r i t e (”< b r / >”);
document . w r i t e (”5” + 5 ) ;
document . w r i t e (”< b r / >”);
document . w r i t e (”5” = 3 ) ;
document . w r i t e (”< b r / >”);
document . w r i t e (5 * ” 5 ” ) ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 18
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 19
Arithmetic Operators
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 20
Assignment Operators
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 21
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 22
Statements
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 23
if Statements
However, if the value of variable x were something like zero, the ex-
pression would evaluate false, resulting in skipping the first alert and
immediately displaying the second one that the script has moved on.
Additional logic can be applied with an else statement.
When the condition of the first statement is not met, the code in the
else statement will be executed:
i f ( expression )
statement or block
else
statement or block
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 25
if Statements (contd.)
Given this syntax, we could expand the previous example as follows:
var x = 5;
i f ( x > 1)
{ a l e r t (” x i s g r e a t e r than 1 . ” ) ;
a l e r t ( ” Yes x r e a l l y i s g r e a t e r t h a n 1 . ” ) ;
}
else
{ a l e r t (” x i s l e s s than 1 . ” ) ;
a l e r t (” This example i s g e t t i n g o l d . ” ) ;
}
a l e r t ( ” moving on . . . ” ) ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 27
switch
You can use a switch statement rather than relying solely on if state-
ments to select a statement to execute from among many alternatives.
The basic syntax of the switch statement is to give an expression to
evaluate and several different statements to execute based on the value
of the expression.
The interpreter checks each case against the value of the expression
until a match is found.
If nothing matches, a default condition will be used.
switch ( expression )
{
case condition 1: statement ( s )
break ;
case condition 2: statement ( s )
break ;
...
case condition n : statement ( s )
break ;
d e f a u l t : statement ( s )
}
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 28
switch (contd.)
The break statements indicate to the interpreter the end of that par-
ticular case.
If they were omitted, the interpreter would continue executing each
statement in each of the following cases.
v a r y o u r G r a d e =’A ’ ;
switch ( yourGrade )
{
c a s e ’A ’ : a l e r t ( ” Good j o b . ” ) ;
break ;
c a s e ’B ’ : a l e r t ( ” P r e t t y good . ” ) ;
break ;
c a s e ’ C ’ : a l e r t ( ” You p a s s e d ! ” ) ;
break ;
c a s e ’D ’ : a l e r t ( ” Not s o good . ” ) ;
break ;
c a s e ’ F ’ : a l e r t ( ” Back t o t h e b o o k s . ” ) ;
break ;
d e f a u l t : a l e r t ( ” Grade E r r o r ! ” ) ;
}
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 29
while Loops
Loops are used to perform some action over and over again.
The most basic loop in JavaScript is the while loop, whose syntax is
shown here:
while ( expression )
statement or block of statements to execute
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 30
while Loops (contd.)
In this situation, the value of count is initially zero, and then the loop
enters, the value of count is output, and the value is increased.
The body of the loop repeats until count reaches 10, at which point
the conditional expression becomes false.
At this point, the loop exits and executes the statement following the
loop body.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 31
do-while Loops
The do-while loop is similar to the while loop except that the condition
check happens at the end of the loop.
This means that the loop will always be executed at least once (unless
a break is encountered first).
The basic syntax of the loop is as follows:
do
{
statement ( s ) ;
}
while ( expression );
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 32
for Loops
The for loop is the most compact form of looping and includes the loop
initialization, test statement, and iteration statement all in one line.
The basic syntax is shown here:
for ( i n i t i a l i z a t i o n ; test condition ; i t e r a t i o n statement )
loop statement or block
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 33
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 34
with Statement
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 35
with Statement (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 36
Object Iteration Using for...in
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 37
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 38
Functions
Functions can be used to create code fragments that can be used over
and over again.
When written properly, functions are abstract -they can be used in
many situations and are ideally completely self-contained, with data
passing in and out through well-defined interfaces.
The most common way to define a function in JavaScript is by using
the keyword function, followed by a unique function name, a list of
parameters (that might be empty), and a statement block surrounded
by curly braces.
The basic syntax is shown here:
f u n c t i o n functionname ( parameter= l i s t )
{
statements
}
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 39
Functions (contd.)
To invoke the function somewhere later in the script, you would use
this statement:
sayHello ();
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 40
Parameter Passing Basics
In this case, the function receives a value that determines which output
string to display. Calling the function with
s a y H e l l o (” George ” ) ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 41
Return Statements
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 42
Parameter Passing
Notice that the function fiddle() does not modify the value of the
variable str because, as a primitive type, it only receives a copy of str.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 43
Parameter Passing (contd.)
However, if composite types such as arrays and objects are used, they
are passed by reference rather than value.
f u n c t i o n f i d d l e ( arg1 )
{
arg1 [ 0 ] = ” Fiddled with ”;
document . w r i t e ( ” I n f u n c t i o n f i d d l e a r g 1 = ”+a r g 1+”<b r / >”);
}
var arr = [” Original ” , ” Original ” , ” Original ” ] ;
document . w r i t e ( ” B e f o r e f u n c t i o n c a l l a r r = ”+ a r r +”<b r / >”);
fiddle ( arr );
document . w r i t e ( ” A f t e r f u n c t i o n c a l l a r r =”+ a r r +”<b r / >”);
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 44
Functions as Objects
Because functions are first-class data types, the function can even be
assigned to another variable and used by that name instead:
var sayHelloAgain = sayHello ;
sayHelloAgain ( ) ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 45
Functions as Objects (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 46
Static Variables
You can create static variables that persist beyond function invocations
by adding an instance property for the defined function.
For example, consider the code here that defines a function doSum()
that adds two numbers and keeps a running sum:
f u n c t i o n doSum ( x , y )
{
// u p d a t e t h e r u n n i n g sum
doSum . t o t a l S u m = doSum . t o t a l S u m + x + y ;
r e t u r n ( doSum . t o t a l S u m ) ; // r e t u r n t h e c u r r e n t sum
}
// D e f i n e a s t a t i c v a r i a b l e t o h o l d t h e r u n n i n g sum o v e r a l l calls
doSum . t o t a l S u m = 0 ;
document . w r i t e ( ” F i r s t C a l l = ”+doSum(5 ,10)+” < b r / >”);
document . w r i t e ( ” Second C a l l = ”+doSum(5 ,10)+” < b r / >”);
document . w r i t e ( ” T h i r d C a l l = ”+doSum(100 ,100)+” < b r / >”);
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 47
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 48
Objects
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 49
User-defined objects
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 50
Native objects
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 51
Host objects
Host objects are those objects that are not specified as part of the
JavaScript language but that are supported by most host environments,
typically browsers.
Examples of browser-based host objects include window, the object
that enables the manipulation of browser windows and interaction with
the user, and navigator, the object that provides information about
client configuration.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 52
Document objects
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 53
Object Creation
We could have made the example more interesting by passing the con-
structor an argument specifying an initial value:
v a r c i t y = new S t r i n g s ( ” K o l k a t a ” ) ;
This places a reference to a new String object with the value “Kolkata”
in city.
We are not limited to declaring only native objects such as String and
Array; the creation of Object objects is also possible.
These generic objects can be used to create user-defined data types,
and they are, therefore, one of the most powerful tools available for
writing nontrivial JavaScript code.
As with any object in JavaScript, you can add properties to a user-
defined object dynamically.
v a r r o b o t = new O b j e c t ( ) ;
r o b o t . name = ” J a r v i s ” ;
robot . hasJetpack = true ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 55
Object Creation (contd.)
robot . attack = s t r i k e I n t r u d e r ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 56
Object Literals
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 57
Properties
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 58
Properties (contd.)
d e l e t e myString . simpleExample ;
a l e r t ( ” The v a l u e o f m y S t r i n g . s i m p l e E x a m p l e i s : ” +
myString . SimpleExample ) ; // u n d e f i n e d
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 59
Detecting if Properties Exist on an Object
// U s i n g ” t r u t h y ” t e s t
i f ( o b j . p r o p 1 ) {}
// U s i n g t y p e o f t e s t
i f ( t y p e o f o b j . p r o p 1 != ” u n d e f i n e d ” ) {}
// U s i n g i n o p e r a t o r
i f ( ” p r o p 1 ” i n o b j ) {}
// U s i n g h a s O w n P r o p e r t y
i f ( o b j . h a s O w n P r o p e r t y ( ” p r o p 1 ” ) ) {}
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 62
Methods
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 63
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 64
Array
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 65
Array (contd.)
The first two declarations should not be surprising, but the third looks
rather odd.
The given literal has four commas, but the values they separate seem
to be missing.
The interpreter treats this example as specifying five undefined values
and sets the array’s length to 5 to reflect this.
The values used to initialize arrays need not be literals. The following
example is perfectly legal and in fact very common:
var x = 2.0 , y = 3.5 , z = 1;
v a r myValues = [ x , y , z ] ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 66
Accessing Array Elements
Accessing the elements of an array is done using the array name with
square brackets and a value.
For example, we can define a three-element array like so:
v a r myArray = [ 1 , 5 1 , 6 8 ] ;
The nice thing about JavaScript arrays, unlike those in many other pro-
gramming languages, is that you don’t have to allocate more memory
explicitly as the size of the array grows.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 67
Accessing Array Elements (contd.)
You do not have to set array values contiguously (one after the other),
so below code is valid as well.
myArray [ 1 1 ] = 2 8 ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 68
Removing Array Elements
The length property retrieves the index of the next available (unfilled)
position at the end of the array.
Even if some lower indices are unused, length gives the index of the
first available slot after the last element.
v a r myArray = new A r r a y ( ) ;
myArray [ 1 0 0 0 ] = ” T h i s i s t h e o n l y e l e m e n t i n t h e a r r a y ” ;
a l e r t ( myArray . l e n g t h ) ;
Even though myArray has only one element at index 1000, as we see
by the alert dialog myArray.length, the next available slot is at the end
of the array, 1001.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 69
Removing Array Elements (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 70
Removing Array Elements (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 71
Removing Array Elements (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 72
concat() Method
The concat() method returns the array resulting from appending its
arguments to the array on which it was invoked. Given the script:
v a r myArray = [ ” r e d ” , ” g r e e n ” , ” b l u e ” ] ;
a l e r t ( myArray . c o n c a t ( ” c y a n ” , ” y e l l o w ” ) ) ;
// r e d , g r e e n , b l u e , cyan , y e l l o w
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 73
join() Method
One important thing to note is that the join() method will not destroy
the array as a side-effect of returning the joined string of its elements.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 74
reverse() Method
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 75
slice() Method
where the method returns an array containing the elements from index
start up to but not including index end.
If only one argument is given, the method returns the array composed
of all elements from that index to the end of the array.
Note that start and end are allowed to take on negative values.
When negative, these values are interpreted as an offset from the end
of the array.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 76
slice() Method (contd.)
For example, calling slice(-2) returns an array containing the last two
elements of the array.
v a r myArray = [ 1 , 2 , 3 , 4, 5];
myArray . s l i c e ( 2 ) ; // returns [3 , 4 , 5]
myArray . s l i c e ( 1 , 3 ) ; // returns [2 , 3]
myArray . s l i c e ( = 3 ) ; // returns [3 , 4 , 5]
myArray . s l i c e ( = 3 , = 1); // returns [3 , 4]
myArray . s l i c e ( = 4 , 3 ) ; // returns [2 , 3]
myArray . s l i c e ( 3 , 1 ) ; // returns []
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 77
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 78
Event Handling
Events are not limited to basic user actions associated with the docu-
ment, such as click and mouseover.
For example, browsers support events such as resize, load, and unload,
which are related to window activity such as resizing the window or
loading or unloading a document.
Browsers provide detailed information about the event occurring through
an Event object that is made available to handlers.
The Event object contains contextual information about the event, such
as the exact x and y screen coordinates where some event occurred,
whether modifiers such as the shift key were depressed at the time of
the event, and so on.
Events that are the result of user actions typically have a target -the
HTML element at which the event is occurring.
For example, a click event’s target would be the element, such as
< img > or < p >, that the user clicked on.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 80
Event Handling (contd.)
Event handlers are therefore bound to particular DOM elements.
When the event that a handler handles occurs on the element to which
it is bound, the handler is executed.
Handlers can be bound to elements in numerous ways, including:
Using traditional HTML event handler attributes directly in markup.
<p o n c l i c k =”m y F u n c t i o n”> C l i c k me</p>
Just as there are many ways to bind events to elements, there are
several ways events are triggered:
Implicitly by the browser in response to some user-or JavaScript-initiated
action
Explicitly by JavaScript using DOM1 methods. For example:
document . f o r m s [ 0 ] . s u b m i t ( ) ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 82
Event Binding with HTML Attributes
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 83
Event Binding with HTML Attributes (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 84
Event Binding with HTML Attributes (contd.)
s i z e =”40” i d =” f o n c c h a n g e ”
o n c h a n g e=” a l e r t ( ’ Changed ! ’ ) ; ” >
</ l i >
<l i >
< l a b e l f o r =” f o n d b l c l i c k ”> o n d b l c l i c k : </ l a b e l >
<i n p u t t y p e =”b u t t o n ” v a l u e =”D o u b l e c l i c k me” i d =” f o n d b l c l i c k ”
o n d b l c l i c k =” a l e r t ( ’ B u t t o n d o u b l e C l i c k e d ! ’ ) ; ” >
</ l i >
<l i >
< l a b e l f o r =” f o n f o c u s ”> o n f o c u s : </ l a b e l >
<i n p u t t y p e =” t e x t ” v a l u e =” c l i c k i n t o f i e l d ”
i d =” f o n f o c u s ” o n f o c u s =” a l e r t ( ’ G a i n e d f o c u s ’ ) ; ” >
</ l i >
<l i >
< l a b e l f o r =”f o n k e y d o w n”>onkeydown : </ l a b e l >
<i n p u t t y p e =” t e x t ” v a l u e =” P r e s s k e y and r e l e a s e ” s i z e =”40”
i d =”f o n k e y d o w n ” onkeydown=” a l e r t ( ’ Key down ! ’ ) ; ” >
</ l i >
<l i >
< l a b e l f o r =” f o n k e y p r e s s ”> o n k e y p r e s s : </ l a b e l >
<i n p u t t y p e =” t e x t ” v a l u e =”Type h e r e ” s i z e =”40” i d =” f o n k e y p r e s s ”
o n k e y p r e s s =” a l e r t ( ’ Key p r s s e d ’ ) ; ” >
</ l i >
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 86
Event Binding with HTML Attributes (contd.)
<l i >
< l a b e l f o r =”f o n k e y u p ”>o n k e y u p : </ l a b e l >
<i n p u t t y p e =” t e x t ” v a l u e =” P r e s s k e y and r e l e a s e ” s i z e =”40”
i d =”f o n k e y u p ” o n k e y u p=” a l e r t ( ’ Key up ! ’ ) ; ” >
</ l i >
< l i >o n l o a d : An a l e r t was shown when t h e document l o a d e d </ l i >
<l i >
< l a b e l f o r =”fonmousedown”>onmousedown : </ l a b e l >
<i n p u t t y p e =”b u t t o n ” v a l u e =” C l i c k and h o l d ” i d =”fonmousedown ”
onmousedown=” a l e r t ( ’ Mouse down ! ’ ) ; ” >
</ l i >
<l i >
onmousemove : Move mouse o v e r t h i s <a h r e f =”#”
onmousemove=” a l e r t ( ’ Mouse moved ! ’ ) ; ” > l i n k </a>
</ l i >
<l i >
onmouseout : P o s i t i o n mouse <a h r e f =”#”
onmouseout=” a l e r t ( ’ Mouse o u t ! ’ ) ; ” > h e r e </a> and t h e n h e r e
</ l i >
<l i >
< l a b e l f o r =”fonmouseup”>onmouseup : </ l a b e l >
<i n p u t t y p e =”b u t t o n ” v a l u e =” C l i c k and r e l e a s e ”
i d =”fonmouseup ” onmouseup=” a l e r t ( ’ Mouse up ! ’ ) ; ” >
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 87
Event Binding with HTML Attributes (contd.)
</ l i >
<l i >
< l a b e l f o r =” f o n r e s e t ”> o n r e s e t : </ l a b e l >
<i n p u t t y p e =” r e s e t ” v a l u e =” R e s e t demo” i d =” f o n r e s e t ”>
</ l i >
<l i >
< l a b e l f o r =” f o n s e l e c t ”> o n s e l e c t : </ l a b e l >
<i n p u t t y p e =” t e x t ” v a l u e =” S e l e c t t h i s t e x t ” s i z e =”40”
i d =” f o n s e l e c t ” o n s e l e c t =” a l e r t ( ’ S e l e c t e d ! ’ ) ; ” >
</ l i >
<l i >
< l a b e l f o r =” f o n s u b m i t ”>o n s u b m i t : </ l a b e l >
<i n p u t t y p e =”s u b m i t ” v a l u e =”s u b m i t ” i d =” f o n s u b m i t ”>
</ l i >
< l i >o n u n l o a d : Try t o l e a v e document by f o l l o w i n g t h i s
<a h r e f =” J a v a S c r i p t T e s t i n g . h t m l”>L i n k </a></ l i >
</u l >
</form>
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 88
Binding Event Handler Attributes with JavaScript
While you can bind event handlers to parts of a document using event
attributes in markup, it is generally much more appropriate to bind
them within JavaScript instead, especially if you wish to add or remove
handlers dynamically.
Further, doing things in code tends to improve the separation between
the structure of the document and its logic and presentation.
To use JavaScript for this task, it is important to understand that
event handlers are accessed as methods of the objects to which they
are bound.
<p i d =”pDemo”> C l i c k Me</p>
< s c r i p t t y p e =” t e x t / j a v a s c r i p t ”>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 89
Binding Event Handler Attributes with JavaScript (contd.)
< s c r i p t t y p e =” t e x t / j a v a s c r i p t ”>
function showAlert ()
{
a l e r t ( ” Mouse Over Me ” ) ;
}
document . g e t E l e m e n t B y I d ( ” pDemoOver ” ) . o n m o u s e o v e r=s h o w A l e r t ;
</ s c r i p t >
Regardless of how the function used is defined, you must make sure to
register the event handler after the HTML element has been added to
the DOM tree; otherwise, you’ll cause a runtime error by trying to set
a property (an event handler) of a nonexistent object.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 90
Return Values
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 91
Return Values (contd.)
To cancel the default behavior of an event, simply return false from its
event handler. For example, to kill a link load, we return false:
<a h r e f =” h t t p s : / /www . g o o g l e . com/” o n c l i c k =” r e t u r n f a l s e ;” >
To g o o g l e </a>
In this example, with JavaScript on, you never leave the page. Of
course, more likely you aren’t going to do this, but you might imagine
something like a confirmation:
<a h r e f =” h t t p s : / /www . g o o g l e . com/”
o n c l i c k =” r e t u r n c o n f i r m ( ’ Do you want t o v i s i t G o og l e ’ ) ; ” >
To g o o g l e </a>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 92
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 93
Form Handling
One of the most common uses of JavaScript is for checking the con-
tents of forms before sending them to server-side programs. Commonly
known as form validation.
It can be quite annoying to fill out a form on a Web site only to have
the page returned with complaints about malformed data after a round
trip to the server.
With JavaScript, we can cut down on the frustration of waiting for
failure and improve the usability of Web forms by checking the data
before it is submitted to the server for processing.
There are two primary approaches we can take to validate form entries
using JavaScript.
The first involves checking each field as it is filled in, either upon blur
or using a keyboard mask if appropriate.
The second approach is to check all the fields of a form when a sub-
mission is triggered.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 94
Form Basics
</form>
Since standard DOM methods can be employed, we can use the com-
mon getElementById() method:
a l e r t ( document . g e t E l e m e n t B y I d ( ” c u s t o m e r f o r m ” ) . method ) ;
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 97
Accessing Forms and Fields (contd.)
Retrieving the fields of the forms is easily performed using the getEle-
mentById() method, assuming a unique id value.
<!DOCTYPE html>
<html>
<head>
< t i t l e >Form O b j e c t Test </ t i t l e >
</head>
<body>
<h2 a l i g n =” c e n t e r ”>T e s t Form</h2>
<form a c t i o n =” J S A c c e s s i n g . h t m l ”
method=” p o s t ” name=” t e s t f o r m ” i d =” t e s t f o r m ”
o n r e s e t =” r e t u r n c o n f i r m ( ’ Are you s u r e ? ’ ) ; ”
o n s u b m i t=” a l e r t ( ’ Not r e a l l y s e n d i n g da ta ’ ) ; r e t u r n f a l s e ;” >
< l a b e l >Name :
<i n p u t t y p e =” t e x t ” i d =” f i e l d 1 ” name=” f i e l d 1 ” s i z e =”20”
v a l u e =”J o e Smith ” /></ l a b e l >
<b r />
< l a b e l >P a s s w o r d :
<i n p u t t y p e =”p a s s w o r d ” i d =” f i e l d 2 ” name=” f i e l d 2 ”
s i z e =”8” m a x l e n g t h =”8” /></ l a b e l >
<b r />
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 98
Accessing Forms and Fields (contd.)
<i n p u t t y p e =” r e s e t ” v a l u e =” r e s e t ”/>
<i n p u t t y p e =”s u b m i t ” v a l u e =”s u b m i t ” />
<i n p u t t y p e =”b u t t o n ” v a l u e =”Do r e s e t ”
o n c l i c k =”document . t e s t f o r m . r e s e t ( ) ; ” />
<i n p u t t y p e =”b u t t o n ” v a l u e =”Do s u b m i t ”
o n c l i c k =”document . t e s t f o r m . s u b m i t ( ) ; ” />
</form>
<h r />
<h2 a l i g n =” c e n t e r ”>Form O b j e c t P r o p e r t i e s </h2>
< s c r i p t t y p e =” t e x t / j a v a s c r i p t ”>
<!= =
// Change document . t e s t f o r m t o document . f o r m s [ 0 ] and you w i l l
// g e t t h e same r e s u l t .
w i t h ( document . t e s t f o r m )
{
document . w r i t e ( ” a c t i o n : ”+ a c t i o n +”<b r / >”);
document . w r i t e ( ” e n c o d i n g : ”+ e n c o d i n g+”<b r / >”);
document . w r i t e ( ” l e n g t h : ”+ l e n g t h +”<b r / >”);
document . w r i t e ( ” method : ”+method+”<b r / >”);
document . w r i t e ( ” name : ”+name+”<b r / >”);
document . w r i t e ( ” a c t i o n : ”+ a c t i o n +”<b r / >”);
document . w r i t e ( ” t a r g e t : ”+ t a r g e t +”<b r / >”);
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 99
Accessing Forms and Fields (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 100
Form Validation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 101
Form Validation (contd.)
<html>
<head>
< t i t l e >O v e r l y S i m p l i s t i c Form V a l i d a t i o n </ t i t l e >
< s c r i p t t y p e =” t e x t / j a v a s c r i p t ”>
function validate ()
{
i f ( document . myform . u s e r n a m e . v a l u e = = ” ” )
{
a l e r t ( ” Username i s r e q u i r e d ” ) ;
return false ;
}
return true ;
}
</ s c r i p t >
</head>
<body><form name=”myform ” i d =”myform ” method=” g e t ”
a c t i o n =” J S A c c e s s i n g . h t m l ” o n s u b m i t=” r e t u r n v a l i d a t e ( ) ; ” >
Username :
<i n p u t t y p e =” t e x t ” name=”u s e r n a m e ” i d =”u s e r n a m e ” s i z e =”30” />
<i n p u t t y p e =”s u b m i t ” v a l u e =”s u b m i t ” />
</form>
</body></html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 102
Form Validation
<!DOCTYPE html>
<html>
<head>
<meta c h a r s e t =” u t f =8”>
< t i t l e >B e t t e r Form V a l i d a t i o n </ t i t l e >
<s c r i p t >
f u n c t i o n isEmpty ( s ) {
v a r v a l i d = /\S+/. t e s t ( s ) ;
return ! valid ;
}
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 103
Form Validation (contd.)
function validate ()
{
i f ( i s E m p t y ( document . myform . u s e r n a m e . v a l u e ) )
{
a l e r t ( ” E r r o r : Username i s r e q u i r e d . ” ) ;
document . myform . u s e r n a m e . f o c u s ( ) ;
return false ;
}
i f ( i s E m p t y ( document . myform . u s e r p a s s . v a l u e ) )
{
a l e r t ( ” E r r o r : Non=empty p a s s w o r d r e q u i r e d . ” ) ;
document . myform . u s e r p a s s . f o c u s ( ) ;
return false ;
}
return true ;
}
window . o n l o a d = f u n c t i o n ( ) {
document . g e t E l e m e n t B y I d ( ” myform ” ) . o n s u b m i t = v a l i d a t e ;
};
</ s c r i p t >
</head>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 104
Form Validation (contd.)
<body>
<form name=”myform ” i d =”myform ” method=” g e t ”
a c t i o n =” h t t p : / /www . j a v a s c r i p t r e f . com”>
Username :
<i n p u t t y p e =” t e x t ” name=”u s e r n a m e ” i d =”u s e r n a m e ”
s i z e =”30” m a x l e n g t h =”60”>
<br>
Password :
<i n p u t t y p e =”p a s s w o r d ” name=” u s e r p a s s ” i d =” u s e r p a s s ”
s i z e =”8” m a x l e n g t h =”8”>
<br>
<i n p u t t y p e =”s u b m i t ” v a l u e =”Submit”>
</form>
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 105
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 106
JSON
For many years, XML was the standard format for structured data.
It was easy to use and similar to HTML with tags that contained data.
Then, JavaScript Object Notation (JSON) was introduced at the be-
ginning of the millennium.
What makes JSON an interesting option is that it’s completely platform
and language independent.
You can use JSON in older systems such as Classic ASP and Java or
newer languages such as C#, Ruby, and PHP.
The data content is text-based, so it’s easily read across all platforms,
and even humans can read and understand a JSON file’s content.
XML is still used in some applications, but JSON is quickly overtaking
the older format as the standard API communication tool.
JSON also works well with Ajax and jQuery, so you can send and receive
asynchronous communications.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 107
JSON (contd.)
JSON also requires proper structure, but it’s much easier to implement
and create.
JSON is also universal, so you can use JSON with any language or
platform.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 109
JSON used for
Asynchronous web calls only send the form portion of a web page back
to the web server.
The footer, header, sidebars and any other static components on the
page aren’t sent to the server.
The result? A faster response and users don’t have to wait for a re-
sponse.
It only needs to process the data, which is usually processed on a
database.
JSON is used to pass data back and forth in a web application.
JSON is also used in APIs.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 111
Basic Syntax
You must always specify the variable name when you work with JSON
data even if it’s the same variable name throughout the entire file.
After each variable name is a colon. This is also standard and must be
used to separate the variable names from the values.
Finally, notice the comma in between each pair. A comma separates
the variable-value pairs.
Whether it’s 2 or 1000 records, each record must be separated with a
comma.
A JSON variable-value pair with integers or decimal numbers don’t use
quotes around the values.
” AccountNumber ” : 1 0 0 1 , ” AccountNumber ” : 1 0 0 2 , ” AccountNumber ” : 1 0 0 3
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 112
Basic Syntax (contd.)
You can also use true and false values and even arrays.
” ActiveAccount ”: true , ” ActiveAccount ”: f a l s e , ” ActiveAccount ”: true
You can also have multiple arrays. For instance, you probably have
more than one phone number for more than one customer.
” PhoneNumbers ”:[”555 = 555 = 5555” , ”666 = 666 = 6666” , ”777 = 777 = 7777”] ,
” PhoneNumbers ”:[”444 = 444 = 4444” , ”333 = 333 = 3333” , ”222 = 222 = 2222”]
One last type of value is null. Notice that the last pair has no value.
” F i r s t N a m e ” : ” John ” , ” F i r s t N a m e ” : ” J a n e ” , ” F i r s t N a m e ” :
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 113
JSON Object
JSON uses the open and closing brackets, but no object is assigned.
That’s because we don’t need an object named yet.
We let the processing language determine the object name.
Remember that JSON only cares about data and formatting data.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 114
JSON Object (contd.)
It does not care about the processing language whether it’s C#, Ruby,
PHP, or Java.
{
” F i r s t N a m e ” : ” John ” , ” LastName ” : ” Smith ” , ” PhoneNumbers ” :
{ ” t y p e ” : ”Home ” , ” number ” : ”333 = 333 = 3333”} ,
We have the opening and closing brackets for the main object, and
then we see another opening and closing brackets.
These secondary brackets also indicate an object, but it’s an object
within an object.
Notice that the object is set after the “PhoneNumbers” variable.
When you use these structures, the JSON engine then knows that the
variable contains an object.
The object is referred to with the variable name, so this object is re-
ferred to as the PhoneNumber object.
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 115
HTML Example
JSON is written in the script tags. You can also create external JSON
files.
JSON files have the .json file extension.
<html><body>
<h2>JSON U s e r A cc o un t Example </h2>
<p i d =”m y u s e r”></p>
<s c r i p t >
var u s e r = ’{
” F i r s t N a m e ” : ” John ” , ” LastName ” : ” Smith ” , ” PhoneNumbers ” :
{
” t y p e ” : ”Home ” , ” number ” : ”333 = 333 = 3333”
},
{
” t y p e ” : ” C e l l ” , ” number ” : ”444 = 444 = 4444”
}
} ’;
v a r j o b j e c t = JSON . p a r s e ( u s e r ) ;
document . g e t E l e m e n t B y I d ( ” m y u s e r ” ) . innterHTML = j o b j e c t . F i r s t N a m e
</ s c r i p t >
</body></html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 116
HTML Example (contd.)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 118
Using JSON Arrays in JavaScript
<html>
<body>
<h2>JSON U s e r A cc o un t Example </h2>
<p i d =”m y u s e r”></p>
<s c r i p t >
var u s e r = ’{
” FirstName ” : ” Joe ” ,
” LastName ” : ” Smith ” ,
” CustomerOrders ” : [
{ ” t y p e ” : ” Red ” , ” O r d e r I d ” : 100 } ,
{ ” t y p e ” : ” B l u e ” , ” O r d e r I d ” : 101 } ,
{ ” t y p e ” : ” G r e e n ” , ” O r d e r I d ” : 102 } ]
} ’;
v a r j o b j e c t = JSON . p a r s e ( u s e r ) ;
var f i r s t n a m e = j o b j e c t . FirstName ;
v a r l a s t n a m e = j o b j e c t . LastName ;
var f i r s t o r d e r = j o b j e c t . CustomerOrders [ 0 ] . OrderId ;
document . g e t E l e m e n t B y I d ( ” m y u s e r ” ) . innerHTML = f i r s t n a m e +
”<br >” + l a s t n a m e + ”<br >” + f i r s t o r d e r ;
</ s c r i p t >
</body>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 119
JSON Data Types
The following data types are the basic, primitive types available in
JSON.
Numbers - decimal and integers
{ ” L a s t O r d e r I d ” : 100 }
Strings - the text you see with any character, number or special character
{ ” F i r s t N a m e ” : ” John ” }
Booleans - these values equal true or false. True and false are translated
to one and zero respectively
{ ” L a s t O r d e r I d ” : 100 , ” OrderShipped ” : false }
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 120
JSON Data Types (contd.)
” CustomerOrders ” : {
{ ” type ” : ” Red ” , ” O r d e r I d ” : 100 } ,
{ ” type ” : ” B l u e ” , ” O r d e r I d ” : 101 } ,
{ ” type ” : ” G r e e n ” , ” O r d e r I d ” : 102 }
}
}
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 121
External JSON
[
{
” ID ” : 1 ,
”Name ” : ” M e s s i ” ,
” Age ” : 3 5
},
{
” ID ” : 2 ,
”Name ” : ” Neymar ” ,
” Age ” : 3 5
}
]
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 122
External JSON (contd.)
<h t m l l a n g =”en”>
<body>
<h1>Show d a t a from e x t e r n a l JSON f i l e </h1>
<p i d =”pData”></p>
<s c r i p t >
f e t c h (” j E x t e r n a l . j s o n ”)
. then ( f u n c t i o n ( r e s p o n s e ){
return response . json ( ) ;
})
. then ( f u n c t i o n ( j E x t e r n a l ){
f o r ( v a r i =0; i <j E x t e r n a l . l e n g t h ; i ++){
document . g e t E l e m e n t B y I d ( ” pData ” ) . innerHTML +=
j E x t e r n a l [ i ] . ID + ” = ” + j E x t e r n a l [ i ] . Name +
” = ” + j E x t e r n a l [ i ] . Age + ”< b r />”
}
})
</ s c r i p t >
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 123
Table of Contents
1 Introduction
2 Operators
3 Statements
4 Object-Related Statements
5 Functions
6 Objects
7 Array
Manipulating Arrays
8 Event Handling
9 Form Handling
10 JSON
11 jQuery
Elements Selection
Effects & Animation
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 124
jQuery
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 125
Install jQuery
If you do not want to download jQuery, then you can include it in html
document as following:
<head>
< s c r i p t s r c =” h t t p : / / c o d e . j q u e r y . com/ j q u e r y = l a t e s t . j s ”>
</ s c r i p t >
</head>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 126
First jQuery
<html>
<head>
< t i t l e >j Q u e r y H e l l o World </ t i t l e >
< s c r i p t s r c =” h t t p : / / c o d e . j q u e r y . com/ j q u e r y = l a t e s t . j s ”></ s c r i p t >
< s c r i p t t y p e =” t e x t / j a v a s c r i p t ”>
<!== r u n t h e f u n c t i o n a u t o m a t i c a l l y when web page i s c o m p l e t e l y
l o a d e d .==>
$ ( document ) . r e a d y ( f u n c t i o n ( ) {
$ (”# d i v I D ” ) . h t m l (”<h1>H e l l o World !</h1 >”);
});
</ s c r i p t >
</head>
<body>
<d i v i d =” d i v I D ”> </ d i v >
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 127
First jQuery (contd.)
$ (” tag ” ) . html ( )
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 128
Set CSS Style
$ (” s e l e c t o r ” ) . c s s (” s t y l e ”)
All HTML elements based on their id, classes, types (text, radio etc.),
attributes (id, title, src etc), tag name (div, p, form, table, tr, th, td
etc.) etc are jQuery selectors.
$ (” s e l e c t o r ” ) . c s s (” s t y l e ”)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 129
Set CSS by ID
$ (”# i d ” ) . c s s ( )
If we want to access any element by its “id”, then we have to use “#”
to select that element. css( ) method can set or change any property.
<html>
<head>
< s c r i p t s r c =” j q u e r y = 3 . 6 . 0 . j s ”></ s c r i p t >
< s c r i p t t y p e =” t e x t / J a v a S c r i p t ”>
function changeColor ( ) {
$ (”# d i v T e s t ” ) . c s s ( ” b a c k g r o u n d = c o l o r ” , ” r e d ” ) ;
}
</ s c r i p t >
</head>
<body>
<d i v i d =” d i v T e s t ” o n c l i c k =” c h a n g e C o l o r ( ) ”
s t y l e =” c u r s o r : p o i n t e r ; w i d t h : 300 px ; H e i g h t : 2 0 px ;
b a c k g r o u n d = c o l o r : #c c c c c c ;” >
C l i c k h e r e to change background c o l o r .
</ d i v >
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 130
Set CSS by Tag
$ (”# t a g ” ) . c s s ( )
” $ ( ” p : nth = c h i l d ( n ) ” ) . c s s ( ) ”
a c c e s s e s t h e ”n” tag , and s e t s a c s s s t y l e .
” $ ( ” p : nth = c h i l d ( 1 ) ” ) . c s s ( ) ”
a c c e s s e s t h e f i r s t tag , and s e t s a c s s s t y l e .
” $ ( ” p : nth = c h i l d ( 4 ) ” ) . c s s ( ) ”
a c c e s s e s t h e f o u r t h tag , and s e t s a c s s s t y l e .
<body>
<h1>S e l e c t i n g t h e f i r s t and l a s t tag </h1>
<d i v >
<p>I l o v e j Q u e r y 1 tim e </p>
<p>I l o v e j Q u e r y 2 tim e </p>
<p>I l o v e j Q u e r y 3 tim e </p>
<p>I l o v e j Q u e r y 4 tim e </p>
</ d i v >
<i n p u t t y p e =”b u t t o n ” v a l u e =” C l i c k Me” o n c l i c k =”s e t C S S ()” >
</ i n p u t >
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 134
$(document).ready( )
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 135
show(duration, callback)
</head>
<body>
<i n p u t t y p e =”b u t t o n ” i d =”btnShow ” v a l u e =”Show Me” />
<p s t y l e =” d i s p l a y : none”> T h i s i s a p a r a g r a p h </p>
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 137
hide(duration, callback)
<body>
<i n p u t t y p e =”b u t t o n ” i d =”b t n H i d e ” v a l u e =”H i d e Me” />
<p>T h i s i s a p a r a g r a p h </p>
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 139
fadeOut(duration, callback)
<body>
<d i v >
<i n p u t t y p e =”b u t t o n ” o n c l i c k =”f a d e O u t D i v ( ) ; ” v a l u e =”FadeOut D i v”>
<d i v >
<d i v i d =”divMsg ”
s t y l e =”b a c k g r o u n d = c o l o r : maroon ; c o l o r : w h i t e ; w i d t h :
200 px ; h e i g h t : 200 px ;” > I am d i v </d i v >
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 141
fadeIn(duration, callback)
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 143
animate( )
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 144
animate( ) (contd.)
<h t m l l a n g =”en”>
<head>
< t i t l e >Document</ t i t l e >
< s c r i p t s r c =” j q u e r y = 3 . 6 . 0 . j s ”></ s c r i p t >
< s c r i p t t y p e =” t e x t / j a v a s c r i p t ”>
f u n c t i o n animateDiv () {
$ (”# divMsg ” ) . a n i m a t e ( {
w i d t h : ’ 3 5 0 px ’ , h e i g h t : ’ 3 5 0 px ’ , o p a c i t y : ’ 0 . 5 ’ ,
f o n t S i z e : ’ 3 em ’ , l e f t : ’ 4 5 0 px ’ } ,
’ slow ’ , f u n c t i o n ( ){
a l e r t ( ” The a n i m a t e method i s c o m p l e t e d ! ” ) }
); }
</ s c r i p t >
</head>
<body>
<d i v ><i n p u t t y p e =”b u t t o n ” o n c l i c k =”a n i m a t e D i v ( ) ; ”
v a l u e =”a n i m a t e t o D i v”><d i v ><b r />
<d i v i d =”divMsg ”
s t y l e =”b a c k g r o u n d : g r e e n ; h e i g h t : 200 px ; w i d t h : 200 px ;
p o s i t i o n : a b s o l u t e ;” > I am d i v w i t h some custom a n i m a t i o n </d i v >
</body>
</html>
*JavaScript - The Complete Reference (Thomas A. Powell) Dr. Monoj Kumar Muchahari 145