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>

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

// - - >