Sei sulla pagina 1di 25

JAVA SCRIPT

Lenguaje de programacin, utilizado para crear pginas web dinmicas.

Web dinmica: aquella que incorpora efectos, ej. Textos que aparecen y desaparecen,
animaciones, acciones cuando pulsas botones, y ventanas con mensajes de aviso.

PROGRAMACION BASICA

-Variables: funciona como una caja para guardar valores, son un identificador y nos sirve para
guardar estos valores. Gracias a ellos es posible crear programas genricos, es decir funcionan
siempre igual independientemente de otros valores o de los valores utilizados. Son
importantes porque ayudan a definir la utilidad del programa.

Las variables almacenan los valores, incluso si se cambian los valores, el programa seguira
funcionando correctamente. Porque se calcular segn el valor almacenado en la variable.

Por tanto, si se quiere que el programa funcione diferente se deben modificar las variables.

Las variables en JAVA SCRIPT se CREAN mediante la palabra reservada var.

Var numero_1

Var numero_2

Var resultado: var numero_1 + var numero_2

Una vez declarada la variable, el siguiente paso es INICIARLA.

Como? Se le dice iniciar cuando se le asigna un valor mediante el signo = . Ej: primero se
declara la variable llamada primer_numero y luego se inicializa asignndole un valor numrico:

Se declara: var primer_numero

Se inicializa: primero_numero=5

Declara e inicializar en una sola lnea de cdigo:

var primer_numero=5

El nombre de una variable tambin se conoce como IDENTIFICADOR, debe cumplir las sgtes
normas:

- SOLO LETRAS, NUMEROS y los SIMBOLOS $ (DLAR) y _ (GUION BAJO).


- PRIMER CARCTER NO PUEDE SER NUMERO.
- EJ. CORRECTOS: var $numero_1; var_$letra; var $$$otroNumero; var $_a__$4;
- EJ.INCORRECTOS: var 1numero (inicia con un numero); var numero;1_123 (porque
contiene un carcter no permitido ;)

TIPS

- AL FINAL DE CADA LINEA DE COGIDO, SIEMPRE SE FINALIZA CON ; (A EXCEPCION DE


QUE TERMINE EN "{" o "}" ).
- MUCHOS ERRORES ESTAN EN LA ESCRITURA DEL CODIGO, ATENCION A LA LETRAS Y
NUMEROS QUE SE UTILIZAN, ASI COMO LOS SIMBOLOS Y PUNTUACIONES DE CADA
LINEA.
TIPOS DE VARIABLES

Recordando: todas se crean de la misma forma (mediante la palabra reservada var), la forma
en la que se le asigna un valor depende del tipo de valor que se le quiera almacenar (nmeros,
textos, etc).

1. Numricas
Utilizados para almacenar valores numricos ENTEROS (integer en ingles) o
DECIMALES (float en ingles). Se asigna indicando directamente el valor entero o
decimal. Los decimales utilizan el punto (.) en vez de coma para separar el entero del
decimal.
EJ.: TIPO ENTERO: var iva=16; TIPO DECIMAL: var total=234.65;
2. Cadenas de texto
Utilizados para almacenar caracteres, palabras y/o frases de texto. Tambin llamadas
STRING en ingles. Para asignar el valor, se encierra en comillas dobles o simples.
EJ.: var mensaje=Bienvenido a nuestro sitio web; var nombreProducto=Producto
ABC; var letraSeleccionada=c;
3. ARRAYS
En ocasiones, se les llama VECTORES, MATRICES e incluso ARREGLOS. Pero ARRAY es el
ms aceptado y utilizado en la programacin.
Que es? Es una COLECCIN DE VARIABLES.
Ej. Sencillo: Si una aplicacin necesitar manejar los das de la semana, se pueden crear
siete variables de tipo texto: var dia1=lunes; var dia2=martes; var
dia7=domingo; NO ES INCORRECTO PERO SI POCO EFICIENTE. En ejemplos mas
grandes se vuelve complicado.
Para estos casos, se puede agrupas las variables en un ARRAY. Rehaciendo:
Var das=[lunes, martes, mircoles, jueves, viernes, sbado, domingo];
Para definir un array, se utilizan [ y ] y se utiliza la coma para separar sus
elementos.
Var nombre_array=[valor1, valor2, ,valorN];
Se accede a cada ELEMENTO indicando su posicin dentro del array. NOTA: la
complicacin es que las posiciones de los elementos empiezan a contarse desde 0 (no
en el 1).
4. BOOLEANOS (boolean)
Tambin se conocen con el nombre de variables de tipo lgico. Funcionamiento
bsico: sencillo.
Almacena un tipo especial de valor que SOLO puede tomar dos valores: true o false.
NO almacena nmeros ni cadenas de texto.
EJ.: varclienteRegistrado=false; var ivaIncluido=true;

OPERADORES

Permiten manipular el valor de las variables, realizar operaciones matemticas con sus valores
y comparar diferentes variables. Es decir, permiten REALIZAR CALCULOS COMPLEJOS y tomar
DECISIONES LOGICAS en funcione de comparaciones y otros tipos de condiciones.

1. Asignacin
El ms utilizado y el ms sencillo. Utilizado para guardar un valor especifico en una
variables, el smbolo es =
EJ. var numero1=3;
A la izquiera del operador, siempre debe indicarse el nombre de la variable. A la
derecha, variables, valores, condiciones logicas, etc.
EJ. var numero1=3; var numero2=4;
Ahora la variable numero1 vale 5
numero1=5;
ahora la variable numero1 vale 4
numero1=numero2;
La asignacin siempre se realiza a una variable, siempre a la derecha.
2. Incremento y Decremento
SOLAMENTE vlidos para variables numricas y utilizados para incrementar o
decrementar en una unidad el valor de una variable.
EJ.: var numero=5;
numero++;
el valor final de numero=6
El operador de incremento de indica mediante el sufijo ++ en el nombre de la variable.
El resultado, se incrementa en una unidad. Por tanto:
EJ.: var numero=5;
Numero=numero+1;
el valor final de numero=6
De forma equivalente, el operador decremento (sufijo --)utilizado para decrementar el
valor de una variable:
EJ.: var numero=5;
numero--;
el valor final de numero=4
Equivalente a:
EJ.: var numero=5;
numero=numero-1;
el valor final de numero=4
3. Lgicos
Imprescindibles para realizar aplicaciones complejas, utilizados para tomar decisiones
sobre las instrucciones que debera ejecutar el programa en funcin de ciertas
condiciones. El resultado siempre es un valor lgico o booleano.
- Negacion: uno de los ms utilizados es la negacin. Utilizado para obtener el valor
contrario al valor de la variable:
var visible=true;
var oculto=!visible; En el ejemplo, la variable "visible" tiene un valor
verdadero. Dado esto, en la segunda lnea del cdigo se presenta una segunda
variable llamada "oculto", que es la negacin de la variable "visible". Como
"visible" tena un valor true, entonces su valor contrario es false. Esto quiere
decir que el valor de la variable "oculto" es false.
La negacin se obtiene prefijando el smbolo ! al identificador de la variable.
El funcionamiento se resume en la siguiente tabla:

variable !variable

true false

false true
Si la variable original es de tipo booleano, es muy sencillo obtener su negacin.

Que sucede cuando la variable es un numero o una cadena de texto? Se realiza en


primer lugar una conversin a un valor BOOLEANO. Si la variable contiene un
NUMERO, su valor booleano es false si vale 0, y es true para cualquier otro nmero
(positivo o negativo, entero o decimal). Si contiene texto, su valor booleano es false si
la cadena es vaca ( )y es true si contiene texto.

- AND: Obtiene su resultado combinando dos valores booleanos. El operador se indica


mediante el smbolo && y su resultado SOLAMENTE es true si los dos operandos son
true.
Var valor1=true;
Var valor2=false;
Resultado=valor1 && valor2; resultado de la operacin false.
- OR: Tambin combina dos valores booleanos. El operador se indica mediante el
smbolo || y su resultado es true si alguno de los dos operandos es true.
4. Matemticos
JAVA SCRIPT permite manipulaciones matemticas sobre el valor de las variables
numricas, son suma +, resta -, multiplicacin * y divisin /.
EJ.: var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1; // resultado = 13
resultado = numero2 4; // resultado = 1
resultado = numero1 * numero 2; // resultado = 50
Adicionalmente, tenemos al operador matemtico modulo, calcula el residuo de la
divisin entera de dos nmeros. EJ. 10/5=2, residuo de la divisin es 0 por lo que el
mdulo es igual a 0. Si divides 9/5=1 y residuo 4, modulo igual a 4.
Su smbolo es el % (no confundirse con el clculo de porcentaje).
5. Relacionales
Definidos igual que en las matemticas, mayor que (>), menor que (<), mayor o igual
(>=), menor o igual (<=), igual que (==) y distinto de (!=).
El resultado siempre es un valor booleano.
EJ.: var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // El valor final de resultado = false, porque 3 no es
mayor que 5.
resultado = numero1 < numero2; // El valor final de resultado = true, porque 3 s es
menor que 5.
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; //resultado = false
NOTA: El operador == se utiliza para comparar el valor de dos variables, por lo que es
muy diferente del operador =, que se utiliza para asignar un valor a una variable:
En el siguiente ejemplo, el operador "=" asigna valores:
var numero1 = 5;
resultado = numero1 = 3;

En el siguiente ejemplo, el operador "==" compara variables.


var numero1 = 5;
resultado = numero1 == 3;
(en la primera lnea, se le asigna el valor numrico 5 a la variable numero1. En la segunda lnea, se le
asigna a resultado el valor resultante de la comparacin entre numero1 y el valor numrico 3. Como el
valor de numero1 es 5, que no es igual a 3, entonces resultado tiene el valor de false al finalizar el cdigo).

Los operadores relacionales tambin se pueden utilizar con variables de tipo cadena
de texto:
var texto1 = "hola";
var texto2 = "hola";
var texto3 = "adios";

resultado = texto1 == texto3;


// El valor final de resultado = false, porque se compara si texto1 es igual a texto3, lo
cual es falso.

resultado = texto1 != texto2;


// El valor final de resultado = false, porque se compara si texto1 es diferente a texto2,
lo cual es falso.

Cuando se utilizan cadenas de texto, los operadores "mayor que" (>) y "menor que" (<)
siguen un razonamiento no intuitivo: se compara letra a letra comenzando desde la
izquierda hasta que se encuentre una diferencia entre las dos cadenas de texto. Para
determinar si una letra es mayor o menor que otra, las maysculas se consideran
menores que las minsculas y las primeras letras del alfabeto son menores que las
ltimas (a es menor que b, b es menor que c, A es menor que a, etc.)

ESTRUCTURAS DE CONTROL DE FLUJO

Los programas que se pueden realizar utilizando solamente variables y operadores son una
simple sucesin lineal de instrucciones bsicas.

Sin embargo, se pueden realizar programas que sigan una serie instrucciones slo en casos
predeterminados, o programas que repitan de forma eficiente una misma instruccin, como
por ejemplo, sumar un determinado valor a todos los elementos de un array.

Para realizar este tipo de programas son necesarias las estructuras de control de flujo, que son
instrucciones del tipo "si se cumple esta condicin, hazlo; si no se cumple, haz esto otro".
Tambin existen instrucciones del tipo "repite esto mientras se cumpla esta condicin".

Si se utilizan estructuras de control de flujo, los programas dejan de ser una sucesin lineal de
instrucciones para convertirse en programas inteligentes que pueden tomar decisiones en
funcin del valor de las variables.

1. IF: la mas utilizada en JAVA SCRIPT, utilizada para tomar decisiones en funcin de una
condicin. Su definicin formal es:
if(condicion) { ...}
Si la condicin se cumple (es decir, si su valor es true) se ejecutan todas las
instrucciones que se encuentran dentro de {...}. Si la condicin no se cumple (es decir,
si su valor es false) no se ejecuta ninguna instruccin contenida en {...} y el programa
contina ejecutando el resto de instrucciones del script.
Ejemplo:
var verMensaje = true;
if(verMensaje) { var mensaje = Hola Mundo;}
En el ejemplo anterior, la variable mensaje s se crea, ya que la variable verMensaje
tiene un valor de true y por tanto, el programa entra dentro del bloque de
instrucciones del if.
El ejemplo se podra reescribir tambin como:
var verMensaje = true;
if(verMensaje == true) { var mensaje = Hola Mundo;}
En este caso, la condicin es una comparacin entre el valor de la variable verMensaje
y el valor true. Como los dos valores coinciden, la igualdad se cumple y por tanto la
condicin es cierta, su valor es true y se ejecutan las instrucciones contenidas en ese
bloque del if.
La condicin que controla el if() puede combinar los diferentes operadores lgicos y
relacionales mostrados anteriormente:
var mostrado = false;
if(!mostrado) { alert("Es la primera vez que se muestra el mensaje");}

Los operadores AND y OR permiten encadenar varias condiciones simples para


construir condiciones complejas:
var mostrado = false;
var usuarioPermiteMensajes = true;
if(!mostrado && usuarioPermiteMensajes) { var mensaje = "Este mensaje s existe";}
La condicin anterior est formada por una operacin AND sobre dos variables. A su
vez, a la primera variable se le aplica el operador de negacin antes de realizar la
operacin AND. De esta forma, como el valor de mostrado es false, el valor !mostrado
sera true. Como la variable usuarioPermiteMensajes vale true, el resultado de
!mostrado && usuarioPermiteMensajes sera igual a true && true, por lo que el
resultado final de la condicin del if() sera true y por tanto, se ejecutan las
instrucciones que se encuentran dentro del bloque del if().
2. IFELSE: En ocasiones, las decisiones que se deben realizar no son del tipo "si se
cumple la condicin, hazlo; si no se cumple, no hagas nada". Normalmente las
condiciones suelen ser del tipo "si se cumple esta condicin, hazlo; si no se cumple,
haz esto otro".
Para este segundo tipo de decisiones, existe una variante de la estructura if llamada
if...else. Su definicin formal es la siguiente:
if(condicion) {
...
}
else {
...
}
Si la condicin se cumple (es decir, si su valor es true) se ejecutan todas las
instrucciones que se encuentran dentro del if(). Si la condicin no se cumple (es decir,
si su valor es false) se ejecutan todas las instrucciones contenidas en else { }. Ejemplo:
var edad = 18;
if(edad >= 18) {
var mensaje1 = "Eres mayor de edad";
}
else {
var mensaje2 = "Todava eres menor de edad";
}
Si el valor de la variable edad es mayor o igual que el valor numrico 18, la condicin
del if() se cumple y por tanto, se ejecutan sus instrucciones y se muestra el mensaje
"Eres mayor de edad". Sin embargo, cuando el valor de la variable edad no es igual o
mayor que 18, la condicin del if() no se cumple, por lo que automticamente se
ejecutan todas las instrucciones del bloque else { }. En este caso, se mostrara el
mensaje "Todava eres menor de edad".

El siguiente ejemplo compara variables de tipo cadena de texto:


var nombre = "";
if(nombre == "") {
alert("An no nos has dicho tu nombre");
}
else {
alert("Hemos guardado tu nombre");
}
La condicin del if() anterior se construye mediante el operador ==, que es el que se
emplea para comparar dos valores (no confundir con el operador = que se utiliza para
asignar valores). En el ejemplo anterior, si la cadena de texto almacenada en la
variable nombre es vaca (es decir, es igual a "") se muestra el mensaje definido en el
if(). En otro caso, se muestra el mensaje definido en el bloque else { }.

La estructura if...else se puede encadenar para realizar varias comprobaciones


seguidas:
if(edad < 12) {
var mensaje1 = Todava eres muy pequeo;
}
else if(edad < 19) {
var mensaje2 = "Eres un adolescente";
}
else if(edad < 35) {
var mensaje3 = "An sigues siendo joven";
}
else {
var mensaje4 = "Piensa en cuidarte un poco ms";
}
No es obligatorio que la combinacin de estructuras if...else acabe con la instruccin
else, ya que puede terminar con una instruccin de tipo else if().
BIENVENIDA Y ORIENTACIN
Hola y bienvenida a la tercera etapa del proceso de seleccin: el pre-trabajo. Debes
sentirte muy orgullosa de estar dispuesta a invertir tu tiempo y esfuerzo para
completar una de las etapas ms importantes del proceso. Esta etapa consiste en
realizar el curso 01. Introduccin a la programacin (con JavaScript) de Laboratoria,
que es el punto de inicio ideal para aprender a programar. Aqu empezamos desde
cero, ensendote los fundamentos de JavaScript, el lenguaje de programacin ms
popular de la Web.
Este curso es un paso fundamental del proceso de seleccin, pues nos permitir
comprobar tu inters por la tecnologa, as como tu compromiso para pertenecer al
programa. Adems, analizaremos tu capacidad para aprender de manera individual e
independiente.
La duracin aproximada del curso es de 15-20 horas. T podrs avanzar a tu propio
ritmo, pero te recomendamos organizarte con tiempo para que vayas hacindolo poco
a poco. Tendrs hasta el jueves 3 de agosto para terminar.
Para pasar a la siguiente etapa del proceso de seleccin es necesario que completes
todo el pre-trabajo. Las postulantes que demuestren el mayor compromiso y potencial
para aprender, sern invitadas a iniciar el periodo de pre-admisin, donde
continuaremos con este curso de modo presencial. Ser una buena oportunidad para
demostrar todo lo que ya dominan y saben hacer.

Acompaamiento y puntos de apoyo

Recuerda que no ests sola en este proceso. Nosotros te estaremos acompaando a


cada paso a travs de varios canales de apoyo a lo largo del curso:
1. Grupo de Facebook
nete al grupo de Facebook correspondiente a la sede a la que ests postulando. Ah
podrs preguntar y resolver dudas en conjunto con las dems postulantes, con el
apoyo del staff de profesores de Laboratoria.
Lima
Ciudad de Mxico
Santiago de Chile
2. Horas de consulta
Cada sede de Laboratoria tiene horarios de consulta para que puedas visitarnos y
recibir la ayuda de nuestro staff de profesores. Si no puedes asistir, no te preocupes,
vamos a transmitir estas sesiones por Facebook Live para que puedas verlas en lnea.
Luego tambin subiremos los videos a los grupos para que puedas volver a verlos
cuantas veces necesites.
Las horas de consulta por sede son las siguientes:
Lima:
Lunes 24 de julio de 6pm a 8pm, Av. Jos Pardo 601, oficina 1104, Miraflores.
Lunes 31 de julio de 6pm a 8pm, Av. Benavides 1180, piso 7, Miraflores.
3. Correo
Si no logras resolver tus dudas a travs de Facebook o de las horas de consulta,
tambin tendrs la opcin de escribirle directamente a nuestro staff de profesores
para resolver dudas puntuales. Trata de utilizar esta opcin como ltimo recurso ya
que mientras ms correos recibamos, ms nos tardaremos en responderlos.
Los contactos para cada sede, son los siguientes:
Lima:
Michelle Seguil, michelle@laboratoria.la
Arabela Rojas, arabela@laboratoria.la

Sobre este curso


- Objetivo del curso
Este curso est dirigido a personas sin conocimientos previos de programacin que
tienen el inters de aventurarse al mundo del cdigo. Ser tu primer paso en la ruta de
aprendizaje.
El propsito de este curso es darte una idea de qu se trata el mundo del desarrollo de
software, para que puedas determinar si es algo que te apasiona perseguir como
profesin. Al terminar este curso sabrs si el cdigo es lo tuyo y habrs sentado unas
buenas bases para el desarrollo de tu carrera profesional en el mundo tech.
- Aprenders
Entender qu es la programacin y por qu aprender a programar.
Entender qu es JavaScript y por qu aprenderlo.
Tener un primer acercamiento al mundo del cdigo, creando tu primera pgina web.
A darle dinamismo a tu web utilizando JavaScript.
Algunos conceptos bsicos de programacin como: variables, tipos datos y
operadores.
- Duracin
Total: 15-20 horas.
Modalidad: Self-paced (a tu propio ritmo - online).
- Requerimientos previos
Ningn conocimiento previo de programacin es necesario para completar este curso.
Est diseado para principiantes.
- Syllabus
Este pre-work consta de 2 mdulos principales:

MDULO 1: INTRODUCCIN
Queremos motivarte a aprender a programar, y por ello te brindaremos ms
informacin sobre cmo, a travs del cdigo, podrs transformar tu futuro. Adems, te
daremos algunos consejos para aprender a aprender. Despus de eso, te
ensearemos a crear tu primera pgina web!

# Tipo Tpico

00 Lectura Bienvenida y orientacin

01 Lectura Growth Mindset

02 Lectura Qu es la programacin y porqu aprender a programar?

03 Lectura Tu primer sitio web

04 Quiz Prueba tu conocimiento

MDULO 2: VARIABLES Y TIPOS DE DATOS


El segundo mdulo entrar a ms detalle en algunos conceptos base de la
programacin, como lo son las variables, los tipos de datos y los operadores.

# Tipo Tpico

01 Lectura Valores, tipos de datos y operadores

02 Lectura Variables

03 Lectura Manipulando strings y numbers

04 Lectura Comentarios en JavaScript

05 Video Practicando con ejercicios de variables y tipos de datos

06 Quiz Prueba tu conocimiento

GROWTH MINDSET
- Objetivos de aprendizaje:
Entender qu es Growth Mindset (mentalidad de crecimiento) y adoptarla antes de
empezar este curso.
- Sobre Growth Mindset
Laboratoria es un programa increble, que te ensea todo lo que necesitas para iniciar
tu carrera en el sector digital en un periodo muy corto de tiempo. Seguramente te
habrs preguntado cmo podrs lograrlo, y la respuesta est en aprender a aprender.
Alguna vez has ledo o escuchado algo sobre Growth Mindset? Al finalizar este
mdulo, esperamos que no slo entiendas este concepto, sino que adoptes una
mentalidad de crecimiento que te permita enfrentar los retos de aprender algo nuevo,
y tener la confianza de saber que podrs superarlos.
La mayora de personas creen que la inteligencia es una capacidad mental con la que
nacemos, que es esttica y que no podemos cambiar. Esta creencia ocasiona que
pensemos que nuestra inteligencia tiene un lmite, y que hay cosas que simplemente
no podremos aprender.

Sin embargo, diversas investigaciones sobre el cerebro y el aprendizaje han


demostrado que cada vez que aprendemos algo nuevo nuestro cerebro cambia y
crece. En otras palabras, nosotras mismas tenemos el control para desarrollar y
expandir nuestra inteligencia.
Hace 30 aos, Carol Dweck, una psicloga estadounidense, se plante investigar y
comparar cmo estas distintas creencias podan causar que las personas obtuvieran
diferentes resultados al enfrentarse a un reto de aprendizaje. Despus de varias
investigaciones, ella acu los trminos Fixed mindset y Growth mindset, es decir,
mentalidad fija o mentalidad de crecimiento, para describir a ambos tipos de
creencias.
A travs de sus estudios en diferentes escuelas de Estados Unidos, ella descubri que
cuando los estudiantes creen que pueden lograr que su inteligencia se desarrolle,
entonces estn dispuestos a esforzarse ms, porque entienden que el logro que
alcanzarn ser mejor y ms grande.
Actualmente, los ltimos avances en neurociencias han mostrado que el cerebro es
mucho ms maleable de lo que pensbamos. Las investigaciones en plasticidad
neuronal evidencian cmo la conectividad entre neuronas puede cambiar con las
experiencias que las personas van acumulando. Con prctica, las redes neuronales van
creciendo y creando nuevas conexiones. Esto implica que t puedes incrementar el
crecimiento de tus redes neuronales con acciones, como al realizar preguntas, leer,
practicar una y otra vez algo que te resulta complicado, y manteniendo buenos hbitos
de alimentacin y sueo.
Gracias a estos nuevos descubrimientos cientficos, muchos investigadores han
comenzado a entender la conexin entre los tipos de mentalidades y las posibilidades
de alcanzar logros. Los estudios de Carol Dweck han mostrado que si piensas que tu
cerebro puede crecer, entonces tu comportamiento es distinto a si piensas que naciste
con una inteligencia fija. Por ejemplo, una estudiante con una mentalidad fija, estar
orientada a mostrar un desempeo perfecto, por lo que preferir realizar solo
actividades que sabe que puede lograr, para as verse siempre inteligente. En cambio,
una estudiante con una mentalidad de crecimiento, se sentir mucho ms cmoda
enfrentando retos que no necesariamente sabe cmo lograr, porque sabe que estos
desafos le permitirn aprender ms.
Tener una mentalidad de crecimiento significa que entiendes que puedes desarrollar e
incrementar tu inteligencia y todas tus habilidades, y que no tienes miedo a los retos.
Significa que sabes que la mejor manera de aprender se logra con esfuerzo, y por ello
ests dispuesta a cometer errores en el proceso.
Mira este video sobre Growth mindset (10 min)
El poder de fe, mindset y xito | Eduardo Briceno | TEDxManhattanBeach

Desarrollando Growth Mindset


Vers que tu mentalidad puede variar, pues aunque quisiramos tener siempre una
mentalidad de crecimiento, la realidad es que tenemos que trabajar da a da y en cada
situacin desafiante para mantenerla. Lo importante es poder reconocer y detectar
cundo estamos teniendo elementos de una mentalidad fija, para luego reflexionar y
encontrar estrategias para cambiar. La siguiente imagen resume algunas de las
diferencias entre ambas mentalidades, y te ayudar a identificar cmo mejorar:
Growth Mindset en Laboratoria

Antes de pasar al siguiente mdulo queremos darte algunos consejos para tu proceso
de aprendizaje:
1. El aprendizaje es mejor y perdura ms cuando necesitas esforzarte ms. Los
aprendizajes fciles se recuerdan hoy, pero no maana. Cuando el aprendizaje es
ms difcil, es ms fuerte y se queda en tu memoria ms tiempo.
2. Tratar de resolver un problema antes de que te muestren cmo hacerlo, te
permitir luego aprender y entender mejor la solucin que te enseen.
3. Cometer errores y corregirlos es lo que te permitir construir los puentes para
avanzar en el proceso de aprendizaje.
Con todos estos conocimientos que has adquirido y con tu nueva mentalidad, te
proponemos aceptar este reto: Aprender a programar para transformar tu futuro.
Y para ello, t tendrs que proponerte lo siguiente:
Yo, futura estudiante de Laboratoria, me comprometo a tener siempre presente que soy
capaz de desarrollar mi inteligencia a travs de aprendizajes que requerirn mi esfuerzo,
pero que me permitirn alcanzar un mayor logro. Me comprometo a siempre querer
aprender ms, para lo cual aceptar los retos y me mantendr persistente ante los
obstculos, pues s que con prctica podr superarlos. S que los retrocesos o los errores
que cometa no significan una falla, sino que son las oportunidades en las que ms podr
aprender. Soy consciente de que por momentos tendr dudas sobre mi capacidad para
aprender, s que no ser fcil, pero s que puedo hacerlo. Me comprometo a jams volver
a decir no puedo, sino que cambiar esta frase por no puedo an, porque tengo una
mentalidad de crecimiento.

POR QU APRENDER A PROGRAMAR?


Objetivos de aprendizaje:
Entender qu es la programacin y por qu aprender a programar.
Entender qu es JavaScript y por qu aprenderlo.
Conocer algunas historias de egresadas de Laboratoria.
El texto a continuacin es una traduccin al espaol, con ciertos ajustes, del captulo 1
de JavaScript for kids, Nick Morgan, 2015.

QU ES LA PROGRAMACIN?
Las computadoras son mquinas increblemente poderosas, capaces de realizar
hazaas increbles, como jugar ajedrez competitivo, servir miles de pginas web o
hacer millones de clculos complejos en menos de unos segundos. Recientemente, las
computadoras se estn utilizando para crear automviles autnomos (que se manejan
solos), mundos enteros de realidad virtual y robots con inteligencia artificial.
Pero en el fondo, las computadoras son realmente bastante tontas. Las computadoras
slo pueden hacer exactamente lo que nosotros, los humanos, les digamos. Les
decimos cmo comportarse usando programas de computacin, que son simplemente
un conjunto de instrucciones para que las computadoras sigan. Sin programas, las
computadoras no pueden hacer nada! La programacin es, por lo tanto, el arte de
crear un conjunto de instrucciones que le indican a una computadora cmo realizar
una tarea.
POR QU APRENDER A PROGRAMAR?
La programacin es un espacio para crear. Es una forma de expresin, as como el arte
y el diseo. Es un mecanismo para transformar tus pensamientos en algo vivo que
todo el mundo puede ver y con el cual puedan interactuar. Como dijo, Steve Jobs, uno
de los gigantes del mundo tech:
Todo el mundo en este pas debera aprender a programar una computadora, porque te
ensea a pensar Steve Jobs
La programacin se ha vuelto tan importante, que se encuentra entre las carreras ms
demandadas por el mercado. Te damos tres datos del mercado de trabajo para
programadores:
1. Programador de software es la carrera que tendr mayor crecimiento en la
prxima dcada en Amrica Latina. Segn estimaciones, la regin va a tener una
necesidad de 1.25 millones de programadores hacia 2025.
2. Desarrolladores web y desarrolladores de software se encuentran dentro de las
profesiones mejor pagadas en Amrica Latina.
3. Los empleos tech ya no slo se encuentran en el sector tech. En la actualidad 2 de
cada 3 empleos tech se encuentran fuera del sector. Ello significa que la
programacin abre las puertas para trabajar en diferentes sectores y aportar tu
talento al desarrollo de distintas industrias.

HISTORIAS DE EGRESADAS DE LABORATORIA

Las estudiantes de Laboratoria utilizan la programacin como herramienta de


transformacin. El 75% de las estudiantes encuentran empleo y triplican sus ingresos.
Aqu algunas historias de xito:

Sandra (Mxico)

Sandra termin la preparatoria y empez a trabajar en una tienda de autoservicio para


mantener a su hijo. Hoy, gracias a lo aprendido en Laboratoria, es desarrolladora web
en micochinito.com en la Ciudad de Mxico y tiene un sueldo 3.5 veces mayor que
antes.

Danna (Chile)

Danna tiene 26 aos y por problemas econmicos no pudo terminar la Universidad.


Antes de ingresar a Laboratoria trabajaba en un call center. Su primer trabajo como
desarrolladora fue en Ilgica. Hoy trabaja en ThoughtWorks, empresa que adems de
triplicar su salario, la llev a la India a capacitarse.

Carol (Per)

Carol estudi tres aos de Diseo Grfico Publicitario. Antes de Laboratoria, trabajaba
largas horas 6 das a la semana para mantenerse a ella y a su hijo. Hoy Carol trabaja
como desarrolladora web en 54solutions, una agencia de medios digitales con un clima
laboral positivo y ganando ms que nunca.

QU ES JAVASCRIPT?

Las computadoras son tan tontas que no podemos darle nuestras instrucciones en
ingls, espaol o cualquier otro idioma hablado. Tenemos que escribir nuestros
programas en un lenguaje de programacin. JavaScript es justamente eso: un lenguaje
de programacin.

Puede que no hayas odo hablar de JavaScript antes, pero ciertamente lo has usado.
JavaScript se utiliza para escribir programas que se ejecutan en pginas web.
JavaScript puede controlar cmo se ve una pgina web o hacer que la pgina responda
cuando un usuario hace click en un botn o mueve el mouse. Sitios como Gmail,
Facebook y Twitter usan JavaScript para facilitar el envo de correo electrnico,
publicar comentarios o navegar por sitios web.

POR QU JAVASCRIPT?

JavaScript no es el nico lenguaje de programacin que existe - de hecho, hay


literalmente cientos de lenguajes de programacin. Pero hay muchas razones para
aprender JavaScript. Por un lado, es mucho ms fcil (y ms divertido) de aprender que
muchos otros lenguajes de programacin. Pero tal vez lo mejor de todo es que para
escribir y ejecutar programas JavaScript, lo nico que se necesita es un navegador web.
Un navegador web es lo que utilizas para navegar por internet. Por ejemplo, lo que
utilizas para abrir Facebook o Google o Wikipedia en tu computadora. Los navegadores
ms populares son: Google Chrome, Safari, Mozilla Firefox e Internet Explorer. Cada
navegador web viene con un intrprete JavaScript que entiende cmo leer programas
JavaScript.

Otra razn que hace interesante estudiar JavaScript en este momento es su posicin
como uno de los lenguajes de programacin ms populares. Segn GitHub, una red de
trabajo colaborativo para programadores, JavaScript es el lenguaje ms popular dentro
de esta plataforma:

HISTORIA DE JAVASCRIPT

JavaScript fue creado (en solo 10 das!) por Brendan Eich, en 1995, para crear
interactividad y dinamismo en Netscape Navigator, uno de los primeros navegadores
web. Desde entonces, JavaScript ha sido adoptado por la mayora de los navegadores
modernos (piensa en Chrome, Safari, etc.). Y por muchos aos JavaScript fue utilizado
nicamente dentro del navegador. Sin embargo, hoy en da se utiliza JavaScript
tambin fuera del navegador para crear cualquier tipo de cosas. Las aplicaciones de
JavaScript son casi infinitas - lo cual lo hace un excelente lenguaje de programacin
que aprender.

ESCRIBIENDO JAVASCRIPT EN LA WEB

Seguramente te ests preguntando cmo es eso de tener un intrprete JavaScript en


el navegador. Pues, la mejor forma de aprender es haciendo: abre tu navegador
Chrome y sigue los pasos que presenta Michelle en el siguiente video. Michelle te
mostrar cmo escribir JavaScript y cmo hacer cosas geniales desde tu computadora,
nicamente utilizando el navegador.

Developer Tools

Consola de Java
https://www.youtube.com/watch?v=_guTQcHaUQo

JAVASCRIPT != JAVA

ltima nota final sobre el contexto de JavaScript como lenguaje de programacin:


JavaScript no es lo mismo que Java. Java es otro lenguaje de programacin. Mucha
gente los confunde. T no :)

TU PRIMER SITIO WEB

Objetivos de aprendizaje:

Entender la funcin del HTML para crear la estructura bsica de una pgina web.
Conocer los principales elementos y etiquetas HTML.
Aprender a darle dinamismo a una web utilizando JavaScript.
Tener un primer acercamiento al mundo del cdigo, creando tu primera pgina
web.

El texto a continuacin es una traduccin al espaol, con ciertos ajustes, del captulo 5
de JavaScript for kids, Nick Morgan, 2015; y de Eloquent JavaScript, de Marijn
Haverbeke, 2014.

HTML: HYPERTEXT MARKUP LANGUAGE

La consola de JavaScript que hemos utilizado hasta ahora es ideal para probar
pequeos fragmentos de cdigo. Sin embargo, para crear programas reales,
necesitaremos algo ms flexible, como una pgina web. En esta seccin aprenders
cmo crear una pgina web HTML bsica y darle interaccin con JavaScript.

HTML (HyperText Markup Language) es el lenguaje (de marcado de texto) utilizado


para crear la estructura de una pgina web. Para crear una web, se empieza creando
un documento en formato HTML. Esto es muy parecido a crear un documento con
formato word, excel o powerpoint.
Un documento HTML simple se ve as (no te asustes si no entiendes todo lo que dice,
te lo explicaremos paso a paso ms abajo):
<!DOCTYPE html>
<html>
<head>
<title>Mi primera web</title>
</head>
<body>
<h1>Hola Mundo!</h1>
<p>Esta es mi primera web</p>
</body>
</html>

Al abrir este mismo documento HTML en un navegador (como Chrome), se ve lo


siguiente:

El navegador "lee" el archivo HTML (el texto y las etiquetas que estn adentro) y las
presenta segn las reglas del lenguaje. Por ejemplo, los textos que estn dentro de las
etiquetas <h1> </h1> son considerados encabezados o titulares, mientras que los
textos dentro de las etiquetas <p> </p> son considerados prrafos. Por eso, el texto
Hola Mundo! se visualiza mucho ms grande que el texto Esta es mi primera web.

CREA TU PRIMERA WEB

Como ya lo dijimos, la mejor manera de aprender es haciendo. Por eso, es hora de que
t misma crees una web y aprendas HTML.

Michelle te explica por qu necesitars un editor de texto para los ejercicios:

https://www.youtube.com/watch?v=wQKn1fh3pAM

En el siguiente video, Michelle te guiar a travs de los siguientes pasos para que crees
tu primera web:

1. Descarga Atom, un editor de texto: Descargar https://atom.io/


2. Crea un documento HTML llamado index.html
3. Agrega algunos elementos al documento HTML (por ejemplo: un ttulo y un
prrafo)
4. Guarda el documento HTML
5. Abre el documento HTML en un navegador como Chrome
Aqu el video:

https://www.youtube.com/watch?v=QP9FF9eoh-k

ETIQUETAS Y ELEMENTOS HTML

Los documentos HTML se componen de elementos. Salvo algunas excepciones (por


ejemplo <!DOCTYPE html>), los elementos comienzan con una etiqueta de inicio y
terminan con una etiqueta de fin. Por ejemplo, en nuestro documento tenemos el
elemento p, que comienza con la etiqueta de inicio <p> y termina con la etiqueta de
finalizacin </p>. El texto que se encuentra entre las etiquetas de apertura y de cierre
es el contenido del elemento.

Hagamos un recorrido por todos los elementos de nuestro documento:

1. El documento empieza con la etiqueta <!DOCTYPE html> (que como vimos, no


tiene inicio o cierre). Su funcin es hacerle saber al navegador que interprete el
documento como HTML moderno, en contraposicin a varios dialectos que
estaban en uso en el pasado.
2. Luego viene la etiqueta de apertura <html> (la etiqueta de cierre </ html> est al
final). Por estndar, todos los documentos HTML deben tener un elemento html
que "englobe" todo lo dems.
3. Dentro del elemento html hay dos elementos: el head (cabeza en Espaol) y el
body (cuerpo en Espaol). El head contiene informacin sobre el documento, y el
body contiene el documento en s.
4. Dentro del elemento head est el elemento title (con su etiqueta de inicio y de
cierre), que contiene el ttulo del documento. Es por eso que al visualizar el archivo
en el navegador, el ttulo en la pestaa del navegador dice: "Mi primera web". Es
importante que notemos que el elemento title est contenido dentro del
elemento head; el cual, a su vez, est contenido dentro del elemento html.
5. Finalmente, tenemos el elemento body (entre su etiqueta de inicio y de cierre) que
contiene el contenido que se mostrar en el navegador. En este caso, dentro del
body tenemos dos elementos adicionales: el h1 (encabezado) y el p (prrafo).

Existen muchos ms elementos y etiquetas HTML, que aprenders en su momento. Por el


momento, es hora de regresar a JavaScript.

HTML Y JAVASCRIPT

Es importante que entiendas que HTML no es un lenguaje de programacin; es un lenguaje de


marcado de texto. Como hemos visto, con HTML le damos una estructura a nuestra pgina. Sin
embargo, si queremos darle comportamiento o interaccin a nuestra web, necesitamos usar
un lenguaje de programacin. Y el nico lenguaje de programacin para correr en los
navegadores web es JavaScript. Con JavaScript logramos que las pginas web puedan
responder a las acciones de usuario, volvindolas interactivas.

Para incluir JavaScript en un documento HTML puedes utilizar el elemento script y colocar tu
cdigo JavaScript entre sus etiquetas de inicio (<script type="text/javascript">) y cierre
(</script>), tal como lo muestra el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera web</title>
</head>
<body>
<h1>Hola Mundo!</h1>
<p>Esta es mi primera web</p>
<script type="text/javascript">
alert('Hola Mundo!');
</script>
</body>
</html>

Muchas veces tu cdigo JavaScript es tan extenso que no quieres que est ubicado en el
mismo documento HTML. Para eso, la solucin es crear un nuevo documento, esta vez de
formato JavaScript - utilizando la extensin .js - y "linkear" ambos documentos a travs del
mismo elemento script, de la siguiente manera:
<script src="nombre-del-documento.js"></script>
El mismo elemento script tiene un "atributo" llamado src (de source, que significa fuente en
ingls), al cual se le puede asignar la ruta de tu documento JavaScript.

ADELE INTERACCIN A TU WEB


Ahora te toca a ti! Contina con Michelle siguiendo los pasos para agregarle interaccin a tu
pgina web:
Los pasos a seguir son:
1. Agrega el elemento script al final del body de tu documento HTML
2. Dentro del mismo HTML, entre las etiquetas de inicio y cierre del elemento script,
escribe una lnea de cdigo JavaScript (por ejemplo, algo con alert(), document.write()
o prompt())
3. Guarda tu documento HTML
4. Refresca la pgina de tu navegador donde ests viendo tu documento HTML
5. Ahora crea un nuevo documento llamado app.js en la misma carpeta donde est tu
HTML
6. Adele el atributo src al elemento script con la ruta de tu archivo app.js
7. Pasa todo el cdigo JavaScript del documento HTML al documento JS
8. Refresca la pgina del navegador y confirma que todo funciona exactamente igual que
antes
Aqu el video de Michelle:
https://www.youtube.com/watch?v=SSiWsDoK4GE

VALORES, TIPOS DE DATOS Y OPERADORES


OBJETIVOS DE APRENDIZAJE:
Entender qu se entiende por values (valores) en JavaScript.
Conocer los diferentes data types (tipos de datos) en JavaScript.
Aprender cmo combinar y transformar valores con operadores en JavaScript.
El texto a continuacin se basa en gran medida, con ciertos ajustes, en el captulo 1 de
Eloquent JavaScript,de Marijn Haverbeke, 2014. Traduccin en Espaol disponible gracias a
hectorip.

VIVIMOS EN UN MUNDO DE DATA


En el 2010, el entonces CEO de Google, Eric Schmidt, mencionaba que cada dos das creamos
tanta data como lo hicimos desde los inicios de la civilizacin hasta el 2003. Las compras que
haces son data, tus notas en el colegio son data, tu perfil de Facebook est minado de data.
Tus bsquedas en Google, las seales de GPS de tu celular, los videos que miras y subes a
YouTube, las imgenes que ves en Instagram, los registros del clima, los corrreos electrnicos
... todo eso es data!
La data es crucial porque nos ayuda a tomar decisiones y a entender el mundo que nos rodea.
La data es informacin, la informacin es conocimiento, y el conocimiento se traduce en
mejores decisiones. Desde decisiones simples, como elegir un lugar para almorzar en base a los
reviews de Yelp; hasta decisiones complejas, como predecir si una mujer est embarazada,
segn su historial de compra en un hipermercado.

TIPOS DE DATOS
Las computadoras son un gran recurso para trabajar con grandes cantidades de datos. De
hecho, en el mundo de las computadoras solo existen datos. Con los computadores podemos
leer data, modificar data y crear nueva data. Toda la data es almacenada como secuencias
largas de los famosos bits - esas secuencias de unos y ceros que viste en Matrix.

Las computadoras manejan billones de bits. Para hacer ms fcil el manejo de grandes
cantidades de bits, los podemos dividir en "pedazos" que representan piezas de informacin.
En un entorno JavaScript, estos pedazos son llamados values (valores en espaol). Cada value
tiene un data type (tipo de dato) que determina su rol. En JavaScript existen cinco (5) tipos de
datos primitivos:
1. numbers (nmeros).
2. strings (cadenas).
3. booleans (booleanos).
4. undefined (indefinido).
5. null (nulo).
La data y los tipos de datos forman las bases de cualquier lenguaje de programacin. Nos
permiten organizar informacin y determinar cmo correr el programa. En esta leccin
aprenders a definir y manipular estos tipos de datos.
1. Numbers
Los values de tipo number son, sin sorpresa alguna, valores numricos. Es decir, pedazos de
data que representan informacin numrica se representan con el tipo number. Esto incluye
nmeros positivos, negativos, enteros y decimales. Adems, el tipo de datos number tiene tres
valores simblicos: +Infinity, -Infinity y NaN (no-un-nmero).

Veamos varios ejemplos. Abre tu consola (recuerda que lo haces haciendo click con el botn
derecho del mouse -> inspect -> console) y escribe los siguientes nmeros. Al hacerlo, la
consola te lo regresa el nmero de vuelta.
13
// returns > 13
-9.81
// returns > -9.81
Tambin puedes hacer uso de la notacin cientfica para nmeros muy grandes o muy
pequeos, aadiendo una "e" de "exponente", seguido por el exponente del nmero:
5e10
// returns > 50000000000
-2.998e8
// returns > -299800000

OPERADORES ARITMTICOS
Lo principal que se hace con los nmeros es aritmtica. Sigamos explorando el
comportamiento del tipo de dato numbers en tu consola. Escribe el siguiente ejemplo en tu
consola y confirma que tienes el mismo resultado:
100 + 4 * 11
// returns > 144
Los smbolos + y * son llamados operators (operadores). El primero representa la suma y el
segundo la multiplicacin. Al poner un operador entre dos valores, se aplicar la operacin a
esos valores y producir un nuevo valor. Como ves, la multiplicacin ocurre primero. Pero
como en matemticas, puedes cambiar esto encerrando en parntesis la suma.
(100 + 4) * 11
// returns > 1144
Para la resta existe el operador -, y la divisin se puede hacer con el operador /. Veamos ms
ejemplos (recuerda hacerlos en tu consola tambin!):
12345 / 250
// returns > 49.38
1234 + 57 * 3 - 31 / 4
// returns > 1397.25
100 / 0
// returns > Infinity
100 / -0
// returns > -Infinity
1000 * Infinity
// returns > Infinity
0/0
// returns > NaN
Infinity - Infinity
// returns > NaN
Tambin existe un operador aritmtico ms, que podras no reconocer inmediatamente. El
smbolo % es usado para representar la operacin residuo. X % Y resulta en el residuo de
dividir X entre Y. Por ejemplo, 314 % 100 produce 14 (porque 100 multiplicado por 3 + 14 =
314), y 144 % 12 da 0 (porque 12 multiplicado por 12 + 0 = 144). Vers a menudo este
operador referido como mdulo, aunque tcnicamente residuo es ms preciso.
5 % 3
// returns > 2
7 % 2
// returns > 1

2. Strings
La siguiente data type bsico son los strings. Es el tipo de dato que utilizamos para representar
texto. Se declaran al poner el contenido entre comillas.
Abre tu consola y escribe lo siguiente:
"Hola, mi nombre es Michelle"
// returns > "Hola, mi nombre es Michelle"
'Soy desarrolladora web'
// returns > "Soy desarrolladora web"
"123"
// returns > "123"

Tanto las comillas simples como las dobles pueden ser usadas para declarar strings, siempre y
cuando coincidan al principio y al final. Casi cualquier cosa puede colocarse entre comillas, y
JavaScript crear un string value de esa cosa.

Existen un par de caracteres en los data types strings que tienen un comportamiento especial.
Por ejemplo, cuando una diagonal invertida ("\") se encuentra dentro de un texto entre
comillas, indica que el carcter siguiente tiene un significado especial. Esto se denomina
escapar el carcter. Cuando el carcter n sigue a una diagonal invertida, se interpreta como
una nueva lnea. Similarmente, una t despus de la diagonal invertida significa un tab. Escribe
los siguientes textos en tu consola (recuerda siempre colocarlos entre comillas, sean simples o
dobles).
"Esta es la primera lnea \n Y esta la segunda"
// returns > "Esta es la primera lnea
// Y esta la segunda"
'Mi lenguaje favorito es \t JavaScript'
// retuns > "Mi lenguaje favorito es JavaScript"

Cuando una comilla es precedida por una diagonal invertida, la comilla no terminar la
cadena sino que ser parte de ella (la cadena).
"Yo \"estudio\" en Laboratoria"
// returns > "Yo "estudio" en Laboratoria"

Existen, por supuesto, situaciones en las que querrs que una diagonal invertida sea slo eso
en una cadena de texto, no un cdigo especial. Si dos diagonales invertidas estn juntas, se
volvern una, y slo eso quedar como resultado en el valor de la cadena.
"Un carcter de nueva lnea es escrito \"\\n\"."
// returns > "Un carcter de nueva lnea es escrito "\n"."

Las cadenas de texto no pueden ser divididas numricamente, multiplicadas, o restadas, pero
el carcter + puede ser usado en ellas. No suma, sino que concatena; pega dos strings. La
siguiente lnea produce el string "concatenar":
"con" + "cat" + "e" + "nar"
// returns > "concatenar"

Ten cuidado mezclando operaciones entre numbers y strings. Por ejemplo, multiplicar un
number por un string resulta en NaN.
"hola" * 3
// returns > NaN
Hay ms maneras de manipular strings, que veremos ms adelante.

OPERADORES UNARIOS
No todos los operadores son smbolos. Algunos son escritos como palabras. Un ejemplo es el
operador typeof, que produce una cadena de texto que representa el tipo del valor que le
pasaste.
typeof 4.5
// returns > "number"
typeof "hola"
// returns > "string"
typeof NaN
// returns > "number"
typeof Infinity
// returns > "number"

Fjate que verificamos que NaN e Infinity son del tipo number (de valor simblico), tal como lo
mencionamos anteriormente.
Los otros operadores que hemos visto operaban sobre dos valores, pero typeof slamente
toma un valor. Los operadores que usan dos valores son llamados operadores binarios,
mientras que aquellos que slo toman uno son llamados operadores unarios.
El operador menos puede usar tanto como operador binario como operador unario.
- (10 - 2)
// returns > -8

3. Booleans
A menudo, necesitars un valor que simplemente distinga entre dos posibilidades, como "s" y
"no" o "encendido" y "apagado". Para esto, JavaScript tiene un tipo de dato boolean, que tiene
slo dos valores: true (verdadero) y false (falso).
OPERADORES COMPARATIVOS
Realiza esta comparacin en tu consola:
3 > 2
// returns > true

2 < 3
// returns > false

typeof (3 > 2)
// returns > "boolean"

typeof (2 > 3)
// returns > "boolean"
Los signos > y < son los smbolos tradicionales para "es mayor que" y "es menor que",
respectivamente. Estos son operadores binarios (porque opera sobre dos valores). Aplicarlos
resulta en un valor de tipo boolean que indica si son ciertos.
Los strings pueden ser comparados de la misma manera.
"Aardvark" < "Zoroaster"
// returns > true
La manera en que los strings son ordenadas es ms o menos alfabticamente: las letras
maysculas son siempre "menores" que las minsculas, as que "Z" < "a" es true, y los
caracteres no alfabticos (!, -, y as por el estilo) son tambin incluidos en el ordenamiento.La
comparacin real est basada en el estndar Eloquent Unicode.
"Zeyla" < "ana"
// returns > true
"Zeyla" < "!na"
// returns > false
Otros operadores similares son >= (mayor o igual que), <= (menor o igual que), == (igual que), y
!= (no es igual que).
"Itchy" == "Itchy"
// returns > true
"Itchy" != "Scratchy"
// returns > true
5 == 5
// returns > true
10 != "diez"
// returns > true
Slo existe un valor en JavaScript que no es igual a s mismo, y este es NaN, que significa "no es
un nmero".
NaN == NaN
// returns > false
La intencin de NaN es representar el resultado de un clculo sin sentido y como tal, no es
igual al resultado de cualquier otro clculo sin sentido.
OPERADORES LGICOS
Hay tambin algunas operaciones que pueden ser aplicadas a los valores Booleans. JavaScript
soporta tres operadores lgicos: and, or y not. Estos pueden ser usados para "razonar" con los
Booleans.
El operador && representa la operacin lgica and ("y"). Es un operador binario, y su resultado
es true (verdadero) slo si los dos valores dados son verdaderos. El operador || denota la
operacin lgica or ("o"). Devuelve verdadero si cualquiera de los dos valores dados es
verdadero. Not (Negacin) es escrito como un smbolo de admiracin !. Es un operador binario
que voltea el valor que se le de; !true produce false y !false produce true. Veamos unos
ejemplos:
true && true
// returns > true
true && false
// returns > false
false && false
// returns > false
true || true
// returns > true
true || false
// returns > true
!true
// returns > false
!false
// returns > true
El ltimo operador lgico del que aprenders no es unario, ni binario, sino ternario, opera en
tres valores. Este es escrito con un smbolo de interrogacin y dos puntos, como sigue:
true ? 1 : 2
// returns > 1
false ? 1 : 2
// returns > 2
Este es llamado el operador condicional (o algunas veces el operador tenario dado que es el
nico operador de este tipo en el lenguaje). El valor a la izquierda del signo de interrogacin
"escoge" cul de los otros dos valores resultar. Cuando es verdadero, el valor central es
escogido, y cuando es falso, el valor de la derecha se da como resultado.
4. Null y undefined
Existen dos valores especiales, escritos null y undefined, que son usados para denotar la
ausencia de un valor significativo. Son valores en s mismos, pero no poseen ninguna
informacin. Muchas operaciones en el lenguaje que no producen un valor con significado (lo
vers despus) producen undefined simplemente porque tienen que producir algn valor.
La diferencia en el significado entre undefined y null es un accidente del diseo de JavaScript, y
no importa la mayora del tiempo.

CONVERSIN AUTOMTICA DE TIPO


Cuando un operador es aplicado al tipo "incorrecto" de valor, JavaScript convertir
silenciosamente el valor en el tipo de dato que espera, usando un conjunto de reglas que a
menudo no son lo que t quieres o esperas. Esto es llamado coercin de tipo. Mira estos
ejemplos:
8 * null
// returns > 0
"5" - 1
// returns > 4
"5" + 1
// returns > 51
"cinco" * 2
// returns > NaN
false == 0
// returns > true
El null en la primera expresin se vuelve 0, y el "5" en la segunda expresin se convierte en 5
(de string a number). An as, en la tercera expresin, + intenta hacer concatenacin de strings
antes de una suma numrica, as que el 1 es convertido en "1" (de number a string). Cuando
algo que no se corresponde con un nmero de manera obvia (como "cinco" o undefined) es
convertido a un nmero, el valor resultante es NaN. Las siguientes operaciones aritmticas
sobre NaN seguirn produciendo NaN. Por eso, en la cuarta expresin, "cinco" * 2 retorna
NaN.

En el caso de la quinta expresin, cuando comparamos valores que tienen tipos de dato
diferentes, JavaScript usa un complicado y confuso conjunto de reglas para determinar qu
hacer. En la mayora de los casos, slo trata de convertir uno de los valores al tipo de dato del
otro valor. Sin embargo, cuando null o undefined estn en cualquier lado de la operacin,
resulta verdadero slo en el caso de que los dos lados sean null o undefined.
Siguiendo con la quinta expresin, las reglas para convertir cadenas y nmeros a Booleanos
dicen que 0, NaN y la cadena vaca ("") cuentan como false, mientras que todos los dems
valores cuentan como true. Debido a esto, las siguientes expresiones retornan true:
false == 0
// returns > true
"" == 0
// returns > true
Para casos en el que no quieres que ocurra ninguna conversin automtica de tipos, existen
dos operadores extra: === y !==. El primero prueba si un valor es precisamente igual a otro, y
el segundo si no es precisamente igual. Por lo tanto, al cambiar de == a === las mismas
expresiones anteriores, tenemos el resutado contrario: false:
false === 0
// returns > false
"" === 0
// returns > false

Potrebbero piacerti anche