Fundamentos de JavaScript: de cero a ninja

1. ¡Hola!: Hola. Bienvenido a JavaScript Essentials. En este curso, aprenderás a convertirte en desarrollador de frente y JavaScript. Ya deberías tener algún entendimiento de HTML y CSS, pero si no lo haces, eso está bien porque técnicamente no es requerido. Este curso fue diseñado para ayudarte a irrumpir en el desarrollo Web como carrera, por lo que estarás aprendiendo habilidades de programación transferibles como try, catch, funciones, clases y herencia. Pero también estarás aprendiendo todos los conceptos básicos de JavaScript también. Puedes tomar las habilidades de este curso y aplicarlas a otros lenguajes en el futuro, como No Js python y PHP Plus. Aprenderás sobre los bits extraños y JavaScript a incluir ámbitos de izaje y cierre . Y mientras estás pasando por las lecciones, hay proyectos pequeños que te darán experiencia laboral con código JavaScript real . De esta manera, no entras al mercado con los ojos vendados y con las manos vacías. Las lecciones vienen con ejemplos de código descargables y disminuyen las asignaciones para que puedas obtener experiencia práctica con código JavaScript de nuevo. Como bono, también aprenderás algunos es seis también. acercarse al final de este curso, hablaremos un voto de cinco maneras en que puedes ganar dinero mientras aprendes a codificar como desarrollador junior o intermedio con muy poca habilidad y cómo puedes irrumpir en la industria del desarrollo web . También te estaré brindando alguna dirección en cuanto a lo que debes aprender después de esto. Puntuaciones esenciales de JavaScript. Algunas personas dicen que debes aprender Essex React No Jake cansado, python angular PHP, ruby, etcétera, etcétera. Eso es demasiado, así que te voy a dar un poco de claridad. Ahora, en este curso, no hay pelusa mágica. De hecho, voy a estar compartiendo algunos de los secretos para convertirme en un exitoso desarrollador Web que ningún otro profesor quiere admitir. Nunca he oído que otro maestro admita algo como lo que les voy a decir en este curso. Y de hecho, el primer secreto es que el desarrollo web es en realidad más que escribir código. Hola, soy Caleb, tu profesor de elementos esenciales de JavaScript. Soy un desarrollador web de pila completa de online y estructura. Soy emprendedor, y he enseñado a decenas de miles de estudiantes en apenas los últimos años. Tener codificación desde 1999 y ahora te estoy pasando mis conocimientos de JavaScript ahora aquí. Apenas unas cuantas cosas que los estudiantes tienden a apreciar de mí. Mi forma directa de enseñar de nuevo. Sin pelusa. Cómo puedo descomponer conceptos difíciles en piezas simples y fáciles de aprender y lo rápido contesto las preguntas que tienen ahora. Creo que el aprendizaje en línea es mawr que ver videos. Necesitas aprender la teoría de la codificación. Absolutamente. Necesitas trotar tu memoria, y necesitas practicar la escritura de código. Por lo que de nuevo obtienes experiencia en codificación. Una vez que termines este curso, obtendrás un certificado de finalización para demostrar que has aprendido los elementos esenciales de JavaScript . Entonces esto es lo que se incluye en este curso. Vida completa 24 7 Acceso a todos los videos HD, un certificado de finalización, acceso a nuestro grupo de soporte, ejemplos de código descargables, proyectos de codificación y un examen final y una garantía de devolución de dinero de 30 días. Significado Si no aprendes nada de este curso en el primer mes, ve y toca reembolso. Consigue tu dinero de vuelta. Entonces, ¿qué dices? ¿ Estás listo para convertirte en desarrollador de JavaScript? Si lo eres, entonces haz clic en el botón de inscribir 2. Introducción: Hola y bienvenidos a Javascript Essentials. En este curso, vamos a estar aprendiendo los conceptos básicos de JavaScript. Si buscas un curso sobre Sí, seis. Esto no es así. Esto es más un curso de principiante sobre algunas de las cosas por las que vamos a pasar. Incluyen archivos JavaScript internos vs externos. Dónde poner tu JavaScript en tu archivo HTML todo el camino hasta las variables. Asignación común, operadores de manipulación de cadenas. Si lo contrario intenta atrapar selectores de consulta para seleccionar tu HTML dentro de tu d o m cambiando valores del HTML interno Qué levantamiento es funciones. Funciones anónimas iban a meterse en un levantar objetos, bucles. Y vamos a empezar a hablar de cambiar estilos CSS con clases selectoras con diferentes métodos. ¿ Al igual que qué? Nuestras clases. ¿ Qué hace que javascript se oriente a objetos? Podríamos sumergirnos en un poco de E s seis JavaScript. Cosas como las funciones del Consulado Anvar o Errol que se acercan al final de este curso, vamos a aprender sobre frameworks, algunas bibliotecas JavaScript realmente impresionantes que te harán la vida mucho más fácil. Y te voy a mostrar cómo puedes ganar un poco de dinero escribiendo JavaScript a través este curso, va a haber un par de proyectos diferentes. No van a ser excesivamente extensos. No van a hacer sudar realmente tu cerebro. Pero van a ser una gran práctica. Y sólo va a consistir en cosas que has aprendido en este curso. Entonces no vamos a suponer que ya conoces otro JavaScript de otro curso. No vamos a suponer que,ya sabes, ya sabes, CSS tres transiciones y animaciones o algo avanzado como eso fueron puramente aprendiendo JavaScript aquí, y esto te va a hacer realmente rodar como desarrollador de JavaScript en el front end de cualquier sitio web de desarrollo. Está bien con eso dicho, Gracias por asistir a este curso. Si tiene preguntas, definitivamente déjalas en los comentarios a continuación. No olvides unirte al grupo de Facebook. El enlace estará en los comentarios a continuación o estará en la siguiente lección, y espero verlos pronto 3. Qué puedes esperar: Oigan, todos, bienvenidos de nuevo Antes de empezar, lo que realmente quiero hablar es de lo que pueden esperar en este curso. Ahí hay algunos cursos donde solo son cursos de video. Ah, y es un profesor hablando contigo, y ya he hecho esos cursos antes, y esto ya no es aceptable para eso. Yo quiero que Teoh sólo una especie de establecer las expectativas de lo que es este curso y lo que vas a poder salir de él. Entonces lo primero que puedes esperar de este curso son ejemplos de código, ¿ verdad? Todo lo que voy a estar escribiendo, ya sea en sublime o justo en el navegador, te voy a dar estos ejemplos de código. Entonces qué, puedes esperar ejemplos de código. Lo segundo que puedes esperar es que no quiero llamarlo trabajo en casa, pero son una especie de asignaciones. Es una forma de practicar todo lo que vas a estar aprendiendo. Entonces vamos a pasar por 10 15 20 pequeños cursos rápidos y en realidad no vas a hacer muchos deberes en esos. Pero al final de ese módulo o al final de Siris de videos, vamos a tener una pequeña asignación. No van a ser difíciles las asignaciones. No te van a lastimar el cerebro. No te van a estresar. Están puramente diseñados para practicar lo que has estado viendo en los videos y siéntete libre de volver siempre y volver a usar cualquier tipo de ejemplos de código interactivo. Entonces Número dos lo que puedes esperar asignaciones. El tercero y último que puedes esperar de este curso es el acceso a nuestro grupo de Facebook , y este es un grupo de desarrolladores de Facebook. Ha estado arriba por un par de semanas ya en hay más de 500 desarrolladores. mejor por el tiempo estás viendo esto. Habrá miles de desarrolladores en este grupo, pero es solo un sencillo grupo de Facebook donde la gente puede ir y hacer preguntas. Entonces, ya sea que estés viendo esto en cualquier plataforma, puedes venir y unirte a nuestro grupo de Facebook y hacer tus preguntas ahí dentro estaban contentos de responderlas . Estamos contentos de darle apoyo. De nuevo hay cientos, posiblemente miles, de desarrolladores que están dispuestos a ayudarte en cualquier momento dado. No hay mercadotecnia adicional. No es necesario que te inscribas. No necesitas dar tu email ni nada por el estilo, es solo un gran lugar para ir y hacer tus preguntas. Por lo que Número tres es nuestro grupo de Facebook. Puedes hacer una búsqueda en Facebook para aprender a codificar. Así se llama el grupo de Facebook. Voy a crear un enlace y ponerlo en este documento donde se puede descargar este documento puede verlo. Ah, también va a estar en los comentarios o en contenido adicional descargable para que puedas encontrar el enlace ahí dentro. O simplemente puedes subirte al tipo de Google para aprender a codificar, e idealmente deberías encontrar ese grupo de Facebook. 4. Dónde poner tu JavaScript: Oigan, chicos. Y bienvenido de nuevo a Javascript. Esenciales En esta lección, vamos a repasar rápidamente donde debes colocar tu JavaScript. Ahora, hay mucho debate sobre si debes poner tu JavaScript y la cabeza de tu HTML o en el cuerpo en tu parte superior o inferior de tu cuerpo s. así que solo quería ir rápidamente sobre cuándo debes poner tu JavaScript en qué área parte es nuestra cabeza. Entonces aquí es donde pones, ya sabes, tu título, y eso es, ya sabes, básicamente una ella masculina. Todos sabemos eso. Pero si quisieras, también podrías poner algo de javascript aquí. Ahora voy a escribir algunos en la línea JavaScript y puedes escribir cualquier cosa aquí. Esto es simplemente javascript regular. No tienes que preocuparte por saber qué es esto en este momento, pero debes saber que puedes poner javascript en la cabeza. Dicho esto, yo aconsejaría mucho en contra de hacer eso sólo porque mucha JavaScript se basa en el D. O. M. El modelo de objetos de documento, que básicamente es tu estructura HTML. Ahora, si tienes algún javascript que se esté cargando en la cabeza, derecha, igual que CSS, tu navegador va a cargar tu página de arriba a abajo. Entonces si aquí tu javascript está tratando de agarrar un elemento que aún no se ha renderizado en el cuerpo, que no está aquí, entonces o va a producir un error o te va a dar resultados impredecibles . Y eso realmente depende de qué tan rápido pueda cargar tu página qué tan rápido descargue JavaScript, qué tan rápido sean las computadoras del usuario. Hay demasiadas varianzas que simplemente no podemos controlar. Por lo que en términos generales, cuando tengas que trabajar con cualquier cosa que esté en el dom, no lo metas en la cabeza. Ponlo en el cuerpo. Ahora hay dos lugares en el cuerpo donde puedes ponerlo para que puedas tener ya sabes, tu HTML regular aquí, y puedes poner tu JavaScript, ya sabes, aquí en la parte superior. Y para algunos guiones como la analítica, eso podría ser mejor porque Google analytics, por ejemplo, te pedirá que lo pongas en la parte superior de tu elemento corporal y Google analytics. Todo lo que es es javascript. Ahora, la razón por la que te piden ponerlo en la parte superior es simplemente porque no confía en nada más por un rato. Se puede tomar un segundo. Se puede cargar con frecuencia. Es un sincrónico, así que no va a frenar nada de todos modos. Si haces clic en un botón, Google Analytics no se dispara necesariamente en ese momento a menos que hagas algún trabajo de analítica personalizada . Pero realmente, hasta entonces, no es gran cosa. Ahora JavaScript que escribes es muy probable que vaya a estar trabajando con tu tonto. Se va a estar trabajando con cualquier tipo de HTML que ya hayas escrito que tus páginas van a cargar, sea a través de python o PHP o ningún Js cualquier tipo de JavaScript que esté en tu dom necesita ser cargado antes de que puedas agarrarlo. Y es por eso que pones tu JavaScript aquí. Ahora lo que esto ha hecho por mí. Todo lo que hicieron fue tabulador mecanografiado. Eso es sólo un pequeño enchufe para el navegador que estoy usando. Estoy usando sublime. El plug in se llama M it. Es realmente bonito, no el punto ahora mismo, Pero lo que esto hace es que me permite escribir rápidamente algo fuera hit tab y un auto completo, así que vas a ver mucho de eso a lo largo del resto de esta clase ahora aquí tenemos nuestro tipo Texas igual a JavaScript, que no usamos aquí arriba porque nuestro navegador sabe que esto es un script. Esto sólo va a ser JavaScript. El único tipo de navegador de Escrituras que se puede ejecutar es JavaScript, el desarrollador web front-end. Apila. Lee alguna vez tiene tres idiomas, y técnicamente no son todos, en realidad, idiomas. Tienes HTML, que es mark up. Tienes CSS, que es, ya sabes, esencialmente marcar, aunque se está volviendo mucho más complejo en estos días y puedes empezar a agregar variables que aún no son del todo inspeccionadas a mediados de 2017. Pero las variables están llegando. Eso va a ser muy guay. Y JavaScript, que probablemente ha hecho más avances desde que nació hace más de 20 años, poniéndose un poco fuera de pista aquí. Esta parte inferior aquí, donde dice tipo de script es igual a texto slash javascript queremos poner SRC es igual a javascript dot Js Y todo esto hace es decir, Mira, Sr navegador, cualquiera que sea tu son, vas a cargar un guión para mí. Cargar este y el archivo Js javascript interno. No necesitamos tener nuestro guión ahí dentro Ahora, avanzando. En realidad no vamos a escribir ningún JavaScript en línea en nuestra página. Podríamos hacerlo en el navegador cuando mi hacerlo en lápiz de código en algún lugar un poco más interactivo , si tengo que hacerlo. Voy a usar un ciego, pero generalmente voy a tratar de mantenerme alejado de eso. Uh, la razón de eso es javascript está destinado a ser interactivo. Y creo que enseñar en amore ambiente interactivo va a ser mejor para la experiencia general de aprendizaje. Entonces para hablar rápidamente de esto, ¿dónde debes poner tu JavaScript? Bueno, si estás incierto, siempre ponlo justo antes de tu etiqueta corporal de cierre. No lo pongas en medio de tu página. No lo pongas en la parte superior de tu etiqueta corporal. Ni siquiera lo pongas en tu encabezado. Si estás incierto, ponlo en la parte inferior. Ahora, si estás usando ah biblioteca como J query, con la que puede o no estar familiarizado en este punto, Pero las bibliotecas siempre deben cargarse en la parte inferior a menos que se diga específicamente lo contrario. Hay algunos frameworks que así que sí, ya sabes, carga tu biblioteca de javascript y se parecerá mucho a esto y solo lo moverás a la cabeza de tu guión, y eso está bien. Si te dicen que hagas eso, entonces absolutamente hazlo así. No obstante otra vez, si estás incierto, solo toma tu guión completo. Son los scripts de línea HTML más bien, y simplemente tirarlo al final de su página. De esta forma, tu página puede cargar todo. Tu navegador puede cargar todo, y con el tiempo el JavaScript está listo para renderizar todo tu html está ahí. El único que va a faltar es la etiqueta de cuerpo de cierre y la toma HTML de cierre , que JavaScript generalmente no le importa. Solo quiere abrir etiquetas, en términos generales, así que eso es que, uh, envuelven rápidamente. No pones tu guión de trabajo puesto en la parte inferior de ninguna página. Si tienes que escribir alguno en la línea JavaScript, derecha, ponlo en la parte inferior de tu página también. Otra vez. Deja que ese don carga ese modelo de objeto de documento 5. Variables y tipos de datos: Hola. Bienvenido de nuevo. Hoy vamos a estar hablando de las temidas variables. Las variables en realidad no son tan malas como la gente piensa que son cuando empiezan a programar por primera vez . Variable es realmente solo una forma de contener información y una forma que es poco más fácil memorizar. La parte complicada viene cuando comienzas a hablar de diferentes tipos de datos ahora tipos de datos de algo de lo que también vamos a hablar en esta lección. Budge por el momento. Vamos a quedarnos con una variable regular, ¿verdad? Por lo que variable se parece mucho a esto. Declaras con lejos o en JavaScript no necesitas necesariamente la barra. No obstante, sólo con fines de aprendizaje, nos vamos a quedar con lejos. Y vamos a decir nombre es igual a Caleb. Ahora bien, esto es lo que declara una variable. Parece que tienes tu declaración, tienes tu nombre de variable es igual a solo un signo igual. Eso es importante, y hablaremos de eso en una lección posterior. Y entonces aquí dentro tenemos apóstrofes, que técnicamente podrían ser reemplazados por comillas. Lo mismo, y termina en punto y coma. Ahora el punto y coma javascript es completamente opcional. No necesitas tenerlo ahí, pero si vas a escribir algún código limpio, es una buena idea tenerlo ahí. Hay algunos estándares por ahí que prefieren, si lo tienes de nuevo, no realmente necesarios en el futuro. Si vas a estar escribiendo un lenguaje de programación como ah Ph. B, por ejemplo, cada línea en PHP tiene que terminar en un punto y coma. Por lo que llegar a la costumbre de escribir un semi colon versus no escribir el semi colon es una buena idea. No, si eliges dedo del pie aprender pitón en el futuro, Python no termina en el semi colon. Simplemente tiene línea en blanco. De hecho, Python se parece mucho a esto ahora. Esto no es un curso de pitón, pero solo estoy mostrando. Estás demostrando que hay diferentes formas de hacerlo. Avanzando en esta clase, siempre vamos a tener un punto y coma al final de cada línea. Podría faltar a una pareja aquí allá, pero JavaScript no es lo suficientemente estricto como para quejarse de eso a menos que obviamente haya una buena razón para, uh, pero siempre trato de poner un punto y coma al final. Ahora, para esta lección, en realidad voy a hacer un poco más dentro del propio navegador para que puedas ver que realmente puedes escribir JavaScript dentro de tu navegador. Voy a crear un nuevo archivo. Iba a llamarlo index dot html. De acuerdo, así que tengo mi archivo html de punto índice, y todo lo que hice fue agregar alguna estructura HTML básica. No vamos a escribir javascript aquí. Yo sólo voy a seguir adelante y abrir esto dentro de cromo, sin embargo. ¿ Todo bien? Entonces en Crumb, hay absolutamente nada de fantasía en esto. Todo lo que vamos a hacer es correcto. Haga clic y vaya a inspeccionar. Y puedes hacer esto en prácticamente cualquier navegador. Y yo iba a cambiarnos para estar a la derecha. Y aquí, tenemos elementos, fuentes de consejo, rendimiento de red, memoria, etcétera, etcétera. Lo que queremos es Cónsul y justo aquí, en realidad puedes llevar un JavaScript a la derecha en el navegador. Entonces si decimos que el nombre de la variable es igual a Caleb y hit, enter, dice indefinido en todos. Honestamente, te está mintiendo. No es indefinido. Entonces si seguimos adelante y tecleamos nombre, obtenemos a Caleb. ¿ Verdad? Esta es una variable. Eso significa que el nombre de la variable y Amy tiene un valor llamado asesinado. Ahora bien, si recuerdas volver a tus días de matemáticas donde AH, dicen tus profesores, encuentran el valor de X y X sería nueve o 3.14 Algún número ¿verdad? Esas son variables. Ahora, no te desanimes. Esto es realmente tanto matemática como vamos a estar haciendo durante bastante tiempo. El matemático en JavaScript no se hace muy extenso a menos que quieras meterte en gráficos o bibliotecas de animación o algo por el estilo. Pero por lo que estamos haciendo, las matemáticas son súper simples, así que no hay que tener miedo de eso en absoluto. Ahora hay una diferencia entre diferentes tipos de variables. Por ejemplo, edad variable. Podría decir 27 bien otra vez. Golpeo, Enter dice indefinido. Pero si escribo página, dice 27. Pero, ¿qué pasa si escribo edad variable para escribir? Intenta auto sentir por mí? Se puede ver que la edad dos es igual a, y lo pongo entre comillas. Si vuelvo a poner esto entre citas, dice indefinido. Pero si digo edad, también, la diferencia es que uno es solo un número, un entero, y el otro tiene citas alrededor. Ahora esa es una diferencia bastante grande. Y esta es la diferencia entre un tipo de datos. No se preocupe por memorizarnos a todos. Nos vamos a poner mucho más manos con esto un poco más tarde. Y por el momento, realmente solo necesitas saber que existen diferentes tipos de variables de sus diferentes tipos de datos. Entonces lo que hemos experimentado hasta ahora nombre sería una cuerda. Ahora todo lo que tenga citas a su alrededor o con apóstrofes a su alrededor se llama cuerda. Si no tiene cotizaciones, es un número completo se llama entero. Pero y si tenemos Variable pi es igual a 3.14 algo algo, algo correcto y volvemos a escribir alto. Ahora esto se parece mucho a un entero, pero técnicamente no es un entero. Bueno, quiero decir que sí, pero como tiene un punto decimal en él, en realidad se llama flotador. Ahora, a flote es básicamente solo un número que tiene un punto decimal, y si recuerdas volver a tus días de matemáticas, la moneda libre cero es exactamente igual a tres. No obstante, cuando estamos hablando de ser exactamente igual en la programación. 3.0 no es exactamente el mismo real. Déjenme tomar eso diferente. No es exactamente lo mismo es tres. Este de aquí sólo tres es un entero y 3.0, es ese flotador? ¿ Eso es increíblemente importante en su momento? No. En tal vez a lo largo de tu futuro de JavaScript como desarrollador de JavaScript, podría que nunca surja. No obstante, cuando entramos en comparaciones, ¿cómo comparamos si tres es igual a tres? O si algo es verdadero o falso, ¿verdad? tipo de comparaciones iban a meterse en esas, y de repente esto va a tener mucho más sentido. Entonces solo aguanta conmigo por el momento. Es importante saber esto ahora. Nos estamos adelantando un poco, pero es muy importante saberlo. Ahora hay otro. Como pueden ver, en realidad, en realidad, le pegué Enter. Basta con hacer una nueva línea en dice falso. Pero si lo hiciéramos, ah, tres es igual a tres. Eso es cierto otra vez. Nos meteremos en eso un poco más tarde. Ahí afuera hay otro tipo de datos. Ah, tipo de datos llamado No eso. Podríamos simplemente decir variable. Lo llamaremos algo. Ah, y en realidad, no se sabe que esto ha sido definido. Um, pero el valor es indefinido. Y así lo vemos en todas partes. Técnicamente, este nombre de valor no es indefinido, pero algo está indefinido porque no escribimos. Algo es igual a otra cosa, que eso en realidad se habría roto porque no había cuerdas. Ahora, cuando estamos declarando una variable como una cadena, tenemos cadena variable. Tenemos que tener cotizaciones o cotizaciones alrededor. No importa cuál siempre y cuando sean iguales. Por lo que abres con la cotización, algo que terminas con una cadena de tipo de cotización. Ese es el nombre de variable que escribimos que declaramos. Y obtenemos el valor. Voy a seguir adelante y aclarar esto ahora ¿qué pasa cuando tratamos de declarar una cadena sin citas ni apóstrofes? ¿ Verdad? Hacemos variable. Algo más es igual, y podríamos simplemente escribir cualquier cosa que fuera una cadena, ¿ verdad? Entonces no es un número, no está a flote. Está en objeto o matriz llegará a esos. Se supone que es una fuerza como una sentencia, pero no tiene citas a su alrededor. Entonces decimos hola Mi nombre es Caleb, y obtenemos una sintaxis aire inesperado identificar para identificador. Y eso es porque otra cosa piensa que está haciendo referencia a otra variable técnicamente llamada hola. Y el espacio rompe todo el proceso. Ahora bien, a la hora de declarar una variable, hay muchas maneras diferentes en ella. Puedes camello caso, ¿verdad? Entonces casing de camello es que empiezas con una letra minúscula y cada palabra. Después de eso juntados en uno. Long word tiene una carcasa de camello mayúscula o, por ejemplo, Hola. Mi nombre es Caleb. Eso es casing de camello. Sólo voy a hacer eso más grande. En realidad, hay otra manera. Teoh nombre tu variable variable es y puedes usar guiones bajos. Hola. Mi nombre es Caleb. No, realidad no se puede ver eso. Ahí vamos. Tengo subrayados ahí dentro es igual a prueba. Ahora. ¿ Por qué esto trae la cuerda? Cuando lo definí aquí, pero en ejemplos anteriores, siempre decía indefinido. Pero la razón por la que no se definió fue porque estábamos usando var y var tiene un mecanismo de elevamiento encendido. Y creo que eso va a algo de lo que hablamos en el futuro. hecho de que el alzado es una especie de único en JavaScript. Pero es solo una de esas cosas que es bueno saber, porque eventualmente te vas a encontrar con un problema donde es como, ¿Por qué es mi función anónima o por qué no se está definiendo mi variable? ¿ O por qué se está definiendo? Pero no tiene nada en ella todavía que se llame izar. Nos meteremos en eso más tarde. No te preocupes por eso. Volviendo a las convenciones de nomenclatura, podrías nombrar cualquier variable, literalmente todo lo que quieras deletreado así de mal. Cualquier cosa que quieras. No obstante, existen algunas excepciones. No escriba una variable como no inicie un nombre de variable con el número en la mayoría de los idiomas . Eso no está permitido, no mencionar que es mala práctica. Entonces no digas por algo o 40 años derecho, eso es que no es bueno. No hagas eso en JavaScript. Verás muchas variables que comienzan con un subrayado. Totalmente aceptable. Eso está bien. Además, no use guiones. No guiones, así que no uses guiones. Ah, de hecho, tampoco uses otra puntuación . Es innecesario, así que no uses guiones es igual a ver. Nos dio una sintaxis de aire sin cortar, aire inválido o token inesperado. Lo que piensa ahora mismo es que se está escapando de nuevo a esto. El sujeto hablará sobre el futuro. No importa ahora mismo. Ah, y también piensa que esta es la variable esencialmente, y no puede averiguar qué está pasando después de ella o por qué hay un corte ahí, así que te tira ahí dentro. 6. No olvides de evaluar este curso,: Hola, Soy yo. Yo soy la voz detrás de los videos. Sólo un rápido recordatorio de que si has disfrutado de alguno de estos videos hasta ahora, puedes seguirme en share de habilidad. Pero lo que es más importante, en realidad se puede calificar este curso. Y con sólo leer este curso, eso en realidad me ayuda mucho. Es súper fácil y súper rápido solo toma un par de segundos, y quiero decir que realmente significaría el mundo para mí. Entonces si has amado lo que te he estado enseñando, si te gusta el estilo de mis cursos, dale a eso un buen pulgar viejo para arriba, Um, y deja que otras personas sepan qué pellezas de estos videos también. Salud. 7. Variables y tipos de datos parte 2: Ahora hay otra de la que quiero hablar muy rápido y de nuevo. Nos estamos poniendo bastante por delante de nosotros mismos. Pero de nuevo, estos aire bueno saber, porque vamos a estar practicando estos en el futuro. Y van a tener más sentido una vez que realmente empieces a escribir algún código. Entonces tenemos objetos. Tenemos un aumento. Tenemos indefinido. No tenemos, no puedo flotar y cuerdas el siguiente. Yo quiero hablar de objetos se o B j es igual a y empieza con un corsé rizado. Ángela Curly carrera o corchete. Si quieres llamarlo así tienes algún tipo de clave. Tienes algún tipo de valor. Tienes una clave para Oops, otro valor. Observe cómo todas estas parecen cuerdas. Yo golpeo enter y me da un objeto, y eso es algo que realmente podemos usar aquí. Por lo que el proto no se preocupe por esto. Esa es mucha funcionalidad de JavaScript que viene con el tipo de datos del objeto. No vamos a modificar estos ni añadir ninguno de estos Qué es genial de O. B. J. Y aquí es donde entra el poder de la programación orientada a objetos se debilita, tipo será j dot y automáticamente tenemos clave y clave a aquí dentro. Entonces si tecleamos o b j tecla de punto, ese es el valor, ¿no? Dijimos clave es igual a con un valor de colon. Pero también dijimos O b j punto clave a es otro valor. Vamos a capitalizar eso y te voy a mostrar que no necesariamente necesitas tener tu llave en una cuerda se 27 puntos ocho o lo que sea que alrededor de Teoh golpeo enter y de nuevo tengo nombre y edad. Incluso si te diste cuenta aquí arriba cuando tenía la clave como cadena, automáticamente la convirtió en una clave eso que es básicamente una cadena o como ah, nombre variable sin las citas a su alrededor. Es innecesario en un objeto, y así un objeto es una forma de almacenar variables dentro de otras variables. Pero entonces puedes nombrarlos también. Por lo que tienes todos estos diferentes puntos de datos dentro de una variable. Ahora esto es realmente, realmente poderoso cuando se trata de almacenar información sobre un objeto de datos en particular. Se aclara esto y vamos a crear un objeto de persona, ¿ verdad? Tenemos persona es igual a objeto. Uh, digamos el nombre. ¿ De acuerdo? Vamos a crear un objeto de persona para mí. Edad. Ya hicimos esto, pero esto es Este es un objeto diferente porque lo llamamos. Lo estamos llamando persona. Ah, y no sé cuál es mi color favorito? A lo mejor. Correcto. Vamos a decir rojo. Entonces tomo eso en hit. Entrar. El cónsul en nuestro navegador ahora ha declarado que Oh, sí, esto existe. Entonces ahora puedo teclear persona nombre de punto así. Ese es mi nombre, persona punto edad. Si tomo eso a la derecha, eso probablemente habría trabajado persona punto Age Knocking Alliance Un poco vergonzoso . Tomo la palabra página tantas veces que supongo que es solo hábito persona punto Pitch, uh punto edad Ahí vamos. tercera vez es el encanto y ah, probemos con una persona No colorees. Tenemos rojo Hermoso. Pero, ¿qué pasa si solo escribimos persona? Obtenemos todo el objeto, pero no podemos usar eso en una página. Y de nuevo, vamos a conseguir algunas manos en la experiencia de eso en el futuro. Pero en este momento, solo es bueno saberlo y podemos almacenar múltiples puntos de datos dentro de un objeto. Para que pudieras tener a tu amigo. Kyle, por ejemplo, es igual a un objeto lleno de puntos de datos. Y ahora no tienes que recordar. Uh, ya sabes, 200 variables diferentes. Simplemente puedes recordar que cada objeto llamado Kyle era persona o lo que quieras nombrar . Tiene thes diferentes sub variables que esa es una buena manera de poner algunas variables dentro de una variable. Ahora, cuando hablamos de un levantamiento a la derecha, teníamos recordar que teníamos objetos y teníamos un aumento. Ese último fue un objeto, y array es una lista de variables. Ahora es diferente a un objeto porque el objeto tiene muy específicamente nombre de punto persona o persona pensamiento, cualquiera que sea la variable que le des. tanto que una matriz es simplemente una lista. Entonces podríamos decir que los amigos son iguales a, y solo vamos a crear Honore de esta manera. Usamos corchetes demasiado duros, y dentro de ella tenemos un montón de cuerdas o, uh, desde o flotadores. Básicamente, solo declaras un montón de variables en una lista que está todas separadas por comas. Muy sencillo. Entonces sigamos adelante y eliminemos eso. Y mis amigos iban a ser Nathan Prairie y Zephyr. Golpeé Enter, y esto nos da algo un poco diferente. Todavía no hemos visto éste. Tenemos 012 Estas son las llaves. Y es algo así como un objeto, pero realmente no podemos cambiar el nombre de estas claves. Si los hiciéramos cambiar el nombre, esencialmente, estaríamos trabajando con un objeto es simplemente una lista. No, vimos justo aquí. Zero es Nathan en programación de computadoras. Cuando empezamos a contar , siempre empieza en cero. Entonces cero es en realidad 11 es en realidad 22 es en realidad tres. Sólo en el lenguaje humano empezamos a contar a una. Pero las computadoras, empezaron a cero. Entonces si escribo amigos y corchetes rizados a no actualmente corchete lo siento. Al igual que estos corchetes duros que está vendiendo JavaScript. De acuerdo, entonces busco la matriz de un amigo, que es lo que escribimos aquí. Y busco la primera pieza de información que hay ahí dentro. Entonces si voy adelante y golpeo, entrar ¿qué debería volver? ¿ Es el nombre Nathan justo como esperábamos? Ahora bien, si yo también escribo amigos, ¿qué crees que se va a devolver? Si crees que se va a devolver el nombre Zephyr, tienes toda la razón. Ahora, aquí hay uno complicado. ¿ Qué pasa cuando te llevas amigos? Tres. Sabemos que aquí no existen tres. Entonces, ¿qué se va a devolver? Indefinido. No. Javascript. Si intentabas acceder a una variable o punto de datos que no existe, va a ser indefinido cada vez. Y podemos ver esto como una afirmación verdadera. Uh, en realidad tomemos eso correctamente. Amigos tres es igual a indefinido. Si esto resulta ser cierto, como en los amigos tres, el tercero o el cuarto elemento de esta matriz no existe. Esto va a reventar la pequeña palabra verdadera debajo. Justo así. Entonces ahora sabes de objetos que conoces de un aumento, sabes de cadenas inst en su corto para enteros y flotadores. Ah, y aliado en y cuándo encontrarlo. Ahora bien, estas son solo variables. El modo en que los declaré aquí es exactamente de la misma manera en que puedes declararlos en tu javascript. Ya sea que ese sea su JavaScript interno en su variable de página. ABC es igual a 123 es exactamente igual. O si estás en solo ah archivo Js regular, podría decir que la edad es igual a 27.8. Sabemos que sabes que esto está a flote porque tiene el punto decimal, y sabemos que si quitamos el punto decimal que va a haber que esto va a ser un entero ahora, para qué me gustaría que diera dio. Ah, sólo un poco de práctica. Ahí hay no hay tarea aquí, pero me gustaría que te pusieras un poco de práctica, así que solo abre un html índice en blanco para un índice lógico. Podría ser cualquier archivo HTML. En realidad podrías ser cualquier página en cualquier lugar. Puedes abrir Facebook si quieres. Haga clic derecho para ir al inspector. Inspeccione los elementos según el navegador que esté utilizando. Ve a la consola y apenas empieza a escribir. Algunos JavaScript declaran algunas variables. Por lo que declara una variable. Uh, mi edad es igual a cualquiera que sea tu edad. Ya sabes, si tienes 15 o si eres 45 hit entrar. Simplemente ve qué pasa y luego escribe, y puedes escribir tus enteros tus flotadores tus cadenas. Se puede ver si hay algún error. Se puede aprender algo que funciona, lo que no funciona. Y mientras haces eso, escribe aquí tus variables y mira si resulta que escupe exactamente lo que estás esperando. Y si no es lo que estás esperando, bueno, entonces puedes averiguar por qué puedes preguntar por qué y recordar si tienes preguntas haciendo a nuestro grupo de Facebook, lo que me gustaría que hicieras es crear un objeto, crear una matriz, recordar y levantar sólo una lista. Crea una cadena un entero y crea un flotador. Haz eso en tu consola, y estarás muy familiarizado con las variables. Ah, vamos a meternos en comparaciones un poco por el camino, y ahí es cuando estas variables van a cobrarse vida de verdad y vas a poder ver cosas y otras. Esta lección en este momento es, está un poco seca. No es súper emocionante ni nada. Um, este es un concepto fundamental, casi todos los lenguajes de programación, y es realmente, realmente importante saber cómo funcionan estos, porque esto es transferible. Lo que estás aprendiendo en esta lección no es solo javascript. Funciona en PHP y python en nodo. En cada otro idioma hay básicamente objetos de cuerdas de raza, enteros y flotadores ahí, en realidad un montón de otros, dependiendo del idioma que estés escribiendo. Pero estos son los más comunes que son completamente transferibles. Entonces es realmente, realmente bueno saber cómo funcionan estos. Entonces, uh, adelante, dale una oportunidad a eso. Si te quedas atascado, haz preguntas. Estamos aquí para ayudar. De lo contrario, espero verlos en la siguiente lección. 8. Manipulación de String: Hola. Bienvenido de nuevo en esta lección. Vamos a estar hablando de manipulación de cuerdas, que básicamente lo es. Tomamos una cadena generalmente en una variable en un tipo de cadena en un tipo de datos de cadena, y cambiamos el valor de su dinámicamente o obtenemos algún tipo de información de ella. Estos aire básicamente, estos se llaman métodos de nuevo. Porque javascript es un lenguaje de programación orientado a objetos. Utilizamos esta cosa llamada notación de puntos que nos permite acceder a funciones que están adjuntas a cadenas u objetos o a un raise. Cosas así. Entonces este ejemplo, lo que voy a dio es solo crear una cadena muy simple y lo voy a llamar str es igual a Y podríamos sentir esto con cualquier cosa. Entonces si estás siguiendo, si estás escribiendo mientras yo hago esto para sentirte libre de contestar cualquier cosa aquí la manta azul está sentada en el escritorio, pero agradable y simple. Entonces cuando tomamos eso de vuelta, str tenemos la manta azul está sentado en el escritorio. Nada de fantasía. Sabemos hacer eso. Caleb, esto es aburrido. Ya lo sé, lo sé. Sigamos adelante y veamos cuántos personajes hay en esto. ¿ Cuántas cartas hay en nosotros? Entonces escribimos str dot length y puedes decir que un navegador nos está diciendo que la longitud tiene que ser de una cadena aquí. ¿ Verdad? O el arrendamiento viene de esta bebida. Escribimos enter 39. Aquí hay 39 caracteres, sin incluir las citas, citas, o simplemente para mostrarte que es una cadena. Ahora bien, ¿por qué es eso importante? Bueno, porque un día cuando un usuario introduce algún tipo de información en tu sitio, por ejemplo, Twitter, donde solo puedes tener 140 caracteres, es importante asegurarse de que sus oraciones o sus tweet es de solo 140 caracteres. Y esta es la primera forma de validación. Ellos dirían. Si el tweet es un tweet, la longitud es menor o igual a 1 40 Entonces pueden seguir adelante y ejecutar algo o código. Entonces ahora que eso es sólo encontrar la longitud. Cosas bastante simples. Pero, ¿qué pasa cuando queremos encontrar una cuerda dentro de una cuerda? Entonces digamos que estamos buscando la palabra manta. ¿ Cómo encontramos que podríamos desgarrar cada palabra y compararla en un bucle y se vuelve demasiado complicado. Cosas que ni siquiera sabes todavía realmente son completamente innecesarias. En este punto, podríamos probar este índice de punto de cadena de y pongamos aquí la palabra manta. Nueve. Lo que nueve significa es que en la novena letra de esta frase es donde se encuentra la palabra manta . Entonces tenemos th e y la palabra azul juntos que siete más los espacios a espacios antes de la letra B en manta que totaliza nueve. Entonces ahí es donde empieza la palabra. Ahora bien, si el mundo no existe, ¿qué pasa si escribimos string index de y tomemos la palabra rojo? Porque no hay palabra roja en nuestra cuerda. Obtenemos menos uno, así que si algo no existe, tenemos menos uno ahora. ¿ Crees que esto es sensible a mayúsculas o minúsculas? Todavía no hemos hablado de esto en JavaScript, así que quiero saber qué piensas. ¿ Esto es sensible a mayúsculas y minúsculas son insensibles? adelante y probemos este índice de cadena de y tomemos la palabra manta, pero con un mayúscula B. Así que es diferente a éste. Este tiene minúsculas. Sé éste. ¿ Tiene una mayúscula ser? Veamos cuál es la diferencia en realidad. Cuando golpeo Enter no existe ahora. Eso en sí mismo podría llegar a ser muy problemático porque no vas a revisar cada variación posible de la palabra manta con diferentes mayúsculas en diferentes letras. Eso es no es imposible. Es sólo mucho trabajo. Y eso es algo de lo que definitivamente quieres alejarte. La programación no está destinada a ser mucho trabajo. Se supone que sea agradable y simple. Entonces, ¿qué hacemos? Tomamos string y podemos convertir toda la oración en minúsculas o toda la oración en mayúsculas para lo que estamos probando aquí. Realmente no importa. Sólo tenemos que cambiar exactamente lo que estamos buscando. Entonces como primer ejemplo, cambiemos esto por punto de cadena minúscula a minúscula y tienes estos corchetes redondeados . Aquí te dejamos estos paréntesis. Ahora estos paréntesis significa que está ejecutando una función o un método, y lo ves aquí a este Toma toma nuevamente el parámetro de manta roja. Esta longitud de un punto no es un método que viene cuando se forma una cadena. Por lo que en realidad es un punto de datos dentro de él. Y ahora se puede decir que la cadena técnicamente no es una cadena. Pero actúa mucho como un objeto, al igual que cuando escribimos en la última lección ese nombre o un perdón. El objeto persona tiene un nombre y una edad y un color favorito, ¿no? Y dijimos persona nombre de punto o persona edad de punto Esto es longitud de punto de cadena o punto lo que sea ese otro valor va a estar muy orientado a objetos aquí. No volver atrás. Por ejemplo, String a minúscula cambia todo dedo del pie minúscula. Bueno, sólo hay una letra ahí dentro, así que este es en realidad un muy mal ejemplo. Pero la primera letra que fue mayúscula ya no está mayúscula. Ahora qué pasa cuando escribimos str Ha vuelto a la normalidad ahora ¿por qué es eso? Es porque tomó tu cuerda, tu sentencia eterna minúscula y volver a ese valor. No empezamos eso en otra variable, así que vamos a escribir str Lower es igual a nosotros. Urata demasiado en minúscula. Y esto es sólo un nombre de variable simple. Y eso es en Camel Case y str inferior y ahora tenemos el éxito en cualquier momento porque hemos asignado otra variable ahora si lo intentamos. Str índice de punto inferior de Y en lugar de escribir manta con una B mayúscula, sabemos que todas estas letras, cada letra de la frase va a ser minúscula. También revisamos minúsculas. Nos da un número positivo que significa que existe. O más bien nos da un número no negativo y eso significa que existe ahora al revés. Podemos probar esta cuerda. Alta nueva variable es igual a string dot a mayúsculas ahora podríamos usar string o podemos encadenar más abajo. No importa porque va a tomar todas las letras y convertirlas en mayúsculas . Capitalizó todo. Entonces probemos esto. Como puedes ver, la manta azul está sentada en el escritorio y ahora tenemos todas las letras mayúsculas. Es exactamente lo que queremos porque si hicimos índice de punto de fuerza y escribimos manta en todos los gorros, eso aún no existe porque str está configurado para ser la manera correcta. Sigue siendo la misma variable. Ahora podemos anular esto y variables. Lo hermoso de las variables es, es que puedes anularlas y básicamente cualquier punto en el tiempo Ahora decía la flecha sobre para conseguir a mi último comandante. Y si escribo string índice de punto superior de está buscando una manta en la cadena mayúscula cadena. Convertimos la versión en minúscula a mayúscula. Por lo que está tratando de emparejar esta manta con esta manta y la encontró en el noveno personaje. Ahora así es como encuentras una cuerda dentro de una cuerda. ¿ Eso es importante? En muchos casos, Sí, eso es muy importante. Vas a querer encontrar cuerdas dentro de cuerdas. Esa no es una tarea infrecuente. Lo sé otra vez, no lo más emocionante del mundo. Y ni siquiera hemos empezado realmente a modificar nada en el D. O M. el modelo de objeto de documento, que es nuestra página web. Entonces vemos a la izquierda. Aquí tenemos esta caja grande blanca. Nada ha cambiado, y eso está bien. Tenemos que aprender los principios antes de poder llegar a las cosas divertidas. Por suerte, los principios de programación en realidad no tardan mucho en aprender, y cuantos más lenguajes aprendió más fácil es recoger otros lenguajes y de nuevo cosas como indexar off. Si bien la función podría ser diferente en otros idiomas, el concepto de tratar de encontrar una palabra en mayúscula como esta manta en una cadena que está todo en mayúscula es el mismo en todos los idiomas. Ahora voy a despejar de nuevo este tipo str para que podamos ver con qué estamos trabajando. ¿ Y si quisiéramos cambiar? Str uh, para ser en su lugar la manta azul está sentado en el escritorio para ser sólo un fragmento de eso. Bueno, no quiero sobrescribir esto todavía porque todavía voy a estar usando el str la variable string . Entonces en cambio voy a escribir ABC porque no me importa cuál sea el nombre de la variable en este momento. Str dot sub string Ya sabes, tenemos dos métodos aquí. Nos vamos a quedar con 1er 1 sub string y esto toma dos parámetros eran para empezar y dónde terminar ahora ¿dónde debería comenzar esto? Bueno, si queremos empezar la primera letra que recuerdan, este es el 1er 1 y así es como hablamos en lenguas humanas. Pero en lenguajes de programación, El primero es el número cero coma y luego nuestro segundo parámetro ¿Y a dónde queremos llegar? Bueno, sabíamos por el ejemplo anterior que este año fueron las primeras 9 letras. También podríamos contar eso si quisiéramos. Y si quisiéramos conseguir Ah, de ya sabes, la manta azul está sentada en un escritorio desde la manta azul hasta algún lugar de aquí. Ahora voy a poner un número aleatorio. voy a meter ningún hallazgo en esto sólo para mostrarte cómo funciona esto. Sabemos que esto es de 39 caracteres de largo porque hicimos string dot length y nos dieron 39 hit enter y me pongo la manta azul es de hecho, en realidad, quería ser un poco más largo eso y dije, voy a sobrescribir esto, y voy a ponerlo como 29. Darío, la manta azul está sentada o Así que tenemos desde aquí todo el camino. Aquí hay 29 caracteres y podemos ver que cuando nosotros cuando substring 0 a 29 0 no, no tienes que empezar con cero. Se puede dio sub string y vamos a empezar a las 10 e ir al siguiente 10. Por lo que esto va a empezar técnicamente en la letra número 11 y va a conseguir el próximo 10 después de eso. Cómo conseguimos cobija es Mira eso. Entonces eso es sub string ahora. ¿ Eso es importante? En tiempos? Sí, eso es muy importante. En otras ocasiones, eso significa que existen otros métodos para hacer esto. También puedes usar string dot rebanada. Echemos un vistazo a qué rebanada hace 10 y 15 así ingresó string dot rebanada y empieza a las 10 y va a terminar 15. El sub string diferencias comienza en 10 y obtiene el siguiente 10 mientras que Slice comienza en 10 y termina en 15 comenzando desde cero ahora. Ambas respuestas de corte no requieren dos parámetros. Simplemente necesitan 11 es obligatorio. Entonces dije, ABC es igual a ti. String out sub string. Ah, empecemos esa a las 12. Va a empezar a las 12 brujas ahí mismo, y va a conseguir el resto. Y si escribí, ABC es una nueva cadena. Ese sub cadena un número negativo, digamos menos 20. Va a empezar aquí y trabajar su camino atrás ahora rebanadas van a hacer esencialmente exactamente lo mismo. Si escribimos en rebanada 15 empieza a los 15 va al final de la cadena o cadena. Dodd rebanada menos 15 arranques en la parte posterior. Claro que de nuevo y comerciar con lo que estamos trabajando ahora, hace apenas un minuto, cuando dijimos que ABC es igual a string dot sub string, sea cual sea el valor, nosotros escribimos ABC una y otra vez, y que cambia de valor una y otra vez. Entonces eso demuestra cómo las variables de una lección anterior se sobreescriben fácilmente. Todo lo que tienes que hacer es tomar el mismo nombre Grable es igual a otra cosa, y lo sobrescribes. Ahora, ¿qué pasa si quieres reemplazar una cadena dentro de una cadena? Bueno, JavaScript es bastante sencillo, así que solo usamos dot replace y buscamos una palabra de nuevo. Esto va a ser sensible a mayúsculas y minúsculas. Sabemos que JavaScript sensible a mayúsculas y minúsculas de un ejemplo anterior, y en lugar de usar Manta Azul, vamos a Apretar Almohada así reemplaza buscar la palabra manta, y se va a tratar de reemplazarla con la palabra almohada. ¿ Qué pasa? El Almohada azul estaba sentado en el escritorio. Pero, ¿qué pasa si no se encuentra la palabra? ¿ A qué regresa? Eso. No queremos buscar la palabra manta y dijo Queremos buscar cualquier otra palabra. Busquemos un auto y sustituyamos eso por almohada. ¿ Qué pasa? Simplemente devuelve tu cadena porque no se reemplazó nada. Simplemente va a reemplazar tu cadena dentro de tu cuerda y te devolverá todo el asunto . Ahora aquí hay una cosa más es con cuerdas. Podemos inventar. Los necesito. Eso significa tomar una cuerda, una frase y una pluma sólo a otra cuerda o frase. 9. Manipulación de String parte 2 2: Ahora aquí hay una cosa más es con cuerdas que podemos inventar. Los necesito. Eso significa tomar una cuerda, una frase y una pluma sólo a otra cuerda o frase. Vamos a escribir, uh, intro, ya que el nombre de la variable es igual a Hola. Mi nombre es, y eso siempre va a ser. Y también voy a crear otro nombre de variable, Kayla. Entonces ahora tenemos intro. Tenemos un nombre. ¿ Cómo juntamos estos? Este es un proceso llamado concatenación o Can Cat para abreviar para fusionar cadenas Lee. Juntos, hay varias formas diferentes de hacer esto en JavaScript fueron las más populares. Una es usar el plus simple. Entonces vamos a crear una nueva variable y llamada oración es igual a intro más nombre. Ahora esto parece que es matemática, pero no lo es. Y es por ello que los tipos de datos son muy, muy importantes. Cuando agregamos una cadena juntos usando este símbolo más, realidad no estamos agregando nada juntos. Lo que estamos haciendo es unirnos a ellos. Entonces si golpeo respuesta en esto, deberíamos conseguir Hola. Mi nombre es Caleb. Justo así. Ahora, cualquier momento escribo frase, la frase variable que obtenemos Hola. Mi nombre es Caleb. Ahora, ¿Por qué sucedió eso? ¿ Por qué? ¿ Por qué es cuando escribimos 12 más 20 obtenemos 32 solo tipo hola, más algo emerge las oraciones juntas. Se juntan las cuerdas Ahora, en la última lección, hablamos de tipos de datos y sigo planteando esto. Y es por eso que los tipos de datos son importantes para conocer en lenguajes como PHP, a PHP realmente no le importa demasiado. Intentará agregar una cadena con el número, y fallará porque está muy vagamente escrito en python y javascript en nodo. Eso es inaceptable. Estos son lenguajes más estrictos, lo que significa que solo se pueden agregar enteros con enteros o introducidos con floats porque se pueden agregar números con otros números, pero no se puede agregar una frase con un número. No funciona de esa manera. Cuando se agrega una oración con otra frase, se convierte en una frase larga. ¿ Qué pasa si tratamos de aplicar alguna otra matemática? Escribamos Ponga la palabra larga aquí y multiplicémoslo. Multiplica esto por 20. Obtenemos esta hermosa cosita llamada cualquiera y no un número ya que por no un número. Ahora, ¿por qué obtenemos esto porque no se puede multiplicar la palabra o la cuerda larga, 20 veces. No se pueden multiplicar letras, números que no mezclan. Es como el petróleo y el agua. Simplemente no se mezclan. Desafortunadamente, Y por eso es muy importante aprender tus tipos de datos. Porque si alguna vez consigues esto ahora, sabes que una de mis variables probablemente no es un entero o no está a flote. Y por esa razón, necesito cambiar algo. Ya sabes, podríamos estar adelantándonos un poco aquí, pero quiero mostrarte una cosa más. Escriba número, en realidad cambie ese nombre. Uh, el entumecido es igual a, digamos, 500. Perdón, 315. Sabemos que eso es una fuerza en contra como citas a su alrededor. ¿ Y si lo hiciéramos? El num veces 20 JavaScript es lo suficientemente inteligente como para darse cuenta de que en esta cadena es en realidad un número y que hizo la multiplicación por nosotros. Entonces eso es aceptable. Pero, ¿y si el señor sobreescribe esto? El número es igual. Do 315 es el número. Entonces ahora tenemos una nueva cuerda ahí dentro. Escribimos nuevamente los tiempos entumecidos 20. No obtenemos un número porque javascript mira esto como un todo y dice: OK, OK, bueno, sé que hay un número ahí dentro, pero todo esto está bajo los números. Eso es inaceptable. Entonces te voy a lanzar un nuevo pequeño error. Te vamos a devolver el valor llamado Not a number a you Ahora si quisieras ser realmente bastante el stickler con tus tipos de datos, y esto es algo muy bueno. Si quisieras estar muy limpio con tus tipos de datos, diría que por todos los medios hazlo siempre y cuando no haga que tu código esté demasiado hinchado. Entonces si retrocedemos y decimos que el número es igual a 315. Pero eso está en una cuerda. Y queríamos convertir eso, porque si escribimos, el entumecido ahora sigue en una cadena. Pero si dijimos que el entumecido es igual al número, el número, sólo estamos pasando una variable simple ahí dentro. En realidad estamos pasando por sí mismo tipo enter. Ahora tenemos confianza un número, y se puede decir porque no hay cotizaciones. El color incluso cambia, no el rojo. Ahora es azul, y cada vez que tecleamos el entumecido su 315. Entonces esa es una forma rápida de analizar, supongo que sus cadenas que solo están sosteniendo números en un entero legítimo. Voy a seguir adelante y despejar esto y vamos a hacer un ejemplo más. Vamos a convertir una cadena en una matriz de tres tipos string o str. Tenemos nuestra cuerda original. Nunca lo hemos superado en esto, y si ponemos en una nueva variable se llamó a son cortos para array es igual a str no divide. ¿ Dónde queremos dividir esto? Bueno, queremos romper cada palabra, así que sólo vamos a poner un espacio simple ahí dentro. Y lo que esto va a hacer es que se va a romper en cada pequeño espacio dentro de esta cuerda y todo lo que está en medio. Cada espacio va a ser un valor de matriz que golpee. Entrar. Nos da ocho y ahora podemos hacer punto de aire La longitud es de ocho. Aquí hay ocho piezas. Ocho palabras diferentes ahora una longitud de punto RR. Sabemos esto por string string string dot length nos dio cuántas letras hay en él, pero un rayo nos da cuántos objetos diferentes son objetos es una palabra ambigua, pero nos da cuántas piezas diferentes hay en esta lista. Y en esto vemos que son ocho. Entonces ahora si solo escribo un r r, consigo, uh, todas estas juntas. Y si quisiera volver a armar las cosas en lugar de usar split, usamos join, creando una variable de aire frío join y teclear un r dot join ¿Y en qué queremos unirnos? ¿ Cuál es el pegamento con el que queremos volver a juntar esta frase rota? Bueno, podríamos volver a juntarlo con un espacio simple o algo así, pero hagamos algo un poco más creativo. Si usamos un guión, se parece mucho más a una U R L, y ahora es la de los espacios. Tenemos guiones. Y si queremos crear Ah, sois todos de esto que escribimos. Siempre eres igual al aire unido punto a minúsculas, y ahora tenemos lo que parece un fragmento Euro o una cadena de consulta. Entonces si fuiste a facebook dot com slash sabes el dash blue dash manta dash dash dash es dash así sucesivamente y así sucesivamente. Se parece mucho a una chica. Entonces ahora estamos regresando cuerdas en se verá como tú real o de lo contrario. Y esto es muy, muy valioso a la hora de crear cosas como aplicaciones de una sola página o tomar la entrada del usuario. Por ejemplo, cuando alguien crea en tu página de Facebook y convirtiendo eso en un ah, tú l que estará en el facebook dot com slash lo que sea que tu grupo o página de Facebook necesite. Entonces ahora en realidad nos estamos volviendo mucho más útil, y aún no hemos hecho nada con un d o M con el HTML real. Pero estamos creando cosas muy útiles aquí. Entonces otra vez, no súper, súper emocionante pero increíblemente útil. Y estos no sólo se detienen aquí. Hay toneladas y toneladas de otros métodos que podemos usar si solo escribimos str dot obtenemos una larga lista de cosas que debilitan a Dio. De hecho, eso es en realidad lo que quiero que hagas es en tu consejo, crear una nueva cadena, poner una frase dentro podría haber cualquier cosa haciendo alrededor de 40 ish personajes como hicimos en este ejemplo en este video, y vamos a ver qué hacen los's. ¿ Qué pasa cuando escribes bien Godbold, devuelve una función Bueno, eso es interesante. ¿ Qué es eso? Eso podría valer un poco de Google, pero juega con algunos de estos porque todos son muy, muy útiles. Podrías hacer lo mismo con array. Cómo no tenemos array aquí air dot y luego te da una lista de lo que estás buscando aquí. ¿ Quieres capitán A Estos reúne? ¿ Quieres cambiar estos rebanada? Por favor, ordena estos. Podrías hacer todo tipo de cosas aquí. No, JavaScript no se limita sólo a esta lista de funciones. Al igual que esta lista es. Es bonito. Es conveniente. Pero eso no es todo lo que JavaScript tiene para ofrecer. Entonces a medida que tus deberes pierdan video, adelante, crea una cuerda. Um, escribe cualquiera que sea tu nombre de variable. Golpea punto y echa un vistazo a algunos de estos. Si alguno de estos te llama la atención, realmente aseguraste lo que podrían hacer. Entra en Google ellos porque aquí está uno de los secretos para ser un gran desarrollador Web. Y ni siquiera estoy bromeando. Si hablas con algún senior para tener, todos te van a decir esto que el verdadero superpoder detrás de ser gran desarrollador es saber hacer preguntas y saber cómo Google, porque en el mundo de la programación frente y terminan de nuevo adentro, hay tantas cosas por ahí que hay que recordar, no las vas a recordar todas. Eso es sólo eso es un hecho de la vida. Nuestros cerebros no funcionan así. Y por qué recordar en absoluto, cuando todo es fácilmente accesible a través de la vieja máquina de Google para seguir adelante, dale una oportunidad. Espero que hayas aprendido muchas cosas útiles aquí. Espero que en las próximas lecciones empecemos a meternos en algo un poco más, Um, sí, interesante donde podamos empezar a manipular el trato m y realmente hacer que tu página sea mucho más interactiva y dinámica. 10. Mini proyecto: convierte una cadena en una URL: Hola. Bienvenido de nuevo Antes de seguir adelante, lo que en realidad quiero que hagas es que quiero hacer un pequeño proyecto. Es que es muy sencillo. Es sólo trabajar con lo que ya hemos aprendido. Um, me siento como lo que hemos hecho. Ya podría considerarse mucha información, sobre todo si eres nuevo en JavaScript. Y entonces lo que vamos a hacer es que vamos a convertir, Ah, poco de texto unas cuantas variables en una U R L real que posiblemente podrías usar en un proyecto avanzando. Entonces la idea es tomar 123 daño por muchas variables que necesites. Manipularlos usando ah, usando, reemplazar. O podrías dividirlo en una matriz y unirlo de nuevo como hicimos en una lección anterior . Convierte tu URL en minúsculas porque todo tú donde más siempre debes ser minúscula . Esa es una buena práctica en. Entonces quieres agregar el nombre de tu sitio web frente a él Ahora. Si no tienes un nombre de sitio web, podrías usar cualquier nombre que pudieras usar google dot com facebook facebook dot com are come on dot com Lo que realmente quieras Tu resultado final realmente debería verse así. Ahora hay dos formas en que podemos hacer esto. Um, podríamos hacerlo usando una tonelada de los métodos que ya hemos usado, que creo que es la mejor manera de hacerlo solo por práctica. Hay una forma más simple, que es básicamente que podrías escribir str cualquier tipo de nombre de variable es igual a y luego lo pones ahí. Eso no es lo que quiero que hagas, sin embargo. Tampoco quiero que escribas,ya sabes, ya sabes, cadena uno más cadena a ah, especie de. Ya sabes, este ser cuerda dos en esta siendo cuerda uno. Ya sabes, tampoco hagas eso. Ponte creativo con esto. Toma el camino largo. Este es uno de esos tiempos donde programar los salarios largos, experimentar, romper cosas. Y, ya sabes, sólo escribir mucho código es completamente aceptable. Estás aprendiendo. Y mientras estás aprendiendo una gran manera de aprender es escribir mucho código en, entonces en el futuro optimizarlo, y eso está perfectamente bien. Entonces, ¿quieres quedarte unos segundos más? En realidad voy a hacer esto yo mismo de una manera que creo que sería útil usando algunos de los diferentes métodos que ya hemos utilizado, incluyendo la concatenación para dividir para unir el hallazgo en mayúscula minúscula, reemplazando palabras. Voy a ponerme un poco creativo con él. Voy a tomar un largo camino. Voy a divertirme con él y siéntete libre de verlo. Pero si de verdad quieres desafiarte, tal vez pausar el video aquí, dale una toma por tu cuenta, y luego una vez que te hayas dado cuenta o si te quedas atascado entonces, ya sabes, reanudar el video y reproducir a través del resto de la misma. 11. Mini proyecto: convierte una cadena en una solución de URL: Está bien. Entonces lo que voy a hacer aquí es que los voy a hacer vivos, justo en el cónsul. Podría hacer esto en sublime, así que tienes el código. Pero de manera realista, esto no es, ya sabes, código súper impresionante ni nada que realmente vaya a revolucionar cómo funciona Internet. Entonces no es realmente no vale la pena ahorrar. Um, pero esta es una carrera de práctica realmente buena. Por lo que el objetivo era crear un sitio web Tú, Earl. Ahora voy a usar métodos faciales. El 1er 1 que voy a hacer es averiguar qué sitio web se suponía que iba a ir a tan creativa variable llamada página web. Y solo va a ser https artman dot com con la trailing slash Done, es ahora tenemos un sitio web. Esto es, ya sabes, engaño con perdidas. Podríamos hacer algún fondo o cosas, pero esta no es la parte en la que quiero que se centren. lo que quería que te enfocaras era crear la URL y que todos estuvisteis podria estar viniendo de cualquier cosa. Entonces vamos a crear una nueva cadena y servir usando estuche de cámara. Divertido subraya el tiempo. Sólo tienes que mostrarte que puedes usar las otras , ya sabes convenciones de nomenclatura variable, ya sabes. El cuadro marrón rápido salta sobre el perro perezoso o algo a lo largo de esas líneas. Entonces ven que he añadido dos espacios extra aquí en lugar de solo uno. Ahí hay dos. Esto son todas las capitales. Esto es, uh no sé por qué hay un C Capital Cape mayúscula. De cualquier manera, necesitamos convertir esto en algún tipo de tu forma l. Entonces ahora tenemos página web, tenemos nueva cuerda, por lo que nueva cuerda necesita convertirse en el euro. Bueno, lo primero que quiero hacer con mi cuerda tú es que quiero convertir esto en algo que pueda manipular sin importar lo que pase por la línea. Entonces voy a decir que la nueva cadena es igual a la nueva cadena, que en realidad solo se está tomando en anular a sí misma a minúsculas. Ahora ya no tenemos más problemas de capitalización. Esto es perfecto. Ahora bien, si quisiéramos hacer una búsqueda sobre esto, no tenemos que preocuparnos por ah, al azar Capital C en medio de la palabra rapido. Pero ahora digamos que quería quitar cualquier espacio extra. Digamos que ya hay dos o tres espacios extra en cualquier parte, y dicen que solo queremos quitarlos ahora. Quizá no sepamos que están ahí, pero podría ser una buena idea del dedo del pie ir y reemplazar esos espacios extra. De todos modos, En este punto, um, hay dos formas de hacer esto de una manera. No aprendimos en el camino que sí aprendimos la forma en que sí aprendimos era usar No reemplazar , y así es como lo vamos a usar sólo porque eso es lo que hemos aprendido. Entonces quiero que te hagas algo de práctica con eso. El otro modo es usar lo que se llama expresiones regulares, que es una forma loca por computadora de buscar a través de cualquier cosa y encontrar el patrón exacto que has especificado. Y aún no vamos a aprender de eso. Este es un curso de elementos esenciales de JavaScript, y tú solo siendo, Ah, unos videos en unas pocas lecciones en este curso. No necesitas saber de Reg. Exe apenas todavía. Rechazos es la forma en que decimos expresiones regulares. Entonces el siguiente paso para reemplazar, digamos, nueva cadena es igual a, uh, ya sabes, no lo llamemos nueva cadena. Eso se va a poner confuso. Siempre eres igual a nuevo string dot y sabemos que podemos usar replace ¿Y qué queremos? Nuestro lugar. Vamos a reemplazar los espacios extra por espacios solo regulares. Podemos hacer eso. Ahora toma esto. Y sólo hemos llegado a donde había dos espacios entre pensamiento y perezoso. Ahora sólo hay uno You Earl es igual a euro dot um no, no rebanada split. Queremos dividir todos los espacios. Ahora sabemos que hay un montón de espacios aquí entre cada palabra. Nos hemos deshecho de cualquier espacio extra. Lo que pasa lo obtenemos y ahora mismo estás fuera está ahora a la derecha. No podemos hacer nada con eso. ¿ Qué pasaría si lo hiciéramos? Página web Además estás fuera. Bueno, automáticamente se unió junto con comentarios bastante cerca de Bueno, queremos pan no del todo. Así que vamos a hacer tú, Rosie para ti URL dot join Y vamos a unirnos a todas las grandes piezas Todas estas palabras diferentes El guión ahora así. Entonces ahora nuestro producto final va a ser tu l es igual a la página web Plus tú eres el cual va a venir, Katyn ocho nuestra página web y nuestro euro. Y ahí tenemos una chica real. Ahora, ¿Esto realmente va a cualquier parte. Honestamente, probablemente nunca vaya a ir a ningún lado. A lo mejor fuera. No, ese no es el punto. El punto es que tenemos lo que parece un euro legítimo basado en lo que podría haber sido la entrada del usuario . La entrada del usuario nunca es perfecta. Nunca como si la entrada del usuario es perfecta como muy, muy rara. Simplemente asuma que la entrada del usuario siempre está equivocada, que siempre es siempre se ve terrible lo que no se formatea correctamente. Simplemente ese tipo de supuestos para no ser negativos o nada son buenos supuestos. Simplemente asuma que el contenido ingresado a tu sitio web no es lo que esperas que sea, y eso es tener una mentalidad de primera en materia de seguridad. Ahora, después de que podamos cafeinado sitio web con tu oh bueno, tenemos una mirada legítima ustedes están todos aquí, y podríamos haber hecho eso con cualquier sentencia corriendo por esto con cualquier otra sentencia hubiera funcionado. Si sientes que tienes un agarre de lo que hemos hecho aquí, entonces te invito a abrir el siguiente video. Sigamos cavando en JavaScript. Esto se está volviendo divertido. Esto se está poniendo emocionante y avanzando. Esto sólo va a mejorar 12. Comentarios de código: hola. Y esta lección, vamos a estar hablando de comentarios. Súper rápido, súper breve. ¿ En serio? Aquí no hay mucho de que hablar. Para ser honestos comentarios, lo que habitualmente has visto en HTML es, ah, comentario. Eso se parece mucho a esto en JavaScript. No usamos comentarios así. Utilizamos comas. En realidad, ya has visto esto antes. Si has mirado alguno de los archivos del proyecto, cualquiera de los archivos javascript en Js, todos tienen esta pequeña línea doble aquí. Ella va a hacer eso en, y eso es un comentario, pero ¿cómo se ve en código? Bueno, vamos a escribir algún código básico. Y no espero que entiendas cuál es este código en realidad. Tampoco tienes que hacerlo ahora mismo. Entonces, ¿escribes algo aquí dentro? Uh, sería genial si pudiera deletrear alguna de las palabras correctamente. Y, ya sabes, ¿qué hace esta función? ¿ En realidad nos va a mover uno y aquí dentro? Uh, paso uno? No, va a ejecutar algún código aquí. Sea lo que sea que posiblemente esté encendido, entonces el paso dos ejecuta más código, y luego solo va a devolver algo. A lo mejor va a devolver un objeto así de nuevo, no necesitas saber qué es eso en realidad. Pero aquí están los comentarios ahora. Si quisiéramos realmente comentar todo esto fuera, podríamos dio es que solo agregamos las fajas dobles frente a ella. O podríamos hacer de la manera más fácil y usar Theus risk y Slash. Entonces para iniciar una sola línea comenta, solo una línea escribe, tenemos una línea a línea tres línea. Sólo un comentario. Una nota. Todo lo que hacemos es agregar flash slash delante de él. Pero si quisiéramos entrar, todos ellos afuera mirando slash delante de todos ellos o podríamos añadir ah, slash, asterisco. Y eso va a comentar todo hasta que se diga que no se comente. Y se puede decir porque todo esto Texas Gray iba a realmente deshacerse de algunos. Parte de esto vuelve a encajar en pantalla. Y para terminar ese comentario, usa la slash de asterisco, que es exactamente lo opuesto a esto, y para decir si tienes editor cualquier tipo de I d Eso es usar sintaxis, resaltado o cualquier tipo de color para colorear regresa. Eso es todo. Es ahora, una cosa a tener en cuenta sobre escribir cualquier código en cualquier lenguaje de programación es usar comentarios. Usa muchos comentarios. Yo diría siempre Usa más comentarios que no suficientes. Dígale a la gente lo que hace su función. ¿ Por qué se declara variable? ¿ Se suponía que tenía que hacer? ¿ Hay alguna diferencia entre una variable entre variable y y un objeto? O quieres recordarle a alguien que una función tiene que ejecutarse en un momento determinado o, ya sabes, lo que sea que estés haciendo, déjalo en tus comentarios Ahora, si eres el único desarrollador que trabaja en un proyecto, en serio, ¿eso es necesario? En su mayor parte? No. Hasta que tu proyecto se haga más grande porque cuando estás trabajando en, ah, proyecto grande podría no tocarlos código para, ah, semana o dos a la vez en que vuelvas, es posible que no recuerdes dónde está. Aunque pienses que en su momento ibas a recordarnos a todos, lo más posible es que no vayas y vas a volver y tienes que descifrar todo, o simplemente dejas comentarios para ti mismo y puedes leerlos cuando vuelvas a . Del otro lado del espectro es si estás trabajando con otros desarrolladores, y esto es muy común si estás trabajando en un proyecto de código abierto o eres un desarrollador front-end o de vuelta en desarrollador trabajando en ah, en un desarrollo Web firme o en equipo o en una puesta en marcha, lo que sea que estés haciendo. Si estás trabajando con otros desarrolladores, deja comentarios para que entiendan lo que está pasando y deben hacer lo mismo por ti. Y si hay algún desarrollador que esté escribiendo código que no te estén dejando comentarios, toda honestidad, no están haciendo un muy buen trabajo de comunicarse contigo porque los desarrolladores no levantan el teléfono y dicen: Ah, oye, así que hice este cambio porque me llevaría una eternidad. Estaríamos en llamadas telefónicas todo el día. En cambio, dejamos poco comentario, diciendo solo, cambio esto o esto Esta variable era para algo en particular, y no tiene que ser extensa. Por lo que puse nombre variable esto es, declaró variable. Pero no hay nada ahí dentro que signifique técnicamente que esté definido, pero el valor es indefinido, por lo que esta sería una cadena vacía. Esto sólo significa que es indefinido. Y en los comentarios podríamos decir por qué esto es indefinido. Entonces esto es solo para configurar una variable básica utilizada, y sé para otras funciones algo así que es absolutamente aceptable. Si estás agregando algún nivel de claridad del que otro desarrollador podría beneficiarse, vale la pena escribir, aunque lleve un poco más de tiempo escribir el mismo código. Sólo porque estás agregando comentarios, es que los comentarios importantes son fáciles. Los comentarios son sencillos. Todo el mundo sabe hacerlas, y pueden aumentar exponencialmente tu nivel de comunicación entre tú y tu yo futuro . Quién va a estar mirando atrás en el código de pase que estás escribiendo en este momento, o tú y tu equipo, y viceversa. 13. Operadores básicos: bienvenido desarrollador en esta lección. Vamos a aprender de eso, uh, operadores, operadores, aunque realmente no los más interesantes del mundo. Tema interesante en el mundo es cómo explicar esto. Es lo más importante, lo más fundamental. No puedo explicar lo importante que es la comprensión de los operadores para la programación porque ahora mismo todo lo que hemos usado ojos, un poco de manipulación de cuerdas. Hemos creado algunas variables. Podríamos haber escrito algunos comentarios en. Nada extraordinario. Para ser honesto, realidad todo es cosas divertidas bastante aburridas. Se está acercando tanto. Pero antes de que pudiéramos hacer algo de eso, necesitamos saber qué es el operador. Por lo que la programación, aunque no estrictamente matemática, es muy, muy lógica on. Por eso, no se puede evitar no hacer algunas matemáticas. No tienes que entender muchas matemáticas para ser un gran programador. Esa es la verdad. De hecho, muchos programadores son en realidad bastante terribles en matemáticas. Todo lo que tienen que hacer es averiguar la respuesta correcta una vez garganta en algún trozo de código. Eso le da la respuesta correcta cada vez, y nunca más tienen que preocuparse por ello. Eso es lo hermoso de la programación es que no tienes que ser Einstein o Stephen Hawking ni ningún tipo de genio que haya revolucionado el mundo. Literalmente no se puede tener matemáticas muy mínimas. Y así algunos de los operadores de los que vamos a hablar hoy son súper, súper básicos. Tenemos suma, resta, división de multiplicación, y vamos a meternos en un par más. Algunas de estas son un poco diferentes. Es posible que no hayas visto estos. Si has estado por ahí programando un poco, podrías haber visto algunos de estos. Sólo recuerda mantener un poco de mente abierta aquí, Um, y trata de ser lo más lógico que puedas ser, porque si puedes encender esa parte lógica de tu cerebro, esto se vuelve mucho más fácil para ti. Entonces primero, empecemos con la adición, ¿no? Si hacemos 12 más 15 JavaScript nos da 27 matemáticas básicas. 12.5 más 15.123 nos da la respuesta exacta. Estamos en búsqueda de adición básica. La resta no es absolutamente diferente. Y podemos darle a esto cualquier número en el mundo que queramos, ¿ verdad? Vamos a darle algunos números locos. Acabo de lanzar números aleatorios. Echemos un vistazo a esto porque se trata de matemáticas tan básicas. Simplemente sabemos que esto es correcto. Esto no es incorrecto. Entonces, esencialmente, esta es tu calculadora. Pero ¿y si dijéramos 15 divididos por cinco? Bueno, cinco van en 15 3 veces. Matemáticas básicas, ¿verdad? No estamos aquí para enseñar lo suficiente. Yo estoy aquí para mostrarles que este pequeño letrero de operador es muy importante. ¿ Qué pasa si lo hacemos? 15 Dividido por 62.5 nos da un flotador 15 dividido por 14.9 grupos hicieron eso mal. 15. Probemos división nos da un número bastante preciso, pero y si quisiéramos conseguir el resto de algo que es un poco más complicado. Entonces la programación viene con este operador llamado Módulo S. Y así si dijimos 15 Ma celoso, digamos por derecho, ¿cuántas veces tiene cuatro entran en 15 mientras tres veces Así para un 12 y cuál es el resto ? Tres. Porque es exactamente lo que estamos buscando. Si dijimos 97 listas de módulos 42 42 entra en 97 dos veces con el resto de 13 que es módulo es eso bastante bonito. ¿ Vas a usar eso a menudo honestamente, lo largo de mi carrera como desarrollador front-end, no lo he usado tan a menudo. Yo en realidad no está más en la parte trasera de lo que tengo en la parte delantera. Eso no quiere decir que nunca lo usarás, sin embargo. De acuerdo, así que acabo de despejar la pantalla ahí. Um, vamos a crear una variable. La edad es igual a 67 ahora. Hay dos operadores más llamados Ah, el incremental y Decker aumentar y aumentar incremental a medida que la palabra raíz sugiere tu número. Edad más plus, así es como se ve un incremental. Ah, lo estás arriba más 68. ¿ Y si lo volvemos a ejecutar? 69. ¿ Y si lo ejecutamos una vez más? 70 y va a seguir subiendo por uno. Dijimos que la edad es igual a 60.5 y ejecutar el incremento. Simplemente sigue subiendo por uno. Y si quisiéramos hacer lo inverso, podríamos reducirlo en uno. ¿ Por qué es importante esto? Porque en el futuro nos vamos a estar metiendo en bucles. Loops ejecutará código, y básicamente, hasta que golpee algo que diga stop. Y para nosotros a veces eso significa que golpea un cierto número y aumenta en uno una y otra vez , o disminuye en uno una y otra vez hasta golpea como cero o un número especificado. Ahora bucles lo harán automáticamente, pero hay una razón por la que queremos hacer esto manualmente. Es porque a veces estamos en un bucle. Queremos hacer un seguimiento de otra cosa. ¿ Cuántos objetos son aplicables cuando recorres una serie de palabras, como el zorro marrón rápido salta sobre el perro perezoso? Eso lo dividimos en palabras individuales, y miramos a través de cada palabra. Si esa palabra es perro, o si esa palabra es cuatro letras o menos, quizá aumente el número una y otra vez. Si eso no tenía sentido para ti ahora, está bien. Vamos a estar repasando cosas así en el futuro. No es tan complicado como probablemente lo hice parecer. Ahora veamos a los operadores de asignación, operadores de asignación, nuestro ah sí, limpiadores fuera. Y digamos que el número uno es igual a 10. El número uh, dos es igual a 15. ¿ Y si dijéramos número uno? Ah, si tan sólo quisiéramos sumar 25 al número uno, diríamos que el número uno es igual al número uno más 25. Eso no sirve de nada cuando pudimos realmente justo el número uno más equivale a 25 ahora la razón eso es porque Número uno era el número 10. Dijimos, Plus es igual a 25 si apretaramos de nuevo a alguien, lo ha asignado. Entonces no sólo hizo la adición para nosotros, sino que también dijo Número uno es lo que el total va a estar aquí ahora. Podríamos hacer lo mismo decimos número uno, pero en lo inverso y menos un número. Entonces vamos menos no 35. Vamos a la mente es un número más grande. Eso es menos 54. El número uno es ahora menos 19. Si volvemos a tomar la variable, sabemos que Número uno ha sido reasignado a B menos 19. Ahora puedes hacer estos operadores de asignación con suma, resta, división de multiplicación y lista de módulos. Todo lo que tienes que hacer es agregar el operador frente al signo igual, y automáticamente asigna el valor de lo que sea que va a ser a esa variable para ti . Entonces ahora tenemos matemáticas en una línea, así que en lugar de decir, ya sabes, número uno es igual a 10 más 25 como lo hicimos antes. Lo que vamos a decir es entumecido uno es igual a más igual a 25. Ahora sabemos entumecido uno es actualmente menos 19. Esto de nuevo y lo que tenemos son seis menos 19 más 25 son seis. Escribimos a alguien, tenemos sexo, así que en tenemos sexo, realidad no hay mucho más que podamos repasar con nosotros, pero en realidad solo hace que tu lo hace que tus matemáticas sean un poco más limpias y realmente solo hacen esto para matemáticas básicas. No intentes hacer esto por nada que esté,ya sabes, ya sabes, fuera de tus operadores básicos, si tienes que hacer las cosas en cierto orden como paréntesis de masa de cama Bennis, exponentes, división, adición de multiplicación, resta, Um , de nuevo, ese tipo de matemáticas que realmente no necesitas recordar ahora mismo. Entonces hazlo en línea. Tus matemáticas también pueden tener paréntesis en ella. Entonces si hicimos 12 más 20 divididos por Tu menos uno más cuatro totalmente inventado eso. Golpea, golpea, entra y obtenemos lo que se supone que esa respuesta era 19. Pero lo que esto estaba haciendo es la regla de la cama, señorita. Ahora, la siguiente lección vamos a hablar de operadores de comparación, operadores comparación. Es así como se hace la programación. Si algo es cierto o falso, realmente se reduce a cosas bastante booleanas o un número es más grande que el otro. Toma algún tipo de acción. Esos operadores de comparación aérea iban a meterse en los que también viene con, si lo demás declaraciones. A partir de ahora, la única tarea que creo que deberías hacer. Llámalo en muchos proyectos o lo que quieras es solo abre aquí tu cónsul y solo haz algunas matemáticas básicas. Sólo tienes que averiguar cómo funciona esto. No tienes que hacer nada súper complicado, pero prueba esto. Prueba la ah, la suma Operadora, derecha 12 más 58. Me tiró por error porque el lado izquierdo inválido en asignación. Eso significa que esto no es ah, variable. Pero si dijimos terrible Numb es capaz de 12 y dijimos 12 58. Nos da nunca así que solo juegues con cosas como esas, siéntete libre de obtener errores como este, y cada vez que lo haces obtienes un aire, googlearlo. Google es una gran fuente de información. Stack Overflow tiene una tonelada de preguntas para ti de nuevo. Ser un gran desarrollador es saber fue a Google cosas. Si te quedas atascado, tenemos ah gigante grupo de Facebook lleno de desarrolladores que están, ya sabes , en tu posición, todo el camino hasta el nivel senior que definitivamente te pueden ayudar también. 14. Operadores de comparación: Muy bien, bienvenido de nuevo y esto. Escucha, ahora vamos a estar hablando de operadores de comparación. Este es un concepto fundamental entre todos los lenguajes de programación. Realmente se reduce a si algo es verdadero o falso. Y estas son opciones binarias. Las computadoras no piensan en ningún tipo de terreno gris. Es, ya sabes, es o es negro o blanco. Es cierto. Es falso. Es sí o no. Y para empezar, necesitábamos saber mucho hasta este punto. Ahora, este punto es realmente cómo le das cualquier tipo de programa, la capacidad de pensar si una variable sale verdadera, hago algo. Si es falso, haz algo más que salga a gustar, si más operador y nos vamos a meter en eso en la siguiente lección. Pero en este momento solo estamos hablando de operadores de comparación. No hay operadores de comparación. No son muy difíciles en, verdad. La única matemática que necesitas saber es si algo es mayor que menor o igual a, hay otro tipo de salvedad ahí dentro, y esa es la que lo hace igual a, o no es igual a. Entonces, en lugar de realmente tratar de explicar esto, creo que la mejor manera de aprender esto es simplemente escribirlo en la consola. Hablaré a medida que voy, Y, uh, si tienes preguntas sobre cómo funcionan estas, siéntete libre de preguntarlas en el grupo de Facebook. Sí, así que empecemos con nosotros, acuerdo? Entonces lo que voy a hacer es uno igual a uno. Esto sale cierto porque uno siempre es uno. ¿ Qué pasa si dije que uno es igual a dos? Es tan falso. Ahora bien, la razón por la que esto es comparar y no asignar una variable es porque hay dos signos iguales. Si dijimos que uno es igual a uno, JavaScript va a pensar, Oh , bueno, voy a firmar la variable llamada uno. El valor de uno. ¿ Y qué pasa? Nada. Porque sois variables no pueden comenzar con el número. Ahora. ¿ Y si usamos flotadores en lugar de enteros? Dijimos que 1.0 es igual a 1.0. Eso es cierto. ¿ Qué tal 1.0 es igual a uno? Eso también es cierto. Está bien, así que acaba de limpiar cónsul ahí, y, uh, así que son gerentes básicos, ¿ verdad? Uno es igual a 10. Sabemos que uno no equivale a 10. Sólo 10 puede ser 10. Entonces esto resulta ser falso. ¿ Y si empezamos a comparar cuerdas juntas? ¿ Y si dijimos prueba es igual a prueba? Bueno, esto es exactamente lo mismo, comparando esencialmente contra sí mismo. Entonces esto tiene que ser cierto. Pero ¿y si dijimos prueba es igual a otra cosa? Ahora estamos comparando dos cadenas juntas, por lo que el tipo de datos es el mismo. No obstante, los valores son diferentes, por lo que la prueba no es igual a otra cosa. El hecho de que el tipo de datos sea el mismo no significa que esto sea necesariamente cierto. Y cuando golpeamos enter, vemos que esto es de hecho, falso. Entonces, ¿qué pasa si empezamos a poner algunas de estas en variables? Entonces pongamos el nombre de la variable es igual a Caleb. Ese es sólo mi nombre. Ahora. Queríamos decir nombre es igual a igual a esto es compararlo. Entonces esto no se va a comparar. Este nombre va a comparar Caleb, recuerda Capital K porque javascript es sensible a mayúsculas y minúsculas. Entonces si dijimos que Caleb es igual a deletrear mi nombre técnicamente el nombre propio, ¿qué pasa? Es falso. Pero si dijimos que Caleb es igual a igual. Lo estamos comparando Matada con Capital K. Es cierto porque ahora es exactamente lo mismo. Ahora bien, si hacemos una comparación estricta, eso son tres signos iguales, y ponemos exactamente la misma comparación que la anterior, pero sólo con un signo igual adicional. Todavía es cierto ahora. El motivo de eso es porque este valor aquí mismo es literalmente el mismo. Entonces no es comparar sólo el valor. También está comparando el tipo de datos. Ahora. ¿ Y si dijéramos edades igual dedo del pie 45 y luego comparamos la edad es igual a 45. Eso es cierto. ¿ Y si la edad es igual a igual a igual a 45? También cierto. ¿ Y si edades igual a igual a 45.0? También es cierto, JavaScript se da cuenta de que 45 es lo mismo que 45.0. ¿ O qué pasaría si lo hiciéramos? El inverso 45.0 suele ser en realidad igual a la edad. También cierto, Así que no importa de qué lado vive la variable igual a comparación siempre y cuando se esté comparando. Eso es todo lo que le importa. Ahora hay otra comparación que necesitamos toe realmente considerar aquí. Despejen el consejo aquí. ¿ Y qué pasa si dijimos la edad es mayor a mayor o igual a 45? También, verdadera edad es mayor a 45. Eso es falso. La edad es de 45 años. No es mayor de lo que es mayor o igual a antes de continuar. Echemos un vistazo a algunos de los diferentes operadores que tenemos. Tenemos iguales a estrictos iguales, no iguala a un estricto, no igual tenemos mayor que o igual a menor que o igual a igual a. Y luego cuando nosotros cuando queremos mezclar y emparejar comparaciones que tenemos, esto es. Y así en lugar de escribir la palabra y solíamos a m por ciento o cuando queremos decir si algo es cierto o algo más es cierto, usamos para canalizar símbolos, y esto significa o ahora volvamos a declarar. Es re declare edad es igual a 20 y si vives en Estados Unidos, la edad para beber es de 21 por lo que la edad para beber es igual a 21. Ahora podemos decir, esencialmente, si la edad es mayor o igual a la edad de beber, entonces puedes ir a comprar cerveza. Pero lo compararíamos por si la edad, no 20. Pero la edad es igual o mayor que la edad de beber. Entonces podemos disculparlo. Abrigo. Ahora esto siempre tiene que resultar. Cierto. En este caso, no resultó falso porque la edad es menor que la edad de beber. Si hicimos lo inverso que escribimos, edad es menor o igual a la edad de beber. Nos hacemos realidad. ¿ Y si acabamos de hacerlo? La edad es menor que la edad de beber, también cierto. Pero, ¿qué pasa cuando empezamos a comparar variables con otras variables que no existen? Entonces, ¿y si dijimos la edad es igual a igual a otra cosa? Dice, ya ves, obtenemos algo más no está definido. ¿ Y si dijéramos que la edad es igual y sabemos que el otro tipo de datos es indefinido? Bueno, eso es falso, porque las edades de hecho, definido. Pero ¿y si dijéramos algo más es igual a indefinido? Bueno, nuevo, JavaScript nos da un área de referencia y dice que algo más no está definido, y hacer una comparación estricta nos da exactamente lo mismo. Entonces, ¿por qué deberíamos usar alguna vez una comparación estricta? Bueno, echemos un vistazo a los 20 años. ¿ Y si lo hiciéramos? La edad es igual a como una cuerda 20. Eso es cierto lo que dijimos. La edad es igual a 21. Eso es falso. Por lo que JavaScript se da cuenta de que este 20 es lo mismo que un entero, lo cual técnicamente no es correcto, porque se supone que esto no es un número. Esto se considera como una cadena. Aquí es donde empezamos a usar operadores estrictos. ¿ Y si dijéramos Ángeles iguales a Teoh igual a 20? Nos hacemos falsos. Entonces si bien es cierto aquí con una comparación suelta, aquí es falso con una comparación estricta. No, ¿Por qué alguna vez usarías eso? Bueno, porque a veces el usuario va a ingresar información, y cuando la entrada le gusta un número o texto, siempre vuelve como una cadena. Entonces si el agente de usuarios puso pasó a ser 20 cuando queremos compararlo para que sea al menos 21 o superior, podríamos hacer una suelta una comparación suelta mayor o igual a 21 falso, o si tuviera que ser una edad exacta, por ejemplo, alguien ganando la lotería sólo podría serlo alguna vez. Los 20 años tienen que ser exactamente 20 podríamos hacerlo de esta manera o podríamos hacerlo con un operador estricto como este que también sale cierto. De acuerdo, así que ahora en el inverso debilitar hacer no es igual a la derecha, por lo que todavía tenemos edades. 20 lo que fue que la edad no equivale a 20. Eso es falso, porque la edad es, de hecho, 20. Pero cada centavo de edad no es igual a ningún otro número. Cualquier cosa que no sea el número 20. Esto resultará ser cierto. Por lo que podríamos decir que la edad no equivale literalmente a cualquier cosa puede de los que están ahí dentro. No, también podemos hacer una comparación estricta. ¿ Qué pasa si dijimos edad no equivale a indefinido? Bueno, eso es cierto, porque se ha definido la edad. Eso significa que la edad tiene un valor técnico de 20. ¿ Y si dijéramos, um, algo más no equivale a indefinido? Todavía obtenemos el mismo error no está definido. Ahora, ¿y si creáramos otra variable, pero una de esas en blanco que hemos visto sólo un poco de Llamemos a esta variable vacía vuelve como un indefinido porque variable izando, escribimos en vacío, nos metemos bajo hallazgo. Entonces y si dijéramos. Vacío es igual a indefinido. Bueno, eso es cierto. Vacío es igual a estricto indefinido. También cierto. Pero ¿y si dijéramos Empty no es igual a indefinido? Nadie es falso. Entonces es exactamente lo contrario de lo que se ve aquí arriba. Porque Empty, que se declaró es Variable no tiene ningún tipo de información asociada a ella es, de hecho, indefinida. Sabemos que usar el no igual o el estricto no igual comparación que vacío es en realidad falso. Entonces, ¿qué me gustaría que hicieran sólo por un poco de práctica, abran su consejo y comiencen a escribir algunas variables y simplemente las compararan juntas? Realmente no importa lo que sea. Yo quiero que te hagas una idea de cómo funcionan estos versus si está bien o mal. El correcto o el mal puede venir un poco más tarde. Yo solo quiero que entiendas cómo funcionan estas, las comparaciones a las que tienes acceso tienes son iguales a un estricto igual mayor o igual a mayor de lo que tienes menor o igual a. Tenemos menos de lo que no es igual y no iguala estricto. Así que adelante, dale una oportunidad a estos, y cuando termines eso nos vemos en la siguiente lección. 15. Si.. Declaraciones de otros: hola. En esta lección, vamos a estar hablando de declaraciones si else. Ahora hemos hecho mucho coquetear con qué si lo son las declaraciones más. Hemos aprendido sobre comparaciones y variables, y realmente tenemos todos los ingredientes que necesitamos para entender. ¿ Y si otra declaración es ahora. La forma más sencilla de describir qué es una declaración if else es realmente solo que si algo es cierto o si quieres que sea falso, entonces ejecuta un cierto conjunto de abrigo unas pocas líneas aquí. Unas pocas líneas son. Si no es eso, si es lo contrario, hacer otra cosa. Este es uno de esos conceptos fundamentales de todos los lenguajes de programación que todos tienen, si lo demás declaraciones, así es como un programa decide lo que se supone que debe hacer frente a lo que no debe hacer. Ah, y cuando se supone que tome cualquier tipo de acción. Y aquí es cuando las cosas empiezan a ponerse realmente, realmente interesantes, porque los usuarios pueden empezar a introducir su propia información y una vez que ingresan su propia información, puedes empezar, ya sabes, cambiando las acciones en base a lo que han agregado. Entonces como ejemplo muy básico, empecemos con nuestra primera variable. Digamos, el nombre de la variable es igual a Caleb, ¿verdad? Sólo mi nombre. Sabemos de qué se trata todo esto. No excitante. Caleb, llévate. Está bien, me estoy acercando. Entonces si y la impresión los paréntesis para la declaración de la NFL es realmente todo va aquí. Aquí es donde está tu comparación. Tu comparación. Yo no deletreé eso. ¿ Verdad? Ven. Harrison entra aquí. Entonces si nombre es igual a Caleb, que sabemos que es, ¿qué debe correr? Entonces, cuando abrimos una nueva declaración if, envolvimos el nuevo código que se supone que se ejecutará entre paréntesis rizadas, tal y como se ve aquí. Entonces, ¿qué pasó? Ahí estaba yo había entrado un poco demasiado rápido. Entonces supongamos hit, turno entrar. Eso es todo lo que fue. Ahora bien, si me llamo Caleb Alert nombre es Caleb. Todavía no hemos aprendido formalmente alerta. Si no lo es, mi nombre no lo es. Mátalo. Por lo que esto no está formateado muy bien. Por lo general, verás código con un espaciado poco más agradable. Algo así. Ahora es que tenemos Si un nombre es igual a lo que especifiques, ese nombre se supone que es, recuerda, es sensible a recuerda, mayúsculas y minúsculas. A continuación, ejecute el código entre los corchetes rizados. Aquí nadie va a correr. Tan solo una alerta básica. Ahora bien, si el nombre no es igual a Caleb, que recuerden no es el signo de exclamación igual. Entonces si el nombre no es igual a k nivel alertar otra cosa. Entonces, ¿qué pasa cuando dirijo esto? Mi nombre es Caleb. Esa es la alerta que Chrome me acaba de dar. Entonces ahora estamos empezando a meternos un poco más en la interactividad porque esto me acaba de alertar en la página. Y no hay nada de lo que puedas hacer sobre una alerta cuando alertas a alguien que aparece cada vez. Y esa es una afirmación básica si else, eso es todo lo que hay en ello. Ahora bien, si quieres cambiar estos juntos, puedes hacer lo que se llama otra. Si es así, tenemos, si lo contrario si y lo contrario como un ejemplo rápido, si nombre es nombre es igual a escoger cualquier nombre que quieras no tiene que ser tu variable en realidad debería ser otra cosa. Entonces voy a ver si me llamo Joseph Alert. Hola, Joe. De lo contrario si el nombre es igual a, y eso debería ser en realidad espacio ahí más. Si nombre es igual ¿podemos saber que éste es cierto? Entonces esto se va a ejecutar. Esto es cierto ahora. Podríamos simplemente dejarlo aquí si quisiéramos. No hay regla que diga que hay que tener otra declaración o declaración de la NFL. En realidad, Sólo necesitas, si las declaraciones, si algo es cierto o si algo no es cierto, ejecuta cierta pieza de código. Eso es todo lo que es. Pero por el bien de este ejemplo, no es una corrida por esto rápidamente. Si el nombre es Joseph Alert. Hola, Joe. Si el nombre no es Joseph, comprueba si ese nombre es Caleb. Sabemos que eso es cierto. Eso va a correr. Pero si el nombre no coincide con Joseph o Caleb, entonces va a alertar a otra cosa. Por lo que en base a lo que sabemos hasta ahora, solo toma un segundo positivo rápido. Oyes si tienes que Andi, piensa a ti mismo cuál se supone que corre o si cambias el orden de éstos, cuál va a correr? Y si Joseph o Caleb es cierto y uno de los 1° 2 Si las sentencias se ejecutan con éxito, el código dentro de él comienza a ejecutarse ¿también se ejecuta el código dentro de la sentencia else? Averigüemos dice que esto es cierto porque el nombre es Caleb y eso es todo. Por lo que no corrió porque Joseph, el nombre no es Joseph Irán. Porque el nombre es Caleb y no ejecutó la declaración else. Entonces, ¿qué pasa si lo demás si el bloque de lo contrario realmente hace es chequear para una cierta comparación verdadera? Entonces cuando tu comparación sea cierta, solo va a ejecutar ese código. No va a ejecutar ninguno de los otros bloques que escribes con él. En la siguiente lección, les voy a mostrar cómo pedir algo de información. Y luego vamos a hacer declaración de la NFL en base a lo que el usuario ingresa, y te vamos a mostrar que la entrada del usuario puede realmente cambiar cómo actúa un programa. Pero por ahora, tomo un segundo rápido abierto de su cabildo sobre el Decreto Lo. Ah, y si lo contrario si la declaración más para ti en simplemente jugar alrededor de eso, asegúrate de que funcione. Aquí la lección no se trata de alertas, aunque si quisieras tirar eso ahí dentro, no se hace daño 16. Si.. Elseif.. Otro de la entrada de tu usuario: todo bien. En la última lección, aprendimos cómo hacer y si lo demás si y lo demás enunciado. Pero ahora quiero mostrarles cómo podemos tomar alguna entrada de usuario. Ah, y realmente personalizar lo que se supone que haga el programa. Y para ello necesitamos aprender algo nuevo. Algo llamado Prompt y última lección. Aprendimos a alertar un poco en barco. Un poco informalmente, supongo. Pero en este, vamos a aprender sobre el prompt, que básicamente es una alerta con un pequeño cuadro de texto que permite a la gente ingresar información . Ahora, así como una cabeza arriba, ya nadie usa prompts. Pero debido a que las indicaciones son agradables y simples, los vamos a utilizar en esta lección sólo para mostrarte cómo podemos usar la entrada del usuario para cambiar cómo actúa el programa. Entonces sigamos adelante y tecleemos. Nombre es igual a prompt. ¿ Cuál es tu nombre ahora? ¿ Aquí? Yo doy turno entrar porque si me acabo de golpear, entrarlo, sólo va a ser un prompt y no va a hacer nada más. Ahora, aquí es donde empezamos a poner mucho javascript dentro de un archivo JavaScript para que podamos ejecutar más de una línea a la vez. Ahora, dije, Si nombre realmente ve esto, si nombre a minúsculas es igual a Caleb, Sólo mi nombre. Nada. Alerta de fantasía. Hola, Caleb. Ahora esa es una afirmación si básica, podemos dejar eso aquí. De hecho, creo que deberíamos correr eso. Veamos qué pasa. ¿ Cuál es tu nombre? Y voy a poner Bueno, es pedir a Caleb en minúsculas, así que cambiemos eso. Pongámoslo todo en mayúsculas menos a B B. Podría estar en minúsculas porque recuerda, entrada del usuario nunca es la forma que esperas. Por lo que hay que hacer un poco de filtrado extra para asegurarse de que la entrada del usuario sea posible. Ontario dice Hola, Caleb. El motivo de eso es porque tomó mi nombre. Ah, que era Kloo todo en gorras con un ser minúscula y lo cambió a minúscula. Y luego dijo si ese valor en minúscula de la variable nombre es igual a la minúscula Caleb , entonces alerta. Entonces lo que tengo aquí es solo un archivo índice en blanco. No hay JavaScript siendo atacado en esta página. Será lo primero que tenemos que hacer es adjuntar el archivo JavaScript. Entonces la parte inferior de mi cuerpo mecanografiado SRC es igual a javascript dot Js Los IGs de JavaScript es tu archivo JavaScript. Ahora tengo un archivo RGs de JavaScript, y está en el mismo directorio que index dot html está en la misma carpeta. Entonces esto es todo lo que tenemos que hacer ahora para asegurarnos de que esto funcione. Pasemos a JavaScript en Js y teclee alerta. Hola mundo. Todo lo que queremos hacer es asegurarnos de que el guión esté funcionando. Yo guardé esa caja fuerte. Ambos archivos sobre chrome y yo refresco la página y dice, Hola mundo. Eso significa o archivo javascript está funcionando. Ahora hay otras formas de comprobarlo. Este es uno de los más rápidos desperdiciados. Comprueba si tu JavaScript se está cargando. No tienes que abrir nada a tu consular. Es sólo ah, alerta flagrante en tu cara. Es feo, pero hace el tren. Por lo que ahora queremos reescribir nuestro guión. Digamos nombre. Es do nombre variable es igual a cuál es tu nombre, y queremos envolver eso con un prompt y decimos si nombre alerta hola y sabemos cómo puede Katyn ocho. Correcto. Entonces usamos Hola, capitán. Ocho. Nombre variable y hola invitados. Entonces lo que esto está haciendo es que si alguien entra el nombre, si hay información aquí dentro, va a regresar. Cierto. JavaScript va a decir sin embargo hay algo ahí dentro que es cierto. No es indefinido. No lo es. No, no es falso que este tipo de datos de este valor sea de hecho cierto. Tiene alguna información ahí dentro. Y si la hay, sólo denos una alerta de vuelta, saluda y sea cual sea ese valor. Pero si no hay nada ahí dentro, si alguien hace clic en el botón de cancelar, ¿qué pasa? Bueno, hola, Guess Now, esto se llama flujo de datos de piso de información. Y este es también un concepto muy importante. Práctico de todos los lenguajes de programación otra vez es lo que pasa si algo no cumple con tus expectativas. ¿ Y si alguien cancela en el prompt? Entonces digamos esto Regresar a esta página. Voy a golpear, refrescarme y me preguntó cuál es mi nombre ahora. Solo son dos escenarios. Puedo ingresar mi nombre y golpear OK, o puedo cancelar. Entonces, ¿qué pasa cuando pongo mi nombre o a nombre de alguien? No tiene por qué batir mi nombre. Pongamos el nombre de alguien más ahí. Pongamos mi nombre es Zephyr y pegue OK, hellos, Siempre cool. Eso es la entrada del usuario. No, vuelvo a refrescar la página para que ese prompt vuelva a ejecutarse. ¿ Cuál es mi nombre? Y si golpeo cancelar esta vez, ¿Qué va a pasar? Bueno, si miramos hacia atrás su código, si hay un nombre va a decir hola, más tu nombre, si no hay nada va a decir hola, invitado. Y de hecho, en realidad no lo hizo. Y eso es porque me olvidé de tomar en cuenta que ningún tipo de datos. Y eso es algo que simplemente pasa con todos los programas. vez en cuando, nos movemos un poco demasiado rápido. Ah, lección. Como desarrollador, cometer errores está bien. Se te permite cometer errores. Como desarrollador, te estoy dando permiso para que cometas la mayoría de los errores en este momento. Totalmente aceptable. Sólo se vuelve inaceptable cuando comienzas a cometer el mismo error una y otra y otra vez. Entonces, mirando hacia atrás el código, sabemos que el valor del nombre es no. No volvió como un verdadero valor. Por eso corrió aquí. Entonces, ¿qué? Necesitamos dio En lugar de ejecutar una declaración else, ejecutamos una declaración if else. Lo sentimos, ejecutamos un else if statement else. Si nombre es igual a hagamos una comparación exacta y veamos cómo eso desplaza la alerta. Tu nombre está vacío. Di eso. Volver atrás una página Actualizar. Mi nombre es que es cancelada otra vez. Dice hola. No, Bueno, ¿por qué es eso? Qué es Porque la declaración si vino antes que la declaración else if y así una vez que esto sea cierto va a ignorar el resto de la declaración de llantas de Thean. El encadenamiento de mando va de arriba a abajo, y una vez que uno de esos se haya cumplido, no importa qué más tengas ahí dentro, no va a incluir no lo va a ejecutar. Eso es lo que necesitamos hacer es cambiar el orden de esto aquí. Entonces solo voy a mover esta hacia arriba esta hacia abajo Y así todo lo que hice fue decir, comprobar si el nombre no es primero ahora estamos usando una estricta comparación aquí. Veamos qué pasa. ¿ Cuál es mi nombre? Yo pegué. Cancelar de nuevo, dice Hola ¿Por qué está haciendo eso? ¿ podría ser porque tenemos estamos ahí arriba? ¿ Podría ser porque estamos usando una comparación estricta? Podría ser porque no se supone que esté entre comillas o apóstrofes podría ser ahora, como desarrollador, este es uno de esos tiempos en los que se necesita entender que sabiendo todo, es imposible. No tienes que recordar cosas como esta todo el tiempo. Este es un pequeño detalle, y si alguna vez se olvida, es totalmente aceptable subirse a la vieja máquina de Google y teclear. Sea cual sea tu cuestionamiento que sea tu consulta, lo más probable es que te lleve a una página de desbordamiento de pila y probablemente la encuentres una respuesta bastante buena ahí dentro. Ahora cambia para conocer el dedo del pie. Elimina estas estricta comparación, y solo quiero ver qué va a pasar esto bien. Estamos experimentando aquí y otra vez, experimentando como desarrollador completamente aceptable porque así es como aprendes. Experimentas, cometes errores y reiteres sobre que solo sigues iterando, y cuando comes, aprendes cada vez más. Eso es todo el desarrollo es. Eso es tecnología realmente vieja. Es. ¿ La gente está probando cosas nuevas y avanzando, fallando, dando un paso atrás, dándose cuenta por qué fallaron e intentándolo de nuevo. Eso es todo lo que es. Todavía tenemos No, eso está bien. ¿ Qué pasa si quitamos barra? Todavía nos conocemos ahora. Otra opción que tenemos es comprobar para ver si se trata de una cadena o no. Ahora bien, ¿recuerdas hace unas lecciones? Bastantes lecciones para ir. Dije que la entrada del usuario siempre viene como una cadena. En su mayor parte, eso se mantiene cierto en todas las plataformas para cada sitio web y aplicación. Y eso es sólo porque no sabemos si los números son el usuario. Se supone que el insumo es un número o un impuesto, y es nuestro trabajo como desarrollador averiguar qué es. Entonces todo lo que voy a hacer es agregar cotizaciones por aquí. Entonces ahora va a decir si el nombre es no como una cuerda como esta es lo que trajo de vuelta. Esto es lo que piensa. Tu nombre actualmente no es que no haya nada ahí dentro. No eso nada más. No es que esto sea un número o a flote. Simplemente piensa que este es tu nombre. Por lo que sería una cuerda. Guarda eso. Refresca la página, haz clic en cancelar, y te garantizo que esta vez va a funcionar. Tu nombre está vacío, así como así. Entonces ahora sabemos qué pasa cuando tu nombre está vacío? No, Como lección de aprendizaje. Vuelve atrás, descubre lo que pasó. Hit. Refrescala. Cancelar. Mi nombre sigue vacío, así que sabemos que no fue de nuestro ¿Qué pasa si hacemos una comparación estricta? Lo mismo. Entonces sabemos con el comparador callejero que esto está regresando? No, no. Otra forma de comprobar. Este es este hermoso, hermoso método Aquí. El registro de la consola registrará cualquier cosa en tu consola. Lo que voy a hacer es que voy a inspeccionar. Actualizar la página que cancela dice que mi nombre está vacío sobre la consola. Y esto es con lo que volvió. Ahora sabemos cuál es la respuesta. Ahora no tenemos que hacer muchas de estas pruebas adicionales. Podemos hacer un registro de consola aquí mismo. Podríamos hacer un inicio de sesión de consola aquí. Hacemos uno aquí dentro. Podríamos hacer uno aquí para ver hacia dónde va la información, y te da una mejor idea visual de dónde fluyen también tus datos. Ahora qué pasa cuando pongo Mi nombre es Caleb. Hit. Entrar. Hola, Caleb. Asesinado entra aquí. Simplemente se espera. Justo como qué? No hay trabajo. Lo que sabemos respuesta nos dio, pero especie de No, es Caleb, como desarrollador es un programa también es tu trabajo buscar eficiencias. Entonces miramos esto, si otra afirmación si otra sabemos que sólo puede haber dos tipos diferentes de entrada . ¿ Verdad? Sabemos que sólo puede haber una cancelación y en OK, ¿envía su nombre o cancela? Eso es todo. Lo que tenemos aquí es si tu nombre está vacío. Si no agregaste una alerta de nombre de que tu nombre está vacío de lo contrario, básicamente, en cualquier otra situación solo tienes que alertar al nombre. Entonces, ¿por qué en la tierra tenemos la declaración de lo demás ahí en absoluto? Si sólo hay dos escenarios, sólo necesitamos hacerlo. Si las declaraciones else, no necesitamos comprobar cuál es el nombre en la declaración else. Porque, francamente, el nombre siempre se va a reiterar de nuevo en el mensaje de alerta. Ahora bien, si quisiéramos asegurarnos de que el nombre fuera algo muy, muy específico, entonces diríamos si de lo contrario si el nombre es igual a otra cosa, y sólo en ese tiempo se mostrará esta. Entonces intentémoslo. Probemos con otro nombre. De qué está haciendo esto si no tienes nombre. Si cancelaste, tu nombre está vacío. Si el nombre es Henry, alerta a Henry. De lo contrario. Si no cumple ninguno de estos criterios, haga nada, y esto es exactamente lo mismo que dejar ahí una declaración L en blanco. La única diferencia es que no necesitas tener ahí la declaración else. Si no va a correr nada, es Vamos a deshacernos de eso. Guárdalo. Tipo en Henry. Hola, Henry. Pero como ejemplo, cuando tecleamos cualquier otro nombre, gente escribe en pradera. No pasa nada. Seguimos recibiendo el nombre. Estamos consiguiendo el registro de la consola, y eso siempre viene justo aquí. Pero no había alerta, por lo que esa es más o menos la más en profundidad, si lo contrario si la declaración se basa en la entrada del usuario que alguien realmente podría darte avanzando , el if y si las declaraciones realmente no se ponen demasiado complicado. Pero mientras tanto, lo que quiero que hagas es que básicamente te lleves este guión si puedes. Preferiría que escribieras esto. No es un guión largo, así que no te va a llevar mucho tiempo, pero escribirlo te da un poco de memoria muscular y tus dedos, así que escribirlo se vuelve un poco más fácil en el futuro. De acuerdo, eso eso eso es todo para si else if y else declaraciones y te veremos en la siguiente lección. 17. Selecciones de consulta: Hola. Bienvenido de nuevo. Originalmente iba a repasar algunos conceptos más fundamentales de programación en Javascript. Pero para ser honesto, se está poniendo un poco seco. Y creo que necesitamos algo un poco más emocionante, algo un poco más interactivo, algo que realmente demuestre por qué Javascript es tan popular y por qué es un buen lenguaje de programación ahora, para hacer eso, Creo que necesitamos crear un poco de interactividad en la página. Entonces ahora vamos a editar un poco de HTML. Este curso no está basado en HD Miller CSS. Por lo que el estilo que ves el HTML básico es muy crudo. No estamos aquí para hacer una hermosa página web. Seguro que conoces HTML y CSS y puedes hacer que esto sea lo más hermoso que quieras. Pero para el propósito de esta lección, vamos a mantener las cosas simples. Entonces lo que vamos a aprender hoy son los selectores de consultas. ¿ Cómo obtenemos información o cómo agregamos información a la página? Entonces tenemos dos partes a esta lección que me gustaría repasar el 1er 1 es cómo agregamos información a la página y el 2do 1 es cómo agarramos información de la página Ahora, un selector de consultas requiere ya sea una clase y yo d o en elementos. Ahora, hay formas de hacer que esto sea mucho más complicado, pero vamos a seguir con lo básico en este momento. Y en este momento, debes estar familiarizado con ideas y clases y HTML y CSS. Entonces lo que voy a hacer aquí es que sólo voy a escribir una clase básica. En realidad, vamos a hacer un yo D. Voy a llamar a este main, Así que tengo un diff llamado Main con la idea de Maine ahí dentro. Esa idea es muy importante, y voy a dejar esto en blanco. No va a haber nada ahí ahora a través de mi navegador. Y estoy viendo la apertura el cabildo y lo que vemos aquí dentro de la sección Elementos . Si apago el cuerpo, podemos ver que Maine está ahí en caso de que no supieras que realmente puedes editar información aquí, así que haz que esto sea un poco más fácil para que veas escuchar. Por lo que agregué la palabra probada y la agregué a mi página inmediatamente. Entonces agrega un poco más dice y más para que no tenga en cuenta tu espacio en blanco extra porque eso es lo que HTML huele no es terrible tu espacio en blanco extra a menos explícitamente le digas que necesita tener más espacio en blanco. Entonces voy a deshacer esto. Voy a repasar mi consola y soy una variable creativa, y esta variable sólo se va a llamar cuerpo. De hecho, en realidad no necesitamos la barra, y todo lo que queremos hacer es el selector de consulta de punto de documento elevado. Ahora, la razón por la que usamos documento dot es porque el selector de consultas es un método, una función que forma parte del documento de página. Entonces escribimos Cree selector y ¿qué buscamos? Bueno, estamos buscando el I. D de Maine. Por lo que envolvemos esto en una cadena con paréntesis a su alrededor porque es una función. Y al igual que estás apuntando en CSS, apuntas de la misma manera usando selectores de consultas. Entonces aquí escribimos main it enter, y nos da nuestro HTML. Podemos verlo ahí dentro, así que sabemos que está seleccionado lo correcto. De hecho, realidad, lo que voy a dio porque no quiero. Yo creo demasiadas variables de nombres diferentes. De hecho, lo que voy a usarlos y aclarar esto ahí tenemos Maine es igual a significar. Yo quiero asegurarme de que Maine sea igual a mí de esta manera. Nadie se está confundiendo sobre el elemento corporal principal. Si quisiéramos agregar alguna información a este elemento, agregamos HTML interno. Y cuando empezamos a escribir la palabra dot inner, obtenemos paréntesis html de punto interno en un abrir una cadena y decimos: Hola, Hola, mundo. ¿ Por qué esto no funcionó? Utilizamos paréntesis. Usamos una cadena al igual que hicimos en el selector de consultas, pero nos dio una promesa de que HTML no es una función it. Cuando ves algo así, es porque literalmente no es una función. No hay nada que correr. En cambio, lo que quieres hacer es cambiar el valor real. El HTML interno es lo que se mantiene dentro del elemento horno. Eso es lo que Javascript lo ve, como. Lo ve como una propiedad, no una función sino como un atributo, igual que cómo podría tener cabello oscuro o ojos azules. O podría estar usando una camisa verde. Es propiedad de quién eres o qué llevas puesto, y eso es lo que vamos a editar. Entonces en lugar de tratar de cambiar las propiedades fundamentales de una persona para que cambien color de su camisa, sólo vamos a cambiar el color de su camisa porque no tiene que ser tan complicado. Entonces aquí escribimos principal punto menor hembra es igual a hola mundo, y vemos que aparece automáticamente. Entonces ahora nos estamos volviendo mucho más interactivos son JavaScript en realidad es capaz de entrar y editar cosas que están en la página siempre y cuando sepa qué buscar. En este caso, está buscando el I. D de Maine, que sabemos que está aquí Ahora. Si miramos el elemento, realidad agregó, Hola, mundo para nosotros. Entonces si quisiéramos, podríamos entrar aquí. Podríamos editar este hola mundo a To para aparecer en su cónsul podríamos volver a correr lo mismo , y solo va a anular así como eso, ya sabes, si quisiéramos sumar más, nosotros puede usar un operador aritmético. Decimos Maine pensamiento interfaz email es igual a lo que sea actualmente más hola mundo . Entonces en lugar de agregar Hola mundo, vamos a agregar otra línea aquí que solo dice que estoy editando cosas Page. Y ahora miramos aquí y dice: Hola, Hola, mundo. Yo estoy editando a este paciente. Tenemos ambas sentencias ahí dentro. Pero ¿y si quisiéramos obtener la información de ahí y almacenar eso en una variable editada y ponerla de nuevo en la página? Bueno, nosotros también podemos hacer eso . Vamos a crear una nueva variable llamada contenido Nombre de variable no es importante. Puedes llamarlo como quieras, digamos principal punto inter html. Y ahora cada vez que escribimos contenido, llegamos al contenido actual. Entonces, ¿qué pasa ahora que hemos creado la variable de contenido que tiene Hola mundo? Estoy editando esta página como una cadena. ¿ Qué pasa si volvemos a editar el HTML de teatro? Sólo cambio de contenido. Bueno, averigüemos el punto principal inter anciano, ¿sabes? Bueno, sabemos que eso es lo mismo. Adelante y cambiemos eso. Y agregamos la palabra editada. Ahora, ¿qué pasa cuando volvemos a teclear contacto? No se almacenó ningún contenido de la forma en que originalmente agarramos la información. Entonces sólo porque almacenaste información en una de las variables desde el enter A she male no significa que no puedas ir y cambiar eso en tu HTML otra vez y que tu contenido cambie. Esto es algo muy, muy bueno. Por lo que ahora tenemos el contenido original. No tenemos la palabra editada ahí dentro. Eso es perfecto. Eso es exactamente lo que queremos. Pero ahora queremos editar contenido y arrojarlo de nuevo a la página. Queremos editar la página en base a qué? De lo que solía ser. Por lo que vestirse como demostración. Vamos a cambiar el Inter html para que me quite por favor. Sabemos que el contenido sigue siendo lo que era originalmente. Entonces ahora editemos el contenido de contacto es igual a Bueno, ¿qué queremos hacer con él? Podemos cambiarlo a mayúscula para que el contenido a mayúscula. Ahora, una cosa hermosa en JavaScript es esta capacidad de encordar métodos juntos Así que podríamos decir a mayúsculas Y entonces también podríamos decir puntos reemplazar caras por guiones. ¿ Y qué pasa cuando golpeamos? Entrar? Hizo exactamente lo que queríamos. Eso se volvió todo a mayúsculas. Sustituimos nuestro primer espacio por un guión. Eso es porque no le dijimos que reemplazara todos los espacios. Acabamos de decirle que reemplace el 1er 1 de su tipo. Entonces ahora si escribimos punto principal en ella, HTML es igual al contenido. Hemos cambiado el contenido de la página. No obstante, al hacer esto, anulamos la variable de contenido original y ya no es lo que solía ser. Ya no podemos recuperar eso. 18. Selectores de consulta parte 2: vamos a hacer otro ejemplo. Vamos a crear una entrada. Vamos a usar un elector de clase en su lugar y vamos a llamar a este campo de texto para tener un tipo de entrada. Es clases de impuestos, campo de texto y dentro de este campo de texto. Vamos a suponer que alguien ha ingresado algún tipo de información aquí. Alguna info aquí volvemos a una actualización de página. Tenemos un campo de entrada básico, igual que alguna info aquí Ahora, ¿cómo obtenemos esa información? No es lo mismo que como lo hicimos con Main. Probemos eso. Hagamos txt es igual a documentos. Doctor Query, selector Cuál es el selector que buscamos punto campo de texto punto Ser la clase al igual que en CSS cool. Eso nos da todo el elemento. Tenemos todo el elemento a modificar aquí. ¿ Qué pasa si lo hacemos? Txt no en ella. HTML era igual a prueba prueba de retorno. No parecía que cambiara nada ahí dentro. Bueno, está bien, cambia el html interno de entrada. No obstante, entrada es uno de esos elementos que no tiene HTML interno. Es una etiqueta de auto cierre. Sólo hay uno. No lo es. No es como un div o un campo de texto o un área de texto. Más bien, el campo de entrada generalmente solo se ve así. Ese es tu campo de entrada. Entonces, ¿cómo vemos el insumo que queríamos cambiar? ¿ Cómo vemos eso en la página? El truco aquí es que ya no estamos editando edición interna de HTML y atributos. Queremos cambiar el valor queremos cambiar el valor en tributo. Entonces en su lugar escribimos txt y luego el nombre de los atributos es igual a un nuevo valor de atributo. Y ahora podemos ver que el valor del campo de texto también ha cambiado. Ahora bien, si quisiéramos obtener esa información, crear nueva variable llamada input es igual al valor txt dot. Y si alerto la entrada, nos da exactamente lo que hay en la página. Pero ¿y si lo cambiara dinámicamente en la página? ¿ Y si soy un año? No estoy mirando el código, ¿verdad? Como usuario, solo quiero interactuar con la página normalmente, Así que voy a saludar. Mi nombre es Length y quería volver a obtener esta información. Bueno, sé que quiero alertarlo y sé que necesito volver a obtener esta información. Entonces, ¿qué pasa si dio valor txt dot? Obtenemos el valor del campo de entrada ahora es perfecto, pero eso podría ser un poco confuso. Por qué funcionó aquí, pero no funcionó en el ejemplo anterior. Cuando estamos cambiando el HTML interno, eso no quiere decir que en realidad no funcionara funciona de la manera en que queríamos que lo hiciera. No obstante, hay poco de diferencia porque estamos trabajando con un valor. Entonces lo que estamos haciendo aquí es que estamos agarrando la variable txt desde aquí arriba. Y sabemos que esto es seleccionar este insumo todo este elemento. Ahora la variable no ha almacenado el valor de este elemento. No obstante, esta variable se refiere simplemente a todo el elemento. Entonces, en cualquier momento que cambie el valor, podemos seguir adelante y obtener el nuevo valor porque no almacenamos eso en una variable. Ahora, si lo hicimos, los datos son iguales al valor txt dot obtenemos Hola, Mi nombre es lámpara. Si cambiamos txt, ese valor es igual a otra cosa. Vuelve a escribir datos. Es de vuelta a donde estaba, así que básicamente toma una instantánea de dónde estaban los datos, qué era. Ah, y lo almacena en una variable para ti. Iba a comentar esto en HTML para que no se presente, y voy a volver a Maine y voy a cambiar algunos de estos atributos de estilo porque en javascript, una cosa muy común que quieres hacer es agregar clases, Eliminar el estilo, agrega estilo. Ya sabes, básicamente quieres manipular tu CSS porque CSS es extremadamente estático. ¿ Quieres cambiarlo de vez en cuando? Actualizar la página? No tengo absolutamente nada ahí mirando mis elementos. Sé que Maine está ahí. Mi insumo también está ahí, pero está comentado. Entonces no vamos a trabajar con eso. El principal se principal es igual al documento Di Query selector Cool. Seleccionó al correcto. Ahora si quiero cambiar el inter html Perfecto. Ahora tenemos algo de texto en la página y si quiero cambiar el estilo, decimos principal punto style dot border porque se trata de un objeto orientado a un tipo de lenguaje de notación de puntos . Se busca el estilo y luego se busca el orden de estilo CSS específico es como una cadena uno recoge rojo sólido, y ahora tenemos un borde rojo sólido de un píxel alrededor. Una cosa que no puedes hacer, sin embargo, es que si quisieras agregar orden a solo la parte superior, no añades guiones en su lugar, lo camello caso y sería frontera. Y en lugar del guión, usa la T mayúscula Eso en realidad es un mal ejemplo porque ya tenemos frontera. Usemos otra cosa. Main dot style dot patting top es igual a Hagamos esto absurdo y digamos, 50 pixels Ahora que el relleno solo se llevó a cabo en la parte superior y lo que pasa Y su página es donde dice estilo. Estamos cambiando los atributos de estilo ahora. No le dimos un atributo sobresaliente en ningún HTML, sino JavaScript lo suficientemente inteligente como para darse cuenta de eso. De acuerdo, esto puede tener un estilo casi todo en estilo de cabina html. Entonces va adelante. Crea el atributo para nosotros, y lo llena con la información que le dimos. Le dimos un estilo de un píxel, borde rojo sólido con una palmadita de 50 píxeles en la parte superior. Ahora, si no estás familiarizado con cómo editar CSS solo un pequeño recordatorio rápido es cuando estás en tu página de elementos, puedes cambiar estos también. Y si no te gusta lo que estás diciendo, siempre puedes agregarle el HTML directamente. De acuerdo, así que eso es selector de consultas en pocas palabras. Lo que quiero que hagas es quiero que creas elemento en tu página HTML. Te daré los archivos del proyecto también, creando elemento en tu página HTML y luego abrir tu cónsul y escribir un selector de consultas Grab que lo puso en una variable como viste con Main es igual a documento Dockery selector . Entonces quiero que cambies el HTML interno y luego quiero que cambies el estilo del mismo. Y no sólo tiene que ser la frontera del relleno. Prueba otras propiedades CSS de las que estés al tanto. Podría ser color de fondo de margen. Podría ser el color de la fuente, y luego quiero que básicamente hagas lo mismo. Pero en lugar de usar un I D selecto o elector de clase solo usando elementos, elector, ve qué pasa cuando seleccionas todo el cuerpo y cambias el color de fondo en el cuerpo 19. Introducción a las funciones: Hola otra vez. En esta lección, ahora vamos a estar hablando de funciones. Las funciones vuelven a ser una parte muy importante de la programación. Está en cada lenguaje de programación, y esencialmente lo que es una función es que establecen cantidad de código que se puede ejecutar una y otra vez sin tener que copiarlo y pegarlo una y otra vez. Esto cae en línea con D R Y, que Eyes es la metodología seca de No te repitas. Entonces, cada vez que estés escribiendo código, intenta no repetir exactamente el mismo código una y otra vez. Si alguna vez tienes que repetir el mismo código, debería entrar en una función. Pero una función también puede tomar parámetros o argumentos, y básicamente, lo que hace es introducir información, y escupe un poco de información. Entonces echemos un vistazo a una función de muestra rápida. Una función de ejemplo siempre comienza con la palabra función, y así es como JavaScript sabe exactamente lo que es esto. Y luego le das un nombre y puedes nombrarlo casi cualquier cosa. Se adhieren a las mismas convenciones de nomenclatura que las variables. No empieces con el número. No uses guiones. Básicamente, cualquier otra cosa va así para este. No estamos se llama además, y sólo vamos a sumar dos números juntos. Eso es todo lo que vamos a hacer. Entonces esto se parece mucho a una declaración else donde tenemos los paréntesis y luego tenemos nuestros corchetes rizados, y cualquier cosa dentro de los corchetes rizados es parte de la función. Cuando queremos sumar números juntos, podemos ejecutar esta función una y otra vez. Entonces lo que sea que esté aquí va a poder correr una y otra vez. Ahora, sólo porque alguna vez escribiste una función no significa que se vaya a ejecutar. Está registrado en parte de tu aplicación, pero en realidad necesitas darle un comando que necesitas para darle JavaScript. Tienes que decirlo, Oh, Oh, ve y ejecuta esa función en particular. Entonces para hacer eso, simplemente corrige el nombre de la función sin la palabra función delante de ella. Dale los paréntesis que necesita, y eso le dice a Javascript, solo con estos paréntesis, esa es una función y la ejecutará. Entonces vamos a darle un tiro aquí alerta. Hola. Yo soy una función ahora cuando abro esta página y la refresco Este es el escenario femenino aquí, por cierto. Es sólo de la lección anterior que vamos a seguir. Agregar a esto es HTML ya que una lección va en otra de todas formas. Así que refresca la página y dice: Hola, Hola, soy una función. Refresca la página. Hola, soy una función. Si comento este abrigo y refresco la página de nuevo, no pasa nada. Estoy refrescante una y otra vez, y no pasa nada. Eso se debe a que JavaScript sabe que la función existe, pero también sabe no ejecutarla aún hasta que se le diga que lo haga ahora. Esta función, partir de ahora, no es muy útil ahora. ¿ Y si quisiéramos ejecutar un cierto conjunto de código que sólo pide el nombre de alguien? Al igual que en ejemplos anteriores que hemos hecho bien, podemos crear variables dentro de una función el mismo nombre es igual a. Y vamos a krump ¿cuál es tu nombre? Entonces todo esto va a hacer es preguntar cuál es tu nombre y decir Hola nombre? Ya hemos visto esto antes, pero la diferencia es que esta vez está en una función. Entonces digo, si refresca, dice, ¿cuál es tu nombre? Voy a poner mi nombre ahí dentro. Hola, Caleb. Nada de fantasía. Nada de lo que no sepamos todavía. La única diferencia es que esencialmente estamos ejecutando esto desde un comando. Y si quisiéramos atropellar esto una y otra vez, podríamos poner este y otros fragmentos de código podríamos decir, Si hoy es igual a ustedes saben, miércoles hay que asignar hoy para ser lo que sea el día en realidad. En este caso sólo sería W e d. Entonces adición otra tradición. Entonces ahora no estamos escribiendo estas dos líneas de código aquí dos veces. Estamos usando sólo esta línea dos veces. Y así crea esta referencia de nuevo a lo que se supone que debe hacer el conjunto original de código. Y ahora no te estás repitiendo. No tiene sentido escribir lo mismo una y otra vez. Si pudieras escribirlo una vez y hacer que se ejecute exactamente de la misma manera cada vez. Ahora continúa con esto con este ejemplo. Hagamos realmente alguna adición aquí. Hagamos El número uno es igual a 15. Num num dos es igual a 89 y alerta. Una entumecida. Además estoy demasiado encendido. Entonces vamos a deshacernos de estas cosas. Guárdalo, refresca la página me da 104. Eso se debe a que agregó 15 con 89 acaba de devolver eso ahora. Ah, la función no debe alertar algo, ¿no? Alerta es generalmente, en realidad sólo una mala práctica. Es bueno para depurar, pero en realidad, las alertas lo son. Es una cosa de JavaScript de la vieja escuela que la mayoría de los desarrolladores ya no usan. Entonces digamos que queríamos poner estos dos números 15 y 89 sumados en una variable. Bueno, ¿cómo obtenemos el total? El número 104 que vimos en una variable fuera de la función porque podemos dio total es igual a alguien más entumecido a impresionante. ¿ Qué hacemos con eso? Bueno, intentemos ejecutar esta función y luego veamos qué sucede cuando ejecutamos Alertas totales. Refresca la página. Yo consigo 100 y cuatro cool. ¿ Qué pasa si me muevo esto por encima de la adición? No pasa nada y refrescante. No está pasando nada. ¿ Por qué es eso? Bueno, si abro mi consola, aquí no tenemos aire. Total no está definido ahora. ¿ Por qué es eso? Eso se debe a que javascript no sabe que esto existe a pesar de que total está justo aquí a partir de este momento, no se ha declarado así de nuevo. JavaScript es consciente de esta función. No conoce el contenido de la misma hasta que se ejecuta. Entonces si bajamos esto, guardamos, refrescamos la página, nos da el número que estamos buscando. Pero ahora, ¿qué pasa si nosotros, uh, vamos a mantener eso ahí? ADV están frente a ella? Refrescar El total de la página no está definido. A pesar de que se definió hace un momento, ya no se define. Ahora, ¿por qué es eso? Eso se debe a que Var declara una variable dentro de un alcance. Ahora alcance es este concepto de que las variables pueden Onley existir dentro de ciertas áreas. Entonces si tienes ah, funde cualquier función con var y luego tienes una variable, solo se puede acceder alguna vez dentro de esa función. Entonces podrías estar pensando en este momento, Bueno, ¿por qué diablos querría eso alguna vez? ¿ Por qué no querría que total fuera accesible con esta función después de ejecutarla? Y esa es una pregunta justa, y la respuesta honesta es que no quieres que las variables se desangren de sus alcances. A veces es por motivos de seguridad. A veces es por eficiencia. En ocasiones es solo para mantener limpio tu código, pero no quieres usarlos fuera de tus funciones. Entonces si no se supone que lo usemos de esta manera, ¿cómo diablos se supone que vamos a conseguir total fuera de la función? Bueno, aquí es donde entra la hermosa palabra clave de retorno. Volvemos total. Por lo que total se ha declarado aquí es la adición del número uno, más entumecido para que regresemos ese total. Y si ejecutamos esto en nuestra página, todavía obtenemos Total no está definido ahora. ¿ Por qué es eso? Porque lo que hace el retorno es que dice Ok, voy a ejecutar esta función, y voy a devolver esto como la definición de una variable. Entonces si tenemos y lo hemos hecho muchas veces, eso si hicimos nombre variable es igual a John. Sabemos que este es el valor de la variable llamada John, pero en cambio lo que podemos dio es, podemos decir, Vamos en realidad a dejar que las cosas vayan en Variable Total o llamémoslo Nuevo Total en cambio es igual a suma . Entonces en lugar de decir esto es 104 como una cadena o un entero o en lugar de decir 15 más 89 todo lo que estamos diciendo es almacenar lo que esta función descubra el total para estar en esta variable. Entonces ahora si dijimos alerta Nuevo total, esto nos dará 104. Así que vuelve a la página Refrescar 104 como esperábamos. Ahora, dentro de tu función, puedes ejecutar todo el JavaScript del mundo. Idealmente, nunca debería filtrarse fuera de su función que su función debería ser un conjunto contenido y específico de instrucciones que puede usar una y otra vez. Pero digamos que queremos personalizar esto. Queremos personalizar bien el número uno y el número dos, cada vez que corremos, esta función siempre va a ser 15 y 89 respectivamente. Eso no es lo que queremos. Las funciones suelen usarse mejor cuando son extremadamente dinámicas, y lo único que queremos hacer es que queremos automatizar numb uno más entumecido a Así que en lugar de decir, número uno y el número dos son siempre los mismos números exactos y dijo que les damos parámetros o argumentos y todo lo que dio es crear una nueva variable dentro de los paréntesis, separados por una coma y otra nueva variable. Ahora este es el nombre, como se puede ver aquí, entumecido a adormecer uno coincide con el número uno. Entonces sigamos adelante. Elimine thes porque en cuanto se ejecute esta función, va a crear esta variable dentro de la función, y sólo es accesible dentro de esta función. Entonces si hicimos diferentes números esta vez 10 y 15 estamos diciendo Run Edition. El primer número debe ser 10 y el segundo número debe ser 15. A continuación las funciones van a tomar el número uno, que es 10 entumecidos a los que son 15 totales en conjunto. Devuelva eso a una nueva variable para nosotros. Cuando alertemos a esa nueva variable, vamos a conseguir lo que sea que vaya a ser el total. Entonces voy a guardar esa actualización. Y en cuanto esa actualización, esto va a alertar con el número 25 así. Ahora bien, ¿por qué es útil eso? Pero puedes crear una calculadora. Es una calculadora bastante básica, pero puedes crear una calculadora que solo tenga la función de adición en este momento. Pero ¿y si quisiéramos sumar más? ¿ Y si quisiéramos hacer edición diferente Así que, en lugar de tener que correr total es igual sintonizar número uno más entumecido o tener que explícitamente duros números en nuestro programa o aplicación, ahora podemos decir cualquier otro número en el mundo, y lo que voy a hacer es en lugar de alertar, voy a consola, registro, registro consola, nueva coma total, el total. Para guardar eso, voy a refrescar la página en lugar de que la respuesta sea alertada a la página. Va a aparecer en la consola. Entonces golpeé a las cinco, y ahí tenemos 25 y 1114 ahora esa es la adición de estos dos números y estos dos números. Entonces ahora tenemos una función que está haciendo lo mismo una y otra vez. Completamente honesto contigo. Este curso no se trata de las cosas de azucarado, como puede que ya hayas experimentado. Pero esta función es honestamente, es una tontería. No hay razón para que esta función realmente deba existir. Pero si quisieras, podrías hacer esta función significativamente más compleja. Podrías tomar una entumecida que te multiplican por pi a la que podrías tomar entumecido, y podrías dividirte por lo que sea en sí mismo que puedas llevar entumecido, y podrías cuadrado arraigado por cualquier número que quieras. Ahora, ya no tienes que recordar esa fórmula. O si tienes una fórmula matemática específica, cierto, así que va a tomar entumecido una vez básicamente pastel y luego se va dedo del pie Adam dos dividido por ocho. No puedo hacer eso en mi cabeza, así que voy a ahorrar eso. ¿ Y qué pasa cuando refresco la página? Me da un número muy preciso. Entonces ahora es hacer matemáticas básicas para nosotros y comprar básico. Me refiero a la adición de multiplicación, y la división sigue siendo básica, pero sólo he escrito esta fórmula una vez. No tengo que volver a recordarlo. Lo único que debo hacer es agregar comentarios alrededor de esta función en cuanto a qué está haciendo exactamente . Entonces lo que me gustaría que hicieran para esta lección es, quiero que creéis una nueva función. No tiene que ser agregado. Podría llamarse como quieras. Puedes tener tantos parámetros como quieras. Podría ser un parámetro. Podrían ser 30 parámetros, aunque preferentemente no hagan eso. A lo mejor apegarse a un límite de como cuatro parámetros en Max sólo porque llega a ser mucho recordar cualquier cosa que hagas dentro de tu función. Y realmente no me importa lo que hagas dentro de tu función siempre y cuando lo guardes como una variable dentro de tu función y lo devuelvas para. Alternativamente, podría tomar esto, y va a devolver el mismo número exacto para usted sin almacenarlo en una variable. Acabo de hacer esto para mayor claridad, pero quiero que devuelvas lo que sea que se supone que tu función debe regresar y luego tirarlo a dos nuevas variables y llamarlo un log se apaga igual que lo hice con este video . En la siguiente lección, vamos a crear un par de funciones más justo como demostración porque las funciones aire tan increíblemente importantes. Quiero asegurarme de que esto esté realmente perforado en tu cerebro, porque de nuevo, esto es algo que puedes llevar desde JavaScript a cualquier otro lenguaje de programación del mundo. Así que adelante, haz esa tarea muy rápido, y luego haremos un par de ejemplos. Un par de ejemplos más de funciones en el siguiente video 20. Ejemplos de función: en esta lección. Yo solo quiero repasar algunos ejemplos más de lo que se puede hacer en una función, y eso realmente no se limita a nada. Puedes hacer cualquier JavaScript dentro de una función pero funciones o algo con lo que vas a estar trabajando todos los días. Y quiero asegurarme de que realmente entiendas lo que es así si no tienes un conocimiento completo de qué funciones están aún en este video definitivamente es para ti. Entonces en el último video creamos además función, y todo lo que hizo fue sumar dos números juntos. En cambio, sigamos adelante y creemos algunas otras funciones diferentes, y esto es realmente justo, por ejemplo, propósitos. Estos podrían no ser prácticos en la vida real, pero sólo quiero mostrarles lo que pueden y no pueden dio o más bien saber lo que no pueden hacer , justo lo que son capaces de hacer. Entonces recuerda, siempre comienzas con una palabra clave de función, y esa es una palabra reservada. Entonces no llames a tus variables. pone la palabra función que se va dedo del pie causa un poco de, ah, dolor en tu vida como desarrollador. Entonces esta función, solo llamémoslo get name y este no va a tomar ningún parámetro en absoluto. Ahora bien, si nos fijamos en su índice de punto html, tenemos de una lección anterior yendo a esto, tenemos un campo de entrada llamado Campo de texto. En realidad voy a cambiar eso por nombre y nombre. Esto es lo que el valor va a ser realmente va a cambiar. No quiero a Namie Aziz de nombre real un nombre totalmente, verdad John Smith. Y sólo para que puedas ver cómo se ve esta página, todo lo que tenemos es entrada Campo llamado John Smith. Eso es lo único que es visible volviendo a un JavaScript. Adelante y consigamos este valor. Queremos obtener este nombre por lo que creamos una nueva variable y queremos que esta misma variable sea local a la función. Por lo que usamos el nombre VAR es igual a documento dot query, query, selector y queremos seleccionar por su nombre de clase de nombre. Ahora bien, si recuerdas de una lección anterior, cuanto seleccionamos este elemento, tenemos acceso a todo este elemento. Tenemos acceso a su HTML interno, que no hay ninguno porque es una etiqueta de autocierre. Tenemos acceso a su valor. Sus clases escriben cualesquiera otras propiedades y atributos que le podamos dar. Tenemos acceso a todo eso ahora, pero todo lo que queremos es el nombre. Entonces cambiemos de nombre también Elemento de nombre, porque ese es solo el elemento del elemento HTML. Y vamos a obtener el nombre como nombre elemento punto valor. Entonces sabemos que el elemento de nombre está seleccionando los elementos de nombre aquí, y vamos a agarrar el valor que coincide con esta propiedad o este atributo. Enfriar. Entonces ahora tenemos un nombre. ¿ Y si queremos mutar ese nombre? ¿ Y si queremos modificarlo un poco? ¿ Y si dijéramos que el apellido Smith es demasiado común y tiene que ser otra cosa? Con cualquier momento el apellido Smith aparece, automáticamente lo reemplazamos. Bueno, lo que podemos hacer es crear una nueva variable. Ahí lo va a llamar un nuevo nombre es que podría nombrar punto reemplazar a Smith con llamar y para ejecutar esta función, acabamos de correr, obtener nombre. Refresco esta página. Absolutamente. No va a pasar nada. Abrí mi consola y no ha pasado nada. Ahora, ¿por qué es eso? Porque esta función no está devolviendo nada. Si dijimos alerta nombre nuevo, se va a ejecutar esta función. No va a correr estas cosas. Reconoce que está ahí, pero no va a ejecutar el código hasta aquí. Voy a seguir adelante, guarde ese refrescar la página en consigo a John Colleen, quien sea que sea. Pero no queremos aprender el nombre. Ya nadie usa alertas. Entonces lo que queremos hacer es que queremos devolver nuevo nombre y en lugar de simplemente ejecutar la disfunción , que aún se ejecutará. Pero simplemente no tenemos acceso a nada todavía. Vamos a crear otra variable llamada nombre actual que va a obtener el nombre de El área de entrada va a reemplazar a Smith por vender, y nos va a dar cualquiera que sea ese nombre. Entonces ahora si dije registro consulado nombre actual, refresca la página, obtengo el nombre actual. Ese es el nombre que está aquí. Entonces si entré a mi página de índice, cambia eso de John a Caleb Refresh. Ahora tengo a Caleb diciéndole. Eso se debe a que está agarrando este valor y está cambiando a Smith. Demasiado alto, magra. Pero, ¿y si quisiéramos hacer más? ¿ Y si sólo quisiéramos conseguir el nombre de pila? Podemos crear otra función llamada get first name, y queremos obtener el nombre completo para así no necesitamos copiar todo esto más. Podríamos, pero eso rompe el principio de No te repitas. Tu código siempre debe permanecer seco y seco. Es no te repitas en caso de que no cogieras eso. De acuerdo, entonces lo que voy a hacer ahora es el nombre de la variable es igual para obtener nombre. Este nombre no entra en conflicto con este nombre en absoluto porque están en diferentes funciones. Esta esta variable aquí no es completamente consciente de que aquí existe algo. Y ahora podemos usar los mismos nombres una y otra vez en diferentes funciones. Y mientras que la ambigüedad de nombres a veces era algo muy difícil de trabajar porque algunos nombres , o simplemente naturalmente ambiguos, nos permite usar variables de Nate como nombre un nombre de variable común una y otra vez. Ahora, eso es genial. Tenemos el nombre. ¿ Qué pasa si corremos alerta? Nombre? No iba a comentar esos fuera y correr. Consigue el nombre, guarda, refresca y vuelvo a obtener el nombre propio, pesar de que la entrada es Caleb Smith y resultó ser Caleb diciendo, y eso se debe a que ahora está ejecutando una función dentro de una función. Ahora eso es bastante guay, pero sólo queremos el nombre de pila. Entonces, ¿cómo partimos una cuerda en pedazos y piezas diferentes? Bueno, podemos usar split, que lo hará esencialmente, si le decimos que rompa la palabra en base a todos los espacios de la cadena. Por lo tanto, el nombre variable es igual a nombre, no dividido. Y eso es todo lo que vamos a hacer ahora, en lugar de alertar que este va a aparecer mejor si la consola log esta actualización guardar . Y esta es una matriz que podemos decir porque el proto es una matriz y hay dos piezas al que surgió y totalmente en, pero sólo queremos el nombre de pila. Ahora sabemos con el tipo de datos de array, que aprendimos hace bastante tiempo, que el 1er 1 siempre comienza con el número de índice cero. Entonces lo que puedo hacer es devolver el nombre cero, y ese es el primer nombre ahora otra vez porque lo estoy devolviendo. En realidad no estamos obteniendo ninguna información que pudiera ser útil. Se está regresando genial, pero aún no fueron capaces de acceder a él. Entonces de nuevo, creamos otra variable y no temamos usar variables. Las variables toman muy poca memoria. No es un problema. Usa tantas variables como necesites. Vamos a decir que el nombre de la variable es igual para obtener el nombre. Obtener nombre se va a ejecutar, Obtener nombre, Obtener nombre, lo que sea que devuelva. Entonces este nombre es ahora el nuevo nombre. Vamos a tomar ese nombre y vamos a dividirlo. Lo vamos a tirar a una variable llamada nombre y sólo vamos a devolver la primera parte de ese nombre. Entonces esto parece mucho. Y realmente, es sólo un paso a la vez. Eso es todo lo que es. Entonces guarde, refresque. No pasa nada. Eso se debe a que está en esta variable. Pero aún no hemos hecho nada que sea variable. Entonces nubes Consejo log, Nombre, guardar. Refrescar. Ahí vamos. Nombre. ¿ Qué pasa si cambio esto por algo más? Guarda tu fresco. Él nos da cualquier otra cosa. ¿ Qué pasa si aquí tenemos muchas palabras diferentes? Segundo nombre loco. ¿ Algo más? Aquí hay muchas palabras diferentes. Smith. Ese es el nombre que actualmente está ahí dentro, y todavía sólo está devolviendo esa primera palabra. Entonces ahora se puede ver que las funciones son en realidad bastante valiosas porque nos permite escribir este código muy fácilmente. No tenemos que escribirlo una y otra vez. Entonces para resumir cómo funciona una función o cómo están funcionando nuestras funciones actualmente es que tenemos una variable. Lo declaramos como nombre es igual para obtener función de primer nombre, y ese va a ser el valor de lo que sea que se devuelva. Entonces tenemos. paso uno va a buscar el Paso dos, pero en realidad, Paso dos técnicamente sería aquí ahora, mientras escalonado, ¿Quién está corriendo? Se va a tratar de conseguir este. Entonces este es el paso 2.1. Casémonos con eso hasta 2.1, y va a devolver Lo que esté aquí. Por lo que 2.2. Ahora esto cambia a 2.2 porque el nombre es lo que sea que se devuelva aquí, va a ejecutar todo este código, pues va a devolver lo que hay aquí dentro. Tíralo en esta variable llamada nombre. Nosotros lo dividimos, nosotros para devolver el primer valor. Y ahora tenemos dos funciones que están operando juntas. Y no tenemos que volver a escribir este código nunca más. Ahora, si realmente quisiéramos personalizar esto en base a cualquier tipo de campo de entrada, podríamos agregar un parámetro para obtener nombre llamado Realmente lo que quieras, Teoh. Pero aquí lo iba a llamar selector de clases. Y tu nombre de parámetro siempre debe ser claro. Dales nombres lindos y claros. Aunque sean un poco más largos, Clearer es mejor. Y aquí vamos a simplemente añadir selector de clases. Pero ahora si ejecutamos esto, no funciona. ¿ Por qué? Porque get name está buscando el selector de clases. El parámetro no existe. Entonces agregamos la cadena aquí que esencialmente la acabamos de mover de aquí a aquí. Eso es todo lo que hicimos. Si guardo esta refresco la página , sigue funcionando. Pero si selecciono una clase que no tiene nada en ella, ¿qué va a pasar? Enlatería Valor inmueble de No. Entonces, esencialmente, lo que está diciendo es el selector de consultas que seleccionar el nombre no existe clase en algún lugar mal pagado, que obviamente no está en ningún lugar aquí devolvió un elemento HTML vacío. No hay nada ahí dentro, así que no pudo realizar lo que necesitaba para realizar. Entonces solo ten cuidado con eso. Entonces así es esencialmente como pueden funcionar las funciones. Si aún no tienes del todo claro en las funciones, no te pongas demasiado colgado de él. Son un poco diferentes para pensar. Es una forma diferente de pensar, Um, pero con el tiempo te acostumbrarás más a ellos y uno de estos días, o tal vez en solo unos minutos tu cerebro va a hacer clic y se va a ir. Ah, sé exactamente cómo funcionan estas, pero solo mantente en ello. Es una de estas cosas que no tiene sentido porque realmente no usamos esto, uh, uh, en el comportamiento humano normal. Pero en cuanto enciendes esa parte lógica de tu cerebro, se vuelve mucho más fácil. Para que eso termine esta lección. Espero que esto tenga mucho más sentido para ti. Sé que estamos corriendo un poco por las funciones. Eso se debe principalmente a que las funciones son tan comunes que no hay manera de evitarlas. Y así, como programador, como desarrollador Web, vas a estar muy, muy familiarizado con estos, te guste o no? Ah, y es algo muy bueno. Muy bueno estar al tanto de cómo funcionan las funciones. Para que eso termine esta lección. Lo que voy a hacer es que voy a añadir unos comentarios a este archivo el. También puedes descargar este archivo y probarlo. Voy a limpiarlo. Um, y asegúrate de que, ya sabes, es un poco más fácil de entender para ti cuando realmente estás leyendo a través de este código. 21. Eventos de HTML: hola y bienvenidos de nuevo en esta lección de la que vamos a estar hablando. ¿ Hacen eventos? Los eventos son cómo haces que las cosas sucedan en tu código. Ahora hemos estado haciendo que las cosas sucedan en nuestro código usando funciones y si else enunciados. Pero no hay nada realmente desencadenando esos. Tenemos que ir manualmente y procesar cualquier función que queramos ejecutar. Y, bueno, esa no es forma de vivir tu vida. Y esa es una terrible experiencia de usuario. No queremos que el usuario tenga que entrar y activar sus propios eventos. Entonces en esta lección, vamos a aprender cómo se pueden desencadenar eventos utilizando simplemente básicamente funciones simples de HTML y JavaScript. Entonces lo primero que voy a hacer aquí es que en realidad voy a quitar la entrada que ya no se necesita. Y Main sólo va a decir, uh, contenido corporal principal. Estamos vinculando a JavaScript en Js, que está por aquí. Y si cargamos esta página en nuestro navegador y actualizamos, es una página básica, súper sencilla. Ahora vamos a crear evento basado en un botón que está fuera de un formulario, por lo que realmente no hace nada nunca a menos que le digas explícitamente que haga algo. Voy a seguir adelante, crear un botón. Tan solo un tipo de botón básico va a estar en contra de botón básico y se va a decir Haga clic conmigo ahora Quiero agregar un evento HTML en. Y como puedes ver, sublime ha llenado automáticamente nuestros sugeridos más bien algunos eventos diferentes. Pero y si acabamos de hacer al click y en esto al click queremos darle una función JavaScript . Ahora no hemos creado función. No sabemos que esta función va a ser todavía, así que saquemos una de un sombrero. Cambiar html principal Ahora esto es Raj JavaScript. Esto es JavaScript dentro de tu HTML. Entonces ahora estamos creando algo un poco más dinámico. Guarda eso y dirígete a ti JavaScript en Js y crea un nuevo cambio de función html principal que coincida aquí ya que puedes ver exactamente mismo nombre. Y entonces lo que vamos a hacer aquí es que queremos seleccionar este contenido y cambiarlo. Por lo que necesitamos usar nuestro selector de consultas para agarrar esto. Por lo que variable principal es igual a documento claramente selector, principal y vamos a empezar básico puede que no le interese. HTML es igual a. Me han cambiado y eso es todo. Por lo que volvemos a nuestra actualización de página. ¿ Y qué pasa cuando hago clic en esto? El contenido cambió, por lo que ahora el usuario está en control de algunas de las funcionalidades aquí. Si lo vuelven a cocinar, no pasa nada porque ya se ha cambiado. Pero si una actualización y vuelve a hacer clic, vuelve a cambiar ahora. Técnicamente, cuando hago clic en esto una y otra vez, técnicamente está cambiando y se puede decir, porque cada vez que hace clic en esto cuando voy a inspeccionar la página, se puede ver que aquí en realidad está cambiando y sólo una doble comprobación. Voy a editar esto. Podemos ver que es, obviamente ha sido editado. Vuelve a hacer clic y se remonta a Me han cambiado. Entonces ahora tenemos alguna forma de interactuar con la página, y eso es solo un evento de un clic. ¿ Y si quisiéramos alternar el contenido del fotógrafo? Añadamos dos frases diferentes que vamos a cambiar de ida y vuelta. Tan variable sentenció a uno Hola. Gracias por cambiarme y muy poco sentenciado a Oh, hola. Soy una frase diferente muchas exclamaciones y hay cosas muy emocionantes. Entonces ahora podemos decir si principal hecho, inter html es igual a frase un médico principal Inter html es igual a sentencia también. Entonces si coincide con la primera frase, conviértala en sentencia hasta ahora. Hagámoslo, L Stephen, lo que básicamente significa si el HTML interno no coincide con sentencia a la que probablemente sentenciado o cualquier otra cosa porque aquí no estamos siendo muy específicos. Entonces queremos cambiarlo por sentencia uno. Vamos sigue siendo punto inter html es igual a frase uno guardar Volver atrás, refrescar la página. Mira que Ta go Igual que Agradable y fácil ahora no tiene que ser es un simple es solo cambiar el texto Puedes cambiar el estilo también Lo que podemos dio podemos decir si estamos cambiando este descendiente para agregar algún relleno adicional Así que punto principal estilo que relleno es igual a no lo sé, 50 pixels pero si está cambiando de nuevo a la oración uno tal vez vamos a quitar el estilo de relleno punto El relleno es igual a cero pixeles guardar Y solo voy a ir a refrescar esta página ¿Cómo? Mira eso. Entonces Oh, hola. Soy una frase diferente Tiene mucho más relleno ahí dentro. Ah, hola, media sentencia, que es sentenciado a sentenciado, tiene relleno de 50 píxeles. Así como así, Justo como dijimos, No. Si lo cambiamos, lo va a quitar porque va a volver a sentenciar. Uno va a quitar la empanada así como así. Por lo que hay una plétora de eventos HTML. No es solo click. Está en forma. Presentar en la mayoría más en la mayoría fuera, ¿ qué más tenemos aquí? Tenemos un click en doble click en mas abajo en mas movida. Entonces cuando estás más está sobre un elemento y se mueve un poco dentro de ese elemento , activa esa función una y otra vez. Cuidado con esa. Se activará la función cada vez. Tus más movimientos de un píxel en mi así sucesivamente, la mayoría sobre la mayoría arriba en la rueda. Entonces si tienes un más bien y te estás desplazando a través, eso es un gatillo. Eso es un cinco HTML. Cuando creo en HTML cinco, tenemos ah, almuerzo de diferentes eventos. Tenemos el on drag on drink y Andre entra en licencia de drogas. Arrastra sobre las bebidas. Inicio drop scroll. Tenemos una tonelada de estos. Entonces lo que en realidad voy a hacer es crear una lista gigante de diferentes eventos que puedes usar. Ah, y los voy a tirar en el contenido adicional para ti. Lo voy a poner en el archivo JavaScript en Js. Apenas comentó que se pueden ver todas las diferentes. Puede que ni siquiera los consiga todos, para ser honesto, pero trataré de poner los más comunes que es más probable que uses día a día como desarrollador web front-end. Y entonces lo único que tienes que hacer para cambiar realmente ese evento es en lugar de al click, podrías estar en doble clic o en la mayoría hacia abajo, lo que significa que estás haciendo clic hacia abajo. Pero lo que más aún no se ha movido hacia arriba ni sobre la mayoría, que significa que solo estás moviendo más sobre el botón y va a cambiar. De hecho, echemos un vistazo a ese. Mi actualización de página. Y no estoy dando click. se puede oír. No estoy dando click. Sólo estoy moviendo el ratón sobre él. Por lo que ahora el usuario tiene algún tipo de forma de interactuar con el paciente. Esta es una interacción súper, súper básica, pero aquí es donde realmente comienza la diversión. Ahora que ya sabes cuáles son las funciones y variables y las declaraciones FL, ya sabes cómo alterar el contenido. Ya sabes cambiar el HTML interno. Ya sabes cómo cambiar el estilo Con JavaScript, esencialmente tienes la mayoría de los ingredientes acordados que necesitas para crear una página web súper dinámica , súper interactiva. , Voy a ser es muy básico. Pero, oye, tienes que empezar en alguna parte, ¿verdad? Así es esta lección. Lo que quiero que hagas es, quiero que crees una nueva función, y quiero que adjuntes eso a un desencadenador de eventos en tu HTML. Podría ser cualquier evento que te guste, y solo quiero que marques alguna diferencia, ya sea cambiando el color de fondo o el color del texto o el tamaño de la fuente. Ya sabes, lo que sea que quieras dio, adelante y hazlo. Si te atascas referido a este abrigo, te estoy dando este abrigo como contenido adicional. Así que siéntete libre de descargar eso y echar un vistazo. Y si tienes algo de tiempo extra, juega con los diferentes eventos HTML, no solo tiene que ser un evento on click. Podría ser cualquier otro evento. Y mientras estás en ello, ve en Google todos los eventos así como desarrollador. Te lo digo ahora mismo, ¿quién es tu mejor amigo? No hay forma de que vayas a recordar cada evento que hay mientras estás aprendiendo . Html CSS JavaScript PHP nodo python. Sea lo que sea, es simplemente demasiado aprender y tienes toneladas de referencias de ahí. No necesitas recordarlo todo, pero siéntete libre de subirte a la vieja máquina de Google en Google, algunas algunas algunas diferentes. 22. Proyecto de calculadora: Hola. Bienvenido a tu primer proyecto. Por lo que este proyecto va a ser una calculadora muy básica. No te pongas fantasía valga esto. No pierdas tu tiempo en CSS y HTML y haciendo que esta calculadora luzca hermosa. O sea, si quieres ir por ello, pero ese no es el objetivo de este ejercicio. Por lo que debes tener aquí tu primer número, tu segundo número aquí, y lo que quieras hacer aquí dentro, haces clic en el botón cheques tarde y aparece un número debajo. Ahora, ya te he dado el diseño base de esto, así que es solo una forma básica. Tienes tu botón de enviar, tienes el número uno número dos. Y en realidad, esos eran incorrectos. Yo espero Número uno y Número dos. Y luego tienes cualquier selección que no tengas. Ya sabes, he dejado que algunas cosas parpadeen a propósito. ¿ Al igual que eventos vas a usar? Todavía no lo sabemos. Por lo que podría tener que hacer un poco de buscar en Google para eso. O puedes referirte a ah, lección anterior a un proyecto anterior que realmente has hecho? Cualquier otra cosa que puedas ayudar a acelerar esto. Esto no debería llevarte mucho tiempo en absoluto. Pero, ya sabes, si te atascas, eso también está totalmente bien . Si te quedas atascado, estaré dando una respuesta. Um, en realidad solo voy a grabar cómo construyo esto, usando todo lo que hemos aprendido hasta este punto de la siguiente lección. Entonces si te quedas atascado, solo puedes mirarme, yo construirlo donde puedas hacer preguntas. Grupo de Facebook o ah, deja un comentario o una pregunta abajo. Pero para que esto funcione, todo lo que necesitas es todo lo que hemos usado. Hasta este punto, va a haber un montón de cosas que no necesitas también. Entonces solo dale a este tu mejor tiro. Dale tu mejor esfuerzo. Nada. Y vas a ser demasiado complicado. Y recuerda mantenerlo sencillo es tu amigo. No más de complicar esto 23. Solución de proyecto de calculador: Hola ahí. Espero que te haya ido relativamente bien con el proyecto de calculadora de esa última lección si te quedaste atascado, o si solo tienes curiosidad en cuanto a cómo haría esto. Sí. Este es un video para ti, porque yo sólo voy a hacer esto. Yo no tengo un plan. No sé cómo se supone que se vea esto. Podemos usar todo lo que ya hemos aprendido, y eso es todo lo que vamos a usar. No quiero que sepas que en JavaScript hay mejores formas de hacer las cosas y lo que hemos aprendido actualmente. Pero con eso dicho, esos aires también formas más complicadas. Y este es un puntaje esencial de JavaScript, no un curso completo de desarrollo web de JavaScript. Entonces esto es realmente solo para que vayas como desarrollador de JavaScript junior a intermedio . Por lo que tengo mi archivo html index dot abierto aquí. También voy a abrir el archivo JavaScript, y probablemente no necesite el archivo de estilo en absoluto. A pesar de que tal vez me metí en eso. Yo no, um no aguanto la respiración por eso, sin embargo. Lo primero que quiero hacer es pensar ¿qué pasa cuando se presenta este formulario? Bueno, a partir de ahora, no pasó nada. Entonces vamos a presentar es igual a, uh vamos a llamar a esto calcular grupos de gira Coca-Cola, putita tardía con paréntesis. Y así en cuanto se trata de todo este formulario presentado, se supone que ejecute esta función. Bueno, esta función aún no existe, así que vamos a crearla. Por lo que sabemos que esta calculadora de funciones tiene un saliente Una respuesta. Y así aquí está nuestra página actual. Ahora, si miramos el código, nuestras respuestas debajo del formulario Así que en algún lugar de esta área donde más me está balanceando, ahí es donde va a aparecer la respuesta. Y para poder cambiar el contenido ahí dentro, sabemos que necesitamos seleccionar la respuesta. También sabemos que para poder hacer alguna matemática, necesitamos seleccionar el número uno y el número dos con el fin de agregar división menos o multiplicar los números juntos. Entonces lo primero que necesitamos hacer es crear selectores. Ahora. No sabemos demasiado sobre el alcance, pero sí sabemos que la variable dentro de una función se queda dentro de una función. Hablaremos de esto en una fecha posterior. Estamos en una lección posterior, pero cualquier variable que se declare arriba y antes de una función también es capaz de ser utilizada dentro de la función. Entonces es la mentalidad inversa de lo que ya has aprendido. No vamos a meternos en eso porque eso agrega una capa de complejidad compleja. Pero pongamos eso en tu bolsillo trasero por ahora. Vamos a usar eso un poco más tarde. Por ahora, solo creemos un selector. Entonces llamemos a esto el selector de respuestas respuesta respuesta del selector de consultas pensamiento. Entonces lo que estamos seleccionando aquí, vamos a hacer que se vea más grande es que estamos seleccionando este desarrollo. También necesitamos seleccionar el número uno y el número dos. Por lo tanto variable alguien documenta ese selector de consultas número uno. Creo que fue una idea, ¿verdad? Yo d y yo los quería a alguien que copiara eso. Y cambiemos con las instancias. Acaban de cambiar Botham. Al mismo tiempo, si tienes un buen editor como Sublime o Adam, puedes seleccionar numerosos del mismo valor exacto y puedes cambiar todo aquí al mismo tiempo. Ah, en múltiples lugares. Es realmente agradable. Eso es todo. No hice nada de fantasía ahí. Es solo un lindo truco de editor, y también necesito seleccionar el selecto. Ahora, voy a dejar el selecto fuera por ahora porque no sabemos cuál es seleccionado. Entonces lo que queremos dio Así que sólo queremos asegurarnos de que estos números realmente están seleccionando los selectores adecuados. Hagamos este registro de consola Respuesta no va a hacer nada porque no hay nada ahí dentro. Nosotros sólo queremos ver a alguien. ellos también. Guarda eso. Refresca tu página. Voy a abrir a nuestro cónsul. Se trata de movimientos por encima para que podamos ver más página 12 y no pasó nada. Bueno, no pasó nada porque la página realmente se refrescó. Y eso es sólo porque HTML cuando se envía un formulario, va a tratar de hacer lo que sea que se supone que el formulario debe hacer. Va a usar su get mess que nuestro método post, lo que sea que le digas que haga, va a ir a cualquier archivo de acción que le digas que haga. Nosotros no hemos especificado nada de eso. Entonces en lugar de hacer en enviar porque no queremos que la página se actualice, pasemos eso al botón y cambiemos un tipo de botón a un regular. Pero debido a que técnicamente no necesita enviar el formulario y podemos decir en lugar de en enviar al click, es ahora Este botón es solo un regular, pero no está enviando ningún formulario. Técnicamente, eso hace inútil esta forma. Y eso es, Ah, gran parte del poder detrás de JavaScript. Se puede romper de la jerarquía HTML tradicional así. Ahora se va a ejecutar esta función de calculadora y los va a agarrar uno y dos y registrarlos. Refrescar la página 12 documento crea Seleccionar no es una función. Obviamente, es porque es selector de consultas. Refrescar Cara intentó de nuevo. 12 Ahí vamos. Eso le gusta Número uno es llamativo número dos Cool como atajo. Hagámoslo solo. Está en el valor guardar Refresh intentó de nuevo. Ahí vamos. Nosotros hemos querido hacerlo. Todo lo que hicimos ahí fue Cambiamos esto en realidad técnicamente no entrenando porque no usamos ninguna función de métodos. Todo lo que hicimos fue decir un documento encuentra numb a y luego obtener el valor del mismo y almacenar que en una variable llamada numb a lo que todo es así que ahora para asegurarnos de que la respuesta está funcionando, digamos responder punto inter hte email es igual al número uno más numb a I no saben qué va a hacer esto porque se supone que los valores son cuerdas. Pero JavaScript también reconoce qué números son solo números dentro de una cadena. , formas,en este punto, no importa porque todo lo que estoy haciendo es probar para ver si aparece algo ahí dentro. Ahí vamos. Y así todo esto está haciendo es un pendiente ellos porque JavaScript actualmente piensa que estas cadenas de aire, no números. Entonces vamos a convertir al número uno y a ellos en números reales. Fresco uno y vamos 54. Ahora tenemos 55 así que al menos está agregando, así que sabemos que funciona. Pero, ¿por qué funciona eso? No le hemos dicho que haga nada en particular. Ahora, recuerda lo que te dije. Había una parte difícil sobre esto. Dejé algo fuera. Lo que me quedé que fue ¿cómo averiguas cuál de estos está seleccionado actualmente ? Bueno, lo primero que tenemos que hacer es conseguir el futbol. Entonces, uh, se llama la selección es igual al selector de consulta de documentos, y es el único select en la página. Entonces vamos a seleccionar eso como todo el elemento porque eso es todo lo que necesitamos. Ahora. ¿ Cómo decimos cuál está seleccionado actualmente? Bueno, probemos esto selecto opciones de puntos y aquí es donde entró un poco de Google y entró. Este no es territorio desconocido para ti. Esto es sólo un poco nuevo. Simplemente está empujando tus límites un poquito. ¿ Podemos decir en la matriz? Slack dot índice seleccionado? Di eso. Refrescar la página y, bueno, eso nos está dando algo nos está dando una opción. Elementos. Enfriar. De acuerdo, podríamos trabajar con eso. ¿ Es valor lo que queremos? Sí. Mira eso. Íbamos a estar seleccionando la subasta y el valor. Entonces volvamos. Ahí vamos. Está agregando hacer a menos. Se va a dividir. Enfriar. Entonces ahora tenemos alguna forma de trabajar con eso. Volvamos a poner eso en variable. Llamaremos a ese operador ahora. Tenemos todo lo que necesitamos para calcular nuestra fórmula básica. Tenemos la respuesta. Sección número uno, número dos, Tesis Electo Casilla. Entonces ¿Qué va a ser eso sumar menos dividir o multiplicar? Y entonces todo lo que tenemos que hacer es realizar los cálculos. Entonces lo que vamos a hacer aquí es que vamos a regresar en múltiples áreas, y esto es un poco diferente, pero es totalmente ruidoso. Entonces decimos, si operador es igual a agregar, por lo que el operador está consiguiendo las subastas, el índice seleccionado y luego el valor, seleccione la opción y lo que Cualquiera que sea seleccionado y va a coincidir con uno de estos valores, digamos que se va a agregar ¿Qué hacemos si se va a sumar? Bueno, podemos decir devolver número uno más, entumecido a ahora está sumando estos números juntos lo contrario Operador es igual a menos, y básicamente podemos hacer lo mismo. Pero la única diferencia es que cambiamos al operador porque esto es un menos. Ahora hay otra forma de hacer esto, y esta es una manera terrible. Pero te voy a hacer saber ahora mismo, porque es importante no hacer esto. Hay una función en la mayoría de los idiomas. Por lo general se llama mal, que puedes poner javascript crudo aquí. El usuario puede poner JavaScript crudo aquí y lo ejecutarás. El motivo que es malo es porque le estabas dando al usuario un control completo sobre tu JavaScript, y eso no es lo que es un programa. Un programa es una caja definida con ciertas reglas en ella que establece que puedes y no puedes hacer ciertas cosas. Y dentro de esos límites tienes total libertad. Pero fuera de eso no se te permite. No se te permite estar fuera de esa caja ahora. El motivo por el que te digo eso es porque el mal es utilizado por muchos desarrolladores más nuevos porque lo es. Es más fácil. Es sencillo, solo funciona. Y hace escribir este tipo de código, si lo contrario si lo contrario si lo contrario que es lo que vamos a estar haciendo, hace que eso obsoleto sí. Ya no requieres lo hizo. Pero eso es un mal desarrollo, y no vamos a estar haciendo eso. Y si estuviéramos en un aula física ahora mismo, yo aún todos ustedes para mirarme a los ojos y decir que no van a correr mal 24. Solución de proyectos de parte 2: Muy bien, adelante. Por lo que ahora tenemos esencialmente la disposición para los dos siguientes. Es decir, una copia de estos dos abajo. Y cambiemos menos para dividir y multiplicar. Esto va a ser una división. Esto va a ser una multiplicación. Ah, advertencia rápida sobre copiar y pegar. Cuando copias y pegas, más probable es que vas a olvidar que las cosas le pasan a cada desarrollador de este planeta. Entonces cada vez que copias y pegas algo y luego de repente eres código no funciona bien, tal vez es porque olvidaste cambiar un poco, tal vez un operador o un pequeño número en una variable o cadena. No cambiaste algo que se suponía que iba a cambiar. Tan cuidadoso, copiar y pegar, ser muy peligroso también puede ser muy rápido por obviamente no tener que escribir esto cuatro veces ahí tres veces. Y hagámoslo y lo demás sólo está ahí, porque si el usuario selecciona algo que no es agregar menos dividir o multiplicar, vamos a decir que no puedo hacer eso. Y la razón por la que hacemos eso es porque el usuario puede entrar aquí y simplemente cambiar uno de estos cualquier otra cosa y de repente, a pesar de que dice plus, aquí, cualquier otra cosa es el valor que vamos a estar usando y eso no funciona. Entonces ahora cuando ejecutamos este código realmente conscientes de que cuando ejecutamos el código, refresca la página 12 ¿qué crees que va a pasar si dijiste que no va a pasar nada ? Estás absolutamente en lo correcto. Y aquí está el porqué. Mira, no pasó nada, y eso es por la información de retorno. Ahora esto está permitido. Si quisiéramos devolver esto a una respuesta en algún lugar, digamos que la respuesta es igual a la calculadora, la respuesta aparecerá. Lo que sea. Si el usuario dijo, agrega, la respuesta va a ser además, Minus va a ser una resta, pero no estamos devolviendo nada, y eso es porque esta función no necesita devolver nada. Entonces este tipo de un poquito rompe lo que hemos aprendido. Ah, hace un par de clases, ambas funciones, pero al mismo tiempo no lo hace porque está permitido. Nadie dijo explícitamente que hay que devolver nada en un momento dado en el tiempo, así que en cambio lo que vamos a hacer es almacenarlos en una variable. Llámalo. La respuesta calculada es igual a bien, ponemos cualquier cosa o podríamos simplemente mantenerla como indefinida. Ahora voy a cambiar estos retornos a, ya sabes, si alguien está agregando almacenado aquí o si se están multiplicando almacenados en la misma variable. Recuerda, si uno de estos coincide con uno de estos si las declaraciones coincide, no importa lo que el otro si las declaraciones o las declaraciones de lo contrario están diciendo que no se van a ejecutar. Este es el que quepa Primero usó ese. Ahora vamos a ver un retorno falso aquí porque si hay una alerta, no muestres respuesta alguna. En realidad, rasca eso. Tengo una mejor idea. Digamos que la respuesta calculada es igual a operador inválido. De hecho, sólo voy a comentar eso. Y ahora podemos decir respuesta. Pensamiento Pasante. HTML es igual a la respuesta calculada. Guarda eso. Acude a nuestra página. Refrescar. Uno más dos es tres uno menos dos es menos uno uno, dividido por 20.5 y uno multiplicado. Voluntad de hacer algo un poco diferente. Estéreo. Cinco. ¿ Qué pasa si hacemos esto a flote? 5.24 1.48 Multipliquen estos juntos, ahí está su respuesta. Por lo que ahora tienes una calculadora básica. Pero vamos a ver qué pasa si conseguimos un usuario malicioso. Algún tipo que se cree más listo que tú entra y dice: Ya sabes lo que pasa Si cambio, agréguelo a cualquier otra cosa. Cambiémoslo y veamos qué pasa. Operador no válido. ¿ Por qué es eso? Porque no se permite nada más. Agregar menos dividir o multiplicar. Cualquier otra cosa te da operador inválido. Entonces ahí lo tienes. Con una función en cuántas líneas tenemos aquí en 23 líneas de código. Te has escrito calculadora en tu navegador, y de hecho, ya no necesitas realmente el formulario en absoluto, aunque probablemente sea una buena idea mantenerla ahí dentro. Pero si estás usando algo basado en JavaScript de todos modos, um, usando formulario para enviar algo a tu servidor y que vuelva algo inútil, por lo que el formulario es técnicamente innecesario. Y sólo para demostrarlo, pero algo más ahí adentro Ahí vamos. Funciona sin la forma. No me dedique un par de minutos a peinar estas entradas y el selecto y el botón B y la respuesta y esas cosas. Si quieres quedarte por ahí para eso, eso también está bien . Está bien, así que para darle estilo a esto, sigamos adelante. Y, uh, voy a hacer algo de espacio. Respuesta puede ir al fondo. Realmente no importa a dónde vaya. ¿ A qué estoy mirando aquí? Yo quiero cambiar todos los insumos. Un sólido PX. Ver, uh, relleno a quién? En tanto demasiado. 55 píxeles. Veamos qué empezó. Mira aquí. Se ve un poco más bonito. Vamos a delinear cero Sin contorno cuando hago clic en él. Ah, ¿con qué se supone que eso haga esto? Seleccionar. Ahí vamos. No, pero las cosas estaban bien. Cambio de color de fondo. El color de fondo es igual a esperar. Se va aquí y en un puesto titular cambió eso. Pero hover el color de fondo. Si, si, si, uh, A través de eso, hagamos algo un poco más interesante. Eso es ir 81 515 Les sombra de rojo on. Cambiemos demasiado el color blanco. Y digamos también que este botón tiene una transición de transición. El color de fondo 250 milisegundos. Lineal también va a transitar el color para tomar 2 50 milisegundos. Haz lo mismo, y también va a ser lineal. Digamos que fresco. Ahí vamos. Bonito botón. Uh, pero si tienes una cosa cursor puntero eso cambiemos el borde ah. Una púas de sólido. No vi lo que hice. Ver una tribal, cinco coinciden con los otros colores. Eso es como un poco mejor. Ahora estamos calculando, Button realmente sobresale. ¿ Y qué pasa si hacemos esto? Zero lo hace. Ahí no hay nada. Cinco. ¿ Queremos cambiar esa respuesta? Sí, seguro. ¿ Por qué no? Alinear texto. Acolchado central, 50 pixels. Color de fondo. No vi 155 color f f f en talla 54 Y no soy fan de Ah, Sarah Funt. Entonces digamos todo desde la familia. Ah, diablos Vodicka, si tu computadora lo tiene, Si estás en un Mac, probablemente tengas Helvetica zona de uso de lo contrario. De lo contrario, usa Sands. Sarah. Enfriar. Entonces, ¿aquí es donde va a ser la respuesta? No se ve fantástico, ¿verdad? Yo tampoco lo creo. Entonces tal vez vamos a darle un relleno. Ahí vamos. Eso es mejor. Entonces ahí tenemos una calculadora muy básica y eso es todo. Entonces gracias por quedarse conmigo a través de todo este video. Probablemente ya te he quitado la oreja. Si no tengo impresionante. Si tengo ahora sería un buen momento para ir. Tómate un descanso. Agarra algo de comida, gas, agua, tal vez ir a dar un paseo. Es bueno salir y refrescar tu cerebro. Aléjese un poco del código. Sé que suena antiintuitivo, pero alejarse del código en realidad ayuda a que tu cerebro procese un poco mejor ahí . Cuando vuelvas, siéntete libre de seguir practicando o golpeando, continúa e ir a la siguiente lección. 25. Funciones de Anonymous: hola Y esta lección, vamos a estar hablando de funciones anónimas. Si eso te suena aterrador, es porque lo son. En realidad, no lo son. No dan miedo en absoluto. Son como funciones, excepto que básicamente viven dentro de una variable. Entonces para darte una idea de lo que estamos hablando aquí, sabemos que una función comienza con función y luego tienes tu nombre, paréntesis y corchetes. Entonces devolvió algo, y esencialmente, esa es una función en pocas palabras. Pero una función anónima es una función que no tiene un nombre específico. Entonces un ejemplo sería la variable X es igual a la función. Y luego podrías decir alerta, ABC 123 Ahora solo voy a abrir esto, en realidad voy a deshacerme de estas cosas, también, porque ya no es necesaria para esta lección. Eso fue de la última lección, y acabo de abrir este archivo en mi navegador. Golpeé F 12 para abrir el inspector. No aparece nada. Enfriar. De acuerdo, entonces, ¿cómo ejecuto una función anónima? Porque es una variable, ¿verdad? No es una función, pero es una es una función dentro de una variable. Bueno, es realmente fácil ejecutarlo igual que lo harías en función normal, solo puedes nombrar el nombre es lo que es el nombre de la variable. Entonces tienes X. Pones tus paréntesis al final de la misma, igual que estás llamando a una función de vuelta a tu página. Refresca y tienes un B C. 123 Esa es tu función anónima. Ahora eres anónimo. Función también puede tomar argumentos. ¿ Recuerdas la primera vez que sumamos números juntos en una función que usamos Número uno y número dos? Bueno, esto va a ser lo mismo. Es solo registro de consola, numb one más numb a Simplemente va a devolver eso en el registro de la consola. Por lo tanto guardar refresco. No consigo número porque le falta el parámetro uno y dos. Entonces vamos 45 54. Refrescar. Ahí vamos. Obtenemos 99. Entonces una función anónima no lo es. No es muy diferente de la función irregular. La mayor diferencia que debes saber en este momento es que la función anónima es solo una función que se mantiene dentro de una variable. Ahora, lo segundo que debes saber sobre las funciones anónimas es que no son globales una función regular. Cuando escribes función algún nombre como este que es global, por lo que puedes usar esa función en otros nombres de funciones en otros objetos en diferentes secciones de tu código. Y eso está perfectamente bien. Pero recuerdas cuando escribimos Var y Var era alcance a una función, lo que significa que si teníamos función, ABC de nuestro nombre es igual a probar. Eso significa que esta variable es completa. Acostado aquí sólo es accesible dentro de la función ABC. Bueno, esto no es diferente. Entonces si estamos ejecutando algún tipo de función, lo llamaremos cualquier cosa que realmente no importe. Agrega inventar aquí. Entonces ahora tengo una función dentro de una función ahora. El motivo por el que podría querer declarar una función anónima dentro de una función es porque esta consola log numb one plus numb to podría no necesitar ejecutarse en ningún otro lugar excepto dentro de la función anything. Entonces si quería correr esto más de una vez, nosotros 12 x 34 x 56 y quería ejecutar esta función cualquier cosa. Entonces lo que digo es, oye, navegador, activa la función llamada cualquier cosa que hace que crea otra función aquí dentro. Es función anónima y solo va a correr aquí. Echemos un vistazo a eso. Ahí vamos. 37 y 11. Agregó. Todos esos números juntos para nosotros. ¿ Qué pasa si hago esto? X 123 y 456 X no está definido ahora. Eso se debe a que X se definió usando la palabra clave VAR dentro de una función, y eso significa que está atascado dentro de esa función. No podemos sacarlo ahora de nuevo. ¿ Por qué es útil eso? ¿ Asesinado? ¿ Por qué querría alguna vez tener una función dentro de una función que no puedo salir? Bueno, porque a veces tienes información dentro de una de tus funciones que necesita ser manipulada de cierta manera o un buen ejemplo antes de acostarte, y quieres dar formato a tu texto de cierta manera. Pero ese formateo Onley alguna vez aplica bien esta función. ¿ Por qué declarar una función global cuando sólo se aplica a su única función? Eso son muchas funciones, pero esencialmente el punto es, ¿por qué desorden tu espacio de nombres global? Básicamente, ¿por qué tener tantas funciones fuera a la intemperie, donde se pueden usar en cualquier lugar cuando no necesitan estar. Ya sabes, esencialmente, eso es todo una función anónima es su función dentro de una variable, Pero tiene diferentes reglas de alcance a ella. Y, uh, alcance es algo de lo que vamos a hablar un poco más en el futuro. Entonces no te preocupes demasiado por eso. Si eres muy curioso, puedes subirte a tu tipo de máquina de Google en ámbitos JavaScript distintos a los que te hubiera gustado que hicieras para esta lección. Es crear función anónima, no de este tipo. Crea este tipo de función anónima y no tiene que ser compleja. Yo solo quiero que escribas uno para que puedas sentirlo y luego que lo ejecuten. Eso es todo. No debería llevarte más de 60 segundos. 26. Funciones de Self: ya. Hemos aprendido mucho de qué funciones y funciones anónimas. Pero ¿y si queremos funcionar la carga del dedo del pie tan pronto como se haga la página? Cargando como cuando se hace el script, simplemente se ejecuta automáticamente? No queremos darle un comando particular. Simplemente queremos que se ejecute lo antes posible. Ahora estos aire llaman funciones de auto invocación. Es una función que está escrita, y en cuanto se termina de cargar, comienza a ejecutarse. Ahora estos se ven un poco diferentes, y la sintaxis para esto no voy a mentir. Es un poco extraño mirarlo primero, pero este es un tipo muy común de, ah, ah, sintaxis it para JavaScript Javascript, uno de estos lenguajes que tipo de escrito vagamente Teoh mejor a sí mismo, en un sentido, por lo que se parece mucho a esto. Tienes función. Y así algunos de esto estaban familiarizados con esta parte. Esa es sólo una función normal. Pero entonces, cuando lo envolvemos entre paréntesis, estás empezando paréntesis aquí, y estás cerrando paréntesis aquí, y luego lo llamas igual que una función normal, así que cualquier cosa aquí dentro lo hará se ejecuta automáticamente cuando se carga la acción de página con la página cuando esta función se carga porque técnicamente no se puede tener esto en diferentes partes de la página que no se están ejecutando inmediatamente allí. Entonces si dijimos alerta flotó y vamos a un navegador, refrescamos tu página así como ahora en su HTML, Si miramos eso, no hay nada ahí dentro que esté llamando a esta función. Lo que nos hace funcionar auto invocado son esos dos paréntesis. Al final, si los quitamos, retrocedemos, refrescamos la página. No pasa nada. Eso se debe a que esto es sólo una sección de código. Y esos paréntesis dicen: Oh, Oh, tienes que ir y correr eso igual que una función normal Igual que una función anónima. Esta función de auto invocación dice, OK, bueno, esto se carga cuando se termine de cargar mientras estos Prentice y dicen que tengo que ir y hacer mi trabajo así que sí va y hace su trabajo. Entonces, ¿por qué alguna vez usarías esto? Bueno, vamos a ver qué quieres hacer con algo de cenar en algún contenido dinámico justo fuera de mi cabeza aquí. ¿ Y si quisiéramos ganar la página? Las cargas tienen el cambio de color de fondo por lo que seleccionaríamos nuestro cuerpo. Se trata de un documento de cuerpo variable, consulta , selector, cuerpo en una cadena, y eso va a seleccionar esto. Y luego decimos, Cuerpo ese estilo color de fondo, camello cased es igual a si ganó cinco. Nos vemos 1515 y porque el texto va a ser difícil de ver también estaba cambiando de color realmente también. Eso y luego cambiemos también el Inter html Bienvenido a mi página. Entonces si miramos al Ismael regular, ahí no hay nada. Volvemos a la página otra vez. Ahí no hay nada. Voy a golpear a las cinco. Y en cuanto termine de cargar este JavaScript, va a cambiar la página por completo. Igual que eso. Ahora no hemos escrito CSS. Nosotros hemos escrito no, HTML. Esto es puramente JavaScript. Ahora, eso es lo que es una función de auto invocación. ¿ Deberían usarlos todo el tiempo? No. ¿ Hay momentos en los que quieres usarlos? Absolutamente. Sí, Al igual que, por ejemplo, si estás cargando una biblioteca de paralaje, sabes cómo te desplazas por la página y algunos elementos se desplazan a un ritmo diferente en el resto de la página que se llama Parallax, y en javascript, es posible que quieras cargar eso de inmediato. Tan pronto como la página I Esto empieza a cargar tu JavaScript. ¿ Quieres eso, también, quién empieza a cargar? Porque así se ve mejor. Pero hay otras veces en las que tal vez no te guste nuestra calculadora que hicimos. ¿ Por qué tendría que ser esa una función de auto invocación? No lo hace. Eso es un evento que es, cuando un botón es coleccionista. Cuando se presenta el formulario, entonces esa función se desencadena. Por lo que hay un lugar a tiempo para autoinvocar funciones. También hay lugar a tiempo para funciones regulares o anónimas. Entonces lo que me gustaría que hicieras para esta lección solo crea una función de auto invocación. Simplemente adelante y escríbalo. Tienes acceso a todo el código que hemos estado escribiendo a lo largo de este curso. No obstante, si tienes el tiempo, preferiría que pudieras escribir esto a mano solo para que puedas algo así como hacerte sentir . Sé que a veces cuando estás escribiendo en lenguaje, tus dedos como de ahí un poco resistentes como a gustar, ¿Por qué pondría entre paréntesis aquí? Y entonces por qué no pondría entre paréntesis aquí? Soportes rizados es bueno para tu memoria muscular. Es bueno para aprender el tipo más rápido para ser un poco más productivo. Um, y en general, es sólo una buena práctica. Entonces si tienes el tiempo, preferiría que pudieras escribir esto. Pero si estás un poco corto de tiempo, siéntete libre de simplemente abrir JavaScript en Js. Tan solo juguetea con este código, aunque sea tan sencillo como cambiar el A C 1515 a solo negro 000 Solo quiero que tengas algo de experiencia práctica con esto antes de que empecemos nuestro próximo proyecto. 27. El `this` "esto": está bien, así que hemos hablado de funciones, funciones anónimas, funciones autoinvocación. Y ahora veamos algunas de las propiedades dentro de la palabra clave esta la palabra clave esto no la puedes ver, pero estoy haciendo cotizaciones de aire. El esta palabra clave es una palabra especial, reservada utilizada para la programación orientada a objetos. Entonces echemos un vistazo a cómo esto se relaciona con una función. Tenemos función donde lo va a llamar cualquier cosa, y aquí dentro usamos este nombre de variable de punto, cualquiera que sea ese nombre de variable. Pero en este momento, eso no existe. Ahora esta palabra clave se utiliza para agarrar cualquier otra información asociada a cualquier cosa con una función llamada cualquier cosa. Entonces si hacemos un cónsul adulto log en la palabra clave esto y vamos a ejecutar esta función puede ir a mi página y acabo de refrescar. Me da mucho. Me da todo lo que puedo hacer con esto. Esta es una palabra muy poderosa ahora hemos visto listas antes, pero nunca hemos visto una lista bastante extensa de lo que podemos y no podemos hacer. Esto es algo muy poderoso, pero adentro también está la capacidad de agregar sus propias variables. Ahora, estas variables que están conectadas a la palabra clave this se denominan propiedades. Entonces cualquier tipo de variable dentro de una clase que sea más avanzada. JavaScript esos aire, llamados propiedades y funciones dentro de una clase se llaman métodos. No hace falta recordar eso por ahora. A lo mejor solo pon eso en tu bolsillo trasero un rato. Entonces, ¿qué pasa cuando decimos este número de inicio? ¿ Va a consulado? Es indefinido. De acuerdo, bueno, ahora que sabemos que es indefinido, podemos decir si este número de acciones y yo solo estoy inventando número, eso podría ser realmente cualquier otra cosa que quieras nombrar. Es igual a una comparación estricta. Indefinido. Entonces pongamos esto en algo que va a ser cero. Por lo que este primer registro del Cónsul debe ser indefinido. Pero ahora lo hemos definido como cero. Ahora, si consolamos, volvemos a registrar esto, esto es lo que vamos a conseguir. Cero bajo financiero, tal y como se esperaba, porque las computadoras, en su mayor parte, corren de arriba a abajo. Bueno, esto aún no existía, pero ahora sí. Ahora bien, esto no es diferente a asignar una variable normal dentro de una función. Entonces, ¿por qué incluso usar la palabra clave this? Bueno, primer lugar, es una gran introducción a la programación orientada a objetos ese punto notación este punto que vemos en todo tipo de lugares, cuando estamos hablando de cuerdas y obtenemos la longitud, esto es lo que estamos haciendo. Entonces ahora, ¿qué pasa si quisiéramos? Teoh invocó esta función más de las que podríamos decir. Cada vez que se invoca esta función, hacemos este número de punto más más simplemente incrementamos el número en uno. Dáselo a esto. Deshazte de esto y la consola registra este número de inicio. Entonces esto se va a presumiblemente mostrar el número uno porque no está definido. Definido como cero y de cualquier manera, incremento por uno Así que el número más bajo esto podría ser es uno refrescar tu página. Ahí vamos. El número es uno. Pero, ¿qué pasa si copio esta función como 10 ish veces? En realidad nació en tiempos de tenis. Mira eso. Ahora vemos que este número de acciones tiene ID de incremento. Cuántas veces del 1 al 12. Entonces ahora estamos almacenando información dentro de una función que no está siendo sobreescrita Cada vez que la usamos. Cada otra función que hemos utilizado cada otro financiamiento anónimo ella misma, invocando función que hemos escrito todas las variables se sobrescriben cada vez. Es como una pizarra fresca cada vez que la llamas. Pero a veces no quieres eso. En ocasiones se quiere conservar parte de esa información. Por lo que ahora esencialmente puedes guardar información dentro de tu función que nunca está sobreescrita , a menos que quieras sobrescribirla explícitamente. Ahora la palabra clave esta entra en juego cuando empiezas a meterte en la programación orientada a objetos , lo que significa que tienes clases, no solo funciones. La clase es esencialmente un grupo de funciones que trabajan juntas para un propósito común. Y cuando comienzas a meterte en eso, la palabra clave esta se vuelve muy importante porque esto se refiere a todo el objeto. Entonces funciona cualquier cosa esto. En realidad, no se echa fuera que esto se refiera a tu función. De esto de lo que se habla. Entonces no hay asignación para esto. Esta lección yo sólo quería dedo del pie que sepas que la palabra clave esta existe. No tengo que hacer nada con ello. Sólo tienes que saber que en el futuro te vas a encontrar con eso, sobre todo cuando comienzas a aprender cosas como Jaqui usa la palabra clave ah lot y la esta palabra en esta palabra clave se refiere a ser función en la que vive. No, si envuelve una función dentro de una función. Entonces si tuviste otra función, esta palabra clave se refiere a esta. Y si alguna vez quisieras usar esta palabra clave, refiriéndose a la función de cualquier cosa dirías variable y llamas a esto cualquier cosa menos a prácticas comunes como subrayado Tear subrayado. Esto es igual a esto y ahora dentro de esta función. Lo que puedes hacer es este nombre de punto es igual a lo que sea. Entonces de nuevo, no tienes que hacer nada con eso solo escondido en tu bolsillo trasero por ahora, porque eventualmente nos vamos a encontrar con eso como desarrolladores de JavaScript. Y es algo muy común. Entonces cuando ves que no se asustan, todo lo que se refiere es a su función padre. 28. Elevación: todo bien. En esta lección, vamos a estar hablando de izar. Entonces, ¿qué es izar? Bueno, JavaScript tiene esta pequeña característica única que te permite usar variables antes de que incluso se declaren en muchos otros lenguajes de programación. Eso es un gran no no. Poner en JavaScript, puedes salirte con la tuya declarando una variable más adelante. No quiere decir que debas. Entonces si solo creamos poco Devyn Rh email llamado Test Head over a un JavaScript en Js y nos acercamos variable A es igual a algo parábola ser otra entonces podemos decir documento dot queary selector test dot inter html es igual a un plus. B, hecho, en realidad está en un espacio ahí dentro. A plus b guardar refresco, y aparece. Eso no es nada nuevo para nosotros. Eso es porque aquí declaramos una variable, y luego le asignamos un valor. ¿ Qué pasa? Nos deshacemos de eso y declaramos la variable aquí variable una variable B. Golpeo refresco, y sigue siendo cargas. Ahora lo que estamos observando aquí se llama izar y JavaScript. Eso significa que eres variable cada vez que se declara, va a ir de nuevo a la cima de su alcance. Ahí está que estamos que no estamos muy familiarizados con el alcance. ¿ Qué es eso? Nos vamos a meter en eso muy pronto. Es común. Te lo prometo. Ahora, ¿qué pasa si hacemos esto? Dices esto. Esto es algo indefinido. Ahora, ¿por qué una variable es indefinida? Eso se debe a que el selector de consultas está tratando de usar una variable un algo y la variable B. No, no es que sea no existe. Es sólo que aún no existe. Por lo que se declaró porque estaba al fondo. Aquí, variable ser. JavaScript ve esto como esto. Entonces si bien B ha sido declarado, aún no tiene valor, y por lo tanto es indefinido. tanto que si le dimos una variable diferente que no existe, ver y refrescar la página, en realidad nos abrimos. Nuestro cónsul C no está definido. Obtenemos un error legítimo. Entonces voy adelante y deshago que en movimiento este volver arriba y todo funciona tan esencialmente , lo que JavaScript hará es cuando veas lejos, va a mover a la parte superior. Ahora vamos a envolver esto en un texto de cambio de función. Ahora estamos envolviendo esto en una función. Va a funcionar de la misma manera que va a funcionar perfectamente como se esperaba. ¿ Y si nos movemos muy lejos A y B otra vez por debajo del selector de consultas? Bueno, todavía aparece perfectamente bien ahora. El motivo de eso es porque lejos de nuevo se trasladó a la cima. De acuerdo, así que realmente he golpeado este concepto de pasar a la cima haciendo cotizaciones de aire de nuevo. Pero lo que no sabes es que de nuestros A y B no se rompe de su función. Su alcance son los corchetes rizados hasta ahora y ser sólo nos moveremos aquí arriba. Qué medio de R y B. Fuera de esta función no es accesible ahora que va con funciones anónimas. Va con funciones de autoinfocomm. Funciones regulares va con cualquier tipo de esculpir en JavaScript encendido de nuevo. Estamos llegando a alcanzar mi promesa vamos a llegar allí. Pero por el momento, es bueno saber que cuando declaras una variable, no es lo mismo que una firma de valor. Declarar una variable simplemente significa crear el nombre de la variable es como registrarla. No significa que haya algún valor asociado con él, sin embargo, solo significa que simplemente existe, pero no sabes qué hay dentro de él hasta que le asignes algo que podría ser un string inter float, indefinido sabe lo que sea que lo llames. Entonces ese es el concepto detrás del elevador. Ahora cuando estás escribiendo otros lenguajes como python PHP. alzado no es muy común, pero como desarrollador de JavaScript, es bueno saber que el alzado hará esto Ahora. Aquí hay una mejor práctica siempre que estés declarando una variable declarada en la parte superior del alcance, aunque aún no la estés usando. Entonces si tienes un montón de código aquí, sea lo que sea. Aunque las Variables A y B no tengan ningún tipo de asignación para él, no tienen ningún valor. Declararlos de todos modos. Ahora hay dos razones para eso. El alzado a veces puede provocar errores. Muchos desarrolladores no son conscientes de que izar es una cosa, y dos, y dos, le dice a otros desarrolladores que hey, en este ámbito estaban usando las variables de los. Es posible que aún no tengan valores, pero los estamos usando, y así eso solo le da a otros desarrolladores un aviso para que sepan lo que está pasando un poco antes, así que no tienen que leer, ya sabes, 2050 o 200 líneas de código teniendo de repente pensar a sí mismos. Oye, donde diablos está esa variable como ¿Por qué? ¿ Por qué está aquí? ¿ Por qué no se declara en otro lugar? Cuando se meten en estas funciones, saben exactamente en qué se están metiendo. Entonces esa es tu lección introductoria rápida sobre lo que es el elevador. No hay tarea. No hay asignación con esto otra vez. Este es solo uno de esos conceptos que quiero que pongas en tu bolsillo trasero. Por ahora, es muy útil cuando empezamos a aprender sobre el alcance cómo funciona realmente el alcance y en qué hace cuando empezamos a hablar de cierres y qué no? Pero si hay dos cosas que quitar de esto, es una. Declarar una variable no es lo mismo que asignar una variable, y la declaración de variable siempre se mueve a la parte superior de su alcance. Y a es que quieres declarar tus variables en la parte superior del alcance o lo antes posible , Incluso si no le estás asignando un valor, solo declararlo 29. Intenta hacer la tira y finalmente: Hola. Bienvenido de nuevo hoy en esta lección de la que estamos hablando Probar, atrapar y lanzar. Ahora, en los términos más simples, try and catch es algo así como una declaración if else. La única diferencia es en un try Catch. No está buscando un específico, si de lo contrario está buscando algún error. Y como desarrollador, te vas a encontrar una plétora de Eris, y a veces no sabes qué hacer con ellos. Ahora un buen desarrollador tomará esa información, el error, y lo manejarán. Ellos lo procesarán, y se asegurarán de que el usuario como una gran experiencia a pesar de que hay un error, el desarrollador perezoso simplemente matará el script. Y esto lo vemos mucho con los desarrolladores de PHP. Y es un terrible Howard en el que se meten muchos desarrolladores. Pero si te encuentras con un aire, deberías estar manejándolo. No, un bloque try catch se parece mucho a esto. Tienes código de prueba aquí y tienes catch con tu error aquí. Ahora bien, ¿qué hace esto? Bueno, antes de que nos metamos en eso, quiero decirles una mejor práctica. No anides tus bloques de captura de prueba. Eso significa que no pongas otro try en tu con otro error catch que se pone realmente desordenado. Y ese tipo de niega el punto de intentar y atrapar En su lugar, quieres escribir pequeños try catch aires. Si no estás seguro de que algo va del dedo del pie, te doy la respuesta adecuada entonces y sólo entonces escribirás un intento. Catcher. No se escriben con tanta frecuencia como si las declaraciones de otra índole, pero son increíblemente importantes. Y vienen con casi todos los lenguajes de programación en estos días. Entonces vamos a darle un tiro a esto. Veamos qué pasa aquí. Vamos Teoh, Intenta ejecutar una función que no existía. Acabo de guardar eso Refrescar mi página. No consigo nada mirando mi consola. Ahí adentro no hay nada. OK, pero ¿hay algún error? Entonces probemos este mensaje de punto de error de alerta. Esto fue lo que nos fue devuelto. No existe, no se define De aquí en adelante. Nosotros queremos una especie de alejarnos de Ares a menos que estemos haciendo algunos molestos seriamente, En cuyo caso eso está bien. Pero a mejores prácticas ya sea registro de consola o simplemente registrar una recta a la página. Entonces en su índice de HTML. Todavía tenemos este desarrollo de pruebas, así que sigamos adelante y dejemos de fumar. Documentar con claridad. Prueba selector realizada en su html ZX dos error dot message Ahora cuando hay un error, viene en forma de un objeto. Y este objeto es donde se obtiene esta notación de puntos. Ahora recuerda, vuelta con tipos de datos. Esto fue como hace 100 años. Al inicio de este curso, pudimos acceder a objetos de datos utilizando un periodo que es objetos únicos del dedo del pie. No podemos hacer eso con un aumento. Las matrices son los corchetes duros. Funciones son las raquetas redondeadas, los paréntesis. Y así siempre que veas un punto, eso es un objeto, nos salvamos, vamos a nuestra página dicho. OK, acabo de refrescar. Y ahora en nuestro elemento de prueba, dice que no existe no está definido. Pero, ¿qué otra información obtenemos mientras entramos en una consola iniciamos sesión en todo el objeto de error ? Refresca la página y el error que regresa está justo aquí. Ya sabes, si solo quieres consola, registra el aire, puedes hacer eso al error de registro de consola y siempre mensaje de punto. Muéstrale lo que esto devuelve. Acabo de refrescar la página y el error fue un error de referencia. El mensaje de error en sí es, No existe, no está definido ahora. ¿ Y si queremos personalizar esto? ¿ Y si dijéramos Si uno es igual a uno, eso siempre es cierto? Uno siempre es igual a otro. La física está mintiendo. La física es una mentira. Si esto es cierto, como nuestro si el que no iguala a uno ahora aquí, lo que podemos hacer es lanzar un error, guardar que recargar una página cuando obtenemos un aire de muestra indefinido, cool. Por lo que ahora lo sabemos. Pero el error en sí es un aire de muestra. Sabemos esto porque se registra el siempre Así que ahora tenemos algún tipo de dirección, debilitamos totalmente personaliza y decimos en lugar de frase para un aire, podemos decir usuario desconocido. Y aquí decimos si error es igual a usuario desconocido, haz algo aquí, lo contrario es un aire diferente. Ahora lo que podemos hacer aquí es en lugar de devolver a usuario desconocido de nuevo a la página. Los usuarios no quieren ver mensajes de aire así. Ah, y la mayoría de los usuarios ni siquiera saben qué cosas así. En realidad son solo piensan, Oh, eso es Eso es raro. Eso probablemente no se supone que suceda. Y es algo raro para ellos. Pero para nosotros, como desarrolladores, sabemos exactamente qué hacer. Les damos un mensaje de error personalizado. Nosotros decimos. Lo siento, ya no estás firmado así. Ahora vuelve atrás, refresca tu página y dice, Lo siento, ya no estás registrado. Y se desconoce el mensaje de error. Usuario, eso es flujo de datos. Ahora tenemos algo con lo que trabajar. Ahora, para que esto sea un poco mejor. Hagamos este nombre. Uh, sí. ¿ Cuál es tu nombre? Nombre de variable es igual a prompt. ¿ Cuál es tu nombre? Y si nombre no equivale a algún nombre secreto, Vamos sino secreto. Vamos a lanzar en el aire. De lo contrario, haz algo bueno. Dirá que se te permite entrar aquí así como así. Guardar. Refrescar. ¿ Cuál es tu nombre? Bueno, estamos buscando el nombre Secret dice que se te permite entrar aquí. Impresionante. De acuerdo, entonces volvamos a refrescarnos. ¿ Cuál es tu nombre? Mi nombre es Caleb, y debería arrojarme un error de usuario desconocido. Y lo hizo en usuario conocido. Y debido a que sabíamos cuál era ese error, pudimos personalizar eso y decir los años de ellos ya no iniciaron sesión o que soy invitado o que no me permiten o algo en esa línea, y eso hace que la experiencia del usuario sólo un poco más suave. Ya hemos comentado aquí, lanzar un nuevo aire. Ahora tenemos uno más aquí, y eso finalmente va de la mano con try and catch. Y lo que eso significa es, independientemente de lo que pase aquí dentro, independientemente de lo que pase aquí dentro, siempre ejecute esta siguiente sección. Eso es lo que podemos hacer es que podemos copiar esta línea y podemos anexar a ella y decir, Vamos a agregar algo de HTML justo ah, salto de línea básico y derecha tratar Catch finalmente se ejecutó igual que esa página refrescante. ¿ Cuál es tu nombre? Vámonos. No, no queremos secreto. Queremos que algo se presente. Caleb, lo siento. Ya no te pones de lado y lo intentas. Catch finalmente se corrió. Ahora podemos redirigir a la gente. Podemos trasladarlos a otra página. Podemos obligarlo a que cierre la sesión. Ya ves, tenemos un intento, atrapar y finalmente, pero no tenemos si declaración ahí dentro y eso está totalmente permitido, tienes tantas declaraciones FL como quieras ahí dentro. Lo único que no debes hacer es poner un try catch dentro de un try catch. Eso es una especie de no, no, está permitido. Pero ahora es una mala práctica para tu asignación. Pero me gustaría que hicieras es crear otro intento. Atrapar. Por último bloquear. Al igual que lo que ven aquí, quiero que lancen su propio error. Realmente no me importa cómo consigues ese aire. Ni siquiera necesariamente necesitas pedir cualquier tipo de información. Simplemente puedes arrojar el error si quieres. Sé que estás familiarizado con pronta. Ya. Yo quisiera que lanzaran un error y luego en su bloque catch, me gustaría que controlaran el flujo de datos de ese aire. ¿ Qué está pasando con nosotros? ¿ Cómo vas a manejar esta situación? Y luego cuando el try and capture termine corriendo, agregas tu bloque de fin y eso puede ser realmente cualquier tipo de señal que diga Oh, hey, el try y el catch están hechos. Podría estar en alerta. Podrías ser una bitácora del consejo. Podrías hacer algún cambio inter html si quieres. Sea lo que sea. Simplemente consigue un poco de experiencia con Probar, catch. Y por último, esta es una de esas cosas que separa a un desarrollador mediocre de un gran desarrollador. Y también es uno de esos conceptos fundamentales de programación que puedes llevar contigo a otros lenguajes también. El PHP, por ejemplo, un lenguaje muy, muy común, utiliza una sintaxis muy similar a ésta, y la forma en que fluye sus datos es exactamente igual en casi todos los idiomas. Es solo que necesitas saber escribir ese idioma, eso es todo. Pero una vez que sabes cómo un try catch finalmente funciona JavaScript, lo averiguas en PHP aún más rápido. Lo descubrirás en Python aún más rápido que eso. Así que adelante, consigue un try catch finalmente configurado en trabajar. No lo olvides. Puede referirse a estos archivos de proyecto en cualquier momento. Te doy el código exacto que ves en la pantalla al final de cada lección. Y recuerda, si tienes preguntas, siéntete libre de preguntar abajo, o puedes subirte a la página de Facebook y preguntarnos ahí, también. Hay mucho apoyo, muchos desarrolladores, y todos estaban dispuestos a ayudarte 30. Alcance: todo bien. Ya es hora de que aprendamos formalmente sobre alcances. Alcance. En su forma más simple están las variables a las que actualmente tienes acceso. Eso es todo lo que es, así por variables. En este sentido, lo que quiero decir son variables, funciones, objetos, un aumento. De verdad, cualquier cosa a la que tengas acceso está dentro de tu alcance. Y con JavaScript, tus funciones tienen alcance a lo que significa que cuando declaras una variable dentro de una función, se considera una variable local. Ahora hay una gran sentencia if alrededor de eso, y que si la declaración realmente es cómo se declara la variable. Ahora tenemos dos tipos de variables que normalmente tratamos. Tenemos variables locales y variables globales. Entonces cuando decimos variable local de la que estamos hablando dentro de una función y una variable global , significa una variable que es accesible fuera de la función en que puede moverse dentro de la función para que sirva a la variable global es igual a Acabaremos de poner la variable global del año 2017 y la consola de prueba de funciones dot log, y ejecutamos esa función un navegador interno. Aquí vemos 2017 por lo que esta es una variable global porque esta variable fue declarada fuera de esta función. Ahora, ¿qué pasa si decimos variable variable local es igual a, digamos, próximo año, 2018? No, eso no es suficiente en el futuro, digamos 2028 y fuera de la función escribimos consejo dot log variable local save, obtenemos un error de referencia. No se define la variable local. ¿ Qué significa eso? Eso significa que la variable local sólo es accesible dentro de prueba. Ahora eso se debe a que usamos la declaración var cuando usamos lejos que eso está dando un alcance local . Ahora bien, ¿por qué es esto global? Porque actualmente, toda esta página es el ámbito local y dentro de esta página de ámbito local se encuentra una función de ámbito local , y dentro de esa podría ser una función anónima. ¿ Alguna vez has visto el inicio de la película? Es así. ¿ A qué altura va el hoyo de conejo? Bueno, técnicamente, no tan lejos, Realmente. Ahora, ¿qué pasa si nos deshacemos de lejos y sólo declaramos esto como una variable global? Porque sin lejos esto es global. Ahora pasa lo mismo. Donde se quiere prevenir es demasiadas variables globales. Las variables son mejor en realidad con alcance. Y sé que esto podría sonar un poco contraintuitivo cuando se puede controlar la variable donde están, se está hablando de una aplicación más segura, a menudo puntería o eficiente. Entonces solo porque puedas hacer que todo sea global no significa que debas hacer que todo sea global. Y de hecho, aquí dentro voy a seguir adelante y poner eso atrás ahí. Cuando una variable se considera local haciendo cotizaciones de aire aquí local la variable local, digamos dentro de una función solo vive siempre mientras esa función se esté ejecutando. Entonces cuando llamo pruebas en línea, 10 de aquí para aquí es donde existe la variable local. Una vez que esta función está terminada de ejecutarse, ya no existe. Ahora eso es lo que es una variable local. ¿ Qué hace de esto una variable global? Es sólo que es local otra vez. Cotizaciones de aire. Alcance local es más grande que la función y por lo que esta variable va a vivir mientras JavaScript se esté ejecutando en la página. No, cuando hablamos de parámetros o argumentos dentro de una función, recuerda, teníamos, ya sabes, alguien para adormecer cuando estábamos construyendo una calculadora. Cosas así, éstas son automáticamente locales. Entonces esto es lo mismo que decir var numb tres y estos sólo vivirán dentro de la función mientras la función se esté ejecutando. Una vez que la función no se está ejecutando, los's ya no se declaran o asignan nada y comienza de nuevo. Entonces, cuando vuelves a ejecutar esta función, automáticamente vuelve a iniciarse. Ahora sabíamos romper eso por la palabra clave esta. Y puedes ordenar la palabra clave esta con propiedades adicionales a una función ahora saltando de nuevo a variables globales. Cuando tenemos una variable aquí fuera así, esto pertenece al objeto ventana. Esto es lo mismo que decir ventana dot variable global es igual a Debido a que javascript se vincula a tu página y a tu ventana, ahora estás creando una variable global. Por lo que esta es técnicamente la variable más global que se puede crear. Entonces vamos a crear un ejemplo de una variable global. Entonces tenemos contador global es igual a cero función anuncio y todo lo que vamos a hacer es contador global plus y cuando escribamos anuncio una y otra vez y al final asesoramos log contador global Bueno, esto va a incremento por uno y y a partir de cero. Por lo que esta será 1234 por lo que uno que vuelva a ella podría refrescar la página. Obtenemos el número siete. Entonces, ¿por qué es eso? Podemos usar una variable global dentro de una función, pero no podemos usar una variable local fuera de una función. Bueno, señoras y señores en javascript eso se llama cierre. Ahora, lo que hace del cierre algo muy bonito es que no tienes que pasar todas tus variables a través de tus funciones. Ahora bien, si escribes cualquier python o PHP a excepción de variables globales, generalmente eso viene en forma de solicitud o como cuando se presenta un formulario, el post objeto. Pero cualquier variable que escribas típicamente no es global, pero en javascript pueden ser ahora con gran poder viene una gran responsabilidad. Asegúrate de no exagerar. Pero lo que nos hace realmente agradables es con contador global. No tenemos que añadir contador global a nuestros parámetros. No tenemos que añadir este contador global de inicio plus como lo hicimos en ejemplos anteriores. No tenemos que hacer nada de eso. Lo hace por nosotros ahora. Adicionalmente, también podemos crear otra variable dentro de esta función llamada contador local y podemos hacer lo que queramos con esto. Recuerda, esto está alzado. Entonces esto se está moviendo esencialmente a la cima de todos modos, así declarado en la mejor práctica y podemos hacer lo que queramos con contador local. Ahora contador local solo vivirá mientras se ejecute esta función y vivirá varias veces. Vivirá y morirá con add Vivirá y morirá con este anuncio. Viviría y moriría con esto que vivirá y morirá con esto y así sucesivamente y así sucesivamente. Todo este proceso se llama cierre y cierre está permitiendo variables globales con scooped dentro de funciones esencialmente o cualquier otra cosa que tenga un alcance más pequeño. Entonces ahora somos su alcance. Tenemos alcance global, tenemos alcance local y tenemos cierre. Ahora bien, si todo eso fue un poco confuso, voy a crear sólo un ejemplo más Uno súper rápido y ni siquiera va a ser realmente recubrimiento va a ser pseudo código, ¿ verdad? Entonces tenemos variable uno y este bebé es global. Entonces tenemos una función y cualquier cosa con la que empecemos. El fuego aquí dentro es local. Ahora, variable. Se puede pasar automáticamente a hacer una pequeña flecha aquí. Impresionante. Si me pudiera así. Por lo que la variable uno se pasa automáticamente a la función de nombre para que podamos acceder a esto dentro de aquí. Pero no podemos acceder a ninguna variable local. Variables para empezar, lejos del interior. La función fuera de la función simplemente no funciona. Por lo que eso le da a las funciones un poco más de privacidad mientras les da la ventaja de llegar más allá de su propio mundo y agarrar cualquier cosa que se les asignara antes. Ahora, su asignación. Espero que estés listo para este porque éste va a ser un doozy. Tu tarea para este curso es no hacer absolutamente nada. Todo lo que quiero que hagan es observar lo que ha pasado aquí. Y la próxima vez que estés mirando algún tipo de JavaScript, quiero que te pienses a ti mismo. ¿ Esta variable es local? ¿ Dónde es esto global? ¿ Por qué es global? ¿ Por qué es local? Sólo eso es todo lo que tienes que hacer. Sólo piénsalo a ti mismo. La mitad de la batalla con la programación y el desarrollo Web es realmente solo pensar y debatir y averiguar cómo funciona dentro de nuestras cabezas. Entonces eso es alcance. Si no tenía sentido, ¿sabes? No lo sudes demasiado. Conseguirás un ahorcamiento de ella. Sé que lo harás. 31. Proyecto: hacer un modal: hola y bienvenidos a su segundo proyecto en este proyecto. Como puedes ver desde mi pantalla, quiero que hagas algo que los frameworks están haciendo por ti. Mucha gente confía en marcos como la correa de arranque Foundation. A ti te gusta. Y estoy aquí para decirte que honestamente, son innecesarios. Si conoces tu JavaScript en tu CSS, nunca necesitas un framework. Y así mi objetivo como profesor es asegurarme de que para el final de este curso, no veas bootstrap como el ser todo y terminar todo solución porque, francamente, no lo es. Está bien, No me malinterpretes, y viene con un montón de cosas bonitas que son realmente rápidas. Pero como desarrollador, también debes tener en cuenta que estos aire también muy hinchados. Y aunque los puedas personalizar, también puedes escribir tus propios framers desde cero. Hace un poco más de tiempo, pero entonces también eres dueño de tu proyecto por completo. Entonces echemos un vistazo a un motel. De acuerdo con bootstrap, moteles son racionalizados pero flexibles. El diálogo solicita con una funcionalidad mínima requerida y los predeterminados inteligentes. Vamos a construir alrededor de la mitad de esto técnicamente eso. Aquí tienes un ejemplo. Aquí tienes un ejemplo en vivo. De acuerdo, lanza demo Moto y es solo esto, como esta cajita que aparece en tu página. Es como un pop up dentro de tu página. lo has visto mil millones de veces, están por todas partes, y suele ser que estás en algún tipo de sitio Web, y es como, Oh, hey, hey, te suscribes a nuestro newsletter y este te aparece el móvil en la cara. Aquí tenemos algunas funcionalidades básicas. Tenemos un título. Tenemos nuestro contenido, son texto, lo que sea que va a ser. Eso debería ser HTML. Tenemos que cerrar y un botón de guardar cambios. Pero eso mismo guardar cambios. Botón realmente es solo otro botón de cierre que ejecuta otra función. No estamos hablando de devoluciones de llamadas, así que todo lo que necesitas para este Moto es un título, un botón de cierre, un área de contenido y un enlace cercano o un botón de cierre en la parte inferior. No te preocupes por los cambios de guardar ahora, a diferencia de nuestro primer proyecto, no te voy a ayudar demasiado con este. Si te atascas, te atascas, hizo preguntas en un grupo de Facebook, o abajo. Y eso está perfectamente bien. Recuerda, Google es tu amigo Stack. Desbordamiento es tu mejor amigo. Ah, Y trata de usar sólo lo que has aprendido. Si conoces más JavaScript más allá de lo que ya has aprendido a las puntuaciones. Impresionante. Usa eso. Pero para crear un motel, no necesitas nada más. Um, y solo quiero aclarar la simplicidad de este modelo que deberías estar creando. No necesita tener animaciones. No necesita tener un destino. Ni siquiera necesita tener este bonito oscuro fondo ish. Solo necesita ser una cajita que aparece en tu página. Eso es todo lo que vamos a buscar. El resto de ella realmente está peinando. No estamos buscando estilo. Estamos buscando funcionalidad. Te puedo decir en este momento vas a necesitar al menos un par de funciones que van a tomar un par de parámetros diferentes. Vas a necesitar una función de cierre porque necesitas cerrar el modelo. De alguna manera vas a necesitar una función abierta que desencadene la capacidad de abrir este móvil, y vas a necesitar poder personalizar el contenido que está dentro de él. Por lo que el título y el contenido en eso deben estar habilitados HTML. Entonces, ¿por qué esto podría sonar como un gran proyecto? No es tan grande. Es sólo un poco. Ahora es diferente. Si te estás preguntando. Bueno, Caleb, ¿por qué codificaría esto cuando esto es accesible para mí? En este momento, aquí la respuesta es porque un gran desarrollador no estamos hablando de buenos desarrolladores. No estamos hablando de desarrolladores junior fueron terribles, grandes desarrolladores. Eso es lo que quiero que seas. Yo quiero que seas un gran desarrollador. Y los grandes desarrolladores no confían en frameworks. Los marcos son bonitos, sus herramientas, son útiles. Ayudan a acelerar la producción o el desarrollo. Pero en ningún momento de tu carrera de desarrollo debes confiar únicamente en un marco. Y así la idea es construyendo esto, entenderás un poco más sobre cómo funciona realmente el móvil. Y también te vas a destetar de lo esencialmente. Va a ser, um, um, tú en el futuro, pensando que solo debes quedarte con Bootstrap Ahora como una salvedad, es bueno conocer Boot Strap Foundation. Obtienes todos estos otros marcos. Esos son fantásticos. Pero de nuevo, como gran desarrollador, no es necesario confiar en estos. Y así este proyecto hace dos cosas. Uno , te enseña a hacer un móvil muy importante. Y a ello te enseña que no tienes que depender del abrigo de otras personas y que eres hecho lo suficientemente bueno como para escribir tu propio código para que esto suceda. Ahora, sé que puedes hacer esto, así que adelante. Supongo que están con nosotros. No sientas presión para que sea perfecto. Nadie te está juzgando por esto. No te estoy anotando en ello. Yo solo quiero que construyas algo realmente genial. Así que adelante, empieza. No olvides las preguntas abajo o preferentemente y Facebook Group, y voy a seguir adelante y crear un mótil rápido. No va a ser impresionante porque, bueno, esto no se supone que sea un motivo impresionante sólo se suponía que funcionara. Voy a grabarme haciéndolo para que ustedes vean cómo terminé haciéndolo 32. Proyecto: hacer una solución modal: Hola ahí. Entonces esta va a ser la solución para hacer un móvil ahora, al igual que el proyecto anterior, no planeé este 10 no sé exactamente cómo voy a hacer esto. Uh, honestamente sólo voy a ala. Las probabilidades son como una tonelada de errores. La cosa no va a funcionar para hacer un montón de errores tipográficos. Y es algo bueno, porque entonces se puede ver cómo funciona otro desarrollador y que, uh, uh, otros desarrolladores con toneladas y toneladas, años y años de experiencia todavía cometen errores tontos. Todos nos dio um así sin más preámbulos, supongo que solo debería ponerme agrietado en esto. Por lo tanto, siéntete libre de observar espectado. Tenemos algunos comentarios, si quieres. No vas a herir mis sentimientos. Si me dices que hice algo mal o deletreé algo mal o, uh, ya sabes, algo así. Entonces, de todos modos, vamos a llegar a ello. Entonces estamos construyendo un modelo. Lo primero que tenemos que hacer es que necesitamos un contenedor móvil. Ahora, tenemos dos formas de hacer esto. Podemos dejar que Javascript cree un nuevo modelo cada vez que quieras abrir un motel y tenemos la segunda vía, que es usar un mortal y vuelves a utilizar el código que está en tu página. Vamos a ir con la opción número dos Mejor opción. Pero para lo que estamos haciendo de nuevo, esto no tiene que ser código elegante ni nada. Sólo necesita trabajo del dedo del pie. Entonces empecemos con mortal. Hago todo con clases. Tiendo a tratar de no usar ideas a menos que esté enseñando. Entonces tenemos nuestro móvil completo aquí y aquí. Sé que tenemos título móvil. Espero que correr y yo estaba en su lugar que ahí dentro y aquí sé que tenemos un contenido moral se contenido ahí, y también tenemos pie de página móvil, que es donde estaban los botones se revolotean. En realidad, no voy a hacer esa. Voy a decir botón móvil y también voy a llamar a ese móvil cerrar modelo. Por lo que ahora tenemos una sección para nuestro título para un contenido y para un botón de cierre que también necesitamos poder abrir a este mortal. Entonces vamos a crear un tipo de botón de botón. Apenas un botón regular hará móvil abierto ahora, utilizando sólo lo que sabemos decir al click open motile su función que aún no hemos creado . De acuerdo, entonces abrí mi página y esto es lo que tengo. Eso no está bien. Por lo que desafortunadamente, no se puede escapar sin algún estilo extra. Entonces esto es lo que vamos a hacer. Motile ¿Qué hay en el motor? Bueno, es una posición fija, ¿verdad? A la plática le va a quedar 25% va a ser 50%. Um, ¿quieres algún tipo de transición? No. Vamos a traducir, sin embargo. Uh, sin transformar, Traducir. X va a la izquierda y a la derecha. Por qué va hablando abajo menos 25%. Hagamos un borde una púas de sólido C C C. Color de fondo También negro. Y sólo para que sepamos que todo el motor de Texas va a ser negro. Enfriar. Echemos un vistazo a esto. Ahí está. No le di un ancho. ¿ Qué pasa de algún 100% aquí? Está bien. Ah, y en realidad, lo que se supone es que creo que es 50%. Ha pasado un tiempo desde que he hecho uno de estos, uh, uh, con 50% de nuevo. Ahí vamos. Centro muerto. Ahora el contenido de tu título. Motile Ah título motil tamaño de fuente 19 pixels. Frontera inferior una púas de sólido. A ver, A ver a ver si no me quieres ver hacer el CSS, eso está totalmente bien. Puedes saltarte adelante en este momento. Simplemente asumí que, ya sabes, CSS um aquí, vamos a hacer relleno 20 pixels y pie de página total. No es así como deletreas pie de página Orden. Duro de un píxel sólido zzz. Ahora a ver cómo se ve esto? Sí. Está bien. Bien. Añadamos un poco de relleno al título y la mejor radio. Y ahí está. Enfriar. De acuerdo, así que ahora necesitas estar escondido. Explicar un refresco. Su modelo abierto hace no hizo nada porque el agua abierta no es para encontrar. Pero sabemos por qué no es encontrar función abierta Motile Ahora lo único que queremos hacer aquí es que queremos seleccionar nuestro modelo y queremos hacerlo visible. Ese es el paso número uno. Entonces dijimos que el modelo variable es igual. Teoh documento dot query selector motile y luego motile dot style display es igual a block . ¿ Qué pasaría? Ahí está nuestra moto. Entonces ahora tenemos algo que va a aparecer en la parte superior de nuestra página ahora. Todavía no lo podemos ver. y en realidad qué es ese índice de 10 y a nuestro cuerpo sólo para que podamos ver que hay diferentes capas. El color de fondo se va a leer listo marrón sobre el color va a ser blanco. Ahí vamos. Mira eso. Pero ahora podemos usar el cierre y los alcances en nuestro beneficio, porque por qué declarar esto una y otra vez si sólo necesitamos declarar una vez porque sólo hay ese elemento en la página. Entonces probemos esta actualización. Ahí está. Entonces si quisiéramos hacernos hablar crédulo, ka global no realmente seguro de decir eso, diríamos si la pantalla de puntos de estilo móvil es igual a bloque, entonces cámbialo a ninguno, o si no es ninguno cambiando el bloque. No vamos a hacer eso ahora mismo, aunque en cambio, lo que necesitamos es agregar el título, el contenido y un botón de cierre. Ese es el botón de cerrar, porque ese es probablemente el modelo de cierre más fácil, y todo lo que hacemos es la visualización de puntos estilo punto móvil es igual a ninguno. Todo lo que hace es volver a ocultarlo, y aquí podemos crear un botón cerrar móvil y la clase, no la clase. El propio evento click va a estar cerca. Motile refresh abridor de veg Motile Closer Abridor de motiles Motile Closer Motile Impresionante! Eso está funcionando ahora Ya casi estamos ahí ahora Un título y contenido. ¿ Cómo hacemos un título y contenido ahí dentro? Bueno, si estamos abriendo nuestro móvil, debería haber un título y contenido ahí dentro, ¿ verdad? Entonces es triste Pequeño título. Poco contenido. Ahora lo que esto va a hacer es cambiar el título y el contenido real dentro del motel . Entonces aquí vamos a crear título móvil. Don't Inter html es igual a título mortal. Ahora tenemos que entrar en claro esto otra vez. Um, en realidad es cubrir esto más porque ¿por qué escribirlo toda una y otra vez? Título total y es lo mismo para el contenido. Poco contenido así como eso. Yo estoy aquí. ¿ Tienes contenido mortal y qué pasa cuando hacemos clic en esto? Bueno, mira eso. Eso no nos debe sorprender. Estos son indefinidos porque los thes actualmente no están definidos. Volvamos a nuestro HTML y abrimos título móvil aquí. Contenido aquí. Refresca tu página. Mira ese título aquí título. Eso no es bueno. ¿ Por qué es eso? Recuerda hace un par de lecciones cuando te dije que tuvieras cuidado con copiar y pegar. Es por eso que esto nos pasa a todos. Copié y pegué al tipo demasiado por delante de mí mismo Y debería haber sido contenido mortal , no título mortal. Actualiza la página. Vuelve a intentarlo. Ahí vamos. Tenemos título. ¿ A quién le dieron contenido? Tenemos nuestra ropa móvil Pero ahora digamos que queremos ese pequeño símbolo de tiempos extra en todo moteles. Bueno, podríamos ponerlo, uh, uh, en un elemento en alguna parte y cambiar un montón de su JavaScript o simplemente podríamos depender de nuestro título. Uh, no clase. Quiero dar click como Exoo Close motile Uh, ¿por qué querría gastar? ¿ Por qué no botón expandido trabajo? Bien, pero un botón tiene un poco de estilo extra que podemos aprovechar ahí te pre fresher page open motile Mira que funciona justo como habíamos esperado Y ahí vamos en solo unos minutos Tenemos un motile off and running 33. Proyecto: hacer una solución modal parte 2: Ahora de nuevo, este no es un hermoso motivo por ningún medio, pero hace el trabajo. Entonces sigamos adelante. Y sólo porque esto fue tan rápido uh, hagámoslo hablar crédulo. Si mortal de ese estilo que visualización es igual a bloque entonces pipa motile else show model. Entonces ese es el show. Y esta es la opción de ocultar. Ahora podríamos esconder al mortal escondiéndonos aquí. Pero, ¿qué pasa con esa regla? D r y no te repitas. Mira eso. Dos piezas del mismo código exacto vuelan Ejecutar eso en absoluto. Cerrar móvil, refrescar la página. Mira esto. Esta plática va ahora es tan hermosa? Ahora el beneficio de usar funciones y podemos ver esto claramente aquí es si cada vez que cerramos el modelo, no solo queríamos cambiar la pantalla a ninguna, sino que ¿y si quisiéramos restablecer el html interno fuera del contenid