Memahami Function Ticker di JavaScript: Cara Kerja dan Penjelasan Detail

Memahami Function Ticker di JavaScript

Ticker adalah teks berjalan yang sering digunakan dalam aplikasi digital signage atau sebagai media promosi. Teks ini dapat menampilkan informasi seperti berita, iklan, atau pengumuman dengan cara yang menarik perhatian. Teks berjalan biasanya diimplementasikan dengan HTML dan CSS, dan dapat dioperasikan tanpa JavaScript, meskipun banyak software juga menyediakan fitur ini untuk penjadwalan dan kontrol yang lebih baik.

Artikel ini membahas cara kerja fungsi ticker dalam JavaScript, yang saya temui dalam tantangan di Codewars. Fungsi ini memungkinkan kita untuk menciptakan efek teks berjalan (scrolling) dengan menggunakan JavaScript.

Apa itu Ticker?

Ticker adalah teks yang bergerak secara horizontal, yang sering digunakan dalam berbagai aplikasi untuk menampilkan informasi yang terus diperbarui, seperti berita terkini, pengumuman, atau iklan. Efek ini bisa ditemukan di layar digital atau papan pengumuman elektronik, dan pada umumnya bisa diimplementasikan menggunakan HTML, CSS, dan JavaScript.

Fungsi ticker dalam JavaScript yang akan kita bahas berikut ini, memberikan solusi untuk menciptakan efek teks berjalan secara dinamis di dalam aplikasi web Anda.

Berikut adalah kode fungsi ticker yang akan kita bahas:

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

Penjelasan Fungsi ticker

Fungsi ini memiliki tiga parameter:

• text: Teks yang ingin ditampilkan.
• width: Lebar tampilan yang diinginkan, yaitu berapa banyak karakter yang akan ditampilkan pada satu waktu.
• tick: Posisi pergeseran teks, yang menentukan teks mana yang akan ditampilkan saat fungsi dipanggil.

Berikut adalah penjelasan teknis dari setiap langkah yang ada dalam fungsi ini:

---

1. Membuat Spasi untuk Membungkus Teks

const display = ' '.repeat(width);

Pada langkah pertama, kita membuat sebuah string kosong yang berisi spasi sebanyak width menggunakan metode repeat(). Fungsi repeat() akan mengulang karakter yang ditentukan (dalam hal ini adalah spasi) sebanyak jumlah yang ditentukan oleh width.

Contoh:
Jika width adalah 5, maka variabel display akan berisi string ' ' yang terdiri dari 5 spasi.

2. Menambahkan Spasi di Sekitar Teks

text = display + text + display;

Pada langkah kedua, kita menambahkan string display (spasi) di bagian depan dan belakang teks (text). Ini memastikan bahwa teks memiliki ruang kosong di kedua sisi, memberikan tempat agar teks bisa bergerak (scroll) tanpa terpotong.

Contoh:
Misalkan teks yang diberikan adalah 'Hello' dan width adalah 5. Maka setelah baris ini, teks akan menjadi:

'     Hello     '

Dengan ini, ada cukup ruang kosong di kiri dan kanan teks untuk pergerakan yang lebih mulus.

3. Menghitung Posisi Pergerakan Teks

tick = tick % (text.length - width);

Pada langkah ketiga, kita menggunakan operator modulus (%) untuk memastikan bahwa nilai tick berada dalam rentang yang valid dan tidak melampaui panjang teks yang telah dibungkus dengan spasi.

Nilai text.length - width memberikan panjang total dari teks yang dibungkus (termasuk spasi) dikurangi lebar tampilan yang ingin kita tampilkan (width). Ini memastikan bahwa pergeseran teks yang ditentukan oleh tick tidak melebihi panjang teks yang dapat ditampilkan.

Contoh:
Jika panjang text setelah penambahan spasi adalah 15 (misalnya, ' Hello '), dan width adalah 5, maka text.length - width menjadi 10. Artinya, kita hanya perlu memastikan bahwa tick berada di rentang 0 hingga 9. Ini memastikan pergerakan teks tetap valid tanpa ada bagian yang hilang.

4. Mengambil Substring untuk Ditampilkan

return text.slice(tick, tick + width);

Pada langkah terakhir, kita menggunakan metode slice() untuk mengambil bagian dari string text, dimulai dari posisi tick hingga posisi tick + width. Fungsi slice() mengembalikan bagian string yang sesuai dengan posisi tersebut.

Contoh:
Misalnya jika tick = 3 dan width = 5, maka kode slice(3, 8) akan menghasilkan substring 'Hello' dari string ' Hello '.

Dengan cara ini, kita menampilkan bagian teks dengan panjang yang sesuai dengan width. Setiap kali fungsi ini dipanggil dengan nilai tick yang berbeda, teks yang ditampilkan akan bergeser, menciptakan efek pergerakan atau scrolling.

---

Contoh Penggunaan Fungsi Ticker

Mari kita lihat contoh penggunaan fungsi ini dalam kode:

console.log(ticker('Hello World', 5, 3));

Proses yang terjadi adalah:

1. display = ' ' (5 spasi).
2. Teks yang sudah dimodifikasi: ' Hello World '.
3. Nilai tick = 3, dan panjang text setelah dibungkus menjadi 18. Dengan width = 5, kita tahu bahwa tick bisa berkisar antara 0 hingga 13.
4. Fungsi slice(3, 8) akan mengembalikan substring 'Hello'.

Jika kita meningkatkan nilai tick pada pemanggilan berikutnya, maka teks akan bergerak lebih jauh dan bagian teks yang tampil pun akan berubah.

Bagaimana Teks Bisa Bergerak?

Efek pergerakan tercipta karena setiap kali kita memanggil fungsi ticker, nilai tick akan berubah. Dengan meningkatnya nilai tick, bagian teks yang ditampilkan juga berubah. Ini memberikan efek pergerakan karena tick menggulir teks secara dinamis.

Untuk menguji efek ini lebih lanjut, kita bisa memanggil fungsi ticker dalam sebuah loop dengan meningkatkan nilai tick secara berkala, misalnya menggunakan setInterval() untuk memperbarui tampilan setiap beberapa detik.

---

Jika Anda tertarik untuk mencoba tantangan serupa, saya menemukan fungsi ini melalui Codewars, dan ini menjadi latihan yang menyenangkan untuk meningkatkan kemampuan pemrograman JavaScript Anda.

Selamat mencoba, dan semoga artikel ini bermanfaat dalam memahami cara kerja efek ticker di JavaScript!