Mengenal Function dan Event Handling

  Dalam pemrograman, fungsi sering digunakan untuk membungkus program menjadi bagian-bagian kecil.

Logika program yang ada di dalam fungsi dapat kita gunakan kembali dengan memanggilnya.

Sehingga tidak perlu menulis ulang.

Pada kesempatan ini, kita akan belajar tentang fungsi di Javascript.

Mulai dari cara membuat, memanggil, hingga membuat program CRUD sederhana dengan fungsi.

Mari kita mulai…

Apa itu Fungsi?

Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu sendiri, maupun di program yang lain.

Fungsi di dalam Javascript adalah sebuah objek. Karena memiliki properti dan juga method.


Event Body Onload

Cara Menggunakan Event Onload pada Javascript. Event pada JavaScript dapat dikatakan sebagai fungsi pasif (passive function) yang disediakan oleh JavaScript. Proses event akan berjalan apabila suatu aksi tertentu dikenakan pada elemen HTML tertentu. Dan untuk Event Onload ini akan di eksekusi jika suatu object telah di load, contohnya jika halaman website kita sudah di load maka akan di eksekusi kode event javascriptnya.


<!DOCTYPE html>
<html>
    <head>
        <script>
            //Membuat fungsi Hello()
            function Hello(){
                 document.getElementById("halo").innerHTML = "Halo Guys";
            }
         </script>
    </head>
     <body onload="Hello()">
         <div id="halo"></div>
     </body>
</html>


Event Onclick

Event onclick terjadi saat pengguna mengklik suatu elemen dalam html. biasanya event ini digunakan untuk button, link, radio button, checkbox, tombol submit atau tombol reset.

<!DOCTYPE html>
<html>
    <head>
        <script>
            //Membuat fungsi Hello()
            function Hello(){
                 document.getElementById("halo").innerHTML = "Halo Guys";
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="Hello()">Klik Saya</a>
        <div id="halo"></div>
    </body>
</html>


Event Onclick menangani DOM

Di tingkat paling dasar, situs sebuah web terdiri atas dokumen HTML serta CSS. Browser membuat representasi dokumen yang biasa disebut dengan DOM (Document Object Model). Dokumen tersebut memungkinkan Javascript dapat mengakses serta memanipulasi elemen dan juga style situs web. Model ini diatur dalam struktur ojek serta mendefinisikan:

  • Properties dan event elemen HTML
  • Elemen HTML sebagai objek
  • Method guna mengakses elemen HTML

Objek dokumen merupakan model dokumen HTML yang berisi kumpulan fungsi serta atribut berupa objek berdasarkan elemen HTML yang dapat diilustrasikan dengan bentuk pohon seperti di bawah ini:

Apa itu DOM di Javascript

Struktur seperti pohon ini akan memudahkan Anda dalam memakai elemen tertentu. Elemen-elemen di atas disebut node. Tidak hanya elemen, namun atribut elemen dan teks juga memiliki node tersendiri, yaitu attribute-node untuk atribut elemen dan text- node untuk teks.


<!DOCTYPE html>
<html>
    <head>
        <script>
            //Membuat fungsi Hello()
            function Tambah(){
                 var angka1 = document.getElementById("angka1").value;
                 var angka2 = document.getElementById("angka2").value;
                 document.getElementById("jumlah").value = angka1 + angka2;
            }
         </script>
    </head>
    <body>
        <p><input type="text" id="angka1" /> Angka 1 </p>
        <p><input type="text" id="angka2" /> Angka 2 </p>
        <p><button onclick="Tambah()">Tambah</button></p>
        <p><input type="text" id="jumlah" /> Jumlah </p>
     </body>
</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

MEMBUAT PROGRAM PESANAN MENU RESTORAN PADA PYTHON

Gambar
      Pada artikel kali ini saya akan membuat program python yaitu program pesan menu makanan di python, untuk memnuhi tugas dari pak ulir pemograman back end. BERIKUT RUNNING PROGRAMNYA  Deklarasi Variable     fungsinya sebagai  alokasi memory untuk menyimpan nilai-nilai. Ibarat wadah atau tempat sementara yang digunakan untuk menyimpan data dimana dapat diambil sewaktu-waktu tergantung kebutuhan. Print        fungsinya sebagai  alokasi memory untuk menyimpan nilai-nilai. Ibarat wadah atau tempat sementara yang digunakan untuk menyimpan data dimana dapat diambil sewaktu-waktu tergantung kebutuhan. While      Perulangan while pada python adalah proses pengulangan suatu blok kode program  selama sebuah kondisi terpenuhi   [1] .      Singkatnya, perulangan while adalah  perulangan yang bersifat  indefinite  alias tidak pasti , atau bahkan tidak terbatas  [2] . IF/ELIF/ELSE Statement Di Python kita juga dapat menerapkan kondisi percabangan yang mengandung lebih dari dua keputusan. Untuk k
Baca selengkapnya

Cara Membuat Prototype Produk

Gambar
  Seorang gadis delapan tahun dari Meksiko telah memenangkan penghargaan sains bergengsi untuk membuat pemanas surya dari selang lama, panel kaca dari mantan situs konstruksi, dan log. Penemuan nya akan membantu masyarakat berpenghasilan rendah untuk berhenti menebang pohon untuk kayu bakar, mengurangi perubahan iklim. Anda mungkin punya beberapa ide-ide produk terlalu. Mungkin, Anda disimpan mereka karena Anda tidak tahu apa yang harus dilakukan selanjutnya. Yah, Ternyata Anda tidak harus memiliki dolar besar, gelar dalam fisika, atau laboratorium untuk memulai dengan ide produk Anda. Xochitl Cruz Guadalupe Lopez dan pemanas surya nya ( Meksiko Berita Harian ) Apa yang dapat Anda lihat pada gambar di atas adalah prototipe produk. Itu langkah yang sangat yang Anda butuhkan untuk mengambil setelah Anda punya ide produk. Sebuah prototipe memberikan bukti fisik kelayakan produk Anda dan membuatnya lebih mudah untuk spot cacat desain. Anda dapat menggunakan prototipe untuk mengamankan inve
Baca selengkapnya