Tamam geri geleceğiz.
Javascript girişinde, javascript öğrenmenin önemli nedenlerinden birinin, sayfalarımızı interaktif hale
getirmek için kullanabileceğimiz olduğuna değindim.
Bir kullanıcı bir düğmeyi tıklattığında veya ok tuşuna tıkladığında veya yaptıklarında birşey
yazarsa kodu çalıştırabiliriz.
Belli bir noktada yürütüldüğünde, sayfanın başında yürütülmeyen bazı karşılık gelen
kodlara sahip olabiliriz.
Bunu yapmak için Dom olaylarıyla ilgili konuşmamız gerekiyor.
Dolayısıyla bu video Dom etkinliklerine bir giriş olacak.
Kavramsal olarak onları kurma süreci ve daha sonra sözdizimi.
Dediğim gibi olaylar her yerde.
Web sayfasında ne zaman etkileşim kurduğunuzu, bir bağlantı üzerinden gezinebileceğiniz ve bir
şey ortaya çıkabilecek bir düğme gibi şeyleri tıklattığınız farklı şeyleri düşünün.
Elemanları belirli sayfalara sürükleyip bırakabilirsiniz.
Kullanıcı çift tıklamayla çalışan koda sahip olmak isteyebilir veya aslında bu web sayfasının
birkaç örneği vardır.
Bu slayt dot com bir Web sitesidir ve slaytları değiştirmek için sol ve sağ ok tuşlarına basıyorum.
Bu nedenle, sol ok tuşuna veya sağ ok tuşuna basarken veya buraya tıkladığımda bazı
kodlar çalıştırılıyor.
Bu aynı zamanda bir etkinlik ve şu anki slaytı değiştiren bazı kod çalıştıran bir şey yapıyor.
Bu noktada olaylar her yerde ve gerçekten heyecan vericidir.
Öğretmek istediğim en önemli konulardan biri budur, çünkü şimdi web sayfalarımızı etkileşimli
hale getirebilirsek, değişen renkleri değiştiren metinler hakkında öğrendiğimiz manipülasyonu alabilir ve daha
sonra belirli bir şey olduğunda bu işlemi gerçekleştirebiliriz.
Yani bu gerçekten yurt manipüle etme potansiyelinin kilidini açar.
Oyunu nasıl hazırlayacağımız bu şekilde form doğrulayıcıları yapacağız tic tac toe
Gerçekten güzel bir renk seçici oyunu yapacağız ve hepsinin bu olaylardan kaynaklandığını görüyoruz.
Bu yüzden, bu olayların işleyiş şekli, bunları belirli öğelere iliştirmek olduğumuzdan, ilk düğme
veya ikinci H-1 gibi bir öğeyi veya bir türün metne eşit olduğu girişi seçtikten sonra ona
bir olay dinleyicisi iliştirelim Seçilen öğe.
olarak, bir düğmede bir tıklama dinlediğimiz halde, bir H1'de bir gezinme olayını dinleyebiliriz, bir metin girişinde önemli
basın olayını dinleyebiliriz ve o olaylar arasındaki farklar hakkında daha fazla konuşacağız.
Bir örnek
Javascript'te çok çeşitli etkinlikler var, ancak önemli olan, belirli
bir öğede dinlenen bir etkinliğe sahip olmamız.
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.
Bir şey seçmemiz gerekiyor ve sonra gerçekleşen manipülasyon, seçtiğimiz şeyin
bir olay dinleyicisi eklemesidir.
Özellikle, olay dinleyicisi olarak adlandırılan her zaman kullanacağımız bir yöntem var.
ve seçili bir şey var, o zaman olay dinleyicisi olarak adlandırıyoruz ve biz iki argüman veriyoruz.
O halde, olay dinleyicisinde kullandığımız şey, ilk düğme veya girdi türü gibi bir öğe seçtiğimizden,
çünkü şifre
İlki, dinlemek istediğimiz olayın türüdür.
Ve ikinci argüman o olay gerçekleştiğinde çalıştırmak istediğimiz koddur.
İşte bir örnek:
Bir sayfadaki ilk düğmeyi, düğmenin nerede olduğu veya nasıl göründüğü ya da herhangi bir şeyin herhangi
bir düğme ile alakalı olmadığı halde seçiyorum.
dinleyicisinde düğmeyi çağırıyorum ve ikinci argümanı buraya kadar giden bir işlevdir.
Sonra olay
Ve bu kod hemen çalıştırılmaz.
Unutmayın buna bir geri arama denir.
Bu kod hemen çalıştırılmaz.
Bu olay bir kez patladığında çalıştırılır.
Bu yüzden düğmeye bir kez tıkladığınızda javascript geri arar gider.
Bu iş, hey sizi aydınlatmanın ve buraya gelip hazır olmanızı söyler diyor.
Ve sonra bu kod çalıştırılır ve biz birisi düğmesini tıklamak günlüğü değil danışmanlık olsun.
Dolayısıyla, bir düğme, tıklandığında seçilen belirli düğme ile hızlı bir
şekilde çalıştırıldığında bu işlev çalışacaktır.
İşte başka bir örnek.
Bu dava burada bir düğme ve bir paragraf işareti var ve ikisini de Kery seçici ile seçtim ve
ikisini de değişkenlere kaydettim ve daha sonra yaptığımız tek şey bir tıklama dinleyicisi eklemekti bu
yüzden düğme olay dinleyicisi tıklaması ekliyor ve sonra İkinci argüman bu geri arama işlevidir.
ne yapacağım, paragraflar metin içeriği değiştiğinde birisi düğmeye tıklanacak ve
düğmeyi tıkladığımda görebiliyor musun hiç kimse beni tıklattı ve birisi düğmeyi tıklattı.
Ve o düğme tıklandığında
Şimdi, Dom demo sayfamızı kullanarak hızlı bir gösteri yapacağım, bu H-1'i buradan
başlatalım.
Kullanıcı tıkladığında rengi değiştirin.
Bunu yapmak için her zaman H-1'i seçerek başlamamız gerekir.
Bu yüzden bir sürü seçeneğimiz var.
Sorgu seçici H-1'in elinde olduğundan emin olduğumuz kral seçim belgesini kullanacağım.
Tamam.
Ardından, olay dinleyicisi eklemek için H-1 yazıyoruz.
İki argüman olduğunu unutmayın.
Birincisi, dinlediğimiz olay.
Farklı olaylardan farklı seçenekler hakkında konuşmak için biraz daha zaman harcayacağız.
Şimdilik tıklamayı sadece yapmaktayız ve ikincisi ise kullanıcı tıkladığında çalıştırmak istediğimiz kod.
İşleve başlayın ve gerçekten basit bir şekilde başlayın ve kullanıcı tıkladığında bir uyarı yapın.
Bu yüzden her biri bir tıklama ile böyle bir uyarı yapacağız.
Ve şimdi girelim.
Hiçbir şey hemen değişmez.
Ama şimdi birine tıklarsam bunu kapatacağım.
Sayfadaki herhangi bir yeri tıklarsam.
H-1'den başka bir şey olmaz.
H-1'i tıkladığım anda bana H-1'in doğru olduğunu söyler.
Bu çok önemli.
ancak bu, buraya gidebilir ve tıklayabilirim, çünkü bunu incelersem H-1'in ekran boyunca ilerlediğini
unutmayın.
Yalnızca H-1 için geçerlidir,
Dolayısıyla, bu davada bizim için iyi olan bir şey akılda tutulması gereken bir şey
ancak zaman zaman bazı şeylerin sizden isteyebileceğinizden biraz farklı davrandıracağı ve bunları CSSA
kullanmanız gerektiği belki de sahneyi kısaltmak için veya siz dinleyicisi yine de.
Bunun yerine sadece uyarı yapmaktan başka bir şey yapmaya çalışalım.
Ve sadece yukarı okuna basarsam bir olay dinleyicisi tıklarsam kodu değiştirirdim
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.
tıkladığımda, gerçekleşen ilk şey, H-1'in tıklandığına dair bir uyarıda hala söylenmesidir.
Yine hiçbir şey hemen değişmez ancak
Ve sonra onu kapattığımda turuncu olacak şekilde değişiyor.
Yani burada ahlaki, belirli bir unsur üzerinde birden fazla dinleyiciye sahip olabilmemizdir.
H-1'e tıkladığımızda, eklediğimiz ilk dinleyici bir tıklama dinliyordu ve bir uyarı verdi ve daha sonra bir
tıklama dinleyen ancak daha sonra arka plan rengini değiştiren başka bir dinleyici
ekledik.
Her ikisini de tıkladığımda koş.
tabii ki turuncu olduğu için görmüyorsun ama bana güvenmek zorundasın.
Ve tekrar tıklarsam uyarı alıyorum ve tabii turuncuya dönüştüğünü
Turuncu turta tekrar tekrar değişmeye devam ediyor.
Tamam ben yenileyeceğim ve hepsinden kurtulacağım.
UL'ye bir dinleyici ekleyerek hızlı bir gösteri yapmak istiyorum.
Yani bir belge dökümü sorgusu seçici UL yapalım ve sadece bir ul yerine üç müttefiklerimiz olduğunu unutmayın.
Bu yüzden böyle bir ana öğe üzerine ayarladığımızda size ne olacağını göstereceğim.
Peki, bunu burada yapacak bir değişkeni kullanmayacağım.
Adamant dinleyicisi.
Tıklayın.
Bu ilk argüman.
İkincisi, böyle çalıştırmak istediğimiz
fonksiyon.
Ve ben başlayacağım.
Diyelim ki günlük iyi tıklama olan bir konsol ve ne olduğunu biliyorsun.
Bu pasif bir ses.
Kötü bir fikir.
Hadi yapalım.
UL'yi çok daha iyi tıkladın.
TAMAM.
Öyleyse konsolu açık tutun ve UL'yi tıklayın.
Ancak petrolü nasıl tiklayabiliriz.
Çünkü kuyunun içinde üç müttefik var.
UL, buradaki tüm bu şey.
Bu yüzden herhangi bir çabuk, hangi müttefikin kuyunun herhangi bir yerinde olduğumun önemi yok.
Burada artan sayıyı görebilirsiniz.
Herhangi bir anında hızlı bir şekilde bu konsol nokta günlüğünü yürütecek.
Bu yüzden bir kez daha tazeleyelim ve bu kez müttefikin kendisini değiştirmek istediğimi söyleyelim.
Bir müttefik üzerine tıkladığımda bir şeylerin olmasını istiyorum.
Bunu yapmanın birkaç yolu vardır.
Ve biz, her müttefiye bir dinleyiciyi baş düşünüp koyarak birleştiren en basit olanla
başlayacağız.
Nihayetinde yapacağımız, UL'ye bir dinleyiciyi ve sonra da o dinleyiciyi içine ekliyor.
UL içindeki özel yalanların hepsinin bir Lessner ile tıklandığını tespit edeceğiz.
Şimdilik, her yalana ayrı bir dinleyiciyi ekleyeceğiz, bu
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.
Pekâlâ, bir for döngüsü yapmamız gerekiyor.
Yani var için sıfıra eşit.
Hatırlıyor musun, bunu her zaman yapacağımızı söylemiştim.
O kadar uzun müttefiklerden daha azım, artı
bunun gibi.
Ve sonra burada, her bir müttefikimize bir dinleyici ekleyeceğiz.
Yani öyle görünüyor.
Elyse Ben, böylece bize böyle müttefik
ve etkinlik dinleyici tıklama işlevi veriyor ve bunu biraz yapıyor.
Ve sonra çalıştırmak istediğimiz kodu.
Tıklanmış müttefiki rengini değiştirelim ve sadece mor olarak değiştirelim.
Dolayısıyla birkaç farklı seçeneğimiz var.
Yapmam gereken, tıklanan müttefiklerdir.
Bu yüzden müttefiklerim bunu yapabilirim, ancak bu gerçekten harika bir çözüm değil, çünkü bu
anahtar kelimeyi kullanmak için daha kolay bir yol var.
Yani bir dinleyicinin anahtar sözcüğü anahtar kelimeyi tıklattığınız öğeye veya gezinilen öğeye
veya tuş vuruşunun gerçekleştiği öğeye atıfta bulunmadan önce at olayından önce
gelen öğenin nereden seçilirse seçilmesine neden olur. ifade eder.
Bu noktada renklerin mora eşit olduğu bu nokta stilini yazabilirim.
Ve aslında daha belirgin bir şey.
Bu küçük bir yazı tipi.
Öyleyse bunun gibi pembe renkleri kullanalım.
Girmeyi yaptım.
Hiçbir şey olmaz ancak eğer bir müttefiklerimden birine tıklarsam pembe renkte olduğunu görebilirsiniz.
Ve tıklarken sürekli pembeleşmeye devam edersem, anlayamazsın.
Dolayısıyla, burada tek tek dönen bir yığın seçerek ve her birine bir olay
dinleyicisi ekleyerek bu model gerçekten çok yaygın.
Önümüzdeki birkaç projede hep bunu göreceğiz.
her zaman isimsiz bir işlevi kullanmak zorunda olmadığınız ve ona bir isim vermediğinizdir.
Burada bahsedeceğim en son şey, işlevi parantezlerle yazdığınız yerde yaptığınız gibi
Bunu yapmak zorunda değilsin.
Burada yaptığım gibi adlandırılmış bir işlevi ayrı olarak bildirebilirsiniz.
İşlev değiştirme metni ve ardından yapılması gereken tek şey, olay dinleyicisi eklemek veya tıklamak demek olan
düğmeyi söylemek ve sonra ona metin değiştirmesini vermek.
Sonradan paranteziz olmadığına dikkat edin, çünkü istediğimiz gibi olmayan işlevi
derhal yürüteceğiz.
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.
Bu yüzden, içeriği temelde bu hızlı dinleyiciye aktardığımız
Fakat onu henüz çalıştırma.
Böylece bu ikisi de aynı şekilde çalışacak.
Bu sadece bir mesele.
Çoğunlukla, daha sonra karşılaşabileceğimiz bazı farklılıklar vardır.
Bunu çok kullanmayı tercih ederdim.
Anonim bir işlevi kullanmayacağım tek şey, bu kodu saat dinleyicisinin dışında başka bir
yerde tekrar kullanmak zorunda kalmam.
Bu yüzden kendim tek başıma çalıştırmak istersem ya da bu işlevi çoğaltmak yerine
başka bir hızlı dinleyici yerine çalıştırmak istedim, ona bir isim verdim ve sonra sadece iki
kez kullandığım adı kopyaladım.
Tamam o zaman, hızlı Wisner'in ve bazı videolarda öğrendiğimiz bazı şeyleri kullanarak bazı hızlı egzersizler
yapma şansını elde etmeye başlayacaksınız.