JQUERY

Contoh Program Jquery Sederhana Part 1


Pada artikel ini saya akan membuat sebuah program sederhana dengan library javascript yaitu jquery. jquery ini merupakan library javascript yang banyak di pakai nah saya akan membuat program dengan jquery, ketika tombol di klik maka akan muncul penambahan nilai. ini seperti di artikel sebelumnya di mana saya menggunakan vanilla javascript tanpa menggunakan library kamu bisa cek di sini.


Ouh ya kamu buat langsung dalam file HTML nya tanpa di buat pisah script jquery nya. kamu buat 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Contoh Program Jquery Sederhana Part 1</title>
  </head>
  <body>
      <br>
      <br>
      <br>
<!--      Buat h1 untuk menampilkan nilai ketika tombol tekan di klik-->
      <center><h1></h1></center>
      <!--   Buat tombol-->
      <center><button type="button" class="btn btn-primary">Tekan!</button></center>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
      <script>
          //Ketika dokumen HTML sudah siap di reload
      $(document).ready(function() {
          //buat nilai 1
          var nilai = 1;
          //ketika tombol tekan di klik
         $(".btn").on("click", function(){
             //tambah nilai dan tampilkan pada h1
             $("h1").html(nilai++);
         });
      });
      </script>
  </body>
</html>

Nah program tersebut bisa di lihat di sini. semoga bermanfaat :D