TiloWR » JavaScript

Pinch zoom com javascript (ongesturechange e style.zoom)

Tilo — Fri, 04 Feb 2011 10:22:10 +0000

O Zoom com pinça é um recurso nativo do iphone porem você precisa capturar esse evento no javascript para poder manipular objetos específicos dentro do safari, hoje vou ensinar como capturar esse evento e como fazer o “scale” de um objeto com javascript.

Vamos utilizar o mesmo HTML e CSS do post anterior, o de “Movendo objetos com ontouchstart e ontouchmove para iPad/iPhone”, vou colocar o HTML e o CSS aqui para facilitar a sua compreensão.

HTML:





Touch Events

CSS:

#item {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
}

e vamos ao javascipt, primeiro declaramos o objeto:

var obj = document.getElementById('item');

e depois atribuímos o evento a ele:

obj.ongesturechange = function(){ escala(event); };

crie a função escala:

function escala(e){
}

O evento ongesturechange possui um atributo scale, esses valores são representados da seguinte forma, 1 é o tamanho natural do objeto 0.1 é 10% do tamanho, dessa forma sabemos que 2 é o dobro do tamanho e asism sucessivamente.

Vamos utilizar o valor do scale, e atribui-lo ao Zoom.

function escala(e){
obj.style.zoom = e.scale;
}

E para finalizar colocamos e.preventDefault(); return false; para evitar a área de seleção indesejada

function escala(e){
obj.style.zoom = e.scale;

e.preventDefault();
return false;
}

no final seu javascript estará assim:

var obj = document.getElementById('item');
obj.ongesturechange = function(){ escala(event); };

function escala(e){
obj.style.zoom = e.scale;

e.preventDefault();
return false;
}

pronto, simples né, bem se esse post te ajudou não esquece de deixar um comentário.

Movendo objetos com ontouchstart e ontouchmove para iPad/iPhone

Tilo — Tue, 01 Feb 2011 16:23:29 +0000

Nesse Post a ideia é explicar como você pode mover itens utilizando os eventos ontouchstart e ontouchmove para iphone e ipad.

No HTML crie uma div.





Touch Events

No CSS coloque uma aparência para identificar onde ela está na tela, eu apenas coloquei uma borda preta.

#item {
width: 100px;
height: 100px;
position: absolute;
margin-left: -50px;
margin-top: -50px;
border: 1px solid black;
}

E no Javascript é que acontece a brincadeira, primeiro identifique o item que será movido pela tela:

var obj = document.getElementById('item');

atribua a ele os eventos:

obj.ontouchmove = function(){ moveObj(event); };
obj.ontouchstart = function(){ moveObj(event); };

Crie a função que vai disparar o evento:

function moveObj(e) {
}

Identifique o toque que vai registrar o evento:

function moveObj(e) {
target = e.touches.item(0);
}

Nesse caso 0 é o primeiro dedo, se no parâmetro for passado 1 por exemplo, será o segundo dedo a tocar o objeto que será armazenado como o target.

Atribua valores ao Left e Top da div com os valores do eixo Client

function moveObj(e) {
target = e.touches.item(0);
obj.style.left = target.clientX + "px";
obj.style.top = target.clientY + "px";
}

não se esqueça de concatenar o “px”

O seu objeto já deve estar andando pela tela, porem, como existe um tempo de contato com a tela o objeto ficará sendo selecionado, para desabilitar isso adicione e.preventDefault(); return false;

function moveObj(e) {
target = e.touches.item(0);
obj.style.left = target.clientX + "px";
obj.style.top = target.clientY + "px";
e.preventDefault();
return false;
}

É importante lembrar que esse Javascript está manipulando objetos da tela, sendo assim ele tem que ser executado apenas depois que tudo for renderizado, você pode adicionar ele ao “Ready” se você usa jQuery, ou apenas colocar no fim da pagina como eu fiz no exemplo.

No final o seu Javascript deve estar com essa aparência:

var obj = document.getElementById('item');

obj.style.left = target.clientX + "px";
obj.style.top = target.clientY + "px";

function moveObj(e) {
target = e.touches.item(0);
obj.style.left = target.clientX + "px";
obj.style.top = target.clientY + "px";
e.preventDefault();
return false;
}

não testei no android, testa ai e me diz nos comments se funfou, abraços!

Verificar Status do navegador com HTML5 (window.navigator.onLine)

Tilo — Tue, 01 Feb 2011 10:50:32 +0000

O Código é muito simples e pode ser usado em varias aplicações.

Se o navegador está offline registra em cookies ou no banco de dados do próprio navegador informações para quando ele ficar online, essas informações possam ser enviadas a uma base externa.

É fundamental para o Desenvolvedor HTML (Programador HTML / HTMLerr / Designer de Interface / Como chamam onde você trabalha?) que quer trabalhar com HTML5 saber Javascript

Os navegadores com suporte à HTML5 possuem um atributo que é navigator.onLine, esse atributo retorna True ou False, no exemplo vou utilizar um SPAN com o id status e escreverei dentro dele o status do navegador,

o HTML fica assim:

e o Javascript assim:

function verificaStatus() {
if(window.navigator.onLine){
status = "online";
} else {
status = "offline";
}
statusBox = document.getElementById('status');
statusBox.className = status;
statusBox.innerHTML = status;
}

lembre-se de disparar a função verificaStatus de acordo com a sua necessidade, se for no load dá página basta colocar a função no body.onload, case seja no decorrer do uso da página, coloque um setInterval() para verificação em loop.

Usando Seletores Avançados no IE6 – JavaScript + CSS

Tilo — Tue, 30 Mar 2010 16:06:35 +0000

Hoje foi a prova final desse javascript, já estamos usando ele há algum tempo aqui na agência e ele vem tendo um ótimo desempenho, chegou a um ponto que meu IE6 lê seletores que o IE8 não lê, você poderá usar coisas como:

Seletores Avançados
Selector type	Pattern	Description
Seletor para sub string de atributo	E[att^="val"]	Casa com qualquer elemento E cujo valor do atributo att começa com “val”.
Seletor para sub string de atributo	E[att$="val"]	Casa com qualquer elemento E cujo valor do atributo att termina com “val”.
Seletor para sub string de atributo	E[att*="val"]	Casa com qualquer elemento E cujo valor do atributo att contenha a sub string “val”.
Pseudo classe estrutural	E:root	Casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML.
Pseudo classe estrutural	E:nth-child(n)	Casa com qualquer elemento E que seja o n-th (enésimo) filho do elemento pai.
Pseudo classe estrutural	E:nth-last-child(n)	Casa com qualquer elemento E que que seja o n-th (enésimo) filho do elemento pai, a contar do último filho.
Pseudo classe estrutural	E:nth-of-type(n)	Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo.
Pseudo classe estrutural	E:nth-last-of-type(n)	Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo, a contar do último filho
Pseudo classe estrutural	E:last-child	Casa com qualquer elemento E que seja o último filho do elemento pai.
Pseudo classe estrutural	E:first-of-type	Casa com qualquer elemento E que seja o primeiro elemento irmão do seu tipo.
Pseudo classe estrutural	E:last-of-type	Casa com qualquer elemento E que seja o último elemento irmão do seu tipo.
Pseudo classe estrutural	E:only-child	Casa com qualquer elemento E que seja o único filho do elemento pai.
Pseudo classe estrutural	E:only-of-type	Casa com qualquer elemento E que seja o único elemento irmão do seu tipo.
Pseudo classe estrutural	E:empty	Casa com qualquer elemento E que não tenha filhos (incluindo os nós de texto).
Pseudo classe :target	E:target	Casa com um elemento E que seja o destino da URL.
Pseudo classe estado de elemento de UI	E:enabled	Casa com qualquer elemento E de interface de usuário (um controle de formulário) e que esteja habilitado (enabled).
Pseudo classe estado de elemento de UI	E:disabled	Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja desabilitado (disabled).
Pseudo classe estado de elemento de UI	E:checked	Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja marcado (checked).
Pseudo-elemento fragmentos de elemento de UI	E::selection	Casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário.
Pseudo classe negação	E:not(s)	Casa com qualquer elemento E que não case com o seletor simples s.
Elemento de combinação irmão em geral	E ~ F	Casa com qualquer elemento F que seja precedido pelo elemento E.

Baixe o arquivo aqui!

para que funcione corretamente, limite no html que apenas os IE’s abaixo do 8 leiam esse arquivo com o seguinte código:

HTML 5 em qualquer navegador com JavaScript

Tilo — Tue, 30 Mar 2010 15:48:03 +0000

Não podemos deixar passar cada oportunidade de usar o HTML 5, por isso aqui vai uma dica de fazer as tags de HTML 5 funcionarem nos Internet Explorers por exemplo, já usei em alguns projetos e funcionou perfeitamente.

Baixe aqui o HTML5.JS

Seguem dois exemplos de estrutura com HTML 5

Expressões aritméticas com JavaScript

Tilo — Thu, 28 Jan 2010 19:16:44 +0000

Saber expressões aritméticas é fundamento para desenvolvimento de animações em javascript, desde movimentações de ponto a ponto à coisas complexas com seqüências aleatórias.

Operadores matemáticos:

“+” O operador de adição. Vale lembrar que o + também é usado para concatenar strings.

“-” O operador de subtração.

“*” O operador de multiplicação. (O nome do caracter é asterisco, não asteristico!)

“/” O operador de divisão.

“%” O operador de módulo. Com o módulo podemos obter o resto de uma divisão.

“++” Pré ou pós-incremento. Utilizado para incrementar uma variável em uma unidade.
“–“ Pré ou pós-decremento. Utilizado para decrementar uma variável em uma unidade.

Declarando números

Declarar números é realmente muito simples:
Declarando números inteiros

var numero = 10;
numero = 007; // apenas 7 pra todos os efeitos
numero = -5; // sim, temos números negativos!

O único detalhe que posso ressaltar aqui é sobre a declaração de números decimais. No nosso padrão de numeração, o separador decimal é a vírgula “,”, porém o Javascript adota o sistema inglês, que usa o ponto “.” como separador decimal.

Declarando números decimais

var numero = 7.339;
numero = 0.56;
numero = .56 // o mesmo efeito da declaração acima

Talvez você ache um insulto a sua inteligência mas, vou deixar aqui claro que você não deve usar separadores de milhar nos números, ou seja, 1256 é apenas 1256, não 1.256, nem 1,256. =) #FIKADIKA

Se você colocar uma vírgula no número, o interpretador Javascript apenas vai ignorar tudo o que estiver após ela, além dela própria.

Adição

A famosa “continha de mais”. Não há muitos segredos em usar a adição, assim como na vida real. Veja um exemplo:

var numero1 = 10;
var numero2 = 15;
alert( numero1 + numero2 );

O único cuidado que você deve ter é que, o sinal de adição “+” também é usado para concatenar strings, lembra-se? A ordem com que as operações são processadas é da esquerda para a direita (supondo apenas adições neste exemplo). Se o interpretador Javascript encontrar uma string, ele começará a concatenar tudo o que encontrar, ao invés de somar. Acompanhe alguns exemplos:

var numero1 = 13;
var numero2 = 6;
alert( numero1 + numero2 + " é um número legal!" );

Para entender o que aconteceu acima, vamos ler a expressão como o interpretador Javascript a entendeu. Partindo da esquerda, ele encontrou um número na variável numero1 e outro número na variável numero2. Como eram dois números e o sinal de mais entre eles, uma adição foi feita resultando num número: 19. Na sequência, ele encontrou uma string ” é um número legal!” que deveria se juntar ao número anteriormente obtido (19). Como a operação seria entre um número e uma string, o interpretador fez uma concatenação, ao invés de uma soma.

Não entendeu toda a teoria acima? Um exemplo pode ajudá-lo:

var numero1 = 13;
var numero2 = 71;
alert( "Um número legal: " + numero1 + numero2 );

Notou que a soma dos números não ocorreu? Isso aconteceu pois as operações, neste caso, partiram da esquerda conforme: uma string com um número, houve uma concatenação e a saída foi uma string. A string de saída da operação anterior com o outro número, mais uma vez uma string com um número, outra concatenação.

Isto significa que sempre que o interpretador encontrar uma string e um número e, tiver de decidir entre somar ou concatenar, ele sempre fará a concatenação, mesmo que a string esteja na forma de um número, exemplo: “15″.

É possível explicitar ao interpretador para fazer a soma dos números antes de tentar as outras operações. Assim como na matemática, basta usarmos os parênteses em volta da expressão. Os parênteses instruirão o interpretador a fazer aquela operação antes das demais. Isso se chama precedência.

Agora que muito já foi dito sobre a adição, explicar e entender as outras três operações básicas, será fácil! =)

Subtração

“Continha de menos” para os mais íntimos. Bastante simples e direto:
Exemplos de subtração

var numero1 = 15;
var numero2 = 10;
alert( numero1 - numero2 ); // 5
alert( 10 - 15 ); // -5, o resultado pode ser negativo
alert( 3.53 - 2 ); // 1.5299999999999998 (discussão abaixo)

A terceira opção deu um resultado no mínimo curioso, certo? Naturalmente aquela subtração teria como resultado 1.53 mas, como você pode ver, isso não acontece. A solução para isso é arredondar o número para um número de casas decimais aceitável ou desejado.

O sinal de subtração é usado também para criar números negativos. Sendo assim, podemos ter uma operação do tipo:
O sinal de subtração para números negativos

alert( 10 - -5 ); // 15

Como eu tenho certeza que você se lembra, quando fazemos a subtração de um número negativo, na verdade faremos uma soma. Isso é o que ocorre no exemplo acima. Lembra-se? “Menos com menos dá mais!” =)

Multiplicação

Quando aprendemos a multiplicação na escola, usamos para ela um destes dois operadores: o ponto “.” e o xis “x”. Em programação, não usamos nem um, nem outro. O operador de multiplicação aqui é o asterisco “*” (e como já dito antes, não asteristico!).

A multiplicação é muito simples e, alguns exemplos o ajudarão a relembrar tudo o que você precisa saber:
Exemplos de multiplicação

var numero1 = 7;
var numero2 = 3;
alert( numero1 * numero2 ); // 21
alert( numero2 * numero1 ); // sim! "A ordem dos fatores não altera o produto." =)
alert( 7 * -3 ); // -21, o resultado pode ser negativo
alert( -7 * -3 ); // 21, "menos com menos dá mais!"

Divisão

Para aqueles que não apreciam muito a matemática, a divisão é certamente a operação mais odiada! Talvez por ser, dentre as 4 operações básicas, a mais complicada de se calcular mental ou manualmente. Mas veja agora com outros olhos! Você está trabalhando com um computador, é ele quem fará os cálculos para você! =)

Se você tem uma vaga lembrança da sua professora primária lhe ensinando a divisão, deve lembrar-se que existem divisões com resto. Aqui, o operador de divisão faz os cálculos para obter o quociente mais exato possível, sempre com resto zero. É exatamente igual o que uma calculadora faz. Nós podemos obter o resto de uma divisão também, mas isso é feito com o próximo operador que veremos, o módulo. Por ora, vejamos alguns exemplos de divisão:
Exemplos de divisão

var numero1 = 20;
var numero2 = 5;
alert( numero1 / numero2 ); // 4
alert( numero2 / numero1 ); // 0.25, a ordem na divisão é importante
alert( -20 / 5 ); // -4
alert( -20 / -5 ); // 4
alert( 22 / 4 ); // 5.5

Da lista de exemplos acima, note o último exemplo: 22 dividido por 4. Como você deve saber mentalmente, 22 não é múltiplo de 4, logo esta divisão não será exata. E foi justamente isso o que aconteceu.

Se pegarmos o múltiplo de 4 mais próximo de 22, que seja menor que o próprio 22, obteremos o 20. 22 menos 20 dá 2, que seria o resto de nossa divisão. Porém, os cálculos não param por aí. O interpretador fará também a divisão do resto 2 por 4, que mentalmente podemos chegar em: meio. Por isso o resultado da divisão é 5.5.

Módulo

O módulo não é um operador que conhecemos na escola, muito embora já saibamos como calculá-lo. O módulo é usado para obter o resto de uma divisão:
Exemplos com o operador de módulo

var numero1 = 20;
var numero2 = 6;
alert( numero1 % numero2 ); // 2
alert( 17 % 2 ); // 1
alert( 16 % 4 ); // 0

O módulo poderá ser qualquer número menor que o divisor, inclusive zero.

As utilidades do módulo são muitas, dividir uma listagem de itens em duas, três, quatro, n colunas… Verificar se cada linha de uma tabela é par ou ímpar e colocar cores diferentes a cada uma delas (conhecido como “zebrar uma tabela”) e assim vai…

Precedência

Dicionário. Vamos ver o quanto você se lembra de uma das regrinhas básicas do ensino fundamental. Olhando para o código abaixo, qual seria o valor armazenado na variável resultado?
Precedência?

var resultado = 7 + 3 * 2;

20? 13? 9999? =) A resposta certa é 13. Caso você saiba o motivo, ótimo! Caso não consiga se lembrar, recomendo continuar a leitura deste tópico.

Na matemática, a multiplicação e a divisão têm precedência sobre a adição e a subtração, ou seja, têm prioridade, devem ser feitas primeiro! Por isso o resultado é 13! Primeiro fazemos a multiplicação 3 vezes 2, que dá 6 para daí somar com 7, resultando no 13.

Caso você esteja se perguntando sobre o módulo, o módulo é uma divisão, logo tem a mesma precedência da divisão.

E quando os operadores têm a mesma precedência, quem eu devo fazer antes? Neste caso, faça as operações normalmente, da esquerda para a direita. Exemplos? Claro!

var resultado = 6 / 3 * 2;
alert( resultado );

E se alterarmos um pouco a ordem? Colocando a multiplicação antes da divisão:

var resultado = 2 * 3 / 6;
alert( resultado );

Definindo a precedência

Lembra-se do nosso exemplo com adição e multiplicação, onde eu disse que a multiplicação sempre é feita antes da adição? Haverá casos em que você realmente deseja que a soma seja feita antes. Para esses casos, os parênteses irão ajudar você a definir a precedência como desejar. Acompanhe:

var resultado = 7 + 3 * 2;
alert( resultado ); // 13
// com os parênteses, forçando a precedência da adição:
var resultado = ( 7 + 3 ) * 2;
alert( resultado ); // 20

O primeiro exemplo eu já havia mostrado. Note no segundo exemplo que adicionamos os parênteses em torno da adição, isto indica que ela deve ser feita primeiro!

Na matemática primária, aprendemos a usar parênteses “()”, colchetes “[]” e chaves “{}” para expressar vários níveis de precedência. Em programação, usamos apenas parênteses. Desta forma, você pode definir todas as precedências que precisar, sempre com parênteses.
Pré-incremento/decremento e pós-incremento/decremento

Muitas vezes precisamos fazer um contador qualquer, onde vamos aumentando ou diminuindo um valor qualquer até outro valor qualquer, explícito ou não. Nesses casos, onde incrementamos ou decrementamos o valor de uma variável, é que podemos usar os operadores de pré ou pós incremento/decremento.

Entender esses operadores é fácil, quando incrementamos o valor de uma variável, o incremento é de uma unidade. Quando decrementamos, também é uma unidade. A diferença é apenas entre pré ou pós. Veja a sequência de exemplos para entender melhor:

var x = 3;
x++;
alert( x ); // 4

x = 3;
++x;
alert( x ); // 4

No exemplo acima, as operações de incremento apareceram destacadas. Na primeira metade do exemplo, eu usei o pré-incremento. Vamos entender o que houve ali:

Na primeira linha eu declarei que a variável x vale 3. Na sequência eu fiz um pós-incremento nela. Por fim, exibe seu valor: 4. Vamos entender agora a segunda parte:

Logo após a primeira metade, eu redeclarei a variável x com o valor 3. Fiz um pré-incremento e exibi o valor da variável na sequência: 4, também.

Nenhuma diferença? Neste caso não. Mas veja um exemplo aonde atribuiremos o valor (pré ou pós-incrementado) a uma nova variável.

var x = 3;
var y = x++; // atribuindo com pós-incremento
alert( y ); // 3

x = 3;
y = ++x; // atribuindo com pré-incremento
alert( y ); // 4

Agora sim temos a diferença! Na primeira metade, quando fazemos a atribuição com pós-incremento, o interpretador primeiro faz a atribuição e após isso faz o incremento (agora o pós-incremento faz sentido? =). Na segunda metade, primeiro se faz o incremento e depois a atribuição, o que justifica o nome pré-incremento!

Por fim, vale lembrar que apesar de eu ter usado apenas os operadores de incremento nos exemplos, tudo o que foi dito também vale para os operadores de decremento. Veja o último exemplo, reescrito usando os operadores de decremento:

var x = 3;
var y = x--; // atribuindo com pós-decremento
alert( y ); // 3

x = 3;
y = --x; // atribuindo com pré-decremento
alert( y ); // 2

Esse Texto é Originalmente de um site que não consegui acessar, mas de qualquer forma fica aqui a Referencia: www.aprendajs.klaus.pro.br/operacoes-matematicas.html

Adicione funções ao onLoad

Tilo — Thu, 07 Jan 2010 16:00:25 +0000

Quando montamos várias funções que usam o onLoad do BODY para serem executadas, ocasionalmente acontece de uma função sobrescrever a outra, interrompendo a execução, ou executando de forma incompleta.

Depois de muito “bater cabeça” pegamos ajuda com Adilson, um amigo aqui da agência, e em menos de cinco minutos ele resolveu nosso problema com esse script:

Nas páginas onde você quiser adicionar eventos ao onLoad adicione um script da seguinte forma:

Caso sua função não tenha parâmetro você pode até usar um atalho:

Entendendo o Código:

Verifica se a array com as funções que serão executadas no onLoad já está criada

if (!window.loadFunctions){

Criar uma array com as funções que serão executadas no onload

window.loadFunctions = [];

Caso já exista uma função onload definida, adiciona-a no array

if (window.onload) window.loadFunctions.push(window.onload);

Retornando largura com clientWidth (Javascript).

Tilo — Wed, 06 Jan 2010 13:42:53 +0000

Um tempo atrás montei um carrossel que trazia um desafio bem legal, precisava de um tamanho fixo para funcionar, porém, eu não sabia quantos itens teriam dentro de cada carrossel.

No começo foi meio complicado, mas cheguei a uma solução bem simples com javascript usando a propriedade clientWidth.

No exemplo tínhamos um numero x de LI e a UL deveria ter um tamanho fixo para o carrossel funcionar, o tamanho de LI é fixo, a idéia é:

Retornar o numero de LI dentro da UL, multiplicar a quantidade de LI pelo tamanho de UL, simples não é?

function AtivaCarrossel(id)
{
	var cr = document.getElementById(id);
	window['carrossel_'+id] = cr;
	cr.lis = cr.getElementsByTagName("li");
	cr.tamanhoUl = cr.lis[0].clientWidth * cr.lis.length;
	cr.ul.style.width = cr.tamanhoUl + "px";
}

Entendendo:

Pego o carrossel que vamos usar:

var cr = document.getElementById(id);

Crio uma variável pra ele:

window['carrossel_'+id] = cr;

Monto um Array com as LI dentro dele:

cr.lis = cr.getElementsByTagName("li");

Uso a largura da primeira LI e multiplico pela quantidade de itens dentro do array:

cr.tamanhoUl = cr.lis[0].clientWidth * cr.lis.length;

E finalmente aplicamos com um estilo em linha a largura no carrossel:

cr.ul.style.width = cr.tamanhoUl + "px";

IMPORTANTE: a propriedade clientWidth não retorna margem ou borda, apenas a largura “liquida”!

Input Text Placeholder

Tilo — Mon, 04 Jan 2010 13:01:22 +0000

Bem, o HTML 5 é uma realidade e está ai batendo em nossas portas, dessa forma é bom começar a conhecer o que tem de bom na web sobre o assunto, recomendo dar uma lida no Pinceladas da Web.

A idéia é evitar o uso de javascript desnecessário, por exemplo, quem nunca teve que montar um script apenas para fazer o texto do input sumir quando ele for selecionado? No blog Casos de Casa da SulAmérica tem um exemplo funcionando, confira o código:

No exemplo acima a troca é feita por uma imagem com a Palavra Busca nela, o mesmo efeito pode ser feito de várias formas.

Para obter o mesmo efeito com HTML 5 é muito mais simples, acompanhe:

O próprio HTML 5 já tem um atributo placeholder, porém ele só funciona em webkit, atualmente disponível no Safari e Chrome.

Operador Ternário (JavaScript)

Tilo — Sun, 03 Jan 2010 20:53:21 +0000

Seis meses atrás fiz um post sobre como fazer troca de classes com JavaScript, mas algumas pessoas não entenderam como funciona o Ternário, por isso resolvi escrever este post.

Considero o ternário extremamente útil quando vamos montar um “if… else” para apenas 2 casos, ao invés de construir uma estrutura de algumas linhas você pode resolver com apenas uma linha de javaScript, vamos ver um exemplo:

Usando IF…Else

Usando Ternário

Podemos ler da seguinte forma: x é igual a 20? Se for, y recebe 50, se não, recebe 70.

Este operador tambem é muito útil para efeitos de menu, imagine o seguinte efeito, uma div tem classe “off”, no clique ela recebe classe “on”, no proximo clique precisa voltar para “off” caso esteja ativada, isso ficaria mais ou menos assim:

Item

TiloWR » JavaScript

Pinch zoom com javascript (ongesturechange e style.zoom)

Leia Também:

Movendo objetos com ontouchstart e ontouchmove para iPad/iPhone

Leia Também:

Verificar Status do navegador com HTML5 (window.navigator.onLine)

Leia Também:

Usando Seletores Avançados no IE6 – JavaScript + CSS

Leia Também:

HTML 5 em qualquer navegador com JavaScript

Leia Também:

Expressões aritméticas com JavaScript

Leia Também:

Adicione funções ao onLoad

Leia Também:

Retornando largura com clientWidth (Javascript).

Leia Também:

Input Text Placeholder

Leia Também:

Operador Ternário (JavaScript)

Leia Também: