Kendi Tap Sayacını Kurma: Yeni Başlayanlar İçin Kodlama Rehberi

Pekala, bir web geliştirici olmak istiyorsun?

İnatın 50 saatlik eğitim videolarını izleyebilir, ya da bir şeyler inşa edebilirsin.

A Tap Counter ön uç geliştiriciler için kânonik "İlk Proje"dir. Değişkenler, fonksiyonlar, olay dinleyicileri ve DOM manipülasyonu gibi tüm temelleri kapsar.

Bu rehberde, kopyala-yapıştırma kodunu size vermeyeceğiz. Pompalı sayaçın nasıl çalıştığının arkasındaki mantığı açıklayacağız.

The Logic flow

Bir sayaç uygulaması üç şey yapar:

1. Durum: Bir sayıyı hatırlar (örneğin, `count = 0`). 1. Etkinlik: Bir düğmeye tıklamanızı bekliyor. 1. Güncelleme: Tıklanırsa, `count = count + 1` değerini artırır ve ekranı günceller.

Adım 1: HTML (Şekil)

İhtiyacınız, bir sayı göstermek için bir yer ve tıklamak için bir düğme.

``` 0 Beni Tıklayın ```

İşte bu kadar. Çirpis, ama var.

Adım 2: JavaScript (Beyin)

İşte sihir gerçekleşiyor burada.

Buna göre, komputere şunu söylemeliyiz: "Hey, o Butonu bul. Birileri onu tıkladığında, Sayıyı al, 1 ekle ve tekrar göster."

Kodu aşağıdaki gibi çalıştırıyor:

``` let count = 0; // Durum

function increase() { count++; // Add 1 document.getElementById("number").innerText = count; // Update Ekran } ```

Adım 3: LocalStorage (Bellek)

Kodu yukarıda sorun mu? Eğer sayfayı yenilersek, sayaç 0'a geri döner.

Bir kullanışlı sayaç (örneğin, bir Tasbeeh veya satır sayacı) oluşturmak için hatırlaması gerekir.

Tarayıcılar, `localStorage` adlı küçük bir veritabanına sahiptir.

• Kaydet: Her tıklamada, tarayıcıya şunu söylüyoruz: "‘sayı’yı kalıcı olarak kaydet."
• Yükle: Sayfa yüğlenirken, soruyoruz: “Kaydedilmiş bir numara var mı?” Eğer varsa, oradan başla.

Neden Bu Proje Önemli

Bir sayaç oluşturmak, Durum Yönetiminin temel kavramını anlamanızı öğretir.

İster yapılacaklar listesi, bir alışveriş arabası veya Facebook oluşturun, hepsi sadece karmaşık versiyonlardır Bir Sayma Sayar'dan.

• Facebook Like Button? O, bir tıklama sayacı.
• Twitter Retweet sayısı? O bir tap sayacı.
• Amazon Sepet Ürün Sayısı? O bir dokunma sayacı.

Sonuç

Sadece araçları kullanmayın, kendiniz oluşturun. Bir metin dosyası açın, o on satır kodu yazın ve kendi özel sayacınızın hayat bulmasını izleyin. Bu, daha büyük bir dünyaya adım atmanın ilk adımıdır.