1
00:00:00,510 --> 00:00:01,810
Pekâlâ, hoş geldiniz.

2
00:00:01,860 --> 00:00:07,110
Bu videoda şimdiye kadar farklı olay türlerinden bazıları hakkında biraz konuşmak

3
00:00:07,110 --> 00:00:14,070
istiyorum; tıklama olayıyla ve skor tutucu uygulamasındaki bir metin girişinde veya sayı girişinde kullandığımız

4
00:00:14,070 --> 00:00:15,640
değişim olayıyla karşılaştık.

5
00:00:15,780 --> 00:00:18,930
M.'ı tanıtarak başlayacağım. B. A. olay referansı.

6
00:00:18,930 --> 00:00:20,720
İşte buradayım web sayfası.

7
00:00:20,940 --> 00:00:26,790
Bu web sayfası, DOM API'sı tarafından tanınan tüm farklı etkinliklere bir referanstır.

8
00:00:26,910 --> 00:00:30,840
Ve aşağıya inersek, kaçının olduğu konusunda şaşkına dönebilirsin.

9
00:00:31,260 --> 00:00:36,570
Ve aslında bir sonraki alıştırmada size kaç tane olabileceğini saymak için

10
00:00:36,570 --> 00:00:41,040
bazı kodlar yazacağım. Eksileri geometrisini kullanmanın eğlenceli bir pratik örneği. Yani kaç tane var sayacağım ama şu an sadece bir ton var

11
00:00:41,310 --> 00:00:45,990
biliyorsun ve muhtemelen beş veya altı belki 10'a kadar gerçekten ortak olanlar

12
00:00:45,990 --> 00:00:53,490
her zaman sürükle ve bırak gibi şeyler kullanacak. Fareyle gezinen bir etkinlik tıklama olayları belki çift tıklamayla tuş vuruşu

13
00:00:53,520 --> 00:01:00,120
olaylarını etkiler ancak aksi halde daha belirsiz olanların hiçbiri kullanmaz veya belki bir projede bir kere kullanır.

14
00:01:00,120 --> 00:01:04,780
Ancak, bu web sayfasının var

15
00:01:05,190 --> 00:01:09,660
olduğunu bilmek hoşumuza gidiyor;

16
00:01:09,660 --> 00:01:10,510
gezinmekle ilgilidir.

17
00:01:10,740 --> 00:01:15,240
Ve bu videoda özellikle iki etkinliğe odaklanacağım, fareyle bir öğenin üzerinde gezinerek

18
00:01:15,240 --> 00:01:16,980
Ve buna fare bitti ve fare hareketi deniyor.

19
00:01:17,100 --> 00:01:20,490
Bu yüzden basit bir uygulamanın olması ve onu yeni

20
00:01:20,790 --> 00:01:26,550
dosyamda çağırması için çağıracağım ve normal normal ifademi ekleyeceğim ve bu, yapılacakların tam listesi olmayacak.

21
00:01:26,580 --> 00:01:31,910
Yeni ekleyemeyeceğiz ya da yapacağımız üç ya da dört müttefiki olan bir UL'e sahip olacağız.

22
00:01:31,920 --> 00:01:37,950
Yıkama kedi besleme kedi gibi şeyler ve köpek besleme yapmak ve kurtarmak gerekir.

23
00:01:38,070 --> 00:01:51,060
Dolayısıyla, yapacaklarımız üçümüz var ve şu an ihtiyacımız olanın hepsi bu.

24
00:01:51,060 --> 00:01:54,340
Ve ne yapmak istiyorum.

25
00:01:54,630 --> 00:01:55,530
Bunu tarayıcıda açacağım.

26
00:01:55,530 --> 00:01:58,590
Tıklayabilmek istiyorum ve bu, yapılacak işi

27
00:01:58,590 --> 00:02:04,380
gri yapmalı ve belki de çizgi üzerinde bir çizgi koymalıdır.

28
00:02:04,380 --> 00:02:05,190
Ancak aynı zamanda havada kalabilmek istiyorum ve hangisinin üzerinde gezindiğimi bilmek istiyorum.

29
00:02:05,340 --> 00:02:09,250
Bu yüzden, bu güzel kullanıcı geri bildirimlerini, bunlardan birinin üzerine getirdiğim halde alıyorum.

30
00:02:09,270 --> 00:02:12,960
Belki de rengi değiştireceksiniz veya cesur yeşil renkte yaparak

31
00:02:12,960 --> 00:02:18,210
başlayacak ve bu geçiş olaylarını kullanarak kullanıcı için yapabileceğiniz çok güzel efektler var.

32
00:02:18,210 --> 00:02:21,640
Bu yüzden dosyamızı oluşturmamız gerekse de şu an herhangi bir javascript yazabilmemiz için hemen göstereceğim.

33
00:02:21,810 --> 00:02:26,400
Böylece yeni bir dosya kaydedeceğim ve bunu yapılacak işler için arayacağım.

34
00:02:26,940 --> 00:02:31,010
Evet.

35
00:02:31,180 --> 00:02:32,200
Ve her

36
00:02:32,520 --> 00:02:44,580
zamanki gibi benim uyarı bağlantılı kaydetmek buraya git ve altındaki komut dosyamızı ekleyin ve kaynak deuce dot J. eşittir. S. ve kaydedeceğiz veya yenileyeceğiz ve alarmımızı alacağız.

37
00:02:44,580 --> 00:02:51,520
Bu da çalışıyor demektir.

38
00:02:51,630 --> 00:02:53,190
Bahsettiğim ilk olaya geçelim

39
00:02:53,850 --> 00:02:58,710
ve yapmamız gereken ilk şey, manipüle etmeden önce bir şeyler seçmek.

40
00:02:58,770 --> 00:03:00,100
Bu yüzden sadece ilk yalana kadar başlayacağım.

41
00:03:00,120 --> 00:03:03,050
Bu yüzden var müttefiki ECO'lar

42
00:03:03,180 --> 00:03:12,810
belgesini kullanacağım ve bir sorgu seçici müttefik yapacağım ve bu bana ilk yalan verdiğini hatırlıyorum çünkü bir

43
00:03:12,810 --> 00:03:18,210
sorgu seçici yapmadım ve sonra olay dinleyicisini ekleyeceğim İlk müttefikler

44
00:03:18,270 --> 00:03:19,560
İlk müttefik

45
00:03:19,740 --> 00:03:27,750
olarak olay dinleyicisi ekledik ve dinlediğimiz etkinlik tıklanmadı fare bitti.

46
00:03:28,290 --> 00:03:30,060
Ve sonra geri arama fonksiyonunu veriyoruz.

47
00:03:30,060 --> 00:03:32,350
Bir fare üzerinde gezinmeye başlar başlamaz mouseover'ın çalışması da ateş edecek.

48
00:03:33,300 --> 00:03:38,650
itibaren, ikinci ve şimdiki zamandaki ilâçlarımı ateşleyecekti.

49
00:03:38,790 --> 00:03:46,170
Dolayısıyla bu son müttefiklerimle çalışıyordum, üzerinde farem şu andan

50
00:03:46,170 --> 00:03:47,880
Dolayısıyla, fareyle üzerine gelme başladığında gerçekleşir.

51
00:03:47,880 --> 00:03:50,760
İlk olarak olay dinleyicisi mouseover'ı ekleyeceğim

52
00:03:50,910 --> 00:03:57,570
ve yalnızca bir geri arama fare yerine bir günlük yapacağız ve konsolumuzu yenileyecek

53
00:03:59,130 --> 00:04:05,730
olursak, bunu yalnızca ilk müttefiklerimize yaptığımızı hatırlayın ve oraya gidelim, mouseover alalım.

54
00:04:05,730 --> 00:04:06,950
Ayrıca her seferinde sürekli ateş etmediğini fark etmek önemlidir.

55
00:04:07,080 --> 00:04:11,610
Biliyorsun, bir eleman üzerinde gezinmenin başlangıcı olduğu zaman bitti.

56
00:04:11,660 --> 00:04:16,050
bildirimde olan kod ne olursa olsun bilemeyiz.

57
00:04:16,080 --> 00:04:20,610
Böylece, sürekli olarak günlüğe kaydetme veya geri

58
00:04:20,610 --> 00:04:21,770
Başlangıçta fareyi dolaştığımızda olur.

59
00:04:21,780 --> 00:04:24,530
Dolayısıyla, bu loglamayı iptal etmek yerine, müttefik rengini değiştirmeye çalışalım.

60
00:04:24,900 --> 00:04:29,660
Haydi yeşil yapalım.

61
00:04:29,670 --> 00:04:30,640
Böylece üzerinde gezinirken yeşil olur.

62
00:04:30,720 --> 00:04:32,880
Dolayısıyla, renk yeşil renge

63
00:04:32,880 --> 00:04:43,870
eşit olan ve onu yenileyip şimdi biraz daha büyük yapacağımızı ve bunu biraz daha büyük yapacağımızı ve fare başlangıcımda

64
00:04:43,880 --> 00:04:49,950
tazelenmesini izleyerek yeşile dönen ilk müttefik nokta stilini yapmamız gerekiyor.

65
00:04:49,950 --> 00:04:50,800
Ve sonra gittiğimde istediğim gibi olmayan yeşil kalır.

66
00:04:51,240 --> 00:04:55,300
Bunun sadece bir efekt efekti olmasını isteriz.

67
00:04:55,410 --> 00:04:57,110
Dolayısıyla müttefikler üzerine geldiğimde yeşil renkte yanıyor.

68
00:04:57,150 --> 00:04:59,460
Ancak durduğumda bunu yapmak için siyaha

69
00:04:59,490 --> 00:05:05,010
dönüyor, aslında başka bir etkinliğe ihtiyacımız var ve gezinme bittiğinde o etkinlik patlatılacak.

70
00:05:05,010 --> 00:05:07,380
Bu elemandan ayrıldığımızda buna Fare çıkışı denir, böylece aynı şeyi ilk müttefikler yapacağız.

71
00:05:07,410 --> 00:05:13,730
Fakat olay Lesser fare dışında.

72
00:05:14,090 --> 00:05:18,280
Ve sonra geri arama fonksiyonumuz ve ilk sinek stili saldırı rengini yapacağız ve siyaha döneceğiz.

73
00:05:19,680 --> 00:05:27,510
Tıpkı öyle ve yenilersek yeşilin gittiğini görebilir ve sonra

74
00:05:28,080 --> 00:05:37,130
fare dışarı yeşil ve benzeri bir şekilde siyah ve fare döner.

75
00:05:37,130 --> 00:05:39,590
Böylece, şimdi, temelde hangisinin

76
00:05:40,020 --> 00:05:45,000
seçileceğini göstereceğimiz, bu küçük gezinme efektini alıyoruz.

77
00:05:45,190 --> 00:05:46,960
Şimdi bunu her yalan için çalışmaya başlayalım.

78
00:05:46,950 --> 00:05:50,130
Yapmamız gereken sadece birkaç küçük değişiklik.

79
00:05:50,160 --> 00:05:52,230
Birincisi tüm müttefikleri seçmemiz gerekiyor.

80
00:05:52,260 --> 00:05:55,460
üç müttefiklerle birlikte bir liste çıkarıyor.

81
00:05:55,510 --> 00:06:02,940
Çok yalancı olmak için çok değişken değişecek mektubumuz tüm müttefiklerle belgelenmiş belgelerle yazılmış, böylece

82
00:06:02,940 --> 00:06:05,070
Ve elbette ki maalesef, işe yaramayan bir olay dinleyicisinin bunu yalan söyleyemeyiz.

83
00:06:05,400 --> 00:06:10,690
Dörtlü sıfırdan eşit bir for döngüsü yapmamız gerekiyor.

84
00:06:11,160 --> 00:06:14,860
Ben o bağlantıdan daha azım.

85
00:06:15,090 --> 00:06:18,950
Ayrıca artı.

86
00:06:19,080 --> 00:06:20,710
Ve umarım olayları eklemeyi veya

87
00:06:20,870 --> 00:06:25,150
bir şeyleri bir döngü yerine bir şeyi manipüle etmeyi biraz daha rahat hissetmeye

88
00:06:25,140 --> 00:06:30,100
başlıyorsunuz, burada bir grup seçiyoruz ve ardından dönüyoruz ve tek tek bir şey yapıyoruz.

89
00:06:30,090 --> 00:06:30,990
Dediğim gibi

90
00:06:31,180 --> 00:06:35,490
birkaç video önce gerçekten ortak desen gerçekten önemlidir onunla rahat olsun başlar.

91
00:06:35,500 --> 00:06:36,470
Dolayısıyla önce burada olmak yerine önce olay dinleyicisi ekleyelim.

92
00:06:36,490 --> 00:06:40,550
Müttefiklerimizle paralel gözlerle çalışıyoruz, bu yüzden müttefiklerimiz müttefiklerimizdir.

93
00:06:40,650 --> 00:06:45,760
Ve sonra bu kodu kopyalayacağım ve bu kodla ilgili bir sorun var.

94
00:06:45,930 --> 00:06:51,950
Demek istediğim işe yarayacak ama istediğimiz gibi çalışmıyor.

95
00:06:51,960 --> 00:06:55,090
Her müttefiklerimize bir olay dinleyicisi ekleyeceğiz.

96
00:06:55,360 --> 00:07:00,450
Fakat herhangi birinin üzerine fareyle baktığımızda yalnızca ilk müttefik nokta stilini siyah renkte değiştiriyoruz.

97
00:07:00,960 --> 00:07:06,430
Aslında işe yaramayacak çünkü ilk yalan artık tanımlanmadı.

98
00:07:06,540 --> 00:07:09,800
Adını değiştirdik.

99
00:07:09,810 --> 00:07:10,860
Ancak biz zaten istediğimiz bu değil.

100
00:07:11,040 --> 00:07:12,740
Bunun fare üzerinde olay üzerine oluştuğunun üzerinde gezinilen müttefik olmasını isteriz.

101
00:07:12,750 --> 00:07:17,220
Yani bu kelimeyi bu kelimeyle değiştirebiliriz.

102
00:07:17,440 --> 00:07:21,110
Bir etkinlik dinleyicisi yerine anahtar kelimenin,

103
00:07:21,270 --> 00:07:26,400
olayın tetiklendiği öğeyi veya öğeyi belirtir olduğunu unutmayın.

104
00:07:26,400 --> 00:07:28,020
Dolayısıyla bu stil ancak aynı ekranda renkli olur ve sonra bu kodu tekrar tekrar çoğaltırız.

105
00:07:28,260 --> 00:07:33,210
Ama fare yerine fare çıkaracağız ve Green'e

106
00:07:33,850 --> 00:07:41,940
dönmek yerine siyaha geri döneceğiz ve bundan kurtulup yenileyip oraya gidiyoruz.

107
00:07:42,630 --> 00:07:48,780
Güzel hover efektimiz var.

108
00:07:48,880 --> 00:07:50,710
Bu yüzden konuşacakları son şey, bunu sadece biraz daha eksiksiz yapmak için bir tıklama dinleyicisi eklemek.

109
00:07:51,060 --> 00:07:55,830
Aynı şey, olay dinleyicisi tıklama ekleme veya geri arama işlevi olduğunu düşündüğüm gibi.

110
00:07:56,230 --> 00:08:07,150
Ve burada yapacağımız şey bir sınıf kullanmaktır.

111
00:08:07,480 --> 00:08:10,610
Bu yüzden önce sınıfı ekleyeceğim.

112
00:08:10,830 --> 00:08:12,910
​​sınıfı listesini geçireceğim söyleyeceğim.

113
00:08:12,900 --> 00:08:19,520
Var değil, ancak bu sınıf listesi yapar ve gidip geçiş başlangıç

114
00:08:19,600 --> 00:08:20,290
Ve biz sadece sınıfı bitti olarak arayacağız.

115
00:08:20,560 --> 00:08:22,680
Mesele şu ki bunlardan birine tıklayabilirim ve Grey dışarıya çıkmalı ve üstü çizili bir efekt sağlamalıyım.

116
00:08:23,110 --> 00:08:29,930
Ve tanımlanmış bir sınıfım olmamasına rağmen yine de eklendi,

117
00:08:30,030 --> 00:08:35,920
böylece konsolun açıldığını gösterebilir ve bunlardan birini inceleyelim.

118
00:08:35,910 --> 00:08:38,720
Ve sonra aslında üzerine tıklayalım ve görebileceğiniz ilk

119
00:08:39,070 --> 00:08:44,080
olanı görebilir veya tıklayabilirsiniz, burada yeşil ve siyah renk, burada üzerine gelmek şeklinde değişiyor.

120
00:08:44,080 --> 00:08:48,470
Ancak bu ilkini tıkladığımda, sınıfın tamamlandığını eklediğini görebilirsiniz.

121
00:08:48,490 --> 00:08:52,920
Ve sonra tekrar tıklayın ve gider.

122
00:08:52,920 --> 00:08:55,740
Şimdi sadece sınıfı tanımlamamız lazım.

123
00:08:55,750 --> 00:08:58,070
Şimdi bunu yapalım.

124
00:08:58,330 --> 00:08:59,290
Yüce saygıdeğer

125
00:08:59,380 --> 00:09:07,350
ve yeni bir dosya hazırlayacağım ve bu işi Cs'lere yapacağım gibi yapacağım ve yaptığımız ilk şey, sınıfımızı tanımlamak.

126
00:09:07,360 --> 00:09:10,310
Metin dekorasyonuyla yaptığımız bir vuruş efekti

127
00:09:10,950 --> 00:09:16,960
vereceğim ve bu çizgiyi ayarladık ve opaklığın da 0 olacağı şekilde opaklığı değiştirdik. 5 ve kaydetmek.

128
00:09:16,950 --> 00:09:24,450
dosyalamak için yaşlandık, Due'nun bize gutsiest ve biz kaydedebiliriz.

129
00:09:24,820 --> 00:09:30,160
Ve tabii ki bunu değerlendirmeye başlamak için ona bağlamanız gerekiyor ya da onlarla

130
00:09:30,900 --> 00:09:33,990
Şimdi onu test edelim.

131
00:09:34,000 --> 00:09:35,440
Sayfayı yeniliyorsun.

132
00:09:35,660 --> 00:09:36,830
Ben havada kaldım.

133
00:09:36,850 --> 00:09:37,470
Bu yüzden, siyah ve yeşil rengi değiştiren iki olay var.

134
00:09:37,500 --> 00:09:41,520
Ve şimdi tıklayabilir ve üstü çizili bir efekt elde ederiz.

135
00:09:41,520 --> 00:09:45,360
Ve bu çizgi de geçer.

136
00:09:45,540 --> 00:09:47,900
manuel olarak değiştirmek yerine birincisi.

137
00:09:48,120 --> 00:09:53,550
Yapacağımız bazı küçük değişiklikler var Ancak, javascript dosyamıza geri dönersek, birincisi rengi

138
00:09:53,560 --> 00:09:56,590
Yeşil ve siyah olacak şekilde değiştiriliyor.

139
00:09:56,640 --> 00:09:58,350
Bence kendi sınıfımızla yapmak daha iyi.

140
00:09:58,600 --> 00:10:00,800
Bu yüzden yeni bir sınıf yapacağım

141
00:10:00,850 --> 00:10:07,240
ve bunu seçilmiş olarak arayacağım ve sonra ne zaman seçileceğini söyleyeceğim metin veya renk bunun gibi yeşil olmalı.

142
00:10:07,240 --> 00:10:12,060
Ve sonra Javascript'le birlikte gideceğiz.

143
00:10:12,310 --> 00:10:13,880
Ve biz yapmak istediğimizin üzerine fare tıkladığınızda, bu sınıf listesinin seçili olduğunu eklersin deyim.

144
00:10:13,990 --> 00:10:21,250
açmak için javascript kullanabiliyoruz ve SAS aslında stilin sorumluluğunu üstleniyor.

145
00:10:23,160 --> 00:10:29,340
Ve bu, endişeler arasındaki ayrıma geri dönüyor; fikrimiz,

146
00:10:29,350 --> 00:10:36,250
javascript'imizin bireysel stilleri manipüle etmesini istemiyoruz, aksine CSS'lerimizin bölümlerini

147
00:10:36,250 --> 00:10:38,170
Bu yüzden üzerine geldiğimizde ve üzerine

148
00:10:38,460 --> 00:10:44,550
geldiğimizde sınıfı seçeceğiz ya da karışıklık duyduğumuzda bu aptal sınıf listesini kaldırmayı seçeceğiz ve yenilemeyi kaydettiğimizde oldukça iyi göründüğünü göreceksin.

149
00:10:44,560 --> 00:10:55,040
Tıklayın, vuruşumuzu alalım.

150
00:10:55,530 --> 00:10:59,460
Tamam.

151
00:11:00,080 --> 00:11:00,590
Yapılması gereken küçük bir liste var.

152
00:11:00,610 --> 00:11:02,260
Bu, bunu yapmanın biraz daha güzel bir yoludur.

153
00:11:02,740 --> 00:11:05,000
İşlevsel olarak aynı görünüyor.

154
00:11:05,050 --> 00:11:06,390
Bir seferde bir tane stil ekleyip düzeltmek yerine sınıfları kullanmak daha iyi bir uygulamadır.

155
00:11:06,420 --> 00:11:11,720
Özetlemek için iki yeni olay mouseover ve fareyi gördük.

156
00:11:11,740 --> 00:11:16,270
Ayrıca, bu anahtar kelimeyi kullandığımız bir döngü yerine etkinlikler oluşturan daha pratik bazı uygulamalarımız da var

157
00:11:16,530 --> 00:11:21,690