L4 Descubriendo Java Script
Ana Camila Reyes Ruelas
Lección 4 Bloque 2
En este bloque, nuestro enfoque no es formar programadoras o programadores, sino ayudar a que, independientemente de tu área de interés, puedas beneficiarte del uso de la IA como tutora para generar código y resolver problemas. Para demostrar el potencial de la IA generativa como tutora y la importancia de usarla de forma responsable, nos centraremos en JavaScript para integrar interactividad en sitios web, aunque este enfoque puede aplicarse a cualquier ámbito de aprendizaje.
List / process
Indíce
Habilidades blandas en programación
Fundamentos de JavaScript
Uso de la IA como tutora en JavaScript
De la resolución de problemas a las metodologías
Objetivos de aprendizaje
Conceptos básicos de JavaScript
Contextualize Your Topic with a Subtitle
Características clave de JavaScript
HTML o JavaScript, ¿cuándo usar cada uno?
Fundamentos de JavaScript
JavaScript es un lenguaje de programación que permite agregar interactividad y dinamismo a las páginas web. Se integra dentro del código HTML, utilizando la etiqueta <script> y puede ejecutarse directamente en el navegador de quien lo usa.Antes de JavaScript, las páginas web eran estáticas y no respondían a las acciones de quienes las usaban. La introducción de este lenguaje permitió la creación de experiencias interactivas, como formularios dinámicos, efectos visuales y validaciones en tiempo real.Recuerda que, en una página web, HTML define la estructura, CSS el aspecto gráfico y JavaScript agrega la interactividad.
Contextualize Your Topic with a Subtitle
+INFO
Uso de la IA como tutora en JavaScriptinteractive'
La IA puede ayudarte a aprender JavaScript de manera más efectiva. Puedes interactuar con modelos de IA como tutores conversacionales para generar, corregir y aprender de ejemplos de código.Te compartimos un ejemplo de prompt para IA: "Explícame cómo hacer que un botón cambie el color de fondo de una página usando JavaScript. Soy estudiante de nivel K11 y quiero una explicación detallada paso a paso con ejemplos" Luego, genera el código completo para que pueda hacer una prueba rápida en la consola del navegador. Pedir explicaciones paso a paso y analizar el código generado te ayudará a comprender mejor su funcionamiento y a mejorar tus habilidades técnicas y blandas.
Conceptos básicos de JavaScript
Para enriquecer tu sitio web con JavaScript y hacerlo más interactivo, necesitas entender algunos conceptos básicos como variables, funciones, eventos y manipulación del DOM. ¡No te preocupes, es más fácil de lo que parece! Aquí tienes una guía sencilla que te permitirá empezar a usar JavaScript inmediatamente en tu sitio, con el apoyo de la IA como tutora.
CLICK
Subtítulo
Subtítulo
Características clave de JavaScript
Lenguaje interpretado: no necesita compilación previa; los navegadores lo ejecutan directamente.Facilidad de aprendizaje: JavaScript es un lenguaje de alto nivel, con una sintaxis amigable, lo que facilita su adopción por principiantes. Alto nivel de integración: puede manipular HTML, CSS y trabajar con APIs externas. Compatibilidad: funciona en cualquier navegador moderno y en diferentes sistemas operativos sin necesidad de modificaciones. Versatilidad: además de su uso en el navegador, JavaScript también se utiliza en el servidor (Node.js) y en aplicaciones móviles (React Native).
HTML o JavaScript, ¿cuándo usar cada uno?
Habilidades blandas en programación
Las habilidades blandas son capacidades personales y sociales que nos permiten interactuar de manera efectiva con otras personas. No dependen de conocimientos técnicos específicos, pero son fundamentales para el desarrollo personal y profesional, y para la creación de entornos colaborativos y productivos. Algunas de las más importantes incluyen: Inteligencia emocional: reconocer, entender y gestionar nuestras emociones y las de otras personas. Pensamiento crítico: analizar información y situaciones de manera objetiva para tomar decisiones informadas. Comunicación efectiva: expresar ideas de manera clara y escuchar activamente. Gestión del tiempo: organizar y planificar tareas para maximizar la productividad. Empatía: entender y compartir los sentimientos de otras personas.
Contextualize Your Topic with a Subtitle
De la resolución de problemas a las metodologías
- Define el problema: ¿qué quieres lograr en tu sitio web? Por ejemplo: un botón que cambie de color al hacer clic.
- Describe el problema a la IA de tu preferencia: usa un lenguaje claro y específico para pedir ayuda. Por ejemplo: “Necesito un código en JavaScript para cambiar el color de un botón al hacer clic”.
- Analiza el código generado: revisa si hace lo que necesitas y procura entender cómo funciona.
- Aprende y mejora: usa la IA como una herramienta de aprendizaje, no como una solución mágica.Aprovecha su carácter conversacional, pregunta cómo funciona el código y experimenta con él.
Contextualize Your Topic with a Subtitle
Objetivos de aprendizaje
WRITE A SUBTITLE
THANK YOU!
introducción
- JavaScript fue creado en 1995 por Brendan Eich, quien lo desarrolló en solo 10 días mientras trabajaba en Netscape. Al principio, se llamó Mocha, pero luego fue nombrado LiveScript para finalmente quedar como JavaScript. Su propósito inicial era agregar interactividad a las páginas web, pero, con el tiempo, ha evolucionado hasta convertirse en un lenguaje versátil utilizado tanto en el desarrollo frontend como backendPara garantizar la compatibilidad entre navegadores, se estableció el estándar ECMAScript, que define cómo debe comportarse el lenguaje en cualquier navegador. Desde ES6 (2015), JavaScript ha incorporado muchas mejoras.Su evolución continúa actualmente para responder a las nuevas demandas del desarrollo web y a las expectativas de las usuarias y los usuarios (Casero, 2024; Douran Biraki, 2024).
Elementos de sintaxis importantes Declaraciones y punto y coma: las instrucciones en JavaScript a menudo terminan con un punto y coma (;). Aunque no siempre es necesario, puede ayudarte a evitar errores. Variables let: para variables que pueden cambiar. const: para variables que no cambian. var: similar a let, pero más antiguo. Tipos de datos Cadena (string): texto, por ejemplo, "Hola". Número: números enteros o decimales, como 42 o 3.14. Booleano: verdadero o falso (true o false). Operadores Aritméticos: +, -, *, / (suma, resta, multiplicación, división). Comparación: ==, !=, >, < (igual, no igual, mayor que, menor que). Lógicos: &&, ||, ! (y, o, no). Funciones: las funciones son bloques de código que realizan una tarea específica. Pueden recibir datos (parámetros) y devolver resultados. Condicionales : Permiten tomar decisiones en tu código según ciertas condiciones. Usa if (si), else if (si …, de lo contrario, …) y else (todas las anteriores son falsas). Bucles:Repetirán un bloque de código varias veces. Eventos:Permiten responder a las acciones del usuario, como hacer clic en un botón o mover el mouse. Manipulación del DOM: Es el modelo de objeto que representa la estructura de un documento HTML. JavaScript permite cambiar el contenido y el estilo de la página dinámicamente.
Con HTML, podríamos definir el botón y su color inicial, pero para lograr el cambio de color, necesitamos JavaScript, pues nos permite "escuchar" el evento de clic y modificar el estilo del botón en tiempo real. De manera similar, un texto en marquesina creado con HTML tendrá un movimiento básico, pero con JavaScript podemos controlar la velocidad, la dirección o añadir efectos de color y animación.En resumen, si buscas un elemento estático y simple, HTML puede ser suficiente, pero si deseas agregar interactividad, dinamismo y personalización, JavaScript es la herramienta ideal.
Flexibilidad y dinamismo: al crear elementos en JavaScript, se pueden manipular y actualizar sus propiedades de manera dinámica, lo que permite una mayor interactividad y adaptabilidad en la aplicación. Esto es especialmente útil cuando se necesita cambiar el aspecto o el comportamiento de un elemento en respuesta a las acciones de las usuarias y los usuarios. Separación de responsabilidades: al crear elementos en JavaScript, se logra una mejor separación entre la estructura (HTML) y la lógica (JavaScript). Esto facilita el mantenimiento y la escalabilidad del código, ya que los cambios en la apariencia o en el comportamiento se pueden realizar directamente en el código JavaScript sin afectar la estructura HTML. Reutilización de código: cuando se crea un elemento en JavaScript, se puede encapsular su lógica y reutilizarla en diferentes partes de la aplicación. Esto promueve la modularidad y la eficiencia del código.
L4 Descubriendo Java Script
Ana Camila Reyes Ruelas
Created on March 10, 2026
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Business vision deck
View
Economic Presentation
View
Tech Presentation Mobile
View
Geniaflix Presentation
View
Vintage Mosaic Presentation
View
Shadow Presentation
View
Newspaper Presentation
Explore all templates
Transcript
L4 Descubriendo Java Script
Ana Camila Reyes Ruelas
Lección 4 Bloque 2
En este bloque, nuestro enfoque no es formar programadoras o programadores, sino ayudar a que, independientemente de tu área de interés, puedas beneficiarte del uso de la IA como tutora para generar código y resolver problemas. Para demostrar el potencial de la IA generativa como tutora y la importancia de usarla de forma responsable, nos centraremos en JavaScript para integrar interactividad en sitios web, aunque este enfoque puede aplicarse a cualquier ámbito de aprendizaje.
List / process
Indíce
Habilidades blandas en programación
Fundamentos de JavaScript
Uso de la IA como tutora en JavaScript
De la resolución de problemas a las metodologías
Objetivos de aprendizaje
Conceptos básicos de JavaScript
Contextualize Your Topic with a Subtitle
Características clave de JavaScript
HTML o JavaScript, ¿cuándo usar cada uno?
Fundamentos de JavaScript
JavaScript es un lenguaje de programación que permite agregar interactividad y dinamismo a las páginas web. Se integra dentro del código HTML, utilizando la etiqueta <script> y puede ejecutarse directamente en el navegador de quien lo usa.Antes de JavaScript, las páginas web eran estáticas y no respondían a las acciones de quienes las usaban. La introducción de este lenguaje permitió la creación de experiencias interactivas, como formularios dinámicos, efectos visuales y validaciones en tiempo real.Recuerda que, en una página web, HTML define la estructura, CSS el aspecto gráfico y JavaScript agrega la interactividad.
Contextualize Your Topic with a Subtitle
+INFO
Uso de la IA como tutora en JavaScriptinteractive'
La IA puede ayudarte a aprender JavaScript de manera más efectiva. Puedes interactuar con modelos de IA como tutores conversacionales para generar, corregir y aprender de ejemplos de código.Te compartimos un ejemplo de prompt para IA: "Explícame cómo hacer que un botón cambie el color de fondo de una página usando JavaScript. Soy estudiante de nivel K11 y quiero una explicación detallada paso a paso con ejemplos" Luego, genera el código completo para que pueda hacer una prueba rápida en la consola del navegador. Pedir explicaciones paso a paso y analizar el código generado te ayudará a comprender mejor su funcionamiento y a mejorar tus habilidades técnicas y blandas.
Conceptos básicos de JavaScript
Para enriquecer tu sitio web con JavaScript y hacerlo más interactivo, necesitas entender algunos conceptos básicos como variables, funciones, eventos y manipulación del DOM. ¡No te preocupes, es más fácil de lo que parece! Aquí tienes una guía sencilla que te permitirá empezar a usar JavaScript inmediatamente en tu sitio, con el apoyo de la IA como tutora.
CLICK
Subtítulo
Subtítulo
Características clave de JavaScript
Lenguaje interpretado: no necesita compilación previa; los navegadores lo ejecutan directamente.Facilidad de aprendizaje: JavaScript es un lenguaje de alto nivel, con una sintaxis amigable, lo que facilita su adopción por principiantes. Alto nivel de integración: puede manipular HTML, CSS y trabajar con APIs externas. Compatibilidad: funciona en cualquier navegador moderno y en diferentes sistemas operativos sin necesidad de modificaciones. Versatilidad: además de su uso en el navegador, JavaScript también se utiliza en el servidor (Node.js) y en aplicaciones móviles (React Native).
HTML o JavaScript, ¿cuándo usar cada uno?
Habilidades blandas en programación
Las habilidades blandas son capacidades personales y sociales que nos permiten interactuar de manera efectiva con otras personas. No dependen de conocimientos técnicos específicos, pero son fundamentales para el desarrollo personal y profesional, y para la creación de entornos colaborativos y productivos. Algunas de las más importantes incluyen: Inteligencia emocional: reconocer, entender y gestionar nuestras emociones y las de otras personas. Pensamiento crítico: analizar información y situaciones de manera objetiva para tomar decisiones informadas. Comunicación efectiva: expresar ideas de manera clara y escuchar activamente. Gestión del tiempo: organizar y planificar tareas para maximizar la productividad. Empatía: entender y compartir los sentimientos de otras personas.
Contextualize Your Topic with a Subtitle
De la resolución de problemas a las metodologías
Contextualize Your Topic with a Subtitle
Objetivos de aprendizaje
WRITE A SUBTITLE
THANK YOU!
introducción
Elementos de sintaxis importantes Declaraciones y punto y coma: las instrucciones en JavaScript a menudo terminan con un punto y coma (;). Aunque no siempre es necesario, puede ayudarte a evitar errores. Variables let: para variables que pueden cambiar. const: para variables que no cambian. var: similar a let, pero más antiguo. Tipos de datos Cadena (string): texto, por ejemplo, "Hola". Número: números enteros o decimales, como 42 o 3.14. Booleano: verdadero o falso (true o false). Operadores Aritméticos: +, -, *, / (suma, resta, multiplicación, división). Comparación: ==, !=, >, < (igual, no igual, mayor que, menor que). Lógicos: &&, ||, ! (y, o, no). Funciones: las funciones son bloques de código que realizan una tarea específica. Pueden recibir datos (parámetros) y devolver resultados. Condicionales : Permiten tomar decisiones en tu código según ciertas condiciones. Usa if (si), else if (si …, de lo contrario, …) y else (todas las anteriores son falsas). Bucles:Repetirán un bloque de código varias veces. Eventos:Permiten responder a las acciones del usuario, como hacer clic en un botón o mover el mouse. Manipulación del DOM: Es el modelo de objeto que representa la estructura de un documento HTML. JavaScript permite cambiar el contenido y el estilo de la página dinámicamente.
Con HTML, podríamos definir el botón y su color inicial, pero para lograr el cambio de color, necesitamos JavaScript, pues nos permite "escuchar" el evento de clic y modificar el estilo del botón en tiempo real. De manera similar, un texto en marquesina creado con HTML tendrá un movimiento básico, pero con JavaScript podemos controlar la velocidad, la dirección o añadir efectos de color y animación.En resumen, si buscas un elemento estático y simple, HTML puede ser suficiente, pero si deseas agregar interactividad, dinamismo y personalización, JavaScript es la herramienta ideal.
Flexibilidad y dinamismo: al crear elementos en JavaScript, se pueden manipular y actualizar sus propiedades de manera dinámica, lo que permite una mayor interactividad y adaptabilidad en la aplicación. Esto es especialmente útil cuando se necesita cambiar el aspecto o el comportamiento de un elemento en respuesta a las acciones de las usuarias y los usuarios. Separación de responsabilidades: al crear elementos en JavaScript, se logra una mejor separación entre la estructura (HTML) y la lógica (JavaScript). Esto facilita el mantenimiento y la escalabilidad del código, ya que los cambios en la apariencia o en el comportamiento se pueden realizar directamente en el código JavaScript sin afectar la estructura HTML. Reutilización de código: cuando se crea un elemento en JavaScript, se puede encapsular su lógica y reutilizarla en diferentes partes de la aplicación. Esto promueve la modularidad y la eficiencia del código.