JAMBI, JambiSeru.com – Bahasa pemrograman JavaScript adalah salah satu bahasa yang paling umum digunakan untuk mengembangkan aplikasi web interaktif.
Berikut contoh program komputer sederhana yang menggunakan JavaScript untuk membuat menu interaktif di situs web. Menu ini dapat digunakan untuk mengorganisir tautan dan memudahkan navigasi pengguna.
Contoh Program: Membuat Menu Interaktif Menggunakan JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Menu Interaktif dengan JavaScript</title>
<style>
/* Gaya CSS untuk menu */
#menu {
width: 200px;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 5px;
}
a {
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<div id=”menu”>
<h2>Pilih Kategori</h2>
<ul>
<li><a href=”#”>Beranda</a></li>
<li><a href=”#”>Tentang Kami</a></li>
<li><a href=”#”>Produk</a></li>
<li><a href=”#”>Layanan</a></li>
<li><a href=”#”>Kontak</a></li>
</ul>
</div>
<script>
// Program JavaScript untuk menambahkan interaktivitas pada menu
var menu = document.getElementById(“menu”);
var links = menu.getElementsByTagName(“a”);
for (var i = 0; i < links.length; i++) {
links[i].addEventListener(“mouseover”, function() {
this.style.color = “yellow”; // Mengubah warna tautan saat mouseover
});
links[i].addEventListener(“mouseout”, function() {
this.style.color = “#fff”; // Mengembalikan warna tautan saat mouseout
});
}
</script>
</body>
</html>
Penjelasan Program:
HTML: Kode HTML membentuk kerangka dasar halaman web dan mencakup elemen-elemen menu.
CSS: Gaya CSS digunakan untuk mengatur tampilan menu, termasuk warna latar belakang, warna teks, dan lainnya.
JavaScript: Bagian JavaScript dari program ini memberikan interaktivitas pada menu. Ini mengubah warna tautan saat pengguna mengarahkan kursor ke tautan (mouseover) dan mengembalikan warna semula saat kursor keluar dari tautan (mouseout).
Contoh program komputer di atas adalah demonstrasi sederhana tentang bagaimana menggunakan JavaScript untuk membuat menu interaktif dalam sebuah situs web. Dengan bahasa pemrograman ini, Anda dapat meningkatkan pengalaman pengguna dan memberikan situs web Anda sentuhan dinamis yang menarik. Anda dapat memodifikasi kode ini dan mengembangkan menu yang lebih kompleks dengan berbagai fitur tambahan sesuai kebutuhan proyek Anda. (nas)
