Javascript menghitung luas dan keliling segi empat

Contoh Javascript menghitung luas dan keliling segi empat berikut adalah untuk menunjukkan bagaimana menangkap input menggunakan tag HTML INPUT panjang dan lebar, kemudian memproses perhitungan luas dan keliling menggunakan Javascript.

Javascript menghitung luas dan keliling segi empat

a. HTML form input

Pertama kita menggunakan tag <form> untuk mengelompokkan input yang akan kita terima dari user dan menyiapkan tempat untuk menampilkan hasil perhitungannya (output).

Javascript hitung luas dan keliling segi empat-form input

Terdapat sebuah pemanggilan kesebuah fungsi ketika tombol hitung ditekan.

onclick = “hitungLuasKeliling();”

b. JAVASCRIPT menghitung Luas dan Keliling

Fungsi hitungLuasKeliling() merupakan fungsi dengan Javascript.

Javascript hitung luas dan keliling segi empat-fungsi hitung luas dan keliling

Kita menggunakan document.getElementById untuk mengidentifikasi input dan output. 

c. Kode selengkapnya

Berikut kode selengkapnya dari halaman untuk menghitung luas dan keliling. Halaman ini bisa disimpan dengan nama apapun dan diberi ekstensi .html. Selanjutnya halaman tinggal dijalankan dengan browser. Pada contoh ini, halaman akan disimpan dengan nama segiempat.html.

Javascript hitung luas dan keliling segi empat

 

<!-- segiempat.html --&gt;
<!DOCTYPE html"&gt;
<html&gt;
     <head&gt;
          <title&gt;Menghitung luas dan keliling lingkaran</title&gt;
          <script type="text/javascript"&gt;
               function hitungLuasKeliling()
               {
                    var Panjang, Lebar, Keliling, Luas;

                    Panjang = parseInt(document.getElementById("panjang").value);
                    Lebar = parseInt(document.getElementById("lebar").value);
                    Keliling = 2 * (Panjang + Lebar);
                    Luas = Panjang * Lebar;
                    document.getElementById("keliling").value = Keliling;
                    document.getElementById("luas").value = Luas;
               }
          </script&gt;
     </head&gt;
     <body&gt;
          <h1&gt;Menghitung luas dan keliling lingkaran</h1&gt;
          <form&gt;
               <p&gt;Panjang: <input type="text" id="panjang"&gt;</p&gt;
               <p&gt;Lebar: <input type="text" id="lebar"&gt;</p&gt;
               <p&gt;<input type="button" value="Hitung" onclick="hitungLuasKeliling();"&gt; </p&gt;
               <p&gt;Luas: <input type="text" id="luas"&gt;</p&gt;
               <p&gt;Keliling: <input type="text" id="keliling"&gt;</p&gt;
          </form&gt;
     </body&gt;
</html&gt;

d. Tampilan saat dijalankan

Berikut tampilan di browser saat segiempat.html dijalankan di browser.

Javascript hitung luas dan keliling segi empat-running

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.