Javascript (JS)

¿Qué es Javascript?

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas así como del lado del servidor.

Contenido:

​​​​1. Introducción
​​​​2. Condicionales
​​​​3. Ciclos
​​​​4. Funciones
​​​​5. ECMAScript
​​​​6. Programación Asíncrona

1. Introducción

​​​​1. Sintaxis
​​​​2. Diferencia entre _var_, _const_ y _let_ 
​​​​3. Entendiendo variables (números, strings, null, undefined)
​​​​4. Concatenación de strings y template string 
​​​​5. Operaciones aritméticas
​​​​6. Operaciones Matemáticas complementarias
​​​​7. JSON y arreglos
​​​​8. Identificar tipo de dato (typeof)

1.1 Sintaxis

Todos los lenguajes de programación tienen una sintaxis asociada y Javascript no es la excepción, te mostraremos algunas reglas a seguir.

En Javascript existen variables a las cuales podemos asignar valores, las variables se definen con un nombre seguido de su valor. Los nombres de las variables deben comenzar con una letra y en minúsculas, no pueden comenzar con un número o símbolo, aunque puedes incluir números después de la primera letra. Aquí un ejemplo de una asignación de variable:
let foo = "bar";

Como podrás notar el símbolo = asigna el valor de la derecha al de la izquierda, en el ejemplo anterior, bar se asignó a la variable foo, en otras palabras, foo guarda el valor bar. Por otra parte, todas las sentencias de javascript deben terminar en ;

Los nombres de las variables no deben ser separadas por espacios o por un guión. En caso de que tu variable contenga dos o más palabras puedes separarlas con guión bajo, o en su defecto utilizar la notación Camel Case.
Aquí algunos ejemplos.

Actividades: Crear variables con tus datos personales como nombre, apellido y edad.

❌ let movie title = "Heroes";
❌ let movie-title = "Heroes";
✅ let movie_title = "Heroes";
✅ let movieTitle = "Heroes";

1.2 Diferencia entre var, const y let

Existen tres formas de crear variables en javascript, pero a su vez existen diferencias entre ellas. Comencemos con las variables definidas por el ECMAScript 6 (let y const).

Const

Las variables const no pueden cambiar su valor una vez que son definidas. Aquí un ejemplo:
✅ const pi = 3.1416;
❌ pi = 3.15;

Además, las variables const deben ser declaradas y definidas en la misma sentencia, no se puede realizar por separado.
❌ const pi;
❌ pi = 3.1416;

Let

Otra forma de crear variables es con let, con la cual sí podremos cambiar el valor de las variables posteriormente.
✅ let name = "John";
✅ name = "John Doe";

A diferencia de const las variables let puede ser declaradas y posteriormente definidas, no es necesario definirla en el momento de su declaración.

✅ let age = 20;
✅ let city;
✅ city = "Melbourne";

Var

Asimismo, con var se combinan tanto var y const, por lo que, las variables pueden definirse y cambiar su valor posteriormente. var era la única forma de crear variables antes de la introducción de const y let en ECMAScript 6.
✅ var fruit = "apple";
✅ fruit = "pineapple";

1.3 Tipo de variables

Javascript es un lenguaje de programación débilmente tipado, por lo que, no es necesario especificar el tipo de dato de cada variable. Sin embargo, existen 7 tipos de datos en Javascript

1. Cadenas (strings)

El primer tipo de dato son las cadenas (strings) con las cuales se pueden almacenar palabras o letras. Los valores de este tipo de variables se introducen entre comillas dobles " o comillas simples '. Aquí algunos ejemplos:
✅ let name = "John";
✅ let lastname = 'Doe';

Nota: Aunque puedes utilizar tanto comillas dobles como comillas simples, debes tener cuidado al combinar el uso de comillas ya que la comilla que abre debe de cerrar en algún punto, si quieres combinar el uso de las comillas puedes hacerlo con el símbolo \ que permite introducir una comilla dentro de comillas. Aquí algunos ejemplos:
✅ message = "can't wait";
✅ alert = 'this is "good"';
❌ advice = "ohana means "family" in Hawaiian";
✅ correct = "ohana means \"family\" in Hawaiian";

2. Números (numbers)

En javascript los números tienen su propio tipo de dato y al ser este un lenguaje débilmente tipado es irrelevante si se trata de un número entero o un real. Aquí algunos ejemplos:

let age = 12;
let average = 19.23;
let negative = -24;

3. Boolean

Otro tipo de dato es el boolean el cual puede tomar dos valores true(cierto) o false(falso). Aquí algunos ejemplos:

let isEmpty = true;
let areNew = false;

4. Nulo (null)

El tipo de dato null se utiliza para identificar que algo no tiene valor.

5. Undefined

El tipo de dato undefined es utilizado para indicar que una variable no ha sido definida con algún valor, aquí un ejemplo:

let fruit;
console.log(fruit);  //output undefined

6. Objetos (objects)

Un objeto (object) es un tipo de dato que almacena propiedades de tipo clave-valor, los datos dentro del objeto pueden ser de distintos tipos de datos. Aquí un ejemplo:

let person = {
    "name": "John",
    "lastname": "Doe",
    "age": 30,
    married: false
}

Para acceder a un valor dentro del objeto podemos hacerlo de alguna de estas dos formas:
console.log(person.name); //output "John"
console.log(person["lastname"]); //output "Doe"

Encadenamiento opcional (?)

En algunas ocasiones podrás notar que algunas propiedades pueden o no existir en los objetos, pero tu asumes que una propiedad existe en un objeto y javascript al darse cuenta de que no existe te dará un error al interpretar tu código. Para resolver esto existe algo llamado encadenamiento opcional el cuál nos ayudará a determinar si una propiedad existe, de otra forma lo tomará como undefined. Aquí un ejemplo:

const person1 = {
    name: "John",
    lastname: "Doe",
    "age": 31,
    city: "Melbourne"
}

const person2 = {
    name: "Mike",
    lastname: "Dean",
    "age": 41
}

let city1 = person1.city;
let city2 = person2.city;
console.log(city1); //output Melbourne
console.log(city2); //error

Al ejecutar el código anterior, obtendremos un error debido a que la propiedad city no existe en el objeto person2. Para evitar el error, utilizaremos encadenamiento opcional para resolverlo con la ayuda del símbolo ?. Aquí un ejemplo:

const person1 = {
    name: "John",
    lastname: "Doe",
    "age": 31,
    location: {
        city: "Melbourne",
        country: "Australia",
        continent: "Oceania"
    }
}

const person2 = {
    name: "Mike",
    lastname: "Dean",
    "age": 41
}

let city1 = person1?.location?.city;
let city2 = person2?.location?.city;
console.log(city1); //output Melbourne
console.log(city2); //output undefined

7. Símbolo (symbol)

Symbol es un tipo de datos cuyos valores son únicos e inmutables. Dichos valores pueden ser utilizados como identificadores (claves) de las propiedades de los objetos (objects). Aquí un ejemplo:
let key = new Symbol("foo");

1.4 Concatenación de strings y template string

Anteriormente, vimos el tipo de dato string, pero algo que no hemos abordado es la posibilidad de combinar dos variables de tipo string para formar otra como una oración o párrafo. Para ello, tenemos dos opciones:

Concatenación

Para concatenar cadenas (strings) podemos hacerlo mediante la unión con el símbolo +.

Caso de uso

Imagina que se te ha pedido mostrar un mensaje en consola para darle la bienvenida a un usuario. Solución:

let name = "John"
let message = "Bienvenido " + name;
console.log(message); //output "Bienvenido John"

Por otra parte es posible concatenar variables de tipo cadena (string) y números (number), pero debemos tomar en cuenta que al final la variable a la que se esta asignando la concatenación será una cadena (string). Ejemplo:

let name = "John"
let age = 30
let message = "Mi nombre es " + name + " y tengo " + age " años";
console.log(message); //output "Mi nombre es John y tengo 30 años"

Nota: Es relevante saber que al concatenar strings y números, los números se convertirán en strings. Se debe tener cuidado al concatenar números con strings. Aquí un ejemplo:

let duration = 5;
let currentYear = "2021";
let nextRevision = currentYear + duration;
console.log(nextRevision); //output "20215"

Nota: Por otra parte se debe tener cuidado al concatenar números (numbers) y cadenas(strings) con undefined y null debido a que el resultado de concatenar puede ser undefined o NaN(Not a Number) en el caso de los números. Aquí ejemplos:

let myAge = 30;
let myBirthdate;
let currentYear = myBirthdate + myAge;
console.log(myAge); //output 30
console.log(myBirthdate); //output undefined
console.log(currentYear); //output NaN

En el ejemplo anterior la variable myBirthdate fue declarada pero no se le asigno ningún valor, por lo que, su valor por defecto es undefined. Al momento de concatenarlo con la variable myAge que es un número, da como resultado NaN.

Otro ejemplo:

let name = "John";
let lastname;
let fullName = name + ' ' + lastname;
console.log(name); //output name
console.log(lastname); //output undefined
console.log(fullName); //output "John undefined"

En el ejemplo anterior, la variable lastname fue declarada pero no se le asigno ningún valor, por lo que, su valor por defecto es undefined. Al concatenar su valor con la variable name que es un string, da como resultado un string que tiene la palabra undefined.

Asimismo, se debe tener precaución al concatenar con valores nulos (null) debido a que ocurre una situación similar a la de undefined. Aquí algunos ejemplos:

let myAge = 30;
let myBirthdate = null;
let currentYear = myBirthdate + myAge;
console.log(myAge); //output 30
console.log(myBirthdate); //null
console.log(currentYear); //output 30

Al concatenar una variable null con un número, el resultado toma solo la variable que tiene valor.

Por otra parte para las cadenas (strings):

let name = "John";
let lastname = null;
let fullName = name + ' ' + lastname;
console.log(name); //output name
console.log(lastname); //output null
console.log(fullName); //output "John null"

Se puede apreciar que al igual que con los undefined cuando se concatena con null el valor se muestra tal cual en la cadena string.

Template String

Template string es otra forma de concatenar variables de tipo string. Con template string se formará un string sin la ayuda del símbolo +, solo debemos encerrar nuestra oración o párrafo con el símbolo ` y colocar las variables con la forma ${nombreDeLaVariable}.

Caso de uso

Imagina que quieres realizar una oración con tus datos, desplegando tu nombre y tu apellido:

let name = "John";
let lastname = "Doe";
let message = `Hola mi nombre es ${name} y mi apellido es ${lastname}`;
console.log(message); //output "Hola mi nombre es John y mi apellido es Doe"

Nota: Debido a que template string es una forma más legible de concatenar strings, utilizaremos esa forma en todo el curso.

1.5 Operaciones aritméticas

Javascript permite realizar operaciones aritméticas con el tipo de dato number, a continuación te mostramos algunas operaciones que puedes realizar en javascript.

Suma

Para realizar una suma en javascript debemos utilizar el símbolo + para efectuar la suma. A continuación un ejemplo:

let sum = 5 + 3:
console.log(sum); //output 8

Asimismo, podemos realizar sumás mediante el operador += con el cuál añadiremos un valor a una variable. Aquí un ejemplo:

let sum = 5;
sum += 3;
console.log(sum); //output 8

Esta notación puede aplicar a otras operaciones aritméticas.

En javascript es posible aumentar el valor de una variable a razón de una unidad. Para ello nos apoyamos de los símbolos ++. Aquí un ejemplo:

let myNumber = 5;
myNumber++;
console.log(myNumber); //output 6

Resta

Javascript permite realizar restas usando el símbolo -. Aquí un ejemplo:

let substraction = 5 - 3;
console.log(substraction) //output 2

Asimismo:

let substraction = 5;
substraction -= 3;
console.log(substraction) //output 2

Por otra parte, al igual que con la suma es posible decrementar el valor de un número a razón de una unidad, con ayuda de los símbolos --. Por ejemplo:

let myNumber = 5;
myNumber--;
console.log(myNumber); //output 4

Multiplicación

Para realizar una multiplicación debemos utilizar el símbolo * para multiplicar todos los números. Por ejemplo:

let mult = 5 * 3;
console.log(mult) //output 15

Asimismo:

let mult = 5;
mult *= 3;
console.log(mult); //output 15

División

Por otra parte, tenemos la división que se puede efectuar con la ayuda del símbolo /. Aquí un ejemplo:

let division = 20 / 4;
console.log(division); //output 5

Asimismo:

let division = 20;
division /= 5;
console.log(division); //output 5

Potencias

Javascript también nos da la posibilidad de calcular las potencias de un número. Existen dos formas para calcular la potencia de un número, uno de ellos es mediante los símbolos ** donde antes de los símbolos se coloca la base y despues de los símbolos el exponente. Aquí un ejemplo:

let pot = 5 ** 3;
console.log(pot); //output 125

Otra forma de calcular una potencia de un número es mediante la clase Math y el método pow, como parámetro del método pow proporcionamos la base y la potencia. Aquí un ejemplo:

let pot = Math.pow(5,3);
console.log(pot); //output 125

Casting

Como mencionamos anteriormente, en algunas ocasiones los números pueden estar almacenados como cadenas (strings) y esto complicaría la realización de nuestras operaciones. Para evitar esta situación podemos hacer un casting de las variables de tipo string para convertirlas en number con la función parseInt() y viceversa con la función toString(). Aquí un ejemplo:

let year = "2021";
year = parseInt(year);
console.log(year); //output 2021
console.log(typeof(year)); //output number

Por otra parte para convertir números a cadenas:

let age = 20;
age = age.toString();
console.log(age); //output "20"
console.log(typeof(age));

1.6 Otras Operaciones Matemáticas

​​​​1.- SRQT
​​​​2.- Min ,MAX
​​​​3.- Random

SQRT

La clase Math incluye otro método para calcular la raíz cuadrada de un número, se trata del método sqrt() en el cuál se le pasa como parámetro el número del cual queremos calcular la raíz cuadrada. Aquí un ejemplo:

let myNumber = 25;
let squareRoot = Math.sqrt(myNumber);
console.log(squareRoot); //output 5

Min y Max

Min y Max son otros métodos que nos proporciona la clase Math para obtener el valor mínimo y el valor máximo entre varios números. Aquí un ejemplo:

let min = Math.min(4,5,2,12);
let max = Math.max(4,5,2,12);
console.log(min); //output 2
console.log(max); //output 12

Random

Random es un método de Math que nos otorga la posibilidad de obtener un número aleatorio entre 0 y 1. Aquí un ejemplo:

let random = Math.random();
console.log(random);

Actividades: Realizar una sentencia con template string de presentación con sus datos personales como nombre, edad y ciudad. Realizar cálculos matemáticos para obtener su edad mediante su año de nacimiento y el año actual. Crear un objeto con sus datos, después crear objetos con datos de sus compañeros.

1.7 JSON y Arreglos

JSON

Javascript proporciona un formato de datos proveniente de un objeto (object). Se trata de Javascript Object Notation (JSON). Este formato es utilizado para el intercambio de datos entre aplicaciones. La sintaxis de un JSON es la siguiente:

let myJSON = {
    "name": "John",
    "lastname": "Doe",
    "age": 23
}

Como podemos apreciar a diferencia de un objeto, las claves van encerradas entre comillas dobles, de hecho, en un JSON solo se pueden usar comillas dobles para los strings.
Para acceder a una propiedad del JSON se puede hacer mediante el punto . o con la notación de corchetes []. Aquí unos ejemplos:

let myJSON = {
    "name": "John",
    "lastname": "Doe",
    "age": 23
}
console.log(myJSON.name); //output "John"
console.log(myJSON["lastname"]); //output "Doe"

Arreglos

Un arreglo (array) es una estructura de datos que contiene una lista de datos los cuales normalmente son del mismo tipo de dato y que contienen una propiedad fundamental que es su índice, con el cual puede ser identificado un elemento dentro de un arreglo (array). Los arreglos también son denominados vectores o listas.
Aquí un ejemplo de un arreglo:

let myArray = ["John", "Mike", "Chris"];
let myArray2 = [10, 20, 4, 32];

Para acceder a un elemento de un arreglo debemos proporcionar su índice, una característica particular de los arreglos es que los índices comienzan desde 0. Aquí un ejemplo para obtener un elemento del arreglo:

let myArray = ["John", "Mike", "Chris"];
let myArray2 = [10, 20, 4, 32];

let getName = myArray[0];
let getNumber = myArray2[2];

console.log(getName); //output "John"
console.log(getNumber); //output 4

Del mismo modo, es posible obtener la longitud de un arreglo (el número de elementos que posee un arreglo), para ello accedemos a su propiedad length. Aquí un ejemplo de ello:

let myArray = ["John", "Mike", "Chris"];
let myArray2 = [10, 20, 4, 32];

console.log(myArray.length); //output 3
console.log(myArray2.length); //output 4

1.8 Identificar tipos de datos (typeof)

En javascript es posible obtener el tipo de dato de una variable. mediante la palabra reservada typeof, delante de la palabra reservada introduciremos la variable de la cual queremos obtener el tipo de dato. Aquí algunos ejemplos:

let message = "This is a string";
console.log(typeof message); //output string

let myNumber = 5;
console.log(typeof myNumber); //output number

Por otra parte, se debe tener precaución al evaluar el tipo de dato de un nulo null ya que javascript lo define como un objeto (object). Ejemplo:

let myNull = null;
console.log(typeof myNull); //output object

2. Comparaciones

​​​​1. Operadores de comparación
​​​​2. Sentencia if
​​​​3. Operadores relacionaes
​​​​4. Operadores lógicos
​​​​5. Sentencia else
​​​​6. Sentencia else if
​​​​7. switch

2.1 Operadores de comparación (Condicionales)

Javascript nos proporciona sentencias para comparar valores y con base a eso ejecutar instrucciones. En javascript existen diferentes sentencias para comparar, por ejemplo if, else y switch.

Para comenzar te mostraremos un diagrama de flujo para entender el proceso de un condicional:

2.2 Sentencia if

Con la sentencia if tenemos la posibilidad de comparar valores, se pueden comparar 2 o más valores y en caso de que la condición sea verdadera se ejecutará el código dentro del if. Aquí un ejemplo:

SI condición ENTONCES:
    instrucción

Caso de uso

Imagina que se te ha pedido un programa para determinar si una persona puede votar en las próximas elecciones con base a su edad:

edad = 30
SI edad MAYOR QUE 18:
    puede votar

El código en javascript sería del ejemplo anterior es el siguiente:

let myAge = 30; 
let canVote;
if(myAge > 18) {
    canVote = true;
}
console.log(canVote); //output true

Asimismo podemos tener sentencias if anidados, es decir, un if dentro de otro if.

Caso de uso

Imagina que se te ha pedido un programa para determinar si una persona puede obtener su licencia de conducir. Las condiciones para obtener la licencia es que tengan más de 18 años y que sus padres le otorguen el permiso para sacar su licencia:

edad = 19
SI edad MAYOR QUE 18:
    SI tengo permiso de sus padres:
        puede tener licencia de conducir

El código en javascript es el siguiente:

let myAge = 19;
let permission = true;
let canObtainLicense;
if(myAge > 17) {
    if(permission === true) {
        canObtainLicense = true;
    }
}

Ahora como podrás darte cuenta, para decidir si las instrucciones de un if se ejecutan o no, nos apoyamos de operadores. Existen dos tipos de operadores: los operadores relacionales y los operadores lógicos que veremos a continuación.

2.3 Operadores relacionales

Los operadores relacionales son símbolos que se usan para comparar dos valores. Si el resultado de la comparación es correcto la expresión considerada es verdadera, en caso contrario es falsa.

Mayor que (>)

Este símbolo nos ayuda a decidir si un valor es mayor que otro. Aquí un ejemplo:

let myAge = 17;
let friendAge = 15;
console.log(myAge > friendAge); //output true

Menor que (<)

Este símbolo nos ayuda a determinar si un valor es menor que otro. Aquí un ejemplo:

let homeArea = 20;
let cityArea = 100;
console.log(homeArea < cityArea); //output true

Igual que (===)

Este símbolo nos ayuda a determinar si un valor es igual a otro. Aquí un ejemplo:

let myCity = "Los Angeles";
let friendCity = "Los Angeles";
console.log(myCity === friendCity); //output true

Diferente que (!==)

Este símbolo nos ayuda a definir si un valor es diferente de otro. Ejemplo:

let dadName = "John";
let sonName = "Mike";
console.log(dadName !== sonName); //output true

Mayor o igual (>=)

En javascript podemos utilizar los operadores relacionales mayor que e igual que al mismo tiempo. Aquí un ejemplo:

let myAge = 18;
let mandatoryAge = 18;
console.log(myAge >= mandatoryAge); //output true

Menor o igual (<=)

Al igual que con mayor o igual que, se puede utilizar los operadores menor qye e igual al mismo tiempo.
Aquí un ejemplo:

let myMoney = 10;
let chips = 12;
console.log(myMoney <= chips); //output true

2.4 Operadores lógicos

En ejemplos anteriores observamos que podríamos tener un if dentro de otro if. Pero a decir verdad, esto se podría evitar con los operadores lógicos. Los operadores lógicos pueden evaluar más o dos valores y a partir de ahí determinar un valor final.

And (&&)

El operador lógico and evalua dos o más valores y en caso de que ambos sean verdaderos (true) retorna verdadero, en caso contrario retorna falso. Aquí un ejemplo:

let andOne = true && true;
let andTwo = true && false;
let andThree = false && false;
console.log(andOne); //output true
console.log(andTwo); //output false
console.log(andThree); //output false

Aplicando esto a una sentencia if:

let myAge = 18;
let permission = true;
let canHaveLicense;
if(myAge >= 18 && permission === true) {
    canHaveLicense = true;
}

Or (||)

El operador lógico or evalua dos o más valores y en caso de que uno de los valores sea verdadero (true) se retornará verdadero, en caso contrario devolverá falso. Aquí un ejemplo:

let orOne = true || true;
let orTwo = true || false;
let orThree = false || false;
console.log(orOne); //output true
console.log(orTwo); //output true
console.log(orThree); //output false

Aplicando esto en un if:

let haveHomework = false;
let isNight = true;
let canSleep;
if(haveHomework === true || isNight === true) {
    canSleep = true;
}

Not (!)

El operador lógico not niega el valor proporcionado, es decir si se le proporciona el valor true retornará falso y si se le proporciona false retornará true. Aquí un ejemplo:

let notOne = !true;
let notTwo = !false;
console.log(notOne); //false
console.log(notTwo); //true

2.5 Sentencia else

Otra sentencia que podemos utilizar al comparar datos con un if es el else el cual nos proporciona una vía alterna en caso de que la condición del if no se haya cumplido. Es decir, si la comparación del if no es válida (cierta), se ejecutan las sentencias dentro del else.

Caso de uso

Se te ha pedido un programa para determinar si es fin de semana o no con base al día de la semana proporcionado en número:

weekDay = 4
SI weekDay > 5 ENTONCES:
    es fin de semana
EN OTRO CASO:
    no es fin de semana

El código en javascript es el siguiente:

let weekDay = 4;
let isWeekend;
if(weekDay > 5) {
    isWeekend = true;
} else {
    isWeekend = false;
}
console.log(isWeekend); //output false;

2.6 Sentencia else if

Hasta ahora hemos observado las sentencias if y la sentencia else, pero qué pasaría si tenemos más de una alternativa a evaluar, para ello, se utiliza la sentencia else if la cual provee un if adicional en caso de que la condición del primer if no se cumpla.

Caso de Uso

Imagina que se te ha pedido determinar si es día, tarde o noche según la hora actual del día:

hour = 13
SI hour MAYOR QUE 0 y hour MENOR QUE 12:
    es de día
EN OTRO CASO SI hour MAYOR O IGUAL QUE 12 y hour MENOR QUE 19:
    es de tarde
EN OTRO CASO:
    es de noche

A continuación el código en Javascript:

let hour = 13;
let dayTime;
if(hour > 0 && hour < 12) {
    dayTime = "Morning";
} else if(hour >= 12 && hour < 19) {
    dayTime = "Afternoon";
} else {
    dayTime = "Night";
}

Nota: Se pueden tener tantos else if sean necesarios.

Actividades: Realizar un condicional que decida si una persona es mayor de edad o no, en caso de que sea menor de edad mostrar un mensaje de bienvenida, en caso contrario mostrar un mensaje de despedida.

2.7 Switch

La sentencia switch es un tipo de condicional el cual se basa en casos que se pueden cumplir para la sentencia a evaluar. En el switch se describen casos específicos.

Esta es la sintaxis de un switch:

switch(evaluación) {
    case 1: 
        instrucción...
        break;
    case 2:
        instrucción...
        break;
    case n:
        instruccion...
        break;
    default: 
        instruccion...
        break;
}

Caso de estudio

Se te ha pedido determinar el día de la semana con base al número de día proporcionado por el método getDay() de la clase Date:

day = 4
EVALUA day:
    CASO 0:
        es Domingo
        fin
    CASO 1:
        es Lunes
        fin
    CASO 2:
        es Martes
        fin
    CASO 3:
        es Miércoles
        fin
    CASO 4:
        es Jueves
        fin
    CASO 5:
        es Viernes
        fin
    CASO 6:
        es Sábado
        fin
    CASO POR DEFECTO:
        no encontrado
        fin   

Aquí el código en javascript:

let date = new Date();
let day = date.getDay();
let dayInWords;
switch(day) {
    case 0:
        dayInWords = "Sunday";
        break;
    case 1:
        dayInWords = "Monday";
        break;
    case 2:
        dayInWords = "Tuesday";
        break;
    case 3:
        dayInWords = "Wednesday";
        break;
    case 4:
        dayInWords = "Thursday";
        break;
    case 5:
        dayInWords = "Friday";
        break;
    case 6:
        dayInWords = "Saturday";
        break;
    default:
        dayInWorks = "Not found";
        break;
}
let message = `Hello today is ${dayInWords}`;

Break

En el caso del switch un elemento relevante es que la palabra break indica que el caso ha terminado, en caso de que se omita el break se ejecutará automáticamente el siguiente caso. Aquí un ejemplo:

let month = "June";
let timeYear;
switch(month) {
    case "December":
    case "January":
    case "February":
        timeYear = "Winter";
        break;
    case "March":
    case "April":
    case "May":
        timeYear = "Spring"
        break;
    case "June":
    case "July":
    case "August":
        timeYear = "Summer";
        break;
    case "September":
    case "October": 
    case "November":
        timeYear = "Fall"
        break;
    default:
        timeYear = "Not found";
}

Actividades: Realizar un switch para determinar si una persona es niño, joven, adulto o anciano.

3. Ciclos

Los ciclos en programación son bloques de instrucciones que se repiten mientras se cumpla una condición determinada.

En javascript existen diferentes tipos de ciclos que te mostraremos a continuación.

​​​​1. For
​​​​2. For in
​​​​3. For of
​​​​4. While

3.1 For

El ciclo for tiene la siguiente sintaxis:

for(inicialización; condición de paro ; Actualización) {
    bloque de instrucciones...
}

Ahora expliquemos cada elemento de la sintaxis. El primer elemento del for es la inicialización, el ciclo for contiene una variable de control para determinar cuando terminar el ciclo, ya que de otra forma, el ciclo se realizaría de forma infinita. En la inicialización se declara nuestra variable de control. Por convención, las variables de control se nombran como i, j, k.

El segundo elemento es la condición de paro, esta condición determina hasta cuando se va a ejecutar el ciclo for, mientras se cumpla la condición las sentencias dentro del for se ejecutarán, en caso contrario el for se detendrá.

El tercer término es la actualización, este término actualiza la variable de control para incrementarla o decrementarla según sea el caso.

Caso de uso

Se te ha pedido implementar un código que muestre un mensaje tantas veces lo pida el usuario:

messages = 5
counter = 0
MIENTRAS counter < messages:
    muestra mensaje
    incrementa contador en uno

Aquí un ejemplo de un for:

const messages = 5;
for(let i=0; i < messages; i++) {
    console.log('Bienvenido');
}

Nota: En el ejemplo anterior se declaro la variable de control en el propio for, pero también se puede declarar la variable de control antes del for. Por ejemplo:

let k;
for(k=2; k<=10; k+=2) {
    console.log(k);
}

El ejemplo anterior muestra en consola los números pares del 0 al 10.

3.2 For in

Otro ciclo que podemos encontrar en javascript es el ciclo for in, este ciclo se utiliza para los objetos (objects) para iterar sobre todos los elementos del objeto. La sintaxis es la siguiente:

for(let x in object) {
    instrucciones...
}

Caso de uso

Teniendo los datos de un usuario almacenados en un objeto (object) deberas mostrar en consola todos los datos del usuario, aún cuando se agreguen nuevos datos.

person = {
    name: "John",
    lastname: "Doe",
    age: 15
}

MIENTRAS person TENGA DATOS:
    muestra los datos en consola

Aquí el código en javascript:

let person = {
  name: "John",
  lastname: "Doe",
  age: 15
}

for(let i in person){
  console.log(`${i}: ${person[i]}`);
}

Actividades: Realizar un ciclo para formar un triangulo de asteriscos con un for

3.3 For of

Otro ciclo que podemos encontrar en javascript es el for of, este ciclo se utiliza para recorrer todos los elementos de un arreglo(array) o de una cadena (string). Su sintaxis es la siguiente:

for (let x of array) {
    instrucciones...
}

Caso de uso

Dado un arreglo de números con 10 datos, deberás mostrar todos los números en consola:

numbers = [1, 2, 6, 8, 9, 5, 7, 89, 2];
MIENTRAS numbers TENGA NUMEROS:
    muestra número

Aquí el código en javascript:

const numbers = [1,2,6,8,9,5,7,89,2];
for (const k of numbers){
    console.log(k);
}

3.4 While

El ciclo while es un ciclo muy similar al ciclo for pero en este solo se declara la condición de paro, es decir, mientras se cumpla la condición de paro se ejecutarán las instrucciones dentro del while, en caso contrario se detendrá.
Aquí la sintaxis del while:

while(condicionDeParo) {
    instrucciones...
}

Caso de uso

Se te ha pedido un programa mediante el cuál se pueda calcular los números al cuadrado del 1 al 5.

comienzo = 1;
MIENTRAS comienzo MENOR QUE 5:
    calcular cuadrado de comienzo
    aumentar comienzo en uno

Aquí el código en javascript:

let i = 1;
while(i<=5) {
    console.log(i*i);
    i++;
}

Actividades: Realizar un foreach de un arreglo de objetos y mostrar una sentencia de interpolación.

4. Funciones (Métodos)

​​​​1. ¿Qué es una función?
​​​​2. Scope de variables

4.1 ¿Qué es una función?

Una función(function) son una serie de instrucciones que se ejecutan y que pueden o no retornar valores. Las funciones reciben parámetros que serán utilizados dentro de la función.
Aquí la sintaxis de una funcion:

function nameFunction(arg1, arg2, arg3...) {
    instrucciones...
    return value;
}

Caso de uso

Se te ha pedido implementar una función en la cual calculas la potencia de un número dados su base y su altura:

function potencia(base, exponente) {
    let pot = base**exponente;
    return pot;
}
console.log(potencia(5,2)); //output 25

La función anterior calcula la potencia de un número, recibiendo como parámetro la base y el exponente a calcular, dentro de la función se calcula la potencia y se retorna el valor mediante el return. Cabe destacar que el return es opcional.

4.2 Scope de las variables

El scope de una variable puede ser de dos tipos: global y local. Cuando una variable es de alcance global, la variable puede ser accedida desde cualquier parte del código. Por otra parte, una variable de alcance local, solo puede ser accedida exclusivamente en la función donde se declara.
Aquí algunos ejemplos:

Global Scope

const pi = 3.1416;
function circleArea(radius) {
    let radiusSquare = radius**radius;
    let area = pi*radiusSquare;
    return area;
}
console.log(pi); //output 3.1416

En la función anterior la variable pi puede ser accedida tanto dentro de la función como afuera de la función.

Local Scope

function circleArea(radius) {
    const pi = 3.1416;
    let radiusSquare = radius**radius;
    let area = pi*radiusSquare;
    return area;
}
console.log(pi); //undefined

En el ejemplo anterior la variable pi solo puede ser accedida en la función, fuera de ella la variable no existe.

4. ECMAScript 6

​​​​1. Que es ECMAscritpt
​​​​2. Arrow functions 
​​​​3. Funciones para arreglos  

4.1 ¿Qué es ECMAScript 6?

ECMA Script se refiere al estándar internacional de javascript, a partir del 2015 se encarga de regir como debe ser interpretado y funcionar el lenguaje JavaScript, siendo este (JS – JavaScript) interpretado y procesado por multitud de plataformas.
Actualmente nos encontramos en la versión 6 del ECMAScript en el cual se añadieron nuevas funciones relevantes.

4.2 Arrow Functions

Anteriormente, hemos descubierto las funciones (functions) en javascript pero en la actualización de ECMAScript 6 se añadio nueva forma de escribir funciones en javascript con la ayuda del símbolo =>, estás son denominadas funciones flecha (arrow function). Las funciones flechas pueden ser declaradas como variables. Aquí un ejemplo:

const exponential = (base, exp) => base**exp;
console.log(exponential(5,2)); //output 25

const circleArea = (radius) => {
    const pi = 3.1416;
    return pi*exponential(5,2);
}
console.log(circleArea(5)); //output 78.54

4.3 Funciones para arreglos

Con el lanzamiento del ECMA SCript 6 se añadieron algunas funciones asociadas a los arreglos para manipular sus datos de una forma más sencilla. Aquí te mostraremos algunas funciones:

Includes

La función includes determina si un arreglo contiene determinado valor. En caso de que un arreglo contenga el valor a evaluar regresará true en caso contrario retornará false. Aquí un ejemplo:

let nums = [2, 5, 9, 11, 23, 45];
let includesTwo = nums.includes(2);
console.log(includesTwo); //output true

Some

Otra función para arreglos es some la cual determina si un arreglo cuenta con un elemento que cumpla una determinada condición, esta función retornará true o false. Aquí un ejemplo:

let nums = [2, 5, 9, 11, 23, 45];
let someoneCanVote = nums.some(num => num > 18);
console.log(someoneCanVote); //output true

Filter

La función filter realiza un filtro en el arreglo para retornar otro arreglo con aquellos elementos que cumplan las carácteristicas de la condición en el filtro. Aquí un ejemplo:

let nums = [2, 5, 9, 11, 23, 45];
let greatestTen = nums.filter(num => num > 10);
console.log(greatestTen); //output [11, 23, 45];

Reduce

La función reduce realiza un recorrido por todos los elementos de un arreglo con la finalidad de retornar un solo valor, ese valor puede ser la suma, la resta, división o multiplicación de los valores del arreglo. Para ello se cuenta con dos variables como parámetros de la función, el total y el currentValue. Aquí un ejemplo:

let nums = [1, 2, 3, 4 , 5];
let sum = nums.reduce((total, currentValue) => total + currentValue);
console.log(sum); //output 15

En el ejemplo anterior, realizamos la suma de todos los elementos del arreglo.

Sort

La función sort permite ordernar un arreglo de cadenas (strings) o de números (numbers) de a-z o de menor a mayor, según sea el caso. Aquí un ejemplo:

const letters = ['e', 'y', 'c', 'j', 'a'];
letters.sort();
console.log(letters); //output [ 'a', 'c', 'e', 'j', 'y' ]

Asimismo, para los numeros debemos indicar si se quiere realizar de menor a mayor o de mayor a menor con parámetros en la función:

const nums = [34, 23, 4, 32, 12, 8];
nums.sort((a,b) => a-b); //sorted asc
console.log(nums); //output [ 4, 8, 12, 23, 32, 34 ]
nums.sort((a,b) => b-a); //sorted desc
console.log(nums); //output [ 34, 32, 23, 12, 8, 4 ]

Reverse

Otra función que nos otorga el ECMAScript 6 es reverse el cual cambia el orden de los elementos del arreglo al inverso. Aquí un ejemplo:

let names = ['John', 'Chris', 'Robert', 'Mike'];
names.reverse();
console.log(names); //output [ 'Mike', 'Robert', 'Chris', 'John' ]

Actividades: Recorrer un arreglo de objetos con las diferentes funciones de filter, map, entre otros.

Clases a impartir: 2 clases

5. Programación Asincróna

​​​​1.- setTimeout  
​​​​2.- SetInterval
​​​​3. Métodos HTTP (GET, POST, PUT, DELETE)
​​​​4. Async
​​​​5. Await
​​​​6. Promises
​​​​7. Fetch

5.1 setTimeout

Los timing events son eventos que pueden ejecutarse después de cierto tiempo, dentro de los procesos de JS quedan en un bloque y no dependen tanto del scope.
Ejemplo:

​setTimeout(function () {
​       console.log("hola desde un evento de tiempo")
​   }, 3000);

5.2 SetInterval

SetInterval hace que una funcion se repita cada x tiempo, recordemos que una función solo ejecuta un bloque de instrucciones, a continuacion un ejemplo:

​let i = 0 
setInterval(function(){ 
​   console.log(i)
​   return i++
},500)

Este es un contador ascendente que muestra el valor de un número secuencialmente cada 0.5 segundos.

Actividad: Utilizando los eventos de tiempo , crea un contador que se ejecute n veces durante un periodo de tiento, cuando finalice se mostrará un mensaje de completado.

5.3 Métodos HTTP

Los métodos HTTP son los que se ejecutan desde tu navegador hacia un servidor, son peticiones para realizar algunas tareas, a continuación se describirán los métodos HTTP más relevantes.

GET

El método GET se emplea para leer una representación de un recurso. En caso de respuesta positiva (200 OK), GET devuelve la representación en un formato concreto: HTML, XML, JSON, entre otros. En caso de respuesta negativa devuelve 404 (not found) o 400 (bad request). Por ejemplo, en la carga de una página web, primero se carga la url solicitada.

POST

Aunque se puedan enviar datos a través del método GET, en muchos casos se utiliza POST por las limitaciones de GET. Con el método POST es posible enviar datos a un servidor en diversos formatos como JSON, XML, archivos multimedia, entre otros. En caso de respuesta positiva devuelve 201 (created). Los POST requests se envían normalmente con la ayuda de formularios.

PUT

El método PUT se utiliza normalmente para actualizar contenidos, aunque también es posible crearlos con este método. En caso de éxito devuelve 201 (created y en caso de que la acción haya creado un elemento) o 204 (no response), si el servidor no devuelve ningún contenido.

DELETE

El método DELETE simplemente elimina un recurso identificado en la URI. Si se elimina correctamente devuelve 200 junto con un body response, o 204 sin body.

Actividad: Implementar una función asíncrona que realice fetch a una API pública.

5.4 Async

Son un tipo de funciones que se ejecutan en segundo plano, son similares a los timming events pero estas generalmente se usan con métodos HTTP, hacen una petición y reciben una respuestas 2XX en caso de que sea satisfactoria y 4XX en caso de error.
Ejemplo:

async function f() {
  return 1;
}

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

5.5 Await

Await se utiliza mucho con funciones async, estas esperan la respuesta de una promesa que se este ejecutando.
Ejemplo:

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

5.6 Promises

Una Promesa (promise) es un proxy para un valor no necesariamente conocido en el momento que es creada la promesa. Permite asociar manejadores que actuarán asincrónicamente sobre un eventual valor en caso de éxito, o la razón de falla en caso de una falla. Esto permite que métodos asíncronos devuelvan valores como si fueran síncronos: en vez de inmediatamente retornar el valor final, el método asíncrono devuelve una promesa de suministrar el valor en algún momento en el futuro (MWD).

Ejemplos:

myPromise.then(response => {
    console.log(response);
});

Con la ayuda de then() podemos acceder a los datos proporcionados por la promesa. Asimismo, existe otro método asociado a promesas para identificar errores en las promesas, el método catch(). A continuación un ejemplo:

myPromise.then(response => {
    console.log(response);
}).catch(error => {
    console.error(error);
});

5.7 Fetch

Javascript provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red. Fetch funciona en base a métodos HTTP que realizan peticiones para obtener o enviar solicitudes HTTP y como resultado de esas solicitudes recibir datos.

La sintaxis del método fetch es el siguiente:

fetch(url, options)

El primer parámetro url recibe la dirección url a la que deseas enviar la petición HTTP.
Por otro lado, el segundo parámetro es options el cual recibe un objeto (object) con opciones adicionales como el tipo de petición, seguridad, opciones de cache, entre otros. Aquí un ejemplo de options:

let options = {
    method: <httpMethod>,
    mode: <cors || no-cors || same-origin>,
    cache: <cache || no-cache || reload || force-cache>,
    credentials: <same-origin || include || omit>,
    headers: {
        'Content-Type': <application/json || application/x-www-form-urlencoded>
    },
    body: <dataToSend> //optional just in POST y PUT
}

Asimismo, fetch retorna una respuesta como una promesa, que puede ser accedida con el método .then(), con ese método podemos recibir la respuesta y realizar instrucciones para manipular la respuesta.
Aquí un ejemplo de fetch:

let options = {
  method: 'GET',
  mode: 'cors',
  cache: 'no-cache',
  credentials: 'omit',
  headers: {
    'Content-Type': 'application/json'
  }
}
let res = fetch('https://jim.drakkode.dev/countries', options)
.then(res => res.json())
.then(json => console.log(json));

En el ejemplo anterior se realizo una petición GET para obtener los datos de los países, posteriormente en el método then() convertimos la respuesta a JSON para procesarla en otro then() y finalmente mostrar en consola la respuesta.