JavaScript Progressivo

Como Manipular Radio Buttons (Arrays e Laço FOR IN) em JavaScript

Neste tutorial de nosso Curso de JavaScript, online e grátis, vamos aprender como trabalhar melhor com os famosos radio buttons do HTML.

Vamos ver como verificar qual botão está checado, usando agora nossos conhecimentos de arrays e laço FOR IN.

Estudar pela Apostila em PDF

Relembrando Radio Buttons

Os botões de rádio são aqueles que aparecem geralmente em formulários, do tipo checagem.
Eles tem uma particularidade: só pode apertar um por vez!

Abaixo, exemplo de 4 Radio Buttons, veja que você só consegue selecionar um por vez:

JavaScript
PHP
HTML
Python

O código-fonte dos radiobuttons acima é:

<input name="linguagens" type="radio" value="JavaScript" /> JavaScript<br />
<input name="linguagens" type="radio" value="PHP" /> PHP<br />
<input name="linguagens" type="radio" value="HTML" /> HTML<br />
<input name="linguagens" type="radio" value="Python" /> Python<br />

Quatro pontos:

São inputs, ou seja, formulários que recebem algum valor do usuário (no caso, check ou uncheck, ou seja, checado ou não checado, selecionado ou não)
Um grupo de radiobuttons deve ter o mesmo atributo name
O tipo é type="radio"
O atributo value é um valor qualquer (string, número...) que você deseja que aquele botão de radio tenha

Sabendo disso, vamos para o JavaScript.

Como Manipular Radio Buttons com JavaScript

Vamos exibir o seguinte conjunto de radiobuttons:
1
2
3
4
5

O código HTML para ele é:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <input name="mybuttons" type="radio" value="1" /> 1<br />
  <input name="mybuttons" type="radio" value="2" /> 2<br />
  <input name="mybuttons" type="radio" value="3" /> 3<br />
  <input name="mybuttons" type="radio" value="4" /> 4<br />
  <input name="mybuttons" type="radio" value="5" /> 5<br />
  <button onclick="checar()">Checar</button><br />
 </body>
</html>

Agora vamos fazer o JavaScript conversar com estes radiobuttons.
O que queremos é simples: ao clicar em um botão e clicar em Checar, abra uma janela de alert informando o que tem escrito no atributo value do botão que foi selecionado.

Veja o resultado:

1
2
3
4
5

Na nossa função checar() definimos uma variável bem especial, a botoes.
Com o código a seguir, ela vai pegar todo atributo de name="mybottons":

var botoes = document.getElementsByName("mybuttons");

A belezura desse código é que a variável botoes é um Array.
Isso mesmo, um vetor.

E o mais legal: cada elemento do vetor corresponde a um radiobutton!

No nosso exemplo, o elemento botoes[0] se refere ao primeiro botão, de valor 1.
O segundo elemento, botoes[1], se refere ao segundo botão, de valor 2, e assim sucessivamente.

E esses botões tem um atributo bem especial, o .checked
botoes[0].checked
botoes[1].checked
botoes[2].checked
botoes[3].checked
botoes[4].checked

Ele tem o valor TRUE se o botão for selecionado e tem o valor FALSE se o botão não estiver selecionado/checado.

Então, para saber que botão foi checado, usamos o código JavaScript abaixo:

function checar()
{
 var botoes = document.getElementsByName("mybuttons");

 for (var i = 0 in botoes) 
        if (botoes[i].checked)
            alert("Escolheu: " + botoes[i].value);
}

Ou seja, usamos um laço FOR IN para percorrer todos os elementos do array botoes.
Em cada um deles avaliamos o valor de checked.

O que der verdadeiro, vai no teste condicional IF e dizemos o valor dele!
Bem simples e interessante, não?

Exercício de JavaScript
Faça uma página na internet que exiba o seguinte script com os inputs e seus valores (teste):

Qual melhor linguagem ?
HTML
JavaScript
PHP
Python
C

Código está na apostila

Calcular Média de um Número Variável de Notas (Arrays, laço FOR e FOR...IN)

Neste tutorial de nossa apostila de JavaScript, vamos resolver um exercício que propomos no tutorial anterior, de laços FOR IN em arrays, onde vamos aprender como calcular a média de uma turma, qualquer que seja o número de alunos que tenha nela, usando arrays, laços FOR e FOR IN.

Exercícios resolvidos e comentados na Apostila de JavaScript

Enunciado do Exercício

Sua tia, professora, encomendou um trabalho para você.

Ela quer que você crie um script que vai pedir o número de alunos da turma (peça via prompt mesmo).

Em seguida, vai perguntar qual foi a nota de cada um deles.

No final, seu script deve fornecer a média geral da turma.

Use array para armazenar as notas, laço FOR para preencher cada elemento do array e um laço FOR IN para calcular a soma das notas (cálculo necessário para calcular a média).

Resolução comentada

Primeiro, perguntamos o número de alunos na turma, via comando prompt e nos transformamos a string recebida em um número inteiro, via função parseInt, e armazenamos na variável alunos.

Agora, vem um pulo do gato. Vamos criar nosso vetor, de nome vetor, fazendo:

var vetor = new Array(alunos);

Ou seja, vamos alocar um vetor de memória com alunos elementos, e esse valor é variável, você que vai decidir quando digitar a quantidade de alunos, ok?

Agora, precisamos preencher esse vetor com a nota dos alunos.

Vamos pegar um laço FOR que vai de 0 até alunos (menor que), com sua variável count.

Lembre-se que:

aluno 1 -> índice 0

aluno 2 -> índice 1

...

alunos i -> índice i-1

Por isso usamos (count + 1) no prompt. Para preencher a posição alunos[count] mostramos sempre pro usuário o valor count+1, pois em programação nossa contagem começa sempre no 0.

Agora, com todo o array populado de valores, vamos calcular a soma de todos os elementos.

Vamos inicializar uma variável soma com valor 0.

Agora, vamos usar um laço FOR IN, que vai pegar desde o primeiro até o último índice, e vamos somar o elemento correspondente com a variável soma.

Por fim, para achar a média, basta dividir pelo número de alunos, armazenado na variável alunos.

Código da questão resolvida

HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="main()">
 </body>
</html>

script.js

function main()
{
 var alunos =  parseInt(prompt("Numero de alunos: "));
 var vetor = new Array(alunos);

 // Preenchendo o veotr
 for(let count=0; count<alunos; count++)
  vetor[count] = parseInt( prompt("Aluno " + (count+1) + ":") )
 

 // Somando todos os elementos
 var soma=0;
 for(let count in vetor)
  soma += vetor[count];

 var media = soma/alunos;
 document.write("Média da turma: " + media);
}

O laço FOR IN para Arrays em JavaScript

Neste tutorial de nosso Curso de JavaScript, vamos aprender um laço novo e especial, perfeitos para serem usados em arrays, é o laço for ... in.

Estudar Laços e Arrays pela Apostila em PDF

O laço FOR ... IN para Arrays

O assunto de arrays é tão, mas tão importante, que existe um laço especial que podemos usar nele, o for ... in (também pode ser usado em outros objetos que possam ser enumerados).

Note uma coisa nos exemplos do tutorial anterior, sobre o laço for em arrays:

a variável count percorreu todo o índice dos vetores, da posição 0 até a posição (vetor.length-1).

Ou seja, todos os vetor.length elementos.

O laço for in serve pra isso: ao usar, você vai fazer com que o contador do laço (count) assuma automaticamente todos os índices.

A sintaxe é a seguinte:

for( variavel in Array){

[codigo]

}

A variável variavel vai receber o valor de cada elemento do Array, um por um, cada um por iteração.

Exemplo de uso de Arrays com laço FOR IN

Rode o seguinte código

HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="main()">
 </body>
</html>

script.js:

function main()
{
   var vetor = [1, 2, 3, 4, 5];

   for(var i in vetor)
 document.write(vetor[i] + "<br />");
}

O que ele faz é simplesmente definir e inicializar um vetor de 5 elementos: 1, 2, 3, 4 e 5

Depois, fazemos: var i in vetor

Isso quer dizer o seguinte: a variável i vai assumir todos os índices do vetor vetor.

Ou seja, ela vai iniciar como 0, depois como 1, depois recebe 2, ..., até i=4 , pois nosso vetor tem 5 posições.

Então printamos na tela o elemento contido naquele índice do vetor.

Veja bem: a variável assume todos os valores do índice, automaticamente, um por um.

No exemplo, ela foi do índice 0 até o 4.

Se seu vetor tiver 1 milhão de elementos, o laço for in vai automaticamente do 0 até o 999999.

Uma mão na roda, não é verdade?

Exercício usando Array, laço FOR e FOR ... IN

Sua tia, professora, encomendou um trabalho para você.

Ela quer que você crie um script que vai pedir o número de alunos da turma (peça via prompt mesmo).

Em seguida, vai perguntar qual foi a nota de cada um deles.

No final, seu script deve fornecer a média geral da turma.

Use array para armazenar as notas, laço FOR para preencher cada elemento do array e um laço FOR IN para calcular a soma das notas (cálculo necessário para calcular a média).

Tente bastante esse exercício. Vamos resolver ele a seguir:
Exercício de arrays e laços FOR e FOR IN