Pertemuan #4 – Front-End Sintech 2025

📅 Kamis, 8 Mei 2025
🕒 15:30 – 17:00 WIB (100 menit)
🏫 Lokasi: ISDB 4.4

Halo Front-End Dev Squad!
Setelah tiga pertemuan penuh eksplorasi HTML dan CSS, akhirnya kita sampai juga di tahap yang bikin halaman web jadi lebih “hidup” — yaitu JavaScript!

Yes, pada pertemuan ke-4 ini, kita mulai mengenal dasar-dasar JavaScript (JS) sebagai bahasa pemrograman yang akan memberi interaksi pada halaman web kita. Suasana belajar jadi makin dinamis karena peserta gak cuma ngoding tampilan, tapi juga mulai bisa bikin halaman “bereaksi” terhadap aksi pengguna.

🧑‍💻 Materi Pertemuan 4: Pengenalan JavaScript

Di sesi kali ini, peserta diperkenalkan dengan dasar JavaScript yang sering digunakan dalam proyek front-end. Materi dibagi menjadi beberapa poin penting:

• 📝 Komentar:
  Cara memberi catatan di dalam kode, penting banget buat kolaborasi tim nanti.

• 💡 Variabel & Tipe Data:
  Mengenal let, const, tipe data string, number, boolean, dll.

• ➗ Operator & Kondisional:
  Dasar penggunaan operator (aritmatika, logika) dan pernyataan if - else untuk membuat alur logika sederhana.

• 🔄 Function:
  Membuat fungsi reusable untuk interaksi dan manipulasi data.

• ⚠️ Alert:
  Menampilkan pesan pop-up untuk memberi notifikasi pengguna.

• 📦 Import & Export:
  Konsep modularitas untuk membagi file JS biar lebih rapi dan terstruktur.

💻 Latihan: Interaksi & Form

Peserta langsung latihan membuat halaman HTML yang sudah ada menjadi lebih interaktif. Beberapa hal yang dicoba di lab:

✅ Menambahkan pop-up sambutan dengan alert() saat halaman dimuat
✅ Memvalidasi input form secara sederhana
✅ Mengatur respons tombol submit jika field kosong
✅ Menggunakan fungsi JS untuk membuat efek sederhana saat tombol diklik

Seru banget liat peserta saling bantu debug error-nya masing-masing. Ada yang lupa = jadi ==, ada juga yang nulis consol.log wkwkw, tapi ya begitulah proses belajar!

📋 Tugas Mandiri: Halaman Login Interaktif

📌 Tugas:
Buat satu halaman Login Interaktif yang memiliki:

• Input field (username & password)

• Validasi input kosong (harus ada pesan alert kalau field kosong)

• Fungsi tombol submit dengan alert()

• Desain bebas, tapi tampilannya harus rapi (gunakan HTML + CSS + JS)

🗓️ Deadline: Akan diumumkan via grup
📤 Pengumpulan: Upload file ke folder tugas bersama

🔎 Insight dari Mentor

“JavaScript itu bukan cuma soal logika, tapi soal bagaimana kita membuat pengguna merasa dihargai lewat interaksi kecil.”
“Selalu tes fungsi kecil sebelum bikin yang besar, debugging itu bagian penting dari proses!”

📌 Apa yang Dipelajari?

✅ Konsep dasar JavaScript dan implementasi di HTML
✅ Interaksi sederhana antara pengguna dan halaman web
✅ Validasi form dasar
✅ Membiasakan menulis kode modular dengan import/export

🎉 Suasana Kelas

Lab jadi lebih ‘hidup’ dari biasanya karena tiap peserta punya reaksi unik di halaman mereka. Ada yang bikin alert lucu, ada juga yang desain login-nya elegan banget. Mentor juga rajin berkeliling bantuin peserta yang error saat input JS mereka.

🚀 What’s Next?

Di pertemuan berikutnya, kita akan mulai belajar DOM Manipulation, jadi semua elemen HTML bisa dikendalikan lewat JavaScript. Bersiaplah untuk masuk ke dunia yang lebih interaktif lagi!

📲 Jangan lupa share hasil login page kamu ke grup & cek dokumentasi kegiatan di IG kita:
👉 @sintech_uinws

#Sintech2025 #FrontEndJourney #JavaScriptDasar #BelajarNgoding #HMJTIUINWS