En HTML, el código Javascript es insertado entre las etiquetas <script></script>.
Funciones y eventos Javascript
Una función Javascript es un bloque de código que puede ser ejecutado cuando es llamado. Por ejm, una función puede ser llamada cuando un evento ocurre, como cuando un usuario hace clic en un botón.
Javascript en <head> o en <body>
Puedes poner un número ilimitado de scripts en cualquier parte del documento, y pueden estar tanto entre las etiquetas <head></head> como entre las etiquetas <body></body>.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript en el head</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Párrafo cambiado";
}
</script>
</head>
<body>
<h1>Javascript en el head</h1>
<p id="demo">
Este párrafo será cambiado cuando un usuario haga clic en el botón
</p>
<button type="button" onclick="myFunction()">
Haz clic para cambiar el texto del párrafo
</button>
</body>
</html>
Ahora vamos a ver un ejm de código Javascript incluido en el cuerpo de nuestro documento (entre las etiquetas <body></body>).
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript en el cuerpo de un documento</title>
</head>
<body>
<h1>Javascript en el cuerpo de un documento</h1>
<p id="demo">
Este texto será cambiado por otro texto cuando el usuario haga clic en el
botón
</p>
<button type="button" onclick="myFunction()">Haz clic en el botón</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
"Este es el nuevo texto que aparecerá";
}
</script>
</body>
</html>
Javascript externo
Los scripts pueden ser colocados en archivos externos. Los scripts externos son prácticos cuando el mismo código es utilizado en diferentes páginas. Los archivos Javascript tienen la extensión .js.
Para utilizar un archivo Javascript externo, hay que poner el nombre del script en el atributo src de una etiqueta <script> de la siguiente manera.
Ejm
<script src="miScript.js"></script>
Se puede colocar un script externo tanto en <head> o <body>. El script se comportará como si estuviera ubicado exactamente donde se encuentra la etiqueta <script>.
Ventajas de los archivos Javascript externos
Estas son algunas de las ventajas de situar nuestros archivos Javascript de manera externa.
- Se separa el código HTML del código Javascript.
- Es más sencillo llevar el mantenimiento de dichos archivos.
- Los archivos Javascript almacenados en caché pueden acelerar la carga de la página.
Llamar a un archivo Javascript externo
A un archivo externo se lo puede llamar de 3 maneras distintas:
- Con una URL absoluta (<script src=”https://sutilweb.eu/js/miScript.js”></script>).
- Con una URL relativa (<script src=”./js/miScript.js”></script>).
- Con una URL relativa que no tenga ninguna ruta (<script src=”miScript.js”></script>).