La etiqueta <script>
En HTML, el código Javascript es insertado entre las etiquetas de apertura y cierre <script></script>.
Ejm
<script>
document.getElementById("demo").innerHTML = "Mi primer Javascript";
</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 el usuario hace clic en un botón.
Javascript en <head> y <body>
Puedes incluir código Javascript tanto en el <head> como en el <body> de tus documentos.
Javascript en <head>
En este ejm, una función Javascript es colocada en el <head> de nuestra página. La función es invocada (llamada) cuando un botón es clicado.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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">Un párrafo cualquiera</p>
<button type="button" onclick="myFunction()">Haz clic</button>
</body>
</html>
Javascript en <body>
En este ejm, una función Javascript es colocada en la sección del <body> de nuestro elemento HTML. La función después es invocada cuando alguien hace clic en el botón.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript en el body</title>
</head>
<body>
<h1>Javascript en el body</h1>
<p id="demo">Un párrafo cualquiera</p>
<button type="button" onclick="myFunction()">Haz clic</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Mi primer Javascript";
}
</script>
</body>
</html>
Javascript en archivos externos
Los scripts también se pueden colocar en archivos externos. Dichos archivos son prácticos, ya que el mismo código puede ser usado en diferentes páginas HTML. Los archivos Javascript tienen la extensión .js.
Para utilizar un archivo externo, debemos poner el nombre del archivo utilizando el atributo src dentro de una etiqueta script, de la siguiente manera
Ejm
<script src="javascript.js"></script>
Puedes incluir dicho código tanto en el <head> como en el <body> de nuestro documento HTML
Ventajas de un archivo Javascript externo
Incluir nuestro código Javascript en un archivo externo tiene múltiples ventajas, entre las cuales destacan:
- Se separa el código HTML del código Javascript.
- Hace más fácilmente legible el código HTML y el código Javascript.
- Los archivos Javascript externos cargan más rápido que si incluimos los scripts en el propio documento HTML
Puedes incluir varios archivos Javascript mediante varias etiquetas <script>, de la siguiente manera.
Ejm
<script src="javascript1.js"></script>
<script src="javascript2.js"></script>
Tipos de rutas para acceder a los archivos
Se puede utilizar 3 tipos de rutas para acceder a los archivos Javascript externos, son:
- URLs absolutas
- Con una ruta de archivo (/js/)
- Sin una ruta de archivo
Ejm
// RUTA ABSOLUTA
<script src="https://www.w3schools.com/js/myScript.js"></script>
// RUTA RELATIVA
<script src="/js/myScript.js"></script>
// SIN RUTA
<script src="myScript.js"></script>