Tdc2010 web

Globalcode – Open4education

Javascript: A linguagem do futuroRamon Felipe de OliveiraAnalista de Sistema Softplan

SCJA - SCJP - SCWCD

Globalcode – Open4education

Agenda

História Linguagens

Scripting X Não Scripting

Javascript

Patterns

Testes

ECMAScript 5

Globalcode – Open4education

No começo... assembly

Baixo Nível

1 linha código = 1 instrução de máquina

Detalhes de máquina

Globalcode – Open4education

Depois...

Linguagens de maior nível

Abstraem detalhes de máquina

Forte tipagem

Fortan, Algol e depois C, C++, java

Globalcode – Open4education

Depois...

Um pouco menos eficientes

1 linha código = 5 instrução de máquina

1000 X 5000

Globalcode – Open4education

Um pouco depois...

Scripting

Fraca tipagem

Interpretada

1 linha código = 20 instrução de máquina

Globalcode – Open4education

Forte tipagem é bom?

Tipos ajudam a gerenciar complexidade

Permite otimização pela dimuição de verificação runtime

Importante com estruturas e algoritmos complexos

Globalcode – Open4education

Scripting

Maior flexibilidade

Maior velocidade de desenvolvimento

Um pouco mais lentas

Globalcode – Open4education

Cada macaco no seu ganho

SPLCriacão de componentes

Scripting União de componentes

Globalcode – Open4education

Scriptings em ascensão?

Aumento da importância de GUI

Aumento da aplicabilidade

Internet

Linguagens scripting melhores

Globalcode – Open4education

Caixa de Skinner

Skinner

“O problema com falsos padrões”

Globalcode – Open4education

Comparativo desenvolvimento

Globalcode – Open4education

Globalcode – Open4education

Origens

Javascript surgiu em 1995 e quando lançado se chamava LiveScript

Brendan Eich

Brendan Eich

Globalcode – Open4education

Características

Pequena

Interpretada (compilada)

Sofisticada

Linguagem cliente

Baixa tipagem

Objetos são “containers”

Herança por protótipos

Globalcode – Open4education

Objeto em JS

Globalcode – Open4education

Sintaxe Literal

var obj = {

nome: “Fusca",

detalhes: {

cor: “vermelho",

ano: 1988

}

}

Globalcode – Open4education

Functions

Globalcode – Open4education

Functions

Globalcode – Open4education

Função add

function add(x, y) {

var total = x + y;

return total;

}

Globalcode – Open4education

Função add

var add = function(x, y) {

var total = x + y;

return total;

}

Globalcode – Open4education

Globalcode – Open4education

function add() { var soma = 0;

for (var i = 0, j = arguments.length; i < j; i++) {

soma += arguments[i];

}

return soma;

}

Globalcode – Open4education

Herança por Protótipo

Globalcode – Open4education

Herança por Protótipo

Globalcode – Open4education

Problema

Globalcode – Open4education

function criarPessoa(nome, sobrenome) { return { nome: nome, sobrenome: sobrenome }}function nomeCompleto(pessoa) {

return pessoa.nome + ‘ ‘ + pessoa.sobrenome;

} function nomeCompletoInvertido(pessoa) {

return pessoa.sobrenome + ', ' + pessoa.nome;

}

Solução 1

Globalcode – Open4education

> p = criarPessoa(“João", “Silva"); > nomeCompleto(p) João Silva> nomeCompletoInvertido(p) Silva, João

Apesar de funcionar, não é uma solução interessante.

Provavelmente, logo existirá dezenas de funções no global namespace.

Globalcode – Open4education

function criarPessoa(nome, sobrenome) { return { nome: nome,

sobrenome : sobrenome, nomeCompleto: function() {

return this.nome + ‘ ‘ + this.sobrenome; }, nomeCompletoInvertido: function() { return this.sobrenome + ', ' + this.nome; } }}

Solução 2

Globalcode – Open4education

> s = criarPessoa(“João", “Silva")> s. nomeCompleto() João Silva > s. nomeCompletoInvertido() Silva, João

Globalcode – Open4education

Solução 3function Pessoa(nome, sobrenome) { this.nome = nome; this.sobrenome = sobrenome;}Pessoa.prototype.nomeCompleto = function() { return this.nome+ ' ' + this.sobrenome;}Pessoa.prototype.nomeCompletoInverso =

function() { return this.sobrenome + ', ' + this.nome;}

Globalcode – Open4education

Prototype

Globalcode – Open4education

Closures

function realizaSoma(a) {

return function(b) {

return a + b;

}

}

x = realizaSoma(5);

y = realizaSoma(20);

x(6) ? y(7) ?

Globalcode – Open4education

Patterns

Old school

Revealing Pattern

Custom Objects

Module Pattern

Lazy Function Definition

Globalcode – Open4education

Revealing Pattern

Ver Exemplo

Globalcode – Open4education

TDD e javascript

JsUnit, um framework para teste de unidade JsUnit é um open source framework, inspirado no jUnit e escrito inteiramente em javascript

JsMock, um Mock Object Library para JavaScriptJSMock é um Mock Object library para JavaScript que fornece ferramentas necessárias para efetivos testes interativos.

Globalcode – Open4education

ECMAScript 5

Strict Mode

Extensibilidade de objetos configuráveis

Suporte JSON

Principais browsers vão dar suporte integral

Globalcode – Open4education

Perguntas?

Globalcode – Open4education

` Obrigado!

Globalcode – Open4education

Referências

http://docs.jquery.com

http://www.json.org/

http://developer.yahoo.com/yui/theater/

https://developer.mozilla.org/en/javascript

http://javascript.crockford.com/High Performance Web Sites :: Browser Performance Wishlist

Best Practices for Speeding Up Your Web Site

http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/

http://www.artzstudio.com/2009/04/jquery-performance-rules/

http://www.tcl.tk/doc/scripting.html