UNIT -4

Javascript

STME, NMIMS, Navi Mumbai

STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Output

STME, NMIMS, Navi Mumbai

Javascript code in Html

STME, NMIMS, Navi Mumbai

Calling external javascript file

STME, NMIMS, Navi Mumbai

Activity:
• Create a javascript to display some text
• In head portion of HTML
• In body portion of HTML
• As external file

STME, NMIMS, Navi Mumbai

Strings in HTML file

STME, NMIMS, Navi Mumbai

Output

STME, NMIMS, Navi Mumbai

Operators

STME, NMIMS, Navi Mumbai

Assignment operators

STME, NMIMS, Navi Mumbai

Increment and Decrement operator

STME, NMIMS, Navi Mumbai

Relational Operators

STME, NMIMS, Navi Mumbai

Logical Operators

STME, NMIMS, Navi Mumbai

Concatenation Operator

STME, NMIMS, Navi Mumbai

Example (Concatenation)

STME, NMIMS, Navi Mumbai

String Interpolation/ Template Literals

STME, NMIMS, Navi Mumbai

String output in multiple lines

STME, NMIMS, Navi Mumbai

Control Statements

STME, NMIMS, Navi Mumbai

Simple-if

STME, NMIMS, Navi Mumbai

Example

STME, NMIMS, Navi Mumbai

If-else

STME, NMIMS, Navi Mumbai

Else-if

STME, NMIMS, Navi Mumbai

Nested- if

STME, NMIMS, Navi Mumbai

switch

STME, NMIMS, Navi Mumbai

Activity
• Print on HTML page sum of first 10 numbers using javascript.
• Enter marks for 5 subjects and print their average.
• Identify whether number is even or odd
• Count number of vowels in the input string.
• Print table of 11.

STME, NMIMS, Navi Mumbai

Activity

STME, NMIMS, Navi Mumbai

STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Activity 1
• Write a code to print sum of first five natural numbers using external javascript
file.
• Write a script to average marks of three subjects and display average marks.
• Given a number write a javascript to identify it as even or odd number.
• Write a JavaScript program to convert Celsius to Fahrenheit, based on the below
formula:
Celsius to Fahrenheit : (°C × 1.8) + 32 = °F

STME, NMIMS, Navi Mumbai

Event Handlers
Objectives
- To understand usefulness of event
- Where event handlers are placed in a document and how to use
them.
- Creating Scripts using Event Handlers
- Ways to Register Events

STME, NMIMS, Navi Mumbai

What is an event handler?
• An event handler is a predefined JavaScript property of an object (in
most cases an element in the document) that is used to handle an
event on a Web page.
• Event: An event is something that happens when
• the viewer of the page performs some sort of action, such as clicking a mouse
button,
• Clicking a button on the page, changing the contents of a form element,
• or moving the mouse over a link on the page.
• Events can also occur simply by the page loading or other similar actions.

STME, NMIMS, Navi Mumbai

Locations to use event handlers
• They can be used
• directly within HTML elements by adding special attributes to those elements.
• the <script> and </script> tags or in an external JavaScript file.

STME, NMIMS, Navi Mumbai

Using an Event handler in an HTML Element
• OnClick: it is used to make something happen when the viewer clicks
a specific area of the document.
• Example: So, suppose you want to alert the viewer to something
when the user clicks a form button.

STME, NMIMS, Navi Mumbai

Example

STME, NMIMS, Navi Mumbai

STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Using an Event handler in Script
• One way to do this is to give the element an id attribute and then use
the JavaScript method document.getElementById() to access the
element. Once that is done, you can tie an event to the element.
• Step 1: Add the id Attribute

STME, NMIMS, Navi Mumbai

• Access the Element

STME, NMIMS, Navi Mumbai

Activity

STME, NMIMS, Navi Mumbai

STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Abort Event
• The abort event occurs when a viewer stops (aborts) the loading of an
image.
• The event handler used for this is onabort.
• For example, if you wanted to display a message when the viewer
stopped an image from loading, you could use the following code:

STME, NMIMS, Navi Mumbai

Blur Event
• The blur event is the opposite of the focus event, and it occurs when the viewer
takes the focus away from a form element or a window.
• The onblur event handler is used to handle this event, and it can be used in such
places as a form element’s tag or in the opening body tag (for windows).
• For Example

STME, NMIMS, Navi Mumbai

The Change Event (onchange)
• The change event occurs when a viewer changes something within a
form element. For instance, the viewer might change the text in a text
box or make a selection from a select box. You handle this event with
the onchange event handler.

STME, NMIMS, Navi Mumbai

The Focus Event (onfocus)
• The focus event occurs when the viewer gives focus to an element on
a Web page.
• A viewer gives focus to something by clicking somewhere within the
item, by using the keyboard to move to the item (often via the key),
TAB

or via a script.
• For instance, a viewer who clicks a text input box (before entering
anything) gives that text box the focus. Also, clicking an inactive
window and making it the active window gives the window the focus.

STME, NMIMS, Navi Mumbai

STME, NMIMS, Navi Mumbai
The Keydown Event (onkeydown)
• The keydown event occurs when the viewer presses down a key on the
keyboard. To handle this event, you use onkeydown.
• Similarly, we have

STME, NMIMS, Navi Mumbai

The Load Event (onload)
• The load event occurs when a Web page finishes loading. To handle
this event, you use the onload event handler.

STME, NMIMS, Navi Mumbai

STME, NMIMS, Navi Mumbai
The Mouseover Event (onmouseover)
• The mouseover event occurs when a viewer moves the mouse cursor
over an element on the page such as a text link, linked image, or linked
portion of an image map.
• The mouseover event will also work in numerous other areas such as
table cells and <div> and </div> tags.
• The mouseover event is handled with the onmouseover event handler.

STME, NMIMS, Navi Mumbai

The Mouseout Event (onmouseout)
• The mouseout event occurs when a viewer moves the mouse cursor
away from an area on the page such as a link, linked image, or linked
area of an image map.

STME, NMIMS, Navi Mumbai

The Submit Event (onsubmit)
• The submit event only occurs when the viewer submits a form on a
Web page.
• This event uses the onsubmit event handler, which can be called from
an opening form tag in a document.

STME, NMIMS, Navi Mumbai

Assignment

STME, NMIMS, Navi Mumbai

STME, NMIMS, Navi Mumbai
Datatypes
• toString()
• Number()
• parseInt()
• parseFloat()
• +Unary Operator
• toFixed()
• toUpperCase()
• toLowerCase()
• Length
• charAt()
• charCodeAt()

STME, NMIMS, Navi Mumbai

Datatypes
• substr()
• indexOf()
• lastIndexOf()
• replace()
• split()
• trim()
• concat()
• New Date()
• toLocaleDateString()
• toLocalTimeString()
• getTime()

STME, NMIMS, Navi Mumbai

Array
• Splice
• Concat
• Every
• Some
• Filter
• Find
• FindIndex
• ForEach
• Includes
• IndexOf
• Slice
• Sort
STME, NMIMS, Navi Mumbai