DOM y BOM: de lo básico a lo avanzado

1. Introducción a la clase: Hola, y bienvenidos a Mastering JavaScript Dom cos. Mi nombre es John Shokar Soy desarrollador web de FSTAc e instructor en línea. Sabemos la importancia de JavaScript en el sitio web y Document Object Model y browser El modelo de objetos juegan el papel clave en JavaScript. Usando Dom, podemos manipular la estructura del Stimus. Además, podemos manipular valores CSS. Podemos agregar elemento en cualquier parte de nuestra página web. Podemos animar cosas usando JavaScript Dom. Vamos a aprender muchas cosas en esta clase. Entonces hablemos de la estructura central. Al principio, te voy a dar la introducción, Qué es Dom. Entonces vamos a aprender sobre los métodos de focalización. Vamos a aprender sobre los métodos Dom gate, set method, query selector, dom css styling method, event listeners, class list method, parent elements, child and child nodes, first child, last child, Ne sibling, create element, create text, attenil all type of Entonces después de aprender todo tipo de propiedad dom, vamos a iniciar B browser object model. Aquí vamos a aprender altura de ventana, amplia ventana abierta, cerrar, mover por mover al método, redimensionar, decide desplazarse, desplazarse a objeto de ubicación, objeto de historia, página Yosete, página X Osit Este es el tutorial completo sobre Java Sweep doom and boom Si tienes conocimientos básicos sobre CSS, etiquetas HTML y Java Sweep, entonces esta clase es para ti. 2. ¿Qué es DOM?: En este tutorial, te voy a presentar lo que es JavaScript Dom. La forma completa de JavaScript Dom es el modelo de objeto de documento. Como saben, el punto más fuerte de JavaScript son los eventos. Con eso, Javascript tiene otro punto fuerte, que es Dom podemos hacer muchas cosas si combinamos estas dos secciones. Antes de trabajar con Dom, necesitamos entender qué es Dong. ¿Y qué es Dom tree? Dom es parte de HTML, y la parte más importante de Dom es el documento. Dentro de este documento, tenemos una etiqueta principal, que se conoce como etiqueta TML De lo contrario, podemos llamarlo etiqueta de aro. Y luego vienen a la etiqueta hijo de la etiqueta HTML, que es la etiqueta de cabeza y la etiqueta del cuerpo. Etiqueta de cabeza y etiqueta de cuerpo, ambos son hermanos y ahí ag padre es etiqueta HTML. Ahora, hablemos de etiqueta de cabeza. etiqueta de título es una de las etiquetas hijo de la etiqueta de cabeza dentro de esta etiqueta de título, podemos escribir cualquier texto. Por ejemplo, solo tecleamos website. Del mismo modo, en nuestra etiqueta corporal, podemos crear múltiples elementos hijos. Por ejemplo, podemos crear la etiqueta Np. Se utiliza para navegación y una etiqueta de rumbo, H uno. Dentro de la etiqueta de navegación, podemos usar la etiqueta de anclaje como un niño y dentro de la etiqueta de anclaje, puede pasar cualquier texto. En nuestro caso, tecleo sobre nosotros. También podemos establecer un atributo a nuestra etiqueta de anclaje, que es class, de lo contrario, ID. Del mismo modo, podemos pasar un nodo de texto en nuestra etiqueta de encabezado. Además, podemos establecer ID de atributo. Con eso, también podemos establecer otra clase de atributo a nuestra etiqueta de encabezado. Este atributor también funciona como etiquetas hijo. Todo el atributo y elementos, puedes ver aquí, llamamos a todos estos nodos en JavaScript. Este es nodo de elemento, este es nodo de texto, este es nodo de atributo. Ahora se podría pensar, ¿cuál es el uso de la misma en JavaScript? Aquí solo te presento, ¿ qué es el árbol Dm? Usando este árbol Dm, puedes hacer dos cosas en JavaScript. Al principio, puedes obtener theta del árbol Dm. Supongamos que desea extraer el nombre de ID de este atributo. En ese caso, es necesario utilizar la palabra clave G, especialmente GT es un método. Puedes obtener cualquier valor usando este método. En el sentido contrario, si quieres establecer un nuevo valor a tu estructura de domo, en ese caso, necesitas usar el método set. Se puede establecer un nuevo valor a este texto. De lo contrario, puede crear un nuevo nodo como elemento hijo. De lo contrario, se puede crear un nuevo elemento dentro de un elemento. Si quieres crear una animación usando la ayuda de JavaScript, lo contrario, si quieres desarrollar juegos, cualquier cosa que quieras hacer con tu dom usando la ayuda de JavaScript, necesitas usar esto para Mod, G y sentarte. Además, puedes cambiar los atributos usando esto a Mathod. Puedes cambiar clase, ID, elementos, lo que quieras cambiar. Puede agregar un nuevo elemento STM en su documento. De lo contrario, puede eliminar el elemento SML. De lo contrario, puede eliminar elementos SML existentes. Si quieres eliminar H una etiqueta, sí, puedes eliminarla. De lo contrario, si quieres agregar otro niño, ins en la etiqueta corporal, sí, puedes. En este tutorial, solo te presento lo que es DOM. Desde el siguiente tutorial, te voy a mostrar cómo podemos usarlo práctico. Gracias por ver este video, estatua. 3. Tutorial de métodos de orientación de DOM de JavaScript: bueno verles chicos. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado JavaScript Dom. En estos tutoriales, vamos a aprender el método de focalización Dom. En nuestro tutorial anterior, ya aprendimos lo que es el árbol Dom. Con eso, te dije cuál es el uso de G y método set. Ahora la pregunta es, si quiero obtener su valor de otra manera, establece un valor, ¿cómo podemos apuntar a este elemento? Supongamos que quiero cambiar H one tech. Quiero cambiar la bienvenida a Hola mundo. ¿Cómo podemos apuntar a este elemento? A lo mejor hay mucha etiqueta H one en este documento. Cómo podemos hacerlo para apuntar a este elemento, JavaScript tiene algunos métodos especiales, y vamos a aprender los métodos especiales en este tutorial. Para apuntar al elemento Dom, hay tres métodos especiales. Podemos apuntar al elemento Dom por su ID. Además, podemos apuntar al elemento Dom por su nombre de clase. La última opción es, podemos apuntar al elemento Dom ese nombre de etiqueta. Si quieres apuntar al elemento por su ID para eso, necesitas escribir una línea especial. Entonces necesitas escribir un comando especial. Documento punto obtener elemento por ID. El documento es un objeto, y dentro de este documento, quiero buscar una identificación. Aquí dentro de las prensas redondas, necesitamos pasar el nombre de identificación. Es uno de los métodos de documento. Recuerda, necesitas escribir E, B, y yo en mayúscula. De igual manera, si quieres apuntar por su nombre de clase, en ese caso, necesitas escribir document dot, get element by class name. Dentro de los vestidos redondos, debes proporcionar el nombre de clase de este elemage Si quieres dirigirlo por su nombre de etiqueta, en ese caso, necesitas escribir documento punto, obtener elemento por nombre de etiqueta. Dentro del vestido redondeado necesitas pasar el nombre de la etiqueta. Pero sin tres, hay muchos métodos de focalización. Estos son los métodos de segmentación que voy a cubrir en nuestra serie Tutorial. Empecemos lo práctico y veamos cómo podemos usar este método. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión ligera del servidor. Ya creé un documento ETM llamado index dot HTML. Como puede ver, en este documento, creamos una estructura TML, y creamos un diseño básico de sitio web Aquí puedes ver el encabezado, y además creamos una sección de menú básico. Además, tenemos una parte de contenido y dentro de esta parte de contenido, tenemos una imagen, subtítulo, contenido del lado derecho, puedes ver una sección sidewa y tenemos alguna etiqueta de anclaje en esta lista También tenemos una sección normal de pie de página. Entonces, en este diseño básico, vamos a explorar todo el método de focalización. Puedes ver en mi archivo estim, tenemos sección de encabezado, tenemos sección de menú, tenemos sección de contenido, y además tenemos sección cibernética y pie de sección Ya vinculo un archivo Style con esta página estim, style dot CSS, y puedes ver el archivo A medida que vinculo un archivo JavaScript con el punto principal js. Ahora es un documento vacío. Si notas el nombre de ID y las clases, tenemos un envoltorio de nombre ID, encabezado, menú, contenido. Además, tenemos alguna lista de clases, barra lateral ID exterior. Para esta imagen, asignamos un nombre de clase, imagen de contenido. Guarde este archivo tal como está. Vamos a saltar al archivo JavaScript main dot js. Vamos a experimentar todos los métodos dom targeting en este archivo. Al principio, voy a declarar una variable where element. Por ahora, voy a asignar cualquier valor a esta variable. En la siguiente línea, voy a asignar un valor a esta variable. Así elemento Hemotipo igual a documento. Línea Semigonni. Ahora voy a hacer ping a este elemento en nuestra consola. Consola de hemotipo, registro de puntos dentro de la rotonda o elemento variable El Semgro dos en esta línea. Si configuro este archivo y te muestro mi sección de casos, déjame mostrarte, puedes verlo devolver documento. Es un objeto. Veamos qué hay a un lado en este objeto. Si abro este documento, se puede ver toda la estructura de TML Devuelve toda la estructura TML de nuestra página. Si escribo documento punto todo y este es este archivo, ahora se puede ver en mi consola, devuelve STM toda la colección Devuelve toda la etiqueta de nuestra página SML. Con eso, devolvió el número de índice de etiqueta. Supongamos que quiero apuntar a la sección del menú. Si me sobrepongo en Menú, puedes verlo resaltado en nuestra sección de menú. Del mismo modo, si yo sobre mis tarjetas alrededor de la sección de cabecera, se puede ver el mismo resultado. Ahora quiero devolver la sección del título. Para eso, voy a despejar la consola. Aquí voy a escribir documento Dot todo dentro de la base cuadrada, quiero devolver índice número dos. Después semicondo dos en esta línea. Si presiono Enter, como pueden ver, está escrito nuestro título. Hm. Pero si ejecuto el mismo comando aquí, déjame mostrarte dentro de la base cuadrada, voy a pasar dos y establecer este archivo, se escribe el mismo resultado. Inicio. Del mismo modo, tenemos muchos métodos de focalización. Uno a uno, vamos a explorarlo. Ayúdame a duplicar esta línea y comentar la anterior. Ahora quiero apuntar a la sección de cabeza. Para eso, necesitamos escribir documento punto d. aquí voy a escribir documento punto head. Si configuro este archivo, se puede ver en Consola, devolverá la estructura TMS de sección de cabeza Puedes ver el título, puedes ver el enlace, puedes ver la etiqueta script dentro de la etiqueta head. Quiero decir, apunta a la sección de cabeza completa. Y ahora quiero apuntar al título. Nuevamente, voy a desgandar esta línea y comentar la anterior, y voy a escribir título de punto de documento Si configuro este archivo, puedes ver el resultado. Se devuelve el título a casa. la misma manera, si quieres apuntar a toda la sección del cuerpo, puedes. Voy a desviar esta línea y comentar la anterior, y voy a escribir documento punto Bonny Voy a establecer este archivo. Después de establecer este archivo, como puedes ver, está escrito nulo. Por qué no lo sé. Ejecutemos el mismo comando directamente en nuestra consola. Aquí voy a escribir documento punto chico. Si presiono Enter, puedes ver que es la sección completa del cuerpo. Puedes ver todas las etiquetas dentro de la sección del cuerpo. Recuerda, puedes ejecutar cualquier comando de JavaScript en tu sección de cuerpo. Ahora quiero apuntar a todos los enlaces de nuestra página HTML. Aquí voy a hacer esta línea y comentar la anterior. Voy a escribir enlaces de punto de documento. Si configuro este archivo, puedes ver que es devolver algo. Si abro este menú desplegable, se puede ver que devuelve todas las etiquetas ancha y la longitud total de la etiqueta de anclaje es de ocho. Tenemos que decirle a H anchor tag en esta página. Si estoy sobre mi cursor en nuestra primera etiqueta de anclaje, puedes verla resaltar la sección de inicio. De igual manera para As, si obero mi cursor, índice número uno, destaco sobre la sección Ahora quiero apuntar particularmente al índice número dos. Ciertos enlaces, voy a usar pase cuadrado y aquí voy a pasar dos. Si configuro este archivo, se puede ver, nuevo, sentarse indefinido, por qué no sé. Voy a ejecutar el mismo comando en nuestra consola directamente. Copia este comando y aquí yo a paytge. Si configuro este archivo, puedes ver que está escrito Galería. De la misma manera, puedes apuntar a las imágenes. Quiero duplicar esta línea y comentar la anterior aquí voy a escribir imágenes de punto de documento. Si configuro este archivo, como puedes ver, está escrito en array, y si lo abro, puedes ver la longitud del array uno. Yo abro mis autos en él, como pueden ver, resalta nuestra imagen. Si quieres apuntar esta imagen para eso, necesitas escribir documento imagen de punto. Dentro de estas prensas cuadradas, necesitamos pasar el número de índice, que es cero. Los semi hacen esta línea. Si presiono Enter, como pueden ver, está escrito, está escrito nuestra etiqueta de imagen. Pero si paso un número de índice que no está disponible, déjame mostrarte imágenes de puntos de documento. Dentro de la prensa cuadrada, voy a pasar una. Los semi hacen esta línea. Si presiono Enter, como pueden ver, está escrito indefinido. Porque no hay imagen en un índice. De igual manera, puedes segmentar todos los formularios de tu página web. Voy a duplicar esta línea y comentar la anterior. Pero ahora no tenemos ningún formulario en esta página web. Por eso va a volver indefinido. Voy a ejecutar otro método de segmentación, que es doc time. Aquí hay uno. Va a ejecutar este tipo Doc desde nuestra página HTML, Doc type HTML. Si configuro este archivo, como pueden ver, se Doc tipo HTML. Esto es para este tutorial. En nuestro próximo Tutorial, vamos a cubrir los restantes. Gracias por ver este video. 4. Tutorial de métodos de orientación de DOM de JavaScript parte dos: Así que de nuevo, estoy de vuelta con un nuevo tutorial, y aquí voy a completar el método de targeting restante. Nuestro siguiente método de segmentación es URL. Este método se utiliza para apuntar a la URL del sitio web. Entonces aquí voy a escribir document.in URL de capital. Si configuro este archivo, como pueden ver en Caboo, está escrito la dirección del servidor local como RN Porque quieres salir del servidor Local Vos. Por eso está escrito esta URL. Es la misma URL, se puede ver en mi barra de URL. Ahora, similar a URL, tenemos otro método llamado domain. De nuevo voy a duplicar esta línea y comentar la anterior. Voy a escribir dominio. Si configuro este archivo, va a devolver el nombre de dominio real, déjame mostrarte. Aquí puedes ver está escrito la dirección IP y es nuestro dominio. Siempre está escrito el nombre de dominio real, no las otras páginas como URL. Similar a URL y dominio, tenemos función, que es mejor URI. Déjeme mostrar. Aquí atar documento punto base URI. Este método también devuelve la URL. Si configuro este archivo, puedes ver el resultado. Este método devuelve la URL completa. Está escrito la URL con nombre de protocolo, y nuestro protocolo es HTDP Todas estas son funciones básicas de focalización. Ahora vamos a utilizar el método principal de targeting. Al principio, voy a apuntar al elemento por su IDA. Voy a duplicar esta línea y comentar anterior y al elemento objetivo con nombre ID, necesitamos escribir documento punto, elemento puerta por ID. Dentro de las prensas redondas, necesitamos pasar el nombre de identificación. Ahora, volvamos a la página de la tabla. Aquí puedes ver una gran cantidad de ID, rapero ID, ID de encabezado, Mini, y quiero apuntar ID de encabezado. Voy a copiar el nombre. Y volvamos a mi archivo Min Dot Js. Dentro del doble código, ponlo para pasar el DM y nuestro Dym es encabezado Fijemos el archivo y veamos qué está escrito. Si configuro este archivo, está escrito nulo. Ejecutemos el código directamente en C Zoom. Copia la línea y en myc Zoo, voy a escribir documento punto get element by ID header Si presiono Enter, puedes verlo identificar con éxito nuestro encabezado. Y si lo abro, se puede ver dentro de la etiqueta de la cabeza y dentro de esta D, tenemos H una etiqueta. Ahora usando este método, quiero apuntar a Pie de página. De nuevo, voy a escribir document dot Gate element by ID y dentro del curso Double, voy a escribir Pie de página. Si presiono enter, puedes ver que está escrito el pie y D. En este tutorial, I S te enseño cómo podemos orientar los elementos por su tegname, por su ID, por su nombre de clase, etcétera Pero en nuestros próximos tutoriales, vamos a aprender qué podemos hacer después de apuntar a este elemento. Ahora voy a apuntar elemento por su clase. De nuevo, voy a hacer esta línea y comentar anterior y quiero escribir elemento Docung. Por nombre de clase. Es el down press e inserte el doble curso, tenemos que pasar el nombre de la clase Nuevamente, estoy de vuelta a la página estable. En esta página, su uso sólo un nombre de clase, contenido Imagen. Voy a apuntar esta imagen por el nombre de su clase. Voy a copiar el nombre de la clase y volver a mi archivo principal de perros. Dentro del doble curso, voy a pagar imagen de contenido estreptocócico Si configuro este archivo, se puede ver en Csoles escrito colección estable Dentro de esta colección de estimaciones, solo tenemos una clase, longitud una. Otra pregunta es cuando nos dirigimos al elemento por el nombre de la clase, en ese caso, por qué en nuestra consola la línea escrita. Pero cuando apuntamos elemento por su ID, en ese caso, se escribe directamente la estructura. Porque ID es único porque necesitamos usar ID en una etiqueta en particular. No podemos usar el mismo ID varias veces, pero para la clase, podemos usar la misma clase varias veces. Por eso está escrito en. Si notas también puedes ver la diferencia entre los nombres de los métodos, el nombre del método es get Element. Pero para la clase, necesitamos escribir get Elements. Porque el ID es único y la clase no lo es. Si quieres apuntar al índice particular para eso, necesitas pasar el número de índice. Aquí, en establecer la base cuadrada, voy a pasar cero porque el número de índice de esta imagen es cero y volver a poner este archivo, es sitter undefined. Voy a ejecutar este código en mi consola directamente. Y si presiono Enter, puedes ver el resultado. Se devuelve la etiqueta de imagen con nombre de clase contienen imagen, y ahora voy a apuntar elementos por su nombre de etiqueta. De nuevo, voy a duplicar esta línea y comentar la anterior. Y aquí, voy a escribir get elements by tag in. Y dentro de los latones redondos, tenemos que pasar la etiqueta Vamos a llegar a la página de estimación, y voy a apuntar esta vez, voy a apuntar a esta etiqueta UL. Copio la UL y en mi archivo JS, voy a payscript. Si configuro este archivo, como pueden ver, nuevamente, se escribía colección de tablas porque en un documento de estimación, podemos usar etiqueta UL varias veces. Si abro la colección de estimación, se puede ver que la longitud total de la etiqueta UL es de tres. Si te muestro mi índice ese archivo estable, aquí puedes ver, usamos etiqueta UL multiple time para sidebar para contenido, y para main. Si yo sobre mi cursor, índice número cero, como se puede ver, se resalta la sección del menú. Y luego sobre mi cursor índice número uno, destaco sección de contenido. Y si sobre el índice número dos, resalta la sección de verso lateral. Ahora quiero apuntar a la etiqueta URL particular. Quiero apuntar a esta sección de verso lateral. Voy a copiar el método y voy a ejecutar este comando en mi sección de consola y lo voy a pegar. Después de la ronda ss, necesitamos usar square *** y dentro de los jarrones cuadrados, tenemos que pasar el número de índice. Necesito pasar dos. Presiono Enter, como puedes ver, selecciona toda la sección de la barra lateral, cual está hecha con etiqueta UL, y puedes ver toda la etiqueta LA dentro de la etiqueta UL. En este tutorial, aprendemos cómo podemos orientar el elemento por su nombre de clase, por su ID y por su nombre de etiqueta. También trabajamos con otros métodos de focalización. Esto es para este tutorial. En el siguiente tutorial, vamos a aprender métodos get y set value. Gracias por ver este video estatua. 5. Tutorial de métodos de JavaScript DOM: Un placer volver a verles, chicos. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado JavaScript Dom. Y en este tutorial, vamos a aprender cómo podemos obtener valor de un documento estable. Además, vamos a aprender cómo podemos establecer valor en un documento Estable. Para ello, vamos a utilizar el método set y Gate. En nuestro tutorial anterior, aprenderemos cómo podemos apuntar a elementos Dom. Pero en este tutorial, vamos a aprender hasta apuntar a los elementos, ¿qué podemos hacer con eso? Primero, vamos a aprender lo que podemos obtener de un elemento. En JavaScript, ayuda hasta Dom, podemos conseguir tres cosas. Atm atributo de texto. Podemos obtener tres tipos de valor usando el método Gate. Para estos JavaScript tienen algunos métodos diferentes. El primer método es el texto IAT. Este método ayuda a obtener texto de un elemento. El siguiente es la tabla IRA. Está escrito el TM de este elemento, y nuestros tres últimos métodos ayudan a obtener el atributo video, gate attribute, get attribute node y atributos. Veamos cómo funciona InnerText e Inertable. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión Lifesaver y abro mi documento ETL anterior Con eso, tenemos archivo Mindjs. Al principio, voy a resolver el tema. Si recuerdas, cuando ejecutamos función body documentada en nuestra consola, se escribe null. Algunos de los comandos escritos indefinidos, de lo contrario nulos. Entonces primero, voy a resolver este problema. Como puedes ver, aquí usamos etiqueta script dentro de la etiqueta encabezada, pero necesitamos usar la etiqueta script. Corté la etiqueta script desde aquí y la voy a usar antes de que termine la etiqueta body y voy a configurar este archivo. Ahora puedes ver cuando configuro este archivo, se sienta en toda la sección del cuerpo. Ahora nuestra consola, no va a devolver null, de lo contrario undefined. Ahora podemos ejecutar cada comando en nuestro archivo principal dot js. Pero, ¿cuál es el problema? Si usamos JavaScript dentro de la etiqueta head, en ese caso, el problema principal es cuando guardamos nuestro archivo, carga la etiqueta scrip antes que la etiqueta body Por eso nuestro JavaScript no funcionará correctamente. Es por eso que necesitamos usar el extremo de la etiqueta scrip de esta etiqueta corporal Ahora ha funcionado perfectamente. Entonces vamos a llegar al archivo JS. Al principio, vamos a aprender texto inerte. Así que vamos a llegar al archivo índice punto t. Como puedes ver, tenemos un ID de encabezado, y dentro de este ID de encabezado, tenemos H una etiqueta. Y ahora quiero extraer el texto de H una etiqueta. Para eso, necesitamos atar documento punto, Gein por ID. Dentro de la prensa redonda, necesitamos pasar el nombre de ID, que es encabezado. Si configuro este archivo, como pueden ver, está escrito la etiqueta de encabezado completa. Está escrito la estructura adecuada de la tabla, pero quiero devolver texto inerte de esta etiqueta. Aquí, necesitamos usar un método de puerta, punto, texto interno. Si configuro este archivo, ahora puedes ver devolver tu logo, solo el texto. Déjame mostrarte otro ejemplo. Puedes ver mi archivo de estimación de punto índice. Aquí está ID nombrado contenido dentro de este contenido, tenemos H una etiqueta, etiqueta ING, Bagrptag, etcétera Si paso esta identificación, va a devolver todo el texto a la vez. Déjame mostrarte. Aquí voy a pasar obtener elemento por ID dentro de la prensa abajo es contenido. Si configuro esta página, como pueden ver, está escrito todo el texto de nuestra sección de contenido. No devuelvo ninguna etiqueta TML. Se trata solo de texto puro escrito. Este es el uso del método de texto interno. Hablemos de nuestro siguiente método, que es el HTML interno. Aquí, voy a duplicar esta línea y comentar anterior aquí voy a escribir HTML interno. Si configuro este archivo, puedes ver que mi Cole está escrito toda la estructura estimus dentro de la sección de contenido Como puedes ver, está escrito todas las etiquetas de estimación con el texto. Si paso encabezado aquí, entonces voy a reemplazar el contenido con encabezado. Y esto en este archivo, se puede ver está escrito el HTML interno, H uno, con eso, está escrito el texto, su logotipo. Este es el uso de este método. A continuación, vamos a aprender cómo podemos obtener valores de atributo. Para eso, tenemos que decirle al método C, atributo, obtener nodos de atributo y atributos, y vamos a comenzar con el método G. También vamos a averiguar la diferencia entre get attribute node. De nuevo, estoy de vuelta a mi limos estudio código digital. Entonces primero, voy a usar el método de atributo Gate. Aquí voy a escribir atributo Puerta. Y ahora tenemos que pasar carreras redondas y necesitamos proporcionar el nombre del atributo qué valor de atributo queremos. Volvamos a la página de la tabla. Como puedes ver en esta D, solo tenemos un atributo, ID, y aquí voy a usar otro atributo. Clase de clase por ahora, voy a escribir XYZ, y voy a configurar este archivo. Ahora quiero devolver el nombre de la clase de esta etiqueta. Aquí voy a pasar dentro de la clase de código doble. Si configuro este archivo, se puede ver, se puede ver la consola, se escribió el nombre de la clase, XY Z. Aquí nos dirigimos a nuestra etiqueta Dip usando su ID, que es header, y devolvemos el nombre de clase de este elemento usando el atributo Gate Bathon Pero si aquí paso identificación, entonces ¿qué pasa? DNI. Si configuro este archivo, va a devolver el mismo nombre de ID, encabezado. Déjame mostrarte. Si configuro este archivo, se puede ver en mi consola cabecera escrita. Agreguemos otro atributo a este elemento. Aquí voy a agregar otro atributo y nuestro nombre de atributo es style y voy a establecer border a este elemento. Borde, un píxel. Y quiero bóer sólido. Con eso, quiero el color rojo. Y voy a poner este archivo. Y en mi archivo Minto Js, aquí voy a pasar el nombre del atributo , que es Style Y ahora va a devolver el valor del atributo style. Si configuro este archivo, se puede ver el resultado, borde de un píxel, tasa de sólidos. Ahora hablemos de nuestro otro método, que es get attribute non. Aquí, voy a escribir get atributo no. Si configuro este archivo, ahora puedes ver en mis Csoles escrito el nombre del atributo con sus valores Si quieres devolver solo el valor del atributo, en ese caso, necesitas usar el atributo G, y si quieres devolver el nombre del atributo con valor, en ese caso, necesitas usar el atributo get no. Esa fue la principal diferencia entre get attribute y get attribute no. Pero si quieres devolver solo el valor usando este método, sí, puedes. Solo necesitas escribir el valor de punto. Si configuro este archivo, ahora se puede ver que devuelve sólo el valor. Ahora voy a hablar de nuestro método vamos a conseguir, que es atributos. Este método va a devolver todos los nombres de atributo de este elemento. Va a devolver una matriz y dentro de esta matriz, va a devolver todos los nombres de atributo. Déjame mostrarte las prácticas. Vuelvo a mi archivo de estimación de índice, se puede ver dentro de este ID de encabezado, tenemos un total de tres atributos, ID , clase y estilo, y aquí voy a escribir en el atributo. Voy a eliminar todos estos atributos de punto de encabezado. Si configuro este archivo, como pueden ver , está escrito una matriz. Lo siento, no está escrito una matriz, está escrito un objeto. Si abro este objeto, como pueden ver, la longitud total de este objeto es de tres. Porque tenemos que hacer tres atributos en este objeto ID, clase y estilo. Si quieres apuntar al atributo particular , sí, puedes. Supongamos que quiero apuntar a la clase. Para eso, después de atributo, necesitamos usar carreras cuadradas y aquí tenemos que pasar el índice número uno. Si configuro este archivo, como puede ver, está escrito el nombre del atributo y su valor, XYZ. Ahora quiero devolver solo el valor, no el nombre del atributo. Para eso, solo hay que escribir punto Valor. Si configuro este archivo, puedes ver el resultado. Es retorno XYZ. Con eso, también se puede devolver el nombre del atributo. Para eso, solo en nombre de punto tot. Si configuro este archivo, puedes ver el resultado. Regreso clase. Ya aprendimos usando este método, cómo podemos obtener valores Dom. Esto es para este tutorial. En el siguiente tutorial, vamos a aprender los métodos de puerta Dm. Gracias por ver este video. Estén atentos. 6. Tutorial de métodos de conjunto de DOM de JavaScript: Me alegro de verles chicos. Nuevamente, estoy de vuelta con un nuevo tutorial y en este tutorial, vamos a aprender cómo podemos establecer valores dom. Hemos puesto los cinco métodos y usando este método, podemos actualizar cualquier valor dom. De lo contrario, podemos agregar cualquier valor dom. Podemos cambiar el texto interno. También, podemos cambiar el TML. Podemos establecer nuevo atributo, podemos eliminar atributo. Sin perder el tiempo, estudiemos lo práctico y veamos cómo funciona. Como pueden ver, lado a lado, abro mis visores editor de código de estudio y mi navegador usando la extensión de servidor en vivo, y ya abrí mi archivo TML anterior y el archivo Mindtgs Mindtgs Vamos a saltar al archivo HTML de punto índice. Aquí puedes ver que tenemos un ID llamado header. Dentro de esta etiqueta de cabecera, tenemos H una etiqueta. Yo decido que voy a cambiar el TML interno de esta identificación. Quiero decir rumbo a etiquetar con diferente, pero no voy a cambiar nada en mi archivo index dot. Voy a hacer el trabajo usando el método set. Para eso, estoy de vuelta al archivo principal punto js. Aquí voy a atar elemento dcndtg por encabezado ID. Entonces nuestro método nombre punto interno TML. Porque quiero cambiar el interior. Igual a es en los códigos dobles, iban a pasar este árbol. Como te dije, ahora voy a usar la etiqueta de encabezado dos. Aquí voy a pasar H dos, cerrar. H dos. Entre la partida dos, voy a pasar el infierno. Antes de configurar este archivo, voy a convertir el HTML interno en mi consola. Para eso, head to pass document get element by ID, header, par TML Después subgran para terminar esta línea. Si configuro este archivo, como se puede ver en la porción de encabezado, se tensa el contenido. Reemplaza H una etiqueta por H dos etiqueta porque cambiamos HTML interno. Al principio, apuntamos al elemento por su nombre de ID. Después cambiamos el estival interno de este ID. Si te muestro mi Consola está empaquetada, consola, puedes ver el resultado. Aquí puedes ver ahora nuestra nueva estructura de estimación es H uno, dos, hola. Pero si imprimo esta sección interna de estimación antes de cambiarla, déjame mostrarte. Pero al principio, voy a quitar esta línea. No lo necesito. Voy a copiar esta línea y voy a pegarla antes de que se pongan. Entonces si configuro este archivo, Ups, me olvidé de imprimir este elemento en mi Consola Copia esta línea y pega después de esta línea. Si configuro este archivo, ahora puedes ver el resultado. Nuestro primer resultado vino de antes del cambio y nuestro segundo resultado viene de después del cambio. Así es como podemos cambiar el TML interno usando el método set. Del mismo modo, se puede establecer texto interno a cualquier elemento. Por ahora, voy a quitar estas líneas. No lo necesito. Ahora les voy a mostrar cómo podemos cambiar el atributo ves. Para ello, necesitamos usar atributo set, de lo contrario, el método de atributo. Vayamos al estudio de visa codificado. Si te muestro mi archivo de índice, como puedes ver, está en esta profundidad tenemos múltiples atributos, ID, nombre de clase, si ahora quiero cambiar el atributo de clase V. Quiero reemplazar xyz con AVC Vamos a llegar al archivo JS y ver cómo podemos hacerlo. Al principio, voy a duplicar esta línea y comentar nuestra anterior. Aquí voy a escribir documento punto get element by ID header. Nos dirigimos a nuestro elemento por su nombre de ID, y ahora aquí quiero establecer un nuevo nombre de atributo. Para ello, necesitamos usar set attribute method, set attribute. A continuación, voy a quitar las líneas inusuales. Estos no son requeridos por ahora. Luego dentro del latón molido, primero, necesitamos pasar nuestro nombre de atributo, que es clase. Y en nuestro segundo parámetro, necesitamos pasar el nombre del valor, que es ABC y sepgoron a esta línea Ahora, cantemos el atributo en nuestra consola. Para eso, nuevamente, necesitamos escribir un atributo de puerta método de puerta. Obtener atributo dentro del latón redondo, necesitamos pasar el nombre del atributo, clase. Si satisfacyle puedes ver mi consola, reemplazamos exitosamente el nombre de nuestra clase por ABC Si te muestro mi sección de elementos, como puedes ver, déjame mostrarte anoccy reemplazar nuestro nombre de clase en mi perro con ABC Así es como podemos cambiar cualquier valor de atributo. Usando el método de atributo set, también se puede cambiar el valor CSS en línea. Déjame mostrarte el ejemplo. De nuevo, voy a duplicar esta línea y comentar la anterior. Esta vez, quiero apuntar a nuestro atributo y nuestro nombre de atributo es estilo. Aquí voy a pasar un nuevo valor y nuestra visión es frontera frontera, dos puntos y ella para pasar los valores. Borde, diez píxeles punto comió, y quiero establecer borde Color blanco. Si configuro este archivo, puedes ver el resultado. Reemplace con éxito el valor CSS en línea usando este método, pero esta no es la forma correcta. En nuestro próximo tutorial, vamos a conocerlo. Si quieres imprimir el valor en tu consola, solo ella para escribir estilo. Si configuro este archivo, ahora puedes ver mi consola, el valor, borde, diez píxeles, punteado y color blanco. Básicamente, quiero decir, con la ayuda de JavaScript, podemos cambiar las propiedades de CSS, y lo vamos a aprender en nuestros próximos dos estudios. Ahora, hablemos de nuestro siguiente método, que es el método de atributo. De nuevo, voy a duplicar esta línea y comentar la anterior. Por ahora, voy a eliminar estas líneas innecesarias y voy a escribir document dot Gate Element por atributos de ID. Como saben, Él necesitamos pasar a Ry. Dentro de los pases cuadrados, necesitamos pasar el número de índice y el número de índice de nuestra clase es uno. Si te muestro por qué archivo index, en nuestro índice cero, lo tenemos y en nuestro primer índice, tenemos clase. Por eso paso uno y quiero cambiar el valor de este atributo. Dobladillo pasa el valor del punto. Entonces necesitamos usar igual a seno dentro del doble curso, necesitamos pasar el valor, y quiero establecer nuestro nombre de clase Z Z Z. Semi en esta línea Antes de configurar este archivo, quiero imprimir nuestro atributo en. Aquí voy a pasar clase, voy a poner este archivo. Ahora puedes ver en mi Casole reemplaza el nombre de nuestra clase por ZZZ Si usa este método, debe recordar el número de índice. Pero en nuestro método anterior, es necesario pasar el nombre del atributo. Esa es la diferencia. Hablemos de nuestro último atributo que es eliminar atributo. Este atributo se utiliza especialmente para eliminar los atributos existentes. Así que saltemos al editor de código de estudio y veamos cómo funciona. Como puedes ver en esta D, tenemos que hacer tres atributos, ID, clase y estilo. Como puedes ver, este color de borde Dwb rojo. Déjame aumentar el tamaño diez píxeles, y voy a establecer este archivo. Ahora cuando configuras este archivo, quieres eliminar este borde, y yo quiero eliminarlo usando JavaScript. Vamos a llegar al MinjSFLE. De nuevo, voy a duplicar esta diapositiva y comentar la anterior. Y aquí tenemos que pasar el nombre del atributo. Documento punto obtener elemento por encabezado ID, y nuestro nombre de atributo es eliminar atributo eliminar atributos. Luego dentro de las prensas redondas, dentro de los códigos dobles, necesitamos pasar el nombre del atributo y nuestro nombre de atributo es style. Semicono dos en esta línea. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver en mi navegador, se ha eliminado el atributo style con su valor. Por eso ahora no tenemos la frontera a esta porción de cabecera. Si te muestro la estructura de estimación desde la sección de elementos, ahora puedes ver dentro de la etiqueta body dentro de este div, tenemos una cabecera. Pero si te das cuenta, puedes ver que solo tenemos dos atributos, ID y clase. Eliminó con éxito el atributo style. Pero si vuelvo a mi archivo índice tal, se puede ver, todavía nuestro atributo de estilo existe en esta profundidad. En este tutorial, aprendes cómo podemos apuntar valores caninos y también podemos establecer nuevos valores a nuestro dom. Esto es para este tutorial. En nuestro próximo tutorial, vamos a establecer CSS. Esto es para este tutorial. Gracias por ver este video. 7. Tutorial de JavaScript DOM querySelector y querySelectorAll: Me alegro de verles chicos. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado JavaScript Dom. En este tutorial, vas a aprender dos métodos, consultas y selector de consultas. En nuestros tutoriales anteriores, aprendemos cómo podemos apuntar elemento Dom por ID, por tema de clase, por tagni Pero el problema es si necesitamos apuntar a los diferentes objetos, en ese caso, es necesario usar tres métodos diferentes. ID, obtener elemento por ID o clase, obtener elemento por nombre de clase, y para etiqueta, obtener elemento por tagnin. Pero, ¿qué? Si tuviéramos un solo método para apuntar a todos los elementos, quién puede apuntar ID, nombre de clase y tagnin Para ello, JavaScript introduce dos métodos, Qui selector y Qui selector. Para el selector QI, necesitamos escribir document dot Qui selector. Dentro del brrass redondo necesitamos pasar el selector CSS. De manera similar, si quieres usar el selector Qi, para eso, necesitas escribir el selector Qi de documento. Dentro del latón redondo, es necesario pasar selector CSS. Pero, ¿cuál es la diferencia entre qui selector y selector de consultas? Si usas QuerySelector, va a apuntar al primer A lo mejor hay objetos similares con el mismo nombre de clase, pero va a seleccionar el primero. Pero si usas selector de consultas, va a apuntar a todos los elementos. Esa es la diferencia básica entre dos métodos, Qui selector y Qui selector. Sin perder el tiempo, estudiemos prácticas y veamos cómo funciona. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya abrí mi anterior documento index dot HTML Ese es el archivo JavaScript, practicamos nuestros métodos JavaScript. Vamos a usar el primer método, que es el selector de consultas. Voy a quitar todas las líneas innecesarias, y aquí voy a escribir document dot QuiriSelector Selector de consultas. Y dentro de la base redonda, necesitamos pasar el nombre del selector y aquí uso selector de ID, encabezado. Para eso, necesitamos usar HastexSin porque es una identificación. Si usas el nombre de clase, en ese caso, necesitas usar punto antes del nombre de la clase, y quiero cambiar el tML interno de este elemento Para eso, ella en el método IRTML tipo, IRTML igual a dentro del doble curso, quiero reemplazar encabezado una etiqueta por encabezado a etiqueta Para eso, yo para usar etiqueta H dos, H dos. Entre estas dos etiquetas, voy a teclear Hadu. En la siguiente línea, y olvídate, nuevo, voy a usar el selector de Kari todo. Aquí voy a sustituir elemento Gate por ID con selector de consultas. Selector Kiri. Nuevamente, necesitamos usar el signo Hateg porque estamos seleccionando el elemento usando su ID Por eso necesitamos usar HDAC y quiero devolver el HTML interno de este elemento TML interno Si configuro este archivo y te muestro mi consola, como puedes ver en mi consola, está escrito, está escrito el nuevo HTML interno, hola. Como puedes ver héroe usa etiqueta de encabezado. Con eso, puedes ver los cambios en nuestra porción de encabezado. Recuerda, este selector va a apuntar al primer elemento de tu documento. Por ahora, voy a comentar esta línea. No lo necesito. Voy a volver a configurar este archivo. Y ahora te voy a mostrar otro ejemplo de método selector de consultas. Si vuelvo a mi archivo índice punto t, como pueden ver, hay una lista de nombres de clase y usamos el mismo nombre de clase dos veces. Si selecciono el nombre de la clase, entonces copio la lista de nombres de clase y en su lugar el archivo mend js, aquí voy a escribir Query selector, nuestra lista de nombres de clase Pero como te dije, para el nombre de la clase, necesitamos usar punto. Pero si notas, puedes ver que está escrito todo el estimal interno desde el primer elemento Usando el selector de consultas, podemos establecer un nuevo valor, lo contrario, podemos meternos dentro. Ahora, hablemos de nuestro segundo método, que es el selector de consultas. Veamos cómo funciona. Si até selector de consultas, y este archivo, ahora se puede ver, aros, tenemos que quitar el estiML interno porque vamos a seleccionar múltiples elementos Ahora puedes ver mi Csole está escrito en lista de nodos y la longitud de esta lista es de dos Si notas, puedes ver, primero usamos la lista de nombres de clase con etiqueta UL, luego usas la lista de nombres de clase con etiqueta de párrafo. Si te muestro por qué index dot ETL file, primero usamos el nombre de clase con etiqueta UL y luego usas el mismo nombre de clase con etiqueta de párrafo El beneficio de usar este método es, aquí podemos usar el nombre de la clase, el nombre etiqueta y el nombre de identificación. Aquí puedes usar cualquier tipo de selector para apuntar al elemento. Similar a otro método, si quieres apuntar a la etiqueta de párrafo, para eso, aquí necesitas pasar. Dentro de este latón cuadrado se encuentra el número índice. Uno. Si configuro este archivo, puedes ver el resultado. Se puede ver en Csole la etiqueta del párrafo completo. Se puede ver el nombre de la clase, se puede ver el contenido, etcétera Déjame mostrarte otro ejemplo, qui Selector todo. Si te muestro mi punto índice t archivará, como puedes ver, usamos etiqueta UL múltiples veces. Lo usamos en nuestra sección de contenido. Usamos esta etiqueta en nuestra sección cibernética, también la usamos en nuestra sección de menú. Y ahora voy a usar la Madera de Baño por su nombre de etiqueta. En cambio las prensas redondas, tenemos que pasar el nombre de la etiqueta y nuestro nombre de etiqueta es UL. Como voy a quitar el número de índice por ahora no lo necesito. Si configuro este archivo, se puede ver sin duda la lista de nodos. Si abro esta lista de nodos, puede ver que la longitud total de la etiqueta UL es de tres. Uno a uno, si quieres devolver el TML interior, sí, puedes Para eso, aquí necesitas atar Square ss y dentro del vestido cuadrado, necesitamos pasar el número de índice. Quiero devolver el índice número dos. Entonces necesitamos usar dot inner TM. Si configuro este archivo, puedes ver Consola, está escrito toda la sección de estimación interna del índice número dos. Está escrito los elementos de la lista del menú de la barra lateral, hogar sobre nosotros, galería , contáctenos, etcétera Ahora voy a usar poco selector Avanzado ***. Puedes ver mi archivo índice punto t. Dentro de la sección de encabezado, tenemos H una etiqueta, su logotipo, y podemos seleccionar el elemento H one usando este ID. Déjame mostrarte. Aquí voy a quitar este, no lo necesito dentro de los códigos dobles, voy a escribir nuestro ID nombre encabezado espacio el elemento nombre H uno. Si configuro este archivo, se puede ver el resultado en zona Mica. Está escrito la etiqueta H one, que está dentro de la sección de encabezado. Si vuelvo a Y, índice punto M archivo y para mojar esta línea varias veces, acepte esta. Ahora puedes ver dentro por lista de nodos tenemos un total de tres H una etiqueta. Esta selección avanzada va a devolver toda la etiqueta H one del elemento header. Básicamente, quiero decir, si usas este método, ella puede usar selectores CSS avanzados Este es el uso del selector Cir y el selector de consultas todos los métodos. Usando un selector, podemos apuntar a todo tipo de atributos, ID, clase, estilo, etcétera Esto es para este tutorial. Gracias por ver este video, estén atentos para nuestro próximo tutorio 8. Tutorial de métodos de estilo de CSS de JavaScript DOM: Me alegro de verles otra vez. Estoy de vuelta con un nuevo tutorial, realtate JavaScript Dom. En este tutorial, vamos a aprender los métodos de estilo Dom CSS. Básicamente, tenemos tres métodos que pueden usar para darle estilo a CSS Dom. El primer método es style y el segundo método es class name y el tercer método es class list. Usando este método, puedes obtener CSS Vu. De lo contrario, puede establecer CSS entonces. Supongamos que desea extraer la propiedad CSS del elemento. Para eso, puedes usar para eso, puedes usar directamente el método Style. Además, puede establecer un nuevo valor usando el método Style. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión Live Server y abro mi anterior estimación nombre del documento índice punto HTML. Con eso, abro MindJSFLE. Al principio, vamos a darle estilo a la porción de encabezado. Al principio, te voy a mostrar el ejemplo de propiedad de estilo. Si te muestro mi índice Un archivo estable, como puedes ver en esta D, tenemos un ID llamado header, y además tenemos atributo style en esta D. voy a apuntar a este elemento usando header ID. Copie el nombre de identificación y vuelva a mi DojSFLE principal y voy a atar el selector de consultas de punto de documento tiene etiqueta o nombre de identificación Al principio, te voy a mostrar cómo podemos obtener la propiedad de estilo a partir de este elemento. Para eso, necesitas escribir estilo de punto. Si te muestro mi punto índice T, como puedes ver, dentro de nuestro atributo style, tenemos un nombre de propiedad border. Quiero obtener el valor de la propiedad fronteriza. Copio el borde del nombre de la propiedad y vuelvo a mi archivo principal Js y aquí estilo superior, voy a usar punto y nuestro borde de nombre de propiedad. Antes de configurar este archivo, voy a abrir mi Cul algunos inspeccionar Czome Si configuro este archivo, puedes ver mi calzone está escrito el valor de la propiedad border desde el elemento header Puedes obtener el valor CSS de esta matemática. Pero si paso una propiedad que no es más fácil en nuestro elemento, déjame mostrarte. Como puedes ver, aquí utilizamos solo propiedad fronteriza. No utilizamos ninguna otra propiedad CSS como el relleno de color. Si escribo color aquí, y luego configuro este archivo, como puedes ver en mi consola, está escrito en blanco. Ahora voy a establecer un color de fuente a nuestra sección de encabezado. Volver a nuestro archivo Idexot TML y aquí voy a escribir punto y coma y después de punto y coma, voy a usar otra Color yulu. Si configuro este archivo, puedes ver mis consolas escritas en amarillo. Por ahora, voy a quitar el modo responsive, y si escribo algo dentro de esta D, entonces voy a escribir hola. Y establecer este archivo. Ahora puedes ver en mi sección de encabezado, el color de la fuente es Lu. Así es como podemos obtener el valor de la propiedad CSS usando el método de estilo. Ahora te voy a mostrar usando el método de estilo, cómo podemos establecer una nueva propiedad CSS en un elemento. En nuestro ejemplo anterior, obtenemos valor usando el método style, y ahora vamos a aprender cómo podemos asignar un nuevo valor de propiedad a un elemento TML Ahora quiero establecer el color de fondo a este elemento. Vuelvo a mi archivo Minot Js y voy a copiar esta porción, comento esta línea En la siguiente línea voy a pegarlo. Ahora quiero decir dab down color a esta D. Para eso, aquí necesitamos escribir método de estilo de punto Después de eso, necesitamos pasar el nombre de la propiedad CSS, que quiero decir en este elemento, y quiero decir dab down color Aquí voy a escribir color de fondo color de fondo, y quiero usar semicon azul para esta línea Recuerda, en CSS, necesitamos usar dash entre fondo y color. Pero en Java Street, no necesitas usar signo de guión y también necesitas capitalizar el carácter C. Vamos a configurar el archivo y ver qué devuelve. Después de establecer este archivo, se puede ver el resultado. Aquí puedes ver que se queda el color de fondo del encabezado. No configuro mi archivo de tabla, por eso hola sigue existiendo en nuestra porción de encabezado. Volvamos a establecer el archivo de índice. Ahora se ha ido. Si te muestro mi sección de elementos y cómo están mis autos en esta porción de encabezado, aquí puedes verlo establecer una nueva propiedad CSS, que es color de fondo, color de fondo, azul. De igual manera, quiero agregar otra propiedad a este elemento. De nuevo voy a duplicar esta línea y voy a comentar la anterior. Ahora quiero agregar relleno. Aquí voy a quitar el color azul y la propiedad de color de fondo y después de estilo, voy a escribir padding. Para cada dirección, quiero relleno de 50 píxeles. Hemo tipo 50 píxeles. Si configuro este archivo, puedes ver el resultado. Agrega relleno de 50 píxeles desde toda la dirección. Aprendemos cómo podemos establecer valor y obtener valor usando el método de estilo. Ahora voy a hablar de nuestro segundo método, que es el nombre de la clase. Usando estos, puedes obtener cualquier valor de clase. Como se puede establecer cualquier nombre de clase. Estudiemos prácticas y veamos cómo funciona. Volvamos al archivo Atable. Como pueden ver en nuestra cabeza profunda tenemos una clase llamada XYZ, y la voy a quitar ahora. Ahora bien, en este elemento, no tenemos ninguna clase y quiero decir un nombre de clase a este elemento. Ahora, vamos a llegar al archivo principal punto js. Primero, voy a sacar esta línea y comentar la anterior. Aquí voy a escribir documento punto query selector dot method name, que es el nombre de la clase. Nombre de la clase. Y quiero establecer un nuevo nombre de clase y nuestro nombre de clase es ABC. Además, quiero obtener el nombre de la clase y quiero imprimir el nombre de la clase en mi consola. Para eso, nuevamente, voy a duplicar esta línea en Estoy escribiendo nuestro elemento de nombre variable. Elemento igual al documento punto Quay selector header y quiero devolver nuestro nombre de clase solamente. No quiero establecer de todos modos. Si configuro este archivo y te muestro mi consola, está escrito ABC. Aquí establecemos un nuevo nombre de clase y obtenemos un nuevo nombre de clase usando este método. Y también puedes ver el nombre de la clase en mi sección de elementos, clase ABC. Ahora podrías tener duda, ¿cuál es el uso práctico de este método? ¿Qué podemos hacer después de cambiar el nombre de la clase? Déjame mostrarte. Para eso, necesitamos saltar a nuestro estilo de archivo CSS CSS. Aquí voy a darle estilo a una clase. Aquí puedes ver que ya le damos estilo nuestro elemento de encabezado usando ID de encabezado. Pero ahora quiero añadir un poco de relleno. Para eso, podemos usar esta clase, y nuestro nombre de clase es ABC ABC. En cambio los calibres, voy a escribir padding. Relleno de 50 píxeles. Si configuro este archivo, puedes ver el resultado. Es en el acolchado de toda dirección. Pero si vuelvo a mi archivo principal de Dogs y presagio de esta línea y el conjunto de este archivo, puede ver ahora hay un no padding porque ahora no asignamos ningún nombre de clase AVC Si te muestro mi sección de elementos, como puedes ver, no hay nombre de clase ABC, pero ya le damos estilo a esta clase en nuestra sección de estilo. Si descommen esta línea y configuro de nuevo este archivo, como pueden ver, en relleno desde toda dirección. Si vuelvo a mi consola, puedes volver a ver el nombre de la clase ABC. Entonces este es uno de los principales usos prácticos de este método, el nombre de la clase. Usando estos métodos Dom, podemos establecer cualquier propiedad CSS, cualquier atributo a nuestros elementos de tabla. Déjame mostrarte una cosa. Podemos establecer varias clases a la vez usando este método. Aquí, voy a escribir XYZ. Si configuro este archivo, como pueden ver, ahora está hecho tanto el nombre de las clases, ABC como XYZ. Pero si selecciono este elemento y te muestro esta porción de estilo, ahora puedes ver que el padding viene de una sola clase que es ABC, no de XYZ. Ahora, hablemos de nuestro último método de estilo CSS, que es la lista de clases y ¿cuál es la diferencia entre la lista de clases y el nombre de clase? Empecemos la práctica. Entonces primero, voy a duplicar esta línea y comentar anterior y voy a escribir o nombre de método. Lista de clases. Si configuro este archivo, puedes ver mi consola, está escrito el mismo resultado. Está escrito y transmite, y en esta cadena, escribió tanto el nombre de la clase. Pero si escribo lista de clases aquí, déjame mostrarte y luego sofocar, ahora puedes ver que está escrito y array, dom token Si abro este menú desplegable, se puede ver rutain estos dos tanto para el nombre de la clase que le asignó diferente número de índice Al número de índice cero, asignó ABC, en un número de índice, asignó XYZ. La lista de clases devuelve la matriz, pero el nombre de la clase devuelve la cadena. Pero la principal diferencia es que esta función viene con sus propios métodos. No voy a mostrarte todo este método en este tutorial, pero en este tutorial, te voy a mostrar los dos métodos o el primer método es un primero, voy a eliminar todo este nombre de clase, XY D y AVC, y en mi archivo de tabla, voy a ascender el nombre de la clase aquí, clase ABC Y si configuro este archivo, puedes ver que no hay cambios porque ya agregamos una propiedad CSS en nuestro archivo de estilo. Ahora en este elemento, quiero agregar una nueva clase con AVC para eso, necesitamos usar el método add Voy a quitar todo esto y su clase tipo les dot, y usando este método, podemos agregar varias clases. Aquí voy a agregar un nombre de clase QWE. Si configuro este archivo, se puede ver en mi consola, volvió al nombre de clase ABC y QWE Pero en nuestro archivo estiv, aquí asignamos solo una clase ABC Pero asignamos la segunda clase del dom Javascript. Si quieres agregar otra clase con eso, sí, puedes. Apenas hasta cita, coma héroe y dentro de las comillas dobles, puedes pasar otra clase n y su tipo ASD Si configuro este archivo, puedes ver mi Consola. Ahora tenemos que hacer tres clases en este elemento, ABC, QW y ASD Usando este método add, puedes agregar varias clases a la vez. Ahora, hablemos del siguiente método plus list, que es remove. Al principio, voy a quitar este método, agregar luego vuelvo a mi archivo IndexoDetable aquí dentro de la clase, voy a asignar a otras clases en mi X Y y ASD. Voy a establecer este archivo. configurar este archivo, puedes ver mi consola. Escribí cuatro más nombre porque no guardamos nuestro archivo Mind js. Si configuro este archivo, puedes ver el resultado. Ahora se sienta y flecha. Porque aquí no usas ningún método, por eso es sentarse sobre una flecha. Pero si comento esta línea y configuro este archivo, ahora se puede ver en mi consola, es el nombre de tres clases, ABC XYZ ASD Ahora quiero eliminar una de las clases de esta lista. Quiero eliminar la clase XYZ. Aquí voy a usar un nombre de método. Quitar. Yo descommen esta línea y aquí voy a escribir quitar Dentro de las prensas redondas, necesitamos pasar el nombre de la clase y quiero eliminar XYZ. Dentro de la pose doble, voy a escribir XYZ. Si configuro este archivo, puedes ver el resultado. Es **** nombre de dos clases ABC y ASD. Usando este método de lista de clases, puede eliminar los nombres de clase. No solo eso, al mismo tiempo, puedes eliminar varios nombres de clase. Con eso, quiero eliminar la clase ASD. Entonces por coma, dentro del doble curso, es necesario escribir TEA Ahora está escrito sólo un nombre de clase, ABC. Tengo las dos clases, XYZ y ASD. Pero si te muestro mi archivo de índice o estimación, todas las tres clases siguen existiendo en este elemento. Pero usando Dom, eliminamos tanto el nombre de clase XYZ como ASD. Esto es para este tutorial. En nuestro próximo tutorial, vamos a aprender a agregar incluso oyente Además, voy a cubrir todos los métodos de lista de clases en nuestros tutoriales en curso. Gracias por ver este video estatua. 9. Tutorial del método de JavaScript addEventListener: Me alegro de verles chicos. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado con JavaScript. En este tutorial, vamos a aprender JavaScript, agregar evento escuchar. Todos estos son eventos básicos y sabemos cómo podemos usar eso. Para esos eventos, necesitamos usar evento en tribu. Como puede ver en este botón, configuramos un evento al hacer clic y después de hacer clic en este botón se va a llamar a la función AVC Entonces de esa manera, podemos agregar eventos en cualquier etiqueta estable. Supongamos que quieres llamar a una función cuando pasas el mouse a una imagen. Para eso, necesitas usar este evento en mouse enter. Si aprendes JavaScript básico, ya estás familiarizado con eso. Pero hay un problema con esta técnica. Cada vez que necesitamos retroceder nuestro documento de estimación para establecer este atributo. Aquí utilizamos eventos en línea y crea nuestro archivo estiv pesado y complejo No queremos estropear el atributo Javascript con estim tank Para eso, Javascript vienen con dos soluciones. En nuestra primera solución, asignamos el evento con la ayuda de dom. Se puede ver, documento punto Obtener elemento por ID, seleccionamos el elemento particular por su nombre ID, luego establecemos el evento particular y llamamos a la función. Siempre que marque el elemento estim, va a llamar a la función Déjame mostrarte el ejemplo práctico y ver cómo se jura. Como pueden ver, lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver Abrí mi documento anterior archivo t y mendot Js Ahora en nuestro archivo JavaScript, voy a llamar a nuestro par Siempre que haga clic en esta porción de encabezado, quiero cambiar el color de fondo. Al principio, voy a tung en este elemento por su nombre de identificación Aquí voy a escribir Documen puerta elemento por ID. Es que los versos redondos, tenemos que pasar el nombre de identificación y la Dame es, como pueden ver, cabecera. Copia el nombre de identificación y pegarlo aquí. Ahora, aquí tenemos que pasar el nombre del evento. Voy a escribir punto y nuestro nombre de evento está en P. Igual a y aquí tenemos que llamar al nombre de la función y nuestro nombre de función es ABC. Ellos van a esta línea. Ahora, llamamos a la función, pero no creamos la función. Para eso, voy a crear la función. Él escribe función, y nuestro nombre de función es ABC llaves redondas Después dentro del calicis y quiero cambiar el color de fondo del encabezado cuando haga clic en él. Nuevamente, necesitamos seleccionar este elemento, y quiero seleccionar este elemento por su nombre de ID. Copia esta línea y pegarla aquí. Estilo de punto. Y ya aprendimos sobre el método de estilo en nuestros tutoriales anteriores. Después del estilo, tenemos que pasar el nombre de la propiedad y quiero cambiar el color de fondo de fondo. Fondo, igual a, y quiero decirlo color verde. Entonces semign en esta línea. Ahora voy a configurar este archivo configuro este archivo, y cuando haga clic en esta sección de encabezado, como pueden ver, va a cambiar el color. Es de gris a verde. Déjame mostrarte otra vez. Si reprimo esta página, como pueden ver, ahora el color de fondo del encabezado es gris Pero si hago clic en él, como pueden ver, se vuelve verde. De esa manera, podemos agregar eventos en nuestra etiqueta de estimación. Esto es en los dos siguientes, te vamos a mostrar cómo podemos usar el método Add even Eisner Ahora, hablemos del método Add even Eisner. Es el Vo muy útil en JavaScript. Después de seleccionar el elemento, necesitamos escribir Add Even Esner Es el nombre del método. Después de eso, es necesario pasar dos parámetros. Si, necesitas pasar por los tres parámetros, pero por ahora, te voy a mostrar dos parámetros. En nuestro primer parámetro, necesitamos pasar el nombre del evento. Recuerda, para el método click, solo necesitas escribir kick no en Tk. De igual manera, para el mouse Enter, solo necesitamos escribir mouse Enter y para on deval Kik, necesitamos escribir DVO En nuestro siguiente parámetro, necesitamos pasar el nombre de la función. De lo contrario, puede crear la función inline. Si no quieres llamar a la función, puedes crear la función en esta línea. Necesitas escribir function keyword, luego ejecutar prensas y dentro la calibración puedes pasar tu estado Entonces comencemos la práctica y veamos cómo podemos usarla. Nuevamente, estoy de vuelta a visa Studio Code reader. Aquí voy a usar el método Add even listener, y voy a llamar a la función AVC Alguien quite esta diapositiva y voy a escribir agregar incluso oyente Y entonces necesitamos usar round ss y aquí tenemos que pasar a dos parámetros. En nuestro primer parámetro, necesitamos pasar el nombre del evento, que es lick. Y en nuestro segundo parámetro, necesitamos pasar el nombre de la función, que es ABC. Si subo este archivo y sobre mi cursor sobre esta sesión de encabezado y si alabo clic, como pueden ver, nuevamente, se vuelve de gris a verde. Así es como funciona. Como te dije, es un método muy popular porque usando este método, podemos agregar múltiples eventos en un elemento. Déjame mostrarte la demostración. Voy a duplicar esta línea y aquí voy a escribir Adnllar y nuestro nombre del evento es Muse Enter, Muse Enter Como te dije, si usamos este Bathod no necesitamos escribir el nombre completo de nuestro evento Solo necesitamos escribir mouse Enter, no en mouse Enter. Ahora voy a crear una función inline. No quiero pasar ningún nombre de función aquí. Para eso, aquí necesitamos usar la función función queer. Dentro de las prensas redondas, no quiero pasar ningún parámetro por ahora. Entonces necesitamos usar a Cariss dentro de los cálices, tenemos que pasar esta declaración Al principio, quiero lijar el mismo elemento por su nombre de iD Voy a copiar esta línea y pegarla dentro del Cass. Entonces voy a escribir función de estilo. Estilo, punto, y esta vez, quiero jugar con la propiedad de borde de este elemento. Voy a escribir style dot, border igual a dentro del código doble. Voy a pasar entonces pixel solid y quiero borde azul. Aquí voy a pasar el punto y coma para terminar esta línea y establecer este archivo Ahora quiero abrir mi cursor sobre esta porción de encabezado. Si abro mi cursor en esta porción de encabezado, se puede ver que extiende nuestro peso de borde hasta diez píxeles. Con eso, fijó un borde color azul. Ahora se ejecuta en el evento Mouse Enter. Si hago clic en él, al mismo tiempo, se puede ver que se ha convertido en color verde y luego se ejecuta clic evento. Usando este método, al mismo tiempo podemos agregar múltiples eventos. Ahora voy a mostrarte otro árbol. Aquí voy a usar el mismo evento en el mismo elemento al mismo tiempo, pero para la tarea diferente. Voy a revisar con el ratón Entrar y aquí voy a escribir click de nuevo. Y voy a poner este archivo. Como puedes ver, ahora el color del borde es rojo y el ancho del agua es dos píxeles con que el color de fondo es gris. Si hago clic en él al mismo tiempo y al mismo tiempo cambió el color de fondo. También cambió el ancho del borde y el color. Este truco es posible si usas solo este método, agrega incluso oyente Ahora, déjame mostrarte otra cosa avanzada. Aquí puedes ver, apuntamos este elemento header y asignamos evento a este elemento P y también estilo el mismo elemento en nuestra función. Podemos usar un atajo y eliminar esta sección de aquí. Aquí voy a usar esta palabra clave. Este borde de punto estilo punto. Esto significa el elemento al que nos dirigimos, y aquí nos dirigimos a la porción de encabezado. Usando esta palabra clave, podemos reducir algunos caracteres de ella. Si configuro este código y sobre mi curt en esta sección de encabezado y hago clic en él, se puede ver el mismo resultado No va a afectar en nuestro resultado. Esto es para este tutorial. En el siguiente tutorial, vamos a hablar del tercer parámetro de la función Add even listener Gracias por ver este video. 10. Tutorial del método de JavaScript addEventListener, parte dos: Entonces ya aprendemos cómo podemos usar las matemáticas del oyente de Aden. Primero, tenemos que pasar el nombre del evento. Entonces tenemos que pasar el nombre de la función, pero hay otro parámetro que es completamente opcional, y el nombre del parámetro es use capture. Este parámetro vuelve a la voluntad falsa. Ahora bien, ¿cuál es el significado de eso? Tratemos de entender cuál es el significado de eso. Aquí puedes ver dos contenedores afuera e interior. El primero es out dip y el segundo es innato usted dijo, haga clic en evento, arranque el D Ahora bien, si hace clic en la sección Di interna , se activa automáticamente el dip externo T. quiero decir, en ese caso, va a ejecutar ambos eventos, y si quieres ejecutar el evento Deep interno, entonces quieres ejecutar evento Dip externo En ese caso, es necesario utilizar el parámetro Capture. Empecemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código visor studio y mi navegador usando IceRetension, y ya creé un TML, y ya creé un archivo TML llamado index two TML Con eso, creo un archivo JavaScript maint dot Js. Como pueden ver, en mi navegador, tenemos externo Profundo e inund ahora voy a agregar a evento similar tanto los deeps Y entonces vamos a ver cómo podemos usar SceptureParameter Primero, voy a apuntar al elemento. Voy a escribir documento punto QuiriSelector. Dentro de la rotonda ponla para pasar el nombre del elemento usando el ID Entonces para escribir tiene etiqueta y el nombre de ID es interno. Primero, apunto al elemento interior. Entonces voy a usar punto aquí voy a usar add eventi seller nuestro nombre del evento es Aquí, voy a crear la función inline. Quiero escribir la función de coma. Función redonda resis. Está en las Calorías. Estos punto estilo punto de fondo igual a, y quiero color de fondo verde cuando hago clic en INT. Verde. Pasamos a esta línea. Si configuro este archivo y hago clic en esta sección innat, como pueden ver, se volvió en color verde Quiero establecer este archivo y volver a la posición anterior. Al mismo tiempo, voy a agregar el mismo evento en nuestra sección exterior Dip. Quiero conseguir esta línea y me voy a desmayar. Quiero color de fondo. No. Y voy a poner este archivo. En estos programas, no utilizamos o s parámetro use capture. Entonces primero, voy a mostrarte la devastación sin usar captura Así que voy a volver a configurar este archivo y voy a dar click en la sección Dip interna. Cuando hago clic en En una sección de inmersión, como pueden ver, también es efecto en la sección de inmersión exterior. Para que quede más claro, agreguemos al cuadro de alerta dentro de este evento. Aquí voy a escribir alert y dentro del cuadro de alerta, voy a escribir inner D inner DF outer DV voy a escribir O D. voy a configurar este archivo. Ahora bien, si hago clic en la sección Inadi, como pueden ver, primero se ejecuta inerte D. Si presiono bien, entonces corre hacia afuera D. Pero si paso el tercer parámetro, que es uso capturado y quiero pasar a través Además, voy a pasar dos parámetros para nuestro exterior D. Cierto voy a establecer este archivo. Si hago clic en mi sección interior, ahora se puede ver al principio se le acaba una porción. Si presiono Bien, entonces se ejecuta en una D. Es posible pasar cuando pasamos por valor, tanto el elemento, como si paso false, ambas funciones, déjame mostrarte que estoy pase cae, también, voy a pasar wholesa Cae y establece este archivo y da clic en la sección Iative. Ahora puedes ver que ejecuta la función predeterminada. Primero, ejecuta Iative event, luego se ejecuta outta Diff Este es el uso básico de este parámetro. Ahora, hablemos de nuestro método st, que es remove event listener Como puedes ver, aplicamos click event multiple time en nuestra parte de encabezado. Nuestro evento de primer clic va a cambiar el color de fondo, y nuestro evento de segundo clic va a cambiar el estilo de borde. Como puedes ver, opacamos nuestro archivo de ejemplo anterior. Y aquí utilizamos dos eventos click. Entonces primero, voy a quitar la segunda función. Y luego voy a cambiar el nombre del evento, y voy a cambiar la licencia del ratón. Voy a establecer este archivo. Como ustedes saben, cuando usamos este evento, cada vez que pasamos por encima de mi cursor sobre este elemento y eliminamos el cursor, va a aplicar esta función. Déjame mostrarte. Voy a pasar por encima de mi cursor en esta sección de encabezado. Si me quito el cursor, como pueden ver, se cambia el color de fondo. Pero quiero eliminar este evento. ¿Cómo podemos eliminar este evento? Para ello, tenemos la función remove event listener. Nuevamente, voy a seleccionar la porción de encabezado para obtener esta línea. A voy a atar, agregar oyente de eventos, y aquí voy a usar otro evento, que es, voy a llamar a una función diferente y nuestro nombre de función es XYZ Así que vamos a crear la función. Voy a escribir function, XYZ, luego redondear llaves Después dentro de los calcos. Voy a escribir punto de documento, elemento G por ID, y nuestro nombre de ID es encabezado. Copia esta porción y pégala dentro de las llaves redondas. Punto, ahora necesitamos usar la función, que es remove event isonrmove event lisaer Y aquí tenemos que pasar el nombre del evento, qué evento quiero eliminar. Quiero eliminar este evento Muse. Al principio, tenemos que pasar el nombre del evento que es Muse copiar el nombre del evento Dentro de los códigos dobles, voy a pasarlo, y luego tenemos que pasar este nombre de función y el nombre de la función es ABC y semi pasar a N esta diapositiva. Entonces después de configurar este archivo, salto mis autos son y quito mi cursor de la porción de encabezado. Ahora se puede ver, de nuevo, se volvió verde. Pero si configuro este archivo nuevamente esta vez, voy a dar click en esta porción de encabezado. Quiero llamar al evento click. Después presiono, haga clic en evento, y si quito mi cursor de esta posición, como pueden ver, oye, no es trabajo. Vaya, hice una tonterías porque paso el nombre de la función dentro del código Dole No necesito pasar el nombre de la función dentro de los códigos Dole. Entonces voy a volver a configurar este archivo. De nuevo, voy a mover mi cursor sobre esta porción de encabezado. Esta vez, voy a presionar click. Oprima el click y si quito mi cursor de esta porción, como pueden ver, ahora el fondo no cambió el color Este es el uso de remove event listener. Este método se utiliza para eliminar a Evans. Como pueden ver, para eliminar el evento lif mouse, dijimos otro evento, que es camarilla Después de presionar la camarilla, va a llamar a esta función XYZ, y en nuestro XYZ usamos el método remove even Listener Y este método, va a eliminar este evento de esta función. Así es como podemos usar la función remove even Listener. Así que gracias por ver este video. Estén atentos para nuestros próximos dos tudio. 11. Tutorial de métodos de JavaScript: Hola, chicos. Es bueno verte de vuelta. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado JavaScript Dom. Y en este tutorial, vamos a aprender los métodos de lista de clases. En nuestros tutoriales anteriores, ya aprendimos un poco sobre el método de clase. Aprendemos sobre método add y remove method. Aprendemos usando este método, cómo podemos agregar clase a un objeto. Además, aprendemos cómo podemos eliminar clase de un objeto. Sin eso, hay muchos métodos como toggle contains, item, length. Entonces, uno por uno, vamos a aprender todos estos métodos. Entonces comencemos a agregar y revo método. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creé un documento de estimación llamado index dot Como puedes ver en nuestra sección de encabezado, ya definimos una clase, clase AVC si te muestras este archivo de estilo, como puedes ver, el color de fondo rojo proviene de la clase ABC Ahora quiero agregar una nueva clase cuando haga clic en esta porción de encabezado. Para eso, vamos a usar clase último Mthons. Quiero agregar otra clase llamada XYZ a este elemento. Pero antes, voy a darle estilo a esta clase. Entonces aquí voy a crear un nombre de clase XYZ, X Y Z, y tenemos color de fondo verde. Voy a establecer este archivo. Por ahora, no va a afectar a nada. Ahora es el momento de saltar al archivo Mind js. Aquí puedes ver que ya usamos el método Aden Listener. También uso clickeBN después de hacer clic en esta sección de encabezado, quiero llamar a la función AVC Por ahora, nuestra función está completamente en blanco. Ahora, después de hacer clic en esta sección, quiero agregar una nueva clase usando el método clasista Para ello, necesitamos escribir document dot get element by ID header. Déjame mostrarte punto la lista de clases de methodym. Lista Plus. Aquí voy a escribir plusls punto a. son los versos redondos, voy a pasar el nombre de la clase, y el nombre de la clase es XYZ Después semigraun para terminar esta línea. Ahora, pasemos el archivo y hagamos clic en la sección de encabezado. Después de dar click en esta sección de encabezado, como puedes ver, rellena el color de fondo con verde, si te muestro mis elementos de consola y si abro mi sección de encabezado, como puedes ver agrega una nueva clase a nuestro elemento header, XYZ y el color de fondo vienen de esta clase. Usando el método A, podemos agregar varias clases a la vez. Si presiono coma y luego paso otra clase, QWE y configuro este archivo y haga clic en esta sección Como pueden ver, en mi sección 11, ahora tenemos otra clase llamada QWE Así es como podemos agregar varias clases a la vez. Ahora te voy a mostrar cómo podemos usar el método remove en la lista de clases. Voy a agregar dos clases más en nuestro documento de tabla. Voy a escribir XYZ y Huevo y voy a configurar este archivo. Ahora, vamos a llegar al archivo Mindjs. Para eso, necesitamos duplicar esta línea, y voy a comentar la anterior. Aquí voy a usar classles dot remove Método. V. Y quiero quitar XYZ y EFG. Voy a pasar EG, y voy a configurar este archivo. Después de marcar esta porción de encabezado, quiero eliminar XYZ y EFG Así que para configurar este archivo, si hago clic en la porción de encabezado, como se puede ver de nuevo al color anterior. Quiero decir que quita XYZ. Si te muestro mi sección elevada, ahora puedes ver que solo tenemos una clase AVC elimino XYZ y EFG, pero aún existe en nuestro documento TML ABC, XYZ y EFG. Pero la ayuda del método de lista de vidrio, lo eliminamos con éxito. Aquí aprendes cómo podemos usar el método remove. Ya aprendemos cómo podemos usar el método add and remove, y ahora vamos a aprender cómo podemos usar el método toggle y length. Entonces comencemos la práctica y veamos ¿qué podemos hacer con eso? Como puedes ver, tenemos a tres clases en nuestro elemento, AVC, XYZ, gen Eb, y para obtener la longitud de esta clase, imprimimos esta lista de clases en nuestra consola Por eso devuelve longitud. Pero ahora solo quiero devolver la longitud, no el valor y el número de índice. Para eso, necesitamos atar la función de longitud de punto. En y voy a poner este archivo. Después configuré este archivo, si hago clic en la sección de encabezado, ahora se puede ver el resultado. Devolvemos sólo tres, y como saben, asignamos a tres clases en nuestro elemento. De esa manera, podemos usar la función length. Ahora, hablemos del método Tabul. ¿Qué es eso y cómo podemos usarlo? Para este ejemplo, volvamos al índice Un archivo de tabla y de aquí, voy a quitar estas dos clases XYZ y EBG Ahora solo tenemos una clase en este elemento, ABC. Volvamos al archivo principal punto js aquí, voy a duplicar esta línea y descoven esta Aquí, voy a usar el método D toggle. Voy a escribir clase punto Toggle. En este método, quiero alternar solo una clase en el XYZ. Elimino el segundo. Ahora la pregunta es, ¿qué significa eso? Si utilizo Toggle Method y click sobre este elemento en nuestro primer click, va a agregar esta clase, y si vuelvo a hacer clic, va a eliminar esta clase. Y si te muestro mi sección de elementos, déjame mostrarte y seleccionar elemento de encabezado. Como pueden ver, solo tenemos una clase, ABC. Pero si hago clic en esta porción, después de hacer clic en esta porción, ahora puede verla agregar XYZ. Además, se puede ver que cambia el color de fondo. Si vuelvo a hacer clic, ahora puedes verlo quitar la clase XYZ y aplicar otro color de fondo, que desde ABC. Puede eliminar y agregar clase usando el método Toggle. Ahora hablemos de otro método, que es el ítem. En esta función, hay que pasar el índice, no la clase, es mi error de mecanografía. Aquí necesito pasar el número de índice. Comencemos la práctica y veamos cómo podemos usar la función item. Ahora, agreguemos dos clases más en nuestro archivo de estimación. Con ABC, quiero agregar XYZ. Con eso, quiero agregar EPG, y voy a configurar este archivo Entonces vuelvo al archivo principal punto js. Primero, voy a comentar esta línea, no la necesito aquí voy a escribir el punto de last o nombre de función, ítem. Dentro de la prensa redonda o para pasar el número de índice. Voy a pasar una. Después de establecer este archivo, si hago clic en esta sección de encabezado, puedes ver que está escrito solo un nombre de clase, XYZ. Pero puedes ver mi elemento, tenemos a tres clases, ABC XYZ, y EFG Pero aquí especifico el número de índice usando la función item, uno. Por eso está escrito XYZ. Entonces, si quieres usar este método, debes proporcionar el número de índice de clase. Si pasas cero, entonces devuelve ABC y si pasas dos, entonces va a devolver EFG Ahora, hablemos de nuestro último método de clase, que es contiene. Este método siempre regresa a Tether cae. Si el nombre de la clase es existir en este elemento, va a devolver true. De lo contrario, va a devolver falso. Entonces comencemos la práctica y veamos cómo podemos usarla. Como puedes ver en nuestro encabezado, tenemos que dibujar tres clases. Así que vamos a llegar al archivo principal punto js y ella para reemplazar el elemento con contiene. Llamar a equipos. Y dentro los downdresses y dentro de los códigos dobles, tenemos que pasar el nombre de la clase, y voy a pasar XYZ Si configuro este archivo y hago clic en esta sección de encabezado, como pueden ver, está escrito true porque estas clases existen en nuestro elemento. Pero si paso un nombre de clase que no existe, TX Y. Y luego configuro este archivo y vuelvo a hacer clic en esta porción de sanación. Ahora puedes ver teton falls porque esta clase no es la más fácil en nuestro elemento La mayoría de las veces usamos este método con la condición, y de acuerdo al resultado, ejecutamos diferentes programas. Esto es para este tutorial. Estos son los métodos all class que cubro en este tutorial. En nuestro próximo tutorial, voy a cubrir el elemento padre y el método del nodo padre. Gracias por ver este video, Estén atentos. 12. Tutorial de métodos de parentElement y parentNode: Me alegro de verles chicos. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado JavaScript Dom. Y en este tutorial, vamos a aprender el método transversal Dom Hay tutor 12 métodos que bajo método transversal, como elemento padre, nodo padre, canto, primer hijo, último hijo, hermano neto, hermano anterior, hermano anterior Todos estos métodos se utilizan para apuntar a los elementos de la tabla. Pero antes de comenzar la práctica, necesitamos entender lo que es hermanos elemento hijo, nodo padre, primer hijo porque sin conocer lo básico, es muy difícil entenderlo. Supongamos que es nuestro objeto Dom. A es elemento padre, y B, C, B EF es elemento hijo de A. En términos JavaScript, podemos llamarlo nodo de lo contrario elemento. Si preguntamos quién es el primer hijo de A, entonces la respuesta es B. B es el primer hijo de A. Si preguntamos, quién es el último hijo de A, entonces F es el último hijo de A. Entonces estos son todos hijos de un elemento. Ahora, todos estos elementos son hermanos, BCDE F. Todos son hermanos Si te pregunto, quien es el siguiente hermano de B, la respuesta es E, E es el siguiente hermano de B, y si te pregunto, quien es el hermano anterior o B y la respuesta es C, C es el hermano anterior de B. Estos son los términos que necesitas saber antes de que partamos de las matemáticas transversales. Si entiendes este sencillo gráfico, puedes entender todo este método. Empecemos la práctica y veamos cómo podemos usarla. En este tutorial, voy a cubrir solo dos elementos elemento padre y nodo padre. Como puedes ver, siéntate, abro mi editor de código de Visual Studio y mi navegador usando extensión fester y ya creé un documento TML llamado index dot Con eso, ya vinculo nuestro archivo principal de DOJs, Min Dot Js. Ahora está completamente en blanco. Se puede ver en la sección del cuerpo, tenemos una profundidad externa. Dentro de esta profundidad exterior, tenemos Inerte dentro del Profundo interior tenemos algunos elementos hijos. A, B, C, D, E, en nuestra profundidad exterior, establecemos una identificación, exterior. Similar a Deep interior establecemos una ID, interna. Y en el hermano hijo, también establecemos un ID llamado child C. Tenemos que decirle cinco elemento div dentro del contenedor interior Así que vamos a comenzar nuestra práctica con el modo paren y el elemento padre Al principio, quiero apuntar a Div usando DV interno. Vamos a saltar al archivo JavaScript y ver cómo podemos hacerlo. Aquí quiero escribir documento punto obtener elemento por ID. Dentro de las prensas redondas, ponlo para pasar el ID Name y el ID nav es interior. Primero, quiero apuntar a la identificación interna. El área rosa es el área interior del elemento. Usando la ayuda del elemento interno, quiero apuntar al elemento exterior. Voy a usar el método del elemento padre, el elemento padre. Voy a mover esta línea a una variable donde A igual a document dot get element by ID dot parent element. Ahora voy a imprimir esta variable en nuestra sección de consola. registro de puntos de consola de tipo sonido dentro de las rotondas son variables A, luego semicon dos en esta línea. Si configuro este archivo, puedes ver mi consola, está escrita. Está escrito sección de diferencias externas. Si un Hobermcar en esta sección, puedes verlo resaltar la sección dif exterior Entonces, el padre profundo interno está fuera D, pero ¿quién es el padre de inmersión externa? Si selecciono el ID externo aquí, algunos se desmayan y quiero mostrar el elemento padre ID externo. Si configuro este archivo, puedes ver en mi consola, es cuerpo. El elemento padre del elemento externo es body. Ahora la pregunta es, ¿quién es el elemento padre del elemento cuerpo? Entonces quiero duplicar esta línea y comentar la anterior. Voy a atar documento punto cuerpo punto elemento padre. Si configuro este archivo, ahora se puede ver en una consola, es T. TML es el elemento padre definitivo de todas las etiquetas Usando este método de focalización, podemos hacer cualquier cosa. Voy a comentar esta línea y descomentar esta y volver a establecer este archivo. Usando este método de targeting, podemos cambiar estiML interno podemos cambiar de estilo, podemos cambiar lo que queramos Supongamos que quiero cambiar el color de fondo exterior. Quiero duplicar esta línea y comentar la anterior. Aquí voy a atar el método de estilo de punto del elemento padre. Y aquí quiero cambiar el color de fondo fondo, igual a, y quiero establecer el color de fondo rojo. Si configuro este archivo, puedes ver el resultado. Como puedes ver, agrega un color de fondo a nuestra etiqueta TML porque aquí pasamos elemento externo y seleccionamos el elemento padre del elemento externo y el elemento padre del elemento externo es HTML Pero si me paso el pelo interior, Entonces establece este archivo, ahora se puede ver que cambió el color de fondo del elemento exterior. Pero seleccionamos elemento interior. Usando el ID del elemento interno, nos dirigimos con éxito al elemento exterior y también aplicamos un estilo a este elemento exterior. Espero ahora liar para ti cómo podemos apuntar al elemento padre. Ahora quiero seleccionar el elemento interior usando el elemento hijo helpop Si te muestro mi archivo STL de punto índice, puedes ver que hay un elemento hijo llamado C también dijiste un ID, child C. Algunos copian el nombre ID, hL y de nuevo al archivo principal dot js, y aquí voy a reemplazar inner con child C. Si configuro este archivo, ahora puedes ver que cambiamos exitosamente nuestra tasa de color de fondo interior Ahora, detengamos otro comando que es el nodo padre. No hay demasiada diferencia entre el elemento padre y el nodo padre. Entonces, para duplicar esta línea y cont out la anterior. Aquí voy a atar nodo padre. Paren, no Si configuro este estilo, como pueden ver, está escrito el mismo resultado. Pero la principal diferencia es si usamos elemento parent y si el elemento parent no está disponible, entonces va a devolver null. Y si usamos nodo padre y si el elemento padre no está disponible, entonces va a devolver algo. Dejémoslo más claro. Voy a quitar esta porción de estilo. Quiero devolver el nodo padre. Si configuro este archivo, ahora se puede ver en mis consolas volver interno porque el padre de C child es elemento interno. Pero si llego a mi punto índice estilFle como pueden ver, en nuestra etiqueta de EstiML, hay un ID, M y voy a copiar Y de vuelta al archivo principal dot js. Quiero pasar el nombre de identificación. Ahora quiero devolver el elemento padre de la etiqueta HTML. Después de establecer este archivo, como pueden ver, se escribe el documento. No devuelvo ningún nulo. Pero si paso elemento padre aquí, déjame mostrarte. Voy a duplicar esta línea y comentar la anterior y quiero pasar elemento padre. Si utilizo esta función, y configuro este archivo, como se puede ver se escribe nulo porque no hay elemento padre de la etiqueta HTML. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender los niños y los métodos del nodo hijo. Gracias por ver este video. Estén atentos. 13. Tutorial de métodos para niños y childNodes: Me alegro de verles chicos. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado con los métodos de recorrido Dom En este tutorial, vamos a aprender los niños y el método del nodo hijo. En nuestro tutorial anterior, ya aprendemos sobre el nodo padre y el len padre. Entonces veamos cuál es la diferencia entre los hijos y el nodo hijo. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor if, y ya abrí mi documento ETML anterior, ETL de punto índice Con eso, abrimos el archivo principal punto Js. Básicamente, usando este método, podemos apuntar a los hijos usando el nodo padre En nuestro tutorial anterior, nos dirigimos al nodo padre usando hijos. Pero en este tutorial, vamos a apuntar a los niños usando paren Entonces déjame mostrarte la demostración. Primero, voy a apuntar al elemento exterior hijos. Entonces aquí quiero pasar el nombre de identificación externo. Y aquí quiero devolver a los niños. Quiero usar el método de los niños. Niños. Voy a establecer este archivo. Si te muestro mi consola, puedes ver mi consola, es colección de mesas escritas. Aquí puedes ver mi consola, total dos niños, H dos etiqueta y sección de inmersión interior. Si te muestro mi estructura estable, como puedes ver, dentro de la inmersión exterior, tenemos un total de dos hijos, sección de inmersión interior y H dos etiqueta. Por eso está escrito dos elementos. Si apunto al elemento interior y quiero devolver toda la etiqueta child del elemento interior, así que aquí quiero atar interior. Y quiero establecer este archivo. Ahora puedes ver en mi sección igual así, está escrito un total de seis elementos de longitud seis. Nuestro primer elemento hijo es H dos tag, y otros cinco elementos son deep tag. Si quiero apuntar a los niños particulares, supongamos que quiero apuntar a C. Para eso, su necesidad de usar llaves cuadradas y yo puse las llaves cuadradas, tenemos que pasar el número de índice Como puede ver, el número de índice es tres. Entonces, para pasar tres aquí. Después de configurar este archivo, se puede ver el resultado. Está escrito este elemento hijo, C. Ahora vamos a establecer un estilo a este objetivo D. Para eso, quiero escoger esta línea y comentar la anterior. Voy a quitar la variable. Voy a escribir docotgtelement por ID y el ni es y el padre También el elemento hijo. Niños dentro de la plaza ss tres. Así que aquí necesitamos usar la función de estilo, estilo punto de fondo. Quiero decir color de fondo rojo. Entonces, para escribir igual a dentro del doble código rojo. Si configuro este archivo, puedes ver el resultado. Como puedes ver, aplica color de fondo rojo a nuestros terceros hijos. Si quiero imprimir el TML interno de este elemento en mi consola, déjame mostrarte Aquí voy a mecanografiar niños TML internos. Entonces este archivo, como puedes ver en mi consola, es print C. Este es el uso de metal infantil. Ahora hablemos de préstamo infantil. Voy a comentar esta línea y también voy a duplicar esta línea y comentar la anterior. Aquí voy a escribir dot child ones y voy a configurar este archivo. Ahora puedes ver en mi sección Casos, ahora puedes ver su longitud es de 13. Como puedes ver, está escrito todos los niños desde la sección interna Pero como puedes ver en nuestro primer índice, es texto escrito. Otro quien es, ¿qué es eso? Si sobrepasé en dos secciones, se puede ver que resalta esta sección. Pero si yo sobre la sección de texto, no resalta todo. Ahora podrías tener cociente ¿cuál es el nodo de texto? De donde cuenta. Supongamos que si usas algún carácter como Enter space en tu código, entonces el nodo hijo también cuenta como un elemento. Déjame mostrarte eso. Vamos d al índice te archivo de estimación, y aquí voy a encomiar uno de los elementos DV, este B, y voy a configurar este archivo Ahora puedes ver mi sección de conso, también está escrito el comando, si abro este comando, como puedes ver, hay un atributo llamado data y también escrito lo que hay dentro del comando De igual manera, si abro nuestro índice cero, como pueden ver, está escrito nuevo director de luz, barras hacia atrás ocho, las notas infantiles cuentan Similar al método children, podemos establecer cualquier texto en nuestro elemento. De lo contrario, podemos cambiar el color de fondo. De lo contrario, podemos aplicar cualquier estilo. Él sólo quiere pasar el número de índice. Si paso uno, entonces voy a pasar dentro de la base cuadrada uno. Entonces voy a aplicar estilo color de fondo, que es rojo. Copia esta línea y pegarla aquí. Si configuro este archivo, puedes ver el resultado. Se aplica color de fondo rojo a este elemento de carga infantil. Se puede hacer de todo. ¿Qué se puede hacer con los niños método. Pero la principal diferencia es que el nodo hijo cuenta todo como un elemento. Esta es la diferencia básica entre estos dos métodos. Gracias por ver este video. Estén atentos para nuestros próximos dos estudios. 14. Tutorial de métodos de JavaScript firstChild y lastChild: Me alegro de verles chicos. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado con el método Dom Taersa Y en este tutorial, vamos a aprender el método del primer hijo y el último hijo. En nuestro tutorial anterior, ya aprendemos sobre el nodo padre y los nodos hijos. En este tutorial, vamos a aprender sobre primer hijo, primer elemento hijo y último hijo. También, último elemento hijo. Sin perder el tiempo, estudiemos prácticas y veamos cómo podemos usarlo. Aquí puedes ver un gráfico Dom y A es nuestro elemento padre B, C, B E F es el elemento hijo de A. Si te pregunto, quién es el primer hijo del elemento A, entonces B es la respuesta. B es el primer hijo del elemento A. De igual manera, si le pregunto, quién es el último hijo del elemento A, es F. F es el último hijo del elemento A. Entonces comencemos la práctica. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión if server y ya creé un documento TML llamado index dot HTML Como pueden ver en mi etiqueta corporal, tenemos a Outer Dev IAD Dev, y a algún niño Dem También vinculamos archivo JS con este archivo STL, punto principal Js. Al principio, quiero devolver el primer elemento hijo de esta IADM Al principio, voy a quitar las líneas innecesarias. No lo necesito. Y después voy a seleccionar documento punto obtener elemento por ID interno. Nos dirigimos a nuestro elemento interior. Entonces voy a usar nuestro nombre de función, que es primer elemento hijo. Voy a etiquetar primer elemento hijo. Si configuro este archivo y te muestro por qué Consola, va a devolver la etiqueta H dos. Déjame mostrarte. Entonces si te muestro sección de consola, como puedes ver, está escrito H interior. Porque el encabezado dos es el primer hijo del elemento interior. Se pueden ver las dos etiquetas dentro del elemento interior. Entonces después de apuntar a este elemento, podemos hacer cualquier cosa con eso. Supongamos que quiero devolver HTML interno. Entonces voy a escribir HTML interno. Si pongo este suelo, puedes ver mi consola, es devolver esta palabra clave, interior. Además, puedes agregar cualquier estilo a este elemento. Supongamos que quiero agregar un fondo, fondo punto estilo punto. Igual a y quiero color rojo. Si configuro este archivo, puedes ver el resultado. Agrega color de fondo rojo a esta etiqueta dos. Recuerde, el primer elemento hijo siempre apunta a la primera etiqueta HTML. En el sentido contrario, tenemos otra función, que es st elemento hijo. Algunos duplican esta línea y comentan anterior y Hamer tipo st elemento hijo Si configuro este archivo, puedes ver el resultado. Agrega color rojo de fondo a nuestro último elemento, que es E. E es el último hijo del Dan interior. Ahora hablemos de otro método, que es el primer hijo. Entonces voy a duplicar esta línea y comentar la anterior. Y si selecciono primero hijo aquí, voy a escribir punto primero hijo y punto y coma a esta línea y establecer este archivo, como pueden ver, es texto escrito Escribía un nodo de texto. Si abro la nota de texto, como pueden ver, dentro de estos datos, tenemos carácter de nueva línea Es decir que usamos el carácter enter para una nueva línea. Ahora, H dos no es el primer hijo de este elemento interior. Ahora el primer hijo es el enter entre D interior y H dos tag. Quiero decir que esta función cuenta todo tipo de elemento como hijo. Sea cual sea el personaje que uses, cuenta como un niño. Entonces esta fue la diferencia básica entre primer hijo y primer elemento hijo. primer elemento hijo siempre devuelve la primera etiqueta tamal, pero el primer hijo siempre devuelve el primer carácter Si usas algún espacio, de lo contrario, nueva línea, en ese caso, cuenta como primer carácter. En nuestra conferencia anterior, ya nos enteramos de ello. También cuenta el comentario como elemento. Ahora hablemos de nuestra próxima función, que es el último hijo. Voy a rematar esta línea y comentar la anterior Y aquí voy a atar al último hijo. Si configuro este archivo, puedes ver el resultado. Nuevamente, está escrito un nodo de texto. Si abro esta nota de texto, como puedes ver el div de datos es nueva línea, si quieres aplicar algún estilo a este elemento, no es posible porque estos caracteres son invisibles. Si intentas hacerlo con fuerza, entonces va a devolver un error Déjame mostrarte. Voy a aplicar estilo a este último elemento. Este último hijo ese estilo tasa de fondo. Si configuro este archivo, como se puede ver en mi consola se escribe error, escriba error. No podemos darle estilo a las notas de texto. Déjame mostrarte otro ejemplo de primer niño bethod. Voy a comentar esta línea y descomentar línea anterior Y aquí voy a cambiar el selector, y voy a usar este selector, hijo C. Quiero pasar este ID, y si quiero devolver el primer hijo del elemento C hijo , arriba para configurar este archivo, puedes ver en mi consola está escrito el carácter C. Porque si te muestro mi archivo de tabla índice, como puedes ver, dentro de este elemento D, solo tenemos un carácter. C, no hay espacio, no hay carácter de nueva línea. De igual manera, si devuelvo el último hijo aquí, alguien a escribir para que escoja esta línea y comente sobre la anterior, y aquí quiero pasar último hijo. Último hijo, como puedes ver, nuevo es ton personaje C. Espero que ahora estos conceptos sean claros para ti. Gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 15. JavaScript nextTutorial de métodos de hermanos y anteriores: Me alegro de verles chicos. Nuevamente, estoy de vuelta con un nuevo tutorial real t Dom traversal methods En este tutorial, vamos a aprender siguiente hermano y hermano anterior En nuestros tutoriales anteriores, aprendemos sobre nodo padre, nodo hijo, hijos, primer elemento hijo, etcétera En este tutorial, vamos a cubrir siguiente elemento anterior hermano, hermano anterior Antes de comenzar la práctica, tratemos de entender cuál es la diferencia entre el hermano siguiente y el hermano anterior Aquí puedes ver un gráfico Dom. Aquí, A es el elemento padre y B, C, D, E F es el elemento hijo de A, y todos estos son elementos hermanos Si te pregunto, quien es el siguiente hermano del elemento D y la respuesta es E, E es el siguiente hermano del elemento B. Si te preguntamos, quien es el fichaje previo de D y la respuesta es C. Esa es la diferencia básica entre estos dos elementos, siguiente y anterior. Si quiero encontrar la señalización previa del elemento B, como pueden ver, no hay hermano previo del elemento B, sino que está la siguiente señalización del elemento B, que es C. Sin perder el tiempo, comencemos la práctica y tratemos de aclarar los conceptos Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión if server y ya creé un documento HTML llamado index dot HTML. Como puedes ver en mi navegador, tenemos DV externo, DV interno y algunos elementos hijos. Ya estás familiarizado con esta estructura. Vamos a saltar al Mindjsfle. Al principio, vamos a comenzar con el siguiente elemento hermano. Como puedes ver en mi Dot Jsfile principal, ya apuntamos a este elemento, este elemento C usando su ID, hijo C. Si te muestro mi archivo STL índice, puedes ver el nombre ID, hijo C. Aquí voy a atar siguiente Siguiente elemento hermano. Voy a establecer este archivo. Después de establecer este archivo, como pueden ver, se sienta en nuestro siguiente elemento, que es D. Del mismo modo, si devuelvo hermano anterior, alguien tema esta línea y comente anterior y ella para escribir el elemento anterior hermano Elemento anterior hermano. Después de paso este archivo, se puede ver el elemento escrito, éste. Usando esas funciones, podemos apuntar elemento anterior, de lo contrario elemento mixto. Después de apuntar a este elemento, también podemos aplicar estilo. Déjame mostrarte. Aquí voy a escribir estilo, punto de fondo. Igual a dentro de la tarifa de doble curso. Después de configurar este archivo, se puede ver el resultado. Como puedes ver, agrega color de fondo rojo al elemento anterior. Además, si quieres devolver el TML de este elemento, sí, puedes Justo en el tipo punto interior STML. Si configuro este archivo, puedes ver mi consola, está escrito en el carácter B. Ahora quiero devolver el siguiente elemento hermano del elemento E. Para eso, estoy de vuelta al archivo index dot tML, y voy a establecer un ID a este elemento ID igual a hijo E. Voy a establecer este archivo aquí, voy a escribir child E y quiero devolver el siguiente hermano de este elemento Aquí voy a escribir max element hermano. Si configuro este archivo, como pueden ver en mi consola se escribe null porque después del elemento E, no hay elemento hermano Por eso está escrito nulo. Si quieres aplicar algún estilo, entonces va a girar flecha en nuestra consola porque no hay elemento después del elemento E. Estos dos métodos se utilizan para apuntar al elemento, pero nuestros dos siguientes métodos pueden apuntar a cualquier cosa. Puede apuntar notas de texto, lo contrario, comentarios, etcétera Ya estás familiarizado con eso. Ahora voy a usar el siguiente método hermano y el método hermano anterior De nuevo, voy a duplicar esta línea y comentar la anterior, y voy a escribir hermano anterior Vias canta. Si configuro este archivo, como puedes ver en mi navegador, es texto escrito, está escrito un nodo de texto, y como puedes ver, está escrito un personaje de Newlin Si eliminas el carácter Nuland entre D y E, entonces vas a devolver el elemento D en mi consola Si intento eliminar el carácter de nueva línea y si configuro este archivo por ahora, no me va a funcionar porque mi editor de código visual studio automáticamente embellece mi código y agrega una nueva línea para terminar con este Si configuro este archivo, como pueden ver, se agrega una nueva línea. Es por eso que de nuevo devuelve modo texto. De alguna manera, si puedes eliminar el personaje de Newland de esta línea, en ese caso, va a devolver el elemento De la misma manera, el siguiente método hermano funciona. Si escribo siguiente cabeza de hermano, hermano siguiente y luego configuro este archivo, como se puede ver, de nuevo, devuelve Porque esta función puede contar espacios de caracteres o medias como un nodo JavaScript. Por eso ves hecho pick. 16. Tutorial de createElement y createTextNode: Hola, chicos. Me alegro de verte de vuelta. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado Javascript Dom. En este tutorial, vamos a aprender Dom crear Mthuns Básicamente en JavaScript, tenemos que volver a crear método, crear elemento, crear nodo de texto, crear comentario. Tratemos de entender estos métodos. Supongamos que desea agregar una etiqueta de estimación en su documento usando JavaScript. Desea agregar una nueva etiqueta de párrafo en su documento. Puedes agregar cualquier etiqueta que quieras. Para poner una etiqueta en tu página de estimación, necesitas usar un método, y el método ame es create element. Y si quieres escribir texto en tu documento estim, para eso, necesitas usar este método, Crear nodo de texto Supongamos que desea agregar este texto en su documento. Para eso, necesitas usar este método, crear Tan. Y si quieres agregar un comentario en tu página de estimación usando el JavaScript de helpop para eso, necesitas usar este método, crear comentario Empecemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor Live, y ya creo un documento de estimación llamado index dot t. dentro de este documento de estimación, tenemos una etiqueta de encabezado, Dong create methods, y también nos vinculamos con el archivo JavaScript, dogret dot js Y en este archivo JavaScript, voy a usar todos los métodos create. Al principio, vamos a crear un elemento en nuestro documento. Entonces aquí, voy a crear una variable. Dónde, y nuestro nombre de variable es nuevo elemento. Igual a document, document dot, y nuestro nombre de método, que es create element, create element. Crear elemento dentro de las prensas redondas dentro de los códigos Duval, y dentro de los códigos doule, necesitamos pasar el nombre de la etiqueta, que es PagrApp y semigrom Entonces quiero imprimir esta variable en mi consola. Entonces aquí, voy a escribir Consola, punto, registro. Digo las prensas redondas o variable, nuevo elemento, nuevo elemento. Después semicon dos en esta línea. Presiono este archivo, si te muestro mi consola, como puedes ver, es imprimir nuestro nombre de etiqueta, P. Del mismo modo, si quieres crear etiqueta diferente, supongamos que quieres crear dos etiquetas. Para eso, necesitas escribir en el código doble y necesitas configurar este archivo. Como puedes ver, crea rumbo a etiqueta. Puede crear cualquier elemento HTML usando este método, create element. Ahora te voy a mostrar ¿cómo podemos crear tomas Node? Para eso, voy a tomar otra variable que y el nombre de la variable es newt newt igual a aquí voy a llamar a nuestro nuevo método, que es create toma Node, document dot create toma Node document dot create toma Entonces dentro de los versos redondos y dentro de la cita, necesitamos pasar el texto y aquí para pasar Hola mundo. Y semicon dos en esta línea y voy a poner este archivo Antes de configurar este archivo, también, voy a imprimir esta variable en mi consola. Yo subo esta línea y aquí voy a pasar nuevo texto. Si configuro este archivo, como pueden ver en mi consola, se imprime el texto, hola mundo. Aquí puedes insertar miles de palabras, miles de caracteres tanto como quieras. Ahora te voy a mostrar cómo podemos agregar y comentar a un documento de estimación usando la ayuda de JavaScript. De nuevo, voy a crear otra variable que y nuestro nombre de variable es nuevo comentario Nuevo comentario. Igual al punto del documento, crear comentario, crear comentario. Dentro de los códigos de muñeca. Sólo para escribir el comentario. No necesitamos usar ningún signo mayor que otro signo de exclamación. Por ahora, voy a escribir esto es comentario. Y luego voy a imprimir esta variable en mi consola. Entonces voy a esta línea y aquí voy a pasar nuevo comentario, Nuevo comentario. Sube este archivo, como puedes ver en mi consola, es sprint, esto es comentario. Aquí puedes ver el comentario de TML, menos que signo signo de exclamación, guión guión, esto es comentario, y mayor que signo guión guión, esto es comentario, y mayor que Como puedes ver usando JavaScript, podemos crear elemento TML, nodo de texto, comentario, etcétera En el siguiente tutorial, vamos a insertar este nodo de texto dentro de este elemento. Esto es para este tutorial. Gracias por ver este video Sytune. 17. JavaScript appendChild e insertBefore: Hola, chicos, me alegro de verles de vuelta. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado JavaScript doom en este tutorial, vamos a aprender JavaScript doom Append Básicamente en JavaScript, tenemos un total de dos métodos append, Appenhild e Veamos qué podemos hacer con eso? En nuestros tutoriales anteriores, aprendemos cómo podemos agregar un elemento STML en una StimlPage Para eso, utilizamos el método del elemento Pit, y también aprendemos cómo podemos agregar texto en una StimulPage usando JavaScript con la ayuda de quit TeXn Ahora el quot es como podemos unir este texto con este elemento. Quiero mover este texto dentro de este párrafo, cómo podemos adjuntarlo con un elemento. Eso, JavaScript introduce un método especial, que es un niño de pintura. Usando este método, podemos agregar texto con un elemento. No sólo eso, usando este método, también podemos adjuntar este elemento con otro elemento. Empecemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión if server, y ya creo un documento estable llamado index dot HTML También vinculo un archivo JavaScript llamado men dot js. Aquí puedes ver, creamos un elemento profundo y también estilizo este elemento profundo. Ponemos ocultar con relleno y margen. Y si te muestro mi archivo principal dot js, como puedes ver, ya creamos un elemento usando heading to tag. Con eso, también creamos nodo de texto, hola mundo. Y si te muestro mi consola, como puedes ver, tenemos rumbo a etiquetar y el nodo de texto, hola mundo. Y ahora tenemos que adjuntar este texto con este elemento. Por lo que necesitamos agregar esta nota de texto en este elemento. Para ello, necesitamos usar el método Append hil. Aquí voy a escribir la variable m que es nuevo elemento, Nuevo elemento, y en este nuevo elemento, quiero anexar el nodo de texto Así que para escribir punto Agregar hijo. Anexar niño. Dentro de los vestidos redondos, tenemos que pasar la extremidad variable que quiero appaent y quiero appaent nuevas corbatas Copo la extremidad variable y la voy a pegar aquí y sim a deslizar. Si configuro este archivo y te muestro mi consola, como puedes ver, anexa nota de texto en nuestra nueva sección de elementos, que está encabezando dos Adminé con éxito el sabor dentro del rubro dos. Ahora quiero mostrar el encabezado dos dentro de este elemento DB. Para eso, de nuevo, voy a usar el método appenJL. Dentro de este dang profundo voy a anexar el elemento. Si te muestro mi archivo de estimación de índice, como puedes ver, hay una D con identificación llamada gusto. Voy a copiar este nombre de identificación. Volvamos al archivo Mindjs y estoy escribiendo después del método appenchL con nuevo elemento, voy a escribir documento Dot, get element by ID está en las rotondas necesitamos pasar el ID name, Entonces voy a usar el método, apinhild append child. Después dentro del proceso redondo, aquí quiero anexar el nuevo elemento Copio la variable nombre nuevo elemento, y voy a pegar dentro del pase redondo semigra esta línea Después paso este archivo, se puede ver en mi navegador, se imprime hola mundo. Se añade el elemento en nuestro contenedor profundo. Si inspecciono esta sección, como pueden ver, dentro de este DF tenemos un elemento H dos y su impresión hola mundo. Pero si te muestro mi archivo índice punto H, como puedes ver, no hay nombre de elemento H dos. Además, no hay texto, hola mundo. Entonces como se puede ver cómo podemos usar append method función dos veces Primero, agregamos este texto en este elemento. Después agregamos este elemento en este profundo suceso. Entonces así es como podemos crear nodo de texto, lo contrario elemento y podemos adjuntarlo con elemento existente. Recuerde, este método de apéncil siempre agrega el elemento, lo contrario, nodo de texto, fin del nodo paren. Déjame mostrarte. Entonces aquí, voy a añadir algún párrafo. Entonces para usar PtagParrafo, y quiero escribir algún texto, Lorem Se va a agregar diez palabras de oración. Después de paso este archivo, como se puede ver, aquí se puede ver, después de terminar este párrafo, se agrega el elemento to. Recuerde, método apenchil siempre añadir el elemento y la última posición Si quieres agregar este elemento antes del párrafo, para eso, tenemos otro método, que es insertar antes. Ahora quiero mover este encabezamiento antes del párrafo. Déjame mostrarte cómo podemos usarlo. Quiero mojar esta línea y comentar anterior aquí voy a atar inserto inserto enemigo Entonces dentro de la rotonda necesitamos pasar el parámetro total de dos Primero en nuestro primer parámetro, necesitamos pasar el nombre del elemento. Que elemento quiero anexar en nuestro DP y quiero anexar este elemento, nuevo elemento Copo el nombre del elemento y lo voy a pegar aquí. Ahora, tenemos que pasar la posición donde quiero anexar este elemento Pero antes de pasar el segundo parámetro, voy a crear el target de este elemento padre. Estoy para escribir, documentar, punto obtener elemento por ID, dentro de las prensas redondas gusto. Voy a asignar este objetivo en una variable. Yo escribo dónde y nuestro nombre de variable es target. Objetivo igual a esta ubicación. Ahora voy a sustituir este sector por esta variable, target. Voy a escribir target dot insert antes, dentro de la prensa redonda nuevo elemento. Ahora en nuestro segundo parámetro, voy a escribir target dot childs. Y voy a precisar la posición. Dentro de la base cuadrada, voy a escribir Z. Es mezquino quiero poner este nuevo elemento antes del índice cero Si configuro este archivo, ahora puedes ver en mi dip se mueve el nuevo elemento antes del paragrama Si te muestro mi sección de elementos, como puedes ver, primero imprime nuevo elemento, luego nuestro párrafo. Así es como podemos usar insert before método. Espero que ahora te quede claro cómo podemos usar apengile e insert before method Gracias por ver este video, estén atentos para nuestro próximo tutorial. 18. Tutorial de JavaScript insertAdjacentElement e insertAdjacentHTML: Hola, chicos, me alegro de verles de vuelta. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado JavaScript dom. En este tutorial, vamos a aprender Java script insert adjacent methods. En nuestro tutorial anterior, aprendemos dos métodos JavaScript append, Append hild e Se utiliza para anexar elemento existente y toma nota a un elemento padre Appenchild siempre juega el elemento en la última posición para usar insert antes, necesitamos especificar una posición y este método, anexar el elemento antes de esta posición especificada Ya lo aprendemos en nuestro tutorial anterior. Después de eso, tenemos insertar elemento de ajuste, insertar adjustin SML, e insertar texto adjustin Estos tres métodos también se utilizaron para anexar el elemento, pero hay una diferencia entre este método tres y estos dos métodos Nuestros dos métodos anteriores solo se utilizan para el propósito de anexar. Se puede anexar el elemento existente, de lo contrario, elemento de texto en el elemento paren No puede crear el elemento. Se utiliza para agregar solamente el elemento, pero nuestros tres últimos métodos pueden crear el elemento, también anexar el Quiero decir, si usas estos métodos, entonces no necesitas usar create element method y create text notte method Antes de comenzar la práctica, tratemos de entender cuál es la diferencia entre todos estos tres métodos. Supongamos que desea crear una etiqueta de estimación con el mismo tiempo que desea anexarla. Quiero crear esta etiqueta de párrafo y al mismo tiempo quiero agregarla. Para eso, necesitamos usar este método. Inserte ajuste y elemento. Si utilizo este método, al mismo tiempo crea el elemento, también anexa el elemento Pero si quieres crear etiqueta y tomar nodo al mismo tiempo, en ese caso, necesitas usar este método, Insertar tabla adjustin Aquí puedes ver creamos un párrafo, también insertamos el nodo fiscal dentro de este párrafo. Usando este método, podemos crear nodo fiscal, podemos crear elemento. También podemos anexar el elemento. Podemos hacer tres tareas a la vez, si quieres crear un nodo de texto simple, para eso puedes usar el método insert adjacent text. Este método puede crear el texto, también puede obtener el texto. Ya estás familiarizado con eso, ¿qué puedo hacer con estos métodos? Con eso, también podemos proporcionar una posición específica. Entonces intentemos entender la posición donde podemos posicionar nuestros elementos y tomar nodos. Y las posiciones son antes de comenzar, arriba comenzar, antes de fin y upara. Tenemos un total de cuatro posiciones diferentes, así que intentemos entender las posiciones con mayor claridad. Supongamos que tenemos un recipiente profundo y dentro de este recipiente profundo, tenemos un sabor. Y ahora necesitamos crear este nodo take con H un elemento, y también necesitamos agregar este elemento dentro de esta profundidad Ahora bien, si uso antes de comenzar posición, en ese caso, va a anexar el elemento antes del inicio profundo y si uso la posición de inicio arriba, en ese caso, entonces va a anexar el elemento en la primera posición dentro del contenedor Y si utilizo uptur end position, entonces va a anexar el elemento up end de este contenedor Y si usas antes de la posición final, en ese caso, va a anexar este elemento en esa posición Dentro de este dictiner lo va a posicionar en último lugar Así es como podemos usar esta posición. Sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y ya creo un documento TML llamado index dot HTML Con eso, creo un archivo JavaScript MinDotJS También vinculo este archivo con esta página de tabla, También, pueden ver, tenemos un elemento profundo en nuestra etiqueta corporal, y le puse una identificación a este elemento profundo, que es Taste. Dentro de este elemento profundo, tenemos un párrafo. Vamos a comenzar nuestra práctica con inserto de ajuste y elemento. Vamos a saltar al archivo principal Do js. Para eso, voy a crear un elemento. Aquí voy a escribir donde y nuestro nombre de variable es Nuevo elemento. Igual a aquí, voy a crear un elemento heading. Aquí voy a escribir, documentar, punto, crear elemento, crear elemento. Y dentro de los rounders, quiero crear un elemento encabezado dos, tener un elogio H dos Después punto y coma dos N esta línea. Ahora voy a crear un nodo take porque necesitamos insertar el nodo de texto dentro de este elemento de encabezado. Tipo hemo, y nuestro nombre de variable es nuevo texto, nuevo texto, igual a documento, punto, crear nodo de texto Crear nodo de texto. Dentro de la prensa redonda, voy a pasar un texto aleatorio. Voy a escribir hola palabra. Y punto y coma dos en esta línea. Creamos un elemento y toma modo, y ahora necesitamos agregar este nodo de texto dentro de este elemento Pero antes, voy a explicar lo que es insertar elemento adyacente. Ahora cuando crear un objetivo. Primero, voy a crear un target. Quiero apuntar a este elemento DV. Si te muestro mi archivo EL índice, como puedes ver, en este DP establecemos un ID, ID gusto. Copo el nombre de identificación gusto y vuelvo al punto principal archivo Js aquí voy a escribir palabra nuestro nombre de variable es target. Igual a document dot get element by ID, dentro de la prensa redonda está nuestro nombre ID, paste y Semgron dos en esta línea Creamos el elemento target. Donde quiero anexar este H dos elemento. Ahora voy a usar insertar elemento adyacente. Entonces, para escribir punto objetivo, insertar, adyacenelement. Dentro de las rondas, dentro de los códigos dole, aquí tenemos que pasar dos parámetros. Primero, tenemos que pasar la posición. Donde queremos poner el elemento. Voy a asignar el puesto y voy a escribir antes de comenzar. En nuestro segundo parámetro, necesitamos pasar el nombre del elemento. Aquí voy a escribir nuevo elemento. Copo la variable nuevo elemento, y la voy a pegar aquí. Y subcu a esta línea. Si configuro este archivo, no va a reflejarse en nuestra página web porque no agregamos el nodo de texto en este elemento Pero si te muestro mi sección de elementos, aquí puedes ver dentro de este cuerpo, antes de este elemento D, tenemos H dos elementos. Y si te muestro mi nodo índice STL archivo, como puedes ver, antes del elemento D, no tenemos ningún elemento H dos Tenemos H un elemento. Pero en mi sección de elementos, puedes ver el nombre del elemento, H dos, y ahora voy a anexar este nodo de texto en este elemento Para eso, necesitamos atar Nuevo elemento punto, necesitamos usar el método append child Anexar niño dentro de los versos redondos el nombre de la variable, nuevo texto ¿Semi ir a terminar esta línea? Si configuro este archivo, ahora puedes ver el resultado. Ahora puedes ver en mi navegador, se anexó el nuevo elemento antes de este elemento DV. Ahora puedes ver que nuestro elemento está fuera de este elemento. Pero si cambio la posición, entonces voy a duplicar esta línea y comentar la anterior y root up para comenzar. Arriba tercer comienzo. Si configuro este archivo, puedes ver el resultado. Ahora se está agregando nuevo elemento, inicio de esta D. Ahora voy a hablar de nuestro nuevo método, que es insertar TML adyacente Para este método, necesitamos crear elemento TML y la nota de texto Voy a comentar ambos de esta línea. Además, no necesito un método pen gil, así que voy a comentarlo de nuevo. Necesitamos el elemento target y nuestro método. Ahora voy a llamar al nombre del método. Aquí voy a escribir target el inserto adyacente HTML. Voy a reemplazar elemento con HTML. Entonces en nuestro primer parámetro, necesitamos pasar la posición. En nuestro segundo parámetro, necesitamos pasar el elemento y el nodo de texto a la vez. Déjame mostrarte. Dentro de los códigos dobles, voy a empatar H dos. Como voy a cerrar esta etiqueta, H dos. Y aquí voy a escribir hola mundo. Voy a establecer este archivo. Después de establecer este archivo, como puedes ver, se escribe el mismo resultado. Simplemente usando este método, podemos crear el nodo de texto, podemos crear el elemento. También agregamos el elemento en esta posición. Insertamos con éxito este elemento en esta posición. Este es el uso de insertar método estable adyacente. Al principio, apuntamos al elemento DV y lo almacenamos en esta variable llamada target. Después aplicamos este método a este DP en esta función, primero pasamos la posición, luego pasamos el nodo de texto y el elemento. Si quieres cambiar la posición, sí, puedes. Entonces tipos después de N. configuré este archivo, se puede ver el resultado. Ahora en el elemento arriba extremo de esta profundidad. Uno a uno, puedes consultar las posiciones. Entonces, si usamos este método, podemos escapar esta línea de tres. Este es el beneficio de usar este método. Inserte TML adyacente. No necesitamos crear el elemento, no necesitamos crear el nodo te, y tampoco necesitamos agregar el nodo de texto en este elemento Podemos hacer lo mismo en una sola línea. Ahora, hablemos de nuestro último método, que es insertar adyacente, texto. Básicamente, esta función crear toma nodo y anexarlo, nada más. Entonces voy a duplicar esta línea y comentar la anterior. Aquí voy a escribir insert adyacente fijo. En nuestro segundo parámetro, voy a pasar un texto sencillo, hola mundo, no el nombre del elemento. Si configuro este archivo, puedes ver el resultado. Aquí se puede ver después del final de esta profundidad, agrega el texto, hola mundo. Si te muestro mi sección de elemento y sección de cuerpo, como puedes ver, después de terminar esto Dave, agrega el texto, hola mundo. Este es el uso de todos estos tres métodos de inserción. Yo ho ahora está claro para ti. Si quieres cambiar la posición, uno por uno, en tu primer parámetro, puedes cambiar la posición. No quiero que este tema sea más complejo. Quiero que sea tan simple como eso. En el siguiente tutorial, aprenderemos cómo podemos reemplazar el elemento existente. También, podemos eliminar el elemento existente. Esto es para este tutorial. Estén atentos para nuestro próximo tutorial. Gracias por ver este video. 19. Tutorial de JavaScript replaceChild y removeChild: Hola, chicos, me alegro de verles de vuelta. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado con doom en este tutorial, vas a aprender dos métodos JavaScript. Reemplace al niño y retire al niño. Si quieres reemplazar y eliminar etiqueta TML usando JavaScript para eso, necesitas usar esos métodos Reprimir niño y quitar niño. Empecemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión de servidor if. Ya creo un documento ETML llamado index dot TML. Dentro de este documento, como puedes ver, en nuestra etiqueta corporal, tenemos etiqueta UL. Significa debajo de la lista, y tenemos que decir cuatro elemento de la lista. Estos son todos los nombres de frutas, naranja, manzana, uvas y plátano. Al principio, quiero reemplazar nuestro primer elemento de la lista por otro nombre de fruta. Como puedes ver en nuestro primer ítem de lista, tenemos naranja. Volvamos al archivo Mind js. Al principio, voy a crear una nueva etiqueta de IA. Voy a crear el nuevo elemento. Entonces escribe ahí y nuestro nombre de variable es nuevo elemento. Nuevo elemento. Después igual al punto del documento, crear elemento. Dentro del nombre del elemento RoundReo, que es elemento de lista, ahora necesitamos crear el texto Quiero decir toma nodo. Aquí quiero escribir donde nuestro nombre de variable es nuevo texto. Nuevo texto, igual a document, dot, create text node, create te node, dentro de las rondas dentro del código de dule por ahora, voy a escribir un nombre de fruta y el nuevo futome es mango Ahora necesitamos agregar esta toma nota en este elemento. Como saben, para eso, necesitamos usar el método Appenhild. Hemotyp Nu Element punto anexar niño. Es el rounders es el nombre de la variable, que es nuevo ts. Y subgraan dos en esta línea. Ahora necesitamos apuntar al nodo padre desde donde queremos eliminar el elemento de la lista. Como puedes ver, tenemos una identificación en nuestra lista. Copia la lista de nombres de identificación y vuelve al MindoJFle. Ahora voy a crear la variable target donde y nuestro nombre de variable es target. Igual al punto del documento obtener elemento por ID. Dentro de la ronda presiona la lista de variables, y mg a esta línea. Nos dirigimos al nodo padre y lo almacenamos en esta variable llamada target. Ahora voy a apuntar a este elemento hijo. Voy a crear otra v que y nuestro nombre de variable es elemento antiguo. Elemento antiguo. Igual al punto objetivo, método hijos. Entonces dentro de los procesos cuadrados, necesitamos pasar el número de índice, que es el semicon Z a esta línea Voy a establecer este archivo. Si imprimo esta variable en mi consola, vamos a imprimir la variable en nuestra consola. Hemotipo Consola, punto, registro. Es la rotonda son variables Elemento antiguo. Hold elemento, y s en esta línea. Después de establecer este archivo, si te muestro mi sección CSO, aquí puedes ver que está escrito el elemento de la lista Dentro de este ítem de la lista, tenemos la ola naranja. Está escrito la primera etiqueta LI de nuestra lista. Ahora voy a comentar esta línea y voy a usar el método replace Child voy a escribir target replace Child Method, replace child. Entonces dentro de la prensa redonda, tenemos que pasar al parámetro dos. Dentro de esta reress redonda en nuestro primer parámetro, necesitamos pasar de qué elemento quiero reemplazar por Quiero sustituir por nuevo elemento. Aquí voy a escribir nuevo elemento. En nuestro segundo parámetro, necesitamos pasar qué elemento quiero reemplazar y quiero reemplazar nuestro elemento antiguo. Voy a pasar viejo elemento y semiconn a esta línea. Después de configurar este archivo, como puedes ver en mi navegador, reemplaza naranja con mango. Si cambiamos el número de índice aquí, voy a pasar a y establecer este archivo. Ahora ya puedes ver, va a sustituir las agarras con mango. Espero que quede claro para ti cómo funciona el método replace child. Aquí puedes reemplazar cualquier tipo de etiqueta usando este método. Puede reemplazar la etiqueta Dip, la etiqueta de tabla, la etiqueta de párrafo, la etiqueta que desee. Ahora, hablemos de otra función que es quitar niño. Ahora quiero eliminar el primer elemento de esta lista. Al principio voy a comentar toda esta línea. Entonces ella necesita pasar el número de índice, que quiero quitar. Entonces voy a pasar el índice cero. Y ahora voy a usar el método name remove child. Entonces voy a duplicar esta línea y comentar la anterior y Hemo tipo target dot remove child Quitar niño. Entonces dentro de la lavandera, su necesidad de pasar solo un parámetro Y nuestro nombre de parámetro es viejo Element, algún tipo viejo elemento. Ahora voy a configurar este archivo. Yo preestablecí este archivo, como pueden ver, se ha eliminado el naranja de esta lista. Ahora tenemos que decir el nombre de tres frutos en esta lista, Manzana, uvas y plátano. Así es como podemos eliminar cualquier elemento hijo de esta lista. Si cambio el número de índice, entonces aquí, voy a pasar el índice dos y establecer este archivo. Ahora ya puedes ver, se ha quitado otra fruta de esta lista. Así es como podemos usar remove child. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 20. Tutorial de JavaScript cloneNode: Bienvenidos de nuevo, chicos. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado con el domo JavaScript en este tutorial, vamos a aprender JavaScript clonar ninguno. Usando este método, podemos clonar cualquier nodo. En tu lado izquierdo, puedes ver lista de pedidos, mango, plátano, uvas y manzana. Y en nuestro lado derecho, tenemos lista de verduras, zanahoria y rábano. Supongamos que quiero copiar las agarras de la lista de frutas y quiero pegarlas en la lista de verduras Para eso, necesitamos clonar la etiqueta LI de estas gráficas, y necesitamos usar el nombre del método Cronen Entonces veamos cómo podemos usarlo prácticamente. Como de costumbre, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Live Server, y ya creé un documento ML llamado index dot HTML. Con eso, nos vinculamos con mando js file, main doot gs. Por ahora, es un archivo vacío. Además, se puede ver en mi etiqueta corporal, tenemos un total de dos lista desordenada Además, asignamos ID a esta lista, Lista y lista dos. Y ahora quiero copiar la primera etiqueta LI de esta lista, y quiero pegarla dentro de la Lista dos. Para eso, necesitamos usar un método llamado corona. Así que saltemos al archivo Mindojs. Primero, voy a tomar una variable que y nuestro nombre de variable es target. Al principio, necesitamos apuntar al elemento, qué elemento quiero clonar. Quiero clonar, último, igual a document do get element by ID dentro de los rounddresses, dentro de los códigos de espiga, necesitamos pasar el ID, que es lista Como saben, aquí necesitamos usar el método Children, algunos t niños. Niños dentro de las prensas cuadradas, tenemos que pasar el número de índice. Al principio, quiero copiar naranja, así que aquí voy a pasar cero, así que vamos a terminar esta línea. Y ahora necesitamos copiar este elemento usando el método de nodo ro. Entonces aquí, voy a crear otra variable ahí, y nuestro nombre de variable es copy element. Copiar elemento. Igual al método del nodo clon de destino. Con nodo. Por ahora, no quiero pasar ningún parámetro, pero puedes pasar dos parámetros por otras caídas. Ahora, vamos a imprimir esta variable en nuestra consola. Hemo tipo consola dot log, la prensa redonda o elemento de copia variable Entonces vamos a terminar esta diapositiva. Después de configurar este archivo, si te muestro mi sección de consola, aquí puedes verlo copiar solo el nombre del elemento AI. No copió el texto que está dentro de la etiqueta AI. Porque como te dije, el coágulo viene con dos valores. Por defecto, viene con formularios. Si paso el parámetro false aquí, en ese caso, sólo va a copiar el atributo y el nombre de la etiqueta, no el valor. Déjame mostrarte el ejemplo. Aquí, voy a pasar un nombre de clase. Clase, y el nombre de la clase es XYZ, y voy a establecer este archivo. Ahora puedes ver en mi consola, copia el nombre de la etiqueta con el atributo class XYZ, pero no copia el valor que está dentro de esta etiqueta, naranja. Si quieres copiar el valor interno con eso, en ese caso, ahí necesitas pasar valor verdadero. De alguna manera para escoger esta línea y comentar la anterior. Voy a pasar verdadero val. A través, y voy a guardar este archivo. Ahora se puede ver el Cazole. Es copiar el nombre de la etiqueta, también el atributo, y el valor naranja. Copié con éxito el elemento. Ahora necesitamos agregar este elemento en nuestra segunda lista y para anexar este elemento, necesitamos usar el método Appenchal Aquí voy a escribir elemento Dapumeng por ID, y el nombre de ID es dos dos últimos. Apuntar con éxito a nuestra segunda lista. Aquí, necesitamos usar un nombre de método, que es append hild append child Un append child, quiero anexar este elemento copy. Copio el nombre de la variable, elemento de copia. Y dentro del costo de la torre, voy a pegar el valor, copiar elemento, y Semgro dos en esta línea Después de que configuré este archivo, como pueden ver en mi navegador, agregó el nombre de la fruta en nuestra nueva lista, naranja. Básicamente, creamos el elemento de la lista uno y lo pegamos dentro de la lista dos Espero que ahora te quede claro, cuál es el uso del método de nodo crone Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender sobre el método contains. Entonces gracias por ver este video, declarando. 21. JavaScript contiene tutoriales de métodos mejorados: Hola, chicos. Me alegro de verte ahí. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado con el domo Javascript en este tutorial, vamos a aprender JavaScript contener método. Aquí se puede ver una profundidad y establecemos un ID a esta profundidad, que es exterior dentro de esta profundidad externa, tenemos a tres deeps secundarios y quiero buscar un ID que esté dentro de este contenedor exterior Supongamos que quiero buscar en una identificación. Después de apuntar al elemento externo, quiero buscar, quiero buscar un ID de elemento hijo, que está dentro de la D. externa Para eso, necesitamos usar métodos de contener. Y este método devuelve sólo dos tipos de onda a través de cualquiera de las formas. Como pueden ver, este dV es hijo de lo profundo exterior, va a volver a ser verdad. ¿Pero qué? Si usamos el ID en un elemento nieto, quiero decir dentro del elemento hijo de deep outer, creo otro niño, y luego configuro este ID a este niño Ahora es un elemento nieto de profundidad externa, pero aquí apuntamos a la profundidad exterior y buscamos si hay un IDNM interior en este contenedor o Sea cual sea el elemento que utilices, si el ID sigue existiendo en este contenedor, en ese caso, va a regresar a través. Otro va a devolver formularios. Simplemente, quiero decir, si el ID es existir dentro de esta inmersión exterior, siempre está escrito true. Sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creé un documento TML llamado index Con eso, también vincula un archivo JavaScript con este documento. Nuestro nombre de archivo JavaScript es punto principal Jsfle. Por ahora, es un vacío. Si vuelvo a mi archivo índice TML, y como pueden ver en nuestra etiqueta corporal, tenemos un contenedor con identificación llamado gusto Y dentro de este contenedor, tenemos una etiqueta de párrafo y otro elemento profundo. Y en este elemento profundo, tenemos otro párrafo hijo. Y en este párrafo, establecemos una identificación llamada ABC. Ahora bien, este párrafo se convierte en elemento nieto de esta identificación llamada gusto. Entonces primero, tenemos que apuntar al elemento padre. Vamos a llegar al archivo principal de perros, y aquí, voy a crear una variable donde y nuestro nombre de variable es elemento padre. Elemento padre. Igual a document, dot, get element by ID. Son los vestidos redondos, los códigos dobles, y la identificación es gusto. Entonces Semgraun dos en esta línea. Ahora voy a apuntar al elemento, cuyo ID es ABC. Aquí voy a crear otra variable ahí y nuestra variable es target. Objetivo igual a documento punto obtener elemento por ID dentro de las prensas redondas dentro de los códigos dobles, el ID nombre ABC. El Semgoru dos en esta línea. Ahora voy a buscar este ABC ID en el contenedor de prueba. Si la identificación es más fácil, entonces va a devolver true. De lo contrario, va a devolver falso. Entonces encontremos el ID de AVC en el elemento test. Para eso, nuevamente, voy a crear otra variable y nuestra variable es find. Igual al elemento padre punto nuestro método aquí voy a usar método contains. Contiene dentro de las prensas redondas, y ahora necesitamos pasar qué elemento quiero encontrar. Aquí voy a encontrar el elemento ABC. Tenemos que pasar el nombre de la variable target. Quiero buscar el elemento target. El vamos a terminar esta línea. Ahora, llevemos la variable en nuestra consola. Aquí voy a escribir, Consola. Registro de puntos dentro de la ronda versus el nombre de la variable, multa y semicurna a esta línea y semicono a esta línea. Voy a establecer este archivo. Si te muestro mi consola, como puedes ver, está escrito true porque nuestro ID de destino está disponible dentro del elemento padre. Pero si cambio el nombre de identificación, entonces aquí voy a reemplazar AVC por XYZ Entonces establece este archivo, ahora puedes ver que está escrito porque este ID no existe en nuestro documento. Esta es una función de uso de contenidos. Espero que ahora te quede claro. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 22. Tutorial de JavaScript hasAttribute y hasChildNodes mejorado 90p: Hola, chicos. Me alegro de verte. Una vez más, estoy de vuelta con un nuevo tutorial relacionado JavaScript Dom. Y en este tutorial, vas a aprender tiene atributo y tiene atributo hijo. Vamos a aprender estos dos métodos en este tutorial. Aquí puedes ver, tenemos un DV con ID llamado gusto. Con eso, tenemos una clase llamada ABC, y contenía un texto, hola mundo. Y ahora quieres comprobar, hay algún atributo sin ID en este elemento? Al principio, voy a apuntar a este elemento usando su ID. Entonces quiero buscar. ¿Hay algún otro atributo sin ID en este elemento? Para ello, necesitamos usar el método de atributo hash, y este método va a devolver en un verdadero resultado True, ya sea fals. Este método siempre devuelve el valor Volan. Si el atributo está disponible en este elemento, en ese caso, va a devolver true. O va a devolver falso. Sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor b, y ya creo un documento de estimación llamado index dot html. Con eso, creamos el archivo principal Dot js. También adjunto a MindoJSFLE con este documento de estimación. Como puedes ver en mi etiqueta corporal, tenemos un elemento DV en este elemento DV, tenemos una identificación llamada gusto. Dentro de este elemento profundo, tenemos dos elementos hijo, H dos etiquetas y una etiqueta de párrafo. Al principio, en mi archivo JavaScript, voy a apuntar a este elemento DV. Quiero copiar esta fase de nombre de identificación. Después volvamos a mi archivo principal de Js y aquí voy a empatar. El, como de costumbre, necesitamos crear una variable y nuestro nombre de variable es target. Objetivo igual a document, dot, get element by ID. Dentro de los latones redondos y dentro del doble curso, voy a pasar un valor Tenemos que pasar el nombre de identificación, que es pasado. El cyc a esta línea. A continuación, voy a encontrar el atributo class en este elemento target. Aquí, voy a crear otra variable ahí, ahí y nuestro nombre de variable está bien. Igual a o Vim objetivo ahora voy a usar el método tiene atributo tiene atributo Luego dentro de las prensas redondas, dentro del código doble, necesitamos pasar el nombre del atributo y nuestro nombre de atributo es class. Dentro de los códigos dobles, voy a escribir class y semicalOn esta línea Ya sabemos que no hay clase disponible en este elemento. Imprimamos este valor en la consola. Voy a teclear consola. El registro de puntos dentro de las prensas redondas son variables m, encontrar. Después semigun dos en esta línea. Después de paso este archivo, si te muestro mi consola, y puedes ver que es formularios escritos porque no hay ningún atributo de clase en este elemento, solo tenemos un identificador de atributo. Ahora voy a pasar el atributo domar en este elemento. Clase de hemotipo dentro de los códigos dobles, y nuestro nombre de clase es XYZ Y voy a poner este archivo. Ahora puedes ver mi Consola, está escrito Verdadero. Espero que ahora te quede claro, ¿ cómo podemos usar el atributo hash? Ahora, hablemos de nuestro siguiente método, que es tiene nodos hijos. Como pueden ver, hay un profundo y quiero comprobar que no hay elemento hijo en esta profundidad o no. Supongamos que paso un texto sencillo en esta profundidad. En ese caso tiene métodos de nodo hijo retornar a través de otras formas. Si algún tipo de child disponible en este Dev en ese caso, va a devolver true. Vamos a saltar al código de Visual Studio y veamos cómo podemos usarlo. Como puede ver en esta profundidad, ya tenemos dos elementos hijo, encabezamiento y un párrafo. Ahora voy a usar tiene métodos de nodo hijo. Así que hazlo a esta línea y comente anterior y voy a escribir target dot, tiene nodos hijo. Aquí necesitamos usar los tirantes redondos. Dentro de los vestidos redondos, no necesitamos pasar ningún parámetro. Si configuro este archivo, ahora puedes ver que está escrito true porque tenemos elementos hijos en esta profundidad. Espero que ahora te quede claro cómo podemos usar los métodos, el atributo hash y tiene hijo ahora. Gracias por ver este video, Estén atentos a nuestro próximo tutorial. 23. Tutorial de JavaScript isEqualNode: Hola chicos, me alegro de verles de vuelta. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado JavaScript Dom. Y en este tutorial, vamos a aprender un nuevo método, que es JavaScript igual a u. aquí puedes ver una lista, Lista A, y tenemos algún nombre de pie en esta lista, plátano agarra naranja manzana Con eso, tenemos otra lista, Lista V. Además, tenemos algunos nombres de pies plátano, guayaba y piña Si nota, puede ver, tenemos un nombre de pie coincidente en la Lista A y la Lista B, banana Y ahora quiero comparar Lista A primer nodo con sV primer nodo, banana y banana. Quiere comparar ambos elementos de la lista. Para eso, tenemos un método llamado cargas iguales, y está escrito solo dos valores, true, ya sea fals. Siempre es valor Bollan. Si comparas tanto el ítem de la lista, como puedes ver, estos son idénticos, va a devolver true. Pero este método sigue algunos parámetros. Sabemos que ambos elementos de la lista están bajo ítem de lista. Por eso va a volver verdad. Entonces se corresponde con un parámetro. El primer criterio es el tipo de nodo. Si su tipo de nodo es el mismo, en ese caso, va a devolver true. El mismo criterio es el nombre de modo. Quiero decir que si el primero es un ítem de lista, también sería un ítem de lista. De lo contrario, va a devolver falso. Y el segundo criterio es que su nombre de nodo debe ser el mismo. No podemos comparar elemento de lista con párrafo, lo contrario, cualquier etiqueta de encabezado, y el tercer criterio es el modo V. Si comparamos plátano con guayaba, en ese caso, va a devolver falso Necesitamos comparar el plátano con el plátano. Entonces esta función regresa a la tripulación. El siguiente criterio es que su nodo hijo debe ser el mismo. Si usamos alguna etiqueta de párrafo como hijo en la lista A, entonces deberíamos usar la misma etiqueta de párrafo en los elementos de la lista B. De lo contrario, va a devolver falso. Además, necesitan seguir el mismo atributo. Si esta lista lo asigno con una clase, también Listar B elemento asignado con una clase. También su valor de atributo debe ser el mismo. Si usamos la clase XYZ, también, necesitamos usar la misma clase XYZ. Estos son los criterios básicos que debemos seguir en este método Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor Live, y ya creo un documento TML llamado index dot html También con eso adjuntamos un archivo Javascript main dot js. Como pueden ver en mi etiqueta corporal, tenemos un total de dos oddn oriente En nuestro primero último, asignamos un ID, Listar uno. En nuestro segundo último, asignamos la Lista dos. Al principio, voy a comparar Listun primer nodo con el modo ListVF, y luego voy a comparar la lista un primer nodo con el segundo nodo de la Lista B. Así que al principio, voy a apuntar a este Para eso, necesitamos usar este ID. Así que volvamos al archivo Mind js. Y aquí voy a crear una variable y nuestro nombre de variable es target one. Objetivo uno, objetivo uno igual a Dumain dot gate Elman por ID En cambio las prensas redondas, tenemos que pasar el nombre de identificación. En nuestra lista de primer orden, tenemos la lista de identificación uno. Entonces copio el nombre de identificación y lo voy a pegar aquí. Y ahora necesitamos seleccionar este nodo, primer nodo, naranja. Para eso, necesitamos usar un método, que es el primer hijo, el primero 11 hijo. Entonces vamos a terminar esta línea. Ahora quiero comparar naranja con GaA. Voy a duplicar esta línea y voy a cambiar el nombre de la variable, objetivo dos. Aquí también, voy a cambiar el nombre de identificación lista dos. Entonces voy a comparar el último primer elemento con al menos dos primeros elementos. Ahora voy a comparar tanto las cargas con E igual método. Para eso, voy a crear otra variable igual. Igual a apuntar un punto nuestro métodom es igual, es igual. En cambio las prensas redondas, necesitamos pasar la segunda variable y nuestro nombre de segunda variable es target two, target two. El semicono dos en esta diapositiva. Ahora voy a imprimir igual variable en nuestra consola. Voy a teclear consola, log punto dentro de las prensas redondas son variables m iguales y emgro para terminar esta línea Como puedes ver en mi consola, está escrito cae. Si nota, puede ver que coincide con todos los criterios, pero no coincide con el valor del nodo. Nuestro primer valor es el naranja y nuestro segundo valor es la guayaba. Por eso este método escrito formas. Ahora voy a comparar este nodo con el segundo nodo, naranja y naranja. Para eso, la heroína necesita usar otro nombre de método que es niños Los niños dentro de los pases cuadrados, necesitamos pasar el número de índice, como puedes ver, el número de índice es uno porque nuestro índice empieza con cero. Yo configuro este archivo, ahora puedes ver mi consola, está escrito verdadero. Y ahora voy a agregar atribuir esto a un ítem. Vamos a llegar al índice o archivo de estimación, y aquí voy a agregar una clase. Clase por ahora, la voy a dejar atrás. Después de configurar este archivo, puedes ver mi consola, devuelve formularios. Pero si notas puedes ver que su valor es el mismo, su palabra es la misma, pero su atributo es diferente. Aquí utilizamos la clase de nombre de atributo. Pero si paso el mismo nombre de atributo en la lista dos, déjame mostrarte su clase tipo, clase vacía y establecer este archivo, ahora puedes ver que está escrito true. Pero si utilizo un nombre de clase diferente, ¿entonces qué? Aquí voy a usar X, Y, y Z, segunda clase, voy a usar ABC. Si configuro este archivo, ahora se puede ver, de nuevo, devuelve formularios porque su nombre de clase es diferente. Pero si uso el mismo nombre de clase ABC y ABC y esto de este suelo, se puede ver escrito y verdadero Este es el uso de la función es igual t. Gracias por ver este video. Estén atentos para nuestro próximo estudio. 24. Tutorial de eventos de formularios de JavaScript: Y hola chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con Java Script, y en este tutorial, vamos a aprender Java Script de vine. En nuestros tutoriales anteriores, ya aprendemos sobre algunos eventos básicos como click, double click, click derecho, mouseover, etcétera. Pero en este tutorial, vamos a aprender algunos básicos de los eventos. Estos son todos básicos a partir de eventos que vamos a aprender en estos tutoriales. Primero, tenemos algunos eventos de pulsación teclas como tecla abajo, pulsación de teclas, keyup, desenfoque de enfoque, y luego tenemos algunos eventos seleccionados Ya aprendemos sobre eventos de key down, keypress y keyup en nuestros tutoriales anteriores Vamos a iniciar este tutorial con evento de enfoque y desenfoque. Entonces como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión del servidor b y ya creo un documento TML llamado index dot ATM Como puedes ver en mi página de estimación, tenemos un ETMLF y tenemos dos campos de texto y un campo de opción Como puedes ver, antes del primer campo de texto, usamos etiqueta de nombre y luego usamos etiqueta de clase y nuestro segundo campo de texto. Y luego muestra algunas opciones de nombre de país como India, Pakistán, Nepal, EEUU, Japón. Y puedes ver la estructura del estimus en mi página. Tenemos desde etiqueta, etiqueta, etiqueta de entrada, seleccionar opciones, etcétera Como te dije, vamos a comenzar nuestro evento práctico con enfoque. Ahora la pregunta es, ¿qué es el foco? Siempre que hago clic en este campo de entrada de nombre, como pueden ver, ahora resaltaba el campo de entrada con borde negro. la misma manera, si hago clic en el campo de entrada de clase, ahora resaltó este campo de entrada de clase. También, si hago clic en estas opciones, ahora se puede ver, también resaltó esta sección. A esto se le llama foco. Esta es la característica incorporada del navegador, pero podemos personalizarla usando el evento de enfoque Al principio, voy a asignar un ID a este primer campo de entrada. Aquí voy a escribir ID igual a if name. FNM significa nombre de pila. Después dentro de esta etiqueta script. Con eso, también, voy a agregar un evento, que está en foco, tipo similar en foco. Entonces aquí necesitamos proporcionar un nombre de función y nuestro nombre de función es función de enfoque. Entonces voy a crear esta función dentro de esta etiqueta script. Así que escriba función para función, y nuestro nombre de función es función de enfoque, si copia este nombre de función. Entonces necesitamos apuntar a este campo de entrada usando su ID, que es Anime. Aquí escriba documento punto, obtenga elemento por ID dentro de los vestidos redondos, luego dentro de los Cles Dentro de las rotondas solo para proporcionar el nombre de identificación, que es If Name Entonces quiero aplicar un color de fondo cada vez que enfoque este campo de entrada. Quiero usar estilo punto, punto, y quiero aplicar color de fondo, igual al rojo. Quiero aplicar color de fondo rojo. Después semicon dos en esta línea. Ahora, fijemos el archivo y hagamos clic en este campo de entrada. Da click en este campo de entrada, como puedes ver, ahora nuestro color de fondo del campo de entrada es rojo. Pero si hago clic en otro campo de entrada, no va a querer porque apuntamos a este campo de entrada en particular usando su ID. Ahora quiero aplicar el mismo evento en nuestro segundo campo de entrada. Para eso, voy a copiar esta sección sobre evento de enfoque y pegarlo el segundo campo de entrada. Pero no voy a asignar ningún ID a este campo de entrada. Voy a dejarlo en blanco. Ahora podrías tener cociente cómo podemos seleccionar el segundo campo de entrada sin el ID Déjame mostrarte. Para eso, voy a usar esta palabra clave en nuestra función. Cuando llamo a nuestra función dentro del vestido redondo, voy a pasar esta palabra clave, esta. Además, voy a pasar esta palabra clave en nuestro segundo feed de entrada, esto. Usando esta palabra clave, podemos aplicar esta función en particular en este feed de entrada en particular siempre que nos enfoquemos en ella, y para manejarla, necesitamos tomar una variable en nuestra función. Dentro de los vestidos redondos, vamos a tomar un nombre variable y nuestra variable n es elemento. Elemento, entonces voy a reemplazar esta sección con este elemento variable. Eso es Ahora, vamos a sub el archivo y recarguemos el navegador. Esta vez, voy a hacer clic en nuestro segundo campo de entrada. Ahora puedes ver que es trabajo en nuestro segundo campo de entrada. Aplica el evento de enfoque y cambia el color de fondo. De igual manera, si hago clic en el campo de entrada de nombre, también se cambió el color de fondo del campo de entrada de nombre, y si quiero aplicar el mismo evento en nuestra sección de país, sí podemos. Justo para copiar esta función en el evento de enfoque y necesitamos pegarla después de esta identificación en nuestro tanque selecto. Si configuro este archivo y hago clic en esta opción de país, ahora puedes ver esta vez aplica el color de fondo en nuestra opción desplegable. Así es como funciona. Básicamente, podemos usar eventos de enfoque en nuestras opciones de campos de entrada y tanques de anclaje. Ahora tenemos un problema. Después de enfocar nuestro campo de entrada. Si elimino nuestro cursor y hago clic en otra sección, ahora se puede ver que sigue mostrando el color de fondo rojo. Ahora necesitamos eliminar este color de enfoque. Entonces, ¿cómo podemos hacerlo? Para ello, necesitamos usar blurve Para eso, de la misma manera, necesitamos usar este evento hasta en la función de enfoque. Aquí voy a escribir el nombre del evento en blur. También en en el código doble, necesitamos pasar un nombre de función. Voy a copiar este nombre de función Función de enfoque, y voy a cambiar el nombre de la función enfoque con la función de desenfoque, Darcy voy a hacer lo mismo para el siguiente campo de entrada Voy a copiar esta sección y pegarla en el evento de enfoque. También en nuestra opción selecta. Entonces voy a duplicar esta función y voy a cambiar el nombre de la función. Enfoque dos desenfoque. Voy a quitar el nombre del color y dejarlo en blanco, y voy a configurar este archivo. Ahora primero, voy a enfocar el campo de entrada de nombre. Como puedes ver, el color de fondo se vuelve rojo. Pero siempre que me concentro en este campo de entrada de clase, ahora puedes verlo quitar el color de fondo rojo de nuestro primer campo de entrada. Así es como funciona. Ahora entiendes cómo funcionan juntos los eventos de enfoque y blurr Aquí puedes usar add event listener también si no quieres escribir tanto de código En nuestro tutorial anterior, ya lo aprendemos. Ahora, hablemos de otro evento que está en. Este evento se aplica cuando intentamos llenar el campo de entrada. Básicamente, utilizamos este evento con campo de entrada y área de texto. No trabajo en caja de CD y botones de radio. Empecemos la práctica y veamos cómo podemos usar. Así que llamemos al evento en nuestra primera sección de entrada, y nuestro nombre del evento está en la entrada. Dentro de los códigos dobles, necesitamos pasar una función y nuestro nombre de función es función de entrada. Después dentro de los rounders. También voy a usar esta palabra clave. Ahora voy a duplicar esta sección y reemplazar la función con función de entrada. Siempre que intento llenar este campo de entrada, quiero el color de fondo amarillo, así que voy a pasar amarillo. Voy a establecer este archivo. Hasta configurar este archivo, primero, voy a dar click en el campo de entrada de nombre, y voy a pasar algún texto un nombre y el nombre es AddOne Como puede ver, cuando escribimos algún texto en este campo, cambió el color de fondo rojo a amarillo. Este es el uso en el evento de entrada. Esto es para este tutorial. En el siguiente tutorial, voy a cubrir los eventos restantes. Así que gracias por ver este video. Estén atentos para nuestro próximo 25. Tutorial de eventos de formularios de JavaScript parte 2: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con Java Strep de eventos En nuestro tutorial anterior, cubrimos el desenfoque de enfoque y el evento de entrada. En este tutorial, vamos a cubrir cambio, seleccionar, enviar inválido incluso. Empecemos el evento práctico con cambio. Como pueden ver, lado a lado, abro mi editor de código is studio y mi navegador usando extensión de servidor if y abro mi documento HTML anterior nombre índice punto HTML. Como puede ver, tenemos un total dos nombres de campo de entrada y clase. Con eso, tenemos una casilla de opción, nombre país, y aquí proporciona algún país. Y vamos a comenzar nuestra práctica con el evento de cambio. Déjame mostrarte cómo. Básicamente, se puede utilizar en el evento de cambio en el texto de entrada también cuadro de selección. Además, se puede utilizar en un área de texto. Al principio, voy a usar el evento onchange en nuestra casilla de selección Después de la función onblur, voy a llamar a este evento on change En cambio y nuestro nombre de función es cambiar función. Cambiar función. Ahora, también, necesitamos definir esta función en nuestra etiqueta script. Voy a copiar el nombre de la función, y voy a duplicar una de estas funciones sección y reemplazar esta función con función de cambio. Eso es. Como voy a cambiar el color de fondo, que es azul. Y voy a poner este archivo. Ahora podrías haber cuestionado qué función de cambio básicamente va a hacer. Este método funciona cuando perdemos el enfoque del campo de entrada. Primero, necesitamos construir el foco en el campo de entrada. Entonces cada vez que quitamos nuestros autos, de lo contrario, quitamos nuestro enfoque, luego cambiamos la función llamada, déjame mostrarte cómo. Ahora, como puede ver, en nuestro cuadro de selección, utilizamos la función onchange Además, voy a asignar un ID a nuestra casilla de selección, y nuestro nombre de identificación es select. Entonces dentro de la etiqueta script, necesitamos apuntar a esta casilla de selección usando su D. Aquí, voy a eliminar elemento y reemplazar con documento. El elemento get por ID es que la ronda presiona para proporcionar el nombre de ID que es select, eso es todo. Después de configurar este archivo, voy a dar click en esta casilla de selección. Ahora puedes ver, por ahora llama a nuestra función de enfoque. Pero si selecciono algún país, supongamos que voy a seleccionar USA. Después de hacer clic en USA, como pueden ver, se cambia el color de fondo. Ahora se ha convertido en color azul porque esta vez va a llamar a función de cambio, y es posible comprar solo para este evento en cambio. Entonces este es el uso de on change. Cuando pierdo el foco, de lo contrario, quita el foco, entonces se activa en el evento de cambio. Entonces este es el uso de on change. Y recuerde, esto en el método de cambio funciona en cualquier campo de entrada. Podemos usarlo con caja de entrada, studia de texto, etcétera. Ahora, hablemos de otro evento que es selecto. Esto en el evento selecto funciona después de seleccionar el valor del campo de entrada. Supongamos que en nuestro campo de nombre, voy a escribir en nombre adver Básicamente, se va a activar cuando seleccione este valor. Llamemos a este evento en nuestro cuadro de entrada de nombre. Entrada Subtero, voy a escribir al seleccionar. Entonces voy a escribir un nombre de función que es seleccionar función. Ahora necesitamos definir esta función dentro de esta etiqueta de script. Dentro de la etiqueta script, voy a duplicar esta sección. Entonces voy a reemplazar la función de cambio de nombre de función para seleccionar función. Con eso, necesitamos apuntar al elemento input usando su ID. Como puedes ver, el id nav es si nombre. FNM significa primer nombre. Aquí voy a reemplazar seleccionar a ello si se nombra. Entonces voy a cambiar el color de fondo. Voy a decir color de fondo. Rosa. Hasta escalonar este archivo. Ahora, voy a llenar un nombre en nuestro campo de nombre, que es Raúl Pero si selecciono este nombre diez usando mi cursor, ahora puedes ver ahora puedes ver nuestro color de fondo de entrada cambiar a color rosa porque esta vez se activa en la función de selección. Entonces este es nuestro uso humectante en la función de selección. Ahora hablemos de lo siguiente de Evet que es someter. Básicamente, usamos este evento de etiqueta. Podemos activar este evento en tercer lugar, llenar el de y pulsar el botón de enviar. Entonces vayamos al código de Visual Studio y veamos cómo funciona. Entonces como puedes ver en mi navegador, tenemos un básico de, pero no tenemos ningún botón de enviar. Así que vamos a crear un botón de envío. Luego dentro de la etiqueta from, y debajo de esta etiqueta izquierda, voy a tomar una entrada de etiqueta de entrada. Entrada, escriba enviar. Y voy a poner este archivo. Después de configurar este archivo, se puede ver, ahora tenemos un botón de enviar, y ahora quiero activar al enviar evento, un clic en el botón de enviar. Y como te dije, tenemos que llamar a este evento dentro de la etiqueta frontal. Como puedes ver, esta es la posición inicial de Frontag. Después dentro de la etiqueta frontal, voy a llamar a este evento al enviar. Y dentro de los códigos dobles, voy a pasar el nombre de la etiqueta de envío. Y dentro de los códigos dobles, necesitamos pasar el nombre de la función, y nuestro nombre de función es submit function. Ahora necesitamos definir esta función dentro de la etiqueta script, así que voy a copiar el nombre de la función. Al principio, voy a duplicar esta sección. Entonces voy a reemplazar el nombre de la función. Seleccionar función con enviar desde la función. A continuación, voy a eliminar todos los arranques innecesarios. Aquí voy a escribir consola punto, g, dentro de las prensas redondas dentro del doble código, enviaste una de. Y Semgram dos en esta línea. Y voy a poner este archivo. Después de configurar este archivo, voy a abrir el panel de la consola en nuestro navegador. Inspeccionar, Consola. Y si presiono el botón enviar, puedes ver que no funciona bastante bien porque en nuestra etiqueta de acción, necesitamos pasar una ruta PHP, otra ruta de wise.net, pero no la tengo Entonces voy a imprimir el mensaje en mis bombas de alerta. Voy a reemplazar el registro de puntos de consola con Alert bobs. Alerta. Y voy a poner este archivo. Después configuré este archivo, si hago clic en el botón Enviar, ahora puedes ver en mi cuadro de alerta, regresa, enviaste un desde. Entonces esto está en método de envío terminado. Ahora podrías tener duda, ¿cuál es el uso de la misma? Podemos extraer valor de estos campos de entrada. Supongamos que quiero extraer nombre de estos campos de entrada cuando presente la f. para eso, primero, voy a comentar esta línea porque estoy viendo vari ahí y nuestro nombre de variable es X, X igual a document Punto obtener elemento por ID. Está en las rotondas. Son los códigos dobles. Tenemos que pasar el nombre de identificación, que es un nombre. Entonces quiero extraer el varu de este campo de entrada. Entonces escribe punto Val. Entonces vamos a terminar esta línea. Y ahora voy a imprimir el nombre en nuestra caja de Alertas. Entonces escribe Alert. En la rotonda los códigos hacia abajo primero tipo hola. Hola, entonces necesitamos usar concatenación sol y quiero concatenar con Semisuelo en esta línea. Si configuro este archivo, Él pasa un nombre agregar uno. Entonces voy a presionar el botón de enviar. Después de pulsar el botón enviar, como se puede ver en mi cuadro de alerta, se imprime Hola anuncio uno. Así es como podemos extraer datos usando el método de envío. Podemos almacenar el valor y usar este valor en cualquier lugar. Solo debes recordar que necesitamos usar en enviar evento con de etiqueta. No podemos usar este evento dentro de ninguna otra etiqueta de entrada, de lo contrario, cualquier etiqueta de selección, y podemos activar este evento solo usando el botón de enviar. Después de presionar este botón de enviar, va a desencadenar el evento. Ahora hablemos de nuestro último evento que no es válido. Usamos este evento cuando el usuario ingresa un valor incorrecto. Supongamos que en nuestra rana, tenemos un campo de entrada, que va a tomar números de teléfono. Pero sin números de teléfono, alguien escribe alguna letra mayúscula, lo contrario, cualquier carácter. En ese caso, la función no válida activó y escribió un mensaje de error. Ahora veamos cómo podemos usarlo prácticamente. Como puede ver, tenemos que decir dos campos de entrada y un campo de selección. Si no llenamos esta rana y presionamos el botón enviar, ahora puedes ver que es w. No muestra ningún mensaje de error, pero quiero que este campo de entrada de nombre siempre esté alimentado. Para ello, necesitamos usar atributo, un atributo estable que se llama required. Aquí, dentro de esta etiqueta de entrada, se requiere tipo Imo. Entonces quiero configurar este archivo. Ahora es necesario llenar este nombre. Ahora déjame mostrarte cómo es el trabajo. Entonces para configurar este archivo, si hago clic en el botón Enviar, como pueden ver, ahora es mostrar un mensaje. Esto rellena este campo. Esta es la característica no válida de un archivo estable. Ahora el problema es que no quiero mostrar este mensaje. Quiero mostrar un mensaje personalizado. Y para mostrar este mensaje personalizado podemos usar en inválido y para mostrar el mensaje personalizado podemos usar para ver esto y para mostrar el mensaje personalizado que podemos usar en evento no válido. Solo para escribir el nombre del evento en inválido. Después dentro del doble curso, Harry escribe directamente cualquier código Java Sweep. Quiero imprimir una alerta de bombas. Alerta, dentro de los vestidos redondos, dentro de este solo curso porque ya usamos doble curso. Por eso necesitamos usar códigos únicos. Quiero escribir un mensaje personalizado y el mensaje es por favor falle el campo de nombre. Por favor, llene el nombre. Y voy a poner este archivo. Y ahora voy a enviar este diente sin llenar el campo de nombre Primero, voy a escribir algún Davitt en nuestra sección de clases Después voy a seleccionar un país Nepal y voy a presionar el botón Enviar. Pero si te das cuenta puedes ver que nuestro campo de nombre está en blanco. Entonces después de presionar el botón Submin, ahora puedes ver mi caja de alerta con impresión, por favor rellena el nombre Básicamente, lo usamos con correo electrónico y números de teléfono. Déjame mostrarte cómo. Entonces al principio, voy a cambiar la etiqueta ape, nombre a correo electrónico. Y también, voy a cambiar el tipo de entrada, que es el correo electrónico. Entonces voy a eliminar este campo requerido. Y también, voy a cambiar el mensaje de alerta. Entrar, corregir el correo electrónico, algunos reemplazan con ingresados Correcto. Correo electrónico. Y voy a poner este archivo. Entonces, si escribo la dirección de correo electrónico incorrecta y trato de enviar este formulario, ahora puedes verlo devolver este mensaje. Ingresa el correo electrónico correcto, y además conserva un mensaje predeterminado de es Tamil. Por favor, rutear e iterar en esta dirección de correo electrónico. Así que todos estos son muy importantes a partir de los eventos que aprendemos en este tutorial. Entonces esto es para este tutorial. Gracias por ver este video Horario para el siguiente tutorial. 26. Tutorial de JavaScript setInterval y clearInterval: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con el script Java. Y en este tutorial, vamos a aprender script Java, establecer intervalo, e intervalo de pares. Estos dos métodos se utilizan en animaciones JavaScript. Supongamos que si se quiere animar algún elemento, lo contrario, cualquier elemento dom, en ese caso, este método es muy útil, que se establece interval Para escribir este método, sueltas los dos parámetros, un nombre de función y una hora, y necesitas poner tiempo en segundo lugar. Este segundo parámetro funciona como temporizador. 1,000 milisegundos igual a 1 segundo. Ahora hablemos de la función, cómo va a funcionar esta función con este segundo parámetro. Si paso 1 segundo, quiero decir si paso 1,000 milisegundos, luego después de 1 segundo, luego después de 1 segundo, cada vez que va a llamar a esta función y lo que sea que hagamos en esta función, la va a ejecutar Básicamente, quiero volver a decir, cada vez que va a llamar a esta función. Si quieres llamarlo tres segundos, entonces necesitas pasar tres segundos. Si quieres detener esta animación en un momento determinado, en ese caso, tenemos otro método, que es el intervalo de pares. Usando este método, puedes detener la animación en cualquier momento. Entonces, sin perder el tiempo, intentemos entender este concepto prácticamente. Como pueden ver, lado a lado, abrí mi editor de código de Visual Studio y mi hermano usando Lifesaver Extension, y ya creé un documento de tabla llamado index Zoot table con eso creo otro archivo, un archivo JavaScript, que es animación Por ahora, nuestro archivo de animación está en blanco. Ahora si vuelvo al archivo índice, aquí se puede ver, aquí creamos un elemento profundo. Básicamente, ella crea una caja cuadrada, altura, 150 píxeles y ancho, también 150 píxeles, y establecí una gama de colores de fondo, y ahora quiero animar esta caja cuadrada Quiero mover el cuadro cuadrado del lado derecho hacia arriba cada una vez más y para animar este elemento cuadrado, necesitamos saltar a este archivo Js animación punto js Establecer primero, voy a llamar a nuestras matemáticas, que se establece intervalo. Establecer intervalo es la prensa redonda es la primera forma de pasar nuestro nombre de función, y voy a establecer este nombre de función Annie. Con eso, quiero fijarlo t 1,000 milisegundos, que es igual a 1 segundo Además, debes proporcionar el punto y coma, y luego necesitamos definir esta función de anime Vamos a crear la función. Primero, voy a escribir function Keyword y nuestro nombre de función es Nin. Por ahora, te voy a mostrar cómo funciona el método set interval. Voy a imprimir algo en mi consola. Así que escriba consola dot log dentro de las prensas redondas. Voy a escribir hola. Antes de configurar este archivo y ejecutar este código, voy a activar mi sección Consoe Inspeccionar consola Si configuro este archivo, como pueden ver en mi sección de consola, se imprime hola, uno, dos, tres, está contando continuamente e imprime hola en mi conson Así es como se establece la función individual sobre. Por ahora, no necesito este registro de puntos de consola. Quiero comentar esto y volver a configurar este archivo. Ahora voy a declarar una variable fuera la función y nuestra variable es que una A asigne con Z, Semicron dos en esta diapositiva Después inserte esta función, voy a incrementar una variable con diez Sonido tipo A igual a A más diez. Básicamente establecer intervalo continuamente llamado función Nim después de 1 segundo Y cada vez que llame a la función, va a incrementar el valor A con diez Entonces la primera vez va a imprimir diez, luego va a imprimir 20, 30, 40, y sigue adelante. Y ahora necesitamos apuntar a este elemento cuadrado usando su ID. Tipo de sumo donde objetivo igual a Dum Document, obtener eleind por ID Después dentro de la resis redonda, volvamos al archivo de índice y veamos el nombre de identificación, y el nombre de identificación es gusto. Copia el nombre de identificación y vuelve al archivo JS. Y dentro de los códigos dobles, voy a pasar el nombre de identificación, Ts y semig para estañar esta línea Y ahora necesitamos mover este elemento usando CSS. Primero, voy a seleccionar nuestro objetivo objetivo estilo punto punto, y quiero moverlo del lado derecho. Voy a agregar algo de margen en el lado del labio. Escriba margen, lap igual a nuestra variable A y semigal en esta línea Cada segundo, va a aumentar el margen en diez. Básicamente, va a mover nuestro lado derecho cuadrado. Pero si configuro este archivo, no va a funcionar. Puede que tengas duda, ¿cuál es el problema? Porque no proporcionamos ninguna unidad a la propiedad de labio de margen. Voy a usar concatenación sine e inst el single ate, voy a pasar pixel Voy a usar unidad de píxeles. Si configuro este archivo, como pueden ver, después de cada 1 segundo, va a mover diez píxeles del lado derecho, y se mueve continuamente del lado derecho, superior 1 segundo Entonces así es como podemos animar esta caja cuadrada. Por ahora, voy a comentar esta línea y volver a configurar este archivo para detener la animación. Y si quieres aumentar la velocidad de animación, entonces necesitas disminuir el valor de misegundos Supongamos que si pasas 200 milisegundos y descombres esta línea y vuelves a configurar este archivo, ahora puedes ver la Aumenta nuestra velocidad de animación. Entonces voy a comentar esta línea y volver a establecer este archivo. Por ahora, me gustaría ir con 1 segundo. Voy a escribir mil milisegundos. Pero ahora quiero detener nuestra animación. Cuando nuestra caja lograr margen de labio de 200 píxeles. Básicamente, quiero decir, cuando un valor se convierte en 200, quiero detener la animación. Para eso, necesitamos usar el método por intervalo. Déjame mostrarte. Pero antes necesitamos usar condición p, si A valor igual a igual a 200, entonces dentro de la condición, voy a hacer algo. Yo uso sis cuadrada. Además, voy a crear escaso. Dentro de la resis cuadrada, dentro de la sp, voy a animar esta sección Copo este y voy a tejerlo dentro de la condición else, y también descomento esta línea Luego dentro de la condición IP, ahora necesitamos detener esta animación usando el intervalo de pares. Pero para eso, necesitamos convertir el intervalo establecido en intervalo de pares. Así que voy a almacenar este intervalo establecido en una variable. Entonces hero type where y nuestro nombre de variable es, puedes tomar cualquier nombre. Por ahora, voy a llevar identificación. Y ahora tenemos que llamar método intergral claro. Estamos intervalo y en la ronda res o para pasar este valor establecido intervalo. Voy a pasar I. Y entonces vamos a esta línea. Antes de configurar este archivo, voy a aumentar la velocidad de animación. Voy a pasar 100 megain quiero establecer este archivo. Después de configurar este archivo, como puede ver, hasta llegar, margen de 200 píxeles en el lado izquierdo, detendrá nuestra caja. Básicamente, animamos esta caja, 200 píxeles en el lado derecho Alcance ascendente, margen de 200 píxeles en el lado izquierdo, nuestro intervalo de coche, detener este intervalo establecido. Aquí puedes animar cualquier propiedad CSS de esta caja. Si quieres cambiar el color, si quieres extender el ancho, sí, puedes. Déjame mostrarte cómo. Así que vamos a animar la w. Así que voy a configurar esta sección y comentar la línea anterior Y voy a cambiar el estilo target, Él para agregar W. quiero cambiar la propiedad width. Con y quiero aumentarlo hasta 200 pixel. Después de alcanzar 200 píxeles de ancho, va a detener la anivación Vamos a establecer el archivo. Como puedes ver, después de alcanzar 200 píxeles de ancho , detiene nuestra animación. Así es como el intervalo establecido y el intervalo claro funcionan juntos. Básicamente, lo usamos con fines de animación. Gracias por ver este video, estén atentos para el siguiente tutorial. 27. Tutorial de tiempo de espera y tiempo de espera: Hola. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con el script Java. Y en este tutorial, vamos a aprender sobre dos métodos, establecer el tiempo de espera y el tiempo de espera de rotura. Usando esta función, podemos especificar el tiempo de animación. Y este método va a tomar un total de dos parámetros, nombre de función y milisegundos Este segundo valor vuelve a funcionar como temporizador, y es necesario proporcionar como valor, 1,000 milisegundos significa 1 segundo Básicamente, si pasamos 1 segundo aquí, luego después de 1 segundo, va a llamar a esta función. Y va a ejecutar esta función sólo por una vez. Es decir, va a realizar la animación una sola vez. En nuestro tutorial anterior, aprendemos sobre el intervalo establecido. Usando la función set interval, podemos ejecutar la animación una y otra vez. Pero si utilizo este método, podemos ejecutar esta animación solo por una vez. Y si quieres detener esta animación antes de que comience, entonces necesitas usar este método, un tiempo de espera. Entonces comencemos la práctica y veamos cómo puedes usar esta metanfetamina. Entonces como pueden ver, lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión del servidor de vida, y ya creé TML nombre de documento índice punto TML Con eso, aquí puedes ver, creamos un nombre de archivo animación punto JS. En nuestro diseño básico de TML, creamos una caja con gusto ID. Como pueden ver, aquí decimos 150 píxeles de alto y 150 píxeles de maleza. Y ahora quiero extender el ancho hasta cierto tiempo. Para ello, vamos a utilizar el método set timeout. Quiero extender el ancho hasta 500 píxeles. Así que vamos a saltar al archivo de animación dot js. Al principio, voy a degla variable, nos identificamos. ID igual al tiempo de espera establecido. Y como saben, este método va a tomar un total de dos parámetros, primera función. Y para la función, voy a tomar N y voy a pasar tres segundos, significa 3,000 milisegundos Ahora voy a definir esta función. Entonces, para escribir función o nombre de función es un. Después dentro de los calibss al principio, voy a imprimir algo en mi consola Voy a escribir, consola, punto, registro dentro de la resis redonda. Dentro de los códigos dobles, voy a escribir hola mundo. Y semig esta línea. Ahora, antes de configurar este archivo y ejecutar este código, abramos nuestra consola. Inspeccionar, Consola. Como pueden ver, estamos en mi sección de consola. Entonces si configuro este archivo, como pueden ver, hasta tres segundos, va a imprimir hola palabra. Y como pueden ver, imprime esta declaración sólo por una vez. No me repito. Y ahora quiero extender el debi hasta tres segundos. Entonces al principio voy a comentar esta línea. No necesito esta declaración de consola. Entonces voy a apuntar a la prueba D. Para eso, voy a declarar una variable, donde, y nuestro nombre de variable es target. Objetivo igual al punto del documento, Elemento Gt por ID dentro de las prensas redondas y dentro de los códigos dopo, voy a pasar el valor, que es sabor Después semicon a en esta línea. Entonces quiero aumentar el ancho usando style dot con Mathod S type target, dot, style dot weight igual a Quiero aumentarlo hasta 500 pixel, 500 pixel y Semgrat en Ahora bien, si configuro este archivo, como pueden ver, hasta 3 segundos después, va a aumentar el de este elemento DB. Básicamente, si usamos el método set timeout, va a ejecutar nuestra animación solo por una vez Ahora quiero detener esta animación antes de que empiece. Quiero detenerlo antes de los tres segundos. Para eso, necesitamos usar el método Dear timeout. Para eso, tenemos que volver al documento TML, y aquí necesitamos tomar un botón Entonces aquí voy a tomar un botón de etiqueta de botón. Dentro de este botón, voy a escribir stop animation. Además, voy a usar un nombre de atributo en el método griego en P. Y en este evento, voy a llamar a una función, que es detener la animación. Voy a usar este shortend es animación. Y voy a copiar el nombre de la función. Y ahora voy a definir esta función en la página JavaScript. Aquí voy a escribir función, y nuestra función M es animación. Entonces dentro del Clrass cuando llame a esta función, va a borrar el tiempo de espera a Entonces voy a llamar a esta función PR timeout dentro de la ronda res es, tenemos que pasar la I. Y semicorn dos en esta línea Es decir, sea cual sea el tiempo que fijemos, va a despejar el tiempo. Por ahora, voy a aumentar el tiempo. Voy a hacerlo de 5 mil maneras otra vez. Y ahora voy a configurar este archivo. Después de que paso este archivo, como pueden ver, tenemos un botón de parada debajo de la caja y después de 5 segundos, va a ejecutar la animación. Ahora voy a volver a configurar este archivo. De lo contrario, vuelva a cargar este archivo. Esta vez, voy a detener la animación. Entonces voy a hacer clic en este botón de animación. Estoy esperando cinco segundos y adecuac después de 5 segundos, no ejecute nuestra animación Antes de los cinco segundos, detengo este botón. Es así como podemos usar ambos métodos juntos, establecer el tiempo de espera y el tiempo de espera claro. Gracias por ver este video. Estatua para el siguiente tutorial. 28. Tutorial de introducción de JavaScript BOM: Hola, amigos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial. Y en este tutorial, voy a presentar lo que es la bomba JavaScript. El significado completo de boom es el modelo de objetos del navegador. Aquí estoy hablando de la ventana del navegador. Boom está relacionado con la ventana del navegador. Puede ser cualquier navegador, Firefox, Google Chrome, Microsoft Age, Apple Safari, de lo contrario, Opera. Sin estos, hay muchos navegadores y aquí no mencioné su nombre. Estos son los navegadores más populares. Boom está especialmente relacionado con la ventana del navegador, no con el área de la ventana No me importa lo que pase dentro y si quieres controlar la parte interna de tu navegador, entonces deberías aprender Dom. En JavaScript, si quieres hacer alguna programación relacionada con el navegador para eso, necesitas usar Window Object. Si quieres manipular tu navegador, hay una gran cantidad de método relacionado con el objeto Window. Veamos qué podemos hacer con Window Object? Usando el objeto Window, podemos obtener mayor ancho de nuestro navegador Usando este objeto, podemos abrir ventana del navegador y también podemos cerrar la ventana del navegador. Además, podemos cambiar el tamaño y mover nuestro navegador win. Aquí no vamos a usar nuestro cursor para cambiar el tamaño de nuestro navegador Tenemos algunos en el método de construcción de objetos Window, y usando esos métodos, podemos cambiar el tamaño y colocar nuestra ventana en cualquier lugar de nuestra pantalla Además, podemos desplazarse por la ventana de nuestro navegador sin usar nuestro rizo. Con eso, usando el objeto Window, podemos obtener el protocolo de nombre de host URL de nuestra ventana del navegador. Además, podemos obtener el historial de la ventana del navegador. Historia significa que aquí se puede ver la opción hacia atrás y hacia adelante. Si quieres retroceder, podemos usar el objeto Window. Además, si quieres seguir adelante, también podemos usar el objeto Window. Así que en nuestras próximas Tutorias vamos a aprender todo al respecto uno por uno Así que no te pierdas los videos interesantes. Gracias por ver este video. Estén atentos. 29. Tutorial del método de altura y ancho de ventanas de JavaScript: Hola, amigos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado JavaScript bong Y en este tutorial, vamos a aprender cómo podemos meternos en altura y ventanas Aquí puede ver la ventana del navegador, y para obtener Winto altura y mojado, tenemos cuatro métodos totales Estos métodos son altura interior, ancho interior, altura exterior, ancho exterior. Ahora, tratemos de entender qué es la altura interior y qué es la altura exterior. Esta es la altura interna, que contiene el área de viewwod y esa es la altura externa Esta es la altura del navegador real. Recuerda una cosa, la altura exterior no cuenta las barras de herramientas Ahora, hablemos de ancho exterior y mié interior. Esta es el área de ancho interior y no cuenta la sección de guerra escolar. la misma manera, tenemos exterior con y es contar la sección de la barra de desplazamiento. Exterior con, contar la zona fronteriza. Dije algo mal. Además, el peso externo no cuenta el área de la barra de desplazamiento. Cuenta la zona fronteriza del trower. Sin perder su valioso tiempo, comencemos la práctica. Como de costumbre, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión salvavidas, y ya creo un documento estiML llamado index dot t. dentro de esta página index dot estiML, tenemos body tag, y dentro de la etiqueta body, ya escribimos script tag ya escribimos Entonces primero, dentro de esta etiqueta script, voy a tomar una variable, y nuestro nombre de variable es altura interna. Para eso, voy a escribir I estatura. Altura interior igual a la altura interior del punto de ventana. Entonces semGrounn esta línea. Ahora quiero imprimir este valor en mi consola. Para eso, voy a escribir console dot log, console dot log. Es la resistencia redonda o nombre de variable, I altura. Después Semgraun a en esta línea. De la misma manera, voy a tomar la altura exterior. Voy a crear otra variable ahí y nuestro nombre de variable es altura exterior. O altura. Altura exterior igual al punto de ventana o altura. Entonces semigo esta línea, y voy a configurar este archivo Entonces otra vez, voy a imprimir esta variable en mi consola. Voy a escribir Consola punto log ins la prensa redonda altura exterior y semicon a esta línea Voy a establecer este archivo. Si te muestro mi consola, entonces déjame mostrarte. Voy a escribir en mi navegador y quiero patear en la sección de velocidad. Herogc en consola, imprime la altura interior 767 y nuestra altura exterior Pero si reduzco la altura de la ventana gráfica, entonces qué. Voy a aumentar la altura de la sección de consola y volver a cargar el navegador. Ahora puedes ver ahora nuestra altura interior es 303, pero nuestra altura exterior sigue siendo la misma. 1047. Como te dije, altura interior siempre cuenta la altura real de la ventana gráfica Pero la altura exterior, cuente toda la altura del navegador. Entonces de este punto a este punto es área de altura interior, y de este punto a este punto es área de altura exterior. Ahora, cambie el área de altura exterior. Voy a radio la altura de todo el navegador y luego recargaré el navegador Ahora puedes ver que nuestra altura exterior es de 854. Como puedes ver, cada vez que necesitamos reprimir el navegador para ver el valor de altura interior y altura exterior Y para resolver esto, voy a llamar al evento de redimensionamiento Voy a llamar al evento en nuestra etiqueta corporal. Aquí voy a escribir en redimensionar. Al cambiar el tamaño y nuestro nombre de función y nuestro nombre de función es cambiar el tamaño Función de cambio de tamaño. Aquí llamo a una función de cambio de tamaño de nombre de función, y ahora necesitamos crear la función Aquí más función de tipo, y nuestro nombre de función es cambiar el tamaño de la función Copo el nombre y lo pego aquí dentro del Calise, voy a mover este código y establecer este archivo Después de configurar este archivo, se puede ver en mi consola, es impresión soso Pero si aumento la altura del navegador, ahora puedes verlo imprimir la altura interior y la altura exterior, el navegador y no necesitamos actualizar nuestro navegador para imprimirlo. Siempre que aumente la altura del navegador, se imprime. Ahora la altura interior es 295 y la altura exterior es 1037. la misma manera, podemos imprimir ancho interior y ancho exterior. Voy a duplicar esta línea y comentar la anterior. Aquí voy a empatar al principio, aquí voy a cambiar la variable n, que es interna con. Ancho interior igual al ancho interior, igual al punto de ventana, W. interior Luego registro de consola, imprimir, interior con. De la misma manera, voy a imprimir exterior con. Así que voy a escribir con ventana punto, salir con, y luego imprimir Consola punto cerrar sesión con. Si configuro este archivo, ahora puedes ver mi consola, está impreso en blanco. Pero si aumento el ancho del navegador, entonces ¿qué pasó? Después de aumentar el ancho del navegador, se puede ver en mi consola, se imprime ancho interior 720, ancho exterior 916. Si aumento un poco el navegador, como pueden ver, imprimiría Ancho interno 823 y el ancho exterior 1045 Es así como podemos obtener la altura interior, la anchura interior, la altura exterior y la anchura exterior. Gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 30. Método de abrir y cerrar ventanas de JavaScript: Nosotros. Me alegro de verles chicos. Una vez más, estoy de vuelta con otro tutorial relacionado con la bomba JavaScript. Y en este tutorial, vamos a aprender JavaScript, abrir ventana y cerrar método de ventana. Aquí puedes ver ventana, y es Ventana A. Ahora quiero abrir otra ventana usando esta ventana. Quiero crear la Ventana B usando una Ventana. Para eso, JavaScript vino con una metanfetamina especial. Que es el método abierto. Para usar el método open, podemos usar botón, de lo contrario, cualquier enlace. Además, puedes usar cualquier imagen en la que se pueda hacer clic. la misma manera, si quieres cerrar la Ventana B usando la Ventana A para eso, necesitamos usar otro método especial, que es el método close. Veamos cuál es la sintaxis del método abierto. Aquí puedes ver una declaración para abrir una Ventana. Al principio, necesitamos escribir el nombre del objeto, que es Ventana. Entonces necesitamos usar el método, y nuestro metodym es abrir ventana punto abierto Entonces dentro de los vestidos redondos, Aquí hay que pasar a tres parámetros, nombre URL y espacio. Básicamente, estos parámetros son opcionales. Si no usas estos tres parámetros, va a abrir una ventana en blanco. Hablemos de nuestro primer parámetro, que es URL, y la forma completa de URL es un recurso uniforme ubicado. Aquí necesitas pasar el nombre de dominio del sitio web. Al principio, necesitamos pasar el protocolo HTTP, de lo contrario, TDP Entonces slash slash www dot nuestro sitio web N. Luego viene nuestro segundo parámetro, que es el nombre También es un parámetro opcional. Si quieres darle un nombre a tu ventana, entonces puedes usarlo. En nuestro caso, primera ventana. De lo contrario, puede usar algunos parámetros predefinidos, como underscoblank, underscopParent, undersco sil y underScot . Si quieres crear una ventana externa, entonces puedes usar este parámetro, underscoblank Y si usas UnderscoParent, entonces va a reemplazar la ventana existente De ahí vienen undisco Vender. Usamos el parámetro self donde usamos iframes. Si quieres abrir este sitio web en un iframe en particular, entonces puedes usarlo. Y nuestro último parámetro es underSCOT. Utilizamos este parámetro cuando creamos nuestro sitio web en un conjunto de marcos. Actualmente, nadie crea inferencia de sitios web. El parámetro popular es undiscoblank. La mayoría de las veces usamos este parámetro. Ahora, hablemos de nuestro último parámetro, que es el espacio. Es especificación principal. Viene con algunas vistas predefinidas, como ancho alto, ascensor y parte superior. Usando altura y ancho, puedes definir el tamaño de esta ventana usando izquierda y arriba, puedes definir la posición. ¿Por qué quieres abrir la ventana en tu pantalla? Sin estos, la especificación viene con alguna propiedad extra, pero estos no son necesarios ahora Empecemos la práctica y veamos cómo podemos usar. Entonces finalmente, estamos en mi editor de código Viz Studio. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor Lip, y ya creo un documento STL llamado index dot HTML Al principio, voy a crear una etiqueta de botón dentro de nuestra etiqueta corporal. Botón. Y nuestro nombre de botón es Abrir deshacer. Y dentro de esta etiqueta de botón, voy a llamar a la función L. Y nuestro nombre de función es Open Window. Voy a establecer este archivo. Ahora puedes ver en mi navegador, creamos con éxito un botón llamado Open Window. Si hago clic en este botón, va a llamar a la función Abrir ventana. Ahora dentro de la etiqueta script, voy a crear la función Open Window. Copio el nombre de la función y dentro de la etiqueta script, aquí voy a escribir function. Función, y nuestro nombre de función es OpenWindow. Entonces dentro de la alirasa aquí voy a usar el método Window open Ventana de Cáñamo, punto abierto y Semgroon dos en esta línea. Voy a volver a configurar este archivo. Como pueden ver, en este método, aquí no paso ningún parámetro. Ahora, si hago clic en este botón Abrir Ventana, se puede ver en mi navegador, automáticamente se abre una Ventana en blanco. Se crea una nueva pestaña y voy a cerrar esta pestaña. Cada vez que crea una nueva pestaña en blanco. Ahora quiero pasar nuestro primer parámetro. Quiero abrir un sitio web en nuestra pestaña. Aquí, dentro del código doble, primero, necesitamos escribir el nombre del protocolo que es HTTPS. Colon slash nuestro nombre de sitio web, www.google.com. Ahora vamos a configurar el archivo y dar clic en este botón. Después de presionar el botón Abrir ventana, como puedes ver, abre una pestaña tú y redirige a google.com Ahora hablemos de nuestro segundo parámetro, que es el nombre. Aquí paso una coma y dentro del doble curso, voy a pasar un nombre y el nombre es solo Google Físicamente nombre es parámetro opcional. Si configuro este archivo y hago clic en abrir Ventana, como puedes ver, como puedes verlo crear una nueva pestaña y redirigir tool.com, pero no cambia nada El nombre del título vino del sitio web real. Además, aquí podemos usar algunos valores predefinidos como undiscoblack. Es un vino por defecto. Si configuro este y elogio abrir el botón Ventana, ella crea una nueva ventana. Pero si utilizo otro parámetro predefinido, que es undersCoparent. Si configuro este archivo y presiono el botón Abrir punto Ventana y presionar este botón, aquí puedes verlo redirct el sitio web en la misma No creo ninguna ventana nueva. Sin eso, tenemos dos puntos de vista, yo y hablar. Aquí no voy a usar estas vistas. Si trabajas con iFrames, entonces puedes usar el valor propio Ahora, hablemos de nuestro tercer parámetro. Pero antes voy a quitar el segundo parámetro, aquí voy a pasar en blanco porque por defecto, cada vez se va a crear una nueva ventana. Ahora, hablemos de nuestro tercer parámetro, que es la especificación. Supra coma dentro del curso de muñecas. Primero, voy a especificar el ancho del navegador. Ancho igual a 500 píxeles. Entonces después del coma, necesitamos especificar la altura, altura igual a 200 píxeles. Recuerde, las propiedades siempre aceptan valor de píxel, no valor de porcentaje o valor EM. Después de configurar el archivo, si alabo, abre el botón de ventana, ahora puedes ver la esquina del portátil en tu pantalla, se abre una nueva ventana con 200 píxeles de altura y 500 píxeles de peso. Cabello crea ventana separada con especificar la altura y el peso, y se puede arrastrar y soltar la ventana en cualquier lugar. Además, puedes redimensionar la ventana. En especificación, tenemos otros dos valores, lift y top. Déjame mostrarte cómo puedes usarlo. Usando ascensor y valor máximo, puede establecer un margen para su ventana. Déjame mostrarte cómo. Supercoma primero voy a escribir IP izquierda igual a 300 pixel Coma y desde arriba, quiero 200 pixel, top igual a 200 pixel. Voy a establecer este archivo. Si alabo botón de ventana abierta, ahora lo puedes ver abrir nueva ventana. Pero decía un margen de 300 píxeles desde lado izquierdo y un margen de 200 píxeles desde la parte superior. Este valor predefinido puede abrir tu ventana exactamente donde quieras. Ya aprendemos cómo podemos abrir ventana ahora vamos a aprender cómo podemos cerrar nuestra ventana desde ventana existente. Para eso, voy a crear otro botón. A mí nos sale esta línea y voy a comprobar voy a cambiar el nombre de la función, que es cerrar ventana. Además, voy a crear una función para cerrar Ventana. Función y nombre de nuestra función, cerrar ventana. Copo el nombre y lo voy a pegar aquí. Como dije el Rundre necesitamos usar el método close Window. Pero antes necesitamos declarar una variable. W y nuestro nombre de variable es MyWindow. Eso ha empezado a terminar esta línea. Usando esta variable, vamos a vincular esto a Matemáticas. Aquí quiero escribir mi ventana igual a Función de apertura de ventana dentro de la función ventana cerrada, aquí quiero escribir, mi función de cierre de punto de ventana. Un semicro esta línea, y voy a poner este archivo Ahora puedes ver en mi navegador, tenemos que t dos botones diferentes, abrir ventana y cerrar ventana. Antes de ejecutar este código, quiero decirte algo. En el navegador Chrome, la función cerrada no sobrepasa. Por eso voy a ejecutar este código en el navegador Firefog Entonces voy a abrir mi navegador Firefrogs. Como pueden ver, ya abro este índice de archivos aML. Si alabo botón de ventana abierta, como se puede ver, se abre nuestra ventana en la posición especificada con especificar la altura y especificar ala. Si llamo a función cerrada usando el botón Cerrar Ventana, ahora puedes verla cerrar nuestra pestaña. Es así como podemos usar el método abierto y cerrado. Gracias por ver este video. Estén atentos para nuestro próximo a Jill. 31. Tutorial de ventana de JavaScript moveBy y moveTo: Nuevamente, estoy de vuelta con otro tutorial relacionado con el kit Java hacer en este tutorial, vamos a aprender ventana W B y método opt. Aquí puedes ver en tu pantalla, tenemos una ventana llamada A y usando esta ventana, abro otra ventana, que es B, y ya aprendemos sobre el método open en nuestro tutorial anterior. Con eso, también aprendemos sobre especificaciones. Como te dije en nuestro tutorial anterior, si no pasas a la izquierda y el valor máximo, por defecto va a abrir nuestra ventana en la esquina de la laptop. Pero podemos especificar la posición de la ventana usando Val izquierda y superior. Pero ahora después de crear la Ventana B, quiero mover la ventana. Quiero mover la ventana desde la ventana A, no desde la ventana B. Para ello, tenemos dos métodos, mover B y mover. Tanto el método hacen el mismo trabajo, pero hay diferencia menor. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión if server, y abro mi documento de estimación anterior. En nuestro tutorial anterior, aprendemos cómo podemos abrir una ventana en una posición especificada con altura especificada y especificada. Al principio, voy a crear otro botón. Entonces Dub obtenemos el botón y voy a cambiar el nombre del botón, que es Ventana. Mover ventana. Además, voy a cambiar el nombre de la función. Abre la Ventana dos. Mover ventana después de establecer el archivo, como se puede ver, ahora HeplPub abrir ventana y mover ventana Entonces voy a quitar la propiedad izquierda y superior porque quiero colocarla posición predeterminada, significa esquina superior izquierda. Ahora necesitamos crear la función de ventana de movimiento. Copio el nombre de la función y su función de tipo, y nuestro nombre de función es mover Ventana. Entonces el CalisF voy a usar mover dos matemáticas. Aquí quiero escribir mi ventana punto mover dos. Entonces dijiste los vestidos de abajo, tenemos que pasar dos parámetros. Tenemos que especificar la posición. Aquí tenemos que pasar a dos, izquierda y derecha. Entonces para XXs voy a tomar 100 y coma por YxS también voy a tomar Entonces voy a en esta línea y voy a volver a poner este archivo. Ahora, fijemos el código e intentemos abrir la ventana. Como se puede ver después de la alabanza, botón de ventana abierta, va a pintar una nueva ventana en la posición por defecto. Si alabo mover el botón de ventana, no va a funcionar. Déjame mostrarte. Aquí alabo mover botón de ventana. Como puede ver, después de alabanza, mover el botón de ventana, no mueve nuestra ventana en una posición especificada. Si te muestro mi sección de consola, en spec, Consola, aquí puedes ver un error porque si redireccionamos al sitio web de otra persona, entonces no podemos mover la ventana. Entonces no podemos controlar la ventana. A los navegadores no se les permite permiso para hacerlo. Pero si elimino la barra de URL, entonces qué pasa. Aquí voy a pasar un valor bancario a nuestro primer parámetro. Yo me quito. Y vuelve a poner el archivo. Ahora otra vez, voy a presionar el botón de abrir ventana, abrir ventana de hora, y ahora quiero mover la ventana. Si presiono el botón Ventana, ahora puedes ver que mueve nuestra ventana perfectamente. Ahora estamos en nuestra propia página web. Por eso podemos controlar la ventana del navegador. Ahora el problema es subir mover la ventana, perdemos el foco de esta ventana. Ahora es foco a esta ventana. Ahora arriba mueve la ventana, quiero enfocar la ventana. Para eso, necesitamos usar otro método, que es el foco. Mi método de enfoque de punto de ventana. Y luego semicon para terminar la línea. Voy a volver a configurar este archivo. De nuevo, voy a abrir otra ventana. Después de alabanza, abre el botón de ventana. Como puedes ver, crea una ventana. Si alabo, mueva el botón de ventana, ahora se puede ver, ahora se redirecciona el foco a esta ventana ¿Y ahora qué? Si especifico la posición exacta cuando abrimos la ventana, déjame mostrarte. Aquí voy a pasar a la izquierda y valor máximo una vez más. P igual a 300 píxeles. Superior igual a 300 píxeles. Ahora, volvamos a abrir la ventana. Así que alabar botón de ventana abierta. Ahora puedes verlo abrir nuestra ventana en la posición especificada. Desde el lado izquierdo, toma 300 píxeles. Desde la parte superior también toma 300 píxeles. Si alabo mover el botón de ventana, mueve nuestra ventana a la posición exacta donde se especifica. Ahora, hablemos de otra función, que es pasar por. Voy a duplicar esta línea y comentar la anterior y Hem para usar mover por método. Muévete por. Mover a la función, mover nuestra ventana de acuerdo a la pantalla, pero mover por función, mover la ventana de acuerdo a la posición relativa. Déjame mostrarte qué. Pre configurar este archivo. Yo alabo botón de ventana abierta, como pueden ver, abre nuestra ventana en esta posición especificada. Pero si alabo mover el botón Ventana, ahora puedes verlo mover nuestra ventana desde la posición relativa. Desde esta posición, mueve 100 píxeles al final, también desde la parte superior. Este es el uso de mover y trapear para funcionar. Solo una cosa que debes recordar, pasar a funcionar desde la posición absoluta y moverte por función desde la posición relativa. Esta es la diferencia básica entre dos funciones. Gracias por ver este video. Quédate incluso para nuestro próximo todo. 32. Tutorial de resizeBy y resizeTo de JavaScript: Me alegro de verlos de vuelta, chicos. Una vez más, estoy de vuelta con otro tutorial, relatate bomba de JavaScript. En este tutorial, vamos a aprender otros dos métodos, Redimensionar por y redimensionar Aquí puedes ver una ventana del navegador. Cuando abrimos la ventana, especificamos un tamaño de cien por cien píxeles. Ahora quieres cambiar el tamaño de este navegador sin arrastrar y dibujar y además quieres especificar hide y week Para este tipo de resize, tenemos dos métodos en Java script, Resize B y resize Sin descansar tu tiempo, comencemos lo práctico y veamos qué es eso. Como es habitual, lado a lado, abro mis viseras a tu editor de código y a mi navegador usando la extensión Live Server, y abro mi documento de estimación anterior llamado index dot t. si alabo botón de ventana abierta, como puedes ver, crea una nueva ventana y ya especificamos altura y peso a esta ventana con 500 y altura 200 Y ahora quiero cambiar el tamaño de esta ventana sin arrastrar. Para eso, primero, necesitamos tomar un botón. Voy a duplicar esta línea y aquí voy a cambiar el nombre de la función. Voy a reemplazar abierto Redimensionamos. Nuestro nombre de función es cambiar el tamaño de la ventana, y también necesitamos cambiar el botón fijo, Cambiar el tamaño Y ahora necesitamos definir la función en nuestra etiqueta script. Copio el nombre de la función y escribo función, y nuestro nombre de función es redimensionar Ventana Entonces en cambio el Cariss necesitamos escribir mi ventana punto nuestro nombre de método, que es cambiar el tamaño Y aquí tenemos que pasar el ancho, y voy a decir que se intensificó el ancho 400 por 400, 400 coma 400 y semigraund dos en esta línea. Así que vamos a establecer el archivo. Aquí puedes ver ambos botones. Entonces voy a alabar botón de ventana abierta. Y ahora quiero cambiar el tamaño de esta ventana. Entonces voy a alabar cambiar el tamaño del botón de la ventana. Después de alabanza, Cambiar el tamaño de la ventana, se puede ver el resultado. Ha cambiado yendo a la altura y nosotros. Este es el uso del método de receso dos. Veamos nuestro segundo método, que es cambiar el tamaño Bye. Al principio, voy a duplicar esta línea y comentar nuestra anterior. Voy a sustituir el receso dos con empotrado Bye. Otra pregunta es, ¿cuál es la diferencia entre resize buy y recess two método Si usamos redimensionar Por método, se va a extender la altura existente y wei Aquí puedes ver, cuando abrimos nuestra ventana, establecemos una altura de 200 píxeles. Y si usamos la función redimensionable, va a aumentar la altura con la altura existente Se va a sumar 400 con 200. De manera similar, va a sumar 400 con 500. Déjame mostrarte. Así que por favor establece este archivo, voy a abrir la ventana. Ahora puedes ver nuestro La altura de la ventana es 200 píxeles y W es de 500 píxeles. Pero si elogio cambiar el tamaño de la ventana, ahora nuestra altura de pestaña es de 600 píxeles y la pestaña con es de 900 píxeles Cambiar el tamaño por método de trabajo con valor existente y rebaje a método, pero de rebaje a método trabajar por separado Entonces esta es la diferencia entre cambiar el tamaño por y el método del receso dos Entonces gracias por ver este video. Estén atentos para nuestra próxima vista. 33. Tutorial de JavaScript scrollBy y scrollTo: Me alegro de verles chicos. Nuevamente, estoy de vuelta con otro tutorial relacionado con la bomba Javascrip Y en este tutorial, vamos a aprender scroll by y scroll two método. Y puedes ver una ventana del navegador en tu pantalla. Y también, se puede ver la barra de desplazamiento de partículas y la barra de desplazamiento horizontal Ahora, desea desplazarse por la ventana sin tocar la barra de desplazamiento Para eso, Javascrip introducir a método especial. Desplazarse B y desplazarse dos. Antes de comenzar la práctica, necesitamos entender cuántas barras de puntuación tipo up tenemos en nuestro navegador. Como te dije, tenemos que tocar dos barras de puntuación tipo up, vertical y horizontal. Si quieres manipular el desplazamiento vertical, entonces necesitas pasar YxS L si quieres manipular la partitura horizontal, para eso, necesitas usar XX W. Si quieres mover la barra de desplazamiento hacia arriba, para eso, necesitas pasar menos YxSh si quieres moverla a la baja, entonces por defecto, necesitas pasar la V. No necesitas mencionar el V. No necesitas mencionar De igual manera en barra de desplazamiento horizontal, si quieres moverte del lado izquierdo, necesitas pasar menos V, si quieres mover esta barra de desplazamiento del lado derecho, necesitas pasar las V. Empecemos práctico y veamos como podemos usar scroll dos y scroll por método. Como pueden ver, lado a lado, abro mi editor de código visor studio y mi navegador usando si la expansión del servidor, y ya creo un documento estimable llamado index dot t Como puedes ver dentro de la etiqueta body, tenemos una pandilla auditiva, ahora quiero usar la barra de desplazamiento. tenemos una pandilla auditiva, ahora quiero usar la barra de desplazamiento Para eso, voy a añadir un párrafo, un párrafo grande. Aquí voy a usar la etiqueta P. Y dentro de la etiqueta de velocidad, voy a escribir im 2000. Aquí voy a añadir el párrafo 2000 de Wardro. Es enorme, y voy a poner este archivo. Aquí puedes ver una barra de desplazamiento en nuestro navegador. Ahora necesitamos agregar un botón debajo de la etiqueta de encabezado. Aquí voy a teclear botón. Y aquí voy a escribir un pie de foto y voy a escribir ventana de desplazamiento. Con eso, voy a llamar a una función con evento click. Entonces aquí voy a escribir en cle en arcilla al click y nuestro nombre de función es scroll Window. Y voy a copiar el nombre de la función. Y dentro de la etiqueta script, voy a definir la función. Función, y nuestro nombre de función es scroll Window. Entonces en Calvis aquí voy a escribir Window, Window dot, aquí voy a usar scroll by method Dentro del downdrass voy a pasar por dos parámetros Por ahora, no quiero pasar X xs. Paso cero para YxS Quiero desplazarme hacia abajo 40 pixel. Paso por mí y luego semicroten esta línea. Y voy a poner este archivo. Después de configurar el archivo, se puede ver el botón de la ventana de desplazamiento. Como puedes ver, nuestra barra de desplazamiento está en la parte superior, pero si alabo, botón de ventana de desplazamiento, entonces puedes ver que se mueve hacia abajo 40 píxeles. Si presiono de nuevo, otra vez, se movió hacia abajo 40 píxeles. Pero ahora quiero desplazarlo en dirección ascendente. Para eso, aquí tenemos que pasar ventana menos. Paso -40 y configuro este archivo. Después de alabanza, ventana de desplazamiento, como se puede ver, se mueve nuestra barra de desplazamiento hacia arriba dirección. Entonces aquí trabajamos con barra de desplazamiento vertical. Vamos a trabajar con barra de desplazamiento horizontal. Para eso, necesitamos tomar una pestaña profunda. Entonces aquí voy a escribir D. Y voy a mover este párrafo dentro de esta pestaña dip. Corté este párrafo y lo presiono dentro de esta pestaña profunda. Y ahora voy a usar atributo de estilo en estilo de párrafo, y voy a usar con propiedad. Peso, manguera en pixel. Perturbar este archivo, se puede ver el resultado. Aquí puedes ver una barra de desplazamiento horizontal en nuestro navegador. Ahora voy a pagar con valor X texas. Voy a hacer que el valor YX sea cero. Y en xx cero, aquí voy a pasar 100. Up configurar este archivo. Si presiono ventana de desplazamiento, se puede ver hacia arriba presione el botón Ventana, me desplace hacia fuera navegador 100 pixel en dirección xxs Si uso valor menos aquí y el conjunto de este archivo, y luego otra vez, presiono este botón. Ahora se puede ver que movió el párrafo en dirección opuesta. Así es como podemos usar XX Z y X W. Ahora, hablemos de la propiedad scroll. Quiero cavar esta línea y comentar figuras uno aquí voy a cambiar scroll by con scroll do. Voy a establecer este archivo. Además, voy a cambiar el d cero en xxS y cero en YxS y establecer este archivo Antes de alabar, botón de ventana de desplazamiento, voy a moverme hacia abajo o barra de desplazamiento. Si alabo, desplázate el botón de ventana ahora, como puedes ver, de nuevo a la posición por defecto. Lo siento, no es la posición por defecto porque ella dijo que XX es cero y YX es cero Por eso volví a golpear a la posición inicial. De manera similar para barra de desplazamiento horizontal. Si lo muevo un poco y luego presiono este botón, como se puede ver de nuevo a la posición anterior. Desplázate por trabajo relativamente y desplázate para trabajar absolutamente. Esta es la diferencia entre scroll by y scroll to method. Gracias por ver este video, mantente atento para nuestros dos próximos. 34. Tutorial de objetos de ubicación de JavaScript: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con Java Streep bomb En este tutorial, vamos a aprender Java Streep location object Aquí puedes ver el navegador en tu pantalla. Y como saben, esta es la barra de URL de este navegador. De lo contrario, podemos llamarlo barra de ubicación. Si quieres obtener algún tipo de valor de estos para eso, necesitas usar el objeto location, y usando la ayuda de algunas propiedades especiales, podemos obtener los valores. Tenemos un total de 19 propiedades y algunos métodos. Vamos a aprender uno por uno todo esto. Comencemos la práctica y veamos cómo podemos obtener valores de la barra de URL con la ayuda de estas propiedades. Como de costumbre, lado a lado, abro mi editor de código sult studio y mi navegador usando la extensión de servidor light, y ya creo un documento EstiML llamado index dot Y ahora vamos a practicar propiedades de objetos de ubicación una por una. Aquí puedes ver la barra de ubicación. También puedes ver algo especial, que es una dirección IP porque ejecutamos nuestro archivo HTML desde el servidor b. Si abres el archivo desde el servidor vo Local, lo contrario, cualquier servidor en línea, entonces puedes usar estas propiedades. Ahora, vamos a abrir la consola y probar el objeto de ubicación. Aquí motype consola dot log, Consola dot log ins en la ubicación de prensas redondas Ubicación tipo hemo. Si presiono Enter, ahora si abro la sección desplegable, aquí puedes ver todas las propiedades nombre del objeto de ubicación, hash, host, nombre de host, HID, origen, nombre de parte, hot, etcétera Como puedes ver los valores. Recuerda, puedes obtener el resultado solo cuando ejecutas tu archivo desde el servidor. Ahora, ejecutemos el mismo comando en google.com. En otro tipo, ya abro google.com. Aquí, también, voy a abrir mi Consola. Voy a escribir consola dot log. Dentro de la rotonda se encuentra la ubicación. Y Semgro dos en esta diapositiva. Si presiono tercero, y abro la sección desplegable. Ahora se puede ver el tipo similar de datos proporcionados por el google.com Aquí puedes ver el nombre del host y el host es el mismo. Además, se puede ver la ruta y el origen y el protocolo es TDP, como saben, S significa seguro Si te muestro mis datos de servidor local, como puedes ver, el protocolo es HTDP Quiero decir que no es un sitio seguro. Ese es el tema diferente. Ahora, uno por uno, quiero obtener todos los valores. Para eso, necesitamos usar todas las propiedades de ubicación. Veamos cómo podemos conseguirlo. Al principio, quiero devolver el nombre de host de nuestro servidor local. Para eso, necesitamos escribir Console dot log is at the rounddresses Primero tenemos que llamar a la ubicación Objeto. Ubicación, punto, y el nombre de nuestra propiedad, y nuestro nombre de propiedad es H. Y semicon para poder esta línea Si presiono Enter, como puede ver, devolverá el nombre del host. Se devolvió la dirección IP. Y si estás en el mismo comando para la página go, déjame mostrarte sonido presiona este código y presiona Enter, ahora puedes ver que está escrito el nombre de host www.google.com Como saben, nuestro archivo index dot t se ejecuta desde el servidor local vos. Por eso está escrito la dirección IP, pero google.com se ejecuta desde el servidor en línea, y como saben, la dirección IP se enlaza con el dominio Por eso escribió el nombre de dominio. Del mismo modo, si quieres devolver el nombre del host, déjame mostrarte ubicación punto nombre de host. Y ejecuta este código, está escrito este mismo resultado. Pero si ejecutas el mismo comando en el servidor de Locaos, déjame mostrarte ubicación punto nombre de host Después ejecuta el código. Ahora puedes ver, está escrito la única dirección IP, pero en host, también escribió el número de puerto. Ahora quiero devolver la URL completa de este sitio web. Para eso, necesitamos usar HRDA. Hm paga el código, ubicación punto HR. Si presiono Enter, puedes ver el resultado. Devuelve el protocolo, nombre del servidor, IP del servidor, de lo contrario, nombre de dominio, y el archivo que abrimos. Solo necesitas recordar la propiedad HRD, devolver el nombre de la página con el nombre de host Ahora hablemos de otra propiedad que es para. Entonces para ejecutar el comando y ubicación punto cuatro. De nuevo, voy a ejecutar este comando y aquí voy a escribir location dot port. Si ejecuto este código, se puede ver que devuelve el número de puerto, que es 5,500 Se puede ver el mismo nombre de puerto en barra de URL después de la dirección IP, Colón 5,500 Y de la misma manera, si devolvemos el protocolo, déjame mostrarte la consola dot log Location protocol. Y este código, se puede ver que devuelve HTTP. Si ejecuto el mismo código en la página google.com , copia el comando Y si ejecuto este código aquí, ahora lo puedes ver escrito protocolo HTDPH Ahora, hablemos de otra propiedad que es hash. Re fore en nuestra barra Ido, hasta slash, voy a usar tiene hash segundo Si presiono Enter, como puedes ver, se escribe error porque hash no está disponible, por eso es error escrito. Pero si ejecuto este comando, déjame mostrarte consola punto log ubicación punto hash. Después de presionar Enter, como puedes ver, se escribe segundos segundos. Ahora hablemos de otra propiedad que es la búsqueda. Para eso, voy a saltar a la pestaña de Google y primero, voy a buscar algo imagen. En mi consola, voy a ejecutar un comando, consola punto log ubicación punto búsqueda. Si quieres devolver este valor de búsqueda desde la URL o esa, puedes usar este comando. Solo para escribir la búsqueda de puntos de ubicación. Si presiono Enter, como puedes ver, se trata de imágenes escritas. Aquí buscamos el comando Imágenes, y el resto de datos es agregado por el propio Google. También puedes ver la consulta de autobúsqueda en nuestra barra ERL, buscar imágenes La mayoría de las veces usamos este comando cuando trabajas con lenguaje del lado del servidor como PHB Aprendemos cómo podemos obtener el valor de la URL. No sólo eso, también podemos establecer los valores. Déjame mostrarte. Vuelvo a la página de estimación del índice, y aquí, voy a escribir ubicación punto HRF Ahora quiero establecer un nombre de dominio. Para eso, para escribir igual a dentro de los códigos dobles, primero, necesitamos escribir el protocolo. Aquí voy a usar TDP. Colon cortar el nombre de dominio, www.google.com. Después semi yendo a esta línea. Ahora bien, si configuro este archivo y reprimo esta página TML de punto índice, déjame mostrarte Como puedes ver, es reditggle.com. Ya aprendes cómo podemos usar esta propiedad para establecer valor y obtener valor. Ahora hablemos de los métodos de objetos de ubicación. A estos se les asigna recarga y reemplazo. Si quieres establecer un nuevo valor en esta barra vado, para eso, puedes usar el método asignado. Si quieres reemplazar tu página por eso, puedes usar reload El último es reemplazar. También es bastante similar con el método asignado, pero hay una pequeña diferencia entre ellos. Entonces déjame mostrarte. Aquí puedes ver que ya creaste botón nombre click y además agregamos en el evento. Se puede ver el clic de la función. En esta función, primero, voy a usar el método de recarga de anuncios de ubicación, reload Si configuro este archivo y después de hacer clic en este botón, cada vez que puedes ver en mi barra de URL, vuelve a cargar mi navegador Ahora quiero asignar un nuevo valor a nuestra barra de URL. Para ello, necesitamos usar el método assign, location dot, assign Dentro del Runddress necesitamos proporcionar el nombre de dominio Primero, necesitamos escribir el protocolo, HTTPS, barra diagonal de colon www.google.com Después de configurar este archivo, si hago clic en este botón, ahora puedes ver que es reescribir a google.com Este es el uso del método asignado. Ahora, hablemos de nuestro último método, que es Ripples. Voy a escoger esta línea y comentar la anterior. Aquí, voy a atar locación punto RPLs. Este método también funciona como método asignado, pero eliminó el historial. Déjame mostrarte. Dentro del doble curso, voy a escribir el mismo sitio web, google.com Después de paso el archivo, voy a hacer clic en el botón. Ahora puedes verlo redirigir a go.com. Pero si te enfocas en mi sección de flecha, como puedes ver, en nuestra flecha izquierda, no tenemos ninguna opción de volver atrás porque eliminó el historial. Espero que el objeto de ubicación sea claro para ti. Gracias por ver este video, Stik. 35. Tutorial de objetos de historia de JavaScript: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con la bomba JavaScript y en este tutorial, vamos a aprender sobre el objeto de historia. En este tutorial, vamos a aprender todas las propiedades y métodos relacionados con el objeto de historia. Aquí puedes ver una pantalla del navegador. Además, se pueden ver dos botones, hacia atrás y hacia adelante. Si quieres ver las páginas hacia atrás y hacia adelante para eso, necesitamos usar history Object y nuestro objeto de historia vino con una sola propiedad, que es Ln. En la misma ventana, cuántos sitios web abres usando en la propiedad puedes obtener. Déjame mostrarte la propiedad en la práctica. Como de costumbre, lado a lado, abro mis usuarios editor de código de estudio y mi navegador usando la extensión Lifesaver, y ya creo un documento de estimación llamado index dot Al principio, voy a abrir mi sección de Consola, inspeccionar y Consola y Hemo tipo consola dot log, Console dot, Console dot, Log dentro del brress redondo Hemo Después submicra a Nil. Si presiono Enter, ahora puedes ver en mi etiqueta de historial, ahora puedes ver un menú desplegable. Si abro este desplegable, como pueden ver, la longitud es una Y si me descargo la opción de prototipo, ahora se pueden ver algunas Matemáticas, atrás adelante, ir, longitud, etcétera Ahora, agreguemos una etiqueta cortada dentro de la etiqueta corporal. Aquí voy a escribir A y el link es HTTPS colon slash slash el sitio web es google.com, www.google.com Voy a establecer este archivo. Además, necesitamos agregar un texto a esta etiqueta Ange. Voy a escribir Google. Presiono este archivo, se puede ver un enlace en esta página web, y ahora voy a presionar google.com Como puedes ver, se redirige a google.com. Si te muestro mi longitud ahora, en mi consola, voy a escribir Console dot log. Son las prensas redondas, quiero devolver la longitud. Aquí voy a escribir historia punto Largo. Como Semira para terminar esta línea. Presiono este expediente. Si presiono Enter, ahora puedes verlo volver a. Otra pregunta es por qué es volver a Porque ahora tienes historia atrasada. Si hago clic en este botón volver atrás, ahora puedes ver que está de vuelta a mi página de índice punto de EstiML De nuevo, te voy a mostrar esta historia Consola, punto, historial de registro. Entonces puedes ver ahora la longitud es demasiado porque ahora nuestro botón de avance está activado. Ahora podemos ir adelante a google.com sin presionar este enlace. Se puede ver el resultado. Espero ahora claro para ti cómo funciona la función de lente. Ahora, hablemos del método de la historia objeto. Normalmente tenemos un total de tres métodos útiles retroceso hacia adelante, y vamos. Si quieres ir hacia adelante y hacia atrás sin presionar esta flecha, entonces puedes usar este método. Si quieres retroceder, entonces necesitas usar el método B. Si quieres seguir adelante, entonces necesitas usar forward y usando go Método, puedes hacer el estado de ánimo. Vamos a saltar al código de salt studio y ver cómo podemos usarlo. Al principio, voy a cambiar la dirección del enlace. Aquí voy a empatar índice punto HTM. Y voy a sustituir a Google por la página dos, página dos, y voy a configurar este archivo. Y también, voy a cambiar el rumbo. Voy a reemplazar JavaScript History Object con Estamos en la página uno y configuramos este archivo. Y ahora necesitamos crear índice punto a página de estimación en mi directorio de trabajo actual Entonces aquí voy a crear otra página, indexar dos puntos HTML. Y voy a copiar todo el código de Index StimlPage Y pegarlo dentro de índice de dos puntos de la página de estimación. Voy a sustituir al principio, voy a sustituir nuestro rubro. Estamos en la página dos. De nuevo, voy a crear otra página. Aquí voy a cambiar el nombre del enlace, página tres. Como necesitamos redirigir a otra página, indexar tres y establecer este archivo. Después selecciono la bocinada y la copio. De nuevo, voy a crear otro punto índice StimlPage. Índice HTML de tres puntos. Voy a pegar todo el código aquí. Como voy a sustituir la página dos por la página tres. Estamos en la página tres. Pero esta vez, no necesito ninguna etiqueta de anclaje para redirigir. Voy a quitar esta etiqueta de gato, y establecer este archivo. Ahora puedes ver en mi navegador, estamos en mi página HTML índice. Man página uno. Ahora quiero saltar a la página dos. Voy a dar click en este enlace, página dos. Como puedes ver en mi barra de URL, es redireccionar para indexar dos DML Nuevamente, decido saltar a nuestra página siguiente, que es la fase tres. Si hago clic en este enlace, ahora pueden ver que estamos en la página tres. Si te muestro mi historial, Consola, Dot log está en el historial de Roundbress Ahora puedes ver que la longitud del historial es de tres porque tenemos que hacer tres páginas porque visitamos tres páginas al mismo Wint Si notas puedes ver que solo tenemos opción hacia atrás, no la opción hacia adelante porque estamos en la página tres. Si alabo flecha hacia atrás, ahora estamos en la página dos. En esta página, tenemos dos opciones. Pero en esta página, tenemos ambas opciones. Podemos ir hacia atrás, también podemos ir hacia adelante. Ahora decido ir hacia atrás. Como puedes ver, podemos movernos hacia atrás y hacia adelante desde la sección de URL. Pero ahora quiero hacer lo mismo usando botones. Para eso, voy a crear dos botones. Botón, y nuestro nombre de primer botón está de vuelta. Además, aquí necesitamos llamar a un evento, que es click. Al hacer clic y también necesitamos proporcionar nuestro nombre de función y nuestro nombre de función es la función B. Función de espalda. Con eso, voy a crear otro botón. Yo sí obtenemos esta línea y nuestro nuevo nombre de botón es adelante. Y también hay que cambiar la función. Entonces aquí voy a teclear adelante. Y ahora necesitamos crear tanto la función en nuestra etiqueta script. Entonces primero, voy a copiar la función Bap. Y aquí voy a atar función, y nuestro nombre de función es la función BP. Entonces dentro de la rotonda voy a empatar historia punto B. Para función back, utilizo método back Y otra vez, y luego voy a fechar esta sección y también voy a cambiar el nombre de la función forward function. Copia el nombre de la función y sobrescribirla. Y también, voy a cambiar el método aquí. Voy a sustituir atrás por adelante. Esto es, y voy a poner este archivo. Entonces como puedes ver, creamos la función y el botón en Índice de tres páginas. Tenemos que copiar esta sección. Y tenemos que hacer lo mismo en el botón Índice dos también en el botón Índice uno. Lo siento, página. Ahora puedes ver en nuestra primera página, tenemos botón hacia atrás y hacia adelante. Ahora quiero decidir seguir adelante. Si elogio el botón de avance, como pueden ver, es redirigir a la página dos. Y si decides ir hacia atrás, solo alaba botón Atrás. Entonces nuevamente, estamos en la página uno. Y ahora voy a alabar botón adelante dos veces. Estamos en ahora la página dos, y también voy a saltar adelante en la fase tres. Así que de nuevo, voy a alabar botón hacia adelante. Entonces ahora se puede ver que estamos en la fase tres. Pero, ¿qué? Si vuelvo a alabar botón hacia adelante, ¿entonces qué? Como puedes ver, presiona hacia arriba botón hacia adelante, está redactado a nada porque después de la fase tres, no tenemos ninguna opción de avance Y también lo puedes ver en la sección URL. Nuestra fuga hacia adelante está desactivada. Ahora, hablemos de nuestro último método, que es ir. Para eso, voy hacia atrás. Quiero decir que voy a retroceder la fase dos, y además, voy a abrir índice dos puntos HTM. Aquí, voy a crear otro botón. Duplico el botón y voy a reemplazar la función forward con la función goFuncTiong Además, voy a cambiar el nombre del botón. Vamos. Ahora voy a crear la función en nuestro script. Función y nuestra función n es ir función. Función Go. Entonces dentro del calis, aquí necesitas escribir history dot, ve Entonces dentro de la desnudez, aquí necesitas pasar un parámetro Si quieres seguir adelante, entonces necesitas pasar valor positivo. Si quieres retroceder, entonces necesitas pasar negativo. Primero, quiero seguir adelante. Aquí paso uno. Y voy a configurar este archivo y volver a cargar pase dos. Ahora puedes ver que hay un botón NMG. Si presiono el botón ir ahora, como pueden ver, redirigir a la página tres. Ahora, hagamos lo mismo en el índice de tres puntos StimlPage Por lo que copio esta sección. Y luego voy a saltar al índice tres puntos StimlPage y voy a reemplazarlo por nuevo bacalao Pero antes de configurar este archivo, quiero ir dos pasos atrás. Quiero decir que quiero saltar a la página uno de la página tres. Quiero saltarme la página dos. Para eso, aquí hay que pasar película negativa. Entonces aquí voy a pasar menos dos. Ahora puedes ver en mi página tres, aparece el botón de ir. Si alabo ir botón, ahora puedes ver que es redireccionar a la página uno, es Saltar página dos. También voy a hacer lo mismo en la página uno. De nuevo, voy a copiar la sección antigua y reemplazar nuestro código anterior por nuevo código de la primera página, ahora quiero redirigir a la última página. Quiero decir la página tres. Para eso, tenemos que pasar positivo. Y si configuro este archivo, puedes ver el botón. Si alabo ir botón, ahora se puede ver que se reedita a la página tres El héroe usa con éxito tres tipos de método de historia hacia atrás, adelante y listo. Espero que ahora sea un pie claro. Gracias por ver este video. Estén atentos para nuestro próximo Tutorio. 36. Tutorial de pageYOffset y pageXOffset de JavaScript: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con Javascript bound. Y en este tutorial, vamos a aprender sobre dos nuevos métodos, página Y opuesta y la página X opsite Estos métodos son trabajar con la ventana del navegador. Entonces déjame mostrarte un ejemplo. Aquí puedes ver, tenemos una ventana del navegador, y si notas la barra de desplazamiento vertical, ya desplazamos un poco la página. También para la barra de desplazamiento horizontal, ya la desplazamos un poco, y ahora queremos extraer la distancia, cuánto nos desplazamos. Tenemos que extraer la distancia, y tenemos que medirla. Esto es para barra de desplazamiento vertical, y también extraemos la distancia de la barra de desplazamiento horizontal. Para ello, JavaScript introduce dos métodos. Pagey osite y página opuesta. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usar estos métodos. Entonces como pueden ver, lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión del servidor lip, y ya creo un documento TML llamado index dot TML Si notas, puedes ver, no hay ninguna barra de desplazamiento en nuestro navegador, ni la vertical, ni la horizontal Entonces por ahora, en nuestra etiqueta corporal, voy a agregar un W Parag, P, y voy a agregar mucho O. Lorem, 2000 Y voy a poner este archivo. Después de establecer este archivo, como puede ver, agregó barra de desplazamiento vertical. Y ahora voy a arrastrar un poco hacia abajo la barra de desplazamiento. Con eso, quiero extraer el valor cuánto nos desplazamos. Entonces voy a usar el método PageY Osit. Así que aquí quiero escribir script tag dentro de la etiqueta body, Script. Después dentro de la etiqueta Script, como ya sabéis, estamos trabajando en el tipo de objeto window, Window. Entonces voy a agregar evento scroll. Voy a usar add event listener. Y dentro de las prensas redondas, voy a usar scroll event. Entonces cuando me desplace por esta página, va a llamar a una función anónima. Entonces voy a crear una función. función está en los cólicos, y ahora quiero extraer el valor de desplazamiento vertical Con eso, quiero imprimir este valor en nuestra consola. Entonces voy a escribir Consola, punto, registro dentro de los roundss dentro de los códigos de puerta Voy a escribir página Yost. Con eso, voy a usar el letrero Cgation, y quiero imprimir el valor de ventana Y trastornado, ventana punto página Y trastornado Y voy a añadir punto y coma para terminar esta línea. Y antes de configurar este archivo, encendamos la consola en nuestro navegador. Inspeccionar, Consola. Y voy a poner este archivo. Superior establecer este archivo, se puede ver el valor. Página Y el valor opuesto es 563. Desplazamos 563 píxeles en dirección YxS. Y si muevo la barra de desplazamiento hacia arriba, ahora se puede ver el valor actual, que es cero. Y si lo muevo hacia abajo, ahora se puede ver el valor. Aquí puedes ver ahora página Y poste Vee es 1,505. Pero ahora el problema está en nuestra consola, imprime todos los valores innecesarios. Quiero el valor exacto. Para eso, necesitamos despejar la consola. Así que aquí escriba consola punto R Mathur. Y subgin para terminar esta línea. Y voy a poner este archivo. Después de establecer este archivo, ahora se puede ver el valor exacto, cuánto nos desplazamos, 1,505 píxeles Si muevo esta barra de desplazamiento hacia arriba, lo contrario hacia abajo, solo se puede ver un valor Es imprimir el valor exacto de la palabra de desplazamiento. la misma manera, podemos extraer la página x valor opuesto. Entonces voy a duplicar esta línea, y esta vez voy a imprimir la página x opuesta. Pero el problema es que no tenemos ninguna palabra de desplazamiento horizontal en nuestro párrafo. Para eso, voy a tomar un elemento DV en nuestra etiqueta corporal. Entonces antes de que comience el párrafo, aquí voy a tomar un elemento Dev. Punto profundo, punto, caja. Y además, voy a darle estilo a este elemento profundo usando su nombre de clase. Entonces Hemo tipo dot box dentro de la Caris es primera propiedad, voy a usar con con 1,200 pixel Altura 300 píxeles. Y voy a decir color de fondo. Tasa de color de fondo. Eso es. Si configuro este archivo y muevo la escuela vertical hacia arriba, ahora puedes ver nuestra página Y opite el valor es cero, también nuestra página, necesitamos cambiar el nombre página Xosite Además, nuestra página X Valor oposito sigue siendo cero. Ahora bien, si muevo un poco nuestro scroll horizontal, aquí, se puede ver el valor. Ahora puedes ver nuestra página X valor opuesto es 174 pixel y nuestra página Yosete VW sigue siendo cero Entonces si muevo tanto esta barra de desplazamiento, se puede ver el resultado en mi consola. Entonces así es como podemos extraer este valor de desplazamiento usando estos métodos. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender sobre dos nuevos métodos, Oset top y Osete leg Así que gracias por ver este video. Estén atentos. 37. JavaScript offsetTop y offsetLeft: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con JavaScript. Y en este tutorial, vamos a aprender sobre dos nuevos métodos, Oset top y opuesto al mismo Supongamos que este es nuestro navegador, y dentro de este navegador, escribimos algún texto, y además tomamos un elemento profundo en ese lugar. Y ahora quiero extraer la distancia de este elemento profundo desde la parte superior. Quiero extraer la distancia desde la parte superior también desde el lado izquierdo para extraer los valores JavaScript introdujo dos métodos. Enfrente superior y Opsete ella. Así que saltemos al editor de código de Visual Studio y veamos cómo podemos extraer estos valores. Entonces como de costumbre, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando IPSeretension, y ya creo un nombre de documento estimado index Y como pueden ver, en nuestra etiqueta corporal, tenemos una caja de clase profunda. Y en esta profundidad, tenemos un párrafo, un párrafo Tumi, y ya estilo estos box deep Aquí dijimos fondo, también establecido luego caminata 300 píxeles. También, tenemos una frontera. Y ahora quiero medir el valor desde la parte superior y la izquierda. Para eso, tenemos que saltar a la etiqueta script. Entonces voy a escribir guión. Y dentro de la etiqueta script, voy a usar Console, Console, dot, log. Dentro de las rondas voy a imprimir una caja de declaración opuesta a la parte superior Cuadro opuesto a la parte superior, dos puntos, y luego voy a usar el lado de Configuración. Y ahora sólo para apuntar a esta caja. Para apuntar a esta casilla, voy a crear una variable dentro de la etiqueta script. Entonces nuestra variable es donde BOX box, box igual a, y voy a usar el método selector de consulta de punto de documento para apuntar a este cuadro, document dot querySelector Entonces dentro de las prensas redondas, dentro de los códigos dobles, necesitamos pasar la ID de caja. Lo siento, el nombre de la clase box, que es punto BOX y el semicon también en esta línea Y ahora voy a usar este cuadro de nombre de variable. Box dot, y nuestro metodomsopposito T. Y semicolum la misma manera, si queremos extraer el valor del laboratorio, necesitamos obtener esta línea. Y voy a sustituir esta afirmación. Por qué Oset. Y también, tenemos que perseguir el nombre del método. Por qué compensarlo. Y antes de configurar este archivo, abramos la consola, inspeccionemos la consola. Y voy a poner este archivo. Después de establecer este archivo, se puede ver la caja opuesta a los ocho superiores y la caja opuesta al laboratorio ocho. Ahora el cociente es blanco escrito ocho y ocho tanto desde la dirección porque este es el margen predeterminado de la etiqueta corporal Es por eso que a veces necesitamos usar el margen cero desde toda la dirección en nuestra etiqueta corporal. Y también se puede notar la brecha de ocho píxeles desde la parte superior y desde el lado de vuelta. Pero si uso margin property, primero, voy a usar margin property en nuestra etiqueta body. Entonces aquí quiero escribir cuerpo y dentro del margen de Cariss. Margen Velo cero. Si configuro este archivo, ahora se puede ver en mi consola, es cuadro de impresión opuesto al Valor cero, y también opuesto lib Vo sigue siendo cero. Y si agrego margen en psit, déjame mostrarte margen, P 100 pixel Y este conjunto de este archivo, se puede ver el resultado. Ahora nuestro valor de laboratorio de oposte de caja es de 100 porque tenemos un margen de 100 píxeles en la posición de laboratorio Además, si agrego margen top 50 pixel y el conjunto de este archivo, se puede ver el valor. Ahora se puede ver en mi consola, cuadro oponerse valor máximo es de 50. Pero, ¿qué? Si añadimos un párrafo antes de esta caja dip, déjame mostrarte. Entonces voy a añadir un párrafo Dai. Lorena, y voy a añadir 200 párrafo wardop. Después de establecer este archivo, se puede ver el valor. Ahora puedes ver que nuestro valor superior opuesto es de 354 píxeles. La distancia entre la parte superior del navegador y Dave es de 354 píxeles. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender sobre otros dos métodos, scroll top y scroll lip value. Así que gracias por ver este video. Estén atentos. 38. JavaScript scrollTop y scrollLeft: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con Javascript. Y en este tutorial, vamos a aprender sobre dos nuevos métodos, scroll top y scroll let. Supongamos que tenemos un elemento profundo, y decimos, altura y anchura a este elemento profundo. Y como puedes ver, tenemos un total dos barras de desplazamiento en este elemento profundo, vertical y horizontal Esta barra de desplazamiento aparecerá p desbordamiento de datos de este contenedor. Si te das cuenta, puedes ver en nuestra barra de desplazamiento vertical, ya me desplazo un poco. Y ahora quiero extraer la distancia, cuánto nos desplazamos en nuestra profundidad. la misma manera, quiero extraer el valor de desplazamiento horizontal. Entonces necesitamos extraer el desplazamiento horizontal y el valor de desplazamiento vertical. Para extraer estos, tenemos dos métodos. Desplázate hacia arriba y desplázate tarde. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos extraer este valor. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y ya creo un documento TML, llamado index dot HTML Y en esta página de TML, como pueden ver, tenemos un elemento profundo con clase llamada box, y ya estilo esta caja profunda Aquí dijiste, fondo, ancho elevado, y borde. Ahora te das cuenta, como puedes ver, no hay palabra de desplazamiento en este elemento profundo. Entonces voy a agregar algún texto ficticio dentro de esta caja. Aquí voy a añadir párrafo de 500 palabras. Lorim 500 W. Y voy a poner este archivo. Después de configurar este archivo, como puedes ver, es desbordamiento de nuestro contenedor. Para resolver este problema, voy a usar la propiedad overflow. Aquí voy a usar overflow, y voy a usar auto value. Si configuro este archivo, ahora puedes ver la barra de desplazamiento vertical. Y ahora quiero extraer el valor scroll de este elemento profundo. Supongamos que me desplace este contenido poco desde la dirección YXS, y ahora quiero extraer el valor de Scrollto de este Para extraer el valor, necesitamos saltar a la etiqueta script. Entonces aquí, voy a escribir guión. Dentro de esta etiqueta script, al principio, voy a apuntar a esta casilla usando su nombre de clase. Entonces, para escribir el selector de consulta de punto de documento. Dentro de las prensas redondas, dentro de los códigos dobles, voy a pasar caja de puntos. Entonces voy a usar un método. Voy a usar Agregar incluso oyente, agregar oyente de eventos, y quiero usar el método scroll Desplazarse. Después de apuntar a esta casilla usando su nombre de clase, luego utilizo un evento, evento scroll. Y cuando los usuarios desplazan los datos, quiero llamar a una función anónima. Entonces pracma voy a llamar a una función. Función. Vestidos redondos, luego dentro del Carcis Luego dentro de la función, quiero imprimir el valor de desplazamiento en mi Consola El tipo consola dot log, consola dot, Log I las rondas I en los puertos dobles. Primero, voy a imprimir una declaración que es scroll top. Pasear por concatenación con. Y aquí tenemos que pasar la caja apuntada. Para eso, voy a crear una variable que, y nuestro nombre de variable es target. Objetivo igual a, y voy a copiar esta misma línea. Esta caja. Entonces voy a reemplazar este selector de consulta de punto de documento con variable de destino. Además, voy a usar la variable target en mi selección de consola. Objetivo. Con eso, necesitamos llamar a nuestro methodnym target dot scroll Dog Entonces si configuro este archivo y enciendo mi consola y desplace este elemento profundo, poquito, se puede ver el valor, el valor scroll. Pero el problema es que se pueden ver muchos valores. Por eso voy a usar la función clear, Console dot clean. Esta función va a borrar valores innecesarios. Si configuro de nuevo este archivo y desplace un poco este elemento profundo, ahora puedes ver el scroll a value. Es bastante similar con los métodos Y Oset y X opuestos. Aplicamos PageY Oset en la ventana de nuestro navegador, pero aplicamos scroll top en nuestro elemento deep. Eso es lo diferente. Ahora, hablemos del otro método, que es scroll led. Entonces en este elemento profundo, voy a crear otro elemento profundo. Caja DevTT también. Además, voy a darle estilo a esta caja dos elementos profundos en nuestra sección de estilo. Así que el tipo tat caja dos está en las calibraciones. Voy a usar antecedentes, antecedentes, leer. Entonces voy a usar id. con 700 pixel y altura 80 pixel. Eso es. Voy a establecer este archivo. Ahora puedes ver dentro de este elemento deep parent, tenemos otro elemento deep, y establecemos height y width 700 pixel y 80 pixel. Por eso se desborda horizontalmente desde este continer y se puede ver la barra de desplazamiento horizontal Y ahora necesitamos extraer el valor scroll left de esta barra de desplazamiento. Para eso, primero, voy a duplicar esta línea, y voy a cambiar scroll top para scroll let también, necesitamos cambiar el nombre del método, desplazarlo. Si configuro este archivo y desplace el scrorebr horizontal poco, se puede ver el valor scroll left Ahora imprime 48. Y desde la parte superior de desplazamiento, tenemos valor cero. Si me desplazo un poco la barra de desplazamiento vertical, ahora puedes ver scroll top 148 pixel y scroll solo 48 pixel. Entonces así es como podemos extraer el labio de desplazamiento y ScrotoValo Espero que ahora te quede claro. Entonces esto es por este situdal. Gracias por ver este video. Estén atentos. 39. Tutorial de JavaScriptWidth y scrollHeight: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con JavaScript, y en este tutorial, vamos a aprender dos nuevos métodos Javascript, scroll width y scroll height. Como puedes ver, tenemos un elemento profundo, y dentro de este elemento profundo, tenemos algunos datos ficticio Y cómo usamos la propiedad overflow a este elemento profundo para ocultar el contenido extra. Es por eso que anuncio desplazamiento vertical y barra de desplazamiento horizontal Y ahora quiero extraer la altura de este contenido, incluyendo los datos de desbordamiento. Supongamos que tenemos esta cantidad de datos en este contenedor. Entonces necesitamos extraer la longitud exacta de estos datos. Para eso, JavaScript introdujo un nuevo método, que es la altura de desplazamiento. la misma manera, si desea extraer el ancho de datos horizontal, debe usar el método de ancho de desplazamiento. Entonces comencemos lo práctico y veamos cómo podemos usar estos métodos. Entonces como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión if server, y ya creo un documento TML llamado index ot TML Si notas puedes ver en nuestra etiqueta corporal, tenemos una etiqueta profunda, y ella puesta en caja de identificación. Además, estilizo esta etiqueta profunda. Dijimos color de fondo cerdo con 300 pixel y altura 300 pixel. Entonces puedes ver que no hay barra de desplazamiento en este deve lement porque no tenemos contenido de desbordamiento en este desarrollo Básicamente, es un MTD. Y antes de agregar el contenido en la caja, te mostraré cómo podemos usar estos métodos. Entonces dentro de la etiqueta body, voy a escribir script tag, script. Y dentro de la etiqueta script, al principio, voy a apuntar a esta casilla usando su ID. Entonces voy a crear una variable donde y nuestro nombre de variable es target. Objetivo igual a DocumentT Coy selectt. En cambio, a la rotonda voy a pasar el nombre de identificación, cuadro de Hashtag Entonces seg a esta línea. Y ahora voy a crear otras dos variables, una para ancho de desplazamiento y otra para altura de desplazamiento. Entonces primera variable, voy a usar eso y nuestro nombre de variable es scroll con. Underscop. Igual a nuestro punto objetivo con nuestro nombre de método scroll. Semico esta línea. Entonces voy a suplicar esta línea y reemplazarla por con altura. También, tipo martillo, desplácese hacia adentro. Eso es. Y ahora voy a imprimir tanto la variable en mi consola. Para eso, voy a escribir, consola, punto, registro dentro de los roundss dentro del doble núcleo Primero, voy a imprimir pergamino con. Desplazarse mié. Entonces signo de concatenación, voy a llamar a la variable, y nuestra variable es scroll wing Y así vamos a terminar esta línea, entonces voy a conseguir esta línea, y esta vez, quiero imprimir la altura de desplazamiento. Entonces voy a sustituir por la altura. También aquí voy a pasar esta variable, scroll alto. Y ahora voy a configurar este archivo. Entonces voy a saltar al navegador y hacer clic derecho sobre él e inspeccionar, y voy a trun en Console Para que puedas ver, por defecto, imprime la altura y anchura exactas de este contenedor. Ancho de desplazamiento 300 píxeles y altura de desplazamiento, 300 píxeles, porque en nuestra sección de estilo, aquí asignamos con 300 píxeles y altura 300 píxeles. Por eso devuelve este valor. Pero esta vez, voy a incluir algunos datos ficticios en nuestra etiqueta profunda Entonces aquí, voy a escribir Lorin voy a sumar un total de 600 W, y voy a configurar este archivo Después de establecer este archivo, como puedes ver, por defecto, es desbordamiento de este contenedor. Entonces necesitamos usar la propiedad overflow en nuestra sección de estilo. Déjame mostrarte cómo. Entonces aquí escribimos desbordamiento. Pero antes de usar la propiedad overflow, como pueden ver, aún así regresa, altura de desplazamiento es de 926 pixel porque esta es la altura del contenido dentro este contenedor y nuestro ancho sigue siendo de 300 píxeles Y ahora voy a usar overflow auto value. Auto. Y si configuro este archivo, se puede ver el resultado. Después de configurar este archivo, ahora se puede ver la altura al área de desplazamiento es 2034 y desplazarse con este 283 Y si agrego algo de relleno en esta caja, déjame mostrarte. Relleno desde toda esta dirección, quiero agregar relleno de 20 píxeles. Después de ese relleno de 20 píxeles, como puedes ver, afecta nuestro resultado. Ahora desplázate con estos 323 y la altura de desplazamiento es 274. Y ahora necesitamos barra de desplazamiento horizontal. Para eso, voy a crear otro elemento profundo dentro de este elemento profundo, algún tipo deep dot box two. Y voy a darle estilo a este elemento DB. Entonces Hetype dot box dos, en el cali resiste primero voy a usar con propiedad con 400 pixel Altura 100 píxeles. Además, voy a añadir color de fondo. Tasa de color de fondo. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver nuestro pergamino con Valor convertido en 440. Además, puede ver la barra de desplazamiento horizontal en la posición inferior. Entonces así es como usando este método, podemos extraer el valor del área de desplazamiento. Podemos extraer el valor de altura de desplazamiento. Como podemos extraer scroll con Value. Entonces esto es todo para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 40. JavaScript offsetTutorial de ancho y offsetAltura: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con Javascript. Y en este tutorial, vamos a aprender sobre dos nuevos Javascript relacionados con la propiedad, que es ancho opuesto y alto opuesto. En este ejemplo, se puede ver un elemento profundo. Y en este elemento profundo, decimos frontera. Además, tenemos texto y relleno en este cuadro y un scroll vertical r. Y ahora quiero obtener altura de este elemento profundo. Quiero decir que quiero extraer la longitud de este elemento profundo de este punto a este punto. Para extraer este valor, Java Strip introduce una nueva propiedad que es de altura opuesta. la misma manera, si queremos extraer el ancho de este elemento, en ese caso, necesitamos usar la propiedad Osetewidth Si te das cuenta, puedes ver, tenemos borde de diez píxeles, área de relleno, además tenemos área de contenido y una barra de desplazamiento Oset con otra altura obsete, va a devolver el total con Oset width y Osete height devuelve el ancho y alto de un elemento en píxeles, incluyendo padding, border y Si tenemos barra de desplazamiento horizontal en la parte inferior, se va a sumar en nuestra altura. Por lo que esta propiedad va a proporcionar total dentro de la altura, incluyendo victoria fronteriza. No incluyo el área de margen. Entonces comencemos lo práctico y veamos como esta propiedad nos va a ayudar. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creé un nombre de documento estable en la Entonces, si notas en nuestra etiqueta corporal, tenemos una etiqueta profunda con cuadro de nombre de clase, y estilo esta caja Dev en nuestra sección de estilo. Aquí dijimos, entonces elevamos 300 píxeles y establecemos un color de fondo naranja. Y ahora voy a usar JavaScript propiedad opuesta anchura y altura opuesta. Entonces aquí voy a usar script. Y dentro de la etiqueta script, primero, voy a apuntar a esta caja usando su nombre de clase. Entonces voy a crear una variable donde, y nuestro nombre de variable es target. Objetivo igual al selector de consulta de punto Documen dentro de las redondas dentro de los códigos de espiga, necesitamos pasar el nombre de la clase punto BOX box box y punto y coma dos Y ahora voy a crear otras dos variables para altura opuesta de maleza y opsita, algún tipo, y nuestro nombre de variable es weed W igual al punto objetivo opuesto a la maleza. Semicron en esta línea. Ahí voy a duplicar esta línea, y la voy a sustituir por la altura. Y aquí voy a escribir target dot offsite high. Y ahora quiero imprimir este valor en mi consola. Entonces voy a escribir, consola punto, Iniciar sesión dentro de las rotondas. Dentro va el perro, voy a teclear Osete con concatenación con rueda y punto y coma para Y de la misma manera, quiero imprimir a la altura opuesta. Así que duplique esta línea y su tipo de altura opuesta. Además, voy a sustituir por con altura. Y voy a poner este archivo. Después de configurar este archivo, si enciendo mi consola, se puede ver el resultado. El W opuesto es de 300 píxeles y las alturas de desplazamiento, y la altura oppste es de 300 píxeles porque Hey asigna la misma cantidad de altura y peso a este contenedor. Pero, ¿qué? Si agrego algún sonido de borde para escribir, propiedad de borde. Y quiero agregar diez píxeles, borde sólido. Y nuestro color de borde es rojo. Si configuro este archivo, ahora puedes ver el resultado. Ahora nuestro ancho oposito se convierte en 320 píxeles y la altura oppste Además, si quiero agregar padding, sub type padding desde cada una de las direcciones quiero agregar relleno de 50 píxeles. Si configuro este archivo, puedes ver el resultado. Ahora cada uno de la dirección que en 50 Weixel relleno, también en el borde de diez píxeles, y el ancho realzado real, 303 cien Usando estas propiedades, podemos obtener altura total y la anchura total de un elemento Entonces esto es para este tutorial. Gracias por ver este video, estén atentos para el siguiente tutorial. 41. JavaScript clientTutorial de ancho y altura.: Oigan, chicos, un placer volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con Java dulce. Y en este tutorial, vamos a aprender sobre dos nuevas propiedades client height y client W. Así que como puedes ver, tenemos un desarrollo, y en este elemento deep, tenemos border content text, y padding. Además, tenemos una barra de desplazamiento. Y ahora quiero extraer la altura interior de este desarrollo. No quiero incluir la altura del borde en esta medida. Sólo quiero extraer la altura interior. la misma manera, quiero extraer el ancho interno, no este scrollbd, y no quiero agregar esta Para resolver este problema, JavaScript introdujo dos nuevos ancho de cliente de propiedad y altura de cliente Ya aprendemos sobre este tipo de propiedad en nuestro tutorial anterior, Oset ancho y altura opuesta, y el diferente es Osetew y altura opuesta proporcionan el ancho total de este elemento, incluyendo borde y barra de incluyendo borde Pero para extraer la longitud interna de este elemento, necesitamos usar la propiedad client height y client width. Devuelven el ancho y alto de un elemento en píxel, incluido el relleno, pero no el scrollbard del borde o Entonces, sin perder el tiempo, comencemos lo práctico y veamos cómo podemos usar esta propiedad. Entonces, como pueden ver lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión Lifesaver, y abro mi documento estabil anterior En nuestro anterior documento estabil, aprenderemos sobre la propiedad de ancho opuesto y la propiedad de altura de osite Y en este tutorial, vamos a extraer el ancho del cliente y la altura del cliente. Entonces como puedes ver en este cuadro D, tenemos relleno de 50 píxeles. También tenemos borde de diez píxeles, y también tenemos 300 píxeles de ancho y 300 píxeles de alto. Entonces al principio, voy a cambiar el nombre de la propiedad. Voy a sustituir la hierba Opsete por hierba cliente. Cliente nosotros. Y también, voy a sustituir a Opsethd Altura del cliente. Antes de configurar este archivo, como pueden ver, ahora Oste actual es 420 píxeles y la altura de Osete también es de 420 Pero como te dije, si usas estas propiedades y el conjunto de este archivo, ahora cliente nosotros y cliente ocultamos volveremos menos que este valor porque no va a incluir el área fronteriza. Entonces si configuro este archivo, como pueden ver, ahora se ha convertido en 400 por 400 porque esta propiedad no va a contar la zona fronteriza. Entonces esto es todo para este tutorial. Gracias por ver este video. Espero que ahora te quede claro. ¿Cuál es el uso de esta propiedad? Gracias. 42. Tutorial de JavaScript ClientX y ClientY: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con el script Java. Y en este tutorial, vamos a aprender sobre dos nuevas propiedades de JavaScript, tomas de cliente y cliente Y. Como puedes ver en este ejemplo, tenemos una ventana del navegador, y puedes ver un ratón Carsa en esta ventana Y ahora quiero extraer las coordenadas del mouse cuando mueva el mouse, de lo contrario, haga clic en cualquier parte de la ventana. Quiero obtener la posición exacta de este mouse, así que necesito extraer el X xs VLU también yxSzeF que JavaScript introdujo a Cual es cliente toma y cliente Y. Y recuerda, es trabajo solo dentro del área de viewport de este navegador Esta es el área de viewpot de este navegador. No está relacionado con la resolución de la pantalla del monitor. Se relaciona con la ventana del navegador. Y como te dije, estas propiedades están relacionadas con el evento mouse, así que va a funcionar solo con los eventos del mouse. Y todos estos son eventos de mouse con los que ya estamos familiarizados hacer clic en Haga doble clic en el menú de texto de contenido, mover el mouse, etcétera Entonces cuando usamos estos eventos, entonces podemos extraer el YXS y el video sobrante, significa clientes y **** DI view Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creé un documento ETL llamado index Por ahora, mi página EST es completamente negra. Al principio, quiero extraer las coordenadas del mouse cuando mis autos en esta sea área de arranque. Para eso, tenemos que volver a la etiqueta body y la etiqueta script tipo Hemo Y ahora necesitamos agregar un evento en nuestro documento usando el método add even listener Entonces dentro de los códigos dobles, voy a escribir documento, punto, agregar incluso oyente Después dentro de las prensas redondas, quiero agregar el evento de movimiento del mouse porque cuando abro mi mouse, porque quiero extraer el valor cuando muevo el mouse, así que escriba mouse move y punto y coma dos en esta línea Y como saben, con eso, también, hay que llamar a una función anónima. Entonces voy a crear una función tras función de coma, y dentro del Cariss, voy a usar estas propiedades, cliente a yo y ¿Qué le llevaría a variable? Tipo de suma donde, y nuestro nombre de variable es X. X igual a también en nuestra función, necesitamos pasar una variable. Entonces voy a pasar evento. Además, puedes usar taquigrafía. Entonces voy a teclear E. Así que aquí escribo E punto cliente es. ¿Entonces vamos a terminar esta línea? Y de la misma manera, vamos a extraer el valor xS. Entonces voy a duplicar esta línea y reemplazar X por Y. Además, necesitamos reemplazar cliente por cliente Y. recuerda, X e Y deben ser De lo contrario, no va a correr. Y ahora voy a imprimir valor XX e YXS en mi consola Entonces voy a escribir Consola. Registro de puntos dentro de la rotonda dentro del código duplicado, voy a escribir pedernales colon, concatenación W, valor X y Voy a duplicar esta línea, y esta vez voy a imprimir el valor Y del cliente, el cliente Y, cliente Y, la concatenación con la variable Y. la variable Y antes de configurar este archivo, voy a encender mi consola, consola EPAC Además, voy a imprimir Consola punto claro. Si no usamos la función clear, entonces va a imprimir mucho valor. Así Hemotipo Consola punto Tear Método. Semicon en esta línea. Si configuro este archivo y mis autos en mi área de ventana gráfica, puedes ver el valor Ahora puedes ver nuestro punto XX es 168 y el punto xs es 352. Si lo muevo hacia arriba, ahora se puede ver que reduce el punto YxS Y si lo muevo de arriba a la izquierda a la esquina, ahora se puede ver que el valor XXS es 13 y el valor de x es nueve Entonces así es como podemos obtener Xian un valor YX de nuestro cursor Entonces ese es el uso de estas propiedades, clientX y cliente Y. Además, puedes apuntar en un desviamiento Para este ejemplo, no utilizamos ningún desviamiento. Aquí nos dirigimos al navegador antiguo, la ventana del navegador antiguo. Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 43. Tutorial de pageX y pageY de JavaScript: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con JavaScript, y en este tutorial, vamos a aprender sobre dos nuevas propiedades, PageX y PageY Entonces como puedes ver en este ejemplo, abrimos una ventana del navegador, y en este navegador, tenemos mucho texto. Y también, puedes notar hay una barra de desplazamiento en el lado derecho. Lo que significa que hay mucho texto en este navegador. Supongamos que tenemos esta cantidad de texto en este navegador. También, te muestro los datos de desbordamiento usando fondo de color gris. Y después de pasear un poco esta página, le pongo mi ratón a eso esto y quiero extraer xx posición de este ratón, también yxsPosición de Para extraer el valor, JavaScript proporciona un total de dos propiedades. PageX y PageY. En nuestro tutorial anterior, ya aprendemos sobre clientes y propiedad de juguete del cliente. Fue bastante similar con PageX y PageY, pero hay una diferencia entre los clientes y el juguete del cliente y PageX y PageY Solo es trabajo dentro del área de madera. Pero en la propiedad PageX y PageY, si desplazo la barra de desplazamiento vertical, de lo contrario la barra de desplazamiento horizontal, va a cambiar el punto del cursor Y como te dije, estas propiedades son trabajo con solo evento mouse. Así que necesitamos usar el evento mouse para usar estas propiedades. Entonces estos son todos eventos del mouse al hacer clic en Haga doble clic en el menú contextual, mover el mouse, en MouseOver, etcétera. Entonces comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creo un documento TML llamado index dot TML Por ahora, nuestra etiqueta corporal está vacía. Entonces dentro de esta etiqueta body, primero, voy a usar la etiqueta Script. Y dentro de esta etiqueta script, quiero extraer mi punto del cursor. Cuando abro el cursor en el área de mi navegador, quiero extraer la ubicación del cursor, Xxs y YxS Para ello, necesitamos usar el método document. Documentar, y necesitamos usar un evento. Y para usar el evento, voy a escribir en el oyente de eventos Es que las direcciones redondas, Está en los códigos de dole, de lo contrario, códigos únicos. Aquí, voy a pasar el nombre del evento, que es el modo mouse. Como puede ver, necesitamos cerrar la cotización. Tenemos que moverlo dentro de las comillas simples lo contrario código total. Entonces necesitamos llamar a una función. Una función anónima. Entonces la función de tipo está en la carirasa. Es una función anónima. Entonces dentro de la función, necesitamos tomar una variable como una Eva. Entonces para et, voy a pasar P, eso es todo. Y aquí necesitamos tomar total dos variables para almacenar las dos V donde nuestra primera variable n es X, X igual a E punto Página X. Entonces sí empiezo esta línea, y esta vez, voy a escribir otra variable pagey página y igual a E punto, página Y. Y ahora voy a imprimir esto a valor en mi área de consola Entonces voy a escribir Consola, punto, registro dentro de los vestidos redondos, dentro de los códigos dobles. Primero, voy a escribir page x value, page x value. Punto y coma. Entonces voy a usar concatenación sine y nuestro nombre de variable semicolo en Después duplico esta línea, y voy a sustituir el pH h por HY. Además, es necesario reemplazar el nombre de la variable. Y. Antes de configurar este archivo, aquí necesitamos escribir console dot Tear method, Console dot par. Este método va a despejar el paseo innecesario que se imprime en nuestra consola. Antes de configurar este archivo, voy a encender la consola, inspeccionar la consola. Y ahora voy a configurar este archivo. Después de que puse este archivo, si Yo Ella mi Carter en esta ventana, aquí se puede ver el valor. Puede ver el valor de la página H es 254 y el valor de la página Y es 357. Esto es bastante similar a nuestros tutoriales anteriores. Ya estamos familiarizados con eso. Se podría pensar que es bastante similar con cliente ts y cliente Y, pero hay un diferente. Entonces voy a crear otra variable. Voy a duplicar esta sección, y esta vez, voy a t Al principio, voy a cambiar el nombre de la variable, A, y voy a escribir E punto Clieni Entonces voy a cambiar Y por B, y esta vez voy a escribir cliente Y. Y también voy a imprimir clientis y ClenyVu Entonces voy a duplicar esta línea de dos. Y voy a sustituir página con cliente. Clientes V, también cliente IV. Y ahora voy a duplicar toda esta sección, y voy a sustituir a Pasegs El cliente toma valores. Además, necesitamos reemplazar los valores de variable, A y Clienty, y necesitamos reemplazar Y por B. Después de establecer este archivo, si coloco mis autos sobre esta ventana, puedes ver el resultado Puedes ver que el cliente toma valor y el valor de la página sigue siendo pecado. Además, el valor de PageY y el valor del juguete del cliente siguen pecando. ¿Pero qué? Si agrego algún párrafo. Entonces dentro de la etiqueta body, voy a usar el párrafo de etiqueta P. Y luego voy a atar LM, y voy a agregar mil palabras. Y voy a poner este archivo. Después de configurar este archivo, como pueden ver en mi documento, hay una palabra de desplazamiento en el lado derecho. Después de establecer este archivo, si sobrepasé mis autos en algún momento, supongamos que este punto, se puede ver que el valor de PageY es 275 y el valor del cliente es 275. ¿Pero qué? Si me desplazo hacia abajo en mi página, ¿entonces qué? Entonces voy a desplazarme hacia abajo en mi página. Después de desplazarse hacia abajo en esta página, como puede ver, ahora el valor de la página Y se convierte en 1016, pero el valor del juguete del cliente sigue siendo el mismo 275 Esa es la diferencia entre estas dos propiedades, juguete del cliente y los clientics Cliente propiedad de juguetes, de lo contrario, clientes propiedad trabajo en área de ventana, pero página I propiedad, otra manera, página x propiedad trabajo en documentaria Esa es la diferencia básica entre estas dos propiedades. Básicamente, devolvió la altura de Carsa según el tamaño del contenido, pero devolvió la altura del carsar según el tamaño de la ventana del navegador Va a medir la distancia desde la parte superior de la ventana, pero va a medir la distancia desde la posición superior del contenido. Esa es la principal diferencia. Y de la misma manera, va a funcionar en posición horizontal. Entonces si agrego un elemento profundo, smotype DV, y voy a asignar N ID, ID igual a box Y si estilizo este elemento DV, así que volvamos a la sección de estilo. Arriba en el título, voy a escribir estilo. Es esta etiqueta de estilo, primero, voy a apuntar a esta casilla usando su nombre de identificación tiene etiqueta, caja. Entonces dije que la liv dice, al principio, voy a asignar con 900 píxeles Altura, altura, 100 píxeles. Y también, voy a decir que es un color de fondo. Fondo rojo. Si configuro este archivo, aquí se puede ver, ahora proporciona una barra de desplazamiento horizontal Y si yo sobre mi cursor en esa posición, pueden ver, ahora nuestro valor es 86. También el valor de nuestro cliente es 86. ¿Pero qué? Si desplazo mi navegador en dirección horizontal y luego vuelo el cursor en esa posición, ahora puedes ver la diferencia básica Ahora, el valor de la página X es 273 y el valor clientex es 97. Porque como te dije, ClientExpriety midió la distancia desde el borde del navegador, pero la página x propiedad midió la distancia desde la posición inicial del contenido Por eso es impresión diferente a. Espero que ahora este concepto sea claro para ti. Entonces gracias por ver este video. Estén atentos para nuestro próximo tutorial. 44. Tutorial de JavaScript screenX y screenY: Hola, chicos. Me alegro de verte. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con el barrido de Java. Y en este tutorial, vamos a aprender sobre dos nuevas propiedades relacionadas con Java Sweep. Pantalla X y pantalla Y. Como puedes ver en este ejemplo, tenemos una pantalla de monitor, y en esta pantalla de monitor, abrimos un navegador. Y en este navegador, se puede ver un puntero de cursor. Y ahora quiero extraer la coordenada del cursor del ratón. Quiero extraer el punto XX y el punto YXS de este ratón Karsel Pero esta vez vamos a medir la distancia desde el área del borde de la pantalla, no la edad del navegador. Para eso, Java Strip introdujo dos propiedades screenX y screen Y. En nuestro tutorial anterior, ya aprendemos sobre propiedades similares, pero estas propiedades son medir la distancia desde el navegador H. Ya aprendemos sobre los clientes y el cliente Y propiedad, pero la diferencia es clientes y cliente Y propiedad trabajan en área viewpot Se va a medir la distancia desde el borde de la ventana gráfica Solo funciona en el área de la ventana gráfica del navegador, pero la propiedad screenx y screen Y funcionan en la resolución del monitor Es trabajo en resolución exacta de pantalla. Y como ustedes saben, estas propiedades están relacionadas con él eventos del ratón. Para eso, necesitamos usar estos eventos, y ya estamos familiarizados con eso. Entonces comencemos la práctica y veamos cómo podemos extraer el valor de la resolución de la pantalla. Cómo podemos extraer posición del cursor según el área del borde de la pantalla. Así que vamos a saltar al editor de código de Visual Studio. Entonces como pueden ver, lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y abrí mi documento TML anterior llamado index dot html En nuestro tutorial anterior, aprenderemos sobre la propiedad de PageX y de la página WI. Además, aprendemos sobre las garrapatas del cliente y la propiedad del cliente Di. Y ahora quiero extraer mi distancia del cursor según el tamaño de la pantalla. Quiero decir quiero extraer el valor XX de mi cursor de acuerdo a este punto, este tamaño de pantalla. Desde el lado del labio, quiero medir el punto del cursor. Entonces primero, voy a quitar las líneas innecesarias, y voy a reemplazar propiedad PageX con pantalla de pantalla X. Además, voy a quitar esta línea y Hemotype screen x value is y vas a imprimir el valor en mi Entonces antes de configurar este archivo, voy a abrir mi consola, y quiero configurar este archivo. Después de configurar este archivo, cuando abro mis autos están en mi pantalla, aquí, se puede ver el resultado. Ahora puedes ver que el valor de ScreenX es 1357. Han sido 1357 píxeles. Y si lo muevo en la esquina derecha, lado derecho, ahora nuestra pantalla ex Vo es 1918 porque nuestra resolución de pantalla es 1920 5.080, e imprime screeng Wow Y si me quito mi casa fuera del navegador, ahora no va a funcionar. Es trabajo solo en el área de la ventana del navegador. Midió la distancia cuando muevo mi cursar dentro del área de la ventana gráfica la misma manera, podemos extraer YxS W necesitamos duplicar esta línea, y necesitamos reemplazar la variable N X por Y, y aquí necesitamos usar la propiedad screen Y. Entonces voy a duplicar esta línea en mi consola, y voy a imprimir la pantalla Y. Pantalla Y. Y voy a configurar este archivo. Después de configurar este archivo, si abro mis autos están en esa posición, aquí se puede ver el valor de la pantalla Y desde la parte superior. Aquí puedes ver que el valor YX es de 651 píxeles. Se va a medir la distancia desde la resolución exacta de la pantalla. Espero que ahora te quede claro cuál es el uso de estas propiedades. Gracias por ver este video. Estén atentos para el siguiente tutorial. 45. Tutorial de JavaScript offsetX y offsetY: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con el script Java. Y en este tutorial, vamos a aprender sobre dos nuevas apropiaciones de JavaScript. Oset eggs y Oset Y. Entonces como puedes ver en este ejemplo, tenemos una ventana del navegador, y dentro de esta ventana del navegador, creamos elemento deep Y en este elemento profundo, se puede ver un puntero del ratón. Y ahora quiero extraer las coordenadas del ratón. Pero esta vez, quiero extraer la coordenada del ratón de acuerdo con el área profunda. Necesitamos extraer el valor acuerdo con la posición profunda, no la ventana del navegador, y tampoco la resolución de la pantalla. Para eso, Javastrep introdujo dos nuevos huevos de propiedad Oset y Oset Y. Ya aprendimos sobre propiedades similares en nuestro en El texto del cliente y el juguete del cliente también pantalla x y pantalla y. Clienex y ClienyPbit proporcionan el valor de acuerdo con el tamaño de la ventana del navegador Quiero decir que va a medir distancia desde el punto de acceso del navegador, y screenx y screenyPbit proporcionan el valor desde el ancho de pantalla y el alto de la pantalla Y ya estamos familiarizados con eso. Y como saben, todas estas son propiedades relacionadas con eventos de mouse. Necesitamos usar el evento mouse para usar esta propiedad. Y ya estamos familiarizados con estos eventos del ratón. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos extraer el valor de Xxs y YxS usando Oset X propriety y Oset Y propriety Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creé un documento estable, llamado index dot Entonces como puedes ver, en nuestra etiqueta corporal, tenemos una etiqueta profunda con cuadro de nombre de clase. Y en nuestra sección de estilo, ya estilizo este elemento box. Aquí decimos con 500 píxeles y altura 400 píxeles. También, dije borde y color de fondo. Así que vamos a saltar a la etiqueta script. Script y al principio, voy a crear una variable donde y nuestro nombre de variable es target. Objetivo igual a, quiero apuntar a este pantano empinado. Entonces aquí, voy a usar el método qui selectra. Selector Documin punto i. Después dentro de las rondas, dentro del doble curso, lo contrario, solo curso, voy a escribir punto box. Vamos a seleccionar este elemento D usando su nombre de clase. Entonces punto y coma hacer en esta línea. Y ahora voy a agregar un evento a esta variable objetivo. Para eso, voy a escribir target dot. Voy a usar un nombre de método add event listener, add event listener Luego dentro de las prensas redondas, nuestro nombre de evento es el nombre del mouse. Coma, y aquí voy a llamar a la función novos. Y en esta función, voy a pasar una variable. Como forma corta, voy a usar P. Y ahora voy a crear dos variables, que van a almacenar nuestro xx cero y XS. Entonces voy a crear y nuestra variable n es X. X igual a primero, quiero obtener el xx cero tipo Et opuesto X. Luego semicon en esta línea Entonces voy a duplicar esta línea, y esta vez, voy a reemplazar X por Y. Y esta vez, quiero almacenar el valor de Y X. Entonces aquí estoy tipo Oset Y. Y ahora después de guardar el valor, quiero imprimir tanto el valor en mi consola Consola, punto, registro dentro las prensas redondas dentro del código único. Primero, voy a imprimir Osete H. Oset valora colon, Cgation seno, y voy a pasar la variable X punto y coma dos Entonces duplico esta línea y sustituyo X por Y. Opuesto Y. Además, es necesario reemplazar el nombre de la variable. Después semigón para terminar esta línea. Antes de configurar este archivo, voy a encender mi consola, inspeccionar la sección Consola. Como puedes ver en nuestra consola, no hay nada. Pero después de establecer este archivo, si hober mi cursor sobre este elemento profundo, aquí se puede ver el valor Vaya, se me olvidó algo. Necesitamos despejar nuestra sección de OSC. De lo contrario, va a imprimir todos los valores a la vez. Así que aquí escriba consola punto Tear Method. Va a limpiar nuestras líneas innecesarias. Después paso este archivo, si abro mis autos sobre este elemento profundo, aquí, se puede ver el valor x opuesto y el valor oste Y El valor de Oppste X es 230 y el valor de Oppste Y es 219. Si muevo mis tarjetas están en la esquina del portátil, arriba mover mis tarjetas están en la esquina del portátil, como pueden ver, ahora entrenó Oset X dos y Osete Y también también Entonces así es como funcionan estas propiedades en JavaScript. Espero que ahora te quede claro cuál es el uso de la misma. Gracias por ver este video. Estén atentos para el siguiente tutorial.