O prezentare despre aspectele de bază ale limbajului de programare JavaScript destinată în special începătorilor (e.g., elevilor de liceu) în contextul dezvoltării de aplicații Web la nivel de client.
A presentation regarding the basic aspects of the JavaScript programming language especially focused on beginners (e.g., high-school students) in the context of client-side Web application development.
CLIW 2015-2016 (8/13) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...Sabin Buraga
Despre programarea în limbajul JavaScript direct în browser-ul Web (DOM, Ajax, Comet, mash-up, CORS și multe altele). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (13/13) Perspective Web la nivel de client. Limbajul ES6Sabin Buraga
Cele mai importante aspecte referitoare la noua versiune a limbajului JavaScript (ES6 sau ECMAScript 2015), inclusiv diverse exemplificări. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (7/13) Limbajul de programare JavaScriptSabin Buraga
Aspecte esențiale referitoare la limbajul de programare JavaScript (de la sintaxa de bază la obiecte & date JSON). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (10/13) Programare Web. Suita de tehnologii HTML5Sabin Buraga
O viziune de ansamblu asupra suitei de tehnologii HTML5, plus exemple referitoare la generarea de conținut multimedia via SVG sau via elementul canvas. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
O prezentare despre aspectele de bază ale limbajului de programare JavaScript destinată în special începătorilor (e.g., elevilor de liceu) în contextul dezvoltării de aplicații Web la nivel de client.
A presentation regarding the basic aspects of the JavaScript programming language especially focused on beginners (e.g., high-school students) in the context of client-side Web application development.
CLIW 2015-2016 (8/13) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...Sabin Buraga
Despre programarea în limbajul JavaScript direct în browser-ul Web (DOM, Ajax, Comet, mash-up, CORS și multe altele). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (13/13) Perspective Web la nivel de client. Limbajul ES6Sabin Buraga
Cele mai importante aspecte referitoare la noua versiune a limbajului JavaScript (ES6 sau ECMAScript 2015), inclusiv diverse exemplificări. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (7/13) Limbajul de programare JavaScriptSabin Buraga
Aspecte esențiale referitoare la limbajul de programare JavaScript (de la sintaxa de bază la obiecte & date JSON). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (10/13) Programare Web. Suita de tehnologii HTML5Sabin Buraga
O viziune de ansamblu asupra suitei de tehnologii HTML5, plus exemple referitoare la generarea de conținut multimedia via SVG sau via elementul canvas. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Detalii despre cele mai importante API-uri JavaScript standardizate specifice HTML5 pe care le oferă navigatoarele Web actuale, inclusiv diverse exemple. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (12/13) Performanța aplicaţiilor Web la nivel de clientSabin Buraga
O privire generală privind performanța aplicațiilor Web la nivel de client (tehnici, strategii, exemple reale și altele). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2017-2018 (5/12) Limbajul de programare JavaScript. Aspecte esenţialeSabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Diverse aspecte de interes privind ingineria dezvoltării aplicațiilor JavaScript, inclusiv utilizarea instrumentelor software specifice. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (6/13) (Re)găsirea resurselor Web. De la motoare de căutare și...Sabin Buraga
Detalii privind căutarea resurselor Web. De la motoare de căutare și SEO la date structurate (microformate + scheme de date HTML5). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Un mini-tutorial pentru începători (participanți la Școala de vară "Informatica la Castel", Macea, Arad, 2014) privitor la limbajul JavaScript, prezentând caracteristicile esențiale și maniera de rulare la nivel de client (navigator). Sunt incluse exemplificări bazate pe biblioteca jQuery. Acces la codul-sursă: http://jsfiddle.net/user/busaco/
A mini-tutorial for beginners (participants to "Computer Science at the Castel" Summer School, Macea, Arad, 2014) regarding main features of the JavaScript programming language for the front-end Web development. Several examples, using jQuery library, are also provided.
Considerații vizând proiectarea siturilor Web, inclusiv detalii despre design vizual (layout, tipografie, cromatică etc.) și design Web responsiv. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansambluSabin Buraga
O viziune de ansamblu referitoare la vizualizarea datelor în contextul Web, inclusiv diverse tehnici + exemple reale. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Aspecte esențiale privitoare la limbajul de marcare HTML5 (o prezentare pentru un hackathon Web destinat elevilor de liceu).
Essential aspects about the HTML5 markup language (a Web hackathon presentation for high-school students).
Web 2016 (09/13) Procesarea datelor XML & HTML. Simple API for XML. Procesări...Sabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2016 (05/13) Programare Web – Dezvoltarea aplicațiilor Web via Node.jsSabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2016 (04/13) Programare Web – Dezvoltarea aplicațiilor Web în PHPSabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2016 (07/13) Modelarea datelor. Extragerea datelor cu XPath. Validări XML...Sabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Detalii despre cele mai importante API-uri JavaScript standardizate specifice HTML5 pe care le oferă navigatoarele Web actuale, inclusiv diverse exemple. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (12/13) Performanța aplicaţiilor Web la nivel de clientSabin Buraga
O privire generală privind performanța aplicațiilor Web la nivel de client (tehnici, strategii, exemple reale și altele). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2017-2018 (5/12) Limbajul de programare JavaScript. Aspecte esenţialeSabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Diverse aspecte de interes privind ingineria dezvoltării aplicațiilor JavaScript, inclusiv utilizarea instrumentelor software specifice. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
CLIW 2015-2016 (6/13) (Re)găsirea resurselor Web. De la motoare de căutare și...Sabin Buraga
Detalii privind căutarea resurselor Web. De la motoare de căutare și SEO la date structurate (microformate + scheme de date HTML5). Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Un mini-tutorial pentru începători (participanți la Școala de vară "Informatica la Castel", Macea, Arad, 2014) privitor la limbajul JavaScript, prezentând caracteristicile esențiale și maniera de rulare la nivel de client (navigator). Sunt incluse exemplificări bazate pe biblioteca jQuery. Acces la codul-sursă: http://jsfiddle.net/user/busaco/
A mini-tutorial for beginners (participants to "Computer Science at the Castel" Summer School, Macea, Arad, 2014) regarding main features of the JavaScript programming language for the front-end Web development. Several examples, using jQuery library, are also provided.
Considerații vizând proiectarea siturilor Web, inclusiv detalii despre design vizual (layout, tipografie, cromatică etc.) și design Web responsiv. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
CLIW 2015-2016 (5/13) Vizualizarea datelor – o privire de ansambluSabin Buraga
O viziune de ansamblu referitoare la vizualizarea datelor în contextul Web, inclusiv diverse tehnici + exemple reale. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Aspecte esențiale privitoare la limbajul de marcare HTML5 (o prezentare pentru un hackathon Web destinat elevilor de liceu).
Essential aspects about the HTML5 markup language (a Web hackathon presentation for high-school students).
Web 2016 (09/13) Procesarea datelor XML & HTML. Simple API for XML. Procesări...Sabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2016 (05/13) Programare Web – Dezvoltarea aplicațiilor Web via Node.jsSabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2016 (04/13) Programare Web – Dezvoltarea aplicațiilor Web în PHPSabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2016 (07/13) Modelarea datelor. Extragerea datelor cu XPath. Validări XML...Sabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
A presentation explaining to (high-school) students what Web development is, including career information.
O prezentare pentru elevi și studenți oferind informații despre ceea ce înseamnă dezvoltarea de apllicații Web.
STAW 12/12: (Re)găsirea resurselor Web. De la motoare de căutare şi SEO la da...Sabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
CLIW 2017-2018 (3/12) (Re)găsirea resurselor Web. De la motoare de căutare şi...Sabin Buraga
O prelegere din cadrul materiei "aplicaţiilor Web la nivel de client" (CLIW), fondată și predată de Sabin Buraga la Facultatea de Informatică a Universității "Alexandru Ioan Cuza" din Iași.
Detalii la https://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Dezvoltarea aplicatiilor orientate spre servicii Web. De la REST la mash-up-u...Sabin Buraga
A presentation (available in Romanian language) about RESTful Web service development, including several considerations regarding mash-ups & APIs.
For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html
An overview of HTML5.
O prezentare generală referitoare la suita de tehnologii HTML5, incluzând aspecte legate de grafică vectorială (SVG) și raster (via <canvas> și JavaScript), plus informații despre microdatele HTML5 pe baza modelelor schema.org.
Diverse aspecte privind ingineria dezvoltării aplicaţiilor JavaScript, inclusiv utilizarea instrumentelor software specifice. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Considerații vizând proiectarea siturilor Web, inclusiv detalii despre design vizual și design Web responsiv. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
WADe 2017-2018 (5/12) Data Modeling in RDF (Resource Description Framework)Sabin Buraga
A lecture delivered for "Web Application Development" discipline (MSc studies at Faculty of Computer Science, 'Alexandru Ioan Cuza' University of Iasi, Romania): https://profs.info.uaic.ro/~busaco/teach/courses/wade/web-film.html
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uriSabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Web 2016 (06/13) Modelarea datelor. Familia XML + spații de numeSabin Buraga
Tehnologii Web (prezentările aferente disciplinei predate de Sabin Buraga la Facultatea de Informatică, Universitatea A.I. Cuza din Iași) – detalii la http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni WebSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Similar to Limbajul JavaScript: o prezentare generală (20)
Web 2020 01/12: World Wide Web – aspecte arhitecturaleSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie WebSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object ModelSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 09/12: Servicii Web. Paradigma RESTSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...Sabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţialeSabin Buraga
Prelegere din cadrul materiei "Tehnologii Web" predată de Dr. Sabin Buraga.
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
STAW 08/12: Programare Web. Suita de tehnologii HTML5Sabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
STAW 11/12: Performanţa aplicaţiilor Web la nivel de clientSabin Buraga
Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
O prezentare referitoare la dezvoltarea aplicațiilor Web dedicată elevilor de liceu. Prelegerea a fost susținută în cadrul Școlii de vară SummerIS organizată la Universitatea Alexandru Ioan Cuza din Iași, Facultatea de Informatică (iulie 2019).
A presentation regarding Web application development delivered to high-school students, a part of the SummerIS summer school organized at the Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania (July 2019).
HCI 2018 (2/10) Human Factor. From interaction idioms to human capacities & c...Sabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (3/10) Design Models, Methodologies and GuidelinesSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual DesignSabin Buraga
A lecture delivered for Human-Computer Interaction, a post-graduate level discipline taught by Dr. Sabin Buraga at Faculty of Computer Science, Alexandru Ioan Cuza University of Iasi, Romania.
Visit also https://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html
3. istoric
Dr. Sabin Buragawww.purl.org/net/busaco
Inventat de Brendan Eich (1995)
denumit initial LiveScript
4. istoric
Dr. Sabin Buragawww.purl.org/net/busaco
Implementat in premiera de browser-ul
Netscape Navigator
5. istoric
Dr. Sabin Buragawww.purl.org/net/busaco
Adaptat de Microsoft: JScript (1996)
6. istoric
Dr. Sabin Buragawww.purl.org/net/busaco
Standardizat in 1997 de ECMA
European Computer Manufacturers Association
ECMAScript
ECMA-262
www.ecma-international.org
7. istoric
Dr. Sabin Buragawww.purl.org/net/busaco
Standardizat in 1997 de ECMA
European Computer Manufacturers Association
ECMAScript
versiunea standardizata actuala: 5.1 (iunie 2011)
versiunea in lucru: 6.0 (în curând)
www.ecma-international.org/publications/standards/Ecma-262.htm
8. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Limbaj de tip script (interpretat)
9. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Limbaj de tip script (interpretat)
destinat sa manipuleze, sa automatizeze
si sa integreze facilitatile oferite
de un anumit sistem
10. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Limbaj de tip script (interpretat)
nu necesita intrari/iesiri in mod implicit
12. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Mediu de executie (host-environment)
navigator Web
permite rularea de aplicatii Web la nivelul unei platforme
(un sistem de operare)
desktop (e.g., Windows 8)
mobil (Android, iOS, WP7, WP8)
…
13. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Mediu de executie (host-environment)
navigator Web
“injectarea” de cod JavaScript
in documentele (X)HTML via elementul <script>
14. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Mediu de executie (host-environment)
navigator Web
“injectarea” de cod JavaScript
in documentele (X)HTML via elementul <script>
cod extern vs. cod inclus in pagina Web
15. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Mediu de executie (host-environment)
platforma de dezvoltare a aplicatiilor
e.g., Flex/AIR
16. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Mediu de executie (host-environment)
software de sine-statator
Adobe Creative Suite, UltraEdit etc.
17. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Mediu de executie (host-environment)
procesor (engine) independent
exemplificare:
Yahoo! Widget Engine
18. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Mediu de executie (host-environment)
componente ale sistemului de operare
Dashboard – Mac OS X
Sidebar – Windows Vista/7
19. caracteristici
Dr. Sabin Buragawww.purl.org/net/busaco
Mediu de executie (host-environment)
server Web
exemplu tipic: node.js
20. caracteristici: sintaxa
Dr. Sabin Buragawww.purl.org/net/busaco
Cuvinte rezervate:
break else new var case finally return void catch
for switch while continue function this with default
if throw delete in try do instanceof typeof
21. caracteristici: sintaxa
Dr. Sabin Buragawww.purl.org/net/busaco
Alte cuvinte rezervate:
abstract enum int short boolean export interface
static byte extends long super char final native
synchronized class float package throws const
goto private transient debugger implements
protected volatile double import public
22. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Number
reprezentare in dubla precizie
stocare pe 64 biti
23. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
String
secvente de caractere Unicode
fiecare caracter ocupa 16 biti
24. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Boolean
secvente ce se pot evalua ca fiind true/false
25. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Object
Function
Array
Date
RegExp
si altele
26. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Null
semnifica “nici o valoare”
27. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Undefined
are semnificatia “nici o valoare asignata inca”
29. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Nu exista valori intregi
convertirea unui sir in numar: parseInt ()
parseInt ("123") 123
parseInt ("11", 2) 3
indica baza
de numeratie
30. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Operatii avansate cu numere se pot realiza
via obiectul predefinit Math
31. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Operatii avansate cu numere se pot realiza
via obiectul predefinit Math
constante predefinite:
Math.PI
Math.E
Math.LN10
etc.
32. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Operatii avansate cu numere se pot realiza
via obiectul predefinit Math
metode:
Math.abs(x) Math.ceil(x) Math.cos(x) Math.exp(x) Math.floor(x)
Math.log(x) Math.max(x, ..) Math.min(x, ..) Math.pow(x, y)
Math.random() Math.round(x) Math.sin(x) Math.sqrt(x) etc.
33. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
“Valoarea” NaN (“not a number”)
parseInt ("Salut") NaN
isNaN (NaN + 3) true
34. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Valori speciale:
Infinity
–Infinity
35. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Un caracter reprezinta un sir de lungime 1
36. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Sirurile sunt obiecte
"Salut".length 5
37. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Metode pentru siruri:
s.charAt(pos) s.charCodeAt(pos) s.concat(s1, ..)
s.indexOf(s1, start)
s.match(regexp) s.replace(search, replace)
s.slice(start, end) s.split(separator, limit)
s.substring(start, end)
s.toLowerCase() s.toUpperCase()
etc.
38. caracteristici: tipuri de date
Dr. Sabin Buragawww.purl.org/net/busaco
Valorile 0, "", NaN, null, undefined
sunt interpretate ca fiind false
!!234 true
39. caracteristici: variabile
Dr. Sabin Buragawww.purl.org/net/busaco
Variabilele se declara cu var
var marime;
var numeAnimal = "Tux";
variabilele declarate fara valori asignate,
se considera undefined
40. caracteristici: variabile
Dr. Sabin Buragawww.purl.org/net/busaco
Daca nu se foloseste var,
atunci variabila este considerata globala
de evitat asa ceva!
41. caracteristici: variabile
Dr. Sabin Buragawww.purl.org/net/busaco
Valorile sunt “legate” tardiv la variabile
(late binding)
42. caracteristici: variabile
Dr. Sabin Buragawww.purl.org/net/busaco
Mai nou, exista posibilitatea marginirii
domeniului de vizibilitate (scope) via let
var x = 5;
var y = 0;
console.log (let (x = x + 10, y = 12) x + y); // 27
console.log (x + y); // 5
43. caracteristici: operatori
Dr. Sabin Buragawww.purl.org/net/busaco
Pentru numere: + – * / %
De asignare: += –= *= /= %=
Incrementare & decrementare: ++ – –
Concatenare de siruri: "Java" + "Script" "JavaScript"
44. caracteristici: operatori
Dr. Sabin Buragawww.purl.org/net/busaco
Conversia tipurilor se face “din zbor”
"3" + 4 + 5 345
3 + 4 + "5" 75
adaugând un sir vid la o expresie,
o convertim pe aceasta la string
45. caracteristici: operatori
Dr. Sabin Buragawww.purl.org/net/busaco
Comparatii: < > <= >= (numere & siruri)
egalitatea se testeaza cu == si !=
1 == true true
46. caracteristici: operatori
Dr. Sabin Buragawww.purl.org/net/busaco
Comparatii: < > <= >= (numere & siruri)
egalitatea se testeaza cu == si !=
1 == true true
a se folosi: 1 === true false
inhiba conversia
tipurilor de date
47. caracteristici: operatori
Dr. Sabin Buragawww.purl.org/net/busaco
Aflarea tipului unei expresii: operatorul typeof
typeof "Tux" string
48. caracteristici: operatori
Dr. Sabin Buragawww.purl.org/net/busaco
Operatorii logici && si ||
var nume = unNume || "Implicit";
49. caracteristici: operatori
Dr. Sabin Buragawww.purl.org/net/busaco
Operatorul de test ? :
var prezenta = (studenti > 33) ? "Prea multi" : "Cam putini…";
50. caracteristici: control
Dr. Sabin Buragawww.purl.org/net/busaco
Testare: if … else, switch
pentru switch, sunt permise expresii la fiecare case
(testarea se realizeaza cu operatorul ===)
switch (2 + 3) { /* sunt permise expresii */
case 4 + 1 : egalitate ();
break;
default : absurd (); // nu se apeleaza niciodata
}
51. caracteristici: control
Dr. Sabin Buragawww.purl.org/net/busaco
Ciclare: while, do … while, for
do {
var nume = preiaNume ();
} while (nume != "");
for (var contor = 0; contor < 33; contor++) {
// de 33 de ori…
}
52. caracteristici: control
Dr. Sabin Buragawww.purl.org/net/busaco
Exceptii: try … catch … finally
try {
// Linii "periculoase" ce pot cauza exceptii
} catch (eroare) {
// Linii executate la aparitia unei/unor exceptii
} finally {
// Linii care se vor executa la final
}
53. caracteristici: control
Dr. Sabin Buragawww.purl.org/net/busaco
Exceptii: try … catch … finally
try {
// Linii "periculoase" ce pot cauza exceptii
} catch (eroare) {
// Linii executate la aparitia unei/unor exceptii
} finally {
// Linii care se vor executa la final
}
emiterea unei exceptii: throw
throw new Error ("O eroare de-a noastra!...");
55. caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Perechi nume—valoare
tabele de dispersie (hash) in C/C++
tablouri asociative in Perl, PHP sau Ruby
HashMaps in Java
56. caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Perechi nume—valoare
numele este desemnat de un sir de caractere
valoarea poate fi de orice tip
57. caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Obiect colectie de proprietati,
avand mai multe atribute
proprietatile pot contine alte obiecte,
valori primitive sau metode
58. caracteristici: obiecte predefinite
Dr. Sabin Buragawww.purl.org/net/busaco
Global
Object
Function
Array
String
Boolean
Number
Math
Date
Regex
59. caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Create prin intermediul operatorului new:
var ob = new Object();
var ob = { }; // echivalent cu linia anterioara
60. caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Create prin intermediul operatorului new:
var ob = new Object();
var ob = { }; // echivalent cu linia anterioara
se prefera aceasta sintaxa
61. caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Accesarea proprietatilor – operatorul .
ob.nume = "Tux";
var nume = ob.nume;
62. caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Accesarea proprietatilor:
ob.nume = "Tux";
var nume = ob.nume;
echivalent cu:
ob["nume"] = "Tux";
var nume = ob["nume"];
65. caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Iterarea proprietatilor – considerate chei:
var pinguin = { 'nume': 'Tux', 'marime': 17 };
for (var proprietate in pinguin) {
afiseaza (proprietate + ' = ' + pinguin[proprietate]);
}
66. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Tipuri speciale de obiecte
proprietatile (cheile) sunt numere,
nu siruri de caractere
67. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Se poate utiliza sintaxa de la obiecte:
var animale = new Array ();
animale[0] = "pinguin";
animale[1] = "omida";
animale[2] = "pterodactil";
animale.length 3
68. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Se poate utiliza sintaxa de la obiecte:
var animale = new Array ();
animale[0] = "pinguin";
animale[1] = "omida";
animale[2] = "pterodactil";
animale.length 3
notatie alternativa – preferata:
var animale = ["pinguin", "omida", "pterodactil"];
69. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Tablourile pot avea “gauri” (sparse arrays):
var animale = ["pinguin", "omida", "pterodactil"];
animale[33] = "om";
animale.length 34
typeof animale[13] undefined
70. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Tablourile pot avea “gauri” (sparse arrays):
var animale = ["pinguin", "omida", "pterodactil"];
animale[33] = "om";
animale.length 34
typeof animale[13] undefined
pentru a adauga elemente putem recurge la:
animale[animale.length] = altAnimal;
71. caracteristici: tablouri – exemplu
Dr. Sabin Buragawww.purl.org/net/busaco
var vector = [ ];
vector[0] = "zero";
vector[new Date().getTime()] = "now";
vector[3.14] = "pi";
for (var elem in vector) {
console.log ("vector[" + elem + "] = " + vector[elem] +
", typeof( " + elem +") == " + typeof (elem));
}
adaptare dupa John Kugelman (2009)
73. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Interari:
for (var it = 0; it < animale.length; it++) {
// de prelucrat animale[it]
}
74. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Interari:
for (var it = 0; it < animale.length; it++) {
// de prelucrat animale[it]
}
de ce?
// varianta mai buna
for (var it = 0, lung = animale.length; it < lung; it++) {
// de prelucrat animale[it]
}
75. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Elementele pot apartine
unor tipuri de date eterogene
var animale = [33, "vierme", false, "gaga"];
76. caracteristici: tablouri
Dr. Sabin Buragawww.purl.org/net/busaco
Metode utile:
a.toString() a.concat(item, ..) a.join(sep)
a.pop() a.push(item, ..) a.reverse()
a.shift() a.unshift([item]..)
a.sort(cmpfn) a.splice(start, delcount, [item]..)
etc.
77. caracteristici: functii
Dr. Sabin Buragawww.purl.org/net/busaco
Definite via function
function transformaPixeliInPuncte (px) {
var puncte = px * 300;
return puncte;
}
78. caracteristici: functii
Dr. Sabin Buragawww.purl.org/net/busaco
Daca nu este intors nimic in mod explicit,
valoarea de retur se considera undefined
79. caracteristici: functii
Dr. Sabin Buragawww.purl.org/net/busaco
Parametrii pot lipsi, fiind considerati undefined
80. caracteristici: functii
Dr. Sabin Buragawww.purl.org/net/busaco
Pot fi transmise mai multe argumente,
cele in surplus fiind ignorate
transformaPixeliInPuncte (10, 7) 3000
81. caracteristici: functii
Dr. Sabin Buragawww.purl.org/net/busaco
Argumentele primite de o functie se acceseaza
via tabloul arguments:
function aduna () {
var suma = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
suma += arguments[i];
}
return suma;
}
82. caracteristici: functii
Dr. Sabin Buragawww.purl.org/net/busaco
Functiile sunt tot obiecte
astfel, pot fi specificate functii anonime
expresii
lambda
83. caracteristici: functii
Dr. Sabin Buragawww.purl.org/net/busaco
Functiile sunt tot obiecte
astfel, pot fi specificate functii anonime
expresii
lambda
in acest sens, JavaScript este un limbaj functional
84. caracteristici: functii
Dr. Sabin Buragawww.purl.org/net/busaco
var media = function () { // calculul mediei a N numere
var suma = 0;
for (var iter = 0,
lung = arguments.length;
iter < lung; iter++) {
suma += arguments[iter];
}
return suma / arguments.length;
};
88. functii recursive in JavaScript
/* determina numarul caracterelor din nodurile text
Dr. Sabin Buragawww.purl.org/net/busaco
ale arborelui DOM-ului asociat unui document */
function numaraCaractereDinNoduriText (element) {
if (element.nodeType == 3) { // nod text (din DOM)
return element.nodeValue.length;
}
var contor = 0;
// recursiv, numaram caracterele fiecarui nod copil
// al arborelui DOM cu radacina ‘element’
for (var it = 0, copil; copil = element.childNodes[it]; it++) {
contor += numaraCaractereDinNoduriText (copil);
}
vezi cele
return contor; discutate la DOM
}
89. Dr. Sabin Buragawww.purl.org/net/busaco
// varianta folosind functii anonime
var nrCaractDoc = (function (element) {
if (element.nodeType == 3) { // nod text
return element.nodeValue.length;
}
var contor = 0;
for (var it = 0, copil; copil = element.childNodes[it]; it++) {
contor += arguments.callee (copil);
}
return contor; furnizeaza care-i
functia apelanta
}) (xml.root);
90. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
Exemplificare:
dorim sa procesam – via functii –
caracteristici ale unor animale
91. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
function creeazaAnimal (nume, marime) {
return { nume: nume, marime: marime }
}
function oferaNume (animal) {
return animal.nume;
}
function oferaMarime (animal) {
return animal.marime;
}
92. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
function creeazaAnimal (nume, marime) {
return { nume: nume, marime: marime }
}
function oferaNume (animal) {
return animal.nume;
}
function oferaMarime (animal) {
return animal.marime;
}
var tux = creeazaAnimal ("Tux", 17);
oferaMarime (tux) 17
93. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
O “clasa” referitoare la animale:
function creeazaAnimal (nume, marime) {
return {
nume: nume, // date-membre
marime: marime,
oferaNume: function () { // metoda
return animal.nume;
},
oferaMarime: function () { // metoda
return animal.marime;
}
}
94. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
Apelarea metodelor definite:
var tux = creeazaAnimal ("Tux", 17);
tux.oferaMarime() 17
95. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
Apelind insa o functie fara notatia cu “.”,
nu obtinem rezultatul scontat:
var marimea = tux.oferaMarimea;
oferaMarimea () undefined
96. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
Apelind insa o functie fara notatia cu “.”,
nu obtinem rezultatul scontat:
var marimea = tux.oferaMarimea;
oferaMarimea () undefined
obiectul curent (“this”) este setat ca fiind obiectul global
(in browser, reprezinta fereastra curenta
in care este redat documentul: this window)
97. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
function Animal (nume, marime) {
this.nume = nume; // date-membre
this.marime = marime;
this.oferaNume = function () { // metoda
return this.nume;
};
this.oferaMarime = function () { // metoda
return this.marime;
};
}
creational pattern
98. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
clase – utilizarea
constructorilor
function Animal (nume, marime) {
this.nume = nume; // date-membre
this.marime = marime;
this.oferaNume = function () { // metoda
return this.nume;
};
this.oferaMarime = function () { // metoda
return this.marime;
};
}
99. caracteristici: de la functii la clase
Dr. Sabin Buragawww.purl.org/net/busaco
clase – utilizarea
constructorilor
function Animal (nume, marime) {
this.nume = nume; // date-membre
this.marime = marime;
this.oferaNume = function () { // metoda
return this.nume;
};
this.oferaMarime = function () { // metoda
return this.marime;
};
}
var tux = new Animal ("Tux", 17); // instantierea unui obiect
100. caracteristici: functii & obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Operatorul new creaza un nou obiect vid si
apeleaza functia specificata cu this setat pe acest obiect
aceste functii se numesc constructori,
trebuie apelate via new
si, prin conventie, au numele scris cu litera mare
101. caracteristici: functii & obiecte
Dr. Sabin Buragawww.purl.org/net/busaco
Metodele pot fi declarate si in exteriorul constructorului
function oferaNumeAnimal () {
return this.nume;
}
function Animal (nume, marime) {
this.nume = nume;
this.marime = marime;
this.oferaNume = oferaNumeAnimal;
}
102. caracteristici: prototipuri
Dr. Sabin Buragawww.purl.org/net/busaco
Structura unei clase poate fi extinsa ulterior,
folosind proprietatea prototype
103. caracteristici: prototipuri
Dr. Sabin Buragawww.purl.org/net/busaco
Structura unei clase poate fi extinsa ulterior,
folosind proprietatea prototype
un prototip e o proprietate oferind o legatura ascunsa
104. caracteristici: prototipuri
Dr. Sabin Buragawww.purl.org/net/busaco
Structura unei clase poate fi extinsa ulterior,
folosind proprietatea prototype
daca se incearca accesarea unui element inexistent
in cadrul unui obiect dat,
se va verifica lantul de prototipuri (prototype chain)
105. caracteristici: prototipuri
Dr. Sabin Buragawww.purl.org/net/busaco
ObjB.prototype = new ObjA ( );
ObjA
this.initA ( ) ObjC.prototype = new ObjB ( );
ObjB
this.initB ( ) ObjC
var test = new objC ( )
this.initC ( ) test.initA ( );
dupa Subramanyan Murali, “JavaScript Design Patterns”, 2008
107. caracteristici: prototipuri
Dr. Sabin Buragawww.purl.org/net/busaco
Pentru a cunoaste tipul unui obiect
(pe baza constructorului si a ierarhiei de prototipuri)
se foloseste operatorul instanceof
109. caracteristici: extinderea claselor
Dr. Sabin Buragawww.purl.org/net/busaco
Adaugarea unei metode se realizeaza via prototype
Animal.prototype.oferaNumeMare = function () {
return this.nume.toUpperCase ();
};
tux.oferaNumeMare () "TUX"
110. caracteristici: extinderea claselor
Dr. Sabin Buragawww.purl.org/net/busaco
Pot fi extinse si obiectele predefinite:
// adaugam o metoda obiectului String
String.prototype.inverseaza = function () {
var inv = '';
for (var iter = this.length - 1; iter >= 0; iter--) { // inversam sirul…
inv += this[iter];
}
return inv;
};
"Web".inverseaza () "beW"
111. caracteristici: extinderea claselor
Dr. Sabin Buragawww.purl.org/net/busaco
Cel mai general prototype este cel al lui Object
Una dintre metodele disponibile este toString()
care poate fi supra-scrisa (over-ride)
112. caracteristici: extinderea claselor
Dr. Sabin Buragawww.purl.org/net/busaco
var tux = new Animal ("Tux", 17);
tux.toString () [object Object]
Animal.prototype.toString = function () {
return '<animal>' + this.oferaNume () + '</animal>';
};
tux.toString () "<animal>Tux</animal>"
114. caracteristici: extinderea claselor
Dr. Sabin Buragawww.purl.org/net/busaco
Atentie la pericole!
de exemplu, comportamentul diferit al constructiei
for (var proprietate in obiect)
115. caracteristici: functii de nivel inalt
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece o functie reprezinta un obiect, poate fi:
stocata intr-o variabila
pasata unei alte functii
intoarsa de o functie – fiind argument pentru return
116. caracteristici: functii de nivel inalt
Dr. Sabin Buragawww.purl.org/net/busaco
Dorim sa calculam greutatea unui animal,
dupa formula greutate = marime * 33
varianta clasica:
var marimi = [17, 20, 7, 14];
var greutati = [ ];
for (var contor = 0; contor < marimi.length; contor++) {
greutati[contor] = marimi[contor] * 33;
}
117. Varianta imbunatatita – mai generala:
function genereazaTablouGreutati (tablou, calcul) {
Dr. Sabin Buragawww.purl.org/net/busaco
var rezultat = [ ];
for (var contor = 0; contor < tablou.length; contor++) {
rezultat[contor] = calcul (tablou[contor]);
}
return rezultat;
}
function calculGreutate (marime) {
return marime * 33;
}
var greutati = genereazaTablouGreutati (marimi, calculGreutate);
referim functia
ce va realiza calculul
118. calcul e variabila
Varianta imbunatatita – mai generala:
de tip functie
function genereazaTablouGreutati (tablou, calcul) {
Dr. Sabin Buragawww.purl.org/net/busaco
var rezultat = [ ];
for (var contor = 0; contor < tablou.length; contor++) {
rezultat[contor] = calcul (tablou[contor]);
} fiind functie,
return rezultat; se poate apela
}
function calculGreutate (marime) {
return marime * 33;
}
var greutati = genereazaTablouGreutati (marimi, calculGreutate);
120. caracteristici: incapsulare
Dr. Sabin Buragawww.purl.org/net/busaco
JavaScript ofera un singur spatiu de nume,
la nivel global
conflicte privind denumirea functiilor/variabilelor
specificate de programe diferite,
concepute de mai multi dezvoltatori
121. caracteristici: incapsulare
Dr. Sabin Buragawww.purl.org/net/busaco
Nu trebuie afectat spatiul de nume global,
pastrându-se codul-sursa la nivel privat
122. caracteristici: incapsulare
Dr. Sabin Buragawww.purl.org/net/busaco
Codul poate fi complet încapsulat
via functii anonime
care “pastreaza” constructiile la nivel privat
123. caracteristici: closures
Dr. Sabin Buragawww.purl.org/net/busaco
Declararea imbricata – ca expresii de tip functie –
a functiilor anonime are denumirea closures
https://developer.mozilla.org/en/JavaScript/Guide/Closures
124. caracteristici: closures
Dr. Sabin Buragawww.purl.org/net/busaco
// specificarea unei expresii de tip functie
( function () {
// variabilele & functiile vor fi vizibile doar aici
// variabilele globale pot fi accesate
} ( ) );
125. var cod = (function () { function faCeva (x, y) {
var n = 0; // variabila privata
Dr. Sabin Buragawww.purl.org/net/busaco
// ...
function start (x) { }
// ... poate accesa 'n' return {
// si functia 'faCeva' // sunt publice doar
} // functiile 'start' si 'faCeva'
function faAia (param) { 'start': start,
// ... invizibila din afara 'faCeva': faCeva
} }
}) ();
cod.start (x); // apelam 'start'
126. var cod = (function () { function faCeva (x, y) {
var n = 0; // variabila privata
Dr. Sabin Buragawww.purl.org/net/busaco
// ...
function start (x) { }
// ... poate accesa 'n' return {
// si functia 'faCeva' // sunt publice doar
} // functiile 'start' si 'faCeva'
function faAia (param) { 'start': start,
// ... invizibila din afara 'faCeva': faCeva
} }
}) ();
cod.start (x); // apelam 'start'
via closures, simulam metodele private
modularizarea codului (module pattern)
129. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Totul in JavaScript este obiect – chiar si functiile
130. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Orice obiect este intotdeauna mutabil
(poate fi alterat oricând)
toate proprietatile si metodele
sunt disponibile oriunde (public scope)
131. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Nu exista vizibilitate la nivel de bloc de cod
(block scope),
ci doar la nivel global ori la nivel de functie
132. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Functiile ascund orice e definit in interiorul lor
133. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Operatorul “.” este echivalent
cu de-referentierea:
ob.prop === ob["prop"]
134. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Operatorul new creeaza obiecte apartinând
clasei specificate de functia constructor
135. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Accesorul this este relativ la contextul executiei,
nu al declararii
136. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Accesorul this este relativ la contextul executiei,
nu al declararii
Atentie la dependenta
de mediul de executie!
137. de retinut!
Dr. Sabin Buragawww.purl.org/net/busaco
Proprietatea prototype are valori modificabile
138. json
Dr. Sabin Buragawww.purl.org/net/busaco
JavaScript Object Notation
http://json.org/
139. json
Dr. Sabin Buragawww.purl.org/net/busaco
JavaScript Object Notation
format compact pentru interschimb de date
intre aplicatii
140. json
Dr. Sabin Buragawww.purl.org/net/busaco
JavaScript Object Notation
datele pot fi specificate
in termeni de obiecte & literali
141. json
Dr. Sabin Buragawww.purl.org/net/busaco
JavaScript Object Notation
{
'nume': 'Tux', datele pot fi evaluate
direct in JavaScript
'stoc': 33,
'model': [ 'candid', 'furios', 'vesel' ]
}
143. instrumente
Dr. Sabin Buragawww.purl.org/net/busaco
Editare de cod & dezvoltare de aplicatii Web
Testare
Documentare a codului
Compresie
Optimizare
144. instrumente: editare
Dr. Sabin Buragawww.purl.org/net/busaco
Pentru desktop:
Aptana Studio, JS Development Tools (plug-in Eclipse),
Sublime Text, Visual Studio (Express Edition),…
Disponibile pe Web:
Cloud9 IDE, JS Bin, JS Fiddle etc.
unele ofera si partajarea codului-sursa cu alti dezvoltatori
145. instrumente: testare
Dr. Sabin Buragawww.purl.org/net/busaco
Verificare statica
instrumente de referinta:
JSLint
JSHint
146. instrumente: testare
Dr. Sabin Buragawww.purl.org/net/busaco
Suport pentru unit testing
exemplificari:
Jasmine
JSTest.NET
QUnit
Sinon.js
Tyrtle
147. instrumente: documentarea codului
Dr. Sabin Buragawww.purl.org/net/busaco
Standarde de redactare a codului JavaScript
exemple:
Crock’s Code Conventions for JavaScript
Google JavaScript Style Guide
Idiomatic.js
ghiduri specifice – e.g., jQuery Core Style Guide
148. instrumente: documentarea codului
Dr. Sabin Buragawww.purl.org/net/busaco
Software pentru documentarea programelor
JSDoc Toolkit
jGrouseDoc
YUIDoc
149. instrumente: compresie de cod
Dr. Sabin Buragawww.purl.org/net/busaco
Instrumente privind compresia/minimizarea
Online Javascript Compression Tool
YUI Compressor
Scriptalizer
detalii in articolul A. Powell,
Understanding Compression and Minification (mai 2012):
www.aaron-powell.com/javascript/understanding-compression-and-minification
150. instrumente: optimizare javascript
Dr. Sabin Buragawww.purl.org/net/busaco
Transformarea codului JS intr-unul optimizat
exemplu de referinta:
Closure Compiler
https://developers.google.com/closure/
151. instrumente
Dr. Sabin Buragawww.purl.org/net/busaco
Facilitarea dezvoltarii de aplicatii Web
la nivel de client similare celor desktop
exemplificari notabile:
Cappuccino – http://cappuccino.org/
SproutCore – http://www.sproutcore.com/
152. instrumente
Dr. Sabin Buragawww.purl.org/net/busaco
Alte limbaje pentru dezvoltarea de aplicatii Web
CoffeeScript (Jeremy Ashkenas, 2009)
http://coffeescript.org/
TypeScript (Microsoft, 2012)
http://www.typescriptlang.org/
limbaje de programare care se compileaza in JavaScript
153. instrumente
Dr. Sabin Buragawww.purl.org/net/busaco
Portarea altor aplicatii in JavaScript
Emscripten – compilator LLVM generand cod JS
(e.g., programe C/C++, Lua, Python, Ruby
ce se pot compila in JavaScript)
http://emscripten.org/
154. instrumente
Dr. Sabin Buragawww.purl.org/net/busaco
Portarea altor aplicatii in JavaScript
JSIL – compilator care transforma aplicatiile .NET
in programe JavaScript ruland independent de browser
http://jsil.org/