Entrada destacada

Bienvenida al Blog

JavaScript 1

 

Taller de Introducción a la Programación en JavaScript


Objetivo: Crear expectación y curiosidad por aprender programación en JavaScript mediante actividades interactivas y divertidas.

Materiales: Aplicacion DroidScript para ANDROID, o computador.

Link aplicacion: https://play.google.com/store/apps/details?id=com.smartphoneremote.androidscriptfree&pcampaignid=web_share

Introducción (20 minutos)

  1. Bienvenida y Presentación:

    • Breve introducción al lenguaje JavaScript (JS).
    • Importancia y uso de JS en el desarrollo web, aplicaciones móviles y más.
    • Muestra de ejemplos de sitios web o aplicaciones populares que usan JS.

    Breve Introducción al Lenguaje JavaScript (JS)

    JavaScript (JS) es un lenguaje de programación esencial en el desarrollo web moderno. Se utiliza para hacer que las páginas web sean interactivas y dinámicas. A diferencia de HTML y CSS, que se encargan del contenido y el diseño de las páginas web, JavaScript permite agregar comportamiento y funcionalidad a las páginas.

    Características Principales de JavaScript:

  2. Lenguaje de Programación Interpretado: JS se ejecuta directamente en el navegador web, lo que permite una rápida retroalimentación y pruebas.
  3. Lenguaje de Script del Lado del Cliente: Principalmente se usa en el navegador para manipular la interfaz de usuario en tiempo real, responder a eventos del usuario, y comunicarse con servidores.
  4. Lenguaje Dinámico y Versátil: JS permite la creación de aplicaciones interactivas, juegos, gráficos y mucho más.

Importancia y Uso de JavaScript en el Desarrollo Web, Aplicaciones Móviles y Más

1. Desarrollo Web:

  • Interactividad de la Página: Permite la creación de efectos dinámicos, validación de formularios en el lado del cliente, y la modificación del contenido sin necesidad de recargar la página.
  • Frameworks y Librerías: JS cuenta con numerosas herramientas como React, Angular y Vue.js que facilitan la creación de interfaces de usuario ricas y aplicaciones web complejas.

2. Aplicaciones Móviles:

  • Desarrollo Híbrido: Con herramientas como React Native y Ionic, los desarrolladores pueden usar JavaScript para construir aplicaciones móviles que se ejecutan en Android e iOS con una sola base de código.
  • Interacción y Funcionalidad: Permite el acceso a funcionalidades nativas del dispositivo y la integración con servicios web.

3. Desarrollo de Juegos:

  • Gráficos y Animaciones: JS, junto con librerías como Three.js, permite la creación de gráficos 3D y animaciones en la web, permitiendo desarrollar juegos y experiencias interactivas ricas.

4. Servidores y Backend:

  • Node.js: Un entorno de ejecución para JavaScript del lado del servidor que permite a los desarrolladores usar JS para crear aplicaciones de backend, gestionar bases de datos y manejar múltiples solicitudes simultáneas.

Ejemplos de Sitios Web y Aplicaciones Populares que Usan JavaScript

  1. Facebook: Utiliza React, una biblioteca de JavaScript desarrollada por Facebook para construir interfaces de usuario rápidas y dinámicas.

  2. Google Maps: Emplea JavaScript para mostrar mapas interactivos, manejar desplazamientos y realizar búsquedas en tiempo real.

  3. YouTube: Usa JavaScript para controlar la reproducción de videos, manejar la interfaz de usuario y mejorar la experiencia del usuario.

  4. Twitter: Implementa JavaScript para la actualización en tiempo real de tweets y notificaciones sin necesidad de recargar la página.

  5. Netflix: Utiliza JavaScript para una experiencia de usuario fluida, manejo de reproducción de contenido y recomendaciones personalizadas.

  6. Gmail: Emplea JavaScript para una experiencia de correo electrónico interactiva, gestión de mensajes y funcionalidades en tiempo real.

JavaScript es una herramienta poderosa y versátil que se encuentra en el corazón de muchas tecnologías web modernas y aplicaciones móviles, y su conocimiento abre puertas a una amplia gama de oportunidades en el desarrollo de software.

 

 

  1. Exploración del Entorno de Desarrollo:

    • Introducción al IDE DroidScript:
      • Explicación de su interfaz básica.
      • Cómo crear y ejecutar un proyecto en DroidScript.
    • Introducción a un IDE sencillo para PC, como el Editor de código integrado en los navegadores (Herramientas de desarrollo, consola JavaScript):
      • Cómo abrir la consola JavaScript en un navegador web (usando Google Chrome o Firefox).
      • Ejemplo rápido de escribir y ejecutar un código JS básico directamente en la consola del navegador.

 

Introducción al IDE DroidScript

1. Explicación de su Interfaz Básica:

DroidScript es una aplicación para dispositivos Android que permite desarrollar aplicaciones móviles usando JavaScript. Su interfaz es bastante accesible, incluso para principiantes. Aquí te presento los componentes principales de su interfaz:

  • Pantalla Principal: La pantalla principal muestra una lista de tus proyectos y opciones para crear nuevos.
  • Editor de Código: La sección donde escribes y editas el código JavaScript. Ofrece resaltado de sintaxis y autocompletado para facilitar la programación.
  • Barra de Herramientas: Incluye botones para guardar, ejecutar y depurar el código. También encontrarás opciones para importar bibliotecas y acceder a la documentación.
  • Consola de Salida: Muestra los resultados de la ejecución del código, incluyendo errores y mensajes de console.log.

2. Cómo Crear y Ejecutar un Proyecto en DroidScript:

  1. Crear un Nuevo Proyecto:

    • Abre DroidScript en tu dispositivo Android.
    • En la pantalla principal, toca el botón “Nuevo” para iniciar un nuevo proyecto.
    • Elige un nombre para tu proyecto y selecciona una plantilla si es necesario.

  2. Escribir el Código:

    • Una vez creado el proyecto, el editor de código se abrirá automáticamente.
    • Escribe tu código JavaScript en el editor. Por ejemplo:
      function OnStart() {
          var layout = app.CreateLayout("Linear");
          var button = app.CreateButton("¡Hola, Mundo!");
          layout.AddChild(button);
          app.AddLayout(layout);
      }       

Actividad 1: Hola, Mundo! (15 minutos)

  1. Escribir el Primer Programa:

    En DroidScript: Crear un nuevo proyecto.
    En la consola del navegador: Escribir console.log("¡Hola, Mundo!"); y ejecutarlo.
    Explicación rápida de lo que hace este código.
    Cómo se relaciona esto con la salida de la consola.

  2. Personalización:

    • Ahora modifica el mensaje a algo personalizado, como "Hola, soy [nombre] y estoy aprendiendo JavaScript!".

Actividad 2: Jugando con Variables y Datos (25 minutos)

  1. Introducción a Variables:

    • Explicación de lo que son las variables y cómo se utilizan en JavaScript.
    • Ejemplo: var nombre = "Juan"; seguido de console.log("Hola, " + nombre);

  2. Ejercicio Guiado:

    • Ahora crea variables con sus nombres, edad, y su color favorito.
    • Crear un mensaje que combine esas variables, por ejemplo: console.log("Hola, soy " + nombre + " y tengo " + edad + " años. Mi color favorito es " + colorFavorito + ".");

  3. Exploración:

    • Ahora juega con las variables cambiando valores y observando los resultados.

Actividad 3: Haciendo Cálculos Simples (20 minutos)

  1. Introducción a Operaciones Matemáticas:

    • Mostrar cómo realizar operaciones básicas como suma, resta, multiplicación y división en JavaScript.
    • Ejemplo: var resultado = 5 + 3; console.log("El resultado de 5 + 3 es " + resultado);

  2. Desafío Rápido:

    • Desafio crea un pequeño programa que calcule el área de un rectángulo con base y altura dadas por ellos mismos.

Actividad 4: Mini Proyecto - Pregunta Interactiva (25 minutos)

  1. Creando Interactividad:

    • Introducir prompt() para recibir entradas del usuario.
    • Ejemplo: var nombre = prompt("¿Cuál es tu nombre?"); console.log("Hola, " + nombre + "!");

  2. Proyecto:

    • Crea un programa simple que haga tres preguntas al usuario (nombre, edad, color favorito) y luego muestre un mensaje personalizado en la consola con esa información.

  3. Personalización:

    • Añadir más preguntas o variar las respuestas, explorando diferentes formas de interactuar con el usuario.

Cierre y Reflexión (15 minutos)

  1. Revisión de lo Aprendido:

    • Resume las habilidades adquiridas durante el taller: cómo crear variables, realizar cálculos, y crear programas interactivos.

  2. Próximos Pasos:

    • Esto es solo el comienzo debes seguir explorando JavaScript. Seguiremos praticando.

  3. Preguntas y Respuestas:

    • Espacio para que los estudiantes hagan preguntas sobre lo que han aprendido o sobre temas que les interese explorar en el futuro