1.
JavaScript
for dummies

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

3.
www.mappase.com.br

4.
www.novatec.com.br
• Livro para sorteio no dia do evento!
• 30% de desconto - “DevRioClaro30” (válido até 15/07/2014)

5.
www.casadocodigo.com.br
• 2 e-Books para sorteio no dia do evento!
• 15% desconto - “DevRioClaro” (valido até 23/06/2014)

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

7.
Murilo Beltrame
• Marketing - FACINTER
• Especialista Microsoft (MCTSWeb Development/Data Access)
• Entusiasta JavaScript
• Motociclista
• Futuro marido

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

9.
Intro

10.
Intro – ‘95

11.
Intro – ‘96

12.
Intro
Conteúdo Estilização Comportamento

13.
Conceitos

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

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

16.
Conceitos - interpretado
Um erro interrompe a execução de todo código seguinte no escopo

17.
Languages (compile, then interpret)

18.
Frameworks (write different, do same thing)

19.
Conceitos – tipagem dinâmica
var a; //undefined
a = 1; //number
a = ‘a’; //string
a = true; //boolean
a = null; //null

20.
DEMO
Tipagem dinâmica

21.
Tipos

22.
Tipos
• Números
• Strings
• Booleans
• null
• Undefined
Todo o resto são objetos

23.
Tipos – number
• Ponto flutuante de 64 bits
• Os mesmos problemas aritmeticos que envolvem double
• NaN (Not a number) é um valor especial que representa erros

24.
Tipos - Strings
• Unicode 16 bits
• Não existem ‘chars’.
• “A” = ‘a’

25.
Tipos - Boolean
• Verdadeiro ou Falso
• Boolean(exp) é uma função que retorna a veracidade da expressão
• !!value é a mesma coisa que value

26.
Tipos - Boolean
• Falso
• false
• null,
• undefined,
• “”,
• 0,
• NaN
Todo o resto é verdadeiro

27.
DEMO
Truthy || Falsy

28.
Tipos - Null
• Nada
• Normalmente usado para erros
• null sempre é atribuido a uma variavel de forma deliberada

29.
Tipos - Undefined
• Nada mesmo
• Qualquer variavel que nunca recebeu valor é undefined

30.
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)

31.
Sintaxe

32.
Sintaxe - Indetificadores
• Começam com a-z,A-Z,_ ou $
• Seguem com a-z,A-Z,0-9,_ ou $

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

34.
Sintaxe - Comentários
// linha comentada
/*
Bloco comentado
*/

35.
Sintaxe – Laços de repetição
while (exp) { ... }
do { ... } while (exp);
for (pointer; test; increment) { ... }
for (ele in collection) { ... }

36.
Sintaxe – Controle de fluxo
if (exp) {...} else if (exp){...} else {...}
switch (exp){ case opt: ...; break; default: ...;break; }

37.
Sintaxe - Funções
function Name(arg1,arg2,...){...}
var Name = function(arg1,arg2,...){...}

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

39.
DEMO
Arguments, Optional parameter, Function as parameter

40.
Closure & ‘Scope chain’

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

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

43.
DEMO
Closure & Scope Chain

44.
Objetos

45.
Objetos - JSON
var obj = {
marca:’Volks’,
modelo:’Fusca’,
pegaModelo:function(){ return marca+ ‘ ‘ + modelo; }
}

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

47.
Objetos - Array
var array = [];
array[‘modelo’] = ‘Fusca’;
array[‘modelo’]; //Fusca
array.modelo; //Fusca
array[‘transformarEmTanqueDeGuerra’] = function(){};
array.transformarEmTanqueDeGuerra();

48.
DEMO
Object Array

49.
Objetos – Funções
var carro = function(modelo,marca) {
this.Modelo = modelo;
this.Marca = marca;
}
var fusca = new carro(‘fusca’,’volks’);

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

51.
DEMO
Object Function

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

53.
DEMO
Extending object with prototype

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

55.
DEMO
Inheritance with prototype

56.
Next Steps?
• DOM Scripting
• DocumentTraversing Framework

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