JAVASCRIPT 

Contoh Program Javascript Sederhana Event Click Part 1





Selamat datang, di artikel ini saya akan membuat contoh program sederhana pada javascript yaitu event click pada javascript karena bahasa pemrograman javascript banyak di gunakan sekarang mulai dari bikin game, website, Iot, pengembangan aplikasi mobile, bahkan javascript bisa di gunakan untuk web server.


Tanpa perlu berlama lama lagi saya akan bagikan program sederhana dengan menggunakan bahasa pemrograman javascript program yang saya buat ketika tombol di klik maka akan muncul berupa penambahan nilai, ouh ya ini juga sapa tahu bisa jadi referensi dan pembelajaran kamu ketika sedang mendalami bahasa pemrograman javascript. 


Kamu buat dulu file dengan nama index.html

 <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Event Click Javascript Part 1</title>
  </head>
  <body>
      <br>
      <br>
     <div class="container text-center">
      <div class="row">
         <div class="col">
             <h1></h1>
          <button type="button" class="btn btn-warning">Tekan!</button>
          </div>
         </div> 
      </div>
   

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
      
      <script src="script.js"></script>
  </body>
</html>


Lalu kamu buat dulu juga file javascript nya dengan nama script.js

//buat variabel
let h1 = document.getElementsByTagName('h1')[0];
let btn = document.getElementsByTagName('button')[0];

//buat nilai dahulu
let nilai = 1;

//ketika di tombol sudah di klik
btn.addEventListener('click', function(){ 
    //tambah nilai
    h1.innerHTML = nilai++;  
});

Nah program yang saya buat tersebut bisa di lihat pada di sini. itu lah kemampuan bahasa pemrograman javascript.