Przez Małgorzata Rzerzycha-Myśliwy — 26 lis 2025

JS cz.1

1.Okienka dialogowe

typy:

alert – okienko z zatwierdzeniem (ok)

confirm – okienko z zapytaniem (ok, anuluj)

W jaki sposób załadować plik JS:

1)opcja można dodać w <head> -scrypt wykona się poprawnie jeśli nie ma związków z body, jeśli ma związek z body, ma związek z wartościami z HTML; dlatego sugeruje się wrzucić JS na ostatnim wersie body = 2)opcja

3)opcja – jeśli kilka plików HTML sięga do tej samej funkcji JS można linkować do zewnętrznego pliku czyli:

script src=”script.js” / plik można współdzielić pomiędzy wiele podstron

najazd na ten link plus control – follow link-jeśli nie ma utworzonego, program zapyta czy chcemy go utworzyć – wtedy doda do właściwego katalogu i ścieżka będzie poprawna, jeśli link jest klikalny = działa

*rzeczy współdzielone (zewnętrzne pliki) trzeba ładować jako pierwsze, te które lokalnie, później; to ważne gdy pisze się plik w zespole = kolejność zapisu

Jeśli script ma być w head trzeba użyć: defer (ładowanie asynchroniczne – ładowanie po załadowaniu całego HTMLa)

Całkowicie asynchroniczne ładowanie - używa się: async (metoda szybka, ale zdradliwa)

ZMIENNE w JS

Zmienne – „pudełka” przechowujące dane
Nie używamy słowa klucza: var!
Led (kiedy wartości mają się zmieniać) i const (kiedy wartości się nie mają zmieniać)rozwiązują problemy war

Dobrze wszystkie zmienne i stałe deklarować na początku script (łatwiej szukać)

let x = 10;      // zmienna, którą można zmieniać
const y = 20;    // stała, nie można nadpisać
var z = 30;      // stary sposób – niezalecany

Temporal dead zone = nie można używać zmiennej przed jej deklaracją

zmiennaConst = niemutowalna – niezmienna

zmiennaLet = mutowalna – zmienna

obie są blokowe – działają w bloku głównym/globalnym <script> lub w jego podblokach

nie możemy użyć dwa razy zmiennej o tej samej nazwie, zmienną let nadpisujemy poprzez powtórzenie jej nazwy bez 'let'

let i const mają block scope → zmienna istnieje tylko w bloku, w którym została zadeklarowana.

var ma function scope, nie block scope → zmienna zadeklarowana w bloku jest widoczna poza nim, jeśli nie jest w funkcji. Zmienne zadeklarowane przez var są hoistowane (przenoszone “na górę” zakresu)

W JavaScript hoisting (dosł. „podnoszenie”) to mechanizm, w którym deklaracje zmiennych i funkcji są przenoszone na początek swojego zakresu (scope) podczas fazy kompilacji, zanim kod zostanie wykonany.

Dzięki temu można odwołać się do zmiennej lub funkcji przed jej fizycznym miejscem w kodzie – ale działanie zależy od typu deklaracji (var, let, const, funkcje).

Naming conventions (konwencje nazewnictwa) to zasady określające sposób nazywania plików, zmiennych, klas, funkcji, identyfikatorów itp. w kodzie.

Służą do tego, aby kod był:

czytelny,
łatwy do zrozumienia,
spójny w całym projekcie,
łatwy do utrzymania,
przewidywalny dla innych programistów.

Nie są obowiązkowe, ale są standardem dobrej praktyki w programowaniu i front-endzie.

Najpopularniejsze naming conventions:

Nazwa konwencji	Przykład	Gdzie się stosuje	Opis
camelCase	`myVariableName`	JS (zmienne, funkcje), CSS (custom properties), JSON	Pierwsze słowo małą literą, każde kolejne zaczyna się wielką.
PascalCase	`MyVariableName`	JS (klasy, komponenty React), języki OOP	Każde słowo zaczyna się wielką literą.
snake_case	`my_variable_name`	Python, pliki, czasem CSS	Słowa oddzielone podkreślnikami.
kebab-case	`my-variable-name`	CSS (klasy), HTML (id), nazwy plików	Słowa oddzielone myślnikami.
SCREAMING_SNAKE_CASE	`MY_CONSTANT_NAME`	Stałe w JS, C, PHP	Całość WIELKIMI literami + podkreślniki

SCREAMING_SNAKE_CASE = UPPER_CASE_SNAKE

To my nazywamy zmienne – warto zachować stałe nazewnictwo, trzymać się go konsekwentnie

ZMIENNE PRYMITYWNE

1zmiennaString - literał, posiada swoje metody:

Metoda	Opis	Przykład
`length`	Długość stringa (właściwość, nie metoda)	`"Hello".length // 5`
`charAt(index)`	Zwraca znak na określonej pozycji	`"Hello".charAt(1) // "e"`
`charCodeAt(index)`	Kod znaku Unicode na pozycji	`"A".charCodeAt(0) // 65`
`concat(str1, str2)`	Łączy stringi	`"Hello".concat(" ", "World") // "Hello World"`
`includes(substr)`	Sprawdza, czy string zawiera podany fragment	`"Hello".includes("ll") // true`
`startsWith(substr)`	Sprawdza początek stringa	`"Hello".startsWith("He") // true`
`endsWith(substr)`	Sprawdza koniec stringa	`"Hello".endsWith("lo") // true`
`indexOf(substr)`	Zwraca indeks pierwszego wystąpienia	`"Hello".indexOf("l") // 2`
`lastIndexOf(substr)`	Zwraca indeks ostatniego wystąpienia	`"Hello".lastIndexOf("l") // 3`
`slice(start, end)`	Wyciąga fragment stringa	`"Hello".slice(1,4) // "ell"`
`substring(start, end)`	Wyciąga fragment stringa (nie obsługuje ujemnych indeksów)	`"Hello".substring(1,4) // "ell"`
`substr(start, length)`	Wyciąga fragment stringa o określonej długości	`"Hello".substr(1,3) // "ell"`
`replace(search, replace)`	Zastępuje fragment	`"Hello".replace("l", "x") // "Hexlo"`
`replaceAll(search, replace)`	Zastępuje wszystkie wystąpienia	`"Hello".replaceAll("l", "x") // "Hexxo"`
`toUpperCase()`	Zamienia na wielkie litery	`"Hello".toUpperCase() // "HELLO"`
`toLowerCase()`	Zamienia na małe litery	`"Hello".toLowerCase() // "hello"`
`trim()`	Usuwa spacje z początku i końca	`" Hello ".trim() // "Hello"`
`trimStart()` / `trimLeft()`	Usuwa spacje z początku	`" Hello".trimStart() // "Hello"`
`trimEnd()` / `trimRight()`	Usuwa spacje z końca	`"Hello ".trimEnd() // "Hello"`
`split(separator)`	Dzieli string na tablicę	`"a,b,c".split(",") // ["a","b","c"]`
`repeat(count)`	Powtarza string określoną ilość razy	`"Hi".repeat(3) // "HiHiHi"`
`padStart(targetLength, padString)`	Dopełnia string z lewej strony	`"5".padStart(3, "0") // "005"`
`padEnd(targetLength, padString)`	Dopełnia string z prawej strony	`"5".padEnd(3, "0") // "500"`
`match(regex)`	Zwraca dopasowania do wyrażenia regularnego	`"Hello".match(/l/g) // ["l","l"]`
`search(regex)`	Zwraca indeks dopasowania do regex	`"Hello".search(/l/) // 2`
`includes(substr)`	Sprawdza, czy string zawiera fragment	`"Hello".includes("lo") // true`

2.W JavaScript Number to zarówno typ prymitywny (number), jak i obiekt Number, który posiada różne właściwości (properties) i metody (methods). Poniżej zrobię pełne, uporządkowane zestawienie.

Typ number przechowuje liczby, zarówno całkowite (intiger), jak i zmiennoprzecinkowe (float).

let a = 42;        // liczba całkowita
let b = 3.14;      // liczba zmiennoprzecinkowa
let c = NaN;       // Not a Number
let d = Infinity;  // nieskończoność

Przykładowe metody dla Number:

Number.isInteger(value) Sprawdza, czy liczba jest całkowita Number.isInteger(4.0) // true

Number.isNaN(value) Sprawdza, czy wartość jest NaN Number.isNaN(NaN) // true

Number.isFinite(value) Sprawdza, czy wartość jest skończona Number.isFinite(10) // true

Number.parseInt(string, radix) Parsuje string na liczbę całkowitą Number.parseInt("42px") // 42

Number.parseFloat(string) Parsuje string na liczbę zmiennoprzecinkową

Specjalne wartości dla number:

NaN – wynik niepoprawnej operacji matematycznej (0/0, "a"*3)
Infinity / -Infinity – liczby większe niż maksymalna wartość JS
Number.MAX_VALUE – największa możliwa liczba
Number.MIN_VALUE – najmniejsza dodatnia liczba
Number.MAX_SAFE_INTEGER – największa bezpieczna liczba całkowita (2^53 - 1)
Number.MIN_SAFE_INTEGER – najmniejsza bezpieczna liczba całkowita (-(2^53 -1))
Number.EPSILON – minimalna różnica między liczbami zmiennoprzecinkowymi

Typ Boolean (może też być obiektem)

Może przyjmować dwie wartości:let isActive = true;
let hasError = false;
Służy głównie do logiki warunkowej, sterowania przepływem programu (if, while, for).

Typ boolean prymitywny nie posiada własnych metod, ale dzięki autoboxingowi można korzystać z metod obiektu Boolean.

Typ undefined

Wartość domyślna zmiennej, która została zadeklarowana, ale nie przypisano jej wartości.
Przykład:

let x;
console.log(x); // undefined

5. Typ null

Specjalna wartość oznaczająca brak wartości.
Różni się od undefined tym, że jest świadomie ustawiana przez programistę.
Przykład:

let user = null;

Typ symbol (ES6)

Unikalna i niezmienna wartość, często używana jako klucz właściwości w obiektach.
Przykład:

let id = Symbol("id");
let obj = { [id]: 123 };

Podsumowanie – do czego służy Symbol?
Unikalne klucze obiektów - zero ryzyka nadpisania
Ukrywanie właściwości - symbolowe pola nie są widoczne w iteracji
“Prywatne” dane - trudne do odczytu bez znajomości symbolu
Zaawansowana logika JS - mechanizmy iteracji, konwersji itd.
Debugowanie - opis symbolu ułatwia logi i diagnostykę

const secret = Symbol("secret");

const data = {
    name: "Jan",
    [secret]: "tajne dane"
};

console.log(data);              // { name: "Jan" } – symbol ukryty
console.log(data[secret]);      // "tajne dane"

7. bigint (ES2020)

Liczby całkowite większe niż Number.MAX_SAFE_INTEGER.
Dodaje możliwość operacji na bardzo dużych liczbach.
Let zmiennaBigInt = 123n (BigInty nie mogą być mieszane ze zwykłymi numerami – mniejsze wartości muszą być przekonwertowane na BigInty)
(dla BigIntów nie ma metod, trzeba ją sobie napisać, BigIntów nie stosuję się na szeroką skalę)
Przykład:

let big = 123456789012345678901234567890n;

typeof w JavaScript to operator, który służy do sprawdzania typu wartości zmiennej.

let a = 42;
console.log(typeof a); // "number"

Najczęstsze wartości zwracane przez typeof:

Wartość zwrócona	Co oznacza
`"number"`	liczba (`number` lub `NaN`)
`"string"`	tekst (`string`)
`"boolean"`	logiczna wartość
`"undefined"`	brak wartości przypisanej
`"object"`	obiekt (`{}`), tablica, null
`"function"`	funkcja
`"symbol"`	symbol (`Symbol()`)
`"bigint"`	bardzo duża liczba całkowita (`BigInt`)

Uwagi

typeof null zwraca "object" – historyczny błąd JS.
typeof NaN zwraca "number"
typeof undefined zwraca "undefined"
typeof jest bezpieczny – nie wyrzuci błędu, nawet jeśli zmienna nie istnieje w kodzie (ale w trybie strict może być inaczej).

Typy nieprymitywne, nazywane też typami referencyjnymi lub obiektami. To zupełnie inna kategoria zmiennych.

Typ	Przykład	Opis

Object { name: "Ala", age: 25 } Zbiór par klucz-wartość, uniwersalna struktura danych

Array [1, 2, 3] Lista uporządkowanych wartości, dziedziczy po Object

Function function greet() {} Funkcja jest obiektem wywoływalnym

RegExp /abc/ Wyrażenia regularne

Map new Map() Kolekcja klucz-wartość, dowolny typ klucza

Set new Set([1,2,3]) Kolekcja unikalnych wartości

WeakMap / WeakSet new WeakMap() Słabe referencje do obiektów (garbage collector może je usuwać)

Error new Error("Błąd") Obiekty reprezentujące błędy

1)zmienna może być Array - czyli tablicą z danymi np. liczbami lub stringami

const = zmiennaArray [1,2,3]

tablice warto deklarować jako const - możemy ją modyfikować, ale nie nadpiszemy przez przypadek

tablica składa się z indexu (zawsze od zera), wartości i długości tabeli; porządkuje wartości

2)zmienna może być Object (worek na dane)- czyli obiektem składającym się z klucza i wartości, tu kolejność wyświetlania w konsoli będzie losowa, wartości mogą być dowolnego typu jak w tablicy (mogą to być też inne tablice i obiekty); każda modyfikacja w obiekcie będzie wyświetlała się we wszystkich wywołaniach obiektu w konsoli

żeby sięgnąć do wartości kolejnych obiektów używamy kropki:

console.log(zmiennaObject.nazwaklucza);

żeby sięgnąć do wartości tablicy z obiektu używamy [tu numer indexu]

const zmiennaObject = {
    imieUsera: "Jan",
    nazwiskoUsera: "Nowak",
    adres: {
        ulica: "Akacjowa",
        kodPocztowy: "01-195",
        miasto: "Radom"
    },
    role: ["user", "moderator"]
}

console.log(zmiennaObject);
console.log(zmiennaObject.adres.kodPocztowy);
console.log(zmiennaObject.role[0]);

można sprawdzić co jest zmienną:

console.log(typeof(zmiennaObject));

prosty sposób na dodanie nowego elementu do tablicy:

zmiennaObject.adres.nrDomu=17;

3) funkcje - zwracają wynik, wartość po użyciu return; posiadają miejsce na parametry lub argumenty(konkretne wartości) i miejsce na ciało funkcji - działanie z parametrami

function greet() {}

// Definicja funkcji
function dodaj(a, b) {
    let suma = a + b;  // dodawanie dwóch liczb
    return suma;       // zwrócenie wyniku
}

wywołanie funkcji wyświetli wynik: console.log(dodaj(a,b));

Funkcje zadeklarowane klasycznie (function nazwa() {}) są całkowicie hoistowane – można je wywołać przed deklaracją:

console.log(powitanie()); // "Cześć!" function powitanie() {
return "Cześć!";
}

Zmienne zadeklarowane przez let i const są również hoistowane, ale znajdują się w tzw. Temporal Dead Zone (TDZ).
Próba użycia ich przed deklaracją powoduje ReferenceError:

console.log(b); // ReferenceError let b = 10;

console.log(c); // ReferenceError const c = 20;

Hoisting dotyczy tylko deklaracji, nie przypisań wartości (dla zmiennych).
Najbezpieczniej jest zawsze deklarować zmienne przed użyciem (let i const).
Funkcje klasyczne można wywołać przed deklaracją, ale funkcje w postaci wyrażenia (np. const f = () => {}) już nie – to zwykła zmienna w TDZ.

CSS

JS cz.2