javascript

react js

Stan komponentu – przykład kalkulatora

Jeśli odrobiłeś poprzednią lekcję to teraz zrobimy prosty kalkulator i utrwalimy wiedzę związaną ze stanami komponentów. Analogiczny kalkulator, ale w języku JavaScript opisałem w tutorialu: „KALKULATOR W JS”. Porównaj oba rozwiązania 🙂 Gotowy kod:

Wyjaśnienie: W konstruktorze ustawiamy początkowe stany (state) dla pól tekstowych (input type=”text”): a, b i result. Wiążemy (bind) funkcje (handleChangeA, …

Stan komponentu – przykład kalkulatora Read More »

react js

STATE – wewnętrzny stan komponentu

State służy do przechowywania wewnętrznego stanu komponentu, np: ilość kliknięć w dany element na stronie. Stan jest aktualizowany w czasie rzeczywistym za pomocą metody setState(). Aby to zrozumieć zobacz prosty przykład, który przygotowałem. W przykładzie – użytkownik wprowadza treść do pola tekstowego input ; łańcuch znaków jest „na bieżąco” przepisywany do paragrafu <p></p>, a po …

STATE – wewnętrzny stan komponentu Read More »

react js

Klasy jako komponenty

W poprzednim rozdziale „WPROWADZENIE DO REACT JS” opisałem podstawy biblioteki, m.in budowę komponentów funkcyjnych i argumenty przekazywane do nich. Teraz zajmiemy się klasami, są one ciekawsze 🙂 i posiadają większe możliwości, np: definiowanie wewnętrznego stanu komponentu, funkcji pomocniczych, pozwalają tworzyć interakcje, reagować na zdarzenia itd. Przykład:

Klasa Hello dziedziczy (extends) po React.component. Funkcja render() …

Klasy jako komponenty Read More »

kalkulator javascript

Kalkulator w JS

Przykład prostego kalkulatora z podstawowymi operacjami matematycznymi: dodawanie, odejmowanie, mnożenie i dzielenie. Rozwiązanie:

Formularz składa się z trzech pól tekstowych (<input type=”text” />): a i b – do wprowadzania wartości liczbowych oraz result , w którym wyświetlane są wyniki operacji matematycznych. Każdy przycisk (button) reaguje na zdarzenie onClick (kliknięcie), które uruchamia funkcję Calculator. Funkcja …

Kalkulator w JS Read More »

wydruk zawartości strony, diva

Wydruk zawartości DIVa

Najprostsze i najszybsze rozwiązanie, to użycie gotowej funkcji języka JavaScript: print(), która uruchomi okienko kreatora wydruku. Jeśli nie masz w systemie zainstalowanej drukarki to zgłoszony zostanie wyjątek. Przykład z wydrukiem całej zawartości strony:

Po Kliknięciu na hiperłącze „drukuj temat” nastąpi wywołanie okienka wydruku. Wydruk dotyczy całej zawartości strony, tak więc wydrukowane zostanie menu strony, …

Wydruk zawartości DIVa Read More »