Bazen, büyük ve karmaşık bir şeyi öğrenmeye doğru bir yolculuğa başlamak için küçük ve basit bir şey öğrenmeniz gerekir. JavaScript çok büyük ve karmaşıktır, ancak küçük ve basit şeyler öğrenerek ona adım atabilirsiniz. Bir web tasarımcısıysanız, özellikle öğrenebileceğiniz, son derece güçlendirici bir şey olduğunu düşünüyorum.
Öğrenmenizi istediğim şey şu: Bir elemana tıkladığınızda, bir elemandaki bir sınıfı değiştirin.
Bunu mutlak temellere indirgeyerek, bir düğmemiz ve bir div'imiz olduğunu hayal edin:
Click Me I'm an element Div, bazı temel stillere sahip olabilir ve belirli bir sınıfa sahip olduğunda bazı stillere sahip olabilir:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Astute CSS-Tricksters bunu onay kutusu saldırısı için bir fırsat olarak görebilir, ancak bugün üzerinde çalıştığımız şey bu değil.
Düğmeye bir "olay dinleyicisi" eklemek istiyoruz: bizim durumumuzda tıklama olaylarını "dinlemek" için bir miktar kod ve bu olduğunda daha fazla kod çalıştır.
CSS'de öğeleri biçimlendirmek için öğeleri nasıl "seçmemiz" gerektiğini biliyor musunuz? Olay dinleyicimizi eklemek için bunu JavaScript'te de yapmamız gerekiyor. Düğmeye değişken olarak aşağıdaki gibi bir "referans" oluşturacağız:
var button = document.querySelector("button");Artık düğmeye bir referansımız olduğuna göre, bu olay dinleyicisini ekleyeceğiz:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Ve bir tıklama durumunda ne yapmak istiyoruz? Div'mize bir sınıf adı ekleyin! Ancak düğmeyle bir şeyler yapabilmek için bir referansa ihtiyacımız olduğu gibi, div için de bir referansa ihtiyacımız olacak. İkisini de aynı anda yapalım, işte kodun tamamı:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Size göstermek istediğim tüm şey bu. Bu "yay" sınıfına biraz CSS eklendiğinde, div'i açıp kapatabiliriz:
CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem Tıklama Bir Şey / Sınıfı Değiştir'e bakın.
Neden bu tek şey?
CSS'yi ve herhangi bir öğenin durumunu (hangi sınıf adlarına sahip olduğunu) kontrol ettiğinizde tasarım olanakları sonsuzdur. Bir şeyleri gizlemek ve ifşa etmek bariz güçtür, ama gerçekten her şey olabilir.
Seviye atlamak
Bir sınıf adını değiştirmekle sınırlı olmadığınızı unutmayın. Tek bir öğedeki birden çok sınıfı değiştirebilir veya birden çok öğedeki sınıfları değiştirebilirsiniz.
ClassList özelliğine daha fazla bakın. "Geçiş" tek seçenek değildir.
Tıpkı HTML ve CSS gibi, JavaScript'in de şeyler için farklı düzeylerde tarayıcı desteği vardır. ClassList için tarayıcı desteğine bakın ve addEventListener ekleyin. Projeniz için bu seviyelerde destekten memnun musunuz? Değilse, çoklu dolgulara ve hatta jQuery'ye bakabilirsiniz.
"Tıklama" olayını kullandık, ancak daha pek çok şey var. Diğer fare olayları, kaydırma, klavye ve daha fazlası. Yüzlerce.
Seçim için kullandığımız yöntem document.querySelector. Bu yararlıydı çünkü çalışmamız için tek bir öğe döndürüyor. Artı, verdiğiniz seçiciler tıpkı CSS seçiciler gibidir. document.querySelector("#overlay .modal > h2");yasal bir seçim olacaktır. Ancak bu seçim için tek yöntem değildir, getElementById, querySelectorAll, getElementsByClassName ve daha fazlası gibi başka yöntemler de vardır.
Aşağıda, bir grup gezinme öğesini seçtiğimiz ve hepsine aynı anda bir tıklama işleyici eklediğimiz bir örnek verilmiştir:
CodePen'de Chris Coyier (@chriscoyier) tarafından Stuff on Stuff üzerinde Pen Change Classes görün.
Küçük örneğimizde yazdığımız JavaScript herhangi bir nedenle yüklenmediyse, yine de "Beni Tıkla" yazan bir düğmemiz olur. Ama onu tıklamak pek bir şey yapmaz, değil mi? Belki o düğmeyi JavaScript ile ekleyebiliriz, böylece çalışacağını bilmediğimiz sürece düğme orada bile olmaz? İyi fikir, ha? ;)