Javascript
The good, bad and ugly parts
Fabian Carlos
Meoapp
Prospecta-me
Uma linguagem
confusa e subestimada
Você pode fazer uma aplicação
web, mobile e desktop em Javascript.
Particularidades
● Não tem classes apenas objetos
● Notação literal de objetos
● boolean, number e string
● null e undefin...
Partes ruins
● Programação baseadas em variáveis globais
● + para adição e concatenação
● Escopo estranho
● == e !=
Descobrindo os tipos
typeof "Douglas Crockford" // "string"
typeof 1999 // "number"
typeof {} // "object"
typeof [1,2,3,4,...
É igual?
'' == '0' // false
0 == '0' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == 0 //...
Agora sim é igual!
'' === '0' // false
0 === '0' // false
0 === '0' // false
false === 'false' // false
false === '0' // f...
Números
0.1 + 0.2 === 0.3 // false ???
0.1 + 0.2 == 0.3 // false ???
// 0.1 + 0.2 -> 0.30000000000000004
Números
● Number 64-bit floating point
● Semelhante a Double em Java
Hoisting
● As variáveis dentro de uma função, irão agir como se tivessem sido
declaradas no topo da função.
meu_var = "glo...
Parecia uma boa ideia, só que não
● Omitir ponto e virgula
● Blocos sem chaves
● false, null, undefined, NaN e Infinity
Onde usar ponto e virgula
// Não precisa de ponto e virgula
if (...) {...} else {...}
for (...) {...}
while (...) {...}
//...
Blocos sem chaves
if (true)
console.log("OK");
else
console.log("OK TOO");
Blocos com chaves
if (true){
console.log("OK");
}else{
console.log("OK TOO");
}
Onde colocar a chave
if (true) {
console.log("OK");
}
if (true)
{
console.log("OK");
}
Onde colocar a chave
function cosmos(){
return
{
name: "Carl sagan"
}
}
Onde colocar a chave
function cosmos(){
return undefined;
{
name: "Carl sagan"
}
}
Onde colocar a chave
function cosmos(){
return {
name: "Carl sagan"
}
}
Partes boas
● Tipificação fraca.
● Objetos dinâmicos.
● Declaração de objetos literais.
Tipificação fraca
var nome = "Nicolas Tesla";
var idade = 43;
var peso = 75.7;
var cientista = true;
console.log(nome); //...
Objetos dinâmicos
var data = {
'one': 1,
'two': 2,
'three': 3
};
data["four"] = 4;
console.log(data.four); // 4
console.lo...
Objetos literais
var pessoa_literal = {
init: function (nome) {
this.nome = nome;
}
};
var pessoa_literal = pessoa_literal...
Objetos construtores
function PessoaConstrutor(nome) {
this.nome = nome;
}
var pessoa_construtor = new PessoaConstrutor('N...
Novas boas partes em ES6
● let
● Arrow Functions ou Fat Arrows.
● Default Arguments.
● Template Strings.
Let
● Não existe o comportamento de hoisting.
let cientista = true;
if (cientista) {
let nome = 'Neil Tyson';
console.log(...
Arrow Functions
// Convencional
var soma = function(x, y) {
return x + y;
};
// ES6
var soma = (x, y) => x + y;
soma(5, 5)...
Default arguments
// CoffeeScript
cientista = (nome = "Carl Sagan") ->
console.log(nome)
// ES6
var cientista = function(n...
Template Strings
var old_cosmos = "Carl Sagan"
var new_cosmos = "Neil deGrasse Tyson"
` Cosmos, é uma série americana de d...
The best is yet to come
Próximos SlideShares
Carregando em…5
×

Javascript The good, bad and ugly parts

327 visualizações

Publicada em

Todas linguagens tem suas partes boas e ruins, e com Javascript a coisa pode ficar realmente feia se for mal compreendida. Vamos falar de como surgiu e que rumo tomou até os dias de hoje de uma amada e odiada linguagem, o Javascript.

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
327
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Javascript The good, bad and ugly parts

  1. 1. Javascript The good, bad and ugly parts Fabian Carlos Meoapp Prospecta-me
  2. 2. Uma linguagem confusa e subestimada
  3. 3. Você pode fazer uma aplicação web, mobile e desktop em Javascript.
  4. 4. Particularidades ● Não tem classes apenas objetos ● Notação literal de objetos ● boolean, number e string ● null e undefined
  5. 5. Partes ruins ● Programação baseadas em variáveis globais ● + para adição e concatenação ● Escopo estranho ● == e !=
  6. 6. Descobrindo os tipos typeof "Douglas Crockford" // "string" typeof 1999 // "number" typeof {} // "object" typeof [1,2,3,4,5] // "object" ??? typeof null // "object" ??? typeof NaN // "object" ???
  7. 7. É igual? '' == '0' // false 0 == '0' // true 0 == '0' // true false == 'false' // false false == '0' // true false == 0 // true false == undefined // false false == null // false null == undefined // true " trn " == 0 // true
  8. 8. Agora sim é igual! '' === '0' // false 0 === '0' // false 0 === '0' // false false === 'false' // false false === '0' // false false === 0 // false false === undefined // false false === null // false null === undefined // false " trn " === 0 // false
  9. 9. Números 0.1 + 0.2 === 0.3 // false ??? 0.1 + 0.2 == 0.3 // false ??? // 0.1 + 0.2 -> 0.30000000000000004
  10. 10. Números ● Number 64-bit floating point ● Semelhante a Double em Java
  11. 11. Hoisting ● As variáveis dentro de uma função, irão agir como se tivessem sido declaradas no topo da função. meu_var = "global"; function func(){ console.log(meu_var); // undefined, o mesmo que var my_name = undefined; var meu_var = "local"; console.log(meu_var); // local } func();
  12. 12. Parecia uma boa ideia, só que não ● Omitir ponto e virgula ● Blocos sem chaves ● false, null, undefined, NaN e Infinity
  13. 13. Onde usar ponto e virgula // Não precisa de ponto e virgula if (...) {...} else {...} for (...) {...} while (...) {...} // Precisa de ponto e virgula var x = 1; var fun = function() {...}; var obj = {};
  14. 14. Blocos sem chaves if (true) console.log("OK"); else console.log("OK TOO");
  15. 15. Blocos com chaves if (true){ console.log("OK"); }else{ console.log("OK TOO"); }
  16. 16. Onde colocar a chave if (true) { console.log("OK"); } if (true) { console.log("OK"); }
  17. 17. Onde colocar a chave function cosmos(){ return { name: "Carl sagan" } }
  18. 18. Onde colocar a chave function cosmos(){ return undefined; { name: "Carl sagan" } }
  19. 19. Onde colocar a chave function cosmos(){ return { name: "Carl sagan" } }
  20. 20. Partes boas ● Tipificação fraca. ● Objetos dinâmicos. ● Declaração de objetos literais.
  21. 21. Tipificação fraca var nome = "Nicolas Tesla"; var idade = 43; var peso = 75.7; var cientista = true; console.log(nome); // "Nicolas Tesla" console.log(idade); // 43 console.log(peso); // 75.7 console.log(cientista); // true
  22. 22. Objetos dinâmicos var data = { 'one': 1, 'two': 2, 'three': 3 }; data["four"] = 4; console.log(data.four); // 4 console.log(data["four"]); // 4
  23. 23. Objetos literais var pessoa_literal = { init: function (nome) { this.nome = nome; } }; var pessoa_literal = pessoa_literal; pessoa_literal.nome = "Neil Tyson'" var pessoa_literal_2 = pessoa_literal; pessoa_literal_2.nome = "Carl Sagan"; console.log(pessoa_literal.nome); // "Carl Sagan" console.log(pessoa_literal_2.nome); // "Carl Sagan"
  24. 24. Objetos construtores function PessoaConstrutor(nome) { this.nome = nome; } var pessoa_construtor = new PessoaConstrutor('Neil Tyson'); var outra_construtor = new PessoaConstrutor('Carl Sagan'); console.log(pessoa_construtor.nome); // "Neil Tyson" console.log(outra_construtor.nome); // "Carl Sagan'"
  25. 25. Novas boas partes em ES6 ● let ● Arrow Functions ou Fat Arrows. ● Default Arguments. ● Template Strings.
  26. 26. Let ● Não existe o comportamento de hoisting. let cientista = true; if (cientista) { let nome = 'Neil Tyson'; console.log(nome); // 'Neil Tyson' }
  27. 27. Arrow Functions // Convencional var soma = function(x, y) { return x + y; }; // ES6 var soma = (x, y) => x + y; soma(5, 5); // 10
  28. 28. Default arguments // CoffeeScript cientista = (nome = "Carl Sagan") -> console.log(nome) // ES6 var cientista = function(nome = "Carl Sagan") { console.log(nome); }
  29. 29. Template Strings var old_cosmos = "Carl Sagan" var new_cosmos = "Neil deGrasse Tyson" ` Cosmos, é uma série americana de documentário científico. É uma continuação da série de 1980, que foi apresentada por ${old_cosmos}. O apresentador da nova série é o físico ${new_cosmos}. `
  30. 30. The best is yet to come

×