Scribd
Upload
14 views5 pages

Small File

Uploaded by

wanguieddie99
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views5 pages

Small File

Uploaded by

wanguieddie99
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Embedding JavaScript in HTML: easy instructions and

examples
JavaScript adds a breath of fresh air to a static HTML file. You can embed JavaScript directly or as
an external file in HTML. We’ll show you what the advantages and disadvantages are to inserting
JavaScript into HTML.

Contents
1. Why should you embed JavaScript in HTML?
2. What options are there for embedding JavaScript?
3. How to embed JavaScript in HTML: practical examples
4. Special features in different HTML versions

Embedding JavaScript in an HTML document allows you to add dynamic behavior and
interactivity to your web pages. There are a few ways to include JavaScript in an HTML
file:
1. Inline JavaScript: You can directly embed JavaScript code within your HTML file using
the <script> tag. Place the following code snippet either in the <head> section or at the
end of the <body> section:

HTML

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
function greetUser() {
alert("Hello, world!");
}
</script>
</head>
<body>
<button onclick="greetUser()">Click me</button>
</body>
</html>
In this example, when the user clicks the button, the greetUser() function displays an
alert with the message “Hello, world!”.
2. External JavaScript File: Alternatively, you can create a separate JavaScript file
(e.g., myscript.js) and reference it in your HTML file using the <script> tag:

HTML

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="greetUser()">Click me</button>
</body>
</html>
In this case, the myscript.js file contains the same greetUser() function:

JavaScript

// myscript.js
function greetUser() {
alert("Hello, world!");
}
By using an external file, you can reuse the same JavaScript code across multiple HTML
pages.

Remember that JavaScript enhances the interactivity and functionality of your website.
Whether you choose inline or external scripts, make sure to include them appropriately
based on your specific requirement

Why should you embed JavaScript in HTML?


HTML, CSS, and JavaScript are the three basic pillars of the modern world wide web. If you want to
create a modern, interactive website, you can hardly avoid enlivening HTML text files by
incorporating CSS and JavaScript. HTML files are plain text documents for creating and
structuring website content. HTML is easy to learn, and you can get by without formatting. It’s also
user-friendly thanks to free code editors such as Notepad++ or Kate. On the other hand, creativity is
provided by CSS text files embedded in HTML embedded CSS text files, which define the layout,
color scheme, typographies, and other design elements of a website.

A website only becomes truly interactive with JavaScript elements, which add dynamic behavior to
the content. JavaScript files embedded in HTML, for example, enable the active modification of
website content such as automatic date display, day-dependent coloring, or automatically displayed
messages when the website is visited. With enabled JavaScript, JavaScript content can be executed
directly in most browsers. This saves processing power and improves the loading speed of
interactive content and animations on a website.
What options are there for embedding JavaScript?
You can note or reference JavaScript elements in HTML source code as script elements as follows.

<script> <script>
JavaScript-Element

Copy
Script elements are usually embedded in the body or head area of an HTML document.

Depending on how you include JavaScript in HTML, you can choose from the following options:

 Note JavaScript directly in an HTML page: Direct notation in HTML is done in the head
element and ensures that JavaScript files load as quickly as possible via direct notation. The
downside is that direct notations must be made for each HTML document on a website to
load content.
 Referencing JavaScript as an external file in HTML: Embedding an external JavaScript
file references the JavaScript file in the HTML text. Embedding as a reference allows
externally noted JavaScript files to be loaded on multiple pages without having to note them
directly as verbose JavaScript elements in HTML files.

Tip
Including JavaScript elements is especially easy with special JavaScript frameworks. JS frameworks
group together predefined JavaScript objects and statements and make programming easier.

How to embed JavaScript in HTML: practical examples


You can choose between two different methods to include JavaScript. We’ll introduce you to both.

Embedding JavaScript in HTML directly


To load JavaScript elements as quickly as possible, place the script element in the HTML head or
body. In new browsers, a relatively simple JS source code is sufficient. In the following example, the
message “Hello friend” is written on a website via JavaScript integration:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript: Hello Friend</title>
<script>
alert(“Hello Friend!“);
</script>
</head>
<body>
<p>This website only displays a message box.</p>
</body>
</html>

Copy
Complex visualizations, animations, or interactive elements can also be noted directly in HTML. The
advantage of direct embedding is that JavaScript elements are edited directly in the HTML file. The
disadvantage is that you have to note JavaScript functions separately in the source code for each
HTML document. This leads to increased effort when maintaining the source code.

Embedding JavaScript as an external file


It’s more efficient and more common to note down JavaScript as an external file and reference it in
the HTML document. In this way, JavaScript can be included in HTML as if the file were noted
directly in the source code.

In the HTML document it looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Include external JavaScript file</title>
<script src="filename.js"></script>
</head>
</body>

Copy
Embedding JavaScript as an external file offers the advantage that only the link to the external
file is referenced. So, all desired HTML pages with a corresponding reference can access the file
and load it faster. In addition, the source code is easier to maintain, since it’s not several HTML
documents, but only one JavaScript file.

Tip
JavaScript elements have been a sort of non-plus-ultra for interactive content on websites and in
browsers. However, since even JavaScript doesn’t always load fast enough, the open
standard WebAssembly is now being used more and more as a JavaScript supplement.

Special features in different HTML versions


When embedding JavaScript in HTML, note that older browsers require more verbose source code.
Instead of the simpler HTML 5 <script>...</script> tag, the JavaScript inclusion would look like this:

<script type="text/javascript">
JavaScript-Element
</script>

Copy
If you want to display a placeholder message for visitors who have JavaScript disabled, use the
following noscript tag:
<head>
<script>
JavaScript-Element
</script>
<noscript>
Please enable JavaScript to see the JavaScript element.
</noscript>
</head>

You might also like