Teorija

Kur einame ir kaip veikia žiniatinklis

Sveikas — čia pradedi kurti internetui. Prieš rašydami pirmą eilutę, pažiūrėk, kur einame.

Šiame takelyje pastatysi Cosmos — NASA dienos nuotraukos svetainės — sąsają: tikrą, statišką puslapį su semantiniu HTML, responsyviu išdėstymu ir šviesia bei tamsia tema. Be nė vienos JavaScript eilutės. Failus, į kuriuos augsi, gali atsidaryti dabar: github.com/programuoki/cosmos — pažiūrėk vanilla/index.html ir vanilla/style.css, į ten ir judame.

Kad tas puslapis atgytų — galerija filtruotųsi, nuotrauka atsidarytų, tema persijungtų paspaudus — reikia JavaScript, o tai jau kito, kliento dalies takelio darbas. Čia sudedi puslapį statiškai; ten jis paverčiamas veikiančiu. Be karkaso, nieko neįdiegęs, be surinkimo (build step) — tik failai, kuriuos naršyklė moka perskaityti.

Trys kalbos, trys darbai. Visas žiniatinklis stovi ant trijų kalbų, ir kiekviena turi vieną darbą:

HTML — kas dalykai YRA: antraštė, sąrašas, forma, nuoroda.
CSS — kaip jie ATRODO: spalvos, tarpai, išdėstymas.
JavaScript — kas NUTINKA: paspaudimai, duomenų atsisiuntimas, pokyčiai ekrane.

Laikyk šiuos tris atskirai galvoje ir didžioji dalis darbo lieka paprasta. Sumaišyk juos — ir niekas neveikia taip, kaip tikiesi. Visos septynios šio takelio pamokos — apie pirmas dvi, HTML ir CSS. Tai sąmoninga: puslapį, kuris gerai sudėtas iš apačios, lengva paversti interaktyviu; o tą, kuris sudėtas prastai — neįmanoma.

Kas nutinka, kai įrašai adresą

Kai naršyklėje įrašai adresą, ji išsiunčia serveriui užklausą dėl vieno failo:

GET /index.html HTTP/1.1
Host: example.com

Serveris atsako — su būsenos kodu ir turiniu:

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>...

200 reiškia „gerai, štai failas". Naršyklė perskaito HTML, randa jame nurodytus CSS failus ir paveikslus — ir prašo kiekvieno iš jų atskirai. Vienas puslapis yra daug užklausų. Netrukus jas visas pamatysi savo akimis.

Kas nusprendžia, ką HTML reiškia? Specifikacijas leidžia W3C ir WHATWG; naršyklių kūrėjai jas įgyvendina. Todėl tas pats puslapis veikia ir Chrome, ir Firefox — ir todėl „pas mane veikia" čia yra silpnesnis argumentas nei bet kur kitur.

Vienas klausimas, kurį verta apmąstyti dabar: kur čia vykdomas tavo kodas? Pagalvok sekundę, prieš skaitydamas toliau. — Jis vykdomas lankytojo naršyklėje, jo kompiuteryje, jo kontrolėje. Viską, ką parašai, gali perskaityti, pakeisti ir išjungti tas, kas žiūri į puslapį. Tas vienas faktas paaiškina pusę to, ką darysime vėliau.

Serviruok aplanką, neatidarinėk failo

Kad puslapį pamatytum taip, kaip jį matys tikras lankytojas, jį reikia serviruoti — paleisti mažą žiniatinklio serverį savo aplanke:

npx serve
# arba
python3 -m http.server
# arba „Live Server" plėtinys VS Code redaktoriuje

Dukart spustelėti failą (adresas file:///…) šiandien veikia — bet nustos veikti vos suskaidžius kodą į modulius, o nuo to prasideda kliento dalies takelis: naršyklė saugumo sumetimais atsisako jų įkelti tiesiai iš disko. Serviruok aplanką nuo pat pradžių ir su ta siena niekada nesusidursi.

Kai paleisi, adreso juostoje pamatysi localhost:3000 (arba :8000). Tai tikras žiniatinklio serveris tavo paties kompiuteryje — niekas kitas jo nepasieks, o elgiasi jis taip, kaip elgsis tikrasis.

Kodėl naršyklė apskritai atsisako perskaityti failą iš tavo paties disko? — Todėl, kad atsisiųstas puslapis kitaip galėtų perskaityti kiekvieną kitą failą tame aplanke. Taisyklė, kuri tam užkerta kelią, yra ta pati, kuri vėliau sukelia CORS klaidas — ta pati mintis, kitas simptomas.

Naršyklės įrankiai

Paspausk F12 — atsidarys naršyklės kūrėjo įrankiai. Trys svarbiausi skirtukai:

Elements — puslapis taip, kaip jį supranta naršyklė.
Console — čia atsiras tavo klaidos (vėliau, kai bus JavaScript).
Network — kiekviena užklausa su savo būsenos kodu.

Laikyk šį langą atidarytą visą laiką. Kai kažkas neveikia, pirmiausia žiūrėk čia, o tik tada į savo kodą.

Vienas dalykas, kuris iš pradžių klaidina: Elements skydelis nėra tavo failas. Jis rodo gyvą puslapį, įskaitant viską, ką pakeitė JavaScript. Redaguok jį ten — ir tavo failas lieka nepaliestas: perkrauk puslapį, ir pakeitimas dingsta. Puiku eksperimentams, painu, jei to nežinai.