Articles by "Javascript"

Showing posts with label Javascript. Show all posts

2:14 AM , ,
[left-post]
Cara Pasang Password Artikel Blogger
Memasang password untuk artikel blog sepertinya menarik. Jadi, pengunjung harus memasukkan password yang benar untuk melihat artikel yang kita sembunyikan. Apa yang dapat Anda sembunyikan? Bisa teks, bisa juga gambar. Artikel sejenis ini sudah terbit dua tahun yang lalu. Saya menulis artikel ini lagi karena telah ada versi baru JavaScript yang digunakan. Selain itu juga, baru-baru ini +kampungjasa Incku alias Friska Lee menambahkan saya ke dalam lingkaran G+ nya. Iseng-iseng saya lihat halaman G+ nya dan menemukan artikel Buka-artikel-full-dengan-password, namun sayang hanya demo adapun tutornya belakangan, janji Fiska Lee. Siapa tahu ada yang tidak sabar jadi saya buatkan tutorialnya :)

Lihat DEMO

Bagi Anda yang penasaran ikuti saja tutorial Cara Memasang Password Artikel Blogger berikut ini.

  1. Mula-mula tanam JavaScript berikut dalam <head> template Anda, letakkan saja di atas </head> lalu simpan template.

    <script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>
  2. Selanjutnya tentu Anda harus menulis artikel seperti biasa. Setelah artikel selesai Anda buat, Cut bagian artikel yang ingin dipasangkan password. Lalu, pergilah ke http://www.vincentcheung.ca/jsencryption/
  3. Dalam kolom Key masukkan password yang Anda kehendaki
  4. Dalam kolom Plain Text, Paste bagian artikel yang telah Anda Cut tadi
  5. Klik tombol Encrypt
  6. Hasil enkripsi dapat Anda lihat pada kolom Chiper Text, abaikan bagian ini.
  7. Beralih ke kolom HTML Code. Nah, isi dalam kolom HTML Code inilah yang Anda Copy-Paste ke dalam postingan menggantikan bagian artikel yang Anda Cut tadi.
Ingat! Terbitkan artikel pada modus HTML editor, bukan Compose.

Selamat belajar!
Read more »

2:08 AM , ,
Hover Buka Kotak Elemen ke Bawah
Hari ini saya belajar atau lebih tepatnya meniru elemen yang bila di :hover (hover = melewatkan penunjuk tetikus di atasnya) maka elemen akan membuka ke bawah. Saya tiru perilaku ini dari Bitdefender report. Saya senang melihatnya lalu saya mulai meniru :)

Belum jelas? Bayangkanlah tombol sosial media yang sering kita temukan di sebuah situs, biasanya di sisi kanan atau kiri halaman. Terlihat sebagian dan tersembunyi sebagian, saat di :hover barulah bagian yang tersembunyi itu menyembul keluar.

Saya coba menerapkan perilaku ini dalam postingan blogger.

Saya tunjukkan sebuah contoh agar lebih jelas apa yang saya maksudkan. Lihat demo di bawah ini.

Tidak Bernapas Ketika Minum
Diriwayatkan dari Abu Qatadah r.a. : Rasulullah SAW pernah bersabda, “kapan pun kalian minum air, tidak boleh bernapas di dalam tempat air minum itu. Dan kapan pun kalian pergi ke kamar mandi, tidak boleh menyentuh atau membasuh kelamin dengan tangan kanan”.


Membuat ini tidaklah terlalu sulit. Hanya dibutuhkan sepotong JavaScript (HTML juga CSS pastinya).

Mari kita periksa. Secara berturut-turut CSS, HTML, dan JavaScript, sebagai berikut.

.kotak_isi {
    border:1px solid #cccccc;
    border-radius:5px;
    width:418px;
    margin-top: 9px;
    left:50px;
    position:absolute;
    background:#efefef;
    z-index:999999;
    top:10px;
}
.hijau {
    border-radius:5px;
    background:#9bd344;
    height:40px;
    border:1px solid white;
    width:416px;
    overflow-y:hidden;
    transition:height 0.2s, transform 0.2s;
    -moz-transition: height 0.2s, -moz-transform 0.2s;
    -webkit-transition: height 0.2s, -webkit-transform 0.2s;
    -o-transition: height 0.2s, -o-transform 0.2s;
    //text-shadow: 1px 1px 0px #ccff99;
    filter: dropshadow(color=#ccff99, offx=1, offy=1);
}
.hijau:hover {
}
.hijau .icon {
    background:url(http://3.bp.blogspot.com/-UM-lcL58FFA/U2siZsj8eDI/AAAAAAAAFcI/5sL2RyVXnAY/s1600/stat_green.png) no-repeat;
    position:absolute;
    width:45px;
    height:45px;
    top:-1px;
    left:-20px;
}
.isi_penjelasan {
    color:black;
    font-size:12px;
    line-height:12px;
    padding-top:7px;
    display:block;
    padding-left:35px;
    padding-right: 10px;
    min-height:40px!important;
    margin-bottom:20px;
}
.lanjut {
    padding-top:15px;
}
ul.lanjut li {
    list-style:square;
    margin-left:15px;
    padding-bottom: 5px;
}

<!--drop hover jQuery-->
<div id='peringatan'>
    <div class="kotak_isi">
        <div class="warna hijau">
            <div class="icon"></div>
            <div class="isi_penjelasan">Get the most out of your product. Follow our recommendations to get maximum protection.
                <ul class="lanjut">
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                </ul>
                <br />
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {

    entah = $('#peringatan').find('.warna').height();

    $('#peringatan').find('.warna').mouseenter(function () {
        $(this).css('height', $(this).children('.isi_penjelasan').height())
    })
    $('#peringatan').find('.warna').mouseleave(function () {
        $(this).css('height', entah)
    })

});
Tentu, Anda sudah harus memasang jQuery agar fungsi ini berjalan.


Selamat belajar :)
Read more »

3:22 PM , ,
[right-post]
Perbedaan JavaScript dan jQuery Beserta Contoh
Artikel-artikel dalam blog ini sering menampilkan baris-baris code dalam kategori JavaScript dan jQuery. Apa sih JavaScript dan jQuery itu? Berikut ini saya akan berbagi tentang apa Perbedaan JavaScript dan jQuery tersebut.

Nama JavaScript agak menyesatkan karena mirip dengan platform untuk software Java milik Oracle. Padahal tidak berhubungan sama sekali, dan juga JavaScript bukan scripting language*. 

Secara umum JavaScript dipergunakan untuk memanipulasi “Document Object Model” (DOM), yang meliputi elemen-elemen pada sebuah laman web. Jadi, sebuah bahasa pemrograman yang dirancang untuk penggunaan pada browser (peramban) web.

JavaScript dieksekusi pada client side (sisi pengguna = komputer pengguna): Sebuah server website mengirim JavaScript ke peramban milik pengguna, dan peramban tersebut menginterpretasikan dan menjalankan kodenya. Semua ini terjadi dalam sebuah sandbox, yang menjaga agar JavaScript tidak menyentuh internal sistem dan mencegah malicious code (kode jahat) menginfeksi komputer pengguna.

Contoh program JavaScript paling simpel adalah alert ("hello world!");, yang kemungkinan diletakkan pada sebuah laman HTML di dalam tag <script> untuk memerintahkan browser menginterpretasikannya sebagai JavaScript, misalnya: <script> alert("hello world!"); </script> Kode ini menampilkan sebuah munculan (pop up) kotak alert pada peramban web. Lebih mudah bila Anda melihat contoh berikut ini.

JavaScript dapat mengubah isi HTML.


Fungsi JavaScript diatas ditulis seperti ini:

<button onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'" type="button">
Klik Saya!</button>

JavaScript dapat mengubah gambar!

Klik gambar bola lampu untuk on/off (ubah gambar).

Kesimpulannya, Javascript adalah bahasa pemrograman yang dirancang untuk berjalan di lingkungan klien yang dikombinasikan dengan dokumen HTML. Javascript dijalankan dengan bantuan browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol browser dan memanipulasi dokumen web atau materi web saat ditampilkan serta beberapa validasi data.

Sedangkan jQuery adalah sebuah komponen/librari/framework (kamus atau perpustakaan) yang dibuat dari JavaScript dengan tujuan memudahkan seorang programmer dalam menggunakan fungsi-fungsi yang lebih rumit. Dengan jquery, seorang programmer bisa lebih leluasa dan mudah melakukan kontrol, manipulasi, automasi halaman web. Oleh karena kemudahan tersebut jQuery memiliki semboyan "write less, do more" yang bisa kita artikan dengan sedikit menulis kode tapi dapat melakukan banyak hal.

Jquery dibangun dengan berorientasi objek sehingga akan lebih optimal dan memiliki kemampuan yang lebih luas untuk menciptakan serta memanipulasi halaman web. Karena berorientasi pada objek maka jQuery lebih berkaitan dengan tampilan halaman web.

Meskipun ada banyak library lain semacamnya, namun jQuery jauh lebih populer karena kemampuannya untuk menjalankan perintah pada peramban lama. jQuery berjalan pada browser bersamaan dengan JavaScript biasa. Ia terutama dipergunakan untuk animasi dan AJAX, yang cukup sulit untuk diprogramkan dengan vanilla JavaScript, namun bisa diketik dalam beberapa baris singkat dengan jQuery.

jQuery dimasukkan dalam sebuah laman web diantara tag <script> dan tag </script>; contohnya: <script src=".../ajax/libs/jquery/1.11.1/jquery.min.j"></script>.

Contoh panggilan jQuery, kotak kecil akan disembunyikan saat diklik:

Contoh jQuery:

Klik saya maka saya akan pergi!


Penulisan kode untuk fungsi jQuery di atas adalah:
<script>
    $("#box").click(function(){$("#box").slideUp()});
</script>

Mari kita lihat contoh lainnya. Bagaimana penulisan JavaScript dan jQuery untuk melakukan sebuah manipulasi background dokumen html berikut :

Javascript

<script language="javascript">
function changeBackground(color)
{
  document.body.style.background = color;
}
onload="changeBackground('red');"
</script>

Jquery

<script>
  $('body').css('background', '#ccc');
</script>

Keduanya sama-sama memerintahkan web browser untuk menampilkan background (latar belakang) "body" berwarna merah.

jQuery itu library-nya, JavaScript bahasanya

jQuery juga memiliki banyak sekali plugin yang memperluas fungsionalitasnya melalui berbagai metode.

*http://en.wikipedia.org/wiki/Scripting_language
*http://www.w3schools.com/js/js_intro.asp
Read more »
Subscribe to: Posts (Atom)

Contact Form

Name

Email *

Message *

Powered by Blogger.