Penggunaan Javascript Font Replacement (Cufon)

Penggunaan Javascript Font Replacement (Cufon) – 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.

Untuk bisa menggunakan cufon, pasang terlebih dahulu kode berikut ini kedalam template blog taruh di atas kode </head>

<script type='text/javascript' src='http://cufon.shoqolate.com/js/cufon-yui.js'/>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Vegur_300.js'/>
<script type='text/javascript'>
Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true });
</script>

Perhatikan pada baris ini:

http://faceblog-evolutions.googlecode.com/files/Vegur_300.js

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

Pada baris ini adalah syntax yang digunakan untuk fungsi merender font:

Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true });

Pada #target_element anda bisa merubahnya dengan elemen yang anda inginkan. Sebagai contoh misalkan untuk merender tag h1, h2, h3 maupun #id dan .class target maka contoh penulisaannya seperti berikut ini:

Cufon.replace('h1, h2, h3, #target_element, .target_element', { fontFamily: 'Vegur', hover: true });

Sedangkan pada fontFamily: 'Vegur' anda bisa menyesuikannya dengan nama font yang digunakan.

Penggunaan Cufon Lebih Dari Satu

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:

<script src='http://cufon.shoqolate.com/js/cufon-yui.js' type='text/javascript'/>
<script src='http://faceblog-evolutions.googlecode.com/files/Vegur_300.js' type='text/javascript'/>
<script src='http://faceblog-evolutions.googlecode.com/files/bebas-neue.js' type='text/javascript'/>
<script type='text/javascript'>
Cufon.replace('h1, .title', { fontFamily: 'Vegur', hover: true });
Cufon.replace('h2, .sidebar', { fontFamily: 'Bebas Neue', hover: true });
</script>

Agar Cufon Support Internet Explorer (IE)

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 </body>.

<script type='text/javascript'> Cufon.now(); </script>

Penggunaan jQuery Toggle, fadeToggle dan slideToggle

Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle – 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 jquery-1.10.2. Untuk memasang jQuery didalam template bisa menaruhnya diatas kode </head> atau bisa juga di atas </body>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

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.

Sebelum menentukan efek yang akan dipasang, terlebih dahulu sembunyikan elemen yang sudah anda pilih. Gunakan CSS property display:none, bukan visibility:hidden. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metode toggle(), fadeToggle() ataupun slideToggle().

Penggunaan jQuery Toggle

jQuery Toggle digunakan untuk membuat efek show() dan hide() yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode toggle(). Syntax yang di gunakan seperti dibawah ini:

$(selector).toggle(speed,easing,callback)

Contoh:

Apabila di presentasikan contoh penulisannya script untuk menyembunyikan dan menampilkan suatu elemen seperti dibawah ini:

#btn1{
padding:5px 15px;
background:#2ecc71;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#contoh1{
display:none;
text-align:center;
background:#2ecc71;
color:#fff;
padding:50px 0
}

<button id='btn1'>Toggle</button>
<div id='contoh1'>Contoh penggunaan jQuery toggle</div>

Default

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle();
  });
});

Edit & Demo

Dengan menambahkan parameter speed

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000);
  });
});

Edit & Demo

Dengan menambahkan parameter callback

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000,function(){
      alert("Pesan ini muncul setelah toggle selesai berjalan");
    });
  });
});

Edit & Demo

Penggunaan jQuery fadeToggle

Metode fadeToggle() digunakan untuk memunculkan efek fadeIn() dan fadeOut() pada elemen yang sudah ditentukan. Syntax yang digunakan seperti dibawah ini:

$(selector).fadeToggle(speed,easing,callback)

Contoh:

Untuk menambahkan parameter speed maupun callback langkahnya sama seperti pada metode toggle().

#bton1{
padding:5px 15px;
background:#D94839;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#gambar{
display:none;
text-align:center;
padding:10px;
background:#E74C3C;
border:5px solid #fff
}
#gambar img{
width:300px;
height:200px;
border:5px solid #fff
}

<button id='bton1'>fadeToggle</button>
<div id="gambar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RptzVXVNO3N1Mq3ZBNNhEGmC_ST8w41jnVwSOLDcOeTdZ128VqJHCaW9qdCNS6mFxGPPuap_Bw_R30Dhbpsc5p_sUqYX3ONvoYDbHjbzkKsFYBcFmOFk2hRPV4ejsPOsRmcKHdDVN_Y/h200/Paramore+%287%29.jpg"/></div>

$(document).ready(function(){
  $("#bton1").click(function(){
    $("#gambar").fadeToggle();
  });
});

Edit & Demo

Penggunaan jQuery slideToggle

Fungsinya sama seperti metode toggle() dan fadeToggle(), hanya saja efeknya yang berbeda. Metode slideToggle() digunakan untuk membuat efek slideDown() dan slideUp(). Syntax yang digunakan seperti dibawah ini:

$(selector).slideToggle(speed,easing,callback)

Contoh:

Contoh sederhana untuk deklarasi penulisannya script seperti dibawah ini:

#buton1{
padding:5px 15px;
background:#D94839;
color:#fff;
cursor:pointer;
display:inline-block
}
#contoh2{
display:none;
text-align:center;
background:#E74C3C;
color:#fff;
padding:50px 0
}

<div id="buton1">slideToggle</div>
<div id="contoh2">Contoh penggunaan jQuery slideToggle</div>

Default

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle();
  });
});

Edit & Demo

Dengan Menambahkan parameter speed

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000);
  });
});

Edit & Demo

Dengan Menambahkan parameter callback

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000,function(){
      alert("Pesan ini muncul setelah slideToggle selesai berjalan");
    });
  });
});

Edit & Demo

Konfigurasi:

Parameter	Deskripsi
speed	Opsional. Untuk menentukan kecepatan efek. Value: milidetik (contoh: 1000, 2000, dst). "slow" "fast"
easing	Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing" Value: "swing" bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah. "linear" bergerak dalam kecepatan konstan.
callback	Opsional. Fungsi yang akan dieksekusi setelah metode toggle(), fadeToggle() ataupun slideToggle() sudah selesai berjalan.

Post Snippet Pengganti Script Auto Readmore Blogger

Post Snippet Pengganti Script Auto Readmore Blogger – 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 <!--more--> pada posting mode HTML. Alternatife lain yang akan saya bahas pada tutorial ini adalah menggunakan metode data:post.snippet untuk memotong post artikel dan data:post.thumbnailUrl 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.

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.
Langkahnya cari kode <b:includable id='post' var='post'> maka dibawahnya akan terdapat dua kode <data:post.body/>, kemudian replace kode <data:post.body/> yang kedua dengan kode berikut ini:

<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='thumb'>
<a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
<div class='thumb'>
<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/AVvXsEhJJnXhC1a6oovkog5ql-4DZLMIiR_2zSaPolDtDg8X-NaDeRGUk8-CEZq80M6zgENNo5X-UA9zTgJSJg8DAm_zzasAlDqzihLjFW9-GF84Ci4hN1ya9fPRJrYZED0GaehfhBmkL35uyVo/h120/no-image.jpg'/></a>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Untuk mengatur tampilannya anda bisa menambahkan kode CSS seperti dibawah ini dan taruh di atas kode ]]></b:skin>

.thumb img{float:left;margin-right:10px;width:72px;height:72px}
.jump-link{display:inline;float:right;padding:5px;background:#ddd;margin-top:20px}

Diatas hanya dasarnya, untuk merubah tampilan lebih lanjut atur pada bagian CSS dengan penambahan background, border, dll agar lebih sesuai dengan yang di inginkan.

Konsep OOP di Javascript

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).

Contoh ilustrasi :

• Kebun
• Pohon
• Dahan
• Daun
• Sarang Burung
• Panjang = 20
• Warna = Kuning
• Tinggi = 4
• Batang
• Akar
• Sangkar Ternak
• Ayam
• Bebek

Dari ilustrasi diatas,

Sarang burung yang berada diatas poon dapat dituliskan sebagai berikut :

Kebun.Pohon.Dahan.Sarang Burung

Bila ingin mengganti warna sarang burung yang terletak diatas pohon, maka perintahnya :

Kebun.Pohon.Dahan.Sarang Burung.warna=hijau

Sekian dulu dari saya. Semoga bermanfaat.

Silahkan bertanya jika ada yang ingin ditanyakan !

  

3 hal penting di elemen Javascript PROPERTI

Properti adalah atribut dari sebuah objek. Penulisannya dipisahkan dengan tanda titik (.) :

Nama_objek.nama_properti

Properti dapat diberi nilai, penulisannya :

Nama_objek.properti = nilai

Contoh :

Metode

Properti adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisannya (dipisahkan dengan tanda “.”):

Nama_obvjek.nama_metode(“parameter”)

Contoh :

Penanganan Kejadian (Event Handler)

Penanganan kejadian adalah sekumpulan kode yang akan dijalankan manakala pemakai melakukan suatu tindakan/ kejadian, misalnya mengklik tombol mouse atau ketika menutup jendela browser.

Penulisannya : nama_kejadian =“kumpulan kode”

Kumpulan kode dapat berisi sejumlah pernyataan, antara pernyataan dipisahkan titik koma ;

Contoh : 

<HTML><HEAD><TITLE>Kejadian</TITLE> 

</HEAD> 

<BODY> 

<H1>Tes Kejadian</H1> 

<P>Cobalah meletakan penunjuk mouse dari link berikut dan perhatikan isi baris status </P> 

<A HREF =“http://mas-andes.blogspot.com” onMouseOver = “Window.status ='Anda menyorot link, lho'; 

Return true” onMouseOut = “Window.status =' '; Return true”>Fujitsu</A> 

</BODY></HTML>

Pemasukan Data  

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.

Contoh :

<HTML><HEAD> 

<TITLE>Pemasukan Data</TITLE> 

</HEAD> 

<BODY> 

<SCRIPT LANGUAGE =“Javascript”> 

<! - - Var nama = prompt(“Siapa nama Anda?”); Document.write(“Hai, “+nama); 

// - - > 

</SCRIPT> </BODY> </HTML>

Jendela Peringatan

Jendela Peringatan  

<HTML><HEAD>

<TITLE>Alert Box</TITLE> 

</HEAD> 

<BODY> 

<SCRIPT LANGUAGE = “Javascript”> 

<!- - Window.alert(“Ini merupakan pesan untuk Anda”); 

// - -> 

</SCRIPT> </BODY> </HTML>

Jendela Konfirmasi

Jendela Konfirmasi

<HTML><HEAD>

<TITLE>Konfirmasi</TITLE> 

</HEAD> 

<BODY> 

<SCRIPT LANGUAGE = “Javascript”> 

<!- - Var jawaban = window.confirm(“Anda ingin meneruskan?”); 

documen,.write(“Jawaban Anda: “ + jawaban); 

// - - > 

</SCRIPT> </BODY> </HTML> 

Konsep Variabel

• Variabel adalah suatu objek yang berisi data, yang mana dapat dimodifikasi selama pengeksekusian program.
• Aturan pemberian nama variabel :
• Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter  “_”.
• Nama variabel bisa terdiri dari huruf, angka atau karakter _ dan & (spasi kosong tidak diperbolehkan).
• Nama variabel tidak boleh memakai nama yang digunakan dalam reserved program seperti: abstract, boolean, break,  byte, if, implements, import, in, infinity,  instanceof, int,  interface, dll. 

Mendeklarasikan Variabel

• Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel : var test = “halo”
• Implisit : dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel : test = “halo”

<SCRIPT language=“Javascript”>

<! –

Var VariabelKu;

Var VariabelKu2 = 3;

VariabelKu = 2;

Document.write (VariabelKu*VariabelKu2);

// - - >