Obiekty

Witaj z powrotem.

W poprzedniej lekcji poznałeś tablice.

Tablice pomagają przechowywać listy wartości.

Bardzo przydatne.

Bardzo potężne.

Bardzo zaprzyjaźnione z nawiasami kwadratowymi.

Ale czasem zwykła lista nie wystarcza.

Na przykład to jest w porządku:

const user = "Viktor";

Ale co, jeśli potrzebujemy więcej informacji?

Imię.

Wiek.

Email.

Rola.

Kraj.

Ulubiony język programowania.

Poziom zależności od kawy.

Jedna wartość tekstowa to za mało.

I tutaj wchodzą obiekty.

Obiekty pomagają przechowywać dane w uporządkowany sposób.

Zamiast trzymać powiązane informacje w wielu osobnych zmiennych, możemy trzymać je w jednym obiekcie.

Czyściej.

Mądrzej.

Mniej chaosu.

JavaScript powoli staje się zorganizowany.

Podejrzanie zorganizowany.

Czego Się Nauczysz

W tej lekcji nauczysz się:

czym są obiekty;
jak stworzyć obiekt;
jak działają właściwości i wartości;
jak odczytywać właściwości obiektu;
jak zmieniać wartości w obiekcie;
jak dodawać nowe właściwości;
jak usuwać właściwości;
jak obiekty działają z funkcjami;
czym są metody;
jak używać obiektów z DOM;
jak zbudować małą kartę profilu.

Na końcu tej lekcji będziesz rozumieć, jak JavaScript opisuje rzeczy ze świata rzeczywistego.

Użytkowników.

Produkty.

Kursy.

Zadania.

Samochody.

Koty.

Nawet zdezorientowanych developerów.

Obiekty są wszędzie w JavaScript.

Wszędzie.

Jak średniki w starych tutorialach.

Czym Jest Obiekt?

Obiekt to zbiór powiązanych danych.

Przykład:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

Ten obiekt ma trzy właściwości:

name
age
role

Każda właściwość ma wartość:

Viktor
33
Developer

Struktura wygląda tak:

property: value

Obiekty używają nawiasów klamrowych:

{}

Bardzo ważne.

Tablice używają nawiasów kwadratowych:

[]

Obiekty używają nawiasów klamrowych:

{}

Inne nawiasy.

Inna robota.

JavaScript kocha nawiasy.

Może nawet za bardzo.

Utwórz Projekt

Utwórz folder dla tej lekcji:

mkdir javascript-lesson6
cd javascript-lesson6
touch index.html
touch script.js

Twój projekt powinien wyglądać tak:

javascript-lesson6/
  index.html
  script.js

Otwórz folder w edytorze.

Zaczniemy od konsoli.

Potem użyjemy obiektów do aktualizacji strony internetowej.

Dzisiaj bez smoka frameworków.

Tylko JavaScript.

Nadal dziwny.

Ale użyteczny.

Napisz HTML

Otwórz index.html i dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Obiekty</title>
</head>
<body>
  <h1>Obiekty</h1>
  <p>Otwórz konsolę przeglądarki, aby zobaczyć wynik JavaScript.</p>

  <script src="script.js"></script>
</body>
</html>

Otwórz plik w przeglądarce.

Otwórz konsolę:

kliknij prawym przyciskiem myszy na stronie;
wybierz Zbadaj;
otwórz zakładkę Console.

Teraz JavaScript jest gotowy.

Konsola patrzy.

Znowu.

Prawdopodobnie wie już za dużo.

Twój Pierwszy Obiekt

Otwórz script.js i dodaj:

const course = {
  title: "JavaScript",
  level: "Beginner",
  lessons: 12
};

console.log(course);

Odśwież przeglądarkę.

Powinieneś zobaczyć obiekt w konsoli.

Ten obiekt reprezentuje kurs.

Ma:

title: "JavaScript"

level: "Beginner"

lessons: 12

Jedna zmienna.

Wiele powiązanych wartości.

To jest moc obiektów.

Zamiast trzech osobnych zmiennych:

const title = "JavaScript";
const level = "Beginner";
const lessons = 12;

trzymamy wszystko razem:

const course = {
  title: "JavaScript",
  level: "Beginner",
  lessons: 12
};

Czyściej.

Bardziej uporządkowanie.

Mniej spaghetti.

Więcej lasagne.

Warstwy.

Porządek.

Profesjonalizm.

Bardzo przyjazne dla kodu.

I dla żołądka.

Właściwości i Wartości

Obiekty zawierają właściwości i wartości.

Przykład:

const user = {
  name: "Anna",
  age: 25,
  isStudent: true
};

Tutaj:

name

to właściwość.

"Anna"

to wartość.

age

to właściwość.

to wartość.

isStudent

to właściwość.

true

to wartość.

Schemat jest zawsze taki:

property: value

Między właściwościami używamy przecinków:

const product = {
  name: "Laptop",
  price: 900,
  inStock: true
};

Po ostatniej właściwości przecinek nie jest wymagany.

Ale w nowoczesnym JavaScript często zobaczysz też taki zapis:

const product = {
  name: "Laptop",
  price: 900,
  inStock: true,
};

Oba warianty są poprawne.

JavaScript przeżyje.

Prawdopodobnie.

Odczytywanie Właściwości Obiektu

Właściwości obiektu możesz odczytywać za pomocą kropki.

To nazywa się dot notation.

Przykład:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

console.log(user.name);
console.log(user.age);
console.log(user.role);

Wynik:

Viktor
33
Developer

Dot notation oznacza:

user.name

“Daj mi właściwość name z obiektu user.”

Bardzo czytelne.

Bardzo częste.

Bardzo przydatne.

Kolejny przykład:

const product = {
  name: "Keyboard",
  price: 49,
  color: "black"
};

console.log(`Product: ${product.name}`);
console.log(`Price: €${product.price}`);

Wynik:

Product: Keyboard
Price: €49

Obiekty pomagają trzymać powiązane dane razem.

Kod staje się łatwiejszy do zrozumienia.

A twoje przyszłe ja jest trochę mniej wściekłe.

Bracket Notation

Istnieje też drugi sposób odczytywania właściwości.

Bracket notation.

Przykład:

const user = {
  name: "Viktor",
  age: 33
};

console.log(user["name"]);
console.log(user["age"]);

Wynik:

Viktor
33

To też działa.

Dot notation zwykle jest prostsze:

user.name

Bracket notation jest przydatne, gdy nazwa właściwości jest zapisana w zmiennej.

Przykład:

const propertyName = "name";

console.log(user[propertyName]);

Wynik:

Viktor

Na razie używaj dot notation przez większość czasu.

Jest czyste.

Jest proste.

Nie wygląda, jakby JavaScript próbował przywołać demona.

Zmienianie Wartości Obiektu

Możesz zmienić wartość właściwości.

Przykład:

const user = {
  name: "Anna",
  age: 25
};

user.age = 26;

console.log(user);

Wynik:

{name: "Anna", age: 26}

Wiek zmienił się z 25 na 26.

Nawet jeśli obiekt został utworzony za pomocą const, nadal możesz zmieniać jego właściwości.

To ważne.

const oznacza, że nie możesz zastąpić całego obiektu.

Ale możesz zmieniać to, co jest w środku.

Przykład:

const user = {
  name: "Anna",
  age: 25
};

user.age = 26;

To jest dozwolone.

Ale to już nie:

user = {
  name: "Marco",
  age: 30
};

To próbuje zastąpić cały obiekt.

JavaScript będzie narzekał.

I szczerze mówiąc, tym razem JavaScript ma rację.

Dodawanie Nowych Właściwości

Możesz dodać nową właściwość do obiektu.

Przykład:

const user = {
  name: "Viktor",
  age: 33
};

user.role = "Developer";

console.log(user);

Teraz obiekt ma nową właściwość:

role: "Developer"

Wynik:

{name: "Viktor", age: 33, role: "Developer"}

To jest przydatne, gdy później otrzymujesz więcej informacji.

Przykład:

const product = {
  name: "Mouse",
  price: 25
};

product.inStock = true;

console.log(product);

Obiekty są elastyczne.

Czasem nawet zbyt elastyczne.

Jak nauczyciel jogi, który zna też backend.

Potężne.

Ale lekko przerażające.

Usuwanie Właściwości

Możesz usunąć właściwość za pomocą delete.

Przykład:

const user = {
  name: "Anna",
  age: 25,
  password: "secret123"
};

delete user.password;

console.log(user);

Wynik:

{name: "Anna", age: 25}

Właściwość password została usunięta.

Dobrze.

Nigdy nie wypisuj haseł w prawdziwych projektach.

Nigdy nie przechowuj haseł w taki sposób.

Nigdy nie ufaj hasłu z tutoriala.

Ten przykład jest tylko do nauki.

Bezpieczeństwo to nie dekoracyjna roślinka.

Ma znaczenie.

Obiekty i Funkcje

Obiekty bardzo dobrze współpracują z funkcjami.

Przykład:

function showUser(user) {
  console.log(`Name: ${user.name}`);
  console.log(`Age: ${user.age}`);
}

const user = {
  name: "Viktor",
  age: 33
};

showUser(user);

Wynik:

Name: Viktor
Age: 33

Funkcja otrzymuje obiekt.

Potem odczytuje właściwości z tego obiektu.

To bardzo częste w prawdziwym JavaScript.

Kolejny przykład:

function createProductMessage(product) {
  return `${product.name} costs €${product.price}.`;
}

const product = {
  name: "Keyboard",
  price: 49
};

console.log(createProductMessage(product));

Wynik:

Keyboard costs €49.

Obiekt zawiera dane.

Funkcja używa tych danych.

Czysto.

Prosto.

Prawie podejrzanie normalnie.

Metody

Metoda to funkcja wewnątrz obiektu.

Przykład:

const user = {
  name: "Viktor",
  sayHello: function () {
    console.log("Hello!");
  }
};

user.sayHello();

Wynik:

Hello!

Tutaj:

sayHello

to metoda.

Bo jest funkcją zapisaną wewnątrz obiektu.

Możesz też używać danych obiektu wewnątrz metody za pomocą this.

Przykład:

const user = {
  name: "Viktor",
  sayHello: function () {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

user.sayHello();

Wynik:

Hello, my name is Viktor.

this.name oznacza:

“Użyj właściwości name z tego obiektu.”

this potrafi być mylące.

Bardzo mylące.

Na razie zapamiętaj podstawową ideę:

Wewnątrz metody obiektu this może odnosić się do tego obiektu.

Nie martw się, jeśli wydaje się to dziwne.

JavaScript zrobił this dziwnym specjalnie.

Prawdopodobnie po to, żebyśmy byli pokorni.

Obiekty Wewnątrz Tablic

Obiekty i tablice często pracują razem.

Przykład:

const products = [
  {
    name: "Laptop",
    price: 900
  },
  {
    name: "Mouse",
    price: 25
  },
  {
    name: "Keyboard",
    price: 49
  }
];

console.log(products[0].name);

Wynik:

Laptop

Tutaj mamy tablicę obiektów.

To jest ekstremalnie częste.

Bardzo częste.

Prawie wszędzie częste.

Lista użytkowników?

Tablica obiektów.

Lista produktów?

Tablica obiektów.

Lista wpisów blogowych?

Tablica obiektów.

Przykład:

for (const product of products) {
  console.log(`${product.name}: €${product.price}`);
}

Wynik:

Laptop: €900
Mouse: €25
Keyboard: €49

To jest prawdziwy JavaScript.

Dane bardzo często przychodzą jako listy obiektów.

Nie zawsze.

Ale bardzo często.

Przyzwyczaj się do tego schematu.

Będzie za tobą chodził.

Jak cache przeglądarki.

Zbuduj Kartę Profilu

Teraz zbudujemy małą kartę profilu przy pomocy obiektu.

Zaktualizuj index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Obiekty</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    h2 {
      font-size: 30px;
      margin-bottom: 8px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    .badge {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      background-color: #2563eb;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h1>Obiekty</h1>

  <div class="card">
    <h2 id="profileName"></h2>
    <p id="profileRole"></p>
    <p id="profileCountry"></p>
    <span id="profileLevel" class="badge"></span>
  </div>

  <script src="script.js"></script>
</body>
</html>

Teraz zaktualizuj script.js:

const profile = {
  name: "Viktor",
  role: "JavaScript Student",
  country: "Italy",
  level: "Beginner"
};

const profileNameElement = document.getElementById("profileName");
const profileRoleElement = document.getElementById("profileRole");
const profileCountryElement = document.getElementById("profileCountry");
const profileLevelElement = document.getElementById("profileLevel");

function showProfile(profile) {
  profileNameElement.textContent = profile.name;
  profileRoleElement.textContent = `Role: ${profile.role}`;
  profileCountryElement.textContent = `Country: ${profile.country}`;
  profileLevelElement.textContent = profile.level;
}

showProfile(profile);

Odśwież przeglądarkę.

Powinieneś zobaczyć kartę profilu.

JavaScript wziął dane z obiektu i wyświetlił je na stronie.

To ważne.

Bardzo ważne.

Bo wiele stron działa właśnie tak:

dane są zapisane w obiektach;
JavaScript odczytuje obiekt;
JavaScript aktualizuje HTML;
użytkownik widzi ładny interfejs.

Obiekt to dane.

DOM to strona.

JavaScript to kelner, który niesie informacje z kuchni.

Oby bez wylania zupy.

Jak Działa Ten Kod

Ten obiekt przechowuje dane profilu:

const profile = {
  name: "Viktor",
  role: "JavaScript Student",
  country: "Italy",
  level: "Beginner"
};

Te linie znajdują elementy HTML:

const profileNameElement = document.getElementById("profileName");
const profileRoleElement = document.getElementById("profileRole");
const profileCountryElement = document.getElementById("profileCountry");
const profileLevelElement = document.getElementById("profileLevel");

Ta funkcja wyświetla dane z obiektu:

function showProfile(profile) {
  profileNameElement.textContent = profile.name;
  profileRoleElement.textContent = `Role: ${profile.role}`;
  profileCountryElement.textContent = `Country: ${profile.country}`;
  profileLevelElement.textContent = profile.level;
}

To uruchamia funkcję:

showProfile(profile);

Zauważ schemat:

Dane mieszkają w obiekcie.

Funkcja czyta dane.

Strona pokazuje dane.

Ten schemat jest wszędzie.

Teraz prosty.

Później potężny.

Typowe Błędy

Zapominanie o Przecinkach Między Właściwościami

Źle:

const user = {
  name: "Anna"
  age: 25
};

Poprawnie:

const user = {
  name: "Anna",
  age: 25
};

Używaj przecinków między właściwościami.

JavaScript ich potrzebuje.

Nie jest dobry w zgadywaniu.

Nie czyta twojej duszy.

Na szczęście.

Używanie = Zamiast :

Źle:

const user = {
  name = "Anna"
};

Poprawnie:

const user = {
  name: "Anna"
};

W obiektach używamy : między właściwością a wartością.

Nie =.

Mały znak.

Duża różnica.

Klasyczna pułapka JavaScript.

Odczytywanie Właściwości, Która Nie Istnieje

Przykład:

const user = {
  name: "Anna"
};

console.log(user.email);

Wynik:

undefined

Nie ma właściwości email.

JavaScript zwraca undefined.

Znowu.

Bardzo spokojnie.

Bardzo tajemniczo.

Mylenie Tablic i Obiektów

Tablica:

const colors = ["red", "green", "blue"];

Obiekt:

const user = {
  name: "Anna",
  age: 25
};

Używaj tablic do list.

Używaj obiektów do uporządkowanych szczegółów.

Lista imion?

Tablica.

Jeden użytkownik z wieloma szczegółami?

Obiekt.

Lista użytkowników?

Tablica obiektów.

To jest droga.

Praktyka

Utwórz obiekt o nazwie book.

Powinien mieć:

title;
author;
pages;
isFinished.

Przykład:

const book = {
  title: "JavaScript Basics",
  author: "InnoMarts",
  pages: 120,
  isFinished: false
};

Wypisz każdą właściwość w konsoli:

console.log(book.title);
console.log(book.author);
console.log(book.pages);
console.log(book.isFinished);

Potem zmień isFinished na true.

book.isFinished = true;

Wypisz obiekt jeszcze raz.

Zepsuj go.

Napraw go.

To nadal najlepszy nauczyciel.

Oprócz kawy.

Kawa też jest nauczycielem.

Surowym.

Mini Wyzwanie

Zbuduj małą kartę produktu.

Utwórz obiekt:

const product = {
  name: "JavaScript Course",
  price: 49,
  category: "Programming",
  available: true
};

Stwórz HTML z:

nazwą produktu;
ceną;
kategorią;
statusem dostępności.

Potem utwórz funkcję:

function showProduct(product) {
  // update the page here
}

Jeśli available ma wartość true, pokaż:

Available now

W przeciwnym razie pokaż:

Not available

To jest bardzo blisko prawdziwego web developmentu.

Produkty są obiektami.

Użytkownicy są obiektami.

Zamówienia są obiektami.

Kursy są obiektami.

Nawet bugi czasem wyglądają jak obiekty.

Ciężkie.

Skomplikowane.

Pełne właściwości, o które nikt nie prosił.

Podsumowanie

Dzisiaj nauczyłeś się:

obiekty przechowują uporządkowane dane;
obiekty używają nawiasów klamrowych;
dane są zapisane jako właściwości i wartości;
właściwości można odczytywać za pomocą dot notation;
właściwości można też odczytywać za pomocą bracket notation;
wartości w obiekcie można zmieniać;
nowe właściwości można dodawać;
właściwości można usuwać;
funkcje mogą otrzymywać obiekty;
metody to funkcje wewnątrz obiektów;
tablice mogą zawierać obiekty;
obiekty mogą aktualizować DOM.

To ogromny krok.

Obiekty są jedną z najważniejszych części JavaScript.

Jeśli tablice są listami, obiekty są szczegółami.

Razem pozwalają opisywać dane ze świata rzeczywistego.

Użytkownika.

Produkt.

Kurs.

Zadanie.

Wiadomość.

Bardzo dramatycznego banana.

Wszystko może stać się obiektem.

JavaScript robi się poważny.

Nadal dziwny.

Ale poważny.

Następna Lekcja

W następnej lekcji nauczymy się więcej o DOM.

DOM pozwala JavaScript rozmawiać ze stroną internetową.

Zmieniać tekst.

Zmieniać style.

Tworzyć elementy.

Reagować na użytkowników.

Krótko mówiąc, DOM to miejsce, gdzie JavaScript przestaje być teorią i zaczyna dotykać strony.

Ostrożnie.

Zazwyczaj.