Javascript II

Recap

• Cada Instrucción en JS es una declaración.
• Las Variables sirven para almacenar datos.
• Tipos de datos: Strings, Numbers, Booleans, Undefined, null.
• Las funciones son una serie de declaraciones reutilizables.
• Las funciones pueden aceptar cualquier número de argumentos con nombre.
• La palabra clave return devuelve un valor a quien sea que la llame.

• Las variables en JS tienen un "scope", local o global.

function celsiusToFarenheit(celsius){
    var celsiusToF = celsius * 1.8 +32;
    return celsiusToF;
}

var farenheit;
var celsius = 0;
farenheit = celsiusToFarenheit(celsius);
console.log(farenheit); //  => 32
console.log(celsius + '°C es ' + farenheit + '°F'); // => 0°C es 32°F
console.log(celsiusToF); // => ReferenceError: Can't find variable: celsiusToF

La declaración if

Usa if para decirle a JS que declaración ejecutar basado en una condición

if (condition) {
  // la declaración se ejecuta
}

var x = 5;

if (x > 0) {
  console.log('x es un numero positivo!');
}

Operadores de Comparación

Estos operadores se usan para comparar dos valores usando: igualdad, desigualdad, o diferencia.

var myAge = 28;

+----------+----------------------+-------------------------------+
| Operador | Significado          | Expresiones Verdaderas (true) |
+----------+----------------------+-------------------------------+
| ==       | Igualdad             | myAge == 28                   |
|          |                      | myAge == '28'                 |
|          |                      | 28 == '28'                    |
+----------+----------------------+-------------------------------+
| ===      | Igualdad Estricta    | myAge === 28                  |
+----------+----------------------+-------------------------------+
| !=       | Desigualdad          | myAge != 29                   |
+----------+----------------------+-------------------------------+
| !==      | Desigualdad Estricta | myAge != '28'                 |
|          |                      | 28 != '28'                    |
+----------+----------------------+-------------------------------+
| >        | Mayor que            | myAge > 25                    |
|          |                      | '28' > 25                     |
+----------+----------------------+-------------------------------+
| >=       | Mayor que o igual    | myAge >= 28                   |
|          |                      | '28' >= 25                    |
+----------+----------------------+-------------------------------+
| <        | Menor que            | myAge < 30                    |
|          |                      | '28' < 30                     |
+----------+----------------------+-------------------------------+
| <=       | Menor que o igual    | myAge <= 28                   |
|          |                      | '28' <= 28                    |
+----------+----------------------+-------------------------------+

Error común: No confundas = (operador para asignar) con ==.

Operadores Logicos

Estos tipicamente se usan en combinación con operadores de comparación:

var posNum = 4;
var negNum = -2;

Al combinar multimples condiciones, hay que usar parentesis para agrupar:

var myAge = 28;
if ((myAge >= 0 && myAge < 3)  || myAge > 90) {
  console.log('You\'re not quite in your peak.');
}

+----------+-------------+-------------------------------+
| Operador | Significado | Expresiones Verdaderas (true) |
+----------+-------------+-------------------------------+
| &&       | AND         | posNum > 0 && negNum < 0      |
|          |             | 4 > 0 && -2 < 0               |
+----------+-------------+-------------------------------+
| ||       | OR          | posNum > 0 || negNum > 0      |
|          |             | 4 > 0 || -2 > 0               |
+----------+-------------+-------------------------------+
| !        | NOT         | !(posNum === negNum)          |
|          |             | !(posNum < 0)                 |
+----------+-------------+-------------------------------+

if/else

Usa else para darle a JS una declaración alternativa a ejecutar.

var age = 22;
if (age > 16) {
  console.log('Ya puedes manejar!');
} else {
  console.log('Lo siento, pero te faltan  ' + (16 - age) + ' años para que puedas manejar.');
}

if/else if/else

Puedes usar else if si tienes varias condiciones que checar.

var age = 20;
if (age >= 35) {
  console.log('Puedes votar Y ocupar cualquier puesto en el gobierno!');
} else if (age >= 25) {
  console.log('Puedes votar Y ser Senador!');
} else if (age >= 18) {
  console.log('Puedes votar!');
} else {
  console.log('No tienes voz en el gobierno!');
}

if/else if/else

Puedes usar else if si tienes varias condiciones que checar.

var age = 20;
if (age >= 35) {
  console.log('Puedes votar Y ocupar cualquier puesto en el gobierno!');
} else if (age >= 25) {
  console.log('Puedes votar Y ser Senador!');
} else if (age >= 18) {
  console.log('Puedes votar!');
} else {
  console.log('No tienes voz en el gobierno!');
}

El ciclo while

El ciclo while le dice a JS que repita unas declaración mientras siga siendo verdadero (true)

while (expression) {
  // declaraciones a repetir
}

var x = 0;
while (x < 5) {
  console.log(x);
  x = x + 1;
}

El ciclo for

for (initialize; condition; update) {
  // declaraciones a repetir
}

for (var i = 0; i < 5; i = i + 1) {
  console.log(i);
}

El ciclo for es otra forma de repetir declaraciones, es más especializado que el while:

El tipo de dato Array

Un arreglo es un tipo de dato que almacena una lista ordenada de valores, de cualquier tipo:

var arrayName = [element0, element1, ...];

var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
var raceWinners = [33, 72, 64];
var programmingLanguages = ["Ruby", "Javascript", "C++", "Python"];

Los arreglos tienen la propiedad length que te regresa el tamaño del arreglo.

console.log(rainbowColors.length); // => 7

Acceso a un Arreglo 

Puedes accesar a elementos usando "bracket notation". El indice de un arreglo empieza en 0.

var arrayItem = arrayName[indexNum];

var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
var firstColor = rainbowColors[0];
var lastColor = rainbowColors[6];

Cambiando valores de un Array

Tambien puedes usar el bracket notation para cambiar elementos en un arreglo.

var programmingLanguages = ["Ruby", "Javascript", "C++", "Python"];
programmingLanguages[0] = "Java";

O agregar algo a un arreglo:

programmingLanguages[4] = "Ada";

Iterando Arreglos

Usa un ciclo for para facilmente accesar a cada elemento del arreglo:

var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
for (var i = 0; i < rainbowColors.length; i++) {
  console.log(rainbowColors[i]);
}

Ejercicio

Tus mejores opciones

• Crea un arreglo para almacenar tus opciones preferidas de algo (colores, candidatos, lo que sea).
• Para cada opción impreme en pantalla un string como: "Mi #1 opción es azul".

• Cambia lo que se imprime a que diga: "Mi 1era opción es azul, Mi 2nda opción es, Mi 3era opción es. Escogiendo el sufijo correcto para cada numero.

Normal

Hacker