How To Link JavaScript To HTML Using 2 Ways
Hey friends, today I’ll explain all you need to know to start link JavaScript to HTML. we use 3 ways to link javascript file to html file.
Link JavaScript To HTML Using 2 Ways
2. External JavaScript Code
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.
10+ Javascript Projects For Beginners With Source Code
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.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Thank You!
comment down below any doubts or suggestions you have. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!
Written by – CodingPorium
