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

Array pada JS - P13

Di pembahasan kali ini akan membahas JS Array..Langsung simak aja guys... 1. Pengertian Array 2. Jenis jenis Array 3. Contoh contoh Array 1. Pengertian Array     Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dst.     Array di dalam JavaScript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat. Index array di dalam JavaScript juga tidak harus berurutan, JavaScript membolehkan elemen dari array ‘tidak terur...
Post a Comment
Read more

Profil PHP - P19

PROFIL SAYA 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 <!DOCTYPE html> <html> <head> <title> DATA PRIBADI </title> <link rel="stylesheet" type="text/css" href="coba.css" > </head> <body> <section class="kotaknya" > <img src="FOTO.png" clas="image" width="300" height="450" /> </div> </section> <h1> Biografi pribadi </h1> <?php $nama_saya = "Muhamad Alfi Rizqi"; $kelas = "XI RPL 1"; $sekolah = "SMKN 4 Bandung"; $nis = "1718 117123"; $umur = "16 Tahun"; $berat_badan= "50 kg"; $hobi = "Bersepeda, Playing Games, mendaki"; $tinggi = "167 cm"; $alamat = ...
Post a Comment
Read more

Membuat Coding menjadi lebih bermakna dengan C++

Selamat beraktivitas dimanapun kalian berada... Kali ini saya akan menunjukan dengan Coding menjadi lebih bermakna untuk kalian semua... Misal dengan membuat Kalkulator simpel dengan C++ sangatlah mudah jika kalian ingin mempelajari ini terlebih dahulu.        Sebenarnya banyak bahasa pemrograman yang tentu saja memudahkan bagi kehidupan manusia,Contohnya Java,Phyton,C# dan masih banyak lagi Tapi,Saya akan menunjukan kepada kalian tentang bahasa program C++ dengan mencari tahu kalian tentu akan menjadi Programmer yang handal Dengan catatan ini adalah coding karya saya tentunya, Dan kalian hanya perlu memahami nya dan meniru nya dirumah.. saya hanya menunjukan berbagai cara saja dan sebenarnya C++ lebih dari ini.mungkin ini adalah Coding yang simple yang menurut kalian pasti hanya perlu waktu sebentar untuk memahaminya.. Sebelumya saya sudah menjelaskan di link saya tentang C++ dan tentunya dengan penjelasannya .Saya sarankan untuk membaca ARTIKEL ini...
Post a Comment
Read more