Capítulo 07: JavaScript Avanzado C.F.P Nro.

401 de San Martín

JAVASCRIPT AVANZADO
"No desees que fuese más sencillo, desea que fuese mucho mejor.".

(Jim Rohn)

OBJETOS

Los programas que hemos creado hasta ahora se han visto limitados por el hecho de que solo
funcionaban con tipos de datos simples. Por ejemplo, vamos a suponer que queremos definir
el uso de una tarjeta de crédito dentro de un programa. Si definiera número de tarjeta de
crédito seria por ejemplo un tipo de dato simple como un String. Pero una tarjeta de crédito es
más que un número, tiene un tipo (Visa Classic, Mastercard Gold, etc), un banco emisor, la
fecha de emisión, etc.
Es decir, una tarjeta de crédito es un objeto con muchas propiedades que definen sus
características. Estas propiedades pueden contener cualquier tipo de datos, incluidas
números, strings y booleanos.

1
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

También como veremos más adelante pueden contener métodos, que son funciones
contenidas en un objeto. Para crear objetos, podemos hacerlo de varias maneras; nosotros
usaremos la notación más extendida que es la notación literal donde entre llaves ({})
indicaremos las propiedades y su valores con la forma: propiedad:valor separador por comas.
Por ejemplo, el siguiente código crea un objeto tarjeta de crédito:

let myCardCredit = {
cardNumber: '4111 1111 1111 1111',
lastName: 'Lopez',
type: 'Visa Classic'
};

El objeto myCardCredit tiene tres propiedades número de tarjeta, apellido y tipo cuyos valores
correspondientes son: '4111 1111 1111 1111', Lopez y 'Visa Classic'.
Para acceder a una propiedad de un objeto, se utiliza la notación punto ejemplo:

myCardCredit.cardNumber;

FUNCIONES ANONIMAS

Existen un tipo función, las llamadas funciones anónimas, donde no se especifica

explícitamente el nombre para la función.

let dogName=function() {
let name = prompt('Ingrese el Nombre de su Mascota');
alert(name);
};

En este caso guardamos a la función en una variable llamada dogName (El valor de la
variable es la función). Para invocarla necesitamos llamar al nombre de la variable.

dogName();

Normalmente estas funciones son usadas sólo una vez en nuestro código.

2
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

METODOS EN LOS OBJETOS

Anteriormente vimos que los objetos en JavaScript son grupos de pares clave-valor. Los
valores pueden consistir en propiedades, pero también de métodos. Los métodos son las
tareas que puede realizar un objeto. Veremos cómo podemos definir un objeto en JavaScript:

let soldierRome = {
name:'cesar',
weapon: 'Gladius',
fight: function() {
return this.name+ " ataca con su: "+ this.weapon;
}
};

alert(soldierRome.fight());

En este caso construimos un objeto Soldado Romano que usara su arma en un ataque. Para
ello armaremos un método que nos permitirá a nuestro soldado luchar. La palabra this usada
en nuestro método se refiere al objeto actual en el que se está escribiendo el código, por lo que
en este caso this es igual a Soldado Romano.

OBJETOS INTRINSECOS

JavaScript define algunos objetos de forma nativa, por lo que pueden ser utilizados
directamente por las aplicaciones sin tener que crearlos. Los objetos Boolean, Number, String
aparte de almacenar los mismos valores de los tipos de datos primitivos añaden propiedades
y métodos para manipular sus valores. Otros como los objetos Array y Date tienen una gran
cantidad de propiedades y métodos. Para poder usarlos se declaran con la palabra reservada
new y el nombre del objeto. Por ejemplo, supongamos que quiero obtener la fecha y la hora
actual generado por mi Sistema Operativo:

let newDate = new Date();

Definimos una variable denominada fecha. Esta variable contiene un objeto de tipo Date que
lo que hace es almacenar la fecha y la hora. Como fecha es un objeto podemos usar todas las
propiedades y métodos que provee este objeto.
Por ejemplo si usamos el método getDay() este nos devolverá el día actual. También puede
conseguir el año actual usando getFullYear().
Por ejemplo:

let newDate = new Date();

alert(newDate.getFullYear());

3
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

ESTRUCTURAS DE CONTROL

Hasta aquí hemos obtenidos programas que son una simple sucesión lineal de instrucciones.
Pero que sucede si nuestro programa debe tomar decisiones en base a una condición o si
necesitamos repetir una cierta cantidad de veces un conjunto de instrucciones. Para realizar
este tipo de programas son necesarias las estructuras de control de flujo, que son
instrucciones del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro".
También existen instrucciones del tipo "repite esto mientras se cumpla esta condición".

ESTRUCTURA IF

La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la

estructura if. Se emplea para tomar decisiones en función de una condición. Si la condición se
cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran
dentro de un bloque. Si la condición no se cumple (es decir, si su valor es false) no se ejecuta
ninguna instrucción contenida en el bloque anterior, pero continúan ejecutando las
instrucciones fuera del if. Para poder trabajar con las condiciones debemos primero conocer
los operadores.

OPERADORES

En programación un operador se refiere a un carácter que le dice a la máquina que realice una
operación en particular. Por ejemplo, el operador (+) se usa para sumar dos valores
numéricos. Ahora veremos los operadores más usados:

OPERADORES DE COMPARACION

Un operador es un símbolo en una expresión que representa una operación aplicada a los
valores sobre los que actúa. Los valores sobre los que actúa un operador se llaman operandos.
Un operador binario es el que tiene dos operandos, mientras que un operador unario es el que
tiene sólo uno.
Los operadores de comparación devuelven un valor de tipo boolean (verdadero o falso) que
indica el resultado de la comparación. Algunos operadores de comparación son:

 El igual a == (no confundir con el = de las asignaciones)

 El distinto a !=
 El mayor que >
 El mayor o igual que >=
 El menor que <
 El menor o igual que <=
 La igualdad estricta ===
 La desigualdad estricta !==

4
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

IGUALDAD E IGUALDAD ESTRICTA

La diferencia entre == (igualdad) y === (igualdad estricta) es que el operador de igualdad

convertirá los valores de distintos tipos antes de comprobar la igualdad. Por ejemplo, el
resultado de comparar la cadena "1" con el número 1 es true. El operador de igualdad estricta,
por otra parte, no convertirá los valores a tipos diferentes, por lo que la cadena "1" y el número
1 no se comparan como iguales.

OPERADORES ARITMÉTICOS

Las operaciones aritméticas son las que operan sobre valores numéricos y entregan otro valor
numérico como resultado. Algunos operadores aritméticos son:

 La suma +
 La resta -
 La multiplicación *
 La división /
 El módulo % (resto de la división);
 Incremento en uno ++ 
 Decremento en uno -- 

OPERADORES LÓGICOS O BOOLEANOS

Los operadores booleanos o lógicos se utilizan para formar expresiones que sólo pueden tener,
como resultado, un valor booleano. Hay tres operadores lógicos:

 El operador ! es un operador unario, es decir, sólo se aplica a un operando. Su

resultado es cambiar el valor del operando al que se aplica, es decir, si es verdadero, lo
cambia a falso y viceversa.
 El operador || (or) se puede aplicar a dos o más operandos. El resultado es verdadero si
unos de los operandos o expresiones son verdaderos.
 El operador && (and) igual que el anterior puede operar con varios o más operandos.
En este caso todos los operandos tienen que ser verdadero para que dé un resultado
true.

ESTRUCTURA IF-ELSE

En ocasiones, las decisiones que se deben realizar son del tipo "si se cumple esta condición,
hazlo; si no se cumple, haz esto otro". Para este caso se debe crear otro bloque de instrucciones
en el caso de la condición sea falsa. Este bloque ira después de la palabra reservada else.

5
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

if(condición){
// instrucciones a ejecutar SI se cumple la condición
}
else
{
// instrucciones a ejecutar si NO se cumple la condición
}

Ahora desarrollaremos un pequeño ejemplo donde le pasamos el talle de una remera (S, M, L o
XL) y nos devuelve el color de la remera que tiene la tienda virtual:

function colorProduct(size){
// Solo talles: S, M, L Y XL.
let color;
if (size=="S")
color="Blanca";
else if (size=="M" || size=="L")
color="Negra";
else
color="Roja";
return color;
}

ESTRUCTURA FOR

Cuando se sabe a priori el número de veces que se tiene que repetir una operación o tarea se
utiliza la estructura for Esta estructura crea un bucle que ejecuta una o un conjunto de
instrucciones mientras cierta condición se evalúe como verdadera. Cuando la condición se
evalúa como false, la ejecución continúa con la sentencia posterior al bucle for.
Su estructura de control está compuesta de tres declaraciones:

for ((expresión inicialización); (condición de salida); (incremento/decremento))

{
instrucciones a ejecutar si se cumple la condición
}

La primera expresión de inicialización le asigna un valor inicial a una variable. La siguiente

es la expresión de condición que indica cuando terminara el bucle. La tercera parte representa
un incremento o decremento que debe adoptar la variable declarada en la primera expresión
Ahora desarrollaremos un ejemplo donde mostraremos los colores del arco iris que se
encuentran dentro de un arreglo:

6
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

const coloursRainbow = [
"Red",
"Orange",
"Yellow",
"Green",
"Blue",
"Indigo",
"Violet"
];

for (let i = 0; i < coloursRainbow.length; i++)

console.log(coloursRainbow[i]);

La declaración i es una expresión de inicialización, es decir, se asigna un valor inicial a una

variable, que generalmente se la llama i (índice o iterador). La condición de salida es que la
cantidad de veces a repetir sea menor a un valor cantidad (para ello con la función length
calculamos la longitud del arreglo) en el caso de que el valor i sea superado se sale del bucle
for por que la condición se transforma en falsa. Como la variable i se ha inicializado a un
valor de 0 y la condición para salir del bucle es que i sea menor que la longitud del arreglo, si
no se modifica el valor de i de alguna forma, el bucle se repetiría indefinidamente. Por ese
motivo, es imprescindible indicar un incremento de i para poder controlar el bucle.

FOR EACH

JavaScript ha evolucionado mucho en los últimos años y con la llegada ES6 se ha potenciado
su uso. De la mano de estos cambios encontramos muchas novedades que facilitan nuestro
trabajo. Entre ello podemos encontrar el forEach(). El método forEach() es un método de los
arrays de JavaScript que se utiliza para iterar sobre los elementos del mismo y ejecutar una
función determinada en cada uno de ellos. La sintaxis es la siguiente:

arreglo.forEach(función_callback);

En donde la variable función_callback es una función denominada callback que será llamada
o invocada por cada elemento que exista dentro del arreglo. Por ejemplo, para el ejercicio que
realizamos en el for anterior podemos realizar lo siguiente:

7
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

const coloursRainbow = [
"Red",
"Orange",
"Yellow",
"Green",
"Blue",
"Indigo",
"Violet",
];

coloursRainbow.forEach(function (color) {
console.log(color);
});
);

En este caso aplicaremos el método forEach() llamando a una función callback que tiene un
argumento denominado color que contiene el elemento actual por donde se va iterando.
Ahora veamos cómo usar forEach en JavaScript pero combinado con las funciones flecha
(arrow function) De esta forma tendremos un código más corto y entendible:

const coloursRainbow = [
"Red",
"Orange",
"Yellow",
"Green",
"Blue",
"Indigo",
"Violet"
];

coloursRainbow.forEach(color=>console.log(color))

Nota

Como se puede ser un forEach() es mucho más fácil no solo de escribir sino
también es más fácil de leer el código.

8
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

ESTRUCTURA WHILE

La estructura de control while es otra estructura de repetición mientras se cumple una

condición. La sintaxis en JavaScript seria la siguiente:

while (condicion) {
instrucciones a ejecutar
}

Para usar esta estructura (a diferencia del for visto anteriormente) hay que tener en cuenta
que, en este tipo de estructura iterativa, la variable se tiene que inicializar fuera del bucle y su
incremento, dentro del bucle while. O sea que ahora tendríamos la siguiente sintaxis:

(expresión inicialización)
while (condicion) {
instrucciones a ejecutar
.
.
.
(incremento o decremento)
}

Tanto la inicialización como la modificación de la variable de inicialización son muy

importantes, cualquier error podría llevar a comportamientos extraños de la aplicación.
La aplicación anterior usando la estructura while quedaría de la siguiente forma:

function copyPhrase (count){

let phrase="Aquí me pongo a cantar <br> Al compás de la vigüela,<br>
Que el hombre que lo desvela<br>
Una pena extraordinaria<br>
Como la ave solitaria<br>
Con el cantar se consuela";
let i = 0;
while (i<count){
document.write(phrase);
document.write('<br>');
document.write('--');
document.write('<br>');
i++;
}
}

9
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

Como se puede ver la variable se inicializa antes de usar el while. La condición de salida se
encuentra justo en el while y dentro del bloque me encargo de incrementar la variable de
inicialización.

¿QUE ES UNA API?

El termino API viene del inglés Application Programming Interface, que en español seria
Interfaz de Programación de Aplicaciones esto es un conjunto de funciones y métodos que
permite a los desarrolladores desarrollar programas sin tener que escribir códigos desde cero.
En términos de desarrollo es como una capa de abstracción que representa la capacidad de
comunicación entre distintos componentes de software. El concepto de API y su utilización
es bastante anterior a la popularización de internet. Por ejemplo, existen apis para conectarse
a un sistema operativo (WinAPI) o apis para comunicarse a una base de datos. Con el uso de
internet se vio la posibilidad de que el software y las aplicaciones que podían ser
interconectados a través de una API no tenían por qué estar juntos, sino que podían residir en
sistemas remotos y simplemente tenían que poder comunicarse a través de internet, al fin y
al cabo, lo que estaban haciendo era intercambiar información.

Nota

Por ejemplo, cuando un cliente compra entradas a través de la página web

de un cine e introduce la información de su tarjeta de crédito, la web usa una
API para enviar dicha información de forma remota a otro programa que
verifica si los datos bancarios son correctos. Una vez que se confirma el
pago, la aplicación remota envía la información al sitio web del cine y le da
un OK, para que esta página emita las entradas.

Estos servicios de interacción entre sistemas a través de internet se denominaron servicios

web. Para que estos servicios pudieran entenderse entre sí se necesitaron estándares, y uno
de los más extendidos se denomina SOAP (Simple Object Access Protocol) y está basado en el
lenguaje XML. Por otro lado, aprovechando el protocolo HTTP surgió el estándar REST. Las
API REST permiten la utilización de servicios web disponibles a través de internet utilizando
el protocolo HTTP usando JSON siendo mucho más simple que usar SOAP. Actualmente
cientos de empresas usan API REST (Por ejemplo, Facebook y Twitter).
Un ejemplo claro de esto lo usa la empresa Fastway, dedicada al transporte de paquetes, y su
API REST. La API tiene dos funciones: permite calcular el coste de envío de un paquete y
permite conocer su estado de envío y entrega. Las empresas que utilizan los servicios de
Fastway seguramente tendrán sus sitios web y/o aplicaciones móviles. La API de Fastway les
permite dar un mejor servicio al incorporar en sus propios servicios online la posibilidad de
informar a sus clientes el coste de los envíos y conocer en qué situación se encuentran estos.
Es decir, los clientes de las empresas que usan de los Fastway no necesitan acceder al sitio
web de Fastway para obtener información de sus envíos. Para manipular los datos. HTTP nos
otorga los métodos con los cuales podemos operar: GET (para consultar datos), POST (para
crear datos), PUT (para modificar datos) y DELETE (para eliminar datos). Por ejemplo, para
listar los productos debemos escribir la siguiente URL: get/productos (lista todos los
productos) o get/productos/3333 (lista el producto cuyo código es 3333).

10
Capítulo 07: JavaScript Avanzado C.F.P Nro. 401 de San Martín

Nota

Otro ejemplo con APIs es la de Mercado Libre que se puede obtener en

tiempo real los datos de los artículos publicados en Mercado Libre en su
sitio web. Ejemplo de esto usando su api REST es
https://api.mercadolibre.com/sites/MLA/search?q=reloj

Existen múltiples maneras de enviar peticiones de red y obtener información de un servidor

en Javascript. El método fetch() es el más moderno y versátil. La API fetch utiliza promesas,
es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a los que pasaremos
una función que será invocada cuando se obtenga la respuesta o se produzca un error.

Nota

Una promesa es un objeto que representa un valor que puede que esté
disponible en estos momentos, en un futuro o que nunca lo esté. Una
promesa es asincrónica, lo que significa que necesita tiempo para
resolverse o finalizar mientras el motor de JS comienza a ejecutar otras
partes del código, a la espera del valor devuelto por la promesa.

La sintaxis básica del método fetch() es la siguiente:

fetch(URL_DEL_SERVIDOR)
.then(res => res.json())
.then(res => console.log(res));
.catch( err => console.error(err));

Hemos usado el método fetch() con la URL del servidor que queremos acceder, esta llamada
nos devuelve una promesa a la que pasaremos una función que será invocada cuando se
obtenga la respuesta o se produzca un error. El primer método then() usa el método json()
para convertir los datos de la respuesta de la petición en formato JSON, que es más fácil de
leer y trabajar.

Nota

JSON (JavaScript Object Notation) es un formato estructurado que sirve

para intercambio de datos ideal para usar con API REST. A menudo se usa
en lugar de XML, debido a su estructura ligera y compacta.

11