Sabin Buraga — JavaScript

2,688 views

Published on

O presentation regarding the essential aspects of the JavaScript language.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,688
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
57
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sabin Buraga — JavaScript

  1. 1. JavaScript Dr. Sabin Buraga www.purl.org/net/busaco @busaco
  2. 2. “Cu cat cunosti mai bine, cu atat iubesti mai mult.” Leonardo da Vinci
  3. 3. inventat de Brendan Eich (1995)
  4. 4. denumit initial LiveScript
  5. 5. implementat in Netscape Navigator
  6. 6. adaptat de Microsoft: JScript (1996)
  7. 7. standardizat in 1997 de ECMA European Computer Manufacturers Association www.ecma-international.org
  8. 8. limbaj de tip script (interpretat)
  9. 9. limbaj de tip script (interpretat) destinat sa manipuleze, sa automatizeze si sa integreze facilitatile oferite de un anumit sistem
  10. 10. limbaj de tip script (interpretat) nu necesita intrari/iesiri in mod implicit
  11. 11. Cum putem executa programele JavaScript?
  12. 12. mediu de executie (host-environment): navigator Web “injectarea” de cod JavaScript in documentele (X)HTML via <script>
  13. 13. mediu de executie (host-environment): platforma de dezvoltare a aplicatiilor e.g., Adobe Flex/AIR
  14. 14. mediu de executie (host-environment): aplicatie de sine-statatoare Adobe Creative Suite, UltraEdit etc.
  15. 15. mediu de executie (host-environment): procesor (engine) independent e.g., Yahoo! Widget Engine
  16. 16. mediu de executie (host-environment): componente ale sistemului de operare Dashboard – Mac OS X Sidebar – Windows Vista/7
  17. 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. 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. 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. 20. “valoarea” NaN – “not a number” parseInt ("Salut")NaN isNaN (NaN + 33)true
  21. 21. valori speciale: Infinity –Infinity
  22. 22. un caracter reprezinta un sir de lungime 1 sirurile sunt obiecte "Salut".length5
  23. 23. valorile 0, "", NaN, null, undefined sunt interpretate ca fiind false
  24. 24. variabile sunt declarate cu var var marime; var numeAnimal = "Tux";
  25. 25. variabilele declarate fara valori asignate, se considera undefined
  26. 26. daca nu se foloseste var, atunci variabila este considerata globala de evitat asa ceva!
  27. 27. conversia tipurilor se face “din zbor” "3" + 4 + 5345 3 + 4 + "5"75
  28. 28. pentru a afla tipul unei expresii, se foloseste typeof typeof "Tux"string
  29. 29. instructiuni de control testare: if ... else, switch
  30. 30. instructiuni de control ciclare: while, do ... while, for
  31. 31. instructiuni de control exceptii: try ... catch ... finally emiterea unei exceptii: throw
  32. 32. obiecte perechi nume—valoare tabele de dispersie (hash) in C/C++ tablouri asociative in Perl, PHP, Ruby HashMaps in Java
  33. 33. obiecte perechi nume—valoare numele este desemnat de un sir de caractere valoarea poate fi de orice tip
  34. 34. obiecte colectii de proprietati, avand mai multe atribute proprietatile pot contine alte obiecte, valori primitive sau metode
  35. 35. obiecte in JavaScript, se predefinesc obiectele Global Object Function Array String Boolean Number Math Date
  36. 36. obiecte create prin intermediul lui new var obiect = new Object(); var obiect = {}; // echivalent cu linia anterioara
  37. 37. obiecte accesarea proprietatilor obiect.nume = "Tux"; var nume = obiect.nume;
  38. 38. obiecte accesarea proprietatilor obiect.nume = "Tux"; var nume = obiect.nume; echivalent: obiect["nume"] = "Tux"; var nume = obiect["nume"];
  39. 39. obiecte declarare + asociere de valori var pingu = { nume: "Tux", proprietati: { culoare: "oranj", marime: 17 } }
  40. 40. tablouri sunt tipuri speciale de obiecte proprietatile sunt numere, nu siruri de caractere
  41. 41. tablouri var zoo = new Array (); zoo[0] = "pinguin"; zoo[1] = "omida"; zoo[2] = "urs"; zoo.length3
  42. 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. 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. 44. tablouri elementele pot apartine unor tipuri de date eterogene var zoo = [16, "musca", true, "gaga"];
  45. 45. functii obiecte definite prin function function transformaPixeliInPuncte (px) { var puncte = px * 300; return puncte; }
  46. 46. functii argumentele primite de o functie se acceseaza via tabloul arguments
  47. 47. functii pot fi specificate functii anonime expresii lambda
  48. 48. functii pot fi specificate functii anonime expresii lambda in acest sens, JavaScript este un limbaj functional
  49. 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. 50. putem incapsula functiile in clase?
  51. 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. 52. instantierea unui obiect: var tux = new Animal ("Tux", 17);
  53. 53. operatorul new creaza un nou obiect vid si apeleaza functia specificata cu this setat pe acest obiect
  54. 54. aceste functii se numesc constructori, trebuie apelate via new si, prin conventie, au numele scris cu litera mare
  55. 55. structura unei clase poate fi extinsa ulterior, folosind proprietatea prototype
  56. 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. 57. pentru a cunoaste tipul unui obiect – pe baza constructorului si a ierarhiei de prototipuri – se foloseste operatorul instanceof
  58. 58. var marimi = [17, 20, 7, 14]; marimi instanceof Arraytrue marimi instanceof Objecttrue marimi instanceof Stringfalse
  59. 59. extinderea claselor adaugarea unei metode se realizeaza via prototype
  60. 60. Animal.prototype.oferaNumeMare = function () { return this.nume.toUpperCase (); } tux.oferaNumeMare ()"TUX"
  61. 61. in JavaScript, totul e considerat ca fiind obiect – chiar si functiile
  62. 62. orice obiect e intotdeauna mutabil (poate fi alterat oricind)
  63. 63. operatorul . este echivalent cu de-referentierea: obiect.prop === obiect["prop"]
  64. 64. functiile ascund orice este definit in interiorul lor
  65. 65. accesorul this este relativ la contextul executiei, nu al declararii
  66. 66. rularea in browser programele JavaScript au acces la diverse obiecte oferite de navigatorul Web
  67. 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. 68. graceful degradation & progresive enhancement conceperea “stratificata” a aplicatiilor JavaScript
  69. 69. graceful degradation & progresive enhancement initial: interactiune minimala, fara JavaScript adaugarea progresiva a facilitatilor, in functie de context
  70. 70. graceful degradation & progresive enhancement inaintea folosirii oricarei tehnici dorite, de testat suportul oferit de navigator: JavaScript, cookie-uri, clase/metode DOM, Ajax,…
  71. 71. JSON – JavaScript Object Notation format compact pentru interschimb de date intre aplicatii
  72. 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. 73. JSON – JavaScript Object Notation defineste datele in termeni de obiecte & literali json.org
  74. 74. { 'nume' : 'Tux', 'stoc' : 33, 'gen' : ['candid', 'furios', 'vesel'] } datele pot fi evaluate direct in JavaScript
  75. 75. instrumente medii de dezvoltare Aptana Studio depanare Firebug (Lite) Visual Studio Developer 2010
  76. 76. instrumente testare (inginerie software) JSLint, JsUnit, jsTrace, Selenium
  77. 77. instrumente alte extensii/utilitare folositoare GreaseMonkey, Ubiquity, Y! Slow SpiderMonkey Rhino JavaScript Shell
  78. 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. 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. 80. jQuery focalizarea asupra interactiunii dintre codul JavaScript si constructiile (X)HTML
  81. 81. jQuery aproape orice operatie urmeaza regula: “gaseste ceva” + “executa ceva cu ceea ce-ai gasit”
  82. 82. jQuery accesul la nodurile documentului HTML se realizeaza via functia jQuery() notatie prescurtata: $()
  83. 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. 84. jQuery selectarea nodurilor dorite recurge la conventiile privitoare la selectorii CSS http://docs.jquery.com/Selectors
  85. 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. 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. 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. 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. 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. 90. jQuery extinderi via plug-in-uri: manipularea formularelor jquery.com/plugins/project/form
  91. 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. 92. jQuery extinderi via plug-in-uri: pentru alte detalii, a se consulta http://plugins.jquery.com
  93. 93. JavaScript
  94. 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. 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

×