Langsung ke konten utama

Haikal PG - XI RPL 1 - PWPB Sesi 16

Assalamualaikum Warahmatullahi Wabarokatuh

  • Pada sesi kali ini saya akan membahas tentang OOP pada Javascript. OOP (Object oriented programming) atau bisa di sebut juga pemrograman berorientasi obyek merupakan sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur,, varibel 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, 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.


PBO: Pemrograman Berbasis Prototipe
Javascript menggunakan PBO dengan model pemrograman berbasis prototipe. Model ini tidak mengenal kelas, yang ada adalah obyek. Obyek dalam model ini dapat dimodifikasi secara runtime seperti penambahan variabel (properti) ataupun metode (fungsi/prosedur). Model ini juga dikenal dengan istilah pemrograman PBO tanpa kelas, berorientasi prorotipe atau berbasis instan.

Obyek Utama (Bawaan)
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.

Obyek Buatan
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.

Interaksi User

  • 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 dalah sebuah kejadian interaksi antara user dengan halaman web.
Attribut event javascript sangat banyak, ada onclick,onblclick,onmousemove,onmouseover,onreset,onfocus dll. Saya sebutkan saja yang sering digunakan yaitu onclick . Penerapan attribut ini bisa seperti ini <tag attribut-event="kode js;"....>....</tag>
Pengaksesan obyek pada halaman web :


Teorinya sudah dulu, kita langsung saja mulai prakteknya : 

BuatInterfaceTextBoxtoAlert.html
Kita coba untuk membuat input form text dan kemudian kita akan masukkan ke variabel dan di panggil dengan alert untuk di tampilkannya. Tampilan dan codenya : 


BuatFungsiPBO.html
Sama seperti diatas kita akan mengambil inputan dari form lalu ditampilkan lewat alert, namun sekarang bedanya kita akan menggunakan attribut event onclick. Ini dia tampilanya dan source codenya :


BuatFungsiPBO2.html
Disini kita juga akan membuat fungsi PBO. Contoh tampilan dan codenya:



BuatInterfaceTextBoxandButtontoAlert.html
Sama lagi seperti sebelumnya kia akan membuat texbox dan button ke alert. Tampilan dan source codenya : 


BuatInterfaceTextBoxandButtontoAlert2.html
Kita akan mengambil nilainya tidak dengan getElementById melainkan dengan getElementsByName. Sejatinya sama saja yaitu mengambil nilai cuman beda cara pengambilanya karena ini menggunakan name. Tampilan dan codenya :



BuatInterfaceTextBoxandButtontoAlertto Array.html
Kita akan mengambil 2 inputan dari 2 form lalu dimasukkan ke dalam array dan ditampilkanya di layar menggunakan alert. Tampilan dan source codenya :


BuatInterfacegetElementsByTagName.html
Kali ini kita akan mengambil nilainya melalui tagname. tag name luas jadi jika ada 10 tag <p> maka akan diambil semuanya dari tag <p> tersebut. Disarankan jika ingin mengambil inputan yang banyak dan tidak ribet, kali ini kita akan menggabungkan kedua string manjadi 1 . Tampilan dan source codenya :


Sekian saja pada sesi kali ini, Wassalamualaikum Warahmatullahi Wabarokatuh.

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 36

Assalamualaikum Warahmatullahi Wabarokatuh Halo teman-teman gimana kabarya? semoga sehat selalu ya.. . Pada sesi kali ini kita akan membahas tentang OOP (Object Oriented Programming) pada php. OOP merupakan konsep/metode programming berorientasi pada objek. Jadi didalam OOP semua digambarkan sebagai objek yang di representasikan. Terdiri dari 3 struktur diantaranya : Class, property, dan method/function. Ok kita langsung saja ke materinya. Coba teman-teman buat sebuah file bernama dan berekstensi seperti ini : HewanPeliharaan.php  nah disini kita akan membuat struktur class yang dimana hewan ini memiliki 3 property diantaranya nama, jenis, dan makanan. Untuk lebih jelasnya seperti ini: nama = $nama; $this->jenis = $jenis; $this->makanan = $makanan; } } Tag phpnya tidak perlu ditutup karena ini merupakan class dan kita tidak akan menambahkan code seperti html/js disini. __construct merupakan function yang ada di php, construct ini merupakan bagian code yang akan pertama...
Posting Komentar
Baca selengkapnya

Haikal PG - XI RPL 1 - PWPB Sesi 25

Assalamualaikum Warahmatullahi Wabarokatuh Kembali lagi dengan saya Haikal Putra Gustiansyah yang dimana pada sesi kali ini kita akan membahas array assosiatif dan media query. Array assosiatif merupakan sebuah tipe data yang memungkinkan kita menyimpan data yang memiliki tipe data yang berbeda bisa berupa string,numerik, dll. Media Query merupakan salah satu fitur CSS3 yang memungkinkan kita agar membuat halaman yang web yang responsif. Simak materi pada sesi kali ini. Array Asosiatif Array Asos iatif ad alah  array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Jika tidak ditentukan kunci dari sebuah elemen di array, PHP akan otomatis memberikan kuncinya berupa angka. Perbedaanya hanya bagaimana kita mengakses data/elemen-elemen tersebut. Copykan code berikut: LatArrayAsosiatif.php 'Haikal', '1819117580' => 'Milyardin', '1819117581' => 'Steph~~'); echo $siswa['1819117579'] . ' '; ec...
Posting Komentar
Baca selengkapnya

Haikal PG - XI RPL 1 - PWPB Sesi 7

Assalamualaikum Warahmatullahi Wabarokatuh Kembali lagi dengan saya, disini saya akan membahas kembali tag-tag pada HTML. Pada HTML juga kita bisa menambahkan seperti audio, video, flash dengan tag yang akan saya bahas kali ini. Kita langsung saja mulai tutorialnya : Menambahkan Audio Di HTML kita bisa menambakan audio dengan tag <audio> </audio>. Seperti pada tag img kita juga harus memsukkan sumber lagu dengan attribut src="lagu.mp3". Ada juga attribut untuk memulai musik secara otomatis yaitu autoplay, Attribut untuk controls untuk menampilkan sebuah control spesifik audio, Attribut loop ini untuk mengulang lagu jika lagu sudah selesai. Berikut tampilannya jika di jalankan di browser : Tag audio html Codenya : Haikal Putra Gustiansyah XI RPL 1 Audio Menambahkan Video Selain menambahkan audio kita juga bisa menambahkan video dengan tag <video> </video> dan jangan lupa masukkan sumber video dengan src="". Attribut n...
Posting Komentar
Baca selengkapnya