Memulai JavaScript – Dasar-Dasar yang Perlu Kamu Tahu
Pada artikel ini, kita akan mengenal dasar-dasar JavaScript yang akan membantu kamu membuat halaman web interaktif.
---
1. Apa Itu JavaScript?
JavaScript adalah bahasa pemrograman yang berfungsi di sisi klien (client-side) dan memungkinkan kita untuk mengontrol perilaku elemen-elemen HTML. Dengan JavaScript, kita bisa melakukan banyak hal, mulai dari manipulasi elemen, validasi data, hingga pembuatan animasi.
---
2. Cara Menyisipkan JavaScript ke dalam HTML
Ada beberapa cara untuk menambahkan JavaScript ke dalam HTML:
Internal JavaScript: Menulis kode JavaScript di dalam tag <script> di file HTML.
<script>
alert("Selamat datang di situs saya!");
</script>
Eksternal JavaScript: Menyimpan kode JavaScript dalam file .js terpisah dan menghubungkannya dengan HTML.
<script src="script.js"></script>
Contoh file script.js:
console.log("Hello, World!");
---
3. Variabel dalam JavaScript
Variabel adalah tempat untuk menyimpan data. Ada tiga cara untuk mendeklarasikan variabel di JavaScript:
let: Variabel yang nilainya bisa diubah.
let nama = "Budi";
nama = "Andi";
const: Variabel yang nilainya tetap dan tidak bisa diubah.
const pi = 3.14;
var: Cara lama untuk mendeklarasikan variabel, namun masih sering digunakan.
var umur = 25;
---
4. Fungsi dalam JavaScript
Fungsi adalah blok kode yang dapat dijalankan kapan saja. Fungsi bisa berisi perintah-perintah untuk melakukan tugas tertentu. Berikut contoh membuat dan memanggil fungsi:
function sapaPengunjung() {
console.log("Selamat datang di situs saya!");
}
sapaPengunjung();
---
5. Event Listener
JavaScript memungkinkan kita untuk merespons interaksi pengguna, seperti klik tombol atau perubahan di dalam form. Ini bisa dilakukan menggunakan event listener.
Contoh event listener pada tombol:
<button onclick="sapaPengunjung()">Klik Saya</button>
<script>
function sapaPengunjung() {
alert("Terima kasih sudah mengklik tombol!");
}
</script>
---
6. Contoh Interaktif: Mengubah Teks dengan JavaScript
Mari coba contoh sederhana di mana kita bisa mengubah teks saat tombol diklik. Salin kode berikut ke code playground di artikel sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<h1 id="judul">Belajar JavaScript Dasar</h1>
<button onclick="ubahTeks()">Klik untuk Ubah Teks</button>
<script>
function ubahTeks() {
document.getElementById("judul").innerHTML = "Selamat Belajar JavaScript!";
}
</script>
</body>
</html>
Pada contoh ini:
Fungsi ubahTeks() akan mengubah teks pada elemen dengan ID judul ketika tombol diklik.
---
Kesimpulan
JavaScript memungkinkan kita membuat halaman web yang interaktif. Dengan memahami dasar-dasar JavaScript seperti variabel, fungsi, dan event listener, kamu sudah bisa membuat interaksi dasar pada halaman. Pada artikel berikutnya, kita akan membahas lebih lanjut tentang manipulasi elemen HTML dengan JavaScript.
---
Selamat belajar, dan sampai jumpa di artikel berikutnya!
Post a Comment for "Memulai JavaScript – Dasar-Dasar yang Perlu Kamu Tahu"