Javascript para
Desenvolvedores C#
O que é Javascript?
HTML
CSSJavascript
Você está falando
de Java?
Brendan Eich
Lightscript
Linguagens
Fortemente
tipado
Estático
Herança por
classes
Classes
Construtores
Métodos
Linguagens
Vagamente
tipado
Dinâmico
Protótipos
Functions
Functions
Functions
Estático
Herança
Classes
Construtores
Método...
Comparando Linguagens
Construindo avião no ar
www.youtube.com/watch?v=ZRUiJXrl8Yg
Sobre o curso
Javascript
Comparação
Parte 1:
Awesome
Functions
Parte 2:
Conceitos
Parte 3:
POO
Parte 4:
Sintaxe
{
//C#
var cliente = new Cliente();
}
{
//JavaScript
var cliente = new Cliente();
}
{
//C#
cliente = true;
}
{
//J...
Sintaxe
Fortemente tipado
• Tipos são conhecidos por estruturas estáticas previamente definidas
• O compilador deduz um ti...
// Javascript
var x = 0; // cria a variavel x que guarda um numero
var result = typeof x == 'number'; // Funciona
x = new ...
Sintaxe
Orientação a objetos
• Heranças e interfaces são partes da entidade
// C#
public class Animal {
public void Alimen...
// C#
public static class FazCoisas
{
static void Alimentar(Animal animal)
{
animal.Alimentar();
}
static void Mover(IMovi...
Sintaxe
Orientação a objetos
• Tipagem é o menos importante, mas a forma como o objeto é
definido é importante
• “DuckTypi...
Sintaxe
Dinamismo Extremo
• É possível adicionar ou remover pedaços do código com total
naturalidade
//Criamos um objeto c...
Sintaxe
Palavras reservadas
Essas funcionalidades funcionam no Javascript de modo idêntico ao C#
• for
• Continue
• Break
...
Caracteristicas
Escopo global
• No C# Classes são bem organizadas em namespaces
• Contém métodos bem definidos e um ponto ...
//Javascript
var x = 1; //window.x
function increment() {//window.increment
var y = 1;
x = x + y;
}
increment();
console.l...
Caracteristicas
Escopos locais
• Enquanto no C# estruturas de controle como while, for, if, e até
escopos sem cabeça podem...
Caracteristicas
Coalescência
• Todos os tipos do Javascript são flexíveis e adaptativos
• Isso quer dizer que qualquer coi...
Caracteristicas
Coalescência
• Igualdade com Javascript é idêntico ao C#, exceto por
(===, !==)
• Estes operadores verific...
Caracteristicas
Coalescência
• Há também outros operadores
• == (igual)
• === (idêntico)
• != (diferente)
• !== (distinto)...
Tipos
Primitivos Boolean String Number
Especiais Null Undefined NaN
Referência Object Array
Delegates Function
var x = 10;...
Tipos
Primitivos
(typeof 1);
(typeof 1.0);
(typeof true);
(typeof false);
(typeof "Alguma string");
(typeof 'c');
(typeof ...
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 = 08...
Tipos
Especiais
• Quando um calculo dá errado por serem de tipos não
numéricos, há o valor NaN (Not A Number)
var falha = ...
Tipos
Especiais
• Null
• É idêntico ao null do C# e representa uma referência
apontando para lugar nenhum
• Undefined
• Si...
Tipos
Boolean
• Qualquer tipo é considerado booleano de acordo com sua coalescência
if (true) { }
if (false) { }
if ("hell...
Tipos
Boolean
• Também é possível fazer validações mais complexas
//C#
public void SomeMethod(Animal animal, string raca =...
Tipos
String
• Um dos objetos mais dinâmicos no Javascript
var s = "string";
var t = 'string';
var c = "don't tell me";
c ...
Tipos
Objetos Literais
• Atalhos para criar estruturas:
var game = {
name: 'Sonic the Hedgehog 2',
'Numero bits': 08
};
va...
Tipos
Referências
• Funcionam semelhante ao C#:
//Javascript
var game = {
name: 'Sonic the Hedgehog 2',
videogame: {
name:...
Tipos
Arrays
• Simples (mas poderosas) coleções em javascript
var arry = ['string', 2, undefined, true];
var games = [
{ n...
Tipos
Arrays
Obj0
Obj1
Obj2 Obj3
Push
Tipos
Arrays
Obj0
Obj1
Obj2 Obj3
Pop
Tipos
Arrays
Obj0
Obj1Obj2 Obj3
Unshift
Tipos
Arrays
Obj0
Obj1Obj2 Obj3
Shift
Tipos
Arrays
Obj0 Obj1Obj2 Obj3
Reverse
Tipos
Arrays
Obj0 Obj1Obj2 Obj3
IndexOf
Quiz
 Javascript é derivado do Java
 Verdadeiro
 Falso
 Javascript é orientado à objetos
 True
 False
Quiz
 Javascript é derivado do Java
 Verdadeiro
 Falso
 Javascript é orientado à objetos
 True
 False
Quiz
 Qual o resultado desta expressão?
console.log(true + true + true + true);
 true
 “truetruetruetrue”
 4
 Depois ...
Quiz
 Qual o resultado desta expressão?
console.log(true + true + true + true);
 true
 “truetruetruetrue”
 4
 Depois ...
Quiz
 O que a variável vai receber? var a = 0xFFO3C;
 Numero inteiro
 String
 Object
 Undefined
 Numero Hexadecimal
Quiz
 O que a variável vai receber? var a = 0xFFO3C;
 Numero inteiro
 String
 Object
 Undefined (letra O)
 Numero He...
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 - ...
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 - ...
• Java !=== Javascript
• Você está livre!
• Não compila, apenas lê e executa
• Tipagem fraca
• Coalescente
• Apenas functi...
Links
• Code Academy - Javascript
• Documentação oficial do Javascript
• Coderbyte Challenges
• Advanced Javascript
• Java...
Javascript para CSharpers   1 - Comparando
Javascript para CSharpers   1 - Comparando
Javascript para CSharpers   1 - Comparando
Javascript para CSharpers   1 - Comparando
Javascript para CSharpers   1 - Comparando
Javascript para CSharpers   1 - Comparando
Javascript para CSharpers   1 - Comparando
Próximos SlideShares
Carregando em…5
×

Javascript para CSharpers 1 - Comparando

229 visualizações

Publicada em

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
229
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Javascript é responsável pela parte atraz do HTML,
  • Javascript para CSharpers 1 - Comparando

    1. 1. Javascript para Desenvolvedores C#
    2. 2. O que é Javascript? HTML CSSJavascript Você está falando de Java? Brendan Eich Lightscript
    3. 3. Linguagens Fortemente tipado Estático Herança por classes Classes Construtores Métodos
    4. 4. Linguagens Vagamente tipado Dinâmico Protótipos Functions Functions Functions Estático Herança Classes Construtores Métodos Fortemente tipado
    5. 5. Comparando Linguagens Construindo avião no ar www.youtube.com/watch?v=ZRUiJXrl8Yg
    6. 6. Sobre o curso Javascript Comparação Parte 1: Awesome Functions Parte 2: Conceitos Parte 3: POO Parte 4:
    7. 7. Sintaxe { //C# var cliente = new Cliente(); } { //JavaScript var cliente = new Cliente(); } { //C# cliente = true; } { //JavaScript cliente = true; }
    8. 8. 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
    9. 9. // 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
    10. 10. 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(){} }
    11. 11. // 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
    12. 12. 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(); }
    13. 13. 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; };
    14. 14. 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
    15. 15. 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() { } } }
    16. 16. //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
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. 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)
    21. 21. Tipos Primitivos Boolean String Number Especiais Null Undefined NaN Referência Object Array Delegates Function var x = 10; var tipo = typeof x; //retorna "number"
    22. 22. 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'
    23. 23. 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
    24. 24. 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"
    25. 25. 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
    26. 26. 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)
    27. 27. 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"; }
    28. 28. 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
    29. 29. 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;
    30. 30. 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
    31. 31. 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 } ];
    32. 32. Tipos Arrays Obj0 Obj1 Obj2 Obj3 Push
    33. 33. Tipos Arrays Obj0 Obj1 Obj2 Obj3 Pop
    34. 34. Tipos Arrays Obj0 Obj1Obj2 Obj3 Unshift
    35. 35. Tipos Arrays Obj0 Obj1Obj2 Obj3 Shift
    36. 36. Tipos Arrays Obj0 Obj1Obj2 Obj3 Reverse
    37. 37. Tipos Arrays Obj0 Obj1Obj2 Obj3 IndexOf
    38. 38. Quiz  Javascript é derivado do Java  Verdadeiro  Falso  Javascript é orientado à objetos  True  False
    39. 39. Quiz  Javascript é derivado do Java  Verdadeiro  Falso  Javascript é orientado à objetos  True  False
    40. 40. 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
    41. 41. 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
    42. 42. Quiz  O que a variável vai receber? var a = 0xFFO3C;  Numero inteiro  String  Object  Undefined  Numero Hexadecimal
    43. 43. Quiz  O que a variável vai receber? var a = 0xFFO3C;  Numero inteiro  String  Object  Undefined (letra O)  Numero Hexadecimal
    44. 44. 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]
    45. 45. 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]
    46. 46. • 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#
    47. 47. 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

    ×