Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
15 views

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
15 views

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