Object Dan User Interface Dalam Javascript (Pertemuan 16)

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Pembahasan kita kali ini masih seputar Javascript. Sekarang, kita akan membahas mengenai Object dan penggunaan User Interface didalam Javascript. Langsung saja kita mulai pembahasan kali ini.

1. Interface Text Box to Alert
Pada penggunaan interface yang pertama ini adalah dengan menggunakan Text Box, jadi ketika kita meng-input sebuah kalimat kedalam Text Box, maka Text Box tersebut akan menjalankan function sayHalo() yang akan menampilkannya pada alert. Contohnya sebagai berikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Interface Text Box To Alert </title>
  <link href = "Interface.css" rel = "stylesheet" type = "text/css">
 </head>
  <body>
   <p id = "coba">
<script language = "javascript" type = "text/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>

2. Fungsi Object
Pada penggunaan Fungsi Object ini, kita membuat sebuah variable tersebut menjadi sebuah object, ketika kita menekan Button diatas maka otomatis akan menjalankan function ambilNilai(). Contohnya sebagai berikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Buat Fungsi PBO </title>
  <link href = "Interface.css" rel = "stylesheet" type = "text/css">
 </head>
  <body>
   <p id = "coba">
<input type="text" id="nilai">
   <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
   </p>
<script language="javascript" type="text/javascript">
    function ambilNilai(){
    var objNilai = document.getElementById('nilai');
    var n = objNilai.value;
    alert("Nilainya adalah " + n);
    }
 </script>
   </script>
  </body>
</html>

Adapun Contoh lain penggunaan fungsi Object adalah sebagai berikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Buat Fungsi PBO 2</title>
  <link href = "Interface.css" rel = "stylesheet" type = "text/css">
 </head>
  <body>
   <p id = "coba">
<script language = "javascript" type = "text/javascript">
     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 s = new SegiEmpat();
     s.panjang = 4;
     s.lebar = 3;
     alert("Luas adalah " +s.hitungLuas() + " cm");
     alert("dan Keliling adalah " +s.hitungKeliling() + " cm");
    </script>
   </p>
</body>
</html>

3. Interface Text Box + Button to Alert
Pada penggunaan ini, tidak jauh berbeda dengan contoh awal, hanya saja disini kita harus menekan Button terlebih dahulu untuk memunculkan alert yang telah berisikan nilai yang di input. Contohnya adalah sebagai berikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Interface Dengan JS </title>
  <link href = "Interface.css" rel = "stylesheet" type = "text/css">
 </head>
  <body>
   <p id = "coba">
<input type = "text" id = "nilai" />
    <input type = "button" id = "btnAmbilNilai" value = "Ambil Nilai" onclick = "ambilNilai();" />
    <script language = "javascript" type = "text/javascript">
     function ambilNilai() {
     var objNilai = document.getElementById('nilai');
     var n = objNilai.value;
     alert("Nilainya adalah " + n );
     }
    </script>
   </p>
</body>
</html>

Selain dengan menggunakan document.getElementById kita juga dapat menggunakan document.getElementByName, tidak jauh berbeda penggunaannya dengan document.getElementById. Contohnya adalah sebagai berikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Interface Dengan JS </title>
  <link href = "Interface.css" rel = "stylesheet" type = "text/css" >
 </head>
  <body>
   <p id="coba">
<input type="text" name="nilai">
    <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
    <script language="javascript" type="text/javascript">
     function ambilNilai(){
     var objNilai = document.getElementsByName('nilai')[0];
     var n = objNilai.value;
     alert("Nilainya adalah " + n);
    }
  </script>
 </p>
</body>
</html>

Kita juga dapat menggunakan array untuk memudahkan proses pemasukan data, Contohnya adalah sebagai beikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Interface Dengan JS </title>
  <link href = "Interface.css" rel = "stylesheet" type = "text/css">
 </head>
  <body>
   <p id="coba">
<input type="text" name="nilai">
    <input type="text" name="nilai">
    <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>

Selain dengan menggunakan document.getElementById dan document.getElementByName kita juga dapat menggunakan document.getElementByTagName, tidak jauh berbeda penggunaannya dengan document.getElementById maupun document.getElementByName. Contohnya adalah sebagai berikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Interface Dengan JS </title>
  <link href = "Interface.css" rel = "stylesheet" >
 </head>
  <body>
   <p id="coba">
<input type="text" name="nilai">
    <input type="button" id="btnAmbilNilai" value="Ambil Nilai" onclick="ambilNilai();">
    <input type="text" name="hasil">
    <script language="javascript" type="text/javascript">
     function ambilNilai(){
     //mengambil obyek input text pertama
     var obj1 = document.getElementsByTagName('input')[0];
     //mengambil obyek input button
     var obj2 = document.getElementsByTagName('input')[1];
     //mengambil obyek input kedua
     var obj3 = document.getElementsByTagName('input')[2];
     //mengambil nilai input text pertama dan button
     var s1 = obj1.value;
     var s2 = obj2.value;
     //menampilkan nilai pada input text kedua
     obj3.value = s1;
    }
    </script>
   </p>
</body>
</html>

Semua codingan diatas, saya menggunakan 1 file CSS yang digunakan untuk seluruh file pada pembahasan kita kali ini. Berikut adalah file CSS untuk pertemuan kali ini :

body{
 background-image: url(1.png);
 font-family  : Comic Sans MS;
 font-size  : 25pt;
 color   : Blue;
 text-align : center;
}
#coba{
 margin-top: 100pt;
 font-size : 20pt;
 color : chocolate;
 text-shadow: 3px 3px 10px red, 
     5px 5px 10px yellow;
}

Cukup sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalah dalam pengetikan maupun penjelasan. See you next Guys!.

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Object Dan User Interface Dalam Javascript (Pertemuan 16)

Komentar

Posting Komentar