Cod: WEB-007
Durata: 40 ore
Durata: 40 ore
Descriere
In acest training discutam despre JavaScript (EcmaScript 2015+), cum sa folosim JavaScript in browsere (eveniment UI events, manipularea HTML cu DOM CSS), module JavaScript (NPM, Webpack) si cum sa lucram cu servere (HTTP protocol, REST, AJAX, Axios, WebSocket). Este si un prim pas pentru cei care vor sa invete framework-urile Angular si React.Cursul acopera si subiecte legate de OOP, JSON si programare functionala. Vei invata cum sa lucrezi cu clase, obiecte, arrays, dates, immutability si asynchronicity.
Subiecte curs
a:2:{s:4:"TEXT";s:8834:"Limbajul JavaScript- JavaScript versiuni si implementari
- JavaScript application scope (browser, server side, mobile development)
- Tipuri de date: String, Number, Boolean (notiuni truthy si falsy)
- Operators, operator priorities
- Declararea variabilelor: var, const, let
- Loops: while, for, for … in, for …of
- Cum lucram cu numbers si strings
- Values null si undefined: diferente si use cases
- Cum lucram cu consola
- Exceptii in JavaScript
JSON, objects si arrays
- JSON format, example
- JSON.parse si stringify
- Obiecte, cum lucram cu Object class
- Crearea de obiecte (folosirea {}, operator new, method create)
- Prototype inheritance, __proto__ reference
- Getters si Setters
- Operator in si hasOwnProperty, notiunea de enumerable properties
- Method toString(), calling si overriding a acestei method
- Method valueOf(), calling si overriding a acestei method
- Crearea de arrays: literals si new Array()
- Schimbarea automata a array size
- Getting si setting array length, array truncation
- Folosirea metodelor methods join() si concat()
- Folosirea metodei, setarea ordinii array sorting
- Folosirea metodelor slice si splice
- Folosirea metodelor push, pop, shift, unshift: crearea unui stack sau queue
Cum lucram cu date si time
- Folosirea constructor new Date()
- Notiunea de reprezentare pe computer a datei ca time elapsed since Epoch
- Folosirea getTime() si setTime()
- Analiza date string
- Optiuni pentru crarea de strings in JS: folosirea single si double quotes
- String interpolation (string in apostrophes)
- Caractere speciale in string
- String concatenation, upper si lower case
- Cautarea unei substring cu indexOf() si lastIndexOf()
- Selectarea unei substring cu substring() si substr()
- Folosirea metodelor includes, endsWith, startsWith
Folosirea JavaScript in browser: DOM Model
- Managemenul ferestrei de browser, document, events, si layout (CSS)
- Window object si aplicatiile sale
- Cum conectam codul JavaScript la pagina HTML
- Secventa scripts execution pe pagina page
- Caching scripts, CDN servers, JavaScript force reloading
- Folosirea references, conectarea JavaScript la references
- Onload event si cum este folosit
- Atacuri XSS impotriva web sites
- Cum lucram cu DOM: folosirea window, document, childNodes
- Manipularea unui document folosind DOM: crearea, stergerea si mutarea elementelor
- Folosirea getElementById(), getElementsByTagName(), getElementsByClassName() pentru a cauta elemente intr-o pagina
- Folosirea metodelor si proprietatilor unui HTMLDocument sau HTMLElement
Evenimente in Browser
- Notiunea de event-driven programming
- Event handlers si listeners
- Atasarea de event handlers la addEventListener()
- Proprietati si metode ale Event class
- Events bubbling si capturing
- Stoparea propagarii
- Window events
- Mouse si keyboard events, proprietati speciale ale evenimentelor
- Form Events
Cum lucram cu CSS si Managing Styles
- CSS standard, principalele proprietati ale CSS
- Stiluri comune si stiluri ale elementelor separate
- Cascading styles
- CSS selectors
- Schimabrea CSS cu JavaScript
- CSS box model: margin, padding, border
- Managementul vizibilitatii elementelor: visibility si display
- Pozitionarea elementelor: absolute, fixed, relative, setting top si left
- Cum masuram – px, pt, etc.
- Element overflow si managementul cu overflow property
- Managementul document layers: zIndex property
- Animatii, mutarea elementelor
- Cum lucram cu clase, setarea className
- Cum lucram cu visibility si tranzitii
- Method querySelectorAll()
Cum lucram cu Modules in JavaScript, NPM, Webpack
- De ce sa folosim module
- Export din module
- Import din module
- Re-export
- Cum lucram cu NPM, package.json
- Node_modules folder, loading packages cu NPM
- Global si local installation a packages
- Folosirea Webpack pentru package assembly
- CSS si TypeScript loaders
- Configurarea webpack.config.js
- Crearea unui bundle, compressing
- Webpack plugins
- Folosirea legacy modular systems – CommonJS si AMD
- Folosirea CommonsChunkPlugin, multiple entry points
- Hot module replacement (HMR)
Classes si Inheritance in JavaScript
- Prototype inheritance, reference __proto__
- Object prototype
- Folosirea instanceof
- Keyword class, creating classes
- Keyword super
- Folosirea metodei Object.assign()
- Folosirea metodei Object.defineProperty()
- Getters si setters
- Spread operator atunci cand lucram cu objects si arrays
- Destructuring array si object
Programarea functionala in JavaScript
- Functii ca variabile
- Array arguments
- Class Function, methods call() si apply()
- Method bind(), instalare si cativa parametri cu bind
- Closures in JavaScript
- Encapsulation values cu closures
- Crearea unei functii cu Function constructor: constructing a string
- Arrow functions, cum le folosim
- Functional manipulation cu array: find, findIndex, filter
- Exemple de utilizare a map/filter/reduce pentru data processing intr-o array
Immutability, Testing, MVC Pattern
- Notiunea de immutability, avantaje
- Metode mutable si immutable pentru a schimba objects si arrays
- Notiuni si beneficii Virtual DOM
- Testarea functiilor immutable, folosind Jest
- Memoization, avantaje
- Erori comune si recomandari pentru utilizarea programarii functionale
- MVC pattern, crearea unei user interface
- Prezentare a principalelor libraries pentru interface development: Angular, React, Vue
Asynchronicity in JavaScript. Promises
- Notiuni legate de asynchronicity si necesitatea ei
- Cum lucram setTimeout, setInterval, clearTimeout
- Callback functions
- Pierderea acesteia in folosirea unei functii callback. Solutii (folosirea bind, arrow functions, etc.)
- Notiunea de promises, Promise dintr-o asynchronous function
- Method Promise.all(), cum o aplicam
- Async/await syntax, optiuni de utilizare, restrictii
- Handling exceptions: Promise reject, exception handling in asynchronous calls
Cum lucram cu serverul. HTTP Protocol. REST Services
- HTTP protocol
- HTTP headers si methods (GET, POST, PUT, DELETE, etc.), data transfer
- HTTP servers (prezentare)
- HTTP server response codes
- Folosirea de formulare pentru data uploading
- Cum incarcam date pe server cu AJAX
- REST architecture: avantaje si particularitati
- Implementarea CRUD (Create/Read/Update/Delete) cu REST
- Folosirea fetch() function pentru a obtine si trimite date
- Documentarea serviciilor REST cu Swagger
- Notiunea de HATEOAS, cum o folosim
AXIOS Library. WebSocket Protocol
- Comparatie intre high-level Axios library si folosirea low-level fetch() method
- GET si POST requests in Axios
- Folosirea async/await cu Axios
- Error handling cand folosim Axios
- Anularea unei cereri cu Axios
- WebSocket Protocol
- Exemple de utilizare a WebSocket, comparatie cu HTTP
Obiective
- O intelegere cat mai buna a functionalitatilor JavaScript
- Dezvoltarea unei baze solide pentru a putea sa inveti sa lucrezi cu React sau Angular
- Invatarea structurii si sintaxei acestui limbaj de programare, si object model
- O revizuire detaliata a DOM model pentru HTML document si CSS
- Tehnici pentru managementul DOM si CSS folosind JavaScript
- Event handling models si crearea de formulare, precum si o trecere in revista a tehnologiilor JSON si Ajax, asynchronicity si lucratul cu servere
Public tinta
- Programatori web
Cerinte curs
- Cunostinte de HTML si CSS. Experienta in programare cu orice limbaj asemanator C (C, C++, Java, C#) este preferabila.