Script JS Menampilkan Pesan Ucapan Selamat Pagi/Siang/Malam Otomatis (Personalisasi UX)

Pernahkah Anda login ke dashboard website seperti Google Analytics atau perbankan online, dan disapa dengan ramah: “Selamat Pagi, Budi”?

Sapaan sederhana ini memiliki dampak psikologis yang besar. Dalam dunia User Experience (UX), ini disebut Personalisasi. Hal ini membuat pengunjung merasa “diperhatikan” dan berinteraksi dengan manusia, bukan robot. Website terasa lebih hidup dan dinamis.

Banyak pemula berpikir fitur ini membutuhkan bahasa pemrograman backend yang rumit seperti PHP atau Python. Padahal, Anda bisa membuatnya dengan sangat mudah, ringan, dan cepat menggunakan JavaScript Murni (Vanilla JS).

Pada panduan ini, kita akan membedah logika script untuk menampilkan ucapan otomatis berdasarkan waktu di perangkat pengunjung. Script ini aman untuk SEO, tidak memberatkan loading, dan cocok untuk semua platform (WordPress, Blogger, atau HTML biasa).

Mengapa Menggunakan JavaScript (Client-Side)?

Penting untuk dipahami mengapa kita menggunakan JavaScript, bukan PHP (Server-Side).

Waktu Lokal Pengunjung: Jika server Anda ada di Amerika (New York) dan pengunjung Anda ada di Jakarta, jam server akan menunjukkan malam saat di Jakarta pagi hari. JavaScript mengambil waktu dari perangkat pengunjung (laptop/HP), sehingga ucapannya selalu akurat sesuai lokasi mereka.
Ringan: Script ini berjalan di browser pengunjung, sehingga tidak membebani kinerja server hosting Anda sama sekali.
Interaktif: Perubahan terjadi secara instan tanpa perlu reload halaman.

Langkah 1: Persiapan Elemen HTML

Pertama, kita butuh “wadah” untuk menempatkan teks sapaan tersebut. Kita akan menggunakan tag <span> atau <div> dengan ID yang unik agar bisa dipanggil oleh JavaScript.

Salin kode ini di tempat Anda ingin sapaan muncul (misalnya di Sidebar, Header, atau di atas Artikel):

HTML
<div class="greeting-container">
    <span id="greeting-text">Halo</span>, Selamat Datang di Blog Saya!
</div>

Langkah 2: Script Logika JavaScript

Inilah otak dari fitur ini. Logikanya sederhana:

Ambil waktu saat ini.
Ambil angka “Jam” (0 – 23).
Gunakan pengkondisian (if-else) untuk menentukan pesan.

Salin kode berikut dan letakkan di atas tag penutup </body> atau di dalam widget HTML footer:

HTML
<script>
    function showGreeting() {
        // 1. Ambil Waktu Lokal User
        const date = new Date();
        const hour = date.getHours(); // Mengambil jam (format 0-23)
        const greetingElement = document.getElementById('greeting-text');
        
        let message = '';

        // 2. Logika Pembagian Waktu
        // Pagi: 04:00 - 10:59
        if (hour >= 4 && hour < 11) {
            message = 'Selamat Pagi ☀️';
        } 
        // Siang: 11:00 - 14:59
        else if (hour >= 11 && hour < 15) {
            message = 'Selamat Siang 🌤️';
        } 
        // Sore: 15:00 - 18:59
        else if (hour >= 15 && hour < 19) {
            message = 'Selamat Sore 🌇';
        } 
        // Malam: 19:00 - 03:59
        else {
            message = 'Selamat Malam 🌙';
        }

        // 3. Masukkan Teks ke dalam HTML
        greetingElement.innerText = message;
    }

    // Jalankan fungsi saat halaman selesai dimuat
    window.onload = showGreeting;
</script>

Langkah 3: Mempercantik dengan CSS

Agar tidak terlihat kaku, mari kita beri sedikit gaya. Kita akan menggunakan font yang tebal dan warna yang menarik. Tambahkan ini di file CSS Anda atau di dalam tag <style>:

CSS
.greeting-container {
    font-family: 'Segoe UI', sans-serif;
    font-size: 18px;
    background-color: #f0f8ff; /* Warna background biru muda */
    padding: 15px;
    border-left: 5px solid #3498db; /* Garis aksen di kiri */
    border-radius: 4px;
    margin-bottom: 20px;
    color: #333;
}

#greeting-text {
    font-weight: bold;
    color: #2c3e50; /* Warna teks sapaan lebih gelap */
}

Bedah Kode: Penjelasan Mendalam (Anti Low Value)

Agar artikel ini memberikan nilai edukasi (bukan sekadar tutorial buta), mari kita bedah dua fungsi utama yang digunakan:

1. `new Date()` dan `.getHours()`

Objek Date di JavaScript adalah fungsi bawaan untuk menangani tanggal dan waktu.

new Date() membuat “snapshot” waktu detik ini.
.getHours() mengekstrak hanya angka jamnya saja dalam format 24 jam (0 sampai 23).
- Contoh: Jam 1 siang adalah 13. Jam 12 malam adalah 0.

2. Struktur `if` vs `else if`

Kita menggunakan rentang waktu yang spesifik.

hour >= 4 && hour < 11: Artinya “Jika jam lebih besar atau sama dengan 4 DAN jam lebih kecil dari 11″. Ini mencakup jam 4:00 sampai 10:59.
Logika ini penting agar tidak ada waktu yang “bolong” atau tumpang tindih.

Pengembangan: Menambahkan Nama Pengunjung

Ingin lebih canggih? Anda bisa menggabungkan script ini dengan fitur input nama sederhana menggunakan prompt atau localStorage agar browser “mengingat” nama pengunjung.

Berikut adalah versi modifikasinya:

JavaScript
// Cek apakah browser sudah menyimpan nama user
let userName = localStorage.getItem('visitorName');

// Jika belum ada nama, minta input
if (!userName) {
    userName = prompt("Boleh tau siapa nama Anda?", "Pengunjung");
    if(userName) {
        localStorage.setItem('visitorName', userName); // Simpan nama di browser
    }
}

// Update pesan (tambahkan kode ini di dalam fungsi showGreeting)
// greetingElement.innerText = message + ', ' + userName;

Catatan: Fitur prompt mungkin sedikit mengganggu bagi sebagian user, jadi gunakan dengan bijak.

Kesimpulan

Menambahkan fitur sapaan waktu otomatis adalah langkah kecil namun efektif untuk meningkatkan Micro-Interactions di website Anda.

Meskipun terlihat sederhana, implementasi kode JavaScript yang memanipulasi DOM (Document Object Model) seperti ini menunjukkan bahwa website Anda dikelola dengan baik dan memperhatikan detail. Hal-hal teknis seperti inilah yang membedakan blog berkualitas tinggi (High Value Content) dengan blog spam di mata peninjau Google AdSense.

Selamat mencoba, dan semoga interaksi pengunjung di website Anda meningkat!