JavaScript 7.11
Wprowadzenie cd.
Okna dialogowe- bez HTML możemy mieć prosta interakcje z użytkownikiem, np. prototyp i nie chcemy od razu rozbudowana grafikę ale np. chcemy się skupić na logice tego programu. Typu chcesz dodać/usunąć bleble. Przydatne do pobierania prostych danych, potwierdzania akcji (np. logowania).
alert("Alert"); przedmiot został dodany, zamówienie zostało zapisane (ok), wysietla sie okienko na str z wiadomoscia ktora wpiszemy
let result=confirm("czy chcesz kontynuować?") ; consol.log(result) pyta użytkownika o jakieś rzeczy, poza (ok) jest też (anuluj). jak wybierzemy (ok) to jest wartość true, a jak anuluj to wartość false
const name = prompt("jak masz na imie?", "Gość"); consol.log(name); prompt może użytkownik coś sobie wpisać, jeśli użytkownik nie uzupełni promptu to ten gość to jest wartość domyślna, jeśli wybierzemy anuluj będzie null czyli brak wartości
W jaki sposób załadować plik javascript
- <script></script> w nagłówku <head></head>, ten skrypt bez body wykona się poprawnie np. alert, jeszcze przed załadowaniem całej str.
- jeśli mamy skrypt który ma się odwoływać do body to skrypt w head jest bez sensu, wtedy takie skrypty żeby dzialaly do body sugeruje sie dodawać przed zakonczeniem body <script></script></body>
- skrypt w zewnętrznym pliku, np. mamy kilka stron, podstron które korzystają z jednego skryptu np. czy użytkownik jest zalogowany, wiec żeby nie wklejać z każdym pliku i modyfikować osobno to możemy podać <script src="script.js"></script> (również na koniec body).
Można też załadować w nagłówku:
<script defer src="script.js"></script> DEFER - ŁADUJE SIE ASYNCHRONICZNIRE, ZAŁADUJE SIE DOPIERO JAK ZAŁADUJE SIE STRONA, bezpieczna metoda
<script async najszybsza metoda ale mniej bezpieczna podobne j.w
Zmienne
Zmienne w JS mogą zmieniać typ w trakcie wykonywania programu
Zmienne blokowe, czyli działają w bloku:
let - jeśli wartość się zmienia, mutowalne, czyli moze zmienic wartosc
const - stała do konca programu, nie mutowalna, nie mozna w nich zmieniac wartosci
Blokowy sposób stosowania zmiennych: tzn. mamy kawałek naszego kodu, np. instrukcje warunkową if
if(a>10){
}
wszystkie zmienne które zdefiniuje wewnątrz wg tego bloku będą dostępne tylko wewnątrz niego, więc jak mam inną funkcje lub chce wywołać zmienną poza tą funkcją to nie będzie działać. Jak w jeden funkcji podam let x=10+10 to w innej funkcji tez mogę sobie zdefiniować let x=1000 i one sa tylko dla danych funkcji
ZMIENNA GLOBALNA jeśli potrzebujemy mieć jakaś zmienna która będzie używana w kodzie uniwersalnie musimy wpisać ją na samej górze skryptu
Temporal dead zone - nie można używać zmiennej przed jej deklaracja
Wyjątkiem dla const są zmienne które nie są prymitywne, np. tablica array możemy zmieniać wartości ale nie możemy zmienić jej nazwy, jej typu
Naming convention
camelCase userName totalPrice
UPER CASE SNAKE CASE PI_BASE_URL DEFAULT_TIMEOUT_MS
Typy
Prymitywne
proste wartości, nie struktury danych
string - ciągi znaków, literały, template Hello ${name}; tekst
\n newline wszystko co postawimy za \n będzie w nowej lini
\t tab odstęp
\" tekst\" cudzysłów quote
number- specyficzny w JS bo zawiera w sobie różne np liczby integer 42, -10, zmienno przecinkowe float 3.14 -0.5 2.888999, specjalne takie jak: Infitinity, - infinity, NaN Not a Number (("text"* 2 ) skoro to nie jest wartość liczbowa to całość nie jest liczbą, jeden NaN=/= NaN)
Boolean true false, if, and or, warunki itd let age = 30; a>=18 - da nam true bo waunek jest spełniony( and &&, or ||, not !)
Undefined - brak wartości i jest nadawany automatycznie, jeśli stworze zmienna i nie przypisze do niej wartosci dostane w console.log undefined
Null- intencjonalny brak wartości, jeśli nie damy null to będzie undefined
BigInt(123) ma zarezerwować w pamięci miejsce na dużą liczbę nie mogą być mieszane ze zwykłymi numberami, dla BigInt nie ma metod Math tak jak dla number, wtedy trzeba samemu napisac taka funkcje.
Symbol const ID = Symbol("id"); definiuje nam unikalną wartość, unikalną zmienną, jest referencyjna można się do niej odwołać, a to ze jest unikalna to znaczy że powołanie dwóch takich symboli do życia nawet z pustym id nie powoduje ze równają się one, komunikat do JS stwórz unikalną wartość
funkcja typeof() można sprawdzić typ zmiennej przed jakaś operacja, czy ta zmienna ma na pewno typ number do mnożenia itd czy może nie jest string itd, ale typeof nie nadaj się do sprawdzania null bo null zwraca object i to jest błędne
Nieprymitywne
Array [] zmiennaArray = [1,2,3,4,5] w takiej strukturze jesteśmy w stanie zapisać literałami jakieś wartości - tworzy tablice. Elementami Array mogą być dowolne wartości prymitywne, sluzy do przechowywania uporzadkowanego zbioru elementów
Array jest specyficzny - tak długo jak nie próbujemy zmienić typu, dawać nowej wartości to wszystko jest ok, po prostu dodaje kolejna rzecz do tablicy, mozna zadeklarowac jako stała a i tak modyfikowac jej elementy
Obiekt Object{} jest mniej uporządkowany od array, obiekt przechowuje pary, które zawsze składają sie z nazwy i wartości, klucz + wartość
cont zmiennaObjects = {
nazwa: "wartość",
drugaNazwa: "drugawartość"
}
klucz jest potrzebny, możemy go podać na kilka sposobów -> console.log(zmiennaObject.nazwa KROPKA i po tej kropce możemy siegnac do tej wartości.
Profil użytkownika - przydzielić użytkownikowi kilka ról, to za pomocą object tworze tablice i tam wpisuje ze jest zwykłym userem ale tez jest i moderatorem
obiekty moga przechowywac inne obiekty, możemy dochodzic po kropce, mozemy tez dodawac nowe rzeczy zmiennaObjecy.adres.nrDomu=17 mozna dosłownie dopisac kawałek do obiketu i to działa
Funkcje
W JS maja słowo kluczowe function
function nazwaFunkcji (nazwa zgoda z naming convention) (){} w tej funkcji mozemy zrobic co chcemy: zdefiniować zmienne w zakresie blokowym, funkcja powinna cos zwracać - return
