Integrating JavaScript in Webpages

Expert

(, )

By SamK

Category(s)

Web Development

Topic(s)

JavaScript

In this tutorial, you will learn how to integrate JavaScript in webpages.

The `<script>` Tag

In HTML pages, JavaScript code is embedded using the <script> tag.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Example in Action</h2>
<p id="message"></p>
<script>
   document.getElementById("message").textContent = "Hello, this is my updated JavaScript!";
</script>
</body>
</html>

Scripts can be added within the <head> section, the <body> section, or both, depending on when you want the code to run.

JavaScript in `<head>`

In this example, a JavaScript function is defined within the <head> section of an HTML document.

The function is executed when the user clicks a button on the page.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Function in Head</title>
    <script>
        // Function to update the paragraph content
        function changeParagraph() {
            document.getElementById("info").textContent = "The paragraph has been updated!";
        }
    </script>
</head>
<body>
    <h2>JavaScript Example in the Head Section</h2>
    <p id="info">This is the original paragraph.</p>
    <button type="button" onclick="changeParagraph()">Click to Change</button>
</body>
</html>

JavaScript in `<body>`

In this example, a JavaScript function is defined within the <body> section of an HTML document.

The function executes when a user clicks the button on the page.

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Function in Body</title>
</head>
<body>
<h2>JavaScript Example in Body</h2>
<p id="message">This is the original paragraph text.</p>
<button type="button" onclick="updateParagraph()">Click Me</button>
<script>
   function updateParagraph() {
       document.getElementById("message").textContent = "The paragraph text has been updated!";
   }
</script>
</body>
</html>

Recommended Approach

Placing scripts just before the closing </body> tag enhances page load speed, as it allows the HTML content to render before the scripts are executed, preventing delays caused by script processing.

External JavaScript

JavaScript can also be included in external files for better organization.

External scripts are useful when the same code is needed across multiple web pages.

JavaScript files use the .js file extension.

To include an external script (fruitScript.js), reference the script file using the src (source) attribute within a <script> tag:

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

You can link an external script in either the <head> or <body> section, depending on your preference.

The script will function as if it were placed directly where the <script> tag appears in the HTML.

Note: The external scripts should not contain <script> tags.

Advantages of External JavaScript

Using external script files offers several benefits:

It keeps HTML and JavaScript code separate.
It improves the readability and maintainability of both HTML and JavaScript.
Cached JavaScript files can enhance page loading speed.

To include multiple script files in a single page, simply use multiple <script> tags:

<script src="fruitScript1.js"></script>
<script src="fruitScript2.js"></script>

Integrating JavaScript in Webpages

The <script> Tag

JavaScript in <head>

JavaScript in <body>