A successful career as a web developer starts with a solid foundation in computer programming and mastering key programming languages. One of these programming languages is JavaScript.
JavaScript has been used to build some of the world’s most popular websites and apps, which is why web developers who can code in this language are in such high demand.
This article will show you how to add JavaScript to HTML in two easy steps. We’ll also cover the fundamentals of JavaScript and examine its many uses in the tech world.
What Is JavaScript?
JavaScript (or JS) is a scripting or programming language that lets you implement dynamic and interactive elements on web pages. JS is also used to build web apps and browser games. It’s versatile enough for various applications, including servers, hardware controls, and software.
JavaScript facilitates interactions between the user’s web browser and the website the user is visiting. All major web browsers have a dedicated JavaScript engine to execute JS code on users’ devices.
Essentially, JavaScript prevents web pages from being static and allows developers to add dynamic and interactive elements to web pages. Some examples include inserting animation, audio, and video into web pages (with stop, pause, and play buttons) and automatically placing the text cursor into the search box when loading Google Search.
Together with HTML and CSS, JavaScript is part of the three core technologies needed to build websites. HTML (which stands for HyperText Markup Language) provides structure to web content. Examples include defining headings, data tables, and lists of bulleted points.
CSS (Cascading Style Sheets) applies styling and layout to HTML content. Examples include setting background and font colors, standardizing spacing between elements, and adding background images.
Even though Java and JavaScript have similar syntax and standard libraries, these two programming languages are quite different—with Java being an OOP programming language (i.e., runs in a virtual machine or browser). On the other hand, JavaScript is an OOP scripting language (i.e., it runs in the browser only).
Check out our insightful blog post if you want to learn more about JavaScript.
What Is JavaScript Used For?
You can use JavaScript to build complex websites, browser games, and apps. You can also use it to connect servers to websites and web apps. Many of the most widely-used websites and apps on the internet use JavaScript—including Facebook, Netflix, Google, and YouTube.
Numerous technologies have sprung up in recent years to leverage the power of JavaScript. JS now has an extensive collection of frameworks that you can use to build mobile and web apps.
Frameworks are libraries of pre-written JS code. They function similarly to blueprints and help developers build apps and websites with greater functionality.
These are the three most popular JS application frameworks:
- React, which you can use to build user interfaces for web apps
- React Native, which you can use to build mobile apps
- Node.js, which enables two-way communication with servers for data exchange
JavaScript is needed to make web pages dynamic and interactive. With JS baked into their coding, developers can implement the following features:
- Display timely and relevant content updates
- Display interactive maps
- Insert drop-down and hamburger-style menus
- Play audio and video
- Zoom in and out of images
- Add 2D/3D graphics and animation
- Display image galleries in a carousel format
- Insert hover effects
- Display and hide menus
- Alert users to invalid characters when typing passwords
JS is also used to create elaborate in-browser games. Some of the most popular browser-based games in the world use JS, including Angry Birds, Bejeweled, and Tetris.
Due to its versatility and ubiquity as a web development tool, JavaScript remains the most widely used programming language among developers, according to Statista. In 2021, nearly 65% of developers used JavaScript. What’s more, an overwhelming 98% of websites use JS on the client side to handle web page behavior, according to W3Techs.
How to Add JavaScript to HTML
We’ve already explored how HTML, CSS, and JavaScript are needed to build functional and dynamic web pages. A cool metaphor would be to think of your website as a three-layered cake—with HTML as the foundation, CSS as the middle layer, and JavaScript as the top layer.
You first structure your content on the web page with HTML, then add stylistic elements and a proper layout with CSS. Next, you need to add dynamic and interactive functions with HTML.
There are two ways to add JavaScript to HTML: the first is to embed inline JS code into HTML, while the second requires you to create an external JS file.
1. Embed Inline JavaScript Code in HTML
When working with files for the internet, JS needs to be loaded and run alongside HTML markup. You can do this inline within an HTML document. Click here for the steps to do that.
2. Create an External JavaScript File
Another way to load JS and run it alongside HTML markup is to create an external JS file. The browser will download this JS file alongside the HTML document when a user visits a web page. Click here for the steps to include external JavaScript.
How to Embed Inline JavaScript Code
JavaScript code can be embedded inline into an HTML document by using the dedicated HTML tag <script>. This HTML tag wraps around the JS code.
The <script> tag can be placed either in the <head> section of your HTML or in the <body> section. The placement entirely depends on when you want the JS code to load.
Add Javascript in the <Head> Tags
JS code can be inserted inside the HTML document’s <head> section. You do this to keep the function contained and away from the main content of your HTML document.
This sample code from W3Schools shows you how to add the <head> tag into the HTML document’s <head> section:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id=”demo”>A Paragraph</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
</body>
</html>
Try and run it on W3Schools’s free HTML editor. You’ll notice that it calls the function when the button “Try It” is clicked.
Add Javascript in the <Body> Tags
If your script needs to run at a specific point within your web page’s layout, you’ll need to insert it at the point where it should call the function. The placement is usually within the <body> section.
In this sample code from W3School, the JS function is placed in the <body> section of the HTML document:
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id=”demo”>A Paragraph</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</body>
</html>
When you run the code on W3Schools’s free HTML editor, you’ll see the function called when the button “Try It” is clicked.
How to Include External JavaScript in HTML
If your script is large or you need to spread it across several web pages, you would usually add the JS code to one or more JavaScript files, which are referenced within HTML documents.
Using separate JS files allows developers to separate the HTML markup from the JS code, preventing any confusion. It also makes ongoing maintenance easier and allows web pages to load more quickly when caching JS files.
Here is the sample external JS script, as provided by W3School:
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
To use this external script, you’ll need to add the name of the script file in the src (source) attribute of a <script> tag:
<script src=”myScript.js”></script>
Note that JS files should have the file extension “.js”.
The external script can be placed in either the <head> or <body> section of the HTML document.
Tips for Adding JavaScript to HTML
- You should add functions to the <head> section if scripts should only be triggered when they’re called or an event is triggered. This way, the script doesn’t interfere with your page’s content.
- If your script writes page content, it should be within the <body> section. Ideally, the script should be at the bottom of the <body> section to improve page load speeds.
- If your website uses HTML5, adding JS script in the <script> tag isn’t required.
- Some programmers recommend keeping your HTML, CSS, and JS scripts in separate folders. Just make sure to link them correctly.
Learn JavaScript at Coding Dojo
Becoming proficient in JavaScript and other widely-used programming languages opens up numerous career opportunities. Tech giants and innovative startups are always on the lookout for great coders. Or, if you’re interested in forging your own path, you could use your programming skills to create the next disruptive app or service.
Join our free workshop, Intro to Web Development, if you want to learn the coding basics – including JavaScript.
Or, if you’re interested in diving into our software development curriculum, check out our Software Development Bootcamp. You’ll learn all the major programming languages, including JavaScript, and equip yourself with the skills needed to become a full-stack web or software developer.
Apply now and start your journey with Coding Dojo.
JavaScript in HTML FAQ
What Does JavaScript Do?
JavaScript (JS) is a programming language you can use to implement dynamic and interactive elements on web pages. Together with HTML and CSS, JavaScript is one of the three core technologies used to build websites. You can also use it to build apps and browser games and connect servers to websites and web apps.
When using JavaScript in coding, web developers can implement the following features on web pages:
- Display timely content updates
- Display interactive maps
- Insert hamburger-style and drop-down menus
- Play audio, video, and animation
- Zoom in and out of images
- Display image galleries in a carousel format
- Insert hover effects
- Display and hide menus
- Alert users to invalid characters when typing passwords
- Render other dynamic and interactive elements
What Are the Advantages of JavaScript?
JavaScript (JS) offers web developers and end-users many advantages. First, JS is renowned for its speed. Since it’s an interpreted language, it reduces the time needed for compilation. Connecting to the server is faster, and the program can execute.
Second, JS is easy to learn and interpret, thanks to its clean and straightforward syntax. Third, it’s ubiquitous. All modern browsers support JS, the majority of programmers use it, and many of the most widely-used apps and websites are on JS.
Fourth, JS is very versatile, and the language works well with other programming languages. Fifth, the language offers rich interfaces, allowing developers to create eye-catching websites with numerous interactive elements.
Websites, games, and apps built with JavaScript are more functional, useful, and interactive—and this benefits end-users immensely.
What Is a Script Tag?
The <script> tag is used to embed a JavaScript or client-side script directly into the HTML document. You can also add it through external script files. The <script> tag either contains scripting statements or points to an external file via the src (source) attribute.
When inserted inline, the <script> tag can be placed either in the <head> section of your HTML or in the <body> section. The placement would depend on when you want the JavaScript code to load.