anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Altere um documento com funções do JavaScript

capa

Se você já começou a dar os seu primeiros passos  e se interessa por JavaScript, cedo ou tarde deverá conhecer o método getElementById. Ele permite alterar a largura, a altura, as bordas e até  a origem de um tag, bastando apenas que ela possua um identificador para que o método possa acessá-la, alterando-a sequencialmente ou mesmo dinamicamente.

A linguagem Javascript possui uma variedade muito grande de objetos, e cada objeto possui seus métodos e ações que lhe atribuem funcionalidades e promovem interatividade em uma pagina da Web.

Dentre estas funcionalidades temos a modificação da estrutura do documento e a forma como ele estará sendo exibido; o que implica na possibilidade de mudança de cores, formatos, alinhamentos, tamanhos, entre outras possibilidades, como mencionamos acima.

Hoje irei demonstrar o uso de um método bastante simples, mas que permitirá mudanças significativas em seu site. Esse método é o GetElementById (“nome do identificador”) e style.

Para este tutorial utilizarei o programa Notepad++, mas você pode utilizar o seu editor de códigos favorito sem problema algum.

Vamos começar o nosso tutorial criando um novo documento em html. Faremos isso da forma mais simples possível, sempre lembrando que nossa intenção é somente testar os métodos e, portanto, a parte visual será bem comum, somente para demonstração.

Faça os códigos como na figura 1.0.

criando documento html

Nota: como pode perceber, nosso documento ainda não esta salvo; confira o local onde a seta azul esta apontando na imagem e salve-o no diretório de sua preferência.

1-    Entre a linha 4 e 9 reservaremos um espaço para os nossos futuros códigos em JavaScript, já sabendo que este espaço irá ser alterado futuramente.

2-    Salve o documento com o nome de metodo.html

3-    Em seguida criaremos os elementos que serão usados para manipular os estilos que criaremos via JavaScript.

4-    Criaremos dois links para efeito de teste; o primeiro será usado para alterar o estilo do parágrafo que colocaremos no documento, e o segundo será usado para devolver o formato original ao parágrafo.

Veja a criação dos links na fig 1.1 e reproduza-os de forma idêntica:

Criando links

5-    Com os dois links já criados, vamos visualizar no navegador para ver qual é o resultado até este momento.

resultado até o momento

Nota: os textos indicados pelas setas são os nossos links, o primeiro servirá para alterar a aparência do original e o segundo para devolvê-la ao original, como o próprio texto sugere.

6-    Vamos criar o parágrafo que estaremos alterando via JavaScript.

Veja fig 1.3

Criando parágrafo

Nota: Embaixo dos links criamos um parágrafo e lhe atribuiremos o id=”paragrafo”. Através deste id (que nada mais é do que um identificador), selecionaremos o parágrafo e mudaremos seu estilo.

O texto do parágrafo é esse a seguir:

Mudar estilo pelo javascript é extremamente fácil, desde que se conheça um pouco da linguagem, esse método será trabalhado junto com o método style, que possibilitará aplicar formatação CSS usando uma sintaxe javascript; confira reproduzindo este exemplo.

Obs.: depois de cada texto do nosso parágrafo coloque uma quebra de linha em HTML (<br> )

7 –  Após inserir o parágrafo, salve as alterações feitas no Notepad++ e visualize as mudanças no navegador, pressionando a tecla F5 (atualiza) com o navegador aberto para visualizar as mudanças.

Veja o resultado na fig1.4 :

Resultado navegador

8 – Vamos a criação do nosso script. Na seção JavaScript digite o seguinte comando:

Function alterar

Nota: na frente do instrução function, o texto alterar() é uma referência ao texto que colocamos no evento onclick do primeiro link, veja figura 1.1.

Quando clicarmos sobre o link alterar daremos então partida ao evento onclick que vai chamar a função alterar(), que vai modificar o parágrafo conforme as instruções que passaremos no corpo da função. Caso você ainda não esteja compreendendo o que estamos fazendo, confira o restante do tutorial até o fim e irá perceber que não há nenhum segredo.

9 –  Dentro das chaves vamos criar uma variável com o nome alt que vai armazenar o nosso parágrafo acessado via método getElementById(“nome_do_id”), veja a fig1.6.

getElementById(“nome_do_id”)

Nota: na linha 6 vemos como podemos acessar um parágrafo pelo seu id usando o método getElementById, dentro das aspas vai o nome do id do parágrafo, veja o nome indicado pela terceira seta da fig1.6.

10 – Com o parágrafo armazenado na variável alt, através do metodo style vamos modificar o seu estilo, veja como na fig 1.7.

modificar o estilo do paragrafo

Nota: style é um método que vai te permitir aplicar formatações CSS usando JavaScript.

Nosso parágrafo está armazenado na variável alt, sendo assim essa variável representa o parágrafo. O .style quer dizer que podemos aplicar estilo CSS a esse parágrafo, o .fontSize significa a propriedade que estaremos mudando, neste caso o tamanho da fonte, depois, entre aspas colocamos o valor (neste exemplo, 25px). Não esqueça o ponto e vírgula após cada linha de comando.

Obs.: No JavaScript, o ponto (.) serve para acessarmos métodos e propriedades dos objetos ou elementos os quais desejamos mudar, veja o exemplo na fig1.7.

 11 –  Ate o momento mudamos somente o tamanho da fonte, agora vamos alterar também a sua cor, veja fig 1.8

alterar a cor

12 –  Visualize o resultado no navegador.

Resultado no navegador

Nota: a fig1.9 mostra o resultado quando é dado um clique sobre o link Alterar estilo conforme mostra a figura acima; embaixo o original e em cima após clicar no link.

13 – Vamos copiar a função que criamos até agora e mudar o nome para devolver e também os valores que modificamos pelo método style, que são fontSize=”25px” e color=” blue”, vamos colocar conforme a figura abaixo:

valores da propriedade

Nota: veja que mudei somente os valores da propriedade fontSize para “16px” e color para “black”;

Confira mais abaixo o final do nosso trabalho!


final do trabalho

Através do método getElementById podemos não só acessar tags pelo seu atributo id,  mas modificar a forma como ele será exibido no navegador para uma melhor exibição do conteúdo do seu site!

Espero que com este post eu tenha conseguido lançar uma luz sobre o assunto, novos artigos estarão sendo feitos com mais dicas sobre como melhorar a visibilidade de elementos do seu site. Não percam meus próximos posts onde irei mostrar outros métodos JavaScript. E acompanhe o blog dando sugestões sobre assuntos para os próximos posts!  Até a próxima!

Próximo

Postado por

Tenho 29 anos, fiz vários cursos na área de informática dentre os quais me identifiquei muito com Web Design, em especial a programação que trata a parte do raciocínio lógico por trás de todos os sites e programas, atualmente estou fazendo faculdade de Sistema de Informação e estudando modelagem 3D. Leciono na Microcamp de Praia Grande no curso de Web desde de 2010.

Postagem Relacionada

jkit
jQuery jKit: A revolução no Front-End
jQuery jKit Hoje eu venho falar de um plug-in incrível do Jquery: o super útil JKit!!