|
1
|
CSS 3
- Podstawy
- Tworzenie animacji
Tworzenie responsywnej strony WWW w oparciu o framework Bootstrap,
W3.CSS lub Bulma
|
Na komputerach znajdujących się w laboratorium 4.29, 4.30 oraz na puli PCoIP
"Podstawowy
system - ICSR
(Win10)" jest zainstalowany edytor Visual Studio Code
- Przeczytaj jakie funkcjonalności związane z tworzeniem dokumentów
HTML
oraz arkuszy
CSS
oferuje ten edytor
- Obejrzyj film poświęcony
tworzeniu
w/w dokumentów
-
Uruchom ten edytor za pomocą komendy code
- Za pomocą opcji "Open folder..." (Ctrl+K Ctrl+O) określ katalog w
którym będą przechowywane
Twoje dokumenty oraz skrypty
- W obrębie panelu "EXPLORER" najedź kursorem myszy na nazwę powyższego
katalogu i
kliknij ikonę "New
File" - utwórz dokument HTML (plik) o nazwie 'dokument.html'
-
Naciśnij klawisze Shift+1, a następnie Enter, co
spowoduje
utworzenie
przykładowego dokumentu HTML. Jeżeli Twój edytor nie tego skrótu
klawiszowego,
to ręcznie utwórz
dokument
o poniższej zawartości:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Tytuł strony</title>
</head>
<body>
</body>
</html>
-
Zmodyfikuj dokument - ma zawierać:
- nagłówek stopnia 1 (h1) z Twoim imieniem i nazwiskiem
-
wewnętrzny
arkusz
stylów zawierający następujące dwie reguły:
- Lewy margines strony WWW ma mieć rozmiar 100 pikseli
- Treść wszystkich elementów 'h1' ma się wyświetlać na
czerwono
- Wyświetl ten dokument w przeglądarce WWW
|
|
2
|
JavaScript (framework Vanilla JS)
- Podstawowe typy danych
- Obiekty wbudowane
- Dostęp do pól formularza przy użyciu DOM 0
- Obsługa zdarzeń za pomocą DOM 0
- Tworzenie dynamicznych grafik - element "canvas"
- Testy jednostkowe w oparciu o Mocha i Chai
|
Zaznajom się z:
|
|
3
|
Standard DOM 4
- Dynamiczna zmiana stylów CSS
- Tworzenie i modyfikacja treści dokumentów HTML "w locie"
- Obsługa zdarzeń
- Komponenty React
|
Zaznajom się z:
|
|
4
|
Serwer Node.js
- Tworzenie prostych serwisów WWW - moduł 'http'
- Obsługa systemu plików - moduł 'fs'
|
Zaznajom się z:
Po zalogowaniu się do systemu Linux (laboratorium 4.29/4.30) dokonaj konfiguracji
edytora Visual Studio
Code
-
Wykonaj poniższe komendy:
mkdir ~/cw4
cd ~/cw4
npm init --yes
npm install --save eslint eslint-config-airbnb-base eslint-plugin-import
echo -e "module.exports = {\n 'extends': 'airbnb-base',\n 'rules': {\n 'no-console': 0\n }\n};" > .eslintrc.js
code --install-extension dbaeumer.vscode-eslint
code ~/cw4
- W obrębie panelu "EXPLORER" najedź kursorem myszy na nazwę cw4 i
kliknij ikonę "New
File" — utwórz pusty plik/skrypt o nazwie skrypt.js
-
Umieść w nim następujący kod JS:
console.log('\x1B[31mWitaj Świecie\x1B[0m\n');
- Za pomocą sekwencji klawiszy Ctrl+` otwórz panel terminala, a
następnie wpisz w nim
polecenie
node skrypt.js, co spowoduje uruchomienie Twojego skryptu; tu:
wypisanie, na czerwono, napisu
"Witaj Świecie"
-
Jeżeli chcesz, aby określona sekwencja klawiszy (np. Ctrl+Alt+R)
uruchamiała polecenie
node <nazwa_bieżącego_skryptu>, to:
-
Naciśnij Ctrl+K Ctrl+S, następnie ikonę 'Open
Keyboard Shortcuts
(JSON)'
co
spowoduje wyświetlenia zawartości pliku keybindings.json
— umieść, pomiędzy parą
nawiasów
kwadratowych, pokazaną poniżej, w liniach 2-6, treść:
[
{ "key": "ctrl+alt+r",
"command": "workbench.action.tasks.runTask",
"args": "node",
"when": "editorLangId == 'javascript'"
}
]
-
Utwórz plik tasks.json z definicją treści zadań:
- Naciśnij Ctrl+Shift+B
- Wybierz "No build task to run found. Configure Build
Task..."
- Wybierz dowolny task
-
Zastąp zawartość pliku tasks.json następującą:
{
"version": "2.0.0",
"tasks": [
{
"label": "node",
"command": "node",
"args": [ "${file}" ]
}
]
}
- Umieść, w skrypcie JS, fragment kodu, który jest niezgodny z zasadami pisania
poprawnego kodu i sprawdź czy
edytor podkreśla ten fragment
- Najedź kursorem myszy na podkreślony fragment i zobacz co się
wyświetla
w "dymku"
- Sprawdź czy działa autouzupełnienie — dopisz na końcu skryptu
tekst
console.l.
Jeżeli
nie pojawiło się menu z propozycjami nazw metod, to naciśnij
Ctrl+Spacja
- Przeczytaj jak
korzystać z
debuggera
|
|
5
|
Framework Express — podstawy
- Tworzenie aplikacji internetowej przy wykorzystaniu systemu szablonów 'Pug'
- Tworzenie aplikacji internetowej korzystającej z bazy danych 'MongoDB'
|
Zaznajom się z:
|
|
6
|
Asynchroniczne zapytania — AJAX oraz Fetch API
- Asynchroniczna komunikacja z serwerem przy użyciu
metody
GET,
POST ...
- Odczyt danych odpowiedzi w oparciu o metody
responseText() /
responseXML()
- Obietnice
|
|
|
7
|
Język TypeScript
|
|
