Web sayfanızı JavaScript kullanarak tasarlamak, kodunuzun görünme sırasına ve kodu işlevlerin veya nesnelerin içine koyarsanız, bunların tümü kodun hangi sırada olduğunu etkiler koşar.
Web Sayfanızdaki JavaScript'in Konumu
Sayfanızdaki JavaScript belirli faktörlere göre yürütüldüğünden, bir web sayfasına nerede ve nasıl JavaScript ekleyeceğinizi düşünelim.
Temel olarak JavaScript ekleyebileceğimiz üç konum vardır:
- Doğrudan sayfanın başına
- Doğrudan sayfanın gövdesine
- Bir olay işleyiciden / dinleyiciden
JavaScript'in olması fark etmez web sayfasında veya sayfaya bağlı harici dosyalarda. Ayrıca, olay işleyicilerin sayfaya sabit bir şekilde kodlanıp kodlanmadığı veya JavaScript'in kendisi tarafından eklenip eklenmeyeceği de önemli değildir (ancak eklenmeden önce tetiklenemezler).
Doğrudan Sayfaya Kodlama
JavaScript’in direkt olarak Sayfanın başına veya gövdesine? Kod bir işleve veya nesneye eklenmemişse, doğrudan sayfadadır. Bu durumda, kodu içeren dosyaya bu koda erişilmesi için yeterince yüklendiği anda kod sıralı olarak çalışır.
Bir işlev veya nesne içindeki kod yalnızca o işlev veya nesne çağrıldığında çalıştırılır.
Temel olarak, bu, sayfanızın başının ve gövdesinin içindeki bir işlev veya nesnenin içinde olmayan herhangi bir kodun, sayfa yüklenir yüklenmez çalıştırılacağı anlamına gelir bu koda erişmek için yeterince yüklendi.
Bu son bit önemlidir ve kodunuzu sayfaya yerleştirdiğiniz sırayı etkiler: doğrudan sayfaya yerleştirilen ve sayfa içindeki öğelerle etkileşime girmesi gereken kodlar görünmelidir sonra bağlı olduğu sayfadaki öğeler.
Genel olarak, bu, sayfa içeriğinizle etkileşim kurmak için doğrudan kod kullanırsanız, bu kodun gövdenin altına yerleştirilmesi gerektiği anlamına gelir.
İşlevler ve Nesneler İçindeki Kod
İşlev veya nesnelerin içindeki bir kod, bu işlev veya nesne çağrıldığında çalıştırılır. Doğrudan sayfanın başlığında veya gövdesinde bulunan koddan çağrılırsa, yürütme sırası etkin bir şekilde işlev veya nesnenin doğrudan çağrıldığı noktadır kodu.
Olay İşleyicilerine ve Dinleyicilere Atanan Kod
Bir olay işleyicisine veya dinleyiciye bir işlev atamak, işlevin atandığı noktada çalışmasına neden olmaz. atama fonksiyonun kendisi ve koşmak yok işlev ve döndürülen değeri atama. (Bu yüzden genellikle () eklendikten sonra bir etkinliğe atandığında işlev adının sonunda parantezler işlevi çalıştırır ve işlevi atamak yerine döndürülen değeri atar kendisi.)
Olay işleyicilerine ve dinleyicilere eklenen işlevler, bağlı oldukları olay tetiklendiğinde çalışır. Etkinliklerin çoğu, sayfanızla etkileşime giren ziyaretçiler tarafından tetiklenir. Ancak, bazı istisnalar vardır. yük pencerenin kendisinde, sayfanın yüklenmesi tamamlandığında tetiklenen olay.
Sayfa Öğelerindeki Etkinliklere Eklenen İşlevler
Sayfanın içindeki öğelerdeki etkinliklere eklenen işlevler, her bir ziyaretçinin eylemlerine göre çalışır - bu kod yalnızca belirli bir etkinlik tetiklendiğinde çalışır. Bu nedenle, kodun belirli bir ziyaretçi için hiçbir zaman çalışmadığı önemli değildir, çünkü bu ziyaretçi bunu gerektiren etkileşimi açıkça gerçekleştirmemiştir.
Tüm bunlar, elbette, ziyaretçinizin sayfanıza bir tarayıcı ile eriştiğini varsayar. JavaScript sağladı.
Özelleştirilmiş Ziyaretçi Kullanıcı Komut Dosyaları
Bazı kullanıcılar, web sayfanızla etkileşimde bulunabilecek özel komut dosyaları yükledi. Bu komut dosyaları tüm doğrudan kodlarınızdan sonra çalışır, ancak önce load olay işleyicisine eklenmiş herhangi bir kod.
Sayfanız bu kullanıcı komut dosyaları hakkında hiçbir şey bilmediğinden, bu dış komut dosyalarının neler yapabileceğini bilmenin hiçbir yolu yoktur - atadığınız çeşitli etkinliklere eklediğiniz kodların herhangi birini veya tümünü geçersiz kılabilirler işleme. Bu kod olay işleyicilerini veya dinleyicileri geçersiz kılarsa, olay tetikleyicilerine yanıt, kodunuz yerine veya buna ek olarak kullanıcı tarafından tanımlanan kodu çalıştırır.
Buraya götürme noktası, sayfa yüklendikten sonra çalışmak üzere tasarlanan kodun tasarladığınız şekilde çalışmasına izin verileceğini varsayamazsınız. Ayrıca, bazı tarayıcılarda, bazı etkinlik işleyicilerin devre dışı bırakılmasına izin veren seçeneklere sahip olduğunu unutmayın. tarayıcıda, ilgili bir olay tetikleyicisi ilgili olay işleyiciyi / dinleyiciyi kodu.