DISEÑO Y

PROGRAMACIÓN
DE SOFTWARE
MULTIPLATAFORMA

UNIDAD

1
INTRODUCCIÓN AL LENGUAJE
DE PROGRAMACIÓN JAVASCRIPT
Se prohíbe la reproducción total o parcial de esta obra, por cualquier
medio, electrónico o mecánico sin la autorización de la Dirección de
Educación a Distancia (UDB Virtual).

Dirección de Educación a Distancia

Apartado Postal, 1874, San Salvador, El Salvador
Tel: 2251-8200 ext: 1743
 Sumario

Introducción………………………………………………………………….……………… 1
Clase 1 - Introducción a JavaScript.……………….……………………..…….………. 3
Clase 2 - Fundamentos de la Programación………………..………..……………….. 10
Clase 3 - Estructuras de Control …………………………………………...…………… 18
Clase 4 - Aspectos Básicos de la Programación
Orientada a Objetos Clase..………………………………………………………………. 29
Referencias citadas Unidad 1………………………………..….…………..……………. 37
Glosario Unidad 1……………………………………………….………….……………….. 38
 Introducción de
la Asignatura
En esta asignatura, el estudiante adquirirá competencias para diseñar, desarrollar, o
adaptar aplicaciones móviles multiplataforma, manejando el contenido y configurando las
diferentes Apis que poseen los dispositivos móviles. Permitiendo al estudiante, adquirir las
competencias necesarias para poder analizar las diferentes etapas del desarrollo, de una
aplicación móvil multiplataforma, así llevarlo desde el diseño, hasta su implementación y
despliegue.

Para el diseño, se utilizará la herramienta de prototipo, y editor de gráficos vectoriales

Figma, que permite crear un punto de conexión entre los desarrolladores, analistas y
usuarios finales, mostrando un bosquejo representativo del aplicativo móvil.

El estudiante, además adquiere competencias para desarrollar software, con el paradigma

de Programación Orientada a Objetos (POO), para ello diseña, analiza, crea y documenta
aplicaciones que sean capaces de solventar las necesidades del requerimiento.

El curso, está dividido de tal manera que el estudiante comprenda, cada una de las etapas
del desarrollo de aplicaciones móviles multiplataforma, empezando por aspectos básicos,
JavaScript, introducción a React, React Native, las buenas prácticas de desarrollo, el diseño
con Figma, las pantallas, paleta de colores, tamaño de letras, además configurando entorno
de trabajo, diseño de base de datos y finalizando con el despliegue del aplicativo en la App
Store iOS o Play Store Android.

1
El estudiante, desarrollará a través del proyecto de cátedra, una aplicación móvil
multiplataforma. Realizando las entregas de cada etapa del proyecto en el transcurso que
se desarrolla la asignatura, el estudiante pondrá en práctica el conocimiento adquirido,
aplicando estándares de calidad, principios, métodos y mejores prácticas de ingeniería de
software.

2
Clase 1| Introducción a JavaScript
1. ¿Qué es JavaScript?
JavaScript, es un lenguaje de programación utilizado para el desarrollo de aplicaciones o
páginas web interactivas, conocido por sus siglas JS, encargado dar creatividad y
dinamismo, no necesita de ningún compilador, en cualquier navegador que se utilice puede
ser leído directamente sin ayuda de terceros, permitiendo crear interfaz de usuario activas
y ofrece retroalimentación a los visitantes según navegan en sus páginas, por lo tanto, es
conocido como unos de los tres lenguajes nativos de la web, junto a HTML (Contenido y
Estructura) y a CSS (Diseño del Contenido y su Estructura).

Desde sus inicios, hasta la fecha ha evolucionado, permitiendo que no solo sea un lenguaje
interpretado por el navegador web, sino tener el alcance de ejecutarse del lado del servidor,
con la ayuda de NODE.JS, permitiendo así que varios framework o librerías de JS, surjan
en la actualidad, entre las más reconocidas están: Angular, React y Vue. Dentro del
desarrollo de la materia, se estará abordando React, trabajando específicamente la parte
hibrida del desarrollo móvil React Native.

JavaScript se emplea en una página web para dotarla de unas funcionalidades que
el HTML no puede proporcionar por sí mismo. Por lo tanto, el código JavaScript
debe poder integrarse en un documento HTML. Esto se logra mediante el tag
<script>, colocando el código entre <script> y </script>. El tag <script> recibe,
obligatoriamente, el atributo lenguaje, que permite determinar el lenguaje de script
que vamos a emplear. Como además de JavaScript existe una versión recortada de
Visual Basic que se llama VBScript y, para el lado del servidor, existen otros
lenguajes de script, es necesario especificarle al navegador el lenguaje de script que
vamos a emplear. En principio VBScript sólo es soportado por el navegador de
Microsoft, pero existe un plug-in para Netscape Navigator que permite ejecutar
VBScript en este último. Es, por lo tanto, imprescindible aclararle al navegador que
lo que vamos a usar es JavaScript, y no otro lenguaje de guiones. Además, es
imprescindible asegurarse de tener el navegador correctamente configurado para
que pueda funcionar con JavaScript.La sintaxis correcta para incluir código
JavaScript en nuestras páginas queda reflejada en el ejemplo a continuación:

3
 <html>
<head>
<title>JavaScript. 20</title>
<script language="javascript">
<!-- Codigo JavaScript //-->
</script>
</head>
<body>
</body>
</html>

Como ve en la parte resaltada del código, el tag <script> incluye, como decía antes,
el atributo lenguaje, que recibe el valor “javascript”. Al tratarse de una línea de código
HTML, es indistinto que aparezca en mayúsculas o en minúsculas. Dentro del script
tenemos las líneas <!-- y //-->, que corresponden a los indicadores de comentarios
en HTML. Se emplean para indicar que, si el navegador no soporta JavaScript, se
ignoren las líneas de código en este lenguaje y no se produzca un error. Hoy día no
existe prácticamente ningún navegador que no soporte JavaScript (si queda alguno,
estará en un museo) pero, por si acaso, ponemos estas líneas siempre. No olvide
que siempre queda algún usuario que emplea navegadores digamos “exóticos” (el
poder del eufemismo), y algunos de ellos podrían no soportar JavaScript. Fíjese en
que la línea de cierre del comentario HTML va precedida por dos barras inclinadas.
Estas barras son necesarias para hacer que esta línea sea invisible para JavaScript,
puesto que se trata de una marca de comentario HTML, y evitar así un error de
sintaxis (hablaremos de comentarios en JavaScript más adelante). Este código que
acaba de ver no produce ningún efecto, no hace nada ni muestra nada en la pantalla
del navegador, ya que, como ve, no hay ninguna sentencia JavaScript ni tampoco
hay nada en la sección <body> de la página. Lopez Quijado (2010, p.17).

El modelo de objeto de documento (DOM), nos permite manipular la gran mayoría de

etiquetas html, haciendo páginas más dinámicas e interactivas con el usuario, enviado
alertas al usuario, animaciones, mapas, validación de información introducida por el usuario
en los formularios, y realizando cálculos matemáticos, ahorrando tiempo y recursos de lado
del servidor. La manipulación del DOM, son de las fortalezas más eficientes de JS, ya que

4
permite actualizar solo una sección de la página, sin necesidad de hacer un refresco general
de la página, en la Figura 1, se muestra todo el árbol de objetos que manipula el DOM.

Figura 1
Dom árbol objetos

Fuente: Nota. Elaboración propia, a partir de Texcel (2004, parr 8)

Para ampliar el concepto del DOM, comparto el siguiente video para conocer más.

Jonmircha. (01 de mayo 2020). Curso JavaScript 61 DOM introducción [Archivo de Vídeo].
Youtube. https://www.youtube.com/watch?v=dF7lp_qBfV0&ab_channel=jonmircha

1.1 Breve Historia

¿Cómo nace la idea de JavaScript?
A principios de los años 90, la mayoría de los usuarios que se conectaban a Internet
lo hacían con módems a una velocidad máxima de 28.8 kbps. En esa época,
empezaban a desarrollarse las primeras aplicaciones web y, por tanto, las páginas
web comenzaban a incluir formularios complejos. Con unas aplicaciones web cada
vez más complejas y una velocidad de navegación tan lenta, surgió la necesidad de
un lenguaje de programación que se ejecutara en el navegador del usuario. De esta
forma, si el usuario no rellenaba correctamente un formulario, no se le hacía esperar

5
mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los
errores existentes. Brendan Eich, un programador que trabajaba en Netscape, pensó
que podría solucionar este problema adaptando otras tecnologías existentes (como
ScriptEase) al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995.
Inicialmente, Eich denominó a su lenguaje LiveScript. Posteriormente, Netscape firmó
una alianza con Sun Microsystems para el desarrollo del nuevo lenguaje de
programación. Además, justo antes del lanzamiento Netscape decidió cambiar el
nombre por el de JavaScript. La razón del cambio de nombre fue exclusivamente por
marketing, ya que Java era la palabra de moda en el mundo informático y de Internet
de la época. La primera versión de JavaScript fue un completo éxito y Netscape
Navigator 3.0 ya incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo
tiempo, Microsoft lanzó JScript con su navegador Internet Explorer 3. JScript era una
copia de JavaScript al que le cambiaron el nombre para evitar problemas legales.
Introducción a JavaScript Capítulo 1. Introducción www.librosweb.es 5 Para evitar una
guerra de tecnologías, Netscape decidió que lo mejor sería estandarizar el lenguaje
JavaScript. De esta forma, en 1997 se envió la especificación JavaScript 1.1 al
organismo ECMA (European Computer Manufacturers Association). ECMA creó el
comité TC39 con el objetivo de "estandarizar de un lenguaje de script multiplataforma
e independiente de cualquier empresa". El primer estándar que creó el comité TC39
se denominó ECMA-262, en el que se definió por primera vez el lenguaje ECMAScript.
Por este motivo, algunos programadores prefieren la denominación ECMAScript para
referirse al lenguaje JavaScript. De hecho, JavaScript no es más que la
implementación que realizó la empresa Netscape del estándar ECMAScript. La
organización internacional para la estandarización (ISO) adoptó el estándar ECMA-
262 a través de su comisión IEC, dando lugar al estándar ISO/IEC-16262.
Javier (2008, p 5-6).

6
1.2 Características Destacadas y Versiones
1.2.1 Características Destacadas
En la Figura 2 se muestran las características más destacadas de JavaScript.

Figura 2
Características destacadas

Fuente: Nota: elaboración propia.

• Lenguaje del lado del cliente: Nos indica que se ejecuta en la máquina del propio
cliente a través de un navegador. De esta forma las solicitudes realizadas por el
usuario son mucho más rápidas que si se consulta al servidor.
• De tipado débil o no tipado: Un lenguaje sea de tipado débil quiere decir que no
es necesario especificar el tipo de dato al declarar una variable. Esta característica
supone una gran ventaja a la hora de ganar rapidez programando, pero puede
provocar que cometamos más errores que si tuviéramos esa restricción que poseen
los lenguajes de tipado fuerte como C++ o Java.
• Lenguaje orientado a objetos: Que un lenguaje esté orientado a objetos quiere
decir que utiliza clases y objetos como estructuras que permiten organizarse de
forma simple y son reutilizables durante todo el desarrollo. Otros lenguajes
orientados a objetos son Java, Python o C++.
• De alto nivel: Que JavaScript sea un lenguaje de alto nivel significa que su sintaxis
es fácilmente comprensible por su similitud al lenguaje de las personas. Se le llama
de “alto nivel” porque su sintaxis se encuentra alejada del nivel máquina, es decir,
del código que procesa una computadora para ejecutar lo que nosotros
programamos.

7
 Un lenguaje de alto nivel como JavaScript permite que su barrera de entrada y su
curva de aprendizaje se acorte drásticamente. Un ejemplo podría ser que la
sentencia condicional empiece por “IF” que significa “si…” en inglés, permitiendo
asociar rápidamente su funcionamiento y significado. Otro lenguaje de alto nivel muy
utilizado y uno de los mejores para iniciarse en programación por esta característica
es Python.
• Lenguaje interpretado: JavaScript es un lenguaje interpretado porque utiliza un
intérprete que permite convertir las líneas de código en el lenguaje de la máquina.
Esto tiene un gran número de ventajas como la reducción del procesamiento en
servidores web al ejecutarse directamente en el navegador del usuario, o que es
apto para múltiples plataformas permitiendo usar el mismo código.

1.2.2 Versiones de JavaScript

Las versiones de JS, han ido evolucionando y agregando nuevos componentes que han
facilitado el desarrollo en lenguaje. En la Tabla 1, se evidencia el recorrido que ha llevado
al lenguaje a ser lo que es hoy en día.

Tabla 1
Versiones de JavaScript

VERSION AÑO DESCRIPCION

Javascript 1 1995 Netscape 2.0, soportan gran cantidad de instrucciones y funciones,
la mayor parte de las que existen actualmente fueron desarrolladas
desde sus inicios.

Javascript 1.1 1998 Es la versión que se diseñó con la llegada del navegador 3.0m
mejorando un poco su versión anterior e incluyendo el tratamiento
de imágenes dinámicas y la creación de arrays.

Javascript 1.2 1997 Esta nace para los navegadores 4.0, pero es un poco diferente a la
creada por la plataforma de Microsoft y Netscape, y se encontraban
en plena guerra por el mercado.

Javascript 1.3 1998 Versión implementada para los navegadores 5.0, ya se habían
logrado limar asperezas con la competencia

Javascript 1.5 2000 Versión actual al momento de implementar Nestcape 6

ECMAScript 5 2009 Esta es la versión que funciona en todos los navegadores del
mercado.

8
 ECMAScrip 6 2015 A esta versión se le agrega una importante cantidad de novedades
entre ellas la programación orientada a objetos, expresiones de
flechas, iteradores, generadores o promesas para programación
asíncrona y se puede usar en todos los navegadores excepto en
Internet Explorer.

ECMAScrip 7 2016 Es la última versión disponible y publicada en junio de 2016, se trata

de la primera versión para la que se usa un procedimiento de
publicación anual y un proceso de desarrollo abierto.
Fuente: Nota. Elaboración propia, a partir de Mdn (1998-2022, prr 8),

1.3 Diferencia entre JavaScript y TypeScript

TypeScript, es un lenguaje de programación, que ha ganado terreno en el mundo de los
desarrolladores, ya que se vuelve un complemento ya que mantiene los aspectos positivos
de JS y corrige muchas limitaciones, haciendo uno código de programación bastante
utilizado por los desarrolladores a nivel mundial.

Este fue creado por la empresa Microsoft en el año 2012, como ayuda a los desarrolladores
de JS, a contar con un mejor mecanismo de estructuración, para grandes bases de código
y evitar errores comunes que lo realicen.

En lugar de reinventar el lenguaje con una sintaxis el equipo de Microsoft modificó la

programación e hicieron el nuevo código para que fuera opcional. Lo cual permite a los
desarrolladores trabajar en un mismo proyecto sin problemas haciendo modificaciones y
crear códigos legibles sin mucho trabajo y esto permite evitar la pérdida de tiempo en la
depuración. Al mismo tiempo que permite utilizar las habilidades de JS, después de
compilar tu código todo el material de TypeScript desaparece y produce un código limpio y
seguro en JS para todas las plataformas de manera segura.

Para ampliar las diferencias de TypeScript vs Javascript, comparto el siguiente video para
conocer más.

BettaTech. (19 de julio 2020). Por qué debes aprender TypeScript, TypeScript vs
javascript [Archivo de Vídeo]. Youtube.
https://www.youtube.com/watch?v=DBk8zejrFHI&ab_channel=BettaTech

9
Clase 2| Fundamentos de la Programacion
2. Introducción al Lenguaje de Programación
JavaScript
Para realizar un programa se deben de conocer los aspectos básicos del lenguaje de
programación, los cuales nos darán la pauta para ir desarrollando paso a paso. Pero todos
tiene variables, constantes, operadores, estructuras, etc.

2.1 Variables y Constantes

Las variables son recursos de memoria del ordenador reservado para alojar una
información, por la tanto no se podrá declarar otra variable con el mismo identificador.
Sirven para dar nombre a un valor al momento de programar ya sea para registrarlo, usarlo
o actualizarlo. Para el nombre de una variable debemos tener en cuenta algunas normas:

1. Los nombres de variables no deben empezar por un número, sino por una letra.
2. Podrán contener números, letras y el guion bajo, pero ningún otro signo (ni siquiera
el punto o el guion normal).
3. No contendrán letras acentuadas ni de alfabetos locales. No usaremos la ñ, la ç ni
ninguna otra letra que no sea de la alfabetización internacional (el alfabeto inglés).
Tampoco podrán contener espacios en blanco, espacios de no separación o
similares.
4. No podremos usar como nombre de una variable una palabra reservada de
JavaScript, aunque sí podemos declarar una variable cuyo nombre contenga una
palabra reservada, además de otros caracteres. Sin embargo, no es aconsejable
este tipo de nombres. En el punto 2.2 Tabla 5 muestra una lista de las palabras
reservadas del lenguaje, como referencia a este respecto.
5. Debemos recordar que JavaScript distingue entre mayúsculas y minúsculas, por lo
que la variable edad es distinta de Edad. Preste especial atención a este punto para
evitar errores que suelen ser muy difíciles de localizar.
6. Cuando el nombre de una variable esté formado por dos o más palabras, es una
buena costumbre poner la primera en minúsculas y las demás con la primera letra
mayúscula, sin separar. Por ejemplo, miEdad o nombreDelUsuario. (Lopez Quijado,
2010, p.40).

10
De las características que llegaron con ECMAScript 6 a JavaScript, son dos nuevas
maneras para hacer declaración de variables, en la Tabla 2 se muestran las diferentes
formas para realizar declaración de variables.

Tabla 2
Diferentes formas de declaración de variables
Tipo declaración Descripción
var Ámbito global y local, se puede declarar nuevamente.
let Ámbito bloque, modificarse, pero no volver a declararse.
const Mantiene valores constante, Ámbito de bloque
Fuente: Nota. Elaboración propia

Ejemplo para Var:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Var</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// ámbito Global
var nombre = 'Alex';
var nombre = 'Pedro';
function nuevoSaludo() {
// ámbito Local
var saludo = 'hola';
}
document.write('nombre : ' + nombre);
//Uncaught ReferenceError: Console is not defined
Console.log(saludo);
</script>
</body>
</html>

11
Para el ejemplo anterior, uso de var, está generando un error, “Uncaught ReferenceError:
Console is not defined”, está intentando imprimir en consola, una variable que está en
ámbito local “var saludo”, solo tiene acceso al ámbito global fuera de la función. Dónde
están declaradas dos variables con el mismo nombre “var nombre”, esto no ocasiona ningún
error como otros lenguajes, la última variable declarada e inicializada en el último valor, que
tendrá la variable.

Ejemplo para Let:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Let</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// ámbito Global
// Cannot redeclare block-scoped variable 'nombre'
let nombre = 'Alex';
//let nombre = 'Pedro';
function nuevoSaludo() {
// ámbito Local
let saludo = 'hola';
document.write('Saludo : ' + saludo);
}
//Console.log(saludo);
document.write('nombre : ' + nombre);
nuevoSaludo();
</script>
</body>
</html>

Para el ejemplo del uso de let, está generando un error, “Cannot redeclare block-scoped
variable 'nombre'”, cuando se declaran dos variables con el mismo nombre, y además si
se quiere imprimir la variable de bloque “saludo”.

12
Ejemplo para const:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Let</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// ámbito Global
const nombre = 'Pedro';
function nuevoSaludo() {
// ámbito Local
const saludo = 'hola';
document.write('Saludo : ' + saludo);
}
//Console.log(saludo);
document.write('nombre : ' + nombre);
document.write('<br/>')
nuevoSaludo();
</script>
</body>
</html>

Para el ejemplo del uso de const, está generando un error, “Uncaught ReferenceError:
Console is not defined'”, cuando se declaran dos variables con el mismo nombre, y
además si se quiere imprimir la variable de bloque “saludo”.

Constante son variables con una particularidad no se cambia a través de la asignación, esto
nos ayuda con la optimización de la memoria e identificación de errores lógicos al momento
de programar. todos los lenguajes de programación utilizan variables, JS no es la
excepción, a continuación, se presentan los cinco tipos de variables y sus usos: Texto
(String), Numero, Booleanas, Objetos, Funciones Variables de Tipo Texto.

13
Ejemplo para String:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Variable</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var val1 = "comillas dobles";
var val2 = 'comillas simples';
var val3 = "comillas 'simples' dentro de comillas dobles";
document.write('valor 1 : ' + val1);
document.write('<br/>')
document.write('valor 2 : ' + val2);
document.write('<br/>')
document.write('valor 3 : ' + val3);
</script>
</body>
</html>

Figura 3
Resultado

Fuente: Nota. Elaboración propia. Captura de la ejecución en el navegador web.

Las variables de String almacenan una cadena de caracteres, y pueden ir entre comillas
dobles o comillas simples. El uso de las comillas simples o dobles es indistinto lo importante
al momento de programar es el orden en que se utilizan, si en algún momento su uso es
necesario debemos de tener en cuenta la variable Texto Comillas Simples para abrir y
cerrar, ya que, si mezclamos el tipo de comilla nos dará error, dado que eso no está
permitido en JS.

Para ampliar la introducción de JavaScript, comparto el siguiente video para conocer más.

14
Jonmircha. (07 feb 2020). Curso JavaScript 1 Introducción [Archivo de Vídeo]. Youtube.
https://www.youtube.com/watch?v=2SetvwBV-SU

2.2 Palabras Reservadas

Todos los lenguajes de programación tienen palabras reservadas y JS no es la excepción,
a continuación, la Tabla 3 muestra un listado de ellas, las palabras reservadas, como el
nombre lo dice, no se pueden utilizar, están reservadas propiamente para uso del lenguaje
de programación.

Tabla 3
Palabras reservadas JS
Palabas Reservadas
case yield new return super switch this
catch instanceof typeof var else in throw
export extends finally for function if import
class const continue debugger default delete do
break try void while with
Fuente: Nota. Elaboración propia, a partir de Lopez Quijado (2010).

2.3 Tipos de Datos

Los tipos de datos nos ayudan a dar un formato a la información que se almacena en las
variables, la Tabla 4 muestra los tipos de datos que se utilizan en JS.

Tabla 4
Tipos de Datos
Tipo de Dato Uso
Boolean Almacenar verdadero o falso
Number Almacenar datos numéricos
String Almacenar datos caracteres
BigInt Almacenar Números enteros grandes
Symbol Almacenar Caracteres
Object Almacenar objetos
Fuente: Nota. Elaboración propia, a partir de Haverbeke (2018)

15
2.4 Operadores
Los operadores en JS, ayudan a realizar tareas, de filtrar y evaluar condiciones que deben
de controlarse. Existen los operadores aritméticos, lógicos y relacionales.

2.4.1 Operadores Aritméticos

Los operadores aritméticos, toman valores numéricos, para realizar las operaciones
matemáticas, y devolver un solo resultado de la operación, la Tabla 5 muestra algunos de
ellos.

Tabla 5
Operadores aritméticos
Operador Uso
suma (+) A+B
resta (-) A-B
multiplicación (*) A*B
división (/) A/B
residuo (%) A%B
incremento (++) A++
decremento (--) A--
Fuente: Nota. Elaboración propia, a partir de Haverbeke (2018)

2.4.2 Operadores Lógicos

Los operadores Lógicos, se utilizan la mayoría de las veces con valores booleanos,
devolviendo true o false. La Tabla 6, muestra los operadores lógicos.
Tabla 6
Operadores lógicos
Operador Uso
AND = && A && B
OR = || A OR B

NOT =! A != B
Fuente: Nota. Elaboración propia, a partir de Haverbeke, (2018)

2.4.3 Operadores Relacionales

Los operadores relacionales, realizan la comparación, para devolver un booleano, true o
false. La Tabla 7 muestra algunos de ellos.

16
Tabla 7
Operadores relacionales
Operador Uso
in NumeroA in objectoB
instanceof objectoA instanceof objectoB

Fuente: Nota. Elaboración propia, a partir de Haverbeke (2018)

Para ampliar el tema de los operadores, comparto el siguiente video para conocer más.

Jonmircha. (25 febrero 2020). Curso JavaScript 13 Tipos de Operadores [Archivo de

Vídeo]. Youtube.
https://www.youtube.com/watch?v=_8Z5AeGVIXE&list=PLvq-
jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA&index=14

17
Clase 3| Estructuras de Control
3. Estructuras de Selección e Iterativas
Cada programa que se realiza está compuesto por un conjunto de sentencias que definen
lo que este va a realizar durante la ejecución. Permitiendo realizar captura de datos,
operaciones, transformación de datos, generar salida de información, cálculos
matemáticos, almacenamiento de datos, etc. Se denomina flujo de un programa al orden
de ejecución de las sentencias, que forman parte del programa. Las estructuras de control
permiten a los lenguajes de programación, la toma decisiones en acciones a realizar. Al
hacer un programa, se necesita establecer estructuras de control, selección, condiciones o
decisiones que permitan solucionar un problema.

3.1 Estructuras de Selección

3.1.1 Estructura if else if
Toda nuestra vida está llena de decisiones, desde que nos levantamos de la cama,
iniciamos a tomarlas inconscientemente, vestimenta, desayuno, medio de transporte, etc.
De igual manera, cuando estamos programando, tenemos que tomar decisiones de elegir
un camino u otro, en este caso en particular tenemos un SÍ o NO.

Para la estructura if else if, tenemos una o más condiciones y dos caminos que se pueden
tomar: verdadero o falso o como es conocido en todos los lenguajes de programación, como
true o false, la Figura 4 es la representación gráfica, de las estructuras anidadas, según sea
el caso.

Figura 4
If else

Fuente: Nota. Elaboración propia

18
Por ejemplo, cuando ingresamos a un sitio web o aplicación móvil que solicita ingresar
usuario y contraseña, se pueden dar dos escenarios o más, lo más comunes son: el usuario
ingrese correctamente las credenciales e ingrese al sistema, la segunda opción, el usuario
ingresa incorrectamente sus credenciales y no le permite ingresar. Con el siguiente ejemplo,
se pone en práctica lo descrito:

Ejemplo if else
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<script>
let usuario;
let contrasena;
usuario = prompt('Ingrese usuario:');
contrasena = prompt('Ingrese contrasena:');
if (usuario == "alex" && contrasena == "alex") {
document.write('Bienvenido al Sistema : ' + usuario);
} else {
document.write('Las credenciales no son las correctas');
}
</script>
</body>
</html>

En el código anterior se tiene el código JS embebido dentro de la página html, es una forma
de trabajar, aunque no la mejor, lo más recomendable es hacerlo fuera en un archivo js
externo e incluirlo dentro de la página, para efectos de ejemplo es funcional, conforme el
curso avance se eran implementado las demás formas de trabajar JS.

En ejemplo anterior se pone en práctica (if else), si el usuario y contraseña cumplen con la
igualdad, se genera verdadero (true) y si no cumple la condición se genera falso (false), y
el usuario no ingresa al sistema. Así como este ejemplo, podemos enumerar muchos más,
en el transcurso del curso, se irán realizando más ejemplos.

19
3.1.2 Estructura switch – case
Esta estructura es una forma de trabajar, ampliando la estructura de selección if, cuando se
está evaluando una condición que tiene demasiados if anidados, es recomendable ocupar
switch case, que está diseñado para ese propósito, tener múltiples opciones en un solo
bloque. Además, ofrece una ventaja, si no cumple ninguna de las opciones, termina
saliendo por el valor por default.

La estructura switch case facilita el trabajo cuando se está desarrollando un algoritmo y

tienen n opciones que ofrecer a usuario, la Figura 5, se muestra la representación gráfica.

Figura 5
Switch case

Fuente: Nota. Elaboración propia.

20
Por ejemplo, cuando hacemos uso de la calculadora y realizamos las operaciones básicas,
sumar, restar, multiplicar y división, podemos apoyarnos de la estructura switch case para
poder resolver la problemática. Llevándolo a la práctica con el siguiente código:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Switch Case</title>
<meta charset="UTF-8">
</head>
<body>
<script>
let valor1;
let valor2;
let res;
let op;
valor1 = parseInt(prompt('Ingrese primer valor :'));
valor2 = parseInt(prompt('Ingrese segundo valor :'));
op = prompt('Ingrese operacion S,R,M,D :');
switch (op) {
case 'S':
res = valor1 + valor2;
document.write('Resultado Suma : ' + res);
break;
case 'R':
res = valor1 - valor2;
document.write('Resultado Resta : ' + res);
break;
case 'M':
res = valor1 * valor2;
document.write('Resultado MUltiplicacion : ' + res);
break;
case 'D':
res = valor1 / valor2;
document.write('Resultado Division : ' + res);
break;
default:
document.write('Debe ingresar una operacion S,R,M,D');
}
</script>
</body>
</html>

Para ampliar las estructuras de control, comparto el siguiente video para conocer más.

21
Jonmircha. (26 feb 2020). Curso JavaScript 14 Condicionales [Archivo de Vídeo]. Youtube.
https://www.youtube.com/watch?v=9h5hyh_wDjo&list=PLvq-jIkSeTUZ6QgYYO3MwG9EMqC-
KoLXA&index=15

3.1.3 Operador Condicional (ternario)

El operador ternario es una manera corta de realizar una condición utilizando la estructura
if else, la diferencia está en la sintaxis que es una sola línea pero tiene similar alcance que
if else, puede hacer múltiples evaluaciones en una sola condición.

Su sintaxis: condición? verdadero: falso

Donde la condición a evaluar está al inicio, le sigue el signo de interrogación de cierre (?)
donde si cumple la condición dará el mensaje después del signo y si no cumple dará el
mensaje después de los dos puntos (:).

Múltiples condiciones: ¿condición? verdadero: condición? verdadero: falso

Donde la condición a evaluar está al inicio, le sigue el signo de interrogación de cierre (?)
donde si cumple la condición dará el mensaje después del signo y si no cumple, realiza la
segunda condición, para repetir el ciclo de verdadero y falso. Así sucesivamente puede
seguir anidando más condiciones. Llevándolo a la práctica con el siguiente código:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Ternario</title>
<meta charset="UTF-8">
</head>
<body>
<script>
//una condicion
let salario;
salario = parseInt(prompt('Ingrese primer valor :'));
salario > 100 ? document.write('Mayor Salario') : document.write('Menor Salario');
//multliples condiciones
document.write('<br/>')
let usuario;

22
 usuario = prompt('Ingrese usuario:');
usuario == 'juan' ? document.write('NO tiene acceso 1') : usuario == 'pedro' ?
document.write('Si tiene acceso') : document.write('NO tiene acceso 2')
</script>
</body>
</html>

3.2 Estructuras Iterativas

Las estructuras iterativas están en lo cotidiano, por ejemplo, cuando repetimos una misma
acción en un determinado tiempo, cuando ingerimos alimentos, cuántas veces nos llevamos
la comida a la boca, muchas veces puede ser 20 o 30 veces, hasta que la comida termina
o estamos saciados, de igual manera funcionan las estructuras iterativas, nos permiten
realizar acciones de repetición hasta que la condición se cumpla o termine, la Figura 6
muestra la representación gráfica.

Figura 6
Estructuras Iterativas

Fuente: Nota. elaboración propia.

3.2.1 Estructura for

La estructura de repetición FOR se utiliza para realizar un ciclo, un determinado número de
veces, hasta que se cumpla la condición o termine el conteo. La sintaxis se muestra a
continuación:

23
for (inicialización; condición; incremento o decremento) {
// Sentencias a ejecutar por cada iteración
}

Donde la inicialización nos determina, el valor que se estará iniciando el conteo, la

condición detiene la iteración cuando ya no se cumple y el incremento o decremento, es
la variable encargada de ir afectando cada iteración. Ya sea i++ o i--. A continuación, se
presenta un ejemplo de cómo utilizar la estructura for.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo For</title>
<meta charset="UTF-8">
</head>
<body>
<script>
//una condicion
let valortabla;
let res;
valortabla = parseInt(prompt('Ingrese un numero entre 1 a 9 :'));
for (let i = 1; i <= 10; i++) {
res = i * valortabla;
document.write(i + ' x ' + valortabla + ' : ' + res);
document.write('<br/>')
}
</script>
</body>
</html>

Al ejecutarse muestra la siguiente pantalla, Figura 7 ingreso número:

Figura 7
Ingreso número

Fuente: Nota. Elaboración propia. Captura de la ejecución en el navegador web.

24
El resultado de la ejecución muestra la siguiente pantalla, Figura 8, resultado ciclo for:

Figura 8
Resultado ciclo for

Fuente: Nota. Captura de la ejecución en el navegador web.

3.2.2 Estructura while

La estructura while hace similar trabajo que la estructura for, está compuesta por
inicialización, condición e incremento o decremento, depende de lo que se esté realizando.
La sintaxis se muestra a continuación:

Variable inicialización
while (condición) {
// Sentencias a ejecutar por cada iteración
incremento o decremento
}

Misma funcionalidad del for, pero con diferente estructura. A continuación, se presenta un
ejemplo de cómo utilizar la estructura while.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo While</title>
<meta charset="UTF-8">
</head>
<body>

25
 <script>
let valortabla;
let res;
let i = 10;
valortabla = parseInt(prompt('Ingrese un numero entre 1 a 9 :'));
while (i > 0) {
res = i * valortabla;
document.write(i + ' x ' + valortabla + ' : ' + res);
document.write('<br/>')
i--;
}
</script>
</body>
</html>

Se realizó el mismo ejemplo que se utilizó para la estructura del for, generar la tabla de
multiplicar, introduciendo el número de la tabla a generar, pero con la diferencia que se
hace un conteo decremento, para comprobar que ambas opciones son factibles, El
resultado de la ejecución muestra la siguiente pantalla, Figura 9, resultado ciclo while:

Figura 9
Resultado ciclo while

Fuente: Nota. Elaboración propia Captura de la ejecución en el navegador web.

3.2.3 Estructura do - while

La estructura do while hace similar trabajo que la estructura for y while, está compuesta por
inicialización, condición e incremento o decremento, depende de lo que se esté realizando.

26
La única diferencia que tiene con los bucles antes vistos es que siempre va a hacer la
primera iteración, aunque no cumpla la condición, porque la condición se evalúa hasta el
final. La sintaxis se muestra a continuación:

variable inicialización;
do {
// Sentencias a ejecutar por cada iteración
incremento o decremento
} while (condición)
A continuación, se presenta un ejemplo de cómo utilizar la estructura do while. Retomando
el mismo ejemplo del for y while, así comprobar que todos los bucles pueden utilizarse para
resolver el mismo problema.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Do While</title>
<meta charset="UTF-8">
</head>
<body>
<script>
//una condicion
let valortabla;
let res;
let i = 1;
valortabla = parseInt(prompt('Ingrese un numero entre 1 a 9 :'));
do {
res = i * valortabla;
document.write(i + ' x ' + valortabla + ' : ' + res);
document.write('<br/>')
i++;
}while (i <= 10)
</script>
</body>
</html>

27
El resultado de la ejecución muestra la siguiente pantalla, Figura 10, resultado ciclo do
while:

Figura 10
Resultado ciclo do while

Fuente: Nota. Elaboración propia. Captura de la ejecución en el navegador web.

Para ampliar las estructuras repetitivas, comparto el siguiente video para conocer más.

Jonmircha. (26 feb 2020). Curso JavaScript 15 Ciclos (Loops) [Archivo deVídeo].
Youtube.https://www.youtube.com/watch?v=AapgtR0Rwk0&list=PLvq-
jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA&index=16

28
Clase 4| Aspectos Básicos de la
Programación Orientada a Objetos
4. Clases y Objetos
Antes de iniciar a definir las clases y objetos es importante mencionar que todo se origina
de la Programación Orientada Objetos (POO), una metodología de trabajo más ordenada y
reutilizable que la manera convencional de programar. La filosofía es reutilización de código
y dividir el código en pequeñas tareas para resolver el problema.

4.1 Clases
Las clases son un conjunto de instrucciones para resolver un problema, sus partes
principales son: atributos, constructor, funciones y métodos. La clase ayuda a encapsular
el trabajo, definiendo los modificadores de acceso: privado, público. No todo debe ser
público y no todo debe ser privado, dependerá de cómo se haya realizado el análisis, para
la resolución del problema. Para definir una clase se realiza mediante la palabra reservada
class. La sintaxis se muestra a continuación:

class MyClass {
// atributos
Atributo 1;
Atributo 2;
// métodos de clase
constructor() { ... }
method1() { ... }
method2() { ... }
method3() { ... }
...
}

Para tener una idea más clara, se hará un ejemplo, se definirá una clase llamada
calculadora que recibirá dos números y el operador, haciendo referencia a las cuatro
operaciones básicas de una calculadora (suma, resta, multiplicar, división).

29
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Clase</title>
<meta charset="UTF-8">
</head>
<body>
<script>
//una condicion
let lvalor1;
let lvalor2
let lop;
lvalor1 = parseInt(prompt('Ingrese un numero entre 1 a 9 :'));
lvalor2 = parseInt(prompt('Ingrese un numero entre 1 a 9 :'));
lop = prompt('Ingrese operacion s,r,m,d :');
class Calculadora {
constructor(valor1, valor2, pop) {
this.valor1 = valor1;
this.valor2 = valor2;
this.op = pop;
}
operacion(){
if (this.op == 's') {
return this.sum();
}else if(this.op == 'r') {
return this.res();
}else if(this.op == 'm') {
return this.mul();
}else if(this.op == 'd') {
return this.div();
}
}
sum() {
return (this.valor1 + this.valor2);

30
 }
res() {
return (this.valor1 - this.valor2);
}
mul() {
return (this.valor1 * this.valor2);
}
div() {
return (this.valor1 / this.valor2);
}
}
const p1 = new Calculadora(lvalor1, lvalor2, lop);
document.write(' Resultado : ' + p1.operacion());
</script>
</body>
</html>

Al ejecutarse muestra la pantalla reflejada en la Figura 11, ingrese primer número, similar
pantalla muestra para solicitar el segundo número y la operación a realizar (s,r,m,d).

Figura 11
Ejemplo clase

Fuente: Nota. Elaboración propia. Captura de la ejecución en el navegador web.

Para ampliar el tema de clases, comparto el siguiente video para conocer más.

Jonmircha. (11 de marzo 2020). Curso JavaScript 24 Clases y Herencia [Archivo

deVídeo]. Youtube. https://www.youtube.com/watch?v=C86JvqET61A&list=PLvq-
jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA&index=25

31
4.2 Objetos
Los objetos son las instancias de las clases, reservan un espacio en memoria, por cada
instancia creada. Cada objeto representa un espacio en memoria por separado, así cada
operación que se realiza con cada objeto instanciado es independiente. La sintaxis se
muestra a continuación: const objeto = new Nombre Clase (parámetros);

donde los parámetros son recibidos por el constructor, para inicializar los atributos de la
clase. La palabra reservada new se emplea para crear nuevos objetos. En la Figura 12, se
muestra cómo se reserva la memoria para cada objeto creado.

Figura 12
Creación objeto.

Fuente: Nota. Elaboración propia.

Para ampliar el tema de objetos, comparto el siguiente video para conocer más.

Jonmircha. (04 de marzo 2020). Curso JavaScript 19 Objetos literales [Archivo

deVídeo]. Youtube. https://www.youtube.com/watch?v=XhJaPRfJaz0&list=PLvq-
jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA&index=20

32
4.3 Atributos
Los atributos son las variables de las clases donde se almacena la información, estas son
inicializadas por el constructor. Tomando una porción de código del ejemplo anterior
calculadora, se puede verificar que llegan tres parámetros, enviados en la creación del
objeto, para inicializar los atributos. (valor1, valor2, pop)

constructor(valor1, valor2, pop) {

this.valor1 = valor1;
this.valor2 = valor2;
this.op = pop;
}

Como se ha mencionado, los atributos representan las características individuales que

permiten diferenciar a un objeto de otro. Los atributos se guardan en variables de instancia
y cada objeto en particular puede tener valores distintos.

4.4 Constructores
Los constructores toman una función importante en el desarrollo de software orientado a
objetos, ya que son los encargados de inicializar los atributos de la clase. No se puede
llamar de manera directa, sino invocado una única vez al momento de instanciar un objeto.
En ejemplo de la Calculadora, se puede observar la creación del constructor, inicializa los
valores de manera directa.

Tiene la palabra reservada constructor.

constructor(valor1, valor2, pop) {

this.valor1 = valor1;
this.valor2 = valor2;
this.op = pop;
}

4.5 Métodos
Los métodos son subrutinas que manipulan datos definidos por las clases y permiten
acceder a dichos datos. Un programa interactúa con una clase a través de sus métodos.
En el ejemplo de la Calculadora podemos ver los cinco métodos creados:

33
 operacion(){
if (this.op == 's') {
return this.sum();
}else if(this.op == 'r') {
return this.res();
}else if(this.op == 'm') {
return this.mul();
}else if(this.op == 'd') {
return this.div();
}
}
sum() {
return (this.valor1 + this.valor2);
}
res() {
return (this.valor1 - this.valor2);
}
mul() {
return (this.valor1 * this.valor2);
}
div() {
return (this.valor1 / this.valor2);
}

Donde el método operación hace el llamado de cada una de las operaciones básica de
suma, resta, multiplicación y división, según la opción que el usuario haya ingresado.

4.6 Modificadores de acceso

Los modificadores de acceso permiten encapsular los atributos, en otras palabras, restringir
el acceso a las instancias de las clases, según sea el caso. Para ejemplificar, podemos
imaginar nuestras casas, lo que está dentro de ella es privado, no todas las personas que
viven en casa tienen derecho a usar todo, porque hay áreas comunes, como cocina, tv, etc.,
pero están los dormitorios personales, que son privados, cada uno tiene cosas personales

34
que no ocupa nadie más de la familia; dentro de casa en privado, fuera de ella en el patio
protegido y fuera del patio, está lo público. Un ejemplo para dejar claro los conceptos:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Clase Persona</title>
<meta charset="UTF-8">
</head>
<body>
<script>
//una condicion
let lvalor1;
let lvalor2
let lop;
lnombre = prompt('Ingrese nombre :');
lapellido = prompt('Ingrese apellido :');
ledad = prompt('Ingrese edad:');
class Persona {
constructor(pnombre, papellido, pedad) {
//variables publica
this.nombre = pnombre;
this.apellido = papellido;
// variables privada, sin el this.
let edad = pedad;
}
}
const per = new Persona(lnombre, lapellido, ledad);
document.write(' Su nombre : ' + per.nombre + ' ' + per.apellido);
document.write(' Su edad : ' + per.edad);

35
 </script></body>
</html>

36
 Referencias citadas en UNIDAD #1

• Lopez Quijado, J. (2010). Domine javascript.

https://cbues.bibliotecasdigitales.com/read/9788499643793/index
• Haverbeke, M. (2018). Eloquent JavaScript. https://eloquentjs-
es.thedojo.mx/Eloquent_JavaScript.pdf
• Texcel, J. (07 April 2004). Qué es el Modelo de Objetos del Documento. World
Wide Web Consortium. https://www.w3.org/2005/03/DOM3Core-
es/introduccion.html
• Perez, J (2008). Introducción a JavaScript.
https://www.jesusda.com/docs/ebooks/introduccion_javascript.pdf
• Mdn Contributors (1998-2022), La Guía de JavaScript. Mozila.
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/About

37
 Glosario de los términos citados
en la UNIDAD #1

JS JavaScript

HTML Lenguaje de etiquetas de hipertexto

CSS Hojas de estilo, Cascading Style Sheets,

ANIDADO Dentro de una estructura de código

SINTAXIS Reglas que determinan, cómo debe hacerse.

ITERACION Repetición de una acción.

NODE.JS Entorno ejecución JavaScript

ECMASCRIPT Especificación de JS

PLUGINS Complemento que otorga funcionalidad extra.

FRONT-END Desarrollo del lado del cliente

API Interfaz de programación de aplicaciones

ARRAYS Listas para almacenar en memoria, varios registros

ASINCRONA No sucede al mismo tiempo

CONCATENACIÓN Unión de dos variables o texto

DOM Modelo de objeto de documento

38