Proyecto de JavaScript para dummies: marca una página

1. INTRODUCCIÓN: Este es el tercer proyecto de nuestra serie JavaScript y el proyecto es marcar una página. Los objetivos de aprendizaje de este proyecto es que vamos a aprender a crear, agregar y eliminar elemento de estimación usando JavaScript, y también podemos aprender cómo puedes hacer que nuestro elemento de estimación sea editable en JavaScript. Estos son los aprendizajes clave que vamos a tener en este proyecto 2. Crear un marcador de página: Entonces este es el proyecto que estamos construyendo en este video. Entonces nombro a este proyecto como marcador una página. Entonces, lo que esto realmente hace, es bastante simple. De hecho, puedes agregar tus marcadores a esta de tu URL Entonces si solo voy ahí abajo y copio la URL desde aquí y voy a nuestro proyecto. Y aquí, si solo hago clic en agregar marcador, agregará esta URL como marcador. Bien. Y si trato de hacer lo mismo, pero sin el SGTPS bien, así que ahora si hago clic en agregar marcador, realidad nos dará una advertencia de que tu entrada no es una URL válida Bien. Y de manera similar, si no agrego nada a esto y hago clic en el agregar marcador, seguiremos teniendo una alerta o para ingresar una URL válida aquí. ¿Bien? De igual manera, si vuelvo a agregar la URL aquí, puedo eliminar esta desde aquí directamente y también puedo editar esta desde aquí. Y lo interesante es que para editar la URL, no tengo que agregar ningún prompt aquí. Puedo editar directamente la URL desde aquí. Entonces digamos que si agrego Google aquí y hago clic en Guardar, se agregará directamente. Ahora puedes ver esto si hago clic en esto, no podemos editar esta parte. Pero si solo hago clic en el botón editar, ahora esta parte es editable Bien, así que ahora vuelvo a hacer clic en guardar. Y si agrego los múltiples marcadores aquí, permítanme agregar el segundo enlace aquí Y permítanme añadir también el tercer enlace. Así que en realidad estoy usando la misma URL en este momento, pero puedes ir aquí con una URL diferente aquí también. Todo bien. Entonces, si quería eliminar todos los marcadores juntos, lo que puedo hacer, simplemente puedo hacer clic en eliminar todos los marcadores aquí, y ahora no podrás ver ningún marcador ¿Bien? Entonces esto es lo que vamos a construir en este video. Bien. Entonces antes que nada, tenemos que saber que lo que vamos a estar aprendiendo en este proyecto así que en este proyecto, el concepto clave que tenemos es que vamos a aprender a crear el elemento EstiML en JavaScript, y también agregar el elemento a otro elemento , borrando el elemento EstiML de otro elemento usando Y también, vamos a aprender cómo podemos hacer que un elemento sea editable ¿Bien? Entonces este es el concepto clave que vamos a estar aprendiendo en este proyecto. Entonces ahora, antes que nada, lo que tenemos que hacer, voy a abrir mi código VS. Todo bien. Y ahora tengo que cambiar el tamaño de esto a la pantalla completa. Todo bien. Y ahora mismo puedes ver aquí estamos teniendo el índice StimlFle y también estamos teniendo nuestro estilo punto Y como sabes, al igual que nuestros proyectos anteriores, solo trabajamos en la parte JavaScript del proyecto. ¿Bien? Entonces ya hemos hecho la parte de estimación y también la parte CSS de punto estilo. Bien, ahora tenemos que trabajar solo en nuestro JavaScript. Bien, entonces ahora voy a ejecutar este proyecto primero. Haga clic en abrir con el servidor en vivo. Bien, entonces este es el proyecto que tenemos ahora mismo de nuestro lado estimal, y a esto le sumamos CSE, esto va a quedar así ¿Bien? Entonces aquí como puedes ver aquí que en nuestra parte de estimación, estamos teniendo una entrada aquí, entonces tenemos estos dos botones, y luego vamos a tener nuestros marcadores ¿Bien? Entonces ahora mismo, no hemos agregado nada. Por eso no tenemos nada en los marcadores. Pero si vuelvo a nuestro código estimal, aquí, podrás ver nuestra estructura estimal Entonces básicamente, estamos empezando por el rubro aquí, y después de esto, tenemos nuestro contenedor principal, y todo está dentro de este elemento principal. Entonces dentro de este elemento principal, estamos teniendo dos cosas. El primero es el formulario en el que estamos obteniendo nuestra entrada y también estos botones que tenemos en el marcador y borran todos los marcadores Y en el elemento sección, básicamente estamos teniendo un encabezado que es un marcador, y luego estamos teniendo la lista debajo aquí ¿Bien? Y usando código JavaScript, estaremos agregando los elementos de la lista a nuestra lista bajo. ¿Bien? Entonces, ¿cómo vas a hacer esto? Es bastante simple. Entonces esta es nuestra estructura estimal, y al final, en realidad estamos agregando nuestro archivo JavaScript principal, y también estamos teniendo nuestros CSS de puerta estilo Así que ahora simplemente voy a vincular nuestro estilo punto CSS aquí en nuestro proyecto. Entonces, si guardo esto y si vuelvo al navegador, ahora podrás ver que así es como se ve nuestra interfaz de usuario, y se ve realmente genial. Entonces voy a eliminar esta pestaña. Bien, entonces ahora mismo, este proyecto no está funcionando. ¿Bien? Entonces, si trato de agregar algo a esto, y hago clic en Agregar marcador, puedes ver que no está haciendo nada. Entonces, básicamente, la interfaz de usuario de nuestro proyecto está lista, pero no es funcional. Entonces estaremos haciendo esto funcional con la ayuda de JavaScript. ¿Bien? Así que vamos a volver a entrar en nuestra documentación que cómo vamos a hacer las cosas aquí. Entonces en la documentación de nuestro marcador una página, lo primero que tenemos es el propósito de este código. Entonces, básicamente, este código está haciendo tres cosas. Entonces este código básicamente se está comportando como un administrador de marcadores que permitiría al usuario agregar URS válidos en el marcador, y también puedes editar o eliminar los marcadores individuales y borrar los marcadores individuales y toda la lista de marcadores Lo segundo es que debemos tener la validación de entrada para que podamos asegurarnos de que solo estamos agregando el URS válido. Y después de eso, tenemos nuestra estructura de estimación que ya hemos hecho, y luego tenemos el estilo CSS que ya está hecho de mi lado, y no tienes que preocuparte por esto porque voy a estar agregando esto en recursos, y después de eso, tenemos nuestro código JavaScript. Entonces en el código JavaScript, he dividido esto en los cinco pasos diferentes. Entonces el primero es bastante obvio para seleccionar elementos de EstiML, igual que nuestros proyectos anteriores Y después de eso, podemos tener la validación de URL. También, podemos cambiar el número de paso de esto. Podemos hacer la validación en el último o también podemos agregar esto en el segundo paso también. Y luego vamos a tener una función que agregaría el marcador, y luego vamos a tener la función que eliminaría todos los marcadores y luego vamos a agregar oyentes de eventos. ¿Bien? Entonces tenemos que anotar nuestro código en base a estos pasos. ¿Bien? Así que ahora voy a saltar al código VS. Y aquí, lo que tenemos que hacer tenemos que añadir el archivo principal de Js. Y dentro del archivo principal dot js, voy a agregar los pasos aquí. El primero es en realidad seleccionar elementos estéticos aquí. Y el segundo paso es básicamente validar la URL. Y el tercer paso sería agregar un marcador. Y después de eso, vamos a eliminar todos los marcadores, y en el último, vamos a tener oyente de eventos Todo bien. Perfecto. Entonces lo primero que tenemos que hacer en nuestro código es básicamente seleccionar los elementos de estimación que creemos que podríamos requerir en nuestro código JavaScript. Entonces voy a entrar en nuestro archivo de estimación de índice. Y a partir de aquí, en realidad buscaré los elementos que requeriría en mi código JavaScript. Lo primero sería la entrada. Eso es obvio, y luego vamos a tener ambos botones, agregar marcador y eliminar todos los marcadores, y luego vamos a necesitar también esta lista desordenada Entonces estos son los cuatro elementos que creo que vamos a requerir. También podemos requerir los otros elementos también. Pero ahora mismo solo accede a estos cuatro elementos aquí. ¿Bien? Entonces lo primero que voy a volver a entrar en el código JavaScript. El primero, vamos a acceder a nuestro insumo. Bien, así como sabemos que para acceder al elemento, usaremos document, get element by ID method, y luego tendremos que agregar el ID de ese elemento. Bien, entonces esta es la primera. Y el segundo es en realidad el botón de agregar marcador. Entonces voy a nombrarlo como botón de agregar marcador, y vamos a copiar este código de aquí. Bien, así que también vamos a hacerlo. Así que ahora vamos a agregar el botón de eliminar todos los marcadores Vamos a copiar esto de nuevo. Creo que ya está copiado. Nosotros sólo lo pondremos aquí. Y luego también necesitamos la lista de marcadores. Perfecto. Entonces voy a conseguir las identificaciones de aquí. Entonces para la entrada, estamos teniendo esta entrada de marcador ID. Pongámoslo aquí, y para nuestro botón de ocho marcadores, estamos teniendo este ID. Vamos a copiar esto de aquí y ponerlo aquí, y luego tenemos botón de borrar todo en nuestro código de estimación. Y pongámoslo aquí en nuestro botón. Y en el último estamos teniendo lista de marcadores. Entonces simplemente vamos a copiar esto de aquí otra vez y solo ponerlo aquí. Perfecto. Bien, así que ahora solo para validar, voy a agregar el registro de la consola aquí para comprobar que estoy accediendo a todos los elementos o no. Bien, entonces voy a anotar la entrada de marcador. Vamos a copiar esto. Entonces este será el botón Agregar. Entonces este será el botón de borrar. Y también podemos tener lista de marcadores. Lo siento, lista de favoritos aquí. Bien. Así que ahora vamos a hacer clic en Guardar y ahora tenemos que volver a nuestro proyecto en el navegador. Y pongamos esto en el modo de pantalla completa. Y ahora vamos a hacer clic en el inspeccionar aquí. Y aquí tenemos que ir dentro del registro de la consola. Y aquí puedes ver aquí que estamos accediendo con éxito a todos los elementos que requerimos en estos momentos. Bien, ahora vamos a volver a nuestro código. Bien. Entonces voy a hacer esta parte de validación en la última, ahora mismo, voy a trabajar en agregar un marcador y eliminar todos los marcadores y estos oyentes de eventos Y luego en la última, agregaría aquí esta función de validación. ¿Bien? Entonces voy a definir una función aquí. Agregar marcador. Perfecto. Y de manera similar, vamos a agregar la función para eliminar todos los marcadores Todo bien. Y luego también agregaremos oyentes de eventos aquí. ¿Bien? Entonces, para agregar marcador, el oyente de eventos funcionaría en el botón Agregar marcador Voy a dar click en el botón Agregar Marca. Vamos a tener agregar oyente de eventos aquí. Vamos a agregar el evento aquí, eso sería click event. Y luego vamos a sumar nuestra función. Eso sería agregar marcador aquí. Perfecto. Y de manera similar, vamos a agregar el oyente de eventos en nuestro botón de borrar Vamos a agregar agregar oyente de eventos. Será en camarilla, y luego vamos a agregar nuestra función aquí Perfecto. Ahora vamos a simplemente hacer el registro de la consola aquí para verificar que si nuestros oyentes de eventos están funcionando o no Entonces esto va a estar agregando marcador, y simplemente voy a copiar esto de aquí. Simplemente agregaré esto aquí como eliminar todos los marcadores Perfecto. Entonces ahora vamos a volver a nuestro proyecto en el navegador. Y sólo voy a reformular la página. Y ahora solo vamos a hacer clic en agregar marcador aquí. Así que ahora, como puedes ver aquí que nuestra función de marcador de anuncios y también el oyente de eventos está funcionando De igual manera, voy a dar click en Eliminar todos los marcadores, y puedes ver esto estamos teniendo nuestro registro de consola Entonces simplemente significa que nuestra función y oyente de eventos está funcionando Bien, entonces ahora vamos a volver a nuestro código VS. Y ahora vamos a agregar las funcionalidades en nuestra función add bookmark, ¿de acuerdo? Entonces en nuestra función de marcador Ed, lo primero que tenemos que hacer es obtener la entrada que estamos teniendo en nuestro campo de entrada aquí. Entonces tenemos que obtener la entrada de aquí, y luego tenemos que pasar esto a nuestra función. Entonces, cómo vamos a hacer esto es bastante sencillo. Primero, vamos a crear lead aquí tenemos que crear la variable, así puedo nombrarla como la URL o también un valor de marcador o algo así. Todo bien. Como sabemos que estamos obteniendo la entrada en nuestro elemento de entrada de marcador. Así que vamos a anotar ese nombre, entrada de marcador, y también sabemos que para obtener el valor del elemento de entrada, tenemos que anotar el valor de punto. Todo bien. Ahora lo primero que tenemos que hacer es probar si nuestra URL está funcionando perfectamente o no. Así que vamos a volver a un navegador aquí, vamos a hacer clic en Ins vamos a volver a consolar. Ahora voy a agregar algún valor aquí ya que aquí no hemos agregado ninguna validación, así que podemos anotar cualquier cosa ahora mismo. Así que hagamos clic en Agregar marcador, y puedes ver esto estamos cetting nuestro valor de entrada desde aquí Perfecto. Todo bien. Entonces ahora lo que tenemos que hacer tenemos que crear el lement. Entonces si vuelvo a mi expediente de estimación, y como pueden ver aquí, que aquí sólo estamos teniendo la lista desordenada. Bien. Y lo que tenemos que hacer aquí, básicamente tenemos que crear el elemento listado con la ayuda de JavaScript, y dentro de esos elementos listados, vamos a tener nuestro texto en él. ¿Bien? Y también vamos a tener nuestros botones también, borrar y editar botón también. Pero ahora mismo, sólo vamos a agregarle el texto. ¿Bien? Lo primero que tenemos que hacer, tenemos que crear el elemento list. Entonces, ¿cómo creamos el elemento list es bastante simple? Voy a crear una variable aquí, eso sería un marcador. Elemento. Entonces aquí voy a usar un método. Entonces antes que nada, voy a anotar documento porque como sabemos que para acceder a cualquier cosa en la cúpula, tenemos que empezar las cosas con documento, y luego vamos a anotar tot entonces voy a anotar, crear método de elemento aquí Perfecto. Y quiero que cree aquí el elemento list. Entonces básicamente, este método que tenemos crearía el elemento para nosotros. ¿Bien? Y aquí, lo que tengo que hacer, voy a necesitar hacer una cosa más aquí. También voy a necesitar crear un elemento de párrafo. Voy a nombrarlo como marcador, párrafo, y vamos a crear el elemento de manera similar. Simplemente vamos a copiar esta parte y la vamos a poner aquí y en vez de la lista, vamos a tener el párrafo aquí. Ya que también necesitamos dos elementos más, porque tenemos que agregar el botón de borrar y el botón agregado también, así que vamos a agregar estos botones aquí. Voy a tener este botón aquí, así que vamos a anotar botón let delete. Y básicamente, aquí vamos a hacer lo mismo, y este será el botón. Y de manera similar, vamos a agregar botón agregado aquí. ¿Bien? Tenemos que agregar el documento, después tenemos que usar el método Create element, luego dentro de él, tenemos que agregar el botón. Bien, entonces lo único que necesito hacer aquí es en realidad tener que crear un elemento div para mis botones. ¿Bien? Entonces puedo escribir esto como contenedor de botones, y este sería el desarrollo. Entonces vamos a anotar documento, crear, elemento. Y ahora lo que tenemos que hacer tenemos que anotar el desarrollo. Bien. Así que hemos creado todos los elementos que requerimos cada vez que estamos agregando nuestro marcador. Bien. Entonces ahora mismo, sólo para que sea sencillo, yo haría una cosa aquí. Lo primero que tengo que hacer es anotar la lista de marcadores que tenemos aquí. Bien, eso tenemos aquí. Entonces ahora lo que tengo que hacer, quería agregar mi elemento list dentro de mi lista de favoritos. ¿Bien? Entonces, ¿cómo puedes hacer esto? Es bastante simple. Simplemente agregará un método aquí que se anexa hijo. ¿Bien? Y tengo que añadir el paréntesis ahora Y aquí voy a pasar el nombre del elemento, que quiero agregar en mi lista de favoritos. Entonces quiero agregar este elemento de marcador. Entonces simplemente voy a pasar esto aquí. Será elemento marcador. Perfecto. Entonces ahora vamos a ejecutar nuestra función y vamos a ver si esto está funcionando perfectamente o no. Obviamente, no va a tener ningún dato en este momento, pero al menos sabemos que estamos agregando el elemento list a order list. Entonces ahora tenemos que volver a hacer clic aquí en el Spector. Y aquí lo que tenemos que hacer. Todo bien. Ahora mismo, puedes ver aquí que no tenemos nada en nuestra lista de abajo. Así que solo hago clic en el botón de agregar marcador. Ahora, podrás ver que hemos agregado el ítem de la lista aquí. Obviamente, no tiene nada porque no he agregado ningún dato a esto, pero puedes ver esto, está agregando el elemento aquí. De igual manera, estamos teniendo el segundo elemento, luego tenemos el tercer elemento, así sucesivamente. Puedes agregar el elemento de la lista así y lo hemos hecho con éxito. Ahora vas a volver a un código. Y obviamente tenemos que sumar los datos a esto, bien. Ahora lo que tengo que hacer, agregaría el elemento párrafo en mi elemento bookmark, y ¿cómo vamos a hacer esto de la misma manera? Vamos a anotar un padre-hijo y aquí dentro, voy a pasar el párrafo de marcador. Perfecto. Todo bien. Y dentro del párrafo del marcador, en realidad paso el contenido del texto, y el contenido del texto será nuestra URL. Así que simplemente voy a pasar la URL aquí. Perfecto. Ahora si solo vuelvo y si simplemente hago clic en nuestro contenedor principal, da clic en la sección, luego lista inalterada Ahora cuando haga clic en el agregar marcador aquí, también tendrá el párrafo que estará dentro del elemento list, y dentro de nuestro párrafo, vamos a tener nuestro contenido que está escrito en la URL. Así que vamos a hacer clic en agregar marcador, y ahora podrás ver nuestro contenido dentro de esto. Puedo cambiar el valor aquí para poder anotar. Este valor. Y recuerda, ahora mismo, no tenemos ninguna validación aquí, así que básicamente podemos anotar cualquier cosa en esto. Así que vamos a hacer clic en Agregar Marcador nuevo y puedes ver esto. Estamos teniendo nuestros datos aquí en el marcador, y está funcionando perfectamente. Bien. Entonces también quería agregar dos botones aquí, que es el botón de borrar que también es el botón Editar. Entonces, ¿cómo vamos a hacer esto? Es bastante simple. Yo agregaría contenedor de botones y dentro del contenedor de botones, me gustaría agregar mi botón de borrar y el botón editado. Entonces lo primero que me gustaría agregar es que será muy probablemente dit button. ¿Bien? Y de manera similar, agregaría el botón de borrar. Todo bien. Entonces ahora puedes ver esto ya que hemos agregado nuestro botón dit y el botón de borrar en mi contenedor de botones, ahora voy a agregar este contenedor de botones dentro de mi elemento marcador. ¿Bien? Entonces, ¿cómo vas a hacer esto? Es bastante simple. Simplemente vamos a copiar esto desde aquí. Y lo voy a poner aquí, y aquí sólo voy a cambiar el valor, y esto va a ser contenedor de botones. Así que solo guardemos esto y ahora solo volveremos a nuestra vista previa. Simplemente hagamos clic en nuestro marcador de anuncio. Y ahora puedes ver esto estamos teniendo estos botones, pero obviamente no hemos agregado ningún dato a esto. ¿Bien? Entonces ahora lo que tenemos que hacer, vamos a volver aquí y aquí en mi botón de borrar. Yo agregaría el contenido del texto, y esto será borrado. Y de manera similar, yo haría lo mismo por botón agregado. Vamos a agregar contenido de texto y esto se agregará. Perfecto. Ahora vas a volver. Y si solo hago clic en agregar marcador de nuevo, probablemente debería agregar nuestro contenido aquí, pero creo que he cometido algún error aquí. Voy a volver al registro de la consola. Todo bien. Entonces estamos teniendo este tipo de error aquí. El contenido del texto no es una función. Bien. Bien, bien. Entonces he cometido un error aquí. Esta es en realidad la propiedad, no el método. Necesito asignarlo así. Ahora bien, esto probablemente debería funcionar. Solo guardemos esto y volvamos a nuestro proyecto y hagamos clic en Agregar Marcador. Perfecto. Ahora puedes ver esto estamos teniendo nuestros botones aquí. Obviamente, estos botones no son funcionales en estos momentos, pero lo hemos agregado en nuestro front end. Una cosa que todavía tengo que hacer es agregar el tipo de botón a botón. Entonces esto va a ser podemos agregar el tipo de botón aquí y este será botón. Bien. Así que también voy a agregar esto para el botón de borrar. Perfecto. Bien. Entonces una cosa que tengo que agregar aquí también está dentro de nuestro inicio CSS es en realidad una clase aquí. Bien, entonces tengo que agregar esto en nuestro contenedor. Entonces, ¿cómo vamos a agregar la clase aquí en nuestro código? Eso también es bastante sencillo lo que tendrías que hacer aquí. Agregarás el nombre de contenedor, que es contenedor de botón, y luego vamos a anotar clase aquí. Bien, entonces no estoy seguro qué método usamos para agregar el nombre de la clase. A lo mejor es el nombre de una clase o la lista de clases. Bien, entonces vamos a volver al navegador y buscaremos esto en el Google. Entonces vamos a anotar cómo agregamos el nombre de clase en JavaScript. ¿Bien? Para que podamos investigar el flujo So. Bien, entonces creo que necesitaremos usar el método class list. Perfecto. Ahora vamos a volver a nuestro código y vamos a anotar la lista de clases aquí. Entonces simplemente usaremos el método add. Y aquí, lo que tenemos que hacer tenemos que añadir el nombre de nuestra clase, que en realidad es, si puedo volver al estilo o CSS, Button container. Así que voy a entrar aquí en nuestro archivo JavaScript. Solo agreguemos esto. Y así es como podemos agregar el nombre de la clase a nuestro limate estimado usando JavaScript. Perfecto. Ahora vamos a volver al navegador y veamos si esto se agrega o no. Entonces ahora vamos a entrar en el inspector y aquí, simplemente haga clic en el principal, haga clic en nuestra sección, haga clic en la UL. Perfecto. Ahora vamos a hacer clic en Agregar Marcador aquí. Perfecto. Y ahora se puede ver que estamos teniendo este espacio aquí en nuestros botones. Simplemente quiero decir que hemos agregado el nombre de la clase con éxito. Bueno, solo dale un cheque aquí. Bien, entonces hemos agregado el nombre de la clase al desarrollo, y está funcionando bien. Perfecto. Y de manera similar, si quería agregar algún otro valor aquí, y dar clic en el marcador agregar, y esto está funcionando perfectamente. Nuestra funcionalidad add bookmark funciona perfectamente, ¿verdad? Y ahora lo que tenemos que hacer tenemos que añadir la funcionalidad en el botón addit y también en el botón de eliminar. Bien. Pero antes de eso, vamos a agregar nuestra funcionalidad de botón Eliminar todos los marcadores Entonces, ¿cómo vas a hacer esto? Vamos a volver a entrar en nuestro código y aquí lo que tenemos que hacer. Sería bastante sencillo. En realidad es un código de una sola línea aquí. Bien, entonces cómo esta es una sola línea de un código. Entonces básicamente, como sabemos que lo que sea que esté agregando aquí se está agregando en nuestra lista de favoritos. ¿Bien? Y para eliminar todo el contenido de nuestra lista de favoritos, sólo tenemos que hacer una sola cosa. Entonces aquí vamos a agregar lista de marcadores. Entonces vamos a anotar estimales internos aquí. Y como el estimal interno es en realidad la propiedad, así que vamos a agregar el valor a esto, y será la cadena vacía Entonces básicamente, va a eliminar todo lo que tenemos en nuestra lista de favoritos. Bien. Entonces ahora solo intentemos ejecutar esto y veamos si esto está funcionando o no. Todo bien. Así que vamos a volver a nuestro proyecto. Y vamos a tratar de añadir algunos valores a esto. Entonces vamos a agregar este valor, y vamos a agregar un segundo valor aquí también. Todo bien. Así que ahora si acabo de hacer clic en, eliminar todos los marcadores botón Entonces déjame abrir nuestro cuerpo aquí y también la sección y la lista desordenada Entonces si solo hago clic en, borrar todo el botón, básicamente, eliminaría todo lo que tenemos dentro de nuestra lista desordenada Así que ahora vamos a hacer clic en, eliminar todos los marcadores. Y ahora puedes ver esto no tenemos nada dentro de nuestra lista de despedidos Entonces así es como podemos eliminar todos los marcadores que tenemos en nuestra lista bajo Perfecto. Y también para agregar el nombre de la clase, también puedes usar la lista de clases y el método add, y también puedes simplemente anotar el nombre de la clase aquí, y funcionaría de la misma manera. Entonces lo que prefieras usar aquí. Voy a ir aquí con la lista de clases. Bien, entonces ahora lo que tenemos que hacer. Si vuelvo al navegador, podrás ver una cosa que cada vez que agreguemos una URL aquí y pulsemos en Agregar Marcador, podrás ver en el campo de entrada que el texto no se está reiniciando ¿Bien? Todavía tenemos el mismo texto aquí. Entonces, si vuelvo a agregar esto, seguimos teniendo este texto. Pero no quiero tener esto. Quiero tener cada vez que haga clic en el botón agregar marcador, mi campo de entrada debe ser claro. Bien, entonces, ¿cómo puedes hacer esto? Es bastante simple. Vamos a ir aquí dentro del código VS. Y aquí lo que tienes que hacer tenemos que anotar entrada de marcador y propiedad de valor de punto, y vamos a establecer esto en cadena vacía. Después de hacer toda la funcionalidad que tenemos encendida, agrega marcador. Bien. Entonces ahora si vuelvo a nuestro navegador y si trato de agregar algo aquí y hago clic en agregar marcador, ahora puedes ver aquí que nuestro campo de entrada es claro. Bien. Y una cosa que tienes que asegurarte es que tienes que agregar el valor de punto de entrada de marcador. Tienes que apuntar a esto directamente, no a la variable URL aquí porque esto no afectará la entrada de marcador que tenemos en la estimación. ¿Bien? Entonces, si escribo la URL aquí, esto en realidad no haría nada por nosotros. ¿Bien? Así que vamos a guardar esto y volveremos aquí. Y si trato de tener nuestra URL, da clic en Agregar Marcador, puedes ver esto. Todavía estamos teniendo nuestro valor aquí. Entonces es por eso que tienes que apuntar al valor del punto de entrada del marcador porque esto afectaría directamente a nuestro campo de entrada aquí. ¿Bien? Todo bien. Entonces ahora lo que tenemos que hacer, vamos a volver al navegador. Bien. Entonces ahora puedes ver aquí que aquí tenemos todo lo que necesitábamos, pero aún así el patrón agregado y el patrón de eliminación no es funcional. Entonces tenemos que hacer que este botón sea funcional. Entonces, ¿cómo podemos hacer esto? Es bastante simple. Necesitamos agregar el oyente de eventos sobre nuestros botones. Entonces voy a agregar estos oyentes de eventos. Entonces antes que nada, voy a anotar el botón de borrar. Vamos a anotar agregar oyente de eventos. Entonces evento sería, digamos, clic, y aquí vamos a tener nuestra función de flecha. Bien. Y de manera similar, vamos a agregar el oyente de eventos en nuestro botón agregado Perfecto. Entonces ahora tenemos que definir nuestras funciones aquí para nuestros botones. Todo bien para eliminar ese elemento en particular, en realidad tenemos que apuntar a nuestro elemento marcador que tenemos aquí. Así que vamos a apuntar simplemente al elemento marcador. Y hay un método predefinido en el tom que puedes usar para eliminar el elemento estimate directamente. ¿Bien? Entonces ahora si vuelvo a nuestro navegador, solo agreguemos algo aquí. Permítanme agregar una propiedad más aquí. Haga clic en agregar marcador. Ahora hagamos clic en nuestro botón de eliminar, y esto eliminaría ese botón de marcador. Y si simplemente vuelvo a hacer clic en esto, también eliminaría ese elemento marcador. ¿Bien? Ahora lo que tenemos que hacer tenemos que añadir la funcionalidad de botón agregado. Ahora para agregar la funcionalidad en nuestro botón muerto, simplemente puedo editar el contenido por esto si uso el prompt. Entonces, si solo uso el prompt aquí, entonces déjame crear una variable que será nueva URL. Y simplemente puedo usar el prompt aquí. Puedo anotar el valor de la URL de actualización. Bien. Y luego lo que podamos hacer, simplemente podemos agregar esto en nuestro párrafo de marcador al contenido del texto. Y eso básicamente actualizaría nuestro contenido dentro del elemento bookmark. Entonces, si vuelvo al navegador, solo agreguemos algo aquí. Y si solo hago clic en la edición, ahora podrás ver que aquí estamos teniendo el prompt. ¿Bien? Y si solo escribo google.com y hago clic en Bien. Esto en realidad actualizaría el contenido de nuestro valor de marcador. Bien. Entonces esto está funcionando. Ahora quiero que hagas algo nuevo en este proyecto, que es hacer que este párrafo editable directamente sin entrar en el baile de graduación Entonces, ¿cómo puedes hacer esto? Es bastante simple. Permítanme borrar esto de aquí. Tenemos que anotar elemento marcador, y ahora tenemos que anotar la propiedad que es infantil. Bien. Y ahora mismo, sólo voy a hacer el Consolo aquí porque tengo que mostrarte algo Si vuelve a nuestro navegador, y da clic en y da clic en cualquier valor aquí y da clic en dit. Ahora podrás ver que estamos teniendo este registro de consola de recolección de estimaciones en el que sobre el valor del índice cero, estamos teniendo nuestro párrafo, y luego en el uno, estamos teniendo nuestro desarrollo. Bien, para que nuestro párrafo sea editable, lo que tenemos que hacer, tenemos que apuntar sobre esa propiedad que está en el índice número cero, que es nuestro párrafo, obviamente Entonces, para acceder a esto, vamos a anotar cero. Y ahora si solo agrego algún valor aquí y hago clic en Editar, ahora, podrás ver que estamos accediendo directamente a nuestro elemento de párrafo. Todo bien. Ahora para que nuestro elemento de párrafo sea editable, hay una propiedad, pero en realidad no recuerdo su nombre correctamente Entonces vamos a buscar esto en Google. Bien. Entonces ahora vamos a volver al navegador, y ya he abierto este artículo de So flow. Bien. Entonces tenemos que usar esta propiedad que es contenido editable, y tenemos que establecer este valor en true Bien, así que simplemente voy a copiar esto desde aquí. Y volveremos a nuestro código VS. Vamos a pasar ese valor aquí, y esto en realidad haría que nuestro párrafo ditable Ahora bien, una cosa que tenemos que hacer aquí es que también quiero cambiar el texto de nuestro botón addit siempre que estemos teniendo nuestro párrafo ditable Entonces voy a anotar contenido de texto, que sería igual a guardar. Bien. Así que ahora solo guardemos esto y volvamos a nuestro navegador y solo agreguemos algunos valores aquí, haga clic en Agregar marcador y haga clic en Editar aquí. Ahora, podrás ver que nuestra URL es editable o nuestro elemento de párrafo es editable Simplemente puedo cambiar el valor aquí directamente. Y cuando hago clic en el botón Guardar, realidad no haría nada porque la razón es que si vuelves a nuestro código, y puedes ver aquí que hemos agregado la funcionalidad que cada vez que hacemos clic en nuestro botón de edición, debería cambiar el elemento de párrafo al contenido editable y también cambiar el texto del botón de edición Entonces, si haces esto por primera vez, te mostraría los cambios aquí, y si simplemente vuelvo a hacer clic en el botón Guardar, que en realidad es el botón de editar, no haría nada. Entonces tenemos que definir esto ahora que siempre que nuestro contenido ya sea editable, tiene que hacer algo Entonces básicamente, tenemos que agregar aquí la condición que si ahora solo tengo que copiar esto de aquí, y voy a poner esto dentro de nuestra condición. Solo quitemos la semi columna y tenemos que envolver esta. Y lo que tenemos que hacer, en realidad, siempre que el párrafo ya sea editable, sólo tenemos que hacer lo contrario aquí ¿Bien? Tenemos que cambiar el valor del contenido editable a falso Y tenemos que hacer una cosa más aquí. Esto se sumará. Perfecto. Ahora vamos a volver aquí y solo agregar algunas cosas aquí y hacer clic en ddt y cambiar el valor aquí Y da clic en guardar aquí. Bien, entonces creo que aquí estamos teniendo algunos problemas porque nuestra condición no parece funcionar. Y si hago clic en nuestro párrafo, sigue siendo editable Entonces ahora tenemos que volver a nuestro código, y veamos dónde hemos cometido el error aquí. Entonces primero, voy a comprobar si nuestra condición está funcionando o no. Así que simplemente voy a tener el registro de la consola Condition está funcionando. Así que ahora solo vuelvo a nuestro navegador y tengo algunas cosas por aquí y hago clic en nuestro botón de edición. Bien, entonces ahora es editable. Pero ahora cuando hago clic en nuestro botón Guardar, ahora tenemos que verificar si nuestra condición está funcionando o no. Así que vamos a hacer clic en esto. Todo bien. Entonces la condición parece funcionar. Entonces, ¿qué hemos hecho mal aquí? Bien, bien. Todo bien. Entonces, lo que vamos a hacer aquí, en realidad vamos a tomar la ayuda de Ja JiBti o cualquier otra herramienta de IA, lo que quieras usar Entonces vamos a ir a nuestro navegador. Bien, así que vamos a anotar el JGiBII aquí. Y ahora lo que tenemos que hacer solo tenemos que poner nuestro código aquí y vamos a pedirle que me encuentre un bug en este código. Bien. Todo bien. Déjame echar un vistazo a mi código otra vez. A lo mejor pueda arreglar esto. Entonces tenemos la condición if que probablemente esté funcionando. Entonces estamos cambiando el valor. Bien, entonces creo que podríamos haber escapado de la s. Bien, bien, bien, entendido. Todo bien. Pero aún así, voy a poner esto en el baile de graduación a menos que vea tal vez ese pueda ser el tema. Bien, bien. Entonces he hecho este error realmente básico aquí es que he dado, así que si puedo volver a entrar en mi código, le he dado a esto la condición if. Pero he puesto este código sin ninguna declaración. Entonces básicamente, incluso la condición es cierta aquí, como si estuviera cambiando el valor al alboroto y el contenido del texto a la edición Pero si el código baja, todavía estamos anulando los valores aquí Entonces ese es el tema potencial. Pero vamos a volver al baile de graduación y en realidad esto nos está mostrando lo mismo. Si puedo acercarlo, Bien, entonces la línea en la que tenemos el marcador en el que estamos cambiando el valor a true se ejecuta cada vez que se ejecuta el oyente de eventos Entonces básicamente, está haciendo efectivo nuestro blog I. Lo mismo sucede con nuestro contenido de texto aquí porque fuera de la condición if, hemos agregado este código. Entonces, básicamente, nuestra condición está funcionando, pero en realidad estamos anulando nuestro valor Entonces para eso, lo que tenemos que hacer tenemos que poner esto en tenemos que ponerlo en la declaración LS. Así que cortemos esto de aquí y pongamos esto aquí, y esto probablemente funcionaría ahora. Así que guardemos esto y volvamos a nuestro navegador. Agrega cualquier valor aquí y haz clic en él, cambia el valor. Vuelva a hacer clic en nuestro botón. Ahora esto está funcionando. Y ahora se puede ver esto que nuestro párrafo ya no es editable. Entonces esto está funcionando perfectamente bien. Bien, así que ese era el tema. Así que ahora vamos a eliminar este registro de la consola. Perfecto. Perfecto. Así que hemos hecho nuestra funcionalidad en el botón de edición. Esto lo hemos hecho en el botón de borrar. Básicamente, hemos hecho todo excepto validar la URL, y eso no va a tomar tanto de nuestro tiempo porque aquí vamos a usar la expresión regular Y para la expresión regular, podemos tomar el infierno de la carga. Entonces primero, voy a anotar aquí la función, eso sería validar URL. Eso realmente tomaría una URL como entrada, y básicamente devolvería ese valor. Para agregar la expresión regular, no tenemos que agregar esto por nosotros mismos. Podemos simplemente ir al Google si quieres o tal vez al JGBT lo que sea que te parezca mejor Ahora mismo, voy a ir a la JGBT y darle un baile adecuado para validar mi URL aquí. Voy a anotar. Quiero tener una función en JavaScript que pueda validar la UR Bien. Y solo quiero validar la URL que o bien empi