JavaScript en el cuerpo o en el encabezado: los scripts se pueden colocar dentro del cuerpo o en la sección del encabezado de una página HTML o dentro del encabezado y el cuerpo.
JavaScript en el encabezado: una función de JavaScript se coloca dentro de la sección del encabezado de una página HTML y la función se invoca cuando se hace clic en un botón.
Ejemplos:
<!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>
Salida:
Antes de hacer clic en el botón 
Después de hacer clic en el botón
JavaScript en el cuerpo: una función de JavaScript se coloca dentro de la sección del cuerpo de una página HTML y la función se invoca cuando se hace clic en un botón.
Ejemplo:
<!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>
Salida:
Antes de hacer clic en el botón 
Después de hacer clic en el botón
JavaScript externo: JavaScript también se puede utilizar como archivos externos. Los archivos JavaScript tienen la extensión de archivo .js. Para usar una secuencia de comandos externa, coloque el nombre del archivo de secuencia de comandos en el atributo src de una etiqueta de secuencia de comandos. Los scripts externos no pueden contener etiquetas de script.
Ejemplo:
<!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>
Salida antes de hacer clic: 
Salida después de hacer clic:
Ventajas de JavaScript externo:
- Los archivos JavaScript almacenados en caché pueden acelerar la carga de la página
- Hace que JavaScript y HTML sean más fáciles de leer y mantener.
- Separa el código HTML y JavaScript
- Se centra en la reutilización del código, que es un código JavaScript que se puede ejecutar en varios archivos HTML.