#16 Intermediate Web | Web Programming Tutorial ~ Angga Gemilang Blog

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, Pada postingan kali ini kita sudah memasuki materi javacscript dengan metode pemrograman berbasis objek yang bisa kita plejari pada pemrograman java dan juga interaksi user, mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 3 bab yang akan kita pelajari, yaitu:

Penjelasan Pemrograman Berbasis Objek
Penjelasan Pemrograman Berbasis Prototype
Penjelasan Interaksi User

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Pemrograman Berbasis Objek
Penjelasannya...

Pemrograman berorientasi obyek adalah 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 seperti modularitas, polimorfisme, dan enkapsulasi. Saat ini ada banyak bahasa pemrograman yang telah mendukung pemrograman berorientasi obyek ini, seperti C++, C#, Java, Javascript, PHP, Python, Ruby, dan Objective C.

Pemrograman Berbasis Prototype
Penjelasannya...

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.

Javascript merupakan bahasa PBO yang menggunakan kata kunci function untuk mendefinisikan suatu kelas. Oleh karena itu, pembuatan kelas sama dengan pembuatan fungsi dalam Javascript. Berikut ini merupakan format yang dapat digunakan untuk mendefinisikan kelas pada javascript.

Berikut Merupakan contoh - contoh PBP

CSS : (index.css)

body{
 background: salmon;
 font-family: arial;
 position: absolute;
 top: 35%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-transform: uppercase;
 font-weight: bold;
 color: #fff;
 text-shadow: 0 2px 3px #000;
 letter-spacing: 5px;
 font-size: 35pt;
 text-align: center;
}

input#getNilai
{
 width: 200px;
}

input[type="text"]
{
 width: 350px;
 transition: .5s;
 height: 50px;
 border: none;
 background: none;
 border-bottom: 3px solid grey;
 font-size: 25pt;
 padding: 0px 30px;
 color: #fff;
}

input[type="text"]:focus
{
 border-bottom: 3px solid #fff; 
}

input[type="button"]
{
 border: none;
 margin-top: 15px;
 width: 160px;
 height: 60px;
 background: none;
 cursor: pointer;
 font-weight: bold;
 color: #fff;
 border-radius: 20px;
 font-size: 20pt;
 transition: .5s;
 text-transform: uppercase;
}

input[type="button"]:hover
{
 box-shadow: 0 5px 10px rgba(0,0,0,.5);
}

input#tombolakhir
{
 background: #fff;
 color: #000;
 margin-top: 23px;
 margin-bottom: 20px;
}

input#tombolakhir:hover
{
 background: salmon;
 color: #fff;
}

Contoh 1 :

<html>
 <head>
 <title>Buat Fungsi PBO</title>
 </head>
  <link rel="stylesheet" href="index.css" type="text/css">
 <body>
  <pre>Angga Gemilang</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>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 1 :

Contoh 2 :

<html>
 <head>
 <title>Buat Fungsi PBO</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <pre>Angga Gemilang</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>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 2 :

Interaksi User
Penjelasannya...

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.

Berikut merupakan atribut yang dapat digunakan pada interaksi user :

Atribut Event	Penjelasan
onclick ondblclick	Event ini terjadi saat user melakukan klik sekali atau dua kali dalam satu elemen HTML. Elemen HTML yang umum dimiliki atribut ini : button, document, checkbox, link, radio, select, submit, reset.
onmousedown	Event ini terjadi saat user melakukan klik pada satu elemen HTML. Elemen terkait : button, document, link, layer
onmousemove	Event ini terjadi saat user menggerakan mouse diatas elemen HTML
onmouseover	Event ini terjadi saat user menggerakan mouse ke atas elemen HTML. Elemen terkait: button, documnet, link, layer.
onmouseout	Event ini terjadi jika user menggerakan mouse keluar elemen HTML. Elemen Terkait : button, document, link, layer
onmouseup	Event ini terjadi saat user melepaskan klik pada elemen HTML. Elemen terkait : button, document, link, layer
onmousedown	Event ini terjadi saat user sedang menekan tombol keyboard pada elemen HTML. Elemen terkait : document, image, link, input, textarea
onkeypress	Event ini terjadi saat user menekan tombol keyboard pada elemen HTML. Elemen terkait : document, image, link, input, textarea
onkeyup	Event ini terjadi saat user melepas penekanan tombol keyboard pada elemen HTML.
onload	Event ini terjadi pada dokumen atau frame telah ditampilkan oleh browser. Elemen terkait : document, image, layer, window
onresize	Event ini terjadi saat ukuran dari dokumen berubah. Elemen terkait : document, image, layer, window
onscroll	Event ini terjadi saat user melakukan scrolling pada dokumen. Elemen terkait : document, window
onunload	Event ini terjadi saat user menutup dokumen. Elemen terkait : document, window
onblur	Event ini terjadi saat fokus pada elemen tersebut dipindahkan ke elemen lainnya. Elemen Terkait : button, checkbox, file upload, layer, password, radio, reset, select, submit, text, textarea, window
onchange	Event ini terjadi saat nilai elemen form berubah. Elemen terkait : file upload, select, submit, text, textarea
onfocus	Event ini terjadi saat elemen tersebut difokuskan oleh user. Elemen terkait : button, checkbox, file upload, layer, password, radio, reset, select, submit, text, textarea, window
onreset	Event ini terjadi saat form di reset ke kondisi sebelum diisi. Elemen terkait : form
onselect	Event ini terjadi saat user memiliki sebagian teks pada elemen. Elemen terkait : text, textarea
onsubmit	Event ini terjadi saat form akan dikirim ke aplikasi browser. Elemen terkait : form

Berikut merupakan contoh program interaksi user pada javascript :

Contoh 1 :

<html>
 <head>
 <title>Interface Dengan JS</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <pre>Angga Gemilang</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>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 1 :

Contoh 2 :

<!DOCTYPE html>
<html>
<head>
 <title>Interface dengan JS</title>
 <link rel="stylesheet" href="ini.css">
</head>
<body>
 <center>
 <p id="coba">Masukan nilai
  <input type="text" id="nilai">
  <input type="button" id="tombol" value="Yuk Klik" onclick="ambilNilai();">
  <script>
   function ambilNilai (){
    var objNilai = document.getElementById('nilai');
    var n = objNilai.value;
    alert("Nilainya adalah "+ n);
   }
  </script>
 </p>
</center>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 2 :

Contoh 3 :

<!DOCTYPE html>
<html>
<head>
 <title>Interface dengan JS</title>
 <link rel="stylesheet" href="ini.css">
</head>
<body>
 <center>
 <p id="coba"> Masukan nilai
  <input type="text" name="nilai">
  <input type="button" id="tombol" value="Yuk Klik" onclick="ambilNilai();">
  <script>
   function ambilNilai (){
    var objNilai = document.getElementsByName('nilai')[0];
    var n = objNilai.value;
    alert("Nilainya adalah "+ n);
   }
  </script>
 </p>
</center>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 3 :

Contoh 4 :

<!DOCTYPE html>
<html>
<head>
 <title>Interface dengan JS</title>
 <link rel="stylesheet" href="ini.css">
</head>
<body>
 <center>
 <p id="coba">Nilai pertama
  <input type="text" name="nilai">
  <br>
  Nilai kedua
  <input type="text" name="nilai">
  <br>
  <input type="button" id="tombol" value="Yuk Klik" 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>
</center>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 4 :

Contoh 5 :

<!DOCTYPE html>
<html>
<head>
    <title>Interface dengan JS</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <center>
        <p id="coba">
            Masukan nilai
            <br>
            <input type="text" name="nilai">
            <br>
            <input type="button" id="tombol" value="Yuk Klik" onclick="ambilNilai();">
            <br> Masukan nilai
            <br>
            <input type="text" name="hasil">
            <script>
            function ambilNilai() {
                var obj1 = document.getElementsByTagName('input')[0];
                var obj2 = document.getElementsByTagName('input')[1];
                var obj3 = document.getElementsByTagName('input')[2];
                var s1 = obj1.value;
                var s2 = obj2.value;
                obj3.value = s1+s2;
            }
            </script>
        </p>
</center>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 5 :

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #15 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Angga Gemilang Blog

Kamis, 27 September 2018

#16 Intermediate Web | Web Programming Tutorial

Assalamualaikum wr, wb

Berikut Merupakan contoh - contoh PBP

CSS : (index.css)

Contoh 1 :

Contoh 2 :

Berikut merupakan atribut yang dapat digunakan pada interaksi user :

Berikut merupakan contoh program interaksi user pada javascript :

Contoh 1 :

Contoh 2 :

Contoh 3 :

Contoh 4 :

Contoh 5 :

0 komentar:

Posting Komentar

Follow Me

Clock

Calendar

Popular Posts

Blog Archive

About Me

Sent Quick Message

Translate

Translator's Flag

SMK Negeri 4 Bandung

Pesan Dari Admin

About