# 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](https://es.wikipedia.org/wiki/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.<br>
**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.