Lanza un cohete: aprende los conceptos básicos de Javascript de manera divertida

1. Introducción: Oye, hola. Mi nombre es Rich Armstrong, y he hecho sitios web, aplicaciones, y cosas interactivas durante los últimos 10 años. Esta clase se trata de aprender a escribir JavaScript básico. Te voy a enseñar algo de teoría. Te voy a enseñar cómo JavaScript se relaciona con HTML y CSS, y luego voy a enseñar fuera de escribirlo. Poder escribir JavaScript te permite hacer sitios web interactivos, aplicaciones y juegos que sean dinámicos, que se muevan, y que incluso puedan pensar por sí mismos. Javascripts es súper divertido. Cuando los combinas con HTML y CSS, podrás apoderarte del mundo. Al final de esta clase, serás un ninja de JavaScript de cinturón blanco, y tendrás una comprensión básica de JavaScript. Usted ha lanzado algunos cohetes. Tus amigos pensarán que eres increíble. Eres mamá te va a pensar desde el futuro, y podrás hacer cosas más interactivas. Realmente creí que saber codificar hace una diferencia tan grande en el mundo moderno, sobre todo si eres diseñador, sobre todo si eres creativo. Estoy muy emocionado de enseñarte a codificar, así que únete a mí y emocionate. 2. ¿Qué vamos a crear?: ¿ Qué vamos a hacer? ¿ Qué te voy a enseñar? Bueno, vamos a hacer una secuencia de lanzamiento de cohetes de la que Elon Musk estaría orgulloso. Vamos a conseguir un cohete para pasar de parado a golpear la cicatriz, tal vez incluso explotando. Te voy a llevar a través de clics de botones y animaciones CSS, y funciones, y variables y si afirmaciones vas a aprender mucho, pero no demasiado, tu cerebro no explotará. Te mostraré cómo usar Sublime Text, te mostraré cómo usar las herramientas de desarrollador de Google Chrome y cómo usar el escritorio de GitHub y cómo usar las páginas de GitHub y cómo compartir tu creación con el resto del mundo. Empezamos pequeño y fácil y luego nos adentramos en los fundamentos de JavaScript. Es ligero, es divertido. Narro todo visualmente y proporciono metáforas simples para que lo entiendas. Ven a unirte a esta clase y lanzemos juntos un cohete. Sí. 3. Descargar estas 3 aplicaciones gratuitas: Entonces para empezar a escribir JavaScript, necesitamos tres cosas. El primero es un editor de código, estará usando Sublime Text 3. La siguiente app que necesitamos descargar es Google Chrome que es un navegador. La tercera app que necesitamos descargar es GitHub Desktop, que se sincroniza con GitHub online y usando esto, puedes compartir tu código y puedes respaldarlo y sincronizarlo. Abre Safari o Internet Explorer y busquemos Sublime Text 3. Haga clic en ese enlace, y luego descargue el correcto para su sistema operativo. Para mí, es OS X. Lo siguiente que tenemos que hacer es buscar Google Chrome, click en ese primer enlace. A veces esta página tarda un tiempo en cargarse y a veces cambia. Simplemente consigue el para computadoras personales y descarga Chrome, acepta e instala y tarde o temprano se estará instalando Chrome. El último es GitHub Desktop. Busca eso, abre ese primer enlace y luego solo tienes que hacer clic en el botón Descargar GitHub Desktop. Está disponible para Mac o Windows. se ven un poco diferentes, pero no debería molestarte demasiado. Lo siguiente que debes hacer es ir a github.com y necesitas crear una cuenta nueva. Date de alta, si no has llegado a la cuenta de GitHub. Escoges un nombre de usuario, ingresas tu correo electrónico y creas una contraseña. Lo que es realmente importante aquí es que necesitas verificar la cuenta antes de poder realmente empezar a usar GitHub Pages. Para aquellos de ustedes que ya tienen uno, inicie sesión e ingrese sus datos. Todo listo, así que inicia sesión. Lo que vamos a hacer aquí es que realmente queremos crear un nuevo proyecto. Se llama repositorio en GitHub. Todo lo que quiero hacer aquí es que quieras volver atrás y crear un nuevo repositorio, y vamos a llamar a esto cohetes JS. Podemos poner una descripción en de cohetes de lanzamiento con JavaScript. Hagámoslo público. Siempre ayuda a inicializar un repositorio con un archivo README. Está bien. Vamos a crear ese repositorio, y de aquí en adelante estarás bien en tu camino a empezar. 4. Instalar, iniciar sesión y escribir algo en JS: Por lo que una vez que todas tus aplicaciones se hayan descargado, solo tendrás que arrastrar tu aplicación GitHub Desktop a la carpeta de aplicaciones. Ya tengo uno, así que sólo voy a reemplazarlo, fantástico. Tu Google Chrome, necesitarás abrirte porque es un DMG, no muy seguro de lo que sucede en Windows, pero solo haz el proceso normal de instalar una aplicación. Para Google Chrome, solo tienes que arrastrarlo directamente a tu carpeta Aplicaciones. Texto Sublime. Haga doble clic en ese archivo DMG y arrástrelo a su carpeta de aplicaciones también. Ya lo tengo. Enfriar, lo reemplazaré. Ese es tu proceso de instalación. A continuación, puedes eliminar esas apps. Entonces lo que puedes hacer es, puedes ir a tu Finder, puedes ir a la carpeta de aplicaciones y lo puedes encontrar ahí. De hecho, lo primero que queremos hacer es abrir nuestra aplicación GitHub Desktop. Por lo que ya lo tengo en mi bar de abajo aquí. Entonces lo abres. Así que seguro, vamos a abrirla. Si ya tienes algunos proyectos en tu GitHub, te mostrará que, oye, hay un montón de cambios si necesitas cambios. Pero lo que estamos queriendo hacer aquí es si aún no has iniciado sesión, ve a tus preferencias y sabes cuál es tu nombre de usuario y sabes cuál es tu contraseña. Por lo que inicia sesión. Entonces a partir de aquí, en realidad puedes ir Clon, así que quiero decir cool, quiero clonar ese js-rocket, clonado js-rocket. Donde voy a poner esto, lo voy a poner en mi escritorio. Entonces elijo mi escritorio, y ahora va a decir cool, clonación. Lo que tenemos que hacer aquí es que realmente necesitamos crear una nueva sucursal. Voy a llamar a esto páginas GH. Voy a clonar del maestro, y luego aquí vamos a trabajar en esta sucursal porque entonces podemos acceder a ella como página web en línea. Crear Sucursal. Entonces verás que tienes tu js-rocket y tal vez un par de otros entre los que puedes elegir, pero ahora tienes tu carpeta js-rocket en el escritorio con nada mucho en ella. Entonces abrimos js-rocket en texto sublime y verás que hay un montón de archivos y carpetas a la izquierda y luego tu tarjeta estará a la derecha. Entonces vamos Archivo, Nuevo Archivo, y llamémoslo index.html. Entonces vamos a guardarlo. Voy a ir a mi escritorio, guardarlo como index.html. Gracias, las baterías del ratón son bajas. Aquí. Solo escribamos hola js-rocket y deletreemos eso correctamente, para luego guardar. Lo que necesitamos hacer ahora es solo verificar dos veces que esto esté funcionando, así que volvemos a nuestro buscador, arrastramos nuestro archivo index.html a Google Chrome. Fantástico. Abre eso también. Hola js-cohete. Eso está funcionando. Voy a ir a GitHub Desktop, va, oye, has hecho algo. Entonces todo lo que tenemos que hacer aquí es solo decir añadido nuestro archivo de índice. Puedes dar una descripción más detallada si quieres. Después te comprometes con GH Pages. Lo que haces es después publicarlo. Por lo que esto realmente sincroniza tu versión local de js-rocket con la versión en línea de js-rocket. Entonces en Chrome, lo que hacemos es ir a github.com y vamos a iniciar sesión en nuestra cuenta. El mío es mrra-screencast y mi contraseña es mi secreto. Por favor recuerda tu contraseña. Después queremos navegar a nuestro repositorio js-rocket, queremos ir a la rama maestra y cambiarla a rama GH Pages, y luego verás que aquí hay un archivo, dice léame, dice index.html. Los archivos que se encuentran en tu sitio web de GitHub deben ser los mismos que los archivos de tu aplicación GitHub Desktop. Aquí puedes ver nuestra historia. Entonces lo que queremos hacer ahora es que realmente queremos entrar en las cuentas de estas páginas. Entonces lo que vamos a hacer es, vamos a ir mrra-screencast y usar tu nombre de usuario aquí. Entonces si el tuyo es Bob, usa bob.github.io, y entonces vamos a ir y poner nuestro proyecto aquí. Entonces la última que hice con una caricatura aquí. Entonces lo que vamos a hacer aquí, es que vamos a ir js-rocket, presionar Entrar y allá vamos. Entonces si ves eso, está funcionando. Si no ves eso, necesitas sincronizarlo y debes asegurarte que estás trabajando en la sucursal de GH Page. Lo siguiente que queremos hacer es solo escribir un poco de JavaScript. Lo que hacemos aquí es abrir etiqueta de script y ver qué hace Sublime Text. Hace mucho trabajo para nosotros. Se va a la etiqueta de script, es del tipo de texto en JavaScript e incluso cerrarlo para nosotros. Por aquí vamos a ir console.log hola allá amigos. Entonces lo vamos a guardar. Oh, no sé qué hice ahí. Estoy tratando de cerrar eso. Deberías decir Guardar. Te darás cuenta de que cuando vuelvas a GitHub Desktop, dirá oye, ha habido un poco de cambio aquí. Simplemente vas a decir Agregado algún código o agregado algunos JS, Comprometerse a GH-pages. Por lo que comete el cambio, y luego nos sincronizamos. Hace que sea igual en nuestra computadora local que en línea. A veces puede tardar un tiempo en sincronizarse. Después vamos a Google Chrome, luego navegamos a nuestro proyecto o repositorio js-rocket, luego podemos ir a la pestaña commits por aquí, es bastante importante a veces, y podemos ver que se agrega algunos JS. Si refrescas aquí, es posible que no veas nada diferente, pero si haces clic derecho y a veces esto podría estar en la parte inferior, o a veces esta cosa podría estar a un lado. Lo que tenemos que hacer aquí es que realmente necesitamos ir a la consola. Si tienes un mensaje que dice hola allá amigos, tu JavaScript está funcionando, tu GitHub está funcionando, y estás listo para rock and roll. Bombeado. Sí. 5. ¿Qué es Javascript?: ¿ Qué es Javascript exactamente? Bueno, JavaScript es un lenguaje de programación realmente genial e inteligente se utiliza principalmente en la web, en internet. Javascript ama HTML, ama CSS, y realmente ama a los humanos. También puede comunicarse con un servidor, así que supongo que es como el mejor amigo de todos. Enfriar. Entonces, ¿dónde lo usamos? su mayoría lo usamos en el navegador, pero podemos usarlo en algunos otros lugares también. También se está utilizando Javascript como lenguaje de servidor, lo que significa que potencialmente solo necesitas conocer un lenguaje de programación para hacer todo en la web pero no te preocupes, no vamos a meternos en cosas del servidor en esta clase. Lo mantendré ligero, divertido, y fácil. Entonces, ¿qué puede hacer JavaScript? Bueno, JavaScript puede hacer mucho, puede contar listo rápido, puede contar hasta 1000 más rápido de lo que puedes, puede contar hasta un millón de manera más rápido que cualquier humano, es increíble, es realmente bueno en matemáticas, puede hacer que las cosas se muevan , lo cual es increíble, puede hablar con el servidor , puede cambiar palabras, puede arrastrar cosas alrededor en la pantalla, puede alertarte, puede ser programado para hacer cualquier cosa, y sabe mucho, almacena mucha información sobre el navegador y la página web en la que está. Se puede prácticamente sólo preguntarle, como, ¿qué tan grande es la pantalla? ¿ O qué navegador están usando? ¿ O de qué color es el fondo? ¿ O cuál es la URL? ¿ Dónde estamos? Sabe mucho, lo cual es realmente genial. 6. Propiedades y métodos: ¿ Qué es JavaScript realmente? Bueno, es bastante simple, en realidad. JavaScript es una lista de objetos a los que tiene acceso y una lista de acciones a las que puede solicitarle que realice. A los primeros se les llama las propiedades. Es la lista de objetos a los que tiene exceso, se llaman propiedades. El listado de acciones que puedes pedirle que realice, se llaman métodos. Hay un montón de propiedades y métodos predeterminados, y luego hay aquellos que puedes escribir tú mismo y agregar a JavaScript. Si tuviéramos a ver JavaScript como un auto, por ejemplo. Un auto tendría propiedades como color de pintura, asientos, llantas, motor, marca, modelo, está encendido, año hecho, velocidad actual. Entonces tal vez tendría métodos como encender, cambiar de marcha, mostrar lo rápido que vamos, hacer estallar el capó, abrir el techo solar, mostrar la luz de advertencia. Las propiedades pueden variar en su interior. Por lo que la propiedad encendida podría haber sido sí o podría ser no. El color propiedad es una palabra, podría ser rojo, podría ser azul. La propiedad del motor, bueno, eso es una cosa real, es otro objeto. Asientos, es una lista de asientos, y cada uno de esos asientos es un objeto. Ahora, cada objeto también tiene su propio conjunto de propiedades y métodos. El inmueble del asiento es una lista, y así podría tener su propia propiedad de número de asientos y tener su propio método de darme asiento número uno y una vez que tengas asiento número uno, puedes acceder a sus propiedades y métodos, como color, es el cinturón de seguridad funcionando, y el método como calentar los asientos o reclinarse. Bueno, ¿cómo se escribe JavaScript? Entonces para acceder a todas estas propiedades y métodos de un objeto, debemos usar.sintaxis o.notación. Podemos decir coche.asientos y nos daría los asientos. O podemos decir car.isturnedon y diría que sí o no. Podríamos decir car.currentspeed o car.color o coche.make o car.turnon. Ahora, ese es un método. Alguna instrucción, podríamos decir car.popthehood, o se podría decir car.opensunroof. Se puede ver cómo estas son instrucciones y las instrucciones son diferentes porque tienen los paréntesis después de ellas. Para hacer uso de esos, hay un idioma que podemos empezar a aprender, y es un idioma que voy a empezar a enseñarte. Hagámoslo. 7. Variables: Lo primero que quiero hacer es explicar qué es una variable. Una variable es algo que se refiere a otra cosa. Si digo FavColor, y le daré a mi FavColor un valor de rojo. Aquí puedes ver que hay esta palabra clave var seguida de un espacio, seguido de un nombre, seguido de un signo igual, y luego un valor. Termina con el punto y coma que básicamente sólo dice: “Está bien, estamos terminados con esta línea”. Esta palabra clave var es especial, hay que deletrearla de esta manera. Debes dejar un espacio entre la palabra clave var y tu nombre de tu variable. Este nombre puede tener guiones bajos, simplemente no puede tener espacios y no puede tener guiones. Prefiero usar CamelCase que es una pequeña primera letra, y luego cada vez que hay otra palabra, en lugar de un espacio o un subrayado, solo uso una letra grande o una letra mayúscula. Alrededor del signo igual, no tienes que tener espacios, pero para mí, solo hace que sea mucho más fácil de leer. Entonces le asignamos un valor. El motivo por el que le asignamos un valor es porque esto puede cambiar, esto puede cambiar a verde, puede cambiar a azul, y así cuando estamos trabajando en nuestro código, no necesitamos hacer un seguimiento de lo que realmente es este valor, solo necesitamos tener color favorito. Voy a copiar esto y mostrarte cómo funciona esto. Si digo azul, o tal vez solo copiaré todo esto, iré a Google Chrome y diré “Ver”, “Desarrollador”, “ Herramientas para desarrolladores”, o simplemente puedes hacer clic derecho y decir “Inspeccionar”, y luego ir a tu consola. Lo que me gustaría hacer aquí es simplemente pegar esto y decir var FavColor es igual a azul. Entonces puedo decir FavColor y me da azul. Ahora, entonces puedo cambiar esto y decir FavColor es igual a verde. Entonces puedo decir FavColor y me va a dar verde. No necesito hacer un seguimiento de este JavaScript, nadie hace un seguimiento de esto. ¿ A qué podemos almacenar aquí o a qué podemos referirnos? Bueno, hay algunas cosas a las que podemos referirnos. El primero es el texto. En JavaScript y la mayoría de los lenguajes de programación, lo llamas cadena. Puedes poner comillas dobles o puedes poner comillas simples. Sublime Text es realmente genial porque si no hay nada ahí y presionas una cita, normalmente te da dos de ellos. si hago eso, te da dos, entonces escribes tu trozo de texto y luego lo terminas con punto y coma. Ahora, otro tipo es una matriz. Ahora, array es básicamente una lista. Lo que puedes hacer aquí es mantener cualquier tipo de lista. Puedes guardar texto, puedes mantener números, puedes mantener variables, puedes mantener objetos, puedes mantener funciones, puedes guardar y almacenar y listar lo que quieras. Por ejemplo, puedo decir MyArray o llamémoslo mi FavColors. Puedo decir azul, rojo, verde. Por lo que esto se convierte en una lista. No tengo que tener entonces color favorito número 1, color favorito número 2, color favorito número 3. Entonces puedo decir, var NumOfFavColors es igual a 3. Ahora bien, este es un número. Ya ves no tengo citas a su alrededor porque si lo hiciera así, realidad sería una cadena ahora o texto, pero queremos que sea un número para que podamos realizar operaciones matemáticas en él. El siguiente tipo de objeto es un booleano. Se trata de un valor verdadero o falso o un valor sí/no. O puedo decir verdad o puedo decir falso. Básicamente es lo mismo que decir cero o uno, cero es falso, uno es cierto. Se puede decir verdad con mayúsculas y decir verdadero o falso con mayúsculas también. Sublime solo le gusta en minúsculas, así. Tenemos estos cuatro tipos básicos. Hay otro que es un objeto, que puede combinar todas estas cosas. Un objeto es como una matriz, pero puedes darle un nombre para cada elemento de la lista. Puedo decir FirstName, y en lugar de decir igual así, hago un colon, y luego diré Rich. Entonces voy coma, y puedo decir Apellido, y puedo decir, Armstrong. Entonces puedo decir FavColors, y solo voy a copiar esto, y puedo poner una matriz ahí. Puedo decir, añoSalive 103, y eso es un número. Puedo decir, IsMale, cierto. Se puede ver que todo esto está dentro de un objeto lo cual es muy cool. Significa que puedes acceder a todos estos detalles con notación de puntos. Entonces richobject.Ismale y me va a dar verdad. Entonces vamos a copiar esto y te mostraré cómo funciona en Google Chrome. Vamos a despejar esta consola. Voy a decir objetos ricos, y ahora, quiero decir Richobject.Firstname. Dirá Rich. Esto es muy guay porque no necesitamos saber eso. Ahora puedo cambiar esto y decir FirstName es igual a Bob. Ahora, cuando pida richobject.Nombre, será Bob. Entonces eso son variables en pocas palabras. 8. Funciones: Está bien. Entonces, ¿qué es una función? Ahora, una función es algo que se puede reutilizar. Por lo que se parece mucho a una variable y en realidad se puede almacenar en una variable, o una variable puede referirse a una función. Por lo que necesitamos decir función, darle un nombre de función, WhatismyFavColor. Entonces esto es algo que lo convierte en una función, estos dos paréntesis, corchetes, quieras llamarlos. Entonces la cosa que sucede dentro de la función o el método está dentro de estos dos corchetes o dentro de este cierre. Ahora, podemos llamar a esto funcional o teclearlo así, y entonces podemos teclearlo muy fácilmente así, cual prefiero mucho porque significa que esto solo necesita variables en lugar de variables y funciones. Pero es ligeramente diferente porque tiene estos paréntesis. Entonces, ¿cuál es mi color favorito? Está bien. Entonces esta es una pregunta y quieres que devuelva algo. Entonces voy a copiar esto y decir DoSomething. Está bien. Ahora, DoSomething podría hacer un console.log do Algo. Está bien. Ahora si copiamos esto y nos metemos en Chrome, y ahora solo digo Pegar, ahora Entro, y ahora digo hacer algo sin los paréntesis, va a decir, cool, ahí está la función a la que te refieres. Pero si digo doSomething y pongo esos paréntesis después de él, lo va a registrar, va a hacer algo. Por lo que poner esos paréntesis después de una función es realmente, realmente importante, sobre todo si quieres llamarla o solo si quieres llamarla o invocarla. Ahora, ¿cuál es mi color favorito? Bueno, quiero saber cuál es mi color favorito, así que aquí en realidad podemos decir regresar azul. Entonces si quiero cuestionar cuál es mi color favorito, y puedo poner todo un montón de código y lógica en esta función para determinar qué es, quiero que devuelva azul. No sólo quiero que registren algo o haga algo, quiero conseguirlo. Entonces esto es bastante genial porque se parece mucho a una función incorporada. Yo sólo voy a tratar de despejar esto. Entonces cuando dices Math.Round y le das un valor de 4.568, te va a dar cinco. No quieres que solo haga algo y no te diga. Entonces cuando pegue WhatismyFavColor, voy a decir, WhatismyFavColor, y va a decir azul. Fantástico. En tanto que este otro, este doSomething, verás que devuelve indefinido. En realidad no nos devuelve nada, sólo hace cosas. Por lo que hay dos tipos diferentes de funciones de hacer. También puedes devolver true, puedes devolver matrices, puedes devolver cualquier cosa que quieras. Pero si devuelves algo, no regresa ni llega a nada más, literalmente detiene esa función ahí mismo. Entonces si copiamos esto, vamos a despejar esta consola, y pegarla, cuando diga WhatismyFavColor ahora, va a decir falso. Ya ves que no devuelve nada más. Entonces eso es bastante importante recordar, que cualquier cosa después del regreso en realidad no se ejecuta. Ahora hay una cosa más que necesito mostrarte sobre las funciones. Entonces si quisiéramos hacer algo como conocer el área, así que dentro de estos paréntesis, en realidad podemos decir, bueno, ancho y alto. Entonces podemos decir que el ancho de retorno multiplicado por la altura, y se puede ver que estoy haciendo algunas matemáticas aquí. Entonces si copiamos esto, y despejamos la consola, pegarlo, y digo área, no un número. Es como, ¿qué está pasando? Ahora si paso en cinco y cuatro, ahí vamos, me va a dar 20. Entonces podemos hacer esto de nuevo y decir var fullname es igual a función, y por aquí podemos decir nombre, segundonombre. luego podamos devolver el nombre más el segundonombre, pero podemos poner un espacio en el medio. Se puede ver aquí estas también son casi como variables, excepto que son parámetros. Por lo que este nombre de pila, aunque no sabemos qué es, se combinará con segundonombre con un espacio intermedio. Entonces si copiamos esto y pegamos esto, y luego decimos fullname y pasamos en Rich, y ahora está queriendo cuerdas, va a volver con Rich Armstrong. Si decimos a Rich y Armstrong así, va a estar diciendo, bueno, ¿qué está pasando realmente? Esto es bastante importante, pero lo que podríamos hacer aquí es decir, var MyName es igual a Richard. Entonces podemos decir fullname y podemos copiar MyName y poner un cheque porque esto ahora se refiere a Richard. Cuando presionamos Enter, después de que haga de éste una cuerda, se puede ver que vuelve con Richard Armstrong. Está bien. Entonces esas son funciones en pocas palabras. No tienes que tener dos, puedes tener tantas como quieras. A veces solo necesitas uno para hacer lo que necesites hacer dentro de la función. Recuerda, puedes devolver cosas con estas funciones, por lo que se vuelven realmente útiles, y solo puedes hacer cosas con ellas sin regresar. 9. La instrucción If-else: Ahora quiero decirles qué es una declaración IF. Básicamente, podemos decir si algo, entonces hacer algo. Si lo que hay en estos paréntesis es cierto, entonces haz algo. Lo que voy a decir es solo alertar varón. Ahora, si es cierto, alerta macho. Yo sólo voy a copiar esto y pegar esto, macho. Es cierto porque simplemente estamos diciendo explícitamente que esto es cierto. Pero ahora queremos hacer esto un poco más dinámico. Podemos decir si el macho es igual, igual al masculino, alerta al macho. Varonil, fantástico. Pero eso puede ser un poco oscuro para ti. ¿ Por qué no solo usar uno igual? Bueno, porque uno igual asigna un valor. Simplemente no va a funcionar. En realidad estamos probando si esto es verdadero o falso. Es una declaración de comparación. Podemos decir cosas como una es igual a dos, lo que claramente dirías falso. Genial. Bien hecho. Pero si decimos que uno es igual a uno, es cierto. O podemos decir que 10 es más grande que uno, cierto. O podemos decir que 10 es más pequeño que uno, falso. También podemos decir que 10 es más grande o igual a uno, lo cual es cierto. O podemos decir que 10 es menor o igual a uno, falso. Estos se vuelven bastante poderosos cuando se combinan con variables. Podemos decir que el número 1 es igual a algún número, y el número 2 es otro número. Podemos hacer esto con cadenas, podemos hacerlo con matrices, podemos hacer cualquier tipo de cosa aquí. Recuerda, nuestras funciones, también pueden devolver verdadero o falso. Aquí, buscamos un valor verdadero o falso. Podemos decir que el número 1 es mayor que el número 2. Ahora si copiamos y pegamos todo esto con las variables incluidas, no pasó nada porque el número 1 no es mayor que el número 2. Pero si hacemos esto, ahora podemos sacar los vars porque ya están ahí y dicen macho. A lo mejor no deberíamos decir masculino, masculino deberíamos decir, cierto. No está funcionando, pero eso sí funciona. Podemos decir, si algo sucede, si esto es cierto, realizar las cosas aquí dentro, lo cual es genial. Pero ahora también podemos decir, de lo contrario. Si esto no es cierto, entonces alerta esto. Haremos algo aquí. Si siempre quieres realizar alguna acción, ya sea verdadera o si es falsa, es genial usar una declaración if-else. Pero ahora esto es un defecto. Con números, está bien. Pero ahora si quisiéramos decir el nombre 1 es Rich y el nombre 2 es Bob. Si el nombre 1 es igual a Rich, alertas true, else-if, name 2 es igual a Rich, alert true, else, alert false. Vamos a aclarar esto. Si el nombre 1 es Rich, alerta verdadero, y lo que voy a hacer aquí es verdadero 1 y digo verdadero 2, sólo para que sepamos cuál es cuál. Simplemente voy a copiar esto y pegarlo para mayor referencia. Verdadero 1. Eso esperábamos. Si ahora tenemos que cambiar el nombre 1 a Gareth, y luego tuvimos que volver a ejecutar esto, es falso. Porque ahora nombre 1 es Gareth. Nombre 1 ser Rich, y el nombre 2 no es Rich. Ahora podemos decir nombre 2 es igual a Rich, y voila. Si entonces decimos, esa declaración IF otra vez, es verdad. Fantástico. Ahora podemos decir si, y else-si, y lo demás. Podemos decir, si esto es cierto, hacer esto, else-si, esto es cierto, hacer esto, contrario, como defecto, hacer esto, lo cual es genial. Ahora otra gran cosa con las declaraciones IF es que se puede decir y, o se puede decir o. Se podría decir que el nombre 1 es Rich y el nombre 2 es igual a Bob. Lo que estamos haciendo aquí, es que estamos diciendo que esto debe ser cierto y esto debe ser cierto. Lo que estamos diciendo con éste, éste o, es bastante difícil de recordar, es que estamos diciendo si esto es cierto, o esto es cierto, entonces sigue adelante. Estas son declaraciones if-else. 10. Escribe algo básico en Javascript: Arrastremos en la carpeta js-rocket a nuestra aplicación Sublime Text, y hagamos exactamente lo mismo con Chrome, excepto abrimos index.html. Ahí vamos. Es más o menos donde lo dejamos la última vez y ahora empecemos a escribir algo de JavaScript. Tenemos la etiqueta de script que está destinada a encajar en nuestro HTML. Ya ves lo que hace Sublime Text, es increíble. Simplemente autocompleta cosas para ti. Voy a cortar esto y lo voy a poner justo dentro de la etiqueta de cabeza aquí y sangrarlo un poco, y darle a la página HTML un título de JS Rocket. Voy a Guardarlo después de poner hola js cohete en el cuerpo, y podemos poner eso en una etiqueta h1. Vamos a sangrar eso, y ahora vamos a Guardar. Donde lo dejamos la última vez, inspeccionamos la página y dentro de nuestra pestaña de Consola aquí, podemos ver que decía, hola ahí amigos. Esto es realmente genial porque significa que podemos comunicarnos y ver qué está pasando a pesar de que el usuario no ve eso. Si volvemos a inspeccionar, vemos eso, hola ahí amigos. Esto se debe a que está escribiendo console.log. Empecemos a escribir algo de JavaScript, y te explicaré las cosas a medida que vaya. Lo que quiero hacer es que quiero crear mi propio objeto. Yo quiero decir coche var. Cuando digo var, es una variable, es algo que puede cambiar. El auto es un objeto. Ahora este objeto, vamos a decir igual, darle un nombre llamado auto igual a un objeto. Eso es algo muy raro. Presionemos “Enter” y por dentro aquí, le vamos a dar algunas propiedades. Voy a decir make, y voy a decir VW. Entonces voy a decir tipo, y voy a decir Polo. Es un VW Polo, y puedo decir color: azul. En realidad tengo un VW Polo azul. Ahí vamos, empezamos con tres propiedades. Mi auto es un objeto. Significas un objeto con estas llaves, y luego tienes una propiedad y un valor, valor clave clave. Lo que también podemos hacer aquí es que se puede ver que estos son sólo texto. Lo que podemos hacer entonces es decir, ¿qué otro tipo de propiedades tenemos? Iturnedon, verdadero, o podemos decir falso. Aquí se puede ver este es un valor sí-no, un valor verdadero-falso. A esto se le llama booleano, un nombre tan raro. Lleva el nombre de alguien. La otra cosa que podemos tener es un número, por lo que NumberOfWheels. Ese fue un buen silbato, NumberOfWheels, y cuatro. Se puede ver que estos no son texto, estos en realidad son números. Entonces podemos decir asientos. Entonces aquí, en realidad podemos tener asiento 1, asiento 2, asiento 3, y asiento 4. Se puede ver que estos en realidad son texto todavía y JavaScript no es precioso sobre cómo se presenta esto. Oh, no es demasiado precioso, debo decir. Pero hagámoslo más fácil de leer y vamos a sangrarlo. Ya puedes ver estoy poniendo comas después de cada conjunto de par de valor clave. Esta es realmente una buena práctica. Este es mi auto, por ahora, solo voy a Guardar esto. Entonces voy a entrar a Google Chrome, refrescar aquí, y voy a ver si el coche está aquí. El auto está aquí. Podemos ver que, es color es azul, iTurnedon falso, hacer VW, NumberOfWheels cuatro, asientos, es una matriz. Una matriz es en realidad una lista. Aquí vamos, tipo Polo. Tenemos un par de cosas más aquí. Se puede ver que los asientos tienen una propiedad de longitud y son cuatro. Vamos coche.asientos. Se puede ver que nos devuelve un montón de asientos o la lista de asientos. Si presiono arriba en la Consola y voy car.seats.length, dice cuatro. Se puede ver aquí que, guau, car.asientos, es una propiedad. Me da un montón de cosas. coche.asientos.longitud, en realidad estoy haciendo notación de puntos, voy cada vez más abajo, pero el auto sigue siendo lo que me estoy refiriendo. No voy a ir asientos.longitud porque si voy asientos va a decir, ah, solapa. Los asientos no está aquí. Ahora vamos a crear un método. Dentro de este auto, podemos decir entonces TurNon, y lo vamos a llamar una función. Ahora este es un método y así es como lo escribes. Podríamos pasar un valor aquí, pero llegaremos a eso justo ahora. Pero básicamente lo que esto hace es que puedo decir, iTurnedon es verdadero o falso. Vamos a decir, copia esto, y yo voy a decir esto.Iturnedon es verdadero. Así es como lo escribimos. Esta función o esta propiedad es en realidad un método, que todos los métodos realmente son, pero esta propiedad es una función, es un método. Vamos a decir esto, y esto se refiere al auto, Iturnedon, que es este tipo de aquí, es cierto. Ves que es falso, inicialmente. Vamos a guardar esto. Vamos a refrescarnos. Car.Iturnedon, falso. Ahora digamos coche.Turnon, y ahora no podemos simplemente hacer eso porque dirá, genial, ahí está la función. Eso es lo que es. Lo que tenemos que hacer es decir coche.Turnon y luego poner estos paréntesis después de que decir, hacer eso. Dice, indefinido. Pero eso es porque no nos está devolviendo nada, y te mostraré cómo le devuelve algo. Pero ahora lo que podemos hacer es decir coche.Iturnedon, es cierto. Se puede ver lo que pasó aquí. Hiciste algo, lo encendiste y cambió la propiedad sin que tuvieras que cambiarla. Se podría decir cuando el usuario hace clic en este botón, hacer algo, cambiar algo. Otro ejemplo de esto es, vamos a escribir otra función. Digamos volar. Podríamos decir alerta volar. Aquí puedes ver que cuando decimos volar, no es solo una función normal, estás pasando algo en ella. Ya verás lo que pasa aquí ahora. Decimos Guardar. Volvamos a Google Chrome, refresquemos, y podemos decir coche.Iturnedon, es falso. Pero, ¿por qué? Bueno, es porque refrescamos la página. Cuando refrescas la página, todo lo demás empieza desde el principio, y empezamos en falso. Lo que realmente estaba tratando de mostrarte aquí es car.fly. Porque es un método y queríamos ejecutar ese método, pusimos esos paréntesis después de él. Se le ocurre esta cajita irritante que dice, vuela. Ahora lo que es realmente genial es que podemos decir, bueno, ¿podemos hacer esto? Probémoslo, y vamos a crear una nueva propiedad, que es un método llamado switch. Switch es una palabra reservada en realidad. Vamos SwitchCar, función, paréntesis, y llaves, y luego ahí vamos a poner un parámetro, iSON. Dijimos SwitchCar. Podemos decir que si iSON, copiamos eso, es igual a verdadero. Si solo usamos uno igual, realidad decimos que el iSON es cierto, lo cual no lo es. Decimos que si iSON es cierto, entonces estamos haciendo una pregunta, entonces vamos a hacer algo. Yo sólo voy a copiar esto aquí, y luego voy a decir lo contrario, falso. Si voy a decir SwitchCar, voy a decir esto, iSON es cierto, y decir que este iTurneDon es cierto, lo contrario, si no es falso, y voy a decir que este iTurneDon es falso. Esto es un poco de lógica para ti. Puedes empezar a hacer cosas diferentes en base a lo que pases. Vámonos Guardar. Vayamos sólo console.log, y por aquí voy a decir vuelta auto. Voy a poner un espacio aquí y luego voy a decir más iSON. Lo que esto hace es que se vaya, voy a registrar “giro auto” y luego voy a añadir en iSON a esta pieza de texto. Guardemos esto. Google Chrome para refrescar y vamos al coche.Iturnedon es falso. Yo puedo decir coche.Conmutador y podemos decir verdad. Gira auto, cierto. Ahora podemos decir auto isturnedon y es cierto. Podemos decir coche.Conmutador, falso Turno auto, falso. Entonces decimos auto iTurnedon, es falso. Ahí en realidad podemos poner a través de un montón de argumentos y se puede ver cada vez que la consola se va a dar vuelta auto falso o dar vuelta al auto verdadero, va y cambiando lo que hace en base a lo que lo analizamos. Podemos analizarnos en verdadero o falso o podríamos analizarnos en un montón de otras cosas, pero vamos, si es cierto, hacer esto, de lo contrario, hacer eso. Esto es realmente poderoso. Puedes empezar a poner cosas diferentes a una función y sacar cosas diferentes dependiendo de lo que pongas. Aquí no tenemos mucho JavaScript. No tengo mucho HTML. Tenemos bastante JavaScript aquí. Si esto se pone realmente fuerte, mucho y mucho HTML, no queremos tener que escribir aquí nuestro JavaScript. Lo mejor que podemos hacer es literalmente simplemente cortar todo esto. Entonces en lugar de tener todo esto, literalmente vamos fuente igual y luego aquí vamos js, script.js y guardamos eso. Lo que tenemos que hacer aquí en nuestro buscador es que necesitamos crear una nueva carpeta llamada js. Dentro de Sublime Text, tenemos que ir Archivo, Nuevo Archivo, y pegar. Vamos a volver a sangrarlo aquí. Entonces si no lo recoge automáticamente, lo cual probablemente no lo hará porque no tiene título, siempre puedes cambiarlo a JavaScript. Se puede ver que los colores vuelven. Guardémoslo ahora y guárdalo como script.js. Ahorra y luego veamos si funciona. Hola amigos. Coche iTurneDon falso, SwitchCar a true. Fantástico iTurnedon verdadero. Ahora también podemos usar auto TurNon y eso aún puede ser cierto. Ahí lo tienes, ahora tenemos nuestro JavaScript en un archivo separado. Al igual que ponemos nuestras imágenes en un archivo separado, igual que ponemos nuestro CSS en un archivo separado, lo siento, carpetas separadas. Tenemos nuestro JavaScript en una carpeta separada, supongo y en un archivo separado. Ahora tenemos nuestro HTML. Estamos haciendo referencia a nuestros JavaScript aquí. Si quisiéramos referirnos a nuestro CSS, diríamos, cool, vamos a “css/style.css” y se puede ver que es ligeramente diferente. Tu etiqueta de script JavaScript se parece un poco a una etiqueta de imagen y tu etiqueta CSS se ve realmente diferente y tiene esta href, pero es casi lo mismo. No tenemos una carpeta CSS por el momento, así que vamos a crear una. En tu carpeta CSS permite crear un nuevo archivo. Sólo vamos a decir cuerpo y decir color de fondo, gris. Guarda esto dentro de CSS como style.css. Si alguna vez recibes uno de estos pop-ups, solo di cancelar. No compres Sublime Text. Yo sí tengo licencia pero no en el perfil de casting de pantalla. Guardémoslo y index.html, y vamos a guardar este. Después vuelves a Google Chrome, refrescas, y ahora tienes CSS funcionando y JavaScript funcionando. Pero ahora quiero algo de interacción del usuario. Recuerda, el usuario no va a poder acceder a todo esto a través de su consola. Vamos a divertirnos un poco ahora. Si creamos un enlace aquí y dejamos establecer su href en hash, y te mostraré por qué esto es importante. Haga clic en Me, Archivo Guardar. Refrescar. Si vamos Click Me, puedes ver que solo pone ese hash. No refresca toda la página. Esto es realmente importante y te puede ahorrar muchos dolores de cabeza. Lo siguiente que queremos hacer es ir a href. Genial, es eso. Pero ¿qué pasa con click? Hagamos algo. A lo mejor podemos decir car.fly. Eso es bastante interesante, estamos ejecutando JavaScript en HTML. Vamos onclick atributo. ¿ Qué carajo es eso? Bueno, hay un montón de unos que se relacionan con JavaScript. Guardemos esto. A ver si funciona. Click Me. Eso es básicamente Javascripts. Se puede configurar más o menos un sitio web completo como este. Tienes tu guión, cual tiene auto y tiene este método de volar. Cuando lo llamas, alerta volar. Ahora lo que podemos hacer tan bien como podemos decir, SwitchCar a algo. A lo mejor no tenemos coche para volar podemos decir, “SwitchCar, cierto”. Podemos encenderlo. Vamos a guardar. Volvamos aquí. Ahora, si vemos es auto TurneDon falso, Click Me, Car iTurneDon, true. Ahora puedes ver que a medida que interactúas en la interfaz, cosas en realidad empiezan a cambiar donde no lo puedes ver. Puedes hacer que las cosas aparezcan, puedes cambiar de colores, puedes animar las cosas. Diviértete aquí y prueba cosas, experimentos. Es una manera realmente bonita de hacer las cosas. Incluso puedes escribir cosas no con auto dot. Podrías escribir algo como var y solo puedes hacer una función como sayMyName es igual a la función y luego aquí puedes decir nombre y puedes decir consola o tal vez quieras decir, alertar, “Mi nombre es más nombre”. Archivo guardar. Lo que es realmente importante para cualquier texto y en JavaScript los llamamos cadena, usamos comas invertidas, por lo que comillas dobles o comillas simples. Tan solo asegúrate de que sean iguales en ambos lados. SayMyName. Si copiamos esto y lo ponemos aquí, SayMyName y pondré ahí dentro “Rich”. Sólo ten cuidado aquí. Si estás usando comillas dobles aquí, usa comillas simples aquí, si usas comillas simples aquí usa comillas dobles aquí. Guarda esto. Click Me. Mi nombre es Rich. Ahí vamos. Diviértete, haz cosas increíbles. Pero ahora, si quieres entonces compartir esto con tus amigos, y realmente te animo a que compartas en la galería de proyectos, solo para presumir, solo para mostrar lo que has hecho y también puedes hacer preguntas. Si las cosas no están funcionando, publíquelo, póngalo en GitHub, publique un enlace y diga: “Rich, estoy atascado, no está funcionando”. Entonces puedo entrar aquí y puedo decir: “Parece que hay algunos errores”. Puedo mirar tu código y puedo decir: “Esto no está funcionando”. Otras personas también pueden hacer eso. En el escritorio de GitHub, solo comete tus cambios, di: “Hizo que pasaran algunas cosas de autos”. Comprometerse con gh-pages. Se asegura de que esté en gh-pages y no master gh-pages. Enfriar. Entonces sincroniza. Si bien eso se sincroniza, vamos a github.com. Aquí solo queremos navegar a nuestro repositorio de cohetes JS y mirar nuestros commits. Acude a la sucursal gh-pages. Hizo que pasaran algunas cosas de autos. Vamos a abrir una nueva pestaña, y vamos a ir a tu nombre de pantalla o a tu nombre de usuario.github.io/js-rocket. Se puede ver que las cosas cambian. Click Me, mi nombre es Rich. Si inspeccionas aquí y vas a tu consola, puedes ir en coche. Si presionas Enter, verás un montón de cosas que tu auto puede hacer. Fantástico. Comparte tus proyectos. 11. Comienza a jugar con CSS y JS.: Sí. Pero Rich, no quiero sólo tener texto viniendo y apareciendo y texto en la consola. Yo quiero que pasen algunas cosas geniales. Bueno, déjame mostrarte algunas cosas geniales entonces. Onclick, digamos doCoolStuff. ¿ Qué tal eso? Entonces vamos a poner un div, y va a tener una clase de cool. Dentro de ella, va a tener algunos textos como, “Hola, estoy bien”. Vamos a sangrar eso. Ahora lo que verás lo que pasa aquí, asegúrate de que estás en tu anfitrión local es que cuando digas haz clic en mí, dice: “Algo no está funcionando”. Es realmente genial tener tu consola abierta porque te dice cuando hay errores. También te puede decir un error. Si hace clic ahí, y dirá: “Ahí es donde está el error, por favor ayúdame”. Hola soy cool! Genial. Lo que queremos hacer aquí es que solo queremos darle estilo un poco a ese elemento cool. Yo sólo voy a copiar esto, necesito darle estilo. Voy a darle un ancho de 100 pixeles. Voy a darle una altura de 100 píxeles, y luego le voy a dar un color de fondo de verde. Entonces lo que voy a hacer es que voy a decir.cool.red, color de fondo rojo, y luego voy a establecer una transición. Deja que esa salga. Transición de fondo-color, voy a decir, hagámoslo un 1,000 milisegundos. Bueno, tal vez sólo un segundo. Vamos a guardar esto. Ahora lo que podemos ver pasando aquí, está fresco, es verde. Pero si inspeccionas a este tipo, y lo haces, si digo rojo. ¿Viste eso? Bueno, ahí suceden algunas cosas geniales. Yo sólo voy apple zed y apple cambiarlo para cambiar la clase. Si cambio esto de nuevo a simplemente cool, dirás que cambia a verde. Eso es lo que vamos a hacer. Voy a dar clic en el botón “Click Me” hacer ahora. Hay algunas formas de hacer esto. Una de las formas más fáciles es ir y darle a esto una identificación de algo único, y solo lo vamos a llamar cool, luego Guardar. Voy a copiar esto. Entonces dentro de aquí, voy a decir var. ¿Cómo lo llamé? doCoolStuff, y va a ser una función. Por aquí, voy a decir document.getElementById. Voy a poner eso ahí dentro. El documento es lo principal, como la ventana, el documento. Creo que es más principal, o tal vez no lo es. Pero ahora no importa. Desde un documento getElementByID.cool, y ahora vamos a cambiar el nombre de la clase. A document.getElementByID.ClassName equivale a fresco y rojo, rojo fresco. Podemos cambiar el envoltorio de esto, creo que en alguna parte. Sublime Text, vamos a cambiar la configuración Predeterminado. Yo sólo voy a buscar envoltorio. Word_wrap auto, Archivos, Preferencias, Configuración-Usuario, word_ wrap. Se puede ver que incluso en Sublime, es JavaScript, checa en esto. Word_wrap, true, Guarda eso. ClassName es igual al rojo fresco. Guardemos esto, y podemos cerrar los valores predeterminados. Fantástico. Vamos a entrar a Google Chrome, Refrescar, Click Me. Whoa, ¿viste eso? Las cosas se pusieron reales. Eso es realmente genial. Ya puedes hacer cosas geniales. Algunas cosas más que me gustaría mostrarte es ir, si quieres hacer un comentario, así es como lo haces. Si quieres hacerlo en múltiples líneas, lo haces así. Cualquier cosa entre aquí se comenta, el navegador cuando lo miras. Pero es bastante útil cuando dices algo como esto. Esta función hace esto. Cuando dices document.getElementById cool, el ClassName. Simplemente puedes decir como cambiar el nombre de la clase. Eso es lo que haces comentarios. Esos son bastante bonitos. Ahora lo que sería genial es cambiarlo de nuevo. Ahora haz cosas geniales. Lo que podemos hacer es decir var CurrentClassName es igual a eso. En realidad no lo estamos consiguiendo, el ClassName. Podemos decir si CurrentClassName es igual a cool. Entonces podemos decir, y lo haremos rojo fresco, o podemos decir más espacio, y sólo ponerlo fresco. Vamos a cerrar esto, Archivo, Guardar. Si está fresco, cambia a rojo fresco. Si no lo es, lo cambié a enfriar. El modo en que está transitando es su color de fondo de transición. Podemos cambiar esto a dos segundos, y cuando lo agregues, está en transición. Súper cool. Vamos a refrescar, Click Me. Fantástico. Cambia a rojo. Vuelve a hacer click Me, ¿cambió? No, no lo hizo. Me pregunto por qué no está cambiando. Aquí vamos. Tenemos declaraciones if else, pero entonces lo tenemos al fondo aquí, sólo lo estamos enviando al rojo fresco de todos modos. Yo sólo voy a quitar eso. Vamos a Guardarlo de nuevo. Refrescar, Click Me. Va al rojo, genial. Click Me, se vuelve a verde, y se puede ver lo que está pasando aquí. El nombre de la clase está cambiando. Ahora puedes cambiar de clases con JavaScript en el que estamos, y esa cláusula solo puede hacer cantidades increíbles de cosas. Puede cambiar de tamaño, puede cambiar su capacidad, puede girar. Puede hacer cosas locas. Vas de izquierda a derecha. Se puede mostrar, y luego se puede ocultar. Es simplemente ridículo. Simplemente echa un vistazo a esto. Podemos decir, ok cool. Pongamos una exhibición de ninguno. Enfriar. Bloque de pantalla. Enfriar. Vamos a guardar esto. Veamos qué pasa. Se ha ido. Está ahí. Se ha ido. Está ahí. Es bastante guay. Se puede ver que no está en transición, y eso se debe a que solo está mostrando bloque y mostrando ninguno. Lo que podemos hacer ahí es que podemos establecer la visibilidad a oculta, y luego la visibilidad a visible. Guardemos eso, y luego bastante cool. Es así como puedes hacer algunas cosas bastante geniales. Pero a continuación, es hora de construir nuestro cohete, y nuestra secuencia de lanzamiento de cohetes. Yo estoy emocionado. 12. Primero la planificación :): Lo que me gustaría hacer es solo hacer un poco de planeación. Quiero hacer una secuencia de lanzamiento de cohetes con JavaScript. Básicamente quiero que el cohete vaya de ahí cuando el usuario haga clic en el botón, lance ese cohete al aire, y se pone un poco de llamas debajo y se va. Entonces lo que hago es crear como un poco de storyboard. Básicamente empiezan de nuevo aquí, los cohetes de la derecha y la interfaz de la izquierda, luego hacen clic en “Ir” y luego empieza a contar atrás. Hay un enlace de abortar o abortar botón para llevar al usuario de vuelta al escenario uno. El cohete aún bastante estacionario. Después llega a cero y dice despegue. A los cohetes se les pone unas llamas por debajo y empieza a despegar, y en algún momento dice: "Bien hecho. y me ofrece la oportunidad de volver a hacerlo. El cohete sobre esta etapa está de crucero, está fuera de la atmósfera. Lo está haciendo tan bien. No hay posibilidad de fracaso. Pero en medio de esa etapa, algo podría salir mal. Podría haber una explosión, podría haber todo tipo de cosas pasando. De nuevo, debemos hacerlo de nuevo. Por lo que ese botón nos llevará entonces vuelta como con ese todo el camino para empezar a hacerlo de nuevo. Está bien y esa es mi planeación. 13. Escribamos HTML y CSS básicos para el cohete: Ahora que sabemos cómo queremos que vaya nuestra secuencia de lanzamiento de cohetes, abramos el proyecto y arrástrelo al texto sublime. Ahora, lo que voy a hacer es crear un nuevo archivo, o Archivo Nuevo, y luego lo voy a guardar como rocket.html. Voy a guardarlo en carpeta JS-Rocket. Rocket.html, y van a escribir rápidamente algo de HTML aquí. Fantástico. Entonces decimos secuencia de lanzamiento de cohetes. Espero que así sea como deletree secuencia. Pero no es lo que estamos haciendo aquí. No estamos haciendo una lección de ortografía, estamos haciendo una clase de JavaScript. Ahora, lo que voy a hacer aquí es que voy a empezar a escribir mi HTML para esta secuencia de cohetes. Básicamente tengo dos divs. Uno está a la izquierda, otro a la derecha. Voy a llamar a éste a la izquierda, y voy a llamar a la siguiente derecha. Demos a éste un poco de espacio también. Entonces la izquierda va a ser varias cantidades de diferentes divs, y a la derecha va a ser un cohete y tal vez algún terreno. Lo que vamos a hacer es que vamos a decir, vamos a div con una clase de cohetes. Entonces por aquí, vamos a decir div con una clase de estado1. Voy a cerrar ese div. Ahora dentro de aquí, le voy a dar un rumbo 1, y decir JS Rocket Launch. Entonces vamos a tener un botón, href, diga Launch. Voy a darle una clase de botón, y lo que voy a hacer aquí es que voy a decir al click iniciar la cuenta regresiva. Ahí vamos. Tenemos nuestro primer estado 1, y veamos cómo se ve esto. Voy a guardar esto, y voy a abrir cohete HTML dentro de Google Chrome, haz clic en Launch. Abramos nuestra consola. Es bastante bonito tenerlo en la parte inferior, a veces en el lateral, eso también es genial. Pero ahora no empieza a contar con nosotros. Eso está bien. Simplemente voy a empezar a peinar esta página. Tengo mi izquierda, tengo mi derecha, aquí es donde va a estar mi cohete, aquí es donde va a estar mi interfaz. Está bien. Dentro de mi CSS, necesito crear una carpeta CSS, así que voy a establecer mi href como mi enlace a CSS/rocket.css. Guarda esto, y en mi CSS, voy a decir File. Nuevo archivo, y vamos a ir a la izquierda. Voy a guardar este rocket.css. Punto a la derecha. Entonces, ¿cómo va a quedar el botón? Entonces, ¿cómo se va a ver el otro A? No tenemos ningún otro As, pero sabemos que vienen. Lo que quiero hacer es, a la izquierda, quiero fijar esta posición para ser arreglada. Fijo es impresionante. Te mostraré lo que hace. Voy a establecer el color de fondo a, déjame buscar un color de fondo realmente genial. Fondo HTML. Vamos a ponerlo en aguamarina. Posición fija, y le voy a dar un 50 por ciento de ancho y voy a decir altura, quiero que sea 100 por ciento. Entonces voy a decir top zero, left zero. Esto significa que va a ser el 50 por ciento del ancho de la ventana de mi navegador, la altura va a ser del 100 por ciento. El top va a ser cero y la izquierda va a ser cero también. Guardemos esto, veamos qué pasa. Fantástico. Ahí vamos. Ya ves que realmente no puedo desplazarme tanto, y eso es lo que pasa cuando pones algo para arreglarlo. Entonces solo voy a copiar esto y pegarlo en el correcto. En lugar de la izquierda, voy a poner la derecha para que sea cero por lo que se va a pegar a la derecha. Yo quiero otro color para este, así que déjame cambiar este color. Yo quiero un azul, así que tal vez signo funcionará. Alicia azul se ve bien. Entonces voy a cambiar eso a Alice azul y refrescar. ves tengo mis dos paneles ahora, izquierda, derecha, interfaz aquí, cohete aquí. El siguiente que quiero hacer es, vamos a darle estilo a mis cohetes. Voy a poner a este tipo en posición fija a, tal vez debería decir posición absoluta. Ahora absoluto es realmente genial porque va, ¿dónde está mi padre? Entonces el cohete, que está aquí, irá, ¿dónde están mis padres? Y va bien, correcto es mi padre. Entonces va, genial, me posicionaré de acuerdo a donde esté ese tipo. Esa es la hoja de estilo equivocada. Mi cohete está en posición absoluta, voy a poner su izquierda en 50 por ciento y voy a fijar su fondo en 20 píxeles. Entonces lo que voy a hacer es que le voy a dar un ancho de 20 píxeles y una altura de 100 píxeles con un color de fondo de azul. Porque los cohetes fríos son azules. Refresca, y ahí está mi cohete. Ese pequeño lápiz azul. Ahora lo que quiero hacer es en realidad quiero poner algo de terreno en esto. Simplemente ve div clase de terreno, y voy a guardar eso, y luego mi hoja de estilo, y voy a poner algo de conexión a tierra. Diré que el color de fondo es verde, y decir posición absoluta, y luego voy a decir cero inferior y cero izquierdo, y ancho voy a decir 100 por ciento, y altura, 20 píxeles. Voy a guardar eso. Veamos cómo se ve esto. Fantástico. Ahora, tenemos un cohete lanzable. Podemos hacer que se vea aún mejor ahora, pero esta es una lección de JavaScript, la clase de JavaScript. Por lo que no estamos demasiado preocupados por cómo se ve, pero podemos hacer que se vea bastante guay en este momento. Está bien. Ahora lo que quiero hacer son los cohetes, y una vez que agregues una cláusula, quiero decir rockets.flying, y quiero decir abajo, 1000 pixeles. Entonces voy a poner una transición en esto de fondo, digamos 1000 milisegundos. Ahí vamos. Voy a salvarlo, así que rocket.flying. Entonces podemos inspeccionar esto aquí arriba. Tengo el suelo, tengo los cohetes. Ahora si ponemos esto volando, qué pasa, nada. Es porque no nos hemos refrescado. Entonces vamos a refrescarnos y a hacer eso de nuevo. Volar. ¿Viste volar ese cohete? Puede que tengamos que frenar un poco eso. Entonces pongamos un cero extra ahí dentro, File Save. Volar. Ahí vamos. El cohete está volando volando. 14. Agreguemos Javascript al cohete: Entonces lo que vamos a hacer ahora es que tenemos que poner a diferentes estados para hacer volar este cohete. Vamos a presionar Launch, queremos la cuenta regresiva, cuando termine la cuenta regresiva, queremos decir levante , queremos que el cohete siga subiendo y luego queremos decir, bien hecho, o queremos decir fracaso e inténtalo de nuevo. Vamos a darle una oportunidad a esto. Entonces tenemos nuestros cinco estados que necesitamos poner aquí. Sólo voy a copiar y pegar esto y sólo decir estado2. Voy a darle a esto un id de cuenta regresiva y va a empezar a las 10. Entonces vamos a decir botón, StartCountdown y podemos decir Abortar. Podemos ver cómo se ve esto. Se ve bastante similar, estado1, estado2 vienen debajo uno del otro así que si miramos a la izquierda aquí estado1, estado2 vienen uno debajo del otro. Entonces queremos otro se llama estado3. No queremos contar atrás lo que queremos ahora es que queremos decir Lift Off. Ahí no va a haber botones. El siguiente que queremos es que queremos un estado4 y esto va a decir, Bien hecho sin aseguramiento. En lugar de abortar vamos a decir, hazlo otra vez. Entonces nuestra última debería ser estado5. Voy a decir, Oh No, DoitOtra vez, fantástico. Entonces solo quiero decir Inténtalo de nuevo aquí. Vamos a guardar ese comando S, controlar S, o simplemente vas a Archivo, Guardar. Ahora, lo que tenemos aquí es que tenemos un montón de estados diferentes, pero solo quiero que cada uno esté ahí cuando tenga que estar ahí. No todos ahí a la vez. Entonces lo que voy a hacer es dentro de aquí, voy a decir.state1 y sólo voy a copiar eso unas cuantas veces 2, 3, 4, 5. Voy a decir display: ninguno. Entonces lo que esto va a hacer es que sólo los va a esconder hasta que los necesite. Entonces Archivo, Guardar y ahí vamos. Se han ido hasta que los necesito. Entonces lo que puedo hacer aquí es que puedo decir cuando la clase del cuerpo cambia a otra cosa, entonces podemos empezar a cambiarlo. Cuando el cuerpo va cuerpo.state1 entonces podemos decir estado1, mostrar, bloquear. Simplemente escribiré en uno será más fácil. Usando como estado2, estado3, estado4, estado5. Entonces tenemos estado2, estado3, estado4, estado5. 2, 3, 4, 5. De lo contrario podemos decir que todos estos en realidad solo muestran: ninguno. Pantalla: none, display: none, display: none, display: none. En lugar de tener pantalla de interacción: ninguna tantas veces me voy a ir, todos ellos muestran: ninguno. Así que guárdalo ahí. A ver qué pasa. Ahí no hay nada que esté bien. Lo que necesitamos hacer es cambiar nuestra clase corporal a estado1. Nos guardamos eso, nos refrescamos, y algo se rompió. Lo que pasó aquí es que estado1 es exhibición: ninguno. Entonces esto ahora es problemático. Lo que necesitamos hacer es pensar en esto, ¿cómo realmente cambiamos esto? En realidad podemos cambiar esto a cuerpo-estado1. Podemos copiar eso. Deberíamos guardar esto y cambiar este cuerpo-estado1. Archivo, Guardar. Las cosas retroceden como se alejan. Ahora podemos irnos. Clase cuerpo-estado2. Ahí vamos, cuerpo-estado3, Lift Off, cuerpo-estado4 fantástico, cuerpo-estado5. Eso es genial. Pero ahora estoy pensando, wow. Estos estados entonces ¿qué pasa si estos clics sólo pueden cambiar un estado? Para que pueda ir ChangEstate a dos, suena bastante bien. El botón de abortar ChangEstate volver a uno, cool. Hazlo de nuevo, ChangEstate volver a uno porque vamos a volver al estado1. Entonces hazlo de nuevo, ChangEstate volver a uno. Pero, ¿cómo llegamos a distintos tres? Bueno, aún no hemos escrito ningún JavaScript. Por lo que verás aquí recuerda que tienes una consola ChangEstate no está definido. Ni siquiera tenemos ninguno tiene ningún JavaScripts insertado aquí. Pongamos algo de JavaScript aquí. Guión, fantástico. ¿ Cuál será la fuente? El origen será js/rocket.js, fantástico. Ahora en nuestra carpeta JavaScript vamos a ir a nuevo, vamos a guardar esto como rocket.js fantástico. Entonces ahora podemos en realidad, voy a cerrar esto. Podemos empezar a interactuar con las cosas así que hagamos algunas cosas rápidas de JavaScript. Podemos ir var ChangEstate es una función. Entonces podemos decir, estado. ¿ Qué vamos a hacer aquí dentro? Yo sólo voy a guardar esto pero ahora en realidad no sé cómo hacer esto. Yo quiero ir y cambiar la clase de cuerpo por lo que voy a decir busquemos esto, JavaScript cómo cambiar la clase corporal. Veamos esto, document.body.className es igual a lo que sea. Enfriar. Yo sólo voy a copiar esto, y voy a ir aquí y pegarlo, document.body.className es igual a body-state1. Voy a hacer una pausa a través de los números. Si voy y copio esto, y voy a decir: “Genial, cambiémoslo a cuerpo-estado más estado”. Ahí vamos. A ver si esto funciona. Entonces Archivar, Guardar, Refrescar aquí, Lanzar, allá vamos. Eso acaba de cambiar de estado. Abortar, volver a uno, Lanzamiento. Fantástico. Tenemos algunas cosas pasando. A continuación, ¿cómo llegamos de la cuenta regresiva a contar atrás? Hagámoslo. Si el estado es igual a 2, vamos a empezar a contar atrás. De la forma en que hacemos esto es que tenemos el ID de cuenta regresiva, así que sólo voy a copiar eso. Voy a decir, document.getElementsById ('cuenta atrás') .innerHTML. No se ve bien. Lo que puedo hacer aquí sólo para probar es que voy a copiar esto, y entrar aquí y voy a pegar eso ('cuenta regresiva') .innerHTML. Ahí vamos. No sé por qué sublime no lo estaba recogiendo. InnerHTML es igual, y yo arrojo una función tal vez pero en realidad es solo una propiedad, y vamos a decir, nueve. Guardemos esto, y solo veamos si eso funciona. Nosotros Refrescamos aquí, presionamos “Launch”, va a nueve. Pero en realidad quiero contar atrás, así que lo que voy a hacer es crear un temporizador; var timer es igual a nulo. Yo sólo voy a ponerlo en nulo, que no significa nada desde el ínterin, sólo para que sepa que tengo un temporizador aquí arriba. Entonces voy a copiar esto y luego voy a decir timeout es igual a setIntervalo, y luego voy a poner una función aquí. Diremos ir cada 1,000 milisegundos. De lo que esto es, es un temporizador. En un intervalo dado, 1,000 milisegundos , ejecuta una función. Básicamente es pasar en los estados o pasar el parámetro, excepto que estoy pasando en toda una función y digo, hacer esto cada 1,000 milisegundos, que es un segundo. Entonces voy a decir document.getElementById innerHTML es igual, y ahora ¿qué voy a hacer? Ahora voy a decir var CountDownNumber es igual a 10. Diré que es igual a CountDownNumber. Entonces diremos CountDownNumber es igual a CountDownNumber menos 1. Eso significa que la próxima vez que se ejecute, va a ser uno menos. A ver si esto corre. Nos Refrescamos aquí, Lanzamiento. Ahí vamos 10, 9, 8, 7. Ya ves que hay un poco de retraso, pero eso está bien. Entonces entra en menos. Vamos a resolver eso a continuación. Lo que me gustaría hacer aquí es ir, si CountDownNumber es menor o igual a cero, y entonces vas a decir ClearIntervalo. En realidad voy a detener el temporizador. Entonces voy a decir ChangEstate a tres. Pero ahora, también, tal vez no debería poner aquí el ClearIntervalo, porque ¿qué pasa si queremos importar el temporizador? Lo que voy a hacer es que en realidad sólo voy a poner el temporizador aquí arriba. Si hay un intervalo en el temporizador, lo va a despejar. Entonces me voy a ir si el estado es igual, igual a tres, hacer otra cosa. Pero vamos a ver si esto funciona. Bueno, ya es bueno para 79, tardando mucho en explicar esto. Hacíamos clic en “Launch”, 8, 7, 6 , 5, 4, 3, 2, 1, lift off. Enfriar. Entonces eso funciona. Mis cohetes no van a subir sin embargo, así que vamos a tener que cambiarlos [inaudibles] o puedo, así que rocket.flying. A lo mejor lo que necesitamos hacer es decir cuerpo.cuerpo-estado3, cohete. Enfriar. Guardemos esto. Lo que voy a hacer es que sólo voy a aumentar esto a 500, sólo para que sea un poco más rápido. Refresca, haz clic en “Launch”, y veamos qué pasa. Tenemos cohetes. Si has estado siguiendo y escribiendo con, felicidades, acabas de lanzar tu primer cohete. Maldición fantástica. Entonces vamos a decir: “Si es bueno, entonces muéstrale el mensaje de éxito. Si no es bueno, muéstrale el, oh, ningún mensaje”. Vamos a decir, var éxito igual a setTimeout, que es falta de intervalo establecido, excepto que ejecuta la función en un cierto tiempo, no una y otra vez. Aquí adentro, voy a decir, cool, ejecútalo en 2,000 milisegundos, así que en dos segundos. Entonces voy a decir, var randomNumber es igual a Math.Random. Vamos a presumir método aleatorio es real. Siempre podemos ir aquí e ir a Math.Random. Hagámoslo de nuevo para ver si es verdaderamente aleatorio. Enfriar. No es lo que quería establecer método aleatorio, solo quiero un número del 0-10. Entonces lo que voy a hacer es que voy a decir, multiplicar esto por 10, lo cual es genial. Pero entonces también queremos redondearlo, así que voy a decir Math.Round. Básicamente voy a analizarlo en un número. Estoy redondeando un número; ese número va a ser un número aleatorio y multiplicarlo por 10. Ahí vamos. Sólo voy a copiar y pegar eso. Número aleatorio es ese número. Entonces voy a decir, si RandomNumber es mayor que cinco, haz otra cosa. Lo que me gustaría hacer si es más grande que cinco es esto sería un éxito. Entonces en el [inaudible], diré ChangEstate a cuatro, sino, ChangEstate a cinco. Veamos qué pasa aquí. También me gusta registrar esto, solo para asegurarme de que sea el número correcto. Entonces console.log, RandomNumber, así que digamos texto más randomNumber. También puedo decir RandomNumber, RandomNumber. Ahora, este texto de números aleatorios y esto en realidad va a poner el valor de esta variable aquí. Guardemos esto y veamos qué pasa. Lanzamiento, 10, 9, 8, 7, 6, 5. Bueno, no puedo contar tan rápido. Woo, sube. Está bien, bien hecho. Hazlo otra vez. ¿Por qué está bajando nuestro cohete? El RandomNumber fue nueve, fantástico. Hagámoslo otra vez. Aquí la clave es que en realidad está cambiando el estado corporal. Entonces si son cuatro, hay un pequeño problema. Entonces lo que voy a hacer aquí es sólo ir, Control C, Control V, y cambiar eso a 4,2, que siempre vaya a seguir subiendo si es hora de subir o si es un éxito. Guardemos esto. Refresca, lanza, y baja. Si vamos a abortar, va a ser volver ahí, pero ¿por qué volviste a dos? Tenemos que cubrir eso. Oh no, inténtalo de nuevo. Por lo que RandomNumber era cinco. ¿ Eso es correcto? Si es más grande que cinco, es éxito. Entonces si son cinco, vamos a permitir que falle. Lo que quiero hacer aquí ahora es ir, Countdown Number es 10. Entonces pase lo que pase, debe ser 10. Si es estado2, podemos contar atrás. También si es estado3, podemos decir, veamos si es un éxito o un fracaso. Probemos esto otra vez. Lanzamiento. Bien hecho, hazlo otra vez y ahí vamos. Tenemos un exitoso lanzamiento de cohetes. El cohete vuelve a bajar. Tú lo ves como una transición ahí, podemos cambiar eso si queremos. Entonces si decimos cuerpo-estado1, cohete. Podemos decir transición, ninguna. Guardemos eso. Volvamos a Chrome, refrescar, lanzar, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, levante. Fantástico, inténtalo de nuevo. ¿ Ves lo que pasa cuando hago clic en “Intentar de nuevo”? Simplemente se fue directo hacia atrás. Lanzamiento, había algo un poco raro ahí. No empezó enseguida. Entonces lo que pasó ahí es que a pesar de que el CountDownNumber fue a 10, el HTML real no lo hizo. Entonces solo voy a copiar y pegar eso ahí mismo. Entonces lo que voy a hacer aquí es que voy a poner este CountDownNumber antes de que cambie el HTML real, solo para que no se pegue demasiado en 10. Vamos a refrescar esto, lanzar de nuevo. Se puede ver cuántas veces vienen y cambian las cosas. No es solo como un corte claro, como hacerlo una vez, nunca lo vuelvas a tocar, hazlo de nuevo. Entonces eso es sentirse mucho mejor. Ahora, claro, podemos hacer que esta cosa se vea increíble. ¿ Cómo va a ser tu cohete? Oh, no lo sé, inténtalo de nuevo. Supongo que si hicieras eso, tu cohete explotaría y eventualmente volvería al fondo. Pero sí, ¿cómo va a quedar tu cohete? ¿ Cómo se va a ver tu interfaz? ¿ Qué aspecto tiene esto? Levántate. Oh no. Se puede ver aquí, 7, 5, 2. Vamos a intentarlo de nuevo. Levántate, oh no, otra vez. Probémoslo una vez más, a ver si la cosa es un éxito. Se puede ver que esto es como si fuera aleatorio. JavaScript está generando números aleatorios. Terrible. Pero de todos modos, abre, ve al escritorio y vas a querer asegurarte de que estás en gh-pages y luego dirás: “Hice mi cohete”. Entra en gh-pages y luego quieres sincronizar. Todo eso sincronizando. Vayamos a GitHub, github.com. Vamos a nuestro repositorio js-rocket, asegurémonos de que estamos en la rama gh-pages. Ve a nuestros commits, hice mis cohetes. Ahora, lo que queremos hacer es ir a mrra-screencasts.github.io/js-rocket. Pero si sólo vamos aquí, nos va a llevar a esa vieja página. Entonces, en realidad, queremos ir a rocket.html y ta-da. ¿ Va a funcionar? Sí, en línea para que todos lo vean. Oh no, inténtalo de nuevo, perdí uno. A ver si funciona. El último. Oh no, nuestra suerte no es buena. Por lo que puedes cambiar ese número a otra cosa si realmente quieres. Entonces puedes decir si es más grande que uno, entonces es un éxito. Tiene una probabilidad realmente pequeña de fracaso. Ese es nuestro cohete, puedes parar aquí, puedes compartirlo. El siguiente video te voy a mostrar cómo hice que mi cohete se viera genial. 15. Y ahora, ¡vamos a embellecer el cohete!: Tenemos nuestro cohete que lanzar, y ahora vamos a hacer que se vea genial. Tengo un par de elementos que voy a meter. He hecho un montón de imágenes. Aquí está mi tierra y aquí está mi cohete. Aquí está mi cohete en el estado 2 con un poco de empuje, y este es mi cohete en arco completo con mucho empuje, mucha ness. Entonces eso es lo que pasa si las cosas no funcionan, va boom. Entonces también me gustaría agregar un “No puedo esperar” y un “Estoy nervioso” al pequeñito que está en el cohete. Verle sonriendo. Abramos cohete JS. Lo que voy a hacer aquí es que voy a crear una carpeta nueva y la voy a llamar IMG, y ahí es donde voy a poner todas mis imágenes. Por lo que sólo estoy tratando de crear un nuevo archivo en la Ventana, ir a documentos, ir al escritorio. Sólo voy a arrastrar una de estas imágenes al IMG. Fantástico. De acuerdo, realmente no puedo recordar cómo es nuestro cohete. Sólo vamos a ver. Arrastremos en rocket.html a Google Chrome. Si bien estamos esperando eso, solo abramos GitHub desktop 2. Está bien. Es muy aburrido. Voy a ver si el CSS funciona. Entonces hagámoslo un poco mejor. Voy a empezar con el cohete y luego quiero enfocarme en la interfaz. De acuerdo, así que vamos a entrar aquí. Abramos nuestro cohete CSS. Simplemente voy a disminuir un poco el tamaño de la fuente. Entonces tenemos el cohete en los pequeños estados fusionados, pero solo quiero ver de qué tamaño son estas imágenes. Entonces estado cohete 1, 143 por 272, y los hice todos iguales, así que será más fácil trabajar con. Si tan sólo copian eso, y yo voy a ir aquí, y voy a establecer el ancho en 143 píxeles y alturas de 272 píxeles. Está bien, y veamos cómo se ve esto. Entonces vamos a guardar esto, refresco. Sí, se ve bastante bien, pero no está en medio. Lo que me gusta hacer aquí es solo poner un margen negativo, así que sólo voy a decir margen izquierdo, y voy a decir negativo 272 dividido por 2, 136. Fantástico. Lo que hace es que lo pone en el medio, pero entonces aún tienes todo el ancho por un lado. Entonces necesitas un margen a la izquierda de la mitad del ancho. Ahora en realidad hice el margen que queda de la mitad de la altura. Entonces intentemos eso otra vez, 143 dividido por 2 es 71.5. Entonces eso es lo que haré, 71.5 píxeles. Color de fondo. En realidad ya no quiero un color de fondo. Entonces lo que voy a hacer es solo usar fondo, y sí, quiero una URL, y luego aquí quiero mi carpeta de imágenes. Debido a que el CSS tiene una subcarpeta pequeña, voy a subir una y luego voy a ir a buscar las imágenes en la carpeta de imágenes. Está bien. Entonces, ¿cómo lo llamé? Estado cohetes 1, state1.png. Lo que es realmente bonito de esta propiedad de fondo es que podemos decir, “No repetir”, lo que significa que el fondo no se repite, y yo quería ese 0-0, lo que significa que la posición x es cero, la posición y es cero. Puedes establecer eso en 10 píxeles, menos 10 píxeles, lo que quieras. También se puede decir superior e inferior o centro y centro. Para mí, realmente no hace mucha diferencia porque mi ancho y alto es exactamente lo mismo que el ancho y la altura de mi fondo. Entonces sólo voy a mantener eso en cero y cero. Archivo Guardar. A ver cómo se ve. De acuerdo, entonces ahí tenemos mi cohetes, se ve increíble. Está un poco fuera del piso sin embargo, lo que me frustra. Entonces lo que voy a hacer aquí es en lugar de tener un fondo a 20 píxeles, voy a tener el fondo a cero. Creo que en realidad podría tener que tener un fondo negativo. De acuerdo, entonces veamos qué tengo que hacer para que esto funcione. Podríamos ir y venir de Editor a Chrome y refrescar todo el tiempo, pero wow, eso podría ponerse realmente laborioso. Entonces lo que me gustaría hacer aquí es sólo ir al fondo menos 10 píxeles. ¿ Eso funciona? Ahí vamos, menos 13. Menos 13. Fantástico. Guarda esto, genial. Refrescar. Aquí vamos. De acuerdo, ahora lo siguiente que tenemos que hacer es cambiar nuestra imagen de fondo cuando empiece a lanzarse. Lo que voy a hacer aquí es que voy a decir [inaudible], voy a hacer comentarios. Ahora comenta en CSS, tienes que usar estos comentarios. Mientras que JavaScript, puedes usar comentarios así, y CSS no funciona. Entonces voy a decir aquí es imagen de cohete bg. Entonces estado 1 lo hemos ordenado, pero ahora estado 2. ¿ Cómo se va a ver el estado 2? Entonces también quiero el estado 3 y arriba. Entonces el estado 3, el estado 4, y luego el estado 5 es, oh, no, voy a tener que hacer algo un poco diferente ahí. Está bien. Solo saquemos éste por ahora. Yo sólo voy a cortar esto para que las coronas estén arriba aquí, sólo para que haya alguna diferenciación clara. De acuerdo, así que estado 2, voy a cambiar esto a imagen de fondo, y sólo voy a copiar y pegar esto. Porque es imagen de fondo, no puedo poner “no repetición” en, y no puedo establecer la posición de fondo. Todo lo que estoy cambiando es la imagen de fondo. Yo estaba estado 2 eso, voy a cambiarlo a estado 2 y voy a asegurarme de que sea un GIF o JIF, sin embargo prefieras decirlo. De acuerdo, voy a refrescar, lanzar esto. Entonces ya ves que salen pequeños propulsores. Fantástico. Después se levanta. Está bien. Para el estado 3 y el estado 4, vamos a cambiar esto por el estado 3. Fantástico. Veamos cómo funciona esto. Voila. Tenemos un cohete empujador. Entonces si lo volvemos a hacer, empieza de nuevo por ahí. Eso es fantástico. Ahora, necesitamos hacer el estado5. Sólo voy a copiar y pegar esto otra vez, y establece. ¿ Cómo lo llamé? boom.png. Ahora, tiene un ancho y alto diferentes así que lo que voy a hacer es copiar esto, lo voy a cambiar, ancho 209 píxeles, con una altura de 200 píxeles. Ahora, porque tengo este margen izquierdo de 71.5, aún quiero centrarlo, así que lo que voy a hacer aquí es, tiene un ancho de 209 por lo que debería ser negativo 104.5. Podría trabajar ese fuera. Vamos a “Guardar” esto y vamos a abrir nuestro rocket.js. Vamos a ir aquí a los RandomNumbers, si es más grande que uno, va a ser un éxito. ¿ Cuáles son las posibilidades de que vaya a fallar? Bastante delgado por el momento, así que quiero decir si es más grande que nueve, lo que significa que tiene una alta probabilidad de fracaso. Pero eso es genial por ahora porque quería probar mi imagen de boom. Voy a “Guardar” esto, volver a Chrome, “Refrescar” esto. ¿ Qué hace Sublime? No, no quiero comprarlo ahora, aunque gracias. Nosotros “Refrescar” esto, “Lanzar”. Fantástico. Boom. Todo bien, para que eso funcione. “ Inténtalo de nuevo”. Se puede ver cómo nos estamos divirtiendo un poco aquí. Eso está en mis imágenes, mis imágenes de cohete. Me gustaría volver a cambiar esto a dos tal vez ya que todavía tiene una buena oportunidad de éxito. Voy a “Guardar” esto. Entonces lo que me gustaría hacer es cambiar el suelo, algún color, así que cambia eso a fondo y la url. Voy a decir, vamos a buscar en directorio de imágenes. Creo que lo llamo ground.png. Sólo vamos a ver ese ground.png, y es 723 por 15. El ancho está bien. Pero lo que vamos a hacer aquí es que vamos a decir, sin repetir pero la x va a ser centro. Simplemente no puedo deletrear centro, lo siento , centro centro, y la y también va a ser centro. Siempre va a estar en el centro para que el cohete se asiente sobre él exactamente en el medio. Altura 20, está bien, pero cambiémoslo a 15, probablemente funcionará mejor, y vamos a “Guardar” eso. Se ve bastante bonito, pero quería que fuera un poco más alto otra vez, así que x va a ser centro, y voy a cambiar esto a cero, así que se va a sentar en la parte superior, entonces voy a cambiar esto de nuevo a 20. Veamos cómo se ve eso. Todavía no es genial, así que cambiemos la posición inferior del suelo a 10 píxeles. Yo voy a copiar eso. Entonces el fondo, pondré en 10 pixeles. “ Guardar”. Ahora, tenemos el suelo, tenemos nuestros cohetes luciendo realmente bonitos. Se ve genial, algún pequeñito. Pero ahora quiero que esté diciendo cosas como va la cuenta regresiva. Tendremos que cambiar de JavaScripture y cambiar algo de CSS. Está dentro de nuestro rocket.js cuando la cuenta regresiva va por aquí. Yo puedo decir, si CountDownNumber es lo que sea, se pueden cambiar los estados. Lo que podemos hacer aquí es que podemos decir, si CountDownNumber es igual a cinco, hagamos algo. A lo mejor podemos decir, estar nerviosos. Entonces también podemos decir, Countdown Number equivale a tres, podemos decir, no puedo esperar. Lo que me gustaría hacer aquí es que en realidad me gustaría cambiar algunas clases. Si ven por aquí, quiero que aparezca en algún lugar por aquí y en algún lugar por aquí, así que voy a tener que poner una nueva pieza de HTML. Esto está a la izquierda, el que esté a la derecha, los cohetes por aquí, así que voy a decir, div quiero darle una clase de “nervioso”, y quiero hacer otro div con una clase de “no puedo esperar”. Voy a “Guardar” esto y voy a copiar nervioso y no puedo esperar. Vamos a copiar eso. Eso va a rocket.css. Por aquí, di nervioso, quiero darle una posición absoluta otra vez. Tan solo por ahora, voy a decir los 100 pixeles superiores y los dejó 100 pixeles. El fondo, no va a ser un color de fondo, va a ser una imagen otra vez, así que di url, y decimos img/, voy a llamarlo nervous.png. No va a ser repetida, y se va a posicionar x en cero y posición y en cero. Ahora, el ancho va a ser 223, la altura va a ser 100. Fantástico. Perdón, hice algo mal ahí. Ya veremos cómo funciona esto. Voy a salvar esto. Rocket JS, también voy a ahorrar. Ya verás que a pesar de que aquí no hay nada, no afectará nada. Yo estoy nerviosa, eso se ve realmente bien, dependiendo de dónde esté esto. Pero por ahora, probablemente sea mejor estar al fondo. Entonces voy a inspeccionar esto y voy a mover esto a un lado, sólo para que tengamos una buena comprensión de dónde está esto. A ver si aquí no hay mucho espacio, pero eso está bien. Lo que voy a hacer es que voy a decir este div nervioso en realidad quiero que sea desde abajo. Entonces cambiaré de arriba a abajo, y lo cambiaré a 100 píxeles. Eso se ve bien. Tan abajo 220. Volveré a aquí y cambiaré este fondo a 220. Guardemos eso. Tendríamos que ordenar que es posición de izquierda. A la izquierda, 100, podemos ir 50 por ciento otra vez. Cincuenta por ciento, eso es genial. Entonces voy a ir a margin-izquierda. Entonces lo hago plus, o simplemente puedo presionar Entrar aquí. Margin-izquierda, esto va a ser un valores negativos, por lo que negativos 20 píxeles. Por lo que el negativo 180 se ve bien. Entonces margin-izquierda, pega eso. Enfriar. Vamos a guardar esto otra vez. Puedes presionar esto, refrescar. Fantástico. Significa que probablemente va a estar en el mismo lugar sin importar donde estemos en la pantalla. Eso es genial. Eso es algo increíble del posicionamiento absoluto. Lo siguiente que necesito es que no puedo esperar. Haremos exactamente lo mismo. Donde dice cant-wait, sólo voy a copiar esto y voy a pegar esto. Literalmente voy a copiar y pegar todo esto y cambiar esto a cant-wait. Yo quiero ver qué tan grande es esto. Por lo que 206 por 65. Ahora sólo tendremos que ver cómo funciona exactamente esto. El fondo probablemente va a ser lo mismo, izquierda, 50 por ciento. Yo sólo voy a comentar esto. Podemos ir comando barra hacia adelante, que será tu comentario, o puedes tocar tus comentarios manualmente. Entonces Archivo, Guardar. Veamos cómo se ve esto. No puedo esperar. En realidad se ve muy bien. Voy a quitar este margen a la izquierda. Entonces tenemos una cant-espera y tenemos estoy nerviosa. Lo que me gustaría hacer ahora es mostrar esto como ninguno y mostrar esto como ninguno. Cuando agrego una cláusula de cant-wait.show, quiero mostrarla como bloque, que es su tipo de visualización natural. Si agregamos una cláusula y mostramos a cada uno de esos, debería funcionar. Vamos a refrescarnos aquí. Inspeccionar el elemento. Podemos ver a la derecha, aquí está estoy nerviosa. Si agregamos una cláusula de show, van a ser, “Oye, estoy nerviosa”, y si agregamos un show de cláusula a cant-wait, dirán: “Oye, no puedo esperar”. Si nos llevamos eso otra vez, verás que se va. Entonces eso es lo que vamos a hacer con JavaScript. Vamos a sumar dinámicamente esas cláusulas de espectáculo. Si CountDownNumber es igual a cinco, vamos a decir, consigue este elemento. Entonces démosle a esto un DNI de nervioso y DNI de cant-wait. Déjame guardar esto. Voy a decir document.getElementById. Entonces vamos a pasar, déjenme decir, .className = show nervioso. Copiemos y peguemos esto por aquí. Vamos a hacer cant-esperar y copiar eso así. Guardemos esto y veamos qué pasa. Cinco, tres, fantástico. Pero ahora no queremos que esas cosas estén ahí para siempre. Lo que podemos hacer aquí es decir más, copiarlo, simplemente cambiar a nervioso, y de lo contrario, sólo cambiar a cant-esperar. Ahora lo que podemos decir es, si es CountDownNumber es mayor que tres, y CountDownNumber es menor que cinco o menor que seis, pero podemos decir menor o igual que cinco. ¿ Qué significa eso? Es más grande que tres, así que serían cuatro o cinco. Entonces tal vez podamos hacer este seis y número de cuenta atrás, dejémoslo por tres. Deberíamos refrescar aquí. Lanzamiento. Estoy nervioso aparece, se va, no puedo esperar, eso fue muy, muy rápido. Entonces cambiemos eso otra vez. A lo mejor podemos cambiar esto a siete y esto a cuatro. Nos da un rango de cinco, seis y siete. Hagamos exactamente lo mismo aquí, excepto que necesita ser más grande que uno y deberían ser cuatro aquí. Entonces son tres y dos y cuatro. Cuatro o tres, dos. Guardemos esto. Vuelve a Chrome, actualiza. Lánzala. Bueno, sí, ahí vamos. Ese es nuestro cohete. Nuestro cohete con estilo, tenemos algunos elementos extra pasando en base a la cuenta regresiva. Entonces tengo un día divertido. Es realmente, realmente genial lo que puedes hacer. En realidad sólo quiero que esto se vea bien. Por lo que el cohete HTML, todos estos son código, estado 1, estado 2, estado 3, estado 4, estado 5. Todos se ven casi iguales. Entonces lo que voy a hacer aquí es que sólo voy a llamarlo interfaz. Voy a darle una clase de interfaz, solo para que pueda peinarlos para que todos se vean exactamente iguales. Voy a guardar esto, comando S, o Control S o simplemente guardarlo ahí. Ahora esta interfaz, aunque está todo a la izquierda, así que sólo voy a poner ahora, .interface. Ahora, ¿cómo queremos que se vea esto? Yo quiero que todo esté alineado en primer lugar. Entonces voy a decir text-align, center. Yo entonces quiero darle un relleno, digamos de 20 pixels. Impresionante. Ahora ya ves lo que pasa aquí. Eso es bastante interesante. Si puedes averiguar cómo quitarte esos cuando haga clic en Abortar, bien contigo, pero voy a darle estilo al lado izquierdo por ahora. Yo quiero que los botones grandes sean grandes. Se puede ver aquí donde dice botón. El resto de ellos son en realidad todos botones. No quiero que todos sean botones, quiero que el lanzamiento sea el botón, y tal vez intenten de nuevo ser un botón. Hazlo otra vez, eso está bien. Vamos a despegar el botón en el abortar y guardar esto. Esa es nuestra interfaz. Ahora quiero cambiar el botón, así que puedo o ponerme un.button o simplemente puedo dejarlo como botón, pero hagámoslo un.button. Voy a decir display inline-block, y voy a decir background-color hagámoslo blanco, hagamos el texto de color negro, y veamos cómo se ve eso por ahora. Yo sólo lo voy a guardar, refrescar. Se ve bien por ahora. Voy a darle un relleno de 40 pixeles. Voy a decir text-transform, mayúsculas. Enfriar. Echemos un vistazo y veamos cómo se ve eso. Es un botón bastante extraño, así que voy a decir 20 píxeles en la parte superior y 40 píxeles alrededor de los lados. Eso se ve bien. Voy a decir text-decoration, ninguno, porque no me gusta subrayar, y luego le voy a dar un radio de borde de 10 píxeles para que parezca un botón. Veamos cómo se ve eso. Mucho mejor. Pero no me gusta que sea todo tipo de fuentes serif, quiero fuente sans-serif. Voy a cambiar esto y decir cuerpo, font-family, y cambiemos esto a Helvetica o Arial o sans-serif. Guarda eso. Se ve mucho mejor ahora. El interfaz, el botón está por aquí. Ahora quiero agregar un hover para mi botón, y aquí sólo voy a cambiar el color de fondo. ¿ De qué color debo cambiarlo? A lo mejor voy a cambiar sólo el color a rojo. Yo quiero que no se vea tan jary, así que voy a decir transición, y luego decir color, 300 milisegundos. Ahí vamos. Haga clic en él. El aborto sigue ahí. Levántate. Se puede ver mi botón está aquí, todavía en el centro. Vamos a intentarlo de nuevo. Así es como darle estilo a tu página. Hazlo lo lo más increíble que quieras. Si quieres probar algunas cosas diferentes, si quieres probar algunas cosas increíbles y geniales, dale una oportunidad. Estaré aquí para ayudarte. Pero así es como haces que las cosas se vean geniales, así es como haces que las cosas sean interactivas. Espero que hayas aprendido mucho. Hay una cosa más que necesito mostrarte, que creo que es bastante guay, y luego lo vamos a sincronizar con GitHub. Cuando alguien se mete en js-rocket en mi anfitrión local, me da esta cosa, que es como, “Oh Dios mío, lo que está pasando aquí Eso son sólo un montón de archivos. En realidad se puede hacer clic en índice o cohetes. Si vamos al índice, eso es lo que parece. Pero recuerda, en tu URL de GitHub , solo te lleva directo ahí. Ni siquiera estás en index.html. En esto, me gustaría agregar un enlace que redirija a rockets.html o que vaya automáticamente allí en función de un temporizador. Vayamos a nuestro index.html, y lo que vamos a hacer aquí es que vamos a decir una, vamos a rocket.html, vamos a la página del cohete. Guardemos esto y veamos si eso funciona. Sí, sí. Eso es una cosa. Lo que vamos a hacer aquí es solo decir p, pronto serás redirigido. I Archivar, Guardar. Vamos a entrar en nuestro script.js y digamos, en la parte superior aquí, establecer tiempo de espera. Voy a poner una función aquí, y vamos a decir, no sé, dos segundos. Lo que vamos a hacer aquí es que en realidad vamos a cambiar la ubicación, así que si tuviéramos que probar esto en nuestra consola, podemos decir que location.href es igual a rocket.html. Justo así, y lo cambiará. Lo que vamos a hacer es que vamos a establecer eso en los tiempos de espera, así que después de dos segundos nos va a redirigir. Ubicación.href es igual a rocket.html. Guardemos esto. Volvamos aquí, refresquemos, y después de dos segundos nos lleva a nuestro lanzamiento de cohetes donde podemos divertirnos un poco. Oh no. Entonces una vez que hayas terminado con eso, abres tus páginas de GitHub, asegúrate de estar en el repositorio de js-rocket, te aseguras de que estés en la rama gh-pages, no en la rama maestra, la rama gh-pages, y luego dices: hizo enfriar nuestro cohete con dibujos etc.” Lo comprometes y luego lo sincroniza. Si bien su sincronización, que puede llevar un poco de tiempo. Abramos una nueva pestaña y vamos a github.com. Si no estás registrado, inicia sesión, luego vas al repositorio js-rocket, vas a tu sucursal gh-pages, vas a tus commits. Hizo enfriar nuestro cohete con dibujos etc. Una vez que eso haya pasado, actualicemos esta página de GitHub y veamos si esto funciona. Fantástico, funciona. Veamos si todo está injerto aquí. Parece que lo es. Ya verás que hay un par de flashes a medida que cambian las imágenes, eso es completamente normal, pero es porque tu navegador no lo ha guardado en caché. Si lo intentamos de nuevo, probablemente veas menos parpadeante. Sí, sin parpadear. Comparte tus creaciones de cohetes en la galería de proyectos. Espero que hayas aprendido mucho. 16. Agradecimiento y próximos pasos: Es el fin de los proyectos. Espero que hayas aprendido mucho. Sé que puede ser bastante abrumador tratar de aprender HTML, CSS y JavaScript. Todos son tan enormes, y siento que JavaScript es probablemente el más grande porque puede manipular HTML y cambiar CSS al mismo tiempo. Espero que te hayas divertido mucho. Espero que lo hayas disfrutado, y realmente espero que sigas escribiendo JavaScript, HTML y CSS, y aunque hagas dos líneas o cinco o 10 minutos cada día, tu cerebro empezará a recordarlo. No será tal sobrecarga, así que dale una oportunidad, dale una oportunidad. Hemos entendido qué propiedades son, qué métodos son. Hemos entendido cómo escribir JavaScript, la sintaxis. Hemos construido un cohete, hemos lanzado un cohete. Hemos aprendido un montón de pequeñas cosas como, si afirmaciones, hemos aprendido sobre funciones que hemos aprendido sobre variables, chippers. Hay mucho más que aprender sobre JavaScript. También hemos aprendido a usar Sublime Text con JavaScript. Hemos aprendido a usar la Consola en Google Chrome. Hemos aprendido a usar las páginas de GitHub. Hemos aprendido a usar GitHub, a crear repositorios o proyectos. De verdad me gustaría que compartieras tus proyectos con gente que conoces. Dale un recurso compartido, ve a tu galería de proyectos, publica enlaces, y recuerda que el Google, es tu amigo. Si estás atascado, si tienes un problema y no puedes averiguarlo, Google. Hay tantas cosas por ahí. Toda la Web está construida por personas que conocen HTML y JavaScript y CSS. Ellos podrán ayudarte. Si eso no ayuda, pregúntale a un humano de verdad. Yo soy un humano real, así que pregunta en el foro sobre Escuela Compartir. Otras personas pueden responderte, pero sin duda podré ayudarte si nadie más puede. Espero que hayan disfrutado. Adiós por ahora.