Materi JavaScript 1
Sekilas Mengenai JavaScript

JavaScript adalah bahasa pemrograman yang banyak digunakan untuk membuat halaman website menjadi lebih interaktif. Jika HTML dipakai untuk menyusun isi halaman dan CSS dipakai untuk mengatur tampilan, maka JavaScript dipakai untuk mengatur perilaku halaman.

1. Apa itu JavaScript?

JavaScript berjalan di dalam web browser seperti Google Chrome, Microsoft Edge, Mozilla Firefox, dan Safari. Ketika browser membaca file HTML, browser juga bisa menjalankan kode JavaScript yang ditulis di dalam tag <script> atau di file terpisah dengan ekstensi .js.

JavaScript bersifat fleksibel. Bahasa ini dapat dipakai untuk membuat website, aplikasi web, server, aplikasi mobile, bahkan beberapa aplikasi desktop. Namun pada tahap awal, kita akan fokus memakai JavaScript di dalam halaman HTML.

2. Peran JavaScript dalam website

3. Sejarah singkat JavaScript

JavaScript dibuat oleh Brendan Eich pada tahun 1995 ketika ia bekerja di Netscape. Pada awalnya, bahasa ini dibuat agar halaman web tidak hanya menampilkan informasi statis, tetapi juga dapat memberikan respons terhadap tindakan pengguna.

Nama awal JavaScript adalah Mocha, kemudian berubah menjadi LiveScript, dan akhirnya dikenal sebagai JavaScript. Walaupun namanya mirip dengan Java, JavaScript dan Java adalah bahasa pemrograman yang berbeda.

4. Tempat menulis JavaScript

Untuk latihan dasar, JavaScript bisa ditulis langsung di dalam file HTML menggunakan tag <script>. Biasanya tag ini diletakkan sebelum tag penutup </body> agar elemen HTML sudah terbaca lebih dulu.

5. Cara menyisipkan JavaScript

Ada tiga cara menempelkan JavaScript ke halaman. Cara pertama adalah inline, yaitu menulis kode di atribut elemen seperti onclick. Cara kedua adalah internal, yaitu menaruh kode di dalam tag <script> pada file HTML yang sama, seperti pada contoh di atas. Cara ketiga adalah eksternal, yaitu menaruh kode di file .js terpisah lalu memanggilnya dengan <script src="app.js"></script>. Untuk proyek yang lebih besar, cara eksternal paling disarankan karena kode lebih rapi, bisa dipakai di banyak halaman, dan disimpan oleh browser sehingga halaman lebih cepat dimuat.

<!-- file index.html -->
<button onclick="alert('Tombol ini inline')">Klik</button>
<script src="app.js"></script>

// file app.js
console.log("Halo dari file eksternal");

6. Analogi: restoran

Untuk memahami pembagian tugas, bayangkan sebuah restoran. HTML adalah menu dan susunan meja, yaitu isi dan struktur. CSS adalah dekorasi ruangan, seragam pelayan, dan tata cahaya. JavaScript adalah pelayan yang bergerak: mencatat pesanan ketika kamu memanggil, mengantar makanan, dan menanggapi permintaan tambahan. Tanpa JavaScript, restoran tetap berdiri dan tampak indah, tetapi tidak ada yang merespons pelanggan.

7. Apa yang bisa dilihat di console

Setiap browser menyediakan console, ruang untuk melihat pesan dari program dan mencoba perintah secara langsung. Buka dengan menekan F12, lalu pilih tab Console, dan ketik misalnya 2 + 3 lalu tekan Enter. Browser langsung menjawab 5. Console adalah tempat latihan yang aman: kamu tidak perlu membuat file apa pun dan tidak bisa merusak apa-apa selain halaman yang sedang terbuka.

// Coba ketik satu per satu di Console
2 + 3
"Halo " + "dunia"
document.title
Math.max(4, 9, 7)

Baris ketiga menampilkan judul halaman yang sedang dibuka, dan baris keempat memilih angka terbesar. Ini menunjukkan bahwa JavaScript dapat berbicara dengan halaman (document) serta memiliki pustaka bawaan seperti Math.

8. Kesalahan yang sering terjadi

• Mengira JavaScript sama dengan Java. Keduanya bahasa yang berbeda, hanya mirip nama.
• Menulis tag <script> di atas elemen yang dituju sehingga elemen belum ada saat kode berjalan.
• Lupa bahwa JavaScript membedakan huruf besar dan kecil; Alert tidak sama dengan alert.
• Mematikan JavaScript di browser lalu heran mengapa tombol tidak bereaksi.
• Salah menulis nama file pada src, sehingga file eksternal tidak termuat; periksa tab Console untuk melihat pesan error.

9. Ringkasan

10. Latihan

1. Sebutkan tiga contoh interaksi yang dikerjakan JavaScript.
   Lihat jawaban

   Misalnya pesan setelah tombol diklik, validasi form, dan menu yang bisa dibuka-tutup.
2. Mengapa kode JavaScript biasa diletakkan sebelum </body>?
   Lihat jawaban

   Agar elemen HTML sudah dimuat lebih dulu sehingga bisa diakses oleh kode.
3. Tuliskan cara memanggil file skrip.js dari halaman HTML.
   Lihat jawaban

   <script src="skrip.js"></script>
4. Apa hasil mengetik 10 / 2 di console?
   Lihat jawaban

   5.