Praktyczne ćwiczenie z wykorzystaniem JavaScript -u.

W artykule W jaki sposób JavaScript może odmienić Twoją stronę? mogłeś zapoznać się z teoretyczną stroną JavaScriptu. Jeżeli przeczytałeś go dokładnie to masz garść informacji które z pewnością pomogą Ci w budowaniu solidnych podstaw wiedzy, które będą skutkować wysokimi umiejętnościami oraz kwalifikacjami. Dziś jednak postanowiłam, że powinniśmy pójść o krok dalej i zapoznać się z praktycznym wykorzystywaniem JavaScriptu.

Z książek czy też regułek możesz uczyć się w szkole, ale nijak ma się to do umiejętności które musisz umieć wykorzystać w praktyce jeżeli chcesz być poważanym i cenionym web developerem.

Kiedy pytają mnie od czego zacząć, odpowiadam, że najlepiej od samego początku, więc startujemy.

Ostatni tekst W jaki sposób JavaScript może odmienić Twoją stronę? zobrazował nam w jaki sposób możemy podłączyć JavaScript pod HTML. Mamy zatem wszystko by móc dokładnie przetestować działanie JavaScript – u. Proponuję aby na samym początku wykonać proste ćwiczenie polegające na stworzeniu czegoś w rodzaju pseudo systemu bankowego.

Aby coś osiągnąć należy w pierwszej kolejności wyznaczyć sobie cel. Zatem naszym zadaniem będzie:

1. W szkielecie HTML umieścić tytuł „ "JavaScript Toggler"

2. Wpisać w treści „ "Czy na pewno chcesz pokazać PIN?"

3. Dodamy sobie również link, zwykły tag < a >

4. Wprowadzimy czterocyfrowy kod.

Po wykonaniu powyższych poleceń, nasz skrypt powinien wyglądać następująco:

<! doctype html >

< html >

< head >

             < meta charset = "utf-8" >

             < title >JavaScript Toggler

             < script type="text/javascript">

            

< body >

               < div >

               < p >Czy na pewno chcesz pokazać PIN

               < a href= "#" >Pokaż PIN

               < p > 1337

               < div >

Jeżeli wykonałeś wszystko poprawnie to strona prezentować się tak:

Czy na pewno chcesz pokazać PIN?

Pokaż PIN

1337

Ktoś może powiedzieć, no tak, udało się, wygląda ok, ale co w tym niezwykłego?

Kolejny nasz krok ma pozwolić nam na dodanie stronie interaktywności. Przećwiczymy teraz ukrywanie tego czterocyfrowego kodu.

To bardzo proste, wystarczy bowiem, że użyjemy CSSa i zastosujemy małą zmianę.

Zamiast:

< p > 1337

wpiszemy:

< p style="display: none;" >1337

Proste, prawda? Kilka kroków i już masz zarys mikro-aplikacji.

Jak podłączyć link pod JavaScript?

Wszystko zrobiliśmy poprawnie i nawet fajnie to wygląda, ale...czegoś wciąż nam brak. Na naszej stronie nic się nie dziej. Brakuje jej takiego mocniejszego akcentu.

Dlaczego tak jest? Ponieważ nasz link nie jest podpięty pod JavaScript.

Sprawdźmy co się stanie, kiedy dokonamy takiego podpięcia. Najpierw jednak musimy wiedzieć w jaki sposób ten link można doczepić do JavaScript – u?

Rozwiązanie jest proste, ale skup się dokładnie, żeby wszystko dokładnie zrozumieć.

Musimy wyciągnąć sobie ID jakiegoś elementu z HTML do JavaScriptu. Jak wspominałam już w W jaki sposób JavaScript może odmienić Twoją stronę? CSS oraz HTML bardzo potrzebują w swoim zespole właśnie JavaScript – u. Dzięki temu strona będzie przejrzysta, zrozumiał a do tego w pełni interaktywna, a co za tym idzie częściej odwiedzana. Właśnie to jest naszym celem – stworzenie takiej strony, na którą z chęcią będzie się wracać.

Przećwiczmy ten manewr na przykładzie: < a href= "#" >Pokaż PIN.

Jak wspomniałam, pierwsze co robimy to wyciągamy ID:

< a href= "#" id="pin-show" >Pokaż PIN

Następnym krokiem jest ustawienie zmiennej w JavaScript. Wracamy zatem na początek naszego szkieletu i pod znacznikiem < script > umieszczamy naszą zmienną oraz przypisujemy jej nasz link: „Podaj PIN”. Nie możemy zapomnieć również o tym, aby odwołać się do obiektu document.

Uzyskujemy dzięki temu następujący rezultat:

<! doctype html >

< html >

< head >

              < meta charset = "utf-8" >

             < title >JavaScript Toggler

             < script type="text/javascript">

             var pinShow = document.getElementById("pin-show");

< body >

              < div >

              < p >Czy na pewno chcesz pokazać PIN

              < a href= "#" id="pin-show" >Pokaż PIN

             < p style="display: none;"> 1337

             < div >

Przydatna ciekawostka.

JavaScript ma wbudowany silnik w przeglądarkę dlatego tak bardzo trudno jest nam wychwycić jakichkolwiek błędy w skrypcie zanim one nastąpią. Rezultat jest taki, że czasem przez omyłkę wkradnie Ci się jakiś błąd i Twoja praca zakończy się fiaskiem. Często traci się czas na szukanie takiego błędu i po co, skoro jest sposób żeby temu zapobiec.

Profesjonalni programiści mają swojego asa w rękawie. Console.log jest to funkcja która umożliwia developerom na sprawdzenie poprawności wszystkich kodów oraz wykrycie ewentualnych błędów. Console.log pozwala na logowanie do konsoli.

Poznałeś już kolejny fajny sposób na sprawne programowanie.

Wracając do naszego ćwiczenia...warto jeszcze trochę poeksperymentować. Pomyślałam, że koniecznie musisz wiedzieć o jeszcze jednej fajnej akcji jaką możesz śmiało wykorzystywać. Mowa tu o onclick, jest to funkacja która odpali się za każdym razem gdy na nią kliknięciem.

Zastosujmy to rozwiązanie przy naszym „pinShow”. Wpisujemy w nasz szkielet ową zmienną i po niej musi znaleźć się onclick, np. pinShow.onclick. W tym momencie nie możemy zapomnieć o odpaleniu odpowiedniej funkcji:

pinShow.onclick = function(){

};

Jeżeli alertem sprawdzimy nasz zapis to na stronie po najechaniu kursorem na napis Pokaż PIN, powinien podświetlić się on na czerwono. Prosta fajna akcja, od razu strona jest wzbogacona o dodatkowe funkcje, wygląda to zdecydowanie lepiej i sprawia pozytywne wrażenie.

A co zrobić aby po najechaniu na "Pokaż PIN" jednocześnie właśnie ten PIN się pokazywał?

Tym razem znów posłużymy się funkcją i wpiszemy: pin.style.display = "block".

Dzięki temu uzyskamy na naszej stronie pożądany rezultat.

< html >

< head >

< meta charset = "utf-8" >

< title >JavaScript Toggler

< script type="text/javascript">

var pinShow = document.getElementById("pin-show");

pinShow.onclick = function(){

pin.style.display = "block";

};

Dzisiejszym ćwiczeniem praktycznym chciałam pokazać Ci przedsmak tego na jakie możliwości możesz liczyć podczas korzystania z JavaScript – u. Jestem przekonana, że udał mi się zaszczepić w tobie chęć dalszego rozwijania umiejętności developerskich. Artykuł to fajna sprawa, sporo informacji i porad, ale musisz wiedzieć iż jest to tylko mała dawka tego co możesz się nauczyć. Osobiście polecam, aktywne działanie czyli śledzenie artykułów ale również naukę praktyczną od najlepszych. Coraz częściej jedno dobre szkolenie daje więcej niż lata bezcelowej nauki o wszystkim i o niczym.