LENGUAJES DE PROGRAMACIÓN. JAVA SCRIPT Y HTML
En este módulo, los estudiantes comprenderán los fundamentos del lenguaje de programación JavaScript y HTML, abarcando la evolución de los lenguajes, tipos de datos, variables, operadores, estructuras de decisión y funciones. Desarrollarán habilidades para crear aplicaciones web interactivas y funcionales, utilizando módulos, procedimientos, funciones y cuadros de diálogo, además de diseñar interfaces gráficas de usuario efectivas. A través de actividades prácticas en el laboratorio, los estudiantes aplicarán estos conocimientos para desarrollar proyectos web, asegurando el respeto por las mejores prácticas y estándares de desarrollo.
Explora las pestañas y descubre el contenido que se encuentra en cada una de ellas. Encontrarás recursos, materiales, vídeos con información fundamental para tu formación.
Ingresa a los vídeos. Aquí
Información
CONTENIDOS:
- Evolución de los lenguajes de programación Java Script, HTML
- Tipos de datos
- Variables y operadores
- Formatos de sentencias
- Estructuras de decisión
- Interacciones
- Módulos y procedimientos
- Funciones
- Recursión
- Cuadro de diálogo
- Guía (INTERFACES GRÁFICAS DE USUARIO)
- Utilización de menús
Actividades
Actividad virtual 20 de Julio
Actividad Integrada: Lenguajes de Programación - JavaScript y HTML
Objetivo
El objetivo de esta actividad es que los estudiantes aprendan los conceptos fundamentales de JavaScript y HTML a través de ejercicios prácticos y teóricos, entendiendo su evolución, tipos de datos, variables, operadores, estructuras de decisión, interacciones, módulos, procedimientos, funciones, recursión, cuadros de diálogo, interfaces gráficas de usuario y menús.
Materiales Necesarios
Computadora con acceso a internet
Editor de texto o entorno de desarrollo (p. ej., Visual Studio Code)
Instrucciones de la Actividad
1. Evolución de los Lenguajes de Programación JavaScript y HTML
1.1. Investiga y elabora un breve informe (máximo 1 página) sobre la evolución de JavaScript y HTML desde sus inicios hasta la actualidad. Incluye las versiones más importantes y sus características principales.
2. Tipos de Datos
2.1. Realiza una tabla comparativa que incluya los diferentes tipos de datos en JavaScript (string, number, boolean, array, object, null, undefined) y HTML (elementos de contenido como texto, números, fechas, etc.). Describe cada tipo de dato y proporciona un ejemplo breve para cada uno.
3. Variables y Operadores
3.1. Define qué son las variables en JavaScript y HTML y cómo se declaran.
3.2. Crea una lista de los operadores básicos en JavaScript (aritméticos, de asignación, comparación y lógicos) y proporciona una breve descripción y un ejemplo de cada uno.
4. Formatos de Sentencias
4.1. Escribe un resumen (máximo 1 página) sobre los formatos de sentencias en JavaScript y HTML. Incluye las diferencias entre las sentencias simples y compuestas, y los usos de cada una.
5. Estructuras de Decisión
5.1. Investiga y explica las estructuras de decisión en JavaScript (if, else if, else, switch). Incluye una breve descripción y un ejemplo para cada una.
6. Interacciones
6.1. Elabora un informe (máximo 1 página) sobre cómo se manejan las interacciones en JavaScript y HTML, enfocándote en eventos como clics, movimientos del ratón y entradas del teclado.
7. Módulos y Procedimientos
7.1. Define qué son los módulos y procedimientos en JavaScript y HTML y cómo se utilizan. Incluye un breve ejemplo para ilustrar su uso.
8. Funciones
8.1. Describe qué son las funciones en JavaScript y cómo se declaran y utilizan. Proporciona un ejemplo simple de una función que realiza una tarea específica.
9. Recursión
9.1. Explica el concepto de recursión en JavaScript. Proporciona un ejemplo sencillo de una función recursiva y describe cómo funciona.
10. Cuadro de Diálogo
10.1. Investiga los diferentes tipos de cuadros de diálogo en JavaScript (alert, prompt, confirm). Describe cómo se usan y proporciona un ejemplo breve de cada uno.
11. Guía (Interfaces Gráficas de Usuario)
11.1. Elabora una guía sobre cómo crear interfaces gráficas de usuario básicas utilizando HTML y CSS. Incluye ejemplos de cómo estructurar una página web con botones, formularios y otros elementos interactivos.
12. Utilización de Menús
12.1. Investiga y explica cómo se crean menús en HTML y CSS. Proporciona un ejemplo de un menú de navegación simple, describiendo cada paso para su implementación.
Entregables
Informe de Evolución de Lenguajes de Programación:
Documento sobre la evolución de JavaScript y HTML.
Tabla Comparativa de Tipos de Datos:
Tabla que incluya la descripción y ejemplos de tipos de datos en JavaScript y HTML.
Lista de Variables y Operadores:
Lista descriptiva de variables y operadores en JavaScript.
Resumen de Formatos de Sentencias:
Documento sobre los formatos de sentencias en JavaScript y HTML.
Informe de Estructuras de Decisión:
Documento explicando las estructuras de decisión en JavaScript.
Informe de Interacciones:
Documento sobre el manejo de interacciones en JavaScript y HTML.
Definición de Módulos y Procedimientos:
Documento explicando los módulos y procedimientos en JavaScript y HTML.
Descripción de Funciones:
Documento explicando las funciones en JavaScript con ejemplos.
Explicación de Recursión:
Documento explicando el concepto de recursión en JavaScript con ejemplos.
Informe de Cuadro de Diálogo:
Documento explicando los cuadros de diálogo en JavaScript con ejemplos.
Guía de Interfaces Gráficas de Usuario:
Documento sobre la creación de interfaces gráficas de usuario básicas con HTML y CSS.
Explicación y Ejemplo de Menús:
Documento explicando cómo se crean menús en HTML y CSS con ejemplos.
Evaluación
Claridad y precisión de los informes: Se evaluará la capacidad de los estudiantes para investigar, entender y describir los conceptos presentados.
Cumplimiento de los pasos: Se revisará que cada actividad haya sido completada de acuerdo a las instrucciones.
Creatividad y comprensión: Se valorará la creatividad en la presentación de los informes y la comprensión de los conceptos básicos de JavaScript y HTML.
Las consultas serán discutidas en clase y allí se afianzarán los conocimientos.
Cualquier duda, comunicarla con el profesor.
Cualquier duda, comunicarla con el profesor.
Recuerden explorar las pestañas donde se encontrará el material y los recursos necesarios para desarrollar la actividad
Textos
1. Evolución de los lenguajes de programación JavaScript y HTML
JavaScript y HTML han evolucionado significativamente desde sus inicios, reflejando los cambios en la web y las necesidades de los desarrolladores. HTML (HyperText Markup Language) fue desarrollado en 1991 por Tim Berners-Lee como un lenguaje de marcado simple para crear documentos web. La primera versión, HTML 1.0, permitía la creación de páginas web estáticas con enlaces y texto formateado. Con el tiempo, HTML evolucionó para incluir más características, como tablas, formularios y elementos multimedia, llegando a HTML5 en 2014, que introdujo nuevas APIs y capacidades multimedia sin necesidad de plugins externos.
JavaScript, creado por Brendan Eich en 1995, fue originalmente concebido como un lenguaje de scripting ligero para añadir interactividad a las páginas web. Desde su creación, JavaScript ha evolucionado de un lenguaje básico a uno robusto y versátil, fundamental para el desarrollo web moderno. ECMAScript, el estándar en el que se basa JavaScript, ha tenido múltiples revisiones, siendo ECMAScript 6 (ES6) en 2015 una de las más significativas. ES6 introdujo características avanzadas como clases, módulos, y let/const para mejorar la escritura y mantenimiento del código.
A lo largo de los años, JavaScript y HTML se han complementado con otras tecnologías como CSS (Cascading Style Sheets) para el diseño visual de las páginas web. Frameworks y bibliotecas como React, Angular y Vue.js han llevado a JavaScript más allá, permitiendo el desarrollo de aplicaciones web complejas y dinámicas. La integración con APIs y la capacidad de trabajar tanto en el lado del cliente como del servidor (Node.js) han consolidado a JavaScript como un lenguaje indispensable en el desarrollo web.
Hoy en día, HTML5 y JavaScript son pilares del desarrollo web moderno. HTML5 proporciona una estructura semántica y capacidades multimedia mejoradas, mientras que JavaScript permite crear aplicaciones interactivas y dinámicas. La evolución de estos lenguajes refleja la creciente complejidad y dinamismo de la web, así como la necesidad de herramientas más poderosas y flexibles para los desarrolladores.
2. Tipos de datos
En programación, los tipos de datos son fundamentales para definir el tipo de información que puede ser almacenada y manipulada por un programa. En JavaScript, los tipos de datos primitivos incluyen números, cadenas de texto, booleanos, null, undefined, y símbolos. Los números en JavaScript son de punto flotante de 64 bits, lo que permite representar tanto enteros como decimales. Por ejemplo, let num = 42; y let pi = 3.14; son números válidos en JavaScript.
Las cadenas de texto (strings) se utilizan para almacenar secuencias de caracteres. Pueden definirse usando comillas simples, dobles o acentos graves para interpolación de cadenas. Por ejemplo, let greeting = "Hello, World!"; o let name = 'Alice'; son cadenas válidas. La interpolación de cadenas permite incluir expresiones dentro de una cadena, como en let message = Hello, ${name}!;.
Los booleanos representan valores de verdad, true o false. Son esenciales para las estructuras de control y las decisiones lógicas en un programa. Por ejemplo, let isStudent = true; y let hasGraduated = false; son valores booleanos. El tipo null es un valor especial que representa la ausencia intencional de un valor, mientras que undefined indica que una variable ha sido declarada pero no ha sido asignada un valor.
Además de estos tipos de datos primitivos, JavaScript también tiene tipos de datos complejos como objetos y arrays. Los objetos son colecciones de pares clave-valor y se utilizan para representar entidades complejas. Por ejemplo, let person = {name: 'John', age: 30};. Los arrays son listas ordenadas de elementos, que pueden ser de cualquier tipo de dato. Por ejemplo, let numbers = [1, 2, 3, 4, 5];.
3. Variables y operadores
Las variables en JavaScript se utilizan para almacenar datos que pueden ser manipulados y utilizados a lo largo de un programa. Para declarar variables, JavaScript utiliza las palabras clave var, let, y const. var es la forma más antigua de declarar variables y tiene un alcance de función. let y const, introducidos en ES6, tienen un alcance de bloque, lo que significa que solo existen dentro del bloque donde se declaran. const se utiliza para declarar variables que no deben cambiar su valor una vez asignado.
Por ejemplo, var x = 10; declara una variable x con el valor 10, mientras que let y = 20; hace lo mismo con la palabra clave let. const z = 30; declara una constante z con el valor 30, que no puede ser reasignado. Es buena práctica usar let y const en lugar de var para evitar problemas relacionados con el alcance y la reasignación inadvertida de variables.
JavaScript tiene varios tipos de operadores para realizar operaciones en variables y valores. Los operadores aritméticos incluyen + para la adición, - para la sustracción, * para la multiplicación, / para la división, y % para el módulo. Por ejemplo, let sum = x + y; suma dos variables y almacena el resultado en sum. Los operadores de asignación, como =, +=, -=, *=, y /=, se utilizan para asignar valores a las variables.
Los operadores de comparación se utilizan para comparar dos valores y devuelven un valor booleano. Incluyen == (igualdad), != (desigualdad), === (igualdad estricta), !== (desigualdad estricta), > (mayor que), < (menor que), >= (mayor o igual que), y <= (menor o igual que). Por ejemplo, x === 10 devuelve true si x es exactamente igual a 10. Los operadores lógicos, como && (y lógico), || (o lógico), y ! (no lógico), se utilizan para combinar condiciones booleanas.
4. Formatos de sentencias
Las sentencias en JavaScript son instrucciones que el intérprete ejecuta para llevar a cabo una acción específica. Cada sentencia debe terminar con un punto y coma (;), aunque JavaScript tiene inserción automática de punto y coma que puede corregir la omisión de estos en muchos casos. Sin embargo, es una buena práctica incluir puntos y comas para evitar ambigüedades y errores.
Las sentencias de declaración incluyen la declaración de variables, funciones y clases. Por ejemplo, let name = 'Alice'; es una sentencia de declaración de variable, function greet() { console.log('Hello'); } es una declaración de función, y class Person { constructor(name) { this.name = name; } } es una declaración de clase. Estas sentencias definen entidades que pueden ser utilizadas más tarde en el programa.
Las sentencias de control de flujo alteran el orden en el que se ejecutan las instrucciones. Incluyen if, else, switch, for, while, y do...while. Por ejemplo, if (x > 10) { console.log('x is greater than 10'); } es una sentencia de control que ejecuta una instrucción solo si la condición es verdadera. Las sentencias de bucle, como for (let i = 0; i < 5; i++) { console.log(i); }, se utilizan para repetir un bloque de código varias veces.
Las sentencias de expresión son aquellas que producen un valor y pueden incluirse dentro de otras sentencias. Por ejemplo, let result = x + y; es una sentencia de expresión que suma dos variables y almacena el resultado. Las sentencias de expresión también incluyen llamadas a funciones, como console.log('Hello');, que llama a la función log del objeto console para imprimir un mensaje en la consola.
5. Estructuras de decisión
Las estructuras de decisión permiten a los programas ejecutar diferentes bloques de código basados en condiciones específicas. La estructura de decisión más común en JavaScript es la sentencia if. La sentencia if evalúa una condición y ejecuta un bloque de código si la condición es verdadera. Por ejemplo, if (x > 10) { console.log('x is greater than 10'); } solo imprimirá el mensaje si x es mayor que 10.
La sentencia if...else permite definir un bloque de código alternativo que se ejecutará si la condición es falsa. Por ejemplo, if (x > 10) { console.log('x is greater than 10'); } else { console.log('x is not greater than 10'); } proporcionará una salida diferente dependiendo del valor de x. Para manejar múltiples condiciones, se puede usar if...else if...else, que permite encadenar varias condiciones. Por ejemplo, if (x > 10) { console.log('x is greater than 10'); } else if (x === 10) { console.log('x is exactly 10'); } else { console.log('x is less than 10'); }.
La sentencia switch es otra estructura de decisión que se utiliza para ejecutar diferentes bloques de código basados en el valor de una expresión. La sentencia switch evalúa una expresión y ejecuta el bloque de código correspondiente al primer caso que coincide con el valor de la expresión. Por ejemplo:
javascript
switch (day) {
case 1:
console.log('Monday');
break;
case 2:
console.log('Tuesday');
break;
default:
console.log('Another day');
}
Este código imprimirá el nombre del día correspondiente al valor de day.
Las estructuras de decisión también pueden incluir operadores lógicos para combinar múltiples condiciones. Por ejemplo, if (x > 10 && y < 5) { console.log('x is greater than 10 and y is less than 5'); } evalúa si ambas condiciones son verdaderas antes de ejecutar el bloque de código. Estas estructuras son esenciales para controlar el flujo de un programa y tomar decisiones basadas en condiciones dinámicas.
7. Módulos y procedimientos
Los módulos y procedimientos son conceptos fundamentales en la organización y estructuración de código en JavaScript. Los módulos permiten dividir el código en partes reutilizables y manejables, mientras que los procedimientos (también conocidos como funciones) encapsulan bloques de código que pueden ser llamados repetidamente.
En JavaScript, los módulos se implementan utilizando el sistema de importación y exportación introducido en ES6. Un módulo es simplemente un archivo JavaScript que exporta variables, funciones o clases. Por ejemplo, se puede crear un módulo llamado math.js que exporta una función para sumar dos números:
Los procedimientos, o funciones, son bloques de código que realizan una tarea específica y pueden ser llamados en diferentes partes del programa. Las funciones en JavaScript pueden ser declaradas de varias formas, incluyendo las funciones declaradas, funciones anónimas y funciones flecha (arrow functions). Por ejemplo, una función declarada para calcular el cuadrado de un número sería:
La combinación de módulos y procedimientos permite a los desarrolladores escribir código limpio, modular y fácil de mantener. Los módulos encapsulan funcionalidades relacionadas, mientras que los procedimientos encapsulan operaciones específicas, permitiendo una mayor claridad y organización en el código.
8. Funciones
Las funciones en JavaScript son bloques de código reutilizables que realizan una tarea específica. Una función puede aceptar entradas (parámetros) y devolver una salida (valor de retorno). Las funciones son fundamentales para la modularidad y la reutilización del código en los programas. Existen varias formas de definir funciones en JavaScript, incluyendo las funciones declaradas, funciones anónimas y funciones flecha.
Las funciones son esenciales para la abstracción y organización del código, permitiendo a los desarrolladores dividir problemas complejos en piezas más manejables.
9. Recursión
La recursión es una técnica de programación en la que una función se llama a sí misma para resolver un problema. La recursión es útil para resolver problemas que pueden dividirse en subproblemas similares. Una función recursiva tiene al menos un caso base que termina la recursión y uno o más casos recursivos que reducen el problema en cada llamada.
La recursión también puede utilizarse para recorrer estructuras de datos jerárquicas como árboles y grafos.
Aunque la recursión puede ser una herramienta poderosa, también puede ser menos eficiente que las soluciones iterativas debido al consumo de memoria y la profundidad de la pila de llamadas. Es importante usar la recursión de manera cuidadosa y considerar alternativas iterativas cuando sea posible.
10. Cuadro de diálogo
Los cuadros de diálogo en JavaScript son elementos de interfaz de usuario que permiten la interacción con el usuario mediante mensajes, entradas y opciones. Los métodos más comunes para crear cuadros de diálogo son alert(), prompt(), y confirm(). Estos métodos son fáciles de usar y proporcionan una manera rápida de interactuar con el usuario.
El método alert() muestra un mensaje de alerta con un botón de aceptar. Se utiliza principalmente para mostrar información al usuario:
Los cuadros de diálogo proporcionan una forma sencilla de interactuar con el usuario, aunque su uso puede ser disruptivo para la experiencia del usuario. Para interfaces más avanzadas y amigables, se recomienda utilizar bibliotecas y frameworks como Bootstrap o jQuery UI para crear cuadros de diálogo personalizados y no intrusivos.
11. Guía (INTERFACES GRÁFICAS DE USUARIO)
Las interfaces gráficas de usuario (GUI) son cruciales para la interacción entre los usuarios y las aplicaciones. Una GUI permite a los usuarios interactuar con el software a través de elementos gráficos como botones, menús, ventanas, y formularios, en lugar de depender de comandos de texto. En el contexto del desarrollo web, HTML, CSS y JavaScript son las herramientas fundamentales para crear GUIs interactivas y atractivas.
JavaScript se utiliza para añadir interactividad a la GUI. Permite manejar eventos, validar formularios, y actualizar dinámicamente el contenido de la página.
12. Utilización de menús
Los menús son elementos esenciales en las interfaces gráficas de usuario, proporcionando una manera organizada y accesible de navegar por una aplicación. En desarrollo web, los menús pueden ser creados utilizando HTML para la estructura, CSS para el estilo, y JavaScript para la interactividad. Los menús pueden variar desde simples listas de enlaces hasta menús desplegables y barras de navegación complejas.
El estilo del menú se puede mejorar utilizando CSS para hacer que se vea más atractivo y funcional. Por ejemplo, se pueden usar estilos para cambiar el color de fondo, el tamaño de fuente, y el espaciado de los elementos del menú:
Recursos
Ingrese al Google Drive y descargue los recursos de apoyo. Aquí
VÍDEOS