Ir ao conteúdo
Regras do Clube do Hardware

Javascript calculo de media ponderada com formulário html5 e javascript.

Elpidio neto

Por Elpidio neto
em Web e banco de dados

 Compartilhar

Posts recomendados

Elpidio neto
 

Elpidio neto

Postado
Postado

 Bom dia a todos!

Estou com uma dúvida simples em javascript porém não consigo resolver.

Estive olhando na internet e tem varias soluções com média simples, porém não vi nada com média ponderada (quando tem pontuação com peso).

O calculo da nota é a seguinte:

Para cursos de Licenciatura e tecnologia segue a seguinte formula:  Média=((AVA*1)+(Prova*9))/10

Para cursos de Tecnologia segue a seguinte formula: Média = ((AVA*1)+(PIM*2)+(Prova*7))/10

 

O sistema que eu quero criar segue os seguintes parâmetros:

 

O usuário insere a nota no formulário e sem a necessidade de clicar em nenhum botão aparece a nota no campo especifico.(se não der pra fazer eu coloco um botão kkkk)

A nota tem que ser do tipo decimal (float).

 

Será que alguém poderia me ajudar?

 

Abaixo tem o código 

<!DOCTYPE html>
<html>
<head>
	<title>Calculo de Notas da Escola para licenciatura/Tecnologia</title>
	<script type="text/javascript">
		 function calc_mediaLic(){
                var ntAva = parseFloat(document.getElementById('licAva').value);
                totAva=ntAva*1;
                var ntProva = parseFloat(document.getElementById('licProv').value);
                totProv=ntProva*9;
                totMedia=parseFloat(totAva+totProv)/10;
                document.getElementById('licM').value=totMedia;			
		}
	</script>
	<style type="text/css">
	h1{
		text-align: center;
		font-family: cursive, sans-serif;
	}
	p#inst{
		text-align: center;
		font-family: cursive, sans-serif;	
		font-size: 13pt;
	}
	form{
		width: 500px;
		margin: auto;
	}
		fieldset legend{
			text-align: center;
			font-weight: bold;
			text-transform: uppercase;
			font-family: Arial, sans-serif;
		}
		fieldset#licen {
			margin-bottom: 25px;
		}
		fieldset#licen input#licM, fieldset#tec input#mediaTec{
			background-color: #dddddd;
		}
	</style>
</head>
<body>
	<h1>Calculo de Notas da Escola</h1>
	<p id="inst">Insina as notas do AVA e da Prova nos seus respectivos campos.</p>
<form class="" method="post">
	<fieldset id="licen">
		<legend>Calculo da Licenciatura/bacharelado</legend>
		<p><label for="licAva">AVA:</label><input type="number" name="lAva" id="licAva" min="0" max="10" value="0"></p>
		<p><label for="licProv">Prova:</label><input type="number" name="lProv" id="licProv" min="0" max="10" value=""></p>
		<p><label for="licM">Média:</label><input type="text" name="lMed" id="licM" placeholder="Nota da Média" readonly></p>
	</fieldset>
	<fieldset id="tec"><legend>Calculo de Notas Tecnologia</legend>
		<p><label for="avaTec">AVA: </label><input type="number" name="tAva" id="avaTec" min="0" max="10" value=""> </p>
		<p><label for="cPim"> PIM: </label><input type="number" name="tPim" id="cPim" min="0" max="10" value=""></p>
		<p><label for="provaTec">PROVA: </label> <input type="number" name="tProva" id="provaTec" min="0" max="10" value=""></p>
		<p><label for="mediaTec"> Média: </label><input type="number" name="tMedia" id="mediaTec" placeholder="Nota da Média" readonly></p>
	</fieldset>
</form>
</body>
</html>

 

adicionado 42 minutos depois

Bom pessoal consegui fazer o calculo usando um botão para dar a média, porém eu queria que desse a media automatica.

denismartos
 

denismartos

Postado
Postado

Bom dia Elpidio neto,

 

O que você quer fazer é quando escrever o ultimo número, dar um TAB e aparecer automaticamente correto?

 

Aconselho utilizar a biblioteca do Jquery, existe uma finção chamada (.focusout), ela é chamada toda vez que você da um TAB no campo selecionado, ou retira a seleção dele pelo mouse.

 

Segue a API de documentação, é bem fácil de utilizar:

https://api.jquery.com/focusout/

 

  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@Elpidio neto É como o colega acima mencionou. Podes usar o onchange para calcular a cada vez que mudar o valor.

 

Para ficar legal do jeito que você quer pense no seguinte. A média precisa ser calculada quando mudar o valor do campo AVA e/ou do campo Prova. 

Primeiro o ideal, é você zerar o seu formulário definindo o valores iniciais como zero, no caso o value igual a zero.

 

Então no JS você pega os campos que vai usar  coloca em uma variável: 

var avaInput = document.getElementById("licAva");
var provaInput = document.getElementById("licProv");
var resultado = document.getElementById("licM");

Agora você cria a função para calcular a média  

function mediaLIC(ava, prova){
    var media;
    media = ((ava*1)+(prova*9)/10);
       
   	return media;
}

Com a função pronta e funcionando,  usa-se o addEventListener com a ação de "change",  façamos isso para os dois campos...  AVA e Prova:

  

//Aciona o cálculo a partir do campo AVA
avaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

//Aciona o cálculo a partir do campo Prova
provaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

Então o código inteiro desta parte ficaria assim:

  

//Variáveis do campo AVA, PROVA, MÉDIA e valores padrão do formulário
var avaInput = document.getElementById("licAva");
var provaInput = document.getElementById("licProv");
var resultado = document.getElementById("licM");
 
//Calcula a média quando mudar o valor no campo AVA   
avaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

//Calcula a média quando mudar o valor no campo prova
provaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

   //Função para calcular a média 
   function mediaLIC(ava, prova){
       var media;
       media = ((ava*1)+(prova*9)/10);
       
   	   return media;
   }

Veja funcionando online: http://jsfiddle.net/hqmgtb8p/15/

 

PS: Com jQuery é muito mais prático e menos linhas. Porém como é para aprendizado, use o javascript convencional.

  • Curtir 1
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@Elpidio neto

36 minutos atrás, Elpidio neto disse:

so tem um problema com a nota do ava que não esta valendo 1 pt na media final

Poderia ser mais claro nisso?

O cálculos estão corretos... a condição para que haja um cálculo ali é que pelo menos um dos campos precisa ter valor acima de 1. 

Pela sua fórmula:

Se colocar a nota  AVA em zero e a prova em 1,  a média fica em 0.9.

Por outro lado, se a nota do AVA for 1 e a prova zero,   a média fica em 1. 

 

Não há erros ali. A não ser que a fórmula esteja errada e/ou está faltando informações sobre o exercício.

  • Curtir 1
Elpidio neto
 

Elpidio neto

Postado
  • Autor
Postado

@DiF  Quando eu coloco as duas notas como "10" está dando a media como "19" sendo que a media deve ser no máximo 10 correto?

 

e a fórmula para a media é: ((ava*1)/10)+((prova*9)/10)ou (o que da no mesmo)  ((ava*1)+(prova*9))/10.

 

Sendo assim:

 

Se ava = 10, então  media =1

Se prova = 10, então  media =9.

 

Porém não achei o erro no algoritmo seu, porque você declara isto:

 

Em 11/07/2018 às 02:44, DiF disse:

media = ((ava*1)+(prova*9)/10);

 

 

Ai é que eu não entendi o erro. porque quando eu executo este codigo o ava sai como nota pura e não como se fosse divida por 10.

 

O 

adicionado 0 minutos depois

Continuando......

 

O que eu devo fazer para corrigir?

adicionado 4 minutos depois
Em 11/07/2018 às 02:44, DiF disse:

@Elpidio neto É como o colega acima mencionou. Podes usar o onchange para calcular a cada vez que mudar o valor.

 

Para ficar legal do jeito que você quer pense no seguinte. A média precisa ser calculada quando mudar o valor do campo AVA e/ou do campo Prova. 

Primeiro o ideal, é você zerar o seu formulário definindo o valores iniciais como zero, no caso o value igual a zero.

 

Então no JS você pega os campos que vai usar  coloca em uma variável: 

var avaInput = document.getElementById("licAva");
var provaInput = document.getElementById("licProv");
var resultado = document.getElementById("licM");

Agora você cria a função para calcular a média  

function mediaLIC(ava, prova){
    var media;
    media = ((ava*1)+(prova*9)/10);
       
   	return media;
}

Com a função pronta e funcionando,  usa-se o addEventListener com a ação de "change",  façamos isso para os dois campos...  AVA e Prova:

  

//Aciona o cálculo a partir do campo AVA
avaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

//Aciona o cálculo a partir do campo Prova
provaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

Então o código inteiro desta parte ficaria assim:

  

//Variáveis do campo AVA, PROVA, MÉDIA e valores padrão do formulário
var avaInput = document.getElementById("licAva");
var provaInput = document.getElementById("licProv");
var resultado = document.getElementById("licM");
 
//Calcula a média quando mudar o valor no campo AVA   
avaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

//Calcula a média quando mudar o valor no campo prova
provaInput.addEventListener("change", function(e) {
        var avaInputValor = document.getElementById("licAva").value;
        var provaInputValor = document.getElementById("licProv").value;
        var resultado = document.getElementById("licM");
        
        //Insere o resultado do cálculo no campo input da média
        resultado.value = mediaLIC(avaInputValor,provaInputValor);
       
}, false);

   //Função para calcular a média 
   function mediaLIC(ava, prova){
       var media;
       media = ((ava*1)+(prova*9)/10);
       
   	   return media;
   }

Veja funcionando online: http://jsfiddle.net/hqmgtb8p/15/

 

PS: Com jQuery é muito mais prático e menos linhas. Porém como é para aprendizado, use o javascript convencional.

Caraca eu não tinha entendido o seu codigo de primeira, mas cara ta muito bom!!!! Muito obrigado!!!!! agora eu peguei a logica

adicionado 6 minutos depois
Em 11/07/2018 às 02:44, DiF disse:

media = ((ava*1)+(prova*9)/10);

achei o erro, é so o parentese

 

 

media =((ava*1)+(prova*9))/10;

 

porque quando o '10' esta dentro do parentese ele é resolvido primeiro e somente para a variavel prova. Mas cara muito obrigado pela ajuda

  • Curtir 1

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...