SlideShare a Scribd company logo
1 of 17
Download to read offline
JavaScript: Erros
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 13, 07-11-2011
(Capítulo 4 do livro Beginning JavaScript)
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.
#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); }
#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());
#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();
#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();
#4. Falta fechar os parêntesis! }

• onde está o erro?

 if (myVariable + 12) / myOtherVariable < myString.length)
#5. Usar = em vez de ==

• onde está o erro?

 var myNumber = 99;
 if (myNumber = 101)
 {
   alert(“myNumber is 101”);
 }
 else
 {
   alert(“myNumber is “ + myNumber);
 }
#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());
#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);
#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);
#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);
#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);
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...
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>
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
debugging: principais funcionalidades

• Breakpoints

  • Watches

  • Seguir o código passo-a-passo

• Consola

• Stack Window

More Related Content

What's hot

Unidade6 roteiro pentest
Unidade6 roteiro pentestUnidade6 roteiro pentest
Unidade6 roteiro pentest
Leandro Almeida
 

What's hot (20)

Nada sobre JavaScript
Nada sobre JavaScriptNada sobre JavaScript
Nada sobre JavaScript
 
Algoritmos Aula 07
Algoritmos Aula 07Algoritmos Aula 07
Algoritmos Aula 07
 
6 excecoes
6 excecoes6 excecoes
6 excecoes
 
Aula05 - Lógica de Programação
Aula05 - Lógica de ProgramaçãoAula05 - Lógica de Programação
Aula05 - Lógica de Programação
 
Javascript - boas práticas
Javascript - boas práticasJavascript - boas práticas
Javascript - boas práticas
 
Unidade6 roteiro pentest
Unidade6 roteiro pentestUnidade6 roteiro pentest
Unidade6 roteiro pentest
 
Tratamento de exceções em Java
Tratamento de exceções em JavaTratamento de exceções em Java
Tratamento de exceções em Java
 
Estruturas de repetição (parte 01)
Estruturas de repetição (parte 01)Estruturas de repetição (parte 01)
Estruturas de repetição (parte 01)
 
Java: Excecoes e Tratamento de Erros
Java: Excecoes e Tratamento de ErrosJava: Excecoes e Tratamento de Erros
Java: Excecoes e Tratamento de Erros
 
10+ Coisas Que Odeio Em Php
10+ Coisas Que Odeio Em Php10+ Coisas Que Odeio Em Php
10+ Coisas Que Odeio Em Php
 
[Curso Java Basico - Exceptions] Aula 49: finally
[Curso Java Basico - Exceptions] Aula 49: finally[Curso Java Basico - Exceptions] Aula 49: finally
[Curso Java Basico - Exceptions] Aula 49: finally
 
Vim
VimVim
Vim
 
[Curso Java Basico - Exceptions] Aula 47: try, catch
[Curso Java Basico - Exceptions] Aula 47: try, catch[Curso Java Basico - Exceptions] Aula 47: try, catch
[Curso Java Basico - Exceptions] Aula 47: try, catch
 
[Curso Java Basico] Aula 60: Escopo de Variaveis
[Curso Java Basico] Aula 60: Escopo de Variaveis[Curso Java Basico] Aula 60: Escopo de Variaveis
[Curso Java Basico] Aula 60: Escopo de Variaveis
 
[Curso Java Basico - Exceptions] Aula 50: stacktrace e throws
[Curso Java Basico - Exceptions] Aula 50: stacktrace e throws[Curso Java Basico - Exceptions] Aula 50: stacktrace e throws
[Curso Java Basico - Exceptions] Aula 50: stacktrace e throws
 
Erros, exceções e asserções
Erros, exceções e asserçõesErros, exceções e asserções
Erros, exceções e asserções
 
Aula python
Aula pythonAula python
Aula python
 
Sims 2
Sims 2Sims 2
Sims 2
 
JAVA - Tratamento de Erros
JAVA - Tratamento de ErrosJAVA - Tratamento de Erros
JAVA - Tratamento de Erros
 
Python + algoritmo
Python + algoritmoPython + algoritmo
Python + algoritmo
 

Similar to LabMM3 - Aula teórica 13

Apostila: Curso de java I
Apostila: Curso de java IApostila: Curso de java I
Apostila: Curso de java I
Verônica Veiga
 
Tratamento de excees slide trabalho
Tratamento de excees slide trabalhoTratamento de excees slide trabalho
Tratamento de excees slide trabalho
Higor Klecyus
 

Similar to LabMM3 - Aula teórica 13 (20)

Java script aula 02 - operadores
Java script   aula 02 - operadoresJava script   aula 02 - operadores
Java script aula 02 - operadores
 
Minicurso php
Minicurso phpMinicurso php
Minicurso php
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Java hidden features
Java hidden featuresJava hidden features
Java hidden features
 
Java e orientação a objetos
Java e orientação a objetosJava e orientação a objetos
Java e orientação a objetos
 
Programação Orientada a Objetos - 001
Programação Orientada a Objetos - 001Programação Orientada a Objetos - 001
Programação Orientada a Objetos - 001
 
PHPUnit e teste de software
PHPUnit e teste de softwarePHPUnit e teste de software
PHPUnit e teste de software
 
Apostila: Curso de java I
Apostila: Curso de java IApostila: Curso de java I
Apostila: Curso de java I
 
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
 
Google android p/ Noobs - SUPER 2014 - UPE
Google android p/ Noobs - SUPER 2014 - UPEGoogle android p/ Noobs - SUPER 2014 - UPE
Google android p/ Noobs - SUPER 2014 - UPE
 
Java7 tdc2011
Java7 tdc2011Java7 tdc2011
Java7 tdc2011
 
Excecoes em Java
Excecoes em JavaExcecoes em Java
Excecoes em Java
 
Programação Funcional usando C# e F#
Programação Funcional usando C# e F#Programação Funcional usando C# e F#
Programação Funcional usando C# e F#
 
Fascículo1java
Fascículo1javaFascículo1java
Fascículo1java
 
Javascript
JavascriptJavascript
Javascript
 
Debugging node
Debugging nodeDebugging node
Debugging node
 
Tratamento de excees slide trabalho
Tratamento de excees slide trabalhoTratamento de excees slide trabalho
Tratamento de excees slide trabalho
 
Aula 1 - Introdução a linguagem JAVA SE
Aula 1 - Introdução a linguagem JAVA SEAula 1 - Introdução a linguagem JAVA SE
Aula 1 - Introdução a linguagem JAVA SE
 
Testes de Sofware
Testes de SofwareTestes de Sofware
Testes de Sofware
 
Depurando Aplicações PHP com XDebug e FirePHP - SETI 2008
Depurando Aplicações PHP com XDebug e FirePHP - SETI 2008Depurando Aplicações PHP com XDebug e FirePHP - SETI 2008
Depurando Aplicações PHP com XDebug e FirePHP - SETI 2008
 

More from Carlos Santos

AVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosAVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunos
Carlos Santos
 
SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativo
Carlos Santos
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e Scoreoid
Carlos Santos
 
T19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoT19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificação
Carlos Santos
 
T14_LM3: Animação (2013-2014)
T14_LM3: Animação (2013-2014)T14_LM3: Animação (2013-2014)
T14_LM3: Animação (2013-2014)
Carlos Santos
 

More from Carlos Santos (20)

Is AI the Spice of our future?
Is AI the Spice of our future?Is AI the Spice of our future?
Is AI the Spice of our future?
 
Mentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantesMentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantes
 
1º Encontro Científico TCEdu
1º Encontro Científico TCEdu1º Encontro Científico TCEdu
1º Encontro Científico TCEdu
 
Tecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicialTecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicial
 
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunosAVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
 
AVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosAVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunos
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
 
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
 
Tecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho práticoTecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho prático
 
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
 
SAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning EnvironmentSAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning Environment
 
Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO CampusRepensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
 
A technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus projectA technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus project
 
SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativo
 
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCARepensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e Scoreoid
 
T19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoT19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificação
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
 
T14_LM3: Animação (2013-2014)
T14_LM3: Animação (2013-2014)T14_LM3: Animação (2013-2014)
T14_LM3: Animação (2013-2014)
 

Recently uploaded

Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
AntonioVieira539017
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
HELENO FAVACHO
 

Recently uploaded (20)

P P P 2024 - *CIEJA Santana / Tucuruvi*
P P P 2024  - *CIEJA Santana / Tucuruvi*P P P 2024  - *CIEJA Santana / Tucuruvi*
P P P 2024 - *CIEJA Santana / Tucuruvi*
 
EDUCAÇÃO ESPECIAL NA PERSPECTIVA INCLUSIVA
EDUCAÇÃO ESPECIAL NA PERSPECTIVA INCLUSIVAEDUCAÇÃO ESPECIAL NA PERSPECTIVA INCLUSIVA
EDUCAÇÃO ESPECIAL NA PERSPECTIVA INCLUSIVA
 
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
 
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdfPROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
PROJETO DE EXTENSÃO I - SERVIÇOS JURÍDICOS, CARTORÁRIOS E NOTARIAIS.pdf
 
O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.
 
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
 
migração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenosmigração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenos
 
Cartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxCartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptx
 
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...
A Revolução Francesa. Liberdade, Igualdade e Fraternidade são os direitos que...
 
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdfPROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
 
Conflitos entre: ISRAEL E PALESTINA.pdf
Conflitos entre:  ISRAEL E PALESTINA.pdfConflitos entre:  ISRAEL E PALESTINA.pdf
Conflitos entre: ISRAEL E PALESTINA.pdf
 
M0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptxM0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptx
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
 
Camadas da terra -Litosfera conteúdo 6º ano
Camadas da terra -Litosfera  conteúdo 6º anoCamadas da terra -Litosfera  conteúdo 6º ano
Camadas da terra -Litosfera conteúdo 6º ano
 
Texto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.pptTexto dramático com Estrutura e exemplos.ppt
Texto dramático com Estrutura e exemplos.ppt
 
Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmico
 
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
 
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxMonoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx
 

LabMM3 - Aula teórica 13

  • 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