Kok bisa teks jadi aplikasi?

Di bab sebelumnya kamu sudah tahu: komputer itu patuh, dan instruksi untuknya harus detail dan berurutan.

Tapi pasti ada satu pertanyaan yang mengganjal. Instruksinya ditulis pakai bahasa apa? Masa komputer ngerti bahasa Indonesia?

Jawabannya: nggak. Dan di situlah letak “sulap”-nya. Di bab ini kita bongkar triknya, lalu kamu langsung ngetik kode pertamamu.

Bahasa asli komputer: angka 0 dan 1

Di dalamnya, komputer cuma paham satu jenis bahasa, namanya bahasa mesinBahasa mesinBahasa asli komputer, berupa deretan angka 0 dan 1.Penjelasan lengkap →. Isinya deretan angka 0 dan 1 yang panjang banget.

Bayangin kamu harus bikin aplikasi dengan cara menulis ribuan angka 0 dan 1. Pusing, kan? Salah satu angka saja, hasilnya kacau.

Makanya orang menciptakan perantara: bahasa pemrogramanBahasa pemrogramanBahasa khusus untuk menulis instruksi ke komputer, lebih mudah dibaca manusia daripada bahasa mesin.Penjelasan lengkap →. Ini bahasa buatan yang cukup mirip bahasa manusia supaya kita bisa menulisnya, tapi cukup ketat aturannya supaya bisa diterjemahkan ke bahasa mesin. Ketat banget, malah. Lupa satu tanda baca saja, komputer langsung menolak. (Ingat Bab 1: patuh, tapi bodoh.)

Tukang terjemah di tengah

Terus, siapa yang menerjemahkan dari bahasa pemrograman ke bahasa mesin? Sebuah program penerjemah. Ada dua gaya kerjanya, dan analogi paling gampang adalah penerjemah bahasa asing.

Gaya pertama: penerjemah langsung. Bayangin ada turis ngomong bahasa Inggris, dan seorang penerjemah berdiri di sebelahnya. Turis ngomong satu kalimat, penerjemah langsung menyampaikan dalam bahasa Indonesia, lalu lanjut ke kalimat berikutnya. Gaya ini disebut interpreterInterpreterPenerjemah yang membaca kode sedikit demi sedikit dan langsung menjalankannya saat itu juga.Penjelasan lengkap →. Enaknya: begitu kamu selesai nulis, langsung bisa dicoba.

Gaya kedua: terjemah satu buku dulu. Bayangin sebuah novel bahasa Inggris yang diterjemahkan seluruhnya jadi buku berbahasa Indonesia, baru setelah itu dibaca. Gaya ini disebut compilerCompilerPenerjemah yang mengubah seluruh kode menjadi bentuk siap jalan dulu, baru dijalankan.Penjelasan lengkap →. Prosesnya makan waktu di awal, tapi hasil akhirnya bisa lebih ngebut.

Kamu nggak perlu menghafal keduanya. Aslinya, mesin penerjemah zaman sekarang lebih canggih dan sering mencampur dua gaya itu. Yang penting kamu pegang idenya: ada penerjemah di tengah antara tulisanmu dan komputer.

Dan penerjemahnya sudah ada di HP-mu

Ini kabar baiknya. Kamu nggak perlu memasang penerjemah apa pun, karena yang kita pakai sudah ada di setiap HP dan laptop: browserBrowserAplikasi untuk membuka halaman web, seperti Chrome, Firefox, Safari, atau Edge.Penjelasan lengkap →.

Di Bab 0 kamu sudah tahu browser itu “pembaca” file. Sekarang tambah satu lagi: browser juga penerjemah. Dia bisa membaca tiga jenis tulisan sekaligus, dan masing-masing punya tugas sendiri. Paling gampang dibayangkan lewat tubuh manusia:

• HTMLHTMLBahasa untuk menyusun kerangka halaman web, seperti judul, paragraf, kotak isian, dan tombol.Penjelasan lengkap → = kerangka. Seperti tulang yang menentukan ada kepala, tangan, dan kaki. Di web: mana judul, mana paragraf, mana tombol. (Bab 3)
• CSSCSSBahasa untuk mengatur tampilan halaman web, seperti warna, ukuran, dan jarak.Penjelasan lengkap → = baju. Seperti pakaian dan dandanan: warna, ukuran huruf, jarak, bentuk. (Bab 4)
• JavaScriptJavaScriptBahasa pemrograman yang bikin halaman web bisa bereaksi, misalnya saat diklik, menghitung, atau menyimpan data.Penjelasan lengkap → = otak. Yang bikin tubuh bisa bereaksi: kalau tombol diklik, lakukan sesuatu. (Bab 5)

Ketiganya bekerja bareng. Tanpa HTML nggak ada isi. Tanpa CSS isinya polos dan kaku. Tanpa JavaScript halamannya cuma bisa dipandang, nggak bisa diajak ngapa-ngapain.

Dan ketiganya akan kita pakai buat membangun satu aplikasi: catatan uang jajan.

Coba sendiri: ketik judul pertamamu

Cukup teori. Di bawah ini ada kotak latihan. Isinya sudah ada kode kecil. Tugasmu cuma satu: ubah tulisannya, lihat apa yang terjadi.

<!DOCTYPE html>
<html lang="id">
<body>
  <h1>Halo, ini judul pertamaku!</h1>
  <p>Coba ganti tulisan di atas, lalu lihat hasilnya berubah.</p>
</body>
</html>

Cara pakai kotaknya:

• Bagian editor adalah code editorCode editorAplikasi khusus untuk menulis kode — seperti Notepad, tapi pintar (ada warna, nomor baris, dan saran otomatis).Penjelasan lengkap → mini tempat kamu mengetik. Di HP, sentuh dulu bagian itu baru ketik.
• Bagian Hasilnya menampilkan halaman web dari kode itu. Kamu nggak perlu menekan tombol apa pun. Sekitar setengah detik setelah berhenti mengetik, hasilnya berubah sendiri.
• Tombol Kembalikan ke awal mengembalikan kode ke versi semula kalau kamu ngerasa berantakan. Tombol Lihat jawaban menampilkan contoh jawaban. Keduanya bakal nanya dulu sebelum menimpa tulisanmu, jadi tenang saja.
• Kodemu tersimpan otomatis. Halaman di-refresh pun, tulisanmu masih ada.

Sekarang coba tiga hal ini, urut:

1. Ganti tulisan Halo, ini judul pertamaku! jadi Halo, aku diikuti namamu. Lihat judul di hasil berubah.
2. Tambah satu baris paragraf baru di bawah paragraf yang ada, misalnya <p>Aku suka bakso dan main game.</p>.
3. Penasaran? Ganti h1 jadi h3 di dua tempat (awal dan akhir baris judul). Judulnya mengecil. Angka 1 sampai 6, makin besar angkanya makin kecil tulisannya.

Sudah? Nah, coba perhatikan satu hal. Tulisan <h1> yang kamu ketik nggak muncul di hasil. Yang muncul cuma “Halo, …”, tapi dalam ukuran besar dan tebal.

Itu karena browser membaca <h1> sebagai perintah, bukan sebagai tulisan yang perlu ditampilkan. Potongan semacam <h1> ini namanya tagTagPenanda di HTML yang ditulis di antara tanda kurung sudut, seperti h1 untuk judul atau p untuk paragraf.Penjelasan lengkap →, dan artinya kira-kira “yang ada di antara ini adalah judul besar”. Barusan kamu menyaksikan penerjemah bekerja: tulisan jadi tampilan. Itulah jawaban dari judul bab ini. 🎉

Bahasa pemrograman itu banyak!

Mungkin kamu pernah dengar nama-nama seperti Python atau Java dan bertanya-tanya, “Lho, kok kita pakai yang lain?” Betul, bahasa pemrograman itu banyak banget. Beberapa yang paling sering kamu dengar:

• JavaScript untuk bikin halaman web bisa bereaksi. Ini yang akan kita pakai.
• Python populer untuk data, AI, dan otomatisasi. Tulisannya enak dibaca, jadi sering dipilih pemula.
• PHP untuk mengurus bagian belakang layar sebuah situs web. WordPress, misalnya, ditulis dengan PHP.
• Java dipakai di sistem perusahaan besar dan aplikasi Android.
• Kotlin bahasa utama untuk membuat aplikasi Android, didukung penuh oleh Google.
• Swift bahasa buatan Apple untuk aplikasi iPhone dan iPad.

Kenapa kita mulai dari HTML, CSS, dan JavaScript? Tiga alasan. Cukup browser, jadi nggak ada yang perlu dipasang (bahkan bisa dari HP). Hasilnya langsung kelihatan, jadi kamu nggak merasa ngoding itu cuma teks bikin pusing. Dan pindah ke bahasa lain nanti nggak mulai dari nol lagi.

Satu catatan kecil biar nggak salah kaprah: dari tiga itu, yang benar-benar bahasa pemrograman cuma JavaScript. HTML dan CSS tugasnya mengatur isi dan tampilan, bukan memberi perintah. Alasan lengkapnya ada di Bab 11.

Soal ini, nggak usah galau. Konsep dasarnya sama di hampir semua bahasa: menyimpan data, mengambil keputusan, mengulang pekerjaan, membungkus instruksi. Beda bahasa itu seperti beda kendaraan. Orang yang sudah bisa naik motor lebih gampang belajar mobil: setirnya beda, tapi lampu merah tetap artinya berhenti.

Penasaran sama perbandingan lengkapnya, termasuk satu program yang sama ditulis dalam beberapa bahasa? Ada di Bab 11. Tapi baca belakangan saja, setelah aplikasimu jadi.