Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Dalam pengembangan web, JavaScript dan HTML merupakan dua elemen penting yang saling melengkapi. Dalam artikel ini, kami akan fokus membahas tentang bagaimana menggunakan JavaScript di HTML.
Ada beberapa cara untuk memasukkan JavaScript ke dalam kode HTML. Pertama, kamu bisa memasukkannya langsung ke dalam tag <script> di dalam dokumen HTML. Kedua, kamu bisa menulis kode JavaScript di file terpisah kemudian memasukkannya ke dalam HTML menggunakan tag <script>.
Salah satu cara termudah untuk menambahkan JavaScript di HTML adalah dengan menjalankannya langsung di dalam tag <script>. Berikut contohnya:
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<script>
alert('Selamat Datang di Website Kami!');
</script>
</body>
</html>Dalam contoh di atas, kode JavaScript alert('Selamat Datang di Website Kami!'); ditempatkan di dalam tag <script>. Ketika halaman web ini dibuka, maka akan muncul pop-up alert dengan pesan ‘Selamat Datang di Website Kami!‘.
Cara lainnya adalah dengan membuat file JavaScript (.js) terpisah. Tujuannya adalah untuk membuat kode lebih rapi dan mudah dikelola, terutama jika JavaScript yang digunakan cukup banyak atau rumit.
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>Hasilnya akan sama dengan contoh sebelumnya jika dalam file script.js kamu menulis:
alert('Selamat Datang di Website Kami!');Setelah mengenal kedua cara memasukkan JavaScript ke HTML, selanjutnya adalah memahami bagaimana JavaScript bekerja di HTML. Dalam hal ini, JavaScript bisa berinteraksi dengan HTML menggunakan DOM (Document Object Model). DOM memungkinkan JavaScript untuk membaca dan mengubah isi dari halaman HTML.
Berikut adalah contoh dasarnya:
<html>
<body>
<p id="paragraf">Halo, Selamat Datang!</p>
<button onclick="ubahTeks()">Ubah Teks</button>
<script>
function ubahTeks() {
document.getElementById("paragraf").innerHTML = "Selamat Datang di Website Kami!";
}
</script>
</body>
</html>Setelah mengetahui cara kerja dasar JavaScript di HTML, kamu bisa mencoba berbagai teknik lain yang lebih kompleks dan canggih.
Demikian cara menggunakan Javascript di dalam HTML. Semoga artikel ini bermanfaat dan dapat membantu pembelajaran kamu. Happy coding!
Link terkait: