JavaScript para principiantes (incluye más de 6 proyectos reales)

1. Bienvenido a JavaScript para principiantes: JavaScript, el lenguaje de programación más candente hoy en día, desde sitios web llenos hasta APS móviles hasta programas como Slack y Spotify, JavaScript está en todas partes. Es el lenguaje de programación moderno que todo desarrollador necesita conocer. Si tu marca nueva en desarrollo Web y no sabes por dónde empezar, No busques más. Este curso es absolutamente para ti. En este curso, aprenderás todo lo que necesitas saber para tener una fuerte comprensión de los fundamentos de JavaScript. No importa si ya eres súper hábil en desarrollo web o tu decodificación completamente nueva . Este curso fue diseñado para ti. JavaScript es uno de los lenguajes de codificación más populares del mundo, y es la alerta de Superfund. En este curso, aprenderás los conceptos básicos de JavaScript, variables, página web, interactividad, tipos de datos y estructuras de datos, declaraciones condicionales, funciones, JavaScript, peculiares que lo hacen diferente de todos los demás lenguajes, objetos, clases y programación orientada a objetos. AP Eyes y Ajax solicita y todo lo que hay en el medio. También hay cinco mini proyectos para la práctica inmediata, y un proyecto final para poner a prueba tus conocimientos generales. Únete hoy para convertirte en desarrollador de JavaScript 2. 7 datos de JavaScript: Hola, fin. Bienvenido a Javascript para principiantes. De acuerdo, creo que en realidad deberíamos empezar diciendo qué es JavaScript, dónde está disponible y además, qué no es. Entonces, solo empecemos con el número uno. ¿ Qué es Javascript? No JavaScript no es Java. Hay una gran distinción entre Java y JavaScript. Java ha existido más tiempo que JavaScript. JavaScript sólo se nombró JavaScript para que pudiera aprovechar parte de la popularidad detrás de Jave una espalda en 1995. Y en realidad no están relacionados en absoluto. De hecho, Jaffa es estrictamente un lenguaje del lado del servidor, y JavaScript es casi estrictamente un frente en el lenguaje, aunque ahora se puede usar como lenguaje del lado del servidor porque ha sido adaptado para funcionar esa manera. El quitar clave aquí es Java no es script Java. Entonces, siempre que estés hablando de JavaScript, por favor no solo llames a Java, porque eso va a confundir a otros desarrolladores. Número dos. Todo navegador Web lo utiliza. 100% de todos los navegadores Web utilizan JavaScript. Ahora tú como usuario en digamos, chrome o Firefox. Puedes decidir desactivar javascript si quieres, pero tu navegador viene con él así cada vez que descargues un navegador. Firefox Chrome Safari Edge. Incluso Internet Explorer viene con soporte de JavaScript. De hecho, JavaScript es en realidad el único lenguaje que puedes usar en el front-end. Entonces pongamos eso ahí dentro a JavaScript es el lenguaje de codificación Onley que puedes usar en el front-end. Es el único. Hay HTML, CSS y JavaScript, y eso conforma todo el frente y la pila de cualquier sitio web. HTML y CSS no son lenguajes. JavaScript es un lenguaje de codificación, y es el único que hay por ahí, y eso en realidad contribuye a su crecimiento masivo y popularidad. Porque no hay otras opciones. Tienes que conocer JavaScript para ser un front y desarrollador Web. De acuerdo, número cuatro. Como desarrollador, vas a escuchar muchas palabras. Vas a escuchar cosas como Jake Weary React vista, bibliotecas angulares y frameworks. Hay una diferencia entre todos estos, y vamos a meternos más en esto a medida que siga el curso. Pero detrás de bambalinas detrás de Jake Weary reacciona vista y angular, es solo javascript vainilla. Todo está escrito en JavaScript sencillo y aburrido. Una biblioteca es un archivo JavaScript o un conjunto de funciones que permite realizar atajos. Entonces yo, por ejemplo, J Query es una biblioteca, y eso es porque realmente no viene con todas las cosas extra que ah full framework hace. Y un marco es como tú reactivo o angular, donde viene con algo más que solo oyentes de eventos vinculantes. Eso viene con una cierta forma de escribir cosas que viene con un cierto estilo, ah, estilo de codificación. Eso es sobre cómo realmente escribes tu código, y hace casi todo lo que necesitas. Entonces esa es la diferencia entre una biblioteca y un marco. Pero hablaremos más de esos en el futuro. Número cinco. ¿ Se puede usar JavaScript en línea o sin conexión? Sí, la respuesta es sí. Puedes usar Js offline. Ahora, ¿Por qué digo eso? O cómo digo que Más bien es JavaScript cada vez que golpeas un sitio web, cada vez que tienes un sitio web, tu navegador descarga un montón de CSS HTML y JavaScript junto con imágenes y tal vez algunos otros archivos, y tu intenta cobrar esos para que no tenga que recargarlo una y otra vez. Una vez que tengas un archivo javascript, puedes ejecutar ese archivo en tu navegador, aunque no tengas Internet. Entonces aunque no tengas Internet a lo largo de todo este curso, ¿ adivina qué? Simplemente puedes abrir tu navegador y puedes escribir código aquí mismo, que es algo que te mostraré en solo un poquito. Y sólo dirá Hola mundo y eso es JavaScript. Por lo que no necesitas Internet para ello. Dicho esto, muchos sitios web todavía tienen algún tipo de p I por ahí y todavía vas a necesitar Internet para aprovechar realmente el uso completo de JavaScript. No obstante, no necesariamente lo necesitas todo el tiempo. Archivos JavaScript Archivos JavaScript y en dot Js Así como un HTML cuando estabas aprendiendo html, era dot html o CSS era dot CSS o dot python y enseñaba pastel, ¿ verdad? Entonces es lo mismo, así que punto Js y vas a ver esto por todo el lugar también. Por lo que todos los archivos JavaScript terminan en dot Js y por último pero no menos importante, puedes crear programas enteros usando JavaScript en estos días, por lo que comenzó. Érase una vez, solo podías crear programas en ciertos idiomas como C o C plus. Y luego se desplazó hacia cosas como el reconocimiento de pitón. Hacer programas enteros python python para un sistema operativo, y ahora en realidad puedes hacer lo mismo con JavaScript. Y lo bonito de eso es que es un lenguaje para gobernarlos a todos. Entonces lo que puedes hacer es crear un programa completo, y puede ser en múltiples sistemas operativos. Se puede trabajar en. Tu dispositivo móvil no importa de su IOS o Android o Windows o Mac o Lennox o cualquier otra cosa. Es un sistema para gobernarlos a todos. Y un buen ejemplo de esto es Spotify, Spotify y holgura. Estas airean dos aplicaciones enormes que desde hace mucho tiempo han estado usando algo llamado Electron. Y lo que esto hace es que básicamente compila todo tu JavaScript en un programa real, y luego puedes ir y enviarlo a la gente para que descargue en Windows, Linux, Mac os, android, iPhone, que lo nombra. Tiene apoyo para ello. Y así ahora JavaScript que es realmente escribir esta nota. JavaScript se utiliza para crear programas enteros, así que eso es una especie de siete hechos divertidos sobre dos JavaScript. Nos vamos a meter en mucho más de las cosas a medida que pasa el tiempo de terminar este video de la izquierda. Ya ves, mi editor estoy usando ves coded es hecho por Microsoft es completamente gratis. Y puedes conseguirlo simplemente descargándolo. Vas a necesitar un editor de texto como este. Entonces si no tienes ya uno, sugeriría código V s a la derecha. Simplemente tengo a Google Chrome abierto. Es un navegador. Y de hecho, todo lo que hice aquí fue ir a un barco en blanco. Por lo que nueva página, haga clic derecho inspeccionar. Y si vas a tu consola aquí arriba y hagamos eso más grande, en realidad vas a escribir javascript justo aquí también. Hola. Hola. Eso me gusta Y tenemos algo de javascript. Entonces van a ver que mi pantalla está dividida en dos. Entonces tengo a mi editor a la izquierda, y luego acabo de tener ah, navegador a la derecha. Algo así. Si tienes dos monitores que puedes usar para monitores, solo puedes voltear entre pantalla completa en código V s o tu editor de texto y chrome o cualquier navegador que quieras usar. No tiene que ser Crumb. Pero así es como lo tengo configurado en el video para que puedas verlo todo simplemente dispuesto frente a ti. Donde dicho eso, saltemos a nuestra siguiente lección donde vamos a crear nuestro primer script JavaScript. 3. Tu primer guio: Muy bien, saltemos directamente a JavaScript. En este momento, debes tener un editor de texto como código V s. Adam Sublime. Algo así. Y todo lo que vamos a hacer es crear un nuevo archivo. Y solo voy a decir esto como un archivo html de puntos y voy a llamar a esto tu primer script dot html. Entonces al principio, parece que estamos creando un archivo HTML, y de hecho, lo estamos. Entonces voy a crear lo hará más pequeño. No soy para crear un diseño rápido de cinco HTML aquí, y lo primero que quiero hacer es que quiero crear un java despojado y así dentro de mi HTML, generalmente en la parte inferior de tu página justo antes de la etiqueta body. Eres la etiqueta de cuerpo final. Ponemos una etiqueta llamada Script in Here script and slash script, y así es como prácticamente hacemos cualquier cosa con javascript dentro de la página. Ahora, si estás siguiendo junto con este curso, Realmente, en realidad no necesitas estas cosas. Solo necesitas doc type html head body y luego poner script dentro de tu cuerpo. Yo sólo voy a dejar eso ahí dentro sólo, ya sabes, por razones causa que la escolta pesada automáticamente la pone ahí dentro para mí, así que sólo lo mantendré ahí dentro. Llamemos a esto tu primer guión. Y donde tenemos nuestro guión aquí, todo lo que voy a hacer es escribir alerta, cotización de corchete. Mark. Hola. Mi nombre es Caleb. Y luego pongo un final entre comillas y corchete sin fin o paréntesis, y luego un punto y coma. Y así si guardo este archivo y entro en chrome y simplemente golpeo comando o control Oh, también puedes entrar en archivo abierto. Y si solo abro ese archivo , automáticamente ejecutará mi JavaScript por mí. Y así hay una alerta aquí dentro. Esta cajita molesto que aparece dice Hola, mi nombre es Caleb. Y en cualquier momento que refresco la página, dice Hola. Mi nombre es Caleb. Hola. Mi nombre es Caleb. Hagámoslo otra vez. Hola. Mi nombre es Caleb. ¿ Qué pasa si hago clic en él una vez más? Se va a decir hola. Mi nombre es Caleb. Y eso se debe a que todo entre esta etiqueta aquí esta etiqueta de guión de apertura en esta etiqueta de script de cierre . Todo este javascript se va a ejecutar. Ahora, en este punto, no sabemos de cosas como la sintaxis, que es como la estructura del lenguaje. ¿ Por qué tenemos punto y coma? ¿ Por qué tenemos paréntesis? ¿ Por qué tenemos comillas? ¿ Qué es una alerta? Todavía no sabemos esas cosas, y eso en realidad está bien. Pero por ahora, lo que me gustaría que dio es solo crear un pequeño guión como este. Entonces si necesitas sentir video de depósito libre y solo crear un guión dice hola, mi nombre es cualquiera que sea tu nombre, y solo asegúrate de que es una alerta. Asegúrate de que se parezca mucho a mi código aquí. El importante es mentir. 15 Remolque línea 17 aquí. No tienes que preocuparte demasiado por estas cosas. No estamos buscando crear un sitio web receptivo, que es lo que básicamente está haciendo esto. Solo queremos que se ejecute algún javascript y luego lo abras en tu navegador. Hay una alternativa a hacer esto si quieres. No tienes que hacer esto en el expediente. También puedes hacerlo bien en tu navegador. Entonces si abres cualquier página click derecho Inspector, y vas a querer dar click en las tabletas como cónsul. Y aquí, Esta es solo tu consola JavaScript. Tu capaz de escribir cualquier javascript que quieras. Entonces, por ejemplo, podría decir alerta JavaScript para principiantes si pudiera deletrearlo bien. Y ahí vamos. Dice javascript para principiantes, y te das cuenta de que parece exactamente el mismo código que lo que escribí aquí. El texto es diferente dentro de él. Hablaremos de eso más tarde. Ah, pero básicamente, se ve exactamente igual. Para que lo pudieras hacer de esa manera. O si quisieras. Podrías usar código pen dot io, que es una herramienta para básicamente boxeo de arena html CSS y JavaScript. Y te mostraré esa en un par de videos a partir de ahora. Pero estas son las dos formas principales en las que ejecutamos JavaScript. Básicamente, tus grandes guiones entran aquí. Y si alguna vez necesitas probar algo hey, solo abre tu navegador. Correcto. Haga clic, inspeccione. Entra a tu consola y puedes escribir cualquier javascript que quieras. El siguiente tema a tener en cuenta es ¿cómo vinculamos a archivos JavaScript? Bueno, si estás familiarizado con HTML y CSS en CSS, es un enlace. Elementos en JavaScript. Hacemos script SRC en lugar de un borrador. SRC es igual a Let's go scripts y tu primer script dot Js que podríamos hacer tipo es igual a cualquier tipo que queramos que sea. Y básicamente acabamos de cerrar el guión. Y lo que esto va a hacer es intentar cargar desde la carpeta de scripts y va a buscar tu primer guión jazz. Ahora esto no existe, por lo que esto no va a funcionar. Pero así es como usarías un archivo externo. Entonces si tienes múltiples archivos HTML en los que quieres que JavaScript se ejecute, no tienes que copiarlo y pegarlo. Simplemente puedes usar un archivo externo, y eso es algo que deberías haber aprendido en CSS y HTML también. Por lo que tu tarea para este video es básicamente crear un script en etiqueta de guión abierto, una etiqueta despojada de cierre. Asegúrate de que esté justo por encima de tu cuerpo. No lo quiero arriba en la cabeza como escribí ahí arriba. Vamos a deshacernos de eso. Quieres justo por encima de tu etiqueta de cuerpo de barra y ya sabes, tienes todo tu HTML aquí y luego solo alertas al mundo. Hola. Mi nombre es. Y luego sea cual sea tu nombre, una vez que hayas hecho eso, pasemos a la siguiente lección. 4. Una historia oral: Muy bien, hablemos de una breve historia de JavaScript. Sé que esto no es lo más importante del mundo. También sé que esto no es lo más interesante del mundo. Pero es, en mi mente, un fundamental de aprender un idioma. cierto que quieres entender de dónde venía con el fin de proyectar hacia dónde va . Y JavaScript, para mí tiene una historia bastante interesante. Entonces primero lo primero que JavaScript fue o es. En realidad, Jeff Script es un lenguaje de programación relativamente nuevo. De hecho, se llama You Have a Script porque era un lenguaje de scripting. En realidad no era un lenguaje de programación completo hasta hace poco. Se desarrolló en el año 1995 y se hizo enteramente en 10 días. Ahora el JavaScript que escribimos hoy significativamente más complejo y ha tardado paso más de 10 días en crear. Pero el prototipo original de JavaScript solo tardó unos 10 días a lo largo de finales de los años 19 noventa. entrar en los primeros dos miles, mucha gente realmente pensó que JavaScript era una moda porque tenías que escribir un lenguaje de programación para hacer que funcionara un sitio web, y en realidad tenías que escribir un lenguaje de programación en el back end así que que podías hacer cosas como aceptar pagos y tenías que escribir un lenguaje de programación en el front end para que pudieras tener pequeñas interacciones y no podía hacer mucho en ese entonces. Entonces es comprensible pensar por qué habría sido una gorda. Pero entonces, medida que más gente entraba en línea y más gente quería interacciones, JavaScript realmente no despegó. No súper bien de todos modos. Flash se convirtió en el lenguaje de animación predeterminado ahora, como la mayoría de nosotros sabemos, flashes ya no alrededor. Y es básicamente todo JavaScript. Y eso se debe a que Flash tenía demasiados problemas de seguridad y JavaScript bueno, ya que estaba madurando lentamente en segundo plano, fue capaz de hacer cada vez más cosas que Flash pudo dio y eventualmente simplemente lo reemplazó por completo. Cuando un día Google y un montón de otras personas dijeron que no más flash. Este es un problema de seguridad importante, y a Flash básicamente se le dio una línea de tiempo que decía como, Oye, tienes un par de años por vivir, y luego estamos recortando tu apoyo. Estamos cortando tu soporte vital, y vamos con JavaScript para que todos estén preparados para eso. Y eso fue lo que terminó pasando. Y así garganta ese periodo. Si bien Flash estaba en sus últimas piernas, JavaScript realmente se afianzó. La gente realmente empezó a adoptarlo y hacerlo mejor y hacer todo tipo de bibliotecas y marcos que usamos hoy en día. Había mencionado hace algunos videos que JavaScript es el frente Onley y el lenguaje de programación por ahí, y bueno, eso fue cierto en un momento dado. No es del todo cierto. Hay otros lenguajes de programación que puedes usar en el front end, pero en realidad no son cuatro sitios web más que por lo tanto lenguajes de programación. Y las mayores amenazas a los éxitos de JavaScript es una llamada Asamblea Web, o flor para abreviar. En realidad ni siquiera obtuvo el soporte adecuado del navegador hasta finales de 2017 principios de 2018. Ahora, el ensamblado Web es básicamente un lenguaje de programación real. Un lenguaje de programación riel que corre muy, muy, muy rápido es mucho más eficiente que JavaScript para tu navegador. No obstante, realmente no ha despegado, y creo que no ha despegado porque JavaScript creció tan rápido a través de apenas unos años , en realidad, realidad, alrededor de una década y el ensamblado Web llegó tarde. Lanzamiento de remolque. Se suponía que se lanzarían mucho antes de 2017. Originalmente, JavaScript simplemente creció demasiado rápido para que el ensamblado Web se pusiera al día. Dicho esto, si Webb Assembly se convirtiera en un estándar, eso sería un gran salto adelante para básicamente cada sitio web o cualquier programa que se esté ejecutando a través de un navegador. Pero no creo que eso vaya a pasar pronto. Pero, oye, eso no es ni aquí ni allá porque estamos aprendiendo. JavaScript y JavaScript tiene una enorme demanda hoy en día, Pero solo es bueno saber que si algún día JavaScript fuera reemplazado por front y desarrollo Web , probablemente sería por ensamblado Web y reenvío tan rápido un par de años. Ahora tenemos un JavaScript del lado del servidor, llamado node dot Js, y es marcos masivamente populares como React, creado por Facebook y view dot Js. Había otro llamado angular, creado por Google y básicamente ver punto Js ocho arriba de toda la comunidad angular. Ah, y React es rey de los marcos JavaScript. Pero volviendo a tocar de nuevo en ese node.js. Básicamente, hay un motor que puede leer tu javascript y desglosarlo en código de muy rendimiento , y así puedes escribir javascript y tu computadora. Básicamente, puedes pensar en ello como una forma ya que compila tu JavaScript en C y luego como está ejecutando tu código C, estoy haciendo citas aéreas aquí, pero tu código C. En realidad es mucho más rápido. Y así se trata de JavaScript del lado del servidor, lo que significa que en realidad se puede escribir JavaScript en una máquina Linux y en realidad hacer que conecte a una base de datos y a todas esas cosas que son bastante nuevas. Es bastante popular en estos días, y lo bueno de eso es que puedes escribir un lenguaje de programación en el front-end, un lenguaje de programación en el back end, y puedes escribir básicamente cualquier programa que alguna vez necesites ese necesita estar conectado a Internet. Tienes javascript down pat, y podrías hacer tantas cosas con él. Dicho esto, cuando se trata de lenguajes del lado del servidor, todavía no es tan poderoso como lenguajes como Python Python pueden hacer significativamente más. Por ejemplo, mucha inteligencia artificial de IA y aprendizaje automático de ML está escrito en Python. No está escrito en JavaScript, así que esa es una breve historia en JavaScript. ¿ A dónde se va a ir? Nadie sabe realmente. Sospecho que JavaScript va a seguir despegando de nuevo. Es el único frente y lenguaje de programación que hay por ahí para un sitio web. Y así a medida que cada vez más gente entra en línea, se vuelve cada vez más popular. No hay elección. Tiene que crecer, y se puede pensar en ello así. JavaScript es el único hijo de una familia, y así llama toda la atención. Mientras que cuando hablas de otros lenguajes de programación como C o Cortland o Java o python o cualquier otro lenguaje de programación por ahí, básicamente puedes intercambiar en caliente la mayoría de esos. En cierto sentido, puedes escribir un programa completo en C. También podrías escribir programa completo en Python. ¿ Dónde está realmente no tienes esa opción cuando se trata de desarrollo web front-end. Y así siempre usamos JavaScript. Y creo que por eso JavaScript realmente va a despegar ah, mucho más de lo que ya tiene en los próximos años. 5. Introducción a las variables: Hola y bienvenidos de nuevo en este video, vamos a hablar de variables. Ahora bien, si no te interesan mucho las matemáticas, si no te gustan las matemáticas, tal vez no seas bueno en matemáticas y estás escuchando la palabra variables y estás enloqueciendo un poco. No te preocupes. En realidad no es tan complejo como parece. Mucha gente piensa en las variables como, Hey, vamos a estar bien en el cálculo. Y para ser totalmente honesto, yo, mi siéntate como mi persona. No sé cálculo, y trabajo con variables todos los días. Cientos, tal vez incluso miles de ellos. Las variables básicamente son solo una forma de almacenar pequeñas piezas de datos en tu computadora y luego utilizarlas más tarde. Puedes manipularlos, puedes revisarlos. Puedes decirle a tu computadora que ejecute un determinado comando basado en un tipo particular de variable y el valor que contiene esa variable. Entonces echemos un vistazo a cómo se ve una variable. Y así voy a crear aquí un sitio web HTML cinco, y sabes qué? No necesito todas esas cosas que nos llaman variables muy toros y porque no vamos a tener ningún melón HD aquí. Es decir, lo pondríamos aquí en general, pero no vamos a hacerlo. Solo vamos a escribir algo de JavaScript básico por ahora. Entonces nos vamos a quedar con una etiqueta de guión y aquí abajo, vamos a poner otra etiqueta de guión. Y así cuando empezamos a hablar de variables, realmente, todo lo que queremos decir es una pieza de datos que podemos intercambiar dentro y fuera. Y eso lo hacemos con var. Y esto es muy interesante que esté diciendo plantilla Django. Entonces déjame cambiar rápidamente. Eso es a HTML regular. Ahí vamos. Y así tenemos una declaración VAR. Esto significa Variable y Vier básicamente dice que JavaScript. que lo sepas, estamos a punto de declarar variable y luego le das un nombre, así que lo que quieras que sea ese nombre es igual a Y entonces hay diferentes formas de declarar diferentes tipos de variables y nos meteremos en este tiempo extra. Entonces vamos a mantenerlo sencillo por ahora. Entonces solo voy a decir que me llamo Caleb y hagamos eso un poco más grande aquí. Entonces tengo una variable. Se llama nombre y el valor es Caleb. Y así ya sabemos de esta función de alerta. Hablaremos mucho más de esto por el camino. Si simplemente dije nombre de alerta y abro esta página en Google Chrome, realidad se puede ver eso. Simplemente dice Caleb. Eso es todo lo que hace. Si quisiera cambiar esto en cualquier momento, me sale, digamos, Caleb, Darlene, Darlene, salvo voy a ir por aquí hit Refresh dice Caleb, diciéndote que incluso podrías hacer más que eso. Entonces vamos a crear otra variable. Vamos a llamarlo curso. ¿ Qué curso estamos tomando actualmente? En este momento estamos tomando JavaScript para principiantes, y se puede ver que se envolvió en una nueva línea. Eso en realidad está bien. Es sólo porque mi teléfono es un poco demasiado grande aquí. Entonces debajo, podrías decir curso de alerta y vamos a seguir adelante, refrescar nuestra página y este es javascript para principiantes. Y así esto es realmente todo de variable es ahora se puede reasignar una factura muy en cualquier momento, así que ya no estamos usando nombre. Yo sí mencioné antes. semi colones son cosa. Generalmente, esto le dice a una computadora que hey, este es el final de la línea y lo que venga después de esto es una nueva declaración, así que justo como ejemplo, no quisiéramos poner estos dos en la misma línea así, porque si hicimos eso y golpeamos refresco, no vamos a ver nada. De hecho, en realidad se puede hacer click derecho, inspeccionar y se puede ver que tenemos un error aquí y abrimos a nuestro cónsul y se puede ver que tenemos un error aquí dice algo que es demasiado difícil de leer. Ahí vamos. Sin atrapar, sintaxis , error, token var inesperado Y nos dice justo dónde está exactamente. Entonces si hago clic en él y dice Línea 11 y mostrarme justo aquí así que eso es bastante cool. Entonces eso es un pequeño propina pro de depuración ahí para ti. Y así hasta mis editores diciendo: Oye, Oye, algo no está bien aquí. Y entonces lo que queremos hacer es por lo general simplemente ponemos eso en una nueva línea y ponemos un punto y coma al final. Esta es la forma más sencilla de mantenernos, y si hacemos clic, refrescar de nuevo, nos alerta como se esperaba, y no hay error en nuestro consejo. Y por cierto, cada vez que te encuentras con un JavaScript, siempre están abiertos tu consola. Echa un vistazo a lo que es esa área porque te puede decir como desarrollador javascript. Cuál es el problema, en realidad, ya que tal vez es algo que hizo el usuario. A lo mejor es algo que hizo el desarrollador. Al final de este curso, podrás saber exactamente de quién es la culpa algo. Por lo general son los desarrolladores. No implementaron algo apropiadamente. De acuerdo, entonces tenemos nombre variable y curso, y solo estamos alertando esto. Sigamos adelante y sobrescribamos nuestra variable. Ahora podríamos simplemente sí tener. Nuestro curso es igual a Python para principiantes. Y como digo esto e ir a refrescar esta página , ahora dirá python para principiantes. Y así funciona eso. Entonces básicamente hemos creado una variable. No lo usamos en absoluto. Y luego anulamos todo el asunto con un nuevo valor aquí Ahora, porque esta variable ya ha sido declarada a partir de nuestro esto se mete en levantar algo de hablaremos más adelante por el camino. No necesitamos volver a declarar bar. Ya está ahí, así que realmente solo necesitamos declarar var una vez en una variable en particular. Y después de eso realmente ya no necesitamos hacer eso. Entonces sigamos adelante y guardemos esto y golpeemos refrescar las finanzas. Python para Principiantes Consejo no se quejó. Las cosas se veían bien. Está bien. Una cosa más que debemos repasar es lo que es con esto. Entonces, ¿ves estas comillas por ahí? Hay otras dos formas de hacer esto. Entonces podríamos hacer, por ejemplo, de nuestra edad. ¿ Cuántos años tengo? Bueno, tengo 30 años. Podríamos hacer esto. Y si alerto a la edad y refresco esta página, dice 30. Y si entro aquí y escribo edad, ya parece existir. También me da 30. Y si escribo en curso aquí, ya existe. Ah, mi navegador entiende que aquí hay variables que son accesibles para el cabildo . Y así ahora estamos especie de empezar a interactuar con JavaScript en una etiqueta de script o un archivo dot Js. Si lo trasladáramos a un archivo externo, y por aquí podemos acceder también a algunas de estas variables. Por lo que estamos como empezando a conectar a nuestro editor y nuestro terminal de navegadores o al consejo. Entonces vemos aquí, la edad no tiene cotizaciones a su alrededor puede. Puede tener cotizaciones a su alrededor. Ah, también se puede ver que el semi colon era básicamente opcional. No lo necesitaba, y eso está bien porque me estaba poniendo mi abrigo en nuevas líneas. Y JavaScript es lo suficientemente inteligente en estos días para entender que para una buena práctica, sigamos adelante con eso cínico en eso ahí dentro y refresquemos nuestra página, y sigue diciendo que 30 se ve no diferente. Pero si escribo en edad aquí, se puede ver que tiene las cotizaciones a su alrededor. Esta es una diferencia fundamental entre diferentes tipos de variables. Hablaremos todo sobre esto por el camino, pero es importante que algo así se haga la idea en este momento. Esa es una variable que se llama variable, una variable acciones llamadas var var one. Cualquier cosa que tenga una sentencia o espacios en ella. Cualquier tipo de espacio es como lo que ves aquí dentro que necesita estar entre cotizaciones para que no podamos simplemente poner 30 30 30 30 30 30 30 con espacios ahí dentro y alerta de nuestro. Esto nos va a dar un error. Ahí vamos. Número inesperado, pero si ponemos cotizaciones a su alrededor, ¿ darle un refresco a esto? Funciona. Entonces en este punto, deberías estar un poco confundido si eres completamente nuevo en javascript sobre lo que se trata todo esto . Entonces cuando usamos citas, esto se llama cadena. Entonces esto es una cadena, y este es un tipo de variable que básicamente dice, Hey, esta es una frase Y luego tenemos Vamos a guardar nuestros dos aquí es igual solo al número 30 o cualquier número o 30.5, algo así. Y a esto se le llama un número. O en otros lenguajes de programación. A veces se le llama un entero. En realidad, en este caso estaría a flote. Pero eso no es ni aquí ni allá. En este momento, nos meteremos en eso un poco por el camino. Y JavaScript en realidad resume esto muy bien es y dicen, cómo no nos importa si tiene un punto decimal o no. Simplemente nos importa. ¿ Es un número? ¿ No es un número? Y así cuando estás tratando estrictamente con un número, no necesitas cotizaciones alrededor de él. No hay espacios ahí dentro. Solo tienes números y puntos decimales, y eso es todo. Sin comas, ningún dólar firma nada de eso. Se trata simplemente de números y un punto. Entonces ahora si sigo adelante y digo: Alertemos mucho, también. Y lo que quiero hacer aquí es deshacerme de estos. Refresca nuestra página. Se va a decir 30.5, y aquí. Si escribo lejos también, se puede ver 30.5 no tiene comillas alrededor. Hagamos que eso más grande no tenga comillas a su alrededor. Pero var uno sí. Y eso es porque esto es una cuerda y lejos, también, es un número. Entonces, ¿por qué es eso importante ahora mismo? Gran pregunta. Bueno, como estamos aprendiendo JavaScript en este momento, no es importante para nosotros. Pero va a ser importante para nosotros muy, muy pronto. Y creo que cuanto antes la gente entienda este tipo de diferencia en un tipo variable, mejor será su programación por el camino. Entonces eso es todo lo que realmente hay para este video en particular en el siguiente. Adelante y empecemos a asesinar algunas variables juntas para que en realidad puedas ver una especie de cómo se supone que una variable funciona del dedo del pie, porque en este momento estas variables y quiero decir que las estamos recubriendo duro, así que no son realmente variables sólo decían: Hey, asigna cursos iguales a JavaScript para principiantes y luego anularlo inmediatamente. Entonces eso no sirve. La variable necesita ser algo que pueda cambiar. Y, oye, si no entiendes completamente todo este video, no te preocupes por ello. Pasar a la siguiente de todos modos, y eventualmente todo esto solo hará clic en su lugar. Se vuelve mucho más fácil una vez que en realidad empezamos a escribir más JavaScript juntos. 6. Merging las variables: Hola, End. Bienvenido de nuevo. En la última lección, aprendimos un poco sobre las variables. En este último, vamos a aprender cómo podemos fusionarlos juntos. No, fusionar variables juntas como combinar oraciones, se llama Concoct nación. ¿ Ves esa palabra aquí? Concatenación. A menudo lo verás igual que la palabra viene gato también. ¿ Por qué se llama Nación Cat? No lo sé. Podríamos simplemente llamar emergente. Pero oye, los desarrolladores les gustan sus palabras de fantasía. Entonces oye, lo llamamos concatenación. Ahora en este video, realidad voy a hacer la mayor parte de esto en la consola. Entonces voy a la consola y vamos a seguir adelante y hacer el cromo más grande porque podemos. Y así a mi izquierda, sólo tengo ah, fusionando variables que HTML abre. Eso es sólo el código fuente aquí. Actualmente no hay nada ahí, ni JavaScript, y parece una página en blanco, y tenemos un terminal aquí dentro. Por lo que podría decir alerta. Hola, y esto funcionará. Adelante y despejemos este claro consejo y vamos a crear un par de variables juntas y luego puede gato necesitarlas? Entonces vamos a crear una era y una introducción a quien soy. Entonces digamos que Var intra era igual a Hola, mi nombre es Caleb, y soy algo algo algo, algo años de antigüedad. Entonces esta es mi introducción. Y si escribo eso se puede ver que simplemente escupe exactamente lo que ya había escrito. Ahora bien, si escribo de nuestra edad es igual a 30 tipo y edad de nuevo, podemos ver que la edad no tiene cotizaciones a su alrededor. Entonces sabemos que en realidad es un número, y queremos inyectar ese número aquí. Entonces, ¿cómo vamos a hacer esto? Bueno, como que hicimos esto al revés porque lo definimos. Primero, definimos primero la intro, y luego definimos su edad. Pero, ¿adivina qué? Podemos sobrescribir variables por lo que podemos decir intro, y nos dice lo que es la intro ya es igual en lugar de solo tener este espacio en blanco aquí. Lo que puedo hacer es que en realidad puedo dejar la frase poniendo ahí otra comilla , poner un signo más, y luego la variable, otro signo más y luego una cita. Y hay diferentes formas de hacer esto y javascript más moderno. Pero vas a ver esto por todo el lugar. Vamos a aprender así primero. Y así básicamente, esto es decir, Hey, intro, ya estás desafiando así que no necesitamos usar el dedo del pie. VAR dice Hola, mi nombre es Calvo. Buen viejo Calvo tabl e in. Mi nombre es Caleb y yo soy Y entonces deja la frase y dice: Oye, Oye, también agrega la edad en su sea cual sea ese valor. Póngalo ahí y luego Oh, oye, vuelve a empezar esa frase con otro signo más y luego otra cita y acaba de poner el resto de la sentencia ahí dentro. Y así si le pegamos entrar, podemos ver Hola, mi nombre es Caleb y tengo 30 años, y honestamente, eso es todo lo que hay para inventar nación. Ahora se mete el problema cuando intentas inventar números de Nate. Entonces si creo otra variable llamada, uh, número dos, supongo, y vamos a hacer que 40.123 podamos ver aquí dentro Numb a es igual a 40.123 Ahora que pasa si quisiera decir 30 40.123 Así que el número debería mirar 3040.123 ¿Cómo vamos a poder Gabinete eso? Eso es más engaño porque estos números de aire y cuando haces un signo más con números en la mayoría lenguajes de programación, simplemente agrega los números juntos, y eso no es lo que queremos. Entonces si hicimos edad más entumecido para mirar eso, nos da un número que no queremos 70.12 a 99999 Esto es una cosita divertida en informática donde en realidad no hay número de agujero en JavaScript ocasionalmente se encuentra con This is en realidad bastante genial ejemplo. Pero en lugar de decir 70.123 dice 70.12 a 99. Nn nn Nn e Infinity, infinito y así sucesivamente. Pero esto no es lo que queremos. Entonces, ¿cómo fusionamos estos juntos? ¿ Qué? Podemos hacerlo contaminando aquí una cuerda. Entonces, ¿recuerdas esa última lección? Las cuerdas del lado derecho y los números son un poco diferentes. Tipo de importante saber. Bueno, ya necesitamos saber la diferencia aquí para que podamos hacer esto y siempre dijo fue, Hey, Hey, toma el número 30 agregado a una cadena vacía y frase vacía y luego agregarle el segundo número. Y así si golpeamos enter, podemos ver que esto ya no es en realidad un número. Esta es una cadena y podemos decirle a cadena porque tiene citas a su alrededor. Y así esto está diciendo que esto es una cadena de 3040.123 También tenga en cuenta cómo dice 0.123 y no 1 a 29999999 es porque no es un número. El ordenador no tiene que trabajar un número redondeado así. Sólo tiene que decir, Oh, esto es una cuerda. Entonces sí, entiendo que aquí hay números, pero no tenemos que realizar un montón de cosas de matemáticas detrás de bambalinas para que eso funcione. Esto es como si se tratara de letras inglesas regulares. Negus no tiene que ser letras inglesas. Podría ser cualquier carta. ¿ En serio? Ah, pero sí, sólo la diferencia entre letras y números aquí. Y así este ahora piensa que estos aires todos básicamente letras en lugar de números. Entonces sigamos adelante y añadamos una frase con dos gatos. Entonces digamos ah de nuestro gato uno. Su nombre va a ser un Zephyr. Es que para y de nuestro gato dos es igual a Henry. Entonces estos son mis dos gatos. Por cierto, vas a ver esto indefinido. Siempre que use Vyron, esto se mete en el levantamiento. Esta es una característica de JavaScript más complicada para especie de tackle En este momento, abordaremos esto un poco más tarde. Pero si ves indefinido así, no te preocupes. No pasa nada. Simplemente está a una especie de JavaScript de registrar una variable y luego registrar el valor de la variable. Se llama izar otra vez. Nos meteremos en eso en el futuro. Y así ahora quiero decir, var sentencia es igual a tengo dos gatos y el 1er 1 va a ser gato uno. Y el 2do 1 va a ser gato también, y podríamos dejarlo aquí así como así. Y entonces lo que estamos diciendo aquí es hey, tengo una sentencia. Pero también quiero poner la variable del gato uno ahí para que sea lo que sea que vaya a ser, pasa a ser Zephyr. Pero podría ser cualquier otro nombre en el mundo. Y a lo mejor ha sido escrito 100 veces. No lo sabemos. Sea cual sea ese resultado final, lo vamos a poner aquí, y luego vamos a contaminar otra pieza de la frase, sólo la palabra fin. Y luego, usando el signo más, vamos a inventar a Nate Henry. Nosotros solo somos gato, también, así que sigamos adelante y tecleemos sentencia y ya puedes ver que tengo dos gatos, Zephyr y Henry. Además, en realidad podríamos profundizar aún más en esto también. Podríamos dio de nuestra edad uno. Entonces digamos Age of Cat One va a ser cuatro y de nuestra edad dos. Eso es gato a cualquiera que sea esa edad va a ser. Sabemos que es Henry. Sé que su edad es actualmente, también, así que tenemos un gato de cuatro años y un gato de dos años. Ahora queremos realmente poder capitalizar ocho en otra lata cafeína sentencia ya así que ya se definió sentencia, y como pueden ver, puedo llevar esto a mi consola y me dice, especie de en desvanecida texto de salida. Tengo dos gatos, Zephyr y Henry. Vamos adelante y digamos que la oración es igual a la oración más, Así que va a tomar este valor, y vamos a poder gato necesitar algo encima de eso? Entonces queremos poner ah, punto al final aquí y digamos y tienen algo de años, así que algo y algo de años, así que cuatro en esto es en lo que queremos meternos aquí. Por lo que siempre me está ayudando a cuando estaba aprendiendo a inventar. Nate se pone como subrayados ahí dentro. Y entonces simplemente puedes hacer tu divertido tipo de estilo de concatenación aquí, donde tienes cita de cierre más signo y luego aquí dentro podríamos poner cita edad uno más signo y puedes ver que es un orden opuesto. Entonces va cotización más signo, y luego para volver a entrar Tú lo haces más yo en Cotización, y vamos a hacer lo mismo aquí. Y esto es sólo para que voy a tener dos años y sigamos adelante y peguemos. Entrar. Ah, y por cierto, podemos poner punto y coma al final de esto. Pero no necesariamente tenemos que hacerlo porque nuestro cónsul o cromo en esta instancia sabe que cada comando es su propio mando, por lo que no tenemos que hacer esto una cosa de punto y coma. Pero de nuevo, es sólo una buena práctica para entrar. A medida que Javascript envejece, usamos punto y coma mucho menos y enfriamos. Probablemente estabas gritando en la pantalla diciendo, Caleb, edad para no existe. Se llama edad uno. Eso se puede ver aquí. Yo no lo llamé de dos años. Yo sólo lo llamé juez. Y así vamos a seguir adelante y rehacer esto. También podríamos simplemente redefinir o simplemente definir una variable llamada Age Two, y esto la arreglaría. Vamos a seguir adelante y cambiarnos a la edad. Y ahí vamos. Y ahora dice que tengo dos gatos, Zephyr y Henry, y tienen cuatro y dos años. Y así si sigo adelante y despejo esto y tomo sentencia de nuevo para que eso sea más grande, tengo dos gatos cuyo F 100 tienen cuatro años de edad. Entonces tengo envejecimiento aquí. Conocemos edades dos, tenemos edad uno es para que sabemos que tenemos un gato uno. Tenemos Cat dos y luego tenemos sentencia. Por lo que hemos hecho un montón de declaraciones variables aquí. Tenemos variables definidas y las hemos fusionado juntas en una frase. Y luego lo emergemos en esa frase una vez más. Entonces eso es básicamente todo lo que hay para inventar nación. Ahora, vas a ver esto por todas partes porque javascript es un lenguaje donde puedes modificar tu página Web, tu HTML e incluso tu CSS, y vas a querer eventualmente tomar una variable y reemplazar algún texto en tu página con lo que sea que vaya a ser ese valor variable. Y así es como lo hacemos podemos Cat Nation. Ahora, si te interesa darle una oportunidad a esto, puedes hacer exactamente lo que hice en esta variable y solo decir: Oye, Oye, mi nombre es como sea tu nombre. Tengo un gato o un perro o tengo ¿Cuántos libros tienes? A lo mejor tienes 1000 libros y podrías hacer algo así. Siempre es bueno entrar ahí y darnos un tiro. No lo olvides. Si alguna vez tienes preguntas, estoy aquí para ayudarte. Siempre puedes dejar un comentario o pregunta abajo 7. Logging de consola: De acuerdo, bienvenido de nuevo. En la última lección, platicamos Libro y gato Nación. Y esta lección vamos a hablar de nación no sin cobrar. En realidad vamos a ver una mejor manera de imprimir variables a nuestro cónsul en lugar de usar alerta. Entonces, hasta ahora, hemos estado diciendo alerta test y luego cuando refrescamos nuestra página, simplemente nos molesta con esto. Y cada vez que tocamos refresco, Nos molesta con esto. Y ya sabes, al principio cuando inicias JavaScript, eso no es gran cosa. Pero realmente no se ve esta funcionalidad en la naturaleza. La gente ya no usa alertas con demasiada frecuencia. A menos que sea como, Oh, empezaste a escribir un post y luego presionaste el botón Atrás. ¿ Estás seguro? Porque, como, ¿de verdad quieres irte? Eso es algo totalmente diferente, en realidad. Simplemente se ve igual. Entonces aquí, lo que queremos hacer es simplemente registrar algo a nuestro cónsul aquí. Y así lo que sea que javascript re estamos justo aquí, cualquier cosa. Podría ser literalmente cualquier cosa. Solo queremos ponerlo en la consola que podamos ver qué es, y esta es una forma muy, muy útil de depurar tu JavaScript. Entonces sigamos adelante y creemos una variable. Y voy a poner mi nombre es Caleb Tallinn y de nuestra profesión. Yo soy profesor por oficio. Sí, realidad eso es totalmente cierto. También desarrollador web, Así profesor y desarrollador web. Y vamos a deshacernos de esta alerta. Y digamos que solo tienes que ponerte tu sombrero de imaginación aquí por un segundo. Pero digamos que tenemos 10,000 líneas de JavaScript y no sabemos cuál es el valor del nombre actualmente. Y así tenemos un pueblo de código, y lo que vamos a hacer es que sólo vamos a fingir que eso está aquí arriba en alguna parte, y realmente no podemos acceder fácilmente a él, pero queremos ver qué es. Entonces, sí, podríamos hacer nombre de alerta, y cuando vaya por aquí, me dirá qué es. Pero eso es molesto. Y si por casualidad estuviste en un bucle, hablaremos de bucles más tarde. Esto podría ejecutarse por 100 1000 generaciones. Simplemente te seguirá alertando una y otra vez y una y otra y otra vez. Tu navegador podría incluso chocar con él. ¿ Quién sabe? Esa no es una buena manera de vivir tu vida. Una mejor manera de vivir tu vida como Vamos a entrar aquí y digamos, cónsul dot Log. Y entonces podríamos simplemente poner aquí todo lo que queramos. Entonces digamos nombre y luego una coma y pongamos la variable de nombre en año para que eso realidad ponga nombre Colon y así puedas ver esto es una cadena y esta es una variable. Vamos a refrescar tu página aquí, y voy a tener que hacer eso un poco más pequeño. Gracias. Por lo que podemos ver nombre Caleb Tallinn, y se ejecuta en línea. 29 del archivo llamado 60 Underscore consola underscore log dot html Y si hago clic en él, me dirá exactamente dónde se está ejecutando esto. Esta es una gran manera de depurar tu código. De hecho, esto es en realidad sólo una muy buena forma de averiguar qué está pasando en código. En general, sigamos adelante y tecleemos profesión aquí y otra vez. Acabo de añadir una coma y podemos ver aquí. Dice. Mi nombre es Caleb Tallinn y profesor y desarrollador web es mi profesión así que avanza? Probablemente vamos a usar el registro de consola con mucha más frecuencia de lo que vamos a usar. Alerta es sólo un poco odiosa, y apesta especie de tener que hacer clic en ella todo el tiempo. Y es como, Hey, aquí está alerta. De acuerdo, aquí hay otro click de alerta. OK, aquí hay otra alerta click OK, y solo se pone un poco de manana como un poco demasiado, sobre todo a medida que empiezas a escribir más y más código. Y el lado bueno de esto es cuando estás escribiendo código que va en un sitio web en vivo, sólo va a aparecer en tu consola. Entonces si me deshago de este consejo aquí y me refresco, no pasa nada. Lisa parece que no pasa nada. Pero si hago clic derecho, inspecciono, entro a mi consejo, esto sigue pasando el dedo del pie. Y así realmente sólo unos desarrolladores alguna vez van a ver esto. Y así si estás probando algo en producción en un sitio web en vivo, siempre puedes usar este método. Ahora hay un par de otros a los que puedes usar para que pudiéramos hacer consola dot advertir, peligro extraño que fue a minúsculas y quiero mayúsculas Ah, éste va de advertencia amarilla. Peligro extraño. Y también podríamos hacer. Cónsul, hagamos que ese abogado de menores haga punto de error de error, y sólo vamos a acelerar eso una y otra vez. Y debido a que todas estas están en sus nuevas líneas, no necesitan un punto y coma. Pero vamos a tirarlo ahí de todos modos. Y ahora vamos a ver una advertencia, un registro de consola regular y un error. Y ahí está. Tenemos advertencia. Peligro extraño. Mi nombre es Caleb, llamándolo profesor, desarrollador Web, y también error, error, error, error y también las respectivas líneas que se están llevando a cabo en línea. 28 9 29 y línea 30. Entonces esa es una mejor manera de vivir. Tu vida de JavaScript es usar el registro de consola. No vas a usar el error del Consejo de Guerra de la consola con demasiada frecuencia. Generalmente, solo usamos registro de consola. Ahora bien, si vienes de otro lenguaje de programación, esto es muy similar a la función de impresión. Entonces si usas Python, por ejemplo, esto es como imprimir. Si vienes de un enorme fondo P, es como decir eco algo y la forma Javascript simplemente se rechaza. Lo hizo. Ah, bitácora de punto cónsul. Entonces otra vez avanzando, vamos a estar usando el log de la consola mucho más, así que vas a querer asegurarte de que sabes cómo abrir de nuevo ese Cónsul en tu página. Ese es su clic derecho. Inspeccionar bien. Generalmente abre primero tus elementos, y solo tendrás que hacer click. Cónsul. ocasiones tienes que entrar aquí y hacer clic en Cónsul, dependiendo de lo grande que sea tu pantalla. Ah, pero siempre hay una pestaña cónsul ahí dentro, y siempre puedes simplemente abrir eso y ver qué está haciendo el código si te está dando advertencias , registros o errores. 8. Selección de elementos HTML: Hola y bienvenidos de nuevo en esta lección. Nos vamos a meter en alguna de la razón real por la que estamos aprendiendo JavaScript y eso es para modificar elementos HTML. Y así lo primero que queremos hacer es que queremos crear una etiqueta de script. Siempre necesitamos que el guión esté justo por encima del cuerpo. Ah, por cierto, la razón de que está por encima del cuerpo y no en su cabeza. Bueno, solíamos poner javascript en la cabeza, pero ahora ponemos javascript en la parte inferior de su página para que se descargue toda la leche extra HD. primer lugar lo ponemos en la parte inferior de la página para que, por ejemplo, si tenemos y h uno aquí hola mundo y solo refrescamos tu página, vemos hola mundo. Y básicamente, si vamos a estar usando algún elemento y JavaScript, esto tiene que existir primero. El HTML necesita estar ahí antes de que se cargue el JavaScript. Y en algunos casos, si pones javascript por encima de esto, se cargará el javascript. Después intentará buscar un H one llamado Hello World o tiene un texto hola world en él y no lo encontrará porque no se ha cargado. Y, sí, una línea puede marcar la diferencia. Por lo que en la mayoría de los lenguajes de programación, generalmente un programa corre de arriba a abajo. JavaScript no es diferente. Corre de arriba a abajo. Y así vamos a poner hola Mundo aquí. Ah, y vamos a darle a esto un yo d. Así que esto es sólo un poco de HTML básico y tengo un curso de HTML si necesitas un rápido refresco HTML llamado el último desarrollador HTML. Y así vamos a dar a esto un yo d de prueba. Ahora. Cuando nos guardamos y nos refrescamos, esto no va a hacer nada. No va a hacer una sola cosa por nosotros. Y entonces lo que necesitamos hacer es aprender a seleccionar realmente este elemento y luego poder modificarlo un poco. Y así JavaScript es ampliamente conocido por trabajar con HTML y X html markup básicamente cualquier cosa que tenga etiquetas como esta. JavaScript es bastante bueno trabajando con, casi como si estuviera diseñado para funcionar de esa manera. Por lo que hay muchas maneras diferentes de seleccionar un elemento HTML o un grupo de elementos o como todos los H en una página. Pero no vamos a hacer eso. Nos vamos a quedar con algo básico llamado get element por I D. Y así se ve así. Eso es Ah, mueve eso hacia arriba. Documents dot get element by i d. Y entonces simplemente ponemos la idea aquí, y así esta i d coincide con prueba, y eso está ahí arriba. Y si nos salvamos de nuevo, no vamos a ver que pase nada. No importa cuántas veces refresques todo lo que está haciendo es agarrar esta nota de elemento. Por lo que a esto se le llama nodo. Necesitamos realmente almacenar esto en una variable. Entonces sigamos adelante y pongamos esto en una variable llamada test. Y de nuevo, si refrescamos tu página, no va a pasar nada. Pero, ¿qué pasa si entramos a nuestra prueba tipo consulado? Ah, mira eso, dice H. Uno con idea de pruebas. Y en realidad es seleccionarlo para nosotros. Mira eso. Así se movió hacia abajo. Nada se mueve arriba, y lo ha seleccionado para nosotros. Ahora podemos hacer cosas. Entonces si tuviéramos dot podemos ver todo tipo de cosas diferentes aquí y aquí es donde JavaScript llega a estar. Un mundo muy, muy grande. En realidad hay tantas cosas, hasta ahora estamos viendo a los oyentes de eventos, más oyentes de eventos, más oyentes de eventos, más oyentes de eventos. Y simplemente sigue yendo y yendo y yendo. Podemos cambiar este estilo. Podemos cambiar la etiqueta del título. Si quisiéramos animarlo, podríamos darle un nombre de clase o eliminar un nombre de clase. Podríamos hacer todo tipo de cosas aquí. Pero sigamos adelante y averigüemos lo que el Texas y esto es sólo un texto interior de puntos y eso sólo nos va a dar el impuesto. También podemos hacer esto con HTML. Hacemos puntos HTML interno y así podemos ver que esto ahora dice hola mundo, sabiendo que ahora podemos entrar aquí y decir test dot inter html y esto es si queremos escribir HTML para que podamos decir, uh, hacer un subyacente A pesar de que eso es depresivo. Hagamos una toma subyacente de todos modos ya que dos lo bajo que slash mundo y vamos a seguir adelante y salvarnos y ver qué pasa. ¡ Maldita sea! Mira eso. Lo subrayó para nosotros. Pero si vamos y realmente vemos la fuente de la página, no hay subrayado. Eso es todo. JavaScript. Entonces lo que hizo Javascript se dijo: Hey, Hey, agarra ese nodo. Agarra este H un elemento, este de aquí y cambia el Inter html. Ahora lo que podríamos hacer es que podríamos almacenar las cosas viejas, también, así podríamos decir que el Inter html va a estar alto. Bienvenido a los principiantes de piso JavaScript, pero sigamos adelante y almacenemos las cosas viejas. Hagamos de nuestro viejo texto. Hagamos que ese caso camello sea igual a probar punto inter html, y eso sólo va a agarrar ese inter HTML y almacenarlo en una variable y podrá acceder a él a través de una consola. Entonces sigamos adelante y guardemos esto. Hola, Bienvenido a JavaScript para principiantes. Y si tratamos de acceder a este muy bolos aquí llamado texto antiguo, sólo deberíamos poder escribir. Hagamos esto más grande. Bueno, l d ah, hola. Ahí está. Eso es lo viejo. Almacenamos las cosas viejas en una variable antes de cambiarlo. Y ahora realmente podemos cambiarlo de nuevo también, porque todavía tenemos acceso a probar como nodo. Sigamos adelante y cambiemos el texto interior por el texto antiguo. Y así ahora estamos usando variables de manera bastante eficiente en este punto. Y al mismo tiempo, también estamos agarrando todo este HTML elementos este nodo y estamos diciendo, Hey, sí, entiendo que querías saludar, mundo, pero, hey, cuando la página se carga y contra el JavaScript en realidad funcionan algo de magia y cambiarla por nosotros, eso es lo que Javascript hizo por nosotros. Ahora de nuevo, hay muchas cosas diferentes que podemos hacer en un nodo HTML, por lo que podríamos escribir en test hit dot y luego podríamos literalmente simplemente desplazarnos por esto por días y días y días y días y días. Y se puede ver esta lista sólo sigue y sigue y sigue y sobre él. Y así JavaScript es un mundo realmente grande en todos. Honestamente, no vamos a aprender de cada cosa de aquí porque vamos a estar aquí por un tiempo muy, muy largo. Mi metodología de enseñanza es enseñarte a aprender de manera eficiente para que si por el camino estás trabajando en una empresa y estén usando algo llamado scroll to Bueno, ya sabes cómo acceder a scroll y sabes cómo averiguar qué es eso. Aunque ahora no lo aprendamos en este curso, vamos a aprender mucho en este curso. Pero simplemente no hay forma posible de que podamos aprender cada cosa. Entonces lo que me gustaría que hicieras como, ah, pequeña prueba un poco, un poquito de manos sobre experiencia creando nuevo archivo html y simplemente crear cualquier etiqueta No tiene que estar en una iglesia. Se le da un ni de algo. Realmente no importa lo que esas ideas siempre y cuando coincida con este valor aquí. Esta no. Este es el nombre de nuestra variable. Pero éste de aquí y éste de aquí esos sí necesitan igualar. Entonces crea ese elemento y luego selecciona el nodo con get element by I d Recuerda, usamos documentos dot get elements by idea. Hablaremos más de lo que significa ese punto por el camino cuando nos metamos en javascript más avanzado y luego simplemente cambiamos el html interno, tal vez darle subrayado, tal vez cursiva, tal vez hacerlo audaz. Haces cualquier cosa que te guste lo que escribes cualquier HTML que quieras ahí dentro siempre y cuando uses inter html. Y si alguna vez solo vas a cambiar el inter impuesto, siempre podrías simplemente hacer texto interno. Y entonces tu navegador no tiene que analizar y renderizar un montón de JavaScript o no JavaScript html. Simplemente podría hacer texto regular, que en realidad es mucho más eficiente. Adelante, Dale un tiro a eso. Si te quedas atascado, deja una pregunta abajo y estoy feliz de ayudarte. De lo contrario, pasemos a la siguiente lección. 9. Una forma de compartir el código: De acuerdo, hablemos de una forma para que compartas tu código. Eso es relativamente sencillo. Entonces si no usas “get” si no sabes que yo consigo o consigo Hub es que no voy a obligarte eso ahora mismo. Es Es bueno saberlo, pero ahora mismo, si no lo sabes, solo debes saber que hay una mejor manera de compartir html CSS y JavaScript, y eso es en forma de pluma de código. Entonces si vas al código pen dot io y puedes hacer clic de botón, esto acaba de empezar a revestir. Y realmente, todo esto va a hacer por nosotros es crear tres secciones donde tengamos HTML, CSS y JavaScript, y literalmente podemos encargar cualquier HTML CSS y JavaScript en tu que queramos. Y luego podemos guardar todo este código, y luego podemos compartirlo con otra persona para que también puedan ver el código. Entonces sigamos adelante, y voy a poner cada uno aquí y decir Hola, mi nombre es Caleb, y lo que en mi nombre es Caleb, realidad voy a hacer es ir a javascript esto un poco, pero I D Span es igual a nombre por lo que html no se ve ninguna diferente. Ah, el CSS. Cambiemos el lapso. Cambiemos ese lapso para tener una decoración de texto de subyacente Y en el JavaScript sigamos adelante y seleccionemos el nombre como un I d y lo cambiemos. Vamos a crear variable. Vamos a llamarlo Nombre es igual al documento dot Get, En realidad, En realidad, vamos a cambiar su punto de vista. Realmente no me gusta esta vista. Hagámoslo, Sí, éste es un poco mejor aquí, y también podemos hacer que eso sea un poco mejor, pero ya no necesitamos ver los C s. Está bien, eso se ve un poco mejor. Sí. Ahí vamos. Está bien. Documento. No te den elemento por i d Es caso de camello. Entonces cada palabra que no es la primera palabra tiene una letra mayúscula. Queremos obtener nombre que coincida con esta idea en aquí nombre punto Texto interno es igual a y digamos que esto ha sido secuestrado por mi gato llamado Zephyr. Y vamos a seguir adelante y darle a esto una caja fuerte. Y Ono me está pidiendo que inicie sesión. Puedes iniciar sesión totalmente creando conteo. Es completamente gratis. De acuerdo, así que acabo de iniciar sesión, y aquí vamos. Solo queremos cambiar el texto para que lo guardemos y se puede ver en mi L dice código pen dot io slash Caleb Holley y slash pen y luego algo hash, y en realidad puedes simplemente copiar y pegar todo el código a otra persona. Entonces si abro esto en una nueva pestaña, va a guardar todo mi código aquí. Eso es bastante guay. Y así que esa es una gran manera de compartir tu código. También puedes cambiarlo. Entonces el nombre cambió por mi gato. Y cuando un refrescante aquí, también cambió el nombre Ahí, ahí está. Ahora bien, si en algún momento del tiempo estás trabajando con Cónsul Law, también puedes simplemente abrir ese cónsul aquí dentro. Y podrías conta log realmente cualquier cosa que quieras así podríamos hacer con tan nueva consola dot log test, y aparece en su cool para que puedas recolectar guardar en cualquier momento en el tiempo. Incluso puedes tomar el código de alguien y tenerlo, lo que significa básicamente, vas a crear una copia en tu cuenta de su código para que no cambie su código todo, pero se guarda en tu cuenta y puedes les gusta y haces todo tipo de cosas. Cambias de vista, pero sobre todo puedes tomar que eres l. Y puedes copiar y pegar. Son dos amigos. Puedes hacer una pregunta con una chica con tu código de muestra aquí como un Caleb. ¿ Por qué esto no funciona? Y podrías poner todo tu código ahí dentro. Esa es súper buena forma de compartir código y pedir retroalimentación y pedir ayuda. Y por último, cuando estás creando un proyecto, si quieres, siempre puedes usar la pluma de código y simplemente compartir la pantalla final. Podrías tomar una captura de pantalla de la pantalla final y compartir la pluma de código que condes en tu proyecto de haberes compartido. Por supuesto, si no quieres usar la pluma de código, si no quieres crear una cuenta, no tienes que hacerlo. Se puede seguir utilizando archivos HTML y archivos JavaScript y tomar capturas de pantalla. Eso está totalmente bien sólo de nuevo. No olvides, siempre puedes compartir tu proyecto con el resto del grupo y lo más importante, yo. Voy a echar un vistazo a tu código y a tu producto final, y ya sabes Si quieres algún comentario, también te puedo dar retroalimentación. Pero hay que hacer que ese proyecto sobre habilidad comparta primero y avanzar. Definitivamente es una buena idea poner cualquiera del código que estás escribiendo aquí. Ah, en un proyecto de cuota de habilidad para que en realidad pueda darte retroalimentación al respecto. No voy a usar demasiado código pen durante todo el resto de este curso. Solo pensé que esta sería una gran manera de mostrarte cómo puedes compartir tu código de una manera agradable y limpia. 10. Proyecto mini de JavaScript 1: Muy bien, echemos un vistazo a nuestro primer mini proyecto. Es hora de empezar a poner algunas de las cosas que hemos estado aprendiendo a practicar porque ¿qué mejor manera de obtener experiencia práctica que experimentarla realmente? Por lo que hemos aprendido bastante hasta ahora, y vamos a usar sólo algunas de las piezas que hemos aprendido. Y lo que queremos hacer es querer en este mini proyecto, inventar innate una cuerda y variable juntos. Y luego quiero que empieces esa cadena a la página de esa variable final. Quiero que empieces eso a la página seleccionando un elemento y cambiando el HTML interno. Entonces vamos ah, vamos a escribir eso rápidamente. Número uno. Crear un script. Puedes atrapar una cadena y una variable juntos Número dos, usando punto inter html y obtener elemento por I d Cambia el html interno de un elemento para ser lo que es tu variable. Entonces eso es realmente todo. Al principio no parece mucho, pero ibas a hacer esto una y otra y otra vez en tu carrera de desarrollo web . Y así esto es realmente, realmente buena práctica de inmediato del puño. Ahora, si quieres ver la solución, solo sigue viendo este video y te mostraré exactamente cómo lo hago. De lo contrario, si quieres darle una toma, ahora es el momento de pausar el video e intentar hacerlo por tu cuenta, cual te insto encarecidamente a que hagas. Definitivamente trata de hacer esto por tu cuenta primero. Pero ¿sabes qué? Si no sientes confianza en hacer todo eso todavía Oye, eso está bien. Puedes ver mi solución, y luego puedes darle un tiro después, si quieres. Entonces voy a crear una H uno aquí. Sólo un texto grande, y voy a decir que mi gato favorito es y luego aquí dentro, voy a poner un lapso de nombre de gato, tiene una idea de nombre de gato, y va a empezar con el nombre Zephyr. Y cuando refresco mi página aquí dentro, puedes ver mi gato favorito es esfuerzo. Ahora, lo que quiero hacer es que quiero intercambiar su esfuerzo por otra cosa. Ahora voy a tomar una ruta un poco más complicada aquí, y tengo que empezar con mi guión, ¿no? Entonces voy a empezar con una etiqueta de escritura de apertura y cierre, y necesito seleccionar nombre de gato. Por lo que el nombre del gato variable es igual a documentos punto Obtener elemento por I. D. Nombre del gato. Y si guardo y refresco, ya verás. Oye, no ha pasado nada. Eso se espera. Todo lo que hicimos fue poner una nota en una variable. Y si hacemos esto, si escribimos en nombre de gato, realidad se puede ver que se están seleccionando años. Entonces vamos a bisagras. Nombre de gato y solo está seleccionando Zephyr. Eso es todo. Ahora el objetivo es básicamente tomar una cuerda y puede Katyn ocho a esa cuerda. Entonces vamos a seguir adelante y en realidad hacer es un método un poco más complicado. Y llamemos a esta variable llamada Zephyr, y vamos a conseguir el texto interior del punto nombre del gato. Y si hacemos cónsul dot log es alguna vez y refrescar nuestra página aquí dice esfuerzo igual que eso . Justo ahí dentro. Es un poco blanda, pero oye, pero oye, está bien porque esto es solo para depurar de todos modos, Así que tenemos su esfuerzo ahí dentro, y ese es el texto actual. Ese es el texto interior actual. Pero para este mini proyecto queremos inventar. Necesita una cuerda y una variable. Entonces tenemos un bullying muy aquí. Entonces vamos a poder Cat nombró la cuerda a ella. Entonces vamos a cambiarnos en realidad. Vamos a sobrescribirlo. Vamos a hacer Zephyr es igual a Zephyr y vamos a cum gabinete una cuerda a ella. Entonces va a decir que mi gato favorito es Zephyr es igual a Zephyr, sea lo que sea que actualmente sea. Entonces simplemente pasa a ser este texto aquí y Henry ahora esta frase no va a tener sentido , porque soy plural. Izándolo. Pero eso está bien. No tenemos que hacer que tenga sentido ahora mismo. Basta con que esto funcione. Y así vamos a seguir adelante y escribir nombre de gato en el punto texto interno o HTML interno es igual a sufrir, y así esto se pone un poco desordenado. Pero oye, vamos a darnos refrescante dice que mi gato favorito es siempre y Henry ahora, en realidad, una mejor manera de hacer esto no necesariamente está anulando esto. Eso fue sólo un ejemplo. Probablemente quisiéramos nueva variable para este llamado gatos, y nos cambiaríamos dos gatos también. Entonces vamos a crear una nueva variable llamada los esfuerzos de cualquiera que tenga su nombre ahí dentro Plus y Henry. Entonces si trabajamos a través de esto al revés, tenemos gatos es igual a Zephyr. ¿ Qué es lo que los zephyrs equivalen alguna vez al gato llamado texto interior? Bueno, eso es usar una variable llamada nombre de gato. Sabemos que ese es este elemento aquí arriba y conseguir ese inter texto. Entonces sabemos que Zephyr es básicamente este valor aquí mismo. Eso es más o menos lo que es. En realidad, eso es exactamente lo que es. Y así es como decir Zephyr, Katyn, ocho y Henry. Y cuando las pones juntas, se ve así. Y así es lo que en su H e correos van a ser, tu HTML interno ahora va a ser un Zephyr y Henry. Y así es como funciona. Y si alguna vez necesitas reemplazar variables con recubiertas duras como cuerdas u otros valores, eso está totalmente bien. Honestamente, lo que sea que te ayude a aprender esto a tu manera, está bien, Así que sigamos adelante y sálvanos. Refrescar. Y podemos ver que el nombre del gato sigue aquí Nombre del gato y le gusta todo genial y así es como lo reemplazamos. Ahora. Si quisiéramos volver a comprobar esto, siempre podíamos ver la fuente de la página. Y en nuestra opinión, dice fuentes de página, mi gato favorito es Zephyr. No obstante, cuando realmente lo ves con JavaScript habilitado, dice, mi gato favorito es siempre y Henry. De acuerdo, entonces así es como íbamos a hacer eso. No lo olvides, siempre puedes crear un bolígrafo de código, y puedes compartirlo en la participación de habilidades en tu proyecto. O simplemente puedes tomar básicamente todo tu código. Puedes copiarlo y pegarlo ahí dentro. Podrías tomar una captura de pantalla de cómo funciona esto. Se puede especie de hacer, ah, visual studio a la izquierda y luego la salida final a la derecha. Puedes tomar una foto de pantalla grande de esto y solo decir eso en tu proyecto, y yo puedo echarle un vistazo y darte algunos comentarios y odio. Si te atascas en esto, no lo olvides. Siempre puedes dejar preguntas, comentarios e inquietudes abajo, y llegaré a ellos tan pronto como sea posible 11. Manipulación de la cuerda: Hola ahí. Espero que hayan disfrutado de ese proyecto muchos. Vamos a hacer unos cuantos más de esos en el camino y, ah, vamos como que vamos a aprender un montón de cosas entre ellos para que podamos, ya sabes, aprender un poco de práctica, aprender un poco de práctica un poco. Creo que esa es una forma realmente buena de aprender JavaScript. Y así en este video, vamos a aprender sobre la manipulación de cuerdas, y suena a fantasía, pero realmente no lo es. En realidad es súper común en JavaScript a lo que la manipulación de cadenas es básicamente tomamos una variable que es como una oración o tal vez un número, y nos manipulamos. Nosotros lo cambiamos. Nosotros lo forzamos a ser algo diferente, y hay varias formas diferentes de hacernos. Pero en este video, sólo vamos a repasar algunos de ellos. Entonces vamos a pasar a minúscula a mayúscula, división unida rebanada y sub string. Hay mucho más de estos, pero creo que esta es una manera realmente, realmente buena. ¿ Es cierto que te acostumbras a cómo podemos manipular algunos datos? Entonces, ante todo, vamos a crear un H one con un i d de oración y sigamos adelante y pongamos aquí un poco de Lauren Ipsum . Y así cuando digo esto, sólo va a parecer bastante aburrido. Y eso está bien. No estamos tratando de que esto se vea bien ahora mismo. Simplemente estamos tratando de hacer algo de javascript. JavaScript no significa necesariamente cosas Look nice. CSS significa que las cosas se ven bien. JavaScript significa que las cosas son funcionales. Y así vamos a seguir adelante y crear un guión aquí. Y queremos agarrar todo este texto aquí. Todo esto Laura MIPs. Um, así que podríamos hacer usted sabe de nuestras oraciones iguales a y entonces podríamos ritmo son más bajos MIPs, um ahí dentro. O podríamos hacerlo de la manera javascript y decir que los documentos sí obtienen elemento elemento por i d oración. Llamemos a este nodo de oración, y soy suficiente para que eso sea más pequeño. Esperemos que eso siga bien ver. Y luego hagamos de nuestras sentencias. Águila a nodo sentenciar punto texto interno y sigamos adelante. Simplemente consola log este consejo dot log La sentencia va a ser sentencia. Y cuando nos refrescamos y hacemos click derecho, inspeccionamos cada clic, inspeccionamos e acudimos a nuestro consejo. Ah, ahí está. Vemos todo este texto bruto aquí dentro, y éste podría en realidad ser mejor si cambiamos la vista a Vamos a cambiar a abajo. Y así tenemos una frase aquí y es un montón de cosas de Lauren Ipsum para que podamos seguir adelante , deshacernos de ese log de consola Sabemos que está funcionando y que nuestra sentencia es de hecho, una cuerda. ¿ Cómo sabemos que es una cuerda? Bueno, siempre podríamos hacer tipo de frase nos dice que es una cuerda que es bastante guay. También podemos simplemente escribir frase frase y porque tiene unas citas a su alrededor, ya sabes, es una cadena, así que vamos a aclarar eso Y pongamos frase de nuevo ahí y se puede ver que es una especie de destacándose ahí. Pero en realidad no está haciendo nada todavía. Tan cool. Tenemos ahora nuestro texto de frase. ¿ Y si quisieras hacer todo esto en mayúsculas? Hagamos var La oración superior es igual para enviar en inicio a mayúsculas. Eso es literalmente todo lo que tenemos que hacer, y en realidad podemos probar esto en nuestro cónsul, también así podríamos hacer mandar en semental a la parte superior, y se puede ver que es auto sentimiento para mí y luego abrir y cerrar corchetes. Y lo que esto dice es que ésta es una función. Aprenderemos más sobre las funciones por el camino. Pero básicamente esto va a tomar realmente nuestra frase, el texto de Lauren Ipsum, y va a hacer algo con él, y eso es lo que esto significa. Estos corchetes de apertura y cierre o estos paréntesis significan que va a hacer algo con él. Adelante y golpeemos, entramos y miremos eso. Ahora todo está mayúscula, todo. Entonces sabemos que eso funciona, y simplemente podemos mantenerlo ahí dentro. También podemos hacer de nuestra oración baja y vamos a seguir adelante y hacer sentencia punto a minúsculas. Y por cierto, estamos creando nuevas variables aquí basadas en lo que sea que esta cadena sea esta variable. Entonces no estamos anulando sentencia una y otra vez. Estamos tomando la misma frase, que es este valor aquí dentro, los MIPs Laure Um y estamos diciendo hey, que sea mayúscula. Eso tampoco va a funcionar. Oye, hazlo en mayúsculas. Y luego también hey, hazlo en minúscula Y así básicamente, solo estamos copiando los datos una y otra vez sin anular en realidad. Entonces si alguna vez quieres ver que esto realmente funcione, podríamos seguir adelante. Sólo copiemos eso. Agarra todo ese asunto Copiar Pegar y tecleemos la frase más baja. Ahora podemos ver que todo es minúscula. El primero l debería ser mayúscula. No lo es. Es más baja. caso está justo aquí. Debe ser mayúscula. No lo es. Es minúscula. Y así funcionó. ¿ Y si solo quisiéramos conseguir, como, los 1er 10 caracteres de una frase? la razón que sea, sólo queremos el 1er 10 y esto en realidad es extrañamente útil. No pensarías que usarías algo como Solo consigue el 1er 10 o el 1er 4 pero sí, lo usamos bastante en JavaScript. Entonces sigamos adelante y creemos una sub cadena. Entonces vamos a llamar a este 1er 10 Chars es igual a eso significa caracteres sentencia dot sub string, y esto va a tomar dos parámetros opcionales aquí, realmente fuera de los primeros. En realidad no es opción. Entonces vamos a hacer sólo 10 y no hagamos esto aquí. Sigamos adelante y hagámoslo justo aquí donde podamos experimentar para que realmente podamos ver qué está regresando aquí, dice M. Dolar. Siéntate. Omitir. Así lo hizo todo m dólares it, um, it Entonces lo que esto está haciendo es decir, Hey, Hey, empieza en el personaje 10 y agarra todo lo demás. Entonces tenemos 123456789 10. Por lo que tomó esos 1er 10 personajes y los ignoró por completo, y empezó aquí M dolar sit omit, probablemente masacrando ese latín, por cierto. Y en realidad podemos ver eso. Eso es lo que regresa aquí. M dolar Siéntate en ella. Enfriar. Y así es como usamos sub string. Esto es bastante guay. En realidad no sabía que el cabildo haría esto, pero me da desde una longitud opcional. Cuántos personajes queremos para que podamos empezar en el personaje 10 y digamos que solo queremos a los siguientes 10 personajes. Ahí hay 10 11 12 13 14 15 16 17. Podríamos hacer el siguiente. Eso es un 30. Ahí vamos. Entonces tenemos entre el personaje 11 y 30 apareciendo aquí. Y así es lo que hace sub string. Y eso es realmente útil. Porque a veces, sabes, tal vez un usuario ingresa que tú, Earl, y no ponen www delante de ella. Y tal vez tu sitio web requiera eso o http con el fin de convertirlo en un enlace adecuado. Aquí es donde hacemos algo así. Entonces sigamos adelante. Este va a ser 1er 10 personajes. Hagamos cero y 10 y hagamos cero y 10 aquí porque esto es básicamente una vista previa en vivo . Cero y 10. Vemos Laura Ipsen te deja 11 Lauren Ipsum 1er 10 Y porque esa variable dice 1er 10 caracteres, hagamos primero 11 caracteres. De acuerdo, Estos dos próximos van a introducir un nuevo tipo de datos. Entonces sabemos de cuerdas y sabemos de números. Realmente no hemos usado demasiado los números, pero ahora sabemos de ellos. ¿ Qué pasa si quisiéramos meter aquí todas las palabras individuales? Bueno, en javascript, tenemos este método llamado Split, y básicamente podemos decirle que se divida cualquier cosa. Así que divide cualquier cosa aquí y podemos decir en qué dividirnos. Entonces decimos división en cada frase. Lo que esto va a hacer es tomar cada uno, cada uno de los espacios aquí dentro como lo que tenemos aquí. Entonces solo va a igualar lo que haya ahí dentro, y va a convertir esto en una lista lo va a convertir en una matriz. Entonces sigamos adelante y hagamos un ejemplo en vivo. No hagas split de punto de frase y vamos a dividirlo en cada espacio. Y hagamos palabras es igual a y miremos eso. Tenemos todas las diferentes palabras en tu y si hago esto más grande, tenemos todas las palabras diferentes y en realidad podemos abrir y cerrar esto y nos va a mostrar todas las palabras. Entonces tenemos una lista ahora. Ahora estos aire llamaron un aumento y JavaScript esta llamada y un rayo me dejaron escribir eso. Se llama una matriz Date prisa array, Y así realmente, todo en array es una lista gigante de números u cadenas u objetos, que no hemos aprendido, o todo tipo de otros tipos diferentes de datos y tipos de datos que aún no hemos aprendido . Y puede sostenerlos a todos en una lista y mantendrá ese orden. Entonces podemos ver a Florham Ipsum Dolar dijo que me reuní con eso y así sucesivamente y así sucesivamente. Entonces ahora podemos entrar aquí y podemos decir Vier todas las palabras es igual a la frase punto split y dividirla en cada espacio. Y sigamos adelante y hagamos cónsul dot log todas las palabras. No le di a esto una actualización y este registro de consola para mí y esto me dio todas las palabras. Ahora bien, ¿dónde es útil esto? Muy bien ahora, en EU, esto no es muy útil. Pero al final del camino, esto podría ser muy, muy útil. Podemos usar una cosa llamada cuatro bucle y bucle a través de cada uno y realizar en acción sobre ellos. No vamos a meternos en eso todavía porque eso es un poco más complicado de lo que generalmente nos gusta hacer al principio mismo de JavaScript. Simplemente siento que eso podría abrumar a algunas personas. Ciertamente me abrumó cuando estaba aprendiendo JavaScript de vuelta en el día. Y así me gustaría mantener esto, ya sabes, agradable y sencillo. Aprende paso a paso, pero está bien, así que tenemos todas estas palabras diferentes aquí y Digamos, Digamos que por la razón que sea, queríamos pacificar a todos juntos. Pero no queríamos una pieza que le volviera a juntar usando un espacio sencillo. Ya no queremos que la sentencia parezca una sentencia normal. A lo mejor queríamos poner paréntesis alrededor de cada palabra. Bueno, podríamos hacer eso. Podríamos hacer Hagamos lejos. Aquí vamos a sujetar las palabras y vamos a unirnos a todos estos juntos. Entonces vamos a tomar todas las palabras no sentencia. Nosotros queremos llevarnos este porque esta es la lista. Todas las palabras no se unen y luego se necesita una cuerda. ¿ Por qué queremos unirnos? Bueno, si hacemos esto y eso en realidad es solo guardar esto y veamos qué palabras corchetes se ve una mirada de ese corchetes palabras tiene todos los diferentes corchetes a su alrededor, a excepción del 1er 1 en el último. Bueno, ¿ adivina qué? Podemos hacer algo de cadena y gato nación aquí para que podamos agregar un corchete allá y podemos hacer un corchete aquí y refrescante. Vamos a hacer que corten palabras y ja ja ja! Mira eso. Todas nuestras palabras tienen corchetes a su alrededor ahora. Y solo por diversión. ¿ Y si hiciéramos punto de nodo de oración en su texto es igual a palabras entre corchetes. Oye, mira eso. Entonces ahora realmente estamos haciendo algo con nuestra página. Eso es bastante guay. Entonces voy a quitar eso porque no quiero cambiar eso todavía. Y hay una más de la que quiero hablar. Y así, verdad, cuando estamos viendo esto y esto, nos hemos dividido y nos hemos unido. Por lo que Split va a tomar una frase y dividirla en base a lo que quieras dividirla por . En este caso, usamos sólo un espacio regular, y luego tomamos lo que fuera esa lista de palabras y dijimos, en realidad únete a todos junto con otra cosa. Y así esto se ve un poco raro. En realidad no necesitamos usar paréntesis de cierre de apertura como este. Podríamos si quisiéramos usar un montón de espacios, y eso es seguir adelante, refrescar y escribir palabras entre corchetes y mira eso para que pudiéramos hacer eso también. Y así unirse y dividir suelen trabajar en tándem juntos. Y aquí hay uno más. Y si vamos a seguir adelante, en realidad nos refrescamos. Y hagamos todas las palabras. Tenemos esta lista de palabras aquí. ¿ Y si solo quisiéramos las primeras 3 palabras? Entonces sigamos adelante y tecleemos todas las palabras dot rebanada y se va a decir que esta es una función. Eso es lo que significa la F. Es una función. ¿ Dónde debe comenzar y dónde debe terminar? Empecemos en cero, porque cuando se trata de computadoras, empezamos a contar a cero. Como humanos, empezamos a contar. 12345 computadoras. ¿ No van las computadoras? 012345? Porque para una computadora, cero es un número para un humano. Cero no significa nada. Literalmente no hay nada ahí. Entonces el número cero y vamos al número tres. Y eso nos va a dar las primeras 3 palabras. Laura, um, Epsom Dolar Entonces? Y entonces podemos seguir adelante en nuestro código, y podemos decir lejos, las tres primeras palabras son iguales a sentencia. No, eso no está bien. Ya me engañé a mí mismo. Todas las palabras punto rebanada y solo toma el 1er 3 Solo tienes que agarrar una rebanada de la misma. Entonces solo queremos rebanar esto. Nosotros decimos: Hey, Hey, si esto fuera un pastel gigante, queremos tres piezas. Alternativamente, también podríamos dio palabras dot rebanada. ¿ Y qué pasa si acabamos de decir Empezar en esta de aquí? Entonces seis fueron uno demasiados. Supongo que en esa, porque no los conté, dice Ahmed. Todas las palabras punto rebanada comienzan en el número cinco y van hasta el final para que puedan ver aquí. Ah, hay 20 artículos en esta lista. Ahora de nuevo, hablaremos más de listas por el camino. Son súper útiles, en realidad. No súper complicado, tampoco, pero va a empezar en el número cinco, así que va a empezar el 012345 Y ese es el que le dijimos que empiece. Empezar en Vuelta consecutiva probablemente debería haber usado palabras que realmente puedo leer. Uh, sí, lo hay. Empieza en gira consecutiva, y ahora lo que podemos hacer es decir, Hey, Hey, en realidad sólo queremos cada palabra entre la quinta palabra y la décima palabra. Nosotros los queremos a todos y que lo queremos poner en una sentencia. Entonces ahora en realidad podemos hacer algo tipo de aseado con esto. Entonces sigamos adelante. Vamos a agarrar palabras medias lejanas es igual a todas las palabras punto rebanada y queremos agarrar el número cinco al número 10 y luego podemos hacer de nuestro no lo llamo hace frase palabras medias punto unirse y vamos a unirnos a ellos con un solo un espacio regular. Y entonces sigamos adelante y hagamos sentencia. Node dot texto interno es igual para hacer oración, y eso es sólo darle a esto una actualización y ver cómo va a tomar, probablemente de aquí para aquí ish estoy adivinando, porque no estoy contando las palabras y va a reemplazar este texto con esos medios . Tutta Así. Simplemente los reemplazó para nosotros y de nuevo una última vez. Si vamos a ver nuestra fuente de página Mira eso. Tenemos todo aquí dentro. Pero oye, Javascript dijo que no. Agarra el nodo de la oración, agarra ese inter texto para que podamos trabajar con nosotros como variable. Y así tenemos una copia de sentencia aquí. Una copia de frase aquí, una copia de frase aquí, aquí y después con estos, podemos hacer cosas diferentes si quisiéramos, y como al final donde básicamente tomamos esa frase, tomamos esto sentencia. Nos apoderamos de todas esas palabras y la partimos en base al espaciado. Y luego convertimos todas esas palabras en palabras entre corchetes. Por lo que no había más espacios, sólo soportes por todo el lugar. Y ahí es donde deja la licencia porque no hicimos nada con eso. Entonces dijimos, En realidad agarra las primeras 3 palabras y dijimos: Vale, Vale, bueno, hay una lista de palabras aquí desgarradas por el espacio. Eso es lo que es split aquí. Y dijimos: Sólo agarra el 1er 3 Así agarramos a Laura Ipsum Dolar, y eso fue el 1er 3 palabras. Y luego dijimos: Nuestro no vamos a hacer nada con eso. Tomemos las palabras medias. Tomemos de nuevo todas las palabras. Eso es todo esto Split en el espacio, Agarra el número cinco. Entonces 012345 y luego agarra hasta la palabra 10. Entonces 12 tres o 89 y luego hecho. Y luego dijimos: Oye, Oye, ya sabes lo que agarró esas 10 palabras y la puso de nuevo en una frase para que no queremos una lista de cosas. Nosotros sólo queremos una frase regular y Entonces dijimos yo cambio ese texto, Cambiarlo para que sea lo que sean esas cinco palabras. Y ahí está. Tenemos esas cinco palabras así. Por lo que esta es una introducción de base en la manipulación de cuerdas. Ahora, en este punto del tiempo, probablemente estés pensando, Oye, eso no es para nada útil. Pero en las próximas lecciones, vamos a hacer uso de un poco de esto. Entonces es realmente, realmente bueno saber que estos existen, aunque no los uses todos los días es bueno saber que existen. Ahora, yo como desarrollador tengo un desarrollador de pila completa que incluye el front-end. Yo uso estos casi todos los días. Pero, oye, si eso suena a mucha presión, todavía estás aprendiendo. JavaScript. Sólo recuerda, todavía estás aprendiendo. Eres estudiante de JavaScript. No necesitas ser el mejor. No necesitas saber todo esto de arriba. Tu cabeza siempre puede googlearlo Pro tip. Todos sus desarrolladores senior, We girl cosas sin parar todo el día. Entonces no te sientas mal si alguna vez tienes que buscarlo en google y luego por último, simplemente no sientas que tienes que recordarlo todo porque, francamente, no lo haces. Tan solo necesitas saber que existen este tipo de funciones. Entonces es como si quisieras tomar todas tus palabras y ponerlo en mayúsculas, realmente no necesitas recordar que es punto a mayúsculas. Solo necesitas recordar cómo acceder a ella. Y así, por ejemplo, podríamos hacer punto de frase y yo solo te escribo peopie para mayúsculas y mira eso. Me da a mayúsculas, y todo lo que tengo que hacer es agregar paréntesis a su alrededor, y lo hace por mí. Y así es como un pequeño recordatorio todo el tiempo. Siempre está ahí, y no tienes que sentir la presión de saberlo todo de inmediato. Ahora, verdad, de verdad apreciaría si pudieras darle una oportunidad a esto. Simplemente pasa por cada uno de estos, escríbelo a mano. Sé que puede chupar escribir cosas a mano, pero si lo escribes a mano, vas a crear memoria muscular. Y un día cuando tu cerebro se perpleja y realmente no puedes recordarlo todo, ya sabes lo que tus dedos iban a empezar a escribir y ellos saben lo que están haciendo. Estás pensando en otra cosa y tus dedos aire solo haciendo el trabajo, y en realidad funciona así. Así que adelante, dale una toma a eso, y luego vamos a repartir la siguiente lección cada vez que estés listo y aprendamos aceptar alguna entrada de usuario y a hacer uso de eso. 12. Aceptar la entrada de tu usuario: Hola, Bienvenido de nuevo. Ojalá no te perdiera en el video de manipulación de cuerdas. Sé que fue un poco largo. Ahí hay mucho que aprender, pero también es cosas muy, muy importantes que saber en este video vamos a aprender a aceptar entradas de usuario en forma de prompt. Y así cuando abrimos una página, puede pedir tu nombre o una edad o algo así, y entonces en realidad puedes trabajar con eso. Y luego puedes convertirlo en mayúsculas o minúsculas o cualquier cosa por el estilo. Entonces solo tengo un archivo HTML aquí, y voy a crear un nuevo script. Y vamos a mover este tipo de en el centro de la pantalla aquí y vamos a crear un nuevo guión y vamos a utilizar una función totalmente nueva. Se parece mucho a alerta, pero no está alerta. Se llama Prompt, y esto sólo va a pedir a alguien alguna entrada para que podamos decir prompt y ¿cuál es tu nombre? Y cuando refresco esto dice: ¿Cuál es tu nombre? Escribiré en Caleb. No pasa nada. Eso es porque todo lo que hizo fue pedido por mi nombre. No lo almacené en una variable. No obligué al HTML a cambiar. No actualizamos el modelo de objeto de documento. Nosotros no hicimos nada. Acabamos de decir: ¿Cuál es tu nombre? Y eso es todo. Entonces, si bien esa es una función genial, actualmente no es útil. Entonces sigamos adelante y que sea útil. Entonces vamos a guardar nuestro nombre es igual para preguntar ¿cuál es tu nombre? Y luego sigamos adelante y consola registremos ese registro de punto cónsul tu nombre es y actualizar nombre. Ponga a Caleb una vez más. Ja. Tu nombre es Caleb así. Y así es como le pides a alguien realmente cualquier tipo de datos. Ahora, lo grande de lo que hay que tomar nota aquí es que cada vez que usas prompt, la entrada siempre vuelve como una cadena. Entonces si estás tratando de sumar números juntos, así que si tienes que prometer, como ingresar el número uno y luego ingresar el número dos y luego tal vez entrar el número tres, es posible que no obtengas los resultados que estás buscando. Y como ejemplo, sigamos adelante y tecleemos nombre y podemos ver que tiene citas a su alrededor, así que sabemos que es una cadena, pero siempre podemos escribir también tipo de nombre, y eso me dice que es una cadena. Entonces sigamos adelante y deshagamos de esto e inyectemos este cambio. Estos subrayados aquí desde la entrada personalizada hasta lo que fuera el valor que alguien puso ahí . Entonces cuando digo ¿cuál es tu nombre? Y escribo en Caleb, estos subrayados. Eso debería cambiar a Caleb. Entonces primero lo primero. Tenemos que agarrar esta nota Esta h tres. Vamos a seguir adelante, crear una nueva variable. Se llama H tres nota. Supongo que documentos dot get Elham significa i d. Y vamos a volver a utilizar la entrada personalizada. Eso sólo coincide aquí arriba. Y entonces podríamos decir h tres no lo saben. El texto interior holandés es igual a cualquiera que sea el nombre. Vamos a refrescarnos y digamos: ¿Cuál es tu nombre? Bueno, mi nombre va a ser Caleb. Ah, mira eso. Tu nombre era o es Caleb. Es cambiar lo que es porque no estoy tiempo pasado. Yo estoy presente tensa. Ahora. ¿ Y si quisiéramos hacer algún tipo de manipulación de cuerdas en esto? ¿ Y si quisiera asegurarme de l la entrada todo es siempre minúscula. Bueno, podríamos hacer dos cosas si sabemos que es siempre, siempre, siempre, siempre, siempre, siempre va a ser minúscula. Podríamos cambiarlo de inmediato porque un nombre es igual a nombre punto a minúsculas. Y siempre que nos referimos a nombre por el camino, como aquí, siempre será minúscula. Entonces vamos a dar un ejemplo a esto. Caleb en todas las gorras y me pego OK y aparece en minúsculas. Eso es lo que estamos esperando ahora. Si no quieres que esto siempre sea minúscula y quieres conservar lo que sea que el usuario ingrese y solo querías ser minúscula, solo una vez podrías hacer punto a minúscula aquí, y luego todos podríamos estofar como un registro de consola, y podemos registrar el nombre original. Y entonces lo que estamos haciendo es decir, Hey, cuál es tu tienda de nombres que invariable. Después agarramos la nota de tres años. Esa es esta entrada personalizada y decimos, Hey, Hey, vamos a agarrar ese inter texto y cambiarlo. Vamos a cambiarlo por lo que sea que entraran los usuarios. Pero en realidad asegurémonos de que siempre sea minúscula y luego Let's Cónsul registró el nombre. Ahora, en este momento, ¿crees que el nombre va a ser todo minúscula cuando hagamos un registro de consola? ¿ Será el nombre en minúscula enteramente? Porque dijimos que es una minúscula aquí o crees que no va a ser minúscula porque sólo lo cambiamos esta vez? Ahora, esa es en realidad buena pregunta, porque diferentes lenguajes de programación operan de manera diferente en este sentido. Entonces vamos a experimentar con esto. Adelante y pongamos a Caleb en todas las gorras y podemos ver todas las minúsculas. Pero cuando consolamos log, todo está en gorras. Por lo que esto en realidad no lo cambió en absoluto. Entonces lo que hicimos aquí nombró a minúsculas En realidad no cambió el valor del nombre. Simplemente lo cambió esta vez. Simplemente cambió el valor de esta vez, pero en realidad no cambió todo el nombre para siempre. Y así es donde nos metemos en una manipulación mucho más variable, manipulación de cuerdas, cosas así. Porque ahora podemos preservar la entrada del usuario. Ese es el nombre. Y podemos decir, realidad, ya sabes, sólo en este caso, que sea minúscula, pero en todos los demás casos, que lo mantengamos igual porque quizá queramos hacer algo con él. Por lo que esta es una forma muy sencilla de aceptar la entrada del usuario. Y en la naturaleza, en un sitio web en vivo no ves esto usado, ves campos de texto siendo usados, ves áreas de texto desplegable, cosas así, y vamos a llegar a todo eso. Pero necesitamos aprender a administrar la entrada del usuario para empezar, y este es un muy buen escalón para eso. Por lo que hemos aprendido a aceptar las entradas de alguien, guardarlo en una variable, agarrar un nodo y luego cambiar el valor de esa nota para ser cualquiera que fuera el prompt, cualquiera que fuera la entrada del usuario. Y este tipo de nos prepara para algo llamado oyentes de eventos, oyentes eventos son como básicamente podemos decir, Hey, Hey, cualquier vez que alguien escriba en un área de texto o cambie un campo selecto, debilite, haga algo basado en eso. Y es en este punto que nuestro código en realidad se vuelve bastante dinámico porque hasta ahora no hemos podido aceptar entrada personalizada. Hemos tenido alertas que nos dicen cosas pero en realidad nunca hemos podido inyectar ningún tipo de texto o información variable en la página. Y ahora podemos. Y así creo, para el siguiente par de videos iban de pie, aprender a tipo de trabajo con esto un poco, y eso nos va a preparar realmente para el JavaScript más futuro. Cuando nos ocupamos de los oyentes de eventos y más entrada de usuario y cómo administrar todo eso. Y así como un refresco, sigamos adelante y digamos nombre y hagamos nombre de alerta. ¿ Cuál es tu nombre? Mi nombre es Kate Lubbe, y van a dar click. OK, sólo va a alertar. Mi nombre es Caleb. Mi nombre es Galeb, así. Y eso es todo lo que hay para avisar y alertar. Y ahora eres un pro pronta y alerta para ser totalmente honesto. De acuerdo, así que acabo de deshacer eso Ahora ¿qué pasa si quieres algún defecto? Aquí texano, digamos que estás jugueteando por ahí y sabes que estás experimentando. Estás aprendiendo tu juego con javascript como deberías ser, pero cada vez que refrescas la página, tienes que escribir el nombre. Bueno, eventualmente vas a empezar a escribir y cosas así que no son súper útiles. Vamos a darle un defecto. Vamos a seguir adelante y el segundo parámetro de prompt va a ser. Sólo estoy poniendo mi nombre. ¿ Cuál es tu nombre? Caleb? Y cuando me refresco, se rellena automáticamente para mí. Y otra cosa a tener en cuenta aquí es cuando nos refresquemos, Deshaznos de esto y hagamos clic en Aceptar, y entremos aquí y digamos ¿Cuál es el nombre? El nombre es una cadena vacía. no hay nada ahí dentro. ¿ Qué pasa si se pulsa Cancelar en lugar de dejarlo vacío mientras dice Mi nombre es nulo, Así que vamos a seguir adelante y ver qué nombre es. El nombre es una cadena llamada No o así parece. Vamos a comprobar dos veces que tipo de nombre, y es una cadena, y así básicamente no hay nada aquí. En el siguiente video, vamos a aprender de estas cosas, llamadas operadores de comparación para asegurarnos de que nuestra entrada sea en realidad lo que estamos esperando y si no lo es, hacer otra cosa, y esto es como damos a las computadoras comandos basados en la entrada del usuario. Entonces vamos a saltar sobre el siguiente video donde aprendemos sobre los operadores de comparación, y aquí es realmente donde todo lo que hemos aprendido hasta ahora se convierte en programación riel 13. Introducción a los operadores de comparación: De acuerdo, echemos un vistazo a los operadores de comparación. Los operadores son las pequeñas piezas de lógica en un programa que nos dicen que hagamos una cosa determinada o nos dicen que no hagamos una cosa determinada. Básicamente, es como tomamos acción en base a un valor variable. Aquí es donde las variables realmente se vuelven súper importantes, no solo sobre alertar cosas o registro de consola, trata de darle a un programa una tarea particular que hacer. O tal vez no a dio. Y así un operador de comparación básicamente se ve así. Adelante, hagamos algo de espacio aquí. Básicamente dice, Si tu nombre es Caleb, haz algo de otra manera o haz algo más que básicamente es todo lo que es. Y de hecho, en el mundo de Python, en realidad se parece mucho a esto. Muy, muy, muy similar. JavaScript tiene un tipo diferente de sintaxis, por lo que la forma en que lo hacemos lucir, sigamos adelante y creemos aquí una etiqueta de script. Y echemos un vistazo a nuestra primera declaración if. Entonces vamos a codificar esto y luego lo vamos a convertir en un prompt donde realmente podamos aceptar la entrada del usuario. Entonces hagámoslo nombre lejano es igual a Caleb. Vamos a tener que hacer este poco más pequeño aquí. Y entonces podríamos decir, si paréntesis? Porque es hacer acción, ¿verdad? Si va a hacer una acción, vas a necesitar algunos paréntesis ahí dentro si nombre es igual a Caleb Apertura Curly bracket cerrando corchete rizado al igual que eso. Y esta es una declaración if. Entonces estás diciendo, Oye, si una variable es igual a lo que estás esperando que iguale para alertar, haz algo y vamos a refrescarnos y dice, Haz algo ahora ¿por qué hiciste eso? Porque realmente se puede ver que el nombre es igual a Caleb. Y si el nombre es igual a Caleb ahora, hay una salvedad aquí es que estamos usando para igualar signos. Un signo igual significa que esta es la variable. Variable es igual a cualquiera que sea este valor. Ese es un signo igual a signos iguales. Significa hey, es el nombre que Caleb son, que estamos revisando para asegurarnos de que en realidad sea el nombre correcto. Por lo que este se llama operador de asignación, y éste es un operador de comparación. Ahora hay varios otros operadores de comparación por ahí, pero realmente sólo vamos a aprender de este 1er 1 Por ahora, para mantenerlo agradable y sencillo. Entonces ahora cambiemos esto para avisar ¿cuál es tu nombre? Y ahora puedo refrescar se va a decir ¿Cuál es tu nombre? Y si escribo algún otro nombre, vamos a ser mi gato por un momento. Se llama Zephyr. Escribiré en Zephyr. No pasa nada. Y eso es porque si entramos aquí y escribimos de nombre, lo podemos ver. Zephyr. Y estamos diciendo, Oye, si el nombre es igual a Caleb, haz algo, No es Actualmente está diciendo su esfuerzo, Pero si refrescamos y escribo en Caleb con mayúscula para que coincida con este valor derecho ahí, dice, haz algo fresco. Entonces ahora realmente tenemos algo con lo que trabajar. Aquí podemos decir: Oye, Oye, pídele al usuario algo de información, y si esa información coincide con lo que estamos esperando, debilita, haz algo más. Entonces ahora hagamos que esto sea un poco divertido o hagamos un H uno aquí yo d es igual a solo llamar Welcome. Y vamos a convertir esto en ocho nodos de nuestro nodo de bienvenida es igual a documentos dot Obtener elemento por idea it auto rellena para mí Eso es bonito nombre. Hazlo más pequeño. Por lo que cabe en una línea. Y ahora tenemos esto aquí, y podemos decir, Hey, Hey, si el nombre es Caleb, Nota de bienvenida punto Texto interno es igual para dar la bienvenida a tu página web, Caleb. Y antes de darle un tiro a esto Ah, acabo de notar que tenemos documento me sale l elemento por i d No es el nombre. Bienvenido. En mi ataque de emoción, me puse un poco demasiado por delante de mí ahí y, ya sabes, divertido Hecho que nos pasa a todos. Entonces ahora voy a golpear, refrescarme y decir: ¿Cuál es tu nombre? Voy a decir que me llamo Caleb. Y ahora dice: Bienvenido a tu página web, Caleb. Y si digo algún otro nombre, si dije mi nombre es no, no Zephyr. Seamos Batman. Mi nombre es Babin no hace nada. No se supone que Batman esté aquí. Y Snow, tenemos algo de lógica y algo que sucede en base a que mi nombre es Caleb. Ahora bien, ¿y si necesitábamos que esto fuera un poco más aceptado? Porque en este momento necesitas un K. mayúscula Si escribo en Caleb con un R Capital, A minúscula K, no pasa nada. De acuerdo, bueno, ahora necesitamos realmente cambiar esto. Tenemos que decir si nombre es igual a Caleb con minúsculas K. Bueno, eso no va a cambiar para eso. Y eso Y eso y eso y eso. Esas son todas las diferentes variaciones y mezclar y emparejarlas, Por supuesto. Entonces lo que podemos hacer es decir, si se nombra a minúsculas. Entonces vamos a tomar cualquiera que sea el nombre que se convierta en minúsculas y luego comparar el valor en minúsculas . Adelante y hagamos esto. Te permite todo en mayúsculas Caleb. Y entonces digamos que está bien y dice: Bienvenido a tu página web, Caleb. Y eso es porque dijimos: Oye, Oye, si el nombre todas las mayúsculas, Caleb, y entonces lo forzamos a ser más bajo. El caso es igual a la minúscula Caleb. Y ahora va a igualar en cada uno de ellos. Podríamos decir K a l O b. Maldición. Todavía funciona. Y aquí es donde la manipulación de cuerdas se vuelve muy, muy útil. Por lo que ahora en este punto, necesitamos echar un vistazo a la propia declaración if real. Qué está haciendo este gatillo mientras no es sólo el hecho de que sí coincide con Caleb. Sí. Está buscando un partido con la lógica detrás está diciendo: ¿Es verdad esta afirmación? ¿ Nombre punto a minúscula igual? Caleb? Bueno, si alguien tipeara a Caleb así, ¿eso coincidiría? No, esos aires diferentes a una computadora. Pero dijimos a minúsculas, que es lo mismo que decir: ¿Caleb es igual a Caleb? Y si sí, esto sería cierto, Tu computadora entonces dice Sí. Esto es cierto. Lógicamente. Pitido, bip, bip, bip. Sí, Esto es cierto. Haz que haga algo. Y así sus afirmaciones if siempre debieran volver verdaderas. Y entonces qué pasa si no regresamos? Es cierto, ¿cómo manejamos algo que es lo contrario de verdad? ¿ Cómo manejamos algo que es falso, o cómo manejamos múltiples escenarios? Bueno, esas son cosas en las que nos vamos a meter solo un poquito por ahora, creo que solo deberíamos practicar un operador de comparación simple solo para conseguir el ahorcamiento de ello, porque aquí es donde podemos tener mucho de diversión con él. Podemos hacer cualquier cosa con nuestra página web en este punto. basado en afirmaciones justamente si. Y luego, por último, echemos un vistazo más rápido a la sintaxis aquí. Entonces tenemos si paréntesis y luego dentro de estos paréntesis, así que en realidad podría eliminar eso si lo que aquí dentro es cierto, entonces si el valor uno es igual al valor a, entonces tienes algunos corchetes rizados. Tienes corchete rizado de apertura y en cierre de corchete rizado, haz algunas cosas aquí. Y si no es cierto, si tus declaraciones if no resultan ser ciertas, esto no se ejecuta en absoluto. Simplemente salta tu programa, dice que ahí no hay nada. No voy a hacer nada con eso. Y ese es esencialmente el núcleo de cada lenguaje de programación en el planeta. Si quieres meterte en la inteligencia artificial, si quieres meterte en el aprendizaje automático, adivina cuál es la mayor parte de ella una tonelada de. Si las declaraciones, es si un punto de datos coincide con un cierto valor. Si un conjunto de datos coincide exactamente con el resultado que estás esperando. Si no lo es, haz otra cosa que realmente es todo lo que es. Aunque mires ya sabes, más películas de fantasía como yo robot, ya sabes la máquina, El soleado era su nombre. Sonny mirará a su alrededor y analizará todo el panorama. Y dirás Si hay una persona ahí, saluda. Si no hay persona ahí, sigue caminando. Entonces esa es una declaración if else. Y al final del día en programación, todo se reduce a algo llamado booleano. O es cierto o es falso. Eso es todo realmente no todo un montón de terreno medio ahí. Y así que eso es todo lo que estamos haciendo aquí es que estamos diciendo, Oye, ¿ esto es cierto? ¿ A de esta declaración? Si esta afirmación if es cierta, haga algo. Y si no lo es, quizá haga otra cosa. Pero aprenderemos de eso en una lección futura. Entonces lo que me gustaría que hicieras es darle una oportunidad a esto, pedir tu nombre usando un prompt, y luego comprobar si ese nombre coincide con un valor que estás buscando. Y si coincide con ese valor, entonces haz algo más. Simplemente escribe una declaración if y una especie de acostumbrarse a ella. Y no lo olvides, puedes experimentar. No vas a romper nada. Siempre podrías hacer, como oye, si me llamo Nathan. Si me llamo Zephyr, algo así, también podría hacer. Dudaba que los datos en vez de a minúsculas se le pudiera hacer a un caso de pájaro. Podrías hacer algo así. Haces todo tipo de cosas, Así que no olvides solo jugar alrededor de eso. Diviértete experimento. Se te permite experimentar. Y una vez más, no hay forma posible de que puedas romper nada en tu computadora solo escribiendo esto para que estés totalmente seguro para experimentos al contenido de tu corazón. 14. Manejar los operadores de oposición: hola y bienvenidos de nuevo. En la última lección, aprendimos sobre los operadores de comparación. En esta lección, vamos a aprender sobre manejar lo contrario de algo que es cierto. Entonces, por ejemplo, si tenemos un guión que pide mi nombre y dice: Oye, Oye, si mi nombre es Caleb, déjenme la bienvenida. ¿ Y si mi nombre no es Caleb? ¿ Y si estás pidiendo un curso y no es JavaScript para principiantes? Adelante y hagamos eso. Ahora digamos que var que se llamó entrada es igual a prompt. ¿ Qué curso estás tomando? Y entonces podríamos decir con una sentencia if si el punto de entrada a minúsculas es igual a JavaScript para principiantes y eso solo asegúrate de que no importa si hay Ah, letra mayúscula o sin mayúscula y luego hagamos este llaves más pequeñas. Y entonces podríamos decir, ya sabes, hacer algo aquí dentro. Y así ya estamos familiarizados con esto. De hecho, realidad podríamos limpiar esto hasta que podríamos decir, entrada más baja. Vamos a llamarlo así de nuestros bajos de entrada igual a, y sólo vamos a crear nueva variable llamada en, poner más bajo, y eso sólo coincide con esta de aquí. Pero ¿y si el curso no es JavaScript para principiantes? ¿ Y si estás tomando otro curso mío llamado Javascript essentials? Bueno, necesitas poder manejar eso. De hecho, ¿y si qué pasa si alguien escribe en algo que no es esto mientras necesitas una declaración else ? Entonces si algo más hace algo más y realmente se reduce a algo como esto. Se puede leer esto como una frase para hacer algo de espacio aquí. Y se podría decir, ya sabes, si el curso es javascript para principiantes, haz algo de otra manera o haz algo más. Y de hecho, esto es interesante, porque si dijimos esto, esto es pitón. La señora Python envió sintaxis. Y así, al aprender la sintaxis javascript aquí ya algo familiarizado con la sintaxis de python. Entonces no, tus habilidades y python o tus habilidades y javascript más bien están dando sus frutos porque estás aprendiendo a aplicar la lógica en otros idiomas. Simplemente se ve un poco diferente, pero sí, así es como funciona. Y así en realidad puedes leer esto como una frase si los cursos javascript para principiantes hacen algo. Pero si no lo es, haz otra cosa. Eso es todo lo que es. Y así el mundo de la programación realmente sólo está conformado por, si lo demás declaraciones. Es un montón de si las declaraciones l y ah, híbrido de ambos llamados y si en otro lugar, sino f dependiendo de tu idioma. Entonces si esto es JavaScript para principiantes, agreguemos agregar. Ah, mensaje de bienvenida. Y si no lo es, digamos que estás en el rumbo equivocado. Bueno, necesitamos algo que hacer aquí, Así que esa es una H one. Vamos a darle a esto un nombre de texto y i d de texto y necesitamos agarrar un nodo aquí. Entonces vamos a agarrar este nodo. Vier texto es igual a documentos punto get element by i d text. Y luego, digamos texto punto html interno es igual a Es demasiado fuerte. Bienvenido. Es así de fuerte a JavaScript para Vamos a hacer otros principiantes fuertes. Y ahora estamos escribiendo un html dentro de su JavaScript. ¿ Y qué pasa si no lo es? ¿ Verdad? Bueno, podríamos hacer esto y simplemente copiar aquello, porque no quiero volver a escribirlo todo de nuevo. Podríamos decir que estás en el rumbo equivocado y ver esto. ¿ Qué curso estás tomando? De acuerdo, bueno, digamos que estoy tomando otro curso que he llamado javascript Essentials. Sí, porque estoy en el rumbo equivocado porque no estamos en los elementos esenciales de javascript. De hecho, para el que estoy es JavaScript y eso realmente se estropea Una vez que lo pongas todo en mayúsculas o la última palabra va a ser mayúsculas. JavaScript para principiantes. Bienvenido a JavaScript para principiantes. Y si vemos nuestra fuente aquí, en realidad no parece realmente que sea audaz, pero lo es. Ahí tenemos un elemento fuerte. Tenemos un elemento fuerte aquí y texto regular aquí. Entonces ahí vamos. Y así es como lo haces en, if else statement. Entonces básicamente, estás diciendo: Oye, Oye, si esto es cierto, si de hecho estamos en JavaScript para principiantes, ejecutar esto de lo contrario no importa realmente cuál sea la respuesta. Estamos diciendo cualquier otra respuesta en el mundo, ejecute esta línea. Entonces, adelante. Dale un tiro a eso. Vas a necesitar saber cómo hacer esto para nuestro mini proyecto que se acerca. Definitivamente vas a necesitar saber cómo hacerlo si sentencia else y en este momento , si te quedas atascado con esto, no lo olvides, siempre puedes dejar una pregunta abajo. Siempre estoy aquí para ayudar 15. Proyecto mini n 2: Bienvenido a tu segundo mini proyecto. Este tiene que ver con los operadores de comparación. Por lo que espero que hubieras visto los dos videos anteriores en este proyecto de muchos. Lo que me gustaría que hicieras es pedirle al usuario un tú Earl, y luego comprueba si ese enlace empieza con http. Y si no empieza con http, quiero que arregles ese enlace. Así que arregla la variable y luego inyecta eso como enlace a la página. Y así, para la parte número uno, vas a querer usar prompt para la parte número dos, vas a querer usar sub string. Parte número tres es que vas a querer usar y si tal vez si otra declaración o declaraciones y luego parte número cuatro, vas a querer agarrar un nodo de elementos HTML y cambiar el dedo del pie HTML interno, tener más html dentro de él. Voy a hacer este proyecto justo frente a ti también en el mismo video, pero creo que sería mejor si pudieras pausar el video ahora y solo darle una toma tú mismo . Llegar lo más lejos que puedas y entonces sabes qué? Si te atascas, solo reanudas el video y puedes ver exactamente cómo termino haciéndolo. Así que adelante, haz clic en Pausa. Dale una oportunidad y te veré en tan solo un par de minutos cuando llegues a Currículum. De acuerdo, Entonces el primer paso fue que necesitábamos pedirle entrada al usuario. Entonces vamos a crear un guión aquí donde ponemos nuestro JavaScript y eso es un incendio. Tú donde l es igual a pronta. Entra a u R l lo que sea que vaya a ser. Y así solo haremos esta pieza por pieza. Aquí me refrescaré. Enter, Estás fuera y podría hacer codificación para todo el mundo dot com no hace nada como se esperaba. Entonces sólo tenemos una chica en una variable, pero en realidad no hemos hecho nada con ella. Sigamos adelante y pasemos al paso número dos. Veamos si comienza con http o si no comienza con http así que podemos decir si eres propio punto sub cadenas hasta cadena 04 así comienza en el carácter cero, que es uno en lenguaje informático. Subir al cuarto carácter es igual a http entonces es bueno y podemos consola log que podemos decir Consejo no registre el euro es bueno, De lo contrario necesitamos arreglarlo. Tan cónsul puntó Warren y tan malo tú, Earl Bad, Malo. Estás enfermo. Adelante. Dale una oportunidad a esto Así voy adelante otra vez. Cualquier tipo de codificación para todo el mundo dot com y no se recomienda salir caliente si estabas gritando en la pantalla. Uh, sí, esa es una buena decisión. Es diversión desgastada. De hecho, uh, codificar para todo el mundo dot com es intentar esto otra vez y dice, Malo eres. Bueno, ¿y si refresco la página y digo H T T p Golin slash slash revestimiento para todo el mundo dot com y dice que la chica es buena? De acuerdo, entonces tenemos una declaración de Working if else aquí. Entonces si la u. R L es buena, realmente no necesitamos hacer nada. Pero si la u. R L es mala, tenemos que arreglarlo. Entonces sigamos adelante y arreglemos esto. U R l ahora lo vamos a arreglar diciendo la u. R L es igual a http colon slash slash y entonces sólo vamos a contaminar al resto de la chica. Sí, podemos deshacernos de estos troncos del Cónsul si queremos. ¿ Realmente no están haciendo nada en. El último paso fue que necesitamos seleccionar un elemento HTML por su i d y cambiar el HTML interno para tener un enlace en él. Entonces sigamos adelante y hagamos eso. Ahora vamos a crear un párrafo. Digamos que este es el enlace y vamos a crear un lapso vacío aquí Eso se llama Link no va a haber nada ahí dentro. Entonces cuando actualizamos la página, ves cancelar. Simplemente dice Este es el enlace que en realidad podemos ver que incluso tiene un aire tipo no capturado no puede leer propiedad sub string de No, porque no hay nada ahí dentro. Eso es lo que pasa cuando hacemos click. Cancelar. En este punto, deberíamos tener algo de trabajo. Estás asumiendo que realmente escribes algo ahí dentro, y entonces solo tenemos que ponerlo aquí. Entonces vamos a agarrar ese nodo. Hagamos var El nodo de enlace es igual a o supongo que es un span notas. Ah la nota SPAN es igual al documento. Obtengo elemento por i D y acaba de llamar Enlace y vamos a seguir adelante y poner span nodo punto HTML interno es igual a la URL, por lo que casi estamos ahí. Adelante y digamos codificación para todo el mundo dot com. Se lo arregló para mí. Enfriar. Pero en última instancia, eso no es exactamente lo que estamos buscando. En realidad queremos que esto sea un enlace a la codificación para todo el mundo dot com. Entonces necesitamos poner esto en algún HTML y aquí es donde es bebida y viene Cat Nation Así podríamos hacer esto de un par de maneras diferentes. Podríamos decirlo todo en una línea. A h r E f es igual a y luego cerrando. Y entonces podríamos entrar ahí y podríamos decir Contaminar esto y podríamos poner aquí la U. R L. Y entonces también podemos contaminar aquí con la chica. Y así esto funcionará recubrimiento para todo el mundo dot com. Y cuando hago clic en él y en realidad se puede ver que dice, citando para todo el mundo dot com, boom carga el sitio. Eso es bastante bonito. O si quisieras escribir algún código un poco más limpio, también podríamos decir que HTML creará una nueva variable llamada HTML y de esta manera Tenemos nuestro HTML en una nueva línea, y simplemente no se ve tan lleno por lo que podemos hacer lo mismo aquí. No podemos decir google dot com y no nos lleves a http google dot com En realidad hay un atajo. Ah, actualmente tenemos una declaración if vacía. Entonces como, ¿por qué hasta escribir eso? Entonces lo que podríamos decir es que podríamos saltarnos todo esto. Deshaznos de la declaración else y obtenemos, digamos, si no es así comparar algo para asegurarnos de que es verdad, dices a signos iguales, decir algo no es cierto o no lo mismo. Más bien, usted dice, exclamación signo igual. Y eso dice no lo mismo. Entonces, solo acerquemos y se ve así, no lo mismo. Y entonces lo que estamos diciendo aquí es que si la chica del 1er 4 caracteres no es http, asegúrate de que sea http. Y luego nos deshicimos de esa otra declaración. Entonces ahora estamos diciendo, básicamente, si no comienza con http, necesita así sobrescribir el euro. Vamos a darle una oportunidad a esto. Vamos a entrar aquí, refrescar. La última vez, qué lado queremos ir a ti. Vamos a facebook dot com y bam, eso funciona. ¿ Y si ya ponemos http ahí dentro? Ya sabes, una copia y pega Eres todo lo que ya está en su http YouTube Elcom. También está funcionando, así que todo está bien. Esto está funcionando perfectamente bien. Y así es todo el proyecto de muchos. Y entonces lo que usamos es pronta. Utilizamos una declaración if. En realidad, usamos una declaración else técnicamente, y luego como que combinamos eso en una sola línea. Hablaremos más de esto un poco más tarde. No tenías que saber eso de arriba de tu cabeza. Después agarramos nuestro SPEN y luego le inyectamos HTML. Además, en realidad podríamos hacer esto. Podríamos revisar para ver también, si alguien ha cancelado. ¿ Qué es eso que estás fuera? Bueno, que eres l es igual a saber tipo de nueva URL es un objeto. Y así sabemos que esto va a ser algún tipo de tipo de datos, y en realidad tal vez no lo sepas Y eso está bien. Realmente no necesitas saber que lo que voy a hacer es mostrarte algo bastante genial, en mi opinión. Por lo que podríamos decir si la chica es igual a conocer Alerta, Cancela esto rápidamente porque no queremos que se ejecute. Entonces sigamos adelante. Cancelen esto rápidamente porque no queremos que se ejecute. Y así podríamos decir en realidad si la chica es igual a saber, entonces cancelar esto más y luego podríamos envolver todo lo demás en esa declaración más es ahora estamos diciendo que si básicamente nadie ha hecho clic en consejo, estamos bien. Pero si alguien tiene consejo rápido, vamos a decir alerta a esto, vamos a decir, cancela esto rápidamente. De hecho, en realidad, lo que podríamos hacer es que no podríamos hacer absolutamente nada o podríamos hacer punto de consola alguna vez falta entrada. De lo contrario, si alguien puso algo ahí dentro, entonces podríamos hacer una declaración if aquí. Y entonces podríamos hacer el resto de nuestra lógica. Y así vamos a seguir adelante y darnos un golpe de tiro. Cancelar entrada faltante justo como esperábamos que lo hiciera. Entonces ahí lo tienes. Ese es tu mini proyecto número dos. Hice un montón de cosas aquí que no esperaba que supieras por ejemplo, si eres yo es igual saber. Sí, como que acabo de sacar eso de un sombrero. ¿ Aún no sabías de eso? El si no declaración. Tampoco sabías nada de eso. Eso está bien. Estamos aprendiendo cosas juntos al mismo tiempo. Vamos a repasar todas estas cosas un poco más tarde por el camino a y me gusta como que solo caiga en algunas de estas. Yo los llamo Nuggets de Oro. Apenas estos pequeños indicios de cosas un poco más avanzadas en el interior del código. Eso ya tiene sentido. Por lo que constantemente te estás empujando. No te estás presionando demasiado. Ahora, no lo olvides, siempre puedes poner esto en un bolígrafo de código. O, ya sabes, podrías simplemente tomar una captura de pantalla como la que tengo aquí. Tienes tu editor a la izquierda, y tienes tu navegador a la derecha, y podrías tomar capturas de pantalla y compartirlo en tu proyecto de participación de habilidades. 16. Manejo de casos especiales: bien. Sabemos un poco de los operadores de comparación y cómo manejar algo que es retornos verdadero. Y algo que devuelve falso. Sabemos que son, si declaraciones y declaraciones de lo contrario. Pero ¿y si queremos igualar más que eso? ¿ Qué? Podríamos hacer algo así. Ya sabes, si nuestro nombre es igual a Caleb y entonces podríamos decir si nombre es igual a Caleb, haz algo aquí dentro, ¿de acuerdo? ¿ Y si no es Caleb? Bueno, ¿y si el nombre es Zephyr? Bueno, entonces tendríamos que hacer si nombre es igual a un Zephyr. Pieles alguna vez acción aquí y luego tenemos una declaración else. ¿ Y si el nombre no es Zephyr? ¿ Y si tampoco es Caleb Wars alguna vez? ¿ Y si el nombre si el nombre es igual a Henry Henry Action aquí más? ¿ Y si el nombre no es Caleb Zephyr o Henry? Y esto sigue y sigue y sigue y sigue, y simplemente se pone realmente asqueroso. Quiero decir, incluso mirando esto ahora mismo, es una especie de que parece un poco confuso a simple vista. Simplemente lo miras y te vas. Eso es mucho anidar, y esto podría seguir para siempre y para siempre. Por suerte, hay una mejor manera de manejar esto. En el mundo de JavaScript, realidad hay dos formas en las que podemos hacer esto. Te voy a mostrar el camino principal. la forma más común. No te mostrarían otro camino. Eso es un poco menos común, pero también un súper útil. Entonces lo que podemos hacer es si el nombre es igual a Caleb. Genial. Ya sabes, consejo no registro impresionante. De acuerdo, también podemos hacer otra cosa si el nombre es igual a Zephyr y luego nos dan, digamos , Council dot log no. Y entonces podemos decir otra cosa si nombre es igual a Henry Cónsul, ese log poco me. Oh, porque es un gatito. Y por último, si no es Caleb o Zephyr o Henry consejo dot warren no manejó algo así. Y vamos a seguir adelante y darle un refresco a esto, y podemos ver que dice impresionante en tu vamos a hacer eso más pequeño. Y si cambiamos ese nombre por Zephyr, me dice. Ah, si cambiamos ese nombre por Henry, sabemos que va a decir la pequeña Meo porque eso es lo que escribimos. Un poco meo y Si lo cambiamos a alguien más, cambiémoslo a perro. Oh, perro, no se maneja. Y así es como nos alejamos de anidar si las declaraciones dentro de si las declaraciones dentro de si, podemos mantenerlas bonitas y planas así. Y de hecho, mi editor y la mayoría de los editores te permitirán hacer esto porque tienes corchetes rizados aquí en realidad puedes cerrarlos. Y así ahora en realidad se ve mucho más limpio. Se puede realmente se puede leer esto. Si el nombre es igual a Caleb, va a hacer algo. Si es igual a Zephyr, haz algo, Henry, haz algo, o si es otra cosa, haz otra cosa. Y así si alguna vez estás mirando a través de un montón de código, estás como, Ah, ¿qué pasa si el nombre es Zephyr? Acabas de abrir esa comida de registro de consola. Y así es como nos alejamos de un anidado. Si las declaraciones ahora en Javascript, hay otra forma de hacer esto, y muchos otros lenguajes tienen esto también. Se llama declaración de cambio. Ya no lo ves con demasiada frecuencia, pero definitivamente es algo en lo que puedes apoyarte siempre que tengas un montón de, si lo contrario si las declaraciones. Entonces solo dices switch y le das una variable, lo que sea que va a ser corchetes rizados y luego le das un caso. Entonces el caso va a ser Caleb. Y entonces si el caso es Caleb, se podría decir consejo dot log uh, Caleb. Y luego decimos break. Y esto es como una declaración if Onley en lugar de usar llaves, usaban un colon. Y en lugar de este corsé rizado, estamos usando la palabra break. En realidad veremos que la palabra se rompa mucho más cuando lleguemos a bucles de alambre. Cuatro bucles para cada bucles, cosas así ahí podríamos darle otro caso. Cualquier otro nombre que pudiéramos decir, Nathan cónsul dot log. Hola, Nathan break. Y entonces podríamos decir eso y así sucesivamente y así sucesivamente. O si solo quisiéramos atrapar cualquier otro escenario, podríamos decir simplemente consejo por defecto dot advertir no manejado y romper. Sigamos adelante y cambiemos de nombre. Eso son cambios a miembro de la familia. Y vamos a crear Var. Miembro de la familia es igual para empezar con Caleb, yo seré yo y dice: Hola, Hola, Caleb. Y luego si lo cambié a Nathan Hola, Nathan. ¿ Y si lo cambiara a Wade? No se maneja el 9 22 así, no se maneja la línea 22. Entonces esta es básicamente la misma forma de hacerlo. Y si otra cosa si la afirmación a algunas personas les gusta de esta manera, algunas personas les gusta el si else if way, personalmente, me inclino hacia el si else if else way, simplemente parece un poco más explícito. Y no todo el mundo sabe de la funcionalidad del switch. Por lo que puede ser un poco más difícil para alguien que nunca ha visto una declaración de cambio como esta antes averiguar qué está pasando, mientras que cada programador con el que te encuentres sabrá sobre si else if y else declaraciones. Y así una cosa a tener en cuenta aquí es que se va a tratar de igualar ese primer caso y parar. Entonces lo que estamos diciendo aquí es si el familiar es Caleb, consola, log alto, Caleb, y luego parar. No hagas ninguna de las otras, igual que aquí abajo. Si el nombre es igual a Caleb, entonces sólo ejecuta éste. Pero no lo es. Entonces se va a tratar de hacer. ¿ Este no coincide? No. Entonces va a tratar de hacer éste. ¿ Eso coincide? No. Entonces se va a hacer la declaración else. Y esta declaración L es en realidad opcional. No hace falta tener eso en su se puede decir si el nombre es Caleb Palabras que para, o Henry tomó medidas. Y si es otra cosa, no hagas nada en absoluto. Podrías totalmente bien eso Así que lo que me gustaría que hicieras por algunas manos sobre la experiencia aquí es correcto. Y si otra cosa si la afirmación no tiene que ser grande, no tiene que ser complejo, ya sabes, igual que algo. Lo que tengo aquí, sólo un montón de registro de consola. Eso está totalmente bien. Solo quiero que consigas algo de experiencia con la sintaxis else if y realmente, cuando se reduce a esta intacta, simplemente parece que alguien agarró una declaración If como esta de aquí arriba y en su declaración else , simplemente lo pegaban. Eso es todo lo que es darle un tiro a eso. No olvides divertirte un poco con él, y cuando termines con eso, pasemos a la siguiente lección. 17. Comentarios de código: De acuerdo, Bienvenido de nuevo a otra lección sobre el aprendizaje de JavaScript. Ahora vamos a hablar de comentarios de código, generalmente, generalmente, en un curso, pongo primero los comentarios de código, pero francamente, son aburridos. Desafortunadamente, también son súper útiles, y tiene sentido aprenderlas. Y así que quería postergar eso y llegar a algunas de las cosas del financiador antes de que nos metamos en, Ya sabes, cosas que no son tan divertidas como los comentarios de código. Entonces en este punto, si no sabes qué es un comentario de código, deberías estar preguntándole a Caleb. ¿ Qué es un comentario de código? Bueno, un comentario de código es básicamente una forma de tomar un pedazo de código que has escrito y decirle a tu navegador que no lo ejecute. Por lo que aquí tengo un ejemplo. Comentario de registro de consola. Un extremo a y si refresco mi página, sólo veremos comentario. Uno y dos. De hecho, hagamos que dos aparezcan cuatro veces a un comentario uno y luego 222 y dos. Entonces digamos que tenemos un montón de código aquí en una línea y no queremos que se ejecute en absoluto. Nosotros decimos, Hey, javascript, no lo ejecutes y Todo lo que hacemos es poner una slash con otra slash juntos, y eso crea un comentario de una sola línea. Entonces si guardo esto y refresco comentario, ya no aparece uno aquí. Ahora, cuando se trata de comentarios de varias líneas, mayoría de los editores se puede golpear como un comando slash shorts como CMD más Slash. O si estás en Windows, generalmente es control slash algo así, y puedes seleccionar todas estas líneas y puedes comentarlas todas al mismo tiempo. Pero eso no es un comentario de varias líneas que esté comentando cada línea individualmente. Entonces si quisiéramos deshacernos de todos ellos, haríamos slash y luego un asterisco, y luego al final haríamos un asterisco y luego una slash, y esto comentará todo entre estos dos puntos. Y así si quitas el espacio, verás que mi código se pone gris, y eso va a seguir adelante para siempre y para siempre y para siempre. Entonces si hago consejo, se puede ver que mi código sigue siendo gris año cónsul dot log. ¿ Aparezco y vamos a deshacernos de ese? Oh mira eso. En realidad hay un error de sintaxis porque el comentario nunca se cerró. Pero si hacemos asterisco y luego un corte justo después de ese dicho, Hey, Hey, todo entre aquí acaba de comentarlo. Así que ahorra refrescante. ¿ Aparezco? Sí, sí lo haces. Sí te presentas porque todas las demás líneas Air comentó. Entonces veamos nuestra fuente de página y podemos ver aquí hay un comentario, y hay un comentario, un comentario de varias líneas aquí deshaciéndose de todo el número dos. También puedes comentar el final de una línea también. Entonces en lugar de solo tener un comentario al principio, podrías tener un comentario después de él para que pudieras guardar nuestro nombre es igual a Caleb. Y luego, si querías hacer una nota de código un comentario de código cuando pones dos barras después y dices, Este es mi nombre y eso tampoco se va a ejecutar. Pero como alguien como otro desarrollador mira a tu Cohen dice nombre Var. ¿ Qué se supone que es eso? ¿ Qué tipo de nombre se supone que es el nombre de una persona y decir Este es mi nombre? Está bien, bueno, sé que ese es el nombre de los desarrolladores ahora, así que puedo refrescar. Y solo dice que cada vez que me refresco, ¿me presento? Sí, sí apareces. Y cuando refresco este nombre var es Caleb y vamos a asegurarnos de que siga funcionando eso va aquí y escriba un nombre. Se llama Caleb ja ja ja. Mira eso. Y nada de aquí a la derecha de tus barras dobles no va a aparecer. Eso se va a comentar. Así que avanzando, me vas a ver haciendo muchos más comentarios de código. Esta es una muy buena forma de escribir un montón de código que en realidad no necesita ejecutarse , y también es una muy buena forma de, igual que probar las cosas. Entonces si quieres un cónsul largo algo y no estás seguro si lo vas a usar más tarde , solo comentó o un comentario comentario poco común para comentar comentario. Eso es todo lo que hay para codificar comentarios no súper súper interesantes como tema sobre el que aprender , pero muy , muy importante, y vas a ver esto por todo el lugar en cada lenguaje de programación, verás comentarios de código en todas partes 18. Introducción a la Arithmetic: Está bien, hablemos un poco de aritmética. Entonces, básicamente, esa es solo una palabra elegante para matemáticas. Ya sabes, suma de división de multiplicación, resta encendido. Entonces tienes cosas como módulos, que es resto y exponentes, y eso es realmente todo lo que hay para ello. Y luego, ya sabes, hay algunas funciones extra en las que podríamos meternos para, como, firmar y co firmar. Y sólo estoy bromeando. No vamos a hacer todas esas cosas. Solo vamos a trabajar con las cosas básicas por ahora. En realidad, eso es realmente todo con lo que vamos a trabajar en absoluto, porque cuando se trata de codificar cuando se trata de programación, resulta que la mayoría de nosotros los codificadores aire. En realidad, somos un poco perezosos, y no nos interesa escribir todo tipo de matemáticas complicadas. No queremos meternos en el cálculo y los algoritmos y cosas así. Sí, los algoritmos son una palabra de moda, y es divertido hablar de eso. Pero al final del día, ¿queremos estar pasando ocho horas al día escribiendo que honestamente sabemos que la mayoría de nosotros no. Y lo bueno del recubrimiento es que no tienes que hacerlo. Puedes salirte con la tuya con una simple, simple matemática. Y así en este video, vamos a aprender un poco. Ya sabes, algo de la aritmética básica detrás de JavaScript y realmente, sólo nos vamos a quedar con la multiplicación suma, resta y división. De acuerdo, así que sigamos adelante y vamos a crear una variable aquí. Entonces tenemos variable Número uno es igual a 100 entonces tenemos variable. Dos es igual a no sé, digamos 33.5. Honestamente solo estoy inventando números en este punto. Ahora. Si queríamos hacer, digamos, dividir estos números, digamos que queríamos dividir 100 por 33. Podríamos hacer entumecido uno dividido por entumecido a y en realidad se puede ver que me va a dar el número exacto aquí abajo. Y así esta es la división. Es sólo una faja. Eso es todo lo que es. Y si quisiéramos multiplicar estos números, es sólo el asterisco. Entonces lo haces, Ah, turno y luego el número ocho y obtendrás un asterisco, aunque en algunos teclados eso podría ser un poco diferente. Pero en un teclado estándar, es turno ocho para conseguir ese asterisco, y vas a hacer la resta de multiplicación es solo un guión, y la adición es solo un signo más, y eso es todo lo que hay para ello. Y honestamente, es muy, muy raro usar algo más avanzado que eso. Ocasionalmente nos meteremos en algo como el Módulo ISS, que te dará el resto de algo. Entonces si hicimos 10 módulo ISS tres bien, 10 dividido por tres va tres veces y luego hay un resto de unos que fue 369 y luego 10. Menos nueve es uno. Entonces básicamente es solo recordar Long Division. Bueno, es así. Y entonces ese es el resto. Y entonces también tenemos exponentes, que es sólo para multiplicar signos juntos. Ahora hay una regla. Cuando estás trabajando con fórmulas más grandes, también quieres tenerlo en cuenta. Ah, la regla de la masa de cama y en realidad es un acrónimo diferente para varias áreas diferentes del mundo. Pero la forma en que lo recuerdo es la masa de cama. Tienes corchetes, división de exponentes y luego multiplicación, y luego suma suma adicional, resta de slash, lo que venga primero sub. No sé deletrear esa aparentemente sub atracción, Y así la idea aquí es siempre que tengas matemáticas avanzadas No es realmente avanzado, pero es un poco más avanzado. Supongo. Hay un orden de operaciones y es desorden de la cama. Entonces cada vez que veas corchetes, haz primero tus corchetes , haz primero las matemáticas dentro de eso, luego los exponentes dentro de esos corchetes, luego división y multiplicación, lo que venga primero de de izquierda a derecha, y luego suma o resta, lo que venga primero de izquierda a derecha. Entonces un ejemplo de esto sería si quisiéramos averiguar qué es 30 grados centígrados en Fahrenheit para que pudiéramos hacer Celsius es igual a 30. Y luego averiguar cuál es la respuesta. Bueno, podrías dio ver el 1.8 plus 32 del tiempo y en realidad deshacerse de Ver, Eso debería previsualizar para nosotros. Ahí vamos. Entonces es 86 F Ahora. El orden de las operaciones donde esto se hace importante es que lo hicimos al revés más 32 veces , 1.8. Teníamos un número ligeramente diferente, y si bien eso no es gran cosa, solo hay 1,6 grados de diferencia en, ya sabes, las temperaturas climáticas regulares. Si estuvieras a 1.6 grados de distancia en un círculo, eso podría ser significativamente diferente especialmente si estás tratando de apuntar un telescopio a tal vez una estrella en particular. Bueno, vas a extrañar mucho eso. Y así esto es sólo un ejemplo sencillo. Pero tu orden de operaciones es importante. Y así esto es lo mismo que, ya sabes, hacer primero tus corchetes. Entonces tienes C, que es 30 multiplicado por 1.8 más 32. Y así va a hacer esto primero y luego lo que sea, va a sumar 32 encima. Y así que ese es un curso de choque súper rápido en álgebra básica. Simplemente se simple orden de operaciones. Y de nuevo, realmente no necesitas saber demasiado sobre esto porque en su mayor parte, no hacemos muchas matemáticas hasta que nos metemos en, como, el realmente apacible de algo súper complejo. Y para la mayoría de nosotros, eso no sucede. Entonces esta fue tu introducción a la aritmética. igual forma un resumen rápido. Aquí tienes num uno dividido por entumecido a Así que tienes un cartel de división aquí. La multiplicación es tu asterisco. La resta es sólo un guión. Simplemente el signo de restar y luego el signo más a agregar. Y si querías módulo iss. Podrías usar el signo de porcentaje. Y si lo quieren y exponentes, no tengo idea de qué va a ser de utilidad esto. Sí, como un número realmente grande. Utilizas dos asteriscos uno al lado del otro, por lo que parece multiplicar, multiplicar, que es exponentes. 19. Logía de Boolean: Muy bien, vamos a presentarnos a un nuevo tipo de datos llamado el booleano, y ves que aquí y otra vez, esto es sólo un término de programadores de lujo para o algo es cierto o es falso. Eso es todo. Es uno o cero, verdadero o falso, encendido o apagado blanco y negro día y noche. No hay en el medio. Y ya sabes cómo la gente siempre piensa que robots o máquinas solo piensan en blanco y negro . Bueno, no están del todo equivocados porque mucha lógica sí se reduce a verdadera y falsa, y no hay mucho de dar entre su ahora debilitarse. Ya sabes, cuando se trata de aprendizaje automático, podemos dar una respuesta como 0.6, y eso se inclina más hacia lo verdadero que lo falso, y podemos trabajar con eso. Pero eso no es lo mismo que la lógica booleana. Sabemos que 0.6 es un número, y la Lógica Booleana es verdadera o falsa, por lo que podemos trabajar con nosotros de algunas maneras diferentes. Pero ante todo, sigamos adelante y creemos un guión, y en este guión, sigamos adelante y creemos una variable booleana. Entonces es creativo. Variable es cat es igual a true. Y así hablemos de mi gato Zephyr. Y podemos decir: ¿ Mi gato es un gato a verdadero o falso? Y así podríamos decir en una comparación Operador es gato, y así en realidad podemos hacer esto. Un par de formas que podemos hacer es Cat es igual a cierto, que es la forma más explícita de escribirlo. Pero eso es algo innecesario, porque cuando haces cualquier tipo de operador de comparación, siempre está revisando para ver si esa declaración finalmente resulta ser cierta. Y si bien esto ya es cierto, así que podríamos acortar esto y sólo decir es gato. Era un registro de punto de consola. Zephyr es un gato, y sigamos adelante e inspectores y abramos nuestro Consejo Consejo Consejo. En realidad está conmutada en la parte inferior. Aquí vamos, y dice que Zephyr es un gato, y si queríamos que esto fuera falso, podríamos simplemente decir: Oye, Oye, ¿ sabes qué es falso gato? A lo mejor me dieron un perro y lo llamé Zephyr también. Y no va a aparecer nada, Sin embargo, porque sabemos de la otra declaración ahora podemos decir Council dot log no es un gato y ahí vamos. Y ahora sólo podemos hablar de verdadero y falso es un gato no es un gato. Podríamos incluso llegar a complicarnos mucho más con esto si quisiéramos. Y podríamos pedirle al usuario un nombre así podríamos decir de nuestro nombre es igual a prompt y su nombre Si nombre punto a minúscula es igual a vamos a hacer que más pequeño es alguna vez es gato es igual a verdadero. Vamos a seguir adelante esta noche en un virus. Bueno, lo contrario vamos a salvar nuestro es gato es igual a falso y yo estoy realmente casi tirando punto y coma aquí. No son necesarios, pero buena práctica para estar en todos modos porque todo JavaScript, una vez compilado en producción se pone Min ified y squished, y todo se convierte en una sola línea de javascript y así eventualmente pone punto y coma ahí todos modos, por lo que es una buena práctica tener, pero no siempre necesaria. Y entonces podríamos decir aquí, ya sabes, en realidad, realidad, en la vida real tendríamos alguna otra lógica y aquí, basado en la variable, es gato. Y entonces podríamos decir si es alerta de gato. Eres un gato gatito. Y ya tenemos un inmune a Miami. Alerta. No eres un gato. No eres un niño. Se metió en absoluto. De acuerdo, entonces me refresco. Y si caminamos por esto me va a pedir el nombre a tu nombre. De acuerdo, voy a teclear es Zephyr. Voy a deletrearlo, ¿verdad? Ese esfuerzo, y se va a tomar ese nombre en minúscula y comprobar si coincide. En minúsculas siempre. Entonces me pegué. OK, y dice que tu gato dice Va adelante. Dice él Está bien, aquí hay variable. Es Cat es igual a verdadero. ¿ Alguna lógica alguna otra cosa mágica detrás de las escenas y luego con otra declaración If , si es una alerta de gato, eres un gato. Y así esa es tu introducción base en la lógica booleana. Ahora hay otra forma de hacer esto. En realidad podemos atajar el If y Ellis. Entonces sigamos adelante. ¿ Y sabes qué? Sí, vamos a quedarnos con eso. Eso me gusta. Eso está ahí dentro. Eso está haciendo que nuestros programas sean un poco más complicados, por lo que también podemos atajar la declaración if else. Entonces si solo quisiéramos comprobar si algo era falso. Podríamos hacer. Si es. Gato es igual a falsa alerta, no un gato. Entonces sigamos adelante, y le voy a dar a esto un default también, para que no tenga que asumir esto una y otra vez. Zephyr. Eres un gato que está ejecutando la línea 21 aquí abajo. Y nada porque no era falso, así que esto no se ejecutó. Pero ¿y si dijéramos Henry, mis otros gatos? Dice No eres un gato que ejecuta la Línea 23 también va a ejecutar las líneas 27 a 29 dice que no un gato. Eso es justo aquí. Ahora también podemos atajar esto de la misma manera que lo hicimos. Si es gato, podemos hacer lo contrario diciendo, El trabajo de exclamación es gato. Esto es decir falso. Entonces sigamos adelante. Y lo que voy a hacer aquí es que sigamos adelante y pongamos estos en líneas separadas. Vamos a subir eso para que realmente lo puedas ver. Entonces esto también va a ser falso. Entonces esto es básicamente decir Si el gato es falso, saquemos eso. Si es así, gato es falso. Eso es lo que esto está diciendo aquí también podrías, si quisieras, Podrías decir, Si es gato no iguala verdad, sólo será alguna vez verdadero o falso. Entonces si esto es falso que esto, es el bloque falso para ejecutar, ejecutar. Y así existen varias formas diferentes de hacer esto. Generalmente, la forma más común de que vas a ver esto en la naturaleza es si es gato porque eso es falso. Es el camino más corto a la derecha si no es un gato, y entonces si nos dirigimos a nuestro consejo aquí tenemos una variable llamada Is Cat. Es falso. Y si hacemos tipo de es gato, vamos a ver que ahora es booleano. Una cosa me salté que no quise saltar fue cuando tienes un booleano donde oímos VAR es, gato es igual a verdadero o falso. No lo ponemos entre citas como esta porque esa es una cadena que no es lo mismo verdadera o falsa. Una cadena puede ser cualquier número de caracteres letras que puede mezclar y hacer coincidir espacios y caracteres especiales y todo lo que Boolean no puede un booleano sólo puede ser verdadero o falso. Y así este es un, creo, un curso bastante bueno hacia la lógica booleana. Realmente no se complica más que esto. La parte más complicada es cuando ves si declaraciones como esta. Entonces si es gato cuando tu primera mirada a esto, Si nunca has visto una declaración if antes, probablemente estés pensando, ¿Qué significa eso? Bueno, esto es decir que es verdad Y si alguna vez ves si el signo de exclamación es gato, eso es lo mismo que decir si el gato es falso para que lo sepas, agradable y simple así. Lo que me gustaría que hicieras, sin embargo, es que ya sabes, solo juguetear con esto se hace una idea de cómo funciona la lógica booleana y simplemente crear algunas sentencias si else usando la lógica booleana, vas para ver miles de millones cada día. Es la forma más rápida de obtener una respuesta de sí o no. Y una cosa más antes de irnos. lógica booleana también puede ser representada por unos y ceros. Casi en realidad olvidé que ese es uno importante aquí. Bajemos por aquí, hagamos algo de espacio. También podríamos decir que lejos es gato es igual a uno, por lo que esto es lo mismo que cierto, y Var es gato es igual a cero. Esto es falso, y esto funciona en casi todos los lenguajes de programación. Si es Cata porque esto será cierto. O también se podría decir, Si es gato y eso va a ser falso, algo en esas líneas y que va a funcionar totalmente para ti. Entonces tal vez también darle un tiro a eso. Intenta asignar una variable a true o false, y luego intenta asignar la variable 21 o cero y simplemente juega con algunas sentencias if else . 20. Hacer las listas con Arrays: Hola y bienvenidos de nuevo en este video, vamos a hablar de algo llamado Array. Ahora, con todas las cosas relacionadas con el desarrollador y array es solo un término de fantasía para ah list. Eso es todo lo que es. Simplemente vamos a crear ah, lista de variables puede ser, ah, lista de cadenas, ins booleanos. Podríamos hacer una lista de listas si quisiéramos. Y en algunos idiomas, como Python, incluso en realidad lo llamamos lista. Pero en JavaScript se llama una matriz. Entonces sigamos adelante y hagamos esto más grande porque creo que podemos hacer todo esto sin realmente escribir ningún código en un archivo. Y así una matriz es realmente, realmente fácil de crear, Así que hay un par de formas diferentes de crear una matriz, pero podríamos decir simplemente como una variable R r, una R es igual a. Y luego tenemos un soporte duro de apertura y cierre, y dentro de él, ponemos Tal vez pondré mi nombre y luego una coma y después porque es una cuerda, le pones citas a su alrededor y luego pones el nombre de mi gato Zephyr y luego Akama. Y entonces si quisiera, podría poner cierto aquí como booleano, pero falso. Y hay un booleano que podría meter mi edad ahí dentro. Podría poner al agente de Zephyrs ahí. Ahora nada de esto está mapeado, así que no es realmente comprensible con qué se relacionan realmente todos estos datos. Pero si tuviéramos que cambiar todo esto y decir que son no, no tan llamados a son llamémoslo nombres es igual a una lista de nombres que podríamos decir, Caleb Zephyr, Henry y un perro Oh, no vayamos ahí vamos y solo hit, Enter. Y aunque intentemos volver a acceder a ella, aquí tenemos una lista y dice entre paréntesis que hay cuatro. Eso significa que hay cuatro artículos para que podamos ver. Y aquí tenemos estas cosas llamadas Índices. Estos números aéreos. Es tu valor de índice. Por lo que empieza en cero porque la computadora empieza a contar a cero. Por lo que cero Caleb uno es esfuerzo a Henry tres Perro. Ah, ahora no sólo podemos recorrer todos estos valores diferentes y ya sabes, rendimiento o inacción en ellos, podemos agarrar cada uno individualmente también. Por lo que podríamos decir var. Caleb es igual a nombres y entonces si quería agarrar uno, sólo podría agarrar. Digamos cero. Ahora bien, si eso es un poco confuso, siempre puedes probar esto también en tu consola. Entonces son nombres, y luego tienes tu corchete duro y luego tu número de índice, así que quiero el número cero. Entonces este cero aquí va a coincidir con este cero aquí mismo y se va a decir, Caleb, y si quiero un perro Oh, usaría índice número tres y de nuevo las computadoras empiezan a contar en el número cero a un humano, el número cero no significa nada. No hay nada ahí a una computadora, dicen Computadoras, Oh, el número cero es en realidad un número porque una computadora no entiende el concepto de nada. Técnicamente, sólo entiende que hay un número y es cero, por lo que comienza en el número cero. Entonces si queremos un perro Oh, usaríamos el nombre del soporte duro de matriz y luego el número de índice y luego un soporte duro de cierre. Y podríamos llamar a esto si quisiéramos. Da go es igual a, y entonces podríamos hacer lo que queramos con Douglas para hacer perro mayúscula. Ah, en todas las gorras así. Entonces así es como básicamente creamos una matriz. Hay otra forma de crear una matriz. Podríamos hacer una matriz de números. Llamémoslo entumecimiento es igual a, y podemos simplemente darle una matriz real. Llamamos a Array con una A mayúscula y luego pudimos hacer 1 99 No lo sé, 23 y se puede ver que creó exactamente el mismo objeto. Entonces ya sabes, tienes los corchetes duros por aquí. Tenemos índices aquí para que pudiéramos hacer entumecimiento. Esto se va a poner un poco confuso, pero adormece también. Si hicimos el nombre variable entumecimiento y ponemos el índice de dos ahí dentro se va a mapear al número 23 así que, seguro, sí. Se mapea ahora al número 23. De acuerdo, vamos a aclarar eso y vamos a trabajar con nombres. Si tomamos nombres, nuestro consejo automáticamente nos dice que hay cuatro artículos ahí dentro. ¿ Y si queremos comprobar para ver si en realidad hay cuatro artículos? Bueno, podríamos hacer nombres longitud de punto y esta es una propiedad en los nombres objeto hablará más propiedades y objetos y métodos y todo tipo de cosas complejas un poco por el camino. Pero por ahora, puedes saber que si haces longitud de puntos, vas a obtener el número total de elementos en tu matriz. Y eso es fuerza que cuatro aquí coincide que para su ahora también tenemos una variable llamada Perro. Ah, y esto es una cuerda. Entonces esto es algo así fuera del alcance de esta lección en particular. Pero también podríamos usar la longitud en DA Go para obtener el número total de caracteres. Entonces aquí hay una diferencia. La diferencia de ser los nombres es una matriz, y aquí es donde los tipos de datos es realmente importante que sepamos con qué tipo de datos estamos trabajando. Tus nombres es una matriz, y si usamos longitud de punto se va a obtener el número total de artículos en su mientras que el perro oh es una cadena. Y si usamos longitud de punto, nos consigue el número total de caracteres ahí dentro. Y sólo para que sepamos trabajar con su perro Oh es en realidad Dogg. Ah, así que hay cinco personajes y por eso devolvió cinco aquí ahora. OK, eso es genial. Esa es una matriz. Entonces ya sabes, tenemos dos formas diferentes de crear una matriz que podríamos hacer. A R es igual a una matriz con nuestros artículos ahí dentro. O podríamos simplemente hacer la taquigrafía y usar corchetes duros. Me gusta usar los corchetes duros, pero de vez en cuando uso un R R K. Por qué solo para ser súper explícito, dependiendo del código en el que esté trabajando por eso. Pero eso depende realmente de ti de la forma en que quieras hacerlo. Ni de ninguna manera está mal. Ni caminos, ¿verdad? De acuerdo, veamos agregar algo a una matriz. Entonces tenemos una matriz llamada nombres, y queremos agregar una persona más aquí o un nombre más o tal vez una mascota más. Vamos a seguir adelante y decir nombres dot push y queremos empujar algo en esta matriz. Pongamos la palabra loro ahí dentro, y vas a ver que automáticamente devolvió el número de elementos en la matriz, y si volvemos a tomar nombres, podemos ver que ahí está el perro Henry de Caleb. Ah, y el nuevo padre y el número total de artículos es de cinco ahora, si quisiéramos sacar algo de aquí. ¿ De qué podemos rebanar? Entonces digamos que queríamos conseguir Ah, el 1er 2 ítems aquí que podíamos hacer dos ítems es igual a nombres punto rebanada ¿Por dónde empezar, dónde terminar comenzó? Cero. Y eso, también. Y aquí vamos. Obtenemos dos artículos que obtenemos, Caleb termina esfuerzo. Y así simplemente cortó matriz y algo así simplemente dijo: ¿ Sabes qué?, cortarlo justo por este tipo de línea central. Estás casi línea central y quita a Henry Dog a un padre. En realidad, lo que está diciendo es Copiar a Caleb en Zephyr y poner eso en una nueva matriz llamada dos elementos. Ahora si solo quisiéramos conseguir el último ítem y vas a ver este mucho, también, usamos dot pop, usamos dot pop, y esto es lo mismo en varios lenguajes de programación. Está claro que aquí tenemos nombres y queremos a Parrot. Vamos a seguir adelante y crear una nueva variable llamada Parrot es igual a los nombres dot pop, y eso es todo solo dot pop con paréntesis a su alrededor y ver este Perritt ahora es igual a loro. Si hicimos tipo de padre, y esto va a ser una cadena porque no devolvió una matriz. Acaba de devolver este último artículo del año. Pero más interesante, lo que hizo fue, si escribimos nombres, en realidad se deshizo de los padres. Lo que hizo fue dentro agarrar el último elemento de la matriz, en realidad quitarlo de esa matriz y ponerlo en cualquier lugar. Ahora bien, no necesariamente tenemos que almacenar eso en una variable tampoco. Podríamos hacer nombres dot pop, y esto no va a almacenar el último en ninguna parte. Por lo que el último actualmente es perro. Oh , regresa, perro. Ah, pero no empezamos y variables, así que ya no es accesible para nosotros. Y si escribimos nombres, sólo tenemos tres nombres. Y así esta es una buena introducción a un aumento A. Ponte realmente, realmente poderoso cuando conseguimos bucles de los dedos de Maurin. Entonces, por ejemplo, por cada nombre en nombres nos llega decir hola. Mi nombre es Caleb. Hola. Mi nombre es siempre Hola. Mi nombre es Henry. Nos ponemos justo en tres líneas que una y otra vez. Y si esta matriz tuviera 100 ítems de largo todavía sólo tendríamos que escribir tres líneas de código versus tener que ahora mismo Decir consejo que log. Mi nombre es Caleb, y luego bitácora consulado. Mi nombre es alguna vez considere log. Mi nombre es Henry Constant log. Mi nombre es Perro. Ah, tú entiendes el punto. Entonces y así sucesivamente. Vamos a hablar mucho más de un alza por el camino. Pero por ahora, ahora estás completamente introducido en el mundo de un aumento en el nuevo tipo de datos llamado matriz. Y así como un resumen rápido de lo más importante que puedes saber de una matriz este momento son los índices. Entonces si hicimos esto, abrimos esto. Si quisiéramos conseguir su esfuerzo, ¿cuál en C usaríamos? Usaríamos el número uno. No es el primer elemento, porque el primer elemento es Caleb. Es el segundo artículo. Y así apagamos ponemos cada número por menos uno, porque la computadora empieza a contar a cero. Esa es la llave que llevamos aquí. Por lo que recomendaría encarecidamente que consigas un poco de experiencia escribiendo un aumento. No tienes que hacer mucho con ellos. Podrías simplemente crear una matriz simple con nombres y luego tal vez solo obtener el medio usando un índice. De lo contrario, si ya te sientes bastante cómodo con esto, pasemos a la siguiente lección. 21. Comprobación de tipos de variables: todo bien. Hasta ahora, hemos aprendido sobre cuerdas, números, arrays, ins booleanos, y hay algunos más que vamos a aprender por el camino. Pero por ahora, me gustaría explicar una función en particular que he estado usando para mostrarte si algo es un booleano o una cadena o una matriz o un número. Ahora, detrás de todos estos, estos diferentes tipos de variables está esta cosa llamada un tipo de datos o, en algunos idiomas, una estructura de datos. Entonces sigamos adelante y veamos algunos de estos. Entonces es crear de nuestra edad es igual a 30. De acuerdo, sabemos que este es un número, pero ¿qué cree Javascript que es? ¿ Cree que es un número de cadena? ¿ Algo así? Vamos a crear otro en tu nombre Vyron es igual a JavaScript. Cuatro principiantes. ¿ Qué piensa JavaScript? Esta variable es? Var. Sabes que ya hicimos éste. Su gato, verdadero o falso? Y vamos a crear uno más de nuestros autos es igual a la gente Wagon Lambeau y Audie Audio. Audie. Algo así. Vamos sí, pongamos eso en una línea otra vez. Y así cuando actualicemos tu página no vamos a ver que pase nada. Hemos declarado un montón de variables, pero no estamos haciendo nada con ellas. Adelante y la consola registremos cada uno. Por lo que cónsul dot log edad es. Y aquí dentro vamos a usar una función llamada Type Of y simplemente va a decir edades y luego qué es en realidad. Vamos a seguir adelante y salvarnos. Vamos a ver edades un número que es el tipo de variable o el tipo de datos. Vamos a seguir adelante y crear otro aquí. Diga que el nombre es el nombre de este curso es lo que sea que vaya a ser es gato va a ser hacer. Hacer es cata. Y por último, tenemos autos. ¿ Son los datos de los autos todo? De acuerdo, entonces antes de refrescar mi página en realidad va a hacer algo de espacio aquí para que esto en realidad se vea algo repisa una pelota, Sabemos que la edad es un número, JavaScript nos dijo Es un número. ¿ Qué opinas? El nombre es de ¿Qué crees que es el gato y qué crees que son los autos? En algún momento hemos pasado por todos estos, pero en realidad no hemos explorado completamente sus tipos de datos. Es decir, como que tenemos, en cierto sentido, pero no del todo así. Si golpeo, Refresh en esta página nos salvará y golpeará Refresh. Vamos a ver que la edad es un número. El nombre es una cadena es Cat es un booleano y los autos es una matriz, por lo que la edad es un número. Nombre es una cuerda es gato es un 1,000.000.000 autos es Oh, ¿qué es esto? No es una matriz. Bueno, eso es interesante. A pesar de que dijimos que fuera una matriz, en realidad es esta cosa llamada un objeto. Y curiosamente, aunque hagamos esto, hagamos, hagamos, hagamos , hagamos, hagamos, hagamos, hagamos, hagamos sigamos adelante y nos cambiemos a la palabra array. Vamos a ver que esto no cambia Hit, refrescar, refrescar, Y aún dice que los autos son un objeto. ¿ Qué pasa con eso? Bueno, en JavaScript y en muchos otros lenguajes, lenguajes programación orientados a objetos. Tenemos esta idea de un objeto, y un objeto realmente es solo una estructura de datos que permite tener varios componentes en él. tanto que una edad en este caso, un número es sólo un número. Realmente no se puede hacer demasiado con eso no se puede convertir a mayúsculas o minúsculas. No puedes sacarlo así no puedes deshacerte de, ya sabes, el último ítem porque solo hay un artículo aquí. Ni siquiera es una lista o una matriz. Realmente no podemos hacer nada con eso. No podemos agregarle demasiadas funciones personalizadas. Es sólo un número, mientras que con la variable llamada autos, es un objeto y en realidad podemos hacer mucho más con objetos. adelante y echemos un vistazo a este verdadero punto de autos rápidos y todo lo que tengo que hacer Puedes ver que dice, Cat array aquí es hit dot y luego simplemente desplázate hacia abajo y puedes ver todas estas cosas diferentes que puedo realizar en este tipo particular de objeto. Ahora vamos a meternos en objetos mucho más a fondo por el camino. Entonces no tienes que preocuparte por conocer la diferencia entre una matriz y un objeto momento, porque sí, bueno, cubre totalmente eso en este curso. Pero lo que sí quería hacerte consciente es diferentes tipos de datos usando el tipo de función de autos de un tipo, y nos da un objeto. Ahora, ¿por qué es esto importante? Bueno, echemos un vistazo a la diferencia entre una propiedad en particular. Entonces si hicimos la edad, longitud de puntos lo que no tenemos edad, cariño. Eso es porque hay un número. No hay longitud a un número. O sea, en términos humanos lo hay. Pero a una computadora, no lo hay. Simplemente dice que el número. Es decir, ¿qué quieres para mí? Y el número es el número, y así los números son bastante básicos. Si dijimos nombre longitud de punto, sabemos que se trata de una cadena. Si sí nombramos longitud de punto sabemos que ésta es en particular una cadena, por lo que va a contar el número de caracteres que contiene. Entonces J a v A S e r I p t espacio para el espacio b e g i N e. R s 22 caracteres ahora que si lo hiciéramos es cat dot length undefined. Ni siquiera tiene una propiedad llamada longitud. Lo mismo con los números no tiene una propiedad llamada como no podemos usar eso, pero con los autos porque es un objeto o como actualmente lo conocemos como una matriz, podemos hacer longitud de punto y esto devolverá tres. Donde esto se hace importante saber es si hice eso mal, si lo hicimos, si hicimos autos de longitud punto, vamos a conseguir tres como el número total de autos que tenemos. Volkswagen, Lambo y Audie. Pero si sí nombramos longitud de punto, ignora el que metí ahí con el error tipográfico. Si no jugamos longitud de punto, vamos a conseguir el número total de personajes, y así eso es muy diferente. Y así si intentas hacer longitud de punto en una cadena versus longitud de punto en una matriz, vas a obtener respuestas diferentes. Y eso podría cambiar tu lógica por el camino, se podría decir, si el Array tiene cinco nombres y hace algo. Pero si tu lógica dice, si la longitud de punto variable es igual a cinco y alguien solo escribe en una palabra con cinco letras en ella, eso también se va a desencadenar. Y así que esa es una especie de diferencia entre los tipos de datos es, ya sabes, algunos de ellos tienen ciertas funciones o propiedades en ellos que podemos usar, y algunos de ellos no y así inevitablemente te toparás con esto por el camino donde like, oh punto longitud en nombre es 22 pero la longitud de punto en los autos es de tres. ¿ Por qué es eso? Porque cuando cuento autos, también hay. Más cinco es siete más cuatro es 11. Por lo que crees que el retorno regresa 11. Pero no, no lo hace. Devuelve tres causas tres artículos ahí dentro. Ahora no vas a necesitar esto de inmediato. Pero es muy bueno saberlo, y he estado de vez en cuando mostrándote la función llamada el tipo de solo para mostrarte qué es esto. Entonces si alguna vez te preocupa lo que es una variable en particular o cuál es el tipo de datos, siempre podrías simplemente usar el tipo de función de, poner tu nombre de variable ahí con paréntesis a su alrededor y simplemente se ve así. Y te dirá Oh, soy booleano. Ah, soy un objeto. Yo soy un número. Entonces no hay nada que tengas que ver con esta lección en particular. Yo solo quería mostrarles esto solo para que estén conscientes porque se toparán con este tema por el camino, y sólo quería que estuvieran preparados para eso 22. Casting variable: está bien, hemos mirado la comprobación de tipos de variables. Hemos mirado diferentes tipos de datos o tipos de variables. Sabemos de números, cadenas booleanas, matrices, cosas así. Pero de vez en cuando vas a querer hacer esta cosa llamada tipecasting. Entonces si tienes, por ejemplo, ah, edad variable es igual a 30 y quieres que esto sea bien un número, actualmente, esto es un string. Hagamos consejo no registre tipo de edad, y dice que es una cadena, pero en realidad es un número, solo tiene citas a su alrededor. Entonces lo que podemos dio es esta cosa llamada type casting, donde básicamente, donde básicamente, tomamos una variable en particular y tratamos de convertirla de manera muy contundente en un tipo diferente de variable. Entonces, por ejemplo, edad podríamos teclear cast como un número escribiendo número con el final mayúscula y luego envejecer. Y si refrescamos esto, ahora dice que es un número. Entonces así es como lo haríamos mecanografiar en número. Ahora, donde esto se pone importante es, digamos que estás pidiendo la edad de alguien hasta el momento, edad es igual para incitar a tu edad es, y eso es hacer consejo dot log tipo de edad, y vamos a ver aquí, Voy a teclear 30 y va a decir que es una cuerda. De lo que tomamos en un número. No escribimos una fuerza, sino porque no sabe qué vas a poner en letras o números o verdadero o falso , simplemente asume que va a ser una cuerda. Entonces si escribimos en true , sigue siendo una cadena. Pero lo que podemos hacer es que podemos mecanografiar esto ahora para que podamos decir que la edad es igual a la edad numérica, y cuando hagamos esto, esto funcionará. No obstante, aquí hay una pequeña salvedad cuando intentamos hacer esto de nuevo y tecleemos la palabra horas. Pero mi nombre Caleb, dice que sigue siendo un número que está bien. Pero, ¿cuál es ese número? Vamos a escribir y envejecer, dice Nan. Este es otro tipo de datos JavaScript, y A N significa no un número. No es un número. No sabe qué hacer con él. Y si refrescamos tu página y solo tecleemos 123 y comprobemos la edad aquí adentro, dice 123 así que o bien va a funcionar o no va a funcionar Y así tienes que saber realmente cuáles se supone que son tus datos. Si estás pidiendo la edad de alguien, siempre puedes decir: La edad es realmente número? Y así ahora en realidad podemos intentar probar esto. Podemos decir, Si alerta de edad, tienes un número adecuado. Vamos a darle una oportunidad a esto Así que es tipo en Caleb, y eso no va a funcionar para mí, ¿ verdad? Pero, ¿y si hiciéramos 30? Dice que tienes un número adecuado, y eso se debe a que este número en realidad resultó ser un número adecuado. Y así cuando estábamos aprendiendo acerca de miles de millones, básicamente cualquier número en JavaScript que no sea el número cero es cierto en algunos. Otro lenguaje es que podría ser lo contrario. Pero en Javascript, a menos que sea explícitamente cero, siempre se considera cierto. Nan se le considera falsa. No es un número, pero si le das algún otro número, es cierto. Entonces eso funciona tan bien. Por lo que ahora podemos decir que aquí tenemos un número adecuado. Podemos detectar si es un número real. De acuerdo, entonces ahora tenemos un número adecuado. Entonces ahora lo que podemos hacer es realmente detectar si el número es algo. Ahora, aún no nos hemos metido en más operadores de comparación, y esto es un poco de adelanto a escondidas en la siguiente docena. Pero podríamos decir si la edad es mayor o igual a 18 cabildo dot log, Usted puede votar. Entonces ahora esto me va a pedir mi edad. Voy a poner un agente lo va a lanzar como un número va a decir, es ese número en realidad? Ah, en realidad es alerta numérica que tienes un número adecuado y luego va a decir: Oye, Oye, si tu edad es superior al número de 18 puedes votar y así dice que tienes un número adecuado. Y bastante seguro, se puede votar y también los logs de consola, el tipo de edad, que es un número que también podemos tomar. Elenco al revés. No tiene que ser de una cuerda a un número. Podríamos ir de un número dos cuerdas. Digamos que de nuestra edad es igual a una cuerda. No. Nancy, el camino equivocado de nuestra edad es un número de 30 y queríamos decir en realidad, la edad va a ser una cuerda que nos ha obligado a ser un diálogo de cuerdas y cónsul. Pongamos ahí la edad y el tipo de edad. Uh, ahora es una cuerda. El bonito de eso es porque ahora es una cuerda que podemos hacer la longitud de punto de edad. Podemos ver que ahí dentro hay dos personajes, mientras que con un número no pudimos hacer eso antes. Y así hay beneficios para la tipificación. También podemos hacer esto con como es booleano y cosas así también. Entonces probemos esto. Eso es se var es Cat es igual a su una cuerda, Pero vamos a seguir adelante y lanzar esto como un booleano. Así es Cat es igual a Booleano de Is Cat, Así que sólo nos estamos anulando consigo mismo como booleano. Veamos qué pasa aquí. Eso es copiar esto abajo y poco común. Eso y cambiemos la edad a es Cat. Mira eso. En realidad es cierto, y entendió que verdadero como palabra podría en realidad confirmarse tan cierto como un booleano. Y así ahora podemos decir, si es gato o si no es un gato, vale, y hagamos uno más aquí. Vamos a hacer curso Var es igual a Js para principiantes. Ahora sabemos que esta es una cadena ya porque bueno, lo declaramos como una cadena. En cuanto tenía espacios, le pusimos cotizaciones a su alrededor. Digamos que queremos convertir esto en una matriz. Lo que podríamos hacer es curso es igual a array. Por supuesto. Entonces ahora cuando refresco la página y hacemos curso uh huh Mira eso. Ahora está en una carrera. Sólo tiene un artículo en él. Realmente sólo tiene el en desy o índice para Heather. Ah, pero es una matriz. Y así ahora podríamos hacer, por ejemplo, curso impartido longitud y obtener cuántos artículos hay aquí? Bueno, sólo está la que no es lo mismo que conseguir la longitud de una cadena que sería superior a 10 sea cual sea ese número que va a ser. Y en realidad podríamos hacer esto. Por supuesto. Cero no longitud. Es 16 y así debilitar mecanografiada en básicamente cualquier otro tipo de datos en javascript. Todo lo que tenemos que hacer es decir Hey, esto es un booleano. Oye, esto es una cuerda. Hey, esto es una matriz o hey, este es un número y a medida que aprendemos más tipos de datos, podemos crear otros nuevos también. Y así básicamente, así es como lanzamos variables, y eso es realmente todo lo que hay a ello. Y realmente te ayuda cuando estás usando ciertas propiedades o métodos o tratando de averiguar cómo volver a trabajar con tipos de datos particulares. Esto se está volviendo cada vez más relevante a medida que pasamos por este curso, y se vuelve cada vez más relevante en el JavaScript moderno. Por lo que es bueno saberlo, aunque no lo uses todos los días en este momento, eventualmente terminarás usándolo bastante por el camino. 23. Más operadores de comparación: ya. Echemos un vistazo a algunos operadores de comparación más. Hasta ahora, realmente sólo hemos trabajado con es igual o no es igual a. Y si algo es cierto o si algo es falso, realidad hay mucho más debilitar Dio, por ejemplo, podemos ver si algo no es igual a lo que especie de incursionamos, pero no formalmente. Entonces le echaremos un vistazo a este en tan solo un poquito. También tenemos es mayor que o igual a es mayor que es menor que es menor que o igual Teoh. Y entonces tenemos, por último, un estricto operador de comparación, que llegará al final de este video. Entonces primero lo primero. Echemos un vistazo al no es operador. Sigamos adelante y comentemos esto, y así tenemos que poder comparar. Algo no lo es. Ya hemos mirado esto antes, pero vamos a echarle un vistazo formalmente ahora. Entonces tenemos una variable. Y digamos que el curso es igual a solo un curso de JavaScript o algo, ya sabes, sencillo de comparar. Y podríamos decir si el curso es igual a Js Council dot log es J s curso. Y vamos a seguir adelante, hacer ese poco más pequeño y refrescar nuestra página. Y dice, es un curso regular de J. S. De acuerdo, no hay problema con eso. Pero, ¿y si Y si no lo es? Bueno, esto no va a hacer nada. Pero sigamos adelante y cambiemos esto. Digamos que si el curso no es un curso de J s, digamos si el curso no es un curso de PHP ahora, esta lógica realmente no tiene mucho sentido. Pero es un buen ejemplo de cómo usar lo contrario. Un operador de comparación. Básicamente estamos diciendo justo aquí. JavaScript. El string JavaScript no es igual a PHP. ¿ Son diferentes? Es correcto. Esa afirmación es correcta, por lo que devuelve verdadero. Y así lo que la computadora ve detrás de las escenas es Yep. Si es cierto, que es cierto, ejecute esto. Y así es como así llegamos a ese punto usando el operador no o el operador no es igual . Más bien a continuación, tenemos mayor que así sigamos adelante y creamos una era. La edad es igual a 17 y podemos decir si la edad es mayor a 10 entonces consola dot log se puede jugar fútbol o algo a lo largo de esas líneas. Adelante y refrescantes. Dice que puedes jugar futbol Ahora. Lo que esto está haciendo es otra vez. Básicamente, podemos reemplazar este dicho un 17 mayor que el número 10. Sí, lo es. Por lo que esta afirmación resulta ser cierta, y como es verdad, ejecutará este bloque de código. Ahora qué pasa si dijéramos: Oh, Oh, para poder realmente jugar futbol profesional, necesitas tener 18 años o más. Puedes volver a jugar futbol pro. Hagamos ese paso más pequeño y démosle un ahorro a eso. No pasa nada porque esto devuelve falso. Esto es decir, si la edad 17 es mayor a 18 fue 17 un número mayor que 18? No, esto resulta ser falso, por lo que no se ejecuta. Recuerda si las declaraciones siempre necesitan que esa conclusión final sea cierta. A continuación podemos hacer lo mismo, pero podemos decir que es mayor o igual a. ¿ Cuándo usaríamos esto alguna vez? Si bien digamos que tu edad es de 18 años y necesitas tener al menos 18 años para poder votar, puedes votar. También podemos hacer una declaración else if aquí. De lo contrario, si la edad es mayor que igual a 21 me estoy preparando a propósito para el fracaso en este, y te mostraré en tan solo un segundo, puedes beber alcohol. Dice que se puede votar. Pero esto también es cierto. La edad también es mayor a 21 ahora. Nos enteramos de esto hace un rato, pero siempre es bueno retocar los fundamentos y JavaScript. Corre de arriba a abajo y dice: Sí, Sí, esto es cierto. Esta es la declaración if a la que queremos conectarnos y no nos preocupemos por nada más debajo de ella . Por lo que esta otra cosa si se ignora la declaración. Pero lo que podemos hacer es si nos deshacemos de lo más y simplemente creamos otro. Si declaración, sigue diciendo, sólo se puede votar. Pero si hicimos esto, dice, se puede votar y beber alcohol. Ahora de nuevo, ¿ dónde usas algo como esto? Bueno, si estás revisando la edad de alguien, 18 años se les permite votar. No se trata de personas mayores de 18 o personas mayores de 17. En la vida, decimos que a las personas que tienen 18 años o más se les permite votar a las personas que tienen 21 años o más en Estados Unidos se les permite beber alcohol. También podemos hacer básicamente lo contrario, por lo que podríamos decir, Pero esa es una variable. Hagamos algo diferente aquí. Nombre largo es igual a Caleb Tallinn, así que ese será mi nombre completo. No usemos mucho porque ese no es un nombre largo. Pero hagamos nombre completo. Y podríamos decir, si nombre completo punto Longitud es mayor que 10. Registro Confidante, Nombre largo. Y dice que tengo un juego largo. De acuerdo, bueno, ya hicimos esa. Pero y si es menos que menos de lo que podríamos decir Este es un nombre corto, Es ahora podemos decir, Hey, si este nombre tiene 012345678 o nueve caracteres en él porque es menor que el número 10 esto dirá Nombre corto. No tiene eso. Adelante y acortamos mi nombre a sólo mi nombre y dice nombre corto. Entonces eso es menos que operador. También podemos hacer menos que o igual a si quisiéramos. Hagamos que nuestro nombre es igual a John Smith lo que tenemos aquí dentro. Tenemos 10 personajes aquí. Ese es un nombre perfecto, en realidad. Deberían usarse en el primer ejemplo que podríamos hacer. Si nombre longitud de punto es menor o igual a 10 registro de Consejo longitud total es menor o igual a 10. Y sigamos adelante. Y también pongamos esto en nuevas líneas porque podemos. JavaScript nos consigue, nos da todo tipo de espacios en blanco. Ponga esto como segundo parámetro aquí y, digamos nombre longitud de punto longitud total es menor a 10 y podemos ver que el valor real aquí es 10. ¿ Por qué otros tenemos que pasar? Ah, creo, de verdad. El principal que tenemos aquí es la estricta comparación. Entonces todos estos otros aire matemáticas realmente básicas es algo mayor que menos que igual a Really , eso es todo lo que es. Donde se pone un poco raro es el signo triple igual en JavaScript. Esta es una comparación estricta, por lo que eso significa que no solo el valor tiene que coincidir, sino que el tipo de datos también tiene que coincidir, y esto en realidad es mucho más rendimiento. Funciona mucho mejor en tu computadora. Es código mucho más rápido porque no tiene que tratar de determinar realmente ningún otro factor . Simplemente dice, Hey, ¿ es este un tipo de datos correcto? Sí. ¿ Es este el valor correcto en el tipo de datos? Sí, avancen. No tiene que probar dedo del pie, digamos, como, Oh, ¿ tres son iguales a tres? Es decir, JavaScript no sabe eso. Por lo que trata de averiguarlo o es cierto. Ya sabes, lo mismo que cierto. Uno es una cuerda uno es un booleano, y tiene que una especie de averiguarlo. Mientras que si puedes deshacerte de eso usando una comparación estricta, tus programas, tus scripts en realidad serán mucho más rápidos. No es notablemente más rápido para el ojo humano. No obstante, cuando estás lidiando con programas grandes, tal vez estás empezando a crujir una gran cantidad de datos. Al igual que lo que hace Netflix. A lo mejor quieres ese tipo de actuación. todas formas, vas a ver un operador estricto en la naturaleza bastante porque es bastante común en JavaScript moderno. Entonces echemos un vistazo a esto. Este es el más grande para tomar nota. Edad es igual a Digamos 30 y ver esto. Si la edad es igual a 30 cónsul dot log, tienes 30 y lo suficientemente seguro, dice que tienes 30. A pesar de que la edad es una cadena y esto es un entero o un número, esos son dos tipos de datos diferentes, y por lo que todavía funciona. Todavía entiende que Hey, sí, sí, esto todavía podría ser en realidad un número también. Por lo que esto significa que JavaScript es un lenguaje vagamente tipado. Significa que puedes meterte con él y salirte con la tuya rompiendo algunas de las reglas generales que encontrarías en lenguajes de programación como C o Python. Entonces ahora ¿qué pasa si hacemos una comparación estricta? Si hacemos la comparación de tiras con tres signos iguales, hagamos que sean tres signos iguales más grandes. Esto no se va a ejecutar. De hecho, vamos a un punto de consola de sentencia else hacer, advertir, tipo de datos incorrecto, y vamos a hacer que sea más pequeño. Adelante. Guarda eso y actualiza la página y dice tipo de datos incorrecto. ¿ Por qué es el tipo de datos incorrecto? Bueno, es porque le hemos dado una cadena y estamos diciendo en comparación con un número, entonces lo que esto está diciendo es, String 30 es igual al número 30. Eso no es lo mismo en el mundo de los tipos de datos. No son lo mismo. El valor es el mismo para un humano. Es lo mismo a una computadora. Es diferente. Y así se puede pensar en esto como cadena es igual al número. Bueno, esos no funcionan igual. No se puede comparar una cuerda con un número que es así que esto es como comparar una sandía con una roca. Ah, sí, su forma podría ser la misma, pero fundamentalmente, son diferentes. Son cosas completamente diferentes. Y así vas a ver mucho esta estricta comparación en la naturaleza, y solo quiero que estés preparada para eso. Adelante y retoques esto. Adelante y ahorremos. Refresh dice. Tipo de datos incorrecto. Y si cambiamos esto por un entero o un número, como se le llama en, JavaScript dice, tienes 30. Aunque lo hiciera, 0.0 aún dice que tenía 30. Ya sabes, si vienes de otro lenguaje de programación, probablemente estés familiarizado con los decimales o flotadores en JavaScript, decimales, los flotadores y los enteros son todos lo mismo, es igual a un número. Adelante y lanzemos esto también en una nueva línea, para que podamos mantener eso en nuestras notas. Y así que esa es una introducción rápida, supongo. Y así esta fue la lección más operadores de comparación. Donde miramos no Igual es mayor que o igual a es mayor que es menor que es menor que o igual a n una comparación estricta. Estos son los operadores más comunes que vas a encontrar es muy raro, que alguna vez encuentres otra cosa que estos. Y como un último ejemplo aquí con la estricta comparación, Vamos a seguir adelante y volvamos esto atrás. ¿ Sabes a qué me refiero? Una copia, todo esto porque me gusta ese ejemplo como es. Entonces es común se extinguió. Copia esto pegado ahí más bien y vamos a hacer 30. Entonces esto nos va a dar un tipo de datos incorrecto. Bueno, en la última lección, hablamos de mecanización o fundición variable. Sigamos adelante y nos obliguemos a ser un número número número Bam. Funciona. Entonces teníamos originalmente una cuerda y dijimos: Oh, Oh, esto es una cuerda. Estamos esperando que sea un número avanzando. Siempre queremos que este sea un número. Por lo que más escribimos la variable llamada Age. Escribimos casted como un número y el parámetro para la función numérica que vemos aquí es básicamente eso y salida 30 como número. Y así ahora cuando hacemos la estricta comparación, funciona. Entonces eso es todo lo que tenemos para más operadores de comparación. Definitivamente toma unos minutos de tu día y juega con estos, sobre todo el último con comparaciones estrictas. Éste es uno muy importante. Todas las demás, creo que la mayoría de las personas las pueden conseguir. Preeti rápidamente. Es realmente sólo Hey, ¿ es un número más grande que el otro número? ¿ O una cosa coincide con otra? No necesitas ser profesional en este punto, solo necesitas ser algo familiar para que en el próximo mini proyecto, cuando se te pida crear una comparación estricta o se te pida que escribas algún código para un cliente o tu próximo empleador y ves algo como esto, no vas. ¿ Qué es eso? ¿ Se puede decir? Ah, sé exactamente qué es eso. Entonces ahí vamos, preparándote para el éxito. Cuando termines eso pasemos a esa siguiente lección y realmente pensemos que la siguiente lección va a ser un mini proyectos. Entonces vamos ah, vamos a divertirnos un poco con eso. 24. Proyecto mini de JavaScript nº : bienvenido a muchos proyectos. Número tres en este pequeño reto, lo que me gustaría que hicieras es pedirle al usuario un número y luego lanzar ese número a un número real porque sabemos lo que va a volver como una cadena. Así que lánzalo como un número y luego asegúrate de que ese número sea válido. No puede ser N a n y n significa no un número. Asegúrese de que en realidad es un número. Y luego si ese número es mayor de 18 o 21 lo que quieras, entonces y cambia el texto en la pantalla para decir que sí, se te permite. Entonces como un par de pistas aquí, Así paso número uno pidió el número de usuario. Le pedí al usuario un número que vas a usar prompt cast la entrada a un número. Vas a usar el número con un final mayúsculo. Asegúrese de que el número sea válido. Entonces vas a necesitar una declaración if ahí dentro, y luego si ese número es mayor de 18 chequea o cambia algún texto en la página para decir felicitaciones. Tienes más de 18 años o sí, puedes votar o, ya sabes, hacer una acción en particular. Entonces sé que este mini proyecto está un poco seco, pero es realmente, realmente buena práctica porque vas a usar cosas como esta todo el tiempo en la vida real . JavaScript. Ahora, como siempre, te brindaré mi solución así como con muchas cosas en la vida. Hay diferentes formas de lograr esto, pero les voy a mostrar mi forma de hacerlo. Pero me gustaría si pudieras, en tan solo un par de segundos, pausar este video y darle una toma por tu cuenta. Y si te atascas, entonces ya sabes, reanude el video y puedes ver mi solución. O si solo quieres, puedes simplemente mirar hacia arriba mi solución y luego tratar de introducirla tú mismo. Cualquiera que sea la forma te ayude a aprender lo mejor. Está bien. Por lo que voy a empezar en este mini proyecto. Primero lo primero. Tenemos que pedirle al usuario un número, emitir la entrada a un número, asegurarnos de que el número sea válido, y luego si ese número es 18 decir algo así como se te permite votar. Entonces sigamos adelante y escribamos algo de javascript. Por lo que aquí queremos pedirle al usuario un número de nuestro número es igual a prompt. Introduce un número. Paso dos. Tenemos que echarnos como un número porque si hicimos cónsul dot log tipo de numb, esta será una cadena. Hagamos eso un poco más grande que va a terminar siendo una cuerda. Por lo que necesitamos que esto sea un número. Entonces sigamos adelante y tomemos elenco como número entumecido y número. Ahí vamos y necesitamos asegurarnos de que este número sea realmente válido, porque si alguien tipea en algo que no es un número va a regresar y A n y A y no un número. Entonces tenemos que decir, si entumecido, necesitamos decir, Hey, esto definitivamente es un número Así que si es un número, vamos adelante y ejecutemos algo aquí y entonces podemos decir si entumecido es igual o mayor a 18. En realidad, la instrucción dijo más de 18 años. Si quieres ponerte finicky al respecto, amigo,ya amigo, sabes hagámoslo más grande que nuestro o igual a. Entonces si tienes 18 años o más, puedes agarrar un elemento de la página y cambiar su vamos a crear un elemento aquí de nuestro Elem es igual a documento punto get element by i d. Y vamos a llamar a esto l m. hazlo un paso más pequeño aquí así lo podemos ver todo en una sola línea y luego podemos dio l m punto en su texto O podríamos hacer inter html y decir que tienes 18 o más ahora eso es todo genial, pero conseguir un elemento por i d con una idea de elemento de e l E M aún no existe, así que vamos adelante y deshazte de eso. Y vamos a crear un H cuatro con un i d de e l E m y dejarlo en eso. Entonces vamos a refrescar tu página. Introduce un número. Adelante y tecleemos a Caleb. No con cotizaciones, aunque las cotizaciones no hacen daño. Sí, no pasa nada. Y oye, por cierto, eso volvió como una cuerda. Adelante y tipo de número. Digamos que tengo 17 De acuerdo, bueno, todavía no va a funcionar porque, ya sabes, eso podría haberse ejecutado, pero no pasó esta afirmación if, y sigue diciendo que es una cadena que se supone que lo haga. De hecho, bajemos aquí y cambiemos de cadena a número. Entonces esto ahora va a decir cadena y los números, así que no aquí, dirá cadena y el número. Vamos a refrescarnos una vez más. Démosle mi edad adecuada de 30 y ese 2do 1 no se presentó porque no guardé mi archivo. Entonces vamos a hacer rápidamente esa edad de 30 años. Ahí está. Número de cadena. Tienes 18 años o más, y ese es el mini proyecto en pocas palabras. Entonces eso es todo lo que estamos haciendo. De acuerdo, así que si quieres dar un paso más allá, en realidad no hemos aprendido de esto todavía. Pero si quisieras, podrías convertir nuestras dos declaraciones si, porque es una dentro de la otra en una. Si declaración. Entonces sigamos adelante y eliminemos esto y le llevemos del pie una línea y digamos, y así lo que esto está diciendo es si el número es en realidad número, Entonces si es cierto y el número es mayor que 18 entonces ejecute esto. De lo contrario no va a hacer nada. Probemos esto otra vez. 30 bam! Justo así. Entonces no nos enteramos de eso. No espero que sepas eso ahora mismo, pero es ah cosita genial con la que podemos jugar en el futuro. Entonces eso son muchos Proyecto número tres todo envuelto. Si no nos has dado una oportunidad para probar definitivamente esto por tu cuenta, intenta no tener que hacer referencia al material del video si no tienes que hacerlo y trataste de hacerlo solo desde la memoria. Si te quedas atascado. Oye, eso está bien. Simplemente reanude el video de nuevo. Puedes vigilarlo. No hay problema ahí, pero es bueno hacer sudar un poco tu cerebro una vez que hayas terminado con esto. Si estás contento con tu solución, pasemos a esa siguiente lección. Y oye, no lo olvides. Toma una captura de pantalla de tu código y tíralo a tu proyecto abajo para compartir habilidades para que no, yo pueda echar un vistazo a algunos de tu abrigo y puedes compartir e inspirar a otras personas también 25. Funciones: Oye, ¿qué tan bajo? Espero que ese proyecto de último minuto te haya ido bien en este video. Vamos a aprender un fundamental de programación, y se llama función. Ahora. Una función es realmente solo una forma de escribir una pieza de código para que no tengas que escribirla y otra vez y otra vez. Hay un beneficio y un inconveniente para esto. Entonces el beneficio de escribir solo código una vez y luego usarlo una y otra vez es que es menos código para mantener, así que no tienes que preocuparte por arreglar algo. Si hay algún problema, no tienes que arreglarlo 10 veces. Podrías simplemente arreglarlo una vez, y surtirá efecto 10 tiempos diferentes o donde estés usando. Se meterá en eso en tan solo un segundo. De verdad solo necesitas un dedo del pie arreglarlo en un solo lugar. Ahora una función tiene un inconveniente, y ese inconveniente es que al principio es un poco difícil de entender, por lo que si eres completamente nuevo en la programación, esto podría lastimar un poco tu cerebro. Pero ten en cuenta esto, quiero que trabajes en esto hasta que tenga sentido porque vas a ver funciones en cada lenguaje de programación. Vas a ver funciones tan comúnmente como ves variables en el mundo de JavaScript, y realmente hace que tu código sea más fácil de trabajar. Entonces en este video, solo te voy a mostrar cómo se ve una función y en realidad no vamos a escribir una función. Eso lo haremos en el siguiente video, pero solo quiero mostrarles cómo se ve ahora mismo. Entonces hagamos esto más grande. Y tenemos una función. Por lo que comienza con la palabra función. Se puede ver que mi editor V s código ha resaltado que dice función, mientras que , ya sabes, si no fuera una palabra clave, sería genial. Pero es una palabra clave, por lo que es agradable y colorido, por lo que empezamos con la palabra función y le damos un nombre a la función. Entonces démosle a esto el nombre de saludo. Y luego ponemos paréntesis porque es una función y porque va a estar tomando algún tipo de acción. Generalmente, hay un conjunto de paréntesis después de ella, y luego aquí solo podemos decir, cónsul dot log Hola, mundo. Y así todo el código que quieres ejecutar dentro de tu función va entre estas llaves . Se parece mucho a una declaración if, en realidad. Y luego para ejecutar tu función, todo lo que tienes que hacer es escribir saludo con tus paréntesis, y esto te dirá hola, mundo. Entonces si abro esto en cromo, vas a ver aquí abajo Dice, hola, hola, mundo Ahora las funciones pueden tomar estas cosas llamadas parámetros o argumentos. Y así puedes decir cuál es el nombre de alguien Así puedes pasar un nombre a esta función en particular , y luego puedes contaminarlo. Se puede decir hola más nombre. Y puedes usar este nombre de variable dentro de estos corchetes y luego para pasar en un nombre, solo estás pasando como una cadena o un número o un booleano o algo así. Vamos a pasar en una cuerda llamada Caleb y vamos a refrescar nuestra página. Y dice aquí abajo Hola, Caleb. Y así ahora, dentro de nuestra función, tenemos esta capacidad de usar cualquier tipo de nombre. Y lo que esto está haciendo es decir, Hey, Aquí hay un parámetro. Aquí hay un parámetro. Digamos que ahora nombre es igual a Caleb en básicamente lo que está haciendo detrás de bambalinas es decir Nombre es igual a Caleb. Ahora bien, si quieres múltiples parámetros, absolutamente, puedes hacer eso. Entonces digamos que hay un nombre y hay una edad. Entonces digamos hola Nombre y edad es Pongamos la edad ahí dentro y también necesitamos pasar en una edad. Entonces aquí hay dos parámetros. Tenemos que asegurarnos de que tenemos dos parámetros aquí. Hacemos eso separando estos con una coma, y en realidad hemos visto esto ya con registro de puntos del consejo. Y luego dijimos algo, y luego tuvimos una coma y luego dijimos otra cosa. Y así lo que esto está diciendo es que hay un objeto llamado Cónsul llegará a los objetos más tarde, pero básicamente hay una función llamada log. Este es el primer parámetro. Este es el segundo parámetro, y no es diferente a nuestra función aquí llamada Saludo, donde tenemos nuestro primer parámetro y luego tenemos nuestro segundo parámetro. Entonces vamos a guardar eso abrir, cromo y refrescar y dice Hola, Caleb. La edad es de 30. Entonces ahora en realidad tenemos dos parámetros o dos argumentos dentro de nuestra función de saludo. Aquí hay dos puntos más que debemos mirar. Uno está en JavaScript más moderno. En realidad podemos darnos una edad por defecto también o un nombre por defecto. Entonces sigamos adelante y tal vez hasta hagamos eso. Es un nombre predeterminado va a ser su esfuerzo. Mi gato y su edad no son 30. Él es cuatro. Vamos a seguir adelante y deshacernos de estos parámetros. Entonces lo que estamos diciendo aquí es si no hay ningún parámetro de nombre como el primero 1 que solía verse así. Si no hay ningún parámetro de nombre, solo asuma que el nombre es Zephyr. Si no hay un segundo parámetro llamado edad, sólo asuma las edades cuatro. Entonces sigamos adelante. Guardar. Refrescante. Dice Hola, Zephyr Ages. Para eso es relativamente nuevo JavaScript, en realidad es súper útil. Muchos lenguajes de programación han tenido esto durante muchos, muchos, muchos, muchos años, y finalmente es el momento para que JavaScript lo use también es una característica hermosa. Ahora, lo último que debe saber sobre las funciones, al menos para este video en particular es una función puede devolver de valor y eso lo hacemos con la palabra clave llamada Return y esto puede devolver cualquier cosa. Entonces sigamos adelante y regresemos el espacio x y eso es todo su va a regresar Semi. colones son opcionales cuando está en una nueva línea, pero sigamos adelante por el bien de la continuidad. Y así cuando actualicemos tu página, en realidad no vamos a ver que el Espacio X aparezca en ninguna parte. Lo que esto está haciendo es decir, Hey, si esta función se ejecuta y se está almacenando en una variable, ese valor de variables ahora va a ser Espacio X, Así que sigamos adelante y guardemos el saludo en una variable. Hasta el momento, acabo de llamar var, nombre variable nombre es igual a saludo. Todavía va a ejecutar las cosas del log de la consola porque aún está ejecutando esta función. No obstante, de nuestro nombre ahora va a ser lo que se devuelva aquí y eso podría ser una matriz podría ser un objeto. Podría ser una cuerda Ah Booleano un número, lo que se llame. Podría ser cualquier cosa que quieras regresar, pero solo te dan uno. Sólo se puede regresar una vez, y cualquier cosa aquí abajo no se ejecuta. así que mira esto. registro de punto cónsul no funciona. Entonces en este siguiente ejemplo vamos a ver que este registro de consola no va a funcionar. Pero var nombre también va a ser Espacio X como cadenas. Adelante y dale un tiro a esto. De acuerdo, refresco Issa's Hola es esfuerzo edades cuatro. El registro de la consola no funcionó. No se presentó porque nada por debajo de la declaración de devolución no funciona. Adelante y deshaznos de él ya que es inútil y echemos un vistazo al nombre var. Mira eso, dice Varney MySpace, Seis de nuestro nombre aquí tiene el valor del Espacio X, y podrías hacer cualquier cosa con variables para así poder hacer la edad a los exponentes de la edad, lo que podría ponerse realmente peligroso si están usando un número grande, grande y grande. Pero en este caso va a ser cuatro al poder de cuatro, y eso es lo que va a ser el número. Entonces digamos nuevo número y está bien, hizo nuestros registros de consola regulares. Ahora tecleemos nuevo número y vemos 256. Nos dieron eso porque cuatro veces cuatro veces cuatro veces cuatro veces cuatro es 256. Y luego, por último, cuando se trata de usar una función, todo lo que tenemos que hacer es volver en Stan. Odiaba volver a inicializar Vamos adelante y digamos, Caleb y 30. Vamos a seguir adelante y crear uno nuevo aquí y este va a ser Henry y él va a ser Y así va a ser, ya sabes, vamos a cambiar este retorno a algo que tiene sentido. Sólo devolvamos el nombre. Y así este va a ser nombre predeterminado y éste va a ser Caleb y éste va a ser Henry. Así que mira esto mientras golpeo, dice Refresh. Hola, Zephyr. Edades cuatro. Entonces regresa. El nombre lo almacena en una variable llamada nombre predeterminado. Entonces vas a la siguiente línea dice: Oh, Oh, hay una función aparece. OK, ejecuta ese código. Le dimos un nombre llamado Caleb, y le damos una edad de 30 años. Hola, Caleb. La edad es de 30. De acuerdo, así lo hace. Esa línea lo almacena en variable llamada Caleb. Siguiente va a la Línea 18 dice: Oh, Oh, hay uno en tu llamado Henry. Está ejecutando una función llamada saludo, igual que las otras dos veces va a decir, OK, bueno, voy a parar aquí. Busca una función llamada saludo. El primer valor es Henry. Entonces no vamos a usar el valor por defecto a su edad es. No vamos a usar el valor predeterminado de cuatro. Y así va a saludar, Henry. La edad también es, y luego le va a devolver su nombre. Esta parte de aquí va a almacenar eso en una variable llamada Henry. Y bastante seguro, vemos Hola, Henry. Edades, también. Entonces si seguimos adelante y decimos cabezas de nombre predeterminado desde aquí mismo, obtenemos sufrir. Kayla es Caleb. Henry es Henry. Por lo que las funciones son un punto crítico a la hora de programar en cualquier lenguaje, no solo javascript, sino en cualquier lenguaje. Y casi todos funcionan de la misma manera. Tienes alguna forma de definirlo. Le das un nombre, le das algunos parámetros si quieres. Ah, realizas algún tipo de lógica aquí, o en este caso, solo estamos haciendo un registro de consola y devuelves algo, y entonces tal vez lo guardes en una variable, y luego podrías hacer algo con esa variable por la línea, así que eso es funciones en pocas palabras. En la siguiente lección, sigamos adelante y pongamos unas manos serias en práctica con funciones vamos a hacer lo correcto. Un número de ellos va a tener un ritmo bastante rápido. Pero oye, siempre se puede ralentizar el video. Siempre puedes detenerlo y probarlo tú mismo, y estoy aquí para guiarte en cada paso del camino. 26. Práctica con las funciones: en el mundo de la programación, hay algunas barreras que son difíciles para la mente envolver alrededor del 1er 1 Sus funciones. Puede ser difícil de entender al principio, y en realidad, solo necesitas practicar con él una y otra vez hasta que solo clica en tu cerebro. Justo así. El siguiente es bucles, y luego hemos traído objetos y programación orientada a objetos y cosas así. Pero el 1er 1 son funciones, y una vez que entiendes funciones, las cosas en realidad se vuelven mucho más fáciles. Pero este es el primer obstáculo mental importante para superarlo, por lo que es realmente bueno para nosotros conseguir alguna práctica seria con funciones en este momento. Ahora, las funciones son parte cotidiana de la vida. En realidad necesitamos saber estos. No se puede escribir JavaScript sin funciones. Bueno, en realidad, eso fue una mentira. Podrías, pero no vas a llegar muy lejos. Tu tu código general o tu Toda tu aplicación va a ser extremadamente básica y no muy dinámica, y se va a poner muy, muy largo, y vas a copiar y pegar mucho. Ahora hay una regla general y programación llamada Dry, lo que significa que no te repitas, y cómo lo hacemos es con una cosa llamada función, por lo que podemos escribir la lógica una sola vez, y podemos ejecutarla una y otra vez y otra vez. Y así, por ejemplo, si estuviéramos convirtiendo Celsius a Farron Heights y escribimos la fórmula el largo camino 10 veces y nos dimos cuenta de que nos equivocamos la fórmula y está en cuatro archivos diferentes , vamos a tener que ir y cambiar esos cuatro archivos diferentes en un hallazgo y reemplazar en todos ellos. Ese tipo de apesta, Mientras que si solo fuera una función, solo podrías arreglar la función una vez, y la arregla en todas partes. Ahora, las funciones pueden ser un poco confusas si al principio. Pero ¿sabes qué? Honestamente, solo sigue trabajando en ellos porque se vuelven más fáciles con el tiempo. Y creo que sin más preámbulos, realmente deberíamos saltar a esto. Entonces vamos a crear primero una función simple e inútil que añada 100 divide por tres y sólo va a tomar un número, dividir por 100 o más bien agregar 100 luego dividir por tres y devolver lo que sea ese número Así empezamos con la función. Es una palabra clave y vamos a llamarla hacer matemáticas y va a tomar cualquier número que le demos . Tenemos algunos corchetes abiertos y rizados para que haga algo de lógica aquí ahora, no sabemos si este número realmente va a ser un número. Podríamos asegurarnos de que sea un número, por lo que siempre podríamos decir Numb es igual al número numb y asegurémonos de que eso esté escrito correctamente. Ahí vamos y luego podemos decir Si entumecido es un número real, entonces podríamos hacer cosas aquí más, no un número riel. Y así ahora nuestra función se divide en dos porque tenemos una declaración if else aquí ahora , podríamos hacer una declaración de retorno aquí abajo. También podemos hacer una declaración de retorno aquí y aquí dentro, así que hagámoslo. Si no es un número real, solo devolvamos un Booleano de falso y si es un número real, así que hacer hacer hacer es un número real. Dijimos que queremos que este número sume 100 divididos por tres. Digamos de nuestro nuevo número es igual a NUM más 100 dividir por tres. Y si queremos asegurarnos de que eso resulte estrictamente de esta manera, podemos usar la regla de la cama, señorita Brackets, exponentes, división, suma de multiplicación, resta. Entonces va a hacer número más 101 lo que sea que resulte ser. Y luego se va a dividir por tres. Y sólo regresemos nuevo número. Entonces esto o va a devolver falso o va a devolver el nuevo número. Y hagámoslo un poco más pequeño para que podamos ver esto en una sola página. Y no aquí, digamos de nuestra costumbre, Numb es igual para hacer matemáticas, cualquiera que sea el número que queramos darle. Entonces démosle 343 porque los números aleatorios lo guardan. Y si abrieras esto en tu página ahora mismo, verás que no pasa nada porque realizamos toda esta lógica y devolvimos ya sea un Booleano o un número a esta variable en particular llamada Custom Numb. Pero no hicimos nada con ellos personalizados no lo logramos en consola ni nada por el estilo. Así que sigamos adelante y la consola registre ahora. Cónsul dot log personalizado numb. Ahora abramos su página y golpeemos Refresh, y así podremos ver el número. Aquí está 147 punto 6666666666666 ¿Y si le damos algo Eso no es un número? Digamos que el número es Caleb. Bueno, Caleb no es un número. Yo soy una persona, no un número. Devuelve falso porque eso no era un número. No resultó de la forma en que esperábamos que lo hiciera. Ahora bien, ¿ deberíamos querer ejecutar esta función una y otra vez y otra vez? Podríamos simplemente hacer esto. Podríamos decir: Hagámoslo con 30. Cambiemos todos estos sí sí hacen. Vamos a subir eso y sigamos adelante y solo la consola registren cada uno de estos. Y así aquí está. Simplemente va a consola registrar cada número. Simplemente estamos anulando constantemente la misma variable aquí. Sigamos adelante y veamos qué devuelve esto. 1er 1 es falso, y eso es porque el nombre era Caleb. Sí, eso no es un número. El 2do 1 fue de 30 por lo que sumamos 100 divididos por tres y obtenemos 43.3. Repitiendo el siguiente fue 50 por lo que 50 más 100 es 1 50 Dividir por tres es 50. Eso resultó muy bien. 501 más 100 dividido por tres, 200.3 repitiendo. Después obtenemos 41 menos 90. Esta es una interesante. Por lo que menos 90 más 100 es solo 10. Dividido por tres es 3.3 repitiendo y luego tres más 101 103 dividido por tres. 34.3. Eso fue un montón de treses. ¡ Wow! Y así es el poder detrás de una función. Y, oye, si uno de estos resulta ser incorrecto, siempre podemos volver aquí y decir, Oh, en realidad, realidad, eso no se suponía que se dividiera por tres se suponía que se dividiera por cuatro. Y ver esto Todos esos números cambian. Entonces si te interesa trabajar junto a mí, esto es lo que puedes hacer. Crea tu primera función y solo pasa un número como su único parámetro, y luego solo trabajas un poco con un número, aunque solo hagas volver entumecido. Eso es mejor que nada Así que adelante y dale un tiro a eso. De lo contrario, vamos a pasar a la siguiente función, que va a ser un poco diferente. Pero, ya sabes, algo así. Vamos a crear otra función aquí. Pero esta vez vamos a crear una función basada en algo que hace JavaScript. ¿ Te das cuenta de cómo hemos estado escribiendo documento? Obtengo elemento por i d. Y luego cualquiera que sea el elemento sea el elemento i d Hemos estado escribiendo eso mucho. Podemos atajar eso. De hecho, realidad se ve mucho esto en muchas bibliotecas JavaScript. Podemos escribir una función, sólo lo llamaremos signo de dólar y vamos a pasar en el I D. Y luego qué? Debilitar dio se debilita simplemente devolver esto. Y así ahora tenemos una función llamada signo de dólar. Se necesita un yo d lo que sea que esas ideas. Y dice, Hey, documentos devueltos dot get element by i d Necesitamos cambiar eso a nuestra variable, y va a buscar este modelo de objeto de documento interno, y simplemente va a devolverlo. Entonces podemos trabajar con un poco más tarde. Entonces vamos a probar esto. Digamos que el título de Var es igual a idea de título y luego queremos cambiar. El texto interno del punto del título es igual al texto interno personalizado, y en realidad necesitamos asegurarnos de que esto exista. Entonces sigamos adelante y creemos cada uno aquí con una idea de título. No hay nada en ella. JavaScript poblará esto por nosotros. Y solo para asegurarnos de que sabemos lo que está pasando, su registro de consola I d. Es. Y esto parece una función. No, no funciona de log primer parámetro segundo parámetro. Abramos su página y golpeemos Refresh, y vamos a ver texto interno personalizado. False era de éste de aquí arriba. Vamos a seguir adelante y comentar eso fuera por ahora y se puede ver el título de las ideas. Entonces lo que esto está haciendo es decir, Hey, consigue el elemento por su yo d de partidos de título aquí arriba. Almacena eso en una variable con tus declaraciones de devolución. Eso es lo que hicimos. Estábamos Lo almacenamos en una variable llamada title, y luego podemos usar eso. Es exactamente lo mismo que hacer esto. Sólo aguanta conmigo aquí. Es exactamente lo mismo está haciendo esto. Sólo que ahora estás escribiendo mucho menos. Y si alguna vez quisieras crear otro, siempre podrías hacer de nuestro elemento personalizado. Cualquiera que sea tu elemento es igual a personalizado I d. Y luego personalizado Ellam dot html interno es igual a algo aquí. Podrías hacer algo así y ahora estás corto cortándolo. Ahora no estás escribiendo documentos. No obtenga elemento por i d paréntesis. Cualesquiera que sean tus ideas una y otra vez. Sólo estás escribiendo signo de dólar. Por lo que es una buena forma de corte corto. Met. Por último, sigamos adelante y creemos una función donde convertimos Celsius a Fahrenheit. Entonces empezamos con la función que se llama C para ver si puedo deletrear esto bien la primera vez justa en odio. En realidad es hacer esto. Eso se llama, Uh, sí, realmente no me gusta esto. ¿ Eso es así? Es sólo para ver dos f y podemos añadir un comentario aquí. Ah, Celsius a altura montada al aire. Ahora tenemos que darle un número a esto. ¿ Cuál es el número Celsius? Entonces ve, entumecido? Algo así no necesita tener una lata de subrayado. Si quieres, necesitamos realizar algunas matemáticas aquí. Entonces hagamos variable de nuestro Fahrenheit Fahrenheit Hay igual a lo que es la matemática que queremos hacer. Variable Fahrenheit es igual a lo que sea Celsius. S O. C. Tiempos entumecidos 1.8 más 32. Y así pongamos los corchetes aquí. Entonces eso siempre se ejecuta primero de nuevo, eso es solo orden de operaciones. No necesariamente lo necesitas porque la multiplicación va a venir antes de la división. Ese no es el aquí ni allá que sólo son matemáticas. Y entonces podemos regresar la noche justa. Ahora no estamos haciendo ningún cheques. No fuiste tipeante. Ver numb como parámetro como variable, solo estamos asumiendo que es un número de algún tipo. Entonces sigamos adelante y creamos algunas variables en tu llegamos lejos. Digamos que con cero grados es tan C a F bien, para poner el número cero ahí para que sea lo que sea que va a ser y te permite asesorarte punto log cero. Oye, dato divertido. También puedes poner líneas de código en la misma línea siempre y cuando haya un punto y coma. Entonces tu computadora va a leer esto de arriba a abajo y decir Fuego cero es igual a y llegan al semi, dice Colón. Oh, hey, Ok, bueno, esta parte está hecha, así que sigamos adelante y ejecutemos esto como si estuviera en su propia línea. Entonces vamos a hacer eso. Uno. ¿ Cuál es la temperatura ambiente mientras que la temperatura ambiente en Celsius es de 20? Llamemos a esto 20 y lo que está hirviendo por lo que ebullición en Celsius es de 100 grados. ¿ Qué es eso en la noche justa y solo por diversión? Z's Hagamos congelación y pongamos un número de menos 40. Entonces, ¿qué es menos 40 en la noche justa? Adelante. Página de actualización. Entonces tenemos que ir a iniciar sesión desde nuestra función anterior, pero podemos ver cero grados Celsius es igual a 32 grados noche justa. Eso es correcto. 20 grados es 68 F y la congelación menos 40 Celsius es la misma en altura justa. También es menos 40. Ahora bien, ¿por qué es importante saber esto? Bueno, porque en realidad estamos haciendo algunas matemáticas aquí. ¿ Y qué pasaría si quisiéramos subsanar esto manualmente? Cada vez? Tendríamos que reemplazar esto por cualquier número que no esté aquí. por lo que cero veces 1.8 más 32 lo estaban escribiendo de nuevo. Y luego tenemos que hacer 20 y luego tenemos que hacer 100 tendríamos que escribir eso cada vez. Y no nos interesa pasar todo el día escribiendo. Nos interesa escribir buen código. Entonces lo que hacemos es tirarlo en una función. ¿ Y sabes cuál es el peor de los casos aquí? ¿ Y si todos estos están equivocados? ¿ Y si en lugar de 32 hubiera un tipografía y fuera 31? Bueno, no va a marcar una gran diferencia cuando se trata de Fahrenheit, cuando estamos hablando de, ya sabes, temperatura ambiente. Pero aún así el número está mal. Y así tendríamos que pasar y arreglarlos todos al mismo tiempo. A eso, esa no es forma de vivir tu vida. Y si no fuera una función, mientras que el error hubiera sido 31 aquí y todo lo que tenemos que hacer es cambiarlo de nuevo a 32 los cuatro están arreglados con una sola pulsación de tecla. Entonces ahora estamos siendo mucho más conocedores de dónde estamos pasando nuestro tiempo. De hecho, realidad podemos incluso atajar esto. No necesitamos poner eso como variable. Podemos simplemente seguir adelante y devolver lo que sea Celsius como número. Tiempos 1.8 más 32. De acuerdo, esas son tres funciones diferentes en JavaScript por ahora. Deberías estar algo familiarizado al menos con la sintaxis con cómo se ve antes de pasar a tu próximo mini proyecto. Lo que realmente me gustaría que Dio es intentar escribir una función por su cuenta. No tiene que ser útil. Azul primera función que escribí aquí fue agrega 100 divisiones por cuatro como nunca voy a usar esa función en la vida real. Pero es una buena práctica, así que no te olvides como recordatorio las funciones comienzan con una función de palabra clave. Tiene algún tipo de nombre, paréntesis y luego tienes argumentos thes air opcional. puedes hacer absolutamente nada si lo deseas y tiene una declaración de retorno para almacenar los datos que quieras en una variable. Entonces devolver algo y luego a ejecutar podrías hacer de nuestro nombre es igual a nombre así. O si solo quisieras ejecutarlo, no almacenar nada en una variable. También puedes hacerlo de esta manera. Así que adelante, danos un tiro. No te voy a decir qué tipo de función hacer bien. No es ni aquí ni allá. Podría ser un buen tipo de función, una función útil en la vida real o no. Realmente no importa. Ponte tan complicado o simple como quieras. Yo solo quiero que puedas escribir una función, porque en nuestro mini proyecto, vamos a estar escribiendo una función. Adelante. Dale una oportunidad a eso. No olvides que estoy aquí para ayudar. Tienes una sección común abajo abajo. No lo olvides. Si tiene alguna pregunta, por favor haga su pregunta. Yo estoy aquí para ayudar. Yo quiero que esto sea fácil para ti. De lo contrario, sigamos adelante y empecemos con este próximo mini proyecto porque aquí es donde las cosas empiezan a volverse un poco divertidas. Creo que se va a poner mucho más divertido de aquí en adelante 27. Proyecto mini de JavaScript #4: Hola y bienvenidos a muchos Proyecto número cuatro. Vamos a estar creando una calculadora de propinas, y esto realmente sólo tiene que ver con funciones. Las funciones son tan importantes. Te estaba advirtiendo en el último par de videos necesitas conocer funciones, y en realidad diría Just practique funciones hasta que lo consigas. Y así esta es una manera realmente buena de ejercer una función. Entonces en este proyecto de muchos, lo que me gustaría que hicieras es crear un simple consejo. Calculadora debe aceptar dos parámetros. Su 1er 1 debe ser el monto total de su factura. Entonces digamos que vas a un restaurante y tu factura llega a 25 dólares. Necesita aceptar $25 como un solo parámetro, y el segundo parámetro es tu porcentaje de propina. ¿ Cuánto quieres propina? Haz de ese segundo parámetro tu parámetro de punta. Hacer que sea opcional. Dale un valor por defecto. Realmente no importa cuál sea tu valor predeterminado si tú Si crees que propina debe ser un mínimo de 15% ir por 15%. Si crees que propina 15% es absurdo y nunca debe ser superior a cinco, haz tu parámetro de punta El valor predeterminado. Cinco. Por último, quiero que devuelvas el monto total y lo guardes en una variable y luego tal vez la consola registren esa cantidad total a tu página. Como siempre, voy a trabajar a través de esto justo después de esto, pero me gustaría que le diera una toma primero, así que siéntete libre de pausar el video. Dale una oportunidad. Prueba lo mejor posible. Si te quedas atascado, solo reanudas el video y podrás ver mi solución a esto. Muy bien, esta es mi solución a la calculadora de puntas, así que sigamos adelante. Y primero necesitamos crear un guión así guión. También puedes hacer esto en un archivo externo. Si lo quisieras. El primero que tenemos que hacer es crear una función para que funcione. Solo llamémoslo punta, y necesita aceptar dos parámetros. Por lo que es un monto total de la factura son realmente traje monto total y un porcentaje de propina. Ese porcentaje de punta debe ser opcional con un valor predeterminado. Entonces digamos 10. Ese 10% va a ser 10%. Y vamos a acercarnos aquí, hacer esto bonito y grande en Vamos a seguir adelante y a trabajar algunas de estas matemáticas. Por lo que el monto total de la propina va a ser de nuestra cantidad de propina es igual a cantidad total. Tiempos punta. Bueno, eso no necesariamente va a funcionar porque nuestra propina es un número completo. Y así si eres Bill era de 25 dólares dijiste 25 veces 10 que son 250 dólares. Eso no va a salir bien. Entonces vamos a sobrescribir la punta variable. Esa es una propina va a ser lo que actualmente se divide por 100 que nos va a dar algo como, ya sabes, en vez de 10 va a ser 0.10 Y así nuestra cantidad de propina aquí ahora va a ser 0.10 Así que esto es va a ser como si fuera 25 veces 0.10 así como así. Pero lo estamos haciendo en el lenguaje de las variables en su lugar. Entonces esa es nuestra cantidad total de propina. Y podríamos si quisiéramos simplemente devolver el monto de la propina. Podríamos decir cantidad de propina de devolución y habríamos terminado. Y si queremos devolver el monto total por lo que realmente no nos importa dar propina 10% o 15% o algo por el estilo. Simplemente queremos asegurarnos de que nuestra factura final o la función más bien sea dar el monto final de la factura. Entonces si tenemos una factura de $25 y queremos propina 10% bien, necesitamos sumar 10% encima de 25. Entonces ahora tenemos nuestra cantidad de propina y podríamos dio ah, cantidad total. Podríamos incluso sobrescribir éste porque no lo vamos a volver a usar. El monto total es igual al monto total, más tu propina. Y luego aquí, vamos a hacer cantidad total. Eso es lo que vamos a regresar. Y veamos si tengo algún error tipográfico o si he hecho esto mal. Entonces vamos a crear una variable aquí. Por lo que es una cantidad de punta var. No, vamos a hacer var factura total. No estamos haciendo cantidad de propina que estamos haciendo Total Bill es igual a propina. ¿ Cuál es mi factura? Son 25 dólares ¿cuánto quiero? A tip, Digamos 10% y luego cónsul punto log total factura. Vamos a darle un refresco a esto y podemos ver que mi factura es 25.1. Eso no parece correcto, ¿verdad? Porque 10% de 25 es 2.5. Por lo que debe ser 27.5. Algo no está bien. ¿ Qué podría ser? Entonces ahora, conforme nos depuramos, podríamos hacer consejo dot log tip amount es la cantidad de punta, y luego también podríamos dio consejo dot log El monto total es el monto total y podemos ver lo que está pasando aquí. Y entonces también podemos cónsul como este consejo punta de registro punto como, ah por ciento es y luego cualquier propina va a ser Así que vamos a refrescar la propina de página como un por ciento de 0.1. Pero el monto total no es correcto. Algo no está bien aquí. ¿ Por qué es eso? Oh, mira eso. Había un error tipográfico usé punta y se suponía que era cantidad de propina. Y así allá vamos. Tenemos algo de depuración en vivo para ti. Yo sólo voy a deshacerme de todos esos registros del consejo y página de actualización y mira ese 27.5. Y con eso, el mini proyecto está completo. Ahora sé que en el paso cuatro dice devolvió la cantidad total y lo guardo en una variable. Pero si solo quisieras devolver el monto de la propina, en realidad podrías extender esto también. Se podría decir Retorno Tip sólo es igual a falso. Pero si la punta devuelta sólo es igual a verdadera. Por lo que si devuelve propina, Lee es igual a verdadero. Podríamos devolver sólo la cantidad de propina y luego aquí podríamos decir No, no hagamos esa. Sigamos adelante y copiemos esto porque así está bien la forma en que está. Punta total. Démosle verdad a eso. Necesitamos que esto sea propina total también, y comentemos eso fuera. Y entonces sigamos adelante y ah ja mira ese propina total $2.5. Y vamos a ser poco común eso, y veremos ambos en año. Y así ahora tenemos, ah, ah, función significa esta propina de retorno única parte era extracurricular, pero tenemos un funcionamiento aquí que puede devolver una de dos cosas, ya sea la cantidad de propina o la cantidad total de propina. También, tome nota de que no usé una declaración else. No usé una declaración else porque no necesitaba estar diciendo si regresaba propina sobre Lee , entonces solo devolvía la propina solo de otra manera, en todas las demás instancias, acaba de devolver la cantidad total. Esa es exactamente la misma ensayando otra cosa. En este escenario en particular, es exactamente lo mismo. Por lo que ahí lo tienes. Es decir, muchos proyecto número cuatro años calculadora de propina todo resuelto. Si quisieras hacer esto realmente elegante, en realidad podrías consultar en tu página un elemento y cambiar un montón de texto ahí también . Por lo que su página en realidad parece que está haciendo algo en lugar de simplemente en la consola iniciar sesión cualquier cosa aquí. Porque en este momento, si alguien intentara usar esto y no desarrollador no conociera el dedo del pie, mira en la consola. Y, como siempre, si tienes preguntas, no olvides, puedes dejarlas abajo. Estoy feliz de ayudar en cualquier momento en el tiempo. Una vez que hayas terminado con este proyecto de muchos, vamos a ir sobre set siguiente lección y aprender un poco más sobre consulta. Selectores 28. Selectores de consulta: Está bien. Hola. Espero que ese último proyecto de muchos saliera bien. Ahora es el momento en que empezamos a conseguir un poco de fans aquí con nuestro código. Entonces vamos a empezar realmente a interactuar con nuestra página. Hasta ahora, hemos estado usando documento dot get element by idea, y empezamos a conseguir el i. D. Cada elemento, lo que significa hasta ahora, todo HTML necesita tener un i d. Y eso es simplemente honestamente, no hay forma de vivir tu vida. ¿ Y si solo quisieras seleccionar el elemento pequeño o simplemente un enlace o simplemente un enlace particular ? ¿ Y si quisieras seleccionar algo por su clase? ¿ Y si quisieras seleccionar múltiples elementos que todos tienen algo en común? Podemos hacer eso con JavaScript, avisa JavaScript más moderno, y no verás esto un JavaScript más antiguo Y eso en realidad está bien, porque esto está súper bien soportado. Entonces para esto, vas a necesitar saber un poco sobre CSS. Entonces en el mundo de CSS como un pequeño curso rápido que tienes, esta es una clase, y entonces tienes y yo d declaración. Y luego tienes una declaración de elementos y eso es solo sobre eso. Y entonces podemos ponernos más fantasiosos con los dos. Entonces sí nos gusta clase y luego un elemento hijo con el yo d de I d y luego un elemento hijo de un vínculo y debilitarlo estilo de esa manera. Y así punto significa hashtag clase significa i d. Y si ninguno de ellos se presenta, entonces estamos asumiendo que es un elemento. Entonces ese es un curso rápido, rápido de crash en selectores CSS. Eso es más rápido. Creo que alguna vez lo he explicado. Pero oye, no aprendamos sobre CSS. De hecho, nos metamos en algunas de estas cosas asquerosas porque esto va a ser bastante divertido. Entonces tenemos esta cosa nueva llamada selector de consultas. Así que sigamos adelante y escribamos un selector de consultas y vamos a conseguir el título tal al título de Vire y hagamos que sólo un poco más grande aquí. Título de fuego y queremos conseguirlo por su yo D. Vale, bueno, podríamos hacer eso para que pudiéramos hacer documentos, no te den elemento por i d título y luego título no texto interno es igual a cambiado por defecto es va a decir hola mundo. Este es el título y es bueno tener un elemento hijo ahí dentro, un elemento pequeño, y me acaba de cambiar a mí también. Si cargamos esto, acaba de cambiar. De acuerdo, entonces sabemos que esto está funcionando, pero no queremos conseguirlo por su d Así que vamos a darnos una clase. La clase es igual a título y vamos a seguir adelante y simplemente desechar esta idea porque la hemos estado usando tan a menudo y honestamente, no muchos elementos tienen ideas. Entonces sigamos adelante y tratemos de conseguir esto por su título o su clase llamada título. Entonces lo hacemos. Título de punto selector de consulta Al igual que es CSS. Entonces vamos a agarrar el 1er 1 ahora selectores de consulta, solo vamos a agarrar el 1er 1 Así que si hay otro elemento aquí con un nombre de clase de título, sólo va a agarrar el 1er 1 para encontrar moviéndose de arriba a abajo. Así que asegúrate de que cualquier clase que estés usando sea única. En este caso, sería, ah, ah, mejor práctica usar un I d en lugar de una clase, pero sigamos adelante y danos un tiro de todos modos cambiado usando una clase bam cambiado usando una clase. Y si hacemos este título, en realidad podemos ver en cuanto lo escribo aquí, es seleccionar ese nodo entero. De acuerdo, tengo que comparecer eso porque ahora quiero seleccionar lo pequeño. ¿ Cómo selecciono un elemento dentro de un elemento? Bueno, si quisiera, podría llegar lejos. Pequeño es igual al selector de consulta de punto de documento y solo escribe pequeño y esto lo obtendrá. Esto lo conseguirá por su nombre de elemento para que podamos hacer algo a lo largo de las líneas de internet. 21 texto interior de punto pequeño es igual a wow, soy texto diminuto. Y ahí está, mientras soy minúsculo impuesto, todo gorras. Pero no cambió el mundo hola. Este es el título. Acaba de recibir éste. Entonces eso es bastante guay. Podríamos hacer eso también. Ahora y si en algún lugar por el camino tenemos una clase grande, Tal vez sea ah card de algún tipo y queremos conseguir un elemento en particular dentro de ella. Entonces, solo finjamos que esto es mucho más complejo y mucho más grande. Entonces tenemos una clase llamada título y queremos conseguir sólo el elemento pequeño. Recuerda, selector de consultas va a conseguir el primer pequeño que encuentre. Entonces, realmente vamos a crear un ejemplo aquí. Pequeño. Este es primero y mira. Cámbiame a no va a cambiar, pero éste primero va a cambiar y ahí está. Seleccionó la primera pequeña. No seleccionó el 2do 1 Acaba de recibir el 1er 1 ¿Qué pasaría si quisiéramos conseguir éste? Bueno, actualmente, no tenemos forma de hacer eso. No sabemos cómo conseguir el 2do 1 Así que sigamos adelante y agarramos solo el 2do 1 Entonces lo que podemos hacer aquí es comentemos esto. Vamos a crear otro aquí llamado. También lo llamaremos Virus Pequeño. Pequeño es igual a, y luego podemos hacer title dot query, selector, small. Y así en lugar de conseguir todo el documento o modelo de objeto de documento y mirar a través él, sólo estamos mirando a través del título en North Ince. Cualquier cosa que esté dentro de ese título con un elemento llamado Pequeño agarró el 1er 1 ahí. Entonces ahora podríamos hacer un pequeño punto en su texto es igual a qué, ¿ qué? ¿ Qué? ¿ Qué? Wow, y bam. Mira eso. El 1er 1 se mantiene sin cambios. Se cambia el 2do 1. Impresionante. Entonces ahora sabemos seleccionar un elemento por su clase, y sabemos seleccionar un elemento que es un elemento hijo de ese elemento original. En este caso, seleccionamos el elemento hijo del H. De acuerdo, voy a comentar esos fuera y vamos a seguir adelante y cambiar sólo el texto del enlace. Nosotros también podemos hacer eso. Ya hemos visto esto, pero, oye, oye, unos ejemplos más nunca duelen hasta ahora. A para mi presentador invitado es igual a documentos. Consulta holandesa, selector A y vamos a hacer un texto interno de punto es igual a la codificación para todo el mundo dot com bam codificación para todo el mundo dot com. Entonces ahí está ese ejemplo es, bueno, eso es solo seleccionar un elemento basado en el nombre real del elemento. No una clase, ni un yo d Sólo el nombre del elemento. Ahora todo eso está bien y bien. Adelante y comentemos esta oda y también esta y también esta. Vamos a seguir adelante y crear una instancia donde necesitamos seleccionar múltiples clases. Entonces vamos a crear un nordeste de aburrido una lista nórdica nada de fantasía aquí. Y hagamos L I aliado número uno. Y adónde vas a ir Una y otra y otra vez. Entonces aquí, tengo un nordeste con siete elementos en él. Entonces sigamos adelante. Número 1234567 Así que tenemos artículos de lista aquí. ¿ Y si quisiera seleccionar todos estos elementos de la lista? ¿ Cómo voy a hacer eso? Bueno, lo que podría hacer es abrir una nueva etiqueta de script aquí, y en realidad se puede ver que el código V s va a tratar de auto completar esto por mí. Entonces es du var aliados. L Ojalá pudiera hacerlo apóstrofe ahí. Pero aliados es igual a documentos. Entonces mira Queary selector todo, y podemos darle exactamente lo mismo. En este caso, sólo queremos seleccionar un elemento. No, no vamos a hacer nada con esto todavía, pero echemos un vistazo y nos pongamos muy pequeños. Y entonces vamos a refrescarnos y lo hizo, uh, Aliados, esto te va a parecer algo familiar a estas alturas. Hagamos realmente este rollo de tambor más grande, por favor. Es una nota. Una lista. Pero, oye, cuando lo miramos, ¿esto no se parece mucho a una matriz? Entonces, una vez que aprendimos a recorrer un array, podemos aprender a mirar a través de un nodo lis con bastante facilidad. Y viene con todo tipo de cosas aquí, también. De acuerdo, entonces en nuestra lista de aliados, tenemos el cero de Index a seis o en términos humanos, uno a siete. Agarremos el 1er 1 y solo cambiemos ese texto. ¿ Cómo haríamos eso? Porque es una matriz con un índice. Bueno, sabemos que básicamente es una matriz. Parece una matriz. Podríamos agarrar el 1er 1 Ahí vamos. En realidad podemos ver eso. Está resaltado en mi modelo de objeto de documento. Y entonces podría hacer en su texto. Y podría cambiar eso por cualquier cosa. Yo quiero lo que quiera y mira eso. Funcionó. Por lo que ahora podemos cambiar cualquiera de estos. Entonces digamos que queríamos el número cinco. Bueno, ¿qué número es ese? Recuerda, computadora, empieza a contar en el número cero, no en el número uno. Por lo que queremos volver. Uno para ello. Seleccionado el html interno de un punto derecho es igual a H R. Sí. Hola. Hola. Hola. Hola. Hola. Bam. Ahora hay un eslabón dentro de ti. Y en realidad, si hacemos click derecho e inspeccionamos cuando veas que hemos agregado un enlace a nuestro modelo de objetos de documento . Eso es totalmente nuevo. Eso no estaba ahí en el código fuente. Eso lo agregamos dinámicamente. De acuerdo, ahora, eso es todo divertido y juegos. Pero ¿y si quisiéramos obtener el valor de un campo de texto o una entrada de texto? Entonces sigamos adelante y creemos un nuevo ejemplo aquí. Mm. Vamos a crear una entrada. Simplemente le voy a dar un tipo de estilo de texto. Hagámoslo grande relleno. 30 pixeles. Tamaño de fuente, 30 píxeles. Entonces, ya sabes, bastante grande. Vamos a darle un nombre de clase. Algo con lo que estaba algo familiarizado. Si alguna vez has trabajado con bootstrap llamado Form Control. Ahora bien, esto no va a quedar bien, pero tendrá un nombre de clase. Está bien, Genial. Tenemos área de texto grande aquí bastante fácil. ¿ Y si queremos conseguir ese valor? Bueno, vamos a darnos un valor predeterminado valor de en Low World bla, bla porque realmente no importa lo que sea. Nosotros sólo queremos conseguir este valor. Vamos a seguir adelante y crear un selector de consultas donde realmente podamos obtener ese valor. Entonces tenemos un nuevo script aquí, y vamos a llamar a esta variable La entrada es igual a los documentos dot queary selector, y solo queremos seleccionar el 1er 1 causa solo hay uno en aquí control de forma punto cuando eso nos dará nuestro 1er 1 Entonces podríamos hacer entrada de registro de puntos del consejo y luego simplemente el valor. Y eso es sólo valor médico. Entonces sigamos adelante y actualicemos tu página. Podemos ver Hola mundo bla, bla, bla. Eso es exactamente lo que hay aquí. Y si cambiamos esto a hola hola, yo también cambia ahí. Muy bien, Así que como un rápido refresco de todo, acabamos de pasar a agarrar un elemento por su título y solo uno de ellos. Utilizamos selector de consultas, y puedes usar electores CSS, como normalmente lo harías en CSS. Y entonces acabamos de cambiar el impuesto interno. No es gran cosa. Entonces dijimos, en realidad, sólo vamos a conseguir estos pequeños, pero ese era el 1er 1 y tenemos que en la página así que acaba de cambiar el 1er 1 Entonces dijimos Vamos a crear otra variable llamada pequeña. Pero en lugar de consultar a través del documento, preguntamos a través sólo del título, que ya hemos seleccionado aquí arriba. Esa es una nota que sí existe. Y así hay un título aquí y vamos a decir dentro de ese título, buscar un elemento pequeño y dentro de eso acaba de cambiar el impuesto interno a Wow! ¡ Wow! ¡ Wow! ¡ Wow! ¡ Wow! Y luego dijimos: Oye, Oye, ¿sabes qué? Solo queremos agarrar un enlace regular justo el 1er 1 de la página y cambiar el inter texto un recubrimiento para todo el mundo dot com No es gran cosa. Y luego dijimos: Oh, Oh, en realidad, vamos a agarrar múltiples elementos. Agarramos a todos los Aliados Creó una matriz como objeto llamado un nodo una lista, y agarró a cada aliado, los siete de ellos. Y entonces en realidad pudimos cambiarlo simplemente seleccionando uno a la vez con su número de índice adecuado . Y por último, no tenemos campo de entrada aquí con una clase de control de formulario, que agarramos. Sólo había uno, así que usamos selector de consultas, no selector espeluznante, todo como hicimos con los aliados. Esto agarró a los siete. Esto sólo agarra el 1er 1 que puedes encontrar en una página, y entonces no podemos junto con el valor de entrada. Entonces, cualquiera que fuera el valor que estuviera en la página, en realidad pudimos conseguir eso y la consola registrarlo. Por lo que ahora estamos empezando a construir alguna interactividad entre el usuario y nosotros. Ahora, tu más grande para llevar es honestamente, este de aquí, probablemente sea el más simple. Entonces lo que me gustaría que hicieras como una pequeña tarea rápida, un poco de tarea dale una toma a esto, crea una nueva entrada y luego usa documento un selector de consulta para agarrar esa entrada, Tal vez use una clase use un I D. Tal vez sólo tiene que utilizar el nombre de elementos regulares llamado entrada. Dale un valor predeterminado y luego registra en la consola ese valor predeterminado. Si pudieras hacer eso, estamos bien para ir a la siguiente lección porque vamos a empezar a trabajar con muchos más eventos, y aquí es donde nuestro JavaScript se vuelve mucho más dinámico y se vuelve mucho más divertido. No es que esto no fuera divertido para nada, pero realmente tuvimos que pasar por muchos de los fundamentos para poder llegar aquí. Pero ahora podemos empezar a crear páginas que tengan oyentes de eventos. Podemos desencadenar eventos cuando alguien hace clic en un botón o envíe un ex tipos a un campo de texto . Así que adelante, danos una oportunidad. No lo olvides. Si tienes preguntas, déjalo abajo. Sé baja para mí. Siempre estoy feliz de ayudar. De lo contrario, si estás sintiendo confianza en esta lección, vamos a pasar por la siguiente donde vamos a aprender sobre los eventos. 29. Introducción a los eventos: eventos son lo que hace a javascript realmente impresionante. Cuando alguien hace algo como escribir en un campo de texto o haga clic en algo, haga clic en un desplazamiento de botón, envíe un formulario. Esto es lo que hace que Javascript sea realmente interactivo. Ahora realmente hay dos formas primarias que podemos hacer este fin de semana crea un oyente de eventos, que vamos a cubrir en un video posterior. O podemos crear eventos basados en HTML, que es a lo que nos vamos a quedar por ahora porque es una buena transición a JavaScript. Listeners de eventos de Bind ID. Entonces olvida que hasta dije esa última parte. Empecemos con un simple botón. Entonces sigamos adelante y creemos un botón aquí. Tenemos un botón. Clásica BBT nbt n primaria. Si estás usando bootstrap o algo así, vamos a asegurarnos de que este es un botón regular. Entonces tipo es igual a botón, y esto va a decir Click me. Está bien. Tenemos ah, botón aburrido aquí. Y cuando hago clic en él, sí, no hace nada, pero lo que podríamos hacer es que podemos usar al hacer click. Entonces si recuerdas usar esto en HTML o si recuerdas algún tipo de aprender al respecto, lo estamos viendo. Aquí es donde vamos a usar al click. Ahora. Se dan varios otros eventos. Hay en enviar en Haga clic así y así sucesivamente y así sucesivamente. Ahí hay toneladas de ellos. No podría ir por encima de todos ellos, pero el evento on click es el que vamos a usar para activar algún JavaScript. Entonces sigamos adelante y pongamos esto en líneas separadas. Entonces eso sólo se ve un poco más bonito. Y en Click, queremos ejecutar alguna función JavaScript. Entonces vamos a crear una función llamada Click Me Ponga paréntesis ahí, y también necesitamos algo de JavaScript aquí también. Entonces función de script. Haga clic conmigo y eso coincide con este de aquí arriba, y no va a hacer nada en absoluto, y no va a tomar ningún parámetro en absoluto. Simplemente va a consola log cook y eso es todo. Agradable y sencillo. Pero mira esto. Puedo spam esto una y otra vez y otra vez, y simplemente se sigue haciendo clic. Y así esta es realmente la base detrás de un evento de click es cualquier momento que alguien hace clic en el botón va a ejecutar algún JavaScript, una función llamada Click Me Now en realidad podríamos conseguir un poco más fantasiosos con nosotros para conseguir. Hasta el momento, clics totales son iguales a cero. Hagámoslo. clics totales son iguales a los clics totales, más uno. Alternativamente, si vienes de otros idiomas, podría ser más fácil para ti hacer clics totales plus, eso es lo mismo que está haciendo. Más uno y vamos a hacer el registro de puntos de la consola. Has dado clic en este botón Total de clics veces y solo para que podamos ver esto en una línea para que se vea un poco más bonito. Has hecho clic en este botón Tiempo total de clics, así que has hecho clic en él una vez dos veces, tres veces, cuatro veces. Vamos a darnos un refresco. Se hace clic en eso una vez dos veces una vez. Eso me gusta dos veces tres veces cuatro veces, y sigue y sigue y sigue. Y así que eso es un evento click. Y realmente, lo que se trata JavaScript son eventos, porque ¿por qué tener algún JavaScript corriendo si alguien no va a tener algún evento pasando ? Si no necesitas la interacción del usuario, probablemente no necesites JavaScript en absoluto. Entonces sigamos adelante y hagamos que esto sea un poco más interesante. Vamos a crear una calculadora muy básica que va a ser. Básicamente, alguien suma un número dos, un número que ya existe. Entonces sigamos adelante y empecemos esto desde cero. Entonces tenemos una entrada. El tipo de campo va a ser un número. Clase podría ser como control de formulario porque vemos que mucho en bootstrap. Y vamos a seguir adelante y darnos un poco de estilo básico. Tan relleno 30 pixels, tamaño divertido, 30 pixels, color, color, borde azul, un píxel, azul sólido. Y eso debería verse lo suficientemente bien. Eso es demasiado grande. Hagamos eso. ¿ Ese pequeñito un poco más pequeño. Ahí vamos. Entonces tenemos un campo numérica aquí. De acuerdo, ahora necesitamos un botón. Entonces sigamos adelante. Crea un salto de línea y esto en un botón para conseguir un botón en. Clase de año es igual a no conozco Bt y me ganaron Ian Primary. Al igual que en bootstrap. No estamos usando bootstrap, aún no. Entonces eso no va a hacer nada, pero también podríamos estilo es si quisiéramos. No agreguemos 100 así que sea cual sea el número que esté en número se va a sumar al número 100. Por lo que realmente es media calculadora en este punto porque no estamos dando dos números. Solo estamos dando uno y diciendo, Vamos a sumar 100 Ahora hagamos de esto un poco de financiador y hagamos realmente que esta página haga algo diferente. Entonces vamos a hacer, ah, tirar cada uno por aquí. El total es y entonces podríamos decir lapso. Y luego lo que sea ese total va a ser. Entonces. Actualmente, cuando cargamos la página, no hay total. Veamos cómo se ve esto. Teníamos un campo numérico aquí, que parece bastante asqueroso. Entonces podemos sumar 100 y el total aún no es nada. Añadamos algo de JavaScript para hacer de este guión divertido. Siempre tenemos que sumar 100 porque eso es lo que estamos haciendo. Entonces digamos Vyron, um es igual a 100. Es sólo una especie de cómo se está desplegando este ejemplo. Siguiente. Necesitamos crear algún tipo de función en click, así que yo en Click es igual a Llamémoslo Calcular y ponemos eso en nuestro botón. Ahora podríamos hacer cálculo de función que va a tomar ningún parámetro porque va a agarrar automáticamente valores de la página. Por lo que ahora necesitamos agarrar este campo de entrada, que tiene una clase de control de forma. Es el único aquí dentro, así que solo podemos hacer un selector Corey regular en lugar de un selector de consulta. Todo hasta ahora, entrada es igual a los documentos dot queary selector y seleccionado por su clase CSS de nuestro valor va a ser el valor de punto de entrada. Pero vamos a mecanografiar eso como un número, asegurémonos de que siempre sea un número, y entonces podríamos hacer, ya sabes, si el valor. Entonces si en realidad es número, no vamos a llegar tan lejos en esto. Creo que eso va a contaminar un poco esta lección, pero también podríamos hacer algo así como el valor total lejano es igual al valor más 100. Ese 100 ya existen en un muy audaz llamado entumecido justo ahí. Entonces ahora tenemos un valor total y tenemos que seleccionar a este tipo. Entonces vamos a crear un selector de consultas para agarrar el H. Y luego vamos a crear otro selector de carrera para agarrar el lapso, y podríamos simplemente seleccionar esta banda porque es la única en la página. Pero, ¿y si no lo fuera? No era el único en las páginas podría ser un poco más complicado. Vamos a crear var. Edad uno es igual a los documentos dot queary selector. Sabemos que este es el único en la página, por lo que podemos simplemente usar un selector de consultas regular H uno y luego podríamos hacer far span es igual a H un punto selector de consulta span. Ahora que tenemos eso ahí dentro, podemos decir pasar punto texto interno es igual a cualquiera que sea el número. Entonces pongamos el valor total ahí dentro. Y veamos si Caleb ha cometido algún error. El registro de la consola no se está quejando de nada que haya puesto un número aquí. Pongamos el número nueve Oh, sí, mira eso. No puede encontrar algo no puedo establecer propiedad inter texto de No. Ah, no sabe dónde encontrar eso. Entonces ahora depuramos, y esto es una gran parte de la codificación también. En realidad me alegro de que algunos de estos errores surjan para que en realidad puedas ver cómo alguien hace este tipo de depuración. Entonces tenemos una función aquí dentro y queremos agarrar esta h. Entonces vamos a agarrar eso. Y cuando tecleamos H 10 miren eso. Es porque no es el único de edad en la página, ¿eh? Bueno, podríamos hacer una de dos cosas. Podríamos deshacernos de éste, o podríamos hacerlo de la manera javascript y podríamos hacer consulta, selector, todo menos porque esto regresa y una lluvia, sabemos todo sobre indexación, y sabemos que hay por lo menos dos H uno ahí dentro. Queremos el 2do 1 Solo agarra uno, porque recuerda, computadora, empieza a contar a cero, no al número uno. Probemos esto otra vez. Eso es sólo deshacerse de eso. Y pongamos el nueve Número 23. Oh, mira eso. Y ahora tenemos algo de calculadora por lo que podríamos poner aquí cualquier número que yo quiera. Y sólo va a sumar 100. ¿ Y si no tengo nada ahí dentro? Nada. De acuerdo, ¿y si tratara de poner el nombre Caleb? Ah, es un campo numérico, así que html no me permite poner números son letras. Solo quiere que los números sean tan geniales. Eso es un poco de seguridad ahí. Entonces hagamos 01 ¿Qué pasa ahí? Sigue siendo 101 Y así ahora en este punto, tenemos algo de un prototipo de calculadora que funciona. No hay nada en el registro de la consola. Lo estamos haciendo todo en la página real y ahora nuestras páginas se vuelven mucho más dinámicas. Aquí es donde se pone mucho, no más divertido, porque en realidad puedes ver tu progreso en este momento ahora volviendo a nuestra función. En realidad no estamos devolviendo nada que pudiéramos, pero como es un oyente de eventos, no necesita devolver nada. Simplemente necesita dedo del pie ejecutar un montón de código. Y eso es lo que hicimos. Dijimos: Oye, Oye, ejecuta estas seis líneas de código pero, ya sabes, envuélvala en un nombre llamado Calcula que solo podemos escribir calcular aquí. Entonces de verdad, lo empaquetamos en una bonita caja de Amazon, y dijimos, Hey, esta caja tiene una pegatina en ella llamada Calcular, y dentro de esta caja hay seis comandos. Al abrir esa caja, la caja de cálculo hay seis comandos en sus seis elementos, y así esa es la base detrás de los eventos de JavaScript. Ahora hay mucho más JavaScript que forma de hacer esto, llamado oyente de eventos. Pero este es un muy buen Segway en eso Ahora, lo que me gustaría que hicieras es probar esto. Crear un evento on click que vuelva a utilizar una función. No necesita ser súper complicado. No sientas que tienes que impresionar a nadie con ello. Simplemente necesita hacer algo, cualquier cosa. Podría incluso el registro de consola si lo quisieras. Si te atascas en el camino Hey, hay una sección común abajo abajo. No lo olvides, estoy aquí para ayudarte. Y si te sientes bastante seguro de que tienes esta palmadita abajo, pasemos a un proyecto más grande. 30. Proyecto calculador de consejos de JavaScript: Está bien. Hola y bienvenidos a tu primer gran proyecto ish. Hemos hecho un montón de muchos proyectos hasta ahora, y en este punto, vamos a trabajar en un proyecto más grande. Entonces un punto realmente trabajamos en una calculadora de puntas, y acabamos de escribir el javascript para ello, pero en realidad no escribimos el front end, que es un aspecto importante de JavaScript. Entonces en este proyecto, vamos a estar creando una calculadora de propinas y en realidad mostrando los totales en el modelo de objetos de documento en el navegador real. Entonces hay algunas cosas que me gustaría que hicieras. En primer lugar, necesitas tener un monto de factura por mucho que vaya a ser. Necesitamos un campo de entrada para agarrar ese valor ese número, necesitamos un propina por ciento, y luego vamos a necesitar algún tipo de evento. Entonces cuando hacemos clic en calcular, propina y factura total, en realidad va a funcionar esos números, y luego nos va a decir cuánto debemos propina y cuánto será la factura total con la propina. Entonces para esto, vamos a usar el evento on click en el botón y luego también vamos a usar un par de selectores de consulta para agarrar estos valores, por lo que debería haber un evento de cálculo y al hacer clic en eventos. Por lo que cada vez que haces clic en este botón, calcula el total de la propina y la factura total con la punta en la parte superior de la misma. Se supone que tiene que agarrar los números, cualesquiera que sean los números que estén aquí en el momento en que se haga clic en el botón y luego se va a mostrar el monto total de la propina y el monto total de la propina con la factura encima de eso. Ahora, como pueden ver, ya tengo algo de ah, el diseño construido aquí. Solo estoy usando bootstraps regulares, así que no hay nada de fantasía pasando, y vamos a usar un javascript de vainilla para hacer esto. Ahora vas a estar usando una función Ah, y evento y una serie de Selectores de consulta. Ahora bien, me gustaría que le diera a esto una oportunidad por su cuenta. A ver si puedes resolver esto por tu cuenta. En este momento, puedes pausar el video aquí mismo y darle una toma. No debería tomar más de 15 o 20 minutos en total. Y oye, ¿sabes qué? Si te quedas atascado, solo reanudas el video y te mostraré exactamente cómo hago la solución. Muy bien, echemos un vistazo a cómo crearía una calculadora de propinas usando a campos de entrada y un botón . Entonces vamos a pasar por mi tú primero el html solo para que sepas con qué estoy trabajando aquí dentro. Tengo una etiqueta para el monto de la factura un yo d para el monto de la factura, y eso es sólo la factura total regular. Vamos a poner un número ahí dentro. Por ejemplo, 25 99. Cualquiera que sea la comida que va a costar, digamos que estás en un restaurante en costo 25 99. Este es el monto de la factura, así que estaré usando un I D. Pero puedes usar una clase si quisieras. Te vendría bien cualquier otra cosa. Cualquiera que sea la forma en que quieras seleccionar este elemento, eso depende de ti. Pero voy a usar un I D porque es el único que va a estar en esta página. Básicamente hice lo mismo con una propina. Cantidad a cantidad selectiva va a ser un porcentaje tiene un I D. Podemos ver que aquí las ideas, cantidad de propina y el marcador de posición es AII como nueve o 9% y vamos a tener que tomar ese 9% y convertirlo en decimal. Y entonces tenemos un botón aquí. Entonces tenemos,ya sabes, ya sabes, algo más de formato aquí, pero principalmente tenemos un botón que dice Calcular Sugerencia y factura total. Y por último, tenemos una fila que aún no podemos ver, y en realidad voy a demostrar este 123 y luego 456 Y aquí es donde vamos a mostrar el monto de la propina y el total con la propina, así que sólo porque no tengo ninguna valores en su parece que actualmente es invisible. Entonces cuando esto se calcule, vamos a llenar estos dibs con algún tipo de texto o HTML en él. Adelante y empecemos esto. Vamos a diseccionar esto moviéndose hacia atrás. Queremos esta forma cuando en realidad no es realmente una forma. Es un evento. No está usando un formulario. Elementos no estaban enviando un formulario. Necesitamos un evento en el botón. Entonces cada vez que alguien hace clic en este botón, tiene que hacer algo primero. Las cosas primero es que vamos a nuestro botón y usamos en click, y luego necesitamos darle un nombre de función. Entonces vamos a darle, ah, función, objetivo de calcular. Y en ese punto, el proyecto realmente empieza a guiarnos. Por lo que hemos calculado que no están haciendo esto sólo un poco más grande. Aquí tenemos un funcionamiento aquí llamado Calcular, y ahora necesitamos agregar un script aquí, y necesitamos crear una función llamada Calcular. Ahora no sabemos qué va a llevar esto todavía, pero sí sabemos que tenemos una función llamada Calcular y tiene que existir. Así que sigamos adelante en un registro de consola clicado. Y cuando refresque la página y abro mis herramientas de inspección aquí en el cabildo, y sólo hagamos eso más grande, vamos a dar click aquí click, click, click, click, click como Ok, bueno. El evento click es que estamos trabajando. Siguiente. Tenemos que poder agarrar el monto total de la factura y el monto total de la propina. Entonces, ¿cómo vamos a agarrar estos elementos? Bueno, sabemos que estos elementos son insumos, por lo que necesitamos agarrar el valor de los mismos. Actualmente, no hay valor ahí dentro, pero cuando escribimos, podría haber un valor ahí dentro. Así que sigamos adelante y creemos un selector de consultas para cada uno. Se creó variable para el monto de la factura y eso va a ser documentos punto No, no vamos a usar selector de críticos Vamos a usar get element by i d. ¿ Y qué fue eso? Yo d. tenemos cantidad de factura y cantidad de propina cantidad sentir y tenemos lo mismo aquí abajo. Cantidad de propina. Eso está cerca del fondo sur. Algo difícil de ver ahora. Estos son sólo los nodos, estos aire, los elementos HTML. Este no es el valor real. Por lo que podríamos en este punto hacer algo así como el valor de punto. O podríamos poner estos en nuevas variables o sobrescribir las variables existentes con algo así como cantidad de punta es igual a cantidad de propina ese valor. Y no deletreé ese derecho, porque esa es técnicamente una variable diferente. Ahí vamos. Por lo que podríamos hacerlo de dos maneras aquí. Voy a dejar los dos aquí dentro sólo como ejemplo. Ahora, este punto, no sabemos si ninguno de estos son números, así que vamos a tener que trabajar con eso. Un poco y sigamos adelante y echemos estos como números. Digamos que el monto de la factura es igual al monto de la factura, y aquí solo queremos echarnos como número y queremos hacer lo mismo con el monto de la propina. Pero en realidad podríamos hacerlo aquí de esta manera. Y de hecho podríamos incluso hacerlo de esta manera. Entonces ahora sigamos adelante y el registro de consola. Consejo de Traje Liza. Pensé, Log factura monto y el monto de la propina. Y así cuando refresco la página y pongo un número aquí, digamos que 12 es el 1er 1 y 34 es el 2do 1 Vemos 12 y 34. Entonces sabemos que estos están funcionando. Y si tuviéramos que registrar en consola el tipo de cada uno, sabríamos que serían un número. Por lo que ahora podemos hacer matemáticas apropiadas con ellos. No tenemos que preocuparnos por que Katyn pueda ating? Es para que el total resulte ser 1234 Sabemos que si sumáramos estos juntos, sería 46 en lugar de 1234 Así que es una edición real y no se tomó Captain ation, y nos aseguramos de que ese sea el caso usando un número. No, el monto de la propina es actualmente un número. El monto de la propina es por defecto. Bueno, por defecto , son nueve. Pero ahora mismo tengo 34 mostrando, así que por defecto es nueve como el texto de marcador de posición. No es lo que es el defecto real, pero dice que es tu sabes ejemplo. Nueve. Tenemos que convertir esto en un decimal, así que sigamos adelante y cambiemos. El monto de la punta es igual a cantidad de propina dividida por 100 para que apenas cambie nueve. Entonces digamos que nueve se va a convertir en 0.9 Eso es básicamente todo lo que va a dar. Y ahora, en este punto, necesitamos crear una cantidad total de propina. Entonces tengo algunas convenciones de nomenclatura bastante malas aquí porque solo lo estoy llamando a todo cantidad de propina . Quizás quieras renombrar el tuyo para que sea un poco más detallado, poco más discreto, para que siempre sepas con qué estás trabajando. Yo solo voy a usar cantidad de propina aquí, y voy a crear una nueva variable llamada Tip total de nuestra propina Total es igual a los tiempos de cantidad de factura , el monto de la propina y eso es todo. Y en este punto del tiempo, si guardo y refresco la página, aquí no hay errores. Y sé que ahora puedo seleccionar esto y poner ahí la punta total. Entonces sigamos adelante y hagamos eso. Hagamos documentos. No consultes selector. Queremos utilizar la cantidad de propina. CSS selector punto inter html. Normalmente hacemos esto en un par de pasos diferentes, pero en este caso sólo lo vamos a hacer todo en una línea. Y ese Inter html simplemente va a ser el consejo total que podríamos usar HTML interno o con uso . Los textos inter no estaban usando HTML, por lo que probablemente deberíamos usar inter texto. Pero quizá queramos darle sabor a esto un poco más tarde. De acuerdo, así que puse digamos 50 y 10. Y si esto funciona fuera de la cantidad total de propina debería ser cinco y todos dicen cinco ahí mismo . Es un poco pequeño. Eso haremos más grande y de hecho, porque es HTML, podríamos decir macho HD, punta total y luego aquí dentro podríamos hacer que un pequeño elemento en Katyn se comiera todo esto. Y de hecho, lo que quiero hacer es en realidad dividir esto en nuevas líneas. Así que vamos a hacer var tip html, y esto sólo lo mantiene agradable y limpio poniéndolo en dos líneas. Y así cerré la etiqueta pequeña y la etiqueta H tres, y luego puse HTML de punta aquí y volvamos a ejecutar esto. Entonces de nuevo, pongamos algo así como 100 poner una cantidad total de propina del 25%. Entonces sabemos que 25 de 100 va a ser 25 sobre propina total 25. Podríamos poner un letrero de dólar ahí si sabes que estás trabajando con dólares y algo que no aprendimos. Pero, ya sabes, podría ser un poco divertido trabajar con él. Si quieres puntos decimales ahí dentro, podrías hacer para arreglar dos y eso Solo asegúrate de que siempre haya dos puntos decimales ahí dentro, así que sigamos adelante y actualicemos y demos una oportunidad a esto. 125 y esto dirá 25.0 Así que no espero que sepas el para arreglar las cosas, pero, oye, ese es un truco genial, y me gusta tirar esos pequeños trucos y consejos a estas soluciones de proyectos también. Algo así te familiariza más con algunas de las diferentes formas. Podemos hacer cosas en JavaScript sin necesidad necesariamente de toda una lección a su alrededor. Por lo que tenemos nuestro total tep. Ahora necesitamos los montos totales de factura. Hagamos var monto total de la factura, y todo lo que queremos hacer aquí es agregar la propina total, la que ya hemos calculado al monto de la factura. Ese es el monto regular de la factura. Y sigamos adelante y copiemos esta línea aquí porque no vamos a cambiar demasiado. Por lo que el correo de punta HD va a ser. Se trata de un proyecto de ley html total con propina, y vamos a necesitar cambiar esto para igualar el monto total de la factura. Y así esta variable ahora coincide con esto muy. Pero pongamos esto también en líneas separadas. Hagamos esto. Hazlo agradable y fácil de leer. Y luego, por último, sólo necesitamos agarrar nuestro elemento de nota de los machos HD. Necesitamos utilizar un selectores de consulta de selector de consulta de punto de documento. No queremos la cantidad de propina que queremos al total con propina. Si tan total con punta y podríamos hacer interior. HTML es igual a Bill HTML. Vamos a refrescarnos y vamos a darnos una oportunidad. Hagamos algunos números básicos para que sepamos que esto siempre va a funcionar. Entonces tenemos una factura de $100 en propina de 25.25 por ciento, no 25 25 de un 125% de los cientos que van a ser 25. Por lo que el monto de la propina debe decir 25 y luego el monto total de la factura. Asumiendo que hicimos todo bien van a ser 125 dólares y boom. Al igual que eso, tenemos propina total $25 factura total con la propina $125. Y vamos a seguir adelante y hacer algo un poco un poco más loco, porque las facturas no suelen ser solo $100 digamos 87 punto 43 así que es $7.43 y cantidad de propina como porcentaje. Entonces tal vez en general te gusta dar 15% y no quieres trabajar esa matemática en tu cabeza Así que solo tienes que hacer clic, calcular propina y factura total y te dice que a tu nueva propina va a ser 13. 11 y tu factura total va a ser de 100.54 dólares. Entonces ahí tienes. Ese es un proyecto de calculadora. Es el proyecto de calculadora de punta es uno más grande, y estamos usando un poco más de funcionalidad dentro del modelo de objeto de documento. Por lo que en realidad estamos usando valores de entrada en realidad lo estaban calculando con una función. En realidad ni siquiera estamos devolviendo nada porque esto tiene más que ver con eventos y no realmente almacenar datos como variable. Realmente no necesitamos devolver nada. Pero si quisiéramos, sólo por buena medida, siempre podríamos devolver el monto total de la factura así. O si quisiéramos poner esto en una matriz, podríamos decir, Ah, Ah total de la propina, el monto total de la propina coma el monto total de la factura. Sé que tenemos acceso a esta función en la consola del navegador para que podamos ejecutar, calcular, calcular, y solo va a agarrar los números de nuestra página automáticamente y va a devolver un array con el monto de la propina y el monto de la factura el propina total en la factura total. Entonces sigamos adelante y nos demos un refresco. Y hagamos esto. Digamos que 92.67 y el monto total de la propina va a ser de ocho. Y aquí podemos decir que los totales se van a calcular y no se necesita ningún parámetro. Es agarrar automáticamente los parámetros que requiere de los campos de entrada de su modelo de objetos de documento. Y mira eso. Cambia automáticamente nuestra página. Además, también devuelve el monto total de la propina más el total de la factura con la punta, aunque parezca que devolvió cadenas. Entonces si quisieras, realidad podrías cambiar eso en un número. Pero, uh, así que eso es todo lo que hay para la calculadora de propinas. Espero que hayas aprendido algo realmente genial. Y como siempre, si tienes preguntas, inquietudes, comentarios, siempre puedes dejarlos abajo. No lo olvides, siempre puedes tomar todo tu código. Puedes tomar una captura de pantalla de tu código como yo tengo. Tengo a mi editor justo aquí, y luego tengo mi producto final justo aquí. Puedes tomar una captura de pantalla de eso y compartirlo como tu proyecto. O puedes tirarlo en bolígrafo de código. Si eso te gusta más y puedes compartir tu bolígrafo de código. Tú eres Ellen. Puedo echar un vistazo al código real y la funcionalidad del mismo para ti también. 31. Funciones de Anonymous: ya. Echemos un vistazo a las funciones anónimas antes de hacer eso. Espero que ese último proyecto saliera bien, donde creaste una calculadora de punta completa desde cero y especie de transición de eso a algunas cosas más basadas en funciones. Por lo que estas se convierten en un poco más de JavaScript e cosas donde una idea como una función anónima puede no existir en cada lenguaje de programación. Pero definitivamente es algo muy común en el mundo de JavaScript. Cuando se trata de una función, tenemos función de palabra clave, cualquiera que sea su nombre de función va a ser. Param un parámetro a montón de cosas. Devolver una cosa aquí. Esa es tu función básica. Voy a seguir adelante, comentar esto y vamos a seguir adelante y ver cómo se ve una función anónima. Por lo que una función anónima es una función sin nombre, y esto se mete un poco más en el alcance, que hablaremos un poco por el camino. El alcance es básicamente donde las variables son capaces de ser utilizadas o donde las funciones son capaces de ser utilizadas. Pero hablaremos de eso por el camino. No tienes que preocuparte por eso ahora mismo. Echemos un vistazo a una función anónima por lo que la función anónima podría almacenarse en una variable, por lo que tenemos variable get name. Y luego en lugar de crear un nombre de función, simplemente le damos a esto una función de función regular, y entonces podríamos darle un parámetro si queremos. Pero no vamos a hacerlo en este punto y luego justo como una función regular, podríamos devolver algo aquí. Entonces, por ejemplo, podría devolver mi nombre Caleb acarreo. Y cuando abrí esto en mi navegador, si escribo get name Oh, es una función. Mira eso. No es una variable en. Si hago tipo de get name, vamos a ver que es una función. Entonces, ¿cómo realmente conseguimos esto ahora? Por lo que parece una función. Básicamente, solo almacenamos para funcionar en una variable. Ahora para realmente hacer que esto funcione, necesitamos agregar paréntesis porque es una función, no una variable. Simplemente pasa a ser nombrado como si fuera una variable. Entonces usamos get name con los paréntesis aquí, hacemos eso un poco más grande, y verás a Caleb diciéndole. También podemos almacenar esto en otra variable . Entonces esa es una variable. Eso es lo que vamos a llamar variable uno, porque soy creativo de esa manera. Y entonces podría hacer consejo. Hagamos una advertencia. Disparen uno. Ahí está, diciendo Caleb. Y entonces eso es realmente todo lo que hay a una función anónima. Ahora, en este momento, probablemente estés pensando, Bueno, Bueno, ¿por qué alguna vez necesitaría eso si pudiera escribir una función regular? Bueno, una función anónima es básicamente, si tienes un montón de lógica o realmente alguna lógica que quieras realizar una sola vez, no necesariamente necesita ir en una función. Las funciones están destinadas a ser utilizadas una y otra vez. Pero si tienes código de grupo donde estás realizando algún tipo de lógica, o tal vez estás obteniendo un valor del modelo de objetos de documento de tu HTML y solo lo obtienes una vez. Bueno, entonces tal vez ponerlo en una función anónima, una función que solo alguna vez debería ejecutarse una vez es una buena idea. Y vamos a dar a esto un ejemplo sólido aquí. Entonces ya tengo bootstrap aquí, y lo que voy a hacer es simplemente configurar un sencillo layout bootstrap. De acuerdo, entonces aquí tengo una fila de contenedor. Llámalo no gran cosa. Tenemos un texto de entrada que tiene una clase de control de formularios y una personalizada aquí llamada Js Custom name. Este es el que vamos a querer usar aquí. Entonces, en nuestra función anónima, lo que podríamos hacer es devolver documento selector de consulta punto poner nuestro selector de consultas ahí, don value. Y ahora el nombre va a ser lo que digamos que sea. Entonces si refresco tu página aquí, tenemos una entrada. En realidad es la parte superior de la página fue un poco difícil de ver, pero si digo John Smith y luego ejecuto get name? Mi nombre es John Smith. Por lo que ahora podría decirlo. Ahora podríamos cambiarnos por cualquier cosa, Caleb Colleen. Y aquí abajo, podría correr get name otra vez, igual que una función regular. O podría almacenar esto en el nombre para poder decir nombre es igual para obtener nombre. Y ahora nombre siempre será nombre. No importa cuántas veces cambie. Entonces si cambio es de vuelta a John Smith y escribo un nombre, se queda como Caleb diciendo porque obtuvimos el nombre original y luego empezamos como variable. Ahora lo grande aquí es cuando estás usando una función anónima, realidad, solo deberías estar tratando de usarla una vez que tengas una o dos o tres o tal vez más líneas de código, y todo se supone que vaya a un variable regular. Entonces en lugar de almacenar esto como una variable, lo que podemos hacer es usar get name como una función casi como si se tratara de una variable. Entonces sigamos adelante y hagamos registro de puntos del consejo. Hola, mi nombre es y eso puede gato obtener nombre aquí como una función no como una variable. Y dice: Hola, Hola, mi nombre es John Smith. Y si cambio esto de vuelta a Caleb Tallinn y vuelvo a ejecutar, esto exactamente lo mismo va a cambiar. Se va a decir hola, mi nombre es Caleb llamando. Y así hay un caso de uso para esto. No vamos a meternos demasiado en esto ahora mismo, pero al final del camino, vas a ver mucho de esto en javascript más avanzado. Y luego si quisiéramos realmente hacer que esto se ejecutara automáticamente, así que no tenemos que correr esto cada vez. Podemos simplemente ejecutarlo en cuanto se cargue la página. Podemos envolver esto entre paréntesis en dos conjuntos más de paréntesis al final y un punto y coma , y esto es lo que llamamos una función invocada inmediatamente. Y yo i f e Hablaremos más de esto en la siguiente lección, pero básicamente esto va a correr de inmediato. Entonces si refresco la página aquí y escribo get name no como una función sino como una variable podemos ver que ya se ha corrido pasa a ser no hay nada ahí dentro. Entonces sigamos adelante y cambiemos este valor por defecto. Hagamos kylo ren. Entonces valor predeterminado aquí es kylo ren, y si me deshago de esto y tipo, conseguir nombre dice Kylo Ren. Por lo que ahora tenemos una función que se ejecuta automáticamente una sola vez y almacenándola como un nombre de variable llamado Get Name. Y así es como usamos de nuevo las funciones invocadas de inmediato. Hablaremos más de estos en la siguiente lección, así que solo voy a deshacer esto para tu tarea. En esta lección, en realidad no hay tarea. Voy a mantener eso ahí otra vez, esto es sólo algo que es realmente bueno saber. Vas a ver esto mucho más por el camino. Cuando comienzas una especie de salir al salvaje de JavaScript, vas a usar estos con mucha más frecuencia, pero esencialmente funciona exactamente de la misma manera que una función por lo que podrías pasar un parámetro si quisieras, y luego podrías llamarlo como si fuera una función regular. 32. IIFE: De acuerdo, echemos un vistazo a lo que se llama una función invocada inmediatamente. Básicamente, esta es una función que corre de inmediato. Entonces en la naturaleza, en JavaScript regular, vamos a ver una función regular que se ve algo así. Tenemos una palabra clave de función regular que el nombre de la función, tal vez un par de parámetros, y devuelve algo. No sabemos qué va a regresar. Podrías regresar básicamente cualquier cosa en. Entonces, Para ejecutar esa función, siempre tenemos que hacer algo así como este nombre de función poner en el primer parámetro, poner en segundo parámetro y tal vez empezar como sabes, una variable de algún tipo, y que lo ejecuta automáticamente en la última lección. lo que miramos fue algo un poco diferente, una función anónima, y como que nos metimos y yo i f e e inmediatamente invocó la función Expresión es en realidad lo que se llama para dejarme escribir eso. He estado diciendo i f e, pero no lo he dicho todo, así que i f e es igual e inmediatamente invocado expresión de función. Y así estas son básicamente solo funciones que se ejecutan automáticamente. Y cuando hagamos esto, vamos a ver que esto realmente funciona. Entonces sigamos adelante y refresquemos. Tengo un valor predeterminado en mi campo de entrada porque eso es lo que está agarrando el selector de curry de documentos Js doc Nombre personalizado y está devolviendo el valor. Por lo que tengo valor predeterminado de kylo ren y cuando refresco parece que no pasa nada. Pero cuando usas get name aparece su kylo ren, por lo que para crear una función invocada de inmediato. Básicamente, todo lo que hacemos es tomar una función. Haremos éste primero. Esta es una función anónima, por lo que simplemente ponemos un corchete de apertura al principio cierre de corchetes al final y luego un conjunto de corchetes o paréntesis, más bien un conjunto de paréntesis al final. Y eso le dice a Javascript. Oye, cuanto veas esta función, ejecútala. Y así lo hace. Y entonces no, solo podemos usar get name en lugar de lo que habríamos tenido que ver con la función regular , que es obtener nombre como función. En realidad se puede ver que hay un aire tipo no capturado aquí dice get name no es una función no lo es. Solía ser una función, pero en realidad regresaba de valor aquí automáticamente. Entonces ahora get name es en realidad solo una variable con un valor en ella. Es así como convertimos una función anónima en una expresión de función invocada inmediatamente. Si queríamos una función regular, no hagamos eso. Hagamos una nota aquí. En realidad, que este es un I fi con una función de Nana Miss. Si quisiéramos crear una nueva función que se ejecute automáticamente podría hacer literalmente cualquier cosa, podríamos simplemente crear una función como esta. Dale un nombre. Entonces digamos cargar aplicación. Ese va a ser nuestro nombre. Y aquí dentro va a decir cónsul dot log app se está cargando. Aquí va a haber algún tipo de lógica. A lo mejor tu página iba a hacer algo. A lo mejor hay una animación. A lo mejor hay que esperar algo. Y luego al final, se podría decir consejo dot log AP está cargado. Bueno, ahora mismo, esta es una función regular, así que esto no va a hacer nada. Si cargamos la página, vamos a ver que ninguno de estos troncos de cónsul aparece y déjame asustarme de eso ahí. Y cuando refresco lo tienes, Nada de eso aparece. En realidad voy a tener que ejecutar load app como una función para este trabajo del dedo del pie. Pero ¿y si tienes todo tipo de lógica aquí y no necesariamente quieres ejecutar load app? Se supone que se ejecute automáticamente. Bueno, quiero decir, no hay nada malo en hacerlo de esta manera en esto funcionaría. O simplemente podrías decírselo a JavaScript. Oye, solo corre Esto automáticamente simplemente no importa cómo se llame. No tenemos que hacerlo. En cambio, ella se lo comió. No tenemos que cargarlo, solo realiza tan pronto como esté ahí, Deja que se ejecute. Y así ahora cuando actualice la página, vamos a ver que los registros cónsul ambos aparecen igual que esa APP está cargando aplicación está cargada. Entonces realmente otra vez, igual que un refresco rápido. Todo lo que hacemos es poner entre paréntesis de apertura al inicio de la función y luego uno al final de la función y luego un conjunto de paréntesis de apertura y cierre al final y que solo dicen JavaScript. Oye, pesar de que esta es una función, ejecútala automáticamente de nuevo. No hay tarea, pero siempre que veas una biblioteca o marco de JavaScript, vas a ver este tipo de expresión por todo el lugar. Y al principio piensas, Bueno, ¿por qué hay tantos paréntesis por todo el lugar? Y eso es todo lo que esto significa. Esto sólo significa que simplemente vamos a ejecutar lo que esté entre esto automáticamente. Eso es todo lo que dice. Y así ese es algún fondo fantastico con JavaScript. 33. La palabra clave de `.: Hablemos de un tema, una palabra clave que da miedo a muchos nuevos desarrolladores. Y esa es la palabra clave esta cuando digo palabra clave, quiero decir, es una palabra reservada, así que tenemos palabras reservadas como función de retorno, var. Y ahora la palabra esto. Por lo que generalmente no quieres usar ninguna de esas palabras clave como nombres de variables. Entonces la palabra clave esta realmente sólo se refiere a un objeto con el que está ejecutando una puja actual de código JavaScript. Es una especie de sólo significa yo mismo, yo hablando de sí mismo. Entonces en el ejemplo de una función, tenemos una función get person, y podríamos darle a esto un nombre y luego podríamos hacer nombre devuelto. Variable de función tan bastante simple. Kayla fue igual para conseguir persona Caleb. Y así eso sólo va a regresar. Caleb es igual a Caleb, Y cada vez que veas esto, vas a ver este punto algo. A lo mejor es una función con paréntesis. A lo mejor es este punto Otra variable no funciona. Algo así se mete en un nombre adecuado un poco por el camino. O tal vez solo este nombre de punto. Siempre que veas este punto a lo que esto se refiere es tu función o si estás dentro de un objeto del que aún no hemos hablado, No lo hemos aprendido formalmente. Simplemente se va a hacer referencia a sí misma. Entonces realmente, lo que esto está diciendo es este nombre de punto de función actual y esta es la palabra clave aquí. Y así una cosa bonita que podemos hacer aquí es que podemos empezar una especie de asignación de variables dentro de una función, y podemos asignar una variable normal así, como nombre de fuego es igual a nombre. Pero ya tenemos eso aquí dentro. En cambio, te voy a mostrar algo genial que podemos hacer. Hacemos lejos este nombre de punto es igual a nombre. Y si cambiamos nombre de retorno para devolver esto. Por lo que sólo devolvemos este objeto en particular podríamos decir, Caleb nombre de punto y obtener mi nombre. Entonces sigamos adelante, sálvanos y danos un refresco. Y esto ya se está ejecutando ya que Caleb es igual para conseguir persona hasta el momento. Caleb Weird. ¿ Qué es ese tipo de Caleb? Ah, es un objeto, algo que no hemos aprendido formalmente sobre lo que estamos empezando a transitar. Pero lo bonito de la palabra clave esta es que ahora puedo hacer Caleb nombre punto mira eso. Ahí está. Yo sí. Este punto Profesión es igual a Profesor y Dev guardar Refresh, Caleb dot profesión. Caleb es profesor y desarrollador. Nombre de punto Caleb. Mi nombre es Caleb, y así ahora tenemos una variable con variables dentro de esa variable que son accesibles a través de la notación de puntos. Y vas a ver esto por todas partes y jabs. Esto es increíblemente común. Esta notación de puntos Básicamente, todo lo que estamos diciendo aquí es que ya sabes, si fuéramos a escribir esto manualmente, y si esto se permitiera en javascript, no lo es. Pero si se permitiera en javascript, sería vier. Nombre de punto Caleb es igual a Caleb y var Caleb dot profesión es igual a Maestro y Dev, y eso es esencialmente lo que esto está haciendo aquí. Ahora bien, esto no es técnicamente permisible así, pero sí, eso es más o menos lo que estamos haciendo. Entonces estamos diciendo, Hey, Hey, tienes variable un var un punto un interno de son dos lados a vier interno también, y entonces solo puedes hacer referencia a lo que sea que va a ser tan interno. Var a. Lo bonito de esto es ahora de repente, en lugar de escribir dos variables por persona. Podríamos estar escribiendo dos variables dentro de una función, y entonces la variable en sí podría ser sólo una línea. Y así sólo tenemos que decirlo una vez, y luego podemos reutilizarlo una y otra vez. Y así cuanto más código escribas, más complejo se vuelve más eficiente tu código. Se convierte en causa tu escritura real último código menos código es a menudo mejor ahora, igual que un verano rápido aquí. Una referencia de re rápida cada vez que vea este punto se refiere a una función puede o no tener un parámetro puede ser simplemente una función regular. Podría estar refiriéndose a un objeto, que hablaremos más por el camino, pero esencialmente se está haciendo referencia a lo que esté dentro de sus corchetes dentro de este ecosistema aquí, esto sólo significa a sí mismo. Eso es todo lo que es. Entonces siempre que tu javascript de aprendizaje o estás aprendiendo PHP así que en PHP, creo que es esto igual a, y luego sea cual sea tu nombre var. Ah, si estás aprendiendo Python, creo que solo es duda de uno mismo. Cualquiera que sea tu nombre var, este dólar firma esto y yo mismo en diferentes idiomas todos hacen referencia a la misma cosa exacta. Ahora, en este punto en el tiempo, no necesitas saber cómo usar esto demasiado. Vamos a meternos en eso un poco más por el camino. Pero como estás aprendiendo JavaScript, ibas a ver mucho de esto, y solo quería que estuvieras preparada. Entonces, como cuando ves esto, no vas. Uh, ¿qué es eso? No entiendo cómo funciona esto. Eso está totalmente bien. Porque ahora entiendes que esto básicamente es decir, Hey, get person dot Nombre es igual a cualquiera que fuera el nombre, que es así. Y esta dura profesión básicamente está diciendo Get person dot profession, que es una variable dentro de la función. Entonces es sólo realmente hablar de sí mismo ahora. Es una especie de, ah, poco de un concepto de flexión mental al principio. Entonces si no lo consigues enseguida, no te preocupes por ello. No te des una paliza. No seas demasiado duro contigo mismo. Esto viene con la práctica, por lo que no hay tarea para esta lección en particular. Solo quería mostrarte esto, familiarizarte un poco con él y algo así como facilitarte en la idea de objetos de los que vamos a hablar por el camino. Y sé que sigo diciendo eso, pero los objetos son una gran parte de la programación orientada a objetos, y como que necesitamos estar preparados para ello. Entonces ahí lo tienes. Esa es la palabra clave esta. Esto solo significa lo que sea que tu código esté haciendo referencia a este conjunto particular de corchetes rizados, eso es todo lo que significa. Espero que eso tenga sentido, y te veré en la siguiente lección. 34. Alcance: Hola y bienvenidos de nuevo. Sé que hemos estado hablando mucho de funciones últimamente. Creo que deberíamos darle un respiro a eso un poco. En su mayor parte, terminamos con funciones, al menos un poco. Oye, entonces hablemos de alcance. Scope es un tema por el que he estado bailando deliberadamente. Alcance es básicamente donde viven nuestras variables fuera del dedo gordo del pie. Por lo que hemos estado creando una especie de justo muy audaz en nuestro guión aquí. Nombre de variable, en realidad variable, por supuesto, es igual a JavaScript para principiantes. Y podemos usar esta variable en cualquier parte de nuestro guión. Entonces si creamos una función de función, hacer ah cosa podríamos decir consola dot log course. Podríamos incluso regresar curso porque hemos definido esta variable aquí arriba y la vamos a utilizar dentro de esta función. Entonces sigamos adelante y actualicemos nuestra página y solo tecleemos , por supuesto, como variable. Vamos a ver javascript para principiantes. Claro, y luego hacer ah, cosa es una función que podemos ver. Se presenta por este rizado f. Ponemos paréntesis a su alrededor o después de que más bien toque enter y vamos a ver javascript para principiantes es registro de consola, y devuelve Javascript para principiantes. Esta es una introducción al alcance. Entonces la idea es que si tienes una variable que está fuera de una función, puedes usar esa variable dentro de una función. Y así, realidad, este es tu alcance exterior. Se puede pensar en esto como, como la atmósfera alrededor de nuestro planeta. No importa dónde estés, eres más o menos accesible a algo que se encuentra en el ambiente. Oxígeno o nitrógeno o hidrógeno. Algo así. Y el propio planeta sería la función. Y así porque esta variable aquí especie de envuelve todas las demás funciones que son, ya sabes, piénsalo como en la misma línea aquí, especie de envuelve que puedes usarla dentro de una función. Ahora lo contrario no es absolutamente cierto. Esto es muy importante tener en cuenta. Entonces si creamos variable en tu bar, profesor es igual a Caleb Tallinn y no importa lo que regresemos ni lo que consola log. De hecho, incluso podemos deshacernos de ambos. Y hicimos maestro de registro de punto cónsul, Esto no va a funcionar porque esta variable tiene alcance a esta función. Adelante y danos una actualización y podrás ver esa referencia no capturada. No se define a todo maestro. Y eso es porque a pesar de que está definido aquí y podemos consola, iniciarlo en tu reloj este registro de consola, vamos adelante y hagamos signos de exclamación para el 1er 1 y para el 2do 1 está fuera de la escuela. Y entonces vamos a correr a hacer una cosa. Por lo que en realidad para ejecutar esta función. De hecho, podríamos convertir esto en un I F E si quisiéramos. Podríamos hacer algo así. Adelante, refresquemos y dice: Oye, Oye, maestra está aquí. Está en la función, pero no es accesible fuera de la función. Y así lo contrario de lo que estaba diciendo originalmente no es cierto. Pero vigílanos. Todavía podemos usar curso dentro de la función, incluso si se trata de una expresión de función invocada inmediatamente. Ahí está. Ahí está mi nombre. Ahí está el nombre del curso, variable local, variable global y los de los nombres reales que tendemos a usar. Y así cuando se tiene una variable global y se puede utilizar localmente, en cualquier tipo de función que se desee. Cuando se define una variable local dentro de una función, no se puede utilizar globalmente. Y todo esto aquí no es específico de JavaScript. A pesar de que la forma en que lo hace JavaScript es un poco peculiar. En JavaScript. Puedes crear la variable aquí afuera y acceder a ella inmediatamente sin pasarla a través del parámetro ah en otros idiomas. Eso no es del todo cierto. Tienes que ofrecer muchas veces poner curso ahí dentro y luego vamos a deshacernos de esto. I f e Solo porque queremos mantener esto simple, pasarías en curso, y luego dirías algo como esto, harías una cosa y luego pasas en la variable de curso y luego podrías usarla aquí dentro. Y así cuando le demos a esto una oportunidad, esto va a funcionar. Esto va a decir tres signos de exclamación. Maestro y luego tres signos de exclamación. El curso que está afuera y luego fuera del alcance, todavía no me va a dar el profesor. Y bastante seguro, cada vez que refresco tres signos de exclamación, maestro nombrado a través de exclamación marca el nombre del curso porque lo pasamos, Así que muchas lenguas lo hacen de esta manera. Pero en JavaScript no necesitas pasarlo explícitamente porque una variable global automáticamente tiene jurisdicción en un ecosistema local como una función. Y así cuando toque refresco, verás que absolutamente nada ha cambiado. Entonces sigamos adelante y creemos algunos comentarios de código. Algunas notas. Esta es, ah, variable global porque esta función está permitida salir a la intemperie. A esto también se le llama una función global. Esta es una función global, y entonces solo vamos a ejecutar la función, ejecutar la función y un simple registro de puntos del consejo. No hay gran cosa ahí, y esta variable aquí. Este es el muy importante. Se trata de una variable local, y las variables locales sólo son accesibles dentro de su ecosistema de ecos locales. Por lo que esto solo es accesible y es ecosistema local y luego a los registros de consola. Y así ahora hemos comentado y documentado adecuadamente nuestro código. Y así la forma de pensar en esto es global Se permite que las variables estén en cualquier lugar. Asumiendo que están definidos o que se crean fuera de un ecosistema local, se les permite en cualquier otro lugar. Y si se definen dentro de un ecosistema local como una función, no se les permite salir de ese ecosistema local. Pueden Onley vivir dentro de la función, su local. Pero nuevamente, las variables globales tienen jurisdicción para básicamente estar en cualquier lugar en cualquier momento en el tiempo. Entonces lo que me gustaría que hicieras es darle una oportunidad a esto para tratar de romper esto lo mejor que puedas. Por lo tanto, crea una función creativa variable global. Intenta acceder a esa variable global dentro de la función sin pasarla, y no le des un parámetro. Simplemente intenta acceder a ella desde dentro de la función y luego crea un acceso variable local que dentro de la función. Pero entonces, fuera de ella, trate de acceder a esa variable local fuera de la función. Entonces crea una variable global que funcione dentro de la función y luego crea una variable local que no funcione fuera de una función. Dale un tiro a eso y deberías ver el mismo aire con el que me tropezé, y eso es realmente todo lo que hay a alcance. Entonces cada vez que estás fuera en la naturaleza y ves un error que dice no capturado, variable de aire de referencia no está definida. Eso se debe a que probablemente está fuera de alcance o la variable aún no existe 35. Envoltura de crecimiento: De acuerdo, hablemos de algo raro que hace JavaScript. Esta es una peculiaridad de JavaScript. Se llama levantamiento, no mangueras, levantamiento . Lo clavó en JavaScript cada vez que veas la palabra var, que hemos visto por todo el lugar, Básicamente lo que esto está diciendo es lo que tu variable se esté moviendo a la cima de su alcance. Pero no le des un valor aún. Entonces, por ejemplo, función get person, y creamos aquí una variable local. Conocemos las variables locales a partir de la lección de alcance. Nombre Var es igual a Caleb, y luego podríamos hacer algo súper simple, como un nombre de registro de consola. Y luego si corremos, mete aquí a persona dentro de nuestra página, consiga persona con paréntesis porque es una función. Se va a decir, Caleb, pero te das cuenta de esta cosa indefinida. Eso es por el levantamiento variable. Hagamos un ejemplo aquí. Sabemos que el código corre de arriba a abajo, y hacemos consejo dot log nombre variable. Esto debería darnos un error porque esto aún no está definido. El nombre de la variable no está definido por encima de esto, por lo que no debe funcionar, y luego lo definimos, y luego cancelamos registrado el nombre. Vamos a darle un tiro a esto. Veamos qué pasa aquí. Obtener persona. Vemos Indefinido Caleb Indefinido. Y así en este momento, sabemos que lo indefinido estaba arriba y en realidad podríamos hacer esto. Hagamos esto más fácil. Var no set aún Eso rimaba, y eso fue no intencional. Barra está configurada, y eso es refrescar y volver a ejecutar esa función. Y aquí vamos a ver. Var no está configurado todavía, y este es el valor indefinido en JavaScript. Indefinido es básicamente un tipo de datos. Es igual que un número. Es igual que una cadena o una función Boolean o una matriz. Este es otro tipo de datos. Es indefinido. Y realmente, lo que eso significa es, y vas a ver esto bastante fuera en la naturaleza To es sólo declarar variables. Nombre Var. Es exactamente lo mismo está haciendo esto. Entonces dijimos: Oye, Oye, hay una variable, pero no tiene valor, así que no hay valor. Si bien esta es una cadena que dice no hay valor, por lo que tiene un valor, no también es un valor. Eso significa que en realidad no hay nada en ella. Usted le ha dicho explícitamente que no hay nada en ella. En JavaScript, indefinido significa que se definió la variable, pero no hay ningún valor en ella. Actualmente, el intérprete de JavaScript no tiene idea de lo que se supone que es esto. Y así esto va a ser indefinido. Sigamos adelante y guardemos eso, y vamos a ver si volvemos a ejecutar esta función. Deberíamos hacer esto y yo I F E dice Variable no se establece todavía indefinida, y luego se establece. Y entonces tenemos nuestro indefinido regular ahí dentro, que podemos ignorar. Esa última vamos a seguir adelante y crear e invocar de inmediato función porque no quiero seguir escribiendo eso. Y sigamos adelante. Ahí vamos. Eso se ve mucho mejor. Y así de izar es esta idea que tan pronto como tu navegador interprete JavaScript en cuanto esté leyendo el código, es decir, Oye, en esta función, hay alguna variable? Dice um, déjame mirarlo primero antes de hacer algo y luego dice: Oh, Oh, sí, hay una variable aquí, Ok. Ah, realmente no me importa cuál sea el valor. Yo sólo quiero asegurarme de que esto esté definido. Entonces básicamente lo hace. Esto lo mueve hasta la cima, y en este punto, tiempo Realmente estamos diciendo que el nombre es igual a Caleb. No tenemos que declarar Vier porque ya va a estar ahí arriba. Eso es esencialmente lo que está haciendo ahora. No lo estamos haciendo de esa manera. No necesariamente. No exactamente de esa manera. Pero eso está bien. Eso está bien, porque sabemos en cuanto creamos cualquier tipo de variable que se va a levantar a la parte superior de su alcance, que está aquí entre estos corchetes rizados y luego basado en el alcance, aminorar el lección anterior. Sabemos que no podemos acceder a nombre de variable fuera de estas funciones. Vamos a seguir adelante y hacer el registro de puntos de la consola y es un nombre es nombre. Sabemos que se trata de una variable local. Se está elevando automáticamente a la parte superior como si se estableciera automáticamente sin valor . Y luego aquí abajo, básicamente acabamos de decir, Oh, en realidad, tenemos Hay un valor, Así que hay un pedacito de memoria asignado en tu computadora para este nombre de variable. Ojalá lo uses y dijimos: Sí, Sí, vale, aquí está. Lo vamos a usar, y como es una variable local, no es accesible en el ámbito global Así que cuando actualizamos tu página, esto es embarazoso porque aún dice Mi nombre es Caleb. Uh, en realidad, la razón de eso es porque tengo historia aquí. Variable llamada Caleb. Yo sólo hice eso. Se mata. Si cambié este, cambiemos todos estos. Cambia esa y esa y esa y esa. Y los cambios a mi nombre donde no tengo ya eso almacenado en mi navegador. Por lo que refresca. Y ahí vamos, eso es mejor. Y así es decir que mi nombre no está definido y porque esto se debe de nuevo al alcance esta variable es una especie de encuadernado. Está bloqueado a esta zona en particular. No podemos usarlo fuera de aquí. A pesar de que izar dice, Hey, nombre variable es que vamos a moverlo a lo más alto del alcance. Está bloqueado a este alcance para que no pueda salir. Ahora echemos un vistazo rápido a los tipos de datos indefinidos, así que hagamos de. Entonces vamos a crear una variable aquí y vamos a llamarla computadora, ¿de acuerdo? Devolvió su valor. Su valor es indefinido. Hagamos tipo de computadora y vemos que está indefinido. ¿ Y si arrojamos esto en una sentencia if Si Computadora es igual a indefinida Alerta es indefinida, indefinida, no bajo hallazgo. Mira eso. Es indefinido. Podríamos incluso hacer una comparación estricta aquí, también, así podemos hacer si la computadora se fue a tres. Por lo que tres signos iguales es igual a alerta indefinida, estrictamente indefinida. Y mira eso. Dice que es estrictamente indefinido. Y eso es porque la computadora no tiene ningún tipo de valor en un año. Ahora podemos decir que la computadora es igual a no lo sé, Mac OS, supongo, y eso es volver a ejecutar Estos nada pasó. ¿ Y si hago la comparación no estricta con sólo dos signos iguales? No pasa nada. Y entonces cómo se vería eso en su código es si quisiéramos. Podríamos hacer. Si mi nombre es igual a indefinido, entonces vamos a definirlo aquí. Mi nombre es igual a Caleb. Adelante. Deshazte de esto ahora. Si nos guardamos y tratamos de refrescar tu página, nos van a presentar un error igual que este, dice error de referencia no capturado. Mi nombre no está definido. Todavía no lo hemos definido. Piensa que se supone que está ahí, pero no hemos usado la palabra clave VAR. ¿ Y si hiciéramos esto? Vamos a tirar aquí abajo. Hagamos var mi nombre. Basta con tirarlo en la parte inferior. Esto es izar en su mejor momento. Refrescamos la página y ahí vamos. En realidad funciona. Entonces lo que dijeron fue: Oye, Oye, mueve esta variable hasta la cima como si viviera aquí arriba. Mi nombre está aquí arriba. Actualmente está indefinido. No hay valor. No sabemos qué es. Entonces dice: Oye, Oye, si mi nombre es indefinido, si no hay valor, solo reasignarlo. Asegúrate de que sí tenga un valor de Caleb y luego podemos usarlo aquí ahora para hacer esto un poco más complicado y solo para conseguir un poco más de tiempo con la palabra clave que siempre podríamos hacer. Cambiemos esto cambia de y yo e a una función regular. Siempre podríamos comprobar para ver si un parámetro está establecido o no. Si no hay defecto. Entonces podríamos decir, ya sabes que el nombre por defecto es igual a Caleb. Eso es genial, pero ¿y si no hay ninguno? A menudo vas a ver algo como esto. ¿ Y qué pasa si hay uno que no ha pasado? ¿ Y si lo hiciéramos? Consola cónsul dot Nombre de registro. Entonces, ¿qué pasa cuando guardamos esto y tratamos de imprimir esto con Sue console log thing? Cualquiera que sea ese nombre va a ser, refresca. Y tenemos que ejecutar esos conseguir paréntesis de persona. Dice una cosa. Indefinido. De acuerdo, bueno, no le hemos dado nombre, pero ahora podemos comprobar si en realidad está ahí. Entonces podemos ¿Qué? No hemos dado un nombre, pero ahora podemos comprobar si ese nombre es indefinido y definir un valor predeterminado. Podemos hacer esto de la manera manual. Entonces, en lugar de dar un valor predeterminado como este, si estás usando JavaScript en un navegador más antiguo como Internet Explorer, podría no ser compatible con algo como esto. Entonces vas a querer escribir código compatible al revés que diga si nombre es igual a despojado estrictamente igual a indefinido, podemos definirlo aquí. Nombre es igual a Caleb. Adelante y refresquemos. Consigue veneno. Bam! Una cosa, Caleb, Eso es un registro de consola aquí. Dice una cosa. Caleb, no le dimos nombre. Por lo que ahora el nombre predeterminado es Caleb. Eso lo escribimos manualmente, y siempre podemos simplemente darle un nombre, también. Entonces podríamos decir que es esfuerzo, mi pequeño gato Y va a decir, Oh, Oh, realidad está definido Así que, ya sabes, sólo salta toda esta declaración if. Y así es donde el levantamiento, el alcance y el indefinido se unen todos. Y como resumen rápido, indefinido básicamente solo significa que no hay ningún tipo de datos asociado a una variable en particular . obstante, cada vez que definas una variable, no importa dónde la definas de nuestro nombre es igual a lo que sea que sea ese nombre va a ser, JavaScript nos lee y dice, Oh, vamos a mover eso hacia arriba a la parte superior. Actualmente está indefinido hasta que lo definas más adelante. Eso se llama izaje y alcance es el hecho de que a este nombre no se le permite dejar estos corchetes que es alcance. Por lo que ojalá que todo tuviera sentido. Hay mucho que desempacar en este video en particular, pero necesitábamos aprender un montón de otras cosas para que esto empezara a tener sentido . No hay tarea para esto. De verdad solo quiero que seas capaz de digerir esto si quieres sentirte libre de retocar con algo de tu propio código y algo así como conseguir el ahorcamiento de esto. Pero esto en el último par de lecciones fueron fundamentos de JavaScript. Estos aire no cosas súper divertidas para aprender necesariamente. Pero son muy importantes. Te vas a tropezar con problemas por el futuro donde estos los temas como alcance y alzado te van a ayudar bastante. Entenderás por qué podrías estar recibiendo un error en particular. Siguiente. Pasemos a algo mucho más divertido. Aprendamos sobre la segunda forma de enlazar eventos a nuestra página. 36. Introducción a los oyentes de eventos: De acuerdo, aprendamos sobre algo divertido. Estábamos aprendiendo un núcleo de barco. JavaScript. Fundamentos, como izar funciones anónimas, invocó inmediatamente función, expresiones, alcance, cosas así. Todas las cosas muy importantes. Pero es cierto no son las cosas más divertidas para aprender. Entonces cambiemos eso. Vamos a aprender sobre un evento de escucha de eventos. Los oyentes son, yo estaba a punto de decir hilarante, pero en realidad no son hilarantes. Son tremendamente útiles y también divertidos. Eso Se llaman oyentes de eventos, y una especie de paloma en esto en un momento en que escribimos Button on Click es igual a sí, algo que le dijimos para ejecutar una función en particular. Y así en realidad modificamos nuestro HTML. Modificar tu HTML no siempre es posible, y a veces solo quieres que las cosas funcionen automáticamente. Y entonces qué? Lo que podemos hacer es crear un poco de código JavaScript llamado oyente de eventos, y está ligado a un elemento de nodo en particular o ah, javascript, no Doran. Elemento Html surgieron las dos palabras allí juntas para crear un elemento nodo. Por lo que el oyente de eventos es básicamente solo una función que está vinculada a su dedo de la página Web. Escucha los clics de eventos cada vez que escribes una tecla cada vez que te desplazas hacia abajo por la página. Algo así. Ahora los dos oyentes de eventos más comunes por ahí, de lejos son la pulsación de clics y teclas. Por lo tanto, siempre que escribas en un campo de texto o campo de entrada, o cada vez que haces clic en algo se puede activar. Ah, hay otro que se llama Blur. Por lo que cada vez que haces clic en un campo de texto y luego te vas, podría ser capaz de realizar alguna acción en ese punto. Pero estos dos parecen ser los más populares. El desenfoque sigue siendo muy, muy popular. Y luego solo hay toneladas y toneladas y toneladas de oyentes de eventos por ahí. No podemos posiblemente aprenderlos todos, pero por suerte funcionan casi de la misma manera, así que realmente sólo tenemos que aprender uno o dos de ellos. Y luego puedes usar cualquier oyente de eventos que quieras. Entonces vamos a crear un oyente de eventos simple que va a contar el número de veces que se hace clic en un botón . Entonces es en una clase aquí. Hagamos Bt nbt en primaria. Esto es sólo bootstrap Bt un LG, y eso se le da una clase de botón Js, y esto sólo va a decir, Click me. Es asegurarse de que esto se vea bien en nuestra página dice, Click me Así que ya sabes, un botón aburrido. Lo primero que necesitamos hacer es realmente agarrar este botón usando algún tipo de consultas. Elector conseguir elemento por I d. funcionaría. Ah, podríamos usar un selector de consultas regular, que es lo que vamos a dio realmente no importa cómo se obtiene este elemento. Solo necesitas poder seleccionar este nodo. Entonces sigamos adelante y creemos vier. Bt N es igual al selector de consulta de espárrago del documento. No vamos a usar create selector todo porque sólo hay uno en aquí que queremos seleccionar. Entonces usamos el botón Js y eso nos va a dar un botón. Entonces sigamos adelante, refresquemos y observemos. Este tipo de BCN y automáticamente resalta mi botón aquí, como puedes ver. Entonces tenemos este botón como nota y cuando hacemos tipo de botón, realidad se puede ver que es un objeto. Estamos consiguiendo objetos del dedo del pie, lo juro. Te prometo que vienen Ahora Todo lo que tenemos que hacer es decir BTM Ese es el nombre de esta variable aquí. Agregar oyente de eventos ¿Qué tipo de oyente queremos? Este va a ser un click igual que como tenemos en Click, que estaba en click. Simplemente lo llamamos Click en JavaScript Y luego le damos a esto una función y vamos a pasar en el evento. Y así en este punto del tiempo, estamos algo familiarizados con la idea de la notación de puntos. Entonces tenemos un botón aquí y sabemos botón punto en su texto es igual a darme click, por favor. Entonces podemos cambiar una notación de puntos que es sólo una especie de notación de puntos en su máxima expresión. Entonces estamos diciendo, Hey, Hey, agarra el botón en el oyente de eventos, Esta es una función. Y entonces el primer parámetro es ¿qué tipo de evento? Escuchas que decían, Oye, escucha los clics y el segundo parámetro, aún no hemos visto esto, pero el segundo parámetro es en realidad ah, función básicamente parece que esto solo fueron escribirlo el largo camino. Por lo que tenemos una función aquí dentro, y el oyente de eventos siempre pasará en el evento a este oyente en particular. Entonces esto es lo que podemos hacer. En este punto, podemos decir hacer algo aquí dentro, pero queremos contar hasta el número de clics. Entonces digamos que los clics totales lejanos es igual a cero. Y debido a que se trata de una variable global, podemos acceder a esto localmente. clics totales son iguales a los clics totales, más uno, que es esencialmente lo mismo que hacer clics totales más más. Y luego vamos a crear otro elemento en la página que sólo cuenta o muestra más bien los clics totales. Entonces Div I d. Total hace clic en algo así y vamos a agarrar ese elemento también. Entonces vamos a hacer documento punto get element by i d. clics totales punto en su texto es igual a clics totales. Adelante y dale una oportunidad a esto. Entonces dice Click me y es contar una y otra vez. Voy a hacer eso significativamente más grande cambiando eso de un div a uno H. Y también voy a acercarme aquí. Mira eso. Está contando para mí. No escribimos ningún HTML adicional para el oyente de eventos. Acabamos de escribir algunos JavaScript add event listener. Y también recuerdas cuando estábamos aprendiendo sobre alcance hace un par de lecciones probablemente te aburrieron hasta morir con esa. Pero aquí es donde se vuelve importante, porque si movimos clics totales aquí, Scope dice, Bueno, esto siempre va a ser cero. Cada vez que esta función ejecuta este evento, se ejecuta el oyente. Cada vez que hacemos clic en el botón, estamos restableciendo este 20 y esto no funcionará. Siempre es entrevista. Uno lo restablece. Cero suma uno. Pero si definimos eso es globalmente y solo lo modificamos localmente, será cero y luego uno y luego dos y luego tres y luego cuatro y luego cinco y así sucesivamente y así sucesivamente y así sucesivamente. Ahí vamos. Tenemos un oyente de eventos de JavaScript. Ahora bien, esto es bastante guay, pero esto no es tan genial como poder agarrar texto de un campo de entrada, lo cual vamos a hacer en la siguiente lección. Para que no tengas que hacer nada en esta última. No hay tarea. Yo solo quiero que una especie de echar un vistazo a este tipo de sintaxis. Por lo que tenemos botón dot add event listener. Su primer parámetro es el tipo de evento. Dijimos que va a ser un tipo de clic y como segundo parámetro pasamos en una función entera y una última cosa a notar antes de pasar a la siguiente lección, en realidad podemos sacar toda esta función, darle un nombre de anuncio clics, por lo que los clics de anuncios de función y así el segundo parámetro es simplemente el nombre de la función. Entonces sigamos adelante, actualicemos, y también funciona. 37. Obtener valores de introducción: Hola ahí. En la última lección, aprendimos sobre el oyente de eventos de clic, que se parecía mucho a esos botones de punto anuncio en el que el oyente de eventos haga clic, y luego algún nombre de función. En este video, realidad vamos a tratar de obtener el valor exacto de algo de un campo de entrada. Entonces tal vez estamos pidiendo el nombre de alguien y queremos conseguir ese nombre en cada pulsación de tecla. Podemos hacer eso en primer lugar, apartar html. Por lo que tenemos entrada entrada de entrada punto de control de forma dot nombre Js, y vamos a seleccionar esto por su nombre. Y entonces tal vez veamos también un mensaje de bienvenida de vuelta a la página. Así que h dos hola, Y entonces como sea ese nombre va a ser. Por lo que vamos a querer seleccionar esto en el mundo de JavaScript. Vamos a necesitar algún tipo de elemento para simplemente cambiar esto. Podríamos cambiarlo todo. Podríamos decir Hola, Caleb. Hola es esfuerzo. Hola, Henry. O podríamos simplemente cambiar el nombre si quisiéramos Solo hacer una manera particular. Vamos a cambiar el lapso. Clase es igual a Js cambiar nombre. Y así cuando arrancamos esto en su página y igual de hola y hay un campo de entrada aquí, ¿de acuerdo? Y luego simplemente desplazándose hacia abajo a nuestro JavaScript. Ahora lo primero que tenemos que hacer es realmente necesitamos seleccionar este campo de entrada. Y así le dimos un nombre de nombre de jazz. Esa es la clase. Parece Agarramos esa var como entrada y esa entrada como fuego. Entonces documentos dot query selector Vamos a agarrar sólo el 1er 1 Js, no nombre. Y así ahora queremos vincular a esto a un oyente de eventos. Por lo que hacemos input dot add event listener. Podríamos hacer key up, y luego podemos darle una función como su segundo parámetro. Y este va a ser el evento que siempre va a pasar en el evento. Ah, muchas veces solo vas a ver la letra e que significa evento realmente solo estaban renombrando la entrada variable. Realmente no importa ser más explícito. mí me gusta llamarlo evento, pero en producción, a menudo solo lo llamo E. Pero vamos a mantenerlo simple y evento universitario, y luego podríamos hacer consejo dot log event dot target dot value Así que crees que sería justo valor de punto de evento? Pero eso no va a funcionar. Necesitamos el evento en realidad y luego apuntar a ese valor. Entonces sigamos adelante y guardemos esto. Y cada vez que escribimos algo aquí, lo vamos a ver aparecer en el Cónsul y ocasionalmente en realidad tecleamos demasiado rápido para eso es un k a L O B. Ahí vamos. Entonces eso es clave arriba. Podríamos hacer key down. Hay una diferencia. Es como cuando presionas la letra en tu teclado y tu dedo aún no se ha movido hacia arriba. Eso es clave abajo. Tecla arriba es cuando tu dedo sale de la pulsación de tecla. Pero sigamos adelante y sólo nos quedemos con regular mantener el ritmo porque ese nos va a dar el valor completo. Entonces en cuanto golpeé, Kay dice K A L O B. Tan pronto como escribo, me da todo el valor ahí dentro. Entonces ahora tenemos que seguir adelante y cambiar este nombre. Entonces vamos a consultar nuestro documento modelo de objetos nuestro HTML Para esto son nombre, no entrada con nombre. Eso parece un poco raro llamarlo ese elemento de nombre supongo, porque ¿por qué no? Documentos punto consulta Así cerró puerta jazz cambiar nombre. Y luego porque no queremos redefinir esto cada vez. Cada vez que presionamos una tecla, es poco más eficiente de esta manera. Podríamos simplemente utilizar la variable do inter text es igual al valor de punto objetivo de punto de evento. Adelante y deshacernos de eso. Y esto va a cambiar a medida que escribo. Hola, Caleb. Hola, Zephyr. Hola, Henry. Hola, D'Argo. Hola. Mi nombre es Caleb y me encanta Coda, incluyendo dos hicieron edición de codificación Y ahí lo tienes. Y de nuevo, este es sólo el segundo parámetro y luego ampliar en esto aún un poco más. Esta función aquí como parámetro se llama técnicamente una función de devolución de llamada, una función de devolución de llamada, o simplemente una devolución de llamada para abreviar. Y lo que esto significa es cada vez que presionas una tecla y tu dedo se mueve hacia arriba desde el teclado, va a ejecutar una función. Y así lo que podríamos hacer aquí es que en realidad podemos eliminar esto y definamos un funcionamiento aquí función llamada call back solo para mantenerlo simple. Ahí dentro le damos ese nombre, y va a ejecutar esto. Realmente no importa cuál sea este nombre. El nombre podría ser cualquier cosa no importa, pero técnicamente se llama una función de devolución de llamada, así que voy a llamarlo Call back. Entonces a medida que estás leyendo esto, vas de entrada a la clave del oyente de eventos arriba y después de todo, va a ejecutar una función de devolución de llamada. Por lo que haces clic, guardas, refrescas tu página y sigue funcionando. Sí, mira eso. Eso es bastante impresionante. Y eso es divertido. Así que ahora si combinas eso con el oyente de eventos de clic, puedes cambiar todo tipo de cosas en tu página en función de eventos de clic o de eventos clave, podrías hacer todo tipo de otras cosas. Entonces ahora si te interesa, ah, ah, poca actividad extracurricular, lo que puedes hacer es subirte a la máquina de Google y simplemente buscar un evento de JavaScript diferente . Tipos de oyentes. Ahí afuera hay muchos de ellos. No necesitas conocer a la mayoría para ser totalmente honesto, pero debes saber que hay mucho por ahí y no puedo ir por encima de cada uno porque esta serie de videos se va a poner muy, muy larga e hinchada y yo no quiero perder el tiempo así. Enseñe a una persona a agregar oyentes de eventos, y no importa lo que sea el oyente. Podrás lidiar con ello en el futuro, Así que esa es una especie de mi filosofía docente. Por lo que esto es obtener valores de entrada con un oyente de eventos de JavaScript. En la siguiente lección, sigamos adelante y cambiemos algunos colores CSS con oyentes de eventos y hagamos que nuestra página sea súper dinámica. Entonces ya no estamos simplemente cambiando el texto. Vamos a cambiar algo que realmente tiene que ver con el estilo de la página. 38. Cambiar la CSS con los escuchantes de los eventos: alto en el último par de lecciones que aprendimos sobre los oyentes de eventos. Utilizamos el oyente de eventos click, y usamos el oyente de eventos key up. Pero en realidad hagamos algo divertido, porque hasta ahora solo cambiamos un poco de HTML en un texto interior, y eso es ya sabes que está bien porque hace que nuestras páginas sean dinámicas, pero no es tan divertido o es visualmente atractivo como creo que podría ser. Entonces sigamos adelante en esta lección y creemos un nuevo oyente de eventos que va a cambiar el texto basado en las páginas, color y el color de fondo. Por lo que necesitamos algunos años de melón HD. Hagamos H uno. Hola Mundo Ahora no vamos a hacer Hola, mundo. Estamos mucho más allá de Hola mundo. Hagamos cambiar CSS con oyentes de eventos. Ahora necesitamos unos campos de entrada. Vamos a crear un negativo con una entrada, solo un texto regular y voy a darle estilo a esto para que tu tenga algún tipo de peinarlo. Dio palmaditas 30 píxeles y también tamaño de fuente 30 píxeles. Hagámoslo grande, y necesitamos una etiqueta aquí color de fondo y vamos a seguir adelante y duplicar esto. Llama a esto un color de texto, misma cosa y Entonces vamos a añadir una clase en ambas clases igual a Js algo por ahí. Y acabo de llamar a Js solo para que sepa que es solo para JavaScript, JavaScript, color BG y hagamos color de texto JavaScript. Y si miramos su página, va a ser bastante fea. Sí, agrega bastante asqueroso. Pero ¿sabes qué? Es lo que es. Entonces la idea es que podamos escribir aquí así como así, y va a cambiar el color de fondo de su página y cambiar el color de fuente de nuestra página. Por lo que necesitamos crear dos oyentes de eventos para esto. Vamos a cangrejo, el primer oyente de eventos antes del color de fondo. Hasta el momento, color BG es igual a los documentos selector de consulta de puntos Lo suficientemente bueno, y también vamos a agarrar el color de texto Js color de texto Js, y vamos a llamar a este color de texto uno. Ahora necesitamos agregar nuestro oyente de eventos, así que hagamos BG color dot add event listener key up porque estamos escribiendo en un campo de texto, vamos a pasarle una función de devolución de llamada que automáticamente toma un parámetro llamado evento. Y luego, solo en consola registremos esto por ahora. Cancelado log event dot target dot value, sea lo que sea que vaya a ser, y vamos a seguir adelante y duplicar todo esto. Copia aprobada. A y el color del texto va a hacer exactamente lo mismo. Digamos que color BG en este registro de consola y eso es hacer color de texto en este registro de consola. Refresca color BG. Podemos ver eso ahí dentro y luego x color. Podemos ver eso en su cloro, como lo llamé. No, él quiere básicamente cambiar el texto de las páginas, color y el color de fondo de las páginas. No hemos aprendido a hacer esto en JavaScript. Sí, esto va a ser bastante divertido para esto. Adelante y agarremos todo el cuerpo del documento, y luego vamos a cambiar el estilo del cuerpo, el color de fondo. Entonces vamos a hacer de Nuestro cuerpo es igual a documentos enseñados consulta, selector. Vamos a agarrar el cuerpo y luego podríamos hacer body dot style dot. El color de fondo es igual a los eventos que apuntan a ese valor. Y así todo lo que hicimos aquí fue decir: Hey, Hey, vamos a agarrar todo el cuerpo. Ese es el elemento corporal que viene de ahí y luego el estilo en él. Entonces estamos viendo esta notación de puntos con mucha más frecuencia. Ahora este estilo va a tener un color de fondo. Técnicamente, es color de guión de fondo, pero en Javascript no puedes usar un guión en un nombre de propiedad o variable. Entonces lo que hacemos es camello lo caso. Entonces, cualquier vez que veas un guión en una declaración CSS, no Dash C, es sólo mayúscula Ver, o si fuera, ah, imagen de fondo, no sería imagen de fondo. Sería capital de fondo. Me imagino la carcasa de camello por lo que tiene un color de fondo. Y veamos si esto funciona. Color de fondo Rojo. Oh, mira ese color de fondo azul color de fondo. Hagamos un color hexadecimal negro. Eso es bastante aseado. Eso es iniciar una obra. De acuerdo, hagamos lo mismo con nuestro color de texto. Ahora podemos conseguir más eficientes con esto porque en cada clave arriba estamos consultando la página para el elemento body. Ahora, suerte, sólo hay una, así que es fácil de encontrar. Pero ya sabes, si escribes la palabra roja R E. D, se va a ejecutar esto tres veces, y a medida que tu página se hace más grande y más grande, eso se vuelve más lento y más lento, y así vamos simplemente mueve esto hacia arriba al ámbito global, y no tenemos que preocuparnos por despejarlo más de una vez porque siempre estará disponible para nosotros y en su color de texto. Podríamos hacer uso de eso pegándolo aquí abajo, y pegué el equivocado. Entonces, uh, no viste nada. Y así aquí solo estamos diciendo, el estilo del cuerpo, no el color de fondo. Apenas el color de fuente regular va a ser cualquiera que sea este valor objetivo de evento va a ser para el color del texto para esta nota, sigamos adelante. Refrescar el color del texto. Digamos blanco. Parece que todo desapareció. ¿ Y si lo selecciono todo? Todavía está ahí. Se va a leer el color de fondo o azul o verde que es tan difícil de ver. O negro y amarillo, negro y amarillo, negro y amarillo. Y así es como vamos a cambiar CSS con oyentes de eventos. Ahora, en cualquier momento, incluso podrías cambiar un CSS mientras tus páginas se cargan inicialmente. Entonces si quisiéramos. Sigamos adelante y cambiemos el color BG usando JavaScript para que el estilo de punto de color BG termine, también. El color de fondo es igual a leer así como la carga de página que se va a leer. Y en realidad ha hizo eso mal porque seleccioné el color BG. Me adelanté a mí mismo. me emocioné un poco. Entonces lo voy a hacer es simplemente deshacer eso y bajemos. Y en lugar de color BG, hagamos cuerpo. Ahí vamos. Eso se ve mejor. Ah, también podríamos cambiar el color predeterminado también hacer el negro, que probablemente ya era trineos. ¿ Esperas? Ahí vamos. Y esto va con cualquier CSS que confinaste. Entonces, por ejemplo, BG Color. Digamos que queríamos agregar algo de redondeo. Hagamos BG color dot style Ese radio de borde va a ser Vamos a darle un radio de borde de 10 píxeles . Mira eso. Esos aire ahora alrededor en un poco. Vamos a darle un borde que se le da un borde de tres picos es de color negro punteado. Oye, mira eso. Es decir, esto es bastante feo. No me malinterpreten, y nunca queremos desplegar esto realmente en la vida real. Pero ahora en realidad estamos cambiando CSS con javascript. No estamos escribiendo ningún CSS realmente. Quiero decir, esto es CSS, supongo pero no estamos escribiendo ninguno. Estilos reales te estaban dejando JavaScript, todo ello. Y a medida que tecleamos aquí, va a cambiar para nosotros, lo cual es bastante guay. Ahora. Podríamos dar este paso más allá. Podríamos decir, Hey, tal vez los colores de fondo sólo pueden ser un color determinado. Vamos a seguir adelante y agregar esto como una variable para que no tengamos que escribir evento ese valor objetivo todo el tiempo y hagamos una declaración if. Mejor aún, hagamos una declaración de cambio. Todavía no hemos visto esto demasiado, así que cambia el color. En realidad necesitamos asignar eso. Eso son dos casos iguales al azul, y podríamos hacer eso. De hecho, ¿qué? En realidad podríamos incluso apilar estos juntos. Entonces esto es algo interesante. Azul lectura, Espere y luego predeterminado. Siempre va a ser Necesitamos un descanso en tu descanso. El color predeterminado siempre va a ser blanco y error de sintaxis. Eso fue culpa mía. Yo sólo quería escribir eso. Se podía decir que era un error de sintaxis porque todo se estaba volviendo gris eso. Básicamente esto es decir, oye, agarra cada color o el color que sea este actualmente y dice Si es rojo, blanco o azul, entonces cambia el color de fondo a rojo, blanco o azul. De lo contrario siempre cambiarlo. El blanco simplemente mantener blanco es el predeterminado. Y así ahora en realidad estamos limitando la entrada del usuario. Entonces si escribo negro, sólo va dedo blanco como predeterminado. Pero si escribo rojo, va a funcionar. Obras azules. El blanco obviamente funciona. De hecho no queremos Esperar. Queremos que esto sea amarillo porque el blanco ya está ahí arriba, así que eso no tiene sentido tener obras blancas. Y si escribo algo aquí solo por defecto es amarillo. Y así ahí vas. Ese es un buen ejemplo de cómo usar un oyente de eventos cómo usar selectores de consultas cambiando el estilo CSS. Incluso usamos una función de devolución de llamada. Utilizamos una declaración switch que usamos para los oyentes de eventos y cambiamos el estilo predeterminado cuando se cargó la página. Por lo que en realidad hemos logrado mucho en este video. Entonces lo que me gustaría que hicieras es solo ponerte en nuestras manos la experiencia con básicamente todo lo que he escrito en este video. Adelante, crea algunos selectores cruelmente, intenta cambiar el estilo, luego crea una entrada e intenta agregar un oyente de eventos con una tecla arriba y una función de devolución . Y tal vez no tenga que tener una declaración de cambio que podría ser un poco complicada para lo que estamos usando actualmente. Pero se podría decir que el color del punto del estilo del cuerpo es lo que sea ese color que estás escribiendo en el campo de entrada. Adelante, dale un tiro a eso, vuelve a jugar con él. No vas a poder romper nada. Entonces haz lo mejor que puedas y, honestamente, solo diviértete un poco con él. Siempre me gusta retocar alrededor, y me gusta tratar de romper las cosas y especie de averiguar dónde está el borde de cada tipo de tema que aprendí, como, Hasta dónde puedo empujar algo exactamente, y eso me da mucha experiencia en manos. De verdad me gusta hacer eso. De lo contrario, si te sientes bastante confiado con esto, creo que deberíamos pasar a nuestro próximo mini proyecto. 39. Proyecto mini de JavaScript nº : Hola, End. Bienvenido de nuevo. Vamos a empezar en nuestro próximo mini proyecto aquí. Ahora, la idea detrás de este proyecto es todo acerca de los oyentes de eventos. Entonces este mini proyecto, lo que me gustaría que hicieras es crear tres elementos de entrada. Y luego quiero que hagan cosas diferentes con el evento diferente. Los oyentes cambian el color de fondo, cambian el color del texto y cambian el tamaño de fuente de la página a medida que escribes. Por lo que deberían ser campos de entrada. Y deberías estar mirando al oyente de eventos key up, Y en cualquier momento que alguien presione una tecla en uno de estos campos de entrada, debería ejecutar tu oyente de eventos e intentar hacer un cambio en tu página. Ahora básicamente lo hicimos en el último video donde estábamos cambiando como colores CSS con oyentes de eventos como escribiste. No necesitas conseguir ese avance, pero solo quiero que consigas algo de experiencia práctica con oyentes de eventos JavaScript directos . Así que adelante y dale una oportunidad a eso. Prueba si puedes hacerlo todo desde la memoria. Si no puedes, está bien, pero es bueno hacer sudar un poco al cerebro. Y como siempre, si te atascas, siempre puedes hacer referencia al otro material. Eso está totalmente bien. Nadie te va a avergonzar por ello. Y yo sugeriría ahora mismo que pausas este video porque estoy a punto de desvanecerme esto a negro y luego voy a empezar con mi solución de la forma en que lo implementaría. Así que adelante, Posit Video. Dale una oportunidad a esto, y luego cuando termines, reanude este video y podrás ver mi solución. No es la solución perfecta, pero es una solución. Hay tantas maneras diferentes de hacer las cosas en lenguajes de programación como Javascript y Python, todos estos otros lenguajes que no hay forma perfecta de hacerlo. Pero te mostraré mi solución. Así que pausa ahora y dale una oportunidad a eso. Muy bien, les voy a mostrar mi solución a muchos oyentes de eventos del Proyecto número cinco. Lo primero es lo primero. Necesitamos crear tres elementos de entrada. Desea cambiar el color de fondo uno para cambiar el color del texto y desea cambiar el tamaño de fuente de su página a medida que escribe. Todos estos deben ser como escribes algunos para entrar en mi editor V s código aquí, y primero lo primero necesito tres elementos de entrada, así que no voy a hacer una página de aspecto hermoso por ningún medio. Simplemente voy a crear un montón de etiquetas de dibs e insumos. Entonces Div vamos a tener una etiqueta aquí dentro, y esta etiqueta va a ser para BG color de fondo color de nuevo, esta es solo una etiqueta regular. Y luego sigamos adelante y en una entrada aquí forma controlamos algún bootstrap básico ahí dentro y el I D va a ser color BG. Y así esa idea va a coincidir con este sello de cuatro o son cuatro. Atribute aquí y nos detenemos y refrescamos tu página. Ya veremos sobre el color de fondo aquí. No va a pasar nada. no hemos escrito ningún JavaScript. Ahora básicamente queremos copiar este dos veces color de fondo, texto, color y tamaño de fuente, y éste va a ser un número, por lo que son cambios al tamaño del teléfono. Cambiemos esto a color de texto, y lo que voy a hacer es algo que verás una cantidad justa en la naturaleza. Pero en lugar de conseguir estos elementos por sus ideas, que definitivamente podríamos ser una forma muy rápida de hacer esto. voy a conseguir por su selector CSS usando un prefijo JavaScript. Entonces Js y luego BG color va a ser el 1er 1 Js El color del texto es el 2do 1 y el tamaño de fuente Js es el 3er 1 Vale, vamos a refrescarnos y sabes que no es la página de mayor aspecto pero hace el trabajo Ahora necesitamos crear algunos selectores de consulta, Tenemos que agarrar los tres de nuestros campos de entrada así que sigamos adelante y lo creativo son variables. Digamos que el color BG va a ser solo moveré eso aquí arriba selector de consulta de punto de documento y solo queremos el 1er 1 Así que Js BG color que coincide con este aquí y luego aquí dentro queremos color de texto y éste va a ser color de texto y luego el 3er 1 es va a ser divertido tamaño y este va a ser divertido y corre suspiros Vale, en este punto en el tiempo porque estamos escribiendo algo de javascript, voy a hacer click derecho inspeccionar, pasar a mi consola refresca Y solo estoy usando firefox para esto y yo ver que no hay errores en años. Entonces, por ejemplo, esto crearía ahí. Ver Referencia Air SD s. D. A s no está definido. Por lo que no obtuvimos ningún error como ese. Por lo que podemos suponer que las cosas se ven bien. A continuación, queremos cambiar el color de fondo, texto, color texto, y tamaño de fuente de página a medida que escribimos. Por lo que necesitamos un selector de consultas más aquí. Tenemos que poder cambiar estos estilos en el cuerpo. Vámonos. Vier cuerpo es igual a documentos selector de consulta de puntos. En lugar de agregar un selector C s s para una clase, solo vamos a usar un selector de colecta CSS regular para el cuerpo. Ahora necesitamos agregar o eventos oyentes. Así que digamos BG color dot add event listener. Vamos a decir en key up ejecutar esta función en particular con el evento dentro de ella, Y solo para asegurarnos de que esto está funcionando de hecho, vamos a la consola registremos el valor de punto objetivo de punto de evento Refresca tu página. No hay errores. Y a medida que escribo, aparece aquí abajo. De acuerdo, así que eso se ve bien. Eso es agradable y saludable. Entonces ahora para el color BG, todo lo que queremos hacer es decir cuerpo, color de fondo punto estilo holandés. Recuerda Es un caso Camel como este y JavaScript. No hay guiones en las variables JavaScript, por lo que usamos casing de camello. El color de fondo es igual al valor de punto objetivo de punto de evento, y eso es todo. No necesitamos devolver nada. No necesitamos hacer nada elegante. Adelante y dale una oportunidad a esto. Bam! Al igual que ese color de fondo se vuelve rojo mientras escribo la palabra rojo. No, realidad, todo lo que tenemos que hacer es copiar caras unas cuantas veces. Color de fondo. Este va a ser punto de color de texto Añadir oyente de eventos en la clave arriba body dot style color de fondo punto . No, queremos cambiar eso a color del texto, que en CSS sólo se llama color. Y eso va a ser el valor objetivo del evento. Y en el último va a ser punto de tamaño de fuente en el oyente de eventos de nuevo. Tecla la función de devolución de llamada con un parámetro de evento ahí dentro, y vamos a decir que el tamaño de fuente de punto del estilo del cuerpo es igual a lo que sea esto. Además, vamos a Kincannon ocho, tal vez píxeles, O si quieres hacer ems o carneros, podrías hacer eso también. Voy a quedarme con píxeles para poder usar un número regular, y no va a hacer de esta página dos ridícula más ridícula de lo que ya va a ser. Adelante. Hit Refresh. No hay errores en mis cónsules de JavaScript. Vamos a bajar eso un poco. El color de fondo va a ser azul. El color del texto va a ser blanco. El tamaño de fuente va a ser de nueve píxeles. Ah, tal vez 90 píxeles. Es decir, realmente ridículo. Hagamos algo un poco más grande. Por lo que tenemos tamaño de fuente 25 píxeles, texto de color de fondo blanco de azul, y esto cambia a medida que escribimos. Incluso podemos usar valores hexagonales aquí también. AB 00 Eso es rojo F F cero que es amarillo o amarillo o aqua. Y así es como vamos a crear una página que va a cambiar más o menos a medida que escribes en diferentes campos de entrada. Por lo que todos juntos utilizamos el total de 369 13 líneas de JavaScript para hacer una página completamente dinámica basada en lo que el usuario quiera. Y eso es todo lo que hay a este mini proyecto. Ahora, si estás en la cuota de habilidad, no olvides que puedes crear tu proyecto de curso y compartirlo ya sea a través de un lápiz de código o puedes compartirlo o puedes compartir tu código exacto. Puedes tomar una captura de pantalla de tu código y también de la página realmente funcionando. Siéntete libre de compartir tu proyecto con el resto del grupo. Probablemente termines creando un montón de inspiración para muchas otras personas, lo cual siempre es útil para otras personas también. Además, te daré algunos comentarios si quieres. 40. Objetos: De acuerdo, Hoy es el gran día. Este es el gran momento. Hemos hablado de esta cosa llamada objeto tantas veces, y sigo diciendo que vamos a aprender al respecto. Vamos a aprender al respecto. Eventualmente, vamos a aprender al respecto. Ahora es el momento en que vamos a aprender al respecto. Entonces un objeto es una idea terriblemente, terriblemente nombrada para una forma de almacenar datos. Porque si piensas en un objeto, bueno, bueno, piensa en sostener cualquier cosa en tu mano. Y si alguien describiera ese elemento que está en tu mano, la palabra objeto podría caber cualquier elemento físico que realmente tenga algún tipo de masa o peso a él podría ser considerado un objeto que no es muy útil. tanto que una matriz básicamente, ese es un término de desarrollador de fantasía para una lista. Tan sólo una lista de cosas variable una variable. Si pudiera deletrear ese derecho Variable es un valor que cambia. En realidad está en el nombre. Es variable. En JavaScript, un número es obviamente solo un número, y en una función sabemos que en realidad se supone que una función debe hacer algo. Pero la palabra objeto es como qué? ¿ Qué es ahora un objeto? los objetos tienen básicamente una complejidad infinita. Entonces creo que deberíamos dar este paso a la vez, y realmente no tenemos que saberlo todo ahora mismo. Eso sólo va a ser demasiada información que será sobrecarga de información. Entonces lo que voy a hacer es presentarte a los objetos de cualquier manera más amistosa. Por lo que sabemos que cuando creamos una lista en JavaScript podemos crear en una carrera. Digamos, Ah, vamos a crear nombres es igual a una matriz. Caleb Nathan termina siempre y ese fue mi tipo de su capital. A. Y así cuando escribo nombres como este, eso está claro que los nombres de tipo. Si quisiera conseguir a Nathan, tendría que escribir nombres hard bracket, el número uno y luego otro corchete, y eso me dará el índice aquí. Pero ¿y si quisiera que Teoh almacene un montón de datos sobre una persona en particular? Entonces dije una persona en particular su nombre es Caleb. Tiene 30 años y tiene dos gatos. No, eso está bien, pero no sabemos si este es necesariamente el orden correcto, porque si dije hey, de todos estos números de todas estas variables. Más bien, ¿cuántos gatos tiene Caleb? Bueno, tú también lo adivinarías . Pero por lo que sabes, podría tener 30 gatos y sólo lo he mencionado. Y así está esta zona gris, y no sabemos cómo acceder a ésta de manera adecuada con un objeto al que podamos nombrarlo. Entonces sigamos adelante y creemos un objeto. Entonces vamos a crear un objeto de persona, y el objeto simplemente se ve así. Es un corchete, y luego le damos algún tipo de nombre. Entonces sigamos adelante y en realidad llamemos a este nombre y se puede ver que hay paréntesis no son paréntesis. Se puede ver que hay cotizaciones alrededor de esto. Podrían ser cotizaciones simples o dobles. No importa dos puntos, y luego cualquiera que sea el nombre, por lo que va a ser básicamente parece que una cadena es igual a usar. Un signo de colon es igual a casi cualquier tipo de variable. Podría ser un número. Podría ser una función. Podría ser una matriz. Podría ser No, podría ser otro objeto. Y sigamos adelante y creemos otra. A tu edad. Mi edad va a ser de 30 y el número de gatos que tengo que y para cerrarnos, sólo le damos un cierre, paréntesis o no. Aprendices, un corchete rizado de cierre golpeó, Entrar y ahí vamos. Tenemos ahora un objeto. Y en lugar de decir, Bueno, esta es una matriz donde es igual que Caleb, 32 es lo que adentro antes de esto ahora en realidad dice que la edad es igual a 30 gatos por nombrar es Caleb. Entonces ahora cada vez que tomo persona, puedo tomar persona punto Edad me da 30 persona nombre punto me da el nombre persona dot Cats me da el número de gatos, y ahora en realidad hemos asignado un nombre a básicamente una lista o una matriz, y casi se puede pensar en estas como variables internas. Entonces tenemos una persona llamada muy audaz. Pero dentro de eso, hay una variable llamada variable edad llamada nombre y variable llamada gatos. Ahora lo principal a saber de un objeto es sí. Viene con gran nomenclatura, por lo que puedes nombrar casi cualquier cosa aquí. Entonces person dot name realmente me da mi nombre, que es fantástico, pero también puedes agregarle y usar la palabra clave this. Por lo que hemos aprendido un poco de eso. Aprendimos en la lección de matriz donde podríamos hacer lo que sea que la matriz se llame dot Push, y eso en realidad empujará algo a la persona de la matriz no funciona del todo de la misma manera. Podemos literalmente simplemente crear cualquier cosa. Entonces persona, hagamos algo muy interesante aquí. ¿ Qué sonido hace esta persona? Por lo que para crear un nuevo punto de datos dentro de este objeto, se parece mucho a una matriz. Nosotros le damos cualquier tipo de nombre variable que queramos ahí dentro es igual, y luego a lo que queramos que sea igual en este caso, nos voy a dar una función y voy al registro de puntos del consejo. ¿ Qué sonido lo mata? ¿ Qué dice el Caleb? Este tipo me dice. Ah, no sé por qué, pero voy a decirme cómo Hit Enter, Guárdalo. Y ahora en realidad podemos ver la función en sí. Eso es lo que regresó volvió a funcionar. Se llama Sonido no tiene argumentos. De acuerdo, así que acabo de despejar eso. Ahora si realmente quisiera ver qué hay dentro de la persona objeto, podría simplemente escribir persona, y vamos a ver que hay un juez, nombre de gato y un sonido. Un sonido como función nos da todos los detalles ahí dentro ahora. También puedo simplemente hacer paréntesis de sonido de punto de función porque es una función. Las funciones son acciones, las acciones necesitan paréntesis. Yo pegué. Entra, asegúrate de que tengo los registros encendidos aquí para que el registro de la consola realmente aparezca y me diga fuera. Y entonces no, no sólo mi persona tiene una variable dentro de ella, mi persona también tiene, ah, función dentro de ella. Ahora, cuando se trata de variables y funciones dentro de un objeto más dentro de una clase, generalmente tienen nombres diferentes, y esto le dice a otros desarrolladores cuál es el alcance. Por lo que típicamente tenemos un nombre de variable es igual a Caleb, y esto sólo se llama variable. Ya hemos visto esto 100 veces. Entonces también tenemos una función de función algo, y hace algo aquí y esto Se llama una función cuando estamos tratando con un objeto por lo que de nuestro nuevo objeto es igual a, y nombre va a ser Caleb, Por el camino, no importa si estamos usando apóstrofes simples o comillas. Realmente no importa. Ahí es coma. Entonces el JavaScript sabe que va a haber otro objeto aquí. Otra pieza de datos. A esta cosa ya no se le llama variable. A esto se le llama propiedad y función. Entonces, como cuando escribimos, sonido es igual para funcionar algo aquí dentro. A esto se le llama método, así que vamos a volver a escuchar persona puntar Age va a ser una propiedad. Actúa igual que una variable. Básicamente, lo mismo es variable, pero lo que estamos diciendo es que esta variable en realidad pertenece a un objeto, o en algunos otros idiomas, pertenece a una clase. De igual forma, con sonido sonido es una función, pero está dentro de un objeto, por lo que lo llamamos un método tiene exactamente las mismas propiedades, y funciona exactamente de la misma manera que una función. La única diferencia es que ahora está dentro de un objeto, así que lo llamamos método, y esto es realmente solo una convención de nomenclatura, para que cuando estás hablando con otros desarrolladores, puedan entender lo que está pasando ahora. ¿ Por qué es importante esto? Esto es importante porque podríamos decir persona dot sound. Vamos a sobrescribir. Esto es igual a la función y queremos que la consola registren el nombre. Entonces hacemos este nombre de punto y si ejecutamos persona dot sound, me da mi nombre. Ahora es aquí donde realmente viene útil la palabra clave esta porque echemos un vistazo a esta persona. Objeto una vez más porque ejecutamos una función que está dentro de un objeto. El esta palabra clave se refiere a todo el objeto, no sólo a la función. Es todo el objeto y así dentro de una función. Rasca que dentro de un método podemos usar este nombre de punto para empezar la edad no los gatos solo a nombre . Podríamos incluso regresar si quisiéramos, lo cual no vamos a ir Pero podríamos devolver todo el objeto si quisiéramos comprar sólo diciendo Regresar esto Vamos a seguir adelante y crear un método totalmente nuevo aquí llamado persona dot Obtener gatos. Esto va a ser una función y todo esto va a hacer es alertar y el número de gatos que tengo alerta este punto Gatos, De hecho, De hecho, vamos a hacer esto nombre de punto Capitán E tiene que detener a los gatos. Ahí vamos. Entonces esto va a decir que Caleb tiene dos gatos. Adelante y cerremos esa función. Está bien, eso estaba listo. Si volvemos a mirar a la persona objeto, tenemos una función en tu llamada get Cats. Podríamos pasar parámetros ahí si quisiéramos también. Al igual que una función regular. Vamos a correr a esta persona, no cojas gatos y déjame mover esto. Y dice que Caleb tiene dos gatos. Y así cuando originalmente nos enteramos de la palabra clave vis, en realidad no era súper útil. Pero cuando empezamos a trabajar con objetos, eso se vuelve mucho más útil. Ahora, ¿por qué alguna vez usarías esto? ¿ Por qué alguna vez usarías un objeto como este? Bueno, se podría decir que la persona objeto es igual a Caleb. Hago un sonido. Tengo un agente aquí 30 y tengo gatos para. Y vamos a llenar esto por completo. Consejo no registra. No. Entonces la razón por la que usaríamos esto es porque ahora podemos usar nombre de punto persona O ¿cómo cambiamos esto a Caleb? ¿ Yo? Simplemente me usaremos como ejemplo. nombre del punto de Caleb va a ser Caleb. A lo mejor es mi nombre completo. Caleb diciéndole a Caleb edad punto. Al leer esto, esto tiene más sentido. Ahora el Caleb, Muy Buller, el objeto Caleb de zanahoria. ¿ Cuál es su edad? ¿ Cuántos gatos tiene? Y esto se vuelve mucho más verboso. Entonces mientras lo estás leyendo, esto en realidad tiene mucho más sentido, y podrías hacer lo mismo con casi cualquier persona. Entonces digamos que teníamos otra persona aquí y su nombre es Zephyr, que en realidad es mi gato. En realidad me dice cómo es su edad para cuántos gatos tiene? Ninguno. No tiene ninguno. En realidad, lo hace. Tiene un hermanito. Entonces tiene un gato. Y ahora podría decir su esfuerzo gatos, y eso me va a dar uno o su esfuerzo, ese sonido y eso va a consola log. Ahora de nuevo, ¿ dónde entra realmente en juego esto? Porque en este momento sólo estamos usando un objeto. Bueno, esto entra en juego porque hasta este punto, teníamos que almacenar todo esto en variables separadas por lo que tendríamos variable que parece algo así es que su nombre es igual a cualquiera que sea su nombre. Zephyr Zephyr. La edad es igual a cuatro como siempre los gatos es igual a uno es que para el sonido es igual a mí. Ah, y entonces tendríamos que hacer consejo No registremos. ¿ Eso es por sonido? Y así ahora hemos escrito cuatro variables. Y si quisiéramos una copia de esto a alguien más, tenemos que acertar para más variables. Y si quisiéramos poblar de nuevo, tendríamos que adivinar qué copiar y pegar una y otra y otra vez. Y así ahora tenemos 12 variables en el ámbito global de las cosas. Esto realmente solo está haciendo un gran lío del alcance global, mientras que con ah, un objeto hermoso, obtenemos sólo el nombre de la variable regular. Además, obtenemos estas propiedades y métodos dentro de ella. Ahora, así como un refresco rápido aquí, me perdí ese de ahí dentro como un pequeño refresco rápido aquí dentro. Echemos un vistazo a la sintaxis de un objeto. Entonces la sintaxis de objetos se va a ver así. Tienes variable de algún tipo y tienes a tu nombre de variable es igual a un objeto. Entonces esa es tu apertura y cierre de corchetes rizados ahí dentro. Y luego tienes un colon clave no justo valor. Y luego si tienes más, arrojas una coma ahí y luego vas clave a valor de nuevo. Si tienes más emoción, entra ahí. De lo contrario, esa última no tiene coma. Y luego cuando quieras acceder a cualquiera de nosotros, podrías simplemente escribir nombre de objeto y algo así como cómo accedemos a las cosas en una matriz en lugar de usar 0123456 y así sucesivamente. Entonces adelante. Acabamos de usar el nombre clave. Por lo que clave va a devolver valor y de igual manera clave a va a devolver valor a ahora. Ese es el general justo detrás de un objeto. Probablemente no las vas a usar con demasiada frecuencia hasta que tengas mucha más experiencia con JavaScript y luego de repente estarán en todas partes. Tienes una especie de ir de 0 200 en, como, cinco segundos. En cuanto empieces a verlos, vas a empezar a usarlos por todo el lugar. Pero como solo estás aprendiendo javascript, no vas a usar estos por todas partes. Todavía no. Entonces, ¿qué? Me gustaría que hicieras una pequeña tarea para este video recién creado Object. A lo mejor eres tú. Por lo tanto, crea variable. Sea cual sea tu nombre, crea el objeto. Dale un nombre, un sonido. Ah, una edad, tal vez tu comida favorita, tal vez tu página web. Y luego solo intenta ejecutar algunas de las cosas dentro del consejo de tu navegador. Adelante y dale una oportunidad a eso. No lo olvides. Si tienes preguntas, comentarios, inquietudes, puedes dejarlas abajo. Estar bajo. Yo estoy aquí para ayudarte a simple vista de un momento. Los objetos son algo muy interesante en JavaScript. Espero que esta explicación estuviera bien. Es Este es uno de esos trabas a la hora de programar es entender objetos. Pero una vez que lo consigues, no hay vuelta atrás. Por lo que definitivamente conseguir algo de práctica ahí va a haber muy, muy importante por el camino. 41. Para bucles: un bajo extremo Bienvenido de nuevo. Vamos a empezar a tocar y concepto que es realmente importante en la programación, y este concepto es un bucle. Entonces la idea es que se tiene una función particular o se le establece un código o algo así. Se quiere hacer más de una vez una y otra vez automáticamente. Y así digamos que tienes un montón de nombres. Entonces tienes a Caleb, Nathan y Zephyr, y para cada uno de estos nombres, quieres capitalizarlo. Se quiere tal vez poner en gmail dot com o algo al final de la misma para obtener una dirección de correo electrónico . Se le quiere hacer algo a los tres. Aquí es donde entraría un bucle de cuatro y no sólo tiene que ser tres. Podría ser un elemento que está en una matriz. Hablaremos de eso en un segundo. Podrían ser dos artículos, tres artículos, 3000 artículos. Realmente no importa. Simplemente va a seguir dando vueltas hasta que básicamente, todo esté hecho. Entonces echemos un vistazo a un bucle de cuatro. Por lo que cuatro loop se va a ver algo así. Tenemos palabra clave para dijimos. Una variable I es igual a cero. Entonces este es nuestro intervalo. Sea lo que sea que esto vaya a empezar, este es básicamente nuestro contador. Hablaremos más de esto en un segundo. ¿ Cuánto tiempo debe durar esto? Bueno, digamos que tengo que ser menos de 10. Y luego después de cada aireación Lupin apenas ing incremento I por uno. Entonces hagámoslo yo plus consejo. No registren I. Y entonces lo que esto está diciendo es para la variable. Voy a empezar en cero mientras sea menor de 10. Consola, log, sea cual sea ese número que sea yo y luego al final de cada generación, es como decir esto soy igual a yo más uno. Eso es lo que estamos haciendo al final aquí. Sólo que esta vez no tenemos que escribir eso. Entonces vamos a seguir adelante y salvarnos y abrir esto en nuestro navegador y refrescar nuestra página y vamos a ver 0123456789 y te das cuenta de que todo está sucediendo en línea. 18. Entonces cuando hago clic en esto y muevo esto sobre mentir 18 lo suficientemente seguro, ahí está el registro del consejo así? Entonces este punto, probablemente estés pensando, Oye, eso es algo genial, pero honestamente, no sé dónde voy a usar eso. Entonces vamos a crear aquí un ejemplo de vida real. Vamos a crear una carrera A. Tenemos variable de nombres, y esto va a ser una matriz. Tenemos a Caleb, Nathan Sufre y Henry. Y digamos que queremos mirar a través de todos estos. ¿ Cómo vamos a hacer esto? Entonces en cambio, voy a comentar esto solo para que nos puedas referir más adelante si quieres. Vamos a crear aquí un nuevo cuatro Lupin. Veamos en realidad con qué código V s quiere llenar automáticamente esto. Sí, eso en realidad es bastante perfecto. Está haciendo algunas cosas aquí dentro de las que aún no hemos aprendido, así que voy a deshacer eso. Pero si se usa el código V s, sólo se puede golpear cuatro pestaña. Por lo que tu bucle for comienza con tu palabra clave de cuatro para variable. Yo es igual a cero. Queremos ver cuántas veces queremos recorrer el número de elementos que se encuentran en esta matriz. Entonces digamos nombres longitud de punto y yo es menor que nombres longitud de punto. Entonces lo que esto está diciendo es un za siempre y cuando los ojos menos de cuatro sigan rodando. Y luego al final de cada generación, digamos incrementos. Yo compro uno podríamos implementado por dos. Habíamos multiplicado por 10 si quisiéramos. Pero lo más común lo vas a ver solo incrementos en uno. Y entonces podríamos crear un nuevo bolos muy aquí y decir, Ah, esta variable es el nombre actual. Y debido a que esta es una lista que tenemos para acceder a estos nombres, Caleb va a ser Índice cero índice uno a índice tres. Y así ahora podemos decir que nombra. El 1er 1 va a ser cero. Entonces en la primera iteración, y luego una vez hecho, básicamente va a decir detrás de bambalinas, soy igual a yo más uno, y así corre una segunda vez. Y entonces ese va a ser Nathan y luego Zephyr y luego Henry. Pero estamos almacenando todo eso en una variable llamada I Just Interval Stands for Interval. Yo es igual a intervalo. Adelante y consola Loggers Council no registren nombre actual. Refresca nuestra página Cómo obtenemos a Caleb Nathan y Henry Cool. Entonces ahora realmente estamos haciendo algo con una matriz porque hasta este punto, un aumento para nosotros. Simplemente almacene una lista de datos, y en realidad no es súper útil a menos que sepamos exactamente qué hay en ella Ahora. No necesitamos saber qué hay exactamente en él, así que sigamos adelante y hagamos esto un poco más complicado. Vamos a crear una función aquí donde vamos a convertir una entrada en minúsculas y upend en gmail dot com. Entonces función. Llamemos esto a la dirección de correo electrónico, y se va a tomar un nombre y podemos hacerlo todo en una línea ahora para que podamos hacer nombre que viene de este parámetro aquí dot a minúsculas plus en gmail dot com. Y así esto es sólo puede Capitán terminando en gmail dot com en su carcasa inferior, todos los nombres Así que ahora podemos tomar que lo puedes aplicar aquí. Estamos diciendo que el nombre actual va a ser cualquiera que sea el nombre actual en nuestra matriz. Aquí es donde se pone un poco más complicado. Vamos a pasar ese nombre. Cualquiera que sea ese nombre. aquí como el parámetro en a dirección de correo electrónico, y eso va a devolver cualquiera que sea el nombre. En minúscula y gato enlatado Nate en gmail dot com Así que ahora sigamos adelante y demos a esto un ahorro . Y mira eso. Caleb, Un genial Nathan Ojima, Zephyr Jima y Henry en gmail dot com. Eso no, en realidad estamos haciendo algo útil aquí. Ahora. Lo bonito detrás de esto es que en realidad no estamos escribiendo tanto código. Y como tu un Reagan es más largo y largo y más largo, ya no estás escribiendo más código, lo cual es realmente, realmente bonito. De hecho, podríamos, si quisiéramos incluso reducir esto y en lugar de nombre, vamos a usar nombres. Yo Sigamos adelante y deshacernos de eso. En realidad no lo eliminemos. Acabemos de comentar. Y así ahora, en 1234 cinco líneas de código, podemos ejecutar estas cuatro. Cónsul Lux, que no parece mucho, pero ¿y si hiciéramos algo más loco? Adelante y hagamos un bucle Laura Epsom, así que tomemos Florham 50. Y así sólo tenemos 50 palabras de cálido ipsum aquí split punto en cada espacio y lo que esto va a hacer es, digamos, digamos, dividir su split, su split, su división ahí todo el camino hacia abajo. Y esto podría ser entrada de usuario su balón. Podríamos dividirlo. Y cambiémonos de nombres. Dos palabras sólo porque va a parecer un poco más agradable y lo cambiamos de nombres. Aquí también dos palabras. Entonces comienza cero invariable o intervalo cero. Sigue adelante mientras haya palabras en ese erecto. Sabemos que esto no es array porque usamos split de puntos después de que cada aireación Lupin siga adelante e incremente el número. Compro un nombre actual. Entonces hagamos este correo electrónico actual Lo que vamos a decir y lo que estamos haciendo aquí es que estamos diciendo que este correo actual va a ser lo que sea la palabra a minúsculas Can Katyn ocho en gmail dot com. Entonces esto va a tomar cada palabra aquí. En minúscula cada uno y luego agregar gmail dot com, que es un ejemplo bastante inútil. Pero esto demostrará el poder de los bucles. Mira esto. Ahora hay 50 de ellos ahí dentro. No escribimos ninguna línea extra de código. Tenemos una línea de código aquí. Es solo en múltiples líneas porque ahí hay una cuerda larga. mi editor le gusta el dedo del pie dividirlo en múltiples líneas. Por lo que una línea a línea tres línea cuatro línea en exactamente las mismas cinco líneas de código. Tenemos 50 salidas ahora eso no es bastante útil, y vas a ver estas por todo el lugar. Esto es tremendamente popular en toda la programación, especialmente en JavaScript. Digamos que solo querías el 1er 10 Vale, Bueno, lo que podríamos hacer es realmente podemos salir de este bucle en cualquier momento o podríamos seguir sobre él. Ahora bien, lo que podríamos hacer es decir, si yo es igual a 10. Entonces es la décima palabra. No sé por qué haríamos esto en este ejemplo, ya que queremos recorrer cada palabra. Pero vamos a decir, Hey, Hey, cuanto llegue a los incrementos de número 10 hasta el número 10 simplemente romper de lo contrario seguir funcionando normalmente. Y así esto sólo va a mostrar el 1er 10 Y lo que podemos hacer aquí es realmente podemos cónsul log I más el email actual para que podamos ver todos estos Y lo que esto nos va a mostrar es del 0 al 9. Y ahí está. Tenemos 0 a 9, técnicamente 10 ítems porque empezamos en el número cero. Entonces si cuentas con tu mano, 0123456789 Tienes todos los 10 dedos de tu mano apuntando hacia afuera. Entonces ahí estás. Y dijimos: Oye, Oye, en el intervalo 10, solo salgan del bucle. Ya no muestres. Vamos a seguir adelante y comentar no ve qué pasa. Esto bajará hasta el número 50 o el Índice 49. Adelante y comentemos eso fuera. Y hagamos algo un poco más interesante. Aquí vamos a usar algunas matemáticas básicas. Vamos a usar esta cosa llamada módulos, que realmente no hemos aprendido, y está bien. Realmente no necesitas saber demasiado sobre este. Vamos a decir si módulo ISS dos es igual a cero. Entonces esto es decir es lo que sea que esté dividido por dos tiene un resto de cero continuar, y esto va a saltar por encima del bucle. Entonces lo que sea que esté aquí abajo, por ejemplo, este registro de consola. Esto no se ejecutará. El comunicado de continuar básicamente dice, Hey, todo aquí abajo. Si esto continúa, se ejecuta sentencia. Esta cosa no se ejecuta. Pasar a la siguiente generación. Sigamos adelante y guardemos eso y veamos qué pasa aquí. Recibimos cada 2do 1 Entonces, por ejemplo, no vemos el número 10 aquí dentro. 10 dividido por dos es cinco con el resto de cero. Y así porque esto es cierto, va a continuar su no va a cónsul para arriba. Entonces así creamos rosa par y impar y como mesas cuando tienes, como una fila gris camino blanco, camino gris, Carretera blanca, Carretera gris, Carretera gris, fila blanca Esto es básicamente todo lo que estamos haciendo. Entonces esta es tu introducción en cuatro bucles. Esto en realidad también es introducción a bucles salvajes y para cada bucle a otros bucles, vamos a entrar enseguida. Lo que me gustaría que hicieras antes de seguir adelante es crear un for loop básico. Así que adelante, usa la variable de cuatro palabras clave. Yo es igual a cero. Yo es menor que, o tal vez menor que e igual a ah longitud particular. Yo plus plus, no te olvides de agregar eso y entonces tal vez solo registro de consola, lo que sea que sea actualmente. Y eso es todo lo que me gustaría que hicieras. Simplemente consigue un poco de experiencia manos en él. No necesitas ser un profesional agregado para pasar a la siguiente lección en absoluto. Solo quiero que te familiarices un poco con esta sintaxis de aspecto extraño de la forma en que este código es una especie de descrito usando personajes divertidos en un orden divertido. 42. Mientras bucles: De acuerdo, echemos un vistazo a esta idea de un bucle salvaje un bucle while. Por lo que aprendimos sobre un bucle de cuatro en un bucle for. Básicamente dice: Oye, Oye, me voy de dedo del pie hasta que me digas que deje de bucear. Un bucle salvaje no lo hará Un bucle salvaje. Si no tienes cuidado con esto, uno seguirá para siempre hasta que tu computadora se quede sin memoria y o tu navegador bloquee. O si estás en una computadora más antigua, tu computadora se bloquea. Entonces solo ten mucho cuidado con este bucle salvaje. Este es muy, muy importante de entender antes de que realmente escribas uno en el peor de los casos aquí es ya sabes, tal vez tu computadora se queda sin memoria y tienes que darle un reinicio, no lo peor en el mundo, pero generalmente tu computadora simplemente se bloquea. Le das un reinicio. No vuelvas a ejecutar el guión y ya estás bien para ir. Entonces echemos un vistazo a un rato. Bucles, sintaxis. Entonces básicamente lo que va a pasar aquí es que tienes un rato. Algo es cierto. Haz un montón de cosas aquí. Realmente se reduce a algo así de simple, y entonces lo que podríamos decir aquí es var Numb es igual a cero. Y digamos que mientras el número es menor o igual a 1000 podríamos consejo dot log el numb . No, no lo ejecutes en este punto porque esto va a correr para siempre. No hicimos nada con el número en el bucle cuatro. Nosotros lo hicimos. Automáticamente lo implementamos en un bucle while que no lo hicimos. Por lo que tenemos que poner manualmente esto al final de nuestro Lubar al principio de un bucle. En algún lugar ahí dentro, necesitamos que se incremente el número. Entonces podríamos decir que el número es igual al número más uno o podríamos simplemente hacer ninguno más y eso nos dará 12345 Así sucesivamente y así sucesivamente. Entonces vamos a seguir adelante y darle un tiro a esto. Y cuando refresco esto, esto va a la consola log el número 1000 veces y seguro, ahí está, y solo puedo seguir rizando. Simplemente sigue desplazando y ves que de hecho hay 1000 ahí adentro Ahora ¿cuándo querrías usar algo como esto? Bueno, lo que podríamos hacer es pedirle al usuario algún tipo de entrada. Entonces digamos var numb va a ser número y vamos a pedir al usuario un número . Dame un número y luego vamos a lanzar ese prompt lo que sea que va a ser a un número. Y luego cambiemos esto y digamos que el inicio de barra es igual a cero, no a 90 Y vamos a deshacernos de esto. Vamos a cambiar esto. Hagamos iniciar Numb es menor que entumecido. Y así lo que estamos diciendo es que siempre comenzó el número cero e ir hasta que llegue a lo que diga el usuario, Tal vez sea el número 10. A lo mejor es el número 10 millones va a correr hasta que llegue a ese número. También, tenemos que tener cuidado aquí porque este es el número que estamos tratando de incrementos. Entonces, si bien esto es cierto, tenemos que seguir adelante, intercambiar esos hacia fuera. Entonces, básicamente, lo que esto está diciendo es cero. A lo mejor el usuario tecleado en 1000 está aquí menos de 1000. Sí, lo es. Así que ejecuta uno, luego dos, luego tres, luego cuatro, Luego 5000 veces hasta que llega es 1000 menos que 1000. No lo es. Esto es falso. Y así deja de ejecutarse. Vamos a seguir adelante y darle un tiro a esto. Mueve esto para que podamos pedirme un número. Refrescar. Dame un número. Voy a rodar mi Dyson. Voy a decir 89. Y el cónsul registró 89 porque aquí hice el equivocado. Si estás mirando tu pantalla yendo, Caleb, olvidaste cambiarte una. Tienes razón. Yo hice este Cónsul registró 89 porque ese era el número que entré. Yo quería Konta registrar el número de inicio. El número que va a incrementarse constantemente. Adelante y dale un tiro. Vamos a fingir que el 1er 1 no sucedió Y el número 89 está ahí Está. Empieza en cero. Desciende al 88. Recuerda, Computadora empieza a contar al número cero. A pesar de que si quisiéramos, podríamos decir que esto va a ser uno es menor o igual a. Adelante y refresquemos 89. Y esto nos dará los números uno al 89. Ahí está. El último número es 89 1er número es uno. Y así que eso es un rato. Bucle. Ahora, en javascript moderno, ¿ves estos? Ah, mucho menos de lo que solías volver en el día. Éstos estaban en todas partes. Estos son menos populares ahora porque cuatro bucles y el para cada bucle, que hablaremos en el siguiente video básicamente se ha apoderado ahí. Mejores formas de bucles para JavaScript. Pero aún así vas a ver éste por ahí. Y si te estás preguntando, Caleb, ¿dónde tendremos voy a usar un bucle salvaje? Bueno, si quisieras crear ah lista de algo Así que en realidad, antes de pasar a esa siguiente lección, sigamos adelante y creemos otro ejemplo aquí. Entonces voy a comentar esto para que no use ningún recurso informático mío. Y vamos a crear una lista. Entonces tenemos clases de UL Eagle Js list te slash bien, y cuando refresco mi página, no vemos nada aquí. De hecho, hagamos esto cada una lista. Entonces tenemos un listado aquí, pero no hay ningún elemento de lista, así que vamos a necesitar realmente crear algunos elementos de lista. Entonces usemos selector de consultas para agarrar este ítem Hasta el momento, lista o mejor dicho, tú l es igual a documentos selectores de queary dot en Lecter. Sólo hay uno para que podamos usar éste. Vamos a seguir adelante y crear algo de HTML para esto. Por lo que vier html es igual a una cadena en blanco. Y luego pasemos por esto un cierto número de veces. Si bien algo es cierto. HTML es Águila dos html más Ally, cualquiera que sea el número que va a ser. Entonces, solo llamémoslo número, supongo. Podría ser cualquier cosa. Todavía no hemos llegado tan lejos, así que simplemente están conmigo slash Ally. Y así ahora solo estamos escribiendo un montón de html aquí estaban diciendo, Hey, empieza con nada. Pon ahí un aliado. Entra segunda iteración, dice que hay una L. Puse otra ahí dentro. Entra tercera generación, ahí está listo para aliados ahí dentro. Pon otro ahí dentro. Entonces sigamos adelante y preguntemos al usuario. Para un número de nuestro entumecimiento es igual a Vamos a lanzar esto como un prompt numérico. Dame un número y vamos a decir que el número de inicio iniciando numb va a ser cero. Y si bien ese empezar entumecido es menor que el número, sigamos adelante y en realidad empecemos este aquel para que podamos contar como humanos, no como computadoras. Por lo que el número de inicio va a ser uno. Y mientras este número sea menor o igual a cualquiera que sea el número que te dé la persona es éste seguirá corriendo. Recuerde, esto necesita ser implementado manualmente. Entonces, incrementemos eso manualmente. Y en este punto, no va a pasar nada. Acabamos de cargar esta variable llamada HTML con un montón de HTML. Ahora tenemos que seguir adelante en rul y en realidad agregar esto a nuestro modelo de objetos de documento. Entonces sigamos adelante. Escriba que ul HTML interno es igual a cualquiera que sea la variable HTML. Refrescar. Dame un número. De acuerdo, vamos a hacer 42 y otra vez, sólo tiene 42 una y otra vez. Sigamos adelante y escribamos iteración en oración va a ser cualquiera que sea ese número inicial . Probemos esto otra vez. Número 42 ahí está. Se oracion. 123456789 todo el camino hasta el 42. Y así, mientras que Loop realmente tiene un lugar en el mundo de JavaScript, es sólo un poco menos popular en estos días. Pero sigue siendo muy bueno saberlo. No tienes que hacer nada en este video. Pasemos a la siguiente donde tenemos vamos a trabajar con algunos de los modelos de objetos de documento y vamos a usar esta cosa llamada un bucle de cuatro h, que es realmente, realmente útil. 43. para cada Loops: Muy bien, echemos un vistazo a probablemente la versión más útil de un bucle en el universo JavaScript . A esto se le llama un cuatro cada bucle. Y como tendemos a camello cosas de caso en javascript, se ve así por cada minúscula F mayúscula E. Nos meteremos en la sintaxis de nosotros en tan solo un segundo. Por lo que para cada bucles son relativamente nuevos en JavaScript. Otros idiomas han tenido estos Fort Ages. JavaScript sólo ha conseguido esto recientemente en los últimos años, y ha sido una mejora importante para el ecosistema JavaScript. Entonces para edades, básicamente un atajo para el bucle de cuatro que luce algo a lo largo de estas líneas. Por lo que tenías variable es igual a cero. Haga algo por la longitud de una matriz e incremente automáticamente. Lo que esto va a hacer en su lugar es solo decir, Hey, tienes una lista de nombres, tienes una matriz de nombres. Ahí hay cinco de ellos. Voy a recorrer cada una para ti. Entonces vamos a dar a esto un ejemplo Aquí. Los nombres lejanos es igual a una matriz de Caleb. Nathan es siempre y Henry casi en realidad escribió la palabra fin y así anteriormente, cómo tendríamos que mirar a través. Estos es algo que realmente crecen, así que tendríamos que hacer por var. Yo es igual a cero. Yo soy menor que o igual de saber. Apenas anoche nombra punto longitud I plus. Y entonces podríamos consolar dudas nombres de registro yo y esto nos va a dar todos ellos. Sigamos adelante y actualicemos tu página y veremos que esto funciona. Pero cuando en realidad estás escribiendo esto, esto se ve un poco demasiado. Hay una forma más fácil de hacer esto. La forma más fácil de hacer esto es a través de un cuatro bucles cada uno. Vamos a seguir adelante y escribir nombres punto para cada uno y esto va a tomar una función, y esta función tiene dos parámetros en ella como el nombre y el índice. Y así el nombre va a ser cualquiera que sea el valor que esté aquí, por lo que en realidad podría no llamarse nombre. Puedes cambiar el nombre de estos si quieres, pero como estos son nombres, voy a llamar a esto nombres, y esto va a ser la iteración de bucle, así que consejo no registre lo que sea el índice sea el nombre, y esto ya sólo se ve mucho más fácil Vamos a seguir adelante y refrescar esta página. Tenemos el esfuerzo de Caleb Nathan y Henry así. Agradable y fácil la forma en que debe ser. No más tratar con nuestros propios generadores y nuestro entero it aireador una y otra vez. No tenemos que incremente eso. Ni siquiera tenemos que preocuparnos por ello. Sólo va a decir, Hey, aquí hay cuatro artículos. Vamos a recorrer esto cuatro veces Ahora todavía es importante conocer ambos porque esta es la forma más antigua de hacerlo. Esto lo vas a ver en todas partes para la compatibilidad hacia atrás avanzando en JavaScript. De aquí en adelante, vas a ver mucho por cada bucles. Ahora bien, ¿dónde realmente se vuelve útil esto? Bueno, ¿y si quisiéramos conseguir todo el texto interno de cada aliado tan incluso aliado aquí , Así que l i punto Js texto y no sé, ítem uno. Sólo haz esto una y otra vez. De acuerdo, así que acabo de hacer 17 elementos de lista, todos con la misma clase, y quiero seleccionar todos estos en bucle a través de ellos y conseguir el texto aquí. ¿ Cómo voy a hacer eso? Vamos a seguir adelante, comenta esto y vamos a usar un selector de consultas todo Así que vamos a hacer de nuestros aliados es igual a documentos dot cree selector todo y queremos seleccionar todos los elementos de texto Js o más bien, todos los ítems de la lista con una clase de Js textos. Ahora vamos a recorrer estos. Tenemos aliados punto para cada uno para cada toma una función. Esto va a ser lo que sea que esté aquí. Entonces esta va a ser nuestra nota en particular y luego nos va a dar nuestro índice. Ahora. ¿ Qué pasa si sólo un registro de punto cónsul? De acuerdo, no del todo. Diálogo cónsul nodo punto texto interno. Adelante y refresca tu página y lo suficientemente seguro, todo aparece en su JavaScript. Por lo que hemos logrado recorrer 17 elementos de lista y obtener el texto de cada uno en 1234 líneas de código y esto también nos permite habilitar el selector de consultas todo Realmente no hemos podido usarnos demasiado porque hasta este punto, mientras sabíamos de listas o de un aumento, pero realmente no sabíamos cómo recorrerlas ahora podemos. También puedes usar la forma de bucle de la vieja escuela si querías hacerlo de esa manera. Pero esto es mucho más limpio ahora, solo por diversión. Z's Sigamos adelante y en realidad cambiemos el inter texto de esta nota. Entonces vamos nodo dot inter texto. Y solo para dejar esto ultra claro, de donde obtuvimos nodo fue, Si hago este tipo en aliados, esto me da una lista de notas aquí abajo, y cada uno de estos es como una consulta, selector, selector de consultas regulares. Y así acabamos de renombrar el selector de consultas regulares para que básicamente tenga un nombre de variable, que se llama Nota. Y ahí dentro tenemos acceso a todas estas cosas diferentes, y acabamos de decir: Hey, Hey, agarra esa nota y luego consigue el texto interior. Sigamos adelante y cambiemos inter texto a algo diferente. Este inter Tex se va a multiplicar por 12. Sea lo que sea que vaya a ser. Y probemos esto. Añadamos algunos corchetes por ahí y el gato Nate una cuerda y veamos si esto va a funcionar de la forma en que pretendíamos trabajar. Entonces eso debería decir un número es el número, y seguro, ahí está. Cero multiplicado por 12 01 veces 12 es 12. 16 veces 12 es 1 92 Ahora es básicamente otra vez, con sólo cuatro líneas de código. Se puede ignorar el comentario ahí dentro que ya no es necesario. Con cuatro líneas de código, pudimos recorrer cada elemento de aquí y cambiarlo para que sea lo que queríamos que fuera. Ahora sigamos adelante y hagamos una cosa más. Digamos que realmente queremos recortar esta lista. Esto va a ser divertido. Digamos que queremos reducir esta lista a tan solo 10 artículos el primero 10 artículos. Entonces, ¿lo que vamos a decir aquí es si el índice es igual a 10? No. Eso va a ser exactamente 10. Si es mayor o igual a 10 sigamos adelante y eliminemos esta nota. Simplemente lo eliminemos del modelo de objetos de documento por completo. Y luego sigamos también. Y así esto sólo se va a ejecutar en la décima iteración o superior, y esto sólo se va a ejecutar. Asumiendo que continuar nunca se ejecuta, va a correr desde cero hasta el número 10. Pero no necesariamente estamos en un bucle aquí. Esta es una función que se está ejecutando desde cada elemento en particular en una lista o en una matriz . ¿ Cómo vamos a continuar? No podemos continuar porque continuar es una palabra clave que está reservada para bucles. Exclusivamente, estamos dentro de una función. Entonces lo que podemos hacer es devolver falso. Y me gustaría que también experimentaran con volver verdadero y simplemente regresar en general. Pero sigamos adelante y regresemos falso. Y cuando una refresca la página, podemos ver aquí. 0123456789 Tenemos 10 artículos ahí en total, y se deshizo de todos los demás. Adelante y en realidad comentemos esto para que podamos ver estos índices correctamente. El artículo uno al 10 está disponible. Nos deshicimos del 11 al 17 así que eso son cuatro. Cada bucles. En pocas palabras. Eso es realmente bonito, porque ahora podemos realmente muy, muy fácilmente agarrar múltiples elementos de nuestra página y recorrerlos y hacer algo con ella. Cualquiera que sea ese algo depende enteramente de ti. Pero ahora ya sabes trabajar con cuatro bucles, bucles salvajes y para cada loop realmente apreciaría si pudieras tomarte unos minutos e incluso simplemente recrear el ejemplo que creé en este video. Solo para obtener un poco de experiencia manos en manos con el punto para cada notación con una función de devolución de llamada aquí, estos iban a ser increíblemente útiles. adelante te permite básicamente ejecutar un trozo de código una y otra y otra vez sin tener que copiar y pegar una y otra vez una y otra vez. Así que adelante, dale una oportunidad a eso. Y cuando estés listo en tu sensación de confianza, pasemos al siguiente video. 44. Proyecto de juego de la experiencia: bien. Acabamos de aprender sobre objetos y bucles. Esas son dos piezas fundamentales de programación orientada a objetos como javascript. Ahora bien, lo que me gustaría que hicieras por otro proyecto escuchando proyectos más grandes, en realidad, no más grandes. Sólo va a tomar un poco más de esfuerzo para envolver tu mente. Es yo quiero que creéis un juego de adivinanzas. Ahora, como sea que hagas, esto depende totalmente de ti. Puedes hacer esos huesos muy desnudos, o puedes hacerlo realmente, realmente hermoso y usar el modelo de objetos de documento. Puedes hacerlo tan simple o complejo como quieras. La idea detrás de este juego de adivinanzas es que deberías estar preguntándole a alguien. A lo mejor es un prompt o cuadro de entrada o campo de texto. Di, oye, introduce un número. Y si ese número es el número correcto, entonces salgan del bucle. De lo contrario, quiero que sigas buceando a través de él. No, suena un poco complicado, pero básicamente lo que quiero que hagas esencialmente es uno. Crea un bucle que siempre pide un número y luego dos. Si el número es incorrecto, vuelve a preguntar y solo sé realmente molesto al respecto. Y luego si el número es correcto. Salga del bucle. Entonces te voy a dejar esto a ti. No te voy a dar más pistas. Quiero que intentes averiguar cómo hacer esto por tu cuenta. En realidad mintió. Te voy a dar una pista. Recuerde que los bucles siempre continuarán mientras una declaración en particular sea cierta. Entonces si la lógica de bucle siempre es verdadera, seguirá funcionando. Si no es cierto, no seguirá funcionando. Se romperá del bucle. Adelante y danos una oportunidad. Si te quedas realmente, realmente atascado, solo puedes ver el resto de este video y te mostraré la forma en que lo hago posit video aquí. Voy a desvanecerse este video y se desvaneció de nuevo y te veré. Ojalá en un par de minutos. Está bien. Yo quiero crear un bucle que va a pedir un número. Entonces lo primero que primero es que necesito pedir un número. Hasta el momento, num es igual a prompt. ¿ Cuál es el número? Y voy a hacer esto huesos muy desnudos así que estoy usando prompt. Pero tal vez quieras usar algo diferente y luego voy a lanzar lo que sea esa entrada como un número real. Y luego quiero decir que si en realidad es un número, podría hacer algo aquí dentro. Entonces también puedo decir si el número es igual al número mágico, haz algo aquí dentro. Entonces ahora necesitamos un número mágico en tu el número mágico va a ser 42. Y entonces lo que estamos diciendo es pedirle al usuario un número si coincide con 42 que también podríamos codificar aquí si quisiéramos Algo así. Entonces ganas. Entonces has ganado y sigamos adelante y hagamos este registro de consola. Tú ganas. Adelante y refresquemos. Esto me va a pedir un número. Si pongo 41 nada. Si pongo 42 troncos, dice que gano. Eso es fantástico, pero no es del todo hacer lo que yo quería hacer. Dije, si los números son incorrectos, pregunta de nuevo. De acuerdo, bueno, si el número es incorrecto, podrías hacer aquí y me vuelven a preguntar. Pero esto sólo se va a ejecutar una vez. Y en este punto, no necesito básicamente copiar y pegar todo esto aquí así como esto. Y si vuelve a estar mal, tengo que copiar y pegar todo aquí y podemos ver cómo esto se pone bastante asqueroso con bastante rapidez. Adelante, pega todo aquí otra vez, una y otra vez y una y otra vez. ¿ Cuántas veces vas a hacer eso? Ninguno. No quiero que lo hagas ninguna cantidad de veces. Aquí es donde entran los bucles. Entonces no vamos a hacer otra declaración aquí. Lo que vamos a hacer es correr un bucle. Entonces si bien es cierto, porque sabemos que los bucles siempre se ejecutan cuando son ciertos. Vamos a pedir el número cada vez. Pongamos eso en nuestro bucle. Entonces para cada generación te va a preguntar cuál es el número. Si ese número es un número válido y ese número es igual al número mágico, dirá que ganas. Entonces es hacer alerta, ganas. De lo contrario, esto no va a coincidir. Entonces no hagas nada si Esto ni siquiera es un número. Se va a pedir de nuevo un número adecuado, pero aquí tenemos un poco de problema. Esto sólo va a seguir preguntando una y otra vez. Y entonces lo que voy a hacer es que voy a salir de este bucle así como así. Entonces a pesar de que hay, si las declaraciones aquí dentro, los bucles aún saben que está en un bucle y básicamente podemos usar break, sigamos adelante y demos una oportunidad a esto. Refrescar. ¿ Cuál es el número 12? No. 32. No, Algún número loco. No. 42. ¡ Ah, ja! Yo gano Y ese es un juego de adivinanzas. Ahora hay una manera de que realmente podamos limpiar esto. Podemos usar declaraciones si adicionales, por lo que podemos decir si el número es de hecho un número, y esto tiene que ser cierto también. Entonces si es un número y el número es igual al número mágico, va a alertar que tenemos uno break out a loop y ya terminamos. Entonces, en aproximadamente ocho o nueve líneas de código, logramos hacer un juego de adivinanzas muy desnudas, y si alguna vez quisieras cambiar ese número, también podrías cambiar ese número. Vamos a cambiarnos 109. No sé si eso tenga algún significado significativo en mi vida. Yo vería 108. No, eso está mal. 110. No, eso está mal. 109 lo enviaron por correo. Y así cuando cuando ganas, tal vez cambies el estilo de fondo de toda tu página. Cambia el color de fondo a azul, agrega algo de texto en su diga que has ganado, que , en realidad, si quisiéramos hacer esto un poco más elegante, totalmente podríamos. Por lo que sí tenemos nuestro cuerpo es igual a documentos. selector de consultas holandés agarró el cuerpo. No queremos poner esto en el bucle porque sólo necesitamos agarrarlo realmente una vez. No necesita estar en un bucle, y luego podríamos hacer Body dot Style ese color de fondo es igual al azul. Hagamos body dot style dot El color es igual a blanco y body dot inter HD millas igual a H uno. Ganas y luego te escapas del bucle. Probemos esto otra vez. ¿ Cuál es el número 12? No. 32. No. 109 Yo gano. Y desde aquí, sé que realmente puedes hacer de este fans aquí y fans aquí ahora para entender lo que está pasando aquí. Acabo de decir, Ejecuta este bucle blanco para siempre. Hasta que digamos lo contrario, ¿salimos deliberadamente de ello? No estamos usando números particulares ni nada por el estilo. Sólo estamos usando un bucle que se va a ejecutar para siempre hasta que se diga lo contrario. Y así es como creamos un simple juego de adivinanzas. Si tiene alguna pregunta, comentario o preocupación sobre este proyecto en particular, adelante. Déjalos abajo. Y además no olvides que puedes actualizar tu proyecto de habilidad compartida con el último código que tengas . Toma una captura de pantalla o comparte un video o comparte tu abrigo en bolígrafo de código. Compartir tu proyecto es una gran manera de demostrar que estás avanzando al resto de la clase. 45. El Let y la conesa: En los últimos años, JavaScript ha avanzado mucho como un lenguaje de programación real. Empezó como sólo un lenguaje de scripting. De esta manera el script de nombre. Pero realmente ha evolucionado a su propio lenguaje entero en los últimos 5 a 10 años más o menos. Y con eso vienen algunos cambios bastante geniales. Pero algunas cosas que son un poco diferentes a otros lenguajes de programación también. Y de la que quiero hablar en este video es let y const let y constante por lo que hasta ahora hemos estado definiendo cada variable con var. Nombre Var es igual a Caleb. También podríamos usar let name es igual a Caleb y también podríamos usar nombre constante es igual a Caleb. Podríamos usar cualquiera de estos tres ahora hay diferencias aquí. Sabemos de var y izar. Si no recuerdas qué es el elevador, vuelve a ese video de alzado y solo toma un rápido reloj de re sobre eso solo para asegurarte que estás familiarizado con lo que es el elevador. Conocemos de alcance otra vez. Ahí hay un video sobre alcance. Vas a querer volver a ver esa otra vez. Asegúrate de estar algo familiarizado con la idea de alcance porque let y constante R Block alcance. Y así lo que esto significa es var nombre es igual a Caleb es accesible en una función como esta . Obtener nombre consejo dot nombre de registro. Podría incluso hacer esto. Podría hacer nombre es igual a nombre nuevo, y luego podría consola registrar el nuevo nombre aquí abajo. Entonces nombre de registro de consola otra vez y sigamos adelante, comenta esos fuera. Y entonces ejecutemos esta función aquí mismo. Y así dice Caleb y nuevo nombre. Y así lo bueno de lejos es que esto está ahora en el ámbito global y una función puede usarlo. Incluso podemos sobrescribir lo que fuera el valor tan pronto como llamamos a la función. Y entonces el nombre realmente cambia con let y constantemente. No entres eso. En realidad obtenemos más restricciones. Ahora. Lo interesante de los buenos lenguajes de programación, quieres restricciones. No parece así al principio, pero en realidad lo haces porque mientras menos libertad tengas en un lenguaje de programación generalmente significa más rápido se ejecutará el lenguaje. Significa que va a ocupar menos memoria en tu computadora significa que más personas van a escribir código que se ve exactamente igual significa mejores estándares. Básicamente, es menos lío si hay más reglas ahí dentro y lo que dejar y constante hacer es introducir más reglas. Entonces sigamos adelante y creemos el ejemplo aquí. Entonces tenemos una variable, y el curso es igual a JavaScript para principiantes. Y lo que podemos decir aquí es si el curso es igual a JavaScript para principiantes, cónsul dot lug este curso. Yo solo quiero asegurarme de que esto esté funcionando. Entonces sigamos adelante y actualicemos nuestra página. Ciertamente, dice este curso ahora. Si quisiera definir otra variable, haría lejos Algo es igual a otra cosa. Y entonces podría decir, Cónsul, no registremos algo. Entonces, mira esto. Esto todavía funcionará algo. Lo que vamos a hacer es que dice Hey, tienes una variable, pero voy a acostarla a estos corchetes rizados, y así cuando intentas consola log algo fuera de estos corchetes rizados, no va a funcionar. Demos una oportunidad a esto y veamos de qué se queja. Ahí hay un error en el aire de referencia aquí. Algo no está definido Me encanta cómo usaba algo como si en realidad fuera parte del aire . Sigamos adelante y cambiemos eso también. Una nueva var. Ahí vamos, un nuevo virus, no definido. Eso parece un poco más detallado, aunque podemos ver que en realidad se define una nueva barra. Pero lo que esto está diciendo es que esta variable sólo se puede usar entre estos corchetes. Es tirantes rizados. Y entonces qué? Dejemos que nos permite usar esta variable Onley dentro de aquí, por lo que tiene alcance a estos corchetes rizados. Pero también podemos anularlo también. Entonces vamos a sobrescribir variables que el aire alcance a su conjunto más cercano de corchetes rizados . Y así si muevo esto aquí arriba, vamos a ver que el registro de la consola escupe otra cosa. Suficientemente, dice algo más. Y si trato de consola, vuelva a registrar esto una segunda vez, vamos a conseguir tanto un log como un error, así que obtenemos un log y un error. Por lo que la principal diferencia entre Var y let is let es de alcance a otra vez estas llaves. Es importante saber que porque vas a ver código por ahí que dice, Deja que sea cual sea el nombre de la variable, es igual a algo, y entonces no podrás acceder a él fuera de sus llaves curly padre. Pero sigamos adelante y echemos un vistazo a Const. Por lo que se oye ese CONST. Es algo lo mismo. Const. Es una variable que es alcance a sus llaves más cercanas, llamada scoping de bloque. Pero Const es sinónimo de constante. Se trata de una variable que no puede cambiar, que es una forma divertida de decir básicamente que esto es un valor, y este valor nunca, nunca, nunca,nunca, jamás, jamás cambiará nunca, , jamás , . Y así ya no es realmente una variable más de lo que es un punto de datos constante que nunca cambiará y así, con constante, no se les permitió anularla. Entonces si nos deshacemos de esto, esto funcionará perfectamente. financiamiento dice algo. Si tratamos de sobrescribir esto porque ya se ha definido aquí. Si tratamos de redefinirlo, nos va a arrojar un error. Mira esas asignaciones inválidas a Const. Un nuevo virus. No se te permite reasignar nada a un concierto, así que en realidad hay beneficio a esto cuando se usa una variable regular, por ejemplo , curso, viene con un montón de métodos básicamente funciones en la cadena objeto. Viene con un montón de cosas diferentes aquí. Podemos ver una tonelada de ellas en tu también, y algunas de ellas nos permiten realmente cambiar el valor. Por supuesto, mientras que Const no nos permite hacer eso, Const no viene con toda la funcionalidad con la que viene una variable regular porque no puede cambiar. Entonces, ¿de qué sirve asignarle un método o función si no podemos cambiar ese valor en absoluto? Entonces, en realidad hay unas ganancias de rendimiento bastante grandes, y debido a que es de alcance de bloque, no tienes que preocuparte por que se filtre de esto. Si declara su función javascript, su programa JavaScript no tiene que preocuparse por almacenar mucho de eso en la memoria durante demasiado tiempo, y así es solo una forma realmente rápida de usar variables. Ahora, si todo eso suena un poco demasiado loco para ti, puedes pensarlo así. Var es básicamente una variable que puede ser alcanzada al entorno global. Let is block scope a los corchetes rizados más cercanos. De hecho, hagamos esto let y const nuestro bloque alcance a los corchetes rizados más cercanos. Let se puede cambiar. Constante no se puede cambiar. Y esa es la principal diferencia. Y los vas a ver por todo el lugar en JavaScript moderno. Por lo que hemos estado usando VAR hasta ahora. Pero avanzando, probablemente vamos a estar usando fuego. Deja y const que sepas lo que me gustaría que hicieras como, Ah, pequeña tarea rápida aquí es crear una variable let dentro de tal vez una declaración if o un bucle for o algo así, y luego tratar de acceder a ella fuera de tu if y luego a la derecha, una constante variable const. Y luego solo intenta cambiar el valor de esa variable const y te lanzará un error . Una vez que hayas experimentado estos errores y cómo funcionan realmente, empieza a tener mucho más sentido y vamos a estar usando estos avanzando. Obtendrás mucha más experiencia con estos a medida que avanzamos por el resto de este curso 46. Introducción a OOP: De acuerdo, ahora nos estamos metiendo en algunos de los pedacitos divertidos. Esta es la programación real. Esto tiene menos que ver con el modelo de objeto de documento. Más que tiene que ver con los fundamentos de programación reales con una cosa llamada lenguaje de programación orientado a objetos en 00 P. Ahora, mientras esto suena un poco complejo y al principio va a parecer un poco complejo, realmente, todo es una forma para que agrupes tus variables y funciones juntas para mantener tu código bien organizado y reducir la duplicación de la co. Entonces, ¿recuerdas cuando creamos un objeto de persona en el video del objeto? Creamos algo como este nombre secuela de Kaye Love y la edad es igual a 30 Yadi Yadi Yadi en algo así. Eso es lo que terminamos creando. Esto es básicamente programación orientada a objetos porque tenemos un objeto aquí, y luego tenemos la propiedad de punto de objeto en ese retornos. Caleb persona edad punto es igual a 30. En realidad hay una forma más agradable de escribir esto en JavaScript más moderno, y eso es a través de esta idea de una clase. Y lo bonito de una clase es que básicamente puedes tomar tu objeto personal entero y puedes copiarlo y pegarlo una y otra vez. Puedes darle valores por defecto para que cree básicamente este objeto para ti con solo una sola línea de código. Solo tienes que escribir esa funcionalidad primero. Entonces echemos un vistazo a esto. Tenemos clase, persona, persona, y esto es esencialmente como se ve tu sintaxis. Es sólo clase de palabra clave. Cualquiera que sea tu nombre de clase, generalmente empieza con un P. mayúscula Pero en realidad, eso depende de ti. Y entonces aquí dentro tenemos funciones y variables llamadas métodos y propiedades. Entonces tenemos una función aquí llamada Hacer sonido, y todo esto va a hacer es consejo. No me regibes. Ah, ahora dos en Stan, comió o para iniciar una clase como esta porque este código puede haber sido ejecutado en segundo plano pero en realidad no se almacena en ningún lugar. Ahora bien, esto es una especie de lo que parecería si escribimos aquí una función regular. Adelante y deshacernos de esto. No lo necesitamos porque javascript es lo suficientemente inteligente como para saberlo. Oye, esto no es una variable. Esta es una función. Y ahora a realmente en Stan. Ella se comió esto para iniciar esta clase. Nosotros realmente para almacenar esto en algún tipo de variable para que pudiéramos hacer Const. Caleb es igual a persona nueva. Entonces esta es nuestra sintaxis aquí. Tenemos clase de palabras clave. Cualquiera que sea el nombre de clase que coincida aquí abriendo y cerrando llaves. Y entonces sólo tenemos una función simple aquí. Es una función dentro de un objeto que las clases son objetos. Y así lo llamamos método. Y entonces dijimos: Oye, Oye, usa const. Kayla porque esto no va a cambiar las cosas dentro de ella podrían cambiar. Pero esto en sí no va a cambiar y luego hacer Caleb dot hacer sonido con paréntesis ahí dentro porque es una función, es un método. Adelante página de actualización, y podemos ver que me dice. Ah, ahora ¿por qué es tan impresionante esto? Bueno, porque ahora puedo hacer otra persona. Puedo llamarlo Nathan, y ambos podemos hacer el mismo sonido. Y todo lo que hice fue correcto. Una línea extra de código y se llevó todo aquí y se lo aplicó a esta sola línea extra de código comenzó en una variable en un constante Nathan viejo. Y ahora ambos haremos el sonido de Miao, por lo que esto se presentará dos veces. Miami. Se ve que a su eso significa que se presentó dos veces. Adelante y deshacer eso. Ahora sigamos adelante y añadamos algunos valores por defecto. Entonces digamos que una persona necesita una persona necesita un nombre y una edad y su comida favorita. Entonces, a diferencia de una función donde sería como nombre, edad y comida, como que hacemos esto. Pero tenemos que ir un poco del largo camino para esto. Por lo que creamos una nueva función, un nuevo método aquí llamado Construct. Er, este es un nombre de función mágica. En realidad se puede ver que es rosa. Esa es una palabra reservada que es una palabra clave. Y entonces podemos pasar estos valores aquí para que podamos decir: ¿Cuál es el nombre de la persona? ¿ Cuál es la edad de la persona? ¿ Cuál es la comida favorita de la persona? Esta es una función simplemente no dice función frente a ella. Pero esta es una función. Y entonces podríamos decir, Cónsul, ese nombre de registro, edad de la comida y sigamos adelante y arrojemos aquí los valores por defecto. Entonces mi nombre va a ser Caleb. Mi edad va a ser de 30 y mi comida favorita va a ser zahk. Refrescar dice Caleb. Los treinta son así ahora. En realidad hemos puesto valores en nuestra nueva clase. Podríamos seguir adelante y crear uno nuevo. Deshacernos de hacer sonido. No necesitamos a esa nueva persona. Este va a ser Nathan y va a tener 28 años su comida favorita va a ser una ensalada . Y vamos a ver a Caleb, 30 Pizza Nathan, 28 ensalada. Y podríamos hacer esto una y otra vez. Y en cualquier momento que agreguemos más código aquí, esto va a afectar a ambos por igual, lo cual es realmente bonito. Y ahora estamos escribiendo una pieza de código que puede afectar múltiples secciones de un sitio web o múltiples piezas de funcionalidad. Ahora, ¿y si quisiera que esto dijera que Caleb dice mm a, y luego lo que sea que esté bien la comida, desafortunadamente , porque esto es objeto, no podemos simplemente decir comida, y no podemos simplemente decir nombre. Esto simplemente no va a funcionar. Entonces vamos a seguir adelante hacer Caleb dot hacer sonido hacer sonido yammer. En realidad es arreglar esa sintaxis ahí. Guarda eso y refresca y no se define la comida. A pesar de que la comida está aquí, la dimos aquí. Incluso lo pasamos aquí y aquí. Pero por cualquier razón están coda diciendo que la comida no está definida. Y ahí es de nuevo donde entra en juego esta idea de la palabra clave esta. Entonces en nuestro método mágico constructo er aquí, podríamos hacer esto. Nombre de punto es igual a nombre este punto edad es igual a Podríamos echarlo si quisiéramos Age este punto La comida es igual a la comida y podríamos deshacernos de eso. Y lo que esto está diciendo es, Hey, hay una propiedad en esta clase de persona llamada nombre. Hay otro llamado edad, y hay otro llamado comida. Y así cuando pasemos en nuestros parámetros a esta persona clase Caleb, 30 pizza, esto va a decir Vale, bueno, sí , claro, entiendo que todos estos están siendo pasados a la primera función, pero también hacer que estos estén disponibles a través de toda la clase. Entonces ahora podría cambiar esto a este nombre de punto dice comida a le dice a este punto comida, más bien. Y pongamos esto en múltiples líneas porque podemos. Y así ahora esto dirá, Caleb dice MM a pizza. Y otra vez todo lo que estoy haciendo aquí diciendo, Const. Caleb es igual a una clase de persona totalmente nueva. El nombre es Caleb. El alimento favorito de 30 años es la pizza, y de nuevo, eso solo coincide aquí como una función regular. Simplemente pasa que es éste tiene que llamarse constructo. Er, sigamos adelante y refresquemos esto y dice, Caleb dice a la pizza Y otra vez, la clave aquí realmente es la palabra clave esta. Esto es lo que permite transportar esta variable a cualquier otra función dentro de la clase de persona. Pero si ayuda, me parece que esto realmente me ayudó cuando originalmente estaba aprendiendo así en el día. Parece que este nombre es igual a cualquiera que sea el nombre que va a ser. Esta edad puntual es igual a cualquiera que sea la edad va a ser, y este alimento puntual es igual a lo que sea que vaya a ser la comida. Y todo esto está diciendo es decir, Hey, Hey, hay una variable fuera de este ámbito de función llamada este nombre de punto y simplemente asignarlo a lo que sea que sea esto. Hay otro que se llama a esta edad de punto. Asignarlo a lo que queríamos ser juez y este punto de comida. Y así básicamente piénsalo así. Simplemente estamos tomando una variable de un alcance superior y cambiando el valor de la misma en Lee. No tenemos que escribir eso. Y entonces si quisiéramos, también podríamos bajar aquí. Y podríamos decir, Nathan dot hacer sonido, hacer que los números suenan página de actualización. Esto dirá, dice Caleb, mudarse a la pizza. El siguiente también va a decir, Nathan dice pronto a Ensalada, así como ahora, esto puede no parecer súper útil en este momento, pero a medida que crece tu lógica, tiene sentido agrupar las cosas que están juntos. Entonces en lugar de tener una matriz, un objeto y un montón de funciones para una sola persona en particular, y luego copiar y pegar una y otra vez para una segunda y la tercera y cuarta persona, podríamos envuelve todo esto juntos porque todo está relacionado en una clase y luego solo di hola, usa una persona nueva. Podemos incluso extender esto por el camino si quisiéramos, para hacer cosas adicionales, por lo que podríamos decir que esta es la base. Pero entonces si queríamos decir si la persona es parte de los militares, tienen funciones extra o características extra. No vamos a meternos en eso en este video. Esto básicamente termina toda la lección de clase. Lo que me gustaría que hicieras, sin embargo, es darle una oportunidad a esto. Crear una clase, crear una función de constructo mágico er. Podemos tomar cualquier parámetro que desee. Definitivamente vas a querer usar la palabra clave this y luego crear una función. Otra función no importa cómo se llame e intente acceder. Por ejemplo, este punto de comida. A pesar de que no pasamos comida aquí, pudimos conseguirlo diciendo este alimento puntual porque esto se refiere a toda la clase misma. Por último, en cambio, se comió a tu clase diciendo, Const, tu nombre es igual a persona nueva o lo que sea que va a ser tu clase y luego ejecutar el método ahí dentro, que función mía se llamaba Hacer sonido. Puedes ejecutar el tuyo con tu nombre puntar tu nombre de función y luego paréntesis. Esta es también una de esas ideas que es un gran obstáculo para que los programadores superen. Pero una vez que aprendes sobre la programación orientada a objetos y empieza a tener mucho más sentido para ti, la vida se vuelve mucho más fácil como desarrollador y saltas de ese principiante o ese estatus junior a un estatus intermedio. Porque se empieza a entender cómo los datos se relacionan consigo mismos para otras dos funciones o cómo agrupar las cosas, y todo comienza a juntarse. Por lo que definitivamente danos una oportunidad. Y, oye, si tienes preguntas, no olvides que hay una sección común abajo. Estar bajo. Estoy feliz de ayudar en cualquier momento. Por favor, haga preguntas si necesita alguna ayuda. 47. Extender las clases: todo bien. En esa última lección, hablamos de una introducción a la programación orientada a objetos, y hablamos de cosas como propiedades, métodos, métodos, constructo mágico, er's y la palabra clave esta en esta lección, vamos a repasar algo más de eso. Honestamente, si eres completamente nuevo en JavaScript, esto va a ser muy teórico para ti en este momento. Será mucho más aplicable para ti como tu carrera como desarrollador de JavaScript por el camino. Pero a partir de hoy, si eres nuevo en JavaScript, honestamente, honestamente, solo siéntete libre de ver este video. En realidad no tienes que hacer nada con ello. Simplemente es bueno saber sobre el concepto detrás de él, que cuando te introduzcan esto por el camino, no vaya a ser súper aterrador ni nada por el estilo. Estarás adecuadamente equipado para lidiar con las clases, y en esta lección, vamos a crear una clase, y luego la vamos a extender. Y un ejemplo realmente bueno de esto es sólo algo súper básico. Digamos que tenemos una clase de animal, ¿ y qué tiene en común todo animal? Por lo que tenemos una clase de constructo er o construir tu método aquí. Y aquí es donde ponemos todos nuestros valores por defecto o parámetros por defecto. Y así digamos que cada animal tiene un nombre o más bien no un nombre, sino una especie. También tiene un peso y sí, y luego solo una altura. Entonces sólo vamos a hacer estos tres aquí, y luego sólo vamos a decir que esto sí Especies es es igual a especies, lo cual parece realmente raro que estemos escribiendo esto así, pero nos permite usar estas variables en todo el clase animal. Espera. También podríamos lanzar esto como un número si quisiéramos. Queríamos hacerlo. Podríamos lanzar esto como una cuerda. Entonces siempre es una cuerda. Y entonces podríamos decir que esta altura de punto es igual a elenco. Eso es una altura numérica. Y entonces podríamos crear un pequeño método agradable. Y aquí acaba de llamar, no sé, obtener información. Entonces obtén información sobre este animal en particular. No tiene parámetros porque por arte de magia sólo va a conseguir la especie de este punto. Eso no es Esperar. Eso no es altura, porque esto es como decir especies de puntos animales. Cualquiera que sea este animal punto animal Espere, sea lo que sea este animal, altura de punto animal, sea lo que sea este animal. Y así esta función ya entiende el concepto de esto. Es ahora podemos decir, Cónsul, no registremos este punto Formas de especies Esta cosa Espera, no sabemos si son kilogramos o algo así. Entonces sólo vamos a dejar este sin ningún tipo de métrica o no sabemos si esto son libras o kilogramos, así que sólo vamos a dejar eso como es un número regular. ¿ Y esta altura del conducto es alta? Entonces, por ejemplo, un Tiger Ways 400 mide tres pies de altura. Ahora bien, no sabemos si son libras o pies o algo así. Entonces solo nos vamos a quedar con los números regulares por ahora para mantener esto bastante simple. Y voy a hacer esto un poco más pequeño para que podamos ver más de esto en la pantalla. Adelante y ponernos de pie a un animal totalmente nuevo. Entonces digamos const. Tigre es igual a un animal. Un animal nuevo. Vamos a decir, Tigre, es peso es 200 su altura es de 36 pulgadas. Algo así. Y entonces podríamos hacer tigre dot obtener información y esto solo registrará consola. Es peso y altura de especie en una frase para nosotros. Adelante y refrescantes. Este es Tigre pesa 200 es 36 alto. Entonces no es el mejor inglés que hay, pero se obtiene el punto. Entonces esta es una clase regular, y esto es básicamente exactamente lo que hicimos en el último video. Ahora sigamos adelante y extendamos esto. Lo que esto significa es que podemos escribir otra clase que hereda ya todos estos datos, y podemos agregarle más si quisiéramos. Entonces sigamos adelante. Y lo que voy a hacer aquí es pero que todo en una línea sólo para que podamos una especie de resumir esto en una vista un poco más fácil. Y vamos a crear una nueva clase para una mascota de casa como gato normal. Entonces hacemos palabra clave cat class extiende animal, y así este gato ya va a conseguir constructores como especie, peso y altura, y también va a conseguir el método de obtener info Now. Lo que podríamos hacer aquí es que sí construimos er instructor kamau. Pasemos en la especie, el peso y la altura y podríamos correr todo eso si quisiéramos, o podríamos decir porque se está extendiendo desde animal, solo podríamos ejecutar exactamente esta misma función. Se puede ver que en realidad están resaltados cuando selecciono uno. Selecciona ambos porque tienen algo similar. Tener funcionalidad similar aquí para que podamos hacer esta cosa llamada Super, que es realmente genial porque esto se extiende porque gato extiende animal. Podemos ejecutar esta función llamada Super y dice, Oh, Oh, sube a animal y corre lo que sea que sea esta función actualmente. Adelante y arrojemos el peso y la altura de las especies ahí dentro. Y también podemos agregar algo nuevo para que pudiéramos hacer este color de punto y digamos que tengo un gato naranja, que en realidad es falso. Tengo un gran y un gato negro. Hagamos eso. Por lo que ningún animal no tiene este color. Eso es eso no está aquí arriba para nada. Pero el gato sí. Cat tiene todas estas cosas. Estamos diciendo Hey, corre Super Así que básicamente ejecuta todo esto con estos tres parámetros ahí dentro, que es exactamente lo que está haciendo, va a establecer el peso y la altura de la especie. Y decían: Oye, Oye, también agrega el para color. Entonces es genial. Y así podemos seguir quedando aquí estas cosas. Si lo quisiéramos en un comentario esto fuera, tiene que cambiar eso ahí. Eso voy a comentar fuera y voy a crear una nueva clase de gato. Entonces sigamos adelante, Const. Su esfuerzo es igual a gato nuevo, no animal. Definimos una nueva clase aquí. Simplemente se extiende desde las especies animales. Es que es un gato especie de inútil porque sabemos que va a ser un gato. ¿ Cuál es su peso? Pesa 13 libras. ¿ Y qué es esta altura? No lo sé. Creo que mide como 13 o 14 pulgadas de alto, algo que es un gato bastante grande. Y luego podríamos hacer la consola dot log Zephyr y echar un vistazo a lo que realmente está pasando detrás de las escenas aquí y ver si el color aparece, así que refresca. Conseguimos un objeto aquí. El color es genial. Mira, ahí está. Altura de 13 especies es un gato y los salarios 13. Ahora lo que si quisiéramos hacer es que alguna vez no obtengas información. En realidad no está aquí. Está en la clase de padres. Es de la que nos estamos extendiendo. Y así esto dirá Cat pesa 13 y vuelve a ser 13 alto. Terrible inglés. Pero ese no es realmente el punto aquí. Gato pesa 13 y 13 de alto, tal y como se esperaba. Y es como decir, Si copio todo esto en año y me deshago de él aquí y luego digo que este color de punto es igual a Gray, es como decir que solo esta vez pudimos escribir menos código. Lo bonito de esto es que si alguna vez ampliamos esto de nuevo, podríamos decir Clase perro extiende Animal y perro también obtendrá peso y altura de las especies, por lo que no tenemos que redefinir eso. Tendrá un método aquí llamado Get Info para que no tengamos que redefinir eso. Y es solo una manera fácil de copiar esto una y otra vez. Y así podríamos decir Const. Thiago es igual a nuevo perro Vito. ¿ A qué altura es? No lo sé. Es enorme. Tiene como 3.5 pies de altura. Y eso fue en realidad es esperar así que su peso sería de unas 140 libras él tiene 3.5 pies de altura. Es un perro grande. Pero ahora podríamos correr Zephyr. Podríamos hacer Dargo dot obtener información sobre esto dirá Vito pesa 140 es 3.5. Y así otra vez, esto es bastante teórico. En este punto, no vamos a estar usando esto demasiado por el camino. Pero vas a ver esto en la naturaleza y su JavaScript crece y crece y crece. Vas a ver esto mucho más. En realidad vas a ver esto en muchos otros lenguajes de programación, como Python y PHP también. Hagamos un ejemplo más. Tú. Deshacernos del perro. No necesitamos eso ahí dentro. Y vamos a crear un nuevo método para nuestro gato. Entonces vamos a crear un método donde el gato sea reglas para dormir. Llámalo sueño cónsul dot log este nombre de punto Bueno, eso está bien. Ahí no hay nombre. Esta especie de punto está durmiendo durante 16 horas al día, por lo que Cat está durmiendo durante 16 horas al día. Podríamos seguir adelante y ahora usar esto. Por lo que en lugar de zephyr dot get info, podríamos utilizar su sueño de punto de esfuerzo y esto sólo está disponible en la clase de gato. Entonces si escribimos animal aquí, esto no funcionaría. Pero si escribimos Cat, esto funcionará. Entonces sigamos adelante. Refresca nuestra página. Gato sale por 16 horas al día. Perfecto. Ahora eso es lo que llamarías una clase perfecta. Y por último, un ejemplo más aquí que podríamos hacer en la clase animal aquí. Hagamos una función de hablar, Hablar método consejo dot log. Yo digo una cosa. No sabemos qué es este animal. No sabemos qué va a decir. Y un gato podemos decir que un gato siempre me dice. Ah, así podemos sobrescribir esto diciendo Hablar consejo, no registres, no hables Queremos decir que no. Y luego en lugar de dormir, podríamos hacer dormir y luego hablar y luego dormir y digamos es tener una siesta Así que Cat está tomando una siesta. Entonces se va a levantar. Va a hablar, y luego va a tener otra siesta otra vez. Refresh Cat está teniendo una siesta. Miao cat lo está teniendo arriba y así hemos superado con éxito escribiéndonos. Y si esto no existió, esto va a heredar el método talk de su clase padre de la clase que está extendiendo la clase animal. Entonces va a decir que digo una cosa que no es útil. Dice que Cat está echando una siesta. Yo digo una cosa. Gato está echando una siesta. Entonces básicamente todo lo que hicimos fue sobrescribir el método predeterminado que venía con Animal. Por último, aprendamos a encadenar funciones juntas, encadenar métodos juntos porque en otras partes de JavaScript, vas a ver cosas como esta donde es como su esfuerzo, no dormir. No hables de dormir. Es como, ¿Cómo cambias estas juntas? Esto en realidad es bastante fácil. Entonces cuando se trata de un objeto de algún tipo, sabemos que las clases son objetos. Todo lo que tienes que hacer es decir que regreses esto. Esto va a devolver todo el objeto gato. Y si lo haces aquí abajo para devolver esto cada vez que ejecutas su esfuerzo, no duermes, se va a consola log species está teniendo una siesta, entonces se va a devolver esto que es básicamente todo este código aquí. Va a devolver todo el asunto, lo que significa que ahora podemos cambiarlo juntos. Entonces puedes usar hablar y porque se está devolviendo básicamente todo este código otra vez, luego puedes ejecutar el sueño. Entonces sigamos adelante. Guarda esta actualización y Walla así como así. Ahora tenemos una clase extendida y estamos cambiando los métodos juntos. Entonces nos estamos metiendo en JavaScript realmente, realmente bonito aquí y francamente, yo, junto con la mayoría de Javascript Dev preferido por solo tener esta notación de puntos aquí. Entonces en lugar de su esfuerzo, no dormir y luego nunca ha hablado. Y entonces Zephyr no dormir y separar es una y otra vez. Podemos simplemente poner todo esto en una sola línea, para que eso sea extender de nuevo una clase. No necesitas saber demasiado sobre esto. En realidad no vamos a practicar extender clases en esta clase sólo porque no es algo que te va a ser increíblemente útil en este momento. ¿ Qué? Es una de estas habilidades que solo debes hablar en tu bolsillo trasero por ahora porque eventualmente vas a ver esto en la naturaleza. Y va a ser importante para ti entender qué es esto, o al menos tener un vago recuerdo de eso. Una vez cuando Caleb te habló durante 15 minutos sobre lo que significa la palabra clave extender con constructo er y encadenar métodos juntos y cosas así. Entonces solo métete este video en tu bolsillo trasero, y si te sientes un poco picante, puedes darle una oportunidad a esto. Puedes intentar escribir esto si quieres. Personalmente creo que sería una buena idea. Pero si no quieres saber la presión, podemos dirigirnos a esa siguiente lección cada vez que te sientas bien y listo. 48. Proyecto modal de JavaScript: De acuerdo, Ahora es el momento en que empezamos a poner muchas de estas habilidades juntas. Este proyecto va a ser un poco más duro. Vamos a crear un móvil desde cero. Ahora bien, si no sabes lo que es un móvil, es ya sabes, cada vez que haces clic en un botón y luego como el fondo de la página se va más negro u oscuro, y luego tienes, como, una pequeña ventana interna dentro de tu página. Eso es lo que es un móvil. Vamos a crear uno de esos desde cero. Ahora bien, si no sabes mucho CSS, está bien. Eres móvil no tiene que ser guapa por ningún medio. Simplemente necesita ser funcional. Esa es la clave para JavaScript es la funcionalidad. Entonces lo que me gustaría que hicieras es crear un botón que va a abrir un motel, crear un botón que va a cerrar el móvil, y luego quiero que escribas todo esto dentro de un objeto o una clase. Depende de ti. Si los objetos tienen más sentido para usted en este punto, recóngalo en un objeto. Si una clase tiene más sentido para ti, diríjala dentro de una clase. Asegúrate de tener tus funciones o tus métodos dentro de tu objeto en tu clase y haz lo que necesites hacer para que esto funcione. Ahora también vas a tener que escribir un poco de HTML porque tu página requiere la estructura móvil real que dicen requiere muy vagamente que en realidad no requiere. También podrías conseguir javascript para crear eso dinámicamente si quisieras. Para esto, vas a necesitar escribir algunos oyentes de eventos, y también vas a necesitar escribirlos dentro de un objeto o una clase. Entonces, si mezclas esos dos juntos, deberías poder crear un móvil con bastante facilidad. Una vez más, esto no se trata necesariamente de belleza. Se trata de funcionalidad. Siempre se puede hacer algo más bonito del dedo del pie. Mira el uso de CSS. Eso está totalmente bien. Eso es más algo de CSS que queremos hacer solo JavaScript tan enfocado en gran medida en la funcionalidad. Dale una oportunidad a esto. Intenta hacerlo por tu cuenta sin buscar en Google nada sin tener que hacer referencia a otros videos . Haz sudar tu cerebro. Este muchos proyectan este móvil de programación orientado a objetos se supone que es un poco más difícil. Llega lo más lejos que puedas con esto. Trata de averiguar la solución por tu cuenta. Pero ¿sabes qué? Si de verdad te atascas y simplemente no puedes hacer ningún progreso más, definitivamente puedes referir a los otros videos. Súbete a la vieja máquina de Google o simplemente mira el resto de este video porque estoy a punto mostrarte la forma en que lo haría. Pero danos una oportunidad. Voy a desvanecerse esto a negro y luego puedes golpear, pausar, y luego o cuando termines o si te atascas, solo puedes reanudar este video y puedes ver la forma en que lo haría yo. Entonces sigamos adelante y danos una oportunidad, acuerdo? Lo primero es lo primero. Necesitamos el html móvil real. Entonces voy a crear un div aquí y voy a hacer algo asqueroso en estilo de línea. Por lo tanto estilo posición. Absoluto, en realidad, hagamos posición Fijo superior 50% izquierda, 50% borde, un píxel, rojo sólido. Eso va a ser súper feo. También se va a leer el color de fondo. El con va a ser del 50% y vamos a darle un relleno de 20 pixeles Veamos cómo se ve esto. Sí. De acuerdo, entonces es, ya sabes, una caja grande y fea roja. Transformemos traducir. Menos 50% menos 50%. Y ahí vamos. Está en el centro de nuestra página. Vamos a seguir adelante y sólo pasemos eso. Por lo que está en el centro de nuestra página ahora. Y por último, queremos mostrar ninguno. Asegúrate de que no aparezca en absoluto. Ahí vamos. Es como si nunca existiera. Siguiente. Tenemos que poder agarrar esto. Entonces sigamos adelante y nos demos un motile de clase Js. Y mientras estamos haciendo esto, ¿sabes qué? También podríamos arrojar esto en CSS adecuado también. Entonces vamos a agarrar eso. Y vamos a darle a esto una clase de solo un motile regular tirar nuestra clase aparece estilo dot motile y voy a retoques. Do do do do do do selecto solo semi puntos Nueva linea bam asi como asi. Y solo para asegurarnos de que esto esté funcionando, vamos a deshacernos de la pantalla ninguna, y aún no está apareciendo. Y apuesto a que eso es en realidad porque tengo bootstrap instalado. Entonces voy a desinstalar bootstrap, sal de aquí. Bootstrap, No te necesitamos. Sabemos escribir nuestro propio CSS y JavaScript. Ahora adelante y consigue el rojo de la pantalla. Ninguno. Bam! Ahí está. Está bien, genial. Sí, fue cosa de bootstrap, y solo estaba usando la clase de móvil. Entonces nos deshicimos de ese fin. Ahora tenemos propiedad completa sobre él. ¿ De acuerdo? Tenemos que crear un botón que va a abrir el móvil, y necesitamos crear sobre va a cerrar el móvil. Así que vamos a crear un botón aquí lo clase de botón regular Js open motile open motile Eso siempre va a decir gran botón feo y actualmente no hace nada. Ahora sigamos adelante y creemos un oyente de eventos para móvil abierto. Tan abrir botón tan constante abrir BT N es igual a documentos selector de consulta de puntos que jazz abrió motile Solo hay uno para que podamos usar totalmente selector Cree en lugar de Crease Lecter todo y podríamos hacer open bt n dot add event listener es un click función va a ser el evento y todo lo que queremos dio es agarrar el móvil y mostrarlo Así que ahora necesitamos agarrar el modelo CONST. Modelo de modelo móvil es igual a documentos punto selector de consulta punto modelo Js. Simplemente vamos a seleccionar esto y vamos a decir Motile que el estilo no se muestra es igual a Vamos a cambiarlo a inicial, que va a ser lo que fuera antes de que dijéramos que fuera Display none. Refresca tu página. ¡ Ja! Funciona. Es decir, sólo abre, pero eso es bastante bueno. De acuerdo, vamos en realidad a darle estilo a esto. Apenas un poco más agradable causa que el rojo es simplemente fenomenalmente terrible con de 80% que está fuera de máximo con 800 píxeles para navegadores súper enormes, Border va a ser de un píxel. El fondo negro sólido va a ser blanco. Eso es en una sombra de caja. Cinco picos esos cinco píxeles negros no muestran ninguno. Quita eso. Sí, bastante bueno otra vez. No estamos buscando belleza. Nos estamos asegurando de que esto funcione. Adelante en nuestro móvil. Está en un título. Este es un párrafo modelo, Laura, Um, 50. Y si refrescamos tu página y abrimos, este es un móvil y solo capta encima del resto de la página. Ahora necesitamos un elemento cercano aquí, Así que sigamos adelante y agreguemos un botón aquí. Clase de botón es igual a Js close motile. También podríamos conseguirlo por su idea si quisiéramos. Realmente no importa modelo cercano. Y ahora tenemos que sumar el evento de cierre. Entonces hagámoslo. Y sé que dije, Hagamos esto y objetos o dentro de una clase y vamos a hacerlo Pero porque estamos aprendiendo JavaScript va a ser más fácil si corrijimos la forma que conocemos y luego algo así lo hacemos más avanzado desde ahí. Por lo que tenemos un botón abierto ahora tenemos un botón de cierre y es muy, muy similar al oyente de eventos de botón abierto. Por lo que motile dot style display va a ser display Ninguno. Adelante. Tenemos un error. Lo que dice alguna vez Cerrar botón es no. Es porque no es jazz, sino motil Es jazz close motile. Si estás gritando en tu pantalla diciendo Caleb, no te equivocaste Buena captura. De acuerdo, no más error. Abrir móvil cerrar Motile open motile close motile Ok, nos estamos acercando bastante ahora. Lo último que necesitábamos hacer era escribir todo esto dentro de un objeto o una clase. Ahora de nuevo Porque somos nuevos en JavaScript. No vamos a tirar de inmediato todo esto a un objeto o a una clase. Vamos a escribirlo de la manera que sepamos escribirlo, y luego podemos hacerlo más complicado. Entonces sigamos adelante y creemos una clase así que clase, llamémoslo móvil. Podríamos tener un constructo er aquí y podría hacer algunas cosas y luego podríamos haber hecho eso un poco más grande. Y entonces tenemos un método abierto y luego podríamos tener un método cercano. Y entonces vamos a poco común eso bien, y luego en su constructo, o ¿qué es una pieza de datos a la que necesitamos acceder a través del constructo de lo abierto y los métodos de ropa? Si bien necesitamos el móvil cada vez que necesitamos ese móvil no usamos constante aquí porque si queremos acceder al móvil interior del open en el método close hacemos este punto Motile es igual al único motel de la página. Entonces qué pasa cuando decimos abierto mientras necesitamos abrir este motor. Entonces vamos a agarrar esto y vamos a decir este motil de punto Ese es este tipo aquí dot style display capaz de iniciar y luego vamos a cerrarlo básicamente haciendo lo mismo. Este punto punto motil estilo punto. Esa pantalla es igual a ninguna. De acuerdo, vamos a darle a eso un rápido guardar y refrescar. ¿ Tenemos algún error o advertencias en tu nuevo libro? ¿ Eso funciona nuevo porque el modelo ya no está definido. Y eso es porque aquí tenemos oyentes de eventos que están buscando esto. Entonces en cambio, lo que podemos dio es que en realidad podemos hacer una mezcla aquí, Así que tenemos un móvil regular y sigamos adelante y solo pasemos el ritmo de las cosas aquí abajo. Pero ahora realmente necesitamos definir este móvil. Entonces lo que podríamos decir es constante motile es igual a nuevo motile y en lugar de poner esto , podríamos hacer punto motile abierto y aquí dentro podríamos dio motile ropa oscura y de hecho podríamos realmente mantener todo esto unido que hace no necesita estar por encima del modelo en absoluto. Y así lo que hicimos fue que acabamos de tomar nuestra piel el móvil y abrir el móvil ese tipo de funcionalidad, además del selector real en sí. Y lo ponemos en su propia clase. Y ahora sólo podríamos hacer, como punto mortal abrir ropa de punto móvil y refrescar tu página. Este es un móvil cierra el modelo. Ah, así que eso es bastante bonito. Y así, tenemos una clase trabajadora con constructo er este top model lo que nos permite utilizar este motil de punto a través de múltiples métodos. Ya sea que acabemos de cambiar el estilo, es un Lector de pliegue ahí dentro. Es algunos otros selectores de carrera. Creamos un nuevo móvil y luego agregamos algunos oyentes de eventos. No, ¿y si quisiéramos extendernos? Podríamos. Podríamos extendernos fácilmente esto. ¿ Y si quisiéramos cambiar el título y el texto? Bueno, sigamos adelante y cambiemos Esta clase digiere motile title class Js texto motile y podríamos saber, Phyllis con valores predeterminados regulares y también podríamos cambiar estos también para que pudiéramos hacer algo como esto. Construct se va a llevar un título. También va a tomar algo de texto y de inmediato podríamos hacer este selector de consulta de puntos motiles . Podríamos encontrar Js motile title cambiar ese texto interno dos título, no texto y luego podríamos hacer lo mismo otra vez con el texto es igual al texto. Y entonces lo que esto está diciendo es que ya tenemos el motivo. Esta es nuestra nota de elementos y luego vamos a encontrar una nueva aquí, justo el 1er 1 llamado Título y en el 2do 1 llamado texto. Ahí vamos termina en el texto Inter al título y al texto. Hagamos esto opcional sin embargo. Entonces digamos si titulo no iguala indefinido ahora realmente podemos establecer esto. Si el texto no es igual a indefinido ahora, en realidad podemos establecer esto también. Y así cuando actualizamos modelo abierto de ropa modelo que funciona. ¿ Y si quisiéramos abrir nuestro móvil con un nuevo título, nuevo título y nuevo texto Nuevo texto aquí? Entonces así es como se ve actualmente. Este es un motivo Un montón de refresco ipsum cálido. Este es un nuevo título móvil nuevo texto aquí. De hecho, en realidad podríamos incluso dar este paso más allá aquí podríamos decir que este título de punto es igual a título. Este don't text es igual al texto, y entonces podríamos arrojar esto a su propio método también. Entonces sigamos adelante y digamos Nuevo método, cambiemos contenido. No necesita tomar nada. Vamos a tirar esto aquí y vamos a decir, Si no lo es, título no es indefinido. Este impuesto no es indefinido. Entonces vamos a agarrar el móvil. También selecciona el título desde el interior del mismo. Es como detectar dentro de ella. Y en lugar de título, queremos este título de punto este punto Tex. Y de nuevo, estamos haciendo esto porque esto se instaló aquí. Tenemos título. Por lo que sabemos, esto en realidad es simplemente indefinido. Incluso establecemos un valor predeterminado en tu por lo que no es un título predeterminado predeterminado. Y pongamos aquí un texto por defecto. Texto predeterminado. De acuerdo, sigamos adelante. Refrescar esta página Falta un parámetro. ¿ Dónde te falta algo? El texto es igual al valor predeterminado. Ahí está. Gracias, Abogado, por ayudarme sin su d cabrón. Más bien, volvamos al consejo. Refrescar Sin errores. Abrir Motile. Este es un motel. El motivo por el que no cambió fue porque en realidad no usamos el cambio de contenido todavía así que abrimos Motile tenemos esto. Tenemos un objeto con un montón de cosas aquí. Tenemos título móvil y texto. El inmueble móvil es el elemento de nota real en sí. Entonces vamos a hacer punto motil Y lo que tenemos aquí tenemos cerca Si queríamos mi pequeño punto abierto si queríamos motile dot cambiar contenido y ahí está. De acuerdo, así que eso fue un divertido ing móvil que hicimos ahí. Hicimos bastantes cosas. Lo extendimos mucho más de lo que realmente había anticipado extendiendo esto, pero creo que este es en realidad un ejercicio bastante bueno para crear tu propio móvil. Si no eres genial con CSS, no olvides que siempre puedes simplemente copiar mi código aquí Eso creará un móvil básico para ti . Fui mucho más allá de lo que estaba pidiendo esta tarea original, pero también creo que mostré aquí algunas cosas geniales para ti también. De hecho, realidad hay una más que quiero mostrarte. Una más es que no tenemos que usar título en texto para nada. Vamos adelante y nos deshagamos de este título de punto y nos deshagamos de esto, no de texto, y podríamos decir justo aquí título y texto. Y luego si actualizamos motile abierto, tenemos un modelo aquí en punto cambio de contenido Título va a ser nuevo título ha motile que cambian nuevo título a y nuevo texto aquí al igual que una función regular. Entonces ahora en realidad estamos pasando los parámetros a un método. Y podrías escribir ese código aquí también si quisieras. Ahí no lo has hecho. Es así como crearía un móvil usando clases de JavaScript y algunos oyentes de eventos. En realidad, sólo un par de oyentes de eventos, e incluso cambio parte del contenido ahí también. Siéntase libre de replicar esto. Siente que Frieda roba este código exacto y simplemente juguetea con él y descubra cómo funciona . Si estás satisfecho con tu solución o estás satisfecho con mi solución, podemos dirigirnos al siguiente video. Y no olvides que puedes actualizar tu proyecto de habilidad compartida con el último código que tengas , o puedes compartir una captura de pantalla de lo que es móvil o un video o una pluma de código. De cualquier manera, puedes actualizar tu proyecto de compartir habilidades con tu último código. Una vez que hayas hecho eso, pasemos a la siguiente. 49. Ensayo de hogar: De acuerdo, estamos en el tramo de casa. Vamos a repasar algún JavaScript más nuevo, cosas que vas a ver por todas partes. Algunos de ellos incluían liberales de plantilla. Así que mejor manera a Katyn. Ocho, esas cuerdas asquerosas que hemos estado tratando de contaminar. Hay una forma mucho más agradable de hacer eso. Objetos liberales. Vas a escuchar este término por todo el lugar. Y en realidad no son un miedo como parecen ahí, En realidad, muy, muy agradable y simple. Vamos a hablar de funciones destructivas y aerodinámicas y cosas así. Entonces nos vamos a meter en agregar y quitar clases dinámicamente con JavaScript para que toda tu página pueda ser realmente muy, muy dinámica. Y podrías hacer que se vea muy dinámico agregando clases CSS enteras a un elemento o eliminándolas de un elemento. Entonces puedes dejar que CSS haga cosas como transiciones y animaciones, lo cual es realmente bonito, porque básicamente estaríamos descargando nuestra animación general de javascript. Entonces un montón de matemáticas tendríamos que descifrar para solo dejar que el motor CSS haga lo que sea que haga. Y luego, por último, vamos a tener un proyecto final donde bueno, en realidad te voy a decir qué es vas a tener que llegar y averiguarlo. Pero va a usar muchos componentes diferentes de cosas de las que ya hemos aprendido . Entonces, una vez que estés listo para ir, pasemos a la siguiente sección y saltemos a plantilla. Los liberales objetan liberales de estructurar funciones aero y mucho más. 50. Literales de la plantilla: De acuerdo, echemos un vistazo a esta cosa llamada temp. Tarde, literal, así plantilla, literal. Es una forma más bonita de poder gato variables Nate con tus cuerdas y básicamente poner de lado variables dentro de una cadena. Y así, si alguna vez quisiste imprimir un comunicado, por ejemplo, nombre es igual a Caleb, y querías decir Council dot log. Hola, me llamo. Después cierras tu cadena en un signo más y luego tu variable. Y si hay más en un signo más, solo sueno más cosas aquí. Cierra tu signo más cadena en una variable y así sucesivamente y así sucesivamente. Y así tiene una sentencia terrible. Hola, me llamo Caleb Moore. Aplica tu Caleb. Y así es como hemos estado haciendo la concatenación de cuerdas hasta el momento. En realidad es una manera mucho mejor en JavaScript relativamente nuevo. Se puede hacer esta cosa llamada literal de plantilla, y en lugar de tener que escribir esta sintaxis bruta, que en cuanto empiezas a escribir como HTML y cosas en ella, se pone bonita, bastante asquerosa. Lo que podríamos hacer en su lugar es que podríamos decir Council dot log usado back garrapatas. Observe que Esto no es un apóstrofo. Esto no es una cita Marcar. Es una garrapata trasera. Y luego puedes decir Hola. Mi nombre es signo de dólar apertura y cierre Curly Brace. Y luego pones el nombre de la variable ahí así. ¿ Y eso no se ve tanto más limpio? Porque esto literalmente sólo dice hola, mi nombre es Oh, por cierto, esta es variable viniendo de fuera de esta cadena. Mi nombre es Caleb Bam Así como así. Y así es todo lo que realmente hay a una plantilla, literal. Ahora la sintaxis detrás de ella se ve un poco divertida. Entonces sigamos adelante y creemos un ejemplo más Aquí, vamos a crear una frase. Una frase constante porque no nos vamos a cambiar. Vamos a usar una plantilla literal, y se va a saludar. Mi nombre es de nuevo Signo de dólar apertura y cierre Curly Brace. Después pones tu nombre de variable dentro de ahí. Ese nombre variable sólo viene de aquí arriba. Bienvenido a mi curso sobre Javascript JavaScript. Y luego sólo tiene esa garrapata de vuelta de cierre y un tick de espalda de apertura. Entonces no es apóstrofes no es comillas. Es un tick de atrás adelante, slam que entrar botón. Se va a decir causa indefinida Todo lo que hicimos fue definir una variable aquí o una constante más bien, y vamos a seguir adelante y escribir frase y voila, dice. Mi nombre es Caleb. Bienvenido a mi curso sobre JavaScript y solo por diversión, Z's Vamos a seguir adelante y echar un vistazo al tipo de frase. Todavía es una cadena, y así esa es una forma más agradable de elaborar variables ating en una cadena para cualquier forma de salida. Es realmente, muy bonito, pero me gustaría que lo hicieras es solo tomarte un minuto rápido y solo tratar de escribir uno de estos entrenadores, ¿ verdad? Ah, constante con una variable. A lo mejor es tu nombre. A lo mejor es tu edad. A lo mejor es el número de mascotas que tienes y simplemente tirarlo a una cadena literal de plantilla. Una vez que tengas eso resuelto, pasemos a ese siguiente video 51. Literales de objetos: Hola y bienvenidos. De vuelta en el último video, nos enteramos de un literal de plantilla. En este video, vamos a aprender de una cosa llamada literal objeto. Y así esta es un poco más complicada que una plantilla, literal y por complicada. decir, Esdecir,en realidad solo reduce la cantidad de código que tenemos que escribir, lo cual es realmente bonito. Entonces sigamos adelante y creemos aquí un nuevo objeto, solo un objeto regular. Entonces digamos, CONST. Persona es igual a Y entonces voy a poner mi nombre aquí y mi nombre va a ser Caleb , y luego puedo acceder a eso con nombre de punto persona. Entonces ese es un objeto regular. Ahora, ¿y si quisiera definir una función aquí o un método, como se llama? Vamos a hacer que Caleb hable, y sólo va a ser una función llamada Hablar, y sólo va a consola log algo. Consola de registro, digo lobo. Yo solía decir que me fuera. Ahora digo lobo, y esto es accesible a través del habla. Sigamos adelante y guardemos eso. Y dice, digo lobo. De acuerdo, bueno, ¿ qué objeto está diciendo Literal? En realidad no necesitas esto porque este nombre y este nombre son exactamente iguales. Adelante y corta estas cosas aquí, y así solo verás arriba. Es una coma porque hay par de valor clave ahí dentro y en lugar de decir hablar es igual a hablar, solo estamos diciendo, Hey, hay una función aquí dentro. Se llama Hablar. Sólo tienes que seguir adelante y guardar eso y refrescar. También funciona, Y así es lo que hace un objeto literal. Es un atajo en un objeto. Entonces si creé uno más aquí, Pero esta vez quiero hacerlo con una propiedad o variable dentro de un objeto. Sólo voy a usar una palabra aleatoria. Aquí s así vamos a crear otra constante aquí. Se llama Computadora, y sólo va a ser una cadena llamada Computadora. Bueno, ahora mismo, lo que tendríamos que dio es que la computadora es igual a la computadora o esto. Esencialmente, eso es lo mismo. Pero debido a que estos son los mismos valores, vamos a seguir adelante, recorte eso. Y así en lugar de básicamente tener paréntesis aquí diciéndole a Javascript, Hey, esto en realidad es una función estaban diciendo, Hey , computadora, la clave y el valor son exactamente iguales. Adelante y consolemos. Registra esto. Vamos a la computadora. Eso es al cónsul dot Log. Y ahí está la computadora. Y así ahora no estamos escribiendo a lo largo. Ya no tenemos que escribir. Computadora es igual a computadora o la forma en que lo hubiéramos escrito originalmente. Computadora. No tenemos que hacerlo de esa manera. Ahora podemos simplemente hacerlo de esta manera, lo cual es realmente, realmente agradable. Y así todo eso es un objeto, Literal es decir que tu clave es la misma que tu valor o cuando se trata de un método, estás diciendo que la clave para el método también es el nombre de la función. Y así es sólo un atajo. Escribir menos código hace la vida un poco más fácil. Si te sientes en picante, adelante y dale una oportunidad a eso. No lo olvides. Si tienes preguntas sobre cómo funciona esto, puedes dejarlas abajo. Estar bajo. Yo estoy aquí para ayudar. De lo contrario, cuando te sientas seguro, pasemos al siguiente video 52. Destructuración de Armones, objetos y todo el resto: Hola. Hablemos de esta idea de estructurar. Ahora. Antes de que siquiera nos metamos en esto, les voy a decir que hay dos maneras de básicamente sacar datos de una matriz o de un objeto. Y así creo que la mejor manera de realmente aprender esto es sólo haciéndolo. Entonces voy a reducir algo del espaciado aquí y ese lado, porque eso se estaba haciendo un poco grande. Y así si tenemos una matriz, entonces vamos a crear una variable regular. Se llama a Are short for array, y tiene nombres aquí dentro. Entonces tiene a Caleb, Nathan y Zephyr. Ahora bien, si quisiera llevar a Caleb O a esto, tendría que decir Eso es una constante. Caleb es igual a un RR cero y Const. Nathan es igual a un R R one. Podríamos recorrer esto y tratar de asignar esto, pero básicamente solo estamos asignándolo de nuevo a otra variable en forma de matriz o un objeto. Y así, ya sabes, si tienes, por ejemplo, una matriz que tiene 100 nombres en ella, no quieres estar haciendo esto 100 veces. Eso es bastante doloroso. Y así lo que podemos hacer en su lugar, es esta idea de estructurar. Y realmente todo lo que estamos diciendo es, Hey, queremos agarrar estos y tirarlos a sus propias variables. Entonces vamos a seguir adelante y d estructurar esta matriz. Vamos a seguir adelante y crear. Usemos un let y esto va a parecer una lista pero en el lado equivocado de una variable. Entonces esto está en el lado izquierdo. En lugar del lado derecho de los signos iguales, va a verse algo así, que se ve un poco extraño, pero vamos a descomponer esto. Entonces primero queremos conseguir a Caleb, Nathan y Zephyr, y luego en lugar de y justo aquí, en realidad pongamos la variable array. Vamos a seguir adelante y guardar esta actualización Nuestra página parece que no pasó nada, pero está todo aquí ahora, De repente, estas variables aire reales a las que se puede acceder en tu aplicación. Ahora bien, este no es realmente un ejemplo súper útil para ser totalmente honesto. De acuerdo, entonces vamos a crear un nuevo ejemplo aquí. Algo más útil. Uh, voy a pedir mi nombre. Pronta. ¿ Cuál es tu nombre completo? Y así sabemos que esto va a devolver una cuerda. Entonces esto va a ser una cuerda. Sabemos que mi nombre va a ser el acarreo basado en Caleb, y así podemos dividirlo aquí. Y entonces podríamos hacer var o mejor dicho, dejar que nombre apellido es igual a nombre completo punto split en cada espacio. Ahora hay algunos defectos lógicos en esto porque ¿y si alguien pone múltiples espacios aquí ? Sí, eso va a romper el guión. No obstante, en este ejemplo, no lo hará. Entonces, idealmente, cuando estés trabajando en producción o JavaScript más profesional, tendrás formas de mitigar este problema en particular donde alguien pone en múltiples espacios. A lo mejor acabas de reducir múltiples espacios en un solo espacio. Adelante. Consola Logers consejo dot log El nombre es el nombre y el apellido es el apellido . Adelante, Refresca. ¿ Cuál es mi nombre completo? Caleb. Alto Lean. Se trata de mi propio nombre. Se equivocan. Caleb es el nombre de pila. Llamar es el apellido. Y así esto es de estructurar de una mejor manera. Sin d estructuración, habríamos tenido que hacer esto de una manera diferente, Así que sigamos adelante y comentemos eso fuera. Lo que habríamos tenido que hacer era nombre completo es igual a nombre completo dot split. Entonces tenemos que dividirlo de cualquier manera. Y entonces podríamos hacer var let o const. Hagamos contras porque mi nombre no va a cambiar. El nombre es igual a un nombre completo, y es el índice cero en el 1er 1 de la matriz y el apellido. Y cuando refresque la página, denos una oportunidad. No usemos mi nombre. Usemos a John Smith. John es el nombre de pila Smith su apellido, por lo que todavía funciona. Pero de esta manera tuvimos que escribir más líneas de código teníamos derecho tres líneas más de código, o, supongo, dos líneas más de código. En lugar de sólo escribir una línea de código. Se va a comentar eso fuera. Mantén esto aquí arriba y puedes hacer referencia a este código en cualquier momento en el tiempo. Entonces eso es D estructurando una matriz. En realidad hay mucho más en esto, sin embargo, así que esto es simplemente regular de estructuración. En realidad voy a comentar esto porque no quiero que eso funcione ahora mismo. ¿ Y si tenemos? Volvamos a nuestro primer ejemplo aquí. Y si tenemos más que estos nombres, pero sólo queremos el 1er 3 por la razón que sea. Por lo que quiero conseguir a Caleb, Nathan y Zephyr. Pero ¿y si también hay Pradera Henry Veto y Maya? Si ejecutamos esto, ¿qué va a pasar? Y siempre invito a la gente a probar cosas que no eres No vas a romper nada ejecutando javascript localmente en tu computadora. Está bien probar las cosas, así que si se rompe, eso está totalmente bien. Adelante y golpeemos. Refrescar. OK, tenemos a Caleb. Tenemos a Nathan. Tenemos a Zephyr. Probablemente no tengamos pradera. No. No tenemos a Henry. No pone el otro veto. Maya, todos estos son aires de referencia. Estas variables aún no existen, Entonces, ¿y si quisiéramos conseguir el resto de ellas? Bueno, en JavaScript, hay esta cosa llamada descanso. Y así en cambio, lo que podemos decir es dejar que en realidad voy a copiar esto porque no quiero volver a hablar de todo eso. Entonces vamos a d estructurar a Caleb, Nathan y Zephyr. Esos son solo el 1er 3 que en realidad no tienen que ser del mismo nombre que podría ser cualquier otra cosa. Y en JavaScript mira a esta cosa donde tenemos este punto de fantasía, punto punto descanso, y luego sigamos adelante y Cónsul, no registremos lo que sea el resto. Adelante y refresquemos. Registro de consola. Tenemos Pradera Henry Veto y Maya que son todos los demás que están aquí Ahora, esto se llama arresto. No tienes que usar el nombre resto. Podría ser cualquier otra cosa. Se expresa por la sintaxis de punto, punto punto, punto Hurley dot, punto, punto punto, puntode Hurley dot,punto,punto. Entonces digamos que todo el mundo acaba de aprobar eso. No necesitamos llamarlo descanso y voila, funciona de la manera exacta que estamos esperando. Está bien, voy a comparecer eso, y tenemos uno más. También podemos d estructurar objetos. Entonces sigamos adelante y creemos un nuevo objeto. Persona objeto va a ser. Va a ser mezquino porque por razones supongo que sí. El nombre va a ser Caleb de mi edad. De lo que va a ser 30 y el número de gatos que tengo va a ser, también. Y mi comida favorita va a ser la pizza Así que de nuevo nos topamos con el mismo problema donde si quisiera sólo conseguir mi nombre y almacenar eso en una variable, tendría que escribir. Nombre constante es igual al nombre del punto de la persona. Const. Edad es igual a persona punto edad Const. Katz es igual a los gatos de punto persona. Creo que en su lugar se obtiene la idea aquí. Debilitar d estructura esto Y así vamos a seguir adelante y tirar todo esto. Hagámoslo, Vamos aquí. Supongo. Entonces. Hagámoslo. Vamos y no estamos trabajando con una matriz, así que no vamos a usar la carrera A y el impuesto. Vamos a usar la sintaxis del objeto, y va a verse así, básicamente, básicamente, es el signo del objeto en el signo del objeto derecho a la izquierda a la derecha. En realidad podemos reemplazarnos con la propia variable objeto real. Entonces esto es como decir que todo esto está aquí. Y entonces digamos que sólo quería conseguir el nombre y la comida que podía hacer. Nombre y consejo de comida punto nombre de registro es nombre y comida es comida. Adelante. Dale un tiro a esto. Se llama Caleb. La comida es pizza. Este no tenía que ir en orden. Lo hizo. Con la matriz cuando d estructuramos una matriz, pero con un objeto porque todo se nombra siempre tenia es hey, obtener el nombre. Entonces esa es la clave aquí. También consigue la llave llamada comida Todos los demás Ahora no nos importa pero vamos a dar este un paso más allá. En realidad podemos complicarnos un poco más con esto porque ¿y si este nombre clave es algo oscuro como el nombre del usuario? ¿ Por qué sucedería esto? No lo sé, Pero ocasionalmente cosas como esta sí suceden. Y así tendrías que poner ese nombre ahí dentro. Eso es simplemente terrible. Y así Pero sólo asegúrate de que esto sí funcione. Ahorremos gratis fresco. Y ahí está. Mi nombre es Caleb, pero ahora tienes esta variable bruta llamada nombre para el usuario. Lo que podemos hacer es reasignar esto y porque básicamente, estamos creando objeto a la izquierda aquí y luego reasignando la clave a un nombre de variable que era un poco confuso. Básicamente podemos decir Hey, esta es la clave que queremos extraer. Y cuál es el nombre de variable que queremos usar. Solo llamémoslo nombre de pila y podemos Si esto tiene más sentido para ti, pon esto también en múltiples líneas. Adelante. Pero hay en múltiples líneas y esto solo se ve un poco más limpio, sobre todo con mi diversión siendo tan grande. Pero esto básicamente es decir, Hey, agarra esa llave y luego vamos a volver a asignarla a la variable llamada nombre. Adelante, guardar y refrescar. Y bastante seguro, todavía funciona. Y solo para asegurarme realmente de que funcione. Definitivamente no. Caleb. Ahí está. El nombre definitivamente no es Caleb. Entonces sabemos que esto está funcionando y así también reasignado. Esto todo lo que tienes que hacer es decir comida. Pon un colon ahí dentro. Entonces es tu llave. Entonces en realidad es hacer esto va a ser tu llave. Y luego sea cual sea tu nuevo nombre VAR, en este caso, vamos a decir que la comida va a ser remapeado a la comida favorita. Y ahora esto es un poco más verboso en el resto de nuestra aplicación. Para que pudiéramos decir comida favorita. Ahí está. Podríamos incluso llegar tan lejos como establecer propiedades que ni siquiera existen todavía, así que solo voy a deshacer algo de esto. Simplemente mantén esto luciendo bonito y ordenado. De acuerdo, así que acabo de deshacer un montón de ese código de clasificación. Se ve bonito y limpio todavía. ¿ Y qué pasaría si hubiera una propiedad aquí que busco? Eso no existe. Entonces digamos por la razón que sea, se supone que tengo un color favorito. Y digamos que se supone que el color es azul. Pero por la razón que sea, esta persona objeto no tiene eso mientras que lo que obtenemos diciendo aquí es color y entonces simplemente podemos decir es igual al azul. Y cuando hago esta comida favorita es esto cambia a color de fe, y ahí está. El color favorito es el azul, y así que ahora en realidad estamos configurando el valor predeterminado. Pero, ¿qué pasa si esto está en tu Esto ya existe? Nosotros cambiamos a leer. ¿ Crees que esto se va a quedar azul porque estamos firmando colores iguales al azul? ¿ O crees que esto va a tratar de agarrar esto? Y si no existe, entonces usa el color azul. Sigamos adelante y experimentemos y averiguarlo y otra vez, siempre recomiendo solo probar cosas. Podría ser divertido. Tan sólo una prueba para ver cómo funcionan entre bastidores. De acuerdo, así que golpeé Refresh, y es su color favorito es el rojo. A pesar de este dicho azul, es porque en realidad sí existe en la persona objeto. Esto es solo establecer un valor predeterminado, como cuando estábamos escribiendo una función con un valor predeterminado para un parámetro. Eso es exactamente lo mismo que estamos haciendo aquí Ahora lo que voy a dejar que hagas por tu cuenta como un pequeño experimento aquí es quiero que crees un objeto como este, y luego quiero que d estructuren ese objeto. Pero lo que quiero que hagas es usar el arresto, y quiero que averigmas qué se almacena en este descanso. Es posible que necesites agregar nuevas propiedades aquí para asegurarte de que este resto realmente muestre algo adicional. O tal vez no. Depende de cómo lo escribas. Pero te traigo a darle una oportunidad a esto. Simplemente juguetea con él y diviértete un poco. Vea lo que hace este resto consola log dot Rest. Entonces al final consejo, no registro descanso y solo veo qué regresa eso Así que adelante, Dale un tiro a eso. Si no entiendes todo en este video, ¿ adivina qué? Eso está totalmente bien. No se esperaba que supieras cada cosa de cada video avanzando permanentemente . Es la codificación no funciona de esa manera. Aprende todo lo que puedas. Y cuando te sientes un poco harto o junta de estructurar y pasar a la siguiente , la siguiente lección. Y si alguna vez ves de estructurar en la naturaleza, tal vez estás leyendo algún código fuente y vas como Cómo es, dice, Vamos a rizar Nombre. Color de los alimentos. Curly brace es igual a algún objeto. O tal vez estás viendo una matriz estructurada D. De cualquier manera, vas a estar preparado para cualquier código que se te vaya a lanzar. 53. Tiempo: Hola, End. Bienvenido de nuevo. Echemos un vistazo a esta cosa nueva llamada tiempo fuera. Entonces en el mundo de JavaScript, realidad podemos decirle a algún código que no se ejecute por una cierta cantidad de tiempo. Y a esto se le llama tiempo de espera. Entonces echemos un vistazo a la sintaxis detrás de un tiempo de espera. Utilizamos esta palabra clave llamada Set Time out. En realidad no es una palabra clave como nombre de función establecido tiempo de espera, y luego podríamos pasarle una función si quisiéramos. Y este es nuestro llamado de vuelta. Y entonces nuestro segundo parámetro simplemente va a ser. ¿ Cuánto tiempo debemos tiempo de espera en milisegundos? Por lo que 1000 milisegundos es igual a un segundo hasta que escribimos esto en milisegundos. Adicionalmente, también podríamos decir simplemente función de devolución de llamada, cualquiera que sea esa función se va a llamar. Entonces esto se vería como función, algo así. Y así esto es realmente todo un tiempo establecido. Parece que va a ejecutar una función en particular, y va a esperar 1000 milisegundos, o 5000 milisegundos, o 42 milisegundos antes de que realmente se ejecute. Entonces echemos un vistazo a cómo se ve esto realmente Dice para establecer el tiempo fuera. Establezca el tiempo de espera. ¿ Eso es una función aquí? Y sólo vamos a Council dot log time out y vamos a esperar tres segundos. Recuerda, esto son milisegundos. Entonces este es el equivalente a tres segundos, y voy a refrescar mi página aquí. En realidad puedes verme hacer esto, y luego contaremos juntos, y ahí está. Tardó tres segundos. Ahora eso es un poco más difícil de detectar. Entonces lo que podemos hacer en su lugar es que podemos refrescar nuestra página, y luego podemos cambiar como el color de fondo de la página. Hagamos const cuerpo. Recuerda, const va a ser bloque de alcance a este bloque en particular aquí. Por lo que cuerpo va a ser documentos selector de consulta de puntos, cuerpo y luego body dot style ese color de fondo es igual a azul. Eso también está cambiando. De color a blanco, sólo el color del texto. Adelante. Dale un refresco a esto y solo estamos esperando, hombre. Ahí está. Y después de tres segundos, lo suficientemente seguro, la página cambió. Ahora, ¿qué pasa cuando ponemos un log de consola aquí? Registro de consola, primer registro de consola. Y ponemos uno aquí abajo. Este es el tercer registro de consola. Y vamos sólo por la posteridad. Digamos que este es el segundo registro de consola. Entonces porque está haciendo un tiempo aquí afuera, ¿creemos que eso va a correr esto? Esperar tres segundos, luego ejecutar esto y luego ejecutar esta línea? ¿ O creemos que se va a ejecutar esto? Di, Sí, hay un tiempo aquí fuera. Ejecuta el tercer registro de consola y luego tres segundos después de que llegue a esta línea en particular aquí , va a ejecutar esto. ¿ Qué crees que va a pasar? Adelante. Guardar actualización y conocer 1er 3er y boom segundo registro de consola. Y así esta es una ligera introducción al mundo del código asincrónico. Lo que eso significa es que tu computadora va a leer este código de arriba a abajo. También va a leer esta línea . Sí. De acuerdo, puedo ejecutar eso. Se va a leer esta línea y decir: Oh, Oh, este es un tiempo de tres segundos. Entiendo que voy a registrar esto, así que voy a poner esto en el fondo de mi mente, y voy a seguir adelante. Pero desde el milisegundo absoluto o microsegundo que tu computadora golpea esta línea aquí mismo . Va a empezar a contar hasta tres. Se va a ir de uno a tres. Y si bien está haciendo eso en segundo plano, ya se corrió que probablemente un montón de otro código y luego aquí abajo después de que ya se haya ejecutado un montón de otro código. Se va a ejecutar esa función de tiempo de espera establecido, así que la va a ejecutar aquí abajo. Y así es una ligera introducción al tiempo establecido y código asíncrono. 54. Intervalos: en el mundo de Javascript. Existe esta idea de que puedes ejecutar código una y otra y otra vez hasta que se le diga que deje de correr. Y este es un intervalo. Y al igual que establecer un tiempo de espera, dijimos un intervalo mucho de la misma manera. Por lo que usaríamos un intervalo establecido. Se necesita una función como especie de la función de devolución de llamada y luego un tiempo como segundo parámetro . Y así digamos por cada segundo esto es de nuevo milisegundos al igual que en el tiempo establecido fuera. Esto es un segundo. Por lo que nos vamos a utilizar en milisegundos y solo queremos consola de registro de puntos. Yo estoy corriendo. Y cuando actualicemos nuestra página, vamos a ver que esto corre cada segundo una y otra vez. En realidad podemos ver que esto está contando aquí. Cada segundo va a seguir atropellando una y otra vez, y no está haciendo nada útil, sino en la naturaleza. Cuando estás escribiendo código riel, posible que realmente quieras realizar una solicitud Ajax a algún servidor cada segundo para ver si los usuarios ah registran cena para mantener viva una cookie o para tal vez enviar datos del navegador de vuelta a un servicio. Hay muchos usos para esto. También hay un buen caso de uso para deshacerse de esto. Entonces lo que podemos hacer es poner esto en una variable por lo que debería crear aquí una variable regular. Vamos a llamarlo. Es un más largo y así solo se va a iniciar sesión, y cuando actualice la página, todavía se ejecutará. Está en una variable, pero esta función, esta función de intervalo establecido en realidad se ejecuta y se almacena en esta variable. Ahora digamos que queríamos deshacernos de esto bien, como un mejor ejemplo. Hagámoslo bien en el Cónsul. Vamos a hacer intervalo claro, y sólo le damos el nombre de la variable más largo y se puede ver detenido en el número 22. El número 22 no es importante. Simplemente pasó a ser que lo detuve cuando estaba contando en el número 22. Y así vamos a seguir adelante y crear un tiempo fuera con un intervalo. Hagamos tiempo fuera establecido. Vamos a poner una función aquí, y vamos a despejar este intervalo claro intervalo de lager. Y esta vez fuera se va a llevar a cabo después de cinco segundos. Y así esto va a correr presumiblemente cinco veces, y después de cinco segundos dejará de funcionar. Adelante y refresquemos, y sólo esperamos a tres, cuatro, cinco. No lo sé. Mira eso. No llegó del todo a cinco ahora, ¿verdad? Ahora esto se reduce al tiempo de procesamiento de tus computadoras. ¿ Y si hiciéramos 5.5 segundos? Veamos qué pasa aquí. Entonces va a ir a dos y luego a tres y luego a cuatro. Y luego ahí está. Cinco. Y así todo lo que teníamos que hacer ahí era realmente chocar este número sólo un poco, sólo para asegurarnos de que esto siempre funcione cinco veces. Definitivamente hay una mejor manera de hacer esto, pero esta es solo una forma de mezclarlo y emparejarlo. Un intervalo establecido, y fijó tiempo fuera juntos 55. APIs y Ajax con Fetch: De acuerdo, echemos un vistazo a una solicitud Ajax usando el fetch A p I Ahora esto se está poniendo bastante JavaScript e y honestamente, esto no es super principiante amigable, pero voy a poner esto ahí fuera de todos modos porque en realidad es muy importante a la hora de hacer aplicaciones de una sola página, por ejemplo. Ya sabes, cuando estás en facebook dot com y haces clic en un enlace y la página no parpadea, solo ciertas secciones realmente se actualizan Eso es usar el fetch a p I. Así que eso básicamente es crear una solicitud Ajax diciendo: Hey, server facebook dot com o app dot facebook dot com Sea lo que sea, quiero un montón de datos de vuelta, y luego voy a renderizar lo que sea que los datos estén usando JavaScript voy a escribir mi propio HTML y luego voy a actualizar la página solo en esta sección en particular Así que no tienes que hacer una solicitud http completa y borrar la base de datos para información del usuario y cosas así . Simplemente va a actualizar una pequeña sección del sitio. Eso es básicamente lo que hace fetch. Y así vamos a necesitar un A P I para esto. Entonces hagamos la Guerra de las Galaxias. A P I pantanoso bueno viejo, pantanoso y vamos adelante y ah, vamos a conseguir el AP pantanoso que oigo. De hecho, creo que está aquí abajo. Sí, este es el enlace que queremos. Entonces nos va a decir aquí que es pantanoso. Punto punto c o slash ap I slash personas uno ni planetas tres o nave estelar nueve Ve con gente. Uno. ¿ Quién es este Luke Skywalker? Por supuesto. Por supuesto que es Luke. ¿ Y si queremos conseguir este Jason Data? ¿ Cómo vamos a hacer que esto funcione? Bueno, lo que podemos hacer es correcto. A fetch. Y así sigamos adelante y escribamos algo de buscar aquí. Podríamos simplemente usar la palabra fábrica, dársela a ti o a l, que era hacer para hacer esto. Todos están aquí, y parece que está hecho, pero en realidad no lo es. Entonces vamos a usar la palabra clave then, así que básicamente, esto va a realizar la solicitud Ajax. Ahí hay otros ajustes que puedes agregar si no quieres hacer una solicitud de get regular , puedes hacer una publicación, solicitar un montón de otras cosas ahí también. No vamos a repasar todos esos rubros. Entonces el siguiente paso es usar punto Entonces todo lo que hice aquí fue ponerlo en una nueva línea. Entonces es lo mismo que esto. Simplemente se ve un poco más legible de esta manera función, cualquiera que sea esa respuesta va a ser. Y voy a devolver respuesta dot Jason. Entonces solo estoy para asegurarme de que lo que sea que esté regresando de este tú Earl en el nombre variable llamado respuesta, voy a entonces j sahn Si me aseguro de que no sea Jason Format, ya sabes, si nunca has mirado a Jason antes, se parece mucho a un objeto JavaScript. De hecho, es casi idéntico a un objeto javascript. Tienes tu corsé rizado de apertura. Tienes un par de valor clave, coma, par coma valor clave, coma, par de valor clave. supuesto, estos probablemente no podrían ser cuerdas. Estos podrían ser solo números, pero podemos dejarlo como una cuerda por ahora. Entonces lo que esto está haciendo es decir Hey, espera a que esto suceda. Y luego cuando eso haya terminado, cuando tengamos una respuesta en esta función en particular, adelante y conviértalo en Jason. Tan solo asegúrate de que sea Jason, y sabemos que es Jason, porque se trata de aros de formato Jason. Doy clic en un enlace allí. Sabemos que es Jason porque esto es Jason formateando, y luego vamos a escribir uno más aquí punto Entonces función. Y podríamos hacer lo que queramos con esta respuesta. ¿ En serio? Entonces ponemos nuestros s y aquí para una respuesta, era solo registro de consola son sí. Volvamos a nuestra página y golpeemos Refresh y no puedes ver que hizo todas estas cosas diferentes . Pero sí creó un objeto para nosotros aquí. Y así tenemos nuestro año de nacimiento. Nos han creado, editado la temporada de cine con la U R. L es que pudimos luego ir a hit Es una lista para que pudiéramos ir y bucear a través de todos esos si quisiéramos. Género, color de cabello, mundo natal, Todas estas cosas podemos ir y conseguir toda esta información si queríamos también. Ahora, esta es una forma muy sencilla de crear una solicitud Ajax con JavaScript vainilla usando el fetch a p de nuevo solo toe especie de mostrarte cómo funciona esto. Usa la palabra fetch. Parece que una función tiene paréntesis. Se necesita un parámetro aquí. Esa es tu UL. Hay configuraciones adicionales ahí que puedes establecer. Te lo dejaré a ti si quieres ir a explorar eso ahora mismo o tal vez explorar eso en algún momento posterior de tu carrera. Una vez que hayamos terminado de esperar que esto regrese, decimos: Vale, una vez que eso esté hecho, entonces ve y haz esto. Y dijimos, OK, bueno, cualquiera que sea esa respuesta, queríamos asegurarnos de que sea Jason no necesariamente tiene que ser Jason. A lo mejor es XML. A lo mejor tienes que analizar algún XML, hacer algo más con un A p I. Y luego cuando eso se haga, lo que sea que se devuelva esto va a ser esta variable aquí. Entonces solo lo llamé rez. Un corto de respuesta. Ves bastante nuestro ES. Ocasionalmente verás a algunas personas simplemente decir nuestro Eso también es corto de rez, que es corto de respuesta. Entonces cambiamos estos juntos y decimos: Oye, Oye, una vez que esto se haga, hazte éste y solo conta lo registres. Ahora podemos agrupar muchas otras cosas que hemos aprendido, como el alcance y decir, Hey, Hey, vamos a seguir adelante y conseguir a Luke Skywalker tan constante Luke es igual a sólo un objeto vacío. Y entonces podríamos decir que Luke es igual a lo que sea este consejo respuestas dot log Luke. Y al igual que en su set, intervalo menos. Y sigamos adelante y veamos qué sucede aquí cuando hacemos registro del consulado antes del cónsul dot log after. ¿ Y dónde crees que va a correr esto? Podríamos incluso hacer un registro de consola aquí registro de puntos consejo luego registro de consola número uno, luego número dos. Y así como humanos, también leemos esto. Este va a ser el primero 1 luego uno, luego dos y después. Pero, ¿así es como realmente funciona? Adelante y refresquemos la página que obtenemos antes después de entonces uno, luego dos, y luego obtenemos una asignación inválida para const. Porque mira eso. Dije una constante para ser un objeto vacío. De lo que esto debió haber sido un let Vale, aquí, tú Esto funciona mejor. Entonces tenemos antes después de entonces uno, dos y luego toda la información de Luke Skywalker antes, después de esto estaba esperando una respuesta de otro sitio web. Entonces tal vez la sensación de tomar un segundo o cinco segundos o 30 segundos entonces lo va a procesar, procesarlo una segunda vez, y luego el registro de la consola. Luke. Ahora bien, ¿qué significa todo esto? Este es básicamente tu fetch a p I usando promesas de JavaScript. Y lo bueno de esto es que en realidad puedes dividir esto en función uno. Y luego podrías dividir esto en una función a si quisieras, y esto simplemente se ve mucho más limpio. Haz eso y mantén eso como estaba, aunque ahora el problema con lo que escribimos aquí es que si detectaste esto, hemos dejado que Luke sea igual a Justin objeto vacío, y estamos ajustando. Luke es igual a lo que fuera la respuesta de Jason, pero debido a que esto corre, esto tiene un tiempo de espera. Entonces es asíncrono. Entonces está haciendo algo de fondo, y luego esto corre inmediatamente después de éste. Por lo menos se ve así. Todavía no tenemos acceso para mirar, así que consejo no registren a Luke y sigamos adelante y en realidad digamos Luke, para que podamos identificar este registro del consejo. Teníamos un objeto vacío. Eso es porque eso es lo que instalamos aquí. Dijimos que fuera un objeto vacío y Onley después de un rato. ¿ En realidad recuperamos la respuesta y dijimos: Oye, Oye, anularla? Está bien, así que acabo de limpiar eso. Creo que deberíamos hacer una cosa más aquí. Entonces volvamos a nuestro objeto que obtenemos del punto pantanoso c o a p I y vamos a conseguir las películas. Entonces esta es una lista que podemos ver. Es una lista porque aquí tiene los corchetes duros. Luke Skywalker no es cinco películas, así 1234 y cinco También puedes ver que hay una longitud de cinco ahí. Vamos a seguir adelante y d estructurar esto y sólo vamos a conseguir las 3 primeras películas para que sepamos que esto es una matriz, pero está dentro de un objeto. Entonces, ¿cómo conseguimos películas? Bueno, las películas provienen de un objeto llamado Bueno, lo llamábamos Luke para que pudiéramos hacer miraban películas y esto sería una matriz. Ahora sabemos que esa es la matriz debilitar ahora D estructura que datos. Por lo que podríamos decir, Const, eres uno. Ustedes también estaban todos, y ustedes son los tres. No necesariamente sabemos cuáles son esos. Sabemos que estamos trabajando con una matriz, por lo que necesitamos usar la sintaxis de tipo de tasa. También pongamos arresto aquí otras películas, así que no lo llamemos ayuda 12 y tres. Hagamos esta película 12 y tres es igual a las películas de luke dot. Ahora eso no va a hacer nada porque no estamos usando la película 123 o películas y también Constance Block alcance a esto por lo que realmente no podemos usarlo más allá de esta función en particular. Pero podríamos decir ¿Cuál es la segunda película de la consola de video log movie a lo que sea que va a ser . Y aquí está. Esa es la película. Entonces sigamos adelante y copiemos ubicación de enlace. Esto fue filmado número seis e identidad. Sería, uh, uh, estamos mirando a Luke Skywalker aquí películas con el fin de 6317 263 uno de cada siete. Entonces película para tener una idea de seis y podemos ver que aquí mismo eso fue película para. Eso hicimos con un rayo de estructuración, y eso nos llevó a esto. Y entonces podríamos realizar solicitud de fetch sobre eso si quisiéramos también, otra cosa que podríamos hacer es vamos ah, vamos a comentar eso porque eso es un poco aseado, pero no útil. Yo también voy a cambiar eso. Podríamos recorrer cada película y conseguir cada una de esas para que pudiéramos dio luke dot films dot por cada paso una función. Esta va a ser la URL y luego el consejo índice dot log el índice y luego el conde , esto no va a estar en ningún orden particular va a ser cualquier orden esta a p devuelvo un aumento, mantener su orden. Entonces esto se va a decir a 6317 Vamos adelante, guardar refresco. Y así ahora tenemos 26317 en el mismo orden que nos dio swap edotco. Pero en nuestro bucle, tenemos índice cero a cuatro en orden. Ahora, si de verdad quisieras ponerte fantasía con esto, lo que podrías hacer es que podrías llevarte esto para cada uno y podrías traer cada película aquí y conseguir esos datos también y así sucesivamente y así sucesivamente. Y mientras haces esto, en realidad estabas construyendo tu propia forma de una aplicación de una sola página. Básicamente estamos usando un A P I para agarrar datos. Ahora bien, este es un concepto bastante complejo en JavaScript. No espero que sepas esto de inmediato. En realidad ni siquiera espero que sepas esto desde hace bastante tiempo. Pero es bueno saber que esta opción está ahí fuera. Esto lo vas a ver bastante, sobre todo avanzando en los próximos años. Fetch está en todas partes. Es una gran manera de usar las solicitudes Ajax y solo para la posteridad. Asegurémonos de que sepamos lo que es Ajax. Ajax es un camino de fregadero, este javascript y XML, o en este caso, es Jason. Entonces un juez, supongo. Edad J A. J Originalmente, fue diseñado para XML. Por lo que ahí tienes lección rápida sobre Ajax y buscar y promesas. Utilizamos de estructuración. Utilizamos un para cada bucle. Ahora estamos recibiendo super javascript e con un A p I. Eso es super cool otra vez. No espero que sepas todo esto, así que no sientas que debas estar abrumado por todos nosotros. ¿ Sientes libres de darle a esto una oportunidad para jugar con él? Absolutamente. Pero ¿sabes qué? Si no hace clic en tu cerebro de inmediato, está bien. tiempo lo hará. Una vez que estés satisfecho con esto, sigamos adelante y veamos el siguiente video. 56. Funciones de flecha: en JavaScript moderno. Ahí está esta idea de una función de flecha y realmente, lo que esto es un tipo especial de función. Esto es relativamente nuevo y es un poco diferente a los otros tipos de funciones que hemos aprendido en este curso. Entonces así como un pequeño resumen rápido, una función regular tiene una función de palabra clave y luego algún nombre, y luego o bien no hay parámetros o un parámetro o múltiples parámetros, y luego regresa, devuelve algo, devuelve una cosa. También hay funciones anónimas, por lo que podrías poner eso en, como un nombre de variable. Entonces, al igual que Const, Caleb es igual a función. Vuelve algunas cosas, Caleb. Y entonces siempre pudimos envolver estos en y y yo f e inmediatamente invocó función. Entonces esto se va a ejecutar automáticamente, y podríamos hacer lo mismo aquí. Entonces esa es una recapitulación rápida de lo que ya hemos aprendido sobre las funciones. Ahora, en JavaScript, siempre que tengas derecho a funcionar, al igual que cuando tienes un objeto, tienes acceso a la palabra clave esta misma cosa con una nueva clase y un método dentro de ella. Entonces tienes un nombre básicamente funk aquí tienes acceso a esta misma cosa en un objeto, por lo que CONST Persona es igual a nombre funk aquí, nombre de función aquí, y tienes acceso a esto. Y lo que esto realmente significa es que se refiere a esta función. Esto significa esta clase, esto significa este objeto. Entonces lo que sea que lo esté definiendo, eso es lo que significa esta palabra clave cuando empezamos a hablar de funciones aero que ya no existen. Entonces cuando usamos una función de flecha, la gran diferencia entre una función estrecha y una función irregular es distinta de la sintaxis que parece diferente. Tampoco tiene este punto cualquiera que sea el nombre o este punto cualquier función de nombre no tiene que esto no está vinculado. No, Lo bueno de eso una función de flecha es, si eso no está ligado a tu función o al objeto definitorio que significa JavaScript más rápido. Si no tienes que reasignar constantemente variables o almacenar cosas en la memoria, entonces tu computadora puede ejecutarse más rápido. Ahora no es notablemente más rápido para un humano, Pero si tienes 10 millones de líneas de JavaScript, sí, podría llegar un poco más rápido, bastante más rápido, dependiendo de la lógica que estés escribiendo. Entonces Echemos un vistazo a una función de flecha regular aquí, Así que digamos saludo. Hagamos que eso un poco más grande sea igual a abrir y cerrar paréntesis. Entonces tenemos nuestros corchetes ahí. Flecha gorda. Es por eso que lo llamamos una función de flecha y luego llaves. No, solo dices hola mundo. Y para ejecutar esto, sólo podríamos hacer saludar con paréntesis. Adelante. Carga esto en nuestro navegador. Estoy usando Firefox. Golpeé Refresh, y no hace nada. Sigamos adelante y lo ejecutemos aquí de todos modos, y se va a decir acordado. El motivo que no hace nada es porque está devolviendo algo. Entonces si dijimos Const. Alto es igual a saludar página de actualización, decir hola y también dice hola mundo. Entonces es igual que una función regular. Simplemente se ve un poco diferente en este punto. Entonces esto es decir que esta es tu función. Nombre es igual a una función de flecha, por lo que no hay esta palabra clave que no exista aquí este punto lo que no exista y solo va a ejecutar esto ahora. ¿ Y si quisieras un parámetro en tu pozo, si quisieras un parámetro aquí dentro, podrías decir algo así como el nombre. Hola. Y luego sigamos adelante y usemos una plantilla literal. Así que las garrapatas traseras. Hola, nombre y consola dot log. Hola Página de Refresher. Y dice, 00 es indefinido. Si bien es porque no pusimos un nombre ahí dentro. Entonces sigamos adelante y pongamos mi nombre Caleb. Hola, Caleb. Hola, Zephyr. Y así sucesivamente y así sucesivamente y así sucesivamente. También podríamos poner otro parámetro aquí llamado lugar. Entonces, uh, bienvenido y luego lugar y no tienen que ser nombre o lugar. Podrían ser lo que quieras. Vamos a poner un lugar aquí de Atlantis, un lugar donde mis gatos alguna vez odiarían absolutamente estar porque es acuoso. Pero dice Hola, Zephyr. Bienvenido a Atlantis. Y así es como lo haríamos bien en una función de fila. Ahora, en realidad deshacemos ese último ejemplo aquí. Y vamos a seguir adelante y sólo deshacernos de estos corchetes. Si solo hay un parámetro aquí, no necesitamos paréntesis. Es sólo si tenemos dos o más parámetros que realmente necesitamos estos paréntesis en tu solo tenemos el uno Así que vamos a decir la función. Greet tiene un parámetro llamado name, y luego va a ejecutar lo que esté dentro de estas llaves y así podremos seguir adelante y deshacernos de eso. Y cambiemos esto a Henry. Y esto sólo dirá hola, Henry. Ahora en realidad podemos conseguir incluso Mawr slim con nosotros. En realidad no necesitamos esto aquí. Si lo que estás haciendo es simplemente devolver algo de inmediato, en realidad podemos deshacernos de esto por completo. Y así esto se ve un poco raro, pero esta es una función echa de menos el parámetro, y esto va a devolver lo que esté actualmente aquí. Y así cuando refresco mi página, todavía funciona. Y luego para múltiples parámetros otra vez, podríamos simplemente poner lugar aquí. Hola. No voy a decir nada bonito. Lugar interesante. Haz que eso sea un poco más pequeño. Entonces function greet tiene un parámetro de nombre parámetro lugar se va a decir hola. Cualquiera que sea el nombre, cualesquiera que sean los lugares. Y Henry está en Canadá. Y así hola, Henry Canadá. Y así es, su mayor parte, todo lo que realmente hay a una función de flecha, y esto es realmente lo mismo que decir función. Saludo tiene nombre en un lugar. Retorno. Bueno, bien. Esa es la vieja manera. Hola, Nombre, por favor. Entonces esta es la forma más antigua de escribir una función con la antigua forma de contaminar las cuerdas. Y esta es la nueva forma de hacerlo. Vas a ver ambos métodos por todo el mundo, así que es bueno estar familiarizado con ambos. Pero eso es realmente todo lo que hay que saber sobre la función de flecha. Eso y este nombre de punto es igual a nombre. Y luego podrías hacer Cónsul, no registres este nombre de punto si quisieras. Eso no existe aquí. Simplemente no hay esta palabra clave. Simplemente no está atado. Ahora echemos un vistazo a cómo va a funcionar esto. A lo mejor un cuatro bucles cada. Vamos a comentar esto. Tengo que cambiar eso de verdad. Vamos a comentar esto y vamos a conseguir una lista de cosas aquí. Entonces, uh, vamos a crear una matriz. Vamos a crear un const A r r. Es igual a JavaScript, python PHP. Y luego en código V s, solo voy a escribir para cada Nope para cada ficha hit y va a decir, ¿Cuál es tu primer array cuando mi elevar un R Eso es esto aquí y luego para cada elemento . Esta es una flecha gorda. Esta es una función aero de grasa. Entonces estamos diciendo aquí este elemento, sea lo que sea que esto va a ser, ahora podemos trabajar con él. Entonces cambiemos de elementos a lenguaje, porque va a ser JavaScript, python o PHP. Y hagamos consola, no registre el idioma y actualice su página Transcript. Patri de Python. Entonces ahí vamos. Estamos empezando a reemplazar realmente la función regular por una función aerostática gorda. Si no necesitas la palabra clave this, también podría usar la función de flecha gorda. Técnicamente es menos código y también menos carga en su computadora. Vamos a seguir adelante y crear una hora establecida usando una función de flecha así que establezca el tiempo de espera. Así lo estábamos escribiendo antes, y vamos a decir Espera un segundo. Bueno, no necesitamos hacer eso ahora porque aquí no hay parámetros. ¿ Qué hacemos? No podemos simplemente hacer esto. En cambio, le pasamos un conjunto vacío de parámetros y luego decimos, cónsul dot log yea, esperé Jascha Python PHP y luego, sí, esperé. Hagamos que eso sea un poco más dramático aquí y eso es spam. El consejo sólo esperarlo. Yo estoy ahí Lo es. Sí, esperé una y otra vez y estas son tus funciones gordas de Errol. De acuerdo, así que sugeriría darnos una oportunidad. Vas a estar escribiendo una cantidad justa de funciones aero en el futuro si vas a ser desarrollador de JavaScript y así también podrías acostumbrarte a ello Ahora lo bonito es, realidad es muy fácil acostumbrarte a él. Una línea en lugar de múltiples líneas siempre es muy agradable. Y como siempre, no olvides que estoy aquí. Si tienes preguntas, deja tus preguntas, comentarios o inquietudes abajo Boogaloo y estaré encantado de ayudarte 57. Agrega y eliminar clases de CSS: Ahora echemos un vistazo a cómo podemos agregar y eliminar clases CSS. Dos elementos en nuestro modelo de objetos de documento. Por lo que en frente y desarrollo Web confiamos muy en gran medida en esta clase es igual a, y luego cualquiera que los nombres de clase se airen aquí. Entonces tal vez tenemos un nombre de clase aquí de rojo, azul y blanco, supongo donde podemos cambiar el color del texto para leer color del texto a color del texto azul del dedo del pie blanco . ¿ Cómo vamos a eliminar realmente estos? Bueno, primero lo primero, Para configurar esta demo, vamos a tener que crear algún estilo CSS. Por lo que estilo punto color rojo es igual a leer punto Azul va a ser azul. Y no hagamos Blanco porque va a haber un fondo blanco lleva en su lugar hacer negro. No los negros tampoco van a funcionar, porque el negro es por defecto. Adelante y sigamos con verde. Deshazte de nuestras clases. Sigamos adelante y actualicemos tu página. Y sin embargo, por supuesto, no pasa nada. En realidad no hemos agregado estas clases. Si agregamos leer, vamos a ver a nuestra tecnología cortar sus giros de color de texto para leer. Deshaznos de eso y lo que tenemos que hacer es agarrar este elemento usando algún tipo de selector de consultas . Entonces digamos que aquí tenemos una const. H uno es igual a documentos selector de consulta de puntos y solo queremos agarrar esa edad uno. Ahora lo que podemos hacer es H one dot class list dot ad, y podemos agregar Eso es un azul. Y así esto va a agarrar la lista de clases. Actualmente, no hay nada ahí dentro, y le va a agregar azul. Entonces sigamos adelante ahorrando. Y en cuanto golpee Refresh. Esto se va a poner azul así como así. De hecho, ya tenemos h uno aquí dentro. Tenemos acceso a esto. Podemos hacer H uno la lista de clases punto anuncio No, no vamos a agregar Vamos a eliminar azul OK, cambios de texto. De nuevo, Vamos a hacer H un punto lista de clases punto Añadir rojo Perfecto. Adelante y sumamos el azul también y podemos ver cuando miramos la h una nota que tiene clase rojo y azul en ella. Ahora la razón que es azul es por el estilo CSS. Entonces el rojo vino primero, luego el azul fue el último ejecutado. Entonces, naturalmente, CSS va a decir que voy a escuchar la última regla de la que me hablaron. Voy a usar esa. Entonces esa es la razón por la que está haciendo eso. también dijimos cada uno lista de clase de puntos punto agregar verde, que es el último de su lista Aquí abajo, se vuelve verde. Muy bien, ¿qué pasa si quieres agregar múltiples clases? Bueno, podrías hacer H un punto lista de clase lista de puntos azul, rojo, verde, así sucesivamente y así sucesivamente. Esto no va a funcionar. Esto probablemente te arrojará un error en realidad. Echemos un vistazo a esto. Sí, cadena de error de carácter no válido contiene un carácter no válido. Básicamente, dice, ahí está esto. Ahí hay un espacio y no debería ser así En cambio, lo que hacemos es pasarle una lista infinita de parámetros. El 1er 1 va a ser azul, y luego el 2do 1 se va a leer ahora. Esto no va a funcionar necesariamente porque ya están configurados. Entonces sigamos adelante y quitemos estos. Quitemos el verde y el azul y debería volver a ponerse rojo. Azul verde. Y ahí está nuestro CSS. Nuestro H uno se vuelve rojo y así. Y así es como se agrega y quita. Y si quisieras eliminar, solo como un ejemplo rápido, una vez más lista de clases punto anuncio un parámetro azul segundo parámetro verde. CSS va a decir lo que venga último, voy a honrar más, Así que esto se pondrá verde, como se esperaba. 58. Proyecto final de JavaScript: todo bien. Es esa hora que vamos a estar trabajando en nuestro proyecto final, y este proyecto final va a utilizar no todo lo que hemos aprendido, sino un buen trozo de todas las cosas realmente importantes. Y así su proyecto final debería hacer esto. Siempre que pongas el ratón sobre una de estas letras, se va a animar un poco. Esto va a ser una mezcla entre CSS y JavaScript. Si no eres súper fuerte y CSS, está bien. No tienes que hacerlo animado necesariamente así. Podrías hacer que tenga ah, borde o cambiar el color de la fuente o algo así. No tiene que ser como antojitos. Yo lo he hecho aquí. Ahora, para empezar con esto, me gustaría que crearan un título. Por lo tanto, crea algo de texto en tu página. Acabo de escribir Proyecto Final para el mío. Selecciona el título usando tu javascript y luego te vas a preguntar. Divide el título por todos sus personajes. Vas a querer agarrar a cada personaje por aquí, y luego vas a querer básicamente volver a unir a todos esos personajes con un poco de HTML su alrededor y luego puedes seleccionar cada personaje por la clase que está alrededor de él y agregar un oyente de eventos a cada uno. Entonces vas a tener que usar un par de bucles aquí. Y luego cada vez que pongas el mouse sobre uno, deberías poder cambiar el estilo de clase. Por lo tanto, agrega o elimina de nuevo una clase. Esto va a requerir un poco de CSS. Pero oye, ¿sabes qué? Si no eres súper fuerte con CSS, no tiene que ser elegante. Simplemente tiene que ser funcional. Eso es javascript. Disfuncionalidad JavaScript. CSS es belleza, así que he mezclado los dos aquí, pero realmente solo necesitamos estar centrándonos en la funcionalidad. Entonces esta es mi exhibición final. Esto es exactamente lo que tengo aquí, y me gustaría que trataras de escribir esto por tu cuenta para esto porque esto es bastante complejo. Definitivamente siéntete libre de volver a hacer referencia a los otros videos, o cualquiera del código fuente definitivamente utilizado Google o Stack Overflow o Mozilla Developer Network, MD final como cualquier tipo de referencia. Necesitas hacer esto, tómate el tiempo que necesites e intenta trabajar tú mismo. Entonces en tan solo un momento voy a dar la vuelta negra a la pantalla. Y me gustaría que pausaran el video y le dieran una oportunidad. Prueba lo mejor posible para hacer esto por tu cuenta. Ahora, obviamente, si te atascas, solo puedes golpear currículum en el video y puedes ver la forma en que lo hago. Te mostraré exactamente cómo llegué a este punto para que pueda hacer esto. Así que adelante, pausa el video ahora y dale una oportunidad a esto. Muy bien, empezar con mi opinión sobre esta solución en particular. Entonces lo primero que tenemos que hacer es crear un título. Yo sólo voy a usar el H de aquí llamado Proyecto Final. Para que esa se haya hecho. Adelante, deshazte de eso de nuestra lista. A continuación, selecciona el título usando JavaScript, por lo que vamos a tener que seleccionar este título. Entonces sigamos adelante y creemos una constante. Cada uno es igual a documentos dot query selector se cerró puerta, y sólo voy a seleccionar el H. Es la única H en la página para que pueda hacer esto. Entonces quiero agarrar todos los personajes del título. Por lo que quiero conseguir todos estos. Entonces sigamos adelante y creemos una nueva constante aquí llamada texto y eso va a ser texto interno de 81 puntos sobre eso. Yo quiero dividir todo el personaje del título, así que quiero agarrar a cada uno. Y entonces lo que quiero hacer aquí se convierte esto en una matriz. Entonces voy a usar dot split y nos vamos a dividir en absolutamente nada. Y vamos a deshacernos de esa y esa. Y ahora necesitamos reincorporarnos cada letra con una clase. Y así tenemos que recorrer todo este texto y por cada uno de aquí, necesitamos poner algún tipo de clase a su alrededor. Entonces lo que estoy pensando es de clase J s carta para poder seleccionarla con javascript algo así, y va a pasar por cada uno de ellos. Entonces va a haber un lapso alrededor del tramo F A alrededor del ojo y un l p r o j E C T. Y también voy a querer no incluir el espacio. Entonces, ¿cómo vamos a hacer eso? Bueno, vamos a necesitar crear algún nuevo HTML para poner aquí. Algunos crearían una nueva variable llamada HTML, y solo va a ser una cadena en blanco por ahora. Entonces quiero mirar a través de todo el texto. Entonces esto no es realmente texto estas nuestras cartas y hagamos letras punto para cada una Por cada letra que tenemos, tenemos una sola letra y vamos a usar una flecha gorda aquí. Y podríamos simplemente trabajar con esta carta. Entonces ahora podemos decir que HTML es igual a HTML plus span. Clase es igual a lo que van a ser las clases. Todavía no lo sabemos. Sea cual sea la carta abierta, sólo llenaré eso con L por ahora. Y esto es lo que necesita para parecer algo así. Ahora necesitamos realmente poner los datos aquí. No quiero hacer mucha concatenación aquí. Quiero usar una plantilla literal, y la letra solo puede ser la letra variable. Ahora la clase aquí dentro va a ser letra y J s letra. Entonces carta va a ser lo que uso CSS para seleccionar y J s letra va a ser sólo un selector de JavaScript, Así que estoy especie de mantener esos dos mundos separados. Ahora, en este punto, puedo volver a seleccionar mi H uno y hacer punto interno html es igual a html. Adelante y abramos su página y refresquemos Abre a nuestro cónsul ¿Y dónde está nuestra H? Mira eso. Tenemos un lapso alrededor de cada uno con clases de letra y J s letra en él. Entonces eso es realmente bueno. Eso es exactamente lo que queremos. Desafortunadamente, también tiene el espacio ahí dentro. Entonces tenemos que detectar esto. Entonces si letra no equivale a un espacio vacío, entonces podemos establecer algún tipo de clases. Clases son iguales a ti algo. Y también vamos a establecer clases aparece clases es igual a por defecto va a estar en blanco. Y luego si la letra es otra cosa que un espacio que también está agrega estas clases y tú mismo a la letra J s letra y solo queremos reemplazar esto por clases. Y esto es bloque de alcance también. Estos corchetes aquí Así que no tengo que preocuparme por esta fuga fuera de mi alcance para el para cada bucle. Adelante, refresquen nuestra página. Y ahí vamos. No tenemos clases ahí dentro Ahora. También hay otras formas de hacer esto. Básicamente podrías decir esto con unos cuantos retoques extra, pero no vamos a hacer eso. De acuerdo, ¿Qué sigue en la lista? Necesitamos agregar un oyente de eventos a cada uno de estos. De acuerdo, Entonces antes de hacer eso, necesitamos seleccionar en realidad cada uno de estos. Ahora, todos estos tienen una cosa en común Esa es esta clase. ¿ Qué? Tendrán ambas clases en común, Pero vamos a usar el selector de letras Js, así que sigamos adelante. Un nuevo verde const Js letras es igual a documentos, selector de consulta holandés todo porque queremos todos ellos y vamos a seleccionar R J s letra . Ahora necesitamos recorrer cada uno de estos y agregar dos oyentes de eventos uno para cuando ponemos la boca sobre una letra y otro para cuando quitemos el máximo de la letra. Entonces vamos a crear un para cada bucle, lo que las letras Js punto para cada uno que vamos a pasar en el nodo, y la nota que estamos consiguiendo aquí es cada elemento de letra Js. Entonces esta es una nota. Eso es un nodo. Eso es un nodo nodo nodo. No estamos seleccionando ese nodo de nodo de un nodo. No, no, no. Y sin duda. Entonces estamos diciendo por cada uno de esos nodos agarró la nota individual y hacer algo con ella. Y es en este punto podemos sumar a nuestros oyentes de eventos. Vamos a desplazar esto hacia arriba, sin punto add event listener y cuál queremos? Queremos pasar el mouse sobre cada vez que ponemos la boca sobre el oyente del evento, y va a tener un funcionamiento aquí con el evento, y eso es solo consola. Registra esta consola log este punto intertek Así se va a consola. Registra la letra ahora la razón por la que estamos usando la función aquí en lugar de una función aero Bueno, estamos usando una función de flecha aquí, pero estamos usando una función regular aquí es porque necesitamos esto. Necesitamos esto para referirnos al nodo, que viene de aquí. Adelante, guarde danos un refresco. Abre. Nuestro cónsul y selector de consultas no es una cosa. Selector de consultas es una cosa. Ahí vamos y pongamos el máximo sobre el proyecto final y se puede ver que está empezando a deletrearlo en mi consejo. Entonces eso es perfecto. Eso es lo que queremos. Ahora tenemos que añadir otro aquí para el ratón fuera, el ratón fuera. Entonces cada vez que movemos nuestro ratón fuera de ese elemento en particular y solo digamos fuera, sigamos adelante, actualicemos y lo pongamos sobre el P out p out f out. Entonces eso está funcionando perfectamente. Por lo que ahora tenemos oyentes de eventos en cada uno. Lo último que tenemos que hacer es sobre la boca. La letra debe animarse usando CSS, por lo que necesitamos agregar y eliminar clases aquí. Entonces aquí podemos hacer este anuncio de punto de lista de clases de puntos, y voy a añadir una clase llamada Activo y al ratón fuera. Vamos a quitar esta clase y echemos un vistazo a cómo funciona esto. Abramos nuestra página de actualización de inspector, y cada vez que pongo mi ratón por aquí, en realidad se puede ver que las clases están cambiando de hecho. Entonces ahora lo último que tenemos que hacer es hacer que el mouse sobre la letra realmente se anime usando algo de CSS. este momento, podemos usar la clase llamada letra, y si nos movemos por encima de ella, también hay una clase ahí llamada Active, por lo que podemos usar ambos juntos. Entonces me voy a deshacer de esto porque eso ya no se necesita. Y vamos a escribir primero algunas cosas CSS. Voy a querer cambiar algunas de las cosas del cuerpo. Quiero cambiar el color de fondo para que no sea solo un blanco recto. Hagámoslo de blanco. Entonces vamos a enviar un texto al centro de línea porque quiero que todo el texto de la página esté centrado. Siguiente. Vamos a seguir adelante y seleccionar letra y vamos a agregar algo de estilo predeterminado a cada letra. Digamos que el tamaño de fuente que va a ser bastante grande ahorraría 90 píxeles. El forinto de la familia. Tengo un frente personalizado cargado aquí ya, y es Pacific. Ah, así que digamos que la familia de fuentes va a ser del Pacífico. Ah, o cursiva. Si no carga desde Google, sólo va a cargar algo maldición de display en bloques de línea que podríamos hacer que algunas de estas animaciones funcionen correctamente. Cambiemos el color, también 999 Refrescar. Está bien, está bien. Está viniendo bien ahora. Tenemos que añadir una clase activa, por lo que punto letra punto activo. Y vamos a transformar esta escala de transformación 1.5 hacer que la letra sea un 50% más grande. Y eso también está girado, supongo Rotar 20 grados. Ahora, cambiemos el color a algo así como el verde. Oh, mira eso es llegar ahí. De acuerdo, así que esto parece un poco entrecortado, pero podríamos arreglarnos bastante fácilmente con algo de CSS. Adelante y sumamos un trans ish en transición. Vamos a decir todo porque aquí voy a ser un poco perezoso. Digamos que a todos les va a tomar 250 milisegundos para facilitar la entrada y salida. Está dentro y fuera. Refresca nuestra página. Yo soy. Mira ese proyecto final completo. Entonces echemos un vistazo rápido a lo que hice. Una vez más, agarré el h. Ese es este tipo de aquí, agarró todas las letras dentro de ella , y luego la dividí en base a absolutamente nada. Así que dividí todas las letras de aquí en una matriz. Entonces dije por cada letra de esa matriz, vamos a recorrer por ella y vamos a un bolígrafo, algunos html toe una cuerda. Ahora podríamos haber usado una matriz y haber usado la articulación de puntos también. Esa es otra forma de hacerlo. Acabo de usar una cuerda regular. Utilizamos una plantilla literal aquí con un par de variables que hicieron que nuestra nación gorra se viera bonita y suave. Entonces dije: Oye, Oye, cuando termines, ese cambio que el dedo del pie html interno de cada uno, cualquiera que sea lo que saliera del bucle. Y entonces dije: OK, OK, bueno, porque ahí está esta carta de Js por cada letra. Vamos, agárrate todos esos. Entonces vamos a recorrer cada uno y ahí dentro tenemos cada nota. Cada elemento que tiene la letra Js como clase es su propia nota. Y así este nodo ahora tiene un oyente de eventos para pasar el ratón. Y cada vez que pasamos el ratón como la clase de activo y hay otro oyente de eventos. Por lo que cada vez que sacamos la boca , quita la clase de activo. Por último, hice que se viera bonito con algo de CSS. Así que solo poco estilo de fondo corporal allí. El letra en sí tiene un tamaño de fuente más grande Ah, Visualización de la familia de puntos personalizados en bloque de línea porque estamos usando un span. Por lo que necesitamos usar eso en orden. Teoh usar transformar correctamente, cambiar el color del teléfono, el color de fuente predeterminado y le dio una transición. Por lo que va a tomar 0.25 segundos para entrar y salir de su animación, y su animación viene de su estado activo. Entonces siempre que la letra, siempre que haya un elemento que tenga la clase de letra y también tenga una clase de activa al mismo tiempo, vamos a transformarla para que sea un 50% más grande, girado 20 grados y cambiar el color de fuente a verde, hecho y hecho. Por último, revisamos nuestro cabildo. Nos aseguramos de que no haya más troncos, así que no somos cónsul registrando nada, porque eso no es necesario. Y también no hay advertencias. No hay errores. No hay información ni depuración. Todo se ve sano y feliz. Hemos terminado juntos nuestro proyecto final, y esta es mi opinión sobre la solución. De nuevo hay varias formas diferentes de hacer esto, pero esto es usar muchas de las piezas más grandes de javascript que hemos aprendido garganta este curso y por último por todo lo que habrás compartido habilidades desarrolladores por ahí? Me gustaría mucho si pudieras compartir tu código, tomar una captura de pantalla de esto y ponerlo en un proyecto de compartir habilidades. Será genial para mí ver el tipo de progreso que estás haciendo, pero también te puedo ayudar con consejos y retroalimentación en apoyo. Entonces no olvides actualizar tu proyecto JavaScript y luego lo echaré un vistazo. 59. JavaScript para principiantes: todo bien. Tú lo hiciste. Tienes todo el camino a través de este curso. Eso es un asunto realmente grande. Asegúrate de felicitarte. Cómprate algo bonito. Cómprate una buena comida. Haz algo para recompensarte de verdad porque superaste más de 50 videos de JavaScript y, ah, vale la pena recompensarte por eso. Ahora. Sí aprendimos mucho JavaScript, pero honestamente, esto es solo una introducción a JavaScript. Hay un mundo de JavaScript mucho más grande por ahí, incluyendo cosas como el gestor de paquetes de nodos NPM o frameworks como reaccionar y ver dot Js o bibliotecas como slick dodge. En cuanto a la creación de células de cuidado increíbles o J Query para básicamente crear y escribir JavaScript que sea compatible con versiones atrás. Para que no tengas que preocuparte por que JavaScript no funcione en navegadores más antiguos. También hay muchas herramientas por ahí que puedes instalar con, como node, como node, gestor de paquetes y node.js. Y puede compilar tu javascript en lo que yo llamo JavaScript ficticio, donde básicamente tú, derecho JavaScript moderno de fantasía, y lo compila en un archivo diferente que los navegadores más antiguos, como Internet Explorer 11 pueden entender. Entonces si estás amando el mundo del javascript y quieres seguir profundizando y profundizando en él. Tu próxima apuesta es probablemente seguir aprendiendo JavaScript. Entonces si te interesaba continuar con el dedo del pie aprende javascript y convertirte en un jet de JavaScript realmente, realmente fuerte , potente, yo entonces probablemente vas a querer empezar a aprender algo más de las cosas avanzadas se ponen en los verdaderos detalles arenosos de todas estas cosas diferentes que hemos aprendido todos los diferentes métodos en los que puedes usar, como cadenas y matrices y cosas por el estilo. Todos los diferentes oyentes de eventos, bien, más clases, cosas así. Y luego vas a querer saltar a probablemente algún gestor de paquetes de notas para que puedas usar código de otras personas en tus proyectos y luego tal vez empezar a aprender algún reactor view dot Js y tienes tu objetivo era aprender javascript para que pudieras ser un frente y desarrollador web . Bueno, ahora tienes suficientes habilidades que en realidad puedes ir y aplicar para ser desarrollador de frente y Web . Ya sabes, una gran cantidad de JavaScript justo fuera de la caja. Y eso es un arranque de cabeza muy fuerte. Una vez más, felicitaciones por terminar todo este curso. Sí. Por favor, asegúrate de que sí te recompensarás. Es realmente importante que te recompenses por todo el trabajo arduo que has hecho. Mi nombre es Caleb diciéndome que puedes encontrarme por toda Internet. Pero lo que es más importante, si tienes alguna pregunta, comentario, preocupación o retroalimentación, siempre puedes dejarlos en la sección de comentarios abajo. Leí todo lo que entra, y trato de responder a todos de manera oportuna también. Entonces, una vez más, gracias por tomar este curso. Espero que hayas aprendido mucho. Espero que te hayas pasado un buen rato aprendiendo algo de JavaScript. Tienes algunas buenas manos sobre la experiencia, y por último, me encantaría verte fuera en el mundo. Así que no lo olvides, puedes unirte al grupo de Facebook, al grupo de aprendizaje a Code Facebook. Siempre puedes simplemente dejar comentarios o preguntas abajo abajo. Leí todo lo que entra y trato de ser lo más útil posible. Y espero que lo pasaras bien en este curso.