Where to put JavaScript in an HTML Document ?
JavaScript in body or head: Scripts can be placed inside the body or the head section of an HTML page or inside both head and body.
JavaScript in head: A JavaScript function is placed inside the head section of an HTML page and the function is invoked when a button is clicked.
Examples:
<!DOCTYPE html> <html> <head> <script> function gfg() { document.getElementById("demo").innerHTML = "Geeks For Geeks"; } </script> </head> <body> <h2>JavaScript in Head</h2> <p id="demo" style="color:green;">geeksforgeeks.</p> <button type="button" onclick="gfg()">click it</button> </body> </html> |
Output:
Before clicking the button
After clicking the button
JavaScript in body: A JavaScript function is placed inside the body section of an HTML page and the function is invoked when a button is clicked.
Example:
<!DOCTYPE html> <html> <center> <body> <h2>JavaScript in Body</h2> <p id="demo">geeksforgeeks.</p> <button type="button" onclick="gfg()">Try it</button> <script> function gfg() { document.getElementById("demo").innerHTML = "Geeks For Geeks"; } </script> </body> </center> </html> |
Output:
Before clicking the button
After click on button
External JavaScript: JavaScript can also be used as external files. JavaScript files have file extension .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:
<!DOCTYPE html> <html> <center> <body> <h2>External JavaScript</h2> <p id="demo">Geeks For Geeks.</p> <button type="button" onclick="myFunction()">Try it</button> <script src="myScript.js"></script> </body> <center> </html> |
Output before clicking:
Output after clicking:
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
.png)
