Latihan 1: Anatomi URL — Web Fundamentals

Latihan 1 dari materi Anatomi URL di Web Fundamentals — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Buat fungsi parseUrl(urlString) yang mengurai URL dan mengembalikan object dengan empat properti:

protocol: protocol tanpa titik dua, misalnya "https"
hostname: nama host tanpa port, misalnya "belajarweb.dev" atau "localhost"
pathname: path-nya, misalnya "/courses"
queryParams: object berisi semua query, misalnya { page: "2", sort: "asc" }

Pakai new URL(urlString) dan url.searchParams, jangan menulis nilainya sendiri: fungsinya juga dicek dengan URL lain.

Baris console.log di starter sudah memanggil fungsinya, jangan diubah. Kalau fungsinya benar, console mencetak tujuh baris ini:

https
belajarweb.dev
/courses
2
asc
localhost
admin

Yang juga dicek: parseUrl("https://x.io:8443/a/b?q=1&z=two") menghasilkan protocol "https", hostname "x.io", pathname "/a/b", dan queryParams { q: "1", z: "two" }.

Hint

new URL sudah memecah URL jadi bagian-bagiannya. Kamu tinggal memindahkannya ke object baru, sambil merapikan dua hal: titik dua di protocol, dan query yang harus jadi object.
Pakai url.protocol (buang titik duanya dengan replace), url.hostname, url.pathname, dan url.searchParams.forEach((value, key) => ...) untuk mengisi object query.
const url = new URL(urlString); const queryParams = {}; url.searchParams.forEach((value, key) => { queryParams[key] = value; }); return { protocol: url.protocol.replace(":", ""), hostname: url.hostname, pathname: url.pathname, queryParams: queryParams };

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Anatomi URL — Web Fundamentals

Hint

Memperbarui Aplikasi