JavaScript and HTML5: Develop Web Applications

Ðàñïèñàíèå êóðñà

Àííîòàöèÿ:

Äàííûé êóðñ íàó÷èò Âàñ òîìó, êàê êîäèðîâàòü ïðîãðàììíóþ ëîãèêó  â âåá-ïðèëîæåíèÿõ, èñïîëüçóÿ JavaScript, à òàêæå, êàê ñîçäàâàòü ñòðàíèöû HTML5, ÷òîáû ðàçîáðàòü è îòïðàâèòü äàííûå c èñïîëüçîâàíèåì ôîðìàòà HTML5. Ïîìèìî ýòîãî - ñîçäàâàòü è èçìåíÿòü Îáúåêòíóþ ìîäåëü äîêóìåíòà ( Document Object Model - DOM), ñîçäàâàòü áûñòðî ðåàãèðóþùèå ñëîè ñ CSS3, ñîõðàíÿòü ëîêàëüíûå äàííûå ñ JSON è “ðèñîâàòü” íà HTML5 õîëñòå (HTML5 canvas). Ñòóäåíòû ñìîãóò äîáàâèòü èíòåðàêòèâíîñòü ê âåá-ñòðàíèöàì, ïîëó÷àÿ ïðè ýòîì íåîáõîäèìûé ïðàêòè÷åñêèé îïûò, ïðèìåíèòü äèíàìè÷åñêèå äàííûå, èñïîëüçóÿ AJAX, REST è WebSocket ñ JavaScript.

Àóäèòîðèÿ:

• Ðàçðàáîò÷èêè ïðèëîæåíèé
• Ðàçðàáîò÷èêè
• Ðàçðàáîò÷èêè ôîðì
• Ðàçðàáîò÷èêè J2EE
• Ðàçðàáîò÷èêè Java
• Ðàçðàáîò÷èêè Java EE
• Âåäóùèå ñïåöèàëèñòû
• Òåõíè÷åñêèå êîíñóëüòàíòû 

Ïðåèìóùåñòâà äëÿ Âàñ:

Ýòîò êóðñ ïîäãîòîâèò ëþáîãî âåá-ðàçðàáîò÷èêà ñ äîñòàòî÷íûì êîëè÷åñòâîì çíàíèé ïî JavaScript, HTML5 è CSS3, íåîáõîäèìûõ äëÿ ñîçäàíèÿ ñëîæíûõ è ñîâðåìåííûõ ñàéòîâ, â òîì ÷èñëå äëÿ òåõ, êòî íàäååòñÿ ó÷àñòâîâàòü â ðàçðàáîòêå “front-end” âåá-ïðèëîæåíèé ñ èñïîëüçîâàíèåì Java EE.

Öåëè êóðñà:

• Ñîçäàâàòü è çàïóñêàòü HTML5 ïðèëîæåíèÿ â ñðåäå NetBeans
• Ïèñàòü êîä íà ÿçûêå JavaScript ñ èñïîëüçîâàíèåì ïåðåìåííûõ, îáúåêòîâ, ôóíêöèé è ìàññèâîâ
• Ñîçäàâàòü ôîðìû HTML5, ÷òîáû çàïðîñèòü è îáðàáîòàòü èíôîðìàöèþ
• Ïèñàòü ôóíêöèè JavaScript äëÿ ñîáûòèé HTML5
• Óïðàâëÿòü ýëåìåíòàìè HTML5 ñ èñïîëüçîâàíèåì DOM
• Èñïîëüçîâàòü JavaScript API
• Ñîõðàíÿòü îáúåêòû, èñïîëüçóÿ JSON API, Cookies è Local Storage
• Ñòèëü HTML äîêóìåíòîâ ïðè íàëè÷èè CSS3
• Èñïîëüçîâàòü Media Queries è ìåäèà-äàííûå, ÷òîáû àäàïòèðîâàòü âåá-ñòðàíèöó ê ðàçëè÷íûì ðàçìåðàì ýêðàíà
• Ñîçäàâàòü çàìûêàíèÿ (closures), ïðîòîòèïû è ìîäóëè â JavaScript
• Ñîçäàâàòü õîëñò (Canvas), èíòåðâàëû, âçàèìîäåéñòâèÿ âèäà Drag and Drop è ìàíèïóëÿöèè ìûøüþ â HTML5
• Ïðèìåíÿòü AJAX ïðè èñïîëüçîâàíèè RESTful Web Services
• Èäåíòèôèöèðîâàòü òðåáóåìûå Back-End òåõíîëîãèè äëÿ REST è WebSocket ñ Java EE7
• Èñïîëüçîâàòü Selectors è ìàíèïóëÿòîðû DOM äëÿ îáðàáîòêè äîêóìåíòîâ ñ jQuery
• Îáðàáàòûâàòü ñîáûòèÿ è îòâåòû ñåðâåðà AJAX ñ jQuery

Ïðåäâàðèòåëüíàÿ ïîäãîòîâêà:

• Áàçîâûé îïûò â ëþáîì ÿçûêå ïðîãðàììèðîâàíèÿ
• Áàçîâûå çíàíèÿ ïî êîíöåïöèÿì âåá-òåõíîëîãèé

Ïðîãðàììà êóðñà:

Ââåäåíèå
Èçó÷åíèå öåëåé êóðñà. Óñòàíîâêà ñðåäû.

Îñíîâû Âåá-ïðèëîæåíèÿ
Ñîçäàíèå ïðèëîæåíèé HTML5 â NetBeans. Âûïîëíåíèå ñòðàíèö HTML è èõ àíàëèç ïðè ïîìîùè ñðåäñòâ ðàçðàáîòêè áðàóçåðà. Îòäåëåíèå CSS è êîíòåíòà JavaScript îò ñòðàíèö HTML. Âûïîëíåíèå Ïðèëîæåíèé HTML5 â NetBeans. Ïðàêòèêà: Ñîçäàíèå Âåá-ïðèëîæåíèÿ HTML5 ñ NetBeans 8. Ïðàêòèêà: Ðàçäåëåíèå ðåñóðñîâ JavaScript è CSS.

Îñíîâû JavaScript
Íàïèñàíèå êîäà JavaScript äëÿ îáúÿâëåíèÿ ïåðåìåííûõ, îáúåêòîâ, ôóíêöèé è ìàññèâîâ. Ñîçäàíèå ìàññèâîâ JavaScript äëÿ õðàíåíèÿ äàííûõ. Îïðåäåëåíèå Îáúåêòîâ JavaScript êàê õðàíèëèù ïàðû “êëþ÷-çíà÷åíèå”. Äîñòóï ê ñâîéñòâàì îáúåêòà. Ïðàêòèêà: Íàïèñàíèå êîäà JavaScript äëÿ ïðîõîæäåíèÿ òåñòîâ â Jasmine.

Ñî÷åòàíèå HTML5 è JavaScript â Âåá-ïðèëîæåíèÿõ
Ñîçäàíèå äîêóìåíòîâ HTML5. Ñîçäàíèå Ôîðì HTML5 äëÿ çàïðîñà èíôîðìàöèè è å¸ îáðàáîòêè. Ïðîâåðêà äîïóñòèìîñòè ôîðì ââîäà HTML5 . Íàïèñàíèå ôóíêöèé JavaScript äëÿ ñîáûòèé HTML5. Óïðàâëåíèå ýëåìåíòàìè HTML5 ñ èñïîëüçîâàíèåì DOM. Ïðàêòèêà: Íàïèñàíèå êîäà JavaScript äëÿ èçìåíåíèÿ ýëåìåíòîâ äîêóìåíòà.

JavaScript API
Ïðîâåðêà ïîëüçîâàòåëüñêîãî ââîäà ñ ïîìîùüþ JavaScript è ðåãóëÿðíûõ âûðàæåíèé. Îáðàáîòêà íåñêîëüêèõ çíà÷åíèé ñ èñïîëüçîâàíèåì JavaScript Collections. Óïðàâëåíèå äàòàìè ñ èñïîüçîâàíèåì JavaScript Date API. Ïðàêòèêà: Ñîçäàíèå ïðèëîæåíèÿ “meal-divider”. Ïðàêòèêà: Ðàñ÷åò îáùåãî êîëè÷åñòâà â çàâèñèìîñòè îò âîçðàñòà.

Äàííûå Âåá-ïðèëîæåíèÿ
Ïðåîáðàçîâàíèå Îáúåêòîâ ê âèäó JSON Strings. Ðàçáîð JSON Strings âíóòðè JavaScript Objects. Ñîõðàíåíèå Objects ïðè ïîìîùè JSON API , Cookies è Local Storage. Ïðàêòèêà: Ñîõðàíåíèå ïîëüçîâàòåëüñêîãî ââîäà ïðè ïîìîùè JSON API è Local Storage. Ïðàêòèêà: Âîññòàíîâëåíèå ñîõðàíåííûõ äàííûõ, â ìîìåíò çàãðóçêè ñòðàíèöû.

Ñòèëü ïðèëîæåíèé, èñïîëüçóþùèõ CSS3 è JavaScript
Ïðèìåíåíèå CSS-ñòèëåé ê äîêóìåíòàì HTML. Èñïîëüçîâàíèå âîçìîæíîñòåé CSS3 äëÿ äîáàâëåíèÿ äèíàìè÷åñêèõ ñòèëåé ê ýëåìåíòàì ñ ñîáûòèÿìè. Èñïîëüçîâàòü Media Queries è ìåäèà-äàííûå, ÷òîáû àäàïòèðîâàòüñÿ ê ðàçëè÷íûì ýêðàíàì. Èñïîëüçîâàíèå JavaScript, äëÿ äîáàâëåíèÿ è óäàëåíèÿ ñòèëåé èç ýëåìåíòîâ. Ïðàêòèêà: Íàïèñàíèå ïðàâèë CSS, äëÿ óñòàíîâëåíèÿ ñòèëåé ýëåìåíòîâ â äîêóìåíòå.

Ïðîäâèíóòûé JavaScript
Îïðåäåëåíèå Ôóíêöèé. Ñîçäàíèå çàìûêàíèé (closures) è îáúÿñíåíèå êîìïîíåíòû Variable Scope. Íàïèñàíèå ôóíêöèé JavaScript â âèäå ìîäóëåé. Ñîçäàíèå ïðîòîòèïîâ (Prototypes). Ñîçäàíèå âçàèìîäåéñòâèé âèäà Drag-and-Drop ñ èñïîëüçîâàíèåì JavaScript. Ñîçäàíèå òàéìåðîâ è çàäåðæåê JavaScript, äëÿ ïîëó÷åíèÿ àíèìàöèè â HTML. Èñïîëüçîâàíèå îáúåêòà HTML5 Canvas äëÿ ðèñîâàíèÿ íà ñòðàíèöàõ. Ïðàêòèêè: Ñîçäàíèå õîëñòà (Canvas), èíòåðâàëîâ, Drag and Drop è ìàíèïóëÿöèè ìûøüþ.

AJAX è WebSocket
Èñïîëüçîâàíèå AJAX ñ JavaScript äëÿ çàïðîñà äàííûõ îò ñåðâåðà ïðèëîæåíèé. Ïðèìåíåíèå AJAX ïðè èñïîëüçîâàíèè RESTful Web Services . Èñïîëüçîâàíèå âûçîâîâ AJAX äëÿ ñîçäàíèÿ âçàèìîäåéñòâèÿ âèäà"Server Push" . Îïðåäåëåíèå àëüòåðíàòèâ AJAX äëÿ èñïîëüçîâàíèÿ â óñòàðåâøåì êîäå. Ïîíèìàíèå êîìïîíåíòû AJAX Security. Èñïîëüçîâàíèå êîìïîíåíòû WebSocket, äëÿ ñîçäàíèÿ âçàèìîäåéñòâèÿ âèäà Real-time Client/Server. Îïðåäåëåíèå òðåáóåìûõ Back-End òåõíîëîãèé äëÿ REST è WebSocket ñ Java EE7. Ïðàêòèêè: Ñîçäàíèå îäíîñòðàíè÷íîãî ïðèëîæåíèÿ, èñïîëüçóþùåãî RESTand a Tic-Tac-Toe Game Client ñ WebSocket.

Ðàçðàáîòêà ïðèëîæåíèé ñ jQuery
Äîáàâëåíèå jQuery è áèáëèîòåê UI jQuery ê âàøèì ïðîåêòàì. Èñïîëüçîâàíèå Selectors è ìàíèïóëÿòîðîâ DOM äëÿ îáðàáîòêè äîêóìåíòîâ. Îáðàáîòêà ñîáûòèé ñ jQuery. Àíèìàöèÿ ýëåìåíòîâ è ïðèìåíåíèå ýôôåêòîâ â äîêóìåíòå. Îáðàáîòêà îòâåòîâ ñåðâåðà AJAX.