POSTINGAN VAROKAH: November 2016

jQuery beginer : Manipulasi HTML dan CSS dengan jQuery

Definisi jQuery

jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML. Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan sebuah perangkat lunak bebas sumber terbuka yang berada di bawah lisensi MIT.

Sintaks jQuery dirancang sedemikian rupa untuk memudahkan pengembang website dalam menavigasi dokumen, menyeleksi elemen-elemen DOM, menerapkan animasi, mengaplikasikan events, serta membangun aplikasi AJAX. jQuery juga memampukan developer menciptakan berbagai plugin berbasis library JavaScript. Dengan plugin-plugin tersebut, pengembang situs web mampu menyusun sejumlah abstraksi untuk interaksi dan animasi sederhana, juga beberapa efek yang cukup kompleks dan berbagai widget yang dapat dikonfigurasikan. Karakter library JavaScript yang modular mendukung pengembangan laman web dinamis dengan berbagai fitur dan aplikasi berbasis web (web app).

Fitur-fitur inti jQuery – meliputi penyeleksian, traversal, dan manipulasi elemen-elemen DOM – dimampukan oleh sebuah selector engine (dinamai Sizzle mulai versi 1.3), telah mewujudkan suatu gaya pemrograman baru yang memadukan antara algoritma dan struktur data DOM. Gaya ini telah mempengaruhi arsitektur dari framework JavaScript lainnya seperti YUI v3 dan Dojo, dan di kemudian menstimulasi pengembangan Selectors API standar.

Microsoft dan Nokia membundel jQuery pada platform mereka. Microsoft memasukkannya dalam Visual Studio untuk digunakan dalam framework ASP.NET AJAX dan ASP.NET MVC, sedangkan Nokia mengintegrasikannya dalam platform pengembangan widget Web Run-Time. jQuery juga mulai dipakai pada MediaWiki sejak versi 1.16.

Situs resmi jQuery beralamat di jquery.com. Pengembangannya dikelola oleh jQuery Foundation yang berada di jquery.org. Library ini bisa diunduh di laman jquery.com/download, atau diterapkan melalui sejumlah CDN termasuk Google jQuery CDN.

Membedah jQuery

jQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM. DOM merupakan representasi struktural dari seluruh elemen pada sebuah laman web. Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan manipulasi elemen-elemen DOM menjadi simpel dan mudah. Sebagai contoh, jQuery bisa dipergunakan untuk menemukan sebuah elemen dalam dokumen yang memiliki properti tertentu (misalnya: elemen dengan tag `h1`), kemudian mengubah satu atau beberapa atributnya (misalnya: warna, visibilitas), atau menjadikan elemen tersebut responsif terhadap suatu event (misalnya: klik mouse).

Selain penyeleksian dan manipulasi DOM dasar, jQuery menyajikan sebuah paradigma baru pada penanganan event oleh JavaScript. Penugasan event dan pendefinisian fungsi event callback dapat dilakukan dengan satu langkah dalam satu lokasi di dalam kode. jQuery juga dikembangkan untuk mendayagunakan berbagai fungsionalitas JavaScript yang paling sering dipakai (misalnya: fade in atau fade out ketika menentukan visibilitas elemen, juga bermacam animasi yang dimunculkan dengan memanipulasi properti-properti CSS).

Keuntungan dari pemanfaatan jQuery

1. Memisahkan JavaScript dan HTML → Tanpa menggunakan atribut-atribut HTML untuk memanggil fungsi Javascript dalam penanganan event, jQuery bisa dipergunakan untuk menangani event dengan script JS saja.

2. Singkat dan Jelas → jQuery mengutamakan penulisan kode yang singkat dan jelas melalui berbagi fitur seperti fungsi-fungsi yang dapat dirangkaikan (chain-able) dan nama-nama fungsi yang pendek.

3. Mengatasi masalah kompatibilitas antar-browser → JavaScript engine pada berbagai browser memiliki perbedaan satu sama lain, sehingga script yang berjalan pada suatu browser bisa gagal pada browser lainnya. jQuery mengatasi segala inkonsistensi antar-browser tersebut dan menyajikan antarmuka yang konsisten bekerja pada semua browser.

4. Ekstensibel → jQuery menjadikan pengembangan framework sangat simpel. Berbagai event, elemen, dan metode baru dapat dengan mudah ditambahkan dan digunakan ulang sebagai plugin.

Fitur-fitur jQuery

jQuery memiliki fitur-fitur sebagai berikut:

Penyeleksian elemen-elemen DOM menggunakan selector engine Sizzle. Sizzle merupakan perangkat lunak multiplatform sumber terbuka yang berawal sebagai proyek sampingan jQuery. Manipulasi DOM berdasarkan selektor CSS yang memanfaatkan nama-nama dan atribut elemen, misalnya id dan class, sebagai kriteria seleksi simpul-simpul DOM.

Events

Efek dan animasi

AJAX

Obyek-obyek deferred and promose untuk mengontrol pemrosesan asinkron

Penguraian JSON

Ekstensibilitas melalui plugin

Sejumlah utilitas, misalnya: informasi agen pengguna (user agent), deteksi fitur perangkat

Metode-metode kompatibilitas yang tersedia secara bawaan pada browser-browser modern, namun membutuhkan pencadangan pada browser yang lebih tua, misalnya `inArray()` dan `each`

Dukungan multi-browser

Browser yang Didukung jQuery Baik versi 1.x maupun 2.x dari jQuery, keduanya mendukung “current-1 versions” (artinya versi stable terkini dari sebuah browser dan satu versi yang mendahuluinya) untuk Firefox, Google Chrome, Safari, dan Opera.

Versi 1.x juga mendukung IE 6 atau diatasnya. Sedangkan versi 2.x tidak lagi mendukung Internet Explorer 6 sampai 8 (yang mewakili kurang dari 28% dari seluruh browser yang digunakan) dan hanya mendukung IE 9 dan selanjutnya.

Penggunaan jQuery

Menautkan library, Library jQuery adalah sebuah file JavaScript yang memuat seluruh fungsi-fungsi umum DOM, event, efek, dan Ajax. File ini bisa ditautkan dalam sebuah laman web ke salinan pada server lokal atau pada salinan yang disajikan melalui server publik (CDN) antara lain:

1. MaxCDN

2. Google

3. Microsoft ASP.NET

4. cdnJs

5. jsDelivr

Untuk menautkan file jQuery pada server lokal, gunakan kode berikut:

Untuk menggunakan CDN, sisipkan kode berikut:

Gaya Penggunaan

jQuery memiliki dua gaya penggunaan:

Via fungsi $ → adalah factory method untuk obyek jQuery. Fungsi-fungsi semacam ini, kerap disebut sebagai commands (perintah), dapat dirangkaikan (chainable) sebab masing-masing menyajikan obyek.

Via fungsi $.-prefiks → fungsi-fungsi utilitas yang tidak dijalankan secara langsung pada obyek.

Pada penggunaan tipikal, akses dan manipulasi atas simpul-simpul DOM diawali dengan pemanggilan fungsi $ menggunakan string selektor CSS. Metode ini menghasilkan sebuah obyek jQuery yang merujuk pada elemen-elemen HTML yang sesuai.

Sebagai contoh, $(“div.namaclass”) akan menghasilkan obyek dengan tipe “div” dan class “namaclass”. Simpul ini dapat dimanipulasi dengan menyambungkan satu atau beberapa fungsi jQuery di belakangnya.

Mode No-Conflict, jQuery juga memuat mode .noConflict() yang melepaskan kontrol dari $. Fitur ini sangat berguna jika jQuery digunakan bersama dengan library lainnya yang juga memakai penanda $. Pada mode no-conflict, kita bisa menggunakan jQuery sebagai pengganti dari $ tanpa kehilangan fungsionalitasnya.

Manipulasi properti CSS

jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi

a. $(selector).css(name,value)

b. $(selector).css({properties})

c. $(selector).css(name)

Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih.

Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties} Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.

Contoh css():

<html>

<head>

$(document).ready(function(){

$("#tombol1").click(function(){

$(".p1").css("color","red");

$(".p2").css({"color":"white","background-

color":"#ff8954","font-family":"Arial","font-

size":"20px","padding":"5px"});

});

$("#tombol2").click(function(){

var nilai = $(".p1").css("color");

alert(nilai);

});

</script>

</head>

<body>

<p class="p1">Paragraf ini cuma berubah satu properti CSS</p>

<p class="p2">Paragraf ini cuma berubah banyak properti CSS</p>

<button id="tombol1">ubah CSS paragraf</button>

<button id="tombol2">Ambil nilai CSS paragraf 1</button>

</body>

</html>

Manipulasi CSS Size

Untuk memanipulasi ukuran dari elemen yang dipilih (tinggi dan lebar), maka ada dua fungsi untuk hal ini, yaitu :

a. $(selector).height(value)

b. $(selector).width(value)

Jika anda mengisi parameter value, maka artinya anda me-set nilai height atau width dari elemen yang anda pilih. Jika anda mengosongkan parameter value, maka artinya anda mengambil nilai height atau width dari elemen yang dipilih.

Contoh CSS size

<head>

$(document).ready(function(){

$("#tombol1").click(function(){

$("#kotak").width("300px");

$("#kotak").height("300px");

});

$("#tombol2").click(function(){

var nilai = $("#kotak").width();

alert(nilai);

});

</script>

</head>

<body>

Hello

</div>

<p>

<button id="tombol1">ubah ukuran kotak</button>

<button id="tombol2">Ambil nilai ukuran kotak</button>

</body>

</html>

Manipulasi Posisi

Untuk melakukan manipulasi posisi dari suatu elemen HTML, berikut beberapa fungsi jQuery untuk melakukannya.

offset(), Untuk mendapatkan atau me-set offset dari elemen yang dipilih. Relatif terhadap dokumen. Sintaks :

$(selector).offset(coordinates)

Parameter coordinates bisa berupa koordinat dari elemen yang dipilih, contoh :

offset({top:100,left:0})

Jika kita mengosongkan parameter coordinates, artinya kita mengambil nilai offset dari elemen yang kita pilih. Fungsi offset() akan menghasil objek yang mempunyai 2 properti yaitu top dan left.

Contoh offset()

<html>

<head>

<style>

#div1{

background-color : yellow;

width : 100px;

height : 100px;

position : relative;

left : 300;

}

</style>

$(document).ready(function(){

$("#tombol").click(function(){

posisi=new Object();

posisi.left=$("#x").val();

posisi.top=$("#y").val();

$("#div1").offset(posisi);

pos = $("#div1").offset();

alert("x="+pos.left+",y="+pos.top);

});

</script>

</head>

<body>

Hello World!

</div>

x = <input type=text size=4 id=x><br>

y = <input type=text size=4 id=y><br>

<button id=tombol>Set Offset</button>

</body>

</html>

offsetParent()

Untuk mendapatkan element parent terdekat dengan posisi yag telah ditentukan. Sintaks.

$(selector).offset()

Contoh offsetParent()

<html>

<head>

$(document).ready(function(){

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

$("p").offsetParent().css("background-color","green");

});

</script>

</head>

<body>

<p>Klik tombol untuk set background color untuk elemen parent terdekat

dari paragraf ini</p>

<div>

</div>

<button>ubah warna latar</button>

</body>

</html>

position()

Hampir sama dengan offset(), yaitu untuk mendapatkan atau menentukan posisi dari elemen, tetapi relatif terhadap parent. Fungsi position() akan menghasil objek yang mempunyai 2 properti yaitu top dan left.

Sintaks : $(selector).position()

Contoh :

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

x=$("p").position();

$("#div1").text(x.left);

$("#div2").text(x.top);

});

scrollLeft()

Untuk mendapatkan atau menentukan scroll left offset dari elemen yang dipilih.

Sintaks : $(selector).scrollLeft(offset)

Parameter offset adalah nilai dalam pixel elemen akan di scroll dari posisi kiri elemen tersebut. Jika parameter offset dikosongkan, maka artinya kita mengambil nilai offset dari scroll left elemen tersebut.

Contoh :

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

$("div").scrollLeft(300);

});

scrollTop()

Untuk mendapatkan atau menentukan scroll top offset dari elemen yang dipilih.

Sintaks : $(selector).scrollTop(offset)

Parameter offset adalah nilai dalam pixel elemen akan di scroll dari posisi atas elemen tersebut. Jika parameter offset dikosongkan, maka artinya kita mengambil nilai offset dari scroll Top elemen tersebut.

Contoh :

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

$("div").scrollTop(300);

});

Web Tab Scroll Content

Sekarang mari kita lihat contoh website, menggunakan jquery. Di mana web ini menggunakan tab-tab, yang me-load konten dengan melakukan animasi scroll terhadap konten yang kita sembunyikan.

Contoh scrollTop()

<html>

<head>

$(document).ready(function(){

$("#home").click(function(){

$("#konten").animate({ scrollTop: 0},"slow");

});

$("#about").click(function(){

$("#konten").animate({ scrollTop: 500},"slow");

});

$("#contact").click(function(){

$("#konten").animate({ scrollTop: 1000},"slow");

});

</script>

<style>

#konten{

height : 500px;

overflow: hidden;

background-color : yellow;

}

.box{

height : 500px;

margin:0;

padding : 0;

}

.link{

cursor : pointer;

background-color : lightyellow;

padding : 3;

}

body{

overflow:hidden;

}

#home{

background-color : green;

}

#about{

background-color : red;

}

#contact{

background-color : blue;

}

.aboutme{

background-color : black;

color : white;

font-size : 26pt;

font-family : garamond;

}

</style>

</head>

<body>

<span class=link id=about>About</span>

<span class=link id=contact>Contact</span>

<font size=7>Selamat Datang</font></center>

</div>

<br><b>About Me</b>

<p>

<span class=aboutme>Hi,namaku Cry Angels</span>

</p>

<p>

<span class=aboutme>Lahir di Indonesia</span></p>

<p>

<span class=aboutme>Punya Hobbi Tidur Seharian</span></p>

</div>

<br><b>Contact</b>
<form method="POST" action="--WEBBOT-SELF--" style="padding:10">

<p>

Nama :<br>

Emai : <br>

Komentar :<br>

<input type="submit" value="Submit" name="B1"><input type="reset"

value="Reset" name="B2"></p>

</form>

</div>

</body>

</html>

Untuk menghilangkan scroll di <div id=kontent> kita menggunakan CSS

overflow:hidden;

Ketika kita mengklik salah satu tab, maka kita membuat animasi scrolling menggunakan kode :

$("#konten").animate({ scrollTop: 500},"slow");

POSTINGAN VAROKAH

Rabu, 30 November 2016

jQuery beginer : Manipulasi HTML dan CSS dengan jQuery

Arsip Blog