Javascript para Desenvolvedores C#
Sobre o cursoJavascript
Comparação
Parte 1:
Functions
Parte 2:
Conceitos
Parte 3:
POO
Parte 4:
Javascript para CSharpers
Javascript para desenvolvedores acostumados com os demais conceitos do .Net
+ConceitosSumário
• Lições práticas• Código estrito
• Laços
• Reflection
• A natureza do Javascript
• Arquitetando o código
• Bibliotecas
+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
+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 = [];
}
+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‘
}
+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];
}
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
+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);
+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);
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;
+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";
};
+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;
};
+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;
};
+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;
};
+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];}
};
+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|| {});
+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>
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
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
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
• Faça um montador de objetos dinâmico
Javascript para CSharpers
Javascript para desenvolvedores acostumados com os demais conceitos do .Net