InnoMarts logo
InnoMarts
Fast websites
← Back to course

Zmienne i Typy Danych

Zmienne i Typy Danych

Witaj ponownie.

W poprzedniej lekcji połączyłeś JavaScript z HTML.

Napisałeś console.log().

Zmieniłeś text na stronie.

Sprawiłeś, że button zareagował na click.

Bardzo dobrze.

Browser nie ignoruje cię już całkowicie.

Dzisiaj poznamy jedną z najważniejszych rzeczy w JavaScript:

variables.

Variables pozwalają JavaScript pamiętać informacje.

Bez variables JavaScript byłby jak bardzo zagubiony kelner, który zapomina twoje zamówienie, zanim dojdzie do kuchni.

Dzięki variables JavaScript może zapisać values i użyć ich później.

Names.

Numbers.

Messages.

User choices.

Prices.

Booleans.

Małe cyfrowe wspomnienia.

Bardzo useful.

Czasem bardzo dangerous, jeśli nazwiesz je źle.

Ale przeżyjemy.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Na końcu tej lekcji będziesz umiał przechowywać values w JavaScript i rozumieć, z jakim typem data pracujesz.

Brzmi prosto.

I jest proste.

Dopóki nie spotkasz undefined.

Wtedy JavaScript uśmiecha się uprzejmie i podaje ci małą zagadkę.

Czym Jest Variable?

Variable to nazwany pojemnik na value.

Przykład:

const name = "Viktor";

Tutaj:

Możesz użyć variable później:

console.log(name);

Console pokaże:

Viktor

Pomyśl o variable jak o pudełku z etykietą.

Etykieta mówi, co jest w środku.

Value to to, co wkładasz do pudełka.

Dobre nazwy variables są ważne.

Zła nazwa:

const x = "Viktor";

Lepsza nazwa:

const userName = "Viktor";

JavaScript zrozumie obie.

Ludzie niekoniecznie.

A ludzie zwykle są problemem.

Zwłaszcza przyszły ty.

Przyszły ty otworzy swój code i zapyta:

“Kto to napisał?”

Potem zrozumie.

To byłeś ty.

Stwórz Projekt

Stwórz folder dla tej lekcji:

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

Twój project powinien wyglądać tak:

javascript-lesson2/
  index.html
  script.js

Otwórz folder w swoim editor.

Większość przykładów będziemy sprawdzać w browser console.

Bez complicated setup.

Tylko JavaScript uczący się pamiętać rzeczy.

Jak mały słoń z syntax.

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>Zmienne i Typy Danych</title>
</head>
<body>
  <h1>Zmienne i Typy Danych</h1>
  <p>Otwórz browser console, aby zobaczyć output JavaScript.</p>

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

Otwórz file w browser.

Potem otwórz console:

Teraz jesteśmy gotowi.

Console czeka.

Trochę judgmentally, ale czeka.

Używanie const

Otwórz script.js i dodaj:

const firstName = "Viktor";
const age = 33;

console.log(firstName);
console.log(age);

Odśwież browser.

Powinieneś zobaczyć:

Viktor
33

const tworzy variable, której nie można reassigned.

To jest OK:

const city = "Vigevano";

console.log(city);

Ale to nie jest OK:

const city = "Vigevano";

city = "Milan";

JavaScript wyrzuci error.

Dlaczego?

Bo const oznacza, że binding variable nie może zostać zmieniony.

Powiedziałeś JavaScript:

“Ta value ma zostać tutaj.”

Potem próbowałeś ją wymienić.

JavaScript powiedział:

“Nie.”

Trochę energia włoskiej biurokracji.

Ale useful.

Używanie let

Czasem potrzebujesz value, która może się zmienić.

Do tego używamy let.

Przykład:

let score = 0;

console.log(score);

score = 10;

console.log(score);

Console pokaże:

0
10

To działa, ponieważ let pozwala na reassignment.

Używaj let, kiedy value musi się zmieniać.

Przykłady:

let counter = 0;
let userInput = "";
let isMenuOpen = false;

Te values mogą zmienić się później.

Counter rośnie.

User input się zmienia.

Menu otwiera się i zamyka.

Życie się dzieje.

JavaScript się dostosowuje.

const czy let?

Użyj prostej zasady:

Używaj const domyślnie.

Używaj let tylko wtedy, kiedy value musi się zmieniać.

Dobrze:

const userName = "Anna";
const country = "Italy";

let points = 0;
points = points + 10;

Dlaczego preferować const?

Bo sprawia, że code jest bezpieczniejszy.

Jeśli value nie powinna się zmieniać, const ją chroni.

To jak mały płotek wokół variable.

Nie bardzo wysoki płotek.

Ale wystarczający, żeby zatrzymać beginner chaos.

Na Razie Nie Używaj var

Możesz zobaczyć starszy JavaScript code z var.

Przykład:

var name = "Old JavaScript";

W tym kursie unikaj var.

Używaj:

var ma starsze zachowanie, które może mieszać początkującym w głowie.

Nie potrzebujemy dziś tego dramatu.

JavaScript i tak ma wystarczająco dużo personality.

Strings

String to text.

Tworzysz strings za pomocą quotes:

const language = "JavaScript";
const message = "Hello, world!";
const country = 'Italy';

Działają zarówno double quotes, jak i single quotes.

Wybierz jeden style i bądź consistent.

Możesz print strings:

const message = "JavaScript is fun.";

console.log(message);

Możesz łączyć strings:

const firstName = "Viktor";
const greeting = "Hello, " + firstName;

console.log(greeting);

Console pokaże:

Hello, Viktor

To nazywa się string concatenation.

Działa.

Ale jest czystszy sposób.

Template Literals

Template literals używają backticks:

const firstName = "Viktor";
const age = 33;

const message = `My name is ${firstName} and I am ${age} years old.`;

console.log(message);

Console pokaże:

My name is Viktor and I am 33 years old.

To jest bardzo useful.

Wewnątrz ${} możesz wstawiać variables.

Template literals są zwykle łatwiejsze do czytania niż string concatenation.

Porównaj to:

const message = "My name is " + firstName + " and I am " + age + " years old.";

z tym:

const message = `My name is ${firstName} and I am ${age} years old.`;

Druga wersja wygląda czyściej.

Mniej punctuation soup.

Więcej dignity.

Numbers

Numbers służą do math.

Przykład:

const price = 100;
const quantity = 3;
const total = price * quantity;

console.log(total);

Console pokaże:

300

JavaScript potrafi robić basic math:

const a = 10;
const b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Output:

13
7
30
3.3333333333333335

Ta ostatnia liczba jest bardzo JavaScript.

Nie jest wrong.

Jest po prostu niepotrzebnie szczera.

Computers robią decimal math w sposób, który czasem wygląda dziwnie.

Na beginner level nie panikuj.

Po prostu wiedz, że decimals mogą czasem być weird.

Jak ludzie przed kawą.

Booleans

Boolean to true albo false.

Przykład:

const isLoggedIn = true;
const isAdmin = false;

console.log(isLoggedIn);
console.log(isAdmin);

Booleans są używane do decisions.

Przykład:

const isLoggedIn = true;

if (isLoggedIn) {
  console.log("Welcome back!");
}

Console pokaże:

Welcome back!

Booleans są bardzo important w programming.

Odpowiadają na pytania yes-or-no.

Czy user jest logged in?

Czy menu jest open?

Czy password jest valid?

Czy JavaScript zachowuje się dziś normalnie?

Usually false.

Żartuję.

Mostly.

undefined

Variable jest undefined, kiedy istnieje, ale nie ma jeszcze value.

Przykład:

let userName;

console.log(userName);

Console pokaże:

undefined

To znaczy:

“Variable istnieje, ale nic nie zostało do niej assigned.”

To jak puste pudełko z etykietą.

Pudełko istnieje.

Ale w środku?

Nic.

Mały existential crisis.

null

null oznacza celowo pustą value.

Przykład:

const selectedUser = null;

console.log(selectedUser);

null zwykle znaczy:

“Nie ma tutaj value i zrobiłem to specjalnie.”

Różnica:

let userName;
const selectedUser = null;

userName jest undefined, bo żadna value nie została assigned.

selectedUser jest null, bo celowo ustawiliśmy empty value.

Pomyśl o tym tak:

Bardzo philosophical.

Bardzo useful.

typeof

Operator typeof mówi ci type danej value.

Przykład:

const name = "Viktor";
const age = 33;
const isStudent = false;

console.log(typeof name);
console.log(typeof age);
console.log(typeof isStudent);

Output:

string
number
boolean

Spróbuj też tego:

let city;
const selectedItem = null;

console.log(typeof city);
console.log(typeof selectedItem);

Output:

undefined
object

Tak.

typeof null daje "object".

To stary JavaScript quirk.

Nie próbuj tego naprawiać.

Wielu odważnych developers patrzyło na to długo.

To nadal tam jest.

Jak dziwny monument.

Zasady Nazywania Variables

Nazwy variables mogą zawierać:

Ale nie mogą zaczynać się od number.

Dobrze:

const userName = "Anna";
const userAge = 25;
const totalPrice = 300;

Źle:

const 1user = "Anna";

Variable names są też case-sensitive:

const userName = "Anna";
const username = "Marco";

To są dwie różne variables.

JavaScript widzi je jako different.

Humans widzą je i zaczynają suffering.

Używaj clear names.

Dobrze:

const productPrice = 49;
const userEmail = "hello@example.com";
const isMenuOpen = true;

Źle:

const p = 49;
const x = "hello@example.com";
const thing = true;

Computer does not care.

Your brain does.

Respect your brain.

It already has enough tabs open.

Zbuduj Mały Przykład

Zastąp script.js tym:

const productName = "JavaScript Course";
const price = 49;
const discount = 10;
const isAvailable = true;

const finalPrice = price - discount;

console.log(`Product: ${productName}`);
console.log(`Original price: €${price}`);
console.log(`Discount: €${discount}`);
console.log(`Final price: €${finalPrice}`);
console.log(`Available: ${isAvailable}`);

Odśwież browser.

Powinieneś zobaczyć:

Product: JavaScript Course
Original price: €49
Discount: €10
Final price: €39
Available: true

Ten przykład używa:

Small example.

Wiele important ideas.

JavaScript już robi useful work.

Bez fireworks.

Ale zdecydowanie z małą spark.

Pokaż Data na Page

Teraz pokażemy data w HTML.

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>Zmienne i Typy Danych</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-radius: 18px;
      border: 2px solid #e5e7eb;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Zmienne i Typy Danych</h1>

  <div class="card">
    <h2 id="productName"></h2>
    <p id="productPrice"></p>
    <p id="productStatus"></p>
  </div>

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

Teraz zaktualizuj script.js:

const productName = "JavaScript Course";
const price = 49;
const discount = 10;
const isAvailable = true;

const finalPrice = price - discount;

const productNameElement = document.getElementById("productName");
const productPriceElement = document.getElementById("productPrice");
const productStatusElement = document.getElementById("productStatus");

productNameElement.textContent = productName;
productPriceElement.textContent = `Final price: €${finalPrice}`;
productStatusElement.textContent = `Available: ${isAvailable}`;

Odśwież browser.

Teraz JavaScript przechowuje data w variables i wpisuje tę data na page.

To ważne.

Nie tylko printujesz things w console.

Używasz JavaScript do kontrolowania page content.

Page staje się dynamic.

Very nice.

HTML prawdopodobnie czuje się teraz important.

Common Mistakes

Zapomnienie Quotes Przy Strings

Źle:

const name = Viktor;

Dobrze:

const name = "Viktor";

Bez quotes JavaScript myśli, że Viktor to variable name.

Potem szuka tej variable.

Potem jej nie znajduje.

Potem complains.

Classic JavaScript.

Reassigning const

Źle:

const score = 0;
score = 10;

Dobrze:

let score = 0;
score = 10;

Użyj let, jeśli value się zmienia.

Użyj const, jeśli się nie zmienia.

Simple rule.

Strong result.

Mylenie Strings i Numbers

To jest number:

const age = 33;

To jest string:

const age = "33";

Wyglądają podobnie.

Ale nie są tym samym.

Numbers są do math.

Strings są text.

JavaScript czasem automatycznie konwertuje values.

To może być useful.

Może też stworzyć chaos in a nice jacket.

Be careful.

Złe Nazwy Variables

Źle:

const data = "Anna";
const thing = 25;
const value = true;

Lepiej:

const userName = "Anna";
const userAge = 25;
const isLoggedIn = true;

Dobre names sprawiają, że code jest łatwiejszy do zrozumienia.

Code czyta się częściej, niż się go pisze.

Write for humans.

Computer already understands nonsense.

Praktyka

Stwórz variables dla user profile:

Potem wypisz sentence używając template literal.

Example output:

Viktor Holovin is 33 years old and lives in Italy. Online: true

Użyj:

const firstName = "Viktor";
const lastName = "Holovin";
const age = 33;
const country = "Italy";
const isOnline = true;

const profile = `${firstName} ${lastName} is ${age} years old and lives in ${country}. Online: ${isOnline}`;

console.log(profile);

Potem zmień values i stwórz własny profile.

Nie tylko copy.

Modify.

Break.

Fix.

That is where learning hides.

Mini Wyzwanie

Stwórz małą product card.

Variables:

Pokaż result na browser page, nie tylko w console.

Użyj:

Bonus:

Jeśli product jest available, pokaż:

This product is available.

Jeśli nie, pokaż:

This product is not available.

Będziesz potrzebować if statement.

Conditions dobrze przerobimy w następnej lekcji, ale możesz już spróbować.

A little struggle is healthy.

Like gym for the brain.

Without the sweaty towel.

Podsumowanie

Dzisiaj nauczyłeś się, że:

To duży krok.

Variables są wszędzie w JavaScript.

Gdyby JavaScript był kuchnią, variables byłyby miskami, do których wkładasz składniki.

Bez misek trzymasz jajka w rękach i liczysz na najlepsze.

Not a good strategy.

Następna Lekcja

W następnej lekcji nauczymy się operators i conditions.

Nauczysz JavaScript podejmować decisions.

If this happens, do that.

If not, do something else.

Basically, JavaScript zacznie oceniać sytuacje.

Politely.

Mostly.