JavaScript in romgleza
Upcoming SlideShare
Loading in...5
×
 

JavaScript in romgleza

on

  • 778 views

 

Statistics

Views

Total Views
778
Views on SlideShare
778
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript in romgleza JavaScript in romgleza Presentation Transcript

  • JavaScript în romglezăȘtefan Petrestefan.petre@gmail.com
  • IstorieJavaScriptNetscapeMocha LiveScript JavaScript Netscape Navigator 2.0MicrosoftJScript Internet Explorer 3.0Ecma InternationalECMA-262 5 Ediții
  • Ce este Limbaj bazat pe funcțiiJavaScript Funcțiile sunt obiecte Loose typing Prototypal inheritanceEste un LIMBAJ DE PROGRAMARE Lambda
  • 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 A#right
  • 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);
  • 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;}
  • 2.1 Cache valori 1 2 3 4 5 6
  • 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
  • 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 } };
  • 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);}
  • 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;}
  • 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);
  • 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();
  • 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"; document.body.appendChild(element);}bindEvent(window, load, deferLoadJS);
  • 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);
  • 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?