En donde colocar el código JavaScript
Una vez entendida la funcionalidad de JavaScript para darle un comportamiento más interactivo para nuestros visitantes y/o usuarios en nuestras páginas web, surje la pregunta, ¿En donde colocar el código JavaScript?.
La etiqueta <script>
En HTML, el código JavaScript debe ser insertado entre las etiquetas <script>
y </script>
.
<script>
document.getElementById("demo").innerHTML = "Hola mundo";
</script>
En códigos antiguos pueden encontrarse el atributo type en las etiquetas <script>
de la siguiente manera:
<script type="text/javascript">
document.getElementById("demo").innerHTML = "Hola mundo";
</script>
El atributo type
ya no es requerido, dado que JavaScript el lenguaje de scripts predeterminado en HTML5.
Funciones y Eventos JavaScript
Una función JavaScript es un bloque de código JavaScript, que puede ser ejecutado cuanto es llamado. Por ejemplo, una función puede ser cuando un evento ocurre, como cuando el usuario da click a un botón.
El código JavaScript en el <head> o en el <body>
En un documento HTML se pueden poner cualquier número de scripts. Los scripts pueden colocarse en la sección <body>
o en la sección <head>
de una página HTML o en ambos.
Javascript en el <head>
En el siguiente ejemplo, una función JavaScript es colocado en sección <head>
de una página HTML. La función es llamada cuando un botón es cliqueado:
<!doctype html>
<html>
<head>
<script>
function mifuncion(){
document.getElementById("demo").innerHTML = "Párrafo cambiado";
}
</script>
</head>
<body>
<h1>Página Web</h1>
<p id="demo">Un Párrafo.</p>
<button type="button" onclick="mifuncion()">Cambiar Párrafo</button>
</body>
</html>
JavaScript en el <body>
En el siguiente ejemplo, una función JavaScript es colocada en la sección <body>
de una página HTML. La función es llamada cuando un botón es cliqueado:
<!doctype html>
<html>
<body>
<h1>Página Web</h1>
<p id="demo">Un Párrafo.</p>
<button type="button" onclick="mifuncion()">Cambiar Párrafo</button>
<script>
function mifuncion(){
document.getElementById("demo").innerHTML = "Párrafo cambiado.";
}
</script>
</body>
</html>
Colocar scripts en parte inferior de el elemento <body>
mejora la velocidad de visualización.
JavaScript Externo
Los scripts también pueden ser colocados en archivos externos, por ejemplo en un archivo externo llamado misscripts.js en donde colocamos el siguiente código javascript:
function mifuncion(){
document.getElementById("demo").innerHTML = "Párrafo cambiado.";
}
Los scripts externos son practicos cuando el mismo código es usado en varias páginas web.
Los archivos JavaScript tienen la extensión .js.
Para usar un script externo, se especifica el nombre del archivo del script en el atributo src de una etiqueta <script>
:
<script src="miscript.js"></script>
Se pueden colocar referencias a script externos tanto en <head>
o <body>
como se desee. El script funcionara como si estuviera colocado exactamente en donde se encuentra la etiqueta <script>
que hace la referencia al archivo externo.
Los scripts externos no deben contener etiquetas <script>
.
JavaScript Externo Avanzado
Colocar scripts en archivos externos tienen las siguientes ventajas:
- Separa el código JavaScript del HTML.
- Hace más fácil de leer el HTML y JavaScript, y por consiguiente más fácil de dar mantenimiento.
- Los archivos JavaScript se cargan en caché, pudiendo acelerar la carga de páginas.
Para agregar varios archivos JavaScript a una página, use varias etiquetas <script>
, como se muestra a continuación:
<script src="misscripts.js"></script>
<script src="misscripts2.ja"></script>
Referencias Externas
Scripts externos pueden ser referenciados con una URL completa o con una ruta relativa a la página actual.
En el siguiente ejemplo se usa un URL completa para enlazar a un scritp:
<script src="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
En el siguiente ejemplo se usa un script localizado en una carpeta especifica en el sitio web actual:
<script src="/js/misscripts.js"></script>
En el siguiente ejemplo se usa un script localizado en la misma carpeta que la página actual:
<script src="misscripts.js"></script>