HTML5 Attach JavaScript

« Previous Lesson

Next Lesson »

JavaScript Attachment in HTML5

In this tutorial, we’ll teach you different methods for JavaScript attachment in HTML5. In HTML5, JavaScript is enclosed between the <script> and </script> tags.

Example

<!DOCTYPE HTML>
<html>
<head>
    <title>javascript Attachment in HTML5</title>
</head>
<body>
    <div id="demo">
    </div>
    <script>
        document.getElementById("demo").innerHTML = "My first javascritp code"
    </script>
</body>
</html>

The output of this code will be

In the previous versions of JavaScript, we needed to specify a type attribute, but it is no longer required.

Functions and Events in JavaScript

A JavaScript function is a piece of code that performs specific tasks when called. For instance, a function may be called when a specific event occurs, like when users press a key from their keyboard.

You’ll learn more about the JavaScript events and functions when we cover Javascript in the later tutorials.

Javascript attachment in HTMl5 <head> or <body> section

Generally, professional web developers place many scripts in an HTML5 document. Scripts can be placed either in the <body> or <head> section of the HTML document or both place.

Javascript Attachment in the <head> Section

In the code snippet depicted below, we’ve placed the Javascript function in the <head> section of an HTML document. The function is called when our web page visitor presses a button.

Example

<!DOCTYPE HTML>
<html>
<head>
    <title>
        Javascript Attachment in HTML5
    </title>
    <script>
        function testFunction() {
            document.getElementById('test').innerHTML = 'My new heading'
        }
    </script>
</head>
<body>
    <h1> Placing Javascript in the head section</h1>
    <h1 id="test"> My First Javascript code </h1>
    <button type="button" onclick="testFunction()"> Event triggered </button>
</body>
</html>

The output of this code will be

Javascript Attachment in HTML5 \

Javascript attachment in HTML5 <body> section

In the code listed below, we’ve placed the Javascript function in the body section of an HTML page. A function is called when someone presses a button.

Example

<!DOCTYPE html>
<html>
<head>
    <title> Javascript Attachemnt in HTML5</title>
</head>
<body>
    <h1> Placing Javascript in the body section</h1>
    <h1 id="demo"> My First Javascript code </h1>
    <button type="button" onclick="myFunction()"> Event triggered </button>
    <script>
        function myFunction() {
            document.getElementById('demo').innerHTML = 'My new heading'
        }
    </script>
</body>
</html>

The output of this code will be

Javascript Attachment in HTML5

Placing Javascript code at the bottom of the page is a good development practice because script interpretation takes more time, leading to reduced page load speed.

Attaching Javascript as an External File

Seasoned developers always place Javascript code in a separate file and then embed it in an HTML5 document.

Example

function myFunction() {

document.getElementById('demo').innerHTML = 'My new heading'

}

External Javascript saves a lot of your time and effort, specifically when you need the same code in many web pages.

All Javascript files are stored with a .js extension.

To embed Javascript code in your HTML file with this file, assign the name of the script file to the src attribute of <script> tag

Example

<!DOCTYPE html>
<html>
<head>
    <title> Javascript Attachment in HTML5</title>
</head>
<body>
    <button onclick="myFunction()">click here</button>
    <p id="demo"></p>
    <script src="script.js">
    </script>
</body>
</html>

The output of this code will be

Furthermore, you can place external Javascript either in the head or body section of a page.

Advantages of External Javascript

Placing Javascript code as an external file has many advantages; some of them are as follows:

It separates Javascript code from the HTML
Caching Javascript tends to increase page load speed
It makes the code easy to read and debug.

To embed many script files in one HTML file, use separate script tags for each file.

<script src=”script1.js”></script>

<script src=”sript2.js”> </script>

External References

An external script can be embedded in 3 different ways:

By mentioning the full URL
Mentioning a complete file path
Without mentioning file path

Example

In this code snippet, we’ve mentioned the full URL address to embed script1.js in HTML file

<script src="https://www.vishacademy.com/js/script1.js"></script>

In this code, we’ve used file path to embed script1.js

<script src="/js/script1.js"></script>

In this code example, we haven’t used any file path to embed script1.js in our HTML file

<script src=”script1.js”></script>

Next Lesson » « Previous Lesson