JS - lekcja 5 (07.11.2025)

TYPY OKIENEK
Do tworzenia wyskakujących okienek (notyfikacji), stosuje się alert(wiadomość). Wyświetla wiadomość
Confirm(wiadomosc) - pyta użytkownika o to, co jest w wiadomości.

prompt(pytanie, odpowiedź jako wartość domyślna) - zadaje pytanie użytkownikowi i oczekuje od niego odpowiedzi, jeśli nie odpowie - to wyświetli się wartość domyślna. Jeśli kliknie anuluj - program otrzymuje wartość null (czyli pustą)

Jeśli skrypt znajduje się przed zawartością body, to wszystko będzie działać, jeśli są w nim zawarte JEDYNIE elementy, które nie odnoszą się do reszty elementów tworzonych w body, dlatego radzi się tworzyć skrypty na samym końcu body. Można też użyć zewnętrznych plików skryptowych:

<script src="plik.js"></script>

jeśli napisze się:

<script src="nazwaFolderu/plik.js"></script>

to po najechaniu myszką na skrót pojawi się link, który po kliknięciu otwiera ten sam plik, który został podany w src - jeśli nie istnieje to vsc proponuje stworzenie go.

Można tworzyć skrypt w nagłówku, ale trzeba dodać tag defer src, on się załaduje dopiero PO załadowaniu całego htmla. Jeśli da się słowo async - skrypt będzie załadowywać się asynchronicznie do dokumentu htmla (jest to najszybsza metoda, ale także najbardziej zdradliwa).

Zmienne przechowują różne typy danych: liczby, tekst, true i false (boole). Mogą się zmieniać w pamięci komputera w zależności od interakcji z nią. Zmienna mogą zmieniać typ w trakcie wykonywania programu. Nie używa się już słowa VAR do tworzenia zmiennych, teraz używa się let i const, które rozwiązują wiele programistycznych problemów, jakie var mógł tworzyć. Const - kiedy wartości mają się nie zmieniać, a let - gdy wartości mają się zmieniać.

Dane mogą być także w schematach blokowych - operacje wykonują się tylko w blokach np. if, pętle. Nawet jeśli istnieją dwie zmienne o takich samych nazwach, ale jedna jest w schemacie blokowym, a druga poza to one są rozróżniane jako dwie różne. Dlatego var jest złe - on by tego nie rozróżnił.

Zmienne globalne - zmienne te powinny być tworzone na samej górze skryptu, są one dostępne dla całego skryptu poniżej (nawet schematów blokowych). Zmienne lokalne to takie, które są tworzone w schematach blokowych i "żyją" tylko w danych blokach, po wyjściu z bloku nie można już z nich korzystać.

Dla let można zadeklarować zmienne na początku, a później dodać wartość. Dla const jest to niemożliwe, ponieważ są niezmienne - wartość musi być ustalona podczas deklaracji.

Zmienne mogą być wypadkowymi innych zmiennych (na przykład jako wynik dodawania wartości dwóch innych zmiennych)

w alert może być tylko jeden ciąg znaków, oznacza to, że jeśli chciałabym użyć napisu i potem wyniku to oddzielam je plusem (w console.log jest to przecinek)

Notacja camelCase:
let userName;

Notacja UPPER CASE SNAKE:
PI_BASE_URL

Notacja UPPER CASE SNAKE oznacza stałe w kodzie, ale w JS zazwyczaj jest rekomendowane używanie camelCase.

Zmienna typu boolean ma tylko dwie wartości - True i False.
JavaScript nie pozwala używać nazw jako zmienne, które są używane w samym języku jako funkcja.

By używać pojedynczych liter jako nazw w kodzie, zaleca się ich używanie jedynie podczas pętli.

Jedna zmienna może być określana jako różne typy w kodzie, ale jest to odradzane.

Prymitywne typy zmiennych:
string - określa ciąg znaków, np:
let zmiennaString = "aaaaaaaa";

template - określa templatkę, tekst + zmienna w nim zawarta
zmiennaTemplate = "Hello ${name}";

Znaki jakie możemy wstawić w tekście:
\n oznacza nową linię, wszystko co zostanie postawione po tym znaku, pojawi się w nowej linii
\t oznacza odstęp (większy odstęp przed dalszym tekstem)
\"tekst\" - jeśli chcemy zacytować coś w tekście

const bazowyString = "        Bardzo lubię JavaScript!            ";

/* pokazuje ilość znaków w napisie */
lengthString = bazowyString.length;
console.log("Długość: ", lengthString);

/* wszystkie litery stają się duże */
upperString = bazowyString.toUpperCase();
console.log(upperString);

/* wszystkie litery stają się małe */
lowerString = bazowyString.toLowerCase();
console.log(lowerString);

/* usuwa puste znaki (spacje) w miejscach niepotrzebnych */
trimString = bazowyString.trim();
console.log(bazowyString, " -> ", trimString);

/* pokazuje napis z przedziału od 4 pozycji do 2 */
sliceString = bazowyString.slice(4, 2);
console.log(sliceString);

/* pokazuje napis od 4 pozycji i tylko 2 znaki */
subString = bazowyString.substring(4,2);
console.log(subString);

/* Sprawdza, miejsce od którego zaczyna się podane słowo/znak */
indexString = bazowyString.indexOf("JavaScript!");
console.log("W którym miejscu pojawia się słowo JavaScript! ?", indexString);

/* Sprawdza, czy w danym tekście pojawia się dany ciąg znaków */
includeString = bazowyString.includes("lubię");
console.log("Czy istnieje \"lubię\": ?", includeString);

/* Sprawdza czy zdanie zaczyna się od podanego ciągu znaków*/
startString = bazowyString.startsWith("Bardzo");
console.log("Czy zdanie zaczyna się od \"Bardzo\" ? :", startString);

/* Sprawdza czy dane zdanie kończy się na podanym znaku */
endString = bazowyString.endsWith("!");
console.log("Czy zdanie kończy się na \"!\" ? :", endString);

/* Sprawdza, jakie ciągi znaków są oddzielone danym znakiem (w tym przypadku spacją) */
splitString = bazowyString.split(" ");
console.log("Jakie słowa są rodzielone spacją? :", splitString);

/* Zamienia wybrany ciąg znaków na nowy */
replaceString = bazowyString.replace("JavaScript", "kotki");
console.log(replaceString);

/* Powtarza ciąg znaków, tyle razy ile się poda w argumencie */
repeatString = bazowyString.repeat(2)
console.log(repeatString);

Typy znaków (liczby):
integer (liczba całkowita) - 2,6,-10, 0, 2456
float (liczby zmiennoprzecinkowe) - 2.14; -0.5; 1.4636
specials (specjalne) - Infinity (nieskończoność), -Infinity (-nieskończoność), NaN (pojawia się, gdy JavaScript nie rozumie co ma zrobić, "Not a Number"

NaN nie są sobie równe!
By sprawdzić czy coś nie jest numerem:
Number.isNaN(zmienna);

Metody parseInt/parseFloat potrafią wyciągnąć liczby z napisów, jeśli są one oczywiste (tylko gdy napisy zaczynają się od numerów):
parseInt(123aaa) -> 123

let intNumber = 5;
let floatNumber = 0.74567;
let floatNumber2 = 0.34567;
let negNumber = -23;

/* Zwraca liczbę z dwoma miejscami po przecinku (zaokrągla, jeśli jest taka potrzeba) */
console.log(intNumber.toFixed(2), " ", floatNumber.toFixed(2));
/* Zwraca liczbę składającą się z 4 cyfr znaczących */
console.log(intNumber.toPrecision(4), " ", floatNumber.toPrecision(4));
/* Zapisuje liczbę w notacji naukowej, jeśli poda się argument to tyle cyfr będzie po przecinku */
console.log(intNumber.toExponential(2), " ", floatNumber.toExponential());
/* Zaokrągla liczbę do liczby całkowitej, standardowe zasady zaokrąglania */
console.log(Math.round(intNumber), " ", Math.round(floatNumber));
/* zaokrągla liczbę w dół */
console.log(Math.floor(intNumber), " ", Math.floor(floatNumber));
/* zaokrągla liczbę w górę */
console.log(Math.ceil(floatNumber), " ", Math.ceil(floatNumber2));
/* bierze wartość bezwględną z liczby */
console.log(Math.abs(intNumber), " ", Math.abs(negNumber));
/* szuka najmniejszą liczbę z podanych liczb */
console.log(Math.min(intNumber, floatNumber, floatNumber2, negNumber));
/* szuka największej liczby z podanych */
console.log(Math.max(intNumber, floatNumber, floatNumber2, negNumber));
/* losuje liczbę z przedziału od 0 do 1 */
console.log(Math.random());
/* jeśli chce się otrzymać większe liczby to wystarczy pomnożyć zakres o odpowiednią 10^x i zaokrąglić */
console.log(Math.round(Math.random()*10), " ", Math.round(Math.random()*100), " ", Math.round(Math.random()*1000));
/* potęguje liczbę do podanego argumentu (pierwszy argument to liczba, którą się chce spotęgować a drugi to potęga) */
console.log(Math.pow(intNumber,2), " ", Math.pow(floatNumber,4));

Typ boolean przyjmuje wartość True lub False.
! - zaprzecza
jeśli zmienna nie ma przydzielonej wartości to wyskoczy w logach "undefined" (osobny typ zmiennej). Można nadać zmiennej wartość Null (osobny typ zmiennej) - intencjonalne nadanie braku wartości zmiennej.

funkcja typeof(zmienna) pokazuje jaki typ ma zmienna, Null jest obiektem

TYP BigInt
maksymalna wartość jaką może osiągnąć liczba to 2^53 -1, powyżej tego zakresu korzysta się z notacji BigInt:
123n lub BigInt(123), informuje js, że musi zarezerwować miejsca na dużą liczbę
nie może być mieszane z normalnymi liczbami(trzeba "normalne" liczby najpierw przekonwertować na BigInty)
nie można dla BigIntów używać gotowych metod Math, trzeba samemu napisać te metody

TYP symbol:
const ID = Symbol("id");
tworzy unikalną zmienną, do której można się odwołać. Symbol() nie jest równy innemu Symbol().

Struktura Array (tablica znaków):
const zmiennaArray = [1,2,3,4,5,6]
tablice mogą przechowywać dowolne typy wartości, można je mieszać w jednej tablicy
Jeśli tablica jest const to MOŻNA zmieniać jej wartości, nie można jedynie zmieniać typu tablicy,
zmiennaArray[0] = 7, zmieni wartość pierwszego elementu na 7.
W konsoli pokazuje się długość tabeli oraz kolejność elementów w niej (kolejność zaczyna się od 0).

Struktura OBIEKT:

Obiekt przechowuje pary kluczów i wartości.

const zmiennaObj = {
  nazwa1: "wartość1",
  nazwa2: "wartość2",
};

const zmiennaObj = {
	nazwa1: "wartość1",
	nazwa2: "wartość2",
	nazwa3: {
		nazwa4: "wartość4",
		nazwa5: "wartość5"
	},
}

żeby dodać klucz z wartością do obiektu to deklaruje się nowy element, tak jak poniżej:
zmiennaObj.nazwa3.nazwa6 = "wartość6";

FUNKCJE
słowo kluczowe (function), nazwa, ()

function nazwaFunkcji(){
	let zmienna1 = 5;
	let zmienna2 = 7;
	return (zmienna1+zmienna2)
}

powyższa funkcja zwraca wynik dodawania po jej wywołaniu, jeśli doda się do nawiasów jakieś zmienne to są one parametrami, które są wykorzystywane w środku funkcji. Parametry są podawane podczas wywołania funkcji:

function nazwaFunkcji(zmienna1, zmienna2){
	let wynik = zmienna1 + zmienna2
	return (wynik)
}
console.log(nazwaFunkcji(1,2));