JavaScript Dónde
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>
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
Un JavaScript functiones 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 número de secuencias de comandos en un documento HTML.
Los scripts se pueden colocar en el <body>, o en la <head>sección de una página HTML, o en ambos.
JavaScript en <cabeza>
functionEn este ejemplo, se coloca un JavaScript en la <head>sección 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>
JavaScript en <cuerpo>
functionEn este ejemplo, se coloca un JavaScript en la <body>sección 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>
Colocar guiones en la parte inferior del elemento <body> mejora la velocidad de visualización, porque la interpretación de los guiones 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 usa el mismo código en muchas páginas web diferentes.
Los archivos JavaScript tienen la extensión de archivo .js .
Para usar una secuencia de comandos externa, coloque el nombre del archivo de secuencia de comandos en el srcatributo (fuente) de una <script>etiqueta:
Ejemplo
<script src="myScript.js"></script>
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 <script>etiqueta.
Los scripts externos no pueden contener <script>etiquetas.
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, use 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 usa una URL completa para vincular a myScript.js:
Ejemplo
<script src="https://www.w3schools.com/js/myScript.js"></script>
Este ejemplo utiliza una ruta de archivo para vincular a myScript.js:
Ejemplo
<script src="/js/myScript.js"></script>
Este ejemplo no usa una ruta para vincular a myScript.js:
Ejemplo
<script src="myScript.js"></script>
Puede leer más sobre rutas de archivos en el capítulo Rutas de archivos HTML .