1
00:00:00,380 --> 00:00:02,130
OK, volveremos.

2
00:00:02,130 --> 00:00:05,070
Así que creo que es hora de que hagas algo así por tu cuenta.

3
00:00:05,400 --> 00:00:07,310
Entonces tengo un ejercicio rápido.

4
00:00:07,560 --> 00:00:14,730
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

5
00:00:14,730 --> 00:00:15,620
de mi archivo.

6
00:00:15,630 --> 00:00:16,920
Eso es.

7
00:00:16,920 --> 00:00:23,490
Y luego, cuando hago clic en ese botón, todo lo que tiene que hacer es cambiar el color de fondo del cuerpo

8
00:00:23,490 --> 00:00:24,780
de blanco a morado.

9
00:00:24,780 --> 00:00:25,600
Cómo lo haces.

10
00:00:25,600 --> 00:00:27,190
Lo dejaré en tus manos.

11
00:00:27,240 --> 00:00:31,620
Hay algunas maneras diferentes de hacerlo, dado las diferentes cosas de las que hemos hablado hasta

12
00:00:31,620 --> 00:00:36,570
ahora, pero necesita ejecutar algún código cuando hace clic en el botón y ese código debería cambiar el

13
00:00:36,570 --> 00:00:41,280
color de fondo entre dos colores, ya sea púrpura y blanco o elige algunos colores mejores.

14
00:00:41,280 --> 00:00:42,220
Totalmente depende de ti.

15
00:00:42,510 --> 00:00:44,010
Entonces, video de Pasic ahora mismo.

16
00:00:44,190 --> 00:00:45,560
Dale una oportunidad por tu cuenta.

17
00:00:45,580 --> 00:00:50,160
Es muy importante que hagas eso y luego vuelvas cuando estés

18
00:00:50,160 --> 00:00:52,460
listo y revisaremos una solución juntos.

19
00:00:54,620 --> 00:00:55,280
DE ACUERDO.

20
00:00:55,350 --> 00:00:58,110
Entonces, hablemos de cómo podemos hacer que esto funcione.

21
00:00:58,110 --> 00:01:04,870
Primero lo primero que necesitamos es un archivo femenino envejecido que tengo aquí mismo para agregar en mi HMO.

22
00:01:05,310 --> 00:01:14,550
Vamos a llamar a este conmutador de color y todo lo que necesitamos es un solo botón y simplemente agregaremos

23
00:01:14,550 --> 00:01:16,590
clic en mí solo así.

24
00:01:16,650 --> 00:01:22,850
una etiqueta de script aquí mismo y en nuestro javascript, pero no es una gran práctica.

25
00:01:22,860 --> 00:01:27,260
Ahora necesitamos nuestro archivo javascript y podríamos hacer algo fácilmente, simplemente agreguemos

26
00:01:27,270 --> 00:01:34,170
Entonces, para que tenga el hábito correcto y cree un nuevo archivo, lo llamaremos alternar.

27
00:01:34,190 --> 00:01:42,540
J. S. en el mismo directorio y en el interior, como

28
00:01:42,540 --> 00:01:47,910
siempre me gusta, agregaré una alerta solo para asegurarme de que estén bien conectados y luego tenemos que

29
00:01:51,130 --> 00:01:57,450
ir y vincular a esa secuencia de comandos y que debe ser fuente igual a alternar punto Jay Sí solo como eso.

30
00:01:57,510 --> 00:02:02,880
Vamos a abrir este archivo en el navegador y veamos qué obtenemos.

31
00:02:02,880 --> 00:02:04,640
Lo primero que señalaré aquí.

32
00:02:04,800 --> 00:02:10,770
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.

33
00:02:11,220 --> 00:02:14,710
Entonces, realmente no vemos el botón hasta que me deshago de la alerta.

34
00:02:15,030 --> 00:02:17,450
Y eso es realmente importante y queremos arreglar eso.

35
00:02:17,490 --> 00:02:24,210
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

36
00:02:25,140 --> 00:02:30,060
el código que vamos a escribir dependerá del hecho de que el botón esté en la página.

37
00:02:30,150 --> 00:02:36,810
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

38
00:02:36,810 --> 00:02:39,100
página en el momento en que se ejecuta.

39
00:02:39,450 --> 00:02:41,290
Entonces tenemos algunas formas de arreglar esto.

40
00:02:41,310 --> 00:02:47,040
script hasta el final del cuerpo para que podamos estar seguros de que este botón se ha cargado.

41
00:02:47,040 --> 00:02:49,710
El más simple por ahora es simplemente mover nuestro

42
00:02:49,710 --> 00:02:55,020
Aprenderemos sobre otra forma de hacer esto cuando lleguemos a la consulta de Jay, pero esto funciona perfectamente bien

43
00:02:55,020 --> 00:02:55,680
por ahora.

44
00:02:55,980 --> 00:02:59,440
Entonces, si actualizamos ahora, verá los botones que ya están allí.

45
00:02:59,610 --> 00:03:03,140
Y luego recibimos la alerta que dice conectarlo.

46
00:03:03,210 --> 00:03:05,470
Entonces ahora hablemos de la lógica.

47
00:03:05,490 --> 00:03:09,460
Vamos a nuestro conmutador J. S. y selecciona el botón.

48
00:03:09,660 --> 00:03:19,920
Entonces, el botón var equivale al botón selector de consultas de documentos y esa es solo una forma de seleccionarlo, por supuesto.

49
00:03:20,970 --> 00:03:28,030
Y luego queremos agregar nuestro oyente de eventos para que el botón que agregue oyente de eventos haga clic

50
00:03:30,930 --> 00:03:36,650
y luego nuestra función que ejecutará la función de devolución de llamada de esa manera.

51
00:03:37,290 --> 00:03:44,100
Y siempre me gusta comenzar de nuevo con una alerta que solo dice clic para asegurarme de que estamos seleccionando lo correcto

52
00:03:44,100 --> 00:03:46,450
y de que esta función se está ejecutando.

53
00:03:46,470 --> 00:03:51,910
Cuando hacemos clic para actualizar, hagamos clic y nos haga clic.

54
00:03:51,960 --> 00:03:52,860
Así que eso es genial.

55
00:03:52,860 --> 00:03:59,280
Las cosas están conectadas correctamente ahora todo lo que tenemos que hacer es cambiar el color de fondo del cuerpo.

56
00:03:59,700 --> 00:04:04,920
Así que comenzaría simplemente haciendo un cuerpo de volcado de documentos y establezcamos que sea violeta.

57
00:04:05,100 --> 00:04:14,980
Así que documenta el estilo del cuerpo que el fondo es igual al violeta y verás que usé document dot body.

58
00:04:15,150 --> 00:04:24,830
También podríamos documentar ese selector de consultas y darle el nombre de la etiqueta del cuerpo o algo así como los elementos

59
00:04:24,840 --> 00:04:35,510
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.

60
00:04:35,670 --> 00:04:38,730
Es solo un atajo que está integrado en el documento.

61
00:04:38,730 --> 00:04:42,970
Entonces hago eso, lo cambio a púrpura y deberíamos estar bien para ir aquí.

62
00:04:43,110 --> 00:04:50,770
Si hago clic, obtenemos un cuerpo morado pero, por supuesto, parte de este problema fue alternar.

63
00:04:50,940 --> 00:04:56,310
Entonces, cuando hago clic aquí, vuelve a ser blanco y luego vuelvo a hacer clic y vuelvo al color morado,

64
00:04:56,310 --> 00:04:57,870
y sigue cambiando entre los dos.

65
00:04:58,290 --> 00:05:06,030
Entonces, lo que tendremos que hacer es agregar algo de lógica y nuestra lógica se verá más

66
00:05:09,150 --> 00:05:16,040
o menos así si las blancas se vuelven púrpuras o si lo hacen con algo así.

67
00:05:16,350 --> 00:05:21,550
Así que la forma en que voy a manejar esto, voy a crear un valor booleano llamado

68
00:05:21,630 --> 00:05:29,130
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

69
00:05:29,130 --> 00:05:29,930
es falso.

70
00:05:29,970 --> 00:05:37,950
Y luego, lo que necesitaremos hacer es dentro de nuestro javascript vamos a comprobar si es violeta.

71
00:05:38,910 --> 00:05:45,450
Entonces, si es de color púrpura, entonces querremos que el color de fondo sea

72
00:05:49,200 --> 00:05:50,370
blanco como este.

73
00:05:50,520 --> 00:05:51,630
Y el cambio

74
00:05:54,690 --> 00:06:02,020
debe ser blanco y luego, de lo contrario, haremos lo mismo, excepto que lo haremos de color púrpura.

75
00:06:02,040 --> 00:06:06,930
El único problema, por supuesto, es que el color púrpura en este momento es siempre falso.

76
00:06:06,930 --> 00:06:08,610
Vamos a querer cambiar eso.

77
00:06:08,880 --> 00:06:16,230
Entonces, si es morado si es morado, sube el estilo del cuerpo pero el fondo es blanco y

78
00:06:16,230 --> 00:06:23,190
luego diríamos que morado ahora se llama falso porque simplemente lo cambiamos a blanco y luego cuando

79
00:06:23,190 --> 00:06:27,610
dijimos que era morado, diríamos purple es igual a verdadero

80
00:06:27,840 --> 00:06:35,130
Y esto tiene que ser un valor booleano, por supuesto, no la cadena verdadera o la cadena falsa.

81
00:06:35,160 --> 00:06:38,280
Entonces, lo que hemos hecho aquí es crear nuestro propio rastreador de objetivos.

82
00:06:38,280 --> 00:06:41,020
Este booleano es el comienzo violeta es falso.

83
00:06:41,070 --> 00:06:43,590
La primera vez es violeta.

84
00:06:43,590 --> 00:06:44,510
Eso no sucede.

85
00:06:44,610 --> 00:06:49,990
Así que vamos a lo demás, cambiamos el fondo para que sea morado y luego el morado ahora es verdadero.

86
00:06:50,190 --> 00:06:54,460
Así que la próxima vez que el usuario haga clic en que es de color púrpura, ahora es cierto.

87
00:06:54,480 --> 00:06:58,890
Entonces, si cambiamos el fondo para que sea blanco y luego el morado se establece en falso, seguimos alternando

88
00:06:58,890 --> 00:06:59,930
hacia adelante y hacia atrás.

89
00:06:59,970 --> 00:07:03,640
Así que actualizar el consejo de corredores se asegura de que no tengamos errores.

90
00:07:03,900 --> 00:07:08,910
Y ahora intentemos hacer clic en púrpura blanco morado y blanco.

91
00:07:09,450 --> 00:07:15,030
Entonces, hay un pequeño factor de retroceso que podemos hacer, que es que no tenemos que establecer es que el morado

92
00:07:15,090 --> 00:07:18,180
es falso y el morado es verdadero dentro de la instrucción if.

93
00:07:18,180 --> 00:07:21,110
Tenemos una forma más corta de hacer eso solo por escrito.

94
00:07:21,150 --> 00:07:25,360
El color púrpura no es igual a púrpura.

95
00:07:25,770 --> 00:07:31,280
Así que eso solo va a cambiarlo entre verdadero y falso o falso y lo cierto simplemente lo niega.

96
00:07:31,440 --> 00:07:33,660
Entonces ese es un buen atajo.

97
00:07:34,200 --> 00:07:40,080
Puedes ver que ahora es de Heigl y es un poco más corto, pero hay una forma más corta

98
00:07:40,080 --> 00:07:46,000
de hacer las funciones que esperamos que algunos de ustedes pensaran cuando supimos sobre la lista de la clase.

99
00:07:46,110 --> 00:07:48,230
Hubo un método llamado alternar.

100
00:07:48,240 --> 00:07:55,320
Entonces, si definimos un CSA como clase y sigamos adelante y lo hagamos en vez de mi estilo,

101
00:07:55,320 --> 00:08:01,590
voy a hacer una etiqueta de estilo por ahora y añadir una clase llamada Dot.

102
00:08:01,590 --> 00:08:04,650
Y llamémoslo púrpura o simplemente púrpura.

103
00:08:04,650 --> 00:08:12,630
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

104
00:08:12,630 --> 00:08:16,680
vamos a hacer es activar y desactivar esta clase en el cuerpo.

105
00:08:16,680 --> 00:08:25,140
Así que vuelve aquí y voy a copiar esto por ahora y contarlo y todo lo que tenemos que

106
00:08:25,140 --> 00:08:31,720
hacer es hacer clic en el botón y comentarlo o deshacerte de esto también.

107
00:08:31,740 --> 00:08:37,820
Todo esto, todo lo que queremos hacer es documentar el cuerpo.

108
00:08:38,230 --> 00:08:41,900
Classless toggle.

109
00:08:42,210 --> 00:08:46,390
Y luego, el nombre de la clase que acabamos de crear se llamó morado.

110
00:08:46,470 --> 00:08:53,000
Así que recuerda lo que esto hará si el cuerpo no tiene la clase llamada violeta lo agregará.

111
00:08:53,400 --> 00:08:56,510
Pero comprueba si ya tiene el nombre de clase púrpura.

112
00:08:56,580 --> 00:08:57,660
Lo eliminará.

113
00:08:57,660 --> 00:09:00,630
Entonces no tenemos que hacer un seguimiento de si es de color púrpura o blanco.

114
00:09:00,630 --> 00:09:05,850
Actualmente si se aplica la clase o si no es así, no necesitamos que este sea Boullion morado más.

115
00:09:06,270 --> 00:09:09,660
Básicamente todo está terminado en lugar de alternar sin clases.

116
00:09:09,930 --> 00:09:11,390
Así que me actualizo.

117
00:09:12,000 --> 00:09:15,980
Hago clic y puede ver que se ve igual.

118
00:09:16,110 --> 00:09:19,890
Pero si inspeccionamos y miramos el cuerpo.

119
00:09:19,890 --> 00:09:20,670
Aquí vamos.

120
00:09:20,790 --> 00:09:22,930
La clase de aviso es igual a púrpura.

121
00:09:22,980 --> 00:09:26,310
Y luego hago clic y ahora ya no tenemos púrpura clásico.

122
00:09:26,310 --> 00:09:27,570
Se va.

123
00:09:27,990 --> 00:09:29,830
Eso es documentar el cuerpo.

124
00:09:29,910 --> 00:09:32,760
Alternar la lista de clases que es realmente muy útil.

125
00:09:32,760 --> 00:09:35,490
Aquí es mucho más corto que esta lógica.

126
00:09:35,490 --> 00:09:37,030
De acuerdo, esa es mi solución.