curso basico de javascript

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".lengthNota: en la consola se muestra la cantidad de caracteres del nombre.

Matemática básica¡Buen trabajo! Ahora vamos a hacer algunas operaciones matemáticas. ¡Puedes hacerlas con la programación!Instrucciones: Calcula cualquier operación de suma que quieras. Suma dos números de la forma 3 + 4.3+4 Nota: en la consola se muestra 7 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.

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 errorInstrucciones: Trata de confundir al intérprete usando una palabra que él no conozca, como berenjena. Te mostrará un Reference Error.Nota: en la consola se muestraReferenceError: berenjena is not defined

¿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?");

Instrucciones:Usa el comando prompt para preguntarle al usuario de dónde es.prompt("¿De donde eres?")captura 1

Tipos de datos I & II: Números y StringsExisten 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?"Instrucciones: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!"escribe una cadena".lengthNota: en la consola se muestra 18.

Tipos de datos III: booleanosEl tercer tipo de dato es un booleano(que se pronuncia "bu-lea-no"; bautizado así en honor a George 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 true2. 5 < 4 es una locura, así que es igual a falseLos 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 cantidad de dinero en tu cuenta bancaria] > 0 y solamente te darán dinero si la respuesta es true.Instrucciones: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.["¡Soy un campeón escribiendo código!".length]>10Nota: en la consola se muestra true.

Usando console.logPosiblemente 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 consola debajo 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.Instrucciones:

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")

Nota: en la consola se muestra

10Hola

ComparacionesHemos 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

Instrucciones:

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.

//Después de ejecutar el código, deberías ver true 4 veces, y false 2 veces.//Al usar `console.log` al comienzo de cada línea,

//podemos imprimir 6 líneas de resultados.

console.log(15>4);console.log("Xiao Hui".length<122);console.log("Goody Donaldson".length>8);console.log(8*2==16);console.log(8==9);console.log(16<=9);


truetruetruetruefalsefalse

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.Instrucciones:

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

if ( 100 > 2 ){ console.log("¡Eres bueno en matemáticas!");}

console.log("Solo para que te enteres: tu programa alcanzó la línea 6");


¡Eres bueno en matemáticas!Solo para que te enteres: tu programa alcanzó la línea 6

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.Instrucciones: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.if (1>150 ) { alert("¡Vamos por el primer camino!");}else{ console.log("Vamos por el segundo camino");}Nota: en la consola se muestra

Vamos por el segunco camino

Más ejercicios con condicionalesEs 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 Estoy equivocado.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.Instrucciones:

// Recuerda que el orden y la puntuación son importantes.// Si te genera un error, revísalo cuidadosamente, línea por línea// ¡Revisa la sugerencia si de veras no sabes qué hacer!

if(150>3){ console.log("Tengo razon");}else{ console.log("Estoy equivocado");}Nota: en la consola se muestra

Tengo razon

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!Instrucciones: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.

//El computador no se fija en los espacios adicionales entre las palabras o los paréntesis//Lo único que le importa es el lugar donde están los elementos// y que hayas usado los símbolos correctos (){}[]"";// Para ayudar aún más, hay un programa llamado 'linter' que verifica tu código

// y colocará una 'x' roja junto a la primera línea que contenga errores

if (10 === 10){ console.log("¡Es correcto!");}else{ console.log("¡Es incorrecto!");}


¡Es correcto!

MatemáticasYa 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 operaciones2. * y /: multiplicación y división3. - y +: resta y suma

Ejemplos:1. 100/10 es igual a 102. "Jane".length + 5 es igual a 93. 5*(3+1) es igual a 20

Instrucciones:

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.

if ("Jon".length * 2 / (2+1) === 2) console.log("¡Esa respuesta tiene sentido!");else { console.log("Error Error Error");}


¡Esa respuesta tiene sentido!

Matemáticas y moduloVamos 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.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.Más ejemplos:17 % 5 es igual a 213 % 7 es igual a 6

Instrucciones:Usa console.log y modulo tres veces para obtener el residuo de las siguientes ecuaciones:a. 14 / 3b. 99 / 8c. 11 / 3//A continuación tenemos un ejemplo de cómo hallar el residuo de 18/4 usando modulo//console.log(18 % 4);console.log(14 % 3);console.log(99 % 8);console.log(11 % 3);


232

Modulo y if / elseAsí 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.Instrucciones:Edita la línea 3 de manera que se muestren los prompt correctos.//Aquí hay un ejemplo de una sentencia if/else con % en la condición

if(2%2) { console.log("¡El primer número es par!");} else {

console.log("¡El primer número es impar!");}


¡El primer número es impar!

SubcadenasHemos 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)

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

"día maravilloso".substring(3,7)

Nota: en la consola se muestra" mar"

Instrucciones: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"

// Usa console.log( ) para imprimir las subcadenas.

// Aquí hay un ejemplo de la 1ra hasta la 4ta letras de "JavaScript"// console.log("Javascript".substring(0,4));

console.log( "Enero".substring(0,3));console.log( "Melbourne es grandioso".substring(0,12));console.log( "Hamburguesas".substring(5,12));

Nota: en la consola se muestraEneMelbourne esrguesas

VariablesHemos 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 quedeclares) 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;

InstruccionesCrea una variable llamada miEdad y escribe cuántos años tienes.//Para crear una variable usamos solamente un signo de igual//Pero para verificar si dos valores son iguales, usamos 3 signos.var miEdad=23;console.log(miEdad);

Nota: en la consola se muestra23

Más ejercicios con variablesYa 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 intercambiaramiNombre 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 elvalor 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!

Instrucciones// Declara una variable en la línea 2 que se llame miPais y sitúale un valor string.var miPais="Venezuela";

//Usa console.log para mostrar el largo de la variable miPaisconsole.log(miPais.substring(0,9) );//Usa console.log para mostrar las tres primeras letras de miPaisconsole.log(miPais.substring(0,3)


VenezuelaVen

Cambiar los valores de variablesHasta ahora hemos aprendidoa. como crear una variableb. 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!

Instrucciones

//En la línea 2 declara una variable que se llame miNombre y cuyo valor sea tu nombre.var miNombre="aniuska";//En la línea 4, usa console.log para mostrar la variable miNombre.console.log(miNombre);//En la línea 7, modifica el valor de miNombre para que sean solamente las 2 primeras//letras de tu nombre.miNombre="an";//En la línea 9, usa console.log para mostrar la variable miNombre.console.log(miNombre);


aniuskaan

Instrucciones

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

//¡En la línea 2, escribe tu primer comentario! ¡Puede ser cualquier cosa!//cualquier cosavar miTrabajo="Ninguno";console.log(miTrabajo.length);

Nota: en la consola se muestra7

Conclusión: Parte 2Felicitaciones 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.

Instrucciones

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!"

if(2/2==1){ console.log("¡Terminé mi primer curso!");}else{ console.log("Vuelve a la leccion If/else");}

Nota: en la consola se muestra¡Terminé mi primer curso!

ConfirmYa cuentas con algunas habilidades para programar. ¡Es hora de hacer algo que le puedas mostrar a la gente! Vamos a mostrarte como programar un juego al estilo de "Escoge tu propia aventura". Tendrá una trama básica, hará que el usuario tome algunas decisiones, y terminará con un final feliz. Luego, podrás modificarlo como desees, ¡y demostrar tu talento creativo!

Instrucciones

1. Es de buena educación preguntarle siempre al usuario si está listo para jugar.

2. Usa confirm para asegurarte de que el usuario está listo para jugar. Por ejemplo, puedes escribir la oración: "¡Estoy listo para jugar!". o agregar a confirm cualquier frase que desees.

Para poder hacer que el usuario confirme algo, la sintaxis debe verse así:confirm("¡Yo entiendo como usar confirm!")

confirm("¡Estoy listo para jugar!");

Nota: en la consola se muestratrue

¿Tienes la edad para jugar?Con grandes poderes de programación, viene una gran responsabilidad. ¡Hay que asegurarnos de que el usuario tiene la edad suficiente para poder jugar!

Para ello se requieren dos fragmentos de código.

Usa prompt para preguntarle al usuario su edad.

Escribe una sentencia if / else con base en la edad del usuario.

Nota: ¡hay que almacenar el resultado de la instrucción prompt en una variable! De lo contrario, no podremos usarlo en la sentencia if / else.

Instrucciones

1. Debajo del código existente, declara la variable edad.

2. Haz que edad sea igual a la respuesta que el usuario debe introducir (es decir, pregúntale al usuario, '¿Cuántos años tienes?')

3. Si el usuario tiene menos de 18 años, usa console.log y dile que se le permite jugar, pero bajo su propia responsabilidad.

4. En caso contrario, usa console.log, ¡y escribe un mensaje que lo anime a comenzar a jugar!

Captura2

Captura3


¡Ah,jugar!

¡El primer turno!

¡Así que la historia se está desarrollando de verdad! Ya hay un escenario. Tu usuario está a punto de hablarle a Batman. Ahora quieres saber si tu usuario está listo para un enfrentamiento con Batman.

Instrucciones

1. Escribe el argumento debajo del código que ya usaste: "Batman te mira con odio."

2. Ahora declara la variableuserAnswer. Haz que sea igual a un prompt que le pregunte al usuario "¿Te crees muy de buenas, idiota?". Esta será la pregunta que Batman le haga a tu usuario.

confirm("¡Estoy listo para jugar!");

var edad=prompt("¡Cuantos años tiene?");

if(edad<18){

console.log("se le permite jugar, pero bajo su propia responsabilidad.");

}else{

console.log("¡Ah,jugar!");

}

console.log("Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.");

console.log("Batman te mira con odio.");

var userAnswer=prompt("¿Te crees muy de buenas, idiota?");

capture2

captura3

captura4

Nota: en la consola se muestra¡Ah,jugar!Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.Batman te mira con odio.

¡La historia se pone interesante!Ahora deberás crear diferentes situaciones. Menos mal que sabemos como hacerlo usando las sentencias if / else.

Si userAnswer es igual a "Sí", y el usuario se siente con suerte, se muestra el mensaje: "Batman te golpea bien fuerte. ¡Él es Batman, y tú eres tú! ¡Pero claro que Batman te ganaría!"

En caso contrario, se muestra el mensaje: "Decidiste que no te sientes con suerte. ¡Bien hecho! Haz ganado el juego de evitar que Batman te rompa la cara"

Instrucciones

¡Usa una sentencia if / else para escribir la última parte del juego!

Agregar algo de historiaAhora hay que crear el escenario para la historia. Aquí hay una pequeña introducción que podrás usar por el momento. Escribe la siguiente introducción debajo del código que usaste antes:

Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.

Instrucciones

1. Escribe la introducción en la instrucción console.log

2. La introducción consiste únicamente en palabras. A las palabras se les llama 'strings' en JavaScript. ¡No olvides como usar stringscorrectamente!

confirm("¡Estoy listo para jugar!");var edad=prompt("¡Cuantos años tiene?");if(edad<18){ console.log("se le permite jugar, pero bajo su propia responsabilidad.");}else{ console.log("¡Ah,jugar!");}

console.log("Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.");captura 2captura3

¡Ah,jugar!Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.

¡La historia se pone interesante!Ahora deberás crear diferentes situaciones. Menos mal que sabemos como hacerlo usando las sentencias if / else.

http://www.codecademy.com/es/courses/javascript-beginner-es-m1XxV/1#!/exercises/4

Si userAnswer es igual a "Sí", y el usuario se siente con suerte, se muestra el mensaje: "Batman te golpea bien fuerte. ¡Él es Batman, y tú eres tú! ¡Pero claro que Batman te ganaría!"

En caso contrario, se muestra el mensaje: "Decidiste que no te sientes con suerte. ¡Bien hecho! Haz ganado el juego de evitar que Batman te rompa la cara"

Instrucciones¡Usa una sentencia if / else para escribir la última parte del juego!confirm("¡Estoy listo para jugar!");var edad=prompt("¡Cuantos años tiene?");if(edad<18){ console.log("se le permite jugar, pero bajo su propia responsabilidad.");}else{ console.log("¡Ah,jugar!");}

console.log("Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.");console.log("Batman te mira con odio.");var userAnswer=prompt("¿Te crees muy de buenas, idiota?");if(userAnswer=="Si"){ console.log("Batman te golpea bien fuerte. ¡Él es Batman, y tú eres tú! ¡Pero claro que Batman te ganaría!");}else{ confirm("Decidiste que no te sientes con suerte. ¡Bien hecho! Haz ganado el juego de evitar que Batman te rompa la cara");}Captura 2Captura 3Captura4Repuesta si

Nota: en la consola se muestra¡Ah,jugar!Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.Batman te mira con odio.Batman te golpea bien fuerte. ¡Él es Batman, y tú eres tú! ¡Pero claro que Batman te ganaría!Repuesta NoCaptura 5

¡Ah,jugar!Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.Batman te mira con odio.true

Pedir retroalimentación¡Vale la pena pedirle a tu usuario su opinión! Crea una variable llamada retroalimentacion y pídele al usuario que califique tu juego, de uno a 10.

Instrucciones

Si la calificación es mayor a 8, se muestra el mensaje: "Este es solo el comienzo de mi imperio de juegos. ¡Si quieres saber más, no te desconectes!"

En caso contrario, se muestra el mensaje:"¡¿Me rompí la espalda haciendo este juego para que me des esa calificación?! ¡Es el colmo! ¡Ya verás!"

confirm("¡Estoy listo para jugar!");var edad=prompt("¡Cuantos años tiene?");if(edad<18){ console.log("se le permite jugar, pero bajo su propia responsabilidad.");}else{ console.log("¡Ah,jugar!");}

console.log("Blancanieves y Batman estaban en el paradero de bus, esperando para poder ir de compras. Había una venta de liquidación, y ambos necesitaban comprar prendas nuevas. Batman nunca te cayó bien. Caminas hacia él.");console.log("Batman te mira con odio.");var userAnswer=prompt("¿Te crees muy de buenas, idiota?");if(userAnswer=="Si"){ console.log("Batman te golpea bien fuerte. ¡Él es Batman, y tú eres tú! ¡Pero claro que Batman te ganaría!");}else{ confirm("Decidiste que no te sientes con suerte. ¡Bien hecho! Haz ganado el juego de evitar que Batman te rompa la cara");}var retroalimentacion=prompt("Califica este juego");if(retroalimentacion>8){ console.log("Este es solo el comienzo de mi imperio de juegos. ¡Si quieres saber más, no te desconectes!");

}else{ console.log("¡¿Me rompí la espalda haciendo este juego para que me des esa calificación?! ¡Es el colmo! ¡Ya verás!");}Captura6Respuesta mayor a 8

Este es solo el comienzo de mi imperio de juegos. ¡Si quieres saber más, no te desconectes!

Repuesta menor a 8

¡¿Me rompí la espalda haciendo este juego para que me des esa calificación?! ¡Es el colmo! ¡Ya verás!

Introducción a las funcionesProgramar es parecido a hornear pasteles. ¡En serio! Imagina que estás tratando de enseñarle a tu amiga Jane como hornear muchos diferentes tipos de pasteles.

Cada pastel requiere de diferentes ingredientes (es decir, datos de entrada). Pero las instrucciones de 'horneado' siempre son las mismas.

1. Precalienta el horno a 300 grados 2. Mezcla todos los ingredientes en un tazón3. Mete el contenido en el horno por 30 minutos

Y el resultado será un pastel diferente cada vez.

Es tedioso tener que repetirle a Jane las mismas instrucciones de 'horneado' todas las veces. ¿Qué tal si simplemente pudiéramos decir 'hornea' y Jane supiera como ejecutar esos tres pasos? ¡Eso es exactamente lo que es una función!

Instrucciones

1. La línea 3 declara la función y le asigna un nombre.

2. Concéntrate en la línea 4 y en la línea 5. El código dentro de las llaves { } es el código que queremos usar una y otra vez. (es decir, las instrucciones de 'horneado')

3. La línea 4 declara una variable llamada val. La línea 5 muestra el valor de esa variable.

4. En las líneas 8-11 explicamos lo que significa llamar a una función.

5. En la línea 12 reemplaza el 6 con cualquier número y presiona Ejecutar. ¡Hazlo un par de veces y contempla la belleza de las funciones!

//Así es como luce una función

var dividirPorTres = function (number) {

var val = number / 3; console.log(val);};

//En la línea 11, llamamos a la función por su nombre//Ahora la llamamos desde 'dividirportres'//Le decimos al computador cuál es el número de entrada (es decir, 6)//Entonces el computador usa el código dentro de la funcióndividirPorTres(6);

dividirPorTres(8);

2.6666666666666665

Sintaxis de funciónPiensa que una función tiene cuatro partes.

1. Declara la función usando var, y luego asígnale un nombre.

2. Luego debes usar el comandofunction para decirle al computador que estás haciendo una función.

3. El fragmento entre paréntesis es llamado el parámetro. Piensa que es una palabra de reemplazo a la que le asignamos un valor específico cuando llamamos a la función. Observa la sugerencia para saber más.

4. Luego escribe tu código reusable entre { }. Cada línea de código en este bloque deber terminar con un ;.

Sintaxis

var nombreDeFuncion = function ( ) { código código código; código código código; (más líneas de código); };

Digamos que quieres mostrar en un mensaje un saludo cada vez que una persona pase al frente de tu escritorio. Y que quieres personalizar ese saludo con sus nombres. Si escribieras: console.log("Hola, Betty");

console.log("Hola, Laura");

y así para cada persona, ¡tardarías siglos!

Instrucciones

1. En la línea 11 llama a la función de saludo y escribe un nombre que quieras incluir en esa función.

2. ¡Presiona Ejecutar para ver la función en acción! Te ahora mucho tiempo.

//A continuación está la función de saludo//Observa la línea 7//Podemos unir strings usando el signo de más +//Para saber más, consulta la sugerencia

var saludo = function (nombre) { console.log("Qué bueno verte," + " " + nombre);};

//¡En la línea 11, llama a la función de saludo!

saludo("Maria");

Qué bueno verte, Maria

¿Cómo funciona una función?Vamos a ver exactamente como piensa un computador cuando ve el código de una función.

var nombreDeFuncion = function ( ) { código código código; código código código; (más líneas de código); };

1. El comando var declara la función.

2. var siempre va seguido de un nombre.

3. El comando function le dice al computador que se trata de una función y no de otra cosa.

4. Los parámetros van entre paréntesis. El computador los buscará en el bloque de código.

5. El bloque de código es el código reusable que está entre llaves { }. Cada línea de código dentro de { } debe terminar con punto y coma.

6. La función completa termina con punto y coma.

Para usar la función, la llamamos tan solo con escribir el nombre de la función, y colocamos un valor de parámetro dentro de los paréntesis que van después. El computador ejecutará el código reusable con el valor del parámetro específico sustituido dentro del código.

Instrucciones

Vamos a hacer una función que le diga al mundo lo que quieres comer.

1. Declara tu función y llámala 'demandaDeAlimentos`.

2. Puedes llamar el parámetro de cualquier forma que quieras. Pero lo vamos a llamar comida porque es lo que va a cambiar cada vez que llamemos la función.

3. Después viene tu bloque reusable de código. Ponlo entre las llaves. El código que quieres repetir es:console.log("Quiero comer" + " " + comida);

4. ¡Llama a la función y escribe la comida específica que quieras!

//Escribe tu función de demandaDeAlimentos a continuación.//Última sugerencia: Termina cada línea de tu bloque reusable de código//con ;

var demandaDeAlimentos = function (comida){ console.log("Quiero comer" + " " + comida);};demandaDeAlimentos("pan");

Quiero comer pan

Atando todos los cabos¿Por qué el código está organizado así en las líneas 2-5?

El computador puede entender el código sin ese espaciado. Pero hace la edición mucho más fácil y es un buen hábito.

¿Tengo que poner un punto y coma al final de cada línea de código en el bloque reusable? ¿Y al final de la función completa?

Sí. Debes poner un punto y coma al final de cada línea de código (dentro de las { }) y después de la función completa (después de los { }). El punto y coma actúa como un punto en una oración. Ayuda al computador a saber cuáles son los puntos de parada en el código.

Instrucciones

Una gran parte de la programación es la depuración. Eso quiere decir, entender qué rayos salió mal con tú código. ¿Por qué no se ejecutó?

1. Observa la línea 9. Tiene muchos errores de sintaxis. ¿Ves como la falta de espaciado hace difícil la depuración?

2. Corrige la función en la línea 9. Asegúrate de que tu sintaxis es correcta. Asegúrate de que se ve bien.

3. ¡Cuando la función saludo esté arreglada, llámala! No te olvides de pasar un nombre específico.

//Función bien escritavar calcular = function (numero) { var val = numero * 10; console.log(val);};

//Función mal escrita con errores de sintaxis

var saludo =function(nombre){ console.log("Qué bueno verte," + " " + nombre); }; saludo("mari");

No Te RepitasEl principio de No Te Repitas es realmente importante en la programación. ¡No se deben hacer repeticiones!

En esas ocasiones en que te encuentres copiando la misma cosa, pero modificando solamente una pequeña parte, podrías usar una función.

La 'pequeña parte' que te encuentras modificando sería el parámetro. Y la parte que repites sería el código en el bloque reusable - el código que está dentro de { }.

InstruccionesEres una persona de hábitos. Cada semana compras 5 naranjas. ¡Pero el precio de las naranjas sigue cambiando! 1. Quieres declarar una función que calcule cuánto cuesta comprar 5 naranjas.2. Luego quieres calcular el costo de comprar las 5 todas juntas.3. Escribe una función que haga esto, y que se llame costoNaranjas(). 4. Debe tomar un parámetro que es el costo de una naranja y multiplicarlo por 55. Llama a la función en la que las naranjas cuestan 5 dólares cada una.

function costoNaranjas (costo){ valor = costo * 5; return(valor); } costoNaranjas(5);

25

Comando return¡Buen trabajo! Ahora, cuando llamemos a una función, no siempre queremos que simplemente muestre un mensaje. Algunas veces queremos que retorne un valor. Entonces podemos usar ese valor (es decir, el resultado de la función) en otro código. ¡Vamos a aprender acerca del comandoreturn, y luego veremos cómo usar las funciones con una sentencia if / else en el siguiente ejercicio!

El comando return simplemente le devuelve al programador el valor que resulta de una función. De esta forma, una función se ejecuta, y cuando se usa return, la función dejará de ejecutarse inmediatamente y devolverá el valor.

Para ver detalles sobre las cuatro diferentes maneras de usar return, mira la sugerencia.

InstruccionesEn nuestro ejemplo tenemos una función llamada porDos() que toma un número y retorna el número multiplicado por dos. 1. En la línea 7, se llama a la función que está después del signo igual, que sigue a numeroNuevo, con cualquier parámetro que desees2. La línea 8 muestra el numeroNuevo. Observa como el valor que retornamosde porDos() es asignado automáticamente dentro denumeroNuevo.

//El parámetro es un número, y hacemos operaciones matemáticas con ese parámetrovar porDos = function(numero) { return numero * 2;};

// llama aquí porDosvar nuevoNumero = console.log(nuevoNumero);

Indicio: Para llamar a la función, simplemente usamos su nombre. Luego colocamos un valor para el parámetro numérico, por ej,porDos(8)

Cuatro formas de usar return

a. retorna el valor de una variable si la variable ha sido declarada dentro de la funciónb. retorna el parámetroc. si el parámetro es un número, haz una operación matemática con ese parámetro y podrás retornar el valord. si el parámetro es un string, usa comandos como .length or .substring() y podrás retornar el valor

//El parámetro es un número, y hacemos operaciones matemáticas con ese parámetrovar porDos = function(numero) { return numero * 2;};

porDos(8);var nuevoNumero = function(x){console.log(nuevoNumero);};

16

Funciones, return y if / elseCuando llamamos a una función, su valor de retorno es solamente el resultado de la ejecución de la función. ¡Entonces se puede usar ese valor igual que cualquier otro valor en JavaScript!

Mira la sentencia if que comienza en la línea 7. La sentencia if está verificando si el resultado de llamar a la función cuarto (que pasa a 24 como el valor de parámetro) es divisible por 3.

Instrucciones

1. Define una función llamada cuarto que tenga un parámetro llamado número.

2. Esta función retorna un valor que es igual a un cuarto del parámetro. (Es decir, número / 4)

3. Llama a la función dentro de la condición de la sentencia if (¡y colócala en un valor de parámetro!), tal que se muestre el mensaje "La sentencia es verdadera" en la consola.

// Define cuarto aquí.var cuarto=function(numero){ return numero/4;};if (cuarto(4) % 3 === 0 ) { console.log("La sentencia es true");} else { console.log("La sentencia es false");

}

Funciones con dos parámetrosHasta ahora solamente hemos visto funciones con un parámetro. Pero a menudo es útil escribir funciones con más de un parámetro. Por ejemplo, podemos tener la siguiente función:

var areaCaja= function(largo, ancho) { return largo * ancho;};

Porque podemos tener más de un parámetro; esto quiere decir que podemos crear más funciones útiles.

Y para llamar a esta función, un ejemplo sería areaCaja(3,9). Ahora, queremos saber el área de la caja que tiene 3 de largo y 9 de ancho. ¡Claro que se pueden usar otros parámetros de valores!

Instrucciones

1. Escribe una función llamada perimetroCaja que retorne el perímetro de un rectángulo.

2. Debe tener dos parámetros.

3. Una fórmula para el perímetro es largo + largo + ancho + ancho

4. Llama a la función y pasa cualquier valor que quieras para el largo y el ancho.

var perimetroCaja= function(largo,ancho){ return largo+largo+ancho+ancho;};perimetroCaja(2,4);

12

Variables Globales vs LocalesTenemos que conocer un concepto súper importante: ámbito. El ámbito puede ser global o local.

Las variables definidas fuera de una función son accesibles en cualquier parte una vez que han sido declaradas. Son llamadas variables globales y su ámbito es global.

Las variables definidas dentrode una función son variables locales. No se puede acceder a ellas fuera de la función.

¡El código en la parte derecha no funciona! Queremos que la línea 15 muestre el valor de la variablemultiplicado. Pero multiplicado es una variable local y solamente se puede usar dentro de la función. Console.log no puede acceder a esta variable local.

Instrucciones

1. ¿Por qué está mal el código? ¡La variable multiplicado tiene ámbito local!

2. ¿Cómo lo arreglamos? En la línea 3, declara la variable multiplicado por fuera de la función, de manera que tenga ámbito global. Para hacerlo, escribe: var multiplicado; esto crea una variable que no tiene valor inicial.

3. Observa la sugerencia para ver los pasos que explican cómo funciona el código.

Indicio:1. La línea 3 declara la variablemultiplicado con ámbito global , pero no le da ningún

valor. Basta con escribir var multiplicado.2. La función se encuentra en las líneas 5 a 9. Dentro de la función, nos referimos

a multiplicado y le cambiamos el valor.3. La línea 11 llama a la función y le pasa el parámetro 4. Eso quiere decir que ahora

multiplicado tiene como valor 8.4. La línea 15 imprime el valor demultiplicado, que es 8.

// Declara multiplicado fuera de la función en la línea 3.// Esto quiere decir que tiene ámbito global var multiplicado;

var porDos = function(number) { multiplicado = number * 2; };

porDos(4);

// ¡No se puede acceder a la variable multiplicado! // ¡Haz algo para que la línea 15 funcione!console.log(multiplicado);

8

Resumen de funcionesMuy bien, vamos a repasar. Hoy haz aprendido un montón sobre funciones. ¡Mejor que no lo olvides por completo!

Primero, descubrimos como usar las funciones para ejecutar una misma lógica repetidamente, sin tener que escribir el mismo código una y otra vez. Como esto es más eficiente, le ahorra tiempo al programador.

Instrucciones

1. Escribe una función llamadastringNombre()

2. Debe tener nombre como parámetro.

3. La función retorna un string igual a"Hola, soy" + " " + nombre.

4. Pásale tu nombre a la función e imprime la llamada de la función.

var stringNombre = function(nombre) { return "Hola, soy" + " " + nombre;};stringNombre("Aniuska");

"Hola, soy Aniuska"

Funciones y if / elseUna aplicación especialmente útil de código son las sentencias if / else. Pueden tener muchas palabras, y ser un dolor de cabeza a la hora de escribirlas repetidamente.

Vamos a escribir una función que tome como parámetro los ingresos de una persona. Dentro de la función habrá una sentencia if / else. Queremos que la función esté disponible para verificar si los ingresos de muchas personas diferentes los califican para tener una tarjeta de crédito.

Instrucciones

1. Escribe una función llamadaverificarCredito que tome el parámetro ingresos.

2. Dentro de la función, escribe una sentencia if donde si los ingresos son mayores o iguales a 100, el computador muestre el mensaje "¡Ganas mucho dinero! Estás calificado para manejar una tarjeta de crédito".

3. Si los ingresos son menores que 100, haz que el computador muestre el mensaje "Desgraciadamente no estás calificado para manejar una tarjeta de crédito. El capitalismo es así de cruel".

4. Llama a la función pasando ingresos de 75

5. DESPUÉS de que la llames con 75, llámala con 125

6. DESPUÉS de que la llames con 125, llámala con 100. ¡Hay que estar seguros!

//Escribe tu función a continuación. //¡No olvides llamar a tu función!

0.13702090294100344

Decisión del computador: Parte 2Ya tenemos computadorEscoge, pero ahora es igual a un número entre 0 y 1. De alguna manera tenemos que traducir este número al azar en una decisión al azar entre piedra, papel o tijeras. ¡¿Cómo lo hacemos?!

1. Si computadorEscoge es un número entre 0 y 0.33, has que computadorEscoge sea igual a piedra.

2. Si computadorEscoge es un número entre 0.34 y 0.66, has que computadorEscoge sea igual a papel.

3. Si computadorEscoge es un número entre 0.67 y 1, has que computadorEscoge sea igual a tijeras.

¡Pero esos son tres resultados! If / else solamente nos deja tener dos resultados. ¡¿Y ahora qué?! Tenemos que usar if / else if / else. Observa la sugerencia para conocer la sintaxis completa. Vas a reírte cuando veas lo fácil que es.

Instrucciones

1. Debajo del código que ya usaste, escribe la sentencia if / else if / else.

2. En los bloques de código correspondientes, cambia el valor de computadorEscoge con base en las reglas que viste arriba. Recuerda, NO tienes que usar var cuando modificas el valor de una variable que ya existe.

Indicio:

La sintaxis if / else if / else debe tener espacios, así:

if (condición1) { código código código;} else if (condición2) { código código código;} else { código código código;}

var usuarioEscoge=prompt("¿Piedra, papel o tijera?");var computadorEscoge=Math.random();console.log(computadorEscoge);if((computadorEscoge>=0)&&(computadorEscoge<=0.33)){ computadorEscoge="piedra";}else if((computadorEscoge>=0.34)&&(computadorEscoge<=0.66)){ computadorEscoge="papel";

}else{ computadorEscoge="tijeras"; }0.564905543345958"papel"

¡Ambas elecciones son iguales!Ahora viene la parte divertida. Necesitamos crear una función. Se necesitan dos parámetros (es decir, las elecciones que ya se hicieron) y luego el resultado es la elección ganadora.

Cuando se programa un juego así, primero hay que pensar cuáles son todos los resultados posibles. Un resultado es que la elección que tomó el usuario sea igual a la elección que tomó el computador.

Instrucciones

1. Copiamos el código de la sección anterior, pero es un comentario. Vamos a dejarlo así por ahora.

2. Declara una función llamada comparar.

3. Tiene dos parámetros, eleccion1 yeleccion2. Para saber por qué no usamos los nombres de las variables (usuarioEscoge/computadorEscoge) como los parámetros, mira la sugerencia.

4. Dentro de la función, escribe una sentencia if de forma que si los dos parámetros son iguales, la función muestre el mensaje "¡Es un empate!"

Indicio

¿Por qué llamamos a los parámetros eleccion1 y eleccion2 en vez de usar los nombres de las variablesusuarioEscoge y computadorEscoge?

Porque los nombres de los parámetros están hechos para ser generales. Esto los hace más flexibles, de forma que después podamos pasar cualquier variable por la función. En nuestro caso, pasaremos computadorEscoge yusuarioEscoge por la función.

Por ejemplo, qué pasaría si este fuera un juego que tuviera en cuenta las decisiones de dos seres humanos (y no de un ser humano contra un computador). ¡No tendría sentido tener computadorEscogecomo parámetro!

/*var usuarioEscoge = prompt("¿Piedra, papel o tijeras?");var computadorEscoge = Math.random();if (computadorEscoge <0.34){

computadorEscoge = "piedra";}else if(computadorEscoge <=0.67){

computadorEscoge = "papel";}else{

computadorEscoge = "tijeras";}*/var comparar=function(eleccion1,eleccion2){ if(eleccion1==eleccion2){ return ("¡Es un empate!"); }};

¿Qué tal si eleccion1 es igual a piedra?¡Lo estás haciendo muy bien! Vamos a considerar las otras posibilidades. Desglosemos el problema un poco. ¿Qué tal si eleccion1 es igual a "piedra"? Si decimos que eleccion1 es igual a "piedra",

a. si eleccion2 es "tijeras", "piedra" gana.b. si eleccion2 es "papel", "papel" gana.

¿Cómo estructuramos esto? Es un poco diferente de lo que ya viste. Primero necesitaremos una sentencia if. Luego, el código dentro de esa sentencia if debe ser... ¡otra sentencia if!

Instrucciones

1. Dentro del código que ya existe en la función comparar, escribe una sentencia if, para que la condición sea que eleccion1 es igual a "piedra".

2. En el bloque de código de la sentencia if, escribe una sentencia if / else. Dentro de esa sentencia, si eleccion2 es igual a "tijeras", debe dar como resultado "piedra gana". De lo contrario, el resultado debe ser "papel gana".

/*var usuarioEscoge = prompt("¿Piedra, papel o tijeras?");var computadorEscoge = Math.random();if (computadorEscoge <0.34){

computadorEscoge = "piedra";}else if(computadorEscoge <=0.67){

computadorEscoge = "papel";}else{

computadorEscoge = "tijeras";}*/var comparar=function(eleccion1,eleccion2){ if(eleccion1==eleccion2){ return "¡Es un empate!"; }

if(eleccion1=="piedra"){ if (eleccion2=="tijeras"){ return "piedra gana"; } else{ return "papel gana"; } }};

¿Qué tal si eleccion1 es igual a papel?¡Buen trabajo! Ahora debemos considerar qué pasaría si eleccion1 es igual a "papel". Ya sabemos el resultado si eleccion2 también es igual a "papel". Si eleccion1 = eleccion2, la función mostrará el mensaje "¡Es un empate!"

Pero tenemos que pensar en dos posibilidades más:

a. si eleccion2 es "piedra", "papel" gana.b. si eleccion2 es "tijeras", "tijeras" gana.

Instrucciones

1. Debajo del código existente en el cuerpo de la función use la misma estructura del ejercicio anterior para agregar las dos nuevas posibilidades.

2. Para hacerlo se debe usar una sentencia if. Luego, se debe colocar una sentencia if / else dentro de la primera sentencia if.

var comparar=function(eleccion1,eleccion2){

if(eleccion1==eleccion2){

return "¡Es un empate!";

}

if(eleccion1 === "piedra"){

if(eleccion2 === "tijeras"){

return "Piedra gana";

}else{

return "Papel gana";

}

}

if(eleccion1==="tijeras"){

if(eleccion2==="piedra"){

return"piedra gana";

}else

{return"papel gana"}

}

};

¿Qué tal si eleccion1 es igual a tijeras?¡Ya casi está listo! Por último, debemos pensar qué pasaría si eleccion1 es igual a "tijeras". En este caso:

a. si eleccion2 es "piedra", "piedra" gana.b. si eleccion2 es "papel", "tijeras" gana.

Instrucciones

1. En el código que ya tienes, usa la misma estructura de los dos ejercicios anteriores y finaliza tu función.

2. Llama a tu función y pasa usuarioEscoge y computadorEscoge como los valores de tus dos parámetros.

3. Necesitamos usar las variables usuarioEscoge y computadorEscoge. Quita los comentarios de la primera linea de codigo eliminando /* en la línea 1 y */ en la línea 9, para que ya no sean comentarios, y para que las variables ahora estén activas y puedan ser llamadas.

4. ¡Presiona Ejecutar y tu juego debería funcionar! ¡Felicitaciones!

curso basico de javascript

Documents