JavaScript

JavaScript, açılan menüler, girdiyi kontrol eden formlar ve sayfa yenilenmeden güncellenen içerikler gibi web sayfalarını etkileşimli hale getirmek için kullanılır. JavaScript ayrıca Node.js aracılığıyla sunucularda çalışır ve birçok mobil ve masaüstü uygulamaya güç verir. Her modern tarayıcı JavaScript'i doğrudan çalıştırır.

JavaScript ve Java, adlarının yalnızca bir kısmını paylaşan iki ayrı programlama dilidir. JavaScript ağırlıklı olarak tarayıcılarda çalışır ve dinamik tiplidir, Java ise statik tiplidir ve Java Sanal Makinesi için bytecode'a derlenir. Benzer ad, 1990'larda alınan bir pazarlama kararından gelir.

DOM yani Document Object Model, JavaScript'in sayfayı okuyup değiştirebilmesi için tarayıcının bir HTML sayfasından oluşturduğu nesne ağacıdır. JavaScript DOM üzerinden öğeleri bulabilir, metni değiştirebilir, sınıf ekleyebilir ve yeni öğeler oluşturabilir. Bir betiğin sayfada yaptığı her görünür değişiklik DOM üzerinden geçer.

Bir HTML sayfasına JavaScript, kodu doğrudan içeren ya da src özniteliğiyle ayrı bir JavaScript dosyasını gösteren bir script etiketiyle eklenir. script etiketini body'nin sonuna koymak ya da defer özniteliğini eklemek, önce HTML'in yüklenmesini sağlar. Ayrı JavaScript dosyalarını önbelleğe almak ve bakımını yapmak daha kolaydır.

JavaScript'te let ve const blok kapsamlıdır, var ise fonksiyon kapsamlıdır ve yeniden tanımlanabilir. Bir const değişkenine yeniden atama yapılamaz, ancak const içinde saklanan bir nesnenin içi yine de değişebilir. Modern JavaScript varsayılan olarak const, değerin değişmesi gerektiğinde let kullanır ve var'dan kaçınır.

JavaScript'te event'ler, bir tıklama, tuşa basma, form gönderimi ya da sayfanın yüklenmesinin bitmesi gibi bir şey olduğunda tarayıcının gönderdiği sinyallerdir. Bir betik, addEventListener ile bir dinleyici fonksiyon bağlayarak bir olaya yanıt verir. Event listener'lar, JavaScript'in bir sayfayı kullanıcıya tepki verir hale getirme yoludur.

JavaScript'te event delegation, her alt öğeye ayrı bir dinleyici bağlamak yerine üst öğeye tek bir event listener bağlamak demektir. Dinleyici, hangi alt öğeye tıklandığını görmek için olayın hedefini kontrol eder. Event delegation daha az bellek kullanır ve sayfaya sonradan eklenen öğeler için de çalışır.

JavaScript'te bir API'den veri istemek için fetch fonksiyonunu kullanın, ardından gövdeyi yanıtın json metoduyla okuyun. fetch fonksiyonu bir promise döndürür, bu yüzden kod genellikle sonucu async ve await ile bekler. Yanıt durumunu kontrol etmek ve hataları yakalamak, ağ sorun çıkardığında sayfanın çalışmaya devam etmesini sağlar.

JavaScript'te promise, bir ağ isteğinin sonucu gibi daha sonra hazır olacak bir değeri temsil eden nesnedir. Bir promise ya beklemede, ya yerine getirilmiş ya da reddedilmiş durumdadır. Kod sonuca then ve catch ile ya da async ve await ile tepki verir.

async ve await, JavaScript kodunun bir promise'i sıradan adım adım kod gibi okunan bir şekilde beklemesini sağlar. async olarak işaretlenen bir fonksiyon her zaman bir promise döndürür, await ise promise sonuçlanana kadar o fonksiyonu duraklatır. async fonksiyonlar içindeki hatalar normal bir try ve catch bloğuyla yakalanır.

ECMAScript 2015 olarak da bilinen ES6, JavaScript dil standardının 2015'teki büyük güncellemesidir. ES6; let ve const, arrow fonksiyonlar, sınıflar, template literal'lar, destructuring, modüller ve promise'leri ekledi. Her modern tarayıcı ES6'yı destekler ve o zamandan beri her yıl JavaScript'e yeni özellikler eklenir.

JavaScript'te arrow fonksiyonlar, => sözdizimiyle fonksiyon yazmanın daha kısa bir yoludur. Arrow fonksiyonun kendine ait bir this'i yoktur, bu yüzden this çevresindeki koddan gelen değeri korur. Arrow fonksiyonlar, map ve filter'a verilenler gibi kısa callback'lerde yaygındır.

JSON yani JavaScript Object Notation, verileri anahtar ve değer olarak saklamak ve paylaşmak için kullanılan bir metin formatıdır. JavaScript bir nesneyi JSON.stringify ile JSON metnine, JSON metnini de JSON.parse ile tekrar nesneye dönüştürür. Çoğu web API'si veriyi JSON olarak gönderir ve alır.

JavaScript'e başlamak yeni başlayanlar için kolaydır, çünkü ihtiyaç duydukları tek şey bir tarayıcı ve bir metin editörüdür. Asenkron kod, kapsam ve dilin etrafındaki çok sayıda araç gibi daha zor kısımlar sonra gelir. Çoğu öğrenci birkaç haftalık düzenli pratikle işe yarar etkileşimli sayfalar yapar.

Evet, React veya Vue'dan önce düz JavaScript öğrenmek iki framework'ü de anlamayı çok kolaylaştırır. Her iki framework de fonksiyonlar, diziler, nesneler, modüller ve promise'ler gibi temel JavaScript özellikleri üzerine kuruludur. Temelleri bilen geliştiriciler framework kodunda tahmin yürütmek yerine hata ayıklayabilir.

TypeScript, Microsoft tarafından geliştirilen ve düz JavaScript'e derlenen, statik tipler eklenmiş JavaScript'tir. Tipler, kod editörünün birçok hatayı kod çalışmadan önce yakalamasını sağlar. TypeScript, çok sayıda geliştiricinin aynı kodu paylaştığı büyük projelerde popülerdir.

JavaScript sayfalarını daha az JavaScript göndererek, betikleri defer veya async ile yükleyerek ve her sayfanın yalnızca ihtiyacını yüklemesi için büyük paketleri bölerek hızlandırın. Dosyaları küçültmek ve sıkıştırmak indirme boyutunu azaltır. Ağır işleri ana iş parçacığının dışında tutmak, sayfanın tıklamalara ve yazmaya hızlı yanıt vermesini sağlar.

JavaScript'te === hem değeri hem tipi karşılaştırırken, == karşılaştırmadan önce tipleri dönüştürür. Örneğin 0 == "0" true, ancak 0 === "0" false sonucunu verir. === kullanmak şaşırtıcı sonuçları önler ve modern JavaScript kodunda olağan kuraldır.

JavaScript modülleri, fonksiyon ya da değer dışa aktaran ve ihtiyaç duyduklarını diğer dosyalardan içe aktaran ayrı dosyalardır. Modüller kodu düzenli tutar, global değişkenleri önler ve büyük projelerin bakımını kolaylaştırır. Tarayıcılar bir modülü type özniteliği module olarak ayarlanmış bir script etiketiyle yükler.

Tarayıcıda JavaScript hatalarını F12 ile ya da sayfaya sağ tıklayıp İncele seçilerek açılan geliştirici araçlarıyla ayıklarsınız. Console hataları ve yazdırılan değerleri gösterir, Sources paneli ise kesme noktaları koyup kodu satır satır ilerletmenizi sağlar. Network paneli sayfanın yaptığı her isteği ve her birinin yanıtını gösterir.

Event loop, tek iş parçacıklı JavaScript'in donmadan birçok görevi yönetmesini sağlayan mekanizmadır. Zamanlayıcılar ve ağ istekleri gibi yavaş işler arka planda bekler, event loop da çağrı yığını boş olduğunda tamamlanan her callback'i çalıştırır. Uzun süren kod yine de event loop'u bloke eder, ağır döngülerin bir sayfayı yanıt vermez hale getirmesinin nedeni budur.

Evet, JavaScript Node.js, Deno ve Bun gibi çalışma ortamları sayesinde sunucuda çalışır. Sunucu tarafı JavaScript API'ler geliştirebilir, dosya okuyabilir ve veritabanlarına bağlanabilir. Hem tarayıcıda hem sunucuda tek bir dil kullanmak, bir ekibin kodu ve becerileri paylaşmasını sağlar.

JavaScript kodunu güvende tutmak için güvenilmeyen metni sayfaya asla innerHTML ile eklemeyin, tüm girdileri sunucuda yeniden doğrulayın ve gizli bilgileri front-end kodunun dışında tutun. API anahtarları dahil tarayıcıya gönderilen her şey kullanıcılar tarafından okunabilir. Bir Content Security Policy ve güncel bağımlılıklar birçok yaygın saldırıyı engeller.

JavaScript'te localStorage veriyi yalnızca tarayıcıda tutar, çerezler ise her istekle birlikte sunucuya gönderilir. localStorage daha fazla veri tutar ve seçilen tema gibi ayarlar için uygundur. HttpOnly ve Secure olarak işaretlenmiş çerezler, betikler onları okuyamadığı için giriş oturumları için daha güvenli bir yerdir.

Bakımı kolay JavaScript kodu küçük fonksiyonlar, anlaşılır adlar, modüller, tutarlı biçimlendirme ve ESLint gibi bir linter ile yazılır. Global değişkenlerden kaçının ve DOM'u değiştiren kodu veriyi işleyen koddan ayrı tutun. Otomatik testler sonraki değişiklikleri güvenli hale getirir.