Skip to main content

Fungsi dan Objek pada Javascript - P16

Dalam PBO kita akan banyak menggunakan Fungsi jadi saya sarankan untuk membaca Artikel sebelumnya tentang Fungsi pada JavaScript


Definisi PBO
Apa itu PBO?

PBO (Pemrograman berbasis Objek) atau bahasa keren nya OOP (Object Oriented Programming) adalah cara ngoding yang berfokus pada Objek.

Terus kalau Objek apa?

Objek itu sendiri adalah sekumpulan Variabel , Fungsi , dan Prosedur, yang disatukan dalam 1 Class lalu diperlakukan layaknya Objek di dunia Nyata.

Misalnya kita mau buat Objek Nyamuk. Kita tentuin Sifat dari Nyamuk itu apa aja terus jadiin jadi Variabel. Lalu setelahnya, kita tentuin Tindakan yang bisa dilakukan nyamuk itu apa aja terus jadiin Fungsi atau Prosedur.

Misalnya gini nih:

Objek : Nyamuk

 Variabel:
- Usia
- Kecepatan Terbang
- Darah yang dihisap


Fungsi / Prosedur:
- Terbang
-  Menghisap Darah


PBO dalam JavaScript

Barusan itu sedikit gambaran tentang PBO. Tapi, sebenarnya ada sedikit perbedaan Konsep PBO dalam JavaScript dengan Konsep PBO dalam pemrograman lain seperti Java.

Biasanya Objek itu isinya Variabel, Fungsi, dan Prosedur yang dibungkus menjadi 1 Class. Namun, dalam JavaScript kita tidak mengenal Konsep Class, jadi PBO dalam JavaScript tidak dibungkus dalam sebuah Class melainkan diedit langsung. Konsep PBO seperti ini dikenal sebagai Pemrograman Berbasis Prototipe



Interaksi

Selain Fungsi kita juga akan banyak menggunakan Interaksi JavaScript dalam PBO.

Apa itu Interaksi?

Interaksi itu ya....   Interaksi.
Jadi, Interaksi itu ketika kita melakukan sesuatu ke Konten (Tombol, Kotak Input, Teks) HTML kita.
Misalnya Nge Klik Tombol, Nge Ganti Isi Kotak Input, dan lain - lain.

Untuk Penulisanya cukup ditambahkan ke dalam Kodingan HTML nya.

Misal:

<input type="button" name="tombolNilai" value="Ambil Nilai" onclick="ambilNilai()">

onclick diatas sesuatu akan dijalankan ketika kita Mengklik

Dan inilah beberapa Contohnya:

Fungsi PBO.html



Fungsi PBO2.html


Buat Interface ByTagName.html 


Interface TextBox & Button to alert.html


Dan ini CSS nya:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@import url(https://fonts.googleapis.com/css?family=Dosis:300);
 {
  margin: 0;
  padding: 0;
  border: 0 none;
  position: relative;
}
html, body {
  background: #164C88;
  font-family: Dosis;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #F6FAFD;
}
body {padding: 1rem;}
.kotaknya {
  text-align: center;
}
.width {
    width: 45%;
    background: #F9D237;
    position: relative;
    display: inline-block;
    margin: 1%;
    vertical-align: top;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
}
.width:before {
    content: '';
    display: block;
}
.textbox:before {padding-top: 50%;}
.konten {    
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
   font-size: 1.5rem;
   color: #444;
}
p {color: #F9D237}

input[type="button"]{
  border-radius: 10px;
  height: auto;
  width: auto;
  text-align: center;
  font-size: 36px;
  background-color: #F9D237  ;
  margin-top: 10px;
  color: #F2EFE9;
  box-shadow: 1px 0 0px 1px #CEBA7A;
}
input[type="button"]:hover{
  background-color: #639E97; 
}
input[type="text"]{
  border-radius: 10px;
  height: auto;
  width: auto;
  font-size: 28px;
  padding: 10px;
  margin-top: 20px;
  text-align: center; 
}
input.Lonely{
  font-size: 120px;
}
label.hasil{
  font-size: 48px;
}
*:focus{
  outline: none;
}

Mohon maaf bila ada kesalahan.
Semoga bermanfaat~

Comments

Post a Comment

Popular posts from this blog

Membuat Anak Tangga menggunakan PHP - P24

Cara Membuat Anak Tangga menggunakan Array 2 Dimensi & Looping  Kali ini saya akan menunjukan kepada kalian cara membuat Anak Tangga di PHP menggunakan Array 2 dimensi & Looping dengan menyesuaikan Input dan pilihan warna dari User. Semoga bermanfaat~ <?php error_reporting ( 0 ); $jumlah = $_POST [ 'anakTangga' ]; $warna = $_POST [ 'warnaTangga' ]; for ( $i = 0 ; $i < $jumlah ; $i ++) { for ( $j = 0 ; $j < $i ; $j ++) { echo "<div class='kotak' style='background-color:$warna'></div>" ; } echo "<div class='kotak' style='background-color:$warna'></div><br>" ; } ?> Dan ini hasilnya Keterangan: Bahwa dalam menggunakan Array 2 Dimensi & Looping akan terus menerus mengulang sesuai dengan Input User <!DOCTYPE html> <html> <head> <title> Tangga Berwarna </title> </head> ...
Post a Comment
Read more

Komponen Audio,Video & Flash - P7

Menyediakan komponen, Audio, Video & Flash Format Tampilan Video Kita dapat menampilkan format audio pada halaman web, untuk menampilkannya dapat digunakan format seperti ini  Hasilnya: Source Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> cek video </title> </head> <body> <video width= "999" height= "540" controls poster= "gambarku/cute-030.jpg" > <source src= "This Is Me.mkv" type= "video/mp4" > browser anda tidak mendukung format video ini </video> </body> </html> Format Tampilan Audio  Hasilnya: Format Tampilan Flash 1 2 3 4 5 6 7 8 <html> <head> <title> Animasi </title> </head> <body> <embed src= "media/Strong.swf" > </body> </html> Hasilnya: Aud...
4 comments
Read more

Algoritma C++ Konversi dan Menukar Bilangan dari User

MENJADIKAN CODING C++ BERMANFAAT UNTUK USER Selamat beraktivitas bagi pembaca sekalian dimanapun kalian berada.. Kali ini saya akan menunjukan kepada kalian coding sederhana dengan C++ sesuai dengan judulnya  Yang saya bahas kali ini adalah  -PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -PERTUKARAN NILAI TANPA MENGGUNAKAN VARIABEL BANTU -BILANGAN POSITIF & NEGATIF dan -KONVERSI WAKTU DARI DETIK KE JAM, MENIT, dan DETIK Langsung saja ke pembahasan di bawah ini. 1. PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -Kita menginisialisasikan terlebih dahulu variabelnya x, y, z dengan tipe data Integer sebenarnya variabel z hanya variabel pembantu saja -Lalu untuk pengulangannya saya memakai do while  dengan menginisialisasikan pilih dengan tipe data char -Lalu pengulangannya saya tulis do{ -Saya outputkan dengan  cout << "Masukan Nilai X : " ; dan input dengan cin >> a ; -Untuk proses saya masukan z = x ; x = y ; y = z ; ...
Post a Comment
Read more