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().