Scti 2011 minicurso jquery
-
Upload
ciberglo -
Category
Technology
-
view
1.302 -
download
0
Transcript of Scti 2011 minicurso jquery
Javascript + jQuery:With great power, comes great responsibility
http://www.slideshare.net/ciberglo/scti-2011-minicurso-jquery
Gabriel Lima
@glima5
github.com/gabriellima
Balanceando: Bsicos
typeof("") == "string"
typeof(0) == "number""2" + "2" = "22"
typeof(true) == "boolean"
if ( 4 && !0 && "test" && !"" && !undefined && { } ){
alert("true");
}
Balanceando: Funes
Balanceando: Objetos
Tudo que no uma string, um nmero ou booleano
var shape = new Shape();
var obj = { }; // Object literal, == "new Object()"
var arr = [ ]; // Array literal, == "new Array()"
var exp = /[0-9a-z]/ig; // reg exp literal
Balanceando: Hashes
Objetos podem ser manipulados como hashes:
var lastNames = { };
lastNames["Jason"] = "Horton";
lastNames["Matheu"] = "Chambers";
lastNames["Rohit"] = "Mistry";
for ( var key in lastNames ) {
alert( key + " " + lastNames[key] );
}
Exemplo: Array sorting
var arr = ["a","f","Z","b","x", "o", "A"].sort();
// retorna ["A", "Z", "a", "b", "f", "o", "x"] ... rpido mas no to legal...
Exemplo: Array sorting
var arr = ["a","f","Z","b","x", "o", "A"].sort( by_alpha )
// retorna ["a", "A", "b", "f", "o", "x", "Z"] ... mais til
Scope
var iAmGlobal = 5 * 5;
function doSomething() { var inner = 5 * 5;};
var g = "global";function go() { var l = "local";}go();console.log(l); // throws a reference error
Scope: How it works
function go() { console.debug(this); }go();
var myObject = { go: function() { console.debug(this); }};myObject.go(); // console.debugs a reference to myObject
Scope: How it works
function MyClass() { this.go = function() { console.debug(this); }};var instance1 = new MyClass();var instance2 = new MyClass();
instance1.go(); // console.debugs a reference to the MyClass instance1instance2.go(); // console.debugs a reference to the MyClass instance2
Qual o lugar do javascript?
JavaScript bom para clculo, converso, acesso a fontes externas (Ajax) e definio de comportamentos na interface (eventos).
Todo o resto deve ser deixado pra tecnologia que temos pra fazer o servio.
Progressive enhancement
Web Page :: Printed pageWeb Site Web Browser ?No!
Web Browser Web PageTeleviso Show de msica
Sim!
Progressive enhancement 2.0
Progressive enhancement 2.0
Chrome
Progressive enhancement 2.0
Firefox
Progressive enhancement 2.0
IE 9
Progressive enhancement 2.0
IE 6
Progressive enhancement 2.0
Netscape 4
Melhor experincia de acordo com capacidade do dispositivo
Bordas curvas, Sombra, Gradient CSS
Script avanado e comportamentos somente com APIs javascript nativas
Navegadores antigos quase sempre precisam de muito mais cdigo pra fazer a mesma coisa!
Mas as pessoas no vo notar?
O que voc viu?
Voc no est sozinho
Keep javascript out of HTML
wrong!
better!
(function(){
var search_button = document.getElementById('do_search');
search_button.onclick = function(event) {
do_something();
}
})();
HTML vs Javascript
Fuja de inserir HTML diretamente no cdigo javascript
Se voc percebe que est digitando muito cdigo HTML num codigo javascript, voc deve estar fazendo algo errado
Keep HTML out of Javascript
var element = document.getElementById('container');element.innerHTML =
Keep Javascript out of CSS
.foo {
width: expression(document.offsetwidth + px);
}
Keep CSS out of Javascript
Estilos no devem ser confundidos com comportamentos
Exemplo: borda vermelhaColoque uma borda vermelha em todos campos com uma classe required quando estiverem vazios.
Exemplo: borda vermelha
Exemplo: borda vermelha
Event handlers should only handle events
//the wrong way!!!function handleClick(event){ var popup = document.getElementById("popup"); popup.style.left = event.clientX + "px"; popup.style.top = event.clientY + "px"; popup.className = "reveal";}
Don't pass the event object around
//better, but still wrongfunction handleClick(event){ showPopup(event);}function showPopup(event){ var popup = document.getElementById("popup"); popup.style.left = event.clientX + "px"; popup.style.top = event.clientY + "px"; popup.className = "reveal";}
Separe corretamente os event handlings
//fuck yeah!!function handleClick(event){ showPopup(event.clientX, event.clientY);}function showPopup(x, y){ var popup = document.getElementById("popup"); popup.style.left = x + "px"; popup.style.top = y + "px"; popup.className = "reveal";}
Avoid global functions and variables
function handleClick(event){ showPopup(event.clientX, event.clientY);}function showPopup(x, y){ var popup = document.getElementById("popup"); popup.style.left = x + "px"; popup.style.top = y + "px"; popup.className = "reveal";}
Create a single global (se necessrio)
var Controller = { handleClick: function(event){ this.showPopup(event.clientX, event.clientY); }, showPopup: function (x, y){ var popup = document.getElementById("popup"); popup.style.left = x + "px"; popup.style.top = y + "px"; popup.className = "reveal"; }};
Separe configuraes
function validate(value) { if (!value) { alert("Invalid value"); location.href = "/errors/invalid.php"; }};
Separe configuraes
var config = { urls: { invalid: "/errors/invalid.php" }, strs: { invalidmsg: "Invalid value" }};function validate(value) { if (!value) { alert(config.strs.invalidmsg); location.href = config.urls.invalid; }};
Separe configuraes
Todas URLs requeridas pelo javascript
Qualquer texto exibido para o usurio
Qualquer HTML que precisa ser criado pelo javascript
Configuraes (exemplo: itens por pgina)
Valores nicos repetidos
Qualquer coisa que talvez seja modificada no futuro, e utilizada em mais de um lugar
Otimizando
Loops:var names = ['George','Ringo','Paul','John'];for(var i=0;i 0 && (+new Date() - start < 50)); if (todo.length > 0){ setTimeout(arguments.callee, 25); } else { callback(items); } }, 25);}
Web Workers to the rescue!
Web Workers
Asynchronous JavaScript execution
Execution happens in a separate process
Not on the UI thread = no UI delays
Data-driven API
Data is serialized when sending data into or out of Worker
No access to DOM, BOM
Completely separate execution environment
//in page
var worker = new Worker("code.js");
worker.onmessage = function(event){
alert(event.data);};worker.postMessage("Nicholas");
//in code.js
self.onmessage = function(event){ self.postMessage("Hello, " + event.data + "!");};
Resumo de Responsive UI
UI thread is used both for JavaScript execution and UI updates
UI cannot be updated while JavaScript is executing
Keep JavaScript execution to 50ms use timers and/or web workers to offload processing
Jquery: Traversing
jQuery
Um Faz quase tudo da vida
Porm, deve ser usado com cautela, pois ao mesmo tempo que pode melhorar o cdigo pode s vezes prejudicar a performance
Principal teoria: html / css selectors
http://code.jquery.com/jquery-latest.js// jQuery 1.7
Jquery: Traversing
O HTMLdiv.container o 'wrapping element'
div.photo, div.title and div.rating so filhos 'imediatos' do div.container
Cada div.star filho de div.rating
Quando uma div.star tem a class 'on', uma estrela selecionada
Mas por qu traversing?
O select do jQuery j no poderoso o suficiente?
Jquery: Traversing
Bem, no exemplo anterior, queremos que quando o usurio clicar numa dada estrela, todas as estrelas esquerda sejam tambm selecionadas, e todas as direita no sejam selecionadas
$('.star').click(function(){ $(this).addClass('on'); // How to select the parent div of 'this'? // How to select stars to the left side of 'this'? });
.children
This function gets the immediate children of a set of elements.
This can be very handy in a variety of situations. Look at the figure below:The container of the stars are selected initially.
A selector expression is passed to children() to narrow the result down to only the full stars.
If children() receives no parameters, all immediate children will be returned.
No grandchildren will be returned. Sorry.
.children
.filter
This function filters out elements from the wrapped set using a passed selector expression. Any elements that doesnt match the expression will be removed from the selection.
The following example should be pretty straightforward. The full stars are filtered out from a collection of all five stars.
.not
Quite the opposite from filter(), not() removes the matching elements from the wrapped set.
See the example below. Even stars are removed from the selection, leaving only the odd ones.
Notice! Even and odd selectors are zero-indexed. They count index from 0, NOT 1.
.add
What if we want to add some elements to the wrapped set? The add() function does this.
Again, very straightforward. The photo box is added to the selection.
.slice
Sometimes we may wish to obtain a subset of the wrapped set, based on the position of elements within the set. And slice() is the way to go.The first parameter is the zero-based position of the first element to be included in the returned slice.
The second parameter is the zero-based index of the first element NOT to be included in the returned slice. If omitted, the slice extends to the end of the set.
So slice(0, 2) selects the first two stars.
.slice
.parent
The parent() function selects the direct parent of a set of elements.
As shown in the figure below, the first stars direct parent is selected. Very handy, hah?
It should be noted that only the direct parent will be returned, which is why its singular. No grandparent or ancestors will be selected.
.parents
This one is plural! The parents() function selects all ancestors of a set of elements. I mean ALL ancestors from the direct parent all the way up to body and html. So its best to pass a selector expression to narrow down the result.
By passing .container to parents(), div.container, which actually is the grandparent of the first star, is selected.
.siblings
This function selects all siblings (brothers and sisters) of a set of elements. An expression can be passed to filter the result.
Look at the example:Whos the first stars siblings? The other four stars, right?
The odd siblings are selected as shown. Again, the index is zero-based. Look at the red numbers below the stars.
.prev e .prevAll
The prev() function selects the previous (one) sibling
The prevAll() selects all previous siblings of a set of elements.
This is super handy if youre building a star rating widget. The previous siblings of the third star are selected.
.next e .nextAll
These functions work in the same way as prev and prevAll, except for that they select the NEXT siblings.
Traversing - Soluo
Vejamos como essa funo resolve nossa dor de cabea:
$('.star').click(function(){ $(this).addClass('on'); // How to select the parent div of 'this'? $(this).parent().addClass('rated'); // How to select stars to the left side of 'this'? $(this).prevAll().addClass('on'); $(this).nextAll().removeClass('on'); });
Traversing
This is the very problem we mentioned early in this tutorial, right? Several traversing functions are used in these lines of code.In Line 5, look at the use of parent(). Easy, hah?
In Line 8 and 9, prevAll() and nextAll() select the to-be full stars and empty stars.
Traversing can be even more powerful when used together.
The output of one function can be the input of another that is to say, theyre chainable.
Multi-select transfer
$().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').appendTo('#select2'); });
$('#remove').click(function() { return !$('#select2 option:selected').appendTo('#select1'); }); });
Multi-transfer
$().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').remove().appendTo('#select1'); }); }); a { display: block; border: 1px solid #aaa; text-decoration: none; background-color: #fafafa; color: #123456; margin: 2px; clear:both; } div { float:left; text-align: center; margin: 10px; } select { width: 100px; height: 80px; } Option 1 Option 2 Option 3 Option 4 add >>