2. Istorie
JavaScript
Netscape
Mocha LiveScript JavaScript Netscape Navigator 2.0
Microsoft
JScript Internet Explorer 3.0
Ecma International
ECMA-262 5 Ediții
3. Ce este Limbaj bazat pe funcții
JavaScript Funcțiile sunt obiecte
Loose typing
Prototypal inheritance
Este un LIMBAJ DE PROGRAMARE Lambda
4. Ce nu este
Nu are legatură cu Java
JavaScript Nu se joacă doar în navigatoare
8. 1. Delegarea evenimentelor
// funcția de procesare a click-ului
var 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. 2. Accesarea propietăților
var 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 rapid
var 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';
}
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. 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. 3. Lazy functions
var 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ștept
var 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. 4. Touching the DOM
var 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 rapid
var 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. 4.1 Fragmente ale documentului
var el;
for ( var i = 0; i < 100; i++ ) {
el = document.createElement('p');
el.innerHTML = 'Element: '+i;
someParent.appendChild(el);
}
Mai rapid
var 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. 4.2 innerHTML și concatenarea șirurilor
for ( var i = 0; i < 100; i++ ) {
someParent.innerHTML += '<p>Element: '+i+'</p>';
}
Mai rapid
var 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('');
