O presentation regarding the essential aspects of the JavaScript language.

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)

4. denumit initial LiveScript

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".length5

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 + 5345
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.length3

42. tablouri
var zoo = new Array ();
zoo[0] = "pinguin";
zoo[1] = "omida";
zoo[2] = "urs";
zoo.length3
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 Arraytrue
marimi instanceof Objecttrue
marimi instanceof Stringfalse

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