How To Link JavaScript To Your Project

JavaScript is the world's most popular programming language according to stackoverflow survey 2021. As far as I know, its also the only programming language for front-end development for this reason its in very high demand and if you are looking to get into web development a must have skill as at the time of this post.

In this post, I will be showing you different ways you can link javascript to your projects. I'm assuming you are already familiar with HTM & CSS. Lets get started!
What We will Cover

• Overview
• Inline javascript
• Internal javascript
• External javascript
• Summary

Overview

In order to ensure your programme works as expected, it needs to be linked with the root of your project i.e the root HTML. There are a few ways to accomplish this. In this post we will be focusing mainly on 3 ways (inline, internal & external).

Inline Javascript

This is simply javascript code written in between the opening bracket of a html element. See sample syntax below:

Internal Javascript

This is javascript written in between a script tag within the html file. This is can be added to the html head but we will stick with the tag being placed just above the body closing tag. Sample syntax blow:

This snippet shows a simple programme that tells the buttons to alert ' This is internal script' to the browser once clicked. Notice that the button elements are above the script tag and they are all (button and script) within the html body tag.

External Javascript

Before we dive into external javascript let me inform you that all javascript files must have .js extension just like .html & .css, the file can be named anything you like it just must have the extension .js, see example below:

The next question is how does external javascript work and I can tell you that it is what it says on the tin. This is a way to connect javascript to your project with an external js file. This is particularly practical when you are building a project with multiple pages.

In order to achieve this you will need to use the script tag but this time you will need to add the source attribute, within the source (src) you will need add the path to the js file just like below:

Summary

At the end of the day, its upto you how you want to link javascript to your project. However, you will need to consider how scalable the method you choose will be for your project.