Materi Pekan 3 Fase 0
Mempelajari DOM, Dev Tools, SVG, dan mengenal komunitas developer
Materi Hacktiv8 pekan ini sebagian besar bercerita mengenai DOM. Apa itu sebenarnya DOM? DOM adalah sebuah singkatan dari Document Object Model, untuk lebih jelasnya mari simak artikel di bawah ini :
Document Object Model (DOM) merupakan antarmuka pemrograman untuk dokumen HTML dan XML (juga SVG) terkait. Dengan DOM, kita bisa mengetahui dan mengatur struktur representasi dokumen melalui program terutama JavaScript. Program dapat mengolah struktur, style, dan isi dari dokumen tersebut. Maka dari itu DOM membutuhkan dan menghubungkan antara dokumen dan kode pemrograman.
Seperti yang telah diketahui sebelumnya bahwa hampir semua hal di JavaScript adalah objek, maka begitupun pada HTML yang kita ketahui melalui DOM. Kombinasi interaksi antarmuka antara DOM dan JavaScript ini juga dapat dilakukan karena adanya Application Programming Interface (API). API memungkinkan sebuah program berkomunikasi dengan program yang lain dengan cara tertentu. Dengan API, bahasa selain JavaScript seperti Python dan Ruby jadi bisa juga mengakses dokumen HTML dan XML.
DOM API di HTML umumnya adalah untuk node ataupun objek element, document, dan window. Setiap hal tersebut memiliki berbagai property (nilai) dan method (aksi), bahkan bisa juga dipasang sebuah penangan kejadian (event handler) sehingga jika ada kejadian tertentu dilakukan suatu statement akan dijalankan. Urutan atau strukturnya diatur secara hierarkis seperti pohon berikut.
Hubungan antar berbagai "object" tersebut atau yang akan kita sebut seterusnya dengan "node" adalah antara parent untuk yang di atasnya, children untuk yang di bawahnya, dan sibling yang hierarkinya sama.
Jadi secara garis besar, DOM adalah semua element dalam dokumen yang memiliki keterkaitan satu sama lain. Dengan memahami apa itu DOM, kita selanjut nya bisa menjelajahi DOM, mengubah value dari DOM, ataupun memberikan style sesuai keinginan kita.
Pada DOM juga terdapat istilah event, yaitu ineraksi antara user dan web page. Misal saat user mengklik tombol kiri pada suatu elemen di page, itulah yang disebut dengan Event. Sedangkan jika ada reaksi dari elemen tersebut atas tindakan user, berarti elemen tersebut telah dimodifikasi dengan DOM Event Listener.
Dev Tools merupakan sebuah alat built-in khusus yang biasanya terdapat pada browser kita. Dev tools ini berfungsi alat bantu kita dalam memahami susunan elemen dan informasi dari sebuah webpage. Pada devtools ini juga terdapat fungsi memudahkan debugging. Untuk akses ke Dev Tools bawaan browser, bisa dengan cara tekan Ctrl+Shift+i atau Ctrl+shift+j . Dev tools pun akan segera terpampang pada browser kita. Ada sebuah tutorial pada Code School dari Google jika kita berminat untuk mengenal devtools lebih jauh. Pengoperasiannya relatif mudah dan user-friendly. Sangat bermanfaat bagi kita sebagai calon developer untuk dapat belajar banyak dengan dev tools.
1. Mengenal DOM, Event dan Event Listener
Seperti yang telah diketahui sebelumnya bahwa hampir semua hal di JavaScript adalah objek, maka begitupun pada HTML yang kita ketahui melalui DOM. Kombinasi interaksi antarmuka antara DOM dan JavaScript ini juga dapat dilakukan karena adanya Application Programming Interface (API). API memungkinkan sebuah program berkomunikasi dengan program yang lain dengan cara tertentu. Dengan API, bahasa selain JavaScript seperti Python dan Ruby jadi bisa juga mengakses dokumen HTML dan XML.
DOM API di HTML umumnya adalah untuk node ataupun objek element, document, dan window. Setiap hal tersebut memiliki berbagai property (nilai) dan method (aksi), bahkan bisa juga dipasang sebuah penangan kejadian (event handler) sehingga jika ada kejadian tertentu dilakukan suatu statement akan dijalankan. Urutan atau strukturnya diatur secara hierarkis seperti pohon berikut.
window:frame,parent,self,tophistorylocationdocumentelement:body,h1,p,button, dll
Hubungan antar berbagai "object" tersebut atau yang akan kita sebut seterusnya dengan "node" adalah antara parent untuk yang di atasnya, children untuk yang di bawahnya, dan sibling yang hierarkinya sama.
Jadi secara garis besar, DOM adalah semua element dalam dokumen yang memiliki keterkaitan satu sama lain. Dengan memahami apa itu DOM, kita selanjut nya bisa menjelajahi DOM, mengubah value dari DOM, ataupun memberikan style sesuai keinginan kita.
Pada DOM juga terdapat istilah event, yaitu ineraksi antara user dan web page. Misal saat user mengklik tombol kiri pada suatu elemen di page, itulah yang disebut dengan Event. Sedangkan jika ada reaksi dari elemen tersebut atas tindakan user, berarti elemen tersebut telah dimodifikasi dengan DOM Event Listener.
2. Mengenal Dev Tools
Dev Tools merupakan sebuah alat built-in khusus yang biasanya terdapat pada browser kita. Dev tools ini berfungsi alat bantu kita dalam memahami susunan elemen dan informasi dari sebuah webpage. Pada devtools ini juga terdapat fungsi memudahkan debugging. Untuk akses ke Dev Tools bawaan browser, bisa dengan cara tekan Ctrl+Shift+i atau Ctrl+shift+j . Dev tools pun akan segera terpampang pada browser kita. Ada sebuah tutorial pada Code School dari Google jika kita berminat untuk mengenal devtools lebih jauh. Pengoperasiannya relatif mudah dan user-friendly. Sangat bermanfaat bagi kita sebagai calon developer untuk dapat belajar banyak dengan dev tools.
3. Mengenal SVG
SVG adalah singkatan dari Scalable Vector Graphic. Dengan menggunakan SVG, kita bisa membuat gambar format vector pada web ! keren ! Bagi yang belum tahu, secara umum format gambar dalam web terbagi menjadi 2, yaitu raster dan vector. Contoh gambar yang berformat raster adalah foto. Lebih spesifik lagi, setiap gambar yang terdiri dari pixel pixel disebuat gambar raster, gambar raster memiliki ciri-ciri akan pecah dan buram jika mengalami pembesaran.
Berbeda dengan gambar vector, format ini tidak akan mengalami blur atau pecah jika mengalami pembesaran. Hal ini dapat terjadi dikarenakan vector tidak tersusun atas pixel rigid yang akan muncul jika mengalami pembesaran.
Maka dari itu sangat diharapkan kita menguasai teknik ini agar bisa membuat gambar dengan format vector sesuai yang kita inginkan.
4. Mengenal Komunitas Developer
Menjadi seorang programmer tentunya akan dihadapkan pada permasalahan-permasalahan terkini di bidang teknologi pemrograman. Akan ada banyak update terbaru dari ilmu ini ataupun kabar-kabar terkini yang akan sangat berguna bagi pekerjaan kita jika kita tau hal tersebut. Dalam hal ini, keberadaan sebuah komunitas yang dapat menunjang karir kita merupakan sebuah solusi. Dengan adanya komunitas, kita bisa saling berbagi mengenai info terbaru, update ilmu dan teknologi terbaru, serta saling sharing masalah pemrograman. Bahkan dengan adanya komunitas kita bisa berbagi info mengenai job offer atau project lain yang akan menguntungkan kita.
5. Membuat Blog Post
Sejujurnya week 3 sudah lewat dari sepekan yang lalu, tapi apa daya baru bisa diselesaikan sekarang karena waktu belajar yang tidak efektif serta dikejar-kejar kantor untuk delivery tugas dan data-data karena sudah mau resign. Jadwal belajar pun jadi tidak berjalan dengan baik, ditambah tugas yang menurut saya agak sulit. dan adanya kesalahpahaman konsep(menggunakan jQuery di script tanpa refer link) di awal membuat saya frustasi duluan dengan tugas di week 3. Maka dari itu blog post saya cukupkan sampai sini karena mau mengejar materi week 4. Terima kasih.
Tidak ada komentar:
Posting Komentar