13 JavaScript dan Browser

Bab 13 dari Eloquent JavaScript. Sebelumnya: 12 Proyek Bahasa Pemrograman. Berikutnya: 14 Document Object Model.

Mimpi di balik web adalah ruang informasi bersama tempat kita berkomunikasi dengan berbagi informasi. Keuniversalannya itu esensial: fakta bahwa link hypertext bisa nunjuk ke apa pun, baik personal, lokal atau global, baik draf atau yang udah sangat dipoles.

— Tim Berners-Lee, The World Wide Web: A Very Short Personal History

Bab-bab berikutnya dari buku ini bakal ngebahas browser web. Tanpa browser, gak bakal ada JavaScript, atau kalaupun ada, gak ada yang bakal pernah memperhatikannya.

Teknologi web udah terdesentralisasi dari awal, gak cuma secara teknis tapi juga dalam hal cara dia berkembang. Berbagai vendor browser udah nambahin fungsionalitas baru dengan cara yang serampangan dan kadang kurang dipikirin matang, yang lalu, kadang, diadopsi yang lain, dan akhirnya ditetapkan dalam standar.

Ini berkah sekaligus kutukan. Di satu sisi, memberdayakan buat gak punya pihak sentral yang ngendaliin sistem tapi malah diperbaiki berbagai pihak yang bekerja dalam kolaborasi longgar (atau sesekali, permusuhan terbuka). Di sisi lain, cara serampangan web dikembangkan berarti sistem hasilnya bukan tepatnya contoh cemerlang dari konsistensi internal. Beberapa bagiannya benar-benar membingungkan dan didesain buruk.

Jaringan dan Internet

Jaringan komputer udah ada sejak 1950-an. Kalau kamu naruh kabel di antara dua komputer atau lebih dan ngebolehin mereka ngirim data bolak-balik lewat kabel-kabel ini, kamu bisa ngelakuin segala macam hal yang menakjubkan.

Kalau nyambungin dua mesin di bangunan yang sama bikin kita bisa ngelakuin hal menakjubkan, nyambungin mesin di seluruh planet harusnya lebih baik lagi. Teknologi buat mulai ngimplementasiin visi ini dikembangkan di 1980-an, dan jaringan hasilnya disebut internet. Dia udah menepati janjinya.

Komputer bisa pakai jaringan ini buat nembakin bit ke komputer lain. Biar komunikasi yang efektif muncul dari penembakan bit ini, komputer di kedua ujung harus tahu apa yang seharusnya diwakili bit-nya. Makna dari deretan bit tertentu sepenuhnya tergantung jenis hal yang dia coba ekspresikan dan mekanisme encoding yang dipakai.

Protokol jaringan menggambarkan gaya komunikasi lewat jaringan. Ada protokol buat ngirim email, buat ngambil email, buat berbagi file, bahkan buat ngendaliin komputer yang kebetulan terinfeksi software jahat.

HyperText Transfer Protocol (HTTP) adalah protokol buat ngambil sumber daya bernama (potongan informasi, kaya halaman web atau gambar). Dia nentuin bahwa sisi yang bikin request harus mulai dengan baris kaya gini, nyebutin sumber dayanya dan versi protokol yang dia coba pakai:

GET /index.html HTTP/1.1

Ada banyak aturan lagi soal cara peminta bisa nyertain lebih banyak informasi di request dan cara sisi lain, yang ngembaliin sumber dayanya, ngemas isinya. Kita bakal ngelihat HTTP lebih detail di Bab 18.

Kebanyakan protokol dibangun di atas protokol lain. HTTP memperlakukan jaringan sebagai perangkat mirip-stream tempat kamu bisa naruh bit dan bikin mereka tiba di tujuan yang benar dalam urutan yang benar. Nyediain jaminan itu di atas pengiriman data primitif yang dikasih jaringan udah jadi masalah yang cukup rumit.

Transmission Control Protocol (TCP) adalah protokol yang ngatasin masalah ini. Semua perangkat yang terhubung internet “ngomong” dia, dan kebanyakan komunikasi di internet dibangun di atasnya.

Koneksi TCP bekerja kaya gini: satu komputer harus nunggu, atau mendengarkan (listening), komputer lain buat mulai ngomong ke dia. Biar bisa mendengarkan berbagai jenis komunikasi di saat yang sama di satu mesin, setiap pendengar punya angka (disebut port) yang terkait dengannya. Kebanyakan protokol nentuin port mana yang harus dipakai secara default. Misalnya, waktu kita mau ngirim email pakai protokol SMTP, mesin tempat kita ngirimnya diharapkan mendengarkan di port 25.

Komputer lain lalu bisa membangun koneksi dengan nyambung ke mesin target pakai nomor port yang benar. Kalau mesin target-nya bisa dicapai dan lagi mendengarkan di port itu, koneksinya berhasil dibikin. Komputer yang mendengarkan disebut server, dan komputer yang nyambung disebut client.

Koneksi kaya gitu bertindak sebagai pipa dua arah tempat bit bisa mengalir, mesin di kedua ujung bisa naruh data ke dalamnya. Begitu bit-nya berhasil ditransmisikan, mereka bisa dibaca lagi sama mesin di sisi lain. Ini model yang praktis. Kamu bisa bilang TCP nyediain abstraksi dari jaringan.

Web

World Wide Web (jangan ketuker sama internet secara keseluruhan) adalah sekumpulan protokol dan format yang ngebolehin kita ngunjungin halaman web di browser. Kata Web (jaring) ngerujuk ke fakta bahwa halaman kaya gitu bisa dengan gampang saling nge-link, jadi terhubung jadi jaring besar yang bisa dilalui pengguna.

Buat jadi bagian dari web, yang perlu kamu lakuin cuma nyambungin mesin ke internet dan bikin dia mendengarkan di port 80 dengan protokol HTTP biar komputer lain bisa minta dokumen ke dia.

Setiap dokumen di web dinamai dengan uniform resource locator (URL), yang keliatan kaya gini:

  http://eloquentjavascript.net/13_browser.html
 |      |                      |               |
 protokol       server               path

Bagian pertama ngasih tahu kita bahwa URL ini pakai protokol HTTP (berbeda dari, misalnya, HTTP terenkripsi, yang bakal jadi https://). Lalu datang bagian yang ngidentifikasi server mana yang lagi kita mintai dokumennya. Terakhir string path yang ngidentifikasi dokumen (atau resource) yang kita minati.

Mesin yang terhubung internet dapet alamat IP, angka yang bisa dipakai buat ngirim pesan ke mesin itu, dan keliatan kaya 149.210.142.219 atau 2001:4860:4860::8888. Karena daftar angka yang kurang lebih acak susah diingat dan canggung diketik, kamu bisa daftarin domain name buat sebuah alamat atau sekumpulan alamat. Saya daftarin eloquentjavascript.net buat nunjuk ke alamat IP mesin yang saya kendalikan dan jadi bisa pakai domain name itu buat nyajiin halaman web.

Kalau kamu ngetik URL ini ke bar alamat browsermu, browser bakal nyoba ngambil dan nampilin dokumen di URL itu. Pertama, browsermu harus nyari tahu alamat apa yang dirujuk eloquentjavascript.net. Lalu, pakai protokol HTTP, dia bakal bikin koneksi ke server di alamat itu dan minta resource /13_browser.html. Kalau semua berjalan baik, server ngirim balik dokumen, yang lalu ditampilin browsermu di layar.

HTML

HTML, singkatan dari HyperText Markup Language, adalah format dokumen yang dipakai buat halaman web. Dokumen HTML berisi teks, juga tag yang ngasih struktur ke teksnya, menggambarkan hal-hal kaya link, paragraf, dan heading.

Dokumen HTML pendek mungkin keliatan kaya gini:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My home page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>I also wrote a book! Read it
      <a href="http://eloquentjavascript.net">here</a>.</p>
  </body>
</html>

Tag-nya, dibungkus kurung sudut (< dan >, simbol buat kurang dari dan lebih dari), nyediain informasi soal struktur dokumennya. Teks lainnya cuma teks biasa.

Dokumennya dimulai dengan <!doctype html>, yang ngasih tahu browser buat menafsirkan halamannya sebagai HTML modern, berbeda dari gaya usang yang dipakai di masa lalu.

Dokumen HTML punya head dan body. Head berisi informasi tentang dokumennya, dan body berisi dokumennya sendiri. Di kasus ini, head mendeklarasikan bahwa judul dokumen ini “My home page” dan bahwa dia pakai encoding UTF-8, yang merupakan cara buat encode teks Unicode sebagai data biner. Body dokumennya berisi heading (<h1>, artinya “heading 1”, <h2> sampai <h6> ngehasilin subheading) dan dua paragraf (<p>).

Tag datang dalam beberapa bentuk. Elemen, kaya body, paragraf, atau link, dimulai dengan tag pembuka kaya <p> dan diakhiri dengan tag penutup kaya </p>. Beberapa tag pembuka, kaya yang buat link (<a>), berisi informasi ekstra dalam bentuk pasangan name="value". Ini disebut atribut. Di kasus ini, tujuan link-nya ditunjukin dengan href="http://eloquentjavascript.net", di mana href singkatan dari “hypertext reference”.

Beberapa jenis tag gak ngelingkupin apa pun dan jadi gak perlu ditutup. Tag metadata <meta charset="utf-8"> adalah contohnya.

Biar bisa nyertain kurung sudut di teks dokumen walaupun mereka punya makna khusus di HTML, satu lagi bentuk notasi khusus harus diperkenalkan. Kurung sudut buka biasa ditulis sebagai < (“less than”), dan kurung penutup ditulis sebagai > (“greater than”). Di HTML, karakter ampersand (&) diikuti nama atau kode karakter dan titik koma (;) disebut entity dan bakal diganti dengan karakter yang dia encode.

Ini analog dengan cara backslash dipakai di string JavaScript. Karena mekanisme ini ngasih karakter ampersand makna khusus juga, mereka perlu di-escape sebagai &. Di dalam nilai atribut, yang dibungkus kutip ganda, " bisa dipakai buat nyisipin karakter kutip literal.

HTML di-parse dengan cara yang sangat toleran terhadap error. Waktu tag yang seharusnya ada hilang, browser otomatis nambahinnya. Cara ini dilakuin udah distandarkan, dan kamu bisa ngandelin semua browser modern buat ngelakuinnya dengan cara yang sama.

Dokumen berikut bakal diperlakukan persis kaya yang ditunjukin sebelumnya:

<!doctype html>
 
<meta charset=utf-8>
<title>My home page</title>
 
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.
<p>I also wrote a book! Read it
  <a href=http://eloquentjavascript.net>here</a>.

Tag <html>, <head>, dan <body> sepenuhnya hilang. Browser tahu bahwa <meta> dan <title> termasuk di head dan bahwa <h1> berarti body udah dimulai. Selain itu, saya gak lagi eksplisit nutup paragrafnya, karena membuka paragraf baru atau ngakhirin dokumen bakal nutup mereka secara implisit. Kutip di sekitar nilai atributnya juga hilang.

Buku ini biasanya bakal ngilangin tag <html>, <head>, dan <body> dari contoh biar mereka pendek dan bebas kekacauan. Tapi saya akan nutup tag dan nyertain kutip di sekitar atribut.

Saya juga biasanya bakal ngilangin doctype dan deklarasi charset. Jangan anggap ini sebagai dorongan buat ngebuang ini dari dokumen HTML. Browser sering bakal ngelakuin hal konyol waktu kamu lupa mereka. Anggap doctype dan metadata charset hadir secara implisit di contoh, bahkan waktu mereka gak beneran ditunjukin di teks.

HTML dan JavaScript

Dalam konteks buku ini, tag HTML yang paling penting adalah <script>, yang ngebolehin kita nyertain sepotong JavaScript di dokumen.

<h1>Testing alert</h1>
<script>alert("hello!");</script>

Script kaya gitu bakal jalan begitu tag <script>-nya ditemuin waktu browser baca HTML-nya. Halaman ini bakal munculin dialog waktu dibuka, fungsi alert mirip prompt, dalam hal dia munculin jendela kecil, tapi cuma nampilin pesan tanpa minta input.

Nyertain program besar langsung di dokumen HTML sering gak praktis. Tag <script> bisa dikasih atribut src buat ngambil file script (file teks yang berisi program JavaScript) dari URL.

<h1>Testing alert</h1>
<script src="code/hello.js"></script>

File code/hello.js yang disertakan di sini berisi program yang sama, alert("hello!"). Waktu halaman HTML ngerujuk URL lain sebagai bagian dari dirinya, kaya file gambar atau script, browser web bakal ngambilnya langsung dan nyertainnya di halaman.

Tag script harus selalu ditutup dengan </script>, bahkan kalau dia ngerujuk file script dan gak berisi kode apa pun. Kalau kamu lupa ini, sisa halamannya bakal ditafsirin sebagai bagian dari script.

Kamu bisa ngeload ES modules (lihat Bab 10) di browser dengan ngasih tag script-mu atribut type="module". Modul kaya gitu bisa bergantung pada modul lain dengan pakai URL relatif ke diri mereka sebagai nama modul di deklarasi import.

Beberapa atribut juga bisa berisi program JavaScript. Tag <button> (yang muncul sebagai tombol) mendukung atribut onclick. Nilai atributnya bakal dijalanin setiap kali tombolnya diklik.

<button onclick="alert('Boom!');">DO NOT PRESS</button>

Perhatiin bahwa saya harus pakai kutip tunggal buat string di atribut onclick karena kutip ganda udah dipakai buat ngutip seluruh atributnya. Saya juga bisa pakai " buat escape kutip dalamnya.

Di Dalam Sandbox

Ngejalanin program yang diunduh dari internet berpotensi berbahaya. Kamu gak tahu banyak soal orang-orang di balik kebanyakan situs yang kamu kunjungi, dan mereka gak selalu bermaksud baik. Ngejalanin program dari aktor jahat adalah cara komputermu terinfeksi virus, datamu dicuri, dan akunmu diretas.

Tapi daya tarik web adalah kamu bisa menjelajahinya tanpa harus mempercayai semua halaman yang kamu kunjungi. Inilah kenapa browser sangat membatasi hal-hal yang boleh dilakuin program JavaScript: dia gak bisa ngelihat file di komputermu atau memodifikasi apa pun yang gak terkait halaman web tempat dia ditanam.

Ngisolasi environment pemrograman dengan cara ini disebut sandboxing, idenya adalah programnya main tanpa bahaya di dalam kotak pasir. Tapi kamu sebaiknya ngebayangin jenis kotak pasir tertentu ini punya kandang jeruji baja tebal di atasnya biar program yang main di dalamnya gak beneran bisa keluar.

Bagian susah dari sandboxing adalah ngebolehin program cukup ruang buat berguna sambil membatasi mereka dari ngelakuin apa pun yang berbahaya. Banyak fungsionalitas yang berguna, kaya berkomunikasi sama server lain atau baca isi clipboard copy-paste, juga bisa dipakai buat tujuan yang bermasalah dan menyerang privasi.

Sesekali, seseorang nemuin cara baru buat ngakalin batasan browser dan ngelakuin sesuatu yang berbahaya, mulai dari membocorkan informasi pribadi kecil sampai ngambil alih seluruh mesin tempat browser-nya jalan. Pengembang browser merespons dengan memperbaiki lubangnya, dan semua baik-baik lagi, sampai masalah berikutnya ditemuin, dan semoga dipublikasikan bukannya diam-diam dieksploitasi sama agensi pemerintah atau organisasi kriminal.

Kompatibilitas dan Perang Browser

Di tahap awal web, browser bernama Mosaic mendominasi pasar. Setelah beberapa tahun, keseimbangannya bergeser ke Netscape, yang, pada gilirannya, sebagian besar digantikan Internet Explorer-nya Microsoft. Di titik mana pun di mana satu browser dominan, vendor browser itu bakal ngerasa berhak buat secara sepihak nemuin fitur baru buat web. Karena kebanyakan pengguna pakai browser paling populer, website bakal cuma mulai pakai fitur-fitur itu, gak peduli browser lain.

Ini zaman kegelapan kompatibilitas, sering disebut perang browser. Pengembang web ditinggal bukan dengan satu web yang bersatu tapi dua atau tiga platform yang gak kompatibel. Buat bikin lebih buruk, browser yang dipakai sekitar 2003 semuanya penuh bug, dan tentu aja bug-nya berbeda buat setiap browser. Hidup susah buat orang yang nulis halaman web.

Mozilla Firefox, cabang nirlaba dari Netscape, menantang posisi Internet Explorer di akhir 2000-an. Karena Microsoft gak terlalu tertarik tetap kompetitif saat itu, Firefox ngambil banyak pangsa pasar darinya. Sekitar waktu yang sama, Google ngenalin browser Chrome-nya dan browser Safari-nya Apple naik popularitas, ngarah ke situasi di mana ada empat pemain besar, bukannya satu.

Pemain baru punya sikap yang lebih serius terhadap standar dan praktik rekayasa yang lebih baik, ngasih kita lebih sedikit ketidakcocokan dan lebih sedikit bug. Microsoft, ngelihat pangsa pasarnya runtuh, berbalik dan mengadopsi sikap ini di browser Edge-nya, yang menggantikan Internet Explorer. Kalau kamu mulai belajar pengembangan web hari ini, anggap dirimu beruntung. Versi terbaru browser besar berperilaku cukup seragam dan punya relatif sedikit bug.

Sayangnya, dengan pangsa pasar Firefox yang makin kecil, dan Edge jadi cuma pembungkus di sekitar inti Chrome di 2018, keseragaman ini mungkin sekali lagi berbentuk satu vendor, Google kali ini, punya cukup kendali atas pasar browser buat mendorong idenya soal seperti apa web seharusnya ke seluruh dunia.

Apa pun nilainya, rantai panjang peristiwa dan kecelakaan sejarah ini udah ngehasilin platform web yang kita punya hari ini. Di bab-bab berikutnya, kita bakal nulis program buatnya.

Ringkasan

1. Internet = jaringan global yang nembakin bit antar komputer. Protokol (kaya HTTP, TCP, SMTP) nentuin makna bit-nya.
2. TCP: server listening di sebuah port, client connecting ke port itu. Jadi pipa dua arah, abstraksi dari jaringan.
3. Web = protokol + format buat ngunjungin halaman. Tiap dokumen punya URL (protokol + server + path). Mesin punya alamat IP, dipetakan dari domain name.
4. HTML = format dokumen dengan tag (<p>, <h1>, <a href="...">, dll). Punya head (info) dan body (isi). Browser toleran terhadap error dan otomatis nambahin tag yang hilang. Entity (<, >, &, ") buat karakter khusus.
5. JavaScript disisipin lewat <script> (inline atau src="...", atau type="module"), atau atribut kaya onclick.
6. Sandboxing: browser ngebatasin program web biar gak bisa ngerusak komputer atau nyuri data.
7. Sejarah perang browser: Mosaic → Netscape → Internet Explorer → (Firefox, Chrome, Safari, Edge). Sekarang browser lebih seragam, tapi Chrome makin dominan.