Scribd
Upload
14 views12 pages

CourseLecture1,2 Integrating JavaScript To Webpage

Uploaded by

jay.abaleta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
14 views12 pages

CourseLecture1,2 Integrating JavaScript To Webpage

Uploaded by

jay.abaleta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 12

Course Lecture

Integrating JavaScript to Webpage


What is JS?
• JavaScript is the world's most popular
scripting programming language.
• A scripting language is a lightweight
programming language
• JavaScript is usually embedded directly
into HTML pages
Uses of JavaScript
• JavaScript is a program, code that is
executed to perform a task such as a
calculation.
a. Graphics Effect
b. Menu Operation
c. Multimedia File
How to add JavaScript to HTML

• JavaScript, also known as JS, is one of the scripting


(client-side scripting) languages.
• The term "script" is used to refer to the languages that
are not standalone in nature and here it refers to
JavaScript which run on the client machine.
• JS is used in several ways in web pages such as
generate warning messages, build image galleries,
DOM manipulation, form validation, and more.
Integrating JS to Webpage
3 - ways in which users can add JavaScript to
HTML pages.

1. Embedding code
2. Inline code
3. External file
Integrating JS to Webpage
The Embedding code
- Client-side JavaScript code is embedded within
HTML documents in a number of ways:
• Between a pair of <script> and </script>tags
• From an external file specified by the src attribute
of a <script> tag
• In an event handler, specified as the value of an
HTML attribute such as onclick or onmouseover
Example: JS Embedding Code
1. <!DOCTYPE html >
2. <html>
3. <head>
4. <title> Embedding Code in JS</title>
5. <script>
6. document.write("Welcome to JavaScript");
7. </script>
8. </head>
9. <body>
10. <p>JS Embedding Code inside head tag</p>
11. </body>
12. </html>
Integrating JS to Webpage
The Inline code
- When a script tag is used in the HTML file, it is
called inlining. This means no external JS file is
used instead javascript is put into an HTML file.
- we can add JavaScript directly in the html
without using the <script>.... </script> tag.
Example: JS Inline Code
1. <!DOCTYPE html >
2. <html>
3. <head>
4. <title> The Inline Code JS</title>
5. </head>
6. <body>
7. <p>
8. <a href="#" onclick="alert('Hello')">Click on this link</a>
9. </p>
10. <p>The inline JavaScript or directly in an HTML tag. </p>
11. </body>
12. </html>
Integrating JS to Webpage
The External File
- The other way is to write JavaScript code in another
file having a .js extension and then link the file inside
the <head> or <body> tag of the HTML file in which we
want to add this code.
- We can also create a separate file to hold the code of
JavaScript with the (.js) extension and later
incorporate/include it into our HTML document using
the src attribute of the <script> tag.
Example: JS External File
<!DOCTYPE html>
<html>

<head>
<title>External JS</title>
</head>

<body>
<h2>The External file in JS</h2>
<form>
<input type="button" value="Output" onclick="display()"/>
</form>
<script src="ext.js">
</script>

</html>
End of Presentation

You might also like