Spis treści
Pomiędzy znacznikami: Jako lokalny plik o rozszerzeniu .js, dołączony za pomocą znacznika: Jako zewnętrzny plik dołączony za pomocą znacznika:W poprzednich wersjach HTML wymagany był atrybut type. Od HTML w wersji 5 już nie jest.
W przeglądarce CHROME naciśnij przycisk F12, bądź otwórz narzędzia dla programistów. Uruchamiamy naszą stronę internetową zawierającą przykładowy skrypt js: Polecenie console.log(“ ”) spowodue wypisanie w konsoli przeglądarki, zawartego pomiędzy nawiasami komunikatu. W przypadku, kiedy nasz kod zawiera błędy, ich lista zostanie wypisana i oznaczona kolorem czerwonym.
Zmienne języka JavaScript, podobnie, jak w innych językach programowania, są pojemnikami zdolnymi do przechowywania jakiś danych. Mogą być to zarówno liczby, ciągi znaków, jak i inne, bardziej skomplikowane struktury danych.
Aby móc wykorzystać zmienną, należy ją stworzyć – zadeklarować. Do wersji 5 języka JavaScript dokonywaliśmy tego za pomocą słówka var. Później wprowadzono jeszcze drugą możliwość – let, która różni się od var pewnymi subtelnościami, o których w temacie o zasięgu zmiennych.
Istnieje również możliwość zadeklarowania stałej. Jest to pojemnik, którego wartość nie będzie zmieniana w całym skrypcie. Do jego utworzenia służy słowo const.
Gdy podczas deklaracji zmiennej, od razu podajemy jej wartość, mówimy o definicji zmiennej. Przykłady deklaracji/definicji zmiennych:
Można dokonać deklaracji więcej niż jednej zmiennej naraz. Aby tego dokonać, kolejne nazwy zmiennych oddzielamy od siebie przecinkiem.
Nazwy zmiennych są case sensitive – charakteryzyją się rozróżnianiem wielkości liter. Zmienna o nazwie liczba oraz Liczba czy liCzba, to zupełnie różne zmienne. Nazwa zmiennej nie może się natomiast rozpoczynać od cyfry.
Zadeklarujmy sobie kilka zmiennych, przypiszmy niektórym wartości i sprawdźmy je w konsoli przeglądarki.
Jak widzimy liczba1 jest niezdefiniowana. Istnieje, ale nie została jej przypisana żadna konkretna wartość.
Podstawowe typy zmiennych języka JavaScript:
Napisz następujące skrypty :
Przedstawię kilka przykładów wykorzystania zmiennych w sktypcie i operacji na nich
W pierwszej linijce wypisujemy liczbę 10. Kolejna to wypisanie htmlowego znacznika przejścia do nowej linii. Linijka trzecia to deklaracja zmiennej o nazwie a i przypisanie jej wartości 10. 6 linia wydaje się podobna, jednak znaczniki ” sprawiają, że nie mamy w tym momencie do czynienia z liczbową wartością zmiennej b, ale z wartością tekstową. Próbując dodać do siebie wartości a oraz b w kolejnej linii nie dostaniemy oczekiwanego wyniku 20, ale 1010, gdyż + połączył nam liczbę 10 z ciągiem znaków o tej samej wartości (uwaga trudne słogo: konkatenacja – łączenie ze sobą wyrażeń). W linii 10 wykorzystujemy funkcję parseInt języka javascript, która zamienia nam ciąg znaków w liczbę całkowitą (int – integer – liczba całkowita).
Rezultat działania skryptu:
Deklaracja trzech zmiennych z przypisaniem im wartości tekstowych. Funkcję parseInt już znamy. parseFloat zamienia nam wartość tekstową w liczbę zmiennoprzecinkową (float). Również pomnożenie (*) wartości przez 1 sprawiło, że mamy do czynienia z liczbą. Suma trzech wartości początkowo tekstowych daje nam zmiennoprzecinkowy wynik:
Kolejne operacje sumy, różnicy, iloczynu i ilorazu na zmiennych całkowitoliczbowych a i b. Ostatnie z przeprowadzonych działań to reszta z dzielenia (%, modulo). Reszta z dzielenia całkowitego 4/3 wynosi 1.
Kolejny przykład jest zastosowaniem inkrementacji (++) – zwiększania wartości o 1. Pierwszy zapis (a++) powoduje wypisanie pierwotnej wartości a, a następnie zwiększenie jej o 1 (wypisane 4, zwiększenie do 5). Następnie ++a wykonuje te czynności w kolejności odwrotnej (najpierw zwiększenie wartości a do 6, następnie wypisanie jej na ekran).
Pierwsza linijka to stadardowe dzielenie wartości a przez b. W trzeciej mamy podłogę (floor) z dzielenia, czyli zaokrąglenie wyniku do najbliższej całkowitej wartości w dół. Kolejne zaokrąglenie jest do bliższej wartości całkowitej – w dół lub w górę. Ceil zaokrągla nam do najbliższej całkowitej wartości w górę. W ramach ciekawostki macie również dwukrotne użycie tyldy w celu zaokrąglenia liczby. ~ jest operatorem bitowym i zwraca nam dla liczby n wartość -(n+1).
Podniesienie a do potęgi b (pow(a,b), 43) oraz pierwiastek kwadratowy z a.
Funkcja random() daje nam pseudolosową liczbę z przedziału od 0 do 1. Dwie ostatnie linie mnożą otrzymaną wartość losową razy 100 i zaokrąglają wynik, dając nam tym samym losową liczbę całkowitą z przedziału od 0 do 100.
Funkcja typeof zwraca nam typ przekazywanej jej jako parametr wejściowy zmiennej. Kolejno: liczba, ciąg znaków, liczba, zmienna logiczna (true/false, prawda/fałsz).
Operacje na wartościach logicznych. && to i / and, || to lub / or. Rezultatem działania && jeśli będzie true tylko jeżeli obie strony będą prawdziwe. Lub da wartość prawdziwą jeśli którakoliwiek strona będzie prawdziwa…
Przykład wykorzystania operatorów logicznych. Ostatnia linia zawiera negację (!) – wynik przeciwny.
Kolejne dwa przykłady. Pierwszy przedstawia funkcję obliczającą wartość absolutną z liczby, drugi sprawdza warunek, następnie zwraca wartość pierwszą jeśli warunek był prawdziwy lub w przeciwnym przypadku drugą (warunek?wartość1:wartość2).
Za pomocą metody prompt() wczytaj od użytkownika wartość liczby, zadbaj, aby liczba ta była całkowita, a następnie wypisz na ekran:
String jest typem danych służącym do przechowywania ciągu znaków. Ciąg znaków zapisujemy w cudzysłowia i przypisujemy do zmiennej za pomocą znaku przypisania (=).
Ciąg znaków działa jak tablica przechowująca poszczególne znaki w kolejnych swoich komórkach. Zatem jak w przypadku zwykłych tablic, możemy użyć na ciągu znaków własności length, aby sprawdzić długość ciągu znaków.
Przykład definicji ciągu znaków oraz wypisania jego długości na ekran:
Ciągi znaków można łączyć ze sobą, w jeden łańcuch. Jest to tzw. konkatenacja. Dokonujemy tego za pomocą symbolu +.
Przykład konkatenacji. Łączymy ze sobą ciąg znaków zawarty w zmiennej tekst oraz dodatkowy łańcuch zawarty w apostrofach. Wynik naszego działania wypisujemy w konsoli przeglądarki.
Aby wielokrotnie dopisać jakieś powtarzalne elementy do naszego łańcucha znaków możemy użyć mechanizmu pętli. W poniższym przykładzie trzykrotnie dopiszemy do początkowo pustej zmiennej zdanie zawartość zmiennej slowo.
Pisałem wcześniej, że łańcuch znaków, to tak naprawdę tablica zawierająca osobno poszczególne znaki. Możemy się do nich odwołać wykorzystując metodę charAt(indeks), gdzie indeks jest numerem danego znaku w ciągu znaków, bądź w sposób typowo tablicowy – podając wartość indeksu wewnątrz nawiasów kwadratowych. Pamiętajmy, że numeracja rozpoczyna się od 0. Zatem poniższym przykładzie literka W rozpoczynająca zdanie ze zmiennej tekst będzie miała indeks 0, kolejna litera (s) indeks 1, i tak dalej.
Odwołując się do konkretnego indeksu, możemy używać działań matematycznych, np. odwołać się do indeksu o numerze 1+2 (3), bądź do indeksu tekst.length – x, gdzie x będzie numerem znaku licząc od końca ciągu.
Każdy znak posiada swój unikatowy numer, kod w siedmiobitowym systemie ASCII. Aby odczytać kod ASCII danego znaku, wykorzystamy metodę charCodeAt(). Dowiemy się, że litera W ma kod87, natomiast i 105. Odwrotną pracę, czyli zamianę kodu na znak dokona metoda lasy String, String.fromCharCode(x), gdzie x to kod znaku.
Wykorzystując dwie kolejne metody, możemy zamienić litery w ciągu znaków na wielkie lub małe. I tak odpowiednio: toUpperCase zamieni nam wszystkie litery w ciągu na wielkie, natomiast toLowerCase, na małe.
Możemy wykorzystać znajomość powyższych metod i zamienić w zdaniu jedynie pierwszą literę na wielką. W tym celu wybieramy pierwszą literę (charAt(0)), zamieniamy ją na wielką (toUpperCase), a następnie dopisujemy resztę zawartości zmiennej, pozbawioną pierwszej litery. Wykorzystujemy do tego metodę .slice z parametrem 1, pozostawieniem ciągu znaków od znaku z indeksem 1 (bez 0, pierwszej litery).
Sprawdzimy teraz, na jakiej pozycji w tekście znajduje się poszukiwany przez nas ciąg znaków. Wykorzystamy do tego metodę indexOf(“”) zwracającą indeks pierwszej litery poszukiwanego ciągu, jeśli takowy został odnaleziony, bądź -1 jeśli go nie ma.
Metoda lastIndexOf(“”) zwraca natomiast indeks pierwszej litery ostatniego znalezionego szukanego ciągu (jeśli występuje wielokrotnie).
Czas wyciąć określony fragment tekstu. Wykorzystamy do tego metodę substr(start, długość), gdzie start jest indeksem litery, od której rozpoczniemy wycinany fragment, natomiast długość mówi nam ile znaków wycinamy.
Inną opcją na wycięcie fragmentu ciągu znaków jest metoda substring(początek, koniec), gdzie podajemy indeksy znaku początkowego i końcowego wycinanego tekstu. Jeśli wartości początku i końca wpiszemy odwrotnie, to zostaną one automatycznie zamienione miejscami. Natomiast jeśli nie podamy wartości końcowej, zostanie pobrany tekst od podanego indeksu znaku, aż do końca.
Kolejną możliwością wycinania tekstu jest metoda slice(początek, koniec), której działanie jest prawie identyczne, jak substring(). Jednak w tym przypadku, jeśli wartości start i stop podamy odwrotnie, nie zostaną one automatycznie zamienione i uzyskamy pusty ciąg znaków. Natomiast jeśli podamy wartość ujemną parametru start lub koniec, będziemy go liczyć od końca ciągu znaków.
Tekst możemy również podzielić na elementy. Będą one rozdzielone na fragmenty oddzielone przez określony znak lub ciąg znaków. I tak na przykład możemy podzielić akapit na zdania, czy jak w poniższym przykładzie, zdanie złożone na poszczególne fragmenty, za pomocą symbolu przecinka. Wykorzystamy również mechanizm pętli, o którym wkrótce opowiemy sobie więcej. Wykorzystamy metodę split(“element_dzielący”).
Instrukcja warunkowa służy do ograniczenia wykonania jakiś czynności do momentu, kiedy spełnione zostaną podane warunki.
Podstawowa budowa instrukcji warunkowej:
Przeanalizujmy kolejny przykład:
'+c);
Ano dlatego, że bloku instrukcji if nie zamknęliśmy w klamry. Bez oznaczenia bloku instrukcji zasięgiem działania instrukcji warunkowej zostanie objęta tylko pierwsza instrukcja.
Wynika stąd, że zależna od wielkości a była tylko zmiana wartości zmiennej b. Jako, że a nie jest >5, instrukcja zwiększająca b o 1 nie wykonała się. Zwiększenie C jest już poza blokiem instrukcji warunkowej i wykona się zawsze.
Zmodyfikujmy powyższy przykład dodając klamry.
'+c);
Prosty przykład pobrania od wartości wartości zmiennej całkowitoliczbowej i sprawdzenie czy jest ona parzysta czy nieparzysta.
Zawarte w powyższym przykładzie dwa bloki instrukcji warunkowych możemy zastąpić blokiem else (w przeciwnym razie).
Moglibyśmy to samo zawrzeć w jednej instrukcji warunkowej:
Utwórz następujące skrypty:
Tym razem będziemy wielokrotnie wykonywali te same czynności. A w zasadzie wykona je za nas struktura zwana pętlą. Omówimy sobie budowę pętli FOR, WHILE oraz DO WHILE
PĘTLA FOR
Budowa pętli for:
Napisz skrypty:
Zdarzenia to rzeczy, które wykonują się na elementach HTML. Przykładowo kliknięcie przez użytkownika przycisku wywołuje zdarzenie click, najechanie myszą na obrazek – mouseover, wybranie elementu – focus, wysłanie formularza – submit, naciśnięcie przycisku na klawiaturze – keydown.
Poniżej tabela z listą dostępnych rodzajów zdarzeń:
Rodzaj zdarzeni | Opis |
click | element kliknięty |
change | opuszczamy element, który zmienił zawartość |
mouseover | kursor na elemencie |
mouseout | kursor opuścił element |
mouseenter | kursor wjechał na element |
mouseleave | kursor zjechał z elementu |
dblclick | podwójne kliknięcie elementu |
submit | wysłanie formularza |
resize | zmiana wielkości okna |
focus | element został wybrany |
blur | element przestał być aktywny |
keydown | naciśnięto klawisz na klawiaturze |
keyup | puszczono klawisz |
input | wciśnięty jest klawisz |
load | obiekt został załadowany |
contextmenu | wciśnięto prawy przycisk myszy i pojawiło się menu kontekstowe |
wheel | kręcone jest koło myszy |
select | zaznaczono zawartość obiektu |
unload | strona jest opuszczana |
animationstart | rozpoczyna się animacja |
animationend | kończy się animacja |
transitionstart | rozpoczyna się efekt przejścia |
transitionend | koniec efektu przejścia |
transitionrun | trwa efekt przejścia |
, możemy również skorzystać ze zdarzenia DOMContentLoaded.
Zwraca pierwszy napotkany w kodzie strony element spełniający kryteria zawarte w nawiasach okrągłych.
Przykładowo może to być poszukiwanie paragrafu: