JavaScript : Membuat File Pertama

Di sini, kalian akan belajar betapa mudahnya menambahkan interaktivitas ke halaman web menggunakan JavaScript. Tapi, sebelum kita mulai, pastikan kalian telah memiliki pengetahuan tentang HTML dan CSS.

Mari kita mulai pembahasannya.

Menambahkan JavaScript ke Halaman Web

Biasanya ada tiga cara untuk menambahkan JavaScript ke halaman web:

  • Menyematkan (embed) kode JavaScript di antara sepasang tag <script> dan </script>.
  • Membuat file JavaScript eksternal dengan ekstensi .js dan kemudian memuatnya di dalam halaman melalui atribut src dari tag <script>.
  • Menempatkan kode JavaScript langsung di dalam tag HTML menggunakan atribut tag khusus seperti onclick, onmouseover, onkeypress, onload, dll.

Bagian berikut akan menjelaskan masing-masing prosedur ini secara terperinci:

Embedding Kode JavaScript

Kalian dapat menyematkan kode JavaScript langsung di halaman web Kalian dengan menempatkannya di antara tag <script> dan </script>. Tag <script> menunjukkan browser bahwa pernyataan yang terkandung harus ditafsirkan sebagai skrip yang dapat dieksekusi dan bukan HTML. Berikut contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); // Prints: Hello World!
    </script>
</body>
</html>

Kode JavaScript pada contoh di atas hanya akan mencetak pesan teks pada halaman web.

Memanggil File External JavaScript

Kalian juga dapat menempatkan kode JavaScript ke file yang terpisah dengan ekstensi .js, dan kemudian memanggil file itu dalam dokumen kalian melalui atribut src dari tag <script>, seperti berikut:

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

Ini berguna jika kalian ingin skrip yang sama tersedia untuk banyak dokumen. Ini dapat membantu kalian dari pengulangan tugas yang sama berulang-ulang, dan membuat situs web kalian lebih mudah dipelihara.

Baiklah, mari kita buat file JavaScript bernama “hello.js” dan tempatkan kode berikut di dalamnya:  

// A function to display a message
function sayHello() {
    alert("Hello World!");
}

// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;

Sekarang, kalian dapat memanggil file JavaScript eksternal ini pada halaman web menggunakan tag <script>, seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

Menempatkan Inline Kode JavaScript

Kalian juga dapat menempatkan kode inline JavaScript dengan menyisipkannya langsung di dalam tag HTML menggunakan atribut tag khusus seperti onclick, onmouseover, onkeypress, onload, dll. Berikut contoh kodenya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

Contoh di atas akan menampilkan pesan peringatan pada klik elemen tombol.

Penempatan Script dalam Dokumen HTML

Elemen <script> dapat ditempatkan di bagian <head>, atau <body> dari dokumen HTML. Namun idealnya, skrip harus ditempatkan di akhir bagian body, tepat sebelum tag penutup </body>, itu akan membuat halaman web kalian lebih cepat dimuat, karena mencegah penghambatan rendering halaman awal, jadi tidak terbebani waktu untuk memuat kode JavaScript terlebih dahulu.

Setiap tag <script> akan memblokir proses pembuatan halaman hingga sepenuhnya ter-unduh dan mengeksekusi kode JavaScript, jadi menempatkannya di bagian kepala (mis. Elemen <head>) dari dokumen tanpa alasan yang jelas akan secara signifikan memengaruhi kinerja situs web kalian.

Perbedaan Antara Skrip Client-side dan Server-side

Bahasa skrip client-side  seperti JavaScript, VBScript, dll. Ditafsirkan dan dieksekusi oleh browser web, sementara bahasa skrip server-side seperti PHP, ASP, Java, Python, Ruby, dll. Berjalan di server web dan output dikirim kembali ke browser web dalam format HTML.

Skrip client-side memiliki banyak keunggulan dibandingkan pendekatan skrip server-side tradisional. Misalnya, kalian dapat menggunakan JavaScript untuk memeriksa apakah pengguna telah memasukkan data yang tidak valid pada formulir dan menunjukkan pemberitahuan untuk kesalahan input yang sesuai secara real-time sebelum mengirimkan formulir ke server web untuk validasi data akhir dan pemrosesan lebih lanjut untuk mencegah penggunaan bandwidth yang tidak perlu dan eksploitasi sumber daya sistem server.

Selain itu, respons dari skrip server-side lebih lambat dibandingkan dengan skrip client-side, karena skrip server-side diproses pada komputer jarak jauh (remote computer) bukan pada komputer lokal pengguna (user local computer).