javascript

Kullanıcı tercihini localStorage içine kaydetmek için değeri anahtar-değer biçiminde setItem() ile yazın, sayfa açıldığında getItem() ile okuyun ve kullanıcı tercih yapmadıysa varsayılan değeri kullanın. Örneğin tema seçimini kaydeden kodda kullanıcı açık veya koyu temayı seçtiğinde tercih...

İşlem için en pratik yöntem, düğmenin click olayında navigator.clipboard.writeText() metodunu çağırmaktır. Kopyalanacak metni bu metoda verin, dönen Promise başarıyla tamamlanırsa kullanıcıya bilgi gösterin. Bu API’nin çalışması için sayfanın güvenli bağlamda, yani genellikle HTTPS üzerinden...

Sayfa kaydırıldığında üst menünün ekranda kalması için en pratik yöntem, menüye CSS’te position: sticky vermektir. Menü sayfanın üst kenarına ulaştığında sabitlenir; JavaScript ise menünün sabitlenmesi sırasında sınıf eklemek, gölge vermek veya farklı bir görünüm uygulamak gerektiğinde...

İstek sonucunu kullanıcıya göstermek için fetch() çağrısını try...catch içine alın, HTTP durumunu response.ok ile kontrol edin ve başarısız durumda mesaj alanının metnini güncelleyin. Önemli nokta: Sunucunun 404 veya 500 döndürmesi, fetch() tarafından kendiliğinden hata olarak yakalanmaz; bu...

Açılır menüyü dışına tıklanınca kapatmak için belge üzerinde bir click olayı dinleyin; tıklanan öğe menü kutusunun içinde değilse menünün görünürlüğünü kaldırın. Menü düğmesine yapılan tıklamanın belge olayına karışmaması için menüyü açma-kapama işlemini aynı mantık içinde yönetin. Aşağıdaki...

Tıklanan öğenin başka bir öğeyi göstermesi için tıklama olayını dinleyip hedef öğenin görünürlük durumunu değiştirmeniz gerekir. En küçük çalışır örnekte düğmeye click olayı bağlanır, başlangıçta gizlenen kutunun hidden özelliği değiştirilir ve düğmenin metni güncellenir. Aşağıdaki kodu tek bir...

İki kez gönderimi engellemek için formun submit olayını tek bir yerde yakalayın, ilk gönderimde bir kilit değişkeni etkinleştirin ve isteğin tamamlanmasına kadar gönderme düğmesini devre dışı bırakın. Ancak bu yalnızca tarayıcıdaki çift tıklamayı azaltır; ağ yeniden denemeleri, birden fazla...

İlk olarak listenin kopyasını mı yoksa mevcut diziyi mi değiştirmek istediğinize karar verin. JavaScript’te sort() diziyi yerinde sıralar ve karşılaştırma işlevi verilmezse öğeleri metin gibi karşılaştırır. Sayıları doğru sıralamak için (a, b) => a - b kullanın; büyükten küçüğe sıralama için...

Formu sayfa yenilenmeden göndermek için formun submit olayını JavaScript ile yakalayıp event.preventDefault() çağırın; ardından alanları FormData ile okuyarak fetch() üzerinden sunucuya gönderin. Sunucudan gelen yanıtı işleyip başarı veya hata mesajını sayfanın ilgili bölümünde gösterdiğinizde...

İstemci tarafında zorunlu alanları doğrulamak için formun submit olayını dinleyin, gönderimi event.preventDefault() ile geçici olarak durdurun, alanların boş olup olmadığını kontrol edin ve yalnızca tüm koşullar sağlanıyorsa formu gönderin. Aşağıdaki örnekte tarayıcının required desteği temel...

Dosya seçme alanının change olayını dinleyip seçilen dosyayı URL.createObjectURL() ile geçici bir görüntü adresine dönüştürerek önizleme gösterebilirsiniz. Kullanıcı yeni bir dosya seçtiğinde eski geçici adresi URL.revokeObjectURL() ile serbest bırakın; form gönderildiğinde ise dosyayı ayrıca...

Sayfa yenilendiğinde form verilerini korumanın en pratik yolu, alan değerlerini kullanıcı yazdıkça localStorage içine kaydetmek ve sayfa yeniden açıldığında bu değerleri geri yüklemektir. Verilerin yalnızca aynı sekme açıkken korunması gerekiyorsa sessionStorage kullanın. Aşağıdaki örnekte form...

API’den veri yüklenirken kullanıcıya bildirim göstermek için isteğin üç durumunu ayrı ele alın: istek başlamadan önce yükleniyor bildirimi gösterin, başarılı yanıt geldiğinde bu bildirimi kaldırıp verileri ekrana yazın, hata oluştuğunda ise kullanıcıya anlaşılır bir hata mesajı gösterin. En...

Arama kutusundaki her input olayında kullanıcının yazdığı metni alıp listedeki öğelerle karşılaştırarak yalnız eşleşenleri görünür bırakabilirsiniz. Aşağıdaki örnekte arama metni küçük harfe çevrilir, listedeki adlarla karşılaştırılır ve eşleşmeyen öğeler anında gizlenir. Arama kutusu...

Bir tarihi kullanıcının diline ve saat diline göre göstermek için JavaScript’te Intl.DateTimeFormat kullanın. Dil bilgisini navigator.language, saat dilini ise tarayıcının yerel ayarlarından Intl.DateTimeFormat().resolvedOptions().timeZone ile alabilirsiniz. Böylece aynı tarih; Türkçe...

İstenen yönlendirme için butonun tıklanma olayında window.location.href veya window.location.assign() kullanabilirsiniz. Örneğin document.getElementById('git').addEventListener('click', () => { window.location.href = 'iletisim.html'; }); kodu çalıştığında kullanıcı aynı sekmede iletisim.html...

İçeriği sayfa yenilenmeden güncellemek için JavaScript ile DOM’daki ilgili elementi seçip değerini değiştirebilir, sunucudan yeni veri alınacaksa fetch() ile isteği asenkron gönderebilirsiniz. Form gönderimini preventDefault() ile durdurduğunuzda tarayıcı yeni bir sayfa açmaz; işlem...

İçeriğin üst menüsünü sayfa kaydırılırken görünür tutmanın en kolay yolu CSS’te position: sticky kullanmaktır. Menü, belirlediğiniz üst mesafeye ulaştığında bulunduğu alan içinde sabitlenir. Menü sayfanın tamamına göre davranmalı, belirli bir kapsayıcı içinde sınırlanmamalı ve üst kapsayıcıların...

İstemci tarafında bir dosya indirmek için en basit yöntem, dosyanın adresini href özniteliğine yazıp bağlantıya download özniteliği eklemektir. Dosya JavaScript ile oluşturuluyor veya bir istekten alınıyorsa önce veriyi Blob nesnesine dönüştürüp geçici bir URL oluşturabilir, ardından bu URL’yi...

Bir öğe ekranda görünür hâle geldiğinde animasyon başlatmanın en temiz yolu IntersectionObserver kullanmaktır. Bu API, öğenin görünürlük alanına girip girmediğini izler; öğe göründüğünde CSS sınıfı eklenir ve animasyon çalışır. Böylece sürekli scroll olayı dinleyip her kaydırmada konum hesabı...