Donde incluir Javascript

La etiqueta <script>

En HTML, el código Javascript es insertado dentro de las etiquetas <script> y </script>.

Ejm

<script>
document.getElementById('demo')innerHTML="Mi primer Javascript";
</script>

Ejm completo

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Javascript en body</h2>	
	<p id="demo"></p>
	<script>
		document.getElementById("demo").innerHTML="Mi primer Javascript";
	</script>
</body>
</html>

Los ejemplos antiguos de JavaScript pueden usar un atributo de tipo: <script type = “text / javascript”>. El atributo de tipo no es obligatorio. JavaScript es el lenguaje de scripts de comandos predeterminado en HTML.

Funciones y eventos Javascript

Una función Javascript es un bloque de código Javascript que puede ser ejecutado cuando es llamado. Por ejm, una función puede ser llamada cuando un evento ocurre, como cuando el usuario hace clic en un botón.

Javascript en <head> o <body>

Puedes poner cualquier número de scripts en un documento HTML. Los scripts pueden ser colocados tanto en el <head> como en el <body> de nuestro documento, o en ambos.

Javascript en <head>

En el siguiente ejm, una función Javascript es puesta en la sección del <head> de una página HTML. Dicha función será invocada (llamada) cuando un botón es clicado.

Ejm

<!DOCTYPE html>
<html lang="es"><br>
<head>
<script>
	function myFunction()
	{
		document.getElementById("demo").innerHTML="Párrafo cambiado";
	}
</script>	
</head>
<body>
	<h2>Javascript en el head</h2>	
	<p id="demo">Un párrafo</p>
	<button type="button" onClick="myFunction()">Haz clic</button>
</body>
</html>

Javascript en <body>

En el siguiente ejm, una función Javascript es colocada en la etiqueta <body> de nuestra página web. Dicha función es invocada (llamada) cuando un botón es clicado.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Una página con contenido Javascript</h2>	
	<p id="demo">Un párrafo</p>
	<button type="button" onClick="myFunction()">Haz clic</button>
	<script>
		function myFunction()
		{
			document.getElementById("demo").innerHTML="Párrafo cambiado";
		}
	</script>
</body>
</html>

Nota: Colocar scripts en la parte inferior del elemento <body> mejora la velocidad de visualización, porque la interpretación de los scripts ralentiza la visualización.

Javascript externo

Los scripts de Javascript también pueden ser llamados desde archivos externos.

Archivo externo: myScript.js

function myFunction()
{
document.getElementById("demo").innerHTML="Párrafo cambiado";
}

Los scripts externos son prácticos cuando se usa el mismo código en muchas páginas web diferentes. Los archivos Javascript tienen la extensión .js. Para usar un script externo, coloca el nombre del archivo de script en el atributo src (fuente) de una etiqueta <script>.

Ejm

<script src="myScript.js"></script>

Puedes colocar una referencia de script externo en <head> o <body> como prefieras. El script se comportará como si estuviera ubicado exactamente donde se encuentra la etiqueta <script>.

Nota: Los scripts externos no pueden contener etiquetas <script>.

Ventajas de los archivos Javascript externos

Colocando los scripts en archivos Javascript externos tiene muchas ventajas.

  • Se separa el código Javascript del código HTML.
  • Hace que tanto Javascript como HTML sean más fáciles de entender y mantener.
  • Los archivos JavaScript en caché pueden acelerar las cargas de página

Para usar varios archivos Javascript en tu página puedes usar varias etiquetas <script> apuntando a dichos archivos.

Ejm

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Referencias externas

Se puede hacer referencia a los scripts externos con una URL completa o con una ruta relativa a la página web actual. El siguiente ejemplo utiliza una URL completa para vincular a un script.

Ejm

<script src="https://websarrolladores.com/js/myScript1.js"></script>

El siguiente ejemplo utiliza un script ubicado en una carpeta especificada en el sitio web actual:

Ejm

<script src="/js/myScript1.js"></script>

El siguiente ejm utiliza un script situado en la misma carpeta que el archivo.

Ejm

<script src="myScript1.js"></script>