tecnologias-web.github.io

Manipulando Páginas com JavaScript

Objetivo

Além de formatar e deixar com um bom layout, agora queremos dar vida aos documentos. Ações, efeitos, eventos, tudo que o JavaScript pode fazer por uma página HTML.

Vamos ver como manipular eventos e como criar um novo conteúdo apenas com o javascript.

Estrutura do JS

O arquivo JS é um arquivo de texto com extensão .js. Neste arquivo são declarados:

O arquivo JS é basicamente uma sequência de comandos JS. Cada comando é executado pelo navegador na sequência. O código JavaScript pode ser inserido em uma página utilizando a tag script de duas maneiras, com o código diretamente dentro dela (não recomendado) ou usando um arquivo externo (recomendado, ex: <script type="text/javascript" src="nome_arquivo.js"></script>).

Qualquer código JS (dentro da página ou um arquivo externo) deve ficar entre os marcadores <script> e </script>. Um marcador HTML que DEVE ter a abertura e o fechamento (mesmo se for uma referência a um arquivo externo). Normalmente <script></script> é inserido no cabeçalho da página (<head>), mas também pode ser colocado no corpo (<body>).

Os atributos da tag script são:

Uma página pode declarar quantos marcadores de script quiser. A leitura de uma página pelo browser é de cima para baixo. Isto inclui também a leitura do JS, como acontece com o CSS. Ou seja, tudo que for colocado em <script> ou que estiver dentro de um arquivo .js será lido. Quando utilizamos um arquivo JS, o navegador faz uma requisição ao servidor (GET) para retornar o recurso.

A cada chamada a uma página HTML o navegador também faz requisições para retornar os JS do servidor. Portanto, os arquivos ou códigos JS são incluídos como um anexo à sua página HTML. Assim como HTML e CSS, JS é um código executado no lado cliente.

Sintaxe

Variáveis

As variáveis em JS são “containers” para armazenar informação. Funcionam como a maioria das linguagens de programação.

Para declarar uma variável, devemos começar com a palavra chave var:

var x;

Quando criada, uma variável recebe valor undefined. Para atribuir um valor a variável, basta utilizar o operador de atribuição (var x = 10). Strings em JS podem ser atribuídas com aspas simples ou aspas duplas (mas usem aspas duplas!). É possível concatenar strings, números e variáveis em JS, utilizando o operador de soma (+).

Operadores

Os operadores do Javascript são similares aos encontrados em linguagens como C e Java:

Vetores

JS também suporta o uso de arrays. Para criar uma variável do tipo vetor (array), utilizamos o construtor de objetos Array:

var alunos = new Array();

Ou a maneira mais moderna, utilizando dois colchetes vazios:

var alunos = [];

Depois, basta inserir os valores nas posições do array.

alunos[0] = "Aluno1";
alunos[1] = "Aluno2";

Para criar já preenchido esses vetores, podemos fazer:

var alunos = new Array("Aluno1", "Aluno2");
var alunos = ["Aluno1", "Aluno2"];

Repare que não é preciso declarar o tamanho do vetor. Os vetores podem abrigar quaisquer tipos de dados e não precisam ter todas as entradas do mesmo tipo.

Funções

JS permite o uso de funções, para deixar o código mais organizado. É um bloco de código executado quando é chamado, como acontece na maioria das linguagens de programação. Por exemplo, executar uma função quando clicar em um botão.

A sintaxe básica começa com a palavra chave function, seguido pelo nome da função, a lista de parâmetros dentro de parênteses e um par de chaves delimitando o conteúdo da função:

function funcao() {
    alert("Olá mundo!");
}

Funções em JS podem receber argumentos, separados por vírgula:

function funcao(arg1, arg2) {
    alert(arg1);
    alert(arg2);
}

Funções em JS não declaram tipo de retorno. Entretanto, podem retornar algum valor para quem chamou. Utiliza-se a palavra chave return.

Para executar a função, basta usar o nome e os parênteses: funcao();

As variáveis em JS tem dois escopos:

Funções são objetos no JavaScript e podem ser guardadas em variáveis.

Estrutura de Decisão

JS também define estruturas de controle (if…else if…else). O uso é muito parecido à maioria das linguagens de programação:

if (condition1) {
    //codigo
} else if (condition2) {
    //codigo
} else {
    //codigo
}

Estrutura de Repetição

JS também define estruturas de repetição, muito parecido com outras linguagens de programação como C e Java:

for (var i = 0; i < 10; i++) {
    alert(i);
}

while (i < 5)  {
    alert(i)
}

Manipulação do DOM

Quando uma página é carregada o navegador cria um modelo de objetos que representa a página (DOM). O DOM é construído como uma árvore de objetos. Lembre-se que o HTML é basicamente um conjunto de marcadores aninhados. Um marcador pode ter marcadores, que pode ter marcadores.

Exemplo da estrutura do DOM

Resultado do DOM

Porque estudar o DOM? JS consegue recuperar a estrutura da página em um objeto, ou seja, temos toda a estrutura da página em objetos dentro do JS. Assim, podemos manipular nossas páginas utilizando JS:

Como capturar um elemento HTML

Uma das grandes funcionalidades de JS é manipular a página HTML, para deixar as páginas mais dinâmicas. A primeira coisa que precisamos fazer é encontrar um elemento do HTML Para isso, JS oferece um método chamado document.getElementById(). O document.getElementById() permite referenciar dinamicamente qualquer elemento do documento HTML através de um ID.

Existem outras formas de recuperar elementos HTML, não só pelo ID.

Pelo nome do marcador

var parag = document.getElementsByTagName("p");

Repare que o argumento não é o valor do atributo name, mas sim o nome do marcador (p, div, span, h1, table). Portanto, forma este método retorna TODOS os elementos com o nome do argumento. No exemplo, retorna todos os parágrafos da sua página, cada elemento sendo acessado na forma de um array: parag[0]; parag[1];

Pela classe

var classes = document.getElementsByClassName("classe");

Este método retorna TODOS os elementos com a classe enviada no argumento. No exemplo, retorna todos elemento que tem o atributo class=“classe”. Cada elemento é acessado na forma de um array: classes[0]; classes[1];. O array retornado possui o atributo length para informar quantos elementos foram encontrados.

Por seletor CSS

var objetos = document.querySelectorAll("p.importantes");

Este método retorna TODOS os elementos que batam com o seletor escrito. Cada elemento é acessado na forma de um array: objetos[0]; objetos[1];. O array retornado possui o atributo length para informar quantos elementos foram encontrados. Se quiser retornar apenas o primeiro que bate com esse seletor, use a função:

var objeto = document.querySelector("p.importantes");

Manipulações possíveis

A manipulação de objetos HTML do JavaScript pode:

document.write("<p>Parágrafo</p>");

document.getElementById("id").innerHTML="texto";

document.getElementById("id").src="imagem.jpg";

Modificar estilos CSS:

document.getElementById("id").style.background="#F0D";

document.getElementById("id").style.margin="10px";

document.getElementById("id").style.marginTop="10px";

Eventos

Eventos são ações que podem ser detectadas pelo JS. Todo elemento HTML possui eventos que podem ser disparados por funções JavaScript. Exemplos de eventos aplicados nos elementos:

Esta forma de inserir o JS em um HTML constitui uma terceira abordagem de integração entre as linguagens. A diferença aqui é que só há disparo quando o evento acontece.

Para deixar a integração com separação de código, usa-se o recurso de função. Uma function agrupa comandos que são disparados quando o evento acontece. Também é possível enviar o elemento que recebe o evento como parâmetro da função.

Exemplo de um evento onClick

Também é possível definir os eventos direto no JS, e não nos marcadores.

Exemplo de evento diretamente no JS

Criando novo conteúdo no HTML

Também é possível inserir elementos no HTML utilizando os métodos:

var x = document.createElement("p");

document.getElementByID("id").appendChild(x);

var t = document.createTextNode("Texto");

Pontos principais

Atente para os tópicos a seguir. Eles devem ser estudados com muita atenção, pois representam os pontos mais importantes do capítulo.