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-1

 

<!-- segiempat.html --&gt;
<!DOCTYPE html"&gt;
<html&gt;
     <head&gt;
          <title&gt;Menghitung luas dan keliling segiempat</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 segiempat</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

 

0 0 vote
Article Rating
Subscribe
Notify of
guest

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

2 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
dzaki
dzaki
9 days ago

Mohon maaf, itu pembahasannya kenapa ada judul keliling lingkaran ya? yang dibahaskan keliling segi empat

Edison Tanka
Admin
5 hours ago
Reply to  dzaki

Ooo iya. Keliru di <title> dan <h1>. Sudah dibetulkan.