Javascript não é uma linguagem tipada. Disso já sabemos. Então, muitas vezes, as coisas não funcionam exatamente como esperamos.
Um caso que acontece muito pode ser simulado nesse exemplo que segue: um formulário com dois campos e uma rotina que executa a soma dos valores dos dois campos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exemplo de soma</title>
<script type="application/javascript">
window.onload = function() {
document.getElementById("calcular").onclick = function() {
var val1 = document.getElementById("campo1").value;
var val2 = document.getElementById("campo2").value;
alert(val1 + val2);
}
}
</script>
</head>
<body>
<h1>Soma – exemplo</h1>
<form action="#" method="post">
<label for="campo1">campo 1:</label><input type="text" id="campo1" />
<label for="campo1">campo 2:</label><input type="text" id="campo2" />
<input type="button" id="calcular" value="calcular" />
</form>
</body>
</html>
Faça um teste preenchendo os inputs com valores numéricos, e clique no botão de calcular. Se você preencher com, por exemplo, 5 e 3, ao clicar no botão terá um alert() com o valor 53.
O que aconteceu? O interpretador do javascript entende que são strings (textos), e a soma que ele faz é, na verdade, uma concatenação das strings.
Como resolver isso?
Existe um comando nativo do javascript, eval(param), que recebe um parâmetro e o interpreta. Mude a linha que faz a soma para
alert(eval(val1) + eval(val2));
E você verá que a soma, que antes era uma concatenação, vai ser feita da forma esperada: somando realmente os valores.
Mas, fica o alerta: usar o comando eval() deve sempre ser muito bem analisado se vale a pena. Uma vez que ele interpreta qualquer comando que está em uma string, você acaba abrindo o seu código para ser executado por terceiros.
Num próximo post mostro como fazer essa soma de uma forma mais elegante!