Na samym początku kursu JavaScript trzeba oczywiście go przedstawić. Jest to język skryptowy, który najczęściej wykorzystuje się na stronach internetowych, by dodać do nich więcej interakcji.

JavaScript pozwala na wykonywanie różnych działań po stronie przeglądarki, bez przeładowywania strony.

Aktualnie rozwinął się do takiego stopnia, że oprócz masy frameworków i narzędzi (np. Angular, React, jQuery) jest też dostępny po stronie serwerowej (Node.js, MongoDB), ale to już inna bajka, nie dla początkujących.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Przykłady zastosowania JavaScriptu:

  • Wyświetlanie na stronie animowanego okienka popup, które pokaże się np. po 10 sekundach
  • Dynamiczny zapis na newsletter – podajesz swój email, a za moment dostajesz informację czy zapis powiódł się (lub wystąpiły jakieś błędy)
  • Płynne przechodzenie z jednej strony na drugą (przeładowanie w tle, bez konieczności odświeżania strony)
  • Walidacja (sprawdzanie poprawności) pól formularza kontaktowego
  • I wiele więcej…

Korzystając z JavaScript po prostu sprawiasz, że Twoja strona zaczyna żyć.

Ten artykuł to taka “lekcja organizacyjna”, bo piszę głównie o narzędziach, z których możesz korzystać, by ułatwić sobie naukę.

Trzeba zadbać o odpowiednie środowisko do pracy, bo jak powiedział Niklaus Wirth: “sukces kursu programowania zależy w dużej mierze od zaprezentowanych przykładów.”

W poszczególnych lekcjach będę skupiał się tylko na najważniejszym kodzie, by ułatwić zrozumienie. Cała reszta znajduje się na wideo.

Jest też dostępna wersja wideo:

 

Edytor kodu JavaScript

Polecam Ci korzystanie z edytora Brackets lub Sublime Text 3.

Brackets jest zupełnie bezpłatny i tworzony przez ludzi z Adobe.

Sublime Text natomiast posiada licencję, która pozwala Ci używać go bezpłatnie przez nieograniczony czas, jednak autorzy zalecają zakup licencji, jeżeli jest to “ciągły użytek”.

Pobierz Brackets Pobierz Sublime Text 3

 

Pokażę Ci teraz jak możesz szybko skonfigurować Bracketsa – do lepszej, wydajniejszej pracy.

Będziesz potrzebować wtyczki Emmet, która jest niezwykle pomocna przy pisaniu kodu.

Będąc w Bracketsie kliknij w ikonkę klocka w prawym górnym rogu (rozszerzenia), wpisz “Emmet” i zainstaluj wtyczkę.

Instalacja wtyczki Emmet - Brackets

Przyda się też inny motyw, niż standardowy.

W zakładce obok wpisz “New Moon” i zainstaluj całą paczkę nowych motywów.

Instalacja motywy New Moon

Za chwilę to wszystko uruchomimy, ale na koniec zmieńmy domyślną czcionkę na coś ciekawszego. Polecam bezpłatną “Hack“.

Pobierz instalator dla swojego systemu, zainstaluj ją

Pobierz font Hack

a na koniec uruchom Bracketsa ponownie.

Teraz w ustawieniach, dokładnie w “View -> Themes” wybierz sobie motyw (ja używam “New Moon: New Moon”).

W polu poniżej, przy “Font Family” na samym początku wpisz “Hack”.

Cała linijka “Font Family” powinna wyglądać podobnie jak poniżej

Na tym możemy zakończyć konfigurację Bracketsa.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Struktura dokumentu HTML

Dzięki Emmetowi możemy teraz szybko stworzyć podstawową strukturę dokumentu HTML.

Stwórz sobie plik index.html, zapisz go, a następnie wpisz “html:5” i naciśnij tab. Emmet w tym momencie powinien stworzyć Ci gotowy, startowy kod HTML5.

 

Dołączamy skrypty JavaScript

Są 2 metody na dołączanie skryptów JavaScript do Twojego kodu HTML.

Metoda 1 – inline (“na szybko”)

To nie jest polecana, dobra praktyka, bo kod JS i HTML powinny być od siebie oddzielone (być w osobnych plikach).

Jeżeli jednak chcesz stworzyć coś na szybko i tylko sprawdzić czy kod działa, możesz skorzystać z metody “inline” – czyli w linii, bezpośrednio w kodzie HTML w sekcji head lub body.

Jeśli cały kod działa poprawnie, na ekranie powinieneś zobaczyć następujący komunikat:

JavaScript alert

Metoda 2 – zewnętrzny plik (polecana)

To najlepszy sposób, bo pozwala całkowicie oddzielić kod HTML od JavaScriptu.

Stwórz nowy plik, np. “scripts.js” i wklej do niego cały poprzedni kod, bez tagów <script>

Teraz wystarczy ten plik załadować w dokumencie HTML, więc pod koniec body dodaj następującą linijkę:

 

Teraz czas na zmienne w JavaScript

Zmienna to pojemnik na jakąś wartość. Może w niej być tekst, liczba, liczba zmiennoprzecinkowa itd.

Jest to wygodne, bo taką zmienną (raz stworzoną) możemy potem wyświetlić w odpowiednim miejscu, dodać do niej tekst, odjąć liczbę i wiele więcej.

Zmienne tworzymy korzystając z następującej konstrukcji: var nazwa = wartość.

Dzięki słowu var mamy pewność, że zmienna będzie lokalna, czyli nie będzie widoczna w całym dostępnym kodzie, a dzięki temu unikniesz wielu niepotrzebnych konfliktów nazw.

Wyświetlanie zawartości zmiennych w konsoli

Żeby wyświetlić zawartość takiej zmiennej, wykorzystamy instrukcję console.log. Rezultaty możesz zobaczyć wchodząc do przeglądarki -> F12 -> zakładka Konsola.

I w rezultacie, przeglądarka wyświetli nam takie odpowiedzi w konsoli:

 

Jak działają operatory?

Operatory są ściśle związane ze zmiennymi, a najczęściej używanymi są:

  • + (dodawanie)
  • – (odejmowanie)
  • * (mnożenie)
  • / (dzielenie)

Możemy więc np. dodać do siebie 2 wartości:

Dodać, pomnożyć, a na końcu podzielić:

Czy nawet połączyć jeden typ zmiennej z drugim. Wtedy jako łącznika używamy znaku “+” (plus)

 

Jak radzić sobie z błędami, czyli debugowanie kodu

JavaScript to niestety nie język PHP, gdzie błędy są pokazywane od razu na stronie.  Jeżeli w JS wystąpi błąd, często cały skrypt zostanie przerwany i musisz dojść do źródła błędu ręcznie.

Na szczęście w większości przypadków wystarczy konsola, bo tam są wyświetlane wszelakie problemy z JavaScriptem na stronie.

Teraz specjalnie w moim kodzie zamiast “alert” wpisałem “alet” – literówka – i zobacz co pojawia się w konsoli:

Błędy w JavaScript - debugowanie kodu

Więc jest to wystarczająco czytelne, by poradzić sobie z większością tego typu błędów.

Możesz też ręcznie wyświetlać wartości zmiennych w konsoli, wykorzystując console.log();

 

JSFiddle i JS Bin – dwa edytory kodu online

JSFiddle i JS Bin to dwie ciekawe strony, które pozwalają Ci szybko stworzyć kod i zobaczyć rezultaty jego działania.

Ich główną zaletą jest to, że nie potrzebujesz żadnego dodatkowego edytora, możesz szybko dołączyć dodatkowe biblioteki i frameworki, takie jak jQuery czy Angular, zapisać swój kod na później, a nawet udostępnić go innym.

Dzięki temu, jeśli masz jakieś problemy z kodem HTML, CSS czy JavaScript (właśnie te języki są obsługiwane), możesz szybko się takim kodem podzielić z innymi.

Dzisiaj jest to bardzo częsta praktyka na różnego rodzaju forach IT.

 

Dodatkowe źródła do nauki

JavaScript jest potężnym językiem i rozwija się tak szybko, że trzeba cały czas aktualizować swoją wiedzę.

Dwa źródła, które mogą Ci w tym pomóc, to:

 

Ale i tak programowania nauczysz się tylko wtedy, gdy będziesz własnoręcznie kodować, tworzyć własne projekty. W tej dziedzinie jest bardzo mało teoretyków.

Tak więc edytor w dłoń… i do zobaczenia w kolejnych lekcjach.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

>