Aprende JavaScript: de principiantes a técnicas de codificación avanzadas

1. Introduccion: Javascript, hablemos de JavaScript. A diferencia de HTML y CSS, que son lenguajes de marcado y hoja de estilo, respectivamente, JavaScript es un lenguaje de programación similar a Python, Java y otros Lo que JavaScript nos permite hacer es introducir lógica en nuestros sitios web actualmente estáticos o inmutados Por ejemplo, si tuvieras un formulario que permitiera a un usuario registrarse en tu sitio web, no sería genial si una vez que ingresaron, fueran recibidos por su nombre en lugar de recibir un saludo genérico Esto es algo que JavaScript nos permitirá hacer. Alto. Zoe Davidson, ingeniera de software y profesora universitaria Profundicemos en los entreses de JavaScript y lenguajes de programación en general 2. Proyecto de clase: Vamos a tomar esta pequeña forma que hemos creado aquí, y de hecho vamos a usarla para dar a nuestros usuarios nuestra respuesta cuando envíen su información 3. Programar idiomas: Lenguajes de programación. Entonces, como ya hemos comentado, JavaScript es un lenguaje de scripting que te permite introducir lógica y funcionalidad en tus páginas web Pero, ¿cómo hace esto? Como también hemos mencionado, JavaScript es un lenguaje de programación. Hay varias cosas que la mayoría, si no todos los lenguajes de programación tienen en común. Al igual que otros tipos de lenguajes basados en computadora, los lenguajes de programación están en sus formas más simples, solo formas de hablar con la computadora Javascript en particular, nos permite como programadores interactuar con la Web a través DOM o del modelo de objeto de documento El DOM es una interfaz de programación para documentos web y actúa como una representación de esa página que pueda ser interactuada, actualizada y modificada en función de la entrada e interacción del usuario Javascript en particular es el lenguaje que utilizamos para interactuar con el DOM. Y el 98% de todos los sitios web utilizan JavaScript en el lado del cliente, los lenguajes de programación también tienen su propia sintaxis única. Al igual que en otros idiomas como el inglés y el francés, existe una sintaxis que define y explica las formas en que las palabras se unen para formar oraciones, párrafos, etcétera lenguajes de programación de la misma manera, cada uno tiene su propia sintaxis para determinar qué constituye una línea completa de código. Por ejemplo, al igual que en la clase de gramática en la escuela, dedicaremos una buena cantidad de tiempo aprendiendo y discutiendo sintaxis para que podamos asegurarnos de que estamos hablando el idioma correctamente. Después de todo, piensa lo importantes que son las comas en el idioma inglés Es posible que hayas oído hablar de otros lenguajes de programación como Python, C, Ruby, Java y otros. Dependiendo del tipo de aplicaciones que estés buscando construir, uno de estos lenguajes de programación podría ser más adecuado para la tarea que otros. Todos los lenguajes de programación tienen su propio caso de uso y propósito únicos. El objetivo de este curso es aprender a interactuar y construir aplicaciones para la web. El mejor lenguaje de programación que podemos aprender es JavaScript. Hay muchas otras cosas que todos los lenguajes de programación tienen en común, incluyendo variables, estructuras de control y estructuras de datos. Nos meteremos en cada uno de esos a su debido tiempo. Entonces ahora que sabes un poco más sobre qué es JavaScript y cómo se relaciona con el desarrollo web. Empecemos a escribirlo 4. Configuración: Hay dos lugares donde JavaScript se puede escribir en archivos HTML o en su propio archivo JavaScript dedicado. Si queremos escribir JavaScript es un archivo HTML, es tan sencillo como agregar la etiqueta script a la sección head del documento. Esta etiqueta de script está reservada para cualquier lenguaje de scripting, que son Idiomas que puedes ejecutar comandos width, y aquí es donde nuestro JavaScript podría vivir teóricamente Todo lo que escribas entre estas etiquetas será compilado e interpretado como JavaScript. Bueno, esto está bien para unas aplicaciones muy pequeñas. Esto podría complicarse un poco una vez que empecemos a construir sitios web cada vez más complejos. En este caso, podemos utilizar el segundo lugar en el que JavaScript se puede escribir en su propio archivo y simplemente utilizar una etiqueta script como referencia, haremos un archivo JavaScript separado, App.js y conectaremos los dos. Como mencionaste, hay dos lugares en los que JavaScript se puede escribir dentro un elemento script en la página HTML entre dos etiquetas de script o en su propio archivo. Si lo escribiéramos dentro del archivo HTML, lo escribiríamos así. Creamos nuestra etiqueta script en la cabeza, y luego escribiríamos nuestro JavaScript. Entonces escribimos como console.log, Hola, Mundo, guárdalo. Y luego si pasamos a nuestra página web, veríamos en la consola que hemos registrado a HelloWorld Ahora bien, esta no es mala idea cuando estás haciendo proyectos mucho más pequeños, pero como puedes ver, no es necesariamente algo práctico que hacer. Si tiene múltiples componentes y múltiples capas. Te puedes imaginar que tu archivo HTML empezaría a alargarse bastante. Como buena regla de práctica, una buena idea para tener en tu cabeza es que realmente no quieres archivos que tengan más de 100 líneas de largo a menos que sea un componente particularmente complejo que necesita toda la lógica para estar todos juntos. Idealmente, quieres romper las cosas en pedazos e integrarlas como necesites. Para ello, quieres poner tu JavaScript en un archivo separado. Entonces, deshagámonos de esto. Y eso es en realidad seguir adelante y crear un nuevo archivo, y lo llamaremos app.js. Debido a que JavaScript es un lenguaje de scripting, el elemento script nos permite conectar cosas que son scripts Así podemos hacer script y luego podemos hacer igual que hicimos con la hoja de estilo, dot slash y seleccionar app.js y tener nuestra etiqueta de script cerrado Bien, ahí vamos. Bueno para ir. Bien, la etiqueta I script ahora está conectada 5. Escritura de JavaScript: Escribir JavaScript. Ahora que sabemos dónde se usa JavaScript y cómo funciona teóricamente, es hora de aprender a escribir Si eres nuevo en la programación de JavaScript, tardaremos un poco más en aprender que HTML y CSS. Y eso es completamente normal. Es porque no sólo estás aprendiendo otro idioma nuevo, sino que estás aprendiendo un lenguaje de programación y algunos de los conceptos centrales detrás de la programación en general. Pero no te preocupes, si te quedas con él pronto, será igual de fácil como cualquier otro idioma. Primero, saltemos a ese archivo app.js vacío. Muy bien, así que probemos nuestro enlace para asegurarnos de que está funcionando Así que hagamos un console.log y vamos a escribir hola mundo y lo guardaremos y lo veremos en una consola. Impresionante. Ya estás escribiendo JavaScript. Ahora bien, ¿qué acabas de hacer ahí? Simplemente instruyó a la consola, que es esa ventana dentro su pestaña de Chrome para que se registrara o mostrara, cual puso dentro de esos dos paréntesis. Console.log es un método esencial que incluso los ingenieros de software avanzados utilizan, ya que es una excelente manera averiguar dónde podrías haber cometido un error en tu código. Un proceso que se conoce como depuración. Por ahora, sin embargo, no necesitamos ese código, así que vamos a comentarlo. Para comentar algo. En JavaScript, mantienes presionado el botón Comando y presionas la barra diagonal hacia adelante y en realidad acaba de comentar. Entonces, comentar significa que no tienes ningún uso para ese código Ya no se está ejecutando activamente. Siempre puedes ser poco común y traerlo de vuelta a tu página. Pero no necesariamente necesitas comentarios son otra excelente manera de dejar notas más amigables con los humanos a otros desarrolladores Entonces se podría decir que esto es un comentario y solo hacerle saber a la gente lo que estás tratando de hacer su trabajo podría decir que este es un registro de puntos de consola de prueba. Para que puedas avisar a la gente como Hey, este registro de consola no es importante Los comentarios son realmente geniales. Creo que más gente debería poner más comentarios en ese código para que otros desarrolladores, cuando están trabajando juntos, puedan entender por qué alguien ha hecho una elección simple. No quieres poner demasiadas líneas con un comentario, pero igual que una línea corta, un fragmento rápido solo para decir, Oye, esto es lo que hice esto, ¿por qué lo hice? Creo que es una práctica realmente genial. 6. Variables: Variables en informática, los datos son cualquier cosa que sea significativa para la computadora. Javascript proporciona ocho tipos de datos diferentes que son undefined, null, booleano, string, number, object, big, Int En este curso, nos vamos a centrar solo en los primeros seis, ya que como nuevo ingeniero, rara vez te encontrarás con el último para que estos tipos de datos ayuden a una computadora a entender lo que puede y no puede hacer con un dato Por ejemplo, 12 puede ser un tipo de número o un tipo de cadena. Si es un tipo de número a computadora lo trata como tal. Y se puede utilizar en todo tipo de operaciones matemáticas como suma y resta Por ejemplo, si es una cadena, por otro lado, se tratará como una línea de caracteres, como una oración u otro grupo de letras. Las cadenas son grupos de caracteres utilizados para almacenar líneas básicas de datos que no son números. Las cadenas siempre tienen comillas mientras que los números no, y también son siempre números. No solo cada dato necesita un tipo, sino que también necesita un lugar para almacenarlos para que se pueda acceder a ellos una y otra vez. Sería una experiencia terrible si escribieras un montón de información en una página web y simplemente desapareciera una vez que saliste de la página Aquí es donde entran en juego las variables. Las variables actúan como las ubicaciones de almacenamiento para cada valor en particular. Es posible que te hayas encontrado con variables como X e Y y tus clases de matemáticas de secundaria Las variables de programación siguen el mismo concepto. Son una representación de los datos que estamos almacenando. La única diferencia es con JavaScript, estas variables pueden ser cualquiera de los ocho tipos que mencionamos al inicio de esta lección. Por ejemplo, si estuviéramos codificando un sitio web con un formulario que pida a los usuarios su FirstName Almacenaríamos esos datos que nos dieron en una variable. Vamos a marcarlo como un ejemplo para entenderlo mejor. Bien, así que he seguido adelante y creé la carpeta llamada learn JS Voy a crear un nuevo archivo. Voy a llamarlo app.js. Sigamos adelante y hablemos diferentes partes de JavaScript y cómo funcionan. Entonces, como acabamos de hablar, las Variables son forma de almacenar datos dentro de JavaScript. Entonces, por ejemplo, si tuviéramos una forma de sitio web con un formulario que preguntara a los usuarios su nombre. Probablemente querríamos tener alguna forma de obtener esa información. Así que vamos a elaborar un archivo HTML rápido y vamos a crear ese formulario que podamos usar Bien, entonces en esta forma, va a ser un poco similar a otra forma con algunas diferencias clave Entonces voy a crear una entrada de tipo, texto número de texto. Y vamos a colocar eso como edad, va a tener que ser perfecto. Entonces esta es una forma realmente simple que solo tomará, que le pediremos al usuario su nombre, su apellido, su edad abierta. Deberías tener un botón de enviar. Entonces el tipo de entrada equivale a botón. Y sólo vamos a enfocar botón. Y diremos Enviar. Conectemos nuestro app.js a nuestro HTML, como hicimos antes con una etiqueta script. Y la fuente será dot slash app.js. Cierra eso, guarda eso, y deberíamos estar bien para irnos. Entonces si volvemos a local, localhost 50, 50, ya sabes, creo que es esto Tercero es, bien, tenemos, somos realmente, realmente básicos Forma Bien, entonces tenemos nuestro nombre o apellido o edad, y nuestro botón de enviar Así que queremos seguir adelante y llenar estos datos , ¿no? Digamos que quieres que un nuevo usuario venga a tu sitio y llene esta información. Um, dirás como John Brown y su edad 45, ¿verdad? Y él enviará esta información. Fresco. No obstante, no pasa nada cuando envías la información. La información no va a ningún lado. Lo que queremos hacer ahora es guardar esta información en una variable para que al menos podamos usarla. Entonces, si vamos e inspeccionamos aquí, checkout nuestra consola, una cosa que podemos hacer es que en realidad esta información sea enviada a una variable. Entonces cuando el usuario presiona enviar, podemos tener nuestro Formulario, enviar los datos a alguna parte. Lo que vamos a hacer aquí es crear una variable. Entonces hay dos tipos de variables. Hay variables constantes y hay variables que pueden cambiar, conocidas como variables let, variables constantes, una vez que le asignas un valor, el valor no puede cambiar. Que las variables, por otro lado, puedan cambiar. Entonces queremos decidir qué tipo de variable queremos usar para la situación. Personalmente, recomendaría usar una variable lead porque en realidad no conocemos el, el valor de la variable antes de que el usuario envíe sus datos Podemos hacer dejar usuario y solo tener que sea que la que ahora ha creado la variable user no se establece en nada. Todavía no significa nada, pero eventualmente podemos asignarle un valor. Es una buena práctica inicializar una variable con un valor, pero esto no es obligatorio Cuando no inicializa una variable con un valor, obtiene el valor predeterminado de undefined El tercer tipo de datos discutirá Todos los medios indefinidos es que aún no se ha definido en cuanto a lo que es. Por lo tanto, la variable aún no existe. Esto no quiere decir que tenga un valor de nada, sin embargo, ese es el tipo de datos de null Nulo e indefinido son dos tipos de datos muy similares, pero con diferencias sutiles, se puede asignar una variable al valor de null y seguirá existiendo Esto es como decirle a la computadora que tienes una caja en tu unidad de almacenamiento, pero sabes que está vacía. Si asigna esa misma variable al valor de undefined, ahora le está diciendo a su computadora que la caja en realidad no existe. Saber, intencionalmente no es nada mientras indefinido no existe. Si quisiéramos crear un valor constante de variable, podemos hacer usuario CONST y luego podemos darle, podríamos, bueno, llamemos a esto No puedes, tampoco puedes tener variables exactamente con el mismo nombre. Entonces podemos llamar a esta era constante. Y luego podríamos establecerlo un número específico o una cadena. Entonces podemos configurarlo a eso, o podemos establecerlo en 45, ¿verdad? Lo que sea, lo que sea que queramos establecerlo, usamos los iguales para asignar realmente a una variable un valor. Entonces, a diferencia de las matemáticas, somos como iguales a I1 más uno, es igual a dos No es un operador matemático en este sentido, realidad es una tarea. Un operador de asignación, hablará el signo igual. Hablaremos un poco más tarde sobre las otras formas en que podemos usar iguales para significar realmente esto es igual a eso. Pero por ahora lo que necesitamos saber es que el único signo igual singular es la asignación. Entonces la edad es de 45 años. Podemos pensarlo así. Como he puesto el valor aquí, es una buena idea inicializar una variable con un valor Así que en realidad podemos hacer que el usuario sea igual a estas comillas vacías. Comillas, o la forma de identificar una cadena. Si lo pones, let equals, let user equals comillas es simplemente decirle la computadora que esto probablemente va a ser un valor de cadena, um, más adelante en la línea, en realidad podemos mandar que es una cadena o es un número o lo que sea. Pero eso es algo que podemos hacer con TypeScript. Pero, ¿y si no inicializamos este valor, verdad? Como, y si solo lo tuviéramos así, ¿Qué valor crees que tendría? Hemos hablado de los diferentes tipos de datos, así que hay un número de cadena, pero probablemente no sería ninguno de esos si no le damos un tipo, bueno, si alguna vez no estás seguro de algo, simplemente podemos conectarlo bueno, si alguna vez no estás seguro de algo, simplemente podemos conectarlo en consola Entonces, si vamos a la consola dot log, el usuario verá que el usuario en realidad está indefinido. Y si recuerdas, indefinido significa que algo no existe. Nulo significa que es esencialmente cero porque no está definido. Yo, significa que aún no existe. Una vez que le asignemos un valor, entonces existirá. Por otro lado, si nos consola la antigüedad del registro, deberíamos obtener 45. Y eso es a lo que le hemos asignado. Otra cosa genial que podemos hacer es que podemos consolar registrar el tipo de una variable específica y de hecho nos dará el tipo. Entonces en este caso, el tipo de edad es un número porque es que le hemos asignado un número. También puedes, como ya hemos hablado antes, usar, podemos hablar, podemos asignar a una variable un valor de nulo, ¿verdad? Entonces CONST, nada. Podríamos ponerla en null y guardarla. Y entonces si fuéramos a Console.log nada, deberíamos conocernos. Como ve aquí, tenemos null en la consola. Entonces le hemos dicho específicamente a la computadora que es nula, no es nada, no está destinada a ser leída. Sin embargo, una cosa para recordar realmente, especialmente en informática y con Variables, es la ortografía. Con JavaScript, en realidad es posible tener dos tipos diferentes a diferentes variables de la misma ortografía. Así que en realidad podría hacer CONST, edad. Puedo hacer edad con minúsculas. Podría hacer la edad con mayúsculas. Y eso no me va a dar un error. Sin embargo, en el futuro, si alguna vez escribo mal dónde uso la edad, como si consola registro la edad en mayúsculas en lugar de la edad en minúscula, podría tener la edad podría tener Entonces, es una buena práctica no hacer esto y en realidad solo usar una forma de ortografía y mayúsculas para tus Variables Hablando de ortografía y mayúsculas en JavaScript, realidad usamos un método especial de capitalización llamado Camelcase es donde tienes la primera letra. La primera letra de la primera palabra es minúscula, y la primera letra cada palabra que sigue es Entonces CamelCase, es como un camello. Entonces, cuando necesites crear más de una variable, siempre puedes usar CamelCase o tal vez quieras ser un poco más descriptivo Entonces se podría decir CONST, apellido de usuario es igual a marrón. Y ahí tienes. Así es como escribirías eso con camel case, tu solo usuario es minúscula, last es mayúscula, y el nombre también está en mayúscula Bien, así que profundicemos un poco más para ver qué más podemos hacer con las variables, ¿verdad Entonces tenemos nuestro usuario LastName. Vamos a crear un usuario FirstName of John. Supongamos que esto es lo que el usuario ha ingresado en nuestro Formulario Y luego queremos que nos guste armar una oración, tal vez quiera saludar a nuestro usuario cuando haga clic en Enviar, queremos decir como hola John Brown Entonces, hay diferentes maneras en las que podemos hacer esto. Pero una cosa interesante que podemos hacer con las variables es en realidad concatenerlas Así podemos juntar diferentes variables para crear una oración o alguna otra cadena que sea significativa o útil para nosotros o para nuestros usuarios. Entonces usa concatenación, lo que simplemente harías, y dirías, probablemente guardaste esto en otra variable, Entonces se podría decir CONST, saludo. Y entonces tomarías no el nombre real de los usuarios, sino la variable que representa su nombre y los pondrías juntos en una oración. Entonces podríamos decir, hola. Y luego usamos el símbolo más para simbolizar básicamente lo que queremos que se sumen estas dos cosas. Ahora como en matemáticas, pero como conectado, usuario alto, usuario, FirstName y LastName Entonces incluso podría terminarlo con un signo de exclamación porque estamos emocionados de hablar con esta persona Y así tenemos nuestro saludo. Saludo equivale a hi más cualquiera que sea el nombre de usuario, más cualquiera que sea el apellido. ¿Y sabes qué? Para una buena práctica, permítanme poner un poco de espacio aquí solo para asegurarme de que esté formateado correctamente. Bien, sigamos adelante y saludo de registro de consola y veamos qué obtenemos. Ahí vamos. Hola John Brown, temario. Está muy emocionada. Vamos a llevarnos ese primero. Dice: Hola John Brown. Y así es básicamente como funciona la concatenación. Puedes tomar cadenas, puedes tomar variables y puedes conectarlas juntas para crear envíos que sean significativos para las personas u otro uso significativo es así. Otra cosa interesante que puedes hacer con las variables, específicamente con cadenas, es averiguar cuántas letras hay en ellas. Porque las cadenas son realmente solo un conjunto de letras, es la lista de letras. De hecho, también caen técnicamente bajo otro tipo de datos, que es una matriz, del que hablaremos un poco más tarde Pero uno de los métodos que está disponible o las características que obtienes como resultado del uso de matrices es que puedas decir cuánto tiempo duran. Entonces, si quería ver cuántas letras hay en el saludo de cadena, básicamente puedo hacer cría console.log y luego pondré un punto después de él para especificar que hay un método en esta variable al que quiero acceder. Dot básicamente es como una forma de meterse dentro de algo. Entonces si tengo como una caja y sé que ahí hay un tenedor. Podría presionar como Box dot fork para obtener el tenedor dentro de la caja hará saludo longitud de punto. Y porque la longitud es una propiedad que está en saludo, debería decirnos cuántos personajes hay en saludo. Así que sigamos adelante y consolemos registrar eso. 14. O sea, si lo calculas, es como el espacio HI J0 H BR OWN, y luego hay otro espacio Y el signo de exclamación final, eso son 14. Entonces nos dice exactamente cuánto tiempo es una cadena o una matriz. Así que es una propiedad realmente genial para acceder si alguna vez necesitas saber la longitud de algo, lo que será más útil a medida que trabajamos con conjuntos de datos cada vez más grandes 7. Matrices: Las matrices dicen que queremos almacenar varios nombres juntos para que podamos acceder a todos ellos más tarde. En este caso, usaríamos otro tipo de datos llamado array. Una matriz se crea encapsulando las piezas individuales de datos dentro de ella usando corchetes y usando comas para separar cada pieza de Puede tener cualquier número de elementos en una matriz, pero es una buena idea usarlos solo cuando tenga más de un dato para almacenar. Las matrices pueden incluso contener otras matrices. Pueden contener datos de cualquier tipo. Intentemos agregar una matriz a nuestra página. Bien, entonces otro dato interesante sobre los lenguajes de codificación y en general, es que la mayoría de los lenguajes de codificación realidad no empiezan a contar en uno Empiezan a contar a cero. Esto se llama indexación basada en cero, y es solo la forma en que hemos aprendido a contar Encontrarás muchos Idiomas hacer esto en JavaScript es uno de ellos. Tomará un poco acostumbrarse, pero estoy seguro de que puedes hacerlo. Bien, por lo que podemos usar la indexación basada en cero, sin embargo, para realmente ayudarnos a obtener el funcionamiento interno de diferentes piezas de datos, para realmente ayudarnos a obtener el funcionamiento interno de diferentes piezas de datos, como matrices y cadenas. Entonces, si tomamos este elemento de saludo aquí mismo, tomamos este saludo, la cadena de proyección. De hecho, podemos usar la indexación basada en cero para llegar a una letra específica en Lo que haremos es usar algo llamado notación de corchetes. Entonces hay dos tipos de nueva notación. Hay notación de corchetes y notación de puntos. De hecho, ya has usado la notación de puntos usando la propiedad greeting dot length. Básicamente lo que dice la notación de puntos es como, Oye, sé que tienes esta cosa y hay algo dentro de esa cosa. Hay como, si mi nombre es Zoe, la notación de puntos podría ser como, Oye, quiero que Zoe sea, Zoe es LastName o ya sabes, siempre es Estas son las cosas que podrías puntear notación sobre mí si yo fuera un objeto JavaScript. Pero en cuanto a lo que tenemos aquí, tenemos un saludo que es una cadena de letras, una oración. Y podríamos acceder en realidad a una sola letra dentro de esa frase si queremos que así sea. Esto puede ser realmente útil cuando se tiene tal vez una lista de datos, listas de nombres. Y solo quieres sacar el nombre o el apellido de esa lista o algo así Pero podemos practicarlo usando nuestra cadena de saludo. La notación de punto kiva a es que hay que saber el nombre de la propiedad Entonces, si estás buscando la edad de cualquiera que sea tu objeto, necesitas saber que la edad existe. De lo contrario volverá indefinido. Si digo saludo dot balloon, debería volver undefined porque no hay ninguna propiedad de globo en verde. Sin embargo, si hacemos notación de corchetes, podemos acceder a estos primeros caracteres o menos caracteres o cualquiera que sea el caso. Entonces traigo todo esto arriba con índice de base cero puede, porque vamos a poner dos corchetes junto a la palabra saludo Entonces dentro de esos corchetes, vamos a indicar a qué carácter queremos acceder. Y si es el primer personaje, no vamos a poner uno. Vamos a poner cero porque empezamos a contar a cero ya que volvemos a saludar pondremos cero y luego lo guardaremos. Y deberíamos conseguir una H. mayúscula Veamos qué obtenemos. Impresionante capital H. Así es como sabemos que está funcionando. Estamos recibiendo esa primera carta. Si hacemos uno va a conseguir el yo, si lo hacemos a va a conseguir, deberíamos conseguir ese espacio, que no se vería como nada. Pero en realidad es un poco, así que ahí hay poco espacio. Y entonces podemos hacer todo eso hasta el final. Ahora bien, si queremos obtener la última letra de la cadena de saludo, una cosa que podemos hacer es realmente acceder a la longitud, luego hacer la longitud menos uno. Entonces podríamos hacer saludo, podríamos hacer saludo, y luego podemos hacer dentro este paréntesis volveremos a hacer saludo, longitud de punto menos uno. Entonces, con la indexación basada en cero, siempre necesitas restar uno de cualquiera que sea el número de montos para acceder a ese último elemento, ¿ para acceder a ese último Entonces si tienes como 12344 piezas de elementos pobres y sabes que eres, eres, eres una cadena es para cuatro caracteres de largo En la longitud habrá cuatro, pero cuando cuentes, en realidad será 0123 Entonces, la razón por la que restamos uno es para acceder a ese último. Si restamos, si ponemos en for, realidad intentará acceder a algo que no existe Así que queremos asegurarnos de restar uno cuando estamos buscando el último elemento y una cadena, vamos a hacer saludo longitud punto menos uno Y ese va en realidad ese será el índice al que estamos buscando acceder. Entonces esto básicamente calculará en un número, el número correcto del índice. Entonces, si el saludo alguna vez cambia de longitud, tal vez John cambie su nombre por Stephen. Y ahora el saludo ya no es de 14 caracteres. Tal vez sean 17. En lugar de codificar duro 14 como este saludo, número de saludo o 13 Si ya hacemos los cálculos, solo podemos decir, oye, sea cual sea la longitud del degradado, no importa cuál sea el nombre de la persona, solo queremos obtener longitud y el último carácter no es un signo de exclamación Es un periodo, sea lo que sea. Si hacemos clic en Guardar, deberíamos, deberíamos obtener un signo de exclamación. Ahí vamos, justo aquí en la consola. Signo de exclamación. Bien, así que nos han introducido el concepto de Arrays Estas piezas, estos conjuntos de datos donde podemos mantener juntas múltiples variables, múltiples cadenas juntas, tal vez múltiples piezas de información juntas. Esto es increíble. Esta es una manera mucho más fácil de incorporar todos nuestros datos en una sola pieza. Entonces, lo que podemos hacer ahora es usar estas matrices a nuestro favor. Entonces en lugar de tener tenemos edad, hemos usado o nombre, usa tu apellido y saludo De hecho podemos sostener todo esto en una matriz Podemos decir CONST, usuario, primer usuario, primer usuario Y en lugar de tener todo esto por separado, podemos decir que el primer usuario es igual. O podemos decir, en vez de, bueno, vamos a deshacernos de este usuario aquí. Y podemos decir usuario CONST porque las matrices son en realidad mutables Entonces, cómo dijimos que no se puede mutar, mutar una constante. De hecho, puede cambiar las matrices independientemente de si se declaran con CONST constante o con lead Lo cual es algo realmente interesante de ellos. Entonces, si quisiéramos crear una cadena que represente a nuestro usuario, podríamos crear la matriz con nuestros corchetes y luego podemos decir que el usuario es el primer nombre del usuario. Haremos el apellido del usuario de la aplicación de los usuarios. Y luego vamos a hacer el usuario va a hacer la edad, es decir R. Ahora nuestro array de usuarios. Esa matriz debe tener toda la información sobre nuestro usuario. Entonces si console.log usuario, debería obtener toda esta información, sí, separados por comas Entonces tenemos a John Brown con 45. Entonces esto es realmente genial. Hay una manera para que mantengamos todos nuestros datos por ejemplo juntos, como organizar nuestros datos no tiene que estar por todas partes Es una manera mucho más fácil de armar las cosas. Entonces, como estábamos hablando antes, igual que con las cadenas, podemos acceder a diferentes números dentro de nuestra matriz, ¿verdad? Entonces digamos que teníamos un montón de usuarios diferentes, ¿verdad? Entonces digamos que teníamos user1 firstName, y teníamos, teníamos otro usuario, Entonces digamos que tuvimos, voy a cambiar esto para usar o una edad. Y voy a cambiar estos dos a usuario a Const, usuario a edad es igual a tres ¿Bien? Por lo que ahora tenemos dos usuarios. Tenemos usuario uno y usuario hasta el final. Este es un gran lugar para usar comentarios, así que solo podemos usar R1. Podemos ser realmente específicos cuanto a lo que estamos hablando y hacer que las cosas se vean un poco menos desordenado de usuario a genial a Entonces digamos que tenemos a estos dos usuarios escribir y decir que queríamos almacenar solo el FirstName de ambos usuarios Podríamos hacer nombres de usuario CONST es igual a user1 firstName, y user to first name, y user to first Esa sería una matriz que tuviera ambos nombres de pila. Lo cual es bastante genial. Eso lo tenemos para nosotros. Ahora digamos que queríamos acceder solo al primero, FirstName de esa matriz Así que los primeros usuarios FirstName, en realidad podríamos acceder a él usando notación de corchetes Entonces podríamos hacer console.log vía console.log it. Y podríamos decir usuario primer nombre corchete cero. Y eso debería darnos nombre de pila de nuestro primer usuario, que es John. Lo hemos hecho correctamente. Hemos obtenido el primer nombre de usuario. Entonces esta es una manera realmente útil como cuando a lo mejor queremos simplemente llamarlo la primera persona que ha llegado a la fiesta encogida al sitio Queremos decir, Hey John, y queremos darles la bienvenida. Primero. Podemos iterar a través ellos hasta llegar al final de la lista Porque esa es una característica realmente genial sobre Arrays. Vas a mantener todos estos datos juntos y acceder a ellos usando notación de corchetes. Pero digamos que no necesariamente conoces el índice de lo que buscas, ¿verdad? Di que sabes eso como, ya sabes, John tuvo la fiesta, pero no sabes si es el primero, el último, el del medio. Necesito encontrar el nombre. Bueno, en realidad hay otro método. Así que al igual que teníamos el método length, existe el método find que podemos usar en una matriz para encontrar una pieza particular de datos que estamos buscando, podemos tomar el nombre de usuario. Deberíamos usar nombres, nombres usuario, nombres. Y podemos llamar punto, bien. Y podemos ver aquí estamos con nuestra documentación. En realidad hay un poco de información sobre esto. Por lo tanto, es un método para que las matrices de cadenas encuentren una cadena en particular. Y luego básicamente te dice cómo escribirlo. Estos pueden ser un poco confusos, así que veamos si podemos buscarlo en MTN Así que volvamos a MTN y buscaremos encontrar. Bien, matriz punto prototipo punto, Fino, Fresco. Así que el método find devuelve el primer elemento en la matriz proporcionada. Ese lado de eso satisface la función de prueba que proporciona Si ningún valor satisface la función de prueba, se devuelve undefined Bastante simple. Así que tomamos lo que sea nuestro array array, ellos lo han guardado, la respuesta en una variable aquí, así que se encuentra, y luego simplemente lo llamamos en la matriz. Entonces matriz punto quiere array1 punto encontrar lo que sea el elemento es Si el elemento es mayor a diez. Y entonces deberían encontrar, deberían conseguir, supongo que obtiene el primero el primero que se encuentra. Eso es bastante genial. Entonces veamos si podemos encontrar así que tomamos lo que sea. Entonces básicamente esto, lo que está pasando aquí es que está tomando elemento por elemento. Está repasando la lista y tratando encontrar el primero que cumpla con los criterios. Entonces es tomar, está buscando un elemento. Si ese elemento es mayor a diez, guardará esa respuesta y la devolverá PARA decir, Oye, encontramos la respuesta. Entonces veamos si podemos hacer lo mismo. Haremos iguales de libras constantes y no tiene que ser encontrado en, ser a cualquier cosa que no sea nombres de usuario constantes, punto find Vamos a buscar un nombre Si el nombre es igual, igual a jot Como ya hemos hablado antes, hay dos tipos de ecualss, Ahí están los iguales simples, dobles iguales y los triples iguales. Esta es una situación en la que usaríamos los dobles iguales para decir, Oye, quiero que esto coincida con eso. Entonces si el nombre es igual a John, si el nombre es John, entonces quiero que lo encuentres y me lo devuelvas. Entonces, si encontramos console.log, deberíamos conseguir a John. Así que tenemos a John, pero ¿y si John no estuviera en la lista? ¿Y si fue Harry? Guardar eso va a quedar indefinido, al igual que la función dijo que haríamos. Ahora, ¿y si quisiéramos encontrar algo un poco más interesante? ¿Y si quisiéramos encontrar un nombre? Encuentra un nombre donde nombre, el nombre es mayor que, digamos cinco. Ambos se llaman John, deberíamos cambiar eso. Entonces cambiemos éste a Stephen, como mencionamos. Entonces, si la longitud del nombre es mayor que cinco, debería devolver el nombre. Entonces no debería devolver a John, debería regresar Steven. A ver. Impresionante. Así que recuperamos a Steven. Se puede ver como estos diferentes métodos empiezan a sumar y a trabajar juntos para crear lo que necesitamos encontrar Esto es lo básico de la informática. Estás empezando a trabajar con algoritmos que ya existen dentro de la computadora. Así que estás bien encaminado a aprender JavaScript de verdad. Y de nuevo, tal vez se esté preguntando cómo conozco todos estos diferentes tipos de datos y métodos. No es porque tenga el memorizar. Como puedes ver, literalmente solo buscamos en Google y buscamos todo lo que necesitamos que realmente no tenemos encima de nuestra cabeza. Entonces usé el método de longitud sin demasiada lucha. Eso es porque es algo que he usado un montón pero bien es algo que no he usado tanto. Entonces lo busqué para asegurarme de tener la correcta implementación de la misma. Y no solo estaba tratando implementarlo de la parte superior de mi cabeza y estaba haciendo lo incorrecto y obteniendo errores porque solo era un error tonto en mi implementación. Antes de terminar hablando de matrices, vamos a repasar algunos más de este tipo esencial de métodos que podríamos querer usar. Un mapa de codificación más básicamente itera sobre a, una matriz y devuelve los resultados incluyendo esa iteración Así que por lo general está destinado a hacer algo a la matriz. Entonces si lo uso nombres mapa de puntos, quiero tomar el nombre y quiero concatenar el nombre, tal vez nombre más sol los llamará Johnson y Stevenson Y quiero que devuelva el mapa. Entonces cambiemos esto a mapeado. En teoría, debería conseguir a Johnson y Stevenson cuando los mapeé Entonces vamos a ver. Ahora tenemos una matriz con Johnson y Stevenson. Por lo tanto, puede IMAP sobre elementos individuales en la matriz y realizar cambios Entonces, usando mapa, siguiente, hablemos de para cada uno, para cada uno es realmente similar al mapa, excepto por una diferencia clave. En realidad no lo hace, no devuelve nada. Entonces, cómo pudimos guardar el mapa en una función, en una variable y un registro de consola que realidad no devolvemos nada con para cada uno. Entonces está destinado a cambiar como la cosa real en sí. Entonces, si quería cambiar John's FirstName, o si quiero que tal vez cree una nueva matriz, tal vez creé una matriz vacía Entonces conc, matriz vacía. Y no tenía nada en ella. Como recuerdas dije antes que las matrices son mutables. Eso significa que puedes agregarles y quitarles cosas incluso después de que hayan sido creadas con una constante. Entonces di que quería agregar cosas, agregar nombres a esta matriz vacía. Entonces tal vez tomé los nombres de usuario y yo en vez de matemáticas yo para cada uno, hice un para cada uno. Entonces para cada nombre, no lo guardaré en una variable esta vez solo lo usaremos tal como es. Vamos a, para cada nombre, vamos a usar un método llamado push. Vamos a tomar nuestra matriz vacía y vamos a empujar, vamos a empujar el nombre. Entonces eso significa que literalmente solo estamos tomando ese nombre. Lo estamos empujando a la matriz. Entonces debería haber un Johnson o debería haber en John y un Steven en nuestra matriz vacía. Vamos a configurarlo y vamos a console.log vaciar la matriz. De hecho, vamos a console.log matriz vacía dos veces. Eso es console.log antes y después. Entonces deberíamos ver solo corchetes vacíos, corchetes y luego deberíamos ver a John y Stephen. Perfecto exactamente lo que conseguimos. Los corchetes vacíos y la ictericia aun así sabemos que en realidad se está llamando en realidad está funcionando Genial. Echemos un vistazo a otro método. Rebanada. Bien, así que cuando estás trabajando con slice, básicamente puedes decidir con qué sección de la matriz te gustaría trabajar Esto es realmente interesante de hacer cuando en realidad estás trabajando con nombres, por ejemplo. Entonces si tomé Const, en rodajas, si estoy creando una variable llamada slice, y tomé User Two's FirstName Y luego le hice una porción. Donde empecé a tal vez en la segunda letra y terminé en la cuarta letra, debería conseguir una porción del nombre de Stevens Y si consola dot log en rodajas me sale propina, que es la mitad del nombre de Stevens entre los caracteres buscados para Así es como lo harías, cortarías como. Eso es todo para mí. Eso es lo que la mejor manera de usar slice es en una cadena o algo así donde solo necesito un subconjunto de la misma. Bien, el siguiente método que vamos a pagar es empalme Splice es muy similar a Splice, pero en realidad cambia la matriz en sí. Entonces llamo empalme en una matriz. Me traerá de vuelta una nueva matriz. Será, va a cambiar esa matriz desde el principio, empalmarlo un poco diferente a slice va a tomar, vamos a hacer en realidad vamos a llamar splice en los nombres de usuario. Entonces lo que vamos a hacer es que lo vamos a poner con un número de inicio. Entonces empezaremos tal vez en el índice uno, que es usuario a nombres de pila. Entonces vamos a, vamos a eliminar uno. Vamos a eliminar el nombre del juez Stevens, y luego vamos a agregar un nombre nuevo y vamos a agregar a nombre de Harry Así que vamos a guardar eso y luego vamos a console.log nombre de usuario. Lo siento. Entonces, lo que eso debería haber hecho es tomar esto, modificarlo y devolverlo como una matriz mutada. A ver si lo hizo. Impresionante. Entonces ahora tenemos 0 y vamos a deshacernos de este console.log. Impresionante. Entonces ahora tenemos a John y Harriet en lugar de a John y Steven Entonces así es como nosotros habíamos empalmado básicamente el empalmar algo y poner algo nuevo ahí Pero no tienes que poner algo nuevo y realmente puedes sacarlo y dejarlo arriba. Bien, entonces el siguiente que vamos a echar un vistazo es el turno Shift es otro método que también muta una matriz. Cuando llamas a shift en una matriz, en realidad elimina el primer elemento. Ahora puedes guardar ese primer elemento o puedes devolver la matriz mutada. La elección es suya. Echemos un vistazo a cómo usaríamos esto en nuestra matriz de nombres de usuario. Podríamos llamar a un usuario a los nombres de los nombres punto shift. Y no necesitamos pasar ningún parámetro. Sólo lo llamaremos así. Entonces, si nos consola usuario, usuario punto primer nombre, deberíamos simplemente obtener quién debería simplemente obtener el nombre de Stevens? Entonces si, solo hay filtracion. Pero si console.log esto, realmente deberíamos simplemente obtener el, obtener el nombre de John. John, ahí vamos. Entonces depende depende de qué cosa estés tratando de conseguir. ¿Estás tratando de obtener el primer nombre? Estamos tratando de obtener toda la lista sin el para el primer elemento, o estás tratando de obtener la lista completa sin el primer elemento. Cuál de estas dos formas accederás a estos datos, pero la elección es tuya otra vez, la última para la que vamos a pagar hoy es unshift Entonces, como mencionamos, unshift agrega elementos al comienzo de una matriz Entonces digamos que tenemos tu nombre, pero lo que agrega un nuevo nombre al frente de la matriz. Haremos nombres de usuario, punto unshift. Y vamos a añadir en Harry, el nombre de Harry ahí mismo. Si console.log usuario firstName, nuevo, deberíamos obtener la matriz con el nuevo nombre en él. Y ahí vamos, Harry, John y Steven. Y ahí lo tenemos. Esos son varios de los métodos esenciales que puedes usar en matrices que estoy seguro que te resultarán útiles a medida que avanzas en tu viaje de JavaScript. 8. Funciones: Funciones, quiero hasta ahora, hemos estado haciendo todo manera bastante manual. Quiero decir, claro. La computadora está haciendo la mayor parte del trabajo, pero hay una manera de facilitarnos aún más las cosas, en lugar de repetirnos una y otra vez cuando estamos organizando nuestros datos o pidiendo datos a la computadora, podemos usar algo llamado función. Una función es una pieza de código reutilizable que nos permite acceder a la misma lógica y otra vez sin reescribirla También se pueden nombrar funciones para que podamos acceder a ellas en cualquier lugar de nuestro archivo o nuestro programa. Vamos a refactorizar nuestro código para hacer algunas funciones básicas que nos faciliten la vida Bien, así que lo siguiente de lo que vamos a querer hablar son las funciones Acabo de mencionar antes. Las funciones nos permiten dejar de hacer todo manualmente y realmente aprovechar el hecho de que estamos haciendo programación informática. Y podemos permitir que la computadora haga mucho de este trabajo por nosotros. Entonces echemos un vistazo a cómo escribiríamos una función. Entonces en nuestro archivo app.js, la forma en que realmente empezaríamos a escribir una función, hay dos formas, pero la forma más común de hacerlo ahora es usar una Const, tal como vimos antes, para inicializar el nombre de la Entonces, si íbamos a nombrar una función, vamos a llamarla, por ejemplo, mi función. Y entonces en vez de hacerlo igual y poner aquí solo el valor, en realidad pondríamos iguales y luego los paréntesis y otro igual y una flecha Esto en realidad se llama sintaxis de función de flecha. Y es un tipo particular de forma de escribir funciones, pero es una de las más sucintas Entonces es, se ha adoptado muy comúnmente. Después de nuestra flecha. Después de nuestra flecha, en realidad usamos las llaves y eso es todo. Así es como escribes formato básico para una función. Pero, ¿qué es una función hacer? Se necesita una pieza de lógica y básicamente la implementa para nosotros. Entonces en mi función, podríamos darle algo realmente sencillo hacer, como console.log. Y luego como vimos antes, Hola Mundo. Entonces cada vez que se llama a esta función , será console.log. Se registrará en la consola HelloWorld. Pero, ¿cómo conseguimos que esto funcione? Bueno, cuando tienes una función, no puedes simplemente como escribir la función y luego esperar que se llame, se espera que se ejecute. De hecho hay que llamarlo. Entonces llamar a una función es realmente sencillo. Todo lo que haces es escribir el nombre de la función como nos has visto hacer antes, y poner los paréntesis detrás de ella Y una vez que lo guardes, llamará a la función. Entonces, si saltamos a nuestro navegador y revisamos la consola, veremos que dijo helloworld una vez más Es genial trabajar con las funciones. Puedes imaginar el nivel de complejidad que puedes poner dentro estas funciones y hacer que las llamen una y otra vez por cualquier número de problemas. Así que hay algo realmente genial con lo que trabajar. Otra cosa que quieres tener en cuenta es que las funciones pueden tomar argumentos tal como mencioné antes, el registro de puntos de la consola es un tipo de función. Helloworld es en realidad un argumento que es tomado por console.log Así que solo en nuestra función aquí, en realidad podríamos cambiar esto un poco. Podríamos dar, podríamos hacer esto. Podemos hacer de esta una función que realmente imprima en la consola. Podemos crear nuestro propio console.log si quieres que lo haga. Entonces digamos que llamamos a esto nuestro propio registro de consola. Bien, y esto es solo para la práctica. En realidad no harías esto en la vida real, pero dirías que le das tu propio registro de consola y luego nombrarías un tipo de parámetro. Puedes hacer esto realmente simplemente llámalo R1, R1 o R2, dependiendo de cuántos argumentos tengas. Pero realmente podrías nombrarlo como quieras. Entonces solo podrías decir valor. Y luego en lugar de poner en la consola hardcoding, hardcode, hard-coding en el registro de la consola De hecho, podemos simplemente pasar el prop de valor y usarlo en su lugar. Entonces ahora lo que sea que escribí como parámetro en nuestra propia función de registro de consola, cuando la llame, lo imprimirá en la consola Si yo dijera, Hola a todos. En lugar de hola mundo, cuando vuelva a la consola, realidad se imprimirá Hola a todos en lugar de HelloWorld o value Todos los tipos de funciones pueden tomar parámetros siempre y cuando se les haya dado esa capacidad y algo que ver con ese parámetro, que es otra parte realmente impresionante de las funciones, ¿verdad? Podemos usar esto de varias maneras. También podemos devolver un valor de una función y luego guardar ese valor en una variable. Esa variable puede entonces ser utilizada igual que cualquier otra. Esta es una forma realmente útil de obtener datos. Si tu función no tiene una sentencia return, devolverá undefined. Puede usar este tipo de funciones para actualizar una variable fuera de sí misma sin necesidad de que la función devuelva los datos directamente. También podemos devolver un valor de una función y luego simplemente guardar ese valor en una nueva variable. Entonces, por ejemplo, si tuviéramos, digamos, queríamos obtener la suma de un montón de números, ¿verdad? Entonces, ¿qué tal si hacemos CONST, suma igual. Y luego algunos tomarán, y tomarán tres argumentos. Tomará R1, Argh Tomará uno entumecido porque vamos a tomar números Estoy en su mejor momento para ser descriptivo cuando estás haciendo parámetros, solo ver a las personas que regresan y usan tu función, saber lo que significaste para que se pongan en ella. Entonces haremos un m1, m2 y m3. Y entonces algunos en realidad solo devolverán num1 más num2 más el número tres Entonces eso es todo. Sólo se necesitan tres números y algunos de ellos en conjunto. Pero lo que podemos hacer en realidad, en lugar de simplemente llamar a esta función, podemos conceptos. Podemos crear a, podemos crear una variable llamada result, y luego podemos guardar los resultados de esta función en esa variable results. Entonces podemos hacer algunos de los números 12.3. Y luego si la consola registramos la respuesta que nos consolemos el resultado del registro, debería sumar hasta seis. Entonces echemos un vistazo. Si ve aquí mismo, ha sumado hasta seis y tenemos seis o en seis es la suma de nuestra función aquí mismo. Entonces esta, esta también es una forma realmente útil si solo eres como llamar a algo y quieres guardar ese resultado y luego tal vez usarlo en otro lugar. Esta es una gran manera de tener eso también. A veces es posible que solo quieras saber si una función está funcionando o no. No necesariamente necesitas devuelva un valor en particular de él. En este caso, usaríamos otro tipo de datos llamado Booleano. booleanos son un tipo de datos especial que sólo puede tener uno de dos valores, Estas palabras no están escritas entre comillas y simplemente están destinadas a ser utilizadas como indicadores si algo tuvo éxito o no. Por ejemplo, si quieres saber si tu función se ejecutó o no según lo previsto, puedes devolver true en el caso de que funcionó y false en el caso de que no lo hiciera. A veces, sin embargo, solo quieres saber si una función está funcionando o no. A lo mejor solo quieres saber si un aspecto particular de tu app está funcionando o no y quieres que esta función se ejecute si está funcionando, o quieres que esta función devuelva true si está funcionando o devuelve false si no lo es. Aquí es donde nos meteremos en esos booleanos. Usemos las declaraciones if para ayudarnos a averiguar si alguien está o no en edad de conducir. Entonces, consigamos una lista de edades. Consigamos una variedad de edades. Y vamos a hacer, a ver, 12 por 2,557.70. Y así queremos obtener el número devuelto de edades que son, de, que son mayores de 16, ¿verdad? Um, así que realmente podemos crear una función con el fin de filtrar esto por nosotros, ¿verdad? Entonces hagamos costo de la edad de manejo. Eso es lo que llamaremos nuestra función. Y básicamente lo haremos. Ahora escribiremos nuestra declaración if. La estructura de la declaración if va así. Escribes si, entonces estas son tus condiciones. Entonces si el, veamos, tomará en una edad, si la edad es mayor de 16, 16. Queremos que la función vuelva verdadera. De lo contrario queremos que la función devuelva false, ¿verdad? Si guardamos resultado. Si guardamos resultado en una variable que llamamos de edad de manejo con edades. Y vamos a usar el primero o el número y el índice uno y luego vamos a console.log resultado. A ver. Veamos qué obtenemos. Entonces, si la edad es mayor de 16, devuelve true, de lo contrario devuelve false. Falso. Entonces eso es correcto porque la edad, el índice de agente uno en realidad es cuatro, lo que no está por encima de 16. Pero si lo cambiamos a índice de cuatro, por ejemplo, volverá cierto porque esa es una nota, entonces esa es la edad de 70 años. Entonces esta es otra forma realmente interesante en la que podemos usar esto y probablemente podríamos implementarlo en algún tipo de verificación de controladores, ¿verdad? Entonces, en lugar de que tomemos una variedad de edades, podríamos determinar que la edad puede ser de un sitio web donde se pregunta a la gente si hay o no en edad de conducir, si eres como preguntar si alguien quiere comprar un auto. Así que revisa para ver si hay edad de manejo. También puedes usar algo como esto en aplicaciones prácticas. Operadores ternarios, hay formas más concisas de escribir declaraciones if else usando algo llamado operador ternario. Un operador ternario es solo una notación abreviada para ello. Si else declaraciones que pueden condensarlo en una sola línea de código Echemos un vistazo a cómo podría ser un ejemplo de esto. Cómo escribirías esto es que solo dices que solo darías tu valor. Entonces dirías esto. Entonces, de las edades de manejo, la edad para las edades para tu dirías. E incluso podríamos pasar un número para ser honestos, si lo pasamos como 25. Y entonces diríamos si esto es cierto, si esto es cierto, queremos que vuelva verdad. De lo contrario queremos que devuelva falso. Y así es como escribiríamos eso, cómo funciona esto es la primera pieza es nuestra condición. Sea cual sea la comparación que intentemos hacer o la situación que estamos tratando de determinar. El primero y luego vamos a preguntar, ¿es esto cierto? Entonces, ¿es lo que dijimos aquí, es verdad? Si es cierto, entonces en realidad sacará a colación este primer valor, ¿verdad? Si es cierto, este será el resultado o esos dos puntos aquí, volverá Falso, es falso. Si es cierto, devolverá esta primera Condición o false, será el resultado, como ya hemos comentado, como ya hemos comentado a diferencia de las matemáticas, igual es el operador de asignación, no el operador de igualdad. El operador de igualdad es bastante similar. Es sólo una versión duplicada, dos signos iguales. Se puede utilizar el operador de igualdad para determinar si una cosa es igual o no a otra. El resultado de una comparación usando el operador igualdad siempre devolverá un booleano, ya sea true si la comparación es válida o false si no lo es Echemos un vistazo a un par de ejemplos de esto. Nosotros console.log. Uno es igual a uno. Veremos que básicamente volverá verdad. Pero entonces si hicimos uno es igual a dos, debería ser falso como esperábamos. Esto es porque uno no necesariamente, bueno, esto es porque 1.2 son números diferentes, ¿verdad? Pero 1.1 son lo mismo. Pero cuando hacemos uno es igual, igual a uno la cadena, pensaríamos que devolverá false, pero en realidad devuelve true. Ahora ese último es interesante. ¿Por qué el número uno coincidió con la cadena uno? Eso es porque el operador doble iguala igualdad no es lo que llamarías estricto. Permitirá que los fragmentos de datos que se puedan convertir entre sí devuelvan verdaderos. No obstante, si quisieras estar seguro de que solo los datos del mismo tipo devuelven verdaderos, podrías usar a su hermano mayor, el operador de igualdad estricta, tres signos iguales. Vamos a probarlo. Ahora bien, si quisiéramos comparar si el número uno era realmente igual o no a la cadena uno. Queremos estar seguros, como conocer los números de la cadena. Usaríamos tres signos iguales, la estricta igualdad. Y vemos aquí que cuando corremos eso en realidad nos está dando el resultado de false porque uno, el número no es igual a la cadena, pero tenemos que usar la estricta igualdad, Ese es el triple signo igual para poder obtener ese resultado, hay muchos tipos diferentes de operadores y JavaScript. Veamos a través de algunos más de ellos y veamos cómo funcionan. Exclamation equals es un operador de comparación que se utiliza para probar si dos valores no son Compara dos valores y devuelve true si no son iguales y false si son iguales. Esto se usa para probar si un valor es menor o igual que otro valor. Devuelve true si el primer valor es menor o igual que el segundo valor y false si el primer valor es mayor que el segundo valor. Al igual que en matemáticas, también puedes usar solo el, el menos que el diseño para comparar si el primer valor es o no menor que el segundo valor sin el signo igual mayor que N igual. Esto se utiliza para probar si un valor es mayor o igual que otro valor. Devuelve true si el primer valor es mayor o igual que el segundo valor y false si el primer valor es menor que el segundo valor. Nuevamente, al igual que en matemáticas, solo usas el símbolo mayor que para comparar si el primer valor es mayor que el segundo omitiendo el signo igual doble final Este es el operador lógico AND. Se utiliza para probar si dos condiciones son verdaderas y devuelve true si ambas condiciones son verdaderas y falsas. Si alguna de las condiciones es falsa, se trata de un operador OR lógico. Se utiliza para probar si al menos una de las dos condiciones es verdadera y devuelve true si al menos una de las condiciones es verdadera y falsa si ambas condiciones son falsas. For-bucles. For-loop es un tipo de declaración de flujo de control, muy parecido a una sentencia if else La diferencia con los bucles for, sin embargo, es que, como su nombre lo indica, circularán como su nombre lo indica, circularán y otra vez hasta que se alcance una condición específica durante un cierto período de tiempo La sintaxis básica para un bucle for es para la condición de inicialización y luego el incremento o decremento, y luego cualquier código que desee ejecutar Probaremos estos y veamos cómo se usan en la práctica. Como hemos mencionado, el for-loop es un tipo de sentencia de flujo de control, ¿verdad? Así que básicamente nos permite iterar sobre algo para un cierto número de iteraciones hasta que alcanza el número dado Entonces, cómo escribiríamos esto es que escribimos cuatro. Diríamos por cualquier número que inicializaría. Hay un inicializador como for, digamos que yo es igual a cero Ejecutaríamos esto, esto, esto, este for-loop hasta que iguale a un número dado Entonces digamos que lo ejecutaríamos hasta que yo sea mayor que diez o menor que diez. ejecutaríamos hasta, hasta que llegue a esa condición se ejecutará este bucle. Y luego cada vez que ejecutamos el bucle, cada, encendido, cada iteración del bucle, realmente vamos a agregarle uno para que realmente lleguemos al final de nuestro ciclo Si no tuviéramos esta iteración real, simplemente se ejecutaría para siempre y eso terminaría, eso resultaría en un bucle infinito Entonces por cada vez que corra, vamos a hacer I plus plus, que básicamente es decir que voy a ser yo más sí mismo, yo más yo más uno. Entonces, sea lo que sea que sea en ese momento, agréguele uno. Y así como ejecutamos esta función, entonces sólo vamos a la consola de registro lo que sea que sea. Así que vamos a la consola de registro I y luego veremos cuántas veces me sale. Yo aparezco. Creo que esto debería ser en realidad sí, yo menos de diez. Así que mientras yo sea menos de diez lo ejecutaré. Y luego una vez que tenga diez o más que, entonces dejará de correr. Una vez que veamos eso, es, una vez que veamos que ya veremos que está corrido y nos dan los números del cero al nueve. Bien, increíble. Bucles while. Ahora que ya tienes la caída de for-loops, hablemos de while loops Estos son realmente similares a los bucles for en el sentido de que continúan dando vueltas una y otra vez hasta que se cumple una condición específica Donde difieren, sin embargo, es que solo tienen la condición, por lo que ejecutan mientras esa condición es cierta. Mientras que los bucles son un poco difíciles porque en algún momento hay que estar seguro de que esa condición será falsa. De lo contrario, resultarán en lo que se llama un bucle infinito, lo cual no es algo bueno. Esto puede chocar tu navegador porque tu código nunca dejará de ejecutarse. Alcance. Uno de los temas más importantes para entender y JavaScript ahora que empezamos a hablar de Funciones es el alcance. Y no estoy hablando del enjuague bucal. El alcance se refiere a cuán accesibles son visibles, varias variables, funciones y otros datos están en su código durante el tiempo de ejecución. Hay dos tipos de alcance en JavaScript, global y local. El alcance global es cualquier variable, función u objeto que esté bien fuera de una función y se pueda acceder por cualquier código del programa. El alcance local, por otro lado, es cualquier variable, función u objeto que se haya definido dentro de una función y por lo tanto solo sea accesible dentro de los confines de esa función Echemos un vistazo a cómo funciona esto en la práctica. Para mostrar básicamente cómo funciona esto, vamos a crear uno que diga VAR global, variable global. Estoy para decir que soy un Global. Y luego tendremos una que creará una función y luego anidaremos una variable local dentro de ella. Entonces, para darle una idea de cómo se ve realmente esto en la práctica. Entonces crearemos una variable llamada bar local, y dirá que soy local. Y a partir de ese punto regresará , solo devolverá la función. Así que cuando intentamos Console.log VAR local, si intentamos consolar el registro fuera de la función, como haremos aquí, registro de la consola leucovorin verá que en realidad no somos capaces de acceder a él Dice área de referencia, bar local no está definido. Y eso es porque la consola no puede verlo, ¿verdad? El resto del código no sabe que locales existen porque está atrapado dentro de esa función. Sin embargo, si intentamos registrarlo dentro de la función, notarás que simplemente se iluminó un poco como lo hicimos que en realidad, en realidad agregará una vez que llamemos a la función, por supuesto, en realidad consolar el registro local de Barnes Dice que soy local. Eso es porque esta variable está básicamente atrapada dentro de la propia función. Pero verás que si hacemos esto con la variable global, independientemente, si la registramos en consola fuera de la, fuera de la función, o registramos la consola dentro de la función porque es una variable global, es accesible en ambos lugares. 9. Objetos: Objetos. Un objeto es una colección de pares de valores clave que pueden representar un objeto del mundo real o una estructura de datos compleja Los objetos son uno de los bloques de construcción fundamentales de JavaScript. De hecho, abarcan la mayoría de los otros tipos de datos, desde estructuras de datos simples como matrices hasta cadenas y otras más complejas como clases, funciones e incluso otros objetos. Un objeto se puede crear usando la notación literal del objeto, que usa llaves Las claves en un objeto son siempre cadenas, pero los valores pueden ser de cualquier tipo de datos, incluyendo otros Objetos Escribamos algunos objetos para ver un ejemplo de cómo funciona todo esto. Así que los objetos son una de las mejores partes de JavaScript. Básicamente todo lo que soy JavaScript está construido sobre estos objetos. Y al igual que en la vida real, los objetos pueden ser cualquier cosa. Echemos un vistazo a cómo escribimos realmente nuestros objetos. Entonces, si quieres seguir adelante y crear nuestra primera constante de objeto, mi objeto, y escribes el nombre del mismo igual que escribirías el nombre de una variable. Pero en cambio, pones un signo igual y luego pones esos tirantes giratorios. Y así es como sabes que es un objeto. Entonces dentro de un objeto, he dicho que puedes poner prácticamente cualquier cosa. Pero la forma en que estructuramos nuestros datos dentro de los objetos es que tenemos una clave, que es básicamente el identificador, y luego un valor que corresponde a esa clave, que es básicamente el valor de la misma. Esto se conoce como un par de valores clave. Trabajan en pares debido a que la clave es el identificador y el valor es el valor real. Podemos acceder al valor de la clave accediendo a la clave. Entonces la forma de hacer esto sería, recuerden que antes hablamos de notación de puntos. Podemos utilizar la notación de puntos para acceder al valor de la clave. Entonces la forma en que hacemos esto en realidad es para consola registrar mi objeto con clave de punto, y luego podríamos acceder a cualquiera que sea el valor que sea. Así que la consola registra mi clave de punto de objeto y luego los resultados deben ser de valor. Entonces así es como accedes a valores en objetos dentro de JavaScript, sea que puedas hacer. Y luego, si la consola registra el objeto en sí, en realidad le dará todo, la clave y el valor dentro de esas llaves Sin embargo, puedes hacer algo más que objetos de valor clave realmente simples. Los objetos en realidad pueden contener otros objetos, como dijimos, pueden contener matrices, contiene cadenas. Pueden contener datos básicos de cualquier tipo. La clave puede ser cualquier cosa. No tiene que ser la palabra clave. Podría ser como Apple, podría ser cualquier palabra en absoluto. Así que también puedes, como dije, tenía objetos dentro de los objetos. Y realmente, ese objeto puede ser tu casa. Puedes hacer cualquier cosa que puedas decir casa y podrías hablar de tal vez los diferentes electrodomésticos que tienes eso en tu casa, en tu cocina, tal vez tener una estufa y un microondas y no sé, como no un horno. Puedes tener estufa microondas y tal vez tener tu estufa, tu microondas y estás enfermo, ¿verdad? Esa es una lista. Esa es tu casa, esa es una habitación en tu casa, la cocina. Y entonces esa es una lista de los electrodomésticos en la cocina, ¿verdad? O listas de los objetos en fregadero de la cocina siempre que sea un electrodoméstico. Pero tomemos esta idea y vayamos un poco más allá. Vamos a crear un objeto llamado mi casa. Y empecemos a llenarlo y a ver cómo podemos tener lejos realmente podemos ir con estos objetos. Así que sigamos adelante y demos mi casa y dirección. A lo mejor vivimos, sumamos uno a tres calle principal. Y luego sigamos adelante y le demos una ciudad. A lo mejor vivimos en Nueva York. Entonces sigamos adelante y se lo daremos. ¿Qué más debemos darle? Vamos a darle algunas habitaciones, tal vez un cierto número de habitaciones. Vivimos en Nueva York, tal vez sólo unas tres habitaciones. Es una casa muy pequeña en la que vivimos. Entonces también vamos a darle, vamos a darle algunos electrodomésticos. Escribe este otoño sobre esta tendencia. Vamos a darle una lista de, una lista de electrodomésticos. Entonces tenemos, vamos a ver qué otros. Así que de nuevo, tenemos un microondas. ¿Qué más? Tenemos una estufa, tenemos un microondas, y tenemos lavavajillas esta vez cambio abajo de la misma. Genial. Veamos qué más podría hacer. Hagamos ocupantes, hagamos menos del número de ocupantes que tenemos en nuestros Así que sigamos adelante y enumeremos. Pero usemos una lista de objetos. Entonces, en lugar de usar solo un objeto singular, hagamos una lista de objetos. Así que vamos a crear el primero. Tendrá, dale un nombre. Vamos a decir mamá, va a ser digamos que van a ser 29 de nuevo. Y vamos a darle la ocupación de, Vamos a por este panadero y maestro. Y así ahí vamos. Tenemos al ocupante. nombre del primer ocupante es mamá, de 29 años, y la ocupación del ocupante es maestra Impresionante. Entonces como decía, no podemos simplemente como si vamos a tener más de un ocupante, necesitamos tenerlo en formato de lista Entonces, sigamos adelante y pongamos dentro de esos corchetes, lo que indica que es una lista o una matriz. Y luego vamos a crear nuestro segundo ocupante. Entonces sigamos adelante y rellenemos esto, hará que le nombre papá, 35 años, ingeniero de software. Y vamos a pasar por eso muy rápido. Entonces ya podemos seguir adelante y acceder a las propiedades de este objeto, ¿verdad? Podemos acceder a las propiedades anidadas. Podemos consolar el registro de su casa, mi casa, y luego podemos consolar el registro del ocupante Y como ves, realidad lo pre lo llena en realidad lo pre lo llena aquí mismo, lo cual es bastante genial. Esa es una característica de JavaScript bastante genial. Función Vs Code, debería decir, donde una vez que tienes un objeto, se autos. Es como un intellisense, creo, pero te dice qué propiedades existen en esos Objetos. Bastante genial. Por lo que solo se puede acceder a bienes inmuebles. Entonces iremos a los ocupantes y luego dentro de los ocupantes porque es una lista, recuerda que somos listas, no podemos simplemente como la notación de puntos en una Tenemos que usar índices. Vamos a tomar el ocupante en el primer índice accederá al papá, y luego vamos a nombrar a los papás Entonces iremos al primer índice y luego accederemos a la ocupación. Y oh, aquí hay un error interesante, tenemos que hacer referencia aquí. Eso es porque JavaScript es un poco diferente de TypeScript, que funcionará en y en una lección posterior Pero JavaScript no necesariamente llama a un error cuando algo es del tipo incorrecto del horno o un valor incorrecto dentro del propio código, lo llamará una vez que hayas intentado ejecutar ese código, no es ideal para aplicaciones más grandes porque entonces solo obtendrás muchos errores cuando estés escribiendo el código y no sabrás de dónde vinieron. Pero si captas el error antes de ejecutar el código, cuando solo intentas guardarlo, es, creo que es mucho más útil. Entonces aquí mismo, la razón por la que obtuvimos ese error es porque en matriz los valores uno y el valor dos no son reales. No son llaves y en realidad no son cuerdas. Entonces son como que no hay, no hay valor de nombre de variable uno o dos mientras lo escribes así. Así que solo tenemos que hacer es convertirlos en cadenas. Una vez que los hemos convertido en cadenas, todo lo que tenemos que hacer es ejecutarlo de nuevo. Y como pueden ver aquí, pudimos acceder a la ocupación de nuestros papás Entonces mi casa u ocupantes accediendo al ocupante en la ocupación del índice número uno, ingeniero de software, Eso son nuestros Ocupaciones, funciona bastante bien como te imaginas lo útil que esto podría ser en un escenario donde realmente te gusta tal vez tener un objeto de usuario, como tal vez estás construyendo como un tipo de sitio web de Facebook y tienes un usuario y ellos tienen una dirección de correo electrónico , tienen una contraseña , tienen amigos, tienen fotos, tienen todas estas diferentes piezas datos que están asociados con ellos. Usted, es posible que desee almacenarlos en un objeto y al igual que nombrar el objeto o darle al objeto como un ID de usuario, podría darles un ID dentro del objeto y básicamente almacenar todos estos datos complejos dentro de este conjunto de datos más grande y mantenerlo uniforme entre sus usuarios. Para que si tuvieras un sitio con como 500 usuarios, levantaste su página de perfil, puedas acceder a los datos de manera uniforme. Eso es otra gran cosa de los objetos. Permite acceder a los datos de una manera muy, muy uniforme. Y no necesariamente tienes que preocuparte por si un dato no existe, entonces puedes hacer que devuelva un valor específico. Pero nueve de cada diez veces como asumiendo que los datos existen, entonces solo devolverá ese valor y estarás listo para ir 10. Forma básica: Bien, así que ahora que hemos terminado aprender todo sobre JavaScript, pongámoslo en práctica usando algunos de los elementos que hemos creado antes primero es lo primero, vamos a tomar esta pequeña forma que hemos creado aquí, y de hecho la vamos a usar para dar nuestra respuesta a nuestros usuarios cuando envíen su información en nuestro archivo HTML índice , como ya hemos hablado antes. ¿No sería genial si cuando nuestros usuarios sigan adelante y envíen su nombre, su apellido y su edad A lo mejor les dieron algún tipo de saludo personalizado, ¿verdad? Entonces en lugar de alto usuario o simplemente alto, tal vez sea Hola John. Hola Stephen. Hola Harry. Entonces, sigamos adelante y agreguemos esa funcionalidad en particular. Pero lo vamos a hacer aquí va a crear una pequeña etiqueta P. Y vamos a, vamos a darle una identificación. Así que recuerda cómo hablamos de los ID y cómo se pueden usar para apuntar a elementos específicamente usando CSS. También son muy útiles cuando trabajas con JavaScript. Entonces, una cosa para la que podemos usar los ID aquí es para apuntar realmente a un elemento específico. Entonces vamos a usar el parámetro ID aquí y darle a esta etiqueta P un ID de saludo. Y eso es con lo que vamos a trabajar cuando estemos creando nuestros usuarios. También vamos a seguir adelante y dar esta entrada FirstName También vamos a darle a eso una IV de primer nombre, solo para que sepamos de qué entrada necesitamos apuntar el valor Entonces, para que esto sea todo el entrenamiento, estamos llegando a escribir una función de JavaScript que se llama cuando se presiona el botón de enviar. Así que vamos a crear una función onclick. Entonces conceptos onclick, llamémoslo en Submit. Enviar. Queremos, queremos básicamente obtener la información que está en eso, esa primera entrada, queremos obtener el valor de esa entrada. Entonces, ¿cómo va a hacer esto es apuntando a la ventana, que es el objeto más grande que contiene toda la información de la página. Entonces vamos a apuntar a la ventana. Como también hablamos, podríamos hacerlo usando el documento. Porque como decíamos, JavaScript funciona con el Document Object Model. Puede usar ventana o documento y escribir ventana punto get. En realidad vamos a usar documento. Hagamos documento punto obtener elemento por ID, que es un método disponible en el documento. Y vamos a pasar en ese ID que le dimos la primera entrada llamada nombre. Vamos a salvar eso. Y vamos a solo registrar la consola el resultado de eso. Y vamos a ver, vamos a devolver justo lo que sea que sea, derecho, así onsubmit, vamos a devolver eso y estamos este console.log loops vamos a simplemente consola punto log On Submit Yo sólo quiero ver qué pasa cuando llamamos a eso. Lo último que realmente vamos a tener que hacer aquí es llamarlo desde el propio archivo HTML porque necesitamos conectar los dos. Entonces como tenemos nuestro botón de tipo de entrada aquí, vamos a dar un atributo onclick Y lo que es ese atributo va a ser solo la conexión a nuestras funciones de JavaScript. Entonces, la función definitiva en la que nos vamos a sentar, en realidad vamos a cambiarla a en Submit. Bien, así que vamos a devolver el documento, salir. No hablamos de los valores. Vamos a hacer punto de documento, obtener elemento por ID valor de punto porque queremos el valor real de eso. Bien, en realidad hagamos algo aquí. Digamos Const primer nombre. Y nosotros, vamos a poner eso a este valor. Así que toma esto y voy a poner eso ahí. Y así ahora FirstName es el valor. Vamos a devolver FirstName, pero antes de devolverlo, en realidad también lo vamos a console.log Primero. Bien, y vamos a guardar eso. Entonces cuando tecleamos John y hacemos clic en Enviar, Ahí vamos. Está funcionando. Estamos recibiendo a John, cuando presionamos el botón Enviar. Perfecto, así es exactamente como pretendíamos. Entonces ahora que tenemos esta variable con la que podemos trabajar, lo que tenemos que hacer ahora es hacer uso de ella, ¿verdad? Entonces, ¿podemos guardar esto a una variable en particular? Por supuesto que podemos, como ya hemos hablado antes, podemos guardar el resultado de una función en una variable. Bien, entonces nosotros, ¿Cómo son las variables firstname aquí? ¿Qué más queremos hacer? Lo que queremos devolver este nombre en particular en un saludo de tipo a nuestro usuario, ¿verdad? Entonces lo que vamos a hacer aquí en realidad es tomar el valor del nombre de pila, Serena Toma los resultados de esto y hecho lo vamos a poner en función de saludo. Así que vamos a crear un saludo como una función. Y vamos a decir que la función de saludo debería regresar. O ya sabes lo que será el saludo. Una función de efectos secundarios. Lo que va a hacer es que va a apuntar al documento, va a obtener un elemento diferente por ID. Recuerda que le dimos una identificación a esa etiqueta P. Puedo traerlo aquí a un lado para que los veas. Entonces le dimos a esta etiqueta P una identificación de saludos. Entonces vamos a obtener elemento por ID de ID de saludo. Luego está esta otra propiedad en este llamado innerHTML Entonces has apuntado a un elemento, ahora quieres poner algo dentro de su HTML interno. Así que queremos entonces apuntar al punto HTML interno. Y queremos esencialmente poner en el nombre del usuario en eso, en esa frase. Entonces vamos a decir, si nuestro saludo sólo va a ser bastante sencillo. Entonces vamos a saludar, hola. Y luego más el nombre de lo que sea que sea la persona. Además, vamos a tomar en un parámetro para esta función llamado usuario. Entonces pasaremos eso a la pequeña función que tenemos aquí. Entonces cuando se llama saludo, va a tomar el, va a ir al documento, obtener el elemento con la idea de saludo. Entonces esa es nuestra etiqueta P aquí. Va a obtener el HTML interno, que es este pequeño espacio justo entre las etiquetas P aquí mismo. Y va a insertar este alto más el nombre del usuario. Bastante simple. Así que vamos a mover esta función que se alza por encima de la función submit aquí Porque otra cosa importante que hay saber sobre JavaScript es que a veces no se puede acceder a las funciones hasta que se crean. Entonces, si tuviera que llamar saludo, si tuviera que decir saludo, en esta función, podría obtener un error que tiene, se está usando antes de que se cree. A veces causa error, a veces no lo hace, pero es la mejor práctica simplemente ponerlos en el orden en que los estés usando. Así que vamos a crear un saludo. Y luego tomemos el valor del primer nombre y vamos a pasar eso en saludos. Vamos a pasar nombre al saludo. Y eso va a ser, esa va a ser nuestra función realmente tenemos que hacer es agregarla. Entonces necesitamos, en lugar de llamarlo, necesitamos agregarlo tomará HTML interno. Y vamos a usar más e iguales para tener un igual esto. Entonces, si volvemos a hacer esto, debería funcionar. Golpeamos Enviar. Ahí vamos. Tenemos hola John. No está del todo formateado , cierto, pero vamos a que podamos arreglarlo. Perfecto. Entonces echemos un vistazo a lo que hicimos aquí. Nos dirigimos al documento. Obtuvimos el elemento por el saludo ID, que es esta etiqueta P. Apuntamos su HTML interno y usamos este más un signo igual. Entonces le estamos agregando algo. Y agregamos hi más el nombre del usuario. Bastante simple, ¿verdad? Y luego para que nos guste un agradable saludo amable que podamos hacer, esta es solo una forma en que podemos aprovechar todas las cosas que hemos hecho con nuestro JavaScript hasta ahora. Súper simple pequeña función para hacer. Pero solo un ejemplo realmente genial de cómo podemos trabajar realmente con los valores de que nos han dado. Como puedes imaginar, podríamos configurarlo para hacer cosas diferentes como tomar su apellido, tomamos su edad. Podríamos decir, Oye, estás en edad de conducir, ve a buscar tu licencia o algo así, o cualquiera que sea la respuesta quieras para obtenerlos en función de su edad. Como puede ver, esto podría usarse de diversas maneras diferentes. 11. Formulario avanzado: Echemos un vistazo ahora a nuestro proyecto anterior, nuestro proyecto HTML y CSS, y veamos cómo podemos agregarles algo de JavaScript. Entonces, como recuerdas, tenemos nuestro sitio web aquí mismo. Y básicamente lo que queremos hacer ahora es probablemente agregarle un poco de interactividad interactiva usando JavaScript ahora que somos profesionales de JavaScript. Entonces, si recuerdas, había esta pequeña imagen aquí llamada estados activos. Y así en realidad nos da un montón de diferentes estados activos que les gustaría que agregáramos a la forma real en sí. Entonces, como puedes ver, mucho de esto es básicamente decirle al usuario que algo no puede estar vacío cuando ha hecho clic en Enviar Así que aquí también hay un poco de validador de correo electrónico. Entonces, sigamos adelante e intentemos implementar algunas de estas cosas. Hagámoslo así. Si el usuario intenta enviar y el valor es nulo, queremos devolver algún mensaje de error. Entonces veamos cómo podría verse esto. Digamos que podemos apuntar, podemos usar la función HTML interna, la propiedad HTML interna de la que acabamos de hablar, así como el ID es realmente llegar a lo que estamos tratando de lograr aquí. Entonces veamos. Si también notas el, los colores alrededor del borde son rojos aquí. Entonces probablemente queramos hacer algo con el CSS y el estilete Entonces eso es un par de cosas que queremos hacer. Así que agreguemos un onsubmit onclick. Agreguemos una función onsubmit. Y es marrón ahora mismo porque en realidad no lo hemos logrado. Entonces hagamos eso en Submit. Genial. Función básica. Y al hacer clic, también lo he escrito mal aquí. Son reales onclick. Hacer un onsubmit. Impresionante. Bien, entonces en esta función onsubmit, queremos apuntar básicamente a todos los valores de la de la entrada Entonces, hay un par de formas diferentes en las que podemos hacer esto. Podríamos arreglarlos, vamos a conseguirlos, hagámoslo realmente un poco más manualmente por ahora, hagamos ID firstName Hagamos id de apellido. Y vamos a hacer ID de color de correo electrónico. Probablemente quiera hacer algo diferente con algunos de ellos también. Y luego esta la semana pasada, oh sí, haremos un id de contraseña. ¿Bien? Entonces tenemos nuestras cuatro piezas de entrada con ID. Entonces lo que queremos hacer ahora es que queremos obtener todos esos elementos por ID. Y podemos hacerlo dentro de la función onsubmit o fuera de ella. Entonces, si quisiéramos simplemente crear estas variables aquí, podríamos ir firstname Impresionante. Así que ahora hemos apuntado a todos esos elementos. Entonces onsubmit, entonces vamos a querer decir si, si el valor de punto de entrada es igual, igual a no es igual, es igual a nulo , entonces queremos tomar eso, eso tomará esa entrada y le daremos un nombre de clase Entonces se llama lista de clases. Dot add agregará, agregará en el, lo llamará error. Hagamos una cosa más aquí. Vamos a añadir un estilo llamado error. Error. Y cambiará el borde a un píxel, un píxel. Rojo sólido. Eso es lo que vamos a hacer por ahora. Entonces, si está vacío, agregará este borde rojo. A ver si eso funciona. No se pueden leer las propiedades del valor de lectura nulo. Bien, entonces nos está dando un error aquí porque no hay valor para cada uno de ellos. Bien, entonces después de algunas excavaciones, descubrí cuál era el problema Lo que realmente necesitábamos hacer es mover todos estos elementos dentro de la función porque básicamente no existen, afuera. No te existen, no hay nada ahí para que la función realmente se agarre. Entonces al ponerlos dentro de la función, dejamos de tratar eso, activando ese aire Entonces lo que básicamente queremos hacer es esto. Queremos agarrar el elemento add, verificar para ver si el valor es igual a esta cadena vacía. Si lo hace igual a esa cadena vacía, entonces queremos tomar ese elemento para entrar en su lista de clases y luego agregar error. Como recuerdas, agregamos un error clásico en la parte inferior aquí, eso va a dar el borde, va a cambiar el borde a ser de un píxel, borde sólido en lugar de punteado o discontinua, y convertirlo en un borde rojo Entonces, en teoría, si lo hemos hecho correctamente, cuando hacemos clic en el nombre de pila no valor va a sumar eso Va a agregar esa clase de error y va a ser roja. Entonces vamos a darle click y luego lo tenemos, está funcionando correctamente. Nos está diciendo que, oye, aquí hay un error. Impresionante. Entonces lo que ahora queremos hacer es apostar por todos ellos. Así que sigamos adelante y agreguemos rápidamente todas esas otras opciones. Así que básicamente hemos tomado todas las entradas. Hemos creado una matriz para que podamos iterar sobre ella mucho más rápidamente Y entonces hemos dicho para cada entrada, si el valor de entrada no es nada, queremos agregar el error de clases. Eso es todo lo que hicimos que nos creó ese aire. Bien, ahí tienes. Hemos visto cómo podemos usar JavaScript para interactuar realmente con este formulario en un nivel muy básico, te animo a que tomes esto hasta el final y que agregues los pequeños signos de exclamación y que agregues también los pequeños textos de marcador de posición para ver hasta dónde puedes llegar realmente