loader

Adding JavaScript to HTML: A Beginner’s Guide

Adding JavaScript to HTML: A Beginner's Guide

Introduction:

JavaScript, often shortened to JS, is a programming language used for web development. It’s a vital part of the web, along with HTML and CSS. JavaScript makes webpages interactive and helps build web applications. Most modern web browsers support JavaScript without needing extra plugins because they have built-in engines for it.

When you’re creating web pages, JavaScript needs to be included and executed along with HTML markup. You can do this in two ways: either directly within the HTML document or by linking to a separate JavaScript file that the browser will download alongside the HTML document.

In this tutorial, we’ll learn how to add JavaScript to your web files, whether it’s directly in an HTML document or as a separate file.

Embedding JavaScript in an HTML Document

You can include JavaScript code in an HTML document using the special HTML tag <script>. This tag wraps around your JavaScript code.

You can place the <script> tag either in the <head> section or the <body> section of your HTML file, depending on when you want the JavaScript to be loaded.

Usually, it’s best to put JavaScript code inside the <head> section to keep it separate from the main content of your HTML document.

However, if your script needs to run at a specific point within the page’s layout, such as when using document.write to generate content, you should put it where it needs to be called, typically within the <body> section.

Let’s look at an example of a basic HTML document with the title “Today’s Date”:


Copy

Currently, this file only has HTML code. Let’s say we want to include the following JavaScript code in the document:

let d = new Date();
alert("Today's date is " + d);
Copy

To make the webpage show an alert with the current date whenever the user visits the site, we need to add some JavaScript code to the HTML file.

To do this, we’ll use a <script> tag along with the JavaScript code. We’ll place this script in the <head> section of the HTML document. This tells the browser to run the JavaScript code before loading the rest of the page. We can add the JavaScript code just below the <title> tag, like this:


Copy

After loading the page, you’ll see a pop-up message like this:

If we wanted to change what’s displayed on the webpage itself, we’d need to do that after the <head> section. This ensures that the changes appear on the page. Here’s an example:


Copy

When you open this HTML document in a web browser, the result would look something like this:

For small scripts or ones that are specific to a single page, embedding them directly within the HTML file is fine. However, for larger scripts or ones that will be used across multiple pages, this approach can become messy and hard to manage.In the next section, we’ll learn how to handle a separate JavaScript file in your HTML document, which is a more organized and efficient solution.

Using External JavaScript Files

To handle larger scripts or those needed across multiple pages, JavaScript code is typically placed in one or more separate “.js” files. These files are then linked to HTML documents, much like how external CSS files are linked.

The advantages of using separate JavaScript files are:

  1. It makes HTML markup and JavaScript code easier to manage and understand because they’re kept separate.
  2. Maintenance becomes simpler with separate files.
  3. When JavaScript files are cached, web pages load faster.

To show how to link a JavaScript file to an HTML file, let’s create a simple web project. We’ll have a “script.js” file in a folder named “js/”, a “style.css” file in a folder named “css/”, and our main HTML file named “index.html” in the project’s root folder.

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

Copy

Let’s begin with the HTML template we used earlier:


Copy

Next, we’ll move the JavaScript code that displays the date as an <h1> header into a file named “script.js”:


Copy

We can include a reference to this script in the <body> section using the following line of code:


Copy

The <script> tag is directing to the “script.js” file located in the “js/” directory of our web project.

Let’s examine this line within the HTML file, specifically within the <body> section:


Copy

Lastly, let’s modify the “style.css” file by including a background color and styling for the <h1> header:


Copy

We can include a reference to the CSS file within the <head> section of our HTML document like this:


Copy

Now, with the JavaScript and CSS added, we can open the index.html page in our web browser. We should see a page that looks similar to the following:

Now that we’ve moved the JavaScript code into its own file, we can include it in other web pages easily and update it in just one place, making maintenance simpler.

Conclusion:

This tutorial showed you how to add JavaScript to your web pages, either directly within the HTML document or by linking to a separate JavaScript file. Now you can enhance your web projects with interactive features! If you’re ready to start adding JavaScript to your own web pages, give it a try and see what you can create. If you have any questions or need further assistance, feel free to ask. 

Happy coding!

image

A cloud for entire journey

Bring your team together. No contracts, no commitments.

image

Copyright ©2023 Design & Developed by Cloudtopiaa