JavaScript Nedir? Tarayıcıdan Sunucuya Çalışma Mantığı

HTML, CSS ve JavaScript aynı sayfada neyi paylaşır?

Bir web sayfasının görevlerini üç katmanda düşünmek açıklayıcıdır. HTML; başlık, paragraf, buton, form ve görsel gibi öğelerin yapısını kurar. CSS; renk, boyut, konum ve görünüm gibi özellikleri düzenler. JavaScript ise bu öğeleri okuyabilir, değiştirebilir ve kullanıcı eylemlerine göre yeni işlemler başlatabilir.

Örneğin HTML içinde bir buton ve bir metin alanı bulunduğunu varsayalım. CSS butonun rengini belirleyebilir; ancak butona basıldığında metin alanındaki değerin okunması, kontrol edilmesi ve ekranda bir mesaj gösterilmesi JavaScript’in görev alanına girer. JavaScript bu işlemleri tarayıcının sunduğu Document Object Model, yani DOM, üzerinden gerçekleştirir. DOM, HTML belgesindeki öğelerin program tarafından erişilebilir bir nesne ağacı olarak temsil edilmesidir.

Bu ayrım bir karar vermeyi kolaylaştırır: Sorun yalnızca sayfanın yapısıysa HTML, yalnızca görünümse CSS, kullanıcı eylemine göre değişen davranış veya hesaplama söz konusuysa JavaScript düşünülür. Gerçek projelerde bu üç teknoloji birlikte kullanılabilir; ancak her biri aynı işi yapmaz.

JavaScript kodu tarayıcıda hangi sırayla işlenir?

İstemci tarafında çalışma sırasında tarayıcı, web sayfasını oluşturan HTML, CSS ve JavaScript dosyalarını alır. JavaScript motoru kodu işler ve çalıştırır. Chrome’daki V8, kaynakta adı geçen JavaScript motoru örneklerinden biridir. Kodun çalışmasıyla sayfadaki öğelere erişilebilir, olaylar dinlenebilir ve DOM üzerinde değişiklik yapılabilir.

Bir butonun açılır menüyü göstermesi tipik olarak şu zincirle gerçekleşir: Önce HTML içinde buton ve menü bulunur. JavaScript, butonu seçer ve tıklama olayına bir işlev bağlar. Kullanıcı tıkladığında bu işlev çalışır; menünün görünürlüğünü belirleyen sınıf veya özellik değiştirilir. Tarayıcı da yeni duruma göre görünümü günceller.

Buradaki önemli nokta, JavaScript’in her işlemde sayfayı baştan yüklemek zorunda olmamasıdır. DOM üzerinde yapılan bir değişiklik yalnızca ilgili arayüz bölümünü etkileyebilir. Bu, filtreleme, açılır menü ve form geri bildirimi gibi etkileşimlerde akıcı bir deneyim sağlayabilir. Ancak tarayıcıda yapılan doğrulama, tek başına sunucu tarafındaki güvenlik kontrolünün yerine geçmez; kullanıcı tarayıcıdaki kodu değiştirebilir veya doğrudan sunucuya istek gönderebilir.

İstemci tarafı ile Node.js sunucu tarafı arasındaki görev farkı

Web bağlamında istemci tarafı ve sunucu tarafı iki önemli kullanım alanıdır. Node.js ise JavaScript’i tarayıcı dışında çalıştıran, sunucu uygulamaları dahil çeşitli programları yürütmeye yarayan bir çalışma zamanı ortamıdır. İstemci tarafında kod kullanıcının tarayıcısında çalışır. Buton tıklamasını yakalamak, form alanını kontrol etmek, görsel galerisini değiştirmek ve arayüzü güncellemek bu bağlama örnektir.

Sunucu tarafında ise JavaScript, Node.js gibi bir çalışma zamanı ortamında tarayıcıdan bağımsız çalışabilir. Sunucu; gelen istekleri karşılayabilir, uygulama iş mantığını yürütebilir, API oluşturabilir ve veri tabanı işlemleriyle iletişim kurabilir. Örneğin kullanıcı bir ürün filtrelediğinde tarayıcıdaki JavaScript bir istek gönderebilir; sunucu bu isteği işleyip uygun sonuçları döndürebilir.

Bu iki tarafın görevleri birbirinin kopyası değildir. Tarayıcı arayüzün kullanıcıya nasıl tepki vereceğini yönetirken sunucu, erişim yetkisi, kalıcı veri ve uygulama kuralları gibi işlemleri üstlenebilir. Bir JavaScript dosyasının tarayıcıda çalışması, otomatik olarak veri tabanına doğrudan erişebileceği anlamına gelmez. Veri tabanı erişimi çoğunlukla sunucu tarafındaki uygulama ve API katmanı üzerinden tasarlanır; SQL de bu veri tabanı iletişiminin kullanılan araçlarından biri olabilir.

DOM, olaylar ve form doğrulama arasındaki bağlantı

JavaScript’in web sayfalarındaki ayırt edici gücü, olayları dinleyerek DOM’u güncellemesidir. Olay; tıklama, fare hareketi, klavye girişi veya form gönderme gibi gerçekleşen bir kullanıcı ya da tarayıcı durumudur. JavaScript bir olaya tepki vermek üzere işlev tanımlayabilir.

Form örneğinde öğretim zinciri şöyledir: Kullanıcı alanlara veri girer; JavaScript ilgili alanların değerlerini okur; koşullara göre veriyi değerlendirir; uygun değilse kullanıcıya hata mesajı gösterir; uygunsa gönderme işlemini sürdürebilir. Bu değerlendirme, örneğin zorunlu bir alanın boş olup olmadığını kontrol edebilir. Fakat tarayıcıdaki kontrol, sunucunun gelen veriyi yeniden denetlemesi gerekliliğini ortadan kaldırmaz.

DOM değişikliği ile veri kaydetmeyi de karıştırmamak gerekir. Ekranda 'Kayıt başarılı' yazısını göstermek yalnızca arayüzü değiştirebilir; kalıcı kayıt için sunucuya istek gönderilmesi ve sunucunun veriyi işlemesi gerekir. Bu ayrım, JavaScript’in kullanıcıya görünen davranışları ile uygulamanın arka plandaki veri işlemlerini ayırır.

API ve SPA kullanımında JavaScript’in rolü

JavaScript, sayfanın tamamını yenilemeden sunucudan veri alıp ekrandaki belirli bölümleri güncellemek için kullanılabilir. Bu modelde tarayıcı bir API’ye istek gönderir, sunucu bir yanıt üretir ve JavaScript yanıtı DOM’a yansıtır. E-ticaret filtresi, sosyal medya akışının güncellenmesi ve gerçek zamanlı sohbet arayüzü bu yaklaşımın kullanım alanlarına örnektir.

Tek Sayfa Uygulaması, yani SPA, sayfa geçişlerinin ve içerik güncellemelerinin büyük bölümünü JavaScript ile yönetebilen uygulama yaklaşımıdır. Mevcut makalede Gmail, Google Haritalar ve Facebook bu deneyime örnek olarak verilir. SPA yaklaşımında kullanıcı masaüstü uygulamasına benzeyen akıcı bir arayüz görebilir; ancak bu, tüm verilerin tarayıcıda bulunduğu veya sunucuya hiç ihtiyaç olmadığı anlamına gelmez.

API kavramı burada bir iletişim sözleşmesi gibi düşünülebilir: İstemci hangi isteği göndereceğini, sunucu da hangi biçimde yanıt vereceğini belirler. JavaScript’in API kullanabilmesi, API’nin kendisiyle aynı şey değildir. JavaScript istemci veya sunucu tarafında API’ye bağlanan kodu yazabilir; API ise uygulamalar arası veri ve işlev erişimini düzenleyen arayüzdür.

JavaScript ekosistemi: kütüphane, framework ve farklı platformlar

JavaScript’in kullanım alanı yalnızca tarayıcıdaki web sayfalarıyla sınırlı değildir. Kaynakta web sitelerinin yanı sıra sunucu uygulamaları, mobil uygulamaları, masaüstü uygulamaları ve tarayıcı tabanlı oyunlar da sayılır. React Native, Ionic ve NativeScript mobil uygulama geliştirme araçlarına; Electron ise HTML, CSS ve JavaScript ile masaüstü uygulaması geliştirmeye örnek olarak verilir. WebGL ile birlikte tarayıcı tabanlı 2D veya 3D grafik deneyimleri oluşturulabilir.

Kütüphane ile framework ayrımı bu ekosistemi anlamayı kolaylaştırır. Bir kütüphane, belirli görevleri hazır işlevlerle çözmek için projeye eklenebilir; geliştirici çoğunlukla kendi uygulama akışını kontrol eder. Framework ise uygulamanın yapısını ve çalışma düzenini daha fazla belirleyen bir geliştirme çatısıdır. Her iki araç da JavaScript’in kendisi değildir; JavaScript üzerine kurulmuş yardımcı veya yapılandırıcı çözümlerdir.

JavaScript’in açık kaynakla ilişkisi de dikkatli ifade edilmelidir. JavaScript bir programlama dilidir ve ECMAScript standardına dayanır. JavaScript motorlarının, araçların ve kütüphanelerin bazıları açık kaynak olarak geliştirilebilir; bu nedenle 'JavaScript’in kendisi bir yazılım deposudur' demek yerine dil standardı ile onu uygulayan araçları ayırmak gerekir.

Adım adım çözümlü örnekler

Örnek 1 — Sayfa yenilemeden ürün filtresi mantığı

Verilenler: Bir e-ticaret sayfasında ürünler listeleniyor. Kullanıcı bir renk veya fiyat aralığı seçiyor. Beklenen davranış, listenin seçime göre güncellenmesi ve sayfanın baştan yüklenmemesi.

Çözüm adımları:

1. HTML, filtre seçeneklerini ve ürün listesinin yerleştirileceği yapıyı oluşturur.
2. JavaScript, renk ya da fiyat seçiminin oluşturduğu değişiklik olayını dinler.
3. Seçilen değerleri okur ve ürünlerin hangi koşula uyduğunu değerlendirir.
4. Sonuçlar yalnızca tarayıcıda mevcutsa DOM’daki ürün görünümünü günceller. Yeni verinin sunucudan alınması gerekiyorsa JavaScript bir API isteği başlatır.
5. Sunucudan yanıt geldikten sonra dönen ürün verileri DOM’a yazılır.

Sonuç: Kullanıcı filtreyi değiştirirken etkileşimi yöneten katman JavaScript’tir. HTML filtre ve liste yapısını, CSS görünümü, API ve sunucu ise gerekli yeni verinin sağlanmasını üstlenebilir. Filtre değiştiğinde sayfanın yenilenmemesi, JavaScript’in DOM veya API ile çalışmasına bağlıdır; her filtre uygulaması için aynı teknik zorunlu değildir.

Örnek 2 — Formdaki eksik alanı kullanıcıya bildirme

Verilenler: Bir kayıt formunda ad alanı bulunuyor. Kullanıcı gönderme düğmesine bastığında alan boşsa hata mesajı gösterilecek; doluysa gönderme süreci devam edecek.

Çözüm adımları:

1. HTML, ad alanını, gönderme düğmesini ve hata mesajı için ayrılmış bölümü tanımlar.
2. JavaScript, formun gönderilme olayını dinler.
3. Ad alanındaki değeri okur ve boş olup olmadığını kontrol eder.
4. Değer boşsa hata mesajını DOM’a ekler ve gönderme işlemini durdurabilir.
5. Değer doluysa istemci tarafındaki kontrol geçilir; veri sunucuya gönderilecekse sunucu da kendi doğrulamasını yapar.

Sonuç: JavaScript hızlı geri bildirim sağlar; ancak tarayıcıdaki kontrol güvenlik veya veri doğrulama açısından tek başına yeterli kabul edilmemelidir. Sunucu, kendisine ulaşan veriyi bağımsız biçimde denetlemelidir.

Sık yapılan hatalar ve karıştırılan kavramlar

JavaScript ile Java aynı dil değildir. İsim benzerliğine rağmen JavaScript’in web tarayıcıları ve Node.js gibi ortamlarla ilişkili farklı bir dil ve ekosistemi vardır.

JavaScript’i HTML veya CSS sanmak da yaygın bir hatadır. HTML yapı, CSS görünüm, JavaScript davranış ve programlama mantığı için kullanılır. Bir animasyonun görünümü CSS ile yapılabilir; animasyonun ne zaman başlayacağını bir kullanıcı olayına bağlamak için JavaScript gerekebilir.

'JavaScript yalnızca tarayıcıda çalışır' ifadesi eksiktir. Tarayıcı önemli bir istemci tarafı ortamıdır; Node.js sayesinde sunucu tarafı uygulamaları da geliştirilebilir. Buna karşılık 'JavaScript her platformda aynı şekilde çalışır' demek de doğru değildir. Kullanılabilen özellikler, çalışma ortamının sunduğu API’lere ve kullanılan araçlara göre değişebilir.

İstemci tarafında yapılan doğrulamayı güvenlik kontrolü sanmak başka bir sınır durumudur. Tarayıcıdaki kod kullanıcıya hızlı geri bildirim verir; sunucunun yetki, veri biçimi ve iş kuralı kontrolleri ayrıca uygulanmalıdır.

Kütüphane ve framework aynı kavram değildir. İkisi de JavaScript ile birlikte kullanılabilir, fakat kütüphane belirli işlevleri çağırmaya; framework ise uygulamanın genel yapısını belirlemeye daha yakındır.

Son olarak, JavaScript kodunun 'yorumlanması' ifadesi başlangıç düzeyinde kullanılabilse de modern motorlar kodu çeşitli biçimlerde işleyip optimize edebilir. Bu yüzden çalışma performansını yalnızca 'yorumlanan dil yavaştır' gibi tek bir genellemeyle değerlendirmek doğru değildir.