Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Growth Mindset
Objetivos de aprendizaje:
Entender qué es Growth Mindset (mentalidad de crecimiento) y
adoptarla antes de empezar este curso.
Objetivos de aprendizaje:
Entender qué es la programación y por qué aprender a
programar.
Entender qué es JavaScript y por qué aprenderlo.
Conocer algunas historias de egresadas de Laboratoria.
El texto a continuación es una traducción al español, con
ciertos ajustes, del capítulo 1 de JavaScript for kids, Nick
Morgan, 2015.
¿Qué es la programación?
¿Qué es JavaScript?
Objetivos de aprendizaje:
Entender la función del HTML para crear la estructura básica
de una página web.
Conocer los principales elementos y etiquetas HTML.
Aprender a darle dinamismo a una web utilizando JavaScript.
Tener un primer acercamiento al mundo del código, creando tu
primera página web.
El texto a continuación es una traducción al español, con
ciertos ajustes, del capítulo 5 de JavaScript for kids, Nick
Morgan, 2015; y de Eloquent JavaScript, de Marijn Haverbeke,
2014.
<!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>
<script src="nombre-del-documento.js"></script>
El mismo elemento script tiene un "atributo" llamado src (de
source, que significa fuente en inglés), al cual se le puede
asignar la ruta de tu documento JavaScript.
Objetivos de aprendizaje:
Entender qué se entiende por values (valores) en JavaScript.
Conocer los diferentes data types (tipos de datos) en
JavaScript.
Aprender cómo combinar y transformar valores con operadores
en JavaScript.
El texto a continuación se basa en gran medida, con ciertos
ajustes, en el capítulo 1 de Eloquent JavaScript,de Marijn
Haverbeke, 2014. Traducción en Español disponible gracias
a hectorip.
Tipos de datos
Las computadoras son un gran recurso para trabajar con
grandes cantidades de datos. De hecho, en el mundo de l as
computadoras solo existen datos. Con las 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 más
fácil el manejo de grandes cantidades de bits, los podemos
dividir en "pedazos" que representan piezas de información.
En un entorno JavaScript, estos pedazos son
llamados values (valores en español). Cada value tiene
un data type (tipo de dato) que determina su rol. En
JavaScript existen cinco (5) tipos de datos primitivos:
1. numbers (números).
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 programación. Nos permiten organizar información
y determinar cómo correr el programa. En esta lección
aprenderás a definir y manipular estos tipos de datos.
1. Numbers
Los values de tipo number son, sin sorpresa alguna, valores
numéricos. Es decir, pedazos de data que representan
información numérica se representan con el tipo number. Esto
incluye números positivos, negativos, enteros y decimales.
Además,el tipo de datos number tiene tres valores simbólicos:
+Infinity, -Infinity y NaN (no-un-número).
Veamos varios ejemplos. Abre tu consola (recuerda que lo
haces haciendo click con el botón derecho del mouse ->
inspect -> console) y escribe los siguientes números. Al
hacerlo, la consola te lo regresa el número de vuelta.
13
// returns > 13
-9.81
// returns > -9.81
También puedes hacer uso de la notación científica para
números muy grandes o muy pequeños, añadiendo una "e" de
"exponente", seguido por el exponente del número:
5e10
// returns > 50000000000
-2.998e8
// returns > -299800000
Operadores Aritméticos
Lo principal que se hace con los números es aritmética.
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 símbolos + y * son llamados operators (operadores). El
primero representa la suma y el segundo la multiplicación. Al
poner un operador entre dos valores, se aplicará la operación
a esos valores y producirá un nuevo valor. Como ves, la
multiplicación ocurre primero. Pero como en matemáticas,
puedes cambiar esto encerrando en paréntesis la suma.
(100 + 4) * 11
// returns > 1144
Para la resta existe el operador -, y la división se puede
hacer con el operador /. Veamos más ejemplos (recuerda
hacerlos en tu consola también!):
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
También existe un operador aritmético más, que podrías no
reconocer inmediatamente. El símbolo % es usado para
representar la operación 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). Verás a menudo
este operador referido como módulo, aunque técnicamente
residuo es más preciso.
5 % 3
// returns > 2
7 % 2
// returns > 1
2. Strings
El siguiente data type básico son los strings. Es el tipo de
dato que utilzamos para representar texto. Se declaran al
poner el contenido entre comillas.
Abre tu consola y escribe lo siguiente:
"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 carácter siguiente tiene un
significado especial. Esto se denomina escapar el carácter.
Cuando el carácter n sigue a una diagonal invertida, se
interpreta como una nueva línea. Similarmente, una t después
de la diagonal invertida significa un tab. Escribe los
siguientes textos en tu consola (recuerda siempre colocarlos
entre comillas, sean simples o dobles).
"hola" * 3
// returns > NaN
Operadores Unarios
No todos los operadores son símbolos. 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"
- (10 - 2)
// returns > -8
3. Booleans
A menudo, necesitarás 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 sólo dos valores: true (verdadero)
y false(falso).
Operadores comparativos
Realiza esta comparación 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 símbolos 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.
"Itchy" == "Itchy"
// returns > true
"Itchy" != "Scratchy"
// returns > true
5 == 5
// returns > true
10 != "diez"
// returns > true
NaN == NaN
// returns > false
Operadores Lógicos
Hay también algunas operaciones que pueden ser aplicadas a
los valores Booleans. JavaScript soporta tres operadores
lógicos: and, or y not. Estos pueden ser usados para
"razonar" con los Booleans.
El operador && representa la operación lógica and ("y"). Es
un operador binario, y su resultado es true (verdadero) sólo
si los dos valores dados son verdaderos. El
operador || denota la operación lógica or ("o"). Devuelve
verdadero si cualquiera de los dos valores dados es
verdadero. Not (Negación) es escrito como un símbolo de
admiración !. 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 > true
!true
// returns > false
!false
// returns > true
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
interrogación "escoge" cuál 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 información. Muchas operaciones en el lenguaje que no
producen un valor con significado (lo verás después)
producen undefinedsimplemente porque tienen que producir
algún valor.
La diferencia en el significado entre undefined y null es un
accidente del diseño de JavaScript, y no importa la mayoría
del tiempo.
8 * null
// returns > 0
"5" - 1
// returns > 4
"5" + 1
// returns > 51
"cinco" * 2
// returns > NaN
false == 0
// returns > true
false == 0
// returns > true
"" == 0
// returns > true
Para casos en el que no quieres que ocurra ninguna conversión
automática 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