Sabin Buraga — JavaScript
2 likes1,094 views
Documentul oferă o prezentare detaliată a limbajului de programare JavaScript, inclusiv istoria sa, medii de execuție, tipuri de date, controlul fluxului și structurile de date. De asemenea, sunt discutate concepte precum obiectele, funcțiile, tablourile, manipularea DOM-ului prin jQuery și utilizarea JSON pentru transferul de date. Resurse suplimentare pentru învățarea JavaScript și jQuery sunt incluse, împreună cu instrumente de dezvoltare și teste.
![obiecte
accesarea proprietatilor
obiect.nume = "Tux";
var nume = obiect.nume;
echivalent:
obiect["nume"] = "Tux";
var nume = obiect["nume"];](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-38-320.jpg)
![tablouri
var zoo = new Array ();
zoo[0] = "pinguin";
zoo[1] = "omida";
zoo[2] = "urs";
zoo.length3](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-41-320.jpg)
![tablouri
var zoo = new Array ();
zoo[0] = "pinguin";
zoo[1] = "omida";
zoo[2] = "urs";
zoo.length3
notatie alternativa:
var zoo = ["pinguin", "omida", "urs"];](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-42-320.jpg)
![tablouri
iterari:
for (var iter = 0;
iter < zoo.length; iter++) {
// de prelucrat zoo[iter]
}
for (var iter = 0, lung = zoo.length;
iter < lung; iter++) {
// varianta mai buna
// de prelucrat zoo[iter] de ce?
}](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-43-320.jpg)
![tablouri
elementele pot apartine
unor tipuri de date eterogene
var zoo = [16, "musca", true, "gaga"];](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-44-320.jpg)
![var media = function () { // calculul mediei
var suma = 0;
for (var iter = 0,
lung = arguments.length;
iter < lung; iter++) {
suma += arguments[iter];
}
return suma / arguments.length;
}](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-49-320.jpg)
![var marimi = [17, 20, 7, 14];
marimi instanceof Arraytrue
marimi instanceof Objecttrue
marimi instanceof Stringfalse](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-58-320.jpg)
![operatorul . este echivalent
cu de-referentierea:
obiect.prop === obiect["prop"]](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-63-320.jpg)
![{
'nume' : 'Tux',
'stoc' : 33,
'gen' : ['candid', 'furios', 'vesel']
}
datele pot fi
evaluate direct
in JavaScript](https://image.slidesharecdn.com/sburaga-javascript-100727081528-phpapp01/85/Sabin-Buraga-JavaScript-74-320.jpg)
Sabin Buraga — JavaScript
- 1. JavaScript Dr. Sabin Buraga www.purl.org/net/busaco @busaco
- 2. “Cu cat cunosti mai bine, cu atat iubesti mai mult.” Leonardo da Vinci
- 3. inventat de Brendan Eich (1995)
- 5. implementat in Netscape Navigator
- 6. adaptat de Microsoft: JScript (1996)
- 7. standardizat in 1997 de ECMA European Computer Manufacturers Association www.ecma-international.org
- 8. limbaj de tip script (interpretat)
- 9. limbaj de tip script (interpretat) destinat sa manipuleze, sa automatizeze si sa integreze facilitatile oferite de un anumit sistem
- 10. limbaj de tip script (interpretat) nu necesita intrari/iesiri in mod implicit
- 11. Cum putem executa programele JavaScript?
- 12. mediu de executie (host-environment): navigator Web “injectarea” de cod JavaScript in documentele (X)HTML via <script>
- 13. mediu de executie (host-environment): platforma de dezvoltare a aplicatiilor e.g., Adobe Flex/AIR
- 14. mediu de executie (host-environment): aplicatie de sine-statatoare Adobe Creative Suite, UltraEdit etc.
- 15. mediu de executie (host-environment): procesor (engine) independent e.g., Yahoo! Widget Engine
- 16. mediu de executie (host-environment): componente ale sistemului de operare Dashboard – Mac OS X Sidebar – Windows Vista/7
- 17. 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
- 18. 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
- 19. tipuri de date: Number dubla precizie, stocare pe 64 biti String secvente de caractere Unicode, 16 biti Boolean secvente ce se pot evalua ca true/false Object Function, Array, Date, RegExp Null semnifica “nici o valoare” Undefined “nici o valoare asignata inca”
- 20. “valoarea” NaN – “not a number” parseInt ("Salut")NaN isNaN (NaN + 33)true
- 21. valori speciale: Infinity –Infinity
- 22. un caracter reprezinta un sir de lungime 1 sirurile sunt obiecte "Salut".length5
- 23. valorile 0, "", NaN, null, undefined sunt interpretate ca fiind false
- 24. variabile sunt declarate cu var var marime; var numeAnimal = "Tux";
- 25. variabilele declarate fara valori asignate, se considera undefined
- 26. daca nu se foloseste var, atunci variabila este considerata globala de evitat asa ceva!
- 27. conversia tipurilor se face “din zbor” "3" + 4 + 5345 3 + 4 + "5"75
- 28. pentru a afla tipul unei expresii, se foloseste typeof typeof "Tux"string
- 29. instructiuni de control testare: if ... else, switch
- 30. instructiuni de control ciclare: while, do ... while, for
- 31. instructiuni de control exceptii: try ... catch ... finally emiterea unei exceptii: throw
- 32. obiecte perechi nume—valoare tabele de dispersie (hash) in C/C++ tablouri asociative in Perl, PHP, Ruby HashMaps in Java
- 33. obiecte perechi nume—valoare numele este desemnat de un sir de caractere valoarea poate fi de orice tip
- 34. obiecte colectii de proprietati, avand mai multe atribute proprietatile pot contine alte obiecte, valori primitive sau metode
- 35. obiecte in JavaScript, se predefinesc obiectele Global Object Function Array String Boolean Number Math Date
- 36. obiecte create prin intermediul lui new var obiect = new Object(); var obiect = {}; // echivalent cu linia anterioara
- 37. obiecte accesarea proprietatilor obiect.nume = "Tux"; var nume = obiect.nume;
- 38. obiecte accesarea proprietatilor obiect.nume = "Tux"; var nume = obiect.nume; echivalent: obiect["nume"] = "Tux"; var nume = obiect["nume"];
- 39. obiecte declarare + asociere de valori var pingu = { nume: "Tux", proprietati: { culoare: "oranj", marime: 17 } }
- 40. tablouri sunt tipuri speciale de obiecte proprietatile sunt numere, nu siruri de caractere
- 41. tablouri var zoo = new Array (); zoo[0] = "pinguin"; zoo[1] = "omida"; zoo[2] = "urs"; zoo.length3
- 42. tablouri var zoo = new Array (); zoo[0] = "pinguin"; zoo[1] = "omida"; zoo[2] = "urs"; zoo.length3 notatie alternativa: var zoo = ["pinguin", "omida", "urs"];
- 43. tablouri iterari: for (var iter = 0; iter < zoo.length; iter++) { // de prelucrat zoo[iter] } for (var iter = 0, lung = zoo.length; iter < lung; iter++) { // varianta mai buna // de prelucrat zoo[iter] de ce? }
- 44. tablouri elementele pot apartine unor tipuri de date eterogene var zoo = [16, "musca", true, "gaga"];
- 45. functii obiecte definite prin function function transformaPixeliInPuncte (px) { var puncte = px * 300; return puncte; }
- 46. functii argumentele primite de o functie se acceseaza via tabloul arguments
- 47. functii pot fi specificate functii anonime expresii lambda
- 48. functii pot fi specificate functii anonime expresii lambda in acest sens, JavaScript este un limbaj functional
- 49. var media = function () { // calculul mediei var suma = 0; for (var iter = 0, lung = arguments.length; iter < lung; iter++) { suma += arguments[iter]; } return suma / arguments.length; }
- 50. putem incapsula functiile in clase?
- 51. de la functii la clase: 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; }; }
- 52. instantierea unui obiect: var tux = new Animal ("Tux", 17);
- 53. operatorul new creaza un nou obiect vid si apeleaza functia specificata cu this setat pe acest obiect
- 54. aceste functii se numesc constructori, trebuie apelate via new si, prin conventie, au numele scris cu litera mare
- 55. structura unei clase poate fi extinsa ulterior, folosind proprietatea prototype
- 56. function Animal (nume, marime) { // definitie initiala this.nume = nume; this.marime = marime; } Animal.prototype.oferaNume = function () { return this.nume; } Animal.prototype.oferaMarime = function () { return this.marime; }
- 57. pentru a cunoaste tipul unui obiect – pe baza constructorului si a ierarhiei de prototipuri – se foloseste operatorul instanceof
- 58. var marimi = [17, 20, 7, 14]; marimi instanceof Arraytrue marimi instanceof Objecttrue marimi instanceof Stringfalse
- 59. extinderea claselor adaugarea unei metode se realizeaza via prototype
- 60. Animal.prototype.oferaNumeMare = function () { return this.nume.toUpperCase (); } tux.oferaNumeMare ()"TUX"
- 61. in JavaScript, totul e considerat ca fiind obiect – chiar si functiile
- 62. orice obiect e intotdeauna mutabil (poate fi alterat oricind)
- 63. operatorul . este echivalent cu de-referentierea: obiect.prop === obiect["prop"]
- 64. functiile ascund orice este definit in interiorul lor
- 65. accesorul this este relativ la contextul executiei, nu al declararii
- 66. rularea in browser programele JavaScript au acces la diverse obiecte oferite de navigatorul Web
- 67. rularea in browser de pilda, poate fi accesat obiectul global window <script type="application/javascript"> var nav = window.navigator.userAgent; // date privitoare la browser </script>
- 68. graceful degradation & progresive enhancement conceperea “stratificata” a aplicatiilor JavaScript
- 69. graceful degradation & progresive enhancement initial: interactiune minimala, fara JavaScript adaugarea progresiva a facilitatilor, in functie de context
- 70. graceful degradation & progresive enhancement inaintea folosirii oricarei tehnici dorite, de testat suportul oferit de navigator: JavaScript, cookie-uri, clase/metode DOM, Ajax,…
- 71. JSON – JavaScript Object Notation format compact pentru interschimb de date intre aplicatii
- 72. JSON – JavaScript Object Notation folosit la serializarea datelor in contextul Web uzual, transfer (a)sincron de date intre servicii Web si aplicatii (clienti)
- 73. JSON – JavaScript Object Notation defineste datele in termeni de obiecte & literali json.org
- 74. { 'nume' : 'Tux', 'stoc' : 33, 'gen' : ['candid', 'furios', 'vesel'] } datele pot fi evaluate direct in JavaScript
- 75. instrumente medii de dezvoltare Aptana Studio depanare Firebug (Lite) Visual Studio Developer 2010
- 76. instrumente testare (inginerie software) JSLint, JsUnit, jsTrace, Selenium
- 77. instrumente alte extensii/utilitare folositoare GreaseMonkey, Ubiquity, Y! Slow SpiderMonkey Rhino JavaScript Shell
- 78. biblioteci Dojo: dojotoolkit.org jQuery: jquery.com Prototype: prototypejs.org Rico: openrico.org Script.aculo.us: script.aculo.us YUI: developer.yahoo.net/yui/ …si multe altele
- 79. jQuery scop principal: manipularea documentului HTML pe baza selectorilor CSS – nivelul 3 ofera un API concis, usor de folosit, disponibil open source http://jquery.com/ http://visualjquery.com/
- 80. jQuery focalizarea asupra interactiunii dintre codul JavaScript si constructiile (X)HTML
- 81. jQuery aproape orice operatie urmeaza regula: “gaseste ceva” + “executa ceva cu ceea ce-ai gasit”
- 82. jQuery accesul la nodurile documentului HTML se realizeaza via functia jQuery() notatie prescurtata: $()
- 83. // liniile de tabel de pe pozitii pare vor fi redate // via proprietatile CSS din clasa ‘fundal-gri’ $("table tr:nth-child(even)").addClass("fundal-gri"); obiect selector metoda jQuery CSS (functionalitate)
- 84. jQuery selectarea nodurilor dorite recurge la conventiile privitoare la selectorii CSS http://docs.jquery.com/Selectors
- 85. jQuery selectori “magici”: privitori la pozitie – :first :last vizibilitate – :hidden :visible referitori la animatie – :animated vizand formularele Web – :input :text :password :radio :submit desemnand cu anumit continut :contains (...)
- 86. jQuery selectarea nodurilor dorite recurge la conventiile privitoare la selectorii CSS $('div.info') toate elementele <div class="info"> $('div#adresa') elementul <div id="adresa"> $('div h1') in contextul: <div> care include <h1> $('div#menu > p') in contextul: <div id="menu"> cu descendentii <p>
- 87. unele rezultate ale $(…) pot intoarce colectii de noduri, prelucrate prin: $('div.info').size () marimea colectiei obtinute $('div.info').each (function(div) { ... }) iterator $('div.info').html ('<em>Salut</em>') inserare de cod HTML
- 88. unele rezultate ale $(…) pot intoarce colectii de noduri, prelucrate prin: $('img.foto').attr ('src', '/anonim.png') alterarea unui atribut $('a.menu').addClass ('vizitat') adaugarea unei clase CSS $('p:odd').css ('color: blue') modificare de proprietati CSS
- 89. suportul pentru transferuri asincrone – Ajax: $('div#stiri').load ('stiri.html'); incarcare asincrona $.get (url, parametri, functie-callback); incarcare prin GET $.post (url, parametri, functie-callback); incarcare via POST $.getJSON (url, parametri, functie-callback); preluare raspuns in format JSON
- 90. jQuery extinderi via plug-in-uri: manipularea formularelor jquery.com/plugins/project/form
- 91. jQuery extinderi via plug-in-uri: efecte de interfata + facilitarea interactiunii cu utilizatorul (e.g., slider, tabs, resize, drag & drop) http://ui.jquery.com/
- 92. jQuery extinderi via plug-in-uri: pentru alte detalii, a se consulta http://plugins.jquery.com
- 93. JavaScript
- 94. resurse B. Bibeault, Y. Katz, jQuery in Action, Manning, 2008 S. Buraga (coord.), Programarea in Web 2.0, Polirom, 2007 R. Harmes, D. Diaz, Pro JavaScript Design Patterns, Apress, 2008 M. Haverbeke, Eloquent JavaScript, 2007: http://eloquentjavascript.net/ S. Willinson, A (Re)-Introduction to JavaScript, ETech Conference, 2005
- 95. resurse Mozilla Developer Center developer.mozilla.org Ajaxian www.ajaxian.com Ajax Patterns www.ajaxpatterns.org jQuery http://docs.jquery.com www.learningjquery.com