Komut dosyası js. Harici bir JavaScript dosyası eklemek

Bu bölümde, HTML belgesini hızlı bir şekilde değiştirmek için kullanabilmemiz için komut dosyalarının bir HTML belgesine yerleştirilmesini ele alacağız. JavaScript kodunu bir HTML sayfasına eklemek için genellikle öğesini kullanın

Bu örnek, komut dosyasını içeren (site kökünden) script.js adlı dosyanın mutlak yolunu belirtir. Dosyanın kendisi yalnızca JavaScript kodunu içermelidir, aksi takdirde etiketler arasında yer alır .

Öğe ile analoji yaparak öğenin src niteliği

Birden çok komut dosyasını bağlamak için birden çok etiket kullanın:

...

Not:Eleman harici komut dosyası çalıştırılsa da, satır içi kod yok sayılır.

Src niteliği varsa, komut dosyası etiketinin içi yok sayılır!

JS kodunun HTML belgesine nasıl dahil edildiğine bakılmaksızın, öğeler .

Etiketlerin konumu

Komut dosyalarının bu düzenlemesi, tarayıcının önce sayfa içeriğini ve ardından komut dosyası kodunu yükleyerek sayfayı daha hızlı yüklemesini sağlar.
Kullanıcılar için bu tercih edilir çünkü sayfa, JavaScript kodu işlenmeden önce tarayıcıda tam olarak işlenir.

Ertelenmiş ve Eşzamansız Komut Dosyası

Daha önce belirtildiği gibi, varsayılan olarak JavaScript kod dosyaları, komut dosyası yüklenene ve çalıştırılana kadar bir HTML belgesini ayrıştırmayı (ayrıştırmayı) kesintiye uğratır, böylece sayfa ilk oluşturulmadan önceki süreyi artırır.
Bir örnek alalım, burada element Bu metin, tarayıcı script.js'yi çalıştırana kadar gösterilmeyecektir.

Bu örnekte, tarayıcı script.js dosyasını indirip çalıştırana kadar, sayfanın altındaki kısmını göstermeyecektir. Tarayıcının bu davranışına "eşzamanlı" denir ve sayfaya birden çok JavaScript dosyası yüklediğimizde sorunlara neden olabilir, çünkü bu, oluşturma süresini artırır.

Ya HTML belgesi bu JS dosyalarına gerçekten bağlı değilse ve geliştirici harici dosyaların nasıl yüklenip çalıştırılacağını kontrol etmek isterse?

Öğenin zaman uyumsuz ve erteleme özellikleri, komut dosyalarını yükleme sorununu kökten çözecektir.

Örnekte, ikinci komut dosyası birinciden önce çalıştırılabilir, bu nedenle bu komut dosyaları arasında herhangi bir bağımlılık olmaması önemlidir.

Not:Async özniteliği, tarayıcının, indirme işleminin tamamlanmasını ve komut dosyasının yürütülmesini beklemeden sayfayı yüklemeye devam etmesine izin vermek için kullanılır.

Özniteliği ertele

Erteleme özelliği, HTML sayfasının tamamı tamamen yüklenene kadar komut dosyasının yürütülmesini erteler.

Eşzamansız komut dosyası yüklemede olduğu gibi, JS dosyası HTML belgesi yüklenirken yüklenebilir. Ancak, tarayıcı sayfayı işlemeyi bitirmeden önce bile komut dosyası tam olarak yüklenmiş olsa bile, HTML belgesi sonuna kadar işlenene kadar çalıştırılmayacaktır.

Yukarıdaki örnekte etiketlerin .

Görevler

• Açılır pencere

  Bu basit bir HTML belgesidir. HTML sayfasının gövdesine, şu sözcükleri içeren bir açılır pencere görüntüleyen bir komut dosyası yerleştirin: "Merhaba, javascript!"

Son güncelleme: 1.11.2015

JavaScript kodunu bir web sayfasına eklemenin başka bir yolu, kodu harici dosyalara koymak ve bunları bir etiket kullanarak eklemektir.

Javascript kodu içeren bir dosyayı bir web sayfasına bağlamak için etiket de uygulanır

Ve index.html dosyasını açtıktan sonra, tarayıcı bir mesaj görüntüler:

Javascript kodunu tanımlamanın aksine, onu harici dosyalara koymanın çeşitli avantajları vardır:

Aynı kodu birden fazla web sayfasında yeniden kullanabiliriz

Tarayıcı harici javascript dosyalarını önbelleğe alabilir, bu nedenle sayfaya bir sonraki erişimde, tarayıcı sunucudaki yükü azaltır ve tarayıcının daha az bilgi yüklemesi gerekir.

Web sayfası kodu "daha temiz" hale gelir. Yalnızca html biçimlendirmesini içerir ve davranış kodu harici dosyalarda saklanır. Sonuç olarak, html sayfa kodu oluşturma işini javascript kodunu yazmaktan ayırabilirsiniz.

Bu nedenle, javascript kodunu bir komut dosyası öğesi kullanarak bir web sayfasına doğrudan eklemeler yerine harici dosyalarda kullanmak genellikle tercih edilir.

Yazardan: Selamlıyorum arkadaşlar Bu yazıda, JavaScript kodumuzu harici bir dosyaya nasıl aktaracağımızı ve bir JavaScript komut dosyasını nasıl bağlayacağımızı öğreneceğiz. Makale, JavaScript dilini öğrenmeye başlayan yeni başlayanlara yöneliktir.

Öyleyse soruyla başlayalım, JavaScript kodunu neden harici bir dosyaya taşımanız gerekiyor? Basit. Senaryonuzun onlarca veya yüzlerce satırlık kod olduğunu hayal edin. Ya da daha fazlası. Ve elbette, sitemizin her sayfasında büyük olasılıkla bu komut dosyasına ihtiyacımız olacak. Kabul ediyorum, bu durumda her dosyada bu yüzlerce satır kodun kopyalanması hiç iyi olmayacaktır. Ve bir HTML belgesinde HTML olmayan kodun varlığı çok doğru görünmeyecek ve pek hoş olmayacaktır.

Bu nedenle, JavaScript kodunu sayfaya bağlı ayrı bir dosyaya koymak gelenekseldir. Aslında, her şey stil dosyalarındakiyle aynıdır. Bir JavaScript komut dosyasını ana dosyaya nasıl bağlarsınız? Çok basit. Bunun için zaten tanıdık olan etiket kullanılır.

Her iki durumda da, aynı sonucu alacağız, komut dosyası, belgenin görüntüsünü kesintiye uğratmadan bağlanır:

Eşzamansız ve erteleme nitelikleri arasındaki fark nedir? Erteleme özelliği, harici komut dosyalarını bağlama sırasını korur, örn. yukarıda bağlanan ilk komut dosyası her zaman çalıştırılacaktır. Bu, birkaç komut dosyası eklediğimiz ve bunlardan birinin diğerine bağlı olabileceği durumlarda önemlidir. Bu durumda, ana komut dosyası bağımlı olandan önce bağlanmalıdır. Erteleme özelliği, siparişin korunmasını sağlar. Async özniteliği, betiğin yüklenir yüklenmez yürütülmesini sağlar. Bu nedenle, bu seçenek her zaman uygun değildir, çünkü bağımlı komut dosyası ana koddan önce yüklenebilir.

Bu makaleyi sonlandırıyor. JavaScript hakkında daha fazla bilgi edinmek istiyorsanız, dikkatinizi ayrı olana çevirmenizi öneririm. İyi şanslar!

JavaScript. Hızlı başlangıç

Web uygulaması oluşturmaya ilişkin uygulamalı bir örnekle JavaScript temellerini öğrenin

JavaScript, yalnızca kullanıcının tarayıcısında yani istemci tarafında çalışan bir betik dilidir. Bu dili çağırmak için etiketler HTML kodunda yazılır .

Tarayıcı penceresinde "Merhaba Dünya!" İfadesini görüntüleyen basit bir program örneği:

Bu komut dosyasında komut document.write ("Merhaba Dünya!") "Merhaba Dünya!" Document.write ("") komutunda, tırnak içindeki herhangi bir metni ve etiketi yazabilirsiniz. Etiketler tarayıcı tarafından yorumlanacaktır.

Bu komut hakkında daha sonra daha fazla konuşacağız, ancak şimdi bu makalenin konusuna dönelim - JavaScript komut dosyasını HTML koduna eklemek.

Aslında genişletilmiş ve daha doğru etiket gösterimi

Bu örnekte, birkaç etikete de dikkat edin. ... Bu etiket, yalnızca JavaScript devre dışıysa veya kullanıcının tarayıcısında desteklenmiyorsa ekrandaki metni görüntüler.

Komut dosyası yalnızca bölüme eklenemez aynı zamanda bölümde .

Bu örneğin biraz açıklığa kavuşturulması gerekiyor. Kısımda İ değişkenini var komutuyla oluşturduk ve ona Hello World! Metin değerini atadık. Ardından, bölümde Bu değişkenin değerini ekranda görüntülemek için document.write (i) komutunu kullandık. Değişkenler hakkında daha fazla bilgi JavaScript değişkenleri makalesine yazılmıştır, JavaScript kodunun bir HTML belgesinin her iki bölümüne de eklenebileceğini hemen öğrendiniz: ve .

İkinci yol, dosyayı eklemektir.

CSS Nedir başlıklı makalede, CSS stil sayfası kodu içeren bir dosyayı, adı verilen bir belgeye eklemek için bir yöntem açıklanmıştır. bağlayıcı... Bir belgeyi JavaScript kodu içeren bir dosyaya da bağlayabilirsiniz. Bunu yapmak için bölümde etiketi örnekteki gibi ekleyin:

Gördüğünüz gibi, bir belgeye JavaScript komut dosyalarına sahip iki veya daha fazla dosya eklenebilir. Üçüncü taraf bir etki alanında bulunan komut dosyalarını kullanabilirsiniz, bunun için etiketin src özniteliğinde

Bu örnekte, açılış HTML yorum etiketi , etiketinden hemen önce betiğimizin son kodu.

Çift eğik çizgi // zaten bir JavaScript yorumudur, onu izleyen tüm satırın JavaScript açısından bir yorum olduğunu gösterir. JavaScript yorumları hakkında daha fazlasını buradan okuyun.

Bugün, HTML'de komut dosyalarını kullanma üzerine yeni bir bölüm başlatacağız. Bu bölüm, senaryolarla tanışacağımız, bir komut dosyasının ne olduğunu, komut dosyalarını nasıl kullanacağımızı, bir komut dosyasını HTML'ye nasıl bağlayacağımızı vb. Öğreneceğimiz tek bir video dersinden oluşuyor. Etiketlere gelince kullanacağız. İki tane olacak, bu bir etiket