1
00:00:00,380 --> 00:00:02,130
OK wrócimy.

2
00:00:02,130 --> 00:00:05,070
Więc myślę, że nadszedł czas, aby dać trochę tego strzału na własną rękę.

3
00:00:05,400 --> 00:00:07,310
Więc mam szybki ćwiczenia.

4
00:00:07,560 --> 00:00:15,620
Wszystko, co musisz zrobić, to utworzyć nowy wiek lub złożyć nowy plik JavaScript i dodać pojedynczy przycisk z wiekiem do mojego pliku.

5
00:00:15,630 --> 00:00:16,920
to jest to!

6
00:00:16,920 --> 00:00:24,780
A następnie po kliknięciu tego przycisku wszystko co musisz zrobić, to zmienić kolor tła ciała z białego na fioletowy.

7
00:00:24,780 --> 00:00:25,600
Jak to zrobiłeś.

8
00:00:25,600 --> 00:00:27,190
Zostawię ją do siebie.

9
00:00:27,240 --> 00:00:41,280
Istnieje kilka różnych sposobów, że można to zrobić ze względu na różne rzeczy, które Mówiliśmy o tak daleko, ale trzeba uruchomić jakiś kod po kliknięciu na przycisk i kod powinien zmienić kolor tła pomiędzy dwoma kolorami czy to fioletowy i biały lub wybrać jakieś lepsze kolory.

10
00:00:41,280 --> 00:00:42,220
Całkowicie się z tobą.

11
00:00:42,510 --> 00:00:44,010
Więc Pasic wideo teraz.

12
00:00:44,190 --> 00:00:45,560
Daj, że uderzenie na własną rękę.

13
00:00:45,580 --> 00:00:52,460
To naprawdę ważne, aby to zrobić, a następnie wrócić, gdy jesteś gotowy i pójdziemy na rozwiązanie razem.

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

15
00:00:55,350 --> 00:00:58,110
Więc pomówmy o tym, jak możemy dokonać tej pracy.

16
00:00:58,110 --> 00:01:04,870
Na początek potrzebujemy wieku kobiet plik, który mam tu trzeba dodać w moim HMO.

17
00:01:05,310 --> 00:01:16,590
Nazwijmy ten kolor przełącznik i wszystko, co potrzebne jest jeden przycisk, a my po prostu dodaj kliknij mnie tak po prostu.

18
00:01:16,650 --> 00:01:27,260
Teraz musimy nasz plik JavaScript i możemy łatwo zrobić coś, gdzie wystarczy dodać tag skryptu tu i na naszym javascript tam, ale nie jest to wielka praktyka.

19
00:01:27,270 --> 00:01:34,170
Więc po prostu dostać w dobrym zwyczaju i zrobić nowy plik będziemy nazywać go po prostu przełącznik.

20
00:01:34,190 --> 00:01:57,450
J. S. w tym samym katalogu i wewnątrz jak zawsze chciał zrobić dodam alert po prostu mieć pewność, że nawiązaniu OK, a następnie musimy iść i Link do tego skryptu i że musi być równa przełączania źródła dot Jay Tak właśnie tak.

21
00:01:57,510 --> 00:02:02,880
Więc chodźmy do przodu i otworzyć ten plik w przeglądarce i zobacz, co mamy.

22
00:02:02,880 --> 00:02:04,640
Pierwszą rzeczą, którą będę podkreślić tutaj.

23
00:02:04,800 --> 00:02:10,770
Zauważ, że mamy alert, który mówi rzeczy są połączone, ale przycisk nie jest jeszcze na stronie.

24
00:02:11,220 --> 00:02:14,710
Tak więc w rzeczywistości nie widać przycisku dopóki nie pozbyć się alertu.

25
00:02:15,030 --> 00:02:17,450
I to jest bardzo ważne i chcemy to naprawić.

26
00:02:17,490 --> 00:02:30,060
Co to mówi nam, że nasz kod tutaj jest uruchomiony zanim przycisk znajduje się na stronie w ogóle i kod, który zamierzamy napisać będzie polegać na tym przycisku znajduje się na stronie.

27
00:02:30,150 --> 00:02:39,100
Nie możemy dodać szybkie słuchacza w inny detektor zdarzeń będzie się tylko do pracy i dodawać wydarzenia do elementów znajdujących się na stronie w momencie, który jest prowadzony.

28
00:02:39,450 --> 00:02:41,290
Więc mamy kilka sposobów mocowania tego.

29
00:02:41,310 --> 00:02:49,710
Najprostszym na razie jest po prostu przenieść nasz skrypt w dół do końca korpusu tak, że wiemy na pewno OK, przycisk ten został załadowany.

30
00:02:49,710 --> 00:02:55,680
Dowiemy się o inny sposób to zrobić, gdy mamy do Jay zapytania, ale to działa perfekcyjnie do teraz.

31
00:02:55,980 --> 00:02:59,440
Jeśli więc odświeżyć teraz zobaczysz przyciski już tam jest.

32
00:02:59,610 --> 00:03:03,140
A potem mamy alert, który mówi, podłącz go.

33
00:03:03,210 --> 00:03:05,470
Więc teraz pomówmy o logice.

34
00:03:05,490 --> 00:03:09,460
Chodźmy do naszej przełączania J.S. i wybierz przycisk.

35
00:03:09,660 --> 00:03:20,620
Tak Przycisk var równa zapytań dokumentu przycisk wyboru i że jest tylko jeden sposób, aby wybrać go oczywiście.

36
00:03:20,970 --> 00:03:36,650
A potem chcemy dodać nasz detektor zdarzeń przycisku, który dodać detektor zdarzeń kliknięcia, a następnie naszą funkcję, która będzie uruchomić funkcję zwrotną tak po prostu tak.

37
00:03:37,290 --> 00:03:46,450
I zawsze chciał zacząć od nowa z wpisem, że po prostu mówi kliknąłeś by upewnić się, że mamy do wyboru słuszne i że funkcja ta polega na uruchomieniu.

38
00:03:46,470 --> 00:03:51,910
Kiedy robimy kliknij aby odświeżyć Miejmy kliknij i mamy kliknięciu.

39
00:03:51,960 --> 00:03:52,860
Więc to jest wielki.

40
00:03:52,860 --> 00:03:59,280
Rzeczy są podłączone prawidłowo teraz wszystko, co musisz zrobić, to zmienić kolor tła ciała.

41
00:03:59,700 --> 00:04:04,920
Więc chciałbym zacząć po prostu robi dokument ciało zrzutu i niech po prostu ustawić się na fioletowo.

42
00:04:05,100 --> 00:04:14,980
Więc dokumentować się styl ciała, że ​​tło jest równa fioletowy i zobaczysz kiedyś dokument dot ciała.

43
00:04:15,150 --> 00:04:35,510
Możemy również zrobić dokument kwerendy selektora i podać nazwę znacznika ciała lub coś takiego dokumentu diked uzyskać elementy o nazwie znacznika zerowego ciała, ale o wiele łatwiej po prostu użyć dokumentu dot ciała.

44
00:04:35,670 --> 00:04:38,730
To tylko skrót, który jest wbudowany w dokumencie.

45
00:04:38,730 --> 00:04:42,970
Więc ja, że ​​mogę zmienić go na fioletowy i powinniśmy być dobry, aby udać się tutaj.

46
00:04:43,110 --> 00:04:50,770
Jeśli kliknę otrzymujemy fioletowy ciało, ale oczywiście częścią tego problemu zostało przełączanie tam iz powrotem.

47
00:04:50,940 --> 00:04:57,870
Więc kiedy kliknij tutaj wraca do bieli, a potem kliknij ponownie wraca do fioletu i utrzymuje przełączanie między nimi.

48
00:04:58,290 --> 00:05:16,040
Więc to, co musimy zrobić, to dodać trochę logiki i nasza logika będzie wyglądać mniej więcej tak, jeśli bieli może uzyskać fioletowy innego zrobić to z czymś takim.

49
00:05:16,350 --> 00:05:29,930
Więc sposób, że mam zamiar się tym zająć Zamierzam stworzyć wartość logiczną nazwie jest fioletowy Savar jest fioletowy i to ruszy fałszywa, ponieważ gdy odświeżam stronę to nie jest tak, fioletowy fioletowy jest fałszywe.

50
00:05:29,970 --> 00:05:37,950
A potem, co musimy zrobić, to wewnątrz naszej javascript mamy zamiar sprawdzić, czy jest fioletowy.

51
00:05:38,910 --> 00:05:50,370
Więc jeśli to jest fioletowy, a następnie będziemy chcieli, aby kolor tła biały podobnie jak ten.

52
00:05:50,520 --> 00:06:02,020
A zmiana musi być biały, a następnie przeciwnym razie zrobimy to samo z wyjątkiem zrobimy to fioletowy.

53
00:06:02,040 --> 00:06:06,930
Jedynym problemem jest to, że oczywiście jest fioletowy teraz jest zawsze fałszywe.

54
00:06:06,930 --> 00:06:08,610
Jedziemy chce to zmienić.

55
00:06:08,880 --> 00:06:27,610
Więc jeśli jest fioletowy, jeśli jest fioletowy dokument do nadwozia, ale tło jest równe białe a potem powie jest fioletowy jest teraz nazywa się fałszywe, ponieważ po prostu go zmienić kolor na biały, a potem, kiedy powiedział, że jest fioletowy powiedzielibyśmy jest fioletowy równa prawdziwe.

56
00:06:27,840 --> 00:06:35,130
I to musi być wartość logiczna oczywiście nie jest prawda, czy ciąg ciąg fałszywe.

57
00:06:35,160 --> 00:06:38,280
Więc co zrobiliśmy tutaj, to stworzyć swój mały cel trackera.

58
00:06:38,280 --> 00:06:41,020
Ta logiczna jest fioletowy startu jest fałszywe.

59
00:06:41,070 --> 00:06:43,590
Za pierwszym razem przez to jest fioletowy.

60
00:06:43,590 --> 00:06:44,510
To się nie dzieje.

61
00:06:44,610 --> 00:06:49,990
Więc idziemy do indziej zmienić tło być fioletowy i fioletowy jest prawdą.

62
00:06:50,190 --> 00:06:54,460
Więc następnym razem, gdy użytkownik kliknie to fioletowy, że teraz jest prawdą.

63
00:06:54,480 --> 00:06:59,930
Jeśli więc zmienić tło być białe, a następnie jest fioletowy jest ustawiona na false, a my ciągle przełączanie tam iz powrotem.

64
00:06:59,970 --> 00:07:03,640
Więc odświeżania Rada sprawdzania pilnuje mamy żadnych błędów.

65
00:07:03,900 --> 00:07:08,910
A teraz spróbujmy klikając fioletowy biały fioletowy i biały.

66
00:07:09,450 --> 00:07:18,180
Więc tam mały współczynnik ponownie, że możemy zrobić co jest nie musimy ustawić się fioletowy być fałszywe i jest fioletowy, żeby było prawdziwe wewnątrz if.

67
00:07:18,180 --> 00:07:21,110
Mamy krótszą drogę robi, że po prostu piśmie.

68
00:07:21,150 --> 00:07:25,360
Czy nie jest równa fioletowy fioletowy.

69
00:07:25,770 --> 00:07:31,280
Więc to po prostu będzie przełączać je między prawdą i fałszem, czy fałszywe i prawdziwe tylko neguje go.

70
00:07:31,440 --> 00:07:33,660
Tak, że jest ładny skrót.

71
00:07:34,200 --> 00:07:46,000
Widać tutaj, że teraz nadszedł Heigl i to trochę krótsze, ale nie ma jeszcze krótszy sposób prowadzenia biura, które miejmy nadzieję, że niektórzy z was myślał o tym, kiedy dowiedzieliśmy się o liście klasowej.

72
00:07:46,110 --> 00:07:48,230
Była to metoda zwana przegubowego.

73
00:07:48,240 --> 00:08:01,590
Jeśli więc zdefiniować CSA klasie i chodźmy naprzód i zrobić, że zamiast mojego stylu Idę zrobić tag stylu teraz i dodać klasę o nazwie Dot.

74
00:08:01,590 --> 00:08:04,650
I niech po prostu nazwać fioletowy lub po prostu fioletowy.

75
00:08:04,650 --> 00:08:16,680
To jest nazwa klasy, a my po prostu powiedzieć tło jest fioletowy i to wszystko, co musimy zrobić, co mamy zamiar zrobić, to włączyć tę klasę i wyłączać na ciele.

76
00:08:16,680 --> 00:08:31,720
Więc wróć tu i będę po prostu skopiować to na teraz i odliczył i wszystko, co trzeba zrobić, to po kliknięciu na przycisk i komentują to uwagę lub pozbyć się tego pozbyć to za dobrze.

77
00:08:31,740 --> 00:08:37,820
Wszystko to wszystko, co chcesz zrobić, to udokumentować się ciała.

78
00:08:38,230 --> 00:08:41,900
Bezklasowe przegubowego.

79
00:08:42,210 --> 00:08:46,390
A następnie nazwę klasy po prostu wykonane nazywano fioletowy.

80
00:08:46,470 --> 00:08:53,000
Więc pamiętaj, co to zrobi to, jeśli organizm nie ma klasy o nazwie fioletowy będzie go dodać.

81
00:08:53,400 --> 00:08:56,510
Ale to sprawdza, czy to ma nazwę klasy fioletowy już.

82
00:08:56,580 --> 00:08:57,660
Będzie ją usunąć.

83
00:08:57,660 --> 00:09:00,630
Tak więc nie trzeba śledzić, czy to fioletowy lub biały.

84
00:09:00,630 --> 00:09:05,850
Obecnie, jeśli klasa jest zastosowane lub jeżeli nie jest to, że nie potrzebujemy to fioletowy Boullion więcej.

85
00:09:06,270 --> 00:09:09,660
To w zasadzie wszystko opakowane zamiast bezklasowego przełączania.

86
00:09:09,930 --> 00:09:11,390
Więc odświeżyć.

87
00:09:12,000 --> 00:09:15,980
Klikam i widać, że wygląda tak samo.

88
00:09:16,110 --> 00:09:19,890
Ale jeśli inspekcji i patrzymy na ciało.

89
00:09:19,890 --> 00:09:20,670
No to ruszamy.

90
00:09:20,790 --> 00:09:22,930
Klasa Wskazówki równa fioletowy.

91
00:09:22,980 --> 00:09:26,310
A potem kliknij i teraz nie mamy już klasyczny fioletowy.

92
00:09:26,310 --> 00:09:27,570
To odchodzi.

93
00:09:27,990 --> 00:09:29,830
To dokumentuje się ciało.

94
00:09:29,910 --> 00:09:32,760
Lista przełącznik klasy, który jest naprawdę bardzo przydatne.

95
00:09:32,760 --> 00:09:35,490
To dużo krótsza niż tej logiki tutaj.

96
00:09:35,490 --> 00:09:37,030
Dobrze więc, że to moje rozwiązanie.