Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Comunicação entre arquivos Javascript

Como funciona a comunicação entre arquivos Javascript? Já há dois arquivos js: 'calcula_imc' e 'cria_nova_tabela'. Nesta aula eu procurei diferentes formas de validar o paciente. Em todas elas, as funções criadas só funcionavam se todas as funções usadas estivessem no mesmo arquivo. Por fim, fiz como o professor para testar se eu estava deixando algo passar, contudo tanto a função validaPeso(peso)quanto a função validaAltura(altura)(ambas no arquivo 'calcula_imc') só eram executadas corretamente na função valida(paciente)(no arquivo 'cria_nova_tabela') se eu colocasse todas em 'cria_nova_tabela'. Quando eu não passava validaPeso(peso) e validaAltura(altura) para o mesmo arquivo de valida(paciente), dava erro.

Segue o arquivo 'calcula_imc':

var titulo = document.querySelector(".titulo"); 

titulo.textContent = ("Aparecida Nutricionista");

var pacientes = document.querySelectorAll(".paciente");

var paciente;
var tdPeso;
var tdAltura;
var peso;
var altura;
var tdImc;
var calculoImc;
var pesoValido;
var alturaValida;

function calculaImc(peso,altura) {

  calculoImc = peso / (altura * altura);

  return calculoImc.toFixed(2);
}

function armazenaImc() {
  tdPeso = paciente.querySelector(".info-peso");
  tdAltura = paciente.querySelector(".info-altura");
  peso = tdPeso.textContent;
  altura = tdAltura.textContent;

  tdImc = paciente.querySelector(".info-imc");

  calculaImc(peso,altura);
}


function verificaPesoAltura() {

  pesoValido = validaPeso(peso);
  alturaValida = validaAltura(altura);

  if(!pesoValido) {
    tdPeso.textContent = ("Peso inválido!"); //é necessário modificar o textContent diretamente na var do querySelector e não na var peso = tdPeso.textContent
  }

  if(!alturaValida) {
    tdAltura.textContent = ("Altura inválida!"); //é necessário modificar o textContent diretamente na var do querySelector e não na var altura = tdPeso.textContent
  }

  if(pesoValido && alturaValida) {
    var calculoImc = calculaImc(peso,altura);
    tdImc.textContent = calculoImc;
  }
}

function validaPeso(peso) {
  if (peso > 0 && peso < 250) {
    return true;
  } else {
    return false;
  }
}

function validaAltura(altura) {
  if(altura > 0 && altura < 3.00) {
    return true;
  } else {
    return false;
  }
}

function mostraImc() {
  for(var i = 0; i < pacientes.length; i++) {

    paciente = pacientes[i];

    armazenaImc();

    verificaPesoAltura();
  }
}

mostraImc();

E o 'cria_nova_tabela' :

var botaoAdicionar = document.querySelector(".botao-bto-principal");

botaoAdicionar.addEventListener("click", function (event) {
  event.preventDefault(); 

  var form = document.querySelector(".adiciona-info"); 

  var paciente = pegaInfosDoPaciente(form); 

  var pacienteTr = criaListaDePacienteNovo(paciente); 

  if(validaPaciente(paciente)) {
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr); 
  } else {
    alert("Peso ou altura inválida. Insira os dados novamente.");
  }

  form.reset();
});

function pegaInfosDoPaciente (form) { 
    var paciente = { 
      nome:form.nome.value, //usa-se o name da tag
      peso:form.peso.value,
      altura:form.altura.value,
      gordura:form.gordura.value,
      imc: calculaImc(form.peso.value,form.altura.value)
    }
    return paciente; 
} 

function criaListaDePacienteNovo(paciente) {
  var pacienteTr = document.createElement("tr");
  pacienteTr.classList.add("paciente");

 var dado = [paciente.nome,paciente.peso,paciente.altura,paciente.gordura,paciente.imc];
 var classe = ["info-nome","info-peso","info-altura","info-gordura","info-imc"];

  for (var i = 0; i< dado.length; i++) {
    pacienteTr.appendChild(montaTd(dado[i],classe[i]));
  }

  return pacienteTr; //retorna os elementos de pacienteTr
}

function montaTd(dado,classe) {

  var td = document.createElement("td");
  td.classList.add(classe);
  td.textContent = dado;

  return td;
}

/*function validaPeso(peso) {
  if (peso > 0 && peso < 250) {
    return true;
  } else {
    return false;
  }
}

function validaAltura(altura) {
  if(altura > 0 && altura < 3.00) {
    return true;
  } else {
    return false;
  }
}*/

function validaPaciente(paciente) {
  if(validaPeso(paciente.peso) && validaAltura(paciente.altura)) {
    return true;
  } else {
    return false;
  }
}
2 respostas
solução!

Fala Bruna! Tudo bem?

A verdade é que tudo está importado no html, certo? Porém um arquivo js não consegue utilizar a função no outro arquivo js. Imagina que você é dona de uma empresa e contrata 2 funcionários, cada qual com sua função. Você passa tarefas para eles, mas eles não se conhecem, então cada um faz sua parte sem saber da existência do outro. Agora você pede pro João, seu funcionário, buscar o produto que o Adalberto, outro funcionário, acabou de terminar. Mas ele não conhece o Adalberto. Haha, resumindo, você tem que fazer os arquivos conversarem. Pelo menos as funções que você quer usar no outro arquivo. Se faz isso com o Import/Export. Você exporta um módulo ou até uma função isolada de um arquivo enquanto você importa no outro. Seria algo como:


// arquivo_1
export default validaPeso() {
//Código...
}

// arquivo_2 (no topo)
import { validaPeso } from './arquivo_1'

// código...

Aqui tem um post do Mario Souto falando sobre Import/Export no JS. https://www.alura.com.br/artigos/como-funciona-o-import-e-export-do-javascript

Qualquer coisa que não tenha ficado clara, ou se não era bem essa sua dúvida, pode responder aqui que eu tento de novo.

Bons estudos!

Ficou super claro, Henrique. Gostei bastante do exemplo que você deu. Obrigada! E agradeço também a dica de leitura. x)