KURS HTML5, CSS3 I NOWOCZESNY JAVASCRIPT (ES6)
Intensywny, 24-godzinny kurs tworzenia nowoczesnych stron i aplikacji internetowych. Uczestnicy poznają aktualne standardy HTML5, stylowanie interfejsów w CSS3 oraz praktyczne zastosowanie JavaScript i ES6. Szkolenie łączy teorię z warsztatami, dzięki czemu każdy moduł kończy się praktycznym projektem lub ćwiczeniami.
Kurs przygotowuje do samodzielnego tworzenia semantycznych stron, interaktywnych komponentów oraz prostych aplikacji webowych działających również w trybie offline.
Moduł 9 — JavaScript i ECMAScript 6 (2 godz.)
1. Obiekt history i navigator (geolokalizacja)
- Dostęp do historii przeglądarki:
history.back(),history.forward(),history.pushState(). - Informacje o przeglądarce i urządzeniu przez
navigator. - Geolokalizacja użytkownika:
navigator.geolocation.getCurrentPosition().
2. Drag & Drop i File API
- Tworzenie interaktywnych elementów przeciągnij-upuść (
dragstart,drop). - Odczyt plików lokalnych przy użyciu
FileReader. - Wykorzystanie danych plików do wyświetlania obrazów lub analizowania zawartości.
3. Let, const, funkcje strzałkowe i klasy ES6
- Zmienne blokowe:
leti stałeconst. - Funkcje strzałkowe i ich uproszczona składnia:
() => { ... }. - Definiowanie klas i obiektów z ES6:
class,constructor,metody.
Moduł 9 — JavaScript i ECMAScript 6 (2 godz.)
Moduł wprowadza zaawansowane funkcje JavaScript i nowości ECMAScript 6, pozwalając na tworzenie nowoczesnych, interaktywnych aplikacji webowych z kontrolą historii, geolokalizacją, obsługą plików oraz nowymi strukturami języka.
1. Obiekt history i navigator (geolokalizacja)
// Historia przeglądarki
history.pushState({page:1}, "Strona 1", "?page=1");
history.back();
// Geolokalizacja
navigator.geolocation.getCurrentPosition(pos => {
console.log("Szerokość:", pos.coords.latitude, "Długość:", pos.coords.longitude);
});
2. Drag & Drop i File API
const dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', e => e.preventDefault());
dropArea.addEventListener('drop', e => {
e.preventDefault();
const files = e.dataTransfer.files;
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(files[0]);
});
3. Let, const, funkcje strzałkowe i klasy ES6
// Let i const
let liczba = 10;
const nazwa = "ES6";
// Funkcja strzałkowa
const suma = (a, b) => a + b;
console.log(suma(3,4)); // 7
// Klasa ES6
class Osoba {
constructor(imie, wiek) {
this.imie = imie;
this.wiek = wiek;
}
przedstaw() {
console.log(`Cześć, mam na imię ${this.imie} i mam ${this.wiek} lat.`);
}
}
const osoba1 = new Osoba("Greg", 35);
osoba1.przedstaw();
Po ukończeniu modułu uczestnicy będą potrafili korzystać z nowoczesnych możliwości JavaScript, tworzyć klasy i funkcje strzałkowe, obsługiwać geolokalizację, przeciąganie i upuszczanie oraz pracować z plikami lokalnymi w aplikacjach webowych.