LAB’s AIT
vitor$ /etc/init.d/javascript start
by @VitorCastro
sexta-feira, 2 de agosto de 13
//OBJETIVO
sexta-feira, 2 de agosto de 13
JavaScript
Linguagem de programação interpretada
Roda nos navegadores web (cliente)
caracteristicas++
sexta-feira, 2 de ag...
Show me the code !!!
<html>
<script> <!-- type="text/javascript" -->
code...
</script>
</html>
OU
<script src=”<endereco>....
Declarando variável
var nomeDaVariavel = valorDaVariavel; // ou
sem o ponto e vírgula
sexta-feira, 2 de agosto de 13
Tipos de Dados
Array -> var array = new Array()
Number -> var number = new Number()
Boolean -> var bool = new Boolean()
Ob...
E o
Document..Object..Model..
variável “window” é a raiz de tudo. Mas que
usamos é o “document”
métodos #notBad
document.g...
POPUPs
alert(text)
confirm(text)
prompt(text)
sexta-feira, 2 de agosto de 13
IF ELSE FOR SWITH
if (expression){ }else { }
for (var index = 0; index < length; index++){ }
switch(data) { case value: { ...
function
function nameFunction(){ code... }
sexta-feira, 2 de agosto de 13
others function dos
object do D..O..M..
.innerHTML
.length
.value
.item(index) [Object NodeList]
+++
sexta-feira, 2 de ago...
EVENT CLICK
botao.onclick = function () { }
OU
botao.addEventListener(“click”, function(){ })
sexta-feira, 2 de agosto de ...
Missão #1
sexta-feira, 2 de agosto de 13
#RULES
if (google.com.br) return false;
if (facebook.com) return false;
if (gmail.com || hotmail.com || @qualquerEmail)
re...
index.html
<h1>Controle Remoto</h1>
<a id="cima" href="#quadro">Cima (10)</a>
<a id="baixo" href="#quadro">Baixo (20)</a>
...
//TODO #1
Ao clicar nos links “Cima”“Baixo”“Direita” e
“Esquerda”, salvar a sequencia de comandos
Ex: Clicar em Cima e Bai...
//TODO #2
Ao clicar no botão “Processar comando”:
Escrever o comando no input
Escrever no primeiro <span> o comando
Escrev...
//TODO #3
O máximo de comandos clicados deve ser 5
Quando for clicado o sexto comando, gerar
um popup(alert) informando e ...
TIMEBOX
30 Minutos para o CODE
5 Minutos para cada participante apresentar
o que fez para os demais
window.location = “htt...
sexta-feira, 2 de agosto de 13
Upcoming SlideShare
Loading in …5
×

Labs JavaScript - AIT

252 views

Published on

Exercício de Javascript em formato Labs realizado na AIT-PROEG (facebook.com/aitproeg)

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

  • Be the first to like this

No Downloads
Views
Total views
252
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Labs JavaScript - AIT

  1. 1. LAB’s AIT vitor$ /etc/init.d/javascript start by @VitorCastro sexta-feira, 2 de agosto de 13
  2. 2. //OBJETIVO sexta-feira, 2 de agosto de 13
  3. 3. JavaScript Linguagem de programação interpretada Roda nos navegadores web (cliente) caracteristicas++ sexta-feira, 2 de agosto de 13
  4. 4. Show me the code !!! <html> <script> <!-- type="text/javascript" --> code... </script> </html> OU <script src=”<endereco>.js”></script> sexta-feira, 2 de agosto de 13
  5. 5. Declarando variável var nomeDaVariavel = valorDaVariavel; // ou sem o ponto e vírgula sexta-feira, 2 de agosto de 13
  6. 6. Tipos de Dados Array -> var array = new Array() Number -> var number = new Number() Boolean -> var bool = new Boolean() Object -> var object = { prop: val, method: function () {} } String -> var string = new String() +++ sexta-feira, 2 de agosto de 13
  7. 7. E o Document..Object..Model.. variável “window” é a raiz de tudo. Mas que usamos é o “document” métodos #notBad document.getElementById(id) //busca por Id document.getElementsByName(name) // busca por pelo atributo name document.getElementsByTagName(nameTag) // buscar pelo nome da tag sexta-feira, 2 de agosto de 13
  8. 8. POPUPs alert(text) confirm(text) prompt(text) sexta-feira, 2 de agosto de 13
  9. 9. IF ELSE FOR SWITH if (expression){ }else { } for (var index = 0; index < length; index++){ } switch(data) { case value: { code.. break;} default: break; } sexta-feira, 2 de agosto de 13
  10. 10. function function nameFunction(){ code... } sexta-feira, 2 de agosto de 13
  11. 11. others function dos object do D..O..M.. .innerHTML .length .value .item(index) [Object NodeList] +++ sexta-feira, 2 de agosto de 13
  12. 12. EVENT CLICK botao.onclick = function () { } OU botao.addEventListener(“click”, function(){ }) sexta-feira, 2 de agosto de 13
  13. 13. Missão #1 sexta-feira, 2 de agosto de 13
  14. 14. #RULES if (google.com.br) return false; if (facebook.com) return false; if (gmail.com || hotmail.com || @qualquerEmail) return false; if (coding) return like; sexta-feira, 2 de agosto de 13
  15. 15. index.html <h1>Controle Remoto</h1> <a id="cima" href="#quadro">Cima (10)</a> <a id="baixo" href="#quadro">Baixo (20)</a> <a id="esquerda" href="#quadro">Esquerda (30)</a> <a id="direita" href="#quadro">Direita (40)</a><br> <input type="text" disabled="disabled" size="10" maxlength="10" name="linhaComando"> <button id="printComando">Processar Comando</button> <br> <div id="quadro" style="display: none;"> ! <span style="font-size: 16px"></span><br> ! <span style="font-size: 14px"></span> </div> sexta-feira, 2 de agosto de 13
  16. 16. //TODO #1 Ao clicar nos links “Cima”“Baixo”“Direita” e “Esquerda”, salvar a sequencia de comandos Ex: Clicar em Cima e Baixo Gerar C,B sexta-feira, 2 de agosto de 13
  17. 17. //TODO #2 Ao clicar no botão “Processar comando”: Escrever o comando no input Escrever no primeiro <span> o comando Escrever no segundo <span> o custo do comando Ex: Cima + Baixo = (10 + 20) -> 30 sexta-feira, 2 de agosto de 13
  18. 18. //TODO #3 O máximo de comandos clicados deve ser 5 Quando for clicado o sexto comando, gerar um popup(alert) informando e zerar a lista de comandos Se clicar direto no “Processar comando” sem comandos clicados não exibir os <span> sexta-feira, 2 de agosto de 13
  19. 19. TIMEBOX 30 Minutos para o CODE 5 Minutos para cada participante apresentar o que fez para os demais window.location = “http://github.com” #openTheBox sexta-feira, 2 de agosto de 13
  20. 20. sexta-feira, 2 de agosto de 13

×