JavaScript In HTML Example
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of JavaScript in HTML example, as we know in two ways we can use javascript in html either internal or external based on our convenient. Here we used both ways of javascript with example.
We defined two div tags with different id and using internal and external javascript we styled both div tags separately by style object we can see the result on webpage.
Step By Step Guide On JavaScript In HTML Example :-
Here we defined h3 tag for display heading for this program and two div tags defined with different id’s ‘use1,use2’ for appending styles in both ways of javascript.
Internal script means we can write javascript code on html page for that we have to define <script></script> tag either within <head> or within <body> then within <script> tag we define any script codes it will affect html elements directly.
If we need to use as external type file then we need to import separately created javascript file within html document so we have to define <script> tag with ‘src’ attribute with the help of this we can give path of external javascript file.
This is also same as internal we define this either within <head> tags or <body> tags.
<!DOCTYPE html>
<html>
<head>
<title>HOW TO USE JAVASCRIPT IN HTML</title>
</head>
<body>
<h3>INTERNAL / EXTERNAL JAVASCRIPT</h3>
<div id="use1"></div>
<div id="use2"></div>
<script>
document.getElementById('use1').innerHTML="This div styled by internal javascript";
var ele1=document.getElementById('use1');
ele1.style.backgroundColor="yellow";
ele1.style.width="fit-content";
ele1.style.padding="10px";
</script>
<script src="external.js"></script>
</body>
</html>
External.js
document.getElementById('use2').innerHTML="This div styled by external javascript";
var ele2=document.getElementById('use2');
ele2.style.backgroundColor="yellowgreen";
ele2.style.width="fit-content";
ele2.style.padding="10px";
- <!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 contain 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.
- Here we defined h3 tag for display heading ‘INTERNAL / EXTERNAL JAVASCRIPT’ on webpage then we defined two div tags with id’s ‘use1,use2’ for apply both javascript on it.
- In script we defined code is called internal javascript. Here we inserting content ‘This div styled by internal javascript’ on div by id ‘use1’, we referring div element by variable ‘ele1’ and using that ‘ele1’ variable we appending styles of ‘background color to ‘yellow’,width set to fit-content, padding set to 10px around sides’.
- Same as we done on div element by id ‘use2’ but we defined those code as separately at external.js javascript file so we needs to import for that we defined ‘<script src="external.js"></script>’ line at bottom of body tag.
- 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 understand how to use javascript file in html file either internally or externally.
When we executing this program on browser we can see the heading with two div tags result of respective block of styles we applied on div elements.
So we can choose any ways to use javascript code in html files both will gives same result.
Internal script result affected div ‘use1’ and external script result affected div ‘use2’ now we can understand when seeing result on webpage.
I hope this tutorial on JavaScript in html example helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
