Apa itu JavaScript, dan skrip pertama kamu

Temui bahasa ketiga web dan tulis skrip pertama kamu yang berkomunikasi dengan konsol browser.

Tiga bahasa web

Dari Level 1 kamu tahu dua bahasa:

HTML – kerangka halaman (apa yang ada di dalamnya),
CSS – tampilan (tampilannya).

Bahasa ketiga dan terakhir adalah JavaScript – behavior (apa yang terjadi ketika…). Saat kamu mengeklik ▶ di YouTube dan video dimulai, saat toko online menghitung harga, saat permainan mencatat skor – itu semua adalah JavaScript.

Tempat tinggal JavaScript

JavaScript tinggal di filenya sendiri, sama seperti CSS. kamu memberi tahu laman tentang hal tersebut dengan tag <script> – letakkan tepat di akhir <body>, tepat sebelum </body>:

  ...page content...

  <script src="script.js"></script>
</body>

💡

Mengapa di akhir? Browser membaca halaman dari atas ke bawah. Ketika skrip berada di akhir, seluruh halaman sudah ada, dan skrip dapat langsung bekerja dengannya.

Tunjukkan pada saya: skrip pertama kamu

Di folder web-saya, buat file bernama script.js dan tulis ke dalamnya:
```
console.log("Hi, this is your website!");
```
Di index.html, tambahkan baris <script src="script.js"></script> tepat sebelum </body> dan simpan kedua file.
Buka halaman di browser kamu dan tekan F12 (di Mac, Cmd+Alt+I). Panel pengembang terbuka – klik tab Konsol.

Apakah kamu melihat “Hai, ini situs web kamu!”? JavaScript pertama kamu sedang berjalan! 🎉

Konsol adalah ruang rahasia di browser tempat pemrogram mengobrol dengan laman. Pengunjung tidak pernah melihatnya – ini hanya untuk kamu. console.log(...) berarti “cetak ini ke konsol.” kamu akan menggunakannya sepanjang waktu: ini adalah cara terbaik untuk mengetahui apa yang terjadi di dalam skrip kamu.

Konsol juga dapat mengerjakan matematika

Coba ketikkan ini langsung ke konsol (tekan Enter setelah setiap baris):

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript juga merupakan kalkulator – ia menambahkan angka-angka dan merekatkan teks (disebut string, kamu dapat melihatnya dari tanda kutipnya) ujung ke ujung.

Giliran kamu 💪

Tambahkan script.js ke setiap halaman situs web kamu (sama seperti kamu pernah menambahkan style.css).
Minta skrip mencetak nama situs web kamu ke konsol dan menghitung berapa jam tersisa hingga liburan musim panas – misalnya, console.log("Jam tersisa hingga liburan:", 48 * 24);.
Sengaja melakukan kesalahan – hapus tanda kutip dan simpan. Lihat seperti apa kesalahan di konsol (teks merah dengan nomor baris). Lalu perbaiki. Ini adalah kebiasaan yang penting: konsol akan selalu memberi tahu kamu di mana masalahnya.

✅

Periksa diri kamu: Saat kamu membuka halaman mana pun di situs web kamu, pesan kamu muncul di konsol. kamu tahu cara membuka konsol dan seperti apa kesalahannya. Itulah dasar keseluruhannya – dimulai dengan pelajaran berikutnya, kita mulai mengerjakan keajaiban di halaman tersebut.

Apa yang bisa diambil dari pelajaran ini

JavaScript = bahasa ketiga web: perilaku. Itu ditulis dalam file script.js dan dihubungkan dengan tag <script src="..."> sebelum </body>.
Konsol (F12) adalah jendela kamu ke dalam skrip: console.log() mencetak semuanya, kesalahan muncul dalam warna merah dengan nomor baris.
Teks dalam tanda kutip adalah string, dan string dapat direkatkan dengan +. Angka bisa dihitung.