1. ¡Hola! Vamos a conocernos mejor. ¿Cuál es tu nombre?

Escríbelo entre comillas, así: "Ryan" , y presiona Enter.

2. Encontrar la longitud

¡Bien hecho! ¿Qué tan largo es tu nombre? Averígualo escribiendo tu nombre en comillas, y

poniendo al final .length . Después presiona Enter (haz esto de ahora en adelante después de

completar las instrucciones).

En mi caso, sería "Ryan".length

3. Matemática básica

¡Buen trabajo! Ahora vamos a hacer algunas operaciones matemáticas. ¡Puedes hacerlas con la

programación!

Calcula cualquier operación de suma que quieras. Suma dos números de la forma 3 +4 .

4. Números y más

¿Ves lo que pasó? Puedes usar la línea de comandos para hacer operaciones matemáticas

básicas. Intenta jugar con ella un poco más.

Si lo deseas, puedes usar * para hacer multiplicaciones y / para hacer divisiones. Ingresa

otra ecuación válida para pasar esta lección.

5. Error: ¡no calcula!

Hay algunas cosas que no puedes hacer en la consola. Los computadores hablan únicamente

ciertos idiomas, como el que has estado usando hoy: ¡JavaScript!

Si usas palabras que no hacen parte del lenguaje JavaScript, el computador se confundirá y te

mostrará un mensaje de error.

Trata de confundir al intérprete usando una palabra que él no conozca, como berenjena . Te

mostrará un ReferenceError.

1. Editor y comentarios

Hasta ahora, todo lo que has hecho tiene solamente una línea en la consola. Pero los programas

interesantes incluyen muchas líneas de código.

Aquí tenemos una nueva herramienta: el editor. Puedes escribir muchas líneas de código,

presionar el botón Ejecutar, y el resultado aparecerá en el cuadro inferior.

Tal vez hayas notado que el cuadro ya viene con un código, y que cada línea comienza con // .

Todo lo que aparezca después de // es llamado un comentario y es ignorado por el computador.

Los comentarios son muy útiles para explicar partes difíciles de tu código o como recordatorios para

ti mismo. También puedes deshabilitar temporalmente líneas de códigovolviéndolas comentarios, o

añadiendo // al inicio de las mismas

El computador ignorará el código de las líneas 1 y 2, ya que aparece como comentarios.

En la línea 4, averigua cuántas letras tiene la palabra "gato", y multiplícalo por 9.

2. ¿Qué estoy aprendiendo?

Esto es JavaScript (JS), un lenguaje de programación. Existen muchos lenguajes, pero JS tiene

muchos usos y es fácil de aprender.

¿Para qué podemos usar JavaScript?

para crea sitios web que respondan a las interacciones del usuario

crear aplicaciones y juegos (por ejemplo, blackjack)

acceder a información en Internet (por ejemplo, encontrar las palabras más populares en Twitter

según el tema)

organizar y presentar datos (por ejemplo, automatizar el trabajo de las hojas de cálculo; o la

visualización de datos)

¡Presiona Ejecutar para ver un ejemplo de cómo JavaScript puede ser interactivo!

3. JavaScript interactivo

Lo que acabamos de ver es un ejemplo de cómo JavaScript puede ser interactivo. ¡Ahora inténtalo

tú mismo!

Ejemplos:

confirm("¡Me siento súper!");

confirm("Estoy listo para continuar.");

Estas cajas de diálogos pueden ser usadas en los sitios web para que los usuarios confirmen

acciones. Probablemente las has visto aparecer cuando intentas borrar cosas importantes o cuando

sales de un sitio web sin grabar los cambios.

Escribe tu propio mensaje que quieras que el usuario confirme.

4. ¿Qué es programar?

Programar es como escribirle al computador una lista de instrucciones, de forma que pueda hacer

cosas geniales con la información que le das.

Los programas no pueden tender tu cama por ti, pero sí pueden hacer cálculos, llevar un registro de

tu cuenta en el banco o enviarle un mensaje a uno de tus amigos.

Para realizar cualquiera de estas acciones, el programa necesita que se le ingresen datos. Puedes

pedirle al usuario que ingrese datos mediante un prompt.

Ejemplos:

1. prompt("¿Cuál es tu nombre?");

2. prompt("Qué es Ubuntu?");

Usa el comando prompt para preguntarle al usuario de dónde es.

5. Tipos de datos I & II: Números y Strings

Existen varios tipos de datos. ¡Y ya usaste dos de ellos!

a. numbers son cantidades, tal como las que conoces. Puedes hacer operaciones matemáticas con

ellas.

b. strings son secuencias de caracteres, como las letras a-z , los espacios, e incluso los números.

Todos estos son strings: "Ryan" , "4" y "¿Cuál es tu nombre?" Los strings son muy útiles

como etiquetas, nombres y contenido para tus programas.

Para generar un número en tu código, simplemente escríbelo como un numeral sin

comillas: 42 , 190.12334 .

Para escribir un string, debes ponerlo entre comillas: "¿Cuál es tu nombre?"

Escribe un string de al menos 3 palabras y averigua cuántos caracteres tiene. ¡.length cuenta

todos los caracteres en un string, incluidos los espacios!

6. Tipos de datos III: booleanos

El tercer tipo de dato es un booleano (que se pronuncia "bu-lea-no"; bautizado así en honor

aGeorge Boole). Un booleano puede tener dos valores, true (verdadero) o false (falso).

Puedes usarlos en tu código haciendo sentencias que sean igual a true o false .

Por ejemplo:

1. 10 > 3 es igual a true

2. 5 < 4 es una locura, así que es igual a false

Los booleanos son bastante útiles porque más adelante nos permitirán ejecutar ciertas partes de

nuestro código solamente si ciertas condiciones son verdaderas . Por ejemplo, los cajeros

automáticos calculan si [la cantidadde dinero en tu cuenta bancaria] > 0 y solamente

te darán dinero si la respuesta es true .

Escribe un código que diga true si se cumple que la sentencia "¡Soy un campeón

escribiendo código! tiene más de 10 caracteres.

Simplemente escribe la condición en el editor, y será evaluada automáticamente.

1. Usando console.log

Posiblemente te hayas dado cuenta de que el intérprete no muestra mensajes de todas las acciones

que ejecuta. Así que a veces, cuando queremos saber qué es lo que está pensando, tenemos que

preguntarle directamente.

El comando console.log() toma lo que está entre paréntesis y lo registra en la consoladebajo

de tu código; ¡por eso es que se llama console.log() (registro de consola)!

A esta acción se le conoce comúnmente como impresión.

Imprime las siguientes dos sentencias console.log al mismo tiempo. Escribe una en la línea 1

y la otra en la línea 2. Luego presiona ejecutar.

console.log(2 * 5)

console.log("Hola")

2. Comparaciones

Hemos aprendido acerca de tres tipos de datos: numbers, strings y booleanos. Vamos a aprender

sobre los operadores de comparación y como se relacionan con los tipos de datos.

Lista de operadores de comparación:

> Mayor que

< Menor que

<= Menor o igual que

>= Mayor o igual que

=== Igual que

Intenta usar cada uno de los operadores anteriores.

1. Selecciona el operador de comparación correcto para hacer que cada una de las cuatro

sentencias muestre el mensaje true .

2. Escribe otras dos sentencias console.log que sean igual a false .

3. Decisiones, decisiones...

¡Buen trabajo con las comparaciones! Ahora vamos a echarle un vistazo a qué tan útiles pueden

ser.

Puedes usar comparaciones más booleanos para decidir si un bloque de código debe ejecutarse. A

esto se le llama una sentencia if o sentencia condicional.

Mira el código en la parte derecha. El computador primero observa la línea 1. Si la condición (en

este caso, si 100 < 2 ) es true , entonces ejecuta el código dentro de las llaves {} .

Si la condición es false , omite el código en las llaves por completo y pasa a la siguiente línea,

que es la línea 6.

Edita la línea 1, de manera que tu programa imprima ambas sentencias.

4. Los computadores son inteligentes

¡Buen trabajo con las sentencias if ! Ahora vamos a darle a tu robot dos opciones.

El robot ha llegado a una encrucijada en el camino. Va a revisar el programa que escribiste para

decidir qué camino debería tomar.

En forma de código, se ve más o menos así:

if (si esta condición es true)

{

// ejecuta este código

}

else // "de otra manera"

{

// ejecuta en cambio este código

}

Tu robot comienza en la primera línea. Si la condición es true, se ejecutará el código en el primer

par de llaves, igual que en el ejercicio anterior. Esto hará que se ignore el bloque de código else .

Pero si la condición es false , el robot ignorará el primer bloque y ejecutará el bloque después

de else .

De esta manera, el robot ejecuta una parte del código o la otra, dependiendo de la condición en la

primera línea.

¡Le estás enseñando como tomar decisiones propias! Los robots crecen tan rápido. Parecía apenas

ayer que tenías que cambiarle los pañales robóticos.

1. Escribe una condición en la línea 1 del programa que sea igual a false . ¿Que es lo que

hará tu robot?

2. Escribe un código que se ejecute si la condición es false, pero ahora para hacerlo

usa console.log .

5. Más ejercicios con condicionales

Es muy importante que uses la sintaxis correcta. Hazte preguntas para saber si la recuerdas. Haz

por ti mismo lo que más puedas, pero si necesitas un recordatorio, pulsa el botón de Sugerencia en

la parte inferior.

Escribe un código que contenga una sentencia if/else , tal cual como lo hicimos en el

ejercicio anterior. Si la condición es true , haz que aparezca el mensaje Tengo razón . Si la

condición es false, haz que aparezca el mensaje Estoyequivocado .

Ahora parece aburrido porque estamos usando únicamente dos números en la condición. ¡Pero

pronto podremos usar condiciones más interesantes, como la cantidad de dinero que tengas en la

cuenta del banco, el número de amigos que tengas en Facebook, o el nombre de tu mascota!

Podremos comparar estos elementos incluso a medida que cambian.

6. Los computadores no son tan inteligentes

¡Bien hecho! Ahora bien, los computadores son muy literales. La sintaxis debe estar en el lugar

correcto para que el computador pueda entender el código.

A medida que te inicies en la programación, te iremos enseñando muchas reglas sobre la sintaxis.

Es más o menos como la gramática de los lenguajes de programación. ¡Primero la gramática, y

luego la poesía de la programación!

En el siguiente código hay muchos errores. ¡Encuéntralos todos y corrígelos!

Lo que estás haciendo se conoce como "depuración", un término que fue popularizado

por Grace Hopper cuando literalmente sacó una polilla de su computador.

1. Repaso de mitad de lección

¡Hasta ahora hemos aprendido mucho! Muchos términos nuevos, mucha sintaxis. Vamos a

detenernos un poco y hacer un repaso. Hemos aprendido:

1. Confirm y prompt

¡Podemos hacer que aparezcan cuadros emergentes!

confirm("Estoy bien");

prompt("¿Tú estás bien?");

2. Tipos de datos

a. numbers (P.ej, 4.3 , 134 )

b. strings (P.ej, "Los perros hacen ¡Guau!" , "Experto en JavaScript" )

c. booleanos (P.ej, false , 5 > 4 )

3. Condicionales

Si se cumple la primera condición, se ejecutará el primer bloque de código. Si no se cumple, se

ejecutará el código en el bloque else . Mira el código en la parte derecha para tener otro ejemplo.

¡Esperamos que este repaso haya sido de ayuda! Haz clic en 'Ejecutar' para continuar.

2. Matemáticas

Ya hemos visto las operaciones matemáticas básicas. Los símbolos matemáticos básicos que

aprendimos en la escuela también funcionan aquí. ¡Hasta el orden en el que el computador

entiende las matemáticas es el mismo que en la escuela!

Código:

1. ( ) : controla el orden de las operaciones

2. * y / : multiplicación y división

3. - y + : resta y suma

Ejemplos:

1. 100/10 es igual a 10

2. "Jane".length + 5 es igual a 9

3. 5*(3+1) es igual a 20

1. Completa partes faltantes en el código para escribir una sentencia if / else. Haz que la

condición sea igual a true.

2. Completa la sentencia else para que genere el mensaje con el string "Error Error Error" en

la consola.

3. 3. Matemáticas y modulo

4. Vamos a ver un símbolo interesante llamado modulo. Cuando se coloca % entre dos

números, el computador dividirá el primer número por el segundo, y luego dará como

resultado el residuo de esa división.

5. Así que, si escribimos 23 % 10 , estamos dividiendo 23 entre 10, lo que da como resultado

2, y el residuo es 3. Así que 23 % 10 es igual a 3 .

6. Más ejemplos:

17 % 5 es igual a 2

13 % 7 es igual a 6

7. Usa console.log y modulo tres veces para obtener el residuo de las siguientes

ecuaciones:

8. a. 14 / 3

b. 99 / 8

c. 11 / 3

4. Modulo y if / else

Así que, ¿para qué aprender a usar modulo? Por una parte, sirve para probar la capacidad de

división. Piensa en 30 % 10 . ¿Cuál es el resultado? No hay residuo, así que es 0 .

¿Y 9 % 3 ? También es 0 .

¿ 200 % 100 ? ¡Adivinaste, es.... 2 !

Mentiras, también es 0 .

Es divertido si lo combinamos con condicionales.

Edita la línea 3 de manera que se muestren los prompt correctos.

5. Subcadenas

Hemos aprendido unas cuantas maneras de manipular los números. ¿Qué hay acerca de los

strings?

En ocasiones no querrás que aparezca el string completo, sino solo una parte de él. Por ejemplo,

puedes configurar tu bandeja de entrada de Gmail para que muestre los primeros 50 (o más o

menos) caracteres de cada mensaje, de manera que tengas una vista previa de ellos. Esta vista

previa es una subcadena del string original (el mensaje completo).

Código:

"alguna palabra".substring(x, y) donde x es el punto donde se comienza a cortar y y es

el punto donde se termina de cortar el string original.

La parte del número es un poco extraña. Para escoger la parte de "ho" en "hola", tendrías que

escribir algo así: "hola". substring(0, 2);

Imagínate que hay un marcador a la izquierda de cada caracter, así: 0-h-1-o-2-l-3-a-4 .

Si comienzas a cortar en el 0 y terminas en el 2 , tendrás ho .

Más ejemplos:

1. Las primeras tres letras de "Batman"

"Batman".substring(0,3)

2. Desde la 4ta hasta la 6ta letra de "laptop"

"laptop".substring(3,6)

Encuentra de la 4ta a la 7ma letras del string "día maravilloso".

6. Más ejercicios con subcadenas

¡Puede ser difícil saber la posición de las letras de la subcadena! Vamos a verificar que de verdad

sabemos como hacerlo bien.

Usa console.log en tres líneas separadas para obtener las subcadenas de los siguientes

strings.

a. "Ene" en "Enero"

b. "Melbourne es" en "Melbourne es grandioso" (¡Ten en cuenta el espacio!)

c. "rguesas" in "Hamburguesas"

1. Variables

Hemos aprendido como hacer algunas cosas: a hacer strings, a saber cuántos caracteres tiene un

string, a saber qué caracter está en una determinada posición y a hacer operaciones matemáticas

básicas. ¡No está mal para ser el trabajo de un día!

Para escribir un código que sea más complejo, necesitamos una forma de 'guardar' los valores de

nuestro código. Esto lo hacemos definiendo una variable con un nombre específico, que distingue

entre mayúsculas y minúsculas. Una vez que crees (o que declares) una variable con un nombre

particular, puedes llamar a ese valor escribiendo el nombre de la variable.

Código:

var nombreVariable = tipo de datos;

Example:

a. var miNombre = "Leng";

b. var miEdad = 30;

c. var esImpar = true;

Crea una variable llamada miEdad y escribe cuántos años tienes.

2. Más ejercicios con variables

Ya hemos visto como crear una variable. ¿Pero cómo la usamos? Es muy útil pensar que, cada vez

que escribas el nombre de la variable, estás pidiéndole al computador que tome el nombre de la

variable y lo intercambie por su valor.

Por ejemplo:

var miNombre = "Steve Jobs";

miNombre.substring(0,5)

Mira la segunda línea arriba. Le pediste al computador que

intercambiara miNombre por Steve Jobs , de manera que

miNombre.substring(0,5)

se vuelve

"Steve Jobs".substring(0,5)

lo que es igual a Steve .

Veamos otro ejemplo

var miEdad = 120;

¿A qué es igual

miEdad % 12 ? Haz clic en la sugerencia para ver si tu respuesta es correcta.

Es así que la variable almacenan el valor de la variable, ya sea un number o un string. ¡Como verás

pronto, esto hace que escribir programas largos sea mucho más fácil!

Sigue las instrucciones en los comentarios del código para continuar.

3. Cambiar los valores de variables

Hasta ahora hemos aprendido

a. como crear una variable

b. como usar una variable

Ahora vamos a ver como cambiar el valor de una variable. El valor de una variable se puede

cambiar fácilmente. ¡Solo pretende que estás creando una nueva variable, pero usando el nombre

de la variable que ya existe!

Ejemplo:

var miEdad = 30;

Digamos que cumplí años y quiero cambiar cuántos años tengo.

miEdad = 31;

¡Ahora el valor de miEdad es 31!

Sigue las instrucciones en las líneas 1, 3, 5 y 8. Estamos usando este método para mostrarte

que el orden en el que das indicaciones al computador es muy importante.

4. Conclusión: Parte 1

¡Vamos a hacer un repaso rápido!

Tipos de datos

a. numbers - úsalos como los números comunes y corrientes

b. strings - todo lo que esté entre " " es un string. Las palabras deben ser strings.

c. booleanos - solamente pueden ser true (verdaderos) o false (falsos).

Variables

Almacenamos valores de datos en las variables. Podemos recuperar los valores de esas variables

escribiendo el nombre de la variable.

Manipular numbers & strings

a. numbers - operadores de comparación, modulo

b. strings - length, subcadena

console.log( )

Muestra en la consola cualquier cosa que pongamos entre paréntesis.

1. Lee el comentario en la línea 1.

2. En la línea 3, crea una variable que se llame miTrabajo y asígnale un valor

3. En la línea 4, registra la cantidad de caracteres de miTrabajo en la consola

5. Conclusión: Parte 2

Felicitaciones por haber llegado hasta este punto. ¡Haz aprendido un montón! ¡Solo un ejercicio

más antes de una merecida felicitación!

La última cosa difícil que aprendimos fueron las sentencias if / else.

Las sentencias if / else son sentencias condicionales. Bajo condiciones diferentes, el computador

mostrará diferentes resultados.

1. Escribe tu propia sentencia if / else.

2. La única instrucción es que el resultado del cálculo de la sentencia es un registro en la

consola que diga "¡Terminé mi primer curso!"