Javascript do básico ao intermediário

Curso Escrevendo testes automatizados com PHPUnit

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.