T07_LM3: Eventos em Javascript (2013-2014)

611 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
611
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

T07_LM3: Eventos em Javascript (2013-2014)

  1. 1. JavaScript: Timers Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 07, 02-10-2013
  2. 2. Porque devemos utilizar timers • uma estrutura de repetição (ciclos) executa um conjunto de instruções sequencialmente • até que esse ciclo esteja terminado, o browser fica “bloqueado” ou pode apresentar alguma lentidão • durante a execução de um script, a camada de visualização do browser pode não ser atualizada • não é nada boa ideia implementar ciclos cujo tempo de execução seja longo!
  3. 3. timers • os timers permitem executar código em intervalos de tempo específicos • sempre que um intervalo de tempo é atingido, o timer lança um evento que, normalmente, se traduz na invocação de uma função • podemos ter muitos timers a correr em simultâneo e com tempos distintos
  4. 4. setInterval() • permite invocar repetidamente uma função num intervalo de tempo especificado • setInterval("javascript function", milliseconds); • setInterval("minhaFuncao()", 1000); • setInterval(function(){minhaFuncao()}, 1000);
  5. 5. setTimeout() • permite invocar uma função, apenas uma vez, após um intervalo de tempo especificado • setTimeout("javascript function", milliseconds); • setTimeout("minhaFuncao()", 1000); • setTimeout(function(){minhaFuncao()}, 1000);
  6. 6. Para parar a execução de um timer • Quando um timer é criado ele é identificado por um valor que é devolvido no momento da sua criação. • var timerX = setInterval("minhaFuncao()", 1000); • clearInterval(timerX); • var timerY = setTimeout("minhaFuncao()", 1000); • clearTimeout(timerY);
  7. 7. exemplo de aplicação • criar uma animação horizontal do objeto “X” • o objeto deve mover-se 20px em intervalos de tempo de 50ms; • o movimento deve estar limitado entre as coordenadas 0 e 400 do browser; • sempre que se atinge um dos limites, o objeto “X” deve mudar de cor; • depois de 4 mudanças de direção, a animação deve parar.
  8. 8. estratégia de resolução do problema • obter a posição do objeto • mover o objeto para a direita, apenas um passo • colocar o objeto a mover-se automaticamente para a direita • parar o objeto quando chega ao limite dos 400px • colocar o objeto a andar de um lado para o outro • fazer a mudança de cor quando se atingem os limites • parar a animação no final das 4 mudanças de direção
  9. 9. Resolução na aula • Ficheiro disponível na zona de ficheiros do grupo do SAPO Campus • Na solução da aula o switch estava fora do if que verifica os limites do movimento. • porque é que alterei para ficar dentro do if? • Nesta solução tive também o cuidado de acrescentar mais comentários. Para além dos comentários, não se esqueçam que é uma boa prática adicionar variáveis para todos os valores numéricos que são especificados no enunciado.

×