javascript without jquery

JavaScript Tanpa jQuery

Tips dan contoh praktis, dari postingan CatsWhoCode.

Daftar isi

1. Mendengarkan Dokumen Siap
2. Menambahkan Pendengar Acara
3. Memilih Elemen
4. Menggunakan Ajax
5. Menambah dan Menghapus Kelas
6. Memudar
7. Menyembunyikan dan Menampilkan Elemen
8. Manipulasi DOM

Mendengarkan Dokumen Siap

Sebuah halaman tidak dapat dimanipulasi dengan aman sampai dokumennya "siap". Oleh karena itu, kami para pengembang memiliki kebiasaan untuk menggabungkan semua kode JS kami di dalam fungsi jQuery $(document).ready() :

 $ ( document ) . ready ( function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

Hasil yang sama dapat dicapai dengan mudah menggunakan JavaScript murni:

 document . addEventListener ( 'DOMContentLoaded' , function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

Menambahkan Pendengar Acara

Event Listener adalah bagian yang sangat penting dalam pengembangan JavaScript. jQuery memiliki cara yang sangat mudah untuk menanganinya:

 $ ( someElement ) . on ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

Anda tidak memerlukan jQuery untuk membuat pendengar acara di JavaScript. Berikut cara melakukannya:

 someElement . addEventListener ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

Memilih Elemen

jQuery membuatnya sangat mudah untuk memilih elemen menggunakan ID, nama kelas, nama tag, dll:

 // By ID
$ ( '#myElement' ) ;

// By Class name
$ ( '.myElement' ) ;

// By tag name
$ ( 'div' ) ;

// Children
$ ( '#myParent' ) . children ( ) ;

// Complex selecting
$ ( 'article#first p.summary' ) ;

JavaScript murni menampilkan berbagai cara untuk memilih elemen. Semua metode di bawah ini berfungsi pada semua browser modern serta IE8+.

 // By ID
document . querySelector ( '#myElement' ) ;

// By Class name
document . querySelectorAll ( '.myElement' ) ;

// By tag name
document . querySelectorAll ( 'div' ) ;

// Children
document . querySelectorAll ( 'myParent' ) . childNodes ;

// Complex selecting
document . querySelectorAll ( 'article#first p.summary' ) ;

Menggunakan Ajax

Seperti yang diketahui sebagian besar dari Anda, Ajax adalah seperangkat teknologi yang memungkinkan Anda membuat aplikasi web asinkron. jQuery memiliki serangkaian metode yang berguna untuk Ajax, termasuk get() seperti yang ditunjukkan di bawah ini:

 $ . get ( 'ajax/test.html' , function ( data ) {
  $ ( '.result' ) . html ( data ) ;
  alert ( 'Load was performed.' ) ;
} ) ;

Meskipun jQuery membuat pengembangan Ajax lebih mudah dan cepat, sudah pasti Anda tidak memerlukan kerangka kerja untuk menggunakan Ajax:

 var request = new XMLHttpRequest ( ) ;
request . open ( 'GET' , 'ajax/test.html' , true ) ;

request . onload = function ( e ) {
  if ( request . readyState === 4 ) {

    // Check if the get was successful.

    if ( request . status === 200 ) {
      console . log ( request . responseText ) ;
    } else {
      console . error ( request . statusText ) ;
    }
  }
} ;

Menambah dan Menghapus Kelas

Jika Anda perlu menambah atau menghapus kelas elemen, jQuery memiliki dua metode khusus untuk melakukannya:

 // Adding a class
$ ( '#foo' ) . addClass ( 'bold' ) ;

// Removing a class
$ ( '#foo' ) . removeClass ( 'bold' ) ;

Tanpa jQuery, menambahkan kelas ke suatu elemen cukup mudah. Untuk menghapus kelas, Anda harus menggunakan metode replace() :

 // Adding a class
document . getElementById ( 'foo' ) . className += 'bold' ;

// Removing a class
document . getElementById ( 'foo' ) . className = document . getElementById ( 'foo' ) . className . replace ( / ^bold$ / , '' ) ;

Memudar

Berikut adalah contoh praktis mengapa jQuery begitu populer. Memudarkan suatu elemen hanya membutuhkan satu baris kode:

 $ ( el ) . fadeIn ( ) ;

Efek yang sama persis dapat dicapai dalam JavaScript murni, tetapi kodenya jauh lebih panjang dan rumit.

 function fadeIn ( el ) {
  el . style . opacity = 0 ;

  var last = + new Date ( ) ;
  var tick = function ( ) {
    el . style . opacity = + el . style . opacity + ( new Date ( ) - last ) / 400 ;
    last = + new Date ( ) ;

    if ( + el . style . opacity < 1 ) {
      ( window . requestAnimationFrame && requestAnimationFrame ( tick ) ) || setTimeout ( tick , 16 ) ;
    }
  } ;

  tick ( ) ;
}

fadeIn ( el ) ;

Menyembunyikan dan Menampilkan Elemen

Menyembunyikan dan menampilkan elemen adalah tugas yang sangat umum. jQuery menawarkan metode hide() dan show() untuk memodifikasi tampilan suatu elemen.

 // Hiding element
$ ( el ) . hide ( ) ;

// Showing element
$ ( el ) . show ( ) ;

Dalam JavaScript murni, menampilkan atau menyembunyikan elemen tidaklah lebih rumit:

 // Hiding element
el . style . display = 'none' ;

// Showing element
el . style . display = 'block' ;

Manipulasi DOM

Memanipulasi DOM dengan jQuery sangatlah mudah. Katakanlah Anda ingin menambahkan elemen <p> ke #container :

 $ ( '#container' ) . append ( '<p>more content</p>' ) ;

Melakukannya dalam JavaScript murni juga bukan masalah besar:

 document . getElementById ( 'container' ) . innerHTML += '<p>more content</p>' ;