Pemrograman Berorientasi Obyek & Interaksi User pada Javascript

September 11, 2019

Pemrograman Berorientasi Obyek & Interaksi User pada Javascript

PRAKTIKUM 16

Nama : M.Fadlul Hafiizh

Kelas : XI-RPL 2

Welkammm, selamat datang kembali sobat-sobat, kawan-kawan, rekan-rekan, agan-agan dan bapa ibu sekalian. Hhe balik lagi nih di blog tutor gesit😁. seperti biasa masih dalam topik pemrograman kaliini materinya apaa yaa. Yapss kaliini kita akan mempelajari PBO (Pemrograman Berorientasi Obyek) dan interaksi user pada java script. Kira-kira seperti apa yaaa, yuuu kita simak baik-baik penjelasannya berikut.

PBO (Pemrograman Berorientasi Obyek)

Merupakan sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur, variabel ataupun konstanta terkait dalam satu kesatuan (kelas) seperti obyek dalam dunia nyata. Obyek sendiri merupakan wujud dari kelas, secara umum dikenal dengan nama instan. Teknik-teknik dalam pemrograman ini merupakan pengembangan dari teknik sebelumnya. Javascript menggunakan PBO dengan model pemrograman berbasis prototipe. Model ini tidak mengenal kelas, yang ada adalah obyek. Obyek dalam model ini dapat dimodifikasi secara runtime seperti penambahan variabel (properti) ataupun metode (fungsi/prosedur). Model ini juga dikenal dengan istilah pemrograman PBO tanpa kelas, berorientasi prototipe atau berbasis instan. Javascript memiliki banyak obyek bawaan seperti Math, Array, String dan Object. Setiap obyek dalam Javascript adalah instan dari obyek Object, sehingga memiliki semua properti dan metode yang ada.

Interaksi User

Adanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna untuk menggunakan aplikasi yang dikembangkan. Di banyak bahasa pemrograman pengolahan interaksi ini dikenal sebagai teknik penanganan event. Event dalam Javascript adalah sebuah kejadian interaksi antara user dengan halaman web.

Gimana penjelasan diatas? udah paham belum nihh, yauda deh buat kalian baik yang belum paham & yang sudah paham, kalian bisa pelajari beberapa contoh pemrograman dibawah ini sekaligus sebagai bahan praktek bagi kalian yang sedang dalam proses belajar agar lebih paham.

Interface Text Box To Alert

<!DOCTYPE html>
<html>
<head>
 <title>Interface dengan js M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="BuatIf.css">
</head>
<body>
 <p id="demo">
<script type="text/javascript" language="javascript">
   function sayHalo(){
    var nm = document.getElementById('nama').value;
    alert("Halo, "+nm);
   }
  </script>
  <label>Tulis Disini</label>
  <input type="text" id="nama" onchange="sayHalo();"/>
 </p>
</body>
</html>

Hasilnya :

Fungsi PBO

<!DOCTYPE html>
<html>
<head>
 <title>Buat Fungsi PBO M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="BuatIf.css">
</head>
<body>
 <input type="text" id="nilai">
    <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
 
    <script type="text/javascript" language="javascript">
        function ambilNilai() {
            var objNilai = document.getElementById('nilai');
            var n = objNilai.value;
            alert("Nilainya adalah " + n);
        }
    </script>
</body>
</html>

Hasilnya :

Fungsi PBO 2

<!DOCTYPE html>
<html>
<head>
 <title>buat Fungsi PBO M.Fadlul Hafiizh XI-RPL 2</title>
</head>
<body>
 <p id="coba">
<script type="text/javascript" language="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;
    }
   }
   var s = new SegiEmpat();
   s.panjang = 4;
   s.lebar = 3;
   alert("Luas adalah "+s.hitungluas()+" cm");
   alert("dan keliling adalah "+s.hitungkeliling()+" cm");
  </script>
</body>
</html>

Hasilnya :

Interface Text Box And Button To Alert

<!DOCTYPE html>
<html>
<head>
    <title>M.Fadlul Hafiizh XI RPL 2</title>
</head>
 
<body>
    <p id="coba">
<input type="text" name="" id="nilai">
        <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();" />
        <script type="text/javascript">
            function ambilNilai() {
                var objNilai = document.getElementById('nilai');
                var n = objNilai.value;
                alert("nilainya adalah " + n);
            }
        </script>
    </p>
</body>
 
</html>

Hasilnya :

Interface Text Box And Button To Alert 2

<!DOCTYPE html>
<html>
 
<head>
    <title>Muhammad Fadlul Hafiizh XI RPL 2</title>
</head>
 
<body>
    <p id="coba">
<input type="text" name="nilai">
        <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();" />
        <script type="text/javascript">
            function ambilNilai() {
                var objNilai = document.getElementsByName('nilai')[0];
                var n = objNilai.value;
                alert("nilainya adalah " + n);
            }
        </script>
    </p>
</body>
 
</html>

Hasilnya :

Interface Text Box And Button To Alert To Array

<!DOCTYPE html>
<html>
<head>
    <title>Muhammad Fadlul Hafiizh XI RPL 2</title>
</head>
 
<body>
    <p id="coba">
<input type="text" name="nilai" id="">
        <input type="text" name="nilai" id="">
        <input type="button" id="btnAmbilNilai" value="Ambil Nilai " onclick="ambilNilai();" />
 
        <script>
            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>

Hasilnya :

Interface Get Elements By Tag Name

<!DOCTYPE html>
<html>
<head>
    <title>Muhammad Fadlul Hafiizh XI RPL 2</title>
</head>
 
<body>
    <p id="coba">
<input type="text" name="nilai" id="">
        <input type="button" id="btnAmbilNilai" value="Ambil Nilai " onclick="ambilNilai();" />
        <input type="text" name="hasil" id="">
        <script>
            function ambilNilai() {
                // mengambil objek input nilai pertama
                var obj1 = document.getElementsByTagName('input')[0];
                // mengambil objek input button
                var obj2 = document.getElementsByTagName('input')[1];
                // mengambil objek input text kedua
                var obj3 = document.getElementsByTagName('input')[2];
                // mengambil objek 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>

Hasilnya :

Mungkin sekian yang dapat saya paparkan, saya ucapkan mohon maaf atas segala kesalahan dan kekurangannya. semoga perihal diatas bermanfaat bagi semuanya.....

Cari Blog Ini

Tutor Gesit

Pemrograman Berorientasi Obyek & Interaksi User pada Javascript

Komentar

Posting Komentar

Postingan Populer

CRUD(Create, read, update, delete) data dalam relasi 2 tabel

If, If/Else, Else, Switch/Case On java script