JavaScript And DOM

Pada modul ini kita akan banyak berkenalan dengan JavaScript. Berbeda dengan HTML dan
CSS, sekarang kita berada di wilayah pemrograman yang benar-benar memanfaatkan logic
dalam penulisan kodenya. Pengembangan website tidak hanya mengandalkan seni untuk
membangun tampilan yang cantik, melainkan juga memerlukan bahasa pemrograman agar
meningkatkan fungsionalitas dan membuat website lebih interaktif.

Kita akan memulainya dengan memahami apa sebenarnya itu JavaScript, mencoba menulis dan
menggunakannya pada sebuah website. Selanjutnya kita akan mengenal variabel, fungsi
operator, perulangan dan hal lainnya. Kita juga akan belajar bagaimana memanipulasi elemen
menggunakan syntax JavaScript, menampilkan alert dan mengetahui fungsi - fungsi dari Web
API yang ada seperti document, window dan sebagainya.

Pada akhir modul in kita akan menerapkan apa yang sudah kita pelajari pada project Web
Kalkulator sehingga kalkulator dapat berfungsi sebagai sesuai yang kita harapkan.

Apa itu JavaScript?

JavaScript merupakan bahasa pemrograman client-side sehingga seluruh prosesnya berjalan pada
sisi pengguna bukan server. JavaScript diperlukan pada pengembangan website ketika kita
membutuhkan suatu interaksi dari pengguna. Sesungguhnya website hanya menampilkan konten
yang statis jika hanya menggunakan HTML dan CSS.

Karena diolah pada sisi client, JavaScript sangat bergantung pada pengaturan dan kemampuan
browser ketika melakukan sebuah proses (compiling atau rendering pada DOM). Bahkan
pengguna dapat sepenuhnya tidak mengizinkan JavaScript berjalan pada browser dengan
menonaktifkan dukungan JavaScript pada browser.

Meskipun memiliki nama JavaScript bahasa pemrograman ini sama sekali tidak ada
hubungannya dengan bahasa pemrograman Java. Sebenarnya pada tahun 1995 Netscape
melahirkan bahasa pemrograman ini dengan nama “LiveScript”, namun pada saat itu bahasa
pemrograman Java sedang populer. Untuk memanfaatkan kepopulerannya, namanya pun diubah
menjadi “JavaScript” dan benar bahasa pemrograman ini pun akhirnya memiliki popularitas
yang tidak kalah dari Java.

Setelah diadopsi di luar Netscape, JavaScript distandarisasi oleh European Computer

Manufacturer’s Association (ECMA) itulah sebabnya terkadang ada yang menyebutnya dengan
ECMAScript.

Terdapat beberapa versi dari JavaScript. Pada tahun 2000 - 2010, ECMAScript 3 merupakan
versi yang banyak digunakan ketika JavaScript sedang mendominasi. Selama waktu tersebut,
ECMAScript 4 sedang dalam proses pengembangan dengan harapan akan memberikan
improvisasi yang cukup signifikan, namun ambisi tersebut tidak berjalan mulus sehingga pada
tahun 2008 pengembangan ECMAScript 4 ditinggalkan. 

Walaupun begitu, ini bukan akhir dari JavaScript. Pengembangan digantikan dengan
ECMAScript 5 dengan mengurangi ambisinya dan hanya melakukan perbaikan pada hal yang
tidak jadi kontroversi. Pembaharuan tersebut berhasil dan akhirnya ECMAScript 5 rilis pada
tahun 2009.

Lalu pada tahun 2015 ECMAScript 6 rilis dengan membawa perubahan yang cukup besar
termasuk ide - ide yang sudah direncanakan untuk versi 4. Mulai dari itu tiap tahun JavaScript
melakukan update bersifat minor.

Menuliskan Syntax Javascript pada HTML

Sama seperti styling, untuk menggunakan JavaScript pada website kita bisa menerapkannya
melalui atribut HTML, embed script, atau menggunakan file external.

Atribut HTML

Untuk menuliskan JavaScript menggunakan atribut, kita bisa menerapkannya pada atribut event
seperti “onclick”, sehingga JavaScript akan dieksekusi ketika elemen tersebut ditekan oleh
kursor. Contohnya sebagai berikut:

1. <button onclick="alert('Anda menekan elemen button!')">Click di sini!

</p>

Ada banyak sekali atribut event yang dapat digunakan untuk menuliskan script di dalamnya. Kita
bisa lihat apa saja atributnya pada tautan berikut:
https://www.w3schools.com/tags/ref_eventattributes.asp.
Tentunya atribut tersebut kita gunakan sesuai dengan kebutuhan kita. onclick merupakan salah
satu atribut yang common atau banyak digunakan karena interaksi tersebut sering pengguna
lakukan.

Embedded Script

JavaScript juga dapat dituliskan dengan menanamnya (embedding) pada berkas HTML dengan
menggunakan elemen <script>.

1. <script>
2.    // JavaScript dituliskan di sini.
3. </script>

Elemen <script> dapat diletakan di dalam elemen <head> atau <body>. Akan tetapi jika kita
menerapkan banyak script pada elemen <head> proses memuat halaman akan menjadi lambat,
karena HTML akan membaca kode dari atas ke bawah.

External Script

Metode lainnya yaitu dengan menggunakan berkas external yang berekstensi .js. Di dalam berkas
tersebutlah seluruh JavaScript dituliskan. Keuntungan menggunakan metode ini adalah script
dapat diterapkan pada berbagai berkas HTML tanpa menuliskan ulang scriptnya (keuntungan
yang sama juga ketika kita menggunakan external css).

Untuk menghubungkan external script dengan berkas HTML, kita gunakan elemen <script> lalu
tambahkan atribut src dengan nilai alamat berkas .js yang digunakan.

1. <script src="berkas-javascript.js"></script>

Sama seperti Embedded Script kita bisa tuliskan elemen script tersebut di dalam elemen
<header> namun direkomendasikan untuk disimpan di dalam elemen <body> sebelum tag
penutup </body>.

Teknik inilah yang akan kita gunakan dalam penerapan JavaScript pada project kalkulator.
Membuat Berkas JavaScript Pertama
Setelah mengetahui beberapa metode untuk menuliskan JavaScript pada HTML, mari kita
terapkan salah satu metode yang sudah kita ketahui. Kita akan menerapkan metode external
script dengan membuat berkas JavaScript yang nantinya akan digunakan untuk menuliskan
script dari project kalkulator yang sudah kita buat.

Buka project kalkulator yang sudah kita buat. Di dalam folder assets, buat berkas baru dengan
memberikan nama “kalkulator.js”. Ingat berkas ini harus diakhiri dengan ekstensi .js. Ekstensi
tersebut menandakan bahwa berkas ini merupakan berkas JavaScript.

Setelah membuat berkas tersebut maka struktur dari proyek kalkulator akan tampak seperti
berikut:

Buka berkas kalkulator.js dan tuliskan kode JavaScript berikut:

1. console.log("Selamat Anda berhasil menggunakan JavaScript pada Website")

Jangan khawatir jika Anda belum memahami maksud dari kode tersebut, nanti akan dijelaskan
apa yang sudah kita tuliskan.

Simpan perubahan pada berkas JavaScript tersebut kemudian buka index.html dan tambahkan
elemen <script> dengan atribut src bernilai alamat berkas kalkulator.js. Tuliskan elemen
<script> tepat sebelum closing tag </body>.

1. ...........
2.    <script src="assets/kalkulator.js"></script>
3. </body>

Simpan perubahan pada index.html kemudian kita coba buka halaman tersebut dengan
menggunakan browser. Maka hasilnya akan nampak seperti ini.
Tidak ada perubahan apa apa bukan? Yups, benar. Tetapi ketika kita mencoba membuka console
pada DevTools kita akan mendapati pesan yang dituliskan menggunakan JavaScript. Silakan
buka console pada DevTools dengan menekan ctrl+shift+i.
Script yang kita tuliskan sebelumnya berfungsi untuk menampilkan sebuah data baik itu teks
(string) atau variabel, objek, fungsi dsb. Pada console website  console.log() biasanya digunakan
sebagai sarana debugging sederhana untuk mengetahui nilai dari suatu variabel.

Mungkin ini akan membuat Anda bingung jika tidak memiliki dasar pemrograman. Tak apa,
yang terpenting ketika pesan ini muncul pada console, itu menandakan kita sudah berhasil
menerapkan JavaScript pada website kita.

Dasar JavaScript
Wajar jika kita menemukan banyak buku JavaScript dengan halaman super tebal karena memang
banyak sekali bahasan seputar JavaScript ini. Tetapi pada materi ini kita rangkum menjadi
beberapa pembahasan penting yang Anda perlu ketahui. Tujuannya agar Anda familier dengan
dasar - dasar JavaScript. Dengan memahami dasar-dasar JavaScript, nantinya diharapkan kita
dapat terus berlatih sehingga terbiasa dengan penggunaan sintaksnya.

Ketika mempelajari bahasa pemrograman apapun pertama kita harus memahami logika yang
mendasari dari penulisan script, meskipun secara sintaksis setiap bahasa pemrograman berbeda
namun secara umum logikanya akan sama.

Maka dari itu hindari belajar dengan cara menghafal seluruh struktur kode yang dituliskan, tapi
belajarlah dengan memahami tujuan dari kode yang dituliskan. Dengan memahami kode-kode
yang ada dan dipadukan logika maka kita akan mudah dalam menghadapi suatu masalah -
masalah yang ada ketika mengembangkan suatu aplikasi/web.

Pada akhir materi ini, kita akan mengenal tentang variabel, array, operator komparasi, if else
statement dan masih banyak lagi. Sudah siap belajar?

Mungkin selama pembelajaran dasar JavaScript kita perlu mencoba coba kode yang sedang
dipelajari, disarankan untuk gunakan tools online seperti glot.io ketika menjalankan kodenya.
Atau Anda juga bisa mencobanya langsung pada console browser melalui DevTools. Silakan
baca artikel berikut sebelum melanjutkan pada materi selanjutnya:

Hadirnya glot.io memudahkan programmer untuk mencoba bahasa pemrograman baru.

Sebelum mengakhiri artikel kali ini, ada kabar baik bagi kalian para developer expert. Karena
glot.io merupakan open source, kamu pun dapat berkontribusi mengembangkannya. Terdapat
beberapa komponen yang dapat kamu manfaatkan langsung dari source code nya. Tak hanya itu,
kamu juga dapat menambahkan bahasa pemrograman atau library favorite-mu. Untuk repository
dan dokumentasinya, simak di bawah ini.  .

Begitulah tips singkat dari kami. Tetaplah mencoba, tetaplah belajar! Jika kalian memiliki tips
agar mudah mempelajari bahasa pemrograman baru, silakan share di kolom komentar ya. 
Variabel

Ketika mendengar variabel apakah Anda teringat tentang pelajaran matematika? Yups, variabel
di sini memiliki konsep yang sama. Variabel umumnya digunakan untuk menyimpan informasi
atau nilai yang akan dikelola di dalam sebuah program.

Sebelum ECMAScript 2015 (ES6) untuk membuat variabel pada JavaScript kita gunakan
keyword var.

1. var firstName = "Harry";

Tanda sama dengan (=) digunakan untuk menginisialisasikan nilai pada variabel, sehingga
sekarang variabel firstName memiliki nilai teks “Harry”.

Kita bisa menggunakan apapun yang kita mau untuk menamai sebuah variabel, tetapi pastikan
penamaannya masih masuk akal dengan konteksnya agar berikutnya kode mudah di-
maintenance.

Sebaiknya hindari penamaan variabel dengan istilah umum seperti “data”, Gunakanlah
penamaan variabel yang dapat mendeskripsikan nilai dari variabel itu sendiri. Berikut beberapa
aturan dalam penamaan variabel yang perlu Anda ketahui:

 Harus dimulai dengan huruf atau underscore (_).

 Dapat terdiri dari huruf, angka, dan underscore (_) dengan berbagai kombinasi.
 Tidak dapat mengandung spasi (white space), jika penamaan variabel lebih dari dua kata maka
tuliskan secara camelCase. Contoh firstName, lastName, catName, dll.
 Tidak dapat mengandung karakter spesial (! . , / \ + * = dll.)

Nilai variabel yang diinisialisasi menggunakan var dapat diubah kembali nilainya, contoh:

1. var firstName = "Harry";

2. console.log(firstName);
3.  
4. firstName = "Ron";
5. console.log(firstName);
6.  
7. /* output:
8. Harry
9. Ron
10. */

Sejak ECMAScript 2015 (ES6) selain var, menginisialisasikan variabel dapat menggunakan let
dan const. ES6 melakukan improvisasi pada deklarasi variabel karena menggunakan var terdapat
beberapa hal yang kontroversial, salah satunya hoisting.
Apa itu hoisting? sesuai artinya “Mengangkat” variabel yang dideklarasikan menggunakan var
ini dapat diinisialisasi terlebih dahulu sebelum dideklarasikan, Contoh:

1. x = 100;
2. var x;
3. console.log(x);
4.  
5. /* output: 100 */

Ini dikarenakan proses hoisting, sebenarnya di belakang layar deklarasi variabel x diangkat ke
atas sehingga kode yang tampak seperti ini:

1. var x;
2. x = 100;
3. console.log(x);
4.  
5. /* output: 100 */

Hoisting menjadi kontroversial karena tidak sedikit developer yang dibuat bingung akan hal ini.
Masalah ini sudah terselesaikan jika kita menggunakan let dalam mendeklarasikan variabel.

1. y = 100;
2. let y;
3. console.log(y);
4.  
5. /* ReferenceError: y is not defined */

Kemudian const digunakan untuk mendeklarasikan sebuah variabel yang sifatnya immutable
atau tidak perlu diinisialisasi kembali. Jika kita menginisialisasi kembali nilai variabel yang
menggunakan const, maka akan mendapati eror “TypeError: Assignment to constant variable.”

1. const z = 100;
2. console.log(z);
3.  
4. z = 200;
5. console.log(z)
6.  
7. /* TypeError: Assignment to constant variable. */

Dengan begitu sebaiknya kita gunakan let atau const ketika mendeklarasikan variabel daripada
menggunakan var.

Berikut snippet code dari contoh kode yang digunakan pada materi di atas, Anda bisa
mencobanya sendiri dengan mengubah nilai variabel dan menampilkannya pada console.