Perbedaan HTML, CSS, dan JavaScript — Apa yang Digambar Lapisan Server Web

Artikel ini membahas tiga hal yang membentuk lapisan server Web: HTML, CSS, dan JavaScript.

Tempat menulisnya terpisah menjadi index.html, style.css, dan script.js karena yang ditentukan masing-masing berbeda.

Ketiga file itu tidak tiba sekaligus.

Ketiga file itu semuanya diterima browser, dan yang memuat maupun yang menjalankannya juga browser.

HTML menuliskan apa yang ada di layar sebagai jenis dan urutan komponen

HTML (HyperText Markup Language; bahasa yang menuliskan apa yang ada di layar sebagai jenis dan urutan komponen) ditulis di index.html.

Setiap komponen layar adalah elemen (element), nama dan pengaturan yang dilekatkan pada elemen adalah atribut (attribute), dan tanda yang menunjukkan awal serta akhir elemen adalah tag.

index.html untuk formulir reservasi terbentuk dari ketiga hal ini.

<form>
  <input type="date">
  <button type="button" id="reserve" class="action">Reservasi</button>
  <p id="message"></p>
</form>

id dan class adalah nama yang dipakai CSS dan JavaScript nanti untuk memilih sebuah komponen.

id hanya dipakai satu kali dalam satu halaman, sedangkan class boleh dilekatkan pada berapa pun jumlah elemen.

Elemen bisa bersarang, dan elemen button berada di dalam elemen form.

Elemen head berisi judul halaman dan nama file yang dipakai, dan yang muncul di layar hanya isi elemen body.

index.html hanya menuliskan apa yang ada

Yang kamu tulis di index.html hanyalah apa yang ada di layar.

Tag menunjukkan jenis tiap komponen, kamu menulis isinya dan urutan berjajarnya, sedangkan id dan class pada tag pembuka adalah nama yang dipakai file lain nanti untuk memilih komponen itu.

CSS mengumpulkan tampilan elemen ke dalam file terpisah

CSS (Cascading Style Sheets; bahasa yang menuliskan cara menampilkan elemen HTML sebagai aturan warna, ukuran, dan tata letak) hanya menentukan tampilannya.

style.css berbentuk seperti berikut.

.action {
  background-color: #2a6f97;
  color: white;
  border-radius: 8px;
}

.action di awal adalah penunjuk elemen mana yang dikenai aturan itu.

Tiga baris di dalam kurung kurawal berlaku untuk semua elemen yang class-nya action.

Di dalam style.css, aturan seperti ini ditulis berjajar dalam jumlah banyak.

Saat ada 3 tombol di layar yang sama, berapa tempat yang diperbaiki untuk mengubah warnanya bergantung pada di mana kamu menulis tampilannya.

Tampilan juga bisa ditulis di atribut style milik elemen, tetapi perubahan yang sama harus diulang sebanyak jumlah elemennya.

Kalau dikumpulkan di style.css, yang diperbaiki cukup 1 tempat.

style.css memilih lewat nama lalu menentukan tampilannya

Yang dilakukan style.css hanyalah menuliskan komponen mana ditampilkan seperti apa.

Komponen mana dipilih lewat nama class atau id yang dilekatkan di index.html, dan style.css tidak menambah komponen ataupun menulis ulang teks.

JavaScript bereaksi terhadap aksi dan menulis ulang layar

Layar yang hanya terdiri dari HTML dan CSS tidak berubah isinya setelah ditampilkan.

Menampilkan teks saat tombol ditekan adalah tugas JavaScript di lapisan server Web.

script.js berbentuk seperti berikut.

const button = document.querySelector("#reserve");
button.addEventListener("click", () => {
  document.querySelector("#message").textContent = "Reservasi sudah dikirim";
});

document pada baris pertama adalah nama yang menunjuk seluruh halaman yang dimuat browser.

#reserve setelahnya adalah cara penulisan untuk memilih elemen yang id-nya reserve, dan tanda di depan nama itu menyatakan apakah yang dipilih class atau id.

Ketiga file itu terhubung lewat nama yang dilekatkan di index.html.

addEventListener pada baris kedua adalah pendaftaran proses yang dijalankan saat terjadi click.

Bentuk () => { } setelahnya adalah cara menulis proses yang dijalankan saat tombol ditekan, di dalam kurung kurawal.

Kejadian seperti klik ini, ketika browser memberi tahu program apa yang dilakukan pengguna, disebut event.

Jenis event bukan hanya klik.

Apa yang dilakukan pada event mana didaftarkan lebih dulu.

Perubahan warna saat mouse diarahkan ke elemen berasal dari CSS, sedangkan pengiriman formulir dilakukan browser.

script.js juga sampai ke browser pengguna dan isinya bisa dibaca, jadi jangan menulis nilai yang tidak boleh dilihat orang lain di dalamnya.

script.js baru berjalan setelah dipanggil

script.js hanya mendaftarkan lebih dulu: kalau ini ditekan, lakukan ini.

Proses yang dipanggil browser saat tombol ditekan menulis ulang komponen di layar, tetapi isi index.html tidak berubah, dan karena script.js sampai ke browser pengguna, jangan menulis nilai yang tidak boleh dilihat orang lain di dalamnya.

Browser membangun DOM dari HTML, menerapkan CSS lalu menggambarnya, dan menulis ulangnya dengan JavaScript

Browser tidak menampilkan teks HTML apa adanya, melainkan merakit susunan bersarang elemen itu menjadi data.

Inilah DOM (Document Object Model; data yang menata elemen dengan susunan bersarangnya).

Yang terlihat di layar adalah gambaran dari DOM ini.

Proses yang didaftarkan script.js pun menunggu di dalam memori browser yang sama dengan DOM.

Ketiga file itu tiba terpisah-pisah lalu menyatu menjadi satu DOM di dalam browser.

Halaman yang terlihat di layar adalah gambaran dari DOM ini.

Menerapkan CSS ke DOM, menghitung posisi dan ukuran, lalu menggambarnya disebut rendering.

Yang berubah hanyalah DOM di dalam memori browser.

index.html yang tiba maupun file yang ditaruh di server publik tetap apa adanya.

Isi yang ingin kamu simpan dikirim ke lapisan server aplikasi lalu disimpan di lapisan database.

Cara menulis JavaScript dan latihan menjalankannya di browser dibahas di Kursus Pengantar JavaScript.

Layar adalah gambaran dari DOM

Browser merakit susunan bersarang komponen dari index.html yang diterimanya, lalu memberi warna dan ukuran sesuai aturan style.css dan menggambarnya.

Yang ditulis ulang script.js adalah hasil rakitan itu, jadi saat dimuat ulang semuanya dirakit kembali dari file yang tiba dan isi yang sudah ditulis ulang hilang.