Tutorial Belajar JavaScript Part 8: Pengertian Core JavaScript dan DOM (Document Object Model)

Pada tutorial JavaScript part 1 – part 7, kita belum membahas cara penulisan kode program JavaScript. Di dalam tutorial-tutorial tersebut, kita mempersiapkan ‘lingkungan’ yang harus diketahui untuk dapat dengan mudah memahami dan manjalankan JavaScript.

Mempelajari JavaScript pada dasarnya terdiri dari 2 bagian besar, yakni JavaScript Inti (sering disebut dengan istilah: Core JavaScript), serta API yang disediakan oleh web browser (yang dikenal dengan istilah DOM, singkatan dari Document Object Model). Pada tutorial kali ini kita akan membahas Pengertian Core JavaScript dan DOM (Document Object Model) dalam JavaScript.


Pengertian Core JavaScript

Core JavaScript atau JavaScript inti adalah istilah yang merujuk kepada ‘Bahasa Pemograman JavaScript‘. Pada bagian Core JavaScript inilah kita akan belajar tentang aturan pemograman yang umumnya dipelajari, seperti cara pendefenisian variabel, perbedaan tipe-tipe data, cara pembuatan array, cara penulisan struktur IF, serta cara pembuatan Objek.

Bagian Core JavaScript membahas tentang “bahasa” (atau syntax) dari JavaScript. Jika anda pernah menggunakan bahasa pemograman seperti C++ atau PHP, tidak akan terlalu sulit untuk mempelajari aturan penulisan dalam JavaScript.

Perbedaan mendasar antara JavaScript dengan dengan bahasa pemograman lain, adalah sifat JavaScript yang lebih berorientasi ke Objek. Namun JavaScript ‘tidak mengharuskan’ menggunakan objek. Saya menyebutnya ‘tidak harus’ karena kita bisa membuat beberapa kode program yang seolah-olah tanpa menggunakan objek. Contohnya adalah fungsi alert.

Pada tutorial sebelumnya, saya menggunakan fungsi alert untuk menampilkan hasil JavaScript. Fungsi ini dipanggil dengan perintah fungsi biasa:

<script>
alert(‘Hello World’);
</script>

Fungsi alert sebenarnya adalah method dari objek window dalam JavaScript, yang seharusnya dipanggil dengan struktur objeknya:

<script>
window.alert(‘Hello World’);
</script>

Penjelasan tentang objek windows ini, dan juga kenapa kita tidak harus menuliskannya, akan kita bahas pada tutorial tersendiri.

Core JavaScript juga merupakan istilah untuk JavaScript yang tidak terikat dengan ‘lingkungannya’ yaitu web browser. Selama ini JavaScript hanya dikenal sebagai bahasa tipe client-side JavaScript yang dijalankan di dalam web browser.

Akan tetapi, perkembangan JavaScript saat ini juga mendukung penggunaanya di sisi server (salah satunya dengan menggunakan node.js).


Pengertian DOM (Document Object Model)

Bagian kedua yang akan kita pelajari dalam menguasai Client-Side JavaScript adalah DOM (singkatan dari Document Object Model). DOM adalah API (Application Programming Interface) yang disediakan web browser kepada programmer.

Secara sederhananya, DOM adalah kumpulan aturan atau cara bagi programmer untuk ‘memanipulasi’ apapun yang tampil dalam halaman web. DOM tidak terikat dengan JavaScript, dan sepenuhnya bukan bagian dari JavaScript. DOM yang sama bisa juga diakses dengan bahasa client-side lain seperti JScript.

Tag atau element yang ada di dalam HTML diatur di dalam DOM. Dengan menggunakan JavaScript, kita bisa memanipulasi seluruh tag HTML ini. Salah satu contoh DOM yang telah kita gunakan adalah fungsi document.getElementById.

Fungsi document.get ElementById berfungsi untuk mencari sebuah tag HTML berdasarkan id. Selain document.getElementById, dalam DOM juga disediakan fungsi lain seperti document.getElementByName, document.getElementByClass, dan lain-lain. Fitur-fitur seperti inilah yang akan kita pelajari pada bagian DOM.

Karena sifatnya yang berbeda, tutorial JavaScript di duniailkom akan memisahkan Core JavaScript dengan DOM.

Untuk tahap awal saya akan membahas tentang Core JavaScript, dan setelah itu baru mempelajari struktur dan aturan DOM dari web browser. Dalam tutorial berikutnya, kita akan mempelajari aturan dasar penulisan kode program JavaScript.


eBook JavaScript Uncover Duniailkom
JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

Tutorial Terkait:

12 Comments

  1. Aldi Unanto
    26 Jun 14
    • Cecep
      14 Dec 14
  2. ALE ALE
    01 Dec 14
    • Andre
      01 Dec 14
    • Aldi Unanto
      15 Apr 15
    • Andre
      16 Apr 15
  3. tiyas
    15 Dec 15
  4. August
    29 Mar 16
    • Andre
      30 Mar 16
  5. Kurnain
    20 Dec 16
    • Andre
      21 Dec 16

Add Comment