Javascript

@Lucas_Aquiles

Roteiro
1. 2. 3. 4. 5. WTF javascript? como funciona? como "instala"? isso "roda" onde? Sintaxe bsica a. variveis, arrays, loops, functions manipulando elementos DOM Javascript OO? a. em, OO? b. o prototype c. os mtodos call() e apply() Events Debbugin e Testing a. tem jUnit? b. Firebug (firefox), element inspect (chrome) Boas prticas Bibliotecas Dojo a. jogo Campo minado, quem lembra?

6. 7.

8. 9. 10.

WTF Javascript?
baseada em prottipos usada tanto no cliente-side como em serverside (node.js, commonjs) no browser utilizada para criar interaes com elementos da pgina (ajax, css,...) tem at JVM implementada em javascript Rhino

Como funciona? Onde isso "roda"?

aqui precisamos s de um browser.

firebug extension

Sintaxe bsica
sintaxe bem parecida com Java variveis

no obrigado definir tipos, basta declarar

possui tipagem fraca for, while, do...while, enhaced for

loops if..else
obs: valores nulos podem ser colocados direto na condio: ex: var test = null; if(!test){ /* faz alguma coisa */ }

Sintaxe bsica

Arrays

mtodos forEach(function(){ }) length push() pop()

descrio percorre os elementos do array tamanho do array adiciona um elemento na ltima posio remove um elemento

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

Sintaxe bsica
Functions

declarao simples: function doSomething(){ alert('opa'); }

funes podem receber funes como parametro uma varivel pode armazenar uma function

*funes podem ser usadas como construtor

Manipulando Elementos DOM

o que DOM?
Modelo de Objecto de Documento mtodos que permitem modificar, alterar, remover um elemento do documento que est trabalhando atravs 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
atravs 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

Mtodos 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, mtodos 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 mtodos atravs do prototype
function ativaLionManMode(){ this.modeNinja = true; console.log("Lion Man, uma ddiva dos ninjas!"); } LionMan.prototype.ativarLionManMode = ativaLionManMode;

Javascript OO
function call();
invoca a funo e usa o primeiro parametro como "this";

function apply();
praticamente a mesma coisa, exceto que no segundo parametro preciso passar um Array

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 verses antigas do IE, tem que usar o attachEvent

Eventos
DOMEventElement EventObject - retorna informaes sobre o objeto em que foi feita interao
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 funo console, tambm possivel fazer debug e asserts de objetos javascript as extenses (firebug) e ferramentas do browser que permimte inspecionar e debugar objetos javascript

Boas prticas
evite misturar cdigo de interao com cdigo de marcao! evite o javascript obstrusivo

Bibliotecas
jQuery
a mais popular, simples para manipular elementos DOM e criar animaes jquery.com

Coffee Script
http://coffeescript.org/ uma linguagem com marcao prpria que compila o cdigo para Javascript

Dojo!

Campo Minado!