JavaScript – La etiqueta script

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.