Cara Membuat Penghitung Kata dalam JavaScript

Penghitung kata adalah alat yang dapat Anda gunakan untuk menghitung jumlah kata dalam sebuah teks. Anda dapat menggunakannya untuk memeriksa panjang dokumen atau untuk melacak apakah Anda memenuhi batas jumlah kata.

Anda dapat membuat penghitung kata sendiri menggunakan HTML, CSS, dan JavaScript. Buka penghitung kata Anda di browser web, masukkan teks Anda ke kolom input, dan lihat berapa banyak kata yang Anda gunakan.

Proyek ini juga dapat berguna dalam membantu Anda berlatih dan memantapkan pengetahuan JavaScript Anda.

Cara Membuat UI untuk Penghitung Kata

Untuk membuat UI untuk penghitung kata, tambahkan input area teks ke halaman HTML dasar. Di sinilah Anda dapat memasukkan kalimat atau paragraf yang ingin Anda hitung kata-katanya.

1. Buat file HTML baru bernama "index.html".
2. Di dalam file, tambahkan struktur dasar untuk halaman web HTML:

   html>
   <htmllang="en-AS">
   <kepala>
   <judul> Penghitung Kata judul>
   kepala>
   <tubuh>
   
   kelas="wadah">
   <h1> Hitung Kata h1>
   div>
   tubuh>
   html>

3. Di dalam wadah div dan di bawah judul, tambahkan area teks:

   <textareapengenal="memasukkan"baris="10">textarea>

4. Di bawah area teks, tambahkan tombol:

   <tombolpengenal="tombol hitung">Hitung Katatombol>

5. Tambahkan tag span untuk menampilkan jumlah kata saat pengguna mengklik tombol di atas:

   <div>
    Kata-kata: <menjangkaupengenal="hasil hitungan kata">0menjangkau>
   div>

6. Di folder yang sama dengan file HTML Anda, buat file baru bernama "styles.css".
7. Isi file CSS dengan beberapa CSS untuk menata halaman web Anda:

   tubuh {
    margin: 0;
    bantalan: 0;
    warna latar belakang: #f0fcfc;
   }
   * {
    keluarga font: "Arial", Sans Serif;
   }
   .wadah {
    padding: 100px 25%;
    tampilan: fleksibel;
    arah fleksibel: kolom;
    garis-tinggi: 2rem;
   ukuran huruf: 1.2rem;
    warna: #202C39;
   }
   textarea {
    padding: 20px;
    ukuran font: 1rem;
    margin-bawah: 40px;
   }
   tombol {
    padding: 10px;
    margin-bawah: 40px;
   } 

8. Tautkan file CSS ke file HTML Anda dengan menyertakan tag tautan di dalam tag kepala HTML:

   <tautanrel="lembar gaya"href="styles.css">

9. Untuk menguji UI halaman web, klik file "index.html" untuk membukanya di browser web.

Cara Menghitung Setiap Kata di dalam Textarea

Saat pengguna memasukkan kalimat ke area teks, halaman web harus menghitung setiap kata saat mereka mengklik Hitung Kata tombol.

Anda dapat menambahkan fungsi ini di dalam file JavaScript baru. Jika perlu, revisi yang lain ide proyek JavaScript pemula jika Anda perlu memoles pengetahuan JavaScript Anda.

1. Di folder yang sama dengan file "index.html" dan "styles.css", tambahkan file baru bernama "script.js".
2. Tautkan file HTML Anda ke file JavaScript Anda dengan menambahkan tag skrip di bagian bawah tag tubuh:

   <tubuh>
    Kode Anda di sini 
   <naskahsrc="skrip.js">naskah>
   tubuh>

3. Di dalam script.js, gunakan fungsi getElementById() untuk mengambil elemen textarea, button, dan span HTML. Simpan elemen-elemen ini ke dalam tiga variabel terpisah:

   membiarkan masukan = dokumen.getElementById("memasukkan");
   membiarkan tombol = dokumen.getElementById("tombol hitung");
   membiarkan hasilHitungkata = dokumen.getElementById("hasil hitungan kata");

4. Tambahkan pendengar acara klik. Fungsi ini akan dijalankan ketika pengguna mengklik Hitung Kata tombol:

   button.addEventListener("klik", fungsi() {
   });

5. Di dalam click event listener, dapatkan nilai yang dimasukkan pengguna ke dalam textarea. Anda dapat menemukan nilai ini dalam variabel input, yang menyimpan elemen HTML textarea.

   membiarkan str = masukan.nilai;

6. Gunakan fungsi split() untuk memisahkan string menjadi kata-kata terpisah. Ini akan terjadi setiap kali ada spasi dalam string. Ini akan menyimpan setiap kata sebagai elemen dari array baru. Misalnya, jika kalimat yang dimasukkan adalah "Saya suka anjing", larik yang dihasilkan adalah ["Saya", "cinta", "anjing"].

   membiarkan daftarkata = str.split(" ");

7. Temukan jumlah kata dengan menggunakan panjang array:

   membiarkan count = daftarkata.panjang;

8. Untuk menampilkan kembali hasilnya kepada pengguna, ubah konten elemen span HTML untuk menampilkan nilai baru:

   wordCountResult.innerHTML = hitung; 

Cara Menggunakan Contoh Penghitung Kata

Anda dapat menguji halaman web penghitung kata menggunakan browser web.

1. Buka index.html di browser web apa saja.
2. Masukkan kalimat atau paragraf ke dalam area teks:
3. Klik pada Hitung Kata tombol untuk memperbarui jumlah kata. Ini akan menampilkan jumlah kata, sama seperti jika Anda memeriksa jumlah kata di Google Documents, Microsoft Word, atau editor lainnya dengan jumlah kata.

Membuat Aplikasi Sederhana Menggunakan JavaScript

Sekarang Anda diharapkan memiliki pemahaman dasar tentang cara menggunakan JavaScript untuk menghitung kata dan berinteraksi dengan elemen pada halaman HTML. Untuk meningkatkan pemahaman pemrograman Anda, lanjutkan membuat proyek kecil yang bermanfaat dalam JavaScript.