JavaScript podstawy
Okna dialogowe
służą do komunikacji i interakcji z użytkownikiem. Przykłady:
1. Najprostsze okno dialogowe to alert() wyświetlający konkretną wiadomość:
<script>
alert("Alert w JS");
</script>
Po wywołaniu metody alert() zostaje wyświetlone okienko z komunikatem i przyciskiem OK. Po kliknięciu przycisku nie zostaje zwrócona żadna wartość, tak więc okno to nadaje się tylko do informowania użytkownika o pewnych zdarzeniach.
- Drugi typ to confirm(), gdzie użytkownik jest pytany/proszony o potwierdzenie:
<script>
let result=confirm("Czy na pewno chcesz kontynuuować?");
console.log(result);
</script>
Okienko confirm służy do tego, aby użytkownik coś potwierdził. Do funkcji confirm() przekazywany jest tylko jeden parametr zawierający treść jaka będzie wyświetlana w okienku. Okienko to wyświetla dwa guziki: OK i ANULUJ.
W zależności od tego który guzik został kliknięty przez użytkownika, metoda ta zwróci true lub false.
- Okienko typu prompt() - w tym przypadku prosimy użytkownika o napisanie jakiejś odpowiedzi:
<script>
const name = prompt("Jak masz na imię?", "Gość");
console.log(name);
</script>
Do funkcji prompt przekazujemy dwa parametry - jeden jest treścią, która będzie wyświetlana w okienku, a drugi jest domyślną wartością, która będzie wyświetlana w polu, w które wpisujemy tekst. Jeżeli użytkownik kliknie [ANULUJ], zostanie zwrócona wartość null (brak zdefiniowanej wartości), w przeciwnym razie zostanie zwrócona wartość wpisana w pole okienka.
Jak załadować plik JavaScript?
Umiejscowienie skryptu ma pewne wymagania.
1. Możemy skrypt umieścić w nagłówku HTML. Jeśli to jest skrypt, który nie ma żadnych interakcji z <body> to zadziała poprawnie. Ale gdyby miał jednak mieć jakieś interakcje z <body> (odczytywać, identyfikować, reagować), to nie może się znajdować w nagłówku, nie zadziała, wyrzuci błąd bo ten element jeszcze nie istnieje na tej "wysokości" dokumentu".
2. Jeśli mamy skrypty, które mają się odwoływać do jakichś wartości w HTML, to najlepiej je umiejscawiać na końcu taga <body>.
3. Trzeci sposób ładowania skrypt ładowany z zewnętrznego pliku .js
<script src="script.js"> </script>
Zmienne
Zmienne to coś w rodzaju "pudełek", w których pod nazwami możemy przechowywać różne rzeczy takie jak liczby, teksty, obiekty itp. W JS zmienne mogą zmieniać typ w trakcie wykonywania programu.
Aby zadeklarować zmienną, powinniśmy posłużyć się jednym ze słów kluczowych: let i const.
Const - domyślnie kiedy wartości mają się nie zmieniać (są NIEMUTOWALNE)
Let - gdy wartości mają się zmieniać (są MUTOWALNE)
Pojedynczy blok instrukcji warunkowej:
<script>
if(a>10) {
let zmiennaA = 0;
const zmiennaB = 10;
}
</script>
Pro Tip - deklaruj zmienne na początku skryptu!
Temporal Dead Zone - jeśli odwołasz się do zmiennej var przed jej deklaracją, jest ona niezdefiniowana. Ale jeśli zrobisz to samo z let i const, zgłoszą błąd ReferenceError. TDZ to termin opisujący stan, w którym zmienne są nieosiągalne. Znajdują się w zakresie, ale nie są zadeklarowane. Zmienne let i const istnieją w TDZ od początku zakresu je obejmującego do momentu ich zadeklarowania. Można również powiedzieć, że zmienne istnieją w TDZ od miejsca, w którym zostają powiązane (gdy zmienna zostaje powiązana z zakresem, w którym się znajduje), aż do momentu ich zadeklarowania (gdy w pamięci zostaje zarezerwowana nazwa dla tej zmiennej).
Jak nazywać zmienne i stałe? Notacje:
- camelCase ("userName", "totalPrice", "isUserLoggedIn") zwykle używane w JS do nazw zmiennych. Zalecane!
- UPPER_CASE_SNAKE_CASE - zwykle używane do nazywania stałych w JS
- PascalCase ("UserName", "TotalPrice", "IsUserLoggedIn")
W JavaScript konwencją jest stosowanie notacji camelCase do nazw zmiennych, gdzie pierwsze słowo zaczyna się od małej litery, a każde kolejne słowo pisane jest wielką literą. Ta konwencja pomaga w utrzymaniu spójności i czytelności kodu.
Nazwy zmiennych powinny jasno opisywać, co zmienna przechowuje lub do czego służy. Dzięki temu kod sam się dokumentuje przez co jest łatwiejszy do zrozumienia.
Nazwy zmiennych nie mogą zaczynać się od cyfr, choć mogą zawierać cyfry po pierwszym znaku. Ponadto, unikaj używania znaków specjalnych, z wyjątkiem dolara ($) i podkreślenia (_), które są dozwolone.
JavaScript posiada słowa kluczowe i zarezerwowane, których nie można używać jako nazw zmiennych, np. let, if, return, functionitd. Używanie tych słów może prowadzić do błędów składniowych.
Stosowanie angielskich słów jako nazw zmiennych jest powszechną praktyką w programowaniu. Ułatwia to współpracę z programistami z różnych krajów oraz przestrzeganie międzynarodowych standardów.
Chociaż nazwy zmiennych powinny być opisowe, unikaj tworzenia zbyt długich nazw, które mogą utrudniać czytanie kodu. Staraj się znaleźć równowagę między zwięzłością a opisowością.
Zmienne w JavaScript możemy podzielić na PRYMITYWNE i NIEPRYMITYWNE (REFERENCYJNE).
Zmienne prymitywne
- Przechowują bezpośrednio wartość (np. tekst, liczbę,
true/false). - Są to podstawowe, proste typy danych.
- Nie mają metod ani właściwości (z wyjątkiem tymczasowego zamieniania na obiekty przez JavaScript podczas wywoływania tych metod).
Przykłady typów prymitywnych:
string(ciąg znaków, np."hello")number(liczba, np. 42)boolean(wartość logiczna,truelubfalse)undefined(niezdefiniowana)null(brak wartości)symbolbigint
Zmienne nieprymitywne (referencyjne)
- Przechowują referencję (odniesienie) do obiektu w pamięci.
- Są to złożone typy danych, które mogą przechowywać wiele wartości lub inną złożoną strukturę.
- Mogą posiadać metody i właściwości.
Przykłady typów nieprymitywnych:
object(obiekt)array(tablica)function(funkcja)
---------------------------------------------------------------------------------
Typy liczbowe:
integer - liczby całkowite (4, 43, 0, -19)
float - również ułamki (3.14, -0.5, 2.89956)
specials - Infinity, -Infinity, Nan
NaN - Not a Number!
console.log(Number.isNaN(value)); - do sprawdzania, czy wartości pobierane od użytkowników są lub nie są NaN-em.
parseInt(value); na przykład: parseInt("123px");
parseFloat(value); na przykład: parseFloat("3.14abc");
Metody pozwalają na wyciągnięcie wartości numerycznej jeśli jest ona oczywista (tak jak w powyższych przypadkach, metody wyciągną odpowiednio 123 i 3.14). Gdyby sprawdzane wyrażenia zaczynały się od liter to parse już nie będzie w stanie wyciągnąć wartości numerycznej.
Boolean:
Boolean przyjmuje tylko dwie wartości: True lub False
Noty do warunków:
and --> &&
or --> ||
not --> !
Przykład:
let isLogged = true;
console.log(!isLogged); --> da nam wynik FALSE
Typ zmiennej: Undefined -
Typ zmiennej: null - intencjonalny brak wartości
Typ zmiennej: BigInt - rezerwacja miejsca dla bardzo dużej liczby. BigInt nie można mieszać z mniejszymi integerami czy floatami.
Mamy do dyspozycji wiele gotowych metod matematycznych do wykorzystania w JAvaScript.
!!!ALE!!! Dla BigInt nie ma takich funkcji.
Typ zmiennej: Symbol -
ASYNC, DEFER i DOM !!!
HOISTING
NIE-PRYMITYWNE STRUKTURY DANYCH
Zmienna Array - struktura zwana "tablicą". W niej możemy zapisać literałami jakieś wartości.
const zmiennaArray = [1,2,3,4,5];
Tablica może przechowywać dowolne typy wartości (prymitywne jak liczmy, stringi, jak i nie-prymitywne (inne tablice, etc).
Możemy mieszać typy zmiennych w pojedynczej tablicy.
UWAGA! Można podmieniać konkretne elementy w tablicy nawet jeśli została ona zadeklarowana jako const.
Length - właściwość wbudowana automatycznie, która podaje liczbę elementów w tabeli (jej długość).
Obiekty - to struktury danych, które pozwalają przechowywać pary klucz-wartość (takie "kontenerki"). Są fundamentem programowania obiektowego w JavaScript.
W skład obiektu mogą wchodzić zmienne prymitywne, tablice, a nawet inne obiekty.
const zmiennaObject = {
nazwa: "wartość",
drugaNazwa: "drugaWartość"
}
console.log (zmiennaObject);
console.log (zmiennaObject.nazwa);
Operacje na obiektach - można dodawać nowe pary klucz:wartość do obiektu:
Typ zmiennej Funkcja
Funkcje to zbiór zgrupowanych instrukcji, które możemy odpalać poprzez podanie ich nazwy. Każda taka funkcja po wywołaniu wykonuje swój wewnętrzny kod, a następnie może zwrócić nam jakąś wartość.
function nazwaFunkcji(parametry) {
// ciało funkcji
// instrukcje do wykonania
return wartośćZwracana;
}Ogólna deklaracja funkcji ma postać:
function nazwaFunkcji(nr) {
const result = nr * nr; //możemy też po prostu zwrócić nr * nr
return result;
}
//Po stworzeniu funkcji wystarczy ją wywołać poprzez podanie jej nazwy:
nazwaFunkcji(2); //4
nazwaFunkcji(3); //9
nazwaFunkcji(5); //25Funkcję można traktować jak swego rodzaju podprogramy, które w każdej chwili możemy odpalić by wykonać dany kod. Takie funkcje możesz spokojnie trzymać w oddzielnym pliku, który potem będziesz dołączać do wybranych stron.
function nazwaFunkcji() {
let zmienna1 = 5;
let zmienna2 = 7;
return(zmienna1+zmienna2);
}
console.log(nazwaFunkcji());
Funkcja może być wywołana z parametrami.
