domingo, 28 de março de 2010
Manipulando Tabelas com InnerHtml
Os códigos abaixo, mostrarão como manipular uma tabela, utilizando apenas JavaScript.
Em primeiro lugar, vamos criar uma página simples em html. Nele existiram dois combos que, conforme a seleção, irão montar uma tabela.
Arquivo HTML
Para não ficar tão "cru" nossa tabela, vamos criar um arquivo CSS com dois estilos de linha.
Cada linha será de uma cor.
Arquivo CSS
Agora, vamos para o X da questão. Nós iremos criar um arquivo JS que será responsável por montar nossa tabela.
Este é fonte completo dele. Abaixo, explicarei um pouco mais sobre cada um das funções criadas.
Arquivo JS
Função Montar Tabela:
Esta função servirá apenas de "porta de entrada" do nosso arquivo html.
Ele basicamente irá buscar os elementos pelo ID para posteriormente criarmos a nossa tabela, com base no que for selecionado nas combos.
Função Montar:
Esta função será chamada através da montarTabela(função anterior), passando por parametro os elementos que irão criar nossa tabela.
Está tabela, possuirá N linhas e três colunas.
Uma para remoção (através de um Radio Button), e as outras duas para criação dos relacionamentos das combos.
Função RemoveRow:
Informamos apenas o ID da tabela, para podermos itera-la, e o ID do elemento a ser removido.
A função Habilitar server apenas para inibir a possibilidade de um duplo clique no botão de associação
Em primeiro lugar, vamos criar uma página simples em html. Nele existiram dois combos que, conforme a seleção, irão montar uma tabela.
Arquivo HTML
Para não ficar tão "cru" nossa tabela, vamos criar um arquivo CSS com dois estilos de linha.
Cada linha será de uma cor.
Arquivo CSS
Agora, vamos para o X da questão. Nós iremos criar um arquivo JS que será responsável por montar nossa tabela.
Este é fonte completo dele. Abaixo, explicarei um pouco mais sobre cada um das funções criadas.
Arquivo JS
Função Montar Tabela:
Esta função servirá apenas de "porta de entrada" do nosso arquivo html.
Ele basicamente irá buscar os elementos pelo ID para posteriormente criarmos a nossa tabela, com base no que for selecionado nas combos.
Função Montar:
Esta função será chamada através da montarTabela(função anterior), passando por parametro os elementos que irão criar nossa tabela.
Está tabela, possuirá N linhas e três colunas.
Uma para remoção (através de um Radio Button), e as outras duas para criação dos relacionamentos das combos.
Função RemoveRow:
Informamos apenas o ID da tabela, para podermos itera-la, e o ID do elemento a ser removido.
A função Habilitar server apenas para inibir a possibilidade de um duplo clique no botão de associação
domingo, 5 de abril de 2009
JavaScript não Intrusivo
Há alguns anos atrás quando começou o desenvolvimento de web sites, códigos HTML's estavam todos misturados com as configurações de estilos da página(Definições de cores, tamanhos, fontes, etc). Com a chegada do CSS, houve a separação deste código. O que é referente a codificação HTML fica separado do que for referente a codificação de estilos.
Ou seja, antigamente tinhamos:
Agora, utilizando um arquivo CSS:
restando assim, apenas o que é estrutura em nosso arquivo HTML, e tendo um ou mais arquivos responsáveis por estilizar nossas páginas.
Então vamos pensar. Se no nosso arquivo CSS é para ficarem apenas as configgurações de estilos e o nosso HTML é para ficar apenas nosso esqueleto, por que não fazer o mesmo com nossos javaScripts. Afinal de contas, utilizamos eles para diversas coisas. Validações, redirecionamentos, comportamento de um campo/objeto, manipulação do estilo... Enfim, todo o comportamento que quiser realizar na página através de um script. Dae você irá me dizer, "Mas hoje já utilizamos arquivos js separados do HTML!". Isso é verdade, agora imagine se até as chamdas pudessem ser externalizadas.
?????
Vamos ver um exemplo.
Hoje fazemos nossos scripts assim:
Agora, de uma forma não intrusiva, ou seja, sem eventos de onClick, onMouseOver, restando apenas o HTML no fonte, sem nenhum evento.
Apenas isso:
Primeiro passo. Em um arquivo js separado inlcuiremos nossa function, declarada na forma anterior.
Arquivo script.js
Até agora nada fora do normal. Agora, vamos fazer com que nossos radios, quando clicados, façam a mesma troca de cor que já estavam fazendo anteriormente.
Primeiro vamos informar a nossa página que, quando a página for carregada eu irei coletar todos os elementos radios da minha página que contenham o nome colorSelect.
Pronto, temos todos os nosso radios.
Agora vem a mágica, para cada radio, iremos atribuir ao objeto radio, o atributo onClick com um valor, que será nossa função.
Com isto será atribuito no carregamento da página o evento onClick em todos os radios que estiverem com o nome que foi passado na função e definido no html.
Exemplo completo.
Arquivo js
Arquivo html
Espero que tenham gostado.
Ou seja, antigamente tinhamos:
Agora, utilizando um arquivo CSS:
restando assim, apenas o que é estrutura em nosso arquivo HTML, e tendo um ou mais arquivos responsáveis por estilizar nossas páginas.
Então vamos pensar. Se no nosso arquivo CSS é para ficarem apenas as configgurações de estilos e o nosso HTML é para ficar apenas nosso esqueleto, por que não fazer o mesmo com nossos javaScripts. Afinal de contas, utilizamos eles para diversas coisas. Validações, redirecionamentos, comportamento de um campo/objeto, manipulação do estilo... Enfim, todo o comportamento que quiser realizar na página através de um script. Dae você irá me dizer, "Mas hoje já utilizamos arquivos js separados do HTML!". Isso é verdade, agora imagine se até as chamdas pudessem ser externalizadas.
?????
Vamos ver um exemplo.
Hoje fazemos nossos scripts assim:
Agora, de uma forma não intrusiva, ou seja, sem eventos de onClick, onMouseOver, restando apenas o HTML no fonte, sem nenhum evento.
Apenas isso:
Primeiro passo. Em um arquivo js separado inlcuiremos nossa function, declarada na forma anterior.
Arquivo script.js
Até agora nada fora do normal. Agora, vamos fazer com que nossos radios, quando clicados, façam a mesma troca de cor que já estavam fazendo anteriormente.
Primeiro vamos informar a nossa página que, quando a página for carregada eu irei coletar todos os elementos radios da minha página que contenham o nome colorSelect.
Pronto, temos todos os nosso radios.
Agora vem a mágica, para cada radio, iremos atribuir ao objeto radio, o atributo onClick com um valor, que será nossa função.
Com isto será atribuito no carregamento da página o evento onClick em todos os radios que estiverem com o nome que foi passado na função e definido no html.
Exemplo completo.
Arquivo js
Arquivo html
Espero que tenham gostado.
quarta-feira, 25 de março de 2009
Objetivo
Sejam bem vindos. A idéia principal deste blog será de criar POST's relacionados a tecnologias de desenvolvimento. Seram abordados principalmente assuntos relacionados a desenvolvimento Web. Temas como, HTML, CSS, JavaScript, PHP.
Alguns fontes simples, mas que na hora do aperto ajudam muito.
Todos os POST's com comentário, críticas, sugestões, ou até mesmo exemplos que tenham haver com desenvolvimento Web, independete de linguam, será sempre bem-vindo!
Então, aguardem em breve postarei alguns fontes devidamente explicados.
Grato,
Viltér Panitz
Alguns fontes simples, mas que na hora do aperto ajudam muito.
Todos os POST's com comentário, críticas, sugestões, ou até mesmo exemplos que tenham haver com desenvolvimento Web, independete de linguam, será sempre bem-vindo!
Então, aguardem em breve postarei alguns fontes devidamente explicados.
Grato,
Viltér Panitz
Assinar:
Postagens (Atom)