JavaScript Basics - Podstawy programowania

Poznaj podstawy JavaScript - najbardziej popularnego języka programowania na świecie. Od zmiennych i funkcji, przez DOM, aż po localStorage.

Czym jest JavaScript?

🌟 Najpopularniejszy język na świecie!

JavaScript powstał w 1995 roku, stworzony w zaledwie 10 dni przez Brendana Eicha. Dziś to najważniejszy język programowania w ekosystemie webowym.

Gdzie działa JavaScript?

Frontend - działa w każdej przeglądarce
Backend - Node.js na serwerze
Mobile - React Native, Ionic
Desktop - Electron (VS Code, Slack)

⚠️ JavaScript ≠ Java

JavaScript NIE MA NIC wspólnego z Java!

JavaScript	Java
Język interpretowany	Język kompilowany
Dynamicznie typowany	Statycznie typowany
Głównie frontend	Głównie backend
Lekki, elastyczny	Silnie typowany, verbose

To jak "Car" i "Carpet" - podobne nazwy, zupełnie różne rzeczy!

Podstawy składni JavaScript

1. Zmienne - let i const

W JavaScript używamy let dla zmiennych, które mogą się zmieniać, oraz const dla stałych.

// let - zmienna, którą można nadpisać
let name = 'Jan';
name = 'Maria'; // OK

// const - stała, której NIE można nadpisać
const age = 25;
age = 26; // ❌ BŁĄD!

// ZAWSZE używaj const, chyba że musisz zmienić wartość
const PI = 3.14159;
let counter = 0;
counter++; // OK, bo let

2. Funkcje

Funkcje to bloki kodu, które można wielokrotnie wywoływać.

// Deklaracja funkcji
function greet(name) {
    return `Witaj, ${name}!`;
}

// Wywołanie
console.log(greet('Maria')); // "Witaj, Maria!"

// Arrow function (nowoczesny sposób)
const greet2 = (name) => `Witaj, ${name}!`;

// Template strings (backticks)
const userName = 'Jan';
const message = `Witaj, ${userName}! Masz ${age} lat.`;

3. Tablice i metody

Tablice przechowują kolekcje danych. JavaScript ma potężne metody do pracy z tablicami.

const numbers = [1, 2, 3, 4, 5];

// map() - transformuje każdy element
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter() - wybiera elementy spełniające warunek
const evenNumbers = numbers.filter(n => n % 2 === 0);
console.log(evenNumbers); // [2, 4]

// forEach() - wykonuje akcję dla każdego elementu
numbers.forEach(n => {
    console.log(`Liczba: ${n}`);
});

// find() - znajduje pierwszy element spełniający warunek
const firstEven = numbers.find(n => n % 2 === 0);
console.log(firstEven); // 2

4. Warunki i pętle

// IF - ELSE
const age = 18;
if (age >= 18) {
    console.log('Pełnoletni');
} else {
    console.log('Niepełnoletni');
}

// FOR - pętla
for (let i = 0; i < 5; i++) {
    console.log(`Iteracja ${i}`);
}

// WHILE - pętla
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}

DOM - Document Object Model

🌐 Co to jest DOM?

DOM to reprezentacja strony HTML w postaci drzewa obiektów. JavaScript może manipulować DOM, zmieniając zawartość, styl i strukturę strony.

1. Wybieranie elementów

// Po ID
const title = document.getElementById('title');

// Po klasie (zwraca NodeList)
const buttons = document.getElementsByClassName('btn');

// Po selektorze CSS (NAJCZĘŚCIEJ UŻYWANE)
const firstButton = document.querySelector('.btn');
const allButtons = document.querySelectorAll('.btn');

2. Manipulacja zawartością

// Zmiana tekstu
title.textContent = 'Nowy tytuł';

// Zmiana HTML
title.innerHTML = '<strong>Pogrubiony tytuł</strong>';

// Zmiana atrybutu
title.setAttribute('class', 'active');

// Dodanie/usunięcie klasy
title.classList.add('highlighted');
title.classList.remove('active');
title.classList.toggle('visible');

3. Tworzenie i dodawanie elementów

// Tworzenie nowego elementu
const newParagraph = document.createElement('p');
newParagraph.textContent = 'To jest nowy akapit';

// Dodanie do strony
document.body.appendChild(newParagraph);

// Usunięcie elementu
newParagraph.remove();

Zdarzenia (Events)

JavaScript to język event-driven - reaguje na zdarzenia użytkownika.

1. addEventListener - podstawa

const button = document.getElementById('myButton');

// Nasłuchiwanie na kliknięcie
button.addEventListener('click', () => {
    console.log('Przycisk kliknięty!');
});

// Funkcja jako handler
function handleClick() {
    alert('Kliknięto!');
}
button.addEventListener('click', handleClick);

2. Popularne zdarzenia

// Click - kliknięcie
element.addEventListener('click', () => { });

// Input - zmiana wartości inputu
input.addEventListener('input', (e) => {
    console.log(e.target.value);
});

// Submit - wysłanie formularza
form.addEventListener('submit', (e) => {
    e.preventDefault(); // Zatrzymaj domyślne zachowanie
    // ... Twoja logika
});

// Keypress - naciśnięcie klawisza
document.addEventListener('keypress', (e) => {
    console.log(`Naciśnięto: ${e.key}`);
});

// DOMContentLoaded - strona załadowana
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM gotowy!');
});

3. Event object

button.addEventListener('click', (event) => {
    console.log(event.target);     // Element, który wywołał zdarzenie
    console.log(event.type);       // Typ zdarzenia ('click')
    event.preventDefault();        // Zatrzymaj domyślne zachowanie
    event.stopPropagation();       // Zatrzymaj propagację
});

localStorage - trwałe przechowywanie danych

localStorage pozwala zapisywać dane w przeglądarce, które pozostają nawet po odświeżeniu strony.

⚠️ Ważne!

localStorage przechowuje tylko stringi. Aby zapisać obiekty lub tablice, musisz użyć JSON.stringify() i JSON.parse().

1. Podstawowe operacje

// Zapis
localStorage.setItem('userName', 'Jan');

// Odczyt
const name = localStorage.getItem('userName');
console.log(name); // 'Jan'

// Usunięcie
localStorage.removeItem('userName');

// Wyczyszczenie wszystkiego
localStorage.clear();

2. Zapisywanie obiektów i tablic

// Obiekt do zapisania
const user = {
    name: 'Jan',
    age: 25,
    email: 'jan@example.com'
};

// ❌ ŹLE - zapisze [object Object]
localStorage.setItem('user', user);

// ✅ DOBRZE - konwersja na JSON string
localStorage.setItem('user', JSON.stringify(user));

// Odczyt i parsowanie
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // 'Jan'

3. Przykład: Zapisywanie listy zadań

let tasks = [];

// Funkcja zapisu
function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Funkcja wczytania
function loadTasks() {
    const tasksJSON = localStorage.getItem('tasks');
    return tasksJSON ? JSON.parse(tasksJSON) : [];
}

// Użycie przy starcie aplikacji
document.addEventListener('DOMContentLoaded', () => {
    tasks = loadTasks();
    renderTasks();
});

Praktyczny przykład - Kompletna mini-aplikacja

Prosty licznik z zapisem do localStorage:

<!-- HTML -->
<h1 id="counter">0</h1>
<button id="increment">+1</button>
<button id="decrement">-1</button>
<button id="reset">Reset</button>

<!-- JavaScript -->
<script>
let count = 0;
const counterEl = document.getElementById('counter');

// Wczytaj stan z localStorage
function loadCount() {
    const saved = localStorage.getItem('count');
    return saved ? parseInt(saved) : 0;
}

// Zapisz stan
function saveCount() {
    localStorage.setItem('count', count);
}

// Aktualizuj wyświetlanie
function updateDisplay() {
    counterEl.textContent = count;
    saveCount();
}

// Przyciski
document.getElementById('increment').addEventListener('click', () => {
    count++;
    updateDisplay();
});

document.getElementById('decrement').addEventListener('click', () => {
    count--;
    updateDisplay();
});

document.getElementById('reset').addEventListener('click', () => {
    count = 0;
    updateDisplay();
});

// Inicjalizacja
document.addEventListener('DOMContentLoaded', () => {
    count = loadCount();
    updateDisplay();
});
</script>

Następne kroki

🎯 Teraz czas na praktykę!

Poznałeś podstawy JavaScript. Teraz przejdź do projektu Task Manager, gdzie wykorzystasz wszystkie te koncepcje w praktyce.

Przejdź do projektu Task Manager

code JavaScript Basics - Podstawy programowania

history Czym jest JavaScript?