Post on 05-Jul-2015
description
JavaScriptfor dummies
Seja bem vindo(a)!
Somos um grupo voluntário e independente de desenvolvedores de software, com o intuito de
disseminar conhecimento e fortalecer a comunidade local
fb.com/groups/DevRioClaro
devrioclaro@gmail.com
www.novatec.com.br
• Livro para sorteio no dia do evento!
• 30% de desconto - “DevRioClaro30” (válido até 15/07/2014)
www.casadocodigo.com.br
• 2 e-Books para sorteio no dia do evento!
• 15% desconto - “DevRioClaro” (valido até 23/06/2014)
www.lcm.com.br
• Desconto de 40% livro impresso e 10% eBook - “V00031” (válido até ...)
Murilo Beltrame
• Marketing - FACINTER
• Especialista Microsoft (MCTS Web Development/Data Access)
• Entusiasta JavaScript
• Motociclista
• Futuro marido
Agenda
• Intro
• Conceitos
• Tipos
• Sintaxe
• Closure & ‘Scope chain’
• Objetos
Intro
Intro – ‘95
Intro – ‘96
Intro
Conteúdo Estilização Comportamento
Conceitos
Conceitos
• Sensível à caixa (a != A)
• Interpretado, não compilado
• Tipagem dinâmica
• Objetos são apenas hastables
• Herança por prototipagem
• Funções são objetos
• Vetores são objetos
Conceitos – think about
O JavaScript foi criado para manipular o DOM (Documento Object Mobel) & BOM (Browser Object Model), mas esses não são parte do JavaScript.
Conceitos - interpretado
Um erro interrompe a execução de todo código seguinte no escopo
Languages (compile, then interpret)
Frameworks (write different, do same thing)
Conceitos – tipagem dinâmica
var a; //undefined
a = 1; //number
a = ‘a’; //string
a = true; //boolean
a = null; //null
DEMOTipagem dinâmica
Tipos
Tipos
• Números
• Strings
• Booleans
• null
• Undefined
Todo o resto são objetos
Tipos – number
• Ponto flutuante de 64 bits
• Os mesmos problemas aritmeticos que envolvem double
• NaN (Not a number) é um valor especial que representa erros
Tipos - Strings
• Unicode 16 bits
• Não existem ‘chars’.
• “A” = ‘a’
Tipos - Boolean
• Verdadeiro ou Falso
• Boolean(exp) é uma função que retorna a veracidade da expressão
• !!value é a mesma coisa que value
Tipos - Boolean
• Falso
• false
• null,
• undefined,
• “”,
• 0,
• NaN
Todo o resto é verdadeiro
DEMOTruthy || Falsy
Tipos - Null
• Nada
• Normalmente usado para erros
• null sempre é atribuido a uma variavel de forma deliberada
Tipos - Undefined
• Nada mesmo
• Qualquer variavel que nunca recebeu valor é undefined
Tipos – Objetos
• Todo o resto são objetos
• Objetos são hashtables (coleção de chave/valor)
• Objetos não tem classes
• Objetos são dinamicos (é possivel alterar sua estrutura em tempo de execução)
Sintaxe
Sintaxe - Indetificadores
• Começam com a-z,A-Z,_ ou $
• Seguem com a-z,A-Z,0-9,_ ou $
Sintaxe – Palavras reservadas
abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with
Sintaxe - Comentários
// linha comentada
/*
Bloco comentado
*/
Sintaxe – Laços de repetição
while (exp) { ... }
do { ... } while (exp);
for (pointer; test; increment) { ... }
for (ele in collection) { ... }
Sintaxe – Controle de fluxo
if (exp) {...} else if (exp){...} else {...}
switch (exp){ case opt: ...; break; default: ...;break; }
Sintaxe - Funções
function Name(arg1,arg2,...){...}
var Name = function(arg1,arg2,...){...}
Sintaxe - Funções
• Sempre é boa idéia testar a validade de cada argumento (e normaliza-los caso necessário) na entrada da função
• Uma função pode receber outra função como parametro
• É possível informar uma cadeia de parametros. Esse parametros são armazenados numa variavel especial arguments
• Todos os parâmetros são opcionais. Se o parâmetro não tem valor especificado na chamado do método, o argumento é undefined
DEMOArguments, Optional parameter, Function as parameter
Closure & ‘Scope chain’
Closure & ‘Scope chain’
Global Object Attr
Closure vars
Function vars
Closure & ‘Scope chain’
//global scope
function closureFunction(){
// closure scope
...
function generalFunction(){
//function scope
}
}
DEMOClosure & Scope Chain
Objetos
Objetos - JSON
var obj = {
marca:’Volks’,
modelo:’Fusca’,
pegaModelo:function(){ return marca+ ‘ ‘ + modelo; }
}
Objetos - Array
var array = new Array();
var array = [];
array[7] = ‘Fusca’;
array[7] //’Fusca’
array[77] = function(a,b){ return a+b; };
array[77](1,2); //4
Objetos - Array
var array = [];
array[‘modelo’] = ‘Fusca’;
array[‘modelo’]; //Fusca
array.modelo; //Fusca
array[‘transformarEmTanqueDeGuerra’] = function(){};
array.transformarEmTanqueDeGuerra();
DEMOObject Array
Objetos – Funções
var carro = function(modelo,marca) {
this.Modelo = modelo;
this.Marca = marca;
}
var fusca = new carro(‘fusca’,’volks’);
Objetos – Funções
var carro = function(modelo,marca){
var _marca = marca;
var _modelo = modelo;
this.pegaMarca = function(){return _marca;}
this.pegaModelo = function(){return _modelo;}
}
var fusca = new carro(‘fusca’,’volks’);
fusca.pegaMarca(); //volks
fusca[‘pegaModelo’]();//fusca
DEMOObject Function
Objetos – Extensão por protótipo
Array.prototype.find = function(arg){
var r = null;
for(var i = 0; i < this.length; i++){
if(arg(this[i])) r = this[i];
break;
}
return r;
}
DEMOExtending object with prototype
Objetos – Herança por protótipo
var collection = function(){
for(var i in this){...}
}
collection.prototype = new Array;
DEMOInheritance with prototype
Next Steps?
• DOM Scripting
• Document Traversing Framework
Thanksmurilobeltrame.com.br
@murilobeltrame
fb.com/murilobeltrame
br.linkedin.com/in/murilobeltrame