Zadania na lekcje

Zadanie 3.2: Zaawansowane Operacje na Tekście

Javascript
Priorytet: Normalny Szkic

Zadanie 3.2: Mistrz Słów (Manipulacja Stringami)

Wstęp

W świecie programowania dane rzadko przychodzą do nas idealnie czyste. Użytkownicy wpisują spacje tam, gdzie nie powinni, robią literówki, albo musimy dynamicznie podmieniać fragmenty tekstu (np. w szablonach wiadomości). W tym zadaniu wejdziesz na wyższy poziom pracy z tekstem – nauczysz się go czyścić, przeszukiwać i modyfikować. To umiejętności niezbędne dla każdego programisty Frontend i Backend!

[!IMPORTANT] Osobisty Kod: Tak jak w poprzednich zadaniach – używaj własnych przykładów. Nie kopiuj "Jana Kowalskiego". Jeśli zmieniamy "psa" na "kota", Ty zmień "rower" na "hulajnogę". Bądź kreatywny!

Teoria i Narzędzia

Oto Twój scyzoryk szwajcarski do walki z tekstem w JavaScript:

1. Czyszczenie Spacji (.trim())

Często użytkownik przez pomyłkę wstawi spację na początku lub końcu loginu. Metoda .trim() usuwa białe znaki z obu stron.

let brudnyTekst = "  Hasło123  ";
let czystyTekst = brudnyTekst.trim();
console.log(czystyTekst); // "Hasło123" (bez spacji)

1.1 długość stringa

Aby sprawdzić długość stringa używamy właściwości length.

let tekst = "Programowanie";
console.log(tekst.length); // 11

2. Podmiana Treści (.replace())

Chcesz zamienić słowo w zdaniu? Użyj .replace(). Pamiętaj, że domyślnie zamienia tylko pierwsze wystąpienie (chyba że użyjesz .replaceAll()).

let zdanie = "Lubię poniedziałki.";
let noweZdanie = zdanie.replace("poniedziałki", "soboty");
console.log(noweZdanie); // "Lubię soboty."

3. Czy coś tam jest? (.includes())

Metoda .includes() sprawdza, czy dany fragment znajduje się w tekście. Zwraca true (prawda) lub false (fałsz).

let email = "[email protected]";
console.log(email.includes("@")); // true
console.log(email.includes("wp.pl")); // false

4. Wycinanie (.slice())

Możesz wyciąć kawałek tekstu podając indeksy (od którego znaku do którego).

let tekst = "Programowanie";
// Pamiętaj: liczymy od zera!
console.log(tekst.slice(0, 7)); // "Program"

5. Debugowanie

Pamiętaj o console.log(). Jeśli coś nie działa, sprawdź wartość zmiennej przed i po operacji!

Zadanie do wykonania

Stwórz plik teksty.js i wykonaj poniższe operacje. Każdy wynik wyświetlaj w konsoli z opisem, np. "Po wyczyszczeniu: ...".

Krok 1: Porządki w Danych (Trim)

Wyobraź sobie, że pobierasz dane z formularza.

  1. Stwórz zmienną z Twoim imieniem, ale dodaj po 3 niepotrzebne spacje na początku i na końcu (np. " Anna ").
  2. Sprawdź i wyświetl w konsoli długość tego "brudnego" tekstu (.length).
  3. Stwórz nową zmienną, do której przypiszesz wyczyszczoną wersję imienia używając metody .trim().
  4. Wyświetl wyczyszczone imię i jego nową długość. Porównaj różnicę.

Krok 2: Cenzura i Zmiany (Replace)

  1. Stwórz zmienną opinia z zawartością np. "JavaScript jest trudny". (Wpisz własne zdanie!).
  2. Użyj metody .replace(), aby zmienić słowo o negatywnym/neutralnym wydźwięku na coś pozytywnego (np. zmień "trudny" na "świetny" lub "wymagający").
  3. Wyświetl "Przed:" i "Po:".

Krok 3: Detektyw (Includes)

  1. Stwórz zmienną ze swoim adresem e-mail (lub wymyślonym).
  2. Sprawdź, czy adres zawiera znak @. Wynik tego sprawdzenia (true/false) przypisz do zmiennej czyPoprawny.
  3. Sprawdź, czy adres zawiera słowo "niebezpieczny". Wynik przypisz do zmiennej czySpam.
  4. Wyświetl oba wyniki w konsoli.

Krok 4: Operacje łączone (Chain)

W JavaScript metody można łączyć!

  1. Stwórz zmienną zdanie z wartością: " Bardzo lubię pisać kod. ".
  2. W jednej linijce kodu:
    • oczyść tekst ze spacji (trim),
    • zmień "pisać kod" na "rozwiązywać problemy".
  3. Wyświetl wynik końcowy. Podpowiedź: zmienna.metoda1().metoda2()

Krok 5: Inicjały (Bonus)

  1. Spróbuj pobrać pierwszą literę ze swojego imienia (używając [0] lub .charAt(0)).
  2. Wyświetl ją w konsoli.

Warunki zaliczenia

  1. Kod jest czysty i czytelny.
  2. Wykorzystano metody .trim(), .replace(), .includes().
  3. Zadanie wykonano na własnych, unikalnych danych.
  4. Brak błędów w konsoli (czerwonych komunikatów).
  5. Historia zmian zapisana w Git (commity).

Git - Instrukcja

Pamiętaj o nawyku zapisywania pracy (commitowania) po każdym większym kroku.

# Na początku (jeśli nie zrobiono w folderze głównym):
git init

# Po Kroku 1:
git add .
git commit -m "Zadanie 3.2: Krok 1 - czyszczenie spacji trim"

# Po Kroku 2:
git add .
git commit -m "Zadanie 3.2: Krok 2 - zamiana tekstu replace"

# Po wykonaniu całości:
git add .
git commit -m "Zadanie 3.2: Finalizacja zadania - metody string"