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

2
00:00:02,130 --> 00:00:05,070
Quindi penso che sia il momento per te di dare un po 'di tutto questo a te stesso.

3
00:00:05,400 --> 00:00:07,310
Quindi ho un rapido esercizio.

4
00:00:07,560 --> 00:00:14,730
Tutto ciò che devi fare è creare una nuova era o creare un nuovo file javascript e aggiungere un singolo pulsante all'età

5
00:00:14,730 --> 00:00:15,620
del mio file.

6
00:00:15,630 --> 00:00:16,920
Questo è tutto.

7
00:00:16,920 --> 00:00:23,490
E poi quando clicco su quel pulsante tutto quello che devi fare è cambiare il colore di sfondo del corpo

8
00:00:23,490 --> 00:00:24,780
dal bianco al viola.

9
00:00:24,780 --> 00:00:25,600
Come farlo.

10
00:00:25,600 --> 00:00:27,190
Lo lascerò a te.

11
00:00:27,240 --> 00:00:31,620
Ci sono diversi modi in cui potresti farlo date le diverse cose di cui abbiamo parlato fino

12
00:00:31,620 --> 00:00:36,570
ad ora, ma devi fare un po 'di codice quando fai clic sul pulsante e quel codice dovrebbe cambiare

13
00:00:36,570 --> 00:00:41,280
il colore dello sfondo tra due colori, sia che sia viola e bianco o scegli colori migliori.

14
00:00:41,280 --> 00:00:42,220
Totalmente a te.

15
00:00:42,510 --> 00:00:44,010
Quindi video Pasic adesso.

16
00:00:44,190 --> 00:00:45,560
Dai un colpo a te stesso.

17
00:00:45,580 --> 00:00:50,160
È molto importante farlo e poi tornare quando sei pronto

18
00:00:50,160 --> 00:00:52,460
e insieme risolveremo una soluzione.

19
00:00:54,620 --> 00:00:55,280
OK.

20
00:00:55,350 --> 00:00:58,110
Quindi parliamo di come possiamo farlo funzionare.

21
00:00:58,110 --> 00:01:04,870
Per prima cosa abbiamo bisogno di un file femminile invecchiato che devo aggiungere qui nel mio HMO.

22
00:01:05,310 --> 00:01:14,550
Chiamiamo questo interruttore a colori e tutto ciò di cui abbiamo bisogno è un singolo pulsante e aggiungeremo

23
00:01:14,550 --> 00:01:16,590
semplicemente click me così.

24
00:01:16,650 --> 00:01:22,850
in cui aggiungiamo semplicemente un tag script qui e sul nostro javascript, ma non è una buona pratica.

25
00:01:22,860 --> 00:01:27,260
Ora abbiamo bisogno del nostro file javascript e potremmo fare facilmente qualcosa

26
00:01:27,270 --> 00:01:34,170
Quindi, solo per farti avere l'abitudine giusta e creare un nuovo file, lo chiameremo semplicemente.

27
00:01:34,190 --> 00:01:42,540
J. S. nella stessa directory e dentro come sempre mi

28
00:01:42,540 --> 00:01:47,910
piace fare aggiungo un avviso solo per assicurarmi che siano connessi OK e quindi dobbiamo andare

29
00:01:51,130 --> 00:01:57,450
e collegarci a quello script e che deve essere sorgente equivale al punto di commutazione Jay Sì, solo come quello.

30
00:01:57,510 --> 00:02:02,880
Quindi andiamo avanti e apriamo questo file nel browser e vediamo cosa otteniamo.

31
00:02:02,880 --> 00:02:04,640
La prima cosa che farò notare qui.

32
00:02:04,800 --> 00:02:10,770
Si noti che abbiamo ricevuto l'avviso che dice che le cose sono collegate ma il pulsante non è ancora sulla pagina.

33
00:02:11,220 --> 00:02:14,710
Quindi in realtà non vediamo il pulsante fino a quando non mi libero dell'allarme.

34
00:02:15,030 --> 00:02:17,450
E questo è molto importante e vogliamo aggiustarlo.

35
00:02:17,490 --> 00:02:24,210
Quello che ci dice è che il nostro codice qui sopra è in esecuzione prima che il pulsante sia sulla pagina e il

36
00:02:25,140 --> 00:02:30,060
codice che andremo a scrivere si baserà sul fatto che il pulsante si trova sulla pagina.

37
00:02:30,150 --> 00:02:36,810
Non possiamo aggiungere un listener veloce, altrimenti il ​​listener di eventi funzionerà e aggiungerà eventi agli elementi presenti nella

38
00:02:36,810 --> 00:02:39,100
pagina nel momento in cui viene eseguito.

39
00:02:39,450 --> 00:02:41,290
Quindi abbiamo alcuni modi per risolvere questo problema.

40
00:02:41,310 --> 00:02:47,040
nostro script fino alla fine del corpo in modo da sapere con certezza che questo pulsante è stato caricato.

41
00:02:47,040 --> 00:02:49,710
Il più semplice per ora è solo spostare il

42
00:02:49,710 --> 00:02:55,020
Impareremo un altro modo per farlo quando arriveremo alla query su Jay, ma per ora

43
00:02:55,020 --> 00:02:55,680
funziona perfettamente.

44
00:02:55,980 --> 00:02:59,440
Quindi, se aggiorniamo ora vedrai i pulsanti già lì.

45
00:02:59,610 --> 00:03:03,140
E poi otteniamo l'avviso che dice collegarlo.

46
00:03:03,210 --> 00:03:05,470
Quindi ora parliamo della logica.

47
00:03:05,490 --> 00:03:09,460
Andiamo al nostro interruttore J. S. e selezionare il pulsante.

48
00:03:09,660 --> 00:03:19,920
Quindi il pulsante var equivale al pulsante di selezione delle query sui documenti e questo è solo un modo per selezionarlo, ovviamente.

49
00:03:20,970 --> 00:03:28,030
E poi vogliamo aggiungere il nostro listener di eventi in modo che il pulsante aggiunga il listener di

50
00:03:30,930 --> 00:03:36,650
eventi e poi la nostra funzione che eseguirà la funzione di callback proprio così.

51
00:03:37,290 --> 00:03:44,100
E mi piace sempre ricominciare da capo con un avviso che dice semplicemente cliccato solo per essere sicuro che stiamo selezionando la cosa

52
00:03:44,100 --> 00:03:46,450
giusta e che questa funzione è in esecuzione.

53
00:03:46,470 --> 00:03:51,910
Quando facciamo clic su Aggiorna, facciamo clic e otteniamo clic.

54
00:03:51,960 --> 00:03:52,860
Quindi è grandioso.

55
00:03:52,860 --> 00:03:59,280
Le cose sono collegate correttamente ora tutto ciò che dobbiamo fare è cambiare il colore di sfondo del corpo.

56
00:03:59,700 --> 00:04:04,920
Quindi vorrei iniziare semplicemente facendo il corpo del dump del documento e impostiamolo come viola.

57
00:04:05,100 --> 00:04:14,980
Quindi documenta lo stile del corpo che lo sfondo è uguale al viola e vedrai che ho usato il corpo del punto del documento.

58
00:04:15,150 --> 00:04:24,830
Potremmo anche fare un documento che interrompe il selettore e dare il nome del tag body o qualcosa di simile

59
00:04:24,840 --> 00:04:35,510
a documento acquisito da elementi get per nome tag body zero ma è molto più facile usare il body dot del documento.

60
00:04:35,670 --> 00:04:38,730
È solo una scorciatoia integrata nel documento.

61
00:04:38,730 --> 00:04:42,970
Così faccio che lo cambio in viola e dovremmo essere bravi ad andare qui.

62
00:04:43,110 --> 00:04:50,770
Se clicco, otteniamo un corpo viola, ma ovviamente parte di questo problema è stata la commutazione avanti e indietro.

63
00:04:50,940 --> 00:04:56,310
Quindi quando clicco qui torna al bianco e poi clicco di nuovo e torna in viola e continua

64
00:04:56,310 --> 00:04:57,870
a passare tra i due.

65
00:04:58,290 --> 00:05:06,030
Quindi quello che dovremo fare è aggiungere un po 'di logica e la nostra logica assomiglierà a

66
00:05:09,150 --> 00:05:16,040
qualcosa del genere se il bianco potrebbe diventare viola altrimenti farlo con qualcosa del genere.

67
00:05:16,350 --> 00:05:21,550
Quindi il modo in cui gestirò questo creerò un valore booleano chiamato è

68
00:05:21,630 --> 00:05:29,130
viola. Savar è viola e inizierà come falso perché quando aggiorno la pagina non è viola, quindi viola

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

70
00:05:29,970 --> 00:05:37,950
E poi quello che dovremo fare è all'interno del nostro javascript che controlleremo se è viola.

71
00:05:38,910 --> 00:05:45,450
Quindi, se è viola, vorremmo rendere bianco il colore dello sfondo proprio

72
00:05:49,200 --> 00:05:50,370
come questo.

73
00:05:50,520 --> 00:05:51,630
E il

74
00:05:54,690 --> 00:06:02,020
cambiamento deve essere bianco e poi altrimenti faremo la stessa cosa, tranne che lo renderemo viola.

75
00:06:02,040 --> 00:06:06,930
L'unico problema, naturalmente, è che il viola in questo momento è sempre falso.

76
00:06:06,930 --> 00:06:08,610
Vogliamo cambiarlo.

77
00:06:08,880 --> 00:06:16,230
Quindi se è viola se è viola il documento fino allo stile del corpo ma lo sfondo è uguale al

78
00:06:16,230 --> 00:06:23,190
bianco e quindi dovremmo dire che il viola è ora chiamato falso perché lo cambiamo in bianco e poi

79
00:06:23,190 --> 00:06:27,610
quando diciamo che è viola diremmo è il viola è uguale al vero.

80
00:06:27,840 --> 00:06:35,130
E questo deve essere un valore booleano, ovviamente non la stringa true o la stringa false.

81
00:06:35,160 --> 00:06:38,280
Quindi quello che abbiamo fatto qui è creare il nostro piccolo target tracker.

82
00:06:38,280 --> 00:06:41,020
Questo booleano è viola dall'inizio è falso.

83
00:06:41,070 --> 00:06:43,590
La prima volta è viola.

84
00:06:43,590 --> 00:06:44,510
Questo non succede

85
00:06:44,610 --> 00:06:49,990
Quindi andiamo al resto, cambiamo lo sfondo per essere viola e quindi il viola è ora vero.

86
00:06:50,190 --> 00:06:54,460
Quindi la prossima volta che l'utente fa clic è viola che è ora vero.

87
00:06:54,480 --> 00:06:58,890
Quindi se cambiamo lo sfondo per essere bianchi e quindi viola è impostato su falso e continuiamo a

88
00:06:58,890 --> 00:06:59,930
cambiare avanti e indietro.

89
00:06:59,970 --> 00:07:03,640
Quindi il consiglio di refresh control fa in modo di non avere errori.

90
00:07:03,900 --> 00:07:08,910
E ora proviamo a fare clic su viola bianco viola e bianco.

91
00:07:09,450 --> 00:07:15,030
Quindi c'è un piccolo fattore di ri che possiamo fare, che non dobbiamo impostare è viola per essere

92
00:07:15,090 --> 00:07:18,180
falso ed è viola per essere vero all'interno dell'istruzione if.

93
00:07:18,180 --> 00:07:21,110
Abbiamo un modo più breve per farlo solo scrivendo.

94
00:07:21,150 --> 00:07:25,360
Il viola è uguale a non è viola.

95
00:07:25,770 --> 00:07:31,280
Quindi questo lo cambierà tra vero e falso o falso e vero lo negherà.

96
00:07:31,440 --> 00:07:33,660
Quindi questa è una bella scorciatoia.

97
00:07:34,200 --> 00:07:40,080
Puoi vedere qui ora è Heigl's ed è un po 'più breve ma c'è un modo ancora più breve

98
00:07:40,080 --> 00:07:46,000
di fare ufficio, sperando che qualcuno di voi abbia pensato a quando abbiamo imparato a conoscere l'elenco delle classi.

99
00:07:46,110 --> 00:07:48,230
C'era un metodo chiamato interruttore.

100
00:07:48,240 --> 00:07:55,320
Quindi, se definiamo un CSA come classe e andiamo avanti e lo facciamo al posto del

101
00:07:55,320 --> 00:08:01,590
mio stile, creerò per ora un tag di stile e aggiungo una classe chiamata Dot.

102
00:08:01,590 --> 00:08:04,650
E chiamiamolo viola o solo viola.

103
00:08:04,650 --> 00:08:12,630
Questo è un nome di classe e diremo semplicemente che lo sfondo è viola e che è tutto ciò di cui abbiamo bisogno per fare

104
00:08:12,630 --> 00:08:16,680
ciò che stiamo per fare è attivare e disattivare questa classe sul corpo.

105
00:08:16,680 --> 00:08:25,140
Quindi torna qui e ho intenzione di copiare questo per ora e contato e tutto quello che dobbiamo fare è quando

106
00:08:25,140 --> 00:08:31,720
si fa clic sul pulsante e commentano questo o sbarazzarsi di questo sbarazzarsi di questo pure.

107
00:08:31,740 --> 00:08:37,820
Tutto ciò che vogliamo fare è documentare il corpo.

108
00:08:38,230 --> 00:08:41,900
Attiva senza classi.

109
00:08:42,210 --> 00:08:46,390
E poi il nome della classe che abbiamo appena creato era chiamato viola.

110
00:08:46,470 --> 00:08:53,000
Quindi ricorda che cosa farà questo se il corpo non ha la classe chiamata viola lo aggiungerà.

111
00:08:53,400 --> 00:08:56,510
Ma controlla se ha già il nome della classe viola.

112
00:08:56,580 --> 00:08:57,660
Lo rimuoverà.

113
00:08:57,660 --> 00:09:00,630
Quindi non dobbiamo tenere traccia di se è viola o bianco.

114
00:09:00,630 --> 00:09:05,850
Attualmente se la classe è applicata o se non lo è non abbiamo bisogno che questo sia il Boullion viola più.

115
00:09:06,270 --> 00:09:09,660
Fondamentalmente è tutto racchiuso al posto di un interruttore senza classi.

116
00:09:09,930 --> 00:09:11,390
Quindi mi rinfresco.

117
00:09:12,000 --> 00:09:15,980
Clicco e puoi vedere che sembra lo stesso.

118
00:09:16,110 --> 00:09:19,890
Ma se ispezioniamo e guardiamo il corpo.

119
00:09:19,890 --> 00:09:20,670
Eccoci qui.

120
00:09:20,790 --> 00:09:22,930
La classe di avviso è uguale a viola.

121
00:09:22,980 --> 00:09:26,310
E poi clicco e ora non abbiamo più la classica viola.

122
00:09:26,310 --> 00:09:27,570
Va via.

123
00:09:27,990 --> 00:09:29,830
Questo è documentato.

124
00:09:29,910 --> 00:09:32,760
Commuta la lista delle classi che è davvero molto utile.

125
00:09:32,760 --> 00:09:35,490
È molto più corto di questa logica qui.

126
00:09:35,490 --> 00:09:37,030
Va bene, questa è la mia soluzione.