JavaScript "for dummies"

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.mappase.com.br

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