Pacote Web - JavaScript

1. AmirtonChagas http://amirton.wordpress.com amirton@proativasolucoes.com Pacote Web - JavaScript

2. Este trabalho está licenciado sob uma Licença CreativeCommons Atribuição 2.5 Brasil. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by/2.5/br/ ou envie uma carta para CreativeCommons, 171 SecondStreet, Suite 300, San Francisco, California 94105, USA.

3. HTML+CSS = Estático • Não tem lógica • Apenasposicionamento/layout

4. Javascript • Provêlógica • Dinâmicapara o documento • Client-Side • Enriquece a experiência do usuário • As vezesatrapalha… • JavaScript IS NOT Java!

5. Tags - <script> • O código JavaScript podeestar • No documento • <script type=“text/javascript”>function olaMundo(){ alert(‘Hello World!’);} • Emarquivoseparado • <script type=“text/javascript” src=“olaMundo.js”>

6. ProgramandoemJavascript

7. Variaveis • Espaço de memóriautilizadoparaarmazenar um valor • Nome davariável é case-sensitive • pacoteWeb != pacoteweb • Nãotipado • Não é necessáriodeclarar a variável • CUIDADO! • varcontador = 1;Contador++; • Rodasemerros e dádor de cabeçaparadescobrirporquenãoestáfuncionando…

8. Funções • Bloco de operações a seremrealizadasemsequência • Podemrecebervalores(parâmetros) • alert(‘Texto do alerta’); • Podemretornaralgum valor • confirm(‘Realmentedesejacontinuar?’) • Retornaverdadeiro se o usuárioescolheuSim, falsocasocontrário

9. OperadoresLógicos • Comparamdoiselementos, retornando true ou false • == Igual • != Diferente • > Maior • >= Maiorouigual • < Menor • <= Menorouigual • && E (todos true pararetornar true) • || Ou (pelomenos um true pararetornar true)

10. Condicionais • Um script tem um fluxo de execução • Deve ser necessárioparaeleescolhercertostrechos de códigoparaseremexecutados no momentoapropriado • Execuçãocondicional serve exatamenteparaestepropósito • Testa-se umacondição, e executa-se o código de acordo com o resultadodesteteste.

11. Condicionais - If • if (condição) { //códigoexecutado se a condição for verdadeira} else if (outracondição) {//códigoexecutado se “condição” é falso e “outracondição” for verdadeiro} else {//códigoexecutado se todas as condiçõestestadasforemfalsas}

12. Condicionais – Switch/case • Semelhanteao if • Usadoquando o comportamentovaria de acordo com diferentesvaloresqueumaúnicavariávelpodeassumir

13. Loop • Os scripts geralmenteprecisamexecutartarefasiguaisrepetidasvezesparavaloresdiferentes • Controles de loop realizamisto de forma controlada

14. Loop - While • while(condicao){//códigoexecutadoenquanto a condição for verdadeira} • Cuidado… condiçãopodenuncaficarfalsa • Loop infinito • Códigopodenunca ser executado • Condiçãopode ser falsanaprimeiraexecução

15. Loop – Do While • do { //código a ser executado} while (condição) • Semelhante a While • Com a garantiaque o códigoseráexecutadopelomenosumavez

16. Loop - For • for (vari = 0; i < 10; i++){//Códigoque, a princípio, seráexecutado 10 vezes} • Maiscontroladoque o while • Cuidadoparanãoalterarindiscriminadamente o valor do contador no código • Loop infinito…

17. Loop - break • As vezes é necessárioquebrar um loop antes do esperado • Antes dacondiçãoficarfalsa • Antes do contadorchegaraolimite • Break fazisto • Cuidado • Legibilidade do códigopode ser prejudicada

18. OperadoresMatemáticos • + Adição • - Subtração • * Multiplicação • / Divisão • % Restodadivisãointeira • ++ Incrementoem 1 • -- Decrementoem 1

19. FunçõesMatemáticas • Classe Math • Math.pow(x,y) = xy • Math.min(x,y) = menor entre x e y • Math.max(x,y) = maior entre x e y • Math.random = numeroaleatório • [0,1) • Veroutras no autocomplete do Aptana

20. Eventos • São acontecimentosqueocorremenquanto a páginaestásendocarregada e exibida no browser • Podem ser ações do usuário, como um clique • Podem ser fases do ciclo de vidadapágina, como a conclusão do carregamentodo documento • Cada tag suporta o disparo de determinadoseventos • Antes de usar, verificarreferênciaem [[W3 School]]

21. Objeto window • O script podemanipular a janela do browser quecontém o seudocumento • O objeto window serve exatamenteparaexporospontosque o script podemanipular

22. Objeto window • window.alert(‘aviso’); • Mostra um alertapara o usuário • window.confirm(‘pergunta’); • Mostraumaperguntapara o usuário. Retorna true se o usuárioescolherSim, false casocontrário • window.prompt(‘pergunta’, ‘valor padrao’) • Fazumaperguntaaousuário, esperandoumarespostaemtexto. Retorna o textodigitadopelousuário.

23. Objeto window • window.location = ‘http://www.cin.ufpe.br’ • Leva a janela do usuário à URL especificada • window.back() / window.forward() • Mesmoqueclicar no botãovoltar/avançar do browser • window.close() • Fecha a janela • Alguns browsers pedemconfirmação do usuário • Exploraroutros no Aptana

24. Objeto document • Representação do documento • document.write(‘código HTML’) • Injetacódigo no documento • document.writeln(‘código HTML’) • Injetaumalinha de código no documento • document.getElementById(‘id’) • Retorna o elementoda id informada

25. Propriedades de imagens

26. Propriedades de elementos de forms

27. Problemas de Javascript • Incompatibilidade entre browsers • Dificuldadeparaescrevercódigossimples • Linguagem error-prone

28. jQuery • Soluçãoparaosproblemascitados • Facilitamanipulaçãodapágina • Funçõesparaalterar a estruturadapáginaabstraindo a complexidade do DOM

29. Termo de Exoneração de Responsabilidade • A Licença Simplificada não é uma licença propriamente dita. Ela é apenas uma referência útil para entender a Licença Jurídica (a licença integral) - ela é uma expressão dos seus termos-chave que pode ser compreendida por qualquer pessoa. A Licença Simplifica em si não tem valor legal e seu conteúdo não aparece na licença integral. • O CreativeCommons não é um escritório de advocacia e não presta serviços jurídicos. A distribuição, exibição ou inclusão de links para esta Licença Simplificada não estabelece qualquer relação advocatícia.