Para ejecutar JavaScript en una página HTML el código debe insertarse entre las etiquetas <script> y </script>.
Es posible insertar la etiqueta script tantas veces como sea necesario y debe encontrarse entre los tags <head> o <body>
Etiqueta script en head
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Cambiando el contenido del parrafo";
}
</script>
</head>
<body>
<h1>Página de ejemplo</h1>
<p id="demo">Parrafo</p>
<button type="button" onclick="myFunction()">Cambiar contenido</button>
</body>
</html>
Al abrir el archivo en con un navegador aparecerá lo siguiente:
Al presionar el boton «Cambiar contenido» el contenido la etiqueta identificada como «demo» cambiará.
Llamar código JavaScript en otro archivo
Otra forma de insertar el código y la más recomendada en proyectos de mayor tamaño, es la inserción de la etiqueta script haciendo referencia a un archivo externo, de extensión .js de JavaScript.
<script src="archivo_javascript.js"></script>
En este caso, existirán dos archivos. Uno llamado index,html y otro archivo_javascript.js y de este modo es posible separar la la vista el código estático «html» del que nos dará funcionalidad del lado del cliente «JavaScript».
El archivo HTML es el siguiente:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="archivo_javascript.js"></script> </head> <body> <h1>Página de ejemplo</h1> <p id="demo">Parrafo</p> <button type="button" onclick="miFuncion()">Cambiar contenido</button> </body> </html>
El archivo JavaScript contienen las mismas líneas de código que encontraban entre las etiquetas script.
function miFuncion() {
document.getElementById("demo").innerHTML = "Cambiando el contenido del parrafo";
}
Asegúrate de que los dos archivos estén en la misma carpeta.