Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dr. Sabin Buragawww.purl.org/net/busaco 
JavaScript 
Dr. Sabin Buraga 
un mini-tutorial
Dr. Sabin Buragawww.purl.org/net/busaco 
Inventat de Brendan Eich (1995) 
MochaLiveScriptJavaScript
Dr. Sabin Buragawww.purl.org/net/busaco 
Inventat de Brendan Eich (1995) 
MochaLiveScriptJavaScript 
implementat în pre...
Dr. Sabin Buragawww.purl.org/net/busaco 
Standardizat în 1997 de ECMA 
European Computer Manufacturers Association 
ECMAS...
Dr. Sabin Buragawww.purl.org/net/busaco 
Limbaj de tip script (interpretat) 
dinamic 
variabilele își pot schimba tipul 
...
Dr. Sabin Buragawww.purl.org/net/busaco 
Limbaj de tip script (interpretat) 
destinat să manipuleze, să automatizeze 
și ...
Mediu de execuție (host-environment) 
navigator Web 
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco 
Mediu de execuție (host-environment) 
navigator Web 
permite rularea de aplicați...
Dr. Sabin Buragawww.purl.org/net/busaco 
Mediu de execuție (host-environment) 
navigator Web 
permite rularea de aplicați...
Dr. Sabin Buragawww.purl.org/net/busaco 
tehnologii Web disponibile (via JavaScript) 
la nivel de browser – http://platfo...
Dr. Sabin Buragawww.purl.org/net/busaco 
Mediu de execuție (host-environment) 
independent de navigatorul Web
Dr. Sabin Buragawww.purl.org/net/busaco 
Mediu de execuție (host-environment) 
independent de navigatorul Web 
platforme ...
Dr. Sabin Buragawww.purl.org/net/busaco 
Câteva caracteristici importante?
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: sintaxa 
Cuvinte rezervate: 
break else new var case finally ret...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: sintaxa 
Alte cuvinte rezervate: 
abstract enum int short boolea...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Number 
reprezentare în dublă precizie 
stocare ...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
String 
secvențe de caractere Unicode 
fiecare c...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Boolean 
expresii ce se pot evalua ca fiind true...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Object 
aproape totul e considerat ca fiind obie...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Null 
înseamnă „nicio valoare”
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Undefined 
are semnificația „nicio valoare asign...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Nu există valori întregi 
convertirea unui șir î...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Operații avansate cu numere se pot realiza 
via ...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Operații avansate cu numere se pot realiza 
via ...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
„Valoarea” NaN (“not a number”) 
parseInt ("Salu...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Valori speciale: 
Infinity 
–Infinity
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Un caracter reprezintă un șir de lungime 1
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Șirurile sunt obiecte 
"Salut".length  5
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Metode utile 
pentru procesarea șirurilor de car...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tipuri de date 
Valorile 0, "", NaN, null, undefined 
sunt inter...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: variabile 
Variabilele se declară cu var 
var marime; 
var numeA...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: variabile 
Dacă nu se folosește var, 
atunci variabila este cons...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: operatori 
Pentru numere: + – * / % 
De asignare: += –= *= /= %=...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: operatori 
Conversia tipurilor se face „din zbor” (dinamic) 
"3"...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: operatori 
Comparații: < > <= >= (numere și șiruri) 
egalitatea ...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: operatori 
Comparații: < > <= >= (numere și șiruri) 
egalitatea ...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: control 
Testare: if … else, switch 
pentru switch, sunt permise...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: control 
Ciclare: while, do … while, for 
do { 
var nume = preia...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: control 
Excepții: try … catch … finally 
try { 
// Linii "peric...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: control 
Excepții: try … catch … finally 
try { 
// Linii "peric...
Perechi nume—valoare 
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Perechi nume—valoare 
tabele de dispersie (hash) în C/C...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Perechi nume—valoare 
numele este desemnat de un șir de...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Obiect  colecție de proprietăți, 
având mai multe atri...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Obiect  colecție de proprietăți, 
având mai multe atri...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Obiecte predefinite: 
Global Object 
Function Array 
St...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Create prin intermediul operatorului new: 
var ob = new...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Accesarea proprietăților – operatorul . 
ob.nume = "Tux...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Accesarea proprietăților – operatorul . 
ob.nume = "Tux...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Declarare + asignare: 
var pinguin = { 
nume: "Tux", 
p...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: obiecte 
Declarare + asignare: 
var pinguin = { 
nume: "Tux", 
p...
Dr. Sabin Buragawww.purl.org/net/busaco 
Iterarea proprietăților – considerate chei: 
var pinguin = { 'nume': 'Tux', 'mar...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tablouri 
Tipuri speciale de obiecte 
proprietățile (cheile) sun...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tablouri 
Se poate utiliza sintaxa privitoare la obiecte: 
var a...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tablouri 
Se poate utiliza sintaxa privitoare la obiecte: 
var a...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: tablouri 
Elementele pot aparține 
unor tipuri de date eterogene...
Dr. Sabin Buragawww.purl.org/net/busaco 
Definite via function 
function transformaPixeliInPuncte (px) { 
var puncte = px...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: funcții 
Dacă nu este întors nimic în mod explicit, 
valoarea de...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: funcții 
Parametrii de intrare pot lipsi, 
fiind considerați und...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: funcții 
Funcțiile sunt tot obiecte 
astfel, pot fi specificate ...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: funcții 
var media = function () { // calculul mediei a N numere...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: funcții 
var media = function () { // calculul mediei a N numere...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: funcții 
var media = function () { // calculul mediei a N numere...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: de la funcții la clase 
function Animal (nume, marime) { 
this.n...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: funcții & obiecte 
Operatorul new creează un nou obiect vid și 
...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: prototipuri 
Deoarece orice obiect deține în mod implicit 
propr...
Dr. Sabin Buragawww.purl.org/net/busaco 
caracteristici: prototipuri 
Deoarece orice obiect deține în mod implicit 
propr...
Dr. Sabin Buragawww.purl.org/net/busaco 
function Animal (nume, marime) { // definiție inițială 
this.nume = nume; 
this....
Dr. Sabin Buragawww.purl.org/net/busaco 
metodele predefinite – e.g., toString () – pot fi suprascrise
JavaScript Object Notation 
http://json.org/ 
Dr. Sabin Buragawww.purl.org/net/busaco 
json
Dr. Sabin Buragawww.purl.org/net/busaco 
json 
JavaScript Object Notation 
format compact pentru interschimb de date 
înt...
Dr. Sabin Buragawww.purl.org/net/busaco 
{ 
'nume': 'Tux', 
'stoc': 33, 
'model': [ 'candid', 'furios', 'vesel' ] 
} 
jso...
Dr. Sabin Buragawww.purl.org/net/busaco 
Cum rulează programele JavaScript 
în navigatorul Web?
Dr. Sabin Buragawww.purl.org/net/busaco 
Majoritatea programelor JavaScript 
rulează – sunt interpretate – 
în navigatoru...
Dr. Sabin Buragawww.purl.org/net/busaco 
Majoritatea programelor JavaScript 
rulează – sunt interpretate – 
în navigatoru...
Dr. Sabin Buragawww.purl.org/net/busaco 
Cod JavaScript intern vs. 
preluat dintr-un fișier extern 
<body> 
… 
<script ty...
Dr. Sabin Buragawww.purl.org/net/busaco 
Un program JavaScript are acces la arborele DOM 
(Document Object Model) 
coresp...
Dr. Sabin Buragawww.purl.org/net/busaco 
<!DOCTYPE html> 
<html> 
<body> 
<p>Tehnologii Web</p> 
<div> 
<img src="web.png...
Dr. Sabin Buragawww.purl.org/net/busaco 
De asemenea, programele JavaScript au acces 
la diverse obiecte oferite de mediu...
N-am putea recurge la 
biblioteci JS specifice? 
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco 
colecții de (micro-)biblioteci JS: 
jster.net 
www.jsdb.io 
microjs.com
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
scop principal: 
manipularea facilă a documentului HTML 
pe baza selecto...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
concis, dar extensibil, ușor de folosit 
nu intră în conflict cu alte bi...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
detalii tehnice + documentații: 
http://jquery.com/ 
http://learn.jquery...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
filosofie inițială: 
focalizarea asupra interacțiunii dintre codul JavaS...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
accesul la nodurile documentului HTML se realizează 
via funcția jQuery(...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
accesul la nodurile documentului HTML se realizează 
via funcția jQuery(...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
unele rezultate ale $(…) pot întoarce colecții de noduri, 
prelucrate pr...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
unele rezultate ale $(…) pot întoarce colecții de noduri, 
prelucrate pr...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
unele rezultate ale $(…) pot întoarce colecții de noduri, 
prelucrate pr...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
unele rezultate ale $(…) pot întoarce colecții de noduri, 
prelucrate pr...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
unele rezultate ale $(…) pot întoarce colecții de noduri, 
prelucrate pr...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
unele rezultate ale $(…) pot întoarce colecții de noduri, 
prelucrate pr...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
asocierea de funcții de tratare a evenimentelor 
// evenimentul click as...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
suportul pentru transferuri asincrone 
Ajax (Asynchronous JavaScript And...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
suportul pentru transferuri asincrone 
preluare răspuns în format JSON 
...
Dr. Sabin Buragawww.purl.org/net/busaco 
jQuery 
suportul pentru transferuri asincrone 
metoda cea mai generală (low leve...
Câteva exemple de interes? 
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco 
studiu de caz 
Obținerea fotografiilor publice stocate pe situl 
Flickr pe baza ...
Dr. Sabin Buragawww.purl.org/net/busaco 
studiu de caz 
Obținerea fotografiilor publice stocate pe situl 
Flickr pe baza ...
Dr. Sabin Buragawww.purl.org/net/busaco 
Forma generală a răspunsului JSON transmis de Flickr: 
{ 
"title" : "Recent Uplo...
// preluăm asincron imagini disponibile pe Flickr 
jQuery.getJSON 
("http://api.flickr.com/services/feeds/photos_public.gn...
Dr. Sabin Buragawww.purl.org/net/busaco 
studiu de caz 
un posibil rezultat – editarea & rularea codului via JSFiddle
Dr. Sabin Buragawww.purl.org/net/busaco 
studiu de caz 
Crearea unui joc simplu cu 2 zaruri 
„arunci” zarurile și câștigi...
Dr. Sabin Buragawww.purl.org/net/busaco 
studiu de caz 
Managementul unui zar – „clasa” Zar 
proprietate: valoareZar 
met...
Dr. Sabin Buragawww.purl.org/net/busaco 
studiu de caz 
Implementarea jocului – „clasa” Joc 
proprietăți: scorCurent, zar...
Dr. Sabin Buragawww.purl.org/net/busaco 
studiu de caz 
depanare cu Firebug 
sau cu instrumentele 
oferite de browser
Bun, aș dori 
să aprofundez… 
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco 
resurse 
S. Buraga, Dezvoltarea aplicațiilor Web la nivel de client, 
FII, UAIC,...
Dr. Sabin Buragawww.purl.org/net/busaco 
JavaScript 
Mult succes!
Upcoming SlideShare
Loading in …5
×

Un mini-tutorial JavaScript

1,113 views

Published on

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.

Published in: Technology
  • Be the first to comment

Un mini-tutorial JavaScript

  1. 1. Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Dr. Sabin Buraga un mini-tutorial
  2. 2. Dr. Sabin Buragawww.purl.org/net/busaco Inventat de Brendan Eich (1995) MochaLiveScriptJavaScript
  3. 3. Dr. Sabin Buragawww.purl.org/net/busaco Inventat de Brendan Eich (1995) MochaLiveScriptJavaScript implementat în premieră de Netscape Navigator www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript
  4. 4. Dr. Sabin Buragawww.purl.org/net/busaco Standardizat în 1997 de ECMA European Computer Manufacturers Association ECMAScript ECMA-262 www.ecma-international.org/publications/standards/Ecma-262.htm referința de bază: https://developer.mozilla.org/JavaScript
  5. 5. Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat) dinamic variabilele își pot schimba tipul pe parcursul rulării programului
  6. 6. Dr. Sabin Buragawww.purl.org/net/busaco Limbaj de tip script (interpretat) destinat să manipuleze, să automatizeze și să integreze funcționalitățile oferite de un anumit sistem
  7. 7. Mediu de execuție (host-environment) navigator Web Dr. Sabin Buragawww.purl.org/net/busaco
  8. 8. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) navigator Web permite rularea de aplicații Web la nivelul unei platforme (un sistem de operare)
  9. 9. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) navigator Web permite rularea de aplicații Web la nivelul unei platforme (un sistem de operare) inclusiv pe dispozitive mobile: Android, iOS, Firefox OS, Fire OS (Kindle Fire),…
  10. 10. Dr. Sabin Buragawww.purl.org/net/busaco tehnologii Web disponibile (via JavaScript) la nivel de browser – http://platform.html5.org/
  11. 11. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) independent de navigatorul Web
  12. 12. Dr. Sabin Buragawww.purl.org/net/busaco Mediu de execuție (host-environment) independent de navigatorul Web platforme de dezvoltare de aplicații distribuite: Node.js servere de baze de date – e.g., Apache CouchDB componente ale sistemului de operare aplicații de sine-stătătoare – e.g., Adobe Creative Suite
  13. 13. Dr. Sabin Buragawww.purl.org/net/busaco Câteva caracteristici importante?
  14. 14. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: sintaxa 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
  15. 15. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: sintaxa 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
  16. 16. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Number reprezentare în dublă precizie stocare pe 64 biți – standardul IEEE 754
  17. 17. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date String secvențe de caractere Unicode fiecare caracter ocupă 16 biți (UTF-16)
  18. 18. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Boolean expresii ce se pot evalua ca fiind true/false
  19. 19. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Object aproape totul e considerat ca fiind obiect, inclusiv funcțiile
  20. 20. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Null înseamnă „nicio valoare”
  21. 21. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Undefined are semnificația „nicio valoare asignată încă”
  22. 22. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Nu există valori întregi convertirea unui șir în număr: parseInt () parseInt ("123")  123 parseInt ("11", 2)  3 indică baza de numerație
  23. 23. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Operații avansate cu numere se pot realiza via obiectul predefinit Math
  24. 24. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Operații avansate cu numere se pot realiza via obiectul predefinit Math constante predefinite: Math.PI Math.E Math.LN10 etc. metode: Math.abs(x) Math.cos(x) Math.exp(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) și altele
  25. 25. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date „Valoarea” NaN (“not a number”) parseInt ("Salut")  NaN isNaN (NaN + 3)  true
  26. 26. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Valori speciale: Infinity –Infinity
  27. 27. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Un caracter reprezintă un șir de lungime 1
  28. 28. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Șirurile sunt obiecte "Salut".length  5
  29. 29. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Metode utile pentru procesarea șirurilor de caractere: 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.
  30. 30. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tipuri de date Valorile 0, "", NaN, null, undefined sunt interpretate ca fiind false !!234  true
  31. 31. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: variabile Variabilele se declară cu var var marime; var numeAnimal = "Tux"; variabilele declarate fără valori asignate, se consideră undefined
  32. 32. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: variabile Dacă nu se folosește var, atunci variabila este considerată globală de evitat așa ceva!
  33. 33. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori Pentru numere: + – * / % De asignare: += –= *= /= %= Incrementare și decrementare: ++ – – Concatenare de șiruri: "Java" + "Script"  "JavaScript" Logici: && || ?:
  34. 34. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori Conversia tipurilor se face „din zbor” (dinamic) "3" + 4 + 5  345 3 + 4 + "5"  75 adăugând un șir vid la o expresie, o convertim pe aceasta la string
  35. 35. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori Comparații: < > <= >= (numere și șiruri) egalitatea valorilor se testează cu == și != 1 == true  true
  36. 36. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: operatori Comparații: < > <= >= (numere și șiruri) egalitatea valorilor se testează cu == și != 1 == true  true a se folosi: 1 === true  false inhibă conversia tipurilor de date
  37. 37. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control Testare: if … else, switch pentru switch, sunt permise expresii la fiecare case (testarea se realizează cu operatorul ===) switch (2 + 3) { /* sunt permise expresii */ case 4 + 1 : egalitate (); break; default : absurd (); // nu se apelează niciodată }
  38. 38. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control Ciclare: while, do … while, for do { var nume = preiaNume (); } while (nume != ""); for (var contor = 0; contor < 33; contor++) { // de 33 de ori… }
  39. 39. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control Excepții: try … catch … finally try { // Linii "periculoase" ce pot cauza excepții } catch (eroare) { // Linii rulate la apariția unei/unor excepții } finally { // Linii care se vor executa la final }
  40. 40. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: control Excepții: try … catch … finally try { // Linii "periculoase" ce pot cauza excepții } catch (eroare) { // Linii rulate la apariția unei/unor excepții } finally { // Linii care se vor executa la final } emiterea unei excepții: throw throw new Error ("O eroare de-a noastră...");
  41. 41. Perechi nume—valoare Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte
  42. 42. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Perechi nume—valoare tabele de dispersie (hash) în C/C++ tablouri asociative în Perl, PHP sau Ruby HashMaps în Java “everything except primitive values is an object”
  43. 43. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Perechi nume—valoare numele este desemnat de un șir de caractere (i.e., expresie de tip String) valoarea poate fi de orice tip, inclusiv null sau undefined
  44. 44. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Obiect  colecție de proprietăți, având mai multe atribute
  45. 45. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Obiect  colecție de proprietăți, având mai multe atribute proprietățile pot conține alte obiecte, valori primitive sau metode
  46. 46. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Obiecte predefinite: Global Object Function Array String RegExp Boolean Number Math Date
  47. 47. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Create prin intermediul operatorului new: var ob = new Object (); var ob = { }; // echivalent cu linia anterioară se preferă această sintaxă
  48. 48. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Accesarea proprietăților – operatorul . ob.nume = "Tux"; var nume = ob.nume;
  49. 49. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Accesarea proprietăților – operatorul . ob.nume = "Tux"; var nume = ob.nume; echivalent cu: ob["nume"] = "Tux"; var nume = ob["nume"];
  50. 50. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Declarare + asignare: var pinguin = { nume: "Tux", proprietati: { culoare: "verde", marime: 17 } }
  51. 51. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: obiecte Declarare + asignare: var pinguin = { nume: "Tux", proprietati: { culoare: "verde", marime: 17 } } accesare: pinguin.proprietati.marime  17 pinguin["proprietati"]["culoare"]  verde
  52. 52. Dr. Sabin Buragawww.purl.org/net/busaco Iterarea proprietăților – considerate chei: var pinguin = { 'nume': 'Tux', 'marime': 17 }; for (var proprietate in pinguin) { afiseaza (proprietate + ' = ' + pinguin[proprietate]); } caracteristici: obiecte
  53. 53. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri Tipuri speciale de obiecte proprietățile (cheile) sunt numere, nu șiruri de caractere
  54. 54. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri Se poate utiliza sintaxa privitoare la obiecte: var animale = new Array (); animale[0] = "pinguin"; animale[1] = "urs"; animale[2] = "pterodactil"; animale.length  3
  55. 55. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri Se poate utiliza sintaxa privitoare la obiecte: var animale = new Array (); animale[0] = "pinguin"; animale[1] = "urs"; animale[2] = "pterodactil"; animale.length  3 notație alternativă – preferată: var animale = ["pinguin", "urs", "pterodactil"];
  56. 56. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: tablouri Elementele pot aparține unor tipuri de date eterogene var animale = [33, "vierme", false, "gaga"];
  57. 57. Dr. Sabin Buragawww.purl.org/net/busaco Definite via function function transformaPixeliInPuncte (px) { var puncte = px * 300; return puncte; } caracteristici: funcții
  58. 58. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții Dacă nu este întors nimic în mod explicit, valoarea de retur se consideră undefined
  59. 59. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții Parametrii de intrare pot lipsi, fiind considerați undefined Pot fi transmise mai multe argumente, cele în surplus fiind ignorate transformaPixeliInPuncte (10, 7)  3000
  60. 60. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții Funcțiile sunt tot obiecte astfel, pot fi specificate funcții anonime expresii lambda în acest sens, JavaScript este un limbaj funcțional
  61. 61. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții 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; };
  62. 62. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții 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; }; console.log ( media (9, 10, 7, 8, 7) )  8.2
  63. 63. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții var media = function () { // calculul mediei a N numere var suma = 0; for (var iter = 0, variabilele declarate în funcție nu vor fi accesibile din exterior, lung = arguments.length; iter < lung; iter++) { suma += arguments[iter]; } return suma / arguments.length; }; fiind „închise”  funcție closure
  64. 64. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: de la funcții la clase function Animal (nume, marime) { this.nume = nume; // date-membre this.marime = marime; this.oferaNume = function () { // metodă return this.nume; }; this.oferaMarime = function () { // metodă return this.marime; }; } clase – utilizarea constructorilor var tux = new Animal ("Tux", 17); // instanțierea unui obiect
  65. 65. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: funcții & obiecte Operatorul new creează un nou obiect vid și apelează funcția specificată cu this setat pe acest obiect aceste funcții se numesc constructori, trebuie apelate via new și, prin convenție, au numele scris cu literă mare
  66. 66. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri Deoarece orice obiect deține în mod implicit proprietatea prototype, structura unei clase poate fi extinsă ulterior
  67. 67. Dr. Sabin Buragawww.purl.org/net/busaco caracteristici: prototipuri Deoarece orice obiect deține în mod implicit proprietatea prototype, structura unei clase poate fi extinsă ulterior un prototip e o proprietate oferind o legătură ascunsă către obiectul de care aparține
  68. 68. Dr. Sabin Buragawww.purl.org/net/busaco function Animal (nume, marime) { // definiție inițială this.nume = nume; this.marime = marime; } // pe baza protipurilor, definim noi metode Animal.prototype.oferaNume = function () { return this.nume; }; Animal.prototype.oferaMarime = function () { return this.marime; }; // instanțiem un obiect de tip Animal var tux = new Animal ("Tux", 17);
  69. 69. Dr. Sabin Buragawww.purl.org/net/busaco metodele predefinite – e.g., toString () – pot fi suprascrise
  70. 70. JavaScript Object Notation http://json.org/ Dr. Sabin Buragawww.purl.org/net/busaco json
  71. 71. Dr. Sabin Buragawww.purl.org/net/busaco json JavaScript Object Notation format compact pentru interschimb de date între aplicații biblioteci de procesare & alte resurse de interes: http://jsonauts.github.io/
  72. 72. Dr. Sabin Buragawww.purl.org/net/busaco { 'nume': 'Tux', 'stoc': 33, 'model': [ 'candid', 'furios', 'vesel' ] } json datele pot fi evaluate direct în JavaScript
  73. 73. Dr. Sabin Buragawww.purl.org/net/busaco Cum rulează programele JavaScript în navigatorul Web?
  74. 74. Dr. Sabin Buragawww.purl.org/net/busaco Majoritatea programelor JavaScript rulează – sunt interpretate – în navigatorul Web via un script engine
  75. 75. Dr. Sabin Buragawww.purl.org/net/busaco Majoritatea programelor JavaScript rulează – sunt interpretate – în navigatorul Web via un script engine SpiderMonkey, IonMonkey, Rhino (Mozilla) V8 (Google, Opera, Node.js)
  76. 76. Dr. Sabin Buragawww.purl.org/net/busaco Cod JavaScript intern vs. preluat dintr-un fișier extern <body> … <script type="text/javascript"> alert ("Salut, lume!"); </script> </body> <script type="text/javascript" src="http://salutari.info/salut.js"> </script>
  77. 77. Dr. Sabin Buragawww.purl.org/net/busaco Un program JavaScript are acces la arborele DOM (Document Object Model) corespunzător documentului HTML specificații ale Consorțiului Web www.w3.org/DOM/DOMTR
  78. 78. Dr. Sabin Buragawww.purl.org/net/busaco <!DOCTYPE html> <html> <body> <p>Tehnologii Web</p> <div> <img src="web.png"/> </div> </body> </html> HTML HtmlElement HTML BodyElement HTML ParagraphElement Text HTML DivElement HTML ImageElement
  79. 79. Dr. Sabin Buragawww.purl.org/net/busaco De asemenea, programele JavaScript au acces la diverse obiecte oferite de mediul de execuție pus la dispoziție de browser e.g., informații privind contextul rulării (caracteristici ale navigatorului, latența rețelei), istoricul navigării, fereastra de redare a conținutului, transfer (a)sincron de date,…
  80. 80. N-am putea recurge la biblioteci JS specifice? Dr. Sabin Buragawww.purl.org/net/busaco
  81. 81. Dr. Sabin Buragawww.purl.org/net/busaco colecții de (micro-)biblioteci JS: jster.net www.jsdb.io microjs.com
  82. 82. Dr. Sabin Buragawww.purl.org/net/busaco jQuery scop principal: manipularea facilă a documentului HTML pe baza selectorilor CSS – nivelul 3
  83. 83. Dr. Sabin Buragawww.purl.org/net/busaco jQuery concis, dar extensibil, ușor de folosit nu intră în conflict cu alte biblioteci JavaScript disponibil open source existența unui număr mare de extensii (plug-ins)
  84. 84. Dr. Sabin Buragawww.purl.org/net/busaco jQuery detalii tehnice + documentații: http://jquery.com/ http://learn.jquery.com/ http://jqfundamentals.com/ http://dochub.io/#jquery/
  85. 85. Dr. Sabin Buragawww.purl.org/net/busaco jQuery filosofie inițială: focalizarea asupra interacțiunii dintre codul JavaScript și constructiile HTML aproape fiecare operație urmează șablonul: „găsește ceva” + „execută ceva cu ceea ce-ai găsit”
  86. 86. Dr. Sabin Buragawww.purl.org/net/busaco jQuery accesul la nodurile documentului HTML se realizează via funcția jQuery() – notație prescurtată: $()
  87. 87. Dr. Sabin Buragawww.purl.org/net/busaco jQuery accesul la nodurile documentului HTML se realizează via funcția jQuery() – notație prescurtată: $() // liniile de tabel de pe poziții pare vor fi redate // via proprietățile de stil CSS din clasa ‘fundal-gri’ $("table tr:nth-child(even)").addClass("fundal-gri"); obiect jQuery selector CSS metodă (funcționalitate)
  88. 88. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').size () mărimea colecției obținute
  89. 89. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').each (function (div) { … }) iterare via o funcție – aici: anonimă
  90. 90. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('div.info').html ('<em>Design Jam 2014</em> la FII') inserare de construcții HTML
  91. 91. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('img.foto').attr ('src', '/anonim.png') alterarea unui atribut
  92. 92. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('a.menu').addClass ('vizitat') adăugarea unei clase CSS
  93. 93. Dr. Sabin Buragawww.purl.org/net/busaco jQuery unele rezultate ale $(…) pot întoarce colecții de noduri, prelucrate prin: $('p:odd').css ('color', 'blue') poziție impară modificarea unor proprietăți CSS
  94. 94. Dr. Sabin Buragawww.purl.org/net/busaco jQuery asocierea de funcții de tratare a evenimentelor // evenimentul click asupra unui element <a> $('a').click ( function(ev) { $(this).css({ backgroundColor: 'yellow' }); ev.preventDefault (); // previne comportamentul implicit }); $('a:first').click ();
  95. 95. Dr. Sabin Buragawww.purl.org/net/busaco jQuery suportul pentru transferuri asincrone Ajax (Asynchronous JavaScript And XML) încărcare asincronă a unui document $('div#stiri').load ('stiri.html');
  96. 96. Dr. Sabin Buragawww.purl.org/net/busaco jQuery suportul pentru transferuri asincrone preluare răspuns în format JSON $.getJSON (url, parametri, funcție-prelucrând-răspunsul);
  97. 97. Dr. Sabin Buragawww.purl.org/net/busaco jQuery suportul pentru transferuri asincrone metoda cea mai generală (low level) $.ajax (url, parametri);
  98. 98. Câteva exemple de interes? Dr. Sabin Buragawww.purl.org/net/busaco
  99. 99. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Obținerea fotografiilor publice stocate pe situl Flickr pe baza serviciului Web oferit cod-sursă disponibil la http://jsfiddle.net/busaco/4d2tmc6b/
  100. 100. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Obținerea fotografiilor publice stocate pe situl Flickr pe baza serviciului Web oferit utilizăm URL-ul http://api.flickr.com/services/feeds/photos_public.gne pentru a obține informații despre imagini (formate disponibile: Atom, CSV, JSON, XML,…) vezi http://www.flickr.com/services/feeds/docs/photos_public/
  101. 101. Dr. Sabin Buragawww.purl.org/net/busaco Forma generală a răspunsului JSON transmis de Flickr: { "title" : "Recent Uploads", "link" : "http://www.flickr.com/photos/", "modified" : "2013-12-06T13:33:07Z", "generator" : "http://www.flickr.com/", "items" : [ { interactiune web: ajax – studiu de caz "title" : "...", "link" : "http://www.flickr.com/photos/.../4204222/", "media" : { "m": "https://farm.staticflickr.com/...jpg" }, "date_taken": "2012-05-20T17:23:43-08:00", "description": "...", "published" : "2012-05-26T13:49:08Z", "author" : "...", "author_id" : "...", "tags" : "iasi romania informatica FII ..." } ] }
  102. 102. // preluăm asincron imagini disponibile pe Flickr jQuery.getJSON ("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { // datele de intrare transmise serviciului Web tags: "Iasi, informatica", format: "json" }, // funcția anonimă ce va procesa datele JSON trimise asincron de Flickr function (data) { // iterăm fiecare informație obținută de la serviciul Web $.each (data.items, function (numar, foto) { Dr. Sabin Buragawww.purl.org/net/busaco // creăm un element <img> având ca valoare a atributului "src" // adresa Web inclusă în datele JSON obținute; // acest <img> va fi adăugat la elementul cu id="imagini" din pagină $ ("<img/>").attr ("src", foto.media.m).attr ("title", foto.title) .appendTo ("#imagini"); }); }); studiu de caz
  103. 103. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz un posibil rezultat – editarea & rularea codului via JSFiddle
  104. 104. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Crearea unui joc simplu cu 2 zaruri „arunci” zarurile și câștigi 10 tucși numai dacă suma punctelor obținute este mai mare de 7 (uneori, pot apărea surprize…) cod-sursă disponibil la http://jsfiddle.net/busaco/r8L2kp30/
  105. 105. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Managementul unui zar – „clasa” Zar proprietate: valoareZar metode: obtineZar () și aruncaZar () obține un număr preluat de la random.org sau local cu Math.round (Math.random () * 5) + 1
  106. 106. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz Implementarea jocului – „clasa” Joc proprietăți: scorCurent, zar1, zar2 metode: aruncaZaruri (), afiseazaScor (), genereazaSurprize () probabilitate 20% ca Tux să fure banii probabilitate 15% ca Pingu să ofere 33 de tucși
  107. 107. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz depanare cu Firebug sau cu instrumentele oferite de browser
  108. 108. Bun, aș dori să aprofundez… Dr. Sabin Buragawww.purl.org/net/busaco
  109. 109. Dr. Sabin Buragawww.purl.org/net/busaco resurse S. Buraga, Dezvoltarea aplicațiilor Web la nivel de client, FII, UAIC, 2014: www.info.uaic.ro/~busaco/teach/courses/cliw/ S. Buraga, Front-end Web Developer Resources, 2014 http://tinyurl.com/cliw-devel JSbooks – the best free JavaScript resources http://jsbooks.revolunet.com/ JavaScript Instant Documentation http://dochub.io/#javascript/
  110. 110. Dr. Sabin Buragawww.purl.org/net/busaco JavaScript Mult succes!

×