#JavaScript

Menghitung Jumlah Karakter di Javascript

By Muzanni
30 November 2023
JavaScript

Karakter adalah huruf maupun tanda baca pada suatu kalimat contohnya seperti (a, b, c). setiap huruf maupun tanda baca akan dihitung satu karakter. Untuk menghitung jumlah karakter menggunakan javascript menggunakan fungsi lenght.

Pada materi dasar sebelumnya sudah pernah kita bahas bagaimana memanipulasi string pada javascript. Dalam materi itu sudah pernah di jelaskan secara singkat bagaimana menghitung jumlah karakter di javascript.

Menghitung Jumlah Karakter di Javascript

Sebenarnya javascript sudah menyediakan fungsi kusus untuk menghitung jumlah krakter pada string. Sebagaimana dapat dilihat pada dokumentasi di websitenya https://devdocs.io/javascript/functions/arguments/length.

Untuk menghitung jumlah karakter hanya memerlukan fungsi length. Contoh penulisannya adalah sebagai berikut.

kalimat = "Hello World";

panjang = kalimat.length;

console.log(panjang)

kalimat adalah sebuah string yang menyimpan kata “hello World”
panjang adalah string yang menyimpan jumlah karakter pada kalimat, disini bisa kita lihat penggunaan length
console adalah perintah javascript untuk menampilkan hasil pada console

Menghitung Jumlah Karakter Pada Textinput

Untuk melengkapi materi ini kita akan coba membuat sebuah form input yang nantinya akan dihitung jumlah karakter yang di ketika. Dalam kasus ini kita siapkan sebuah form input menggunakan text area.

Siapkan Form Inputan

Langkah pertama yaitu kita siapkan sebuah form input menggunakan textarea. Berikut kode untuk membuat sebuah form input.

<!DOCTYPE html>

<head>

<title>Malasngoding.com - Menghitung Jumlah Karakter Input JavaScript</title>

</head>

<body>

<h2>Malasngoding.com - Menghitung Jumlah Karakter Input JavaScript</h2>

<label>Pesan</label>

</div>

</form>

</div>

</body>

</html>

Perhatikan kode untuk membuat form inputan yang akan digunakan nantinya. Berikut penjelasan potongan kode diatas.

1 2	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Tag link dan script ini adalah library bootstrap yang akan kita gunakan. Fungsinya untuk menggunakan kelas bootstrap dalam pembuatan tampilan.

<h2>Malasngoding.com - Menghitung Jumlah Karakter Input JavaScript</h2>

<label>Pesan</label>

</div>

</form>

</div>

</body>

Selanjutnya pada form kita beri nama FormKu. Didalam form terdapat dua inputan berupa textarea dan juga iputan text.

Fungsi dari textarea ini adalah tempat dimana kalimat akan ditulis. Sedangkan form inputan satunya lagi adalah untuk menampilkan jumlah karakter yang sudah ditulis didalam textarea.

Pada textare jika diperhatikan juga ada onkeyup. onkeyup adalah event yang mana ketika sebuah objek disinin form dengan textarea di input maka akan dibaca fungsi hitung_karakter().

Menghitung Jumlah Karakter di Javascript — menghitung jumlah karakter menggunakan javascript

Membuat Fungsi Menghitung Karakter

Langkah selanjutnya akan kita siapkan fungsi javascript dimana fungsi ini digunakan untuk menghitung jumlah karakter pada inputan. Perhatikan kode berikut ini.

function hitung_karakter()

{

document.FormKu.jumlah.value = document.FormKu.pesan.value.length;

}

document.FormKu.jumlah.value adalah inisialiasi form yang akan menyipan data jumlah karakter yang di input. document.FormKu.pesan.value.length; adalah menghitung jumlah karakter dari text yang di input.

Ketika dijalankan maka hasilnya seperti gambar berikut