1 of 109

JAVA SCRIPT

Dr.K.R.PRASANNA KUMAR/IT

2 of 109

Introduction to Scripting

3 of 109

History

JavaScript was invented by Brendan Eich in 1995.
It was originally named Mocha, but quickly became known as LiveScript and, later, JavaScript.
JavaScript is primarily a client-side language, meaning it runs on your computer within your browser.

4 of 109

Introduction

5 of 109

Introduction

6 of 109

Introduction

7 of 109

Introduction

8 of 109

Introduction

9 of 109

Introduction

10 of 109

Introduction

11 of 109

Display Options

12 of 109

Browser Object Model (BOM)

It allows JavaScript to "talk to" the browser.

Window Object

It represents the browser's window.
All global JavaScript objects, functions, and variables automatically become members of the window object.
window.document.getElementById("header");

13 of 109

Document Object

HTML document is loaded into a web browser, it becomes a document object.
It is the root node of the HTML document.
The document object is a property of the window object.
The document object is accessed with:

window. document.getElementById("header");

document.getElementById("header");

14 of 109

Introduction

It is a scripting language used to enhance the functionality and appearance of web pages.
First Example:

15 of 109

Introduction

<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)

16 of 109

Introduction

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

17 of 109

JavaScript Display Possibilities

Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().

18 of 109

JS Methods-Sample

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()

19 of 109

JS Methods-Sample

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

20 of 109

JS-Modes

21 of 109

JS-Modes

22 of 109

JS-Modes

23 of 109

JS-Modes

24 of 109

Variables and Data Types

25 of 109

JavaScript Values

The JavaScript syntax defines two types of values:

Fixed values are called Literals.

Number are written with or without decimals
Strings are text, written within double or single quotes:

Variable values are called Variables.

It used to store data values.
JS uses the keywords var, let and const to declare variables.

26 of 109

Variables

27 of 109

Variables

28 of 109

Variables

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

29 of 109

Variables

30 of 109

Operators

31 of 109

Operators

32 of 109

Operators

Arithmetic operators:

Arithmetic operators are used to perform arithmetic on numbers

33 of 109

Operators-Arithmetic operators

34 of 109

Operators

Comparison operators: Used in logical statements to determine equality or difference between variables

35 of 109

Operators

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

36 of 109

Operators

Bitwise operators: Bit operators work on 32 bits numbers

37 of 109

Operators

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";

38 of 109

Control Statements

39 of 109

Control statements

40 of 109

Control statements

41 of 109

Control statements

42 of 109

If-else Selection statements

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�}

43 of 109

If-else Selection statements

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�}

44 of 109

If-else Selection statements

45 of 109

Switch statement

Syntax

switch(expression) {� case x:� // code block� break;� case y:� // code block� break;� default:� // code block�}

46 of 109

Switch statement

47 of 109

JS-Looping structure

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

48 of 109

For Loop

Syntax (For Loop)

for (statement 1; statement 2; statement 3) {� // code block to be executed�}

49 of 109

For-in Loop

JavaScript for/in statement loops through the properties of an object
Syntax: for (variable in object) {� // code block to be executed� }

50 of 109

For-of Loop

JavaScript for/of statement loops through the values of an iterable objects

Syntax: for (variable of iterable) {� // code block to be executed� }

51 of 109

While Loop

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� }

52 of 109

Do-while Loop

Syntax: do {� // code block to be executed�}while (condition);

53 of 109

Break and continue

The break statement "jumps out" of a loop.
The continue statement "jumps over" one iteration in the loop.

54 of 109

Break and continue

Continue

55 of 109

Functions

56 of 109

JS Functions

57 of 109

JS Functions

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

58 of 109

JS Functions

59 of 109

JS Recursive Functions

60 of 109

Built-in Functions

61 of 109

Built-in Functions

62 of 109

Built-in Functions

63 of 109

Built-in Functions

64 of 109

Built-in Functions

66 of 109

JS-Scope

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

67 of 109

JS-Scope

Example:

68 of 109

JS-Scope

Global Scope:

A variable declared outside a function, becomes GLOBAL

69 of 109

JS-Arrays

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.

70 of 109

Declaring and Allocating Arrays

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

71 of 109

Different Ways of Initializing a 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 ];

74 of 109

Array Declaration

75 of 109

Passing Arrays to functions

76 of 109

Displaying Output in Table

<html>

<head>

</head>

<body>

78 of 109

Book Example

79 of 109

Declaration of array

Initialization of array

Passing Array as argument

Output placed in table

81 of 109

Passing Array to Function

83 of 109

Passing Arrays & converting them to string

Join()

join() method returns the array as a string.
Separator -optional
this method will not change the original array.

84 of 109

Passing Arrays & converting them to string

Join()

join() method returns the array as a string.
Separator -optional
this method will not change the original array.

85 of 109

Passing Arrays & converting them to string[Book Example]

86 of 109

Passing Array to Function �[Book Example cont’d…]

87 of 109

JS-Event Handling

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]

88 of 109

Event Handling

Few HTML Events:

89 of 109

Registering an Event - addEvent 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 );

90 of 109

Example

91 of 109

Events

<element event='some JavaScript'>
<element event=“some JavaScript”>
Examples

<button onclick="document.getElementById('demo').innerHTML = Date()">Currrent Time</button>
<button onclick="this.innerHTML = Date()“>Time </button>
<button onclick="displayDate()“>Time Display</button>

92 of 109

OnLoad Event

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()

93 of 109

Mouse Events

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

94 of 109

mousemove event example

95 of 109

mousemove and mouseout

96 of 109

Event.target

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

97 of 109

Event.target

98 of 109

mouseover and mouseout

99 of 109

Mousemove-Book Example

101 of 109

mouseover,mouseout-Book Eample

101

102 of 109

Javascript Code

102

103 of 109

Form Events

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.

103

104 of 109

Example

104

105 of 109

Event bubbling

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).

105

1 of 109

2 of 109

3 of 109

4 of 109

5 of 109

6 of 109

7 of 109

8 of 109

9 of 109

10 of 109

11 of 109

12 of 109

13 of 109

14 of 109

15 of 109

16 of 109

17 of 109

18 of 109

19 of 109

20 of 109

21 of 109

22 of 109

23 of 109

24 of 109

25 of 109

26 of 109

27 of 109

28 of 109

29 of 109

30 of 109

31 of 109

32 of 109

33 of 109

34 of 109

35 of 109

36 of 109

37 of 109

38 of 109

39 of 109

40 of 109

41 of 109

42 of 109

43 of 109

44 of 109

45 of 109

46 of 109

47 of 109

48 of 109

49 of 109

50 of 109

51 of 109

52 of 109

53 of 109

54 of 109

55 of 109

56 of 109

57 of 109

58 of 109

59 of 109

60 of 109

61 of 109

62 of 109

63 of 109

64 of 109

65 of 109

66 of 109

67 of 109

68 of 109

69 of 109

70 of 109

71 of 109

72 of 109

73 of 109

74 of 109

75 of 109

76 of 109

77 of 109

78 of 109

79 of 109

80 of 109