Podstawy JavaScript: Od zera do bohatera

JavaScript to jeden z najpopularniejszych języków programowania na świecie, a jego znajomość jest niezbędna dla każdego, kto chce zostać front-end developerem. W tym artykule omówimy podstawowe koncepcje, które pomogą Ci rozpocząć przygodę z JavaScript.

Czym jest JavaScript?

JavaScript to interpretowany, obiektowy język programowania, który został stworzony w 1995 roku przez Brendana Eicha. Początkowo jego przeznaczeniem było dodawanie interaktywności do stron internetowych. Dziś JavaScript ma znacznie szersze zastosowanie:

• Tworzenie dynamicznych stron internetowych
• Aplikacje internetowe (SPA - Single Page Applications)
• Rozwój aplikacji mobilnych (np. z wykorzystaniem React Native)
• Aplikacje serwerowe (Node.js)
• Aplikacje desktopowe (Electron)

JavaScript jest językiem działającym po stronie klienta, co oznacza, że kod jest wykonywany bezpośrednio w przeglądarce użytkownika. Dzięki temu możliwe jest tworzenie interaktywnych elementów bez konieczności przeładowywania całej strony.

Zmienne i typy danych

Jednym z podstawowych elementów każdego języka programowania są zmienne. W JavaScript do deklaracji zmiennych używamy słów kluczowych var, let lub const.

Deklaracja zmiennych

// Używając var (starszy sposób)
var name = "Jan";

// Używając let (zalecane dla zmiennych, które mogą zmienić wartość)
let age = 25;

// Używając const (dla stałych wartości)
const PI = 3.14159;

W nowoczesnym JavaScript zaleca się używanie let i const zamiast var ze względu na zasięg blokowy tych pierwszych.

Podstawowe typy danych

JavaScript posiada następujące podstawowe typy danych:

• String - łańcuch znaków, np. "Hello World"
• Number - liczby, np. 42 lub 3.14
• Boolean - wartości logiczne true lub false
• Undefined - niezdefiniowana wartość
• Null - brak wartości
• Symbol - unikalne i niezmienne wartości
• BigInt - duże liczby całkowite

Oprócz tych podstawowych typów, JavaScript ma również typy złożone:

• Object - obiekty
• Array - tablice (są specjalnym rodzajem obiektów)
• Function - funkcje (również są obiektami)

Operatory

JavaScript oferuje różne rodzaje operatorów do wykonywania operacji na zmiennych:

Operatory arytmetyczne

let a = 10;
let b = 5;

let sum = a + b;      // Dodawanie: 15
let difference = a - b; // Odejmowanie: 5
let product = a * b;    // Mnożenie: 50
let quotient = a / b;   // Dzielenie: 2
let remainder = a % b;  // Reszta z dzielenia: 0
let power = a ** b;     // Potęgowanie: 100000

Operatory porównania

console.log(5 > 3);   // true
console.log(5 < 3);   // false
console.log(5 >= 5);  // true
console.log(5 <= 4);  // false
console.log(5 == 5);  // true
console.log(5 == "5"); // true (porównanie wartości)
console.log(5 === "5"); // false (porównanie wartości i typu)
console.log(5 != 3);  // true
console.log(5 !== "5"); // true (porównanie wartości i typu)

Operatory logiczne

console.log(true && true);   // AND: true
console.log(true && false);  // AND: false
console.log(true || false);  // OR: true
console.log(false || false); // OR: false
console.log(!true);          // NOT: false

Instrukcje warunkowe

Instrukcje warunkowe pozwalają na wykonanie różnych bloków kodu w zależności od spełnienia określonych warunków.

if, else if, else

let age = 18;

if (age < 18) {
    console.log("Jesteś niepełnoletni.");
} else if (age === 18) {
    console.log("Właśnie osiągnąłeś pełnoletność!");
} else {
    console.log("Jesteś pełnoletni.");
}

switch

let day = "poniedziałek";

switch (day) {
    case "poniedziałek":
        console.log("Początek tygodnia");
        break;
    case "środa":
        console.log("Środek tygodnia");
        break;
    case "piątek":
        console.log("Koniec tygodnia");
        break;
    default:
        console.log("Inny dzień tygodnia");
}

Operator warunkowy (trójargumentowy)

let age = 20;
let status = (age >= 18) ? "dorosły" : "niepełnoletni";
console.log(status); // "dorosły"

Pętle

Pętle pozwalają na wielokrotne wykonanie tego samego bloku kodu.

for

for (let i = 0; i < 5; i++) {
    console.log("Iteracja: " + i);
}

while

let i = 0;
while (i < 5) {
    console.log("Iteracja: " + i);
    i++;
}

do...while

let i = 0;
do {
    console.log("Iteracja: " + i);
    i++;
} while (i < 5);

for...of (dla tablic)

const fruits = ["jabłko", "gruszka", "banan"];
for (const fruit of fruits) {
    console.log(fruit);
}

for...in (dla obiektów)

const person = {
    name: "Jan",
    age: 30,
    city: "Warszawa"
};

for (const key in person) {
    console.log(key + ": " + person[key]);
}

Funkcje

Funkcje są blokami kodu, które mogą być wywoływane wielokrotnie. Pozwalają na organizację kodu i unikanie powtórzeń.

Deklaracja funkcji

function greet(name) {
    return "Cześć, " + name + "!";
}

console.log(greet("Anna")); // "Cześć, Anna!"

Wyrażenie funkcyjne

const greet = function(name) {
    return "Cześć, " + name + "!";
};

console.log(greet("Anna")); // "Cześć, Anna!"

Funkcja strzałkowa (arrow function)

const greet = (name) => {
    return "Cześć, " + name + "!";
};

// Skrócona wersja dla prostych funkcji
const greetShort = name => "Cześć, " + name + "!";

console.log(greetShort("Anna")); // "Cześć, Anna!"

Tablice (Arrays)

Tablice to uporządkowane kolekcje elementów, które mogą przechowywać dane różnych typów.

Tworzenie tablic

// Pusta tablica
const emptyArray = [];

// Tablica z elementami
const fruits = ["jabłko", "gruszka", "banan"];

// Tablica z różnymi typami danych
const mixed = [1, "dwa", true, null, {name: "John"}];

Dostęp do elementów tablicy

const fruits = ["jabłko", "gruszka", "banan"];

console.log(fruits[0]); // "jabłko" (indeksowanie zaczyna się od 0)
console.log(fruits[1]); // "gruszka"
console.log(fruits[2]); // "banan"

Popularne metody tablicowe

const fruits = ["jabłko", "gruszka"];

// Dodawanie elementów
fruits.push("banan");        // Dodaje na koniec: ["jabłko", "gruszka", "banan"]
fruits.unshift("pomarańcza"); // Dodaje na początek: ["pomarańcza", "jabłko", "gruszka", "banan"]

// Usuwanie elementów
const lastFruit = fruits.pop();     // Usuwa ostatni element: lastFruit = "banan"
const firstFruit = fruits.shift();  // Usuwa pierwszy element: firstFruit = "pomarańcza"

// Łączenie tablic
const moreFruits = ["malina", "truskawka"];
const allFruits = fruits.concat(moreFruits); // ["jabłko", "gruszka", "malina", "truskawka"]

// Wyszukiwanie
const index = fruits.indexOf("gruszka"); // 1

// Filtrowanie i mapowanie
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]

Obiekty (Objects)

Obiekty w JavaScript to kolekcje par klucz-wartość, które reprezentują encje ze świata rzeczywistego.

Tworzenie obiektów

// Pusty obiekt
const emptyObject = {};

// Obiekt z właściwościami
const person = {
    firstName: "Jan",
    lastName: "Kowalski",
    age: 30,
    city: "Warszawa",
    isStudent: false
};

Dostęp do właściwości obiektu

const person = {
    firstName: "Jan",
    lastName: "Kowalski",
    age: 30
};

// Notacja kropkowa
console.log(person.firstName); // "Jan"

// Notacja nawiasowa (użyteczna, gdy nazwa właściwości jest przechowywana w zmiennej)
const propertyName = "lastName";
console.log(person[propertyName]); // "Kowalski"

Metody obiektów

const person = {
    firstName: "Jan",
    lastName: "Kowalski",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    },
    // Skrócona składnia metody
    sayHello() {
        return "Cześć, jestem " + this.fullName();
    }
};

console.log(person.fullName());  // "Jan Kowalski"
console.log(person.sayHello());  // "Cześć, jestem Jan Kowalski"

Obsługa zdarzeń (Events)

JavaScript pozwala na interakcję z użytkownikiem poprzez obsługę zdarzeń, takich jak kliknięcia, naciśnięcia klawiszy, czy przesunięcia myszy.

Dodawanie nasłuchiwacza zdarzeń (event listener)

// Załóżmy, że mamy przycisk o id "myButton"
const button = document.getElementById("myButton");

button.addEventListener("click", function() {
    alert("Przycisk został kliknięty!");
});

Usuwanie nasłuchiwacza zdarzeń

const handleClick = function() {
    alert("Przycisk został kliknięty!");
};

button.addEventListener("click", handleClick);

// Później możemy usunąć nasłuchiwacza
button.removeEventListener("click", handleClick);

Co dalej?

Teraz, gdy znasz już podstawy JavaScript, możesz zacząć budować proste interaktywne strony internetowe. Oto kilka sugestii, co możesz zrobić dalej:

• Stwórz prostą aplikację do zarządzania zadaniami (todo list)
• Zbuduj kalkulator z interfejsem użytkownika
• Stwórz prostą grę (np. zgadywanie liczby)
• Naucz się pracować z API i pobierać dane z zewnętrznych źródeł
• Poznaj frameworki i biblioteki JavaScript, takie jak React, Vue.js czy Angular

JavaScript jest potężnym językiem z ogromnym ekosystemem narzędzi i bibliotek. Im więcej będziesz praktykować, tym bardziej komfortowo będziesz się czuć pisząc kod. Powodzenia w Twojej przygodzie z programowaniem!