About Me

Hai, saya Rosihan Ari Yuana. Saya sehari-hari adalah mengajar di Universitas Sebelas Maret.

Bidang riset saya tentang adaptive learning, computer aided learning, dan datascience

Selain itu, saya juga seorang penulis buku dan blogger.

More about me...

  • Home
  • /
  • Javascript
  • /
  • Auto Click Object dengan Timer Menggunakan JQuery dan Javascript

Auto Click Object dengan Timer Menggunakan JQuery dan Javascript

Artikel ini direquest oleh salah satu pengunjung blog ini, yang memanfaatkan layanan article by request. Artikel yang diminta adalah tutorial bagaimana membuat script yang secara otomatis melakukan klik pada suatu obyek tertentu dalam sebuah laman web berdasarkan waktu yang telah ditentukan.

Sebagai contoh misalkan di laman web tersebut terdapat dua buah gambar, misal image1 dan image2. Selanjutnya diharapkan secara otomatis ada sebuah script yang mengklik image1 pada waktu tertentu, dan juga akan mengklik image2 pada waktu yang lain.

Untuk solusi permasalahan tersebut, kita bisa menggunakan jQuery dan Javascript.

Sebelum kita membuat script dari kebutuhan di atas, terlebih dahulu kita cari ide penyelesaiannya. Ide penyelesaiannya adalah kita membutuhkan sebuah timer yang bekerja secara terus menerus dalam interval waktu tertentu. Misalkan nantinya kita set intervalnya adalah 1 detik. Setiap interval 1 detik, script akan mengecek waktu di komputer apakah sudah sama dengan waktu yang kita set untuk auto click image nya. Jika waktu komputer sudah sama dengan waktu kapan auto clicknya, maka script akan mengklik image tersebut.

Sehingga dari ide di atas, ada kebutuhan yang kita perlu tahu untuk implementasinya yaitu:

  1. Bagaimana membuat script timer yang akan terus berjalan setiap interval 1 detik
  2. Bagaimana membuat script untuk membaca waktu yang ada di komputer
  3. Bagaimana membuat script untuk melakukan auto click pada obyek

OK.. kita akan bahas satu persatu dari kebutuhan di atas

Membuat Script Timer

Script timer ini dapat kita buat menggunakan Javascript, yaitu dengan function setInterval() Berikut ini adalah sintaksnya:

setInterval(function(){ 
   ...
   ...
}, t);

di mana t adalah waktu dalam satuan milisecond. Function tersebut akan mengeksekusi blok perintah yang ada di dalam kurung setiap interval t milisecond. Sehingga jika kita ingin function tersebut akan mengeksekusi perintah tertentu setiap 1 detik, maka perintahnya:

setInterval(function(){ 
   ...
   ...
}, 1000);

Membaca Waktu Komputer

Untuk membaca waktu komputer, kita juga bisa menggunakan Javascript yaitu dengan memanfaatkan class Date(). Dari class ini, selanjutnya kita buat sebuah object. Kemudian dari object tersebut kita bisa membaca jam dengan method getHours(), menit dengan getMinutes(), dan detik dengan getSeconds().

Berikut ini adalah contoh script untuk membaca jam, menit, dan detik dari komputer.

// membuat object dari class Date()
var today = new Date();

// membaca jam saat ini
var jam = today.getHours();
// membaca menit saat ini
var menit = today.getMinutes();
// membaca detik saat ini
var detik = today.getSeconds();

Membuat Script Auto Click

Kita dapat membuat script auto click pada object tertentu dengan jQuery. Untuk bisa diklik secara otomatis, kita harus memberikan nama id pada object tersebut. Berikut ini adalah perintah untuk auto click pada id object tertentu.

$('#idname')[0].click(function(){});

Selain menggunakan jQuery, kita juga bisa menggunakan perintah berikut ini apabila menggunakan Javascript

document.querySelector('#idname').click();

Implementasi

Setelah kita dapatkan ide penyelesaian, berikutnya kita coba implementasikan ke dalam studi kasus yang sudah dijelaskan di atas.

Misalkan kita punya dokumen HTML sebagai berikut.

<!DOCTYPE html>
<html>
<head>
	<title>Test Auto Click by Timer</title>	
</head>
<body>

	<a href="http://site1" target="_blank">
		<img id="image1" src="img1.jpg" />
	</a>
	
	<a href="http://site2" target="_blank">
		<img id="image2" src="img2.jpg" />
	</a>
	
</body>
</html>

Di dalam dokumen HTML di atas terdapat dua buah object yaitu berupa image, yang masing-masing diberi nama id ‘image1’ dan ‘image2’. Setiap image tersebut juga diberikan hyperlink ke URL yang berbeda.

Selanjutnya misalkan kita ingin membuat script yang secara otomatis akan mengklik image1 pada pukul 10:00:00 dan image2 pada pukul 13:00:00.

Dengan menggunakan ide di atas tadi, kita bisa buat script nya sebagai berikut (misalkan kita beri nama script autoclick):

     // set interval 1 detik
     setInterval(function(){
          // baca waktu saat ini 
          var today = new Date();
          // merangkai format waktu saat ini
          // dalam bentuk jam:menit:detik
          var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

          // cek kesesuaian waktu saat ini dg waktu skedul auto click
          if (time == "10:0:0") { 
              $('#image1')[0].click(function(){});
          } else if (time == "13:0:0"){
              $('#image2')[0].click(function(){});	
          }		
       }, 1000);

Dari script autoclick di atas dapat kita lihat bahwa waktu komputer saat ini disusun dalam format jam:menit:detik supaya memudahkan dalam setting skedul waktu untuk auto click nya.

Supaya script autoclick di atas bisa langsung berjalan ketika dokumen HTML diload di browser, script tersebut perlu diletakkan dalam block function berikut ini:

$(document).ready(function(){
  ...
}

Sehingga secara utuh, isi dari dokumen HTML setelah script di atas disisipkan ke dalamnya adalah sebagai berikut.

<!DOCTYPE html>
<html>
<head>
	<title>Test Auto Click by Timer</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<script type="text/javascript">
	$(document).ready(function(){ 
		 // set interval 1 detik
		 setInterval(function(){
		    // baca waktu saat ini 
		 	var today = new Date();
		 	var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
		 	// cek kesesuaian waktu saat ini dg waktu skedul auto click
		 	if (time == "10:0:0") { 
		 		document.querySelector('#image1').click();
		 	} else if (time == "13:0:0"){
		 		document.querySelector('#image2').click();	
		 	}		
		 }, 1000);
	});
	</script>

	<a href="http://rosihanari.net" target="_blank">
		<img id="image1" src="img1.jpg" />
	</a>
	
	<a href="https://blog.rosihanari.net" target="_blank">
		<img id="image2" src="img2.jpg" />
	</a>
	
</body>
</html>

Script auto click by timer dengan Javascript dan jQuery di atas bisa diterapkan di berbagai macam obyek, namun tidak berlaku untuk container.

Script di atas dapat diimplementasikan apabila kita yang memiliki halaman web tersebut, sehingga kita bisa menyisipkan scriptnya di dalam dokumen halaman webnya. Lantas bagaimana jika kita ingin script auto click dengan timer itu diterapkan di situs lain? Caranya adalah dengan mengeksekusi script autoclick ke dalam console web browser yang langkahnya dijelaskan berikut ini.

Menjalankan Script AutoClick di Console Browser

Kita dapat mengimplementasikan script autoclick dengan timer di atas pada situs web apapun melalui console browser. Selanjutnya akan dijelaskan cara menjalankan script autoclick dengan timer di console web browser Chrome.

  1. Buka browser Chrome
  2. Buka alamat situs yang diinginkan
  3. Klik tombol Customize and Control Google Chrome (letaknya ada di pojok kanan atas dari Chrome)
  4. Pilih menu More Tools
  5. Pilih menu Developer Tools
  6. Klik menu tab Console
  7. Kemudian pastekan script auto click berikut ini pada consolenya (pastikan kita sudah mengetahui selector obyek yang tepat untuk diklik)
setInterval(function(){
          // baca waktu saat ini 
          var today = new Date();
          // merangkai format waktu saat ini
          // dalam bentuk jam:menit:detik
          var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

          // cek kesesuaian waktu saat ini dg waktu skedul auto click
          if (time == "10:0:0") { 
              document.querySelector('#image1').click();
          } else if (time == "13:0:0"){
              document.querySelector('#image2').click();	
          }		
       }, 1000);
  1. Kemudian tekan ENTER

Mudah bukan membuatnya? Ide di atas dapat dikembangkan untuk membuat script robot auto click yang secara otomatis dapat mengklik obyek tertentu dalam sebuah website.

Demikian tutorial ini dibuat, semoga dapat dipahami dengan baik dan ada manfaatnya.

Salam coding!! 😀


Beli Buku Pemrograman

5 Langkah Mudah Menguasai React Native
Rahasia Inti Master PHP & MySQLi (Improved)
Jalan Pintas Menjadi Master React JS
Trik Kolaborasi React dengan PHP & MySQL

Article by Request

Anda belum memahami konsep pemrograman PHP Native, Python, Java, atau SQL? atau Anda belum punya ide penyelesaian dari studi kasus yang dihadapi sampai saat ini.

Silakan manfaatkan layanan Article by Request di blog ini.

Bagikan artikel ini jika bermanfaat !

Assalaamu'alaikum.. aktivitas keseharian saya mengajar di Universitas Sebelas Maret, dengan matakuliah pemrograman dan basis data. Adapun bidang penelitian saya tentang computational thinking dan computer-aided learning.

Leave a Reply