Javascript@Lucas_Aquiles

Roteiro1. WTF javascript?2. como funciona? como "instala"? isso "roda" onde?3. Sintaxe básica

a. variáveis, arrays, loops, functions4. manipulando elementos DOM5. Javascript OO?

a. em, OO?b. o prototypec. os métodos call() e apply()

6. Events7. Debbugin e Testing

a. tem jUnit?b. Firebug (firefox), element inspect (chrome)

8. Boas práticas9. Bibliotecas

10. Dojoa. jogo Campo minado, quem lembra?

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

Como funciona? Onde isso "roda"?

aqui precisamos só de um browser.

firebug extension

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..elseobs: valores nulos podem ser colocados direto na condição:ex: var test = null;

if(!test){ /* faz alguma coisa */ }

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

Sintaxe básica

Loops○ for, while, do...while, semelhante a sintaxe Java○ enchaced for:

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

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);}

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*

Manipulando Elementos DOM

● Métodos mais comuns para recuperar um elemento DOM

○ document.getElementById('')○ document.currentSelector('#*')○ document.getElementsByTagName()○ document.getElementsByClassName()○ document.getElementsByName()

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

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');

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;

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

Eventosvar 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

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;

}

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

Boas práticas

● evite misturar código de interação com código de marcação!

● evite o javascript obstrusivo

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

Dojo!

Campo Minado!