Belajar Cara Membuat JavaScript Bagi disarikan dari
JavaScript basics – MDN.
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!