How to Link JavaScript to HTML | Code With Random

How to Link JavaScript to HTML (Easy Way)

How to Link JavaScript to HTML | Code With Random

Hey friends, today I'll explain all you need to know to start link JS to HTML. Before we dive in, I'll introduce myself. I'm CodingPorium and I make coding tutorials and provide Free Source Code. I'm a newbie to YouTube, but I have experience in front-end web development for over 3 years. Do check out my YouTube channel here or by searching for CodingPorium on YouTube for more!

Alright, first let's get to know what is JavaScript.

About JavaScript

JavaScript is a language made to add interactivity to your HTML web pages. Commonly in front-end web development, HTML, CSS & JS is used together to make stunning and professional websites. HTML is the base, CSS styles the base and JS makes it even more interactive to animations and more.
The method of connecting JS to HTML is actually different than CSS. For CSS, we would commonly use Internal CSS or External CSS via link rel tags. But for Javascript, it's a little different. Now let's see 2 simple ways to link JavaScript(JS) to HTML (HyperText Markup Language).


1. Internal JavaScript Code

This is a simple method which does not require additional files besides your HTML file. Just like how CSS uses the <style> tag, JavaScript uses the <script> tag. For this method, add the <script> tag after your </body> tag and before your </html> code. Add your JavaScript code after <script> and then close it with </script> . Here's a simple example of code below on how this works.


<script type="text/javascript">
  //add your javascript code here
</script>

Usually, we would use internal JS code for simple projects. For example, maybe a project with very little JavaScript code or maybe for projects where you would like to use one HTML file only. Generally, internal Javascript code loads faster compared to external JavaScript code (even though the time difference is very slow). Now, let's see method 2.


2. External JavaScript Code

Honestly, this method is considered a more professional way in web development. However, if you're making a very simple project which you would like to complete in one file only, then use Method 1. 
Use this method for large projects which require lots of JavaScript code. Commonly we also use this method to connect our HTML file to JavaScript Frameworks and Libraries such as React & Redux, etc.
Okay, let's see the code for this method.

<script type="text/javascript" src="your-javascript-code-file.js"></script>

And those were the 2 ways to link JS to HTML. Here's a summary of what we saw.

1. Internal: <script>//your code here</script>
2. External: <script src="fine-name.js"></script>


Javascript Files

In method 2 (external JS code), we need to link our JS file to our HTML file via <script> tag. However, to do this you will need to know how to make a JavaScript file and how its format is.
JavaScript files end with the extension of .js only and can only include JavaScript code inside the file. Commonly, we will keep this .js file in a folder named js and then use the correct file paths to link JS to HTML. If you're interested in a tutorial on file paths, do comment below!
In case you faced trouble creating the Javascript file, you can download an empty JavaScript file I prepared here.


Thank You!

Do contact me at codingporium@protonmail.com or comment down below any doubts or suggestions you have. To subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!


Post a Comment

Previous Post Next Post