Desculpa para aprender? [POST RÁPIDO]

Uma lista bem legal…

For C Tutorials.
http://www.codevdo.com/Languages/C
For C++ Tutorials.
http://www.codevdo.com/Languages/CPP
For C#.NET Tutorials.
http://www.codevdo.com/Languages/CSharp_Dotnet
For VB.NET Tutorials.
http://www.codevdo.com/Languages/VB_Dotnet
For Java Tutorials.
http://www.codevdo.com/Languages/Java
For Perl Tutorials.
http://www.codevdo.com/Languages/Perl
For MS Access Tutorials.
http://www.codevdo.com/Database/Ms_Access
For SQL Server Tutorials.
http://www.codevdo.com/Database/SQL_Server
For MySQL Tutorials.
http://www.codevdo.com/Database/MySQL
For Oracle Tutorials.
http://www.codevdo.com/Database/Oracle
For iPhone Apps Tutorials.
http://www.codevdo.com/Mobile/iPhone_Apps
For Android Apps Tutorials.
http://www.codevdo.com/Mobile/Android_Apps
For HTML/DHTML Tutorials.
http://www.codevdo.com/Web/HTML_DHTML
For jQuery Tutorials.
http://www.codevdo.com/Web/jQuery
For PHP Tutorials.
http://www.codevdo.com/Web/PHP

Anúncios

Boas práticas ao desenvolver em javascript

Hoje em dia javascript esta na moda, certo?

ERRADO!

O que esta na moda é o uso dos frameworks da vida.

Com isso, tenho notado que até mesmo alguns ‘plugins’ ou  até mesmo frameworks estão esquecendo de algo básico…

BOAS PRÁTICAS!

Essa foi minha motivação para fazer esse artigo, que foi  apresentado para a equipe de desenvolvimento de minha antiga empresa.

Então, vamos lá…

A primeira pergunta que faço em minha apresentação é

Onde começam as boas práticas?

Onde começam as boas práticas?

E sua resposta é óbvia…

Em você!

em você!

Nesse momento, muitas pessoas se fazem as seguintes perguntas:

  1. Como assim?
  2. Comigo? Blz, mas como gênio?

E a resposta para as perguntas supracitas é mais simples ainda…

Pensando antes de começar a fazer!!

Pensando antes de fazer!!!!

É algo simples e óbvio, mas acredite, com advento da tecnologia “CTRL+C , CTRL+V” e a febre dos plugins!
Muitos esquecem de ver se quele código ou plugin está fazendo o que você quer da forma correta, pois um axiôma que costumo usar é que “esta funcionando, não significa que esta certo.

Quando os plugins ou códigos não fazem o que precisamos, caimos no cenário de ter que codificar algo do zero, e acabamos caindo no uso abusivo dos frameworks…

Outro axiôma muito relevante que meu amigo Thiago Anselme sempre diz é “não existe bala de prata” ou seja, não existe uma solução,plugin,framework que resolverá todos os problemas de sua vida! 🙂

Criar algo do zero ou não. Usando boas práticas de programação e se possivel sem ficar dependente de framework…

  1. Para muitos… Isso da medo.
  2. Para muitos… Parece ser mais difícil… (até concordo…)
  3. Para muitos… Isso é impossível!

    ……………………………..
  4. Para poucos, blz tamo ae!  😉

Com isso vamos iniciar uma sequencia de códigos com o título “seria bom evitar”

Seria bom evitar!

Evitar o uso de eval ou Function

Function e a função a eval são operações pesadas que usados em excesso pode complicar a vida do interpretador.
Suas chamadas sãp convertidas em código fonte para código executável.

Lento:
function addPropriedade(objeto,propriedade,codigo){

objeto[propriedade] = new Function(codigo);

};
addPropriedade({},”nome”,”this.Variavel=2012″);

Rápido:
function addPropriedade(objeto,propriedade,funcao){

objeto[propriedade] = funcao;

};
addPropriedade({},”nome”,function(){ this.Variavel = 2012; });

Evitar passar,uma função na forma de strings, para setTimeout () e setInterval ()

Se você passar uma string em setTimeout() ou setInterval() a string será avaliada da mesma forma que o eval() que é lento.
Envolva seu código em uma função anônima. Assim o interpretado poderá  executar sua instrução de forma mais rápida durante a “compilação”.

Lento:

window.setInterval(“minhaFuncao()”,100);
window.setTimeout(“minhaFuncao()”,100);

Rápido:

window.setInterval(minhaFuncao,100);
window.setTimeout(minhaFuncao,100);

Sempre que puder, faça cache de valores variáveis

Lento:
O comprimento do arr array é recalculado a cada vez que o loop repete.

for(var i = 0; i < arr.length; i++){

//fazer algo…

}

Rápido:
Melhor maneira é para armazenar em cache o comprimento do array:

for(var i = 0,_length = arr.length; i < _length; i++){

//fazer algo…

}

Sempre que puder, faça cache de objetos DOM

Lento:

documento.getElementById(“elemento”).style.backgroundColor = “red”;
documento.getElementById(“elemento”).innerHTML = “….”;

Rápido:

var elemento = documento.getElementById(“elemento”);
elemento.style.backgroundColor = “red”;
elemento.innerHTML = “..”;

Evite pegar um formulário por getElementById

Em meus 6 anos de desenvolvimento de sistemas web, foi o que mais vi acontecer, algo muito recorrente.

As formas de de pegar o valor de um campo:

var form = document.forms[0];

#1
form[“buscar”].value

#2
form.buscar.value

#3
form.elements[“buscar”].value

Tantas formas e ainda vejo pessoas pegando o valor de um campo assim
$(“#buscar”).val() ou document.getElementById(“buscar”).value;

Remova referências que não serão mais usadas

..Lixo no lixo, blz? O browser agradece!

Não muito legal:
//inicio…
var elemento = document.getElementById(“elemento”);
//…
elemento.innerHTML = “valor… valor… “;
elemento.style.backgroundColor=”green”;
//…
//…
//…
//Fim…

Mais legal:
//inicio…
var elemento = document.getElementById(“elemento”);
var valor = “valor… valor…     “;
//…
elemento.innerHTML = valor;
elemento.style.backgroundColor=”green”;
//…
//…
//…
elemento = null;
delete valor;
//Fim…

Bom, fico por aqui..;

Existem vários outros exemplos de boas práticas, mas coloquei nesse artigo os que considero os mais gritantes…

Criando um jogo da forca em 80 linhas com javascript puro [ nada de framework! ;-) ]

Esse artigo é básicamente para mostrar como é fácil desenvolver coisas legais em javascript, em apenas algumas linhas de código, sem depender de frameworks, basta colocar a caixóla para funcionar.

Então vamos ao código, simples e fácil! 😉

Diagrama de nossa ‘classe’:

function Forca(params){

var root = this,elemento = params.Elemento || document.body;
this.Palavras = params.Palavras || []; // vetor de palavras
this.Palavra = “”;  // palavra corrente
this.Erros = 0; // número de errros
this.Boneco = “”; // desenho do boneco

this.Teclado = function(){ // metodo responsável por montar o teclado.
var teclado = document.getElementById(“forca_teclado”);
if(!teclado){
teclado = document.createElement(“div”);
teclado.setAttribute(“id”,”forca_teclado”);
teclado.setAttribute(“class”,”teclado”);
for(var i = 65; i < 91; i++){
var tecla = document.createElement(“div”);
tecla.setAttribute(“class”,”tecla”);
tecla.innerHTML = String.fromCharCode(i);
tecla.setAttribute(“title”,String.fromCharCode(i));
if(tecla.addEventListener )
tecla.addEventListener(‘click’,function(){ root.Validar(this); },false);
else
tecla.attachEvent(‘onclick’,function(e){ root.Validar(event.srcElement);  });
teclado.appendChild(tecla);
}
elemento.appendChild(teclado);
}
}
this.Sorteio = function(){ //Método responsável pelo sorteio de uma nova palavra.
var novoIndice = Math.ceil(Math.random()*params.Palavras.length-1)
root.Palavra = params.Palavras[novoIndice];
var painel = document.getElementById(“forca_painel”);
if(!painel){
painel = document.createElement(“div”);
painel.setAttribute(“id”,”forca_painel”);
painel.setAttribute(“class”,”painel”);
elemento.appendChild(painel)
}
painel.innerHTML = “”;
for(var i = 0; i < root.Palavra.length;i++){
var letra = document.createElement(“div”);
letra.setAttribute(“id”,root.Palavra.substr(i,1));
letra.setAttribute(“class”,”letra”);
letra.innerHTML = “”;//root.Palavra.substr(i,1);
painel.appendChild(letra);
}
}
this.Validar = function(letra){   // Método responsável por validar e desenhar o boneco.
var desenho = document.getElementById(“forca_desenho”);
if(!desenho){
desenho = document.createElement(“div”);
desenho.setAttribute(“id”,”forca_desenho”);
elemento.appendChild(desenho);
}
var boneco;
if(root.Palavra.indexOf(letra.title) == -1){
this.Erros++;
switch(this.Erros){
case 1: root.Boneco += “\n   o”; break;
case 2: root.Boneco += “\n  \/”; break;
case 3: root.Boneco += “|”; break;
case 4: root.Boneco += “\\”; break;
case 5: root.Boneco += “\n  /”; break;
case 6: root.Boneco += ” \\\n <button onclick=’window.location.reload(true);’ style=’padding:0px;width:85px;border:1px solid black;’>GAME OVER</button>”; break;
}
desenho.innerHTML = ” <pre> “+root.Boneco+” </pre> “;
}
else
{
var indices = [];
for(var i = 0; i < root.Palavra.length;i++)
if(root.Palavra.substr(i,1) == letra.title) indices.push(i);
painel = document.getElementById(“forca_painel”).getElementsByTagName(“div”);
for(var i = 0; i < indices.length; i++)
painel[indices[i]].innerHTML =  letra.title;
}
}
this.Comecar = function(){ // Método responsável por iniciar tudo, criado só para deixar a chamada mais organizada!  😉
root.Teclado();
root.Sorteio();
}
}

A chamada do jogo ficará assim:

var parametros = { Elemento:/*algum elemento (div,e etc…)*/, Palavras:[/* um vetor de palavras, exemplo: “BRASIL”,”PADRE” */] }

var forca = new Forca(parametros);
forca.Comecar();

literalmente simples assim…

Para ver o jogo funcionando, acesse : http://migre.me/5ld1V

GCTS – Gambi Certified Technology Specialist

Com o crescimento de novos tipos de gambiarras em meados de 2008 a Microsoft realizou também alterações em seu modelo de certificação. Visando esse público foi criado o GCTS – Gambi Certified Technology Specialist.
A certificação GCTS – é o nível mais básico de certificação entre as novas certificações.
Com esta certificação o profissional comprova seu conhecimento específico em desenvolvimento de POG ( programação orientado a gambiarra) e POT (programação orientada a trambique).
Abaixo temos um exemplo do certificado GCTS:


*Para os que não sabem o que é POT ou  POG,  aguarde…

Animação com javascript puro em 45 linhas

Alguns dias atrás tirei 15 minutos de meu trabalho para fazer algo com um efeito de uma bola quicando em uma area definida no browser usando javascript ( não irei contar a verdadeira história que me levou a fazer isso, pois é algo longo…. 😛 ),  e como vi que ficou legal, achei bacana mostrar isso para vocês.

Espero que esse exemplo ajude alguém a ter novas ideias!  😉

Antes de colar o fonte + o link demo, quero dizer que somente testei esse efeito no Firefox e Chrome se alguém puder me da um feedback, ficarei feliz!  🙂

FONTE:

<script language=javascript>
var LIMITE_Y = 200,LIMITE_X = 200,LIMITE_BARRA = 0,DELAY = 10, VELOCIDADE = 2, X = 0, Y = 0;
var PAUSE = false;
var SENTIDO_Y = “D”, SENTIDO_X= “B”;
window.onload = function(){
var BOX = document.getElementById(“box”);
var BARRA = document.getElementById(“bloco”);
var AREA = document.getElementById(“area”);
BARRA.style.left = 75;
BARRA.style.top = 100;
BOX.style.left = X;
BOX.style.top = Y;
var LIMITE_BARRA_X = parseInt(BARRA.style.top.replace(“px”,””))-parseInt(BOX.offsetHeight)-parseInt(BARRA.offsetWidth);
var LIMITE_BARRA_Y = parseInt(BARRA.style.left.replace(“px”,””))+parseInt(BOX.offsetWidth);
window.setInterval(function() {
if(PAUSE) {
if (Y >= LIMITE_Y)SENTIDO_Y = “E”;
if (Y <= 0)SENTIDO_Y = “D”;
Y = (SENTIDO_Y == “D”) ? (Y+VELOCIDADE): (Y-VELOCIDADE);
if (X >= LIMITE_X)SENTIDO_X = “C”;
if (X <= 0)SENTIDO_X = “B”;
X = (SENTIDO_X == “B”) ? (X+VELOCIDADE) : (X-VELOCIDADE);
if((X == LIMITE_BARRA_X  && Y <= LIMITE_BARRA_Y)) SENTIDO_X = “C”;
if(X <= (LIMITE_BARRA_X+parseInt(BARRA.offsetWidth)+parseInt(BARRA.offsetHeight)) && Y <= parseInt(BOX.offsetHeight+BARRA.offsetHeight)) {
if(X == (LIMITE_BARRA_X+BARRA.offsetWidth+BARRA.offsetHeight))SENTIDO_Y = “E”;
else if (X > LIMITE_BARRA_X &&  X <= (parseInt(BOX.offsetHeight)+LIMITE_BARRA_X)){
SENTIDO_X = “B”;
SENTIDO_Y = “D”;
}
AREA.style.backgroundColor= (AREA.style.backgroundColor == ‘green’ ? ‘white’ : ‘green’);
}
BOX.style.left = Y;
BOX.style.top = X;
}
},DELAY);
}
</script>

 

var LIMITE_Y = 200,LIMITE_X = 200,LIMITE_BARRA = 0,DELAY = 10, VELOCIDADE = 2, X = 0, Y = 0;
var PAUSE = false;
var SENTIDO_Y = "D", SENTIDO_X= "B";
window.onload = function(){
var BOX = document.getElementById("box");
var BARRA = document.getElementById("bloco");
var AREA = document.getElementById("area");
BARRA.style.left = 75;
BARRA.style.top = 100;
BOX.style.left = X;
BOX.style.top = Y;
var LIMITE_BARRA_X = parseInt(BARRA.style.top.replace("px",""))-parseInt(BOX.offsetHeight)-parseInt(BARRA.offsetWidth);
var LIMITE_BARRA_Y = parseInt(BARRA.style.left.replace("px",""))+parseInt(BOX.offsetWidth);
window.setInterval(function() {
if(PAUSE) {
if (Y >= LIMITE_Y) SENTIDO_Y = "E";
if (Y <= 0) SENTIDO_Y = "D"; Y = (SENTIDO_Y == "D") ? (Y+VELOCIDADE): (Y-VELOCIDADE); if (X >= LIMITE_X) SENTIDO_X = "C";
if (X <= 0) SENTIDO_X = "B";
X = (SENTIDO_X == "B") ? (X+VELOCIDADE) : (X-VELOCIDADE);
if((X == LIMITE_BARRA_X && Y <= LIMITE_BARRA_Y)) SENTIDO_X = "C";
if(X <= (LIMITE_BARRA_X+parseInt(BARRA.offsetWidth)+parseInt(BARRA.offsetHeight)) && Y <= parseInt(BOX.offsetHeight+BARRA.offsetHeight)) { if(X == (LIMITE_BARRA_X+BARRA.offsetWidth+BARRA.offsetHeight))SENTIDO_Y = "E"; else if (X > LIMITE_BARRA_X && X <= (parseInt(BOX.offsetHeight)+LIMITE_BARRA_X)){
SENTIDO_X = "B";
SENTIDO_Y = "D";
}
AREA.style.backgroundColor= (AREA.style.backgroundColor == 'green' ? 'white' : 'green');
}
BOX.style.left = Y;
BOX.style.top = X;
}
},DELAY);
}

DEMO :   http://aspx.xmasters.com.br/bolinha/

Geração framework (qual é a sua opinião?)

Tenho notado que em fóruns,comunidades e até mesmo em chats, muitos programadores (“não todo, mas na sua grande maioria os novos programadores”) estão muito dependentes do uso de frameworks para seus desenvolvimentos.

Antes que pensem que estou aqui para pregar algo do tipo “morte aos frameworks”, quero deixar bem claro que uso e adoro usar alguns frameworks do mercado, sou usuário dos seguintes frameworks:
1 – Prototype (http://www.prototypejs.org/)
2 – Script.aculo.us (http://script.aculo.us/)
3 – JQuery (http://jquery.com/)

Entre outros…

O que está me deixando preocupado é que, geralmente quando ocorre algum problema com o framework, tais como:
1 – “Não atenda na solução do problema”
2 – ”Bugs encontrado”
3 – “Problemas em usar”

Muitos programadores não sabem como resolver ou não possuem conhecimento ou esperiência para resolver esses problemas.

Será que eles esqueceram ou não sabem como realmente as coisas funcionam por dentro do framework ?

Claro que ninguém é obrigado a saber tudo, mas acredito que o básico se faz necessário nessas horas…

Na empresa que trabalho, aconteceu algo muito parecido com a questão supracitada.

Lá existe um “Programa de Qualificação Profissional”, onde os estagiários passam por um ciclo de aprendizado ou treinamento para poder entrar na fabrica de software com uma base…

Pois bem….

Certo dia um dos estágiarios estava com muita dificuldade para usar alguns recursos do Javascript (sem framework). Para ajuda-lo chamei um programador que por sinal sabe tudo de jquery tanto nas coisas básicas quanto nas coisas avançadas
(criação de plugins para jquery, utilização de seletores avançados e etc..).

Para minha surpresa, ele teve uma grande dificuldade para ajudar o estagiário, o que me deu a entender é que de tanto usar frameworks, ele não sabia mais como usar o “javascript puro”…

Será que é seguro somente usar frameworks ?

Gostaria de saber a opinião de vocês…

PS: Sei que meu português é um pouco falho, se encontrar algum erro gramatical, não se espante!