01- 🚀 Introducción a JavaScript para Principiantes

Índice de los temas

• What is JavaScript?
• Why Study JavaScript?
• JavaScript Can Change HTML Content
• JavaScript Can Change HTML Attribute Values
• JavaScript Can Change HTML Styles (CSS)
• JavaScript Can Hide HTML Elements
• JavaScript Can Show HTML Elements

---

💡 What is JavaScript?

🚀 JavaScript es un lenguaje de programación de alto nivel, lo que significa que su sintaxis es relativamente fácil de leer y escribir para los humanos. Originalmente, se creó para añadir interactividad a las páginas web. 🌐 Imagina una página web estática, como un documento. JavaScript le da vida, permitiendo que los elementos reaccionen a las acciones del usuario, se animen, se actualicen sin necesidad de recargar la página, y mucho más. ✨

Aquí te presento algunas características clave de JavaScript:

• Lenguaje de scripting: Se ejecuta directamente en el navegador del usuario (en el lado del cliente), aunque también puede ejecutarse en el servidor con Node.js.
• Orientado a objetos: Aunque tiene sus particularidades, JavaScript soporta conceptos de la programación orientada a objetos.
• Dinámico: Los tipos de datos de las variables pueden cambiar durante la ejecución del programa.
• Interpretado: El código JavaScript se ejecuta línea por línea por el navegador.
• Multiplataforma: Funciona en la mayoría de los navegadores y sistemas operativos.

🔑 En resumen: JavaScript es el lenguaje que hace que las páginas web sean interactivas y dinámicas. Es esencial para el desarrollo front-end (lo que ves y con lo que interactúas en una página web) y también ha ganado mucha importancia en el desarrollo back-end (la lógica que ocurre en el servidor). 💻

🤔 Why Study JavaScript?

🚀 El aprendizaje de JavaScript es crucial para el desarrollo web moderno debido a su capacidad para manipular elementos HTML y CSS, creando interactividad y dinamismo en la web. ✨

Aquí te presento algunas razones importantes para estudiar JavaScript:

• Interactividad y dinamismo en la web: Como vimos en el tema anterior, JavaScript es el motor que permite crear páginas web interactivas y dinámicas. Desde animaciones sutiles hasta complejas aplicaciones de una sola página (SPAs), JavaScript hace que la experiencia del usuario sea más atractiva y funcional.
• Desarrollo Front-end completo: Junto con HTML y CSS, JavaScript es uno de los tres pilares del desarrollo front-end. Dominarlo te permite controlar el comportamiento y la apariencia de la interfaz de usuario de un sitio web.
• Desarrollo Back-end con Node.js: JavaScript no se limita al navegador. Con Node.js, puedes utilizar JavaScript para construir la lógica del lado del servidor, creando aplicaciones web completas con un solo lenguaje. ¡Esto simplifica enormemente el desarrollo full-stack! 🤯
• Gran demanda laboral: La demanda de desarrolladores JavaScript es enorme y sigue creciendo. Aprender JavaScript te abrirá muchas puertas en el mercado laboral. 💼
• Amplia comunidad y recursos: Existe una comunidad de desarrolladores JavaScript muy activa y extensa. Esto significa que encontrarás una gran cantidad de recursos de aprendizaje, librerías, frameworks y ayuda cuando la necesites. 🫂
• Desarrollo de aplicaciones móviles con React Native: Si te interesa el desarrollo de aplicaciones móviles, React Native (basado en JavaScript) te permite crear aplicaciones para iOS y Android utilizando una base de código única. 📱
• Desarrollo de videojuegos y más: JavaScript también se utiliza en el desarrollo de videojuegos para navegadores y en otras áreas como la creación de aplicaciones de escritorio con frameworks como Electron. 🕹️

🔑 En resumen: Estudiar JavaScript te proporciona habilidades esenciales para el desarrollo web moderno, te abre oportunidades laborales, te conecta con una gran comunidad y te permite explorar diversas áreas del desarrollo de software. 🌟

✍️ JavaScript Can Change HTML Content

✨ JavaScript te permite modificar dinámicamente el contenido HTML de una página web en tiempo real. Esto significa que puedes actualizar texto, añadir nuevos elementos, eliminar existentes, y mucho más, todo ello sin necesidad de recargar la página. Esta capacidad es fundamental para crear aplicaciones web dinámicas e interactivas. 🌐

La forma más común de modificar el contenido HTML es utilizando el Document Object Model (DOM). El DOM es una representación estructurada de todos los elementos HTML en una página. JavaScript puede acceder y manipular estos elementos a través del DOM.

Uno de los métodos clave para cambiar el contenido HTML es innerHTML. Este método te permite obtener o establecer el contenido HTML de un elemento, incluyendo cualquier etiqueta HTML que contenga.

Ejemplo Visual:

Imagina que tienes el siguiente código HTML inicial:

<div id="mensaje"> <p>Hola, mundo!</p> </div>

Inicialmente, verás en la página un cuadro con el texto "Hola, mundo!".

Código JavaScript:

document.getElementById("mensaje").innerHTML = "<p style='color: blue;'>¡Hola desde JavaScript!</p>";

Al ejecutar este código, el contenido del <div> con el id "mensaje" se reemplazará por un nuevo párrafo que dice "¡Hola desde JavaScript!" y tendrá un estilo de color azul. El cambio se verá instantáneamente en tu navegador sin necesidad de recargar la página. ⚡

Explicación del Código:

1. document.getElementById("mensaje"): Esta parte del código utiliza el DOM para seleccionar el elemento HTML que tiene el atributo id igual a "mensaje" (en nuestro caso, el <div>).
2. .innerHTML = ...: La propiedad innerHTML del elemento seleccionado se utiliza para establecer un nuevo valor. En este caso, le asignamos una cadena de texto que contiene una nueva etiqueta <p> con un estilo en línea y el texto deseado.

🔑 En resumen: JavaScript te da el poder de actualizar dinámicamente el contenido de cualquier elemento HTML en tu página web, lo que abre un mundo de posibilidades para crear interfaces de usuario interactivas y aplicaciones web dinámicas. 🌟

⚙️ JavaScript Can Change HTML Attribute Values

✨ Así como JavaScript puede modificar el contenido de los elementos HTML, también tiene la capacidad de cambiar los valores de sus atributos. Los atributos HTML proporcionan información adicional sobre los elementos, como la fuente de una imagen (src), el enlace de un hipervínculo (href), o el texto alternativo de una imagen (alt). 🏷️

JavaScript te permite manipular estos atributos dinámicamente, lo que abre muchas posibilidades para crear interacciones en la página. 🖱️

Para cambiar el valor de un atributo HTML, generalmente utilizamos los siguientes métodos del DOM:

• getAttribute(attributeName): Obtiene el valor actual del atributo especificado.
• setAttribute(attributeName, newValue): Establece el valor del atributo especificado al nuevo valor proporcionado.

Ejemplo Visual:

Imagina que tienes la siguiente imagen en tu HTML:

<img id="miImagen" src="imagen_inicial.jpg" alt="Imagen inicial">

Inicialmente, se mostrará la imagen "imagen\_inicial.jpg" y tendrá el texto alternativo "Imagen inicial".

Ahora, con JavaScript, podemos cambiar la fuente de la imagen y su texto alternativo al hacer clic en un botón.

Código HTML (con un botón):

<img id="miImagen" src="imagen_inicial.jpg" alt="Imagen inicial"> <button onclick="cambiarImagen()">Cambiar Imagen</button>

Código JavaScript:

function cambiarImagen() { let imagen = document.getElementById("miImagen"); imagen.src = "imagen_nueva.jpg"; imagen.alt = "Nueva imagen después del clic"; }

Al hacer clic en el botón "Cambiar Imagen", la función cambiarImagen() se ejecutará. Esta función primero obtiene la referencia al elemento <img> con el id "miImagen". Luego, utiliza imagen.src = "imagen_nueva.jpg"; para cambiar el valor del atributo src, lo que hará que el navegador intente cargar y mostrar la imagen "imagen\_nueva.jpg". Finalmente, imagen.alt = "Nueva imagen después del clic"; actualiza el texto alternativo de la imagen. Estos cambios se verán reflejados en la página sin necesidad de recargar. ⚡

🔑 En resumen: La capacidad de JavaScript para cambiar los valores de los atributos HTML te permite crear interacciones dinámicas, como cambiar imágenes al pasar el ratón, actualizar enlaces basados en la selección del usuario, modificar el comportamiento de los formularios y mucho más. 🌟

💡 JavaScript Can Change HTML Styles (CSS)

✨ Con JavaScript, puedes cambiar los estilos CSS de cualquier elemento HTML dinámicamente. Observa cómo controlamos la imagen de una bombilla con botones. 💫

Ejemplo Visual:

Código HTML:

<div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #ccc; padding: 20px; border-radius: 8px; margin-bottom: 10px;"> <img id="myImage" src="https://www.w3schools.com/js/pic_bulboff.gif" alt="Bombilla apagada" style="width: 100px; height: auto; margin-bottom: 10px;"> <div> <button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif'" style="padding: 8px 15px; margin-right: 10px; cursor: pointer;">Encender</button> <button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulboff.gif'" style="padding: 8px 15px; cursor: pointer;">Apagar</button> </div> </div>

Código JavaScript (en línea en los botones):

<!-- No se requiere una función JavaScript separada, el código está directamente en los atributos 'onclick' de los botones. -->

En este ejemplo, al hacer clic en el botón "Encender", la propiedad del atributo src de la imagen con el id "myImage" se cambia a la URL de la bombilla encendida. Al hacer clic en "Apagar", se cambia a la URL de la bombilla apagada. Esto demuestra cómo JavaScript puede modificar los estilos (en este caso, la imagen mostrada) de los elementos HTML directamente a través de eventos en línea. 💡

🔑 En resumen: JavaScript te permite controlar dinámicamente la presentación visual de tu página web, respondiendo a las acciones del usuario directamente en los elementos HTML. 🌟

🙈 JavaScript Can Hide HTML Elements

✨ JavaScript te ofrece varias maneras de ocultar elementos HTML de la vista del usuario. Experimenta con los botones para ver cómo funciona. 👻

Ejemplo Visual:

Este es un párrafo que puedes ocultar y mostrar.

Código HTML (para el ejemplo visual):

<div style="border: 1px solid #ccc; padding: 15px; border-radius: 8px; margin-bottom: 10px;"> <p id="miParrafoVisual" style="padding: 10px; border: 1px solid #eee; background-color: #f9f9f9;">Este es un párrafo que puedes ocultar y mostrar.</p> <button onclick="document.getElementById('miParrafoVisual').style.display='none'" style="padding: 8px 15px; margin-right: 10px; cursor: pointer;">Ocultar con Display</button> <button onclick="document.getElementById('miParrafoVisual').style.visibility='hidden'" style="padding: 8px 15px; margin-right: 10px; cursor: pointer;">Ocultar con Visibility</button> </div>

Código JavaScript (en línea en los botones):

<!-- El código JavaScript para ocultar el párrafo está directamente en los atributos 'onclick' de los botones. -->

Este ejemplo muestra un párrafo y dos botones. Al hacer clic en "Ocultar con Display", el párrafo desaparece completamente. Al hacer clic en "Ocultar con Visibility", el párrafo se vuelve invisible pero sigue ocupando su espacio en la página. 🚫👀

🔑 En resumen: JavaScript te proporciona las herramientas para controlar la visibilidad de los elementos HTML directamente a través de la manipulación de sus estilos en línea. 🌟

👀 JavaScript Can Show HTML Elements

✨ También es posible mostrar elementos HTML que previamente han sido ocultados. Experimenta con los botones para ver cómo funciona. 🪄

Ejemplo Visual:

Este párrafo estaba oculto con display.

Este párrafo era invisible con visibility.

Código HTML (para el ejemplo visual):

<div style="border: 1px solid #ccc; padding: 15px; border-radius: 8px; margin-bottom: 10px;"> <p id="miParrafoOcultoVisual" style="display: none; padding: 10px; border: 1px solid #eee; background-color: #f9f9f9;">Este párrafo estaba oculto con display.</p> <p id="miParrafoInvisibleVisual" style="visibility: hidden; padding: 10px; border: 1px solid #eee; background-color: #f9f9f9;">Este párrafo era invisible con visibility.</p> <button onclick="document.getElementById('miParrafoOcultoVisual').style.display='block'" style="padding: 8px 15px; margin-right: 10px; cursor: pointer;">Mostrar con Display</button> <button onclick="document.getElementById('miParrafoInvisibleVisual').style.visibility='visible'" style="padding: 8px 15px; cursor: pointer;">Mostrar con Visibility</button> </div>

Código JavaScript (en línea en los botones):

<!-- El código JavaScript para mostrar los párrafos está directamente en los atributos 'onclick' de los botones. -->

Este ejemplo contiene dos párrafos, uno inicialmente oculto con `display: none` y otro invisible con `visibility: hidden`. Al hacer clic en los botones correspondientes, puedes mostrar cada párrafo. Observa cómo el párrafo oculto con `display: none` al mostrarse afecta el flujo del documento, mientras que el párrafo invisible con `visibility: hidden` al mostrarse simplemente se vuelve visible en el espacio que ya ocupaba. 🔓👁️

🔑 En resumen: JavaScript te da el control para mostrar elementos HTML que habían sido ocultados, ya sea manipulando la propiedad display para afectar el diseño del documento o la propiedad visibility para controlar su visibilidad sin alterar el diseño. 🌟

---

Ir al indice