Javascript para CSharpers 3 - Conceitos

Javascript para
Desenvolvedores C#

Sobre o curso
Javascript
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

+Conceitos
Sumá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 para
uso futuro
y = 'algum valor'
var x = { name: 'c1', name: 'c2' };
var array = [1, 2, 3, 4, 5];
array.length = 8;
delete array;
implements interface
package private
protected public
static yield
class enum
function(p1, p2, p1) {
arguments = [];
}

+Conceitos
Iteraçõ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
}
//Javascript
var array = ['um', 'dois', 'três'];
for (var s in array) {
log(s) //0, 1, 2, ??
log(array[s]) //'um', 'dois‘
}

+Conceitos
Reflection
• 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];
}

Javascript para CSharpers 3 - Conceitos

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ícios
Reflection

+Conceitos
Natureza 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 construtor
var msg = new MailMessage("from@mail.com","to@mail.com");
msg.Body = "Hello";
msg.Subject = "Test Message";
//Chamando método
server.Send(msg);

+Conceitos
• No Javascript, é possível passar um parâmetro “aberto”
• DuckTyping te permite construir objetos em qualquer lugar
//Javascript
var server = new SmtpClient();
//Construtor
var msg = {
to: 'to@email.com',
from: 'from@email.com',
body: 'Hello',
subject: 'Test msg'
};
//Chamando
server.send({
});
server.send(msg);

Exercícios
Validaçõ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;

+Conceitos
• 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";
};

+Conceitos
• No Javascript
var defaults = {
subject: 'No Subject',
body: 'No Body'
};
if (!msg.subject) msg.subject = defaults.subject;
if (!msg.body) msg.body = defaults.body;
};

+Conceitos
• No Javascript
var defaults = {
body: 'No Body'
};
msg.subject = msg.subject ? msg.subject : defaults.subject;
msg.body = msg.body ? msg.body : defaults.body;
};

+Conceitos
• No Javascript
var defaults = {
body: 'No Body'
};
msg.subject = msg.subject || defaults.subject;
msg.body = msg.body || defaults.body;
};

+Conceitos
• No Javascript
var defaults = {
body: 'No 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];
}
};

+Conceitos
Arquitetando 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.js
var y = 5;
//seccond.js
log(y);
//first.js
var namespace=window.namespace|| {}
(function(ns) {
ns.Cliente = function() {
this.nome = "";
};
})(window.namespace=window.namespace|| {});
//seccond.js
var namespace=window.namespace|| {}
(function(ns) {
ns.Animal = function() {
this.comida = “nada";
};
})(window.namespace=window.namespace|| {});

+Conceitos
Referenciando
• 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

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 3 - Conceitos

Mais conteúdo relacionado

Mais procurados (18)

Destaque (16)

Semelhante a Javascript para CSharpers 3 - Conceitos (20)

Mais de Wesley Lemos (11)

Último (7)

Javascript para CSharpers 3 - Conceitos

Notas do Editor