Minicurso javascript
-
Upload
lucas-aquiles -
Category
Technology
-
view
846 -
download
3
description
Transcript of Minicurso javascript
![Page 1: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/1.jpg)
Javascript@Lucas_Aquiles
![Page 2: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/2.jpg)
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?
![Page 3: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/3.jpg)
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
![Page 4: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/4.jpg)
Como funciona? Onde isso "roda"?
aqui precisamos só de um browser.
firebug extension
![Page 5: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/5.jpg)
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 */ }
![Page 6: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/6.jpg)
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
![Page 7: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/7.jpg)
Sintaxe básica
Loops○ for, while, do...while, semelhante a sintaxe Java○ enchaced for:
![Page 8: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/8.jpg)
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
![Page 9: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/9.jpg)
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);}
![Page 10: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/10.jpg)
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*
![Page 11: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/11.jpg)
Manipulando Elementos DOM
● Métodos mais comuns para recuperar um elemento DOM
○ document.getElementById('')○ document.currentSelector('#*')○ document.getElementsByTagName()○ document.getElementsByClassName()○ document.getElementsByName()
![Page 12: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/12.jpg)
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
![Page 13: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/13.jpg)
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');
![Page 14: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/14.jpg)
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;
![Page 15: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/15.jpg)
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
![Page 16: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/16.jpg)
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
![Page 17: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/17.jpg)
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;
}
![Page 18: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/18.jpg)
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
![Page 19: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/19.jpg)
Boas práticas
● evite misturar código de interação com código de marcação!
● evite o javascript obstrusivo
![Page 20: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/20.jpg)
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
![Page 21: Minicurso javascript](https://reader034.fdocument.pub/reader034/viewer/2022042510/558b3671d8b42ac0378b457b/html5/thumbnails/21.jpg)
Dojo!
Campo Minado!