JavaScript în romgleză

Ștefan Petrestefan.petre@gmail.com

JavaScriptNetscape

Mocha LiveScript JavaScript Netscape Navigator 2.0

Microsoft

JScript Internet Explorer 3.0

Istorie

Ecma International

ECMA-262 5 Ediții

JavaScriptCe este

Este un LIMBAJ DE PROGRAMARE

Limbaj bazat pe funcții

Funcțiile sunt obiecte

Loose typing

Prototypal inheritance

Lambda

JavaScriptCe nu este

Nu are legatură cu Java

Nu se joacă doar în navigatoare

JavaScriptLibrarii

Prototype

MooTools

Ender (jeesh)

jQuery

YUI

Dojo

Jquery UI

Toolkits

Delegarea evenimentelor1.

Delegarea evenimentelor1.

DIV#slideshow

A.item A.item A.item A.item

A#left A#right

Delegarea evenimentelor1.

// 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);

Accesarea propietăților2.

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';

}

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

Cache valori2.1

1

2

3

4

6

5

Cache valori2.1

var els = [];

var onMove = function() {var currentPos = $(this).offset();var pos;for (

var i = 0, lng = els.length;i < lng;i ++

) {pos = $(els[i]).offset();if (

pos.top > currentPos.top) {

// mută elmentul deasupra}

}};

1

2

3

4

6

5

Cache valori2.1

1

2

3

4

6

5

var els = [];var parentPos = $(parent).offset();

var onMove = function(ev) {var currentPos = $(this).offset();for (

var i = 0, lng = els.length;i < lng;i ++

) {if (

parentPos.top + els[i].offsetTop > currentPos.top

) {// mută elmentul deasupra

}}

};

Mai rapid

Lazy functions3.

var bindEvent = function (el, evType, func) {if (window.addEventListener) {

el.addEventListener(evType, func, false);} else if (window.attachEvent) {

el.attachEvent('on' + evType, func, false);]

}

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);

}

Mai rapid și mai deștept

Touching the DOM4.

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';

}

var divs = document.getElementsByTagName('DIV');for ( var i = 0, lng = divs.length; i < lng; i++ ) {

divs[i].className = 'someClass';}

Mai rapid

.someClass {color: #f00;font-weight: bold;font-style: italic;

}

Fragmente ale documentului4.1

var el;for ( var i = 0; i < 100; i++ ) {

el = document.createElement('p');el.innerHTML = 'Element: '+i;someParent.appendChild(el);

}

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);

Mai rapid

innerHTML și concatenarea șirurilor4.2

for ( var i = 0; i < 100; i++ ) {someParent.innerHTML += '<p>Element: '+i+'</p>';

}

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('');

Mai rapid

Modificarea definițiilor CSS4.3

Scroll virtual5.

Scroll virtual5.

Scroll virtual5.1

Scroll virtual5.1

Scroll virtual5.1

Defer loading6.

function deferLoadJS() { var el = document.createElement("script");

el.src = "app.js"; document.body.appendChild(element);

}

bindEvent(window, 'load', deferLoadJS);

setTimeout si clearTimeout7.

var 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);

Când se hotărăște utilizatorul7.1

Mai bine mai târziu7.2

Mai bine mai târziu7.2

Mai bine mai târziu7.2

MulțumescÎNTREBĂRI?