PENGERTIAN JQUERY

Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript.

Hal yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig.

JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. 

JQuery sendiri berlisensikan GNU General Public License dan MIT License.

Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut: 

1. Kemudahan mengakses elemen-elemen HTML

2. Memanipulasi elemen HTML

3. Memanipulasi CSS

4. Penanganan event HTML

5. Efek-efek javascript dan animasi

6. Modifikasi HTML DOM

7. AJAX

8. Menyederhanakan kode javascript lainnya

Untuk memudahkan dalam memahami JQuery, sangat dianjurkan terlebih dahulu paham dan menguasai pengkodean HTML, CSS dan Javascript. Secara standar, apabila kita membuat kode javascript, maka diperlukan kode yang sangat panjang. Bahkan terkadang sangat sulit untuk di pahami. Misalnya, fungsi javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut :

function stripe (id) {

var even = false;

var evenColor = arguments [1] ? arguments [1] : "#fff";

var oddColor = arguments [2] ? arguments [2] : "#eee";

var table = document.getElementById (id);

if ( ! table) {return;}

var tbodies = table.getElementsByTagName ("tbody");

for (var h = 0; h < tbodies.lenght; h++) {

var trs = tbodies[h].getElementsByTagName("tr");

for (var i = 0; i < trs.lenght; i++) {

if ( ! hasClass(trs[i])) && ! trs[i] . style.backgroundColor) {

var tds = trs[i].getElementsByTagName("td");

for (var j = 0; j < tds.lenght; j++) {

var mytd = tds[j];

if ( ! hasClass(mytd) && ! mytd.style.backgroundColor) {

mytd.style.backgroundColor = even ? evenColor : oddColor;

}

  }

    }

      }

        }

          }

Nah, disinilah peran JQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam library tersebut, dan hal yang menarik disini adalah kita hanya membutuhkan satu baris untuk membuat warna selang-seling pada suatu tabel.

Read More

CSS FONT

CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.

• Font Family
• Font Size
• Font Style
• Font Variant
• Font Weight
• Font Color
• Font Property

Read More

Class dan ID Selector

Masih ingat kan pada pelajaran syntax CSS bagian pertama yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag

. Sekarang bagaimana jika anda ingin memformat tag

dengan warna / property berbeda? Misalkan, anda ingin tag

di kolom kiri berwarna biru sementara tag

di kolom tengah berwarna hitam.

Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.

Class Selector

Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:

.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {Property:value;}

Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag

dan di akhiri dengan tag
. Contoh:
Penulisan kode CSS:

.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}

Pemakaian kode CSS

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

Hasil:

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

ID Selector

ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.
Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag

dan di akhiri dengan tag
.

Read More