JavaScript Tutorial: Panduan Lengkap Buat Pemula (Tutorial JavaScript Part 1)

Gambar 1.0: JavaScript

JavaScript itu ibarat sihir di dunia website! Dengan bahasa pemrograman ini, lo bisa bikin website yang interaktif, keren, dan dinamis. Buat lo yang masih newbie, tenang aja, kita bakal kupas tuntas tentang JavaScript dengan bahasa santai dan mudah dipahami.

1. Learn JavaScript

JavaScript (JS) adalah bahasa pemrograman yang digunakan buat bikin website lebih hidup. Kalau HTML itu ibarat kerangka tubuh dan CSS sebagai bajunya, maka JavaScript adalah otaknya yang bikin website bisa bereaksi dengan user.

Lo bisa belajar JavaScript langsung di browser tanpa perlu install apa-apa. Cukup buka DevTools Console dengan tekan F12 atau Ctrl + Shift + I di Chrome, terus masuk ke tab "Console". Atau jika lo latihan JavaScript pake Android lo bisa pake aplikasi Acode dengan membuat file dengan ekstensi .js. 

Coba ketik ini di console:

console.log("Halo, Dunia!");

Hasilnya:

Gambar 1.1 : Contoh JavaScript di console

Maka akan muncul teks Halo, Dunia! di console. Gampang kan?

2. Why Study JavaScript?

Kenapa harus belajar JavaScript? Nih, beberapa alasannya:

• Bahasa pemrograman paling populer – Dipakai di hampir semua website modern.
• Bisa dipakai di frontend & backend – Dengan Node.js, JavaScript juga bisa dipakai di sisi server.
• Mudah dipelajari – Sintaksnya simpel dan enak buat pemula.
• Komunitas besar – Banyak sumber belajar gratis dan forum buat tanya-jawab.
• Gajinya gede – Developer JS banyak dicari perusahaan besar!

3. JavaScript Bisa Ubah Konten HTML

Lo bisa pake JavaScript buat ngubah teks atau elemen di halaman web. Contohnya:

<p id="demo">Halo, Dunia!</p>
<button onclick="ubahTeks()">Klik Aku</button>
<script>
function ubahTeks() {
  document.getElementById("demo").innerText = "Teks sudah berubah!";
}
</script>

Hasilnya:

Gambar 1.2 : Ubah konten HTML dengan JavaScript

Kalau lo klik tombolnya, teks Halo, Dunia! bakal berubah jadi Teks sudah berubah!. Mantap, kan?

4. JavaScript Bisa Ubah Nilai Atribut HTML

Lo juga bisa pakai JavaScript buat ubah atribut HTML, misalnya gambar:

<img id="myImage" src="gambar1.jpg" width="300">
<button onclick="ubahGambar()">Ganti Gambar</button>
<script>
function ubahGambar() {
  document.getElementById("myImage").src = "gambar2.jpg";
}
</script>

Hasilnya:

Gambar 1.3 : Ubah atribut HTML dengan JavaScript

Tinggal klik tombolnya, dan gambarnya langsung berubah!

5. JavaScript Bisa Ubah Gaya (CSS)

JS juga bisa mengubah tampilan elemen HTML dengan CSS:

<p id="demo">Teks ini bisa berubah warna!</p>
<button onclick="ubahWarna()">Ubah Warna</button>
<script>
function ubahWarna() {
  document.getElementById("demo").style.color = "red";
}
</script>

Hasilnya:

Gambar 1.4 : Ubah gaya dengan JavaScript

Dengan JavaScript, tampilan website bisa lebih dinamis dan keren!

6. JavaScript Bisa Sembunyikan Elemen HTML

Pengen sembunyikan elemen di halaman? Bisa banget!

<p id="demo">Teks ini bisa disembunyikan!</p>
<button onclick="sembunyikan()">Sembunyikan</button>
<script>
function sembunyikan() {
  document.getElementById("demo").style.display = "none";
}
</script>

Hasilnya:

Gambar 1.5 : Sembunyikan elemen HTML dengan JavaScript

Dengan satu klik, elemen langsung hilang dari tampilan.

7. JavaScript Bisa Menampilkan Elemen HTML

Kalau bisa disembunyikan, tentu bisa ditampilkan lagi, dong!

<p id="demo" style="display:none;">Teks ini kembali muncul!</p>
<button onclick="tampilkan()">Tampilkan</button>
<script>
function tampilkan() {
  document.getElementById("demo").style.display = "block";
}
</script>

Hasilnya:

Gambar 1.6 : Menampilkan Elemen HTML dengan JavaScript

Tinggal klik tombolnya, teks yang tadinya ngilang bakal muncul lagi.

Kesimpulan

JavaScript itu bahasa pemrograman yang powerful banget buat bikin website lebih interaktif. Lo bisa ubah konten, gambar, gaya, bahkan mengontrol elemen HTML dengan mudah.

Mulai belajar JavaScript dari yang dasar, terus explore lebih jauh. Jangan takut buat coba-coba! Semakin sering praktek, makin jago coding-nya.

Mau belajar lebih lanjut? Nantikan update-an selanjutnya di blog ini. 

Selamat ngoding, bro & sis!

Berbagi :