JavaScript oraz jQuery dla CE :-)
Szkolenie dotyczące podstaw tych technologii
2018. Made with ♥ by Michał Milanowski, K2 Internet S.A.
Agenda
1. Konfiguracja środowiska przeznaczonego do programowania technologii webowych (Node.js, NPM, Yarn, Gulp).
2. Konfiguracja oraz wybór edytora plików (Brackets).
3. Selektory w JavaScript oraz jQuery.
4. Trochę o samym jQuery a także nowszych wersjach JS i ich kompatybilności.
5. Dynamiczne tworzenie nowych elementów i umieszczanie ich na stronie.
6. Operacje na elementach DOM (zmiana klas, stylów, usuwanie, kopiowanie elementów za pomocą JS).
7. Event listenery (interakcje z użytkownikiem strony).
8. Animacje jQuery (chowanie/pokazywanie elementów, scrollowanie do sekcji).
9. Trochę o sytuacjach w CE, w jakim musiałem użyć JSa :-) (Carrefour - zmiana headerów, PZU - zakładki, IKEA - popup).
10. Ćwiczenia praktyczne! (zróbmy własną grę w kółko i krzyżyk, pojawiający się pop-up, pobieranie danych z formularza).
11. Skąd brać wiedzę oraz gdzie szukać wskazówek.
Środowisko dla technologii webowych
1. Musimy zainstalować Node.js .
2. Wraz z Node.js instaluje nam się NPM - menadżer pakietów dla Node, pozwalający w łatwy sposób pobierać i instalować pluginy, wtyczki itp.
3. Opcjonalnie możemy użyć Yarn - szybsza wersja NPM.
4. Opcjonalnie możemy zainstalować Gulp oraz go skonfigurować (pozwoli to nam na korzystanie np. z SASS).
5. Gitbash (wiersz poleceń znany z linuxa, instalowany razem z GIT)
Edytor plików
Zdecydowanie polecam tutaj edytor Brackets (posiada dużo fajnych rzeczy dla początkujących out-of-the-box).
Polecane wtyczki:
- Podpowiedzi Wcięć, Lance Campbell (https://github.com/lkcampbell) 1.3.11
- Minimap, Senko Anton <zorgzerg@gmail.com> 3.2.6
- JSHint, Raymond Camden <raymondcamden@gmail.com> (http://www.raymondcamden.com) 2.2.20
- HTMLHint, Raymond Camden <raymondcamden@gmail.com> (http://www.raymondcamden.com) 1.2.4
- Emmet, Sergey Chikuyonok <serge.che@gmail.com> (https://github.com/sergeche) 1.2.2
- Documents Toolbar, Alex Bardanov 0.5.22
- CSSLint, Raymond Camden <raymondcamden@gmail.com> (http://www.raymondcamden.com) 2.0.21
- Color Highlighter, Alexander Taratin <al.qw0101@gmail.com> 1.2.2
- Brackets Power Mode, Alexander <equals182@gmail.com> 0.0.5
- Brackets Icons, Ivo Gabe de Wolff (https://github.com/ivogabe) 1.5.7
- Brackets Git, Martin Zagora 0.16.6
- Beautify, Drew Hamlett <i@drewh.me> (https://github.com/drewhamlett) 2.5.0
Na dzisiejsze zajęcia starczy jednak https://jsbin.com :-)
Źródła - skąd brać wiedzę:
1. https://developer.mozilla.org/pl/docs/Web/JavaScript - "oficjalna" dokumentacja JavaScript, polecam!!!
2. http://api.jquery.com/ - oficjalna dokumentacja jQuery, trochę ciężka na początku do przyswojenia.
3. https://www.w3schools.com/js/ oraz https://www.w3schools.com/jquery/ - do prostych przykładów wystarczy ale należy uważać
4. https://caniuse.com/ - sprawdzamy kompatybilność naszego kodu JS i CSS z różnymi przeglądarkami
Podstawy JavaScript oraz jQuery dla CE :-)
By Michał Milanowski
Podstawy JavaScript oraz jQuery dla CE :-)
Szkolenie dotyczące podstaw JavaScriptu oraz jQuery. Stworzono dla zespołu Content Editors K2 Internet S.A. przez Michała Milanowskiego.
- 57
