#1 – Pengantar JavaScript: Panduan Dasar untuk Pemula

ByMukhlis MJ

Pengantar JavaScript: Panduan Dasar untuk Pemula
resource: mukhlismj.com

 

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. JavaScript sering disebut sebagai “bahasa pengembangan web” karena hampir setiap situs web modern menggunakannya. Dengan JavaScript, Anda dapat membuat fitur seperti:

  • Animasi.
  • Validasi formulir.
  • Menu dropdown.

Tampilan dinamis data tanpa memuat ulang halaman (misalnya, di aplikasi seperti Instagram atau Twitter).

JavaScript adalah bahasa pemrograman tingkat tinggi yang berjalan di sisi klien (client-side), artinya kode JavaScript dijalankan langsung oleh browser pengguna.

Bagaimana JavaScript Bekerja di Browser?

Browser modern seperti Google Chrome, Mozilla Firefox, dan Safari memiliki mesin JavaScript yang memungkinkan eksekusi kode JavaScript. Contohnya:

  • V8 Engine di Google Chrome.
  • SpiderMonkey di Mozilla Firefox.
  • JavaScriptCore di Safari.

Proses kerja JavaScript di browser adalah sebagai berikut:

  1. Browser membaca dan memuat file HTML, CSS, dan JavaScript.
  2. Mesin JavaScript dalam browser memproses dan menjalankan kode JavaScript.
  3. JavaScript berinteraksi dengan elemen HTML menggunakan DOM (Document Object Model) untuk memanipulasi isi atau tampilan halaman.

Misalnya, ketika Anda mengklik tombol, JavaScript dapat digunakan untuk menampilkan pesan atau mengubah tampilan halaman tanpa perlu memuat ulang.

Penulisan Kode JavaScript di HTML

Ada tiga cara utama untuk menambahkan JavaScript ke dalam halaman web:

1. Internal JavaScript

Kode JavaScript ditulis langsung di dalam dokumen HTML, di dalam elemen <script>.

Contoh:

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal JavaScript</title>
</head>
<body>
  <h1>Selamat Datang</h1>
  <button onclick="greet()">Klik Saya</button>

  <script>
    function greet() {
      alert('Halo! Selamat datang di situs kami.');
    }
  </script>
</body>
</html>

Pada contoh di atas, fungsi greet() akan dipanggil ketika tombol diklik.

2. External JavaScript

Kode JavaScript ditulis dalam file terpisah dengan ekstensi .js. File ini kemudian dihubungkan ke dokumen HTML menggunakan elemen <script> dengan atribut src.

Contoh file JavaScript (script.js):

JavaScript

  
function greet() {
  alert('Halo! Selamat datang di situs kami.');
}

Contoh file HTML:

HTML

  
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External JavaScript</title>
</head>
<body>
  <h1>Selamat Datang</h1>
  <button onclick="greet()">Klik Saya</button>
  <script src="script.js"></script>
</body>
</html>

Keuntungan menggunakan file eksternal adalah kode lebih terorganisir dan dapat digunakan ulang di banyak halaman web.

3. Inline JavaScript

Kode JavaScript ditulis langsung di atribut HTML seperti onclick, onmouseover, dll.

Contoh:

html

  
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline JavaScript</title>
</head>
<body>
  <h1>Selamat Datang</h1>
  <button onclick="alert('Halo! Selamat datang di situs kami.')">Klik Saya</button>
</body>
</html>

Inline JavaScript mudah digunakan untuk skenario sederhana, tetapi kurang disarankan untuk proyek besar karena sulit dikelola.

Perbedaan Internal dan External JavaScript

.tg {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0vaj{background-color:#c0c0c0;font-weight:bold;position:-webkit-sticky;position:sticky;text-align:center;top:-1px;
vertical-align:top;will-change:transform}
.tg .tg-7pxk{background-color:#c0c0c0;border-color:inherit;font-weight:bold;position:-webkit-sticky;position:sticky;
text-align:center;top:-1px;vertical-align:top;will-change:transform}
.tg .tg-0lax{text-align:left;vertical-align:top}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}

Internal External
Kode JavaScript ditulis di dalam file HTML. Kode JavaScript ditulis di file terpisah.
Tidak dapat digunakan ulang di halaman lain. Dapat digunakan ulang di berbagai halaman.
Lebih mudah untuk debugging pada file kecil. Memisahkan kode JavaScript membuat file lebih rapi.

Kesimpulan

JavaScript adalah elemen penting dalam pengembangan web modern. Dengan memahami cara JavaScript bekerja di browser dan cara menulis kode JavaScript, Anda dapat membuat halaman web yang lebih interaktif dan dinamis. Untuk langkah selanjutnya, Anda bisa mulai mempelajari dasar-dasar sintaks JavaScript seperti variabel, fungsi, dan manipulasi DOM.

Similar Posts