Firman Webs

Home All post with category Basic

jQuery Efek fadeIn dan fadeOut Page Load Blog

Monday 10 February 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGFPW6O89UjLG-Z1OMxwWzgSJZq0EQDWcR-IXwKjF4oI-m3ZYCFTDI5MJEvljE33oYQvcTDII3xu-kyvlhKcTNsfAkEDz3t1p1TcstughA1CBo83EILRyHZHBhyPPgp8BNVG_iJu0HM/s1600/fadein-fadeout-page-load.gif" class="center" ><img alt="jQuery Efek fadeIn dan fadeOut Page Load Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGFPW6O89UjLG-Z1OMxwWzgSJZq0EQDWcR-IXwKjF4oI-m3ZYCFTDI5MJEvljE33oYQvcTDII3xu-kyvlhKcTNsfAkEDz3t1p1TcstughA1CBo83EILRyHZHBhyPPgp8BNVG_iJu0HM/s1600/fadein-fadeout-page-load.gif" title="jQuery Efek fadeIn dan fadeOut Page Load Blog"/></a><b>jQuery Efek fadeIn dan fadeOut Page Load Blog</b> – tulisan ini saya latar belakangi karena semula page load blog ini yang lumayan lambat karena banyaknya javascript yang saya gunakan sehingga pada saat loading membuka halaman tampilannya sedikit terganggu dan terlihat kurang rapi. Untuk mengatasi hal ini maka timbul inspirasi untuk menutupi kekurangan tersebut agar pada saat halaman blog terbuka sudah dalam tampilan seutuhnya sesuai tata letak masing-masing elemen. Namun perlu diketahui, ini bukan berarti mempercepat loading blog akan tetapi hanya memanipulasi halaman pada saat proses loading sehingga saat browser memuat (membaca javascript yang tergolong lama) dan terkadang menyebabkan tampilan halaman sedikit acak-acakan maka supaya tidak terlihat saya menggunakan cara ini untuk menutupi kemungkinan tersebut. Mungkin apabila di antara kalian ada yang mengalami masalah seperti halnya dengan blog ini, bisa menggunakan cara ini sebagai alternatife untuk memanipulasi halaman dengan membuat efek fadeIn dan fadeOut agar setiap kali pengunjung masuk dan menjelajahi blog dengan link yang ada maka setiap kali browser memuat halaman akan menampilkan efek halaman yang memudar terlebih dahulu dan saat halaman terbuka sudah dalam tampilan yang rapi pastinya.  <h2>Efek fadeIn Page Load Blog</h2>Efek ini yang saya gunakan pada blog ini, demonya bisa di lihat saat membuka salah satu halaman di blog ini. Walaupun sederhana namun lumayan untuk memanipulasi loading halaman blog. Script yang di gunakan seperti dibawah ini, cara memasangnya masuk ke Edit HTML lalu taruh di atas kode <code></body></code><pre><br /><script type='text/javascript'><br />$(document).ready(function () {<br /> $('body').hide().fadeIn(5000).delay(500)<br />});<br /></script><br /></pre>Script diatas sudah bisa berjalan. Namun biasanya setelah layout blog sudah nampak terlihat akan tetapi efek baru akan mulai berjalan. Untuk menghilangkan terlebih dahulu, bisa menggunakan CSS <code>body{display:none}</code> untuk menyembunyikan body sebelum script berjalan. <h2>Efek fadeIn dan fadeOut Page Load Blog</h2>Untuk yang ini dengan sedikit tambahan efek pada saat keluar dari halaman (meninggalkan halaman). Pada saat berpindah halaman maka akan timbul efek fadeOut atau halaman akan memudar terlebih dahulu sebelum ke link halaman berikutnya. Cara kerja dari script di bawah adalah menyeleksi seluruh link yang ada pada halaman blog tersebut, sehingga mungkin apabila pada blog tersebut terdapat salah satu link untuk menampilkan lightbox atau modal dialog mungkin akan bentrok dan salah satu dari efek tersebut tidak berjalan. Untuk menerapkannya kedalam blog caranya sama seperti langkah di atas, dengan menaruhnya di atas kode <code></body></code><pre><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function () {<br /> $("body").css("z-index", "-10");<br /> $("body").fadeIn(5000);<br /> $("a").click(function (event) {<br />  event.preventDefault();<br />  linkLocation = this.href;<br />  $("body").fadeOut(1000, redirectPage);<br /> });<br /><br /> function redirectPage() {<br />  window.location = linkLocation;<br /> }<br />});<br />//]]><br /></script><br /></pre><div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/page-load.html" target="_blank" rel="nofollow" title="illustrasi efek fadeOut"><span><i class="fa fa-eye"></i></span>DEMO</a></div>Namun sebelum menerapkan cara di atas juga perlu dipastikan bahwa di template blog juga sudah terpasang jQuery, bisa menggunakan versi terbaru atau bisa juga versi dibawahnya. <pre><br /><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><br /></pre>Apabila sebelumnya sudah terdapat kode tersebut maka abaikan saja kode diatas karena tidak perlu memasangnya lagi.

jQuery Efek fadeIn dan fadeOut Page Load Blog – tulisan ini saya latar belakangi karena semula page load blog ini yang lumayan lambat karen...

Penggunaan jQuery Toggle, fadeToggle dan slideToggle

Monday 3 February 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lmfYugaS1fnn52ZecOGh68uFrJUTomg_BP0i2xPDSEzVfrIHjirC3CzVDBNDhXJmrs6FJFVKaQOovhLhSnOojgTHHPSrfT6r-2LcWFEn4p_O6SK2eBhVsisg0q5D-ByOaoWOL_6_alY/s1600/jquery-toggle.gif" class="center" ><img alt="Penggunaan jQuery Toggle, fadeToggle dan slideToggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lmfYugaS1fnn52ZecOGh68uFrJUTomg_BP0i2xPDSEzVfrIHjirC3CzVDBNDhXJmrs6FJFVKaQOovhLhSnOojgTHHPSrfT6r-2LcWFEn4p_O6SK2eBhVsisg0q5D-ByOaoWOL_6_alY/s400/jquery-toggle.gif" title="Penggunaan jQuery Toggle, fadeToggle dan slideToggle"/></a><b>Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle</b> – kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yang tidak lain adalah sebuah tombol yang berfungsi untuk menampilkan atapun menyembunyikan elemen. Namun sebelum lebih lanjut ke tuorial ada baiknya kita pahami terlebih dahulu tentang apa itu jQuery serta cara menggunakannya. Agar lebih leluasa melakukan kontrol pada halaman web/blog pastikan terlebih dahulu sudah terpasang jQuery didalam template blog dan hanya menerapkan satu jQuery saja terserah mau menggunakan yang versi berapa, namun usahakan untuk menggunakan versi yang lebih baru. Karena versi yang terbaru adalah perbaikan dari bug yang terdapat pada versi sebelumnya. Versi terbaru jQuery saat ini adalah <code>jquery-1.10.2</code>. Untuk memasang jQuery didalam template bisa menaruhnya diatas kode <code></head></code> atau bisa juga di atas <code></body></code>. <pre><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/></pre>Apabila sudah ada satu jQuery yang sudah terpasang didalam template, maka abaikan saja kode diatas. Sekarang kembali ke pokok bahasan untuk menerapkan jQuery Toggle, fadeToggle dan slideToggle. Metode ini sudah tidak asing lagi dan sering digunakan untuk membuat sedikit efek pada elemen tertentu didalam sebuah template. Agar mudah dipahami ada baiknya jika kita bahas satu per satu dari masing-masing efek tersebut. <blockquote class="info">Sebelum menentukan efek yang akan dipasang, terlebih dahulu sembunyikan elemen yang sudah anda pilih. Gunakan CSS property <code>display:none</code>, bukan <code>visibility:hidden</code>. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metode <code>toggle()</code>, <code>fadeToggle()</code> ataupun <code>slideToggle()</code>.</blockquote><h2>Penggunaan jQuery Toggle</h2>jQuery Toggle digunakan untuk membuat efek <code>show()</code> dan <code>hide()</code> yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode <code>toggle()</code>. Syntax yang di gunakan seperti dibawah ini: <pre>$(selector).toggle(speed,easing,callback)</pre><h3>Contoh:</h3>Apabila di presentasikan contoh penulisannya script untuk menyembunyikan dan menampilkan suatu elemen seperti dibawah ini: <pre data-codetype="CSS"><br />#btn1{<br />padding:5px 15px;<br />background:#2ecc71;<br />color:#fff;<br />border:none;<br />cursor:pointer;<br />display:inline-block<br />}<br />#contoh1{<br />display:none;<br />text-align:center;<br />background:#2ecc71;<br />color:#fff;<br />padding:50px 0<br />}<br /></pre><pre data-codetype="HTML"><br /><button id='btn1'>Toggle</button><br /><div id='contoh1'>Contoh penggunaan jQuery toggle</div><br /></pre>Default <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#btn1").click(function(){<br />    $("#contoh1").toggle();<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan menambahkan parameter speed <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#btn1").click(function(){<br />    $("#contoh1").toggle(1000);<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt blue" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle-speed.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan menambahkan parameter callback <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#btn1").click(function(){<br />    $("#contoh1").toggle(1000,function(){<br />      alert("Pesan ini muncul setelah toggle selesai berjalan");<br />    });<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt red" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle-callback.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h2>Penggunaan jQuery fadeToggle</h2>Metode <code>fadeToggle()</code> digunakan untuk memunculkan efek <code>fadeIn()</code> dan <code>fadeOut()</code> pada elemen yang sudah ditentukan. Syntax yang digunakan seperti dibawah ini: <pre>$(selector).fadeToggle(speed,easing,callback)</pre><h3>Contoh:</h3>Untuk menambahkan parameter speed maupun callback langkahnya sama seperti pada metode <code>toggle()</code>. <pre data-codetype="CSS"><br />#bton1{<br />padding:5px 15px;<br />background:#D94839;<br />color:#fff;<br />border:none;<br />cursor:pointer;<br />display:inline-block<br />}<br />#gambar{<br />display:none;<br />text-align:center;<br />padding:10px;<br />background:#E74C3C;<br />border:5px solid #fff<br />}<br />#gambar img{<br />width:300px;<br />height:200px;<br />border:5px solid #fff<br />}<br /></pre><pre data-codetype="HTML"><br /><button id='bton1'>fadeToggle</button><br /><div id="gambar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDlRtgrPxSOuOPaTxbPyrZE0n-FRovNoXAVXzbJBWQ-8F6kAtTxd2ufcn7W8_-t0BOISZ0vLjQI9F1h90ZCSLeEVXmbhDgu3AITtVNDO8NqxUTJF2OPyqeOZsEF_U5pBFpW0HNi-3uzLw/h200/Paramore+%287%29.jpg"/></div><br /></pre><pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#bton1").click(function(){<br />    $("#gambar").fadeToggle();<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt purple" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/fadetoggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h2>Penggunaan jQuery slideToggle</h2>Fungsinya sama seperti metode <code>toggle()</code> dan <code>fadeToggle()</code>, hanya saja efeknya yang berbeda. Metode <code>slideToggle()</code> digunakan untuk membuat efek <code>slideDown()</code> dan <code>slideUp()</code>. Syntax yang digunakan seperti dibawah ini: <pre>$(selector).slideToggle(speed,easing,callback)</pre><h3>Contoh:</h3>Contoh sederhana untuk deklarasi penulisannya script seperti dibawah ini: <pre data-codetype="CSS"><br />#buton1{<br />padding:5px 15px;<br />background:#D94839;<br />color:#fff;<br />cursor:pointer;<br />display:inline-block<br />}<br />#contoh2{<br />display:none;<br />text-align:center;<br />background:#E74C3C;<br />color:#fff;<br />padding:50px 0<br />}<br /></pre><pre data-codetype="HTML"><br /><div id="buton1">slideToggle</div><br /><div id="contoh2">Contoh penggunaan jQuery slideToggle</div><br /></pre>Default <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#buton1").click(function(){<br />    $("#contoh2").slideToggle();<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt orange" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan Menambahkan parameter speed <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#buton1").click(function(){<br />    $("#contoh2").slideToggle(1000);<br />  });<br />});<br /></pre><div class="bt-grup"><a class="bt red" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle-speed.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan Menambahkan parameter callback <pre data-codetype="jQuery"><br />$(document).ready(function(){<br />  $("#buton1").click(function(){<br />    $("#contoh2").slideToggle(1000,function(){<br />      alert("Pesan ini muncul setelah slideToggle selesai berjalan");<br />    });<br />  });<br />});<br /></pre> <div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle-callback.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h3><i class="fa fa-cogs"></i> Konfigurasi:</h3><table>  <tr><th>Parameter</th><th>Deskripsi</th></tr>   <tr><td><em>speed</em></td><td>Opsional. Untuk menentukan kecepatan efek.<p>Value:</p><ul> <li>milidetik (contoh: <code>1000</code>, <code>2000</code>, dst).</li> <li><code>"slow"</code></li> <li><code>"fast"</code></li></ul></td></tr><tr><td><em>easing</em></td><td>Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing"<p>Value:</p><ul> <li><code>"swing"</code> bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah.</li> <li><code>"linear"</code> bergerak dalam kecepatan konstan.</li></ul></td></tr><tr><td><em>callback</em></td><td>Opsional. Fungsi yang akan dieksekusi setelah metode <code>toggle()</code>, <code>fadeToggle()</code> ataupun <code>slideToggle()</code> sudah selesai berjalan. </td></tr></table>

Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle – kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yan...

Penggunaan Javascript Font Replacement (Cufon)

Wednesday 22 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusFqeaQAIJ0o4IrtQmAAU_zKC2HxRqdIs5WykmCajHOccDDZyqDKiDhHl_L8yL2ke-DOj-XhlXBy98nizloFzvjrqS6YA67ha75iwLu1iqSrUoQMMR9isOzlZCGgAQMSXrOLTlcqvGf0/s1600/Cufon.jpg"><img alt="Penggunaan Javascript Font Replacement (Cufon)" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusFqeaQAIJ0o4IrtQmAAU_zKC2HxRqdIs5WykmCajHOccDDZyqDKiDhHl_L8yL2ke-DOj-XhlXBy98nizloFzvjrqS6YA67ha75iwLu1iqSrUoQMMR9isOzlZCGgAQMSXrOLTlcqvGf0/s1600/Cufon.jpg" title="Penggunaan Javascript Font Replacement (Cufon)" width="550" /></a><b>Penggunaan Javascript Font Replacement (Cufon)</b> – ini merupakan javascript yang sering digunakan oleh para web developer untuk merender jenis font yang digunakan secara cepat dan mudah menggunakan fungsi canvas dan VML untuk menggantikan fungsi dari sebuah teks yang menggunakan metode image. Teks yang sudah di replace menggunakan cufon yui akan secara otomatis berubah menjadi canvas, atau secara awamnya teks tersebut sudah tidak bisa di block layaknya seperti sebuah gambar. Apabila di klik kanan pada mouse bisa dilihat menggunakan view image dan secara otomatis teks tersebut sudah convert kedalam sebuah gambar base64 yang bisa anda lihat pada address web browser. Kenapa bisa begitu? Karena Cufon yui adalah javascript yang bisa mengganti jenis font dengan menggunakan fungsi canvas dan VML dari browser kita tanpa perlu flash atau gambar. Cufon terdiri dari dua bagian individu yaitu sebuah generator font yang mengubah font untuk format proprietary dan sebuah mesin rendering yang ditulis dalam javascript. Cara untuk menggunakannnya pun cukup mudah, karena dari situs cufon juga sudah menyediakan tool generator yang siap digunakan untuk merender font atau anda juga bisa secara langsung download jenis font yang sudah ada.<br /><br />Untuk bisa menggunakan cufon, pasang terlebih dahulu kode berikut ini kedalam template blog taruh di atas kode <code></head></code><br /><pre><script type='text/javascript' src='http://cufon.shoqolate.com/js/cufon-yui.js'/><br /><script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Vegur_300.js'/><br /><script type='text/javascript'><br />Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true });<br /></script></pre><blockquote class="atas">Perhatikan pada baris ini:<br /><pre>http://faceblog-evolutions.googlecode.com/files/Vegur_300.js</pre>Anda bisa menggantinya dengan URL font lain. Caranya agar lebih mudah bisa langsung download Cufon Kit di [www.cufonfonts.com] kemudian Upload ke Google code atau tempat penyimpanan lainnya yang dapat di gunakan untuk menyimpan file.js<br /><br />Pada baris ini adalah syntax yang digunakan untuk fungsi merender font:<br /><pre>Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true });</pre>Pada <code>#target_element</code> anda bisa merubahnya dengan elemen yang anda inginkan. Sebagai contoh misalkan untuk merender tag <code>h1</code>, <code>h2</code>, <code>h3</code> maupun <code>#id</code> dan <code>.class</code> target maka contoh penulisaannya seperti berikut ini:<br /><pre>Cufon.replace('h1, h2, h3, #target_element, .target_element', { fontFamily: 'Vegur', hover: true });</pre>Sedangkan pada <code>fontFamily: 'Vegur'</code> anda bisa menyesuikannya dengan nama font yang digunakan.</blockquote><h2>Penggunaan Cufon Lebih Dari Satu</h2>Anda juga bisa menggunakan lebih dari satu jenis cufon untuk target yang berbeda. Misalkan ingin menggunakan dua jenis font yakni Vegur dan Bebas Neue, maka contoh penulisannya seperti dibawah ini: <br /><pre><script src='http://cufon.shoqolate.com/js/cufon-yui.js' type='text/javascript'/><br /><script src='http://faceblog-evolutions.googlecode.com/files/Vegur_300.js' type='text/javascript'/><br /><script src='http://faceblog-evolutions.googlecode.com/files/bebas-neue.js' type='text/javascript'/><br /><script type='text/javascript'><br />Cufon.replace('h1, .title', { fontFamily: 'Vegur', hover: true });<br />Cufon.replace('h2, .sidebar', { fontFamily: 'Bebas Neue', hover: true });<br /></script></pre><h2>Agar Cufon Support Internet Explorer (IE)</h2>Pada browser Internet Explorer Cufon tidak bekerja sebagai mana mestinya, karena pada saat pergantian font terjadi jeda (delay). Untuk mengatasi masalah tersebut solusinya tambahkan kode berikut ini diatas tag <code></body></code>.<br /><pre><script type='text/javascript'> Cufon.now(); </script></pre>

Penggunaan Javascript Font Replacement (Cufon) – ini merupakan javascript yang sering digunakan oleh para web developer untuk merender jeni...

Post Snippet Pengganti Script Auto Readmore Blogger

Monday 20 January 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xE1RsfzIRKdYHUCGdiINJ3be4D98slUZ60-GDFYEDNhv7eg1scPP_RFzoBdffuCZBlitubm8v8Zw5Nx04zbwefL0Te3z76wKG3mCR6aE1bvC2EnjHZduslfyFpbDRWj3TWvfJ9NpY4/s1600/post-snippet.gif" class="center"><img alt="Post Snippet Pengganti Script Auto Readmore Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xE1RsfzIRKdYHUCGdiINJ3be4D98slUZ60-GDFYEDNhv7eg1scPP_RFzoBdffuCZBlitubm8v8Zw5Nx04zbwefL0Te3z76wKG3mCR6aE1bvC2EnjHZduslfyFpbDRWj3TWvfJ9NpY4/s1600/post-snippet.gif" title="Post Snippet Pengganti Script Auto Readmore Blogger" width="550" /></a><b>Post Snippet Pengganti Script Auto Readmore Blogger</b> – banyak metode untuk memotong teks artikel yang ditampilkan pada homepage. Cara yang paling banyak digunakan dan popupler adalah menggunakan script auto read more, namun ada juga yang masih menggunakan cara manual dengan metode jump break yang disediakan pihak blogger pada area posting mode Compose dan tag <code></code> pada posting mode HTML. Alternatife lain yang akan saya bahas pada tutorial ini adalah menggunakan metode <code>data:post.snippet</code> untuk memotong post artikel dan <code>data:post.thumbnailUrl</code> untuk memanggil gambar dari post tersebut. Cara ini menurut saya lebih simple karena tidak memerlukan javascript untuk memotong artikel secara otomatis. Namun setiap metode pasti memiliki kelemahan masing-masing, begitu pula dengan cara ini. Jika suatu post tidak memiliki thumbnail maka jumlah karakter yang akan ditampilkan adalah 140 karakter dan jika post yang memiliki thumbnail maka karakter yang ditampilkan adalah 100 karakter. Entah bagaimana untuk mengubah dan menentukan jumlah batasan karakter tersebut saya sendiri masih mencari tahu akan hal ini.<br /><br />Untuk penerapannya kedalam template, sebagai patokan saya menggunakan default template blogger agar lebih mudah dan bisa dimengerti. Untuk yang sudah menggunakan script auto read more bisa menyesuaikan.<br />Langkahnya cari kode <code><b:includable id='post' var='post'></code> maka dibawahnya akan terdapat dua kode <code><data:post.body/></code>, kemudian replace kode <code><data:post.body/></code> yang kedua dengan kode berikut ini:<pre><data:post.body/><br /><b:else/><br /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><br /><data:post.body/><br /><b:else/><br /><b:if cond='data:post.hasJumpLink'><br /><data:post.body/><br /><b:else/><br /><b:if cond='data:post.snippet'><br /><b:if cond='data:post.thumbnailUrl'><br /><div class='thumb'><br /><a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a><br /></div><br /><b:else/><br /><div class='thumb'><br /><a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyPod3GKxBs188Z2Y_RvvHGsXXV2yrGGt8THbUXGX_fts5jOZOc1ZC7hKxOoK6AKRkVzXSnvc-nnlu1mAWG_HjyyEvmYYbicFpWhAu9kvNTWQL3fGqjXLvT0MbFc_UlftQ5Xn7RxOY0VY/h120/no-image.jpg'/></a><br /></div><br /></b:if><br /><data:post.snippet/><br /><div class='jump-link'><br /><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a><br /></div><br /><b:else/><br /><data:post.body/><br /></b:if><br /></b:if><br /></b:if><br /></b:if></pre>Untuk mengatur tampilannya anda bisa menambahkan kode CSS seperti dibawah ini dan taruh di atas kode <code>]]></b:skin></code> <pre>.thumb img{float:left;margin-right:10px;width:72px;height:72px}<br />.jump-link{display:inline;float:right;padding:5px;background:#ddd;margin-top:20px}</pre>Diatas hanya dasarnya, untuk merubah tampilan lebih lanjut atur pada bagian CSS dengan penambahan background, border, dll agar lebih sesuai dengan yang di inginkan.

Post Snippet Pengganti Script Auto Readmore Blogger – banyak metode untuk memotong teks artikel yang ditampilkan pada homepage. Cara yang p...

Konsep OOP di Javascript

Wednesday 5 December 2012

<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"> </span></b></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Hampir semua konsep OOP bisa digunakan di Javascript. Javascript memerlukan elemen-elemen yang tampil dijendela browser sebagai suatu obyek. Elemen diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa mengetahui dimana letak/lokasi obyek itu sebenarnya. Elemen diasosiasikan dengan kondisi atau sifat- sifat khusus (properti).</span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><br /><span style="font-family: "Cambria","serif";">Contoh ilustrasi : </span></div><ul><li>Kebun</li><ul><li>Pohon</li><ul><li>Dahan</li><ul><li>Daun</li><ul><li>Sarang Burung</li><ul><li>Panjang = 20</li><li>Warna = Kuning</li><li>Tinggi = 4</li></ul></ul></ul><li>Batang</li><li>Akar</li></ul><li>Sangkar Ternak</li><ul><li>Ayam</li><li>Bebek</li></ul></ul></ul> <br /><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Dari ilustrasi diatas,</span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Sarang burung yang berada diatas poon dapat dituliskan sebagai berikut :</span></div><blockquote class="tr_bq"><div class="MsoNormal" style="font-family: "Courier New",Courier,monospace; margin-bottom: 0.0001pt; text-align: justify;">Kebun.Pohon.Dahan.Sarang Burung</div></blockquote><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Bila ingin mengganti warna sarang burung yang terletak diatas pohon, maka perintahnya :</span></div><blockquote class="tr_bq"><div class="MsoNormal" style="font-family: "Courier New",Courier,monospace; margin-bottom: 0.0001pt; text-align: justify;">Kebun.Pohon.Dahan.Sarang Burung.warna=hijau</div></blockquote> <br /><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: justify;"><span style="font-family: "Cambria","serif";">Sekian dulu dari saya. Semoga bermanfaat.</span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Silahkan bertanya jika ada yang ingin ditanyakan !</span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"> </span>   </div>

Hampir semua konsep OOP bisa digunakan di Javascript. Javascript memerlukan elemen-elemen yang tampil dijendela browser sebagai suatu obyek...

3 hal penting di elemen Javascript PROPERTI

<br /><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Properti adalah atribut dari sebuah objek. Penulisannya dipisahkan dengan tanda titik (.) : </span></div><div class="MsoNormal" style="margin-bottom: 0cm; text-align: center;"><span lang="IN" style="font-family: "Cambria","serif";"><span style="font-family: "Courier New",Courier,monospace;">Nama_objek.nama_properti</span></span><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"> </span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Properti dapat diberi nilai, penulisannya : </span></div><div class="MsoNormal" style="margin-bottom: 0cm; text-align: center;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"><span style="font-family: "Courier New",Courier,monospace;">Nama_objek.properti = nilai</span><span style="mso-spacerun: yes;"> </span></span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Contoh : </span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1dbjXPjg94g9EYJnwlDwc9x_bLLxNu4T9ieeIU10l3Qlz5NtUGEa7k4EnyfzigUxDpkr3KrOhs2AzMSNe_u582Sg-DqFOYb2Fh51XUlZvTsQHyyzVXiIcVFCaj6sHoJUY1mMY_olxdrg/s1600/1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1dbjXPjg94g9EYJnwlDwc9x_bLLxNu4T9ieeIU10l3Qlz5NtUGEa7k4EnyfzigUxDpkr3KrOhs2AzMSNe_u582Sg-DqFOYb2Fh51XUlZvTsQHyyzVXiIcVFCaj6sHoJUY1mMY_olxdrg/s320/1.gif" width="320" /></a></div></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><br /><b><span lang="IN" style="font-family: "Cambria","serif";"><span style="color: lime;">Metode</span></span></b></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Properti adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisannya (dipisahkan dengan tanda “.”): </span></div><div class="MsoNormal" style="margin-bottom: 0cm; text-align: center;"><span lang="IN" style="font-family: "Cambria","serif";"><span style="font-family: "Courier New",Courier,monospace;">Nama_obvjek.nama_metode(“parameter”)</span></span><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"></span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Contoh : </span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEeF03oMeOi5bY0U94JikdmZDJ1Zpwp7wNW8mS_WJAHi1G7xKivi0a-hyMNs5I5_GmjjHaANHHgLXq8i2iPRn8noUOogPnPKZNoMdkxCv8bmyRU9an8D4KZqW4Bwosw41v01LdEotJqXI/s1600/2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEeF03oMeOi5bY0U94JikdmZDJ1Zpwp7wNW8mS_WJAHi1G7xKivi0a-hyMNs5I5_GmjjHaANHHgLXq8i2iPRn8noUOogPnPKZNoMdkxCv8bmyRU9an8D4KZqW4Bwosw41v01LdEotJqXI/s320/2.gif" width="320" /></a></div></div><div class="MsoNormal" style="color: lime; margin-bottom: 0cm; text-align: justify;"><br /><b><span lang="IN" style="font-family: "Cambria","serif";">Penanganan Kejadian (Event Handler) </span></b></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Penanganan kejadian adalah sekumpulan kode yang akan dijalankan manakala pemakai melakukan suatu tindakan/ kejadian, misalnya mengklik tombol mouse atau ketika menutup jendela browser. </span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Penulisannya : nama_kejadian =“kumpulan kode” </span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Kumpulan kode dapat berisi sejumlah pernyataan, antara pernyataan dipisahkan titik koma</span><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"> ;</span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><br /></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Contoh : </span></div><blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><HTML><HEAD><TITLE>Kejadian</TITLE> </div><div style="font-family: "Courier New",Courier,monospace;"></HEAD> </div><div style="font-family: "Courier New",Courier,monospace;"><BODY> </div><div style="font-family: "Courier New",Courier,monospace;"><H1>Tes Kejadian</H1> </div><div style="font-family: "Courier New",Courier,monospace;"><P>Cobalah meletakan penunjuk mouse dari link berikut dan perhatikan isi baris status </P> </div><div style="font-family: "Courier New",Courier,monospace;"><A HREF =“http://mas-andes.blogspot.com”  onMouseOver = “Window.status ='Anda menyorot link, lho'; </div><div style="font-family: "Courier New",Courier,monospace;">Return true”  onMouseOut = “Window.status =' ';    Return true”>Fujitsu</A> </div><span style="font-family: "Courier New",Courier,monospace;"></BODY></HT</span>ML></blockquote> <br /><div class="MsoNormal" style="color: lime; margin-bottom: 0cm; text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Pemasukan Data </span></b><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"><span style="mso-spacerun: yes;"> </span></span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Javascrip memiliki mekanisme yang memungkinkan pemakai disuguhi jendela untuk memasukan sederetan masukan setelah pemakai mengklik tombol OK, maka kode dalam Javascript akan melakukan serangkaian proses. </span></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Contoh : </span></div><blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><HTML><HEAD> </div><div style="font-family: "Courier New",Courier,monospace;"><TITLE>Pemasukan Data</TITLE> </div><div style="font-family: "Courier New",Courier,monospace;"></HEAD> </div><div style="font-family: "Courier New",Courier,monospace;"><BODY> </div><div style="font-family: "Courier New",Courier,monospace;"><SCRIPT LANGUAGE =“Javascript”> </div><div style="font-family: "Courier New",Courier,monospace;"><! - -  Var nama = prompt(“Siapa nama Anda?”); Document.write(“Hai, “+nama); </div><div style="font-family: "Courier New",Courier,monospace;">// - - > </div><div style="font-family: "Courier New",Courier,monospace;"></SCRIPT>  </BODY> </HTML></div></blockquote> <br /><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"><span style="color: lime;">Jendela Peringatan</span> </span></b></div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Jendela Peringatan<span style="mso-spacerun: yes;">  </span></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: justify;"></div><blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><HTML><HEAD></div><div style="font-family: "Courier New",Courier,monospace;"><TITLE>Alert Box</TITLE> </div><div style="font-family: "Courier New",Courier,monospace;"></HEAD> </div><div style="font-family: "Courier New",Courier,monospace;"><BODY> </div><div style="font-family: "Courier New",Courier,monospace;"><SCRIPT LANGUAGE = “Javascript”> </div><div style="font-family: "Courier New",Courier,monospace;"><!- -  Window.alert(“Ini merupakan pesan untuk Anda”); </div><div style="font-family: "Courier New",Courier,monospace;">// - -> </div><div style="font-family: "Courier New",Courier,monospace;"></SCRIPT>    </BODY> </HTML></div></blockquote> <br /><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><b><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"><span style="color: lime;">Jendela Konfirmasi</span> </span></b></div><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Jendela Konfirmasi</span> <br /><blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><HTML><HEAD></div><div style="font-family: "Courier New",Courier,monospace;"><TITLE>Konfirmasi</TITLE> </div><div style="font-family: "Courier New",Courier,monospace;"></HEAD> </div><div style="font-family: "Courier New",Courier,monospace;"><BODY> </div><div style="font-family: "Courier New",Courier,monospace;"><SCRIPT LANGUAGE = “Javascript”> </div><div style="font-family: "Courier New",Courier,monospace;"><!- -  Var jawaban = window.confirm(“Anda ingin meneruskan?”); </div><div style="font-family: "Courier New",Courier,monospace;">documen,.write(“Jawaban Anda: “ + jawaban); </div><div style="font-family: "Courier New",Courier,monospace;">// - - > </div><span style="font-family: "Courier New",Courier,monospace;"></SCRIPT>  </BODY> </HTML></span> </blockquote> <br /><div class="MsoNormal" style="color: lime; margin-bottom: 0.0001pt; text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Konsep Variabel </span></b></div><ul style="text-align: justify;"><li><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Variabel adalah suatu objek yang berisi data, yang mana dapat dimodifikasi selama pengeksekusian program. </span></li><li><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Aturan pemberian nama variabel : </span></li><li><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter<span style="mso-spacerun: yes;">  </span>“_”. </span></li><li><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Nama variabel bisa terdiri dari huruf, angka atau karakter _ dan & (spasi kosong tidak diperbolehkan). </span></li><li><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Nama variabel tidak boleh memakai nama yang digunakan dalam reserved program seperti: abstract, boolean, break,<span style="mso-spacerun: yes;">  </span>byte, if, implements, import, in, infinity,<span style="mso-spacerun: yes;">  </span>instanceof, int,<span style="mso-spacerun: yes;">  </span>interface, dll. </span></li></ul> <div class="MsoNormal" style="color: lime; margin-bottom: 0.0001pt; text-align: justify;"><b><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Mendeklarasikan Variabel </span></b></div><ul style="text-align: justify;"><li><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari</span><span lang="IN" style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"> </span><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">variabel : var test = “halo” </span></li><li><span lang="IN" style="font-family: "Cambria","serif"; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;">Implisit : dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel : test = “halo” </span><span style="font-family: "Cambria","serif"; mso-ansi-language: EN-US; mso-ascii-theme-font: major-latin; mso-hansi-theme-font: major-latin;"></span></li></ul><blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><SCRIPT language=“Javascript”> </div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;"><! – </div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;">Var VariabelKu; </div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;">Var VariabelKu2 = 3; </div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;">VariabelKu = 2; </div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;">Document.write (VariabelKu*VariabelKu2); </div><div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; text-align: justify;">// - - ></div></blockquote>   <span lang="IN" style="font-family: "Cambria","serif";"><br /></span>

Properti adalah atribut dari sebuah objek. Penulisannya dipisahkan dengan tanda titik (.) : Nama_objek.nama_properti Properti dapat diberi...