HTML, CSS, dan JavaScript adalah tiga bahasa utama yang digunakan dalam pengembangan front-end. HTML adalah bahasa markup, sedangkan CSS adalah bahasa styling.
JavaScript adalah bahasa pemrograman berorientasi objek yang banyak digunakan dalam membuat sisi klien dari aplikasi web dan seluler. Bahasa dinamis sumber terbuka ini telah menjadi salah satu bahasa pemrograman yang paling banyak digunakan karena fleksibilitas dan kemudahan pemahamannya.
Dengan HTML5 dan CSS3, Anda dapat membuat situs web statis. Namun, untuk menambahkan interaktivitas ke situs semacam itu, Anda harus menggunakan bahasa pemrograman seperti JavaScript yang dipahami oleh browser.
Artikel ini akan menjelaskan mengapa Anda perlu menggunakan JavaScript dengan HTML, berbagai pendekatan untuk menambahkan kode JavaScript ke HTML, dan praktik terbaik untuk menggabungkan kedua bahasa tersebut.
Mengapa sangat penting untuk menggunakan JavaScript dalam HTML
- Tambahkan interaktivitas: Interaktivitas merespons input/tindakan pengguna secara real time tanpa memuat ulang browser. Misalnya, Anda dapat memiliki penghitung yang bertambah satu setiap kali diklik. Contoh lain dapat berupa respons yang memberi tahu pengguna bahwa umpan balik mereka telah dikirim setiap kali mereka mengklik tombol kirim.
- Validasi sisi klien: Anda dapat menggunakan JavaScript untuk menangkap data yang benar pada formulir. Misalnya, Anda dapat menggunakan bahasa pemrograman ini untuk memvalidasi masukan pengguna pada halaman pendaftaran dengan format email, panjang kata sandi, dan kombinasi karakter yang akan digunakan.
- Manipulasi DOM: JavaScript menawarkan Model Objek Dokumen (DOM), yang memudahkan untuk mengubah konten halaman web secara dinamis. Dengan teknologi ini, konten halaman diperbarui secara otomatis berdasarkan input pengguna tanpa memuat ulang halaman web.
- Kompatibilitas lintas-browser: JavaScript kompatibel dengan semua browser modern. Halaman web yang dibuat menggunakan HTML, CSS, dan JavaScript akan bekerja dengan sempurna di browser yang berbeda.
Prasyarat
- Pemahaman dasar tentang HTML: Anda memahami tag HTML dasar, dapat menambahkan tombol dan membuat formulir menggunakan HTML.
- Pemahaman dasar tentang CSS: Anda memahami konsep CSS seperti id, kelas, dan pemilih elemen.
- Editor kode: Anda dapat menggunakan editor kode seperti VS Code atau Atom. Anda juga dapat menggunakan kompiler JavaScript online jika Anda tidak ingin menginstal perangkat lunak di sistem Anda.
Cara menggunakan JavaScript di HTML
Anda dapat menggunakan tiga pendekatan utama untuk menambahkan kode JavaScript ke HTML. Kami menjelajahi setiap pendekatan dan mana yang paling cocok.
#1. Menyisipkan kode di antara tag
Pendekatan ini memungkinkan Anda memiliki kode JavaScript dan HTML dalam file yang sama (file HTML). Kita bisa mulai dengan membuat folder proyek di mana kita akan mendemonstrasikan cara kerjanya. Anda dapat menggunakan perintah ini untuk memulai;
mkdir javascript-html-playground cd javascript-html-playground
Buat dua file; index.html dan style.css
Tambahkan kode awal ini ke file HTML;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Tambahkan kode awal ini ke file CSS Anda;
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 8px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 2.5px;
font-size: 8px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
Saat halaman web dirender, Anda akan memiliki sesuatu seperti ini;
Kami sekarang dapat menambahkan kode JavaScript sederhana yang mengatakan “dikirim” saat Anda mengklik tombol kirim. Kode HTML yang direfaktor ulang dengan JavaScript adalah;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>
Saat Anda mengklik tombol kirim, Anda akan mendapatkan sesuatu yang mirip dengan ini;
Pros of embedding JavaScript code between <script> … </script> tags
- Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file.
- Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug.
Cons of embedding JavaScript code between <script> … </script> tags
- Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
- Slows performance: Big code blocks on the HTML document can slow loading speeds.
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="alert('inline submit')" />
</form>
</div>
</body>
</html>
Saat Anda mengklik kirim, jendela kecil di browser Anda dengan kata-kata "kirim sebaris" akan muncul.
Kelebihan menambahkan JavaScript sebagai Kode Sebaris
- Cepat diterapkan: Anda tidak perlu beralih dari satu dokumen ke dokumen lainnya untuk menulis kode HTML dan JavaScript.
- Sempurna untuk aplikasi kecil: Jika Anda memiliki aplikasi kecil yang tidak menuntut banyak interaktivitas, JavaScript sebaris adalah pilihan yang sempurna.
Kontra menambahkan JavaScript sebagai Kode Sebaris
- Kode tidak dapat digunakan kembali: Jika aplikasi Anda memiliki beberapa formulir, Anda akan membuat kode JavaScript untuk setiap formulir.
- Memperlambat kinerja: Blok kode besar pada dokumen HTML dapat memperlambat kecepatan pemuatan.
- Keterbacaan kode: Saat basis kode terus tumbuh, keterbacaan kode berkurang.
#3. Membuat file JavaScript Eksternal
Saat aplikasi Anda berkembang, Anda akan melihat bahwa menambahkan kode JavaScript langsung ke file HTML bukanlah ide yang baik. Anda juga cenderung memiliki halaman web dengan kecepatan pemuatan rendah saat Anda memiliki banyak kode pada file HTML Anda.
Buat file baru script.js untuk membawa kode JavaScript Anda.
Impor file script.js pada file HTML;
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
Halaman HTML baru yang diperbarui akan memiliki kode ini;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Tambahkan kode ini ke file script.js;
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});
JavaScript ini melakukan hal berikut;
- Kami memiliki pendengar acara yang menunggu acara DOMContentLoaded diaktifkan.
- Fungsi callback dijalankan setelah event DOMContentLoaded diaktifkan.
- Kode menggunakan querySelector untuk memilih formulir.
- Kami menggunakan event.preventDefault() untuk mencegah DOM memilih perilaku default (menyegarkan halaman atau menavigasi ke halaman baru) saat event submit dipicu.
- Pesan "pengiriman lembar JS eksternal" diaktifkan setelah acara pengiriman diaktifkan.
JavaScript dalam HTML: Praktik Terbaik
- Perkecil ukuran file: Semakin besar ukuran file, semakin lama waktu yang dibutuhkan untuk memuat di browser. Mengecilkan menghapus semua karakter yang tidak diinginkan dalam kode sumber tanpa mengubah arti atau kinerjanya. Anda dapat menggunakan alat seperti Yahoo YUI Compressor dan HTMLMinifier untuk membuat basis kode yang ringkas.
- Atur kode Anda: Ini akan membuat kode Anda mudah dibaca dan dipelihara. Anda dapat menggunakan ekstensi seperti Prettier untuk mengatur kode Anda.
- Menggunakan pustaka eksternal: Jika pustaka dapat melakukan tugas tertentu untuk aplikasi Anda, tidak perlu menulis kode dari awal. Namun, hindari menggunakan banyak perpustakaan yang mencapai tujuan yang sama pada proyek yang sama.
- Optimalkan penempatan JavaScript: Jika Anda ingin menambahkan kode JavaScript ke file HTML, pastikan kode tersebut muncul setelah kode HTML. Tempatkan JavaScript di antara tag