Untuk membuat website yang baik, tidak cukup dengan struktur dan tampilan yang bagus, namun juga perlu menjadikan website yang kita buat dapat berinteraksi kepada user. Misalnya dengan memunculkan pesan saat user mengunjungi website tersebut. Website yang interaktif akan jauh lebih menarik bagi para pengunjung website.
Untuk menjadikan website lebih menarik dan interaktif, kita bisa menggunakan javascript. Berbeda dengan HTML yang dapat menentukan struktur web dan CSS untuk menentukan styling dari web, javascript digunakan untuk memberikan berbagai interaksi dengan user, Misalnya :
- Menampilkan pesan apabila tombol ditekan
- Mengubah tampilan apabila tombol ditekan
- Mengolah teks yang dimasukkan user
- Dll
JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox. Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor dan web browser.
Kita dapat langsung menulis script javascript pada file html, caranya dengan menggunakan tag script
<!-- index.html -->
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<!-- menulis javascript didalam html -->
<script>
console.log("hello world");
document.write(" <h1> Hello World! </h1>");
document.write("<hr> </hr>");
document.write("<p> Saya Sedang belajar Javascript </p>");
document.write("di <b> WRI");
</script>
</body>
</html>Kita juga dapat menuliskan file javascript diluar file html, pertama kita harus membuat file javascript kemudian mengimport-nya ke file html
Pertama, buatlah file javascript dengan ekstensi .js, misalnya index.js
// index.js
console.log("hello world");
document.write(" <h1> Hello World! </h1>");
document.write("<hr> </hr>");
document.write("<p> Saya Sedang belajar Javascript </p>");
document.write("di <b> WRI");Kemudian, import file javascript yang sudah dibuat ke html, hal ini dapat dilakukan dengan menggunakan tag script, dengan menambahkan attribute src yang berisi direktori dan nama file dari file javascript yang akan kita import
<!-- index.html -->
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<!-- import file javascript ke html -->
<script src="index.js"></script>
</body>
</html>Urutan penulisan tag script perlu diperhatikan karena dapat mempengaruhi behaviour dari Javascript. Terdapat 3 macam cara untuk meng-import Javascript ke dalam file HTML kita.
-
Meletakkan tag
scriptdi dalam tagheadApabila kita meletakkan tag
scriptdi dalam taghead, maka Javascript akan di-execute lebih duluan dibanding HTML. Sehingga apabila kita memiliki kode untuk memanipulasi DOM di dalam Javascript kita, maka akan terjadi error karena browser belum sempat melakukan parsing untuk membentuk DOM Tree dari HTML kita.Contoh kasus yang membutuhkan Javascript untuk dieksekusi terlebih dahulu sebelum HTML yaitu menghindari Flash of Unstyled Content atau sering disingkat FOUC. Biasanya hal ini terjadi ketika kita ingin menambahkan light mode dan dark mode pada website kita.
-
Meletakkan tag
scriptdi dalam tagbodyCara kedua merupakan cara yang paling sering dilakukan, karena dengan begini Javascript akan dieksekusi setelah browser membentuk DOM Tree dari HTML kita sehingga kita dapat dengan bebas melakukan manipulasi terhadap DOM.
-
Meletakkan tag
scriptdi dalam tagheaddengan attributeasyncTag
scriptmemiliki attributeasync. Apabila kita menggunakan tag ini, maka script yang kita buat akan di-download secara parallel dengan markup kita. Setelah script berhasil di-download, maka script akan langsung di-eksekusi tanpa menunggu DOM Tree selesai dibangun. -
Meletakkan tag
scriptdi dalam tagheaddengan attributedeferMirip seperti attribute
async, script akan di-download secara parallel oleh browser bersamaan dengan markup kita. Namun tidak sepertiasync, script tidak akan langsung ter-eksekusi, namun akan menunggu browser selesai membentuk DOM Tree. Metode ini paling dianjurkan karena script akan di-download secara parallel sehingga performa load website kita akan lebih cepat namun kita masih bebas untuk melakukan manipulasi DOM.
Untuk lebih lengkapnya, kalian bisa melihat grafik dibawah ini
Pertama, buatlah file HTML baru dengan nama pengenalan-js.html dan isi file tersebut dengan kode program di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="form">
<h1 class="form_title">Login</h1>
<input class="form_input" type="text" placeholder="Username" />
<input class="form_input" type="password" placeholder="Password" />
<button class="form_submit" id="button" type="submit">submit</button>
</div>
<script src="index.js"></script>
</body>
</html>Kedua, buat file CSS dengan nama style.css dan isi file tersebut dengan kode program dibawah ini:
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: coral;
display: flex;
justify-content: center;
}
.form {
background-color: white;
width: 400px;
padding: 50px;
border-radius: 5px;
margin-top: 120px;
}
.form_input {
display: block;
padding: 20px 20px;
margin-bottom: 20px;
border: solid 5px aquamarine;
border-radius: 20px;
outline: none;
margin-left: 40px
}
.form_submit {
padding: 10px 20px;
border: none;
border-radius: 10px;
width: 210px;
background-color: aquamarine;
color: grey;
font-weight: bold;
margin-left: 45px;
text-align: center;
}
.form_title {
font-size: 30px;
font-weight: bold;
text-align: center;
}Ketiga, buat file javascript dengan nama index.js dan isi file tersebut dengan kode program di bawah ini:
alert("Selamat Belajar Alert di Javascript");
console.log("Semangat Belajar Javascript");Simpan semua file yang sudah dibuat, setelah itu buka file html di web browser. Akan muncul alert atau notifikasi saat kita membuka website yang sudah kita buat sebelumnya.
.jpg)
untuk melihat kalimat di dalam console.log, pada halaman web browser klik kanan > inspect > console.