Jadi, anda ingin menjadi seorang pengembang web?

Anda boleh menonton 50 jam tutorial, atau anda boleh membina sesuatu.

Seorang Tap Counter ialah projek "Pertama" yang paling tepat untuk pengembang depan. Ia merangkumi semua asas: pembolehubah, fungsi, penyelesaian pemamat peristiwa, dan manipulasi DOM.

Dalam panduan ini, kami tidak akan memberi anda kod salin dan paste. Kami akan menjelaskan logika bagaimana penghala ketikan berfungsi di bawah penutup.

Aliran Logik

A counter app melakukan tiga perkara:

1. Keadaan: Ia mengingati sebuah nombor (cth. `count = 0`). 1. Acara: Ia menunggu anda untuk klik butang. 1. Kemaskini: Apabila anda klik, ia melakukan `count = count + 1` dan mengemas kini skrin.

Langkah 1: HTML (Kerangka)

Anda memerlukan tempat untuk menunjukkan nombor dan butang untuk ditepuk.

```

0

Itulah. Ia menjijikkan, tetapi ia wujud.

Langkah 2: The JavaScript (The Brain)

Ini adalah di mana keajaiban berlaku.

Kita perlu kata kepada komputer: "Hoi, temukan Butang itu. Bila seseorang menyentuh ia, ambil Nombor, tambahkan 1, dan tunjukkannya semula."

Logik kod ini seperti ini:

``` let count = 0; // The State

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

Langkah 3: LocalStorage (The Memory)

Masalah dengan kod di atas? Jika anda menyegarkan halaman, jumlah itu kembali kepada 0.

Untuk membuat pengiraan berguna (seperti Tasbeeh atau pengiraan baris), ia perlu mengingati.

Pengeluar mempunyai pangkalan data kecil yang dipanggil `localStorage`.

• Simpan: Setiap kali kami klik, kami memberitahu pelayar: "Simpan 'count' secara kekal."
• Muat: Apabila laman memuat, kami bertanya: “Adakah anda mempunyai nombor yang disimpan?” Jika ya, mulakan dari situ.

Kenapa Projek Ini Penting

Membangun penghala air mengajar anda konsep asas Pengurusan Keadaan.

Adakah anda membina senarai Tugasan, keretaman beli-belas, atau Facebook, ia semua hanyalah versi yang rumit daripada Penangka Sentakan.

• Butang Disukai Facebook? Itu ialah pengiraan ketikan.
• Twitter Retweet hitungan? Itu ialah pengira tap.
• Amazon Cart Item count? Itu ialah pengira bilangan ketikan.

Kesimpulan

Jangan hanya gunakan alat, bina mereka. Buka fail teks, tulis sepuluh baris kod itu, dan saksikan penyangkaan khusus anda menjadi hidup. Ini adalah langkah pertama ke dunia yang lebih besar.