JavaScript "for 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 (MCTSWeb Development/Data Access)
• Entusiasta JavaScript
• Motociclista
• Futuro marido

Agenda
• Intro
• Conceitos
• Tipos
• Sintaxe
• Closure & ‘Scope chain’
• Objetos

Intro
Conteúdo Estilização Comportamento

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

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

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 - 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

DEMO
Arguments, Optional parameter, Function as parameter

Closure & ‘Scope chain’
Global Object
Attr
Closure vars
Function vars

Closure & ‘Scope chain’
//global scope
function closureFunction(){
// closure scope
...
function generalFunction(){
//function scope
}
}

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();

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

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;
}

DEMO
Extending object with prototype

Objetos – Herança por protótipo
var collection = function(){
for(var i in this){...}
}
collection.prototype = new Array;

DEMO
Inheritance with prototype

Next Steps?
• DOM Scripting
• DocumentTraversing Framework

Thanks
murilobeltrame.com.br
@murilobeltrame
fb.com/murilobeltrame
br.linkedin.com/in/murilobeltrame

JavaScript "for dummies"

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a JavaScript "for dummies"

Similar a JavaScript "for dummies" (20)

JavaScript "for dummies"