JavaScript adalah bahasa script client side yang paling populer dan banyak digunakan. Script client side artinya, script yang dijalankan atau diterjemahkan dalam browser web Anda.
JavaScript dirancang untuk menambahkan interaktivitas dan efek dinamis ke halaman web dengan memanipulasi konten yang dikembalikan dari server web.
JavaScript awalnya dikembangkan sebagai LiveScript oleh Netscape pada pertengahan 1990-an. Kemudian diubah namanya menjadi JavaScript pada tahun 1995, dan menjadi standar ECMA pada tahun 1997.
Sekarang JavaScript adalah bahasa script client side standar untuk aplikasi berbasis web, dan didukung oleh hampir semua browser web yang tersedia saat ini, seperti Google Chrome, Mozilla Firefox, Apple Safari, dll.
JavaScript adalah bahasa berorientasi objek, dan juga memiliki beberapa kesamaan sintaks dengan bahasa pemrograman Java. Namun, JavaScript tidak terkait dengan Java dalam hal apa pun.
JavaScript secara resmi dikelola oleh ECMA (European Computer Manufacturers Association) sebagai ECMAScript. ECMAScript 6 (atau ES6) adalah versi utama terbaru dari standar ECMAScript.
Yang Dapat Anda Lakukan dengan JavaScript
Ada lebih banyak hal yang dapat Anda lakukan dengan JavaScript :
- Anda dapat mengubah konten halaman web dengan menambahkan atau menghapus elemen.
- Anda dapat mengubah gaya dan posisi elemen di halaman web.
- Anda dapat memantau event seperti klik mouse, arahkan kursor, dll. Dan bereaksi terhadapnya.
- Anda dapat melakukan dan mengontrol transisi dan animasi.
- Anda dapat membuat pop-up peringatan untuk menampilkan info atau pesan peringatan kepada pengguna.
- Anda dapat melakukan operasi berdasarkan masukan pengguna dan menampilkan hasilnya.
- Anda dapat memvalidasi input pengguna sebelum mengirimkannya ke server.
Banyak sekali yang bisa Anda lakukan dengan JavaScript. Anda akan mempelajari semuanya secara mendetail di tutorial selanjutnya.
Apa yang Dicakup Tutorial Ini
Seri tutorial JavaScript ini mencakup semua konsep pemrograman dasar, termasuk tipe data, operator, membuat dan menggunakan variabel, menghasilkan output, menyusun kode untuk membuat keputusan dalam program Anda atau mengulang blok kode yang sama beberapa kali, membuat dan memanipulasi string dan array, mendefinisikan dan memanggil fungsi, dan seterusnya.
Setelah Anda merasa paham dengan dasar-dasarnya, Anda bisa melanjutkan ke tingkat berikutnya yang menjelaskan gagasan tentang objek, Model Objek Dokumen (DOM) dan Model Objek Browser (BOM), serta cara menggunakan native JavaScript objek seperti Tanggal, Matematika, dll., dan melakukan konversi tipe.
Terakhir, Anda akan mempelajari beberapa konsep lanjutan seperti event listener, event propagation, metode peminjaman dari objek lain, perilaku hoisting JavaScript, encoding dan decoding data JSON, serta gambaran umum mendetail tentang fitur baru yang diperkenalkan di ECMAScript 6 (atau ES6).
Memulai JavaScript
Di sini, Anda akan belajar betapa mudahnya menambahkan interaktivitas ke halaman web menggunakan JavaScript.
Namun, sebelum kita mulai, pastikan Anda memiliki pengetahuan tentang HTML dan CSS.
Jika Anda baru memulai belajar membuat web, mulailah belajar dari sini »
Baiklah, mari kita mulai dengan bahasa script client side yang paling populer.
Menambahkan JavaScript ke Halaman Web Anda
Biasanya ada 3 cara untuk menambahkan JavaScript ke halaman web:
- Menyematkan kode JavaScript di antara sepasang tag <script> dan </script>.
- Membuat file JavaScript eksternal dengan ekstensi .js lalu 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 rinci:
Menyematkan Kode JavaScript
Anda dapat menyematkan kode JavaScript langsung di dalam halaman web Anda dengan menempatkannya di antara tag <script> dan </script>.
Tag <script> menunjukkan browser bahwa pernyataan yang ada harus diinterpretasikan sebagai script yang dapat dieksekusi dan bukan HTML. Berikut contohnya:
<! DOCTYPE html>
<html lang = "id">
<head>
<meta charset = "UTF-8">
<title> Menyematkan JavaScript </title>
</head>
<body>
<script>
var salam = "Halo Dunia!";
document.write (salam); // Cetak : Halo Dunia!
</script>
</ Body>
</html>
Kode JavaScript pada contoh di atas hanya akan mencetak pesan teks pada halaman web. Abaikan dulu arti kode di atas, Anda akan mempelajari arti dari setiap pernyataan JavaScript ini di tutorial selanjutnya.
Memanggil File JavaScript Eksternal
Anda juga dapat menempatkan kode JavaScript Anda ke dalam file terpisah dengan ekstensi .js, dan kemudian memanggil file tersebut dalam dokumen Anda melalui atribut src dari tag <script>, seperti ini:
Ini berguna jika Anda ingin script yang sama digunakan untuk banyak dokumen. Cara ini membantu Anda agar tidak mengulangi tugas yang sama berulang kali, dan membuat web Anda lebih mudah dikelola.
Nah, mari buat file JavaScript bernama “hello.js” dan tempatkan kode berikut di dalamnya:
// Fungsi untuk menampilkan pesan
function sayHalo () {
alert ("Halo Dunia!");
}
// Panggil fungsi dengan mengklik tombol
document.getElementById ("myBtn"). onclick = sayHalo;
Sekarang, Anda dapat memanggil file JavaScript eksternal ini di dalam halaman web menggunakan tag <script>, seperti ini:
<! DOCTYPE html>
<html lang = "id">
<head>
<meta charset = "UTF-8">
<title> Menyematkan File JavaScript Eksternal </title>
</head>
<body>
<button type = "button" id = "myBtn"> Klik Saya </button>
<script src = "js/hello.js"> </script>
</ Body>
</html>
Menempatkan Kode JavaScript Dalam Baris Kode
Anda juga dapat menempatkan kode JavaScript secara inline dengan memasukkannya langsung ke dalam tag HTML menggunakan atribut tag khusus seperti onclick, onmouseover, onkeypress, onload, dll.
Namun, usahakan untuk menggunakan metode ini, karena kode HTML Anda akan bercampur dengan kode JavaScript dan membuat kode JavaScript Anda sulit untuk dipelihara. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>JavaScript Inline</title>
</head>
<body>
<button onclick="alert('Halo Dunia!')">Klik Saya</button>
</body>
</html>
Contoh di atas akan menampilkan pesan peringatan saat mengklik elemen tombol.
Memposisikan Script di dalam Dokumen HTML
Elemen <script> dapat ditempatkan di bagian <head>, atau <body> dari dokumen HTML. Namun idealnya, script harus ditempatkan di akhir bagian body, tepat sebelum tag penutup </body>, ini akan membuat halaman web Anda dimuat lebih cepat, karena mencegah terhalangnya perenderan halaman awal.
Setiap tag <script> memblokir proses perenderan halaman, sampai selesai mendownload dan mengeksekusi kode JavaScript, jadi menempatkannya di bagian head (yaitu elemen <head>) pada dokumen akan memperlambat & memengaruhi performa situs Anda secara signifikan.
Perbedaan Antara Pembuatan Script client side dan Server side
Bahasa script client side seperti JavaScript, VBScript, dll. Diinterpretasikan dan dijalankan oleh browser web, sedangkan bahasa script server side seperti PHP, ASP, Java, Python, Ruby, dll. Berjalan di server web dan hasilnya dikirim kembali ke browser web dalam format HTML.
Pembuatan script client side memiliki banyak keunggulan dibandingkan pendekatan script server side.
Misalnya, Anda dapat menggunakan JavaScript untuk memeriksa apakah pengguna telah memasukkan data yang tidak valid di kolom formulir dan menampilkan 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 jaringan yang tidak perlu dan eksploitasi sumber daya sistem server.
Selain itu, respons dari script server side lebih lambat dibandingkan dengan script client side, karena script server side diproses di komputer jarak jauh bukan di komputer lokal pengguna.
Anda dapat mempelajari lebih lanjut tentang script server side di bagian tutorial PHP.
