Labs JavaScript - AIT

263 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
263
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

×