![Page 1: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/1.jpg)
Javascript para Desenvolvedores C#
![Page 2: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/2.jpg)
Sobre o cursoJavascript
Comparação
Parte 1:
Functions
Parte 2:
Conceitos
Parte 3:
POO
Parte 4:
![Page 3: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/3.jpg)
Javascript para CSharpers
Javascript para desenvolvedores acostumados com os demais conceitos do .Net
![Page 4: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/4.jpg)
+ConceitosSumário
• Lições práticas• Código estrito
• Laços
• Reflection
• A natureza do Javascript
• Arquitetando o código
• Bibliotecas
![Page 5: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/5.jpg)
+Conceitos‘use strict’
• Javascript é popular por permitir um código muito aberto• Significa que suas técnicas são mais propensas à bugs
• Para isso existe o modo estrito
//Javascript(function() {
'use strict';var x = 'funciona normalmente';y = 'não procegue';
})();//qualquer coisa é permitida aqui
![Page 6: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/6.jpg)
+Conceitos‘use strict’
• O que é desabilitado• Variáveis não declaradas
• Propriedades duplicadas
• Editar propriedades readonly
• Parâmetros duplicados
• Modificar ‘arguments’
• Deletar variáveis
• Palavras reservadas parauso futuro
y = 'algum valor'
var x = { name: 'c1', name: 'c2' };
var array = [1, 2, 3, 4, 5];array.length = 8;
delete array;
implements interfacepackage privateprotected publicstatic yieldclass enum
function(p1, p2, p1) {arguments = [];
}
![Page 7: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/7.jpg)
+ConceitosIterações
• Foreach do C# não é como o for..in do Javascript
• Um objeto nada mais é do que um “dictionary” de propriedades.
//C#var array = new[] {"um", "dois", "três"};foreach (var s in array){
//s seria cada string}
//Javascriptvar array = ['um', 'dois', 'três'];for (var s in array) {
log(s) //0, 1, 2, ??log(array[s]) //'um', 'dois‘
}
![Page 8: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/8.jpg)
+ConceitosReflection
• Enumera todas as propriedades do objeto• Sua forma mais simples é a iteração for..in
E se eu fizer isso com o window ou
document ?var cliente = {nome: 'Juvenal',cpf: '192.168.10.1',ativo: true,'animal de estimação': { especie: 'coelho' },cancelarAssinatura: function () { }
}
for (var prop in cliente) {"prop: " + prop;cliente[prop];typeof cliente[prop];
}
![Page 9: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/9.jpg)
![Page 10: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/10.jpg)
for(var prop in obj){
}
• Faça uma function que receba um objeto e logue para cada uma das propriedades dele:• Nome da propriedade
• Valor
• Tipo do valor
• Valor como String
• Valor como Numero
• Valor como Boleano
• Se uma das propriedades for objeto, as propriedades deste devem ser logadas também
ExercíciosReflection
![Page 11: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/11.jpg)
+ConceitosNatureza do Javascript
• No .Net parâmetros são muito bem definidos• Passar objetos por parâmetro é algo trivial
//C#var server = new SmtpClient();
//Parametro em construtorvar msg = new MailMessage("[email protected]","[email protected]");
msg.Body = "Hello";msg.Subject = "Test Message";
//Chamando métodoserver.Send(msg);
![Page 12: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/12.jpg)
+ConceitosNatureza do Javascript
• No Javascript, é possível passar um parâmetro “aberto”• DuckTyping te permite construir objetos em qualquer lugar
//Javascriptvar server = new SmtpClient();
//Construtorvar msg = {
to: '[email protected]',from: '[email protected]',body: 'Hello',subject: 'Test msg'
};
//Chamando
server.send({
});
server.send(msg);
![Page 13: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/13.jpg)
![Page 14: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/14.jpg)
ExercíciosValidações
• Implemente a classe SmtpClient e o método Send• Este método recebe um objeto com as seguintes propriedades: to, from, body, subject.
• Dentro do método, verifique a validade de cada uma dessas propriedades e retorne true ou false
• Caso to ou from forem vazios ou e-mails inválidos, retorne false (“string”.indexOf(‘@’)>=0)
• Se body e subject forem vazias, devem ser substituídas por “No Body” e “No Subject” respectivamente
• Passe também um callback para logar a mensagem;
• Se tudo estiver preenchido, invoque o callback passando a mensagem;
![Page 15: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/15.jpg)
+ConceitosNatureza do Javascript
• No Javascript
Tratando propriedades inválidas
Implementando defaults
SmtpClient.send = function(msg) {if (msg.subject == null || msg.subject == undefined)
msg.subject = "No Subject";
if (msg.body == null || msg.body == undefined)msg.body = "No Body";
};
![Page 16: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/16.jpg)
+ConceitosNatureza do Javascript
• No Javascript
Tratando propriedades inválidas
Implementando defaults
SmtpClient.send = function(msg) {if (msg.subject == null || msg.subject == undefined)
msg.subject = "No Subject";
if (msg.body == null || msg.body == undefined)msg.body = "No Body";
var defaults = {subject: 'No Subject',body: 'No Body'
};
if (!msg.subject) msg.subject = defaults.subject;if (!msg.body) msg.body = defaults.body;
};
![Page 17: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/17.jpg)
+ConceitosNatureza do Javascript
• No Javascript
Tratando propriedades inválidas
Implementando defaults
SmtpClient.send = function(msg) {if (msg.subject == null || msg.subject == undefined)
msg.subject = "No Subject";
if (msg.body == null || msg.body == undefined)msg.body = "No Body";
var defaults = {subject: 'No Subject',body: 'No Body'
};
if (!msg.subject) msg.subject = defaults.subject;if (!msg.body) msg.body = defaults.body;
msg.subject = msg.subject ? msg.subject : defaults.subject;msg.body = msg.body ? msg.body : defaults.body;
};
![Page 18: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/18.jpg)
+ConceitosNatureza do Javascript
• No Javascript
Tratando propriedades inválidas
Implementando defaults
SmtpClient.send = function(msg) {if (msg.subject == null || msg.subject == undefined)
msg.subject = "No Subject";
if (msg.body == null || msg.body == undefined)msg.body = "No Body";
var defaults = {subject: 'No Subject',body: 'No Body'
};
if (!msg.subject) msg.subject = defaults.subject;if (!msg.body) msg.body = defaults.body;
msg.subject = msg.subject ? msg.subject : defaults.subject;msg.body = msg.body ? msg.body : defaults.body;
msg.subject = msg.subject || defaults.subject;msg.body = msg.body || defaults.body;
};
![Page 19: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/19.jpg)
+ConceitosNatureza do Javascript
• No Javascript
Tratando propriedades inválidas
Implementando defaults
SmtpClient.send = function(msg) {if (msg.subject == null || msg.subject == undefined)
msg.subject = "No Subject";
if (msg.body == null || msg.body == undefined)msg.body = "No Body";
var defaults = {subject: 'No Subject',body: 'No Body'
};
if (!msg.subject) msg.subject = defaults.subject;if (!msg.body) msg.body = defaults.body;
msg.subject = msg.subject ? msg.subject : defaults.subject;msg.body = msg.body ? msg.body : defaults.body;
msg.subject = msg.subject || defaults.subject;msg.body = msg.body || defaults.body;
extend(msg, defaults);};
function extend (obj, defaults){for(var prop in defaults){
obj[prop] = obj[prop] || defaults[prop];}
};
![Page 20: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/20.jpg)
+ConceitosArquitetando código
• Em C#, o Assembly delimita o Package• Javascript é baseado em arquivos, que devem ser referenciados na ordem correta
• É possível separar logicamente isolando em namespaces, corrigindo esse possível problema
<html>...<script src="first.js"></script><script src="seccond.js"></script>
</html>
//first.jsvar y = 5;
//seccond.jslog(y);
//first.jsvar namespace=window.namespace|| {}(function(ns) {
ns.Cliente = function() {this.nome = "";
};})(window.namespace=window.namespace|| {});
//seccond.jsvar namespace=window.namespace|| {}(function(ns) {
ns.Animal = function() {this.comida = “nada";
};})(window.namespace=window.namespace|| {});
![Page 21: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/21.jpg)
+ConceitosReferenciando
• Assim como se usa ‘using’ em C# para referenciar bibliotecas de terceiros• Basta usar uma tag script para fazer o mesmo
• E sair usando
<html><script src="toastr.js"></script>
</html>
![Page 22: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/22.jpg)
![Page 23: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/23.jpg)
Quiz• “use strict” é equivalente ao “unsafe” do C#
• True• False
• Em “for (var p in produtos)” o sendo que ‘produtos’ é um array, ‘p’ é:• Um produto• O index do produto
• Em “for (var p in produto)” o sendo que ‘produto’ é um objeto, ‘p’ é:• O index do produto• Uma propriedade do produto• O nome de uma propriedade
![Page 24: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/24.jpg)
Quiz• “use strict” é equivalente ao “unsafe” do C#
• True• False
• Em “for (var p in produtos)” o sendo que ‘produtos’ é um array, ‘p’ é:• Um produto• O index do produto
• Em “for (var p in produto)” o sendo que ‘produto’ é um objeto, ‘p’ é:• O index do produto• Uma propriedade do produto• O nome de uma propriedade
![Page 25: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/25.jpg)
Resumo
• A qualidade do código pode ser melhorada com ‘use strict’
• Passar argumentos como • objetos inteiros dentro de functions• Functions por functions• Functions invocadas e já pegando o resultado
• Para usar bibliotecas, basta referenciar e chamar
• Reflection é sempre um bom recurso para fazer algo mais legal
![Page 26: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/26.jpg)
• Faça um montador de objetos dinâmico
![Page 27: Javascript para CSharpers 4 - Outros Conceitos](https://reader034.vdocuments.net/reader034/viewer/2022051414/559e7ff81a28ab431f8b46e4/html5/thumbnails/27.jpg)
Javascript para CSharpers
Javascript para desenvolvedores acostumados com os demais conceitos do .Net