Práticas Cross Browser: Javascript: Sintaxe {}, ;, IF inline

36 Comente abaixo Luiz Castro Junior (@luizcastrojr)

Cross browser - desenvolvimento Web que aplica as normas W3C que formam o padrão de desenvolvimento. Neste artigo vamos comentar algumas técnicas de desenvolvimento com padrões web (W3C), sintaxe { }, ;, IF inline.

Este artigo não tem a intenção de ensinar Javascript, CSS ou (x)HTML, mas sim quero falar das melhores técnicas aplicadas ao desenvolvimento dentro dos padrões W3C nestas três linguagens, isso claro na continuidade desta série de artigos sobre práticas cross browser. Caso você não tenha os fundamentos básicos das linguagens acima faça algumas pesquisas no portal Oficina da Net na seção de Apostilas para entender um pouco mais sobre essas linguagens.

Vamos então mergulhar neste mundo dos padrões web. Vamos comentar sobre DOM e suas formas de uso que poderão auxiliar a maximizar o tempo de desenvolvimento ou a organização do código.

Estarei citando algumas técnicas (atalhos ou formas de simplificar) que são utilizadas por desenvolvedores web no dia-a-dia. Uma forma simples e eficaz para compreender mais profundamente o assunto é a cada termo ou linha de código que você não entender faça uma pesquisa, busque informação do porque e pra que, só depois continue a leitura, assim tenho certeza que seu aprendizado terá uma melhor performance.

Entenda que na maioria dos casos pode-se fazer com ou sem o auxilio dessas técnicas, porém de uma forma ou outra essas técnicas poderão lhe auxiliar no desenvolvimento e/ou também garantir que sirvam em todos os browsers.

Chaves { }


O uso de { } não é obrigatório a não ser em blocos de código que contenham function ou mais de uma instrução.

for( var i=5;i<20;i++ )
{
    document.write(“cross browser”);
}

Ou podemos escrever esse bloco de código assim:

for( var i=5;i<20;i++ )
    document.write(“cross browser”)

Essas duas formas de escrever o mesmo bloco de códigos são aceitas, só que existem detalhes que interligam de uma forma gerencial o uso dessas práticas, por exemplo, se você usar { } para todas as expressões (que necessitam) você não dependerá prestar tamanha atenção sempre que desenvolver em linguagens diversas o mesmo trabalho, pois a maior parte das linguagens de programação usam { }. Adote essa medida como forma de maximizar seu desempenho em desenvolvimento. Existe desenvolvedores que não gostam de utilizar por costume as { } quando não são exigidas, entendem que de certa forma (na maneira deles) isso pode diminuir o tamanho do código, e de certa forma estão certos, portanto o peso ou tamanho do código é tão irrelevante na maioria dos trabalhos que por facilidade em organizar o código é que outros fazem dessa prática um bom costume, as { } permite que fique facilmente encontrável a parte do código desejado.


Ponto-e-virgula ;


Na linguagem JavaScript o ; não é obrigatório, portanto quando estiver escrevendo um bloco de código que em uma mesma linha existam duas instruções é exigido a separação por ;.

var1 = 1
var2 = 2
result = var1 + var2

Ou,

var1 = 1;
var2 = 2;
result = var1 + var2;

Não existe diferença no resultado, poderíamos tanto usar como não usar o ;, só que novamente por questão de garantias eu prefiro o uso do ; para que não ocorra por um acaso o ato de esquecer em alguma parte do código o uso correto de ; que não permita o funcionamento correto do meu desenvolvimento, é muito mais demorado buscar um erro (dependendo do software de desenvolvimento) do que adicionar ; sempre que achar necessário, seguindo regras é lógico.

Lembrando que o uso obrigatório de ; se dá sempre como no exemplo abaixo onde uma instrução está na mesma linha do que a outra.

var1 = 1; var2 = 2;
result = var1 + var2;


IF inline


Quando precisamos identificar valores e adicionar a eles um alert usamos um bloco de códigos parecido com o bloco abaixo.

<script type="text/javascript">
x = 5;
if ( x<8 ) 
{
    alert(“x é menor que 8”);
}
else 
{
    alert(“x é maior que 8”);
}
</script>

Neste bloco de códigos temos a seguinte instrução: O valor de x quando for menor que 8 ele chamará a função alert que indicará que o valor de x é menor que 8, ou então chamará a função alert se o valor de x for maior que 8.

Usando a sintaxe IF inline poderíamos simplificar esse código da seguinte forma:

<script type="text/javascript">
x = 8;
x<8 ? alert(“x é menor que 8”) : alert(“x é maior que 8”);
</script>

O resultado é o mesmo, porém economizamos tempo no desenvolvimento, já que a expressão x>8 ? resulta com o chamado dos alert da mesma forma que no primeiro exemplo. Lembrando que essas formas de desenvolvimento devem seguir uma regra clara, ou seja, ou você escolhe uma ou outra prática, pois se juntar ambas dificilmente terá um bom aprendizado ou organização de seu trabalho de desenvolvimento Web por se tratar de algo mais dinâmico em que a qualquer momento seu cliente pode pedir uma mudança, nova função ou detalhes mais elaborados e precisaremos buscar o bloco de códigos especifico para fazer essa alteração e concluir o trabalho solicitado. Tanto a forma que você vai ler seu código ou escrever ficam mais simples e de rápido desenvolvimento quando aplicadas em padrões. Busque ler materiais sobre padrões W3C.

Para o próximo artigo vamos continuar com Expressões regulares e estrutura de dados.

Recomendamos para você
 

Compartilhe com seus amigos:
Mais de JavaScript
  • Localização de endereço através do CEP usando jQuery
    Localização de endereço através do CEP usando jQuery
  • Portfolio image slider com CSS e JQuery
    Portfolio image slider com CSS e JQuery
  • Efeito Toggle com CSS e JQuery
    Efeito Toggle com CSS e JQuery
  • Como criar um tooltip em jQuery e CSS
    Como criar um tooltip em jQuery e CSS
  • Criando abas de navegação com jQuery
    Criando abas de navegação com jQuery
Compartilhe com seus amigos:
últimos reviews
  • 8,4
    Review Samsung Galaxy K Zoom
    Nessas 2 últimas semanas passou por nossas mãos o potente Galaxy K Zoom, veja o que achamos dele.
  • 8,6
    Review Moto X - Segunda geração
    O aparelho da Motorola é a prova “viva” que o que está ótimo pode melhorar ainda mais.
  • 8,1
    Review Zenfone 5
    Tela de 5 polegadas, câmera de foto e vídeo superiores aos concorrentes, boa usabilidade e preço baixo. A Asus acertou n...

TOPO