JAVASCRIPT IN HTML
Std. VIII CS JavaScript in HTML 1 of 7
WHAT IS A SCRIPTING LANGUAGE?
D e fi n i t i o n
A s c r i p t i n g l a n g u a g e i s a p ro g r a m m i n g l a n g u a g e m a i n l y u s e d t o c re a t e
interactive and dynamic
websites and web applications.
Uses
Ad d i n g i n t e r a c t i v i t y t o w e b p a g e s ( a d d p o p - u p w i n d o w s a n d d i a l o g b oxe s i n a
w e b p a g e , t o s h o w a n d h i d e t h e c o n t e n t o f a w e b p a g e , a n d t o p e r f o rm
calculations).
Std. VIII CS JavaScript in HTML 2 of 7
TYPES OF SCRIPTING LANGUAGES
Client-Side Scripting Languages
• Ru n o n a c l i e n t ’ s c o m p u t e r o n a b ro w s e r
• U s e d t o c h a n g e t h e i n t e r f a c e i n re s p o n s e t o a u s e r ’ s a c t i o n
• Examples: JavaScript, jQuery
Server-Side Scripting Languages
• Ru n o n a w e b s e r v e r
• U s e d t o h a n d l e d a t a a n d s e r v e r- s i d e l o g i c
• E x a m p l e s : P H P , A S P. N E T
Std. VIII CS JavaScript in HTML 3 of 7
DIFFERENTIATE BETWEEN CLIENT-SIDE SCRIPTING AND
SERVER-SIDE SCRIPTING
L ANGUAGE.
CLIENT-SIDE SCRIPTING SERVER-SIDE SCRIPTING
• A client-side scripting language runs • A scripting language that runs on a
on a client’s computer on a browser. web server is called server side
• Client-side scripting does not require scripting language.
interaction with the server. • In server-side scripting, the script is
• The script is placed in an HTML hidden from the client.
document. • It is used at the back end, and the
• It is used at the front end and is, script is not visible to the user.
therefore, visible to the user.
• This makes server-side scripting
• JavaScript and jQuery are examples more secure as compared to client-
of client-side scripting languages. side scripting.
Std. VIII CS JavaScript in HTML 4 of 7
WHAT IS JAVASCRIPT?
D e fi n i t i o n
JavaScript is one of the most popular client-side scripting language. It is
commonly used to
build web applications and even games. The code written in JavaScript is
re f e rre d t o a s a
‘ s c r i p t . ’ T h e s e s c r i p t s a l l o w y o u t o m o d i fy e l e m e n t s o n a w e b p a g e b a s e d o n t h e
a c t i o n s t a ke n
by the user, making the web page interactive.
Ke y Fe a t u r e s
• Ru n s d i re c t l y w i t h o u t b e i n g c o m p i l e d
• Client-side scripting language
• Case-sensitive language
• PStd.
l a t fVIII
o rmCS - i n d e p e n d e n t 5 of 7
JavaScript in HTML
USING JAVASCRIPT WITH HTML
Internal JavaScript
E m b e d d e d d i re c t l y w i t h i n a n H T M L d o c u m e n t i n s i d e < s c r i p t > t a g s , t y p i c a l l y i n
the <head> or <body> sections.
External JavaScript
S e p a r a t e J a v a S c r i p t fi l e l i n ke d t o a n H T M L d o c u m e n t u s i n g < s c r i p t
s rc = " fi l e . j s " > < / s c r i p t > i n a s e p a r a t e fi l e w i t h t h e ex t e n s i o n ‘ . j s ’ .
Std. VIII CS JavaScript in HTML 6 of 7
G IVE TWO POINTS OF DIFFERENCE BETWEEN
INTERNAL AND EXTERNAL
JAVAS CRIPT CO DE.
INTERNAL JAVASCRIPT EXTERNAL JAVASCRIPT
• Internal JavaScript refers to a script • External JavaScript refers to a script
that is added within an HTML file, that is created in separate JavaScript
either in the <head> or <body> file linked to an HTML document .
section. • It is called ‘external’ because the
• It is called ‘internal’ because the code contained in separate file saved
code is contained in the HTML file with .js extension.
itself. • This approach is generally used
• This approach is generally used when the script is meant for
when the script is meant only for a complete web site or multiple pages
single web page and does not need of a web site to keep uniformity in
to be reused across multiple pages. pages.
Std. VIII CS JavaScript in HTML 7 of 7
INTERNAL JAVASCRIPT
Std. VIII CS JavaScript in HTML 8 of 7
EXTERNAL JAVASCRIPT
Std. VIII CS JavaScript in HTML 9 of 7
Std. VIII CS JavaScript in HTML 10 of 7
Std. VIII CS JavaScript in HTML 11 of 7
Std. VIII CS JavaScript in HTML 12 of 7
Std. VIII CS JavaScript in HTML 13 of 7
Std. VIII CS JavaScript in HTML 14 of 7
Std. VIII CS JavaScript in HTML 15 of 7
Std. VIII CS JavaScript in HTML 16 of 7
Std. VIII CS JavaScript in HTML 17 of 7
QUIZ TIME???
Identify the built-in function used in the JavaScript code shown below. What will be the
output of this code?
• The built-in function used in the
JavaScript code is alert().
• This function is used to display
a message in a pop-up alert
box.
• Output :
• When this code is executed in a
browser, it will display an alert
box with the message:
• "Hello! How are you!"
• The alert() function creates a
dialog box with an "OK" button
that the user must click to
close.
Std. VIII CS JavaScript in HTML 18 of 7
QUIZ TIME???
Identify the built-in function used in the JavaScript code shown below. What will be the
output of this code?
• The JavaScript code uses the
following built-in functions:
• prompt() : This function
displays a dialog box that
prompts the user for input.
• parseInt(): This function
converts a string input into an
integer.
• alert(): This function displays a
message in a pop-up alert box.
• If the user enters 5 for the first
prompt and 10 for the second
prompt, the output will be:
• The sum is: 15
Std. VIII CS JavaScript in HTML 19 of 7
QUIZ TIME???
Identify the built-in function used in the JavaScript code shown below. What will be the
output of this code?
• When the "Submit" button is
clicked, an alert box appears
with the following message:
"Details submitted."
• The user must click "OK" in
the alert box to dismiss it.
Std. VIII CS JavaScript in HTML 20 of 7
E XP L AIN AN Y ON E D OM M E T H OD S T H AT C A N B E U S E D T O
AC C E S S A N D
M OD IFY PART IC U L AR E L E M E N T S OR ATT R IB U T E S OF A W E B PAGE .
• Selecting elements by ID
• Selecting elements by their ID is a common and efficient way to access
specific elements in the Document Object Model (DOM).
• Each HTML element can be given a unique value for its ID attribute, which
allows you to specifically identify that element using JavaScript.
• To select an element by its ID, you can use the method
[Link]().
• The method [Link]() is used to obtain a specific
element from a web page using the unique ID associated with that
element.
• You pass the ID as an argument to this method, and it returns the
element, enabling you to interact with and manipulate it using JavaScript
Std. VIII CS JavaScript in HTML 21 of 7