58
JavaScript for dummies

JavaScript "for dummies"

Embed Size (px)

DESCRIPTION

Do básico ao avançado sobre uma das mais incompreendidas linguagens de programação, o JavaScript. Palestra realizada no encontrodo do grupo DevRioClaro em 21/6/14

Citation preview

Page 1: JavaScript "for dummies"

JavaScriptfor dummies

Page 2: 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

[email protected]

Page 3: JavaScript "for dummies"

www.mappase.com.br

Page 4: JavaScript "for dummies"

www.novatec.com.br

• Livro para sorteio no dia do evento!

• 30% de desconto - “DevRioClaro30” (válido até 15/07/2014)

Page 5: JavaScript "for dummies"

www.casadocodigo.com.br

• 2 e-Books para sorteio no dia do evento!

• 15% desconto - “DevRioClaro” (valido até 23/06/2014)

Page 6: JavaScript "for dummies"

www.lcm.com.br

• Desconto de 40% livro impresso e 10% eBook - “V00031” (válido até ...)

Page 7: JavaScript "for dummies"

Murilo Beltrame

• Marketing - FACINTER

• Especialista Microsoft (MCTS Web Development/Data Access)

• Entusiasta JavaScript

• Motociclista

• Futuro marido

Page 8: JavaScript "for dummies"

Agenda

• Intro

• Conceitos

• Tipos

• Sintaxe

• Closure & ‘Scope chain’

• Objetos

Page 9: JavaScript "for dummies"

Intro

Page 10: JavaScript "for dummies"

Intro – ‘95

Page 11: JavaScript "for dummies"

Intro – ‘96

Page 12: JavaScript "for dummies"

Intro

Conteúdo Estilização Comportamento

Page 13: JavaScript "for dummies"
Page 14: JavaScript "for dummies"

Conceitos

Page 15: JavaScript "for dummies"

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

Page 16: JavaScript "for dummies"

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.

Page 17: JavaScript "for dummies"

Conceitos - interpretado

Um erro interrompe a execução de todo código seguinte no escopo

Page 18: JavaScript "for dummies"

Languages (compile, then interpret)

Page 19: JavaScript "for dummies"

Frameworks (write different, do same thing)

Page 20: JavaScript "for dummies"

Conceitos – tipagem dinâmica

var a; //undefined

a = 1; //number

a = ‘a’; //string

a = true; //boolean

a = null; //null

Page 21: JavaScript "for dummies"

DEMOTipagem dinâmica

Page 22: JavaScript "for dummies"

Tipos

Page 23: JavaScript "for dummies"

Tipos

• Números

• Strings

• Booleans

• null

• Undefined

Todo o resto são objetos

Page 24: JavaScript "for dummies"

Tipos – number

• Ponto flutuante de 64 bits

• Os mesmos problemas aritmeticos que envolvem double

• NaN (Not a number) é um valor especial que representa erros

Page 25: JavaScript "for dummies"

Tipos - Strings

• Unicode 16 bits

• Não existem ‘chars’.

• “A” = ‘a’

Page 26: JavaScript "for dummies"

Tipos - Boolean

• Verdadeiro ou Falso

• Boolean(exp) é uma função que retorna a veracidade da expressão

• !!value é a mesma coisa que value

Page 27: JavaScript "for dummies"

Tipos - Boolean

• Falso

• false

• null,

• undefined,

• “”,

• 0,

• NaN

Todo o resto é verdadeiro

Page 28: JavaScript "for dummies"

DEMOTruthy || Falsy

Page 29: JavaScript "for dummies"

Tipos - Null

• Nada

• Normalmente usado para erros

• null sempre é atribuido a uma variavel de forma deliberada

Page 30: JavaScript "for dummies"

Tipos - Undefined

• Nada mesmo

• Qualquer variavel que nunca recebeu valor é undefined

Page 31: JavaScript "for dummies"

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)

Page 32: JavaScript "for dummies"

Sintaxe

Page 33: JavaScript "for dummies"

Sintaxe - Indetificadores

• Começam com a-z,A-Z,_ ou $

• Seguem com a-z,A-Z,0-9,_ ou $

Page 34: JavaScript "for dummies"

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

Page 35: JavaScript "for dummies"

Sintaxe - Comentários

// linha comentada

/*

Bloco comentado

*/

Page 36: JavaScript "for dummies"

Sintaxe – Laços de repetição

while (exp) { ... }

do { ... } while (exp);

for (pointer; test; increment) { ... }

for (ele in collection) { ... }

Page 37: JavaScript "for dummies"

Sintaxe – Controle de fluxo

if (exp) {...} else if (exp){...} else {...}

switch (exp){ case opt: ...; break; default: ...;break; }

Page 38: JavaScript "for dummies"

Sintaxe - Funções

function Name(arg1,arg2,...){...}

var Name = function(arg1,arg2,...){...}

Page 39: JavaScript "for dummies"

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

Page 40: JavaScript "for dummies"

DEMOArguments, Optional parameter, Function as parameter

Page 41: JavaScript "for dummies"

Closure & ‘Scope chain’

Page 42: JavaScript "for dummies"

Closure & ‘Scope chain’

Global Object Attr

Closure vars

Function vars

Page 43: JavaScript "for dummies"

Closure & ‘Scope chain’

//global scope

function closureFunction(){

// closure scope

...

function generalFunction(){

//function scope

}

}

Page 44: JavaScript "for dummies"

DEMOClosure & Scope Chain

Page 45: JavaScript "for dummies"

Objetos

Page 46: JavaScript "for dummies"

Objetos - JSON

var obj = {

marca:’Volks’,

modelo:’Fusca’,

pegaModelo:function(){ return marca+ ‘ ‘ + modelo; }

}

Page 47: JavaScript "for dummies"

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

Page 48: JavaScript "for dummies"

Objetos - Array

var array = [];

array[‘modelo’] = ‘Fusca’;

array[‘modelo’]; //Fusca

array.modelo; //Fusca

array[‘transformarEmTanqueDeGuerra’] = function(){};

array.transformarEmTanqueDeGuerra();

Page 49: JavaScript "for dummies"

DEMOObject Array

Page 50: JavaScript "for dummies"

Objetos – Funções

var carro = function(modelo,marca) {

this.Modelo = modelo;

this.Marca = marca;

}

var fusca = new carro(‘fusca’,’volks’);

Page 51: JavaScript "for dummies"

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

Page 52: JavaScript "for dummies"

DEMOObject Function

Page 53: JavaScript "for dummies"

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;

}

Page 54: JavaScript "for dummies"

DEMOExtending object with prototype

Page 55: JavaScript "for dummies"

Objetos – Herança por protótipo

var collection = function(){

for(var i in this){...}

}

collection.prototype = new Array;

Page 56: JavaScript "for dummies"

DEMOInheritance with prototype

Page 57: JavaScript "for dummies"

Next Steps?

• DOM Scripting

• Document Traversing Framework

Page 58: JavaScript "for dummies"

Thanksmurilobeltrame.com.br

@murilobeltrame

fb.com/murilobeltrame

br.linkedin.com/in/murilobeltrame