Beberapa Syntax penting untuk javascript


Suatu program mempunyai syntax yang khas yang kadang berbeda dengan program lainnya, dimana dengan perbedaannya tersebut seseorang dapat mengetahui dengan jelas menggunakan compiler apa suatu code tertentu. Setelah sebelumnya kita belajar sedikit tentang javascript, sekarang saatnya mengenal beberapa Syntax penting dari javascript, berikut syntax tersebut:

  • // : Menunjukkan bahwa semua baris sesudah tanda tersebut tidak akan diperhitungkan oleh program. Atau tanda itu digunakan untuk komentar.

  • /* awal dari komentar, tanda ini digunakan untuk komentar yang lebih dari satu baris.

  • */ Akhir dari komentar lebih dari satu baris. Tanda ini juga bukan hanya digunakan untuk komentar tetapi juga untuk code yang kita tidak ingin menghapusnya secara permanen dan suatu saat akan kita gunakan lagi.

  • Curly bracket ({ dan }) digunakan untuk block dari code. Hal ini akan kita lihat banyak pada saat belajar if dan for serta fungsi.

  • Semicolon (;) digunakan untuk akhir baris dari suatu perintah, walaupun tidak harus tetapi sebaiknya selalu gunakan semicolon.


Berikut contoh dari penggunaan syntax di atas.
<script type="text/JavaScript">
// Satu baris komentar biasanya digunakan untuk menjelaskan code apa di bawahnya
/*
Multiline komentar
Biasanya digunakan untuk komentar ataupun code yang sedang diuji contoh Code di bawah tidak akan dijalankan oleh browser
document.write("Pelajaran pertama dari javascript");
*/

//Contoh penggunaan Curly bracket dan semicolon setelah satu baris perintah
for (var j = 1; j <= 1000; ++j) {
document.write('Angka ke = '+ j+'<br/>');
}
</script>

0 Read More

Teknik CSS Sprites ini sangat berguna untuk template yang menggunakan banyak image. Dengan teknik ‘CSS Sprites’ ini akan mempercepat “loading” dan “http request” pada image, sebab beberapa image di template tersebut dikombinasikan dalam satu file image, oleh karenanya image tersebut hanya dipanggil satu kali.

Sebelum lanjut, lihat demo penggunaan teknik CSS Sprite pada menu navigasi. Arahkan mouse anda dan klik, untuk melihat hasil dari teknik tersebut.

Apabila anda menggunakan Browser Firefox, pada demo tersebut, klik kanan pilih view page info, kemudian klik media, untuk melihat image yang digunakan pada menu tersebut.

Penjelasan Teknik CSS Sprites dalam Membuat Menu Navigasi


Sesuai demo diatas, berikut ini tahapan pembuatannya:

1. Image Menu Navigasi

Gambar dibawah ini adalah image yang digunakan pada demo diatas. Gambar tersebut adalah gabungan dari beberapa image yang dibutuhkan untuk menu navigasi, yang nantinya dipilah-pilah dengan teknik CSS.

Contoh Image Menu Navigasi dengan CSS Sprites

Berikut ini penjelasan gambar tersebut:

Penjelasan Image Menu Navigasi dengan CSS Sprites

Gambar yang akan difungsikan sebagai menu navigasi ini terdiri dari tiga bagian, yaitu ‘home‘, ‘about‘ dan ‘contact‘. Masing-masing bagian tersebut memiliki lebar yaitu 80 pixel dan tinggi 30 pixel. Lebar dan tinggi image tersebut yang penting diperhatikan, sebab itu menjadi penentu dalam pembagiannya dengan teknik CSS.

Dari tiga bagian menu tersebut, kemudian dibagi lagi berdasarkan fungsinya yaitu untuk link hover dan link focus, yang dibedakan berdasarkan warna, sesuai gambar diatas.

2. Kode HTML Menu Navigasi

Kode HTML yang digunakan untuk menu navigasi ini ada tiga bagian, seperti dijelaskan pada gambar diatas, yaitu home, about dan contact. Maka penulisan kode HTML nya sebagai berikut:
<ul id="menu">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul> 

Yang perlu diperhatikan pada kode html diatas, bahwa tiap menu tersebut menambahkan atribut seperti class(lihat kode yang berwarna biru diatas). Contoh pada menu ‘home’ diatas menggunakan class="home". Penambahan atribut tersebut yang nanti akan berfungsi untuk memilah bagian image tersebut di kode CSS.

3. Kode CSS Menu Navigasi dengan Teknik Sprites

Kode CSS ini adalah bagian penting dari teknik sprites, untuk memilah-milah image tersebut. Kata kunci dari teknik ini adalah pada property background position.

Sebelum masuk ke kode CSS keseluruhan. Berikut ini contoh penjelasan dari teknik ini. Misal pada menu ‘home‘, <li class="home"><a href="#">Home</a></li>, maka CSS nya sebagai berikut:
li.home a{
width:80px;
height:30px;
display:block;
text-indent:-9999px;
background: url(http://lh5.ggpht.com/_dfnTVAxeWMI/S1EmPT3qI_I/AAAAAAAADFk/7x0VpNq7xjg/menu.png) 0 top no-repeat;
}

Penjelasan kode CSS diatas:

width:80px; dan height:30px;, seperti pada penjelasan gambar diatas, bahwa lebar dan tinggi masing-masing image tersebut, seperti ‘home’, lebar 80 pixel dan tinggi 30 pixel.

display:block;, sebagai penegas untuk mem-block image tersebut yang memiliki tinggi dan lebar.
text-indent:-9999px;, untuk menyembunyikan text ‘home’, sebab dalam image tersebut sudah memiliki text home.

Sedangkan, background: url(http:../menu.png) 0 top no-repeat; :
url(http:../menu.png) ini adalah alamat image yang digunakan.
0 top, kode yang berwarna biru tersebut adalah value dari property background position dan ini kunci untuk memilah gabungan gambar tersebut yang memiliki tinggi dan lebar, seperti penjelasan diatas.
no-repeat;, ini adalah value dari property dari background-repeat, yang maksudnya image tersebut tidak diulang penggunaannya.

Pada background position 0 top itu bisa juga di tulis 0 0 atau juga left top, artinya image tersebut berada pada bagian kiri (senilai 0) atas (senilai 0). Jadi nilai pertama itu adalah koordinat x dan kedua adalah y. Ingat, angka atau value dari background position ini terkait perhitungan lebar dan tinggi image masing-masing menu diatas.

Kemudian untuk link:hover pada menu home kita cukup memanggilnya sebagai berikut:
li.home a:hover {
background-position:0 -30px;
}

background-position:0 -30px;, artinya memanggil image dibagian kiri (senilai 0) atas (senilai -30px). Angka -30px tersebut diperoleh karena masing-masing gambar memiliki tinggi 30 pixel, maka tempat image untuk hover (warna urutan kedua digambar atas) tersebut berada di -30 pixel dan untuk link focusnya nanti adalah senilai -60 pixel.

Anda dapat mempelajari dan menguji coba mengenai property background position ini di CSS background-position Property.

Maka keseluruhan kode CSS untuk menu navigasi dengan teknik “CSS Sprites” ini adalah:
ul#menu {
/* isi sesuai penempatan atau posisi menunya */
}

ul#menu li {
float:left;
margin-right:10px;
list-style:none;
}
ul#menu li a{
width:80px;
height:30px;
display:block;
text-indent:-9999px;
background: url(http://lh5.ggpht.com/_dfnTVAxeWMI/S1EmPT3qI_I/AAAAAAAADFk/7x0VpNq7xjg/menu.png) 0 0 no-repeat;
}
ul#menu li.home a{
background-position:0 0;
}
ul#menu li.home a:hover {
background-position:0 -30px;
}
ul#menu li.home a:focus {
background-position:0 -60px;
}

ul#menu li.about a{
background-position:-80px 0;
}
ul#menu li.about a:hover {
background-position:-80px -30px;
}
ul#menu li.about a:focus {
background-position:-80px -60px;
}

ul#menu li.contact a{
background-position:-160px 0;
}
ul#menu li.contact a:hover {
background-position:-160px -30px;
}
ul#menu li.contact a:focus {
background-position:-160px -60px;
}

Penutup


Sip. Demikian keseluruhan penjelasan mengenai Menu Navigasi ini dengan tekniks CSS Sprites. Untuk pengembangannya lebih lanjut anda dapat mempelajari di artikel berikut:

Apabila anda kesulitan membuat image CSS Sprites ini, bisa menggunakan generator berikut:

0 Read More

0 Read More

Pendahuluan Javascript


Para blogger ataupun web designer pastinya mengenal javascript. Tapi masih banyak diantara kita hanya mengenal javascript dengan cara copy paste script ataupun hanya menggunakan plugin yang sudah jadi. Bahkan diantara para blogger dan webdesigner tidak tahu apa perbedaan dari raw javascript dan jquery. Javascript yang dijelaskan dalam tutorial ini adalah bahasa pemrograman yang terdapat dalam hampir semua web browser (firefox, safari, IE, chrome dan lain-lain), jadi kita tidak perlu download atau install atau membeli license untuk menggunakan dan mengembangkannya. Dan juga Javascript yang dijelaskan disini nanti hanya javascript yang bekerja pada client side.

Penjelasan tentang client-side programming :

  • Hanya dapat dilihat hasilnya setelah dibuka oleh web browser pada komputer pengguna.

  • Saat ini belum dapat dibaca oleh search engine (search engine hanya bisa membaca script tapi bukan hasilnya).

  • Yang dibaca oleh browser adalah script bukan output berupa html. Setelah browser membaca script kemudian browser akan execute script yang kemudian menghasilkan output  berupa html atau hal lainnya sesuai yg diinginkan oleh pembuat script.


Cara Membuat script dengan javascript


Kebutuhan dalam membuat script menggunakan javascrript :

  1. Web browser (sangat disarankan firefox, karena nantinya akan diajarkan menggunakan firefox untuk debugging).

  2. Text editor (sangat disarankan menggunakan Notepad++)


Cukup dibutuhkan dua program tersebut diatas untuk belajar javascript, sangat mudah bukan ?

Berikut syntax yang digunakan untuk menulis javascript
<script type="text/javascript">
// Script anda disini
</script>

pada syntax diatas anda dapat menulis script anda pada tulisan "Script anda disini". Agar tidak membingungkan yang baru belajar web programming saat ini saya tidak membahas tentang cara penulisan untuk HTML, strict XHTML atau lainnya. Sementara ini saya akan menerangkan secara sederhana saja. agar mudah difahami dan bisa dicoba.

Kelebihannya lagi tentang javascript adalah anda dapat membuat secara offline tidak perlu koneksi internet ataupun harus upload terlebih dahulu.

Baiklah untuk memulai pelajaran tentang javascript coba kita lihat code berikut ini
<script type="text/javascript">
document.write("Pelajaran pertama dari javascript");
</script>

Demo Hasil

Cara membuat dalam file tersebut sebagai berikut :

  1. Buatlah file html misal demo.html atau dengan notepad++ "new file" kemudian "save as"  file menjadi demo.html (ingat akhiran dari file adalah htm atau html).

  2. Isikan file tersebut dengan script di atas.


Dari code di atas menghasilkan output berupa tulisan "Pelajaran pertama dari javascript"

fungsi yang digunakan adalah document.write() untuk memberikan output pada browser apa yang kita tulis dalam kurung tersebut.

untuk mengakhiri satu baris script dari javascript dengan tanda semicolon (;)

Kenapa kita harus repot-repot menggunakan javascript kalau untuk menulis "Pelajaran pertama dari javascript" dalam html file cukup ditulis itu saja ?

Demo hanya menggunakan HTML, perhatikan link demo html dengan link demo javascript apakah hasilnya sama ?

kalau ingin melihat source file dari file itu bisa lihat dengan cara klik kanan pada browser dan pilih "View Page Source" maka akan terlihat perbedaan isinya tetapi hasilnya sama.

Untuk menunjukkan kemudahan penggunakan javascript mari kita lihat apakah anda sanggup menulis secara html tulisan berikut ini ? (angka tersebut ditulis berurutan sampai 1000)

Angka ke = 1
Angka ke = 2
Angka ke = 3
Angka ke = 4

.

.

Angka ke = 1000

Cukup lama mengetik content seperti di atas apabila menggunakan html, tetapi dengan menggunakaan javascript cukup beberapa baris berikut :
<script type="text/javascript">
for (var j = 1; j <= 1000; ++j) {
document.write('Angka ke = '+ j+'<br/>');
}
</script>

Demo hasil

Penjelasan script di atas nanti saja setelah masuk bagian loop dalam javascript.

Demikian saja tutorial javascript pada artikel ini, semoga bermanfaat bagi kita semua.

Wassalamu'alaikum warohmatullahi wabarokatuh

0 Read More

Gak tau kenapa 4 minggu terakhir saya terbiasa sarapan dengan sebuah burjo (bubur kacang ijo) + roti tawar, kebetulan dekat kosan dah ada warung burjo, tapi setelah di pikir pikir , burjo baik untuk kesehatan gk ya, ada teman yang bilang banyak gizi yang terkandung di dalamnya tapi ada yang bilang malah membahayakan kesehatan karna bubur kacang ijo pake bahan pengawet.

Dan akhirnya saya mencoba mencari kebenarannya lewat brother google, dan ternyata bubur kacang ijo banyak manfaatnya, berikut sedikit penjelasannay :


  • Kacang hijau memiliki kandungan protein yang cukup tinggi, yaitu sebanyak 24 %. Di dalamnya terdapat sumber mineral penting antara lain kalsium dan fosfor yang bermanfaat untuk memperkuat tulang. Lemaknya merupakan asam lemak tak jenuh sehingga baik untuk jantung. Selain itu aman dikonsumsi oleh mereka yang memiliki masalah dengan berat badan karena kandungan lemahnya rendah.

  • Kacang hijau mengandung vitamin B1 yang berfungsi untuk mencegah penyakit beri-beri, membantu proses pertumbuhan, meningkatkan nafsu makan, memperbaiki saluran pencernaan, dan memaksimalkan kerja syaraf. Ada penelitian yang menyatakan bahwa pada sekelompok orang yang makanannya kurang cukup mengandung vitamin B1, seperti kacang hijau, dalam waktu singkat muncul gejala-gejala mudah tersinggung, tidak mampu memusatkan pikiran, dan kurang bersemangat. Gejala-gejala ini mirip dengan tanda-tanda orang stres.

  • Selain vitamin B1, kacang hijau juga mengandung vitamin B2 yang tugasnya membantu penyerapan protein dalam tubuh. Kehadiran vitamin B2 ini akan meningkatkan pemanfaatan protein sehingga penyerapannya menjadi lebih efisien.


Oh ya, sekedar informasi tambahan , selain kacangnya, kecambah kacang hijau juga punya manfaat tak kalah penting antara lain :

  • Antioksidan kecambah membantu memperlambat proses penuaan

  • Mencegah penyebaran sel kanker

  • Kandungan vitamin E-nya membantu meningkatkan kesuburan

  • Sangat baik untuk menjaga keasaman asam lambung dan melancarkan pencernaan

  • Berguna untuk kecantikan yaitu meremajakan dan menghaluskan kulit, menghilangkan noda-noda hitam pada wajah, menyembuhkan jerawat, menyuburkan rambut dan melangsingkan tubuh.


Wah, banyak sekali ya manfaat kacang hijau ini. So, buat teman teman yang belum pernah ato jarang mencobanya, mulailah mengkonsumsi kacang hijau sekarang juga :!: :wink:

0 , , , Read More

BloggerSalah satu free blog provider atau penyedia blog gratis yang populer saat ini adalah blogger.com atau blogspot, oleh karena id Tutorial akan menyuguhkan tutorial membuat blog di blogger.com.

Kenapa harus membuat blog di blogger.com bukan yang lainnya? Sebenarnya tidak ada keharusan untuk membuat blog di blogger.com, namun ada banyak kelebihan yang dimiliki blogger.com di banding dengan penyedia blog yang lainnya. Beberapa contoh kelebihan blogspot di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk para pemula, lebih leluasa dalam mengganti serta mengedit template sehingga tampilan blog anda akan lebih fresh karena hasil kreasi sendiri, custom domain atau anda dapat mengubah nama blog anda dengan nama domain yang dimiliki sedangkan hosting tetap menggunakan blogspot.
Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis, sehingga mungkin saja dalam beberapa waktu kedepan panduan membuat blog di blogger.com akan sedikit berbeda dengan apa yang anda lihat di blogger.com

Untuk mengurangi hal yang tidak perlu di tulis, berikut cara membuat blogger di blogger.com

Membuat Email


Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda memiliki alamat email yang masih aktif atau di gunakan. Jika anda belum mempunyai alamat email, silahkan baca tutorial tentang Cara membuat Email di Gmail, karena blogger adalah salah satu layanan dari Google maka ketika mendaftar ke blogger sebaiknya gunakan email gmail.

Daftar Blog di blogger.com


• Silahkan kunjungi situs http://www.blogger.com
• Alihkan perhatian kesebelah kanan atas, disana terletak menu drop down dan silahkan ganti penggunaan bahasa ke bahasa Indonesia agar lebih mudah untuk dipahami. Setelah itu klik tombol “BUAT BLOG

halaman pendaftaran blogger
• Setelah halaman pendaftran terbuka, ada dua opsi pilihan yaitu login dengan akun gmail atau mendaftar dengan email selain gmail. Karena tentunya anda telah mempunyai akun gmail, maka sebagai contoh silahkan pilih opsi login dengan klik link “Login terlebih dahulu

login-ge-blogger
• Silahkan login dengan alamat email gmail dan username anda.

login-gmail
• Isi nama tampilan yang akan muncul di blog nantinya. Beri tanda ceklis pada kotak kecil disamping Penerimaan Persyaratan, lalu klik anak panah bertuliskan LANJUTKAN.

nama-tampilan-blog
• Isilah nama judul blog serta alamat blog yang di inginkan. Ingat! dalam membuat alamat blog harus benar-benar serius karena itu permanen tidak dapat digantikan lagi (kecuali nanti ganti dengan custom domain). Jika alamat yang diinginkan ternyata tidak bisa digunakan, masukkan kembali alamat lain yang masih tersedia. Jika alamat blog yang diinginkan masih tersedia, silahkan klik anak panah bertuliskan LANJUTKAN.

lamat-blog
• Silahkan pilih template yang anda sukai ( template ini nanti bisa diubah lagi kapan saja anda mau), kemudian klik LANJUTKAN.

pilih-template
• Klik tombol MULAI BLOGGING

sudahjadi
• Setelah masuk post editor, silahkan isi apa saja. Contoh : hello world, lalu klik tombol TERBITKAN ENTRI.
• Selesai.

Untuk tahap awal, blog anda sudah jadi dan bisa diakses dimana saja.

0 Read More