JavaScript A donde
"Estamos aquí para contribuir a este mundo. De lo contrario, ¿por qué estamos aquí?"
Steve Jobs
La etiqueta <script>
En HTML, el código JavaScript se inserta entre las etiquetas <script> y </script>.
Ejemplo
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Inténtalo tú mismo »
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 secuencias de comandos predeterminado en HTML.
Funciones y eventos de JavaScript
Una function de JavaScript es un bloque de código JavaScript que se puede ejecutar cuando se "llama".
Por ejemplo, se puede llamar a una función cuando ocurre un evento, como cuando el usuario hace clic en un botón.
Aprenderá mucho más sobre funciones y eventos en capítulos posteriores.
JavaScript en <head> o <body>
Puede colocar cualquier cantidad de scripts en un documento HTML.
Los scripts se pueden colocar en la sección <body> o en la sección <head> de una página HTML, o en ambos.
JavaScript en <head>
En este ejemplo, una function de JavaScript se coloca en la sección <head> de una página HTML.
La función se invoca (llama) cuando se hace clic en un botón:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body><h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Inténtalo tú mismo »
JavaScript en <body>
En este ejemplo, una function de JavaScript se coloca en la sección <body> de una página HTML.
La función se invoca (llama) cuando se hace clic en un botón:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Inténtalo tú mismo »
Colocar guiones en la parte inferior del elemento <body> mejora la velocidad de visualización, porque la interpretación del guion ralentiza la visualización.
JavaScript externo
Los scripts también se pueden colocar en archivos externos:
Archivo externo: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Los scripts externos son prácticos cuando se utiliza el mismo código en muchas páginas web diferentes.
Los archivos de JavaScript tienen la extensión de archivo .js.
Para usar un script externo, coloque el nombre del archivo de script en el atributo src (fuente) de un <script> etiqueta:
Puede colocar una referencia de secuencia de comandos externa en <head> o <body> como desee.
El script se comportará como si estuviera ubicado exactamente donde se encuentra la etiqueta <script>.
Los scripts externos no pueden contener etiquetas <script>.
Ventajas de JavaScript externo
Colocar scripts en archivos externos tiene algunas ventajas:
- Separa HTML y código
- Hace que HTML y JavaScript sean más fáciles de leer y mantener
- Los archivos JavaScript almacenados en caché pueden acelerar la carga de la página
Para agregar varios archivos de script a una página, utilice varias etiquetas de script:
Ejemplo
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Referencias externas
Se puede hacer referencia a un script externo de 3 maneras diferentes:
- Con una URL completa (una dirección web completa)
- Con una ruta de archivo (como /js/)
- Sin ningún camino
Este ejemplo utiliza una URL completa para vincular a myScript.js:
Este ejemplo utiliza una ruta de archivo para vincular a myScript.js:
Este ejemplo no utiliza ninguna ruta para vincular myScript.js:
Puede leer más sobre rutas de archivos en el capítulo HTML Rutas de archivos.
