Web Sayfanızdaki JavaScript Nasıl Ayrılır

İlk kez yeni bir JavaScript yazdığınızda, bunu ayarlamanın en kolay yolu JavaScript kodunu gömmektir Çalıştırmak için test ederken her şeyin tek bir yerde olması için doğrudan web sayfasına sağ. Benzer şekilde, web sitenize önceden yazılmış bir komut dosyası ekliyorsanız, talimatlar size komut dosyasının bir kısmını veya tamamını web sayfasının kendisine yerleştirmenizi söyleyebilir.

Bu, sayfayı ayarlamak ve ilk etapta düzgün çalışmasını sağlamak için uygundur, ancak sayfanız istediğiniz şekilde çalıştığında HTML'deki sayfa içeriğiniz gibi içerik olmayan öğelerle karıştırılmayacak şekilde JavaScript'i harici bir dosyaya çıkararak sayfayı iyileştirin JavaScript.

Başkaları tarafından yazılan JavaScripts'i kopyalayıp kullanırsanız, komut dosyalarını sayfanıza nasıl ekleyeceğinizle ilgili talimatları, sitenizin bir veya daha fazla büyük bölümüne sahip olmanızla sonuçlanmış olabilir. JavaScript aslında web sayfanıza gömülüdür ve talimatları size bu kodu sayfanızdan ayrı bir dosyaya nasıl taşıyabileceğinizi ve hala JavaScript'e sahip olabileceğinizi söylemez. iş. Endişelenmeyin, çünkü sayfanızda hangi kodu kullandığınızdan bağımsız olarak JavaScript'i kolayca taşıyabilirsiniz ve ayrı bir dosya (veya sayfaya gömülmüş birden fazla JavaScript parçanız varsa dosyalar) olarak ayarlayın. Bunu yapma süreci her zaman aynıdır ve en iyi şekilde bir örnekle gösterilmiştir.

Sayfanıza yerleştirildiğinde bir JavaScript parçasının nasıl görünebileceğine bakalım. Gerçek JavaScript kodunuz aşağıdaki örneklerde gösterilenden farklı olacaktır, ancak işlem her durumda aynıdır.

Yerleşik JavaScript'iniz yukarıdaki üç örnekten biri gibi görünmelidir. Elbette, gerçek JavaScript kodunuz gösterilenden farklı olacaktır, ancak JavaScript muhtemelen yukarıdaki üç yöntemden birini kullanarak sayfaya yerleştirilecektir. Bazı durumlarda, kodunuz güncelliğini yitirmiş olabilir language = "javascript" onun yerine = "Text / javascript" yazarak bu durumda dil özniteliğini yeni türle değiştirerek kodunuzu daha güncel hale getirmek isteyebilirsiniz.

JavaScript'i kendi dosyasına çıkarabilmeniz için önce çıkarılacak kodu tanımlamanız gerekir. Yukarıdaki örneklerin üçünde de, çıkarılacak iki satır gerçek JavaScript kodu vardır. Komut dosyanızın muhtemelen çok daha fazla satırı olacaktır, ancak sayfanızda JavaScript'in iki satırı ile aynı yeri kaplayacağı için kolayca tanımlanabilir Yukarıdaki üç örnekte vurgulanmıştır (örneklerin üçü de aynı iki JavaScript satırını içerir, sadece etrafındaki kap biraz farklı).

1. JavaScript'i ayrı bir dosyaya çıkarmak için yapmanız gereken ilk şey, düz bir metin düzenleyicisi açmak ve web sayfanızın içeriğine erişmek. Daha sonra, yukarıdaki örneklerde gösterilen kod varyasyonlarından biri ile çevrelenecek gömülü JavaScript'i bulmanız gerekir.
2. JavaScript kodunu bulduktan sonra seçmeniz ve panonuza kopyalamanız gerekir. Yukarıdaki örnekte, seçilecek kod vurgulanır, komut dosyası etiketlerini veya JavaScript kodunuzun çevresinde görünebilecek isteğe bağlı yorumları seçmenize gerek yoktur.
3. Düz metin düzenleyicinizin (veya düzenleyiciniz aynı anda birden fazla dosya açmayı destekliyorsa başka bir sekme) başka bir kopyasını açın ve orada JavaScript içeriğini geçmiş.
4. Yeni dosyanız için kullanılacak açıklayıcı bir dosya adı seçin ve bu dosya adını kullanarak yeni içeriği kaydedin. Örnek kodla, komut dosyasının amacı uygun bir adın olabilmesi için karelerden kurtulmaktır framebreak.js.
5. Şimdi JavaScript'i ayrı bir dosyada sahibiz, burada komut dosyasının dış kopyasına bağlantı oluşturmak için orijinal sayfa içeriğine sahip olduğumuz editöre geri dönüyoruz.
6. Artık betiği ayrı bir dosyada bulduğumuzdan, orijinal içeriğimizdeki kod etiketleri arasındaki her şeyi kaldırabiliriz, böylece etiket.
7. Son adım, komut dosyası etiketine harici JavaScript'i nerede bulabileceğini belirten ekstra bir özellik eklemektir. Bunu kullanarak bir src = "Dosya adı" özniteliği. Örnek komut dosyamızda src = "framebreak.js" belirtiriz.
8. Bunun tek komplikasyonu, harici JavaScripts'i bunları kullanan web sayfalarından ayrı bir klasörde depolamaya karar vermiş olmamızdır. Bunu yaparsanız, web sayfası klasöründen dosya adının önündeki JavaScript klasörüne yol eklemeniz gerekir. Örneğin, JavaScripts bir js İhtiyacımız olan web sayfalarımızı içeren klasör içindeki klasör src = "js / framebreak.js"

Peki, JavaScript'i ayrı bir dosyaya ayırdıktan sonra kodumuz nasıl görünüyor? Örnek JavaScript örneğimizde (JavaScript ve HTML'nin aynı klasörde olduğu varsayılarak) web sayfasındaki HTML kodumuz şu şekildedir:

Ayrıca şunları içeren framebreak.js adında ayrı bir dosyamız var:

if (top.location! = self.location) top.location = kendi kendini konumlandırma;

Dosya adınız ve dosya içeriğiniz bundan çok farklı olacaktır, çünkü Web sayfanıza hangi JavaScript yerleştirilmişse ve dosyaya, öyle. Gerçek ayıklama işlemi, hangi satırları içerdiğinden bağımsız olarak aynı olacaktır.

İkinci ve üçüncü örneklerin her birindeki diğer iki çizgi ne olacak? Örnek 2'deki bu satırların amacı JavaScript'i Netscape 1 ve Internet'ten gizlemektir. Explorer 2, hiçbiri daha fazla kullanmıyor ve bu nedenle ilk önce bu satırlara gerçekten ihtiyaç duyulmuyor yer. Kodu harici bir dosyaya yerleştirmek, kodu komut dosyası etiketini HTML yorumunda kuşatmaktan daha etkili bir şekilde anlamayan tarayıcılardan gizler. Üçüncü örnek, XHTML sayfaları için doğrulayıcılara JavaScript'in sayfa içeriği olarak ele alınması gerektiğini ve onu doğrulamamasını söylemek için kullanılır HTML olarak (XHTML yerine HTML doktipi kullanıyorsanız doğrulayıcı bunu zaten biliyor ve bu etiketler gerekli). Ayrı bir dosyadaki JavaScript ile artık sayfada doğrulayıcılar tarafından atlanacak JavaScript bulunmuyor ve bu nedenle bu satırlara artık gerek kalmıyor.

JavaScript'in bir web sayfasına işlevsellik eklemek için kullanılabilmesinin en yararlı yollarından biri, ziyaretçinizin bir işlemine yanıt olarak bir tür işlem gerçekleştirmektir. Yanıtlamak istediğiniz en yaygın işlem, ziyaretçinin bir şeyi tıklamasıdır. Bir şeye tıklayarak ziyaretçilere yanıt vermenizi sağlayan olay işleyicisine denir tıklamada.

Çoğu kişi ilk kez web sayfalarına bir onclick olay işleyicisi eklemeyi düşündüğünde, etiket. Bu, genellikle aşağıdaki gibi görünen bir kod parçası verir:

Bu yanlış href özniteliğinde gerçek bir anlamlı adresiniz yoksa onclick'i kullanmanın bir yolu, böylece JavaScript'i olmayanlar bağlantıyı tıkladıklarında bir yere aktarılır. Bir çok kişi de bu koddan "return false" u bırakıyor ve sonra neden geçerli sayfanın üst kısmının neden her zaman yüklendiğini merak ediyor komut dosyası çalıştırıldıktan sonra (href = "#", tüm olay işleyicilerinden false döndürülmediği takdirde sayfaya yapmasını söyler. Tabii ki, bağlantının hedefi olarak anlamlı bir şey varsa o zaman onclick kodunu çalıştırdıktan sonra oraya gitmek isteyebilirsiniz ve o zaman "dönüş yanlış" gerekmez.

Birçok kişinin fark etmediği şey, onclick olay işleyicisinin hiç Ziyaretçiniz bu içeriği tıkladığında etkileşim kurmak için web sayfasındaki HTML etiketi. Dolayısıyla, kullanıcılar bir resmi tıkladığında bir şeyin yayınlanmasını istiyorsanız şunları kullanabilirsiniz:

Kullanıcılar bir metni tıkladığında bir şey çalıştırmak istiyorsanız şunları kullanabilirsiniz:

Bazı metin

Tabii ki, bunlar ziyaretçiniz onlara tıkladığında bir yanıt olacağını otomatik görsel ipucu vermiyor ancak görsel ipucunu görüntüyü veya yayılma alanını şekillendirerek kolayca kendiniz ekleyebilirsiniz. uygun şekilde.

Onclick olay işleyicisini eklemenin bu yolları hakkında dikkat edilmesi gereken bir diğer şey de, "return false" çünkü öğeye tıklandığında gerçekleşmesi gereken varsayılan bir işlem olmadığından Özürlü.

Onclick'i takmanın bu yolları, birçok insanın kullandığı zayıf yöntemde büyük bir gelişmedir, ancak bunu kodlamanın en iyi yolu olmaktan hala çok uzaktır. Yukarıdaki yöntemlerden herhangi birini kullanarak onclick eklemeyle ilgili bir sorun, JavaScript'inizi hala HTML'nizle karıştırmasıdır. tıklamada dır-dir değil bir HTML özelliği, bir JavaScript olay işleyicisidir. Bu nedenle, sayfamızın bakımını kolaylaştırmak için JavaScript'imizi HTML'den ayırmak için, bu onclick referansını HTML dosyasından ait olduğu ayrı bir JavaScript dosyasına almamız gerekir.

Bunu yapmanın en kolay yolu HTML'deki onclick öğesini bir İD bu, olay işleyiciyi HTML'deki uygun noktaya eklemeyi kolaylaştıracaktır. Dolayısıyla HTML kodumuz artık şu ifadelerden birini içerebilir:

 Bazı metin

Ardından JavaScript'i, sayfanın gövdesinin altına bağlı ayrı bir JavaScript dosyasında veya bu da sayfanın başında ve kodumuz, sayfanın yüklenmesi bittikten sonra kendiliğinden çağrılan bir işlevin içinde. Etkinlik işleyicilerini eklemek için kullanılan JavaScript'imiz şu şekilde görünüyor:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Dikkat edilmesi gereken bir şey var. Her zaman tamamen küçük harfle yazdığımızı göreceksiniz. İfadeyi HTML'sinde kodlarken, bazı kişilerin bunu onClick olarak yazdığını göreceksiniz. JavaScript olay işleyicilerinin adları küçük harf olduğundan ve onClick gibi bir işleyici olmadığından bu yanlıştır. HTML'yi doğrudan büyük / küçük harf duyarlı olmadığından ve tarayıcı sizin için doğru adla eşleştireceğinden, JavaScript'i HTML etiketinize doğrudan eklediğinizde bundan kurtulabilirsiniz. JavaScript büyük / küçük harfe duyarlı olduğundan ve JavaScript'te onClick gibi bir şey olmadığından, JavaScript'inizdeki yanlış büyük harf kullanımından kaçamazsınız.

Bu kod, önceki sürümlere göre büyük bir gelişmedir, çünkü şimdi ikimiz de HTML'deki doğru öğeye ekliyoruz ve JavaScript'i HTML'den tamamen ayrı tutuyoruz. Bu konuda daha da gelişebiliriz.

Geriye kalan tek sorun, belirli bir öğeye yalnızca bir onclick olay işleyicisi ekleyebilmemizdir. Aynı öğeye herhangi bir zamanda farklı bir onclick olay işleyicisi eklememiz gerekirse, önceden eklenmiş işleme artık o öğeye eklenmez. Web sayfanıza farklı amaçlar için çeşitli komut dosyaları eklerken, en azından bir iki veya daha fazlasının, aynı eleman olduğunda bazı işlemlerin gerçekleştirilmesini istemesi olasılığı tıkladı. Bu sorunun dağınık çözümü, bu durumun nerede ortaya çıktığını tanımlamak ve birlikte çağrılması gereken işlemi tüm işlemeyi gerçekleştiren bir işlevle birleştirmektir.

Bu gibi çatışmalar onclick ile onload'da olduğundan daha az yaygın olsa da, çatışmaları önceden tanımlamak ve bunları birleştirmek ideal bir çözüm değildir. Elemana bağlanması gereken gerçek işlem zaman içinde değiştiğinde, bazen yapılacak bir şey, bazen başka bir şey ve bazen de her ikisi de bir çözüm değildir.

En iyi çözüm, bir olay işleyicisini tamamen kullanmayı bırakmak ve bunun yerine bir JavaScript olay dinleyicisini kullanmaktır (birlikte Jscript için ilgili attachEvent ile - çünkü bu JavaScript ve JScript farklılık). İlk önce, çalışmakta olan dilin hangisini desteklediğine bağlı olarak bir olay dinleyicisi veya ek ekleyecek bir addEvent işlevi oluşturarak bunu en kolay şekilde yapabiliriz;

işlev addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); geri dönüş; } else if (el.attachEvent) {dönüş el.attachEvent ('on' + eType, fn); } }

Artık, öğemiz kullanılarak tıklandığında gerçekleşmesini istediğimiz işlemi ekleyebiliriz:

addEvent (document.getElementById ('spn1'), 'click', dosomething, false);

Bir öğe tıklandığında işlenecek kodu eklemek için bu yöntemi kullanmak, başka bir işlev eklemek için başka bir addEvent çağrısı yapılması anlamına gelir belirli bir öğeye tıklandığında çalıştır, önceki işlemeyi yeni işlemeyle değiştirmez, bunun yerine her iki işlevin de Çalıştırmak. Bir addEvent'i çağırırken, zaten eklenmiş bir işleve sahip olup olmadığımızı bilmemize gerek yoktur. tıklatıldığında çalıştırılacak öğe, yeni işlev ve önceden kullanılan işlevlerle birlikte ekli.

Bir öğeye tıklandığında çalıştırılanlardan işlevleri kaldırma yeteneğine ihtiyacımız olursa, olay dinleyicisini veya ekini kaldırmak için uygun işlevi çağıran karşılık gelen deleteEvent işlevi Etkinlik?

İşlemeyi eklemenin bu son yolunun bir dezavantajı, gerçekten eski tarayıcıların, bir web sayfasına olay işlemeyi bağlamak için bu nispeten yeni yolları desteklememesidir. Şimdiye kadar böyle antika tarayıcıları kullanan J (ava) Kodumuzu, çok sayıda hataya neden olmayacak şekilde yazmaktan ayrı yazdığımız komut dosyası mesajlar. Yukarıdaki işlev, kullandığı yollardan hiçbiri desteklenmiyorsa hiçbir şey yapmayacak şekilde yazılır. Bu gerçekten eski tarayıcıların çoğu HTML'ye başvurmak için getElementById yöntemini de desteklemez ve bu nedenle basit (! document.getElementById) yanlış döndürürse; bu tür çağrıları yapan işlevlerinizden herhangi birinin üstünde de uygun olur. Tabii ki, JavaScript yazan birçok kişi hala eski tarayıcılar ve bu nedenle, kullanıcıların şu ana kadar ziyaret ettikleri hemen hemen her web sayfasında JavaScript hatalarını görmeye alışmaları gerekir.

Ziyaretçileriniz bir şeyi tıkladığında çalışacak sayfanıza işleme eklemek için aşağıdaki farklı yollardan hangilerini kullanıyorsunuz? Bunu yapmanın yolu sayfanın üst kısmındaki örneklere sayfanın altındaki örneklerden daha yakınsa, belki de daha iyi sunulan yöntemlerden birini kullanmak için onclick işleminizi yazma şeklinizi geliştirmeyi düşündüğünüz zaman sayfa.

Çapraz tarayıcı olay dinleyicisinin koduna baktığımızda, dördüncü bir parametre olduğunu fark edeceksiniz. uC, kullanımı önceki açıklamada açık değildir.

Tarayıcıların, olay tetiklendiğinde olayları işleyebilecekleri iki farklı sırası vardır. Dışarıdan içeri doğru çalışabilirler.

• uC = yakalama aşamasında işlem yapmak için doğru
• uC = kabarcık aşamasında işlem yapmak için yanlış.

Dolayısıyla, etkinliğin yakalama aşamasında tetiklendiği etiketin etrafına sarılmış başka etiketler varsa, ilk olarak en dıştaki etiketle başlayıp etkinliği tetikleyen etkinliğe doğru ve ardından etkinliğin eklendiği etiket işlendikten sonra kabarcık aşaması işlemi tersine çevirir ve geri döner tekrar.

Internet Explorer ve geleneksel olay işleyicileri her zaman kabarcık aşamasını işler ve asla yakalama aşamasını gerçekleştirmez ve bu nedenle her zaman en özel etiketle başlar ve dışarı doğru çalışır.

Olay işleyicileriyle:

xx