Podsumowanie Modułu 2. Podstawy podstaw za nami! Kompletny kod aplikacji w wersji 1.0 z funkcjami zapisany w pliku


No teraz nasza aplikacja jest już naprawdę zaawansowana! Przekształciliśmy nasze wcześniejsze czysto JavaScriptowe polecenia we własne reużywalne funkcje o bardziej "ludzkich" nazwach. Teraz będzie nam znacznie przyjmniej i łatwiej zarządzać naszymi zadaniami!

A przy okazji zobacz, ile już wiesz o JavaScript:

  • czym jest konsola
    • jak pisać i wywoływać kod w konsoli,
      • jak zapisać plik z kodem JavaScript w przeglądarce w snippets,
      • jak zrobić działającą aplikację w swojej przeglądarce!
  • czym jest zmienna
    • jak możemy ją zadeklarować,
      • jak przypisujemy do niej wartość,
      • jak możemy tę wartość zmienić,
      • jak nadać zmiennym dobre nazwy,
  • czym jest tablica
    • jak dodać element do tablicy,
      • jak usunąć element z tablicy,
      • jak sprawdzić długość tablicy,
      • jak uzyskać dostęp do określonego elementu w tablicy za pomocą indeksu,
      • jak nadpisać wartość tego elementu,
  • czym jest funkcja
    • jak ją deklarujemy i wywołujemy,
      • jak możemy przekazać funkcji pewne dane,
      • jak tworzyć reużywalne funkcje i wywoływać je w innych funkcjach,
      • jak nadać funkcjom dobre nazwy.

Gratuluję!

Spróbuj teraz odpowiedzieć swoimi słowami na wszystkie powyższe pytania, by sprawdzić, co umiesz, a co jeszcze tak nie do końca.

Poniżej znajduje się cały dotychczasowy kod naszej aplikacji, który powinien znaleźć się w pliku todo-app-console-snippet zapisanym w zakładce snippets (który możemy też skopiować i wkleić do konsoli, jeśli nie zapisywaliśmy kodu w pliku - pamiętaj tylko, by odświeżyć stronę, żeby usunąć z konsoli dotychczasowy kod).

W poniższym kodzie znajdują się zarówno funkcje, które stworzyliśmy w tym module, ale także wybrane "czyste" polecenia z poprzedniego modułu oraz nowe funkcje, które z takich poleceń korzystają, ale nie ujęliśmy tego w osobną funkcję w tym module:

// czyścimy konsolę z całego dotychczasowego kodu i komunikatów:
console.clear();

// inicjujemy pustą listę zadań:
let tasks = [];

function showTasks() {
    console.log("Twoje zapisane zadania:", tasks);
}

function addTask(newTask) {
    tasks.push(newTask);

    console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

    showTasks();
}

// możemy też dodawać zadania do określonego indeksu,
// korzystając z polecenia/ metody splice(),
// co zrobiliśmy w poprzednim module:

function addTaskAtIndex(index, newTask) {
    tasks.splice(index, 0, newTask);

    console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

    showTasks();
}

function deleteTask(index) {
    tasks.splice(index, 1);

    showTasks();
}

function deleteAllTasks() {
    tasks = [];

    console.log("Wszystkie zadania zostały usunięte...");

    showTasks();
}

Możesz teraz:

  • dodawać zadania na koniec listy za pomocą funkcji addTask("jakieś zadanie"),
  • wstawiać zadania w określonym miejscu (indeksie) za pomocą addTaskAtIndex(index, newTask),
  • usuwać zadania, sprawdzając uprzednio ich indeks, np. deleteTask(3),
  • wyświetlić swoje zadania w konsoli, wywołując showTasks(),
  • wyczyścić/ zresetować listę za pomocą deleteAllTasks().