Minicurso javascript
-
Upload
lucas-aquiles -
Category
Technology
-
view
848 -
download
3
description
Transcript of Minicurso javascript
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!