javascript

Form gönderildiğinde tarayıcı varsayılan olarak sayfayı yeniden yükler. Bunu engellemek için formun submit olayını dinleyip olay nesnesi üzerindeki preventDefault() yöntemini çağırmalısınız. Böylece form verilerini JavaScript ile doğrulayabilir, sunucuya fetch() ile gönderebilir veya yalnızca...

İlk olarak tarayıcının geliştirici araçlarında veya sayfanızın JavaScript kodunda localStorage.setItem() yöntemini kullanın. Veriler anahtar-değer biçiminde ve metin olarak saklanır; sayfa yenilense veya tarayıcı kapatılıp açılsa bile aynı kaynakta kullanılmaya devam eder. Kaydettiğiniz değeri...

İhtiyacınıza göre Date nesnesini doğrudan metne çevirmek yerine Intl.DateTimeFormat veya toLocaleDateString() kullanın. Böylece ay adları, gün sırası ve sayı biçimi Türkçe kurallarına göre oluşturulur. Örneğin new Intl.DateTimeFormat('tr-TR').format(new Date()) ifadesi, geçerli tarihi Türkçe...

İki nesne aynı alan ve değerlere sahip olsa bile JavaScript’te farklı nesne referanslarıysa Set bunları otomatik olarak aynı kabul etmez. Bu nedenle tekrarları kaldırırken hangi alanın benzersizlik ölçütü olduğunu belirleyip genellikle Map veya filter() ile yeni bir dizi oluşturmalısınız...

İstenen öğe sayfada yoksa JavaScript genellikle null döndürür; bu değerin özelliğine veya metoduna erişmeye çalışmak hata üretir. Hatanın temel çözümü, öğeyi kullanmadan önce gerçekten bulunup bulunmadığını kontrol etmektir. Ayrıca kodun, HTML öğeleri oluşturulduktan sonra çalıştığından emin...

İlk harf değiştiğinde arama isteği göndermek yerine kısa bir bekleme süresi tanımlayın; kullanıcı yazmayı bıraktığında arama fonksiyonunu çalıştırın. Bu davranışa debounce denir. Aşağıdaki örnekte kullanıcı 300 milisaniye boyunca yeni bir karakter girmezse arama çalışır; kullanıcı yazmaya devam...

İçeriği sayfa yenilemeden değiştirmek için tarayıcının History API’sindeki history.pushState() veya history.replaceState() yöntemlerini kullanabilirsiniz. pushState() yeni bir geçmiş kaydı oluşturur; kullanıcı Geri düğmesine bastığında önceki URL’ye dönebilir. replaceState() ise mevcut geçmiş...

İlk paragrafta navigator.clipboard.writeText() çağrısını, kullanıcının tıklaması gibi doğrudan bir etkileşim içinde çalıştırarak metni panoya kopyalayabilirsiniz. İşlem başarılıysa dönen Promise tamamlanır; başarısızsa hata yakalanır. Bu yöntem genellikle HTTPS üzerinden sunulan sayfalarda...

İlk isteği fetch() ile gönderir, dönen yanıtı önce response.json() ile JavaScript nesnesine çevirir, ardından veriyi kullanırsınız. Aşağıdaki örnek, bir API’den liste alıp sonucu sayfaya yazdırır; HTTP hatalarını ve ağ bağlantısı sorunlarını da birbirinden ayırır. Temel kullanım: GET isteğiyle...

İçeriği verilen koşula uyan ilk nesneyi bulmak için find() kullanın. Dizi içinde örneğin id değeri 2 olan nesneyi aramak istiyorsanız koşulu bir geri çağırım işleviyle belirtin; eşleşme varsa nesne, yoksa undefined döner. const kullanicilar = [ { id: 1, ad: "Ayşe", rol: "editör" }, { id...

İçe tıklama ile dışa tıklamayı ayırmak için belge üzerinde bir click dinleyicisi kurun. Tıklanan öğe açılır menünün veya düğmesinin içinde değilse menünün açık durumunu kaldırın. Menü içindeki tıklamalarda olayın belgeye ulaşmasını engellemek yerine closest() ile kontrol yapmak, dinamik...

İlk değerlerin sırasını koruyarak dizideki tekrarları kaldırmanın en kısa yolu Set kullanmaktır. Diziyi new Set() ile benzersiz değerlere dönüştürüp yeniden dizi elde etmek için [...new Set(dizi)] yazabilirsiniz. Örneğin [1, 2, 2, 3, 1] girdisi [1, 2, 3] sonucunu verir. Set ile tekrar eden...

İlk dosya seçildiğinde input öğesinin files listesinden File nesnesini alın, dosyanın gerçekten resim olup olmadığını kontrol edin ve URL.createObjectURL(file) ile geçici bir görüntüleme adresi oluşturup img.src değerine atayın. Böylece dosya sunucuya yüklenmeden tarayıcıda önizlenir; kullanıcı...

Form gönderildiğinde düğmeyi devre dışı bırakmak için işlemi düğmenin click olayına değil, formun submit olayına bağlayın. Böylece kullanıcı düğmeye tıklayarak veya Enter tuşuyla gönderim yaptığında aynı kod çalışır. event.preventDefault() ile gönderimi JavaScript içinde yönetiyorsanız, gönderim...

Formun gönderilmesini engellemek için formun submit olayını dinleyip alanların değerlerini kontrol edin. Boş veya yalnızca boşluk içeren bir alan varsa event.preventDefault() çağrılır; böylece form gönderilmez ve kullanıcıya hangi alanı doldurması gerektiği gösterilir. Alanlar geçerliyse...

İçerik düzenlenebilir durumdayken window nesnesine beforeunload dinleyicisi ekleyerek kullanıcı sayfayı kapatmak, yenilemek veya başka bir adrese gitmek istediğinde tarayıcının yerleşik uyarı penceresini gösterebilirsiniz. Kullanıcı veriyi kaydettiğinde dinleyiciyi kaldırın; böylece gereksiz...

Dosya yükleme ilerlemesini tarayıcıda göstermek için en pratik yöntem, dosyayı XMLHttpRequest ile gönderip xhr.upload nesnesinin progress olayını dinlemektir. Olaydan alınan loaded ve total değerleriyle yüzde hesaplanır; yükleme tamamlandığında ilerleme çubuğu yüzde 100'e çıkarılır. Aşağıdaki...

API’den veri yüklenirken yükleniyor göstergesi eklemek için isteği başlatmadan önce göstergeyi görünür yapın, istek tamamlandığında ise başarılı veya hatalı sonuçtan bağımsız olarak gizleyin. Bunun için genellikle fetch() çağrısından önce bir yükleme alanını gösterir, try...catch...finally...

İlk tuşta hemen istek göndermek yerine arama metni değiştikçe zamanlayıcıyı sıfırlayın ve kullanıcı kısa bir süre yazmayı bıraktığında isteği gönderin. Bu yaklaşımın adı debounce yöntemidir. Önceki istek hâlâ sürüyorsa onu da iptal ederseniz hem gereksiz API çağrılarını hem de eski yanıtın yeni...

İlk paragraf ana yanıtı, izlenecek yolu ve ulaşılabilecek sonucu doğrudan veriyor: JavaScript’te tarih ve saati kullanıcıya yerel biçimde göstermek için tarih değerini güvenilir bir biçimde oluşturup Intl.DateTimeFormat veya toLocaleString() ile biçimlendirin. Kullanıcının tarayıcıdaki yerel...