Belajar JavaScript --> Menghitung Rata-Rata Nilai

-
hai guys! kali ini kita akan belajar membuat nilai rata- rata dengan menggunakan html
dan ini adalah contoh dari script nya :

 <html>
    <head>
        <title>Penjumlahan 2 Variabel</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                .box {
                    width: 40%;
                    border-radius: 5px;
                    border: 1px solid #9b9b9b;
                    padding: 20px 0px 20px 0px;
                    margin-left: 30%;
                }
                .h2{
                    font-family: calibri;
                    font-weight: lighter;
                    letter-spacing: 3px;
                }
                #bil1{
                    padding: 5px;
                }
           
                #bil2{
                    padding: 5px;
                }
                #hasil{
                    color: #ff0b0b;
                }
                .tbl1{
                    font-family: calibri;
                }
                .btn{
                    padding: 10px;
                    border-radius: 5px;
                    cursor: pointer;
                    border: 0px;
                    color: #fff;
                    background: #3b7fff;
                }
            </style>
      
        <script>
            function Hitung(dat1,dat2,dat3,dat4,dat5,dat6){
                var total,totalrat;
                total = dat1+dat2+dat3+dat4+dat5+dat6;
              
                totalrat = total / 6;
                return totalrat;
            }
        </script>
    </head>
    <body>
        <div class="box">
            <center>
                <h2 class="h2">Aplikasi Rata-Rata Nilai Mahasiswa</h2>
              
        <table class="tbl1">
            <tr>
                <td><label>ALPRO</label></td>
                <td>=</td>
                <td><input type="text" id="alpro" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Basis Data</label></td>
                <td>=</td>
                <td><input type="text" id="bd" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Program Paket Niaga</label></td>
                <td>=</td>
                <td><input type="text" id="ppn" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>PTI</label></td>
                <td>=</td>
                <td><input type="text" id="pti" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Matematika</label></td>
                <td>=</td>
                <td><input type="text" id="mtk" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Bahasa Inggris</label></td>
                <td>=</td>
                <td><input type="text" id="bing" placeholder="Masukan bilangan 1"></td>
            </tr>
            <tr>
                <td><label>Rata-Rata</label></td>
                <td>=</td>
                <td><label id="rata_rata"></label></td>
            </tr>
        </table>
  <br>
  <input type="button" id="btn" value="Rata-Rata" class="btn" onClick="Ratarata()">
            </center>
        </div>
      <script>
          function InputData(Bilangan){
            var data;
              data = parseFloat(document.getElementById(Bilangan).value);
            return data;
          }
        
          function Output(data){
              document.getElementById("rata_rata").innerHTML = data;
          }
        
          function Ratarata(){
            //Deklarasi Variable
            var dat1,dat2,dat3,dat4,dat5,dat6,ratarata;
            //Input
            dat1  = InputData("alpro");
            dat2  = InputData("bd");
            dat3  = InputData("ppn");
            dat4  = InputData("pti");
            dat5  = InputData("mtk");
            dat6  = InputData("bing");
            //Proses
            ratarata = Hitung(dat1,dat2,dat3,dat4,dat5,dat6);
            //OutPut
            Output(ratarata);
          }
        
      </script>
    </body>
</html>

dari script di atas maka yang akan dihasilkan seperti :



SELAMAT MENCOBA
ket :
warna merah digunkan untuk membuat background atau tampilan pada scrip yang kita akan isi
warna biru digunakan utuk isi yang ada di bagian yang ada di dalam html

Komentar

Posting Komentar

Postingan populer dari blog ini

STRUKTUR DATA - (Sequential Search dan Binary Search)

-
Gambar
Assalamualaikum Wr.Wb Hai teman teman kali ini saya akan membahas apa itu Searching dan macam macam searching Searching adalah pencarian data dengan cara menelusuri data-data tersebut. Tempat pencarian data dapat berupa array dalam memori(pencarian internal), bisa juga pada file pada external storage(pencarian external). Ada dua macam teknik pencarian yaitu Sequential Search dan Binary Search. Perbedaan dari dua teknik ini terletak pada keadaan data. Pencarian sekuensial digunakan apabila data dalam keadaan acak atau tidak terurut (contoh: sequential search). pencarian biner digunakan pada data yang sudah dalam keadaan urut (contoh: Binary serach dan interpolation search). Keuntungan dan Kerugian Sequential Search + jika data terletak didepan maka waktu yang dibutuhkan minimal - jika data yang di butuhkan besar maka waktu yang dibutuhkan maksimal Contoh Binary Search + jika data terletak ditengah - Jika data tidak ada S equential Search   A
Baca selengkapnya

STRUKTUR DATA - Tree

-
Gambar
Assalamualaikum Wr.Wb Hay kawan kawan kali ini saya akan membahas tentang Tree kira kira apa ya itu?. Yaudah kita bahas yuk!! Tree merupakan salah satu bentuk struktur data tidak linear yang menggambarkan hubungan yang bersifat hirarkis (hubungan one to many) antara elemen-elemen. Tree bisa didefinisikan sebagai kumpulan simpul/node contoh tree       Tree ada 2 1.       Tree Statik Isi node nodenya tetap karena bentuk pohonnya sudah di tentukan 2.       Tree Dinamik Isi nodenya berubah ubah karena proses penambahan dan penghapusan Contoh penggunaan Tree dengan struktur pohon biasanya ada di: -           Silsilah Keluarga -           Parse Tree(pada Kompiler) -           Struktur file -           Pertandingan TREE Keterangan -           Node root = Sebuah node khusus yang tercipta pertama kalinya / suatu node yang memliki                          hirkaki tertinggi dan dapat juga memiliki node node
Baca selengkapnya