JavaScript în romglezăȘtefan Petrestefan.petre@gmail.com
IstorieJavaScriptNetscapeMocha       LiveScript       JavaScript   Netscape Navigator 2.0MicrosoftJScript     Internet Exp...
Ce este                        Limbaj bazat pe funcțiiJavaScript                     Funcțiile sunt obiecte               ...
Ce nu este             Nu are legatură cu JavaJavaScript   Nu se joacă doar în navigatoare
LibrariiJavaScriptPrototype        ToolkitsMooTools        YUIEnder (jeesh)   DojojQuery          Jquery UI
1.   Delegarea evenimentelor
1.      Delegarea evenimentelorDIV#slideshow              A.item   A.item   A.item   A.item     A#left                    ...
1.   Delegarea evenimentelor// funcția de procesare a click-uluivar clickHandler = function(ev) {    var targetEl = $(ev.t...
2.   Accesarea propietățilorvar divs = someParent.getElementsByTagName(DIV);for ( var i = 0; i < divs.length; i++ ) {    d...
2.1   Cache valori      1      2          3      4      5      6
2.1   Cache valori      1          var els = [];                 var onMove = function() {                     var current...
2.1   Cache valori      1          Mai rapid                 var els = [];                 var parentPos = $(parent).offse...
3.   Lazy functionsvar bindEvent = function (el, evType, func) {    if (window.addEventListener) {         el.addEventList...
4.   Touching the DOMvar divs = someParent.getElementsByTagName(DIV);var stl;for ( var i = 0, lng = divs.length; i < lng; ...
4.1   Fragmente ale documentuluivar el;for ( var i = 0; i < 100; i++ ) {    el = document.createElement(p);    el.innerHTM...
4.2   innerHTML și concatenarea șirurilorfor ( var i = 0; i < 100; i++ ) {    someParent.innerHTML += <p>Element: +i+</p>;...
4.3   Modificarea definițiilor CSS
5.   Scroll virtual
5.   Scroll virtual
5.1   Scroll virtual
5.1   Scroll virtual
5.1   Scroll virtual
6.   Defer loadingfunction deferLoadJS() {    var el = document.createElement("script");     el.src = "app.js";     docume...
7.   setTimeout si clearTimeoutvar winResizeObsv = function() {     var timer;     var regs = [];     var announce = funct...
7.1   Când se hotărăște utilizatorul
7.2   Mai bine mai târziu
7.2   Mai bine mai târziu
7.2   Mai bine mai târziu
MulțumescÎNTREBĂRI?
Upcoming SlideShare
Loading in …5
×

JavaScript in romgleza

849 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
849
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript in romgleza

  1. 1. JavaScript în romglezăȘtefan Petrestefan.petre@gmail.com
  2. 2. IstorieJavaScriptNetscapeMocha LiveScript JavaScript Netscape Navigator 2.0MicrosoftJScript Internet Explorer 3.0Ecma InternationalECMA-262 5 Ediții
  3. 3. Ce este Limbaj bazat pe funcțiiJavaScript Funcțiile sunt obiecte Loose typing Prototypal inheritanceEste un LIMBAJ DE PROGRAMARE Lambda
  4. 4. Ce nu este Nu are legatură cu JavaJavaScript Nu se joacă doar în navigatoare
  5. 5. LibrariiJavaScriptPrototype ToolkitsMooTools YUIEnder (jeesh) DojojQuery Jquery UI
  6. 6. 1. Delegarea evenimentelor
  7. 7. 1. Delegarea evenimentelorDIV#slideshow A.item A.item A.item A.item A#left A#right
  8. 8. 1. Delegarea evenimentelor// funcția de procesare a click-uluivar clickHandler = function(ev) { var targetEl = $(ev.target).closest(a); if (targetEl.size() == 1) { if (targetEl[0].id == left) { // arată imaginile din stânga } else if (targetEl[0].id == right) { // arată imaginile din dreapta } else { // încarcă imaginea pe care s-a dat click } } return false;};// atașează clickHandler evenimentului click pe elementul parinte$(#slideshow).bind(click, clickHandler);
  9. 9. 2. Accesarea propietățilorvar divs = someParent.getElementsByTagName(DIV);for ( var i = 0; i < divs.length; i++ ) { divs[i].style.color = #f00; divs[i].style.fontWeight = bold; divs[i].style.fontStyle = italic;}Mai rapidvar divs = someParent.getElementsByTagName(DIV);var stl;for ( var i = 0, lng = divs.length; i < lng; i++ ) { stl = divs[i].style; stl.color = #f00; stl.fontWeight = bold; stl.fontStyle = italic;}
  10. 10. 2.1 Cache valori 1 2 3 4 5 6
  11. 11. 2.1 Cache valori 1 var els = []; var onMove = function() { var currentPos = $(this).offset(); 2 var pos; for ( 3 var i = 0, lng = els.length; i < lng; i ++ ) { pos = $(els[i]).offset(); 4 if ( pos.top > currentPos.top ) { 5 // mută elmentul deasupra } } }; 6
  12. 12. 2.1 Cache valori 1 Mai rapid var els = []; var parentPos = $(parent).offset(); 2 var onMove = function(ev) { 3 var currentPos = $(this).offset(); for ( var i = 0, lng = els.length; i < lng; i ++ 4 ) { if ( parentPos.top + els[i].offsetTop > currentPos.top 5 ) { // mută elmentul deasupra } 6 } };
  13. 13. 3. Lazy functionsvar bindEvent = function (el, evType, func) { if (window.addEventListener) { el.addEventListener(evType, func, false); } else if (window.attachEvent) { el.attachEvent(on + evType, func, false); ]}Mai rapid și mai deșteptvar bindEvent = function (el, evType, func) { if (window.addEventListener) { bindEvent = function (el, evType, func) { el.addEventListener(evType, func, false); } } else if (window.attachEvent) { bindEvent = function (el, evType, func) { el.attachEvent(on + evType, func, false); } } bindEvent(el, evType, func);}
  14. 14. 4. Touching the DOMvar divs = someParent.getElementsByTagName(DIV);var stl;for ( var i = 0, lng = divs.length; i < lng; i++ ) { stl = divs[i].style; stl.color = #f00; stl.fontWeight = bold; stl.fontStyle = italic;}Mai rapidvar divs = document.getElementsByTagName(DIV);for ( var i = 0, lng = divs.length; i < lng; i++ ) { divs[i].className = someClass;}.someClass { color: #f00; font-weight: bold; font-style: italic;}
  15. 15. 4.1 Fragmente ale documentuluivar el;for ( var i = 0; i < 100; i++ ) { el = document.createElement(p); el.innerHTML = Element: +i; someParent.appendChild(el);}Mai rapidvar el;var fragment = document.createDocumentFragment();for ( var i = 0; i < 100; i++ ) { el = document.createElement(p); el.innerHTML = Element: +i; fragment.appendChild(el);}someParent.appendChild(fragment);
  16. 16. 4.2 innerHTML și concatenarea șirurilorfor ( var i = 0; i < 100; i++ ) { someParent.innerHTML += <p>Element: +i+</p>;}Mai rapidvar html = [];for ( var i = 0; i < 100; i++ ) { html[html.length] = <p>Element: ; html[html.length] = i; html[html.length] = </p>;}someParent.innerHTML += html.join();
  17. 17. 4.3 Modificarea definițiilor CSS
  18. 18. 5. Scroll virtual
  19. 19. 5. Scroll virtual
  20. 20. 5.1 Scroll virtual
  21. 21. 5.1 Scroll virtual
  22. 22. 5.1 Scroll virtual
  23. 23. 6. Defer loadingfunction deferLoadJS() { var el = document.createElement("script"); el.src = "app.js"; document.body.appendChild(element);}bindEvent(window, load, deferLoadJS);
  24. 24. 7. setTimeout si clearTimeoutvar winResizeObsv = function() { var timer; var regs = []; var announce = function() { for (var i=0, lng = regs.length; i < lng; i++) { regs[i].apply(); } }; return { register: function(callback) { regs.push(callback); }, resize: function() { clearTimeout(timer); timer = setTimeout(announce, 200); } };}();$(window).bind(resize, winResizeObsv.resize);winResizeObsv.register(mapContainer.resize);winResizeObsv.register(optionsPanel.fixHeight);
  25. 25. 7.1 Când se hotărăște utilizatorul
  26. 26. 7.2 Mai bine mai târziu
  27. 27. 7.2 Mai bine mai târziu
  28. 28. 7.2 Mai bine mai târziu
  29. 29. MulțumescÎNTREBĂRI?

×