Javascript
Revolução na Web
História
Desenvolvido por Brendan Eich da Netscape sob o nome de Mocha.
Desenvolvida em pouco tempo, aproveitando características de outras linguagens
Nome mudou por uma estratégia de marketing da Netscape para aproveitar a
popularidade do recém-lançado Java. (Malditos)
Adquiriu ampla aceitação pelos navegadores como linguagem client-side
Microsoft usa JScript para evitar problemas de marca registrada
Hoje é mantida pela Mozilla Foundation
Padronização
Características
Tipificação fraca
Objetos
Funções
Escopo de variáveis
Closures
Herança prototípica
Tipificação Fraca
Objetos
 Simplesmente uma coleção de chaves e valores
 Tudo em Javascript são objetos: funções, arrays, expressões regulares etc
var cliente = new Object;
cliente.nome = "João";
cliente.sobrenome = "Silva";
console.log(cliente.nome + ' ' + cliente.sobrenome);
Objetos Literais
var cliente = {
nome: 'João',
telefones: {
residencial: '45323324',
celular: '948298388'
}
};
console.log(cliente["nome"]);
console.log(cliente.telefones.celular);
Funções
 Funções são objetos de primeira classe
 Podem ser armazenadas em varáveis:
var show = function (mensagem) {
console.log(mensagem);
};
show("Ola");
Funções
 Podem ser passadas por parâmetro:
function executarFuncao(funcao, texto) {
funcao(texto);
}
executarFuncao(alert, "Ola mundo");
Funções
 Podem ser retornadas por outras funções:
function alertar(mensagem) {
return function () { alert(mensagem); };
}
var showAlerta = alertar("ola mundo");
showAlerta();
Escopo de Variáveis
 Escopo global, escopo de função exterior e escopo local
 Todos objeto criado é colocado em um escopo global (péssimo)
var nome = 'João';//Escopo global (mesmo)
function ComporNome() {
var sobrenome = 'Silva'; //Escopo local
console.log(nome + ' ' + sobrenome);
}
Escopo de Variáveis
 Minimizando problema de variáveis globais
var app = {};
app.hotpoint = {
pessoa: {
nome: 'Joao'
}
};
console.log(app.hotpoint.pessoa.nome);
Closures
 Blocos de código que tem a capacidade de guardar o contexto no qual eles foram
criados, mesmo quando a função que criou esse bloco já saiu de escopo.
function geraSomador(numero) {
return function (x) { return x + numero; };
}
var soma5 = geraSomador(5);
console.log(soma5(5)); //10
Herança Prototípica
 Javascript não possui classes, todo objeto é ligado a um protótipo de outro objeto no
qual pode herdar propriedades.
 Todos objetos criado de literais são associados a Object.prototype
String.prototype.log = function () {
console.log(this.toString());
};
'ola mundo'.log();
Partes Ruins
==
'' == ‘0 false
0 == '' true
0 == ‘0' true
false == ‘false' false
false == ‘0' true
false == undefined false
false == null false
null == undefined true
‘ trb ‘ == 0 true
 Quando operadores de tipos
diferentes, tenta fazer a coversão
de tipo
 Usar sempre operador ternário:
=== !==
JSLint
 Ferramenta de qualidade de código.
 Ajuda a identificar problemas e retorna aonde estão os pontos problemáticos no
código
 Fundamental para garantir a qualidade do desenvolvimento
 Pode-se desligar algumas opções de análise
 http://www.jslint.com/
Conclusões
 Pode-se cumprir uma tarefa sem ter que conhecer muito a linguagem
 Conhecer a natureza da linguagem é fundamental para o desenvolvimento de
aplicações mais complexas
 Tipificação fraca induz ao erro, porém com prática e disciplina por parte do
programador torna-se libertadora
 Existem alguns erros de projeto na linguagem que podem ser contornados
 Ganhando mercado com novas tecnologias
Referências
 O Melhor do Javascript – Duglas Cockford
 Functional Javascript – Michael Fogus
 http://vimeo.com/30569658
 http://loopinfinito.com.br/
 http://javascriptbrasil.com/

Javascript

  • 1.
  • 2.
  • 3.
    História Desenvolvido por BrendanEich da Netscape sob o nome de Mocha. Desenvolvida em pouco tempo, aproveitando características de outras linguagens Nome mudou por uma estratégia de marketing da Netscape para aproveitar a popularidade do recém-lançado Java. (Malditos) Adquiriu ampla aceitação pelos navegadores como linguagem client-side Microsoft usa JScript para evitar problemas de marca registrada Hoje é mantida pela Mozilla Foundation
  • 4.
  • 5.
  • 6.
  • 7.
    Objetos  Simplesmente umacoleção de chaves e valores  Tudo em Javascript são objetos: funções, arrays, expressões regulares etc var cliente = new Object; cliente.nome = "João"; cliente.sobrenome = "Silva"; console.log(cliente.nome + ' ' + cliente.sobrenome);
  • 8.
    Objetos Literais var cliente= { nome: 'João', telefones: { residencial: '45323324', celular: '948298388' } }; console.log(cliente["nome"]); console.log(cliente.telefones.celular);
  • 9.
    Funções  Funções sãoobjetos de primeira classe  Podem ser armazenadas em varáveis: var show = function (mensagem) { console.log(mensagem); }; show("Ola");
  • 10.
    Funções  Podem serpassadas por parâmetro: function executarFuncao(funcao, texto) { funcao(texto); } executarFuncao(alert, "Ola mundo");
  • 11.
    Funções  Podem serretornadas por outras funções: function alertar(mensagem) { return function () { alert(mensagem); }; } var showAlerta = alertar("ola mundo"); showAlerta();
  • 12.
    Escopo de Variáveis Escopo global, escopo de função exterior e escopo local  Todos objeto criado é colocado em um escopo global (péssimo) var nome = 'João';//Escopo global (mesmo) function ComporNome() { var sobrenome = 'Silva'; //Escopo local console.log(nome + ' ' + sobrenome); }
  • 13.
    Escopo de Variáveis Minimizando problema de variáveis globais var app = {}; app.hotpoint = { pessoa: { nome: 'Joao' } }; console.log(app.hotpoint.pessoa.nome);
  • 14.
    Closures  Blocos decódigo que tem a capacidade de guardar o contexto no qual eles foram criados, mesmo quando a função que criou esse bloco já saiu de escopo. function geraSomador(numero) { return function (x) { return x + numero; }; } var soma5 = geraSomador(5); console.log(soma5(5)); //10
  • 15.
    Herança Prototípica  Javascriptnão possui classes, todo objeto é ligado a um protótipo de outro objeto no qual pode herdar propriedades.  Todos objetos criado de literais são associados a Object.prototype String.prototype.log = function () { console.log(this.toString()); }; 'ola mundo'.log();
  • 16.
  • 17.
    == '' == ‘0false 0 == '' true 0 == ‘0' true false == ‘false' false false == ‘0' true false == undefined false false == null false null == undefined true ‘ trb ‘ == 0 true  Quando operadores de tipos diferentes, tenta fazer a coversão de tipo  Usar sempre operador ternário: === !==
  • 18.
    JSLint  Ferramenta dequalidade de código.  Ajuda a identificar problemas e retorna aonde estão os pontos problemáticos no código  Fundamental para garantir a qualidade do desenvolvimento  Pode-se desligar algumas opções de análise  http://www.jslint.com/
  • 19.
    Conclusões  Pode-se cumpriruma tarefa sem ter que conhecer muito a linguagem  Conhecer a natureza da linguagem é fundamental para o desenvolvimento de aplicações mais complexas  Tipificação fraca induz ao erro, porém com prática e disciplina por parte do programador torna-se libertadora  Existem alguns erros de projeto na linguagem que podem ser contornados  Ganhando mercado com novas tecnologias
  • 20.
    Referências  O Melhordo Javascript – Duglas Cockford  Functional Javascript – Michael Fogus  http://vimeo.com/30569658  http://loopinfinito.com.br/  http://javascriptbrasil.com/