Minicurso javascript

1.201 visualizações

Publicada em

Apresentação feita no Dojo de Javascript na Infoway e-health company

Publicada em: Tecnologia
2 comentários
2 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.201
No SlideShare
0
A partir de incorporações
0
Número de incorporações
347
Ações
Compartilhamentos
0
Downloads
24
Comentários
2
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Minicurso javascript

  1. 1. Javascript@Lucas_Aquiles
  2. 2. Roteiro 1. WTF javascript? 2. como funciona? como "instala"? isso "roda" onde? 3. Sintaxe básica a. variáveis, arrays, loops, functions 4. manipulando elementos DOM 5. Javascript OO? a. em, OO? b. o prototype c. os métodos call() e apply() 6. Events 7. Debbugin e Testing a. tem jUnit? b. Firebug (firefox), element inspect (chrome) 8. Boas práticas 9. Bibliotecas10. Dojo a. jogo Campo minado, quem lembra?
  3. 3. WTF Javascript?● baseada em protótipos● usada tanto no cliente-side como em server- side (node.js, commonjs)● no browser é utilizada para criar interações com elementos da página (ajax, css,...)● tem até JVM implementada em javascript - Rhino
  4. 4. Como funciona? Onde isso "roda"?aqui precisamos só de um browser. firebug extension
  5. 5. Sintaxe básica● sintaxe bem parecida com Java● variáveis ○ não é obrigado definir tipos, basta declarar ○ possui tipagem fraca● loops ○ for, while, do...while, enhaced for● if..else obs: valores nulos podem ser colocados direto na condição: ex: var test = null; if(!test){ /* faz alguma coisa */ }
  6. 6. Sintaxe básicaArrays métodos descrição forEach(function(){ }) percorre os elementos do array length tamanho do array push() adiciona um elemento na última posição pop() remove um elemento
  7. 7. Sintaxe básicaLoops ○ for, while, do...while, semelhante a sintaxe Java ○ enchaced for:
  8. 8. Sintaxe básicaFunctions ○ declaração simples: function doSomething(){ alert(opa); } ○ funções podem receber funções como parametro ○ uma variável pode armazenar uma function *funções podem ser usadas como construtor
  9. 9. Manipulando Elementos DOM ○ o que é DOM? ■ Modelo de Objecto de Documento ■ métodos que permitem modificar, alterar, remover um elemento do documento que está trabalhando através do DOM ■ Linguagem neutra? ● como assim? se só é usado pra manipular elementos DOM com javascript? ■ E o que faz o que em um documento? ● ex: var div = document.getElementsByTagName(div); for(var i = 0; i < div.length; i++){ console.log(div[i].innerHTML); }
  10. 10. Manipulando Elementos● o objeto document ○ através do objeto document é possivel manipular, criar ou remover qualquer elemento ○ criar ● document.createElement(div); ● document.appendChild(element); ○ recuperar ● document.getElementBy* ● document.getElementsBy*
  11. 11. Manipulando Elementos DOM● Métodos mais comuns para recuperar um elemento DOM ○ document.getElementById() ○ document.currentSelector(#*) ○ document.getElementsByTagName() ○ document.getElementsByClassName() ○ document.getElementsByName()
  12. 12. Manipulando Elementos DOMcom um HtmlElement pode se navegar entreos elementos .parentNode - retorna o elemento anterior .chidren - retorna todos os elementos filhos .style - modifica propriedades CSS .innerHTML - insere um conteudo
  13. 13. Javascript OO● é possivel trabalhar com construtores, métodos e literais de objetos● functions podem ser usadas como um construtor function LionMan(cor){ this.cor = cor; this.modeNinja = false; } var lionMan = new LioMan(branco);
  14. 14. Javascript OO● e podem usar métodos através do prototype function ativaLionManMode(){ this.modeNinja = true; console.log("Lion Man, uma dádiva dos ninjas!"); } LionMan.prototype.ativarLionManMode = ativaLionManMode;
  15. 15. Javascript OO● function call(); ■ invoca a função e usa o primeiro parametro como "this";● function apply(); ■ praticamente a mesma coisa, exceto que no segundo parametro é preciso passar um Array
  16. 16. Eventosvar nomeDaVar.onClick = function(){ alert(opa);}oufunction fazAlgumaCoisa(){ return "lion man";}var aElement = document.currentSelector("#link");aElement.addEventListener(click, fazAlgumaCoisa, false);*o addEventListener nem existe nas versões antigas do IE, tem que usar oattachEvent
  17. 17. EventosDOMEventElement EventObject - retorna informações sobre oobjeto em que foi feita interação var aLink = document.getElementById(link); var eventObj = null; aLink.onclick = function(ev){ eventObj = ev; return false; }
  18. 18. Testing e Debbuging● Testing ○ existems bibliotecas javascript - jSUnit ○ com a função console, também é possivel fazer debug e asserts de objetos javascript ○ as extensões (firebug) e ferramentas do browser que permimte inspecionar e debugar objetos javascript
  19. 19. Boas práticas● evite misturar código de interação com código de marcação!● evite o javascript obstrusivo
  20. 20. Bibliotecas● jQuery ○ a mais popular, simples para manipular elementos DOM e criar animações ○ jquery.com● Coffee Script ○ http://coffeescript.org/ ○ uma linguagem com marcação própria que compila o código para Javascript
  21. 21. Dojo!Campo Minado!

×