O foco destes artigos de Javascript é uma aplicação real e não teórica, ou seja, lecionar em sequencia de uma real aplicação, na qual você usuário aprender e já aplicar os conceitos.
Com Javascript podemos facilmente acessar Tags do HTML, assim como receber e atribuir valores aos elementos. Podemos também criar novos elementos, porém o foco aqui não é criar elementos, e sim manipular os elementos.
Como você já deve saber ao estudar HTML e CSS, em uma página HTML ou em um contexto, não podemos ter mais de um elemento ID com o mesmo valor, se você inserir vai funcionar corretamente, porém na validação do W3C haverá problemas e semanticamente está errado. Você pode usar class e acessar os elementos depois. Resumindo, utilize os elementos ID com nomes diferentes e use o nome de class quantas vezes forem necessárias.
Veja o código HTML abaixo, note que temos vários parágrafos e cada um com um ID diferente.
Código 01:
<html lang="pt-br">
<head>
<title>Elementos JS</title>
<meta charset="utf-8" />
<script>
</script>
</head>
<body>
<p id="nome"></p>
<p id="email"></p>
<p id="telefone"></p>
<p id="sexo"></p>
</body>
</html>Podemos utilizar diversos recursos para acessar e atribuir valores em elementos, aqui vamos acessar com ID e CLASS, então vamos lá!
Para manipular elementos ID, usamos document.getElementById(“nomeId”), desta forma já acessamos o elementos. Se for um campo de formulário HTML como input ou textarea usamos document.getElementById(“nomeId”).value , tanto para atribuir quando obter um valor. Se for uma Tag HTML usamos document.getElementById(“nomeId”).innerHTML. Vamos ver um exemplo abaixo.
Código 02:
<html lang="pt-br">
<head>
<title>Elementos JS</title>
<meta charset="utf-8" />
<script>
var nome = "Gunnar Correa";
var email = "gunnersvaldo@mit.com";
var telefone = "190192193";
var sexo = 'M';
document.getElementById("nome").innerHTML = nome;
document.getElementById("email").innerHTML = email;
document.getElementById("telefone").innerHTML = telefone;
document.getElementById("sexo").innerHTML = sexo;
</script>
</head>
<body>
<p id="nome"></p>
<p id="email"></p>
<p id="telefone"></p>
<p id="sexo"></p>
</body>
</html>Se você executou o código acima, deve ter visto que não apareceu nada na tela, tudo esta correto, mas mesmo assim não exibiu. Para encontrar os problemas, acessamos o console do Chrome/Mozilla e vemos uma mensagem vermelha.
No erro acima diz que o elemento não pode definir nulo, neste caso o script foi executado antes do HTML ter montado. Imagine que você queira forrar um lençol sem ter a cama, não vai dar para forrar o lençol, pois a cama não existe e o que te resta é avisar um responsável (no caso a mamãe). No Javascript é a mesma coisa, não podemos acessar um elemento sem que ele esteja montado.
Na imagem abaixo você vai entender melhor, pois o HTML é uma arvore e nele consta todos os elementos, seus filhos e atributos.
Mas então, como acessar os elementos quando a página for carregada? Existem várias formas, como EventListener, eventos onload, entre outros. Aqui vamos criar uma simples função function nomeFuncao(){código} em seguida no elemento body criar um evento onload chamando a função que criamos, assim quando o documento for criado a função será chamada, veja o exemplo abaixo.
Código 03:
<html lang="pt-br">
<head>
<title>Elementos JS</title>
<meta charset="utf-8" />
<script>
var nome = "Gunnar Correa";
var email = "gunnersvaldo@mit.com";
var telefone = "190192193";
var sexo = 'M';
function exibir(){
document.getElementById("nome").innerHTML = nome;
document.getElementById("email").innerHTML = email;
document.getElementById("telefone").innerHTML = telefone;
document.getElementById("sexo").innerHTML = sexo;
}
</script>
</head>
<body onload="exibir();">
<p id="nome"></p>
<p id="email"></p>
<p id="telefone"></p>
<p id="sexo"></p>
</body>
</html>Para obter o valor entre de uma Tag não órfã (aquela que fecham com /> e não <tag></tag>), usamos basicamente o mesmo processo para atribuir, porém não informando o valor. Vamos guardar o valor em uma variável e exibi-la em um alert, veja o exemplo abaixo.
Código 04:
<script>
var nome = "Gunnar Correa";
var email = "gunnersvaldo@mit.com";
var telefone = "190192193";
var sexo = 'M';
function exibir(){
document.getElementById("nome").innerHTML = nome;
document.getElementById("email").innerHTML = email;
document.getElementById("telefone").innerHTML = telefone;
document.getElementById("sexo").innerHTML = sexo;
var nomeAtual = document.getElementById("nome").innerHTML;
alert(nomeAtual);
}
</script>Para acessar o atributo class, precisamos trocar a sintaxe e o retorno é um vetor, o que veremos nas aulas seguintes, mas apenas para exemplificar vamos obter os elementos que possuem o elemento resultado. Todos os elementos serão acessados em posições.
Nossa variável terá várias posições, cada uma delas correspondente a um elemento encontrado nas próximas aulas verá o uso do for e do while na qual vamos percorrer automaticamente todas estas posições e saber o tamanho desta variável. No exemplo abaixo atribuímos em uma variável todos os elementos que contém no atributo class o valor resultado, em seguida em cada posição do elemento definimos um valor correspondente a uma variável. Veja o exemplo abaixo, note o uso do innerHTML. O acesso é feito através do document.getElementsByClassName(“nomeClass”) que retorna zero ou vários elementos.
Código 05:
<html lang="pt-br">
<head>
<title>Elementos JS</title>
<meta charset="utf-8" />
<script>
var nome = "Gunnar Correa";
var email = "gunnersvaldo@mit.com";
var telefone = "190192193";
var sexo = 'M';
function exibir(){
var resultado = document.getElementsByClassName("resultado");
resultado[0].innerHTML = nome;
resultado[1].innerHTML = email;
resultado[2].innerHTML = telefone;
resultado[3].innerHTML = sexo;
var nomeAtual = resultado[0].innerHTML;
alert(nomeAtual);
}
</script>
</head>
<body onload="exibir();">
<p class="resultado"></p>
<p class="resultado"></p>
<p class="resultado"></p>
<p class="resultado"></p>
</body>
</html>Embora ainda não trabalhamos com vetores, for, while, if, else, function entre outros, você já sabe a partir de agora manipular elementos HTML, isto para que nos próximos artigos podemos usar os exemplos ligado com nossa realidade, manipular informações em situações reais e do dia a dia.
Para reforçar, usamos o innerHTML para manipular tags e value para input text, textarea, select entre outros. Fique tranquilo que nas próximas aulas veremos isto em sua aplicação real.
