DHTML, DOM e JavaScript DOM não são a mesma coisa

Maio 5, 2008 on 9:11 am | In Informatica, JavaScript, AJAX | No Comments

Bom vou falar um pouco sobre conceitos, logo para apresentar para vocês uma pouco o que realmente é DHTML ou Dynamic HTML e DOM, o que seria esse DOM que todo mundo fala? O conceito de DHTML é bem antigo, ja se usavam apartir do momento que lançaram o IE 4.0+, Netscape 7+, Mozilla e Firefox 1.0.

É a idéia de tornar a página dinâmica seria a possibilidade de transformar ou mudar estrutura da página sem o reload dela, mudar um título, cabeçalho, cor, esconder algo do usuário ou mostrar num passe de mágica, sem que ele espere pelo reload da página inteira novamente.

Mas o que tem a ver DOM e Javascript com tudo isso ? DOM significa Document Object Model (Modelo de Objetos de Documento) que seria a estrutura HTML. É basicamente uma arvóre de nós.

Exemplo:

PLAIN TEXT
HTML:
  1. <div id="xis">
  2. <div id="Y">
  3. <div id="H"></div>
  4. </div>
  5. </div>

No exemplo acima temos dentro da div XIS os seguintes nós XIS>Y>H . Dizendo como é nossa estrutura. A idéia do DHTML é de que com o JavaScript utilizando padronização (CSS, xHTML / HTML) podemos fazer mudanças nesta estrutura em tempo real para facilitar a vida do usuário, seja deixando um texto mais escuro, mudando uma img, abrindo e fechando caixas ou até mesmo com recursos mais avançados como o AJAX.

Abraços e boa semana ; )


Aplicações Front-End em JavaScript

Fevereiro 6, 2008 on 4:42 pm | In Informatica, JavaScript | 2 Comments

Muita gente que programa em PHP pode não ter percebido, mas o php em si não é a solução, por isso o PHP trabalha com diversas outras linguagens para que a solução esteja mais perto do que o usuário final espera, é por isso que existem hoje acessibilidade, design pattern, url amigaveis, ajax e dentro outras na sopa de letrinhas, para se juntar ao mecanismo e se transformar em um só.

Um fator muito importante desconsiderado por muitos programadores, coders, e outros loucos, é a idéia que o visual SIM conta muito na hora que o usuário começa a mecher no sistema / site. Esse é um problema que vimos por ai na web, muitas vezes você programador se depara com um problema e a solução é um sistema, deixando aquela idéia de SITE de lado e sim começar a usar a idéia de montar um sistema, software como solução para um problema.

Porém este software na concepção do usuário tem aquela janela, cara de Janelas (Windows) por isso é importante que o sistema esteja condizente a esta idéia, não adianta criar um site, com rollover de imagens, isto não basta pois assim você ainda irá entregar ao cliente um site e não um sistema.

Para esta idéia o programador em php deve-se integrar-se cada vez mais com o JavaScript (sugestão), seja usando um Framework ou não; é uma linguagem que pode-se ser usada muito bem visualmente, ainda mais quando pensamos em frameworks, existem muitos no mercado que possa ajudar a você transformar tudo isso em uma idéia de que o Front-End é um sistema e não uma página, deixo então a dica do uso do Ext JS, um Framework para essa idéia de que o usuário possa usar e abusar com aquilo que ele esta acustumado ao operar um sistema.


Do SelectBox para o ListBox

Outubro 1, 2007 on 3:21 pm | In Informatica, php, JavaScript, JQuery, Tutorial | 6 Comments

Tutorialzinho para criarmos um selectbox e um listbox apartir do formulário em html e então através do JQuery adicionarmos os itens no Listbox e então pegarmos o valor por método POST no PHP.

A idéia do tutorial seria uma lista de itens adicionado a um listbox, formando um carrinho de compras dos itens, para depois então enviarmos tudo de uma vez so através do POST do form, gerando uma array para o PHP, é um dos clássicos em programação. Como muita gente não sabe da possibilidade em html/php deixo um tutorial para se ter uma idéia de como utilizar esse recurso.
Sem mais delongas vamos ao código, primeiramente o form, claramente veremos que o nosso listbox na verdade é um selectbox com a tag de multiple (virando assim um listbox):

PLAIN TEXT
HTML:
  1. <form method="post" enctype="multipart/form-data" name="F1" id="F1">
  2. <select name="func" id="func">
  3. <option value="1">Numero 1</option>
  4. <option value="2">Numero 2</option>
  5. <option value="3">Numero 3</option>
  6. </select>
  7.  
  8.  
  9. <input type="button" name="add" value="Adicionar" />
  10.  
  11.  
  12. <select multiple="multiple" id="eq" name="eq[]" size="7">
  13. </select>
  14.  
  15.  
  16. <input name="Submit2" type="submit" id="EnvioDados" value="ENVIAR DADOS">
  17. </form>

Agora podemos escrever o código do JQuery com DOM para facilitar nossa vida:

PLAIN TEXT
JAVASCRIPT:
  1. $().ready(function() {
  2.  
  3. //Click do botão ADD
  4. $("input[@name=add]").click(function(){
  5. var id_selecionado = document.F1.func.selectedIndex;
  6. var valor_selecionado = document.F1.func.options[id_selecionado].text;
  7. var id_indice_selecionado = document.F1.func.options[id_selecionado].value;
  8. $('select[@id=eq]').append('<option value="'+ id_indice_selecionado +'">'+ valor_selecionado +'</option>');
  9.  
  10. //desabilita o valor adicionado;
  11. document.F1.func.options[id_selecionado].disabled=true;
  12. });
  13.  
  14. // Click do botao do submit
  15. $('input[@name=Submit2]').click(function(){
  16. var x=document.getElementById("eq");
  17. for (i=0;i<x.length;i++){
  18. x.options[i].selected=true;
  19. }
  20. return true;
  21. });
  22. })

Muito legal né? Mas e para remover ? Bom, para remover eu recomendo dar uma procurada na net sobre um plugin para ListBox usando o JQuery, vocês não querem tudo na mão né? Dúvidas e sugestões é so comentar.


JSON Populando formulário

Agosto 28, 2007 on 12:25 am | In Informatica, JavaScript, AJAX, Tutorial | 4 Comments

JSON, o que é ? É um acrônimo para JavaScript Object Notation, serve para que ? Serve para fazer intercâmbio de dados, mais utilizado no Ajax, atualmente utilizado para retorno de dados para o AJAX, com a necessidade de popular (retornar) dados para um formulário.

JSON que se lê djeissón, pode ser utilizado em diversas linguagens, como php, c/c++, javascript, Java, Delphi, Perl, Python, Ruby, ColdFusion e muitas outras.

Imaginamos que ao clicar no botão alterar dados de uma lista, queremos trazer os dados da requisição do HTTP (Ajax) para colocalos no formulario. Para isso devemos retornar um dado do Ajax (arquivo da requisição) em JSON.

Para se encapsular dados para o Json no PHP basta o seguinte:

PLAIN TEXT
PHP:
  1. $array = array ('a'=>1,'b' => 2, 'c' => 3);
  2. $res=json_encode($array);
  3. // retornando no res o seguinte:
  4. // {"a":1, "b":2, "c":3 }

Otimo, agora como devemos ler os dados do retorno no JavaScript? Essa é parte mais fácil, para converter dados do texto JSON para objetos (variavel do JS) basta usar a função eval();

PLAIN TEXT
JAVASCRIPT:
  1. // resposta é o $res do PHP, retorno dos dados
  2. eval("var arr = "+resposta);
  3. // Agora temos uma array de dados em javascript
  4. // exemplo arr.a = 1
  5. // exemplo arr.b = 2
  6. // exemplo arr.c = 3

Agora basta popular o formulário (inputs, text area e afins) com DOM HTML. Pronto você aprendeu como JSON trabalha, o que é e como utilizar, agora basta utilizar suas ideias em conjunto ao Ajax e construir maravilhas.


Expressão Regular no JavaScrit

Agosto 23, 2007 on 11:58 am | In Trabalho, JavaScript, Tutorial | 2 Comments

Como muita gente não conhece e nem nunca ouviu falar de Expressão Regular ou ER ou até mesmo Regex, vou escrever o que é e como utilizar no JavaScript.

O que é ?

É um conjunto de caracteres que forma uma expressão para testar uma entrada ou saída de dados, ah? É quando você tem um conjunto de caracteres que criam uma regra, que testa se o dados casa com essa expressão. Otimo, mas você ja faz isso quando faz uma busca, porém a ER lhe da mais flexibilidade além de ser padrão ou quase para um monte de linguagens. Por exemplo para validar um CPF, podemos em vez de desmembrar e testar para ver se faz parte de uma máscara, podemos utilizar o Regex.

Como utilizar?

Para utilizar no JavaScript vamos a um caso clássico de validação o do CPF, no caso a expressão eu retirei do blog fechaTag, caso queira criar a sua própria ER veja o Guia.
Para validar o CPF faremos:

PLAIN TEXT
JAVASCRIPT:
  1. var er_cpf; // Declaramos a variavel
  2. //Colocamos a ER na variavel, preste atenção que na ER no JavaScript usamos / ER /
  3. // Não esqueça das /
  4. er_cpf = /([0-9]{3}\.?){3}-[0-9]{2}/;
  5. // A função abaixo testa a ER e o DADO.
  6. var r = er_cpf.exec(form1.documentoA.value);

Basta agora testarmos a variável r, para testar se o dado casa com nossa expressão regular. Lembre-se se o dado 'casar' quer dizer que ele (o valor) é aquilo que esperamos dentro da expressão, digo o CPF é válido.

PLAIN TEXT
JAVASCRIPT:
  1. if(r == null){
  2. alert('CPF não é valido, ele deve conter . como separador!');
  3. form1.documentoA.focus();
  4. return false;
  5. }

Pronto agora você aprendeu um pouco sobre como validar usando Expressão Regular em JavaScript. Dúvidas é só comentar.


Show e Hide (Idéia para Div Seguindo o mouse)

Julho 19, 2007 on 3:32 pm | In php, JavaScript, Tutorial | 6 Comments

Resolvi escrever sobre uma idéia que rola bastante por ae, de um div seguir o mouse, porém somente apareçer (mostrar a div) quando o mouse esta por cima de um link, como comentado no topico Div Seguindo o Mouse, somente irei agora adicionar algumas poucas linhas de códigos, recomendo que antes leia o outro topico para não ficar perdido.

A idéia basica de ter varias imagens seguindo o mouse porém so ativa-las (mostra-las) quando o mouse passar por cima de algum link, div, tabela, celula; enfim um objeto qualquer. No nosso caso a escolha foi uma DIV.

Primeiro vamos criar a div igual anteriormente, porém vamos agora, esconder essa div, para que não apareça na tela:

PLAIN TEXT
HTML:
  1. <div id="MinhaDiv1" style="position:absolute; overflow:hidden; visibility: hidden;display: none; z-index:999; background-color:#ffffcc;"><img xsrc="img/01.jpg" alt="Carro"></div>
  2. <div id="MinhaDiv2" style="position:absolute; overflow:hidden; visibility: hidden;display: none; z-index:999; background-color:#ffffcc;"><img xsrc="img/02.jpg" alt="Carro"></div>

Segundo passo é criar os links, no nosso caso como dito anteriormente vamos criar os links apartir de uma div, apartir dessa div iremos chamar a Função javascript que irá mostrar a div referente, iremos usar 2 ações: onmouseover (Ação executada quando o mouse esta em cima do objeto) e onmouseout (Ação executada quando o mouse esta fora do objeto, melhor quando ele sai do objeto). Ao executar a ação iremos chamar a função enviando 2 parametros, ID (dizendo qual DIV) e AÇÃO (qual ação tomar Mostrar/Esconder).

No nosso caso ação  1 mostra a div e ação parametro 0 esconde a div.

PLAIN TEXT
HTML:
  1. <div id="caixa" onMouseOver="SegueMouse('MinhaDiv1',1)" onMouseOut="SegueMouse('MinhaDiv1',0)"><a xhref="http://rafaelcunha.com/#">Carro importado
  2.  
  3. </a></div>
  4. <div id="caixa" onMouseOver="SegueMouse('MinhaDiv2',1)" onMouseOut="SegueMouse('MinhaDiv2',0)"><a xhref="http://rafaelcunha.com/#">Se meu fusca falasse
  5.  
  6. </a></div>

Agora basta usarmos a função do POST anterior e complementar nela a idéia de mostra e esconder a div, ficando o script completo da maneira abaixo:

PLAIN TEXT
JAVASCRIPT:
  1. function SegueMouse(id,flagit) {
  2. var divName = id; // div that is to follow the mouse
  3. // (must be position:absolute)
  4. var offX = 35;          // X offset from mouse position
  5. var offY = 35;          // Y offset from mouse position
  6.  
  7. function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
  8. function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
  9.  
  10. function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
  11. obj.left = (parseInt(mouseX(evt))+offX) + 'px';
  12. obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
  13. document.onmousemove = follow;
  14. if (flagit=="1"){
  15. if (document.layers) document.layers[''+id+''].display = ""
  16. else if (document.all) document.all[''+id+''].style.display = ""
  17. else if (document.getElementById) document.getElementById(''+id+'').style.display = ""
  18. }else
  19. if (flagit=="0"){
  20. if (document.layers) document.layers[''+id+''].display = "none"
  21. else if (document.all) document.all[''+id+''].style.display = "none"
  22. else if (document.getElementById) document.getElementById(''+id+'').style.display = "none"
  23. }
  24. }

Para ver o exemplo em execução basta acessa o link : Idéia para Div seguindo o mouse. Sinta-se livre para comentar, duvidar, justificar e até se justificar. ah?


— Next Page »

  

 Assine o feed