En este tutorial aprenderás a incluir JavaScript en un documento HTML.
Trabajando con Script del lado del cliente
El scripting del lado del cliente se refiere al tipo de programas informáticos que son ejecutados por el navegador web del usuario. JavaScript (JS) es el lenguaje de scripting del lado del cliente más popular en la web.
El elemento <script> se utiliza para incrustar o referenciar JavaScript dentro de un documento HTML para añadir interactividad a las páginas web y proporcionar una experiencia de usuario significativamente mejor.
Algunos de los usos más comunes de JavaScript son la validación de formularios, la generación de mensajes de alerta, la creación de galerías de imágenes, mostrar contenido oculto, la manipulación del DOM, y muchos más.
Añadir JavaScript a las páginas HTML
JavaScript puede ser incrustado directamente dentro de la página HTML o colocado en un archivo de script externo y referenciado dentro de la página HTML. Ambos métodos utilizan el elemento <script>.
Incorporar JavaScript
Para incrustar JavaScript en un archivo HTML, basta con añadir el código como contenido de un elemento <script>.
El JavaScript del siguiente ejemplo escribe una cadena de texto en una página web.
Ejemplo
Prueba este código »
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Embedding JavaScript</title></head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script></body></html></body>, ya que cuando el navegador encuentra un script hace una pausa en la representación del resto de la página hasta que analiza el script, lo que puede afectar significativamente al rendimiento de su sitio.
Llamada a un archivo JavaScript externo
También puedes colocar tu código JavaScript en un archivo separado (con una extensión .js), y llamar a ese archivo en tu documento HTML a través del atributo src de la etiqueta <script>.
Esto es útil si quieres que el mismo script esté disponible para varios documentos. Le ahorra repetir la misma tarea una y otra vez y hace que su sitio web sea mucho más fácil de mantener.
El siguiente ejemplo demuestra cómo enlazar un archivo JS externo en HTML.
Ejemplo
Prueba este código »
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Linking External JavaScript</title></head><body> <div></div> <script src="hello.js"></script></body></html>src, el elemento <script> debe estar vacío. Esto significa simplemente que no se puede utilizar el mismo elemento <script> tanto para incrustar el JavaScript como para enlazar con un archivo JavaScript externo en un documento HTML.
.js, como «hola.js». Además, el archivo JavaScript externo sólo contiene declaraciones JavaScript; no contiene el elemento <script>...</script> como el JavaScript incrustado.
El elemento HTML noscript
El elemento <noscript> se utiliza para proporcionar un contenido alternativo para los usuarios que han deshabilitado JavaScript en su navegador o que tienen un navegador que no admite scripts del lado del cliente.
Este elemento puede contener cualquier elemento HTML, aparte de <script>, que pueda incluirse en el elemento <body> de una página HTML normal. Veamos un ejemplo:
Ejemplo
Prueba este código »
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Noscript Demo</title> </head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> <noscript> <p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript></body></html>noscript sólo se mostrará si el navegador del usuario no soporta scripts, o los scripts están desactivados en el navegador.