Ir ao conteúdo
  • Cadastre-se
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.

Link para o comentário
Compartilhar em outros sites
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/

 

Link para o comentário
Compartilhar em outros sites
  • 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
Link para o comentário
Compartilhar em outros sites
  • 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
Link para o comentário
Compartilhar em outros sites
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
Link para o comentário
Compartilhar em outros sites

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...