Techtalk1

Javascript Não
Obstrutivo
Elber Ribeiro - @dynaum - dynaum.com
TechTalk #1 - 10/09/2010

sexta-feira, 10 de setembro de 2010

Mantenha diferentes aspectos
de uma aplicação separados.


Melhoria Progressiva

Utilizar tecnologias web em camadas para
permitir acesso a todos os conteúdos básicos
e funcionalidades de uma página usando
qualquer navegador e conexão à internet,
além de proporcionar as pessoas com mais
banda ou mais avançado software uma
versão melhorada da página.

Steven Champeon e Nick Finck, 2003


Aplicando no javascript

Produzir sites que funcionem sem JS

Usar o JS para proporcionar uma melhor
experiência para usuário: mais usabilidade,
rapidez e mais diversão


Algumas empresas bloqueiam JS no ﬁrewall

Existem pessoas usam o NoScript Firefox
para se “proteger de ataques”

Dispositivos móveis ignoram JS
completamente

LEITORES DE TELA NÃO
EXECUTAM JAVASCRIPT


Extensão NoScript

Exemplos de JNO


labels.js


Como funciona?
<label for=”search”>Search</label>
<input type =”text” id=”search” name=”q”>

Quando a página é carregada:

Procure label associado com text ﬁeld

Mova o texto para o text ﬁeld associado

Remova o label

Crie um evento para remover o texto
quando o elemento estiver em foco


Melhoria de código


Ruim

Você já leu nossos
<a href="javascript:window.open(
'termos.html', 'popup',
'height=500,width=400,toolbar=no' );">termos e
condições</a>?


Menos pior

<a href=”#” onclick="window.open(
'height=500,width=400,toolbar=no' ); return
false;">termos e condições</a>?


Bom

<a href=”termos.html” onclick="window.open(


Melhor

<a href=”termos.html” onclick="window.open(
this.href, 'popup',


Ultra megaboga

<a href=”termos.html” class=”nota_popup”>
termos e condições</a>?


Características

Sem código inline

Todo o código em um arquivo externo .js

Site usável sem javascript

Links e forms reutilizados

Elementos javascript dependentes são
adicionados dinamicamente


Javascript para o
nota_popup
Quando a página terminar de carregar:

Procurar todos os links com class
“nota_popup”

Quando o elemento for clicado:

Abrir uma janela popup da página
lincada

Não navegar na página


Código
window.onload = function() {

}


Código
var links = document.getElementByTagName(‘a’);
for(var i = 0, link; link = links[i]; i++)
if (link.className == 'nota_popup') {
link.onclick = function() {

}
}
}


Código
var links = document.getElementByTagName(‘a’);
for(var i = 0, link; link = links[i]; i++)
if (link.className == 'nota_popup') {
link.onclick = function() {
var href = this.href;
window.open(href, ‘popup’,
‘height=500,width=400,toolbar=no’);

return false;
}
}
}


Com jQuery
jQuery(document).ready(function() {

});


Com jQuery
jQuery('a.nota_popup').click(function() {

});
});


Com jQuery
var href = jQuery(this).attr('href');

});
});


Com jQuery
window.open(href, 'popup',
'height=500,width=400,toolbar=no'
);
return false;
});
});


Com jQuery
jQuery(function() {
);
return false;
});
});


Com jQuery
$(function() {
$('a.sidenote').click(function() {
var href = $(this).attr('href');
);
return false;
});
});


Vantagens

jQuery(document).ready() é executado
quando o DOM estiver pronto

$(‘a.side’) usa seletores CSS para encontrar
os elementos

.click() cria um evento em background


Características do
jQuery

Focado na interação entre HTML e JavaScript

Operações resumidas em:

Encontrar elemento

Fazer algo com ele


CSS Selectors

$(‘#nav’)

$(‘div#content h2’)

$(‘#nav li.current a’)


Resgatando Informação

$(‘div:first’).attr(‘title’)

$(‘div:first’).html()

$(‘div:first’).text()

$(‘div:first’).css(‘color’)


Setando Informação

$(‘div:first’).attr(‘title’, ‘Home’)

$(‘div:first’).html(‘Novo <p>conteúdo</p>’)

$(‘div:first’).text(‘Novo texto de conteúdo’)

$(‘div:first’).css(‘color’, ‘red’)


jQuery e Microformatos


jQuery e Microformatos
<ul class="restaurants">
<li class="vcard">
<h3>
<a class="fn org url" href="..."> Riddle & Finns</a>
</h3>
<div class="adr">
<p class="street-address">12b Meeting House Lane</p>
<p><span class="locality">Brighton</span>,
<abbr class="country-name" title="United Kingdom">UK</abbr>
</p>
<p class="postal-code">BN1 1HB</p>
</div>
<p>Telephone: <span class="tel">+44 (0)1273 323 008</ span></p>
<p class="geo">Lat/Lon:
<span class="latitude">50.822563</span>,
<span class="longitude">-0.140457</span>
</p>
</li>
...


Criando o mapa
jQuery(function($) {
var themap = $('<div id="themap"></div>').css({
'width': '90%',
'height': '400px' }).insertBefore('ul.restaurants');


Criando o mapa
var themap = $('<div id="themap"></div>').css({
'width': '90%',
'height': '400px' }).insertBefore('ul.restaurants');

var mapstraction = new Mapstraction('themap','google');
mapstraction.addControls({
zoom: 'large', map_type: true
});


Mostrando o mapa

mapstraction.setCenterAndZoom(
new LatLonPoint(50.8242, -0.14008),
15 // Zoom level
);


Pegando os
microformatos
$('.vcard').each(function() {
var hcard = $(this);
var latitude = hcard.find('.geo .latitude').text();
var longitude = hcard.find('.geo .longitude').text();

var marker = new Marker( new LatLonPoint(latidude,longitude) );
marker.setInfoBubble(
‘<div class=”bubble”>’ + hcard.html() + ‘</div>’
);
mapstraction.addMarker(marker);
});


labels.js com jQuery

...
<label for=”search” class=”inputLabel”>Search:</label>
<input type =”text” id=”search” name=”q”>
...


$('label.inputLabel').each(function() {

});
});


var label = $(this);
var input = $('#' + label.attr('for'));
var initial = label.hide().text().replace(':', '');

});
});


input.focus(function() {
input.css('color', '#000');
if (input.val() == initial) {
input.val('');
}
})

});
});


input.val('');
}
}).blur(function() {
if (input.val() == '') {
input.val(initial).css('color', '#aaa');
}
})
});
});


input.val('');
}
}).blur(function() {
if (input.val() == '') {
input.val(initial).css('color', '#aaa');
}
}).css('color', '#aaa').val(initial);
});
});


Perguntas?

Elber Ribeiro Próximo techtalk
elber@dynaum.com teremos sinatra!


Techtalk1

Recommended

Recommended

More Related Content

Featured

Featured (20)

Techtalk1