kodujemywbiurze.pl
1️⃣ js 2️⃣ storage 3️⃣ html 4️⃣ html + js

Kompletny kod aplikacji w jednym folderze zawierającym plik HTML oraz plik JavaScript podpięty w tagu <script>

Teraz jest już znacznie lepiej - cały kod naszej aplikacji jest w jednym pliku, więc możemy go odpalić w przeglądarce i wszystko działa od razu. Najpierw przeglądarka renderuje HTML, a potem przetwarza kod JavaScript zawarty w tagu <script>. Kod nadal ma dostęp do localStorage, dzięki czemu będzie przechowywał nasze zadania przypisane do tego konkretnego pliku.

Niemniej jednak, nasz plik HTML jest dość długi, a w związku z tym nieczytelny. Dlatego w prawdziwym programistycznym świecie, kod JavaScript jest zapisywany w osobnym pliku (lub plikach), który później podpinamy do pliku HTML również za pośrednictwem tagu <script>. Żeby to zadziałało, musimy zrobić kilka rzeczy:

  1. Utwórz folder (np. na pulpicie) o nazwie todo-app.
  2. Otwórz aplikację Notatnik, wklej tam kod naszej aplikacji JavaScript z poprzedniej rozdziału (lub z pliku z zakładki snippets), po czym zapisz ten plik pod nazwą script.js w folderze todo-app, pamiętając o rozszerzeniu .js po nazwie pliku i o tym, by wybrać typ "wszystkie pliki".
  3. Otwórz aplikację Notatnik, wklej tam kod HTML (bez JavaScriptu). Musisz teraz "podpiąć" plik script.js do index.html w ten sposób, że przed tagiem zamykającym </body> umieszczamy następujący kod <script src="script.js">, gdzie atrybut src (skrót od source - źródło) otrzymuje nazwę pliku JavaScript, co automatycznie "zaciąga" cały JavaScriptowy kod. Po tej zmianie plik HTML wygląda tak:
<!DOCTYPE html>
<html>
  <head>
    <title>Todo App | kodujemywbiurze.pl</title>
  </head>

  <body>
    <h1>Twoje zadania</h1>

    <hr>

    <button onclick="addTask()">dodaj zadanie</button>

    <ul id="tasks-list">

    </ul>

    <button onclick="deleteAllTasks()">wyczyść listę</button>

    <!-- tutaj podpinamy plik script.js -->
    <script src="script.js"></script>
  </body>
</html>
  1. Zapisz plik pod nazwą index.html (nazwa index jest powszechną praktyką w przypadku nazewnictwa głównego pliku HTML aplikacji; ponadto przeglądarka szuka najpierw pliku o takiej nazwie i ma on pierwszeństwo podczas uruchomienia), pamiętając o rozszerzeniu .html oraz o tym, żeby wybrać typ pliku "wszystkie pliki".

Teraz nasz kod jest podzielony na dwa pliki, HTML i JavaScript, znajdują się w jednym folderze oraz plik .js jest podpięty do pliku HTML za pośrednictwem tagu <script>. Teraz wystarczy, że wejdziemy do folderu todo-app, otworzymy plik index.html w przeglądarce i aplikacja działa natychmiastowo!

Jest to najbardziej profesjonalny sposób, w jaki możemy zorganizować kod naszej aplikacji w danej chwili, czyli... po ukończeniu wszystkich 4 kursów dostępnych w chwili obecnej na kodujemywbiurze.pl!

Poświęć jeszcze chwilę na przeczytanie Zakończenia - następnego artykułu, w którym piszę, jaka przyszłość czeka kodujemywbiurze.pl i dlaczego w dużej mierze zależy od Ciebie 😏😉!