Javascript para principiantes a expertos: aprende JS (Javascript) de la A a la Z

1. ¿Qué es Javascript?: Hola, amigo mío. Cuando estás aprendiendo algo nuevo, ¿te haces muchas preguntas como por qué necesitamos eventos? ¿ Por qué necesitamos bucles con nuestro día? ¿ Cómo los usamos y demás y demás? caso afirmativo, entonces estás en el lugar correcto porque voy a contestar todas tus preguntas. ese aspecto. Te explicaré en discurso todo desde lo básico dedo del pie avanza cumplidos fuera del JavaScript para que podamos convertirnos en el experto. El discurso se divide en 23 secciones y consiste en 85 lecciones. Está a más de 12 horas de descanso. Gran contenido. También vas a encontrar aquí montones de cuestionarios y ejercicios. Te explicaré tu sintaxis fuera del JavaScript y bien entrenada la sintaxis. Durante ejemplos prácticos, JavaScript está dando a su sitio web funcionalidades adicionales que se pueden ejecutar en el equipo del usuario sin volver a conectar el dedo del pie del servidor. Esto te permite hacer cosas con las que no puedes hacer en HTML. Debido a ello, la interfaz de usuario se vuelve más amigable y más interactiva por elementos interactivos. Me refiero a cosas como dos profundizados animados fuerza con privilegio, socios deslizados de validación, galerías con empresas y muchos hombres, y más y bien podrías estar preguntándote qué sabrás después del discurso. Después de este acogedor será capaz de codificar correctamente. JavaScript en cualquier nivel de dificultad crea escalofriantes como Galería dinámica con presentaciones familiares de diapositivas en cetera de Bagger Kotick y mantener tu abrigo funcionando bien y mucho, mucho más. Entiendes cosas como variables, todos los operadores, sentencias condicionales, funciones, áreas, objetos, bucles, bucles, eventos de modelo de objetos de documento, expresiones regulares, cookies y mínimo. Tienes más información sobre esto abajo el video, ¿de acuerdo? Y lo que debes saber antes del discurso, debes entender los conceptos básicos fuera de HTML y CSS. Si sabes que puedes trabajar fácilmente estos autos y tal vez te estés preguntando, Oye, Oye, pero ¿por qué deberías elegir mi curso? Porque tienes mi ayuda con respecto a temas de portada si es necesario. Mis cursos están actualizados. Tengo miles de clientes satisfechos, y estos autos lo llevo yo. Y soy persona muy experimentada, y no voy a hablar como si estuvieran como puedes ver, y quiero que tu tiempo pase bien de buen humor. Puedes descargar unas lecciones en tu disco de computadora. No asumo que seas piloto, un Lightman otros profesores. Estoy agregando fuente libre de abrigo, Esencia Preval y bueno, ¿quién soy? Mi nombre es nuestro truco de Kardashian Ladakh. No me gusta hablar de mí mismo, pero bueno, como pueden ver, tengo una experiencia en este asunto. Llevo más de 10 años programando y he estado desarrollando un sitio web desde hace más 14 años y estoy alterado de 27 videos cursos en Polonia. He creado también seis cursos de video en inglés. Soy profesor fuera de miles de clientes satisfechos. Hay muchos comentarios sobre mis cursos y aquí está uno de ellos. Si tiene alguna pregunta con respecto a temas de portada, por favor sólo pregúntame. Me encanta ayudar a otras personas a crear una discusión. Estaré encantado de ayudarte. Eso es todo. Muchas gracias. 2. Descarga e instala el editor: Hola, amigo mío. Hoy tenemos la misión de elegir el editor para sumergirse profundamente en JavaScript, y probablemente te estés preguntando si necesitas quedarte con el editor que estamos usando en este curso. Absolutamente no. Si ya tienes tu editor favorito, siéntete libre de seguir usándolo y podrás detener esta conferencia y continuar con la siguiente. Vamos a usar Netf a veces el código de Visual Studio. ¿Por qué? Porque personalmente lo encuentro útil. Me conviene, no sólo para el desarrollo web, sino para la programación en otros lenguajes, también. Pero recuerda, se trata de lo que funciona mejor para ti, no para mí. Entonces, ya sea que vaya a ser código de Visual Studio, o corchetes o texto sublime o cualquier otra cosa, la elección siempre es suya. Ya vamos a descargar NetBeans. Y si la versión aquí es más grande, no te preocupes en absoluto. ¿Bien? Porque este curso aún está actualizado. Aunque la versión aquí fuera diez, el curso sería totalmente el mismo porque los beans netos no solo se usa en JavaScript. Se utiliza principalmente como Java, que es un lenguaje totalmente diferente. Y su versión importa porque si quieres usar la versión más reciente de Java, entonces necesitas usar la versión más nueva net be. En JavaScript, realmente no importa en absoluto. Vamos a golpear Descargar patrón. Y ahora si estás usando Windows, usas dslink. Si estás usando Mac, estás usando Disnink y si estás usando Linux, vas a usar Debido a que estoy en Windows, voy a dar click en la versión ejecutable. Y cuando le pego a esto, puedo descargarla en segundo plano. Y ahora, hay que recordar que Net Bins requiere de algo lo que se llama JDK Aquí, como puedes ver, dice que requiere JDK, que está en la versión 17 plus, y puedes usar también 21 y 23 Entonces, ¿dónde lo descargas? Para poder hacerlo, vas al sitio así. Y ahora haces clic en las otras plataformas y versiones porque podrías estar usando un sistema diferente. Entonces aquí puedes elegir el sistema operativo que estás usando porque estás usando Windows y solo vas a elegir Windows. Y la versión que debes elegir es que está aquí, ¿verdad? Elige el que sea estable, que siempre se declaran como LTS que significa soporte a largo plazo, ¿de acuerdo? Y porque necesitamos JDK, vamos a elegir JDK Y además, como pueden ver, tenemos, porque estoy usando Intel, voy a usar esta versión aquí. Y solo pulsas este botón y solo esperas hasta que se vaya a descargar. Entonces es hora de la instalación. En primer lugar, es necesario instalar JDK, así que haga doble clic en él, y luego presione siguiente y asegúrese de leer el acuerdo de licencia y luego siguiente y luego siguiente, y es muy importante que tenga todas las cosas aquí configuradas como se instalarán ¿Bien? Si lo tienes así, por favor, ponlo así. De lo contrario, podría haber problemas para encontrar el JDK por netbins. Todo bien. Terminemos la instalación, y ahora es el momento de las ganancias netas. Así que haz doble clic en él. Y ahora, como puedes ver, se está configurando el instalador y te están preguntando qué quieres instalar aquí. Entonces puedes personalizarlo porque no vamos a usar Java, por ejemplo, solo puedes desmarcarlo Es bueno elegir PAgB porque podría haber una posibilidad de que vas a conectar Java Scret con página B, y simplemente golpear siguiente Y claro, recuerda leer el acuerdo, haz clic en Siguiente. Y porque instalamos un JTK, lo tenemos aquí. Así que ahora haz clic en siguiente. Instalar, y ahora es el momento justo de esperar. Después de instalarlo y hacer clic en Finalizar, solo necesita abrir Net Bins. Y a medida que avancemos, aprenderás a crear tu primer proyecto y mucho, mucho más, claro. Y estoy aquí para ayudarte durante este viaje. Entonces, si tienes alguna duda, no dudes en preguntar. Siempre estoy aquí para apoyarte. 3. ¿Qué sabrás después de este curso? ¿Para qué se usa JS?: Hola, hoy, te diré qué es JavaScript y por qué vale la pena aprender. JavaScript es un lenguaje de programación para navegadores web. Entonces, por ejemplo, para Fox Google, Cron, etc., puedes crear en él un código, que se llama script que se puede ejecutar en el visitante de la computadora de tu sitio web Lo que significa que cuando termines de cargar el sitio web, así que vamos a refrescar esto. Aún puedes acceder a elementos en el sitio web, y puedes cambiarlos, ¿verdad? Entonces por ejemplo, cuando tenemos aquí una galería con Tamnes con estas miniaturas aquí, como pueden ver, cuando estoy usando el mouse sobre una de esa imagen, La imagen aquí, la imagen principal se está cambiando Y es muy útil porque ahora no necesitas ocupar tanto espacio en tu sitio web, y puedes mostrar el producto en la versión más grande muy fácilmente, ¿verdad? Como puedes ver, esto está mejorando la experiencia de usuario en tu sitio web. Y además de esto, como pueden ver, tenemos aquí un tooltip, que está dando información adicional sobre cada una de esta imagen Eso es muy genial, y está mejorando la experiencia del usuario. HTML es responsable del contenido del sitio web, CSS es responsable del diseño, y JavaScrip es responsable reaccionar a las acciones del usuario y hacer cosas con HTML y CSS en el lado del usuario después de terminar la descarga de Normalmente, sin JavaScript, no podrías hacer nada en la computadora del usuario. Porque después de conectarse al servidor y descargar el sitio web, el usuario ya no está conectado al servidor. Es sólo en su computadora. Eso es todo. Podrías cerrar la conexión. Aún tienes acceso a este sitio web. Así que se puede utilizar el script Java o también muchas otras cosas. No sólo galerías con halinos. Se puede crear algo lo que se llama paneles deslizados. Se pueden crear cosas como transiciones entre imágenes imágenes que están cambiando cada segundo, lo que se denomina panel de presentación de diapositivas. Puedes usarlo, por ejemplo, en páginas web de tiendas donde puedes mostrar muchos productos en un solo lugar pequeño. Puede crear promociones y muchas otras cosas que hacen que tu experiencia de usuario sea mejor. JavaScript es necesario para convertirse en desarrollador front-end que es responsable las cosas que se hacen por el lado del usuario, ¿verdad? Imagina una situación como esa en la que tienes un reloj en tu sitio web. Se necesitaría cada segunda solicitud desde el servidor y nuevo valor para poder actualizar este reloj. Con JavaScript, todo se ejecuta por el lado del usuario sin volver a conectarse constantemente al servidor El script Java se puede utilizar para actualizar el contenido de su sitio web, y colocar una D? Se puede, por ejemplo, cambiar el tamaño correcto y se puede mostrar algo? Puedes crear una punta de herramienta junto a con un di. Puedes, por ejemplo, cambiar el atributo source de la imagen aquí, puedes hacer algún tipo de animación. Todas esas cosas se hacen en JavaScript. Cambiar las cosas dinámicas que se presentan en tu sitio web es algo que se hace en JavaScript. Pero, ¿qué es más? Existen bibliotecas avanzadas para JavaScrip como Ajax que permite conectarse a la base de datos y recuperar información sin recargar el recuperar información sin recargar Por ejemplo, cuando vamos aquí, como pueden ver, ahora cuando hago clic aquí, no estoy recargando mi sitio web Solo estoy cambiando este lugar aquí, y todo ese contenido se toma de la base de datos de PHP y MS QL Si aún no lo sabes, no te preocupes. Solo recuerda que incluso puedes usarlo con bibliotecas avanzadas para crear sitios web literarios que no recarguen refresh No hagas algo así, Refrescante. Eso lleva mucho tiempo. Entonces esto es muy, muy impresionante. También puede usar el script Java para prevalidar la entrada en formularios. Como, por ejemplo, si la contraseña era lo suficientemente fuerte o el correo electrónico use derecho y así sucesivamente, antes de enviar estos valores al servidor. Puede mostrar cuadro especial informando al usuario lo que está mal en el formulario sin restablecer sus valores en forma Hace que la experiencia de usuario en su sitio web sea mucho mejor. Están enviando sintaxis JavaScript, bueno, te permitimos también entender mejor algo lo que se llama J query framework. J query framework es una gran biblioteca de útiles scripts Java, plugins, funciones, cosas que te permiten escribir menos código haciendo mucho más. Ya hay muchas cosas hechas que solo puedes hacer. Pero para poder entender J query, que entender también Javascript, que sepas lo que está pasando ahí, ¿verdad? Después de mi curso, entenderás todos los componentes avanzados de JavaScript, por lo que podrás usar cualquier biblioteca como desees. Entonces conoces JavaScript perfectamente. Este es el curso más organizado pero Javascript de Principiante a Experto en todo Internet. Te llevaré paso a paso desde la teoría hasta ejemplos prácticos como Deslizadores de imagen y animación Si tienes alguna duda, no dudes en preguntar y des en la lección, muchas gracias. 4. Crear proyecto: Hola, amigo mío. Hoy vas a crear tu primer proyecto en el Net Beans y al mismo tiempo sabrás estructurar tus proyectos por lo que va a ser más fácil de mantener, Ok, entonces ¿cómo hacerlo? En la esquina izquierda, como puedes ver, tienes algo así como archivo. Estás haciendo clic entrando, luego vas al nuevo proyecto. O puedes usar el atajo Control más Shift plus n. y como puedes ver, ahora, tengo este menú aquí que podemos usar. Todos los atajos se presentan al lado derecho del elemento del menú. De acuerdo, entonces vamos a mantener Nuevo Proyecto. Y como se puede ver en el lado izquierdo, tenemos algo bueno como categorías. Y bueno, aquí tienes carpetas gratuitas, HTML5, PHP, muestras sin muestrear. Como pueden ver, tengo algún tipo de proyectos de muestra creados por otras personas. Debe haber algunas demos, demostración de algún tipo de bibliotecas para JavaScript y otras cosas así. Se puede jugar con ellos. Se puede ver cómo la gente crea proyectos, proyectos más grandes, cómo usan algún tipo de bibliotecas. Pero nos enfocaremos en HTML5. Nota PHP, porque no es un curso sobre PHP, HTML5, pero no es maldición sobre HTML5, podrías pensar también eso es cierto, pero HTML fue creado para forbear, todos los navegadores solo para navegadores. Y JavaScript también se crea solo para navegadores. Para poder ejecutar el código JavaScript, hay que conectarlo con el HTML5. Entonces tienes que crear una aplicación HTML5, ¿de acuerdo? Y además de estos, HTML5 dio vida a muchas herramientas nuevas que se denominan funciones y que también son muy útiles. Por lo que vamos a crear aplicación HTML5. Se puede elegir la aplicación HTML5 con fuentes existentes. Si tienes fuentes existentes, usa la desorción. De no ser así, usa el primero aquí. Y ahora hacemos click siguiente, como puedes ver aquí, ahora tenemos que escribir el nombre del proyecto. También puedes elegir otro look, buscar ubicación si quieres cambiarlo. Pero Bueno, en mi situación, sólo estamos nombrando, por ejemplo, JavaScript Angular nombre del proyecto. Puedes teclearte lo que quieras. ¿ De acuerdo? Por lo que voy a dar click ahora sólo terminar. Y esto es, se puede ver creado para nosotros un HTML5, que tiene bienes aquí, algún tipo de comentario y título y metaetiquetas más audaz. Y bueno, ahora tenemos que subir aquí nuestro archivo JavaScript, que servirá en la próxima lección. Pero en esta lección, también crearé una estructura para nuestro archivo JavaScript. Entonces, ¿cómo hacerlo? Voy a llegar aquí, yo, click derecho click aquí, y luego mu. Y como pueden ver aquí, tenemos muchos tipos de archivos que podemos usar. Podemos crear carpetas. Entonces por ejemplo, carpeta OKC. Y aquí puedo escribir el nombre de carpeta, y ahora lo llamamos JavaScript js, ¿verdad? Estos son atajos. Y bueno, ¿por qué lo estoy haciendo? Quiero mantener todos los archivos en una carpeta que están conectados a archivos JavaScript. ¿Por qué? Porque, bueno, tal vez al principio sólo tendrás 1-5. Pero lo cierto es que en los proyectos más grandes podrías tener muchos archivos JavaScript. Y si bien podría tener también muchos HTML5, PHP 5S, alguna plantilla phi, algunos archivos de configuración, algunos archivos CSS y otras cosas por el estilo. Y entonces será difícil localizarlos, ¿verdad? Será difícil mantener todo este código. Por lo que es buena idea mantener los archivos JavaScript en una carpeta especial, y así es como lo hacemos. Lo mismo que haces cuando tienes CSS, ¿verdad? Tienes la carpeta CSS especial donde guardas tu archivo CSS. Entonces aquí vamos a guardar archivos JavaScript. Y con el fin de crear un archivo JavaScript, haga clic aquí y haga clic derecho Nuevo, y luego use el archivo JavaScript. Cuando lo hagas, ahora solo puedes escribir el nombre de tu archivo JavaScript. No es necesario agregar la extensión ab.js, que es para JavaScript. Entonces ahora podemos teclear, por ejemplo, regla, lo que quieras aquí, ¿verdad? Este es un nombre de archivo, pero bueno, debe comenzar desde la letra baja voluntad, todo debe ser bajo, bajo, minúscula. De acuerdo, así es como deberías, deberías llamar a tu guión. Ahora vamos a hacer clic en terminar y tienes buena. Ahora el archivo Javascript, como puedes ver, está vacío. Se puede, se tiene algún tipo de cambio esta distancia tenía análisis como ese. A esto se le llama comentario. Hablaré de ello en la siguiente lección. Lecciones. Entonces este nuestro primer archivo JavaScript, y tienes que ahora solo conectarte a él desde el HTML. Y lo haremos también en las próximas lecciones. Pero lo que quiero decir también en esta lección, bueno, ya sabes, podrías crear esto, todas estas cosas manualmente. Mira cuando vayas aquí a las propiedades, como puedes ver, podemos ir a la carpeta del proyecto. Yo lo copiaría, y ahora lo pegaré aquí. Y como puedes ver cuando vas aquí al HTML público, tenemos aquí el archivo de índice CSS, JavaScript e índices. Podríamos crearlos solo creando TextFile y guardando jazzy como HTML o como el archivo Javascript. Esto es sólo típico. Nada más, nada archivos especiales, ¿verdad? Puedes crear lo que quieras pliega y simplemente se ejecutará. Ya puedes abrir esto. Piensa bastante fácil. Para hacerlo. Es solo hacer doble clic en él. Y como puedes ver, se abrió dentro del navegador web como puedes ver. Y está funcionando porque es un HTML5 y miedo de JavaScript va a ser conectado por nosotros en la próxima lección. Y también se va a ejecutar en nuestro navegador, ¿verdad? No es necesario agregar un servidor especial para ello. Simplemente se va a ejecutar dentro de tu navegador. Y no necesitas usar la red significa que puedes usar lo que quieras. Estos la estructura de muestra, así es como se crea un proyecto. Y bueno, los invito a la siguiente lección. Muchas gracias. 5. Atajos de uso de desarrolladores de web: Hola, todo el mundo Hoy te mostramos los atajos más útiles utilizados por los desarrolladores y programadores Web . Bueno, todos estos autos cortos te van a ahorrar mucho tiempo fuera de tonos. Entonces es como debe saber cosas. De acuerdo, hay que conocerlos para ahorrar mucho de tu tiempo. ¿ Por qué desarrollar sitios web o programación? Conoces la planta de situaciones donde tienes que mover tu rumbo o así Irán y en lugar de ello puedes usar el atajo porque tienes buen teclado estás escribiendo en Cuba, y luego, sabes que es difícil mover las manos a la boca. Está tomando tiempo y siempre tal vez 12 segundos. Pero imagina que vas a pasar mucho tiempo escribiendo el abrigo. Te va a salvar cada día. Por ejemplo. Sé 10 minutos y cuando lo multiplicas que 10 minutos por año muro, entonces tienes montones de tiempo, ¿ verdad? Mucho tiempo ahorrado al conocer estos atajos. Entonces Ok, empecemos nuestra aventura. Cómo guardar el fuego al instante. Ya sabes, tengo hasta un hábito ahora mismo así cuando haga algo, solo contaré mas seguro usar el atajo así. Y yo solo digo al instante, no te tranquilizarás cuando, por ejemplo, por ejemplo, veas los siguientes videos que he estado guardando al instante después de cambiar algo. ¿ Por qué? Porque somos tú sabes que no, cada editor. Ah tiene algo como, por ejemplo, ahorrar Kelly automático. Cuando pierdes tu poder por ejemplo y puedes perder tu trabajo Eso es buena idea tener hábito de hacer algo así. Y además de éstos, hay que guardar la final para ver qué cambio derecho, por ejemplo, en el hermano. Entonces solo estoy ahorrando instantáneamente después de cada cambio, eso está justo por delante. Entonces es muy bueno. Un buen tiro al lado de nosotros. Consiguió nuestro país más C y parcelas de contador. V bien, puedes copiar y pegar cosas. Por ejemplo. Yo quiero tomar esta cosa y quiero dar click enter y contador de parcelas V y bueno, como pueden ver, acabo de cooperar. Entonces te va a ahorrar tiempo cuando quieras copiar algo y cambiar, por ejemplo, o algo así. Aquí y luego otra vez, ¿eh? Yo sólo quiero ponerlo en bomba aquí. Como pueden ver, llamé por una empresa que venció más rápido porque no quería hacer algo como ese contador más e. y luego no usé la boca. Usé el atajo final si un rey en el teclado y luego pude entrar encuentro más V Así que de nuevo no sonrisas. Lo hice un poco más rápido. Y ahora mira, lo haría aún más rápido. Usaré el turno más país de origen más C y entraré contador más V a la derecha, Y ahora más rápido Bom bom bom bom bom. Como puedes ver, está tomando muy poca cantidad de tiempo, ¿ verdad? En lugar de hacer algo como Mm ah Mm. Correcto. Estás ahorrando leyes del tiempo haciendo cosas así. De acuerdo, ahora es una gorra. Se utiliza la tarjeta, por ejemplo, cuando se quiere dedo del pie cortar algo. No quiero esto titulado aquí. Yo quiero cortarlo, y quiero que esté aquí. Correcto. Um, es como una copia de scouting cuerpo conseguir del lugar. Estamos cumpliendo, pero bueno, ya sabes, esto no es buena idea tener aquí el título. Oh, Dios mío. Cometí un error. Entonces, ¿cómo hacerlo? Bueno, tengo que cortarlo otra vez. Ahora puedo usar la gráfica de contador, z, y va a deshacer las cosas que hice que son críticas y útiles. Tiburones consiguieron también y se puede leer la acción. Entonces, por ejemplo, bueno, me equivoqué y otra vez para poder volver a esta situación otra vez, ¿no? Usando estos contador plas y siguiente muy cool contra plus f Te confinaron cosas como puedes ver . Por ejemplo, quiero Tosi donde escriba algo así. ¿ O dónde está Dave? Al instante puedo encontrar las cosas bien. Entonces country plus f country plus a va a vender como todas tus peleas de, por ejemplo, a quien quiero solo contrarrestar más una esta cosa políticas de control ocupándolo. Y quiero crear un nuevo Faisal nuevo html cinco atajos HTM. Y yo voy a cooperar aquí. ¿ Verdad? Está bien, practiquemos. Ah, el atajo que tenemos. Just Se por ejemplo, quiero crear una hora ordenada, así que voy a crear algo así. Bueno, yo quería al final. Entonces, ¿cómo hacerlo? Podría Selig así, pero podría También podríamos usar el atajo que se presenta después como, por ejemplo, afeitado plus Y así cómo cuando hago algo que ella plus y voy a seleccionar de los quilates de la cosa parpadeante hasta el final off line Y ahora solo lo estoy cortando porque no quiero que esté aquí Contra más X y no lo necesitaré El fin del fuego. Entonces aquí y yo solo estoy combinando. Y como puedes ver, ahora no está en buen lugar. Entonces estoy usando la parte superior, ¿verdad? También puedes usarte. ¿ Puedes parar a inventar algo que puedas usar? Ovejas se detendrán Si lo hiciste Did, por ejemplo, algo así todo el tiempo. No está bien, ¿verdad? Entonces bam bam! Y yo soy los derechos construidos. Entonces sólo ah, acostumbramos a nuevos atajos, ¿verdad? Así, por ejemplo. De acuerdo, así que vamos ahora a usar el al menos artículo. Entonces voy a salir las cosas como menos yo 10 y cosas así y se puede ver que no está funcionando bien. Estoy usando el contador más Z. quiero que todas estas cosas sangría un poco más, así que solo voy a seleccionar todas estas cosas y estoy usando top. Como puedes ver ahora están sangradas un poco más y quiero al menos artículo un poco más lejos. Así que así. Y ahora quiero lo que quiero al final. Artículo menos como ese. Yo quiero esto a todas estas líneas. Aplícalo a todas estas líneas cómo hacerlo bastante rápido. Puedo seleccionarlo y lo puedo cobre como puedes ver. Así, por ejemplo, para que pueda hacer algo así como bálsamo bomba. El problema es que, como pueden ver, tenemos la parte superior aquí. Entonces probablemente sea buena idea que bajarlo a algo así, Así que no necesitamos todo el tiempo. Ah, haz las cosas inventando y borrando. Entonces vamos a algo que y luego simplemente bajemos. Bomba casa bomba casa casa, hogar, hogar, hogar, hogar, hogar, hogar. Estoy usando la llave de casa. Correcto. Entonces voy a la mendicidad fuera de la línea de mm así. Y bueno, lo hice un poco más rápido, ¿verdad? Por ello. Y ahora quería la respuesta. Sólo me llevo esto en vestido, escribiendo eso Y así estoy al final. Bomba, bomba, bomba bomba. Um, y lo hicimos un poco más rápido, ¿verdad? En cambio, de hacerlo. Efectúe estos simplemente lento. ¿ De acuerdo? Y ahora solo queremos internet bom bom. Y hemos hecho nuestro trabajo bastante rápido. Por supuesto que va a ser así, por lo lesionado Job escapó más tarde, pero así funciona. Se puede, por supuesto, veces querer copiar la línea y bueno, se puede hacer de dos maneras. Puedes hacer cosas como casa sin turnos y contador más e e e ingresar ya que puedes ver qué país más cuota como puedes ver. El problema es que a veces tienes a los indios porque, bueno, acabo de hacer un hogar y pero escribo dos veces casa. Después fui al final y al lugar y luego al principio, y por ello compilé el final. Y también Pero también está tomando algún tiempo, ¿verdad? Puedes hacerlo un poco más rápido usando control más Chief y Roky down. Se está poniendo ahora en combinar todas estas cosas hechas Bastante impresionante, ¿ verdad? Entonces así es como lo hacemos. ¿ Quieres copiar las cosas? Improbable. No tendrás este atajo en cada editor posible. OK, esto no está disponible en todas partes y lo siguiente es Bueno, quiero, Por ejemplo, hacer algo en la siguiente línea. Estoy borracho. Simplemente hago clic en turno más entrar. Como puedes ver ahora, no necesito usar el ratón para ir a este lugar. Yo sólo puedo cambiar fue entrar y estoy aquí y sólo puedo escribir en la siguiente línea. No necesito a Teoh, ya sabes, hacer otra cosa después. Hay un atajo de SoCal para saltar desde el principio y hasta el final hasta el final del control de lucha . Además ven y controla Plus y puedes fuera de curso también, por ejemplo, seleccionar cosas desde el principio hasta el final. Entonces, por ejemplo, estoy aquí, por ejemplo, correcto. Y quiero eliminar este comentario Tú como hacerlo. Bueno, podría hacerlo por turno y haciendo algo así usando las teclas de flecha. O podría hacer algo como turno más control más casa. Y ahora estoy al principio del fuego on podría usar el turno para de seleccionar una línea con el Roki abajo y luego lo hizo bastante impresionante. ¿ No está encendido? Bueno, como puedes ver ahora, sólo necesitábamos que esta cosa pudiera ir control más jefe. Uh, y como puedes ver ahora, Arkansas, como todas estas cosas hasta el final, solo podría copagar hice otro archivo, algo así de bien Cuando vas al guión, puedes también nota que hay cosas como fragmentos fríos y puedes hacer algo como, por ejemplo, por ejemplo, escribir una L y luego usar el encendedor tabulador. Y esto puede ver ahora al instante generó para nosotros algo de frío. Hay un montón de cosas como esa que va a ver está generando para nosotros un poco de frío. Hablamos de este frío más tarde, y Pero si quieres saber más sobre fragmentos, puedes ir a opciones de herramientas a los lugares de CO 10 que puedes ver Ahora, aquí puedes pelear cosas sobre HTML. Puedes encontrar cosas sobre JavaScript, y bien puedes crear en tu también algunos fragmentos. Y también te va a ahorrar tiempo. No todo el líder dijo snoopers, pero como puedes ver, si uno de ellos tiene algo así te va a ahorrar tiempo. En ocasiones se quiere, por ejemplo, también seleccionar Nope, sólo una carta más tarde mediante el uso de la nave y Roky que desea seleccionar? Por ejemplo, Full David, una vez voy a usar el contador más turno y la flecha que izquierda derecha, como puedes ver, entonces estoy seleccionando mundo uno por uno. Entonces se puede, por ejemplo, cómo quiero contenido de justicia. De acuerdo, Firma haciendo algo así. Bam, bam, bam, bam! Plásticos de mostrador. Y no sé si todos los días más bien, puedes bombardear y se ha ido Y su bolsa Porque yo uso el tipo de sangre Ve bien. Se pueden utilizar atajos para aumentar bien para disminuir el tiempo necesario para el desarrollo web . De verdad te recomiendo bien, practicar todas estas cosas para, por ejemplo, imprimir todas estas cosas. Ah, en tu empresa en tu impresora para que puedas, ya sabes, revisarlos, aprenderlos. Y después de un tiempo notarás que estás ahorrando mucho tiempo por culpa de ellos. De verdad los recomiendo. Esta fue una lección extra y que tengas un buen día 6. Inde script en el sitio de: Hola, amigos míos. hoy te mostraré cómo incrustar Java. Salta scripts en tu página web y al mismo tiempo te mostraré cómo hacerlo de la forma en que mega sitio web cargamos realmente, realmente más rápido. Incluso puede ahorrar de 1 a 5 segundos. Depende de lo grande que sea tu sitio web descargando saliva. Por lo que es muy importante hacerlo correctamente. De acuerdo, entonces, ¿cómo hacerlo? Puedes insertar tu abrigo en murciélago al HTML interna o externamente. Te mostraré ahora el camino de internet ¿Cómo hacerlo? Vas a usar el guión, hablar así. Y luego entre la charla de apertura y cierre, solo escribes el guión. Entonces, por ejemplo, cada tipo de alerta y luego simplemente escribiré que Este es el script más sencillo. No importa. ¿ Qué es? ¿ Cuál es esa función? ¿ Qué es este padre? Es lo que es que Aled Cosas por aquí que punto y coma otras cosas como esa. Hablaremos de todas estas cosas más adelante. Simplemente piensa en esto es un guión que va a alertar a la persona en la página web y decir prueba . Está bien. Hola. Y ahora cuando estemos al pendiente. Cuando usamos esta sensación, queremos elegir el navegador. Estoy tratando Firefox y juego griego nocturno. Como pueden ver, hemos llegado aquí. Hola? El ventanal. ¿ Piensas hola? OK, y no concede. Entonces puedo ver el contenido fuera de nuestras webs. De acuerdo, así es como funciona. Tenemos buen guión que está haciendo algo así, y eso es hacerlo internamente, ¿no? También puedes poner este mechero de creep. Entonces, por ejemplo, aquí y hay algunas diferencias entre porque fuera de él. Pero primero, pensemos incluso en pensar en poner algo internamente Estas situaciones muy raras . Cuando se quiere hacer algo así, se quiere hacer cosas así muy raramente cuando se quiere poner algo en la proyección ese lugar exactamente y el único en esa situación. ¿ Por qué? Porque cuando haces algo así, ese sofá no va a costar. Este es el mundo cobrado. De acuerdo, No va a entrar en el efectivo, que es un recuerdo temporal fuera de tu navegador. Y por ello, este oro se va a cargar cada vez que el usuario vaya a otro lado de tu sitio web, así que va a ralentizar tu sitio web eso Muy bien, así que es buena idea tenerlo en un solo lugar. Entonces, por ejemplo, como aquí en, Bueno, lo hacemos así. Entonces queremos que el abrigo esté aquí. No queremos que sea así. Y queremos importarlo cómo hacerlo así, podemos hacer algo así como escribir algo script, y luego podemos usar los atributos como se ven desde lo que significa fuente. Y aquí empatamos la fuente. Entonces, por ejemplo, así. Y ahora acabamos de importar esta pelea aquí. Y cuando lo refresquemos, como pueden ver, todavía podemos ver Hola aquí. Brady tiene razón. Entonces está ahí forma externa de hacer esto en HTML viejo. Tuvimos que escribir tu también algo como tipo y decir que es ese script JavaScript por pero por defecto pliegue. Ahora el script es javascript de escenas el html cinco. Ok, no necesitas, um, um, pensar en cosas como ese animal. Pero hay un oleaje todavía un pequeño problema. ¿ Qué es? Bueno, mira esto. Cuando realmente me encanta este sitio web contra hola Y luego cuando hago clic. OK, se carga el contenido de nuestro sitio web Cuando pongo esto aquí. Como puedes ver, nuestro contenido ya está cargado Y mientras puedo ver entonces Hola? ¿ Por qué? Algo así pasa porque, bueno, te diría que sabes exactamente cómo está cargada tu arma. En primer lugar, tú como usuario te conectarías a tu sitio web y luego descargarías tus archivos HTML. Entonces por ejemplo, index dot h dot html Y luego algo Lo que se llama una parte, señor, simplemente procesamos e interpretamos todo por dentro. Entonces, por ejemplo, habla cuando se encuentra con algo como script, deja de ejecutarse totalmente mientras se analizan otras cosas. Entonces si el guión está aquí, irá dedo del pie html. También, es un documento html. El jefe también, tengo aquí información adicional de nuestra de nuestra página web fuera de estos sitios web. Ah, un título. De acuerdo, entonces tengo dos muertos. El titulado para nuestro uso. Su bien. Oh, está usando el auto Siéntate así. Vieux puerto. También, esto es para Web responsive diseño Web y oh, guión. De acuerdo, Entonces antes de ir aquí, debería ir y ejecutar todo lo que dentro de él y luego ir al balón. Esta sección y ahora podrías ser como Hey, pero estos sólo una línea no va a ralentizar. No importa en esa situación si el sitio web era así. Está bien. Pero ahora imagina que tu sitio web es realmente grande. ¿ De acuerdo? ¿ En serio? Realmente Be There es, como 500 de abrigos y no tienes sólo un guión. El oscuro alegre que tienes aquí como 50 de ellos. ¿ Qué pasa? Wow. Imagínese ahora algo así que iría a todos estos guiones y luego después ejecutar todas las cosas dentro, cargaría lo sucedido. ¿ Qué pasaría? ¿ Qué? Tu usuario simplemente no vería casi nada, ¿verdad? Y después de cargar todo, entonces vería el contenido de la página web que es muy malo, pan correcto para nuestros usuarios. Simplemente saldría probablemente de nuestra página web. No podemos permitir algo así. Por eso la mayoría de la gente acaba de sacar los guiones aquí. Pero hay un pequeño problema porque cuando pone scripts aquí, no los descargamos al instante. ¿ Verdad? Entonces cuando el contenido de la página web es bajo que se va a cargar, ¿ verdad? No es tan malo la mayoría de las situaciones, pero bueno, imagínense que sus manuscritos también así entonces lo son. No sé eso un poco más tarde. Para que eso no sea bueno, ¿verdad? Y a veces los guiones están haciendo algo con el diseño de tu sitio web. Entonces están cambiando algo, las apuestas de calorías, otras cosas así. Están moviendo algo a otro lugar. Y ahora imagina que el usuario con el script aquí solo vería el contenido de tu sitio web. Y este contenido va a cambiar. Y sus ojos, correcto. Simplemente miraría este sitio web y va a cambiar cuando se vaya a cargar cada una de esa pelea de chicos geniales . Eso también es malo. Entonces Bueno, qué hacer, Cómo cambiarlo. Algunas personas pondrían algo asustar a algunas cosas aquí. Sí, pero porque fuera de html cinco, tenemos algo. lo que se le llama un nuevo atributo con esto, que se llama, creo, que significa S y compinches. Yo escribiría este mundo aquí como Syncronys, ¿verdad? Y bueno, significa que el guión se va a cargar en el mismo tiempo cuando u otras cosas se van a cargar, ¿ verdad? No va a esperar a que se ejecute el script, que es por defecto cómo los navegadores están cargando tu sitio, y es que está bien, solo estás poniendo esto y todo funciona bien. Pero porque si tienes más de una pantalla, entonces tienes algo así. saltó uno saltado directamente a libre de guión. Y por ejemplo, um, tu usuario descargará este primero se va a ejecutar primero. No se va a ejecutar entonces, como días. Entonces días. Después éstos, luego bomba, bomba, bomba, bomba. Correcto. Por ello, es buena idea usar el mundo como diferir, que es lo mismo que S N coreanos, pero va a hacer que se ejecute uno por uno. De acuerdo, va a esperar a que los guiones se ejecuten en ese orden. Entonces cuando lo hago así ahora, puede ver cuando recargo estos sitios web, podemos ver que el contenido está cargado y podemos ver el Hola, Derecho. Está funcionando así Ahora, si elimino este mundo como puedes ver, no obtenemos contenido. Tenemos contenido después de llegar a su punto máximo. De acuerdo, entonces esta es la mejor solución. Puedes tener que hacer algo así y te sugiero que tengas todo pelea bien. Todos los gritos en fuente externa, justo en porque, bueno, es más fácil mantener tu código que bien. Tienes el raspado Java, otro vapor disparado. Otra peleas de es más fácil de mantener. Ya sabes, ¿dónde están tus guiones? Va a ser cobrado. Por lo que significa que tu sitio web va mucho más rápido en Dwell. Ah, también hay que recordar que no te pongas a crear demasiados archivos javascript porque si tienes muchos javascript cinco bien, es más fácil mantener tu proyecto. Pero el sitio web también cargará más lento porque si tienes muchos JavaScript, si ojos y h el protocolo http te está permitiendo solo descargar a punto de pelear a la vez, significa que van a ser muchas peticiones a tu servidor cuando el usuario esté visitando sitio web en debido a ello. Bueno, eso porque las solicitudes son las cosas más lentas porque tienes, sabes que el usuario tiene toe connect al servidor, donde está el sitio web y luego regresa. Esto es algo puesto está tomando más tiempo. Y cuando haya manejado de nosotros, guarde archivos, por ejemplo ocho. Tienes, como, como, cuatro veces, algo así, que es tal vez a veces cuando el Severus muy lejos. Un segundo solo para, ya sabes, no descargar, sino solo para conectarte. Por lo que está tomando mucho tiempo y porque el sitio web de video se va a cargar más rápido, por lo que el mejor sitio web será solo un javascript lejos. Por lo que será genial si tuvieras manejo de, pídalo peleas y luego para mantener tu Cody's aquí y luego al final, cuando quieras ponerlos en el servidor Web, quieres conectarlos. Pero, ya sabes, conectar algo así cada vez que cambias algo, Lo que hacemos lleva mucho tiempo tanto. La mayoría de la gente no lo hace. Pero puedes usar algo que se llama gran jurado s, que es un encargado de tareas que lo haría automático California. Tengo el curso sobre esta cosa también. Pero si quieres bien, puedes hacerlo. También, algún manual, ¿verdad? De acuerdo, entonces lo mejor pensar demasiado inteligente es poner el guión aquí en la cabeza porque será la primera prueba. Pero hay que recordar poner esta clave estos atributos de lo contrario y no será la casa y bueno, se puede comprobar. Cómo se soporta porque no, es de html cinco. Puedes ir a ello no puedes usar dot com y teclee tus Essen Cronje. Y aquí puedes escribir tu país y, como puedes ver cuando vamos, por ejemplo,a por ejemplo, Internet Explorer. Um, bueno, expertos en Internet seis y siete no se apoya ocho y nueve. Como puedes ver, los cinco zorros de Firefox no son compatibles. Pero cuando se agregan todos estos números, depende. ¿ A dónde te irás? ¿ Verdad? Probablemente sea como 23 personas en 100 viniendo a tu sitio web que no sean compatibles. Pero debes recordar que estás ayudando a todos los demás usuarios a cargar tu sitio web más rápido. ¿ Verdad? Bueno, verán tu página web y la forma en que lo pusiste aquí, Correcto. Pero harás disfrutar de tu sitio web más para los usuarios con que tú con los nuevos hermanos. Creo que ese usuario que Devil Brothers sabe que no conozco el disfrute como un caliente Ah, el Internet como los chicos con el nuevo hermano. Estos les haces cambiarlo más rápido. Tu página web. Vamos a cargar de todos modos. De acuerdo, eso va esa lección. Muchas gracias. 7. Conceptos básicos de JavaScript: Hola. hoy te mostraré los conceptos básicos de JavaScript. Para entender JavaScript, necesario saber cómo se ejecuta todo. Bueno, esta cosa de aquí es un guión. Se trata de un programa. ¿ Cuándo qué es un programa? Bueno, un programa es un set off instrucciones que deben ser ejecutadas por una computadora. De acuerdo, entonces y eso es todo. En nuestra situación, tenemos aquí algunas instrucciones, algunos espacios en blanco, espacios blanco son entra y aliado superior, es tuyo y espacios y otras cosas así. Y usar ese Coleman. Entonces todas estas cosas deben ser interpretadas por algo. El programa del del se llama la paquetería que está interpretando estas cosas y deben ser ejecutadas. Y todas estas instrucciones son ejecutadas por el navegador. Y, bueno, los ejecutivos del navegador ocluidos por la PC. Pero supero las computadoras personales, ¿verdad? Entonces todo lo que se va a ejecutar desde ella es muy importante de arriba a abajo. Entonces interinas cada ave que necesitas dedo del pie lee todo línea por línea, y necesitas recordar el devi um hey, chametz como si fuera tu redil. De acuerdo, porque, bueno, todo aquí, la sintaxis. Entonces la forma en que escribas, él va a ser interpretado por el paquete. Necesitamos dedo del pie ¿verdad? Exactamente. En lenguaje Hiss, ¿verdad? De lo contrario, tendrás problemas. De acuerdo, así que tratemos de explicar cómo llegó esto aquí va a ser interpretado por paquetería. Imaginemos que soy parte señor. De acuerdo, así que estoy en la cima. Acabo de cargar el guión Dog Js y voy a ejecutar esta pelea. De acuerdo, así que guau, aquí hay una contrasta. Está bien. ¿ Qué sigue? Ah, aquí tienes un asterisco, hijo. Ah, así que todo después de esto no me va a ejecutar hasta que me encontré Hasta que me encuentre con el siguiente asterisco y la contrasta, esta cosa es un resfriado. A esta cosa se le llama común. Y esta cosa no se va a ejecutar. Se necesita si quieres, como dice Coleman algo correcto? ¿ Quieres agregar algo hoy? Fuego que no se va a ejecutar. Hablo de la tarde más tarde y son como, tienen de alguna manera espacios que no me importan. Esto es y ¡whoa! Aquí hay algo. Aquí hay un trabajo clave. Es un agua que. Es palabra importante que significa algo para mí en mi idioma. Soy javascript paquetería, y este mundo representa variable aquí son die bit. Entonces este es un lugar que puede Muy. Y es etiqueta su nombre es X y yo la comida ahí mediante el uso de este Hein cinco. Entonces puse cinco en memoria y esta es una instrucción. Esta instrucción porque la terminé con Sam ical cada instrucción, cada uno que sabes, creo que tienes que hacer creo que vas a pensar que le dices a tu paquetería que haga Se llama instrucción, verdad? Y se debe terminar con la columna Sani. Ah, y entonces tienes buena siguiente variable y luego le das espacio en blanco y luego dices: Oye, Oye, quiero alertar del dedo del pie a la gente en nuestra página web que son 11 huevos correctos, además de por qué cinco más seis es 11. Entonces esto va a ser interpretado por mí y luego ejecutado por los sujetadores. Um, porque todo es leer cuerpo adecuado. Podría hacerme palos bien Así. Bueno, mira aquí al instante. Tengo buen mensaje de que está mal. Algo aquí y que se puede ver ahora no está funcionando aquí. Conócelos. Cuanto más así no puedes montar nada pasando, ¿ verdad? Tienes que montar en el idioma solo pudimos JavaScript y aprendimos la sintaxis de Java saltando. Siguiente lección. Hablaría de la función vory del licor, otras cosas, mucho más. Entonces no te preocupes. Ahora mismo, sólo te estoy diciendo cómo se ejecuta todo. Y mira, ahora hemos llegado aquí como columna Sammy, y yo te escribiría el Enter y Hugh Andrew y aquí y aquí y sentir con esta cosa. Grand, como se puede ver, se está ejecutando al instante como si nada hubiera cambiado. Si fuera persona, tendría problemas. ¿ Cómo funciona bien? Pero para el páramo, no importa. Incluso hacer espacios en blanco. Podrías tener todo en una línea, así que podemos. Incluso puedes significar si yo este JavaScript más tarde y no importa en absoluto, tendrás más pequeño, bien, bien, correcto, pero para ti con el fin de un apareamiento bastante fácil de cocinar, Clear tos habitual hacer espacios en algunos lugares. Entonces, por ejemplo, no hagas algo así porque es más difícil de leer más adelante. Es mejor si es así. Se puede omitir la mayoría de las veces en la calle Java. Nada, nunca lenguaje de programación. El semi columna. Por lo que la información de que esto era una instrucción como puedes ver sigue funcionando. Pero es buena idea colocar este semi colon aquí porque, bueno, es más fácil mantener tu abrigo. Es como, ¿sabes lo que estás haciendo bien? Y a veces puede realmente hacer algunos programas algunos errores. Entonces es buena idea dedo del pie. Exactamente correcto. Programas como yo. Verán próximas lecciones cómo hago el tabulador de cinta. Entonces los indios, ¿verdad? Ya verás cómo escribí para cosas como, por ejemplo, ejemplo, espacios porque el espacio aquí es importante. Pero el espacio aquí no lo es. Eso es algún tipo de convenciones. Y trata de simplemente escribir cosas como yo y tendrás un bonito claro llamado que a todos les encantará. ¿ De acuerdo? Y esto es muy importante porque tú como programador, trabajamos con gente después, ¿no? Y querrán leer tu abrigo. Y ya sabes, incluso tú si lees bien llamado después, por ejemplo, volver a tu abrigo después como yo sé un mes, incluso último, no entenderías todo lo que ahí tiene los programadores trabajan. Simplemente hace algo y luego te olvidas la mayoría del tiempo y bueno, es buena idea simplemente escribir las cosas correctamente. Bonito hermoso. Cuando son así. Acabas de volver a tu auto y al instante te reconoces. Recuérdete de qué se trata Was todas las cosas, ¿verdad? Acabas de llegar a tu cul De Luca lo hizo y Wow. De acuerdo, este mundo así. De acuerdo, así es como se ejecutan las cosas. ¿ Te acuerdas? Una línea por lote por uno de arriba a abajo. La mayoría de las veces hay algunos extra esperan X excepciones de las que hablaría en las próximas lecciones . Pero la mayoría de las veces es así. Entonces recuerda que bueno, hizo algo así como, por ejemplo, que tendrás problemas como no un número, porque no es uno por uno. Entonces cada vez que haces una música, algo no está funcionando. Sólo es tu culpa, Recuerda, Porque tienes que escribir en el trabajo lenguaje Oscar como donde se esperaba. De acuerdo, la zona. Buena lección. Muchas gracias. 8. Comentarios: Hola Hoy te diré cuáles son los comentarios y por qué lo necesitan tanto? Mira, se usan comentarios porque a veces no quieres ejecutar alguna parte de tu abrigo. Y como dije en la última lección, cuando hagas algo así, no se va a ejecutar. No va a separarse bien. No va a estar bien cuando tus paquetes vean algo así y luego solo esperará algo así. Entonces este es un comentario multilínea que no necesitas Asterix entre. Esto es sólo algo que se agrega por editor. Simplemente puedes escribir tus cosas y todas ellas no importa. Pero si no importan, ¿por qué los sumamos? ¿ Por qué? Porque bueno, mira, incluso aquí En la última lección, creé también comentario de una sola línea que no fue interpretado, Por qué edité porque quería decirte que sabes que variable significa variable. Entonces, ¿cuál es el propósito de esta común? Bueno, yo quería explicar algo, Así que si quieres explicar algo, deberías usar el comentario. Si quieres que tu abrigo sea más fácil de mantener, quieres usar una coma. Si quieres probar algo, quieres usar comentario. Mira, también quieres usar comentarios cuando quieras configurar escucha para tu, por ejemplo, JavaScript. Encuentra como puedes ver, para cambiar esta licencia reunir no necesitas ir a algún lugar, y no pudiste cambiarla para sumar a promedio de nosotros. Podría caer tu nombre en eso, Sarah. Por lo que puedes hacer que se informe de algo. Pero tal vez aún te estés preguntando por qué será más fácil mantener el frío así porque, bueno, mudanza de este mes de esta muy pequeña. Ahora imagínate. Imagina la situación donde tienes, como, como, ya sabes, 500 líneas de código y escribiste, Acabas de escribirlas y estás orgulloso de ti mismo. Todo está funcionando bien, genial. Entiendes todo. Pero luego simplemente te alejas de este proyecto y vas a otro proyecto, otro proyecto, y luego imaginas que vas a volver a este proyecto después de como seis meses. Un año, dos fueron Stein. Y luego cuando vuelvas, te garantizo que tendrás vacío en su mente. No entenderás nada. Casi Bueno, tú, claro. Después de algún tiempo, entenderás el código, pero será después de algún tiempo, ¿ verdad? Tienes que decir tiempo para entenderlo. Y luego cosas como la variable X se usa para bla, bla, bla, bla. Bla será de mucha ayuda. Estos estos funcionan que algo así. Esta mamá, eso es algo así. Cosas como esa te van a ayudar y al mismo tiempo, recuerda que no estás escribiendo sobre Lee. Siempre llamó por ti mismo. Si vas a ir de pie a trabajar con otras personas, los comentarios van a ayudar. También, las personas que están trabajando con derecho con los comentarios que pueden ajustar. Lee algún comentario de Redick y entenderán tu abrigo, Foster. Correcto. Entonces es algo Teoh. ¿ Recuerdas? Recuerda que disparas, crea comentarios con el fin de mayor abrigo. Más fácil de mantener y dejar claro a todos. Nota sobre Lee, otros, pero también para ti. Por ello. En el futuro, cuando vuelvas a tu proyecto, vas a ser feliz en lugar de ver un desastre. Dijiste que fuera no poder entender las cosas ahí estabas justo al instante. Entiendo todo, y vas a cambiar lo que tenías que cambiar. De acuerdo, así que esa es sólo la lección. Muchas gracias. 9. Variables: Hola Hoy te diré qué es variable cómo usarlo y por qué usarlo. De acuerdo, eso es muy importante. Tema uno debe ser usado algo. ¿ Qué es bueno? De acuerdo, empecemos de cómo crearlo. Para hacerlo, escribe una palabra var y que significa una variable. ¿ Verdad? Entonces esta cosa informa nuestra parte, señor, que vamos a crear alguna variable. Significa que vamos a almacenar algo y nuestros recuerdos bajo el nombre que bueno, ahora muéstrale nombre fuera variable. Entonces esta cosa es sólo un lugar en nuestra memoria. Entonces imagina que es algo así como, Ah, contenedor algo fue algo que puedes poner algo que bien Puedes poner ahí cualquier valor que no quieras. Se puede historia se puede cambiar que Mira el nombre de la variable No podría ser como muy capaz . Es capaz de muy bien Así puedes cambiar este valor todo el tiempo que quieras. Estás creando una variable bajo el nombre así y puedes cambiarla más tarde cuando quieras. Y cuando lo cambias, lo haces puede cambiar y todos los lugares a la vez cambiándolo en la parte superior. Por ejemplo, de tu programa porque todo se está ejecutando de arriba a abajo. ¿ Verdad? Eso es genial. De acuerdo, Pero tal vez podría mostrarte algún mejor ejemplo. Por supuesto te mostraré, pero empecemos a partir de ahora asignando algo a esta variable para poder asignar al instante algo. Por ejemplo cinco. Y no podía saber enviar con el nombre de alerta off variable. Y cuando me refiero, ella es como pueden ver, tengo cinco años. Puedo cambiar estos valores. Puedo cambiarlo a, por ejemplo, libre Porque lo cambio aquí. Y por las cosas alrededor línea por uno , ahora será gratis. ¿ Verdad? También podría hacer algo así. ¿ Y también trabajamos? De acuerdo, cuando no hago algo así, como solo puedo ver, tenemos indefinido. Significa que nada te puso bien. De acuerdo, Pero probablemente estés ahora mismo ¿Por qué aún más audaz Usando algo así como variables? Porque, bueno, yo simplemente no podía hacer algo así, pero solo teclear cinco y todo funciona bien en todas partes, ¿ verdad? Bueno, hay una muy buena razón. Imaginemos una situación como esa en Europa habría conseguido el impuesto. Sí, y se mata el impuesto al valor agregado. breve puedes canalizar algo así. Impuesto al valor agregado y acabas de agregar al valor fuera de tu problema. Entonces, por ejemplo, tenemos una variable que re presentamos precio fuera de zapatos y yo escribiría aquí estoy 100 y tengo buen precio de descuento T. V. Vale. Y yo escribiría a quién? 959. Y este precio es el precio. Sin el impuesto y este es un precio neto, se llama precio neto. De acuerdo, Precio neto. Precio neto significa que es sin las pláticas. Y ahora me gustaría contar. ¿ Cuánto va con el valor agregado en los ataques? Por lo que haría algo chicas variables precio de los zapatos. Y ahora multiplicaría 100 por 1.23 le haría lo mismo a las chicas precio de TV, ¿ verdad? Y ahora te escribiría 915 9 Como puedes ver ahora, si el precio cambia bien, necesitaría cambiar ambos lugares por ello. Puedo usar algo así ahora cuando lo cambie aquí, cambiaría también. De acuerdo, pero esto es sólo una ocurrencia de por qué incluso molestarse? ¿ Verdad? Pero qué mirada desarrollar valor de las pláticas que aquí agregamos que fue persona libre es algo que bien se puede cambiar. Um, en muchos lugares a la vez, ¿verdad? Si cambiamos ahora, el valor del impuesto porque nuestro país lo cambió, lo cambiarías en lugares? Pero bueno, podrías contarlo. Tenemos a muchos fuera de estos tipos, ¿verdad? Con los hombres fuera de productos a la vez. Para que no cambiaras eso reemplace algo así. Por lo que es buena idea crear algo IVA variable valuado impuesto y tipo 20 gratis. Y ahora podrías saber Hacer algo así como un plus. Ah, si quieres lograr 0.23 necesitas multiplicarte. Ah, 20 gratis. Entonces el pensamiento por uno 100 ¿verdad? Entonces uno más uno 100 multiplicado por eso. Ah, y esto firmado se utiliza para multiplicar en el JavaScript welling mom en un lenguaje de programación . Y ahora podemos hacer algo así. Está bien. Y pero lo podemos mostrar también chicas precio de zapatos. Como puedes ver ahora es 123. Sí, 100 bien desplegados por 1.23. Son 120 pies. Funciona bien. También podemos mostrar el precio de la televisión. Todo funciona bien. Entonces ahora cuando se cambia la válvula, solo puedes hacerlo aquí. Y fue al instante cambiar el precio, ¿verdad? Y, bueno, éste lo usa fuera de la variable. Pero mira, aquí hay una operación que lleva tiempo, ¿verdad? Tenemos que multiplicar algo que en algo. Y esto podría ser simplemente iniciando otra variable, que se puede llamar, por ejemplo, calculado, proporcionar. Y podríamos hacer algo así, ¿verdad? Y ahora algo así y todo va a funcionar también bien. No podemos cambiar sólo este valor aquí. Pero lo genial es que ahora que el cálculo se hace una vez y empieza dentro de la memoria, correcto, no hace falta que se rehaga. Todo. Por supuesto, se hizo en los dos tiempos. Sólo sé ya que se esperaba. Pero imagina que se hace como 1000 veces. Entonces es genial solo contar, porque ¿por qué? Para calcular todo a cada vez algo así, ¿verdad? Mejoraría la velocidad del guión. Entonces debido a ello ahora se puede ver por qué las variables se necesitan derecha, Y son necesarias porque quieres dedo del pie reutilizar tu valor en alguna parte. Um, ¿quieres hacer tu programa? A lo mejor también más autodescriptivo. Se quiere calcular algo porque lleva tiempo y lo usamos. Y bueno, hay algunas convenciones fuera de nombrar las botas Varaiya, como se puede ver. Mira, nombré a nuestras variables como esa letra pequeña, luego los siguientes trabajadores buena letra mayúscula Capital y estas las convenciones de cómo nombrar variables ahí, luego más fácil de leer. El código es más fácil de mantener. Por lo que recuerda nombrar a tu co tus variables correctamente. Deben ser autodescriptivos. De acuerdo, también debes saber que el tamaño de letras fuera dentro de mártires muy limosna Significa que si creé dos variables, por ejemplo, así son dos valores diferentes. 20 onda gratis nos grandes letras 20 derecho a diferente Si hago algo así. Uh correcto que como puedes ver, no son 23 porque cambiamos estos Valium por encima de todo es recordar ejecutivo de arriba a abajo. Entonces vamos a atar poco el tamaño fuera de las letras dentro de la variable nombre importa. Es muy importante porque podría llevar a algunos problemas bien. Me puedes dejar seis porque apagado. Entonces, ¿qué otros errores puedes cometer? Tienes que recordar la muerte. No se puede iniciar el nombre de la variable con el digital. Significa que puedes hacer algo así Como puedes ver. ¿ Tienes algo? Te estamos advirtiendo porque cuando escribes variable, estás esperando un nombre de variable Conoce el número Soy número es solo algo que se puede contar. Y lo siguiente de lo que debes recordar es que no puedes usar como palabras clave de nombre. Las palabras clave son sólo algo vory eran variables todo bien. las cosas que nuestros poderes por parte de la pareja y ellos significan algo para ella. Son pabellones clave, por lo que función variable estos no reserva No puedes usar el río. Sirve lo que verás muchas guerras de reserva después. Simplemente sabrías cuál son cuáles no debes usar los espacios Así que el impuesto al valor agregado variable calculado bla bla. Como puedes ver, no funciona. Se está esperando algo así como coma. Es cosas así. Funcionará porque ahora declaramos, lo que significa que creamos 1234 variables a la vez. OK, pero tenemos con espacios él simplemente no hace que partes No sabe lo que estás haciendo, vale. No use pasos en los nombres. De lo siguiente que debes recordar es que no debes usar operadores en los nombres para que puedas hacer algo. Valor var variable del impuesto más algo calculado. No funciona, OK. También es buena idea saber que en este momento hay hombre de tipos de variables. Sólo estábamos sumando algunos números los estaban multiplicando. Pero hay muchos tipos, por lo que tipos fuera de variables. Y ahora sabemos a qué números se les llama musulmanes en los maestros. Y ahora sabremos algo así como cuerda, que es sólo sigue personajes. ¿ Qué significa? Bueno, por ejemplo, quiero decir nombre variable minando nuestro plato de coche, ¿ verdad? Para hacerlo, tengo que usar el doble abrigo o la cotización simple porque estamos parcelando para saber que es una cuerda. Es un correcto sus personajes. Cierto, porque cuando me quedé así, él es como, Bueno, estos no declarados. Esto es una especie de dedo de reserva irónico, ¿sabes? D para cosas diferentes, como el nombre de la variable on de cosas como valores como caracteres. Debido a ello, necesitamos usar abrigos individuales o doble capa, y no importa. En JavaScript. que uses, solo cuestión de preferencia se pegará a uno que tengas. También algo mundo se llama bolos, y es verdad caídas. Es sólo decir, si algo era cierto o no, lo vas a usar con las declaraciones condicionales de las que hablaremos tarde. Hay algo así como un levantar objetos. Se trata de temas un poco complicados. También hablamos de ello más tarde, y tienes algo como no, lo que significa que algo está vacío. Se puede sólo ah, inicializado. Lo que significa un dedo del pie signo la variable, por ejemplo. Uh, no. Lo que significa que no hay nada en este momento, algo así podría ser necesario si quieres. Ya sabes, comprueba si algo fue asignado más adelante en el otro código porque sabes que tu llamada puede ser muy larga y, bueno, es difícil de describir ahora por qué usarlo porque es un poco complicado en un poco más programas complicados. Entonces solo sepas que muy algo como una nueva tienes también algo así como, estoy definido. Ya lo has notado al inicio de nuestra lección. Cuando haces algo así como la variable A, ahora mismo está indefinido, ¿ verdad? Porque no asignamos nada para comer sólo indefinido. Entonces para resumir nuestra lección, la variable es algo que es capaz de vory significa que podemos almacenar ahí. Podemos asignarles valores, y podemos cambiarlos más adelante. Para crear una variable, necesitamos escribir muy lejos que el nombre de la variable. Entonces podemos asignar su algo aquí o tal vez más tarde. Cámbialo y se usan variables porque tu programa es entonces más el script. Si porque puedes hacer algunas expresiones, puedes hacer algún tipo de cálculo de que va a estar quieto y va a acelerar de tu programa, puedes reutilizar tu abrigo más tarde. Más fácil porque se puede, por ejemplo, cambiar entonces el valor del impuesto algo más bastante fácil. Y se cambiará en todas partes de tu programa en algo que también se recuerde usando toe. Recuerda, cuando estás creando variables nombre del dedo del pie Dane por lo que son auto descriptivos. Por ello, tu código sería más fácil de mantener, no solo para otras personas sino también para ti. Debes recordar nombrar variables así. El mundo comenzó con la letra pequeña y luego la mayúscula Let carta por cada obra, ¿no? También debes recordar que el tamaño de la letra dentro de la variable llamada importa realmente leer Bolton. Y hay cosas que debes recordar que no puedes llamar Eres variables vida y eso Bueno, puedes empezar muchos tipos dentro de variable como, por ejemplo aquí. Por lo que también podemos ver nuestro nombre, mi nombre en mi estornino. Y también se pueden agregar texto entre sí. Eso es algo nuevo haciendo algo como nombre más apellido. Entonces plus se usa dedo del pie agregar dos cuerdas Podemos agregar, por ejemplo, espacio entre él. Eso es algo que se podría ver Ahora podemos ver mi nombre y soberano para que podamos operar sobre variables. ¿ Crees que algún tipo fuera de los operadores? Está bien, eso está dispuesto. Esa lección. Muchas gracias. 10. const - variables constantes: Hola. ¿Te has dado cuenta de que hay oscuridad en nuestro editor? Sí, lo he cambiado a Visual Studio Code. Se puede utilizar un editor IDE. Quieres crear sitios web. ¿Bien? Así que hoy vamos a programar en código de Visual Studio. Entonces puedes ver que hay diferentes opciones de editores como por ejemplo Visual Studio Code. Bueno, a lo mejor será el que usaremos más tarde. Hablemos de la palabra clave const. palabra clave Const le permite cambiar la variable en algo que es inmutable. Entonces después de establecer el primer valor, el primero, no puedes cambiarlo después. Cuando algo así sería útil. Empecemos por ejemplo menos práctico. Entonces entraremos en algo un poco más práctico. Entonces digamos que tenemos pi. Pi es la constante MOF, ¿verdad? Y es igual a 3.14 o incluso una versión un poco más precisa es así. Y cuando alertemos al pi, vamos a recibir el mensaje así. Hay un problema porque ahora podemos cambiarlo en el medio, por ejemplo gratis. Y para ser honestos, cuando el programa es tan pequeño, podemos ver instantáneamente dónde está, ¿verdad? Pero su código más tarde podría tener, por ejemplo, 500 líneas. Y si alguien hace algo así, no te vayas a fastidiar. No lo serás, todos tus cálculos serán impropios porque esto no es lo mismo que esta cosa de aquí. Y por eso podemos usar la palabra clave const en su lugar. Y ahora, cuando cambiamos el valor, como pueden ver, no pasa nada, no vemos alerta. ¿Por qué es así porque hay un error en nuestro JavaScript cuando usas el atajo Control más Shift más I en Firefox o control más shift más j en el Google Chrome. Puedes encontrar debajo de la consola de pestañas, la consola de tu navegador web. Y si hay un error en JavaScript, lo verás aquí. Como puedes ver, error de tipo tobillo, constante de asignación no válida P. Significa que intentaste asignar algo a la variable constante que no puedes cambiar. Es inmutable. Después de establecer el primer valor, lo estableces en los unos. No se puede cambiar más tarde y obtenemos un error y nada después se podrá ejecutar. Entonces la alerta o una anécdota aquí justo abajo aquí, este código aquí, aquí hay más código. No va a ser ejecutada. ¿Bien? Entonces esto simplemente detiene el programa. Y significa que, bueno, nadie quiere Programa solo solo. Nadie podrá cometer algún error. Bien, Eso es lo primero, es, entremos en algún ejemplo práctico, más práctico. Pero antes de ir al it, mira, siempre debes llamar a tus variables que son constantes usando la mayúscula. Entonces voy a golpear el atajo F2. Me gustó mucho esta herramienta de edición porque puedes cambiar en cada ocurrencia. El nombre de la variable. Simplemente golpeas el F2 y podrás cambiar el nombre de en cada ocurrencia. No necesitaba hacerlo manualmente en todas partes, ¿verdad? Entonces cambié la constante mayúscula porque muestras al tenerla mayúscula a todos los demás programadores y también ti mismo que esta es una variable constante, ¿de acuerdo? Ahora puedes distinguir instantáneamente las variables constantes de las variables normales cuando se usan más adelante en el programa, ¿verdad? Recuerda que hay, puede haber más líneas aquí cuando usamos Pi, podemos ver instantáneamente, bien, esto es constante. Y cuando alguien hace algo como número o esto no es una constante, ¿verdad? Y el ejemplo práctico de usar en JavaScript algo así como la palabra clave const será, por ejemplo puntuación máxima para el juego que estás creando, ¿verdad? Entonces. Impuesto al valor agregado, por ejemplo, Gran Bretaña. O la longitud máxima del poste para el poste que alguien puede hacer en tu antebrazo instantáneamente. Puedes ver, notar que todas las letras están en mayúsculas. Usamos el subrayado cuando hay más de una palabra, ¿verdad? Y después cuando alguien usa algo como la OU, entonces esto es constante, bien, Entonces si quiero cambiar este valor, puedo hacerlo solo desde un lugar donde se estableció inicialmente, ¿verdad? Pero no puedo cambiarlo después. Este es el valor que puedo buscar muy fácilmente en un solo lugar donde se hacen todas las constantes , por ejemplo, ¿ verdad? Entonces esto es algo que fue creado para aumentar la legibilidad de tu código y para asegurarte de que se cometan menos errores en tu código. Entonces, si no lo usas, no pasará nada malo. Bueno, tal vez no se separen de la rueda. Y tu código será menos legible cuando no lo uses. Úsalo cuando sientas que la variable no se cambiará más tarde. Esa es sólo la lección. Muchas gracias. 11. Operadores relacionales: Hola Hoy vamos a hablar de los operadores relacionales que la mayoría de las veces se llaman operadores de comparsión. Bueno, ¿qué hace relación cuando tienes dos personas y están en relación? Bueno, están conectados entre sí de alguna manera, por lo que podemos compararlos entre sí. Y cuando quieres que el dedo del pie se relacionen con cosas el uno al otro, las comparas, ¿ verdad? Por lo que se utilizan operadores relacionales para comparar variables del dedo del pie. Y podrías estar preguntando por qué hacer indio necesitaba cuando tomamos algo así como la variable A equivale a cinco en, entonces empatamos b igual a libre. Entonces sabemos que aquí son cinco y aquí se libera. ¿ Y por qué siquiera necesitamos compararlos? Bueno, necesitas comparar dos variables porque, por ejemplo, por ejemplo, a veces tu ver a boost se asignan desde el contenido del sitio web. No estás escribiendo aquí exactamente cinco, ¿verdad? Simplemente estás tomando el contenido de tu sitio web y aprendemos a hacerlo más tarde e insertando aquí, por ejemplo, cuando estás creando contraseñas y después el pasaporte Febrero, donde el usuario tiene dos retirados el contraseña que quieres comparar si ambas contraseñas son iguales, ¿ verdad? Entonces él por error. No escriba algo mal y entonces probablemente habría ocasionado su posible. No vamos a trabajar bien, verdad. Y por eso necesitas algo como la razón de compa. ¿ Verdad? Y usaremos operadores tradicionales. Por lo que el primer operador tradicional es igualar signo. Y esto es sólo comparar dos cosas. Si son iguales entre sí derecha en. Y tienes dedo del pie. ¿ En serio? Recuerda que tienes aquí dos señales. No uno porque un signo se utiliza para un fichaje algo correcto? Se quiere asignar como aquí cinco a una cuando se toma algo así, se está comparando estas dos cosas no se hundieron. ¿ De acuerdo? Y esto es muy típico. Éstos son los que más comienzan. Los programadores lo están haciendo realmente recuerdan que esto no es lo mismo que esto, ¿ verdad? Entonces, ¿cómo usarlo? Lo utilizaremos en el comando de alerta. lo que allard, por ejemplo, es cinco es un igual ser algo que y como se puede ver como el resultado, nos hemos vuelto falso porque bueno, libre no es igual a libre, como me refiero a cinco años no igual dedo libre . Y como puedes ver, falso es el tipo de bolos, que es verdadero o falso. Y así el resultado de los operadores relacionales es un tiempo de bolos. Y puedes usarlo más adelante en la declaración condicional donde dirás algo así, si algo así es igual a eso, entonces haz algo así, por ejemplo en para eso, el usuario que las contraseñas no son el mismo o algo que, um so y este es el operador tradicional básico. Y tú, como puedes ver, hemos llegado aquí advirtiendo que dice esperada ciencia libre como esa. ¿ Por qué el necesitamos escribir gratis aquí y cuál es la diferencia? Como se puede ver, el resultado es el mismo. Pero cuando escribes cosas así, comprueba. Si las dos variables son o anti llamada, vale, significa que tienen que tener el también el mismo tiempo. Las variables deben ser del mismo tipo off a. Entonces ahora mismo hay un número, y este es un número, y cuando hacemos cosas así, también hemos llegado aquí . Pero a veces puedes tenerte una cuerda puesta y luego va a ser falsa. Es buena idea. dedo del pie tiene algo así porque podrías. Pero al hacerlo así, hacer menos errores. De acuerdo, Pero si sabes lo que estás haciendo y sabes cómo funcionan las cosas, puedes usarlo bastante fácil solo para firmar. Pero es bueno hacer algo que tengas problemas que, al menos al principio OK, así que esa es la diferencia. También puedes hacer cosas como y luego signo de exclamación y el signo igual. Y esta cosa sólo comprobará si dos cosas no son iguales entre sí, ¿ verdad? Entonces cuando tenemos algo así como ese East cinco no iguales a libres, son diferentes. Sí, son diferentes. Entonces es cierto. Y si son, um, lo mismo, entonces nos hemos puesto falsos. Por supuesto, en, bueno, también tienes algo como esto. Entonces si los dos algo es mayor que otra cosa menor que mayor o igual o menor que son iguales a. Entonces cuando hacemos algo así como un es mayor que ser no, no es mayor que ser. Es falso porque son lo mismo cuando hacemos algo así. Eso es cierto porque cinco es igual a ser. Es todo mayor, pero es lo mismo, ¿verdad? Entonces es cierto y también podemos hacer algo así. Entonces cuando lo hacemos así, es Tara. Cuando lo haces así, es falso. Cuando lo hacemos, es así. Es falso también porque siete es mayor que yo. Por supuesto, puedes usar aquí y el otro. No es necesario usar variables en ambos lados para comparar nada de conducción para recordar. De acuerdo, tampoco Onley esa lección. Muchas gracias. 12. Operadores lógicos: Hola Hoy vamos a hablar de operadores lógicos. Operadores lógicos se ve igual al que probablemente conoces de la preparatoria las clases de matemáticas. Si conoces bastante bien las matemáticas, no tendrás problemas para digerir todo. Pero no te preocupes, te mostraré todo sobre los operadores lógicos. Los operadores lógicos están trabajando en valores lógicos. Por lo que están trabajando en cero, que es falso, y uno que es para. Y por ejemplo, hay algo como operador de negación de Nate, que está diciendo que no. Significa que si tienes, por ejemplo, algo así, cambiará el resultado a uno. Si haces algo así, sus resultados a cero. Es sólo decir no falso, que todavía no es a donde este falso derecho? Y, ah, hay dos operadores más que son un poco más duros, que es la conjunción y alternativa Colin Junction. Y hay que llamar a esta cosa y y estos cruce, que son a veces se llama alternativa. De acuerdo, entonces cómo funciona cuando tienes, por ejemplo, por ejemplo, en tu sitio web y para con la contraseña y las chequeras para, por ejemplo, aceptar términos y condición, puedes a veces no amarrará una persona a dos partes? El mundo es igual. Entonces, ¿quieres comprobarlo por contraseña? Bueno, estoy desconcertado. Uno es igual a contraseña también. Y al mismo tiempo que quieres,Por ejemplo, Por ejemplo, Ver si las chequeras era así y él está comprobado y el número de cheques o algo que derecho Quieres ver si algo es cheques? Ejemplos de se comprueba proyecto de términos Oriente. Entonces quieres hacer una conjunción con dos expresiones a la vez, Entonces tienes que usar el operador lógico. Y cómo se extraña la conjunción cuando tienes expresión uno y expresión a ti obtendrás resultados como cuando tengas cero y sabes que los resultados serán cero. Cuando tengas 10 el resultado será cero. Cuando tengas 01 el resultado será cero. Pero con de Juan y uno, tendrás una serie sobre uno, lo que significa que la conjunción es a Onley. Si ambas expresiones son dos al mismo tiempo, lo cual es bastante fácil de entender porque bueno, cuando dices que quiero ir al cine y después de él, quiero comer el helado, ¿no? Significa que quiero hacer ambas cosas a la vez, y por eso sólo es a través cuando ambas expresiones también lo son. Entonces en situación como esa, esta cosa esto ambas cosas regresarían sobre Lee si las contraseñas fueran las mismas y en el mismo tiempo se verificaran los términos. Por eso es genial, porque puedes hacer algo así a la vez. ¿ De acuerdo? Y también tienes algo como ellos estos cruce. Pero este cruce camina un poco diferente. Bueno, este cruce funciona así. Significa que cuando tienes forma alternativa de hacer algo que estás eligiendo. Entonces cuando tienes 00 no tienes alternativa. Entonces el resultado cero cuando se tiene uno y cero tratando uno desde aquí, justo cuando se tiene 01 interesante. Estos. Entonces uno cuando tienes uno y 100 tratando estos o día, así que el resultado es uno y el S s. entonces es una buena idea escribir algo así. Esa disyunción es recae cuando ambas expresiones son falsas al mismo tiempo. Entonces vamos a entrenar lo que te diría ahora sobre el estado condicional y la ive virtual. Se trata de una declaración condicional que se puede utilizar escribiendo algo en padre es entre estos dos lados. Aquí puedes escribir algo así como expresiones, ¿verdad? Entonces cuando hago cosas como si a es mayor que el entonces Oller a probar Y como pueden ver, cuando nuestro programa se ejecute, tenemos aquí prueba. Por lo que esta cosa sólo mostrará si a es mayor que ser. No es así. No va a mostrar viuda. Y ahora podemos comprobar si al mismo tiempo, por ejemplo, B es igual a cinco. En caso afirmativo, entonces mostrar la prueba. Como pueden ver, les está mostrando nuestra prueba. Pero cuando cambiamos, por ejemplo, ser el libre que no eres es eso es mayor que ser. Sí, así que tenemos calor uno Verdad es ser igual a cinco. No. Entonces tienes aquí está aquí. Entonces uno y cero nos da trabajo como resultado cero. Entonces significa que esta hora no se va a mostrar si usaste alternativa que estos Jonathan mandamiento no lo harás es que tenemos ahora aquí muestra prueba porque uno y cero nos da uno. Y puedes cambiar siempre el resultado usando la negación. Entonces cuando diseñamos así y usé el signo de exclamación Ahora cambiaría el derecho 120 , porque esta cosa nos está dando uno. Y esta cosa está cambiando el resultado de 120 Como puedes ver ahora, no nos está mostrando a pesar de que estoy refrescando este lado. Entonces así es como la guerra del operador. Por supuesto, es una buena idea usarlos en las cosas más prácticas, como algo así. Pero ahora mismo lo estoy mostrando así porque, ya sabes, no sabemos cómo sacar las cosas de un lado. Aprenderemos todas estas cosas en futuras lecciones. Esa es sólo la lección. Muchas gracias. 13. Operadores de Bitwise: Hola. Iban a hablar de operadores sabios de oferta. Los operadores de Beatriz, como su nombre indica, están funcionando bit. Pero, ¿qué son los beats? Bueno, bit son unas tensiones eléctricas que están llegando a nuestro PC, y se interpretan como para indicar cero o uno. Entonces estamos saltando entre cero y unos y están saltando algunos fondos porque tenemos muy buen procesador y otras cosas así, y están a salvo en alguna parte. Recuerda blob de ellos. Hay mucho para el pararlo, pero bueno, esto es sólo una información que se interpreta en remolque. Cualquier cosa que puedas ver en tu computadora puede que las cosas incluso aquí editor, otro programa. Entonces podemos trabajar usando los grandes operadores sabios en ellos, y podrías pensar que sería más rápido. Sí, sería más rápido. Pero el problema es el JavaScript. Si estás trabajando con el pitch, los operadores sabios están haciendo algo así como cambiar tipos fuera de las variables con las que estás trabajando , y esto es un poco más lento. Por lo que en javascript te gustaría que la mayor parte del tiempo evite usar operador grande sabio. Son geniales en otros idiomas, pero aquí se usa muy raramente. Entonces esta lección es más bien un hecho interesante para ti. De acuerdo, así que si estás encarcelado, solo salta esta lección. Pero a Espera un segundo. Hay algo que debes saber. Mira, aquí hay una sobre persona, una sola persona puja sabia, y significa que es muy similar al operador lógico. Una contracción que se veía así. Funciona también muy similar, pero éste está trabajando en oferta. Éstos está trabajando en valores lógicos. Y sabes que tienes dedo del pie. Recuerda saber usar estos por un místico, ¿ verdad? Porque no sería bueno para ti. Y es necesario saber dónde se utilizan los operadores de big boys en el JavaScript. Bueno, en su mayoría se usan cuando se quiere venir por algo, pero es una situación muy rara porque a otros idiomas les va mejor. Y muy lo quieres hacer por la fuga de trabajo. Y, bueno, cuando se quiere hacer algo con puertos con los enchufes, entonces se quiere comprobar por ah, algo descubrirá lino. Nosotros las drogas, que son algún tipo de estado. Steve, Algo es, por ejemplo, abrió ninguna otra cosa como esa. Entonces esto es muy, muy correcto. Entonces pero es genial saber cómo funciona nuestra computadora. Entonces si tienes tiempo, solo mira este video. ¿ De acuerdo? Entonces cómo me pongo, por ejemplo, números en la vida real que estás usando cuáles son un destino que está en sistema decimal, están funcionando cuando mueres por algo 126. La verdad es que estamos haciendo algo así multiplicado por 10 que es un sistema decimal , y al apagado, dos al apagado para así en la parte de segundos de estos significan que está bastante bien. Es bueno cuadrado, así que 10 chorros y esto es lo que 100 multiplicado por uno es 100. Entonces esta es la verdad sobre nuestro sistema. Y luego sólo cosas como multiplicar por entonces más seis multiplicado por 10 a la potencia apagada cero. Y esto es lo que cuando hacemos, como multiplicar todo. Es 100 multiplicado por uno. Es uno entonces multiplicado por dos es demasiado intenso. Por lo que es 120 más cero. Múltiples, uh, a la potencia de 10 a la potencia del cero siempre es un derecho. Cualquier cosa a la para serie uno uno multiplicado por 66. Entonces es 126. Entonces es lo mismo. Por qué estoy mostrando cosas buenas porque tenemos algo. ¿ Qué es un sistema binario? Y sí, es lo que vamos a trabajar con el uso de los operadores sabios de oferta. Por lo que 1010 por ejemplo. Y esto es ahora mismo no, 10 mil veces. Pero esto es algo así como uno multiplicado. Para este momento tenemos otro sistema, así que también lo es. Y al apagón, contemos 012 gratis. Tenemos que venir de derecha a izquierda de cero para ver cuál juega esto. Este esta a 012 gratis. Entonces al apagón, más encendido. Y entonces tenemos cero multiplicado por el sistema al poder apagado del lugar donde estamos en este momento. Por lo que este veces Teoh más uno multiplicado por dos al poder apagado uno más cero multiplicado por dos a la potencia apagada cero. Entonces cuando candidato verá que tenemos algo como a la parte de tarjeta es un cero multiplicado por cualquier cosa es siempre cero plus. Por qué multiplicado por dos Teoh más cero multiplicado por cualquier cosa. Está aquí. Por lo que puedes ver cuando tienes cero aquí significa que no necesitamos preocuparnos de contar nada. Entonces va a ser un poco más fácil contarlo aquí, ¿ verdad? Podemos hacer algo así y luego algo así y equivale a 10 en nuestro sistema. Vamos por ejemplo, masa un poco más rápido. Te mostraré el atajo de esta multiplicación para que lo hagas un poco más rápido. OK? Siempre este lugar ¿quién es uno? Este lugar sigue siendo este lugar es de 48 16 30 a 64 sigue Va. ¿ Por qué? Porque no es que siempre hay que multiplicar por dos a este algún tipo de poder. Y ah, aquí cuando tienes 11 multiplicados por dos al apagón. Cero es mientras que multiplicado por uno necesita uno, correcto. Por lo que aquí puede ser sólo uno o cero en este lugar. ¿ Verdad? Entonces es uno más Teoh más cuatro más ocho Si siempre hay uno. Pero si no hay como cero. Ah, bueno, si no hay uno, entonces simplemente no necesitamos preocuparnos por este lugar, ¿ verdad? Simplemente estamos avanzando. Entonces cuando se obtiene por ejemplo, estos eran sólo en un plus cuatro más dos, sería 12 más a su 14 Bastante fácil. Entonces eso es un atajo de hacer estas cosas. Y bueno, ahora usemos a nuestros depredadores. Por último, hagámoslo alguna especie de Ah Lorant, algo así como 10 14 y ofertar operador sabio. Hemos hecho la puja era operador y está funcionando igual que el operador lógico, pero está funcionando bien en beat. Entonces si no conoces la última lección, por favor vuelve ahí. Ah, así es sobre Lee a Onley cuando ambos argumentos pero expresiones son dos o la situación en deuda . Ambos beats son uno. Entonces 40 cómo tomar 14. Y, bueno, es 110 vino porque es un plus cuatro más dos más cero derecho un más cuatro más dos más dos es 40. ¿ Recuerdas cómo hacerlo? Es como aquí es comer 1248 y vas a contar más tarde. Mark 10 es lo que hicimos aquí y ahora si estamos asumiendo apodado correcto, estamos haciendo algo así con la puja sabia y hubiéramos pensado que uno y uno nos da 11 y 001 y uno nos da mientras que 00 G's preguntaba uno, porque una y una está teniendo ambas expresiones también. Aquí mismo tenemos también ambas expresiones a través y este es el único momento en que la conjunción cuando el operador y te va a dar la en otra situación que has podido ver. Entonces significa que el resultado es stent cuando fuimos los primeros. Como pueden ver, tenemos aquí 10. De acuerdo, probemos otra. Entonces la puja sabia son así en esa situación, tenemos bueno de uno y 1/2 11 y cero nos da uno porque la alternativa es falsa. El Lee ganó. Ambas expresiones son falsas. Entonces así y por ello, hemos conseguido en este momento 40. Como se puede ver , son 40. Y ahora podrías ser como bro, ¿ En serio? ¿ Por qué hasta Teoh necesitamos algo así? Como dije antes, es muy difícil de usar, pero puedes, por ejemplo, usarlo como algún tipo de lino. Por ejemplo, estos están diciendo que hay un usuario que ha obtenido previamente privilegios por publicar. Esto significa que tiene privilegios por leer estos significa que tiene buenos privilegios para editar pose o algo así. Eso y con estas cosas, algún por ciento, o la puja sabia o la exclusiva. O puedes realizar operaciones como el simplemente puedes comprobar lo que el usuario. Uh, qué privilegios tiene el usuario Andi en sockets. Se puede cambiar. Consulta si, Si eso es como un D complementa todo lo que bien, tienes todo yendo bien. Otras cosas así. Y también puedes comprimir algún tipo de pelea porque hay que recordar que tienen algo. Cuerpos llamados compra mordeduras están vestidos, continúa ocho latidos, y se puede tener más de uno por la mayoría del tiempo se tiene bueno, por ejemplo, fue un número. Tienes cuatro picaduras, luego tienes cuatro multiplicados por anuncio. Son 22 beats en uno. Entonces la verdad es que este ser se ve así y entonces no tienes como 20 huevos? Los ceros sean para ello, ¿verdad? Este es el número dos, ¿de acuerdo? Y bueno, se podrían usar los ceros, y se puede comprimir los valores humanos insertantes sobre estos cómo funcionan las compresiones La mayoría del tiempo. Entonces porque son lugar sin usar que podría ser usado e interpretar más tarde por tu compresa O , um, ya conoces el programa para hacerte bien? Entonces eso es bueno. Es por eso que algo así estos los usados pero por supuesto en otros idiomas también es más rápido. Improbable en javascript no lo es. De acuerdo, Así que tenemos un tema dolorido exclusivo o simplemente trabajamos casi como eso Bid wise están en comprados. Bueno, eso es algo así. Expresión. Una expresión a los resultados. Entonces si tienes uno y cero, nos da también uno cuando es cero y uno, nos da también uno. Pero cuando tienes uno en uno, entonces tienes cero exclusivo o significa que soy exclusivo. Yo quiero elegir sólo una cosa. De acuerdo, no quiero elegir. Entonces si tienes cero y cero, también tienes cero. Entonces si haces algo así, significa que vamos ahora tenemos qué? Cero cero Y aquí uno que significa que tenemos lo que sería uno, él también lo estará. Y aquí está para así es para como lo refrescamos. Como se puede ver, tenemos aquí para que también se pueden mover bits. El izquierdo por uno. Nos acaban de quedar a la izquierda cambiando a la derecha, cambiando para moverla a la derecha. Entonces cuando hacemos, por ejemplo, algo así 14 en adelante lo movemos a un lugar, por ejemplo, a la izquierda. Entonces tendremos ¿qué? Éste se moverá aquí. Estos, nos movemos al lugar fuera de estos. Éste se trasladará al lugar de éste antes. Tienes ceros, ¿verdad? Entonces será algo así como 0111 Andi, significa él este más dos más cuatro. Entonces? Entonces son siete. Como pueden ver, tenemos 17. Entonces significa que dividimos 14 por siete. Eso es un hecho bastante interesante. Y es más rápido en otros idiomas. Pero no en este. Derecho a dividir por dos usando algo así. Y bueno, tienes también algo así. Puedes moverlo a la izquierda. Entonces hemos estado 11100 Así que cuando te mudas a la izquierda, imagínate si tenemos aquí hombre es euros. Es como, Bueno, Bueno, yo mudé estos cero a este lugar, ¿no? Y no, todo se mueve por qué? Y bueno , serán 20. ¿ Por qué lo sabía? Porque me multiplicé por hasta Podemos contarlo, claro. También uno, 24 más ocho más 16 en 16 más dedo del pie de ID Entrar dedo 24 más 4 28 Así que todo funciona bien. Y también tenemos negaciones sabias de oferta. Cuando hacemos algo así, se podría pensar que cambiar 11 cero y la negación funciona como cambiar 0 a 1, ¿ verdad? Entonces serían sus 000 y uno por ello, probablemente pensarías que conseguiríamos Así que no eres esa desecación. Simplemente usamos la negación off. Ya sabes, la negación lógica. Es menos 50. ¿ Por qué? Es menos donde está menos como dijimos que nuestro hombre son los euros. Y si el 1er 0 ha cambiado el uno y porque estamos usando el nombre negación bid sabio operador, estamos cambiando todos los ceros de los resultados ahora en todas partes uno y no Y en como 0001 al final, ¿ verdad? El 1er 1 dice que este es un número que no es positivo. Es negativo y, bueno, bueno, ya sabes, alguna manera tienen que hacerlo. Tenían dedo del pie crear algo así con el fin , ya sabes, mostrar cuál es negado con sequedad, positivo por contar. Y así lo hicieron. Y entonces es sólo contar la manera grande, diferente. Por eso, en la negación está funcionando así eso te dimos aquí negado en el número no uno positivo, pero el tiene, reconoce, más bien e interesante hecho. Pocas veces se usan operadores grandes sabios. Es bueno saber que existen, Um, incluso, incluso, tal vez sólo para saber que tú, la lechería, la lechería, algo así como un solo um por ciento y un solo talón sabio son porque no me harías estado al usarla no es buena manera. Y cuando conozcas algo así y no te sorprenderá, justo cuando conozcas personajes como ese en el programa de otra persona, donde están usando Advanced Stop es como, por ejemplo, sockets Ok, esa es sólo una buena lección. Muchas gracias. 14. Declaración de estado: Hola. Por lo que iban a hablar de estado condicional Declaraciones condicionales Son declaraciones que pueden condicionar algo y se utilizanpara realizar diferentes acciones basadas en diferentes condiciones. Y, bueno, cuando algo así se va a usar. Por ejemplo, cuando quieres validar tu formulario, no sabes exactamente qué va a estar atado ahí, verdad? No sabes si, por ejemplo, por ejemplo, el usuario va a escribir la contraseña correctamente de la manera que quieras. Y entonces solo puedes enviarle una alerta antes de que envíe el formulario eso no necesitará dedo del pie, refrescar todo o retirarlo todo de nuevo. Otras cosas así. Se le informaría al instante que algo anda mal, ¿verdad? No pudiste informarle. Pero sólo podemos hacerlo porque podemos condicionar. Podemos comprobar si la variable es así. Si algo en tu página web es así, claro, ahora mismo no sabemos cómo sacar las cosas de nuestra arma. Lo terminaremos más tarde. Pero así que ahora mismo sería una lágrima. Haría cosquillas ejemplos exactos, pero al menos sabrá cómo funcionan estas cosas. Muy bien. De acuerdo, Entonces cómo crear una declaración condicional simple uno puedes tomar si y luego si después. Si tienes algo como parentis es y dentro de ella pones esa condición bien. Y por ejemplo, podemos usar así al operador de comparación y come cinco mayores que tres. Sí, es mayor que libre. Y esta cosa va a devolver uno. ¿ Verdad? Porque si algo pasa, va a devolver uno. Si algo no es cierto, va a devolver cero. Y si esa perspicacia de expresión aquí es para, entonces se va a ejecutar la instrucción por debajo de una línea de abajo. Si no es cierto, no se va a ejecutar. Entonces si hago algo así, como pueden ver, tenemos aquí una alerta. ¿ Por qué? Porque esta cosa fue así y por ello, se va a ejecutar esta línea de código cuando hagas algo así. Entonces aquí tenemos falso. Ahora, como pueden ver, no vemos nada. De acuerdo, así que ese es el sencillo. Y hay que recordar que cualquier valor que no sea cero Pascua, Así que si tienes algo así, se va a ejecutar. Si tienes cero, no se va a ejecutar si tienes valor menos, se va a ejecutar. Si tienes una cadena, también se va a ejecutar. De acuerdo, así que vamos a crear dos variables por ejemplo, una, uh y vamos a hacer algo un poco más duro. Entonces si un es más grande que ser, entonces quiero teclear. A es más grande que ser. También podría hacer algo así para poder conectar cadenas así. Y como puedes ver, cinco años porque también lo es. Cuando lo cambiamos así, no está funcionando. Por supuesto, cosas como variables no van a no querer voltear a comprobar. Varía con el tipo aquí, los valores en él porque sabes cómo se ven bien. Pero no puedes tomar todos estos valores de tu sitio web. Y ahora un es más grande que ser, y a veces se puede querer revisar también la otra situación, por ejemplo, lo contrario. Si es así, si hay otra situación, hacer algo como un es más bajo, entonces ser y entonces alertaremos A es menor que yo. Por lo que es más bajo que libre. Sí, no está funcionando. Entonces, ¿cómo funciona? Todo está siendo agarrado de arriba a abajo. Entonces aquí. Hey, nosotros fuera de curso encontramos variables y luego comprobamos si a es mayor que ser. No lo es. Entonces aquí tenemos cero. Entonces esta cosa no se va a ejecutar. Pero entonces tomamos otra situación si se baja y ser, Sí, uso más bajo que ser. Entonces podemos mostrar algo así. Y también podemos hacer algo así. Nuestra casa y esta cosa va a ser ejecutada si no se cumplieron todas las demás condiciones. Entonces podemos montar algo como yo igual a B igual a tener razón porque el en la situación en la mano por lo que es menor que libre. Cuando lo hacemos, por ejemplo, gratis, gratis equivale a amigos. De acuerdo, entonces hay algunas cosas que debes saber ahora porque esta cosa mi BZ, quieres cerrar ahora esta lección. Pero no lo hagas porque hay algunas cosas bastante importantes que las que necesitas saber. De lo contrario cometerás muchos errores. Mira, puedes hacer algo así. Puedes hacer justo ese si es fácil, Pero puedes conectarlo con el viejo else if y no necesitas usar otra cosa. Pero también puedes hacer algo así. Um, así Así que solo puedes usar si y lo demás. Y hay que recordar eso cuando se tiene una buena situación así. Si y de lo contrario si cuando se cumple esta la condición del, se ejecutará esta instrucción. Pero esta condición no se volverá a revisar. Si estás usando el trabajo de la casa, vamos a comprobarlo. Entonces si decidí como cinco en, hacemos la misma condición en ambos casos. Por lo que podría estar pensando que esto será ejecutivo. Esto será ejecutivo, ¿verdad? No. Cinco es más grande, tonto libre. Y eso es todo esto aquí Esta sentencia No va a ser ejecutado, ¿ verdad? Si querías ejecutar algo así, tipeas Si de nuevo cinco es más grande que 35 es menor que tres vas a recordar que si quieres enfermar algo con el fin de hacer por ejemplo, tu programa más rápido. Deberías revisar las cosas que más son las que tiene la mayor probabilidad ocurra primero porque ellos luego el entonces verás. Ah, la instrucción será ejecutada debajo de ella y todas las demás instrucciones. Todos los demás cheques que sabemos se van a ejecutar. Está bien. Es muy importante. Y no cometerás un error así. Y hay una cosa más que hay que recordar. ¿ Y si hice algo así? Ah, así. Y sí lo someto. ¿ Qué crees que se mostrará? ¿ Cuáles fueron los primeros que se puede ver? Se puede ver dos es menor que libre y luego probar. De acuerdo, Eso es algo bonito que pensarías que pasaría. Pero, ¿qué hice? Algo así. Podría estar pensando que sólo se mostrará esta cosa. Como se puede ver, todavía podemos escuchar. ¿ Ves una prueba? ¿ Por qué? ¿ Begu? Está aquí. Por qué podemos tener aquí. Azman entra como queramos. Ahora podrías estar pensando, Oye, Oye, es cierto que las instrucciones de tesis deben estar en torno a estos. No, pero ya sabes por qué no se interpretan los espacios. ¿ Verdad? Por lo que necesitamos mostrar siempre exactamente lo que queremos um ejecutar. Ah, ¿no queremos ejecutar cómo dedo del pie ejecutando pobre. Después una instrucción a la vez. Bueno, entonces tienes que usar un letrero así. Entonces tenemos que usar corchetes que se vean así Si quieres agrupar más de una instrucción y luego cuando la usamos por dentro. Como puedes ver ahora podemos ver en el cinco es más grande que los pies. Y eso es todo porque ahora mismo, porque fuera de ese descanso, es que estás interpretando estas dos instrucciones como una. Por lo que quieres ejecutar más de una instrucción puedes crecer. Agruparlos, puedes fusionarlos usando estos corchetes rizados. Correcto. De acuerdo, Entonces si sí sé algo así, esta cosa estará encendida cuando haga algo así. Uh, alerta a igual a B y sólo estas cosas. Por lo que debes recordar que si no haces corchetes Onley se ejecutará una instrucción . Y, bueno, mayoría de las veces Sólo dos corchetes, aunque lo estés haciendo en la única instrucción. Si por lo menos estás suplicando, vale, porque no tienes está siempre que pudiera hacer que pudiera ser problemas potenciales para ti . No hice ese corchetes de corchete rizado porque yo cuando tengo solo instrucción muy corta porque lo hice soy persona muy experimentada en programa justo sobre tu detrás Viet, el principio, haciendo algunos problemas por ello. Y sólo tomará mucho tiempo dos d código de barras así en. Por lo que tal vez a veces sea incluso buena idea hacer solo por una instrucción. Tirantes rizados. De acuerdo, así es como funcionan las declaraciones condicionales y sabes cómo evitar cometer errores. Es sólo esa lección. Muchas gracias. 15. Declaración de condición cortas: Hola Hoy vamos a hablar de declaración condicional acortada, que se llama operador Marca de interrogación y carbón y bueno,ya sabes, ya sabes, programadores son perezosos y a veces quieres dedo del pie evitar escribir demasiadas líneas de código Cuando algo es simplemente obvio. Simplemente es tan fácil de escribir. No quieres mentir muchos forrados. Por supuesto que te mostraré pronto. Un ejemplo. Bastante práctico So. Pero vamos a revisar. En primer lugar, ¿cómo funciona? Toma algo así como la expresión aquí. Entonces ya sabes, algún tipo de condición aquí. Y luego si la expresión es cierta, entonces esta cosa de aquí va a ser devuelta, y no lo es. Esta cosa va a volver. ¿ Qué significa? Bueno, olvidemos el cuerpo por un segundo. Vamos a crear un ejemplo. Yo quiero comprobar si la X es, por ejemplo par. De acuerdo, Entonces, ¿cómo hacer? ¿ Cómo lo harían? Tenemos sólo declaración condicional normal. Yo haría algo. Hice cueva ex Mort Así operador modo Eso Quiero comprobar si no hay un resto. Ah, dos es igual a cero. Entonces no hay remanente, ¿verdad? Por cuando se divide por dos, lo que significa que es par número y entonces podemos decir que los ojos a su creo que este número es incluso puede crear variable especial, por ejemplo, es par. Y ahora podemos decir su incluso ISS a lo contrario sabes que es incluso es falso. Tenemos una advertencia clara porque dice que aquí es buena idea dos años, ciencia libre como esa porque entonces sabes que ahora mismo estás comparando el mismo tipo de variables. Está bien, debilita. No pudimos usarlo. Y ahora cómo? ¿ Cómo podemos saberlo? Digamos que el número es parejo para que simplemente podamos hacer algo así, por ejemplo, y es ocho. Es demasiado Sí, do es incluso cinco no lo es. Aun así, tenemos falso. Como puedes ver, tuvimos que escribir 1234 líneas de código. Hay una línea de código, que sería más rápida. Eso es lo más rápido con esto. Con esto. Piensa así escribimos expresión para huevos multi do igual a cero y luego volvemos a lo contrario queremos toe return false. Y el problema es quién escuchó el guiso o las farsas regresaron, pero al lugar al que las asignaste. Se puede por supuesto, se hace algún tipo de función. Se pueden invocar funciones, años de ejemplo. Otros. Correcto, Andi, pero lo que sea. Todo lo que quieras que se haga se va a hacer. Si esto es cierto en este lugar en este lugar No, no lo es. Se va a ejecutar cuando esta cosa es falsa, así que no podemos asignar a algo así. De acuerdo, entonces podemos llevar esto a común, porque no nos importa. Como puedes ver ahora, es bastante más rápido. Y ahora podemos teclear un Stephen y sí, está trabajando falso para. Pero, ya sabes, podemos aún más actualizadas si solo quisieras tenerlo como salida. No queremos iniciar estos valores. ¿ Por qué no hacerlo así? Está bien, ahora tenemos lágrima son falsas, y podemos mejorarla. ¿ Por qué no? Ya sabes, dile algo a la gente. Por ejemplo, el valor es parejo. El valor ni siquiera son los valores. Ni siquiera el valor es ni siquiera Así que sabes, llamas a Allah escuchar de cualquier cosa. Solo puedes revisar una cosa aquí, bonito padre. Y luego sólo otro. La persona que algo está bien o algo es no. Aunque Caín, y sólo lo haces en una línea. No tienes que hacer algo así. No necesitas solo tener cargas de códigos fuera de línea solo para una tarea simple, ¿ verdad? Entonces así es como lo usas. Ahí es cuando lo usas. Y, como se puede ver, darse cuenta de que es una buena idea acortar a veces nuestra programación. Eso sólo es bueno. Eso es todo. Muchas gracias. 16. Interruptor: Hola Hoy vamos a hablar de declaración de cambio, que es hablar, cambiar entre valores ¿Enviaste a este switch? Y en caso de que pase algo que se envíe al conmutador, puedes ejecutar ese código la instrucción que quieras. Entonces es realmente algo así como las declaraciones condicionales, y se puede hacer exactamente las mismas cosas con nevera como se puede hacer con las declaraciones condicionales . Entonces, ¿por qué aún más audaz? Déjame a mí. En primer lugar, algunas personas pueden usarlo, para que entiendas la sintaxis de la misma. Y en segundo lugar, se ve mejor a veces cuando se tienen hombres en declaraciones condicionales. Ya sabes, si, como si como un chaleco Z asnos y ya sabes, como 10 10 o más seis explosión o algo que es buena idea usar switch porque se verá mejor en tu frío. Después lo vas a leer más rápido, ¿verdad? Entonces por eso debes usar switch y cómo funciona. Escribes switch, y luego escribes lo que quieres cambiar cazas para alternar entre. Entonces, por ejemplo, creamos un día libre variable a la semana, y yo escribiría aquí uno, y cuando enviamos tu día libre débil. Ahora podemos usar lo que tenemos que usar ahora aquí las llaves actuales. Y ahora deberíamos, en caso de que tengan débiles iguales a uno, podemos, por ejemplo, enviar alerta el lunes en caso de que siga siendo alerta de libre consentimiento usar ese derecho para usar eso. Y en todas las demás situaciones en esta ocasión sí sabes tipo como, pero tipos predeterminados. Entonces es lo predeterminado que tienes que hacer si todas las demás cosas no son ciertas. Y, bueno, esta no es la semana libre, por ejemplo. ¿ Verdad? Como pueden ver, hemos llegado aquí lunes y martes, y esta no es la puerta de semana fuera. ¿ Por qué? ¿ Por qué? ¿ Por qué pasó lo que pasó? Porque el interruptor es bastante raro. Ya sabes, cuando es interruptor, lucha entre este valor. Entra en este caso y whoa, es uno. De acuerdo, así que vamos a permitir esto, pero también vamos a ejecutar todo a la botella Ho. Entonces, ¿por qué incluso molestarse en usar algo? Incluso lo que tienes que decir exactamente que quieren romper. Está bien. Cuando lo hacemos así, luego ejecutas solo estas instrucciones porque sabes que tienes remolque de alguna manera. Dile a ese intérprete Qué maney sexy en sección quieres ejecutar, ¿ verdad? Porque se pueden escuchar instrucciones de tipo hombre en 50. Y entonces necesitarás decir: Oye, Oye, quiero romper Y a veces incluso se llama porque puedes usar estos casos, por ejemplo. Um, Bueno, antes de que vayamos a ello, que recuerdes que tienes dedo del pie casi siempre dan descanso después de cada caso. No necesitas hacerlo después de la caída porque son las últimas. No necesitas escribir aquí su valor predeterminado, pero en todas las demás situaciones que tengas, deberías tener algo como eso encendido. Bueno, vamos a comprobarlo. Cuando tecleé el dedo del pie, sería un C. Considera el martes. Cuando escriba algo nosotros, será que no hay el día libre débil. Pero y si quisiera decir algo como, Oh, es, ah, ah, día de trabajo en esto y es un fin de semana justo entonces debería hacer muchos casos de los y podría hacer algo como Case. Un caso, también. Caso libre para en caso cinco a gratis para cinco. Y aquí está, jornada laboral y en otras situaciones, me gustaría tipear 67 y por supuesto necesito hacer un descanso así y es que no podemos es otro día de semana cuando escribo uno. Debería hacer lo que simplemente pasaría a la 1ra instrucción que tiene que ejecutarse y luego al freno no es un día libre a la semana. Um oh, escribo 1 11 cuento cosa de trabajo. Cuando escribo seis o siete, es un fin de semana. Para que sepas que puedes hacer algunas cosas especiales. Por ejemplo, por dinero. Oh, no, es lunes, y cuando tomes No. Una, va a otra esta cosa y estos días cosa bien, Así funciona. Entonces, como dije antes del año, mayoría de las veces no usarán qué declaración esta. Pero hay que conocer la sintaxis porque la mayoría de algunas personas la están usando y e solo cuando la usas . Es para leer cosas más fáciles. De acuerdo, si quieres tener más abrigo capaz de leer cuando tienes buenos muchos casos que revisar, entonces es buena idea árboles que durante la lección, muchas gracias. 17. Funciones: Hola Hoy te diré, hermano funciones como crear un fin. Por qué se necesitan función es simplemente un perro de código el cual puede ser invocado, ejecutado tantas veces como queramos y diferentes lugares en nuestro abrigo por nosotros o incluso otras personas funcionan. Acabamos de llamar a veces y método es, como su nombre indica, tomar una función de rol por fuera haciendo algo bien. Es un asunto para resolver el problema. Por ejemplo, una función puede calcular algo o informar al usuario sobre algo en el sitio web al abrir la ventana especial,por web al abrir la ventana especial, ejemplo, función alit, que ya conocemos bien. Cuando tomamos cosas como las nuestras y escribimos algo dentro, vamos a crear una ventana especial de ventana con esta variable con el valor de estos mismos libro dentro de la ventana. Entonces alguien creó la función para nosotros que va a alertar a alguien que podrían pensar función es que se puede co pagarla. Se puede invocar tantas veces como advirtió. Y muchos lugares en tu código. Por supuesto, tú hubieras sido las otras cosas como tú, cierto, otras en tu abrigo. Y bueno, por eso, estás ahorrando tu tiempo, y puedes ver al instante que esta función es responsable de que el mundo alerte a alguien en lugar de ella. Conocerías valle asi como yo conozco 67 líneas de abrigo y necesitarás repetir repetido en ganancia. Y si quisieras cambiar algo, entonces tendrías un programa, ¿ verdad? Utilízame para cambiar cada lugar posible donde lo uses. Será muy difícil de detectar y bueno, sólo tendrás demasiado frío. De acuerdo, entonces las funciones son muy importantes. Hay muchas funciones disponibles escritas por otras personas. Eso también es muy cool. Entonces, ¿qué? Hay algunos conceptos básicos, uno que son estándar construidos en uno comienzan en algunos a un lado, algo bueno se llama objetos. La mayoría de las veces hablaremos más de objetos después. Tan bueno, por ejemplo, tienes una función que compuesto alimenta un tipo de, por ejemplo, entero de dedo de cuerda. Esa es una función bastante útil que puedes usar. Se puede cambiar yo y cambiar, por ejemplo. Ah, comprueba si el número es un número, ninguno no es una función numérica y otras cosas así. Hay muchas funciones, por ejemplo, usar para la operación en cadenas cuando voy aquí y lo abro, Como se puede ver aquí. Ah, portero. Funciones Escriba aquí que puede hacer algunas operaciones con string. OK, Y lo que aprendimos algunas de las funciones más útiles y a veces vamos a crear funciones son en tu propio uso. Pero hay muchos, por ejemplo, también marcos como Jake desgaste. Es muy buen marco que se acaba de poner en marcha las funciones más útiles creadas por otras personas y nuestros enchufes de dinero. Remolque. Bueno, si conoces a Jake, usa un y qué javascript en primer lugar, y luego j query, puedes crear muchas cosas muy lejos. De acuerdo, entonces es buena idea mirar en Internet porque la mayoría de las veces, si quieres crear algo, ya ha sido creado. Entonces, no pierdas tu tiempo. A ti más te puede gustar freír y encontrarlo incluso de forma gratuita. De acuerdo, entonces después discute muy buena idea para aprender algo que se llama J Query. Porque encuentras muchas funciones útiles, dicen para las de tu tiempo. De acuerdo, Nosotros No, no. Ahora sabemos que el mundo es función. Pero cómo crear funciones, nuestra propia. Empecemos por crear uno simple. Nosotros Así llegamos a conocer con la sintaxis un rey. Para mantener la función, hay que escribir una función de teclado. Entonces, ¿conoces al intérprete que va a interpretar JavaScript? Sabemos que pronto vas a crear una función que es una definición de función, no invocar. Función Go. Correcto. Entonces ahora tenemos que bucear el nombre de la función, por ejemplo. Pruebas. De acuerdo, ese es el nombre sencillo. Y luego tecleamos paréntesis. Entonces lo mismo, como cuando lo estábamos invocando. Pero debido a que fuera de la función de palabra clave, el interpretado ahora sabe que esto es solo una definición, y se puede definir algo discutirá parámetros. Pero hablarás de ello un poco más tarde. Ahora deberíamos usar los er's rizados para decir dónde está iniciando la función y dónde va a terminar la función. Esta cosa se llama sobre una piedra de funcional. Vale, Así que ya sabes, también el Carol abraza de, por ejemplo, el estado en y estaban acostumbrados a todavía muchas instrucciones s Oh, sí. Aquí en la función , tiene dos roles. Una es decir donde la función está empezando rey y donde está terminando y también a la tormenta y las instrucciones y unas, ¿ verdad? Por lo que podríamos debilitar Escriba su instrucción mientras en la sección um bam, bam, bam, bam! Y todas estas instrucciones van a ser invocadas van a ser ejecutadas cuando invoquemos la función de prueba. Entonces cuando simplemente algo así como probar OK, todas estas instrucciones serán invocadas y se puede invocar dentro de la función otra función. Puedes hacer lo que quieras aquí, ¿verdad? Entonces, por ejemplo, cuando escribo cosas como Alert sample y cuando ejecuto esto, como puedes ver, tenemos Bueno. Ahora la muestra de aquí dijo porque corro dentro de la muestra de prueba cuando hago algo así como, por ejemplo, esto me fue ver toda esta muestra de windows a ejemplo gratis porque dije que quiero correr invocando disfunción todos estos instrucciones aquí. Probablemente también notes que en este momento no todo está involucrado uno por uno, justo de arriba a abajo función es solo una excepción a esta regla de la que te hablé. Lo estás definiendo en alguna parte, y solo se va a invocar cuando quieras, desde el lugar que quieras. ¿ De acuerdo? No se lee todo de arriba a abajo. Estás pensando en la función porque ahora mismo estamos cuando hacemos algo así estábamos saltando de este lugar a este lugar. De acuerdo, así es como funcionan las funciones cuando las invoca. Sí, saltando a la función de roca y estás corriendo las cosas que hay dentro del barco. Y, bueno, la función también puede regresar al lugar donde está involucrada. Un valor. Pero, ¿qué significa devolver el valor? Bueno, cuando escribes algo así como regresar cinco ahí. Lo sé aquí, ¿en serio? Tenemos algo bueno como cinco. Si tuvieras algunas instrucciones aquí sobre arriba, todas serían ejecutadas. Y luego después, tendríamos tus cinco. Eso es bastante útil. Ya ves pronto ¿Por qué? Pero vamos a comprobarlo. Por ejemplo, vamos a crear un Rabel y almacenar ese resultado de esa función a Dave Arabia, que se llama a y luego lo alertaremos. Entonces hacemos algo así. Como pueden ver, no tenemos cinco. Entonces lo que sea que tecleemos aquí, lo que sea que regresemos, será ahora. Empezar dentro de la variable A. Porque asignamos fue el operador por asignarlo aquí invocando la función. Y tenemos este regreso aquí y sólo va a ser reemplazado. Estas líneas van a ser reemplazadas por retorno diesel. Derecha Este lugar. Exactamente. Por lo que también puedes invocar la función dentro de la función así, ¿ verdad? A modo de argumento, solo estamos enviando a Kim, como, correcto, cinco. Vamos a comprobarlo. Como pueden ver, tenemos exactamente el valor aquí cuando el como la bomba bomba bomba los cinco. De acuerdo, así es como premia. Se puede devolver algo. Entonces, para resumir, invocar la función significa que la función va a ser ejecutada. Todas las instrucciones dentro tanto de función como del lugar donde se invocó la función va a ser reemplazado por el valor de retorno. Entonces en nuestra situación, ahora mismo, son sólo cinco fuera de curso. Este es un ejemplo muy sencillo. Entonces hagamos algo más serio. En ocasiones podría querer trabajar en variables que están al principio. lo sé,Por ejemplo, Por ejemplo, los valores escriben en el formulario por el usuario de su sitio web a la función aceptamos variables que son argumentos fríos en este momento. Vamos a crear algo sencillo. Más simple, por ejemplo, una función que nosotros en dos valores. Entonces vamos a crear la función. ¿ Abrimos anuncio? Como se puede ver, que el nombre sugiere que va a agregar algo. Y ahora podemos definir eso. Vamos a tomar dos argumentos, tú y vamos a definir parámetros de Perry. Se les llama aquí parámetros. OK, los llamamos, por ejemplo, X e y. puedes hacer lo que podemos llamarlos como todos, por supuesto, como variables. Y ahora vamos a crear los tirantes rizados. Entonces ahora podemos hacer es sólo cosas como anuncio y enviado, por ejemplo, a gratis y cinco. Y esto gratis va a estar ahora en los huevos, y cinco estarán en eso. ¿ Por qué variable? Y ahora podemos usar este valor enviado aquí dentro de la función para que podamos empatar, por ejemplo devolver X plus ¿por qué? Y ahora aquí hemos caminado el resultado de la operación después del mundo de regreso. Entonces es un lo podemos comprobar. Podemos, por ejemplo, hacer algo. Vi algunas variables apagadas y luego podemos alertarlas. Como pueden ver, tenemos ahora una y podemos cambiar ahora. Estos resultan bastante rápido simplemente enviando diferentes argumentos fuera de curso. Estos argumentos también pueden ser variables y otras cosas así. De acuerdo, sí tratamos de hacer algunas operaciones aquí sobre ellos. Entonces saludemos ahora otra función que va a dividir dos variables. Entonces, por ejemplo, función y yo lo llamamos dividir, y también estamos los llamamos huevos y ancho. Como pueden ver, podemos llamarlos igual. Al igual que están aquí y no habrá problemas con, ya sabes, um, cuál es cuál? Porque están en un alcance diferente. OK, esta cosa es un Scoble. Entonces para las variables, que no necesites dedo del pie preocupado cuando escribas te gusta el ejercicio, funcionará con la función anterior. Está bien. Y ahora sólo podemos morir Gran Bretaña X dividido por Por qué el problema es que por qué a veces puede ser cero y se puede dividir por cero. Entonces cómo hacer algo así como, ya sabes, informó al usuario que empató cero Está mal. Puedes hacerlo. Puedes comprobar ive usando la sentencia if Si por qué es igual a 20 entonces regresa. Significa que no hacen nada. También podemos informar primero de ejemplo otra duna que no puedes dividir por cero. Está bien, y luego regresa. Cuando no tenemos nada después del regreso, significa que la disfunción va a terminar aquí y volver. Definir. Y ahora, cuando tecleamos, por ejemplo, uno dividido por cero notamos que tenemos, um uno. Teníamos uno porque no cambié la función. King escribe Divide, No es parte de variables, pero, um bueno, el resultado fuera de difusión. Y ahora podemos ver que se puede dividir por cero, y entonces tenemos indefinido. Por lo que el resultado será el lugar donde involucramos esta función fue reemplazada por estos Return on porque no escribimos nada aquí. Tenemos su indefinido así en definido. Podríamos también, ya sabes, regresar por ejemplo, ID así. Uh, entonces, ¿qué da? Tan solo una alerta se puede dividir por cero. No necesitamos usarlos. Lleva aparatos ortopédicos, ¿verdad? Y probablemente también te estés preguntando por qué tenemos que regresar dentro. Puedes tenerlos tantos como quieras, pero después de regresar, lo sabes todo. Después del primer regreso que está involucrado, no se va a ejecutar. Entonces en nuestra situación, porque la segunda variable es lo cero. Apenas estamos regresando aquí y esta cosa no se ejecutará. Podrías teclear tu culo, pero ya sabes, para más quizá más claridad. Pero no importa. No es necesario escribirlo porque ese retorno sólo va a salir de la función. Por lo que regresar es también una salida de la función. Entonces si cambiamos estos dos por ejemplo cinco y él tomará 10 deberíamos cubrir también el resultado . Porque, bueno, esta afirmación si no es cierta. Por lo que este retorno no se va a ejecutar y el programa lo hará. Y aquí, por supuesto, todas estas funciones son simples. Simplemente te estoy mostrando la sintaxis creará funciones más difíciles más adelante. Ahora mismo, hagamos equipo esta lección como puedes ver, las funciones, las funciones, es solo un tapón de abrigo que podrías invocar en cualquier parte de tu abrigo y obtener el resultado. Pero, ¿por qué necesitamos funciones? Gracias a las funciones, si quieres cambiar algo en nuestro abrigo, podemos hacerlo solo en un lugar. El tablero de la función y si no tuviéramos funciones, tendría el mismo abrigo de operación en muchos lugares, dice lugares. Y si querías hacer un cambio sencillo, se llegará a hacer un cambio todos los lugares posibles. De acuerdo, tomará mucho tiempo y hasta nos cuesta, ya sabes, encontrar todas estas cosas. Lugares estaban usando Sus funciones ofensivas. Puedes reutilizar a los hombres tantas veces como quieras. El mismo llamado, lo que hace que tu proyecto sea más fácil de mantener. Y te ahorra mucho tiempo porque puedes reutilizar tu trabajo o incluso el de alguien como trabajo. Ya sabes, como por ejemplo, Jake, Donde marco Gracias a funciones. Nuestro programa también es más legible porque puedes ver fácilmente para lo que cada parte por supuesto, es Coat es responsable de Imaginemos una situación como esa Obtener valor de forma I d . Podemos crear. Podemos involucrar una función como esa creada antes, derecha y sí, puedes ver instantáneamente esta función. Use use forward olvidando valor de forma es decir, que ha conseguido forma I d Como variable ast el valor de esto muy es simplemente genial porque al instante dijo, ver que la disfunción va a simplemente obtener el valor de la forma. ¿ Qué idea es para mi d? No teníamos funciones va a tener en su lugar fuera de ella. Por ejemplo, 15 ojos de código que no nos informarían tanto como estos una simple línea aquí. Derecha Regla Nieto, analiza el abrigo para obtener más información del auto. Entonces recuerda que debes Kate funciones que son autodescriptivas. Lo que significa que cuando las lees, sabes lo que están haciendo en este momento, Cosas como esas podrían parecer que no son importantes para ti. Pero créeme, estarás agradecido por mí. Por toda esta información en el futuro, eso está todo en la lección. Muchas gracias. 18. Alcance, de variables: Hola Hoy vamos a hablar de alcance de ARABE ALS dentro de las funciones de script. Rango de alcance significa dónde en qué lugar está disponible la variable. ¿ Qué significa? Qué Hasta ahora te he dicho que todo se corre de arriba a abajo, pero hay algunas situaciones raras en las que esto es un poco diferente. La diferencia está en cuando estás ejecutando funciones cuando las estás creando, cuando estás usando variables dentro de ellas. Porque hay algunas cosas raras que suceden en JavaScript en otros lenguajes de programación es un poco más fácil aquí. Puede ser un poco holgada cuando no sabes cómo funciona. Entonces, centrémonos en cómo se reserva. De acuerdo, vamos a obtener la función de simple en una como prueba y vamos a hacer algo como muestra. De acuerdo, nuestro sencillo. Por lo que normalmente, cuando hacemos algo así y cuando lo ejecutamos, Como pueden ver, tenemos muestra, sabemos que es usted debe guerra, porque lo que esta función se ha definido aquí y donde ahora nosotros están corriendo, eso está aquí. Entonces, chicos , debería. El programa ya debe saber de prueba. Escribes sobre la función de prueba, pero cuando lo hacemos así. Te sorprenderías porque tenemos también buenos resultados bien en JavaScript antes de correr. Discreto porque ejecutar instrucciones en el guión Primer Intérprete está tomando todas las funciones. Todas las variables sí. Algunos van, ambos esculpir, y lo está guardando ahí. Y por ello, eres funciones en cualquier lugar que las crearas. Por lo que puedes tomar té como 100 líneas de sale. Otros abrigos, ¿verdad? Y cuando haces algo así aquí, el cuando invocaste prueba, puedes invocar tus funciones y el camino correcto. ¿ Por qué puedes hacerlo? Porque, bueno, está disponible en todas partes. Está en alcance global ahora mismo. Funciones disponibles en todas partes. También significa que cuando creas, por ejemplo, de un rebelde así, y cuando haces algo como, por ejemplo, alertas a Y cuando haces algo así, no lo eres, es que tenemos buenos cinco. Por lo que de alguna manera la variable se ve dentro de esta función. Está disponible en todas partes, pero hay una pequeña diferencia entre funciones porque, bueno, mira esto. Si hacemos algo mintiendo, lo llevemos a la alerta de comentarios. A. Por supuesto, veremos cinco, pero cuando lo hagamos de esa manera. No voy a decir nada. Está en definido ahora mismo. De acuerdo, entonces esto está disponible dedo del pie todo lo que está bajo la definición. Entonces esto es un poco diferente al comportamiento de la función, ¿verdad? Y de alguna manera se puede acceder al valor aquí. Es más, incluso puedes cambiarlo. Entonces cuando lo hacemos así, se puede ver ahora puede tener libre aquí, y eso es muy importante. A ahora se cambia, es igual. Y cuando lo hacemos así, notarías que es gratis y también es gratis fuera de la función. Por lo que significa que se puede cambiar el valor fuera de la función por defecto es un comportamiento muy diferente de otros idiomas. De acuerdo, si no conoces otros idiomas, entonces tal vez no sea algo que no entiendas. Ya sé, pero ¿tienes algo que eso sería raro? ¿ Qué es eso? Bueno, se puede crear algo lo que se llama variables locales porque a veces no se quiere cambiar algo fuera. Tendrías que tener algunas variables temporales para cambiar algo entre lo contrario, pero puedes algunas veces querer enviar thes value solo para, ya sabes, rastrearlo. No quieres cambiar el valor fuera. Se quiere, ya sabe, hacer algunas operaciones o necesidad. No quieres crear otro. Temporal estaba bajo cosas así. Y luego quieres crear exactamente un look de un rabelais bajo para crear un look de capaz de crear un parámetro. Acabamos de llamar a un ahora mismo. Y por ello, te darás cuenta de que cuando yo alrededor de este programa, es gratis y luego cinco porque ahora a y luego un cuerdo firmado para liberar está firmando el valor a la variable local. De acuerdo, entonces el aspecto de un Rabel es algo que está disponible entre sus alcances. En esta situación, es entre la portada, los aparatos ortopédicos, dulces de opinión, causando uno. Por lo que mira las etiquetas no están disponibles más tarde. Cuando no lo sé, hago algo así. Como se puede ver, libre en bombas, no el mismo libro. Sólo tienes una pelota aquí, entonces eso es todo. Siguen teniendo un azul más. Por lo que también significa que se va a eliminar después del clicker de cierre. El corsé, señor. También significa que eso va a temer a mi madre memoria de tu guión. Por lo que significa eso. Bueno, si solo quieres rápido operaciones en algo y quieres liberar Memoria, es buena idea hacer algo así, justo en lugar de tener todo en la chica, Bosco. Y ahora hay algo que necesitas entender también que cuando no necesitas, ya sabes, crear , , por ejemplo, parámetros. Para que sepas que puedes hacer algo así. Es lo mismo. De acuerdo, cuando creas una variable así, es casi como si lo hicieras de esa manera. Pero cuando luego puedes enviar argumentos, me gusta,ya sabes, ya sabes, mandar Q cinco o algo así. Eso, y por eso quieres crear parámetros a veces. Pero mira esto. Ahora es cada look más capaz de, como se puede ver, no hay buena libre y luego cinco porque tenemos aquí una variable local. Si lo elimino, no lo harás, es que ya no tenemos. Miran por encima de un rebelde, así que desde aquí estamos cambiando el valor. Pero también hay algo más raro cuando tú cuando venimos. Y esto significa, um no es eso ahora mismo ¿qué está pasando? No tenemos una variable global él. Estamos asignando libre a algo. ¿ Qué? ¿ Qué? No tenemos muy bookie retype. El problema es que se puede crear variable en JavaScript incluso si no se escribe bit variable antes de él. Cuando lo hagas de esa manera, se va a convertir en global. Variable, par dedo del pie es que se crea dentro de la función. Significa que ahora mismo asignamos a Frito A y también está disponible aquí. Como pueden ver ahora, tenemos libre aquí gratis y gratis aquí. Pero si lo hago de esa manera al instante, esta cosa no está disponible fuera del alcance. Es un candado de son capaces bien y que puedes ver ahora es gratis por lo que podrías ser ligero. Y ahora, um, ya sabes, es difícil entender ese inicio, pero solo necesitas recordar que cuando tecleas variable antes de que sea variable local . Si se crea dentro de la función, va a ser variable global. Es si se crea fuera de la función. Y sólo hay que recordar, por error, hacer nota, hacer algo así porque va a ser una variable global. Ellos, ¿verdad? Necesitas tener al menos creaste el declarado disponible o pesado. Eso es un asunto para aquí porque entonces se interpreta de una manera un poco diferente a la derecha. Te conté de las cosas que no necesitas escribir la parábola antes del antes el nombre de un rebelde porque a veces puedes cometer un error por ello. En eso son muy difíciles de practicar deporte. Entonces solo recuerda no por error, re odio a un rebelde sin la var ante ella o joven si no es parte de su para materia , no hace falta escribir el mismo libro aquí porque sería yo segunda declaración del , misma variable que está aquí. De acuerdo, así que no lo hagas. ¿ De acuerdo? Sólo está la lección. Muchas gracias. 19. Funciones de anonimo: Hola. Hoy vamos a hablar de funciones anónimas y de funciones interpretadas como una expresión como el valor de la variable. De acuerdo, ya sabes, hasta ahora sabemos que podemos crear una variable como, por ejemplo, así. Y entonces podemos asignar aquí. Ejemplo cinco. Y ahora el tipo de estas mismas boyas en Maestro, Si haces algo así, el diable estos fueron capaces es bebida. Pero, ¿quién otro? Cualquier tipo de rebeldes. Sí, Puedes asignar en JavaScript una función para variar Entonces, ¿cómo hacerlo? Simplemente escribe función aquí que el nombre de las funciones. Entonces por ejemplo, prueba. Entonces puedes definir aquí parámetros derecha Así, ya sabes variables. Pero no necesitamos vivir tipo nada ahí. Entonces solo creador apertura calibrar su cierre Curly brace dijo, Y luego el punto y coma y tenemos ahora un inicio de función dentro de esa variable y hay una pequeña diferencia al crear una función de esta manera en este momento, no está en el alcance global. Es en el interior esa variable por lo que podemos usarla ahora mismo sólo por debajo de la definición y al mismo tiempo podemos hacer algo así como ese sistema, por ejemplo. Y ahora podemos hacer algo así. Como puedes ver, no está funcionando porque ahora mismo lo está. Empieza aquí dentro. Y para conseguir la disfunción, sólo podemos hacerlo a través de estas variables. momento, esta variable es como una función. Puedes usar algo así X. Y luego invocas la función de que esto empiece por dentro así, como puedes ver. Um, bueno, entonces lo estaba ¿Deberían alertar? Como puedes ver ahora tipa muestra. Por supuesto , no funcionaría si hacemos algo así. Todo está funcionando como se pretendía. Por lo que no podemos invocar la función usando esta variable. Ahora podrías ser como, pero cuando ¿Por qué necesitamos este nombre? Bueno, no lo necesitamos. Entonces podemos usar aquí algo cuerpos llamados función anónima, que no tiene nombre. Anónimo era una persona que firmaba documentos, documentos con anónimos y nadie sabía su nombre. Entonces sí, esto sólo una función. Acabamos de conseguir animales porque no sabemos su nombre. No se necesita en este momento. Aquí, ¿verdad? No importa. Entonces si lo deseas puedes crear una enorme funciones si no te importa el nombre y sucede la mayoría de las veces en lugar de disertación como esa, pero en pero también se usa en frameworks. Cuando quieras enviar la función como argumento y no te importa su nombre tan pronto , verás algunas cosas como esa. Y pero, bueno, ya sabes, es un tema un poco avanzado por ahora. También podemos, por supuesto, enviar argumentos escuchados para que haríamos algo así como argumento uno y hacer algo así que podamos saber, lo mandó, por ejemplo cinco. Y como puedes ver ahora aquí. Pero simple cinco. Funciona. Respira el bien. Ahora intentemos hacer algo así como crear una función que ha conseguido como perímetro una función. De acuerdo, vamos a llevar esto a la sección común y vamos a conseguir la función que llamamos prueba, y él tomará como parlamentario, una función que tipeo tu F, pero puedes teclear, ya sabes, lo que quieras. Está ahí solo el nombre de la variable que iniciamos la función que se te enviará bien . Y ahora podemos, por ejemplo, enviar aquí. Ya sabes, algo así como cinco. Y ahora esto asignaría cinco a F. Pero podemos mandar aquí también una función. Y lo más cool es que aquí consentimos. Que la función sin nombre con la una enorme función Porque no nos importa su nombre Onda, podemos enviar su ya sabes, ambas funciones off. Ejemplo. Alerta de muestra más Ah, son simples. Sólo muestra así. Podemos, ya sabes, hacerlo un poco diferente de la manera que podemos hacerlo tú de esa manera. Entonces tenemos Sí. Ya sabes, uh, entonces vemos cómo se imprime todo. Bueno, tenemos flechas. Como pueden ver, cometí un error así. Entonces es una buena idea a veces, ya sabes, ah, tener cosas buenas. Formateado nueve Dent. Porque es más fácil que detectar algunos problemas. Entonces no enviamos disfunción aquí adentro. Entonces, ¿significa que así lo va a involucrar? Por supuesto que no. Tenemos que invocarlo dentro del cuerpo fuera de esta función. Entonces ahora mismo tenemos esa f aquí. Y sabes que podemos usarlo así porque acabamos de asignar esto a esto. Muy como puedes ver ahora tenemos aquí muestra y funciona bien. Y también podemos enviar a la disfunción dentro para su ejemplo exacto más X, Y podemos enviar a esta función alguna vez capaz un argumento. Como puedes ver, también funciona bien. ¿ Podemos, ya sabes, hacer argumentos del hombre en la disfunción? Por supuesto podemos auto ejemplo Argumento uno. Y aquí entonces voy a tiempo. Por ejemplo 20. Y ahora podemos, por ejemplo, en este argumento un dedo del pie que cuatro y enviarlo a la función que enviará a esta función. Sé que es un poco raro. Suena raro, y todas las cosas así son la mayoría del tiempo que se usan en programas avanzados. Entonces no te preocupes. No entendemos es en este momento estos no son toppings tan importantes que está al principio. Pero es bueno saber qué es esto cómo funcionan estas cosas cuando las lees. Porque algunos frameworks están usando cosas como esa y luego, sabes que te perderás en la voluntad fría. Leerías así el frío, ¿verdad? Entonces es buena idea a esto. ¿ Entiendes lo que está pasando aquí? Está bien. Entonces podemos invocar dentro de la función una función y tal vez como, ¿Por qué siquiera lo haría? Porque quieres, por ejemplo, por ejemplo, dentro de esta función de prueba, hacer algunas operaciones antes y luego enviadas a esta función un poco cambiada. Uso del valor. Sabes que quieres saber, por ejemplo, usar la disfunción. Si los valores eran iguales a cinco u otra función, los valores eran diferentes. Escribir Todo depende de la situación. Estas llegan situaciones al Fuego de Houston. Pero ya sabes, así funciona. También puedes devolver la función. Eso es cosa aún más difícil. A ver cómo hacer. Vamos a crear una variable. Vamos a subir y vamos a firmarlo una función que se llama Eso es otro miss one. Y ahora vamos con algo así. Um, vamos a conseguir un tipo perimetral. Y si tipo igual todavía, por ejemplo, bolas, bolas, entonces quiero devolver diferentes funciones fuera de ejemplo función que pensaría que es un nombre de argumento y lo haré Alá son bolas altas de lágrima y luego el nombre de toros, derecho. Pero de lo contrario sabemos que estos chicos conocen el balón tan bien devolvió la función con el nombre también, pero esta vez bien, serían casi las mismas ideas. Para que lo podamos copar. No lo somos, Diga, jefe. Nos gusta el alto nombre. Y sabes que habría otras operaciones. Por supuesto. Además, yo soy porque es uno sencillo. Por ejemplo, para pelotas necesitarás venir algunas cosas como, ya sabes, él es salario diferente manera Anderson es así para que puedas hacer algo así. Y ahora estás devolviendo funciones, ¿verdad? El valor Oh, el retorno aquí para la disfunción será la función. Entonces significa que si hacemos algo como hola y entonces decimos aquí bolas y estamos en este programa es que se puede ver que no pasa nada. ¿ Por qué? Porque ahora mismo tenemos ¿qué? Esta cosa En su lugar, Mueve esto. Creo que porque como dijimos en la lección sobre funciones, cuando devuelves un valor, realmente, devolviste el dedo estos después de su regreso. Palabra clave. Entonces significa que aquí tenemos disfunción y significa que tenemos buena la función que podemos usar? No. Por lo que deberíamos asignar estos, por ejemplo función devuelta a la variable así. Y ahora podemos involucrar disfunción usando estas función devuelta. Como puedes ver ahora, funciona. Pero aquí nos hemos puesto indefinido. ¿ Por qué? Porque en este momento deberíamos decir y un argumento a estas función devuelta con el fin de ver algo después de ella. Entonces, por ejemplo, mi nombre como se puede ver highballs Ártico. Y ahora si hacemos algo así en la línea 42 Así que significa que estamos enviando a la función alta. Entonces hoy a la una, algo así, necesita que esto no se ejecute. Pero sí, esto se correrá y sólo veremos alto. Y mi nombre correcto. No voy a ver las embarcaciones porque el tipo no es ambos. Entonces así funciona. Podemos enviar la función bien, un argumento Usted consiente muy ableto alguna función y devolver la función dependiendo sus argumentos que se enviaron. Como puedes ver, cosas como esas son un poco adelantadas Y no te preocupes Si no lo entiendes en este momento, solo puedes seguir adelante. Puedes volver a estos cuando conozcas mejor javascript. Cuando sabes que empiezas a hacer cosas avanzadas. Las cosas son así se usan en marcos. También notarás que los eventos a veces lo están usando cuando quieres registrarte e incluso sabes que quieres, por ejemplo, enviar una función para involucrarte cuando algo sucede. Entonces, por ejemplo, haces clic en algo y esta cosa se llama incluso hablaremos más de parejo y eventos . Y luego verás que cosas como esa a veces son jóvenes y tal vez no tan duras codificadas así. Pero esta parte de estas cosas que nosotros que podemos verlo,ya sabes, ya sabes, cosas como esas se esconden la mayor parte del tiempo de ti. Y cosas así las escriben personas que están escribiendo bibliotecas. Y solo estás usando cosas así. Simplemente estás enviando, ya sabes, funciones dedo del pie, por ejemplo, otra función. Y hay un código que está trabajando en ellos, algo que se ve similar a eso. Ya sabes, están revisando. Dar su cómo se ven los argumentos, y ahí firmando las cosas correctamente. Por lo que funciona bien, la mayoría de las veces, llamado así está oculto. Pero necesitas al menos saber, yo sé que existe. Entonces entiendes cómo funciona, verdad? Correcto. Por lo que no escribes tu abrigo aprendiendo todo de memoria. Es buena idea entender cómo están funcionando las cosas porque entonces puedes crear mejor abrigo . Esa es sólo una buena lección. Muchas gracias. 20. Objetos: Hola Hoy te diré cuál es el tema, cómo crearlo y cómo usarlo. Objetos ab solo contenedores para almacenar variables y funciones que se llaman métodos temáticamente relacionados entre sí para una reutilización más fácil. ¿ Es posible definirlo un poco simplemente de distancia? Sí. Todo a mi alrededor es un objeto. Sí, estoy mirando el monitor. Yo estoy mirando el curso o que se está moviendo aquí. Todo lo que puedes ver se puede llamar objeto. Y puedes usar objetos por los que puedes definirlos, Ya conoces las variables. Y se puede decir qué acciones se van a hacer en este Objetos creando funciones y muy potenciadas están describiendo los objetos son fríos. Ah, esta vez algo así como fiestas de perlas. Está bien. Y bueno, vamos a crear un ejemplo que podríamos, ya sabes, crear algo. Pero primero, creo que solo podrías usar los ejemplos de ejemplo que ya están creados Cuando vas a la red Mozilla Developer, hay un chico. También hay totalmente o para conductores. Mantén libre uno Pero e Cuando estás aquí, puedes encontrar algo así como referencias construidas en objetos. Como puedes ver, hay muchos objetos construidos que puedes usar. Hay muchas propiedades, tan vory botas que están describiendo estos objetos y funciones que pueden ayudarte a trabajar con ellos. Eso es realmente, realmente genial. Por ejemplo, también tienes algo como motor de objeto de documento. Hablamos de esto más ligero. E. Y dentro del modelo de objetos actual, existe el deseo más importante, que se llama documento Documento está describiendo el documento fuera del HTML cinco. Vamos a usarla ha utilizado el documento. Objeto Mm. ¿ Qué? Para poder usar el objeto, solo tecleo el nombre del objeto. Y luego pateé ese punto Y luego, como pueden ver, puedo acceder a todos los valores posibles ahí Y en este editor ese azul son las variables. Las propiedades, correcto, Y la roja son los metales que puedo usar. Y ahora me gustaría conseguir elemento por idea que te envié y doy mi consentimiento aquí, por ejemplo. Ya sabes, llamemos a este tipo de prueba. Entonces tengo bien ahora por estas materias que fue creada por alguien sí sé cómo fue creada, cómo funciona. Yo solo quiero saber que funciona así. Simplemente se pone este elemento por estos i d. Y ahora escribo aquí, por ejemplo, Vardy. Si pero lo que sea. Yo sólo quiero asignar el valor de retorno a esta cosa. Y vamos Allard, Como puedes ver, dentro de un día tenemos buen objeto que se llama html diva limón. Por lo que acabo de conseguir otro objeto que puedo usarlo. Se llama html dif un limón. Como se puede ver, está dentro del modelo de objeto de documento. ¿ Verdad? Y cuando vamos aquí, podemos leer un poco más sobre ello. Se puede leer qué propiedades hay dentro y cosas así. Um pero bueno, y los objetos, um, hay algo bien dentro del HTML tiene algo así como una propiedad que se llama HTML interno. Podemos hacer algo, Dave en su html y ahora podemos asignar un letrero aquí diferente. Creo que eso será dentro del dif que obtenemos usando disfunción aquí para que podamos teclear aquí. Entonces, por ejemplo, este es nuevo texto Ahora, cuando actualicemos, como se puede ver, cambiaría la perspicacia del valor. Eso es realmente genial porque porque en este momento lo podemos decir cambiar el valor de cualquier cosa en nuestro sitio web dinámico, ya sabes, podemos comprobar por ejemplo aquí. Si alguien hizo todo correctamente en el formulario si sí, entonces diríamos: Oye, Oye, todo está bien. Podemos incluso insultar aquí una imagen, ¿verdad? Podemos hacer lo que queramos con sólo saber esta cosita que eso es tan poderoso, podemos hacer lo que queramos en este momento. ¿ Verdad? Se puede comprobar si, por ejemplo Um este tipo tiene el tamaño de documento así. Queremos que Teoh disminuya todo dentro de nuestro documento. Podemos hacer cosas así porque ahora mismo tenemos buenos objetos que son creados por otras personas Will por supuesto, luego algunos de ellos en las próximas lecciones las cosas más importantes de ellos. Um pero va a ver que es tan poderoso. ¿ Verdad? Y también puedes crear tus propios objetos Eso también es útil. Por ejemplo, escapó de un objeto al que llamamos persona y cómo hacerlo. Simplemente asi no lo tienes es solo lo creamos como variable normal, ¿ verdad? Pero ahora mismo, fin de crear un objeto deberíamos crear aquí algo como Curly Brace ER's así , y significa que acabamos de crear objeto, que se llama persona, y ahora él lo firmó. Podemos crear las variables, las propiedades que describes estos objetos, lo que puede describir. La persona persona tiene un nombre y luego solo un poco tipo de nombre y ese nombre puede tener valor. Entonces, por ejemplo, son así con el fin de hacerlo, sólo escribimos la guerra clave que la columna y el valor de la, um fuera de la propiedad. Y ahora podemos crear más de ellos. Podemos usar la coma dos por separado. Entonces, por ejemplo, apellido en ADN. Ahora voy a escribir mucho de lo que nuestro truco. Y como pueden ver, tenemos bueno ahora a los valores. Pero, ya sabes, escribirlo así en una línea, es muy mala idea. Deberías hacerlo de esa manera porque ahora mismo es más legible. Como puedes ver, instantáneamente es más fácil de leer, y entonces podemos actuar es todas estas cosas. Entonces, por ejemplo, puedo hacer a nuestra persona nombrada así. Como puedes ver ahora es Rx. Entonces hicimos lo mismo como aquí accedemos al HTML interno fuera del elemento profundo que conseguimos aquí por este método. Y, bueno, podemos salir de curso, cambiarlo dinámicamente. Aquí te damos ejemplo mirando más. Como pueden ver, se ha cambiado, ¿verdad? Podemos cambiarlo. Es probable que lo hicieran aquí. Ah, a la vez se puede, por supuesto, dinámicamente en algo nuevo Edad 15 por ejemplo, Al igual que en puedes hacer sabes que podemos en cualquier elemento en cualquier momento. El genial también es que puedes usarlo así ahora, ¿no? No necesitamos usar otro que ellos también más fácil para nosotros a las cosas ladrar más tarde. Entonces el html interno y ahora podemos escribir persona, por ejemplo nombre, ¿ verdad? Y funciona. ¿ Qué pasó cuando nosotros, por ejemplo, a cosas así? Como puedes ver, dice objeto objeto porque hay un valor predeterminado. Mi pensamiento que es Irán. Cuando quieras interpretar el objeto como la cadena. Ah, ese método se llama a racha, vale, y puedes anularlo. Pero sólo declarando a cadena. Y ahora podemos crear la función de un animal que lo va a anular. El comportamiento predeterminado. Ahora podemos volver La cosa que queremos simplemente decir que cuando hagamos algo así, se puede ver que vamos a ver el como el tipo debilitado aquí. Sea lo que quiera esto será justo lo que se mostraría cuando alguien quiera dedo del pie interpretar a su ninguna persona esta variable como una cuerda. Entonces cuando haces algo así para que podamos regresar. Aquí te dejamos por ejemplo, esto que, por ejemplo, nombre como puedes ver ahora nosotros, por defecto, mostramos tu nombre. Pero también puedes hacer algo así. Este apellido vago son Rick se objetaría? Funciona. No, es solo un valor predeterminado. Y, bueno, ya sabes que puedes crear tus métodos mani. A esto se le llama el Método Tu Propio. Sé que puedes hacer algunos conteos. Cuánto tiempo hasta que te lleves a este tipo será extraño viejo. Tendrá 18 si los bordes son más bajos que entonces. Nosotros decimos que él es No. 18 o algo que podamos hacer nuestros propios métodos. Entonces es todo viejo, por ejemplo, como esa función y ahora fuera de curso, necesitamos escuchar una coma, y puedes comprobar si eso es cretin h algo así. Y si la edad es menor de 18 entonces regresa False De lo contrario devuelto. Cierto. Correcto. ¿ Esto en Dhere? Un cínico, um, Y ahora mismo podemos usar thes lo conocimos. Persona es vieja, como puedes ver. Um, esto y tu texto Mm. Porque, um pero que bien, la persona este adulto está devolviendo las faltas como bolos. Y esto simplemente no es aparecer todos los días del camino muerto. Por supuesto, aparecería porque ahora sólo es gritar, llorar. Um, persona es Oh, sé que está encendido. ¿ Por qué no? ¿ Por qué no? No está funcionando dentro estar muerto con. Entonces es buena idea que cometa estos errores por lo alto. Ahora, um, te voy a mostrar algo que es muy importante, porque podrías cometer este error también. Y es bastante guay en un palo. Sí. ¿ Cuál es la edad aquí en este momento? No son estas edades esta edad aquí podría ser la edad definida aquí. Entonces algunos juegan así. Tenemos que decir exactamente a javascript que queremos ir a este borde, y sólo escribimos que este ese ocho. Esto siempre está apuntando a desviar capaz que es lo más cercano. Entonces en esta situación dentro de este objeto. Entonces está interpretando ahora mismo aquí la h aquí y por ello. Como pueden ver ahora hemos llegado aquí cierto porque, bueno, las edades arriba cuando tomamos, por ejemplo, 15. Como puedes ver ahora, es falso. Entonces está funcionando. Creamos nuestra propia función mirando. Y como puede ver, estas funciones están relacionadas entre sí. Estas variables están relacionadas entre sí. Entonces es una buena idea, ya sabes, almacenar cosas que están relacionadas entre sí. Puedes crear también Ah, ya sabes, objetos escribiendo antes de algo como nuevo objeto y luego bombardear así. Podemos llevarnos esto un segundo. Uh, puedes ver que está funcionando, pero no vuelvo a comentar usando esto con esta cosa. Tú sólo te lo estoy mostrando. Entonces sabes que algo así existe. No lo recomiendo porque es más lento, y no es tan fácil de leer como este. Tú. También hay otra forma de crear objetos, pero podríamos mostrártelo en la siguiente lección porque, bueno, esta es una metáfora, ya sabes, ya sabes, crear muchos objetos de un tipo. De acuerdo, es Solo es advenimiento más avanzado. Detener estos los conceptos básicos que debes saber. El segundo es cosa muy, muy avanzada. No mucha gente lo usará. Entonces si lo entiendes, ahora puedes seguir adelante y leer sobre muchos objetos que puedes usar por ejemplo, fecha uno donde puedes dar cuenta de cosas de tiempo y otras cosas como esa. Ah, hablábamos de uno más importante en el siguiente. Menos. Sólo hay esa lección. Muchas gracias. 21. Función de constructor de objetos: Hola Hoy te hablaré de la función constructor. Acabamos de llamar en otros idiomas. ¿ Clase? ¿ Qué es Y por qué necesitábamos? Imaginemos una situación así quiero crear ahora una segunda persona. Entonces, ¿qué hago? Yo haría algo así. Yo lo llamaría persona a Evers arriba. Yo cambiaría aquí el nombre a, por ejemplo, Viola y la edad. Y me gustaría, por ejemplo, cambiar un poco la disfunción Y entonces crearía persona libre 4% 5 ho. Ya sabes, ya sabes, sería horrible si quisiera Entonces cambia algo dentro. Por ejemplo, me gustaría añadir otra vida patrimonial, por ejemplo. número telefónico son el sitio web o algo que eso sería simplemente horrible. Necesitaría agregar en cada objeto posible como ese esta propiedad si quisiera cambiar algo dentro de la función si la diferencia Así funcionaría en b diferente donde a También me llevaría mucho tiempo porque necesitaré cambiar cada posible objeto así. Por lo que necesitamos algún tipo de forma para crear todos estos objetos y esta cosa se llama función constructor de clases en javascript. Por lo que en breve clases de esta forma para crear objetos. Una forma como esa se utiliza para recolectar objetos en una sola clase. Es por eso que su llamada cruz Se puede crear por ello. Hombre. Es diferente el uno del otro. Objetos ahí difieren entre sí por nombre diferente como ese justo sobre el sitio. Nombra toda la rabia, lo que sea, pero con las mismas propiedades y métodos al mismo tiempo. Correcto. Entonces, ¿cómo hacer algo así? ¿ Cómo resolver este problema? Podemos crear un constructor de funciones. Entonces? Entonces en javascript, es realmente difícil deudar. ¿ Te importa si la función es una función de ella? Es una función. Constructor es un extraño por qué no crearon una nueva palabra clave como clase. Pero bueno, sólo hay que recordar que él la función puede ser a veces esa función. A veces puede ser un constructor. Y ahora escribirás aquí el nombre fuera de este constructor de función y, por ejemplo, ser persona. Y este es el lugar donde debes notar exactamente Si esta función se usa como constructor de funciones o no es la función porque, ya sabes debes usar el verbo para las funciones que obtienes elemento por I d Esta la función cuando ves algo así como esa persona. Bueno, esto no es el verbo, justo entonces Esto es un constructor de funciones. Y mientras que cuando veas un cuerpo también, notarás que esta no es la misma noche esa función porque no eres el regresa aquí. Ah, el valor. No estás invocando la función como no Bueno, no estás invocando el constructor de funciones que solo estás usando Obtén tu construcción del objeto usando la palabra clave new así que lo haremos. Entonces hagamos lo mismo como arriba cómo hacerlo ahora. Ahora tenemos dedo del pie tomar ah argumentos a esta persona que va a representar a esta persona. Entonces en nuestra situación es un nombre y es nombre de Asare, correcto Y también es edad. Y ahora deberíamos crear propiedades cómo crear propiedades para el constructor de funciones. Deberíamos usar esta palabra clave porque esto apuntará al valor de la construcción real Think mm object Ok. Fuera del que queremos construir usando el constructor de persona lo que puede ser usemos el constructor. Entonces vamos a crear una persona por ejemplo, variable X. Una persona nueva cuando te enviamos, por ejemplo, ¿Rick es así, por ejemplo, Como eso? Y ahora vamos a tenerlo bajo lo común. Entonces no tenemos problemas con estos y esto, ¿verdad? Y no enviamos aquí, Eric. Enviamos aquí a discernir sería Ártico y a los 39 años ¿verdad? Y ahora queremos construir usando estas nueva palabra clave esta persona y usarla como variable x . Entonces así necesitamos ahora crear propiedades. Entonces lo estamos haciendo escribiendo esta palabra clave y eso y solo estamos creando el nombre de esta propiedad. Podemos llamarlo como queramos, O r Pero sólo lo llamamos igual como si estuviera aquí. Entonces no tenemos problemas después construyendo nombres especiales. Es bonito, ya sabes, se puede malentender al principio porque puede ser como este nombre es el mismo que este nombre. Ya sabes, incluso yo usé este tiempo a veces lo correcto. Uh, sólo hay que recordar que esta es la cubierta baja capaz de que estos en que se puede acceder entre estos rizado er's derecha, el dis creado porque estamos enviando aquí el nombre ártico aquí Cuerpo también necesita recordar que este ese nombre está accediendo no al nombre que se envió a esta función. Pero está accediendo al preguntado Teoh el objeto que queremos crear. De acuerdo, entonces ahora estos nombre SAR y yo escribo Es nuestro nombre esta edad y ahora sólo podemos hacerlo algo así como esa X edad. Y como pueden ver tenemos esta noche, funciona bastante bien. Es una buena idea decir también que se puede acceder a cosas dentro de los objetos escribiendo algo así. También es posible hacerlo de esa manera. De acuerdo, así puedes hacerlo de esa manera, o puedes hacerlo, papá. Camino a seguir. Y ahora vamos a crear funciones en el interior. Entonces, ¿cómo hacerlo? Esto es adulto igual a función, y ahora la molestia la función. La diferencia es que necesitamos un punto y coma aquí ahora. Y también probablemente notes que no estás agregando comas así. Um, podemos copiar las fronteras para que no tengamos que volver a encarecer. Podemos copiar esas tres funciones ng de esta a función de cadena. Um, sin claro, esto. ¿ De acuerdo? Lo mismo en colonia y ahora entramos en algo que vemos podiátrico Ártico. Y funciona muy bien, ¿verdad? Y lo genial es, ahora que podemos ¿Qué? Ahora podemos hacer algo así. Bomba, bomba, huevos! ¡ Tranquilo! Conjunto. Odjick! Sé, por ejemplo, Yolanda, agonizo lo que podamos cambiar aquí valores y tenemos Bueno. Ahora, por ejemplo, podemos algo así en HTML. ¿ Verdad? Nosotros queremos llevarnos a este tipo. Estos tipo. Uh ¿Qué? ¿ Por qué? Um enfermo. Y tenemos toda la gente nueva impresa afuera. ¿ Alguna vez todos no notan también que va a ser bueno? Tuvimos más fuera a la gente le gusta crear algo. Sería este frío y Eric. Pero hablaremos de ello más tarde. Próximas lecciones. Pero como pueden ver, estamos ahorrando ahora Tiempo. ¿ Por qué? Porque si quieres crear ahora nueva propiedad, solo escribimos esto Y ahora el nombre de la propiedad que queremos crear, por ejemplo, por ejemplo, sitio web y tipo de sitio web. Y nosotros consentimos aquí ahora sitio web justo así. Y va a funcionar ahora. Podemos usarlo enviando aquí valor si no envías. También funciona porque Ahora es simplemente indefinido, debilita, define o no. Entonces es bastante guay. Ahora podemos cambiar, ya sabes, por ejemplo. Ah, quiero escribir más cosas en dos cuerdas más bálsamo, esta H derecha así. Y ahora contra la HQ, ¿no? Podríamos, ya sabes, ir a algo como Age Column, y podemos agregar Instant in y se agrega dedo del pie todos los objetos. Es una vez con cuando lo creamos así, tendremos que cambiarlo en cada lugar posible. Es por eso que las clases son tan geniales y debes usarlas cuando, por ejemplo, quieres acceder a valores desde la base de datos. Por ejemplo, imagina situación estás usando algo. ¿ Será este culto Ajax y deberías aprender de este objeto? Sí, Este es un objeto bob que tiene algo bueno en algunos métodos y propiedades que nos permite actuar BH ser y PHP entonces puede, por ejemplo, acceder a base de datos para que pueda ir dedo del pie, para ejemplo, mi aceite esque. Obtén información y devuélvela usando el Ajax, aunque objeto dentro del JavaScript sin recargar tu sitio web. Puedes abdicar bien tu sitio web. Eso es muy guay. Puedes actualizar tu contenido de tu sitio web sin recargar tu sitio web, puedes, Ah, eso es realmente, realmente poderoso. Se pueden crear scripts muy útiles por ello. Y bueno, entonces puedes, por ejemplo, ya sabes, vamos a la base de datos, vamos a tomar o coreanos y te deja saber, volviendo t al guión en el JavaScript. Y ahora tenemos, por ejemplo, por ejemplo, muchas personas que tanto algo como, sí, sí, entonces sería buena idea, educado fuera de los objetos para ellos porque entonces podemos acceder a todos estos valores bastante fácil. Pero también sería una mejor idea crear una función constructor clase A porque tenemos hombre fuera de ellos. Y si quieres cambiar algo, entonces sí, lo haré estaré bien, porque podemos cambiarlo instantáneamente solo escribiendo una nueva propiedad, una nueva función u otras cosas como esa. De acuerdo, eso está todo en la lección. Muchas gracias. 22. Prototipos: Hola Hoy te diré lo que este prototipo y fue a usar prototipo y así como puntera agregar paridades de prop fuera fuera de la función Constructor fuera fuera de fuera. Discutir cómo hacerlo con normalidad. Si quieres agregar una nueva propiedad dedo del pie cualquier objeto solo puedes escribir pasteles luego dudar. Y tú, Joe Y solo puedes imaginar aquí el nombre de nueva propiedad. Fiesta. Entonces algo nuevo equivale a cinco y que podemos actuar. ¿ Es bastante fácil? Al igual que la muerte. Y como puedes ver, ya tienes aquí cinco pero fuera de curso. Este algo nuevo. Esta propiedad no existe en otros objetos. ¿ Por qué? Porque todos estos objetos son incidentes diferentes. Es objeto diferente. De acuerdo, x y y que todos son diferentes. No se conocen el uno del otro. Si quisiera cambiar esta propiedad en todos los objetos posibles a la vez, debería haberla cambiado aquí. Debí haber hecho algo así. Algunos piensan nuevo y luego aquí equivale a cinco y no, hacen algo así. Ahora está bien, pero a veces hay un problema. No tienes acceso a este lugar. Y bueno, podrías estar como si hubieras tenido. Yo estoy escribiendo esta buena. Siempre tengo acceso aquí. Sí, pero ahora imagina la situación. Cuando estás usando a alguien camina Bueno, puedes por fuera de curso cambiar las cosas ahí. Pero imaginemos una situación como, por ejemplo, Jake, donde J query es un framework donde tienes buenos lotes fuera de herramientas útiles. Pero a veces quieres crear tus propias herramientas y quieres compartirlo con otras personas. Y estas cosas se llaman enchufes. Y entonces será genial si no necesitarías dedo del pie cambiar algo dentro de este tapón porque sabes que es la mayoría del tiempo compilado. Se magnifica, y va a lucir lejos por ello. quiere tenerlo fuera del archivo de script J Courage Java. De acuerdo, y luego viene algo así como prototipo. prototipo es un modelo preliminar, ¿verdad? Es algo. Lo que viene primero y todo después de este prototipo hereda todo por dentro. Ah, este prototipo. Entonces, ¿qué? Incluso esta persona constructor de funciones está heredando todo del objeto que prototipo. Puedes leer más sobre esto, piensa aquí y ah bueno, puedes haberte notado probablemente que cuando escribimos por ejemplo start, podrías escuchar muchas funciones fuera que no creamos y todas ellas simplemente son heredadas . Lo que significa que nosotros, ah, sólo, ya sabes, como, los encontramos a quién? Acaba de añadirlos a la persona de funciones instantáneamente sin siquiera, ya sabes, hacer nada y se puede cambiar el prototipo. Ya conoces el problema en su modelo muy fácilmente fuera de la función. Ah, sólo escribir el nombre del nombre de la causa con esta persona Y ahora sólo podemos un prototipo y luego eso. Y ahora podemos, por ejemplo, decir: Hey, quiero crear algo nuevo, y entonces igualará cinco. Y como puedes ver, funciona bien. Puedes cambiarlo. Como se puede ver, está funcionando. ¿ Quién lo agregó a la clase? No lo agregamos al objeto como aquí en la línea 30 para agregarlo al prototipo fuera la clase. Y esta cosa se usa en una situación. Como dije, cuando quieres crear aplausos, por ejemplo para requerir, fue muy útil para ti cuando finalmente aprendiste usar Jake. Y queremos crear algunos enchufes y compartir con otras personas, ¿ verdad? Y pero es que sólo se utilizaron situación. Prototipo. Ahí hay algunos. También otras situaciones raras fueron usarla bien. Tengo Bean traído con Web desarrollando desde hace más de 10 años, y no lo usé ni una sola vez porque hay mejores maneras de escribir, sabes, piensa en esquema Java y en todos los demás lenguajes de programación, para ejemplo, puedes usar composiciones de navegación, lo que significa que estás creando objetos dentro de objetos, lo que significa que puedes conseguir el colapso correcto y nos estás tomando un argumento, un objeto, y solo estás objeto de firma dentro de esa función. Y así es justo como debes escribir código en lugar de hacer algo bueno se llama herencia. herencia en JavaScript es tan compleja y al mismo tiempo se ve tan mal que solo te recomiendo que solo sepas, aprendas esto porque , ya sabes, es muy usar algo así e incluso es conocer el recomendado. Hay mejores formas de hacerlo. No te tomes tu precioso tiempo en aprender algo así. De acuerdo, esa venta de esa lección. Muchas gracias. 23. Arrays: Hola Hoy te diré lo que nuestros ojos y cómo usarlos. Y además de esto, les diré por qué incluso se molestan en usar errores. De acuerdo, entonces por qué usarlos y Bueno, ¿qué es Harry? Harry es serio fuera de valores que están uno al lado del otro. Las áreas son contenedores para estos valores. OK? Y puedes actuar. Está todo fuera de los valores usando sound kind off index 012345 Están uno al lado del otro y puedes usar, por ejemplo, el nombre del área y luego top zero y conseguirás que los actores al valor que hay ahí. Entonces ahora podrías ser así cuando me gustaría usar algo así imagina una situación como esa queremos recuperar de la base de datos Algunos valores como, por ejemplo, por ejemplo, Pearle docks. Por lo que crearíamos algo así como un producto variable uno. Pero oye, hay un producto más. De acuerdo, entonces cómo lo llamaríamos productivo para tal vez proteger producto gratuito para Y entonces nosotros cuando en otro producto necesitaremos de nuevo el producto cinco. Y tendremos que cambiar el código que sería muy horrible, ¿ verdad? Y bueno, por ejemplo, cuando miramos el sitio web index dot html, tenemos aquí estos ítems estamos realmente apestan los cursos de programación y autos de desarrollo Web es lo que si quiero agregar otro curso de autos de ejemplo, algo así. Como puedes ver, lo agregamos aquí al instante. Pero bueno, si javascript solado haría algo con esta lista ítems aquí y lo haremos manualmente con cada apagado este ítem y me asignó al mismo libro que necesitará también adherirse. Otra habilitada sería apenas bota Hori. Tenemos algo así como una matriz que simplemente puede hacer almacenar todos estos valores juntos. Entonces, por ejemplos, podríamos escribir productos iguales. Y ahora aquí corchetes así. Esto significa que queremos al cielo, Eric. Y ahora podemos asignar a esta matriz estos valores, um o simplemente podemos dejarlo y luego podemos lo mismo más adelante aquí. Pero hagámoslo. Vamos, por ejemplo, digamos Hey, quiero aquí y allá un tejido el valor como, por ejemplo, html on y, por ejemplo, pH siendo, por ejemplo, mi escwa derecho algo así. Y ahora mismo tenemos un área que está almacenando valores libres y se puede acceder a ellos usando índices como ese. Entonces para poder llegar, por ejemplo,a por ejemplo, este tipo de aquí, necesitaremos teclear los muelles de perlas. Y ahora que corchetes. Y como puedes ver ahora, cuando nos refrescamos, tenemos aquí ahora ECs h d m o.Así que podrías ser como, ¿Por qué cero aquí? Porque en JavaScript tienes que venir de cero cuando tus cosas de indexación. Entonces esto significa que esta cosa tiene bueno en el cero. Esto significa que tiene uno. Esta cosa tiene que llegar Así que no es como 12345 Pero hay que venir de cero. OK, entonces el último elemento siempre es menos uno. De acuerdo, Eso así es como se accede a las cosas dentro. También puedes agregar a los valores muy nuevos existentes para que lo puedas hacer ejemplo productos y quiero agregar al final Así nos hizo Un limón está aquí. Eso dolió. El cuarto elemento es que el índice libre. Entonces deberíamos escribir algo así y ahora podemos escribir aquí um, por ejemplo, JavaScript ¿verdad? Y ahora podemos acceder a ella usando algo así. Como pueden ver, podemos conseguir cuando no escribimos nada aquí. Simplemente tecleamos productos. Como pueden ver, tenemos ahora, um, um, todos los valores separados por coma. Podemos verlos aquí bastante fáciles. Entonces si escribo algo así, sólo cambiamos el valor de este tipo de aquí. ¿ Verdad? Mi escolta a Javascript. Y como puedes ver, está funcionando bien. Entonces si quiero cambiar la Primera Enmienda, tomaría algo así, y lo está cambiando. Entonces Pero, por ejemplo, no quieres No puedes saber, las cosas aquí a veces Porque será estúpido si tenemos dedo del pie cada vez, cuenta qué maney si exactamente. Y luego cambiar algo llamado Cuando quieres dedo del pie final algo al final. Tienes que llegar a soluciones que puedes usar. Una de las soluciones es el dedo del pie. Usa la propiedad que está dentro de la zona porque el área es realmente un objeto. Y como aprendimos antes, los objetos tienen buenos métodos y algunas propiedades que puedes usar. Ah, Y cuando escribes algo así como productos ahora podemos usar el operador de puntos y luego podemos usar algo así como la longitud. Longitud es devolviendo la longitud, la cantidad fuera de la cantidad fuera de las cosas que están dentro del área. Por lo que esta vez será qué, Gratis 12 gratis. De acuerdo, entonces es lo mismo, como si escribiéramos algo así. Entonces en este momento estamos agregando al final del área, el JavaScript y como puedes ver, está funcionando bien. También se puede cambiar el último valor. Entonces, por ejemplo, al escribir así, así que tenemos cuidadores libres quieren que esté quieto y sí, estamos cambiando a este tipo aquí. Y como pueden ver, lo cambiamos. Pero también tienes algunos métodos porque, bueno, bueno, esta cosa es un poco larga, ¿ verdad? Podemos hacer algo así como productos. Eso y ahora empujar empuje es solo empujar las cosas al final. Entonces cuando escribimos aquí Ah, algo nuevo. Entonces, por ejemplo, Grant Js notarás que lo estamos empujando al final de la zona. Ya hemos estado escribiendo algo así. Por lo que siempre que esto sea aún más fácil. También debes saber que puedes crear un ascenso. No hay sintaxis de dosificación como esa pero se puede hacer algo como ver ah variable. Y, por ejemplo, nombre apagado. Está bien. Y ahora nuevo Harry. Entonces debido a que este es un objeto, puedes crearlo así dosificando el constructor de la función. ¿ Verdad? Y, sí, ahora puedes usarlo. No puedes, ya sabes, crear aquí algunos valores para leer, y haremos lo mismo. Pero no uses estos. Solo necesitas saber que algo así existe. Si lees el código que sería creado por alguien más estos simplemente manera más lenta. Está bien. Estos más lentos no es de manera tan eficiente como esta de aquí. El pensamiento de tesis correrá más rápido. Usted en su navegador web. Entonces no utilices el método que debo decir que acabo de mostrarte. De acuerdo, usa este. También debes saber que hay algo que se llamaría asociativo un aumento. Arrays asociativos significa que sí conoces el uso 012 índices. Pero estás usando valores clave. Se asignan el uno al otro. ¿ Cómo funciona? Bueno, se congestiona crear en el área escribiendo, por ejemplo, persona variable. Y ahora podemos hacer algo así y que podemos escribir persona y ahora nombre. Entonces ahora sabemos exactamente que quieres revolver aquí Nombre, correcto. Y exactamente ahora sabemos que queremos escuchar tienda como endurecimiento e ir. Pero lo cierto es que en javascript las áreas asociativas son objetos y son totalmente objetos. Ahora los rayos son solo el que tienes. 012 índices Aquí están objetos. Totalmente. ¿ Por qué? Porque cuando escribes algo yo persona nombre punto también puedes acceder a estas cosas bastante fácil. Vamos a comprobarlo. Todo nombre de la persona de la Tierra. Está bien. Y como pueden ver, tenemos aquí ahora nuestro IQ Um cuando tipos somos nombre Como pueden ver, hemos conseguido palabra ártico. Está funcionando. Podemos hacerlo también De esa manera todos lo hemos hecho problema. También funcionará. De acuerdo, esto es bastante útil saberlo porque ya sabes, algunas personas podrían usar Centex diferente. Es buena idea saber que puedes hacer cosas así. Estas cosas como aquí son cosas un poco más terroristas cosquillas. Vayamos a algo un poco más duro. Como pueden ver, tenemos en nuestra página web en este momento en orden liberado de estos ítems Papa cursos de programación y desarrollo Web. Kear's Lo que si quisiera llegar a todos los autos de programación es, por supuesto, no es uno cómo hacerlo. Eso es bastante fácil, porque sólo necesitamos ir al documento que necesitamos ir hacer elemento por i d. Entonces, en nuestra situación, esta idea, sus cursos de programación y ahora queremos acceder a qué? Todos menos artículos. Por lo que sólo necesitamos usar obtener una mujer atrayendo. Aquí una función de que devolvemos la zona. De acuerdo, Elementos, no un elemento, correcto, justo en esta situación, sino todas las cantidades. Y ahora podemos igual que hey, qué menos artículo y podemos asignarlo a, por ejemplo, cursos de programación. Y cuando lo hizo el Oller no lo harás, es que hemos llegado aquí. ¿ Qué objeto? Colección Html. Una colección es algo muy parecido. Tintonizar y mal. Um es ese contenedor con todos estos menos artículos a los que no podemos acceder por lo que ahora podemos morir aparecieron cursos de programación fuera de cero. OK, y como se puede ver ahora, tenemos objeto html elemento de arrendamiento Aram y así, lo que significa que nos metimos en esta área y Ahora podemos acceder al valor. El valor fuera de la primera. Este elemento de elemento porque usamos el índice cero es lo que html interno estaban usando la propiedad html interna . ¿ Porque qué? Esto está en el objeto, ¿verdad? Podemos usar la propiedad en fila. Html y, como se puede ver ahora tienen aquí sippers. Además está funcionando. ¿ Queremos obtener el último ítem cómo obtenerlo usará la longitud fuera de los cursos de programación, los cursos de programación que longitud menos uno porque, bueno, tu longitud hemos regresado esta vez. ¿ Qué? 12 gratis. Pero queremos llegar al último elemento que está al dedo índice. Tan libre menos uno está quieto y por ello va a conseguir el último un limón. El genial es que podemos saltar bastante fácilmente cursos de desarrollo web ahora, ¿ verdad? Así. Y bomba que tenemos. Bien. Ahora el último javascript Limón. Bastante fácil. Ya sabes, hemos sido el nombre equivocado de Ray alcohol, pero podemos cambiar bastante fácil. Es posible que tampoco estés entendiendo la sintaxis aquí en este momento, pero bueno, te diré cómo funciona. Mira, me gustaría recordarles la lección sobre funciones. Si no entiendes exactamente, será buena idea el trabajo del dedo del pie, la lección sobre las funciones de nuevo. Pero lo más importante es eso y método siempre es devolver la cosa al lugar donde se invocó la función en una situación así. Duckman, consigue el limón por un D. Podríamos, ya sabes, también tipos me siento variable en orden, por favor. Y hacer algo así, ¿verdad? Y ahora parece un poco más fácil. Tenemos aquí. Lo que en ordenado liberado escribiendo algo que derecho. Por lo que tenemos bueno esto en orden esto. Y ahora queremos ir dentro de éstos de manera ordenada. Entonces estamos tocando otro arrendamiento y sacamos de eso están por lo menos qué elementos por nombre de conversación , que es este ítem. Y sí, solo estamos consiguiendo todos estos artículos de listas dentro. Eso es bastante impresionante, ¿no? Es lo genial es que no necesitamos crear una educada temporal que en. Podemos hacer justamente de nuevo la operación con el punto así. Ya sabes, cuando también pudimos conseguir todos los cursos posibles simplemente haciendo algo que obtengo del documento todos los elementos por nombre de etiqueta estos ítems. Pero por ello, si tenemos ahora todos ellos para que primero un limón sea lo que c plus. Y sí, es supongamos más el segundo sería ver afilar. Y así vamos. Pero ya sabes, no queremos conseguir todos estos artículos la mayoría del tiempo Quieres acceder al que queremos acceder . Por lo que es una buena idea también cuando creas tu documento HTML, ya sabes, nombra tu otro estos Así que es fácil acceder a ellos desde código JavaScript, ¿ verdad? Es una buena idea nombrar las cosas dentro del código demonio de la edad. Si sabes que algún día algo sería el acceso a través del abrigo JavaScript. De acuerdo, Sólo hay esa lección. Muchas gracias. 24. Métodos de array útil: Hola. En la última lección, aprendiste lo que es una era en esta lección. Aprenderás nuevos métodos y propiedades que te ayudarán a trabajar con un aumento. OK, entonces ya sabes ahora que esto es realmente algún objeto especial, ¿ verdad? Y es por eso que por ello, tienes buenas propiedades y método porque creadores fuera de una subida te las dieron. Para que puedas, ya sabes, trabajar más rápido con ellos. De acuerdo, Con el fin de mostrarles que es así posible cómo están funcionando estos métodos. Yo creé aquí en el si con la identificación, se llama el resultado. Y ahora lo podemos usar aquí al llegar a ella mediante el uso de documentos. Ahora consigue elemento por I d resultado. Y ahora podemos acceder a la propiedad HTML interior fuera del objeto que se devuelve por derecha desmantelada , Así podemos cambiar dentro del HTML interno al valor, por ejemplo, cursos de video. Y como puedes ver ahora podemos ver todos estos videos cursos impresos aquí. Y podrías estar preguntándote por qué hasta nosotros podemos ver todas estas propiedades por dentro. Este es un objeto especial, ¿verdad? Objeto especial Arisen. ¿ Y cómo sucede? Porque Normalmente estás corriendo aquí por defecto, un asunto que se llama a cadena. Te dije que así funcionan los objetos. Y esto a patrón de flujo es realmente escribir un asunto que se llama valor off. Como pueden ver, tenemos lo mismo. Entonces por defecto este comportamiento está funcionando así. Se puede cambiar, ejemplo, este comportamiento mediante el uso de método, simplemente vamos a unirnos, y luego se puede escribir aquí, por ejemplo. Oye, no voy a No quiero un coma. Quiero aquí romper html break. Y ahora lo imprimimos. Todo este video cursos como ese s oh, está funcionando de manera diferente. No lo estamos imprimiendo de manera diferente, y es muy útil porque imagina ahora también podríamos crear aquí una mesa y Ari, incluso podríamos devolver el valor de la función aquí. ¿ Cómo deben funcionar estas cosas, verdad? Eso es bastante cool, porque puede interpretar instantáneamente cómo debe ser surge, debe imprimirse solo usando esta función articular. De acuerdo, así es como lo hacemos es así como está funcionando la función conjunta. Y esto es lo primero que aprendimos. Por lo que join se usa para unir elementos y por argumento enviado, está bien. Y tenemos una propiedad muy importante de la que hablamos antes. Acabamos de llamar longitud. Es sólo devolver la tierra del Eric. Es muy importante saber cuántos miembros hay dentro porque entonces sabes cuántas veces necesitas pasar por la zona más tarde. Será muy útil en la siguiente lección cuando queramos a la en las próximas lecciones cuando quieras prestar Lopes. De acuerdo, así que recuerda sobre esta propiedad es una de las propiedades más importantes también es muy importante saber que la articulación no está funcionando con los cursos de video mal, ya sabes, como si estuviera cambiando sus valores. Aquí es sólo para el propósito de presentación. Entonces significa que si nosotros, por ejemplo, hacemos algo así, usemos el operador plus igual, lo que significa que no vamos por aquí al contenido existente, algo nuevo. Como puedes ver ahora tenemos buena. Después de imprimir esta área, conoces el espacio y luego estos guiones que nos ayudamos a depurar el pelaje y ahora podemos sumar el valor de los cursos de video. Como se puede ver, el valor no cambió su todavía el mismo. Esta cosa sólo nos está devolviendo. El resultado para la impresión. Está bien y derm o funciones. A la siguiente función se le llama cono Cut, que es de la guerra Calcuta Concoct en ocho. Corta el nombre algo que y se está conectando a un aumento. Entonces si hago algo que te darás cuenta de que nos hemos conectado a la nuestra on y usamos unimos. Perdón. Está bien. Ahora nos conectamos a una subida. Y como puedes ver, no están conectados más adelante están conectados como el valor de retorno de esta cosa. Entonces si quisiéramos mantener este valor, ya sabes, quería que se cambiara. Deberíamos hacer algo así. Videocursos. Deberíamos devolver el nuevo valor y asignarlo a los cursos de video. Entonces, como puedes ver, el nuevo valor siempre es así. Llegar a recordar al respecto porque no todas las funciones son trabajo. Trabajando con el valor, el descenso aquí y el objeto principal en el que estamos trabajando en este momento, no estamos cambiando el valor. De acuerdo, Así que como puedes ver, así funciona. Concha Capitán Aid. Se está conectando para surgir. El largo es de color rojo. Devolver la longitud de una matriz y tenemos. También, algo va a discutir. El pop pop solo está haciendo estallar su derecha explotando. El último elemento. Cuando haces algo así, estás quitando el último elemento. Como se puede ver, ahora se retira del área original, por lo que no lo es. Ah, la salsa no existe más tarde y se va a devolver al instante. El's think es devuelto porque después podemos, sabes, comparar estos dos algo de lo que las chicas hacen algunas operaciones en esto. Cosas así son muy útiles. Aprenderás sobre estas cosas, por qué son útiles más adelante cuando empieces a usarlas. Entonces esto es sólo esperar quitar el último elemento también se puede empujar, lo que significa en un elemento hasta el área final para que podamos hacer algo como empujar y escuchar nuevo elemento. Como puedes ver Ahora, agregamos aquí un nuevo elemento, y va a devolver el nuevo tamaño de un área y el retorno el nuevo tamaño off sobre Eric, tenemos también algo ir este turno frío, lo que significa quitar su elemento. El primer elemento en forma de bien, cuando lo hacemos así, como puedes ver, quitamos el primer elemento. También se va a devolver. Que. También puedes usar la versión de jefe de la ONU fuera de esta función, que está moviendo todos los elementos del área por uno y agregando un nuevo elemento al principio. Entonces cuando hagamos algo así, mi pregunta bien mejoró, se sumará mendicidad y todo se mueve. No se eliminó el PHP. De acuerdo, así es como funciona en ovejas. Y hay una función muy, muy cool que acabamos de matar. Ordenar cuál, como se puede adivinar, está ordenando la zona. Eso es bastante impresionante. Como puedes ver ahora es alfabeto ordenado para llevar. Entonces G h MP nosotros, ¿verdad? Bastante impresionante. ¿ Y si quisieras ordenar esta zona de manera descendente? Entonces desde el set de comer Z a un, solo necesitarías hacer algo así como cursos de video. Y ahora teclea reversa es sólo revertir un área. Ahora este descendiente aquí es como domingo. Eso es bastante impresionante, ¿no? Puedes hacerlo al instante, consultar las cosas muy fáciles. Sort es una clasificación alfabética Kelly. Y hay un problema porque tenemos buenos también números cómo servir números. ¿ Será lo mismo que puedes ver? Los números no ordenaron. Bueno, porque tenemos 44 debería estar aquí, ¿verdad? Por lo que no está funcionando correctamente porque ordenar por defecto está usando una función dentro de estos metal . Existe una función que estos años por razón de empresa, y se utiliza para la fuerza, no para los números. Entonces si quieres comparar números, deberíamos enviar aquí una función que va a cambiar la función predeterminada. Y aquí, como se puede ver, aprendimos en las últimas lecciones sobre funciones que podemos crear una función animus, esta situación muy útil y con dos parámetros que va a devolver un bi menos y ahora podríamos ser. Pero, ¿por qué? Pero, ¿por qué? Se ve así porque la función de ordenación está usando una función de comparación que se ve así. Y tiene, um, ya sabes, ya sabes, dentro de algo como, hey, hey, ¿alguien mandó la función aquí? De lo contrario, utilice la función predeterminada para ordenar cadenas. De no ser así, usa la que enviaron aquí y es mamá debería verse así, y debe retener número negativo o positivo o cero si cero. Esto significa que estas cosas, sin embargo, se comparan, y son las mismas. Por lo que no debemos cambiar el plato. Si es negativo, deberíamos cambiar el lugar de la otra manera y tenemos positivo deberíamos cambiar de nuevo al revés. Totalmente eso haciéndolo así. Tendremos ahora como enviando um, números. Como se puede ver, ahora están ordenados correctamente. No necesitamos revertir ahora porque, bueno, bueno, no está funcionando de una manera que ahora también podemos cambiar la forma en que se ordenaba con solo cambiar. Sé a una como puedes ver, está funcionando eso No te preocupes. Si no entiendes exactamente cómo está trabajando, solo estás enviando una función a la función de clasificación que está usando la disfunción. Por lo que ha cambiado el comportamiento por defecto. Puedes crear funciones como esa por tu cuenta. Como puedes ver ahora, enviar función a una función es útil, e incluso creadores de personas JavaScript que crearon un aire. Yo lo uso porque entonces se puede cambiar el comportamiento por defecto o alguna función. Y así es como lo haces esta vez. De acuerdo, así que sortie ordenando alfabético Etienne array y estaremos a salvo uh, aquí. Um, esto se utiliza para ordenar la forma de envío, ordenar y de forma descendente aireada. De acuerdo, También hay no, deberíamos esos tipo reversa es revertir. Sí, el Ari, la ofrenda más antigua. La siguiente función que deberíamos llamarla Hablar de que se llama rebanada Slice es solo cortar. Ya sabes, como si estuvieras cortando el pie. Se va a rebanar piensa por dentro para que podamos rebanar. Hagámoslo con alimenta tu corsé porque es más fácil. Um, vamos a encender los videos cursos y eso es por ejemplo, desliza elementos de uno a libre. Como pueden ver, tenemos. Ahora él escuela Myer y JavaScript y más tarde todo es igual. Entonces significa que estas diapositivas mi pensamiento no está funcionando en el principal avería. No va a cambiar los valores dentro de ahí, pero puedes regresar. Ya sabes, quiero cosas desde aquí, Teoh aquí y podemos regresar. Pero tenemos que recordar que está funcionando como está. Ah, cortando un limones de 12 corchete de cierre libre, lo que significa que va a rebanar de por primero un limón, que está en esta situación Ph. B. Pero sin incluir el primero de limón. Por lo que va a cortar mi script SQL y Java, incluyendo gratis. Por lo que estos fichajes tenemos fuera el uno y este letrero significa con libre. Entonces si escribimos algo así. Vamos, por ejemplo, a cinco, lo que significa trabajo. 12 no queremos bien mi esque, y luego 345 Lo que significa que tenemos JavaScript, PDO y Grand Js. Como puedes ver, está funcionando bien. Entonces así es como funcionan las rebanadas y tienes también algo va. Este llamado empalme de suministros es muy cool, porque cuando escribes algo así como, por ejemplo, uno y luego escribes, por ejemplo libre, significa que va a quitar todos los elementos dentro del área desde la primera posición. Y se va a quitar libre de ellos como se puede ver el primer discurso de posicionamiento. Pero no es incluyente, como con la rebanada. El primer dilema. Por lo que va a quitar 12 alineación libre. Entonces lo hacemos. No tenemos mi javascript escolar y video, y devolvió estos valores. Pero también probablemente hayas notado que los va a quitar de la versión original fuera a la derecha. Entonces es muy importante, así que quita del interior de las zonas unos limones, ¿ verdad? Es bastante guay. Y también se puede esta muy cool en Newell Un monstruo. Entonces, por ejemplo, algo nuevo un número. Ah, su cabeza ahí puede haber te puedes adherir como dinero nuevos valores como él quiera, así que no es libre. Como pueden ver, acabamos de agregar dentro del lugar donde normalmente mi cráneo y celos PDO donde agregamos nuevos elementos aquí. ¿ Verdad? Entonces el primer argumento es el significado desde qué lugar queremos empezar a eliminar elementos. Y segundo argumento es decirnos cuántos elementos quiero eliminar y luego los argumentos opcionales para que puedas obtener tantos como quieras elementos que quieras agregar después de, uh, uh, posición en el argumento huevo primero. De acuerdo, Así que los fallecidos son los más útiles para los métodos que debes saber cuando estás jugando con un aumento. Y ahora podrías ser como, Tal vez esto es que no son tan útiles. Pero más tarde verás que la mayoría de ellos te con algunos que usaron porque tendrás algún procesamiento en áreas. De acuerdo, eso está todo en esa lección. Muchas gracias. 25. Mientras y hacer mientras: Hola Hoy. Te diría que ambos son bucles cómo usarlos. Y en ambas situaciones, debes usar bucles. ¿ Por qué incluso molestarse en usarlos? Entonces loop es algo que puede ejecutar un abrigo. Un blogger off coat, tantas veces como quieras. Hay situaciones en las que algo así es muy útil. Imagina una situación así. Él quiere llegar al resultado. Entonces con cosas como el documento obtener elemento por I d resultado. Y ahora lo salvaríamos dentro de lo lejano capaz. Al igual que ese resultado. Y ahora obtenemos el resultado. HTML interno. Y me gustaría agregar sistema de video auto. Entonces voy a hacer algo. Videocursos, Um, y cero. Como pueden ver, ya tenemos, melocotón. Yo quiero añadir otro. Entonces hagámoslo. Um, está bien. 1234512 Libre para lejos seis. Está bien. Entonces debería tenerlos a todos ahora. ¿ Y si quisiera ahora en la línea de rotura? Está bien, hay buena idea. Vamos al descanso. Tengo que eso ya sabes, aquí, Aquí, aquí, aquí, aquí lleva tiempo. Correcto. Pero no ves las similitudes entre todas estas líneas son casi iguales, ¿ verdad? Simplemente nos estamos repitiendo. Y hemos llegado aquí en cada lugar. ¿ Qué? 012345 Sólo una diferencia. Hay una pequeña diferencia en este código por sólo el número está cambiando, correcto. El número está cambiando por uno. Entonces podemos usar algo así. ¿ A qué se llama lope? Porque loop puede ejecutar una línea de código tantas veces como quieras. Cómo usar un bucle. Escribes el nombre del bucle hay muchos bucles en esta lección. Aprendimos dos de ellos. El 1er 1 es bueno blanco, que es lo que está haciendo lo que va a hacer Ejecutar el abrigo hasta que la expresión dentro de aquí va a ser verdad. De acuerdo, Entonces, ¿cuál puede ser esta expresión? Podemos crear, por ejemplo, de un rebelde? Yo soy Y si es inferior a cinco, entonces ejecutaremos cosas entre estos tirantes rizados. Ah, tenemos aquí advirtiendo porque no creamos una variable. Soy así que tenemos que crear un inicializarlo con cero. Entonces sabemos que ese es el número. Y ahora hay un problema con este Look, este bucle se ejecutará en diferente notario Si hice algo. Al igual que, por ejemplo, um Alert. Hola. Ahora veremos en remolque Infinito, ventanas infinitas. Apenas vemos primero sabemos que el segundo y el tercero y 550 Fe y, um Bam, bam, bam, bam! Infinito. De acuerdo, porque el cero siempre es menor que cinco, ¿verdad? This expresión. Siempre seremos verdad. Y así por ello, esta instrucción con alrededor para siempre por ello, tienes que cambiar dentro del bucle después, por ejemplo, ejecutar todas las demás instrucciones Ahí utilizo el post increment Tater post incriminar está aumentando el número. ¿ Por qué? Por alrededor por uno. Por lo que será como cero uno es uno inferior a cinco. Sí, así que uno por hacer es menor a cinco años. Así también. Entonces lo único que está cambiando en esta droga es la variable yo y mira esto aquí. Necesitamos algo Cambiaría así. 012345 Correcto, Así que esta será situación perfecta para usar esto. Mira, podríamos copiar esto aquí arriba. Vamos alrededor de este programa. Como se puede ver, 01234 y cinco no se muestra. ¿ Por qué? Porque cinco no es inferior a 555 Igual pelea, cierto. Por eso cinco no se imprime. Por lo que ahora podemos simplemente cambiar estos Teoh Lugar de la Muerte. Podemos simplemente borrar esta cosa porque ya no lo necesitamos. Y ah, aquí sólo puedo hacer algo así como ese bálsamo. Y como puedes ver, está funcionando. Simplemente lo imprimimos todo de una vez. Bueno, no tenemos salsa. ¿ Por qué? Porque la salsa es 123456 Deberíamos teclear tu seis. Pero eso aún no es buena idea tener un seis años, porque cuando añadas algo nuevo tendrá que cambiarlo aquí. Por lo que siempre trata de montar su código de esa manera. ¿ Lo usaste? ¿ Vía universal? Entonces cuando nos adherimos ahora longitud. Ahora, cuando en algo de aquí lo supieras, podremos imprimirlo. Como puedes ver ahora podemos ver salsa. Pero cuando realmente escuchas algo nuevo, Así que por ejemplo, por ejemplo, creé las nuevas llamadas sobre, um lo sé y tú eres Js verás que está impreso bastante fácil. Y ahora podemos sumar muy fácil la línea de freno así y bombardear se sprinted dentro de estos loop, incluso puedes hacer venir parisinos fuera de ejemplo cursos de video con cursos off yo si es igual a, por ejemplo, mi esque Bueno, me gusta hacer algo diferente. Me gustaría agregar al HTML interno algo como antes Hola y bombardear así. Y como pueden ver ante mi Esseker, ya podemos ver. Hola, Está funcionando. Por lo que el bucle solo está ejecutando todas las instrucciones dentro. Hasta esta cosa, esta expresión no es cierta. Y como puedes ver, ah, está cambiando en el único valor yo que estás cambiando Kier y tiene que cambiarse. De lo contrario tendríamos problemas, ¿verdad? Nuestros 55 padres dejarían de trabajar porque ¿quién lo sobrecargaría con instrucciones de Duminy a la vez? Y es muy útil para que un zoológico pueda ver pasar por la zona haciendo algo una vez, y se va a ejecutar magnetizado. Vamos a disco poco común aquí afuera y conduce a algo incluso duro ahí. Por ejemplo, imaginemos una situación. Quiero tomar bien las maldiciones de programación y hacer algo con ellas así que haría por nuestro un documento de cursos de programación audaz obtener elemento por I D. Me gustaría ir a los cursos de programación, identificarla y luego bombardear que yo le gustaría, um, ir a obtener elementos por nombre de conversación, Menos artículo. Por lo que no tengo cursos de programación. Tomemos estos bajo el comentario. Y vamos, por ejemplo, hacer algo así que se usa resultado html interno en Vamos ahora a programar aquí. Cursos de programación ¿Qué? Ya veremos. Como puedes ver, hemos llegado a tu colección de objetos html. Correcto. Por lo que ahora podemos sacar dedo del pie a cada uno de estos menos elementos. Entonces como puedes ver ahora, tenemos buen mínimo elemento. Y ahora bombardea ese html interno debilita tipo y vamos a conseguir ¿qué? C ++. Si cambiamos estos dos, nos pondremos C afilado. Si cambiamos estos 22 vamos a conseguir java bastante impresionante, ¿no? De acuerdo, entonces , um, ahora podemos cambiar sólo este valor para, por ejemplo, imprimir todas las cosas de los cursos de programación. ¿ Verdad? Y puedes hacer también algunas cosas con ellos. Podemos hacer algunas operaciones con ellos, por lo que necesitamos echar un vistazo. ¿ Por qué? Tenemos que crear una muy ciega bien desprevenida. Puedes llamarlo como quieras Si yo es más bajo de lo que es buena idea dedo del pie, quítate todos los cursos de programación , longitud de bomba, entonces queremos ejecutar el frío así. Ah, y acabo de aplastar a nuestros cinco padres porque no agregué esto. Piensa. De acuerdo, re abrí el Firefox, y como puedes ver ahora, si vas c++ ver tienda y Java imprime fácil y podemos agregar aquí, por ejemplo, el chico brillante y me gusta eso y está funcionando bien. Y ahora podemos agregar cualquier cosa en nuestra página web Esa es la parte más importante así. Y como pueden ver, lo agregamos aquí, y al instante fue en ello aquí. Entonces ya sabes esto llamado. Simplemente estamos imprimiendo en otro lugar, pero no es necesario imprimirlo. Podrías hacer algunas operaciones. Podrías enviar los valores a algún tipo de programa que lo enviará a base de datos más adelante sus cosas así. Cualquier cosa que puedas hacer lo que sea con cualquier información fuera de tu sitio web. Nieve bastante lejos, porque puede ir a todos fuera de estos elementos a la vez. Eso es muy, muy impresionante, ¿no? Y ahora me gustaría entrenar con ustedes un poco más, por ejemplo, funciones porque Imagina una situación así. No queremos cursos de programación ahora. Nos gustaría Cursos de desarrollo web necesitamos toe. ¿ Qué? Simplemente cambia todas estas cosas al desarrollo Web, ¿no? Y ahora tenemos buen desarrollo Web. Pero si quisiera unos molestados, necesitaría tener tanto tiempo, el mismo abrigo. Y ahora imagina una situación en la que necesitarías hacerlo en estas cinco ocasiones, y entonces necesitarías cambiar algo en oro. Una cosa que necesitamos cambiar en cinco lugares los que se encuentran en situaciones como esa deberías pensar instantáneamente algo así como, Hey, es buena idea crear una función. Así funciona muerto Bueno, por ejemplo, imprimir cursos, lo que sea. Y aquí tomaremos como parámetro el i d off en orden que menos. De acuerdo, Y ahora sólo podríamos copiar esto aquí, y sólo tenemos que hacer lo que yo d de una lista ordenada está aquí. Se trata de una variable. Entonces no debería ser así. Y aquí no lo llamaríamos cursos de programación. Pero lo que sea sólo cursos, y ahora sólo podemos involucrar un trabajo. Así que imprimen cursos y solo necesito mandar Hey, quiero este Y bomba. No tenemos cursos de programación. Oye, quiero geo cursos de desarrollo web y tengo Desarrollo Web Constante. Quiero ambos cursos y tengo ambos cursos una vez. Eso es simplemente impresionante, ¿no? Entonces ahora puedes ver por qué te mostré con tantas lecciones. Ah, todas las disfunciones, las cosas todo esto. Ah, todas estas variables ¿Por qué hablo tanto de ello? Porque cuando entiendes esto, puedes crear un abrigo que es el más importante. Eso se puede cambiar fácilmente después, ¿verdad? Que trabajamos siempre sin que hagas demasiado esfuerzo, ¿ verdad? Y todo el mundo, Esto es muy cool. Entendemos tu abrigo por ello. El resultado son otro budista bajo llamado hacer por qué podríamos hacer algo así como hacer. Y entonces por qué así? Tomemos esto bajo el comentario y vayamos a orinar aquí. Como puedes ver, está funcionando igual. Pero hay una pequeña diferencia entre la masa. ¿ Por qué y por qué? ¿ Cuál es la diferencia cuando estás haciendo? ¿ Yo Mira, siempre ejecutarás el think you, lo que significa que aunque la expresión así no sea a través de la mendicidad a esta vez esta cosa se ejecutará. Y, uh, esta vez estamos usando aquí. Valor 5 51,251 aquí, Así que vamos a cambiarlo a cero por un segundo. Como puedes ver, imprimimos el Ph. B al menos una vez, ¿ verdad? Y si cambiamos esto a este bucle, entonces hacemos algo así cambiando 20 ya que no se puede ver nada impreso por porque esta expresión se comprueba al principio. OK, entonces si no es cierto, aquí no se ejecutará nada. El do seré Ron al menos una vez. Entonces esa es la diferencia que debes recordar. Hacer mientras y fueron función Weifang. Yo la mayoría del tiempo usé la función esposa, pero puede haber una situación en la que se tiene que usar la puerta cuando se quiere correr algo y lejos, aunque el si el par. Si la condición no es así, vamos a poco común esto y lo genial de todas las cosas así es que ahora podemos comprobar algo , haciendo razón a la empresa. Si, por ejemplo, el tipo aquí auto si cursos fuera del I igual al PHP, quiero algo especial para PHP. Entonces quiero en este es mi lenguaje y bomba. Ah, ¿hay un durazno siendo sitio? PHP. Tenemos ser durazno, um bien, deberíamos rasgar aquí si html interno Este es mi lenguaje. Está funcionando bien para PHP. Agregamos algo que podemos cambiar estos dedos del pie, por ejemplo, la brújula y sigue funcionando Todo lo que podemos también algo así o es igual a la escuela Teoh Maya . Y lo tenemos ahora con el PHP, hablé de la manera equivocada. Usemos Java. Como puedes ver ahora está aquí y está aquí, Así que es cuando puedes hacer algo especial para ambas cosas. Por eso necesitas operadores así. Como pueden ver, nuestros programas se están volviendo un poco más complejos, pero así es como va a ser para en el futuro. De acuerdo, eso va esa lección. Muchas gracias. 26. Para bucle: Hola. En la última lección que aprendiste Waters Loop y cómo funcionan en esta lección, aprendiste un nuevo bucle que acabamos de llamar. Y bueno, la verdad es que es sólo un nombre diferente por qué va a hacer las mismas cosas como el Wild Blue. Pero necesitas simplemente escribir algo así. Como puedes ver, está funcionando cuando es por eso que también está haciendo lo mismo. Entonces, ¿por qué siquiera molestarse? Bueno, es una buena idea molestarse por esto porque estos semi puntos son, ya sabes, sabes, separadores para inicialización y para el pensar que se tiene que hacer después de ejecutar todas las cosas dentro de la mirada, como se puede ver, todavía trabajando. Entonces es un separador para cosas así. Por qué algo así necesitaba. Ahora mismo está más limpio, ¿ no crees que no tienes bien ahora, fuera del bucle, la inicialización y dentro después de la última línea, lo que se tiene que hacer después de cada uno alrededor a través del bucle, tú puede olvidarse de éste y de éstos afuera. Entonces aquí se ve un poco raro porque, bueno, no sabes exactamente si realmente está conectado a la mirada. De verdad prefiero lo primero por eso. Es solo más limpio es más fácil de leer, al menos en mi opinión, pero realmente depende de la preferencia de otras personas. Entonces con todo, tienes que conocer todos los bucles posibles porque, ya sabes, no sabemos cuál usará otra persona, y no solo crearás tu código por tu cuenta. Otras personas que creamos. Cody leerá su código, y hay que entenderlo. Entonces aunque no te guste esto, tienes que entenderte. Aunque no te guste lo salvaje, tienes que entender de todos modos, hasta ahora estará haciendo lo mismo. Pero la diferencia es que aquí al principio, estamos especificando lo que se tiene que hacer al principio. Y aquí al final. Tenemos que especificar qué se tiene que hacer al final, cuando se ejecuta toda instrucción, el negro como un bloque de abrigo después de cada carrera, eso es todo. Así que tal vez lo escribamos aquí para la inicialización off vary boose, y eso está empezando ahora condición. Y luego qué hay que hacer después de cada labio después de correr cada look bien, te dicen que puedes por supuesto, crearte variables Manimal puedes crear más complicadas. Ah, condiciones complicadas. Y también puedes, ya sabes, aumentar más cosas así. Pero la mayoría de las veces solo tendrás un bucle for que se vea exactamente así. Entonces no lo hará. Por ejemplo, imprimir posavasos de video cambiarán los cursos de video de esa longitud. Y nos gustaría sólo imprimir aquí videos cursos así. Y está trabajando. Pero el zoológico realmente muy fresco. ¿ No ves esto? Acabamos de imprimir instantáneamente todas estas cosas. Ah, fue como un segundo cambiamos en el uno esta línea de co bam bam bam! Y su imprimirlo. De verdad amo a Lopes. Espero que también nos gusten que les digan esa lección. Muchas gracias. 27. Rompe y continuar: Hola. hoy te mostraré romper y contarte instrucciones las cuales se usan dentro de los labios. Hagamos grande una situación simple al principio. Vamos a matar crear un bucle for que sólo va a mostrar, por ejemplo, cinco números. De acuerdo, entonces debería verse así, ¿verdad? Estamos creando estaban inicializando una variable y la asignamos a cero. Y si se baja cero y cinco, entonces simplemente aumentarlo después de cada iteración. Entonces después de cada corrió este look y cuando lo refrescamos con, por ejemplo, otros creo que con 012 gratis para cinco Y no siempre. Ya sabes, no siempre lo sabes todo. ¿ Qué hay aquí dentro? Entonces, por ejemplo, puedes ir a ah, menos artículos puedes ir a la gente. Y por ejemplo, cuando algo pasa no te gusta quieres romper del bucle Y para hacerlo , puedes escribir algo. Si yo igual a por ejemplo, cinco fuera a, entonces romper. ¿ Qué significa cuando estamos en ello? Ahora verás 01 n nada. ¿ Por qué? Porque dos es igual a dos y decimos break Significa salir de este Look. Sabes que esta es una situación sencilla. Pero como dije, tú no. Podrías, por ejemplo, ir a algún tipo de muy. Y si esto alguna vez es igual a algo que no te gusta, no quieres que tu por ejemplo, for loop se ejecute en más. Entonces sólo lo alardeas. De acuerdo, Nada después se ejecutará. También tienes algo bueno. Esto podría continuar cuando sí continúas c cero uno y no viste sólo dos. Pero aquí, oye, hay gratis para Y entonces está bien. ¿ Por qué funciona así? Porque continuar, continuar es trabajar, trabajar como un descanso. Pero después de romper una vez el bucle , todavía calma t noticias. De acuerdo, así que solo lo está rompiendo una vez. ¿ Y qué? ¿ Por qué? Algo así sería útil. Esta cosa es un poco de uso es útil cuando haces cosas como, vamos, por ejemplo, por ejemplo, a conseguir los cursos de programación. Entonces eso es genial. Si somos capaces de leer, vamos a conseguirlo yo d. Y vamos a conseguir una mujer por nombre plática todo este ítem y vamos a ellas tan variables. Y si estoy más bajo que los cursos de programación tierra que yo plus plus bien y ahora me gusta, por ejemplo, en algo como incluso ahora, antes de cada apagado ese trabajo aquí. CPAs, Patsy Sharp, Java, Pascual. ¿ Cómo haría eso? Yo sólo iría a las maldiciones de programación y en HTML interno. Y lo que Normalmente harías algo así justo en, agregarías. Ahora, incluso el problema de este operador es que lo agregaría al final. Oh, deberíamos, por supuesto, llegar a cada uno de los tipos. Entonces así y un para que puedas ver lo estamos agregando al final. Si quieres agregar algo al principio, tenemos dedo del pie poco probable a algo así. Entonces solo estamos asignando algo nuevo más algo. ¿ Cuál era su todo el tiempo ahora mismo? Se metió incluso en todas partes. Pero, ¿qué? Esto ni siquiera es cada vez, ¿verdad? Yo quiero hacerlo en la vez en Por qué Once su ah uno lo hizo. Aun así, ¿cómo hacerlo? Si estoy con el foso modelo yo modelo dos igual a cero Entonces quiero mostrar incluso como puedes ver ahora, lo haría incluso cuando está apagado. Entonces no está funcionando. Trabajando ¿verdad? ¿ Por qué es eso algo porque, bueno, sabemos que estamos contando en un rayo. Nuestros números del 00123457 Y en nuestra situación, bueno, todos los números pares son números viejos o todos los números son incluso correctos, porque qué índices simplemente no están en la posición brillante. Por lo que sólo lo cambiaremos usando este letrero aquí. Y como puedes ver ahora, hemos llegado hasta el lugar correcto. Por lo que agregó al lugar correcto. Pero el problema es que bueno, imagínense que tuvimos bien aquí. Algo sencillo de hacer. Y después de las ocho, tenemos aquí muchas instrucciones fuera, ¿de acuerdo? Y veamos cómo va después de ejecutar esta cosa es que puedes ver aquí podemos ver. Zero aquí no es nada igual. Está bien. uno a y nada, Capitán. Correcto. No cambiamos nada gratis. ¿ De acuerdo? Entonces a veces no queremos hacer todas estas instrucciones aquí como ahora, porque no necesitamos ejecutar la otra ahora o no queremos hacer algo. Chicas con ellos. Tenemos otros tipos, justo con el que están fuera. Entonces solo puedes usar el continuar así de lo contrario solo continuar y ahora podemos ver uno y gratis solo aquí. Como pueden ver, estas instrucciones se van a ejecutar sobre Lee. Si es pupilo para rodearlos. ¿ De acuerdo? Sólo hay una lección. Muchas gracias. 28. Para en la: Hola. Hoy te mostraré para in loop, lo que te permite procesar objetos bastante rápido. ¿ Cómo funciona? Cuando escribiste para, entonces escribes aquí variable. Esa es una variable temporal. Puedes llamarlo como quieras. Pero ¿lo llamamos propiedad? Porque realmente es una propiedad aquí. De acuerdo, quitará el valor de la propiedad en persona. Aquí está el nombre fuera del proyecto todo. ¿ Quieres protestar? Está bien. Y aunque Carrie se apresura a Michael y se iría tiempos libres porque tienes propiedades adecuadas libres dentro de persona. Y cuando engañas, por ejemplo, propiedad, propiedad, notarás que con el nombre de Serling y ocho, lo que significa que aquí siempre hay un valor de propiedad. Y también aprendimos que podemos hacer algo así como persona. Ese nombre y esta cosa nos mostraría cuál es el valor Tanto el nombre como nosotros le hemos llegado al Ártico. Pero también sabemos que podemos actuar con nosotros esta cosa escribiendo algo así. Esto es realmente genial porque esta cosa nos permite usar una variable aquí. Se puede ver que podemos, por ejemplo, hacer algo así, y también va a la guerra. Entonces con esa cosa en nuestra mente, sabemos que podemos usar cuál es el nombre y ahora el valor que se cambia a nombre, apellido y edad. Y como pueden ver ahora aquí Buen Arik, voten Ártico 26. Y eso esto impresionante, ¿no? Por lo que podemos ir a todos los valores dentro del objeto bastante rápido y podemos usarlo por cualquier razón que queramos. Por ejemplo, variable X, creativo Herbal X y nosotros, por ejemplo, queremos a la X estos valores, ¿ verdad? Por lo que haría algo así y entonces lo alertaremos. Y como pueden ver, tenemos indefinido podiátrico ártico 26. ¿ Por qué indefinido? Yo no lo hice. Especialmente ¿Por qué? Porque por defecto, cuando hacemos algo así, esto es indefinido e hicimos algo más igual. Estamos agregando justo y piensas a lo indefinido. OK, entonces es una buena idea a veces inicializar algo con sólo en algo que no hacemos nada. Tenemos las otras variables con los otros valores. Como pueden ver ahora tenemos el transistor Patrick adecuado. Entonces es igual que una nueva Es como algo así como cero para agregar llorado, Tenemos aquí una cadena vacía. De acuerdo, así es como pasamos por entonces objeto que se convierten en objeto. Pero también sabes que cada IRA también es un objeto. Entonces, ¿podemos usarlo así? Um, esas son nuestras fechas Esta vez, Como pueden ver, podemos ver todos los valores posibles dentro sobre Eric. Por lo que también es cosa bastante rápida que te permite pedir pasar por la zona. Pero el problema es que usar algo así no te permite, ya sabes, Ah, haces algo como aumentar tu índice por comprar gratis. Tienes que ir a todos ellos, justo uno por uno. Por lo que es más tiempo utilizado en el en objetos típicos como ese cuando no se puede saber, no se sabe cuántas propiedades hay. ¿ Cómo son las llamadas y otras cosas así? Veamos cómo vamos a trabajar con el curso de programación. Por supuesto. Asume así haría algo así. Qué pasará como puedas Ya puedes ver tenemos buen html al menos artículo un limón y wow. Aquí hemos estado función e hijo y otra función y cuatro. ¿ Por qué? Porque bueno, sabemos que se va de pie todas las propiedades posibles y una fuera de la propiedad por la cosa que se devolvió aquí. Entonces para la cobranza se puede comprobar qué? Está muerto escribiendo algo. Papá. Correcto. Como se puede ver, HTM una colección es algo bueno se llama función. Otra función y el número que probablemente hayas notado que el número era igual a cuatro porque es un derecho de longitud. Cuántos fuera del asesinato encendido y bueno, teníamos todos estos elementos. Entonces, ¿cómo hacer algo así? Cómo sacar todo de los valores sin este indefinido ¿Crees cómo hacer estos? Lo que sabemos hizo podemos comprobar usando el tipo fuera del tipo ya que se puede ver qué buen objeto, objeto y luego número de función función. Por lo que tienes aviso siempre que al menos un limones que son el que queremos usar nuestro objeto, Las otras cosas no son objeto. Entonces podríamos simplemente decidir, Como si teclear Bueno, podemos copiar estos totalmente no es igual a qué al objeto. Entonces solo rompe. No necesitamos hacer este animal vivo como puedes ver ahora aquí. Bien. Cuatro veces objeto y luego nada. Entonces como puedes ver, break es realmente útil Porque no siempre. Ya sabes, no siempre sabes cómo estás, um áreas mirando Cómo están las cosas dentro de ti no es como siempre están creando todo bien Y ahora solo podemos romper Y fácilmente podemos hacer algo como en su HTM todo. Y podemos trabajar con estos valores, ¿verdad? Bastante fácil. También podrías usar el continue Continuar también funcionará bastante OK, pero puedes ver. Pero el continuar, recuerda, está funcionando así que estás continuando entonces Así se volverá a ejecutar. Se revisará de nuevo. Entonces estamos justo a tiempo esta vez. Al menos porque ya sabes, probablemente te hayas dado cuenta de que los objetos están al principio, ¿ verdad? Los menos artículos están al principio. Al final, tuvimos dos funciones y un número. Por lo que Bragg es mejor en esta situación. Pero ya sabes, a veces solo quieres elegir objetos de la enorme ah, objetos de objetos. Y quieres dedo solo objetos de verdad entonces y no sabes Dónde están Jugar. Entonces esta es buena idea para luego usar, por ejemplo Continuar a la derecha, porque entonces irás a ti podrías procesar todo objeto y bastante fácil. De acuerdo, sólo hay bueno. Escucha, muchas gracias. 29. Objetos de argumentos: hola hoy ejercerá un poco. Te mostraré objeto. Acabamos de llamar argumentos y está almacenando todos los argumentos que se envían a la función. Para poder usarlo, solo necesitas tomar la función. El nombre de la función que se llama, por ejemplo, en números. Añadirías números y al instante cuando creas una función de TI, tienes una buena visión. En la función se creó un objeto que se llama argumentos. De acuerdo, ahora puedes escribir cosas. Ustedes son humanos longitud. Y cuando haces algo, Ivor, variable algunos. Y ahora vamos a involucrar la función con, por ejemplo, libres 76 y cuatro. Te darás cuenta de que si hacemos algo como alertar y refrescar, como puedes ver, tenemos bueno para porque enviamos pues argumento. Y dentro de estos argumentos Bueno, dentro de este objeto, se puede acceder a cada uno de estos tipos enviados aquí mediante el uso de índice. Como pueden ver, tenemos libre El segundo tipo. Siete. El tercer tipo es lo que seis. Um, lo siento. Es el cuarto, ¿no? Es decir, tenemos que recordar cómo se indexan las cosas. Entonces seis y el último tipo es para así que está funcionando correctamente ¿verdad? Podemos acceder a todos estos valores por lo que podemos usarlo en orderto en, por ejemplo, estos números y tienes probable ahora aviso de que podemos enviar aquí s argumentos de minuto como queremos estos muy útiles para situaciones como esa. Entonces cómo Teoh hacer algunos de estos argumentos podemos usar, por ejemplo, por ejemplo, un lóbulo, ¿ verdad? Porque se puede ir a todas las cosas dentro del objeto para que podamos usar, por ejemplo, lóbulo, que se llama en Así podemos ir a crear una fiesta temporal dentro del objeto argumentos. Y entonces podemos actores cada uno fuera del de argumentos valoran así como aprendimos en la última lección. Para que podamos alergias. Eso es todo. Um propiedades, propiedad tan libre siete busca para todo está funcionando de fue a todos estos valores. Por lo que ahora podemos agregarla. Deberíamos crear un boom vory temporal así, y eso es sólo agregarlo a esta suma y regresar ala derecha para devolverlo al lugar donde involucramos la función. Y podemos otros los algunos de afuera aquí. Como puedes ver, es 20 Así que está funcionando gratis más siete stents seis más cuatro es 20 ahora. Teníamos, por ejemplo, nueve. Entonces deberíamos tener 29. Y está funcionando bien. Para que podamos conocer Senti Azman y argumentos como queramos. Y como dije, estas, um, um, lecciones de capacitación. Entonces recordemos nuestros dice cómo todo está funcionando para que todo esté mal de arriba a abajo. Por lo que también hay que recordar que las funciones nuestro inicio antes de invocar algo bien en temporal, sobre capaz y bien, no son el frío por dentro no se ejecutará hasta que invocamos. Correcto. Entonces empieza en alguna parte, ¿de acuerdo? Y entonces ahora estamos creando una variable que tenemos un valor a partir de la disfunción. Entonces somos como saltando cola, y estamos enviando gratis siete seis por nueve al objeto, que se llama argumentos. Y esto es un bob un objeto, ¿verdad? Debido a que se trata de un objeto, puede almacenar valores. Y este objeto es parece, es similar a la zona porque los está almacenando en 012 índices libres. Correcto. Y podemos usar los cuatro buscar, por ejemplo, agregar cosas. Entonces estamos usando esto algunos aquí estamos asignando cero a esto algunos por qué estamos haciendo esto porque no lo hacemos. Como se puede ver, tenemos buen saber el número. ¿ Por qué? Porque una depuración si sí conocemos un signo de suma cero es indefinida. Por lo que indefinido plus plus cualquier número simplemente no es un número. Por eso vemos así algo así como un n que manda para conocer el número. Entonces es muy importante dedo del pie asignar aquí cero. Y ahora solo estamos sumando cada uno del valor de estas propiedades de argumentos. Y luego estamos devolviendo este valor aquí y lo alertaremos. Podemos hacerlo de manera diferente. Camino a la derecha. Podemos hacer usar la barra baja y por el otro, por ejemplo, porque podemos crear en parte de un rebelde como ese si argumentos esa longitud me plus blast y podemos justo en dese muy gustado, um, um, fuera de curso. En este momento tenemos buen índice diferente, ya que reconoce 20 ahora, Así que todo está funcionando bien. Esa es sólo una buena lección. Muchas gracias. 30. DOM: Hola Hoy vamos a hablar de Dome, que envía por modelo de objeto de documento, y es realmente tema muy importante. Centrémonos en modelo modelo. ¿ Qué significa? El modelo es una fórmula para crear algo y crearon un modelo fuera del documento del documento HTML que es universal para todos los navegadores. ¿ Quién es el día? Bueno, las personas que crearon una especificación para las personas que están creando navegadores. De acuerdo y bien, no necesitamos cuidarnos. ¿ Quiénes son exactamente? Sólo necesitamos saber que tenemos el método universal para recuperar, para cambiar, para eliminar cosas de nuestro sitio web. Y esta cosa es realmente poderosa. Vamos a esta página web. Como puedes ver, hemos llegado aquí aparte en la canasta cuando hacemos click en ella como puedes ver, manera vimos un curso volador hacia esta canasta y lo vimos al instante. Él dinamiza a Kelly, verdad. No podemos agregar otro tipo y lo podemos ver aquí y podemos quitar y luego quitar bomba. Esta cosa es realmente poderosa y nos da algo como, ya sabes, nos permite cambiar las cosas en nuestros sitios web de forma dinámica y por ello. Bueno, ya sabes, no necesitamos mostrar todo para nuestros usos al inicio de la cuando visitan nuestra página web. Ya sabes, sería estúpido tener una canasta aquí al principio porque, bueno, bueno, nadie ha usado canasta que tenía, ¿ verdad? Entonces esto es estúpido tenerlo entonces aquí solo está tomando este lugar antes no se están centrando en otras cosas en su página web. Deberían. Deberían enfocarse en otras cosas que no agregan nada a la canasta aún bien. Y sabes cuando agregan algo, el tipo de tu página web al instante sabe que agregó algo y sabe dónde está esa canasta. Entonces es poderoso donde creo que podemos usar. Y estuviste en esta lección no hablamos de acción. Ya sabes, cuando le pateas algo a algo, esto es parejo y hablaremos de igualaciones más tarde. Pero de lo que hablará es de cómo dedo del pie sabes revisar Dónde están las cosas en nuestra página web, cómo recuperarlas. Y esta cosa estará usando en las próximas lecciones, por ejemplo, en la lección pareja. Entonces es muy importante coberturas de enfoque en esta persona porque es muy, muy importante. Por lo que hay muchas propiedades. El más importante creo que está aquí. Y algunos métodos de los que hablarán creo que deberías descargar algo con este cráneo. Objeto Documento. Inspector, Cuando descargaste, puedes ir a la sección de desarrolladores y abrirla. Y esto va a hábitos, ya sabes, pasar por este modelo de objetos de documento. Y también me hará enseñarte cómo funciona. Por lo que lo primero que debes saber sobre el modelo de objeto de documento que todo en el modelo de objetos de documento se llama y nota. De acuerdo, esto no es una enfermedad. No, esto es nota. Esto es No, esto es No, esto es no. ¿ Sabías que todo dentro se llama nota que tenemos También algo discutirá elementos. Elementos son sólo hablar. Por lo que html cabecero lo hizo si Dave el día nuestras pláticas elementos correctos y el tipo puede usar. Por lo que también hay muchas otras cosas. Al igual que, por ejemplo, probado. ¿ Qué es un niño? Ya sabes, un niño es algo que es sólo un menor en jerarquía, una jerarquía plata. Y así, por ejemplo, sombrero es un niño fuera de html. Se trata de un niño de cuerpo cuando vamos al cuerpo y vamos a la muerte, por ejemplo, este Steve. Ah, abrimos otro sitio web que ha abierto este. Diablo, opere abajo, Inspector Como puede ver, cuando vamos aquí están en lista ordenada y después tenemos aquí nuestro artículo de liberación y todo este ítem de lista es el niño apagado en orden? Esto bajo el arrendamiento es hijo de cuerpo, y el cuerpo es padre de otro. Este otro. Se trata de un padre fuera de este sitio de arrendamiento. Y éste, éste, éste No hay, no hay no hay Así que es bastante fácil de entender. También tienes algo bueno. Tiene hermanos. Este elemento de la lista es un hermano de este elemento de la lista. Este artículo dis es un hermano fuera de esta nota de texto, ¿de acuerdo? Y bueno, son las palabras más importantes que debes entender en un modelo de objeto de documento. Entonces, como puedes ver, es una fórmula que así fue como fue creada. Y ahora puedes acceder a propiedades dentro de ella. Y este inspector de objetos de documento es realmente útil porque cuando vas aquí, por ejemplo, y eliges estos Manu y vas al objeto JavaScript. Tienes todas las propiedades a las que puedes acceder. ¿ De acuerdo? Y estas propiedades pueden ser también métodos. Por ejemplo, el que ya conoces. Como puedes ver, hemos llegado aquí, ejemplo Obtener elementos por nombre de conversación. ¿ Verdad? Por lo que usamos estos cuando vas al documento. Como se puede ver, ya utilizamos objeto de documento. Te darás cuenta de que hemos llegado aquí. Ah, función que va a e cráneo conseguir unos limones por yo d conseguir un limón por él, ¿ verdad? Nosotros lo usamos. Lo usamos para obtener un limón del documento y luego cambiar el HTML interno. Entonces cuando llegamos por ejemplo, dedo del pie otro arrendamiento y luego vamos al ítem de la lista, podríamos cambiar usando el HD interno de una milla. Como se puede ver, algo con el bus CpAs cráneo. Hay muchas, muchas, muchas propiedades más, pero la más importante, creo que al menos, son estas de estas. Está bien. Y, bueno, vamos a entrenar. Eso vamos a ver cómo funciona para que podamos usar el documento y ahora podemos acceder usando estos métodos muchas cosas. Por ejemplo, podemos actus elementos por el nombre por el nombre del objetivo por Klasnic. Pero usaremos, por ejemplo, por ejemplo, el I D. Y vamos a conseguir qué cursos de programación y digamos, guárdelo las variables del dedo del pie fuera de ejemplo como ese. Y es realmente importante asegurar cosas como esa en una variable. ¿ Por qué? Porque sabes todo el tiempo cuando haces algo así, tu computadora tiene que funcionar bien, y lleva tiempo. Entonces si guardas estos aquí, no tendrás que volver a hacerlo. Es sólo en nuestro más de lo que no tendrás que hacerlo de nuevo. Entonces es muy, muy importante hacer algo así. Se tardó en crear un temporal de un Rabel porque si tuvieras que repetir estas cosas de nuevo, solo harás que tu computadora vuelva a hacer lo mismo. Lo cual simplemente no tiene sentido, ¿verdad? Es buena idea tener una variable temporal así. Entonces como pueden ver, hemos conseguido el objeto html en orden. Entonces conseguimos esto. Piensa que tú y significa que podemos acceder por ejemplo, el yo no lo hice difícil o aquí s O i d. Y cuando vamos a atributos, encontremos sus homenajes. Ah, como se puede ver aquí es un atributo de propiedad. Y dentro de estos atributos que tienes no es un derecho y puedes acceder a cero derecho. Se puede acceder al primer objeto Y dentro de este objeto cuando vamos al no, el valor Como se puede ver, podemos acceder a cursos de programación, cursos. Por lo que es el valor de este atributo. Entonces hagámoslo. Por qué no x que atribuye el primer elemento fuera de estas distancia que nota valor y bomba. Tenemos buenos cursos de programación, pero ya sabes, esta no es la mejor manera de hacer esta dirección porque tenemos en esta situación una función que acabamos de llamar get attribute. Cuando usamos la función así, solo podemos, ya sabes, decir que quiero un atributo. Acabamos de llamar idee, y quiero ver cuál es el valor de la misma. Ah, cursos de programación. Muy cool. Y podemos usarlo más tarde para algo, ¿verdad? Podemos, por ejemplo, acceder a cada posible um me encanta Mendel ahora sitio web con trez ir la clase como y quiero hacerlo ya sabes después, por ejemplo, usando el mouse sobre este lugar, Yo quiero ver algo, chicas escriben algo que puedes hacer lo que quieras con la información así. Entonces es muy útil. También puedes configurar algo para que puedas hacer X, ese conjunto, atributo y solo estás escribiendo. Después el nombre de un tributo a cabezas de, por ejemplo, nombre de clase y luego agregas su nombre de la clase. Entonces, por ejemplo, prueba y te darás cuenta de eso ahora. Bueno, casi nada ha cambiado. Pero tengo aquí un fuego atrás que es, ya sabes, observar ating todo en su página web. Puedes descargarlo en. Ya sabes, el enchufe es para el Firefox y él va mansekly gate y nosotros vamos aquí. Como puedes ver, agregamos la clase que se llama prueba, y esto es aún más potente porque después de agregar una dinámica y así y si tuviéramos, por ejemplo, algo en nuestra estación. Entonces cambiemos el dedo del pie de color por ejemplo, rojo. Como puedes ver, es rojo al instante, por lo que puedes ahora es después, Por ejemplo, alguien arroyo botella, quieres cambiar el color y puedes hacerlo dinámicamente. Después de que alguien arroyo Aquí quieres aparecer. Se quiere cambiar la pantalla fuera de esta cosa de non a Ah, hacer el absoluto y simplemente se mostrará al instante. Eso es simplemente genial. ¿ Qué tan poderoso es? Ah, ¿lo ves? Solo necesitas agregar un atributo y todo va a cambiar en un sitio web sobre la vida. Entonces esto es para establecer atributos. Se pueden, por supuesto, quitar atributos. Podríamos agregar un atributo y cómo sabes que ya no lo quiero. Yo quiero eliminar este atributo, que se llama clase y, sabes, ya sabes,por quitar la clase en este momento, ya no vemos lo correcto. Entonces podríamos tener, um, um, como aquí cuando en algo a la canasta y cuando alguien arroyo quitó entonces si fue último intento y solo mostrarlo dijo la pantalla fuera de esta caja a no sólo desaparece. Bastante impresionante, ¿verdad? Pero no lo sabemos ahora mismo. Cómo dedo del pie podía ver si alguien hace clic en algo. Hablaremos de ello más tarde cuando hablemos de pares, así que adelante con las próximas lecciones porque, bueno, te permitirán hacer cosas poderosas. De acuerdo, entonces esa es la Eso es la Eso es una de las cosas más importantes. Pero también sabes cambiar las cosas por dentro. Por lo que ya usamos, por ejemplo, en el HTML derecho cuando obtienes los cursos de programación. Por lo que utilizamos cursos de programación. Estamos dentro de ellos en orden. Grecia, por ejemplo. Queremos acceso del dedo del pie. El menos artículo aquí. Uh, ¿cómo lo haríamos? Simplemente escribimos eso y lo accederíamos usando, por ejemplo, Ah, notas infantiles diagnósticos en su anillo off. Sepa que en nivel inferior en alta estaca. De acuerdo, entonces significa que tenemos todos los artículos arrendados, pero también tenemos estos textos. ¿ Cuál es este texto? Porque, Bueno, esto no son los sippers más c sharp porque C c plus y C sharp está dentro de este artículo. Este texto es sólo todos los espacios en blanco aquí. Por lo que quitamos todos los espacios en blanco. No veríamos ataques así. De acuerdo, um así que al tener un niño notas fuera de cero no somos ¿Es eso cuando lo refrescamos? Um, Onda, nosotros algo así. Notamos si tienes buenos textos de objeto, cuál es ese solo un espacio agradable? Podemos acceder a estos nombres, pero no podemos hacer devaluación y vamos a obtener un valor del mismo se considera aquí son todos como se puede ver. ¿ Por qué espacios? Pero queremos el segundo elemento. Entonces queremos hacer algo así. Como se puede ver, esto no es ahora, porque dentro de menos elemento iss un ataque de elemento. Y hay ahora mismo en un elemento interior. Sería pilas. Y el valor del nodo es ahora mismo. Nada. El valor del nodo es sólo para texto. De acuerdo, si quieres llegar al texto ahora mismo, deberías escribir algo como yo quiero conseguir ahora. El por ejemplo, primer hijo. Entonces la primera marea del elemento Lee Silom es este impuesto y éste se puede ver. Podemos ver ahora un texto, ¿verdad? ¿ Y qué? Podemos ver un texto porque también lo accedimos usando el nodo Valium, hicimos algo así notará que tendría texto objeto. Y si quieres acceder a ella su valor, tenemos que escribir valor de nodo. De acuerdo, Entonces el valor fuera del texto está dentro de ningún valor. Y esta es una versión directa de tu acceso y algo así, y está tomando algún tiempo Pero a veces tendrás que hacerlo de esa manera. Pero puedes hacerlo un poco más fácil. Por ejemplo, usando mundo conseguir un Lammens por nombre tecnológico y tenemos buenos ahora todos los artículos arrendados, ¿ verdad? Y debido a que tenemos todos estos artículos, ahora podemos acceder dentro de menos artículos funcionan. Um, forma que tenemos todos estos ítems para que podamos acceder por ejemplo al primer elemento. Por lo que sería sólo menos elemento Y entonces podemos actus dentro de él. El primer hijo que es lo que es un impuesto y luego podemos acceder por ejemplo valor de nodo . Pero se puede utilizar, por ejemplo, también sería HTML interno. Como pueden ver, tenemos ahora aquí c plus. Pero antes hay una diferencia entre correos electrónicos de interés y textos contrarrestados Cuando haces algo así, el HTML interno te mostramos algo así pero el contenido de texto te mostraremos exactamente solo contenido de texto. El problema es que sólo es compatible con Internet Explorer nine plus. Por lo que si quieres apoyar estos sitios web, Rose es poco probable. Tienes remolque usa lo que tienes que ir a la primera probada en el valor del nodo. El problema es que no en este momento es no porque el primer hijo ha cambiado. Tenemos ahora al hijo de este artículo. El primer golpe es audaz, y luego la primera vista de negrita es supongamos plus, Así que tendremos que hacer el primer hijo de nuevo. Primer hijo, primera tribu. Y como pueden ver, hemos sido el pasado nazi. Pero así se está poniendo un poco difícil. A veces quieres actuar con el dedo del pie a algo, ¿verdad? Pero si entiendes lo que esta parte y lo que este niño, lo que se sabe, no te sería difícil porque puedes. Entonces incluso, ya sabes, revisa aquí cuando vas al menos artículo y luego vas, por ejemplo, rápido, rápido, ¿ verdad? Como se puede ver el primer disparo de este menos elemento , son ataques. Entonces puedes ir a aquí, y puedes ver, por ejemplo, por ejemplo, que el valor de la nota es c ++, por lo que es bastante poderoso. El nombre del nodo es nombre fuera del nodo. La mayoría de las veces es el nombre de la charla. También puedes usar el hecho de que ningún tipo libre también es siempre para el ataque un limón por lo que puedes comprobar si el ataque es realmente ataque porque, sabes a veces una nota puede ser atacada. A veces puede ser en el elemento yuk injusto. Compruébalo. No tipo. Es gratis entonces. De acuerdo, es un elemento. Es un ataque. Es un elemento. Puedes usarlo para algo útil. ¿ Verdad? Um veamos cómo está funcionando ese próximo hermano. Entonces si estoy en nuestras pistas señaladas así y entonces obtenemos por ejemplo, señala el niño. Entonces el área fuera de todos estos artículos y obtenemos, por ejemplo, la primera persona que tenemos el texto, ¿no? Pero si hacemos bomba, quiero próximo hermano verás que tenemos objeto al menos elementos Así que es casi como si hiciéramos algo así. Por lo que la noche siguiente, sueño previo fácil era para acceder a las cosas siguientes dentro y dentro y no, justo después sabe dentro del norte, la nota de los padres dispararía en la nota nos llevaría hacia atrás. Entonces si estamos en menos artículo ahora mismo, volveremos a la orden. Entonces sería casi lo mismo así Y podrías ser como, Pero ¿para qué necesitaría algo? Porque a veces tienes como primer elemento en tu función enviado desde algún lugar un argumento, ¿no? Tienes una discusión, y fue enviada a tu función. Y tienes y nota que estos, por ejemplo, por ejemplo, aquí y quieres saber de alguna manera cómo es el abrigo de los padres también está dentro de un artículo en orden esto. Ah, y se tiene que sumar en la identificación en identificación así. Ah, así puedo hacer eso y entonces y eso. De acuerdo, así es como funciona. Deberías saber, probando un poco, ya sabes, medio juego de planta. Aquí jugamos con todas estas cosas para ver cómo, cómo están funcionando. Eso es sólo en efecto, Versant. Muchas gracias. 31. querySelector: hola hoy te muestras dos metales muy útiles los cuales se llaman selector de consulta, selector consulta todos. Y como el nombre indica en este cuadrado de situación, significa solicitar algo de nuestro documento escribiendo un selector, un selector que se parece a lo mismo. Al igual que creamos cosas en los s de la CIA Cuando quieres pedir todos los posibles elementos de cocinero que tiene prueba de clase tu solo mecanografiando esa prueba y obtienes todos los elementos y puedes dudar luego hacer algo con ellos, como editar este tipo en HD. En javascript, puedes hacer aún más, verdad. Puedes agregar algún evento del que hablaremos más adelante. Se puede, ya sabes, cambiar la posición fuera del objeto. Se puede cambiar el texto dentro de otras cosas así, ¿verdad? Y el selector cuadrado te permite usar selectores que conoces, y eso es realmente poderoso. Te permite hacer las cosas bastante rápido y fácil de entender. Entonces no necesitas entonces ¿verdad? Tanto tiempo llamado Como aquí solo escribes algo así en lugar de eso ese selector de consultas todo y luego escribes. Yo quiero todos los cursos de programación y quiero todos estos ítems y luego simplemente refrescante tener el mismo resultado. Entonces es poderoso, ¿verdad? Pero hay un problema. No es compatible en Internet Explorer seis y siete totalmente. Por lo que si quieres apoyar este navegador web poco probable, no puedes usarlo. Pero tengo una buena información para ti. Hay algo muy similar marco acuario lesión y luego se puede utilizar en ah, en Java Internet Explorer seis y siete. Entonces si quieres, lo usas si te gusta y quieres apoyar estos eran hermano, que son todos que la mayoría no soy. Ya no mucha gente lo está usando. Entonces poco probable. Tienes que Ah, deja de usarlo o simplemente cambia a coro de día y es medio apoyado en Internet Explorer y experto en Internet ocho. Yo lo haría, me refiero a medio apoyo. Bueno, tienes buenos selectores que nuestro avance y no avanzan No están avanzados. Al igual que elegir un limones por la clase Nombre O R por la identificación ella y avanzar uno donde quieras elegir que chides al siete niño fuera del off. Ya conoces estas exhibiciones, por ejemplo, quiero o elegir al último hijo. Ah, quiero elegir el primer inicio instantáneamente. Se pueden hacer cosas así en el avance CSS con los selectores avanzados. Entonces, por ejemplo, quiero elegir exactamente el de, por ejemplo, y probado. Y no lo haré. Tercer tipo justo sobre los chicos de Ted. Entonces significa que veremos aquí Java 12 gratis. Es Java. Pero también significa que bueno, aquí tenemos una matriz de uno a limón. Esto no es buena idea, porque si sabes exactamente quieres elegir Onley one Piensa desde tu página web. No deberías crear otro porque estás tomando una especia. El segundo es que tienes que pensar que el tiempo correcto este creep va a buscar más cosas como esa. Y así es buena idea utilizar la consulta seleccionada en algunos trimestres. Selector está seleccionando la primera ocurrencia fuera de consulta y devolviéndola como una sola variable . De acuerdo, entonces significa que no tenemos aquí ahora y un derecho Sólo usamos algo así y tenemos buen Java. Pero estamos tratando sólo a uno y limón. Entonces si haces algo así, tendrás ahora la primera una cura. Y así son las partes excedentes, ¿no? El primer ocurrencia fuera artículo de arrendamiento dentro de los cursos de programación. El primero eso si quieres más, solo tienes que cambiarlo todo y lo que quiero. Por ejemplo, elegir todos los elementos posibilidades y tendría yo haría algo así Y entonces puedo acceder si tenemos los índices en array para poder ir a ver plus blast. Yo quiero llegar a este. Entonces es 12012 gratis para 56 Así que solo escribiré seis aquí y me he ido Js bastante impresionante, ¿ verdad? Puedes elegir aquí lo que quieras con selectores muy avanzados, incluso. Entonces tienes la manera poderosa de seleccionar las cosas y luego hacer algo me algo con ellas. Entonces sabemos que tenemos aquí Métodos como Gettleman by I d get elements by tech name que son soportados en todos los navegadores Web. Pero también hay que obtener más elementos por nombre de clase que simplemente elegir por nombre de clase. Pero no se soportan en seis y siete y ocho Internet Explorer en la versión así . Entonces no es buena idea para ti usar algo así porque incluso un selector bastante es compatible en los seis y siete derecha Obtener elementos por no pero por nombre ni siquiera es compatible en 67 y 99. Entonces si quieres elegir por atributo, es mejor usar selector de consultas también porque bueno, puedes hacer algunas cosas como esa Crees que ve los selectores Estos no causan sobre el selector C s s. Por lo que no voy a pasar por todas las cosas posibles aquí. Hay mucha información en Internet al respecto. O tal vez crearía algo por supuesto sobre CSS. Ah, pero ya sabes, solo puedes usar los selectores que quieras con el fin de elegir cosas de tu sitio web. Y lo bueno es que ahora no puedes cambiarte no con esta corbata, pero puedes hacer lo que quieras con ella, verdad? Se puede cambiar la posición de esta prueba. Puedes redimensionarlo. Se puede cambiar a los desplazados con el estilo. Puedes agregar algún evento o algunas otras cosas como esa. De acuerdo, eso sólo hizo lección. Muchas gracias. 32. Cambiar estilos dinámicos con js: Hola Hoy te mostraré cómo cambiar Dynamic hellis STAis usando modelo de objeto de documento en javascript. En primer lugar, necesitas solicitarte que consultes algo de tu sitio web para poder cambiarlo bien, necesitas obtener estos elementos Así, por ejemplo, usar el selector de coro todo usando el menos ítem hablar aquí. Acabamos de seleccionar todos los artículos de posibilidades en nuestra página web. Entonces los tenemos ahora y queremos editarlos. Significa que queremos cambiar el lado por ejemplo el color cómo hacerlo. Para hacerlo, ahora se puede acceder a ellos a estas variables y bueno, esto es un estrecho. que puedas acceder por ejemplo, al primer elemento usando su cero Y ahora ese estilo. Y luego puedes acceder al estilo que quieres cambiar y bien cómo se llama. Se puede ir a, por ejemplo, re Referencia creada por Mozilla Developer Network. Pero realmente no importa porque casi todas las propiedades tienen el mismo nombre en javascript y se apodera. La única diferencia es que están usando aquí se ve el guión y aquí están usando la mayúscula derecha la mayoría del tiempo y Es solo una sola palabra, como se puede ver es justo la misma más tiempo. Para que no tengas que preocuparte por, ya sabes, recordarlo todo. Entonces si quieres cambiar el color con solo teclear el que color es igual Y ahora, por ejemplo, rojo Y como puedes ver, el primer tipo está listo incluso quieres cambiar el color del siete chico, ya que puedes ver zonas de suelo está ahora bien, ¿verdad? ¿ Por qué los siete? Recuerda que no podemos desde cero. Está bien. Por lo que ahora puedes cambiar lo que quieras. Se puede, por ejemplo, dicho esa exhibición a no derecha. Puedes esconder un limones así. Y ahora mismo estamos escribiendo todo aquí. Nosotros queremos ejecutar algo. Al igual que por ejemplo, por ejemplo, descubierto después de hacer clic en algo. Y esta cosa se llama iguala y hablaremos de todas estas cosas más tarde. Pero sabes que tienes avisos de problemas. Bueno, ¿tengo que cambiarlo así? Fuera de curso. Nota. Puedes usar lo que puedes usar cuando algo se repite muchas veces algo diosa llamada bulto. Entonces, por ejemplo, para índice variable dentro de los cursos, quiero cambiar por cada uno de ellos ¿verdad? Display nueve y todo desapareció. Bueno, cambiémoslo a, por ejemplo, un color. Como puedes ver ahora todo está listo. Yo sólo quiero dedo del pie. Elegir, por ejemplo, cursos de programación. De acuerdo, hagámoslo bastante rápido. Ah, tengo Bueno ahora programando cursos, ¿no? Eso también es así para acceder a un estilo, solo escribes ese Styx en el elemento y luego el nombre fuera del sitio que queremos cambiar. Pero, ¿es lo mejor que hay que hacer para cambiar cosas como los sitios de la capa de JavaScript? No siempre. Deberías más tiempo en una clase, vale. Al igual que yo e te mostré en la primera lección de Lexus sobre el modelo de objetos de documento que puedes agregar un atributo, por ejemplo, una clase, por ejemplo. Por ejemplo, puedes llamarlo lazos son otra cosa. Y puedes agregar STAis en esta marea que CSS agregando atributos. Está bien, ¿Por qué? Solución así sería mejor. Porque tienes entonces arranca solo en 115 No necesitas recordar que algo se cambia dentro del código JavaScript ideal. De acuerdo, Entonces es mejor cambiar de bando agregando un tributo en lugar de quedarte muerto? De acuerdo, Puedes hacerlo, pero debes evitarlo. Es mejor agregar atributos porque será más fácil para el mantenimiento futuro fuera de tu abrigo. Muchas gracias. 33. Agregar o eliminar elementos: Hola Hoy les diré cómo agregar y quitar elementos en su página web. Para hacerlo, que usar el método de crear elemento y luego John Stipe nombre fuera del ataque. Entonces hagámoslo. Documento que crea elemento. Y por ejemplo, crearíamos Element P, que significa parque. Vamos a guardarlo. Entonces por ejemplo, eso guardó aquí y ahora podemos acceder a él y podemos hacer lo que queramos con él. Pero que recuerdes cuando creas un limón, no está en tu cuerpo. Tres instantáneamente se ha agregado remolque. Entonces cuando lo refrescas y usas el fuego Bach y te vas aquí, puedes descargar la corteza de la bola de fuego. Estaría en el bono bomba de sección de la Por supuesto, se puede ir a la re aquí y como se puede ver, aún no es humano, ¿ verdad? Acabas de crearlo. Ya puedes hacer alguna noche ser Stichel o roja. Se puede hacer P e nombre de clase unión. Se puede crear el costo de prueba. Puedes hacer p. html interno va a ser, por ejemplo, algunos piensan que puedes Y como puedes ver, todavía no está aquí, ¿ verdad? Aquí no hay nada. Nada aquí Tienes grúa añadida. Tienes remolcar un pent este niño porque es un niño al que puedes anexar y anotar. que puedas, por ejemplo, ponerte más audaz para que podamos hacer selector de consulta de documentos y podamos acceder a cuerpo Y ahora podemos guardarlo en la variable temporal y podemos agregar al cuerpo al final de la carpeta Un niño y solo podemos die pp. Y, como pueden ver ahora está aquí. Cuando vamos aquí, como pueden ver, podemos verlo. El estilo de prueba de clase coloreó algo que tú Así que todo lo que describimos aquí está ahora dentro de aquí. Entonces es bonito Elson, ¿verdad? Acabamos de añadir algo nuevo dedo del pie nuestro documento que no estaba en nuestras estrellas, Scott, como se puede ver ahora en nuestra fuente. Pero no es visible. Sólo es visible con el fuego de vuelta porque el fuego de nuevo es solo, ya sabes, constantemente refrescando este lugar algunos Es muy bueno d dedo del pie trasero, pero podrías estar pensando ahora. Oye, te dije que nuestro HTML interno se puede usar para agregar y hablar HTML. Sí, se puede utilizar. Entonces, ¿por qué Boulder usa algo así? Porque cuando se usa un HTML interno, todo se va a restablecer dentro del HTM interno. Mel, significa que realmente va a ser re pasado. De acuerdo, ¿qué significa? Porque, ya sabes, hacer como un Pero ¿qué significa? ¿ Qué significa? Eso va a ser re monedero? Hagamos un poco de ejercicio. Vamos a crear aquí dentro otro párrafo. Y con la identificación, ella por ejemplo. Ah, prueba. Do. Está bien. Y ahora vamos a conseguirlo. Entonces documento Obtén el limón por yo d, por ejemplo, porque no sé hacer a ti, Squire Selector ahora y me pondré a prueba. Yo lo guardaría. Y ahora podemos hacer algo con él. Al igual que podemos cambiar el color por lo que el estilo, nuestro tamaño de teléfono. Entonces cambiamos el tamaño del teléfono. puede ver que está funcionando, y está bien. Nosotros editamos aquí cuando revises el incendio. Bach. Como pueden ver, um, hemos llegado aquí. Tamaño de teléfono 14. 14 nos recoge. Lo agregamos. Todo está funcionando. Bien. Pero hay un problema. Si tuviera algo nuevo usando cualquiera y lo exhortara y esto es lo más importante. Cuando hago algo así en, tenía algo por lo que conozco. Eso es suficiente. Su trabajo, está funcionando. Aún así, el problema pasa si quisieras cambiar algo después. Entonces si quisiera cambiar aquí el tamaño de la forma como se puede ver el tamaño aumentado, yo lo sabría, cambiando dedo del pie ocho correcciones. Como puedes ver, no está funcionando en absoluto. ¿ Por qué? Porque te dije que todo es reparaciones, informes cada vez que añades algo al HTML interior así, lo que significa que si te apegas para encontrar esta cosa se quita. Dice que he creado de nuevo y porque todo es que corres de arriba a abajo cuando estás en 9 25 estamos accediendo a ese párrafo con yo también detesta. Y cuando nos adherimos un número cuatro dedo el html interno justo entonces esta cosa se destruye y no tenemos actores para comer animal con el fin de acceder. Tendrá que hacer en contra de algo así. Y entonces, sí, está funcionando bastante bien, ¿verdad? Pero no es como deberíamos pensar a veces, justo cuando se quiere tener acceso a algo en todo el mundo todo el documento y realmente va a pasar muchas veces. Entonces necesitas crear el elemento manualmente. OK, pero por lo demás es una buena idea usar en su HTML porque es más rápido y es más fácil de usar bien. Posteriormente crearás algo digno, esculpir iguala también y también se destruyen. Cualquier cosa se destruye cuando estás agregando cosas así, ¿de acuerdo? Y es más lento cuando lo estás haciendo de esa manera. Pero ya sabes, si puedes hacer algo en, ya sabes, una función y no necesitas acceder a ella más tarde, entonces es buena idea usar HTML interno. Incluso puedes hablarlo,ya sabes, creando ya sabes, una cadena temporal y asignando la cadena grande al HTML interno al final. Haremos algo así en la siguiente lección cuando entrenaríamos algo eso que así funciona. OK, estás usando en nuestro HTML cuando solo quieres hacer algo simple una acción simple no quieres dedo del pie te refieres a la A limón un limón más tarde. De acuerdo, porque podría traernos algunos problemas. Sería difícil detectar derecho a ladrar algo así lo que pasó. Pero aquí tengo actores, pero, oh, oh, ¿cómo? ¿ Cómo? ¿ Cómo? ¿ Cómo? No es como se hace que después de esta línea, no puedo cambiarla ¿verdad? Él es como, Whoa, verdad, lo has hecho. Solo tienes que saber cómo funcionaban los HD Molly's internos. De acuerdo, entonces ahora ¿cómo quitar un limón? Eso es y es bastante raro porque si querías, por ejemplo, por ejemplo, quitar los cursos de programación o los cursos de desarrollo web, probemos estos. Tendremos que conseguirlo primero. Entonces coro un selector, por ejemplo, y luego programar cursos. Necesitas guardarlo en algún lugar. Entonces, ¿quién hizo algo así? Y como se puede ver, su función para eliminar se llama eliminar gráfico. Se está quitando niño encendido. Entonces en este momento estamos en lo principal que queremos quitar. Por lo que necesitamos subir usando la nota de los padres al poder y y del padre. Podemos sacar al niño, que es cursos de programación. Y luego, sí, acabas de quitar todas las cosas de los cursos de programación justo cuando vas aquí, como puedes ver, ya no tenemos cursos de programación, la está expandida. Podría estar preguntándose por qué no hay una función como esa. Sí, hay una función así, pero es bastante nueva, y no va a funcionar. La mayoría de los hermanos Web no lo usan. Ni siquiera te molestes en usarlo porque la mayoría de las veces no trabajarás. Pero también recuerda que la mayoría de las veces no quieres quitar nada de tu código HTML. La mayoría de las veces se quiere simplemente ocultar algo, y para esconderse, es mejor usar naves estelares. Quieres simplemente cambiar la pantalla de absolutamente no non on o de non toe. Absoluto en algo así, ¿verdad? Se puede cambiar la opacidad. Sea lo que sea que más tiempo. No quiero quitar algo porque estamos quitando y agregarlo lleva tiempo, correcto. Es mejor simplemente cambiar el cambio de la pantalla por, por ejemplo, ejemplo, cambiar la clase de atributo. Ah, en quitarlo más tarde, ¿verdad? O simplemente cambiando el estilo que este juego de nada demasiado absoluto en el camino que lo harás. Probablemente después de estos autos también quieren aprender algo. Lo que se llama Jake desgaste con Jake desgaste cosas como esas son realmente aún más fáciles. Entonces justo después de estos autos, adelante y aprende algo con esta consulta de país. Porque te tendrá aún más. Habrá solo un montón de funciones útiles que serán más fáciles de usar. Y lo estarán. Ya sabes, puedes usarlos en lo que sea que trajeron los navegadores. No lo hará porque Jake use un soporta todos los navegadores. De acuerdo, eso está todo en esa lección. Muchas gracias. 34. Loop de otro bucle: hola hoy con un tren un poco, creamos una tabla de multiplicación que será dinámica, agregó Kelly a tu página web, y entrenaremos algo. De lo que se llama loop. Crearíamos un bucle dentro de otro bucle y te mostraré cómo funciona. Entonces empecemos de tomar el diff con el I D. Resultado, porque necesitamos dedo del pie en alguna parte Son tabla de multiplicación. De acuerdo, vamos a guardarlo y queremos agregar ahora aquí algún contenido justo después. Y tenemos que pensar si quieres usar el metal infantil pasado o queremos usar el HTML interno, ¿cuál es la ventaja de usar arriba y probado aquí? Si usas arriba y arriba y niño, entonces podemos crear todos los elementos. Pero bueno, crear elementos es bastante lento para JavaScript cuando tienes que crear una tabla de tabla, rotar la automatización, tomar sobre dimensión a D t. D. Justo hay muchos de ellos, y también no será claro abrigo. Por lo que no necesitamos también los asnos referidos al aireador de la Zvereva. Sólo queremos dedo del pie asignarlo a la vez. Muy bien, así que esto es mala idea usar arriba y probarlo mejor idea usar HTML interno, pero no debemos adherir. Tienes algo como hacer algo como esa mesa y entonces no deberíamos hacer algo así y luego solo,ya sabes, ya sabes, repetir una mesa buffet o tal vez dimensión de mesa. ¿ Por qué? Porque, como dije en la última lección, cuando lo haces de esa manera, todo se vuelve a recrear partes, ¿no? Significa que lleva mucho tiempo. Por eso debemos crear un temporal Podemos simplemente almacenar tabla de multiplicación . OK, fue guardarlo y tenemos el establo justo aquí, ¿ verdad? Y al final, al final, nos acaban de asignar a HTML interno El resultado. De acuerdo, y eso será justo para nosotros. Por lo que queremos crear algo que nos veamos así, una tabla de multiplicación. Vamos a refrescarlo porque ahora no tienen nada y hagámoslo. Entonces creo que deberíamos usar el bucle porque queremos multiplicar uno por dos por tres por cinco. Y eso es etcétera, ¿verdad? Por lo que por el momento son capaces yo igual a cero. Si yo es inferior a 10 y yo más plus, lo que significa que queremos ahora mismo Repetir esto. Piensa 10 veces de 0 a 9. ¿ Por qué? Porque ese oriente inferior a 10 nota Lo que significa que 10 no se mostrará en absoluto. Hacemos algo, por ejemplo, como esa mesa de multiplicación plástica me llama y veremos el on el resultado de los números de cero a ahora, ¿ verdad? Y es bastante fácil de entender, correcto, Porque somos lo que estamos creando un temporal de un rebelde. Estamos asignando dedo del pie I cero. Y si yo es inferior a 10 entonces sólo queremos repetir toda esa instrucción hasta que apenas sea mayor que 10. ¿ Verdad? R es igual. Entonces deberíamos cambiar es correcto, porque no queremos de uno no queremos escuchar algo así como cero queremos dedos libres pero no querrás Free for 2 10 es las tablas básicas de multiplicación Así que deberíamos cambiarlo a algo así Y ahora sí funciona bastante bien Añadamos un espacio para que se vea mejor. Y ahora queremos que segunda línea? 1/3 línea cómo crear próximas líneas. Pues bien, el fin de crear la segunda línea quisiera multiplicar estas líneas por dos. ¿ Verdad? Nos gusta multiplicar uno por dedo para comprar dos libres por a 4 a 5 a seis por dos. Obama, ¿verdad? Te gustaría crear tercera línea te gustaría multiplicar la primera línea por gratis por cuatro por y mi mamá Entonces, ¿cómo hacerlo? Pero si lo hacemos algo así, nos adherimos a. Como pueden ver, tenemos la segunda línea al instante, ¿ verdad? Si a su libre tenemos la línea cansada cuatro pensamiento línea cinco, quinta línea. Entonces la verdad es que queremos dedo del pie correr estas instrucciones Pero queremos cambiar aquí Avery capaz 10 veces. Entonces deberíamos correr f loop dentro de un bucle tan lejos de son capaces y necesitamos crear otro fueron capaces Ahora cuando Jay es menor a 10 j plus y quieren multiplicarse aquí por J e incluso no es que tenemos ahora tabla de multiplicación Pero lo que no tenemos Ah ya conoces el espacio de descanso Así que vamos a agregarlo. No debemos agregarla aquí porque cuando agregamos aquí lo tendremos después de cada número Queremos agregarla después de cada fila, derecha, derecha, Así que con el fin de tenerla después de cada fila. Deberíamos añadirlo aquí. Y como pueden ver, tenemos buena ahora Tabla de multiplicación. No se ve bien, pero funciona bastante bien, ¿ verdad? Tenemos buena. Ahora quiere sentir por los luchadores. 10 246 20 etcétera. Y ahora analicemos esto. Ve lo hermoso porque cómo sabes que podrías ser como ¿Cómo funciona cuando el asignado aquí? Entonces gané. Estamos revisando. Si yo es menor el o mayor que 10 es menor, que significa que ahora podemos ejecutar todas las instrucciones dentro del bucle. Por lo que nos encontramos en la línea nueve un bucle otra vez, lo que significa que tiene toe run antes de ir del dedo del pie. Otras instrucciones como, por ejemplo, que uno Todo dentro de estos bucles tantas veces como lo dicen las condiciones. Estamos creando un día muy capaz y le asignamos un dedo del pie. Si uno es inferior a 10 ya que es menor, entonces 10. Entonces tenemos aquí ahora uno multiplicado por uno y después porque ejecutamos estas instrucciones, que Waas dijo que debería ser un ya sabes, ejecutado. Tenemos que aumentar J. Así que no es demasiado. Y volvemos a revisar. Si dos es menor, los son mayores a 10. Entonces vuelve a ejecutar esta cosa. Porque si bien es así, no tenemos a nadie multiplicado por dos. Entonces sí, tenemos ahora ellos todavía aquí. Está bien, genial. Entonces tenemos gratis 456789 10. Correcto. Entonces si tienes algo así, sólo tenemos una línea. Si haces algo así, tendremos dos líneas libres libres, 25 líneas. Lo genial de que sabes, usar bucles es que ahora podemos cambiar el resultado muy rápido. Y podemos aumentar nuestra tabla de multiplicación sólo en algo del dedo del pie, cualquier cosa que queramos. De acuerdo, Entonces después de terminar estos cuando estos sean, ya sabes, 11 vamos a ejecutar este oro. Entonces estamos sumando la línea de freno y luego revisamos Bueno, agregamos dedo del pie, de nuevo uno por la implementación aquí. Y si dos es menor o mayor que 10 lo es. Y vamos a ejecutar de nuevo estas cosas. Entonces así funciona. Así es el lope. Estaban trabajando dentro de otra mirada. De acuerdo, entonces cambiémoslo a la mesa. No tardó Tener una mesa. Vamos a crear uno así. Entonces, como pueden ver ahora, vamos a crear elementos de dinero. Y es mejor hacerlo de esa manera porque, bueno, los vamos a asignar al final aquí, ¿ verdad? Y sólo será bastante rápido. Entonces, ¿tienes mesa ahora? Ahora necesitamos una tabla de datos sobre. Y creo que los datos de mesa son justo donde se presentan todos estos números. Entonces deberíamos en la mesa dimensión aquí, ¿verdad? Así. Y también necesitamos una fila de tabla. Y Pedro es donde los braghis. ¿ Verdad? Entonces deberíamos terminar el papel de mesa aquí, Pero también sociales paramos un buró antes de entrar en el lope aquí y ahora, Como pueden ver, lo tenemos dentro de un lope. Por lo que se ve mejor ahora mismo. Cuando lo cambiemos, todo seguirá siendo bonito. OK, eso es todo. Lección india. Muchas gracias. 35. Conceptos de eventos: hola funciones que hemos estado creando hasta ahora se invocaron manualmente, que significa que solo estábamos escribiendo nombre fuera de las funciones que los parentis es que podríamos algo mandar un argumento a la disfunción y bueno, simplemente ejecutaríamos el código por dentro. Pero estamos todo el tiempo haciéndolo a través de este punto creep Js Y ya sabes, la mayoría de las veces queremos ejecutar las funciones cuando algo sucede en tu página web, cuando ni siquiera ocurre y ahí es cuando usamos pares. De acuerdo, así que incluso es solo algo que sucede en tu página web y podemos reaccionar ante eso. Por ejemplo, podemos decir lo que se debe ejecutar después e incluso imaginemos una situación en la que alguien escriba la contraseña en los cuatro y tenga que retirarse ser el juego para asegurarse de que ambos sean iguales después de enviar el teléfono, que también está apagado tan golpeando. Por lo tanto, podemos comprobar con la función si ambas importaciones son iguales. Por lo que las igualaciones son solo acciones típicas realizadas por los usuarios fuera de tu sitio web que queremos que toe reaccione bien, incluso están haciendo dinámica de tu sitio web. Eso es bastante impresionante. Entonces desde hoy, tu html se va a convertir en algo se llama el HTML dinámico texto hipertexto lenguaje América . Por dinámica, queremos decir que me puedes encontrar Nolly responder dinámicamente dedo del pie todo lo que estas tu uso aire haciendo en tu página web para que cómo registrarte e incluso puedes hacerlo en línea en la pelea html . Esta no es la mejor solución. Te lo diré pronto. ¿ Por qué molestarse? Empecemos de eso. Para hacerlo, escribe el nombre fuera. ¿ De dónde sacas todos esos nombres? Se puede ir a la referencia par, por ejemplo, a la red de desarrollo modular. Sólo hay tonos fuera de ellos. Pero conoces a la mayoría de ellos que nunca verás en tu viaje de programación. De acuerdo, aterrizaremos en estas cicatrices. Uno más importante hoy, que yo sólo mostraría uno enorme. Eso es suficiente. A lo mejor para aprenderlos tiró todas las llamadas de esa lección. De acuerdo, porque, bueno, la verdad es que hasta nuestro solo dar el poder por ti. Javascript. Entonces, para crearlo, solo tienes que escribir el nombre del evento que quieres registrar y por ejemplo, vamos a registrarte en. Hacer click en click es solo algo que va a pasar cuando le des click, ¿ verdad? Entonces desde ahora, cuando haces click en la charla, Dave on del ejemplo por algo que está dentro de la acción tan simple impuesto, no vas a ejecutar lo que está aquí, puedes escribir aquí un código JavaScript que puedes ejecutar, por ejemplo función. Entonces digamos, por ejemplo, que quiero una prueba de alergia del dedo del pie. De acuerdo, así que después de refrescar consigue cuando hacemos click en él Como puedes ver, podemos ver este mensaje aquí. Entonces después de hacer click, no lo ejecutamos automáticamente cuando cargamos nuestro sitio web justo después de hacer clic en él. Bien ejecutado bastante También, podemos cambiarlo a, por ejemplo, todo más ratón sobre. Por lo que significa que cuando el ratón haya terminado, entonces podemos ver este mensaje. De lo contrario no está funcionando. Consigue nuestro Así que hay muchos eventos que acabamos de aprender en las próximas lecciones de hoy. Acabamos de aprender cómo el dedo del pie los registra y cómo manejarlos. De acuerdo, entonces ahora lo estamos haciendo en línea. Podemos No lo haces en el JavaScript desde este lugar. Y esto es mejor. Por qué ahora imaginar una situación en la que tendríamos, por ejemplo, más días así. Está bien. Y imaginemos que tienes buenos miles fuera de HTM si o qué? A lo mejor 30. Está bien. ¿ Lo sabías? Y ahora digamos, hicieron tus pelotas o incluso acabas de notar. Ya sabes, no quiero hacer más algo después de que alguien tiene más sobre Hizo ese dif Lo habrías retrasado de todos los lugares posibles manualmente. ¿ Te imaginas esto? Será simplemente horrible para ti. De acuerdo, entonces en esta solución en solitario es genial. Pero sólo para los primeros sitios web pequeños. O, por ejemplo, donde tú donde es solo tu tarjeta de visita o algo así. Está bien. De lo contrario debes evitar esto. ¿ De acuerdo? Es mejor simplemente hacerlo. Bueno, podemos tomarlo para venir, y así después podrás ver cómo se hizo. Es mejor hacer algo así. Bomba. No vago. Y sólo nos llevaremos a este tipo. Entonces moriremos. Documento. Consigue un limón por I d resultado, lo ahorraremos en la temperatura de un Rabel. Y ahora podemos usar el punto tipo el nombre off Incluso yo quiero manejar y luego le puedo asignar bien que queremos hacer. OK, tenemos eso después de esto, um, diseño. Y hay algunos problemas ahora, si hago algo así, no lo harás cuando lo refresque , son automáticamente recibir prueba cuando tengo mi boca sobre estos impuestos, no está funcionando. ¿ Por qué? Porque hay que recordar que todo el tiempo cuando nuestra paquetería JavaScript vea algo así con la enfermedad de la pobreza, ¿ verdad? Dice que función de padre es es es significa ejecutado automáticamente en este momento. Y la verdad es que aquí somos justo lo mismo. El que se va a devolver del Ártico cuando los anuncios Nada. Entonces por eso no está funcionando. Entonces, ¿cómo ejecutar algo así? ¿ Qué? Se puede crear una función animus de la que estábamos hablando en las lecciones sobre ellos. ¿ Verdad? ¿ Andi? Ahora mismo tenemos buena función de animales Q y dentro de ella, podríamos ejecutar, por ejemplo, disfunción, ¿ verdad? Y ahora cuando tenemos millas por encima, está funcionando bien. El genial de esta solución es que acabamos de sumar todas las millas, incluso a este elemento. Y ahora podemos cambiarlo desde este lugar. No necesitamos ir al HTML cinco. Si tuviéramos, por ejemplo, más elementos tomando aquí. Y lo haremos justo a este propio ratón sobre, incluso a cada uno de los elementos dentro del área o algo así, podríamos cambiarlo instantáneamente en un solo lugar y no necesitaremos hacer nada en el html cinco. OK, por eso esta solución es simplemente mejor para sitio web más grande. Todavía tiene algunas cosas de apuesta que se pueden resolver mediante el uso de algo bueno es hábil en incluso oyente. Pero hablaremos de esto en el próximo menos en esta lección, solo debes recordar que incluso son solo piensa que sucede en tu sitio web y puedes reaccionar ante ello invocando una función, por ejemplo derecha. Y también debes notar aquí que cuando tienes aquí millas propias más, podemos invocar tienes muchas funciones, verdad? Y esta es la solución para invocar una función cuando quieres toe enviar su argumento y esta es la única solución segura. De acuerdo, entonces pero si tienes una función que es que no tiene argumentos de ejemplo funciones simples y aquí tenemos, por ejemplo, alerta Oi. Entonces puedes ejecutar esta función solo haciendo algo así sin que el parentis sea correcto. Y ahora, como se puede ver, bomba, está funcionando. De acuerdo, Pero cuando quieras mandar algo para comer así en este momento, simplemente se ejecutaría automáticamente. Y ya no funciona. ¿ De acuerdo? Eso Hay unos errores bastante comunes que la gente hace que sea el inicio. Y la solución a esto es simplemente crear una enorme función que no tiene nombre. Y entonces puedes ejecutarlo enviando escuchar un argumento, ¿ verdad? Algo así. Y podemos usar este argumento como, por ejemplo, la deuda. Y ahora está funcionando. Bien. De acuerdo, esa sólo es buena lección. Muchas gracias. 36. Esta palabra clave: hola. La mayoría de las veces cuando quieres invocar a una facción usando un evento que quieres dedo del pie También actus propiedades fuera del elemento que involucraba disfunción. Entonces, ¿quieres chequear? Sería con Es eso una lima y quieres llevar ¿Dónde está esa alarma? Y ah, ¿quieres esconderlos y cambiar el color del tamaño del teléfono sentiment de estos? No, no hay otras cosas como esa. Entonces, ¿cómo acceder a los 11 que involucraron esta función? Correcto. Esto es así cómo hacerlo bien, puedes usar la guerra clave. Acabamos de llamar a esto, pero cómo usarlo. Bueno, vamos a crear un rebelde al que llamamos resultado. Y tomemos de nuestro documento por un limón estas identificaciones o simplemente llamamos resultados . Entonces tomamos este elemento aquí y ahora podemos usar el punto de resultado y podemos actuar como un y hasta no lo haremos. Correcto. Entonces, por ejemplo, tomemos casi el control parejo y asignemos aquí una función que tiene Toby corriendo cuando estos incluso ocurre. Entonces, por ejemplo, lo llamaremos cambiar de color, y también tenemos que definirlo ahora. Entonces tomamos declararlo primero, y ahora podemos crear el cuerpo fuera de esta función. Por lo que queremos cambiar el color de estas alineaciones. Cómo hacerlo. Podrías simplemente escribir resultado ese estilo ese color igual al rojo. Y va a funcionar. Como se puede ver, está funcionando bien. Justo cuando tenemos el ratón sobre él, está funcionando. Pero hay un problema. Um, si cambiara a este tipo por otra cosa después, ¿ verdad? ¿ Y si quiero, por ejemplo? Ah, haz algo. Yo det Ah, Sería resultado para escribir el segundo tipo. Y yo también invocaría el cambio de color. Y me gustaría, ya sabes, cambió el color de los resultados a que me gustaría cambiar el color de otra cosa , ¿ verdad? El otro elemento. No días uno. Bueno, por eso, tenemos algo con este disco de culto. Tu Cuando usamos esto aquí, va a cambiar el color de estilo del un limón que involucró esta función. De acuerdo, entonces en esta situación, es este elemento y también va a funcionar. Pero ahora mismo, estos un nuevo abrigo universal. No tendrás problemas cuando cambies algo. Tu código Cuando quieres agregar nuevos elementos y otras cosas que hice. Entonces así es como debes montar tu abrigo. De acuerdo, vamos, vamos, por ejemplo. Ahora. Ah, usa el ratón fuera. Funcionan bien incluso. Y eso es invocar el cambio. Funciones de color fuera. Vamos a esculpir en cambio de color hacia fuera. Y quiero volver a cambiarlo a negro. Y como puedes ver ahora, cuando te mueves, está cambiando la amenaza. Cuando te mudas, está cambiando a negro y ves fuera de curso que puedes crear usando CSS, y probablemente sea mejor idea. Pero solo te estoy mostrando la sintaxis. Por lo que estos incluso ocurre cuando solo tienes la boca saliendo del lugar. Justo en. Ah, esta cosa, podría mejorarse. Eso llamó lo primero que te dije que no debes cambiar de tamaño por este lugar, ¿ verdad? Simplemente debes agregar una clase para poder establecer una clase de atributo de trampa. O incluso podrías llegar a la clase así. Vamos a llegar a este nombre más igual. Y ahora, por ejemplo, usará de este lugar cambio colonia. Mm, cuesta. Entonces yo haría algo así y podemos cambiar más tarde. Este nombre de clase a nada, ¿verdad? Entonces, por ejemplo, algo así y no lo harás es que ahora no usaría la chimenea, así que para comprobar qué pasa. Pero se puede ver cuando tenemos un buen ratón sobre la clase se cambia para cambiar de color. Cuando salgo, no es nada. Entonces sí lo explicamos. También podríamos quitar la clase o podríamos decir algo. Establecen atributos y yo podría quitar atributo y podría escribir cross. Y esta Cassie se acaba de quitar totalmente. Pero el problema de quitarlo o cambiarlo nada es que podrías tener clases de Humanae que también podrían ser importantes. Por lo que cambiarlo a nombre de clase no es buena idea. Podrías agregar al final algo así. Pero el problema es que no se debe quitar ese tributo entonces totalmente o cambiar a nada. Simplemente debes eliminar este atributo. Ah, bueno, este valor fuera de atributo, pero cómo hacerlo Bueno, entonces deberías usar por ejemplo sub cadena del objeto JavaScript. Se puede leer al respecto. Incluso puedes entrenar ahora, pero luego hablaremos para que puedas como ejercicio. Podrías hacer una investigación en este asunto, ¿de acuerdo? Y hazlo de esa manera. Y solo puedes esperar cuando hablemos de ellos. String, objeto. Y verán que hay una función de subsidio que hemos sido situación así. De acuerdo, entonces este es un ejercicio para ti. Y me gustaría también darle un ejercicio más. Por supuesto, si tienes algún problema, solo pregúntale crear una discusión. Vamos Ah, me gustaría que crearan dos muertes que representarían Primero representarían el signo más un segundo. ¿ Presentarías lo menos? OK, Y cuando escribas cuando haces clic en el signo más, este impuesto no va a cambiar el color, pero se va a hacer más grande. De acuerdo, Cuando crees el signo menos, este texto va a ser más pequeño. Recuerda, si tienes algún problema, solo pregunta. Pero eso no es un problema difícil del dedo del pie, ya sabes, escribir para resolver así es buena idea. Aunque te lleve 20 minutos. Es buena idea intentarlo bien, hacerlo tú mismo. Tienes problemas. Sólo pregunte. Eso es sostener la lección. Muchas gracias. 37. addEventListener: Hola hoy hablará de en el oyente de eventos y del método que se llama eliminado . Evento. Escucha, pero antes de que vayamos hablando de esto, me gusta mostrarte lo que incluso necesitamos Esto. El cierto es, que presume de tres que necesitábamos para ponernos el abrigo y más fácil de agregar. Está bien, pero hagámoslo. No pongas ejemplo. En primer lugar, cuando hablamos de eventos, te mostré la versión en vivo, ¿no? Podríamos simplemente escribir cosas así y sólo podríamos decir lo que queremos involucrar cuando estos incluso autos. El problema es que bueno, si hacemos algo como copias, muchas veces han logrado HTM si ojos y quieren cambiar algo, esto nos va a dar un gran dolor de cabeza, ¿ verdad? Tenemos que hacer mucho trabajo. Al mismo tiempo tenemos ahora Java gritando que HTM. Si quiero cambiar algo, sólo va a ser horrible. Por eso tenemos algo así. Y hay una solución bastante buena. Pero hay un problema en ello. pena si ahora quisiera, por ejemplo, invocar otra función. Entonces me gusta hacer algo así como algo que y ahora me gusta no cambiar los bods de color aumentar el tamaño de la forma. Entonces me gusta crear función la cual se va a llamar aumento de tamaño telefónico y me gustaría aumentar el fondo dicho Por supuesto, me implementaron más tarde pero ahora mismo Hey, ¿qué pasa cuando diseñó así? Esta cosa solo está anulando este dedo y el cambio de color no es animal de trabajo. Para que pudiéramos poner en show en algo como hey, cambiar de color Y quiero aumentar el tamaño del teléfono dentro del cambio de color. Pero es un problema por qué cambiar de color está aumentando el tamaño de su teléfono. Esta función ahora no es autodescriptiva. Por lo que podríamos llamarlo podría crear una segunda función la cual vendrá inicialización de función e implicaremos el cambio, color y aumento del tamaño de fuente dentro. El problema es que la función de inicialización no es tan autodescriptiva también. Y el segundo problema es que hay que recordar que a veces se puede querer detener ejecución de algunos incluso se quiere decir Hey, no quiero ver y el on casi sobre afectan ahora mismo Ah, en el por ejemplo, cambiando de colores. Ya sabes, ahora mismo lo puedes hacer, por ejemplo, haciendo algo que asignando No, no, no. De acuerdo, entonces algo así como el vacío. Pero el problema es que puedes hacerlo solo a esta sola función a estos un método puedes elegir uno de los métodos que se van a invocar justo encima, pasar el ratón sobre. Entonces es cuando quieres dedo del pie usa el at, incluso escucha. Entonces, ¿cómo usar? Tomemos días en bajo la sección de comentarios. Y para poder usarlo, solo tecleas los resultados. Por lo que el 100 que lugar que tomaste de la de tu página web. Entonces, por ejemplo, mareado frito, y solo tecleas al oyente parejo. Y ahora tomas el nombre de incluso ¿quieres manejar? Por lo que solo tecleas el ratón sobre. No escribe palabra clave propia. Ahora no. Está bien. Ya no necesitas esta palabra. Tan millas más y luego la función que se quiere invocar. Entonces, por ejemplo, cambió la llamada, y ahora podemos hacerles lo mismo. Ratón fuera sin el brazo en un cambio de color fuera. Está bien. Y cuando lo refresca, sigue funcionando. Bien. Entonces sólo mirando un poco diferente a la derecha, Pero tenemos bueno ahora más poder. Compra más poder. Es decir, ahora podemos hacer algo así. La mayoría, sin embargo, quiero aumentar el tamaño del teléfono. De acuerdo, entonces ahora tenemos dos funciones que se van a invocar cuando más tengamos nuestro encima. Para que otros podamos ver algo bien así. Ondas se puede ver Sí, está funcionando. Cambió el llamado a leer y también alertamos esto. Y lo genial es también que puedes quitar ese tamaño de teléfono aumentado más tarde. Y otra cosa genial es que como puedes ver, estos nombres son autodescriptivos. Esta cosa está aumentando el lado frontal. Esta cosa está cambiando el color. Y la cosa es esto en desplazados esta cosa es en este lugar se puede cualquier centrista decir qué está haciendo lo que cosas así realmente te van a tener en grandes proyectos en mis pequeños proyectos. Off así se proporcionaría la mayor cantidad de tiempo suficiente. De acuerdo, ciernes proyectos más grandes. Algo así es bastante importante. De acuerdo, así que este es el final incluso. Escúchala. Ah, vamos a implementar el aumento de teléfonos, yo Así que vamos a entrenar un poco. Entonces cómo cambiar los sitios telefónicos podrías escribir estos que es tamaño formado con la mayúscula igual, por ejemplo, 18 píxeles. Y ahora veremos eso. Sí, cambió el tamaño. Todo está funcionando bien, pero hagámoslo un poco más difícil. ¿ Y si quisiera aumentarlo cada vez que tengo mi ratón sobre él? Entonces tendremos que tener acceso a esto. Pero vamos o algo así Alertan y veamos qué hay dentro, como se puede ver Nada. ¿ Por qué? Porque sabes que Spice puede hacer algo. Si eso cosas como el tamaño de la diversión puede ser imagen muy diferente, hermano. Se pueden computar y otras cosas como esa un hombre apuñala de las que no hablarías. Y por el problema, hay que conseguir el tamaño de la fuente de una manera un poco diferente. Deberías hacerlo de esa manera. Deberías entrar en la ventana y los actores, obtienen función de estilo computado. Y ahora teclea el nombre de un limón. ¿ Quieres obtener el tipo de computadoras de? Y luego el nombre del teléfono, El nombre de la propiedad a la que desea acceder pero que desea acceder es ahora a través del get Ah, valor de propiedad. Um, obtener valor de propiedad. Correcto Eso. Y ahora, con el fin de obtener el valor de la propiedad, no teclearás tamaño de teléfono. Pero morirás. Encontrado tamaño de guión. De acuerdo, entonces el nombre típico. Y ahora, como se puede ver cuando lo superemos, tenemos que realmente? El 16 Peaks es así el tamaño verdadero, justo entonces 18 picks es porque lo cambiamos más tarde. Eso es genial. Y ahora podemos, ya sabes, conseguir estos en variables por ejemplo como esa y podemos usarla. Incrementarlo. El problema es cómo aumentar algo que, igual que 16 picks, es que hay unos píxeles. Es una cuerda, ¿verdad? Es saber el número. Si quieres tener, es un número que necesitas analizarlo cuando podrías controlar la prosperidad Will not es que siempre hemos conseguido algo con esto llamado partes en, lo que significa que queremos partes. Significa cambiar el valor de la cadena a indigente y por ello en este momento, el tamaño del teléfono que podemos cambiar Trig es solo 16. ¿ Verdad? Después 18. Entonces tenemos el número ahora porque tenemos número, podemos usarlo bastante fácil. Podemos escribir algo así como iguales. Tamaño de teléfono para nosotros nos recoge. Y no lo va a cambiar ahora. Por lo que necesitamos aumentar el sitio divertido. Podemos aumentar el tamaño del teléfono usando, por ejemplo, esa imitación de Brinker McCrum. Si no sabes cómo funciona, las obras van a las lecciones sobre los operadores. Y como pueden ver ahora, cuando acabamos de pasar, estamos aumentando su así está funcionando bien. ¿ Verdad? Y tenemos una función especial para ello. Esta cosa también está funcionando. Pero, ¿qué no? ¿ Qué pasaría si quiero detener este comportamiento? ¿ Verdad? Real go. Yo quiero seguir siendo Este tipo se está convirtiendo para tener razón. Yo quiero quitar a ese oyente. Um, podría quitarlo. Ya sabes, después de que algo ocurrió o podría quitarlo cuando alguien arroja algo, por ejemplo, identificación más tarde. Yo lo recuerdo. Deja de escribir tu parada. Está bien. Y tomaré esto sólo algo que y ahora queremos ejecutar. Cuando se cruje el tope, quita incluso arrendamiento ahí dentro. Por lo que queremos hacer cosas como parar en arrendamiento parejo ahí dentro. Todo arroyo. Yo quiero ejecutar la una función enorme, por ejemplo, como aquella que va a sacar el resultado y luego quitarse de ella. Incluso oyente muerto está a kilómetros más. Y tiene una función que esto llama incrementó sitio telefónico. Entonces sólo vamos a eliminar estos. No lo haremos de esta manera. Simplemente lo hizo. Había uno en la fila. 30 gratis. Como puedes ver, está funcionando bien cuando hago clic. Detener. No tengo millas sobre efecto funcionando bien, pero eso. Pero ya sabes, esta cosa ya no funciona. Así que quitar Incluso oyente acaba de quitar el que quiero quitar. Y es realmente poderoso, como se puede ver, porque fuera incluso de los oyentes, podemos quitar algo. Bueno, uno fuera de la función que se invoca desde el evento, no todos ellos. Y tenemos también un abrigo verde, ¿verdad? Entonces es por eso que hasta los pecadores son importantes. Entonces si no quieres decir que es no te importa el solo usa este, pero más ligero. Realmente, um, apreciarás um, cosas así. Por lo que muy todavía otro problema. El problema es que los antiguos exploradores de Internet encienden 67 y ocho y poco si quieres apoyarlo, entonces poco probable. Esto no es suficiente. Tendrás que usar en lugar de ese método. Algo bueno se llama adjuntar evento, y algo discutirá desprendimiento, incluso lo que significa en par oyente y quitar incluso oyente. De acuerdo, probablemente Internet Explorer en todas las versiones antiguas traídas. El y joven. todos los demás navegadores no les gustó el dedo del pie jugar juntos E hicieron problemas porque acaban llamar. Funcionan que mordieron diferentes por ello. Ah, bueno, gente que programó sitios web encabeza problemas porque no tenían que crear seguros de gracias especiales que funcionaría en ambos navegadores Web a la vez, y podemos hacerlo también. Pero si no quieres apoyarlo, no no te preocupes por ello. Estos navegadores morirán pronto, así que no necesitas preocuparte por ellos a menos que estés y ya sabes, persona que eso es o atreviendo el guión de ti te hace querer hacerlo. Entonces para hacerlo, puedes usar la consulta J, que solo te hará olvidar todas las cosas así porque hasta conseguir estudios computados que no funcionen en estos eran hermanos. Por lo que puedes usar el trimestre J que tenemos. Haces cosas así. Por lo que no necesitas preocuparte por apoyar cosas como esa. Ah, puedes crear una función que llamarás a lo que todos, por ejemplo, crean evento. Te llevarás un objeto que quieras Ah, incluso todavía quieres siquiera nombrar Quieres ejecutar y también quieres qué? Y también quieres, um, name off function invoca el nombre off función para invocar algo que está bien, Y deberíamos comprobar si en nuestro documento existe una propiedad, una función que acabamos de llamar al oyente par. Entonces fácilmente podemos hacer cosas así, ¿verdad? Algo así. Pero en este momento, este resultado se llama objeto incluso nombre isco. Incluso nombre y nombre fuera de la función a par es Hace lo que te va a enviar bien. Y ahora podemos reemplazar todas estas cosas para que solo pudiéramos teclear segundo. Creo millas de evento sobre cambio de color. Entonces solo estamos cambiando nombres, ¿verdad? S o hacer algo. Bomba de alfombra en dhere. Queremos aumentar el tamaño del teléfono aquí. Queríamos hacer cosas así. Y ahora podemos dilatar o tomarlo bajo el mando como ejercicio debes crear Ah, quita incluso a esta enfermera de hazlo tú mismo. De acuerdo, solo estamos Hazlo ahora mismo De esa manera On Dwell. No está funcionando. Eso es chequearla. ¿ Qué? Aguanta me equivoqué. Mal en la consola. Como se puede ver, no se encontró el objeto que incluso oyente. Eso es porque no lo envié aquí ya que para mandar un objeto sobre el que quiero operar, claro. Y ahora, como se puede ver, está funcionando como antes funcionaba. ¿ Verdad? Cuando pateo pararlo, es Ah, parando. Pero ahora mismo, por ello, funcionará también en Internet experto 67 la noche. Pero el aumento de los tamaños de fuente no funcionaba de la manera en que necesitarás también hacer algo diferente aquí. Pero vas a entrar en todas estas cosas, la guerra va a próximas oraciones. Entonces en estas versiones, es simplemente demasiado trabajo. De verdad. Simplemente es más fácil saber algo bueno. Esto podría J consultar aan den en incluso disentería se va a llamar algo así como ser tú. Justo lo que funcionan los navegadores web así. Está bien. Y también hay muchos asuntos que te van a ayudar a conseguir cosas así. Hemos tenido que preocuparnos por cosas de las que estamos hablando ahora, así que ahora puedes crear desiguales. Um, pero por supuesto que acabamos de crear la visión sólo forma, ya sabes, Firefox y Chrome y otras cosas así. No creamos una versión para algo chicas. Por lo que sólo te teclearemos más y ahora objeto que adjunten par. Y va a teclear, um, más incluso nombre. ¿ Por qué? Porque no sólo cambiaron el nombre de la función. Pero también querían que tu dedo del pie se adhiera. De acuerdo, así sucesivamente, más nombre parejo. Y luego el nombre de la función hablando voto. Entonces es un ejercicio. Hacer los eventos desligados de crear quitar parejo y simplemente hacer algo como algo que si tienes problemas, solo pregúntame y no lo harás. Es que sigue funcionando Fine. Terminar en su experiencia va a funcionar ahora. Ah, solo tienes que recordar cambiar esta parte en También haz algo con esto. Está bien. De acuerdo, eso sólo lo hizo Escuchar. Muchas gracias. 38. Objeto de evento: Hola? hoy vamos a hablar de incluso objeto, que te va a dar poderosas habilidades guardadas. ¿ A qué me refiero? Después de estas lecciones, vas a poder validar tu fuerza como un profesional Puedes crear consejos contados puedes crear también lo que quieras. Entonces empecemos esta lección Después de invocar dar función desde el incluso usando el par. Siempre tienes dedo del pie esta función más allá de algo. ¿ Este frío incluso objetaría? Vamos a comprobarlo. Aquí tenemos bueno el resultado elemento con la identificación un resultado. De acuerdo, eso lo tenemos. Y vamos, por ejemplo, registrarnos aquí e incluso podríamos usar agregar incluso oyente Bob,ya sabes, ya sabes, es más difícil de leer, así que no lo usaremos ni siquiera dedo del pie. Es mejor manera de hacerlo. Es solo un proyecto rápido solo para mostrarte algo, Así que vamos a usar la versión más fácil. Entonces vamos a teclear en movimiento del ratón, por ejemplo. Entonces esto incluso va a ocurrir cuando tengamos ratón sobre algo y nos estamos moviendo ¿verdad? No nos quedamos en un solo lugar. Nos estamos moviendo así en las millas se mueven. Queremos ejecutar las funciones. Eso es sólo por ejemplo, hacer aunque algunos gruesos y vamos a definir la disfunción. Y ahora vamos a crear algo temporal para que podamos ver lo que está pasando. Podemos conseguir que este tipo temporal llegue a su onda html interna. Podemos cambiar las cosas ¿verdad? El cool es que automáticamente, el primer argumento de la función siempre es un objeto parejo de la función Que o que éstos se les asignen incluso ¿verdad? Si en ningún caso se te envían argumentos, también hablaremos de cómo enviar a más argumentos más adelante. Pero bueno, institución así. Y ahora cualquier tipo aquí así te darás cuenta de que tenemos que hacer algo con este ratón objeto de culto incluso. Y no se puede acceder a cosas como esa por lo que podemos ejemplificar un alky cheques si el arte Contra ella fue presionada durante el incluso ahora mismo, Como se puede ver, es falso. Pero cuando hice clic y me quedo aguantando y espero que lo esté sosteniendo como un concede para que lo sepas , puedes hacer algún tipo de atajo Z en tu página web. Se puede comprobar qué fondo fondo fondo de Marte era bueno, pero para hacerlo, se puede utilizar el propio movimiento de millas, pero hay que usar en sierras hacia abajo porque sabes cuando estás moviendo tu no se supone que haga clic en algo o simplemente moviéndose. Es así como funcionaba este evento, algunos en millas abajo. Cuando algo cuando tu boca está abajo, puedes cambiar un cheque. Hacían clic los cuellos de botella para que lo puedas hacer así? Bombardeos lo 01 libre. Entonces el cero izquierdo el medio es uno, y el derecho es a, Y hay algunos problemas en los navegadores web de los que hablamos más adelante porque, ya sabes, como siempre, algunos navegadores en implementado el grande de manera diferente. Y hay cosas como X limpiada que realmente es toser. Te va a dar el lugar. ¿ Dónde está tu boca en este momento? Fuera del par. Entonces cambiémoslo en bocas. Retrocede en esto. Se puede ver que hemos salido de la posición de la boca cuando estás en el desarrollo fuera de curso, Esto son, ya sabes, tan grande como tu um, ventana está bien, porque no dijimos que con, Así que es incluso aquí. Entonces por eso está actualizando el eje X. Entonces la horizontal la vertical sería por qué acceder Entonces por qué y cómo eso podría usarlo, por ejemplo, para crear una punta de herramienta justo cuando estás aquí, quieres tener que hacer aquí Cuando estás aquí, quieres tener un pequeño muelle profundo, ¿verdad? Eso está perfectamente bien hacer algo así Y vamos a crear un resfriado simple como Leadsom. Bueno, creativo en algo más poderoso en la lección especial. Pero vayamos al código clave de segunda cosa. Se puede obtener lo que fue presionado en número y escuchar disfuncional devolvió la clave en carácter. De acuerdo, esto es poderoso porque en los teléfonos se puede, por ejemplo, dedo del pie decirnos parar. Ah, gente escribiendo, por ejemplo, a la forma en la que esperas que la gente escriba números que no quieres, por ejemplo, ellos escribiendo alfabeto ¿verdad? Cuando quieras alfabeto, puedes simplemente evitar que los ellos escriban cosas como números que son realmente poderosos. Haremos cosas así más adelante sobre esta cosa. Hablamos de esta lección más tarde, pero esa es la de Lett. Vamos a probar el ritmo. Eso es, um, por ejemplo, ¿sigue pensando esto? Um, pero antes de hacerlo, me gustaría también hablarles de esto. Gracias ahora mismo. Está funcionando porque estamos usando a la gente de bomberos, gente nueva de bomberos, justo en el comité de grupos trabajando en Internet, alentando a los nuevos Internet Explorer. Funcionará. Pero en los viejos exploradores, hay un problema. El problema es que esto ni siquiera existe aquí. Existe en algo bueno se llama ventana que aun así, si quieres dedo del pie accediendo espíritu de Internet en la versión de hora, debes escribir algo así. Pero ya sabes, tú no sabemos qué navegador está siendo utilizado por tu usuario. Entonces para hacerlo de la manera correcta para que podamos soportar todos los navegadores, tenemos que comprobarlo como hacerlo. Te mostraré peso muy rápido. Mira, normalmente esta E no existe en Internet Explorer, lo que significa que es indefinido cuando hacemos algo así. Evento de toro Vory. Bueno, también necesitas saber que puedes escribir lo que quieras aquí. Entonces, por ejemplo, incluso y ahora puedes teclear tus autos E ahora en remolque, úsalo así. Um, podemos teclear hasta esa ventana. Y cuando hacemos algo así, no lo estás, es que es indefinido para nosotros. Es indefinido. Pero para Internet Explorer, no lo es. Pero cuando hacemos algo así, tenemos objeto más parejo. Está bien. Ahora bien, ¿ había algo así? Estoy definido o lógico. Operador Rublyova, Como lo puedes ver. ¿ Eso es todo nuestro algo así aquí? Por qué te dije que operador lógico está trabajando así Eso es estirar la verdad, elegir la opción alternativa. Lo que significa que si tienes algo así, va a elegir uno, ¿ verdad? La solución al problema. Maneras alternativas de hacer algo. Por eso se llama alternado. Y si tienes uno y uno solo elegiría la primera opción, la opción adecuada. Entonces si haces algo así, también va a elegir la primera opción. Si el segundo estos indefinidos va a elegir la primera opción, la creatividad está muerta. También va a elegir estos, ¿verdad? Entonces es cosa perfecta para usar aquí ahora ¿qué? ¿ Hasta se mandó aquí? Sí, ventana que incluso. Y por ello, tenemos ahora siempre aquí en un objeto que quieres usar, verdad? Y no son cuervos. Versión hermano el muy cool. De acuerdo, Así que ahora vamos a entrenarlo. Huevos creados y limpiados por. Yo quiero crear un inclinado. Entonces, ¿cómo hacerlo? Vamos a crear un Dave al que llamamos la punta y dentro de ella quiero dedo del pie doble deber. Algo sobre el dif. De acuerdo, y cuando se refresca como se puede ver, tenemos es algo sobre el Dave. Vamos a entrar en la punta. Deberíamos ocultarlo, Start escribe en Vamos a ocultarlo. Entonces cambiemos la pantalla de bloque a entumecido. Andi, eso es por ejemplo, dijo la posición del dedo absoluto, porque no queremos que tomes el lugar en nuestra página web. Nosotros solo queremos seguir adelante y puede estar en lo que sea que arrasen. Nos gustaría que Toa creara lejos para que confiara para crear la altura para leer, ya sabes, solo para que sea mejor color de fondo en Ben. Otras cosas, como despedirse de otras cosas así. Eso es lo que puedes hacer. Y ahora nos hemos distorsionado, y cuando alguien se mudó aquí, quiero mostrarlo. Entonces para hacerlo, debemos lo que primero debemos obtenerlo. Hagamos algo así de temporal. Perdón, aún profunda Onda que así hasta punta y solo entramos en este display de tiempo y lo cambiaremos para hacer qué bloquear de ellos a bloquear. Y esto puede ver. Ahora está apareciendo, pero quiero mostrarlo. Exactamente el lugar donde boca más fácil, ¿verdad? Porque es una herramienta que la gente entra para mostrarle a tu usuario. ¿ Es así como hacerlo? Bueno, podemos usar el limpiado exactamente XY y por qué podemos cambiar el estilo de posición truco de herramienta left Podemos usar tu ex coreano y en el sitio correcto podemos usar el coreano. ¿ Por qué? Entonces, um no está funcionando porque tenemos que sumar También, él nos escoge. De acuerdo, algo tú Lo hacemos de esa manera en ¿Qué tenemos limpiado? X no se declara fuera de curso cuándo usar eso e las antigüedades y por qué? Y ahora está trabajando bien. Es genial, ¿verdad? Se está moviendo Cura? No, como queríamos, pero debería ser 11. Esto sería de lo más alto. De acuerdo, ahora se ve bien y así es como lo estamos haciendo. Podemos, ya sabes, hacerlo un poco mejor. Entonces, por ejemplo, en tu pueblo Así tenemos bien. El espacio entre el ratón y el viaje de heces en esto. Ya puedes ver que es un poco mejor, ¿verdad? Podemos aumentar eso. Se pueden cambiar. Puedes hacer que se vea mejor. Um, ese script puede ser realmente actualizado, Por ejemplo. Se puede cambiar la descripción en el interior. Por lo que se cambia al tributo A desde aquí, por ejemplo. Datos. Dijeron algo más profundo que y Obama, brah, vamos a hacer cosas así en la lección especial. Ya puedes hacerlo como ejercicio, pero podría ser un poco difícil. Sólo te estoy mostrando el poder apagado de la cosa que acabamos de aprender. De acuerdo, Así que lo tienes. Por lo que finalmente tienes algo divertido que hacer. También podrías, ya sabes, actualizar. Entonces desaparece cuando acabas de mudarte. Ya sabes, funciones que me pongo en mi era mi boca fuera. Otras cosas así. Um, ahora, me gustaría hablar también de cómo enviar un argumento a esta función. Ya sabes, a veces se quiere enviar un argumento especial a la función. Entonces, ¿qué tan bien funcionó? Porque, ya sabes, aquí podemos llevarnos lo que quieras, así podemos hacer algo así y todavía va a funcionar. Como se puede ver, está funcionando porque este es sólo el primer argumento que acabamos de llamar incluso porque es más autodescriptivo. Y el argumento del primer novio siempre es un objeto parejo. Pero lo que pasaría si tuvieras más que el primer acuerdo no es ni siquiera entonces, cierto. Para hacerlo, hay que crear una función enorme como esa y te vas a involucrar para hacer algo así. Pero ahora mismo tienes bueno que incluso aquí, ¿no? El objeto parejo está dentro de la función de miss animal que vas a lijar ahora, la función de hoy y ahora puedes tomarla. Está bien. Y por ello, también puedes mandar argumentos, ¿no? Tan nuevos argumentos, ejemplo. Muestra toma alrededor de la mitad y podemos llevarla aquí para que podamos hacer algo así y podemos d aquí así. Uh, eso es espacio encendido, pero como cáncer, está funcionando correctamente. ¿ Son estas tomas simples sobre nada? Está por debajo de este total aquí mismo. Entonces está funcionando Bien. Tú está bien. Podemos mandar aquí ahora una discusión y no hablemos de este objetivo Ah, bueno, ya sabes, tienes algo bueno se llama estos objetos, y este objeto va a dar ¿Quieres que yo a algo así? Es ese, um, nombre de etiqueta, por ejemplo. Y eso es tomar bajo lo común a los culpables Porque no nos está ayudando. Como pueden ver, tenemos Defu. Por lo que estos trabajos, el nombre tog o podemos actuar emitir cualquier propiedad fuera del elemento que involucró la función. La verdadera visita. Es el un limón que tiene este dedo hasta asignado. Por lo que días que tienen si tuviste dentro de párrafos y ordenaste liberados estos ítems otras cosas como esa, también te dará el si quieres actuar. ¿ Eso es exactamente lo que invocó el evento? Tienes acceso de remolque? El evento que apunte también te va a dar ahora html def elemento. Correcto. Pero ahora te está dando, um, um, el elemento que involucraba. Entonces si tuvieras aquí, por ejemplo, párrafo para así te das cuenta de que está cambiando, ¿ verdad? Porque dif puede tener dentro de otro elemento. Pero esta cosa no cambiaría ¿verdad? Si cambiamos la cuerda del dedo del pie hacia atrás. Como puedes ver, no te está dando lo correcto. Se puede, por supuesto, obtener el nombre tac. Exactamente. Dave. Estar bien, Andi. También hay un problema porque no se soporta en Internet Express seis y ocho. Y también puedes hacer cosas como, ya sabes, como hablamos antes. Por lo que podemos hacerlo como esa fuente de demanda. Y ahora podemos acceder a ella usando así. Como puedes ver , sigue funcionando. Pero ahora va a funcionar en nuestro estudio experto en Internet, porque en un excelente explorador se le llama elemento fuente, no el objetivo A. Entonces crees que este liberando que puedes actuar es exactamente propiedades del A limón que invocó la de la función que incluso la derecha y también la escuela? Porque ahora no necesitas mandar el segundo argumento, ¿ verdad? No lo necesitas Si querías,ya sabes, ya sabes, revisa exactamente la D para algo que no necesitas Ahora hazlo sin embargo. Pero por supuesto, cosas como esa podrían suceder cuando se quiere enviar más de un argumento. Entonces ya sabes, conozco la solución. OK, entonces estos son conceptos básicos de estas cosas. Vamos a crear cosas muy cool más adelante en las próximas lecciones fueron Bueno, entrenar todas estas cosas que hacemos. Es así que está soportando en todos los navegadores, otras cosas como esa. Eso está todo en buena lección. Muchas gracias. 39. Propagación de eventos: Hola. hoy vamos a hablar de propagación off. Incluso propagación significa multiplicación. A veces se le llama bobbling. Vamos a mostrarte un ejemplo. Tenemos un DIF el cual tiene identificación un resultado, y dentro de él podemos tener muchos ataques, ¿no? Por ejemplo podemos ver si es algo audaz lo algo que está justo dentro del Dave. Y también podemos tener un botón para poder tener muchos ataques dentro y otro derecho fiscal. Y aquí hay algunos problemas con ello. Acabamos de llegar para con el documento, obtener elemento por yo d todos estos elementos a estas variables. Y ahora queremos ver qué pasa en millas más moverse. Incluso estamos usando aquí anónimos funcion toe involucrado para hacer algo. El funcion les estamos enviando un par y esto que es re ference ing toe el resultado El resultado aquí mismo estamos haciendo rodaje que incluso va a funcionar en Intern Express 67 y ocho Y también podemos llegar a la fuente fuera del elemento. Y estamos consiguiendo el lugar temporal. Entonces este lugar, para mostrar algo ah, estar de vuelta Nuestro abrigo y cuando lo refresquemos, notarás que cuando nos mudemos aquí, la fuente apagada incluso está cambiando. Derecho incluso se asigna a hablar dif porque sabes que este objeto se está referenciando a resultado. Entonces esto no está cambiando, pero de alguna manera dime cómo este elemento o este limón sabe del par. Eso es una señal sólo a este elemento, ¿verdad? De alguna manera todos fuera de ellos sabe de estos, verdad, porque normalmente si no lo supieran, no tendríamos la fuente de cambio ni siquiera. pasaría nada bien cuando nos movíamos en cosas que estaban dentro de un profundo, y eso es cosa muy cool que automáticamente funciona. Y se llama propagación apagado. Evans, Una propagación de eventos está funcionando así cuando estamos haciendo algo, hacemos bien un evento, lo activamos. Entonces, por ejemplo, nos estamos moviendo dentro del diván, otro elemento elemento entonces, que incluso se propaga hasta los tres. Entonces de abajo, es saltar a D desde el salto de David a Boulder de cuerpos saltando a HTML es saltar al árbol más alto de tu HTML cinco. Entonces por eso no necesitamos teclear algo como audaz en movimiento millas. Entonces si tienes algo en remolque, el dif que tenemos Ah, tenemos al instante una forma de hacer algo. Insight y dedo del pie sacan todos estos eventos de su de los elementos de los padres, ¿ verdad? Y eso es realmente genial. Pero a veces no es una escuela, como se podría pensar porque bueno, imaginemos una situación. Cambiemos estos por el propio click. Incluso en la derecha. Hagamos algo alerta. Estamos en el resultado, ¿verdad? Y cambiemos estos por algo así como, um, audaz que bastón. Y ahora, como pueden ver, cuando hacemos clic en esto verá botón de alerta. Pero también vemos un resultado, ¿verdad? Por lo que al invocar fondo, también invocamos resultado. Algunos encuentran situación como esa cuando haces clic en algo y estás parejo. Esta propagación arriba no es lo que quieres porque podrías tener aquí algo algunas instrucciones que no quieres invocar al invocar una parte inferior derecha, por lo que entonces necesitas detener la propagación para poder hacerlo. No es difícil. Simplemente tecleas algo como incluso detener la propagación. Como se puede ver, ni uno cuando botón Creegan vamos a ver en el mensaje de botella cuando se tomó negrita el texto lo Siebold y los resultados así es que estamos trabajando como debería, porque no se está propagando aquí ni siquiera. Pero aquí no lo hace y como se puede adivinar, poco probable. Si quieres apoyar también Internet Explorer 678 tienes que en lugar de invocar paso este de propagación. Tienes que asesorar, pero tienes que hacer realidad la propiedad de la burbuja del consejo. Entonces cuando lo hagas de esa manera, ahora mismo, funcionará. También en fue 67 y ocho versión fuera de Internet Explorer. Entonces la propagación es realmente algo que es cuidadoso para ti, ¿ verdad? Es intuitivo porque cuando pones algo dentro del dif que mi mayor tiempo quieras cuando te estás moviendo, los elementos dentro de ella también se han propagado porque entonces no necesitas dedo del pie especificar para cada off ese elemento. Esto incluso correcto, tomará mucho de lo que funciona con la propagación. No necesitamos hacer cosas así, pero hay situaciones de derechos en las que quieres detenerlo y lo haces de esa manera. Sólo hay buena lección. Muchas gracias. 40. preventDefault: Hola Hoy les diré cómo evitar cómo detener las acciones predeterminadas que suceden en su sitio web. Por ejemplo, cuando el usuario escriba algo en el otoño y haga clic en enviado, se va a enviar automáticamente. Pero, ¿y si quisieras validar esto primero? Y si algo anda mal ahí, probablemente no quieras enviarlo. Quieres decir Oye, sabes que tienes que cambiar algo, ¿ verdad? Entonces, ¿cómo seguir siendo cómo hacerlo? Bueno, como puedes ver, tenemos el formulario aquí hey creamos un i d para ID. Tenemos correo electrónico el cual también tiene un 90. Y aquí utilizamos el documento objeto modelo toe, obtener correo electrónico. Entonces tenemos bueno ahora sí entrada aquí Y también nos dieron la sopa informar fondo. Por lo que utilizamos el selector de coro que está usando CSS gratis aquí. Entonces significa que no va a ser apoyado de alguna manera, cuerpos hermanos más fáciles y es más rápido, así que no me importa. Y cuanto más sobre pasante exportador, claro que puedes hacerlo sería diferente donde, por ejemplo, crear aquí y yo D pero vamos al tema. Cómo ahora, ya sabes, prevenir Cuando creas ido evitó las cosas que suceden. Lo primero que pensarías que sería como, Oye, yo sólo haría algo así Y debería ser suficiente, ¿ verdad? Cuando yo sólo algo así, sólo soy, ya sabes, ya sabes, un dedo del pie firmando propio click. Y esto debería ser también en Click De así que no debería funcionar ahora? No. Como se puede ver, sigue siendo un todavía en funcionamiento. Tienes que hacerlo antes de hacer algo. Aquí Detener prevenir la acción por defecto con sólo escribir algo como la muerte. Por lo que es el método del derecho incluso el objeto que aprendimos y esto conceden Ahora sólo se previene. No pasa nada pero podrías estar mintiendo sobre Algún día quiero mandar este derecho. Entonces si quieres enviarlo más tarde, deberías llevar a los actores a qué hacer noticias más adelante. Entonces, con el fin de llegar a su semana debería a algo así um Varda humano conseguir elemento por i d noticias más tarde. Y cuando estamos en las noticias más tarde, donde mostró usar algo lo que se llama un método enviar y Ahora cuando hacemos clic en él mira, está , ya sabes, haciendo lo mismo si lo tuviéramos así. Pero la diferencia es que ahora mismo puedes hacer lo que quieras entre estas líneas antes de presentarte. O puedes presentarte solo si evaluas todo. Todo está bien en tu forma, ¿verdad? Entonces, ¿cómo hacerlo? Bueno, se puede, por ejemplo, comprobar si hizo ese valor con el fin de obtener el valor de algo en la forma en que se escribe ese valor. Y ahora se puede, por ejemplo, decir si es Ah, el león masculino O Baba Baba, Ven la hora venga o lo que sea entonces podemos someter. De lo contrario está mal. Por supuesto que podrías revisar el patrón. Si esto es correo electrónico, 11 exigido. Pero necesitarás conocer los actos de naufragio de objetos que no conocemos en este momento. Hablaremos de X directa más tarde. Cuando hablamos de ello, podría ser un buen ejercicio volver a esta lección y actualizar el guión. Por lo que te aseguras de que el correo electrónico sea correcto. ¿ Verdad? De acuerdo, Entonces ahora si tienes un rito de sirvienta que funcionaría de otra manera cuando te llevemos algo porque asientos es decenas de carne tipo Baldwin que se presenta. Por lo que significa que esto está montando en otro. De lo contrario, podemos , por ejemplo , decir: Oye, quiero llegar al tipo temporal. Entonces tomemos este tipo var documento temporal Obtener un limón por yo d temporal y podemos hacer punto temporal ener html Ah, ese correo electrónico está mal, ¿ verdad? Y como puedes ver, no es decir que el correo electrónico esté equivocado. Cambios radicales que empiezan a leer o algo así ¿Podríamos qué? ¿ Todo el mundo? No podemos informar a la gente que algo anda mal. Tienes que cambiar si quieres apoyar también Internets para un 67 esta noche Deberías hacerlo esa manera. Está bien. Ah, en Internet Muy 67 Y hay que teclear e que regresen y le asignan falso. Entonces funcionará. Entonces esto es lo que tienes que hacer para lograrlo. ¿ Qué funciona en Internet Explorer y bueno, dónde podría usar esto es solo usar capaz en situación como la forma? No. Se puede, por ejemplo, bloquear así a los hombres de contexto. Se puede, por ejemplo, bloquear el enlace cuando alguna partícula va, no pasa nada. Puedes mandar a alguien a alguna diferencia total por jugadas u otras cosas como esa. Se puede revisar algo antes de enviarlo al lugar. Eso Vamos, por ejemplo, bloquear el contexto. Mental. Vamos a bloquearlo en el botón de informar sopa. De acuerdo, entonces, ¿cómo hacerlo? Nos limitamos a empresa esto y tienes que ahora y hacer algo después del propio menú contextual. Um, aun así, haremos algo así y ahora sólo tenemos que bloquearlo. Entonces cuando lo hacemos bomba subbed for button. Vamos, contexto May. No está funcionando porque no creíamos eso, claro. Y ahora los de Obama se puede ver que no está funcionando bien. No podemos crear hombres de contexto o no estamos haciendo clic ahora en el botón derecho y no está funcionando aquí. Aquí está funcionando. No lo hace Onley en esta colocación en estas botellas, y podría ser útil porque podría crear incluso tu propio menú contextual. Podrías, ya sabes, comprobar si este botón ah e es igual de dedo a pie. Creo que sí, y si aún se hace que se puede, por ejemplo, utilizar el eje X e Y Cliente y mostrar algo. P. Justo en este lugar y tu usuario tendrá muchos. Eso es crítico. Impresionante, ¿no? De acuerdo, eso sonó lección. Muchas gracias. 41. Evento de Onscroll: hola hoy con ejercicio un poco, y al mismo tiempo te mostraré un nuevo incluso que te permitirá crear algo así. Cuando te desplazas dominancia, puedes ver que tenemos tu al respecto, y cuando hacemos clic en él, vamos a la parte superior de nuestra página web. Es una cosa genial. Es una buena adición a tu página web cuando tienes contenido largo, porque entonces los usuarios tendrán mejor experiencia en tu sitio web, ¿no? Da clic a la parte superior ahí en la parte superior. Eso es bastante guay. Por supuesto, puedes iniciarlo un poco mejor, por lo que se ve mejor. Pero bueno, entrenemos un poco. Eso es hazlo. Para poder hacerlo habría que crear primero esta parte inferior derecha. Entonces hagámoslo. Vamos a crear un I D para ello, por ejemplo, llamémoslo demasiado top bottle on. Simplemente damos aquí ataques a tope, y ahora necesitamos darle estilo un poco. Entonces llamada de fondo o azulado Ah, Vamos a darle con Vamos a darle altura. Vamos a darle, por ejemplo, um, parte cosas en. Y ahora cuando lo refrescamos como puedes ver, tenemos el botón así cuando como pasamos por alto sobre él. Queremos cambiar por ejemplo, color a lo que sea. Y que se puede ver está funcionando bastante bien, ¿ verdad? De acuerdo, entonces ahora necesitábamos en este lugar y debería estar siempre aquí aunque nos desplazemos hacia abajo como hacerlo. Pero podríamos hacerlo en Javascript. Pero la mayoría de los hermanos Ah, apoyar algo bueno se llama posición fija Cuando lo haces de esa manera, tu posición está fija ahora, lo que significa que es absoluta. Pero es total absoluto Cuando te desplazas incluso cuando te desplazas, siempre está en que va a estar siempre en ese lugar por lo que ahora podemos escribir algo. Compré el fondo en Dhere 15 fotos a la derecha. 15 correcciones. Como puedes ver ahora está aquí. Y bueno, tenemos que hacer todos los algunos en algo aquí, como muchos descansos. Para que veas que cuando te estás jodiendo realmente vale la pena trabajar. Bien. Entonces como puedes ver, siempre está aquí cuando nos desplazamos, incluso ¿verdad? Está bien. Entonces, ¿qué queremos hacer ahora? Queremos Teoh Cuando débil legal necesidad quiere saltar a la cima, ¿ verdad? Eso es lo primero. Y lo segundo es que también nos gustaría Teoh. Um, probablemente no tengas esto que no debería ser siempre visible. Rival estaban en la cima. ¿ Por qué deberíamos verlo? De acuerdo, así que hagámoslo en Dwell. También podríamos actualizar un poco Cars más rugoso. Podríamos ponerlo para apuntarla a quién podría decir que el texto alinear para enviarla. todos modos puedes hacer cosas así. De acuerdo, vámonos. Pero volvamos al tema. Um, entonces necesitamos tener acceso a esta cosa, ¿ verdad? Por lo que documento obtener alarma. Y por yo d contar botón encendido. De acuerdo, tenemos buen acceso al mismo. Y cuando alguien haga clic en él. Por lo que queremos hacer algo con su propio evento de click, y queremos saltar a la cima. ¿ Cómo hacerlo? Podemos usar el scroll por función para que podamos hacer cosas como Windows Scroll by. Y luego amarramos el eje X. ¿ Y por qué? Salidas, salidas , coreanos, viejo dólar. Por qué es vertical así que cada tipo aquí no existo puño. Significa que se moverá por 15 picos está a la derecha. Pero lo que no nos importa derecha-izquierda Simplemente nos preocupamos por estas cosas. Cuando tecleemos aquí 100 te darás cuenta es cuando hacemos click en él. Estamos saltando 100 píxeles hacia abajo así que menos significa que vamos a detallar. OK, pero yo quiero ir siempre a la cima. Por lo que quiero ir como marcha a la parte superior ya que fuimos a la parte inferior derecha. Y esta cosa está empezando en su lugar así. De acuerdo, pero queremos ir a la cima así que necesitamos dedo del pie multiplicar mini menos uno por estos valores. Entonces le tenemos valor menos, derecho y negativo. Y como puedes ver ahora solo hacemos click y somos la parte superior de nuestra página web. Entonces está funcionando bastante bien, ¿verdad? Y ahora no queremos demostrarlo cuando somos la parte superior. Eso sólo estúpido tener ahí para que podamos usar la ventana que en scroll incluso por qué nos asignan su propia ventana del dedo del pie del cráneo Porque bueno, esto es una ventana. Tendría una ventana aquí el día. Este es el objeto superior Eso es lo mejor para hacerlo aquí. De acuerdo, Así que estamos. Ahora estamos invocando en scroll Siempre cuando algo sucede. Bueno, cuando algo cuando movamos a esta chica, vamos a crear el lapso aquí para poder mostrarte algo muy importante. Entonces, por ejemplo, creo eso y vamos a meterlo dentro. Así que así y hagamos algo así. Como puedes ver ahora podemos ver la posición fuera del pergamino. Entonces está funcionando así, ¿verdad? Cuando estamos aquí, es pensar que es como Freeh bajo. Creo que debemos mostrarle esto qué es. 300 ¿verdad? Entonces tenemos que hacer qué condición conmigo para comprobar si se acabó. Si no puedes, quiero mostrar si es más bajo que cada candidato, solo quiero cambiar la pantalla para que ahora al inicio, queremos dedo del pie solo para que desaparezca, OK, no lo queremos mostrar. ¿ Por qué necesitamos? Y ahora sólo necesitamos cambiar este lugar entonces ¿cómo hacerlo? Bueno, podemos simplemente qué? Consigue el botón para que podamos declararlo de nuevo aquí, por ejemplo, dentro de la disfunción. Um y podemos llegar al botón superior y luego ir al estilo y luego ir a la pantalla y cambiarlo a bloquear. Ahora mismo fue show aunque me mueva un poco. Entonces voy a comprobar si esta página de ventana ¿por qué offset es mayor que ahora? Simplemente sabes que puedes tipearte lo que quieras. 300. 500. Bueno, ¿qué tal cuánto quieres teclear, verdad? A algunas personas les gustaría que se mostraran después de 400 habla ya que Ah no le gustaría mostrarlo en 500 tipo aquí. Un número que te gustaría del dedo del pie tuyo aquí. De lo contrario quiero simplemente cambiar de bloque bloqueado un non. Por lo que quiero hacerla desaparecer. Y como puedes ver ahora, cuando nos desplazamos, no se está mostrando. Pero cuando vamos más allá de 400 se está mostrando bien Cuando volvemos, es una pieza. Cuando hacemos clic en él, también desaparece. Entonces tenemos ahora Algo se va a mejorar la experiencia. Ah, son para usuarios en tu página web ¿Y se apoya en deportes por Internet? 678 No tanto, pero creo un segundo al respecto. ¿ De verdad lo hacemos por ellos? Hacen tu vida más horrible. Y esto es realmente algo que sólo está haciendo que alguien mienta más conveniente, ¿ verdad? No es algo por lo que la gente llorara. El que no tienen derecho es solo una adición a tu página web. No es algo que disminuya tamaño en su página web y otras cosas así. Para que pudieras encontrar algunos hacks cómo hacerlo. Pero creo que es sólo pérdida de tiempo. Ah, sólo hazlo. Para las personas que están operando los navegadores web de día, eso sólo es una buena lección. Muchas gracias. 42. MouseEvent: Hola Hoy hablaré de ratón iguens. ¿ Y estamos seguros de que teníamos que crear algo así? Wow, Es genial, ¿no? Estamos moviendo una imagen en nuestra página web y podemos fuera de curso mover cualquier elemento que desees mover ¿verdad? Se puede crear este arrastre en cualquier elemento. Siempre mostrarte pronto cómo hacerlo. Pero primero, vamos a repasar todo el ratón. A pesar de lo que pueden ver, tenemos algo de combustible a estas millas más. Y esto incluso ocurre cuando el cursor está terminado, entra el a limón, está bien, Y más casi fuera es cuando el cursor está dejando el elemento. Entonces estos son los básicos uno y los tienes en millas. Muévete cuando estás moviendo un limón, por lo que probablemente va a ser muy útil para nosotros. Estás moviendo la boca sobre esto un limón, ¿verdad? Entonces sí, esto es muy importante para nosotros. Tenemos algo así como un crujido cuando haces clic y tienes algo como DoubleClick. Entonces cuando se doble patada bastante rápido y el click en click incluso es realmente una conexión apagado casi hacia abajo y casi hacia arriba y vamos a necesitar esta información porque no queremos dar click en ella, y se moverá. Queremos dedo del pie, ten nuestra batuta fuera del ratón hacia abajo. Y entonces queremos invocar eso en millas. Muévete a la derecha cuando nos estamos moviendo, ¿quieres moverlo? Pero cuando tenemos más ratón arriba, queremos reaccionar ante ello. Y quieres parar en millas Muévete. Está bien. Después de ello, puedes decir que puedes detener a lo impuro incluso como puedes ver aquí. Tiene aquí un botón cuando hace algo así y yo tengo bien ahora aquí y mi máscara o, señor, señor, como puede ver, no pasó nada. Pero cuando haces clic en él, bueno, entonces te mandan a otro lugar. Eso es porque para tener puesta rapida, hay que tener casi fuera y casi arriba en el mismo lugar, ¿ verdad? Entonces podemos usar información como esa ahora mismo para crear esta cosa que teníamos aquí. Ahora mismo lo refresco y no tenemos nada. Entonces tenemos una imagen. Imagen añadida. Aquí es sólo una imagen simple con el er de identificación y lo primero que debemos hacer es establecer la posición a la derecha absoluta Porque queremos cambiar la posición fuera de este elemento Autopista. No queremos que ocupe el lugar en nuestra página web con otros elementos, ¿ verdad? Queremos sacarlo del flujo normal. Ahora queremos conseguirlo. Por lo que documento Obtén un limón por d y queremos obtener esta imagen de muestra. ¿ Verdad? Entonces vamos a guardarlo. Y ahora queremos decir lo que queremos dedo del pie si queremos hacer algo cuando alguien tiene el fondo hacia abajo. ¿ Verdad? Entonces, ¿qué debemos hacer? Simple esa propia boca abajo. Y queremos involucrar aquí la función. Entonces cuando el ratón está abajo, queremos dedo del pie. Ya que algo así sucede también No, eso no haría algo así como todas las bocas se mueven bien. Queremos dedo del pie. Digamos, si alguien está moviendo la boca sobre este elemento. Entonces deberíamos en esta muestra sobre este elemento también y ya sabes, ver Escuchar a propia boca moverse incluso Puedes, por supuesto, no agregamos ni siquiera oyentes. Además, solo lo estoy haciendo así porque se vería un poco más simple. ¿ Verdad? Por lo que hemos estado ahora en el ratón seguir adelante. Y porque tenemos bueno ahora en millas movernos, podemos mover thes, creo bastante fácil, porque, bueno, sólo podemos acceder a esta muestra cómo podemos simplemente escribir algo como esto y podemos llegar a el estilo a la izquierda. Y se habría metido aún en quién puede hacer algo así como un Creon X, que va a tener el lugar donde la posición de boca más fácil ya que estaba hablando últimas lecciones más nos recoge porque necesitamos tenerlo en picos nosotros. Ah, acabamos de implementar el eje horizontal. Y ahora necesitamos dedo del pie hacer algo con la vertical puesta. ¿ Considera cuándo vamos a necesitar? Bueno, cuando tenemos, um, nuestras millas abajo, está funcionando. Cuando nos estamos moviendo , también está funcionando. Pero cuando nos movemos sobre estos objetos y se está escapando de nosotros, ¿ verdad? Entonces cómo hacerlo para que no huya porque, Bueno, Bueno, ahora mismo, tenemos la esquina izquierda, derecha, derecha, la esquina superior izquierda aquí de nuestra imagen. Por eso tenemos problemas así. Entonces deberíamos ir a la muestra PNG y ver cómo si cuál es el tamaño de estas imágenes? Se puede ver. El que tenemos es 128 y el de Heidi también 128. Y deberíamos cambiar esta posición. Deberíamos simplemente entrar en medio de ello, ¿verdad? Nosotros sólo, um, y operación así. Y como puedes ver ahora, sí, estamos en medio de ello y ahora está funcionando. Lo estamos moviendo. Pero no podemos dejar de movernos sólo porque bueno, cómo hacerlo. No podemos hacerlo ahora mismo, verdad? No les está funcionando porque no tenemos en el ratón arriba ni siquiera ya. Empezar aquí en DWI No hizo nada con él. Pero hay un problema. ¿ Puedes ver estos? Ah, como pueden ver, aquí hay una copia de la misma. Cuando me llaman Ink it e incluso puedo abrir en otro top. Esta cosa es solo casa básica, Drac. Incluso eso es, ya sabes, compatible con los navegadores web. Tenemos que detenerlo. De lo contrario tendremos problemas. Por lo que necesitamos actuar es lo simple y entrar en algo bueno disco propio drag start y necesitamos evitar la acción por defecto. Ahora, como pueden ver, podemos moverlo libre. Y no abrimos otra página web, y va a funcionar mejor, ¿ verdad? No habrá ninguna caja desde ahora. De acuerdo, ahora está funcionando mejor ahora. Necesitamos simplemente dejar de cómo detenerlo. Bueno, muestra eso. Y ahora tenemos que entrar casi arriba. Yo quiero invocar la función que lo va a detener. Correcto. Por lo que queremos entrar en muestra en mi casa. Mover, mover la boca es igual a No. ¿ Cuándo asignaron aquí? No, sólo vamos a, ya sabes, anular esta cosa y va a parar. Y hay una moneda. Se está deteniendo ahora. Está funcionando. Bien. Entonces hicimos lo mismo que dije antes sobre esto. Se puede ver cuando lo hacemos muy rápido, a veces puedo perder tampoco. ¿ Verdad? Ahora mismo, es difícil de perder porque es departamento grande. ¿ Qué pasaría si este elemento fuera más pequeño? ¿ Qué pasaría si este elemento fuera otro? No del mismo tamaño. Podemos conseguir esto. Obtener el tamaño de la imagen fuera. Cómo hacerlo. Bueno, podemos hacer esto. Con esta altura, podemos sacar la altura del arma del limón de la imagen con sólo escribir algo así porque estábamos accediendo a la muestra aquí con el mundo del disco E, que no es 128 fue a no dividido por dos. Correcto. Y nuestro abrigo ahora es un poco más universal como puedes parecer. Pero también necesitamos tener un problema así. Si fuera más pequeño, podríamos Ya sabes, cuando alguien está haciendo algo así de rápido, podríamos perder el foco y la droga se perdería. Eafe es suficiente para ti. Se puede parar aquí, pero nosotros podemos mejorarlo, ¿no? Siempre podemos mejorarlo. Entonces podríamos ver ahora, no la muestra, pero podríamos ver en documento con ratón. OK, porque vigila hasta aquí. Y ahora tenemos que cambiar a No, no en documento. Pero ahora hay un problema no está funcionando porque esta palabra clave no está accediendo ahora a la muestra. Pero está accediendo, Doc, usted documenta. Por lo que necesitamos de alguna manera mandar aquí una muestra de cómo hacerlo. Podemos crear aquí una variable temporal así. Por lo que tenemos acceso para remolcarnos dedo del pie este elemento y ahora lo podemos enviar a esta función aquí. Está bien. Por lo que puede ser más tarde. No podemos usar esta muestra de este lugar porque está consumiendo y teclea algo así como esas millas abajo no es que Ah, no es variable global y nosotros lo es, podría no estar viendo aquí. ¿ Verdad? Entonces deberíamos hacer una manera muerta. Y ahora queremos enviarlo a otra función. Entonces deberíamos crearlo, por ejemplo Función, imagen en movimiento, Uh, así queremos aquí e incluso. Y queremos también objetar que se mueva a la derecha. Yo quiero cambiarlos así en todas partes. Por lo que se opone a mover y documentar que en la mayoría mueven uno. Yo quiero invocar la imagen en movimiento pero quiero mandar unos argumentos lo van a hacer de esa manera Así que moviendo imagen con los objetos parejos así. Y también queremos dedo del pie remitente yo Así que el disco que trabajó desde este lugar Y ahora, como pueden ver, está funcionando bien. Y aunque lo haga oh, muy rápido todavía va a funcionar. OK, ese es el So es un poco mejor ahora podrías mejorarlo, pero ahora mismo no sabes algo con este culto Ajax o html cinco. El problema que tenemos ahora es eso? Mira, no estamos guardando la posición justo cuando nos refrescamos, la posición está justo aquí. Podría, por ejemplo, utilizar este programa para mostrar insignias en el perfil. Alguien y la persona podrían moverse sobre ti. Ha proporcionado estas insignias en alguna parte, ¿verdad? Por ejemplo, por algo así. Pero cosas como esa deberían guardarse, por ejemplo,en por ejemplo, base de datos. Y para hacerlo, lo enviaría a la base de datos esa información con el Ajax O podrías guardar la posición o algo para solo este usuario en las cookies. Hablamos de galletas, pero poco probable en los puntajes no hablará de un Jack porque estos muy siempre gran tema y habría otra costa sobre esta cosa. Por supuesto que puedes. Usas esto para otras cosas. Seguro que lo tenemos. Tienes buena, gran imaginación. Encontraste una manera de usar cosas así. Y también debes saber que en html cinco son nuevos eventos que están conectados a la droga en, y te permiten, por ejemplo, dejar por ejemplo, cosas en algún lugar, hacer un lugar donde solo puedes dejar caer cosas poco probables. No hablamos de ello porque hablamos de cosas como esas en HD Merkel porque también es tema grande. ¿ Verdad? Por lo que html five te está dando aún más poder para tu JavaScript. Entonces es buena idea dedo del pie También aprende. De acuerdo, eso está todo en la lección. Muchas gracias. 43. Eventos de tiempo: Hola hoy. Siempre te muestran dos funciones que el tiempo de espera y dicho Intervalo propio ejemplo práctico. Vamos a crear un cronómetro y estas funciones están acostumbradas a alrededor de una función después de un tiempo que usted especifica Ok, set time out va alrededor de una función JavaScript después de Hominy estilizados milisegundos. Pasaste aquí y dicho Intervalo hará lo mismo, pero seguirá haciéndolo para siempre Hasta que digas parar Nosotros, por ejemplo, por ejemplo, despejamos intervalo. También puedes dejar de ejecutar Ah, función en el tiempo establecido fuera antes de que se vaya a ejecutar con el tiempo claro arriba dicho tiempo fuera y dicho Intervalo, todos están retirando el er de identificación fuera del apagado que sabes incluso eso va a suceder y puedes detenerlo usando estas funciones y donde algunos cuando algo así se puede usar, puedes usarlo para. Por ejemplo, comprueba si tu usuario este en tu página web está haciendo algo. Está moviendo al maltés y viendo el video Y piensas que una droga puedes mandar a oh , por ejemplo, la mi escolta. Ellos base de datos la información de que sólo está en el sitio web, correcto, puedas revisar cosas como esa puedes, por ejemplo, crear un gráfico. Se puede, porque se puede comprobar cada segundo si alguien escribe algo. Ah, ¿se puede, por ejemplo, crear animación. Se puede, por ejemplo, cambiar cada 30 milisegundos. El lugar donde está algo. Ah, en tu página web. Correcto. Por lo que hay opciones de piedras fuera. ¿ Es qué? Podrías usar cosas así. Se puede, por ejemplo, crear el reloj. Pero vamos a crear algo. A lo que se le llama el alto. ¿ Qué? Porque probablemente lo más fácil para dos dio ahora mismo. Y va a ser una buena experiencia para nosotros. De acuerdo, entonces ya he creado una entrada de texto como iniciar una botella y una botella de stop. De acuerdo, así que tenemos algo así, y también creé identificaciones para ellos. Por lo que tenemos el botón de inicio de botón botón stop y manejador de cronómetro. Cuando escribimos aquí número y hacemos clic en empezar bien, como ver aquí 100 para entrar por el 123 y debería venir a contar atrás a cero. Entonces, ¿cómo hacerlo? Lo primero que tenemos que hacer, tenemos que sacar estos elementos de nuestra página web para que podamos hacerlo como esa variable. Y ahora usando pasajes contra lo iban a sobrellevar. Y ahora algo así. Ah, um bom y cronómetro hambre. Entonces ahora mismo tenemos todas las cosas de nuestros sitios web en nuestras variedades para que podamos actuar, ¿no? Y pensémoslo un segundo. Cuando tenemos aquí un número, escribimos aquí y damos click start nos gustaría ver aquí, Así que cuando hago click, es el propio creep. De acuerdo, entonces cuando alguien arroyo en arranque de botella, me gustaría ejecutar una función. Correcto. Y esta función debe hacer lo que debe hacer lo que debe tomar el valor inicial. El valor inicial está aquí, y debido a que está en importación, debemos tomar el valor, ¿no? No todos. No en la entrada sino en el valor de esta entrada. Entonces esto es valor inicial, y deberíamos meterlo en el estribor Chandler, ¿ verdad? Manipulador de cronómetro, ese HTML interno es igual al valor inicial. No cuando pudimos empezar. Está funcionando bien, correcto Cuando lo cambiamos, no está funcionando bien, porque cuando cambiamos las cosas, uh, y podemos en evento click va a tomar aquí el valor inicial que estaba aquí en el iniciar cuando cargamos el arma. Entonces cuando hicimos algo así en este momento, este pensamiento cambió sobre que hemos llegado aquí, Steve. Steve, el valor que valora el viejo. Entonces deberíamos cambiar estos valores cada vez que alguien arroja en eso aquí. Correcto. De acuerdo, así que ahora mismo deberíamos empezar a contar atrás. ¿ Me vendría bien un look? Bueno, sí, pero sería demasiado rápido. Yo lo hice. Tu código JavaScript simplemente lo cambiaría hasta el momento que sería como bomba. Y el cero instantáneamente, incluso dirías Probablemente piensa contarlos. Y ahí es cuando algo como el tiempo establecido o el intervalo establecido es crítico porque puede ejecutar una función JavaScript. Y la función de Danske es sólo una instrucción. Entonces, por ejemplo, disminuyendo el número después de milisegundos. Precisa aquí después del tiempo así, ¿verdad? Entonces eso va a ser lo mejor que se puede hacer ahora mismo. Entonces queremos que Teoh establezca intervalo y queremos ejecutar una función que vamos a especificar aquí después un segundo, ¿ verdad? Algo así. Y lo que podemos crear una función ahora, um, así y lo que quería Queremos simplemente hacer algo así y quieres disminuir este valor, ¿ verdad? Y como puedes ver ahora está funcionando bien. Estamos contando atrás. Pero cuando lo cambiamos a cinco, como puedes ver, tenemos buenos problemas porque tienes que contadores a la vez. ¿ Verdad? Entonces sería buena idea que al hacer click en él, detengamos este intervalo, ¿no? Deberíamos detenerlo. Entonces, ¿cómo hacerlo? Podríamos, por ejemplo, hacer algo así como esa variable. Y aquí podríamos conseguir ese intervalo re identificación de la referencia. Y cuando pinchemos aquí así será mejor. Probablemente Creamos esta variable aquí, ¿verdad? Y cuando hacemos clic en inicio de botella, debemos comprobar si existe esta identificación de referencia de intervalo. En caso afirmativo, entonces nos gustaría despejar Intervalo enviando aquí este yo d De lo contrario no necesitamos hacerlo bien. No utilicemos el teclado del mismo libro aquí porque quieres ir exactamente dos días Guy aquí . ¿ Verdad? Um en ahora debería funcionar. Bien. 24 bomba bomba. Yo lo cambié a Esto va a ver ahora se puso en el mostrador de uno. El problema es que está contando después de incluso cero. ¿ Verdad? Por lo que debemos dejar de ejecutar también cuando el contador está mal. Entonces si comenzar en valor es menor que cero, queremos dejar de ejecutar todo. ¿ Verdad? Entonces lo que queremos hacer queremos a Teoh. También el intervalo claro con la referencia del intervalo no indicaba. Hay un problema con ello. Como puedes ver, tenemos menos uno menos Todavía ¿Por qué? Porque a pesar de que lo detuvimos este intervalo, no quiere decir que todas las instrucciones después de estas instrucciones no van a ser ejecutadas. Lo que significa que también debemos salir de la función derecha de esta función. Entonces deberíamos teclear aquí, volver ahora ya que todavía puedes tener un 10 menos uno. Entonces podemos cambiar la situación para por ejemplo hacerlo así. Y ahora estamos contando 20 ¿Nos matan? Ya sabes, en lugar de hacerlo por su susto de dinero, podríamos hacerlo, por ejemplo aquí 10 y está funcionando bien. Creo que esto es un poco más fácil de entender, ¿verdad? De acuerdo, así que ahora mismo podemos contar atrás, podemos fácilmente cambiarlo a otro lugar sin preocuparnos mucho. Por lo que creó un conteo regresivo a estribor. También queremos implementar el manejador de cronómetro. Tan rastrojo. Chandler, lo lamenté. No esta doble nido, sino botella stop propio click igual a función y quieren simplemente auto así que solo involucrados días bálsamo derecho . Y no quiero conseguir quiero juntarme. Y Bob, Step Souljah está funcionando Bien. Entonces el intervalo es simplemente invocar una función siempre y cuando no digamos stop right. Pero tenemos también algo va a discutir tiempo establecido. ¿ Qué? Sólo vamos a invocar algo una vez, pero no quiere decir que no podamos tener Ya sabes, podemos hacer lo mismo que hicimos ahora mismo con el set en. Terrible. Si quieres hacer lo mismo, eso es comentarlo por un segundo y ya está. Por lo que también queremos hacer algo después de que alguien haga clic en la botella y queremos tomar el valor inicial y cambiar el valor. ¿ Verdad? Por lo que esta parte es la misma. Pero ahora nos gustaría ejecutar con el tiempo establecido fuera una función. Entonces por ejemplo, podríamos escuchar una función que llamaremos, um, um, reloj stub abastecido Onda, haremos algo así como botón start. Está bien. Dicho tiempo fuera Y este dedos consiguió cronómetro. Comienza después de un segundo. Yo quiero invocar la disfunción después, pero bueno, necesitamos enviarles el valor inicial. Entonces debemos desinfectar función, y necesitamos invocar. Ahora este cronómetro inicia con colores tercos. Entonces sabemos lo que queremos donde podemos insertar nuestro nuevo valor y el valor inicial. Correcto, Entonces lo estamos enviando aquí. Bomba. Estamos ahora mismo, aquí. Correcto. Y necesitamos declarar las cosas que acabamos de enviar aquí con parámetros. Y ahora puedes, por ejemplo, las mismas cosas que hicimos aquí. Entonces vamos a disminuir hit por uno. Entonces como puedes ver ahora, después de un segundo , disminuyó en uno. ¿ Verdad? Está funcionando así. Sólo lo involucra una vez. Y me gustaría volver a invocar la misma función. Cómo hacerlo. Simplemente lo voy a invocar de nuevo aquí. Correcto. Para que pudiera escribir cosas como arranque cronómetro, y podría sentarme inicio de estribor y valor inicial. Ah, así porque fuera de la documentación, es inferior a la derecha por lo que significa que tenemos libre de hacerlo. Y ahora, um, no está funcionando Bien, porque el problema es que se ejecutó casi instantáneamente y porque no esperábamos nada aquí en este lugar. Por eso necesitamos algo con esto Podría establecer tiempo fuera y vamos a decidir, como, como, establecer tiempo fuera bálsamo. Después de un segundo, quiero invocar esto. Por lo que necesitamos una función animus porque quieres enviar argumentos. Entonces, así en que no necesitamos padre está aquí y ahora Bam, bam! En cosas de un cronómetro. No funcionó porque fuera mandé aquí lo equivocado porque él, uh sí, está funcionando. Final. Lo que lo consigues aún no significa que cuando lo hiciéramos funcionara bien, verdad? Cuando lo hizo así, porque conceden es aún peor porque no, este guión no sabe qué debe ejecutar primero, y vienen los problemas. De acuerdo, entonces es buena idea el peso del dedo del pie cuando estás haciendo algo así y tengo libre Teoh un cero y está contando atrás el problema que tenemos ahora es cómo detenerlo. Bueno, sugiero crear una variable global mata el tiempo de espera variable. Re Conference. Identificarla y podemos asignarles estos. Ah, identificarla aquí. Y usando esto, podemos comprobar el mismo idioma que aquí. Si esto existe, quiero despejar el tiempo fuera así. Libre a Bueno, eso está cambiando a 124. Cambiemos 12. Ahora podemos cambiarlo fácil, justo a lo que sea. Muy 10 reloj arriba demasiado rápido, pulgar vago. Está bien, entonces está funcionando. Bien. Ahora tenemos que parar también cuando nuestro número está empezando. El valor es menor que cero. Entonces queremos simplemente regresar. Ahora no necesitamos despejar intervalo como lo hicimos. Solo necesitamos detener la instrucción de ejecución después de esto. ¿ Verdad? Porque estas instrucciones aquí es realmente lo que realmente se va a ejecutar. Onley. Si sí sabemos regresar aquí derecho, porque retorno significa que estamos superados estaban saliendo de la función. Si no haces otro no entiendes esto, debes volver a ver lecciones sobre la función. Entonces ahora cuando tecleemos dos, va a parar en menos uno Así que no dio lo cambiamos aquí Y tienes hasta mientras cero y puedes cambiarlo. 13. Fácil a otro número y está funcionando bien. Entonces como puedes ver, puedes hacer las mismas cosas con el tiempo de espera establecido. Pero sugiero usar sets un tiempo fuera. Ah, bueno, sobre todo cuando se quiere simplemente ejecutar algo una sola vez. Justo después de algún tiempo. Como se puede ver con esta solución, tenemos una variable global. Eso no es bueno. Debes evitar tanto como puedas Global of Grable. ¿ Por qué? Porque si tuvieras hombres fuera de ellos, tendrías problemas para conectarte. ¿ Qué es dónde? Está bien. Cosas como global very boost también pueden hacer que tu abrigo sea muy difícil de depurar. Te puede traer mucha caja que son realmente, realmente difíciles de detectar, sobre todo en javascript. Así que prueba dedo del pie, evítalo. ¿ De acuerdo? Es mejor usar algo así como el intervalo en esta situación. O podrías hacerlo de manera aún más profesional al casing constructor de función en la creación tu propio objeto de cronómetro. De acuerdo, eso es sólo una lección. Muchas gracias. 44. Eventos de tiempo: versión mejorada: Hola. hoy te mostraré cómo actualizar tu abrigo Así se ve más pro forma que veas decodificado. Lo hicimos en la última lección. Está funcionando bien, ¿verdad? Para un pequeño proyecto, va a ser un buen abrigo. El problema ocurre cuando tienes más gente trabajando contigo. ¿ Estás bien? Apenas muchas funciones en su sitio web. Porque ya ves, tenemos ahora aquí un grupo de Arabia. Ahora imagina que tendremos aún más fuera de ellos y tendríamos al hombre. Amén. Amén. Evens en nuestra página web. Muchas cosas que estarían en nuestro abrigo aquí ahora y ahora. Tendrías problemas que enfocarte para encontrar lo que quieres hacer. Y ahora ya nos imaginamos que te gustaría tener más de un ¿Detener qué? En su página web. Correcto. Te gustaría contar hasta cero porque quieres, ya sabes, sabes, rastrear Si algo está al este, finalmente termina bien. Tienes bueno por ejemplo, una persona que está jugando el juego y cuando se puede construir con, tenemos algo. El dedo del pie cero descontando. Pero puede construir muchas cosas a la vez. ¿ Verdad? Y tendríamos muchos contadores. Por lo que nos gustaría tener muy reutilización. Able llamado, por ejemplo, para situaciones como esa. Y entonces es buena idea comenzar a programar en el objeto de manera orientada. Entonces, ¿cómo hacerlo? Asumo que ya has visto cada pocas lecciones posibles sobre funciones y objetos en las primeras secciones de las cicatrices. Entonces no vuelvas por favor porque esto van a ser cosas avanzadas. Entonces lo primero es que debemos crear un constructor constante de función. Nosotros lo llamamos, por ejemplo, cronómetro. ¿ Y qué queremos hacer? ¿ De qué estado? Tomemos esto bajo el comentario, queremos crear un cronómetro después de cargar nuestra ventana. Tan var todavía butch Nueva parada, que Vale, y ahora cuando alguien haga clic en el inicio inferior, queremos ejecutar stub. Mira eso, y ahora podemos, por ejemplo, hacer algo con los métodos que vamos a crear en función. Piensan que queremos hacer queremos empezar, así que deberíamos crear una función que va a ser arranque frío o en ella, algo así, ¿ verdad? Entonces hagámoslo inicio igual a función este inicio. Por lo que no tenemos ningún método dentro de nuestra clase, que se llama inicio y que debería iniciar nuestro programa. Por lo que debería iniciar el tapón, o debería, ya sabes, inicializar primero algunas cosas. Lo primero que debe inicializar es el valor inicial, que es ahora mismo empezar por dónde? En nuestro texto de entrada de valor inicial, que debemos, ya sabes, copiar. Aquí es diferente. Entonces después de cada vez que hacemos clic, deberíamos obtener el valor inicial, y debemos enviarlo hacer aquí. Entonces deberíamos tomarlo aquí. Deberíamos ir. Entonces haz algo así. Entonces lo tenemos dentro de nuestro objeto, ¿verdad? Podemos re referenciar a la grúa este tipo adentro cuando estamos creando el estribor, deberíamos enviar un cronómetro, consejero. Entonces sabemos dónde nos gustaría mostrar las cosas dentro. Entonces deberíamos hacer cosas como este manejador de cronómetro en Bueno, así . No. De acuerdo, entonces cuando lo estamos creando, lo estamos enviando aquí en bomba, y va aquí, y deberíamos, ya sabes, cambiar este tipo de aquí. Uh, cronómetro de reloj stub. Te d También aquí. También está aquí. Perdón. Cazador de rastrojos. De acuerdo, entonces estamos empezando tenemos el valor inicial. Y las funciones de inicio también deben iniciar stub butch más tarde. Por lo que debería invocar esto que paran, inician, paran, vigilan. Que va a estar aquí y la disfunción aquí debería lo que debería entrar en el manejador Stobart y cambiar el html energético de la misma. ¿ Esto que a partir? Muy. ¿ Cuál es la cosa genial? Te has dado cuenta que no necesitamos pasar valor aquí, ¿ verdad? Porque tenemos todo el acceso a ella a través de las variables aquí. El cool es que estas variables son de fácil acceso. Sabemos que son exactamente las variables que están conectadas al objeto que se va a crear a través de esta clase, ¿ verdad? No está en algún lugar como aquí, así que incluso podemos crear oh en algo. Esta derecha esta vez fuera identificación referenciada. No está dentro de ella. lo sabemos exactamente. Está conectado a ella. De acuerdo, así que lo tenemos. Ahora estamos aquí, y lo empezamos. Entonces veámoslo. Como se puede ver ahora, cuando el tipo inicia valor inicial en el valor inicial. Exactamente valor. Entonces deberíamos hacerlo de esa manera. De acuerdo, entonces cuando lo cambiamos ahora, hemos matado Al menos este número está cambiando. ¿ Verdad? Y ahora necesitamos asesorarnos sobre cómo contar. Necesitamos simplemente establecer el tiempo fuera, ¿verdad? Y necesitamos ejecutar la función que este oro qué? Después de un segundo que se llama inicio barba. Sólo necesitamos invocar aquí la misma función. El problema es que cuando hagamos algo así, no lo vamos a hacer. Se puede ver bomba. No está funcionando. ¿ Por qué? Porque esta palabra clave es una referencia en tow. Disfunción, no muerta Uno si quieres referir dedo del pie exactamente este lugar, deberíamos hacer algo así. Deberíamos crear una variable temporal y asignado a comer ese objeto. El objeto en el que estás trabajando y haz algo así. Y como puedes ver ahora se va. No voy a ir, no a trabajar. El problema es que no disminuimos el valor de ustedes. De acuerdo, vamos a locos. 14 13 12 Bom bom bom bom bom bumper. Ok es así bajo esto. Entonces porque tal vez no me creas, esto no fue un problema. Como puedes ver, no está funcionando. Nos han hecho solo vale uno porque, bueno, nosotros lo decrecimos. Eso empieza. De acuerdo, así que empezamos así y no está funcionando. Tenemos que usar este auto 14 13 12 Y va a contar mientras Gers no nos detengamos así que tenemos que detenerlo. ¿ Verdad? Entonces vamos a crear una función que llamamos stop igual a function on y qué tenemos que hacer Tenemos que solo despejar el tiempo fuera este tiempo, ref, yo d Pero no lo tenemos. Pero podemos tenerlo muy lejos. Entonces podemos simplemente algo así y lo tenemos ahora. ¿ Verdad, Pretties? Está fuera. Podemos conseguirlo bien en cada lugar encendido y bueno, cómo ahora en boga lo Solo necesitamos botella star stop eso en creek llama función y solo hacemos stub watch ¡Detente! Lo genial que podemos asignar igualados fuera de estas cosas aquí es que ahora puedes asignar este propio dedo klieg el lugar que quieras, verdad? Puedes dejar de estar en el lugar que quieras ¿Por qué otra figura? Uno Así también puedes detenerlo manualmente, ¿verdad? Parada de estribor congestiva y se va a parar y el tiempo por cualquier cosa Así que empieza y ahora podríamos parar arrancar, parar. Está funcionando. Y además, cuando empecemos, no queremos que suceda. Entonces algo así no pasa, ¿verdad? Esto concede ir más rápido, veces saltando. No queremos. Barket, si no queremos embolsarlo, deberíamos revisar aquí, ¿ verdad? Si esto existe esta idea de borrador de tiempo, queremos detenerla. Y lo genial es que no necesitamos de nuevo el dedo del pie. Haz algo así. Podemos simplemente involucrar los lados de función de thes Deténgalo. Deténganlo. Podrían pensar en la solución. ¿ Es eso cuando te adhieres a algo que ellos llamaban aquí, verdad? Porque podrías hacerte algo. Quieres tener más cosas aquí, como algunos cheques u otras cosas así. Entonces, ah, ya sabes, todo se va a cambiar también en este lugar para que podamos reutilizar nuestro abrigo incluso dentro del objeto. Entonces ahora cuando empecemos, podemos cambiarlo bastante fácil. ¿ Dedo algo en el dedo? No va a ser respaldado. De acuerdo, entonces lo último que tenemos que hacer es el cheque. Si esto es menor que cero, si sí, entonces necesitamos dejar de ejecutar cualquier cosa después de estas líneas algo para volver. ¿ De acuerdo? necesitamos salir de la función. Entonces ahora se puede ver 210 Y eso está todo buscando tipo de juego. Ahora, imagina que te gustaría continuar. Entonces, ¿por qué es tan difícil para país hacer una función para continuar? ¿ Cuál debe la función para continuar la repentinamente apenas involucró esto? Sí. Entonces, días que inician Paran. ¿ Qué? ¿ Otra vez? Yo quiero estudiar bien el juego. Apenas tres días. Ah. De acuerdo, así que sólo necesitamos al fondo. Continuar Botón, continuar. Necesitamos saber. Ponte su botella. Y cuando alguien arroja sobre ella, queremos parar. Ver dedo del pie. Continuar. Entonces va a bajar. Cuando nos detuvimos, se detuvo. No continúo. Su continuar con apenas reutilizado. Ellos exploran, y todo es que él está dentro de un solo lugar. Este es el poder de la programación orientada a objetos. Y lo más cool es ahora que podrías tener ¿qué? Otro reloj de stub, ¿verdad? Que podrías asignar a otra cosa a algo nuevo podrías asignar a muchos lugares a la vez. Está bien, puedes reutilizar el co tantas veces como quieras. Por eso cosas así son muy geniales. Donde podrías hacer usas por ejemplo, algo así. Muchas veces por crear, por ejemplo, ganancias cuando queremos contar las cosas hacia abajo. ¿ Verdad? Ahora mismo estamos contando así. Eso que estamos mostrando, ya sabes, cuando tipos como ese tenemos 15 mil y 123. Hay un gran número, pero podría cambiar estos número dos realmente a la vez, ¿ verdad? Podría usar, por ejemplo, un objeto de fecha hacia adelante. Bueno, entonces se objetarían más tarde. Y ya sabes, no tienes habilidades poderosas para crear cosas que van a ser fáciles de usar realmente. Y ¿se puede cambiar más tarde que se leen capaces. ¿ En serio? Te estás convirtiendo en experto. Todo el mundo después de cada lección, vas a estar aún mejor. Solo necesitas entrenar. Lo que me gusta que hagas en este momento es que ya sabes, normalmente el estribor está funcionando así. Con eso, cuando haces clic parar, No estás deteniendo ni al instante. Pero no eres lo que eres. Agregar Inc. este número después de cada y cuando se detiene de nuevo, usted en otro número a algún tipo de texto, ¿ verdad? Quieres que sepas, por ejemplo, ver hasta qué punto está mal tus amigos. Y tú eres igual que yo. Detener cosas, cosas, cosas, cosas. Y quieres tener todos los tiempos, todos los tiempos de ellos, ¿ verdad? Para que puedas hacer cosas. Al igual, si cosas como esa solo necesitas saber qué? Actualizar el tope inferior. Solo necesitas que Teoh utilice la información del valor inicial aquí. ¿ Verdad? Puedes conseguirlo. Se puede crear una funciones. Cortaríamos estos valores aquí el valor real, y podrías simplemente insertar algunos. Correcto. Ese es el poder, ¿verdad? Es bastante impresionante. Hazlo como ejercicio. Si tiene algún problema, por favor pregunte. Esa es una lección necesaria. Muchas gracias. 45. Validación de formas: Hola. hoy te mostraré cómo muy día que los datos ponen en entrada por los usuarios fuera de tu camino junto a cómo dedo del pie lo hacen así Las cosas que son tipo aquí están apropiadamente apretadas. Tenemos que informar al usuario que algo anda mal. Para que no pierda tiempo, justo cuando mandó y ellos cricket, él debería estar dentro, ya sabes. Pero aquí está algo mal o incluso podríamos entrar por él. Cuando apenas cambie el derecho de importación, será aún mejor. Pero hay que recordar, antes de entrar en esta lección más profundamente que los cheques viejos, todas las condiciones que harán son solo para el usuario. Um, y hay que recordar que no importa una prueba de seguridad. ¿ De acuerdo? Sí. Simplemente puedes apagar JavaScript. Puedes hacer lo que quieras con Jarvis. Mantente casi para que puedas Hargett bastante fácil. Por lo que hay que recordar que hay que volver a comprobar todos los valores en el lado del servidor. Entonces, por ejemplo, en PHP, Ok, estás haciendo todas estas cosas para que la experiencia del usuario en tu sitio web. Mejor. Y es realmente muy, muy buena idea porque a veces cuando la gente escribe una forma grande y luego se vuelve reciente, simplemente salen del sitio web. Entonces estás perdiendo auto un efectivo, por ejemplo, cuando tienes una tienda sin algo así. De acuerdo, así que hagámoslo. Tenemos que formar, que llamé mi formulario y aquí tenemos buen número. Texto completo, nombre de campo. Es algo mi formulario Más abajo con el valor enviado. Y tenemos la información del DIF que damos alguna entrada que está encendido aquí, que algo anda mal o algo está bien. Y tenemos unos cuantos incluso que tenemos pudimos pasar en esta lección. Primero, saquemos algo de nuestro teléfono. Esa es una buena, buena pregunta. Cómo conseguir, por ejemplo, esa entrada de este formulario, ¿ verdad? No, hazlo. Vamos a escribir documento, conseguir una forma mental idea de barra de limón. Y aquí hay algo muy nuevo. No es necesario que conozcas la identificación, un héroe o una clase para conseguirlo. Esto es realmente muy útil, y es buena idea saber que cuando se tiene una forma, entonces cada elemento aquí se puede obtener a través de la escritura, por ejemplo, ejemplo, algo así como el elemento cero. De acuerdo, el elemento cero es este elemento. El problema de esta solución es que ya sabes, estos son limón. Estos ahora segundo no es lado justo. Ah, ya sabes, cuando agregas algo, podría ser una solución problemática. Entonces este pensamiento es útil sólo cuando se quiere, por ejemplo, en eventos dedo del pie todas las entradas, ¿ verdad? Entonces podrías pasar por el bucle usando esto. Eric, lo genial es que puedes Onley Sólo puedes escribir ese nombre humano. De acuerdo, entonces tenemos algo como, ah, ah, conseguir elemento por i d mi forma sobria aquí dentro. Y podemos conseguir simplemente escribiendo el nombre del valor del atributo ah. ¿ Verdad? Andi, todo funciona bien. Así que el número teme, Vale, algo así. Eso es cogerlo. Um, así que tenemos un campo de texto esas canciones puestas. Tenemos que parar, presentar, presentar, pero, um oh, así que así y tenemos buena información. La información está siendo diferente. La información está justo dentro de lo profundo, ¿verdad? Entonces no entramos en el nombre, ¿verdad? Al igual que tú. De acuerdo, entonces así es como funciona. No podemos acceder bastante fácil por ejemplo, número, campo y vamos a pasar por todos estos pares. Entonces la llave hacia abajo, ¿cómo funciona? Por lo que la tecla abajo incluso va a suceder para cualquier prensa, que sea la tecla abajo. OK, así que vamos, por ejemplo, llegar a la info html interno en Vamos a crear una variable simple, por ejemplo, yo Y vamos a aumentarla dentro de él, Como puedes ver cuando me duela interior html burro abajo fuera de curso en clave abajo. Uh um um um um asi como se puede ver ahora, cuando mis llaves hacia abajo, estas yo valoro es en ser incorrecto arrugado. ¿ Por qué van mis llaves? No estés bien, tienes también lo mismo que la Guerra Fría. Esto llamó a la prensa de teclas. puede ver que también se está incrementando. El problema sobre la solución es que también se puede obtener la tecla que se presionó bien . Y cuando tengamos presionada la tecla, como pueden ver, podemos obtener qué tecla se presionó. Pero el problema es que cuando pateo las teclas de flecha son y la, ya sabes, hoja de control de otros chicos así, prensa de monos no me va a ayudar, ¿ verdad? Y debido a ello, solo sabes que tienes que usar on key down para que los niños les gusten las teclas de flecha. Está bien. Entonces como se puede ver en el objeto parejo, tiene algo con esto llamado a lo cual, que dice, qué tecla se presionó sobre estos diversos nosotros informamos Porque fuera de esa información podemos decir si ah, que desea agregarla a la importación. O tal vez quiero decir pronto que sabes que algo sale mal. Escribes algo mal. Tienes que retirarte, nena. Está bien. Y hay un problema fuera de curso en Internet. Sprah seis y odio tienes remolque, crea una variable como prensa de personajes, por ejemplo, en algo así. Y porque en todos los navegadores web como Internet Explorer seis y siete, tenías que usar el llavero de la capa con la mayúscula grande. ¿ De acuerdo? Y tú lo tienes bien. También, algo de carácter radical llamado salarios. Casi lo mismo mentir estos tipos arriba. Pero sí conozco a Judy City, OK, OK, ya casi es hora de no apoyarse. Se va a eliminar en los nuevos navegadores web. Estos sólo para que sepas, que algo así existe. De acuerdo, entonces tenemos mono abajo en la pulsación de teclas y si tienes algo lo que se llama mono arriba y estos muy útiles Porque mono arriba va a ser invocado. ¿ Cuándo? ¿ Qué? Cuando tú si sigues el ritmo. Está bien, podría ver que tengo que soltar la llave. OK, si no levanto la clave, la clave del evento no va a ocurrir. Tenemos también algo va a discutir en cuatro curso. Um, está cambiando de nuevo a esto, y como se puede ver cuando nos enfocamos, entonces significa que cuando hacemos clic aquí, se va a invocar. De acuerdo, También tenemos algo con esto llamado a Blore, lo que significa que cuando pierdes el foco, vale, entonces cuando lo cambias a cualquier otro lugar bien de esa entrada, y tienes algo con esto llamó al cambio que es bastante útil porque cuando nada cambia y cambias a otra entrada, no se va a invocar. Pero cuando cambies algo, va a ser invocado. Entonces como puedes ver ahora, no es no va a ser invocado. ¿ Verdad? Pero cuando agregas algo o eliminas algo, se va a invocar. De acuerdo, Entonces así es como en esto están funcionando los pares. Y ahora Entrenemos un poco. Vamos, por ejemplo, crear un programa que vaya a decir eso. Oye, ya sabes, quiero sólo números aquí. Entonces, ¿cómo hacerlo? Lo primero que creo que deberíamos hacer es, ya sabes, usar el entintado hasta. ¿ Por qué? Porque queremos probar después de mecanografiar, ¿verdad? Bueno, si el valor está mal, entonces sabes que algo anda mal. No queremos hacerlo. ¿ Por qué? Algo se está presionando porque va a ser simplemente horrible porque tienes que hacerlo. Sólo esa función sería invocada sólo dedo demasiadas veces, ¿ verdad? No es no es útil para nosotros. Y hay una función que se llama No es un número. De acuerdo, entonces los soportes de no es el número, y él y leer regresa a través cuando el valor enviado aquí no es el número que siempre creo . La función que se llama no es Humber, y se necesita el valor para comprobar y vamos a regresar. Justo lo que es devuelto por no es un número de valor a cheque, sino que queremos toe ST el valor lógico de verdadero a falso. Y ahora se ve mejor. Ya sabes, creo que es muy malo que llamaran a esto como Eso no es un número. Está bien. Ah, porque es más fácil para ti sentir que es algo. OK, OK, está bien. Volvamos. Cierto. Si algo no está bien, volvamos. Falso. Pero aquí es como si no es un número, entonces devolver verdadero. Y ya sabes, cuando estás revisando sólo una cosa, va a ser no no te va a confundir. Pero si tienes muchos valores que comprobar y estás haciendo alternativas de conjunciones, puede hacer que sea más difícil,ya sabes, ya sabes, pensar que Cleary está bien, en mayo conducir a errores. Por eso estoy haciendo esta función útil para nosotros. Eso sólo va a comprobar si algo es un número, así que podemos está llegando a un cheque. Si algo es el número. Para que podamos hacer algo como Eve, algo es saber el número y queremos echar un vistazo a esto. Me siento punto de distancia. Entonces número temía que tesis se esté refiriendo al número fiebre ahora, ¿ verdad? Entonces ahí está que el valor no es un número. Entonces quiero hacer algo. De lo contrario quiero hacer otra cosa. Y ahora tenemos que decidir qué queremos hacer? Um, si no es el número que podemos decir, por favor escriba número, ¿ verdad? Yo soy. Yo sólo quiero un número aquí. De lo contrario estamos justo, ya sabes, lo hicimos todos los mensajes que se mostraron aquí y deberíamos esos tan cambiar por ejemplo, el color. Entonces este estilo, color de fondo cambiemos a, por ejemplo, correcto, Y después, ya sabes, hacemos todo bien. Vamos a cambiarlo a verde, como puedes ver ahora, cuando tecleemos aquí tienen o lo que sea que esté mal. Pero cuando escribimos un número, todo está funcionando bien. Puedes escribir tu número cualquiera que no lo haga. De lo contrario tenemos buena la información, por favor escriba el número. Podríamos resolver este problema también de manera un poco diferente. Creo que esta es una buena idea hacerlo de esa manera. Eso estamos revisando después de escribir una fuera de la letra. OK, Pero también podrías saber, diesel Oh, casi haciendo cualquier cosa aquí. Ya sabes, nos gusta cuando escribo clave. Simplemente no quiero que sea ni siquiera aquí, ¿verdad? Simplemente no quiero que nadie te ponga algo así. Y podríamos hacerlo bien. Podríamos por ejemplo, el A un defecto comprobado. Cuando usas algo así, puedes teclear mejorar unti fold. Bueno, el problema es que lo tenemos después de burro arriba en Key Job incluso se invoca después de que tienes tu llave, Abba, y ya está aquí. Entonces tenemos que cambiarlo. Entonces, por ejemplo, en clave hacia abajo y que era concebir son diminutas. Ser nada funciona y porque ahora puedo hacer cualquier cosa matar Ah, puedo usarlo para, por ejemplo, hacerlo sólo si el chico que fue enviado aquí es como el que soy que esto, por ejemplo, conoce el número ¿verdad? Eso es para un segundo signo aquí al infante en su HTML, valor fuera del cual, tomemos esto bajo el mando por un segundo. Y como puedes ver cuando tecleamos aquí, estamos consiguiendo algún tipo de abrigo único, y necesitamos usar el Unicode. Podríamos, ya sabes, hacer algo así como, Hey, lo que estos en el bajo el valor 57 temporada bajo el valor uh, 58 otras cosas como esa. Pero también podríamos usar el objeto sprink, que tiene un método. Hablaremos más de objeto de cuerda más adelante, pero hay un metal que se llama y es muy útil desde el abrigo de personaje, que va a cambiar los días en el personaje. Entonces cuando lo refrescamos, como pueden ver, cuando escribo algo así como letras, están apareciendo. P. Por lo que podemos usarlo. Simplemente puedes comparar y puedes reaccionar ante ello. Entonces si estos son números, está bien. Si no, no está bien así que podríamos hacer algo así incluso así, está bajo común lo hizo. Tomemos esto bajo comentario, y si algo que se va a escribir aquí pronto por lo que este personaje, entonces vamos a mostrar rata por lo demás verde derecha. Y por supuesto, tenemos que parar cuando se equivoca. De acuerdo, estoy refrescante y esto es en números de segundo tipo. Pero cuando escribo cuando trato de hacer otra cosa, no está funcionando. El problema es que incluso respalda presidente trabajando. Entonces tienes dedo del pie. También comprueba si este tipo de aquí a la derecha, um y al mismo tiempo, en el que no es igual y el retroceso es menor de ocho. De acuerdo, entonces ahora cuando él primero por lo menos puedo en el espacio trasero. Pero también debemos permitir que sepas, mecanografiando por ejemplo, eso o no. A lo mejor quieres solo permitir que alguien escriba en Teacher ¿verdad? Entero completo. No quiero tener el número flotante. ¿ Verdad? Pero si quieres permitirle número flotante, entonces también hay que decir y al mismo tiempo, que no es igual a la hija de ese valor que es 190 se puede obtener estos valores escribiendo Unicode JavaScript en el y Google. Pero también puedes bastante fácil Simplemente consígalos del niño. A de ustedes ni siquiera corrige yuk injusto. Vea lo que hay debajo de esto cuando su tiempo para simplemente basado. Ah, quiero decir, eso es que se puede ver ahora podemos empatar que simplemente no podemos escribir letras. Ahí lo hay. Por supuesto, algunos en caja es así por ejemplo, puedo escribir mall on Cassie algún tenedor. costumbre. Ahora, por ejemplo, comprueba qué hay en el dese ese valor después, por ejemplo sé cambiarlo a otra entrada O r Tal vez podrías simplemente comprobarlo después de cada vez en la función key down es, tú saber, ejecutado no muchas cosas que podrías hacer bien para revisar cosas así. Pero la mayoría de la gente que no tenía algo así. Podrías simplemente partes, ya sabes , ese valor en internet. Integer off float. Entonces, ya sabes, todo depende de lo que quieras hacer en Dwell Askew puede ver ahora cuando escribo algo mal, es rojo, pero no se debe leer al instante. Debería, ya sabes, probablemente ni siquiera mostrarse en la rampa roja porque, bueno, cuando escribo algo mal, ni siquiera va a aparecer. ¿ Verdad? Por lo que siempre tenemos el número correcto aquí. En mi humilde opinión, esta no es la mejor manera de ir. Creo que esa interfaz no deberías saber, estos permiten escribir algo dentro porque, ya sabes, sabes, el usuario podría no saber lo que está pasando, verdad? Es mejor,ya sabes, ya sabes, después de cada llave arriba, mostrarle el mensaje, la cosa roja o algo que cuando todo está bien, puedes mostrar, ya sabes, algunos toma, todo está bien. Ya sabes, en mi humilde opinión, algo así va a ser más mejor. Mejor experiencia para tu usuario. De acuerdo, eso se va hizo Escucha, muchas gracias. 46. Dejar de enviar: Hola. Probablemente hayas notado en la última lección que hemos ganado nuestras soluciones al problema al comprobar con los números. Cuando tecleamos algo crecido, aún podemos enviar el formulario y todo se re sienta. Eso no es lo que debería pasar, ¿verdad? La persona que es que conoces, visitando tu sitio web solo debe ver el mensaje de sopa. Por favor, escriba el número. Si no escribes el número, no puedes enviarlo. De acuerdo, así que hasta que todo esté bien, no debería poder enviarlo. Y ya sabes que solo tomas la sopa en mi botón firme y luego usas el propio evento click y obtienes el par el objeto e incluso el objeto puede evitar siempre las cosas por defecto , ¿ verdad? Acciones por defecto de defensa. Ahora, eso no va a mandar lo que sea que esté aquí. Está bien. Y no lo es. Y necesitamos saber Compruebe si todo estuvo bien aquí. Y si solo podemos crear una variable, está todo bien? Y por defecto se dijo que también lo haría. Y simplemente lo cambiamos, ya sabes, si todo no está bien, Entonces si esto no fuera un número con cambiar a falso, pero si todo está bien, lo cambiaremos de nuevo a verdad, ¿ verdad? Entonces por ello, cuando escribimos tu algo como puedes ver, por favor escribe el número. No se va a enviar, pero cuando se tipo de número, se va a enviar. Pero hemos dicho fuera de curso. Consúltalo más tarde aquí. Correcto. Si no todo estaba bien, entonces prevenido. Entonces como puedes ver, no se va a enviar. Se envía. De acuerdo, entonces esto es algo bueno que hacer, porque después, cuando quieras revisar por ejemplo campo de texto, alemán otro que conozcas, puedes tener lo que sea como chequear dar el derecho laberinto de la posible. Diz. Raidi. Ya sabes, este era nombre correctamente rutina o algo por el estilo. Puedes revisar cosas así, E. Y ya sabes, si incluso una de ellas está equivocada, solo puedes decir estas muy ablesa caídas y sabes que solo va a prevenir estas acciones , y eso va a mostrar al usuario el mensaje, justo que hay que cambiar algo como ejercicio. Me gustaría,ya sabes, hacer ya sabes, algo con campo de texto y, por ejemplo, comprobar si se trata de una sola palabra. Si hay un espacio dentro no va a ser, ¿sabes? Bien. Tienes que ponerlo de pie f ¿Está todo bien? Está bien. Falla del dedo del pie y cómo hacerlo. ¿ Cómo comprobar si hay un sitio de espaciado? Mira, campo de texto que ingresa el valor. Él es realmente una matriz. Se puede utilizar, por ejemplo, objeto de cadena para ello. Se puede leer al respecto en el, uh, Google. O bien puedes ver el video sobre el objeto racha que estos más adelante en el siguiente set siguientes secciones y solo puedes pasar por todas las letras dentro del mundo dentro del valor de entrada. Bueno, y si hay un espacio, solo, ya sabes, mostrar un mensaje. Algo anda mal. De lo contrario simplemente no lo hagas. Tienes problemas. Sólo pregunte. Tienes que entrenar. Recuerda, Es muy importante que así en la lección. Muchas gracias. 47. Caja de verificación: Hola Hoy siempre te muestro cómo comprobar qué fuera de las casillas de verificación fueron marcadas por el usuario y cómo usar información como esa ya creé. Por lo que no perdemos nuestro tiempo. Una forma y dentro de ella creé un profundo y dentro del día. Si hay una etiqueta para cada uno fuera de la entrada Así que cuando arrojas en el texto al lado del dedo del pie la casilla de verificación, puedes elegir los cheques que lo rodean, ¿ verdad? Es muy útil las etiquetas de uso del dedo del pie y todas estas entradas son casillas de verificación. Y también agregué y nombro atributos con el nombre del curso de valor. Y hay que recordar que para los chequeros, debes usar siempre el mismo nombre. Y la diferencia es que hace es así? Ahora, cuando vayas usando el documento, consigue un limón por método yo d y obtienes el mi formulario y tú arroyo punto Entonces autos de policía nombre tienes aquí una zona. Por lo que este tipo está debajo del área bajo el índice cero en sus edictos. 12 gratis para Y puedes elegir esta entrada esta entrada esta entrada esta entrada Esta entrada y obtener de ella, por ejemplo, valor o si está comprobada o no. De acuerdo, entonces no es tan difícil. Entonces vamos por ejemplo, vamos a nuestro frío. Como pueden ver, ya me tengo el teléfono mío. Ya tengo el sub en batalla y ya tengo la info aquí, justo eso donde colocaremos las cosas para que la ganga vea algo. Entonces usemos el yo creo el Lope porque es la mejor idea ir a la surge cuando estás perdiendo bucle. Por lo que cuatro fueron capaces yo igual a cero y nosotros estoy más bajo que mi forma. Y luego podemos llegar al qué hacer el nombre del curso Lente oscuro. Porque estas en array derecho, puedo hacer algunas cosas si empecemos a entrar en el en cuatro y al HTML interno y simplemente escriba aquí algo, mi nombre de causa de forma y luego cero que bien, así que no estoy usando esto es mirar estrellas. Solo estoy asignando al mismo tiempo lo mismo desde las primeras chequeras. Muy conocido. Doy click. Agrega como puedes ver, tenemos el valor aquí. El PHP siempre va a ser Petri. Porque esto primero y también debes notar que este es el valor. De acuerdo, dentro del interior ahí, el valor del atributo, el valor fuera del valor es PHP. El problema es que sabes que el pensar que esto dentro de aquí te llamas un valor ¿verdad? Y el nombre del atributo es también los valores siempre tienen que decirlo, pero el contenido de este atributo es lo que él que va a ver aquí. Está bien. Y, ah, aquí no. De acuerdo, esto es sólo una etiqueta. La docena de madre escribirías aquí? ¿ Verdad? Se puede hacer algo así. Siempre vas a ver javascript en esta cosa. Esto es lo único para lo que es importante, ¿sabes? Está bien. Entonces podemos usar algo así. Por ejemplo, incluso hacemos algo así, verdad? ¿ Mamá? Es porque ahora tenemos todos los valores que podemos. Hay algo así. Bálsamo. Como puede ver, todos los valores que también podemos usar algo bueno se llama propiedad de cheque. Esta cosa te va a decir lo que se revisó o no fue engañado. Como puedes ver ahora, todo estaba en jaque. Entonces nos han peleado falsos en todas partes Pero si reviso por ejemplo grandeza? Sí. Como puedes ver, tenemos verdad después, ya sabes, en Js fundamentados Así puedes usar información como esa bastante fácil. Lo primero que hicimos mal aquí porque no es efectivo. Deberíamos crear, um, cadena temporal aquí, así. Y debemos asignar al final. Ah, deberíamos hacer algo así al final. El resultado. Está bien. ¿ Por qué? Hablé de ello muchas veces. ¿ Quieres hacerlo? Porque en nuestro HTML va subiendo poderes cada vez que estás leyendo algo. Todo el contenido dentro así que va a dar vueltas más rápido ahora, ¿verdad? Como pueden ver, cuando aquí cambiamos algo, también está cambiando aquí eso verdadero, falso. Para que puedas usar información así, hace qué hacer. Una declaración condicional. Si es igual a verdadero. Entonces haz algo. La verdad es que no necesitamos hacer algo así. Ya sabes, tipo es igual a través porque checado va a regresar aquí. Verdadero o falso. Entonces si comprobado es cierto, entonces hemos llegado aquí justo a través, así que no necesitamos, ya sabes, hacer comparsión aquí Q Me gusta usar operadores especiales Así que si Michael realiza llamadas nombre bajo el se comprueba índice ocular, entonces quiero saber en JAG, pero a valor. Y como puedes ver ahora solo estamos sumando los valores que revisamos. Está funcionando bien. Podemos editar el final. Ir a algo así, ¿eh? puede ver es que creo que es bastante Bueno, se puede frenar la línea, lo que sea para que puedas usar algo así. Por ejemplo, para agregar cosas a tu cesta. Paseo temporal en canasta. Después puedes enviar esta información también al melocotón paz siempre usando las drogas A. Lo genial es que no va a ser Dina dinámica, ¿ verdad? No puedes Ah, gente puede agregar en tu página web cosas. Nosotros juramos en una espera. Entonces es realmente genial. Piensa usar algo así. De acuerdo, sólo hay lección. Muchas gracias. 48. Forma de radio: Hola. hoy les voy a mostrar cómo trabajar con las importaciones de radio. Las importaciones de radio están funcionando así que solo puedes elegir una opción a la vez. ¿ Verdad? No puedes elegir ambas opciones a la vez. Sólo se puede elegir uno de ellos. Y esto es bueno para usar. Por ejemplo, cuando quieres preguntar, te sientas. ¿ Actúa en términos fuera de servicio? ¿ Sí o no? Correcto. Entonces hemos llegado aquí dentro de las importaciones de Dave con el nombre excepto ation, off terms, off service name, y podríamos usar estancias cuando alguien krieg en él. Queremos comprobar Cambiar el atributo deshabilitado aquí y el inicio. A mí me gustaría que se desactivara. Por lo que también al inicio, deberíamos elegir el checado donde la opción no. Y cuando hago click en la S, quería tenerla no desactivada. Cuando hago clic en No, quiero que vuelva a desactivarlo. Entonces hay que hacerlo donde podamos hacer, por ejemplo, algo así entrar en expectativa fuera de términos de servicio. Por lo que mi forma expectativa fuera de términos de servicio. Y cuando alguien haga clic en el primer tipo, quiero invocar la función que va a cambiar la batalla repentina. Discapacitados a qué? Para no deshabilitar así a falso. Y cuando alguien haga clic en el segundo tipo, quiero cambiarlo a, como pueden ver ahora está funcionando bien. Entonces, ¿es sólo lección? Bueno, podríamos terminarlo, Pero míralo un segundo aquí. No sé cuál es cuál. Ya sabes, cuando lo cambio por algo así, Como puedes ver ahora no está funcionando correctamente. Hacer aceptar condiciones de servicio. No. Y está habilitada. Entonces algo anda mal ahora mismo. Entonces no se debe hacer así, ¿sabes? Ya sabes, Mayor llamó depender de lo que pase aquí, verdad? Alguien podría cambiar algo su mayor tiempo. Se alejó caminando. Pero eres entrenador, deberías estar mejor. El siguiente es que sabes que es difícil t incluso desde Javascript aquí para ver si estoy eligiendo aquí. El tipo que debería disparar cambiando dedo del pie la mano de obra o no. Por lo que sólo sabemos de esta cosa en el por qué estamos programando justo después de un movimiento no recordará . Entonces es mala idea usar algo así. También podríamos usar las chequeras. Acento o no, esa opción también disponible. Y ¿Pero qué? Estamos usando la escritura ahora mismo. Y Teoh Bueno, ¿cómo actualizar esto? Bien. Podríamos ir a Oh, fuera de esas cosas así. Al igual que expectativa fuera de términos, fuera de servicio, ¿verdad? Y haz algo así a la vez. Entonces podemos registrarnos, evento usando por lo tanto lope y una vez dedo del pie cada elemento dentro de la zona así, es bastante poderoso, ¿ verdad? El problema es que estamos poniendo ahora es falso. Entonces cuando creemos lo que sea aquí, ahora va a ser falso. Entonces necesitamos usar la información fuera del elemento Que Waas les dijo que podíamos hacer es, por ejemplo, palabra clave dis. Entonces nos estamos refiriendo al que pasamos por el bucle y luego usamos el volumen. ¿ Por qué valor? Porque tenemos ahora aquí valor, valor, falso y valor a ¿Y funcionará? Como se puede ver, debería tener. Deberías estar trabajando pero no está trabajando. ¿ Por qué? Ya ves, cuando hagamos algo así como esa alerta, verás que el do lo tiene aquí cae. Y aquí tenemos verdad. Entonces por qué no funciona porque ese tipo de estas variables es string Cuando hacemos cosas así , como puedes ver, no está funcionando. Además, va a funcionar cuando hayamos llegado aquí. A través. Bolos, como se puede ver ahora, no está deshabilitado. ¿ Verdad? Entonces para que Maggie la bolera, tenemos que hacer una comparsión para poder decidir. Al igual que d llama a Sí, verdadero equivale a dos instinto verdadero. Sí, creo que sí. Como se puede ver Cataratas a través igual a dos. Ya sabes, para nosotros parece igual. Pero para la computadora se requiere aquí exactamente el tipo de bolos. Como puedes ver ahora está funcionando bien. Y esta tarjeta es universal porque se puede cambiar. Ya conoces la posición. Todavía va a funcionar correctamente, ¿verdad? No necesitamos dedo del pie arriba. Genial. ¿ Algo en nuestro abrigo? A lo mejor se ve un poco más difícil, pero después de que trabajas algún tiempo con tu código JavaScript. Esto no debería estar buscándote en el corazón, ¿ acuerdo? Y podría que tampoco estés entendiendo esta línea. Es necesario recordar que cada vez que asignes algo dedo del pie de llegada, la interpretación que primero va a ejecutar esto para que este dedo lea, Return. Verdadero o falso. Y sólo va a firmar estos valor por aquí, ¿ verdad? Entonces así es como está funcionando. Es la importación de radio. Se ve casi igual así. Casillas de verificación. Entonces esa es sólo la lección. Muchas gracias. 49. Seleccionar en forma: Hola. hoy te mostraré cómo trabajar con selecto, que es mayormente en libros fríos de Kamba. Y se ve así, ¿verdad? Entonces, ¿cómo usarlo? Cómo agregar nuevos elementos. Cómo comprobar qué elementos fueron elegidos por el usuario de tu sitio web, cómo hacerlo. Bueno, para poder trabajar con esto, necesitamos saber que hay propiedades y algunos métodos que necesitamos conocer. Sigamos primero el enfoque, en cómo está funcionando la charla selecta. Hemos estado dentro de opciones, ¿verdad? Y hay hombres fuera de ellos y puedes elegir todas las opciones usando la propiedad de opciones . Después de obtener este selecto usando el documento get element by I d o, ya sabes, nombrando esto Así también podemos nombrarlo escribiendo cursos de video. Y ahora podemos conseguirlo trabajos usando mi formulario aquí. ¿ Verdad? Um te puede gustar mi formulario y ahora video cursos y puede usarlo por ejemplo, que Zoller ¿qué vemos? Como puedes ver, tenemos html select a limón. Entonces estamos ahora mismo aquí y podemos ir a opciones. Entonces con el fin de ir a opciones. Simplemente te gustan esas opciones. Y podemos elegir cada una de las opciones porque esto es realmente un área. Eso es porque ahora estamos en la alineación de opciones HTML, que es el primer tipo. Y podemos ir al valor del valor de la misma, por ejemplo, usando el texto, y esta cosa devuelve este derecho, el texto. Pero el texto es más que estoy acostumbrado a cambiar texto dentro. Entonces, por ejemplo, podemos agregarle algo a ah, a ella. Como puedes ver, lo agregamos ahora al final. Destexhe aquí, debes más tiempo usar valor. El valor de la propiedad está devolviendo lo mismo. Pero no quieres tener siempre el mismo valor para descender a PHP más adelante. Ah, que tienes aquí, ¿verdad? Y por eso puedes, por ejemplo, hacer algo así. Y entonces el valor le devolvimos la cosa que se oculta al usuario, ¿no? Se quiere mostrar a veces a un usuario algo un poco diferente. Entonces así como obtienes el valor y ahora también podríamos conseguir, por ejemplo, esa cosa que se selecciona. De acuerdo, entonces, ¿cómo hacer eso? Um, podríamos simplemente hacer algo así ese índice seleccionado. El problema es, ahora que ya sabes joven, no estamos comiendo, no invocando nada va a cambiar el derecho. Será buena idea dedo del pie cambiarlo después de cada vez que cambies algo en tu asi como como es el selecto incluso llamado cuando cambias algo va a cambiar el Eso es eso. Eso no es una sorpresa. Entonces, solo hagamos algo. Mis cursos de video de forma punto sobre cambio es igual a función y podemos ejecutarlos algo así como esa alerta y se consume. Ahora cuando cambiamos, nos estamos informando podríamos usar la info aquí en para lo generado. Además, no necesitamos causar box cada vez, y ahora sólo podemos cambiarlo. Se puede ver que tenemos bueno aquí ahora el número fuera del índice seleccionado. Por lo que también podríamos usar esta información para, ya sabes, mostrar cuál fuera de la pared y el tipo fue elegido que los salvó en la variable. Entonces ya sabes, puedes ver sería buena idea tener en variable temporal para que no tengamos dedo del pie cada vez. Toma mi teléfono, ese video cursos que puedes ver ahora sigue funcionando, pero es un código un poco más corto. Entonces usemos esta información. Por lo que iremos a los videos cursos que opciones. Y ahora queremos tener aquí, ya sabes, al tipo índice seleccionado. No el que nosotros, ya sabes, tipo cero vamos a ir. Video coast es el volumen de índice seleccionado por puntos. Por lo que cuando envías algo, puedes comprobar fácilmente qué es bien elegido por el usuario. Sólo por, como se puede ver, usando esta línea de código, ¿no? A lo mejor en evento de cambio, no es una buena idea, pero esa es la forma de comprobar lo que era falso mundo elegido por el usuario. Pero no se puede hacer en su propio cambio. Incluso bastante fácil y bastante rápido. solo usar esto, esa institución bien así, solo puedes hacerlo de esa manera. Y es sólo más rápido porque esto va a, ya sabes, siempre conseguir la opción que acaba de ser elegida. De acuerdo, por eso fue muy guay. Puedes usarlo bastante fácil así. Está funcionando bien. Bien. Creo que también alrededor y cada vez cuando haces algo PHP Maya escuela sask alrededor dos años, ¿ verdad? Está funcionando. Bien. Podemos hacer lo que queramos con estos valores, ¿de acuerdo? Y se ha llegado también a funciones que son muy importantes. Se retira el 1er 1, que está quitando algo para que podamos escribir videos cursos que quitaron al chico en el índice cero se puede ver ahora no tenemos X html Que empiezan justo aquí está, y él desaparece. Puedes usarlo porque sabes algo. Podrías hacer un programa donde alguien escriba algo. Informante. ¿ Quieres quitar algo del del cuadro combinado así? Y también puedes querer a veces en algo Así puedes tomar cursos de video dup en y aquí debes tener un html limón opcional. El problema es que tenemos que crearlo. Entonces tuvimos que empatar, por ejemplo, nueva opción que iguale al documento. Crear elemento para que podamos usar en este momento el en una demo de rabia. Bueno, llamamos probablemente algunos estaban trabajando alrededor, pero esta es una forma más rápida esta vez. Ah, porque curiosamente va a reproducir el abrigo. Entonces esta es mejor manera de hacerlo ahora. Una nueva opción que toma lo dijimos, por ejemplo, para venir pase y acaba de sumar justo así. Como puedes ver, tenemos un D y ahora escuelas Compass con un bastante fácil No podemos ser el inicio que puedes ver ahora es un inicio. Pero no tenemos nada Niños. Porque, ya sabes, por defecto , este tipo fue elegido. Por lo que en el programa, te pierdas un ritmo. Sorpresa. ¿ Qué pasó? Por lo que también podemos elegir índice seleccionado. Podemos hacer índice seleccionado en este chico Inc. hacer algo. Videocursos que seleccionaron índice Establezca en cero. Ya puedes ver ahora se elige Compass. De acuerdo, Esa es sólo una buena lección. Muchas gracias. 50. Manipulación de String: Hola. Hoy vamos a hablar de cómo manejar un carácter de secuencia fuera usando métodos de cadena porque a veces se quiere cortar algo de la cadena. A veces se quiere, por ejemplo, reemplazar algo interesante. Encuentra algo en la cadena para que puedas reemplazarlo más tarde. Se quiere, por ejemplo, hacer algo del arroyo como una letra Toby mayúscula o minúscula. Es posible que quieras hacer cosas así. Y debes saber que hay muchos métodos que te van a ayudar mucho tiempo en tu viaje de chatarra. De acuerdo, así que empecemos. Tenemos aquí en ellos. La cuerda de Pereira así. Lo tenemos bueno dentro del enfurecido email fuera del objeto info que está aquí, y queremos Ahora comprobar cómo están funcionando todas esas funciones en unos ejemplos prácticos. Por lo que tenemos una cuerda temporal de dos años. Tienes que saber que puedes crear hedor también así porque este es un objeto, ¿ verdad? Entonces va a funcionar de la misma manera que nosotros lo hacemos, que no estamos fuera de esa manera. Y ahora podemos, por ejemplo, revisar un ¿cuál es el primer personaje aquí? Se puede ver Es un derecho. ¿ Y si este fuera mi nombre así? Como se puede ver, este nombre está partiendo de la minúscula, ¿ verdad? Una carta y no es buena. A lo mejor alguien en tu forma va a, ya sabes, poner su nombre y apellido con las letras minúsculas. No quieres tenerlos guardados así en tu base de datos. Entonces es una buena idea, ya sabes, Hazlos erguidos para hacerlos mayúsculas. Cómo hacerlo. Se puede utilizar, por ejemplo, la función que se llama a mayúsculas. Tienes que recordar eso. Ya sabes, esta cosa se le ha devuelto algo. Tengo algo así como un derecho similar así. Entonces estamos corriendo en la A a mayúsculas y esto puede ver que no es grande a Y cuando hagamos algo así, también va a funcionar Como lo puedes ver ahora es grande, pero fuera de curso temporal, muy libro. No ha sido cambiado. Entonces queremos cambiar. El Pemper son variables aquí. Tendríamos que hacer algo así. Autobús. En primer lugar, necesitamos conseguir de alguna manera este pensar el resto fuera de la cuerda. Entonces, ¿cómo hacerlo? Se puede utilizar para ello. Por ejemplo, sub string o rebanada metal para que puedas hacer algo así como Plus, y ahora desde el temporal quiero usar el método de sustancia muerto que está cortando tantos personajes como no lo hará de a qué lugar? Y, ya sabes, es como 01234567 Así que aumentamos el primer tipo. Entonces quieres cortarle al segundo tipo, ¿verdad? Si no especificas el segundo argumento, simplemente lo cortaría hasta el final, ¿de acuerdo? Incluso especificar el segundo argumento. Entonces si hizo algo así, como puedes ver, es cortando dedo del pie esa posición. Está bien, y se desliza y resbala. Sub string está funcionando igual, así que no necesitas, Ah, Ah, preocúpate por ello. rodajas tiene buena y poca ventaja, pero la sustancia es un poco más rápida. La mayoría de las veces porque la rebanada escolar también puede , ya sabes, cortar usando el negativo son número negativo. Para que sepan que podemos cortar desde el final contando desde el final. Pero creo que no es buena idea. Hace que tu abrigo sea horrible y difícil de leer, así que es como si fuera lo mismo que tienes también algo bueno se llama sub string sin la tinta y esto puede ver que funciona igual. Pero la diferencia es que se puede escuchar Poner por ejemplo para Y lo llamamos cortar cuatro caracteres de ese lugar para personajes, no remolcar cuarta posición. OK, así que esa es la diferencia. Está bien. Y bueno, vamos, por ejemplo, crear un enlace como ese. A city Bay video cursos en línea que vienen. Y por ejemplo, tenemos aquí un curso sobre video curso C plus blast HD Emma Like eso. Está bien. Y nos gustaría conseguir sólo esta parte. Cómo hacerlo. Cómo conseguir esta parte del Tú eres todo lo que estás fuera. Para poder hacerlo, hay que poder de este lugar. Pero cómo saber que quieres gato de Ah, ¿cuál es el número de cuál es el índice de este lugar? Correcto. Bueno, para poder llegar a ella, hay que usar el índice apagado o último índice fuera Met it. Este o éste en esta situación quieren conseguir el último posible corregido así. Entonces vamos a usar el último índice apagado, ¿verdad? Si quisieras conseguir al primer tipo usaría el índice de descuento. Entonces vincula ese último índice apagado va a volver. Cuando tecleemos tu algo así, va a volver. Tomemos esto bajo comentario. El posicionamiento fuera de este beck slash. Entonces tenemos suficiente disposición que quieren sustituir de este lugar, ¿no? Entonces vamos a igual que poner piso de sub cuerdas de ese lugar. Y como pueden ver ahora, lo tenemos de este lugar desde el lugar. ¿ Dónde está esa invertida? Pero no queremos esta baraja trasera así que sólo tenemos que adherir a una. Y ahora tengo la posición en la que estamos, y esta es buena información. Podemos usar la ubicación de la ventana para llegar ¿Dónde está tu usuario ahora mismo? Entonces si usamos por ejemplo, como puedes ver algo así, vas a ver el Todos están aquí, ¿ verdad? Entonces si hicimos algo así, como pueden ver, um, um, en la ubicación, hagámoslo esta bebida. Como puedes ver, tenemos índice que html Entonces, como puedes ver, podemos fácilmente conseguir ¿Dónde está la persona en tu página web? ¿ Verdad? Podrás usar esa información más adelante, hablaremos más de cosas como esa. Al igual que propiedades de ventana más adelante. También. Está bien. Se puede, por supuesto, usar cosas así para otra cosa. Por ejemplo, puedes tener muchas clases, ¿verdad? Se puede tener clase un 45 por ejemplo, frontera que, ah, cláusula que dice que tiene que hacerlo bien. Y luego se puede comprobar altura este un 4 a 6 dentro. ¿ O es frontera el interior? En caso afirmativo. Y yo quiero hacer algo así, ¿verdad? Se puede utilizar la información. A mí me gusta Así. Usando el índice fuera del último índice apagado porque si no hay nada como nada dentro de tu cadena, va a devolver menos uno. De acuerdo, puedes usar información así para cosas como esa. No aprendamos sobre la división. Importó porque también es muy útil. Imaginemos que tienes y cuerda temporal así. Y estaba en la página B com par salsa, molido Js. Está bien. Algo que tal vez incluso tenemos que venir. Vi algo ahí dentro. Y tienes esta cadena proveniente de tu base de datos, por ejemplo. ¿ Verdad? Tienes algo así. Quieres paralizarlo sabes que puedes. Se quiere, por ejemplo, Añadido a los libros selectos o algo así. Entonces es difícil hacerlo porque tendría que, ya sabes, usar sabes, el lóbulo e ir aquí. Y luego cuando hay una especia tienes que crear en una fila y en la X html a estas área y luego en Beach muelle la naturaleza complaciente. Y eso somos nosotros y lo hacemos manualmente. Ya hay una función como esa porque estas situación bastante común situación común . Y con el fin de perforarte, estás usando su división importó, que es dividir a la derecha. Dividiendo Ana. Encadena una cadena en el área para que podamos hacer algo así como dividir. Ahora es poco Es una variable. Temporal, todo así. De acuerdo, así que ahora tenemos aquí, Como puedes ver, X html en el área temporal. Fuera de curso. Ahora mismo tenemos que Else también en el separador. De acuerdo, entonces el separador entre todos estos tipos es un espacio. De acuerdo, entonces tenemos que x html los segundos chicos ser hb Así que tenemos un aireado ahora mismo y tú puedes hacer podemos hacer algo con estos diversos. De acuerdo, podemos cambiar a este tipo por, por ejemplo. Um CSS, correcto, Así que se ha cambiado, y ahora queremos unirlos de nuevo para poder variable nueva cadena igual y queremos conectar temporal en me uní a todos estos elementos dentro del área en remolque, por ejemplo. Una cuerda con las comas entre todos ellos derecha así y no lo harás es que te has metido ahora emocionadamente millipede Ph b C s s sas grand Js Antes de eso, habíamos trabajado. Teníamos brújula PHP, pero sin todas estas comas de coma y estamos arriba este cambio. Por lo que podemos bastante fácil hacer algunas operaciones como esa. Y es como puedes ver, muy Claro que puedes reemplazar, ya sabes, sabes, como si hiciéramos algo así también podría el temporal ver que reemplazara, y podríamos reemplazarlo. ¿ Qué envió aquí? Argumento que diría qué responder. Entonces podríamos, por ejemplo, escribir x html y quiero reprenderlo a, por ejemplo, por ejemplo html cinco, ¿ verdad? Y se puede ver um, sustituyendo el calor aquí. Mostrémosle a las 10 fiestas que piensan, um , bueno, no está apareciendo porque este reemplazo está funcionando, pero está devolviendo la nueva cadena, así que no está funcionando en esta variable aquí. Tienes que ahorrar, ya sabes, el nuevo valor en remolque. El mismo muy abajo al nuevo on. Entonces va a funcionar html cinco. Entonces así es como puedes reemplazar algo. También un bonito, bastante lejano, bastante rápido. Pero no se puede agregar, por ejemplo, ahora en ah, después de cada apagado ese elemento dentro del coma y el espacio, correcto, como hicimos aquí. Y, ya sabes, no puedes compararlos van a hacer algunas cosas específicas como algunas cosas adelantadas, como con estas aquí mismo. De acuerdo, tienes también algo bueno se llama sueño, y esto es realmente, realmente útil para almacenar contraseñas va a veces cuando la gente copia piensa y se han parcelado, por ejemplo en el texto, para la mayoría de la gente lo hace de la manera no hay seguro. Pero como se puede ver su copa. Terminé con el espacio aquí, por ejemplo, Y cuando lo amarraron en la caja del pasaporte, los espacios interpretaron este ah personaje. Y el problema es que algo así va a hacer el problema porque se les dijo que ya sabes, tu contraseña está mal y van a estar como, Hey, pero solo taza lo hice por qué no está funcionando. Entonces esa es buena idea, dedo del pie. Siempre cuando se tiene, por ejemplo, algo así. Y es por supuesto, la contraseña. Por ejemplo, hacer algo así como soñar. Aquí va a quitar estos espacios. De acuerdo, entonces cuando lo refresquemos cuando vayamos a la bolsa de bomberos, notarás que no hay espacio. ¿ Tiene razón? Cuando lo hagamos sin la función de sueño, notarás que tenemos aquí espacio un espacio aquí y un espacio apareció. No mamá, no más porque, bueno, HTML está funcionando así si tienes más de un espacio, no interpreta bien. Si quieres tener más de un espacio, tienes que hacer la nota Brickell booth space. Pero el sueño puede quitar la maravilla esto aquí y la que está aquí a la vez. Es una buena idea saber también que puedes usar la búsqueda para buscar como el índice a menudo último índice apagado, pero es un poco más lento ¿es mejor usarlo? Sólo cuando usas algo así como ese objeto de expresión regular del que hablaremos más adelante . Y también es buena idea que puedas conseguir, por ejemplo, como aquí con algo que puedes hacer algo así. ¿ De acuerdo? Y va a funcionar bastante bien, El problema es que esta sintaxis del descanso lo rompen. Pero con el Escudero, un paréntesis cuadrado no va a funcionar en los expertos internos. Seis y siete, tal vez ocho. No recuerdo exactamente, porque la mayoría de las veces usaba carácter en el camino. Ah, pero en esto un poco, un poco más rápido, pero realmente muy pequeño. Una cantidad muy pequeña sin bateador era como miles de operaciones y tal vez sería mejor usarlo, pero no es compatible con navegadores antiguos. No debes preocuparte por ello en el camino. Pero el problema es que, como pueden ver, cuando hacemos algo así, no sé exactamente. Oye, realmente estoy pensando en el primer personaje de este temporal de son capaces, ya sabes, este aire, creo que aquí lucir así no me está haciendo pensar que esto es una cuerda. Cuando miramos aquí, correcto, tenemos que ir aquí, aquí a la línea 21 y mirar Oh, eso es así que esta era la cuerda. OK, así que voy a volver aquí. Y mira cómo funcionaba este Cody's, ¿verdad? Si tenemos algo así, al instante podemos decir eso. Oye, si él está usando, si yo estoy usando eso ah importó. Debe ser una cadena de instancias derecha. Entonces creo que se llama. Es más legible usando este. Ah, en los nuevos navegadores Web, esta cosa se apoya bastante bien. OK, esa es sólo la lección. Muchas gracias. 51. Subirte de cadena en el código: Hola. Un impuesto muy largo debe dividirse en ojos mentales en el abrigo, por lo que el código es más fácil de leer. Pero hay un pequeño problema y preocupaciones. ¿ Cuál es ese pequeño problema al hacer clic en Entrar, por ejemplo Aquí, como puedes ver, si este medio neto no te daría la solución que es correcta, no funcionaría. ¿ Por qué? Porque el script de Java siempre espera de ti. ¿ Vas a terminar tu cuerda en uno online? Si no lo haces, tienes que a ti una slash beck que diga, sabes que la continuación de la cuerda está en la siguiente línea. De acuerdo, probablemente también hayas notado que había algo así como la contralga y ¿qué es lo que significa ? El retroceso y es el personaje especial que está dando ahí entrar. Pero ya va a ver que no vemos aquí y entrar a un descanso. Está bien. Y deberíamos decirlo aquí en el abrigo. El problema es que Firefox no lo está interpretando. Por ejemplo, ¿qué pasa con el Google chrome? Como puedes ver, cuando vas aquí es en dos líneas. Um, vamos a traerlo aquí. Y eso es refrescar primero, ya que puedes ver está en líneas aquí después de refrescarse, incluso no está en la vida. De acuerdo, para que puedas hacer entradas dentro del abrigo así. Contralora aan den. ¿ Es útil? A lo mejor. Eve, querías que tu frío se viera mejor aquí, ¿ verdad? Pero el hecho es que no me importa. No te debería importar. También, porque sabes que esto es dar hacer tu piel más grande el para eso es lo primero que no te hace ver mejor tu guión aquí. Lo hace mejor en el aspecto en el código fuente. Pero el dedo segundo, entonces la persona que va a usar su código fuente es la persona que podría estar cumpliendo algo por cada capa de recursos que tienes una fuente llamada que está aquí que se ve bastante cornudo bastante claro. Y ahí es donde debes enfocar tu atención del dedo del pie. OK, entonces la nada fue agregando el especial corregido así. Pero personajes especiales como ese a veces son útiles porque la barras inclinadas hacia atrás está reservada. Cuando haces algo así, como puedes ver, aquí no podemos ver barras contrarias. Si quieres ver a un cirujano de espalda tiene que hacer para retroceder cortes tales salpicaduras y esto su contra ahora podemos ver uno. Y también se puede utilizar para, por ejemplo. Ya sabes, algo así. Ah, quiero citar algo. Uh, el tipo dijo que el tipo dijo: ¿Qué tal puedes ver que tenemos problemas? Tiene razón, Porque estamos usando el doble Coursey. Nos vendría bien algo así, ¿verdad? Pero, ¿qué Divi debería hacer algo que soy? No está funcionando ahora, ¿verdad? Porque usas ambas letras let ahora mismo, como las estroboscópicas de manzana y la cita. Por lo que la solución a este problema es la contraportada porque cuando haces una contralora antes de esa cita o antes había gente antes del opresor para antes de la cita que vas a ver como resultado, el personaje que está tras la contrasta, De acuerdo, no importa revisado, usa estroboscópicas de manzana o te citan al inicio de la cuerda. Entonces solo debes seguir usando una mayoría de las veces. Por lo que probablemente sea la mayoría del tiempo mejor utilizado este doble comillas, pero no importa. Ah, solo será que puedas hacer que lo uses en la única opción la mayoría de las veces sabes que tu código es más fácil de leerlos porque no te estás cambiando Nunca en todos los lugares posibles. Y entonces tienes problemas de una manera que tienes que hacerlo y terminaste aquí que en la segunda. Muy bien. De hecho tiene que gustarle eso. Sólo tienes que mantenerlo a la opción única. Entonces en esta situación, si usamos la mayoría del tiempo el doble corcho, la cotización, deberíamos hacer algo así y todo funcionaría bien. También puedes seguir abriendo así. Puedes hacer Plus aquí. Está bien. Y también va a funcionar. Bien, pero esto es un poco más lento que la solución que te dan hace un segundo. No obstante, esto también es más apoyado. Está bien. Navegadores antiguos esto piensa que podría no funcionar durante mucho tiempo. Está bien. No necesita una lección. Muchas gracias. 52. RegEx: Hola. hoy te mostraré la forma más poderosa de salir buscando a tus cuerdas en tu abrigo. Esto es muy importante porque a veces no conoces los datos que te están llegando. ¿ Quieres comprobar exactamente si es correcto? Entonces, por ejemplo, cuando estás tomando bien los formularios, por lo que las expresiones regulares son muy útiles en situaciones como esa, puedes comprobar si el correo electrónico es de paseo. Usted contrata. Si el abrigo si el teléfono es correcto y otras cosas así bastante rápido y fácil usando algo con esto llamado expresiones regulares, también hay que recordar que puedes usarlo en cualquier idioma porque se ve el mismo PHP y otros idiomas. De acuerdo, entonces es habilidad muy útil. Entonces es buena idea aprender esta cosa. Vale, Entonces, por ejemplo, tenemos algo así como esos índices y me gusta sacar de estos índices en el que empieza con una y que tiene que correr, por ejemplo, Y luego un número, correcto, el índice No es así, por ejemplo, algo que y cómo hacerlo, o tal vez cómo subirse a los números Lee. Cómo hacían cosas como esa manera fácil y rápida normalmente tendrían que ir con por lo tanto bata e ir tras cada personaje y comprobar. Hay un personaje anterior que se ve así. Si no, ¿tienes que hacer algo como Imbaba bla, bla , bla te llevará mucho tiempo, y tienes que cada vez por cada patrón que pensarías para buscar en tu apesta, tendrías que pensar en una nueva forma de financiar bien las cosas, y tenemos algo con expresión regular. Aprendamos. Como puedes ver, hay muchos métodos que puedes ver. El primer método se llama Buscar, y, como su nombre indica, es esta búsqueda y devuelve el índice apagado. Lo que estás buscando en tu fórmula en el patrón que enviaste aquí desde la racha haz tan bien, pero lo que no queremos exactamente al final es que quieres encontrar a este tipo, a este tipo, racha haz tan bien, pero lo que no queremos exactamente al final es que quieres encontrar a este tipo, a este tipo, a este tipo y a este tipo y este tipo en la ciudad. Yo quiero tenerlo en un área y por ello usará la función mucha, que es hace apenas coincidente. Lo intenta. Es algo encaja en la fórmula. Si le cuadra con marchar voy a elegirlo por la zona, ¿no? Entonces, sí, eso es algo que necesitamos usar. Por lo que me gustaría que eso indexa ese partido. Y ahora tenemos que usar una expresión regular. Se trata de un alfarero. Como pueden ver aquí, tenemos un texto bastante bonito que analizamos pronto. Y el patrón parece que hay que usar los istas de barras invertidas, salpicaduras y dentro de él un compañero que se puede combinar de todos estos seres aquí y luego los modificadores. Entonces tengo que hacer algo así. Pero estas inclinaciones invertidas es pueden estar al lado de la otra porque entonces es un comentario. Entonces debería ser así. Y ahora cuando escriba por ejemplo A encontraré aquí cada A posible. Cuando hago algo así muy capaz y por ejemplo, resultado. Por lo que voy a tener un área dentro del resultado y puedo mostrarlo, Por ejemplo, en info HTML interno. Como pueden ver, sólo tenemos una A. A pesar de que tenemos a Goodman fuera de ellos, ¿Por qué? Porque mucho por defecto te va a encontrar sólo la primera ocurrencia. Y esto es algo bueno porque no va a perder tu tiempo, ¿ verdad? Entonces si quieres buscar más, tienes que usar un modificador. Aflac como ese g de global, buscando a través de toda la fuerza con las cosas así aquí, como puedes ver ahora, si pudiéramos encontrar todo A posible en nuestras fuerzas que tenemos a este tipo, este tipo, este tipo y este tipo, no sólo tenemos a estos tipo. ¿ Por qué? Porque es letra pequeña. Si no quieres,ya sabes, pensar ya sabes, si una lotería pequeña o es grande solo podemos añadir aquí una bandera como en sensible, lo que significa insensible a mayúsculas y minúsculas. No importa si su mayúscula o minúscula. De acuerdo, así que con escribiendo aquí una sola letra, solo conseguirías todas las cosas posibles que se verán así, ¿ verdad? Cada tipo 12 con Encontraremos aquí este 12 porque es sólo uno así. Pero ya sabes, mayoría de las veces no quieres encontrar cosas así, quieres encontrar patrón especial fuera de las cosas en tu calle. Por lo que hay muchas formas de hacer las cosas. Por ejemplo, puedes escribir punto, que significa y el carácter Así que si escribes un punto aquí, significa que encontraremos cualquier carácter posible. Y lo genial es que dividimos nuestra cuerda en mal. Eso tiene todos los personajes posibles en el área que se llama resultado y podemos, ya sabes, elegir también. Por ejemplo, el primero es un El segundo es dash on. Podríamos seguir bien? El cool es que ahora podemos, por ejemplo, unirnos a todos estos tipos usando la función que conocemos de la última lección y bomba. Tenemos a todos ellos con el brillante o algo que así este un solo personaje, sanguijuelas, carácter soltero. Fue mucho en un solo personaje, pero quiero decir exactamente, Hey, quiero un on entonces dash. Entonces ahora tenemos todas las opciones posibles donde hay una A y y guión y luego escuché querer tener un número, ¿ verdad? Pero no sabemos cuál es este número, y por ello, deberíamos usar algo así. Esto piensa mucho está en un solo carácter en un alcance de A a D, lo que significa, en conclusión, que si tomas algo así, 0 a 9, elegiría preguntado cualquier número. Entonces si escribo algo así como 0 a 9 y lo refresco, como pueden ver ahora tenemos el primer número después de un Así son cinco. Son cinco aquí, cinco aquí, cinco años y bueno, nueve. Ah, lo siento. Este tipo no era el de ese. Y ese no fue elegido porque tenemos que leyó, ¿ verdad? Entonces por eso así hemos llegado a nueve y cinco y 5559 Vale, así que funciona bien. Y me gustaría que toa tuviera aquí tantos números como él no. Entonces, ¿cómo hacerlo? Hemos llegado a sabios de hacer esta cosa marchas y una cuerda que contiene y o más ocurrencias fuera del personaje precedente. Es genial. Genial, ¿verdad? Porque podemos Queremos tener el personaje anterior, que es un número esta vez. ¿ Cómo el dinero? Una o más veces, como puedes ver Ahora nos hemos quitado a todos los chicos de aquí. Y cuando nosotros en los nuevos. Entonces, por ejemplo , también aparecerá aquí. Eso es simplemente impresionante, ¿verdad? Está bien. Por lo que también podemos hacerlo un poco diferente. Esta cosa puede ser reemplazada por coincidencias y una cadena que contenga una o más ocurrencias de la prisión en carácter. Entonces podríamos en lugar de escribir algo así, también podríamos escribir algo así. Y también puedes, en lugar de escribir algo así, usar este patrón especial, que se ve así. Y también significa lo mismo. Entonces esto significa lo mismo que esto. De acuerdo, hay muchas formas de hacer las cosas. Te los estoy mostrando porque algunas personas podrían usar algo diferente. No entenderás a otras personas, expresiones regulares, expresiones. Correcto. Entonces así es como hacemos lo que funciona. Entonces en este momento, podríamos elegir bonitas las opciones posibles como esa. ¿ Y si quisiera, por ejemplo, elegir, um, también a um, este tipo y a este tipo? Bueno, y todos ellos, ¿verdad? Hay muchas maneras de hacer cosas así. Por ejemplo, podríamos usar que adoptes bien cuando dijiste que todo va a aparecer porque es cualquier personaje. El problema es que es un personaje. También puede ser un personaje, por ejemplo, como para uh huh derecho, que cualquier personaje todo posible así A veces se quiere decir exactamente cuál queremos elegir. Entonces creamos El padre es así. Y decimos: Oye, Oye, no voy a correr. Yo también quiero algo así como, por ejemplo, Ha sh! Y eso es todo esto lo va a ver Ahora tenemos bien con caliente encendido con el guión. Funciona bien. Entonces para elegir esto todo esto, usamos el operador o donde está, como puedes ver aquí, también es muy genial, por ejemplo, para comprobar extensiones. Si hicimos algo así, J j p g o r g si era mucho o algo así. Por ejemplo, paisajista Jefe, el jefe es el mundo aquí, y él lo elegiría para que podamos comprobar exactamente si estos son una imagen o no. ¿ Verdad? Entonces no se puede, por ejemplo, salir cinco. No lo hará e irá a la derecha para que puedas elegir cosas como esa usando el operador o encendido. ¿ Y qué pasaría si quisiera elegir? También el punto? El problema es que realmente hacemos algo así. Volvería a elegir y el posible carácter. Si quieres usar un personaje que es una palabra clave en el naufragio. Espere X. Entonces, por ejemplo, si quieres usar los arados, el Asterix, el signo de interrogación en el se reparten en otras cosas como esa y lo quieres encontrar aquí y solo esta cosa. Debe usar el retroceso antes de encenderlo. Entonces encontrará el que interpretará. ¿ Es como un punto? Entonces si quieres encontrar sólo a los chicos, eso tiene bueno que yo haría algo así. Y esta Considine. Sí, funciona. Ahora sólo tengo a este tipo, ¿verdad? Entonces así funcionan las expresiones regulares de rack X. Vayamos a otras cosas. Aquí Tienes algo diosa llamada Asterix, y marcha y una cuerda que contiene cero o más ocurrencias del personaje anterior . Entonces hemos tenido algo así. Un nombre, Mark. Será mucho el chico sin él al inicio. Por lo que ARIC son naufragio Mark. Bueno, si va a ser minúscula, deberíamos usar la bandera en escritura insensible. Es necesario recordar al respecto y elegiría también un Marek Mark con el deporte. Poco. El problema es que también elegirá a los chicos que tiene buen hombre soy habilidad, ¿ verdad? Porque contiene cero o más ocurrencias. Entonces eso puede ser a veces un problema que quieras decir Hey, deben ser exactamente uno. ¿ Qué? No lo usarías de una manera que hicieras algo así. Cuando escribes un solo personaje, significa que tiene que estar ahí. Y debe ser solo un chico si usas el plus it con mucha cadena de anís que contenga una o más ocurrencias del personaje anterior. Por lo que conclusión de la misma, requiere corrector precedente al menos una vez. Entonces aquí, cero o más uno o más así cada vez Algo así como F a Plaza de it match fit y coincide gordo ¿verdad? Pero no coincide con FD porque tenemos que tener al menos una A esta cosa coincide y una cadena que contenga cero o una ocurrencias fuera del personaje presidente. Entonces si hicimos algo así como M y luego interrogación marcan bien, va a mucho Muy bien. Voy a destrozar a Mark y Maverick con este humo más pequeño y mayúsculas está bien, así que deck no necesita ser una M, pero puede ser, Pero puede haber más de una. Entonces hay una buena solución a algo así, ¿verdad? Y cada vez que algo así, coincide con cualquier cadena que contenga exactamente y ocurrencias del carácter anterior. Entonces si escribes cosas como esa z o.Y entonces a ello significa que, como tengo que ver aquí a chicos así es muy útil. Cuando se quiere revisar por ejemplo, un número de teléfono, ¿no? Se quiere decir algo así como el número de teléfono variable y, por ejemplo, en Polonia, su número de teléfono debería verse así. Um, dos números. Después números libres, números libres y tres números. No saben exactamente cómo se ve en tu país, ¿ verdad? Todos los países tienen cosas diferentes así. Pero oye, quiero ver dígitos gratis. Dígitos libres. Freedy it Y aquí dos dígitos derecha que es buena idea dedo del pie magia como esa marcha 11 número y quiero ver un dígito. Entonces hagámoslo así al dígito y quiero verlo. ¿ Cuántas veces? Dos veces. No menos ni más. Quiero ver dos veces y luego quiero ver un espacio como hacerlo Espacio. Un espacio es carácter blanco, ¿verdad? Por lo que voy a hacer como precio. Y luego quiero ver exactamente lo que quiero ver. Números libres. Por lo que será D y libre y en este lugar. Y luego quiero tener lo que d y libre y luego como espacio encendido y se reserva OPEP slash Bueno, por eso no quiero No me gusta usar las sesiones de espalda hermanas para algo que es más. Creo que es más claro cuando tú es peso muerto. ¿ Verdad? Por lo que 093 veces que el beck slash s luego 09 atrás tiempo libre espacio en entonces tenemos 09 tiempos libres. Entonces al hacer algo así, um, ya sabes, diciéndolo al resultado, te das cuenta de que lo tienes bien cuando hacemos algo mal. Entonces ejemplo como ese. Um bueno, está funcionando bien estado porque tú eliges, como ese tipo, ese tipo, ese tipo, y te llevas a ese tipo. Entonces tenemos que decir exactamente. Oye, tiene que partir de dos números y tiene punta del dedo del pie. Toda la fuerza tiene que terminar con números libres. Y ahora no funciona. Se puede ver, pero ¿esa la forma en que está funcionando? Bien. Por lo que has conseguido que tengas. Ahora, Um, no tienes aviso de que podemos usar otras cosas como esa. El carácter así, lo que significa que hay que tener al final de la cadena completa, hace que el patrón busque sólo mucho. Sólo cadena de que está terminando con algo así, ¿verdad? Tiene que terminar. Eso es lo que es muy útil en algo así. De acuerdo, entonces vamos a otra alimentación. Se puede mucho anestésico que contiene y o más ocurrencias del personaje anterior. Porque a veces sabes Bueno, esto es lo mismo que ese tipo, ¿ verdad? Um y funciona igual. El problema es que al usar esto, se puede usar la arteria única para que coincida con cualquier cadena que contenga muchas Molly y ocurrencias y Maxie, Molly y ocurrencias apagadas. Presentando corregida. Se puede decir, Hey, puede haber libre hasta 10 o 12 seis. Dejar si caracteres como ese anteriores caracteres. Eso es muy útil. ¿ Verdad? Entonces aquí está esa cosa, verdad. ¿ Nos enteramos de este tipo? Sólo mucho es el comienzo de una cuerda por lo que fórmula así coincidirá con el agujero de la cubierta . Pero no va a mucho en el conjunto porque todo su ahí está ahora mismo en medio de esta cosa no está en el inicio aquí. Cuando escriba cosas como G y dólar, mucho sólo cadena que termina con el carácter G. De acuerdo, si no termina con G, no hagas magia en absoluto. Cuando haces algo así, marcha y sale del personaje y encerrado en el personaje dicho así y piensa como es era un solo personaje, Demasiado Así por ejemplo, si escribes algo como un y luego b nt Ver, tienes BMT aquí dentro en gran parte de ABC y 80 c pero no hace mucho un btc o lo que sea . Ya sabes, si tienes más de un personaje que no lo igualó, cierto, mucho solo este tipo tampoco es mucho, ya sabes, por ejemplo, una llave. Ver a la derecha. No sabemos mucho estas cosas. Ah, cuando te gusta así. Entonces si años algo así lo siento así significa que estás excluyendo estar vacío tanto lo es todo. Ex aceptan ABC 80 c por lo que coincide con un D. C, . clave C y otras otras otras cosas como esa. Cuando lo haces así, ya hablamos de ello que usas el guión dentro. Será mucho cualquier número dentro de estos y un carácter de caso pequeño y un carácter de mayúsculas cuando se utiliza el peso muerto con mucho cualquier carácter cuando se utiliza con mucho cualquier carácter y el y un guión bajo. Entonces ya sabes, porque a veces no quieres usar el modificador de flak insensible en todas partes, correcto, porque a veces es que quieres ser, tener su caso sensible en algunas situaciones, pero tú voluntad en un solo lugar del patrón de parte. Se quiere tener su caso en ciudad, por ejemplo, ¿ verdad? Entonces será buena idea usar el cualquier personaje algo así, esa búsqueda en un año que comemos mucho como cada personaje excepto ABC. Andy, ¿verdad? Por lo que también sabemos aprendió de este tipo. Este personaje permite interpretar caracteres reservados como, por ejemplo, el punto Asterix y otras cosas así como corrector para buscar dedo del pie derecho a buscar. Por lo que la fórmula f y luego la búsqueda de atrás y Asterix volver a este tipo de accidentes. Boxeadores! Asteroide! Bueno, imagina que F ya sabes también puedes usar el algo así y era seguro toma. Entonces si haces algo así por ejemplo, eso son cosas muy útiles a veces si haces algo así en, ¿hiciste algo así? Significa que estás salvando el en un ojo en ti estás viniendo desde 1234 Y entonces te complacientes en cualquier lugar no lo harás más tarde. Por lo que cambiaría totalmente cómo se va a ver. Entonces si quieres elegir por ejemplo nuestra cabaña ahora escribiría Arkady, AJ y Haye. Yo quiero que sean los cinco ahora. Entonces quería ser un buen comienzo, así que escribiría aquí cinco, ¿no? Si quiero estar en el medio, va a bahía, por ejemplo en el medio. Ese es el solo poderoso, muy poderoso Y como puedes ver ahora también sabes cómo reemplaza a trabajar ¿verdad? También hay algo como que coincidirá con los huevos solo si por qué está después de la X. Así que tienes, por ejemplo, nombres y apellidos y solo quieres elegir. Ah sólo quiero elegir al Eric que está teniendo al mundo nuestro truco después de él. Entonces también lo hacemos quitamos en Estos son unos geniales estos. No se quitará porque tiene a Novak de repente. Y se pensó que esta cosa funciona igual que la anterior. Pero va a financiar. Es sólo que no hay por qué. Y sobre esto aprendimos al inicio también nos han importado que esta prueba cosas que es muy útil porque se puede decir, Hey, si coincide, entonces sí, es correcto. Entonces creo que es una buena idea usar algo así como una prueba para cosas como comprobar GIF si el número de teléfono, por ejemplo, es correcto. Entonces si lo hacemos de esa manera, como pueden ver resultó en encontrar cosa, no queremos decir este número ahora mismo. Solo queremos decir si el número es correcto, así que para hacerlo, hay que escribir las fórmulas así. Entonces tienes que usar el punto que test y la cadena que quieres probar. Por ejemplo, un número telefónico y el resultado esta vez por lo que ese es resultado será verdadero o falso. Entonces como puedes ver ahora, es cierto cuando hacemos algo mal así. Es falso, ¿verdad? Cuando haces algo así, es falso. puede, por supuesto, es una buena idea hacer ejercicio e intentar pensar cómo hacerlo Así también puedes empatar tu número así, ¿ verdad? Algunas personas podrían querer permitir. También escribiendo sin espaciado, especias, el número de teléfono. Hay una buena idea permitir que la gente haga cosas así. Eso es un ejercicio para ti ahora mismo. En la siguiente lección, hablamos de la función exacta. Esa es sólo esa lección, Muchas gracias. 53. Método de exec: Hola Hoy vamos a hablar de la función exacta. Bueno, compárelo con el 1 de marzo. Como sabemos, la función de marzo solo está revisando el patrón. Y si encaja y dos distintivos, va a seleccionar cosas que son que la salida derecha está funcionando igual. Pero hay una pequeña diferencia. El primero es que tenemos que crear una variable temporal para el naufragio. Exp Así que tenemos que hacer algo así. Y ahora deberíamos hacer Rag X. Entonces deberíamos precisar sobre esta expresión regular, esa cuerda que queremos buscarla. De acuerdo, entonces cuando lo hacemos así, como se puede ver como resultado, tenemos un 0.51. Entonces estos chicos, vamos a cambiarlo. Entonces vamos a buscar Bueno, Annie y el tipo de chico, Bueno, podemos tener algún personaje, ¿ verdad? Y como pueden ver, tenemos un guión 565. Pero, hey, tenemos el lejano global te flak por qué de alguna manera no conseguimos todos los demás bien? Por ejemplo, este tipo como por ejemplo, días esto esta en esto. ¿ Por qué pasó lo que pasó? Bueno, el problema es que volverá siempre en el único resultado. Cuando lo volvemos a hacer, puedes ver ahora tenemos buenos 50 gratis Cuando lo vuelven a hacer, es hash 58 y luego un 0.51. Entonces tenemos que ejecutarlo tantas veces como haya resultado, ¿ verdad? Uh huh. Cuando no hay nada. Entonces después de este tipo, Como puedes ver, simplemente no hay nada. No hay nada que se llame No. Está bien. Y no, en condición significa también caer. Por lo que se dejó de correr. Y puedes usar esto para, por ejemplo, para algo así. Crearemos una flecha variable temporal. Y si bien podemos asignar un nuevo valor usando este derecho, vamos a sumar para resultado el valor que viene de aquí. Y como pueden ver ahora, tenemos todos estos valores. Y ahora puedes hacer lo que queramos con esto con estos valores, justo en algo así es útil porque ahora mismo puedes saber, por ejemplo, por ejemplo, dedo del pie cada uno de estos desarrollos puedes en algo que sabes que puedes, por ejemplo, mezclarlo con otro mal. Se puede, por ejemplo, excluir algo que no quieras lo que la mayoría de las veces se puede excluir todo clave, ¿ verdad? Pero lo genial es que puedes hacerlo en el momento en que estás extrayendo cosas de la derecha Algunos. Por ejemplo, Si estás extrayendo y después, si puedes decir, Oye, quiero en los artículos gratis así que si puedo hacer algo yo cero Y si es más bajo que libre eran mayores que Free Dan break así que yo pueden subirse a los artículos gratis así. Está bien, cierto. Um yo plus plus rezar incriminación debería estar aquí. Y como pueden ver, tenemos libertad extraída sólo gratis. Por lo que no estamos perdiendo derechos de memoria. No hemos extraído todas las opciones posibles que se ajustan a este patrón en ah start, correcto. Hay que recordar que un uso no usa lo global. Sólo mostrará siempre al primer tipo. ¿ Verdad? Por lo que hay que utilizar las FARC globales para obtener todas las opciones posibles. Y eso es realmente útil como puedes ver para extraer y tener el control. Entonces esto por qué también ha llegado aquí y advirtiendo bien? Advertencia no es una Advertencia Árabe es como, Oye , ya sabes, puede haber un error. la verdad es que no hay héroe. Pero la mayoría de las veces cuando estás haciendo cosas así, puede ser una época, ¿ verdad? Porque asignar es muy similar a comparar cosas como la derecha. Por lo que también podrías hacer algo así. ¿ Por qué? No es igual saber. Entonces podemos ejecutarlo, ¿verdad? ¿ Andi? Y está funcionando para lo mismo. Al igual que lo hacemos de esa manera. Entonces, um, esto es sólo un atajo. Cómo puedes montarlo. Podría ser una oreja. O por eso tenemos aquí una advertencia. ¿ Verdad? Pero todo está bien. ¿ De acuerdo? Sólo hay esa lección. Muchas gracias. 54. Verificar contraseña: Hola. En esta lección, capacitaremos a las fórmulas de expresión regular en el ejemplo práctico. Verificará si el pasaporte es fuerte. O tal vez no es tan fuerte como debería ser, así que no debemos pasarlo bien? Entonces, ¿cómo hacer cosas así en JavaScript? Usando las expresiones regulares. En primer lugar, debemos pensar en cuál del método debemos usar. Creo que éste es bueno porque acabamos de regresar verdadero o cae. Está bien, no lo es. Por lo que necesitamos para ello una variable de fórmula justo donde podamos almacenarla. Y aquí lo tendríamos. Necesitamos una contraseña. Tan bueno, eso es, por ejemplo al principio, pesado la variable temporal. Posteriormente, lo tomaremos del HTML cinco. Por lo que queremos probar. Queremos para sin dedo del pie. Prueba la contraseña, correcto, y quiere que el resultado de la misma se ponga a cenar. Html off info. Entonces ahora mismo se ha terminado porque, oye, tenemos la especia aquí, y aquí también hay espacio, así que todo funciona bien. De acuerdo, entonces vamos a asumir cómo debe ser nuestro pasaporte. Creo que debe ser al menos ocho o tal vez siete personajes de largo derecho, Entonces, ¿cómo hacerlo? No debería ser tan difícil porque sólo tenemos que trabajar. Tener algún personaje posible, ¿verdad? No importa si es realmente no conozco personaje así. Puedes usar cosas así en el pasaporte. Permitir a las personas que usan los's. No hace falta que sea, ya sabes, ABC el único así permite usar cualquier personaje porque sería solo que lo hagas aún más fuerte. Más fuerte, ¿verdad? Entonces usemos ese punto pero no queremos en el único personaje, pero más de ellos al menos ocho de ellos, ¿ verdad? Por lo que hace que una persona tipo dedo del pie aquí, al menos ocho caracteres, como puedes ver ahora hemos forzado así 1234567 a. Y ahora funciona bien. Pero por supuesto, posible así es muy débil. Entonces, ¿cómo cambiar? Deberíamos hacer este patrón para tener en lista. Por ejemplo, un personaje que es minúscula quería su mayúscula, ¿ verdad? Entonces, ¿cómo hacerlo? Vayamos aquí, y tenemos aquí algo así con mucho X sólo si por qué está después de los huevos bob los resultados. Otro usuario a la deriva. Cuando no uses esto, será así. Tienes que tener en la cosa que está tras ella en el patrón después de ella. Entonces en nuestra situación, el patrón que sigue es este Tienes que tener la cosa que está dentro de aquí. De acuerdo, Entonces si hacemos algo así como esa bomba, bomba y luego el signo de interrogación y luego llama. Y ahora digo, Hey, quiero tener, por ejemplo, un personaje pequeño. Correcto. Entonces ahora, como puedes ver, es falso. Pero cuando somos un personaje pequeño aquí, va a funcionar. Bien. El problema es que cuando lo tengo así, el personaje así debe estar al inicio, ¿no? No queremos un personaje con inicio en camino como tenerlo también aquí. Ahora vamos a trabajar bien. Pero cuando quitamos al primer tipo como puedes ver, tenemos buena culpa. Entonces, ¿cómo resolver el dedo del pie un problema así? Podríamos decir algo así. Oye, la verdad es que aquí puede haber cualquier personaje, pero no hace falta que esté aquí para nada. El asterisco como se puede ver mucho es cualquier cadena que contenga cero o más ocurrencias del carácter anterior. Entonces eso significa cualquier personaje. Por lo que este cualquier personaje puede estar aquí. Oh, no hace falta que esté aquí. ¿ Verdad? Y si está aquí, Está bien, está bien. Y luego puede haber algo como que no lo sepan, ¿ verdad? Entonces eso es algo que eso hace tener un CI y un personaje. Y después de cualquiera puede estar en algún lugar, por ejemplo, el, um el pequeño personaje. Correcto. Entonces eso es muy son algunos por ello, Como puedes ver ahora tenemos verdad. Entonces porque fuera de la solución así, podemos atar, como puedes ver, al pequeño personaje en cualquier lugar que necesite con el trabajo. Bien. Entonces ahora sólo necesitamos cobre dos veces. Y lo que también comemos ahí mayúsculas al menos una vez. Y también queremos lo que tú también quieres un dígito. Entonces cero esta noche. Y por ello, como se puede ver ahora, es falso. Pero cuando agregamos, por ejemplo, mayúsculas, funcionará Fine. Entonces, sí, esta es una contraseña fuerte porque tienes mayúsculas. Tenemos estuche pequeño. Tenemos el número, y también es por lo menos un dígito. Entonces va a funcionar bien. También puedes usar alguna otra ciencia de, por ejemplo, un dólar. Recuerda, no dejes de usar algo así porque solo hace que la contraseña de las personas sea más fuerte. Y ya sabes, si alguien está usando la misma contraseña en todas partes, lo cual no es la mejor idea sobre si está usando un personaje como ese y no podrá usar un personaje como ese en tu página web, lo haría solo déjalo, así que permítale usar una salida a bolsa posible. Ah, posible problema de carácter. A lo mejor hasta los seis personajes es suficiente. Porque la verdad es que la contraseña, si es bastante larga, va a ser fuerte siempre y cuando la tengas debidamente protegida en el lado del servidor. De acuerdo, si estás usando vendidas y otras cosas así. Pero este es un tema para los autos PHP. De acuerdo, así que esto es solo, ya sabes, tiene antes de enviar el posible derecho s Así que tenemos aquí Pasaporte. Eso fue Ah, eso fue, ya sabes, arrancando la variable temporal. Vamos ahora a crear. Y a las importaciones el primer insumo que iniciará el pasaporte. Y segundo que nos abotonemos, eso va a estar probando todas estas cosas, ¿no? Entonces, solo copiemos este fink. Y ahora saquemos de mi pasaporte formulario que estará iniciando la verruga pops variable. Correcto, Así que no necesitamos más aquí. Y también necesitamos bastón que la prueba del cráneo. Así que así. Y cuando alguien haga clic en test, quiere invocar una función que va a probar e informar lo que está pasando. Por lo que la fórmula va a ser probada por la contraseña. Eso debe ser cada vez comprobado después de hacer clic, porque puede cambiar, ¿ verdad? No debe estar en el cargado en cuando se carga la ventana, correcto, Deberíamos sacar el valor del pasaporte. No sólo la contraseña es una entrada, y queremos probar su valor con esta fórmula. Entonces sí, debería funcionar Bien. Pero vamos con el propósito de la prueba. Cambiémoslo a texto para que veamos que sé en qué tiempo estoy pensando. Entonces, sí, tenemos falso cuando tenemos letra grande y número ah. Como pueden ver, no tenemos verdad. Cuando es un poco corto, es falso. Por lo que podemos usar información como esa también en nuestro guión, podríamos. Por ejemplo, en lugar del botón, podríamos hacernos un poco. Por lo que permite a los usuarios enviar. Tomemos y hasta aquí. Y queremos al inicio, prevenir el incumplimiento. Ah, evento. Entonces no queremos que se envíe, ¿verdad? No revisará las cosas primero. Entonces estamos rastreando cosas. Queremos usar este resultado fuera de esta fórmula formalmente y si la fórmula está bien, entonces sí, pero posiblemente está Ok. Se desea enviar nuestro formulario, Así que queremos obtener nuestro formulario y queremos enviarlo. Correcto. Entonces como pueden ver ahora no se va a someter, sino bomba que se sometió. ¿ Verdad? Porque la contraseña es ahora fuerte. Pero de lo contrario, si algo anda mal, quiero informar a nuestro usuario. Entonces vamos hoy en cuarto, tú vas a Dana, llegas a ellos y yo digo que no. Tu contraseña no es lo suficientemente fuerte. Por supuesto que se podría comprobar. Ya sabes, podrías registrarte. Esta es esta fórmula, ¿verdad? Por ejemplo, comprobemos primero. Si hay un número Oh, y entonces si hay al menos seis caracteres y luego si hay uno el personaje así de grande y luego si hay ah minúsculo y debes hacerlo como ejercicio. ¿ Conoces uno por uno y luego informas a tu usuario que qué? Qué exactamente hizo mal en su posible. ¿ Verdad? Entonces estos un ejercicio para ti para esta lección? Si tienes algún problema, solo pregúntale. Eso es todo. Muchas gracias. 55. Fecha: Hola. Habría magnetizar cuando necesitamos manipular el tiempo en JavaScript. Y para ello hay un objeto específico objeto especial que se llama fecha Object Help! El nombre se re sugiriendo el dedo este dia haciéndolo tratemos de aprender todos los asuntos que hay dentro. De acuerdo, hay leyes fuera de ellos y te voy a mostrar la más importante. Te mostraré cómo manipular el tiempo usando este objeto. Pero en primer lugar, preguntémonos cuándo se necesitaría algo así. Por ejemplo, puedes mostrar el reloj en tu sitio web. Ya sabes, puedes decir que el tiempo que es ahora es por ejemplo, a las 10 de la mañana o algo así. También se puede, por ejemplo, decir el usuario. ¿ Cuánto tiempo? ¿ Cuántos? Cuánto tiempo se necesita para que algo suceda, por ejemplo, correcto, Así que hay muchas situaciones como esa y se puede utilizar para el objeto de fecha. Pero antes de entrar en ello, me gustaría también informarles que el objeto de fecha no les va a dar el tiempo adecuado . Te va a dar el tiempo que tu usuario tiene termina su configuración bien en la configuración de windows . Entonces no recuerdas que no deberías pensar en la fecha aquí como un día que es así de verdad, ¿ verdad? Pero para situaciones como un reloj, como, por ejemplo, decir cuánto tiempo t algo ha hecho algo así es muy útil. Y de alguna manera, puedes entrar en las variables de script Java desde PHP, por ejemplo. ¿ Verdad? Entonces estamos usando, por ejemplo, un Jack, así s te será útil de todos modos, Puedes crear, por ejemplo, un juego donde quieras bajar cuando algo esté terminado de construir o algo así. Algo s O fecha es realmente útil. De acuerdo, Entonces para crear un objeto de fecha, sólo se crea una variable, por ejemplo hoy y tipos de noche Nueva fecha. Y no podemos asignar a, por ejemplo, en el HTML hoy y cuando lo refresquemos. Como pueden ver, hoy en día tenemos bien aquí. Por lo que tenemos el 11 de mayo de 2015. Es ahora mismo la hora 2028 4 Y como pueden ver, estoy en la zona horaria GMT. Entonces tengo eso más dos aquí así que probablemente se fue por estos. Tienes que decir la diferencia. Ya sabes los resultados aquí en el especial aquí porque soy de Polonia. Entonces esta es mi zona horaria. Pero la mayoría de las veces no quieres dedo del pie ver cosas parecidas a las que te gustaría ver en lugar de a mi mamá. Lunes, ¿verdad? Te gustaría ver el nombre completo. Por ejemplo. Te gustaría formalmente lo grande diferente. Pronto te mostraré cómo hacerlo. Por ejemplo, usar esto importa, ¿verdad? Entonces, por ejemplo, te gusta tener un momento de día libre para poder mostrar algo tipos de pensamiento hoy. Eso y me gustaría conseguir sólo mes, ¿no? Esto podría llegar con seguridad aquí. Tipo para por altura. Mayo es realmente el quinto mes, ¿no? Es enero, febrero, marzo, abril mayo. Entonces, ¿para qué tenemos aquí? Porque estás contando desde 00 es para ginebra. El 1 de enero es para febrero. De acuerdo, entonces es muy importante que si quieres morir lamentándote de miedo, deberías hacer algo así, verdad? Entonces este es un mes verdadero, y se podría, por ejemplo, a algo así como un mes en adelante, entonces me gustaría, por ejemplo, ver un día. Por lo que hoy consigue fecha. Devolvimos la fecha actual. Y me gustaría mostrarle también al usuario el año completo. Entonces una especia. Y hoy, año completo. Bueno, tal vez corte. Como puedes ver ahora tenemos una cita aquí. Eso es correcto. Todo está funcionando bien. Y puedes hacer que se vea como lo que quieras, verdad? Podría usarlo en su lugar. Off mamá. Pocos fríos, por ejemplo. Stroh alguien. ¿ Cuántas horas son ahora? ¿ Cuántos minutos? Segundos 2 de Mayo. Por lo que estos asuntos son bastante fáciles. Puedes solo por mi el resultado al usuario como la forma que quieras, verdad? El problema es que bueno, todavía tenemos aquí. Cinco. Y si quisiera ver aquí mayo completo y otras cosas así, ¿ verdad? Ah, no quiero quiero que sea visible en fuerza. Podría hacer unas funciones especiales. Entonces, por ejemplo, podría crear una función que, ah, crearía ah, nombre completo de aspersión. Entonces, por ejemplo, consigue Sprink mes del número algo así. Y aquí nos llevaremos una discusión. El número El número de mes derecho Número de mes ahora podemos crear un Vrabel temporal que arrancamos el nombre todo más así que crearía algo que meses después. Y voy a crear una vía aérea para poder tomar algunos, como Enero Febrero Marzo a quién? Se puede, John July. Ahora vamos a hacer un entrar aquí, por lo que es más fácil leer nuestro rotador. ¿ Verdad? Belleza General. Mayo junio, julio o invitado agosto, um, septiembre, octubre, noviembre en diciembre escribe ese número. Entonces tenemos ahora, aquí, aquí, empezar todos los meses, ¿no? Y ahora te gusta regresar por estos números el mes apropiado, ¿no? Entonces si lo tengo de esa manera Así, por ejemplo, cuando me dieron cadena de la mayoría número como este algo que y escribo aquí, por ejemplo cero me gustaría ver enero. Entonces, ¿cómo hacerlo? Yo sólo regresaría mi mes. 00 está aquí. Entonces acabas de copiar aquí. Ya puedes ver ahora tenemos buen general, ¿verdad? Y podemos enviar aquí, por ejemplo, hoy. Consigue mes en. Vemos instancias que hoy es mayo y funciona bien como ejercicio. Deberías hacer lo mismo para el día libre de la semana porque Bueno, es una buena idea practicar, verdad, verdad, Y el Día de la Puerta de Metal está regresando el día libre de la semana. Pero hay que recordar, Ten cuidado. Estás contando desde cero, y el primer día no es lunes. Es domingo. Ejercicio tan decente para ti. Si tienes algún problema, solo crea una discusión. Te voy a tener. Y ahora tratemos de hacerlo un poco mejor de manera porque ya sabes, me gusta tener estos autos un poco más pro way. Mira, ahora mismo tenemos que invocar la función y tenemos que mandar su siempre capaz y llegar al bajarse. Aquí hay mucho trabajo por hacer, verdad? Quizás podrías crearlos antes de la llegada y guardarlo, por ejemplo, aquí, el mes en todos los meses o algo así. Pero esto es problema Ártico. ¿ Qué mejor si ya tuviéramos función, eso te daría el mes actual en cadena. Bueno, ya sabes, los creadores fuera de estas funciones no lo pensaron. ¿ Verdad? Pero podría agregar de alguna manera a la función de fecha, constructor, algo que él como puedas. Espero que ya hayan visto la lección de prototipo sobre el prototipo. ¿ De acuerdo? Y si tuviste tu cielo en el agua, es así que vamos, hazlo Porque podemos usar el prototipo. Podemos hacer algo así como prototipo, y ahora puedes crear nuestras propias funciones para que puedas obtener mes en fuerza y podemos crear nuestra propia función aquí que nosotros que no podemos ser ninguna Isra ejecutada así. Podemos. Entonces hay algo así hoy. Consigue mes en fuerza y eso es todo. Sólo tenemos que volver ahora, el buen mes. Por lo que necesitamos crear un temporal capaz como aquí. Pero ahora sólo necesitamos devolver lo que re meses de ciudad. Y ahora necesitamos aquí. Zero Anto libre o bien, la actual tanto La jugada actual que puedes obtener de este mes obtener, ¿ verdad? Será cero o uno o dos o libre el actual. Esto se va a referir al día actual. Eso es Ah bien. Que la variable está usando clave, ¿verdad? La variable actual que va a invocar la disfunción. Entonces en nuestra situación es esta variable aquí? Tenemos de este lugar este mes, ¿verdad? Entonces cuando se refresca se puede ver que tenemos mayo, Pero es más fácil a los años. Podemos ver al instante que este método está conectado con el día. Entonces simplemente genial, ¿verdad? Para que puedas crear tus propios métodos. Puedes agregarlos fácilmente para hacer objetos actuales. Puedes extenderlos por tus funciones. Eso es poderoso, ¿no? De acuerdo, así que ahora intentemos, ya sabes, ver un poco más y encontramos el objeto de datos. ¿ Somos tipo? Ya que pienso como hoy, la cadena de tiempo local, ¿qué pasaría? Como pueden ver, tenemos Bueno. Ahora el tiempo. Eso es genial. Tenemos hasta ustedes horas, minutos y segundos. Pero ya sabes, esta es la cadena de tiempo de bloqueo. ¿ Qué significa que si en uno de los muchos países es un amigo un poco diferente que el navegador web podría interpretar, sería diferente cuando el del país podría interpretarlo de una manera un poco diferente. Entonces esta cosa se verá un poco diferente. De acuerdo, entonces es fuerte escuchar el Firefox cuando corremos. Por ejemplo, las fechas locales problema de bebidas. Bueno, en mi país, usted más tiempo tipa días que meses. Entonces año como puedes ver estos, así es como mostramos a la gente más tiempo nuestras fechas. Está bien, pero probablemente en tu país. Es diferente. Son más días y después años, tal vez alguien que algunas personas están usando aquí en su lugar, fuera del 5 de mayo o algo así. Esta cosa puede devolver al hombre y cosas diferentes en muchos navegadores web diferentes y otras cosas así. El tiempo es más tiempo re presentado de la misma manera, pero esto pensar y lucir diferente en muchos países diferentes. Pero a veces esto es lo que quieres, verdad? Quieres apoyar a todos los países y quieres sentirlos bien en otros lugares. Pero, ya sabes, esto sólo va a verse diferente en alguna vez un país o en cada navegador Web. También puede diferente. Está bien por ello. Se ven igual a veces. ¿ Verdad? Entonces aquí tienes también a cadena local que está conectando ambas opciones. Andi. Bueno, el menos grande. Ahora él Como puedes ver, tenemos algo llamado se llama Método. Un disco configurando la fecha se puede cambiar fácilmente. El día a algunos otros días de descanso ejemplo. Yo quiero fijar la fecha a la nueva que quiero conseguir hoy. Eso y quiero añadir, por ejemplo, un día y por ello. Como se puede ver ahora no nos han hecho 11 sino 12 de mayo. ¿ Verdad? Entonces podemos ver enviado aquí al dicho día muerto y porque enviamos el mismo día como aquí y tuvimos ese, tenemos 12 ¿verdad? Entonces va a funcionar así. También puedes usar el tiempo establecido. Ese es el momento va a funcionar, como, ya sabes, conseguir tiempo, método. Um, consigue tiempo. Método está devolviendo el tiempo real en muchos segundos. Contando desde los primeros años de enero ya. Eso fue en la policía. Está bien. Uh, a partir del 1 de enero de 1919 70 año, no importa. ¿ De verdad qué? Esto aquí Porque, ya sabes, acaban de decidir decir que debe venir de este lugar y es muy útil. Es muy útil porque ahora se puede subestructurar por ejemplo, la fecha que estos cinco días a partir de ahora a partir de las fechas que es hoy y se puede ver exactamente cómo maney milisegundos tiene poderes y se puede usar información como esa porque se puede, por ejemplo, dividir milisegundos por 1000 y luego tienes segundos, verdad? Si divides segundos por 60 tienes dos minutos. Cuando divides minutos por 60 tienes horas. Entonces eso es eso. Eso es ver ver cosas muy útiles como esa para que podamos usar el tiempo establecido, sus minutos. Otros, como, dichas horas establece minutos que segundos métodos que puedes usar así. Pero hay que recordar que estás afectando estos meta exactamente a la derecha. Entonces si quisieras crear mañana muy capaz y te gustaría, por ejemplo, crear por ejemplo, una nueva fecha que esta realmente mañana puedes usar otros constructores para el constructor de función de fecha . De acuerdo, puedes, por ejemplo, simplemente yo segundo. Entonces podríamos usar por ejemplo hoy y ahora conseguir tiempo, ¿ verdad? Y quisiera agregar aquí cuántos milisegundos a estos Porque cuando iba a ver ahora mañana igual a hoy, ¿ verdad? Pero cuando agrego aquí, por ejemplo, nuestro gran número, como pueden ver, está cambiando el cambio de belleza aquí en nueve horas porque es en milisegundos. Por lo que este debería ser gran número. Para que podamos adherir. Por ejemplo, un día cómo agregar un día un día es de 1000 milisegundos multiplicados por 16 es ahora qué, 60 segundos. Yo quiero tener. No tengo 60 segundos. No en un minuto. Yo quiero tener 60 minutos, que es de una hora. Entonces ahora va a ser a una hora ya puedes ver Y cuando lo multiplicemos de nuevo por 24 tendremos un día para que puedas sumar fácil grabando algo así algún día, ¿ verdad? Y tú lo tienes bien. Ahora mañana aquí. Y cuando haces algo así por ejemplo a moral menos Hoy te darás cuenta de que hemos llegado aquí en milisegundos el día completo y podemos usar información como esa para comprobar cómo cómo cuando los segundos tienen manchas de una vez a otra vez Si tú quieren ver ningún daño en los segundos ha pasado de Ah, ya sabes que este lugar para exhibir tomó esta vez sólo se puede dividir por 1000 on. Entonces no tienes buenos segundos cuando vuelves a dividirte. ¿ Por qué? Por ejemplo 60 tienes ahora minutos Cuando vuelvas a dividir tendrás ah horas así que horas y ahora ganando dividen por 24 tendrías días. De acuerdo, para que puedas usar información así. Es fácil ver cómo minutos de manera se necesita, Por ejemplo, llegar de este momento a este tiempo también hay otros constructores. lo que puedes usar, por ejemplo, nueva fecha y puedes escribir año, mes y día para que puedas crear variable mañana como esa nueva murió y podrías conseguir hoy que te den oído completo hoy que se ponen mes en hoy que se ponen fecha y más uno y nos dará el mismo resultado. Pero como pueden ver, tenemos aquí el pequeño Bueno, no, no, el mismo resultado exactamente que agregamos un día. Pero ya sabes cuando hacemos algo así mañana que bueno, mañana verás que tenemos que usar ellos 12 de mayo. Pero tienes aquí tiempo 0000 porque no especificamos minutos segundos en muchos segundos, solo primero para tus argumentos se requieren, puedes agregar más de ellos, así que tendrías que teclear get our, get means get me segundos y todo va a funcionar Bien. Pero es sólo un montón de trabajo de guerra, ¿verdad? Creo que esta es mejor manera de hacerlo. ¿ Pero sabes algo? Se quiere lograr cosas de padre para que esa sea la forma en que se quiere hacerlo. Está bien. Entonces podemos hacerlo de esa manera. Um, solo hay muchas maneras en que puedes hacer muchas cosas como esa. También puedes crear mañana, por ejemplo, como esa nueva fecha. Y puedes simplemente escribir aquí la cadena de días. Pero tienes remolque Mantén así al primero. Vale, tienes que quedarte así con el primero. Tienes que empatar a Pierre. En primer lugar, el año Así por ejemplo, 2000 sentir Ah, 50. Y ahora el mes. Entonces es mi Y ahora el día. Entonces son 11 y ahora tenemos 11. Yo quiero tenerlo mañana. Entonces ahora son 12. Sí, está funcionando bien. Entonces si quieres, por ejemplo, por ejemplo, crear un pensamiento met que volvemos conseguir por fecha de mercado la fecha que solo necesitas dedo del pie volver aquí, ¿ verdad? El valor que desea mostrar a la gente exactamente en su sitio web. Y luego puedes usar estos métodos con los objetos de fecha Y creo que esa es la forma más cool . Y creo que debes hacerlo es un acceso. Acabo de regresar aquí de la forma en que quieres tener gente en tu página web. Ve tu tiempo. Está bien. Que estos perspicacia, el objeto así. Eso es algo que no te agradece mucho. 56. Reloj con objeto de fecha: Hola. Vamos a probar las pujas Un objeto de fecha mediante la creación, por ejemplo, Ocllock. Sí, Club de Contabilidad. A veces es útil tener algo así en tu página web. Correcto, Así que el usuario puede ver exactamente qué hora es. No. Entonces, ¿cómo hacer algo grandioso? Bueno, podríamos hacerlo de una manera un poco más fácil, pero yo solo creando algunas variables función que contará con otras cosas como esa. Pero lo haremos un auto grande. Hagámoslo por hermano hermoso profesional de distancia. Entonces tenemos todo en un solo lugar. Entonces significa que vamos a crear un constructor de funciones como, por ejemplo, eso. De acuerdo, entonces vamos a crear un constructor de funciones, lo que significa que ahora podemos crear, por ejemplo, siempre capaz de reloj y podemos hacer algo nuevo reloj. Yo quisiera poder mandar su un manejador de limón que podré mostrarle a su cocinero. Correcto. Por lo que me gustaría mandar por aquí. Entonces el manejador de elementos y me gustaría tenerlo asignado en algún lugar aquí. Por lo que me gustaría crearlo y propiedad para este elemento derecho de clase, handler y me gusta asignar aquí manejador de elementos, que esto te envió bien así. De acuerdo, entonces ahora cuando lo tengas aquí, podemos Nos gustaría también arrancar el reloj. Por lo que me gustaría crear una función de que va a iniciarla. De acuerdo, algunas mujeres lo hacen. A mí me gustaría ver todo jugando bien. Entonces, ¿cómo necesitábamos crear una función de inicio que tenga inicio todas estas cosas bien en qué? Debería pensar que debería empezar a contar. Entonces, ¿cómo contar? Creo que deberíamos venir cada segundo, por lo que deberíamos involucrarnos como establecido en terrible función. Está bien, establece el intervalo. Y eso va a intervalos de Irán. Si no sabes lo que estos conocieron, por favor ve a la escucha cuando estoy hablando de ellos, acuerdo? Es donde estoy hablando del set de hasta últimas lecciones fuera de pares. Por lo que establecer terrible función es muy nuevo aquí, y queremos Ron que cada segundo frito. Pero lo que queremos correr. Vamos a crear si eres una función anónima que ejecutará una función que va a ser en segundos. De acuerdo, así que vamos a crear en este punto en la segunda función, eso va a segundos del pie nuestra fecha real. Por lo que la fecha real debe ser también la fecha real de la propiedad. Y podemos hacer cosas como nueva fecha justo en Dwell. También queremos, por ejemplo, método que va a ser, por ejemplo, el manejador de elementos de actualización. Contador. Por lo que actualizará el contenido fuera de los apagados 11 segundos. Por lo que también podría llamarlo set element handler, por ejemplo. Correcto. Pero queremos actualizar exactamente al contador. Entonces creo que esta cosa del bebé mejor nombrando para ello la función. Y queremos actualizar con este elemento de método, cazador. Por lo que queremos ir a este cazador de elementos ese HTML interno y actualizado con las fechas reales de este ese día real. ¿ Verdad? Entonces cuando no necesitamos nada pasa porque no hay materia ejecutándolo, podemos, Por ejemplo, Por ejemplo, se inicia también invocó este elemento de actualización. Contenido del manejador. Como puedes ver ahora tenemos el valor inicial. Y ahora queremos a cada segundo a nuestra fecha real. Y tú segundo para que podamos hacerlo. Por ejemplo, Como ese nuevo día cuando llevamos el nuevo día. Sería sólo un nuevo día. El derecho, Entonces te encontramos Segundo. Andi, va a funcionar bien. Correcto para que podamos sumar un nuevo segundo así, Andi. Bueno, necesitamos simplemente invocarlo cada segundo con el método terrible de ajuste. Pero hay que recordar que enviado Intervalo acuñado no obtendrá acceso con el disco E world a ese método en death metal porque set interval es ah, un método especial y no ve en su alcance estos métodos. Está bien, aquí. Por lo que necesitas crear una variable temporal como, por ejemplo, auto y tenemos días a los que puedes llegar fácilmente, por ejemplo, en segundo porque quieres agregar un segundo. Y después de la adición de la segunda, quiero actualizar el elemento 100 contador. Y ahora, como puedes ver cuando estás en él, la segunda parte la parte de los segundos se está actualizando bastante bien. Entonces está funcionando bien. Acabamos de programar todo. Pro Perry. Lo fresco de, ya sabes, en su el es que dividí todas las acciones en remolque. Diferentes asuntos que puedes ver aquí es actualizarse. Él está aquí está sumando segundos. Entonces se ve exactamente lo que están haciendo estos métodos. Ya sabes, siempre debes crear una función para que cada tarea haga OK así a veces cuando el programa corto tal vez rastreó cabeza incluso se puede. Ya sabes, también podríamos hacer una simple función aquí, ¿no? Y hacer todas estas cosas sin todas las propiedades, otras cosas así. Pero necesitas solo,ya sabes, ya sabes, creo que si tu piel va a ser muy grande, tal vez a veces no necesitas tener encajes. Muy. Debuta el guión. No debes enfocarte en hacerlo, Ya sabes, muy bien codificado en la discoteca que el código no necesita estar siempre muy bien. Lee un libro, ¿verdad? Porque a veces la velocidad importa más en esto en el script Java. Importa mucho porque solo eres espeluznante se va a cargar más rápido si tienes menos cosas. Tiene razón. Pero tienes que pensar un segundo que te va a pagar o no. Está bien, ¿ pero qué? Bueno, entrenemos un poco así, y ahora tenemos buen tiempo, pero no se ve bien, así que podemos cambiarlo a, por ejemplo, los días se detienen. Y podemos usar su hora local soltero, correcto, por ejemplo, así. Y como puedes ver ahora mismo, es primero. Yo soy. Wow. Sí, son casi las 2 de la mañana aquí en Polonia y, ah, tenemos ahora aquí en la hora especificada. Entonces es bastante bueno. Pero, ya sabes, en tu país, tal vez estás usando el AM y PM así que antes de las 12 es AM después de las 12. Es PM, cosas correctas. Por ejemplo. 13. Ah, cuando tenemos 13 horas aquí, debería ser el PM está asegurado el primer PM ¿verdad? Es así como la gente, um, en otros países lo llaman. A lo mejor la hora local Sink va a funcionar así para ti. Eso es eso es lo de la cicatriz del tipo local debería funcionar, ¿ verdad? Pero ¿y si quieres que todos vean esta semana de una M? No. Sólo en tu país quieres dedo del pie, todos ven AM y PM ¿verdad? Entonces necesitas crear tu propia medicina. Por ejemplo, puedes crear esta fecha get formatted y podemos crear la función. Lo va a hacer. De acuerdo, Entonces, um, vamos a crear una variable temporal para horas esta fecha real en, Vamos a sacar la nuestra de ella. Y vamos a copiarlo, Bam, bam! Horas, minutos, segundos, horas, minutos y obtener segundos. Y ahora podemos regresar horas. Entonces llamo y hombre, es decir, eso es uh, encendido entonces, segundos. Y ahora podemos hacer algo así. Consigue para mi cita con mi madre. Y como puedes ver ahora está funcionando. Bien. Pero bueno, aquí no damos ceros a la cabeza, así que deberíamos agregarlos. Entonces si el nuestro es más lento que 10 entonces a las dos horas sería cero más las horas, ¿ verdad? Simplemente queremos agregar antes 12345670 Así que así es como lo hacemos. Europa como la nuestra. De acuerdo, entonces no lo hacemos dos veces más, horas, minutos, y ahora Segundos. Y como puedes ver ahora, está funcionando. Bien. OK, ahora también deberíamos hacer algo del AM y PM Así que si el nuestro es menor a 12 me gustaría crear una variable el sufijo disco para ejemplos, que significa lo que va a ser al final, derecho del mundo. Y son ellos. De lo contrario deberíamos crear PM Pero también deberíamos pensar en horas porque normalmente están aquí. 0123 para 12 13 14 bam, bam, bam! Ahora deberíamos hacer algo como el nuestro, menos 12. Deberías, ya sabes, quitarle 12, porque de lo contrario no se va a quedar bien, ¿ verdad? Y ahora también agrega el sufijo. Entonces, por ejemplo, su base. Y entonces el sufijo admite, Oh sí. Entonces si las horas fueran más grandes, veríamos aquí ESPN Eso es trabajo benéfico. Por lo que creamos el nuestro propio para la cita de la Madre. Y ahora podrías estar pensando como, debería estar aquí? ¿ De verdad está tanto conectado con estos? Pero no no todos. No en absoluto. Deberíamos crear aquí una función prototipo. Deberíamos ampliar la fecha por el obtener formateado nuestro formato it fecha. Im consigo tiempo formativo. ¿ Qué? Debería llamarse así. No es igual a función, Onda. Deberíamos conseguirlo desde aquí. Consíguelo Aquí y ahora. No estamos trabajando en la fecha real. Entonces deberíamos simplemente algo así y por ello No, no tenemos buenos días, pero se puede Es el a algo como esto que realmente hizo que conseguir por tiempo de madre. Y ahora también está funcionando Fine, pero es un Quincy. Esto está conectado a la fecha en este momento podemos usarlo en agua para aplica en su programa. No obstante, este método no sólo fue útil aquí dentro, ¿verdad? Tal vez podrías llamarlo de una manera un poco diferente. A lo mejor consigue tiempo formativo. Podrías crear un parlamento, un asunto que,ya sabes, afectaría ya sabes, cómo exactamente se vería esto como si pudieras hacer tipos de dinero fuera del tiempo formateado. ¿ Verdad? Y podrías devolver diferentes tipos dependiendo de qué muy licor se enviaría aquí. Correcto. Entonces así es como se puede hacer una vía pro, um, reloj y el reloj que se puede duplicar. ¿ Verdad? Ahora puedes hacer algo así. Ahora podemos competir en se puede hacer algo así, y se puede iniciar la segunda coca. La sopa de pollo no tiene para coaxar eso. Ya sabes, podrías detener a éste o a éste. Y este es tu ejercicio para crear una función stop que va a detener Said Intervalo. Estoy haciendo cosas así en la lección sobre set in. Terrible. Entonces sólo hacerlo no hace ejercicio. Por lo que verás si realmente puedes repetir un entrenador así para crear una función stop. Pero hay que pensar en ¿De verdad necesitas detener algo así? La mayoría de las veces no necesitas. Entonces recuerda, kilobytes son muy importantes en javascript. Si lo haces, nunca vas a usar una función stop. Simplemente no lo creas porque te lleva tus kilobytes. Está bien, va a Tu página web se va a hinchar más lento. Entonces tú cuando estás programando, siempre debes pensar en lo grande que va a ser tu programa en JavaScript porque kilobytes están haciendo que tu sitio web se cargue y la flor así Pero, ya sabes, dar situaciones donde puedes segura kilobytes de disco. A veces es batería también dedo del pie llamado así porque tu código será más fácil de entender más adelante. Y te ahorraría tiempo. Pero todo depende de la situación. Si esperas dicho, estos no se pueden poner, ejemplo, visitados por 1 millón de personas. El y cosas así no son geniales porque hasta 10 kilobytes son importantes, ¿ verdad? La velocidad es lo que más importa. Pero a veces incluso se podría decir creando una función como esa. kilobytes son, ya sabes, trabajos de tiempo. Porque, ya sabes, puedes invocarlo muchas veces, como puedes crear dos relojes. La mayoría de las veces solo necesitas una sabia. Entonces probablemente esta no sea la mejor solución la para ello. Pero es buena idea entrenar cosas así. Entonces Así Así que ya sabes cómo, ya sabes, llamó apropiadamente. De acuerdo, eso va así. Escucha, muchas gracias. 57. ¿Qué son las galletas?: Hola Hoy te diré qué son las cookies. Cómo crearlos, cómo usarlos, etcétera. Entonces la galleta es la solución. La solución para no poder almacenar variable en todas las páginas posibles a la vez. Ya ves, cuando estemos en el índice html y tendremos otro HTM de cinco Cuando crees una variable, por ejemplo como que estos fueron capaces no estará disponible en ese otro sitio web, ¿no? Sería sólo una llegada neuve. Cada vez que pierdes al contador, puedes ser como yo pero ¿para qué necesitaría algo así? Por ejemplo, se puede almacenar. Se puede identificar a la persona que está visitando su sitio web. Puede entonces por ejemplos, almacenar la contraseña de registro, la contraseña. Pero puedes guardar que está encerrado en la derecha, Y por eso, no necesita mirar en cada página. que sepas cuando estás en el foro, por ejemplo, cuando estás revisitando temas y quieres contestar, no necesitas mirar cada vez después de buscar unos en los que estás mirando. Por lo que las cookies están usando algo para cosas así. Se pueden iniciar las preferencias del usuario, por ejemplo, él quiere tener los antecedentes para ser leídos. Se puede iniciar lo que hay dentro de una forma, por ejemplo, cuando vivió una página web. O entonces cuando regrese, se puede ver que todo sigue en forma porque todas las cosas están almacenadas en su computadora. Ahora las cookies son solo contenedores que se inician en el equipo del usuario que está visitando tu sitio web, y las cosas están empezando como que King equivale a 31 luego la clave de punto y coma para el valor de eh a, y luego puedes obtener estos valores de cookie de documento. Entonces esta es la solución. Cómo usarlo. Vamos a acostumbrarnos a crear botón de cookie. Creé una cura para Barton's Create Cookie y quitamos la cocción de patadas que nos tenemos un poco cuando sí crean cocción en click. Um oh, click. Me gustaría crear nuestra primera cocina con el fin de crear una cocina que tipees. Documentar que cocinar, luego el signo igual, y tienes que escribir solo valor clave. Solo hay que recordar que no se puede crear en la cookie de una sola vez. De acuerdo, puedes hacer como a Kiki's a la vez así Cuando hagas algo así, te darás cuenta cuando crees Cookie y vas al fuego de nuevo, ¿Tienes solo una llave con el primer valor? De acuerdo, entonces si hacemos algo como nombre y entonces, por ejemplo, somos Kaddish, notarás que creé una galleta. Yo obtengo no puedo eliminar todas estas cookies. De acuerdo, entonces cuando haces clic en él, como puedes ver, estás creando la cocina. Cuando arroja Morton quiere no estás creando otra galleta, pero puedes cambiar. Por ejemplo, el valor aquí ha terminado. Cuando haces cosas así, como puedes ver, se está cambiando el valor. Entonces para cambiar el valor, solo escribes aquí algo así como algo nuevo, y él va a trabajar. De acuerdo, Ahora vamos a crear otra cocina. Entonces si quieres crear más de una cocina, tomas un tipo algo, por ejemplo, como apellido y Lord son pollito. Es teclear tu nombre propio. Y como puedes ver ahora hemos llegado a Kiki's de inmediato, ¿ verdad? Y la cookie se costea en estos dominios. Tiene el tamaño y dice, bueno para hojalear el camino es muy importante porque en este momento esta cocción está disponible. El contenido no en todas partes, Como dije al inicio de la lección, pero sólo en subcarpetas y esta carpeta. Entonces si tuvieras algo, ese sitio web, por ejemplo aquí, entonces no podrías conseguir esta cocina si quieres tenerla disponible en todas partes en cada carpeta. Y esto es muy importante porque a veces se puede crear una cocina Algunos, ya sabes, podrías tener a los católicos como, por ejemplo, videos cursos. Ah, ¿ podrías ir a cursos de video online dot com Y te darás cuenta de que cuando vayas a, por ejemplo, cursos de programación de nueve. Justo en ir aquí. Te das cuenta de que si tuvieras, por ejemplo, tu cookie creada aquí, estará disponible sólo en esta carpeta y páginas web aquí. Está bien. No estaría disponible aquí en la página principal. quiere tenerlo disponible en todas partes y la mayoría de las veces que él quiera. Porque, por ejemplo, cuando miras bien bien, registrando, quiere saber exactamente que Ah, que el usuario es. Mira en cada lugar, ¿verdad? No, no sólo un lugar. Entonces tienes que Si tienes Ah que Tienes que tomar hojaldre y algo así cuando creamos una ganancia de galleta después de refrescar. Como se puede ver, tenemos buena otra cocina. Entonces no cambiamos de este tipo de aquí. ¿ Por qué? Porque él va a decirle a una nueva cookie que está disponible en todas partes estas cookies en la mesa en esta sub carpeta. De acuerdo, entonces recordemos siempre que casi siempre tienes que hacer algo así, verdad? Así que crea la cocina y gana. Tenemos Eliminemos las cookies que ya fueron creadas. Queremos tenerlos siempre así la mayoría de las veces. Y, bueno, la cocción se va a quitar después de que cierres el Firefox o cualquier otro navegador Web que no restaure sesión. La mayoría eran hermanos restaurar sesión después de, um, abrirlos. De acuerdo, cuando abres los había hermano. Están restaurando la sesión que por ello, son galleta sigue pujando. Pero si el hermano del mundo no lo está haciendo la mayoría de las veces por ejemplo, experiencia de pasante no hacerlo, galleta desaparecerá. En ocasiones se quiere quitar la cocción después, por ejemplo, 30 segundos incluso no se quiere tenerla cada vez. Ya sabes tiempo completo en la computadora del usuario. Cuando quieras cambiar la fecha de caducidad, puedes usar el flak caducar para que puedas decidir algo así. Y entonces aquí se puede en una fecha y estos días se va a crear usando el objeto de fecha. Entonces lo que aprendimos en la última sección derecha sobre las fechas Así podemos, por ejemplo, que a algo XP operación fecha fuera cocina y nueva fecha cuando lo haces así y luego usé el formato UTC es muy importante porque requiere ex especial. El universo es tiempo universal para la madre. De acuerdo, así que tienes que hacerlo de esa manera. Andi, Cuando nos refrescamos aquí y creamos una galleta, como puedes ver a quién quitó, ha venido de ayuda. El problema es que cuando dijiste aquí una fecha de caducidad de tiempo al día, eso es ahora esta es esta fecha, ¿no? Nos está regresando la nueva fecha. Ahora se va a quitar la galleta porque cuando la creamos al instante, con un segundo después de este tiempo, ¿ verdad? Por lo que hay que cambiar la fecha de caducidad de la cocción. Hacer con el por ejemplo, establecer el método de tiempo. A continuación se puede utilizar la fecha de caducidad de cookie obtiene tiempo y por ejemplo, a los 60 me segundos. Uh, que aquí. Un segundo, 60 segundos. A lo mejor aún más como 60 minutos. nadie. Refresca y crea una cookie. Como puedes ver, las galletas se van a quitar en la libre 58 a. M. Así que así funciona. Ahora cambiamos la fecha de caducidad, y se va a quitar en tres horas. Por lo que el usuario va a estar solo, por ejemplo, conectado por horas libres así. Um, o las cosas en la primera van a estar empezando por tres horas fuera de curso para almacenar tala o algo así. Deberías hacer algunas cosas de seguridad, otras cosas así. Pero bueno, es la mayoría del tiempo. Cosas como el bloqueo se hacen en PHP. OK, así que no te preocupes por cosas así. La mayoría del tiempo lo usarás. Entonces, por ejemplo, envío entre el JavaScript ha sido PHP algunos valores de valor en cuatro para ejemplos, almacenando valores en las formas. Entonces las cosas no se olvidan, ¿verdad? Cuando vayas por ti a, por ejemplo, video cursos en línea que vienen cuando vamos aquí y agregamos algo a la canasta, notarás que no fuimos aquí en. Te escribimos, por ejemplo, en el principal. Um, lo cerramos y volvemos a pedir. No lo fue. Es esa alta TC Mary Steve aquí es muy útil porque no estás haciendo áreas. Están enojados, ya sabes, mayoría de las veces. Ah, hay muchos, muchos más insumos, ¿no? Es una buena idea empezar cosas así porque el usuario va a estar agradecido contigo . Entonces así es como lo haces. Antes de las cookies de ejemplo, derecha. Eso se puede empezar. Por ejemplo. Nombre fuera de la entrada aquí en, entonces. El valor de ese insumo aquí. Y puedes dudar luego comprobar ive la cookie existe entonces. Oye, hagamos algo. Entonces así es como hacemos cosas así en. Bueno, también puedes usar el almacenamiento local para ello. El almacenamiento local es local. El almacenamiento es de html cinco hasta swing javascript. Pero mira historias no apoyadas así como cookies. De acuerdo , Eso no hablamos de ello ahora mismo? Volvamos a las galletas. Ahora no. Realmente deberíamos aprender también cómo eliminar una cookie, y probablemente ya te hayas dado cuenta tiene que hacerlo. Sólo necesitamos saber algo así, ¿verdad? Entonces si queremos quitar una cocción, es a algo así como quitar la cocción. Y entonces sólo queremos, por ejemplo, por ejemplo, quitar la derecha judía de Arkady. Por lo que queremos eliminar, por ejemplo, la cookie con ese nombre con el nombre clave. Quitemos el desarme. Y sólo tenemos que fijar la fecha de caducidad que al día que sucedió ya derechos, por ejemplo, mineros uno aquí. Y cuando el refugiado lo refresque y podríamos quitar. Como puedes ver, estamos quitando esta galleta derecha Al hacer clic en esto, incluso podríamos hacerlo de esa manera, porque la verdad es que el tiempo está pasando muele. Y así cuando podríamos quitar la cocción y cuando la fecha aquí es la fecha real, bueno, bueno, un segundo manchas más, entonces se está quitando una galleta, así que así es como se quita la galleta. También puedes establecer la fecha de caducidad mediante el uso de algo discutirá marcas edad. Eso será muy guay si lo hiciéramos de esa manera, porque sería un poco más fácil. Mira aquí necesitaríamos solo tipos de hecho, marca edad entonces igual a on. Podría hacer algo así como no plus plus más 16 segundos, por ejemplo. A lo mejor más. Un poco más. Y ahora cuando nos referimos hoja y creamos una cocción Como puedes ver, la cocción va a caducar en una hora. Cuando hagamos así, va a caducar en un día. Eso es simplemente impresionante, porque bueno, como puedes ver, no necesitábamos crear cosas así. El problema es que no me está apoyando que los expertos seis y bien, si no necesitas apoyarlo, entonces adelante. Usa estas versiones. Esto también es muy cool. Entonces en esta lección, aprendiste ¿qué son las galletas? Cómo crearlos, cómo servir valores. Pero cómo, ya sabes, recuperar estos diversos más fácil cómo crearlos un poco más rápido. Quítalas un poco más rápido porque si tuvieras que hacerlo cada vez, la misma manera para los casos médicos simplemente le quitaría mucho tiempo a los señores. Por eso vamos a crear en las próximas lecciones, funciones especiales que van a tener que hacerlo. Las cookies son bastante importantes. Creo que saberlo. Pero nos vamos a centrar en crear funciones que te van a hacer trabajar con ellos que vender hace Westen. Muchas gracias. 58. Crear una función de galleta: Hola. En esta lección, te enseñaré cómo crear una función que te va a tener creando cookies. Foster, Hagámoslo. Vamos a crear una función que vamos a llamar función, crear cookie. Y eso es un argumento. Tomará aquí Nombre valor en días. No, necesitamos crear una cocina si eso es bastante fácil hacer cosas como esa. Y sólo queremos cambiar aquí. Ahora ese nombre va a ser especificado por la persona que envía que dos sí función volumen como , por ejemplo , bueno, nombre o apellido o edad u otras cosas así, correcto. Y no hay casa de juegos que ahora te necesitamos. Los valores lo cambiarán, padre. Tú además, uh, ¿ y qué? Podemos hacer algo con el tiempo, Pero hagámoslo más tarde porque es un poco más complicado. Hagamos algo rápido, Puff nos acaba de esa manera. Entonces cuando lo haces de esa manera, podemos justo ahora la cocina creativa. Quiero crear una cookie con el nombre um esta h 26. Lo que sea. Y cuando te refresquemos, ve al fuego de nuevo. Quitemos las galletas de la última lección creada cocina. Cómo crear cookie no es una función crear cookie no es la función que el problema es que tomó de Adidas. Un nombre como tú. Oh, crea fondo de galleta. Es bueno botellas de fondo. Está bien. Botón Barton. De acuerdo, Como puedes ver ahora, tenemos tu edad para entrar a seis. Está funcionando, así que ahora puedes crear cookies fácilmente sin pensar en esto raro. El modo realmente muy extraño de crear cookies puede crear otra, y se va a crear muy rápido. Es muy, muy útil, bálsamo derecho. Y ahora cuando te contaste algo de días, si no envío días aquí, como te has dado cuenta, no tenemos un cerca. Pero esto es entonces en definido por lo que podemos comprobar si días no es indefinido de lo que me gustaría hacer también algo así expira. Fecha de caducidad violación Al inicio, hay no va a haber nada. Por lo que fácilmente podemos agregarlo aquí, ¿verdad? Y esto no afectará en absoluto nuestro abrigo, porque sólo estamos recibiendo nada. Pero si hay algo que te envió si hay días desde que te Dan, podemos hacer algo así como, por ejemplo, crear una fecha de caducidad de cocinar así y podemos establecer aquí cuántos días queremos agregar. Entonces, ¿cómo hacerlo? Bueno, podemos usar en lugar del conjunto Tiempo dicho fecha aan den toe aquí dicho obtener fecha hora y apenas adherir días. ¿ Verdad? Y ahora necesitamos crear nos dedo asignado a la fecha de caducidad nuevo valor que se va a interpretar aquí. Normalmente, simplemente teclearíamos aquí. ¿ Qué? Algo así, ¿verdad? Al igual que necesitamos también el punto y coma. Por lo que simplemente teclearíamos algo exactamente como que caduca igual fecha de caducidad, masa de galletas difícil, cadena UTC. Y se va a agregar aquí si alguien lo especifica aquí. Entonces si quiero que este tipo tenga 30 días 20 lo que sea, no lo eres. No es que ahora cuando crea una galleta, va a caducar en 20 días. Entonces es muy útil, ¿verdad? Ahora podemos crear una cookie con 20 días de caducidad al instante sin volver a pensar en este código. De acuerdo, así es como se crea una galleta. Vía rápida. En la siguiente lección, te muestro cómo quitar una galleta. Mate rápido. Esa es sólo la lección. Muchas gracias. 59. Eliminar una función de galleta: Hola. hoy te mostraré cómo crear una función que va a eliminar una cookie. Vía rápida. Para hacerlo, vamos a crear la función que la llamaríamos. Quita Cookie, y solo le quitamos un nombre a la cookie. ¿ Querías quitar? Estamos quitando el fondo que Cogie, hacer algo así,sólo necesitamos saber Cambiar esto, pensar por sólo necesitamos saber Cambiar esto, nombrar. Además, eso está bien. Estamos sentados la fecha de caducidad a la fecha real vehículo. Haz un poco más de operaciones. Tiene razón, por ejemplo, fijándolo al día que ya sucedió. Pero no necesitamos hacerlo, porque el tiempo pasa en el camino. Y acabamos de decir que el nombre de cocina del documento expira bomba por bomba. Pero también hay que recordar siempre que sólo va a eliminar las cookies que tiene pop configurado para eso. Todas las cookies posibles. Está bien. Si creas una cookie sin este camino sin usar el método create cooking, entonces podrías tener un problema, porque el camino podría estar equivocado. Entonces tómalo en mi siempre Así que cuando ahora lo usamos, por ejemplo, quitando la cocción, podemos quitar, por ejemplo, galleta de edad que se acobarda. Refresquemos aquí y la crema de cocinar. Crear cocina. Real carrera culinaria. Cogie Remco está funcionando, así que es bueno que va a escuchar. Muchas gracias. 60. Cookie de de - recuperar función: Hola. hoy te mostraré cómo crear una función que te va a tener recuperando el valor las cookies especificando la clave de la cocción. De acuerdo, así que saludemos la función de que se va a llamar Obtener cocina por nombre clave. Y yo solo te mandé y ellos están bien, entonces, ¿cómo hacerlo primero? Veamos cómo se ve la cookie cuando haces algo así frente al HTML interno y te enviamos cocina de documentos. No lo harás. Es que tienes con tu asignación cuando creamos más cookies y estamos refrescados. Como se puede ver, tenemos, pero ciertamente por el truco. Edad 26. Entonces podríamos estar aquí un punto y coma y luego un espacio si tuviéramos más galletas. Entonces hicimos algo así. Nombre el. Ahora aquí están Kaddish. Notarás que no fue creado. Cocinar? Sí. Crea una cocina. Nos hemos vuelto a poner cínicos en esta base. Significa que podríamos dividirnos a la derecha. Podríamos dividir esta cadena porque hay una cadena en clave de valor clave. Valor muy clave sobre ti. Cómo hacerlo. Bueno, podemos hacer justicia si, como ese documento cocinando ese partido y luego punto y coma en este espacio. Entonces por ello, tenemos bien. Ahora un área fuera de las cookies al devolverlo haciendo algo así en mecanografiar niño. Lo que sea. Porque no se está usando el nombre que ahora mismo, Como pueden ver, tenemos a Inari. Quién sabría aquí, la coma encendido cuando hacemos algo así como galletas fuera de cero. Tenemos nombre amargo con Logical, y hacemos claves de una. Tuvimos buena edad. 26 Cuando hacemos las cookies tienen que Aquí. El buen nombre es Kaddish, ¿verdad? Tan bueno. Todas las galletas aquí? No, pero ahora mismo queremos dividir la clave usando su lo que tú piensas lo igual. OK, entonces quieres dividir ocho por días, ¿verdad? Y por eso, ¿qué nombre vamos a tener? Vamos nuestra cabaña. Y entonces podemos conseguir, por ejemplo, el primero en la clave on. Pero cuando hagamos algo así, obtendremos el volumen, ¿ verdad? Está bien. Por lo que podemos utilizar esta información porque necesitamos acudir a todas las cookies con el fin de encontrar a la que tenga el nombre como su nombre que se va a enviar aquí. Entonces, por ejemplo, cuando escribimos tu apellido, quiero llegar ahí. ¿ Cuáles son el boleto como valor? Correcto. Entonces en usado, por ejemplo de cuatro lope. Por lo que necesitamos ir a las galletas a todos ellos. Entonces así es como va a quedar nuestra condición para incriminar que yo cada bucle Andi Ok, entonces necesitamos solo saber Check oh más rápido y me hizo Dividir la cocción Así que galletas fuera I Dividamos ocho por este signo y ese ahorro entró por ejemplos galleta chapada variable. Entonces sabe exactamente lo que tenemos, ¿verdad? Dividirlo cocinando. Y ahora vamos a crear en etiqueta privada que representamos Nombre de Cookie. Tan espíritu Cookie de cocina Nombre Cookie Nombre clave. Bueno, esto será aún más. Especifique un nombre específico. Cookie Nombre clave es el primero. El 2do 1 es el volumen de cookie, pero bueno, no necesitamos camino. No necesitas valor para obtener valor porque son justicias de tiempo, ¿ verdad? Y si el nombre no es correcto, así que si nombre es igual a la limpieza de cocción, entonces sí, podemos hacer algo como crear volumen de cocción, que es galleta chapada En el segundo índice, que es uno y se puede sólo tienes que devolver el volumen de cookies aquí. ¿ Verdad? Y por ello es que se puede ver que hemos conseguido algo. ¿ Qué quieres conseguir h solo para comer de esa manera para conseguir un nombre? Acabamos de ganar. Hemos estado, er, kaddish. Impresionante, ¿verdad? Esta función te va a ahorrar mucho tiempo porque tendrás que hacerlo cada uno a un puñado. Obteniendo cualquier cosa de la galleta. También hay algo con la escuela, almacenamiento local, que es más fácil de usar. No necesitas crear cosas así porque están articuladas. Pero mira, un almacenamiento no es algo que también pueda ser utilizado por PHP. Por ejemplo, las cookies pueden ser utilizadas por PHP por Travis keyed by Well ah, y luego web de lenguaje, desarrollando lenguaje que puede acceder a ellas y ha conseguido un p a para ello. De acuerdo, mira, autoridades solo para javascript, es más fácil de usar, pero también es compatible. Uh, si solo quieres hacer algo localmente, puedes aprender sobre el almacenamiento local. Va a ser que voy a hablar de ello en el curso de cinco HTML en el futuro, porque estos de html cinco Ok, eso es sólo esa lección. Muchas gracias. 61. Escapar: Hola ahí. Los valores que hemos estado usando hasta ahora fueron bastante fáciles, pero fáciles. Es decir, el cuando No hay caracteres especiales aquí no usamos, por ejemplo, caracteres que podrían ser interpretados por, por ejemplo, javascript un poco diferente. Por ejemplo, el punto y coma dentro. ¿ Verdad? Cuando hacemos algo que y nos adherimos, algo así sería una fresca y creamos una galleta. Como pueden ver, no es aparecer aquí justo cuando tomamos un nombre amargo. Como puedes ver, hemos estado de licencia sin truco porque el punto y coma está reservado para, ya sabes, Fue concebido después de la misma llamada? Debería haber algo así como una llave nueva. La vida, por ejemplo, expira sobre algo poderoso que no es algo que seguro. Y hay muchos personajes especiales como ese cuando tú, por ejemplo, quieres enviar una U. R l a la cookie A piensa que escapar como inter como la codificación es muy importante. Simplemente puedes hacerlo usando la función que se llama abrigo Inco. Se re componente. Tú sólo he estado en el valor por ello, y puedes ver ahora lo tenemos aquí, ese pero también tenemos que recordar después. Si nosotros en abrigo en creación de cocción, también tenemos que decodificar ellos volumen de galleta más adelante porque así va a ser interpretado apropiadamente . puedes ver ahora podemos usar los personajes especiales bastante fáciles de poner y así es como lo haces. Esa es sólo la lección. Muchas gracias. 62. windows en Popup: Hola. hoy te mostraré a Cuadro Informativo es el que mostrará el mensaje que dijiste que querían. Le preguntamos al usuario si tema sobre hacer algo, y si no lo es, puede elegir esa opción el consejo o cuando está seguro de que puede elegir la opción ok. Y también sobre el prompt. Eso es sólo pedir entrada al usuario. De acuerdo, entonces estos son métodos de pies como ese y puedes usarlos usando la ventana. Eso y luego el nombre del método. Entonces como puedes ver, método como alerta, confiado, prompt está dentro de ventana. Pero porque la ventana está en global, se puede era alcance global. Simplemente puedes escribir Allard hemos estado usando a Allah lo hizo muchas veces, así que podríamos escribir cosas como Hola, Irak. Y cuando nos refrescamos, como pueden ver, tenemos el mensaje. Hola Eric. Si quieres hacer un lado de entrada, debes saber que para hacerlo, necesitas usar la contralora. Y como pueden ver ahora tenemos entrar. De lo contrario no podrá hacerlo. De acuerdo, entonces que pasa con el vienen de cuando sí cuentas por él. Simplemente estás confirmando si el usuario está seguro de algo Así puedes preguntar. ¿ Estás seguro de dilatar tu cuenta? Bueno, esto es algo muy, muy importante. Si deleita su cuenta por error, Bueno, Bueno, que reproduzca su puede ser un problema, ¿ verdad? Porque toda la información podría ser borrada. Entonces Ah, aquí tenemos una onza por respuesta. Y como respuesta, si, como pueden ver, hace clic Ok, tendremos en estas variables. Cierto. Si pudiera ex concejo, tendremos el infierno. Falso. Entonces cuando hago clic en Aceptar, puedo decir algo. Como si la respuesta está bien. Cualquier cosa con la condición de que esta no falsa Pascua, ¿verdad? Entonces si contesta entonces podemos decir algo así como adiós. De acuerdo, Alguien vuelve a recrear su cuenta. Entonces Ok, dame yo Así es como funciona. De lo contrario, cuando hace clic en el cáncer, no pasa nada, ¿verdad? Nos puedes hacer si quieres hacer alguna cosa especial. Si mantienes clics consejo como decidirte eso puedes hacer Puedes preguntarle a persona sobre algunas cosas muy importantes que no hace tu página web Si está seguro de ellas bien. Y hay también prontitud Podríamos hacer algo así como pronta. Cuál es tu nombre y variable aquí. Tendríamos el resultado del prompt y podríamos decidir como alerta. Adiós. Resultado. De acuerdo, así que así. Y ahora cuando te refresques Ok. ¿ Cuál es tu nombre fuera? Mi nombre es er, Kaddish. Adiós, nuestra Kardashian. Entonces esto es sólo una pronta. Eso es pedir al usuario la entrada. Hay uno que beneficia a estas ventanas. Como pueden ver, puedo hacer para decirle lo que sea. ¿ Cuándo? Cuando esto aparezca. Correcto. Y a veces quieres que parezca que ellos pero la mayoría de las veces en dos. Miembro, no se quiere usar todas estas cosas en absoluto. La alergia es buena para la depuración. El prompt no es bueno en absoluto. Ven firme es bueno para muy, muy confiado, Mostrado todas las cosas cosas muy importantes. Una vez cuando el usuario va a habilidades, no puedo por error. Esto va a hacer problemas. ¿ Verdad? Entonces tal vez la confusión sea buena, pero solo sepan ahora mismo que la gente inventa mejor solución para cosas como esa. ¿ Qué? Bueno, podrías, por ejemplo, mostrar una caja aquí en la parte inferior, ¿ verdad? Y dirías algo. ¿ Estás seguro de esto? De no ser así, haga clic atrás y él simplemente retrocedería y todo se invertirá justo en. Si no cruje, la caja desaparecerá después de unos segundos. Es difícil de dio. No, sólo necesitábamos crear una caja aquí, luego empezamos a mostrar non. Y si hace clic en algo que esta imagen cambia a de de display no a display block. Y entonces se va a mostrar el mensaje. Si hace clic en reversa, sólo necesitamos dedo del pie deshacer lo que se hizo. Entonces, por ejemplo, cuando agrega, entonces podemos simplemente subsección derecha. Y podrías simplemente iniciar esta información en algún lugar. Y si no hace nada después, por ejemplo, 10 segundos fueron así usando el tiempo establecido. Admítelo, solo podríamos hacer desaparecer estos boxeo. Este es tu ejercicio para disco A. Para esta lección. Creo que esta solución es mejor para preguntar cosas. Bueno, tal vez no por podría en cuenta, sino por, ya sabes, cosas simples que él está haciendo el usuario porque cuando, por ejemplo, está quitando registros, ¿verdad? Bueno, esto es algo que podría hacerle problema, ¿verdad? Pero la verdad es que cuando alguien arroya quitando el necesitaría dedo del pie cada vez acento Creek. Activo, activo, activo, activo. Se despega esta vez, ¿verdad? Y que por hombre, estoy seguro. ¿ Por qué necesito decirte esto cada vez? Por lo que es mejor simplemente mostrar una caja y buscar justicia. Eliminar. Oh, yo es verdad. Tengo que revertir esto. De acuerdo, esa es mejor solución. Creo que esa es sólo la lección. Muchas gracias. 63. Métodos de matemática: redondo de valores: Hola. hoy te mostraré métodos matemáticos útiles que probablemente no puedes usar en tu aventura fuera de la programación en javascript. Por lo que se llama al primer método alrededor del cual Irán es el número al más cercano en maestro. A veces es posible que tengas un entero que se vea así, pero quieres tenerlo como un entero completo. ¿ Verdad? Entonces, ¿cómo hacerlo? Tú sólo algo así como las matemáticas que alrededor. Y como pueden ver, hemos llegado aquí a esto es redondear al primer número aquí. ¿ De acuerdo? Y está redondeando la manera matemática, lo que significa que si tienes algo así, vas a ver libre. Si tienes algo así, te vuelves nazi también. De acuerdo, así que inferior a cinco aquí en la primera posición después del punto. Entonces siempre vemos el número ese tema. Si el número después del punto es mayor que cinco. Ah, ya sabes, después de los cinco años, por ejemplo, uno. Entonces vas a ver libre. Tienes también, algo bueno se llama techo. El techo está arriba en nuestra casa, ¿verdad? Por lo que siempre corres. Entonces si haces algo así, siempre vas a ver lo libre en situación así. Incluso como puedes ver, está funcionando como que ese piso está funcionando un poco diferente porque el piso está abajo en nuestra casa . Entonces corres siempre abajo. Entonces cuando tengas incluso 2.99999 todavía verás también. Y tienes también el algo que está señalando la biblioteca de matemáticas, pero es muy útil. Y creo que debería hablar ahora de ello porque, como pueden ver, estamos redondeando a un solo número. ¿ Y si quiero quedarme con las cosas que están tras el punto ¿Y si quiero? Aunque no haya cosas después de eso para mostrar ceros. Entonces, por ejemplo, cuando hago algo así, um, um, sin el mi piso no eres es que hayamos llegado a ese 0000 OK, a veces quieres mantener como se imprimen las cosas en tu web y que por ello , solo dices que debe ser arreglado. Debe ser siempre posición libre después del punto y también significa que si vas a hacer algo nueve 677 necesita que hayamos trabajado nueve libres y ayuda porque siete es mayor que cinco. Entonces esto va a ser un Y como puedes ver ahora lo tenemos bien. Por lo que también se está ejecutando, pero la parte que está después del punto OK, y esto es diverso con no está en la biblioteca de matemáticas. Pero aunque no te ayudara ahora, probablemente sabrías oír hablar de ello sería difícil encontrar esta función porque es difícil encontrarla, vale. Y también hay un B us, que significa valor absoluto, lo que significa siempre tirado positivo. A veces se quiere cambiar el valor. ¿ Esto negativo Negativo. Entonces haz algo así al valor del dis positivo. Entonces como puedes ver ahora, es positivo. Incluso dile que tenemos su menos derecho. Piensa así son útiles cuando se quiere, por ejemplo, hacer valores sub estrictos ing off y el resultado es negativo cuando los resultados deben ser positivos para porque, por ejemplo, quiere comprobar cómo, um cómo los hombres en cuánto tiempo es la parte de un lugar a otro en Europa, por ejemplo, pantalla derecha al hacer clic aquí y luego aquí y usted, por ejemplo, subestablece el número a partir de aquí tendrá el valor positivo. Pero si se detiene como primero, estos valores a partir de este valor. Entonces, por ejemplo, tienes aquí, por ejemplo, por 300 píxeles. Si tienes 500 picks es entonces tienes valor negativo. Pero la subestructura en de estos esa diferencia debería ser positiva en el camino. ¿ Verdad? Entonces un bs es útil para cosas como eso tienes también, algo discutirá poder de muff para que puedas conseguir por ejemplo Hey, quiero tener el, um son libres al apagón, por ejemplo gratis. Por lo que significa que tenemos aquí 27 derecho libre multiplicado por multiplica libre muy libre. Y también hay algunos problemas. Cuando haces cosas así, debes saber que a partir de ahora, el tipo fuera del tipo de es un método que te va a dar el tipo de la variable. Como se puede ver cadena de enfermedad. Cuando lo haces de esa manera, tienes buen número, y a veces puedes tener cuerdas como yo y a veces la gente podría comprar tipos místicos. Estoy pensando bien, y por eso, cuando lo haces, incluso cuando haces algo como, por ejemplo, matemáticas que alrededor. Como pueden ver, tenemos buen saber el número. Entonces esto no es trabajar en cosas que cosas así, pero se puede poder. Entonces podemos, por ejemplo, partes a enteros todo esto y por ello. Como puedes ver, está funcionando bien, porque esta función va a tomar la parte que parece entero. Y esta parte es ésta. Si haces el flotador de partes, tomará también números después del punto Así ve no la función rand, porque esta ronda solo al inter ginger sin el punto eso Usaremos eso para arreglar en este momento , por lo que x dos fijos y hacemos algo así como, por ejemplo, números libres. Y eso es algo carta así se puede ver pensamos en libre que 1 a 5 sin las partes floten. Esto no funciona porque no podemos trabajar con cadena como número, ¿ verdad? Por lo que a veces teclear cosas son importantes. La mayoría de las veces en javascript no necesitas preocuparte, pero en situaciones como esa, es importante porque bueno, a veces puedes tomar, por ejemplo, que tienen clase, y tú puede tener un 50 set seis. Y si solo quieres este 56 contraste lo partes bien. Está bien. On y cómo hacer números aleatorios. Esto es muy, muy importante. Tema hablará más al respecto en la siguiente lección. En esta lección, me gustaría simplemente mostrarles que esto devolviendo el valor así cuando seguiré refrescando el sitio web que pueden ciudades está cambiando a Irán, el número que se ve así. Y necesitamos cambiar de alguna manera a, por ejemplo, números del 0 al 10. Y podemos usar algo así para, por ejemplo, para, por ejemplo, citas generalmente aleatorias en tus sitios web o algo aleatorio, lo que sea. Entonces así es como se crea otro número. Pero también necesitamos saber cómo crear, tener dedo del pie, hacer que se vea mejor. Al igual que quieres cambiarlo de un número como ese a, por ejemplo, a liberar 45 Y esta cosa va a hacer la siguiente lección. Hay muchos, muchos, muchos más asuntos en las matemáticas. Al igual que, por ejemplo, se puede venir el costo de los adultos mayores y otras cosas como esa La Guardia. Pero la verdad es que en bueno, voy a cazar 95%. No usarás cosas así. Si los necesitas, solo tienes que seguir adelante con las matemáticas. Re extranjera. Simplemente escribiendo a la abuela amigos gratis JavaScript y encuentras todos los métodos. La mayoría de las veces. Solo necesitas usar estos. Ahí están los más importantes. No lo hagas esta vez. Estoy buscando en algo que no necesitas. Correcto. De acuerdo, Sólo hay esa lección. Muchas gracias. 64. Generar números aleatorios: Hola. En esta lección, te mostraré cómo generar un número aleatorio. Para hacerlo, hay que usar el manguito alrededor de ellos función. Y como puedes ver cuando remite este sitio web no eres es que tenemos un número raro . El número es muy grande después del punto pero siempre hay cero aquí. Por lo que este número siempre está entre cero y uno. El problema es que esto no nos resulta muy útil, ¿ verdad? Nosotros la mayoría de las veces queremos un entero. Queremos tener 012345 Así podemos usarlo, por ejemplo, como índice para Inari. Entonces podemos mostrar, por ejemplo, desde el área citas o algo así. Bueno, masa y ejercicio así en la siguiente lección. Pero en esta lección, aprendamos a generar adecuadamente estos números. Entonces para conseguir ahora, por ejemplo, números más grandes, sugiero multiplicarlo por, por ejemplo, a como puedes ver ahora tenemos buenos números entre cero y dos. Entonces sí, esto es bastante empezando a funcionar mejor y bien, queremos simplemente irnos con esta parte del número, y lo haremos usando el Mi piso importó ahora, Como puedes ver, tenemos buena números entre cero y uno. Entonces si te escribo por ejemplo cinco, notarás que tenemos números entre cero y por derecho. De acuerdo, así que esto es muy guay, porque puedes generar unos números bastante fáciles entre cero y cinco. Pero, ¿cómo podemos generar números que no estén entre cero y algún número? Correcto. Si quieres tener cero y 100 entre cero y 100 solo teclea. Suena así, ¿verdad? Y debidamente entre cero y 100 si quieres. Entre cero y 11 o cero, solo escribirías dos. Por lo que solo remolcas tienes, como, menos un resultado correcto en esta parada. Pero si quieres obtener de alguna manera números de, por ejemplo uno y gratis ¿cómo hacerlo? ¿ Qué pasaría si agrego uno aquí? Significa que el mínimo ahora mismo es un derecho. Bueno, si aquí es cero punto cero algo, algo así como el piso lo llevará al 00 más uno siempre es uno. Entonces esto hace que la luna muchas en este momento sea una verdad? Lo estamos haciendo. Entonces está en Lee uno si escribo aquí al mínimo es ahora también Así dos. Además lo que esta aquí la mía es una Es eso dicho que vamos a tener el número desde ahora mismo, ¿ verdad? Por lo que cada tipo aquí libre será entre libre y cuatro. Si te adhieres uno más así estaremos entre libre y cinco. Si tuviera aquí uno más será hermoso Ganar entre libre y, um busca derecho está funcionando Bien. Entonces así es como califica congénita lo que quieras con el número aleatorio. Pero la mayoría de las veces solo querrás generar números de cero a por ejemplo Ah, 10 para 2030. O a veces quieres simplemente saltar el uno más veces. No se puede de alguna manera en javascript desde cero Cuando se quiere generar números, desea la mayoría del tiempo tenerlo de contar desde cero y se utilizará este método que dura La lección fue donde generaríamos cotización aleatoria que vendiendo la lección. Muchas gracias. 65. Citas de aleatorio: Hola. En la última lección, aprendes a crear un número aleatorio usando la función aleatoria. Para hacerlo, solo necesitas teclear aquí la derecha. Agarra los números que quiere conseguir. Entonces si quieres conseguir el número de cero a gratis, ¿vas a escribir algo así? No hace falta que sea cero aquí así que podemos simplemente escribir algo así. Y hoy te mostraría cómo crear un programa. El guión A que va a mostrar al usuario cotizaciones aleatorias en su sitio web cuando visite su sitio web. Va a ver cada vez, un abrigo al azar y aquí tengo cuatro citas geniales. Creo que una persona que nunca cometió un error nunca intentó nada. Vamos a pagarlo y vamos a crear una variable que almacenamos nuestra cotización. Creo que esto debería ser un área porque podemos remover hombres de ahí y yo sólo moriría pero aquí así. No importa lo despacio que vayas siempre y cuando no te detengas. Está bien, esto es muy guay. Entonces cubra el siguiente. Podemos encontrar muchas derrotas, pero no debemos ser derrotados. De acuerdo, vamos a añadirlo a nuestras cotizaciones. Y si puedes soñarlo, puedes hacerlo. Entonces hagámoslo así, tonto. Y ahora por qué sí me sumé a un área Porque mira aquí en este momento, generaríamos números de cero a gratis. ¿ Verdad? Zero ¿Quieres liberar? Oye, esto es lo que queremos. No podemos usarlo así. Cotización cotizaciones. Estamos en número bajado. Y como puedes ver ahora tenemos al azar Lo que en nuestra página web lloró, ¿no? Ahora podemos sumar también nuestros alteradores cómo conectar. Cotización con alteradores. Podemos simplemente crear otra variable que llamamos, por ejemplo, altera y bueno, sólo un signo aquí. Autores, si el mismo orden. Entonces, Albert Einstein conflicto Confucio, Tal vez lo estoy leyendo de manera equivocada. Entonces lo siento. No conozco algunos de estos idiomas. De acuerdo, Entonces, así. Y ahora solo puedes escribir algo que cita y luego puedes escribir algo como alterar los votantes derecho fuera de número aleatorio que se generó app, Topia. Como puedes ver ahora tenemos buena cotización aleatoria y la otra por supuesto, puedes hacer que se vea mejor y este es tu ejercicio. Crearte, Dave, yo, por ejemplo, cito Y dentro de estos debería tener dos tramos, por ejemplo, para el exterior y también para el y cita. Y por ejemplo, hacer la cotización con los Stites CSS a mejor. Entonces está, por ejemplo, escrito en cursiva y lo externo sería, por ejemplo, negrita. Y sería más pequeño. ¿ Verdad? Y deberías insertar en despond en lugar de insertarlo así. Ah, la cita en el otoño esa zona esa lección. Muchas gracias. 66. Ubicación de la ventana: Hola. hoy te mostraré cómo obtener la ubicación que eres l el lugar donde tu usuario se encuentra en tu página web el hojaldre Como puedes ver en orden juntos, solo tecleas ubicación de ventana y bien tenemos Bueno entonces el camino con el dominio con el sub carpetas con la demanda en el discurso justo aquí y piensa así es útil porque también puedes cambiarla usando la ventana, esa ubicación cuando algo así sería útil. Por ejemplo, vamos a crear un enlace usted mismo. Bueno, cambia el lugar a través. Por ejemplo, html de muestra. De acuerdo, vamos a darle un 19. Vamos a crear tu html cinco. Andi, cuando hago clic en él, como puedes ver donde Cambiar página web ¿Qué pasaría si quisiera hacer algo antes de ir a este sitio web, verdad? El usuario ha cambiado algo en la página web. Yo quiero dedo del pie solo déjale ir allí. Pero solo después de hacer algunas cosas en Java script ¿verdad? Necesitas hacer algunas operaciones antes de permitirle ir allí. Cómo hacerlo Bueno, para poder hacerlo, tenemos que conseguir esa muestra. Entonces vamos a conseguirlo usando el elemento get por I d. Y ahora necesitamos cambiar el propio click incluso porque podemos usar el objeto parejo del que hablamos . También puede usar el método predeterminado comprobado que está previniendo el comportamiento predeterminado. Entonces ahora mismo, no vamos a ir a la u. R l me gusta eso. El problema ahora es que cómo cambiar después de cambiar las cosas que queremos hacer, Um, que estás bien, Cómo cambiar la ubicación. Bueno, eso es imaginar que tenemos aquí hombres operaciones como, ah que queríamos hacer. Y ahora queremos cambiar la ubicación. Cómo hacerlo. Simplemente ganamos la ubicación y nos cambiamos a HTML simple, ¿ verdad? Se puede ver cuando Creegan nada está funcionando bastante bien. El problema es que Hey, si cambio a la chica, tendría que cambiarla también en la vaca. Pero hola. Conozco el JavaScript. También conoces el JavaScript ahora mismo Porque ves todos mis videos. Y sabes que si estamos aquí en la variable de muestra porque este es el manejador del elemento aquí, ¿ verdad? Podemos usar algo como esto. Esto hará referencia a esta muestra ahora, y podemos obtener este atributo aquí. Entonces obtén atributo. Método está olvidando este valor. ¿ Verdad? Y se puede simplemente escribir edad re Ferentz y esos. Está bien, ahora, como pueden ver, el enlace está funcionando. Pero puedes hacer operaciones de hombres antes de ir a la dislocación. De acuerdo, Esa es sólo una buena lección. Muchas gracias. 67. Precarga de imágenes: Hola. hoy te mostraré cómo carga las imágenes solo cuando se necesiten. Porque a veces cuando el usuario razona su sitio web, no ve todas las imágenes posibles que inicien el inicio, ¿ verdad? No va a desplazarse hacia abajo la mayoría del tiempo. Y por ello, puedes guardar tu vendaje. Y al mismo tiempo, el usuario cargará tu sitio web más rápido porque no necesitará cargar todas las imágenes posibles que se esconden en algún lugar, ¿ verdad? Puedes precargarlos. Puedes cargarlas cuando creas que podrían ser necesitadas pronto. Por ejemplo, cuando se está desplazando hacia abajo justo cuando hay un pergamino también te puede encantar ¿verdad? Porque nos hemos puesto desiguales en el desplazamiento. Podríamos hacerlo con un rival parejo en scroll y el tipo se está moviendo hacia abajo y está muy cerca la imagen al final fuera, ya sabes, contenido. Y pronto debería haber imágenes. Deberíamos pre bajar los archivos de imagen porque él no lo diría ni algo así, o deberíamos precargarlo como 500 píxeles antes, ¿ verdad? Algo así también se llama, por ejemplo, cuando alguien está teniendo un slider justo cuando hay un slider con imágenes de dinero puedes pre Law escribió. Se puede cargar en las imágenes que son visibles que se inician. Pero cuando hay más imágenes que no se ven, puedes cargarlas cuando el usuario apenas las va a decir pronto. ¿ Verdad? Entonces es cuando usas algo así. Y ahora vamos a hacerlo bien. Cómo pre bajarlos tal vez niño para cargar imagen solo con JavaScript cómo hacerlo. Por lo que tenemos aquí dif para imágenes donde comenzaremos nuevas imágenes tenemos conseguir batón si la identificación carga más sobre botón. Y tenemos la única imagen de este arranque. Correcto. De acuerdo, entonces tenemos algo así. Te tenemos descarga de ventana. Tenemos buena carga dis, más botella y en el click, incluso vamos a invocar esa carga Función de imágenes pobres y cómo crear una imagen en javascript Con el fin de hacerlo. Solo necesitas hacer algo así. Imagen Var. Nueva imagen. De acuerdo, entonces ahora mismo tenemos una imagen sin la fuente. Tenemos que fijar la fuente. De acuerdo, Entonces, ¿cómo hacerlo? Simplemente tecleas imagen esa fuente como nuestra C y luego tipeas la fuente de, por ejemplo aquí, imágenes slash pantalla una J p. D. Y sí, así que tenemos buena la fuente ahora, Y vamos a ver cómo funciona cuando vas a volver a disparar. Como pueden ver, hemos cargado cada imagen. Y como pueden ver, cargamos contra uno verde. Pero claro, puedes cargar otra carne. Entonces cuando hago clic en él, como pueden ver, hemos anunciado ir a cargar, ¿ verdad? Bastante impresionante. Lo cargamos con solo hacer clic en estos abajo. De acuerdo, entonces , um, cuando En este momento necesitamos insertarnos en nuestro sitio web Cómo hacerlo. Bueno, tomemos estos días aquí. Correcto. Entonces vamos a crear un manejador para ello, consiguiéndolos y por imágenes ideales Y ahora con algo como imágenes, y creo que podríamos pasar el niño er bien. No deberíamos usar el HTML interno porque lo vamos a anular más de una vez. ¿ Verdad? Y en nuestro HTML se re analizando todo lo que pasó, probado será más rápido y simplemente descendemos así sobre ah, imágenes arriba en el niño. Por supuesto. Aquí necesitamos cotizar cómo podría A olvida como puedes ver ahora cuando hacemos click en él, estamos cargando imagen. Estamos cargando los mismos medios. Entonces, ¿cómo cargar otras imágenes? Podríamos, por ejemplo, crear una variable, escucho. Y podríamos simplemente insertarnos aquí, ¿verdad? Bomba I plus plus Así que sólo la vamos a aumentar cada vez. Entonces veamos esto. Empezó. Debería ser uno porque estás partiendo de un derecho y bombardear bálsamo, como puedes ver. Nueva imagen bum otra vez. Nueva imagen. Genial. Ahora hay más problemas. El problema es que el fondo no se mueve. Tienes que mover la parte inferior hasta el final de nuestra página web Esa cuerda un poco En primer lugar, debemos quitar la imagen de tesis. Bueno, este fondo tiene que hacerlo. Ah, la carga Más imágenes está involucrada por la carga más fondo Así pero el botón que quiero destruir quiero quitar. Entonces esto se refiere a este patrón y ahora queremos ir a la nota perdonada. Entonces si usas la nota de padre estás en el edificio y luego puedes usar el método remove the child que está quitando child y podemos justo debajo de estos. Entonces por si algo así cuando hacemos clic en él, como pueden ver, estamos Y consiguiendo nueva imagen aquí mientras que lo mismo aquí, aquí, aquí, mueven al soviético. No repitas, pero tenemos la nueva imagen, pero se quita el botón. De acuerdo, entonces no tenemos más y una porra. Cómo saberlo en esta fiesta Volver al final, fuera de nuestra página web. Bueno, deberíamos antes de quitar este botón. También deberíamos arrancar el clon fuera para que podamos crear un botón variable, botón um, botón botón botón, cargar más. Deberíamos ir. A lo mejor cargar más clon de botones que haya un mejor nombre y necesitamos clonar. Entonces necesitamos clonar este derecho? Me refiero a venir días Kalon. Tenga en cuenta esto y funcionaría. No lo sabes. No te lo he mostrado. Y a esto sólo se le llama clonación. Es sólo cumplir todas las cosas de la fecha de días, que es esta vez Poco más abajo, ¿ verdad? Y cuando tenemos que establecer aquí aflac verdadero o falso, verdadero significa que queremos dedo del pie copiar todo dentro. Entonces por ejemplo, este Texas permitió más imágenes. Si lo dijiste también cae. Tenemos problemas. Tanto lo siento. Recuerda sobre poner el rebaño aquí dedo del pie a través. Por lo que ahora mismo aquí hemos conseguido que se cumpla ese fondo por lo que podemos agregar después, por ejemplo, quitarlo a nuestro documento documento. Y nos referiremos al cuerpo y luego alzaremos al niño. Simplemente vamos a cargar más clon de botones. Y como pueden ver, cuando fui en cricket, tenemos buena ya sea la mano. El problema es que cuando vuelvo a hacer clic en él, como pueden ver, ya no está funcionando. ¿ Por qué? Porque la clonación no significa que nosotros clonamos también adjuntamos pares, ¿ verdad? Entonces para repararlo, solo hacemos algo así Después de garras, quiero volver a suceder también. Toe Oakley en clic incluso bomba derecha. Como se puede ver, se está agrietando cinco. Ahora cuando volvemos a hacer clic bien, nos hemos metido en las imágenes libres. No deberíamos poder hacer click en él. Correcto, Así que deberíamos crear algún tipo de condiciones fuera. Entonces si yo es mayor que cuatro entonces bueno, menor que cuatro, entonces invocar cosas así, ¿ verdad? Está bien. Bom bom bom. No está funcionando en más derecho así que no tenemos un más cercano, pero la carga Más imágenes deberían desaparecer después de que conozcas el después de algunas cosas como esa. Si yo es igual dedo del pie bien, no igual a libre. me limitaría a no invocar de nuevo la operación de clonación. Entonces esta parte no será invocada ¿Está bien? Está bien. Entonces, como esa bomba mucho si Eisner igual a liberar algo está mal. Pero no sé lo que nosotros tumba bomba sensorial desigual Si no estoy equipado de libre, um, si soy igual a demasiado lejos Así por supuesto porque tenemos la incriminación aquí. Por eso cometí este error. Como puedes ver, aunque estés avanzado, programador tu casa haciendo hombres en muchos me seis música simple Porque puedes verlo el ojo después de esto se va antes. Entonces si simplemente no queremos que sea por una carga, más imágenes ralentizaron más imágenes. Y ahora, como pueden ver, está funcionando bien. Cargamos todas las energías posibles en eso está todo encendido. ¿ Sabes que ahora mismo necesitamos entrar en discreto si quieres. Queremos toe tener nuestro guión, trabajando con nuevas imágenes que nos adherimos. Por lo que estos son guión problemático que podrías actualizar Vie, por ejemplo. Algo lo haría Scott Ajax. Después podrías revisar desde ellos base de datos si hay más imágenes y obtener fuentes de ellas. Por lo que probablemente esta sería una mejor manera de hacer cosas como esa. No obstante, ahora mismo, no conocemos a Ajax. Y por tu culpa, ¿ tienes que montar el abrigo con este aspecto? Creo que el aprendizaje es Escuchar, esas fuera herramientas útiles por ello. Vas a decir bruja de banda y al mismo tiempo, mejorar la experiencia de usuario en tu sitio web. Esa es sólo esa lección. Muchas gracias. 68. Precarga de imágenes: Hola. hoy te mostraré cómo carga las imágenes solo cuando se necesiten. Porque a veces cuando el usuario razona su sitio web, no ve todas las imágenes posibles que inicien el inicio, ¿ verdad? No va a desplazarse hacia abajo la mayoría del tiempo. Y por ello, puedes guardar tu vendaje. Y al mismo tiempo, el usuario cargará tu sitio web más rápido porque no necesitará cargar todas las imágenes posibles que se esconden en algún lugar, ¿ verdad? Puedes precargarlos. Puedes cargarlas cuando creas que podrían ser necesitadas pronto. Por ejemplo, cuando se está desplazando hacia abajo justo cuando hay un pergamino también te puede encantar ¿verdad? Porque nos hemos puesto desiguales en el desplazamiento. Podríamos hacerlo con un rival parejo en scroll y el tipo se está moviendo hacia abajo y está muy cerca la imagen al final fuera, ya sabes, contenido. Y pronto debería haber imágenes. Deberíamos pre bajar los archivos de imagen porque él no lo diría ni algo así, o deberíamos precargarlo como 500 píxeles antes, ¿ verdad? Algo así también se llama, por ejemplo, cuando alguien está teniendo un slider justo cuando hay un slider con imágenes de dinero puedes pre Law escribió. Se puede cargar en las imágenes que son visibles que se inician. Pero cuando hay más imágenes que no se ven, puedes cargarlas cuando el usuario apenas las va a decir pronto. ¿ Verdad? Entonces es cuando usas algo así. Y ahora vamos a hacerlo bien. Cómo pre bajar el tal vez niño para cargar imagen solo con JavaScript cómo hacerlo. Por lo que tenemos aquí dif para imágenes donde comenzaremos nuevas imágenes tenemos conseguir batón si la identificación carga más sobre botón. Y tenemos la única imagen de este arranque. Correcto. De acuerdo, así que tenemos algo así. Te tenemos ventanilla en carga. Nosotros lo tenemos. Esta carga más botella y en el click, incluso vamos a invocar esa carga. Funcionan las imágenes deficientes y cómo crear una imagen en javascript Con el fin de hacerlo. Solo necesitas hacer algo así. Imagen Var. Nueva imagen. De acuerdo, entonces ahora mismo tenemos una imagen sin la fuente. Tenemos que fijar la fuente. De acuerdo, Entonces, ¿cómo hacerlo? Simplemente tecleas imagen esa fuente como nuestra C y luego tipeas la fuente de, por ejemplo aquí, imágenes slash pantalla una J p. D. Y sí, así que tenemos buena la fuente ahora, Y vamos a ver cómo funciona cuando vas a volver a disparar. Como pueden ver, hemos cargado cada imagen. Y como pueden ver, cargamos contra uno verde. Pero claro, puedes cargar otra carne. Entonces cuando hago clic en él, como pueden ver, hemos anunciado ir a cargar, ¿ verdad? Bastante impresionante. Lo cargamos con solo hacer clic en estos abajo. De acuerdo, entonces , um, cuando En este momento necesitamos insertarnos en nuestro sitio web Cómo hacerlo. Bueno, tomemos estos días aquí. Correcto. Entonces vamos a crear un manejador para ello, consiguiéndolos y por imágenes ideales Y ahora, con algo como imágenes, y creo que podríamos pasar el niño er bien. No deberíamos usar el HTML interno porque lo vamos a anular más de una vez. ¿ Verdad? Y en nuestro HTML se re analizando todo lo que pasó, probado será más rápido y acabamos de descender así sobre ah imágenes arriba en el niño. Por supuesto, aquí necesitamos cotizar. ¿ Cómo podría un olvida como puedes ver ahora cuando hacemos clic en él, estamos cargando imagen. Estamos cargando los mismos medios. Entonces, ¿cómo cargar otras imágenes? Podríamos, por ejemplo, crear una variable que escucho y podríamos simplemente insertar aquí, derecha Bomb I plus Así que sólo vamos a aumentarla cada vez. Entonces veamos esto. Empezó. Debería ser uno porque estás partiendo de un derecho y bombardear bálsamo, como puedes ver. Nueva imagen bum otra vez. Nueva imagen. Genial. Ahora hay más problemas. El problema es que el fondo no se mueve. Tenemos que mover el fondo al final fuera de nuestra página web que cuerda un poco. En primer lugar, debemos quitar la imagen de tesis. Bueno, este fondo tiene que hacerlo. Ah, la carga Más imágenes se involucra por la carga Más botones así pero el botón que quiero destruir quiero quitar. Entonces esto se refiere a este patrón y ahora queremos ir a la nota perdonada. Entonces si usas la nota de padre estás en el edificio y luego puedes usar el método remove the child que está quitando child y podemos justo debajo de estos. Entonces por si algo así, cuando hacemos clic en él, como pueden ver, estamos y obteniendo nueva imagen aquí mientras que lo mismo aquí, aquí, aquí, mueven al soviético. No repitas, pero tenemos la nueva imagen, pero se quita el botón. De acuerdo, entonces no tenemos más y una porra. Cómo saberlo en esta fiesta Volver al final, fuera de nuestra página web. Bueno, deberíamos antes de quitar este botón. También deberíamos arrancar el clon fuera para que podamos crear un botón variable, botón um, botón botón botón, cargar más. Deberíamos ir. A lo mejor cargar más clon de botones que haya un mejor nombre y necesitamos clonar. Entonces necesitamos clonar este derecho? Me refiero a venir días Kalon. Tenga en cuenta esto y funcionaría. No lo sabes. No te lo he mostrado. Y esto sólo se llama clonación Es sólo cumplir Todas las cosas de la fecha de los días, que es esta vez Poco más abajo, ¿ verdad? Y cuando tenemos que establecer aquí aflac verdadero o falso, verdadero significa que queremos dedo del pie copiar todo dentro. Entonces por ejemplo, este Texas permitió más imágenes Si dijiste También cae. Tenemos problemas. Tanto lo siento. Recuerda sobre poner el rebaño aquí del dedo del pie a través. Por lo que ahora mismo aquí hemos conseguido que se cumpla ese fondo por lo que podemos agregar después, por ejemplo, quitarlo a nuestro documento documento. Y nos referiremos al cuerpo y luego alzaremos al niño. Simplemente vamos a cargar más clon de botones. Y como pueden ver, cuando fui en cricket, tenemos buena ya sea La mano. El problema es que cuando vuelvo a hacer clic en él, como pueden ver, ya no está funcionando. ¿ Por qué? Porque la clonación no significa que nosotros clonamos también adjuntamos pares, ¿ verdad? Entonces para repararlo, solo hacemos algo así Después de garras, quiero volver a suceder también. Toe Oakley en clic incluso bomba derecha. Como se puede ver, se está agrietando cinco. Ahora cuando volvemos a hacer clic bien, nos hemos metido en las imágenes libres. No deberíamos poder hacer click en él. Correcto, Así que deberíamos crear algún tipo de condiciones fuera. Entonces si yo es mayor que cuatro entonces bueno, menor que cuatro entonces invocar cosas así, ¿ verdad? Está bien. Bom bom bom. No está funcionando en el más derecho. Entonces no tenemos un más cercano pero la carga Más imágenes deberían desaparecer después de que conozcas el después algunas cosas como esa. Si yo es igual dedo del pie bien, no igual a libre. me limitaría a no invocar de nuevo la operación de clonación. Entonces esta parte no será invocada ¿Está bien? Está bien. Entonces, como esa bomba mucho si Eisner polla todo para liberar algo está mal. Pero no sé lo que nosotros tumba bomba sensorial desigual Si no estoy equipado de libre, um, si soy igual a demasiado lejos Así por supuesto porque tenemos la incriminación aquí. Por eso cometí este error. Como puedes ver, aunque estés avanzado, programador tu casa haciendo hombres en muchos me seis música simple Porque puedes verlo el ojo después de esto se va antes. Entonces si simplemente no queremos que sea por una carga, más imágenes ralentizaron más imágenes. Y ahora, como pueden ver, está funcionando bien. Cargamos todas las energías posibles en eso está todo encendido. ¿ Sabes que ahora mismo necesitamos entrar en discreto si quieres. Queremos toe tener nuestro script, trabajando con nuevas imágenes que nos adherimos Así que estos son script problemático que podrías actualizar vie, por ejemplo. Algo lo haría Scott Ajax. Después podrías revisar desde ellos base de datos si hay más imágenes y obtener fuentes de ellas. Por lo que probablemente esta sería una mejor manera de hacer cosas como esa. No obstante, ahora mismo, no conocemos a Ajax. Y por tu culpa, ¿ tienes que montar el abrigo con este aspecto? Creo que el aprendizaje es Escuchar esas fuera herramientas útiles por ello. No se puede decir bruja de banda y al mismo tiempo mejorar la experiencia del usuario en su sitio web . Esa es sólo esa lección. Muchas gracias. 69. Diapositivas: Hola. hoy te mostraré cómo crear una rebanada. O slash O es sólo imágenes que están cambiando después de unos segundos. Algo así es muy útil porque puedes mostrar en la página principal más de una imagen en una posición. Es muy útil en tiendas para que los usuarios puedan ver promociones que van en esta tienda. Correcto. Incluso puedes actualizar este creep para hacer algunas transiciones entre imágenes. Como puedes ver ahora, esto se ve mejor, ¿verdad? Esa animación hará en el siguiente menos ahora mismo vamos a crear una presentación de diapositivas sencilla que apenas está cambiando las imágenes después de unos segundos. OK, entonces tenemos en el índice html La ligera mostró si y lo tenemos llevado aquí a estas variable y ahora nos gustaría insertar imágenes ahí porque al inicio no tenemos nada, correcto. Por lo que queremos insertar sus todas estas imágenes cómo hacerlo. Bueno, por ejemplo, podemos crear un aire I imagina fuentes y solo estamos tecleando tus fuentes pantalla derecha una pantalla también, y sin pantalla. Entonces esta es una buena idea hasta la fecha lo hizo. De esa manera podríamos quizá incluso usar. Ya sabes que los números quieren liberar con el aireador it para que pudiéramos crear la variable I y cambiar etcétera lo estaría haciendo cuando los tiempos en lecciones anteriores. Pero oye, los nombres pueden ser diferentes. En ocasiones se quiere posicionar el uso. Ya ves CEO cirujano Derechos de optimización gigante. Tienes que nombrar tus imágenes correctamente, ¿verdad? Entonces hagámoslo así fuera de curso. También podrías insertar imágenes aquí al principio a la derecha. Podrías insultar imágenes aquí, y si lo hicieras, solo podrías conseguirlas usando el documento. Obtén la ventana de presentación de diapositivas de elementos y simplemente entra a la derecha de China, así que no hay problema. Puedes hacerlo en ambos sentidos, pero leamos el que he elegido. Y ahora vayamos a todas estas fuentes de imágenes. Y vamos a crear Vamos a cargar estas imágenes ¿verdad? Entonces vamos a crear un cuatro lope. Inicialicemos el I 20 Y si estoy más bajo que las imágenes fuentes de longitud de punto, vamos sólo cada vez después de cada iteración después de cada vez, la mirada va a pasar a las dos que quiero. Entonces ahora podemos, por ejemplo, crear aquí una imagen temporal y hacerlo peso muerto. Por lo que la sección de imágenes es muy importante en esta lección. Creamos una imagen, y ahora podemos establecer la fuente de esta imagen creada. Para la imagen es una carpeta así. Y ahora sólo necesitamos apegarnos. Ahí, Amy. Sólo fuente. Bueno, bien. Está bien. Así. Y no a uno nos referimos. Vaya, entonces vamos al insecto de fuego al abrigo de red. Como se puede ver, se cargan imágenes. Ahora sólo necesitamos dedo del pie agregarlas a nuestras armas. Entonces para hacerlo, solo escribimos leve show, upend al niño. Y cada vez que levantamos la imagen que se creó aquí, y como se puede ver ahora aquí, conseguir todas las imágenes allí. Y si quieres agregar una imagen más, no hay problema Solo por aquí una coma y el nombre fuera de la imagen que te adhieres, verdad? Y tu programa sólo va a funcionar. Siguen encontrando Ok. Entonces ahora vamos a esto corbatas porque, oye, no lo cazo para que se vea así. Yo no. Yo quiero que se coloquen el uno sobre el otro. De acuerdo, Entonces para hacerlo, vamos a la presentación de diapositivas y a las imágenes. Y me dijeron la posición a absolutar la posición absoluta significa. Entonces estamos sacando las imágenes de flujo y su posición absoluta al cuerpo. Entonces a la esquina superior izquierda, derecha. Lo que significa también que cuando nos adherimos, por ejemplo, ataques aquí no estás, es que esto toma acaba de desaparecer. Y así deberíamos ir a la presentación de diapositivas y ponernos aquí. En primer lugar, el 384 y 373 107 como con y altura, ¿ verdad? Así que así. Como puedes ver ahora podemos ver a estos tipo, pero tenemos buena dirección un problema porque, ya sabes, si quieres posicionar esta gran diferencia de, por ejemplo, cuando escribes tu izquierda 20 pixels y top 20 nos recoge, no lo eres, es que se ve así en. Y si haces aquí algún texto, te das cuenta de que el texas bajo este derecho, Así que deberíamos posicionar y relacionados con el limón A. Ese es el elemento padre. Simplemente levemente espectáculo en esta situación. Entonces deja que el peso muerto. Y como pueden ver ahora, tenemos una posición relacionada con esto. Por supuesto, es Ahora, esta cosa está ahora debajo de ella, pero porque nosotros es elemento absoluto. ¿ Verdad? Entonces esto está volando en este momento, Pero las fiestas de estanque más importantes que tenemos ahora es posicionarse hacia esto y ligeramente a la derecha. Simplemente podemos quitar esto y esto se colocará cuando deba estar. De acuerdo, entonces ahora podemos mover la presentación de diapositivas alrededor de sus sitios web. ¿ Quién puede hacer margen a la izquierda? Por ejemplo, 50 picks está en todo. Um, emoción de partido comerciante y todo se va a mover. Ser movido. Y ya sabes, esta cosa está tomando el lugar, sabes, ya sabes, y como está tomando el lugar, puedes agregar más cosas en tu página web. Y la mayoría de las veces tendrás más cosas en tu arma que solo una escritura más ligera. Todo se verá bien. Ok, así es como lo hacemos. Por lo que está correctamente configurado en nuestra página web, ¿verdad? Y después no tenemos ningún problema. Y ahora también deberíamos pensar cómo cambiar estas imágenes de una a otra. Podríamos hacerlo con muchas formas, por ejemplo, estableciendo imágenes que empiecen a mostrar non y luego cambiar el bloque de visualización. Podríamos cambiar la capacidad. Se podría decir que cambió la posición del índice establecido. Yo elegiría la opacidad. De acuerdo, entonces elegiría la opacidad. Y siempre dije capacidad para cero fuera de todos los elementos en el inicio. Como pueden ver, nosotros no los vemos. Me gustaría solo ver el 1er 1 Así que para obtener la primera imagen, usaré el JavaScript. No hago cosas como Slide Show y luego entro en notas de Chad y conseguir al primer hijo que acabamos de tener en grande Zero y dijo la clase de atributos, también. Ah, a algo que va a hacer que se vea. Entonces vamos a crear la clase que se llamará, por ejemplo, actual. Entonces vamos a ir a la presentación de diapositivas y crear una corriente de clase y vamos a establecer la capacidad a una. Como pueden ver ahora, tenemos una imagen aquí. Fuera de curso. Tenemos más de ellos. Cuando vamos a aquí, se puede ver que los tenemos a todos. Pero este gas tiene corriente dicho aquí en adelante, podemos ver ahora queremos simplemente quitar la corriente de aquí y añadirla aquí, luego quitar de aquí y añadirla aquí, quitada de aquí y añadida aquí. Entonces sólo queremos hacer terrenos aquí, ¿verdad? ¿ Cómo hacerlo? Bueno, cuando necesitamos hacer algo más de una vez, mayoría de las veces están usando pegamento. Pero queremos hacerlo después de algún tiempo. No queremos. Ya sabes, alguien lo cambie al instante. Debe tomar unos segundos. Apenas se puede ver esta imagen. La persona que está visitando tu página web, ¿verdad? Entonces hagamos lo que se puso en. Terrible. Right Said Intervalo solo va alrededor de intervalos s para que podamos ejecutar una función que va a hacer algo con él. Por ejemplo, cada dos segundos justo cada dos segundos, quiero cambiar el así que quiero que Teoh cambie al primer tipo de nuevo a nada. Está bien. Y quiero cambiar al siguiente tipo, que es 12 actual después de un segundo. Como puedes ver después de un segundo que puedes simplemente cambiarte después de mexicano, nada ha cambiado porque, ya sabes, estamos cambiando la misma imagen cosiendo para cambiar estos valores Aquí. Vamos a crear una variable I y hagamos algo así. Yo más uno y vamos de cabeza yo uno cada vez que sabemos que ahí dicha función de intervalo se ejecutará invocada. ¿ Verdad? Entonces porque fuera de ella ahora no podemos cambiar las imágenes. Eso es con más rápido. Entonces no usamos nuestro tiempo bomba de un segundo y luego bombardear Nada. ¿ Por qué? Porque nuestra zona tiene buenos índices como 01 y dos. Entonces va a funcionar hasta que esté aquí. Por ejemplo, uno derecho uno más uno son dos y después se va al extranjero. Rompe. Correcto. Entonces, ¿cómo resolver este problema? Podemos, por ejemplo, usar ese modelo cuando se usa de esa manera. No conoces a este operador. Ya he hablado de la nueva sección de operadores Cuando tienes aquí, 00 modo libre es 00 más uno burlado libre es uno. Es el resto justo fuera del recordatorio fuera de la división. Entonces el número máximo aquí será ahora al número máximo Aquí será también para escuchar, pero aquí siempre será uno más grande. Entonces ahora cuando, Como pueden ver, está cambiando y esto ahora está volviendo a la primera imagen. Entonces así es como podemos lograrlo. Podemos, por supuesto, aumentar debe incrementarse. Cuando alguien está visitando tu página web. Necesita mirar tus fotos, ¿verdad? Y, bueno, acabamos de morir. Sí, tenemos la presentación de diapositivas Puedes actualizar con hombres y cosas como en estas. Podrías hacer que se vea mejor porque se ve horrible ahora mismo, pero es justo después de ti. Simplemente dice la CIA ahora mismo. JavaScript. Entonces hazlo por tu cuenta. Y en la siguiente lección, les mostraré cómo hacer que algo se vea mejor, que vender la lección. Muchas gracias. 70. Animación en JavaScript: hola Hoy te mostraría cómo hacer animación en Java. Omitir cómo hacer la transición entre imágenes. Cómo dedo del pie hacer tu trabajo como mantener aún más dinámico. De acuerdo, entonces para hacerlo, solo necesitas escribir tu transición y en el tiempo de transición que debería tomar. Como pueden ver, no hemos sido transición. De acuerdo, entonces, ¿qué es eso? La transición es un arsenal de techo poco, pero primero pensemos en esto. Transición. transición es una propiedad de CSS, Y estas propiedades dicen es que si hay ah, se quedó antes y se quedó antes era un cero de paucidad, y el nuevo estado es positivo. Entonces necesitas cambiar de 0 a 1 en un segundo. Aquí puedes decir exactamente lo que quieres cambiar. Por ejemplo, opacidad ¿verdad? Debe estar en el cambio. O tal vez sólo tenemos otras cosas como esa. Pero bueno, ¿eso se apodera de bienes? Ya debiste saber al respecto. Si no te limitas a seguir adelante y leer sobre la transición, solo hay muchas cosas que hacer, ¿ verdad? Yo sólo estoy parado con lo básico. Por lo que sólo está haciendo la transición entre cero y uno en un segundo. Entonces si quieres mostrarle a una persona, por ejemplo durante mucho cuatro segundos una imagen antes de la transición, puedes hacerlo de esa manera, verdad? 1234 Y y tenemos una transición al nombre lo mismo. El problema es que la imagen también está desapareciendo al instante. Entonces se ve un gran raro, cierto, Así que podemos cambiarlo. Por ejemplo, escriba tinta en transición. Y quiero, por ejemplo, hacerla desaparecer en un segundo. Pero quiero mostrarlo en dos segundos. Ahora mismo. 1234 terminado desaparecería más lento y aparecerá la siguiente imagen. Entonces esto es solo que también lo puedes ver? Acabamos de crear una animación en dos segundos. Pero hay un pequeño problema que cumplir. Como siempre, el problema es Internet Explorer. Se apoya la transición del experto en Internet 10 e incluso en el viejo Chrome Firefox aparente que había hermanos así. No se apoya ahí. Es necesario utilizar prefijos de proveedor. Entonces, por ejemplo, algo así. Pero este es un tema para el curso de Sears. Está bien. Um por lo que esto no es compatible en todos los navegadores Web, sino en la mayoría. Probablemente sea, ya sabes, pronto seremos apoyados. En todos eran hermanos que la gente está, um, usando y sabes que puedes hacerlo de diferentes maneras. Pero lo bueno es que ahora es fácil de hacer. No tardaría mucho tiempo. Es bueno en el rendimiento. Y la verdad es que por qué dar a la gente que tiene todos los navegadores de bro buscando buenos sitios web si siguen creando sitios web que están buscando perfectamente, que están teniendo animación, otras cosas como esa para las personas que tenían navegadores antiguos, los siguen usando bien. Entonces pensemos que no va a hacer cuando se crea una transición no va a hacer para romper todo. Debido a que Aziz ya se han dado cuenta de la presentación de diapositivas, todavía es una orden de trabajo ¿verdad? Está funcionando bien. Las imágenes están cambiando, pero es simplemente instantáneamente, pero sigue funcionando, así que no debes preocuparte por ello, creo, y bueno, así es como haces cualquier cosa hecha, cualquier cosa quiero decir realmente cualquier cosa que pueda decir, por ejemplo, que el tamaño de la imagen de inicio debe ser 384 correcto, y podemos cambiarlo más tarde a por ejemplo, con, um, um, 500 nos recoge lo que sea . Y como pueden ver, tenemos que poner a ningún grandote, luego las escuelas abajo y bombardear. Para que puedas animar cualquier cosa. Se puede hacer algo. Al igual que, por ejemplo, fusionar izquierda 50 picks es correcto. Lo que sea. Mira esto. 123 o cinco. Y fue como, Hey, vino de este lugar, ¿no, hijo? Y lo haces en Lea. Si tiene como más tarde, correcto. Lo único que hiciste fue aquí. Por lo que permitimos que la gente esperara segundos antes de la siguiente transición. ¿ Verdad? Y tú involucraste la transición eliminando una clase y luego agregando la clase más tarde de vuelta. De acuerdo, eso está todo en la lección. Muchas gracias. 71. Animación usando setInterval: Hola. En la última lección, estamos creando una animación usando la transición, pero las transiciones son y soportadas en todos los navegadores Web. Si tienes que apoyar a viejos hermanos como Intern Express 799 y algunos muy viejos Firefox, entonces sí, la unidad es el escenario. Terrible. Pero si no tienes dedo del pie, no lo hagas de esa manera. Eso te voy a mostrar pronto porque es más lento y bueno, es más difícil escribirlo. Y lo siguiente es que no tendrás CSS en un solo lugar, y los de Java podrían estar en otro lugar. De acuerdo, entonces esta no es la mejor solución. Deberías evitarlo. Esto que ahora debes usar transiciones. Se puede hacer mucho más con ellos. Esta es solo una poderosa manera de salir de hacer animación. No obstante, si es necesario, entonces Onley. A continuación, utilice el dicho Intervalo. Esa es la solución para crear animación en JavaScript. De acuerdo, ¿por qué dijo Intervalo? Porque, Bueno, mira cuando algo se está moviendo, la verdad es que se está moviendo después, por ejemplo, 30 milisegundos cada estrella a mí segundos. Sólo se está moviendo. Por ejemplo, un uno posiciona. Es tan, tan, tan duro. Solo necesitamos crear un entorno. Terrible que se va a hacer en la función. Mueve algo cada por ejemplo, Dile demasiados segundos y sí, solo va a moverlo bien. Tenemos que simplemente movernos. Por ejemplo, estas cajas que tenemos aquí en Lo tenemos aquí para poder movernos. Por ejemplo, la posición izquierda del costado. Cómo hacerlo. Sólo necesitamos el acceso del dedo usando esto. No, no, no, no. Esto Pero necesitamos crear una variable especial que almacenemos esto. ¿ Por qué? Porque el intervalo de venta está realmente en ventana porque siempre está en ventana. Éstos accederían aquí. El ventanal, correcto. Entonces estamos usando el yo ahora, y podemos ir al estilo que queda y no se puede asignar aquí, por ejemplo, alguna vez capaz que se incrementará en. Entonces por ejemplo, I Eso igual a cero y podemos sólo un signo aquí me voy a aumentar cada vez para establecer intervalo alrededor de la disfunción. ¿ Verdad? Entonces cada 30 yo segundos y necesitamos sumar los picos al final para que Ah, porque necesitas después del número de píxeles, ¿ verdad? de Obama se pueden ver que se está moviendo dan ganas de moverlo más rápido. Entonces es pero es más pequeño para, pero quita mucho más poderes de computadora. Se puede decir que se está moviendo un poco más pequeño para así que así es como lo haces. El mío. Puedes animar cualquier cosa con ella que puedas hacer sobre. Puedes disminuir la opacidad, puedes hacer lo que quieras. Se puede cambiar. Acabamos de depender de ti. No obstante, esto es sólo un poco más largo. Y como puedes ver, estamos accediendo a tamaño desde este lugar desde el JavaScript. Es mejor dedo del pie realmente tener CSS en lugar diferente. Ah, de javascript. De acuerdo, no deberías tener ni las dos. Bob, deberías tener ambos en uno. Bien. Entonces Bueno, tal vez hablemos de cómo detenerlo. Porque cuando corremos, lo necesario sería simplemente correr. Entonces, ¿cómo detenerlo? Deberíamos despejar el intervalo, ¿no? Porque algunas personas pensando duro que si yo soy, por ejemplo más grande que 100 entonces vamos a bajar a 100 seguir haciéndolo. Si no, entonces sí lo sabes, verdad? Está bien, es parada. Pero la verdad es que sigue mal. Pero no hay nada que correr aquí, ¿verdad? Deberíamos detener la totalidad este intervalo para que pudiéramos necesitar crítico ocho, por ejemplo, de son capaces, por ejemplo, Animation idea lo llamará así, y tenemos que despejarlo. Entonces si soy mayor a 100 entonces quiero despejar el intervalo con la idea de animación así . Entonces cuando nos refrescamos, como pueden ver, se está deteniendo como hace un segundo. Pero ahora mismo, um, se está deteniendo. Realmente se está parando bien. No va a ejecutar y otras operaciones dentro. Entonces otra vez, úsalo solo si tienes dedo del pie. Eso está todo en la lección. Muchas gracias. 72. Galería con miniaturas: Hola. hoy te mostraré cómo crear una galería con combinación con miniaturas que se vean así . Entonces cuando la persona está en tu página web, puede fácilmente moviendo la boca sobre las miniaturas, ver la versión más grande fuera de la imagen en otro lugar como aquí. Esto es muy útil porque estás ahorrando el espacio en tu sitio web y tu mejorando la interfaz. ¿ Verdad? Porque si tuviéramos todas las imágenes grandes aquí, se necesitaría un montón de pala con justo y probablemente en algún lugar aquí. Por lo que tener algo así es mejorar la experiencia del usuario en tu sitio web. Por lo que verá la versión más grande. Él puede ver exactamente si es el artículo que está buscando y más tarde puede simplemente, por ejemplo, en algo a canasta. Por lo que tratamos de crear una imagen de galería en esta lección. De acuerdo, ya he agregado imágenes como puedes ver a nuestra página web para imágenes que queremos usar y he creado un diff que acabamos de llamar galería de imágenes que va a empezar todo como imagen principal , donde queremos poner el imagen que es la más grande y cuatro imágenes que fueron ah que estaban en este sitio web, ¿ verdad? Estos mi sitio web, el sitio web polaco sobre partes para horizontal vertical, etcétera de Brian Y realmente, esto está mejorando el dice's hay algo bueno que hacer. Ah, para hacerlo. Ah, vamos a hacerlo. Tenemos hemos añadido estas imágenes aquí. Como pueden ver, les hemos llegado todos los bichos empiezan Y ahora me gustaría, ya saben, hacerlos saben, más pequeños. Cómo hacerlo. Bueno, creo que deberíamos adherir a una clase que llamará a Tom nombre. De acuerdo, no hay co pagarlo y acelerarlo aquí y nada ha cambiado. Tenemos que ir al Tom Stites CSS y tipos de vuelo, por ejemplo, con 60 picos es Y ahora, como puedes ver, tenemos instantáneamente pequeñas imágenes y algunas personas ahora serían como, Hey, pero vuelves a dimensionar estas imágenes. Deberías tener ah, imágenes pequeñas y grandes imágenes. ¿ Verdad? ¿ Y qué tengo que decir? Decir a estas personas, esta solución también es mala porque realmente, si tienes imágenes que son grandes y pequeñas, tienes que guardar dos versiones de estas imágenes. Tienes que crear dos versiones de estas imágenes. Se necesitan los del tiempo. Eso es una cosa. Segundo es que estás incrementando la solicitud a tu página web ahí que van a haber más solicitudes. Tu sitio web que significa sitio web era. Cargamos más lento, incluso más lento. Si hay elementos de redimensionamiento ings off en tu página web y además de éstos, podrías ayudar a tu tal disfrutando de la optimización, ¿ verdad? Porque tendrían por las mismas imágenes aquí y por las mismas imágenes que son pequeñas, pequeñas y nenas que eso simplemente,ya sabes, cardio cirujano, cirujano,se uniría ya sabes, cardio cirujano, cirujano, cirujano, a la optimización. Entonces realmente, creo que la solución es simplemente mejor y es más rápida de hacer y también va a funcionar mejor. Entonces no tenemos Tamponnaise, ¿verdad? Y ahora hagamos algo con ese país. Entonces, por ejemplo, cuando tenemos un ratón sobre uno de ellos, queremos ver una línea roja debajo de ella, ¿ verdad? Entonces, ¿cómo hacerlo? Bueno, podemos crear algo. Yo taponé efecto traspaso y podemos añadir el borde en la parte inferior dos picks else soul se lee, por ejemplo, podríamos crearlos en todas partes, Pero hagámoslo diferente ahora puedes hacer un l otro indicador, pero es importante hacer terminar deCurtis. Entonces el usuario señaló, Ah, eso es algo que está cambiando. Q. Derecha, Onda. Como puedes ver, creamos algo que pero yo d está saltando. Por qué es saltar Porque la fusión está funcionando cuando lo tienes aquí, la fusión es decir que tienes que mantener que el matrimonio es correcto. Podemos cambiarlo por algo así como fusionarnos sobre el fondo. Cambiando a menos dos nos recoge. Como puedes ver ahora todo funciona bien. De acuerdo, Entonces después de mover la boca sobre una de la cosa, nos gustaría mostrar algo en la imagen principal. También deberíamos declarar aquí esta imagen principal y cambiar el con, por ejemplo, el tamaño de estos chicos por tan 450 correcciones y altura, ella será 263 fotos. Entonces tenemos que hacer espacio aquí mismo. Y queremos poner sus las imágenes. Por lo que nos gusta insertar en primer lugar algo en la imagen principal quisiera insertar aquí un emit de muestra porque en este momento sólo hay el derecho vacío profundo. Entonces vamos a crear um, 100 para esa imagen principal. ¿ Verdad? Documento. Consigue un limón por I. D Maine imagen. Y vamos a añadir imagen en ella. Cómo crear una imagen. Sólo tenemos que hacer algo así, como aprendimos en la sección de imágenes, para que pudiéramos. Pero ahora una imagen y podemos agregarle fácil sección así. Y como puedes ver ahora, Oh, tenemos que tu imagen vacía, justo que debemos adherir ahora fuente, por ejemplo. Por lo que podemos usarlo ahora bastante fácil cambiarlo a la por ejemplo, primera imagen. Entonces podemos hacer algo así como la imagen, esa fuente y cómo obtener la primera imagen. Podríamos hacerlo, por ejemplo, algo así. A imágenes y luego macanese 5 17 Y como puedes ver, hemos llegado aquí ahora con la primera imagen, correcto, porque necesitamos partir de algo porque el usuario no necesita dedo del pie al instante. Tiene la boca aquí, ¿verdad? Imaginemos eso, porque se ve un poco mal. Fusionarse en fondo, dice Tim Pick en Dwell. Ahora tenemos que cambiarlo, correcto, Pero creo un segundo sobre la solución que acabamos de elegir. ¿ Es bueno? Bueno, está funcionando, pero ahora imagina que tienes muchos productos. Al igual que, por ejemplo, en estos sitios web. ¿ Verdad? Entonces cuando vamos a otro sitio web, hay muchos más productos que tendrías que hacer por cada producto creado. JavaScript. Ya sabes, necesitarías cambiar estas líneas. Necesitarás dedo involucrado, una función especial. Por ejemplo, necesitarás dedo del pie que tengan una canasta. Cinco por cada uno por cada html cinco diferentes javascript cinco. Estos simplemente tomarían tiempo libre a Lourdes Lourdes. Nuestro abrigo debe ser universal. Debería funcionar cada vez. Entonces, ¿cómo hacerlo? Bueno, aquí tenemos una clase algo, ¿verdad? Podríamos usarlo para conseguir el viejo Romney's así podríamos hacer algo como documento obtener elemento por nombre de clase y guardarlo aquí. Onda. Ahora podemos hacer sólo algo así. Tomlin's obtienen atributos y como nuestro c bien, y eso es todo, Oh, familias de cero porque empresas en error ¿verdad? Y como puedes ver ahora conseguimos la primera imagen. El cool de esta solución es que es universal. Ahora, cuando cambiemos el orden, como pueden ver, va a cambiar el primer cheque de imagen, conseguir la primera foto, ¿ verdad? No importa lo que hagamos aquí. Podemos a ti una imagen. Si solo tomamos las y las imágenes, tomaría apenas el 1er 1 Así que es muy, muy cool. De acuerdo, entonces un D's en código universal para establecer la primera imagen. Ahora deberíamos ir a todos estos tipos. Y cuando tengamos un buen ratón sobre uno de ellos, bueno, deberíamos cambiarlos. El tipo de aquí. ¿ Verdad? De acuerdo, Así que usemos el yo pienso para bajo, porque nosotros para pasar por todos ellos. Y usemos la tierra de los nombres de Tom como condición, porque quieres pasar por todos ellos, ¿ verdad? Y ahora queremos sumar un par So Tom juega. Está bien. Casi terminó. Eso será un pero que estará invocando disfunción cuando tengamos el ratón sobre una de estas empresas. Correcto. De acuerdo, entonces ahora mismo necesitamos simplemente cambiar la fuente de imagen que está aquí. Derecho ¿A qué? Por ejemplo, este punto obtener una fuente tributaria. Y eso es todo. Mira, está trabajando. Bueno, esa parte no fue difícil. Como puedes ver, algunas cosas podrían parecer de corazón cuando estás buscando javascript, pero realmente no lo son. Ah, Bueno, hay algo un poco muy importante ahora. Ahora, mira, cuando iniciemos el sitio web, sería una buena idea dedo del pie tener en algún lugar un indicador apagado en el Tam. Nay. Al igual que, por ejemplo, esta línea roja de aquí Porque el usuario podría no saber que tiene que usar la boca por aquí. ¿ Verdad? De acuerdo, entonces, ¿cómo hacerlo? Creo que deberíamos crear una clase especial que solo hagamos lo mismo que se hizo aquí, ¿ verdad? Y sumado al primer tipo. Entonces podríamos, por ejemplo, hacer algo así como empresas fuera de cero y agregar al nombre de la clase. Nombre de clase actual es una propiedad que está almacenando la clase. Es muy útil porque puedes agregar otra clase con solo usar este operador. Y como puedes ver ahora, está indicando que este tipo fue elegido. Se inicia. Y Pero cuando nos movamos con otros, bueno, estos tipos no serán removidos al instante. Tienes que hacerlo manualmente, verdad? Por lo que deberíamos quitarlo cuando estamos moviendo en una fuera de esta que empresas, vamos a almacenar en la variable temporal que sucede. Por lo que el auto y el nombre de Tom que se elige a la derecha. Deberían empezar en algún lugar, para que podamos cambiarlo fácilmente más tarde. Nosotros sí queremos esta corriente, ¿verdad? Sigue funcionando. Um, bueno, no es compañía. nombre de clase fuera de curso debería estar aquí tonto. De acuerdo, entonces aquí ahora debemos quitar de los nombres de jamón actuales del primer tipo. Cuenta con Tom. Nombre Klaus nombre. Y ahora cómo quitar uno de la clase. Porque aquí tenemos muchas clases, ¿verdad? Podríamos no estar manipulando. Y al mismo tiempo, actual y usa lo que notarías que tenemos buen aire, clase actual y empresa cómo quitar en la de ellas. Ya sabes, podríamos, por ejemplo, escribir el Tampa, ya sabes, y se lo va a quitar. El problema es que ¿y si tuvieras otra maravilla que eso podría causar problemas más tarde? Son fríos deben ser universales. Entonces la verdad es que esto es una cuerda, ¿verdad? Entonces podríamos usar e importó que esto pudiera reemplazar de lo que hablo en la sección de cuerdas y podemos usar el que puedes usar ese dedo del pie de metal cambiar la corriente a nada que esté bien y seguro. El que es devuelto por esta función. Y esta disfunción está devolviendo el valor sin la corriente. ¿ Verdad? Entonces esta es solo la clase con el hombre común y la estamos asignando al nombre de la clase. Entonces como puedes ver ahora es quitarlo. Correcto. Entonces está funcionando Bien. Ahora tenemos otro problema. El problema es que cuando me mudé de, por ejemplo, de aquí, el usuario podría no recordar dónde terminó. ¿ Verdad? Aquí puede mirar, pero oye, nueva hora entra. Las peleas deben ser intuitivas. Por lo que es la altura de recitar. Estás en este tipo para que podamos cambiar el templo actual. Es algo a esto. Entonces el que somos, tenemos el ratón sobre y podemos sumar a la cláusula Nombrar una pandilla. El actual de la clase. ¿ Verdad? Como puedes ver ahora, mejoramos la experiencia del usuario en nuestro sitio web, ¿ verdad? Cuando estamos frescos, sabe que está aquí. Cuando entramos en otro, sabe dónde está y cuando sale de la boca, aún sabe dónde está. De acuerdo, así es como haces algo así en. Y como puedes ver, javascript no es tan difícil y también es difícil hacer cosas que están mirando el inicio. Difícil de hacer. Eso es algo que lección. Muchas gracias. 73. Información de herramientas: Hola. hoy te mostraré cómo crear una punta de herramienta que se vea así. Por lo que una punta de herramienta es solo una caja, un contenedor con ataques que está apareciendo junto al elemento que tienes. Ponte la boca encima. Correcto. Y está bien, vámonos. Esto no tenemos ninguna pista. Ahora queremos tenerlo en cualquier elemento que tengamos una clase que se mata a propina. Esta es la mejor solución. Porque cuando Si quieres agregar otra punta de herramienta, tienes que sólo entonces solo en la clase, ¿no? Y lo que va a ser perspicaz, la herramienta punta al contenedor para propina es lo que se escribirá dentro del título. Creo que también es una buena solución porque el título también es bueno para la optimización de seis buscadores . Y además de este título es algo que puede estar en un elementos. Correcto. Así que podrías es probablemente el atributo de mensaje alternativo, Pero ya sabes, este condón en las imágenes que queremos tener que poder agregar en una punta de herramienta sobre cualquier posible elemento. Entonces, por ejemplo, insumos. que puedas, por ejemplo, aquí hay un tipo que necesita hacer algo. Son de una manera un poco diferente o algo así. Eso, ¿verdad? Eso Hagámoslo. Vamos a crear función que llamamos crear consejos de herramientas, acuerdo. Y va a implicar. empezaste después de cargar nuestro sitio web y queremos conseguir todos los elementos posibles que se le diga a la clase. Correcto. Entonces vamos a crear un elementos variables con consejos contados. Está bien, así que aquí tenemos. Bien. Ahora este ancla, esta imagen, esta imagen, esto y esto Si tuviste algún otro tipo con la clase de punta para, también se añadirá aquí. Entonces esto es lo genial es que vamos a ser capaces de instalar una mordida en cualquier sitio web simplemente invocando disfunción. ¿ Verdad? De acuerdo, entonces tenemos que ir a todos los elementos posibles, ¿ verdad? Entonces cuando quieres ir a algo, siempre usas una mirada. Entonces vamos a crear un bucle que empecemos desde cero. Y vamos a crear la condición que hacemos alrededor de esto Esta mirada, siempre y cuando no lleguemos al final de ellos, se fue al último elemento ¿Quién ha dicho? ¿ Verdad? Entonces esto se ve así y sólo necesitamos ahora hacer lo mismo como hicimos aquí, verdad? Necesitamos Teoh a cada elemento posible todas las millas sobre par. Y vamos a escuchar cualquier cosa las horas. Entonces, por ejemplo, a Veamos si está funcionando. Está bien, está funcionando. No está funcionando todo el tiempo, ¿verdad? ¿ Por qué? Por qué está trabajando aquí y por qué no está funcionando aquí. Espero que veas mi video sobre incluso oyentes, porque esta es la situación donde tienes que usar al oyente parejo. Mira, se invoca este método. Tú, ¿verdad? Aquí se invoca la disfunción. Por lo que casi se podía imaginar como si estuviera aquí así, ¿ verdad? Lo que significa que estamos sumando casi más incluso a dos más, casi terminados. Incluso remolcar este elementos una función como esa y estamos anulando en la línea 35 toe todas las imágenes posibles porque también usamos el casi sobre incluso para Tom Nice justo en este lugar. Por eso no está funcionando. Y por eso también debería usar incluso oyentes. De acuerdo, Porque si lo haces de esa manera, bien , um, millas más y aquí también así en incluso oyente millas sobre bum. Como puedes ver ahora, está funcionando bien en todas partes en un imposible. Adamant si quieres soportar todos los navegadores, los años deben usar la casi anulación. Pero si no necesitas hacer eso, ¿él era la cabeza incluso. Escucha ahí. Porque aunque insultes, por ejemplo, por ejemplo, alguien está enchufando bien, um, um, con las puntas de las herramientas. Y ya tenías algo así, entonces estarás como, Oye, por qué no funciona. Oh, simplemente no funciona. Porque fuera usando casi sobre haciéndolo muerto de manera correcta. De acuerdo, así que resolvimos este problema ahora y ahora queremos. Cuando tenemos la boca sobre esto, queremos mostrar un peaje profundo. ¿ Verdad? Pero primero, necesitamos crear una profundidad total. De acuerdo, así que hagámoslo. Y ya he añadido aquí en StaIS el CSS para el to tip. escuché un color de fondo de borde, y la parte más importante del mismo es la posición. ¿ De acuerdo? Tiene que ser absoluto para que podamos moverlo. Conoces el lugar en nuestra página web, ¿verdad? Y también dije aquí, um, fiesta tamaño de teléfono y estudié para mostrar ninguno. Y para empezar vamos a dejar que la parte superior no es importante ahora mismo. No importa. ¿ Por dónde empieza? Correcto, Así que no hacemos Esos kilobytes de aquí. Impresionante. Y bueno, por un segundo que ha cambiado de visualización de ahora en adelante a bloque que es por defecto, derecha, Ondas Puedes ver que no es en ninguna parte porque no creamos estos elementos. Podríamos crearlo aquí manualmente, montar como el I d bam, bam, bam bam! Pero ya sabes, tendrías dedo del pie agregarla en cada sitio web posible más adelante. Creo que es buena idea simplemente crear usando su javascript. Ese derecho cómo hacerlo? Podemos simplemente hacer algo documento crear elemento y simplemente crear un dif. Correcto, Vamos a guardarlo en la variable contenedor total. Y ahora sólo necesitamos que se le añada el dedo del pie. Entonces documento cuerpo upend al niño demasiado profundo Contin e Y cuando los refrescamos nuestra página web, usamos el fuego. Bach, como puedes ver aquí, habría conseguido esto, Dave. Pero no tiene este yo d Así que sólo necesitamos agregarle cómo hacerlo. Solo necesitamos dedo del pie referirnos al contenedor de punta y entrar a la propiedad id y solo lo dijo para inclinar contenedor, correcto. Y como puedes ver ahora, cuando nos refresquemos. Tiene buena esta idea, que también significa que Ah, va a aparecer si configuramos, por ejemplo, con 500 servidores grandes y 500 píxeles altos, por ejemplo justo encendido. Como puedes ver, está aquí. De acuerdo, es muy grande, pero es su derecho, Vamos a establecer para Bueno, eliminé la posición absoluta por cualquier sencillo. Entonces eso es usar la posición. Absoluto. Y pongámoslo para un segundo dedo del pie arriba y a la izquierda para que podamos verlo aquí. De acuerdo, Queremos saber cuándo tenemos la boca sobre una de las imágenes para cambiar el texto. Tú cómo hacerlo. Bueno, sólo necesitamos referirnos dedo del pie, hacer bien ese contenedor y cambiar el html de energía a lo que queramos, justo cuando lo hacemos de esa manera, simplemente cambiaría el dedo del pie lo que tenemos justo tiempo. Si quieres cambiarlo. Por lo que ahí. Creo que eso está dentro de los elementos con a la derecha profunda, queremos cambiarlo al título. Por lo que sólo necesitamos cambiarlo a esto. Ese título de título es una propiedad fuera del elemento que tenemos Buen ratón sobre. Cuando eso incluso va a ocurrir, ¿verdad? Como pueden ver, cómo estamos cambiando esto aquí arriba, ¿ verdad? Se ve bonita. OK, Ok. Entonces ahora tenemos que cambiar también la posición de esto, ¿no? Entonces, ¿cómo hacerlo? Sólo necesitamos que el dicho de propina contenedor, llegar al estilo que queda y lo dijo. Podemos conseguir el objeto parejo con el fin de obtener la información donde a pesar de que Curt derecho y hacer algo así como E que el cliente X plus picks es. Y como puedes ver ahora está cambiando su posición izquierda. Tenemos que hacer también lo mismo a la posición superior. Entonces Crean, Top y Creon ¿Por qué? Como puedes ver ahora es seguirnos. Bastante OK. Los pocos problemas Aún así, el primer problema es que ¿qué pasará si tenemos hombres en embarazo? Como puedes ver ahora está asomando arriba. Es porque Cleo X apenas está regresando, devolviéndonos el lugar donde incluso ocurrirían sin el pergamino. De acuerdo, Entonces si quieres Andi también incluir el pergamino, deberíamos hacer algo así como plus y llegar aquí. Cuántos pixeles Wisc escribió a la izquierda Así documento elemento. Esa escuela, um se fue. Y también tenemos que llegar mucho a casa. Nos desplazamos a la desde arriba, y eso fue usted concede trabajar bien. Incluso hasta que tengamos muchos descansos. De acuerdo, entonces vamos a quitar los frenos. Por lo que sería más fácil para nosotros depurar a esta chica. Y ahora bien, tenemos buena. Otro problema. El primero es que está apareciendo top start. Y lo segundo es que cuando estemos aquí y nos vayamos, seguirá ahí, ¿ verdad? De acuerdo, Eso no sería difícil de sí mismo. Sólo tenemos que cambiar estos display a non. Ahora. No importa dónde, dónde es el inicio, por lo que podemos salvar el kilobyte. Y, bueno, sólo tenemos que hacer algo como ratón fuera, ¿ verdad? Tenemos que quitarle el ratón a los ratones. Aun así, cuando el ratón está fuera, queremos cambiar el contenedor de punta de herramienta que está atado pantalla a lo que acabo de saber, como puedes ver ahora. Bueno, ahora vamos a aparecer. Sería tan importante cambiar el bloque cuando estamos en, y ahora desaparece adecuadamente, ¿no? Está en el suyo, ¿eh? Sí. Está bien. Pero ahora tenemos un problema muy grande. Aún así, cuando tenemos bueno el mouse sobre el elemento que queremos Teoh tenemos el para volcar sobre Own, como puedes ver, cuando estamos en el elemento un poco más y nos quedamos quietos, tenemos bueno el título animado macanese para una y está por encima de nuestra bonita inclinada. Cómo quitarlo. Pero cómo quitarlo solo por un segundo. Bueno, en orden tres pelicula. ¿ Simplemente escribes algo en lo que estos títulos? Tú lo acabas de decir. No lo hagas, creo. Y esto se puede ver ahora no lo decimos, pero el problema es que también desaparece. ¿ Verdad? Entonces nosotros dedo del pie lo retrocedimos, hacemos lo que estaba ahí. Entonces pero cómo ponerlo bolsa cuando se retira por aquí, ¿ verdad? Nosotros los temporales pudimos hacer con tienda o títulos caña. Entonces vamos a crear un área que almacenemos todos los títulos posibles y ese es el algo títulos temporales fuera Soy y firmemos aquí elementos con remolque Tip off. Yo ese título. Esto nos dará aquí todos los títulos posibles, ¿verdad? En ese orden desde la página web y podemos usarlo aquí, ¿no? Podríamos Algo así como títulos temporales fuera de I. Qué terriblemente bien. Sigue siendo un problema. No está funcionando. ¿ Por qué? Bueno, me sorprendió. Cuando hagas algo así como esa alerta a cinco, notarás que son cinco. Por qué son cinco cuando debe ser 012 gratis por cada limón. Debería ser diferente, ¿verdad? Porque bueno, aquí de alguna manera 01234 Por qué aquí no hay cinco. No sé exactamente por qué podría estar de vuelta esto, pero sé cómo resolverlo para resolverlo. ¿ En serio? Usa las FARC que los, uh, limones con punta contada es realmente ah y un yo para escribir un elemento. Y es sólo un objeto. Se puede agregar cualquier propiedad al objeto. Acabamos de hacer algo así, y sólo podemos pensar en la nueva propiedad. Entonces si, por ejemplo, temporal i D y yo puedo asignar aquí Hola, que es aquí todavía razonable, ¿ verdad? Y por culpa de él podemos hacer algunas cosas como, vamos a acceder a esto que temporal me d en cuando lo refresquemos. Um, es incluso con el trabajo que se utiliza la corteza de fuego. Bueno, no está funcionando. Mm. Oh, lo siento. Aquí, deberíamos hacer algo así. Por supuesto, acabamos de sumar a la, um, a la colección. La idea temporal. Debí haber agregado cada uno al cada uno. Un limón. Correcto. De acuerdo, ahora, como pueden ver, está funcionando bien. Todo está funcionando a la perfección. Lo más cool de estos dos TB es que solo necesitas invocar esta función a este estilo porque, por supuesto, puedes actualizarla, y solo necesitas agregar la clase de dos puntas. Entonces solo piensa en el título. Eso es hoyo y vas a tener un bonito inclinado. Por supuesto, podrías hacerlo de una manera diferente. Por ejemplo, no podrías mostrar en el impuesto que podrías mostrar aquí y imagen más grande. Eso depende de ti. ¿ Qué creáis cómo creasteis? Seguro que después de todas estas lecciones de estos autos, vas a poder crear casi lo que quieras en los trabajos. Sigue intentándolo. Si tienes algún problema. Si tienes alguna pregunta, solo pregúntame como ejercicio. Yo quisiera que actualicen este todavia tip. Por lo que está pasando por ejemplo, aparecer después de unos minutos segundos. Correcto. Entonces hazlo con transición. Hablamos de las unas lecciones de hace que vendan la lección. Muchas gracias. 74. Firebug: Hola Hoy vamos a hablar de caja caja que quiere disparar. ¿ Quieres matarlos? A back es un error de error, que no es algo que quieras ver en tu código, ¿ verdad? Porque no va a funcionar. Entonces los errores es algo que vas a hacer muchas veces libres. Y no te preocupes, porque todos cuerpo cometen muchos errores. IDU errores humanos. Nosotros los hacemos. Simplemente sigue mejorando, y simplemente harías menos de ellos. De acuerdo, Pero cuando sucedan, es buena idea tener algunas herramientas que te van a ayudar a resolverlas. ¿ Verdad? Y hay un fuego de vuelta hasta para el Firefox. Simplemente puedes hacer clic en tu instalar fuego de nuevo, y tendrás entonces algo así. Hemos estado usando portones dedo del pie lejos Toby ableto rápido. Comprueba la posición de algo bien. Usando esta herramienta aquí, podemos comprobar fácilmente dónde qué? ¿ Qué está pasando así en su lugar? Estos muy útiles para comprobar Si todo está pasando, todo está cambiando. Bien. Porque estas fuentes aquí se actualizan dinámicamente sus herramientas de minutos así. En otras palabras, hermanos que no necesitas usar Firefox Puedes usar por ejemplo ahí, um, um, en grupo desde cuando usas las partes de control de acceso directo Jefe. Además Jay, verás el dedo del desarrollador así, que es muy similar. Y puedes usar Google chrome. Puedes usar Internet, Dexter. Ahí arroyo F 12. Andi, ¿Puedes usar qué? Y eran hermano que encontrarías en herramientas. El muy algunos o algo así. Estos son los navegadores web más populares, ¿verdad? Y tienen herramientas así. También puedes ver CSS aquí, por supuesto. Que no lo es, Ya sabes algo el este trabajo pidiendo, pero aun así te puede ayudar a hacer algunas cosas. Si tienes razón, incluso puedes quitar algo así y ver qué pasará si elimino el valor absoluto , ¿ verdad? Valor absoluto eliminado y no concede. Ahora aquí está, al fondo. Por lo que puedes de volver muchas cosas en línea. Tendría el modelo de objeto de documento para que puedas comprobar fácil cuando vayas en uno fuera del elemento. A qué valores se puede acceder, ¿verdad? Bastante fácil. Tienes en Net Co. Esto es muy útil porque puedes ver hasta dónde está cargando tu sitio web? De lo que debes mejorar para que sea más rápido. ¿ Verdad? También tienes galletas. Las cookies también son muy importantes porque entonces se puede ver si la cookie estaba correctamente o no. Si su existente de nota etcétera. También tienes una herramienta, que se llama spit de página. PHP. La velocidad también es muy útil porque puedes hacer clic, analizar y comprobar cómo tan farsa y cómo se está desempeñando tu sitio web. No obstante, realmente prefiero la actuación. Aún así, eso es de Google Chrome. De acuerdo, creo que es mejor. No. Por lo que también hay un consejo on. Hablaremos de consejo más tarde porque puedes ver aquí flechas y también puedes depurar tu código usando el consejo bastante fácil. El durante la lección. Muchas gracias. 75. Debugging de consola: Hola. hoy te mostraré la poderosa manera de salir de depurar con consejo Un consejo es algo que te mostramos errores si los haces como puedes ver al instante. Tenemos aquí y la información ¿Qué error se cometió? Por supuesto que d te está mostrando errores también, pero creo que ese consejo a veces puede mostrarte algo que tu d no te va a mostrar. Ok? Y hay otra cosa Muy guay sobre el consejo. Se puede dar candados al cabildo. Se puede hacer algo así como consejo que Locke y por ejemplo Hey, me gustaría ver qué está pasando con los valores de títulos temporales después de cada iteración. ¿ Verdad? Y como se puede ver, se puede ver con facilidad. Ah, así que tal vez también pudimos ver lo que pasaba con el derecho de marfil capaz. Está bien. Además, el Ivory Able se ve como ese cero hogar una vez. Lárgate, haz que McCann sea fácil. De acuerdo, entonces todo está funcionando bien. E incluso puedes mejorarlo justo a tiempo, escribiendo títulos temporales, pero y verás instantáneamente palabras pasando después de cada reiteración. Si quieres ver también un poco más al respecto, puedes usar algo con este directorio de culto, que, bueno, como puedes ver imprimir, incluso índices de estos tipos. Esto es simplemente impresionante, de verdad. Entonces es muy útil para los ladridos, ¿verdad? Por ejemplo, tuvimos problemas con el I dentro del alcance. Entonces cuando hagamos cosas como consejo que miran fuera, notaré que cuando tenga el ratón encima, siempre son cinco, ¿ verdad? Entonces por eso esto nos estaba dando un problema. Pero con este temporal yo D. Como puedes ver ahora está cambiando. Entonces esta cosa puede mostrarte qué es exactamente lo que está pasando, ¿ verdad? Con tus variables, puedes comprobar fácilmente muy rápido el valor sin traer algo a la salida ¿verdad? Tenemos un teeing más bajo sin detener la ejecución. Queremos detener la ejecución. Deberían ustedes. Usan nuestro derecho. Pero si no quieres detener la ejecución, creo que el consulado es mejor, porque solo es fácil simplemente mirar aquí y cómo. Además, eso es lo que está pasando al inicio de las cicatrices, yo estaba usando el HTML interno para el embolsado también, y esta es una buena manera, pero el problema es que estás mostrando algo en la salida para que puedas hacerlo en vida, ¿verdad? Incluso puedes estar de vuelta esto en vivo. Pero ya sabes, no debes acabar con algo así en la vida porque sabes, puedes hacer otro. Esto te costará algo que siempre debes deepak fuera de línea. Pero con el problema femenino integrado es que hay que crear un bloque especial y hay que conseguir el más tarde por lo que es un poco más lento. Pero lo sé. De todos modos, consejo te está dando, creo que más parque y fácil comprobar eso con la cerradura. Um, ¿qué es exactamente lo que pasa? Cualquiera, además de esto te va a imprimir un poco mejor. Puedes usar al director un Tory, que va a imprimir aún más información sobre algo, ¿no? Bueno, esta vez está en la variable individual. Pero cuando se quiere tener más información sobre algo, Entonces, por ejemplo, me gustaría ver qué está pasando con los elementos con herramienta Demasiado brillante, por ejemplo aquí. Por lo que he descargado todos los tips de heces y lo que está pasando. Además, he llegado aquí con el índice cero algo con esto llamado ancla, y tiene un costo de punta de herramienta. Y tiene una edad reefer y una simple imagen html. Está bien, está bien. Y tengo a asuntos que puedo usar aquí. ¿ De acuerdo? Y la longitud es de cinco. Esto es solo poderoso, ¿verdad? Podemos ver fácilmente qué es exactamente lo que conseguimos con su consulta. Ah, están con los elementos get por clase, nombre. Y luego Y lo conocieron. De acuerdo, la venta de esa lección. Muchas gracias. 76. Comparte sitios de sitios de código: Hola. Habrá muchas veces en las que quieras compartir tu abrigo con otros, por ejemplo, cuando quieras compartirlo para que alguien pueda ver si hay un error o puedes compartirlo para que alguien pueda usar tu código más adelante. ¿ Verdad? Puedes compartirlo con tus amigos, por ejemplo, y para ello. Es muy útil tener un online para gustarle eso. Simplemente copiarás tu abrigo de tu por ejemplo, yo d. aquí. Vamos a crear algo muy sencillo. Zoff. El i d simple yo prueban aquí. Se pueden hacer algunos de la CIA, ya que también es muy cool, ¿ verdad? Puedes hacer que el CSS para ello sea bastante lejos, así que cambiemos el color rápido. Por ejemplo, para leer y obtengamos el documento. Consigue un limón por yo d idea simple y cambiar el dedo del pie html interno algo nuevo. Y ahora puedes correr este bache y como puedes ver lo que tienes, bien. El resultado contigo. Está bien, ive quieres usar algunas bibliotecas? Puedes revisar qué biblioteca estás usando para la ganga, ¿ verdad? Y debido a que las bibliotecas del sol requieren lo que tendremos métodos que normalmente no están disponibles justo en el JavaScript básico debe tomar fiestas de algo así y luego podrás compartirlo. Se puede preguntar a la gente qué está pasando ¿verdad? Se puede mostrar a la gente la solución al problema. Esto es muy cool por ejemplo, Desbordamiento de pila, derecha, Puedes apilar. Desbordamiento es sitio web muy, muy popular. Si no lo sabes, definitivamente deberías visitarlo. Puedes hacerte preguntas. Puedes pedir preguntas rápidas y rápidas a los demás. Eso y la gente son realmente muy útiles aquí. No te enviarán a Google. Eso sólo tendrá más tiempo. Vale, Onda y también puedes ayudar a otras personas Tú Esta es muy, muy buena comunidad. Para que luego lo sepas, guárdalo. Por ejemplo arroyo tu sitio. Como puedes ver, ya tienes enlace que puedes compartir puedes ver cómo abrimos el nuevo top y es seguro para que puedas mostrar la solución. Por ejemplo, para alguien en la vida, los recursos de algo como pluma de abrigo También es muy cool, pero hay lo genial de este dedo es que puedes encontrar también algún trabajo de otros, ¿no? Oh, puro. Ver es este filtro de contenido. OK, veamos cómo lo hizo. De acuerdo, tenemos tu verlo. Eso es todo. Me gusta y podemos ver cómo está pasando. Todo lo que quiero en el rojo. Wow, esta muy buena co. No he visto esto, pero como se puede ver, se puede encontrar un muy buen trabajo de otras personas ahí que están siendo compartidas por otros. También puedes compartir esto y una Z conceda, trabajando muy, muy similar al violín del jurado porque puedes escribir html CSS y JavaScript y luego puedes alrededor del abrigo aquí abajo también hay algo como Jay está siendo Alemania sitios web como ese. Creo que el mejor es éste y éste. Y recuerda, ve al desbordamiento de existencias encontrar, encuentra las respuestas para las preguntas que estás haciendo cada vez cuando buscas algo. Es buena idea lucir así, Por ejemplo, sitio sobre cómo hacer en incluso oyente en nuestra bomba Internet Explorer. Y estos tipos eran estos el equivalente al elemento objeto en el Explorador nueve, ¿ verdad? Y demonios, lo que este tipo tiene sólo dándote la solución. Simplemente copias. Entonces está trabajando. Entonces solo puedes decir como agradecimiento, puedes ab votarlo. Entonces esta es muy, muy bonita comunidad donde encontrarás muchas respuestas a muchas preguntas y estas muy rápidas manera de salir buscando algo justo a través del desbordamiento de stock. Estás usando el cromosoma de Google en y gigante para buscar solo por teclear lado y luego la noche fuera del sitio web, ¿ verdad? Y luego el coro. Quieres preguntar a estos sitios web Así que realmente, esta es una manera poderosa de resolver muchos problemas. Condonas cosas agudas ahí y eso es sólo eso. Eso es muchas gracias. 77. Modo estirado: Hola. hoy te mostraré algo bueno se llama modo calle. El modo Estado es un modo que te hace escribir tu abrigo más estrictamente, lo que significa que somos más reglas a las que tienes que dar seguimiento. Y la verdad es que solo te va a ayudar. Porque cuando algo así usas rayado y este pensar está haciendo todo el frío sobre lo de abajo, está en estricto moho. Como puedes ver, nuestro código sigue funcionando. Por lo que estaba escrito bien. Entonces si escribes un co fun, va a funcionar Bien. Pero a veces hay errores. ¿ Hizo usted realmente como un Sr Usted puede escribir? A veces algo así como, por ejemplo, X equivale a cinco. Y como pueden ver ahora, tenemos un error. ¿ Por qué? Porque es asignación toe undeclared Variable X. La verdad es que en javascript normal funcionará. El problema es que este es un meribel global, ¿no? Por lo que siempre hay que recordar sobre declarar algo, y son flechas Amanda como esa que van a ser muy descubiertas por estricta nota. No necesitamos pasar por ellos. Es solo una buena idea usar siempre mes estricto al inicio cuando estés desarrollando tu sitio web, pero es buena idea. También. Dedo retrasó la racha. Nota. Cuando estás enviando tu fue tu pelea a tu sitio en línea del dedo derecho de tu anfitrión. ¿ Por qué? Porque bueno, es mejor si dejas correr tu código en lugar de hacerlo parado por algunas estúpidas, estúpidas reglas, ¿ verdad? Es mejor si se ahoga un poco en have way, entonces no es correr una puerta, cierto, cierto, Así que úsalo solo para el propósito ladrando porque te puede ahorrar alguna vez. Te va a mostrar errores que normalmente tu yo d no me pondría al día. Te va a dar advertencias y, bueno, va a ahorrar tiempo. Esa es sólo una buena lección. Muchas gracias. 78. Rde de código: Hola Hoy te diré lo que debes hacer para que el abrigo maga se rinda mejor. El primero que debes recordar y esto es lo más importante es que conseguir cualquier elemento de tu modelo de objeto de documento es lento. ¿ Por qué? Porque bueno, imagina cómo debe implementarse una función como esa. Tiene que pasar por todo impuesto posible a tu HTM del comino, ¿ verdad? Para encontrar a la que tiene identificación así o a la clase así. También significa que identificarla buscando en las er difíciles es más rápida porque cuando encuentra esto en el er defecado, va a dejar de mirar bien porque no crees que algo con el yo d debería en que existen unos en tu sitio web escribir algo con la clase puede existir más de uno. Por lo que se verá aunque ya tenga fondos de algo. Si a través de todo el documento, todos los elementos posibles y la forma en que simplemente lo seguiría cuidando, pensamiento termina documento médico completo. Correcto. Entonces, ive solo tienes un elemento y sabes que el Dios tiene más de uno de ellos y es mejor usar identificaciones, ¿ verdad? Y también es muy importante saber de esto Porque, mira, cuando haces algo así, un Vrabel temporal, entonces si tienes una condición como esa, solo obtienes la longitud del Tom Nyms eso es seguro aquí. Pero si lo haces de esa manera, tienes dedo del pie cada vez partes completas, documento completo con el fin de conseguir todas las cosas de Tom. Y luego solo consigues longitud y lo haces cada vez. Cada iteración lleva mucho tiempo, ¿verdad? Y además, si tienes alguna idea sin documento, consigue los limones dentro. Él correcto o selectores de calidad, si no los necesitas, Toby, aquí, por favor hazlos aquí arriba y luego solo agréguelos de alguna manera. Aquí, ¿de acuerdo? Porque sólo quita votos. Gracias Ok. Y también significa que debes mantener tu html por cinco lo más pequeño posible. Porque si tienes últimos elementos aquí, significa que lo va a encontrar más rápido. ¿ Verdad? Por lo que no creó este loco. Tan loco como puedas, Enorme solo debe mantener este HTM Si lo más pequeño posible. Y si puedes inicializar tu área a la vez hazla porque esto es un poco más lento, pero a veces sabes que no puedes hacerlo de esa manera porque, por ejemplo, tienes que hacer algo como, ya sabes, en la caída de la unión en nuevos elementos. Cierto, Porque aún no los conoces. Pero si puedes odiarlo hazlo Deadwood no solo variedades globales porque llegar a ellas es más lento. Está bien, Y la razón. Todos esos en el más lento. También es Ah, convención de apuestas. Entonces, no los uses. Y cuando aterrices, Jake se viste y probablemente lo aprendimos porque es realmente te ahorraremos mucho tiempo. Debes recordar que no debes usar Jake estaban en todas partes, si puedes. Si sabes que algo se apoya. Oye, es mejor la mayoría del tiempo para usar JavaScript, el JavaScript básico. Por ejemplo. Cuando obtienes el valor de la entrada usando la propiedad value en lugar de usar esta cosa de la Jorquera, el código se ejecutará 1000 veces más rápido. De acuerdo, La mayoría de las diferencias de tiempo no son tan grandes, pero en realidad, a veces estas diferencias son tan grandes, así que no utilices en todas partes. Consulta Jack J. Si sabes que no tienes dedo del pie. ¿ De acuerdo? El contar hizo lección. Muchas gracias. 79. Mantener un archivo js: Hola. Siempre debes pensar en mantener en el uno JavaScript cinco para tu proyecto de muro. Para hacerlo, debes conectar todo fuera del JavaScript si el hielo en uno. Pero me imagino tu cara de pelea ahora mismo. Tienes, por ejemplo, 50 de descuento y cambias cualquier cosa en una de ellas. Tendrías que encontrar dictado llamado en algún lugar ahí, y necesitas copiarlo y enfrentarlo en la posición correcta. Tendrías que actualizar Manimal. Simplemente le quitaría tiempo a Law. Será muy, muy difícil mantener arrastrado. Y la tos es que se puede el algo así automáticamente usando algo bueno se llama Gran Julio. Ya he creado el curso sobre Grand Julius y puedes bonita ¿verdad? Úsalo. Simplemente va a crear automáticamente un fuego desde magnificado tantos como puedas en este momento. Probablemente tengas, por ejemplo, requerir JavaScript, Ben para enchufes gratis y otras cosas como esa, ¿ verdad? Por ejemplo, cuatro scripts y todos estos scripts, haremos que su sitio web se cargue mucho más lento. ¿ Por qué? Porque el protocolo http dice que Condonó en las dos peleas a la vez, lo que significa que si se pone el peso va a tener que volver a conectarse al servidor Euro y conseguir otra pelea. Por lo que esto realmente hace que tus cargas en tu sitio web sean más lentas. De acuerdo, entonces debes mantener siempre lo menos peleas que puedas. OK? El genial de Gran Jurado Aziz también, que se puede incluso entonces crear archivos JavaScript para cada posible feeing como, por ejemplo, por ejemplo, les dijo que les gusta, por ejemplo, citó panel para lo que quieras. Normalmente, gente solo está haciendo un cinco grande donde tienen muchos, muchos, muchos, muchos en los que sabes piensa desde JavaScript y frameworks en otros archivos JavaScript y algunos plugins, ¿ verdad? Pero con eso, incluso puedes actualizar con la habilidad real fuera de tus cinco estructuras JavaScript aquí, por ejemplo, en más adelante porque puedes crear para cada script otro script especial Java. Fine sí vendiendo la lección. Muchas gracias. 80. Compresión de archivos de js: Hola. Siempre debes tener comprimida tu pelea de JavaScript. Por lo que debes crear un segundo javascript. Si yo y la universidad, por ejemplo, guión a me refiero a punto Js y deberías copiar todo el contenido e ir a uno de los sitios web que pueda comprimir javascript. Encerrado hombre fuera de ellos, copiado aquí, teclea compresa. Quiero decir compresa de arroyo. Y como pueden ver, estamos ahorrando alrededor del 30 53%. Por lo que su sitio web se cargará más rápido justo en kilobytes. A lo mejor no es gran cosa, pero realmente imagina que por ejemplo, tengo código de área que tiene 90 kilobytes y se está metiendo en la picadura 26 o testicular hasta donde yo recuerdo, solo por comprimir bien. Por lo que estás ahorrando curva que, y también hará que tu sitio web cargue cargas de más rápido. Y recuerda que si tu sitio web se disolvió más rápido, también va a estar mejor posicionado en el Google, ¿ verdad? También puedes usarte la base, 60 pies y culto lo que lo comprimirá aún más. Pero ahora está totalmente en leer un libro, pero realmente no importa, ¿ verdad? Ya puedes copiarlo aquí. Y acabas de usar como guión ahora guión que significa que Js y tú trabajarás con ese fuego. Y luego tenemos que cambies algo que ahora tienes que copiar aquí y luego volver a hacerlo. También puedes reducir variables pero a veces no está funcionando Y sabes por qué deberías hacerlo. Deberías usar la base 60 para codificar a Onley. Si hace que tu pelea sea cinco más pequeña a veces no la hace más pequeña. Así que comprueba siempre. Si esto es más o esto es más pequeño, también debes habilitar en tu sitio web algo con este culto G zip la mayoría de los diamantes habilitados puedes vecindario en acceso HD. Vale, um si está habilitado en tu hosting creé un incendio que se llama acceso HD. Simplemente puedes enviarlo a tu sitio web y no hará ningún error en tu sitio web porque aunque no lo tengas instalado, simplemente no funcionará. Vale, Pero es en cambio, Entonces vas a ahorrar mucho fuera de banda, lo cual y va a mejorar la velocidad de Donald tu sitio web porque todo estará , um, comprimido por este G zip no en el javascript cinco, sino también CS shtml. Bueno, cualesquiera que sean los archivos que se van a descargar de tu página web. Bueno, no imágenes porque no están sobre la casi compresa. ¿ Verdad? Pero cosas como el texto ¿En serio? De verdad. Mejorará la velocidad de tu sitio web. Pero también deberías haber notado probable también que cuando estaba hablando algo así como, Oye, tienes que saber mantener dos peleas y cada vez que cambies algo antes de enviar a la página web, tienes que ir aquí, luego copiar y aquí y comprimir. Y luego otra vez aquí y aquí. Wow, sería sólo los dioses del tiempo, años correctos. Y tienes que hacerlo, Al nus. Sabes que algo bueno es bueno. Por ejemplo, gran jurado s que creé porque sobre ello Un Gondry es un encargado de tareas. De acuerdo, Solo va a ultimar muchas tareas de desarrollo web, incluyendo Judge JavaScript peleas sobre la marcha y puedes comprimirlo fácilmente automáticamente. Cuando cambies algo en una de sus peleas, al instante creará versión comprimida creo que es sólo 10 veces más fácil. Y sería mejor si aterrizas eso vendiendo la lección. Muchas gracias. 81. Errores más comunes: Hola. hoy les mostraré siete los errores más comunes que está cometiendo la gente. ¿ Por qué desarrollar script Javascript? El primero más importante, creo, es que cuando se tiene entrada y se tiene aquí un texto tipo, incluso se dice es que aquí está el valor que es realmente un texto. Entonces significa que si por ejemplo, obtienes estos elementos de documento obtienes una muestra de limón derecha, y la guardas aquí notarás que cuando hagas algo como ese valor de muestra y lo envías a por ejemplo alerta. Un resultado será pelea y podrías estar pensando, Hey, es un número que podemos sumar. OK, entonces vamos a agregarlo 100 más valor simple Y vamos a ver ahora cuál es el resultado? El resultado es oh, es un 105. ¿ Por qué? Porque estos valores es una cadena. De verdad. Este piense nos está esperando dedo del pie tener aquí una cuerda y cuerdas. Cuando usas una cadena con un número, siempre tendrás una cadena. De acuerdo, esto es casi lo mismo. Como si hiciéramos algo así, ¿verdad? Y entonces sí, es 1005. Si quieres interpretar esto como un número. Tienes que recordar sobre analizarlo al anti Jer antes así por ello. Y ahora mismo no tiene otro. De acuerdo, creo que esto es muy importante porque muchas veces haces cosas así. De acuerdo, entonces este es el 1ro 1 ¿Qué es el 2do 1? Bueno, cuando creas un ovario capaz Así por ejemplo, yo y luego descienden flanco. Si igual a cero, entonces haz algo como prueba. ¿ Verdad? Y sí, esto va a funcionar. Como pueden ver, tenemos el mensaje de prueba. Pero, ¿qué pasaría si hacemos algo así por místico, verdad? Porque estamos pensando como humano ese signo igual sólo significa que estamos haciendo una condición. Si cosas como si yo es igual a cero, el problema es que no pasa nada. ¿ Por qué? Porque ahora mismo estamos asignando aquí cero no No estamos haciendo oraciones de comp. Onley compare E operador ilusión se ve así. También puedes comparar Como puedes ver, aquí tenemos una advertencia. Estos los 30 pensando recuerdan sobre usar su ah libre iguala signos. Esto significa que también estamos comprobando si hay tipo de estas variables es la misma. Entonces si es algo así ahora mismo, hacemos No vamos a decir pruebas, verdad, verdad, porque hay una cuerda y esto es tuyo cayendo otro para no hacerme quedarme líquida aquí. Correcto, Um, así que podríamos comprobar si algo es igual, como, cinco en la entrada, pero tiene que ser un cinco. Eso es realmente, um que tiene lazos iguales, ¿verdad? Estos también comprueba si es el momento adecuado. Está bien. Y otro error es Mira, ahora está funcionando, correcto. Pero a veces la gente hace semi colones así. Cómo Esto es realmente, realmente muy culturas. Pero creo que esto es lo más difícil de detectar posible. Como puedes ver ahora está funcionando. Siempre va a funcionar. Aunque hagas algo así, incluso ves o lo que sea que escribas aquí este dedo era porque la verdad es que podemos tener que Human entra, ¿ verdad? Y acabamos de terminar la condición aquí. Ah, esto es que he perdido una vez por horas para detectar algo que tenía, pero era principiante, ¿ verdad? ¿ En serio? Ten cuidado con esto. De lo siguiente que debes preocuparte es de esa comparsión. Entonces si yo igual a cero y en el mismo tiempo X igual hacer, por ejemplo, 105. A continuación, mostrar el mensaje justo en. Y Oh, bien. Como pueden ver, ahora tenemos la prueba. Es para escribir, porque aquí tienes 105. Todo está funcionando Bien. Pero algunas personas hacen algo así y también a través. Pero ahora podría ser incluso a través si hago algo así. Esta vez funcionó. ¿ Es aleatorio porque estos puja eran operadores? ¿ Verdad? Algo así. Es un poco sabio. Operador, este es un gran operador blanco. Este es Operador relacional, el que puede comprobar si esto es a través de nuestra enfermedad a través de la derecha. Te acuerdas del hacer para escribir dos veces. De acuerdo, podríamos tener suerte, y el resultado estará bien. Pero a veces solo hará que tu código sea realmente, realmente, muy malo. Y es auto a deporte. OK, entonces este es el Bueno, este es uno de los ladridos que mucha gente está haciendo, y el siguiente es el documento de sensibilidad de caso. Oh, mira, podría hacer algo así, verdad? Ha dejado de funcionar. Nuestro abrigo estaba funcionando. Ahora no es cuando vas al fuego atrás es lo genial es que podemos ver exactamente documento conseguir un limón por ideas? No, la función. Ah, no es la función. ¿ Por qué? Ah, porque no lo escribí de la manera correcta. De acuerdo, este es un error típico, así que puedes comprobarlo. Se puede detectar fácilmente, ¿verdad? Si sabes que todo en javascript es sensible a mayúsculas y minúsculas. Y lo último de lo que debes preocuparte es acabar con una definición de objeto de época con una coma. ¿ A qué me refiero? Algunas personas están haciendo cosas como la de nuestros números e iguales, y hacen algo lindo. Uno, 56 afuera. Quiero decir 10. Está bien. Y ahora está trabajando, ¿verdad? Todo está funcionando bien. ¿ Qué? Esa es la belleza, por ejemplo, está funcionando. Y ahora imagina alguna situación así. Quitemos a este tipo. No necesito. Y ahora tu abrigo no va a funcionar. Todo mi hermano va a ver a escuchar se espera algo inesperado. Debería retrasarlo en múltiples navegadores Web. El código fue detenido por ahí. No pasará nada después. De acuerdo, entonces hay que tener cuidado en esta coma de aquí. También debes tener cuidado cuando estás creando objetos a partir de nuestro objeto. Y cuando haces algo así y luego creas una propiedad por ejemplo, nombre y luego nombre SAR, notarás que está funcionando bien. Pero si haces algo así, también puede detener tu abrigo. En Firefox, está funcionando. Realmente depende del navegador Web, pero en la mayoría de los navegadores Web, solo hará que tu abrigo deje de funcionar. OK, eso es largo Esa lección. Muchas gracias. 82. Mantener ojos: Hola. Cuando estoy mirando estos, yo d. A mis ojos tiene ¿Por qué? Porque tengo el fondo blanco. Si vas a pasar mucho tiempo trabajando en tu computadora, debes evitar fondos anchos. Deberías cambiar los palos de calorías de tu i. D. Cada I d tiene una opción como esa que estas buenas bien, Porque saben que para la salud de tus ojos debes usar y el otro colorista pega con la gracia de algún negro sopla o algo así, será 10 veces mejor. Entonces esta es mi realmente una mano para ti. Ese es un consejo para ti. ¿ Debería usar ir a ahí opciones esas opciones. Y en eso significa que aquí hay algo así como un perfil, como puedes ver. Y se puede cambiar, por ejemplo, el dedo del pie de Noruega hoy. Como puedes ver aquí, puedes comprobar cómo se ve algo. También puedes ver cómo se ve en otros idiomas, ¿no? Exactamente puedes cambiar algo si no te gusta algo que se ve así, ¿ verdad? Tendrá todo categorizado y bueno, solo puedes aplicar. Y ahora, como se puede ver. Se ve mejor, ¿verdad? A lo mejor si no te gustan estos rosados de aquí, puedes cambiarlo. O puedes encontrar otro escritor. Se puede cambiar a otro. Aquí hay muchos. Por ejemplo, tienes Aquí están esto no es buenas luces de ciudad. No me gusta. Él tampoco. Por eso no sé que descargó estos. Creo que estos lucen bonitos son algunos ¿verdad? Y lo descargué de la red Ser tallos que vienen. Hay muchos sitios web así. Apenas tiempo que sea tallos descargando Google y encontrarás sitios web así creo que aquí hay muchos intentos y uno de ellos seguramente será el que te gustaría, verdad? Y solo puedes descargarlo bien para Así por ejemplo, puedes descargar estas cosas. Uno puedes simplemente no saberlo. Y más tarde necesitas solo un poco de fantasía. Y cuando te pansy perra, tienes algo así. Es necesario copiar esta carpeta en remolque. Un camino que luce así. Está bien. Él será tu nombre de usuario datos de aplicación roaming que decente. Aquí está la versión que quieres agregar este nuevo tentador, y necesitas solo salir bastante afuera en este año aquí y teorías que te van a preguntar si quieres Teoh,ya sabes, ya sabes, cámbialo. No estoy siendo nosotros por un poco más de lo que se te va a pedir porque estoy sustituyendo a la que ya he descargado. Y más tarde cuando salgas de ese frijol y vuelvas de nuevo, verás aquí un nuevo perfil que has descargado para aquí. OK? Esto es realmente, realmente muy importante. Si quieres Oh, programa, Tus ojos estarán realmente agradecidos por ti. Muchas gracias de esa zona hizo esto. 83. ¿Qué es el componente?: Hola, amigo mío. ¿ Ves esta figura del ego? Tiene muchos elementos, y estos elementos, se les puede llamar componentes. ¿Por qué? Porque ahora mismo, puede haber muchos diseñadores, artistas que están trabajando en cada uno de los componentes que crea la gran figura. Cuando cambiamos esta cabeza a otra cabeza, todavía tenemos a quien O bien figura, voy ahora mismo se ve un poco diferente. Podemos cambiar también lo que Lex, ahora es diferente, pero podríamos simplemente cambiar esta cosa, pero todo el componente, el más grande, el que está compuesto por muchos muchos componentes sigue funcionando, y esta es la idea detrás de reaccionar. Vamos a dividir las cosas en tu aplicación. Eso es, por ejemplo, web one, ¿verdad? En componentes pequeños. Entonces por ejemplo, cuando tienes que llegar a DA, bien, no vas a crear todo en una tras otra, no vas a crear HTML y JavaScript y luego adjuntar adevent oyentes y así sucesivamente a todas estas cosas B si lo hiciste de esta manera, si tienes que cambiar algo, bien, probablemente necesites cambiar algo también en JavaScript, La mayoría de las veces cuando agregas una nueva función o algo así. Sin embargo, en el caso de los componentes, queremos crearlos de esta manera, para que podamos agregar nuevas características. Podemos agregar nuevos componentes, igual que insertarlos en esta cosa. Por ejemplo, también podemos agregar accesorios. Podemos decir, Oye, quiero tener accesorio como este, por ejemplo. Voy a quitar la cabeza y entre esto y esto, voy a poner el manto, por ejemplo, así, y sigue funcionando bien Tenemos una nueva característica y oye, funciona. Queremos ampliar nuestras aplicaciones haciéndolo, no como antes. Por supuesto, será más fácil ver cuando empecemos a escribir programa, pero lo más importante de esta conferencia que debes entender es qué es un componente. Es sólo un individuo, qué elemento, ¿verdad? Es solo un artículo que solo puedes ponerte junto a otro artículo y crear algo más grande artículos más pequeños, creas un artículo grande que funciona muy bien en conjunto, como un up, por ejemplo, ¿verdad? Entonces necesitas cambiar principalmente tu mentalidad cuando vengas a reaccionar No vas a crear cosas como, ya sabes, en el caos, como lo hiciste ahora mismo. Y para ser honestos, no hay nada malo en hacer todo así cuando estás haciendo un proyecto pequeño, recuerda, porque reaccionar es como una solución para trabajar con mucha gente a la vez, ¿verdad? O cuando el proyecto va a hacerse grande. Pero hay que aprender a reaccionar y va a llevar algún tiempo. Entonces debes decidir si quieres hacer algo muy, muy rápido y no volver a ello o quieres tener una mentalidad diferente de poner piezas pequeñas, componentes pequeños juntos para hacer algo más grande y hacerlo así es fácil reemplazar las cosas Entonces como el sitio web, sería como, quieres crear elementos reutilizables en tu sitio web donde puedas usarlos donde quieras, y tantas veces como quieras, ¿verdad? Entonces es como hacer tu mentalidad para entrar en, como, proyectos más grandes, ¿verdad? Puedes, por supuesto, usarlo también en los más pequeños, ¿verdad? Pero a veces podría ser sobre matar. Pero aprender a reaccionar es buena idea porque probablemente lo vas a emitir en alguna parte, como , por ejemplo, cuando vas a trabajar para alguien porque ahí, como puedes ver, bueno, vas a trabajar con otras personas y ellos quieren seguir algún tipo de, ya sabes, patrón de crear cosas. Y este patrón permite, como, expandir las cosas porque, ya sabes, cuando alguien está siguiendo algún tipo de regla, algún tipo de patrón, es bueno porque, bueno, los programadores podrían ser, ¿sabes qué? Voy a otro trabajo. Ahora ya no voy a trabajar contigo. Y si este programador no usó, por ejemplo, reaccionar, pero lo hizo todo, ya sabes, con caos, mentalidad Bueno, otro programador va a tener un problema. Va a ser difícil saltar a un proyecto como este. Sin embargo, si alguien va a usar react y solo va a dejar el lugar de trabajo, otro programador simplemente va a saltar y sabrá dónde están las cosas porque va a haber algunos patrones que todos pueden seguir. Un nuevo programador entrando en el proyecto, va a saltar y acaba de comenzar agregar nuevos componentes de qué piezas juntas. 84. Fundamentos de React: la lección más importante para aprender React: Hola, amigo mío. La lección de hoy es probablemente la lección más importante que jamás hayas tenido con respecto a reaccionar. Después de ello, no se puede simplemente saltar a reaccionar con esto. Voy a hacer que todas las definiciones básicas fáciles de comprender para usted Esto va a ser algo tan fácil para ti. Sentirás cómo trabajar con Rag y ¿por qué? React parece que se ve. Entonces comencemos de. Cómo hicimos apps antes de usar R. Así que algo así, por ejemplo, cuando hago clic, el número aquí aumenta. La vieja manera sería crear HTML con IDs para que podamos acceder a ellos posteriormente, haciendo un script que te permita, ya sabes, contar y almacenar el número de clics. Entonces necesitamos hacer referencias a elementos HTML así porque de lo contrario, no podremos acceder a ellos. En incluso oyente cuando alguien hace clic, el conteo es cada vez más grande, y luego actualizamos la vista, así lo que se muestra aquí al valor que está aquí Y sí, funciona para pequeños proyectos como este. Eso está bastante bien, pero estamos cambiando nuestra mentalidad, como dije en la conferencia anterior, queremos comenzar a crear componentes Entonces estamos cambiando nuestra vieja manera a una nueva forma. Y vamos a cerrar esto, y ahora nos estamos enfocando en el código aquí, ¿o? Y queremos rehacer todo esto en reaccionar. ¿Cómo usamos React? ¿Cómo lo instalamos? Hay dos formas de instalar react. Uno que es muy duro y no vamos a hablar de ello en esta conferencia. Y el segundo, que es muy fácil. Todo lo que necesitas usar es incluir reaccionar porque esto es solo una biblioteca JavaScript, para construir la interfaz de usuario por defecto. Sí, tiene muchas otras cosas a su alrededor, pero para ser honesto, la reacción básica es solo biblioteca. Así que sólo voy a copiarlo en nuestro proyecto, bien, así. Y sí, podemos usar reaccionar ahora. Pero reaccionar también necesita trabajar en algo bueno se llama Document Object Model. Por lo que también necesitamos incluir el modelo de objeto de documento. Reacciona. Pero el problema con el enlace que tengo aquí y aviso también el sitio que estoy usando para obtener estos enlaces se llama jsdeliver.com, es que no está usando UMD, y ¿por qué Es porque esto significa definición de módulo universal. ¿Ves? El problema es que porque lo estamos haciendo como una solución rápida, queremos hacerlo aquí en este lugar en particular sin configurar servidores, y esta es muy buena idea para mostrar las cosas es que necesitamos usar algo que esté haciendo las cosas de manera un poco diferente. Así que tenemos que ir a navegar e ir aquí y elegir esto, ¿de acuerdo? Y este es el link que queremos porque queremos el que podamos usar localmente sin servidor, y este es el script que te va a permitir hacerlo. Pero recuerda, nuevo, esta es solo una solución rápida para aprender a reaccionar. No lo vas a hacer así en el futuro. Pero bueno, ya podemos usar react y esto es poderoso. Porque para ser honesto, reaccionar se trata de elementos reutilizables que se llaman componentes. Después de solo configurarlo así, puedes usar componentes creados por otros en tu sitio web donde quieras. Sí, eso es todo. Si quieres usarlo solo para eso, ya es suficiente. Pero, claro, la gente vio un potencial en ella, y hay muchas herramientas a su alrededor que puedes aprender en el futuro, pero no son necesarias para solo reaccionar, ¿de acuerdo? Y por eso creo que es estúpido que haya tantos tutoriales y documentaciones donde no muestren esta parte, lo que permite simplemente saltar a reaccionar instantáneamente porque nota que ahora podemos dentro de nuestro script, usar react Entonces podemos simplemente comentar esto porque ya no lo vamos a usar. Queremos hacer todas estas cosas usando Jas pero ¿cómo usamos reaccionar? Lo primero que tenemos que configurar es como la raíz para el modelo de objeto de documento que va a ser creado por react. Porque reaccionar tiene algo bueno. Se llama el modelo de objetos de documento virtual que le permite ver los cambios de los valores que son virtuales y luego aplicarlos a tu sitio web sin que tengas que pensarlo. Y esto es súper poderoso. Entonces esta es la raíz, ¿verdad? Y copiemos esto aquí y hagámoslo bajo comentario porque cada app app tiene como raíz en Rat el lugar donde iniciamos nuestro mayor componente, la aplicación principal. Y ahora, para poder hacerlo, necesitamos dentro de nuestro guión, hacer algo así. Acceda al modelo de objeto de documento de reacción y luego cree una raíz, o? Y creamos una raíz en este ID. Entonces todo lo que tenemos que hacer es obtener elemento por ID y elegir root, correcto, así. Y ahora, sí, estamos usando reaccionar en donde en este lugar en particular, ¿de acuerdo? Entonces este es nuestro punto de partida de nuestra aplicación. Y ahora podemos renderizar dentro de él lo que significa renders como impresión, ¿de acuerdo? Componentes que vamos a crear en reaccionar, ¿verdad? ¿Cómo creamos componentes? Para crear un componente en la reacción, escribes función, luego el nombre de tu componente, ¿de acuerdo? Y si, puedes simplemente regresar aquí, por ejemplo, hola palabra como esta, ¿bien? ¿Y es suficiente? No. ¿Por qué? Porque no invocamos esta función en ningún lado, y no la renderizamos, ¿verdad Y para poder renderizarlo, necesitamos hacerlo. En primer lugar, guarda esta raíz en alguna parte. Así que vamos a guardarlo en la variable constante llamada root. Y ahora podemos acceder a él y renderizar nuestro componente. Pero para obtener este componente, necesitamos usar la función que se llama crear elemento, y ahora podemos enviar entonces ahí el nombre de nuestra función, que es componente. ¿Bien? Así que recuerda, esto es componente, bien, yo reacciono. Entonces, para ser honestos, los componentes son solo funciones, ¿verdad? Nada más. Es simplemente una función simple. Ahora, como pueden ver, tenemos palabra halo ahí, pero oye, esto no funcionó como probablemente habíamos adivinado porque la edad uno no se mostró aquí como la edad uno Por qué hablaremos de ello pronto. Pero bueno, lo más importante es que lo que sea que se devuelva aquí va a aparecer ahora, se va a renderizar aquí. Tantas cosas, tanta molestia ahora mismo, ¿verdad? Pero esto es sólo el ajuste de la misma. No te preocupes. Por lo que será más fácil. Pensemos que debemos cambiar el nombre de nuestro componente algo que describa lo que estamos creando. Estamos creando una aplicación, ¿verdad? Y dentro de nuestra aplicación, queremos devolver qué? Más elementos. Y ahora fíjate que haga lo que sea que haga, es como solo por el bien para que aprendas cómo era cómo es, ya sabes, cómo está funcionando todo en segundo plano, ¿de acuerdo? Así podemos crear elemento de lectura. Y podemos crearlo para que sea D. Podemos enviar a los Dev valores, pero no tenemos ningún valor para enviarlo ahora, así que vamos a enviar null porque create element toma tres argumentos, ¿bien? Entonces primero es ¿qué tachuela entonces? Qué valor le están enviando y qué se debe presentar dentro de esto. Entonces digo hola mundo. Y como pueden ver, este es nuestro primer hola mundo dentro de un.Como pueden ver, no vemos un cambio aquí en nuestro código fuente, pero cambiamos la vista de alguna manera. El punto de vista de lo que vemos. Y si queremos ahora hacer todos los elementos que hicimos antes. Bueno, sin algo códigos llamados JavaScript, XML, que es como JSX, ¿bien? JSX. Tendrías que bien, antes que nada, usar la sintaxis así, y ahora harías algo así. Bien, entonces tengo que hacerlo. Como pueden ver, es bueno que tengamos algunas pistas. Pero, sí, funciona, ¿verdad? Creamos todas las cosas que hicimos aquí. Y para ser honestos, esto se ve horrible. Esto se ve genial. Voy a volver de reaccionar definitivamente a lo que en lo que hicimos antes. Y para ser honesto, nunca lo usaría así si fuera, ya sabes, esto es simplemente horrible de leer. Afortunadamente para nosotros, alguien inventó algo lo que se llama JA Zix ¿Y qué es JaiX? Para ser honestos, es como JavaScript extendido. Algunas personas lo llaman JavaScript XML porque se basa en HTML, que se basa en XML. Entonces es como, para ser honestos, es como HTML más JavaScript. Y podemos usar un lenguaje así dentro de nuestro guión. Pero para poder usarlo, primero necesitamos instalar también algo lo que se llama babel Entonces voy a copiar esto y ponerlo aquí. Y ahora aquí en el guión, escribo aquí que estamos usando texto Babel, y de ahora en adelante, esto va a ser tan genial y fácil de hacer porque no lo hacemos ahora de esta manera, ¿verdad Pero fácilmente podemos simplemente hacer algo como vamos a regresar, y es buena idea usar el paréntesis aquí, y aquí podemos escribir solo HTML Entonces digamos que quiero la edad de uno, bienvenido y bueno, solo puedo hacer todas las cosas que estamos aquí, ¿verdad? De la misma manera antes. Pero el problema es que como pueden ver, aquí tenemos error, y lo genial es que aquí tenemos error. Me gustan los errores porque finalmente tenemos errores antes de que no los tuviéramos. Pero JS seis por fin, tienen como, ya sabes, errores dentro de nuestro editor, no después. Y el error está aquí porque la función que va a cambiar esto en las cosas que tenemos antes, crear un limón, envejecer uno, crear una B, crear el botón limón, y así sucesivamente, ¿verdad? Necesita tener algo lo que se llama padre para todas estas cosas. Significa que solo necesitamos hacer algo como DIV y poner todo dentro del Div. Como puedes ver ahora, funciona bien, y esto es realmente JSX Lo que haya detrás de lo que esté aquí es JavaScript es JSX, para ser honestos Lo que sea que esté aquí es JavaScript XML. Ahora bien, esto es lo que transcribe al típico Javascript y react es solo usando Y esto es más fácil de usar. Por eso no es que necesites volver a aprender un nuevo idioma. Es solo que finalmente puedes usar HTML dentro de Javascript. Y fíjate que normalmente necesitarías poner aquí, por ejemplo, citas y necesitas pensar en las citas aquí para hacerlas barras invertida No, no necesitas preocuparte por ellos. Simplemente devuelves HTML así y oye, ¿está funcionando? Sí, está aquí, genial. Estoy feliz. Lo siguiente es que no necesitas usar en ningún lado este elemento de creación. Simplemente puedes renderizarlo ahora así. Estás enviando aquí solo el nombre del componente que quieres renderizar. Entonces así es como creamos nuestro primer componente y lo renderizamos en el div raíz. Y se podría pensar que hay muchas cosas que hacer para hacer tal cosa, pero estas serán cosas que se preestablecerán más adelante. Esto es como una sola cosa que hacer. Y después sólo estamos trabajando en componentes, ¿de acuerdo? Y ahora es el momento de hacer este componente, hacer las cosas, ¿no? Entonces cuando hago clic en él, quiero, como, las vistas de las cosas que aquí se muestran para reaccionar sobre ella. Oye, ¿no es por qué reacciona llamado reaccionar? Sí. Pero, ¿cómo hacemos esas cosas? Bien. Entonces necesitamos de alguna manera tener un contador, ¿verdad? Y necesitamos tener aquí una variable que la vaya a contar, y necesitamos invocar de alguna manera una función que va a, como, aplicar estas cosas Normalmente, lo hacíamos de esta manera, y esto era un montón de cosas que hacer. Pero ahora, va a ser un poco confuso, pero pronto verás por qué es tan genial. Necesitamos crear un estado. Y para crear el estado, escribimos estado, y después, escribimos el estado inicial, entonces el valor para lo que creamos aquí. Pero, ¿qué creamos aquí? Vamos a llamarlo, por ejemplo, array enganchado, así. Ahora, claro, tenemos que actuar como reaccionar, lo siento. Y ahora vamos a imprimirlo. Matriz enganchada. Entonces, como pueden ver, cuando entramos en la consola, ¿qué está pasando? Un estado de uso de reacción no es una función. ¿Por qué es así? Bueno, es cierto porque escribí SAD, no estado. Y ahora, como pueden ver, tenemos en la consola ¿qué? La matriz enganchada, que es cero y la función con paréntesis Y significa que esta función devuelve una matriz de dos valores. El primer valor es el entero y su entero ese valor es cero porque aquí hay un valor inicial para él. Entonces, como pueden ver, ahora es más grande, ¿verdad? Entonces este es solo el valor inicial para el primer elemento en una matriz, y el segundo valor es la función. Esto es bastante interesante, ¿verdad? Entonces es así en esta situación, es como el cero y algún tipo de función, ¿verdad? Bien, entonces ya está aquí adentro. Hm. Entonces tal vez vamos a dividirlo. Entonces vamos a hacer algo así. Constante. Vamos a llamarlo contador. Puedes llamarlo como quieras. Vamos a, ya sabes, hacer algo así. Entonces creamos contador que va a almacenar estos valores cero, y la función va a ser almacenada en variable. Entonces necesitas saber que, sí, puedes almacenar funciones dentro de variables, y puedes invocar estos datos de funciones, y puedes almacenar el valor de Canter aquí Y esto es súper importante. Observe que llamé a esta matriz enganchada. ¿Por qué? Porque a esta función se le llama gancho. Se llama así. Es porque engancha, conecta como para siempre esta función con este valor. Y no es como si tuviéramos que ponerlos por aquí, ¿verdad? Simplemente devuelve el contador de la variable, y devuelve el contador de conjunto de funciones que están conectados entre sí. Aquí inventamos nombres para ellos, ¿de acuerdo? Podríamos llamarlos A y B, ¿verdad? Depende de nosotros lo que los llamamos. Acaban de ser devueltos en la matriz enganchada como el primer valor y el segundo valor. Los llamamos así porque así es como queremos llamarlos, por lo que son autodescriptivos. Ahora bien, no necesitamos usar identificaciones aquí, ¿verdad? Podemos acceder al valor de Canter dentro de nuestro componente saltando a JavaScript. Pero, ¿cómo saltamos aquí dentro en el JSX, de HTML a JavaScript Porque Jax es realmente HTML más JS, ¿verdad? Necesitamos escribir aquí los corchetes y ahora el nombre de la variable desde el Javascript. Ahora como pueden ver, dice cero, pero si cambiamos el valor a cinco aquí, va a ser cinco. Entonces este es solo el valor inicial para Canter. Oye, pero queremos aumentar el Canter cuando se invoca esta función, y esta es también la única manera de hacerlo Y va a suceder cuando se haga clic en el botón. Y en JSX, tenemos qué eventos, que son muy similares al de Javascript. Se puede ver al hacer clic, lo que significa que cuando alguien haga clic en el botón, qué va a pasar lo que vamos a poner aquí. Entonces podemos, por ejemplo, poner aquí, aumentar el valor. Y por qué aumentar los valores porque vamos a definir aquí otra función, que va a ir por, por ejemplo, aumentar el valor, ¿verdad? Y esta función va a poner el contador a qué? Por ejemplo, 40, 0400. Cuando haga clic en él, lo va a cambiar a 400. Entonces se hizo clic en el botón. Y se invocó el aumento de valor, y el conjunto Canter está conectado, Por eso se les llama ganchos, recuerden. Está conectado a Canter. Entonces cuando envío aquí valor, realmente estamos enviando valor a Canter y estableciendo el estado de Canter Y para ser honestos, set Canter también no sólo está cambiando este valor, sino que también está renderizando nuestra parte de nuevo ¿Cómo sabemos eso? Porque si hubiéramos escrito aquí, por ejemplo, Canter y cambiamos el valor a 500, fíjate que aquí no pasa nada No es sólo porque Canter es constante cuando lo cambiamos a, por ejemplo, let Como se puede ver, el valor no se está cambiando por qué? Bueno, cambiamos el valor de Kanter, para ser honestos porque ¿por qué no? Invocamos el aumento de valor. Pero el problema es que no actualizamos la vista. La vista es lo que ves aquí, ¿de acuerdo? Lo que ves en el sitio web. Y no lo actualizamos. Para actualizarlo, necesitamos rendirnos de nuevo. Pero declaras como conjunto enganchado contador a contador, y cuando se invoca el contador set, no solo cambiamos el valor, derecho, sino que también recordamos Actualizar, renderizar el estado en nuestra opinión Entonces en este lugar en particular, y hay muchas optimizaciones detrás de escena, así que no te preocupes por, ya sabes, Guau, hay algunas cosas que hacer desde cero. Lo genial es que hay optimizaciones. No hace falta que te preocupes por entenderlos demasiado. Sí, están optimizados. Pero lo usaría si no lo fuera, ¿verdad? Ahora bien, si quiero aumentar el contador en uno, necesito escribir aquí el valor que estaba antes, así el estado de contador de antes, y solo agregar uno. Ahora como pueden ver, sólo estoy aumentando el valor en uno. Observe que aquí no estamos incrementando el contador por un valor. Simplemente estamos accediendo al estado de contador que está aquí a la vista, y luego estamos agregando a este estado uno y enviamos el nuevo valor para establecer Kanter, que en segundo plano está conectado a Kanter, y cambia su estado de valor aquí, y también Entonces hay muchas cosas que van en segundo plano, pero no hace falta que te preocupes por ellas ahora. Ahora, también te voy a mostrar cómo hacer esto un poco más corto. Tomémoslo bajo el mando y notemos que aquí, tenemos realmente qué matriz de cero y luego la función, ¿verdad? Así que realmente podríamos escribir aquí algo así. Como puede ver, tenemos una sugerencia. Entonces Canter va a entrar en este contador de set va en esto Y para ser honestos, es como, Oye, cero está saltando. Aquí, la función está saltando aquí porque puedes asignar valores de esta manera. Entonces, si lo hiciéramos así, cero saltaría aquí, F saltaría aquí. Pero es solo que el cero F viene de este devuelto del valor que devuelve esta función y va sobre esto. Entonces esto es más corto derecho que esto. Te mostré en esta cosa para hacerte entender lo que está pasando detrás de escena. ¿Y también qué? Aquí invocamos la función, pero podríamos hacerla de otra manera Podríamos invocar aquí, poner contador, pero ¿cómo lo invocamos? Podemos invocarlo usando función anónima como por ejemplo, esta manera y luego invocar el contador set y aumentarlo Y como pueden ver, funciona bien, ¿verdad? Entonces esto ya no es necesario. Pero también podemos en lugar de función anónima, usar la función de flecha. Y en react, usamos funciones de flecha porque tienen un poco tienen ventaja sobre algunas cosas que son difíciles de explicar ahora porque esto es solo app básica. Pero solo recuerda, en lugar de funciones anónimas, gente usa funciones de flecha. Hablamos de ellos antes, pero vamos a recordarte, esta es solo otra forma de escribir funciones. No escribas aquí ahora función, ¿verdad? Se usa el paréntesis y luego la flecha que está apuntando al cuerpo de la función Y este paréntesis aquí está aquí para qué? Es para enviar argumentos a esta función porque no tenemos argumentos. Tenemos paréntesis vacíos. Entonces estos paréntesis están siendo con este argumento vacío. La flecha que está apuntando hacia adentro va a enviar los valores al cuerpo de función que todo el cuerpo está aquí. Porque, crear una función que invoque a una sola función es estúpido, ¿verdad Simplemente tomaría demasiado tiempo. Así que solo podemos hacerlo más corto así. Entonces las funciones de flecha solo están acortando esto. Ya ves, cada vez es mejor y mejor, ¿verdad? Ahora hemos hecho lo que hacíamos antes, la vieja manera, a la nueva manera. La parte más genial es que ahora no necesitamos pensar dónde se está cambiando el valor del contador Podemos cambiarlo desde cualquier lugar de nuestro abnow. Pero debido a que el estado ahora está conectado con esta función, cuando lo hacemos con esta función, siempre estamos actualizados, actualizados en la vista. Y esto también es muy poderoso. Entonces las dos características principales de react es que dividimos las cosas en componentes, ¿verdad? Lo segundo es usar ganchos que enganchan conecta la función a la variable. Esa es sólo la lección. Muchas gracias. 85. ¿Qué es Nodejs y npm?: Hola, amigos míos, hoy, vamos a hablar de cosa súper importante, que se llama NodeJS NodeJS es un software que puedes descargar en tu PC. Y después de instalarlo, tienes disponibles muchas herramientas que están preinstaladas, ¿de acuerdo? Con este gran software y lo que te permiten hacer. En primer lugar, NodeJS te permite ejecutar JavaScript fuera de tu navegador web y esto es simplemente súper potente ¿Por qué? Porque si ejecutas NodeJS y luego lo usas, ejecutas JavaScript fuera de tu navegador web, significa que ya no necesitas lenguajes de programación como por ejemplo, Python o PHP para Python o PHP para algo lo que se llama desarrollo de Bend Ahora solo puedes aprender un lenguaje, lenguaje programación como Java script, y nunca aprender ningún otro lenguaje de programación y crear toda la aplicación, el front-end, que normalmente se hacía usando lo que HTML, CSS y JavaScript, antes tenías que aprender, por ejemplo, PHP o Python dos. Crear desarrollo de buck. Entonces algo que va a guardar, por ejemplo, datos y enviarles y obtener los datos de bases de datos, por ejemplo, ¿no? Ahora, puedes hacer todo usando un solo idioma, y esta es la solución, ¿verdad? Entonces tan tan poderoso. Hoy en día, mucha cada nueva aplicación si va a ser grande, va a estar basada en esto, ¿de acuerdo? Y después de descargarlo, lo cual es muy sencillo, eliges la versión larga de soporte de diez siempre. LTS significa que va a ser soportado por mucho tiempo. Elige el sistema y tu procesador, que es la mayor parte del tiempo X 64 defadoption download y luego siguiente, siguiente siguiente siguiente, siguiente, y con eso, vas a descargar NodeJS con el motor para ejecutar JavaScript, bien, y algo lo que se llama NPM, que significa node JS package manager Entonces algo que va a administrar paquetes para nod JS. Por defecto, NOJs viene con algunas características principales que están empaquetadas en paquetes Y estas características son, por ejemplo, que te permiten crear tu propio servidor. Guau. Así que NodJS puede configurar servidor en JavaScript, lo que significa que puedes, por ejemplo, usando JavaScript, acceder a archivos en tu computadora Sí, se puede acceder a los archivos en el servidor. Entonces, por ejemplo, bases de datos, ¿no? Y muchas, muchas, muchas otras cosas. Esto es simplemente simplificarlo, pero esta es la parte más importante que necesitas, ¿ verdad, como no, verdad Y estos son los paquetes principales, pero la gente está creando paquetes para ningún JS. Y cuando vas al sitio así, así npm js.com, encontrarás después de registrarte que hay paquetes 3000000/3000000 Por supuesto, no es necesario que los aprendas todos. Aquí tienes puedes ver bibliotecas populares cuales son paquetes, ¿verdad? Encargado paquete paquete una biblioteca sin JS, y puedes elegirlos por categoría. Bien, quiero ver los paquetes front-end, así que voy a elegir estos, y luego puedo ver cuáles son populares, por ejemplo, y aprender sobre ellos y luego instalarlos usando este NPM. Cómo hacer esas cosas como instalar, hablaremos en la próxima conferencia, pero fíjate que aquí tenemos reaccionar. Tenemos cúpula de reacción que es lo que usamos en la conferencia anterior, ¿verdad? Los incluimos manualmente en la cabeza, aquí mismo. Pero incluir algo manualmente no es bueno porque, bueno, el usuario que visitaría nuestro sitio necesitaría descargar esta parte cada vez, ¿verdad? Esto es sólo lento. Y todas las cosas como ¿qué reacciona hace? Quiero decir, por ejemplo, compilar el JSX en componentes react, por ejemplo, estas cosas se deben hacer en el servidor, Y por eso puedes instalar, por ejemplo, nodo JS en tu servidor, justo después. ¿Qué? Configura todos los paquetes que se necesitan ahí, y ya estás listo para ir, ¿verdad? Todas estas cosas se van a hacer en el servidor, ¿verdad? Y tú sólo vas a mostrar el resultado. Entonces esto es súper, súper genial. Fácil de instalar. Un clic siguiente, siguiente, siguiente. Ni siquiera lo voy a mostrar porque puedes hacer clic en los botones Siguiente. Y después de eso, necesitas aprender a usarlo en los ID, como, por ejemplo, el código de Visual Studio, ¿verdad? Y estas cosas las vamos a hacer en la próxima conferencia. Pero por ahora, como dije, más importante para ti es entender que hay un software que instalas en tu PC o en otra pieza. Entonces, por ejemplo, hosting que permite ejecutar JavaScript fuera de Web Browser. Esto es lo más importante porque hace que JavaScript sea súper potente. Se pueden hacer aplicaciones completas en JavaScript. Y voy a añadir otra cosa muy, muy, muy interesante, ¿que es qué? Tus aplicaciones no necesitan ser solo las aplicaciones web. ¿Bien? Guau, sí, ya puedes hacer en aplicaciones JavaScript, incluso para escritorio, incluso para móviles. hay marcos para Aquí hay marcos para esas bibliotecas que puedes encontrar en NPM. Entonces, para ser honestos, esta es solo una solución para todo. Tan genial, ¿verdad? Esa es sólo la lección. Muchas gracias. 86. Instalación de la estructura Vite y React: Hola, amigo mío. Hoy, instalará su primer paquete que instalará y otros paquetes. Sí, esto también es posible. Y ese paquete se llama Vite. Cuando vayas aquí en el gestor de paquetes de nodo y escribas White, notarás que, sí, hay algo que se llama te y puedes usarlo para no en las cosas que se muestran aquí, ¿bien? Entonces, principalmente la gente lo usa para iniciar algo lo que se llama Servidor local que tiene algo lo que se llama HMR, que es reemplazo de módulo caliente, lo que significa que puedes reemplazar todas las cosas en tus sitios web cuando estás trabajando con ellos. Un instante y solo en esta frase en particular sin refrescar toda la web. Entonces es súper rápido y fácil depurar usando algo lo que se llama Vt. Pero Vt, hay que entender que el paquete no siempre es como un solo programa, una sola solución. Puede haber muchas cosas dentro de ella. ¿Bien? Y también puede configurar la estructura básica de tu reacción. ¿Cómo hacemos esas cosas? Cuando vas al código de Visual Studio y abres terminal, y para abrir terminal, como puedes ver aquí, es terminal, y para abrir terminal, das clic aquí. Control más este letrero de aquí, ¿de acuerdo? Y este letrero está al lado del número uno, y luego se puede abrir y cerrar terminal. Y aquí ahora porque instalamos en el mundo de conferencias anteriores, Node JS, tienes acceso al gestor de paquetes NodeJS Entonces cuando escribo NPM, puedo emitir algunos comandos Y uno de ellos es init, lo que significa en él inicialización, que significa crear el inicio de tu y Entonces quiero que lo que hace VD y en la última versión. Entonces no necesito configurar qué versión de qué cosas quiero usar. Y cuando golpeo Enter, nos pregunta cuál es el nombre de nuestro proyecto. Si escribo aquí el nombre de nuestro proyecto, vamos a crear una carpeta con este nombre. Pero voy a poner aquí eso, lo que significa que quiero crear un proyecto en esta carpeta en particular con la que estamos trabajando. Entonces pregúntanos si queremos eliminar todos estos archivos o queremos cancelar la operación o quieres ignorar estos archivos. Vamos a ignorarlos. Entonces podemos seleccionar un framework con el que trabajar. La estructura básica de todo. Como pueden ver, hemos reaccionados. Hay otras cosas como Splter que también son recomendables Hay vista. También son muy chulos, muchos otros. Pero vamos a utilizar en este curso, reaccionar. Entonces voy a elegir reaccionar, Enter, y luego te pregunta ¿qué tipo de idioma vas a usar? ¿Vas a usar Typescript o JavaScript, verdad? Typescript es como Javascript, pero con tipos, Con tipos para variables y algunas características adicionales, avance uno, pero mucha gente lo usa porque quieren tipos y quieren depurar el código más fácilmente. Entonces, si conoces JavaScript, casi ya conoces TypeScript, pero nos vamos a centrar en JavaScript porque no quiero que nuestro código sea más difícil de leer y explicar por qué estoy explicando cosas respecto a reaccionar, No quiero explicar todo a la vez. Puede cambiar fácilmente a mecanografiado más adelante. Así que vamos a elegir Javascript. Y ahora, como puede ver, creó la estructura para todo nuestro proyecto, que es una excelente configuración de inicio para la aplicación react front end. Y aquí tienes algo como Read MiFi donde configuras ¿ qué se trata tu aplicación Tienes aquí índice HTML, que es el punto de partida para tu aplicación, y tiene fuentes que es ap JSX, como puedes ver, X aquí, no JS, es X porque escribes aquí usando HTML y JavaScript zig en un solo lugar, ¿verdad Y el vite viene con el Bb, eso es genial porque no necesitas luego instalar todas estas cosas manualmente Y ahora te mostraremos algo muy chulo. Cuando ejecuto NPM run Dev, no va a funcionar ¿Por qué? Es porque aquí no hemos instalado todas estas cosas. Acabamos de configurar la plantilla inicial. Entonces necesitamos ahora instalar todas las dependencias, lo que significa paquetes que son como, relacionados con dividir, ¿verdad? Entonces ahora cuando golpee la instalación de NPM, va a instalar todas estas cosas Y como pueden ver, va a llevar algún tiempo. Pero fíjense que tenemos aquí algo lo que se llama módulos Node. Y como pueden ver, aquí se instalaron muchas cosas. No mucho. Entonces lo más importante para nosotros es te, pero te para trabajar depende de muchas otras cosas, y además incluye algunos otros paquetes. Y para ser honestos, no necesitamos preocuparnos por ello. Por eso necesitamos al encargado de paquetes, así que no necesitamos preocuparnos por ello, ¿verdad? Lo más importante para nosotros es que todas estas cosas acaben de instalarse, y podamos utilizarlas. Eso es lo que es importante para ti. Y ahora cuando ejecutas algo, lo que se llama NPM run Dev que está aquí, como puedes ver, el paquete Jason es como una descripción de lo que hace NPM, ¿ Entonces cuando ejecutemos el comando de la muerte, va a correr vite Y significa que va a iniciar el servidor en nuestro caso porque ese es el propósito principal de Vt. Y ahora cuando abro aquí, como pueden ver, tenemos el punto de partida. Podemos contar aquí o también podemos, por ejemplo, cambiar algunos valores y ver instantáneamente el resultado. Así que fíjate que cuando hago algo como esto, y voy a, como puedes ver, dice, ir a la app fuente JSX y cambiar algo para ver lo genial que soy Entonces cuando hago algo como esto y guardo el archivo, como pueden ver, al instante cambia aquí. Entonces no necesitamos ni siquiera actualizar esta página, ¿verdad? Sea lo que sea que hagamos aquí, va a subir aquí. Y esto es súper genial para depurar. Pero también fíjate que ya no necesitamos, por ejemplo, como hicimos en la conferencia anterior, incluir react, react document object model porque fue hecho por vite cuando elegimos la plantilla para react, ¿verdad No necesitábamos, como, pensarlo. No necesitamos incluir también la Biblia. Y lo más importante que todas estas cosas están ahora en el servidor, bien, porque no es como que alguien necesite descargarlo más tarde. Entonces, para ser honestos, es simplemente mejorar tu vida porque necesitamos hacer todas estas cosas manualmente, ¿verdad? También tienes aquí, por ejemplo, gitignore, lo cual es Si conoces a Github, va a ignorar más, como, cosas que no deberían subirse en Github, ¿verdad? Entonces algunas cosas seguras que no deberían ser, como, compartidas o cosas que son grandes y no son necesarias en Github, así por ejemplo, módulos de nodo. Entonces esto es como una plantilla de configuración inicial. ¿Entonces Vite te ayuda a hacerlo? Y lo segundo que ahora puedes ejecutar el servidor localmente y depurar tu aplicación react instantáneamente. Puedes simplemente al instante, ya sabes, crear tus componentes y así sucesivamente, que te mostraré cómo hacer en las próximas conferencias. Es como punto de partida para su aplicación al instante. Muy recomendable. Me encanta Vt. Esa es sólo la lección. Muchas gracias. 87. De una aplicación de archivo a una aplicación de archivos múltiples: análisis de la estructura del proyecto React: Hola. En esta conferencia, te mostraré cómo poner lo que hicimos en las primeras conferencias. Entonces, cómo poner esto en la estructura actual de carpetas. Entonces aprenderás los archivos que están aquí. ¿Qué hacen? De qué son los responsables, ¿bien? Y también, cómo, como, hacer lo que hacíamos antes en un solo archivo. Ahora en múltiples archivos. Entonces, en primer lugar, ¿ ve aquí este archivo? Está en la carpeta fuente, y se llama JSX principal, que significa JavaScript XML. Y esta es la principal, por eso se llama script principal principal de toda tu aplicación, que conecta todo. Y fíjense lo que sucede aquí. En primer lugar, tenemos muchas importaciones portátiles, y ellos se encargan de importar funciones o componentes, ¿verdad? Y además ellos se encargan de conectarse a algo lo que se llama Upjzix donde tienes tu aplicación principal y además se está importando index dot CSS, que es responsable del CSS de todo tu sitio Entonces esto es como un lugar donde conectas todo y además creas root de tu sitio web. Y fíjate que en New Way HTML, también hicimos algo así, ¿verdad? Pero tuvimos que usar algo lo que se llama reaccionar document object model class. Pero, ¿por qué no la usamos aquí? Es porque aquí importamos en la función create root. Podríamos hacerlo de esta manera, ¿de acuerdo? Y, ya sabes, más adelante necesitaremos importar el modelo de objeto document react, y todo va a funcionar igual. Pero la reacción más reciente se va alejando de las clases. Quiere ser solo usando funciones. Y para ser honestos, es más fácil leer cuando escribes cosas así porque en primer lugar, puedes ver claramente lo que se va a usar en el programa actual aquí arriba, verdad, entonces este programa está usando función create root, ok? Y no es como si tuviéramos modelo de objeto de documento de reacción completo importante, bien, con todos los métodos dentro de él cuando estamos usando Just Create root. Además, esto por lo que he leído, tiene algún tipo de optimización en segundo plano por eso. Entonces esta es una situación de ganar ganar. No necesitamos ahora mismo escribir algo como esto. Observe que aquí estamos echando raíces. Esto es lo mismo que aquí, y está tomando la raíz desde el componente JSX up, y este es componente, pero este es un script ¿Cómo distinguimos esta cosa? Observe que la primera letra aquí es mayúscula menor, y por eso esto es solo un programa, un guión. Pero cuando ves mayúsculas, el inicio, significa que es un componente. Esto es como una convención para nombrar cosas en así que cuando lo creamos, también lo renderizamos instantáneamente Podríamos, ya sabes, renderizarlo antes en una línea, así podríamos hacer algo así si quisiéramos, podría hacerse de esta manera, pero lo hicimos de manera diferente, ¿verdad? Y después de eso, tenemos como aplicación aquí, mismo que hicimos. Aquí, pero también algo se llama un modo estricto. Puedes si quieres, eliminarlo, pero esto es, como su nombre lo indica, como modo de apertura que está observando estrictamente lo que estás escribiendo en tu proyecto actual. Y si cometes un error, va a ser más fácil detectar por ese modo, ¿de acuerdo? Y sin ella, solo sería más difícil de detectar. Entonces podrías estar pensando que va a ralentizar tu, por ejemplo, sitio web. Si estaba en tu servidor desarrollador, quiero decir, en el servidor de producción. Entonces si te gusta, transfiere tu es y estaba ahí, entonces sí, pero lo genial es que Vt lo agregó y lo va a quitar. Por su cuenta. No hace falta que lo recuerdes, ni siquiera. Entonces esta es solo una situación de ganar, ganar. Vas a desarrollar tu aplicación en modo estricto, y después, te cuando despliques tu aplicación, cuando la construyas. Y para construir tu aplicación, escribirías NPM run Build, ¿de acuerdo? Y ejecutaría el script, que es del paquete JCN que se llama build Y así usaría Vte para construir toda la aplicación. No vamos a hacerlo ahora mismo, ¿de acuerdo? Pero es igual que para que sepas, no necesitas que te importe el modo calle va a ralentizar algo más tarde. Entonces creamos root, y pusimos su aplicación, el componente principal completo del componente principal que va a conectar todo. Y aquí, como pueden ver, ¿tenemos qué? Función que se llama, y esto es complemento, ¿ verdad? Recuerde, nombre del componente. Y se nombra igual que el archivo, y aquí está el contenido del mismo, ¿verdad? Y esto va a mostrar dónde. Bueno, va a mostrar en documento buen elemento por ID root. Así que en el índice HTML. Así que aquí, ¿de acuerdo? Entonces va a reemplazar esto, la raíz con el contenido de lo que sea que pongamos como retorno aquí, ¿de acuerdo? Para ser honestos, no vamos a entrar en el índice HDMI más tarde. Sólo vamos a configurarlo una vez y probablemente nunca volveremos aquí. Aquí tienes también lo que es el primer script que se debe ejecutar, sí, este script, que es simplemente conectar el primer componente al índice HTML. Y se divide de esta manera porque casi nunca visitas index HTML cuando estás usando React y JSX principal también Eso es muy raro. Entonces esto es genial porque esto es como un guión global que rara vez visitas. Pero aquí, vas a conectar todo más tarde cuando estés desarrollando tu sitio. Entonces, para ser honestos, si quieres, como, rehacer lo que hicimos antes Entonces aquí, todo lo que tenemos que hacer es tomar toda la aplicación que teníamos, bien, e ir a aquí y simplemente reemplazar esta función aquí, ¿verdad? Y para ser honestos, eso es todo, pero tenemos error. ¿Por qué? En primer lugar, aquí estamos teniendo advertencias que dice que, bueno, se declara el estado de uso, pero no se usa, por ejemplo. Y es porque estamos accediendo al estado de uso ahora mismo usando qué clase react. Y como dije antes, en la versión más reciente, no deberíamos usarla a través del objeto, sino que deberíamos hacerlo de esta manera, ¿de acuerdo? Para que podamos ver claramente, Bien, el estado del gancho va a ser utilizado en este lugar. A continuación, tenemos advertencias de cosas que ya no estamos usando, así que solo podemos eliminarlas. Y para ser honestos, eso es todo. Tenemos ahora todo lo que hicimos en un archivo en, como, algunos archivos, y puede parecer complicado en este momento. Pero cuando tu proyecto se complica, va a mejorar tu flujo de trabajo, créeme. Al inicio este flujo de trabajo parece realmente raro. Entiendo que no te preocupes, fue lo mismo para mí. Solo necesitas acostumbrarte a ello. Y aquí tenemos ahora nuestra función, primer componente, aplicación que va a conectar los siguientes componentes dentro de ella. Cómo hacer esas cosas, te voy a mostrar en la próxima conferencia. Por ahora, lo más importante para ti es que el lugar principal de lo que vas a hacer va a pasar aquí para conectar nuevos componentes en estos lugares, vas a ser muy raramente. Este es el lugar principal. No vas a usar HTML de índice normal, por ejemplo. No, te vas a quedar la mayor parte del tiempo aquí. Y, bueno, si quieres actualizar CSS que está conectado a un componente, como puedes ver, también tienes con el CSS en mayúscula arriba, y aquí está CSS para Logo para cosas que acabamos de eliminar. Pero sí, está aquí. Y el índice de punto CSS es solo CSS para todo tu sitio web. Entonces como puedes ver, cambian cómo, por ejemplo, funcionan los anclajes, qué tan audaces deben mostrarse, ¿ Estamos usando display flex por defecto, y así sucesivamente y así sucesivamente. Entonces hay algunas cosas que van a aplicar a cada cosa. Bien, eso es sólo esa lección. Si tienes alguna duda, no dudes en preguntar. 88. Cómo crear un componente y conectarlo a App.jsx: Hola, amigo mío. En esta conferencia, te mostraré ¿cómo creamos componentes en la estructura de la aplicación react? En primer lugar, queremos crear un componente, primero debe crear la carpeta de componentes. ¿Por qué? Es porque vas a tener muchos de ellos. ¿Por qué no ponemos este componente dentro de la carpeta de componentes? Es porque quieres tener un acceso muy rápido a este archivo porque a menudo también puedes abrir JSX. Actualiza la estructura de todos los componentes de tu sitio web. Verás pronto ¿por qué es importante? Entonces, cuando estamos en los componentes, tenemos que crear ahora un archivo. Y esto es muy importante. Cuando estás nombrando tus IF, ¿de acuerdo? Cuando esté nombrando componentes, siempre debe usar mayúsculas para nombrarlos Así que este es el nombre del guión, Jaz, ¿de acuerdo? Entonces si tienes un guión, entonces un programa que va a hacer algunas cosas, lo vas a llamar así. Pero para distinguirlos de los componentes, debes usar mayúsculas. El mismo UpJSex. Tenemos que llamar ahora a nuestro componente para lo que es responsable de lo que va a mostrar. Dime ¿cómo llamarías al componente que tenemos aquí? Componente es como contar clics, ¿verdad? Tiene un rastreador para rastrear cuántos clips hicimos clic Entonces esto podría llamarse, por ejemplo, haga clic en Contador, botón Contador, haga clic en Rastreador, contador interactivo, contador recremental Lo más importante es que debe ser autodescriptivo y nuevo archivo, y voy a llamarlo haga clic en Contador. Como pueden ver, usé primero en mayúsculas aquí y primero en mayúsculas para también segundas palabras para las palabras que vienen después de la primera palabra porque puede haber muchas más palabras Entonces JSX. Y este es nuestro primer componente, y voy a crear una función que se va a llamar igual que el nombre de nuestro ¿qué? Cinco. Y después, necesitamos crear body, y el cuerpo del mismo solo va a ser el del componente up porque queremos simplemente ponerlo en otro archivo, para que podamos reutilizarlo. Y ahora tenemos errores. El primer error es que bien, se dice que nunca se ha usado, y lo segundo es que bien, no lo exportamos. Tenemos que exportarlo, así podemos decir algo como vamos a exportarlo por defecto, y estamos exportando el contador de clics. Entonces esto es muy importante porque mucha gente no lo sabe. teníamos una lección al respecto, pero te lo estoy recordando porque es súper importante Sólo le estoy informando que es posible importarlo en alguna parte, ¿de acuerdo? El segundo error que tenemos es que el estado de uso no está definido. Entonces necesitamos importarlo porque tengo codium instalado. Como pueden ver, solo puedo presionar tap y va a gustar reemplazar lo que sugirió. Entonces para poder usar codium solo instálalo, es una IA. Es muy útil. Ahora estamos usando el estado de uso aquí, así que estaba funcionando bien. Entonces lo tenemos en un archivo que no está totalmente conectado a nada en este momento. Entonces no podemos usarlo ahora aquí, ¿verdad? Podemos quitar nuestra estancia aquí porque ya no es, ¿verdad? Y también vamos a eliminar lo que devolvimos aquí, y queremos usar nuestro contador de clics aquí, ¿verdad? Pero, ¿cómo hacemos tal cosa? Bueno, necesitamos acceder a él, así que haga clic. Haga clic en Canter. Y fíjate, es porque estamos trabajando en un proyecto que es crítico Invite Tenemos algunas extensiones instaladas. Cuando pulsamos Enter, se va a importar, haga clic en Canter aquí Entonces ya podemos usarlo. Y cuando golpee Tab, como pueden ver, también va a agregar esto aquí. Y ahora, cuando vamos aquí, como pueden ver, podemos usarlo normalmente como antes, pero lo más asombroso de eso es que puedo reutilizarlo muchas veces. Por eso los componentes son geniales. El problema que tenemos aquí que tenemos error es porque necesitamos usar algo lo que se llama reaccionar fragmento, ¿bien? Si queremos usar muchos componentes cuando estamos devolviendo algo. Podríamos usar aquí, por ejemplo, DIV, bien, pero sería solo sobrecarga. Podemos simplemente ponerlo así porque realmente no necesitábamos una etiqueta, solo queríamos seguir y cómo funciona el lenguaje JavaScript porque cuando devuelves algo, no puedes devolver muchos componentes de reacción y uno. Simplemente es imposible en Javascript. Por eso inventaron algo así. Entonces cuando alguien está tratando de devolver muchas cosas, no va a ser un error cuando haces esas cosas. Y ahora tenemos algunos de ellos, y lo más genial de este aviso es que el estado de cada variable no está conectado entre sí Esto es increíble porque cada componente, cuando creas una instancia del mismo, entonces creas un ejemplo de ello, algo que no es como que ellos sepan el uno del otro, ¿verdad? ¿Por qué es tan genial? Porque normalmente, si lo estabas escribiendo antes de todo en HTML y JavaScript, cuando si hubieras creado otro elemento like que estamos haciendo lo mismo. Tendrás que cambiar las ideas, obtener elemento por ID para el siguiente elemento, necesitarás repetir todas las cosas que tenías. De lo contrario, JavaScript no sabría qué tipo debería actualizarse cuándo. Pero aquí, solo puedes reutilizarlo en cualquier lugar que quieras en tu app. Por eso reaccionar también es poderoso. Crea uno, reutiliza en cualquier lugar que quieras. Porque si se hace una vez, puedes simplemente saltar aquí y ni siquiera pensar en el componente en sí, solo lo estás usando, ¿verdad? Todas las conexiones deben hacerse automáticamente en su componente. Y esto, creo, te muestra por qué reaccionar también es muy, muy genial. Por supuesto, nuestro componente en este momento no se repetiría así en tu sitio web, pero esto es solo por el bien de, ya sabes, mostrarte las cosas más básicas cuando estás aprendiendo re. Entonces así es como funciona. Ahora mismo, solo necesitamos un componente, que, como pueden ver, es muy bueno que mantenga su estado. Y es importante notar que tenemos aquí, lo que importa. De lo contrario, no vería esta cosa. Entonces tenemos que importar esto aquí. Entonces este es realmente un lugar, como dije antes, para conectar todos los componentes que vas a crear porque en el futuro, vas a crear en componentes, muchos otros componentes, como, por ejemplo, head, navigation, por ejemplo, botones que son responsables de cosas diferentes. Y entonces solo puedes ponerlos aquí usando la pila. Esto es súper genial, ¿verdad? Si tienes alguna duda, no dudes en preguntar. 89. ¿Qué son los accesorios y cómo usarlos?: Hola, amigo mío. El día de hoy vamos a hablar de algo lo que se llama apoyos, y ellos representan propiedades. Observe que tenemos aquí haga clic en Canter, y este clic Canter se basa en un componente que siempre hace lo mismo Y si, ahora puedo repetir mi componente muchas veces, pero a veces se quiere personalizar componentes. Como, por ejemplo, quiero tener una etiqueta diferente para este botón. Quiero que este patrón aumente, por ejemplo, en cinco. Entonces quiero un comportamiento diferente, ¿verdad? Quiero personalizar componente específico a mi gusto cuando lo estoy usando en mi aplicación, ¿verdad? Entonces en este lugar de aquí, por ejemplo. Entonces, ¿cómo hacemos tal cosa? Tenemos que enviar de alguna manera para hacer clic en Canter valor que va a cambiar su comportamiento, y lo hacemos enviando algo lo que se llama props, que son como argumentos a las funciones, Entonces, ¿cómo lo hacemos? Necesitamos, como, decir, Oye, quiero tener valor inicial para ser, por ejemplo, no cero, sino diez, ¿verdad? Y ahora esta cosa va a ser enviada a donde a nuestro contador de clics aquí a esta función. Entonces es como enviar argumento. Lo llaman utilería porque, bueno, así es como lo llamaron Inmuebles, ¿verdad? Propiedades de la función va a ser como ahora aquí, enviar. Y ahora podemos llamarlo, por ejemplo, utilería, ¿bien? Y ya es suficiente, pero ¿ tenemos aquí qué? Algún tipo de advertencias porque aún no la hemos usado, por ejemplo, ¿verdad? Y ¿qué podemos hacer ahora con estos apoyos? Podemos utilizarlos. ¿Cómo? ¿Cuáles son estos apoyos ahora mismo Bueno, si hago algo así, apuntalamientos de registro de consola. Veamos qué tendremos cuando refresquemos nuestra página. Notarás que en la consola, tenemos ¿dónde está? Valor inicial diez, como puedes ver está aquí. Entonces utilería es realmente qué objeto, ¿verdad? Entonces, significa que bien, podemos copiarlo a este lugar. Significa que tenemos aquí algo como exactamente esto, ¿verdad? Entonces, si quieres acceder al valor inicial, necesitamos escribir en este lugar apoyos ese volumen inicial, ¿verdad Y como pueden ver, tenemos aquí un problema. El primer problema es que no lo hemos especificado, mejor lo escribí mal Valor inicial. Eso está bien. Entonces cuando lo refresque, como pueden ver, son diez. Y en otros lugares, está mal porque, bueno, no fijamos el valor por defecto. Y este es el problema que podemos resolver usando algo lo que se llama propetypes Pero usar esta solución es como muy largo y no quiero perder tu valioso tiempo porque hoy en día, no usas esta solución, usas mecanografiado para especificar un tipo, por ejemplo Además, en situación como esta, mayoría de las veces la gente no toma aquí objeto entero de todos los valores, como el único objeto como apoyos, lo hacen diferente Pronto te voy a mostrar cómo. Entonces cuando tengo valor inicial de utilería, puedo acceder a él, pero también podría hacerlo de manera diferente Podría hacer algo así. Así que riza los corchetes aquí y escribe el valor inicial. Entonces el mismo nombre que usé aquí, ¿verdad? Y ahora, no estamos usando props aquí, sino en el nombre de aquí Y como pueden ver está funcionando también bien. Pero ahora también podemos establecer aquí un valor por defecto. Así que el componente I no usa el prop personalizado así, entonces se va a asignar cero. Entonces como pueden ver, ahora cuando lo refresco, valor predeterminado es diez, pero en otros casos, es cero. Y tal vez te estés preguntando ¿cómo funciona? Entonces este lugar de aquí es realmente así. Así que estamos tratando de asignar a objeto que tiene al inicio, valor inicial establecido en cero, y objeto que tiene valor inicial establecido en diez. Así que aquí solo estamos reemplazando diez, estamos reemplazando cero por diez. Digamos que van a haber más cosas personalizadas. Entonces, por ejemplo, digamos que quiero contar de otra manera. Digamos que set counter debe hacer algo como, por ejemplo, incrementar por, y vamos a establecer el valor predeterminado en uno, ¿verdad? Entonces algo así. Pero también podemos enviar aquí ahora incremento por, y digamos que aquí vamos a contar por cinco Entonces ahora realmente hicimos algo así. Incremento en cinco. Y aquí está el incremento por uno por defecto. Entonces esto a esto, solo lo sustituyo. Pero fíjense que podemos, por ejemplo, el valor inicial, digamos que aquí, el valor predeterminado será 500, ¿verdad? Entonces tienes 10500. Y en el caso del segundo componente, tenemos aquí solo este valor, derecho, enviado aquí. Y esto está funcionando así. Va a JavaScript está buscando claves para propiedades que sean valores iniciales. Entonces aquí tenemos valor inicial, y va a cambiar sólo los que tiene que están del lado derecho. Entonces 500 van a llegar hasta aquí, e incrementar por uno, solo nos quedamos Entonces así es como elegimos los valores predeterminados. Y también, por eso necesitamos usar llaves aquí porque si no usamos llaves, bueno, nuestro programa no va a funcionar en absoluto. Es porque estamos tratando de hacer algo así en esta situación que no es una sintaxis que sea posible en Javascript, ¿verdad? Entonces por eso necesitamos hacer algo así. Y es bonita, creo, ya sabes, fácil de leer ahora, ¿verdad? Puedes ver claramente en la parte superior qué propiedades se van a personalizar en nuestro contador de clics de componentes. ¿Cómo están codificados, verdad? ¿Y cuáles son los valores predeterminados? Si hubiéramos usado la solución que está en la pelusa S, bueno, eso sería muy largo, y creo que es aburrido. Simplemente está tomando demasiado tiempo y no está logrando nada mejor. Como se puede ver, todavía dice que falta validación. Es porque no fijamos el tipo. Y en mecanografiado, establecer tipos es simplemente fácil. No vamos a usar lo que dice el enlace S para este curso porque esto es simplemente exagerar todo y perder nuestro valioso tiempo para aprender características geniales Entonces en el archivo de conflicto en las reglas, solo voy a agregar aquí una línea que dice que queremos hacer los tipos de prop off. Y ahora no vamos a recibir esta advertencia cada vez. Y en esta conferencia, más importante para ti fue que aprendiste a enviar apoyos personalizados como un ejercicio que voy hacer pronto contigo si quieres seguir conmigo, es hacer aquí el click Bin personalizado Entonces, para esa persona que está usando en la aplicación el componente de contador de clics para configurarlo manualmente. ¿Cómo harías eso? En primer lugar, hay que configurar un nuevo prop y nosotros vamos, lo llamamos, por ejemplo, texto de botón, algo así. Por defecto, podemos configurarlo para que me haga clic como nuestro CdiumHadlas y simplemente podemos reemplazar Así, ¿verdad? Entonces estás usando el texto del botón aquí porque el comportamiento predeterminado es click me, así que nada cambia. Pero podemos decir algo como aquí, por ejemplo, texto de botón, y vamos a configurarlo para, por ejemplo, aumentar en cinco. Para que veas, cambiamos el valor predeterminado de botón. No necesitamos ahora llegar a componente para gustar tal vez personalizar para el caso de uso específico. Podemos personalizar cada componente de este lugar usando nuestros apoyos, ¿verdad? Si no queremos personalizar, podemos usar el comportamiento predeterminado en la línea 11. Pero si queremos personalizar, podemos cambiar cualquier comportamiento predeterminado desde aquí, ¿verdad? Podrías hacer que el encabezado H one también sea personalizado, o tal vez podrías hacerlo como si fuera a mostrar o no mostrar. Depende de ti. Se puede jugar con él. Pero lo más importante de esta conferencia para ti es que puedas enviar argumentos a los componentes por algo lo que se llama props en la reacción Bueno, biblioteca, todo el mundo lo llama utilería, ¿verdad? Entonces sabrás ahora cómo usarlos y por qué se llaman así. Y ¿a qué se refiere realmente la gente cuando habla de utilería Solo son realmente argumentos los que se están enviando para funcionar bien, ¿ verdad? Esa es sólo la lección. Muchas gracias. 90. Introducción: ¿qué vamos a crear?: Hola, amigo mío. Hoy, me gustaría mostrarles ¿qué vamos a crear en la próxima conferencia? Vamos a crear clicker de oro, que te permitirá extraer oro dentro de esta mina de oro Cuando haces clic en la mina de oro, como puedes ver, tenemos animación de la cantidad de oro que hemos reunido. Y fíjate que estos patrones, estaban deshabilitados. Pero ahora puedo, por ejemplo, mejorar mi nivel minero y por eso, el poder de mi minería ahora es igual a dos. Y cuando golpeé mi oro, como pueden ver, ahora mío por dos cantidad, ¿verdad? Ahora puedo actualizarlo aún más. Ahora es por cuatro. Pero también puedo comprar el auto clicker, auto miner Y como pueden ver, ahora está minando automáticamente mi objetivo. Cuando vuelva a comprarlo, como pueden ver, tenemos ahora qué. Sí, es minería con el nivel de potencia de dos porque los clickers de auto aún no están actualizados. No tenemos forma de actualizarlos ahora, al menos. Entonces este es un juego sencillo para como auto clicker, ¿verdad? Podrías, por supuesto, extenderlo más tarde por diamantes y así sucesivamente y así sucesivamente. Pero por ahora, lo estás haciendo un poco más pequeño. Vamos a hacer todo en un solo archivo para, como, enfocarnos primero en las características que necesitas aprender para ser bueno, correcto, en reaccionar. Esto es lo que quiero enfocar en esta conferencia en estas conferencias y notar que también he creado qué íconos. Entonces vamos a aprender a conseguir íconos como este y ponerlos a la altura del sol, nuestro reaccionar. También, cómo animar, como ves aquí Observe que cuando golpeo auto clicker, esto y este animado, ¿verdad? Cuando golpeé a la minería, esto y esto, como cambiaron. Es porque bueno, cuesta subir dinero, ¿verdad? Entonces tuve esto y esto tuvo que moverse. Se puede ver que esto es como un juego sencillo al que podemos jugar un poco y luego comprar autocliker Así que hay montones, montones, montones de juegos en línea como este, pero lo más importante para nosotros es que vas a aprender muchas cosas buenas en esta sección, y al mismo tiempo, vamos a divertirnos un poco porque crear juegos es realmente genial. Si tienes alguna duda, como siempre, no dudes en preguntar. 91. Por ejemplo, crea la comp principal de GoldMiner: Hola, amigos míos. Este es un ejercicio porque deberías poder hacer esta parte de nuestro minero de oro por tu cuenta. Entonces tienes oro brezo oro menor y la cantidad de oro, y al hacer clic en él, aumentas el valor. Eso es lo que hicimos en las conferencias anteriores. Recuerda, si quieres convertirte en un codificador, necesitas practicar y hacerlo por tu cuenta o ver la conferencia como la hice Entonces puse el minero de oro de componentes aquí en nuestra aplicación principal, y dentro de minero de oro que agregué a los componentes, enganché, así conecté función set gold al gold. Y luego volví, ¿qué? Encabezado, oro menor, el valor actual. Y cuando alguien hace clic en el patrón, la función set gold que está enganchada al oro va a aumentar el oro uno cuando alguien haga clic en Mingd Entonces esta es una entrada bastante simple a nuestra aplicación, y deberías poder hacer esas cosas muy rápido porque esto es solo lo más básico con respecto a reaccionar así que practica, ¿de acuerdo? En las próximas conferencias, por supuesto, vamos a crear todo desde cero. No voy a mostrarte cómo se hizo algo porque necesitas ver cómo se están haciendo las cosas para poder aprender y convertirte en un buen programador. Si tienes alguna duda, no dudes en preguntar. 92. Actualización de potencia para mineros de oro: Hola, amigos míos, ¿es hora de crear qué? Nivel minero. Así que vamos a crear aquí nivel minero así, ¿verdad? Y ahora necesitamos mostrar este nivel. Y para mostrarlo, necesitamos en primer lugar crear una variable, y que se enganchará a una función específica. Entonces propongo llamarlo tal vez no nivel minero, sino algo así como click Poder. Es porque a lo mejor te gustaría adjuntarlo en el futuro, no sólo a algo que le va a importar algo, ¿verdad? A lo mejor quieres crear un juego que va a, ya sabes, crear cuando se va a hacer clic en algo, entonces va a aumentar el nivel del jugador, por ejemplo, o el nivel de su equipo Entonces este nombre va a ser más universal, ¿verdad? Así que haz clic en Potencia, establece Click Power, y el valor predeterminado, podemos configurarlo en uno. Bien, ¿entonces ahora solo podemos hacer qué? Muéstralo aquí, ¿verdad? Se puede mostrar Click Power, y como puedes ver, es uno. También necesitamos un botón que lo vaya a cambiar. Entonces vamos a crear un botón, y como pueden ver, lo bueno es que tenemos codium que lo va a crear Pero claro, no sabía que cuando actualizamos Click Power, también queremos, como, hacer que cueste, ¿verdad? Entonces propongo cambiarlo a algo así como costo de ello es tal vez vamos. Costo y cuanto va a costar aquí, ¿no? Entonces debemos entrar en el JavaScript, y propongo crear una variable que va a, como, mostrarla. Entonces haga clic en costo de energía o tal vez actualice el costo de energía, algo así. A lo mejor esto va a ser mejor. Ahora necesitamos crearlo aquí, actualizar el costo de energía, y esto es un buen indicio. Queremos usar estado porque queremos enganchar esto a esto y el valor inicial es enviar. Ahora, cuando alguien haga clic en este derecho en el set, haga clic en Power. Quiero aumentar el nivel de potencia, ¿verdad? Como puede ver, se está incrementando, pero no se está incrementando el costo. Esto no es lo que queremos, ¿verdad? Entonces probablemente necesitemos en lugar de hacerlo ahora mismo porque poner todas las funciones aquí no es legible. Propongo crear una función especial que va a ser responsable de todas estas cosas. Entonces propongo llamarlo un gran click Poder, ¿de acuerdo? Y no necesitamos que sea función flecha ahora. Y vamos a crear esta función aquí. Así que vamos a crearlo usando la función de tipo flecha. ¿Y por qué es eso así? Porque en react, estamos acostumbrados a usar funciones de flecha en todas partes debido problemas heredados cuando react realmente no estaba usando funciones, sino clases en todas partes. Esto es una cosa. La segunda cosa es que a veces posible que quieras usar funciones de flecha debido a la consistencia. Todo el mundo está usando la función de flecha. Entonces, si hubieras usado, por ejemplo, función típica, función anónima o funciones normales, cuando alguien va a leer tu código, va a confundir, ¿verdad? Porque esto es solo recuerda que las funciones de flecha son principalmente formas diferentes de anotar cómo se va a definir tu función , ¿verdad? Entonces solo lo estamos guardando dentro de esta variable. Eso es bastante bonito. Y ahora tenemos que definirlo. Entonces como pueden ver, la primera sugerencia, que es muy buena es que nos dice que debemos verificar si el oro, la cantidad que tenemos ahora mismo es suficiente para actualizar, ¿verdad? Porque no deberíamos poder actualizar como lo hacemos ahora, ¿verdad? Bueno, no está funcionando porque tenemos error, pero no deberíamos poder actualizarlo cuando no tenemos suficiente oro, ¿verdad? Bien, entonces esa es una buena idea. Vamos a comprobarlo. Y después, tal vez no usemos la pista porque necesitamos entender lo que está pasando uno por uno. En primer lugar, ¿necesitamos? Necesitamos, tenemos que entrar en nuestro oro engastado, correcto, y necesitamos disminuir el valor del oro por el costo de la energía de actualización, correcto, que está aquí. Eso es bueno. Después, ¿ necesitamos a qué? Usa el set click power dos más uno porque, sí, queremos que sea más potente. Y también invocamos qué costo de energía de actualización establecido porque queremos que cada actualización cueste más con cada golpe Entonces ahora, como pueden ver, no puedo darle, pero cuando mina oro y me sale después de las diez, cuando golpeo, como pueden ver, mi nivel minero es, y ahora puedo extraer oro. Bueno, no está funcionando. ¿Por qué? Porque fijamos el oro usando oro más uno, pero deberíamos usar ahora lo que el clic Poder, ¿verdad? Bien, así que ahora puedo hacerlo más rápido, ¿verdad? Cuando llegue a 20, ahora va a ser actualizado por gratis cada vez. Eso es genial, ¿no? Si tienes alguna duda, siempre es libre de preguntar. 93. Funciones de actualizador en Hooks de React: Hola, amigo mío. Hoy vamos a hablar de superimportante topping, que se llama UpdaorFunctions Y eso te mostrará ahora un gran problema que hicimos en nuestras aplicaciones actuales. Eso no se ve porque es una aplicación pequeña, y cuando hacemos clic en el botón, realmente actualizamos el estado de nuestras aplicaciones o los valores dentro de nuestro componente, como casi al mismo tiempo cuando hacemos clic en él, ¿verdad? Pero el problema es que lo que sucederá si estos cambios son como, por ejemplo, no instantáneos. No se hace localmente como están, por ejemplo, siendo enviados en segundo plano a, por ejemplo, servidor y este servidor no va a responder a tiempo. Como, por ejemplo, va a responder en 3 segundos. O por ejemplo, cuando tenemos un botón aquí. Observe que tenemos botón que fija el oro, ¿verdad? Pero también tenemos un segundo botón que hace lo mismo. Simplemente disminuye la cantidad de oro que tenemos cuando podemos actualizar, ¿verdad? Pero también fíjate que en el futuro, vamos a tener algo que va a hacer clic automático, así que va a actualizar el estado oro en el mismo tiempo cuando podamos, claro, presionar este botón aquí, ¿verdad? Y para ser honestos, esto puede ocasionar algunos problemas como ¿qué? El problema va a ser más fácil de mostrar cuando hagamos algo así. Observe que estamos invocando aquí ¿qué? Establecer función oro, que está actualizando el estado del oro enviando allí el estado actual del oro. Entonces en nuestra situación por defecto, es cero estado inicial, ¿verdad? Y luego le manda uno. Entonces sí, tenemos uno aquí. Bien. Entonces, ¿qué pasará si lo invocamos de nuevo? ¿Crees que va a ser como, Oye, yo nos enseñé aquí? Um, entonces, para ser honestos, cuando haga clic una vez ahora, ¿recibiré gratis aquí o uno? Uy. Sigues agregando solo uno. ¿Actualizamos nuestra página? Sí, lo hicimos. Bien, entonces, ¿cuál es el problema? El problema es que normalmente, si estuviéramos actualizando valores usando aquí, por ejemplo, documentar, obtener el limón, comprar ID, y luego acceder al ID del limón y luego actualizarlo a oro más poder, ¿verdad? Y luego actualizamos el oro, ¿verdad? Valor. Entonces, funcionaría así, si lo hubiéramos invocado tres veces, bien, entonces tendríamos aquí libre Pero ahora el problema es que estamos enviando aquí el estado actual del oro. Entonces el estado actual cuando estoy viendo este componente, ¿qué es? Es cero, ¿verdad? Y luego otra vez, estoy enviando el estado actual. Entonces es cero. Y luego otra vez, estoy enviando el estado actual, que es cero. Pero tal vez te estés preguntando por qué el estado. Entonces los valores aquí no se actualizan entre cada una de esa función, ¿verdad? Por qué no me gusta, Bien, entonces voy a actualizar el estado, y luego otra vez va a actualizar el estado, y de nuevo actualizar el estado. Por qué reaccionar no actualiza el estado al instante. Función Socion después de cada función, ¿por qué este lugar no está actualizado Esta es una muy, muy buena pregunta. En primer lugar, sería imaginar que tendrías como, no. 500 actualizaciones así. Entonces, si hubieras hecho clic en Min Gold, tendrías cero, ¿verdad Sería imposible cambiar este valu y mostrar al usuario 500 veces el cambio 0-500, ¿verdad? También haría que tu aplicación fuera muy lenta, ¿verdad? Por eso uh cuando invocas una función como esta que funciona en state, react va a tomar en consideración lo que enviaste aquí Entonces mandas cero más uno, ¿verdad? Y lo va a poner en Q. Así que va a esperar la acción de renderización estatal. Pero porque después invocamos, nuevamente esto y aún no invocamos renderizado, así que nuevamente estamos actualizando el estado oro a cero más uno, que es Y luego otra vez, hacemos cero más uno, que es uno. Entonces, para ser honestos, cuando el lote esté listo, cuando llegue el momento de renderizar, como resultado, obtuvimos lo que, desafortunadamente, solo uno, ¿verdad? Bien, entonces, ¿cómo resolver un problema como este? Para resolverlo, es necesario enviar al conjunto de oro. Entonces la función que se engancha al oro, bien, ¿qué se debe hacer con el oro, bien? Pero con la función porque si mandas ahí una función, va a, como, todo eso cambia uno tras otro. Y cuando va a decidir, ya sabes, refrescar el estado, primero necesita aplicar todos los cambios, ¿de acuerdo? O necesitan ser jugados uno tras otro. Tienen que seguir este patrón. Así va a suceder. Entonces, ¿cómo hacemos eso? Tenemos algo, lo que se llama funciones de flecha, ¿verdad? Entonces podríamos hacer algo así. Enviemos aquí devolución de energía plástica. Pero creo que cometí algún error al hacer demasiados paréntesis Bien, entonces la función que estamos enviando es realmente esta, ¿de acuerdo? Creo que esto es un poco más visible donde están o no los paréntesis Entonces este es el contenido, y es muy importante ahora notar que podemos llamar aquí como queramos. Entonces, por ejemplo, algo así, necesitamos inventar nuestra propia variable Y porque lo estamos inventando, tenemos que enviarlo como argumento, ¿verdad? Podríamos crear una variable local que vamos a llamar a esto. Y recuerda, no hemos usado este valor aquí en ninguna parte, ¿verdad? No se usa en este contexto, ¿verdad? Pero para ser honestos, es solo que esta variable está aquí solo para mostrar lo que se debe hacer con el valor que se engancha que se desconecta para establecer bien. Porque cuando envío esto, bueno, para establecer la función oro, entonces lo que sea que hagamos aquí en este lugar en este solo en este lugar es lo que estamos buscando le va a pasar al oro. Entonces es como, Bien, oro del estado oro anterior, por favor agrégale ClickPower, ¿de acuerdo? Entonces esta variable va a ser reemplazada por esta más tarde, ¿de acuerdo? Sé que es confuso, pero así es como funciona. Este nombre está aquí solo para nosotros. ¿Bien? Podemos llamarlo como queramos, y va a funcionar, de verdad. Entonces, cuando repetimos esto ahora tres veces, ¿verdad? Uno, dos, tres, ¿verdad? Lo llamamos como queramos. Esto se puede ver ahora aplicamos tres veces establecido frío, ¿bien? Así que esto se puede llamar como queramos, ¿de acuerdo? Pero la gente lo llama la mayoría de las veces, el mismo nombre que aquí. Pero recuerden, esto es como una variable local para esto, y la verdad es que va a ser reemplazada por anterior por el oro en la función oro establecida, ¿verdad? Entonces la gente lo llama a veces oro, ¿verdad? Y también va a funcionar, no te preocupes. Por supuesto, tenemos que repetirlo tres veces. Pero para demostrar que no es el mismo valor, mayoría de la gente simplemente hace algo así. Por lo que escriben prueba que envía del valor anterior del oro más poder cric Y también, para que sea más corto, porque ahora mismo podrías estar como, Oh , Dios mío, no voy a escribir tantas cosas. También se pueden hacer funciones de flecha así. Entonces no es necesario usar paréntesis en un argumento si hay al menos un argumento, como puede ver, y luego también puede eliminar las corchetes si está devolviendo algo aquí Así que ahora, sí, es más corto, ¿verdad? Y ahora solo necesitamos hacer algo como esto, ¿verdad? Entonces porque estamos trabajando en el estado anterior del oro, y queremos asegurarnos de que cada Bien, queremos asegurarnos que todas estas cosas se van a ejecutar antes de renderizar, ¿verdad? Necesitamos usar la función actualizada, ¿de acuerdo? De lo contrario, simplemente no va a funcionar. Entonces, cuando estamos viendo la solución así, tal vez te estés preguntando, como, Oh, esto es súper duro. No entiendo cómo funciona al fondo. Para ser honesto, Ra, esto ya no es para mí. Pero te voy a mostrar cómo usar eso aunque no entiendas cómo funciona en segundo plano. Entonces si necesitas cambiar, por ejemplo, imagina que tienes aquí, por ejemplo, estado que cambia como equipo de oscuridad a luz, ¿verdad? Entonces cambias el estado de uno a otro, así que no estás trabajando en los valores anteriores, ¿verdad? Entonces no usas funciones actualizadas, bien, así. Sin embargo, si estás trabajando con valores, que están trabajando en la derecha anterior sobre los valores anteriores que se usaron en algún lugar de la aplicación, solo es buena idea evitar errores usando funciones actualizadas porque podrían suceder. No necesitan, ¿ verdad? Pero podrían, y quieres asegurarte de que tu aplicación esté funcionando siempre correctamente. Entonces, cada vez que sucede algo como esto, quieres usar funciones actualizadas. Y hay una cosa más que quiero mostrarte ahora que te va a ayudar aún más. Entonces para ser honestos, Piense en la función actualizada así. Olvídate de lo que esté detrás de la flecha, y aquí está realmente lo que debería pasar , para ser honesto, podrías pensarlo como, Bien, así que cuando lo escribo de esta manera, entonces no tengo la garantía de que siempre funcione correctamente cuando estoy actualizando el estado de mi app. Sin embargo, esto asegura que todo funcione bien. Entonces eso es todo. Sí, eso es todo. Bien, entonces aquí, para ser honestos, solo necesitamos hacer algo así, ¿verdad? Sí, eso es cierto. Y aquí tenemos que hacer sólo algo así. Sí, eso es cierto. Y aquí sólo tenemos que hacer algo así. Entonces aquí está lo que se debe hacer con el estado pero nos aseguramos de que siempre sea una situación difícil, aunque haya muchos cambios a la vez, esto solo nos da garantía, ¿verdad Y eso es todo lo que necesitas entender sobre las funciones de actualización. Esto también es una buena idea. Observe que le tecleé vistas previas. Puedes escribir aquí, ya sabes, el mismo nombre que aquí, pero eso demuestra que bueno, que esto no es como la convención, ¿bien? Convención es que siempre lo llames con el afijo así, ¿de acuerdo? Entonces agregas previsualizaciones antes para mostrar que eres como crear aquí una variable local, ¿verdad? Pero va a funcionar si tecleas aquí también oro, ¿verdad? Pero aquí le muestras a los demás, y esta es una convención de que está utilizando las funciones del actualizador Todo el mundo sabe que ahora estás trabajando en los valores anteriores. Y al hacer tal cosa como aquí, te estás asegurando de que todas estas cosas van a cambiar correctamente, aunque haya cientos de cambios detrás de escena al mismo tiempo. Y esto va a hacer que nuestra aplicación funcione correctamente cuando hagamos clickers de auto, por ejemplo, en el futuro, ¿verdad Pero también va a hacer que funcione correctamente. Si tuviéramos, por ejemplo, algunos datos de recuperación al servidor, y esto aseguraría que los cambios se hicieran en los valores anteriores, no en las cosas que se muestran aquí cuando se está produciendo el cambio 94. [ejercicio] GUI y hooks de Auto Clicker: Hola, amigo mío. Hoy, vamos a crear un patrón que te va a permitir comprar clickers de auto y mostrar cuántos clickers de auto hay disponibles y también enganchar el estado, así que conecta todos estos valores a los Entonces esta cosa, creo que deberías poder hacer por tu cuenta. Así que trata de practicar por tu cuenta. Te voy a mostrar cómo hacerlo de todos modos, pero es una buena idea detener la conferencia, tratar de hacerlo por tu parte donde vas a hacer ejecución de la misma, bien, cómo hacer que el clicker automático funcione Es un anticipo pagado por ahora, y voy a mostrarte cómo hacerlo en la próxima conferencia. Entonces, ¿qué necesitamos? En primer lugar, tenemos que configurar, como cuántos clickers de auto tenemos, ¿verdad Entonces auto clickers y la cantidad de auto clickers, ¿verdad? Entonces aquí necesitamos escribir algo como clickers de auto, por ejemplo, ¿verdad Y tenemos que configurarlo. Entonces esperemos a nuestra súper IA, va a enganchar esto a esto, y estamos listos para ir a crear un botón. Entonces digamos que queremos crear un botón, y veamos si nos va a ayudar esta vez al click, y necesitamos configurarlo nos va a ayudar esta vez al click, aquí como puedes ver, Sí, eso es lo que queríamos. Quieres haber configurado autoclikers porque queremos tener uno más y el costo del Pero cuando compramos auto clicker, necesitamos hacer un poco más de cosas, ¿verdad Entonces podemos aceptarlo por ahora. Y en primer lugar, tenemos que configurar aquí el costo del clicker automático, así que los clickers autos cuestan, bien, algo así Y me propongo crear el gancho, ¿ verdad? Entonces algo así. Y digamos que al inicio, el costo del clicker automático se va a establecer en 20 Y aquí me propongo ponerlo en otra función, ¿no? Entonces llamémoslo, por ejemplo, comprar auto clicker, verdad, porque vamos a comprar Autocliker No está funcionando ahora mismo porque no hemos configurado la función a la que nos estamos refiriendo. Entonces propongo fijarlo, como pueden ver. Esa es una buena idea que tengamos IA que nos va a ayudar un poco. Entonces, si tenemos suficiente oro, entonces y como pueden ver, lo bueno es que porque anteriormente usamos qué? Oro anterior, poderes de clic anteriores usamos las funciones de actualización, yo también lo uso aquí, y es buena idea usar funciones de actualización cuando estamos trabajando en los valores a usar funciones de actualización cuando estamos trabajando en los que se accedió anteriormente, ¿verdad? Es una buena idea hacerlo por si acaso cuando tu programa va a aumentar, tal vez va a evitar errores. Entonces prefiero hacerlo siempre de esta manera. Entonces digamos verificar si todo se hace correctamente. Así que sí. Recuerden, no miramos esta parte, estamos viendo esta parte. Así que sí, costó algo, ¿de acuerdo? Aumentamos la cantidad de clikers de auto. Eso es genial. Y también aumentamos el precio de los clickers autos Pi dos. Bien, ya es suficiente, creo. Y veamos si funciona. Entonces estoy minando algo, y cuando llegue a los 20, puedo comprar autoclaker, Y el costo también aumentó aquí. Entonces está funcionando bien. Puedo comprar auto clicker cuando no tengo suficiente dinero. Puedo robarme el mío, ¿verdad? Y cuando llegue a los 40. Entonces este es el juego, quiero tener dos clickers de auto y deberían hacer un efecto Por lo que deberían hacer click por nosotros, así no necesitamos hacerlo manualmente. Y esto lo vamos a hacer en la próxima conferencia. Que tengas un buen día. 95. useEffect en un ejemplo práctico: AutoClicker: Hola, amigo mío. Hoy vamos a implementar clickers de auto Entonces cuando alguien lo compra, va a hacer click para nosotros, va a extraer oro ¿Cómo hacemos esas cosas? Bueno, tenemos que pensar primero en lo que necesitamos detectar. Necesitamos detectar de alguna manera cuándo va a cambiar la cantidad de los clickers automático porque este es el momento en el que queremos iniciar el auto click, ¿verdad O bien, fíjate que podríamos partir de, por ejemplo, los clickers de auto gratuitos, ¿verdad? Y luego cuando se inicialice nuestro componente, también debería comenzar a hacer clic automático Así que necesitamos de alguna manera tener una herramienta que va a comenzar a hacer clic automático cuando se carga nuestro componente o cuando se cambia el clic automático. Y a esta herramienta se le llama efecto de uso. Entonces esto es todo. Y como pueden ver, aquí tenemos una sugerencia y la vamos a usar porque use effect toma como primer argumento lo que se debe hacer, pero no esto, qué se debe hacer usando la función, ¿bien? Y tenemos que notar aquí, efecto de uso de importación. De lo contrario, no va a funcionar. Entonces ahora cuando tengamos efecto de uso, ¿qué podemos hacer? Podemos escribir lo que debería suceder cuando cambian los clickers de auto. Pero, ¿cómo lo detectamos? Tenemos que enviar esto como un segundo argumento lo que queremos mirar, observar. Entonces estamos observando el cambio en los clickers de auto ahora. Y cuando ocurra el cambio, podremos registrar el cambio. El cambio pasa algo así. Ahora, cuando vayamos a nuestro proyecto y abro la consola, note que tenemos algo así. Dos veces suceden cambios. Pero te lo dije bien, efecto de uso solo se invoca cuando se cambia la autotica Y el cambio ocurrió una vez aquí cuando se inicializó el estado Entonces, ¿por qué dos veces? Esta es una muy buena pregunta. Porque cuando vamos aquí, tenemos algo lo que se llama modo estricto. Y cuando quite el modo estricto, notarán que el cambio ahora va a suceder cuántas veces, una vez. Porque cuando estás usando el modo estricto, cada componente se va a montar dos veces por si acaso. Y bueno, eso podría llevar a algún problema potencial cuando no sabes por qué cosas así sucedieron aquí, ¿verdad? Porque si hubieras invocado aquí algo que cambiaría el estado de algo, te sorprendería un poco, ¿verdad Así que recuerda que el modo estricto hace algo así, ¿de acuerdo? Por supuesto, recuerda que este no es el lugar para fijar el valor de algo al inicio, por ejemplo, como, cambiemos el estado del oro, ¿verdad? Este no es el lugar para hacerlo directamente. El init está aquí, ¿verdad? Estamos iniciando el valor con cero aquí. A lo mejor pongámoslo a 100. Nos va a dejar delar el juego más rápido. Entonces, ¿qué podemos hacer aquí? Podemos, por ejemplo, bueno, empezar a hacer clic automático, pero ¿cómo empezamos? Para iniciarlo, propongo usar function, que se llama set interval. Te recuerdo que esta función funciona así. La función que es envía el primer argumento para establecer infernal va a ser invocada el momento en que nos fijamos aquí, por lo que 1,000 es de 1 segundo. Bien. Entonces, sea lo que sea que vaya a estar aquí, va a pasar cada segundo. ¿Y qué queremos hacer? Queremos engastar oro, ¿verdad? Queremos cambiarlo como casi aquí. ¿Queremos qué? Establecerlo a la cantidad anterior de oro, pero queremos agregar aquí la cantidad de auto clickers que tenemos, ¿verdad? No queremos usar el poder de clic. Así que recuerda, no bebemos esta parte, ¿verdad? Estamos pensando, Bien, entonces necesito establecer la demanda de oro anterior porque quiero tener la misma cantidad que tengo ahora, y quiero agregarle la cantidad de auto clickers que tenemos, ¿verdad Y como pueden ver, cuando ejecutamos nuestro programa, bueno, está funcionando porque ahora es gratis, multiplicado por dos, que es seis, y el oro se está incrementando en seis cada vez. Bien. Pero, bueno, tenemos un problema porque el modo estricto hizo que nuestro programa funcionara mal. Pero esto ni siquiera es ese problema sería como nada de todos modos, porque cuando hago clic en él una y otra vez, note que tenemos ahora, como, clickers auto gratuitos con diferentes valores, y están funcionando como en el mismo tiempo Y esto no es lo que queremos, ¿verdad? Y la característica más genial del efecto de uso es ¿qué? Es que cuando regresas aquí, una función, como puedes ver, tenemos una sugerencia aquí. Cuando volvemos aquí, una función, esa función se llama función de limpieza siempre. Y ahora, como pueden ver, está funcionando igual ¿verdad? Pero está funcionando igual porque no enviamos a intervalo claro, que es una función que toma como argumento ¿qué tipo de intervalo quiero borrar? Oh, entonces necesito crear aquí una variable que va a ser enviada a esta función, ¿verdad? Y ahora cuando lo abro, Oh, está funcionando bien porque empezamos de la libre, ¿verdad? ¿Cómo funcionó? Funciona así. Entonces la primera vez que sea nuestro componente, use effect va a ser invocado Vamos a crear intervalo, y devolvemos lo que debería suceder cuando se va a invocar de nuevo el efecto de uso Entonces porque lo hicimos dos veces seguidas, entonces cuando se va a invocar de nuevo el efecto de uso, estás limpiando qué? El temporizador de la pasada anterior, ¿verdad? Y por ello, tenemos un nuevo intervalo que también tiene una función para crilar para después, ¿verdad? Pero ahora tenemos un intervalo de ejecución, y se va a ejecutar hasta que cerremos la aplicación, o hasta que el cambio suceda a los clickers de auto Cuando le pasa el cambio a los autoclakers veamos, cuando los compramos, aquí mismo. Entonces este es el momento. Entonces, cuando compre otro autoclaker, ¿qué pasará? Recuerda, nuevamente, en primer lugar, antes de hacer esto, la función de clearing se va a ejecutar desde el efecto de uso anterior. Entonces vamos a eliminar el clicker automático que está haciendo clic con el valor de más libre Y luego vamos a configurar un nuevo clicker automático con el valor de cuatro, ¿verdad Entonces cuando lo tenía, como pueden ver , ahora aumentamos en cuatro. Ahora aumentamos en cinco, y también estamos limpiando el efecto anterior. Entonces el nombre de esto es bastante genial, cierto, porque es como usar efecto. Así que haz algún tipo de efecto yendo. Y si volvemos a ejecutar esto por el detonador que está aquí, voy a despejar el efecto anterior. Para que pueda ejecutar otro. Tan poderoso. Sé que la sintaxis aquí cuando estás viendo esto es un poco compleja. Pero recuerda, tienes dium que va a auto completar para ti la mayoría de las cosas, ¿verdad? Tú como programador, ahora mismo, muchos necesitan entender qué es lo correcto en el proceso. Necesitas saber que es buena idea usar efecto en caso así, ¿verdad? Eres igual que una persona que va a diseñar la aplicación. Realmente me encanta que reaccionar se volvió muy fácil de usar cuando algo así como el autocompletado de codificación entró en línea porque para ser honestos, recordando sobre todo esto, ya sabes, aquí está el soporte de crédito donde mandas aquí, necesito recordar que necesito mandar una función No estoy invocando una función, ¿verdad? Recuerda, esto es como si estuviera enviando una función para ser invocada. Esto es muy diferente. Es bueno tener autocompletado así que nos ayude. Necesitamos de alguna manera editar algo como aquí, por ejemplo, porque queríamos aumentar la maldición autoclq no haga clic en el poder maldición autoclq no haga clic en Pero bueno, esta fue una buena sugerencia. A lo mejor quizas querías hacerlo de esta manera. Nuevamente, usa efecto, si no entiendes ni siquiera nada de detrás de escena se usa para qué? Se pone en la función lo que se debe hacer al inicio de la unidad de componente. Entonces como segundo argumento, decimos, ¿qué debería desencadenar este efecto distinto de la inicialización, verdad Y aquí como retorno, decimos, qué se debe hacer cuando volvamos a invocar el mismo efecto de uso Entonces podemos aclarar, por ejemplo, el estado anterior. Entonces, tan poderoso piensa una línea. Imagina cuántas cosas necesitarías hacer para lograr lo mismo usando solo Vandia Javascript. Cuántas cosas necesitarías pensar sobre qué observar o detectar, ¿ verdad? Potente. 96. Desactivación condicional de un botón en React con el atributo 'disabled': Hola, amigo mío. Podemos actualizar Click Power cuando tengamos dinero. Cuando no lo hacemos, bueno, no podemos, pero aun así podemos darle click. Creo que deberíamos cambiar el atributo disabled de button a disabled. Entonces debemos hacerlo como dos, ¿verdad? De lo contrario, esto no se ve bien, ¿verdad? Usuario podría ser como, por qué puedo hacerlo. Bien. Entonces, ¿cómo lo hacemos? Bueno, tenemos que acceder a discapacitados aquí, pero el problema es, ¿cómo lo hacemos, comprobamos el estado aquí, verdad? Lo genial es que sí, lo primero es que vamos a obtener de la sugerencia de IA, y solo podemos ingresar al JavaScript y solo verificar el estado, ¿verdad? Si tenemos oro que es menor que el costo de la energía de actualización, entonces hágalo deshabilitado. Lo que sea que va a ser devuelto aquí, ¿verdad? Entonces si va a ser falso, cierto, entonces bueno, va a ser cambiado por reaccionar a desactivado. Si va a ser verdad, se va a cambiar a eliminar objeto deshabilitado, atribuirlo. Entonces en situación como aquí, también, solo necesitamos calentarnos por IA, ¿verdad? Y ahora, como pueden ver, cuando no tenemos suficiente dinero, el para el que tenemos dinero, podemos comprar.Esto es bastante genial Pero esta es una buena idea para saber qué pasa fondo porque algunas personas saben que discapacitadas, ¿verdad? Funciona y es igual a discapacitado. Sí, esto es bastante raro, pero así es como funciona este atributo. Pero toma en consideración que estamos usando lo que JZX y lo que sea que esté aquí va a ser trans amontonado en lo que reacciona, crear un limón usando babel, crear un limón usando babel Y reaccionar crear un limón cuando se pone esto así que fals, va a gustar, eliminar atributo deshabilitado Pero si consigue a través, entonces agrega crear un elemento, va a decir deshabilitado para deshabilitar. Así es como funciona en segundo plano en esta función. A lo mejor no es interesante para ti, pero me río siempre cuando entendemos por qué algo funciona como funciona, ¿verdad? Lo genial de Cudium que tenemos instalado aquí, ¿verdad? Es entonces cuando estás saltando entre muchos idiomas como yo hago, por ejemplo, y yo estoy como, ¿Cómo debo hacerlo? Bien, así es como se hizo. Entonces esto es bastante genial, como puedes ver, reaccionar es muy cool también porque, bueno, reacciona al estado de nuestra aplicación a todo el estado de todos los valores que se observan. No necesitamos ahora pensar como, Oye, así que si hago el botón deshabilitado, necesito también eliminar deshabilitado cuando tengamos suficiente dinero. Necesito entonces acceder a elemento específico cuando tengamos este dinero, y necesito repetirlo para este botón para este botón para este botón, bla, bla, bla, h Esto solo toma tanto tiempo y pensar y seguir tantas variables incluso en aplicaciones pequeñas como esa. Pero cuanto más grande es la aplicación, más fría se vuelve reaccionar, ¿verdad? Sé que había algunas, ya sabes, tenías que trabajar un poco para entender algunas cosas aquí. Pero después de que los entiendas, va a acelerar tu aplicación de desarrollo web. Que tengas un buen día. 97. Instalación de lucide-reaction: aplique iconos a nuestro juego: Hola, amigo mío hoy, te voy a mostrar cómo instalar Lucid. ¿Qué es? Lucid es solo un paquete para reaccionar o no solo reaccionar, puedes usar vistas sentidas y así sucesivamente Eso tiene muchos íconos. Es para el nodo JS, por lo que significa que puedes usarlo e instalarlo usando el administrador de paquetes para Node JS, ¿verdad? ¿Cómo lo hacemos? Bueno, por ejemplo, cuando vamos y eso, estamos usando Rag, ¿verdad? Como puedes ver, dice que necesitamos escribir NPM install used react, eso es todo Y ahora podemos usar cualquier icono desde aquí. Y estos íconos son súper. Te voy a decir ahora pronto por qué. Pero para instalar, NPM, y no voy a escribir Instalar Voy a escribir solo yo, así que voy a mostrarte un atajo para que no pierdas el tiempo. Y el bumble, esperemos. Entonces después de que esté instalado, bien, todo lo que necesitas para ir es subir aquí, y escribir algo como importar, entonces necesitas escribir corchetes, o? Y todo lo que necesitas hacer es escribir qué icono quieres. Entonces cuando vamos a la página principal, por ejemplo, quiero monedas. Mira, encontré monedas, eso es genial. Y si quiero usarlas, necesito escribir aquí ¿qué monedas es verdad? Y solo importarlos de no a pluma. Pero de por qué no funcionó, tal vez porque M es porque aún no estaba instalado cuando estaba escribiendo. Entonces, la importé, pero no la he usado. Ahora aquí puedes ver cómo usarlo. Entonces todo lo que tienes que hacer es ir aquí y hacer algo así. Bien, necesito un icono aquí, y también necesito un icono ware junto a la mina de oro, ¿ verdad? Eso es genial. Entonces necesito también Pix. Así que vamos a la cima. Vamos al sitio principal, y digamos que quiero pick x. Oh, entonces quiero a este tipo. ¿Qué tengo que hacer? Necesito ir aquí, laptop, tipo Pi. Y como pueden ver lo bueno que tengo hasta qué sugerencias. Y ahora si quiero tener PAX aquí, ¿qué debo hacer? Abre esto y escribe Pax. Bien, entonces ahora vamos a repetir esto donde en nuestro botón, ¿verdad? Y bueno, quizá veamos cómo funciona porque no lo hemos visto. Mira, tenemos íconos. Eso es genial, ¿verdad? Usar esto es muy sencillo. Y lo genial es que Vt al final, va a simplemente optimizar todo. Solo necesitas que te importe lo que está pasando aquí. Solo úsalos. Y lo que es aún más genial es que cuando empiezas a usarlos y porque los nombres son tan autodescriptivos, solo puedo escribir. Bien, quiero CPU para autocliker. Y todo lo que necesito hacer ahora es ir aquí, bien, y abrir esto y escribir CPUs De esta manera, ¿verdad? Y ahora tengo CPU, y también subo con CPU aquí. Y ahora, eso no es muy bueno en estos momentos porque, bueno, no son del tamaño de lo que fuera de tu, por ejemplo, tamaño de fuente, ¿verdad? Entonces vamos a cambiarlo en el futuro. Te mostraré cómo aplicarlo usando valores CSS, ok. Pero antes de eso, fíjate que tenemos guía aquí. Esta guía, cuando vas al menú y vas a dimensionar dice que puedes cambiar el tamaño usando algo así como accesorios, ¿verdad Entonces puedo hacer algo así y simplemente cambiar este tamaño, solo para ver, por ejemplo, 42, dos, y como pueden ver, es más grande, ¿verdad? Y cuando tienes un ícono, dos íconos o tal vez eso es una buena idea también si no te importa, pero el problema es que podemos cambiar más tarde, por ejemplo, el tamaño de nuestros teléfonos. Esto podría quedar bien. Entonces creo que siempre debes aplicar cosas así para que sea como veas dinámico. Y dice que para eso se pueden utilizar los EM. ¿Por qué? Es porque todas estas cosas aquí son realmente SFU Gs, ¿verdad? Entonces se trata de gráficos vectoriales escalables. Y eso significa que bueno, se puede ver que hasta puedo cambiar el color. Eso es muy genial. Mira, puedo hacer algo así. Color, ¿verdad? Y si, puedo escribir verde. Por ejemplo, y cuando vuelva aquí, oh, lágrima. ¿Desgarro? Es verde. Eso suena bien, ¿verdad? Que puedes hacer todas estas cosas desde aquí. Pero recuerda, también puedes aplicar solo clases a esto. Y porque sabes que es Spa Gee, derecho, puedes aplicar como sts en este componente porque serán más tarde SPAGes te mostraré cómo hacerlo en la próxima conferencia 98. Cómo aplicar CSS a componentes: className: Hola, amigo mío. Entonces, ¿cómo aplicamos CSS a nuestro impuesto HTML de componentes? Bueno, en primer lugar, no vamos a hacerlo aquí de arriba CSS porque este CSS debería afectar a qué? Todo en tu página web, ¿verdad? Deberíamos tener CSS componente. Entonces cuando cree aquí pi, voy a llamarlo igual un código menor y CSS. También tiene mayúsculas solo sugiere, si quiero editar código, estoy aquí. Si quiero editar CSS, estoy aquí. Podrías estar como, ahora, Oh Dios mío, esto va a ser lento, va a tener 30 componentes y luego vamos a tener 30 CSS que se carguen después. Creo que se va a optimizar y poner en un solo CSS después. También para JavaScripts. Es porque Vt al final, cuando vamos a publicar nuestra aplicación, simplemente va a cambiar optimizar todo. Simplemente no necesitas preocuparte por. Entonces sí, esto es mejor para ti porque ahora no tienes un CSS muy grande donde todo esté al lado del otro y después simplemente no recuerdas poner qué? Caos completo, al menos fue para mí. Y aquí solo necesitas importarlo ahora así, y puedo usar mi CSS. Y ahora, ¿recuerdas que este curso es qué? No se trata de CSS. Yo sólo voy a poner CSS aquí y voy a decirte ahora cómo usarlo aquí porque esto es un poco diferente, así que no cierres el video. Observe que aquí tenemos clases, Gt kicker, estadísticas, y botones, ¿verdad? Y tenemos que aplicarlos ahora hasta aquí, ¿no? Pero, ¿cómo lo hacemos? Bueno, la primera sección se llama Cold Clicker. Entonces creo que deberíamos aplicar a toda nuestra, como puedes ver app. Y fíjate que, bueno, me encanta el codim porque dice que debo usar el nombre de clase aquí en vez de qué? Clase. Cuando lo hago de esta manera y cuando voy a nuestra app, se puede ver que algo no está funcionando. Cuando uso el nombre de clase, va a funcionar. Bueno, no hemos cambiado marca porque cambiamos solo el tamaño del teléfono así que no vimos. Ve a ver aquí el tamaño del teléfono basado solo cambia. Pero necesitas usar el nombre de clase en lugar de clase porque class es una investigación de palabras clave para Javascript. Recuerda que estás escribiendo aquí en JA six y más tarde, si lo estaba transplicando para reaccionar y vería clase, pensaría que es una clase en JavaScript. Tenga en cuenta que no es como algo que sea un atributo de HTML, ¿verdad? Por eso inventaron que el nombre de clase es realmente un atributo. Y como puedes ver ahora, necesitamos aplicarlo qué. También aquí, hagamos algo así. Así que vamos a crear un div y apliquemos como estadísticas de nombre. Y ahora también necesitamos aplicarlo para qué? Para nuestros botones. Entonces hagamos algo así. Y ahora todos se ven bastante bien. Siempre son del mismo tamaño y uno, bla, bla, bla. Pero lo más importante es que porque estos son SPO Gs, podemos decir, Oye, quiero tener estos íconos un poco más grandes, 1.5, 1.5, ¿verdad Bien. Sabes qué, quiero tener también color, que va a ser, por ejemplo, rojo, van a ser rojos. Entonces, si quieres aplicar ahora CSS para tu componente. Simplemente salta aquí. Bien, voy a cambiar cómo se ve. Y lo genial también es notar que antes cuando todo estaba en un solo CSS, ¿verdad? Yo estaba como, ¿Dónde edité mi? Al igual que, no sé, elemento que estaba en el sitio en esta baja o algo así Fue como una locura. Esto para mi. No sabía si habías creado aplicaciones grandes, pero en los viejos tiempos, esto era solo un caos total, bien. Ahora, estás como, Bien, estoy trabajando en la mina de oro. Creo que debería cambiar algo respecto a este patrón. Bien, así que sólo estoy saltando aquí. Y para ser honestos, esta es solo una de las formas de aplicar CSS en react. A también es viento de cola, lo que permite estilizar todo en línea Este es también un buen enfoque porque hay formas predeterminadas de hacerlo. Pero realmente depende de ti lo que vas a usar. No es como si tuvieras que usar viento de cola. No hace falta que aprendas. De esta manera, también está bastante bien, ¿verdad? A veces no te da tanta flexibilidad, pero luego hablaremos de ello. Sin embargo, puedes aplicar, como CSS componente así, y va a funcionar, ¿de acuerdo? Si tienes alguna duda, como siempre, no dudes en preguntar. 99. Instala Frame Motion en React: ¡llevemos la animación a nuestro proyecto!: Hola, hoy, vamos a instalar Framer motion, que es una biblioteca de movimiento de código abierto para react made by framer, y esto te permite crear animaciones como al instante, solo tienes que adjuntar movimiento antes del nombre de la etiqueta y luego escribir qué tipo de propiedad se debe animar Esto también es súper genial porque, bueno, sé que puedes usar CSS para animar, ¿verdad Pero usar CSS para animar y también animar cuando el estado está cambiando es solo un poco difícil, Tendrías que, como, para los cambios usando, por ejemplo, usar efecto y luego aplicar los cambios de CSS cuando el cambio ocurre en el efecto de uso. Eso es difícil de usar. También esta biblioteca es muy, realmente genial porque bueno, hay tantas animaciones geniales que hacer manual sería muy difícil. Puedes utilizarlos al instante. Además, te recomiendo el exp, Biblioteca, si te interesa si hay alguna otra. Entonces, ¿cómo lo instalamos NPM, I y framer motion. ¿Bien? Así que solo tecleamos esto y esperamos un segundo, y se va a instalar el movimiento del framer ¿Cómo lo importamos? Entonces aquí, como pueden ver, dice que solo necesitamos importar algo así en la parte superior de nuestra página, ¿verdad? Así que vamos a importarlo, y ahora podemos trabajar con él, pero lo vamos a hacer en la próxima conferencia. 100. Añadamos animación simple con Frame Motion a nuestra aplicación: Hola, amigo mío. Entonces, ¿cómo usamos el movimiento? Bueno, podemos aplicarlo a un ataque, ¿no? Entonces, si quiero aplicarlo a todo el párrafo, ¿por qué, no? No. Solo necesito escribir esto, y lo acabo de aplicar. Pero el problema es que no dije lo que debería animarse. Entonces, bueno, tengo sugerencias. Tenemos que comenzar con el estado inicial y lo que queremos animar. ¿Y por qué es importante? No esto que si no establecemos estado inicial, ¿verdad? Nosotros hacemos algo así, ¿qué hay que animar Nada porque, bueno, la opacidad al inicio es una. Entonces la animación ocurre en movimiento cuando opacidad es inferior a uno, ¿verdad? Y cuando lo dije estado inicial a cero, así que cuando nuestra página está cargada, luego cuando refresque la página, como pueden ver, cambia, y eso es exactamente lo que queríamos. Pero también queríamos que cuando nos mezclamos o actualizamos Click Power o auto click, quisieras también bien, hacer esta animación porque queremos que suceda porque el oro está cambiando, Pero, ¿cómo vemos el estado aquí desde el oro? Para poder hacerlo, todo lo que necesitas hacer es escribir aquí clave y luego teclear aquí el nombre del estado que deseas observar. En nuestro caso, es oro, como puedes ver la animación funciona bien. Muy divertido, ¿no? Entonces, si quiero repetirlo para otros chicos, todo lo que necesito hacer es adjuntar la moción a todos ellos, ¿verdad? Pero creo que no debemos aplicarlo a todo aquí. Deberíamos aplicar sólo al valor aquí. Pero si quieres aplicar movimiento, necesitamos tener algún tipo de etiqueta, ¿verdad? Entonces propongo hacer hilado, que es simplemente algo que es neutral, y apegado a ello, el movimiento. Entonces el movimiento, eso es hilado. Aquí lo vamos a quitar, bien, y vamos a aplicar esto aquí, ¿verdad? De esa manera. Bien. Entonces tal vez hagamos esto aquí, así y tal vez hagámoslo así para que podamos ver claramente lo que está pasando, ¿verdad? Entonces, creo que ahora es mejor. Algo así. Sí, me encanta. Entonces ahora lo que tenemos que hacer es ir también. Haga clic en Poder. Todo bien. Y solo reemplázalo. Pero si vamos a reemplazarlo, también necesitamos reemplazarlo aquí. Haz clic en Power, haz clic en Power, bum, y además si quieres aplicarlo a auto clicker, necesitamos hacer Enter, tal vez no aquí Quizá aquí. Sí, sí. Sigamos la misma regla. Entonces lo hice así de esta manera. Y ahora copiemos esto aquí así, ¿verdad? Mm hm aquí clickers de auto. Anti auto clickers, ¿verdad? Y como puedes ver, ahora es genial, porque la animación ocurre en todos los estados cuando se cambian esos estados, ¿verdad? Bueno, la animación es muy sencilla ahora, claro. Puedes mejorarlo. Pero cómo hacerlo mejor y también cómo hacerlo personalizable porque ahora mismo, si decidimos cambiar algo, por ejemplo, aquí, también necesitamos cambiarlo aquí y luego aquí, esa no es una buena solución, ¿verdad? Pero siempre empieza de algo sencillo y ve a algo un poco más difícil. 101. ...animationProps: usemos la desestructuración de objetos para mejorar el trabajo de animación: Nuestra animación en estos momentos es bastante simple. Vamos a mejorarlo. Digamos que también quiero hacer que se cambie otro parámetro. Entonces digamos que el valor inicial de Y va a ser, por ejemplo, digamos, -20, como decía aquí, tal vez menos diez. Entonces puedes ver ahora el valor inicial es menos diez, pero no lo cambiamos usando animate, así que necesitamos cambiarlo de nuevo a, por ejemplo, cero, ¿verdad Ahora tenemos animación como el valor viene de arriba a abajo. El problema que probablemente ya veas es que ahora necesito aplicar esto aquí y aquí. No, no, no, no, no, no, no, no me gusta en absoluto la solución así, ¿verdad? Entonces, ¿cómo lo resolvemos? La forma más rápida de resolverlo. Si no planeas reutilizar tu mini componente porque este es mini componente ahora mismo en otros lugares, quiero decir, toda tu app, bien, es simplemente crear un objeto aquí que almacene todas las propiedades. Así que las propiedades animadas constantes, algo así, ¿verdad? Ahora cuando lo abro, quiero tener dentro de él, ah, exactamente esto, esto y esto. Y por esa solución ahora, puedo aplicarlos aquí muy rápido. Pero la pregunta es, ¿cómo me gusta, copiar esto a este lugar? Y para poder hacerlo, es necesario escribir. A ver si la IA va a ir a ayudarnos. Esta vez no. Entonces necesitamos teclear, ayuda. Pero como pueden ver, tenemos un error. El error está aquí porque si quieres acceder a cualquier cosa desde JavaScript, bueno, necesitamos ingresar primero JavaScript, esta es la forma. Quizás te estés preguntando ahora qué son esos puntos libres aquí. A esta cosa se le llama destructorización. Significa que voy a copiar esto a este lugar. Simplemente diciendo, esto primero va a verse mejor, correcto y lo segundo es que ahora, ¿qué podemos hacer? Podemos aplicar los cambios a todos ellos a la vez. Entonces si digo, oye, quiero tener todas las s Y empezando a las 20, ¿verdad? Y quiero animarlos a todos a cero. Entonces como puedes ver, ahora todos ellos están animados así. Entonces aplicarlo a cada Tag ahora es simple, pero tenemos un problema. Qué tipo de Digamos que eres como, ¿sabes qué? Los clickers de auto deben ser diferentes. Quiero, como, venir de arriba a abajo. Ops. Entonces, ¿cómo lo resolvemos ahora? Y lo genial de bien, HTML es que cuando escribes la primera clave, entonces tenemos que inicial, luego tenemos animate, ¿ verdad Tenemos todas las propiedades animadas aquí. Podemos reemplazar lo que era antes. ¿Bien? Recuerda, reemplaza lo que era antes escribiendo algo así como inicial, ¿verdad? Igual, y entonces puedes decir, ¿sabes qué? El estado inicial de Y va a ser, por ejemplo, -30, ¿verdad Y, bueno, Color. Como puedes ver, el estado inicial del clicker automático ahora es así, pero tenemos otro problema Que tipo de problema ARC todo el tiempo problemas. El problema es que la opacidad no es cero al inicio, ¿verdad? Entonces, para ser honestos, somos como si reemplazáramos todo el estado inicial, correcto, con solo este valor. Y lo genial es que podemos dentro de nuestra inicial, como en este lugar de aquí, en primer lugar, hacer destructorización, ¿ Así como, Oye, quiero actuar como propiedades animadas y el estado inicial solamente. Y esto quiere decir que estoy escribiendo aquí como Opacidad, cero Y 20 Pero como lo volví a escribir, el valor Y a -30, este valor de Y es como sobreescribir lo que hay antes, ¿verdad? Y ahora como puedes ver, la opacidad también se aplica a autocl 102. Paquete lodash.merge: cómo fusionar accesorios en un ejemplo práctico: Hola, amigos míos. Practicarán un poco, pero también aprenderán algo nuevo respecto al paquete muy interesante que nos permitirá fusionar propiedades como la de aquí, como al instante. Y esto va a ser muy, muy útil. Sony vemos C Y. Así que quiero sustituir esto aquí por algo que va a ser como decir valor animado. Y cuando digo valor, quiero que esta cosa esté animada y también muestre el valor. Entonces quiero mostrar este estado desde aquí, ¿verdad? Entonces mi componente como este va a reemplazar el trabajo que se hace aquí. ¿Cómo hacemos esas cosas? Para que esto sea más fácil, vamos a poner todo en un solo archivo por un momento, ¿de acuerdo? Entonces vamos a crear la función, y vamos a llamarla valor animado, ¿verdad? Así es como llamamos a los componentes. Y después, la sugerencia fue súper genial porque necesitamos, como, obtener el valor de aquí, cual es el estado, ¿verdad? Tenemos que observarlo. Entonces sí, eso es genial. Eso me gusta. Después, tenemos que devolver algo, ¿verdad? Entonces lo que sea que se va a devolver aquí, es lo que va a mostrar. Entonces propongo hacerlo sencillo por ahora para ver si funciona, siempre depurar instantáneamente, ¿bien? Entonces como puedes ver, la sugerencia es bastante genial porque ahora, cuando usamos valor animado, como puedes ver, la animación, por supuesto, no está funcionando, ¿verdad? Pero, oye, lo genial es que ahora podemos mostrar el valor tan solo escribir nuestro propio tipo de componente aquí. Acabamos de envolver el oro de esta manera, ¿verdad? Y está por dentro girada en este momento, que también es movimiento. No necesitamos saber de ello ni siquiera, cierto, que la moción está ahí. Y eso es genial. Entonces ahora necesitamos animarlo. ¿Cómo lo animamos? Bueno, propongo hacerlo de esta manera. Pero hay animación como cero, diez, diez. Vamos a usarlo para ver cómo funciona. Se puede ver que funciona así. Entonces baja, luego a diez píxeles de y y B. Esa también es una forma genial de animar, por eso no lo detuve Pero vamos a usar por un segundo esta constante desde aquí. Tomémoslo un segundo aquí. Voy a usar solo las propiedades animadas dentro. Porque ¿por qué no? Así. ¿Verdad? Y como pueden ver, sí, la animación alguna vez se hizo, pero no estamos observando el valor ahora, ¿verdad? No estamos observando el oro. Entonces, para poder observarlo, ¿ verdad? ¿Qué tenemos que hacer? Necesitamos establecer la clave para qué valorar, pero usando la sintaxis de JavaScript. Recuerda, no. GTML. Ahora cuando estamos minando, la animación está funcionando bien, ¿verdad? Entonces lo genial es ahora que podemos simplemente reemplazar todas estas cosas aquí bastante fácil. Todo lo que tenemos que hacer es así, pero no detengas la conferencia porque vamos a mostrar problemas para que yo quiera resolver. Así que haz clic en Power Auto clickers. Y ahora, como pueden ver, sí, está funcionando para todos. Y ahora podría en otra cosa bastante fácil, ¿verdad? Pero este es un comportamiento predeterminado, ¿verdad? hmm, hmm. Pero, ¿ si quiero tener algunas propiedades personalizadas? ¿Cómo lo hacemos ahora? Bien. Entonces, si queremos tener propiedades personalizadas, necesitamos permitirlas, ¿verdad? Entonces tal vez digamos algo así como, vamos a crear otro tipo, y vamos a llamarlo propiedades animadas personalizadas, algo así, ¿verdad? Y por defecto, están establecidos en nada. Entonces vamos a hacer algo así. Mm. Entonces, si no enviamos nada aquí, esto se va a quedar así, ¿verdad? Entonces, para ser sinceros, va a ser como, Bien, no enviamos nada, así que la animación simplemente va a ser la misma. A lo mejor vamos a comprobar cómo funciona. Entonces necesitamos ahora hacer como, bien, propiedades animadas, y digamos que tenemos propiedades personalizadas, ¿verdad? Propiedades de animación personalizadas. Y ahora voy a mandar algo como, Oye, quiero empezar desde -40. Y para poder enviarlo ahora, cuando estamos en el valor animado, obtuvimos la sugerencia de ppb Lo vamos a conseguir porque yo no, ya está aquí. Propiedades animadas personalizadas. Y si, quiero enviar propiedades animadas personalizadas. No debería llamarlo igual, ¿verdad? Porque esto causa Mm hmm. Mm. A lo mejor aquí lo llamamos utilería. Por supuesto, esto va a funcionar, porque están en diferentes ámbitos, pero yo simplemente no quería llamarlo igual Pero veamos si funciona. Como puedes ver, cuando estás minando oro, oro viene de arriba y otras cosas vienen de abajo, ¿verdad? Entonces sí, ahora funciona correctamente. Pero tenemos otro problema. El problema sobre eso tuvimos que especificar la opacidad aquí, ¿verdad? Porque si no especificas opacidad, como, por ejemplo, en ambos lugares, ¿verdad Se puede ver que esa cosa tiene siempre la opacidad establecida en uno, y esto no es genial B Quiero, como, obtener todo el comportamiento predeterminado, pero en el cambio, por ejemplo, como puedes ver, y valor, ¿verdad? Ahora solo se puede cambiar, por ejemplo, la propiedad inicial y va a funcionar. Porque cuando ponemos primero aquí las propiedades animadas, va a ser inicial, luego animar y luego vamos a poner ¿qué? Vamos a poner aquí, inicial. Inicial va a sustituir por completo esto Este es el problema porque la opacidad va a ser reemplazada Si no quieres tener un comportamiento como este, sería súper difícil implementarlo porque necesitamos hacer lo que hicimos antes. Tendremos que dar me gusta acceder a las propiedades de animación personalizadas que iniciales, quiero decir, propiedades animadas, iniciales y luego enviar sus propiedades de animación personalizadas iniciales y hacerlo para cada propiedad propiedades animadas. Así que imagina si tuvieras 100 de ellos, hacerlo manualmente sería estúpido, ¿verdad? Para dos de ellos, bien, tal vez podría hacerlo, pero si agrego otra propiedad a la animación, tendría que hacerlo aquí de nuevo. Entonces esta no es la manera de hacer tales cosas, ¿verdad? Y la solución para ello es instalar algo lo que se llama dash. Entonces voy a escribir NPM I dash. Bien. Y después de instalar Loda, te va a dar algo lo que se llama Marge Dame March, por favor. Por qué desde Marcha Profunda. No de Beep Merge. Lo quería de Ludach Entonces, desde lo que recuerdo, fue como esta fusión dat low dash. Pero podría estar equivocado, ¿quién sabe? Quitar importación, no necesito quitar Import porque se ha importado pero nunca se ha usado. Bien, entonces esto es solo una función que viene de este lugar, ¿verdad? Y ahora, puedo hacer algo así. Propiedades fusionadas constantes, por ejemplo, vamos a llamarlo. Y todo lo que tenemos que hacer es fusionarlos así, ¿verdad? Y en vez de que los dos se muestren aquí, vamos a hacer así. Entonces esto es solo fusionarse, conectar. Las propiedades por defecto con la que le enviamos al valor animado. Y lo va a hacer profundamente. ¿Qué significa que lo va a hacer profundamente? Que cuando no proporcionamos algo, como, por ejemplo, no proporcionamos el sitio opa, ¿verdad No proporcionamos, ya sabes, pero no necesitábamos proporcionar anime. Pero si hubiera muchos, muchos, muchos más valores clave, todos ellos se fusionarían profundamente. No hace falta que ahora te importe, sabes, si tuvieras otra propiedad aquí, por ejemplo, qué tiene que pasar cuando ocurra la salida y así sucesivamente, entonces todo se va a fusionar automáticamente. No necesitas preocuparte por nada. Creo que también el código así va a parecer más fácil de leer y usar. 103. Crea componentes funcionales: refactoricemos nuestro código: Hola, amigo mío. Hoy, vamos a tratar de refactorial nuestro código porque esto se hizo un poco grande Y además, me gustaría notar que algo así, valor animado, realmente, esto podría ser usado en diferentes lugares de tu aplicación, ¿verdad, porque esto es algo así como universal, verdad? Podría aplicarse a cualquier componente realmente que tenga un valor que deba ser animado, ¿verdad? Con algún comportamiento predeterminado, y el comportamiento predeterminado puede incluso cambiarse. Entonces, ¿cómo lo hacemos? En primer lugar, necesitamos crear un nuevo componente, ¿verdad? Entonces nuevo archivo, y vamos a llamarlo valor animado JS seis, JA seis. Pero fíjense una cosa. Hay un problema. Tenemos un componente que realmente es un componente que es como un componente funcional. No es un componente que deba ser que esté mostrando algo. Realmente es algún tipo de función que trabaja sobre el estado para los valores. Y por eso voy a crear una nueva carpeta a la que llamé funcional, que sólo va a sugerir que este componente es diferente. Bien. Entonces los componentes básicos están aquí, ¿verdad? Pero ellos son los responsables de la interfaz de usuario, ¿verdad? Pero componente funcional, va a ser más profundo. De esta manera, cuando decidas, necesito usar uno de mis componentes funcionales, te va a encontrar fácil, ¿verdad? Oh, eso está aquí. Entonces por eso lo vamos a hacer así. Y ahora solo tenemos que tomar esto, ¿ verdad? A este lugar. Y también, bueno, tenemos que importar ahora esto hasta aquí, ¿verdad? Porque sin estas importaciones , no va a funcionar. Y lo que también tenemos que hacer, tenemos que exportarlo. Y después de exportarlo, necesitamos importarlo también en su lugar adecuado. Así que importa el valor animado del valor animado funcional. Ahora, como pueden ver, funciona igual. Pero lo trasladamos a otro lugar, ¿verdad? Así que ahora podemos después de terminar mi trabajo con animación, me olvido de ello. Sólo estoy cerrando este expediente. Pero si quiero editar algo, puedo volver a ello, ¿no? Y esa es una buena forma de programar, ¿verdad? Ahora podemos enfocarnos en el proyecto aquí, ¿no? Y lo más genial de esto es porque ahora es, como dije, la carpeta funcional, es que si quería tener valor animado en totalmente cualquier otro componente, solo vas a importar esto y usarlo ¿Y porque usamos qué? Utilizamos sondas de animación personalizadas, ¿verdad? Implementamos algo así. Se nos permite cambiar cómo debería verse esta animación para el valor específico si no nos gusta el comportamiento predeterminado. Esa es sólo la lección. Muchas gracias. 104. carpeta util con la configuración de animations.jsx para toda la aplicación: Hola, amigo mío. Creamos una sola animación, y puede que nos guste o no. Pero digamos que estamos como, ¿sabes qué? Esta animación es genial. Quiero reutilizarla, no sólo en componente de valor animado. Quiero usarlo en toda mi aplicación. Entonces poner animación aquí no siempre es una buena idea, ¿verdad? Porque más adelante, tal vez descubras que esto debería usarse en todas partes. Entonces, ¿cómo lo cambiamos? Cuando vas a la carpeta de origen, puedes crear una nueva carpeta a la que llamas Utils, como aquí Ya lo he creado. Entonces dentro de él, puedes crear un nuevo archivo y llamarlo, por ejemplo, Animaciones JSX, ¿bien? Y fíjate que no usé mayúsculas aquí porque esto es solo utilidad Es algún tipo de herramienta que puedes reutilizar en tu aplicación. Entonces esta carpeta es como para cosas que deberían ser que se pueden usar en cualquier componente que desee. Ahora pego aquí algunas animaciones que he creado para ti, y lo genial es que ahora las puedes reutilizar donde quieras, ¿verdad? Entonces significa que ahora cuando vamos a nuestro minero de oro, bien, y vamos, por ejemplo, al volumen animado, podemos hacer algo como, Oye, vamos a quitar esto, ¿no? Y usemos la animación de aquí. Entonces, por ejemplo, desvaneciéndose. Pero, ¿cómo lo hacemos? Tenemos que importarlo primero. Tengo un muy chulo. Como puede ver, aquí hay algo así como importación automática, y la ruta. Y cuando lo instales, ¿qué pasará? Cuando quieras importar algo. Entonces por ejemplo, digamos, quiero importar esto, soy así puedo arrastrar y soltar mantener pulsada la tecla Mayús y hacerlo así. Eso es genial. Realmente me encanta. Pero voy a hacer algo divertido aquí. Voy a hacer algo como quiero importar todas las animaciones y hacer algo así como animaciones. Significa que ahora tengo objetos de animaciones que pueden acceder a todos ellos. ¿Qué significa? Mira, mira, mira, mira. Eso es tan poderoso. Animaciones papá Mm. Da da papá es genial, ¿verdad? Puedo, como, acceder a todos ellos desde aquí. Impresionante. ¿Y qué significa? Significa que puedo hacer algo como, por ejemplo, digamos, el tipo de animación predeterminado, ¿verdad? Podemos crear otro prop, y el prop se va a establecer en por defecto, por ejemplo, digamos, desvaneciéndose. Digamos que va a ser el comportamiento predeterminado. Y ahora puedo hacer algo como desde animaciones, quiero obtener tipo de animación cuando me estoy fusionando, ¿verdad Y esta es una app. A ver. Cuando vamos aquí, como pueden ver, las animaciones funcionan correctamente, así que es bueno. Pero lo bueno es que estoy como, ¿sabes qué? Me gustaría usar diferentes animaciones. Digamos que quiero bombas para este tipo. Oh, bien, ya ves, ahora son bombas aquí dentro. Aquí puedo usar uno diferente. Todavía puedo usar apoyos de animación personalizados, así que todo está funcionando bien Pero ahora puedo elegir una de las animaciones que tengo predefinidas. Pero este no es el final de nuestra historia para esta conferencia. Así que no te detengas. Mira, porque lo tenemos en archivo externo y podemos usarlo en cualquier lugar que queramos. Observe que tenemos aquí animaciones como el hombre universal, por ejemplo, escala en hover Entonces digamos que estoy como, ¿sabes qué? En este componente, realmente me gustaría agregar animación como esta a mi botón. Digamos a este botón enfermo, bien, o tal vez a este botón, lo que sea, depende de ti. Entonces, ¿cómo agregaría una nueva animación como? En primer lugar, necesito importar movimiento, cierto, porque aquí no se importa. Entonces, vamos a importar nuestra moción, ¿verdad? Y después, tenemos que importar también nuestra utilidad aquí. Entonces hagámoslo así. Y tenemos que decir qué Animación queremos. Entonces, en nuestro caso, queremos escala en hover, ¿verdad? Así que no importamos todo porque no necesitamos de todo en este momento. Y ahora mira qué cosa poderosa te voy a mostrar ahora. Cuando tecleo aquí movimiento, ¿verdad, esta cosa puede tener qué? Nuestras animaciones ahora, bien, porque el movimiento se aplica al botón. Pero si quieres aplicar ahora esto, tienes que hacer mirar esto. **** y la sugerencia. Mira Mm. Animación genial, ¿verdad? Está llamando cuando muevo el mouse sobre, y cuando estoy tocando, está volviendo. Tan poderoso, ¿verdad? Ahora puedes usar todas estas animaciones en todas partes de tu proyecto, en cualquier componente que quieras. Eso es genial, ¿verdad? No es como antes cuando nos gusta, ya sabes, creamos, por ejemplo, una animación genial por encima del valor animado, ¿verdad? Ahora, tenemos un tipo de acción por defecto, ¿verdad? Podemos cambiarlo si alguien envía aquí un valor que no es por defecto, ¿verdad? Y todo el mundo está contento. Eso es tan increíble, ¿no? 105. AnimatePresence: cómo crear animación de "salida": Hola, amigo mío. Hoy, vamos a hablar cosa súper interesante de las animaciones de salida. Porque fíjate que ahora, animación funciona así. El chico nuevo está apareciendo con cero Y 20. Entonces, por ejemplo, 104 aparecieron como aquí, y como se trasladó a aquí. Pero, ¿qué pasó con el viejo estado? Como, ¿qué pasó ahora con el 104? ¿Qué pasó con el 105? Simplemente desapareció, ¿verdad? Se quitó al instante. Es como si estuviera desmontado. El componente es responsable este lugar específico se desmontó, ¿verdad? Y llegó el nuevo, se montó en, y sucedió una nueva animación, ¿verdad? Entonces el problema es, ¿cómo hacemos, como, Mantener el componente antiguo para la animación de salida. Bastante interesante y difícil de manejar normalmente, pero debido a que tienes movimiento de framer, no va a ser tan difícil En primer lugar, tenemos que poner aquí algo lo que se llama propiedad de salida, W solo dice, lo que debería pasar con el viejo estado. Entonces, ¿qué debería pasar con el 110 ahora cuando viene el 111? T se puede ver, no está funcionando. Lo que sea que ponga aquí, como pueden ver, ahora es lo mismo, ¿verdad? Bien. ¿Por qué? Porque esta propiedad va a funcionar cuando algo así como un padre de movimiento va a observar lo que está pasando con el componente que se está quitando, ¿verdad? Porque, ya sabes, cuando ese movimiento no puedes, como, saber cuándo va a terminar la animación de algo que está ejecutando la animación y se está destruyendo a sí mismo, ¿verdad? No podía hacer ambas cosas a la vez. Entonces necesitas un padre que lo haga. Entonces si quieres mantener la presencia de animación así la presencia del viejo estado, necesitas aplicar aquí algo lo que se llama presencia animada, ¿bien? Y hay que, por supuesto, importarlo. Así que anima la presencia, y ahora lo que va a pasar. Como puedes ver, cosa graciosa. El modo predeterminado es el modo de sincronización, que rara vez se usa, pero es como que no solo está esperando, sino que está sincronizando con el estado anterior, ¿verdad? Pero este modo rara vez se usa. La mayor parte del tiempo que la gente usa aquí, espera, por ejemplo. Entonces es como esperar. Es que está esperando la animación de salida suceda antes de que la inicial y la animación vuelvan a suceder. Así se puede ver. Hm. Tan bonito, ¿no es así? Y hay uno más que es el pop. ¿Cómo se llama? Lo que digo, disposición de Popa. Sí, así. Como pueden ver, éste es como hacer estallar. ¿Qué? Es como entrar . Y éste funcionaría mejor si hiciéramos algo así, probablemente. Como puedes ver, es como, como puedes ver, 747780. Como pueden ver, viene de arriba, ¿verdad? Eso es como. Sí. Así que hicimos como algún tipo de relojes de arriba a abajo. Y recuerda, si quieres, como, trabajar con la animación de salida, necesitas usar presencia animada, que nos gusta observar cuál es la salida del estado que es como ser desmontado, ¿verdad Entonces, cuando detecte que esta parte de tu app va a ser desmontada Antes de eso, va a aplicar la animación de salida. Y después, esta cosa va a ser destruida, también, ¿verdad Porque este tipo sabe cuándo esto va a destruir va a ser destruido, ¿verdad? Porque puede estarlo hasta el final de la destrucción, ¿verdad? Pero si eres el objeto que está siendo destructor, no sabes exactamente el último segundo de ese destructor porque, bueno, no sabes cuánto tiempo debe durar la animación y cuándo debes invocar, como, el siguiente, Es necesario mantener la presencia de la animación. Por eso se llama presencia. Esa es la lección del público. Muchas gracias. 106. Módulos CSS: apliquemos el alcance a nuestro CSS: Hola, amigo mío. Hoy vamos a hablar tema muy importante que se llama módulos CSS porque, bueno, por cada componente, te dije que necesitamos crear un archivo CSS, ¿verdad? Y esta solución funcionará la mayor parte del tiempo, pero hay un problema. Lo primero es que, por ejemplo, cuando accedemos a él botón, ¿y si queremos acceder al botón la misma manera en otro componente? Hmm. Es como cuál será más importante en esta situación, ¿verdad? Entonces necesitamos, como, alcance. Necesitas, como, aplicar botón que está en oro menos CSS solo a oro menos componente JSix, ¿verdad Y también notar que cuando estamos usando clases, como por ejemplo, botones, para ser honestos, esta clase es autodescriptiva y normalmente en CSS, también era un problema cuando no usamos react. Cuando tenías diferentes botones, diferentes tipos de ellos, tenías que, como, cada vez inventar algún tipo de nombre aquí, ¿verdad Botones botones de navegación, bla, bla, la, la, ¿verdad? Es necesario especificar qué tipo de botones están aquí. Y esto también es un problema, ¿verdad? Y puedes resolver todos estos problemas con solo hacer algo así. Oro menor, ¿verdad? Escribes aquí algo así como módulo punto CSS. ¿Bien? Pero esto está funcionando instantáneamente porque estamos trabajando con vite que tiene todo impreso. Recuérdalo. Y ahora también necesitamos aplicarlo, pero ¿cómo lo aplicamos ahora? Entonces ahora cuando estamos importando oro menor, necesitamos teclear también tu módulo, ¿verdad? Pero también antes de eso, necesitamos escribir el nombre, que nos permitirá acceder a todas las, por ejemplo, clases aquí. ¿Nosotros hacemos eso? Bueno, tomemos, por ejemplo, hermana de. La mayoría de las veces la gente lo llama hermana. Puedes llamarlo CSS si quieres un atajo. Bueno, esta convención. La mayoría de la gente lo hace de esta manera así que solo llámalo así. Ahora puedes usar estos estilos, por ejemplo, aquí. Pero no estamos accediendo ahora a ellos directamente aquí porque note que nuestro sitio está, bueno, funcionando, pero no estamos viendo cambios que se hicieron por la clase de estadísticas de goal kicker, y botones de aquí Entonces, si quieres acceder a ellos ahora, necesitas entrar en el reino de JavaScript, correcto, y escribir, tamaño, eso, y luego debes elegir Gold clicker Como puedes ver, el clicker de oro se convierte instantáneamente en algo así Es porque estamos usando aquí, ¿qué? Este guión de aquí, ¿verdad? Para la conexión, estamos usando la pausa. Y no eres capaz de hacer algo como Sis gold, clicker, ¿bien? Porque esto no es una sintaxis en JavaScript. Pero se puede acceder, bueno, propiedad del objeto también usando la sintaxis array, ¿verdad? Entonces, sí, está funcionando. También note que obtuve algún tipo de finalización automática porque estoy usando la extensión de módulo CSS, ¿de acuerdo? Y por eso también lo tradujo en esto. Pero debes saber que es mejor usar convenciones de nomenclatura como esta para los módulos CSS No así. Es porque ahora cuando accedes a él, como puedes ver, cuando haces algo así, lo primero es que tienes fuera la autosugestión Cuando tengo el control, puedo saltar al CSS que quiero editar, ¿verdad? Y bueno, esto va a comprobar si hicimos error o no, ¿verdad? Así que mejor usar aquí estuche camello en módulos. Recuérdalo. Bien, entonces, ¿cómo lo aplicamos a los demás? En lugar de esto, tecleamos estancias, eso, y ahora tecleamos aquí estadísticas, así. Y en lugar de esto, saltamos al reino Javascript, y aplicamos ahora patrones. Así. Y nuestra aplicación está funcionando igual, pero esto es bastante divertido. Observe el nombre de esta clase. Tiene guión bajo, clicker de oro, y algún tipo de, ya sabes, volumen aquí Y esto hace que, como tu clase sea única dentro del alcance ahora, ¿verdad? Y también significa que ya no necesitas preocuparte cuando estás creando CSS para otro componente, ¿verdad? Porque puedes reutilizar todos estos nombres que están aquí y no necesitas preocuparte por colisiones con nombres, ¿verdad Porque ese módulo CSS va a aplicar sólo a este componente, siempre. Una solución bastante genial, ¿no? Esa es la lección. Muchas gracias. 107. Crea ThemeToggleButon: Hola, amigo mío. Hoy, te voy a mostrar cómo crear un botón como este que al hacer clic en él, vas a cambiar el tema de tu aplicación de claro a oscuro, ¿verdad? Entonces ahora mismo, como pueden ver, tenemos equipo ligero, y cuando haga clic en él, quiero cambiar a oscuro. Entonces ya creé un componente Team toggle button J six. Entonces tenemos una función. Recuerda sobre la exportación. También necesitamos ingresar el módulo CSS, ¿verdad? Entonces tenemos otro lugar separado para CSS. Y también fíjate que en un JS six, importé el componente y lo puse aquí. Y recuerda, porque hay componentes, puedo reutilizarlos, puedo usarlos tantas veces como quiera en muchos lugares. Eso es genial porque puedes, por ejemplo, poner ahora este botón en la esquina superior derecha, por ejemplo, arriba en la esquina inferior izquierda, lo que quieras, justo en el pie de página, en muchos lugares, no necesitas rehacer todas las cosas Entonces aquí tenemos el módulo que necesitamos, como, configurar. Entonces tenemos un botón, derecho, devuelto, y necesitamos configurar los estilos para ello. Entonces necesitamos escribir, como pueden ver, la sugerencia está bastante bien. Y ahora al inicio, tenemos algo así. Entonces se ve mejor, ¿verdad? Está en el medio. Hay toboganes básicos para ellos. Y ahora queremos, como, cambiar el estado de nuestra app, ¿verdad? Queremos hacer el equipo de claro a oscuro. ¿Y cómo hacemos tal cosa? Así que creé en el índice CSS, ¿de acuerdo? Entonces en el tamaño global, algo así como valores predeterminados para la luz ellos. Se puede utilizar en CSS varibus, ¿verdad? Entonces estos son para la luz ellos, el predeterminado, ¿verdad? Y después de eso, creé también un atributo, bien, eso es como datos ellos, oscuro, ¿bien? Entonces aquí, ¿se aplican estos varibus a algún elemento HTML que tenga qué atributo data team, verdad Si no tiene esto, entonces la variable que se va a aplicar es lo que estos valores, ¿verdad? Entonces todo lo que necesitamos hacer es aplicar de alguna manera todos estos atributos a toda nuestra página web. Pero afortunadamente, no necesitamos adjuntarlo a cada elemento, correcto. Todo lo que tenemos que hacer es cuando vas aquí es aplicarlo aquí, ¿verdad? Porque si aplicas el atributo aquí, todos los hijos lo heredarán, ¿verdad? Entonces eso es todo lo que tenemos que hacer. Y tenemos que hacerlo desde este lugar. Y ahora tenemos un problema, como ¿qué tipo de problema? Bueno, ¿cómo accedemos al elemento documento HTML, verdad? Porque estamos en reacción, ¿verdad, cómo accedemos a algo desde fuera del alcance de nuestro componente? Entonces, ¿recuerdas cuando hablábamos de efecto de uso? Antes lo usábamos principalmente para qué? Para el intervalo establecido, ¿verdad? Pero usar efecto también es algo que se puede usar para invocar funciones que deberían estar involucradas que puedan acceder al modelo de objetos de documento como normalmente lo harías normalmente, ¿verdad Y cosas así pasan, como puedes ver, quieres hacerlo aquí. Pero, ¿cómo? Bueno, solo necesitas acceder al documento, a la derecha, luego al elemento del documento. Y si, esa es una buena idea. Cambiamos el atributo del elemento document, que es HTML, ¿verdad? Datatm a DAG. Así se adjunta al atributo HTML theta equipo con el valor dark Y por eso, CSS es genial, porque cuando detecta atributos como este, va a cambiar variables, ¿verdad? Entonces estas variables a esto, ¿verdad? Entonces puedes especificar ahora aquí cómo deben comportarse tus elementos cuando ocurra el cambio. Pero quizás te estés preguntando ahora, ¿por qué sucedió instantáneamente? Bueno, primero, cuando guardo el archivo, t está detectando el guardado y actualizando todo. Pero aún así, ¿por qué? ¿Tienes aquí qué? Un componente, ¿verdad? Y cuando se va a crear este componente. Entonces en arriba J. Así que aquí, esto va a ser devuelto, cuando volvamos a J use effect se va a ejecutar. Es como, yo diría, constructor. Sí, es muy similar, pero claro, no es un constructor, pero sí, es algo que va a pasar, ¿de acuerdo? Cuando no especificas todas las cosas de las que hablamos antes, va a suceder cada vez que se vaya a montar el componente. Entonces cada vez que se va a renderizar. Entonces esto no es lo que queremos esta vez, ¿verdad? Queremos, como, hacer que funcione solo cuando se cambia el equipo, ¿verdad? Entonces, cuando se cambia el estado de equipo. Entonces significa que necesitamos usar el estado. ¿Bien? Entonces tal vez vamos a importar estado aquí, ¿verdad? Y me propongo crear ¿qué? Sí, algo así. Entonces estamos haciendo un gancho, entonces estamos conectando equipo conjunto a equipo, ¿verdad? Y el valor predeterminado va a ser claro u oscuro. Depende de ti, ¿verdad? Y queremos establecer el atributo aquí ahora, no demasiado oscuro, como, ya sabes, eso no es bueno. Queremos ponerla al valor que hay en el estado, ¿ verdad? Bien, eso es genial. Pero cuando hago clic en él, necesito, como, cambiar el estado de ellos, ¿verdad? Bien, entonces, ¿cómo cambiamos el estado del tema? Necesitamos usar OnClick cuando alguien está haciendo clic en él, ¿verdad Y la sugerencia es muy buena porque tenemos que invocar set ellos, ¿verdad? Digamos que vamos a quitarlo por un segundo y cambiarlo sólo a oscuro, ¿verdad? Y cuando los invocamos set, porque está enganchado al equipo cuando se invoca, el tema va a cambiar a oscuro Y como pueden ver, cambió, ¿verdad? Bien. Y bueno, podemos cambiar en el uno, ¿no? Por eso necesitamos esta cosa. Esta cosa es como una declaración condicional de JavaScript que comprueba esta cosa. Entonces si ellos si el estado es actualmente claro, entonces cámbielo a oscuro. De lo contrario, cámbialo a luz, ¿verdad? Y lo que se va a devolver es oscuro o claro dependiendo de lo que era antes. Y eso es genial porque es solo en una línea ahora va a cambiarlo de una a otra, ¿verdad? Y ahora lo siguiente es que debemos mejorarlo un poco porque ahora mismo, como dije, esto va a ser invocado cada vez que el botón de alternar Equipo se va a mostrar en tu aplicación Entonces creo que debemos especificar cuándo debería ser como ejecutado. Se debe ejecutar sólo cuando se cambia el estado del equipo. Entonces es como algún tipo de optimización en este caso, ¿de acuerdo? Bien, entonces esto es lo que queremos, ¿verdad? Y ahora, tal vez te estés preguntando cómo funciona, ¿verdad? B, guau, están pasando tantas cosas que hice detrás de escena. Bueno, esto es reaccionar, ¿verdad? Pero voy a explicar lo que pasó detrás de escena. En fin, porque es bastante interesante. Entonces como dije, tenemos color de fondo que es por defecto uno. Y cuando hacemos algo así. Entonces, cuando adjuntamos a HTML, ¿verdad? Entonces cuando nos apegamos a esta cosa aquí, bien, cuando nos apegamos a ella, lo hicimos aquí. Ellos les enseñaron atributo, ¿verdad? Entonces, ¿y está fijado a qué? Oscuro no claro. Entonces cada elemento va a heredar este atributo Y siempre que uses estas variables, bien, en cualquier lugar. Observe que en el botón de alternar Equipo, hice algo así. Color de fondo, y lo dije aquí al botón Var. Entonces es como que va a cambiar aquí, esta variable de una a otra cuando el atributo viene o no. Cuando voy a, por ejemplo, buen Menor, también lo hice aquí. Observe el fondo y el texto del botón, ¿verdad? Y si no quieres cambiar algo, bien, si quieres mantener el valor que debería estar aquí, bien, entonces solo tienes que escribir aquí este valor, ¿verdad? Entonces, si no quieres que algo cambie cuando el equipo está cambiando, entonces no escriba. Pero también hay una cosa más que a veces se quiere personalizar el cambio. Entonces, si quieres personalizar, por ejemplo, el botón de alternar porque como ves, ¿quería qué? Quería cambiar el color también a, por ejemplo, azul, no blanco esta vez. Entonces hay que acceder en primer lugar al atributo de dark team, derecho, eso se establece en dark. Entonces, si el botón togul tiene este atributo, entonces cambia el color de fondo a algo así Por supuesto, aquí puedes hacer lo que quieras. Entonces depende de ti, y este es el comportamiento que va a suceder en esta situación. 108. Texto condicional: de oscuro a luz y de claro a oscuro: Hola, mi ahora tenemos luz de barra oscura, pero me gustaría cambiar el texto de línea a oscuro cuando el equipo está cambiando, ¿verdad Entonces sugerimos qué va a hacer este botón. Y esto es, tan sencillo de hacer porque recuerden, estamos usando JSX así que no necesitamos escapar de la palabra HTML al script JAVA Es como si ya estuviéramos ahí, pero solo necesitamos hacer algo así, ¿verdad? Entonces solo necesitamos usar corchetes y estás en el JavaScript, y podemos hacer algo así, por ejemplo. Pero, bueno, esto no es exactamente lo que queríamos, verdad, porque es solo cambiar el orden que vamos a poner aquí algo como cambiar a oscuridad o cambiar a luz, ¿verdad? De esta manera. Como puedes ver ahora es claro, oscuro, fresco. Y funciona porque estamos comprobando por el estado, ¿no? Y si el estado es igual a la luz. Entonces cuando es así, entonces escribimos aquí oscuro. Si no, escribimos aquí luz tan seguido que estamos haciendo todas estas cosas solo, ya sabes, normalmente, escapar al mundo Javascript no es tan fácil cuando estás en HTML Necesitas hacer muchas cosas, acceder a propiedades. Aquí, no me importa. El estado cambió y cuando se cambie el estado, todo va a cambiar en consecuencia. Potente. 109. [EJERCICIO] Botón de paquete externo: cambia de tema con animación SVG: frente, amigo mío. Intenta hacerlo como ejercicio. Vaya al tamaño alterna punto Dev e intente en lugar de usar este botón, implemente uno de la colección que está disponible para usted de forma gratuita en este sitio web Entonces lo genial de Rag, como dije antes, es que hay muchas colecciones de cosas así Esto es muy, como colección específica que encontré en Internet, ¿verdad? Entonces no es que tenga muchas soluciones diferentes. Esta es solo una solución simple para este problema específico, ¿verdad? Pero empecemos por algo sencillo como eso. Entonces digamos que quiero tener un botón de alternar como este. Entonces, ¿cómo te acercarías? La mayoría de las veces, los sitios como este tienen algo que se llama documentación. Entonces cuando vas a la documentación, como puedes ver, tiene para HTML y reacciona, ¿verdad? Bien, entonces esto es lo que necesitamos usar. En primer lugar, necesitamos instalar nuestro paquete, y tenemos el gestor de paquetes que se llama NPM, correcto, para nuestro nodo JS Entonces todo lo que necesitas para ir es ir a la terminal y escribir algo así y dejarlo jugar. Rn es simplemente diferente gestor de paquetes. No lo estamos usando, así que estamos usando esta. Bien. Después, dice que necesitamos importar CSS a AJs o algo más, ¿verdad Y entonces necesitamos importar el componente por el nombre y usarlo, ¿verdad? Bien, entonces cuando vayamos a las calcomanías, fíjate que digamos eso, oye, me gusta esta, ¿verdad Entra de la luna al sol. Bien, eso es genial. Sí, eso es lo que me gusta. Entonces no estoy usando HTML simple. Sí, también puedes, pero estoy usando Ra. Entonces significa que, como puedes ver, tenemos aquí copiar y pegar para el portátil importador de nuestra página. Nuestro paquete ha sido instalado, y ahora solo podemos importar todas estas cosas aquí, ¿verdad? Entonces todo lo que tenemos que hacer es importarlo a nuestro proyecto con el CSS que acabamos de instalar cuando hicimos esto, ¿verdad? Y el nombre del componente que queremos usar. Bien. Así que ahora, sí, eso es genial. Trato de establecer algo así, pero esto no es lo que queremos. Queremos poner en primer lugar el botón, ¿de acuerdo? Y ahora, dice que debemos especificar también duración de la animación. Entonces digamos que queremos especificar digamos el valor predeterminado. Pero el problema es que no vemos nuestro componente. Y por qué es eso así que se esconde aquí. Es porque el color predeterminado es el blanco, y significa que necesitamos cambiar el estilo. Pero, ¿cómo cambiamos el estilo de la misma? Cuando vayas a la documentación, verás que tenemos aquí algo así como el estilo. Entonces para cambiar el color de Togo, simplemente cambie la propiedad de color CSS del componente. Oh, entonces solo necesitamos cambiar esa propiedad de color. Bien, entonces todo lo que tenemos que hacer es en primer lugar, cambiar el estilo. Así que el estilo es igual. Y ahora entramos en el reino JavaScript, ¿verdad? Y luego, nuevamente, abrimos curva los corchetes para entrar en qué ingresar al CSS, derecho, porque queremos devolver CSS aquí. Y ahora necesitamos establecer color, ¿verdad? Entonces cuando cambie el color a, por ejemplo, rojo, qué va a pasar como pueden ver, ahora es rojo, ¿verdad? Y como pueden ver, ya está funcionando, ¿no? Está cambiando el estado, pero no está funcionando como queremos porque no está invocando cosas que tenemos aquí, ¿verdad? Bien, entonces vamos a ver ¿qué dicen? Si quieres manejar el estado, necesitas implementar algo como esto. Uh, eh. Bien. Entonces necesito, como, usar la función set aquí, correcto, cuando termine el go. Bien, entonces vamos a implementarlo. Entonces cuando entramos en togon, verdad, queremos qué? A ver si vamos a conseguir pistas? Sí, lo conseguimos. Pero, ¿es apropiado? No exactamente, porque queremos cambiar de equipo, no así. Recuerden, no podemos cambiar el estado directamente. ¿Queremos cambiarlo usando qué? El equipo de conjunto de funciones. Entonces la IA puede estar equivocada. Bien. Y ahora cuando alternamos y configuramos nuestro equipo, no está funcionando. ¿Por qué es eso así? ¿Es porque probablemente cometí un error aquí? Sí, claro, necesitamos, por supuesto, usar una función de flecha. Entonces como puedes ver, bueno, sí, esta sintaxis aquí es difícil de conseguir, ¿verdad? Usted cometerá errores como este, e incluso yo cuando estoy haciendo mucho código en muchos lugares diferentes, en muchos idiomas diferentes, también cometí errores así, pero es lo rápido que los puedes detectar, ¿verdad? Con la experiencia viene, qué tan rápido ves cosas así. Y como puedes ver, tuvimos que usar la función flecha, derecha, porque no podemos invocar aquí una función, ¿verdad Pero estamos enviando una función para ser invocada por toggle property, ¿verdad? Bien. Entonces cuando lo uso, como pueden ver, ahora es genial porque está cambiando el estado de ellos. Bien, eso es exactamente lo que queríamos, ¿verdad? Y ahora, tenemos que cambiar también el estado aquí, ¿verdad? Entonces cambia el cuando vamos aquí, fíjate que aquí hay algo así como alternado Entonces, cuando false cambia a true o a través a false, esto va a ser alternado o desactivado Entonces significa que va a cambiar de luna a sol. Bien, esto es un problema ahora mismo porque ya tenemos un estado aquí, ¿verdad? Entonces sí, fue indiferente, por ejemplo, componente, pero no quiero ponerlo en otro componente ahora mismo porque, bueno, no quiero perder tu precioso tiempo ahora mismo, ¿de acuerdo? Puedes hacerlo por tu cuenta más tarde. Pero podemos hacer algo como lo sugerido aquí. Entonces podemos, verificar el equipo, así que si el estado es igual a luz, correcto, entonces vuelve verdadero. Si no, va a volver a caer, así que realmente logramos lo que queríamos. Genial, ¿verdad? Creo que deberíamos estar usando el color de fondo para el para este botón porque realmente clásico es un botón, como para la variable que se usa para el color de fondo, parte de todo tu sitio web, ¿verdad? No para fondo del botón porque como pueden ver, no está funcionando, creo, como queremos, ¿verdad? Entonces, ¿cómo hacemos tal cosa? ¿Podemos acceder aquí a las variables? Sí, claro. Verás, si le dije color de fondo a azul, va a ser siempre azul, ¿verdad? Pero quiero usar la variable. Entonces, ¿cómo lo usamos? Tenemos que hacer algo así. Vamos a entrar en variable, ¿verdad? Y luego sí, la sugerencia es fondo de botón, pero no queremos usar fondo de botón. Queremos usar el color de fondo esta vez. ¿Por qué no? Ahora, como pueden ver, el botón siempre tiene el color de nuestro fondo, y por eso, el interruptor parece mejor, ¿verdad? Lo siguiente es, bueno, digamos que quiero cambiar el tamaño de la misma. Entonces para cambiar el tamaño de la misma, vamos a cambiar el tamaño de fuente. Y bueno, sí, creo que podríamos hacerlo de esta manera, pero no con igual. Entonces, por ejemplo, ya sabes, 1.9, sí. Algo así. Ahora es más grande, ¿verdad? Bien. Entonces cambiamos el tamaño de fuente, cambiamos el color, pero creo que el color rojo es malo. Yo creo que debería depender de qué? Esto debería depender del estado de nuestro equipo, ¿no? Entonces si nuestro equipo es igual, también, sí, la sugerencia es mala en este tiempo. Entonces si es igual a la luz, entonces quiero cambiar el color a color estático que decida que va a ser bueno ahora. Entonces, si estuviéramos en el modo de luz, podríamos decir, como, Oye, haz clic en la luna que es azul, ¿verdad? Pero por lo demás, hay que golpear el sol amarillo, ¿verdad? Entonces, en modo oscuro, va a ser amarillo. Ahora como puedes ver, círculo, ¿verdad? Bastante impresionante. Y bueno, podrías ponerlo como, ya sabes, componente diferente, ¿verdad? Y por ejemplo, después podrías, ya sabes, usarlo en muchos lugares de tu programa. Este programa será otro programa porque este será el comportamiento predeterminado para el botón tem que más te guste, ¿verdad? No el botón tem que fueron creados por ellos, ¿verdad? Hagamos esta. Muchas gracias. 110. Separa botones y mira qué sucede con el estado "compartido": Hola, amigo mío. Estos dos botones están haciendo lo mismo, pero están en el mismo componente. Entonces significa que cuando vamos a reutilizarlos, van a estar uno al lado del otro, y no es así como se debe hacer. Pero el problema es, ¿qué pasaría si decidimos ponerlos en otra pelea? Así es. Entonces vamos, por ejemplo, a crear otro componente. Vamos a llamarlo clásico Tug button, bien, así. Y, claro, si JSX, y ahora digo que vamos a, como, copiar todo a partir de aquí, así que no necesitamos reescribir todo, Copiarlo aquí. Ahora, cambiemos el nombre de esto al clásico botón de alternancia usando el atajo F dos, así que va a, como, cambiar el nombre de todo, ¿verdad? Y ahora en nuestro clásico botón de alternar, no vamos a usar esta parte, ¿verdad? Sólo vamos a devolver esto y ya no necesitamos esto, ¿verdad? No necesitamos el clásico. Y cuando vayamos al botón de alternar del equipo, significa que ya podemos quitar el clásico de aquí, ¿verdad? Y podemos quitar esta parte, bien, porque ya no es necesaria esta. Entonces los hemos dividido tal vez. Veamos qué va a pasar. Cuando lo ponemos en Ajax justo porque ahora mismo tenemos en este botón, ¿verdad? Entonces digamos que queremos usar también el clásico botón de alternar, ¿verdad? Ese. Como pueden ver, están aquí, ¿no? Pero puede parecer un problema como ¿ves eso? Que cuando pegué a oscuras y le pegué a esto, alguna manera no cambiaron el estado apropiadamente. Entonces es porque, bueno, tenemos aquí equipo, y también tenemos aquí equipo, ¿no? Hm mm hmm. Pero ese es un equipo diferente, ¿verdad? Este es el estado para este componente. Bueno, tienen el mismo nombre, pero no se comparten juntos. Pero, ¿cómo resolvemos algo así? Te voy a mostrar ahora una solución que probablemente se muestra en la mayoría de los cursos, pero en la próxima conferencia, te mostraré una mejor solución. Bueno, porque el botón de alternar delgado y el clásico botón Togu es nuestra aplicación, ¿verdad? Significa que sí, podríamos hacer algo así. ¿Verdad? Entonces vamos a, como, poner el estado y el efecto de uso en este lugar, ¿verdad? Bien, entonces todos tenemos que hacer ahora es importar estas cosas, ¿verdad? Y ahora tenemos que de alguna manera, como, oler al equipo y ponerlos a este tipo que está aquí, ¿verdad? Entonces, ¿cómo hacemos esas cosas? Bueno, sabemos como personalizarlo con utilería, ¿verdad Entonces no es nada como, difícil de hacer porque todo lo que tenemos que hacer ahora es, como, decir, Oye, ¿sabes qué? Necesito tomar estas dos cosas equipo y fijarlas de alguien más, no dentro de este lugar, ¿verdad? Ya podemos eliminar esto. Y podemos eliminar esto, y también aquí. ¿Bien? Tenemos que hacerlo así. Y ahora tenemos que enviarles esto. Entonces significa que para Team, sí, tenemos que hacer esto y para esto, tenemos que hacerlo. Y ahora, bueno, el estado está aquí, ¿no? Y enviamos a este estado este lugar. Bueno, también he cometido un simple error aquí, escribo equipo sin E, y esto causaría muchos problemas. Y ahora es lo que está pasando. Como puedes ver, funcionan correctamente porque solo los enviamos como apoyos a classic y Tem toggle button Entonces todo está funcionando bien. Pero, ¿por qué esta solución es mala idea, verdad? Bueno, en primer lugar, fíjate que ¿cómo podemos ahora usar el botón de alternar de equipo o el botón de Togo clásico en otra aplicación? Necesitamos memorizar eso para poder usarlos, necesitamos crear algo así que también necesitamos memorizar en el componente padre Y entonces hay que hacer algo así. La única razón es, creo, debería ser suficiente. Pero digamos que dices, Oye, eso es sólo para una aplicación, funcionando bien. Vamos. Bien, bien. Digamos que vas a tener muchos componentes que necesitas para compartir el estado. Entonces tendrás entonces aquí muchos estados de uso, mucho usefft por ejemplo, y vas a tener caos en el regreso aquí, Bien. Eso es malo, ¿verdad? Lo segundo es que lo tercero es, bueno, las pruebas se vuelven más desafiantes porque con el estado administrar la aplicación, probar componentes individuales como, por ejemplo, Team tagle o el botón clásico de alternar podría requerir, bueno, burlarse del estado o usar la biblioteca de pruebas y así sucesivamente Y agrega mucha complejidad. Y para ser honestos, y tu aplicación va a ser un caos total cuando solo vas a hacerlo de esta manera, ¿verdad? Va a ser difícil de escalar, va a ser difícil de reutilizar. Y también hay una regla de que el componente up, este momento es responsable tanto renderizar la interfaz de usuario como de administrar el estado de la aplicación. Y no es así como debería funcionar porque esto viola el principio de separación de preocupaciones, ¿verdad Entonces, ¿cuál es este principio? Los componentes de la interfaz de usuario deben centrarse únicamente en el renderizado y la interacción del usuario. Pero la administración estatal debe ser manejada por un mecanismo o componentes dedicados, ¿de acuerdo? Entonces no deberías, como, hacer tal cosa aquí. Encontrarás tutoriales de mano que hacen algo así, pero no, no lo hagas en este lugar. ¿Bien? Te mostraré una mejor solución en la próxima conferencia. Que tengas un buen día. 111. ¿Cómo crear un proveedor de contexto? - Creemos ThemeProvider: Hola, amigo mío, hoy te voy a mostrar cómo crear contexto para tus componentes porque cuando estás compartiendo estado, una de las formas de compartirlo es usando algo lo que se llama contexto. ¿Cómo creamos algo así? En primer lugar, necesitas crear una nueva carpeta porque si vas a tener más contexto, es buena idea tenerlas en carpeta separada. Entonces vamos a crear un archivo al que vamos a llamar contexto de equipo. Y esto es JSX cinco. Y dentro de él, necesitamos crear nuestro contexto, y lo creamos escribiendo algo así, contexto y luego crear contexto. Eso es suficiente, pero necesitamos importar ahora para crear contexto a partir del acto. Y contexto. Oh, sí, esa es la ortografía adecuada. Y ahora podemos usar el contexto en los niños. Dónde vamos a brindar este contexto. Esto es muy importante porque, bueno, ahora mismo cuando vamos, por ejemplo, al botón de alternar Tem, podemos importar nuestro contexto delgado. Entonces podemos escribir algo como contexto de importación, y debería estar aquí desde el contexto, algo así. Y ahora podemos usar el contexto, pero el problema es que primero tenemos que proporcionarlo, ¿verdad? Tenemos que decir, qué tipo de contexto va a haber dentro de él. Y lo proporcionas en el mismo archivo aquí, a continuación creando algo con este proveedor de equipo, ¿de acuerdo? Y para poder hacerlo, escribes , como puedes ver, Proveedor de equipo, y necesitas hacer algo como abrir aquí, sí, vamos a llegar aquí pops y cerrarlo. Por un segundo, eso es solo cerrarlo, y una cosa muy importante es también que necesitamos exportar todas estas cosas, bien, porque de lo contrario, no va a funcionar en otras cinco, ¿verdad? Como si tratara de importarlo. ¿Dónde lo importé en equipo toggle bottom, derecho? Entonces antes esto no funcionaría, ¿verdad? Bien, entonces volvamos al contexto de nuestro equipo. Y este es un proveedor. Se puede ver que aquí hay apoyos infantiles. Pronto vamos a explicar para qué sirve, ¿de acuerdo? La sugerencia fue bastante genial, así que dejémosla. Y el contexto que queremos enviarles toggle button y el clásico botón Togo es ¿qué? Es esto, ¿verdad? Porque no queremos mantenerlo en la app. Entonces vamos a quitarlo y ponerlo aquí, ¿no? Entonces este es el contexto. Y porque la quitamos, ya no necesitamos algo así, ¿verdad? Porque esto no es algo que necesitemos en estos momentos. Y bueno, podemos eliminar esta parte. Y aquí necesitamos importar estado de uso y usar efecto, ¿verdad? Pero tal vez vamos a ponerlo en una importación como esta. Bien. Entonces estamos avanzando con nuestra aplicación, ¿verdad? Bueno, este es un proveedor de equipo, y ahora tenemos que devolver algo con él, ¿verdad? Porque esto es muy similar al componente, ¿verdad? Pero esta vez, lo que ves aquí es bonito, como puedes ver, raro porque cuando vas a usar el proveedor del equipo, lo vas a usar aquí en la app, ¿de acuerdo? Entonces necesitas, como, importar, bien, el contexto del Equipo. Entonces el proveedor del equipo, quiero decir, entonces proveedor del equipo. Y necesitas aplicarlo en cosas para las que quieres que este contexto esté disponible. ¿Bien? Entonces podemos, por ejemplo, proporcionarlo para toda nuestra aplicación, ¿verdad? Entonces podemos hacer algo como proveedor de equipo, ¿verdad? Y ahora, esto es como, donde aquí, ¿no? Y los niños es esto, ¿de acuerdo? Entonces el minero de oro, el botón Tim Turkle y el clásico botón Togu van a pasar aquí, Bien. Y necesitamos, como, proporcionarles el contexto. Entonces piensa que está aquí, ¿verdad? Y para brindarles contexto, vamos a escribir algo como la sugerencia está aquí. Me encanta esta sugerencia, para ser honestos, no seas como si tuvieras miedo de usar la IA sobre todo así porque cosas así no se hacen a menudo, ¿bien? No creas todos los días proveedor de contexto. Pero solo necesitas entender cómo funciona, ¿verdad? Entonces accedemos al contexto del equipo, ¿verdad? Entonces esto, y decimos que el proveedor para ello, entonces lo que queremos brindar a todos nuestros hijos, y decimos que el valor va a ser Equipo y fijarlos, ¿verdad? Entonces esto es lo que debería estar disponible, ese estado debería estar disponible para todos los niños para los que estoy brindando el contexto. Los niños que proporcioné aquí, todos estos niños los tenemos ahora, el estado así disponible para ellos. ¿Entiendes ahora? Cuando vamos aquí, como pueden ver, todavía no está funcionando, es porque en primer lugar, cuando vamos aquí, como pueden ver, equipo no está definido, por ejemplo, se puede ver aquí no está definido. Pero dije que el contexto está disponible aquí. Sí, pero para usarlo, hay que especificarlo, ¿de acuerdo? Entonces necesitas decir algo como, Bien, ¿sabes qué? El equipo y el conjunto de ellos va a venir de algo así como contexto, de contexto delgado. Entonces importar, y luego necesitamos de nuevo, inducir contexto, Y necesitamos importar contexto delgado. ¿Bien? Y ahora cuando tenemos aquí este clásico botón de Togo, tenemos que hacer también lo mismo por nuestro otro botón, como aquí, ¿verdad? Entonces necesitamos esto aquí, y necesitamos importar también contexto de uso, ¿verdad? Método. Y tenemos un error aquí porque estás usando un sobrante de los apoyos de antes. Yo no lo eliminé. Entonces sí, ahora es así. Ahora, veamos si está funcionando. Como pueden ver, ahora estamos compartiendo el mismo estado, ¿no? Porque tenemos proveedor para este estado. Entonces, cualquier cosa que esté aquí va a estar disponible en los niños, ¿verdad? Pero estos niños, si quieren usar este contexto, necesitan decirlo como, Oye, quiero usar este contexto desde el contexto de equipo, y quiero configurarlo a las variables aquí, bien, también, el equipo estatal y la función de equipo set que pueden cambiarles esto. Y ahora todo está funcionando bien, ¿verdad? Acabamos de usar el contexto que brindamos en nuestra aplicación. Sé que podrías estar ahora como, pero antes solo necesitaba poner ¿qué? Necesitaba poner la parte desde el contexto, ¿verdad? Así que solo tuve que hacer esto en app. Lo que me acabas de mostrar te tomó tanto tiempo hacer. En primer lugar, acabamos de poner el estado lógico de nuestro P 14 en un archivo. Para que podamos actualizarlo desde este lugar. Sabemos dónde está. Lo segundo es que nuestro ats X se va a simplificar, ¿verdad? Porque aquí podemos ver claramente todo lo que no necesitamos para pasar apoyos Pero hay una cosa más. Si tuvieras, por ejemplo, dentro de la aplicación, digamos, layout e inside layout, header y main content. Y el contenido principal tendría, por ejemplo, artículo, y Artículo, por ejemplo, artículo. Entonces si quieres usar los mismos apoyos en el componente que está, ya sabes, profundamente hecho, necesitas reenviar esos apoyos una y otra vez, esto es horrible, esto es horrible Tenemos que recordar siempre acerca de hacer tal cosa. Como puedes ver ahora cuando estás viendo este código, no es como que necesitemos recordar sobre el envío de profesionales. No necesitamos saber cómo funciona, ¿verdad? Solo estamos haciendo proveedor de equipo, y decimos, Oye, todo lo que esté dentro de él va a tener acceso a este contexto si lo van a usar usando el contexto de uso. Y ahora, esto es poderoso, ¿verdad? Ahora comparten el mismo contexto. Y además, fíjate que cuando vamos al contexto de uso, no es como que ahora podamos probar el clásico botón de alternar porque sin nada, bien, como sin todos los demás niños Entonces hay muchas ventajas con la solución como esta. Y esta solución para una aplicación sencilla como la que tienes ahora es la más utilizada. Pero si quieres usar estado como una P, deberías usar algo lo que se llama, por ejemplo, Zootnd lo que hace que administrar el estado sea muy fácil y claro comparando mucho con esto Pero el contexto es algo que se creó hace mucho tiempo antes de Zustan y no había solución como esta Entonces la cosa así, vas a ver en muchas aplicaciones de reacción que necesitas, como, ya sabes, trabajar con y trabajar con otras personas. Y bueno, instalando Zostant y aprendiendo a usarlo, ¿ Y sólo por un estado simple, por ejemplo, quieres cambiar el equipo. Entonces, si tienes como una cosa que se va a compartir entonces bien, no usemos eso. Pero si tu app va a compartir constantemente el estado entre componentes, entonces es hora de aprender algo, por ejemplo, así, ¿bien? Esa es sólo la lección. Muchas gracias. 112. use-state-local-storage: ¿cómo implementar el sistema SAVE en nuestro juego en 5 minutos?: Hola, amigo mío. El día de hoy te mostraré cómo usar el almacenamiento local en tu aplicación react. Porque, bueno, es genial que podamos cambiar, por ejemplo, a nuestro equipo, ¿verdad? También es genial que podamos extraer nuestro oro. Pero cuando actualizamos nuestra página, el estado de todo está volviendo a los valores predeterminados, ¿verdad? Entonces, ¿cómo cambiamos el comportamiento así? Para ser honesto, implementar cosas como es bastante tomar mucho tiempo porque necesitamos usar efectos, y necesitamos entender cómo funciona el almacenamiento local. Pero estamos en reaccionar. Y además, no estamos usando JS, lo que significa que hay muchos paquetes muy divertidos, como, por ejemplo, este que lo hará tan, tan genial. Entonces, cuando haga algo así, ¿qué pasará? Voy a instalar un paquete que ahora en vez de esto, ¿no? Ya no voy a usar a State, ¿de acuerdo? Voy a ahora, importar, y cuando vayamos aquí, vemos lo que necesitamos importar. Utilice almacenamiento local estado, ¿verdad? Entonces esto. Y ahora, sólo voy a sustituir esto por esto. Pero ahora hay una cosa más muy importante. Tenemos que decir no cuál es el valor predeterminado aquí, bien, sino en qué vamos a usar nuestro almacenamiento local. Entonces los voy a poner aquí, bien, de esta manera. Después, necesitamos establecer el valor predeterminado para ello. ¿Y cómo establecemos el valor predeterminado? Cuando vayamos aquí, notará que tenemos valor, valor establecido, y la clave se usa cuando y obtener artículos. Así que ten cuidado con los conflictos de nombre, y luego tenemos algo lo que se llama opciones valor predeterminado. Pero las opciones son como un objeto. Entonces porque esto es un objeto, necesitamos proporcionarlo de esta manera, ¿verdad? Entonces el valor predeterminado va a ser, por ejemplo, ligero. Ahora cuando lo refresque, como pueden ver, ahora esto es apropiado porque establecemos el valor inicial a light, y por eso tenemos ahora los íconos adecuados aquí. Y cuando hago clic en él y refresco nuestra página, finalmente es lo que la está recordando. Y para ser honestos, lo genial de esto es que Um, ¿cuánto tiempo dediqué a implementar el almacenamiento local, verdad? Me tomó solo unos segundos, ¿verdad? Y ahora cuando vamos, por ejemplo, aquí, como pueden ver, tenemos nuestra llave, ¿verdad? Luz. Eso es genial, ¿verdad? ¿Cuánto tiempo tardó? Nada. No necesitábamos, ya sabes, pensar en cuándo están cambiando las cosas, cómo están cambiando, qué lugares, nada. Acabo de importar esto y funciona. Podrías hacerlo manualmente, como usar métodos de construcción de JavaScript para almacenamiento local, usando el efecto de uso, pero para ser honesto, ¿por qué cuando hay soluciones como esa? Entonces, ¿cómo aplicamos lo mismo a nuestro minero de oro? Por lo que queremos usarlo aquí ahora. Bueno, primero, tenemos que importarlo, ¿no? Y ahora tenemos que hacer que funcione aquí. Porque soy súper perezoso, voy a hacer algo así. Control C, Control Shift más I, voy a hablar con codium porque es bastante genial No usar almacenamiento local en lugar de usar estado y aplicar los valores, los valores iniciales, y vamos a enviar. Porque por qué molestarse en hacer las cosas tan bien, sabemos cómo hacerlo, sobre todo, pero solo tardarían tiempo en reemplazarlas, ¿verdad? Para que veas en el green, ¿tenemos qué? Ahora tenemos todos los cambios, y este es un código antiguo. Si quieres aceptar los cambios, que creo que son adecuados, podemos acertar aquí o usar Old plus A. Y ahora veamos si funciona. Entonces cuando vaya a nuestra aplicación, aquí. Y me importa el oro. Y ahora cuando refresque mis páginas se puede ver, nos quedamos con el estado. Actualicemos, vamos a refrescarnos. Actualicemos con auto cliqer. Hagámoslo oscuro. Entonces ahora, cuando alguien cierre nuestra app, cuando regrese y se actualice, el estado va a estar seguro. ¿Cuánto tiempo tardó en hacer que funcionara de manera segura en nuestro juego? No lo sé, tal vez 5 minutos. No sé cuánto dura esta lección. Súper súper potente, ¿no es así? Y es por eso que reacciona esta escuela con la conexión de ningún paquete JS que la gente creó para que los uses. Entonces hay muchas soluciones a problemas que se pueden resolver muy rápido así. Bastante increíble, ¿ no? Que tengas un buen día. 113. ¿Cómo convertir tu aplicación React en página estática?: Hola, amigo mío. En esta conferencia, te mostraré cómo construir tu aplicación para que finalmente puedas implementarla. Puedes compartirlo con la gente porque en estos momentos estamos ejecutando todo en modo muerte, que significa modo desarrollo. Estamos desarrollando nuestra aplicación y hay muchas cosas en nuestra aplicación, como como puedes ver, dependencias de muerte, lo que significa que hay otros paquetes que se instalan localmente que no son totalmente necesarios después, ¿verdad Hay algunas dependencias que están aquí, por lo que los paquetes que necesitan ser incluidos en la aplicación de compilación Y bueno, ¿cómo lo construimos, verdad? ¿Cómo lo hacemos? Para que puedan ver, tenemos un guión que se llama invitación construida. Así que solo escribimos NPM run y no sordos sino construimos. Entonces como puedes ver, todos los componentes van a ser transformados y analizados. Y como puedes ver, creamos qué índice ATML, CSS, y JavaScript, que ahora es donde en la carpeta que se llama distribución, ¿verdad Dist y esta carpeta es carpeta que acabas de transferir a tu hosting. Entonces ahora solo puedes abrir el índice HTML, y todo va a funcionar bien porque aquí y aquí solo tienes toda tu aplicación. ¿Cómo abrimos nuestro lado ahora? Para abrirlo, todo lo que tenemos que hacer es hacer clic derecho y abrir con la extensión del servidor en vivo. Y cuando lo abras, verás algo así. Pantalla ancha. ¿Por qué es eso así? Porque cuando vamos al archivo fuente, notamos que tenemos ahora mismo sideset, tenemos JavaScript. Pero cuando hago clic en JavaScript, ¿qué pasa? No podemos encontrar algo así como índice de Activos. ¿Por qué es eso así? Porque observe que el servidor en vivo por defecto se abre como nuestro índice de distribución HTML en este archivo de distribución. Entonces estamos tratando de acceder realmente haciendo algo así, no este HTML cinco, ¿verdad? Quiero decir, no este CSS cinco, sino algo así, ¿de acuerdo? Entonces estamos tratando de acceder desde la raíz, bien, de esta manera. Y sí, eso no está aquí. El ácido es como aquí, ¿verdad? Entonces por eso, cuando solo lo estás abriendo localmente, necesitas, como, ya sabes, quitar esto, y luego se va a abrir sin ningún problema, ¿verdad? Está funcionando. Puedo extraer oro. Cuando me refresco, como pueden ver, se está salvando el estado, ¿verdad? Puedo salvar también el estado de artem y así sucesivamente, ¿no? Entonces nuestra aplicación está funcionando. Ahora puedes transferirlo directamente a la carpeta raíz de tu hosting, y simplemente va a funcionar. Sin ningún problema porque no hicimos nada desde el lado del servidor, ¿verdad? No usamos el nodo JS para crear servidor, ¿verdad? No necesitamos configurar un servidor en nuestro hosting ahora porque este es solo un sitio estático que puedes compartir con cualquiera, ¿verdad? Pero como dije, recuerda de esto aquí porque por defecto, si quieres compartir esta aplicación en hosting, pero en algún tipo de subcarpeta, pero no en la raíz, necesitas asegurarte de que cambies así a esta De lo contrario, no va a funcionar también en esto, porque si quieres tener el icono también, hay que decir que no estamos viniendo de la carpeta raíz, no mires desde la carpeta raíz, sino mira desde la carpeta actual la diez centavos en donde está el índice HTML, ¿verdad? Tan simple, ¿no es así? Esa es sólo la lección. Muchas gracias. 114. ¿Qué es el electrón y cómo hacerlo funcionar en nuestra aplicación React?: Hola, amigo mío hoy, te voy a mostrar algo súper poderoso, que se llama electrón. Te permite construir aplicaciones de escritorio de plataforma cerrada con JavaScript, HTML y CSS. Entonces, para ser sinceros, acabamos de usar eso, ¿verdad? También hemos usado react, pero react está escrito en JavaScript. Entonces significa que de alguna manera podríamos conectar esto con nuestro proyecto. Y por eso, podemos ejecutar nuestra aplicación como aplicación de escritorio. Esto sería genial, ¿verdad? Entonces, ¿cómo lo hacemos? Tenemos que instalar primero nuestro electrón. Entonces necesitamos escribir NPN, instalar electrón, y luego tenemos que agregar que lo estamos guardando como dependencia de profundidad, así que no es que vaya a entrar en nuestro modo de compilación, justo cuando servimos a nuestro proyecto Bien, así que acabamos de instalarlo. ¿Y ahora qué? Entonces, para poder ejecutar electrones, bien, necesitamos primero especificar cómo hacerlo y qué electrón debe buscar cuando se va a ejecutar. Así que vamos a ejecutar electron el script desde el gestor de paquetes de nodos. ¿Bien? Entonces necesitamos especificar aquí cómo vamos a ejecutarlo. Se ve que dice que si tecleas electrón, vamos a correr, por ejemplo, electrón, ¿verdad? Bien, está bien. Pero prefiero hacer algo como agregar aquí columna de la muerte. Entonces cuando voy a escribir NPM ejecutar la muerte, entonces me puede gustar, Bien, quiero correr en Desarrollo electrón Y esta cosa de aquí va a buscar un archivo que va a ejecutar electrón. Y necesitamos especificar ahora, como puedes ver aquí dónde está este archivo con la propiedad principal. Pero vamos a poner este archivo en la carpeta electrón. Entonces mantenemos nuestro proyecto organizado, ¿verdad? Así que vamos a crear carpeta electrón, y en carpeta electrón, vamos a crear algo lo que se llama JS principal. ¿Bien? Porque, como dije antes, electrón es realmente qué? Es simplemente simple. Bueno, JavaScript HTMLCs esta aplicación. Pero vamos a basar esta aplicación en todo lo que ya hemos creado aquí, ¿verdad? Voy a pegar el código que va a crear nuestra aplicación electrónica en modo escritorio, ¿bien? La mayor parte de eso se puede encontrar en la documentación, pero la modifico un poco, así que funciona correctamente con la configuración Vt Voy a explicar lo que hice aquí. Se puede descargar en el código fuente. Esto es algo que haces sólo una vez la mayoría de las veces. No es algo que necesites memorizar, pero es bueno entender lo que está pasando En primer lugar, importamos las cosas que vamos a usar a continuación, y esto es lo que se necesita para trabajar en la configuración vite con Slink con nuestro liner que tenemos instalado en nuestro proyecto Pero algo que es lo más importante para nosotros es esto. Estamos creando una función, que va a crear ventana del navegador con el tamaño que establecemos aquí. Si quieres tener tu aplicación más grande, establece el tamaño aquí al inicio, por ejemplo, ahora mismo hay una cosa más muy importante es donde debemos buscar la base de nuestra aplicación. Entonces, si quieres correr electrón, tienes que decir, dónde están los archivos con los que voy a correr , entonces están ahí. Y ahora aquí es como, Bien, así que cuando la aplicación esté lista, cuando esté lista, entonces crea esta ventana, ¿verdad? Y aquí están como dos eventos que se necesitan para, como, borrar todo y también mostrar la aplicación cuando la aplicación está activada. Entonces estas cosas nunca volverías a mirar. Para ser honesto, no los recuerdo. Es como, Bien, está arreglado, no me importa. Esto también es configuración. No me importa, pero este es el lugar donde vas a, como, configurar como ajustar algunas cosas Por supuesto, electrón tiene sus propios métodos que puedes leer cuando vayas aquí, tienes la documentación porque este curso no va a ser sobre electrón. Solo te estoy mostrando lo poderoso que es que acabamos de usar react y podemos hacer una aplicación para Windows instantáneamente desde lo que acabamos de hacer, ¿de acuerdo? Entonces lo más importante para ti es eso. Entonces esta debe ser la ruta al índice HTML desde el archivo de distribución, ¿de acuerdo? Bien, así que lo acabamos de decir. Eso es bueno. Y una cosa más está aquí. Es necesario establecer como la sugerencia está aquí, base a ese slash. ¿Por qué es eso así? Es porque note que aquí, en la última conferencia también, tuvimos un problema porque todos estos activos no estaban disponibles porque por defecto, es así, ¿verdad? Y electrón también va a tener problema si se va a poner así, ¿de acuerdo? Entonces establece esto y esto va a resolver todos los problemas. Bien. Entonces tres cosas, acabamos de hacer. Y para ser honestos, ¿cómo corremos ahora? Necesitamos escribir NPM run de electron, ¿verdad? ¿Y qué? Esta cosa va a buscar principal. Principal es como decir que main está ahí, y debería ejecutar nuestra aplicación. Como puedes ver, está funcionando. Y lo genial es que si lo cierro y vuelvo a correr, como pueden ver, es recordar mis ajustes, ¿verdad? También es recordar lo que hicimos aquí. Entonces, por ejemplo, compré aquí. Y como puede ver, es recordar que el almacenamiento local está ahí dentro. Vaya, tan poderoso, ¿verdad? Y, sí, así es como corremos electrones, ¿verdad? Pero también necesitamos no sólo ejecutarlo localmente, sino también saber distribuirlo, ¿verdad? Entonces, cómo construirlo. Entonces te voy a mostrar en la próxima conferencia cómo, como, construir electrón para que haya ejecutable en, por ejemplo, Windows. Esa es la única lección. Muchas gracias. 115. Cómo crear Electron exe desde nuestra aplicación React: Hola, amigo mío. El día de hoy, te voy a mostrar cómo construir aplicación de electrones porque en este momento sólo podemos correr. Podemos envolver nuestra aplicación que hicimos en React, ¿verdad? Pero, ¿cómo lo construimos? Entonces tienes ejecutar la tabla cinco. En primer lugar, necesitas instalar el generador de electrones, ¿verdad? Entonces, la construcción de electrones en la bandera usando D significa que lo va a instalar en la caja fuerte Dev. Es la bandera para la gente perezosa que no quiere, ya sabes, escribir a salvo La Muerte. Bien, entonces cuando lo tengamos ahora, necesitamos especificar aquí el script que va a ejecutar nuestro constructor. Entonces no necesitas, como, ya sabes, recordar cómo hacerlo cada vez. Entonces sí, creo que la sugerencia es buena. Entonces cuando estás atado construir y luego el colon y luego el electrón, debería ejecutar el constructor de electrones. Eso es coool Y porque va a ejecutar Electron builder, Mmm. Ahora necesitamos especificar para el constructor la propiedad que se llama construir, ¿bien? Entonces, algo así. Y si, así, ¿ habrá más sugerencias o no? Sí, ID de aplicación y nombre del producto. Bien. ID de aplicación es algo que te va a identificar. Por lo que siempre empieza con C y luego escribes el nombre de tu empresa. Mi nombre de componente es GAM y el nombre de su aplicación Esto es útil para, ya sabes, identificar tu aplicación por sistema. Así que no te preocupes por eso por ahora. Puedes leer sobre ello más tarde, pero necesitas configurarlo. ¿Bien? También debes establecer el nombre del producto, por supuesto, y luego debes decir, dónde están las tartas en las que voy a construir todo. Y nuestras tartas están en electrón. Sí, está en nuestra carpeta, ¿verdad? Y también están en carpeta dist, ¿verdad? Entonces lo mismo pero para dis así así, ¿verdad? Entonces todas las cosas relativas la producción se van a encontrar ahí dentro. Bien, ahora podemos hacer NPM run, no muerte sino construir electrón Y esperar a que haga el trabajo. Y como pueden ver, hay una nueva carpeta que creó para nosotros algo lo que se llama Autocliker Ahora podemos abrirlo en el Explorador de archivos y podemos ejecutar nuestra aplicación como una aplicación normal. Entonces, como pueden ver, está funcionando. Y también ahora, va a recordar el estado, ¿no? Todo está funcionando bien. Pero el problema con la configuración así es que cuando vas a ejecutar build electron, creo que también deberías correr como Vite Build, ¿verdad ¿Por qué? Porque si cambias algo, en, ya sabes, nuestro reaccionar, no va a ser como dentro del electrón ahora. Entonces, para que funcione , vamos a hacer algo así. Ejecuta te build, y en el mismo tiempo constructor de electrones, y vamos a repetirlo también carrera de profundidad para electrón. ¿Bien? De esa manera, si cambiamos algo, se va a aplicar automáticamente. Y una cosa más que solo quiero mostrarles antes de que terminemos esta conferencia para la siguiente compilación es esa mirada, qué genial es que puedas, por ejemplo, hacer algo así? Digamos que no quiero enmarcar. Entonces solo estamos enviando la propiedad aquí, ¿verdad? Y vamos, por ejemplo, ejecutarlo. Sí, sí, vamos a ejecutarlo como un modo de compilación. Así que tenemos que esperar un segundo, ¿bien, verdad? Porque es empaque y está creando todas las cosas. Y sí, aquí está la aplicación, veamos cómo se ve. Como pueden ver, no tenemos marco ahora, ¿verdad? Y podemos cerrar esto usando el atajo más F cuatro, ¿verdad? Aquí hay dos iconos que vienen de mi propio programa que es como superposición para otros programas. Pero, ¿qué tan genial es? Dígame. Ahora mismo, podemos, como, divertirnos, crear desarrollo web para aplicaciones web. Y después, todo lo que tienes que hacer es simplemente configurar todas estas cosas, lo sé, nos tomé 15 minutos totalmente. Y ahora podemos crear un archivo ejecutable que se pueda ejecutar en, por ejemplo, Windows, ¿verdad? Tan poderoso. Si tienes alguna duda, no dudes en preguntar. 116. ¿Qué es PWA?: Hola, amigo mío. Hoy, vamos a hablar de algo súper cool, que es la aplicación web progresiva. ¿Son ellos? Bueno, esta manera ver lo que son es abrirlos. Entonces como acabas de notar, abrí una aplicación en mi smartphone. Pero esta aplicación fue escrita por nosotros usando ¿qué? HTML, CSS, JS, y reaccionar, ¿verdad? Entonces significa que ahora podemos instalar en nuestros dispositivos, como, por ejemplo, con Android o en nuestra computadora personal o en Mac, sí. Y Wow. Se han escrito en HTML, CSS y JS. No hace falta que aprendas nada. Eso es genial, ¿verdad? Entonces sí, esto es súper poderoso. Y quizás te estés preguntando ahora, ¿es difícil, como, ya sabes, de alguna manera hacer que funcione con HTMLCs y JS Debe haber, como, toneladas de trabajo para hacerlo, ¿verdad? Entonces, ¿qué necesitamos hacer realmente? En primer lugar, es necesario agregar algo lo que se llama manifiesto. ¿Bien? Entonces algo se llama así. Pero, ¿qué manifiesto es? Manifiesto es en inglés significa demostrar para mostrar, ¿verdad? Entonces manifiesto es algo así como un archivo que muestra información sobre tu aplicación. Es como un archivo especial que tiene computadora o teléfono, correcto, cómo tratar el sitio web como una aplicación, bien, porque necesitamos cambiar, transformar uno en otro. Por lo que necesita tener información como cuál debe ser el nombre de la aplicación, qué íconos debemos usar, y así sucesivamente. Hablaremos de eso más adelante. Y también, necesitamos algo que se llame Service Worker, ¿de acuerdo? Entonces, bueno, el trabajador de servicio es solo un guión, ¿de acuerdo? Es como un pequeño robot, ¿de acuerdo? Eso ayuda. Tú y él vive en tu navegador, ¿de acuerdo? Se interpone entre tu app e Internet. Almacena en caché y almacena cosas importantes. Entonces, su papel principal es, como, administrar el almacenamiento en caché, ¿de acuerdo? Almacena archivos importantes como HTML, CSS, S, imágenes. Así que tu app puede, como, trabajar sin conexión o con conexión de red. Entonces esta capacidad fuera de línea es, bueno, un cambio de juego porque hace que tu aplicación se sienta como una aplicación nativa, bien, porque no necesitas tener acceso a Internet para que siga funcionando Entonces service worker es como un archivo que se encuentra entre tu aplicación y la red. Puede interceptar como solicitud de red y decidir si sirve una versión de caché de un archivo o fudg desde Esto ayuda a ofrecer una experiencia rápida y relable a los usuarios. ¿Bien? Entonces los trabajadores habilitan la sincronización en segundo plano y las notificaciones push, por ejemplo. Esto significa que tu app puede sincronizar datos con el servidor y cuando no está activa y los usuarios pueden, por ejemplo, recibir notificaciones aunque la aplicación no esté abierta, por ejemplo. Así que muy, muy poderoso, ¿verdad? Bien, entonces quizás te estés preguntando ahora, bueno, ¿puedes decirme si PWA, las aplicaciones web progresivas pueden hacer cosas con dispositivos en Android, como, ya sabes, aplicaciones nativas Para ser honestos, mira las cosas que puede hacer. Tiene acceso al sistema fi. Incluso puedes elegir contacto. Incluso puedes vibrar tu acceso telefónico al pago por Bluetooth Hay muchas cosas que se pueden hacer usando esto, sí. Entonces hay algunos casos raros en los que no es suficiente, ¿verdad? Bueno, principalmente si tú, por ejemplo, querías crear algún tipo de juego o te gustaría centrarte en, ya sabes, un dispositivo en Android, sí, a lo mejor sería una buena idea. Pero realmente, para aplicar aplicación web progresiva en su, ya sabes, aplicación en este momento, esto realmente está agregando un trabajador de servicio manifiesto , y ya está hecho. Y te voy a mostrar cómo hacer estas cosas en las próximas conferencias. Y lo curioso es que porque estás usando Vt, va a ser aún más rápido porque vas a instalar el paquete para eso y solo especificar algunas cosas, y ni siquiera necesitas crear service worker por tu cuenta, ¿de acuerdo? Así que una forma súper poderosa de, como, hacer que tu aplicación esté disponible en todos los dispositivos posibles. Mm en todos los posibles en dispositivos como PC, Mac o Android al mismo tiempo. Eso es poderoso porque no hay mucho trabajo por hacer, pero créeme, si lo adjuntas, vas a aumentar cantidad de personas que van a, como, ya sabes, usar tu servicio de aplicaciones por tonos. Muchos servicios han notado que el aumento de la cantidad de personas que están usando su, ya sabes, aplicación web cuando simplemente ponen la aplicación web progresiva como envoltorio en la aplicación aumentó en 70%, por ejemplo. Entonces esto es mucho. 117. Transforma tu aplicación HTML/CSS/JS en PWA: Hola, amigo mío. ¿Cómo cambiamos HTML CSS JS a una aplicación web progresiva Entonces podemos ejecutarlo, por ejemplo, Android o PC. Para poder hacerlo en nuestro proyecto, necesitamos simplemente instalar NPM, yo y luego instalar algo lo que se llama te plugin para aplicación web progresiva Vamos a guardarlo como dependencia de dev, ¿verdad? Entonces será el paquete para muerte porque no lo necesitamos después, ¿verdad? Este arado bien, así que lo acabamos de instalar, pero ¿cómo usamos este plugin? Esa es la pregunta. Observe que tenemos aquí algo lo que se llama plugins de propiedad en el conflicto vite JS, ¿bien? Y aquí, cuando haces algo así, así que cuando añades uno más como elemento, puedes escribir aquí algo así como vite P, W A, ¿bien? Y aquí, puedes ver que lo importamos automáticamente. Podemos especificar como Vte debe transferir nuestra aplicación a una aplicación web progresiva ¿Bien? Normalmente, primero necesitarías crear dinero manualmente, ¿verdad? Y crear manualmente service worker. Pero este plugin solo lo va a hacer por ti. Y eso no es todo. Se va a crear service worker. Entonces algo que se encarga de cahing tu sitio web, justo cuando perdemos la conexión con el servidor, cuando el usuario usa la conexión al servidor, y se va a hacer automáticamente Así que sí, esta es la manera de hacerlo, ¿verdad? Bien. Entonces tenemos que establecer en primer lugar, algo lo que se llama tipo registro. Y como puedes ver, la sugerencia de auto dice que deberíamos escribir aquí como autodate Significa, cómo debemos hacer que nuestro trabajador de servicio funcione por defecto. Supongamos que solo queremos usar esta estrella de ambientación, muchas otras, puedes ir a leer Vt PWA tipo de registro Esto no es ni sobre aplicación web progresiva y todo lo posible, sabes, propiedades porque no es así como funciona. Solo quieres configurar, algo que funcione, y entonces estás como, mejorar tus conocimientos si necesitas algo, ¿de acuerdo? Entonces esta cosa te permite crear un service worker que solo va a actualizar automáticamente tu sitio web cuando tu sitio web lo necesite, ¿verdad? Es decir, cuando tu app la necesita. Entonces esta es la primera. Lo segundo que necesitas configurar es manifiesto, ¿de acuerdo? Porque normalmente crearías manifiesto como un archivo simple, ¿bien? Pero esto solo lo va a crear para ti en el archivo de distribución. Y también lo va a adjuntar aquí, como pueden ver, se adjunta como lo hice antes para mostrarle cómo funciona, ¿verdad? Entonces simplemente va a adjuntarlo por defecto, y no necesitas, como, pensarlo, ¿verdad? Se configura todo en las cosas de configuración y no más tarde en la distribución o algo así, o tal vez el índice H t, ¿verdad? Tabla I Índice H. Aquí no lo haces manualmente, se va a hacer por ti porque tenemos este login. Bien, entonces ahora necesitamos establecer algunas propiedades que se requieren. ¿Cómo sabemos cuáles son los que se requieren? Cuando vas al sitio web, como por ejemplo, este, puedes leer cómo hacer que la aplicación web progresiva sea capaz de instalar, ¿verdad? Y cuando vayas aquí arriba, te darás cuenta de que requerían miembros manifiestos. Es necesario especificar algo, primer lugar, lo que se llama nombre. Y el nombre es es solo el nombre de tu solicitud, ¿de acuerdo? Entonces sí, podemos llamarlo solo auto licker. Esto es, bueno, importante porque sin ella tu aplicación no mostraría el nombre, ¿verdad? Necesitas mostrar algo en el rayo del sistema o cuando sea. Este es el nombre de su solicitud. Siguiente. ¿Qué necesitamos? Necesitamos íconos, ¿de acuerdo? Entonces tenemos que especificar, vamos a especificar esto también. Este es un nombre corto. Si el nombre aquí va a ser grande y alguien no puede mostrarlo, se va a mostrar el nombre corto. Entonces, por ejemplo, el clicker automático es más grande, esto es más corto, y ahora necesitamos especificar, como dicen, íconos, pero hagámoslo un poco más tarde Ahora hagamos la exhibición a primera hora. Entonces, si quieres mostrar es como, cómo se va a mostrar tu Aplicación cuando la ejecutes. Entonces, cuando vayas aquí y golpees esto, notarás que estar solo significa que es una aplicación que parece una aplicación nativa independiente. Y esto se usa principalmente el ajuste. Pero puedes, por supuesto, hacer que parezca un navegador, pero no lo uses porque es la misma similitud que e. Puedes usar una interfaz de usuario mínima y pantalla completa, ¿verdad? Quieres entrar en pantalla completa encendida, ¿por qué no? Por ejemplo, de escritorio, puedes configurarlo. Entonces así es como se debe mostrar tu aplicación cuando se ejecute. Tenemos que configurarlo también dijo URL de inicio, ¿verdad? Entonces, ¿dónde está nuestra aplicación, como, basada en, verdad? Entonces, esto quiere decir que parte de la raíz. No va a partir de la raíz de nuestro dominio en este momento, así que vamos a usarlo así, ¿de acuerdo? Y tenemos aquí también esto, pero puede no estar presente en pliegues, así que no necesitamos especificarlo. Entonces, lo último que es como necesidad total son los iconos, ¿verdad? Entonces, ¿cómo lo hacemos? Como puede ver, dicen que hay que especificar algo así, ¿verdad? Por supuesto que tenemos codium, así que va a, como, ayudarnos. También hay color de equipo, color de fondo, pero no es como requerido, así que no necesitamos especificarlo. Pero como puedes ver, nos muestra que necesitamos algo así, y también hay un ícono más que necesitamos especificar. Vamos. Ayúdame. Ayúdame. Sí, el tamaño de 500 512. Entonces estas dos cosas necesitan ser especificadas y tenemos que ponerlas a disposición, ¿verdad? Necesitamos tenerlos en nuestro proyecto. Pero el problema con ello es que ¿cómo generamos algo así de manera rápida? Y lo voy a mostrar en la próxima conferencia, ¿de acuerdo? Porque quiero mostrarte algo muy chulo, como hacerlo rapido y desde cualquier imagen que tengas, ok? Para que no pierdas tu precioso tiempo mientras 118. NPX: paquete de ejecución para generar iconos requeridos: Hola, amigo mío. Hoy, vamos a utilizar modelo de paquete generador de activos Progressive Web App, ¿de acuerdo? Esto es bastante genial porque va a generar en base a lo que tienes. Bueno, ya tenemos este archivo. Entonces usemos el vite SFO Gi, ¿de acuerdo? Puedes usar cualquier imagen que quieras, ¿de acuerdo? Y cuando pones el archivo fuente y luego la carpeta de salida, va a generar muchos iconos para todas las formas posibles. Puedes hacer que también funcione de manera diferente si usas las opciones aquí, ¿de acuerdo? Pero primero, tenemos que pensar en ¿con qué frecuencia creamos un icono así? Creo que pasa solo una vez por proyecto, ¿verdad? Entonces, ¿necesitamos instalar dependencia así? ¿Necesitamos instalar este paquete o necesitamos usarlo solo? Quieres usar paquete solo una vez, entonces puedes escribir NP X en lugar de M, lo que significa ejecutar el paquete una vez, ¿verdad? Y luego escribe el nombre del paquete, ¿verdad? Entonces generador de ácido PWA, ¿verdad? Entonces tecleas donde tienes tu actualmente. Es en público, ¿verdad? Invita a SFO G, y luego escribe donde quieres ponerlos. Entonces pongámoslos en público y por ejemplo, en carpeta llamada íconos. Pero no se termina porque no queremos tantos íconos por defecto en este momento al menos porque queremos, como, ya sabes, hacer una opción por defecto. Y usemos el icono de la bandera, ¿de acuerdo? Entonces vamos a hacer algo como icono solamente, por favor. Y solo necesitamos los tamaños requeridos. Entonces voy a escribir tallas, y luego voy a escribir que quiero 192 y 512. Y cuando ejecutes esto, solo tenemos que esperar un segundo. Y como dije, esto es genial porque se va a hacer como una vez que no lo instalamos en nuestro equipo porque no es necesario, ¿verdad? Y cuando vamos al público, ahora íconos, como puedes ver, ahora tenemos íconos requeridos, como la parte más importante. Lo genial de esa generación es que también te genera enlaces que puedes poner, por ejemplo, en Index HTML que hará que apple haga que funcione en Apple. Además, tienes aquí como puedes ver, cosas que deberías poner en tus muchas primero. Pero porque estamos usando vt, tenemos que poner todo eso aquí, ¿verdad? Pero hay un problema. No es que estamos usando aquí ¿qué? Palabra pública, lo cual no es propio porque nuestros íconos están bien, actualmente, están aquí, ¿verdad? Pero después de ponerlos en pelea de distribución, van a estar aquí. Entonces no los vamos a encontrar ahí, ¿verdad? Es por eso que necesitamos especificar que estamos buscando iconos en la carpeta íconos. Así que aquí, A, A, A, ¿verdad? De esa manera, va a funcionar. También tenemos que cambiarlo aquí. Entonces tenemos que notar que en activos, pero en activos, lo conseguimos, es porque y parece que Vt es bastante inteligente. La va a poner ahí. Entonces sí, aquí dentro, podemos almacenarlo de esta manera. Bien, así que ahora podemos ejecutarlo y ejecutar build. Entonces ahora cuando entramos al archivo de distribución , fíjense que aquí, estamos tratando de acceder al icono desde aquí, que es, sí, es apropiado. Eso es genial. Pero también es importante que aquí tengamos un camino adecuado, ¿ verdad? Tenemos íconos. Así que tenemos que entrar en iconos, y entonces tenemos todos los tamaños que tienes aquí, ¿de acuerdo? Bien, vamos a probarlo. ¿ Todo funciona correctamente? Cuando vayamos aquí, note que en host local, cuando estamos usando vite, correcto, no está funcionando Pero si entras en el archivo de distribución, y haces clic derecho y abres con if server, entonces verás que está funcionando. Entonces, cuando hagas esto, puedes instalarlo, ¿verdad? Y como puedes ver, también te puede gustar bien, esto es en polaco, pero ya puedes adjuntar esta aplicación. También puedes ejecutarlo automáticamente cuando está bien, está ejecutando cuando la computadora comienza a funcionar, por lo que puedes elegir algunas opciones allí. Pero sí, esto es solo una aplicación sencilla ahora que como pueden ver, puedo iluminar. Todo está funcionando correctamente. Ahora también puedes, por ejemplo, subir el contenido, en algún lugar, como, por ejemplo, hosting. Y ahora cuando voy a la página web que acabo de subirla, también puedes instalarla, ¿verdad? Entonces sí, esto ahora está funcionando en línea. Y este es el objetivo, claro, porque, bueno, hay que recordar que aplicación web progresiva es aplicación en web, ¿verdad? Entonces lo subes a alguna parte. Y cuando alguien lo instala, porque tenemos service worker en segundo plano, va a, como, sincronizar lo que tenemos aquí con lo que tiene el usuario Entonces cuando actualices, por ejemplo, algo en el sitio, también se va a actualizar en la aplicación que tenga el usuario. Y esto también es muy chulo, cierto, porque automáticamente va a actualizar el contenido de la persona que está usando tu aplicación. No es necesario que el usuario no necesite instalarlo manualmente, ¿verdad? Porque realmente va a comprobar si algo ha cambiado aquí en VS entonces si está en línea, vas a tomar todo el contenido que ha cambiado bastante impresionante, ¿no? 119. Muestra un problema: crea el componente PWAInstallButton - (1): Hola, amigo mío. Tenemos un pequeño problema porque el botón de instalación no se muestra siempre en los dispositivos móviles. Y este problema se puede resolver con nuestro botón personalizado. Pero tenemos que primero, saber cómo, como, detectar evento que debería aparecer aquí. Pero, ¿por qué no aparece? Porque la mayoría de las personas en dispositivos, como, por ejemplo, Android, tienen este pop up bloqueado, ¿de acuerdo? Por lo que ni siquiera tendrán oportunidad de instalar tu aplicación. Ni siquiera sabrán de la existencia de la misma. Por eso tenemos que resolverlo. Pero, ¿cómo resolvemos algo así? Necesitamos crear un botón personalizado, por ejemplo, así. Podemos mostrarlo posteriormente en cualquier lugar de nuestra aplicación. Para ser honestos, podríamos hacerlo en el Pop, podríamos hacerlo en la esquina superior izquierda. Podríamos mostrarlo tal vez tres veces, cuatro veces. Todo depende de ti donde lo vas a mostrar, ¿verdad? Pero lo más importante para nosotros es ¿cómo lo mostramos cuando la aplicación aún no se ha instalado en el sistema? Eso es lo primero, ¿verdad? Y como lo detectamos parejo, ¿verdad? Entonces lo vamos a hacer en reaccionar. Entonces vamos a practicar reaccionar en las próximas conferencias y veremos ejemplo práctico, realmente, totalmente práctico de cómo hacer algo interesante en reaccionar que rara vez, creo, se muestra en tutoriales. Entonces creé la base sobre el componente en la carpeta de componentes, y la he incluido aquí, ¿verdad? Entonces esto es como la configuración de nuestra aplicación. Y las próximas conferencias, vamos a, como, mejorarlo. ¿Bien? Eso está en esa lección. Muchas gracias. 120. Controlar la visibilidad de los componentes en React desde la sentencia de retorno (2): Hola, amigo mío. Empecemos a crear este componente desde poder mostrarlo, así mostrarlo u ocultarlo. Normalmente, haremos algo así usando, por ejemplo, CSS y tal vez JavaScript para CSS y tal vez JavaScript cambiar la visualización del mediodía al blog o tal vez la visibilidad. Esto es lo que normalmente harías. Pero como estamos usando react, podemos hacerlo totalmente diferente, y creo que va a ser súper genial cuando lo veas. Entonces, para controlar la visibilidad, vamos a usar un estado para eso, ¿de acuerdo? Entonces quiero poder engancharme a este estado de mostrar o no mostrar. Entonces necesitamos crear un estado, y propongo, como, llamarlo, por ejemplo, mostrar botón de instalación, ¿verdad? Y el método que va a cambiarlo se va a llamar set show install pattern. Y por defecto, pongamos el estado a caídas. También necesitamos importar nuestro estado usado, pero ¿cómo hacemos una condición dentro de la declaración escrita? Bueno, podríamos usar, por ejemplo, el operador Tenari, ¿verdad? Entonces funciona así. Si algo es cierto, entonces si es cierto, entonces muestra esto. De lo contrario, muestra esto aquí, ¿verdad? Y aquí, podemos usarlo de esta manera que nos va a gustar muestro botón de instalación, me gusta true, luego mostrar esto, de lo contrario, mostrar null. Y como pueden ver, ahora cuando cambiamos false a True, se está mostrando, y ahora no se está mostrando. Esto es realmente como, ya sabes, hacerlo de esta manera, ¿verdad? Podemos poner aquí el valor a partir de aquí, pero ahora depende del estado del botón show install, no de la otra manera. Podemos establecerlo en verdad al inicio. Esta es una forma de resolver este problema, pero quiero mostrarte una más porque podría confundirse si alguien usa la otra manera, ¿de acuerdo? Entonces cuando tomamos esto bajo el mando, también podemos hacerlo de esta manera. Volvamos Siempre por lo menos algo. Entonces el fragmento de reacción, ¿verdad? Y ahora, hagámoslo de esta manera. Entonces, si nuestro botón show install y la conjunción del mismo con esta parte, ¿cómo puedo copiar esto ahora? Bueno, necesito escribirlo desde el principio. Entonces, si la conjunción de la misma con Instalar PWA un botón es verdadera, entonces muéstralo, ¿verdad? De lo contrario, no lo muestres. Mira, funciona. La pregunta es ¿cómo? Porque mucha gente que sabe cómo funciona la conjunción, saben que si ambas expresiones son verdaderas, bien, entonces el resultado es verdadero. Si uno de ellos es falso, entonces el resultado es falso, ¿verdad? Pero muchos programadores no saben que si la primera declaración, entonces si esta cosa es falsa, ¿bien? Entonces si la primera declaración es falsa, entonces el resultado es falso, correcto, pero también significa que no voy a revisar otras declaraciones. ¿Y por qué sucede? Porque ¿por qué nos importaría lo que va después? Es optimización, ¿verdad? Porque la conjunción siempre es falsa cuando al menos una de las cosas correctas usadas en conjunción, derecha, es falsa. Si una cosa es falsa, no necesitamos revisar otras cosas. Esto es optimización. Y por eso esto está funcionando porque si tenemos aquí como falso, cierto, esta cosa no va a ser devuelta, ¿verdad? Pero si esto es cierto, entonces tenemos verdad. Y al mismo tiempo, esto es cierto porque esto es un botón, ¿verdad? Y el botón no es una cosa falsa. Entonces esto también va a regresar. Entonces esto va a ser ejecutado. Y por eso podemos ver ahora aquí un botón como este, ¿de acuerdo? Entonces sé que esto puede parecer confuso. Esto es un poco más legible, creo, pero realmente depende de tu gusto, ¿de acuerdo? Usa el que te apetezca usar o, ya sabes, a veces la IA va a, como, sugerir algo así. Al menos va a entender lo que está pasando aquí, ¿verdad? Depende de tu gusto. Y no hay subidas y bajadas pienso en ambos métodos A mí me gusta este porque tal vez sea más fácil leer para la mayoría de la gente, ¿de acuerdo? Y tienes un poco más de flexibilidad porque aquí podrías ampliar estas condiciones más fácilmente. Entonces prefiero esto. Pero como dije, depende de usted y solo quería mostrar en esta conferencia cómo hacer una condición dentro de una declaración escrita basada en el estado. Y como puedes ver, sí, puedes hacerlo bastante fácil. 121. Detecta y previene eventos (3): Hola, amigo mío. Antes de que ocurra el evento de instalación, hay algo como antes del evento prompt de instalación que puede detectar, evitar que suceda y luego hacer su solución personalizada para instalar la aplicación PWA Y para poder hacerlo, necesitamos saber cómo captar eventos desde el componente de reacción. Y si quieres, recuerda, hacer algunas cosas en tus eventos, por ejemplo, es como el efecto sitio de tu aplicación, ¿verdad? No está conectado a componentes. No es como si estuvieras accediendo a este componente o a muchos otros como las propiedades de otros componentes, estás accediendo al evento que está en la ventana de tu página actual del navegador, por ejemplo, el usuario está visitando la ventana y quieres escuchar lo que está pasando ahí. Entonces estás usando el efecto de uso, ¿de acuerdo? Y cuando lo abrimos, sí, usemos así el comportamiento predeterminado. Y esto es muy importante. Como hablamos antes, esta parte es como la función de flecha. Pero esta parte también es muy importante en nuestro caso esta vez. ¿Por qué es eso? Recuerda que si pones aquí array, este efecto de uso se va a ejecutar sólo cuando el componente, así que esta cosa está montada, ¿de acuerdo? Así que sólo cuando está montado. Bien, ahora podemos acceder a nuestra ventana y agregar incluso oyente, así podemos, como, ya sabes, escuchar la ventana, y entonces la solución aquí está bastante bien. Entonces vamos a usarlo porque sí, este es el evento que queremos agregar para escuchar en nuestra ventana, que es antes del prompt de instalación, ¿verdad? Y entonces, como pueden ver, tenemos aquí la función de flecha, ¿verdad? Y esta función de flecha, como pueden ver, ¿ tiene ahora qué? Por defecto, automáticamente, cada evento tiene propiedad de evento a la que ahora puedes acceder para ver qué tipo de evento es así de bueno, para hacer cosas con ese evento, ¿verdad? Y como pueden ver, tenemos aquí evento que impiden default, que es muy necesario en este caso, porque no queremos tener ahora el comportamiento por defecto de este evento, ¿verdad? Entonces lo paramos y mostramos cuál es nuestro botón. Sin embargo, tenemos un problema. No es sólo que teníamos aquí cierto por defecto, sino que esta cosa, se va a ejecutar al menos dos veces siempre porque aquí tenemos modo estricto, y esto está aquí para, como, detectar si no habías limpiado después de ti mismo. Porque cuando este botón va a ser desmontado, quieres despejar después de hacer lo que hiciste en efecto Eso debería quedar claro porque algo no necesita ser claro porque podría estar simplemente cambiando el título de, por ejemplo, tu página. Pero en caso de que estés agregando live y oyente, esta vez lo agregaste dos veces Siempre, cuando termines tu trabajo, también necesitas devolver el método de compensación. Pero ahora tenemos un problema porque, como puedes ver, esto es algo malo que hizo aquí porque te sugirió que simplemente puedes eliminarlo escribiendo de nuevo todas estas cosas aquí. No, no, no, no, no, necesitamos eliminar la misma función, ¿verdad? Entonces significa que necesitamos, como, tomar todo ese contenido de aquí, así que esto. Y en lugar de invocarlo así, vamos a crear una función dentro de ella, bien, que podemos llamar, por ejemplo, handle porque dice que estamos manejando algo antes de install prompt, ¿verdad Y ahora podemos definirlo dentro del efecto de uso porque va a estar en el usado aquí, derecho. Y si, esa definición está bien. No, no puedo usar el. Esto está bien. Entonces no necesitábamos copiarlo. A veces me encanta por cosas así, es como, bueno, bien, así que ahora lo trasladamos aquí por eso, podemos limpiarlo fácilmente, ¿verdad? Como hicimos con los intervalos establecidos, ¿verdad? Porque ahora podemos escribir return entonces esto, luego esto, y podemos eliminar ventana, eliminar incluso oyente y thes Esta vez, estamos quitando método específico, El que realmente queremos, como, quitar. Pero creo que lo hice en el lugar equivocado, debería estar aquí, ¿verdad? Porque ese corchete es como para eso. Ahora despejamos después de nuestros ces. Recuerda, esto es súper importante. Ahora, veamos si funciona ya que puedes ver nuestro patrón no aparece. Aquí, si lo cambio a sí, apareció. Entonces algo no está funcionando correctamente está todo bien aquí. El problema es que esto no se invoca en nuestro entorno de host local, ¿de acuerdo? Y además, no se va a invocar cuando lo ejecutemos, como cuando, por ejemplo, hacemos NPM run build. Y si usamos el servidor if, ¿de acuerdo? Entonces si hacemos algo así, abrimos con if server, tampoco se va a mostrar. ¿Por qué? Porque esta cosa se va a mostrar como al 100%, mayoría de las veces sólo cuando alguien no tenía otro método de instalación. Porque, ya sabes, si todo el mundo en PC pudiera conseguir este evento y luego mostrarle a la gente algunas, ya sabes, cajas grandes, sería una experiencia un poco horrible hoy en día, ¿verdad? Entonces por eso puedes, ya sabes, cuando lo ejecutas ahora, ¿dónde está? En mi smartphone, por ejemplo. Así que acabo de subir el contenido a la página web. Y como puedes ver ahora, tenemos el botón Instalar aquí. No podemos hacer clic en él y, ya sabes, dos startups en él porque aún no lo hemos programado, pero se presentó para la compilación que acabo de hacer aquí, ¿de acuerdo? Entonces sí, a pesar de que aquí es falso, lo cambiamos a true y evitamos el suceso. Este es el primer paso, ¿verdad? Pero necesitamos hacer muchas más cosas para resolver el problema que tenemos. 122. ¿Cómo resolver la promesa del usuario solicitado a instalar la aplicación PWA? (4): Hola, amigo mío. Hemos cortado nuestro efecto de noticias de eventos, ¿verdad? Pero también necesitamos manejar el click ahora en el show Instalar botón cuando aparezca el botón. Entonces, ¿cómo lo hacemos? Para poder hacerlo, ¿necesitamos a qué? Al hacer clic, ¿verdad? Y vamos a crear tal vez una función que vaya a llamar a handle Install, haga clic, ¿de acuerdo? Y ahora necesitamos crearlo aquí. Entonces algo así, manejar Instalar, hacer clic, ¿verdad? Y aquí podemos, como, procesarlo. Pero la pregunta es, ¿cómo procesamos el evento que realmente estuvo aquí atrapado? Entonces como pueden ver, evitamos el suceso, pero para ser honestos, no tenemos, como, seguridad en ningún lado, ¿verdad? No tenemos una manera de referir el evento aquí que fue, como, atrapado en este lugar. Porque, ya sabes, el evento que le gusta a la camarilla está creando esto es un evento que está conectado al clic, no a la instalación Y significa que tenemos que ir aquí y guardarlo en alguna parte. Propongo crear un nuevo estado que se llamará prompt diferido Por lo que sugerirá que estamos guardando el mensaje prompt. Entonces para la instalación, lo estamos aplazando y lo estamos guardando en este estado en particular Por defecto, no lo tenemos, así que se va a establecer en null, ¿verdad? Pero aquí, ahora podemos establecer prompt diferido para el evento, acabamos de guardar el evento de aquí y cortarlo en el estado aquí, ¿verdad? Bien. Entonces significa que ahora se muestra el botón de instalación. Y podemos dar click en él. Y aquí en este lugar, podemos usarlo, ¿no? Bien. Pero antes de usarlo, necesitamos verificar si existe un prompt diferido, ¿verdad? Porque, bueno, si alguien hace clic en el botón, alguna manera logró hacerlo y no existe, no queremos invocar un prompt para la instalación Y como pueden ver, tenemos una sugerencia aquí porque el prompt diferido, es realmente ahora mismo un evento de aquí, ¿verdad Y ese evento es tener un método especial, que se llama prompt. Y ese método va a preguntarle al usuario qué viste antes. Entonces cuando alguien hace clic como, Oye, quiero instalar tu aplicación, correcto, y había como, quieres instalar la aplicación, sí o no, ¿verdad? Este es el prompt que se programa en este evento que paramos, pero ahora lo invocamos manualmente Cuando alguien hace clic en el botón, tal vez te estés preguntando, ¿cómo sé que este evento devuelve algo así? Recuerda que todo así siempre se muestra en comentarios. Entonces por ejemplo, aquí, como pueden ver, estoy en antes de instalar la documentación del prompt, y aquí tenemos algo así como prompt tag y luego dice, mostrar un prompt preguntando al usuario si quiere instalar tab o no. Ahora aquí hay una parte muy interesante. Tenemos aquí algo que este método devuelve una promesa que se resuelve en un objeto que describe la elección del usuario cuando se le pidió que instalara la aplicación. ¿Qué significa? Significa que esta cosa va a ser ejecutada tan sincrónica. ¿Qué significa? Significa que podemos hacer otras cosas en nuestra aplicación mientras ésta se ejecuta en segundo plano. Pero tenemos que ahora, especificar aquí que estamos esperando lo que se va a devolver aquí, ¿bien? Y lo que va a ser devuelto aquí se llama Promesa Objeto, ¿de acuerdo? Y porque estamos esperando eso, también necesitamos especificar, como viste aquí, puedes ver que esta función es realmente una función asíncrona, ¿de acuerdo Entonces ahora, todas las partes después son como, no nos vamos a ejecutar hasta que la promesa vuelva con la resolución, ¿no? Y aquí como puedes ver, dicen que puedes, por ejemplo, guardarlo como resultado, ¿verdad? Y también, hay algo a lo que llamó resultado resultado, ¿verdad? Bien. Entonces ahora podemos comprobar si el usuario lo hizo o no, por ejemplo, ¿verdad? Entonces podemos guardarlo, por ejemplo, en resultado de elección, algo así, ¿verdad? Y sí, ahora podemos verificar si el resultado fue aceptado. Yo sí, entonces el cambio aquí es, claro, incorrecto. ¿Por qué? Porque no debemos acceder directamente a él, ¿verdad? Deberíamos hacerlo más bien de esta manera. Así que establece defertPM en null, ¿verdad? Bien. Y ¿tenemos que seguir mostrando el botón? No, no necesitamos, ¿verdad? De lo contrario, simplemente no podemos hacer nada, ¿verdad? Porque, para ser sinceros, ¿por qué haríamos algo? Um, todavía queremos tener el evento. En el caso de que alguien quiera volver a hacer clic en el botón. Entonces sería genial tenerlo en nuestro estado, ¿verdad? Y así no lo vamos a quitar porque ¿por qué? Y queremos, como, mostrar el botón en caso que alguien quiera volver a hacer clic en él, ¿verdad? Si hubieras querido, podrías mostrar algo, cerrar algo. Realmente depende de tu preferencia. Pero para nosotros, creo que ya es suficiente. Así que ahora podemos probar nuestra aplicación después de subirla , claro, al hosting, por ejemplo, como pueden ver, ya tengo instalar aplicación, y como pueden ver, me está preguntando en polaco si quiero instalarla o no Cuando digo que no, no significa que quiera hacerlo desaparecer, ¿verdad? Ahora puedo decidir de nuevo. Ahora cuando presiono Instalar, aplicación, yo, estoy de acuerdo con todo. Y ahora tengo mi aplicación instalada, justo en mi dispositivo, mi PC, está funcionando bien. Ahora puedo, por ejemplo, cerrarlo. Depende de mí cómo funciona, ¿verdad? Y ahora, también, qué fue. Cuando voy aquí, como pueden ver , el fondo desapareció, ¿verdad? Porque, bueno, ya se ha instalado. Cuando llego aquí, sólo puedo abrir mi solicitud, ¿de acuerdo? Porque sí, se ha instalado en mi PC. Lo más importante para nosotros es que veamos si está funcionando aquí, en nuestro dispositivo que es smartphone. Entonces, ¿puedo instalarlo ya? Como pueden ver, sí, me está preguntando si quiero instalarlo. Entonces lo voy a instalar, ¿no? Y automáticamente creará el icono. Puedo agregarlo a mi pantalla principal, ¿verdad? Y como pueden ver, está en mi pantalla. Ahora puedo abrirla. Y esto se abre como una aplicación en Android, ¿verdad? Ahora puedo usarlo, salvar al Estado, y así sucesivamente, ¿verdad? Todo está funcionando bien. 123. ¿Cómo configurar Express? ¿Cómo configurar el backend de tu aplicación?: Hola, amigo mío. Hace mucho tiempo, JavaScript podría ser utilizado en el interior de nuestros navegadores web. Pero debido a que tenemos nota tiene que ya lo hemos instalado, puedes ejecutar JavaScript en todas partes. Pero, ¿qué significa que se pueda ejecutar por todas partes? Significa que podemos hacer que se ejecute como servidor, por ejemplo. ¿A qué conduce? Significa que podemos leer y archivos desde la computadora donde está instalado el servidor , por ejemplo, ¿verdad? Significa que puedes trabajar con bases de datos. Significa que puedes procesar solicitudes como por ejemplo, inicios de sesión, envío de formularios y todas las cosas pueden suceder en segundo plano No se mostrará al usuario, ¿verdad? Porque normalmente, si vas a lo que entra en el código fuente de cualquier sitio web, derecho, puedes ver JavaScript ahí, ¿verdad? Pero lo que va a ejecutar no JS. Entonces, si el servidor no tiene JS instalado, entonces puedes ejecutar todas las cosas como esta, por ejemplo, creando un servidor que pueda responder a las cosas, bien, que pueda, por ejemplo, responder con texto plano, y, por ejemplo, saludar, correcto, o cualquier otra cosa. Ahora todos pueden hacerlo en un solo idioma. Entonces no necesitas aprender, por ejemplo, Bton o BHB o cualquier otro idioma, Puedes hacer todo desde dentro del nodo JS. Pero todas estas cosas como puedes ver aquí se pueden hacer usando el nodo básico JS. Pero la gente creó muchos de qué paquetes que se llaman módulos de paquetes JS de nodo, ¿verdad? Y puedes usar el trabajo realizado por otros, para que no recrees la rueda, así no estás creando todo desde cero Y como pueden ver, por ejemplo, tenemos algo lo que se llama Express, y como su nombre lo indica, es una forma expresa de crear framework web, entonces para crear servidores y administrarlos, ¿verdad? Y como puedes ver, mucha gente lo descarga como 33 millones semanales. Entonces sí, esta es una forma muy popular de crear servidor. Y propongo usar Express en lugar de, como, una nota de vanilia JS y como recrear todo desde cero, Porque no es así como trabaja la mayoría de la gente. Entonces, ¿cómo usamos algo lo que se llama Express para poder configurarlo para poder hacer servidor en nuestra app Ahora tenemos que decidir si queremos crear nuestro servidor independientemente de nuestro frente y desarrollo. Porque fíjate que aquí tenemos un proyecto con nuestro reaccionar, y bueno, todo aquí se hace realmente al frente, ¿verdad? Aquí no se va a pedir nada al servidor. Y para ser honestos, es una buena idea crear una nueva carpeta, por ejemplo, servidor, donde vas a almacenar todos los archivos relacionados con el servidor, ¿de acuerdo? Y dentro de él, vamos a crear un archivo al que puedas llamar como quieras. Puede ser servidor, puede ser punto índice JS. Voy a llamarlo servidor JS, donde voy a crear objetos express donde lo voy a usar dentro de aquí, ¿verdad? Pero antes de hacer eso, necesitamos instalar Express. Para hacerlo, vamos a crear una nueva terminal, y esto es muy importante. Tenemos que ir a saltar a la carpeta del servidor, ¿de acuerdo? Y esto ahora es importante. Vamos a inicializar un nuevo paquete que Jason, ¿de acuerdo? Porque vamos a tener un paquete diferente Jason para servidor y diferente hacia adelante para nuestra aplicación en front-end. ¿Bien? Y ahora aquí dentro, vamos a instalar Express. Y como pueden ver, tenemos ahora unos módulos de nodo diferentes dentro de aquí, ¿verdad? Y ahora podemos ejecutar nuestro servidor. Por supuesto, no hace nada en este momento, pero podemos entrar aquí y escribir NPM run, y como pueden ver empezar, va a ejecutar esto, ¿verdad Entonces empecemos. Y como pueden ver, iniciamos el servidor nodo JS, pero aquí no pasó nada. Entonces, ya sabes, teníamos la consola iniciada aquí, por ejemplo, así. Como se puede ver el infierno también desde server dot js. Así que ahora podemos, como, hacer cosas aquí dentro. ¿Qué tipo de cosas podemos hacer? Bueno, creo que es una buena idea usar el código predeterminado de aquí, ¿de acuerdo? Y lo que hace, estamos como requiriendo, entonces somos como importar todo desde Express, ¿de acuerdo? Entonces cuando salto aquí, como pueden ver, incluso dice, Oye, importa esto y después, necesitas invocar Express Y esta cosa crea la aplicación Express, ¿verdad? Y a partir de esto, ahora se puede acceder a muchos métodos, ¿no? Cuando hago algo así, como pueden ver, hay muchos métodos, y uno de ese método se llama get Get es una función que ahora está esperando en este lugar en particular, bien, en nuestro servidor que ejecutamos. Entonces está en la carpeta principal, y está esperando a qué? Entonces puedes ver aquí tenemos una función, ¿no? Aquí tenemos una función, que es función anónima, y está a la espera de solicitud, ¿verdad? Y cuando alguien pone algo, aquí es donde va a estar el valor cuando alguien intenta enviar algo a este lugar en particular, ¿verdad? Entonces al lugar principal de nuestra aplicación. ¿Y dónde está ese lugar? Ejecutas el servidor, esta vez como puedes ver, algo está pasando, no paré. Cuando voy aquí y escribo Local host 3,000, note que tenemos aquí hola palabra. Es porque accedemos a este lugar principal desde nuestro servidor, que está en el puerto 3,000, ¿de acuerdo? Y enviamos como respuesta, S significa solicitud es solicitud, lo que me viene y RS es de respuesta, entonces lo que envío, ¿no? Así que envío al navegador web hola palabra, ¿verdad? Y ahora cuando estamos aquí, como pueden ver, tenemos hola palabra respuesta. Entonces este es el valor que va a llegar cuando alguien llegue a la ruta principal. Si hubiera puesto aquí, por ejemplo, API, que es lo más común que se puede hacer. Y por ejemplo, digamos que yo lo llamaría hola. Y ahora cuando me refresco aquí, como pueden ver, nada cambió. ¿Por qué es eso? Porque si cambias algo aquí en este lugar, ahora necesitas terminar y volver a ejecutar tu servidor. Te voy a mostrar pronto una manera de anotar para que no tengas que hacerlo cuando vayas cada vez, ¿verdad? Pero ahora como puedes ver, tenemos que entrar en API hola y luego tenemos hola palabra, ¿verdad? Entonces esto es como un punto final, nombre de punto final para que su servidor obtenga respuesta. Entonces cuando alguien va aquí, la cosa t va a ser enviada como respuesta. Esto parece que hay muchas cosas que hacer, ¿verdad? Y aquí también es muy importante que necesites escuchar, ¿de acuerdo? La aplicación debe escuchar. Entonces es como iniciar tu servidor y escucha en este deporte De lo contrario, tu servidor no va a funcionar, ¿de acuerdo? Esto es como escuchar cualquier cambio para la solicitud entrante de respuestas, ¿verdad? Y bueno, hay mucho, mucho más, ¿verdad? Pero por ahora, esta es la forma más sencilla de configurar express en tu proyecto. Entonces puedes, por ejemplo, solicitar cosas en tu servidor desde donde. Entonces, por ejemplo, cuando creamos un componente más tarde y reaccionamos, vamos a solicitar datos de este lugar, bien, y los obtendremos como respuesta. Esto es súper potente porque después, vas a bien, aprendes, por ejemplo, cómo hacer peticiones a, por ejemplo, bases de datos, ¿verdad? O puedes aprender a, por ejemplo, subir un archivo en el servidor en muchas y otras cosas. Entonces esto es súper poderoso porque notar que configurarlo no fue como tomar mucho tiempo, ¿verdad? Pero de alguna manera logramos configurar servidor en JavaScript sin tener que aprender otro lenguaje de programación, ¿verdad? Y entonces podemos probar nuestra aplicación localmente aquí, bien, en nuestra máquina sin tener que, no sé, comprar un hosting o como conectarnos a algún tipo de alojamiento. Así podemos diputar todo lo del miedo aquí, a nivel local. 124. nodemon - cómo monitorear automáticamente los cambios en el servidor: No usamos el Dan protom algo de eso chica Alexia tipoCarcvPop Stavi Serv E O D Bractavan Zap tan eso chica Alexia tipoCarcvPop Stavi Serv E O D Bractavan Zap tan Dera, Ruchi Povich Pomtum Telco tri JavaScript, también. Que es Dot pa JavaScript Monabv Telco VannVpegnarka. E, problemas Java script y Botagetib en una pieza viga Rug Na Powsmenzak Napiquadre Gemma demasiado apretada, Greis marcha para llevar JavaScript a la Morse pod gli Pravda destron InternetOvo momento acre cambio a Morse pod gli Pravda destron Tam PoVizmptvon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para llevar Kuchavanap quad Povimginwach, presa elemento Powtmen a Niko zidov por su tirado el Internet de MogoBgaavka protea peta vich Greis marcha para llevar JavaScript a la Morse pod gli Pravda destron InternetOvo momento acre cambio a Tam PoVizmptvon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para llevar Kuchavanap quad Povimginwach, presa elemento Powtmen a Niko zidov por su tirado el Internet de MogoBgaavka protea peta vich Ma Reloj Greis marcha para llevar JavaScript a la Morse pod gli Pravda destron InternetOvo momento acre cambio a Tam PoVizmptvon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para llevar Kuchavanap quad Povimginwach, presa elemento Powtmen a Niko zidov por su tirado el Internet de MogoBgaavka protea peta vich Ma Reloj Greis marcha para llevar JavaScript a la Morse pod gli Pravda destron InternetOvo momento acre cambio a Tam PoVizmptvon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para llevar Kuchavanap quad Povimginwach, presa elemento Powtmen a Niko zidov por su tirado el Internet de MogoBgaavka protea peta vich Ma Reloj consiguió PovidPaanch considervkovi es seguridad Agovta. Moriscoovino, oppo orgo Povovch cuando estés empujamos problema. E, La tega Mavouuhomena, Java Script a FrangsPomzo Nod JS, AR ten Java Script enga, Ya BuruHomon, Postronia, ag Ben, Topovigi era Sonic Ni Benji Vigo, So tase JE Nod JSP Dafuhomtabodovisco Romina at llamado tego Java Script to Congrate nod res, Mamo Java Script a FrangsPomzo Nod JS, AR ten Java Script enga, Ya BuruHomon, Postronia, ag Ben, Topovigi era Sonic Ni Benji Vigo, So tase JE Nod JSP Dafuhomtabodovisco Romina at llamado tego Java Script to Congrate nod res, Mamo vo Saviana Servera. Java Script a FrangsPomzo Nod JS, AR ten Java Script enga, Ya BuruHomon, Postronia, ag Ben, Topovigi era Sonic Ni Benji Vigo, So tase JE Nod JSP Dafuhomtabodovisco Romina at llamado tego Java Script to Congrate nod res, Mamo vo Saviana Servera. Método elegante Eleanic a la Pos val en Taco Beach Natoiamus el mensaje en ektorJ OctreePreo postAertepre, Framework, y reza mo Zanis StalloVchpoz valac Bardo Shipcopostavic, doctora servidora Gomorna Zadach Solicitud de camioneta fiscal sobre Povich pre Povich StalloVchpoz valac Bardo Shipcopostavic la Pos val en Taco Beach Natoiamus el mensaje en ektorJ OctreePreo postAertepre, Framework, y reza mo Zanis StalloVchpoz valac Bardo Shipcopostavic, doctora servidora Gomorna Zadach Solicitud de camioneta fiscal sobre Povich pre promueve respuesta. la Pos val en Taco Beach Natoiamus el mensaje en ektorJ OctreePreo postAertepre, Framework, y reza mo Zanis StalloVchpoz valac Bardo Shipcopostavic, doctora servidora Gomorna Zadach Solicitud de camioneta fiscal sobre Povich pre promueve respuesta. Iac es un Migiqu ZadanPetana D Baz Dane etiqueta E. M mentizado Dostan RodovichTVUCI taki servidor Atmos mentizado Dostan RodovichTVUCI taki servidor Atmos Sobovic el motor delantero. En Tem a demasiado Prosto V Io Terasveenjob diez DestovatGJ Yak, Al Nevan a Benge MuktoObchespomoz y Frisco, Java Script dos Rucho Negoyenzka programa uno, DobaTB Butaki Stemco, Natomi Yak Motake en StalLovatk M mama solía decir proyecto Mammospotnt aka Iteras sollozo tenía punto Cv, servidor MT tai Terasveenjob diez DestovatGJ Yak, Al Nevan a Benge MuktoObchespomoz y Frisco, Java Script dos Rucho Negoyenzka programa uno, DobaTB Butaki Stemco, Natomi Yak Motake en StalLovatk M mama solía decir proyecto Mammospotnt aka Iteras sollozo tenía punto Cv, servidor MT tai tur Bengio Povionannal astronomía Internet. Terasveenjob diez DestovatGJ Yak, Al Nevan a Benge MuktoObchespomoz y Frisco, Java Script dos Rucho Negoyenzka programa uno, DobaTB Butaki Stemco, Natomi Yak Motake en StalLovatk M mama solía decir proyecto Mammospotnt aka Iteras sollozo tenía punto Cv, servidor MT tai tur Bengio Povionannal astronomía Internet. Terasveenjob diez DestovatGJ Yak, Al Nevan a Benge MuktoObchespomoz y Frisco, Java Script dos Rucho Negoyenzka programa uno, DobaTB Butaki Stemco, Natomi Yak Motake en StalLovatk M mama solía decir proyecto Mammospotnt aka Iteras sollozo tenía punto Cv, servidor MT tai tur Bengio Povionannal astronomía Internet. Nos Warto Zav Mimo Frisco TrojerJGTM cambio front end o Doblar ahí Gur ASV, así que sé un servidor. Pestillo ir a Takoba asi Bisha servidor Postavit así sea vinimhsting Sakovic completando Jinja, Es Miso Povionzans y freshbb o razaro MsagoMPSojov . Conseguí que Fabio drasu se llevara el servidor de carpetas. No versión de un servidor Rufer de plqueasNaw gob, Amo BisBnazvat consiguió índice, NasvagSB Dupaed y Vafisco not Toys placa, comienzan con renunciar Poposto Servera, ¿verdad? Y Nv inicia versión es Poposu Java Scription BotaKVNPSA Poposto Java scription llamado Sero. Poposu Java Scription BotaKVNPSA Poposto Java scription llamado Sero. No, Teco como Musim StovnaePress, en realidad ir intuattMam instruir a Vastonagmkan realidad El Naan Govinvoldeja se quitó el servidor, Sams Jon. A Natacha dijo que el cambio de directorio, sin servidor, E, Tras Robia MED, Tras Robia MED, eje de Betta Zant novela Todd Soh Potobe Abajo en SartovPoglund, Nato Rho no se requiere servidor recortar JS en este momento, ¿verdad? ¿verdad? ZanimnToa Zobeme halbum Abi Zi Instalación de Valle PM Instalar Express, colina Washington estado de ánimo Turi Tagak película Moss Stallovat A NutaGn puntas PavodoePress, Nib Povdomonazv empezando a ir Nueva Moss Stallovat A NutaGn puntas PavodoePress, Nib Povdomonazv empezando a ir Nueva Etiqueta. Boo protos pasteles y yo' enseñé algunos feas B Sobi toute obvismng como, Mapas toto Era tack aza en lugar de Vance etiqueta Expresaemgas, así ruhom. Zanni Mednacto RobiJam Chip kaza, Jeff Packet, Jason, Mama TuteotoDanrazu guión, starto Día voy Ru homie, la carrera, inicio etiqueta a ruhaiKana servidor de notas jose benito, inicio etiqueta a ruhaiKana servidor de notas bonita mama, lismtutivpisali prueba, nafqotagtso momento de cambio, esta prueba epsonam, tacnapravda, taco mendattiuu hamianaMtt get. mendattiuu hamianaMtt get. Yo eras, VakispoutCmaja, mojo Nash Piers servidor post Savage, Naso hivowan en para Matin. Alcance y papeles tutto, por lo que es astronatapoDNA, pero es N Yo nos digo tomach apocol Bichozuei. Predevkin Mushitaabeno, Zain portovag Zain portovag requiere Importación de ana a estrella en JavaScripto. E Menke un importador Presa exprés para tomar control Mspreopctor libro Ruby on attack, A express, esto, pposto biblioteca, Framework, Tae poteng, Java Scripture, Tuias ZazapisanePress , el control Mspreopctor libro Ruby on attack, A express, esto, pposto biblioteca, Framework, Tae poteng, Java Scripture, Tuias ZazapisanePress, tomando Nasvia. M Mme Mivras VivoanaFunti, TuratFogna sum applica ttevges, topo chi crea una aplicación express. La función express al expreso FungianiBarge, OtraSuePorana Nvigifuntia Gura ProstopnaOtazu, Yactas requieren tooty significa demasiado funct toms vivoaigdu VivoAzaupm Bica NoviembTaue mammoivo así Dos tanya Dove método, etiqueta, histórico Morse orista. método, etiqueta, histórico Morse orista. método, etiqueta, histórico Morse orista. Sin embargo, método non vari, Tony Narachi Mota, telco ta, ta, MetodanaZvahe, escucha, Nasuhue Ios VarnaPort, Trina Poproto stu, numer Tuthons, AgioTouruhm erato Ejecutar inicio de momenticevade Trina Poproto stu el tanque Otra gon oscuro. el tanque Otra gon oscuro. I Bisha para atar poprosto anfitrión local Vu cropper Titi Sons tag, Temi Benavaonkvji, Temi E, Tras, consigue que el Yazobi Run empiece a etiquetar a Sabo tag, vinto SobiaVuhma TheAspam no puede conseguir Oggi oto Tag Betago y Pinta, TagovSatPottavo, Vin do Stashm no puede conseguir vinto SobiaVuhma TheAspam no puede conseguir Oggi oto Tag Betago y Pinta, TagovSatPottavo, Vin do Stashm no puede conseguir. Epcot servidores Ruchi teres touch TerpopStu StroneTabore Terra y em Vuci acecho, pone va, Nasser Potnia aaj autómatas, estadísticas esbirro Naser jaantrig controlado agreg Yakovontrig es novo GouruhMage Yakovontrig Takapalndopi de Nate Lexi, Samara es hola palabra. A TegopanVVig toque Virgina GovnFolder, aga DominoVrot Takavan, Coin Nach Strano Internet ove, HelipopSto vac, anfitrión local, SportAmti Johnson, tag, también, chaube Abs ru HoomFung sectora, Funko AnomvTag I a funciamvazu tomato, matzo takeGoyaGreg . . . Solicita chile. Tosa sana cúpula, etiqueta, tootso wanomi ERS, respuesta de chile, Zangiskgohi Ot Povich, Zangiskgohi Ot Povich Itsaavvobctic al puré odazido depósitos Sistani cisne a solicitud de Bengialgtgov. RS es obipvatcagako Vodka, un tegoctoadtauc dotegova a dientes sustancia barra en etiqueta Una película Ot Povismo chiles, responder, enviar visualmente atm visa emo hell un tegoctoadtauc dotegova a dientes sustancia barra en etiqueta Una película Ot Povismo chiles, responder, enviar visualmente atm visa emo hell award. Significa momento g el cuádruple T significa así etiqueta topo avi mush hell award Por lo general Vic gini escuadra dos, Toni Mosa tempo Bach, servidor Bona no Seguia impuesto vanegoEend point Appy Vds toi, un ziv end point app endpoints, monedas de punk Apis, Toni Mosa tempo Bach, servidor Bona no Seguia impuesto vanegoEend point Appy Vds toi, un ziv end point app endpoints, monedas de punk Apis, interfaz de programación de aplicaciones. E, chile demasiado D programa de interfaz de aplicación vana, Yato osuiumtens po Efectuar el tomar un limón, Benjamín nos basura. Dos Nachit arc Zaogovccqt VivagMelatak, Tritozgbaka sos soposvala concretinm y ponche puncta, Puncten entrenador concreto no chintal llamado hola palabra, Nonias min después llamado slash API ipofsvh Hola, decenas pouttenPonchs en mushi controlado Vontri wont novo servidor, AquideraPotem, y Pointes Raza Nato, hola palabra decenas pouttenPonchs en mushi controlado Vontri wont novo servidor, AquideraPotem . . . Natoias dos Net atascado, botego me saopertNT Mama punto final, botego me saopertNT Mama punto final, En película un Sochi debe comenzar. Si diez poss Mumtutaaogova, Mama Naproqa hizo un Baza hecho Mojamzapetch, telegencuc traído, gatos fuera, PoVija Shriscot Benji Jiao postronia, ServanaGong Benjamitepu ego películas Servidor cuidado de cultivos, Tony sh Sotojvtron Benjamb de placa, nay Oh, sí, ServanaGong tilco la ebitag. tilco la ebitag. El llamado Vc tutee Jet es seguro. Til cote subjec a amado tago concreto plicunaSerga Por lo general sirven a Maza en vez de nego no Ja, Tag, E Maza en lugar de van PakunkiPovinzan, actuar express, no hacer a momento sí Sania, tachy Capricho, tomar toga Opszgt 101010 cuna. Yo Benjamin y PoinoTphtava Jackie Pitana atacan, mamá empuja Si la señora Rubi Jaquish componente de la misma Macchu Kuri Benji Peto, o Jaco Zavarto servidor ataque, o Jaco Rana también, atienden visa Povich. Puedes Mami yo vivia trich, el quad taka Toto Midas Doja Maras Dov Sochi Benji Gabo Rancho hipopótamo, Trisoviukovk, Yagi TotogftLatrite Goshutkovnk VigitA. Mora Mamttvibo Mora Scotismva Sach así. Bps faja, postronia Servidor Atom Reloj plata Bazan Si Sisco El GF dejó que el próximo ataque de TGoVGE, Tomah jag. Pero chozas cov o Bimoostroia Wahab Servidor. Oh, ya sabes, si Soumya me cuenta algo de eso sobre pasta Vlisima servidor Bardo Así ism carpeta Prost, en lugar de alisma Espresso o Expresa Establecimiento tac Na Pravda dazu co Doctor Oi Totato star chion la pasta viñeta goo, Pirago y punto a impuesto vana goo tag para levantar el Guvngi Sion raza razo Oi Totato star chion la pasta viñeta goo, Pirago y punto a impuesto vana goo tag para levantar el Guvngi Sion raza razo hola. Toto, Temin NostiKostana, Stego Vasari, Totoviti, MorPui, Ros Viagklena Zach tag, NatoiaTaxvan fundamen tag postAvdmsaovic a Sipko, Iteratikova snap Negligencia, protubo checo Ros vía no o Korsstana Segoe Panamá . . 125. Recupera datos de React Component desde Express: Hola, amigo mío. El día de hoy, les mostraré cómo comunicarse de adelante hacia atrás, así que enviemos una solicitud de algún tipo de respuesta. Pero, ¿cómo hacemos esas cosas? En primer lugar, observe que cuando ejecutamos nuestro servidor de desarrollo, nuestro host local está en el puerto 5173, ¿verdad? Y cuando lo abro, como pueden ver, podemos ver el resultado de lo que sea que haya aquí, ¿verdad? Cuando cambiemos aquí algo, se va a representar aquí. Bien. Y también significa que necesitamos ahora ejecutar el servidor, así que para cambiar aquí y ejecutar el servidor de desarrollo también aquí, ¿verdad? Bien. Ahora podemos conectarnos y platicar unos con otros. Pero, ¿cómo hacemos esas cosas? Yo propongo, vamos a crear un componente al que vamos a llamar, por ejemplo, hola de Express, algo así. Y vamos a crear componente de función usando el atajo que aún no he mostrado. Es a partir de entradas simples reacciona. Y cuando haces algo así, fíjate, tenemos instantáneamente el componente de función que podemos llamar hola desde Express, por ejemplo, ¿verdad? Y aquí vamos a regresar más tarde algo así como hola de Express. Pero este mensaje debería provenir del servidor, ¿verdad? No desde ahora mismo cuando solo lo escribimos manualmente. Pero siempre trata de hacer las cosas como yo ahora porque realmente, cuando estás depurando algo, es bueno ver algo, ¿verdad? Bien, está conectado. Todo está funcionando bien. Acabo de terminar un paso. Puedo ir más allá. Bien, ¿y ahora qué? Ahora, necesitamos de alguna manera recuperar el mensaje de nuestro servidor, ¿verdad? Pero, ¿cómo hacemos tal cosa? Para obtener algo del servidor, vamos a usar el efecto de uso, ¿de acuerdo? Porque esto es algo que se va a ejecutar una vez cuando se monta el componente. Cuando mandas aquí como segundo argumento, qué corchetes sin nada. Esto se va a ejecutar sólo una vez cuando estemos montando nuestro componente, ¿verdad? Entonces esto sólo se ejecuta una vez. Como pueden ver, hola desde Express, dos veces esta vez, pero son dos veces qué? Porque estamos usando el modo estricto, ¿verdad? Pero, oye, esto se ejecuta una vez cuando se monta el componente. Bien. Y ahora tenemos que buscar algo, pero ¿cómo sacamos las cosas del servidor Bueno, para hacerlo, vamos a crear una función, bien que vamos a llamar a buscar mensaje, ¿de acuerdo? Y como puedes ver, sugiere que esta función debe ser asincrónica Y si, esta función debería ser así porque no quieres esperar la respuesta del servidor, ¿verdad? Después de definir la función, necesitamos invocarla también Entonces vamos a invocarlo aquí ahora mismo. Y aquí está como el cuerpo de la función que se va a invocar más adelante aquí, ¿verdad Y recuerda, esta es una función sincrónica porque vamos a esperar la respuesta del servidor, ¿verdad? Y debe hacerse como una sincronía, porque no quieres que tu aplicación no responda cuando algo va a ser como get from server Porque, ya sabes, normalmente, a veces, cosas así pueden llevar tiempo, por ejemplo, el servidor puede ser insensible, por ejemplo, donde envías el mensaje, y no quieres que tu usuario de tu sitio web o aplicación simplemente deje de hacer nada en tu sitio web Quieres atraparlo detrás escena al fondo, ¿verdad? Bien. Y para buscar algo, usamos la función fetch, ¿ usamos la función fetch Y en la función fetch, escribimos lo que queremos recuperar Como puedes ver el nombre de nuestro punto final es el mismo que el que enviamos aquí. Entonces decimos, oye, busca algo de aquí. No especificamos qué porque bueno, ahora mismo estamos haciendo la petición más sencilla que podamos, ¿verdad? Entonces como pueden ver, la solicitud ahora es como si no tuviéramos objetos aquí porque aún no hemos enviado nada aquí, ¿verdad? No especificamos exactamente lo que queremos, pero simplemente hicimos algo como, Oye, trae algo de este lugar, ¿ de acuerdo? Y ahora vamos a esperar la respuesta en este lugar. ¿Bien? Significa que lo que sea después no va a ser ejecutado hasta que obtengamos la respuesta de este lugar. ¿Y qué tipo de respuesta hay aquí? Como puedes ver, es solo texto, ¿verdad? Podemos escribir aquí hello word desde express server dot JS, por ejemplo, ¿verdad? Esto es lo que queremos ver aquí como texto. Así que vamos a crear una variable a la que vamos a llamar texto, y ahora esperemos a que la respuesta sea procesada en el texto, con el método text de la respuesta API. Bien. Y ahora cuando tenemos esto, sí, podemos consolar registrar esto. Como podemos ver lo que hay ahí dentro. Y como puedes ver, nuestro registro de consola se ve así. Entonces algo anda mal porque, bueno, lo pedimos, pero nos dieron como una página entera. ¿Qué pasa? Bueno, el problema es que ahora mismo es que estamos en diferentes partes. Observe que aquí está 5173, y aquí hay uno, este está en 3,000 No hay nada malo en eso porque deberías estar en diferentes puertos porque, bueno, estamos tratando de comunicarnos de front a back end, pero tenemos un problema porque conectarnos desde diferentes puertos, aunque estés en el mismo dominio, bueno, esto no está permitido porque estamos conectando desde diferentes orígenes. Esto se llama algo así. Pero afortunadamente para nosotros, invitar, podemos configurar algo como esto, que se llama proxy. Y esto es como un intermediario en la red un proxy reenvía una solicitud de un servidor a otro en nombre del cliente porque, bueno, estamos como ahora mismo en el mismo ritmo de servidor, ¿verdad ahora mismo en el mismo ritmo de servidor, Estamos en el mismo origen. Entonces, cuando nuestro front-end hace una solicitud de proxy, algo así, el proxy es como solo reenviar la solicitud a nuestro backend, que especificamos aquí con este puerto, ¿verdad Y hace que parezca que la petición viene de sí misma. Entonces es como ayudar a eludir las restricciones que están hechas por algo lo que se llama reglas de intercambio de recursos de origen cruzado, ¿de acuerdo? Sé que este es un tema un poco quizás avanzado, pero por ahora, cuando solo estás aprendiendo y desarrollando, ya sabes, servidor. Lo más importante para ti es que necesitas configurar un proxy como ese, que irá instantáneamente al host local y al puerto 3,000 y API, y solo hará. Parece que vino de, como, el mismo origen, ¿verdad? Y por eso, ahora cuando vamos aquí y nos refrescamos, como pueden ver, cuando vamos a la consola, como pueden ver, tenemos hola word del servidor express punto JS dos veces. Y bueno, ahora solo hemos registrado eso en la consola, pero podríamos, por ejemplo, hacer algo así. Vamos a hacer uso del estado, ¿verdad? A lo mejor esta vez podrías usar el SNIPA Estatal. Y llamémoslo, por ejemplo, ¿qué? Tenemos aquí mensaje, ¿verdad? Entonces llamémoslo mensaje. Y el valor por defecto, a lo mejor no es nada. Y aquí vamos a, como, presentar el mensaje buscado, ¿no? Entonces por defecto, no es nada, pero cuando obtenemos el valor, quieres cambiarlo al texto así. Y ahora cuando nos refrescamos, como puedes ver hola word desde el servidor express punto JS, porque vino de aquí, ¿verdad? Así que tenemos lo que queríamos, y eso es genial porque accedemos aquí a nuestro servidor. Si cambiamos el valor aquí, por ejemplo, a esto, hola mundo, y ahora cuando refrescamos aquí, como pueden ver, el valor también cambió porque ahora estamos enviando algo diferente de nuestro. Observe que cuando abrimos aquí nuestra red y nos refresquemos de nuevo, cuando vamos aquí, tenemos algo así como respuesta, como pueden ver, este es el valor que respondemos desde nuestro servidor, ¿verdad? Y accedemos a él solicitando URL así. Y lo gracioso es ese aviso de que estamos solicitando realmente qué 5173, ¿verdad Y a pesar de que estamos solicitando esta cosa, porque tenemos su proxy, sabe que cada vez que estamos tratando de acceder al punto final de la API con algo después, esto realmente va a solicitar el valor de este puerto de aquí, ¿de acuerdo? Sé que parece terminado un poco, pero así es como lo configuras si quieres tenerlo en diferentes puertos, y, ya sabes, quieres, como, verificar los cambios en el servidor y al mismo tiempo, verificar los cambios en el vite, ¿verdad Porque quieres ver, como, instantáneamente los resultados provenientes de los cambios desde el front-end y luego el bug end al mismo tiempo. Tienes dos cosas corriendo y comprobando cambios. Pero ahora mismo, sí, nos hemos conectado. Entonces, ya sabes, podríamos buscar el valor y cambiar, por ejemplo, el texto Pero claro, esto es solo lo básico derecho de expreso. Simplemente accedemos a buscados. Cambiamos la respuesta al texto, ¿no? Y si, ahora podemos mostrar el 126. Mensaje de "carga" mientras se obtienen datos: Hola, amigo mío. El día de hoy te mostraré cómo hacer un mensaje de carga mientras nuestra respuesta desde el servidor se está cargando. Porque cuando lo refresquemos, notamos que es como saltar a nuestro sitio web. Sólo está apareciendo. Pero cosas como ir a buscar, puede llevar tiempo. Depende de cuántas personas estén usando tu sitio web. Depende de cómo esté muy lejos tu servidor, cuántas cosas se hacen a la vez, ¿verdad? Es buena idea mostrar algún tipo de mensaje de carga al usuario para mejorar la experiencia del usuario. Pero, ¿cómo hacemos esas cosas? Observe que el valor predeterminado, el estado de uso es cadena vacía, y la cadena vacía es realmente como para la declaración condicional así, no es cierto, ¿verdad? Para que podamos hacer algo así. Si el mensaje de búsqueda es verdadero, entonces muestra el mensaje de búsqueda. De lo contrario, mostrar, por ejemplo, la carga de texto. Ahora cuando me refiero como pueden ver, vimos por una segunda pantalla de carga en segundo plano, ¿verdad? Pero tal vez hagamos este efecto de uso para tomar algún tiempo para que podamos verlo con claridad. Entonces cuando uso el tiempo de salida establecido, puedo hacer algo como, Bien, quiero establecer fetch message, pero en, por ejemplo, 1.5 segundos, ¿verdad Y ahora cuando me refresque, como pueden ver, tenemos cargando para qué? 1.5 segundos, y luego podemos ver el mensaje. Entonces así es como haces un mensaje sencillo como cargar. Pero podríamos mejorarlo tal vez con algún tipo de adicional ya sabes, bibliotecas, y te mostraré cómo hacerlo en la próxima conferencia. 127. React Spinner: "giremos" el mensaje de carga: Hola, amigo mío. Hay dos bibliotecas utilizadas para at que son muy populares para cargar datos, y una de ellas es hilanderos en racked, Cargadoras. Y como puedes ver, puedes, por ejemplo, hacer algo así, o puedes usar hilanderos racked Eso se ve así, y realmente usar esta cosa es bastante simple. Porque todo lo que necesitas hacer es instalar el paquete y usar el componente. Entonces, por ejemplo, digamos que querías usar esta cosa. Observe que lo genial de este sitio es que puedes cambiar el color aquí, por ejemplo, aquí, puedes cambiar el tamaño a más grande a más pequeño y ver cómo se verá antes incluso de instalarlo, ¿verdad? Para que puedas revisar el cargador de antemano antes de usarlo. Pero en esta conferencia, usaremos los hilanderos de tapetes este lugar para instalarlo siempre entrar en empezar, y como puedes ver, para poder instalarlo, todo lo que tenemos que hacer es hacer algo así Así que tenemos que entrar en nuestro proyecto, abrir la consola y escribir NPM install. Después de instalarlo, todo lo que necesitas hacer es importar el que te interese. En nuestro caso, nos interesa rotar líneas, justo entonces todo lo que tenemos que hacer es hacer algo así. Podemos copiar esto en nuestro proyecto aquí. Pero en vez de audio, vamos a importar qué líneas giratorias como esta, ¿verdad? Y ahora solo necesitamos usarlo en este lugar en lugar de cargar texto. Entonces para poder usarlo, aquí tenemos ejemplo de arriba, ¿verdad? Si quieres usar exactamente lo que está aquí arriba, todo lo que tenemos que hacer es simplemente pasarlo aquí, ¿verdad? Y cuando vamos aquí y cuando nos refresquemos, como pueden ver, ¿tenemos qué? Nuestra pantalla de carga. Pero quizás te estés preguntando por qué el color del mismo es verde cuando lo tenemos aquí al gris. Lo curioso es que cuando vayas a aquí, fíjate que decían que los apoyos aquí como el color del trazo se está fijando, el color de las líneas giratorias, pero aquí usan el color Tan bastante raro, porque esta es una implementación usan color, pero deberían usar throw color. Entonces es solo una vuelta aquí, pero puedes arreglarlo, simplemente puedes cambiar la propiedad al nombre propio. Y ahora cuando lo refresquemos, puedes ver que es gris puede cambiar el color a lo que quieras. Se puede cambiar la talla, ¿verdad? Si quieres que sea más pequeño, puedes hacerlo más pequeño, ¿verdad? Depende de ti cómo va a quedar con estos ajustes. Bastante genial, cierto, porque no necesitabas, como, reinventar la rueda No necesitábamos, ya sabes, hacerlo en CSS, tal vez animación, de cualquier manera que elijas. Ahora tenemos algún tipo de líneas giratorias en lugar de, ya sabes, cargar, lo cual es raro, ¿verdad? 128. EJERCICIO: React Toastify: notifica a los usuarios como un profesional: Hola, amigo mío. Hoy, vamos a hablar de paquete que se llama React Tastify que muestra brindis Sé que el nombre parece raro, pero los brindis son sólo mensajes simples como el de aquí También puedes ir a la demo de documentación, y aquí puedes, ya sabes, ver cómo puede aparecer cada cosa, cómo puedes, ya sabes, cambiar también. El tipo de la misma. Entonces puede ser la advertencia, puede ser error, el predeterminado. Entonces todas las cosas aquí, como pueden ver, son bastante fáciles de personalizar. Se puede ver fácilmente cómo usarlo, ¿verdad? Y todo lo que necesitas hacer es simplemente copiarlo y pegarlo en tu proyecto, ¿verdad? Y en nuestra situación, queremos, como, totificar dentro de nuestra búsqueda ¿Cómo hacemos tal cosa? Bueno, en primer lugar, tenemos que hacer un recipiente para tostadas, ¿de acuerdo? Y bueno, usemos el único contenedor que tenemos aquí, pero antes de eso, necesitamos instalarlo también, ¿verdad? Entonces, para poder instalarlo, necesitamos escribir esto, ¿verdad? Así que vamos aquí. Abramos la terminal, y vamos a instalarla. Y como pueden ver, necesitamos algo así, ahora, ¿verdad? Pero dice que hay que importar también algo lo que se llama el CSS para Tastify, ¿verdad Y no lo vamos a importar en nuestro hola de Express porque queremos permitir usarlo en todas partes, ¿verdad? Creo que es una buena idea importarlo aquí en toda nuestra aplicación, ¿verdad? También necesitamos importar nuestro contenedor, algo así, pero sin tostadas, porque quiero que esté disponible en nuestro árbol de aplicaciones. Así que siempre es visible, ¿verdad? Y tal vez usemos el contenedor de prueba que está aquí, ¿no? Como puede ver, este es el comportamiento predeterminado, ¿verdad? Entonces esto es realmente lo mismo que este, ¿verdad? Y pongámoslo, por ejemplo, aquí, bien, así. Y ahora lo genial es que porque tenemos un contenedor en nuestra aplicación, todo lo que tenemos que hacer es emitirlo, por ejemplo, de esta manera, ¿verdad? Entonces, si vamos a copiarlo aquí, pero necesitamos también, importar nuestro brindis. Entonces importa, y necesitamos importar tostadas, ¿ verdad? Esa es la manera de hacerlo, ¿verdad? Eso es para que podamos usar la función que se llama brindis, ¿verdad? Entonces todo lo que tenemos que hacer ahora para usarlo es invocar esta función, ¿verdad Entonces cuando vayamos aquí y digamos que lo pongo, digamos aquí por un segundo. Ya ves que tenemos, Guau, tan fácil, entonces puedes cerrarlo. Cuando actualice nuestra página, se va a mostrar dos veces porque estamos en el modo estricto, ¿verdad? Pero sí, apareció después de buscar los datos. Quizá podríamos ponerlo también, por ejemplo, aquí, justo después de 1.5 segundos. Ya ves, Guau tan fácil, pero lo conseguimos dos veces, como dije, porque así es como está funcionando el modo calle. Y la pregunta es cómo personalizarlo por ejemplo. Digamos que tal vez al inicio de cuando estamos tratando de cargar algo, podemos hacer información, y podemos decir cargando datos. Ahora cuando lo refresque, puedes ver que dice, Oye, algo se está cargando, ya puedes ver, sí se está cargando. El problema es que bien, no desapareció cuando finalmente se cargó el mensaje, ¿verdad? Entonces podemos hacer algo como, por ejemplo, brindar, despedir, ¿verdad Para que podamos descartarlo cuando el mensaje cuando se va a cargar Entonces como puedes ver, podemos manualmente, decir, Oye, ya no te necesito. React toastify es súper poderoso. Es utilizada por miles, millones de personas, ya sabes, ¿verdad? Cuántas personas lo han descargado en la última semana, dos millones. Así que puedes hacer muchas, muchas más cosas aquí, ¿verdad? Se puede, por ejemplo, cambiar íconos. Puedes manejar hasta la promesa aquí y ellos te muestran cómo hacerlo aquí, ¿verdad? Se puede cambiar la posición del brindis. Realmente se puede definir cualquier cosa respecto a esto, bueno, brindis. Y lo genial es que puedes comprobarlo, ¿verdad? Oh, quiero el modo oscuro, por ejemplo. Entonces para que sea modo oscuro puedes ver que necesitas cambiar lo que aquí, la propiedad de team a dark, por ejemplo, puedes cambiar fácilmente donde va a aparecer. Oh, quiero que aparezca aquí, quiero que aparezca p. Tú estás decidiendo dónde aparece y no sé, quieres acercar el zoom. Se va a acercar, quieres deslizarte. ¿Bien? El siguiente va a deslizarse. Depende de ti cómo va a aparecer. Así que es una buena idea jugar con él, ¿de acuerdo? Como ejercicio, intenta instalarlo. Y por ejemplo, tal vez podrías intentar divertirte con, digamos, donde esta promesa, si manejando promesa. Intenta manejar la promesa, como, por ejemplo, tratar de hacerlo, por ejemplo, de esta manera, ¿verdad? Para que veas que puedes mandar aquí reloj. Trae. Entonces en nuestro caso, es esto, correcto. Y cuando se va a resolver el fetch, puedes dependiendo de ello, mostrar mensaje, como cuando está cargado, mostrar esto Cuando ocurra el éxito, muestra esto. Si pasa la flecha, muestra esto, ¿verdad? Entonces, para ser honestos, esto va a mejorar automáticamente nuestro proceso de carga. Pero recuerden que aquí hemos establecido tiempo fuera. Esto es algo que hemos creado artificialmente. Esto está tomando 1.5 segundos. Pero esto es instantáneo en esta situación. Pero claro, deberíamos poner comprobando cuando se resuelva la promesa, cuando el valor viene del servidor aquí, ¿verdad? Esto es solo con el propósito de depurar más adelante, deberías leer Bien, esa es la lección. Muchas gracias. 129. Mapa: muestra elementos de listas: Hola, amigo mío. Hoy, te mostraré cómo mostrar tareas desde, por ejemplo, una matriz dentro de nuestro componente. Y te estoy mostrando esto en un ejemplo muy sencillo. Imagínese que estos datos provengan de la base de datos, por ejemplo, ¿verdad? Pero por ahora, estamos mostrando cómo simplemente mostrar todos estos datos aquí. Sería más fácil de entender por ello. Entonces, ¿cómo abordamos un problema como este? Bueno, normalmente, cuando quieras mostrar tarea, probablemente usarás la lista desordenada, ¿verdad Y entonces usarías el elemento de lista. Y por este bien, usaríamos uno, dos, tres, cuatro estos artículos, y yo haría los deberes, por correo, cuarto limpio, y cocinaría la cena. El problema es que, ya sabes, puede haber muchas, muchas más tareas o menos de ellas. Es por eso que probablemente necesitamos usar algún tipo de bucle, correcto, que pasaría por cada elemento y en el elemento de lista sobre este elemento, ¿verdad? Y sí, podrías usar Loop cuatro, pero para ser sinceros, esta es una forma muy lenta de hacer esto, y no es tan legible como la que te voy a mostrar ahora. Hay algo, lo que se llama función de mapa dentro de Javascript. Espero que ya la hayas usado, pero si no, te voy a dar una primera introducción sobre cómo trabajar con ella, ¿de acuerdo? Cuando haces algo así, tareas y luego mapeas, esta función ya está lista para pasar por cada elemento de una matriz, todo diccionario, y hará lo que queramos sobre estos datos usando la función que vamos a enviar aquí. Entonces, ¿qué hacer la función, verdad? Esta función sólo va a hacer cosas en todas estas tareas, si acaso en nuestra situación, las cosas aquí, ¿verdad? Entonces esto es perfecto para nosotros, cierto, porque queremos hacer algo así. Quiero adjuntar. Quiero, como, envolver, hacer la tarea con este artículo, ¿verdad? Y luego quiero envolverlo con la compra de leche, cuarto limpio, y cocinar la cena, ¿verdad? Entonces aquí, cuando entramos en una ortesis, ahora podemos escribir algo así como corchetes cardi para entrar en el reino Javascript, Y ahora podemos usar esta función. Entonces podemos decir tarea. Vamos a mapear a cada chico así, cada dato, algo lo que se debe hacer con estos datos. Pero, ¿cómo lo hacemos? Bueno, podríamos hacer una función específica para hacer todas estas cosas, pero porque tenemos qué? Función de flecha, podemos hacer algo así. Podemos mapear y luego decir el nombre de cada elemento, ¿verdad? Entonces los vamos a llamar tarea. Pero claro, podrías llamarlos quieras, ¿verdad? Este es el nombre que hemos inventado. Creamos en este particular elogio. Y ahora decimos, qué se debe hacer con cada una de estas tareas. Entonces, si realmente no hacemos mucho, entonces por ejemplo, si solo hacemos un ítem de lista y, ya sabes, tecleamos algo así, significa que vamos a hacer cuatro veces como reemplazar todo el contenido con estas cosas aquí. Si tecleo aquí tarea, vamos a reemplazarla con cadena de tareas. Es muy importante que si quieres usar esto como dato como algún tipo de variable, no como una cadena, necesitas saber como dos corchetes. Y ahora, para cada elemento, bien, lo envolvimos con artículo. Y ahora como puedes ver, hemos mostrado cada ítem de la lista de tareas, ¿verdad? Entonces esto puede ser confuso al principio cuando empiezas a usarlo, ¿verdad? Pero te permite, como, en una línea, cambiar instantáneamente como una matriz completa, cambiar cómo, es como, ya sabes, se muestra. No necesitábamos hacer la búsqueda. No necesitábamos, ya sabes, crear, por ejemplo, borrado temporal o pensar en cómo abordar un problema así porque acabamos de hacer esta sola cosa a datos enteros como este porque eso es todo lo que necesitábamos hacer. El mapa es una función potente que como puedes ver, te ahorra toneladas de tiempo. Entonces otra vez, porque creo que esto ayuda cuando estamos tratando de usar palabras diferentes cuando estamos aprendiendo cosas nuevas. Entonces map es una función que asigna a cada elemento de una matriz o por ejemplo, diccionario, lo que se debe hacer en cada iteración, así en cada paso Entonces si por ejemplo, cuando estamos viendo esto, significa que lo que sea que esté dentro de esta caja, que en nuestro caso, son tareas, quiero llamar a cada elemento tarea y esto es lo que quiero hacer con él. Entonces otra vez, caja, luego función de mapa, luego datos, luego qué hacer. Con datos, ¿verdad? Y en nuestro caso, necesitamos hacerlo si quieres acceder a estos datos, también tenemos que hacer algo así. Bastante sencillo. Después de usarlo algunas veces, va a, como, meterse en tu vena, ¿verdad? Eso es sólo una lección. Muchas gracias. 130. key: cómo generar una clave única con uuid: Cuando entres a la consola, notarás de nuestra última conferencia que tenemos aquí algún tipo de advertencia. Cada niño en una lista debe tener una propiedad clave única. Bien. En primer lugar, esto es sólo una advertencia. No quiere decir que hayamos cometido un error, pero esta advertencia está aquí porque significa que nuestra lista no está optimizada para la situación en la que vamos a, por ejemplo, eliminar, agregar nuevos elementos dinámicamente. Entonces vamos a cambiar el estado de nuestro es en el futuro. Y bueno, esto es algo muy importante, sobre todo cuando la lista se hace más grande, bien, porque necesitarías actualizar toda la lista en lugar de solo un solo elemento. Entonces, aunque aquí no vas a cambiar las tareas, aunque, ya sabes, sean estáticas, creo que deberías, ya sabes, implementar lo que te voy a mostrar pronto porque la que te voy a mostrar pronto mayoría de las veces puedes la situación podría cambiar para ti, ¿verdad? Y lo segundo es que probablemente no quieras tener errores en tu consola, ¿verdad? Porque si te gusta, déjalos, ya sabes, aumentar en la cantidad, no va a ser bueno para ti. Por eso vamos a resolverlo creando algo como son propiedad, ¿de acuerdo? Pero ¿hacemos eso? Ya ves, aquí, en el ítem de la lista, podemos establecer algo como k y luego aquí teclear, por ejemplo, único. El problema con esta solución es que no es única, ¿verdad? Por eso no hemos trabajado que nos encontramos con dos niños con la misma clave, que es única, o lo que sea que tecleemos aquí, va a ser utilizada algunas veces. Y, si, eso no es lo que queríamos, ¿verdad? Y ahora necesitamos generar algo que sea único. Podría, por ejemplo, utilizar en nuestra situación porque tenemos diferentes tareas nombre, ¿verdad? Entonces hicimos algo como, por ejemplo, tarea aquí, porque, bueno, son diferentes, ¿verdad? Cada tarea es diferente y funciona bien. El problema con una solución como esta es que no podemos contar con eso porque alguien podría por error, crear dos tareas con el mismo contenido. Es por eso que en las bases de datos, cada tarea tiene muy frecuentemente algo llamado este ID, y podríamos usar esta D, por ejemplo, dentro de aquí, si el error aquí sería, por ejemplo, un diccionario con IDs o un identificador único El problema con nuestra situación es que no la tenemos. Ahora podríamos ponerlos manualmente aquí por el bien de este ejemplo. Te voy a mostrar algo lo que es solución universal que siempre va a funcionar correctamente. Y creo que pocas veces lo pude ver de otras personas que están enseñando. Entonces fíjate que tenemos modelos de paquetes, y uno de ellos se llama UUID Y cuando instalamos este paquete, podemos acceder a ellos en nuestro componente. Para poder acceder a él, necesitamos importar la función que se llama V four. Entonces desde UUID y esta función es función que ahora podemos usar en nuestro código para generar un identificador único Esto se garantiza que va a ser único, ¿verdad? Porque por lo que se recuerda, la oportunidad de hacer algo no único usando esto es como, no hay suficientes planetas en nuestro universo o algo así. Es necesario entrar en detalles para poder, ya sabes, calcular todas estas cosas. Pero sí, por nuestro bien, la situación es suficiente. Entonces simplemente decirlo ahora va a garantizar que va a funcionar. Podríamos hacer algo así y cuando nos refresquemos, como pueden ver, no tenemos error, así que todo está bien. Esto es único. El problema con esta solución es que cuando volvamos, así es que este valor único va a ser siempre diferente, ¿verdad? Entonces probablemente sería mejor, como, adjuntarlo aquí para la matriz, ¿verdad? Así podríamos transformar la matriz en, por ejemplo, diccionario. Entonces puedes llamar a algo así como tareas, diccionario esta vez, y todo lo que necesitamos hacer es acceder a las tareas y volver a usar el mapeo, ¿verdad? Entonces, cuando usamos el mapeo, queremos, como, para cada tarea, ¿hacer qué? Haz algo así como. Y queremos crear un diccionario, y este diccionario va a consistir en ID, que va a ser único, ¿verdad? Y si queremos que sea único, necesitamos asignarle el resultado de la función forma V, derecha, que la genera. Y podemos crear una propiedad, por ejemplo, texto o contenido, contenido de tarea, y vamos a llamarlo la tarea, porque realmente estamos usando esto desde aquí, ¿verdad? Sí, eso es todo. Y ahora aquí no vamos a usar tareas RA sino diccionario de tareas, lo que nos permite pasar por cada elemento del diccionario. Y esta vez, vamos a acceder a tarea, Cropca ID. Y aquí, vamos a acceder tarea, carro de cultivo que lo siento, texto. Y ahora cuando lo refresco, algo no está funcionando, pero probablemente cometí un simple error en alguna parte de aquí. Oh, sí. Aquí no tecleé constante, y ahora está funcionando bien. Entonces como puedes ver, hemos transformado array en diccionario y luego usando este diccionario, usamos ID que era como pregenerado aquí, ¿verdad Por supuesto, no es que este componente necesite hacer todas las cosas aquí, ¿verdad? Todas estas cosas podrían ser traídas de alguna parte y después de ir a buscarlas al instante, podrías adjuntar Y luego este componente para esta reproducción, solo usamos este diccionario. Estamos haciendo todo en 15 porque es más fácil aprender sobre ejemplos simples, ¿verdad? Esa es sólo la lección. Muchas gracias. 131. filter - filtrado - eliminación de elementos de la lista: Hola, amigo mío. Hoy, te mostramos cómo eliminar tareas de la lista de forma dinámica. Entonces aquí está el lugar que usamos para mostrar todo nuestro diccionario, derecho, lo que también significa que en este lugar en particular es el lugar donde queremos, como, crear un botón que me permita eliminar el elemento actual de la lista. Entonces, para hacerlo muy simple, solo vamos a crear un botón. Y llamémoslo, por ejemplo, X. Como puedes ver, no se ve bien porque estamos usando CSS desde la escala de pulso. Podrías cambiarlo más tarde porque este no es el tema de esta conferencia. Esto es bastante sencillo de hacer y puedes hacerlo como ejercicio. Pero ahora queremos hacer algo así. Cuando alguien haga clic en este botón, quiero eliminar el artículo de renta de autos. Y esto se hace cómo porque necesitamos de alguna manera, identificar esto con esto, ¿verdad? Necesitamos saber qué botón está asignado a qué elemento de la lista. Lo bueno es porque establecemos algo lo que se llama clave en la última conferencia, podemos usar esta información, bien, porque podemos, decir, Oye, cuando quieras, haz clic en esto, ¿verdad? Quiero que, como, ejecutes una función que eliminará la cubierta este artículo con este ID, ¿verdad? Entonces creo que en situación como esta, para no hacer todo en una línea, esto es un poco, creo que cosa avanzada. Vamos a tal vez, ya sabes, hacerlo, digamos, no en línea, ¿verdad? Porque hay demasiado contenido, demasiado código para esta línea para eliminar. Esto podría complicar demasiado esta línea, ¿verdad? Entonces vamos a hacer algo como hacer una función que lo haga, ¿verdad? Entonces vamos a crear una función y llamémosla, por ejemplo, manejar. Entonces vamos a manejar el evento remove task, ¿verdad? Y la sugerencia aquí es bastante genial porque aquí vamos a tener identificación, ¿verdad? Y ahora necesitamos simplemente invocar esta función aquí, ¿verdad? Entonces tenemos que decir, Oye, esta cosa va a manejar la eliminación de la tarea. Ahora cuando hago clic en él, claro, se invoca esta función, pero ahora necesitamos especificar cómo eliminamos las tareas, directamente de la pantalla Y esto es muy, muy importante. Observe que esta cosa es realmente una variable normal, derecha, que es constante. Y si quito algo de aquí, no significa que el estado de nuestro sitio va a responder a eliminarlo, ¿verdad? Porque, bueno, estamos usando react, necesitamos primero usar el diccionario state para tareas enteras, lo que significa que necesitamos cambiar esto en ¿qué? Diccionario de tareas, bien, algo así. Entonces, um, ahora mismo hay demasiadas sugerencias. Entonces necesitamos tener un derecho de gancho que conecte la función así a este diccionario, y necesitamos usar el estado, derecho, en el valor inicial. Porque ahora mismo, creamos el estado inicial para diccionario, ¿ verdad? Para diccionario de tareas. Esta es la inicial, ¿verdad? Cuando se crea el componente, estos son los valores iniciales. Ahora, vamos a poder, como, eliminar los valores aquí, ¿verdad? Pero como puedes ver, tenemos error y bueno, nada está funcionando. Es porque usamos estado, que aún no se importa, ¿verdad? Entonces tenemos que importarlo. Y sí, ahora está funcionando. Entonces este es el valor inicial, que es, como, transformado a partir de esto. Diccionario de cuatro tareas. Y ahora, debido a que este es un estado que se observa por reaccionar, podemos lo que podemos cambiarlo cuando queramos usando set task dictionary. Entonces, cuando manejamos eliminar tarea, primero necesitamos invocar el diccionario set task y luego hacer las cosas en el diccionario de tareas, ¿verdad Y la sugerencia aquí es perfecta, y te la voy a explicar ahora. Observe que hemos usado algo lo que se llama método filter. Que como su nombre indica , filtra la tarea con el ID dado. Pero, ¿cómo funciona? Verás, tenemos aquí la función de flecha, ¿verdad? ¿Y recuerdas cómo funcionaba el mapa? Era como si fuera algún tipo de bucle por dentro, cierto, eso es como hacer todas las cosas que especificamos en la función en cada elemento interior, ¿verdad? Y la función de filtro es la misma. Pero en situación de función de filtro, estamos dando aquí algún tipo de, como, condición. Entonces es así. Tenemos datos. Tenemos filtro, ¿verdad? Y luego es como elemento de datos, y luego nos gusta, crear una condición. Y ahora, este filtro es como un bucle que recorre cada elemento del diccionario y comprueba si el ID que vino de donde de aquí, ¿verdad? Aún no lo hemos enviado, entonces significa que tenemos que hacerlo, ¿verdad? Pero sí, cuando lo mandamos aquí, así que tal vez hagámoslo. Entonces tenemos que hacer algo así. Manejar eliminar tarea, y vamos a enviar aquí ID de tarea, ¿verdad? Porque queremos enviar el ID de una tarea que acabamos de crear aquí arriba, ¿verdad? Por eso vamos a conectar quitando con la clave anterior. Bien. Y ahora tenemos esta D aquí, justo de aquí, y estamos como comparando si el ID que invocó la tarea de eliminación de identificador está dentro de nuestro diccionario de tareas, ¿de acuerdo? Y si no es porque estamos usando el mercado de exclamaciones, como pueden ver No se va a quitar la tarea, ¿de acuerdo? Pero si es igual a la que acabamos de enviar, ¿de acuerdo? Entonces se va a quitar. Se va a filtrar, ¿verdad? Y ahora, como pueden ver, cuando hago clic en él, el que hicimos clic, cuando me refresco, todo está volviendo, ¿verdad Pero habitación limpia. Bien, desapareció, ¿verdad? No tenemos animaciones. Todo se ve muy mal, pero está funcionando correctamente, ¿verdad? Entonces nuevamente, filter es una función que funciona muy similar a map porque pasa por cada elemento dentro de array o diccionario, pero no ejecuta una función, pero le das algún tipo de condición de que base su acción, qué se debe hacer, ¿verdad? Y en nuestro caso, estamos comprobando si el ID que se envió aquí al click Button no es igual al que se encuentra actualmente en nuestro diccionario, ¿verdad? Y si no lo es, nos lo vamos a quedar. Vamos a crear una nueva matriz con el elemento guardado con tarea guardada, ¿verdad? Pero cuando esto se va a ejecutar y nos encontramos con ID que es igual al ID que está dentro del diccionario de tareas, ¿verdad? Entonces la función de filtro simplemente lo elimina. No va a ser honesto, no es como si lo quitara. No va a agregarse a un diccionario de tareas recién creado que lo acabamos de decir aquí. Observe que cuando retire esta parte, esto es bastante genial. Cuando hacemos algo así , cuando refresco nuestra página, notamos que no pasa nada, ¿verdad? Es porque, sí, filtro el diccionario de tareas, pero no implicamos el cambio de estado, ¿verdad? React puede cambiar el estado del diccionario de tareas al usar esta función. Y entonces necesitamos usar ese diccionario de tareas conjunto como función porque lo enganchamos a esto. Y ahora, como puedes ver, quitar es bastante limpio y fácil. 132. nuevo elemento de tarea: acceso a formularios con dom - formularios no controlados: Hola, amigo mío. Hoy vamos a crear texto de entrada que se agregará a la lista cuando hagamos clic en un botón. Entonces, ¿cómo hacemos algo así? Bueno, estamos en lista desordenada, así que creo que deberíamos poner el botón antes que él, ¿no? Y vamos a crear botón. Y llamémoslo Agregar tarea, por ejemplo, ¿verdad? Y cuando haga clic en él, quiero agregar la tarea. Eso se va a proporcionar de entrada, ¿verdad? Y este tipo de entrada va a ser texto, ¿verdad? Entonces a partir de aquí, lo que sea que ponga, quiero hacerlo aquí. Bien. Entonces, lo primero en lo que debemos pensar es, bueno, ¿cómo accedemos al clic del botón at task, derecho? Así que necesitamos simplemente usar el onClick, derecho, porque onClick es el atributo react que se ejecuta cuando se hace clic en el botón Y necesitamos invocar una función. Por ejemplo, manejar en la tarea, ¿verdad? Y tenemos que definirlo ahora. Así que maneje en la tarea. Vamos a definirlo. Y para ser honestos, la solución aquí es bastante buena. Y si, podemos conservarlo y yo le explicaré como funciona. Entonces primero, tenemos lo que es una facción de flecha, y lo segundo es que es súper importante que cuando estés cambiando el estado de lo que de nuestro diccionario de tareas, tengamos que usar el método set task dictionary, ¿verdad De lo contrario, no afectará al estado. Entonces las cosas que vemos en nuestra página correctamente. Y lo segundo que esto es genial es como un atajo para actualizar este estado. Porque ya ves, aquí tenemos algo así, gratis eso es y luego el diccionario de tareas. Esta cosa es realmente como, Oye, ampliar lo que sea que tuviéramos en el diccionario de tareas en este lugar, ¿verdad? Y luego después de eso, cuando veas aquí, como puedes ver, tenemos coma, y tenemos un nuevo valor para este objeto de diccionario de tareas, que va a ser el ID de un V cuatro recién creado generado nuestro ID único y el texto es como, ya sabes, el predefinido Entonces no es como si la pasáramos de alguna manera. Entonces por ahora cuando acabamos de golpear tarea, lo que sea que se escriba aquí, aunque no sea nada, vamos a dit, ¿verdad Ahora también podemos eliminar lo que queramos. Cuando nos refresquemos, vamos al estado inicial. Pero sí, ahora podemos agregar algo, pero no es lo que se puso en la entrada. Y ahora esto es muy importante porque para ser honestos, nos estamos moviendo hacia las conferencias respecto a cómo operar sobre formas en reaccionar. Y hay dos formas de hacerlo. Puedes hacerlo reaccionar manera que vamos a platicar en futuras conferencias, ¿verdad? O puedes hacerlo semi todo el camino. Hay beneficios de hacerlo, claro, usar la reacción porque el estado de todo va a cambiar fácilmente. Pero cuando lo vas a hacer usando el mético de reacción, también te va a costar algo de tiempo, como, escribir un código como este. Pero veamos, ¿cómo resolvemos un problema como este? Bueno, en primer lugar, tenemos que pensar en cómo accedemos al valor de esta entrada aquí, ¿verdad? Bueno, para ser honestos, podríamos usar aquí, por ejemplo, ID y llamémoslo, por ejemplo, nueva entrada de tarea, ¿verdad? Algo así, por ejemplo. Y esto significa que, sí, podemos acceder a esta identificación desde cualquier lugar que decidamos ahora, ¿verdad? Entonces significa que aquí fácilmente podríamos hacer algo como, Vamos a acceder a Document GetElement por ID Esta idea, tomemos el valor de ella, ¿verdad? Entonces ahora cuando hacemos algo así, como pueden ver, agregamos el texto que estaba aquí, ¿verdad? Y después de agregar esto, bueno , deberíamos, creo, también, sí, hacer algo así. Tan vacía la cosa que se mecanografió aquí, ¿verdad? Entonces cuando lo hacemos así, como pueden ver, ahora podemos escribir el valor aquí de nuevo, ¿verdad? Entonces esta es simple la solución más sencilla que puedes hacer, ¿verdad? Para entradas muy simples, eso podría ser suficiente. Pero, ya sabes, estamos usando react porque queremos que todo reaccione a que todo reaccione a los estados cada vez que son automáticamente, ¿verdad? No decidimos entrar en reaccionar para escribir así. Entonces en futuras conferencias, te mostraré cómo resolverlo reaccionar de manera. Eso es sólo una lección. Muchas gracias. 133. useRef: acceso/referencia al DOM: Hola, amigo mío. Hoy vamos a hablar de algo lo que se llama use ref. ¿Bien? Pero antes de entrar en este tema, me gustaría agregar a la última conferencia un poco más información sobre por qué, como, ya sabes, usar directamente documentar modelo de objetos, como hicimos aquí tampoco es bueno. Debido a que lo hicimos directamente, nos gusta pasar por alto el proceso predeterminado de actualizar el estado en nuestra aplicación React usa algo, lo que se llama modelo de objetos de documento virtual, y es como una copia de nuestro modelo de objetos de documento actual, ¿verdad? Y cuando actualice algo en este modelo virtual de jc, va a comparar lo que hay en virtual, qué hay en el que tenemos aquí, ¿verdad Entonces va a comparar los estados, y si algo cambió, entonces lo sabemos y cambiamos solo lo que necesitamos, ¿verdad? Entonces podría llegar una situación como esta conducta inesperada, ¿verdad? Porque reaccionar tal vez no sepa los cambios que hicimos directamente así, ¿verdad? Por lo que podría fallar al actualizar correctamente el usuario en la interfaz. Por lo que también puede haber problemas con re renders. Entonces esto es como un giro que debes evitar, ¿verdad? No deberías hacerlo de esta manera. Y podemos mejorarlo un poco como usar, digamos, semi reaccionar manera de acceder al modelo de objeto de documento, pero usando algo, lo que se llama use ref. ¿Cómo lo usamos? Entonces, ¿ cómo usamos ref? En primer lugar, esto es un gancho, así que tenemos que enganchar esta cosa a algo, ¿verdad? Y este algo tiene que estar en nuestro modelo de objetos de documento. Entonces, por ejemplo, en nuestra entrada, ya no necesitaremos ID, sino que tendremos solo una referencia a la que vamos a enganchar. ¿Bien? Pronto diremos cómo está, ya sabes, trabajando y qué hace exactamente. Pero primero, tenemos que engancharlo, ¿verdad? Entonces, ¿cómo lo vamos a llamar? Digamos una referencia de entrada de tarea, ¿verdad? Esto se llama ref from reference porque estás intentando acceder a él, ¿verdad? Hacer referencia a algo significa que estás tratando de acceder a él, ¿verdad Y ahora tenemos que concretar esto, bueno, gancho, ¿verdad? Entonces vamos a especificarlo, por ejemplo, aquí, y vamos a hacer, algo así, pero no vamos a um crear referencia, sino que vamos a usar referencia, algo así. ¿Bien? No necesitamos pasar por aquí ni nada, pero tenemos que introducirlo. Entonces aquí, usa referencia, ¿verdad? Y sí, acabamos de enganchar, así que conectamos esta variable. Para referirse a este insumo, ¿verdad? Y en términos simples, use reference le permite crear una referencia persistente a un objeto de elemento de documento, o valor, y permanece igual en todos los randoms Es muy importante porque no provoca el componente se renderiza cuando cambia el valor. Cuando ocurre el estado de uso, justo cuando algo cambia, una cosa está enganchada a otra, el reender sucederá En este caso, no, por ejemplo, cuando hemos asignado a un campo de entrada algo así, y lo enganchamos aquí, nos da acceso directo para interactuar con el campo de entrada, como por ejemplo, obtener o establecer su valor sin necesidad de usar el estado react. Entonces, en definitiva, es como decir, Oye, ¿ recuerdas este elemento del modelo de objeto de documento, verdad? Entonces esta cosa o tal vez valor. Déjame acceder a él siempre que lo necesite, pero no hagas que el componente se actualice porque. Entonces esta cosa es buena, mejor que acceder a ella directamente porque funciona dentro del ciclo de vida de reacción y ecosistema, ¿verdad? Entonces mantiene la lógica de los componentes consistente con el enfoque de Rx, ¿verdad? Sigue los principios de reaccionar, ¿verdad? Entonces primero, informamos a cualquiera que, sí, estamos usando el acceso directo en este caso, ¿verdad? Hay algún tipo de optimizaciones detrás de escena, ¿verdad? Y tan bien, más importante también es que cuando a renderiza el componente, cuando los estados o props cambian de componentes enteros, así por ejemplo, lista de tareas, derecho, la referencia como esta no se va a perder, ¿verdad Entonces mantiene por eso dije antes que mantiene una referencia persistente al del objeto documento así que esto es como la forma de reaccionar de hacer esto. Y después de que lo hagamos referencia, significa que, sí, ahora podemos acceder a él en cualquier lugar aquí, derecho, en este componente, lista de tareas. Entonces en nuestro caso, en lugar de cambiar el texto de esta manera, bien, podemos, por ejemplo, entrar en la tarea handle, right, y crear, por ejemplo, una variable como esta. Entonces estamos creando una variable que se llama nueva tarea, y estamos haciendo referencia a la referencia de entrada de tarea, que se cocina aquí, ¿verdad? Y estamos accediendo desde él valor actual que está en la entrada, ¿de acuerdo? Y ahora esta cosa la podemos usar para actualizar, por ejemplo, el texto, ¿verdad? O podemos usarlo también después para ponerlo en nada, ¿ verdad? ¿Necesitamos esta variable? Realmente depende del gusto de cómo escribes código, ¿verdad? Porque, claro, podríamos escribirlo también de esta manera y todo también va a estar bien. Realmente depende de cómo se vaya a expandir tu código más tarde, correcto, cuántas veces lo vas a usar. Pero esta cosa, sí resolvió nuestro problema. Como puedes ver, sí, ahora podemos agregar nuevos valores. Todo está funcionando a la perfección. Entonces, esta es la forma acceder directamente a las cosas desde su objeto de documento, pero usando el ecosistema de reaccionar. ¿Bien? Entonces eso es lo que hay que recordar de esta conferencia. En la próxima conferencia, te mostraré cómo hacer cosas así, usando la forma de reaccionar de hacer las cosas. 134. onChange: entradas controladas en React: Hola, amigo mío. Hoy aprenderemos sobre algo, lo que se llama cambio, y aprenderemos sobre cómo crear formas que se llaman formas estatales administradas. ¿Bien? Entonces significa que el estado de las formas entonces cómo cambian los valores dentro de nuestra forma es manejado totalmente por reaccionar, ¿verdad? Entonces, para incluso hacerlo, necesitamos en primer lugar crear un estado para cada nueva tarea. ¿Bien? Entonces cuando vayamos aquí, en lugar de usar referencia, vamos a crear una variable constante que vamos a llamar nueva tarea, bien. Vamos a crear una tarea establecida, nueva tarea, derecho, y el valor predeterminado para eso, puede ser como un objeto vacío, ¿verdad? Entonces esto es como algo que va a almacenar nuevo valor de tarea que se va a insertar más tarde en el diccionario de tareas, ¿verdad? Y ahora necesitamos cambiar esto cada vez que se ponga algo en, cuando se ponga en la entrada. Entonces en vez de referirlo así aquí, ahora vamos a acceder a algo lo que se llama cambio, que es como algo que se ejecuta por sí mismo, bien, cuando el estado, cuando el valor de la entrada es cambiado, bien, por el usuario Y aquí como puedes ver, la sugerencia aquí es perfecta. ¿Por qué? Es perfecto porque tenemos una función RO que por defecto toma evento, porque cuando ocurrió el evento como sin cambios, tenemos objeto de evento al que podemos acceder. Y dentro de ese objeto de evento, tenemos propiedad como target y value. Y esta cosa es como almacenar lo que pongamos aquí en nuestra entrada. Así que cada vez que pongo un nuevo personaje aquí, quiero invocar la nueva tarea establecida, bien, que está enganchada a una nueva tarea Y lo cambiamos al nuevo valor que fue puesto por el usuario aquí, ¿verdad? Entonces cada vez que hay un cambio aquí, quiero cambiar el estado de nueva tarea. Y por eso, bueno, ahora estamos teniendo reaccionar estado gestionado del texto dentro de nuestra entrada. Cada vez que alguien pone aquí algo, se cambia el estado de la nueva tarea, anuncio automático, lo que significa que ahora podemos acceder a esto en cualquier momento que queramos, por ejemplo, no quiero acceder al valor dentro del mango en la tarea. Vamos a acceder a él. Hacer cuando quiero vaciar después de usarlo, bueno, necesitamos usar set new task, ¿verdad? Porque recuerda, no accedemos a algo así nunca directamente cuando está enganchado, ¿verdad? Entonces ahora cuando agrego una nueva tarea, puedes ver que se está agregando, pero aquí no cambiamos el estado. ¿Por qué es eso así? Es porque el valor de nuestro insumo no está fijado a qué tarea nueva, ¿verdad? Por eso necesitamos cambiar el valor a una nueva tarea. Entonces ahora, el valor actual también está siguiendo lo que sea que se esté haciendo a partir de la facción de componentes de reacción, ¿verdad? Antes lo hicimos de una manera, ¿verdad? Entonces cuando algo cambió aquí manualmente por el usuario, bueno, cambiamos el valor de la nueva tarea, ¿verdad? Y después cuando cambiamos la nueva tarea establecida a vacía, sí, lo hicimos, pero no cambiamos el valor de entrada, ¿verdad? Acabamos de cambiar lo que se sostiene dentro del nuevo estado de tarea. Eso es todo. No cambiamos el valor de ello aquí porque no era como que lo hizo para ser cambiado por reaccionar, ¿verdad? Tenemos que decir que, oye, el valor ahora es igual a nueva tarea siempre. Y por eso, ahora cuando agrego una nueva tarea, como pueden ver, nuestra entrada también está vacía. Entonces esta es la solución que ahora es como una onda pro react, ¿verdad? Tenemos una forma gestionada por reaccionar cada vez que algo cambia del código, aquí mismo, o esto reaccionará por este estado. Me gusta usar el nombre de reactor porque muestra por qué también se llama como es, ¿verdad? Reacciona automáticamente a los cambios. Entonces por eso, no necesitas pensar más tarde cuando implementas el componente, cuando cambias el estado usando la nueva tarea establecida en alguna parte, no te importa actualizar el valor, por ejemplo, aquí. Sabes que sólo va a pasar, ¿verdad? Y, ya sabes, los componentes pueden compartir los estados, ¿verdad? Incluso se puede, por ejemplo, en el futuro, aprender de algo lo que se llama bibliotecas de estados gestionados. Y lo genial de la solución así es que ahora es universal, ¿verdad? Significa que no importa donde cambies el estado, reaccionas bien reaccionas en consecuencia a lo que acaba de suceder. Esa es sólo la lección. Muchas gracias. 135. onSubmit: ¿cómo crear formularios en React?: Hola, amigos míos. Actualmente, cuando escribimos algo y tenía entrar, ¿qué está pasando? Nada. Es porque la entrada no es como, ya sabes, conectada a este botón. Esta etiqueta HTML no es como nada a esta entrada, ¿verdad? Realmente conectamos todo aquí, ¿verdad? Después de que alguien invocó esto, invocamos esto y esto, Pero para ser honestos, normalmente, cuando estás creando formularios, quieres tener una característica como, por ejemplo, cuando alguien pulsa entra, entonces el botón como este, por ejemplo, es el botón que invoca la sumisión, ¿verdad Envía los datos aquí y se agregan los datos. Podrías, por supuesto, ya sabes, hacer que tu aplicación sea como detectar, entrar, y luego reaccionar ante ella, ¿verdad? Pero esta implementación de cosas que ya están implementadas dentro de HTML no es necesario en situaciones como esa, ¿verdad? Entonces, tal vez cambiemos esto a una forma, ¿verdad? Tenemos forma HTML que normalmente quiere acción pero en nuestra situación, cuando estamos usando react, ok, tenemos algo lo que se llama submit event, ok? Eso se va a invocar cuando alguien bien, remita este formulario, Así que ahora mismo, podemos simplemente trasladar esto a este lugar, ¿verdad? Así que vamos a manejar en la tarea ahora mismo usando formulario, no usando botones. Para que podamos eliminar esto. Pero fíjate que ahora, cuando le pego a la tarea, bueno, pasa algo, es porque el tipo de botón es por defecto enviar, ¿de acuerdo? Pero es buena idea, ya sabes, especificar que este botón es para enviar. Entonces sé que este botón va a ser invocado cuando alguien golpee Enter, ¿verdad Y ahora hay un problema porque sea lo que escriba, podemos ver que algo está tratando de aparecer aquí. Y cuando le pegué a Attas también, pero es como que todo es refrescante, ¿verdad? Y, para ser honestos, sí, esto es lo que pasa porque por defecto, forma está funcionando de esta manera que cuando se envía el formulario, vamos a, como, um, poner a alguien en otro lugar donde está el siguiente paso de esta forma, ¿verdad? Entonces, por ejemplo, vamos a mostrar una receta o vamos a mostrar la mancha de la orden o algo así Pero en nuestro caso, queremos quedarnos en este lugar en particular. Y para poder permanecer en este lugar en particular, cuando ocurre el evento como Oso Bid, invocamos manejar en la tarea, ¿verdad? Y manejar en la tarea tiene algo, lo que se llama un evento, ¿bien? Yo hice algo por error. Tiene evento el objeto que viene aquí automáticamente, y tiene toda la información respecto a lo que invocó este evento, ¿verdad Y podemos, como puedes ver la sugerencia aquí, hacer algo como evitar el comportamiento predeterminado del evento submit desde el formulario, que es, ya sabes, refrescar la página. Si no lo hace, ya sabe, especifique la página donde vamos a enviar al usuario, la página por defecto es la misma página. Entonces solo evitamos el comportamiento por defecto, ¿verdad? Entonces ahora cuando tecleamos algo aquí, como pueden ver, estamos agregando un nuevo elemento al final, ¿verdad? También podemos presionar el botón y también va a funcionar, pero no vamos a ser trasladados a otro sitio web. Por lo que tuvimos que evitar el comportamiento predeterminado del evento que se produce al enviar el formulario. Y sí, ahora mismo, acabamos de implementar bastante fácil qué acción de agregar usando Enter, ¿verdad? No necesitábamos hacer todas estas cosas manualmente. Observe también que ahora mismo podemos agregar una entrada vacía. Y creo que algo así debería prevenirse, ¿verdad? Entonces, ¿cómo evitamos algo así? Entonces podríamos hacer algo así. Me gusta la sugerencia aquí porque alguna manera manejó la IA logró, como, saber lo que estoy pensando. Entonces ahora, como pueden ver, cuando no hay nada, cierto, no se va a agregar. Así que acabamos de comparar nueva tarea, por lo que el valor de la entrada. A la nada. Si no es nada, no vamos a invocar el resto del código porque cuando se cumpla la declaración escrita, recuerda que el JavaScript es como vivir esta función al instante, ¿verdad Entonces el resto del código no va a ser invocado en absoluto Así es como lo hicimos, ¿verdad? 136. [EJERCICIO] useRef - ejemplo práctico - refocus: Hola, amigo mío. Actualmente, cuando tecleemos algo aquí, ¿qué va a pasar cuando golpee Enter? Observe que el foco está volviendo aquí. Es porque este es el último insumo que hemos utilizado. Pero, ¿qué pasará cuando escriba algo y golpee manualmente en la tarea? Como puedes ver, nuestro usuario necesita ahora hacer clic manualmente aquí, lo que le va a llevar algún tiempo, ¿verdad? Si es como, Bien, necesito agregar otro y otro, ¿verdad? Siempre debemos mejorar la experiencia del usuario. El comportamiento por defecto, creo, debería ser como, Bien, volvamos aquí y hagamos que esta entrada se centre de nuevo. La pregunta es, ¿cómo hacemos esas cosas, verdad? Tenemos un problema porque ¿cómo nos referimos a la entrada? Este es un ejemplo práctico sobre cuándo debes usar qué atributo, atributo J aquí, ¿verdad? Y podemos llamarlo, por ejemplo, input task reference, derecho, y tenemos que definirlo también, ¿verdad? Entonces aquí en la cima, deberíamos hacer algo así. Constante entrada de texto, referencia, y necesitamos usar ref. El valor por defecto para ello porque aquí se puede enviar también se va a conocer un valor predeterminado. Entonces ahora usando esto, podemos acceder a nuestra entrada una vez que queramos. Pero la pregunta es, ¿cómo nos gusta reenfocar la entrada aquí Bien, entonces cuando se invoca el asa en la tarea, este es el momento en que queremos, reenfocarnos, Entonces significa que debería suceder en este lugar, ¿verdad? Entonces después de evitar el comportamiento por defecto, debemos reenfocarnos, ¿verdad? Entonces creo que en este lugar, deberíamos acceder a nuestra referencia de tareas de entrada, y ahora acceder a la referencia actual. Y fíjate que después de eso aquí, tenemos aquí un método que se llama focus, cual solo va a reenfocarlo a esta entrada Entonces ahora cuando hago algo así, note que siempre el enfoque está aquí, ¿verdad? Así que siempre vuelve a este lugar, ¿verdad? Además, si quieres hacer un foco en el auto cuando se carga nuestra página, bien, porque estoy refrescando en segundo plano, bien, entonces podrías usar esto, pero no, eso no es una buena idea porque ¿por qué crear un código para eso cuando tenemos un buen atributo para la situación específica así? Así se llama enfoque automático, ¿verdad? Entonces cuando añades atributo así, ahora cuando me refresco como puedes ver, el foco está automáticamente aquí. Pero recuerda, esta cosa funciona cuando funciona cuando se carga la página, ¿verdad? Como puedes ver ahora, no está funcionando, ¿verdad? Entonces esto es la primera vez que alguien como carga nuestra aplicación. Pero después, si quieres enfocarte en alguna parte de tu aplicación después de algún tipo de acción como, por ejemplo, evento de manejo del anuncio de tarea, ¿verdad? Entonces hay que hacerlo manualmente. Entonces podemos ver claramente ahora que sí, hay situación en la que necesitas usar el atributo use ref y ref, ¿verdad? Porque el estado en esta situación sería como ambos. ¿Qué debemos hacer con el Estado en este caso? Incluso sería como sabes, esto sería estúpido usarlo aquí, ¿verdad? No necesitamos compartir el estado de enfoque para toda nuestra aplicación, ¿verdad? Entonces hay situación en la que se quiere usar sref, no sólo para la optimización, sino también para algo sencillo como eso, ¿verdad No es que esto exista solo para permitir cosas que son como, fuera de, ya sabes, para personas que no están siguiendo reglas, ¿verdad? Bien, esa es sólo la lección. Muchas gracias. 137. sort(): ¿cómo ordenar una lista?: Para ordenar nuestras tareas actualizadas, necesitamos invocar una función que se llama sort Y como puedes ver, tenemos aquí ahora una sugerencia de IA que te permitimos ordenar por algo lo que se llama IDs, ¿verdad? Pero esto no es lo que queremos, ¿verdad? Queremos ordenar no por ID, bien, pero queremos ordenar por texto porque tenemos aquí el ID y el texto adecuados. Entonces, en vez de esto, queremos hacer esto. Ahora cuando agregamos aquí un nuevo valor, como se puede ver, porque empezó con A, es un di inicio. Entonces tenemos A, B, CD. Entonces todo funciona como habíamos querido, cuando ponemos algo como esto, como pueden ver, está funcionando bien. La pregunta es por qué está funcionando bien. Entonces ahora te revelaré un secreto de cómo trabajo con la clasificación. Podrías ser como, Bien, tengo que entender lo que está pasando en el fondo aquí, ¿verdad? Pero para ser honesto, realmente preferiría que hubiera una función como esa. Quiero ordenar todo por orden ascendente, y me gustaría ordenarlo por el valor del texto de propiedad de aquí. Eso es todo, ¿verdad? Eso sería genial, ¿verdad? Y para ser honestos, cuando leerías esto, estaría bien, esto es comprensible. Entonces estamos ahora mismo en la era de la inteligencia artificial. Así que perder tu valioso tiempo para entender por qué este lugar en particular se ve así, y va a verse un poco diferente para, sabes, ordenar diferentes formas porque hay muchas formas de clasificar, ¿verdad? Por favor, no lo hagas. Tener como la vida, ¿verdad? Porque si decido ordenar ahora en orden mundial descendente, por ejemplo, voy a hacer justamente así. Así que acabo de invocar mi inteligencia artificial con el uso de Control plus I, y estoy como, quiero ordenarla en orden descendente Bien, entonces necesito simplemente poner primero B y luego A. Así que ahora, como pueden ver, cuando pongo algo aquí, esto es ahora orden descendente, ¿verdad? ¿Tengo que recordarlo? ¿Tengo que entenderlo? Esto no es como súper crucial para hacer resultado de crear un programa funcional, ¿verdad? Tú como programador deberías entender más bien cosas como la lógica, cómo se pone todo uno tras otro, por qué deberías optimizar a veces o tal vez no. ¿Cuáles son las formas de crear un código que desorganizó y así sucesivamente Tienes una idea que quieres implementar, ¿verdad? Entonces ordenas ahora mismo a la inteligencia artificial, ¿qué se debe hacer en un lugar específico como este? ¿Por qué siquiera molestarse en entender esta parte exactamente, verdad? Entonces este es mi secreto para ti porque para ser honesto, veces me olvido de cosas así. Podría ser porque tengo TDAH. Pero llevo más de 20 años programando, créeme. Y aunque yo, ya sabes, lo hice antes sin IA, a veces uso TGOflow A veces uso Goo bien porque estaba como, Esto es algo aburrido. Ya lo aprendí una vez, pero no lo he usado, por ejemplo, por, no lo sé, un mes y estoy como, Bien, entonces necesito hacerlo de nuevo. Yo estoy como, no recuerdo exactamente si en este lenguaje de programación en particular, se debe hacer de esta manera o de esta manera, porque lo más estúpido es que cada implementación de clasificación va a ser diferente para un lenguaje diferente A esta cosa se le va a llamar diferente. Esta cosa podría ser el acceso de manera diferente. Aquí pueden haber distintas invocaciones. Entonces es como si fuera un programador que está saltando entre lenguajes, por ejemplo, correcto pero para ser honesto, no me importa qué tipo de lenguaje estoy usando porque puedo, como, encajar en cualquier lenguaje de programación al instante porque todos son iguales para mí. Por cómo está funcionando mi mente, ¿verdad? Porque no me importa exactamente cómo se hace esta parte en el fondo, ¿verdad? Pero solo quiero tener un efecto que esté trabajando en consecuencia a lo que quiero, ¿verdad? Esta es una información muy crucial, sobre todo hoy en día porque algunas personas van a perder tu valioso tiempo entendiendo partes como esta, ¿de acuerdo? Y, no, esta es la vieja manera tal vez solía necesitar saber cosas así. Pero hoy en día, ¿en serio? Es que necesitarías, como, memorizarlo o entenderlo, y perderías, por ejemplo, 1 hora, tal vez 2 horas para esta parte, y si no la has usado desde hace algún tiempo, entonces vas a olvidarla de nuevo y simplemente estarás confundida ¿Por qué hay tantas cosas que memorizar, verdad? Entonces sé que esta conferencia no debería ser tan larga, pero realmente siento que la gente no se mueve con el tiempo con lo que está pasando actualmente en el mundo, ¿verdad? Entonces sí, hay que entender todo lo que he dicho en este curso hasta el momento, para saber cómo desarrollar aplicaciones. Pero partes así, por favor, esta es una solución instantánea de cualquier modelo de IA. Esa es sólo la lección. Muchas gracias. 138. [EJERCICIO] Cómo crear botones de ordenación asc/desc: Hola, amigo mío. El día de hoy haremos un botón de alternancia que alternamos el estado de clasificación para nuestra lista. Y segundo, cuando piensas en estado, entonces cuando dices, Bien, quiero cambiar el estado de algo, significa que estamos creando lo que es una conexión, un gancho en re. ¿Correcto? Entonces el primer paso para nosotros va a ser crear una variable constante a la que vamos a llamar sort direction, y necesitamos para ello un setter Y si, el comportamiento por defecto, que se le pida desde ascendente, ¿verdad? Vamos a, como, cambiar entre. Preguntar y entre el modo de envío. Lo siguiente es que necesitamos crear un botón que vaya a representar la lucha. Entonces necesitamos crear un botón para esto. Como puedes ver, la sugerencia aquí es perfecta. Por eso me gusta usar autocompletar como el que tenemos aquí Entonces es como hacer una condición en su interior. Eso comprueba el estado actual de dirección de ordenación porque el estado actual es preguntar, correcto, porque ese es el valor init Vamos a poner aquí descendiendo en texto aquí, ¿ verdad? De lo contrario, ascendiendo. Entonces va a cambiar justo cuando haga clic en él. Por supuesto, tenemos que manejarlo, pero sólo va a cambiar. Bien. Entonces esta es una llamada, pero tenemos que manejarla ahora. Entonces al hacer clic, ¿necesitamos invocar qué? La función handle sort que necesitamos especificar ahora. Bien, entonces se va a especificar aquí manejar sort. ¿Bien? Voy a completar así. Y ahora es el momento de ordenar las cosas. Podríamos hacerlo como nos sugiere, pero voy a mostrarte algo genial. Entonces en primer lugar, voy a crear unas tareas ordenadas, área temporal. ¿Bien? Y ahora podemos ver un problema que se muestra sólo a las personas que entienden lo que está pasando. Como pueden ver, la primera sugerencia es así. ¿Está bien? O tal vez deberíamos hacerlo como la segunda sugerencia. Normal con gente que no entiende el trasfondo podría simplemente golpear para arriba. Todo está funcionando bien, ¿verdad? Pero no, no, no. Hay algunos conceptos que debes entender detrás de escena como desarrollador de reaccionar, ¿como qué? ¿Por qué esto está mal? Podrías estar pensando. Porque la función SORT realmente está afectando el estado original de quién de algo que está enganchado a establecer diccionario de tareas, porque SRT está trabajando en el original como matriz, ¿verdad Y va a reemplazarlo. ¿Bien? Esa es la diferencia. Aquí, podríamos hacerlo porque estamos trabajando en una tarea temporal actualizada. No trabajamos en la matriz de dicción de tareas, ¿verdad? Pero aquí, no podemos hacer algo así porque recuerda, puedes cambiar y reaccionar tu estado enganchado solo usando el método que aquí se especifica. Por eso necesitamos usar la segunda sugerencia, que primero haga una copia de la misma. Esta cosa de aquí es realmente extraer todo el diccionario fiscal y crear una copia aquí, y luego estamos ordenando una copia. Esto es muy importante, totalmente diferente a, de lo que teníamos antes. Veamos si también hay algunas otras formas de ordenar porque puedes ver fácilmente las sugerencias aquí. Pero bueno, para ser honestos, esto es lo que podemos hacer de todas estas maneras, ¿verdad? Pero creo que primero debemos hacer, como, comprobar si queremos que sea ascendente o no. Oh, sí, esta es la solución que me gusta. Entonces si tenemos ascendente, entonces vamos a hacerlo de esta manera. De lo contrario, queremos cambiar, bien, porque estamos cambiando A a B, B a A, y creo que esto va a ser genial. Entonces esta cosa es ahora algo que queremos establecer aquí, establecer el diccionario de tareas, ¿verdad? Y también, sí, queremos establecer la dirección de ordenación. Queremos, como, revertirlo. Como puedes ver, este autocompletar con una persona que también sabe codificar, bien, es bastante impresionante, cierto, porque te permite como detectar dónde están los errores, si entiendes el proceso, pero también usas la IA para tu ventaja, ¿verdad Entonces creo que esto es bastante impresionante. 139. ¿Por qué refactorizamos el código? ¿Cómo hacerlo? Un truco para hacerlo más rápido: Hola, amigos míos. Hoy vamos a hablar de refactorización, por lo que cambiar la organización de nuestro código Porque, para ser honesto, mira, tenemos toda la aplicación dentro de una función en este momento. Y dentro de él, el componente es responsable ahora mismo de tantas cosas, como, por ejemplo, de agregar nuevas tareas, como ordenar, para mostrar elementos. Eso es demasiado, ¿de acuerdo? No es así como deberíamos escribir programas en reaccionar. ¿Por qué? Porque, bueno, ahora mismo, no podemos arreglar el formulario sin tocar la lista, por ejemplo, ¿verdad? Estamos como, ¿Dónde está eso? Es como si todo estuviera en un solo lugar, ¿verdad? Entonces no es como que podamos arreglar una pieza de, por ejemplo, ego, ¿verdad? Tenemos que reconstruirlo todo porque todo está en un solo lugar. No hay un solo programa que pueda enfocarse en esto, el segundo en esto. No es como si estuvieras mirando la única cosa y bien, esto está aquí, esto está aquí, entonces esto está aquí. Como pueden ver, ahora mismo, tenemos tantos estados aquí, tantas funciones, y también aquí, está un poco desordenado, Entonces tampoco es fácil reutilizar nuestras piezas en otro lugar, ¿verdad? Si hubiéramos decidido, como, por ejemplo, poder mostrar el elemento de tarea en otra lista como esta, entonces tendríamos que reescribir nuestro código, por ejemplo, ¿verdad? Y es por eso que deberías dividir los componentes que son grandes en componentes más pequeños. Esa es una de las razones, ¿de acuerdo? Hablaremos de eso más tarde también cuando terminemos de dividirlo, ¿de acuerdo? Pero esta es, creo, la más crucial primera vista. Entonces, ¿cómo dividimos las cosas así? Tenemos dos formas de hacerlo. Y vamos a dividir primero algo lo que creo que va a ser lo más fácil de dividir, ¿de acuerdo? Y creo que vamos a empezar desde el botón de ordenar, ¿de acuerdo? Así que de esta cosa, ¿de acuerdo? Quiero dividir esto en un componente. Entonces, ¿qué hago? Bueno, creo que vamos a crear un componente en el futuro al que vamos a llamar botón de ordenación, por ejemplo, ¿verdad? Entonces esta cosa va a ser responsable botón de ordenar, ¿de acuerdo? Y dentro del botón de ordenar, pero esto va a ser así. Así que solo quiero tener botón de ordenación aquí. Y necesitamos, como, enviar la dirección desde el codio el autocompletado estaba justo aquí Entonces queremos mandar dirección de clasificación, ¿verdad? Y necesitamos también, sí, especificar qué debe pasar cuando se produce el tipo, ¿verdad? Entonces necesitamos enviar una función al tipo prop. Así que fíjense que tenemos dirección y ordenación. Y estos son los accesorios correctos. Hemos hablado de ellos hace mucho tiempo, ¿verdad? Para que puedas enviar cualquier estado, derecho, dos componentes diferentes. Y además, como puedes ver, puedes enviar una función al componente, ¿verdad? Bien. Y después de que enviemos esto y esto, necesitamos, como, ya sabes, decidir qué hacer y qué mostrar, ¿verdad? Entonces lo que hacemos aquí, vamos a hacer ahora mismo estamos dentro de nuestro fondo tipo. Y ahora tenemos dos cosas que podemos hacer. Podemos crear un archivo separado para ordenar botón, o podemos crear un componente arriba aquí para ordenar botón. Y ahora te voy a decir qué camino es mejor y cuándo. Casi siempre empiezo a empezar a crear cosas como esta dentro del mismo componente que contiene componentes que están conectados entre sí. ¿Bien? Y la sugerencia aquí es perfecta porque estamos creando una función, ¿verdad? Eso toma dos propiedades, ordenar dirección y ordenar, y ahora podemos hacer las cosas con eso. ¿Y por qué hago eso siempre aquí? Lo hago aquí porque a veces los componentes nunca serán reutilizados, ¿de acuerdo? Esto puede suceder, y para ser honesto, es muy a menudo cuando sucede. Y ahora imagina que tu aplicación es muy grande. Y si decides crear un componente para totalmente cada cosa similar posible en tu aplicación, tu sistema Pi aquí va a ser difícil de mantener, ¿verdad? Entonces esto es desventaja. Y además de esto, siempre que vayas a, como, ya sabes, querer buscar el código que está conectado al componente que va a contener, como, por ejemplo, tarea es, otros componentes. Hay que saltar entre FIS y para ser honestos, me parece improductivo, Pero si estás trabajando en un proyecto muy grande con mucha gente, entonces tal vez este es el camino a seguir. Pero la mayoría de las veces, no hay necesidad de dividirlo en PI a menos que veas la posibilidad como, Bien, tengo que tener este botón de ordenación en otro componente porque tengo botones de ordenación para muchas cosas diferentes, por ejemplo, ¿verdad Entonces, sí, hazlo instantáneamente. De lo contrario, mantenlo en 15 porque también, me gustaría agregar que, ya sabe, si decide que esto tiene que estar en archivo separado, ¿cuánto tiempo tardará? Solo necesitas llevar el código de aquí a otro archivo y éste en archivo separado. Ahora puedes reducir este componente en cualquier lugar. Entonces esta es la forma en que hago las cosas. Realmente depende de la compañía. Hay que seguir las reglas ahí. Pero si estás auto desarrollando cosas, creo que si decides crear un archivo diferente para cada componente total por si acaso, entonces solo vas a perder mucho de tu precioso tiempo, ¿verdad? Esto simplemente no es necesario. Bien, entonces ahora tenemos un componente aquí, ¿no? Y para ser honestos, ahora tenemos que hacer lo que hicimos antes. Entonces, antes hicimos algo así, ¿verdad? Pero porque lo copié de aquí, ¿verdad? Pero en lugar de usar el like handle sort directamente porque no tenemos acceso a él desde esta función en particular, ¿verdad? Tenemos que hacer qué? Necesitamos, como, usar la función que se envió aquí. El nombre de este utilería es el mismo que antes, así que solo podemos conservarlo. Y nuestro código debería estar funcionando ahora, pero como pueden ver, no podemos ver el botón. Es porque note que aquí usamos JSX, pero no lo hemos devuelto, ¿verdad Así que tenemos que devolver lo que sea que hicimos aquí, ¿verdad? Ahora, como puedes ver, podemos usar nuestro código como antes, pero hemos dividido un solo componente Y ahora te muestro algún tipo de atajo para escribir este componente, ¿de acuerdo? Porque hay una manera de, como, no tener que regresar para componentes simples como ese JSX Todo lo que necesitas hacer es simplemente eliminar esta parte, y en lugar de usar corchetes aquí, vamos a usar solo paréntesis Y como pueden ver, sigue funcionando bien, ¿verdad? Esto es como una versión corta. Creo que es bastante genial porque bueno, escribir return y luego agregar paréntesis, también lleva tiempo Me gustan las versiones cortas también más fáciles de leer para una situación como esta. Eso está en la lección. En las próximas conferencias, te mostraré cómo dividir los componentes otros componentes, y también podrías intentar hacerlo por tu cuenta, verdad, para ejercitarte. 140. [EJERCICIO] - Componente de elemento de tarea de refactorización: Hola, amigo mío. Hoy es un ejercicio que puedes intentar hacer por tu cuenta. Quiero que dividas esta parte de tu código en otro componente que va a llamar elemento de tarea, y será responsable de manejar la representación de una tarea individual, ¿verdad? Porque la lista de tareas es como un componente que administra todos los mini componentes en este momento. Pero el elemento de tarea es responsable de solo mostrar los elementos de la tarea. Posteriormente podrías, por ejemplo, reutilizar este componente si así lo decides en lista diferente, por ejemplo. Entonces podrías crear este un componente separado o dentro del componente de lista de tareas en este momento, y en el futuro, podrías ponerlo en otra fase. Así lo haces, como dije, área en la conferencia anterior. Pero por ahora, intenta simplemente dividirlo. Te voy a mostrar cómo hacerlo. Pero trata de hacerlo por tu cuenta porque este es un gran ejercicio. Entonces, ¿cómo abordo el problema así? En primer lugar, podemos ordenar lo que tenemos aquí, tener, como, ya sabes, para ver lo que teníamos antes, ¿verdad? Y ahora lo que tenemos que hacer. Necesitamos, como, crear un componente, así que eso se va a llamar ítem de tarea, ¿verdad? Y tenemos que decidir qué enviarle. Sí, necesitamos una llave porque sin llave, no podremos identificar artículos específicos. Necesitamos tarea, y también necesitamos enviar una función para eliminar tarea específica, ¿verdad? Y todas las demás cosas como task ID task va a estar dentro del elemento de tarea ahora, así que podemos usar fácilmente toda la información entonces para hacer esta parte aquí. Así que descoméntalo, córtalo, y tenemos listo el uso del componente aquí, pero aún no lo hemos usado Observe que también que la clave no es lo que hemos enviado al componente de elemento de tarea. Esto es lo que hemos enviado como sondas, pero key es solo una propiedad. No se trata de sondas. Es un atributo que se utiliza en react para especificar la clave, la singularidad para el elemento específico, como, por ejemplo, elemento de tarea o forma o cualquier otra cosa, ¿verdad Entonces esto no fue enviado al ítem de tarea. Es como, oye, especificamos la clave aquí, pero aquí tenemos el resto, ¿verdad? Bien. Y ahora creo que hagamos como hacíamos antes. Entonces vamos a especificar nuestro elemento de tarea dentro. Entonces, todo lo que tenemos que hacer es crear un elemento de tarea, ¿verdad? Y si, la sugerencia aquí es buena porque la A vi que decidimos usar la sintaxis de la P conferencia anterior, y necesitamos ahora pegar lo que teníamos antes, bien, así. Y ahora la tarea ya se usa correctamente aquí, pero no necesitamos establecer la clave ahora mismo porque la clave se configuró antes, ¿verdad? Entonces la clave no es necesaria aquí. Y sí, tenemos texto mostrado y después, tenemos un patrón que al hacer clic invoca función de eliminar con ID de tarea viniendo de aquí, ¿verdad Y ahora cuando vamos aquí, como pueden ver, cuando agregamos una tarea, cuando la quitamos, algo no está funcionando. ¿Por qué es eso? Abramos la consola, clic aquí y veamos el mensaje de error. Como puedes ver, dice que remove no es una función al onclick, y es cierto porque la llamamos aquí n remove task Entonces tal vez vamos a cambiarlo para quitarlo. Y ahora, como pueden ver, está funcionando como antes, como se pretendía, ¿verdad? Para dividir componentes, todo lo que necesitas recordar es sobre lo que necesitas enviarles, ¿verdad? Qué tipo de utilería. Y luego simplemente exhibir lo que mostraran antes. 141. REFACTOR: TaskForm: Hola, amigo mío. Hoy, vamos a dividir algo lo que se llama una forma en otro componente. Entonces vamos a hacer que un nuevo componente sea responsable usando el único responsable pre simple para manejar solo la lógica de entrada de formularios y sumisión, ¿verdad? Entonces esta parte de nuestro código quiere ser trasladada a otro componente. ¿Cómo abordarlo? Bueno, necesitamos crear un nuevo componente. Digamos que vamos a llamarlo formulario de tarea, bien, así. Y tenemos que decidir ahora qué enviar a este formulario de tareas porque ves, hay un problema. El problema es que realmente estamos usando una función, como, por ejemplo, manejar en la tarea. Eso es trabajar en establecer diccionario de tareas, establecer nueva tarea. Está trabajando en la referencia de tareas de entrada. Guau, esto también es algo así como estamos trabajando en algo que está dentro de esta forma, ¿verdad? Entonces esto va a ser un poco diferente. Así que quédate conmigo. Así que vamos a eliminar esto y el enfoque que vamos a tomar en esto es, vamos a crear un accesorio, bien, que vamos a llamar manejar en la tarea. No vamos a hacer se sugirió aquí, sino que sólo vamos a crear asa en la tarea. Así que lo único que vamos a enviar en nuestra situación va a ser esta función aquí, ¿de acuerdo? Nada más. Y en base a eso, tenemos que decidir cómo escribir bien, nuestro nuevo componente, ¿verdad? Así que vamos aquí y vamos a escribir formulario de tarea, ¿verdad? Y, sí, es igual, ¿lo llamamos a las? No, lo llamamos de manera diferente en la tarea AT. Así. Y, ya sabes, el problema es que ahora necesitamos usar llaves. Es porque ahora tenemos que devolver lo que hicimos antes, así que esto, ¿verdad? Y también, necesitamos, como, hacer algunas cosas aquí arriba. Es porque necesitamos acceder a las cosas aquí dentro de nuestras etiquetas HTML, como fiscales, que realmente provienen del padre del formulario de tarea. Y esto es un poco problemático. ¿Cómo lo resolvemos? Y también, recuerda que el formulario de tarea debe ser responsable de las cosas que están conectadas con el formulario de tarea. Entonces digamos, tenemos aquí una nueva tarea. ¿Crees que deberíamos tener en la lista de tareas? Como lógica responsable de crear una nueva tarea. No, vamos a moverlo hacia arriba, ¿verdad? Esto es lo primero que tenemos que cambiar, ¿verdad? Bien, lo segundo que necesitamos tener es, como, notar bien, vamos a donde es eso? Lo siento. Entrada, ¿verdad? Referencia de tareas de entrada. No es necesario ahora mismo aquí, así que tenemos que moverlo aquí arriba, ¿de acuerdo? Entonces, ¿qué más hay aquí para hacer? Al presentar. Tenemos aquí en submit, y creo que tenemos que escribir ahora nuestra propia función para entregar el submit, que va a basar una parte de en la función que se envía aquí, bien sé que es un poco complicado en este momento, pero creo que esta es una buena idea Pronto te enseñaré por qué es eso así, ¿de acuerdo? Aquí estamos usando set new task, que tenemos aquí ahora mismo. Nosotros tenemos esto. ¿Bien? Entonces necesitamos, como, Bien, vamos a comprobar lo que tenemos y lo que no. Entonces Nueva tarea, sí, está ahí. Necesitamos crear una función, que se llama handle submit. Bien, eso es esto. Y ahora tenemos que decidir qué partes deben suceder en forma de tarea, ¿verdad? Entonces, cuando estamos manejando el envío ahora mismo, algunas partes como esta que hicimos aquí están realmente conectadas al manejo del botón de enviar, ¿verdad? Por lo que queremos evitar el comportamiento predeterminado de toda nuestra aplicación. Queremos enfocarnos en la referencia del impuesto insumo, ¿de acuerdo? Eso está bien. Y si no se pone nada, entonces paremos, ¿no? Y ahora, esto es crucial para entender lo que va a pasar. Observe que la sugerencia aquí es perfecta porque queremos usar para agregar la tarea específica, cuál es nuestra función que se envió al formulario de tarea, ¿ verdad? De esa manera. Después, establecer el valor de la entrada a nada, ¿verdad? Pero cuando pasamos a esta cosa justo en la tarea, así que fíjate que estamos aquí, ya estamos enviando asa en tarea, ¿verdad? Entonces esto y fíjate que aquí, tenemos función que tiene un evento aquí, y esto no es lo que tenemos aquí, ¿verdad? ¿Qué enviamos aquí usando la nueva tarea? Realmente enviamos el valor actual de esta entrada, ¿verdad? Entonces llamémoslo, por ejemplo, nueva tarea, derecha, o nuevo texto de tarea. Depende de ti porque eres como el que dice cómo se va a llamar a la variable cod. Y recuerda que esto no es evento esta vez porque manejar en tarea no se invoca automáticamente cuando ocurre el evento de enviar, ¿verdad? Actualmente esta es nuestra propia utilería, ¿verdad? Entonces el valor aquí es realmente el que viene de aquí, ¿verdad? Bien. Entonces podemos llamarlo nueva tarea, tal vez para mantenerlo todo igual, ¿verdad? Y sí, estás actualizando las tareas. Y si, esta es nuestra responsabilidad porque estamos dentro de la lista de tareas, ¿verdad? Eso es bueno. Ahora pues estamos clasificando todo. Sí, eso también es bueno. Y estamos configurando el diccionario de tareas a uno nuevo. Y esta parte va a ser eliminada porque lista de tareas ya no se hace responsable de qué? Por configurar la nueva entrada de tarea a nada, ¿verdad? Bien. Y si, creo que debería funcionar. Vamos a probarlo. Como pueden ver, acabamos de agregar lo que agreguemos aquí, se va a agregar. También podemos ordenar. Entonces todo está funcionando como antes, pero ahora hemos dividido responsabilidades Y ahora, después de esta conferencia, tal vez te estés preguntando si tienes que dividir cosas así, ¿verdad? Verás, realmente depende del proyecto, ¿verdad? A veces es fácil simplemente poner todo en un solo componente y, ya sabes, llamarlo un día. Si estás escribiendo algo muy rápido, si estás como, ya sabes, que este es un proyecto pequeño, solo quieres divertirte. Mantenlo en un solo componente. Este es tu trabajo, ¿verdad? Pero si estás trabajando con otras personas, es bastante mejor, ya sabes, empezar a pensar en cómo dividir las responsabilidades, ¿verdad? Porque ahora mismo cada componente es más pequeño y es más fácil de entender. Sé que te puede parecer raro ahora mismo cuando estás cuidando de refactorizar todo lo que sea más fácil de entender Pero es porque antes estábamos escribiendo el código dentro de uno, ya sabes, gran componente. Desde hace mucho tiempo, justo, te acabas de acostumbrar. Pero si tuviste un programador que nunca ha visto este código, cierto, y él vio este gran componente con todo dentro de él, estará más confundido al mirar esa cosa así. ¿Bien? Así que más bien piensa de esta manera, ¿de acuerdo? Más bien vas a, ya sabes, trabajar con otras personas en el futuro. Entonces, cuando quieres cambiar algo así como una característica como el estilo del formulario, no afectarás a otros componentes, y sabes que solo puedes pegarte a este lugar para hacer cosas con respecto a la forma, ¿verdad? Porque esta es la responsabilidad de ello. Además, hay algo bueno que se llaman prueba, y se vuelve simple si los componentes están enfocados en una cosa, ¿verdad? Se puede probar cada componente de forma individual. Es más, cuando dividas las cosas como lo hicimos ahora, va a haber algún tipo de optimizaciones en segundo plano mientras se vuelve a renderizar el modelo de objetos de documento virtual del que hemos hablado antes Entonces antes teníamos un componente grande, cada vez que algo cambiaba, con respecto al formulario de tarea con respecto al botón de ordenación , con respecto al ítem de tarea, tenía que ejecutarse toda esa función con todas las instrucciones y se tenía que cambiar la cúpula virtual. Y después, si hubo un cambio real en el estado, lo que es visible para el usuario, entonces se aplicó el cambio. Pero sí, todas estas cosas se ejecutaron en cada re render. Esto realmente no lo es, algo lo que hay que preocuparse en las aplicaciones pequeñas, pero en las más grandes, esto se vuelve problemático, ¿verdad? Entonces ahora mismo porque hemos dividido, todo, entonces significa que puede haber algún tipo de optimizaciones en segundo plano ¿Qué tipo de digamos que cuando cambia el nuevo estado de la tarea, solo se vuelve a renderizar el formulario de tarea, verdad? No toda la lista de tareas. ¿Correcto? Podrías optimizarlo aún más en el futuro usando memoización que puedas conocer O tal vez en el futuro reaccione, se va a hacer automáticamente por ti porque va a haber algo bueno, se llama compilador en react Pero sí, hay algún tipo de optimización que reacciona con proceso en segundo plano. Entonces hay ventajas de mantener todo organizado y no todo en un gran componente. Aunque, ya sabes, los componentes dentro como, ya sabes, el botón de ordenación que teníamos Tarea y formulario de tarea estaban muy conectados entre sí, ¿verdad? Aunque estuvieras como, Bien, esta aplicación nunca saldrá fuera del alcance, ¿verdad? Aún así, es buena idea dividirlo. Y como, me gustaría resumir esta lección diciendo, depende de su situación Entonces no seas como, ya sabes, gurús en Internet que digan: No, tienes que hacerlo de esta manera No, tienes que hacer esto de esta manera, y entonces estás ansioso por tu código. Por ejemplo, solo sigue haciendo cosas y, como, destrúyelas. Porque mientras estás creando tu código, si es bueno o no, no importa. Mientras estés creando, vas a aprender de tus errores porque vas a decir, Oh, por eso debería haberlo hecho de esta manera. ¿Bien? Sólo sigue haciendo. Estarás bien.