JavaScript: Embedding Scripts in HTML

Introduction

Welcome to your first JavaScript lab! JavaScript is a powerful scripting language that allows you to create dynamic and interactive content on web pages. Without it, web pages would be static and far less engaging.

In this lab, you will learn the two fundamental ways to include JavaScript in a web page:

Internal JavaScript: Writing code directly within <script> tags inside an HTML file.
External JavaScript: Placing code in a separate .js file and linking it to the HTML file.

We will start with a basic HTML page and progressively add JavaScript functionality. You will use the built-in WebIDE to edit your files and preview your changes in real-time using the "Web 8080" tab. Let's get started!

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a intermediate level lab with a 68% completion rate. It has received a 98% positive review rate from learners.

Create an HTML file with script tag

In this step, you will add an internal JavaScript block to your HTML file. The setup process has already created an index.html file for you in the ~/project directory. We will now add the <script> tag to it, which is the standard way to declare a block of JavaScript code.

First, locate the index.html file in the file explorer on the left side of the WebIDE and double-click to open it.

Now, add an empty <script> tag just before the closing </body> tag. This is the recommended practice as it ensures the HTML content is parsed and displayed to the user before the browser begins executing any JavaScript, improving perceived page load time.

Your index.html file should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script></script>
  </body>
</html>

Make sure to save the file after making the changes (you can use Ctrl+S or Cmd+S).

Write console.log to output Hello World

Now that you have a place to write your JavaScript, let's add your first line of code. We will use the console.log() function. This is a fundamental tool for any JavaScript developer, as it allows you to print messages to the browser's developer console. It's incredibly useful for debugging and understanding how your code is executing.

In your index.html file, add console.log('Hello World'); inside the <script> tags you created in the previous step.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

After saving the file, let's see the result.

Click on the Web 8080 tab at the top of the LabEx interface.
You will see the <h1> heading. To see the console output, right-click anywhere on the page and select "Inspect".
A new panel will open. Click on the "Console" tab in this panel.
You should see the message Hello World printed in the console.

Link an external JavaScript file using src attribute

While internal scripts are fine for small tasks, it's best practice to keep your JavaScript in separate files. This makes your code cleaner, easier to manage, and reusable across different HTML pages.

In this step, we will move our code to an external file named script.js (which was already created for you) and link it to index.html.

First, modify your index.html file. Remove the console.log line from between the <script> tags and add the src attribute to the opening <script> tag to point to your external file.

Your index.html should now look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script src="script.js"></script>
  </body>
</html>

Next, open the script.js file from the file explorer. It is currently empty. Add the same console.log statement to this file.

Your script.js file should contain only this line:

console.log("Hello World");

Save both files. If you go back to the Web 8080 tab and refresh the page, you will see the exact same result in the console. The browser now loads index.html, sees the <script src="script.js"> tag, and then fetches and executes the content of script.js.

Besides logging to the console, JavaScript can interact with the user more directly. One of the simplest ways to do this is with the alert() function, which displays a pop-up message box to the user.

Let's add an alert to our script. Open the script.js file and add a new line of code to create a welcome alert.

Your script.js file should now look like this:

console.log("Hello World");
alert("Welcome to JavaScript!");

The alert() function will pause the execution of the script and the rendering of the page until the user clicks "OK" on the pop-up box. This makes it a very direct way to communicate important information.

Save the script.js file. We will see its effect in the next step.

Refresh browser to execute script

You have now added both a console log and an alert to your external JavaScript file. It's time to see the final result.

Navigate back to the Web 8080 tab.

To see the changes you made to the script.js file, you must refresh the browser tab. This tells the browser to re-download the HTML and any linked files, including your updated script.

Upon refreshing, you should immediately see a pop-up box with the message "Welcome to JavaScript!".

After you click "OK", the pop-up will disappear, and the rest of the page will load. If you open the developer console again (Right-click -> Inspect -> Console), you will still see the "Hello World" message logged there. This demonstrates the order of execution in your script.

Congratulations, you have successfully embedded JavaScript in a web page using both internal and external methods!

Summary

In this lab, you took your first steps into the world of web scripting with JavaScript. You have gained hands-on experience with the core concepts of including JavaScript in a web project.

You have learned:

How to add JavaScript directly into an HTML file using the <script> tag.
How to use console.log() to print messages to the browser's developer console for debugging.
The benefits of separating your code into external .js files.
How to link an external JavaScript file to your HTML using the <script> tag's src attribute.
How to create a user-facing pop-up message with the alert() function.

This foundation is crucial for building more complex and interactive web applications. Keep experimenting and building on what you've learned!

JavaScript Introduction and Embedding