Está en la página 1de 11

1. Hola! Vamos a conocernos mejor. Cul es tu nombre? Escrbelo entre comillas, as: "Ryan" , y presiona Enter.

2. Encontrar la longitud
Bien hecho! Qu tan largo es tu nombre? Avergualo escribiendo tu nombre en comillas, y poniendo al final .length . Despus presiona Enter (haz esto de ahora en adelante despus de completar las instrucciones). En mi caso, sera "Ryan".length 3. Matemtica bsica Buen trabajo! Ahora vamos a hacer algunas operaciones matemticas. Puedes hacerlas con la programacin! Calcula cualquier operacin de suma que quieras. Suma dos nmeros de la forma 3 +4 . 4. Nmeros y ms Ves lo que pas? Puedes usar la lnea de comandos para hacer operaciones matemticas bsicas. Intenta jugar con ella un poco ms. Si lo deseas, puedes usar * para hacer multiplicaciones y / para hacer divisiones. Ingresa otra ecuacin vlida para pasar esta leccin. 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 intrprete 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 lnea en la consola. Pero los programas interesantes incluyen muchas lneas de cdigo. Aqu tenemos una nueva herramienta: el editor. Puedes escribir muchas lneas de cdigo, presionar el botn Ejecutar, y el resultado aparecer en el cuadro inferior. Tal vez hayas notado que el cuadro ya viene con un cdigo, y que cada lnea comienza con // . Todo lo que aparezca despus de // es llamado un comentario y es ignorado por el computador.

Los comentarios son muy tiles para explicar partes difciles de tu cdigo o como recordatorios para ti mismo. Tambin puedes deshabilitar temporalmente lneas de cdigovolvindolas comentarios, o aadiendo // al inicio de las mismas El computador ignorar el cdigo de las lneas 1 y 2, ya que aparece como comentarios. En la lnea 4, averigua cuntas letras tiene la palabra "gato", y multiplcalo por 9. 2. Qu estoy aprendiendo? Esto es JavaScript (JS), un lenguaje de programacin. Existen muchos lenguajes, pero JS tiene muchos usos y es fcil 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 informacin en Internet (por ejemplo, encontrar las palabras ms populares en Twitter segn el tema) organizar y presentar datos (por ejemplo, automatizar el trabajo de las hojas de clculo; o la visualizacin de datos)

Presiona Ejecutar para ver un ejemplo de cmo JavaScript puede ser interactivo! 3. JavaScript interactivo Lo que acabamos de ver es un ejemplo de cmo JavaScript puede ser interactivo. Ahora intntalo t mismo! Ejemplos:
confirm("Me siento sper!"); confirm("Estoy listo para continuar.");

Estas cajas de dilogos 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 informacin que le das. Los programas no pueden tender tu cama por ti, pero s pueden hacer clculos, 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("Cul es tu nombre?"); 2. prompt("Qu es Ubuntu?"); Usa el comando prompt para preguntarle al usuario de dnde es. 5. Tipos de datos I & II: Nmeros 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 matemticas con ellas. b. strings son secuencias de caracteres, como las letras a-z , los espacios, e incluso los nmeros. Todos estos son strings: "Ryan" , "4" y "Cul es tu nombre?" Los strings son muy tiles como etiquetas, nombres y contenido para tus programas. Para generar un nmero en tu cdigo, simplemente escrbelo como un numeral sin comillas: 42 , 190.12334 . Para escribir un string, debes ponerlo entre comillas: "Cul es tu nombre?" Escribe un string de al menos 3 palabras y averigua cuntos 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 cdigo 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 ms adelante nos permitirn ejecutar ciertas partes de nuestro cdigo solamente si ciertas condiciones son verdaderas . Por ejemplo, los cajeros automticos calculan si [la cantidadde dinero en tu cuenta bancaria] > 0 y solamente te darn dinero si la respuesta es true . Escribe un cdigo que diga true si se cumple que la sentencia "Soy un campen escribiendo cdigo! tiene ms de 10 caracteres. Simplemente escribe la condicin en el editor, y ser evaluada automticamente. 1. Usando console.log

Posiblemente te hayas dado cuenta de que el intrprete 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 parntesis y lo registra en la consoladebajo de tu cdigo; por eso es que se llama console.log() (registro de consola)! A esta accin se le conoce comnmente como impresin. Imprime las siguientes dos sentencias console.log al mismo tiempo. Escribe una en la lnea 1 y la otra en la lnea 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 comparacin y como se relacionan con los tipos de datos. Lista de operadores de comparacin:
> 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 comparacin 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 ms booleanos para decidir si un bloque de cdigo debe ejecutarse. A esto se le llama una sentencia if o sentencia condicional. Mira el cdigo en la parte derecha. El computador primero observa la lnea 1. Si la condicin (en este caso, si 100 < 2 ) es true , entonces ejecuta el cdigo dentro de las llaves {} .

Si la condicin es false , omite el cdigo en las llaves por completo y pasa a la siguiente lnea, que es la lnea 6. Edita la lnea 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 debera tomar. En forma de cdigo, se ve ms o menos as:
if (si esta condicin es true) { // ejecuta este cdigo } else // "de otra manera" { // ejecuta en cambio este cdigo }

Tu robot comienza en la primera lnea. Si la condicin es true, se ejecutar el cdigo en el primer par de llaves, igual que en el ejercicio anterior. Esto har que se ignore el bloque de cdigo else . Pero si la condicin es false , el robot ignorar el primer bloque y ejecutar el bloque despus de else . De esta manera, el robot ejecuta una parte del cdigo o la otra, dependiendo de la condicin en la primera lnea. Le ests enseando como tomar decisiones propias! Los robots crecen tan rpido. Pareca apenas ayer que tenas que cambiarle los paales robticos. 1. Escribe una condicin en la lnea 1 del programa que sea igual a false . Que es lo que har tu robot? 2. Escribe un cdigo que se ejecute si la condicin es false, pero ahora para hacerlo usa console.log .

5. Ms ejercicios con condicionales Es muy importante que uses la sintaxis correcta. Hazte preguntas para saber si la recuerdas. Haz por ti mismo lo que ms puedas, pero si necesitas un recordatorio, pulsa el botn de Sugerencia en la parte inferior. Escribe un cdigo que contenga una sentencia if/else , tal cual como lo hicimos en el ejercicio anterior. Si la condicin es true , haz que aparezca el mensaje Tengo razn . Si la condicin es false, haz que aparezca el mensaje Estoyequivocado . Ahora parece aburrido porque estamos usando nicamente dos nmeros en la condicin. Pero pronto podremos usar condiciones ms interesantes, como la cantidad de dinero que tengas en la cuenta del banco, el nmero 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 cdigo. A medida que te inicies en la programacin, te iremos enseando muchas reglas sobre la sintaxis. Es ms o menos como la gramtica de los lenguajes de programacin. Primero la gramtica, y luego la poesa de la programacin! En el siguiente cdigo hay muchos errores. Encuntralos todos y corrgelos! Lo que ests haciendo se conoce como "depuracin", un trmino que fue popularizado por Grace Hopper cuando literalmente sac una polilla de su computador. 1. Repaso de mitad de leccin Hasta ahora hemos aprendido mucho! Muchos trminos 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 ests 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 condicin, se ejecutar el primer bloque de cdigo. Si no se cumple, se ejecutar el cdigo en el bloque else . Mira el cdigo en la parte derecha para tener otro ejemplo. Esperamos que este repaso haya sido de ayuda! Haz clic en 'Ejecutar' para continuar. 2. Matemticas Ya hemos visto las operaciones matemticas bsicas. Los smbolos matemticos bsicos que aprendimos en la escuela tambin funcionan aqu. Hasta el orden en el que el computador entiende las matemticas es el mismo que en la escuela! Cdigo: 1. ( ) : controla el orden de las operaciones 2. * y / : multiplicacin y divisin 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 cdigo para escribir una sentencia if / else. Haz que la condicin 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. Matemticas y modulo 4. Vamos a ver un smbolo interesante llamado modulo. Cuando se coloca % entre dos nmeros, el computador dividir el primer nmero por el segundo, y luego dar como resultado el residuo de esa divisin. 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. Ms 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 divisin. Piensa en 30 % 10 . Cul es el resultado? No hay residuo, as que es 0 . Y 9 % 3 ? Tambin es 0 . 200 % 100 ? Adivinaste, es.... 2 ! Mentiras, tambin es 0 . Es divertido si lo combinamos con condicionales. Edita la lnea 3 de manera que se muestren los prompt correctos. 5. Subcadenas Hemos aprendido unas cuantas maneras de manipular los nmeros. Qu hay acerca de los strings? En ocasiones no querrs 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 ms 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). Cdigo:
"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 nmero es un poco extraa. Para escoger la parte de "ho" en "hola", tendras que escribir algo as: "hola". substring(0, 2); Imagnate 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 , tendrs ho . Ms 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 "da maravilloso". 6. Ms ejercicios con subcadenas Puede ser difcil saber la posicin de las letras de la subcadena! Vamos a verificar que de verdad sabemos como hacerlo bien. Usa console.log en tres lneas 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 cuntos caracteres tiene un string, a saber qu caracter est en una determinada posicin y a hacer operaciones matemticas bsicas. No est mal para ser el trabajo de un da! Para escribir un cdigo que sea ms complejo, necesitamos una forma de 'guardar' los valores de nuestro cdigo. Esto lo hacemos definiendo una variable con un nombre especfico, que distingue entre maysculas y minsculas. Una vez que crees (o que declares) una variable con un nombre particular, puedes llamar a ese valor escribiendo el nombre de la variable. Cdigo:
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 cuntos aos tienes. 2. Ms ejercicios con variables Ya hemos visto como crear una variable. Pero cmo la usamos? Es muy til pensar que, cada vez que escribas el nombre de la variable, ests pidindole 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 lnea 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 vers pronto, esto hace que escribir programas largos sea mucho ms fcil! Sigue las instrucciones en los comentarios del cdigo 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 fcilmente. Solo pretende que ests creando una nueva variable, pero usando el nombre de la variable que ya existe! Ejemplo:
var miEdad = 30;

Digamos que cumpl aos y quiero cambiar cuntos aos tengo.


miEdad = 31;

Ahora el valor de miEdad es 31!

Sigue las instrucciones en las lneas 1, 3, 5 y 8. Estamos usando este mtodo para mostrarte que el orden en el que das indicaciones al computador es muy importante. 4. Conclusin: Parte 1 Vamos a hacer un repaso rpido! Tipos de datos a. numbers - salos como los nmeros 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 comparacin, modulo b. strings - length, subcadena console.log( ) Muestra en la consola cualquier cosa que pongamos entre parntesis. 1. Lee el comentario en la lnea 1. 2. En la lnea 3, crea una variable que se llame miTrabajo y asgnale un valor 3. En la lnea 4, registra la cantidad de caracteres de miTrabajo en la consola 5. Conclusin: Parte 2 Felicitaciones por haber llegado hasta este punto. Haz aprendido un montn! Solo un ejercicio ms antes de una merecida felicitacin! La ltima cosa difcil 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 instruccin es que el resultado del clculo de la sentencia es un registro en la consola que diga "Termin mi primer curso!"

También podría gustarte