Este documento discute erros comuns em JavaScript e estratégias para depuração. Ele lista erros como variáveis não definidas, sensibilidade a maiúsculas e minúsculas, falta de fechamento de chaves e parênteses, uso incorreto de atribuição e concatenação, e apresenta ferramentas como try/catch e alert() para depuração. Também recomenda validação de dados do usuário e testes em diferentes navegadores devido a comportamentos inconsistentes.

1. JavaScript: Erros
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 13, 07-11-2011
(Capítulo 4 do livro Beginning JavaScript)

2. O meu código não funciona. O que fazer?
• Erros:
• um simples erro pode implicar que todo o código JavaScript não funcione!
• É necessário:
• aprender a detetar os erros para posteriomente os corrigir;
• para isso é importante:
• conhecer os erros mais típicos,
• dominar as ferramentas que nos podem auxiliar na tarefa de debug.

3. #1. Variáveis não definidas
• definição de variáveis
abc = 23;
var abc = 23;
• mas o que acontece se se utilizar a variável numa instrução sem que esta
tenha sido previamente definida? Exemplos:
alert (abc);
function foo(parametrOne) {
alert(parameterOne); }

4. #2. Sensibilidade ao case
• Um erro muito comum e muitas vezes difícil de detetar sem ajuda!
• Onde estão os erros?
var myName = “Jeremy”;
If (myName == “jeremy”)
alert(myName.toUppercase());

5. #3. Falta fechar uma chaveta! }
• onde está o erro?
function myFunction() {
x = 1;
y = 2;
if (x <= y) {
if (x == y) {
alert(“x equals y”); }
}
myFunction();

6. #3. Falta fechar uma chaveta! }
• mais fácil com indentação?
function myFunction()
{
x = 1;
y = 2;
if (x <= y)
{
if (x == y)
{
alert(“x equals y”);
}
}
myFunction();

7. #4. Falta fechar os parêntesis! }
• onde está o erro?
if (myVariable + 12) / myOtherVariable < myString.length)

8. #5. Usar = em vez de ==
• onde está o erro?
var myNumber = 99;
if (myNumber = 101)
{
alert(“myNumber is 101”);
}
else
{
alert(“myNumber is “ + myNumber);
}

9. #6. Usar um método como propriedade e vice-
versa
• onde estão os erros?
var nowDate = new Date();
alert(nowDate.getMonth);
var myString = “Hello, World!”;
alert(myString.length());

10. #6. Usar um método como propriedade e vice-
versa
• É muito importante saber distinguir métodos e propriedades
var nowDate = new Date();
alert(nowDate.getMonth());
var myString = “Hello, World!”;
alert(myString.length);

11. #6. Usar um método como propriedade e vice-
versa
• Um caso “estranho” e que pode parecer quebrar a regra.
function foo()
{
alert(“I’m in foo()!”).
}
function bar(fpToCall)
{
alert(“Calling passed function”).
fpToCall();
}
bar(foo);

12. #7. Faltam sinal de “+” na concatenação de strings
• Onde está o erro?
var myName = “Jeremy”;
var myString = “Hello”;
var myOtherString = “World”;
myString = myName + “ said “ + myString + “ “ myOtherString;
alert(myString);

13. #7. Faltam sinal de “+” na concatenação de strings
• Onde está o erro?
var myName = “Jeremy”;
var myString = “Hello”;
var myOtherString = “World”;
myString = myName+“ said “+myString + “ “ + myOtherString;
alert(myString);

14. Prevenir erros
• Experimentar o código em todos os browsers que devem ser suportados
pela aplicação:
• IE 6???
• IE 7 != IE 8 != IE 9 (e mesmo os modos de emulação não são exatamente
iguais...)
• Safari... o novo IE? :(
• Validar toda a informação introduzida pelo utilizador
• Mesmo assim podem acontecer situações imprevisíveis que, por exemplo,
podem depender das condições de rede de um determinado utilizador...

15. try...catch
• funcionam em conjunto e permite intersectar erros de execução e lidar
com eles de forma apropriada.
<script type=”text/javascript”>
try
{
alert(‘This is code inside the try clause’);
alert(‘No Errors so catch code will not execute’);
}
catch(exception)
{
alert(“The error is “ + exception.message);
}
</script>

16. debugging
• sem uma ferramenta de debug apropriada o melhor método é utilizar o alert()
para gerar mensagens a informar, por exemplo, do valor de determinadas
variáveis.
• o alert() também pode ser utilizado para ter a certeza se um determinado
script ou condição está a ser executado.
• felizmente não faltam ferramentas adequadas nos browsers atuais:
• Firefox firebug
• Safari Web Inspector
• Chrome developer tools
• Opera Dragonfly
• IE developer tools

17. debugging: principais funcionalidades
• Breakpoints
• Watches
• Seguir o código passo-a-passo
• Consola
• Stack Window