JAVA SCRIPT

1
Introduction to Scripting

4
 Introduction
3
 Introduction
4
 Introduction
5
 Introduction
6
 Introduction
7
 Introduction
8
 Introduction
9
 Introduction
10

 It is a scripting language used to enhance the

functionality and appearance of web pages.
 First Example:
 Display Options
11
 Introduction
12

 <script> : To indicate to the browser that the text

which follows is part of a script
 document: Object which represents the HTML5
document the browser is currently displaying
 writeln: Method to write a line of HTML5 markup
in the HTML5 document
 Every statement in script ends with a semicolon
(also known as the statement terminator)
 Introduction
13

Display using alert box:

 window: The script uses the browser’s window

object to display an alert dialog
 alert: To indicate that the browser is presenting a
message to the user
Variables and Data Types

15
 Variables
15
 Variables
16
 Variables
17

 JavaScript variables are containers for storing data

values
 Rules for defining variable names:
1.Names can contain letters, digits, underscores,
and dollar signs.
2.Names must begin with a letter,$ and _
3.Names are case sensitive
4.Keywords cannot be used as variables
 Variables
18
 JS Methods-Sample
19

 Prompt: window object’s method, which displays the

dialog. The argument to prompt specifies a message to
user.
 parseInt: Function converts its string to an integer
 onLoad(): Event that occurs when an object has been
loaded.
 alert()
 document.writeln(“Welcome ‘quotes’ ”)
 window.alert()
 window.prompt()
 JS Methods-Sample
20

 Date(): Create a new object with current date and time.

 getHours(): Method returns the hour (from 0 to 23) of
the specified date and time.
 getElementById(): Method that identifies the HTML
element with specified id
 .innerHTML: place the specified string value into the
position denoted by getElementById() method
 JS-Modes
21
 JS-Modes
22
 JS-Modes
23
 JS-Modes
24
Operators

20
 Operators
26
 Operators
27

 Arithmetic operators:
Arithmetic operators are used to perform arithmetic
on numbers
 Operators-Arithmetic operators
28
 Operators
29

 Comparison operators: Used in logical statements to

determine equality or difference between variables
 Operators
30

 Logical operators: Logical operators are used to

determine the logic between variables or values.

 String Operator: The + operator can also be used to

add (concatenate) strings
 Operators
31

 Bitwise operators: Bit operators work on 32 bits

numbers
 Operators
32

 Condition (Ternary) operators: The conditional

operator assigns a value to a variable based on a
condition (?:)
 Syntax:
variablename = (condition) ? value1:value2
 Example:
voteable = (age < 18) ? "Too young":"Old
enough";
Control Statements

22
 Control statements
34
 Control statements
35
 Control statements
36
 If-else Selection statements
37

 if
if (condition){
// block of code to be executed if the condition is true
}
 If-else

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
 If-else Selection statements
38

 If-else-if
if (condition1) {
// if condition1 is true
}
else if (condition2) {
// if the condition1 is false and condition2 is true
}
else {
// if the condition1 is false and condition2 is false
}
 If-else Selection statements
39
 Switch statement
40

 Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
 Switch statement
41
 JS-Looping structure
42

 Java script Loop

Loops can execute a block of code a number of times
 JavaScript supports different kinds of loops:

 for - loops through a block of code a number of times

 for-in - loops through the properties of an object
 for-of - loops through the values of an iterable object
 while - loops through a block of code while a specified
condition is true
 do-while - also loops through a block of code while a
specified condition is true
 For Loop
43

 Syntax (For Loop)

for (statement 1; statement 2; statement 3) {
// code block to be executed
}
 For-in Loop
44

 JavaScript for/in statement loops through the properties

of an object
 Syntax: for (variable in object) {
// code block to be executed
}
 For-of Loop
45

 JavaScript for/of statement loops through the values of

an iterable objects
Syntax: for (variable of iterable) {
// code block to be executed
}
 While Loop
46

 The while loop loops through a block of code as long as

a specified condition is true
 Syntax: while (condition) {
// code block to be executed
}
 Do-while Loop
47

 Syntax: do {
// code block to be executed
}while (condition);
 Break and continue
48

 The break statement "jumps out" of a loop.

 The continue statement "jumps over" one iteration in
the loop.
 Break and continue
49

Continue
Functions

13
 JS Functions
51
 JS Functions
52

 A JavaScript function is a block of code designed to

perform a particular task.
 Syntax
function name(parameter1, parameter2, parameter3)
{
// code to be executed
}
 Recursion:
A recursive function is a function that calls itself, either
directly, or indirectly through another function
 JS Functions
53
 JS Recursive Functions
54
Built-in Functions

28
 Built-in Functions
56
 Built-in Functions
57
 Built-in Functions
58
 Built-in Functions
59
Scope

28
 JS-Scope
61

 Scope determines the accessibility (visibility) of

variables
 In JavaScript there are two types of scope
Local scope
Global scope
 Local Scope:
Variables declared within a JavaScript function,
become LOCAL to the function
 JS-Scope
62

 Example:
 JS-Scope
63

 Global Scope:
A variable declared outside a function, becomes
GLOBAL
 JS-Arrays
64

 An array is a group of memory locations that all

have the same name and normally are of the same
type
 Arrays are data structures consisting of related
data items.
 JavaScript arrays are “dynamic” entities in that
they can change size after they’re created.
 Declaring and Allocating Arrays
65

 an array in JavaScript is an Array object.

 new operator to create an array and to specify the
number of elements in an array.
 To allocate 12 elements for integer array c:
var c = new Array( 12 );
[OR]
var c; // declares a variable that will hold the array
c = new Array( 12 ); // allocates the array
 Different Ways of Initializing a
66
List
 var n = [ 10, 20, 30, 40, 50 ];
 n[3]=80;
 n[5]=100;

 var n = new Array( 10, 20, 30, 40, 50 );

 var n = [ 10, 20, , 40, 50 ];
67
68
 Array Declaration

69
 Passing Arrays to functions
70
 Displaying Output in Table
71

<html>
<head>
</head>
<body>
<div id ="outone"> </div>
<div id ="outtwo"> </div>
72
 Book Example
73
 Declaration of array
74

Initialization of array

Passing Array as argument

Output placed in table

 75

OUTPUT
 Passing Array to Function
76
 Output
77
Passing Arrays & converting them to
string
78

 Join()
 join() method returns the array as a string.
 Separator -optional
 this method will not change the original array.
Passing Arrays & converting them to
string
79

 Join()
 join() method returns the array as a string.
 Separator -optional
 this method will not change the original array.
Passing Arrays & converting them to
string[Book Example]
80
 Passing Array to Function
[Book Example cont’d…]
81
 JS-Event Handling
82

 Source, Event, Listeners

 Event Handling
 allow scripts to respond to user interactions and modify the page
accordingly
 Events and event handling help make web applications more
dynamic and interactive.
 Event Handler
 An event handler is a function that responds to an event.
 Registering an Event Handler
 Assigning an event handler to an event for a DOM node [HTML
Elements]
 Event Handling
83

 Few HTML Events:

 Registering an Event - addEvent
84
Listener
 addEventListener () is available for every DOM node.
 The method takes three arguments:
 The first is the name of the event for which we’re registering a
handler.
 The second is the function that will be called to handle the event.
 The last argument is usecapture (bubbling/no bubbling) - typically
false [optional]
Syntax:
addEventListener(“Event”, Function, usecapture);
Example:
window.addEventListener( "load", startTimer, false );
 Example
85
 Events
86

 <element event='some JavaScript'>

 <element event=“some JavaScript”>
 Examples
 <button onclick="document.getElementById('demo').inner
HTML = Date()">Currrent Time</button>
 <button onclick="this.innerHTML = Date()“>Time
</button>
 <button onclick="displayDate()“>Time Display</button>
 OnLoad Event
87

 onLoad event occurs

 when the document has been completely loaded -
including dependent resources like JS files, CSS files,
and images
 document.createElement( "td" )
 document.appendChild()
 tolowercase()
 setAttribute()
 Mouse Events
88

 mousemove - The event occurs when the pointer is

moving while it is over an element
 mouseover - The event occurs when the pointer is
moved onto an element
 mouseout - The event occurs when a user moves
the mouse pointer out of an element
 mousemove event example
89
 mousemove and mouseout
90
 Event.target
91

 Using the event.target property together with

the element.tagName property to find out which
element triggered a specified event
 e.target.tagName
 e.target.setAttribute
 Event.target
92
 mouseover and mouseout
93
 Mousemove-Book Example
94
95
 mouseover,mouseout-Book
Eample
96
 Javascript Code
97
 Form Events
98

 Submit and Reset

 submit and reset events fire when a form is submitted or
reset
 Focus and Blur
 useful when dealing with form elements that allow user
input
 focus event fires when an element gains the focus (i.e.,
when the user clicks a form field or uses the Tab key to
move between form elements)
 blur fires when an element loses the focus, which occurs
when another control gains the focus.
 Example
99
 Event bubbling
100

 Event bubbling is the process by which events

fired on child elements “bubble” up to their parent
elements.
 When an event is fired on an element, it is first
delivered to the element’s event handler (if any),
then to the parent element’s event handler (if any).
 Example
101
102
103
104