labs javascript ait #2
DESCRIPTION
Exercício de Javascript em formato Labs realizado na AIT-PROEG (facebook.com/aitproeg) #2TRANSCRIPT
![Page 1: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/1.jpg)
LAB’s AIT #2vitor$ /etc/init.d/javascript restart
by @VitorCastro
sexta-feira, 16 de agosto de 13
![Page 2: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/2.jpg)
//OBJETIVO
sexta-feira, 16 de agosto de 13
![Page 3: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/3.jpg)
D.O.M de novo ...
document.write(“texto”) // escreve o texto na página
window.innerWidth ou document.documentElement.clientWidth // largura da resolução da tela
window.innerHeight ou document.documentElement.clientHeight // altura da resolução da tela
sexta-feira, 16 de agosto de 13
![Page 4: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/4.jpg)
Location
window.location // url de página atual
.hostname // nome do host
.pathname // caminho sem o hostname
.port // número de porta
.protocol // protocolo (http ou https)
sexta-feira, 16 de agosto de 13
![Page 5: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/5.jpg)
History
window.history.back() // Voltar a página
sexta-feira, 16 de agosto de 13
![Page 6: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/6.jpg)
Navigator
window.navigator // object Navigator
.userAgent // qual navegador
.appName // nome do navegador
.appVersion // versão do navegador
sexta-feira, 16 de agosto de 13
![Page 7: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/7.jpg)
Timing
window.setInterval(function,intervaloTempo) // executa function em um intervalo em milisegundos
window.setTimeout(function,intervaloTempo) // executa function depois de um intervalo de tempo
window.clearTimeout(referenciaSetTimeOut) // timeout = setTimeout(function,1000) clearTimeout(timeout)
window.clearInterval(referenciaSetInterval) // semelhante ao “window.clearTimeout”
sexta-feira, 16 de agosto de 13
![Page 8: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/8.jpg)
Event onload
window.onload = function(){ code } // quando a janela carregar executa a funçao
sexta-feira, 16 de agosto de 13
![Page 9: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/9.jpg)
Criar element Html
document.createElement(nameTag) // criar element com a tag indicada no parametro
[elementHtml].appendChild(element) // adiciona element no elementHtml
document.createTextNode(“text”) // cria um bloco de texto
[elementHtml].removeChild(elementRemove) // remove o element do “pai”
sexta-feira, 16 de agosto de 13
![Page 10: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/10.jpg)
Missão #2
sexta-feira, 16 de agosto de 13
![Page 11: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/11.jpg)
#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, 16 de agosto de 13
![Page 12: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/12.jpg)
index.html
<body></body>
sexta-feira, 16 de agosto de 13
![Page 13: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/13.jpg)
//TODO #1
Escrever na página os dados de largura e altura de resolução do vídeo, url e navegador utilizado.
Caso a largura seja maior que 1024 exibir mensagem na página “resolução está ok”
Caso a largura seja menor que 1024 exibir mensagem na página “aumente sua resolução”
sexta-feira, 16 de agosto de 13
![Page 14: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/14.jpg)
//TODO #2
Crie um input type=”submit” com o “id=botao” e “value=Zerar”.
O input deve está contido em uma div “id=nome”.
A div “id=nome” deve está no body
sexta-feira, 16 de agosto de 13
![Page 15: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/15.jpg)
//TODO #3
Depois de 3 segundo da página já carregada executar o TODO #2.
A cada 5 segundos escreva na tela (div id=”timeout”) o tempo restante, dado que o timeout da página é de 1 min.
Se o timeout atingir 1 min deve parar o contador do tempo e escrever na “div id=timeout” que a página expirou
sexta-feira, 16 de agosto de 13
![Page 16: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/16.jpg)
//TODO #4
Se clicado no input “id=botao”, o timeout da página deve retorna para 1 min.
sexta-feira, 16 de agosto de 13
![Page 17: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/17.jpg)
TIMEBOX
45 Minutos para o CODE
5 Minutos para cada participante apresentar o que fez para os demais
sexta-feira, 16 de agosto de 13
![Page 18: Labs Javascript AIT #2](https://reader033.vdocument.in/reader033/viewer/2022051109/549e6a1eb47959a5608b4594/html5/thumbnails/18.jpg)
sexta-feira, 16 de agosto de 13