Pengantar JS

Selamat datang di langkah pertama Anda untuk menjadi Software Engineer. JavaScript bukan hanya sebuah bahasa; ini adalah mesin dari internet modern. Setiap tombol interaktif, peta langsung, dan notifikasi yang Anda lihat ditenagai oleh apa yang akan Anda pelajari.

Tritunggal Web

Untuk menguasai web, Anda harus memahami bagaimana tiga teknologi inti bekerja bersama. Bayangkan sebuah Rumah:

1. HTML (Struktur)

Dinding, pintu, dan balok. Ini mendefinisikan konten. Tanpanya, tidak ada yang bisa dilihat.

2. CSS (Gaya)

Cat, karpet, dan dekorasi. Ini mendefinisikan tampilan. Tanpanya, web terlihat jelek.

3. JavaScript (Logika)

Listrik, pipa ledeng, dan sistem rumah pintar. Ini mendefinisikan perilaku. Ini membuat rumah menjadi "hidup".

Bagaimana Komputer Mengerti Anda?

Komputer hanya mengerti angka 1 dan 0. JavaScript bertindak sebagai penerjemah. Anda menulis bahasa Inggris yang dapat dibaca manusia (kurang lebih), dan "Mesin" browser (seperti V8 di Chrome) mengompilasinya secara instan menjadi kode mesin. Ini terjadi dalam hitungan milidetik.

Dukung JS Fruggal dengan melihat sponsor kami.

Konsol: Kokpit Anda

Developer profesional tidak hanya menebak; mereka memeriksa. Perintah console.log() adalah cara Anda bertanya kepada komputer: "Hei, beri tahu saya apa nilai ini sekarang."

Coba sendiri: Di blok kode di bawah ini, ubah teks di dalam tanda kutip menjadi nama Anda sendiri dan klik Run.

skrip-pertama.js

javascript

// Komputer mencetak ini ke layar output
console.log("Halo, Calon Insinyur!"); 

// Ini juga bisa melakukan matematika secara instan
console.log(100 * 25);

Demo Interaktif: Menyatukan Semuanya

Di bawah ini adalah taman bermain sungguhan. Ini bukan simulasi—ini adalah kode nyata yang berjalan di browser Anda sekarang.

Tantangan Anda:
1. Klik tab "JS".
2. Temukan baris box.classList.toggle('dark');
3. Ubah 'dark' menjadi 'circle'.
4. Klik tombol di dalam Pratinjau untuk melihat apa yang terjadi!

<div class="container">
  <div class="box">
    <h2>Kotak Interaktif</h2>
    <p>Saya hanya sebuah div.</p>
  </div>
  <button onclick="interact()">Tombol Ajaib</button>
</div>

Pratinjau