Escolar Documentos
Profissional Documentos
Cultura Documentos
@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
firebug extension
Sintaxe bsica
sintaxe bem parecida com Java variveis
no obrigado definir tipos, basta declarar
loops if..else
obs: valores nulos podem ser colocados direto na condio: ex: var test = null; if(!test){ /* faz alguma coisa */ }
Sintaxe bsica
Arrays
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
funes podem receber funes como parametro uma varivel pode armazenar uma function
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*
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!