Membuat Jam Analog dan Digital Dengan Javascript


Membuat Jam Analog dan Digital Dengan Javascript

Membuat Jam Analog dan Digital Dengan Javascript – Seperti yang sudah kita pelajari dan dijelaskan sebelumnya pada tutorial Javascript dasar di malasngoding.com.

Bahwa javascript bisa kita gunakan untuk membuat halaman website menjadi lebih interaktif. contohnya seperti tutorial Membuat Jam Analog dan Digital Dengan Javascript ini.

Kita bisa membuat jam digital dengan javascript. dan kita juga bisa membuat jam analog dengan javascript. dan caranya pun sangat mudah. karena kita hanya menggunakan syntax dan fungsi-fungsi dasar yang sudah kita pelajari bersama-sama pada tutorial dasar javascript.

BACA JUGA : Tutorial javascript dasar untuk pemula

Langsung saja kita masuk ke bagian materi. silahkan teman-teman perhatikan dan ikuti secara teliti dan seksama.

Membuat Jam Analog dan Digital Dengan Javascript

Saya asumsikan kepada teman-teman untuk membaca terlebih dulu tutorial-tutorial javascript dasar di www.malasngoding.com. agar lebih mudah memahami syntax atau coding jam dengan javascript yang sebentar lagi akan kita buat.

membuat jam analog dan digital dengan javascript

membuat jam analog dan digital dengan javascript

Di tutorial ini kita akan belajar membuat jam digital dengan javascript. dan belajar membuat jam analog sederhana dengan javascript. dimana nantinya jam yang kita buat ini bisa teman-teman terapkan codingnya ke blog atau website teman-teman sebagai widget jam.

Kita mulai dengan belajar membuat jam digital.

Membuat Jam Digital Dengan Javascript

Untuk cara membuat jam digital dengan javascript silahkan teman-teman ketik coding berikut. dan menyimpannya di dalam file HTML atau PHP. di sini saya menyimpannya dalam file dengan nama jam_digital.html

jam_digital.html

Dan jika di jalankan maka hasilnya akan seperti berikut.

membuat jam digital dengan javascript

membuat jam digital dengan javascript

Seperti yang terlihat pada gambar jam digital di atas. jam, menit, detiknya pun muncul dengan real time.

Sesuai dengan jam pada saat ini, yaitu jam 15:17 WIB.

Penjelasan Jam Digital Javascript

Perhatikan pada syntax di atas tadi. kita membuat beberapa element HTML yang kita beri penamaan class dan id masing-masing.

ada 3 element penting di sana, yang kita beri id jam, id menit, dan id detik. pada masing-masing id tersebut akan kita tampilkan sesuai dengan nama id nya masing-masing dengan javascript. misalnya pada id jam kita tampilkan jam sekarang, pada id menit kita tampilkan menit sekarang, dan pada id detik kita tampikan detik yang berjalan sekarang secara real-time.

perhatikan pada bagian javascript.

di sini kita memerintahkan menjalankan function waktu() saat 1 detik pertama halaman ini di jalankan.

dan perhatikan pada function waktu(). di sana kita membuat sebuah variabel dengan nama “waktu”. dan menimpan data waktu atau tanggal sekarang.

kemudian menjalankan lagi function waktu() setelah 1 detik. ini untuk membuat perintah agar fungsi ini di jalankan setiap detik. sesuai dengan jam digital yang menampikan perubahan detiknya setiap 1 detik sekali.

dan terakhir, data waktu atau tanggal yang terlah tersimpan dalam variabel waktu tadi kita pecah-pecah isinya dengan cara menampilkan jam ( waktu.getHours() ) pada id jam. menampilkan menit ( waktu.getMinutes() ) pada id menit. serta menampilkan detik (waktu.getSeconds() ) pada id detik.

Oke selesai, diharapakan teman-teman bisa mudah memahami penjelasan ini. jika teman-teman masih kurang mengerti, silahkan untuk meninggalkan komentar di akhir tutorial ini. insyallah jika ada kemudahan waktu akan saya balas.

Selanjutnya kita akan belajar membuat jam analog sederhana tapi keren dengan javascript.

Membuat Jam Analog Dengan Javascript

Kita lanjutkan dengan belajar membuat jam analog dengan javascript.

Perhatikan syntax berikut.

Coba jalankan pada browser dan hasilnya seperti berikut.

membuat jam analog dengan javascript

membuat jam analog dengan javascript

Dan selesai. caranya tidak jauh berbeda dengan penjelasan sebelumnya.

Teman-teman bisa menerapkan syntax jam analog atau jam digital dengan javascript ini langsung pada website atau blog teman-teman. dan bisa mengubah css nya agar tampilan jam nya bisa sesuai dengan keinginan teman-teman.

 

Terima kasih sudah mengikuti tutorial Membuat Jam Analog dan Digital Dengan Javascript. semoga contoh coding javascript ini dapat bermanfaat.

DOWNLOAD


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

membuat game tebak angka javascript
Membuat fungsi terbilang dengan javascript
Membuat fitur show hide password di HTML
Menghitung Jumlah Kata Dengan Javascript

Diskusi

5 Komentar

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD