JAVASCRIPT

Skryptowy język programowania stosowany głównie na stronach internetowych. JS działa po stronie przeglądarki internetowej i wzbogaca strony o dodatkowe funkcjonalności, na które nie pozwala język HTML i CSS, np: okienka popup, alerty, slidery, walidatory formularzy, animacje, wysuwane menu itp. Oficjalna strona projektu: javascript.com

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 »

react js

Wprowadzenie do React JS

ReactJS to biblioteka języka JavaScript stworzona przez Facebook do budowy elastycznych interfejsów. Oficjalna strona projektu: reactjs.org. React opiera się o tzw. komponenty (fragmenty kodu), które reagują na zdarzenia, mogą pobierać dane i utrzymywać ich wewnętrzny stan poza drzewem DOM. Komponenty są skalowalne i przenośne, bez problemu komunikują się z innymi bibliotekami i frameworkami. Oczywiście zalet …

Wprowadzenie do React JS Read More »

Wysuwany boczny panel menu

W tym poście pokażę jak zrobić na stronie wysuwany, boczny panel menu. Takie rozwiązanie bardzo dobrze sprawdza się na widokach mobilnych. Zapewne każdy z nas natknął się na coś takiego podczas wędrówki po kniejach sieci, choćby na tym blogu 🙂 Aby wykonać zadanie potrzebna będzie biblioteka jQuery.

W kodzie html (poniżej) osadzimy dwa przyciski: …

Wysuwany boczny panel menu Read More »

google captcha

Google reCAPTCHA

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) to technika zabezpieczenia stron internetowych przed spamem, odszyfrowaniem haseł. Dotyczy głównie formularzy HTML. Aby móc przesłać dane z formularza użytkownik musi przejść proces weryfikacji tzw. test na człowieczeństwo. Odbywa się to poprzez wyświetlanie krótkich zadań, pytań na które trzeba odpowiedzieć, zaznaczając lub wpisując …

Google reCAPTCHA Read More »

bootstrap tabs / zakładki

Automatyczna zmiana Bootstrap Tabs na Accordion

Strony mobilne i responsywne wprowadziły nową jakość do Internetu. Serfowanie po stronach stało się łatwe i przyjemne dzięki responsywnym nawigacjom i układom szablonów automatycznie dopasowującym się do danej rozdzielczości ekranu (telefonu lub tabletu). Niestety są elementy, które nadal sprawiają problem lub nie można ich dostosować w sposób jaki byśmy chcieli za pomocą zwykłego HTMLa, CSS …

Automatyczna zmiana Bootstrap Tabs na Accordion Read More »

Cookies ciasteczka na stronie

Komunikat o korzystaniu z „cookies” na stronie

Ciasteczko (ang. cookie) to plik przechowujący krótką informację tekstową, który serwis internetowy wysyła do przeglądarki, a który przeglądarka odczytuje przy kolejnej wizycie użytkownika, np. w celu zapamiętania danych logowania lub innych preferencji. Zapewne wiesz o co biega, a jeśli nie, to odsyłam Cię do strony wszystkoociasteczkach.pl, na której temat rozbity jest na atomy. Zarządzanie plikami …

Komunikat o korzystaniu z „cookies” na stronie Read More »

scrollowanie, przewijanie do góry

Płynny powrót „do góry” strony

Często na pojedynczych stronkach zdarza się, że treść posta, artykułu, newsa jest dość obszerna a powrót do nawigacji irytujący, zakładając, że osadzony jest w nagłówku strony. Aby cofnąć się „do góry” musimy przebierać suwakiem przeglądarki jak chomik kołowrotkiem. Na szczęście jest proste rozwiązanie w postaci graficznego przycisku (zazwyczaj z symbolem strzałki), którego kliknięcie natychmiast przeniesie …

Płynny powrót „do góry” strony Read More »