Fundamentos del desarrollo web: JavaScript

1. Introducción: Hola y bienvenidos a Fundamentos de Desarrollo Web: JavaScript. Soy Chris, soy un desarrollador web autodidacta y creador tres de las clases aquí en Skillshare, Entender el desarrollo web, How to Build Eficientemente Wordpress Sites With Divi, y más recientemente, Web Development Fundamentos: HTML y CSS. Esta clase es el siguiente paso en nuestra serie de Fundamentos de Desarrollo Web. En la clase anterior, cubrimos cómo crear páginas web con HTML y luego peinarlas con CSS. En esta clase, vamos a aprender a agregar más características interactivas a nuestros sitios web y aplicaciones web con JavaScript. JavaScript, por supuesto, es una de las tres tecnologías centrales de la web mundial. Se dice que es el lenguaje de programación más popular en el mundo y es el lenguaje de programación para el desarrollo web front-end desde el inicio de la web. Entonces, independientemente del camino que elijas seguir, como desarrollador web, vas a necesitar algún entendimiento de JavaScript y específicamente, cómo se enchupa a tus páginas web para crear sitios web interactivos y web aplicaciones como muchas de las que usas hoy en día. Entonces, si estás listo para sumergirte y aprender los fundamentos de desarrollo para la web con JavaScript, sigue viendo y te veré en el siguiente video. 2. Lo que necesitarás: Entonces, antes de empezar, es importante que hablemos de los conocimientos requeridos. Como mencioné en el último video, este curso es el siguiente paso en nuestra serie de fundamentos de desarrollo web. Entonces, si eres nuevo en el desarrollo web, definitivamente te recomiendo que vayas a tomar mi última clase Fundamentos de Desarrollo Web: HTML & CSS. De lo contrario, si ya sabes construir páginas web, entonces estás en el lugar correcto para aprender a hacerlas interactivas. Ahora, para aquellos de ustedes que han tomado mi última clase en HTML y CSS, no quiero repetirme demasiado en lo que respecta a las dos herramientas esenciales, que son un navegador web y un editor de código. Lo más posible es que si ya has hecho algo de HTML y CSS antes, entiendes cuáles son estas herramientas y cómo usarlas. De lo contrario, recomiendo dirigirme a la última clase en HTML y CSS, y revisar la lección de “lo que necesitas” en esa clase. Básicamente, aparte de algún conocimiento de HTML y CSS, un navegador web, y un editor de código, estás listo para saltar directamente al aprendizaje de JavaScript. Entonces, te veré en el siguiente video. 3. Introducción a JavaScript: Entonces, antes de empezar a trabajar con algo de JavaScript, hablemos un poco de lo que es JavaScript y cómo encaja en el desarrollo web. En primer lugar, JavaScript es simplemente un lenguaje de programación. ¿ Qué es un lenguaje de programación? Bueno, según Wikipedia, un lenguaje de programación es un lenguaje formal que especifica un conjunto de instrucciones que se pueden usar para producir diversos tipos de salida. ¿ Por qué menciono esto? Bueno, es importante diferenciar un lenguaje de programación de lo son los otros dos lenguajes que componen el frontend; HTML y CSS. HTML es un lenguaje de marcado, y CSS es un lenguaje de estilo. Sé que esto podría sonar abstracto pero hay ciertas cosas que los lenguajes de programación hacen que HTML y CSS no. Estoy hablando de cálculos explícitos, bucles, y funciones. Para nuestros propósitos con el desarrollo web, todo lo que debes saber sobre los lenguajes de programación es que los necesitamos para que nuestros sitios web sean interactivos. Entonces, para poder compartir con ustedes algunos ejemplos de lo que JavaScript puede hacer, tengo una página Web básica abierta aquí, que en realidad vamos a estar creando en un video posterior. Pero por ahora, acabamos de tener un rumbo, tenemos un botón, y tenemos un div vacío. Lo que tengo en mi archivo de texto aquí son algunas declaraciones JavaScript que preparé antes que podemos usar para manipular esta página. Entonces, si entro a la Consola aquí, puedo ejecutar estas sentencias JavaScript justo en la Consola, y podemos ver estos cambios ocurriendo al instante. Entonces, el primero va a conseguir el botón Pokemon, que es éste, y lo va a ocultar. Entonces, pondré eso en mi Consola, pulsa Enter, y puedes ver que se ha ido. Otra cosa que podemos hacer es, cambiar el HTML interno, que es solo el contenido dentro de un elemento en particular, por lo que éste realmente nos va a dar algún texto a nuestro div vacío. Como se puede ver, ahora dice: “Bienvenidos a la clase”. Si pasamos a los elementos y buscamos en nuestro Inspector, ahí también se está actualizando. El siguiente, también podemos agregar cualquier número de estilo a ese div. Voy a añadir un margen de 20 píxeles. Ahora, ya puedes ver, tenemos un margen de 20 píxeles. Por último, voy a agarrar la etiqueta de encabezado, y la voy a cambiar de Pokemon a Digimon. Si presiono Enter en eso, el cambio ocurre instantáneamente. Entonces, entraremos en todo esto en la clase de cómo funciona esto pero por ahora, se trata de algunos ejemplos de cosas que puedes hacer con JavaScript. Ahora, la razón por la que debemos usar JavaScript para hacer este tipo de cosas esto es porque el software que usamos para ejecutar JavaScript es nuestros navegadores. Recuerda, el navegador es el programa que estás usando en este momento para navegar por Internet. Actualmente, hay un 90 por ciento de probabilidad de que el navegador que estás usando en este momento sea Firefox, Safari, Internet Explorer o Edge. Por lo tanto, si un sitio web va a funcionar en todos estos navegadores, todos necesitan ponerse de acuerdo sobre qué lenguaje de programación van a ejecutar. Esto realmente sucedió mucho atrás a finales de los 90 si te interesa la historia. Pero realmente, por qué debemos usar JavaScript no es tan importante. Sólo necesitamos saber que tenemos que usarlo para el desarrollo web frontend. Esto es diferente a los lenguajes de programación back-end, ya que todos estos se ejecutan en el lado del servicio. Recuerda, HTML, CSS y JavaScript se ejecutan en tu navegador y el backend se ejecuta en un servidor. Entonces, para nuestros propósitos, solo necesitamos pensar en JavaScript como un lenguaje de programación para el frontend. En cualquier momento que quieras que algo suceda sin recargar toda una página nueva, JavaScript es lo que necesitas usar. Un ejemplo que me gusta usar es la aplicación Web Hojas de cálculo de Google. Vea a medida que hago clic y arrastre a través de varias columnas aquí, hay comentarios sucediendo en la página sin que vuelva a cargar la página. Soy capaz de cambiar el color de fondo de las celdas. Soy capaz de poner texto en celdas, y cambiar el color de ese texto, todo sin recargar la página. Ahora, esto solo es posible usando JavaScript. Si fuera a ir aquí a este plug-in que tengo, y deshabilitar JavaScript en la página, y luego recargo esta página, ahora verás que Google no me permitirá usar esta aplicación porque simplemente no puede funcionar sin JavaScript. Lo único que realmente funciona en esta página son los enlaces, que por supuesto no necesitan JavaScript. Pero si fuera a hacer clic en mi página de inicio para hojas, me vuelve a dar esta advertencia. “ JavaScript no está habilitado, por lo que no se puede abrir. Habilitar y recargar”. Entonces, como puedes ver aquí, no mucho es posible en esta página sin JavaScript. Entonces ahora, hemos cubierto cómo JavaScript es un lenguaje de programación, cómo es predominantemente un lenguaje de programación frontend y, por último, que JavaScript es la única opción a la hora de construir sitios web interactivos. Si aún no tienes claro lo que hace JavaScript, no te preocupes vamos a estar usando todo este curso para pasar por muchas de las cosas que puedes lograr con JavaScript. Entonces, sin más preámbulos, empecemos con JavaScript en el siguiente video. 4. Primeros pasos con JS: Entonces, al parecer nos sirvió tan bien en la clase anterior sobre HTML y CSS, voy a referirme una vez más a w3schools.com como el plan de estudios para esta clase. Entonces, lo que voy a hacer es abrir una nueva ventana, y teclear w3schools.com. Ahora que estamos en w3schools.com, podemos ver los menús aquí abajo y aquí para HTML, CSS, JavaScript, Server Side. Recuerda en la última clase, cubrimos HTML y CSS usando este plan de estudios. Pero vamos a dar clic a JavaScript y hacer clic en Aprender JavaScript. Entonces, a continuación, lo que quiero que hagas es abrir tus Herramientas de Desarrollador, y en el navegador web que estoy usando actualmente, que es Google Chrome en Mac OSX, puedo presionar Option Command I para que aparezcan las herramientas de desarrollador. Ese es un atajo que me ayuda a abrir las herramientas de desarrollador muy rápidamente, pero de lo contrario, puedo encontrar desarrollador yendo a View, Developer, y haciendo clic en Developer Tools. Entonces, como dije en la última clase, podrías estar usando Firefox o quizás estés usando Safari. Es algo similar en cada uno de esos programas. En Firefox, creo que vas a Herramientas, luego vas a Desarrollador Web, luego presionas Consola Web y puedes obtener una interfaz bastante similar aquí. En Safari, solo tendrás que dirigirte a cualquier página primero. Una vez que estés en una página, puedes hacer clic en Desarrollar, y luego puedes hacer clic en Mostrar Inspector Web, y luego obtienes una interfaz similar aquí también. Entonces, en esta clase vamos a estar trabajando principalmente con la consola JavaScript, así que es la última pestaña en Safari, pero en Google Chrome en realidad es la segunda pestaña. Entonces, si vuelvo a llamar las Herramientas de Desarrollador, tenemos Consola aquí. Si recuerdas de la última clase, trabajamos mucho con esta pestaña de Elementos para inspeccionar nuestro HTML y ver qué estilos estamos aplicando aquí en nuestras reglas CSS. Ahora, la razón por la que he saltado a la consola de inmediato es porque es muy útil para ayudarnos a ejecutar JavaScript y también depurar el JavaScript que se está ejecutando en nuestra página. Entonces, la consola, básicamente, nos permite interactuar con una página web, una vez más, ya sea ejecutando expresiones JavaScript en el contexto de esta página o teniendo nuestro JavaScript salida algo a esta consola para que podamos en realidad verlo y averiguar qué está pasando. Eso probablemente sea difícil de conceptualizar en este momento si no tienes experiencia con JavaScript, pero lo verás muy pronto como empecemos a construir algún JavaScript que empezarás a usar la consola aquí. Entonces, lo que podría hacer es romper esto en una nueva ventana. Entonces, puedo hacerlo haciendo clic en aquí y presionando Undock en una ventana separada, así que ahora lo tengo apagado a un lado. Ahora, lo que podemos hacer en esta Consola JavaScript, justo como ejemplo, es que podemos ejecutar cualquier JavaScript. Entonces, digamos por ejemplo queríamos 5 veces 5, y presionamos Enter, nos da 25. Entonces ese es un simple problema de matemáticas. Podemos crear una variable llamada x y llamar a eso 5, y luego podemos, veces 5 por x, y ver qué pasa, y obtenemos el mismo resultado. Entonces, somos capaces de ejecutar JavaScript justo aquí. Como verás, usaremos parte de la página web para afectarla realmente usando esta consola también. Puedes hacer click aquí para borrar y luego estás de vuelta a donde empezaste. Ahora, la consola es genial para averiguar cosas y probar cosas, pero en cuanto recargamos la página, perdemos todo lo que hemos hecho aquí. Entonces, si fuera a establecer una variable de x y hacerla 10, como viste antes, podemos usar variables ahora para hacer cualquier matemática por problemas aquí. Pero si recargo la página y luego vuelvo a esa ventana, antes que nada, tengo que limpiar todo este lío aquí. Pero si tipeo en x, se le ocurrirá un error, x no está definido. Entonces, lo que necesitamos es tener un archivo JavaScript donde podamos almacenar todas nuestras líneas de JavaScript. Ahora, eso será algo futuro que haremos una vez que empecemos a implementar en nuestro proyecto. Si has tomado la comprensión del desarrollo web, verías cómo podemos incorporar un archivo JavaScript a nuestro proyecto. Si tomaras la última clase en HTML y CSS, sabrías traer una hoja de estilo externa. Es básicamente el mismo concepto que una hoja de estilo externa, simplemente ponemos todo nuestro código en otro archivo y luego lo llevamos a nuestro proyecto. Pero de nuevo, por ahora, sólo vamos a estar usando lo que hay en nuestro navegador. Entonces, pongámonos directamente en algunos ejemplos ahora mismo. Entonces, aquí abajo, dice Aprender por ejemplos. Por lo que podemos hacer click en este enlace para ver algunos ejemplos de Javascript, y podemos dar click en Ejemplos explicados. Entonces, aquí están algunas de las cosas que JavaScript puede hacer. Puede cambiar el contenido HTML. Entonces, uno de los muchos métodos JavaScript en el contexto de HTML es getElementById (). Lo que estamos haciendo aquí es que estamos agarrando el documento, estamos encontrando un elemento por el id de demo, y estamos cambiando este atributo aquí, que es innerHTML a Hola JavaScript. ¿ De acuerdo? Entonces, vamos a dar click en Pruébalo tú mismo para ver el resultado. Si hago clic en este botón que dice Click Me, repente, eso se ha cambiado. Ahora, si voy y hago clic en Ejecutar para refrescar aquí, verás que esta etiqueta de párrafo tiene un id de demo. Entonces, lo que estoy haciendo en este botón, usando este atributo, y no te preocupes cubriremos lo que está pasando aquí en un video posterior. Pero esencialmente, en el ejemplo aquí, tenemos este botón activando un método onclick de esto, que establecerá cualquier elemento que tenga un id de demo para tener un innerHTML de Hola JavaScript, e innerHTML solo básicamente significa todo dentro de estas dos etiquetas. Entonces, se puede ver, cuando hacemos clic en el botón, todo lo que hay entre estas dos etiquetas ahora se convierte en Hello JavaScript, y se puede ver que sucede en vivo en la página. Esto es lo genial de Javascripts, los cambios ocurren de inmediato sin que tengas que volver a cargar otra página. Entonces, volviendo a los ejemplos, también podemos cambiar los valores de atributo. Ahora, para este, lo que quiero que hagas es traer la consola del desarrollador. Vamos a despejar, y quiero que inspeccionen esta imagen, y vean qué está pasando aquí. Esto es lo bueno del Inspector, podemos ver qué atributos cada uno están cambiando cuando estamos haciendo algo. Entonces, necesitaré correr estos uno al lado del otro para que realmente podamos ver qué está pasando. Pero basta con echar un vistazo tanto a la luz como por aquí cuando hago clic en estos botones. Entonces, si enciendo la luz, la luz se enciende. Apague la luz, la luz se apaga. Pero como puedes ver aquí, lo que realmente está sucediendo en el código real son los lanzamientos cambiando aquí. Entonces, quiero que miren por aquí cuando haga clic apagado Apague la luz, ahí va. Ahora, se puede ver que es pic_ bulboff. Entonces, está cambiando por completo el campo SRC lo que te dice, lo siento tengo que hacer clic en eso, y luego puedes ver las imágenes cambiadas por completo. En realidad está intercambiando aquí el atributo SRC para poner en otra imagen. Entonces, esto es realmente genial. También podemos cambiar los valores de los atributos. Entonces, también podemos cambiar el estilo HTML, por lo que CSS básicamente. Voy a ampliar para este ejemplo y hacer clic en Pruébalo usted mismo. Si hago clic aquí, se puede ver que se cambia el tamaño de la fuente, y lo hemos hecho poniendo una vez más el id de demo en una etiqueta p y estamos cambiando el atributo de estilo y el subatributo de tamaño de fuente a 35 píxeles. Eso sucede en cuanto hacemos clic en el botón Click Me por este atributo onclick. Nuevamente, vamos a cubrir esto que se llama manejador de eventos en un video posterior. Pero ahora, solo por ejemplo, es bueno saber qué puede hacer JavaScript. También puedes ocultar y mostrar elementos, por lo que esto es bastante básico. Se hace clic en el botón y puede ocultar ciertos elementos, y eso es simplemente estableciendo la propiedad de visualización de estilo en ninguno. Entonces, aquí está el ejemplo para show solo para hacerlo completo. Ahí vas. Eso es exactamente lo contrario. Por lo tanto, configuramos el atributo display para bloquear en lugar de ninguno. Ahora bien, si recuerdas de nuevo en la clase HTML y CSS, estaba hablando de por qué estableceríamos un cierto elemento para mostrar ninguno, y esta es la situación perfecta por qué. Entonces, tenemos esta p, está disponible, está en el documento, pero no está apareciendo. El motivo por el que quisiéramos hacer eso es para que tengamos alguna situación en la que cambiemos su estilo de exhibición para que aparezca. Entonces, aquí mismo, cuando se cargue la página, no va a aparecer porque el estilo está configurado para mostrar ninguno, pero en cuanto hacemos clic en ese botón, la pantalla se ha cambiado para bloquear. Entonces, eso es bueno empate a la última clase. Si no sabías por qué estábamos haciendo eso o solo necesitas ver un ejemplo, ahí está justo ahí. Enfriar. Entonces, esos son los ejemplos básicos de JavaScript y creo que esa es una introducción bastante buena en lo que JavaScript puede hacer. En el siguiente video, vamos a cubrir lo importante. Vamos a cubrir sintaxis y declaraciones. Entonces, nos vamos a meter en todas las cosas diferentes de esta lista, no necesariamente todas estas, sino todas las importantes que ver con los fundamentos de JavaScript. Entonces, gracias por ver, nos vemos en el siguiente video. 5. Sintaxis y sentencias de JS: En el último video, cubrimos una introducción a JavaScript. También compartimos algunos ejemplos comunes de lo que JavaScript puede hacer. Ahora, en este video, vamos a cubrir es algo que es muy importante a la hora aprender cualquier lenguaje de programación, y eso es sintaxis. Entonces, voy a dar clic sobre este elemento de menú para la sintaxis JS, y vamos a ver algunas de las sintaxis para JavaScript. Si no estás familiarizado con la palabra sintaxis, básicamente es el conjunto de reglas que determina cómo escribes código JavaScript, o sintaxis en general, es básicamente la gramática de cómo escribes código en un lenguaje determinado. Hay ciertas cosas que son comunes en cada lenguaje de programación como declarar variables, asignar valores y calcular valores. Estos son algunos ejemplos de cómo se vería en JavaScript. Pero vamos a profundizar en ello ahora mismo. En cuanto a tipos de datos, tenemos algunos comunes aquí, números y cadenas. Números, no tienes que poner ninguna comillas simples o dobles. Simplemente pones literalmente algunos dígitos y no importa si es un decimal o un número entero que también se llama entero. Todavía se considera un número en JavaScript. Para cuerdas, y cuerdas, supongo que como término de programación, pero no es tan difícil de entender. Básicamente es solo texto. Siempre que escribes una cadena, para que puedas diferenciarla de palabras clave como en tu código, siempre tienes comillas dobles o simples alrededor de ella. Entonces, desplazándose hacia abajo podemos ver variables, y podemos ver cómo primero, declarar una variable y luego también asignarle un valor. Por lo general, eso se hace de una sola vez. Si hago click, Pruébalo tú mismo, puedes ver aquí tenemos declarando una variable aquí. Entonces, tenemos la palabra clave de var, espacio y luego una X. Entonces, primero declaramos que queremos tener una variable llamada X, y luego estamos tomando esa variable y le estamos asignando un valor de seis en esta operación. Entonces estamos poniendo el valor de X en la pantalla a través de este elemento llamado demo. Ahora, por lo general esto se hace de forma abreviada, y podemos simplemente retroceder allí, hacer clic en Ejecutar, y ambos podemos declarar y asignar una variable en una línea. Eso es suficiente a menudo el caso a menos que quisiéramos declararlo en un ámbito diferente y luego asignarlo en un ámbito diferente, cual te mostraré más adelante cuando cubramos alcance JavaScript. Entonces, tenemos operadores que bastante comunes. Acabas de tener más, menos el astérix para la multiplicación y tienes la barra para la división. Entonces, puedes ver aquí cómo escribirías un problema de matemáticas para el resultado de cinco más seis veces por 10. Ahora bien, algo que podrías confundirte con el lenguaje de programación, es este signo igual. No quiere decir que X sea igual a cinco. Significa que cinco está asignado a la variable de X. Ahora, ¿no es eso lo mismo que podrías estar preguntando? Bueno, no. Si tuviéramos que escribir una sentencia if, que básicamente es solo una declaración que ejecutará código. Si algo es el caso, usamos dobles iguales o triples iguales. Pero entraremos en eso en la lección sobre operadores de comparación, pero por ahora cuando veas esto es igual, significa que estamos asignando una variable o un valor a una variable. Aquí estamos cubriendo expresiones. Esto es bastante autoexplicativo. Estamos consiguiendo un cinco y lo estamos cronometrando por 10, estamos tomando el valor de X y lo estamos cronometrando por 10. Pero aquí tal vez no sea tan obvio, y así es como podemos unir cuerdas. Entonces, si queríamos construir una cadena, tal vez quisiéramos poner una variable aquí, somos capaces de usar el operador plus. Entonces, puedes hacer una cadena de John más una cadena de un espacio en blanco más una cadena de Doe, y eso evaluará a John space Doe. este momento esto realmente no tiene sentido, pero si pusiéramos ciertas variables, esto podría ser reemplazado por cierta variable. De hecho, podría demostrarlo ahora mismo para ustedes. Como se puede ver aquí, John más espacio más Doe, evalúa a John Doe. Pero digamos por ejemplo, puedo entrar aquí y hacer variable X igual, y estoy escribiendo una cadena, así que recuerda que obtuve nuestras comillas de apertura y cierre, y tal vez sea una inicial, así que ponemos en J. Entonces aquí, en lugar de un espacio en blanco, pondríamos en X. Ahora, si ejecutamos eso, verás que el valor de X, y debería ser una cadena porque estamos juntando cadenas, es J, y así lo pone entre esas. Ese es un buen ejemplo de cuándo se quiere armar como cadenas literales que se definen aquí y otras variables que contienen cadenas. Así lo harías tú. También están hablando de palabras clave que aparecen en este contexto como azules. Ya miramos la palabra clave var, que le dice al navegador que cree variables. Lo que haces es poner var, espacio y luego el nombre de la variable a declarar. ¿ Quieres declarar múltiples variables al mismo tiempo? Simplemente puedes usar una coma y luego poner otra variable ahí. Entonces aquí, después de que lo hayamos declarado, ahora estamos asignando valores a estas diferentes variables. Como puedes ver aquí, estamos usando una variable que ya declaramos y asignamos estamos poniendo el resultado de eso contra 10 aquí, y estamos obteniendo una nueva variable que es Y. Otra cosa que verás con bastante frecuencia es comentarios. Esto es si estás usando HTML, CSS, JavaScript o cualquier otro idioma. En ocasiones, quieres escribir cosas en el código que no quieres que se ejecuten. Por ejemplo, tal vez quieras explicar lo que está pasando en esta línea. Podrías querer decir, esto asigna cinco a la variable X. Normalmente no tendrías que escribir un comentario tan básico, porque esta es una función tan básica. En realidad, aquí hay un error. Voy a asegurarme de que este punto y coma no esté en el comentario. Si ejecuto eso, nada cambia. Es sólo un comentario en el código. Como puede ver aquí, también podemos usar comentarios para mantener el código que hemos escrito pero que no lo haga ejecutar. Si solo elimino ese comentario, y paré el comentario desde ahí, verás que X se convierte en seis ahora y tomará el último valor asignado de X y lo pondrá ahí. Pero si vamos a poner ahí algunas marcas de comentarios, se remontará a cinco. Ahora, solo ten en cuenta que esto iniciará el comentario desde justo después de él en una línea separada. Entonces, si vamos a una nueva línea y tecleamos en var y, se puede ver que ahora no es verde porque estamos empezando una nueva línea. Pero si querías hacer un comentario sobre múltiples líneas, lo que puedes hacer es, abrir con una barra y un astérix y luego cerrar con astérix y una barra. Entonces, podemos escribir cualquier número de código de una líneas múltiples y todo será un comentario. Entonces, no se ejecutará. Si digo, Y es igual a siete y luego, en realidad vamos a mover eso aquí abajo, y digamos que X es igual a siete. Vamos a correr eso. Ya verás que no se está ejecutando porque está dentro de un comentario. tanto que si elimino estos, y lo ejecuto, ya verás que x es ahora siete. En realidad esa es mala sintaxis porque estoy re-declarando la variable. Simplemente puedo ponerlo así y X ahora será el valor de siete. Entonces, pasando, hay algunas otras cosas en JavaScript que son realmente importantes. Una es que JavaScript es sensible a mayúsculas y minúsculas. Como puedes ver aquí, LastName con la N mayúscula es diferente al apellido, todo minúscula. Si escribieras esta variable en mayúsculas por completo, sería una variable completamente diferente. Eso podría ser confuso para algunos que han venido de lenguajes de programación que no son sensibles a mayúsculas y minúsculas. Pero en mi opinión, es una muy buena característica de tener y eso es porque podemos usar algo llamado Camel Case. Entonces Camel Case, para aquellos de ustedes que quizás no hayan hecho mucha programación antes, es una gran manera para nosotros de crear nombres variables cuando tenemos múltiples palabras en un solo nombre. Entonces, como puedes ver aquí podríamos estar tentados a hacer nombre y solo dividiremos las palabras pero eso no está permitido en JavaScript. Una cosa que podemos hacer es, usar guiones bajos para separar palabras, pero una forma mucho más limpia que muchos desarrolladores prefieren es Camel Case. Entonces, eso es capitalizar la primera letra de una de las palabras o ambas de las palabras. Entonces, en este ejemplo estamos capitalizando todas las primeras letras de cada palabra, pero más comúnmente es menor Camel Case que está empezando con minúsculas y luego una vez que llega a una palabra nueva la primera letra de esa palabra es mayúscula. Entonces ese es Camel Case. Entonces, ahora hemos llegado al final de la página y es hora de ir a las declaraciones de JavaScript. Entonces, con solo hacer clic en las sentencias JS, podemos echar un vistazo a una sentencia JavaScript y podemos descomponerla por las diferentes partes que está compuesta. Entonces, tenemos operadores de valores, expresiones, palabras clave, y comentarios. Entonces aquí abajo, podemos ver que esta declaración en particular le dice al navegador que escriba “Hello Dolly” dentro de un elemento HTML con el ID de demo. Entonces, al pasar por esta declaración, comenzamos con un objeto en la parte superior que es documento y que solo apunta todo el documento entonces podemos ir un paso más profundo consiguiendo un elemento por ID de demo dentro de ese documento, entonces podemos cambiar un atributo basado en ese elemento en particular. Estamos asignando un valor, por lo que utilizamos un operador de asignación y luego ponemos un valor. Entonces, volviendo al revés, estamos tomando un valor, lo estamos asignando a un atributo que está en un elemento en particular, cual usamos para encontrar tomando el contexto del documento y luego profundizando. De nuevo, vamos a repasar esta parte particular del código en videos posteriores, así que no te preocupes demasiado por entender esto. Pero esencialmente, solo estamos desglosando lo que está sucediendo en una sola declaración en este momento. Parte muy importante de las declaraciones son punto y coma. Por lo tanto, se requieren puntos y comas para finalizar una declaración ejecutable. Entonces, si va a decir por ejemplo, declare un montón de variables y luego asigne algunas variables, una vez que haya terminado una declaración, tiene que poner un punto y coma. Entonces, con algunos lenguajes si pones algo en una nueva línea, entonces el lenguaje de programación sabe que es una nueva declaración y los ejecuta por separado. Debido a que tenemos que usar punto y coma con JavaScript, en realidad podemos poner todas estas declaraciones en la misma línea. Por lo general, esa no es la mejor idea porque aún queremos diseñar un código muy bien, con anidación y nuevas líneas para que podamos ver diferentes declaraciones, pero esa es una opción disponible para nosotros. Otra cosa a tener en cuenta de JavaScript, es que ignora múltiples espacios, por lo que puedes agregar tanto espacio en blanco como quieras a tu proyecto o a tu código para entenderlo mejor. Entonces, estas dos líneas son equivalentes, pero creo que la mayoría de nosotros estaremos de acuerdo en que esto es un poco más agradable porque nos da un poco más de espacio en blanco, un poco más de espacio para respirar alrededor del operador de asignación, el valor y la variable. Entonces como dice aquí, es una buena idea poner espacios alrededor de los operadores. Pero esencialmente podríamos eliminar todos los espacios aquí, aquí, aquí, y aquí. No pudimos quitar este espacio porque esta es una palabra clave y necesita terminar con un espacio en blanco, pero en términos de esto aquí, podríamos quitar todo el espacio en blanco y seguirá funcionando, pero simplemente se verá feo. Por lo tanto, se recomienda poner espacio alrededor de los operadores pero no esencial. Entonces, de nuevo, cada sentencia se termina con un punto y coma y eso significa que podemos poner múltiples sentencias en la misma línea como lo hicimos aquí, o alternativamente, podemos romper una declaración realmente larga colocándola en múltiples líneas. Siempre y cuando rompamos con un punto y coma cuando esté hecho, está bien romperlo en múltiples líneas. Lo siguiente son los bloques de código, que si estamos definiendo una función o un bucle, vamos a iniciar un bloque que se ejecuta como parte de esa función o parte de ese bucle. Hacemos eso mediante el uso de punto y coma. Entonces, en algunos lenguajes de programación, solo necesitamos una nueva línea o tenemos una palabra clave que diga final al final, pero en JavaScript iniciamos un corchete rizado y luego terminamos con un corchete rizado. Entonces, todo dentro de estos dos corchetes rizados forma parte de esta función. Dicho esto, también podemos usar palabras clave para terminar un bloque. Entonces, no tienes que usar estos corchetes rizados todo el tiempo, en realidad podemos usar palabras clave pero podríamos ver algunos ejemplos de eso en un video posterior. Por ahora, la forma estándar de hacerlo es solo agregar estos corchetes rizados y luego todo dentro de los corchetes rizados es lo que forma parte de ese bloque de código. Está bien. Entonces, hemos cubierto muchas cosas para hacer una sintaxis en este video. Mucho de lo que estamos hablando aquí lecciones que aún no hemos aprendido en JavaScript, así que no te preocupes mucho si no entiendes todo lo que está pasando aquí. Es importante cubrir esas cosas sintácticas directamente porque digamos por ejemplo que cometes un error sintáctico más allá de la pista tal vez porque has experimentado en un lenguaje de programación diferente y no es lo mismo que en JavaScript, podrías frustrarte al no saber de qué estás hablando. Entonces, cuando se trata de sintaxis, lo mejor es simplemente seguir los ejemplos no intentar cambiar demasiado el sistema y de esa manera será menos probable que tenga roturas en su código. Entonces, eso es sintaxis, en el siguiente video vamos a cubrir la salida. 6. Datos de salida de JS: Entonces, en este video, vamos a cubrir las posibilidades de visualización con JavaScript. Entonces, si hago clic en la salida JS en el menú de aquí, podemos ver que JavaScript puede “mostrar” datos de diferentes maneras. Entonces, lo hemos visto con HTML interno, por lo que podemos escribir directamente en elemento HTML usando HTML interno. También podemos escribir en una salida HTML usando document.write. Entonces, como vimos antes, se trata de un objeto llamado “documento”, que representa todo el documento. Entonces estamos llamando a un método sobre el de “escribir”. Entonces aquí dentro, podemos poner algo de salida. Llegaremos a ese ejemplo en tan solo un segundo, podemos usar alerta y esta es una realmente básica que ves mucho en un entrenamiento de JavaScript, pero si voy a mi consola y solo despejo qué hay, puedo iniciar una alerta derecha ahora. Entonces, puedo ir “Hola Skillshare!” Ahora, ya puedes ver, aparece una alerta diciendo: “¡Hola Skillshare!” Entonces, esa es una forma, la alerta está algo anticuada ahora, lo general solo se usa para si estás a punto de eliminar algo, y es realmente importante llamar tu atención por lo que podría haber visto esto antes. Si ejecutamos eso, podría decir: “Oh, ¿estás seguro de que quieres eliminar?” y luego presionas “OK”, y terminaste de borrar. El común que estoy usando mucho para depurar es console.log. Eso nos permite escribir en la consola del navegador. No necesariamente tendrá sentido ahora mismo. Haciéndolo aquí porque ya estamos en la consola, pero dentro del código que creamos, puedo hacer que registre algo a la consola. Entonces, digamos, “Hola Consola”. Si ejecuto eso, volverá con Hello Console. No es un ejemplo muy práctico porque le estamos dando importación y lo estamos recuperando directamente. Pero lo que puedes hacer dentro tu código en tu JavaScript que realmente se está ejecutando en la página, puedes configurar un console.log y para que puedas obtener retroalimentación de lo que está pasando, en tu página a tu consola aquí. Entonces para que veas, “Oh, eso es lo que es esa variable, vale. Tengo que cambiar eso”. Pero de nuevo, iremos más adelante a cómo depurar código más adelante en esta clase. Entonces, el primer ejemplo es usar innerHTML y no quiero pasar mucho tiempo en esto porque, ya lo hemos cubierto en algunos de los ejemplos básicos. Básicamente podemos poner en algún HTML entre estas dos etiquetas p. Entonces, si uso el ejemplo aquí, JavaScript es en realidad bastante inteligente, se da cuenta de que estamos tratando de poner una cadena aquí, pero tenemos una operación con números aquí. Toma el resultado del cálculo aquí, lo convierte en una cadena para que se muestre como texto en nuestra etiqueta p aquí. Entonces, si inspeccionamos aquí, pongo esto abajo para que realmente podamos ver. Se puede ver que es nuestra p id=demo y dentro, tenemos el resultado de esa ecuación que es 11. Entonces, el siguiente ejemplo es document.write. Entonces, podemos usarlo con fines de prueba, nunca me encuentro usando escrituras de documentos personalmente porque siempre estoy usando console.log, pero podemos probar el ejemplo aquí. Se puede ver aquí, que ya lo hemos corrido. Pero se puede ver que ahora estamos escribiendo los resultados de cinco más seis a la página. Entonces, la diferencia entre éste y el último si entro e inspecciono, dejo esto e inspecciono ese 11, está sentado justo en el documento. No tiene una etiqueta p ni nada porque básicamente la estamos escribiendo en la sección del documento donde el código está escrito específicamente si eso tiene sentido. Entonces, en lugar de en el ejemplo anterior, encontrar un elemento en particular, y luego cambiar un atributo para poner el resultado directamente en un elemento HTML que existe en cualquier parte de la página, simplemente estamos diciendo: dondequiera que se ejecute esto, escríbelo a la pantalla. A lo mejor podemos poner esta etiqueta de guión aquí. Nuevamente, este no es un código muy limpio, pero tal vez vaya a funcionar. Podemos ver aquí que si estoy inspeccionando eso, ahora verán que 11 está escrito dentro de esa etiqueta p porque tenemos un guión dentro de esa etiqueta p. Pero ese no es muy buen código, eso no está muy limpio, así que no recomendaría que si quisieras que saliera a esa p, deberíamos usar el ejemplo anterior usando HTML interno. En ese caso, por eso nunca me encuentro realmente usando document.write, pero esa es una opción ahí. Entonces, hemos cubierto alerta justo antes, y console.log es el que estoy usando con tanta frecuencia para depurar. Como ven aquí, dice: “Aprenderás sobre la depuración en un capítulo posterior”. Definitivamente para nuestros propósitos, estaremos aprendiendo sobre la depuración de JavaScript más adelante también. Está bien. Entonces, eso cubre la salida, este es el que usarás con más frecuencia, o estarás cambiando contenido en la página, no te preocupes demasiado por la alerta de ventana o document.write. En el siguiente video, vamos a estar hablando de variables. Entonces, espero verlos en el próximo. 7. Variables de JS: En este video vamos a cubrir variables. Si voy a las variables JS aquí, podemos ver algunos ejemplos de cosas que ya hemos visto de las lecciones sobre sintaxis. Pero vayamos hacia abajo y cubramos algunas de las cosas que no hemos visto ya. Definitivamente recomiendo volver a esta página y leerla para que entiendas todo lo que realmente necesitas saber sobre las variables. Pero si entendiste, cuando pasamos por variables en la introducción y video sobre sintaxis, entonces deberías saber lo suficiente para continuar. Cubrimos cómo se pueden crear muchas variables en una sentencia mediante el uso de una coma, y esa declaración puede abarcar múltiples líneas siempre y cuando terminemos esa declaración con un punto y coma. Algo que aún no hemos discutido es el valor de indefinido. Si declaro aquí una variable de carName, y en realidad no le asigno ningún valor, ¿cuál es el valor de la misma? Entonces esa es una buena pregunta. Si en realidad no define un valor para algo, termina teniendo un valor de indefinido. Para ver eso en nuestra consola, si fuera a hacer var CarName y luego acabo de emitir CarName, aparece como indefinido. Si fuera a asignar un valor de Mazda, que es el auto que conduzco, se resolverá a Mazda ahí. Pero entonces si vuelvo a escribir mi CarName y presiono Enter, se le ocurre una cadena de Mazda. Antes de asignarle un valor, es simplemente indefinido, y veremos más adelante por qué eso realmente es importante. Otra cosa importante a tener en cuenta aquí es que si vuelve a declarar una variable JavaScript, no perderá su valor. El carName variable, todavía tendremos el valor de vulvar después de la ejecución de las sentencias. Al poner en esta declaración, después de haber definido un valor en una variable, realidad no lo borra y lo vuelve a poner en indefinido. Como se puede ver aquí, podemos hacer aritmética. También podemos sumar cuerdas juntas. El término técnico para esto se llama concatenación. No iría a hablar más de eso porque ya lo hicimos en el ejemplo anterior, pero también puedes usar estos operadores, no solo para sumar números juntos, sino también para sumar cadenas juntas. Ahora JavaScript es en realidad bastante inteligente y el hecho de que no se errorará cuando intentas poner una cadena y una variable juntos. Si nos desplazamos hacia abajo desde aquí, podemos ver que en realidad se puede usar el operador plus en una sola declaración con cadenas y números. Ahora algunos lenguajes de programación no te permitirían hacer eso porque vería que este es un tipo de datos de cadena y este es un tipo de datos de número, y no sabría qué hacer. A lo mejor quieres agregar cinco y dos juntos para hacer siete, en ese caso, tratarías esto como un número, no una cadena, o r tal vez quieras agregar la cadena de dos a la cadena de cinco, y en cuyo caso obtendrías 52. En JavaScript, los tratará como cadenas porque el primer valor es una cadena. Entonces si hacemos clic aquí y lo probamos, se puede ver que el resultado de agregar cinco como cadena y luego dos y tres como número es cinco, dos, tres. Es lo mismo que si fuéramos a aquí, y explícitamente llamamos a estas cadenas señalando doble cita donde se está asignando el valor real a x, obtendrás los mismos resultados porque solo está tomando estos dos números y en realidad cambiándolos a cadenas basadas en el tipo de datos del primer número que en realidad se declara como una cadena. Si fuera a quitar las comillas dobles del primer número, volvería a ser un número de tipo de datos. Si corro, entonces obtienes cinco más dos más tres, y el resultado de eso es 10. Eso podría tardar algún tiempo en envolverte la cabeza y eso está bien. Generalmente, no debe mezclar tipos de datos para menos operaciones. Si quieres hacer una operación aritmética con números, no pongas las cotizaciones. Si desea agregar cadenas juntas, asegúrese de usar comillas dobles. Si quieres combinarlo así, ahí es cuando empieza a ponerse un poco complicado, y muchas veces no te encontrarás haciendo esto a menos que sea un error. Realmente no necesitas preocuparte. El lado inverso de esto es cambiando el orden. Si probamos eso, podemos ver que los dos primeros números se suman, pero después porque está agregando una cadena al final, agrega cinco como cadena, si eso tiene sentido. Es lo mismo que si ponemos estos entre paréntesis y hacemos clic en Ejecutar. Todos ponemos los resultados de eso explícitamente como un cinco, obtendríamos el mismo resultado. Lo que está haciendo es resolver estos dos números sumarlos juntos en una operación aritmética y luego convertir eso en una cadena y concatenarlo a esa cadena. De nuevo, esto son cosas con las que no tengo que lidiar de manera regular porque sólo sigo la regla general. Si estoy haciendo aritmética, uso números. Si estoy concatenando cadenas, uso cadenas, simples como eso. Pero si intentas combinar cadenas y números, ahí es cuando empiezas a ver algo de este comportamiento funky. Esas son variables de JavaScript. En el siguiente video, vamos a hablar un poco más de operadores. Entonces te veré en el próximo. 8. Operadores de JS: En este video vamos a cubrir Operadores de JavaScript. Esto es realmente importante porque como mencionamos aquí, esto no significa iguales, significa asignación. Ese es uno de los errores comunes con los operadores pero vamos a profundizar en ello ahora mismo. Este signo igual significa asignación y ese es el operador más común que verás en JavaScript o prácticamente cualquier lenguaje de programación es que necesitamos asignar valores a variables. El signo igual es el operador de asignación y asigna un valor a una variable. El operador de adición se suma a números dados, pero también como vimos antes puede agregar para dar una cadenas también o un término adecuado sería concatenación. Combina cuerdas juntas para formar una cuerda más grande. El operador de multiplicación multiplica números, esto es cosas que debes saber tomando cualquier clase básica de matemáticas, suma, resta , multiplicación y división, también puedes hacer algo llamado módulo, que te da el resto después de dividir dos números. Aquí hay otros dos operadores, el operador de incremento y decremento en JavaScript. Como se puede ver aquí, estos operadores aritméticos están completamente descritos en el capítulo sobre Aritmética JS, que entraremos brevemente al final de esta lección. Al ir a los operadores de asignación de JavaScript, los operadores de asignación asignan valores a las variables JavaScript. El fácil es igual, pero en realidad hay algunos diferentes. Están estos operadores de taquigrafía que nos permiten básicamente ahorrar espacio. Obviamente no son tan esenciales, me refiero a la diferencia entre escribir esto y escribir esto no es enorme pero si quisieras ahorrar tiempo y básicamente agregar y a x, puedes hacer eso con esto. Si querías restar y de x y luego x ser la diferencia entre esos puedes usar ese operador. Como vimos antes, también tenemos operadores de cadenas JavaScript. Podemos concatenar cadenas usando el plus, y también podemos usar la taquigrafía más igual para concatenar cadenas así que lo que podemos hacer es tener una cadena aquí para el texto 1, y luego podemos agregarla usando este operador de asignación de concatenación . Sólo mostrémoslo como ejemplo. Tenemos espacio 'qué es un muy' y luego estamos sumando a ese 'lindo día'. Cuando damos salida al texto 1, obtenemos la cadena completa. Este es el equivalente de hacer esto, que es volver a poner en el texto 1 y luego poner en un plus para que obtengas exactamente el mismo resultado, es sólo taquigrafía. Volviendo a la página, podemos agregar cadenas y números juntos como vimos antes. Estos son ejemplos que cubrimos en una de las lecciones anteriores, no voy a repasarlo de nuevo pero lo importante a tener en cuenta aquí son los operadores de comparación. Como dije antes, una de las cosas que incluso como programador experimentado que a veces podrías olvidar y sobre todo como novato, es que el operador de asignación, el sencillo es igual, no representa igual a y para eso es ya sea doble igual o triple igual. Doble igual es el común, pero hay una ligera diferencia entre estos dos. Este evaluará como verdadero si el lado izquierdo es igual valor al lado derecho. Este sólo evaluará a verdadero si el lado izquierdo es igual al lado derecho y son del mismo tipo. Eso es un poco más técnico y podríamos meternos en eso más adelante pero por ahora esto debería ser suficiente para que hagas comparación de si dos variables son iguales. Este no es igual, por lo que solo pones un signo de exclamación y un signo igual y esto evaluará a cierto si el lado izquierdo no es el mismo que el derecho, y esto es lo mismo que este pero lo contrario, también podemos hacer mayor que, menor que, mayor que o igual a, menor que o igual a y luego también está este operador ternario. No sé si entraremos en operadores ternarios en esta clase en particular, pero si quieres aprender más sobre los operadores ternarios, definitivamente búscalo. Es sólo una forma más corta de hacer declaraciones sif-entonces básicamente. También tenemos operadores lógicos. Si revisáramos si dos afirmaciones eran ciertas, podríamos hacer. Ojalá haya un ejemplo aquí. No hay. Creemos aquí nuestro propio ejemplo. Vamos a probar algo. Pongamos en un comunicado, cinco es igual a cinco. Vuelve a ser verdad. Pongamos cuatro iguales a cinco, falso, eso es lo que esperábamos. Usando un no igual, si hago cuatro no es igual a cinco, deberíamos hacernos realidad. Eso es lo contrario. Podrías estar pensando, Chris, es obvio que cinco y cinco son iguales y cuatro y cinco no son lo mismo, ¿por qué estamos haciendo esto? Podemos reemplazar estos valores explícitos por variables. Si fuera a declarar una variable de x es igual a 10 y declarar una variable de y es igual a 20. Si yo fuera a poner en un comunicado como este, vuelve falso. Si fuera a poner en un comunicado como este, vuelve cierto porque no son lo mismo. Ahora donde entran los operadores lógicos es que puedo combinar dos declaraciones. Vamos a combinar los dos primeros. Tenemos cinco iguales a cinco, que sabemos que va a ser verdad pero queremos que la declaración sólo sea verdadera si x es igual a y también. Si ponemos x es igual a y, volverá falso porque la primera parte es verdadera, pero la segunda parte es falsa. Es sólo si ambos de esos es cierto, pero también podemos usar tuberías para todos. Si yo fuera a hacer esa misma declaración y poner en pipas en su lugar, pasa como cierto porque cualquiera de esos lados necesita ser cierto para que todo sea verdad porque es O. Esto es cierto, eso no es cierto, pero sólo uno de ellos necesita ser cierto para que todo sea cierto. También podemos usar nudos lógicos, que es un signo de exclamación. Puede que no quede claro para qué usaríamos eso en este momento, pero si fuera a poner en signo de exclamación verdadero, volverá como falso y si pongo en signo de exclamación falso, volverá como cierto porque básicamente está diciendo el opuesta. Está diciendo que no es verdad y aquí está diciendo no falso. Si voy y pongo entre paréntesis aquí, cinco es igual a cinco, eso saldrá como falso porque eso es cierto y esto es preguntar si no es cierto. Es básicamente todo lo contrario. Aquí abajo podemos ver el tipo de operadores y yo solo uso esto, el ejemplo más común que puedo pensar en usar esto sería comprobar si algo está indefinido. Usemos unos nombres de variables diferentes incluso hemos usado x antes. Sólo voy a llamarlo probablemente no el mejor nombre, sino variable. Si hago un tipo de aquí y corchetes abiertos puestos entre corchetes variables terminan la sentencia con el punto y coma, verás que vuelve como indefinido. tanto que si asigné a la variable un valor de uno que es solo un número y luego escribimos en tipo de variable, vuelve número y si tuviéramos que cambiar eso a una cadena, solo digamos hola y escribimos en tipo de variable, dirías que ahora es una cadena porque le asignamos una cadena. Tipo de operador es útil a veces para averiguar qué tipo de datos es su variable. Aquí abajo tenemos algún operador Bitwise. Honestamente, casi nunca tengo que usar estos. No los voy a cubrir, si quieres saber más sobre ellos hay todo un capítulo sobre Bitwise. Esa es una visión general de los operadores, también hay algunos menús diferentes aquí para aritmética y asignación. Recuerda hablamos del incremento y decremento. Sólo voy a desplazarme hacia abajo a eso ahora. Como puedes ver, medida que bajamos a ella, está el resto el que puedes probar, si quieres incrementar un número solo por uno, no tenemos que escribir la forma larga x es igual a x más 1. Podemos simplemente hacer x plus. Es una forma muy corta de hacerlo. Por ejemplo, si fuera a quitar esto poniendo un comentario, sólo serán cinco y puedo hacer exactamente lo mismo que eso haciendo x igual a x más 1, y volverán como seis. Esta x es igual a x más 1 es exactamente lo mismo que usar esto. Es sólo una taquigrafía. Solo comentemos eso otra vez y si iba a hacer un menos, ahora ya verás que es 5 menos 1, pero también podemos usar la taquigrafía para eso también, así que voy a quitar eso. En lugar de usar más plus en la x, haré un menos y ya verás que obtenemos exactamente el mismo resultado. A menudo vemos a este operador con bucles como una taquigrafía no tenemos que escribir en x es igual a x más 1 cuando podemos simplemente poner en este operador de taquigrafía. Volviendo a la página, podemos mirar la precedencia del operador pero estoy bastante seguro de que esto sigue el mismo orden que las matemáticas estándar. Si entiendes tus matemáticas entonces deberías estar de acuerdo con esto. Aquí puedes ver algo más técnico mumbo-jumbo. Honestamente, probablemente no necesites mirar demasiado en eso. El elemento final del menú entrará en es un resumen de los operadores de asignación. Como se puede ver aquí, existen todas estas diferentes formas de asignar variables y básicamente se acortan. Por aquí se puede ver que esto es lo mismo que esto. Estos son probablemente más los comunes que usarás en todo caso y eso es exactamente lo mismo que lo que hay en esta columna. Ya hemos cubierto bastante la asignación pero si quieres ver algunos de estos cortos puedes ir a este menú, honestamente no es tan importante. Si pones en tu código esto, realmente no importa. Es solo que si quieres ser un poco más complicado y ahorrar algo de espacio puedes hacerlo de esa manera. De eso es de lo que quería hablar sobre los operadores. Lo más grande y el mayor error de principiante es pensar que se trata de un operador de comparación. No lo es, es asignación y se puede ver que se está utilizando para asignación muy a menudo pero a veces cuando se llega a crear una declaración if then o una declaración de comparación, gente suele sentirse tentada a decir algo como esto, cinco es igual a cinco pero entonces como puedes ver aquí, piensa que estás asignando cinco a cinco y cinco es solo un número que no puedes asignar algo a solo un número explícito, tiene que ser una variable. Si quisieras comparar esos dos, tendrías que poner el signo de igual extra y así es como obtienes operador de comparación igual. Eso fue lo principal que quería atravesar, aquí se pueden ver algunos otros ejemplos de operadores. Todo esto está disponible en Internet para que puedas volver y referenciarlo si eres dueño de algo. En el siguiente video vamos a cubrir más sobre los tipos de datos. Te veré en el próximo. 9. Tipos de datos de JS: En este video, vamos a hablar más sobre los tipos de datos. Nuevamente, ya hemos cubierto un poco sobre los tipos de datos en las lecciones introductorias pero vamos a bucear un poco más profundo. Vamos al elemento del menú de tipos de datos J, S aquí y puedes ver aquí una vez que hayamos hablado antes, un número y una cadena, pero también es muy común en JavaScript tener objetos. Los objetos podrían ser algo difícil de mover la cabeza, pero si bajamos a aquí en el elemento del menú de objetos J, S, podemos ver que los objetos se reflejan en la vida real. En la vida real, un auto es un objeto y un auto tiene propiedades como peso y color, y métodos como inicio y parada. Se puede empezar a ver aquí que en JavaScript podríamos tener lo mismo, podríamos tener un objeto llamado auto y dentro de eso podríamos tener todas estas propiedades, y cómo definimos o cómo hacemos referencia a estas propiedades es con un punto y entonces su nombre para que podamos asignar un nombre de Fiat a un auto, podemos dar un modelo de 500, así sucesivamente, así sucesivamente. Entonces también podemos asignar métodos a un objeto también, por lo que podemos tener una función básicamente, en el auto que cuando llamamos car.start algo sucede. Pero de nuevo, estoy saltando un poco lejos, por delante de mí, volvamos al menú de tipos de datos, cómo definimos un objeto, voy a saltar por delante de los números y cadenas y bajar a unos cuantos otros código Booleanos. Básicamente los booleanos solo pueden tener dos valores, así que recuerden antes cuando estamos evaluando estas afirmaciones, igual que cinco son iguales a cinco? Sí, eso es cierto, cierto es un booleano, por lo que en realidad podemos asignar un booleano como valor a una variable. En lugar de sólo decir cinco es igual a cinco y poner eso fuera y decir que eso es cierto, en realidad podemos asignar una variable aquí y digamos que el código de la variable, ¿es cierto, en realidad podemos asignar los resultados del operador de comparación aquí, por lo que podemos decir es cinco lo mismo que cinco, si es así, asignar verdadero, ¿es cierto? En caso de no asignar falso, ¿es cierto? Ahora cuando escriba, ¿es cierto, volverá como cierto? Como verás, eso probablemente, no tiene mucho sentido ahora, pero en realidad me ayuda a crear una operación show ahead, no hemos entrado en si entonces afirmaciones antes, pero esencialmente, si quiero crear una lógica aquí con si, podría decir simplemente, es cierto y luego ejecutar algún código en lugar de escribir en la comparación explícita que teníamos antes de cinco es igual a cinco. Ahora para esto, es muy pequeño, así que realmente no importa, pero tal vez tienes una declaración enorme y quieres guardar la declaración grande como otra variable, puedes hacer eso y entonces ese tipo de datos sería booleano. Si comprobamos ahora, tipo de es cierto, y volverá booleano. El número uno son matrices, y las matrices podrían tomar un poco de tiempo acostumbrarse pero son comunes en cada lenguaje de programación, podemos asignar un grupo de valores a una variable y luego llamarlas en base a índices. Para demostrar eso ahora mismo, vamos a despejar mi consola y hacer el ejemplo aquí. En lugar de reinventar lo que he hecho aquí, creo que este es un buen ejemplo. Ahora tenemos autos, si hemos puesto autos, vamos a obtener cómo la consola representa una matriz, es así y el primer número realmente nos dice cuántos valores hay en la matriz o cuántos elementos hay en ahí y luego podemos hacer clic en esto para ver los diferentes ítems en su índice. Este ejemplo es bastante simple, es bastante fácil ver que, ese es el primero, Saab es el primer valor, ese es el segundo valor, ese es el tercero y en realidad una de las cosas confusas aquí es que el primero está representado en realidad por ceros así que no se confundan. Si escribo en autos con un soporte cuadrado, luego cero, luego termino el soporte cuadrado y luego meto un punto y coma y golpeo entrar, se le ocurrirá Saab. Esa es una confusa, serías también desarrolladores, es que el primer valor en una matriz es cero, por supuesto, si quisiéramos el siguiente, solo escribimos uno y luego obtenemos Volvo. El poderoso de esto es que si tenemos un valor de rifle, realidad podemos recorrer por ellos y hacer cosas similares en todos los valores y lo verás en un video posterior, pero una matriz es lo que podríamos darle a un bucle, para recorrer todos estos y crear algún HTML en la página. Las matrices son muy comunes y muy poderosas, así que definitivamente algo bueno para aprender. Ahora estamos volviendo a nuestro buen amigo, el objeto JavaScript. Este probablemente tomará un poco más de tiempo para explicar porque es el tipo de datos más complejo que hay, y la razón por la cual es porque tenemos un par de valores de nombre separados por comas, así fue almacenar muchas cosas en la única variable o el potencial para almacenar muchas cosas en la única variable. Aquí tenemos un objeto y un objeto que podemos definir con estos corchetes rizados y como puedes ver aquí, tenemos pares de valor de nombre o pares de valor clave, y semánticamente eso es mucho más bonito. Si volvemos al ejemplo él y los objetos, ven aquí cómo somos capaces de agarrar el nombre de un auto o asignar el nombre de este auto como Fiat. Bueno, si bajamos aquí y vemos el ejemplo, sólo voy a copiar eso en mi consola, despeje esto, si corro eso, ahora puedo llamar a car.type y se le sube un Fiat. Puedo ejecutar car.color y se le ocurre el blanco, y esto es mucho más bonito que lo que teníamos antes con el uso de números de índice, porque tal vez hay una gama de propiedades diferentes y no tiene sentido alinearlas. No necesariamente vas a bucear a través de ellos de manera iterativa, solo quieres poder cavar en un coche en particular y obtener ciertos atributos, ahí es donde los objetos son muy buenos. Lo que podemos hacer aquí sin redefinir todo el objeto es que podemos cambiar el valor de algunos de estos, así que podría ir car.color igual, digamos negro en lugar de blanco. Ahora si vuelvo a salir auto, puedes ver así es como tu consola representará un objeto para ti, y si hago clic en esto como lo hizo con matrices, en lugar de estos números de índice, tenemos nombres. Tenemos color negro, modal 500 tipo Fiat, y así que esa es una buena forma de lo que podemos trabajar con objetos en JavaScript. Estoy rebotando entre tipos de datos en objetos, pero los objetos es un tipo de datos muy importante por lo que estos van de la mano y aquí hay algo de información sobre los objetos y luego va más detalle en eso. Tenemos tipo del cual hablamos de indefinido, cual hablamos de valores vacíos así que si solo pusiéramos una cadena vacía, intentemos eso ahora. Puede que esté pensando que podría ser indefinido porque la cadena está vacía pero en realidad está definida todavía como una cadena porque ponemos esas comillas. Es una cadena vacía de todos modos, pero sigue siendo una cadena. Otro valor es nulo, y null es básicamente nada. Como dice aquí, desafortunadamente en JavaScript el tipo de datos de null es en realidad un objeto. Puede ser un poco confuso y puedes considerar incluso un error en JavaScript que un tipo de nulo es un objeto, solo debería ser nulo, pero básicamente puedes vaciar un objeto configurándolo en nulo. Si fuéramos a usar este ejemplo, tenemos una persona que obviamente es un objeto porque aquí tenemos corchetes rizados y tenemos pares de valor de nombre, pero entonces podemos asignar un valor de null a este objeto, y si agarrar el tipo de ella, sigue siendo un objeto. Esto es solo algunos quarks dentro de JavaScript, esto no sería lo mismo en la mayoría de los otros lenguajes de programación, pero es solo una cosita para cubrir con JavaScript. Es importante tener en cuenta que también puedes vaciar un objeto configurándolo en indefinido, y la diferencia entre indefinido y nulo es un poco matizada, pero básicamente, el tipo de indefinido va a ser indefinido, pero el tipo de null va a ser un objeto, como hablamos aquí arriba. Aquí abajo recuerdan que aprendimos sobre el uso de los operadores de comparación que tienen dos signos iguales en ellos y tres signos iguales en ellos. Ahora bien, si los miramos valor contra un valor, se evalúa como verdadero, pero si los miramos, ¿son el mismo tipo de datos? Si bien definitivamente no lo son porque acabamos revisar el tipo aquí arriba y lo diferente, por lo que saldrá como falso. Esto se está metiendo en la tontería y honestamente, no necesitas estar demasiado familiarizado con esto, pero es solo algo que cubrir y aquí hay algunos ejemplos más complejos, pero ahora está empezando a meterte en las cosas más complejas. Básicamente, es importante saber qué son los objetos y es importante poder llamar a métodos sobre objetos y también entender las propiedades de los objetos y es por eso que solo cavaremos un poco más en los objetos aquí. Como puedes ver, tenemos una decoración del auto aquí con la que trabajamos antes, también podemos romper eso sobre múltiples líneas como esta, así que en lugar de auto, tenemos a persona aquí y podemos establecer atributos de esa persona. Nuevamente, como mostramos antes, podemos usar un punto y luego el nombre de la propiedad para acceder a una propiedad en ese objeto, podemos asignarle valores o simplemente emitir los resultados, también podemos hacerlo de esta manera a través un cuadrado corchete y luego poner el nombre en una cadena, eso también es una opción, por lo que esto es lo mismo que este y también podemos poner en métodos como este. Todavía no hemos cubierto funciones, pero así es como declararías función, podemos ponerla dentro de un objeto y asignarlo al nombre de algo. No voy a profundizar en esto porque aún no hemos cubierto funciones pero eso es lo que está pasando aquí. Aquí hay un ejemplo común que encontrarás mucho en entrenamientos de JavaScript, es el ejemplo de nombre completo, esto es solo una función simple que devolverá la concatenación de dos de las propiedades del objeto. Tenemos nombre y apellido, y tal vez no queremos especificar un nombre completo porque se basa en los valores de estos atributos anteriores. Lo que podemos hacer es definir un método que tome el primer nombre, agregue un espacio en el medio, y luego emita el apellido, y podemos usar esta palabra clave para hacer referencia al objeto actual en el que nos encontramos. Cuando estamos dentro de este objeto, aún no se ha definido completamente, por lo que no queremos usar la palabra persona en este momento, así que mientras la estamos definiendo, nos referimos a este objeto en el que actualmente estamos usando la palabra clave, esto. Cuando cambiemos el HTML interno de esta P a los resultados de este método que hemos definido aquí, obtendremos el nombre con un espacio y después el apellido. Ojalá eso no sea demasiada información, nuevo, entraremos en funciones, creo que incluso podría ser el siguiente video, pero definitivamente nos meteremos en ello muy pronto. Desplazándose hacia abajo hasta el final de la página, podemos ver algunas cosas más complejas aquí, no todas tan importantes con cubrir los conceptos básicos en este momento. Esos son los principales tipos de datos, de nuevo, cubrimos número y cadena en lección anterior y los booleanos no deberían ser demasiado difíciles de entender, solo hay dos valores posibles, verdadero o falso, los objetos podrían tomar algún tiempo para tener la cabeza alrededor y las matrices son muy comunes. Si es necesario, vuelve a esta página o a cualquier otra página aquí hay un menú completo sobre matrices aquí y podríamos profundizar en ella en una lección posterior. Si necesita tener claro alguno de estos, los principales, por supuesto, un número, cadena, objeto y array. Eso es un poco sobre los tipos de datos, en el siguiente video, realidad vamos a sumergirnos justo en las funciones, lo cual es bueno porque te tiré al fondo con poner en una función aquí. En el siguiente video, vamos a cubrir funciones. Estaremos explicando más sobre lo que está pasando aquí y sacándolo fuera del contexto de un objeto. Te veré en el siguiente video. 10. Funciones de JS: Muy bien, entonces en este video vamos a cubrir algo que es súper importante en JavaScript, y eso es Funciones. Entonces si hago clic en el ítem Menú para Funciones aquí, podemos aprender qué es una función y qué hace. Por lo que una Función es solo un bloque de código diseñado para realizar una clase en particular y se ejecuta cuando algo la invoca. Básicamente, lo que podemos hacer es poner un montón de código en una función y luego podemos codificarlo en diferentes lugares de nuestro proyecto. Ahora esto es importante si necesitamos reutilizar el código, por lo que tenemos una función común. Ahí voy usando la palabra naturalmente. Pero sí, si tenemos algo común que necesitamos ejecutar regularmente, no tiene sentido escribirlo cada vez que necesitamos hacerlo. Es mejor definirlo una vez y luego ejecutarlo varias veces simplemente llamando a esa función. Otra cosa que podemos hacer es enviar cosas a través de la función para que podamos pasar variables así. Entonces aquí hay un ejemplo muy básico. Probémoslo nosotros mismos. Básicamente estamos tomando lo que el primer argumento que ponemos a través de esta función y el segundo argumento que ponemos a través de esta función, y estamos devolviendo el producto de ambos, y el producto significa que estamos multiplicando los dos juntos. Entonces, ¿de qué vienen estos dos números? Bueno, cuando en realidad llamamos a la función, podemos poner aquí lo que se llama argumentos. Entonces el primer argumento, el cuatro, irá justo aquí, en el p1 y el segundo argumento será tres e irá justo aquí. Entonces básicamente lo que hace esta función es que toma el primer número y el segundo número y los veces juntos y genera cuál es el resultado de eso. Entonces si ponemos cuatro y tres, obtenemos 12, porque eso es lo que hemos definido esta función para hacer. Por lo que toma entrada aquí. Entonces voy a poner 10 ahí en su lugar, correr eso, y ahora verás que son 30. Pero claro que nos estamos adelantando un poco. Es posible que algunos de ustedes ni siquiera hayan visto una función antes, y así que vamos a cubrir brevemente la sintaxis. Entonces definimos una función estableciendo primero la palabra función, y luego ponemos el nombre de esa función, si no hay argumentos que vayan a entrar. Entonces tal vez simplemente declaramos explícitamente estos números. Siempre va a regresar 10 veces tres. Entonces no necesitamos estos argumentos, y entonces lo que haríamos es que todavía necesitamos tener un corchetes abiertos y estrechos, pero no tenemos que poner nada ahí dentro. Entonces tenemos unos corchetes rizados para abrir el bloque de código. Recordando la lección de sintaxis que estábamos hablando de bloques de código. Todo dentro de estos dos corchetes rizados formará parte de la función. Para que puedas poner tantas cosas complejas como quieras aquí, definir variables y todas esas cosas. Pero al final, devolverá un conjunto de valor y podemos devolverlo usando la palabra clave Return. Entonces ahora obtendremos el mismo resultado, pero ya no podemos poner argumentos dinámicos. Entonces si pongo cinco y 10, no pasará nada, y si revisamos nuestra consola, incluso podría haber un error porque en realidad no estamos aceptando ningún argumento aquí. Entonces esa es básicamente la sintaxis de una función, y si quieres aprender más sobre la sintaxis aquí, puedes ver aquí hay un ejemplo. Tienes la función de palabra clave, tienes el nombre de la función, tienes un cierre abierto y un cierre final y tienes tantos parámetros como quieras aquí. Puedes poner una cantidad infinita estoy bastante seguro, probablemente no querrías poner un 100 parámetros, pero creo que no puedes hacerlo si realmente quisieras. Entonces por supuesto este es el código a ejecutar entre estos corchetes rizados. Aprendimos sobre la declaración de retorno en ese ejemplo, y aquí mismo habla de por qué uso la función. Por lo que como mencioné antes, quizá queramos reutilizar el código. Por lo que definimos código una vez y lo usamos muchas veces. En el ejemplo anterior, fácilmente podríamos haber hecho esto en lugar de tener una función y fácilmente podríamos haber hecho sólo cuatro veces tres, y saldría el mismo resultado. No tenemos que escribir todo esto, pero tal vez estamos realizando algún tipo de cálculo complejo. A lo mejor estamos revisando un modelo de base de datos cuando necesitamos hacer una conexión a base de datos, tal vez podamos, pero no queremos poner todo eso aquí. Entonces tal vez solo queremos poner, MyFunction y poner algunas a variables y luego cualquier cálculo complejo que suceda en esta función, todo lo que hace es devolver algo y va a entrar justo aquí. Pero de nuevo, es difícil demostrarlo sin un ejemplo complicado en este momento. Pero solo tienes que saber que estas funciones pueden hacerse bastante grandes, y por eso tiene mucho sentido que necesitamos poner todo el código en una sola función y luego podemos reutilizarlo un montón de veces y también usarlo mucho más fácilmente, sabiendo lo que nos va a volver. Entonces aquí hay otro ejemplo. Podemos crear una función sencilla llamada toCelsius, y cuando lo haga es, tomará un parámetro, un argumento, que será la temperatura en Fahrenheit, y luego tomará la temperatura Fahrenheit y realizará el cálculo necesario para convertirlo en Celsius. Entonces todo lo que tenemos que hacer aquí es llamar a una función de Celsius correr por un perímetro de la temperatura en Fahrenheit y luego nos enviará de vuelta la temperatura equivalente en Celsius. Entonces ese podría ser un ejemplo más práctico para ustedes, pero se puede conseguir mucho más complejo. Es importante tener en cuenta que el corchete de apertura y cierre es esencial para invocar la función. Aquí mismo, si solo pongo toCelsius sin poner el abierto y el cierre, aunque no estés poniendo nada dentro de él, todavía necesitas ponerlo ahí porque de lo contrario sólo va a devolver que la definición de función más bien que el resultado de la función. Eso es quizás un poco de diferencia de matices para los desarrolladores principiantes. Pero sí, solo debes saber que no funcionará a menos que pongas entre corchetes de apertura y cierre. También puede utilizar funciones para asignar variables a valores. Entonces lo que realmente podemos hacer es tomar los resultados de esta función o lo que sea que esta función devuelva y asignarlo directamente a una variable justo aquí. Por lo que esto tomará 77 grados Fahrenheit y lo convertirá a Celsius y luego lo pondrá directamente en esta variable. Entonces podemos ponerlo en una cadena aquí y obtener el resultado, y también podemos saltarnos este paso donde lo asignamos y simplemente ponerlo en línea. Esa es también una opción. Eso es básicamente funciones. Se vuelve un poco más complejo a medida que empiezas a usar devoluciones de llamada y cosas diferentes. Pero por ahora, ese es el funcionamiento básico de una función. Tienes parámetros o tal vez ni siquiera parámetros, y tienes un bloque reutilizable de código en el medio, y luego lo llamas usando ese nombre de nuevo, pero asegurándote de usar esos corchetes de apertura, cierre. Entonces eso son funciones. En el siguiente video, vamos a cubrir Scope, que ahora sabemos cómo funcionan las funciones. Es importante mirar lo que sucede cuando definimos variables, declararemos variables más bien fuera de funciones y dentro de ellas, y no solo funciones sino bloques de código en general. Entonces te veré en el siguiente video. 11. Rango de JS: Entonces en este video vamos a cubrir algo que tal vez no tan obvio mientras estás desarrollando JavaScript, pero muy importante y en realidad podría tropezarte a veces mientras estás desarrollando para JavaScript, y eso es la idea de alcance. Entonces vamos a entrar en el elemento de menú para alcance, y veremos aquí en JavaScript hay dos tipos de alcance, Local y Global. Ahora ninguna de estas teorías va a tener mucho sentido sin un ejemplo. Entonces vamos a sumergirnos directamente en un ejemplo aquí mismo. Las variables locales de JavaScript son variables declaradas dentro de una función JavaScript. Por lo que se vuelven Locales a esa función y tienen un alcance local. Por lo que sólo se puede acceder dentro de la función. S Este es un ejemplo bastante explícito. Si pongo un código a CarName aquí arriba, no funcionará no está declarado en ese ámbito. Pero puedo usarlo aquí porque está en el alcance de este bloque de código. El alternativo es global, y así en este momento estoy haciendo una variable. Entonces estoy declarando y asignando un valor a una variable en lugar de Volvo a nombre del coche, y luego en mi función, se declara en el Alcance global. Por lo que realmente puedo entrar en mi función y cambiarla, y eso va a cambiar la variable en el ámbito global. Entonces esto podría sonar obvio ahora mismo, pero una vez que empecemos a usar ambos en el mismo contexto, entonces puedes empezar a ver cómo te podría tropezar. Entonces aquí abajo, puedes ver que si asignas un valor a una variable que no ha sido declarada, automáticamente se convertirá en una variable global. Por lo que este es interesante dentro de JavaScript. Si en realidad no declaramos esto primero con el uso de la palabra clave var, ésta en realidad será una variable global, pesar de que en realidad no la hemos declarado, incluso en el ámbito local o en el ámbito global. Ahora, hay un modo que puedes usar en JavaScript llamado Modo estricto. En modo estricto, siempre necesitas declarar tus variables, pero no necesitamos alborotar demasiado por eso. Siempre es buena idea declarar tus variables. Entonces si quieres algo como esto, la mejor manera de hacerlo sería poner una declaración para la variable en el ámbito global ya. Eso te ahorrará por ser golpeado en estricto, pero también es bueno notar, como si fuera una buena oportunidad para hacer explícitos tu declaración y tu alcance. Entonces aquí es obvio que estaban en nuestro alcance global, estamos declarando esa variable en el ámbito global. Entonces ahora es accesible globalmente pero entonces le estamos asignando un valor en esta función, pero también podemos cambiar ese valor y hacer que ese valor salga fuera de esta función también porque es global. Esa también es una razón por la que, recuerden, miramos cómo se puede definir una variable como esta, y luego en una nueva línea, darle un valor como este. A menudo siempre estás asignando un valor a una nueva variable. lo que muchas veces no tiene sentido como por qué lo declararías y lo asignarías en un paso diferente, pero cuando quieres poner explícitamente algo en el ámbito global como este, mucho sentido. Entonces si lo declaráramos aquí abajo, sólo estaría disponible en el ámbito local, pero si me quito eso y lo pongo aquí arriba, ahora, lo estamos declarando en el ámbito global y capaces modificarlo en la función pero sí sigue siendo global. Esperemos que eso esté empezando a tener sentido de nuevo, medida que adquieras más experiencia con esto, empezará a solidificarse un poco más. Esto es algo sobre el contexto del HTML. El Alcance Global en HTML es el objeto de ventana, no es importante que necesites entender eso. Pero esencialmente la cosa con alcance es si, digamos por ejemplo, tienes este ejemplo y solo en la función estás asignando un valor, pero querías usar ese valor fuera de esa función. Así que digamos por ejemplo, yo quería, vamos a hacer sólo documento. Sé que dije que no uso eso muy a menudo, pero en este contexto nos permitirá sacar algo en la página de inmediato. Si hago documento correcto CarName, verás que no sale nada, y la razón por la cual es porque está en el ámbito local. Entonces si fuera a volver a poner eso aquí y ejecutar la función, verás que el CarName obtiene salida. Si lo volvemos a poner aquí en nuestro ejemplo que teníamos antes, eso no funcionó, y en lugar de declarar aquí la variable, acabamos de quitar la declaración de esa parte de la asignación y la declaramos fuera de la función en el alcance global, ahora, somos capaces de hacer eso. Entonces es un detalle muy pequeño, supongo que en JavaScript, pero es importante notar porque no saber algo como esto y estar atrapado aquí con como, “Bueno, ¿por qué no puedo generar este nombre de variable?” Podría tropezarte si no entiendes alcance. Por lo que es importante saber. Eso es más o menos lo diré en alcance. En el siguiente video, vamos a cubrir Eventos. Entonces te veré en el siguiente. 12. Eventos de JS: En este video, vamos a presentar brevemente EventListeners. EventListeners es algo que entramos en mayor detalle una vez que entraremos en la sección HTML DOM. Esta es la forma más común de declarar un EventListener. Pero ya has visto un ejemplo de un EventListener en línea así que pensé que solo entraríamos y lo presentaríamos ahora mismo. Ahora bien, si no tienes claro qué son los eventos, básicamente son cosas que suceden en la página y sé que eso es vago, pero básicamente necesitas configurar un EventListener en cualquier momento que quieras que suceda algo, cuando algo más sucede. Por ejemplo aquí, cuando una página web ha terminado de cargarse, puede hacer que algo suceda. Cuando se cambia un campo de entrada, puede hacer que algo suceda, y cuando se hace clic en un botón HTML, también se puede ejecutar algún código. En HTML, en realidad se te permite poner un EventHandler en línea usando un atributo. El sintaxis o la forma en que haces esto, es poniendo el nombre del evento como un atributo igual, y luego pones como cadena la sentencia que quieres ejecutar. Aquí hay un ejemplo aquí abajo el cual hemos visto algo similar antes, somos fácilmente capaces de ver que queremos que esta línea de código ejecute en el evento onclick en este botón en particular. Es muy explícito porque el código está indicado justo en el botón. Esta no siempre es la mejor manera de hacer las cosas, como vimos en la clase anterior en HTML y CSS, hay una razón por la que querrías poner tu código en otro archivo en lugar de inline en tu elemento real, especialmente si quieres que ejecute cierto JavaScript en múltiples elementos. Generalmente es más limpio tener un archivo separado y configurar un EventListener. Al entrar en este video aquí, cuando hablamos de EventListeners en el contexto del DOM, verás que somos capaces de apuntar a un botón o cualquier número de elementos y luego ejecutar una declaración basada en ciertos eventos. Entonces si nos desplazamos hacia abajo, podemos ver algunos eventos HTML comunes. En ocasiones si solo tienes un evento en la página y tal vez no quieras escribir un documento JavaScript completo, solo puedes tener un botón y dar click en él solo para obtener un determinado resultado. Pero a medida que tu código se vuelve más complejo, lo mejor es moverlo a su propio archivo. Tan breve pequeña lección aquí sobre eventos de JavaScript, quería explicar rápidamente lo que hemos visto antes con este método onclick, pero esencialmente, lo que hay que saber es más en esta sección que vamos a cubrir una vez que entremos en HTML DOM. Eso es todo lo que quería cubrir en este video en particular. En el siguiente video, vamos a buscar más profundamente en matrices y cómo podemos iterar a través de arrays, a través de bucles. Entonces te veré en el siguiente video. 13. Matrices de JS: En esta lección, vamos a profundizar en uno de los tipos de datos que descubrimos antes, que eran arrays. Vamos a aprender más sobre cómo funcionan las matrices, y también aprender sobre bucles también porque los bucles y las matrices suelen ir de la mano. Entonces para empezar, vamos a hacer clic en el elemento del menú de matrices JS aquí. Como se puede ver, ya hemos visto este ejemplo antes. Podemos desplazarnos hacia abajo y podemos ver que podemos definir una nueva matriz no solo poniendo entre corchetes y los diferentes valores separados por comas, sino que también podemos ponerla como una nueva matriz de tipos de datos y luego como parámetros dentro de esa función. Ahora si bajo, puedes ver aquí cómo apuntamos a los diferentes elementos en una matriz, recuerda que cero es el primero. Si quisiéramos poner el primer elemento del array de autos en el HTML interno de un elemento del ID de demo, lo haríamos así. Aquí está de nuevo, cero es el primer elemento en matriz, uno es el segundo. Los índices de matriz comienzan en cero. Eso podría dispararte un poco porque no es lo más intuitivo para alguien que no es programador. Aquí abajo, también podemos acceder a la matriz completa y veamos cómo se vería eso. Aquí mismo puedes ver que JavaScript es lo suficientemente inteligente como para saber que es un conjunto de tres cadenas, y solo genera todas las cadenas juntas como una sola cadena. Se sale como Saab coma Volvo coma BMW sin ningún espacio de palabras. La otra cosa que es interesante de JavaScript es que las matrices son objetos. Si vamos a utilizar el tipo de operador en JavaScript, devuelve un objeto para matrices. Eso plantea la pregunta de, ¿cuál es la diferencia entre una matriz y un objeto? Debe pensar en las matrices como usar números para acceder a sus elementos. Persona cero aquí devolverá Juan, persona entre corchetes uno devolverá Doe, y persona entre corchetes dos devolverá 46. tanto que los objetos utilizan nombres para acceder a sus “miembros”. En el caso de las matrices, para lo que lo estás usando es algo que sigue un flujo lineal. Como veremos, a medida que vamos más abajo y hablamos de bucles, no necesariamente querrías recorrer todo esto, tal vez solo quieras agarrar un borde, no hay un orden lineal particular para estos campos. Pero tal vez con esto lo hay, sé que probablemente suena un poco abstracto, pero verás a medida que entramos en bucles, tiene mucho más sentido recorrer una matriz que un objeto. La otra cosa que es genial de las matrices en JavaScript, es que están construidas en propiedades y métodos de matriz, por lo que si queremos encontrar la longitud de cualquier matriz, podemos usar la propiedad de longitud, y si queremos ordenar nuestra matriz, podemos hacerlo mediante el uso del método de ordenar. Aquí podemos ver un ejemplo de la propiedad length, y tenemos una matriz con obviamente cuatro elementos aquí, solo podemos llamar a longitud de punto en esa matriz y obtenemos la longitud de esa matriz. Como dije, íbamos a hablar de bucles ya que se relaciona con matrices, y la mejor manera de recorrer una matriz es un bucle “for”. Voy a abrir esto, y se puede ver aquí, tal vez queremos formatear esta lista como una lista HTML, por lo que podemos usar un bucle “for”. Ahora lo que está pasando aquí, quiero separar el bucle aquí, lo que sucede es que la primera declaración en el bucle “for” establece un punto de partida para este iterador, así que cero, y luego esta es la declaración booleana, que mientras sea cierto, el bucle continuará, el bucle continuará, y esto es lo que quieres que suceda cada vez que se ejecute el bucle. Se ve realmente complicado pero en realidad es bastante sencillo. Es sólo decir que inicia el marcador en cero, aumenta el marcador en uno cada vez que va el bucle, y sigue funcionando siempre y cuando ese número sea menor que Flen, y Flen aquí arriba es solo la longitud de la matriz. Básicamente diciendo, sin el Mumbo Jumbo, es agregar este ítem de lista para cada fruta en esta matriz frutal. Aquí mismo, se puede ver que podemos reemplazar el número de índice por una variable que está recorriendo. En el primer bucle va a ser cero, y genera el valor en la posición cero, que recuerdan es la primera posición, y luego hace un segundo bucle y este número se convierte en uno, por lo que sale Naranja, y luego se convierte en tres, da salida a Apple, y la razón por la que se incrementa en uno cada vez es porque hemos utilizado este operador aquí. El enunciado aquí podría ser confuso para los programadores novatos, pero es una convención similar cada vez que lo haces, básicamente es iniciar el marcador fuera de la forma que quieres, esto es bastante estándar al final, y solo tener un booleano para determinar por cuánto tiempo quieres ejecutarlo. Aquí, si recuerdas, está el operador de concatenación, así que estamos empezando una lista desordenada, y estamos terminando en una lista desordenada aquí, y en medio estamos agregando tantos elementos de lista como necesitemos pasar por el lista completa de frutas aquí en una matriz. Ahora puedes ver cómo las matrices y los bucles funcionan bien juntos. Ahora bien, si esto fuera un objeto, tal vez no tendría sentido recorrer toda una lista, y ahí es quizás donde objetos y matrices, la diferencia entre ellos se vuelve un poco más obvia. Volviendo a nuestra página en matrices Javascripts, podemos usar algunos métodos para agregar elementos de matriz. Una de las más comunes es push. Podemos agregar Lemon a esta matriz, Simplemente irá a la derecha al final. Podemos usar el método de empuje, y luego el valor que queremos poner. Si solo echamos un vistazo aquí, estamos agregando Lemon a la matriz, y luego estamos dando salida a toda la matriz a la pantalla, solo volveré a ejecutar eso. Como se puede ver aquí, tenemos una función vinculada a un evento en un botón, por lo que cada vez que hacemos clic en este botón se ejecutará esta función, y si bajamos aquí, qué pasa con la función, se necesita esta matriz que aquí dividimos, que son frutos. Empuja un elemento extra en el extremo, y luego cambia el HTML interno de nuestro elemento con el ID de demo, que está justo aquí, a la matriz completa que acaba de ser cambiado. Está pasando mucho ahí, pero ojalá eso tenga sentido. Volviendo aquí, podemos ver que hay otra forma de hacerlo, que es mediante el uso de un valor dinámico para el índice. Yo recomendaría que solo lo mantuviera simple, y también podemos afirmar exactamente qué posición en la matriz queremos colocar nuestro elemento. Por ejemplo, si quisiéramos cambiar sólo Banana, podríamos hacerlo simplemente poniendo cero aquí. Demostrémoslo ahora. Lo que tenemos aquí, es que tenemos una matriz y si contamos aquí como posición 0, 1, 2, 3, y como decía en la posición 6, queremos a Lemon, y luego estamos calculando la longitud de esa matriz entera, estamos creando una variable de texto vacía solo para empezar, y luego estamos recorriendo las diferentes frutas, poniéndolas en texto, y luego agregando una etiqueta de break después de ella. Entonces una vez que se hace ese bucle “for”, estamos poniendo ese texto como el HTML interno de un elemento por el ID de demo que está justo aquí. Ahora lo interesante que verás aquí, es que crea estas otras dos posiciones porque básicamente como te he mostrado justo aquí, estamos contando para conseguir el número de índice. Si comienzas a ponerte en la posición 6, que en realidad es la posición 7, entonces hay una brecha obvia aquí. Esa es la posición 0, 1, 2, 3, 4. Cinco y luego seis. Lo que sucederá es, verás que tu matriz estará indefinida en esos dos índices que no se han definido. Aunque no me preocuparía demasiado por esto, porque no veo esto muchas veces. Si lo quisieras, solo para agregar limón al final de una matriz, todo lo que harás es simplemente cambiar esto para empujar, deshacerte de los iguales, y luego cualquier índice que venga a continuación, le asignará ese elemento. Si corro eso, entonces no te dan lo indefinido. Pero si quieres indicar específicamente a dónde quieres que vaya en la matriz, entonces cualquier cosa antes que no haya sido definida aparecerá como indefinida. La otra cosa a demostrar aquí es si querías cambiar alguno de estos, solo necesitas saber que es el número de índice. Digamos por ejemplo, queríamos cambiar de naranja a limón. Eso está en la posición 1, y si corro eso, ahora verás que nuestra naranja se ha cambiado un limón antes de empezar a poner el array a la pantalla. Volviendo a la página, hay otra cosa llamada Matriz Asociativa. Pero en JavaScript, no admite matrices con índices con nombre. Si haces algo como esto donde pones el nombre como índice, JavaScript redefinirá la matriz a un objeto estándar. Esto no es algo de lo que debas colgarte si eres nuevo en la programación. Básicamente, otro lenguaje es que hay algo llamado una matriz asociativa, y esa matriz asociativa le permite elegir elementos en una matriz por un nombre. Mientras que en JavaScript, si estás haciendo una matriz, es solo por índice, lo contrario, solo usas un objeto. Digamos por ejemplo aquí, hemos definido una matriz de personas y le hemos dado valores en tres posiciones diferentes, y si obtenemos la longitud, devolverá tres, y si miramos la posición 0, es obvio que será John porque lo definimos aquí mismo. Pero si hacemos lo mismo y no usamos índices numerados, sino nombres cadenas en su lugar, entonces no podemos usar este índice numerado, y en realidad terminará siendo un objeto. Demostremos eso en nuestra consola. Tengo mi consola abierta aquí. Si fuera a definir una matriz, y luego dar sus valores basados en índices que se basan en una cadena, no un número, y presiono eso. Ahora si escribo Persona, surgirá comportándose como un objeto, y en realidad no podemos apuntar al primer atributo usando cero. Si hice eso, y saldrá como indefinido. Básicamente, todo lo que necesitas saber con eso es que JavaScript no admite matrices con índices con nombre. Si estás tratando de hacer eso, lo que estás haciendo es un objeto. Eso por supuesto plantea la pregunta de ¿cuál es la diferencia entre matrices y objetos? Aquí hay una manera realmente simple de entenderlo o de resumir la diferencia, en las matrices de JavaScript usan índices numerados y los objetos usan índices con nombre. En el ejemplo de auto antes, el nombre, la marca del auto, los apuntamos tomando su nombre, y sacando eso. Voy a volver a esa lección, podemos conseguir el nombre del auto. Pero si quieres que recorra de manera lineal usando índices numerados, entonces usarías una matriz. Aquí es sólo decir lo mismo de una manera diferente. Aquí habla de cómo puedes usar el nuevo constructor para hacer una matriz, probablemente deberías evitar hacer eso. Intenta hacerlo de esta manera, no de esta manera. Si vamos más abajo, nos estamos metiendo en territorio aún más complicado. Si el tipo de operador devuelve un objeto para una matriz, entonces ¿cómo sabes que es una matriz? En realidad hay un método aquí que puedes usar para averiguar si una matriz es en realidad una matriz o un objeto. Pero de nuevo, realmente no necesitas usar eso muy a menudo. Lo que quiero que entiendan es lo que es una matriz? ¿ Cómo actualizar una matriz? ¿ Cómo generar una matriz? ¿ Cómo hacer un bucle a través de una matriz? ¿ Cuál es la diferencia entre una matriz y un objeto? Técnicamente, las matrices son objetos, pero la diferencia entre lo que mostramos antes en esta lección de objetos de JavaScript, lo que estamos haciendo ahora con matrices. Por último, antes de que terminemos en las matrices, hay algunos otros elementos del menú que tal vez quieras revisar. En esta página, puedes enterarte de otros métodos que puedes aplicar en matrices a string. Se puede pop en lugar de empujar, que quita un elemento, empuje que vimos antes. Podemos cambiar, que es lo mismo que el pop, que lo quita del frente. Hay desmutación, y vimos cómo cambiaba elementos. Si quieres aprender más sobre esto, hay muchas maneras diferentes en las que podemos afectar las matrices, pero me temo que pasaré demasiado tiempo en ello si paso completamente por esta página, también está el método de ordenar matrices. Si quieres saber cómo tomar tu lista aquí que has almacenado en una matriz, y ordenarla de varias maneras, por formas numéricas, comparándola con cierto booleano, haciendo todo tipo de cálculos complejos, definitivamente vuelve aquí y echa un vistazo a estos menús. Pero por ahora, todo lo que quiero que sepan acerca de las matrices es que son solo una forma de almacenar múltiples valores en una sola variable. Se puede acceder a esas diferentes variables mediante el uso de un índice numerado. Chicos, así que eso fue todo lo que quería hablar en matrices en cuanto a tipos de datos que tenemos en JavaScript, tenemos cadenas, números, objetos, arrays, esas son probablemente las más comunes, pero sí tenemos fechas, matemáticas , booleanos, que cubrimos antes. No quiero entrar en demasiados detalles en esos, ustedes pueden revisarlos en la referencia aquí. Pero básicamente, siento que todos estamos bien en lo básico de los tipos de datos principales, y en el siguiente video, por fin vamos a cubrir los condicionales. Te veré en ese video. 14. Condicionales de JS: En el último video, terminamos de hablar de los principales tipos de datos dentro de JavaScript. Ahora en este video, vamos a hablar de algo que es realmente importante en JavaScript y realmente común. Es posible que haya visto una declaración “si entonces”, básicamente lo que es eso, es un condicional. Entonces vamos a entrar en este elemento de menú aquí para las condiciones de JS y aprender sobre “si entonces lo demás”. Muy a menudo cuando escribes código, quieres realizar diferentes acciones basadas en diferentes decisiones. Cómo se puede hacer eso es usar declaraciones condicionales. En cualquier momento hay algo que quieras que suceda, si algo es cierto, entonces vas a usar una declaración condicional. Es como si le dijeras a tu amigo : “Iré al cine si vemos esta película. Pero si no lo hacemos, entonces no iré”. Esa es una declaración “si entonces lo demás”. Entonces cada vez que te atrapas queriendo hacer algo en JavaScript o en programación en general, donde quieres que algo suceda solo si algo es verdadero o falso, entonces vas a necesitar unas declaraciones condicionales. Debería ser bastante fácil para nosotros entender lo que hace una declaración “if”. Todo lo que pasa es que usamos la palabra clave de “if”, ponemos en una condición entre algunos paréntesis como esta, y luego usamos los corchetes rizados, recuerda, como un bloque de código para ejecutar código basado en si esa condición es verdadera. Echemos un vistazo al ejemplo aquí. Dice: “Si la hora es menor a 18, entonces queremos asignar la cadena de “Buen día” a la variable del saludo”. Vamos a probarlo nosotros mismos. Como puedes ver, tenemos un nuevo objeto de fecha el cual no cubrimos antes porque es algo que no usas a menudo, pero la fecha es otro tipo de datos que puedes usar. Podemos utilizar esta parte aquí para determinar cuántas horas han pasado en el día. Entonces si el número de horas pasadas en el día es menor a 18, entonces lo que vamos a hacer es poner “Buen día” en el HTML interno del elemento con el ID de demo, que está justo aquí. Entonces en lugar de “Buenas noches” va a decir “Buen día” porque en este momento son las 10:00 AM en mi zona horaria, así que ese es un ejemplo bastante sencillo. Al bajar, podemos ver que también podemos ejecutar una declaración alternativa o bloque de código si esa condición es realmente falsa. En el caso de si la hora es menor a 18, podemos decir “Buen día”, lo contrario podemos decir “Buenas noches”. Creo que eso es bastante sencillo de entender, y también podemos ir un paso más allá y en medio de nuestro “si” y nuestro “else”, podemos poner un “else if” y poner otra condición dentro. Echemos un vistazo a este ejemplo. Básicamente, lo que tenemos aquí, es que tenemos un tiempo en el que obtenemos las horas actuales pasadas en el día y lo asignamos a una variable de tiempo, y luego cambiamos el saludo en función del tiempo. Si es menor a 10, va a ser “Buenos días” lo contrario, si el tiempo es menor a 20, así que obviamente si no es menor a 10, entonces va a ser entre 10 y 20. Si ese es el caso, entonces diremos “Buen día”. Entonces si ese no es el caso de ninguno de estos dos, entonces diremos “Buenas noches”. Entonces esencialmente lo que estamos diciendo aquí, si el tiempo es igual o mayor a 20, entonces diremos: “Buenas noches”. Lo importante a tener en cuenta aquí es que todo sucede en orden, primero miramos si el tiempo es de 10 y si no, entonces pasamos a éste. Entonces si éste se desencadena, significa que esto no es cierto. Pasará por encima de estas declaraciones “si” “else if”, y en cuanto sea cierto, ejecutará cualquier bloque de código que esté en ese nivel, por lo que no pasará al siguiente. Solo estoy mencionando eso para asegurarme de que ya sabes, estos no son aislados. Entonces si fuera a mover esto a su propia declaración “if” y deshacerme del “else”, y ejecutar eso. Ahora mismo obtenemos los mismos resultados porque acaba de pasar 10. Pero digamos sólo 11 en su lugar, y hago clic en “Ejecutar” en eso y hago clic en “Pruébalo” a ver cómo dice “Buen día”. Eso se debe a que ambas son verdaderas y porque ésta sucede en segundo lugar, va a sobrescribir el valor que fijamos aquí. Si volvemos a ajustar esto a lo que era antes, y de nuevo, cambie esto a 11, cambie esto a 11, haga clic en “Ejecutar” y haga clic en “Pruébalo”. Dirá “Buenos días” porque golpea esto primero, y luego tan pronto como una de estas condiciones sea cierta en toda esta declaración “i”, ejecutará ese código y nada de esto ni siquiera echará un vistazo. Espero haber dejado eso realmente claro, la diferencia entre poner en “else if” y una declaración “if” completamente nueva. Si comienzas a poner un montón de diferentes “else ifs”, así que si hiciéramos “else si” el tiempo es menor de 25, y entonces pondríamos otro “else if”. Eso debería ser una señal de que necesitas cambiar tu código, y lo que probablemente estés buscando hacer es usar una declaración de cambio. Volvamos a este documento aquí, y bajaremos al siguiente elemento de menú para “Cambiar”. Como puedes ver aquí, la sentencia switch se utiliza para realizar diferentes acciones basadas en diferentes condiciones, y realmente es la alternativa a “si entonces” si tienes muchos casos diferentes. En lugar de escribir un “si esto” realmente largo, “entonces esto” “else if” “esto entonces este” “else if”, y simplemente tener una declaración muy larga, “if” con un montón de “else ifs”, es mucho más eficiente usar este interruptor y también le permite definir un valor predeterminado. Así funciona: se empieza con la palabra clave “Switch” y se pone la variable o lo que se quiere comprobar dentro del primer conjunto de corchetes. Después abres los corchetes rizados y haces un bloque de código, y luego usa la palabra clave “Caso” para comprobar si este valor aquí es igual a lo que sea en tu caso. Después ejecutas tu código, y luego usas la palabra clave de “Break”. Pasando mucho ahí. Pero básicamente, una vez que entiendes esto, esto es muy sencillo. Solo estamos mirando el día si es domingo, lunes, martes, y eso está representado por estos números. Entonces el domingo es 0, el lunes es 1. Si estamos diciendo caso 0, queremos que el día iguale el domingo. Si es el caso 1, queremos que el día iguale el lunes. Se puede ver si escribimos esto en una declaración “si entonces” o en una declaración “si entonces lo demás si”, tendríamos tantos “else ifs” y simplemente sería desordenado. Por lo que esta es una forma mucho más limpia de hacer un condicional donde hay múltiples casos que debes comprobar. Aquí abajo, puedes aprender más sobre la palabra clave break. Básicamente, solo nos ayuda a salir de un bloque de código. En lugar de tener corchetes rizados para cada caso, tenemos dos puntos y luego usamos la palabra clave “Break” para terminar ese bloque de código en particular. Desplazándose hacia abajo, también está la palabra clave predeterminada. Básicamente si no hay coincidencia, solo se va a dar por defecto a lo que está en el default aquí. Eso siempre es bueno tener en el sentido de que tal vez tengas algún código que esté basado en texto más adelante en tu archivo. Si el caso no fuera seis o cero, entonces podrías tener un texto indefinido y eso causaría problemas más adelante en tu código. Por lo que siempre es bueno tener un defecto ahí dentro, solo en el caso de que no coincida con seis o cero o cualquier otra cosa que hayas definido en tu declaración de cambio. Aquí hay algunos ejemplos más. Algo a tener en cuenta es que los casos conmutados usan una comparación estricta. Si recuerdas lo que significa este signo de tres iguales, los valores deben ser del mismo tipo y valor para coincidir. Recuerde, la comparación estricta es el mismo tipo final de valor. En tanto que si recuerdas, el doble es igual al mismo valor, pero no necesariamente del mismo tipo. Eso es algo importante a tener en cuenta, pero no necesariamente algo que no te vendrá a la mente hasta que realmente empieces a tener algunos problemas con tu código y quieras que algo cambie. Creo que eso es probablemente suficiente en los condicionales. condicionales son igual que en la vida real, como si le diera un ultimátum a alguien, es exactamente lo mismo. No debería llevarte demasiado tiempo envolver la cabeza alrededor de las declaraciones “si entonces” “si lo demás”, muy comunes en JavaScript y uno de los bloques de código más comunes verás cuando estés desarrollando JavaScript. En el siguiente video, vamos a profundizar en otro bloque de código común que verás y que son loops. Si recuerdas en el video en arrays, cubrimos un poco sobre un for loop, para bucear a través de una matriz, pero vamos a profundizar en loops y mostrarte algunos otros loops en el siguiente video. Te veré en esa. 15. Bucles de JS: Muy bien chicos, casi estamos terminados con aprender JavaScript general. Recuerda, JavaScript es un lenguaje de programación independiente por derecho propio, pero la forma en que interactúa con la web es a través del DOM. Vamos a aprender más sobre HTML DOM en la siguiente sección de la clase. Pero para terminar nuestro aprendizaje sobre JavaScript general y cómo funciona el lenguaje de programación, solo voy a hablar un poco más de loops. Si recuerdas, cuando hablamos de matrices, cubrimos un JavaScript for loop y aquí tienes un ejemplo perfecto de para qué usarías un bucle. Recuerda que antes vimos un bucle for, y esta es la convención estándar para ello. ¿ Por qué necesitaríamos usar un bucle? Bueno, a lo mejor no queremos escribir esto. El problema con esto en realidad es quizás la matriz más larga de seis elementos y queremos que eso sea dinámico. Por lo que quisiéramos recorrer toda la lista de autos y no queremos tener que repetir el mismo código una y otra vez. Bueno, un bucle for es perfecto para eso como vimos antes. Pero también hay diferentes tipos de bucles. Si aprendemos más sobre el for loop aquí, esta es una buena referencia para aquellos de ustedes que tal vez se perdieron un poco con el for loop. Esta primera sentencia se ejecuta una vez antes de la ejecución del bloque de código, y la segunda sentencia define la condición para ejecutar el bloque de código, y la sentencia 3 se ejecuta cada vez que se ha ejecutado el bloque de código. Un ejemplo común es establecer un marcador i, iniciarlo en cero, y enviar una condición de que se ejecute hasta que se alcance un cierto número, y aumentar ese número cada vez. Es una forma complicada de verlo, pero nos da mucho control sobre cómo queremos que se ejecute el bucle. En esta página aprenderás todo sobre para bucles, pero ya cubrimos esta convención estándar antes. Entonces lo que quiero mostrarles fue para adentro. Vimos cómo con for loops, pudimos recorrer una matriz, pero también podemos recorrer un objeto mediante el uso de esto for in statement. Si quisiéramos recorrer las propiedades de un objeto, como cómo pasaríamos a través de una matriz, podemos usar esta declaración aquí. Como puede ver, saca todos los nombres clave, todos los índices nombrados, y salidas solo los valores. Entonces es una forma para nosotros de recorrer un objeto como lo haríamos en una matriz. Vamos al bucle while, que es un bucle diferente que probablemente sea un poco más fácil de entender. El bucle while continúa y así esta afirmación no es cierta. Ahora esto puede ser un poco de peligro a veces porque quieres asegurarte de que en algún momento esto no sea cierto de lo contrario solo va a seguir buceando en un bucle infinito y a veces puede chocar tu código. Como dice aquí, si olvidas aumentar el valor de la variable utilizada en la condición, el bucle nunca terminará y bloqueará tu navegador. En el ejemplo de bucle for, siempre estás poniendo en una condición aquí para hacerlo más largo por lo que normalmente no tienes este problema, pero porque si bien es más simple y solo usa una sola condición, tienes la posibilidad de que si no iteras tu número o cambias esa condición, podría entrar en un bucle infinito. Esto es esencialmente algo similar al bucle for, solo está estructurado un poco diferente. En lugar de iterarlo como un parámetro real en la declaración, su lugar lo estamos poniendo en el bloque de código. También está el bucle do while, que en realidad es bastante similar. La diferencia entre while y do while es, ejecutará el bloque de código una vez antes de comprobar si la condición es verdadera. Entonces se repetirá siempre y cuando la condición sea verdadera. Do siempre servirá, pero no continuará a menos que esta condición sea cierta. No me encuentro muy a menudo usando do while, así que no me preocuparía demasiado por eso. Aquí puedes ver una comparación de lado a lado de para y mientras y eso es todo. Esa fue probablemente una breve lección sobre bucles porque ya hemos cubierto un poco al respecto en la lección de matrices. Pero los bucles nos permiten repetir algo una y otra vez y hacerlo de manera más dinámica. Como puedes ver aquí, perfecto ejemplo. En lugar de escribir que queríamos sumar dos autos por cada índice, podemos escribir un bucle en su lugar. También eso nos permite comprobar la longitud de la matriz y hacer esto para tantos elementos en la matriz como haya. Eso cubre JavaScript general. En el siguiente video, vamos a saltar directamente a cómo funciona JavaScript con el DOM. Ya lo hemos visto un poco, pero aquí es realmente donde JavaScript se enchupa a tu página web existente y hace lo que se sabe que hace, crea páginas web interactivas. Te veré en el siguiente video. 16. Introducción al DOM del HTML de JS: Muy bien chicos, espero que estén emocionados porque en la siguiente sección, vamos a entrar en cómo JavaScript interactúa con HTML y crea páginas Web interactivas. Vamos a desplazarnos hacia abajo a este menú aquí para JavaScript HTML DOM, y vamos a hacer clic en la introducción aquí. Si no está familiarizado con el modelo del objeto de documento, siempre que se carga una página Web, el navegador crea un modelo de objeto de documento de la página y se crea como un árbol de objetos, básicamente la estructura HTML. Si entramos en “Herramientas de desarrollador” y entramos en “Elementos”, todos estos HTML, todos estos elementos y cómo están todos estructurados se convierte en el modelo de objetos de documento. Como puedes ver, como estoy flotando sobre diferentes elementos, resalta ese elemento y luego puedo hacer clic y bajar más allá por el árbol. Una forma más fácil de ver esto, encontré un gran ejemplo en línea. Si solo quieres copiar esta dirección en tu navegador, lo contrario solo puedes echar un vistazo en mi pantalla. Básicamente, esta es una versión simplificada de lo que vimos antes con todos los diferentes detalles dentro de estos diferentes elementos. Aquí puedes ver que empezamos con, en la parte superior del modelo de objetos de documento está el cuerpo, y luego tenemos cualquier cosa que configuramos. Esto va a ser diferente dependiendo de la página que tengas. Pero lo grandioso de este ejemplo es que si hago click en esto, resaltará la parte correspondiente de la página. No sé qué son div5 y div6, pero nada está apareciendo realmente. Si hago clic en cuerpo, toma todo el cuerpo de la página. Si entro más profundo en div, se puede ver que está resaltando un sub-div de ese div. Entonces se pueden ver los diferentes elementos directamente dentro de esto. Como puedes ver, aquí hay un árbol, así que podemos tener anidación todo el camino abajo de la línea. Podemos tener al final mismo, primer encabezado y segundo encabezado para tablas. Al hacer clic a través de estos, se pueden ver resaltados en la página aquí. Si empezamos por arriba, tenemos el cuerpo y luego tenemos este div. Después entramos en este div más pequeño, luego entramos en este div para otra información y podemos entrar al contenedor de lista, mirar el párrafo en la parte superior, y luego la lista real, mirar los elementos individuales de la lista y luego que termina el árbol. O podemos empezar de aquí otra vez y entrar en este niño de ese elemento y luego entrar a otro hijo de eso, que es una mesa tbody. Entonces podemos mirar las filas individuales, y luego dentro de esas filas podemos ver las celdas de la tabla. Esperemos que esta representación visual la haga un poco más fácil para ti. Pero básicamente HTML que configuramos en la página, si nos fijamos en esta página en particular, esto crea un modelo de objeto de documento. Ahora esto es algo realmente conceptual, pero esencialmente lo que el modelo de objetos de documento nos permite hacer es navegar a través de un documento HTML moviéndose a través de este árbol de objetos. A lo mejor este ejemplo es demasiado complejo, pero si traigo una sencilla página Web y hago clic en este enlace aquí. Esta es una sencilla página Web que literalmente acabo de encontrar entonces. Si entramos en nuestras herramientas de desarrollo para este click “Inspeccionar”, podemos ver aquí un ejemplo más sencillo. Aquí puedes ver podemos colapsar y expandir las diferentes partes de nuestro modelo de objetos de documento aquí. Lo bueno de usar la sección de elementos de tus herramientas de desarrollador es que también puedes ver las etiquetas HTML y toda la información que contiene. Podemos ver aquí tenemos cuerpo y si ampliamos eso y entramos en esta tabla, este no es el mejor ejemplo porque esta página web está configurada como solo una mesa, que no es la forma moderna de hacerlo, pero bueno, podemos ver aquí que todo esta anidación pasando en una estructura arbórea. Al pasar el cursor sobre estos diferentes elementos, podemos ver el equivalente aparecer en la página web. A lo mejor es algo difícil de conceptualizar, pero básicamente, tener esta estructura de árbol nos permite decir, bueno, por ejemplo, quiero que el primer div que es hijo de este td tenga un atributo de algo. O quiero agregar un método on-click al primer hijo de este td, que es el primer hijo de esto. Permite escribir selectores que funcionan todo el camino arriba del árbol y abajo del árbol. Empezarás a ver esto un poco más una vez que empecemos a usar selectores. Pero si quieres aprender más sobre el modelo de objetos de documento y la teoría detrás de él, quizá quieras leerlo aquí, pero es importante solo introducirlo. En cualquier momento hablo del modelo de objeto de documento, esto es de lo que estoy hablando. Es la página web representada como un árbol de objetos la que nos ayuda a conceptualizar nuestra página HTML y también a apuntar elementos dentro de esa página. Esa es la introducción al HTML DOM. De nuevo, si quieres leer más al respecto, aquí te dejamos la página. En el siguiente video, vamos a aprender todo sobre la segmentación con HTML DOM. Te veré en el siguiente video. 17. Navegación del DOM: En el último video presentamos el Document Object Model y tal vez te estés preguntando, bueno, eso es todo genial en teoría, pero ¿qué hace en realidad y por qué es importante el Document Object Model? Esa es una buena pregunta y una pregunta que esperemos contestar en esta lección mientras discutimos cómo apuntar realmente a los elementos HTML y cambiar cosas diferentes en la página en función del Modelo de Objetos de Documento. Si voy al elemento de menú de elementos DOM aquí, podemos encontrar elementos HTML por ID, etiqueta, nombre de clase, selectores CSS, y colecciones de objetos. Si recuerdas en la última clase sobre HTML y CSS, podemos apuntar elementos HTML usando una variedad de medios y algunos de estos que habrías visto antes de eso. Por lo que definitivamente podemos apuntar a los elementos por ahí clase e ID y el tipo de elemento que son, igual que podemos hacer con CSS. Aquí podemos ver un ejemplo que descubrimos al inicio de nuestra clase estamos tomando el documento, recuerda que está en la parte superior del árbol. Entonces estamos poniendo un punto para ponerle un método a eso y estamos encontrando un elemento con el ID de intro. Tan sólo para demostrar que de nuevo, este párrafo aquí es intro y queremos apuntar a ese elemento en particular mediante el uso de su ID. Entonces no hay nada nuevo ahí. Si bajamos aquí, también podemos apuntar a elementos por su nombre de etiqueta. Al igual que cuando hicimos un selector de nivel de un elemento en CSS, podemos hacer algo similar en JavaScript para apuntar a todos los elementos con un nombre de etiqueta de P. También lo podemos encontrar por clase. El método que utilizamos para eso es getElementsByClassName. Todos estos funcionan de formas similares. No voy a pasar una tonelada de tiempo en ellos. Aquí hay una forma de que podamos unir diferentes selectores como lo haríamos en CSS y ponerlo en JavaScript. Usando el selector de consultas todo, podemos encontrar todos los P's con la clase de intro. Al parecer deberías tener una comprensión de los selectores CSS y CSS ya antes de tomar esta clase, no me sumergiré profundamente en lo que está pasando aquí. Si estás por eso, definitivamente vuelve atrás y mira los fundamentos de desarrollo web, HTML y CSS. Esas son diferentes formas en las que puedes apuntar a los elementos HTML. Si entro al siguiente menú, vamos a tomar lo que hemos seleccionado y cambiar contenido. Una forma común de hacerlo es con dot innerHTML. Entonces eso es cambiar una propiedad en este elemento en particular al que apuntamos por ID y darle algún nuevo valor. Por lo que ya hemos visto eso de nuevo antes. Esa es sólo la extensión de seleccionar primero un elemento y luego asignarle un nuevo valor. Si me desplaza hacia abajo, no es sólo en un HTML que podemos cambiar. Podemos cambiar un atributo como el SRC de una imagen. Podemos cambiar básicamente qué imagen aparece en una etiqueta de imagen en particular. Eso es básicamente todo para esa lección. Entonces si entro en CSS, también podemos cambiar estilos usando JavaScript. Podemos cambiar el color de las cosas. Podemos cambiar el tamaño de la fuente, todas esas cosas. Esto, por supuesto, se usaría comúnmente con los eventos. Si hacemos clic en un botón, queremos que algo se vuelva rojo. Echemos un vistazo al ejemplo. Si hago clic en el botón, ahí el encabezado se vuelve rojo. Estamos apuntando a ese elemento por su ID, agarrándolo estilo. Entonces dentro del estilo, agarrando su color y cambiándolo a rojo. Entonces eso debería ser bastante simple ahora si tu comprensión de JavaScript. Vamos un poco más profundo y miremos la navegación. Todos estos diferentes elementos aquí se pueden considerar nodos en el modelo de objetos de documento. Por lo que todo el documento es un nodo de documento. Cada elemento HTML es un nodo de elemento. El texto dentro de los elementos HTML son nodos de texto. Cada atributo HTML es un nodo de atributo. En realidad eso está en desuso ahora. Simplemente ignora esa. Comentarios son nodo comentario. Básicamente hay todos estos nodos y todos están interrelacionados y podemos usar el Document Object Model y la relación entre estos nodos para apuntar a diferentes cosas y reorganizarlas. Sólo una advertencia, vamos a ir un poco teórico otra vez y cubrir un poco sobre las relaciones de los nodos. Si nos fijamos en este HTML básico, M uno, dos visualizamos la relación entre todos estos elementos que son nodos en el modelo de objetos de documento. Podemos echar un vistazo aquí. Tenemos el elemento raíz, que se encuentra en la parte superior, que es nuestra etiqueta HTML. Entonces tenemos cabeza, que es el primer hijo. Entonces es el primer elemento que es un subelemento de eso. Entonces cuerpo es el segundo hijo. También es el último hijo. Podemos apuntarlo a la cabeza como el primer hijo. También podemos apuntar al cuerpo como el último hijo porque es el niño el que es último, obviamente. contrario, la relación del HTML con este primer nodo hijo de cabeza es un nodo padre, y luego la relación entre cabeza y cuerpo es un hermano. Es igual que una estructura familiar. Si tienes esto dando a luz a estos dos, entonces estos son niños y como debes saber, si tienes dos hijos con los mismos padres, entonces son hermanos. Del HTML anterior, puedes leer que HTML es el nodo raíz porque está en la parte superior. No tiene padres, pero cabeza y cuerpo tienen un padre de HTML. Head es el primer hijo de HTML y body es el último hijo de HTML. Ahora puedes ver que podemos ir otro paso más profundo, y aquí es donde empezamos a formar árboles complejos dentro del Modelo de Objetos de Documento. Podemos ver que la cabeza también tiene un hijo, sólo el único hijo y podemos ver que esto tiene dos hijos. ¿ Por qué es tan importante esto? Bueno, es importante para navegar entre nodos. Echemos un vistazo a un ejemplo aquí. Hemos hecho el ejemplo donde hemos cambiado el HTML interno de un elemento, dirigiéndolo por su ID. Pero y si quisiéramos apuntar a un elemento por su ID, encontrar a su primer hijo, y luego cambiar su valor. Bueno, puedes atravesar el árbol mediante el uso de una propiedad como el primer hijo. También puedes apuntar al primer hijo indicando explícitamente el índice al que quieres apuntar. Eso en realidad te permite apuntar al segundo hijo poniendo uno aquí. El tercer trabajo al poner un dos aquí. Recuerde, los índices de matrices comienzan en cero. Siempre hay que restar uno en tu mente solo para traerlo de vuelta a lo que pensarías que es el primer índice. Siguiendo este ejemplo, podemos ver aquí que no sólo podemos agarrar el HTML interno de un elemento con el ID de éste y asignarle un valor. Pero también podemos asignar un valor que se base en otro valor dentro de nuestro DOM. Entonces básicamente estamos copiando el HTML interno del elemento con el ID de ID 01, que está aquí mismo en esto. Debería ser bastante obvio lo que va a pasar aquí. Pero se puede ver aquí que hemos copiado el HTML interno del H1 en esta etiqueta P. Volviendo a la página, podemos ver aquí cómo podemos pasar por el Modelo de Objetos de Documento. Si probamos esto, podemos ver que obtenemos el mismo resultado usando la palabra clave de valor de nodo. El valor del nodo no es algo que uso a menudo y vamos a hablar de una forma más intuitiva de segmentar elementos usando jQuery. Entonces, no te pongas demasiado al día con estas palabras clave aquí. Pero lo que quiero que entiendas aquí es que somos capaces apuntar no sólo proporcionando en, digamos por ejemplo, este ejemplo proporcionando un ID y dirigiéndolo allí. Pero también somos capaces de apuntar elementos o nodos en relación a un elemento o nodo en particular. De nuevo, no voy a demostrar esto en un video posterior, así que no te preocupes demasiado. Una de las cosas que estás viendo a menudo una y otra vez es el documento. Estamos iniciando cada selector con documento porque es el nodo raíz. Entonces estamos empezando por la raíz misma. Si solo escribimos documentos. Si entro en la consola y escribo documento, solo hay un documento en la página HTML y es todo el documento. Por lo que no es necesario especificar dónde está ese documento porque es la raíz, si eso tiene sentido. Entonces la convención que utilizarías es documento que es el elemento raíz y luego un subelemento de eso. Entonces esencialmente un nodo hijo. Se está volviendo un poco complejo ahora y me estoy encontrando repitiéndome a menudo. Pero esencialmente lo que quiero que entiendas en este video es cómo podemos apuntar a diferentes elementos dentro del árbol. No tiene que ser getElementById y sólo podemos apuntar a ese elemento, pero podemos apuntar a elementos que lo rodean. Podemos apuntar a un padre de eso. Podemos apuntar a cualquier número de hijos de ese elemento. Para que podamos subir y bajar un modelo de objeto de documento. Nos sumergiremos más en eso en las lecciones de jQuery usando lo que se llama Vanilla JavaScript, que es lo que estamos usando ahora. Estamos usando JavaScript sin ningún marco. Podemos hacer esto mucho más sencillo usando jQuery. No te pongas demasiado al día. Yo sólo quería presentarles a ustedes chicos la idea de DOM Navigation y hacerles saber que podemos apuntar elementos en cualquier relación a algo que apuntemos con ID o clase o lo que sea. Ojalá para cuando lleguemos a la selección con jQuery, ustedes tienen un conocimiento bastante fundamentado de lo que está pasando y básicamente podemos correr con él y ustedes sabrán lo que están haciendo. Eso habla un poco de navegación y encontrar cómo podemos apuntar. Si volvemos a aquí, cómo podemos apuntar a diferentes elementos o diferentes nodos por su nombre de etiqueta, ID, nombre de clase. En el siguiente video, vamos a entrar a los oyentes de eventos. Recuerda que hicimos eventos antes en una lección cuando estábamos hablando de JavaScript general. Pero en el siguiente vamos a aprender a configurar un oyente de eventos en nuestro código JavaScript. Te veo en el siguiente video. 18. Registradores de eventos de DOM: Si recuerdas aquí atrás en la lección sobre eventos de JavaScript, cubrimos cómo poner un oyente de eventos directamente en un elemento mediante el uso de un atributo. Pero en realidad hay una forma más agradable de hacer esto, y eso es lo que vamos a aprender en este video. Vayamos a “DOM Events” en primer lugar. Como puede ver aquí hay algunos ejemplos de eventos, el evento mouse over, y el evento click. Como pueden ver, al pasar el ratón, algo está pasando mientras hacía clic en esto, pasaron todo un montón de cosas. Vimos antes podríamos agregar un atributo de evento pero otra forma en que podemos hacerlo es asignando eventos usando el DOM HTML. El DOM HTML nos permite asignar elementos al HTML usando JavaScript y esto es algo que podemos poner en una sección separada de nuestro documento. No tiene que ir en fila. Básicamente, podemos apuntar al elemento como lo haríamos normalmente por ID o por un nodo en particular y luego podemos establecer el on click para hacer una cosa determinada. Básicamente es la misma palabra clave que usamos cuando estamos usando un atributo, pero lo estamos poniendo en la cadena aquí para seleccionar el elemento y luego poner el evento en el oyente de eventos on click. También hay en carga y en cambio. No necesariamente quiero repasar todos los diferentes eventos que puedes hacer. Definitivamente puedes buscarlos a través estos ejemplos y aprender más sobre los específicos. Lo que quiero cubrir es cómo configurar estos oyentes de eventos usando el DOM. Vimos el ejemplo aquí arriba, pero hay otra forma de hacerlo y si entramos al oyente de eventos DOM, podemos ver el método add event listener. Podemos agregar un oyente de eventos al hacer clic, y cuando se activa click, hará esta función. Probando esto. Tenemos una función llamada fecha de visualización, y ahora estamos adjuntando lo que se llama un oyente de eventos, que escucha que ocurra cierto evento. Estamos definiendo qué evento es y estamos definiendo la función que queremos que suceda cuando ocurra ese evento. Si lo intentamos haciendo clic en el botón, podemos ver que el oyente de eventos que adjuntamos a nuestro botón al click está haciendo lo que pretendíamos hacer haciendo esta función. Eso no es nada nuevo que cubrimos eventos en la lección anterior, pero todo este método de escucha de eventos add es quizás un nuevo concepto. Si bajamos a aquí, podemos ver la sintaxis. Simplemente podemos decir en cualquier elemento en particular, configurar un oyente de eventos para escuchar hago clic y ejecuto el bloque de código aquí. Otra cosa que debes tener en cuenta es que puedes agregar muchos manejadores de eventos al mismo elemento. Tenemos agregar event-oyente dos veces aquí, y podemos adjuntar un oyente de eventos al mismo elemento, pero con diferentes funciones. Aquí hay muchas más cosas que puedes hacer, incluida la eliminación del oyente de eventos para que puedas usar los mismos argumentos o parámetros que antes, pero esta vez solo usas el método remove event listener y así podrás eliminar el oyente de eventos que agregó. Hay más cosas que puedes hacer con oyentes de eventos pero esencialmente lo que quería atravesar en este video es cómo agregar un oyente de eventos, no necesariamente en línea como vimos antes, sino en un JavaScript en otra página o incluso en la parte inferior de la página. Ya mencioné antes que j-query nos permite poner en eventos a los oyentes de una manera más intuitiva. Por lo que no es demasiado importante quedar atrapado en esto. Nos pondremos de nuevo a los oyentes de eventos una vez que nos metamos en JavaScript. Solo quería llevarlo un paso más allá y mostrarles cómo podemos adjuntar oyentes de eventos a objetos después de dirigirlos a través del modelo de objetos de documento. 19. Introducción a Ajax: En este punto siento que tenemos todos los conocimientos esenciales en su lugar en cuanto a JavaScript general y cómo JavaScript se relaciona con el DOM para pasar a jQuery, que está aquí arriba, jQuery es una biblioteca JavaScript que cubriremos en tan solo un segundo. Pero antes de hacer eso, creo que aquí hay un tema de nivel avanzado que al menos tenemos que introducir, y ese es AJAX. Si hace clic en “AJAX Intro” aquí, AJAX es un sueño de desarrolladores, según W3Schools porque puede leer datos de un servidor web después de cargar la página, actualizar una página web sin recargar la página, y enviar datos a un servidor web en segundo plano. Básicamente, AJAX nos permite trabajar con datos en una página ya cargada sin tener que recargar la página. En esta breve lección, solo quería presentarles la idea de AJAX porque en cualquier momento que quieran interactuar con datos, usando JavaScript, AJAX es realmente importante. Pero en cuanto a la implementación real del código, jQuery nos ayuda a agilizar mucho más eso. En el siguiente video, cuando nos metamos en jQuery y los videos restantes, vamos a aprender a hacer realmente una llamada AJAX con jQuery. Pero por ahora, solo quiero sacar a casa lo que es AJAX y para qué lo puedes usar. Aquí mismo, si hago clic en “Cambiar contenido”, verás que el contenido de la página ha sido cambiado. Pero, ¿de dónde salió eso? En realidad, si hacemos clic en “Pruébalo tú mismo”, ya veremos aquí, y esto parece justo un desastre. Por eso te digo que esperes hasta que lleguemos a jQuery porque esto es un poco demasiado desordenado para mi gusto, jQuery, siento que hace esto mucho más simple. Pero esencialmente el punto que quiero atravesar aquí es cuando haces clic en este “Cambiar contenido”, no ves ninguno de este contenido en el código real ni en la página. Lo que está pasando es que lo estás cargando desde otro archivo, y ese archivo está aquí. Es ajax_info.txt. Toda esa información se almacena ahí. Lo que puedes hacer con AJAX es traer si se trata de datos, si se trata de contenido de otra página, puedes abrir una solicitud y agarrar algún otro contenido que no está en esta página actual y traerlo sin tener que recargar la página. cualquier momento que estés en una página web, y estás enviando datos o trayendo nuevos datos, y la página web no tiene que recargarse, estás usando AJAX porque eres capaz de cargar datos y enviar datos a través de JavaScript. Volviendo a aquí, podemos ver una función aquí llamada LoadDoc. Aquí está la función LoadDoc. Esto no es algo en lo que me pondría demasiado atrapado ya que lo vamos a cubrir en jQuery. Pero esencialmente, podemos configurar un oyente de eventos para ejecutar esta llamada AJAX cuando obviamente se hace clic en el botón. Si nos desplazamos hacia abajo, podemos aprender más sobre la teoría del AJAX. Es JavaScript asíncrono y XML. No es un lenguaje de programación. Simplemente utiliza una combinación de este objeto XMLHttpRequest y el HTML DOM, y JavaScript para mostrar o utilizar los datos. Básicamente, es un poco técnico, y no necesitas conocer todos los funcionamientos internos de la misma. Pero normalmente cuando estás en un sitio web, y haces clic en algo nuevo, digamos, por ejemplo, si hacemos clic en un nuevo elemento de menú aquí, solo haré clic en esto, verás cómo se recarga toda la página web. Bueno, en el ejemplo que mostramos antes, cuando cambiamos el contenido, traía contenido de otra página o de otro archivo sin que tengamos que recargar la página. Eso es esencialmente lo que hace AJAX. También, como mencioné antes, si tuviéramos que presentar algunos datos en lugar de que aparezcan nuevos datos en la página, también podemos hacerlo sin volver a cargar la página o cargar una nueva página. Volviendo al diagrama, esto es lo que sucede en segundo plano cuando haces una llamada AJAX. Se produce un evento, crea un objeto XMLHttpRequest, y lo envía a través de Internet al servidor, y el servidor crea una respuesta, lo envía de vuelta y todo esto sucede sin que tengas que volver a cargar la página. Honestamente, no necesitas conocer el funcionamiento interno de esto todavía. Pero esencialmente quería presentarte a AJAX antes de entrar en jQuery porque la mayoría de los sitios web en estos días usan datos y usan un backend. A veces no es mejor que la experiencia del usuario recargue una página completamente nueva cada vez que quieras hacer algo. AJAX es algo que me encuentro usando comúnmente, y probablemente te encuentres usando también. Pero de nuevo, vamos a cubrir cómo hacer una consulta AJAX o una llamada AJAX en la sección jQuery. Sin más preámbulos, saltemos a jQuery en la siguiente lección. Todo lo que has aprendido aquí, todas las palabras clave, ahora solo vamos a hacer que eso sea mucho más fácil con un marco JavaScript realmente genial. Te veré en el siguiente video. 20. Introducción a JQuery: Bienvenidos de vuelta chicos. En este video, estamos cubriendo una introducción a jQuery. Si todos estos diferentes comandos que aprendimos antes, parecían largos y molestos, ¿dónde están? Si todo esto parece un poco largo y molesto, bueno, estás de suerte porque en jQuery, vamos a aprender una forma mucho más fácil de hacer algunas de las cosas que aprendimos en lo que se llama Vanilla JavaScript, que es JavaScript sin ningún marco ni biblioteca. Para cubrir lo básico, jQuery es una biblioteca JavaScript. Básicamente es solo un conjunto de código que traemos a nuestro proyecto, y luego somos capaces de usar estos métodos jQuery. Simplifica enormemente la programación JavaScript y es fácil de aprender. Aquí tienes un ejemplo clásico de jQuery. Básicamente, seleccionas algo y que agarra el objeto y puedes ejecutar un método o puedes encontrar un atributo dentro de eso. Aquí puedes ver que somos capaces de apuntar al documento en su conjunto. Pero entonces también aquí verás como una cadena tenemos p y lo que esto hace es que se dirige a todas las etiquetas p. Ahora, lo que es genial de jQuery es que apunta exactamente de la misma manera que CSS. Si quisiéramos poner aquí un selector descendiente, podríamos, si recuerdas de CSS. Probemos eso ahora mismo. Sólo tenemos tres párrafos. Pero digamos, por ejemplo, si tuviéramos dentro de ese párrafo un lapso hacia adelante, entonces podríamos usar un selector descendiente para apuntar sólo al lapso. Si hacemos clic de distancia, desaparecerá. tanto que si tuviéramos que quitar el lapso y volver a solo p, puedes hacer clic de distancia todo el asunto. El motivo por el que es todo el asunto es porque estamos usando la palabra clave “esto”. Perdón, salté un poco adelante. En cuanto a selectores, jQuery es realmente bueno porque puedes seleccionar cualquier número de formas igual que lo harías usando CSS. Pero echemos un vistazo a lo que está pasando aquí. En primer lugar, estamos seleccionando el “documento” a través este selector jQuery y utilizando este método llamado ready. Esto lo verás con bastante frecuencia en jQuery. Sólo ejecutamos el código cuando el documento está listo. Aquí agregamos una función y luego dentro de este corchete rizado está lo que vamos a estar ejecutando. Ahora, asegúrate porque aquí hay un corchete de apertura que también lo cierras. Y luego terminas la declaración como lo harías en JavaScript con punto y coma. Esto lo verás muy a menudo en jQuery. Ahí también lo puedes ver. Hemos esperado hasta que la página o el documento esté listo y después estamos poniendo en un oyente de eventos. Esto es, como dije, en jQuery, hay una forma jQuery de hacerlo en el oyente de eventos y esto es todo. Podemos simplemente poner “.click” y luego agregar una función, y también podemos usar la palabra clave de “this” para apuntar lo que sea que sea lo que seleccionamos. Si tenemos “p”, “on click”, “this” .hide”, esto es lo que estamos seleccionando, así que para ocultar la etiqueta p, y recuerda antes cuando teníamos span y pusimos un lapso alrededor del “away” y hacemos clic en “Run”. Ahora eso no se va a ocultar, va a afectar sólo el lapso que es descendiente de p. No tiene que ser necesariamente el primer hijo. Podría ser un nieto o más abajo de la cadena. En ese ejemplo, sé que te hemos arrojado una tonelada de cosas nuevas, pero esencialmente lo que tenemos en jQuery es un selector y luego un método y con el selector, es súper potente porque en lugar de escribir un documento. GetElementsBytagName y luego yendo 'p', así, podemos en su lugar simplemente hacer $ ('p'), y esto no funcionará a menos que jQuery esté en la página. En realidad lo es, y así en realidad podemos apuntar a lo mismo. Surge como una salida diferente porque esto nos va a agarrar una HtmlCollection. Esto nos agarra el HTML real por defecto. Pero esencialmente se puede ver que esto es mucho más largo que esto. Por lo que jQuery simplifica la programación JavaScript para nosotros y hace que sea un poco más fácil de aprender. En realidad, para terminar esta introducción en jQuery porque este fue un ejemplo bastante pesado, quiero ir a través del sitio web jQuery. Si tan solo como jQuery en Google, puedes ver algunos ejemplos de lo que jQuery hace realmente bien. Las principales cosas que jQuery agiliza para nosotros es DOM Traversal y Manipulación. Podemos usar select como lo haríamos en CSS, para elegir un botón con la cláusula de continue, y podemos cambiar su HTML a una cierta cadena de texto. Esto lo verás pronto. Podemos usar sus propios oyentes de eventos, y podemos hacer Ajax de una manera mucho más agradable. Si recuerdas lo que vimos antes con la llamada Ajax, fue mucho más desordenado que la llamada Ajax aquí. Esas son tres de las principales características de jQuery. No comprenderás completamente lo mucho más fácil que es usar jQuery hasta que realmente lo uses. Pero ahora que te hemos presentado jQuery, es hora de entrar en algunas de las características de jQuery y eventualmente te hace hacer algunas de tus propias funciones también. Te veré en el siguiente video. 21. Efectos y eventos de JQuery: Bienvenidos de vuelta chicos. En este video, vamos a trabajar con jQuery para producir efectos y vamos a hablar de eventos. igual que mencioné antes cuando cubrimos eventos por primera vez y luego cubrimos a los oyentes de eventos con respecto al DOM, dije que saltaríamos adelante a jQuery en algún momento y aprenderíamos cómo configurar oyentes de eventos allí. Ustedes ya saben qué son los eventos y ya han visto en el oyente de eventos antes, pero con jQuery, simplemente podemos definir un oyente de eventos a través de esta sintaxis. Esencialmente, todo lo que haces es poner en el método de Haga clic en el elemento o grupo de elementos que desea que continúe el oyente de eventos y luego inserta una función como primera propiedad de ese evento. Ahora, aquí mismo verás un método de evento jQuery muy utilizado, y ese es el método de documento listo. Esto nos permite ejecutar una función cuando el documento está completamente cargado. Si vamos a la explicación en la sección de sintaxis jQuery, que en realidad no repasamos pero puedes volver y referirnos a esto. Podría notar que muchos de los ejemplos que verá en línea e incluyendo todos los ejemplos que vea en este sitio web comenzarán con document.ready. Esto es bueno para evitar que cualquier código jQuery se ejecute antes de que el documento termine de cargarse. Es solo una buena práctica esperar a que el documento termine de cargarse y luego ejecutar su código. Algunos ejemplos de acciones que fallarían si se intenta ejecutar antes de que el documento esté completamente cargado, tratando de ocultar un elemento que aún no se ha creado, o tratando de obtener el tamaño de una imagen que aún no está cargada, tratando de hacer cualquier cosa con cualquier elemento que aún no se haya cargado causará problemas por lo que debes usar document.ready y luego definir una función abierta aquí y puedes poner todo tu jQuery ahí. Eso lo verás una y otra vez así que no te preocupes por memorizar eso, lo aprenderás con el tiempo. Como pueden ver, podemos simplemente sustituir en el caso de que busquemos, y como vimos antes, podemos usar la palabra clave esta dentro del selector jQuery para hacer referencia a lo que sea en lo que se está haciendo clic. En esta instancia, si hacemos doble clic en una determinada p, la p particular en la que hicimos doble clic está representada por esto. Tenemos ejemplos de más eventos, mouseenter, mouseleave, mousedown, mouseup, así sucesivamente, así sucesivamente. También podemos adjuntar un manejador de eventos mediante el uso del método on. El método on adjunta uno o más manejadores de eventos para los elementos seleccionados. Básicamente es solo otra forma de poner un manejador de eventos, y así usar este método en particular, está solo encendido, y luego dos parámetros, el primer parámetro es el nombre del evento, que es Click en este caso, y luego el segundo parámetro es la función en la que pones tu bloque de código en. Más o menos exactamente lo mismo, solo un poco diferente método y propiedades. Como se puede ver aquí abajo, lo que podemos hacer es definir múltiples eventos en la misma llamada al método usando estos corchetes rizados y dividiéndolos usando comas. Pero no lo veo a menudo la mayor parte del tiempo. Está bien hacer esto o hacer esto. Eso es un poco de sintaxis sobre cómo definir sus oyentes de eventos en jQuery. Hablemos un poco de cuáles son algunas de las cosas que podrías hacer cuando se hace clic en algo. Como se puede ver aquí, hay un ejemplo, esconderse y mostrar. Echemos un vistazo al escondite y a mostrar en primer lugar. Si hago clic en este panel, se esconderá y mostrará esta parte aquí. Ese es un método jQuery realmente común y es bastante fácil. Todo lo que está pasando aquí es cada vez que se hace clic en un elemento que tiene el ID de ocultar, se va a ocultar todos los Ps, y siempre que se haga clic en un elemento que tenga el ID de show, se va a mostrar todos los Ps. Ahora lo que está pasando entre bastidores aquí es que el estilo de exhibición está cambiando. Echemos un vistazo a esto ahora mismo. Esta es la parte que buscamos. Está justo aquí en el código pero si realmente hacemos clic derecho en él y hacemos clic en “Inspeccionar” para verlo en nuestro Inspector. Desafortunadamente, ahora está bloqueando así que lo pondré aquí abajo. Pero si volvemos a hacer clic en “Inspeccionar”, podemos ver aquí tenemos un P. Veamos qué pasa. En realidad, vamos a necesitar mover nuestra ventana del navegador por aquí. Echemos un vistazo a lo que sucede cuando hacemos clic en “Ocultar”. Aquí puedes ver desde el flash que algo está cambiando y esa es la propiedad de estilo. Ahora la propiedad style tiene display none. Si hacemos clic en “Mostrar”, la propiedad display de none desaparece, así que ocultarlo agrega una propiedad de visualización de ninguno y mostrarlo elimina esa propiedad de visualización. Ahí se puede ver cómo usando un método somos capaces de cambiar la propiedad en ese método, que esencialmente sería el mismo que si dijéramos específicamente que ir a esa propiedad de estilo, ir a mostrar y establecerlo en ninguno, pero en jQuery, es realmente fácil, todo lo que necesitas hacer es poner el método hide ahí. Mostrar obras sobre lo mismo. Otra cosa que puedes hacer es agregar un parámetro para ocultar y que determinará la velocidad que quieres que oculte, así que si quieres un poco de retraso, puedes poner en una velocidad, es en milisegundos, así que eso sería 1 segundo. También puedes usar un método de toggle que te permite básicamente usar el mismo botón o usar la misma entrada para mostrar y ocultar. Podemos hacer click en el mismo botón y se mostrará u ocultará. Si actualmente se está mostrando y haces clic en él, el toggle lo activará y lo ocultará, y si actualmente se está mostrando y haces clic en él, toggle actuará como el equivalente a punto show. Ocultar y mostrar es un efecto jQuery común. También podemos desvanecernos dentro y fuera en este ejemplo, el panel, pero en cualquier elemento para ese asunto, podemos desvanecernos dentro y fuera y podemos definir qué tan rápido queremos que eso suceda. Nuevamente, no quiero ir demasiado tiempo en todos los diferentes efectos porque ustedes chicos solo pueden navegar en su propio tiempo, pero también podemos deslizarnos así. Sea lo que sea que te lleve tener fantasía, todo tiene la convención similar. Solo necesitas buscar el nombre del método y podrás tener algunas animaciones con tu hide and show. Veamos qué hace la animación. Si hago clic en “Iniciar animación”, verás que anima y cambia el estilo de este elemento. Lo que está pasando aquí es que tenemos un método de animar y en ese método ponemos en un objeto donde definimos todos los estilos que queremos que surtan efecto al final de esta animación. Si hacemos clic y lo probamos nosotros mismos, esto va a animar este div para que quede por 250 píxeles, va a tener una opacidad del 50 por ciento al final, va a cambiar su altura y anchura. Si hago clic en “Iniciar animación”, repente pasa de lo que originalmente era a esto ahora. Eso es bastante guay. Como puedes ver hay una gama de efectos que puedes hacer en jQuery. También puedes interrumpir la animación ya que está sucediendo con este método stop. Nunca usé ése realmente antes. Otra cosa que puedes hacer es una devolución de llamada. El trato con callbacks es que las sentencias JavaScript se ejecutan línea por línea, pero con efectos se puede ejecutar la siguiente línea de código a pesar de que el efecto no está terminado. Esencialmente puedes tener múltiples líneas de código ejecutándose al mismo tiempo. No siempre va a ser lineal con efectos. Una cosa que puedes hacer, y esto no es solo con efectos jQuery sino con concepto de programación en general, especialmente con JavaScript, es tener una devolución de llamada. Aquí mismo se puede ver que tenemos ocultar y tenemos el primer parámetro como lento pero luego también podemos establecer una devolución de llamada. Esta función es lo que se llama devolución de llamada y sólo se ejecutará una vez que esto haya terminado. En realidad hay algunas situaciones diferentes en las que usarías una devolución de llamada pero en esta situación, es obvio que sólo queremos que esta alerta diga el párrafo ahora está oculto para aparecer cuando el párrafo termine de ocultarse. Si ejecutamos esto, ahora se puede ver que esto sólo aparecerá cuando el párrafo esté oculto. En realidad podemos adjuntar lo que se llama devolución de llamada al final y dirá cuando esto haya terminado de ejecutarse, ejecutar esta declaración. Eso ayuda con el tiempo en JavaScript. En este elemento final del menú, tenemos jQuery encadenado y esencialmente podemos encadenar un montón de métodos juntos, lo cual es bastante genial. Por ejemplo, este cambiaría el color de cualquier elemento con una ID de p1 a rojo, luego se deslizaría hacia arriba, luego se deslizaría hacia abajo. Si echamos un vistazo a esto, si hacemos clic en él, se deslizará hacia arriba y se deslizará hacia abajo después de que haya cambiado el color rojo y uno sucederá después del otro. No es un ejemplo muy práctico, sino un ejemplo de cómo puedes encadenar métodos de todos modos. Eso es más o menos para eventos y efectos de jQuery. Espero que puedas ver aquí ahora lo genial que es jQuery y cómo podemos combinar oyentes de eventos y efectos para conseguir algo de interactividad en nuestra página web y como te mostré cuando fuimos a la página de jQuery, si vuelvo a la página aquí, manejo de eventos y afectos es una de las cosas más comunes que puedes hacer con jQuery y una de sus características principales. En el siguiente video vamos a hablar de Traversal y Manipulación, y luego en el video después de eso, vamos a hablar de Ajax. De esa forma estaremos cubriendo las tres características principales de jQuery. Te veré en el siguiente video. 22. Recorrido de jQuery: Muy bien chicos, entonces en este video vamos a seguir aprendiendo sobre jQuery y vamos a cubrir el siguiente conjunto de características importantes en jQuery, que está atravesando y manipulando. Eso suena pantalones muy lujosos, pero ¿qué está atravesando en realidad? Bueno, significa moverse a través de diferentes elementos HTML basados en su relación con los demás. Esto es básicamente por lo que pasé tanto tiempo hablando del DOM y hablando de nodos y cómo funciona todo. Aquí puedes ver otra ilustración del árbol DOM y con jQuery atravesando, somos fácilmente capaces de movernos hacia arriba, hacia abajo y hacia los lados, partiendo de un elemento seleccionado y esto se llama atravesar. Ahora realmente no puedo explicarte lo importante que es esto para poder hacer esto hasta que realmente te atasques y tratas de armar muchas de estas cosas con un documento en vivo. Pero a veces en realidad no puedes afectar este lapso o quieres apuntar a todos los tramos de una clase de lista de algo. Necesitas ser capaz de ser flexible en cómo eres capaz de apuntar a elementos y colecciones de elementos. Si esta ilustración no tiene sentido particularmente para ti, puedes leer más aquí. Por ejemplo, los elementos div es un padre de ul y es el antepasado de todo lo que hay dentro. Todos estos son descendientes de este ul. ¿ Cómo atravesamos el DOM? Bueno, tenemos todo este menú aquí. Hablemos de ancestros. Entonces la forma en que podemos atravesar el árbol es mediante el uso de padre o padres, o padresHasta. Uno común es el padre y así lo que esto hará es que empezará seleccionando cualquier lapso y devolverá a los padres inmediatos de un lapso. Echemos un vistazo a su ejemplo aquí. Ahora estamos empezando a ponernos un poco más complicados pero esencialmente verás que tenemos tramos anidados aquí dentro de una p en esta instancia y tenemos uno anidado dentro de una etiqueta li aquí. Lo que podemos hacer es en lugar de focalizar span para cada uno de estos, podemos apuntar al padre de cualquier lapso. Podemos ir span y luego podemos usar el método parent y luego cualquier padre de span. Ahora aplicaremos esta regla de estilo dos. Echa un vistazo aquí. Aquí te dejamos una representación visual de lo que está pasando. Tenemos estos dos tramos a los que estamos apuntando a través de esto y estamos diciendo que cada padre inmediato de un lapso, queremos aplicar también la frontera roja. Se puede ver aquí en esta instancia es un li, en esta instancia es una p. No importa qué tipo de etiqueta en particular es solo mientras sea el padre inmediato de ese elemento al que estamos apuntando o grupo de elementos en este caso. También podemos devolver los padres, que devuelve todos los elementos ancestros de un elemento selector todo el camino hasta el elemento raíz del documento. No sólo selecciona al padre inmediato, selecciona a todos los antepasados. Aquí se puede ver que estamos haciendo algo similar. Estamos empezando con todos los tramos y luego estamos apuntando a todos los padres de todos los tramos. Como puedes ver aquí, tenemos un lapso y en lugar de aplicar un estilo directamente a ese lapso, lo estamos aplicando a todos sus antepasados. Tienes li, ul, div y cuerpo, todos tendrán este borde rojo. ¿Todo bien? Volviendo atrás, nos tenemos uno al otro y eso es padresHasta, así que con los padresHasta devolverá todos los elementos ancestros entre dos argumentos dados. Lo que esto nos permite hacer es dar un punto de corte, para que no vaya todo el camino hasta el árbol porque todo el camino hasta el árbol, podríamos ir tan lejos como todo el cuerpo y muchas veces eso no es demasiado práctico. Lo que estamos haciendo aquí es volver a seleccionar todos los tramos y luego estamos aplicando cualquier método que tengamos aquí, que es en este caso aplicando un borde rojo, queremos que se aplique a todos los padres hasta que llegue a div. Estamos empezando aquí y estamos atravesando el DOM, ¿recuerdas la palabra traversal? y así estamos viendo a todos los padres. Aquí está el primer padre. Sí, aún no hemos golpeado div, así que aplica el borde rojo. El siguiente, no es un div aplicado un borde rojo, y este también es de un padre también es un antepasado pero no queremos aplicar el estilo porque hemos golpeado el punto de hasta que es div. Porque esto es un div, ya no estamos llegando a través de los antepasados. Bastante guay, ¿verdad? El alternativo son los descendientes y esto es un poco más común. Podemos apuntar a todos los niños, o podemos usar este método de hallazgos realmente cool para buscar a través de los hijos de un elemento en particular basado en un selector. Aquí mismo, somos capaces de apuntar a todos los hijos de div. Echemos un vistazo al ejemplo, aquí donde usar el punto de partida de todos los divs y luego estamos apuntando a todos los hijos de todos los divs. Aquí tenemos un div y estamos apuntando a todos los niños directos de este div. Usar a los niños, es diferente a los padres. Estamos apuntando sólo a los niños inmediatos, no a los nietos, o más abajo por lo que no está apuntando a todos los descendientes. Alternativamente, si queríamos apuntar a todos los descendientes y también podemos filtrar todos los descendientes por un selector en particular como aquí, podemos usar el método find y entonces lo que hace esto es que comienza con div y luego encuentra todos los tramos dentro de todos los divs y luego podemos aplicar un método sobre eso. Entonces, veamos el ejemplo para eso. De nuevo, estamos aplicando el borde rojo de dos píxeles sólidos y entonces lo que estamos haciendo aquí es que estamos encontrando todos los divs y luego dentro de divs donde encontrar todos los tramos. Afectará a todos los tramos que están dentro de un div, lo cual es bastante común. Ahora mismo puedes ver que todos los tramos están dentro de divs pero si tuviéramos que poner y ahora el lapso en el exterior de un div. Entonces como puedes ver, este lapso no está dentro de un div y hacemos clic en ejecutar. Esto no tendrá un borde de rojo, dos píxeles sólidos. Tiene que estar dentro de un div. Casi se puede pensar en esto como todo se extiende con ancestros de div. Volviendo a aquí, también podemos devolver todos los descendientes de un div usando este asterisco. Intentando eso nosotros mismos, si quisiéramos apuntar a todo lo que es descendiente de un div, podemos usar este asterisco. Ahora dije que quería volver aquí y lo que podemos hacer es usar este pequeño filtro aquí que hemos usado en find y podemos ponerlo como una propiedad en el método de los niños también y así lo que eso hace, muy similar a encontrar. Encontrará descendientes que solo son hijos inmediatos de todos los divs y se ajustan a esta regla de selección en particular. Recuerda de CSS, esto seleccionará todas las p's con una clase de primero. Tenemos un p con una clase de primero aquí y tiene un antepasado inmediato de div, básicamente div es su padre. Estamos aplicando ese estilo mientras que podemos bajar a aquí y podemos ver que esto no tiene la clase de primero, por lo que no afecta aquí. Si fuera a quitar esta parte, que filtra por clase y volver a correr, verás a cada niño inmediato que es una etiqueta p de un div tendrá este borde. Pero si tuviéramos que quitar este filtro por clase y realmente no podemos poner una p dentro una p. Digamos que estamos buscando hijos div de div y recordemos que esto es sólo niños inmediatos. Si iba a poner otro div, digamos aquí y luego este div, voy a decir: “Hola”. Vamos a correr eso y puedes ver aquí que ahora estamos apuntando a divs infantiles inmediatos de un div. Entonces ahí vamos, esos son dos métodos que podemos usar para apuntar a descendientes y atravesar por el árbol DOM. También podemos atravesar de lado en el árbol DOM usando todos estos diferentes selectores de hermanos. De nuevo, no quiero entrar en gran detalle aquí. Si entiendes ancestros y descendientes, entonces podrás entender a los hermanos con bastante facilidad. Esto va a apuntar a todos los hermanos de cualquier h2's y esto va a apuntar a todos los hermanos de h2's que tengan una etiqueta de p. Muy bien, así que más o menos la misma convención que antes. En lugar de niños, ahora estamos apuntando a los hermanos. Entonces si puedes entender estos, puedes entenderlos bastante bien también, creo. Pero está todo aquí como referencia si necesitas referirte a ella, tenemos SiguienteHasta igual que el parentHasta, por lo que conceptos muy similares. Por último, tenemos el filtrado jQuery y podemos usar esto para encontrar al primer hijo usando el primer método, el último hijo usando el último método, y el método eq, que seleccionará un elemento secundario con ese índice. Sólo te lo mostraré brevemente. Aquí se puede ver que tenemos un montón de etiquetas p y en este caso, la primera p sería el primer hijo, segundo hijo, tercer hijo, cuarto hijo y así en esta instancia podemos tomar la segunda p. Recuerda que somos usando números de índice aquí, por lo que uno realmente representa el segundo índice. Podemos apuntar al segundo índice usando eq aquí. Entonces si quisiéramos apuntar a la etiqueta del primer párrafo, sólo poniendo un cero para apuntar a la etiqueta del tercer párrafo, pon los dos y ahí vas. Podemos aplicar un color de fondo a eso. Está bien, también podemos usar este método de filtro el cual pone otra condición en este selector por lo que queremos todas las p, pero entonces solo queremos filtrar por p es que tienen la clase de intro. No estoy seguro de por qué existe ese, porque probablemente podríamos lograr lo mismo con sólo ponerlo en el selector así. A ver si eso funciona. Sí, así que eso tiene el mismo efecto no estoy seguro de cuál es la diferencia ahí y también podemos hacer lo contrario que es target o p's y luego filtrar todo lo que es clase de intro en nuestra selección. Eso tiene mucho más sentido. Todos los p's excepto aquellos con la clase de intro, vamos a aplicar esto a. Está bien, así que eso cubre más o menos muchas de las cosas que puedes hacer si atraviesa. En el caso de la manipulación, quiero decir, tienes una gama de opciones diferentes aquí. Echemos un vistazo a jQuery get. Aquí hay tantos métodos diferentes que puedes cambiar, HTML es uno común. En cuanto a la manipulación, creo que este video sobre travesaño ya ha tardado bastante. Voy a cubrir la manipulación en el siguiente video, y vamos a pasar por este menú así que te veré en el siguiente. 23. Manipulación de jQuery: Muy bien todos. Recuerda en el último video, acabamos de terminar atravesando en jQuery. Ahora sabemos cómo obtener un punto de partida, apuntar a un elemento o grupo de elementos en particular, y luego atravesar arriba y abajo el árbol DOM. Pero ahora, una vez que seamos capaces de seleccionar algún elemento particular de grupo de elementos, ¿cuáles son algunas de las cosas que podemos hacer para manipularlos? En este menú para jQuery HTML, tenemos algunos ejemplos e información sobre la manipulación DOM. Algunos comunes aquí, texto, HTML, y val, estos hacen cosas diferentes dependiendo del contexto. En este contexto en particular donde estamos tratando de concatenar una cadena, y sólo estamos poniendo texto aquí sin argumento, lo que estamos haciendo es pedirle a jQuery que nos dé el texto de este elemento en particular. Entonces cualquier elemento con el ID de prueba, queremos traer el texto de eso, y aquí, igual que el texto, hay otro llamado HTML, que incluye el marcado HTML no sólo texto. Por ejemplo, si este elemento con un ID de prueba tuviera elementos anidados, traería eso también. Echemos un vistazo al ejemplo. Como puedes ver aquí, tenemos dos oyentes de eventos configurados el botón 1 al click ejecutaremos esta función la cual nos dará una alerta. Empezará con el texto de cadena y luego agregará el valor de texto de prueba, que en este caso es éste porque este es el elemento con un ID de pruebas. Vamos a mostrar texto. Ahí vamos y podemos ver aquí texto. Se trata de algún texto audaz en el párrafo que es exactamente lo que tenemos aquí. Si hiciéramos click en show HTML, podemos ver la diferencia. Podemos ver que incluye nuestro marcado HTML ahí también. Entonces volviendo a aquí, aquí abajo, se puede ver que también se puede agarrar el valor. El valor se utiliza a menudo con entradas. Entonces cuando estás haciendo un formulario, puedes ver aquí tenemos a Mickey Mouse como el valor, pero podemos cambiar eso, y cuando hacemos clic en este botón, toma el valor de esa entrada, y podemos ver aquí Mickey Ratón. Si cambiáramos eso a solo Mickey y mostráramos valor, se le ocurriría a Mickey. Ahora recuerda, dije que depende del contexto. Al ponerlo aquí, en el contexto de una alerta de salida, todo lo que hace es generar algún texto en la pantalla concatenando esta cadena con el resultado de esto, simplemente estamos obteniendo el texto. Pero si entramos en el menú de configuración aquí, podemos decir que podemos usar exactamente el mismo método en un contexto diferente, y en realidad establecerá algún texto. En lugar de recibir el texto en un elemento que tiene un ID de test1, podemos establecer el texto en un elemento que tiene el ID de test1. Echemos un vistazo al ejemplo. Aquí tenemos tres oyentes de eventos y tres botones. Si hacemos clic en el primer botón, ejecutará esta función que establece el texto de este párrafo aquí que tiene un ID de test1 a “Hola mundo”. Si hago clic en establecer texto, ahí verás que somos capaces manipular el texto en ese para que sea lo que afirmemos que sea. Aquí podemos insertar algo de HTML en test2. Demos click en set HTML y veamos que somos capaces de poner en ese HTML, y ves que ya pausa el HTML para nosotros. En realidad no vemos estas etiquetas, pero vemos el resultado del HTML. Por último, podemos establecer el valor de este campo de entrada a Dolly Duck, como lo hemos dicho aquí, y wallah, ahí tienes. Esa es una lección importante a tener en cuenta, estos tres métodos significarán cosas diferentes basadas en el contexto y esto es algo que podrías ver a lo largo de jQuery conseguir y configurar a menudo tienen los mismos métodos, pero el contexto cambiará lo que realmente hacen. Eso es todo por eso, aparte del método attr. Attr agarrará el valor de un atributo determinado, por lo que podemos agarrar el atributo href de un elemento en particular. Esto probablemente será un enlace en este caso porque tiene href. Aquí puedes ver que tenemos esto una etiqueta. ¿ Y si quisiéramos obtener el valor de este atributo? Bueno, lo podemos conseguir usando este método aquí, usando A-T-T-R y luego poniendo en el nombre del atributo que queremos agarrar. Si hacemos clic en esto, podemos ver que el valor href ahora se sale en nuestra pantalla. Si volvemos atrás y vamos al menú set, verás que podemos hacer lo mismo con atributo pero configurándolo. En lugar de un parámetro, ahora tenemos dos, así que agarramos cualquiera que sea el nombre del atributo que queremos cambiar, y ponemos en el valor que queremos que sea. También vamos a abrir un corchetes rizados con atributo y definir múltiples al mismo tiempo. Podemos decir href, queremos ser esto y titulo, queremos ser esto. Echemos un vistazo a lo que realmente hace. Si hacemos clic en esto para cambiar el href y el título, realidad no podemos ver nada que cambie en nuestra página aquí, pero si hacemos clic en inspeccionarlo y echar un vistazo al código, podemos ver que el href es ahora a lo que lo pusimos. Si muevo esto hacia un lado, podemos ver que el href es ahora esto porque hemos establecido ese valor aquí usando attr, y también hemos establecido el atributo title a w3Schools jQuery Tutorial aquí mismo. Si iba a cambiar esto a título un enlace impresionante, vamos a correr eso, y entonces vamos a inspeccionar ese elemento. Ya verás aquí que el título es algún título hasta que hacemos clic en el botón y luego ahora es un enlace impresionante. Podemos tanto conseguir como establecer con attr también. Bajando el menú, podemos ver agregar aquí. Para agregar elementos y contenido, tenemos anexar, anteponer, después, y antes. La diferencia entre todos estos se anexa insertará contenido al final de los elementos seleccionados. Antepend lo pondrá al principio, después pondremos el contenido después de los elementos seleccionados, y antes lo insertaremos ante los elementos seleccionados. Entonces echa un vistazo a esto aquí mismo. Tenemos una etiqueta p, y vamos a anexar algún texto a esa etiqueta p. Si entro al ejemplo aquí y hago clic en anexar texto, tenemos oyentes de eventos en este botón y en cuanto haga clic en este boton1, encontrará todos los ps y anexará esta cadena particular de HTML. Tenemos dos ps aquí y ahora si hacemos click derecho e inspeccionamos esto, veremos que tenemos un trozo de texto anexado con las etiquetas b ahí dentro para ponerlo en negrita dentro de esa p. Nuevamente, hay muchas maneras en las que podemos hacer esto. También podemos anteponer antes y después. Te animo a ir a leer esta referencia. No entremos en todos los ejemplos en este momento, pero también puedes eliminar ciertos elementos, vaciar los elementos hijos de un elemento seleccionado. También puedes manipular CSS agregando clases, eliminando clases, conmutando clases y puedes usar la propiedad CSS para cambiar el valor de establecer propiedades. Como pueden ver, sólo estoy corriendo por el final aquí. Tienes la referencia aquí mismo si lo necesitabas. Pero esencialmente, lo que quería mostrarles eran estos comunes para conseguir y establecer cosas comunes que necesitarás hacer una vez atravesar el DOM, seleccionar lo que quieres seleccionar, y luego venir aquí a manipular. Eso cubre más o menos la segunda característica central de jQuery, travesaño y manipulación. En el siguiente video, vamos a cubrir la tercera característica más grande de jQuery y esa es AJAX, y luego después de eso te meterá en tus proyectos de clase. No mucho tiempo ahora hasta que estés listo para salir al mundo y hacer esto tú mismo. Tengo muchas ganas de atraparte en el siguiente video en AJAX. Te veré entonces. 24. AJAX de jQuery: Muy bien chicos, entonces en nuestro video final en jQuery, vamos a cubrir AJAX. Solo buceemos directamente y cubramos la introducción. Como puedes ver aquí, utiliza el mismo ejemplo anterior al que vimos cuando cubrimos una introducción a AJAX y JavaScript, ya hemos cubierto lo que hace AJAX. Pero en términos de jQuery, lo que podemos hacer con AJAX es crear una llamada AJAX usando jQuery son métodos, que aquí abajo se puede ver sin jQuery, codificación AJAX puede ser un poco complicada. Es complicado porque como diferentes navegadores con sintaxis diferente, y como veías antes, si solo menciono ese ejemplo de AJAX de cuando estábamos haciendo JavaScript vainilla, esto es con lo que estás lidiando cuando estás haciendo una llamada AJAX usando JavaScript sin jQuery. Aquí en la siguiente página, se puede ver cómo podemos usar jQuery para cargar en algún contenido usando AJAX. Aquí mismo, el ejemplo más sencillo es la carga. La carga de puntos es simple pero muy potente como lo afirma aquí y nos permite cargar datos desde un servidor y pone esos datos de retorno en un elemento seleccionado. Esto es un don del cielo, así que intentémoslo nosotros mismos, y como ven aquí, podemos simplificar toda esta compleja llamada AJAX simplemente usar.load, y eso cargará cualquier contenido que esté en este archivo en lo que aquí se seleccione. Estamos seleccionando todos los elementos con un ID de div, que debido a que estamos usando ID, solo debería ser uno en la página, y está justo aquí. Ahora si hago clic en este botón, ahora, verás que todo dentro de este div ahora ha cambiado porque está cargado en algún contenido externo. Realmente genial. También puede agregar un selector jQuery al parámetro URL. Aquí cargarás contenido del elemento con un ID de p dentro del archivo demo test.txt en un div. Básicamente te permite filtrar. Yo solo quiero que elementos con un ID de p1 de este archivo en particular se carguen en este elemento en particular que está en nuestra página. Si miramos y lo probamos nosotros mismos. Nuevamente, no podemos ver el contenido de esta página en particular, pero lo podemos imaginar. Si hago clic en esto, se puede ver que sólo vamos a obtener la parte del archivo de texto que es un elemento del ID de p1. Aquí sólo obtenemos el elemento con una ID de p1. Probablemente más común que la carga en mi experiencia, es conseguir y publicar AJAX. Nuevamente, necesitas un back-end para que esta o alguna fuente de datos se conecten, por lo que es difícil mostrar un ejemplo concreto, pero podríamos llegar a eso en el proyecto de clase, el jQuery GetMethod solicitará datos de un servidor con una solicitud GET. En desarrollo web y programación back-end, están estas solicitudes, código, gets, y publicaciones. Esto es hablar más sobre el desarrollo web de backend. Pero esencialmente, lo que estamos haciendo aquí es obtener datos cuando hacemos una solicitud get. Aquí mismo, si uso este getMethod, puedo apuntar a la dirección específica, entonces inicio una función con dos parámetros, datos y estado, y puedo recuperar los datos y el estado. Echemos un vistazo a cómo se ve eso. Si hago clic en este botón, obtendré una alerta y volverá con los datos de que vuelva de esta dirección, y volverá con un estado también. Si hago clic en estos datos, se trata de algunos textos de aquí al archivo ASP externo, estado, éxito. Obviamente, el estatus es el éxito porque recuperamos los datos. Eso es bastante bueno. Si voy a inspeccionar esto y entro en red, ojalá pueda mostrarles lo que está pasando aquí. Pasemos esto a un lado, y despejemos esta consola. Si hago clic en esto, ya verás que hemos hecho una llamada a demo subrayado test.ASP, y ahora en realidad podemos entrar e inspeccionar lo que pasó. Hicimos una solicitud get a esta URL en particular, y el código de estado es 200, que es verde y tan bueno, y obtenemos un montón de otra información toda aquí. Pero yo sólo quería demostrar, no hay que entender completamente cómo usar este panel, pero sólo estoy demostrando que una solicitud sucedió en segundo plano, y recuperamos algunos datos con éxito. Si vuelvo aquí, podemos publicar datos usando el método de publicación jQuery, lo que los parámetros para esto serán el lugar que queremos enviarlo, los datos a enviar, y el parámetro callback, lo que queremos que suceda al final. Tenemos algo similar aquí. Se va a confirmar que pudimos enviar estos datos a esta dirección en particular. Si hago click en esto, dice, Data: Querido Donald Duck. Espero que vivas bien en Duckburg” y el estatus sea exitoso. En lugar de recuperar esa información, en realidad tenemos la información aquí y la estamos enviando a esa dirección. Nuevamente, no tiene sentido perfecto, sentido práctico perfecto hasta que tengamos un backend o punto de datos del que enviar o sacar, pero eso es AJAX. Esencialmente, esta es la interfaz de JavaScript con el backend. y así tendrás que entender lo que está pasando en estas direcciones particulares también que tendrá que pasarte ya sea por tu propio conocimiento del back-end que te has tratado o por alguien que sea un back-end desarrollador o fuente de datos, o estás usando una API, es posible que necesites revisar su documentación y ver a qué necesitas hacer tu solicitud. Pero por supuesto, AJAX es probablemente uno de los temas más complejos en jQuery. Se puede leer más al respecto. Pero en realidad, no entenderás completamente AJAX hasta que tengas una comprensión del backend también, porque el backend es de donde vas a obtener los datos. Eso cubre jQuery para nosotros. Ahora estoy emocionado chicos, porque es hora de su proyecto de clase. Hemos cubierto todas las bases que necesitas para empezar a trabajar con JavaScript. En el siguiente video, vamos a empezar con el proyecto de clase, y en realidad conseguir que escribas algún código. Yo estoy emocionado por eso. Te veré en el siguiente video. 25. Proyecto de clase: introducción: En los próximos videos, vamos a estar hablando de tus proyectos de clase. Como JavaScript es bastante amplio en lo que es capaz de lograr, tu proyecto de clase también es bastante amplio. Todo lo que quiero que hagas es usar tus nuevos conocimientos de JavaScript para ya sea crear un nuevo proyecto web o mejorar un proyecto web existente que tengas. Si tienes la confianza suficiente para huir y crear tu propio proyecto, entonces adelante. De lo contrario, lo que he hecho es que he creado este proyecto de ejemplo, que vamos a repasar en el siguiente video. Mi idea para esta sencilla pequeña aplicación es una página que proporciona una lista de Pokemon. realidad sólo hay dos pasos para esto. Vamos a tener un botón que se cargará en una lista de Pokemon desde una fuente externa, y luego, vamos a permitir que el usuario oculte cada uno de ellos con un clic de un botón. Honestamente, hay tantas cosas diferentes que puedes hacer con JavaScript y dependen de otros elementos y otras fuentes de datos, por lo que se sienta en el medio. Funciona mejor cuando quieres incluir funciones en una aplicación ya existente. Este es un ejemplo bastante básico, pero aún así, vas a aprender mucho de poder hacer algo como esto. De nuevo, puedes simplemente correr con esta pequeña descripción aquí, crear tu nuevo proyecto, o mejorar uno existente. No obstante, si no tienes ni idea o no sabes qué hacer, puedes seguir junto con nuestro proyecto de clase. Una vez que tengamos esto como punto de partida, puede que tengas más ideas sobre cómo mejorarlo, y podría darte un poco de confianza para expandirte en este proyecto, o devolver ese conocimiento a tus propios proyectos. De nuevo, siéntete libre de saltarte el siguiente video si solo quieres crear tu propio proyecto. Después del siguiente video, vamos a entrar a la conclusión. Siéntase libre de saltar adelante a eso. De lo contrario, si quieres unirte conmigo mientras construyo esta pequeña aplicación, entonces mantente atentos para el siguiente video. Te veré ahí. 26. Proyecto de clase: seguimiento: En este proyecto de clase de ejemplo, vamos a utilizar algunas de las cosas que aprendimos en las lecciones anteriores, como Ajax, como oyentes de eventos y un poco de recorrido del DOM también. El primer paso, cargar una lista de Pokemon de una fuente externa. Vamos a por supuesto, usar Ajax para eso. Y la fuente externa es lo que se llama API. No quiero entrar en una gran cantidad de detalles sobre las API, porque para mí al menos encuentro mucho más fácil de entender una vez que empiezo a usar una en lugar de que me lo explique. Simplemente vamos a sumergirnos directamente en eso, y luego la segunda parte es vamos a permitir que el usuario oculte cada uno de ellos con un clic de botón. Honestamente, podríamos agregar una lista de diez cosas diferentes aquí, pero esto es solo para que empieces, y los primeros pasos van a ser los mismos para cualquier proyecto JavaScript en cuanto a crear una página web, trayendo jQuery, y empezar a ejecutar algunos oyentes de eventos y diferentes funciones. Lo primero que voy a hacer es abrir una ventana de buscador. Voy a ir a mi escritorio y crear una nueva carpeta para nuestro proyecto. Simplemente lo voy a llamar proyecto JS, no el nombre más inventivo, y al igual que lo he hecho en la clase anterior en HTML y CSS, voy a simplemente copiar el ejemplo en las escuelas W3 para el HTML. Si quieres hacer lo mismo e ir a w3schools.com, solo tienes que hacer clic en HTML y te dan un ejemplo básico. Yo voy a copiar eso. Entonces voy a abrir un editor de código. El mío es átomo, y voy a crear un nuevo archivo, pegar en ese código y guardarlo de inmediato sin cambiar nada. Voy a entrar en mi proyecto y lo voy a llamar Index.html, igual que hicimos en la clase anterior. Voy a hacer alguna sangría aquí, y lo que voy a hacer es cambiar el título de la página a Pokemon, cambiar el primer encabezado a Pokemon, y en lugar de esta etiqueta de párrafo con un párrafo aleatorio ahí dentro, voy a reemplazar eso por un div, que vamos a poner el contenido. Primero lo voy a abrir y cerrar, dejar un espacio para la identificación, y voy a llamar a esto la poke-list. Antes de eso, voy a crear un botón que puedo usar para hacer click en, y luego traeré la lista de Pokemon de la fuente externa. Voy a darle a esto una identificación de botón get Pokemon, y luego voy a escribir ese texto ahí, cool. Pondré eso a un lado. Lo que quieres hacer ahora es cargarlo en tu navegador. Va a agarrar esto, arrastrarlo aquí, y ahora mismo no pasará nada porque aún no tenemos JavaScript. Dos cosas que quiero meterme en el proyecto antes de que realmente empecemos a escribir algún código nosotros mismos es Bootstrap y jQuery. Habrías visto bootstrap en la clase anterior en HTML y CSS. De no ser así, Bootstrap es solo un framework CSS. Es la biblioteca HTML, CSS, y JavaScript más popular del mundo de acuerdo a su propio sitio web, lo que voy a hacer es solo hacer clic descargar aquí, y te va a dar todos los diferentes archivos dentro de bootstrap, pero sólo nos interesan los archivos CSS. Yo voy a descargar eso. Se descargará bastante rápido. Voy a abrir una nueva ventana del buscador para navegar por mis descargas. Voy a expandir ese directorio, eliminar el antiguo directorio a la basura, y voy a entrar en CSS y simplemente agarrar bootstrap.css y luego arrastrarlo aquí. No voy a usar ninguna de las otras cosas, así que estoy feliz de simplemente eliminar toda esa carpeta, y ahí tienes. Tenemos bootstrap en nuestro proyecto. El siguiente que tenemos que descargar es jQuery. Si solo buscamos jQuery y vamos a su página web, podemos volver a descargar jQuery aquí y podemos conseguir lo comprimido o el desarrollo, no importa. Yo sólo me voy a comprimir porque ese fue el primer enlace. Voy a ir de nuevo a nuestro proyecto y voy a dar clic en Guardar. Enfriar. Tenemos los dos archivos ahí dentro. El siguiente paso es enlazar, y debes recordar esto de la clase anterior, o si ya conoces un poco de HTML, lo vamos a hacer de cabeza. Voy a vincular la hoja de estilos diciendo link rel="stylesheet”, y luego creo que el atributo es href, y es solo bootstrap.css. Entonces voy a traer el script jQuery. Voy a crear dos etiquetas de script. Voy a poner una dirección aquí. Sólo voy a copiar y pegar el nombre exacto del archivo, ponerlo ahí. Ahora lo que quiero hacer mientras estamos aquí se pone en nuestro propio archivo JavaScript, que en realidad aún no hemos construido, y un nombre común para eso es app.js o index.js o main.js. Sólo voy a llamarlo app.js. Realmente no importa cómo lo llames. Para comprobar si todo está funcionando bien, voy a hacer clic en nuevo archivo, y voy a poner en un registro de consola de js archivo cargado. Entonces voy a guardar eso y entrar en mi proyecto y usar exactamente el mismo nombre que puse en el atributo fuente. Eso fue app.js, como se puede ver aquí, app.js, app.js. Vamos a ponerle un punto y coma a eso para asegurarnos de que, ese es el final de la declaración, y ahora puedo refrescar la página. Ahora, una cosa que notarás es que el estilo ha cambiado por completo y eso es porque estamos usando bootstrap. Tan solo para arrancar un archivo, HTML un poco más antes de continuar, voy a dar al botón una clase de BTN y luego BTN primaria, y eso nos va a dar un poco de estilo de Bootstrap, y luego lo otro es, Voy a colocar todo esto en un div con el contenedor de clase. Eso lo va a hacer un poco más agradable. Verás en tan solo un segundo qué hace eso. Ahora cuando refresco la página, está en un contenedor que responde. Enfriar. Lo último que hay que comprobar si todo está funcionando es entrar a mi consola. Eso lo haré con el comando Alt I en el Mac, y voila, dice aquí js archivo cargado, lo que significa que estamos cargando en esto. Podemos decir que se está cargando en Bootstrap porque estamos consiguiendo estos estilos. Podemos decir que está cargando nuestro archivo app.js porque está ejecutando ese código no estamos confirmados aún si está ejecutando jQuery. En realidad podemos ejecutar algo justo dentro del navegador usando un selector jQuery. Voy a seleccionar el documento. Yo voy a ejecutar eso, y se puede ver que está seleccionando el documento. Sabemos que tenemos a jQuery funcionando. Sabemos que tenemos nuestro archivo JavaScript vinculado, y sabemos que Bootstrap también está vinculado. Ahora estamos listos para empezar a escribir algún código. Ahora, la API para conseguir el Pokemon es @pokeyapi .co. Voy a ir a esa página web, y como puedes ver aquí, puedes poner diferentes cosas en este recuadro, clic en “Enviar”, y te dirá cuál es la respuesta. He experimentado con esto de antemano, y para conseguir la lista de Pokemon, solo necesitamos ejecutar esa dirección, y literalmente puedes simplemente copiar el todo, realidad no te deja copiar desde aquí. Pero si fuera a entrar en un lugar diferente en mi navegador y simplemente copiar eso a través, lo verán aquí, va a salir así. En realidad tengo un plug-in que hará que los datos se vean un poco más bonitos. El tuyo se verá igual que antes, antes de que pateara. Por lo que será sólo un montón de textos como lo fue por un splits segundo. El plug-in que utilizo para eso si te interesa, es la vista JSON. Sí, si quieres que tu JSON aparezca muy bien así, con la capacidad de expandirse y contraerse. Definitivamente echa un vistazo a JSON vista. En fin, basta de esa tangente. Voy a mantener esta dirección exacta a mano porque en nuestra llamada Ajax, vamos a llamar a esta API en particular. Volviendo a aquí, lo que voy a hacer es quitar este registro de consola, y voy a empezar con un documento jQuery, y siempre comienza con la función de documento listo. No te pongas al día con lo que estoy haciendo aquí mismo. Es una función bastante estándar, siempre va a lucir más o menos igual. Es solo cuestión de memorizarlo, y dentro de esta función, vas a poner en la página todas las demás funciones que quieras ejecutar. Esto solo asegura que el documento esté listo antes de empezar a ejecutar estas funciones. Lo primero que quiero hacer es configurar un oyente de eventos, y el oyente de eventos que quiero configurar es comprobar si se hace clic en este botón, y en el click vamos a cargar en la lista de Pokemon. Voy a iniciar un selector jQuery. Recuerda que llamamos al botón, consigue el botón Pokemon. Voy a abrir eso, poner un # adentro porque así es como apuntamos los identificadores, y voy a usar este método para crear un oyente de eventos. Función y luego todo lo que pongamos dentro de este bloque de código será lo que pase cuando hagamos clic en ese botón de Pokemon. Podríamos probar esto y poner en el botón de registro de la consola clicado, y ahora si vuelvo a esta página con mi consola abierta, si hago clic en el botón, puedes ver y este número subirá. En realidad no lo va a repetir. Simplemente pondrá un número a su lado. Si es exactamente lo mismo, verás subir este número y salir el texto, botón clicado. Sabemos que este oyente de eventos está funcionando. Pero lo que quiero pasar es que quiero hacer una solicitud Ajax a esa API y traer esos Pokemon. Lo que voy a hacer es hacer una solicitud get usando jQuery, y el primer parámetro va a ser la URL. Esta es la URL justo aquí. El segundo parámetro va a ser una función. Solo para recordar cómo creamos esta función get, voy a volver a las escuelas W3 e ir a la sección jQuery e ir al menú de jQuery get posts. Como se puede ver aquí, el primer parámetro es la URL y el segundo parámetro es la devolución de llamada, y luego la devolución de llamada, podemos poner una función con dos parámetros. Uno será el dato y otro será el estatus. Voy a poner esos parámetros, poniendo mis corchetes rizados, y siempre me gusta terminar cada declaración con un punto y coma inmediatamente para que no me confunda. Voy a crear un poco de espaciado aquí sólo para darnos un poco de espacio para respirar, hacer que sea más fácil de leer. Ahora que tenemos esta función get escrita, lo que podemos hacer es agarrar los datos. Nuevamente, esto es algo que hago con bastante frecuencia. Simplemente voy a consola de registro en diversas etapas para ver dónde estamos. Si hago clic en “Obtener Pokemon”, y tomará un poco de tiempo porque lo está agarrando de una fuente externa. Ya verás que tenemos este objeto entra a nuestra consola ahora. Se trata de los datos que se están devolviendo desde esta URL. Como puedes ver hay diferentes elementos en este objeto. Una de ellas es una matriz llamada resultados con todos los diferentes resultados aquí. Esta es la lista que buscamos para poner en pantalla. Lo que voy a hacer es usar un bucle para recorrer todos estos y construir una cadena que luego pondrá en ese div que creamos aquí mismo, pero no tiene nada en él. Tengan conmigo como hago esto. Esto será un poco de código, pero esencialmente lo que vamos a hacer es crear primero la cadena. Voy a llamarlo var string. Para empezar, voy a abrir una UL, por lo que una etiqueta de lista desordenada. Aquí se puede ver el operador de concatenación, esto se agregará a la cadena. De hecho, deberíamos configurar esto con una cadena vacía para empezar. Voy a poner en la UL porque queremos eso antes del bucle. Voy a poner algo para después del bucle, que será la etiqueta de cierre. Entonces voy a hacer el bucle. Definitivamente cubrimos cómo hacer bucles, pero no te mostramos la forma jQuery de hacer un bucle. El modo jQuery de hacer un bucle es con este punto cada método. Vamos a ir a la documentación de jQuery y tecleemos jQuery cada uno. Aquí puedes ver una descripción. Se puede utilizar para iterar tanto sobre objetos como sobre matrices. Muy cool poca función. Como se puede ver aquí, ponemos el objeto o la matriz como un primer argumento, y luego tenemos la función o la devolución de llamada como segundo argumento o parámetro en esta función. Podemos poner parámetros aquí para índice y valor. Con eso en mente, voy a agarrar resultados de datos. Recuerda que ahí fue donde estaba la lista de Pokemon. Entonces voy a poner en mi valor de índice de devolución de llamada. Va a poner un punto y coma ahí. Lo que voy a hacer aquí es agregar un elemento de lista a esta lista aquí que acabamos de crear. Voy a poner en la etiqueta LI. Voy a cerrar esa etiqueta de LI y poner un punto y coma solo para tener claro que hemos terminado. Entonces voy a poner en el valor. El paso final es poner esto en la pantalla. Como dije, lo vamos a poner en este div poke-list. El primer paso es seleccionar ese div usando un selector jQuery. Voy a usar el hash para seleccionar cualquier elemento con una ID de lista de poke, que es solo éste. Entonces voy a usar el método HTML en el contexto establecido para poner en la cadena que acabamos de generar. Si presiono “Guardar” en eso, vuelva al proyecto, haga clic en “Obtener Pokemon”. Se puede ver que viene con solo objeto, objeto, objeto. El motivo por el que está haciendo eso es porque dentro de cada uno de estos resultados, hay otro objeto. Aquí puedes ver en el primer resultado, tenemos un objeto con dos atributos, un nombre y una URL. Necesitamos realmente romper esos y usarlos por separado. Lo que voy a hacer es aparentemente que tenemos un enlace ahí, voy a configurar una etiqueta de enlace. Voy a poner un href aquí. Esto podría ser un poco confuso porque estoy usando la interpolación de cadenas aquí. Pero lo que está pasando aquí es que necesitamos usar comillas para abrir la definición de cadena. Entonces aquí estamos tratando de poner en realidad una cotización para el atributo. Sólo tenemos que asegurarnos de que estamos alternando entre las comillas dobles y las simples, y deberíamos estar bien. Esto significa que estamos iniciando una cadena, entonces estamos poniendo una comilla que va a ser parte de la cadena. Entonces estamos cerrando esa cuerda. Usando las más podemos concatenar y entonces esto significará que estamos reabriendo y luego poniendo y terminando ahí. En realidad llegamos a poner ahí una etiqueta de cierre. Aquí, voy a poner en la URL. En realidad es un valor dentro de este valor, que es un objeto de punto. Eso será valor.url. Entonces aquí se va a valorar.nombre. No creo que el valor realmente tenga sentido en este contexto. Podemos cambiar el nombre de este parámetro. Voy a volver y voy a llamarlo artículo. Creo que eso es un poco más descriptivo. Es el item.url y el item.name. Si guardo eso, refresca la página, haz clic en “Obtener Pokemon”, puedes ver ahora aparece una lista. Puedo hacer click en cualquiera de estos y me llevará al núcleo API más detallado para este Pokemon en particular donde se pueden ver sus habilidades, se pueden ver sus estadísticas y otros bits de datos relacionados con este Pokemon específico. Lo que querrías hacer es construir una página específica para eso, tirando de los datos. En este video, no vamos a entrar en ese segundo paso, pero siéntete libre de hacerlo. Lo que haré en su lugar es demostrar uno más onclick EventListener, y usando ese onclick EventListener, podemos ocultar diferentes elementos de esta lista. Si entro aquí, realmente no quiero listar más. Yo quiero convertir esto en una mesa. Lo que voy a hacer es cambiar UL a mesa. Voy a cambiar LI a TR por una fila de tabla. Por supuesto, esto va a necesitar convertirse en una celda de mesa, así que voy a poner ahí una celda de mesa abierta y cerrada. Entonces voy a crear otra celda de tabla. Dentro de ese TD, voy a poner otro botón para abrir y cerrar etiquetas. Dentro de esos la etiqueta para el botón. Aquí para que pueda apuntarlo, voy a poner en un nombre de clase de botón Ocultar. Recuerda que ya estamos usando comillas simples para definir la cadena, así que tenemos que usar comillas simples aquí si queremos que estas comillas sean parte de la cadena. Si hago clic en guardar eso y ejecuto esto, se puede ver que ahora tenemos una tabla, o tal vez no sea tan obvia, pero esta es una tabla con botones Ocultar. De nuevo, estamos usando Bootstrap para que esto se vea mucho más bonito realmente rápidamente. Lo que voy a hacer es poner algunas clases para que se vea más bonito. Primaria y aquí voy a darle a la mesa una clase de mesa. Ahora, si hago clic en ejecutar Pokemon, puedes ver que el estilo ha cambiado un poco. Hay más espaciado, hay líneas entre las filas y los botones son un poco más bonitos. Enfriar. El siguiente y último paso será enganchar estos botones Ocultar y en realidad conseguir que oculten la fila en la que están. Para ello, voy a configurar otro EventListener y voy a usar el punto porque estoy apuntando a una clase. Voy a encontrar todos los botones de ocultar y ponerles un EventListener sobre ellos. Ocultar botón. Voy a usar la misma convención que antes. Tenemos click, luego función, abriendo bloque de código. De lo que quiero pasar dentro de este EventListener, solo voy a ampliar aquí para que puedas ver toda la línea en la página. Básicamente, soy capaz de encontrar en qué botón se hizo clic usando el selector de esto. Pero entonces no quiero ocultar sólo el botón, quiero ocultar toda la fila. Si utilizamos nuestro conocimiento de DOM Traversal para subir el árbol, tenemos este botón y el padre de ese botón es una celda de tabla. El padre de esa celda de tabla es la fila. Podemos apuntar a la fila principal del botón iniciando primero un selector jQuery usando la palabra clave esto, y luego moviendo hacia arriba el DOM usando parent una vez y luego parent una segunda vez para obtenerlo aquí. Entonces a partir de ese punto, sólo podemos ejecutar la función que queremos ejecutar en ella. Daré clic en “Guardar” y volveremos y veremos si esto funciona. Estoy haciendo clic en él y no está funcionando. Hay una razón clara por la que. En realidad quería hacerlo mal para empezar, porque creo que esta es la forma intuitiva de hacerlo. ¿ Por qué no somos capaces de ocultar los botones? Esto es lo que es un problema con JavaScript que probablemente no obtienes en otros lenguajes de programación, en realidad es asíncrono. En JavaScript, esto no terminará y luego se ejecutará esto, esto comenzará a ejecutarse y mientras eso se está ejecutando, esto irá. Especialmente con la obtención de datos de fuentes externas, eso podría llevar cualquier cantidad de tiempo. Si bien esto se está ejecutando, no quiere retrasar el resto del código. Lo que eso significa para nosotros es que necesitamos poner esto en un lugar donde sólo va a correr una vez que esto haya terminado. El modo de hacerlo es usar el status aquí. Voy a poner en un comunicado if. Si hay un status que significa si hubo una llamada exitosa, voy a entrar y poner aquí el EventListener. No te preocupes, podemos anidar EventListeners uno dentro del otro, es totalmente genial. Ponga algo de espacio ahí dentro. Daremos click en “Obtener Pokemon”. Ahora, cuando hacemos clic en el botón Ocultar, debería ocultarse. Se puede ver que es. Es encontrar al padre del botón que hicimos clic, que es TD. Entonces es encontrar al padre de aquello que va a ser la fila de padres y la está escondiendo. Puedo hacer esto por todos los Pokemon de la lista. Puedo agarrar de nuevo la lista completa haciendo click en “Obtener Pokemon”. Puedes ver aquí abajo, aún tenemos nuestro registro de consola. Yo sólo puedo deshacerme de eso ahora. Ahora tenemos una consola limpia y una aplicación de trabajo limpio. Espero que eso te ayude a ver en un entorno práctico cómo traerías tus conocimientos de scripts Java. Espero que esto no fuera demasiado confuso para ustedes. De nuevo, vas a aprender haciendo. Lo que te sugeriría que hagas para aprender esto es crear tus propios proyectos, investigar cómo hacer estas cosas, y luego seguir adelante y probarlas. Si no funciona, empieza a depurar, que es en realidad lo que vamos a estar cubriendo en el próximo video, que va a ser nuestra lección extra. Vamos a aprender a depurar cosas en la siguiente lección. Si alguna vez estás atascado y quieres depurar, echa un vistazo a esa o tal vez quieras revisarla de inmediato. Depende de ti. Pero eso es básicamente los inicios de nuestro pequeño proyecto de clase ejemplo. A mí me emociona ver lo que se te ocurre y te veré en el siguiente video. 27. Extra: depuración con Console.log: Ahora sí vimos un poco de esto en la lección anterior cuando creamos esta app Pokemon. Pero quería entrar un poco más de detalle sobre cómo harías averiguar cuáles son los problemas con tu código y luego depurarlos. Antes de la mano, había un buen ejemplo donde no funcionaba si tenía este oyente de eventos fuera de esta llamada AJAX. Si tan solo muevo eso y lo eliminaré también, sólo para que no esté flotando ahí vacío. Ve aquí, y aquí es donde estaba antes, creo que no, en realidad, estaba aquí. De todos modos. No importa, ha sido el lugar equivocado independientemente. Voy a dar click en “Consigue Pokemon”. Ahora como veo, no está funcionando, podría estar pensando, bueno, ¿por qué es eso? Podría volver y podría mirar este código y podría ver eso, sí, no hay errores tipográficos. Debería estar desencadenando. Esto no es ocultar ese botón. Algo que uso con bastante frecuencia es el registro de consola, porque en JavaScript, no va a flecha cuando no puede encontrar esto.parent. Simplemente no va a hacer nada. Eso es frustrante cuando quieres saber cuál es el tema. Una herramienta realmente útil es console.log. Voy a comentar esto para que ya no se ejecute, y voy a usar un console.log para solo comprobar si el oyente de eventos realmente está funcionando. Voy a poner el botón de palabras en el que se hace clic, pulsar “Guardar”, va a conseguir Pokemon, y voy a hacer clic en estos botones. El texto no está saliendo en nuestra consola, lo que significa que esto no se está ejecutando en realidad, hay algo mal con esta parte del código. No es necesariamente esta parte del código porque todavía no está sucediendo incluso cuando nos deshacemos de esto. Entonces tenemos que pensar en lo que está mal con esta parte y una de las cosas con JavaScript, como dije en el último video, ese es un problema es el tiempo. Para que esto funcione realmente, tiene que haber un montón de botones de ocultar en la página ya. En cuanto se ejecuta este código, se configura el oyente de eventos y no se actualiza cuando llegan nuevos elementos a la página con esta clase. Es necesario asegurarse de que todos los botones de ocultación que desea que aplique el oyente de eventos ya se hayan cargado en la página antes de comenzar a ejecutar este oyente de eventos. Eso es algo que incluso tropieza con desarrolladores experimentados. Hay que tomar en consideración cuando el oyente de eventos se está ejecutando porque no toma en cuenta nuevos elementos a medida que llegan a la página. Una de las formas en que arreglamos eso fue asegurándonos de que esperábamos hasta que finalizara la llamada AJAX antes de ejecutar esto. Pondré eso de nuevo aquí y a ver si el botón al que se hace clic aparece ahora, cosa que sí. Podemos deshacernos del registro de consola ahora, ver si esta línea de código está funcionando, cuál debería ser. Sí, lo es. El otro área donde puedo ver console.log ayudando aquí es averiguar cuáles son estas cosas diferentes. Tienes esta API y la puedes ver aquí. Estos son los datos pero para navegar por ellos, podría estar apuntando a diferentes partes de la respuesta, que es una respuesta JSON. Es posible que estés buscando en los lugares equivocados. Como teníamos antes, tal vez sólo tendré artículo aquí y no profundizaré en el ítem para sacar la URL y el nombre. Si entro de nuevo a la app y hago clic en “Obtener Pokemon”, va a tener objeto de clase. Si miras en lo real, no puedo mostrarte al mismo tiempo pero justo encima de la consola aquí, si miras mientras estoy rondando, la dirección del enlace es objeto Object también. Si haces click en eso, obviamente eso va a ser un eslabón roto. Conseguir Pokemon otra vez. En esta instancia estamos como, vale, eso no es muy descriptivo. ¿ Cómo obtengo el nombre real de eso? Una de las formas en que podríamos hacerlo es usar el registro de consola. Entraré al registro de la consola y acabaré de emitir el elemento. Entonces haré clic en “Obtener Pokemon”, y puedes ver aquí el ítem para cada ítem de la lista. Como puedes ver aquí, tenemos estos objetos. Deberías poder entender que se trata de un objeto, es un corchete rizado con un par de valor de nombre. Si hago clic en “Expandir” eso, tengo nombre y URL dentro de eso. En este punto, deberías ser como, veo, tengo un objeto aquí. No es de extrañar, ya que lo estoy poniendo como una cadena que no está funcionando y apenas está llegando con este texto aleatorio. Necesito entrar realmente en el objeto, donde hay cuerdas, justo aquí y justo aquí. Volviendo a nuestro proyecto, sólo voy a revertir esos dos cambios y estamos de vuelta a donde empezamos. También podemos inspeccionar índice y tal vez queremos usar índice en nuestro proyecto. Sólo voy a usar el registro de consola de nuevo. Ahora cuando hago clic en “Obtener Pokemon”, se puede ver que tiene el número de índice, que es sólo cero a cuantos haya. Otra cosa que podemos hacer si somos una consola registrando múltiples cosas, porque tal vez queremos comprobar múltiples cosas, es que en realidad podemos combinar una cadena con una variable. Puedo poner índice, colon y luego poner una coma, y luego poner en el índice real. Podemos ver aquí que nos dice Índice y nos dice el valor que estamos tirando. Esos son algunos ejemplos de usar el registro de la consola para inspeccionar las cosas dentro de su código y luego averiguar dónde están los problemas y solucionar un poco, depurar un poco. medida que construyes un proyecto más complejo, vas a tener que resolver problemas más complejos y esa es solo la naturaleza de la bestia. Espero que este video aunque comparte contigo un proceso completo en JavaScript cuando tienes un problema y no estás recuperando ningún error, cómo realmente te darías cuenta de lo que realmente está pasando en la tarjeta y averiguar qué ciertas cosas están usando el registro de la consola. Ese fue el episodio de bonificación. Tengo eso fue valioso. En el siguiente video, vamos a terminar la clase y tú vas a empezar en tu proyecto de clase si aún no lo has hecho. Te veré en el siguiente video. 28. Conclusión: Espero que ya estés listo para empezar a traer algo de JavaScript a tus propios proyectos web. Nuevamente, como mencioné en esta clase, es un poco complicado traer todo lo que hemos aprendido aquí hoy a un solo proyecto, pero espero que tomes lo que hemos aprendido aquí y construyas algunas de tus propias ideas de Website. O tal vez simplemente agregue algo de interactividad a su sitio web existente. Recuerda, si necesitas algún consejo o orientación, asegúrate de dejar un comentario en el recuadro de discusión, y haré todo lo posible para señalarte en la dirección correcta. Eso concluye esta clase en JavaScript. Como hemos aprendido en esta clase, JavaScript es uno de los tres lenguajes principales que utilizamos para desarrollar en el front end, ahora con esta clase y la clase anterior, deberías estar bastante cómodo con el desarrollo para el frontend. Por supuesto, se vuelve más complicado a medida que traes marcos JavaScript más complejos como React, Angular o Backbone. Pero ese es todo otro tema en sí mismo y quizá un tema para futuras clases. De todos modos chicos, gracias por ver, y espero verlos de nuevo en algunas otras clases.