Una carrera exitosa como desarrollador web comienza con una base sólida en programación y el dominio de los lenguajes de programación. Uno de estos lenguajes de programación es JavaScript.
JavaScript se ha utilizado para construir algunos de los sitios web y aplicaciones más populares del mundo, por lo que los desarrolladores web que pueden programar en este lenguaje son muy solicitados.
Este artículo te mostrará cómo añadir JavaScript a HTML en dos sencillos pasos. También cubriremos los fundamentos de JavaScript y examinaremos sus múltiples usos en el mundo de la tecnología.
¿Qué es JavaScript?
JavaScript o JS es un lenguaje de programación que permite implementar elementos dinámicos e interactivos en las páginas web. JS también se utiliza para crear aplicaciones web y juegos de navegador. Es lo suficientemente versátil para varias aplicaciones incluyendo servidores, controles de hardware y software.
JavaScript facilita las interacciones entre el navegador web del usuario y el sitio web que éste visita. Los principales navegadores web tienen un motor JavaScript dedicado para ejecutar el código JS en los dispositivos de los usuarios.
Básicamente, JavaScript evita que las páginas web sean estáticas y permite a los desarrolladores añadir elementos dinámicos e interactivos. Algunos ejemplos son la inserción de animaciones, audio y vídeo en las páginas web (con botones de pausa y reproducción) y la colocación automática del cursor de texto en el cuadro de búsqueda al cargar la Búsqueda de Google.
Junto a HTML y CSS, JavaScript forma parte de las tres tecnologías básicas necesarias para crear sitios web. HTML (siglas de HyperText Markup Language) proporciona estructura al contenido de la web. Algunos ejemplos son la definición de títulos, tablas de datos y listas con viñetas.
CSS (Cascading Style Sheets) aplica el estilo y el diseño al contenido HTML. Algunos ejemplos son la configuración de los colores de fondo y de la fuente, la estandarización del espaciado entre elementos y la adición de imágenes de fondo.
Aunque Java y JavaScript tienen una sintaxis y unas bibliotecas estándar similares, estos dos lenguajes de programación son bastante diferentes: Java es un lenguaje de programación OOP (es decir, se ejecuta en una máquina virtual o en un navegador). Por otro lado, JavaScript es un lenguaje de scripting OOP (es decir, se ejecuta sólo en el navegador).
Si quieres saber más sobre JavaScript, echa un vistazo a nuestra interesante publicación en el blog.
¿Para qué se utiliza JavaScript?
Puedes utilizar JavaScript para crear sitios web complejos, juegos de navegador y aplicaciones. También se puede utilizar para conectar servidores a sitios y aplicaciones web. Muchos de los sitios web y aplicaciones más utilizados en Internet utilizan JavaScript, como Facebook, Netflix, Google y YouTube.
En los últimos años, han surgido numerosas tecnologías para aprovechar la potencia de este lenguaje. En la actualidad, JS cuenta con una amplia colección de frameworks que puedes utilizar para crear aplicaciones móviles y web.
Los frameworks son bibliotecas de código JS pre-escrito. Funcionan de forma similar a los planos y ayudan a los desarrolladores a crear aplicaciones y sitios web con mayor funcionalidad.
Estos son los tres frameworks de aplicaciones JS más populares:
- React, que puedes utilizar para construir interfaces de usuario para aplicaciones web.
- React Native, que se puede utilizar para crear aplicaciones móviles.
- Node.js, que permite la comunicación bidireccional con servidores para el intercambio de datos.
JavaScript es necesario para que las páginas web sean dinámicas e interactivas. Con JS incorporado en su código, los desarrolladores pueden implementar las siguientes características:
- Mostrar actualizaciones de contenido oportunas y relevantes.
- Mostrar mapas interactivos.
- Insertar menús desplegables y tipo hamburguesa.
- Reproducir audio y vídeo.
- Acercar y alejar imágenes.
- Añadir gráficos y animaciones 2D/3D.
- Mostrar galerías de imágenes en formato carrusel.
- Insertar efectos hover.
- Mostrar y ocultar menús.
- Avisar a los usuarios de los caracteres no válidos al escribir las contraseñas.
JS también se utiliza para crear elaborados juegos en el navegador. Algunos de los juegos de navegador más populares del mundo utilizan JS, como Angry Birds, Bejeweled y Tetris.
Debido a su versatilidad y ubicuidad como herramienta de desarrollo web, JavaScript sigue siendo el lenguaje de programación más utilizado entre los desarrolladores, según Statista. En 2021, casi el 65% de los desarrolladores utilizaban JavaScript. Es más, un abrumador 98% de los sitios web utilizan JS en el lado del cliente para manejar el comportamiento de la página web, según W3Techs.
Cómo añadir JavaScript a HTML
Ya hemos explorado cómo HTML, CSS y JavaScript son necesarios para construir páginas web funcionales y dinámicas. Una buena metáfora sería pensar en tu sitio web como un pastel de tres capas: HTML como base, CSS como capa intermedia y JavaScript como capa superior.
Primero se estructura el contenido de la página web con HTML, luego se añaden elementos de estilo y un diseño adecuado con CSS. A continuación, hay que añadir funciones dinámicas e interactivas con HTML.
Hay dos maneras de añadir JavaScript a HTML: la primera es incrustar el código JS en línea en HTML, mientras que la segunda requiere crear un archivo de JS externo.
1. Introduce código JavaScript en línea en HTML
Cuando se trabaja con archivos para Internet, JS necesita ser cargado y ejecutado junto con el marcado de HTML. Puedes hacer esto en línea dentro de un documento HTML.
2. Crea un archivo JavaScript externo
Otra forma de cargar JS y ejecutarlo junto con el marcado de HTML es crear un archivo JS externo. El navegador descargará este archivo JS junto al documento HTML cuando un usuario visite la página web.
Cómo introducir código JavaScript en línea
El código JavaScript se puede introducir en línea en un documento HTML utilizando la etiqueta HTML dedicada <script>. Esta etiqueta HTML envuelve el código JS.
La etiqueta <script> puede colocarse en la sección <head> de tu HTML o en la sección <body>. La colocación depende totalmente de cuándo quieres que se cargue el código JS.
Añade Javascript en las etiquetas <head>
El código JS puede ser insertado dentro de la sección <head> del documento HTML. Esto se hace para mantener la función contenida y alejada del contenido principal de tu documento HTML.
Este código de ejemplo de W3Schools muestra cómo añadir la etiqueta <head> en la sección <head> del documento HTML:
<!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>
Pruébalo en el editor HTML gratuito de W3Schools. Verás que la función empieza a correr cuando se hace clic en el botón “Try It”.
Añade Javascript en las etiquetas <Body>
Si tu script debe ejecutarse en un punto específico dentro del diseño de tu página web, tendrás que insertarlo en el punto donde debe llamar a la función. La colocación suele ser dentro de la sección <body>.
En este código de ejemplo de W3School, la función JS se coloca en la sección <body> del documento HTML:
<!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>
Cuando ejecutes el código en el editor HTML gratuito de W3Schools, verás la función llamada cuando hagas click en el botón “Try It”.
Cómo incluir JavaScript Externo en HTML
Si tu script es grande, o necesitas repartirlo en varias páginas web, lo normal es que añadas el código JS a uno o varios archivos JavaScript a los que se hace referencia dentro de los documentos HTML.
El uso de archivos JS separados permite a los desarrolladores desagregar el marcado de HTML del código JS, evitando cualquier confusión. También facilita el mantenimiento continuo y permite que las páginas web se carguen más rápidamente al almacenar en caché los archivos JS.
Este es el ejemplo de un script JS externo, proporcionado por W3School:
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
Para utilizar este script externo, tendrás que añadir el nombre del archivo de script en el atributo src (fuente) de una etiqueta <script>:
<script src=”myScript.js”></script>
Ten en cuenta que los archivos JS deben tener la extensión “.js”.
El script externo puede colocarse en la sección <head> o <body> del documento HTML.
Consejos para Añadir JavaScript a HTML
- Deberías añadir funciones a la sección <head> si los scripts sólo deben activarse cuando se llamen o se active un evento. De esta manera, el script no interfiere con el contenido de tu página.
- Si tu script escribe el contenido de la página, debería estar dentro de la sección <body>. Lo ideal es que el script esté en la parte inferior de la sección <body> para mejorar la velocidad de carga de la página.
- Si tu sitio web utiliza HTML5, no es necesario añadir el script JS en la etiqueta <script>.
- Algunos programadores recomiendan mantener los scripts HTML, CSS y JS en carpetas separadas. Sólo asegúrate de enlazarlos correctamente.
Si ya estás listo para pasar a la práctica y quieres tomartelo en serio, podemos guiarte para que sepas si un bootcamp es lo que estás buscando e incluso, qué programa se adapta mejor a tus necesidades: