OK, volveremos.
Así que creo que es hora de que hagas algo así por tu cuenta.
Entonces tengo un ejercicio rápido.
Todo lo que necesita hacer es crear una nueva era o archivar un nuevo archivo javascript y agregar un solo botón a la edad
de mi archivo.
Eso es.
Y luego, cuando hago clic en ese botón, todo lo que tiene que hacer es cambiar el color de fondo del cuerpo
de blanco a morado.
Cómo lo haces.
Lo dejaré en tus manos.
Hay algunas maneras diferentes de hacerlo, dado las diferentes cosas de las que hemos hablado hasta
ahora, pero necesita ejecutar algún código cuando hace clic en el botón y ese código debería cambiar el
color de fondo entre dos colores, ya sea púrpura y blanco o elige algunos colores mejores.
Totalmente depende de ti.
Entonces, video de Pasic ahora mismo.
Dale una oportunidad por tu cuenta.
Es muy importante que hagas eso y luego vuelvas cuando estés
listo y revisaremos una solución juntos.
DE ACUERDO.
Entonces, hablemos de cómo podemos hacer que esto funcione.
Primero lo primero que necesitamos es un archivo femenino envejecido que tengo aquí mismo para agregar en mi HMO.
Vamos a llamar a este conmutador de color y todo lo que necesitamos es un solo botón y simplemente agregaremos
clic en mí solo así.
una etiqueta de script aquí mismo y en nuestro javascript, pero no es una gran práctica.
Ahora necesitamos nuestro archivo javascript y podríamos hacer algo fácilmente, simplemente agreguemos
Entonces, para que tenga el hábito correcto y cree un nuevo archivo, lo llamaremos alternar.
J. S. en el mismo directorio y en el interior, como
siempre me gusta, agregaré una alerta solo para asegurarme de que estén bien conectados y luego tenemos que
ir y vincular a esa secuencia de comandos y que debe ser fuente igual a alternar punto Jay Sí solo como eso.
Vamos a abrir este archivo en el navegador y veamos qué obtenemos.
Lo primero que señalaré aquí.
Tenga en cuenta que recibimos la alerta que dice que las cosas están conectadas pero el botón aún no está en la página.
Entonces, realmente no vemos el botón hasta que me deshago de la alerta.
Y eso es realmente importante y queremos arreglar eso.
Lo que eso nos dice es que nuestro código aquí se ejecuta primero antes de que el botón esté en la página y
el código que vamos a escribir dependerá del hecho de que el botón esté en la página.
No podemos agregar un oyente rápido; de lo contrario, el detector de eventos solo funcionará y agregará eventos a los elementos que están en la
página en el momento en que se ejecuta.
Entonces tenemos algunas formas de arreglar esto.
script hasta el final del cuerpo para que podamos estar seguros de que este botón se ha cargado.
El más simple por ahora es simplemente mover nuestro
Aprenderemos sobre otra forma de hacer esto cuando lleguemos a la consulta de Jay, pero esto funciona perfectamente bien
por ahora.
Entonces, si actualizamos ahora, verá los botones que ya están allí.
Y luego recibimos la alerta que dice conectarlo.
Entonces ahora hablemos de la lógica.
Vamos a nuestro conmutador J. S. y selecciona el botón.
Entonces, el botón var equivale al botón selector de consultas de documentos y esa es solo una forma de seleccionarlo, por supuesto.
Y luego queremos agregar nuestro oyente de eventos para que el botón que agregue oyente de eventos haga clic
y luego nuestra función que ejecutará la función de devolución de llamada de esa manera.
Y siempre me gusta comenzar de nuevo con una alerta que solo dice clic para asegurarme de que estamos seleccionando lo correcto
y de que esta función se está ejecutando.
Cuando hacemos clic para actualizar, hagamos clic y nos haga clic.
Así que eso es genial.
Las cosas están conectadas correctamente ahora todo lo que tenemos que hacer es cambiar el color de fondo del cuerpo.
Así que comenzaría simplemente haciendo un cuerpo de volcado de documentos y establezcamos que sea violeta.
Así que documenta el estilo del cuerpo que el fondo es igual al violeta y verás que usé document dot body.
También podríamos documentar ese selector de consultas y darle el nombre de la etiqueta del cuerpo o algo así como los elementos
de obtención del documento con código por el nombre de la etiqueta cuerpo cero, pero es mucho más fácil simplemente usar el cuerpo del documento.
Es solo un atajo que está integrado en el documento.
Entonces hago eso, lo cambio a púrpura y deberíamos estar bien para ir aquí.
Si hago clic, obtenemos un cuerpo morado pero, por supuesto, parte de este problema fue alternar.
Entonces, cuando hago clic aquí, vuelve a ser blanco y luego vuelvo a hacer clic y vuelvo al color morado,
y sigue cambiando entre los dos.
Entonces, lo que tendremos que hacer es agregar algo de lógica y nuestra lógica se verá más
o menos así si las blancas se vuelven púrpuras o si lo hacen con algo así.
Así que la forma en que voy a manejar esto, voy a crear un valor booleano llamado
es púrpura. Savar es púrpura y comenzará como falso porque cuando actualizo la página no es de color púrpura, por lo que el morado
es falso.
Y luego, lo que necesitaremos hacer es dentro de nuestro javascript vamos a comprobar si es violeta.
Entonces, si es de color púrpura, entonces querremos que el color de fondo sea
blanco como este.
Y el cambio
debe ser blanco y luego, de lo contrario, haremos lo mismo, excepto que lo haremos de color púrpura.
El único problema, por supuesto, es que el color púrpura en este momento es siempre falso.
Vamos a querer cambiar eso.
Entonces, si es morado si es morado, sube el estilo del cuerpo pero el fondo es blanco y
luego diríamos que morado ahora se llama falso porque simplemente lo cambiamos a blanco y luego cuando
dijimos que era morado, diríamos purple es igual a verdadero
Y esto tiene que ser un valor booleano, por supuesto, no la cadena verdadera o la cadena falsa.
Entonces, lo que hemos hecho aquí es crear nuestro propio rastreador de objetivos.
Este booleano es el comienzo violeta es falso.
La primera vez es violeta.
Eso no sucede.
Así que vamos a lo demás, cambiamos el fondo para que sea morado y luego el morado ahora es verdadero.
Así que la próxima vez que el usuario haga clic en que es de color púrpura, ahora es cierto.
Entonces, si cambiamos el fondo para que sea blanco y luego el morado se establece en falso, seguimos alternando
hacia adelante y hacia atrás.
Así que actualizar el consejo de corredores se asegura de que no tengamos errores.
Y ahora intentemos hacer clic en púrpura blanco morado y blanco.
Entonces, hay un pequeño factor de retroceso que podemos hacer, que es que no tenemos que establecer es que el morado
es falso y el morado es verdadero dentro de la instrucción if.
Tenemos una forma más corta de hacer eso solo por escrito.
El color púrpura no es igual a púrpura.
Así que eso solo va a cambiarlo entre verdadero y falso o falso y lo cierto simplemente lo niega.
Entonces ese es un buen atajo.
Puedes ver que ahora es de Heigl y es un poco más corto, pero hay una forma más corta
de hacer las funciones que esperamos que algunos de ustedes pensaran cuando supimos sobre la lista de la clase.
Hubo un método llamado alternar.
Entonces, si definimos un CSA como clase y sigamos adelante y lo hagamos en vez de mi estilo,
voy a hacer una etiqueta de estilo por ahora y añadir una clase llamada Dot.
Y llamémoslo púrpura o simplemente púrpura.
Ese es un nombre de clase y simplemente diremos que el fondo es violeta y eso es todo lo que tenemos que hacer. Lo que
vamos a hacer es activar y desactivar esta clase en el cuerpo.
Así que vuelve aquí y voy a copiar esto por ahora y contarlo y todo lo que tenemos que
hacer es hacer clic en el botón y comentarlo o deshacerte de esto también.
Todo esto, todo lo que queremos hacer es documentar el cuerpo.
Classless toggle.
Y luego, el nombre de la clase que acabamos de crear se llamó morado.
Así que recuerda lo que esto hará si el cuerpo no tiene la clase llamada violeta lo agregará.
Pero comprueba si ya tiene el nombre de clase púrpura.
Lo eliminará.
Entonces no tenemos que hacer un seguimiento de si es de color púrpura o blanco.
Actualmente si se aplica la clase o si no es así, no necesitamos que este sea Boullion morado más.
Básicamente todo está terminado en lugar de alternar sin clases.
Así que me actualizo.
Hago clic y puede ver que se ve igual.
Pero si inspeccionamos y miramos el cuerpo.
Aquí vamos.
La clase de aviso es igual a púrpura.
Y luego hago clic y ahora ya no tenemos púrpura clásico.
Se va.
Eso es documentar el cuerpo.
Alternar la lista de clases que es realmente muy útil.
Aquí es mucho más corto que esta lógica.
De acuerdo, esa es mi solución.