JavaScript code is inserted between <script> and </script> tags when used in an HTML document. Scripts can be placed inside the body or the head section of an HTML page or inside both the head and body. We can also place JavaScript outside the HTML file which can be linked by specifying its source in the script tag.
Add JavaScript Code inside Head Section
JavaScript code is placed inside the head section of an HTML page and the function is invoked when a button is clicked.
Example: html
<!DOCTYPE html><html><head> <title> Add JavaScript Code inside Head Section </title> <script> function myFun() { document.getElementById("demo") .innerHTML = "Content changed!"; } </script></head><body> <h2> Add JavaScript Code inside Head Section </h2> <h3 id="demo" style="color:black;"> codeconfig.in </h3> <button type="button" onclick="myFun()"> Click Here </button></body></html> |
Output:
Add JavaScript Code inside Body Section
JavaScript Code is placed inside the body section of an HTML page and the function is invoked when a button is clicked.
Example:
html
<!DOCTYPE html><html><head> <title> Add JavaScript Code inside Body Section </title></head><body> <h2> Add JavaScript Code inside Body Section </h2> <h3 id="demo" style="color:black;"> CodeConfig.in </h3> <button type="button" onclick="mytest()"> Click Here </button> <script> function mytest() { document.getElementById("demo") .innerHTML = "Content changed!"; } </script></body></html> |
Output:
External JavaScript
JavaScript can also be used in external files. The file extension of the JavaScript file will be .js. To use an external script put the name of the script file in the src attribute of a script tag. External scripts cannot contain script tags.
Example: Script.js
JavaScript
function myFun () { document.getElementById('demo') .innerHTML = 'Paragraph Changed'} |
Example: html
<!DOCTYPE html><html><head> <title> External JavaScript </title></head><body> <h2> External JavaScript </h2> <h3 id="demo" style="color:green;"> CodeConfig.in </h3> <button type="button" onclick="myFun()"> Click Here </button></body></html> |
Output:
Advantages of External JavaScript
- Cached JavaScript files can speed up page loading.
- It makes JavaScript and HTML easier to read and maintain.
- It separates the HTML and JavaScript code.
- It focuses on code reusability which is one JavaScript Code that can run in various HTML files.
External JavaScript References
We can reference an external script in three ways in JavaScript:
By using a full URL:
src = "https://codeconfig.in/js/script.js"
By using a file path:
src = "/js/script.js"
Without using any path:
src = "script.js"