0% encontró este documento útil (0 votos)

38 vistas67 páginas

Módulo III - Programación en JavaScript para Aplicaciones Web

Cargado por

Sebastián Jaramillo

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

38 vistas67 páginas

Módulo III - Programación en JavaScript para Aplicaciones Web

Cargado por

Sebastián Jaramillo

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 67

Módulo III: Programación en JavaScript para

Aplicaciones Web

Lenguaje JavaScript: Visión General y Sintaxis

JavaScript es un lenguaje de programación interpretado, derivado del estándar ECMAScript, creado inicialmente
para ejecutarse dentro del navegador Netscape Navigator. Aunque en su nombre aparece la palabra "Java", es
importante aclarar que JavaScript y Java no están relacionados; son lenguajes completamente diferentes en cuanto
a su estructura, filosofía y ámbito de aplicación.
El objetivo principal de JavaScript es agregar comportamiento a las páginas web. Mientras HTML define la
estructura y CSS define el estilo, JavaScript introduce interactividad y dinamismo. Cuando un navegador incorpora un
intérprete de JavaScript, se habilita la posibilidad de que el contenido de la página cambie de forma dinámica sin
necesidad de recargarla completamente. Esto transforma el comportamiento estático de una página en una
experiencia interactiva para el usuario.

Interacción con el DOM y AJAX

El código JavaScript manipula el contenido de la página web a través de un modelo conocido como el Modelo de
Objetos del Documento (DOM, por sus siglas en inglés). El DOM representa la estructura de la página web como una
colección jerárquica de nodos, lo que permite a los scripts modificar el contenido, estructura y estilo de la página de
forma dinámica.
Una de las técnicas más potentes de JavaScript para crear aplicaciones web ricas es AJAX (Asynchronous
JavaScript and XML). Aunque originalmente el término hacía referencia a la capacidad de hacer solicitudes
asincrónicas al servidor usando JavaScript y XML, hoy en día abarca un conjunto más amplio de tecnologías:

HTML para la estructura de la página.

JavaScript para el comportamiento.

CSS para el diseño visual.

DOM para la manipulación del contenido.

JSON (JavaScript Object Notation) como formato común de intercambio de datos, reemplazando a XML por su
simplicidad y eficiencia.

AJAX permite actualizar partes específicas de una página web sin necesidad de recargarla completamente, lo que
da lugar a experiencias de usuario más fluidas y modernas.

Tipos de datos en JavaScript

En JavaScript, los datos se clasifican en tipos primitivos y tipos no primitivos (objetos). Comprender esta
clasificación es esencial para programar correctamente, ya que los primitivos y los objetos se comportan de manera
diferente en cuanto a mutabilidad, métodos disponibles y asignación en memoria.

Tipos de datos primitivos

Los tipos primitivos son aquellos que representan valores simples e inmutables. JavaScript incluye cinco tipos
primitivos fundamentales:

Módulo III: Programación en JavaScript para Aplicaciones Web 1

number: representa todos los valores numéricos, incluyendo enteros y números en punto flotante (como 0 o
3.1412 ).

string: representa texto, como "Hola mundo" .

boolean: representa valores lógicos: true o false .

null: representa un valor nulo explícito.

undefined: indica que una variable ha sido declarada pero aún no se le ha asignado un valor.

Estos tipos no poseen métodos ni propiedades por sí mismos. Por ejemplo, un número como 42 no puede "invocar"
métodos directamente.

El tipo Number y su representación

El tipo number en JavaScript abarca tanto enteros como números de punto flotante. Además, incluye valores
especiales como:

NaN (Not a Number): indica un valor que no es numéricamente válido.

Infinity: representa el infinito positivo o negativo.

Los números enteros pueden ser expresados en diferentes bases:

Decimal (base 10): por ejemplo, 16 .

Octal (base 8): 020 (aunque el soporte moderno es limitado y requiere un prefijo especial).

Hexadecimal (base 16): 0x10 , que también representa 16 .

Internamente, todos los números en JavaScript se representan como números de doble precisión en punto flotante
de 64 bits (no de 16 bits como se menciona incorrectamente), siguiendo el estándar IEEE 754.

El tipo String
Las cadenas de texto o strings están delimitadas por comillas simples ' o dobles " . Ambas son válidas y su elección
depende del estilo del programador o de la necesidad de anidar comillas en el contenido.

Dado que los primitivos no tienen métodos, uno podría pensar que no es posible manipular cadenas. Sin embargo,
JavaScript envuelve automáticamente los valores primitivos en objetos temporales (llamados objetos envolventes)
cuando se intenta acceder a métodos o propiedades.

Objetos envolventes (Wrapper Objects)

JavaScript proporciona objetos especiales llamados objetos envolventes, los cuales permiten trabajar con tipos
primitivos como si fueran objetos. Esto se hace mediante clases integradas que comparten nombre con los tipos
primitivos, pero inician con letra mayúscula:

Tipo primitivo Objeto envolvente

number Number

string String

boolean Boolean

Estos objetos envolventes proporcionan métodos útiles, como:

.toString() : convierte un valor a cadena.

.valueOf() : extrae el valor primitivo del objeto envolvente.

Ejemplo:

Módulo III: Programación en JavaScript para Aplicaciones Web 2

typeof "abc"; // "string" (primitive)
typeof String("abc"): // string
typeof new String("abc"); // "object"
typeof (new String("abc")).valueOf(); "string"

La palabra clave new se utiliza para crear el objeto envolvente de cadena y usando la función .valueOf() se puede
convertir a un tipo de cadena primitivo

El operador typeof
El operador typeof permite averiguar el tipo de dato de un valor. Este operador devuelve una cadena indicando si el
valor es un número, una cadena, un objeto, etc.

Ejemplo:

typeof "Hola" // "string"

typeof 42 // "number"
typeof true // "boolean"

Cabe destacar que al usar new String("Hola") , el tipo resultante será "object" debido a que se ha creado una instancia del
objeto String . En cambio, si se usa simplemente "Hola" , el tipo será "string" .

Arrays (Arreglos) en JavaScript

Los arreglos en JavaScript son objetos especializados que permiten almacenar múltiples valores en una sola
variable. Estos valores son accesibles a través de un índice numérico, comenzando en 0 (indexación basada en
cero).
Los arreglos pueden crecer o reducirse dinámicamente, y su propiedad .length indica la cantidad actual de
elementos.

Existen dos formas de declarar arreglos:

1. Constructor Array:

let frutas = new Array("manzana", "banana", "pera");

2. Literal de arreglo (más común y recomendado):

let frutas = ["manzana", "banana", "pera"];

El objeto Date
JavaScript ofrece el objeto Date para trabajar con fechas y horas. Se puede instanciar de diferentes maneras:

Sin parámetros:

let ahora = new Date();

Esto crea un objeto Date con la fecha y hora local actuales.

Con parámetros:

let fecha = new Date(2025, 4, 20); // 20 de mayo de 2025

Módulo III: Programación en JavaScript para Aplicaciones Web 3

Al convertir el objeto Date a una cadena, JavaScript llama automáticamente al método .toString() para mostrar la fecha
de forma legible.

El objeto Error y manejo de excepciones

JavaScript incluye el objeto Error para manejar excepciones. Cada instancia de Error incluye propiedades como:

message : describe el error ocurrido.

name : indica el tipo de error.

Existen varios tipos de errores integrados en JavaScript:

RangeError : cuando un número está fuera de su rango válido.

TypeError , SyntaxError , ReferenceError , EvalError , entre otros.

Además, es posible crear errores personalizados utilizando el constructor de Error :

let miError = new Error("Ocurrió un problema inesperado");

throw miError;

Este enfoque es útil para generar mensajes de error significativos en aplicaciones grandes.

JavaScript: Variables y Sentencias de Control

Este apartado presenta de manera detallada cómo JavaScript maneja las variables y las sentencias de control que
gobiernan el flujo de ejecución en un programa. Aprender estos conceptos es fundamental para comprender la lógica
de programación en JavaScript, ya que son las herramientas que nos permiten almacenar información y decidir qué
acciones tomar con base a ciertas condiciones.

¿Qué es una variable en JavaScript?

Una variable es un contenedor simbólico que almacena un valor de datos que puede cambiar durante la ejecución
del programa. En otras palabras, una variable es como una caja con nombre, en la cual se puede guardar un valor,
modificarlo más adelante o simplemente usarlo para operaciones y decisiones.

En JavaScript, la forma tradicional de declarar una variable es utilizando la palabra clave var . Por ejemplo:

var age;

En este ejemplo, se ha creado una variable llamada age , pero todavía no tiene un valor asignado.
También es posible declarar e inicializar la variable en el mismo paso, lo que significa asignarle un valor de
inmediato:

var age = 54;

Es importante entender que una variable puede ser inicializada más adelante, es decir, no es obligatorio darle un
valor en el momento de declararla. Además, una variable puede ser redefinida (o reasignada) con un nuevo valor a lo
largo del programa.

Tipado dinámico y tipo de datos en JavaScript

Una característica fundamental de JavaScript es que es un lenguaje poco tipado (también llamado débilmente
tipado o de tipado dinámico). Esto significa que no se necesita declarar el tipo de datos al momento de crear una
variable. El tipo de datos lo define el valor que se le asigna en tiempo de ejecución. Por ejemplo:

Módulo III: Programación en JavaScript para Aplicaciones Web 4

var nombre = "Carlos"; // tipo string
nombre = 25; // ahora tipo number

Esto permite gran flexibilidad, pero también puede generar errores difíciles de detectar si no se maneja con cuidado.

Variables no inicializadas
Cuando una variable se declara pero no se le asigna un valor, no tiene un valor predeterminado como cero ( 0 ), una
cadena vacía ( "" ) o null . En lugar de eso, su valor será undefined .
Ejemplo:

var edad;
[Link](edad); // imprime "undefined"

Este comportamiento se debe a que, dado que no se especifica el tipo de dato, JavaScript no tiene forma de deducir
qué valor debería tener por defecto.

Reglas para nombrar variables (Identificadores)

Los nombres de variables o identificadores deben seguir ciertas reglas para que sean válidos en JavaScript:

Deben comenzar con una letra, un guion bajo ( _ ) o un signo de dólar ( $ ).

Después del primer carácter, pueden contener también dígitos del 0 al 9.

Son sensibles a mayúsculas y minúsculas: edad y Edad son variables distintas.

Estos identificadores permiten que el código sea claro y comprensible, y al mismo tiempo, que siga normas del
lenguaje para ser interpretado correctamente.

Ámbito o alcance de las variables

El ámbito (o scope) de una variable define el lugar del código en el cual esa variable existe y puede ser utilizada.
Existen dos tipos principales de ámbito en JavaScript:

Ámbito local: Las variables declaradas dentro de una función solo existen dentro de esa función. Fuera de ella
no pueden ser accedidas.

function saludar() {
var mensaje = "Hola";
}

[Link](mensaje); // Error: mensaje no está definido

Ámbito global: Las variables declaradas fuera de cualquier función existen en todo el programa y pueden ser
accedidas desde cualquier parte del código.

var saludo = "Hola";

function mostrarSaludo() {
[Link](saludo); // Puede acceder a la variable global
}

También es importante destacar que si se declara una variable sin utilizar var , automáticamente se convierte en una
variable global, lo cual puede ser riesgoso y no es una buena práctica.

Módulo III: Programación en JavaScript para Aplicaciones Web 5

Sentencias condicionales: if , else
Las sentencias condicionales permiten que el programa tome decisiones basadas en condiciones específicas.
La sentencia más básica es if , que evalúa una condición booleana y ejecuta un bloque de código si la condición es
verdadera ( true ).

if (edad > 18) {

[Link]("Eres mayor de edad");
} else {
[Link]("Eres menor de edad");
}

La estructura if comienza con la palabra clave if , seguida de una condición entre paréntesis.

Si la condición se evalúa como verdadera, se ejecuta el bloque de código dentro de las llaves {} .

Si la condición es falsa, el control pasa al bloque else (si existe), que también debe ir entre llaves.

Aunque JavaScript no exige sangrías o tabulaciones, utilizarlas ayuda significativamente a mejorar la legibilidad del
código. De hecho, los editores modernos de texto suelen aplicar sangría automática para facilitar esta tarea.

Alcance de bloque: diferencia con Java

A diferencia de lenguajes como Java, JavaScript no tiene un alcance de declaración por bloque cuando se utiliza
var . Esto significa que una variable declarada dentro de un bloque de control (por ejemplo, dentro de un if ) puede

ser accedida fuera de ese bloque, lo cual puede llevar a errores si no se controla cuidadosamente.

if (true) {
var mensaje = "Hola mundo";
}

[Link](mensaje); // Esto imprime "Hola mundo"

Sentencia switch
La sentencia switch es una forma alternativa de tomar decisiones, especialmente útil cuando hay múltiples posibles
valores a comparar.

switch (color) {
case "rojo":
[Link]("Es rojo");
break;
case "azul":
[Link]("Es azul");
break;
default:
[Link]("Color no reconocido");
}

El valor que se va a evaluar se coloca entre paréntesis después de la palabra clave switch .

Luego, se escriben los diferentes case , cada uno con un valor esperado (puede ser un número o una cadena).

Si la expresión evaluada coincide con una etiqueta case , se ejecutan las instrucciones correspondientes.

La cláusula default se ejecuta si ningún caso coincide.

Módulo III: Programación en JavaScript para Aplicaciones Web 6

La palabra clave break evita que el control pase automáticamente al siguiente case .

Bucles en JavaScript: for y while

Bucle for
El bucle for se utiliza para repetir un bloque de código un número determinado de veces. Su estructura contiene tres
partes clave:

for (var i = 0; i < 5; i++) {

[Link](i);
}

Inicialización ( var i = 0 ): se ejecuta una sola vez al comienzo.

Condición ( i < 5 ): si es verdadera, se ejecuta el cuerpo del bucle.

Incremento ( i++ ): se actualiza al final de cada iteración.

El bucle continuará ejecutándose mientras la condición sea verdadera. Cuando sea falsa, se interrumpe.

Bucle while
El bucle while ejecuta un bloque de código mientras una condición sea verdadera:

var i = 0;
while (i < 5) {
[Link](i);
i++;
}

Es fundamental asegurarse de que la condición eventualmente se vuelva falsa, de lo contrario se creará un bucle
infinito.

Tabla resumen: Variables y sentencias de control en JavaScript

Concepto Descripción Ejemplo
var Declara una variable con ámbito global o local según el contexto var edad = 30;

Tipado dinámico Las variables no requieren tipo; toman el tipo del valor asignado var x = 10; x = "texto";

undefined Valor por defecto de una variable no inicializada var nombre; [Link](nombre); // undefined

Alcance local Variable declarada dentro de una función function f() { var x = 5; }

Alcance global Variable fuera de una función o sin usar var var y = 10; o z = 15;

if / else Estructura condicional básica if (x > 0) { ... } else { ... }

switch / case Alternativa a múltiples if / else if switch (color) { case "rojo": ... }

break Detiene la ejecución dentro de un switch break;

Bucle for Repite un bloque un número definido de veces for (var i = 0; i < 10; i++) { ... }

Bucle while Repite mientras la condición sea verdadera while (x < 5) { ... }

Este conjunto de herramientas —declaración de variables y estructuras de control— constituye la base lógica sobre
la cual se construyen todos los programas en JavaScript. Comprender su funcionamiento, sus reglas y su
comportamiento permite crear scripts más robustos, claros y predecibles.

Módulo III: Programación en JavaScript para Aplicaciones Web 7

JavaScript: Funciones y prototipos
Este tema aborda dos pilares fundamentales en JavaScript: las funciones y los prototipos. Entender cómo funcionan y
cómo se relacionan entre sí es esencial para escribir código eficiente y organizado en este lenguaje.

¿Qué es una función en JavaScript?

Una función en JavaScript es un bloque reutilizable de código que realiza una tarea específica. Puede definirse en
cualquier parte del código y llamarse desde distintos lugares después de haber sido declarada. Las funciones son
herramientas clave para la modularidad y el mantenimiento del código, ya que permiten separar la lógica en partes
independientes y reutilizables.
Las partes que componen una función son:

La palabra clave function , que inicia la declaración de la función.

El nombre de la función, que se usa para invocarla posteriormente.

Paréntesis que pueden incluir parámetros opcionales, que son variables que reciben valores cuando se llama a la
función.

Un bloque de código encerrado entre llaves {} que contiene la lógica que debe ejecutarse.

Una sentencia return opcional, que permite devolver un valor al lugar desde donde se llamó a la función

Ejemplo: función add

Considérese la función llamada add , que toma dos parámetros. Esta función realiza una operación diferente según el
tipo de datos que recibe:

Si ambos argumentos son numéricos, la función retorna su suma.

Si los argumentos son cadenas de texto, la función los concatena.

Este comportamiento dinámico es posible gracias al sistema de tipos dinámicos de JavaScript. Por ejemplo, al llamar
add("Nat", "Ram") , el resultado sería "NatRam" , mientras que add(5, 7) retornaría 12 .

Este tipo de flexibilidad permite que una misma función maneje múltiples tipos de entrada sin necesidad de
sobrecargas explícitas, como ocurre en otros lenguajes más estrictos.

function add(a, b) {
return a + b;
}

Crear objetos personalizados con funciones constructoras

En JavaScript, las funciones también pueden utilizarse como constructores de objetos, cuando se combinan con la
palabra clave new . Este patrón permite definir una “plantilla” para crear múltiples objetos con propiedades similares.

Ejemplo: función Car

Se define una función llamada Car que acepta tres parámetros: marca, modelo y año. Esta función se usa para
construir nuevos objetos de tipo automóvil, asignando esos valores a propiedades internas usando la palabra clave
this .

function Car(make, model, year) {

[Link] = make;
[Link] = model;
[Link] = year;
}

Módulo III: Programación en JavaScript para Aplicaciones Web 8

Luego, se crea una instancia del objeto así:

var c = new Car("Meridian", "Sabre GT", 2012);

Este fragmento de código genera un nuevo objeto c , con las propiedades make , model y year .

La palabra clave this

Dentro del contexto de una función constructora, this se refiere a la instancia específica que se está creando.
Permite asignar propiedades que solo pertenecen a ese objeto en particular. Por ejemplo, en [Link] = model , la parte
derecha representa el valor pasado como argumento, mientras que la parte izquierda representa la propiedad del
objeto Car que se está construyendo.
Esto evita conflictos entre variables globales y locales, y garantiza que cada instancia mantenga su propio conjunto
de datos.

Método getName dentro del constructor

Además de propiedades, también pueden añadirse métodos. Por ejemplo, se puede definir un método llamado
getName dentro de la misma función constructora para que devuelva una cadena que combine las propiedades del

automóvil:

[Link] = function() {
return [Link] + " " + [Link] + " " + [Link];
};

Al invocar [Link]() , el método retorna: "Meridian Sabre GT 2012" .

Para definir métodos es más eficiente en memoria el crear prototipos.

La diferencia clave es:

Los métodos definidos dentro del constructor se crean nuevamente para cada objeto

Los métodos definidos en el prototipo se comparten entre todos los objetos

Introducción a los prototipos

Los prototipos son mecanismos en JavaScript que permiten definir propiedades y métodos que serán compartidos
por todas las instancias de un objeto creado con una función constructora. Es decir, en lugar de definir un método
como getName dentro de cada objeto, puede definirse una sola vez en el prototipo, y todos los objetos instanciados lo
heredarán.

Todos los objetos creados con la palabra clave new heredan propiedades y métodos definidos en el prototipo
correspondiente. Esta es una de las bases del modelo de herencia en JavaScript.

Ventajas del uso de prototipos

Evitan la duplicación de código: una sola definición sirve para todos los objetos.

Permiten añadir nuevas propiedades o métodos sin modificar directamente los objetos ya creados.

Ofrecen una forma más eficiente de extender el comportamiento de los objetos.

Ejemplo: añadir getName al prototipo

En lugar de declarar el método getName dentro del constructor, se puede hacer así:

[Link] = function() {
return [Link] + " " + [Link] + " " + [Link];

Módulo III: Programación en JavaScript para Aplicaciones Web 9

};

De este modo, todos los objetos creados con new Car(...) tienen acceso al método getName , incluso si fueron creados
antes de definir el prototipo.
Esta capacidad de herencia dinámica permite que cualquier cambio al prototipo se refleje automáticamente en todas
las instancias existentes del objeto.

Modificación y extensión de prototipos

Otra característica poderosa de los prototipos es que se pueden modificar en cualquier momento, incluso después de
que se han creado instancias de objetos. Esto significa que puedes añadir nuevos métodos o propiedades a todos los
objetos de un tipo específico con una sola instrucción.
Por ejemplo:

[Link] = "unknown";

Esto agregará la propiedad color a todos los objetos tipo Car , aunque no se haya especificado al momento de su
creación. Las instancias existentes accederán automáticamente a esa propiedad.

Esta flexibilidad permite extender los objetos sin modificar directamente su definición original.

Funciones autoejecutables (IIFE)

Las funciones autoejecutables, también conocidas como Immediately Invoked Function Expressions (IIFE), son
funciones que se ejecutan tan pronto como se definen. Se utilizan comúnmente para:

Inicializar valores.

Encapsular variables.

Evitar la contaminación del espacio global.

Estas funciones se escriben generalmente de la siguiente manera:

(function() {
// código encapsulado aquí
})();

Dentro de una función autoejecutable, las variables y funciones declaradas no están disponibles fuera de ella, lo que
proporciona un ámbito privado que protege del acceso externo y posibles conflictos con otras partes del script.

Aplicaciones de las funciones autoejecutables

Estas funciones son especialmente útiles para:

Declarar y manipular elementos del DOM sin dejar variables expuestas globalmente.

Crear bloques de inicialización que se ejecuten solo una vez.

Encapsular bibliotecas o módulos de código.

Su capacidad para ejecutar automáticamente el código contenido y su aislamiento del resto del script hacen de ellas
una herramienta habitual en la programación moderna con JavaScript.

API de JavaScript
Las API (Interfaces de Programación de Aplicaciones) permiten a los desarrolladores interactuar con los distintos
elementos del navegador y del documento HTML. En el contexto de JavaScript, las API del DOM (Document Object

Módulo III: Programación en JavaScript para Aplicaciones Web 10

Model) permiten acceder, modificar y manipular los nodos del documento HTML, lo que da lugar a páginas web
dinámicas e interactivas.

Manipulación de nodos en el DOM

El modelo de objetos del documento (DOM) representa la estructura jerárquica de una página HTML. A través de
JavaScript, se pueden manipular los elementos del DOM utilizando funciones específicas. Algunas de las funciones
más comunes para acceder a los elementos HTML incluyen:

[Link](id) : Devuelve una única referencia al nodo que tenga un atributo id coincidente. Esta función

es ideal cuando se sabe que solo existe un elemento con ese identificador único en el documento.

[Link](tagName) : Devuelve una colección (NodeList) de todos los elementos del documento que

coincidan con el nombre de etiqueta especificado. Por ejemplo, [Link]("p") devuelve una lista
de todos los elementos <p> del documento.

Estos métodos son esenciales para acceder de forma directa a los elementos y realizar operaciones como lectura,
escritura o actualización de contenido.

Ejemplo de obtención de imágenes

Para ilustrar el uso práctico de getElementsByTagName , se puede recuperar una lista de todas las imágenes en una página
web utilizando:

var imgSet =
[Link]("img");
var output = "";
for (var i = 0; i < [Link]; i++) {
output += "<p>Source for image ";
output += i;
output += ": ";
output += imgSet[i].src;
output += "</p>";
}
[Link](output);

Posteriormente, es posible iterar sobre este conjunto de nodos y manipularlos según sea necesario. Por ejemplo, se
pueden concatenar los resultados en un flujo de salida HTML dinámico, accediendo a atributos como src , que define
la ubicación de la imagen fuente. Para agregar contenido al documento se utiliza [Link]() .

Creación de nuevos elementos en el DOM

Para generar nuevos nodos dentro de un documento HTML, se utiliza la función [Link](tagName) . Este
método permite crear elementos que aún no forman parte del árbol del DOM y que deben insertarse posteriormente
usando funciones como:

insertBefore(nuevoElemento, referencia) : Inserta un nodo antes del nodo de referencia.

appendChild(nodo) : Añade el nodo como hijo al final de otro nodo padre.

replaceChild(nuevo, viejo) : Reemplaza un nodo existente con uno nuevo.

Un ejemplo clásico consiste en crear un nuevo párrafo ( <p> ) con el texto "Hola mundo":

<head>
<script>
function addPara() {
var newPara = [Link]("p");

Módulo III: Programación en JavaScript para Aplicaciones Web 11

var newText = [Link]("Hello World!");
[Link](newText);
[Link](newPara);
}
</script>
</head>
<body onload="addPara()">
</body>

Este fragmento crea el elemento y lo inserta al final del nodo <body> del documento.

Modificación del contenido con innerHTML

La propiedad [Link] permite recuperar o modificar el contenido interno de un elemento HTML. Esta
propiedad trata el contenido como una cadena de texto, que puede incluir otras etiquetas HTML, lo que permite crear
estructuras más complejas dinámicamente.

Modificar innerHTML reemplaza por completo los elementos hijos actuales, ya que el navegador analiza la nueva
cadena y genera el nuevo contenido del DOM basado en ella.
Ejemplo:

[Link]("miDiv").innerHTML = "<p>Nuevo contenido</p>";

Estilización con JavaScript: [Link]

Los estilos CSS pueden ser modificados directamente mediante JavaScript utilizando la propiedad [Link] . Esto
permite aplicar o sobrescribir estilos en línea directamente sobre los elementos HTML. La sintaxis general es:

[Link] = "valor";

Por ejemplo:

<div id="div1" style="color: blue">

</div>
<script>
var div1 = [Link]("div1");
[Link] = "blue";
</script>

Este cambio tiene prioridad sobre cualquier regla definida en hojas de estilo externas, ya que se aplica directamente
en el elemento.

También se puede modificar el valor de un atributo con:

[Link]("atributo", "valor");

Y eliminar un atributo con:

[Link]("atributo");

Por otro lado, para recuperar el valor de un atributo específico, se utiliza:

Módulo III: Programación en JavaScript para Aplicaciones Web 12

[Link]("atributo");

Funciones y eventos del objeto window

El objeto window representa la ventana del navegador, y ofrece métodos que permiten abrir nuevas ventanas, manejar
eventos, y controlar el comportamiento de la página en distintos momentos.

Métodos relevantes del objeto window

[Link](url, nombre, características, reemplazar)

Abre una nueva ventana del navegador.

url : dirección web que se abrirá.

nombre : nombre de la ventana.

características : cadena con pares clave=valor separados por comas, que definen propiedades como tamaño y
posición.

reemplazar : booleano opcional que determina si la nueva página reemplaza a la actual en el historial.

[Link]

Ejecuta una función cuando la página ha sido completamente cargada.

[Link](mensaje)

Imprime una cadena en la consola del navegador como método de depuración. Es menos intrusivo que alert() .

[Link](x, y)

Desplaza la ventana del navegador hasta las coordenadas especificadas.

Ejemplo de uso de onload con una función anónima

Es posible asignar una función al evento onload para que se ejecute automáticamente al cargar la página. Esta función
puede, a su vez, invocar otras funciones:

Recapitulación de métodos clave

La siguiente lista resume algunas de las funciones esenciales utilizadas para manipular el DOM y el objeto window en
JavaScript:

[Link](id)

[Link](tagName)

[Link](tag)

appendChild , insertBefore , replaceChild

Módulo III: Programación en JavaScript para Aplicaciones Web 13

[Link]

setAttribute , removeAttribute , getAttribute

[Link] , [Link] , [Link] , [Link]

Aunque se han cubierto varias funciones y métodos fundamentales, esta no es una lista exhaustiva. Existen muchas
otras funciones relacionadas con la manipulación del DOM, y con herramientas avanzadas como CTI, DES y UO, que
complementan las capacidades básicas del lenguaje para crear aplicaciones web ricas e interactivas.

¿Qué son las APIs de JavaScript?

Para entender qué es una API de JavaScript, es importante primero saber qué es una API. Una API, o Interfaz de
Programación de Aplicaciones, es una forma en que dos aplicaciones pueden comunicarse entre sí. Entrega tu
solicitud a otro dispositivo, como una base de datos, y devuelve la respuesta de nuevo a ti.

💡 Imagina que estás sentado en un restaurante y has seleccionado tu pedido. El menú describe una lista de
platos, y las comidas correspondientes se preparan en la cocina. Tu camarero es el enlace entre tú y la
cocina, quien comunica tu pedido a la cocina y te regresa la comida. Esta comunicación es similar a cómo
funcionan las APIs. Una API es análoga a un camarero, ya que comunica una solicitud de un dispositivo a
otro, y devuelve la respuesta al primer dispositivo.

El menú en el ejemplo es la documentación de la API. En un restaurante, si pides un plato que no existe en el menú, el
camarero te informará que es una elección inválida y no podrá entregarte el plato. De manera similar, cada API tiene
documentación que describe las solicitudes que puedes hacer y el tipo de respuesta que deberías esperar recibir. Si
intentas hacer una solicitud inválida, te encontrarás con un error.

Las APIs de JavaScript son Interfaces de Programación de Aplicaciones que utilizan scripting en JavaScript para
acceder y modificar contenido de manera dinámica.

Arquitectura REST
La mayoría de las APIs de JavaScript siguen el estilo arquitectónico de Transferencia de Estado Representacional
(REST). Estas se conocen como APIs RESTful y siguen el paradigma CRUD. CRUD significa Crear, Leer, Actualizar y
Eliminar, y modela las cuatro funcionalidades básicas necesarias al comunicarse entre servicios y con una base de
datos. En un entorno REST, estas operaciones CRUD a menudo se aliasan de la siguiente manera:

Crear → POST

Leer → GET

Actualizar → PUT

Eliminar → DELETE

Como ejemplo, imagina una API que se comunica con un servicio bancario para procesar pagos en línea. Es posible
utilizar las cuatro operaciones CRUD para esta API. A continuación se proporciona un ejemplo de cada una.

Método URL Descripción

POST api/customer Crear un nuevo cliente bancario

GET api/customers/{id} Recuperar la información de un cliente

PUT api/customers/{id} Actualizar la información de un cliente específico

DELETE api/customers/{id} Eliminar un cliente bancario

Módulo III: Programación en JavaScript para Aplicaciones Web 14

Las URLs en cada ejemplo son importantes, ya que determinan el elemento/cliente específico que se está
accediendo.
En la solicitud POST, puedes ver que se crea un nuevo cliente con la API. Dependiendo de las especificaciones de la
API, esto puede incluir opciones para proporcionar datos para este cliente, como un nombre o detalles de la tarjeta de
crédito. También puede generar automáticamente nueva información al momento de la creación, como un id.
La solicitud GET te permite recuperar toda la información asociada con un cliente. La API asume un id único para
cada cliente, que se utiliza en la URL para especificar la información del cliente que estás buscando. Una respuesta a
esta solicitud puede venir en muchos formatos diferentes, como JSON o XML, dependiendo de la API.

En la solicitud PUT, puedes actualizar la información de un cliente específico. Esto sobrescribirá los datos actuales
con nuevos datos. Similar a la solicitud GET, puedes especificar un cliente específico usando el id. Puedes
proporcionar nuevos datos para ser actualizados de diferentes maneras que son específicas de la API. Algunas APIs
permiten incluir un “cuerpo” en el que puedes especificar un conjunto de datos que se enviarán con la solicitud. Por
ejemplo, puedes adjuntar el siguiente cuerpo a la solicitud PUT para actualizar el nombre y apellido de un cliente:

{
"first_name": "Thomas",
"last_name": "Watson"
}

En la solicitud DELETE dada en el ejemplo, puedes eliminar a un cliente por completo proporcionando nuevamente el
id.

API del Modelo de Objetos del Documento (DOM)

La API del Modelo de Objetos del Documento (DOM) es una de las APIs de JavaScript más básicas disponibles.
Conecta las páginas web con scripts al representar la estructura de un documento (por ejemplo, una página web en
HTML) en memoria, haciéndola accesible para su modificación según sea necesario.

La API del DOM se cubre con más detalle en los videos, y no se revisará aquí.

XMLHttpRequest
Una API de JavaScript popular es XMLHttpRequest (XHR), que te permite recuperar datos sin refrescar toda la
página. Esto es importante cuando quieres actualizar solo una parte de una página sin interrumpir lo que un usuario
está haciendo actualmente en la página.

XMLHttpRequest se utiliza ampliamente en la programación de JavaScript asíncrono y XML (AJAX). La

documentación completa sobre su uso se puede encontrar en (esta página)
[Link]

APIs Avanzadas
Hay APIs de JavaScript más avanzadas disponibles, cada una con un uso y especificaciones diferentes. Muchas de
estas APIs se pueden encontrar en el sitio web oficial de Mozilla Developer o puedes buscar en internet la API
requerida.

JavaScript del lado del cliente: con HTML

JavaScript del lado del cliente es una de las tecnologías esenciales que permite a las páginas web reaccionar a la
interacción del usuario en tiempo real. Este tipo de programación está diseñado para ejecutarse directamente en el
navegador del usuario, lo que proporciona una experiencia dinámica sin necesidad de enviar continuamente
información al servidor.

Módulo III: Programación en JavaScript para Aplicaciones Web 15

¿Qué es un script del lado del cliente?
Un script del lado del cliente es un pequeño programa escrito normalmente en JavaScript, que acompaña a un
documento HTML o que puede estar directamente incrustado en él. Este programa se ejecuta en el navegador del
usuario (cliente) cuando:

Se carga el documento,

Se hace clic en un botón,

Se activa un enlace,

O cuando ocurre algún otro evento dentro de la página.

Este enfoque permite modificar y ampliar documentos HTML de formas interactivas, mejorando significativamente la
experiencia del usuario.
Importante: Aunque JavaScript es el lenguaje de scripting más utilizado en el lado del cliente, otros lenguajes
también pueden ser utilizados en ciertos contextos. Sin embargo, JavaScript es el estándar universalmente
soportado por todos los navegadores modernos.

¿Cuándo se utiliza un script del lado del cliente?

El scripting del lado del cliente se aplica en múltiples escenarios comunes, entre ellos:

Validación de formularios: para verificar que los datos introducidos por el usuario sean correctos antes de
enviarlos al servidor.

Procesamiento de entrada en tiempo real: como por ejemplo, mostrar sugerencias mientras el usuario escribe.

Reacción a eventos del usuario: como hacer clic, mover el cursor o enfocar un campo.

Generación de contenido dinámico: como la creación o modificación de elementos HTML mientras se visualiza la
página.

Estas acciones se pueden ejecutar justo después de que el documento HTML se haya cargado por completo, o
cuando se dispare un evento específico.

Inclusión de scripts en HTML

Existen dos métodos principales para incluir scripts JavaScript en un documento HTML, ambos utilizando la etiqueta
<script> :

1. Script incrustado en el documento

Este método consiste en colocar directamente el código JavaScript dentro de la etiqueta <script> , en la sección <head>

o <body> del HTML. Es ideal para scripts cortos, específicos de una sola página.

<!DOCTYPE html>
<html>
<head>
<script>
function saludar() {
alert("¡Bienvenido a la página!");
}
</script>
</head>
<body onload="saludar()">
</body>
</html>

Módulo III: Programación en JavaScript para Aplicaciones Web 16

2. Script externo mediante atributo src
Cuando el código JavaScript es extenso o se reutiliza en varias páginas, se recomienda mantenerlo en un archivo
separado y referenciarlo usando el atributo src .

// [Link]
function saludar() {
alert("¡Bienvenido!");
}

Esta técnica mejora la organización del código, facilita la reutilización y permite una carga más eficiente del contenido
mediante el almacenamiento en caché del navegador.

Uso de la etiqueta <noscript>

Dado que algunos usuarios pueden tener desactivado JavaScript en su navegador, o utilizar navegadores antiguos
que no soportan scripts, HTML proporciona una etiqueta especial: <noscript> .
Todo el contenido colocado dentro de <noscript> será visible solo si JavaScript está deshabilitado o no es
compatible. Esto es útil para proporcionar mensajes alternativos o instrucciones al usuario.

Enlaces de eventos (event binding) en JavaScript

Una de las características más potentes del scripting del lado del cliente es la posibilidad de vincular scripts a
eventos que ocurren dentro del navegador. Esto se conoce como "event binding", y permite ejecutar funciones
automáticamente cuando se detectan acciones específicas del usuario.

Eventos comunes y su vinculación

Evento Descripción Ejemplo de uso

onload Se ejecuta cuando la página ha terminado de cargarse. Iniciar una animación.
onclick Se ejecuta cuando se hace clic en un elemento. Mostrar una alerta.
onmouseover Se ejecuta cuando el cursor pasa sobre un elemento. Cambiar el color de un botón.

Ejemplo de onclick y función vinculada

<button onclick="mostrarMensaje()">Haz clic aquí</button>

Módulo III: Programación en JavaScript para Aplicaciones Web 17

}
</script>

Event handler inline

Un manejador de eventos (event handler) es una función que define qué debe hacerse cuando ocurre un evento. En
el ejemplo anterior, mostrarMensaje es un event handler que responde al evento onclick .
También se pueden declarar manejadores más complejos o reutilizables externamente, y asociarlos con los
elementos mediante JavaScript, en lugar de directamente en el HTML:

const boton = [Link]("miBoton");

[Link] = mostrarMensaje;

Eventos adicionales
Además de los más comunes como onclick y onload , existen otros eventos que pueden ser aprovechados para mejorar
la interacción:

onmouseover : cuando el cursor pasa por encima de un elemento.

onchange : cuando cambia el valor de un campo de entrada.

onkeydown , onkeyup : cuando se presiona o libera una tecla.

onfocus , onblur : cuando un campo gana o pierde el foco.

Estos eventos son claves para la implementación de interfaces de usuario dinámicas y reactivas.

Laboratorio práctico: Validación de un formulario JavaScript

JavaScript es un lenguaje de scripting del lado del cliente y se utiliza comúnmente para crear páginas web dinámicas.
Te ayuda a cambiar el contenido de la página web de manera dinámica, así como a validar formularios y realizar otras
acciones. En este laboratorio, crearás un formulario HTML que utiliza JavaScript para validar la entrada.

Objetivos
Después de completar este laboratorio, podrás:

1. Crear un formulario web básico

2. Usar la etiqueta <script>

3. Agregar una función de JavaScript

4. Acceder a los controles del formulario desde JavaScript

5. Acceder a un cuadro de texto y verificar si está vacío

6. Ejecutar un conjunto de declaraciones basadas en una condición

7. Mostrar mensajes de error

8. Ejecutar una función cuando se envíe el formulario

9. Ejercicio Práctico: Agregar interactividad con JavaScript al Laboratorio Práctico: Conversión de Unidades utilizando Elementos

Estructurales HTML5 (completado anteriormente)

1. Crear un formulario HTML

En este ejercicio, crearás un formulario simple que acepta el nombre y la dirección de correo electrónico de una
persona y luego realiza una validación simple sobre la entrada ingresada.

Módulo III: Programación en JavaScript para Aplicaciones Web 18

Ve al explorador de proyectos, haciendo clic en el símbolo de Nuevo Archivo. Se abre una ventana de Nuevo
Archivo. Ingresa form_validation.html como el nombre del archivo y haz clic en OK. Ahora estás listo para comenzar a
crear el nuevo formulario.

Comencemos creando un formulario simple diseñado para aceptar el nombre y la dirección de correo electrónico del
usuario. El formulario tendrá un botón de Enviar y un botón de Restablecer.
Copia y pega el siguiente código en tu archivo para crear el formulario inicial sin validación:

<!DOCTYPE html>
<html>
<head>
<title>Contact Details</title>
</head>
<body>
<h2>Enter your contact details:</h2> <br>
<form id="form1">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email Address:</label>
<input type="text" id="email" name="email">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

Cuando hayas pegado el código, guarda tu archivo. Para ver cómo se mostrará tu página HTML, puedes usar la
extensión Live Server integrada siguiendo las instrucciones a continuación.

1. Abre el explorador de archivos y navega hasta tu archivo.

2. Haz clic derecho en tu archivo y selecciona ‘Abrir con Live Server’

3. Esto debería mostrar una notificación mencionando que el servidor ha comenzado en el puerto 5500.

4. Haz clic en el botón Skills Network a la izquierda, se abrirá el “Skills Network Toolbox”. Luego haz clic en Other y
después en Launch Application. Desde allí, ingresa el número de puerto como 5500 y lanza.

5. Haz clic en el nombre del archivo para ver su vista previa.

6. Después de seguir los pasos anteriores, tu página debería verse así:

Módulo III: Programación en JavaScript para Aplicaciones Web 19

2. Usa la etiqueta <script>
Usamos la etiqueta <script> para incrustar código ejecutable, generalmente JavaScript, en una página HTML. La
etiqueta puede contener declaraciones de script o puede referirse a un archivo de script externo. Usamos un
atributo type para especificar el lenguaje de script.
Aunque puedes colocar la etiqueta <script> en cualquier parte de tu documento HTML, para este laboratorio la
colocarás en la sección <head> .

Reemplaza la sección <head> de tu archivo con el siguiente código. Esto le indica al navegador que el código que
estamos a punto de poner dentro de la etiqueta <script> debe ejecutarse como JavaScript.

<head>
<script type="application/javascript">
</script>
<title>Contact Details</title>
</head>

3. Agregar una función de JavaScript

Ahora especificarás qué sucede cuando un usuario hace clic en el botón Enviar. Especificamos este comportamiento
con una función de JavaScript definida por el usuario, que es un bloque de código que se ejecuta cuando se llama.
Una función se puede llamar cualquier número de veces.
Una función en JavaScript se ve así:

function functon_name()
{
// code goes here
}

Vamos a añadir una función vacía que se llame checkdata . Usaremos esto para validar los datos en el formulario.
Reemplaza las etiquetas <script> en tu archivo con el siguiente código:

function functon_name()
{
// code goes here
}

Vamos a añadir una función vacía que se llame checkdata . Usaremos esto para validar los datos en el formulario.
Reemplaza las etiquetas <script> en tu archivo con el siguiente código:

4. Acceder a los controles HTML dentro de JavaScript

La función que has creado está destinada a validar el contenido de cada uno de los elementos de entrada en el
formulario. Para acceder a los datos de un elemento, el script necesita referirse al elemento correcto.

Módulo III: Programación en JavaScript para Aplicaciones Web 20

Una forma de identificar un elemento es usar un método llamado getElementById(elementID) . La siguiente línea de código
devuelve el elemento con el ID name :

[Link]("name");

Las siguientes líneas de código te permiten acceder a los elementos de entrada name y email del formulario. Ten en
cuenta que los id de ambos elementos ya han sido especificados en el código HTML. Almacenaremos las referencias
a los elementos en dos variables de JavaScript llamadas username y emailid .

var username = [Link]("name");

var emailid = [Link]("email");

Copia el código anterior y pégalo en tu función checkdata() .

5. Acceder y verificar datos

Cuando las referencias a los elementos se almacenan en las variables, los valores de los elementos se pueden
recuperar utilizando el atributo value . Si username es la variable que contiene la referencia del elemento de entrada,
entonces su valor se puede acceder utilizando
[Link]

Para verificar si este valor está en blanco, podemos usar la siguiente declaración:
[Link] == ""

"" indica una cadena vacía.

6. Ejecutar un conjunto de declaraciones basadas en una condición

Si el valor está en blanco, imprimiremos un mensaje de error y devolveremos el enfoque al elemento vacío.

Para realizar esta acción, usamos una declaración condicional de JavaScript llamada declaración if . La declaración
condicional if nos permite especificar un bloque de código que se ejecutará si una condición es verdadera.
La sintaxis de la declaración es la siguiente:

if(condition){
//block of code to be executed, if the condition is true.
}

Vamos a comprobar si el valor de username está vacío utilizando una declaración if . Copia este código y pégalo al final
de tu función checkdata() :

if([Link]==""){
return false;
}

Si el valor está en blanco, la declaración return false; devuelve un valor booleano false de la función checkdata() que
añadimos en el paso 3.
Comprobaremos todos los elementos de entrada del formulario de esta manera para determinar si están vacíos.

7. Mostrar mensajes de error

Puedes mostrar un mensaje a un usuario con la ayuda de un cuadro de alerta emergente. Para hacer esto, utilizarás el
método alert .

Utilicemos este método dentro de la función para alertar al usuario.

Módulo III: Programación en JavaScript para Aplicaciones Web 21

if([Link]==""){
alert("Please enter the name");
[Link]();
return false;
}

La declaración [Link]() se utiliza para devolver el enfoque de entrada al elemento donde encontramos un
problema, en este caso, username.
Reemplaza la condición actual en tu función con este nuevo código. A continuación, intenta agregar la misma lógica
condicional, pero para el elemento email_address .
A continuación, indicaremos que ninguno de los elementos está en blanco devolviendo true . Por lo tanto,
necesitamos agregar una declaración return true al final de la función.

Es una buena práctica incluir comentarios en tu código. Los comentarios te ayudarán a ti y a otros programadores a
depurar fácilmente cualquier error que podamos encontrar al ejecutar el código. En JavasScript, agregamos
comentarios de una sola línea utilizando dos barras diagonales: //
Nuestra función final checkdata() con los comentarios añadidos se ve así:

function checkdata(){
//Create references to the input elements we wish to validate
var username = [Link]("name");
var email_address = [Link]("email");

//Check if username field is empty

Esta función ahora debería funcionar como se esperaba y ya está lista para ser llamada, por lo que podemos usarla
donde la necesitemos.

8. Ejecutar una función cuando se envía el formulario

Ahora que tenemos una función checkdata() que funciona, nuestro paso final es llamarla cada vez que se envía el
formulario. Hacemos esto utilizando el evento onsubmit en nuestro código HTML. Este evento se activará cuando los
usuarios hagan clic en el botón Enviar.

El siguiente código vincula el evento onsubmit a la función checkdata() :

<form id="form1" onsubmit="return checkdata()">

Módulo III: Programación en JavaScript para Aplicaciones Web 22

Este código asegura que la función checkdata() se invoque cada vez que se envíe el formulario.

A continuación se muestra el código completo junto con el formulario HTML y la función de validación en JavaScript.
Copia y pega el código en tu archivo y verifícalo para determinar si está validando correctamente:

<!DOCTYPE html>
<html>
<head>
<title>Contact Details</title>
<script type="application/javascript">
function checkdata(){
//Create references to the input elements we wish to validate
var username = [Link]("name");
var email_address = [Link]("email");

//Check if username field is empty

if([Link] == ""){
alert("Please enter the name");
[Link]();
return false;
}
//Check if email field is empty
if(email_address.value == ""){
alert("Please enter the email");
email_address.focus();
return false;
}
//If all is well return true.
return true;
}
</script>
</head>
<body>
<h2>Enter your contact details:</h2> <br>
<form id="form1" onsubmit="return checkdata()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email Address:</label>
<input type="text" id="email" name="email">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

Ejercicio Práctico: Agregar interactividad de JavaScript a una página HTML a

través de enlaces

Módulo III: Programación en JavaScript para Aplicaciones Web 23

Anteriormente, debiste haber creado una página web para la conversión de unidades en un archivo llamado [Link] ,
y haberla estilizado con CSS en el laboratorio titulado: Laboratorio Práctico: Estilizando tu Página Web usando CSS . Si no, haz clic
aquí para completarlo
Ahora agregarás event listeners (oyentes de eventos) a los botones en la página web, para hacerlos funcionales.

1. Haz clic en el botón de abajo para crear un nuevo archivo llamado [Link].
Open [Link] in IDE

2. Agrega la función para convertir la temperatura de Celsius a Fahrenheit

Debe obtener el valor dentro del elemento “Celsius” en [Link]

La fórmula matemática para la conversión debe ser aplicada

Temp(Fahrenheit) = [Temp(Degrees)*9/5] + 32

Establezca la propiedad value del elemento “Fahrenheit” en [Link] al valor devuelto

Haga clic aquí para ver el código

function temperature(){
//To convert celsius to farenheit
//(CEL * 9/5) + 32
var c = [Link]("celsius").value;
var f = (c * 9/5) + 32
[Link]("fahrenheit").value = f
}

3. Agrega la función para convertir peso de Kgs a Libras

Debe obtener el valor dentro del elemento “kilo” en [Link]

La fórmula matemática para la conversión debe aplicarse

Weight(Pounds) = Weight(Kgs) * 2.2

Establece la propiedad innerHTML del elemento “pounds” en [Link] al valor devuelto

Haz clic aquí para ver el código

function weight(){
//To convert KGs to Pounds
// KG * 2.2
var kg = [Link]("kilo").value;
var p = kg * 2.2
[Link]("pounds").value = p
}

4. Agrega la función para convertir la distancia de Kms a Millas

Debe obtener el valor dentro del elemento “km” en [Link]

Se debe aplicar la fórmula matemática para la conversión

Distance(Miles) = Distance(Kms) * 0.62137

Módulo III: Programación en JavaScript para Aplicaciones Web 24

Establecer la propiedad innerHTML del elemento “miles” en [Link] al valor devuelto

Haz clic aquí para ver el código

function distance(){
//To convert KMs to Miles
// KM * 0.62137
var km = [Link]("km").value;
var m = km * 0.62137
[Link]("miles").value = m
}

5. Guarda el archivo [Link] actualizado.

Haz clic aquí para ver el código completo en [Link]

function temperature(){
//To convert celsius to farenheit
//(CEL * 9/5) + 32
var c = [Link]("celsius").value;
var f = (c * 9/5) + 32
[Link]("fahrenheit").value = f
}

function weight(){
//To convert KGs to Pounds
// KG * 2.2
var kg = [Link]("kilo").value;
var p = kg * 2.2
[Link]("pounds").value = p
}

function distance(){
//To convert KMs to Miles
// KM * 0.62137
var km = [Link]("km").value;
var m = km * 0.62137
[Link]("miles").value = m
}

Módulo III: Programación en JavaScript para Aplicaciones Web 25

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

Módulo III: Programación en JavaScript para Aplicaciones Web 26

6. Vincula [Link] a [Link]

Usa la etiqueta script con el atributo src .

Haz clic para ver el código

<head>
<title>Document</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>
</head>

7. Enlaza la sección temperature de [Link] con la función temperature en [Link]

Al botón con ID "temperature" en [Link] , agrégale un evento onclick para invocar el método temperature() .

Asigna el ID del campo de entrada de temperatura como 'celsius' .

Asigna el ID del campo de salida de temperatura como 'fahrenheit' .

Click here to see the code

<fieldset>
<legend>Temperature</legend>
<label for="celsius">Celsius</label> <br/>

<input type="number" id="celsius"> <br/>

<button id="temperature" onclick="temperature()"> Convert </button> <br/>

<input type="number" id="fahrenheit"> <br/>

<label for="fahrenheit">Fahrenheit</label>
</fieldset>

8. Enlaza la sección weight de [Link] con la función weight en [Link]

Al botón con ID "weight" en [Link] , agrégale un evento onclick para invocar el método weight() .

Asigna el ID del campo de entrada de peso como 'kilo' .

Asigna el ID del campo de salida como 'pounds' .

Click here to see the code

<fieldset>
<legend>Weight</legend>
<label for="Weight">KG</label> <br/>

<input type="number" id="kilo"> <br/>

<button id="weight" onclick="weight()"> Convert </button> <br/>

<input type="number" id="pounds"> <br/>

Módulo III: Programación en JavaScript para Aplicaciones Web 27

<label for="pounds">Pounds</label>
</fieldset>

9. Enlaza la sección distance de [Link] con la función distance en [Link]

Al botón con ID "distance" en [Link] , agrégale un evento onclick para invocar el método distance() .

Asigna el ID del campo de entrada como 'km' .

Asigna el ID del campo de salida como 'miles' .

Click to see the code

<fieldset>
<legend>Distance</legend>
<label for="km">KM</label> <br/>

<input type="number" id="km"> <br/>

<button id="distance" onclick="distance()"> Convert </button> <br/>

<input type="number" id="miles"> <br/>

<label for="miles">Miles</label>
</fieldset>

10. Guarda los cambios en [Link].

Módulo III: Programación en JavaScript para Aplicaciones Web 28

<section id="temperature" class="b temperature">
<div id="tmp">
<figure>
<img src="[Link]
illsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/ther
[Link]" width="150px"/>
<figcaption>Celsius to Farenheit Conversion</figcaption>
</figure>
<article>

<fieldset>
<legend>Temperature</legend>
<label for="celsius">Celsius</label> <br/>

<input type="number" id="celsius"> <br/>

<button id="temperature" onclick="temperature()"> Convert </button> <br/>

<input type="number" id="fahrenheit"> <br/>

<label for="fahrenheit">Fahrenheit</label>
</fieldset>
<aside>
To convert celsuis to fahrenheit yourself, use this formula replacing the `C` with your temperatur
e in celsuis: (C × 9/5) + 32
</aside>
</article>
</div>
</section>

<section id="weight" class="b weight">

<div id="wgt">
<figure>
<img src="[Link]
illsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/weig
[Link]" width="150px"/>
<figcaption>Kilograms to Pound Conversion</figcaption>
</figure>
<article>
<fieldset>
<legend>Weight</legend>
<label for="kilo">KG</label> <br/>

<input type="number" id="kilo"> <br/>

<button id="weight" onclick="weight()"> Convert </button> <br/>

<input type="number" id="pounds"> <br/>

Módulo III: Programación en JavaScript para Aplicaciones Web 29

<label for="pounds">Pounds</label>
</fieldset>
<aside>
To convert kilograms to pounds yourself, use this formula replacing the `kg` with your weight in k
ilograms: kg x 2.205
</aside>
</article>
</div>
</section>

<section id="distance" class="b distance">

<div id="dst">
<figure>
<img src="[Link]
illsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/spe
[Link]" width="150px"/>
<figcaption>Kilometers to Miles Conversion</figcaption>
</figure>
<article>
<fieldset>
<legend>Distance</legend>
<label for="km">KM</label> <br/>

<input type="number" id="km"> <br/>

<button id="distance" onclick="distance()"> Convert </button> <br/>

<input type="number" id="miles"> <br/>

<label for="miles">Miles</label>
</fieldset>
<aside>
To convert kilometers to miles yourself, use this formula replacing the `km` with your distance in
kilometers: km × 0.62137
</aside>

</article>
</div>
</section>
<div style="clear:both;"></div>

</div>

<div id="go-home" class="iconbutton">

Módulo III: Programación en JavaScript para Aplicaciones Web 30

</a>
</div>

<footer>Learn more about HTML and CSS as a part of IBM Fullstack Cloud Developer Certification</foo
ter>
</body>
</html>

11. Visualiza [Link] con Live Server y verifica si al hacer clic en los botones correspondientes se muestran los
valores convertidos de temperatura, peso y distancia.

Módulo III: Programación en JavaScript para Aplicaciones Web 31

JavaScript del lado del cliente: con DOM
El Modelo de Objetos del Documento, conocido como DOM por sus siglas en inglés (Document Object Model), es una
interfaz de programación que actúa como puente entre los lenguajes de marcado como HTML o XHTML, y
JavaScript. Gracias al DOM, es posible acceder, modificar y manipular dinámicamente la estructura, contenido y
estilo de los documentos desde el navegador.

Cuando una página HTML es cargada por un navegador, este interpreta el código y construye una representación
interna del documento como un árbol de nodos. Este árbol permite que los scripts, especialmente escritos en
JavaScript, puedan modificar en tiempo real cualquier aspecto de la página: añadir o eliminar elementos, cambiar
textos, estilos o responder a acciones del usuario.

El DOM es una especificación mantenida por el Consorcio World Wide Web (W3C), el cual ha definido distintos
niveles del estándar:

DOM Nivel 0: acceso básico a los elementos HTML como formularios y enlaces, sin estructura de árbol.

DOM Nivel 1: introduce una estructura jerárquica de objetos basada en nodos, lo cual permite una manipulación
más completa del documento. Este nivel es el más ampliamente soportado por los navegadores.

DOM Niveles 2, 3 y 4: agregan más funcionalidades como eventos, estilos CSS y soporte para documentos XML
más complejos.

La jerarquía del DOM y sus objetos principales

El DOM se estructura como una jerarquía de objetos en forma de árbol. En la cima de esta jerarquía se encuentra el
objeto window , que representa la ventana del navegador y sirve como el contenedor global de todo lo que ocurre en
una sesión de navegación. A partir de window , se accede a varios objetos secundarios:

window : el objeto global que representa la ventana del navegador. Proporciona métodos como alert() , confirm() y
prompt() para interactuar con el usuario. Estos métodos pueden escribirse con o sin el prefijo window :

alert("Hola, usuario"); // Equivalente a [Link]("Hola, usuario");

history : almacena el historial de navegación de la sesión actual. Permite simular la navegación hacia adelante o

atrás con métodos como [Link]() y [Link]() .

location : contiene información sobre la URL actual del documento y permite redireccionamientos mediante
[Link] .

navigator : representa información sobre el navegador del usuario. Dado que no está completamente
estandarizado, los valores que devuelve pueden variar entre navegadores.

screen : ofrece información sobre la resolución y dimensiones de la pantalla del usuario, lo cual puede ser útil para

ajustar el diseño de una aplicación en dispositivos móviles.

document : permite el acceso directo a todos los elementos HTML de la página. Cada documento cargado en la
ventana genera automáticamente un objeto document .

El objeto document y la manipulación del contenido HTML

Cuando un archivo HTML se carga, el navegador lo convierte en un objeto document , permitiendo acceder y modificar
su contenido desde JavaScript. Este documento es representado como un árbol DOM compuesto por nodos:

Tipos de nodos
Existen dos tipos fundamentales de nodos:

1. Nodos de elementos: representan las etiquetas HTML, como <html> , <head> , <body> , <p> , <input> , etc.

Módulo III: Programación en JavaScript para Aplicaciones Web 32

2. Nodos de texto: contienen el contenido textual que aparece entre las etiquetas de apertura y cierre de un
elemento.

Ejemplo básico de estructura HTML y su equivalente en nodos DOM:

<!DOCTYPE html>
<html>
<head>
<title>Mi página</title>
</head>
<body>
<p>Hola, mundo</p>
<input type="text" />
</body>
</html>

En la representación del árbol DOM nivel 1, este documento se organizaría así:

window
└── document
└── html
├── head
│ └── title
│ └── (nodo de texto: "Mi página")
└── body
├── p
│ └── (nodo de texto: "Hola, mundo")
└── input

Además de los elementos visibles, el DOM nivel 2 considera también los nodos de espacio en blanco, como los
saltos de línea, tabulaciones y retornos de carro. Esto significa que un salto de línea entre un párrafo y un input
también se representa como un nodo de texto vacío, el cual puede tener implicaciones en ciertas manipulaciones o
recorridos del DOM.

Comparación entre DOM Nivel 0 y DOM Nivel 2

Para entender la evolución del DOM, vale la pena contrastar cómo se representa una sección de formulario en los
distintos niveles del modelo:

Módulo III: Programación en JavaScript para Aplicaciones Web 33

Característica DOM Nivel 0 DOM Nivel 2

Representación de etiquetas Sí Sí

Representación de saltos de línea y espacios No Sí (como nodos de texto vacíos)

Modelo basado en árbol No (más plano) Sí (estructura jerárquica completa)

Manipulación precisa de nodos Limitada Completa y detallada

Este nivel de detalle del DOM Nivel 2 permite a los desarrolladores un control más preciso del documento, incluyendo
elementos invisibles como los retornos de carro o el espacio entre etiquetas.

Objetos DOM de JavaScript

Tipos de nodos en el DOM
El Modelo de Objetos de Documento (DOM) Nivel 2 del W3C define 12 tipos diferentes de nodos, aunque solo 7 de
ellos son directamente aplicables a documentos HTML. Comprender estos nodos es esencial para leer y manipular el
árbol DOM con JavaScript, ya que cada uno representa una parte distinta del documento estructurado.

Cada tipo de nodo está definido como una constante con nombre y está asociado a un valor entero que lo identifica:

Node Type
Integer Value Node Name Node Value Description
(Text)

Element 1 Tag name null Any HTML tag

Attribute 2 Attribute name Attribute value A name-value pair

Text 3 #text Text content Text that is contained by the element

Comment 8 #comment Text comment HTML comment

Document 9 #document null document object

Document Type 10 DOCTYPE null DTD specification

Fragment 11 #document fragment null Nodes outside the document

Estos valores son útiles al inspeccionar documentos con herramientas como DevTools de los navegadores, donde los
nodos son clasificados por tipo para su análisis y depuración.

Nombres y valores de nodos

En el árbol DOM:

El nombre del nodo tipo elemento es igual al nombre de la etiqueta HTML (por ejemplo, div , p , h1 ).

<div id="div123">Contenido</div>

Nombre del nodo: DIV

Módulo III: Programación en JavaScript para Aplicaciones Web 34

Si el div tiene un atributo, como id="div123" :

Nombre del atributo: id

Valor del atributo: "div123"

Los nodos de texto tienen como nombre #text , y su valor es la cadena de texto que contienen.

<p>Hola mundo</p>

Nombre del nodo de texto: #text

Valor del nodo: "Hola mundo"

Estos nodos de texto también incluyen saltos de línea, tabulaciones y espacios en blanco, que son importantes en
versiones más avanzadas del DOM (como DOM Nivel 2), donde se consideran parte del árbol.

Propiedades de los nodos y estructura del DOM

Cuando un navegador carga una página, se crean matrices que contienen los elementos agrupados por tipo:

[Link] → todos los formularios del documento

[Link] → todas las imágenes

[Link] → todos los enlaces

[Link] → todos los anclajes ( <a name=""> )

[Link] → objetos embebidos como Flash o plugins

[Link] → applets de Java

Estas matrices se indexan según el orden de aparición en el documento HTML, empezando desde 0 .
Por ejemplo, si un formulario tiene un campo llamado field1 , se puede acceder de varias formas:

// Acceso por índice

[Link][0].elements[0];

// Acceso por nombre del campo

[Link][0].elements["field1"];

// Forma abreviada (si los nombres están bien definidos)

document.form1.field1;

Nota: Solo puede haber un objeto document en una ventana. Por ello, puede omitirse
[Link], pero no document cuando se hace referencia directa a elementos.

Uso del atributo id para acceder a elementos

El atributo id es fundamental en HTML y JavaScript para identificar y manipular elementos de forma directa. Algunas
convenciones importantes para usar correctamente id :

Debe ser único dentro del documento.

El valor debe ir entre comillas.

No debe empezar por un número.

Por ejemplo:

Módulo III: Programación en JavaScript para Aplicaciones Web 35

Y en JavaScript:

// Acceso al elemento por su ID

let campoUsuario = [Link]("username");

Se recomienda usar el mismo nombre para el atributo id y el atributo name cuando ambos
están presentes, para mantener consistencia y facilitar el acceso desde scripts.

Laboratorio Práctico: Manipulación del DOM con JavaScript

El Modelo de Objetos del Documento (DOM) representa la estructura de un documento HTML como un objeto, lo que
permite interactuar y modificar el contenido, la estructura y los estilos de las páginas web de manera dinámica.
JavaScript proporciona varios métodos de manipulación del DOM que permiten a los desarrolladores crear páginas
web dinámicas e interactivas. En este laboratorio, aprenderás a manipular el DOM usando JavaScript para construir
una aplicación de lista de tareas.

Objetivos
Al final de este laboratorio, podrás:

Entender cómo usar métodos de manipulación del DOM como [Link]() , appendChild() y removeChild()

Agregar, editar y eliminar elementos dinámicamente en una página web

Crear una aplicación interactiva de lista de tareas donde se puedan gestionar las tareas en tiempo real

Ejercicio 1: Entendiendo el Código Inicial

En este ejercicio, crearás la estructura básica para una aplicación de lista de tareas con tres botones: Agregar
Tarea, Eliminar Tarea y Editar Tarea. Este código establecerá la base de la aplicación, y más adelante la mejorarás en
los ejercicios siguientes añadiendo funcionalidad a estos botones.

Crea un nuevo archivo llamado [Link]

Copia el código proporcionado a continuación e insértalo en el archivo [Link]

Estructura básica de HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
/* Styles the main container of the to-do list */
.todo-container {
width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;

Módulo III: Programación en JavaScript para Aplicaciones Web 36

border-radius: 5px;
}

/* Removes default list styling for the to-do list */

.todo-list {
list-style-type: none;
padding: 0;
}

/* Styles each list item in the to-do list */

li {
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Adds spacing for buttons in list items */

button {
margin-left: 10px;
}
</style>
</head>
<body>

Explicación del código

1. Estructura HTML:

El <ul> con id="todoList" contendrá la lista de tareas.

El campo <input> con id="taskInput" permite a los usuarios ingresar nuevas tareas.

Módulo III: Programación en JavaScript para Aplicaciones Web 37

Hay un botón para activar la adición de tareas, pero la funcionalidad se implementará en los siguientes
ejercicios.

2. Estilo CSS:

La clase .todo-container se utiliza para estilizar el contenedor de la lista de tareas, centrándolo y añadiendo
relleno y bordes para un aspecto limpio.

La clase .todo-list estiliza la lista desordenada, y los elementos li reciben margen y estilo flexbox para alinear
los elementos de manera ordenada.

3. Marcador de posición de JavaScript:

La sección de script contendrá la lógica para interactuar con el DOM, como agregar tareas, eliminar tareas y
editar tareas.

Lanza la página web usando Live Server

1. Abre tu explorador de archivos y localiza tu archivo HTML.

2. Haz clic derecho en el archivo y selecciona Abrir con Live Server.

3. Aparecerá una notificación indicando que el servidor ha comenzado en el puerto 5500.

4. Haz clic en el botón debajo de la notificación o utiliza el Skills Network Toolbox, luego navega a Otro > Lanzar
Aplicación, ingresa el puerto 5500 y haz clic en el botón de lanzamiento resaltado en la captura de pantalla a
continuación. Esto abrirá la página web en una nueva pestaña del navegador.

La salida debería aparecer como se muestra en la captura de pantalla a continuación:

Ejercicio 2: Agregar una Tarea a la Lista de Tareas

En este ejercicio, implementarás la funcionalidad para agregar una nueva tarea a la lista. La tarea se añadirá
dinámicamente cuando el usuario interactúe con la página. Aquí está cómo funciona:

Cuando el usuario escribe una tarea en el campo de entrada y hace clic en el botón Agregar Tarea, la tarea se
añadirá a la lista.

Cada tarea se mostrará con botones de Editar y Eliminar al lado.

Módulo III: Programación en JavaScript para Aplicaciones Web 38

Pasos para implementar la tarea:
1. Seleccionar elementos:

Usa [Link]('taskInput') para seleccionar el campo de entrada donde el usuario escribirá su tarea.

Usa [Link]('todoList') para seleccionar la lista desordenada ( <ul> ) donde se añadirán las nuevas
tareas.

2. Crear nuevos elementos:

Usa [Link]("li") para crear un nuevo elemento de lista ( <li> ) que contendrá la tarea.

Usa [Link]("span") para crear un elemento span que contendrá el texto de la tarea.

Crea botones para Editar y Eliminar usando [Link]("button") .

3. Agregar controladores de eventos:

Vincula el botón Editar a un controlador de eventos estableciendo la propiedad onclick a una función (por
ejemplo, editTask(span) ).

De manera similar, vincula el botón Eliminar a un controlador de eventos (por ejemplo, removeTask(li) ).

4. Añadir elementos al DOM:

Añade el texto de la tarea y los botones al elemento de lista ( <li> ) usando el método appendChild() .

Añade el elemento de lista ( <li> ) a la lista desordenada ( <ul> ) usando appendChild() .

5. Limpiar el campo de entrada:

Después de añadir la tarea a la lista, limpia el campo de entrada usando [Link] = "" .

Haz clic aquí para ver el código de solución

10.

11.

12.

13.

14.

15.

16.

Módulo III: Programación en JavaScript para Aplicaciones Web 39

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

Módulo III: Programación en JavaScript para Aplicaciones Web 40

54.

55.

56.

57.

58.

59.

60.

61.

62.

63.

64.

65.

66.

67.

68.

69.

70.

71.

72.

73.

74.

75.

76.

77.

78.

79.

80.

Salida:
Recarga la página web para probar la funcionalidad. Si el servidor en vivo no está funcionando, inícialo y luego
lanza la aplicación.

Una vez que la página esté cargada, escribe una tarea en el campo de entrada y haz clic en Agregar Tarea. La
tarea se añadirá a la lista de tareas pendientes, apareciendo junto a los botones de Editar y Eliminar para cada
tarea.

Módulo III: Programación en JavaScript para Aplicaciones Web 41

Resultado:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To-Do List</title>
<style>
/* Styles the main container of the to-do list */
.todo-container {
width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

/* Removes default list styling for the to-do list */

.todo-list {
list-style-type: none;
padding: 0;
}

/* Styles each list item in the to-do list */

li {
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Adds spacing for buttons in list items */

button {
margin-left: 10px;
}

Módulo III: Programación en JavaScript para Aplicaciones Web 42

</style>
</head>
<body>
<div class="todo-container">
<h1>To-Do List</h1>

if (taskText !== "") {

// Con esto se accede al elemento ul
const ul = [Link]("todoList");

// Crear un nuevo ítem para la lista

const li = [Link]("li");

// Crear el texto de la tarea:

const span = [Link]("span");
[Link] = taskText;

// Crear los botones para Editar y Eliminar

//Botón Editar:
const editButton = [Link]("button");
[Link] = "Edit";
[Link] = () => editTask(span);

//Botón Eliminar:
const removeButton = [Link]("button");
[Link] = "Delete";
[Link] = () => removeTask(li);

//Agregar botones y texto al elemento de la lista

[Link](span);
[Link](editButton);
[Link](removeButton);

//Agregar elemento de la lista a la lista

[Link](li);

Módulo III: Programación en JavaScript para Aplicaciones Web 43

//limpiar el campo del Input
[Link] = "";
} else {
alert("Please enter a valid task.");
}
}
</script>
</body>
</html>

Ejercicio 3: Editar una tarea en la lista de tareas

En este ejercicio, implementarás la funcionalidad para editar una tarea existente en la lista. Así es como funciona:

Cuando el usuario hace clic en el botón Editar al lado de una tarea, se le pedirá que ingrese un nuevo texto para
la tarea.

Si el usuario ingresa un nuevo texto válido para la tarea (no vacío), la tarea se actualizará dinámicamente en la
lista.

El texto de la tarea solo se actualizará si el usuario proporciona una entrada no vacía.

Pasos para implementar la tarea:

1. Configurar la función Editar:

Crea una función editTask(span) donde span se refiere al elemento que contiene el texto actual de la tarea.

Esta función te permitirá pedir al usuario un nuevo texto para reemplazar la tarea actual.

2. Pedir al usuario un nuevo texto:

Dentro de la función editTask() , utiliza el método prompt() para preguntar al usuario por un nuevo texto de tarea.
Puedes pasar la tarea actual ( [Link] ) como valor predeterminado en el aviso.

3. Verificar la entrada válida:

Después de que el usuario ingrese su nueva tarea, verifica si la entrada no es null y no está vacía.
Utiliza [Link]() para asegurarte de que el texto de la tarea no sea solo espacios en blanco.

4. Actualizar la tarea:

Si el usuario proporciona una entrada válida, actualiza la tarea asignando el nuevo valor a [Link] . Esto
actualizará dinámicamente la tarea en la lista.

Haz clic aquí para ver el código de solución

// Function to edit an existing task

function editTask(span) {
// Prompt the user to enter a new task description
const newTask = prompt("Edit your task:", [Link]);

// Update the task only if the input is not null or empty

if (newTask !== null && [Link]() !== "") {
[Link] = [Link](); // Set the new task text
}
}

Módulo III: Programación en JavaScript para Aplicaciones Web 44

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

Salida:
Recarga la página web para probar la funcionalidad. Si el servidor en vivo no está en funcionamiento, inícialo y
luego lanza la aplicación.

Una vez que la página esté cargada, hacer clic en el botón Editar para una tarea específica mostrará un aviso
para actualizar la tarea. Realiza tus ediciones y haz clic en OK para guardar los cambios.

Módulo III: Programación en JavaScript para Aplicaciones Web 45

Ejercicio 4: Eliminar una Tarea de la Lista de Tareas
En este ejercicio, implementarás la funcionalidad para eliminar una tarea de la lista. Así es como funciona:

Cuando el usuario hace clic en el botón Eliminar junto a una tarea, la tarea se eliminará de la lista.

La tarea se eliminará dinámicamente de la lista desordenada.

Pasos para implementar la tarea:

1. Seleccionar la lista:

Usa [Link]('todoList') para seleccionar la lista desordenada ( <ul> ) que contiene las tareas.

2. Eliminar la tarea:

Cuando el usuario haga clic en el botón Eliminar, usa el método removeChild() para eliminar la tarea específica
(representada como un elemento <li> ) de la lista.

3. Eliminar el elemento de la tarea:

Pasa la tarea (el elemento <li> ) al método removeChild() para eliminarlo del DOM.

Haz clic aquí para ver el código de la solución

// Function to remove a task from the to-do list

function removeTask(task){
const ul = [Link]("todoList"); // Get the list container
[Link](task); // Remove the specified task element
}

Salida:
Recarga la página web para probar la funcionalidad. Si el servidor en vivo no está funcionando, inícialo y luego
lanza la aplicación.

Una vez que la página esté cargada, hacer clic en el botón Eliminar eliminará la tarea correspondiente de la lista.

Laboratorio Práctico: JavaScript - Consola del Navegador

Tarea 1 - Abrir la consola del navegador
En esta tarea, vamos a ejecutar código JavaScript en la consola del navegador. El navegador Chrome utiliza V8, que
es el motor de JavaScript de alto rendimiento de código abierto de Google.

1. Abre una nueva pestaña en blanco en tu navegador. Puedes hacer esto presionando Ctrl + T (Windows)
o Command + T (Mac).

2. Haz clic derecho en cualquier parte de la nueva pestaña en blanco del navegador y
elige Inspeccionar o Inspeccionar elemento, dependiendo del navegador que estés utilizando. La imagen a
continuación es para el navegador Chrome.

3. Debería abrirse una ventana de desarrollador en tu pantalla. Ve a la pestaña Consola, como se muestra a
continuación. Verás un símbolo del sistema. Puedes ejecutar el resto de las tareas allí.

4. Si tu consola tiene algún registro impreso, límpiala ejecutando el siguiente comando. Esto no es obligatorio, pero
te ayudará a empezar de nuevo.

clear()

Módulo III: Programación en JavaScript para Aplicaciones Web 46

Tarea 2 - Ejecutando comandos de JavaScript

NOTA: En cualquier momento, cuando desees limpiar la consola, ejecuta el

comando clear(), o [Link]().

Para ejecutar los comandos, utilizaremos el símbolo del sistema en el control del navegador. Escribe o pega cada
comando y presiona enter para ejecutar el comando.

1. Comencemos con un código simple para imprimir ¡Hola Mundo! en la consola. Ejecuta el siguiente comando.

[Link]("Hello World!")

El valor undefined significa que tu comando no devuelve ningún valor.

2. Vamos a crear algunas variables y a imprimirlas. Ejecuta los siguientes comandos.

let num = 5
var mystr = "John"
[Link](num)
[Link](mystr)

Tanto let como var se pueden usar para crear variables. var se utiliza cuando deseas
que la variable tenga un alcance global y let se usa cuando deseas que la variable tenga
un alcance dentro del bloque donde se crea.

3. Vamos a crear una constante y a imprimirla. Ejecuta el siguiente comando.

const pi_val = 3.147

[Link](pi_val)

const se utiliza para declarar variables cuyos valores nunca pueden cambiar.

4. Vamos a crear una función que imprima cualquier valor que se le pase como entrada.

function printMyInput(user_input) {
[Link]("The parameter passed is " + user_input)
}

5. Llama a la función que creaste en el paso anterior, una vez con un número y una vez con una cadena.

Nota: 9 y John son los 2 parámetros de entrada pasados a la función printMyInput.

printMyInput(9)
printMyInput("John")

6. Veamos otro enfoque para escribir la printMyInput función según el estándar ES6. Esta sintaxis también se
llama arrow functions y proporciona una forma abreviada de escribir funciones.

let printMyInputES6 = (user_input) => {

[Link](user_input)

Módulo III: Programación en JavaScript para Aplicaciones Web 47

}

7. Llama a la función que creaste en el paso anterior una vez con un número y una vez con una cadena.

printMyInputES6(9)
printMyInputES6("John")

Dado que la función recibe un solo valor y el cuerpo de la función es una sola línea, se
pueden omitir los corchetes. El código también se puede escribir de la siguiente manera.

let printMyInputES6Short = user_input => [Link](user_input)

Ahora, cuando lo llamemos, la salida debería permanecer igual.

printMyInputES6Short(9)
printMyInputES6Short("John")

Tarea 3 - Operadores, Condiciones, Bucles

En esta tarea, ejecutarás algunos JavaScript de los cuales podrás aprender cómo usar operadores, controles y
bucles.

Asegúrate de entender el código en cada archivo. Estos son primitivos y fundamentales

para tu comprensión de JavaScript.

1. Los operadores aritméticos son operadores que utilizamos para realizar operaciones aritméticas.

El operador + (más) se utiliza para sumar

El operador - (menos) se utiliza para restar

El operador * (estrella o asterisco) se utiliza para multiplicar

El operador / (barra) se utiliza para dividir

El operador ** (doble estrella) se utiliza para la exponenciación/potencia

El operador % (porcentaje) se utiliza para la operación de módulo (el residuo que queda después de la
división)

[Link]("5 + 3 = ", 5 + 3) // ➜ 5 + 3 = 8
[Link]("7 - 3 = ", 7 - 3) // ➜ 7 - 3 = 4
[Link]("8 * 2 = ", 8 * 2) // ➜ 8 * 2 = 16
[Link]("27 / 3 = ", 27 / 3) // ➜ 27 / 3 = 9
[Link]("4 to the power of 3 = ", 4 ** 3) // ➜ 4 ** 3 = 64 (4 × 4 × 4)
[Link]("19 mod 4 = ", 19 % 4) // ➜ 19 % 4 = 3 (19 dividido entre 4 da 4 con residuo 3)

El operador más (+) también se utiliza para la concatenación de cadenas. Al usar un +

con un número y una cadena, ambos se tratan como una cadena y se concatenan en lugar de sumarse.

Las expresiones se leen de izquierda a derecha, por lo que al sumar dos números y luego una cadena, se
interpretará el primer + como suma y el segundo + como concatenación.

Módulo III: Programación en JavaScript para Aplicaciones Web 48

[Link]("5 + 3 = ", 5 + 3)
// ➜ 5 + 3 = 8
// Suma normal entre dos números.

[Link]("5 + \"3\" = ", 5 + "3")

// ➜ 5 + "3" = "53"
// El número 5 se convierte en string y se concatena con "3".

[Link]("5 + 5 + \"3\" = ", 5 + 5 + "3")

// ➜ 5 + 5 + "3" = "103"
// Primero se suman los números: 5 + 5 = 10 → luego "10" + "3" = "103" (concatena).

[Link]("\"3\" + 5 + 5 = ", "3" + 5 + 5)

// ➜ "3" + 5 + 5 = "355"
// Aquí todo es string desde el inicio: "3" + 5 = "35" → luego "35" + 5 = "355".

[Link]("5 + 5 + \"3\" + 5 = ", 5 + 5 + "3" + 5)

// ➜ 5 + 5 = 10 → "10" + "3" = "103" → "103" + "5" = "1035"
// Resultado final: "1035"

2. Los operadores de asignación son operadores que se utilizan para asignar valores a las variables.

El operador = se utiliza para asignar el valor de la derecha a la variable de la izquierda.

El operador += se utiliza para incrementar el valor almacenado en el operando de la izquierda por el valor del
operando de la derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp

+ val donde tmp es una variable y val es un valor arbitrario).

El operador -= se utiliza para decrementar el valor almacenado en el operando de la izquierda por el valor del
operando de la derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp

- val donde tmp es una variable y val es un valor arbitrario).

El operador *= se utiliza para multiplicar el valor almacenado en el operando de la izquierda por el valor del
operando de la derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp

* val donde tmp es una variable y val es un valor arbitrario).

El operador /= se utiliza para dividir el valor almacenado en el operando de la izquierda por el valor del
operando de la derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp

/ val donde tmp es una variable y val es un valor arbitrario).

El operador **= se utiliza para elevar el valor almacenado en el operando de la izquierda a la potencia del
valor del operando de la derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que
escribir tmp = tmp ** val donde tmp es una variable y val es un valor arbitrario).

El operador %= se utiliza para obtener el módulo del valor almacenado en el operando de la izquierda por el
valor del operando de la derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que
escribir tmp = tmp % val donde tmp es una variable y val es un valor arbitrario).

x=5
[Link]("Old value of x: ", x)
// ➜ Old value of x: 5

x += 3
[Link]("New value of x: ", x)

Módulo III: Programación en JavaScript para Aplicaciones Web 49

// ➜ New value of x: 8
// Equivale a: x = x + 3

y=5
[Link]("Old value of y: ", y)
// ➜ Old value of y: 5

y -= 3
[Link]("New value of y: ", y)
// ➜ New value of y: 2
// Equivale a: y = y - 3

a=6
[Link]("Old value of a: ", a)
// ➜ Old value of a: 6

a *= 3
[Link]("New value of a: ", a)
// ➜ New value of a: 18
// Equivale a: a = a * 3

b=6
[Link]("Old value of b: ", b)
// ➜ Old value of b: 6

b /= 3
[Link]("New value of b: ", b)
// ➜ New value of b: 2
// Equivale a: b = b / 3

c=6
[Link]("Old value of c: ", c)
// ➜ Old value of c: 6

c %= 3
[Link]("New value of c: ", c)
// ➜ New value of c: 0
// Equivale a: c = c % 3 (residuo de 6 ÷ 3)

d=6
[Link]("Old value of d: ", d)
// ➜ Old value of d: 6

d **= 3
[Link]("New value of d: ", d)
// ➜ New value of d: 216
// Equivale a: d = d ** 3 (6 elevado a la 3 = 6×6×6)

3. Los operadores de comparación se utilizan para comparar valores o variables con otros valores o variables

El operador == verifica si el operando a la izquierda es igual en valor al operando a la derecha

Módulo III: Programación en JavaScript para Aplicaciones Web 50

El operador === verifica si el operando a la izquierda es igual en valor y en tipo al operando a la derecha

El operador != verifica si el operando a la izquierda no es igual en valor al operando a la derecha

El operador > verifica si el operando a la izquierda es mayor que el de la derecha

El operador < verifica si el operando a la izquierda es menor que el de la derecha

El operador >= verifica si el operando a la izquierda es mayor o igual que el de la derecha

El operador <= verifica si el operando a la izquierda es menor o igual que el de la derecha

// Checking equality of 5 (number type) and '5' (string type)

[Link]("5 == '5' ", 5 == '5')

// ➜ true
// Comparación con == (igualdad débil): convierte el string '5'
// a número antes de comparar.

[Link]("5 === '5' ", 5 === '5')

// ➜ false
// Comparación estricta: tipos diferentes (number vs string), así que da false.

[Link]("5 === 5 ", 5 === 5)

// ➜ true
// Mismo tipo y mismo valor. Comparación estricta que da true.

[Link]("5 !== 5 ", 5 !== 5)

// ➜ false
// 5 es igual a 5 en tipo y valor, así que !== (distinto estricto) devuelve false.

[Link]("5 != 6 ", 5 != 6)
// ➜ true
// 5 es diferente de 6, así que devuelve true.

[Link]("5 !== '5' ", 5 !== '5')

// ➜ true
// Tipos distintos (number y string) y !== compara tipo y valor.

[Link]("5 > 2 ", 5 > 2)

// ➜ true
// 5 es mayor que 2, comparación directa.

[Link]("5 > 7 ", 5 > 7)

// ➜ false
// 5 no es mayor que 7.

[Link]("5 > 5 ", 5 > 5)

// ➜ false
// 5 no es mayor que sí mismo.

[Link]("5 < 7 ", 5 < 7)

// ➜ true
// 5 es menor que 7.

Módulo III: Programación en JavaScript para Aplicaciones Web 51

[Link]("5 < 2 ", 5 < 2)
// ➜ false
// 5 no es menor que 2.

[Link]("5 < 5 ", 5 < 5)

// ➜ false
// 5 no es menor que sí mismo.

[Link]("5 >= 5 ", 5 >= 5)

// ➜ true
// 5 es mayor o igual que 5. En este caso, es igual.

[Link]("5 <= 5 ", 5 <= 5)

// ➜ true
// 5 es menor o igual que 5. Nuevamente, es igual.

4. Operadores Lógicos se utilizan para combinar más de una condición.

El operador && verifica si la condición a la izquierda y a la derecha son verdaderas. Devuelve verdadero solo
si ambas condiciones son verdaderas. De lo contrario, devuelve falso.

El operador || verifica si ya sea la condición a la izquierda es verdadera o la de la derecha es verdadera.

Devuelve verdadero incluso si una de las dos condiciones es verdadera.

El operador ! verifica si la condición no se cumple.

var raining = false // No está lloviendo

var cloudy = true // Está nublado

[Link]("Está lloviendo: ", raining)

// ➜ Está lloviendo: false

[Link]("Está nublado: ", cloudy)

// ➜ Está nublado: true

[Link]("Está lloviendo Y está nublado: ", raining && cloudy)

// ➜ Está lloviendo Y está nublado: false
// El operador lógico `&&` (AND) solo da true si **ambas** condiciones son true.

[Link]("Está lloviendo O está nublado: ", raining || cloudy)

// ➜ Está lloviendo O está nublado: true
// El operador lógico `||` (OR) da true si **al menos una** condición es true.

[Link]("No está lloviendo: ", !raining)

// ➜ No está lloviendo: true
// El operador `!` niega el valor. Como `raining` es false, `!raining` da true.

[Link]("No está nublado: ", !cloudy)

// ➜ No está nublado: false
// Como `cloudy` es true, `!cloudy` da false.

5. Evaluación de Cortocircuito

Módulo III: Programación en JavaScript para Aplicaciones Web 52

La evaluación de cortocircuito es un concepto en el que el compilador omitirá la verificación de subexpresiones
en una declaración compuesta (una declaración con operadores lógicos) una vez que se determina el valor.

exp1 && exp2 no evaluará exp2 si exp1 es falso porque si incluso una expresión es falsa con un &&, la
expresión completa es falsa.

exp1 || exp2 no evaluará exp2 si exp1 es verdadero porque si incluso una expresión es verdadera con un ||, la
expresión completa es verdadera.

Esto puede ser muy útil al evaluar ciertas expresiones, y se debe aprovechar donde sea necesario.

var chocolate = true // Hay chocolate

var candy = false // No hay dulce

[Link]("Hay chocolate: ", chocolate)

// ➜ Hay chocolate: true

[Link]("Hay dulce: ", candy)

// ➜ Hay dulce: false

[Link]("Hay dulce Y hay chocolate: ", chocolate && candy, " -- Solo se evalúa el dulce")
// ➜ Hay dulce Y hay chocolate: false -- Solo se evalúa el dulce
// El operador `&&` (AND) solo devuelve true si **ambos** son true.
// Como `chocolate` es true, el programa necesita verificar si `candy` también es true.
// Pero como `candy` es false, el resultado es false.
// ✨
Nota: si el primer valor hubiese sido false, **ni siquiera habría evaluado el segundo** (esto es evaluació
n de cortocircuito).

[Link]("Hay chocolate O hay dulce: ", chocolate || candy, " -- Solo se evalúa el chocolate")
// ➜ Hay chocolate O hay dulce: true -- Solo se evalúa el chocolate
// El operador `||` (OR) devuelve true si **al menos uno** es true.
// Como `chocolate` ya es true, **ni siquiera necesita mirar** si hay candy.
// ✨ Evaluación de cortocircuito: si el primero ya es true, no evalúa el segundo.
6. Las declaraciones switch-case se utilizan para reemplazar múltiples condiciones if - else if que verifican la
misma variable. Después de que se satisface una de las condiciones y se ejecuta el bloque de código, el control
debe salir explícitamente del bloque switch con break. De lo contrario, se ejecutarán todas las demás condiciones
hasta que se encuentre una declaración break o hasta que no haya más código.

let user_input = prompt('Enter a number between 1 to 7');

// Solicita al usuario que ingrese un número entre 1 y 7

// Validamos si lo ingresado NO es un número, o si está fuera del rango permitido

if(isNaN(user_input) || user_input < 1 || user_input > 7) {
[Link]("Invalid input");
// Resultado si el usuario escribe por ejemplo: "hola", 0 o 9
// → Invalid input (Entrada inválida)
} else {
user_input = parseInt(user_input); // Convertimos el valor a número entero

switch(user_input) {
case 1:
[Link]("Sunday");

Módulo III: Programación en JavaScript para Aplicaciones Web 53

// Si el usuario ingresó 1 → Resultado: Sunday (Domingo)
break;
case 2:
[Link]("Monday");
// Si el usuario ingresó 2 → Resultado: Monday (Lunes)
break;
case 3:
[Link]("Tuesday");
// Si el usuario ingresó 3 → Resultado: Tuesday (Martes)
break;
case 4:
[Link]("Wednesday");
// Si el usuario ingresó 4 → Resultado: Wednesday (Miércoles)
break;
case 5:
[Link]("Thursday");
// Si el usuario ingresó 5 → Resultado: Thursday (Jueves)
break;
case 6:
[Link]("Friday");
// Si el usuario ingresó 6 → Resultado: Friday (Viernes)
break;
case 7:
[Link]("Saturday");
// Si el usuario ingresó 7 → Resultado: Saturday (Sábado)
break;
default:
[Link]("Invalid entry");
// Esto es un "por si acaso", normalmente no se ejecuta gracias a la validación inicial
}
}

7. Los bucles se pueden utilizar cuando el mismo bloque de código necesita ejecutarse muchas veces.

Los bucles for tienen un valor inicial, una condición en base a la cual se ejecuta el bucle, y un valor incremental.

// Aceptar una entrada del usuario.

// Si es un número, imprime la tabla de multiplicar de ese número.
let user_input = prompt('Enter a number');
// Traducción: "Ingresa un número"

// Verificamos si lo ingresado es un número

if(!isNaN(user_input)) {
// Si sí es un número, usamos un bucle for para repetir la operación 10 veces
for (let i = 0; i < 10; i++) {
[Link](user_input, " X ", i, " = ", user_input * i);
// Ejemplo si el usuario ingresa 5:

Los bucles while tienen solo una expresión: una condición en base a la cual se ejecuta un bloque de código. Este
es el mismo tipo de expresión que la segunda en un bucle for.

Módulo III: Programación en JavaScript para Aplicaciones Web 54

// El siguiente código pide al usuario ingresar palabras y muestra la longitud de cada palabra ingresada.
// El ciclo continúa hasta que el usuario escriba 'n' para detenerse.

let do_more = true // Variable que controla si el ciclo sigue o no

while(do_more) {
// Se pide al usuario que ingrese una palabra (o cualquier texto)
let user_input = prompt('Enter a word');

// Se verifica si lo ingresado NO es un número

if(isNaN(user_input)) {
// Si NO es un número, se imprime la longitud del texto ingresado
// Resultado: "Length of the word you entered is X" donde X es la cantidad de caracteres
[Link]("Length of the word you entered is " + user_input.length)
} else {
// Si ES un número, se indica que solo se permiten palabras (no números)
// Resultado: "You entered a number. Only words are allowed"
[Link]("You entered a number. Only words are allowed")
}

// Se pregunta al usuario si quiere continuar. Si escribe 'n', el ciclo termina

let should_continue = prompt("Do you want to continue. Press n to stop")

if(should_continue === "n") {

// Cambia la variable para salir del ciclo while
do_more = false
}
}

Colecciones
1. Un arreglo es una colección indexada. Las posiciones de índice comienzan desde 0. El elemento en la primera
posición está en el índice 0, el segundo elemento está en la posición 1, y así sucesivamente. El índice de la última
posición siempre será uno menos que la longitud del arreglo.

// Se declara un arreglo llamado myArray con elementos de diferentes tipos:

// cadenas de texto (strings), números (4,5), un booleano (true) y otro string.
let myArray = ["Jack", "Jill", 4, 5, true, "John"];

// Se imprime el elemento en la posición 0 del arreglo.

// Recordemos que en JavaScript los arreglos son indexados desde 0.
// Por lo tanto, myArray[0] es "Jack"
[Link](myArray[0]); // Resultado esperado: "Jack"

// Se imprime el elemento en la posición 5 del arreglo.

// myArray[5] es "John", el último elemento en este arreglo.
[Link](myArray[5]); // Resultado esperado: "John"

2. Para iterar a través de arreglos, hay un tipo especial de bucle for, forEach, que se ejecuta para cada valor en el
arreglo dado.

Módulo III: Programación en JavaScript para Aplicaciones Web 55

// Declaramos un arreglo llamado myArray que contiene diferentes tipos de elementos:
// strings, números y un booleano.
let myArray = ["Jack", "Jill", 4, 5, true, "John"];

// Usamos el método forEach para recorrer cada elemento del arreglo.

// forEach ejecuta la función que le pasamos una vez por cada elemento.
// En este caso, la función toma el elemento actual y lo imprime en la consola.
[Link](element => {
[Link](element); // Imprime el elemento actual del arreglo
});

3. Para encontrar la posición del índice y el valor, podemos usar el método genérico [Link] , que se puede
utilizar con todos los objetos de colección. Esto mapea cada posición del índice al valor.

// Declaramos un arreglo llamado myArray que contiene diferentes tipos de datos:

// strings, números y un booleano.
let myArray = ["Jack", "Jill", 4, 5, true, "John"];

// [Link]() toma el objeto pasado (en este caso, un arreglo) y devuelve

// un arreglo de pares [clave, valor]. En un arreglo, las claves son los índices
// como strings: "0", "1", "2", etc.
// Por ejemplo, [Link](myArray) es igual a:
// [ ["0", "Jack"], ["1", "Jill"], ["2", 4], ["3", 5], ["4", true], ["5", "John"] ]

// Usamos un ciclo for...of para recorrer cada uno de esos pares.

for (const [index, value] of [Link](myArray)) {
// En cada iteración, destructuramos el par en dos variables:
// 'index' (el índice, como string) y 'value' (el valor almacenado en esa posición).

// Luego imprimimos en consola el índice y el valor, separados por un guion.

[Link](index, " - ", value);
// Salida esperada, línea por línea:
// 0 - Jack
// 1 - Jill
// 2 - 4
// 3 - 5
// 4 - true
// 5 - John
}

4. El objeto Map asigna una clave a un valor. Las claves deben ser únicas. Los valores pueden ser cadenas, enteros,
flotantes o cualquier otro tipo de dato válido de JavaScript. Un objeto Map vacío se puede crear con la palabra
clave new .

// Creamos un nuevo objeto Map vacío, que es una colección de pares clave-valor.
let myMap = new Map();

// Añadimos un par clave-valor al mapa:

// Clave: "name", Valor: "John"
[Link]("name", "John");

Módulo III: Programación en JavaScript para Aplicaciones Web 56

// Añadimos otro par clave-valor:
// Clave: "age", Valor: 22
[Link]("age", 22);

// Recorremos el Map usando forEach.

// La función que pasamos recibe dos argumentos:
// 'val' es el valor, 'key' es la clave (en Maps el orden es valor primero, luego clave).
[Link]((val, key) => {
// Imprime la clave y el valor separados por " - "
[Link](key, " - ", val);
});

//Resultado esperado
//name - John
//age - 22

Mejora de habilidades en JavaScript utilizando JSFiddle

Este laboratorio está diseñado para proporcionarte ejercicios prácticos para mejorar tus habilidades de programación
en JavaScript utilizando JS Fiddle. El enfoque está en resolver problemas lógicos del mundo real, alentándote a
pensar y escribir código eficiente y ejecutarlo en JS Fiddle para ver la salida. Al final de este laboratorio, habrás
mejorado tu capacidad para implementar soluciones para diversos escenarios y habrás ganado confianza en tus
habilidades de codificación.

Objetivo:
Desarrollar habilidades para resolver problemas utilizando JavaScript

Practicar la escritura y depuración de programas lógicos

Entender cómo implementar soluciones del mundo real utilizando bucles, funciones y lógica condicional

Fortalecer las prácticas de codificación en plataformas como JSFiddle

Ejercicio 1: Calcular el monto total de ventas

Problema:
Estás trabajando para una tienda en línea. Tu tarea es escribir un fragmento de código en JavaScript que calcule el
monto total de ventas para un conjunto dado de transacciones de ventas.
Detalles de entrada:

Un array de objetos que representan transacciones de ventas. Cada objeto tiene las siguientes propiedades:

item : Nombre del producto (string)

quantity : Número de unidades vendidas (int)

price : Precio por unidad (float)

Detalles de salida:

Un solo número que representa el monto total de ventas

Pasos para implementar:

1. Define un array de transacciones de ventas con al menos 3 objetos de muestra

Módulo III: Programación en JavaScript para Aplicaciones Web 57

2. Escribe una función calculateTotalSales que tome este array como entrada

3. Usa un bucle para iterar a través del array y calcular el monto total de ventas

4. Imprime el monto total de ventas en la consola

Haz clic aquí para ver pistas

El array sales contiene objetos, cada uno representando una transacción de ventas con
propiedades item , quantity y price .

Usa un bucle para recorrer cada objeto en el array sales .

Para cada objeto, multiplica quantity por price para obtener el total de ese artículo.

Acumula los totales en una variable para obtener el monto total de ventas.

Devuelve el total acumulado y muéstralo usando [Link] .

Haz clic aquí para ver el código de solución

Escribe el programa en JSFiddle:

Ve a JSFiddle

Escribe el código en la sección de JavaScript

Ejecuta el programa haciendo clic en el botón Run y verifica los resultados en la sección de consola

La salida del código debería aparecer como se muestra en la captura de pantalla a continuación.

Módulo III: Programación en JavaScript para Aplicaciones Web 58

Ejercicio 2: Generar un recibo de pedido
Problema:

Escribe un programa en JavaScript que genere un recibo para el pedido de un cliente. El recibo debe incluir el
nombre de cada artículo, cantidad, precio y costo total.
Detalles de entrada:

Un array de objetos que representan los artículos pedidos. Cada objeto tiene:

item : Nombre del producto (cadena)

quantity : Cantidad pedida (entero)

price : Precio por unidad (flotante)

Detalles de salida:

Un recibo detallado que muestre los detalles de cada artículo y el total general

Pasos para implementar:

1. Define un array de artículos pedidos con al menos 3 entradas de muestra

2. Escribe una función generateReceipt que tome este array como entrada

3. Usa un bucle para iterar a través de los artículos y calcular el total para cada artículo y el total general

4. Imprime el recibo en una cadena formateada

Haz clic aquí para ver pistas

El array orders contiene objetos, cada uno con propiedades item , quantity y price que representan los artículos
pedidos.

Usa un bucle para iterar a través de cada objeto en el array orders .

Para cada artículo, calcula el total multiplicando quantity y price .

Acumula los totales en una variable grandTotal .

Imprime los detalles de cada artículo y el costo total usando una cadena formateada.

Finalmente, imprime el total general después de iterar a través del array.

Haz clic aquí para ver el código de solución

Módulo III: Programación en JavaScript para Aplicaciones Web 59

Escribe el programa en JSFiddle:

Ve a JSFiddle

Escribe el código en la sección de JavaScript

Ejecuta el programa haciendo clic en el botón Run y verifica los resultados en la sección de consola

La salida del código debe aparecer como se muestra en la captura de pantalla a continuación.

Ejercicio 3: Validar contraseñas

Problema:

Escribe un programa en JavaScript para validar una lista de contraseñas. Una contraseña es válida si:

Contiene solo caracteres alfanuméricos (letras y números)

Módulo III: Programación en JavaScript para Aplicaciones Web 60

Debe tener al menos 8 caracteres de longitud, pero no más de 20 caracteres

Detalles de entrada:

Un arreglo de contraseñas (cadenas)

Detalles de salida:

Un mensaje que indique si cada contraseña es válida o inválida

Pasos para implementar:

1. Define un arreglo de contraseñas de muestra

2. Escribe una función validatePasswords que tome este arreglo como entrada

3. Usa un bucle para iterar a través de las contraseñas y verificar cada una contra los criterios de validación

4. Registra si cada contraseña es válida o inválida

Haz clic aquí para ver pistas

Haz clic aquí para ver el código de la solución

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

Módulo III: Programación en JavaScript para Aplicaciones Web 61

20.

21.

22.

23.

24.

25.

26.

27.

28.

Escribe el programa en JSFiddle:

Ve a JSFiddle

escribe el código en la sección de JavaScript

Ejecuta el programa haciendo clic en el botón Run y verifica los resultados en la sección de consola

La salida del código debe aparecer como se muestra en la captura de pantalla a continuación.

Ejercicio 4: Rastrear niveles de stock de productos

Problema:
Estás trabajando para una empresa de venta al por menor en línea. Tu tarea es escribir un programa en JavaScript
que rastree los niveles de stock de varios productos en el inventario. El programa debe verificar si un producto está
en stock y registrar un mensaje apropiado.
Detalles de entrada:

Un array de objetos que representan productos. Cada objeto contiene:

product : Nombre del producto (cadena)

stock : Número de unidades disponibles en stock (entero)

Detalles de salida:

Un mensaje para cada producto indicando si el producto está “En Stock” o “Agotado”.

Pasos para implementar:

1. Define un array de objetos de producto con al menos 3 productos de muestra

2. Escribe una función checkStockLevels que tome este array como entrada

3. Usa un bucle para iterar a través del array y verificar el nivel de stock de cada producto

4. Imprime un mensaje indicando si el producto está “En Stock” o “Agotado”

Haz clic aquí para ver pistas

Haz clic aquí para ver el código de solución

Módulo III: Programación en JavaScript para Aplicaciones Web 62

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

Escribe el programa en JSFiddle:

Ve a JSFiddle

Escribe el código en la sección de JavaScript

Módulo III: Programación en JavaScript para Aplicaciones Web 63

Ejecuta el programa haciendo clic en el botón Run y verifica los resultados en la sección de consola

La salida del código debe aparecer como se muestra en la captura de pantalla a continuación.

Resumen del Módulo:

JavaScript es un lenguaje de scripting que permite a los desarrolladores añadir contenido dinámico a las páginas
web.

Las variables de JavaScript se declaran utilizando las palabras clave 'let' o 'const' y toman su tipo del valor
asignado.

La ejecución del programa se controla mediante sentencias como If...Then...Else, Switch, bucles For y bucles
While.

JavaScript utiliza bloques de código, denominados funciones, que pueden invocarse desde cualquier parte del
script.

Se pueden añadir nuevos métodos y propiedades a un objeto modificando el prototipo de dicho objeto.

Los prototipos permiten definir propiedades y métodos para todas las instancias de un objeto específico.

Los scripts del lado del cliente son programas que acompañan a los documentos HTML y que los desarrolladores
utilizan para incorporar más elementos interactivos.

La etiqueta script puede incorporar un script dentro de un documento HTML o llamar a un script desde un archivo
externo.

El Modelo de objetos de documentos (DOM) es la interfaz de programación entre HTML o XHTML y JavaScript.

Los desarrolladores pueden acceder a elementos HTML DOM desde scripts JavaScript utilizando la notación
DOM correcta.

A menudo se utilizan API para acceder a los elementos DOM de HTML en las páginas web.

Glosario
Término Definición

AJAX “JavaScript y XML asíncronos” que abarca más que llamadas asíncronas al servidor a
través de JavaScript y XML. No es un lenguaje de programación o tecnología, sino un

Módulo III: Programación en JavaScript para Aplicaciones Web 64

Término Definición
concepto de programación. Ajax representa una serie de técnicas que proporcionan
aplicaciones web más ricas e interactivas a través de HTML, JavaScript, CSS y la
modificación del DOM. Hoy en día se usa JSON en lugar de XML.

Un tipo de función que no tiene nombre o está sin nombre. Se declara sin identificador
Funciones Anónimas y a menudo se usa como parámetro de otra función. Se ejecuta inmediatamente
después de su declaración.

Estructura de datos que ayuda al programador a almacenar y recuperar datos mediante

Arreglo claves indexadas. Los arreglos usan índices basados en cero (primer elemento = índice
0). Crecen o disminuyen dinámicamente al agregar o eliminar elementos.

Plantillas para construir objetos con características y comportamientos similares.

Clases
Encapsulan datos (propiedades) y funciones (métodos).

Programa que acompaña o se incrusta en un documento HTML. Se ejecuta durante la

Script del Lado del
carga del documento o en respuesta a acciones del usuario. Puede usarse para validar
Cliente
formularios, procesar entradas o modificar dinámicamente el DOM.

Objetos del Representan la página web principal. Permiten acceder a los elementos HTML en la
Documento página a través de document .

“Modelo de Objetos del Documento”. Interfaz de programación (API) entre HTML y

DOM JavaScript. Permite acceder y actualizar dinámicamente el contenido, la estructura y el
estilo.

Nodos de Elemento Todas las etiquetas HTML.

Clase base de la que heredan todos los objetos de elemento en un documento.

Objetos de Elemento
Contiene métodos y propiedades comunes a todos los elementos.

Acción o suceso que ocurre en el navegador o por el usuario (clic, envío de formulario,
Evento
etc.).

Vinculación de Proceso de asociar una función a un evento para que el navegador la ejecute cuando
Eventos ocurra dicho evento.

Manejadores de
Función que define qué hacer cuando ocurre un evento (ejemplo: clic de un botón).
Eventos

Extender Palabra clave que se usa para crear una clase hija a partir de otra clase.

Módulos de código que ejecutan tareas específicas. Pueden recibir datos (parámetros)
Funciones
y devolver resultados (valor de retorno).

“Expresión de Función Invocada Inmediatamente”. Se ejecuta inmediatamente después

IIFE
de ser definida y no puede volver a ser llamada.

Nodos Base de todos los elementos en la estructura del DOM.

Instancias creadas a partir de una clase. Tienen propiedades (datos) y métodos

Objetos
(comportamientos).

Permiten agregar métodos o propiedades a objetos. Los prototipos existen para todos
Prototipos los objetos creados con new . Los objetos heredan métodos y propiedades definidos
en el prototipo.

Permite modificar y extender documentos HTML de manera interactiva. Puede validar

Script
formularios, procesar entradas y crear dinámicamente elementos del documento.

Funciones Se usan para inicializar datos o declarar elementos del DOM. Estas funciones pueden
Autoejecutables ser anónimas.

Nodos que contienen el texto real entre la etiqueta de apertura y cierre de un elemento
Nodos de Texto
HTML.

Palabra clave que se refiere a la instancia actual del objeto. El valor de this depende
this
del contexto de ejecución.

Módulo III: Programación en JavaScript para Aplicaciones Web 65

Cheatsheet - Programación en JavaScript para aplicaciones web
Clase / Método / Objeto Descripción Detallada Ejemplo

Método del DOM que añade un

var newPara = [Link]("p"); var newText
nodo hijo al final de la lista de
= [Link]("Hello World!");
appendChild() hijos de un nodo padre. Toma
[Link](newText);
como parámetro el nodo que se [Link](newPara);
desea insertar.

Estructura de datos que

almacena múltiples valores en
const Beatles = ["Ringo", "Paul", "George", "John"];
Arrays una sola variable, usando
[Link](Beatles[0]); // "Ringo"
índices basados en cero. Se
declara con corchetes [] .

Constructor que crea objetos de

fecha y hora. Puede recibir
var d1 = new Date(); var d2 = new Date("2021-01-17
Date() parámetros como fecha, hora o
[Link]"); var d3 = new Date(2021, 0, 17);
ambos. El mes es indexado
desde 0 (enero).

Crea un nuevo elemento HTML

especificando la etiqueta.
[Link]() Luego puede añadirse al DOM var p = [Link]("p");
con métodos como
appendChild() .

Crea un nodo de texto que

[Link]() luego puede ser insertado en el var text = [Link]("Hello World");
DOM.

Devuelve una referencia al

[Link]() elemento cuyo atributo id var div = [Link]("myDiv");
coincide con el valor dado.

Devuelve un HTMLCollection con

[Link]() todos los elementos de una var ps = [Link]("p");
etiqueta dada.

Escribe directamente en el
documento, sobrescribiendo el
[Link]() [Link]("Hello World");
contenido. Úsalo solo para
pruebas rápidas.

Devuelve el valor de un atributo var color =

[Link]()
dado de un elemento. [Link]("div1").getAttribute("style");

Obtiene o establece el
[Link]("div1").innerHTML = "<p>Hello
[Link] contenido HTML de un
World!</p>";
elemento como una cadena.

Elimina un atributo de un
[Link]() [Link]("div1").removeAttribute("style");
elemento.

Establece o modifica el valor de [Link]("theImage").setAttribute("src",

[Link]()
un atributo de un elemento. "[Link]");

Accede o modifica estilos CSS var div = [Link]("div1"); [Link]

[Link]
en línea de un elemento. = "red";

Representan errores en el
código. Tienen propiedades
try { throw new Error("Valor fuera de rango"); } catch (err) {
Error Objects como name y message . Se
[Link]([Link]); }
pueden crear errores
personalizados usando throw .

Módulo III: Programación en JavaScript para Aplicaciones Web 66

Clase / Método / Objeto Descripción Detallada Ejemplo

Accede al historial de
History Object navegación del usuario. Permite [Link](-2);
navegar hacia atrás o adelante.

Inserta un nodo antes de un

let newLI = [Link]("li"); let ul =
nodo hijo existente. Requiere el
insertBefore() [Link]("thisList"); [Link](newLI,
nuevo nodo y el nodo de [Link][0]);
referencia.

Proporciona información de la
Location Object URL actual y permite [Link]([Link]);
redirecciones.

Contiene información sobre el

Navigator Object [Link]([Link]);
navegador del cliente.

Evento que se ejecuta cuando la

onload() página ha terminado de [Link] = function() { myFunction(); };
cargarse.
let p = [Link]("blue"); let list =
Reemplaza un nodo hijo
replaceChild() [Link]("thisList"); [Link](p,
existente con un nuevo nodo. [Link][1]);

Proporciona información sobre

Screen Object [Link]([Link], [Link]);
la pantalla del usuario.

Representa la ventana del

Window Object navegador. Es el objeto global [Link]("[Link]
en el navegador.

Abre una nueva ventana del

navegador. Puede recibir
[Link]("[Link] "myWindow",
[Link]() parámetros como URL, nombre
"width=600,height=800");
de la ventana y opciones de
tamaño.

Desplaza la ventana a
[Link]() [Link](20, 200);
coordenadas específicas.

Tipos primitivos (como string,

number, boolean) pueden
Wrapper Objects let n = new String("abc"); [Link](typeof n); // "object"
convertirse en objetos para usar
métodos.

Módulo III: Programación en JavaScript para Aplicaciones Web 67

También podría gustarte

Lista de Precios - SHC
Aún no hay calificaciones
Lista de Precios - SHC
3 páginas
Traslados Administrativo de Recintos Primarias PRM 2023
Aún no hay calificaciones
Traslados Administrativo de Recintos Primarias PRM 2023
1 página
Diferencias entre XML y JSON
Aún no hay calificaciones
Diferencias entre XML y JSON
15 páginas
Cotizacion 8kW
Aún no hay calificaciones
Cotizacion 8kW
6 páginas
Edesa Solar 2022 11v2 Dis
Aún no hay calificaciones
Edesa Solar 2022 11v2 Dis
5 páginas
Herramientas para La Reduccion de Armonicos
Aún no hay calificaciones
Herramientas para La Reduccion de Armonicos
16 páginas
Storage y JSON en JavaScript
Aún no hay calificaciones
Storage y JSON en JavaScript
57 páginas
Normas Ance A Sistemas Fotovoltaicos
100% (1)
Normas Ance A Sistemas Fotovoltaicos
15 páginas
Modelos de Cálculo de La Cinemática Solar PDF
Aún no hay calificaciones
Modelos de Cálculo de La Cinemática Solar PDF
20 páginas
Protección de Conductor Roto y Sobrecorriente de Secuencia Negativa
Aún no hay calificaciones
Protección de Conductor Roto y Sobrecorriente de Secuencia Negativa
8 páginas
Diseño y Calculo de Transformador Monofasico
100% (1)
Diseño y Calculo de Transformador Monofasico
165 páginas
KOTARY Analisis Moderno de Sistemas de Potencia, InGLES
Aún no hay calificaciones
KOTARY Analisis Moderno de Sistemas de Potencia, InGLES
354 páginas
Et TD Me10 02 Medidores de Energia
Aún no hay calificaciones
Et TD Me10 02 Medidores de Energia
32 páginas
Kit de Empalme Retráctil en Frío De: 3M™ Qs-Iii
Aún no hay calificaciones
Kit de Empalme Retráctil en Frío De: 3M™ Qs-Iii
20 páginas
Ethernet-IP en Espanol
Aún no hay calificaciones
Ethernet-IP en Espanol
200 páginas
Turbomaquinas UTN
Aún no hay calificaciones
Turbomaquinas UTN
9 páginas
Guia Certificado Energetico Vivienda Caloryfrio
Aún no hay calificaciones
Guia Certificado Energetico Vivienda Caloryfrio
17 páginas
Tarifas de Energía Eléctrica CFE 2023
Aún no hay calificaciones
Tarifas de Energía Eléctrica CFE 2023
41 páginas
Cargas No Lineales: Impacto y Soluciones
Aún no hay calificaciones
Cargas No Lineales: Impacto y Soluciones
5 páginas
Curso Básico SFV Módulo 3
Aún no hay calificaciones
Curso Básico SFV Módulo 3
25 páginas
Cálculo de Falla Asimétrica en Sistemas de Potencia
Aún no hay calificaciones
Cálculo de Falla Asimétrica en Sistemas de Potencia
12 páginas
3842-2004 Control de Armónicos en Sistemas
Aún no hay calificaciones
3842-2004 Control de Armónicos en Sistemas
45 páginas
Eficiencia Energética en Alumbrado Público
Aún no hay calificaciones
Eficiencia Energética en Alumbrado Público
30 páginas
Curso Dialux Gratis PDF
Aún no hay calificaciones
Curso Dialux Gratis PDF
34 páginas
Informe Sobre Consumo Energético en Medellín
Aún no hay calificaciones
Informe Sobre Consumo Energético en Medellín
10 páginas
Diseño de Ductos
Aún no hay calificaciones
Diseño de Ductos
35 páginas
Conductores Electricos
Aún no hay calificaciones
Conductores Electricos
76 páginas
Cargas Eléctricas Cocinas y Secadoras
Aún no hay calificaciones
Cargas Eléctricas Cocinas y Secadoras
6 páginas
Check List y Guia Rapida Vertiv Thermal M
Aún no hay calificaciones
Check List y Guia Rapida Vertiv Thermal M
3 páginas
Iluminacion de Led (Buenazoo Te Indica Que Tipo de Luminacion Led Te Conviene de Acuerdo Al Trabajo o Sitio A Iluminar)
Aún no hay calificaciones
Iluminacion de Led (Buenazoo Te Indica Que Tipo de Luminacion Led Te Conviene de Acuerdo Al Trabajo o Sitio A Iluminar)
113 páginas
Guía Técnica - Soluciones de Aislamiento Con Vidrios y Cerramientos
Aún no hay calificaciones
Guía Técnica - Soluciones de Aislamiento Con Vidrios y Cerramientos
30 páginas
Manual de Energías Renovables: Introducción
100% (1)
Manual de Energías Renovables: Introducción
102 páginas
Nodejs
Aún no hay calificaciones
Nodejs
5 páginas
T1P1 Inversores y Almacenamiento Er4 Vicente Murillo Jara
Aún no hay calificaciones
T1P1 Inversores y Almacenamiento Er4 Vicente Murillo Jara
17 páginas
Entregables Fases de Proyecto
100% (5)
Entregables Fases de Proyecto
2 páginas
Conceptos Básicos de Iluminación PDF
Aún no hay calificaciones
Conceptos Básicos de Iluminación PDF
17 páginas
Aprenda Lulowin en Un Dos Por Tres PDF
Aún no hay calificaciones
Aprenda Lulowin en Un Dos Por Tres PDF
22 páginas
Diseño de Sistema Fotovoltaico Autónomo
100% (1)
Diseño de Sistema Fotovoltaico Autónomo
14 páginas
Aerogeneradores Completo
Aún no hay calificaciones
Aerogeneradores Completo
83 páginas
Índice de Polarización en Aislamientos
Aún no hay calificaciones
Índice de Polarización en Aislamientos
3 páginas
Ud 1. Introducción A La Eficiencia Energética
Aún no hay calificaciones
Ud 1. Introducción A La Eficiencia Energética
68 páginas
CFE Analisis de La TArifa OM
Aún no hay calificaciones
CFE Analisis de La TArifa OM
3 páginas
Evolución y Gestión de Software
Aún no hay calificaciones
Evolución y Gestión de Software
122 páginas
Listado de Empresas
Aún no hay calificaciones
Listado de Empresas
6 páginas
Cuaderno de Power World
Aún no hay calificaciones
Cuaderno de Power World
24 páginas
Eficiencia Energética Edificios No Residenciales
Aún no hay calificaciones
Eficiencia Energética Edificios No Residenciales
42 páginas
Luminaria LED RALED de Roy Alpha
Aún no hay calificaciones
Luminaria LED RALED de Roy Alpha
11 páginas
Modeler Jython Scripting Automation Book PDF
Aún no hay calificaciones
Modeler Jython Scripting Automation Book PDF
276 páginas
Diagramas de Recorridos Solares
Aún no hay calificaciones
Diagramas de Recorridos Solares
7 páginas
Epm - Factura - Energia 12843907 Sep
Aún no hay calificaciones
Epm - Factura - Energia 12843907 Sep
3 páginas
Qué Es El Factor de Potencia
Aún no hay calificaciones
Qué Es El Factor de Potencia
17 páginas
Calculos Termicos de Edificios
Aún no hay calificaciones
Calculos Termicos de Edificios
23 páginas
Clase 4 - Energia Geotermica y Termica
Aún no hay calificaciones
Clase 4 - Energia Geotermica y Termica
17 páginas
Introdu A Java Expo
Aún no hay calificaciones
Introdu A Java Expo
32 páginas
Bases Teoricas de Estructuras de Almacenamiento en Memoria
Aún no hay calificaciones
Bases Teoricas de Estructuras de Almacenamiento en Memoria
11 páginas
Variables, Operadores y Controladores en Javascript
Aún no hay calificaciones
Variables, Operadores y Controladores en Javascript
11 páginas
S02 - s2 Operadores Con Asignación - OZEFWG
Aún no hay calificaciones
S02 - s2 Operadores Con Asignación - OZEFWG
46 páginas
Introducción A Los Algoritmos Con JavaScript
Aún no hay calificaciones
Introducción A Los Algoritmos Con JavaScript
22 páginas
Conceptos Varios de - HTML y JavaScript
100% (1)
Conceptos Varios de - HTML y JavaScript
35 páginas
Elementos de JS
100% (1)
Elementos de JS
4 páginas
Tipos de Datos Variables Operaciones Bsicas de Entrada Salida Operadores Bsicos
Aún no hay calificaciones
Tipos de Datos Variables Operaciones Bsicas de Entrada Salida Operadores Bsicos
45 páginas
Resumen Operadores Lógicos
Aún no hay calificaciones
Resumen Operadores Lógicos
1 página
Módulo IV - Salidas Profesionales y Proyecto Final
Aún no hay calificaciones
Módulo IV - Salidas Profesionales y Proyecto Final
30 páginas
Ejemplo Auditora Competitiva CoffeeHouse
Aún no hay calificaciones
Ejemplo Auditora Competitiva CoffeeHouse
7 páginas
Módulo VI - Proyecto Final y Tarea
Aún no hay calificaciones
Módulo VI - Proyecto Final y Tarea
14 páginas
Módulo I, II - Apuntes Completos de Ingeniería de Software
Aún no hay calificaciones
Módulo I, II - Apuntes Completos de Ingeniería de Software
41 páginas
Módulo I - Visión General de La Computación en La Nube
Aún no hay calificaciones
Módulo I - Visión General de La Computación en La Nube
16 páginas
Módulo IV: Arquitectura y Diseño de Software - Patrones y Estrategias
Aún no hay calificaciones
Módulo IV: Arquitectura y Diseño de Software - Patrones y Estrategias
15 páginas
Módulo Fundamentos de La Programación: Lenguajes, Algoritmos y POO
Aún no hay calificaciones
Módulo Fundamentos de La Programación: Lenguajes, Algoritmos y POO
14 páginas
Módulo V: Oportunidades de Empleo y Competencias en Ingeniería de Software
Aún no hay calificaciones
Módulo V: Oportunidades de Empleo y Competencias en Ingeniería de Software
13 páginas
Guia Cuarto Periodo Trigonometria 2016 PDF
Aún no hay calificaciones
Guia Cuarto Periodo Trigonometria 2016 PDF
30 páginas
Ejemplo
Aún no hay calificaciones
Ejemplo
28 páginas
Curso Completo de Angular y TypeScript
100% (1)
Curso Completo de Angular y TypeScript
76 páginas
Manual Completo de React
Aún no hay calificaciones
Manual Completo de React
30 páginas
Detección de Patologías EEG Web
Aún no hay calificaciones
Detección de Patologías EEG Web
52 páginas
Vue - Js - Un Framework Progresivo de JavaScript
Aún no hay calificaciones
Vue - Js - Un Framework Progresivo de JavaScript
21 páginas
Guía JavaScript para Estudiantes de Informática
Aún no hay calificaciones
Guía JavaScript para Estudiantes de Informática
8 páginas
Vue Js Platzi
Aún no hay calificaciones
Vue Js Platzi
6 páginas
PPT Unidad 04 Tema 07 2023 02 Desarrollo de Entornos Web (SP4684)
Aún no hay calificaciones
PPT Unidad 04 Tema 07 2023 02 Desarrollo de Entornos Web (SP4684)
18 páginas
Frontend y Backend: Tecnologías Clave
Aún no hay calificaciones
Frontend y Backend: Tecnologías Clave
12 páginas
TALLERDEPROGRAMACIÓNWEB Undefined
Aún no hay calificaciones
TALLERDEPROGRAMACIÓNWEB Undefined
4 páginas
Guía Avanzada de jQuery 3.1
100% (2)
Guía Avanzada de jQuery 3.1
422 páginas
Introducción a JavaScript y su Uso
Aún no hay calificaciones
Introducción a JavaScript y su Uso
42 páginas
Lenguaje de Programación HTML
Aún no hay calificaciones
Lenguaje de Programación HTML
7 páginas
Unidad 4 - JS 2
Aún no hay calificaciones
Unidad 4 - JS 2
26 páginas
DAW 2. Fundamentos de Los Lenguajes de Programación para La Web
Aún no hay calificaciones
DAW 2. Fundamentos de Los Lenguajes de Programación para La Web
22 páginas
Presentación - Consumo de APIs Con React
Aún no hay calificaciones
Presentación - Consumo de APIs Con React
48 páginas
GA7-220501096-AA4-EV01 Taller Sobre Componentes Frontend
Aún no hay calificaciones
GA7-220501096-AA4-EV01 Taller Sobre Componentes Frontend
7 páginas
Curso Fullstack Python: Codo A Codo 4.0
Aún no hay calificaciones
Curso Fullstack Python: Codo A Codo 4.0
51 páginas
DOM y Manipulación en JavaScript
Aún no hay calificaciones
DOM y Manipulación en JavaScript
49 páginas
Examen Tecnologia VersionB
Aún no hay calificaciones
Examen Tecnologia VersionB
3 páginas
Syllabus FS 2023 Latam
Aún no hay calificaciones
Syllabus FS 2023 Latam
17 páginas
Proyecto 3er Parcial Exposicion
Aún no hay calificaciones
Proyecto 3er Parcial Exposicion
41 páginas
Wa 635ae9125e0b1407334535
Aún no hay calificaciones
Wa 635ae9125e0b1407334535
21 páginas
Modalidad de Exámenes - Semana 4 - Revisión Del Intento
Aún no hay calificaciones
Modalidad de Exámenes - Semana 4 - Revisión Del Intento
3 páginas
Java Script
Aún no hay calificaciones
Java Script
2 páginas
4.4 XSS Cross-Site Scripting
Aún no hay calificaciones
4.4 XSS Cross-Site Scripting
56 páginas
Vulnerabilidades en Aplicaciones Web
Aún no hay calificaciones
Vulnerabilidades en Aplicaciones Web
50 páginas
Resumen General de JavaScript
Aún no hay calificaciones
Resumen General de JavaScript
6 páginas
Introducción: ¿Qué Es Vue - JS?
Aún no hay calificaciones
Introducción: ¿Qué Es Vue - JS?
77 páginas
Programación Web - Tarea 4
Aún no hay calificaciones
Programación Web - Tarea 4
17 páginas
Función AJAX para POST y GET
Aún no hay calificaciones
Función AJAX para POST y GET
12 páginas