1
00:00:00,210 --> 00:00:02,150
Tamam geri geleceğiz.

2
00:00:02,400 --> 00:00:07,620
Javascript girişinde, javascript öğrenmenin önemli nedenlerinden birinin, sayfalarımızı interaktif hale

3
00:00:07,680 --> 00:00:10,520
getirmek için kullanabileceğimiz olduğuna değindim.

4
00:00:10,680 --> 00:00:16,590
Bir kullanıcı bir düğmeyi tıklattığında veya ok tuşuna tıkladığında veya yaptıklarında birşey

5
00:00:16,590 --> 00:00:17,920
yazarsa kodu çalıştırabiliriz.

6
00:00:18,090 --> 00:00:23,310
Belli bir noktada yürütüldüğünde, sayfanın başında yürütülmeyen bazı karşılık gelen

7
00:00:23,310 --> 00:00:24,880
kodlara sahip olabiliriz.

8
00:00:25,410 --> 00:00:28,290
Bunu yapmak için Dom olaylarıyla ilgili konuşmamız gerekiyor.

9
00:00:28,320 --> 00:00:31,250
Dolayısıyla bu video Dom etkinliklerine bir giriş olacak.

10
00:00:31,260 --> 00:00:36,300
Kavramsal olarak onları kurma süreci ve daha sonra sözdizimi.

11
00:00:36,300 --> 00:00:38,660
Dediğim gibi olaylar her yerde.

12
00:00:38,670 --> 00:00:43,170
Web sayfasında ne zaman etkileşim kurduğunuzu, bir bağlantı üzerinden gezinebileceğiniz ve bir

13
00:00:43,170 --> 00:00:47,330
şey ortaya çıkabilecek bir düğme gibi şeyleri tıklattığınız farklı şeyleri düşünün.

14
00:00:47,370 --> 00:00:50,320
Elemanları belirli sayfalara sürükleyip bırakabilirsiniz.

15
00:00:50,550 --> 00:00:55,440
Kullanıcı çift tıklamayla çalışan koda sahip olmak isteyebilir veya aslında bu web sayfasının

16
00:00:55,440 --> 00:00:56,650
birkaç örneği vardır.

17
00:00:56,670 --> 00:01:03,550
Bu slayt dot com bir Web sitesidir ve slaytları değiştirmek için sol ve sağ ok tuşlarına basıyorum.

18
00:01:03,690 --> 00:01:09,300
Bu nedenle, sol ok tuşuna veya sağ ok tuşuna basarken veya buraya tıkladığımda bazı

19
00:01:09,300 --> 00:01:10,050
kodlar çalıştırılıyor.

20
00:01:10,590 --> 00:01:15,780
Bu aynı zamanda bir etkinlik ve şu anki slaytı değiştiren bazı kod çalıştıran bir şey yapıyor.

21
00:01:16,950 --> 00:01:20,930
Bu noktada olaylar her yerde ve gerçekten heyecan vericidir.

22
00:01:20,920 --> 00:01:26,070
Öğretmek istediğim en önemli konulardan biri budur, çünkü şimdi web sayfalarımızı etkileşimli

23
00:01:26,070 --> 00:01:31,230
hale getirebilirsek, değişen renkleri değiştiren metinler hakkında öğrendiğimiz manipülasyonu alabilir ve daha

24
00:01:31,230 --> 00:01:35,070
sonra belirli bir şey olduğunda bu işlemi gerçekleştirebiliriz.

25
00:01:35,070 --> 00:01:38,340
Yani bu gerçekten yurt manipüle etme potansiyelinin kilidini açar.

26
00:01:38,370 --> 00:01:43,170
Oyunu nasıl hazırlayacağımız bu şekilde form doğrulayıcıları yapacağız tic tac toe

27
00:01:43,170 --> 00:01:49,050
Gerçekten güzel bir renk seçici oyunu yapacağız ve hepsinin bu olaylardan kaynaklandığını görüyoruz.

28
00:01:49,050 --> 00:01:55,890
Bu yüzden, bu olayların işleyiş şekli, bunları belirli öğelere iliştirmek olduğumuzdan, ilk düğme

29
00:01:55,890 --> 00:02:04,440
veya ikinci H-1 gibi bir öğeyi veya bir türün metne eşit olduğu girişi seçtikten sonra ona

30
00:02:04,440 --> 00:02:07,590
bir olay dinleyicisi iliştirelim Seçilen öğe.

31
00:02:07,920 --> 00:02:15,540
olarak, bir düğmede bir tıklama dinlediğimiz halde, bir H1'de bir gezinme olayını dinleyebiliriz, bir metin girişinde önemli

32
00:02:15,540 --> 00:02:20,880
basın olayını dinleyebiliriz ve o olaylar arasındaki farklar hakkında daha fazla konuşacağız.

33
00:02:20,880 --> 00:02:21,990
Bir örnek

34
00:02:21,990 --> 00:02:26,490
Javascript'te çok çeşitli etkinlikler var, ancak önemli olan, belirli

35
00:02:26,490 --> 00:02:30,170
bir öğede dinlenen bir etkinliğe sahip olmamız.

36
00:02:30,180 --> 00:02:34,890
Bu yüzden önce daha önce olduğu gibi seçme hakkında konuşacağım ve daha sonra manipüle ettiğim haller geçerlidir.

37
00:02:34,920 --> 00:02:41,190
Bir şey seçmemiz gerekiyor ve sonra gerçekleşen manipülasyon, seçtiğimiz şeyin

38
00:02:41,190 --> 00:02:43,740
bir olay dinleyicisi eklemesidir.

39
00:02:43,740 --> 00:02:48,930
Özellikle, olay dinleyicisi olarak adlandırılan her zaman kullanacağımız bir yöntem var.

40
00:02:49,650 --> 00:02:56,200
ve seçili bir şey var, o zaman olay dinleyicisi olarak adlandırıyoruz ve biz iki argüman veriyoruz.

41
00:02:56,200 --> 00:03:02,160
O halde, olay dinleyicisinde kullandığımız şey, ilk düğme veya girdi türü gibi bir öğe seçtiğimizden,

42
00:03:02,160 --> 00:03:03,070
çünkü şifre

43
00:03:03,330 --> 00:03:06,950
İlki, dinlemek istediğimiz olayın türüdür.

44
00:03:07,350 --> 00:03:12,790
Ve ikinci argüman o olay gerçekleştiğinde çalıştırmak istediğimiz koddur.

45
00:03:13,260 --> 00:03:14,330
İşte bir örnek:

46
00:03:14,400 --> 00:03:19,590
Bir sayfadaki ilk düğmeyi, düğmenin nerede olduğu veya nasıl göründüğü ya da herhangi bir şeyin herhangi

47
00:03:19,590 --> 00:03:22,060
bir düğme ile alakalı olmadığı halde seçiyorum.

48
00:03:22,350 --> 00:03:29,430
dinleyicisinde düğmeyi çağırıyorum ve ikinci argümanı buraya kadar giden bir işlevdir.

49
00:03:29,430 --> 00:03:30,540
Sonra olay

50
00:03:30,750 --> 00:03:33,690
Ve bu kod hemen çalıştırılmaz.

51
00:03:33,690 --> 00:03:35,910
Unutmayın buna bir geri arama denir.

52
00:03:35,910 --> 00:03:38,140
Bu kod hemen çalıştırılmaz.

53
00:03:38,430 --> 00:03:42,000
Bu olay bir kez patladığında çalıştırılır.

54
00:03:42,000 --> 00:03:46,390
Bu yüzden düğmeye bir kez tıkladığınızda javascript geri arar gider.

55
00:03:46,440 --> 00:03:51,630
Bu iş, hey sizi aydınlatmanın ve buraya gelip hazır olmanızı söyler diyor.

56
00:03:51,630 --> 00:03:56,040
Ve sonra bu kod çalıştırılır ve biz birisi düğmesini tıklamak günlüğü değil danışmanlık olsun.

57
00:03:56,250 --> 00:04:02,130
Dolayısıyla, bir düğme, tıklandığında seçilen belirli düğme ile hızlı bir

58
00:04:02,130 --> 00:04:05,290
şekilde çalıştırıldığında bu işlev çalışacaktır.

59
00:04:05,910 --> 00:04:07,540
İşte başka bir örnek.

60
00:04:07,830 --> 00:04:15,060
Bu dava burada bir düğme ve bir paragraf işareti var ve ikisini de Kery seçici ile seçtim ve

61
00:04:15,750 --> 00:04:21,630
ikisini de değişkenlere kaydettim ve daha sonra yaptığımız tek şey bir tıklama dinleyicisi eklemekti bu

62
00:04:21,630 --> 00:04:26,910
yüzden düğme olay dinleyicisi tıklaması ekliyor ve sonra İkinci argüman bu geri arama işlevidir.

63
00:04:26,910 --> 00:04:32,610
ne yapacağım, paragraflar metin içeriği değiştiğinde birisi düğmeye tıklanacak ve

64
00:04:32,610 --> 00:04:39,660
düğmeyi tıkladığımda görebiliyor musun hiç kimse beni tıklattı ve birisi düğmeyi tıklattı.

65
00:04:39,660 --> 00:04:42,260
Ve o düğme tıklandığında

66
00:04:42,930 --> 00:04:50,180
Şimdi, Dom demo sayfamızı kullanarak hızlı bir gösteri yapacağım, bu H-1'i buradan

67
00:04:50,180 --> 00:04:50,790
başlatalım.

68
00:04:50,810 --> 00:04:53,700
Kullanıcı tıkladığında rengi değiştirin.

69
00:04:53,780 --> 00:04:58,310
Bunu yapmak için her zaman H-1'i seçerek başlamamız gerekir.

70
00:04:58,810 --> 00:05:00,510
Bu yüzden bir sürü seçeneğimiz var.

71
00:05:00,530 --> 00:05:09,070
Sorgu seçici H-1'in elinde olduğundan emin olduğumuz kral seçim belgesini kullanacağım.

72
00:05:09,310 --> 00:05:10,460
Tamam.

73
00:05:10,460 --> 00:05:14,920
Ardından, olay dinleyicisi eklemek için H-1 yazıyoruz.

74
00:05:15,010 --> 00:05:16,790
İki argüman olduğunu unutmayın.

75
00:05:16,940 --> 00:05:19,910
Birincisi, dinlediğimiz olay.

76
00:05:20,060 --> 00:05:24,050
Farklı olaylardan farklı seçenekler hakkında konuşmak için biraz daha zaman harcayacağız.

77
00:05:24,050 --> 00:05:30,050
Şimdilik tıklamayı sadece yapmaktayız ve ikincisi ise kullanıcı tıkladığında çalıştırmak istediğimiz kod.

78
00:05:30,310 --> 00:05:37,060
İşleve başlayın ve gerçekten basit bir şekilde başlayın ve kullanıcı tıkladığında bir uyarı yapın.

79
00:05:37,160 --> 00:05:44,330
Bu yüzden her biri bir tıklama ile böyle bir uyarı yapacağız.

80
00:05:44,750 --> 00:05:46,990
Ve şimdi girelim.

81
00:05:47,120 --> 00:05:48,700
Hiçbir şey hemen değişmez.

82
00:05:49,190 --> 00:05:52,910
Ama şimdi birine tıklarsam bunu kapatacağım.

83
00:05:52,910 --> 00:05:54,570
Sayfadaki herhangi bir yeri tıklarsam.

84
00:05:54,590 --> 00:05:56,400
H-1'den başka bir şey olmaz.

85
00:05:56,620 --> 00:06:01,150
H-1'i tıkladığım anda bana H-1'in doğru olduğunu söyler.

86
00:06:01,430 --> 00:06:02,510
Bu çok önemli.

87
00:06:02,500 --> 00:06:09,730
ancak bu, buraya gidebilir ve tıklayabilirim, çünkü bunu incelersem H-1'in ekran boyunca ilerlediğini

88
00:06:09,740 --> 00:06:10,130
unutmayın.

89
00:06:12,980 --> 00:06:15,290
Yalnızca H-1 için geçerlidir,

90
00:06:15,500 --> 00:06:20,720
Dolayısıyla, bu davada bizim için iyi olan bir şey akılda tutulması gereken bir şey

91
00:06:20,720 --> 00:06:25,680
ancak zaman zaman bazı şeylerin sizden isteyebileceğinizden biraz farklı davrandıracağı ve bunları CSSA

92
00:06:25,700 --> 00:06:30,190
kullanmanız gerektiği belki de sahneyi kısaltmak için veya siz dinleyicisi yine de.

93
00:06:30,640 --> 00:06:35,130
Bunun yerine sadece uyarı yapmaktan başka bir şey yapmaya çalışalım.

94
00:06:35,330 --> 00:06:42,140
Ve sadece yukarı okuna basarsam bir olay dinleyicisi tıklarsam kodu değiştirirdim

95
00:06:42,130 --> 00:06:54,260
ve H-1'e benzer bir tarz arka plan eşdeğeri yaptım ve turuncu turuncu bir arka plan yapalım ve entera çarpın.

96
00:06:54,250 --> 00:07:01,870
tıkladığımda, gerçekleşen ilk şey, H-1'in tıklandığına dair bir uyarıda hala söylenmesidir.

97
00:07:01,880 --> 00:07:06,030
Yine hiçbir şey hemen değişmez ancak

98
00:07:06,170 --> 00:07:10,360
Ve sonra onu kapattığımda turuncu olacak şekilde değişiyor.

99
00:07:10,730 --> 00:07:14,840
Yani burada ahlaki, belirli bir unsur üzerinde birden fazla dinleyiciye sahip olabilmemizdir.

100
00:07:14,840 --> 00:07:22,090
H-1'e tıkladığımızda, eklediğimiz ilk dinleyici bir tıklama dinliyordu ve bir uyarı verdi ve daha sonra bir

101
00:07:22,610 --> 00:07:28,280
tıklama dinleyen ancak daha sonra arka plan rengini değiştiren başka bir dinleyici

102
00:07:28,270 --> 00:07:28,890
ekledik.

103
00:07:28,910 --> 00:07:31,200
Her ikisini de tıkladığımda koş.

104
00:07:31,390 --> 00:07:37,190
tabii ki turuncu olduğu için görmüyorsun ama bana güvenmek zorundasın.

105
00:07:37,320 --> 00:07:42,190
Ve tekrar tıklarsam uyarı alıyorum ve tabii turuncuya dönüştüğünü

106
00:07:42,290 --> 00:07:45,000
Turuncu turta tekrar tekrar değişmeye devam ediyor.

107
00:07:45,670 --> 00:07:48,560
Tamam ben yenileyeceğim ve hepsinden kurtulacağım.

108
00:07:48,590 --> 00:07:52,720
UL'ye bir dinleyici ekleyerek hızlı bir gösteri yapmak istiyorum.

109
00:07:52,880 --> 00:08:03,320
Yani bir belge dökümü sorgusu seçici UL yapalım ve sadece bir ul yerine üç müttefiklerimiz olduğunu unutmayın.

110
00:08:04,490 --> 00:08:08,500
Bu yüzden böyle bir ana öğe üzerine ayarladığımızda size ne olacağını göstereceğim.

111
00:08:08,510 --> 00:08:11,850
Peki, bunu burada yapacak bir değişkeni kullanmayacağım.

112
00:08:12,130 --> 00:08:14,640
Adamant dinleyicisi.

113
00:08:15,250 --> 00:08:16,140
Tıklayın.

114
00:08:16,550 --> 00:08:17,930
Bu ilk argüman.

115
00:08:17,930 --> 00:08:20,330
İkincisi, böyle çalıştırmak istediğimiz

116
00:08:24,610 --> 00:08:25,560
fonksiyon.

117
00:08:25,880 --> 00:08:27,410
Ve ben başlayacağım.

118
00:08:27,680 --> 00:08:35,720
Diyelim ki günlük iyi tıklama olan bir konsol ve ne olduğunu biliyorsun.

119
00:08:35,810 --> 00:08:37,210
Bu pasif bir ses.

120
00:08:37,250 --> 00:08:38,050
Kötü bir fikir.

121
00:08:38,300 --> 00:08:39,270
Hadi yapalım.

122
00:08:39,460 --> 00:08:43,550
UL'yi çok daha iyi tıkladın.

123
00:08:43,880 --> 00:08:44,520
TAMAM.

124
00:08:44,720 --> 00:08:48,430
Öyleyse konsolu açık tutun ve UL'yi tıklayın.

125
00:08:48,980 --> 00:08:50,420
Ancak petrolü nasıl tiklayabiliriz.

126
00:08:50,450 --> 00:08:53,090
Çünkü kuyunun içinde üç müttefik var.

127
00:08:53,120 --> 00:08:55,290
UL, buradaki tüm bu şey.

128
00:08:55,320 --> 00:09:00,890
Bu yüzden herhangi bir çabuk, hangi müttefikin kuyunun herhangi bir yerinde olduğumun önemi yok.

129
00:09:01,040 --> 00:09:02,820
Burada artan sayıyı görebilirsiniz.

130
00:09:02,930 --> 00:09:07,150
Herhangi bir anında hızlı bir şekilde bu konsol nokta günlüğünü yürütecek.

131
00:09:08,120 --> 00:09:14,290
Bu yüzden bir kez daha tazeleyelim ve bu kez müttefikin kendisini değiştirmek istediğimi söyleyelim.

132
00:09:14,300 --> 00:09:17,540
Bir müttefik üzerine tıkladığımda bir şeylerin olmasını istiyorum.

133
00:09:17,960 --> 00:09:19,400
Bunu yapmanın birkaç yolu vardır.

134
00:09:19,420 --> 00:09:25,840
Ve biz, her müttefiye bir dinleyiciyi baş düşünüp koyarak birleştiren en basit olanla

135
00:09:25,850 --> 00:09:26,360
başlayacağız.

136
00:09:26,360 --> 00:09:32,880
Nihayetinde yapacağımız, UL'ye bir dinleyiciyi ve sonra da o dinleyiciyi içine ekliyor.

137
00:09:32,990 --> 00:09:39,250
UL içindeki özel yalanların hepsinin bir Lessner ile tıklandığını tespit edeceğiz.

138
00:09:39,250 --> 00:09:44,230
Şimdilik, her yalana ayrı bir dinleyiciyi ekleyeceğiz, bu

139
00:09:44,240 --> 00:09:55,570
yüzden Müttefiklerimizi seçerek başlamalıyız, bu nedenle müttefiklerimiz belge noktasına eşdeğer kraliçe seçicisidir, müttefiklerimiz hepsine sahip olduklarından emin olur.

140
00:09:55,570 --> 00:09:59,040
Pekâlâ, bir for döngüsü yapmamız gerekiyor.

141
00:09:59,210 --> 00:10:02,190
Yani var için sıfıra eşit.

142
00:10:02,410 --> 00:10:04,880
Hatırlıyor musun, bunu her zaman yapacağımızı söylemiştim.

143
00:10:04,880 --> 00:10:09,670
O kadar uzun müttefiklerden daha azım, artı

144
00:10:13,730 --> 00:10:14,740
bunun gibi.

145
00:10:15,050 --> 00:10:20,600
Ve sonra burada, her bir müttefikimize bir dinleyici ekleyeceğiz.

146
00:10:20,840 --> 00:10:21,940
Yani öyle görünüyor.

147
00:10:21,960 --> 00:10:27,350
Elyse Ben, böylece bize böyle müttefik

148
00:10:30,080 --> 00:10:39,220
ve etkinlik dinleyici tıklama işlevi veriyor ve bunu biraz yapıyor.

149
00:10:39,770 --> 00:10:41,920
Ve sonra çalıştırmak istediğimiz kodu.

150
00:10:42,320 --> 00:10:49,250
Tıklanmış müttefiki rengini değiştirelim ve sadece mor olarak değiştirelim.

151
00:10:49,250 --> 00:10:51,250
Dolayısıyla birkaç farklı seçeneğimiz var.

152
00:10:51,290 --> 00:10:54,600
Yapmam gereken, tıklanan müttefiklerdir.

153
00:10:54,800 --> 00:11:00,980
Bu yüzden müttefiklerim bunu yapabilirim, ancak bu gerçekten harika bir çözüm değil, çünkü bu

154
00:11:01,000 --> 00:11:05,320
anahtar kelimeyi kullanmak için daha kolay bir yol var.

155
00:11:05,680 --> 00:11:12,410
Yani bir dinleyicinin anahtar sözcüğü anahtar kelimeyi tıklattığınız öğeye veya gezinilen öğeye

156
00:11:12,410 --> 00:11:18,250
veya tuş vuruşunun gerçekleştiği öğeye atıfta bulunmadan önce at olayından önce

157
00:11:18,430 --> 00:11:23,100
gelen öğenin nereden seçilirse seçilmesine neden olur. ifade eder.

158
00:11:23,140 --> 00:11:30,640
Bu noktada renklerin mora eşit olduğu bu nokta stilini yazabilirim.

159
00:11:31,000 --> 00:11:33,140
Ve aslında daha belirgin bir şey.

160
00:11:33,230 --> 00:11:34,150
Bu küçük bir yazı tipi.

161
00:11:34,150 --> 00:11:36,670
Öyleyse bunun gibi pembe renkleri kullanalım.

162
00:11:37,040 --> 00:11:38,500
Girmeyi yaptım.

163
00:11:38,500 --> 00:11:46,020
Hiçbir şey olmaz ancak eğer bir müttefiklerimden birine tıklarsam pembe renkte olduğunu görebilirsiniz.

164
00:11:47,410 --> 00:11:53,960
Ve tıklarken sürekli pembeleşmeye devam edersem, anlayamazsın.

165
00:11:54,080 --> 00:12:00,110
Dolayısıyla, burada tek tek dönen bir yığın seçerek ve her birine bir olay

166
00:12:00,110 --> 00:12:03,670
dinleyicisi ekleyerek bu model gerçekten çok yaygın.

167
00:12:03,710 --> 00:12:11,170
Önümüzdeki birkaç projede hep bunu göreceğiz.

168
00:12:11,270 --> 00:12:16,640
her zaman isimsiz bir işlevi kullanmak zorunda olmadığınız ve ona bir isim vermediğinizdir.

169
00:12:16,630 --> 00:12:20,830
Burada bahsedeceğim en son şey, işlevi parantezlerle yazdığınız yerde yaptığınız gibi

170
00:12:20,990 --> 00:12:22,330
Bunu yapmak zorunda değilsin.

171
00:12:22,370 --> 00:12:25,790
Burada yaptığım gibi adlandırılmış bir işlevi ayrı olarak bildirebilirsiniz.

172
00:12:26,090 --> 00:12:31,200
İşlev değiştirme metni ve ardından yapılması gereken tek şey, olay dinleyicisi eklemek veya tıklamak demek olan

173
00:12:31,420 --> 00:12:33,890
düğmeyi söylemek ve sonra ona metin değiştirmesini vermek.

174
00:12:34,070 --> 00:12:38,830
Sonradan paranteziz olmadığına dikkat edin, çünkü istediğimiz gibi olmayan işlevi

175
00:12:38,840 --> 00:12:39,890
derhal yürüteceğiz.

176
00:12:40,180 --> 00:12:46,880
bu işlevin değerini iletiyoruz ve burada, kullanıcı bu düğmeyi tıklattığında çalıştırmanızı istediğim işlevi söylüyoruz.

177
00:12:47,170 --> 00:12:51,100
Bu yüzden, içeriği temelde bu hızlı dinleyiciye aktardığımız

178
00:12:51,190 --> 00:12:52,810
Fakat onu henüz çalıştırma.

179
00:12:52,820 --> 00:12:55,350
Böylece bu ikisi de aynı şekilde çalışacak.

180
00:12:55,370 --> 00:12:57,030
Bu sadece bir mesele.

181
00:12:57,190 --> 00:13:00,830
Çoğunlukla, daha sonra karşılaşabileceğimiz bazı farklılıklar vardır.

182
00:13:00,880 --> 00:13:02,980
Bunu çok kullanmayı tercih ederdim.

183
00:13:03,230 --> 00:13:08,240
Anonim bir işlevi kullanmayacağım tek şey, bu kodu saat dinleyicisinin dışında başka bir

184
00:13:08,240 --> 00:13:10,160
yerde tekrar kullanmak zorunda kalmam.

185
00:13:10,150 --> 00:13:15,100
Bu yüzden kendim tek başıma çalıştırmak istersem ya da bu işlevi çoğaltmak yerine

186
00:13:15,530 --> 00:13:21,260
başka bir hızlı dinleyici yerine çalıştırmak istedim, ona bir isim verdim ve sonra sadece iki

187
00:13:21,260 --> 00:13:22,600
kez kullandığım adı kopyaladım.

188
00:13:23,060 --> 00:13:28,660
Tamam o zaman, hızlı Wisner'in ve bazı videolarda öğrendiğimiz bazı şeyleri kullanarak bazı hızlı egzersizler

189
00:13:28,660 --> 00:13:30,650
yapma şansını elde etmeye başlayacaksınız.