index.html — puslapio karkasas

Pradedame nuo index.html — puslapio karkaso. Kodo stulpelyje yra visas failas; jis mažas, bet kiekviena eilutė svarbi.

Kelios dalys:

<!DOCTYPE html> — pasako naršyklei naudoti šiuolaikinį („standards") režimą. Be jo naršyklė persijungia į seną suderinamumo režimą.
data-theme="dark" ant <html> — mūsų tema. CSS į ją reaguoja; temos perjungimą pridėsime vėliau.
<meta name="viewport"> — kad puslapis gerai atrodytų telefone (responsyvumui).
<link rel="stylesheet" href="style.css"> — įkelia stilius. style.css yra pateiktas kartu su projektu (~800 eilučių) — šiame kurse mokomės HTML ir JavaScript, o CSS ateina kaip paruošta medžiaga. Tiesiog pasidėk jį šalia index.html.
<main id="app"> — konteineris, į kurį JavaScript rašys turinį. Kol kas jame — „Loading Cosmos…".
<script type="module" src="js/main.js"> — įkelia mūsų JavaScript. type="module" yra esminis: jis paverčia failą ES moduliu, tad main.js galės import kitus failus. Be type="module" import neveiktų.

Struktūra visada ta pati: index.html yra vienintelis puslapis (tai bus vieno puslapio programa — SPA), o visą turinį valdys JavaScript.

Patarimas. Kodėl <script> yra <body> gale (ne <head>)? Kad naršyklė pirma sukurtų <main id="app">, o tik tada paleistų main.js, kuris jo ieško. Su type="module" tai automatiška (moduliai vykdomi po HTML išanalizavimo), bet įprotis dėti scriptą gale — geras.

index.html SUKURTI

Sukurk šį failą kataloge ./

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cosmos — Astronomy Picture of the Day</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- The whole app will render inside here. For now, a placeholder. -->
  <main id="app">Loading Cosmos…</main>

  <!-- type="module" is the important part: it makes this an ES module, so
       main.js can `import` other files. It also means the browser FETCHES
       the script — which is why the page must be served over http, not
       opened as a file:// path (see the gotcha in this lesson). -->
  <script type="module" src="js/main.js"></script>
</body>
</html>