Labs JavaScript - AIT

LAB’s AIT
vitor$ /etc/init.d/javascript start
by @VitorCastro
sexta-feira, 2 de agosto de 13

//OBJETIVO

JavaScript
Linguagem de programação interpretada
Roda nos navegadores web (cliente)
caracteristicas++

Show me the code !!!
<html>
<script> 
code...
</script>
</html>
OU
<script src=”<endereco>.js”></script>

Declarando variável
var nomeDaVariavel = valorDaVariavel; // ou
sem o ponto e vírgula

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()
+++

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

POPUPs
alert(text)
conﬁrm(text)
prompt(text)

IF ELSE FOR SWITH
if (expression){ }else { }
for (var index = 0; index < length; index++){ }
switch(data) { case value: { code.. break;}
default: break; }

function
function nameFunction(){ code... }

others function dos
object do D..O..M..
.innerHTML
.length
.value
.item(index) [Object NodeList]
+++

EVENT CLICK
botao.onclick = function () { }
OU
botao.addEventListener(“click”, function(){ })

Missão #1

#RULES
if (google.com.br) return false;
if (facebook.com) return false;
if (gmail.com || hotmail.com || @qualquerEmail)
return false;
if (coding) return like;

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>

//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

//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

//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>

TIMEBOX
30 Minutos para o CODE
5 Minutos para cada participante apresentar
o que fez para os demais
window.location = “http://github.com”
#openTheBox

Labs JavaScript - AIT

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (9)

Semelhante a Labs JavaScript - AIT

Semelhante a Labs JavaScript - AIT (20)

Mais de COTIC-PROEG (UFPA)

Mais de COTIC-PROEG (UFPA) (20)

Labs JavaScript - AIT