tutorial dreamweaver _ web desain _ belajar html & css jquery

7/26/2019 Tutorial Dreamweaver _ Web Desain _ Belajar HTML & CSS Jquery

1/4

20/6/2016 Tutorial Dreamweaver | Web Desain | Belajar HTML & CSS

http://www.ilmugrafis.com/dreamweaver.php?page=pengenalan-jquery-website

Home Tutorials Fonts iStore Contact Search

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,jQuerysekarang telah menjadi bahan wajib bagi

web desainer maupun blogger. Sebenarnya apa itu jQuery?

jQuery adalah library javascript,jQueryberisi kumpulan kode-kode/fungsi-fungsi yangsiap pakai

sehingga mempermudah dan mempercepat waktu kita dalam menuliskan kode javascript, karena

kita hanya memanggil fungsi-fungsi yang kita butuhkan yang tentu saja suda h 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 baik nya 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 Anda dengan cara:

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 Serverterlebih 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 k edalam 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()

PHOTOSHOP

Photoshop Dasar

Photoshop Teks Effect

Photoshop Photo Efek

Photoshop Alternatif

Photoshop Plugins

CORELDRAW

CorelDRAW Dasar

CorelDRAW Logo

CorelDRAW Bebas

CorelDRAW Tools

BLENDER 3D

Blender Dasar

FOTOGRAFI

Lightroom

VECTOR

Adobe I llustrator

ANIMASI

Flash

Swishmax

3D MODELING

3dsMAX

AutoCAD

Cinema 4D

VIDEO EDITING

Adobe P remiere

After E ffect

Pinnacle

WEB DESIGNDreamweaver

jQuery

PUBLISHING

InDesign

Ms. Paint

FREEWARE

Gimp

Inkscape
http://www.ilmugrafis.com/dreamweaver.phphttp://www.ilmugrafis.com/flash.phphttp://www.ilmugrafis.com/ex-illuistrator_vector.phphttp://www.ilmugrafis.com/dreamweaver.php?page=belajar-membuat-website-basic-htmlhttp://www.ilmugrafis.com/lightroom.phphttp://www.ilmugrafis.com/dreamweaver.php?page=pengenalan-jquery-websitehttp://www.ilmugrafis.com/coreldraw_free.phphttp://www.ilmugrafis.com/coreldraw_logo.phphttp://www.ilmugrafis.com/anggota.php?page=mifta-afinahttp://www.ilmugrafis.com/dreamweaver.php?page=pengenalan-jquery-websitehttp://www.ilmugrafis.com/photoshop_alternatif.phphttp://www.ilmugrafis.com/photoshop_foto.phphttp://www.ilmugrafis.com/freeware-inkscape.phphttp://www.ilmugrafis.com/gimp.phphttp://www.ilmugrafis.com/microsoft_paint.phphttp://www.ilmugrafis.com/indesign.phphttp://www.ilmugrafis.com/web-jquery.phphttp://www.ilmugrafis.com/dreamweaver.phphttp://www.ilmugrafis.com/pinnacle.phphttp://www.ilmugrafis.com/after-effect.phphttp://www.ilmugrafis.com/adobe-premiere.phphttp://www.ilmugrafis.com/cinema4d.phphttp://www.ilmugrafis.com/autocad.phphttp://www.ilmugrafis.com/3dmax-studio.phphttp://www.ilmugrafis.com/swishmax.phphttp://www.ilmugrafis.com/flash.phphttp://www.ilmugrafis.com/ex-illuistrator_vector.phphttp://www.ilmugrafis.com/lightroom.phphttp://www.ilmugrafis.com/blender-dasar.phphttp://www.ilmugrafis.com/coreldraw_download_tools.phphttp://www.ilmugrafis.com/coreldraw_free.phphttp://www.ilmugrafis.com/coreldraw_logo.phphttp://www.ilmugrafis.com/coreldraw_dasar.phphttp://www.ilmugrafis.com/photoshop_download_tools.phphttp://www.ilmugrafis.com/photoshop_alternatif.phphttp://www.ilmugrafis.com/photoshop_foto.phphttp://www.ilmugrafis.com/photoshop_teks.phphttp://www.ilmugrafis.com/photoshop_dasar.phphttp://www.ilmugrafis.com/dreamweaver.php?page=membuat-server-local-laptop-pchttp://www.jquery.com/http://www.ilmugrafis.com/dreamweaver.php?page=belajar-membuat-website-basic-htmlhttp://www.ilmugrafis.com/dreamweaver.php?page=pengenalan-jquery-websitehttp://www.ilmugrafis.com/anggota.php?page=mifta-afinahttp://www.ilmugrafis.com/dreamweaver.php?page=pengenalan-jquery-websitehttp://www.ilmugrafis.com/dreamweaver2.phphttp://www.ilmugrafis.com/dreamweaver1.phphttp://www.ilmugrafis.com/dreamweaver.phphttp://www.ilmugrafis.com/index.phphttp://www.ilmugrafis.com/kontak.phphttp://www.ilmugrafis.net/http://www.ilmugrafis.com/fonts.phphttp://www.ilmugrafis.com/tutorial.phphttp://www.ilmugrafis.com/


2/4



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:

Web Design | ilmugrafis.com

$(document).ready(function(){

$("button").click(function(){

$("p").hide(1000)

})

})

Tulisan ini akan bereaksi

Klik tombol ini

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:

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,

ARTS

News

Artikel

Gallery

Jasa Desain

Donasi

FRIENDS

Photoshop Desain
http://photoshopdesain.com/http://www.ilmugrafis.com/donation.phphttp://www.ilmugrafis.com/services-jasa-desain.phphttp://www.ilmugrafis.com/gallery.phphttp://www.ilmugrafis.com/artikel.phphttp://www.ilmugrafis.com/news.phphttp://www.ilmugrafis.com/dreamweaver_9_test.php


3/4



mengubah selector dari button menjadi p atau sebaliknya, dan lain-lain. Selamat bereksplorasi.

Sampai disini dulu pengenalan JQuery, Sampai ketemu di tutorial - tutorialyang lain. Terima kasih,

semoga bermanfaat

Share URL

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

http://www.ilmugrafis.com/dreamweaver.php?page=pengenalanjquerywebsite

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)

Launcher Web Ilmugrafis

Info dan Kontak Penulis

Miftah Afina

TTL : Pemalang, 5 Agustus 1994

Email : [email protected]

Telp/HP: 085742302328

Blog : http://recent.ilmugrafis.infoFacebook : facebook.com/phynt

Pesan: "Segalanya berawal dari kesederhanaan"

Rekomendasi Resmi dari ilmuGrafis.com

Dapatkan hanya di ILMUGRAFIS STORE

Website HTML CSS

Video Tutorial Cara Pembuatan Website dengan

HTML Fundamental dan CSS Style

Pemrograman PHP

Video Tutorial Cara Membuat dan Memprogram

Website Dinamis dengan PHP

Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website

dengan Dreamweaver dan Photoshop

Desain Website Dreamweaver 2

Dalam CD Tutorial ini diajarkan cara membuat

website secara lebih detail dari seri sebelumnya
http://www.ilmugrafis.net/dvd-webmaster.phphttp://www.ilmugrafis.net/index.php?page=video-tutorial-webdesain-dreamweaverhttp://www.ilmugrafis.net/index.php?page=video-tutorial-php-web-programminghttp://www.ilmugrafis.net/index.php?page=video-tutorial-xhtml-csshttp://www.ilmugrafis.net/http://www.facebook.com/phynthttp://phynt.blogspot.com/http://www.ilmugrafis.org/ilmugrafis-launcher.phphttp://www.ilmugrafis.com/tutorial.php


4/4



[adv.] Supported by

DumetSchool.com

Peta Situs | Term of Use web edukasi - ilmugrafis.c om Indones

Copyright 2016 ilmuGrafis, All Rights Reserved. | RSS| Subscribe

Hak Cipta Dilindungi Undang - Undang & Dmca
http://extremetracking.com/open?login=igrafis9http://www.dmca.com/Protection/Status.aspx?ID=af30df46-48ae-437d-9dfa-fc7099dcf682http://feeds.feedburner.com/ilmugrafisindonesiahttp://www.ilmugrafis.com/rss.xmlhttp://www.ilmugrafis.com/services.php?page=term-of-use-ilmugrafishttp://www.ilmugrafis.com/services.php?page=sitemap-ilmugrafishttp://www.dumetschool.com/

tutorial dreamweaver _ web desain _ belajar html & css jquery

Documents