JavaScript Nedir? Sitenize Etkileşim Katmak

JavaScript nedir sorusunun kısa cevabı şu: web sayfalarına davranış kazandıran programlama dilidir. Açılır menüler, form kontrolleri, sayfa yenilenmeden güncellenen sepetler, harita ve galeriler JavaScript ile çalışır. HTML sayfanın yapısını, CSS görünümünü kurar. JavaScript ise ziyaretçi bir şey yaptığında sayfanın cevap vermesini sağlar. Doğru dozda kullanıldığında siteyi kullanışlı kılar, fazlası ise siteyi yavaşlatır ve arama motorlarının işini zorlaştırabilir.

JavaScript nedir?

MDN, JavaScript'i birinci sınıf fonksiyonlara sahip, hafif, yorumlanan (ya da anında derlenen) bir programlama dili olarak tanımlıyor. En çok web sayfalarının betik dili olarak bilinse de tarayıcı dışındaki pek çok ortamda, örneğin Node.js'te de kullanılıyor.

İki yaygın karışıklığı baştan düzeltelim:

• JavaScript, Java değildir. MDN bunu açıkça vurgular: iki dilin adları benzese de sözdizimleri, anlamları ve kullanım alanları çok farklıdır.
• JavaScript ile ECMAScript aynı şeyin iki yüzüdür. ECMAScript, Ecma International'ın yayımladığı dil standardıdır (ECMA-262). Tarayıcılar JavaScript'i bu standarda göre uygular. Haziran 2024'te standardın 15. sürümü (ECMAScript 2024) yayımlandı; 2015'ten beri her yıl Haziran'da yeni bir sürüm çıkıyor.

Basit bir örnek:

“`html <button id="teklif">Teklif formunu aç</button> <form id="teklif-formu" hidden>…</form>

<script> document.getElementById("teklif").addEventListener("click", () => { document.getElementById("teklif-formu").hidden = false; }); </script> “`

Ziyaretçi düğmeye tıkladığında JavaScript bu "tıklama olayını" yakalar ve gizli formu görünür yapar. Bu sırada sayfa yeniden yüklenmez.

Nasıl çalışır?

Tarayıcı bir sayfayı açarken HTML'i okur, içinde adı geçen JavaScript dosyalarını indirir ve çalıştırır. JavaScript, sayfanın ağaç yapısına (DOM, Document Object Model) erişip onu değiştirebilir. Örneğin yeni bir öğe ekler, birini gizler, bir metni günceller, sunucudan veri isteyip sayfaya yerleştirir.

Ancak bunun bir bedeli vardır: Tarayıcının JavaScript'i indirmesi, çözümlemesi ve çalıştırması zaman alır. Bu iş sürerken tarayıcı ziyaretçinin tıklamasına geç cevap verebilir. Telefonlarda, bilgisayarlara göre daha sınırlı işlemci gücü nedeniyle bu fark daha belirgin olabilir.

Google JavaScript'i okuyabilir mi?

Evet, ama bir süreç dahilinde. Google'ın JavaScript SEO rehberine göre Google, JavaScript kullanan sayfaları üç aşamada işler: tarama, oluşturma (rendering) ve dizine ekleme. Sayfa önce taranır, sonra bir oluşturma kuyruğuna alınır ve Chromium tabanlı bir tarayıcıyla çalıştırılır; dizine eklenen, oluşturulmuş HTML'dir. Google aynı rehberde, sunucu tarafında oluşturmanın ya da önceden oluşturmanın (pre-rendering) hâlâ iyi bir fikir olduğunu söylüyor. Bu öneri hem kullanıcılar hem de JavaScript çalıştıramayan diğer tarayıcılar için geçerli.

İşletme sahibi açısından pratik sonuç şu: Hizmet açıklamalarınız, fiyat talep formunuz, iletişim bilgileriniz gibi önemli içerik sayfanın HTML'inde doğrudan bulunsun. Yalnızca bir tıklamadan sonra JavaScript'le yüklenen içerik arama motoru tarafından görülmeyebilir.

Web sitenize ve işinize etkisi

Kullanışlılık

İyi kullanılmış JavaScript ziyaretçinin işini kolaylaştırır: formda yanlış girilen telefon numarasını gönderimden önce uyarır, ürün galerisini kaydırılabilir yapar, mobil menüyü açar. Bunlar kullanıcı deneyiminin doğrudan parçalarıdır.

Hız ve Core Web Vitals

Google, Mart 2024'te Core Web Vitals ölçütlerinde First Input Delay (FID) yerine Interaction to Next Paint (INP) ölçütünü kullanmaya başladı. INP, sayfanın kullanıcı etkileşimlerine ne kadar çabuk cevap verdiğini ölçer. Google'a göre deneyimlerin en az %75'inde etkileşimlere 200 milisaniyenin altında yanıt verilmesi "iyi" kabul ediliyor. Ağır JavaScript, INP'yi bozan başlıca etkenlerdendir: Ziyaretçi menüye dokunur ama tarayıcı başka bir betiği çalıştırmakla meşgul olduğu için menü geç açılır.

SEO

Yukarıda anlattığımız gibi, içeriği tamamen JavaScript'e bağlı sayfalar, arama motorunda geç ya da eksik görünebilir. Bağlantıların gerçek <a href> etiketleri yerine yalnızca JavaScript'le çalışan tıklanabilir öğeler olması da Google'ın sayfalarınızı keşfetmesini zorlaştırır. Konunun genel çerçevesi için SEO nedir yazımıza bakabilirsiniz.

Güvenlik ve bakım

Sitenize eklediğiniz her üçüncü taraf betiği (sohbet kutusu, analiz aracı, reklam etiketi, eklenti) başka birinin kodunu sitenizde çalıştırmak demektir. Bu betiklerin hem hız hem güvenlik etkisi vardır. Bu yüzden kullanılmayanları kaldırmak ve güncel tutmak bakımın bir parçasıdır.

Sık yapılan hatalar

• Her eklentinin kendi betiğini her sayfada yüklemesi: Yalnızca iletişim sayfasında gereken bir form betiğinin ana sayfada da yüklenmesi gibi.
• Önemli içeriği yalnızca JavaScript'le göstermek: Sekmeler, akordiyonlar ya da "devamını oku" düğmeleri içeriği HTML'de tutmalı, yalnızca görünürlüğünü değiştirmelidir.
• Yoğun animasyon: Kaydırdıkça hareket eden çok sayıda öğe, özellikle telefonda takılmalara yol açabilir.
• "Optimizasyon" ayarlarını test etmeden açmak: Betikleri geciktiren ya da birleştiren önbellek ayarları hız puanını yükseltebilir ama menüleri ve formları bozabilir. Her değişiklikten sonra sitenin gerçekten çalıştığını kontrol etmek gerekir.
• Bağlantı yerine tıklama olayı: Menüdeki öğelerin gerçek bağlantı olmaması.

Bizim deneyimimiz

Kurumsal sitelerde JavaScript'i bir amaç için kullanıyoruz: mobil menü, form doğrulama, galeri, telefon ve WhatsApp aksiyonları gibi ziyaretçinin işini gerçekten kolaylaştıran yerlerde. Hizmet açıklamaları ve iletişim bilgileri gibi önemli içeriği ise HTML'de doğrudan tutuyoruz.

Projelerimizde hız ayarlarını yaparken de aynı ilkeyi izliyoruz. Bu yüzden betikleri geciktiren ya da birleştiren her ayardan sonra menülerin, formların ve tıklama aksiyonlarının çalıştığını tek tek test ediyoruz. Yüksek bir hız puanı, çalışmayan bir teklif formunu telafi etmez.

Özel yazılım projelerinde ise JavaScript (ve TypeScript) uygulamanın kendisini oluşturur. Bu tür projelerde işi, kurumsal sitelerden farklı olarak bir uygulama mimarisi olarak planlıyoruz.

Sık sorulan sorular

Sonuç

JavaScript, sitenizin ziyaretçiyle konuşan katmanıdır. Amaçlı kullanıldığında formlar, menüler ve galeriler sitenizi daha kullanışlı kılar. Kontrolsüz kullanıldığında ise sitenizi yavaşlatır, arama motorunun içeriğinizi görmesini zorlaştırır ve bakım yükü yaratır. İyi bir denge, önce içeriği HTML'de sağlam kurmak, JavaScript'i de gerçekten fayda sağladığı yerde eklemektir.

Sitenizin etkileşimli öğelerini ya da bir web uygulamasını birlikte planlamak isterseniz web tasarım ve yazılım ve dijital çözümler hizmetlerimize göz atabilirsiniz. Dilerseniz bizimle iletişime de geçebilirsiniz.