1. Javascript para
Desenvolvedores C#

3. O que é Javascript?
HTML
CSSJavascript
Você está falando
de Java?
Brendan Eich
Lightscript

5. Linguagens
Fortemente
tipado
Estático
Herança por
classes
Classes
Construtores
Métodos

7. Linguagens
Vagamente
tipado
Dinâmico
Protótipos
Functions
Functions
Functions
Estático
Herança
Classes
Construtores
Métodos
Fortemente
tipado

8. Comparando Linguagens
Construindo avião no ar
www.youtube.com/watch?v=ZRUiJXrl8Yg

9. Sobre o curso
Javascript
Comparação
Parte 1:
Awesome
Functions
Parte 2:
Conceitos
Parte 3:
POO
Parte 4:

11. Sintaxe
{
//C#
var cliente = new Cliente();
}
{
//JavaScript
var cliente = new Cliente();
}
{
//C#
cliente = true;
}
{
//JavaScript
cliente = true;
}

12. Sintaxe
Fortemente tipado
• Tipos são conhecidos por estruturas estáticas previamente definidas
• O compilador deduz um tipo quando não definido explicitamente
• O compilador verifica a integridade da variável e impede a compilação
se necessário
// C#
var x = 0; //Assina como int
bool result = x is int; //true
x = new Pet(); // Erro de compilação

13. // Javascript
var x = 0; // cria a variavel x que guarda um numero
var result = typeof x == 'number'; // Funciona
x = new Pet(); //sem problemas, redefine x com o novo tipo
Sintaxe
Vagamente tipado
• Tipos são criados na hora
• Verificações de tipo ocorrem apenas na execução
• Todos os tipos são dinâmicos e podem ser alterados ao seu bem
entender

14. Sintaxe
Orientação a objetos
• Heranças e interfaces são partes da entidade
// C#
public class Animal {
public void Alimentar(){}
}
public interface IMovivel {
void Mover();
}
public class Coelho : Animal, IMovivel {
public void Mover(){}
}
public class Skate : IMovivel {
public void Mover(){}
}

15. // C#
public static class FazCoisas
{
static void Alimentar(Animal animal)
{
animal.Alimentar();
}
static void Mover(IMovivel coisa)
{
coisa.Mover();
}
}
Sintaxe
Orientação a objetos
• Heranças e interfaces são partes da entidade

16. Sintaxe
Orientação a objetos
• Tipagem é o menos importante, mas a forma como o objeto é
definido é importante
• “DuckTyping”, parece com um pato, fala como um pato, anda como
um pato, nada como um pato: não precisa ser um pato para funcionar
//Javascript
function Alimentar(animal) {
animal.Alimentar();
}
function Mover(objeto) {
objeto.Mover();
}

17. Sintaxe
Dinamismo Extremo
• É possível adicionar ou remover pedaços do código com total
naturalidade
//Criamos um objeto com propriedades definidas
var locadora = {
nome: "Top Video",
bairro: "Coral"
};
//Mesmo depois de definido, pode-se adicionar outra propriedade
locadora.usuarioNetFlix = "topvideo123";
//É possivel também adicionar funções em runtime
//tanto quanto arrancar trechos da estrutura
locadora.cancelarAssinatura = function() {
delete locadora.usuarioNetFlix;
};

18. Sintaxe
Palavras reservadas
Essas funcionalidades funcionam no Javascript de modo idêntico ao C#
• for
• Continue
• Break
• if/else
• while
• switch/case
• do/while
• try/catch/finally
• new

20. Caracteristicas
Escopo global
• No C# Classes são bem organizadas em namespaces
• Contém métodos bem definidos e um ponto de partida
//C#
namespace someNamespace
{
public class SomeClass
{
public void SomeMethod()
{
}
public static void Main()
{
}
}
}

21. //Javascript
var x = 1; //window.x
function increment() {//window.increment
var y = 1;
x = x + y;
}
increment();
console.log(y);//Não funciona
Caracteristicas
Escopo global
• No Javascript, todos os objetos criados estarão no escopo global
• Não existe ponto de partida, o navegador lê os arquivos e os
executa instantaneamente

22. Caracteristicas
Escopos locais
• Enquanto no C# estruturas de controle como while, for, if, e até
escopos sem cabeça podem isolar variáveis
• A única coisa em Javascript que isola variáveis são functions
//C#
while (true){
var x = 1;
}
for (; ;) {
var y = 2;
}
if (true){
var z = 3;
}
{
var w = 4;
}
//Não posso acessar nada daqui
//Javascript
while (true) {
var x = 1;
}
for (; ;) {
var y = 2;
}
if (true) {
var z = 3;
}
function fn() {
var w = 4;
}
//Posso acesar todos, menos w

23. Caracteristicas
Coalescência
• Todos os tipos do Javascript são flexíveis e adaptativos
• Isso quer dizer que qualquer coisa pode ser usada como
string, bool, numero..
var x = 16;
!x;
"test " + "me";
"test " + x;
"test " + true;
"test " + (x == "16");
"test " + (x === "16");
100 + !!x
// false
// test me
// test 16
// test true
// test true
// test false
// 101

24. Caracteristicas
Coalescência
• Igualdade com Javascript é idêntico ao C#, exceto por
(===, !==)
• Estes operadores verificam também o tipo para
validarem a condição
"hello" == "hello"
1 == 1;
1 == "1";
1 === "1"
true == 1
true == "1"
true === "1"
//true
//true
//true
//false
//true
//true
//false

25. Caracteristicas
Coalescência
• Há também outros operadores
• == (igual)
• === (idêntico)
• != (diferente)
• !== (distinto)
• > (maior)
• >= (maior ou igual)
• < (menor)
• <= (menor ou igual)
• && (e)
• || (ou)
• ! (negação)
• +,-,*,/,% (operadores matemáticos)

27. Tipos
Primitivos Boolean String Number
Especiais Null Undefined NaN
Referência Object Array
Delegates Function
var x = 10;
var tipo = typeof x;
//retorna "number"

28. Tipos
Primitivos
(typeof 1);
(typeof 1.0);
(typeof true);
(typeof false);
(typeof "Alguma string");
(typeof 'c');
(typeof 'false');
(typeof ("teste" + 32 + false));
//number
//number, não é feita distinção de int, float, double
//boolean
//boolean
//string
//string, não é feita distinção entre string e char
//string
//string 'teste32false'

29. Tipos
Numéricos
• É possível definir a precisão do numero do qual você está
trabalhando
var a = 1;
var b = 1.5;
var c = 080;
var d = 0xfff3c;
var e = 1.34e6;
var f = 10.0;
var g = f +0.4;
//inteiro
//ponto flutuante
//inteiro, calculado como octal (prefixo 0)
//inteiro, calculado como hexadecimal (prefixo 0x)
//Notação Científica (1340000)
//como o ponto flutuante é irrelevante, vai ser
//interpretado como um inteiro comum
//Aqui o inteiro se torna de fato um ponto flutuante

30. Tipos
Especiais
• Quando um calculo dá errado por serem de tipos não
numéricos, há o valor NaN (Not A Number)
var falha = 10 / "zero"; //NaN
NaN == NaN; //false, NaN é diferente dele mesmo
isNaN(NaN); //true
isNaN(falha); //true
isNaN(10); //false
isNaN("10"); //false, interpretou string como number
isNaN("0xf3d"); //false
1 === "1"

31. Tipos
Especiais
• Null
• É idêntico ao null do C# e representa uma referência
apontando para lugar nenhum
• Undefined
• Significa que a variável não existe no contexto determinado
var aluno = { nome: null };
typeof x.nome; //foi definido mas não aponta para nada, retorna 'null'
typeof x.telefone; //não foi definido, não existe, retorna 'undefined'
delete x.nome;
typeof x.nome; //Agora a variavel foi eliminada da memoria local, sendo undefined

32. Tipos
Boolean
• Qualquer tipo é considerado booleano de acordo com sua coalescência
if (true) { }
if (false) { }
if ("hello") { }
if ("") { }
if (25) { }
if (-4) { }
if (0) { }
if (10/0) { }
var x = null;
if (x) { }
if (!x) { }
if (!!x) { }
if (y) { }
//true
//false
//qualquer string não vazia retorna true
//false
//true
//qualquer numero diferente de 0 retorna true
//false
//false (NaN)
//objetos não-validos retornam false
//true
//false
//false (undefined)

33. Tipos
Boolean
• Também é possível fazer validações mais complexas
//C#
public void SomeMethod(Animal animal, string raca = null) {
if (animal != null) animal.Alimentar();
if (raca == null) animal.Raca = "Desconhecido";
else animal.Raca = raca;
animal.Raca = raca != null ? raca : "Desconhecido";
animal.Raca = raca ?? "Desconhecido";
}
//Javascript
function SomeFunction(animal, raca) {
if (animal) animal.Alimentar();
if (raca) animal.raca = raca;
else animal.raca = "Desconhecido";
animal.raca = raca ? raca : "Desconhecido";
animal.raca = raca || "Desconheido";
}

34. Tipos
String
• Um dos objetos mais dinâmicos no Javascript
var s = "string";
var t = 'string';
var c = "don't tell me";
c = 'ele disse: "chega ai" ';
var u = "One" + 'Two';
var single = u[3];
log(u.length); var t = ' Apenas um Teste ';
log(t.indexOf('um')); //8
log(t.replace('um', 1));//" Apenas 1 Teste “
log(t.split(' ')); //["", "Apenas", "um", "Teste", ""]
log(t.split('')); //[" ", "A", "p", "e", "n", ...]
log(t.split()); //[" Apenas um Teste "]
log(t.trim()); //"Apenas um Teste"
log(t.toLowerCase()); //" apenas um teste "
log(t.toUpperCase()); //" APENAS UM TESTE "
//Aspas duplas
//Aspas simples
//aspas simples são parte do conteúdo
//aspas duplas são parte do conteúdo
//Concatena sem problemas
//'T
// 6

35. Tipos
Objetos Literais
• Atalhos para criar estruturas:
var game = {
name: 'Sonic the Hedgehog 2',
'Numero bits': 08
};
var n = game.name;
var b = game['Numero bits'];
var game = {
name: 'Sonic the Hedgehog 2',
console: {
name: 'Megadrive',
'Numero bits':08
}
};
var b = game.console['Numero bits'];
var c = game['console'].name;

36. Tipos
Referências
• Funcionam semelhante ao C#:
//Javascript
var game = {
name: 'Sonic the Hedgehog 2',
videogame: {
name: 'Megadrive',
'Numero bits': 08
}
};
var gameName = game.name;
var newVideogame = game.videogame;
gameName = "Super Mario Bros";
newVideogame.name = "Super Nintendo";
console.log(game.name); //Sonic
console.log(gameName); //Mario
console.log(game.videogame.name); //Super
console.log(newVideogame.name); //Super
Game
Name Sonic
Videogame
Nome Megadrive
Numero de
Bits
08
Name Sonic
Videogame
Mario
Super
Nintendo

37. Tipos
Arrays
• Simples (mas poderosas) coleções em javascript
var arry = ['string', 2, undefined, true];
var games = [
{ nome: 'sonic', bits: 8 },
{ nome: 'mario', bits: 16 }
];

38. Tipos
Arrays
Obj0
Obj1
Obj2 Obj3
Push

39. Tipos
Arrays
Obj0
Obj1
Obj2 Obj3
Pop

40. Tipos
Arrays
Obj0
Obj1Obj2 Obj3
Unshift

41. Tipos
Arrays
Obj0
Obj1Obj2 Obj3
Shift

42. Tipos
Arrays
Obj0 Obj1Obj2 Obj3
Reverse

43. Tipos
Arrays
Obj0 Obj1Obj2 Obj3
IndexOf

45. Quiz
 Javascript é derivado do Java
 Verdadeiro
 Falso
 Javascript é orientado à objetos
 True
 False

46. Quiz
 Javascript é derivado do Java
 Verdadeiro
 Falso
 Javascript é orientado à objetos
 True
 False

47. Quiz
 Qual o resultado desta expressão?
console.log(true + true + true + true);
 true
 “truetruetruetrue”
 4
 Depois que eu já criei um objeto, posso continuar atribuindo propriedades nele
 Verdadeiro
 Falso

48. Quiz
 Qual o resultado desta expressão?
console.log(true + true + true + true);
 true
 “truetruetruetrue”
 4
 Depois que eu já criei um objeto, posso continuar atribuindo propriedades nele
 Verdadeiro
 Falso

49. Quiz
 O que a variável vai receber? var a = 0xFFO3C;
 Numero inteiro
 String
 Object
 Undefined
 Numero Hexadecimal

50. Quiz
 O que a variável vai receber? var a = 0xFFO3C;
 Numero inteiro
 String
 Object
 Undefined (letra O)
 Numero Hexadecimal

51. Quiz
Como vai ficar a variável depois do seguinte comando:
var a = [1, 2, 3, 4];
a.unshift(5);
a.pop();
A - [1,2,3,4]
B - [2,3,4,5]
C - [5,1,2,3]
D - [5,2,3,4]

52. Quiz
Como vai ficar a variável depois do seguinte comando:
var a = [1, 2, 3, 4];
a.unshift(5);
a.pop();
A - [1,2,3,4]
B - [2,3,4,5]
C - [5,1,2,3]
D - [5,2,3,4]

53. • Java !=== Javascript
• Você está livre!
• Não compila, apenas lê e executa
• Tipagem fraca
• Coalescente
• Apenas functions definem escopos
• Tipos primitivos e referência
semelhantes ao C#

54. Links
• Code Academy - Javascript
• Documentação oficial do Javascript
• Coderbyte Challenges
• Advanced Javascript
• Javascript.info
• Json.org
• You Dont Know Javascript
• Especificação do ECMAScript 5.1