Menggunakan obyek navigasi AJAX pada Javascript

<div style="text-align: justify;"> NAVIGASI DENGAN AJAX (MATERI TAMBAHAN)<br />Bentuk lain dari navigasi ini adalah dengan menggunakan obyek AJAX pada Javascript. AJAX, Asynchronous Javascript and XML. AJAX bukan merupakan bahasa pemrograman baru, melainkan kumpulan kelas Javascript yang dapat digunakan salah satunya untuk menampilkan halaman lain tanpa merubah keseluruhan halaman saat ini<br /><br />Dengan obyek ini perpindahan halaman dapat dilakukan tanpa menghilangkan halaman yang sedang dibuka saat ini. Ini perbedaan antara menampilkan halaman dengan AJAX dan cara sebelumnya. Dimana pada saat menunggu halaman yang akan ditampilkan, halaman saat ini tetap terlihat, karena prosesnya terjadi dilatar dan tidak terlihat oleh user.<br /><br />jQuery merupakan salah satu librari yang dapat digunakan untuk menerapkan AJAX ini dengan perintah-perintah yang lebih sederhana. Librari disini maksudnya adalah kumpulan kelas atau obyek yang didalamnya juga berisi fungsi, variabel dan konstanta. Dengan menyertakan librari ini dalam program akan dapat menambah kemampuan aplikasi sebagaimana fitur yang ditawarkan dalam librari tersebut.<br /><br />Website http://jquery.com berisi link untuk mendownload librarinya dan juga ada banyak tutorial yang diberikan yang dapat diikuti untuk penerapan jQuery pada pemrograman halaman web. Sampai saat buku ini ditulis jQuery saat ini telah sampai pada versi 2.0.3.<br /><br />Berikut ini merupakan contoh penerapan librari jQuery untuk menampilkan  halaman lain menggunakan AJAX. Contoh program :<br /> </div> <div style="text-align: justify;"> File: halaman1.html<br /><span style="font-family: "Courier New",Courier,monospace;"><br /><div>Halaman 2 akan ditampilkan dibawah ini menggunakan<br />AJAX<br />jQuery.</div><br /><div id="hal2">Loading...</div><br /><button onclick="tampilkanWeb()">Muat web</button><br /><script src="jquery-2.0.3.js"></script><br /><script><br />function tampilkanWeb(){<br />$('#hal2).load("halaman2.html");<br />}<br /></script></span><br />File: halaman2.html<br /><span style="font-family: "Courier New",Courier,monospace;"><br />Ini contoh halaman 2.<br><br />Selamat datang di Halaman 2.<br></span><br /> </div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguiolK99Ji-O_jVTdRcC3JLoZI5CQvpE5jGPk6LxIHEw5M83ypRMorP0NmmMl4MAlVFD4m6vNSoi34lUsqT3EtIpQUrcuNxFl9Z5yZXAMt2CU1yXGQlSvR0oGznAJ94BBDFKT5bM-yT8I9/s1600/n+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguiolK99Ji-O_jVTdRcC3JLoZI5CQvpE5jGPk6LxIHEw5M83ypRMorP0NmmMl4MAlVFD4m6vNSoi34lUsqT3EtIpQUrcuNxFl9Z5yZXAMt2CU1yXGQlSvR0oGznAJ94BBDFKT5bM-yT8I9/s1600/n+1.png" /></a></div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: 0px; margin-right: 0px; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zRf0kt8FWdOuOwRw5Afdzm_4X10BVIYMovDcCAnqbWxONQsx917YFRn6Pzrl82uY1bWVcZFa6SqNDO0l3YrxHssNv4KBjRDrdc1VSl_xkyLBiC2TMKrVgC8VLR7WsEuAXKNMOg5D4vb-/s1600/n+2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zRf0kt8FWdOuOwRw5Afdzm_4X10BVIYMovDcCAnqbWxONQsx917YFRn6Pzrl82uY1bWVcZFa6SqNDO0l3YrxHssNv4KBjRDrdc1VSl_xkyLBiC2TMKrVgC8VLR7WsEuAXKNMOg5D4vb-/s1600/n+2.png" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Tampilan halaman 1. html setelah memuat halaman 2. html pada div<br />dengan id hal2</td></tr> </tbody></table> <div class="separator" style="clear: both; text-align: justify;"> </div> <div style="text-align: justify;"> Dari hasil percobaan ini dapat dilihat bahwa perubahan hanya terjadi pada tag <div> dengan id hal2 dan tidak pada alamat URL di browser, yang tetap berada pada halaman 1. html. Skrip ini dapat dijalankan apabila ditempatkan sebagai aplikasi server menggunakan web server seperti Apache (dengan menginstall aplikasi XAMPP atau sejenisnya) atau dengan menambahkan argumen --allowfile- access-from-files pada eksekusi browser Google Chrome seperti terlihat pada tampilan berikut</div> <div style="text-align: justify;"> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilqrUxsMzAIyr4NkLvOTXmkY0ix21gguwFsFbHx8cY_EUC655dpnsQyTUOascZ9etkACgAuo2nq5_cgCuYf4-UP53TZe87gaQ_EcF6dZBi9Ywuv4fyZFaHu0wFaJbIg5IgQC5aOoomqx0c/s1600/n+3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilqrUxsMzAIyr4NkLvOTXmkY0ix21gguwFsFbHx8cY_EUC655dpnsQyTUOascZ9etkACgAuo2nq5_cgCuYf4-UP53TZe87gaQ_EcF6dZBi9Ywuv4fyZFaHu0wFaJbIg5IgQC5aOoomqx0c/s320/n+3.png" width="242" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Penambahan argumen eksekusi pada browser Google Chrome</td></tr> </tbody></table> <div style="text-align: justify;"> Setelah menambahkan argumen diatas, halaman HTML dapat dibuka kembali menggunakan browser </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivVM0uzMV0zmq_PCbABhn2tNnEjldCPch6nsCGSD8HN-AFaklAhLzb3yspdHsUBaTIP25QEXLhnP537JFWgMMfTW7TKfVA-kAxqAd5iYdflC4D2TpHDbL9Fz2MOTrXV4x6GQPR53gYafs7/s1600/n+4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivVM0uzMV0zmq_PCbABhn2tNnEjldCPch6nsCGSD8HN-AFaklAhLzb3yspdHsUBaTIP25QEXLhnP537JFWgMMfTW7TKfVA-kAxqAd5iYdflC4D2TpHDbL9Fz2MOTrXV4x6GQPR53gYafs7/s320/n+4.png" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Halaman dengan librari AJAX pada browser Google Chrome</td></tr> </tbody></table> <div style="text-align: justify;"> Google Chrome yang sudah dimodifikasi ini. Hasilnya jika berhasil menambahkan argumen eksekusi diatas adalah sebagai berikut.<br /><br /></div>

NAVIGASI DENGAN AJAX (MATERI TAMBAHAN) Bentuk lain dari navigasi ini adalah dengan menggunakan obyek AJAX pada Javascript. AJAX, Asynchrono...

Perancangan navigasi untuk suatu website

<div style="text-align: justify;"> Navigasi Halaman<br /> Navigasi secara umum dapat digunakan untuk menunjukkan perpindahan dari satu titik ke titik yang lain. Dalam hal ini perpindahan yang dimaksud adalah perpindahan dalam satu halaman ataupun antar halaman web. Wujud dalam halaman web yang tampak adalah dalam bentuk link (tekstual), tombol dan gambar (grafis). Selain menggunakan HTML, navigasi pada halaman web juga  dapat diwujudkan dengan menggunakan program Javascript<br /> <br /> Perancangan navigasi untuk suatu website dapat juga dikenal dengan istilah pembuatan sitemap. Penggambarannya dilakukan dengan terlebih dahulu menentukan halaman utama web, kemudian menentukan link-link apa saja dari yang ada di halaman tersebut dan mengaitkannya. Berikut ini merupakan salah   satu contoh bentuk rancangan sitemap.</div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju02ugjPfDkn4tU6dbdCMjEZQKbiiKYHjIgyX71MQmG2AGikZGotRtkzy0AsAdQms8BmTgGWBwe334qZ83ZPatoxD1r3Mv-h1-ldu9N15q9QBlwlUgpuHml67xULPvlxbnL4qClZ19LEEr/s1600/navi+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju02ugjPfDkn4tU6dbdCMjEZQKbiiKYHjIgyX71MQmG2AGikZGotRtkzy0AsAdQms8BmTgGWBwe334qZ83ZPatoxD1r3Mv-h1-ldu9N15q9QBlwlUgpuHml67xULPvlxbnL4qClZ19LEEr/s400/navi+1.png" width="400" /></a></div> <div style="text-align: justify;"> Pembuatan sitemap ini dapat dilakukan dengan menggunakan aplikasi peta pikiran seperti Freemind, XMind ataupun sejenisnya. Sitemap ini nantinya dapat dijadikan panduan ataupun arah bagi programmer web dalam mengembangkan aplikasinya. Sedangkan untuk user dapat memberikan gambaran secara menyeluruh tentang web yang sedang dikunjungi<br /> <br /> Terdapat sejumlah metode yang dapat digunakan di Javascript untuk berpindah halaman ini, diantaranya adalah :</div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFkHUIGJtvef4XHJoBwfJpPBSd5JJMS69PlkH4hfcD6gjs3HIgvqdqyywlxBYnM5x-ltHrApJ24REQE3QqmGbNdryEPFqvtyWI0utv7j-cskXRoZVo3Inm45Hfk1fk2Dr3C5fAH76QaTe/s1600/navi+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFkHUIGJtvef4XHJoBwfJpPBSd5JJMS69PlkH4hfcD6gjs3HIgvqdqyywlxBYnM5x-ltHrApJ24REQE3QqmGbNdryEPFqvtyWI0utv7j-cskXRoZVo3Inm45Hfk1fk2Dr3C5fAH76QaTe/s400/navi+2.png" width="400" /></a></div> <div style="text-align: justify;"> Contoh:<br /> File: index.html<br /> </div> <div style="text-align: justify;"> <span style="font-family: "courier new" , "courier" , monospace;"><h1>Halaman Index</h1><br /><ul><br /><li<br />onclick="window.location.href='profil.html'">Profil</li><br /><li<br />onclick="window.location.assign('portofolio.html');">Portofo<br />lio</li><br /><li<br />onclick="window.location.replace('kontak.html');">Kontak</li<br />><br /></ul></span><br /> <br /> File: profil.html<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;"><h1>Halaman Profil</h1><br /><ul><br /><li onclick="window.history.back();">Kembali</li><br /></ul></span><br /> <br /> File: portofolio.html<br /> <span style="font-family: "courier new" , "courier" , monospace;"><h1>Halaman Portofolio</h1><br /><ul><br /><li onclick="window.history.back();">Kembali</li><br /></ul></span><br /> <br /> File: kontak.html<br /> <span style="font-family: "courier new" , "courier" , monospace;"><h1>Halaman Kontak</h1><br /><ul><br /><li onclick="window.history.back();">Kembali</li><br /></ul></span><br /> Program diatas ini merupakan salah satu bentuk hasil dari sitemap yang dirancang diatas. Dimulai dari index.html berisikan link menu untuk mengakses halaman lainnya. Terdapat tiga fungsi navigasi yang diterapkan dihalaman ini. Kemudian masing-masing halaman profile.html, portofolio.html dan kontak.html terdapat menu untuk kembali ke halaman index.html. Hal yang membedakan ketiga halaman tersebut adalah hasil dari pemilihan menu Kembali. </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Pada file profile.html dan portofolio.html ketika menu Kembali dipilih browser akan membuka halaman index.html. Hal ini karena browser merekam sejarah navigasi halaman sebelumnya. Sedangkan pada file kontak.html menu Kembali yang dipilih tidak akan membawa user ke halaman index.html. Ini dikarenakan rekaman jejak sejarah file index.html dihapus pada saat pemanggilan fungsi window.location.replace() oleh menu Kontak di file index.html.</div>

Navigasi Halaman Navigasi secara umum dapat digunakan untuk menunjukkan perpindahan dari satu titik ke titik yang lain. Dalam hal ini perp...

Pengaksesan obyek pada halaman web

<div style="text-align: justify;"> Pengaksesan Obyek Pada Halaman Web<br />Setiap elemen HTML yang ada dalam suatu dokumen web oleh Javascript diterjemahkan sebagai obyek HTML. Pada obyek HTML ini terdapat sejumlah fungsi, konstanta ataupun variabel yang dapat diakses untuk mengubah elemen HTML tersebut. Akses terhadap obyek HTML tersebut dapat dilakukan dengan menggunakan fungsi-fungsi berikut</div> <div style="text-align: justify;"> <br /></div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuueOBHI28BQ3eO4sCD_In9CkT_IAvdVpcHuufGqdY95UTufUf3lfjq-dcwr96n1R_J5NAMHqKo1CSpzTho8igOv0ZX51k3eZ05hGpW4FpbtIqP7uhOgcBxfN5mQyoJb-XGfyHVTXIfr1J/s1600/web+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuueOBHI28BQ3eO4sCD_In9CkT_IAvdVpcHuufGqdY95UTufUf3lfjq-dcwr96n1R_J5NAMHqKo1CSpzTho8igOv0ZX51k3eZ05hGpW4FpbtIqP7uhOgcBxfN5mQyoJb-XGfyHVTXIfr1J/s320/web+1.png" width="320" /></a></div> <div style="text-align: justify;"> Ketiga fungsi diatas merupakan bagian dari obyek document. Sehingga obyek document perlu disertakan pada saat memanggil fungsi diatas. Contoh : penggunaan fungsi getElementById()<br /><br /><br /><span style="font-family: "Courier New",Courier,monospace;"><input type="text" id="nilai" /><br /><input type="button" id="btnAmbilNilai" value="Ambil nilai"<br />onclick="ambilNilai();" /><br /><script><br />function ambilNilai(){<br />var objNilai = document.getElementById('nilai');<br />var n = objNilai.value;<br />alert("nilainya adalah " + n);<br />}<br /></script></span><br /><br />Pada contoh diatas ini apabila tombol Ambil nilai diklik, maka obyek input nilai akan diambil menggunakan fungsi document.getElementById() dan selanjutnya, variabel value dari obyek nilai digunakan untuk mengambil data masukkan dari  user agar dapat ditampilkan.<br /> </div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVJeOPdjwWma6Kwu1My0WhuWbyuxF74-cpcvQHK-yehB-4tirahta6S4ZUT1rnIseCHuiikHKp0QAMkhaLMKOGV6Gie6wcyoxv9sH69Z3-YJg2kkrZSo32VXxl8ioJBTDecqqAQI10T_O/s1600/web+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVJeOPdjwWma6Kwu1My0WhuWbyuxF74-cpcvQHK-yehB-4tirahta6S4ZUT1rnIseCHuiikHKp0QAMkhaLMKOGV6Gie6wcyoxv9sH69Z3-YJg2kkrZSo32VXxl8ioJBTDecqqAQI10T_O/s1600/web+2.png" /></a></div> <div style="text-align: justify;"> Contoh : penggunaan fungsi getElementsByName().<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><input type="text" name="nilai" /><br /><input type="button" id="btnAmbilNilai" value="Ambil nilai"<br />onclick="ambilNilai();" /><br /><script><br />function ambilNilai(){<br />var objNilai = document.getElementsByName('nilai')[0];<br />var n = objNilai.value;<br />alert("nilainya adalah " + n);<br />}<br /></script></span><br /><br />Fungsi getElementsByName() sedikit berbeda dengan metode getElementById(), dimana hasil dari metode ini adalah array obyek bukan obyek tunggal. Dengan hasil berupa array ini berarti untuk mengakses elemen pertama digunakan index 0. Disisi lain, dengan hasil array ini dimungkinkan untuk menuliskan elemen HTML dengan nilai atribut name yang sama. Berikut ini merupakan contoh penggunaan fungsi getElementsByName() dengan elemen yang memiliki nama sama lebih dari satu <br /><br /><span style="font-family: "Courier New",Courier,monospace;"><input type="text" name="nilai" /><br /><input type="text" name="nilai" /><br /><input type="button" id="btnAmbilNilai" value="Ambil nilai"<br />onclick="ambilNilai();" /><br /><script><br />function ambilNilai(){<br />var obj1 = document.getElementsByName('nilai')[0];<br />var obj2 = document.getElementsByName('nilai')[1];<br />var n1 = obj1.value;<br />var n2 = obj2.value;<br />alert("nilai pertama adalah " + n1);<br />alert("nilai kedua adalah " + n2);<br />}<br /></script</span>><br /><br />Hasilnya:<br /></div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpbLHB6P8rX8F6Nk2S4TLQJyTbd7iQvpmqvclGCE6hjkPHV9vU8_ltDrq0h8e8-AvmPDZeQzXZrydrM0J49zAcIaORPesj_YKnQX_p61ImPID8GE2R4a2j3xJgYC2-bcNS4Gl1IF3S6Fn/s1600/web+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpbLHB6P8rX8F6Nk2S4TLQJyTbd7iQvpmqvclGCE6hjkPHV9vU8_ltDrq0h8e8-AvmPDZeQzXZrydrM0J49zAcIaORPesj_YKnQX_p61ImPID8GE2R4a2j3xJgYC2-bcNS4Gl1IF3S6Fn/s1600/web+3.png" /></a></div> <div style="text-align: justify;"> Selanjutnya untuk fungsi getElementsByTagName(), berikut ini diberikan contoh skripnya.<br /><span style="font-family: "Courier New",Courier,monospace;"><br /><input type="text" name="nilai" /><br /><input type="button" id="btnAmbilNilai" value="Ambil nilai"<br />onclick="ambilNilai();" /><br /><input type="text" name="hasil" /><br /><script><br />function ambilNilai(){<br />// mengambil obyek input text pertama<br />var obj1 = document.getElementsByTagName('input')[0];<br />// mengambil obyek input button<br />var obj2 = document.getElementsByTagName('input')[1];<br />// mengambil obyek input text kedua<br />var obj3 = document.getElementsByTagName('input')[2];<br />// mengambil nilai input text pertama dan button<br />var s1 = obj1.value;<br />var s2 = obj2.value;<br />// menampilkan nilai pada input text kedua<br />obj3.value = s1 + s2;<br />}<br /></script></span><br /></div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvoYcVIembSBVjCVhGTUjkSlfIJ4yz6BnDmdRP8JZfrym8IREEeqS1x_UGXvbVNqHeS11J_FqMA0esS2xSG-WdiT4TaAbCiBKQ8u5TsoANx9XWh6bX6U8TfIfX5Frddhgp1_xcADTu3Tx/s1600/web+4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvoYcVIembSBVjCVhGTUjkSlfIJ4yz6BnDmdRP8JZfrym8IREEeqS1x_UGXvbVNqHeS11J_FqMA0esS2xSG-WdiT4TaAbCiBKQ8u5TsoANx9XWh6bX6U8TfIfX5Frddhgp1_xcADTu3Tx/s1600/web+4.png" /></a></div> <div style="text-align: justify;"> Hasil akhir dari skrip ini mirip dengan contoh sebelumnya, hanya cara mengambil nilainya yang berbeda. Oleh karena tombol juga dibuat menggunakan tag <input> maka nilainya dapat diakses menggunakan fungsi ini. Berikutnya untuk obyek input text yang kedua digunakan untuk menampilkan isi dari input text pertama dan input button.</div>

Pengaksesan Obyek Pada Halaman Web Setiap elemen HTML yang ada dalam suatu dokumen web oleh Javascript diterjemahkan sebagai obyek HTML. Pa...

Pengertian event dalam Javascript

<div style="text-align: justify;"> <b>Interaksi User</b><br />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 adalah sebuah kejadian interaksi antara user dengan halaman web. Bentuk interaksi ini dapat digambarkan seperti pada saat user melakukan klik pada tombol ataupun link, mengetik username dan password dan sebagainya.<br /><br />Event ini pada HTML ditambahkan dalam bentuk atribut dari elemen yang ada. Program javascript yang ditempatkan pada atribut tersebut akan dijalankan pada saat interaksi yang bersesuaian terjadi. Berikut ini merupakan daftar atribut yang dapat digunakan untuk mengolah interaksi user<br /></div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwxERItrLeXpUe2F8I13k1CVQ_TfVhnQM1tqYeyM8AWf_CGt_RsyitkMP_dg-PqpS0eAnIarh7odwYZOZ8GjG7dRvFGkwLR45bxp-BBhzQP6qmgF88tZ7b5I0-tTA7kX6tS9HuOKQq72t/s1600/at.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwxERItrLeXpUe2F8I13k1CVQ_TfVhnQM1tqYeyM8AWf_CGt_RsyitkMP_dg-PqpS0eAnIarh7odwYZOZ8GjG7dRvFGkwLR45bxp-BBhzQP6qmgF88tZ7b5I0-tTA7kX6tS9HuOKQq72t/s400/at.png" width="400" /></a></div> <div style="text-align: justify;"> </div> <br /> <br /> <div style="text-align: justify;"> </div> <div class="separator" style="clear: both;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhaMaAvjw4CdBWYhCYaqvcrjvTJ_9c0KX1_Gv76NIRwNVvJxB22UokrqjhkeTC-2GMDjZGmjzJ1pBDfVab9rFcUHuD3YBzVaTQKfCE29L1mgazKbXc2Y2QuUjC0Vz4zf5KV0K2FrImnQj/s1600/at+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhaMaAvjw4CdBWYhCYaqvcrjvTJ_9c0KX1_Gv76NIRwNVvJxB22UokrqjhkeTC-2GMDjZGmjzJ1pBDfVab9rFcUHuD3YBzVaTQKfCE29L1mgazKbXc2Y2QuUjC0Vz4zf5KV0K2FrImnQj/s400/at+2.png" width="290" /></a></div> <br /> <div class="separator" style="clear: both;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvon06nPKLlywix2drmPZGXRz7zax8SunM_DJFrKR-EBkm2cxuNPDxeZiP6p0_29bwtXcIhYBzIQbls_XwNwAwErSl1tL3eQ3gofDEsVKPpscsZg4aSK-ONXYI83agazM5ONZVpIt4AnE5/s1600/at+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvon06nPKLlywix2drmPZGXRz7zax8SunM_DJFrKR-EBkm2cxuNPDxeZiP6p0_29bwtXcIhYBzIQbls_XwNwAwErSl1tL3eQ3gofDEsVKPpscsZg4aSK-ONXYI83agazM5ONZVpIt4AnE5/s320/at+3.png" width="320" /></a></div> Format penerapan kode Javascript pada atribut event diatas sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><tag atribut-event=”kode javascript;;” … > … </tag></span><br />atau untuk tag tanpa penutup<br /><span style="font-family: "Courier New",Courier,monospace;"><br /><tag atribut-event=”kode javascript;;” … /></span><br />Contoh program penerapan event pada halaman web.<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><a href=”http://kompas.com” onclick=”alert(‘Link ini akan<br />membuka halaman Kompas.com’);;”>Link 1</a></span><br /><br />Pada contoh diatas, apabila user melakukan klik pada Link 1, maka akan ditampilkan alert(). Selanjutnya pada contoh berikut ini sudah melibatkan fungsi di Javascript. Dimana apabila nilai dari input text berubah, maka alert() akan tampil dengan mengambil nilai yang diketikkan oleh user.<br /><br /><span style="font-family: "Courier New",Courier,monospace;"><script><br />function sayHalo(){<br />var nm = document.getElementById('nama').value;<br />alert("Halo, " + nm);<br />}<br /></script><br /><input type="text" id="nama" onchange="sayHalo();" /></span><br /><br />Pernyataan document.getElementById(‘id elemen’).value adalah perintah javascript untuk mengambil nilai input dari elemen form.<br />

Interaksi User Adanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna untuk menggunakan aplikasi yang dikembangkan. Di b...

PBO Pemrograman Berbasis Prototipe

Pemrograman Berorientasi Obyek (PBO)<br /> Pemrograman berorientasi 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 sebelumnya seperti modularitas, polimorfisme, dan 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<br /> <br /> Dalam PBO setiap program akan menyatakan kumpulan dari obyek dan bukan lagi kumpulan fungsi ataupun kumpulan baris kode. Pada PBO ini setiap obyek memiliki kemampuan untuk menerima pesan, memproses data dan mengirim data ke obyek lainnya. Setiap obyek dapat dilihat sebagai program sendiri yang memiliki peran dan tanggungjawab masing-masing. Pengembangan program dengan menggunakan teknik PBO ini populer dalam program berskala besar karena fleksibel dan memudahkan dalam perbaikan.<br /> <br /> PBO: Pemrograman Berbasis Prototipe<br /> 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 prototipe atau berbasis instan.<br /> <br /> Javascript Object Oriented Programming<br /> <br /> <br /> 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.<br /> <br /> Obyek Buatan<br /> 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.<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">function NamaKelas () {<br />}<br /><br />Atau dalam bentuk yang lebih lengkap<br /><br />function NamaKelas (argumen1, argumen2, …, argumenN)<br />{<br />this.namavar1 = nilaiInisial;<br />this.namavar2 = nilaiInisial;<br />…<br />this.namaFungsi1 = function(parameter1, parameter2, …,<br />parameterN){<br />…<br />}<br />…</span><br /> }<br /> <br /> Hal yang dapat diperhatikan pada format diatas adalah namavar1 dan namavar2 merupakan properti dari kelas tersebut. Pembuatan properti dari suatu obyek dilakukan dengan menambahkan kata kunci this di awal dari nama properti tersebut, seperti diperlihatkan dalam format diatas. Sedangkan pembuatan metode atau fungsi dari obyek dilakukan dengan cara yang sama hanya dengan properti dengan menambahkan definisi fungsinya dengan menggunakan kata kunci function. Pembuatan obyek dari kelas yang telah didefinisikan diatas dapat dilakukan dengan menggunakan format berikut.<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;">var namaObyek = new NamaKelas ( ) ;</span><br /> <br /> Kemudian untuk mengakses properti ataupun metode yang dimiliki oleh suatu obyek dapat dengan menggunakan operator titik (.) setelah nama obyek diikuti nama properti atau metodenya. Mengenai aturan penamaan kelas dapat mengikuti aturan penamaan fungsi pada materi sebelumnya, contohnya ditunjukan dibawah ini.<br /> <br /> <span style="font-family: "courier new" , "courier" , monospace;"><script><br />function SegiEmpat(){<br />this.panjang = 0;<br />this.lebar = 0;<br />this.hitungLuas = function(){<br />var luas = this.panjang * this.lebar;<br />return luas;<br />}<br />this.hitungKeliling = function(){<br />var kel = 2 * (this.panjang + this.lebar);<br />return kel;<br />}<br />}<br />// contoh pengunaannya<br />var s = new SegiEmpat();<br />s.panjang = 4;<br />s.lebar = 3;<br />alert(s.hitungLuas());<br />alert(s.hitungKeliling());<br /></script></span><br /> <br /> Apabila pembuatan dilakukan dengan menggunakan format yang pertama, bentuk definisinya akan seperti berikut.<br /> <span style="font-family: "courier new" , "courier" , monospace;"><br /><script><br />function SegiEmpat(){ }<br />SegiEmpat.prototype.panjang = 0;<br />SegiEmpat.prototype.lebar = 0;<br />SegiEmpat.prototype.hitungLuas = function(){<br />var luas = this.panjang * this.lebar;<br />return luas;<br />}<br />SegiEmpat.prototype.hitungKeliling = function(){<br />var kel = 2 * (this.panjang + this.lebar);<br />return kel;<br />}<br />// contoh pengunaannya<br />var s = new SegiEmpat();<br />s.panjang = 4;<br />s.lebar = 3;<br />alert(s.hitungLuas());<br />alert(s.hitungKeliling());<br /></script</span>><br /> <br /> Dari contoh diatas dapat dilihat ada penggunaan kata kunci prototype pada obyek yang dibuat untuk menambahkan properti ataupun metodenya<br /> <br />

Pemrograman Berorientasi Obyek (PBO) Pemrograman berorientasi obyek adalah sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, p...

Bentuk-bentuk dari blok fungsi dalam pemrograman

<div style="text-align: justify;"> Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk mengelompokkan program dalam menyelesaikan suatu kasus, proses atau rumus aritmatika tertentu. Dengan pengertian yang sama pengelompokkan kode ini juga sering disebut subprogram (program bagian), prosedur ataupun metode. Dalam javascript semuanya itu disebut fungsi, karena Javascript hanya menyediakan satu kata kunci untuk membuat fungsi ini, yaitu function.<br /><br />Fungsi dalam proses pemanggilannya (eksekusi) ada yang membutuhkan data tertentu agar dapat berjalan. Data tertentu yang perlu diberikan saat pemanggilan fungsi ini dikenal dengan nama parameter. Setiap fungsi dapat tidak memiliki atau memiliki lebih dari satu parameter.<br />Aturan penamaan fungsi mengikuti aturan penamaan variabel. Bentuk dari blok fungsi adalah sebagai berikut<br /><br /><span style="font-family: "Courier New",Courier,monospace;">function nama_fungsi ( parameter1, parameter2, ...,<br />parameterN )<br />{<br />kode program sebagai definisi fungsi<br />return nilai_balik_jika_ada;<br />}</span><br />Keterangan :<br />nama_fungsi: nama dari fungsi yang akan dibuat parameter1...N: merupakan syarat yang diperlukan oleh fungsi tersebut untuk dapat berjalan. Suatu fungsi juga dapat tidak memiliki parameter, artinya dapat dijalankan tanpa syarat. return: perintah untuk membelikan hasil operasi dari fungsi ke user. nilai_balik_jika_ada: nilai hasil operasi dari fungsi. Suatu fungsi dapat juga tidak memiliki nilai balik. Jika tidak memiliki nilai balik maka pernyataan return dapat ditiadakan. Untuk menjalankan program yang ada dalam fungsi tersebut kita dapat memanggilnya dengan cara, sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">varHasil = nama_fungsi ( nilai_parameter1, nilai_parameter2,<br />..., nilai_parameterN ) ;</span><br />Keterangan :<br />varHasil: variabel yang dapat digunakan untuk menampung nilai balik dari fungsi yang dipanggil bila ada.<br />Dilihat dari hasil akhirnya fungsi dalam javascript dibedakan jadi dua, yakni fungsi yang memiliki nilai balik dan tidak. Nilai balik disini maksudnya adalah nilai hasil operasi yang dijalankan didalam fungsi diberikan ke bagian program lainnya untuk diproses lebih lanjut. Nilai balik dalam javascript dinyatakan dengan menggunakan kata kunci return. Contoh kasusnya dalam program penghitung luas dan volume limas. Dimana dalam perhitungan volume juga terdapat menyertakan perhitungan luas didalamnya. Dengan kata lain untuk menghitungvolume limas kita harus menghitung luas alasnya terlebih dahulu. Dalam program, proses ini diterjemahkan sebagai berikut.<br /><br /><span style="font-family: "Courier New",Courier,monospace;">var panjang = 5;<br />var lebar = 3;<br />var tinggi = 4;<br />var luasAlas;<br />var volume;<br />luasAlas = panjang * lebar;<br />volume = luasAlas * tinggi / 2;</span><br />Apabila diubah dalam bentuk fungsi program diatas akan menjadi<br /><br /><span style="font-family: "Courier New",Courier,monospace;">function hitungLuasAlas ( p, l ) {<br />var luas = p * l;<br />return luas;<br />}<br />function hitungVolume ( la, t ) {<br />var vol = la * t / 2;<br />return vol;<br />}<br />var panjang = 5;<br />var lebar = 3;<br />var tinggi = 4;<br />var luasAlas;<br />var volume;<br />luasAlas = hitungLuasAlas(panjang, lebar);<br />volume = hitungVolume(luasAlas, tinggi);<br />alert(luasAlas);<br />alert(volume);</span><br /><br />Contoh : fungsi tanpa nilai balik<br /><br /><span style="font-family: "Courier New",Courier,monospace;">function sapa(nama){<br />alert("Halo, " + nama);<br />}<br />sapa(“bintang”);</span><br /><br />Contoh fungsi tanpa parameter.function sayHalo(){</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <span style="font-family: "Courier New",Courier,monospace;">alert("Halo");<br />}<br />sayHalo();</span></div>

Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk mengelompokkan program dalam menyelesaikan suatu kasus, proses atau...

Struktur kontrol Perulangan for, while dan do-while untuk menjalankan kode program

<div style="text-align: justify;"> <b>Struktur Kontrol Perulangan</b><br />Perulangan merupakan struktur yang memungkinkan untuk menjalankan kode program yang sama beberapa kali dengan menggunakan suatu kondisi tertentu. Perulangan dalam javascript memiliki tiga bentuk, yakni perulangan for, while dan  do-while.<br /><br />Perulangan for<br />Perulangan ini memiliki bentuk sebagai berikut<br /><br /><span style="font-family: "Courier New",Courier,monospace;">for ( inisialisasi; kondisi; peubah ) {<br />baris program 1;<br />baris program 2;<br />…<br />}</span><br /><br />Perulangan while<br />Perulangan ini memiliki bentuk sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">while ( kondisi ) {<br />kode program yang ingin dijalankan berkali-kali;<br />}</span><br /><br />Perulangan do-while<br />Perulangan ini memiliki bentuk sebagai berikut :<br /><br /><span style="font-family: "Courier New",Courier,monospace;">do {<br />kode program yang ingin dijalankan berkali-kali;<br />} while( kondisi );</span><br /><br />Dari ketiga bentuk perulangan diatas hanya for yang memerlukan pernyataan inisialisasi dan peubah. Inisialisasi disini digunakan sebagai bagian penentuan variabel yang akan digunakan untuk mengendalikan jumlah perulangan yang akan dilakukan. Peubah adalah operasi aritmatika yang dapat dilakukan untuk mengubah nilai variabel penentu tersebut. Sedangkan kondisi disini digunakan untuk menentukan kapan suatu blok perulangan dijalankan berdasarkan nilai dari variabel penentu tersebut. Cara kerja dari perulangan for tersebut dapat digambarkan dengan menggunakan diagram alur berikut</div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYTkI_JKElycwEbojaQ-QGa8QejeUIK7Mo05BCJyegC8Pfoy-KuuIUkftIYgrt2-r4FG0BScm9x0hq4hJxV7WufYQgfUZVeX2gf9p6Ln1LwMyXAd_OZOWH76QY0BnJFn-je665sBzSdo-t/s1600/per.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYTkI_JKElycwEbojaQ-QGa8QejeUIK7Mo05BCJyegC8Pfoy-KuuIUkftIYgrt2-r4FG0BScm9x0hq4hJxV7WufYQgfUZVeX2gf9p6Ln1LwMyXAd_OZOWH76QY0BnJFn-je665sBzSdo-t/s320/per.png" width="283" /></a></div> <div style="text-align: justify;"> Secara umum untuk setiap kasus perulangan dapat diterapkan dengan menggunakan ketiga bentuk tersebut. Contohnya, kita dapat membuat perulangan untuk menampilkan pesan "Halo javascript" hingga 3 kali dengan menggunakan ketiga perulangan tersebut.<br /><br /><span style="font-family: "Courier New",Courier,monospace;">for (var i = 0; i < 3; i++) {<br />document.write("Halo javascript 1<br>");<br />}<br />var j = 0;<br />while ( j < 3 ) {<br />document.write("Halo javascript 2<br>");<br />j += 1;<br />}<br />var k = 0;<br />do {<br />document.write("Halo javascript 3<br>");<br />k++;<br />} while ( k < 3 );</span></div>

Struktur Kontrol Perulangan Perulangan merupakan struktur yang memungkinkan untuk menjalankan kode program yang sama beberapa kali dengan m...