labs javascript - ait

LAB’s AITvitor$ /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)

confirm(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

Technology

ou sextafeira

b sextafeira

tag sextafeira

vitorcastro sextafeira

openthebox sextafeira

objetivo sextafeira

exibir os sextafeira

e o document