How To Include External JavaScript In HTML
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to include external JavaScript in HTML, for link any external file we need to mention their location path with file name so we can easily access them, in html we had predefined link tag for each type of external file like css,js,xml.
Here we need to use script tag with src attribute it will helps we can easily import any external javascript files to our html page.
Step By Step Guide On How To Include External JavaScript In HTML :-
Here we defined head tag with id attribute for appends text defined in external script file it is done by script.js file. Using script tag with src attribute we linked script.js file on our current html file.
So what we defined in script file will work on our current html page, here we defined alert message it will alert user with some message and we appends heading line text on h1 html tag by id attribute ‘h’.
<!DOCTYPE html> <html> <head> <title>INCLUDE EXTERNAL JS FILE</title> </head> <body> <h1 id="h"></h1> <script src="PDF/script.js"></script> </body> </html>
SCRIPT.JS
alert("THIS IS EXTERNAL FILE");
document.getElementById('h').innerHTML="WELCOME TO EXTERNAL SCRIPT PAGE";
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We defined one h1 tag with id attribute ‘h’ without text because we defined text on script.js file. Then we imported external script.js file using script with src attribute.
- In script file we displayed message ‘THIS IS EXTERNAL FILE’ on alert box using alert method and we appended message ‘WELCOME TO EXTERNAL SCRIPT PAGE’ on h1 tag using id ‘h’ by innerHTML in javascript.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to include external javascript file in html.
When we executes our program on browser we can see one alert box with message will appear on top of webpage and we appended message will displayed on webpage.
We can also define in script external file with any other content or animation code anything that will depends on our own thought try to explore differently.
I hope this tutorial on how to include external JavaScript in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
