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 podían usar un atributo
type:<script type="text/javascript">. El atributotypeno es obligatorio. JavaScript es el lenguaje de secuencias de comandos predeterminado en HTML.
Funciones y eventos de JavaScript
Una función 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ás mucho más sobre funciones y eventos en capítulos posteriores.
JavaScript en <head> o <body>
Puedes colocar cualquier cantidad de scripts en un documento HTML.
Los scripts se pueden colocar en la sección <body>, o en el <head> de una página HTML, o en ambas.
JavaScript en <head>
En este ejemplo, se coloca una función de JavaScript 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>
JavaScript en <body>
En este ejemplo, se coloca una función de JavaScript 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>
Colocar scripts en la parte inferior del elemento
<body>mejora la velocidad de visualización, porque la interpretación de scripts ralentiza la visualización.
JavaScript externo
Los scripts también se pueden colocar en archivos externos:
Ejemplo:
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 JavaScript tienen la extensión de archivo .js
Para utilizar un script externo, coloque el nombre del archivo del script en el atributo src de una etiqueta <script>:
Ejemplo:
<script src="myScript.js"></script>
Puedes colocar una referencia de script 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 usar 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 ninguna ruta
Este ejemplo utiliza 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 utiliza ninguna ruta para vincular a myScript.js:
Ejemplo:
<script src="myScript.js"></script>
Puedes leer más sobre rutas de archivos en el capítulo: HTML File Paths.
Traducido con 💚 desde W3Schools.com