O documento apresenta um roteiro sobre Javascript, abordando tópicos como: 1) introdução e funcionamento, 2) sintaxe básica com variáveis, arrays e funções, 3) manipulação de elementos DOM, 4) orientação a objetos, 5) eventos, 6) depuração e testes, 7) boas práticas e 8) bibliotecas como jQuery e Dojo, com exemplo do jogo Campo Minado.

1. Javascript
@Lucas_Aquiles

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. Bibliotecas
10. Dojo
a. jogo Campo minado, quem lembra?

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. Como funciona? Onde isso "roda"?
aqui precisamos só de um browser.
firebug extension

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. Sintaxe básica
Arrays
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. Sintaxe básica
Loops
○ for, while, do...while, semelhante a sintaxe Java
○ enchaced for:

8. Sintaxe básica
Functions
○ 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. 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. 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. Manipulando Elementos DOM
● Métodos mais comuns para recuperar um
elemento DOM
○ document.getElementById('')
○ document.currentSelector('#*')
○ document.getElementsByTagName()
○ document.getElementsByClassName()
○ document.getElementsByName()

12. Manipulando Elementos DOM
com um HtmlElement pode se navegar entre
os elementos
.parentNode - retorna o elemento anterior
.chidren - retorna todos os elementos filhos
.style - modifica propriedades CSS
.innerHTML - insere um conteudo

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. 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. 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. Eventos
var nomeDaVar.onClick = function(){
alert('opa');
}
ou
function 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 o
attachEvent

17. Eventos
DOMEventElement
EventObject - retorna informações sobre o
objeto em que foi feita interação
var aLink = document.getElementById('link');
var eventObj = null;
aLink.onclick = function(ev){
eventObj = ev;
return false;
}

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. Boas práticas
● evite misturar código de interação com
código de marcação!
● evite o javascript obstrusivo

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. Dojo!
Campo Minado!