Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Wykup dostęp do bazyZaloguj się kontem Easy

Lekcja 37/ 88Zwracanie wartości

0:00 / 0:00
Full-stack i ProgramowanieJavaScriptod Podstaw

JavaScript: Zwracanie wartości

9 godz. 20 min wideo88 lekcji24 moduły

Piotr PalarzWeb Developer
Wszystkie kursy autora

Czego się nauczysz

  • Najważniejsze konstrukcje jezyka JavaScript
  • Obiektowy Model Dokumentu i DOM API
  • JSON i Ajax
  • Nowości z EcmaScript 6
  • Praca z npm i snowpack
  • 5 praktycznych projektów

JavaScript - od Podstaw

Kurs, który masz przed sobą, to nowe wydanie naszego najpopularniejszego kursu JavaScript, zaktualizowane o nowości, które pojawiły się zarówno w samym języku, jak i w przeglądarkach internetowych, na przestrzeni ostatnich lat. Materiał ten wprowadzi Cię w świat języka JavaScript na potrzeby sieci, dając Ci solidne podstawy do tego, by tworzyć bardziej dynamiczne strony internetowe. Będzie również świetnym fundamentem do poznawania frameworków typu Angular, React czy Vue.

Moc języka JavaScript

JavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.

Najważniejsze konstrukcje języka

Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).

Obiektowy Model Dokumentu

Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.

JSON i Ajax

JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.

npm i bundlery kodu

Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.

5 praktycznych projektów

Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.

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 nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). 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 i zacząć korzystać z nowoczesnych frameworków.

Kurs JavaScript

24 rozdziały88 lekcji9h 20min

Wstęp

17min
  • Wprowadzenie4min(zablokowana)
  • Czym jest JavaScript4min(zablokowana)
  • Wybór narzędzi4min(zablokowana)
  • Wstawianie skryptu na stronę www6min(zablokowana)

Typy danych i operatory

59min
  • Tworzenie zmiennych9min(zablokowana)
  • Tekstowy typ danych8min(zablokowana)
  • Liczbowy typ danych5min(zablokowana)
  • null i undefined5min(zablokowana)
  • Prawda i fałsz5min(zablokowana)
  • Operatory arytmetyczne8min(zablokowana)
  • Operatory porównania7min(zablokowana)
  • Operatory logiczne9min(zablokowana)
  • Inkrementacja i dekrementacja3min(zablokowana)

Tablice

37min
  • Tworzenie tablic6min(zablokowana)
  • Destructuring tablic3min(zablokowana)
  • Dodawanie elementów do tablicy5min(zablokowana)
  • Usuwanie elementów tablicy7min(zablokowana)
  • Operator spread na tablicach3min(zablokowana)
  • Sortowanie tablic5min(zablokowana)
  • Metody tablic9min(zablokowana)

Obiekty

28min
  • Wartości prymitywne i obiekty5min(zablokowana)
  • Tworzenie obiektów6min(zablokowana)
  • Destructuring obiektów3min(zablokowana)
  • Operator spread na obiektach3min(zablokowana)
  • Funkcje jako metody obiektów4min(zablokowana)
  • Przekazywanie przez referencję6min(zablokowana)

Instrukcje warunkowe

13min
  • Instrukcja if5min(zablokowana)
  • Skrócony zapis if4min(zablokowana)
  • Instrukcja switch3min(zablokowana)

Pętle

19min
  • Pętla while4min(zablokowana)
  • Pętla do while2min(zablokowana)
  • Pętla for3min(zablokowana)
  • Pętla for in3min(zablokowana)
  • Pętla for of2min(zablokowana)
  • Przerywanie lub kontynuacja pętli5min(zablokowana)

Funkcje

32min
  • Tworzenie funkcji5min(zablokowana)
  • Zwracanie wartości4min(zablokowana)
  • Parametry funkcji6min(zablokowana)
  • Zakres zmiennych7min(zablokowana)
  • Funkcje strzałkowe6min(zablokowana)
  • Wbudowane funkcje JavaScript4min(zablokowana)

Praca z datami

22min
  • Odczytywanie i formatowanie daty8min(zablokowana)
  • Parsowanie daty7min(zablokowana)
  • Porównywanie dat7min(zablokowana)

Timery

11min
  • setTimeout4min(zablokowana)
  • setInterval7min(zablokowana)

Obsługa wyjątków

12min
  • Blok try catch6min(zablokowana)
  • Zgłaszanie własnych błędów6min(zablokowana)

Praktyczny projekt 1

14min
  • Losowanie Dużego Lotka14min(zablokowana)

Obiektowy Model Dokumentu

30min
  • Czym jest DOM4min(zablokowana)
  • Globalny obiekt window8min(zablokowana)
  • BOM API8min(zablokowana)
  • Wyszukiwanie elementów w drzewie DOM11min(zablokowana)

Modyfikacja drzewa DOM

30min
  • Tworzenie elementów HTML5min(zablokowana)
  • Wstawianie i usuwanie elementów ze strony6min(zablokowana)
  • Tworzenie fragmentu dokumentu5min(zablokowana)
  • Relacje między elementami9min(zablokowana)
  • Praca z atrybutami6min(zablokowana)

Praca z treścią elementów HTML

14min
  • Odczytywanie i ustawianie treści7min(zablokowana)
  • Wartości pól formularza7min(zablokowana)

Manipulacja stylami CSS

14min
  • Praca z klasami CSS5min(zablokowana)
  • Praca z liniowym CSS9min(zablokowana)

Geometria elementów HTML

18min
  • Współrzędne położenia elementu7min(zablokowana)
  • Wymiary elementu8min(zablokowana)
  • Pozycje suwaków3min(zablokowana)

Zdarzenia DOM

47min
  • Czym są zdarzenia4min(zablokowana)
  • Przypisywanie i usuwanie zdarzeń9min(zablokowana)
  • Obiekt event i target9min(zablokowana)
  • Czym jest bubbling6min(zablokowana)
  • Czym jest capturing5min(zablokowana)
  • Zapobieganie domyślnej akcji przeglądarki8min(zablokowana)
  • Zdarzenie DOMContentLoaded i load7min(zablokowana)

Praktyczny projekt 2

11min
  • Postęp przeczytania artykułu11min(zablokowana)

Praktyczny projekt 3

28min
  • Tooltip cz. 19min(zablokowana)
  • Tooltip cz. 29min(zablokowana)
  • Tooltip cz. 39min(zablokowana)

Ajax

25min
  • Czym jest JSON8min(zablokowana)
  • Pobieranie danych9min(zablokowana)
  • Wysyłanie danych8min(zablokowana)

Praktyczny projekt 4

12min
  • Generowanie listy użytkowników12min(zablokowana)

Praktyczny projekt 5

23min
  • Prosty odtwarzacz wideo cz. 111min(zablokowana)
  • Prosty odtwarzacz wideo cz. 212min(zablokowana)

Node.js

42min
  • Instalacja środowiska9min(zablokowana)
  • Jak działa npm9min(zablokowana)
  • Bundlery kodu9min(zablokowana)
  • Build produkcyjny7min(zablokowana)
  • Moduły ESM8min(zablokowana)

Zakończenie

2min
  • Podsumowanie2min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Piotr Palarz
Średnia ocen autora: 4,8

Bio

Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.

Inne kursy tego autora

Pokaż więcej kursów