Vimeo nie odtwarza tego filmu na tej stronie. Film jest przypisany do poprzedniej domeny.
JavaScript
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
Witaj! Z tej strony
Piotr Palarz z serwisu eduweb.pl z kolejnym materiałem. Tym razem jest to kurs jednego z najbardziej
popularnych na świecie języków programowania, jakim jest JavaScript. JavaScript
jest to język, po który najczęściej sięgamy jako taką naturalną kontynuację swojej nauki tworzenia stron
internetowych, po tym jak nauczymy się już HTML i CSS. Jeżeli te technologie znasz,
jeżeli stworzyłeś już strony internetowe i używałeś zarówno HTML'a i CSS'a, to zdajesz sobie sprawę
jakie są ograniczenia tych technologii. Tak naprawdę maksymalnie, co możemy zrobić, jeżeli chodzi o interakcyjność
na stronach internetowych z użyciem CSS,
to jest, powiedzmy, przypisanie zmiany koloru jakiegoś linku,
kiedy jedziemy na niego kursorem myszy.
Gdybyśmy chcieli stworzyć jakiś wysuwany panel, jakiś walidator formularzy czy zaawansowane menu.
Do tego wszystkiego potrzebujemy już współpracy języka JavaScript - JavaScript potrafi w przeglądarkach
internetowych świetnie współpracować z obiektowym modelem dokumentu, o którym będziemy mówić w tym kursie.
Zauważ, że tutaj wyraźnie rozdzielam język JavaScript od tego, co możemy za jego pomocą zrobić w przeglądarce
internetowej.
Dlatego właśnie około połowy tego kursu poświęciłem wyłącznie na, można powiedzieć, czysty język JavaScript,
gdzie będziemy mówić o tym, jak ten język działa i jak możemy go wykorzystywać, niekoniecznie w kontekście
stron internetowych.
Dzięki temu będziesz mógł w przyszłości, po pierwsze, rozumieć gdzie jest granica pomiędzy językiem JavaScript,
a obiektowym modelem dokumentu, a po drugie będziesz mógł ten język wykorzystać w jakichś innych środowiskach
uruchomieniowych np. w Node.js
Natomiast druga połowa kursu jest poświęcona już temu, co być może najbardziej cię interesuje.
A więc jak korzystać z języka JavaScript na stronach internetowych.
Wróćmy jednak do początku.
Otóż na początek omówimy wyłącznie sam, można powiedzieć, czysty język JavaScript i będzie to wstęp nie
tylko do języka JavaScript, ale także do programowania, w ogóle.
Jeżeli zatem nigdy nie programowałeś, nie przejmuj się, wszystkie koncepcje programowania, które są we
wszystkich językach programowania praktycznie takie same, będą omówione i dowiesz się jakie typy danych
możemy reprezentować w języku JavaScript, jak tworzyć zmienne, jak korzystać z tablic, z pętli, z instrukcji
warunkowych czy wreszcie z obiektów i funkcji.
Na koniec pokażę ci również w jaki sposób wykorzystywać wbudowane w krypcie funkcje i jakie mamy przydatne,
wbudowane obiekty. Na każdym etapie oczywiście będę wszystko bardzo dokładnie i wnikliwie tłumaczył.
Abyś dowiedział się wszystkiego, co jest niezbędne przy danej konstrukcji takich jak np. tablica czy
funkcja.
Kiedy będziesz już znał dobrze język JavaScript, przejdziemy do drugiej połowy tego kursu, gdzie pokaże
ci jak JavaScript współpracuje z obiektowym modelem dokumentu i z tzw. DOM API. Poznasz na początek najważniejsze
wbudowane w przeglądarkę obiekty, do których możemy mieć dostęp z poziomu kodu JavaScript, a później pokaże
Ci jak na naszej stronie wyszukiwać konkretnych elementów np. będziemy mogli znaleźć jakiś przycisk
i coś z nim dalej zrobić.
Pokażę ci, jak do tych elementów przypisywać treść.
Jak tworzyć nowe elementy oraz stawiać je i usuwać ze strony.
I również pokażę ci jak na takich elementach HTML możemy pracować z atrybutami czy stylami CSS.
Następnie przejdziemy do niezwykle ważnego rozdziału mianowicie do zdarzeń.
Pokażę ci czym są zdarzenia, w jaki sposób są realizowane i jak możemy je przypisywać do konkretnego
elementu.
Wytłumaczę ci również dwie bardzo ważne i często pomijane koncepcje jakimi są bubbling oraz capturing.
Oprócz tego, omówimy również bardzo ważne koncepcje związane z tym jak odczytywać szerokość, wysokość,
wszystkie niezbędne wymiary, a także położenie elementów na stronie internetowej, po to, abyśmy mogli później
z tego skorzystać i w jednym z praktycznych przykładów,
później to uczynimy. Przy pisaniu jakiegokolwiek kodu,
zawsze pojawiają się jakieś błędy, dlatego w tym kursie nie zabraknie również rozdziału o debuggowaniu kodu,
gdzie najpierw pokaże ci wszystkie możliwe błędy jakie mogą wystąpić w naszym kodzie JavaScript, a także
jak te błędy wykryć i jak sobie z nimi poradzić.
Kiedy będziesz miał już naprawdę solidną wiedzę z zakresu samego języka JavaScript, a także DOM API to przejdziemy
do sekcji praktycznych przykładów, gdzie pokażę ci jak tą wiedzę można wykorzystać.
Dlatego że, do tej pory w kursie będziesz naprawdę wszystko dobrze rozumiał,
ale jeżeli jesteś początkującym, to będą pojawiać się w twojej głowie pytania,
ok, rozumiem, w jaki sposób działa np. pętla while, ale kiedy powinienem z niej skorzystać?
Dlatego przykłady ułożyłem w taki sposób, abyśmy skorzystali z jak największej liczby tych tematów, o
których mówiliśmy
do tego momentu w kursie i w sekcji praktycznych przykładów,
na początek stworzymy sobie mini programik, który pozwoli nam losować kilka liczb z wybranego przez nas
zakresu.
W taki sposób, aby te liczby nie mogły się powtarzać. Później przejdziemy do naprawdę ciekawego przykładu,
który będzie trwał aż dwie lekcje i pokażę ci w jaki sposób możemy sortować tabelę po wybranych kolumnach.
W tym przykładzie wykorzystamy naprawdę wiele z konstrukcji samego języka JavaScript, jak i bardzo wiele
mechanizmów występujących w DOM API.
W kolejnym przykładzie stworzymy swój własny walidator formularzy a więc taki skrypt, który nie pozwoli
wysłać formularza, jeżeli będą pojawiać się w nim jakieś błędy. Będziemy te błędy mogli wyświetlić, odpowiednie
pola będziemy podświetlali i tak długo jak jakikolwiek błąd będzie znajdował się w naszym formularzu,
nie pozwolimy przeglądarce wysłać go do serwera.
W kolejnym projekcie przygotujemy przycisk, który będzie się pojawiał kiedy przewinie stronę troszeczkę
w dół i po kliknięciu na przycisk będziemy mogli płynnie przewinąć do samej góry strony, a przycisk wtedy
zniknie.
To również bardzo ciekawy przykład, w którym wykorzystamy wiele technik, o których będę mówił wcześniej.
I w ostatnim praktycznym projekcie, stworzymy naprawdę ciekawy tooltip,
więc dymek z podpowiedzią, który będzie się pojawiał po najechaniu na konkretny element.
Tutaj również wykorzystamy niezwykle wiele z tych koncepcji, o których do tego momentu będziemy mówić
w kursie.
Na sam koniec kursu naprawdę luźna, ale moim zdaniem bardzo ciekawa sekcja. Tips and Tricks, gdzie znajdziesz
10 bardzo krótkich lekcji, które pokazują 10 ciekawych sztuczek do wykorzystania,
pisząc swój kod JavaScript i również korzystając obiektowego modelu dokumentu i z tych sztuczek będziesz
mógł korzystać swojej codziennej pracy, po to, aby zaoszczędzić sobie zarówno czasu jak i kilku linijek
kodu, które można zamienić na jego krótszą reprezentację,
kiedy po prostu znamy dany trik.
Podsumowując ten kurs to nie tylko wprowadzenie do języka JavaScript i DOM API, ale także dobre wprowadzenie
do programowania, w ogóle.
Jeśli zatem chciałeś nauczyć się programować, ale wydawało się to zbyt skomplikowane, to myślę że warto
zacząć od języka JavaScript i od tego kursu. Ja wszystko tłumaczę na tyle dokładnie, że nawet osoba, która
nigdy nie miała styczności z programowaniem.
Jestem przekonany, że wszystko dobrze zrozumie i z taką wiedzą naprawdę, dużo łatwiej jest uczyć się innych
języków programowania, gdzie te koncepcje, które tutaj omawiamy są naprawdę bardzo podobne.
Jeśli zatem zrozumiesz, jak działają pętle funkcje czy instrukcje warunkowe, to zobaczysz że w innych językach
programowania te same konstrukcje się pojawiają, są jedynie troszkę inaczej zapisywane.
I teraz być może najważniejsze pytanie - dla kogo jest ten kurs?
Otóż ten kurs jest dedykowany dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby do
swoich stron internetowych dodać nieco interakcyjności lub mają ambicję do tego aby tworzyć w przyszłości
bardziej zaawansowane aplikacje webowe, które dzisiaj są bardzo popularne.
Jak wspomniałem, wszystko jest tłumaczone od początku, więc żadna wcześniejsza wiedza z JavaScriptu czy
programowania nie jest wymagana.
Niemniej jednak również osoby które już znają język JavaScript zachęcić do przerobienia tego kursu dlatego
że, przy omawianiu każdej z koncepcji staram się przekazać naprawdę całą wiedzę jaką mam na jej temat.
I stąd myślę że wiele takich smaczków pojawi się w przypadku opisywania pewnych konstrukcji i warto
te smaczki znać.
Ponadto druga część tego kursu, czyli druga połowa jest poświęcona DOM API.
Jest to temat, który również nie jest najlepiej znany przez większość osób, które stykają się z językiem
JavaScript, a warto poznać to co kryje się w przeglądarce i jak możemy z tego, z użyciem języka JavaScript, korzystać.
Teraz jeszcze jedna bardzo ważna kwestia jest taka, iż być może chciałeś nauczyć się korzystania z biblioteki
jQuery,
po tym jak nauczyłeś się podstaw HTML i CSS. Biblioteka jQuery
jest to nic innego, jak po prostu zbiór funkcji napisanych w języku JavaScript, a więc bardzo serdecznie
polecam najpierw nauczyć się języka JavaScript i DOM API, a dopiero później sięgnąć po bibliotekę
jQuery dlatego, że będziesz z niej korzystał dużo bardziej świadomie wiedząc, że kiedy z jakiegoś uproszczenia,
czyli z funkcji biblioteki jQuery korzystasz, to naprawdę za twoimi plecami dzieje się dużo więcej rzeczy,
a więc warto wiedzieć jak to zrobić samemu, aby później korzystać z takiej biblioteki, która jest naprawdę
dobrym rozwiązaniem.
Kiedy wiesz jak to działa,
dużo przyjemniej się z tego korzysta i przede wszystkim w dużo bardziej świadomy sposób.
Następnie chciałbym jeszcze wspomnieć, że razem z kursem przygotowywałem drugi kurs JavaScript w praktyce,
który omawia więcej zagadnień, które nie zmieściły się w tym kursie.
M.in. tutaj nie powiedzieliśmy o AJAX'ie, o wyrażeniach regularnych czy oprogramowaniu obiektowym. Wszystkie
te tematy są poruszone bardzo dokładnie w drugiej części kursu JavaScript w praktyce.
Dlatego zachęcam cię do tego, abyś zerknął na spis treści i intra również do tego kursu.
Myślę, że po przerobieniu obydwu tych kursów naprawdę od zera można wskoczyć na dobry poziom rozumienia
języka JavaScript.
A jeżeli już coś w skrócie potrafiłeś zrobić, to jestem przekonany, że spojrzysz zupełnie inaczej na ten
język
po przerobieniu tych kursów. W takim razie nie pozostaje mi nic innego, jak zaprosić Cię do pierwszych
lekcji tego kursu.
No i oczywiście do usłyszenia.