pertemuan 16

VIORIZA-XIRPL1

Assalamualaikum wr.wb dalam penggunaan javascript kita harus memahami penggunaan object dalam javascript, berikut kodinganya

FungsiPBO.html

 <html>
 <head>
 <title>Buat Fungsi PBO</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <pre>VIORIZA || XI-RPL 1</pre>
  <input type="text" id="nilai">
  <input type="button" id="getNilai" value="AmbilNilai" onclick="getNilai()">

  <script type="text/javascript">
   function getNilai() {
    var objValue = document.getElementById('nilai').value;
    alert("Nilainya adalah : " + objValue);
   }
  </script>
  <p class="info">
   Event onclick itu kalo objeknya diklik<br>
   Bakal menjalankan sebuah function
  </p>
 </body>
</html>

FungsiPBO2.html

 <html>
 <head>
 <title>Buat Fungsi PBO</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <pre>AlvaroDwi || XI-RPL 1</pre>
  <input type="button" value="CLICKME!" onclick="Pakai()" class="Lonely">
   <script 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;
     }
    }

    function Pakai(){
     var s = new SegiEmpat();
     s.panjang = 4;
     s.lebar = 3;
     alert("Luas : " + s.hitungLuas()+" cm2");
     alert("Keliling : " + s.hitungKeliling() +" cm");
    }
   </script>
   <p class="info">
   Event onclick itu kalo objeknya diklik<br>
   Bakal menjalankan sebuah function
  </p>
 </body>
</html>

InterfaceGetElementGetByName.html

 <html>
 <head>
 <title>Interface dengan JS</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <p id="coba">
  <pre>VIORIZA || XI-RPL 1</pre>
  <input type="text" name="nilai">
  <input type="button" id="getNilai" value="AmbilNilai" onclick="getNilai()">
  <input type="text" name="hasil">

  <script type="text/javascript">
   function getNilai() {
    //tag inputke1 --> nilai
    var obj1 = document.getElementsByTagName('input')[0].value;
    //tag inputke2 --> button
    var obj2 = document.getElementsByTagName('input')[1].value;
    //tag inputke3 --> hasil
    var obj3 = document.getElementsByTagName('input')[2];
    //menampilkan isi obj1 + obj2 di hasil
    obj3.value = obj1 + obj2;
   }
  </script>
  </p>
  <p class="info">
   Event onclick itu kalo objeknya diklik<br>
   Bakal menjalankan sebuah function
  </p>
 </body>
</html>

InterfaceTextBoxAndButtonToAlert.html

 <html>
 <head>
 <title>Interface dengan JS</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <p id="coba">
  <pre>AlvaroDwi || XI-RPL 1</pre>
  <input type="text" id="nilai">
  <input type="button" id="getNilai" value="AmbilNilai" onclick="getNilai()">

  <script type="text/javascript">
   function getNilai() {
    var objValue = document.getElementById('nilai').value;
    alert("Nilainya adalah : " + objValue);
   }
  </script>
  </p>
  <p class="info">
   Event onclick itu kalo objeknya diklik<br>
   Bakal menjalankan sebuah function
  </p>
 </body>
</html>

InterfaceTextBoxAndButtonToAlert.html

 <html>
 <head>
 <title>Interface dengan JS</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <p id="coba">
  <pre>AlvaroDwi || XI-RPL 1</pre>
  <input type="text" name="nilai">
  <input type="button" id="getNilai" value="AmbilNilai" onclick="getNilai()">

  <script type="text/javascript">
   function getNilai() {
    var objValue = document.getElementsByName('nilai')[0].value;
    alert("Nilainya adalah : " + objValue);
   }
  </script>
  </p>
  <p class="info">
   Event onclick itu kalo objeknya diklik<br>
   Bakal menjalankan sebuah function
  </p>
 </body>
</html>

InterfaceTextBoxAndButtonToAlertToArray.html

 <html>
 <head>
 <title>Interface dengan JS</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <p id="coba">
  <pre>VIORIZA || XI-RPL 1</pre>
  <input type="text" name="nilai">
  <input type="text" name="nilai">
  <input type="button" id="getNilai" value="AmbilNilai" onclick="getNilai()">

  <script type="text/javascript">
   function getNilai() {
    var obj1 = document.getElementsByName('nilai')[0].value;
    var obj2 = document.getElementsByName('nilai')[1].value;
    alert("Nilai pertama : " + obj1);
    alert("Nilai kedua : " + obj2);
   }
  </script>
  </p>
  <p class="info">
   Event onclick itu kalo objeknya diklik<br>
   Bakal menjalankan sebuah function
  </p>
 </body>
</html>

InterfaceToAlertToArray.html

 <html>
 <head>
 <title>Interface Dengan JS</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <pre>VIORIZA || XI-RPL 1</pre>
  <p id="coba">
  <script 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>
  <p class="info">
   Event onchange itu kalo objeknya diganti valuenya<br>
   Bakal menjalankan sebuah function
  </p>
 </body>
</html>

VIORIZA BLOG

Cari Blog Ini

pertemuan 16

VIORIZA-XIRPL1

FungsiPBO.html

FungsiPBO2.html

InterfaceGetElementGetByName.html

InterfaceTextBoxAndButtonToAlert.html

InterfaceTextBoxAndButtonToAlert.html

InterfaceTextBoxAndButtonToAlertToArray.html

InterfaceToAlertToArray.html

Komentar

Posting Komentar

Postingan populer dari blog ini

pertemuan 3

PRAKTIKUM 4

SESI 5