Apa itu JavaScript dan console

Sampai sini halaman CV-mu sudah punya isi (HTML) dan sudah cantik (CSS). Tapi ia masih diam. Klik apa pun, tidak ada yang terjadi.

Yang membuat halaman bisa bereaksi namanya JavaScriptJavaScriptBahasa pemrograman yang bikin halaman web bisa bereaksi, misalnya saat diklik, menghitung, atau menyimpan data.Penjelasan lengkap →. Tombol yang menambah angka, kotak isian yang langsung menghitung, daftar yang bisa difilter: semuanya JavaScript.

Satu hal biar tidak bingung: JavaScript dan Java itu dua bahasa yang berbeda, hanya namanya mirip. Jangan dicampur.

Memasangnya di halaman

Kode JavaScript ditaruh di dalam tag script, biasanya di bagian paling bawah body:

<body>
  <h1>Halo</h1>

  <script>
    console.log('Halo dari JavaScript!');
  </script>
</body>

Browser membaca halaman dari atas ke bawah. Tag script ditaruh paling bawah supaya semua elemen di atasnya sudah ada sebelum kodenya jalan. Nanti kamu akan tahu kenapa ini penting.

console.log: papan pengumuman

Tampilan halaman belum bisa kita ubah (itu pelajaran 6). Jadi untuk latihan awal kita pakai alat bantu: console.log(...). Perintah ini menulis sesuatu di consoleConsolePapan catatan tempat program menulis pesan dan error, berguna untuk mengintip apa yang sedang terjadi.Penjelasan lengkap →, yaitu papan pengumuman khusus untuk pembuat web. Pengunjung biasa tidak melihatnya.

console.log('Halo!');
console.log(2 + 3);

Tulisan ditaruh di dalam tanda kutip. Angka dan hitungan tidak perlu kutip. Hasil dua baris di atas: Halo! lalu 5.

Aturan menulis yang perlu kamu pegang dari sekarang:

Coba sendiri

Di kotak ini sudah ada satu console.log. Setiap kamu mengetik, kodenya otomatis dijalankan ulang. Lihat panel Console di bawah hasil.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halo, console</title>
</head>
<body>
  <p>Hasilnya muncul di panel Console di bawah.</p>
  <script>
    console.log('Halo!');

    // Tantangan 1: ubah tulisan di atas jadi sapaan dengan namamu
    // Tantangan 2: tambah console.log yang menulis hasil 7 * 8
  </script>
</body>
</html>

Tantangannya:

1. Ubah tulisan Halo! jadi sapaan dengan namamu.
2. Tambah console.log kedua yang menulis hasil 7 * 8.
3. Sengaja salah: hapus tanda kutip penutup di salah satu baris. Perhatikan pesan errornya. Membaca error itu keterampilan, bukan aib.

Dua cara lain memasang

Selain menulis langsung di halaman, kode JavaScript bisa disimpan di berkas sendiri, mirip CSS:

<script src="js/app.js"></script>

Cara ini rapi untuk proyek besar. Di kelas ini kita tulis langsung di halaman supaya hasilnya bisa dicoba di kotak latihan.