Online kurz JavaScriptu. Profesionální vývoj webových rozhraní - bezplatný kurz od HTML Academy, školení 9 týdnů, termín 15. října 2023.

Část 1 Úvod do JavaScriptu
Pojďme se podívat, jak kurz funguje, jaké nástroje budete potřebovat a jak je nastavit. Podívejme se, co je to jazyk JavaScript, včetně specifikace ECMAScript a prohlížeče.

Jak kurz probíhá? Organizační záležitosti.

Schéma práce na kurzu.
Recenze projektů.
Kritéria kvality.

jazyk JavaScript

Specifikace ECMAScript.
Co dává prohlížeč JavaScriptu?

Základy JavaScriptu.

Základní syntaxe: závorky, složené závorky, operátory, vyhrazená slova, komentáře.
Základními stavebními kameny jsou proměnné a funkce.
Primitiva a komplexní datové typy.

Nástroje.

Editory kódu.
Linters.
Vývojový server.

Část 2 Základní funkce JavaScriptu
Začněme studovat základní konstrukce JavaScriptu, zejména funkce. Podívejme se na nuance deklarování proměnných. Pojďme se seznámit s vývojářskými nástroji.

Proměnné.

Oblasti viditelnosti.

Podmíněné výroky.

Ternární operátor.
Přepínač operátora s více volbami.

Cykly.

Obsazení.

Funkce.

Funkce šipek.
Výchozí parametry funkce.

klidové parametry.

Zvednutí proměnných a funkcí.

Úvod do DevTools (nástroje pro vývojáře).

Sekce 3 Objekty a pole
Sekce bez živého vysílání

Seznámíte se se složitými datovými typy: poli a objekty. Naučte se je vytvářet a spravovat.

Komplexní datové typy.

Pole.

Základní metody pole.

Objekty.

Zpětná volání (funkce zpětného volání).

Část 4 Vestavěné objekty a funkce
Podívejme se na objekty a funkce, které existují v samotném jazyce JavaScript. Pojďme se dotknout kontextu provádění tohoto. Pojďme spustit a odladit kód v konzole nástrojů pro vývojáře.

Ničení.

syntaxe šíření.

Vestavěné objekty a jejich metody.

Tětiva.
Číslo.
Boolean.
Datum.
Matematika.

Operátor nový.

Vestavěné funkce JavaScriptu.

Funkční kontext.

Klíčové slovo je toto.
Ztráta prostředí.

DevTools. Pomocí konzoly.

Oddíl 5 Kodex Organizace
Podívejme se na koncept rozsahů. Pojďme diskutovat o principu DRY (neopakujte se) a o tom, jak jej použít k napsání méně kódu a přesto toho udělat více. Pojďme se naučit, co jsou moduly a jak na nich „rozbít“ kód; Co je vstupní bod?

Oblasti viditelnosti.

Globální rozsah okna.
Uzávěry

Modularita.

Opětovné použití kódu, princip DRY.
Koncept modulu.
Místo vstupu.
Moduly ECMAScript, syntaxe importu a exportu.

DevTools: ladění kódu pomocí zdrojů.

Sekce 6 DOM a události
Sekce bez živého vysílání

Seznámíte se s objektovým modelem dokumentu. Objektový model dokumentu nebo DOM). Zvažte, jak popsat reakce na akce uživatele: zadávání textu, kliknutí na určité prvky, rolování atd.

strom DOM.

dokument je kořenem všeho.
Stromová struktura DOM.
Vyhledejte prvky na stránce.
Správa atributů prvků.

Šablony a data.

Události na stránce.

Obsluha událostí.

Sekce 7 Manipulace s DOM
Zkusme vytvářet, mazat, přesouvat a manipulovat s prvky DOM. Pomocí šablon vykreslíme dříve vytvořená data.

Správa stromu DOM.

Správa atributů prvku DOM.
Přesouvání prvků ve stromu DOM.

Přístupy k vytváření prvků DOM.

Vytváření objektů DOM.
Správa značek: připojit, přidat před, insertAdjacentHTML, innerHTML, textContent.

Šablony.

Šablony řetězců (řetězce šablon).
Speciální štítek

Sekce 8 Práce s událostmi
Interakci uživatele ošetříme tak, aby stránka reagovala na zadávání textu do formulářů, klikání na určité prvky, rolování atp. Podívejme se, jak tuto interakci zpřístupnit.

Události.

Objekt události, správa událostí: preventDefault a stopPropagation.
Fáze akce a delegování.
Události a přístupnost klávesnice.

Smyčka událostí.

Ověření formuláře.

Pristine je knihovna pro ověřování formulářů.

Validace pomocí regulárních výrazů.

DevTools: Funkce prvků (inspektor) pro práci s DOM a událostmi.

Část 9 Externí rozhraní API a knihovny třetích stran
Podívejme se na to, jak „nepsat své vlastní kolo“, ale znovu použít zkušenosti a kód někoho jiného. Pojďme se seznámit s konceptem softwarového rozhraní. Application Programming Interface nebo API), zvažte API knihoven JavaScriptu třetích stran a JavaScript API mapových služeb. Pojďme se v rychlosti podívat na rozhraní API, která prohlížeč poskytuje vývojářům.

Koncepce API.

Mapové služby a jejich JavaScript API.

OpenStreetMap.
Leták.

Knihovny třetích stran.

Proč jsou potřebné knihovny?
Jak se připojit k projektu.
noUiSlider.

Přehled rozhraní API prohlížeče.

Sekce 10 Síť
Sekce bez živého vysílání

Sami se podíváte na protokol HTTP a datový formát JSON. Zvažte, jak se při používání sítě mění interakce uživatele s webem a co se může pokazit.

HTTP protokol a datové formáty.

JSON.

Zpracování výjimek.

Zkus chytit.

Nástroje pro práci se síťovými požadavky.

Sekce 11 Asynchronie. vytváření sítí
Podívejme se na koncept asynchronie a na to, jak jí dosáhnout pomocí slibů. Slib, slib). Pojďme se seznámit s technologiemi, které vám umožňují zadávat požadavky na server z prohlížeče. Podívejme se, jak v praxi řešit chyby při práci se sítí, pokud se něco pokazí.

Asynchronie.

setTimeout a setInterval.
Slib.

Práce se sítí.

načíst a kontaktovat server.
Zpracování chyb v žádostech.

DevTools: práce se síťovými požadavky v síti.

První týden obrany
Dokončení práce na projektu a příprava na závěrečnou obhajobu.

Část 12 Zpětná vazba a optimalizace
Optimalizujeme práci s daty a událostmi na našem webu. Implementujeme jasnou a uživatelsky přívětivou zpětnou vazbu rozhraní.

Pokročilá práce s poli.

Řazení.
Filtrace.

Optimalizace výkonu.

Padací rámy - škrcení.
Eliminace odskoku – odskoku.

Soubor API.

URL.createObjectURL().
FileReader.

Druhý týden obrany
První posouzení projektu hodnotícím mentorem podle kritérií kvality.

Třetí týden obrany
Vylepšení projektu na základě připomínek hodnotícího mentora a jeho předložení k druhému posouzení.

Část 13 Konečná
Pojďme si kurz shrnout a poté probrat funkce JavaScriptu, se kterými se můžete při práci setkat. Koncept staršího kódu a co s ním dělat, s kódem. Pojďme se rychle podívat na pokročilé vývojářské nástroje front-end, abyste pochopili, kam jít dál.

Speciální JavaScript.

Přísný režim „použij přísný“.
Volitelné středníky.

Starší kód.

jQuery.
var a funkční rozsah.
XMLHttpRequest.

Funkce konstruktoru.

Prototypy.

Pokročilé nástroje.

Webpack.

Transpilátory a polyfilly.

Babel.

Čtvrtý týden obrany
Provádění konečných úprav a získání konečné známky.