Showing posts with label JavaScipt. Show all posts
Document Object Model (DOM)
Pada kesempatan kali ini saya akan menjabarkan sedikit tentang DOM atau yang kita kenal sebagai Document Object Model. Kenapa saya mengambil tema ini, karena saya salah menggunakan DOM dan akhirnya program saya tidak berjalan dan untuk menemukan kesalah sekecil ini menghabiskan umur saya sekitar 4 jam. -_- . Okee, kita mulai dari pengertian.
A. Pengertian
Menurut wikipedia Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.B. Sejarah
Sejarah perkembangan Dom menurut wikipedia adalah W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web.C. Metode Penggunaan DOM
1. Finding HTML Elements| Method | Description |
|---|---|
| document.getElementById() | Finding an element by element id |
| document.getElementsByTagName() | Finding elements by tag name |
| document.getElementsByClassName() | Finding elements by class name |
| document.forms[] | Finding elements by HTML element objects |
2. Changing HTML Elements
| Method | Description |
|---|---|
| document.write(text) | Writing into the HTML output stream |
| document.getElementById(id).innerHTML= | Changing the inner HTML of an element |
| document.getElementById(id).attribute= | Changing the attribute of an element |
| document.getElementById(id).style.attribute= | Changing the style of an HTML element |
3. Adding and Deleting Elements
| Method | Description |
|---|---|
| document.createElement() | Create an HTML element |
| document.removeChild() | Remove an HTML element |
| document.appendChild() | Add an HTML element |
| document.replaceChild() | replace an HTML element |
4. Adding Events Handlers
| Method | Description |
|---|---|
| document.getElementById(id).onclick=function(){code} | Adding event handler code to an onclick event |
Nah, semoga dengan penjabaran ini, teman-teman pembaca dapat memahami bagaimana penggunaan DOM, dan saya harap tidak membuang umur selama 4 jam ntuk menemukan kesalahan dalam pembuatan program menggunakan DOM. -_-
Penulis :
Devo Frihandana
Twitter :
@devofrihandana
jQuery Mobile - Untuk Aplikasi Mobile Yang Lebih Baik (Part 1)
Baiklah, pada kesempatan kali ini saya ingin menjelaskan tentang sebuah Framework yang bernama "jQuery Mobile". jQuery Mobile merupakan framework hasil pengembangan dari jQuery dan jQuery-UI. Dasar pengembangan jQuery ini adalah untuk memberikan tampilan yang lebih baik dan responsif dari sebuah web ketika dibuka dari lingkungan perangkat berjalan (Mobile).
Pengembangan jQuery mobile ini memang memberikan perhatian lebih pada pemanfaatan fitur-fitur sentuh yang ada pada Smartphone. Misalkan pendeteksian orientasi device, menangkap event "Tap" atau "Tap & Hold". Semua itu memang ditujukan agar pengembangan aplikasi mobile menjadi lebih baik dan memberikan kenyamanan bagi para pengguna.
Kali ini saya akan menjelaskan tentang penggunaan event "Tap" dan "Tap & Hold"
1. Siapkan struktur lengkap dari jQuery seperti gambar berikut.
Integrasikan file-file tersebut ke halaman index.html dengan benar agar jQuery bisa kita gunakan.
2. Buat file index.html yang berisi kodingan berikut.
3. Perhatikan pada saat penulisan ID dari masing-masing element HTML. Perhatikan pada tag Script. Didalam itulah dituliskan jQuery yang akan kita gunakan untuk menerima event Tap dan TapHold. Perhatikan script berikut.
Ini adalah gaya penulisan pada jQuery untuk menghandle event Tap dan TapHold Tersebut. Kemudian akan dijalankan perintah Alert untuk tap dan perintah mobile.changePage untuk TapHold. Apabila teman-teman belum mengerti gaya penulisan pada jQuery, bisa lihat ke Sini atau ke Sini untuk info lebih lengkap mengenai jQuery.
4. Simpan halaman index.html tersebut dan coba akses dari perangkat mobile. Maka hasilnya lebih dan kurang seperti ini.
Untuk perihal lain mengenai data-role, data-icon, header, footer. Akan dijelaskan pada postingan berikutnya...
Kalo ada yang ingin ditanyakan silahkan komen pada Comment Box... :D
Dengan jQuery, Happy Coding!
Pengembangan jQuery mobile ini memang memberikan perhatian lebih pada pemanfaatan fitur-fitur sentuh yang ada pada Smartphone. Misalkan pendeteksian orientasi device, menangkap event "Tap" atau "Tap & Hold". Semua itu memang ditujukan agar pengembangan aplikasi mobile menjadi lebih baik dan memberikan kenyamanan bagi para pengguna.
Kali ini saya akan menjelaskan tentang penggunaan event "Tap" dan "Tap & Hold"
1. Siapkan struktur lengkap dari jQuery seperti gambar berikut.
2. Buat file index.html yang berisi kodingan berikut.
4. Simpan halaman index.html tersebut dan coba akses dari perangkat mobile. Maka hasilnya lebih dan kurang seperti ini.
Untuk perihal lain mengenai data-role, data-icon, header, footer. Akan dijelaskan pada postingan berikutnya...
Kalo ada yang ingin ditanyakan silahkan komen pada Comment Box... :D
Dengan jQuery, Happy Coding!
AutoComplete - jQuery Yang Melengkapi Harimu...
Kemarin sudah membahas tentang datepicker, yaitu sebuah fungsi dari jQuery (dibaca: jekueri) untuk mempermudah dan mempercantik tampilan dalam mengisi tanggal. Nah, sekarang saya mau membeberkan sebuah fungsi yang powerfull lagi dari jQuery ini. Nama fungsi yang saya maksud adalah "Auto Complete". Jadi ini sebuah fungsi yang berguna untuk melengkapi atau memberikan suggest terhadap masukkan yang kita isikan kedalam form. Sederhananya, misalkan kita tulis "A", maka akan muncul pilihan yang mengandung unsur "A". Mirip dengan yang ada di "Google Search", kan kalau kita ketik muncul suggest dari Google. Seperti itulah kira-kira.
Oke, ayo kita lihat skrip nya langsung. Skrip ini saya ambil langsung dari jQueryui.com
Bagian Tags
Dibagian ini mendeklarasikan fungsi "autocomplete" serta source yang digunakan sebagai wadah yang menyimpan kata-kata yang digunakan untuk proses "Auto Complete". Dimana kita mendefinisikan kata-kata tersebut? Ayo lihat bagian berikutnya.
Bagian Source
Nah, pada bagian ini kita mendefinisikan untuk Souce tersebut. Apabila menggunakan database, silahkan lakukan query dalam [] tersebut. Silahkan bereksperimen saja. Pada contoh ini, Source tersebut diisi dengan kata-kata berupa Bahasa Pemrograman. Sehingga apabila diketikkan sebuah huruf, maka kata-kata dalam Source ini lah yang akan muncul.
Bagian Div
Pada bagian inilah kita mendefinisikan dimana fungsi "Auto Complete" akan dijalankan. Jadi ketika membuat fungsi pada JavaScript kita harus benar-benar memperhatikan pada penulisan "id" dan "class". Karena apabila terjadi kesalahan dalam menggunakan id atau class, maka besar kemungkinan fungsi tersebut tidak jalan. Sehingga proses Auto Complete gagal terlaksana.
Bagian Path File
Nah, kalo yang ini adalah tempat dimana kita mendefinisikan lokasi file jQuery kita, jadi harus ditulis dengan benar, kalau salah maka fungsi dari jQuery tidak akan jalan.
Kalo semua bagian telah disesuaikan dengan benar, maka "Auto Complete" yang cantik telah bisa kita gunakan pada Form yang kita buat. Simple kan?
Bagian terpenting dari skrip ini akan saya bahas satu-persatu.<!doctype html><html lang="en"><head><meta charset="utf-8" /><title>jQuery UI Autocomplete - Default functionality</title><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><script>$(function() {var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];$( "#tags" ).autocomplete({source: availableTags});});</script></head><body><div class="ui-widget"><label for="tags">Tags: </label><input id="tags" /></div></body></html>
Bagian Tags
$( "#tags" ).autocomplete({source: availableTags});
Bagian Source
$(function() {var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
Nah, pada bagian ini kita mendefinisikan untuk Souce tersebut. Apabila menggunakan database, silahkan lakukan query dalam [] tersebut. Silahkan bereksperimen saja. Pada contoh ini, Source tersebut diisi dengan kata-kata berupa Bahasa Pemrograman. Sehingga apabila diketikkan sebuah huruf, maka kata-kata dalam Source ini lah yang akan muncul.
Bagian Div
<div class="ui-widget"><label for="tags">Tags: </label><input id="tags" /></div>
Bagian Path File
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" />
Kalo semua bagian telah disesuaikan dengan benar, maka "Auto Complete" yang cantik telah bisa kita gunakan pada Form yang kita buat. Simple kan?
