PWPB - Pertemuan 16 (Javascript)

Assalamu'alaikum Wr. Wb
Salam sejahtera bagi kita semua...

Halo semua, balik lagi di SekolahQue. Kali ini kita akan membahas tentang PBO (Pemrograman Beriorentasi Obyek) dan UI (USERINTERFACE). Jika kalian belum tahu apa sih itu PBO?

PBO (Pemrograman Beriorentasi 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 teknik sebelumnya seperti modularitas, polimorfisme, dan enkapsulasi. Saat ini ada banyak bahasa pemrograman yang telah mendukung PBO (Pemrograman Beriorentasi Obyek) ini, seperti C++, C#, Java, Javascript, PHP, Phyton, Ruby, dan Objective C.

Javascript menggunakan PBO dengan model pemrograman berbasis prorotype. 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, beriorentasi prototipe atau berbasis instan.

OBYEK UTAMA (BAWAAN)

Javascript memiliki banyak obyek bawaan seperti Math, Array, String dan 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 anda gunakan untuk mendefinisikan kelas pada javascript.

Penjelasan tentang Interaksi User (USER INTERFACE):

Berikut ini merupakan daftar atribut yang dapat digunakan untuk mengolah interaksi user:

Pengaksesan obyek pada halaman Web.

Kalau begitu langsung saja kita mulai pembahasan dan kodingannya...
(Klik setiap judul tugas untuk mengetahui codingan-codingannya).

• BuatInterfaceTextboxtoAlert.html + JS Internal + CSS 

Pada interface yang pertama ini kita akan mencoba memasukkan nilai kedalam form input seperti yang tertera di bawah ini. Contohnya saat saya memasukan nama atau angka apapun lalu tekan enter pada keyboard kalian dan program secara otomatis akan menampilkan sebuah pop-up atau alert yang berisikan nama yang baru saja saya masukkan. Dan pada codingan, bukannya penggunaan document.getElementsById itu harus menggunakan attribut Id pada sebuah tag <p id="id></p> di HTML. Sedangkan dalam codingan id pada tag html dengan javascript berbeda.
Jawabannya adalah pada document.getElementsById tersebut ditambahkan properti .value yang artinya id yang kita simpan disitu sudah menjadi nilai true.

SCREENSHOT:

•  BuatFungsiPBO.html + JS Internal + CSS

Disini kita menerapkan properti function PBO, jika yang belum tahu apa itu function / dalam bahasa Indonesia disebut fungsi anda bisa lihat di Pertemuan 15. 

Hasilnya tidak jauh berbeda dengan codingan interface yang diatas. Tetapi yang membedakannya adalah penggunaan sintaks pada javascriptnya. Jika yang datas menggunakan UI sedangkan ini kita menggunakan function.

SCREENSHOT:

• BuatFungsiPBO2.html + JS Internal + CSS

Pada fungsi PBO ke-2 ini kita akan menghitung luas, lebar, panjang, dan volume dari segiempat. Meski tidak nilai tidak diinputkan oleh user setidaknya kita memahami seperti apa pembuatan program aritmatika. Buat kalian yang kurang suka dengan mata pelajaran Matematika tetapi kalian jago atau mahir dalam hal coding. Kalian bisa membuat suatu program tentang aritmatika sehingga pelajaran matematika pun jadi lebih seru.

Pada codingan terdapat properti return yang berarti nilai balik suatu variabel. Jika kalian belum mengetahuinya kalian bisa melihat penjelasannya di pertemuan 15.

Dan apabila keluaran atau outputnya berada dalam pop-up dan tidak bisa di design menggunakan CSS kalian bisa menambahkan document.getElementsById. Lalu, kalian tinggal tambahkan variabelnya supada nilai atau keluaran dapat tampil di halaman web. Seperti dibawah ini...

SCREENSHOT:

 Penggunaan document.getElementsById... 

• BuatInterfaceTextBoxandButtontoAlert.html + JS Internal + CSS

Pada tugas yang satu ini sama saja seperti buat fungsi PBO di atas. Ketika user memasukan nilai berapapun lalu menekan button atau tombol, maka secara otomatis program akan menjalankan dan memunculkan pop-up atau alert yang berisikan keluaran dari angka yang barusan user input.

SCREENSHOT: 

• BuatInterfaceTextBoxandButtontoAlert2.html + JS Internal + CSS

Untuk yang kedua ini hasilnya atau keluaran (output) sama persis seperti yang diatas. Akan tetapi yang membedakannya adalah jika program / codingan toAlert yang pertama menggunakan getElementsById sedangkan toAlert yang kedua ini menggunakan getElementsByName. Seperti penggunaan pada id sebelumnya, getElementsByName pun sama harus ditambahkan attribute name di HTML.

SCREENSHOT:

• BuatInterfaceTextBoxandButtontoAlerttoArray.html + JS Internal + CSS

Pada tugas yang satu ini saya menggunakan UI dan Array, seperti yang kita tahu urutan pada Array dimulai dari angka 0. Jika yang belum tahu apa itu Array, kalian bisa melihatnya di Pertemuan 13.

Cara membuktikan bahwa program ini bekerja adalah, user memasukan angka berapapun ke form pertama yang berwarna navajowhite. Setelah itu, user masukan angka berapapun ke dalam form kedua yang berwarna royalblue. Setelah itu, klik button atau tombol dan secara otomatis program akan berjalan dan memunculkan sebuah pop-up atau dalam bahasa pemrograman disebut alert yang memunculkan nilai atau keluaran (output) yang baru saja user input.

SCREENSHOT:

• BuatInterfacegetElementsByTagName.html + JS Internal + CSS

Pada UI ByTagName ini, berbeda dengan penggunaan getElementsByName. Karena, penggunaan ByTagName ini tidak perlu ditambahkan attribute di HTML-nya ataupun menambahkan .value di belakang parameter element. Dan cara program ini berkerja yaitu user memasukan angka hanya pada form pertama saja yang berwarna navajowhite. Kenapa sih engga kedua-dua? Sebenarnya bisa...

akan tetapi form kedua dibuat untuk menampilkan nilai atau keluaran (output) serta menampilkan teks "Ambil nilai" setelah button atau tombol di tekan.

SCREENSHOT:

Sekian dulu ya guys...
Mohon maaf apabila materi yang saya jelaskan membingungkan serta terdapat sebuah kesalahan, karena sesuai dengan deskripsi blog ini "kita belajar bersama!" dalam artian saya juga sama masih belajar...
Semangat dalam belajar dan coba dirumah...


Assalamu'alaikum Wr. Wb.