techtalk1
TRANSCRIPT
![Page 1: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/1.jpg)
Javascript Não Obstrutivo
Elber Ribeiro - @dynaum - dynaum.comTechTalk #1 - 10/09/2010
sexta-feira, 10 de setembro de 2010
![Page 2: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/2.jpg)
Mantenha diferentes aspectos de uma aplicação separados.
sexta-feira, 10 de setembro de 2010
![Page 3: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/3.jpg)
sexta-feira, 10 de setembro de 2010
![Page 4: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/4.jpg)
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
sexta-feira, 10 de setembro de 2010
![Page 5: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/5.jpg)
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
sexta-feira, 10 de setembro de 2010
![Page 6: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/6.jpg)
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
sexta-feira, 10 de setembro de 2010
![Page 7: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/7.jpg)
Extensão NoScriptsexta-feira, 10 de setembro de 2010
![Page 8: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/8.jpg)
Exemplos de JNO
sexta-feira, 10 de setembro de 2010
![Page 9: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/9.jpg)
labels.js
sexta-feira, 10 de setembro de 2010
![Page 10: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/10.jpg)
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”>
sexta-feira, 10 de setembro de 2010
![Page 11: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/11.jpg)
Melhoria de código
sexta-feira, 10 de setembro de 2010
![Page 12: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/12.jpg)
Ruim
Você já leu nossos<a href="javascript:window.open('termos.html', 'popup','height=500,width=400,toolbar=no' );">termos e condições</a>?
sexta-feira, 10 de setembro de 2010
![Page 13: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/13.jpg)
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>?
sexta-feira, 10 de setembro de 2010
![Page 14: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/14.jpg)
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>?
sexta-feira, 10 de setembro de 2010
![Page 15: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/15.jpg)
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>?
sexta-feira, 10 de setembro de 2010
![Page 16: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/16.jpg)
Ultra megaboga
Você já leu nossos<a href=”termos.html” class=”nota_popup”>termos e condições</a>?
sexta-feira, 10 de setembro de 2010
![Page 17: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/17.jpg)
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
sexta-feira, 10 de setembro de 2010
![Page 18: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/18.jpg)
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
sexta-feira, 10 de setembro de 2010
![Page 19: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/19.jpg)
Códigowindow.onload = function() {
}
sexta-feira, 10 de setembro de 2010
![Page 20: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/20.jpg)
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() {
} }}
sexta-feira, 10 de setembro de 2010
![Page 21: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/21.jpg)
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; } }}
sexta-feira, 10 de setembro de 2010
![Page 22: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/22.jpg)
Com jQuery
jQuery(document).ready(function() {
});
sexta-feira, 10 de setembro de 2010
![Page 23: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/23.jpg)
Com jQuery
jQuery(document).ready(function() { jQuery('a.nota_popup').click(function() {
});});
sexta-feira, 10 de setembro de 2010
![Page 24: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/24.jpg)
Com jQuery
jQuery(document).ready(function() { jQuery('a.nota_popup').click(function() { var href = jQuery(this).attr('href');
});});
sexta-feira, 10 de setembro de 2010
![Page 25: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/25.jpg)
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; });});
sexta-feira, 10 de setembro de 2010
![Page 26: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/26.jpg)
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; });});
sexta-feira, 10 de setembro de 2010
![Page 27: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/27.jpg)
Com jQuery
$(function() { $('a.sidenote').click(function() { var href = $(this).attr('href'); window.open(href, 'popup', 'height=500,width=400,toolbar=no' ); return false; });});
sexta-feira, 10 de setembro de 2010
![Page 28: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/28.jpg)
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
sexta-feira, 10 de setembro de 2010
![Page 29: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/29.jpg)
Características do jQuery
Focado na interação entre HTML e JavaScript
Operações resumidas em:
Encontrar elemento
Fazer algo com ele
sexta-feira, 10 de setembro de 2010
![Page 30: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/30.jpg)
CSS Selectors
$(‘#nav’)
$(‘div#content h2’)
$(‘#nav li.current a’)
sexta-feira, 10 de setembro de 2010
![Page 31: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/31.jpg)
Resgatando Informação
$(‘div:first’).attr(‘title’)
$(‘div:first’).html()
$(‘div:first’).text()
$(‘div:first’).css(‘color’)
sexta-feira, 10 de setembro de 2010
![Page 32: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/32.jpg)
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’)
sexta-feira, 10 de setembro de 2010
![Page 33: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/33.jpg)
jQuery e Microformatos
sexta-feira, 10 de setembro de 2010
![Page 34: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/34.jpg)
sexta-feira, 10 de setembro de 2010
![Page 35: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/35.jpg)
sexta-feira, 10 de setembro de 2010
![Page 36: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/36.jpg)
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>...
sexta-feira, 10 de setembro de 2010
![Page 37: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/37.jpg)
Criando o mapajQuery(function($) { var themap = $('<div id="themap"></div>').css({ 'width': '90%', 'height': '400px' }).insertBefore('ul.restaurants');
sexta-feira, 10 de setembro de 2010
![Page 38: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/38.jpg)
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 });
sexta-feira, 10 de setembro de 2010
![Page 39: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/39.jpg)
Mostrando o mapa
mapstraction.setCenterAndZoom( new LatLonPoint(50.8242, -0.14008), 15 // Zoom level);
sexta-feira, 10 de setembro de 2010
![Page 40: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/40.jpg)
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);});
sexta-feira, 10 de setembro de 2010
![Page 41: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/41.jpg)
labels.js com jQuery
...<label for=”search” class=”inputLabel”>Search:</label><input type =”text” id=”search” name=”q”>...
sexta-feira, 10 de setembro de 2010
![Page 42: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/42.jpg)
labels.js com jQueryjQuery(function($) { $('label.inputLabel').each(function() {
});});
sexta-feira, 10 de setembro de 2010
![Page 43: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/43.jpg)
labels.js com jQueryjQuery(function($) { $('label.inputLabel').each(function() { var label = $(this); var input = $('#' + label.attr('for')); var initial = label.hide().text().replace(':', '');
});});
sexta-feira, 10 de setembro de 2010
![Page 44: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/44.jpg)
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(''); } })
});});
sexta-feira, 10 de setembro de 2010
![Page 45: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/45.jpg)
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'); } }) });});
sexta-feira, 10 de setembro de 2010
![Page 46: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/46.jpg)
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); });});
sexta-feira, 10 de setembro de 2010
![Page 47: Techtalk1](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d5891abb61eba96c8b46b0/html5/thumbnails/47.jpg)
Perguntas?
Próximo techtalk teremos sinatra!
Elber [email protected]
sexta-feira, 10 de setembro de 2010