SchoolBlog: Pertemuan Keenambelas

Assalamualaikum Wr, Wb.
Jumpa lagi dengan saya Syahrul di SchoolBlog. Untuk postingan pertemuan ke-16 ini saya akan membahas sedikit tentang, fungsi PBO pada html.

1. Fungsi PBO
Untuk yang pertama ini tentang fugsi PBO, dengan memasukan data objek menggunkan event 'objNilai'
kodingannya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-RPL3 fungsi pbo2</title>
    <link rel="stylesheet" href="text/css">
  </head>
  <body>
    <p id="mencoba">
<script language="javascript" type="text/javascript">
        function SegiEmpat() { }
        function SegiEmpat()
        {
        this.panjang = 0;
        this.lebar = 0;
        this.hitungLuas = function()
        {
        var luas = this.panjang * this.lebar;
        return luas;
        }
        this.hitungKeliling = function()
        {
        var kel = 2 * (this.panjang + this.lebar);
        return kel;
        }
        }
        // contoh penggunaannya
        var p = new SegiEmpat();
        p.panjang = 4;
        p.lebar = 3;
        alert("Luas adalah "+p.hitungLuas()+" cm");
        alert("dan keliling adalah "+p.hitungKeliling()+" cm");
      </script>
    </p>
</body>
</html>

ini hasilnya

2. Interface Text Box

Untuk yang selanjutnya ini mengenai Interface melalui Text Box untuk Alert

kodingannya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-RPL3</title>
    <link href="" rel="stylesheet" href="text/css">
  </head>
  <body>
    <p id="mencoba">
<input type="text" name="nilai" value="" />
      <input type="text" name="nilai" value="" />
      <input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai () ;" />
      <script language="javascript" type="text/javascript">
        function ambilNilai () {
          var obj1 = document.getElementsByName('nilai')[0];
          var obj2 = document.getElementsByName('nilai')[1];
          var n1 = obj1.value;
          var n2 = obj2.value;
          alert ("nilai pertama adalah " + n1);
          alert ("nilai kedua adalah " + n2);
        }
      </script>
    </p>
</body>
</html>

ini hasilnya

Untuk kodingan yang terakhir ini tentang Interface TextBox dengan tag ByName

kodingannya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-RPL3 tag name</title>
    <link href="" rel="stylesheet" href="text/css">
  </head>
  <body>
    <p id="mencoba">
<input type="text" name="nilai" value="" />
      <input type="button" id="btnAmbilNilai" name="" value="Ambil nilai" onclick="ambilNilai();" />
      <input type="text" name="hasil" value="" />
      <script language="javascript" type="text/javascript">
        function ambilNilai(){
        // mengambil objek input text pertama
        var obj1 = document.getElementsByTagName('input')[0];
        // mengambil object input button
        var obj2 = document.getElementsByTagName('input')[1];
        // mengambil object input text kedua
        var obj3 = document.getElementsByTagName('input')[2];
        // mengambil nilai pada input text pertama dan button
        var s1 = obj1.value;
        var s2 = obj2.value;
        // menampilkan nilai pada input text kedua
        obj3.value = s1 + s2;
        }
      </script>
    </p>
</body>
</html>

ini hasilnya

Alhamdulilah telah sampai di penghujung postingan. Hanya segitu yang bisa saya sampai untuk postingan kali ini, terimakasih sudah melihat-lihat. Semoga bermanfaat..

Wassalamualaikum Wr, Wb.

SchoolBlog

inlinecss

Minggu, 15 September 2019

Pertemuan Keenambelas

Tidak ada komentar:

Posting Komentar