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