ilmugrafis.com
Home Tutorials News Artikel Fonts Download Gallery Kontak
Google Powered Search
 
ilmugrafis » WEB DESAIN - DREAMWEAVER » Session 1  |  » Session 2

Pengenalan JQuery Website

Publish: 16 Mei 2012 | Author & Copyright: Mifta Afina | Status: FREE tutorial

Setelah menjamurnya konsep blogazine pada blog, jQuery sekarang telah menjadi bahan wajib bagi web desainer maupun blogger. Sebenarnya apa itu jQuery?
jQuery adalah library javascript, jQuery berisi kumpulan kode-kode/fungsi-fungsi yang siap pakai sehingga mempermudah dan mempercepat waktu kita dalam menuliskan kode javascript, karena kita hanya memanggil fungsi-fungsi yang kita butuhkan yang tentu saja sudah ada dalam jQuery tersebut, serta tidak perlu lagi menyusun kode javascript dari nol.Tentunya ini sesuai dengan slogan jQuery itu sendiri, yakni "Write less, do more".

Menurut pengalaman saya dan teman-teman lainnya, jQuery sangatlah ringan sehingga dengan menggunakan jQuery tidak akan membuat halaman web kita menjadi lambat untuk di load, dengan porsi yang tidak berlebihan, tentunya. Sebelum mempelajari jQuery, ada baiknya Anda sudah menguasai dasar-dasar HTML, CSS serta JavaScript. Untuk dapat menggunakan library ini, Anda dapat mendownload jQuery dari situs resminya yaitu www.jquery.com lalu menaruhnya pada direktori tempat Anda menyimpan file halaman web, dan jangan lupa pula untuk memanggil file jQuery di setap halaman web diantara tag <head></head> Anda dengan cara:

<script type="text/javascript" src="jquery.js"></script>

Tulisan yang berwarna merah menandakan nama file, nama file tersebut harus di sesuaikan dengan nama file jQuery yang telah kita download. Untuk lebih lanjut mengenai tutorial dasar desain web dengan jQuery akan dibahas pada tutorial berikutnya.

|==============|
Sintaks pada jQuery |
|==============|
Penting!
sama seperti PHP, untuk mempraktikkan tutorial ini anda harus mempunyai Localhost dengan cara mengubah komputer / laptop anda menjadi Server terlebih dahulu dan meletakkan file jquery di dalam localhost.

jQuery --sama seperti halnya library lainnya-- juga memiliki sintaks, biasanya sintaks yang dipakai adalah untuk memilih elemen-elemen HTML lalu melakukan suatu aksi terhadap elemen tersebut atau elemen lain. Ini mirip dengan gaya bahasa visual basic yang pada visual basic diistilahkan dengan konsep 'even driven' dimana suatu reaksi terjadi jika suatu aksi tertentu dilakukan.

Analoginya begini, misal: kita menuangkan sirup strawberry kedalam gelas yang berisi air putih, maka air putih tersebut akan berubah warna dari putih (bening) menjadi merah. Nah, Yang kita lakukan yakni menuangkan sirup adalah aksi, sedangkan peristiwa berubahnya warna pada gelas dinamakan reaksi.

Sintaks pada jQuery adalah sebagai berikut: $(selector).action()
Penjelasan!
$ biasa saya sebut dengan "cash", digunakan untuk mendefinisikan jQuery
selector) digunakan untuk menunjukkan elemen yang dipilih atau dituju
action() adalah aksi yang akan dilakukan terhadap elemen yang telah di seleksi atau dipilih.

agar lebih jelas saya beri contoh sebagai berikut:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Design | ilmugrafis.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
            $("button").click(function(){
            $("p").hide(1000);
            });
})
</script>

</head>
<body>
<p>Tulisan ini akan bereaksi</p>
<button>Klik tombol ini</button>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>

Penjelasan!
Seperti yang telah dijelaskan pada tutorial sebelumnya baris ini digunakan untuk memanggil file jquery.js.
$(document).ready(function(){
Ini dimaksudkan kode javascript yang ada pada baris dibawahnya berjalan pada saat halaman web di load.

$("button").click(function(){
$("p").hide(1000);
});

Baris diatas bermakna: ketika elemen “button” di klik oleh pengguna, maka elemen “p” (paragraph) disembunyikan dengan kecepatan selama 1000 mili detik.
Hasilnya:
floating top
kok cuma gambar, tenang karena ilmugrafisTeam telah menyiapkan Tester JQuery script di atas tersebut disini klik Test JQuery agar kalian bisa mengetahui maksud dari elemen “p” (paragraph) disembunyikan :)

Coba Anda ubah sendiri kode diatas, misalnya dengan mengganti angka 1000 menjadi 2000, mengubah selector dari “button” menjadi “p” atau sebaliknya, dan lain-lain. Selamat bereksplorasi. Sampai disini dulu pengenalan JQuery, Sampai ketemu di tutorial - tutorial yang lain. Terima kasih, semoga bermanfaat

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
Keep In Touch : youtube channeltwitterfacebookgoogle+rss
IlmuGrafis Apk : android apk
Berlangganan Tutorial dan News ilmuGrafis.com via Email


author
<> Info dan Kontak Penulis
Miftah Afina

TTL : Pemalang, 5 Agustus 1994
Email : mail2phynt@yahoo.co.id
Telp/HP: 085742302328
Blog : http://recent.ilmugrafis.info
Facebook : facebook.com/phynt
Pesan: "Segalanya berawal dari kesederhanaan"

Saya (Penulis) bersedia mematuhi ketentuan dan peraturan di IG
- Tutorial / Artikel ini resmi saya diberikan untuk dipublikasikan di www.ilmugrafis.com
- Kritik, Saran, maupun Pertanyaan seputar Tutorial bisa menghubungi Penulis
Semoga Bermanfaat, Terima kasih


Rekomendasi Resmi ilmuGrafis
Metode Belajar Cepat dan Mudah dengan Video Tutorial dan Desain Grafis Source
Dipersembahkan oleh www.ilmuGrafis.net
HTML CSS
WEBSITE - HTML CSS

Video Tutorial Cara Pembuatan Website dengan HTML Fundamental dan CSS Style
PHP 1
Pemrograman Web PHP

Video Tutorial Cara Membuat dan Memprogram Website Dinamis dengan PHP
DREAMWEAVER
Webdesain Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop


Aturan dan Kebijakan di website ilmugrafis

  • Semua Konten di ilmuGrafis.com bertujuan sebagai media pendidikan dan pembelajaran, oleh karena itu dimohon tidak menyalahgunakan informasi dan pengetahuan yang diperoleh untuk hal - hal yang merugikan diri sendiri maupun orang lain
  • Kami melakukan segala upaya untuk memastikan bahwa informasi di ilmuGrafis.com tersaji seakurat dan sebaik mungkin. Anda bisa melaporkan jika ada konten ataupun informasi yang tidak berkenan di Kontak
  • Jika anda ingin memposting ulang atau mengcopy konten yang ada di ilmuGrafis.com maka silahkan membaca terlebih dahulu Terms Of Use

Promotion Link :

ARTSENSE 1

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Extra

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Extra Tools

PHOTOGRAPHY
Lightroom

VECTORIZE
Adobe Illustrator

ANIMATION
Flash
Swishmax

MODELING
3dsMAX
AutoCAD
Cinema 4D
Maya

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DEVELOPER
Dreamweaver
jQuery
Fireworks

PUBLISHING
Freehand
InDesign
Ms. Paint
Ms. Visio

FREEWARE
Gimp
Inkscape

CREATIVE-ZONE
Gallery
Papercraft
Liga Grafis
Hall Of Fame

EXTRA
News
Artikel
Hiburan
Bursa Kerja
Jasa Grafis
Donasi

Advertise with us
http://ilmugrafis.info/cdn/banner_ilmu_grafis_180x500px.gif

Artsense 3

Our Banner :

ilmugrafis indonesia
Link to ilmuGrafis

Peta Situs Term of Use web edukasi - ilmugrafis.com Indonesia
© 2008 - 2014 ilmuGrafis.com Design and Development by IG Team.
All other trademarks are the property of their respective owners.
kembali ke atas / back to top