Techtalk1

Javascript Não Obstrutivo

Elber Ribeiro - @dynaum - dynaum.comTechTalk #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 firewall

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 NoScriptsexta-feira, 10 de setembro de 2010

Exemplos de JNO


labels.js


Como funciona?

Quando a página é carregada:

Procure label associado com text field

Mova o texto para o text field associado

Remova o label

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

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


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

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


Bom

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


Melhor

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


Ultra megaboga

Você já leu nossos<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ódigowindow.onload = function() {

}


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

} }}


Códigowindow.onload = function() { 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(document).ready(function() { jQuery('a.nota_popup').click(function() {

});});


Com jQuery

jQuery(document).ready(function() { jQuery('a.nota_popup').click(function() { var href = jQuery(this).attr('href');

});});


Com jQuery

jQuery(document).ready(function() { jQuery('a.nota_popup').click(function() { var href = jQuery(this).attr('href'); window.open(href, 'popup', 'height=500,width=400,toolbar=no' ); return false; });});


Com jQuery

jQuery(function() { jQuery('a.nota_popup').click(function() { var href = jQuery(this).attr('href'); window.open(href, 'popup', 'height=500,width=400,toolbar=no' ); return false; });});


Com jQuery

$(function() { $('a.sidenote').click(function() { var href = $(this).attr('href'); window.open(href, 'popup', 'height=500,width=400,toolbar=no' ); 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 mapajQuery(function($) { var themap = $('<div id="themap"></div>').css({ 'width': '90%', 'height': '400px' }).insertBefore('ul.restaurants');


Criando o mapajQuery(function($) { 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”>...


labels.js com jQueryjQuery(function($) { $('label.inputLabel').each(function() {

});});


labels.js com jQueryjQuery(function($) { $('label.inputLabel').each(function() { var label = $(this); var input = $('#' + label.attr('for')); var initial = label.hide().text().replace(':', '');

});});


labels.js com jQueryjQuery(function($) { $('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(''); } })

});});


labels.js com jQueryjQuery(function($) { $('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(''); } }).blur(function() { if (input.val() == '') { input.val(initial).css('color', '#aaa'); } }) });});


labels.js com jQueryjQuery(function($) { $('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(''); } }).blur(function() { if (input.val() == '') { input.val(initial).css('color', '#aaa'); } }).css('color', '#aaa').val(initial); });});


Perguntas?

Próximo techtalk teremos sinatra!

Elber [email protected]


mailto:[email protected]

mailto:[email protected]

Techtalk1

Technology

Transcript of Techtalk1