Panduan Lengkap Belajar JavaScript

Panduan Lengkap Belajar JavaScript: 1 – Level Pemula

Panduan Lengkap Belajar JavaScript: 1 – Level Pemula disarikan dari JavaScript basics – MDN.

Catatan: Panduan ini masih dalam tahap pengembangan. Silakan bookmark dan buka kembali untuk melihat perubahannya di kemudian hari.

Daftar Isi [buka]

Apakah JavaScript itu?

JavaScript adalah bahasa pemrograman dinamis yang, jika diterapkan dalam sebuah dokumen HTML, dapat menyajikan fitur interaktivitas pada website. Diciptakan oleh Brendan Eich, co-founder proyek Mozilla, Mozilla Foundation, dan Mozilla Corporation.
Kita bisa membuat berbagai fitur interaktif dengan JavaScript. Kita bisa mulai dari fitur sederhana seperti carousel, galeri gambar, layout fluktuatif, atau respon atas klik tombol. Setelah kita lebih berpengalaman dengan bahasa ini, kita bisa membuat game, grafis animasi 2D dan 3D, aplikasi data-driven, dan lebh banyak lagi!
JavaScript sendiri cukup ramping sekaligus fleksibel, dan para pengembang telah membuat banyak tool yang dibangun di atas core JavaScript agar kita dapat menerapkan berbagai fungsionalitas ekstra dengan script pendek saja. Tool semacam ini meliputi:

• Application Programming Interfaces (API) yang dibangun ke dalam browser web yang menyajikan berbagai fungsionalitas seperti menyusun HTML dan mengatur CSS, memuat dan memanipulasi video stream dari web cam pengguna, maupun penciptaan grafik 3d atau sampel audio.
• Third-party API untuk memampukan para pengembang memuat fungsionalitas dalam website mereka dari properti luar, misalnya Twitter atau Facebook.
• Third-party framework / library yang bisa kita terapkan dalam dokumen HTML untuk mempercepat proses pembuatan website atau aplikasi.

---

Contoh “hello world” dengan JavaScript

Mempelajari JavaScript tidak sesederhana HTML atau CSS sehingga kita harus belajar secara bertahap dengan script-script pendek. Kita akan memulainya dengan belajar cara menambahkan script JavaScript untuk menciptakan laman “hello world!”.

• Unduh zip file contoh one page site ini.
• Ekstrak file zip yang telah terunduh -> buka file index.html dengan browser. Anda akan melihat contoh laman dengan teks heading “Mozilla is cool”.
  
• Masuk ke dalam folder hasil ekstraksi -> buat folder scripts
  
• Masuk dalam folder scripts -> buat file main.js
  
• Buka file index.html -> tuliskan kode berikut sebelum tag </body>:
  

<script src="scripts/main.js"></script>

• Buka file main.js -> tuliskan kode berikut:

var teksJudul = document.querySelector('h1');
teksJudul.innerHTML = 'Hello world!';

• Simpan seluruh perubahan, lalu reload index.html di browser. Jika langkah-langkah Anda tepat, browser akan menampilkan laman seperti ini:

Catatan: Seluruh elemen <script> biasanya selalu diletakkan di bagian bawah dokumen HTML untuk memastikan seluruh elemen lainnya lebih dahulu termuat lengkap pada browser. Pengecualian dari prinsip ini adalah saat memuat library yang harus dijalankan sebelum/saat laman dimuat, misalnya untuk page loading dari PACE library.

Apa yang terjadi?

Teks heading “Mozilla is cool” telah terganti dengan “Hello world!”.
Kita melakukan hal ini dengan menerapkan function querySelector() yang menyeleksi heading (h1), dan menyimpannya dalam variable teksJudul. Hal ini mirip dengan penggunaan CSS selector untuk menyeleksi suatu elemen.
Kemudian, kita memberikan value 'Hello world!' untuk property innerHTML milik variable teksJudul.
Oke, jangan dulu pusing dengan berbagai terma di atas Kita akan membahasnya satu per satu sekarang.

---

Kursus Kilat Dasar-dasar JavaScript

Kita akan membahas beberapa fitur dasar JavaScript untuk memahami bagaimana script di atas bekerja. Yang menarik dari bahasan ini adalah: fitur-fitur tersebut berlaku secara umum pada semua bahasa pemrograman. Artinya, jika kita memahami dasar-dasar ini, kita akan bisa melakukan hampir segala jenis pemrograman!

Catatan: Selama membaca uraian berikut, cobalah mengetikkan dan menjalankan (Enter) baris-baris kode yang ada ke dalam browser console untuk melihat hasilnya. Untuk membuka browser console, gunakan shortcut berikut:
Firefox = Ctrl + Shift + K
Chrome = Ctrl + Shift + J

---

Variables (peubah)

Variable (peubah) adalah wadah untuk menyimpan value (nilai). Kita bisa menyatakan variable dengan keyword var diikuti sebuah nama:
var namaVariable;

Catatan: Setiap baris dalam JS (JavaScript) harus diakhiri dengan semicolon (titik koma). Jika kita melewatkannya, bisa jadi muncul hasil yang tak diharapkan.

Kita bisa memberikan berbagai nama pada suatu variabel dengan beberapa pengecualian, yakni:

• JavaScript reserved words
• Angka di awal nama tidak valid, misalnya var 10juta. Angka di tengah nama valid, misalnya var per4an.
• Nama yang memuat operator aritmatika tidak valid, misalnya var satu+dua atau var dua*satu.
• Tanda baca apapun tidak valid kecuali underscore (garis bawah). Jadi, var nama_saya atau var _kamu valid, tetapi var F#mayor atau var jum'at tidak valid.
• Spasi di dalam nama tidak valid, misalnya var nama saya.

Catatan: Nama variable dalam JS bersifat case-sensitive, artinya huruf kapital dan kecil tidak sama. Misalnya, var namaMu berbeda dengan var namamu. Hal ini sering menjadi sumber bug, jadi tolong cermati!

---

Comments (catatan)

---

Operators (pengubah)

---

Conditionals (persyaratan)

---

Functions (fungsi)

---

Events (kejadian)

---

Contoh Penerapan JavaScript Dasar pada Website

---

Membuat Image Changer (pengubah gambar)

---

Membuat Welcome Message (pesan selamat datang)

---

Kesimpulan