Semana 3

Question

Semana 3

HenriqueSilverio opened this issue 11 years ago · comments

Henrique Silvério commented 11 years ago

Inicio: 02/03/2014 ~ Fim: 08/03/2014

Instruções: https://github.com/impJS/impAprendaJS/wiki/Semana-3

Observação: dúvidas recorrentes para esta semana deverão ser publicadas neste link.

Eric Douglas · Answer 1 · Mon Mar 03 2014 22:27:22 GMT+0800 (China Standard Time)

Tarefa	Status
Leitura artigo sobre Objetos	✔
Leitura Cap. 6, 7, 8	6✔ 7✔ 8✔
Codecademy 7 ao 16	✔
Projetos Codecademy	-

Dicas Interessantes

Usar o loop for quando se sabe até onde vai iterar, e o while quando o fim não é previsível.
Acessando objetos com notação de colchetes objeto["propriedade"], a string tem um valor dinâmico e pode mudar em tempo de execução. Utilizando a notação de ponto objeto.propriedade, o valor é estático e deve ser codificado no programa.
ctrl + shift + j abre diretamente no console do chrome devtools 🔎
Forma idiomática de se consultar uma propriedade/método em um objeto: var len = book && book.subtitle && book.subtitle.length. Se tudo for verdadeiro, irá retornar o último valor (à direita).

Henrique Silvério · Answer 2 · Mon Mar 03 2014 22:55:44 GMT+0800 (China Standard Time)

Tarefa	Status
Leitura: JavaScript Objects in Detail	✔
Leitura: Capítulos 6, 7, 8	✔
Codecademy 7 ao 16	✔
Basic Projects Codecademy	✔

Roteiro dessa semana concluido em: 07/03/2014

Dicas e Pontos Interessantes

Performance: Ao percorrer os itens de um Array com um loop for por exemplo, armazenar o valor de length em uma variável melhora a performance da aplicação, pois dessa forma evita-se que a propriedade seja acessada a cada laço que se repete. Exemplo:

// Geralmente fazemos assim:
var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for(var i = 0; i < myArray.length; i++) {
    console.log('Value: ' + myArray[i]);
}

// Exemplo com performance melhor:
var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for(var i = 0, len = myArray.length; i < len; i++) {
    console.log('Value: ' + myArray[i]);
}

Encadeamento de métodos: Ao criar métodos em uma função construtora por exemplo, pode ser muito útil retornar a referência ao objeto atual (e.g. return this), assim conseguimos chamar diversos métodos de forma consecutiva. Essa técnica é muito utilizada em bibliotecas como jQuery.

Referências adicionais sobre esse assunto:

Valor padrão para argumentos opcionais: Ao se trabalhar com funções construtoras é comum que elas recebam vários argumentos. Muitas vezes um ou mais argumentos podem ser opcionais, e nesses casos pode ser útil definir um valor padrão para cada.

Podemos utilizar de forma idiomática o operador || para fornecer valores padrão. No lado esquerdo colocamos o valor que pode ser ou não definido pelo programador na hora de chamar a função, e no lado direito colocamos o valor padrão, que será atribuído caso o programador não informe um valor manualmente. Para entender bem, nada melhor que um exemplo:

function Gadget(color, madeIn) {
    this.color  = color || 'gray';
    this.madeIn = madeIn || 'Brazil';
}

var gadget = new Gadget(),
    gadgetTwo = new Gadget('black');

console.log(gadget.color); // gray
console.log(gadgetTwo.color); // black

Funções e Arguments: Toda chamada de função é associada à um objeto arguments. Exemplo: se passarmos três argumentos para uma função que espera receber apenas dois, o terceiro argumento pode ser acessado no corpo da função através do objeto arguments. Esse objeto arguments é um objeto array-like, podemos acessar suas propriedades através de um índice numérico, e ele possui uma propriedade length. Note que passar "argumentos extras" não gera um erro de sintaxe.

var myFunc = function(paramOne, paramTwo) {
    console.log(paramOne);
    console.log(paramTwo);
    console.log(arguments[2]);
    console.log(arguments.length);
};

myFunc('HTML', 'CSS', 'JavaScript');

// HTML
// CSS
// JavaScript
// 3

No Capítulo 6, os tópicos 6.2.3 e 6.3 fornecem exemplos e explicações sobre algumas dúvidas que tinham sido levantadas na Semana 2 pelo @leo386386 aqui e aqui. =]

Fernando Daciuk · Answer 3 · Tue Mar 04 2014 08:36:54 GMT+0800 (China Standard Time)

Tarefa	Status
Leitura: JavaScript Objects in Detail	-
Leitura: Capítulos 6, 7, 8	-
Codecademy 7 ao 16	-
Projetos Codecademy	-

Leonardo Nascimento · Answer 4 · Tue Mar 04 2014 09:19:05 GMT+0800 (China Standard Time)

Concluído em: 08/03/2014
Os projetos do codeacademy vou finalizar amanhã!

Tarefa	Status
Leitura: JavaScript Objects in Detail	✔
Leitura: Capítulos 6 , 7 , 8 .	✔
Codecademy 7 ao 16 Perfil no codecademy.com	✔
Projetos Codecademy	0%

@HenriqueSilverio citou acima o trecho trecho que realmente fala sobre o assunto discutido na semana passada bem legal fixei mais os conceitos.

extend()

6.7 Função extend():Que serve para copiar propriedades de um objeto para outro,uma espécie de clone como existe no PHP bem bacana.

function union(o,p) { return extend(extend({},o), p); }

Outra coisa foi a forma que o @HenriqueSilverio também citou acima que podemos setar as variáveis passadas em uma função caso ela não possua um valor que foi definido ela tem um valor default que podemos atribuir por padrão. E a forma de receber a quantidade de parâmetros (argumentos) dinâmica muito útil sem mais...

Uma forma interessante que me chamou atenção foi neste exemplo citado no livro em que o operador || é usado na minha opinião de forma bem concisa.

var isArray = Function.isArray | | function (o) {
   retornar typeof o === "objeto" && 
   Object.prototype.toString.call (o) === "[objeto Array]"; 
};

Osmar CS · Answer 5 · Wed Mar 05 2014 05:34:46 GMT+0800 (China Standard Time)

Tarefa	Status
Leitura: JavaScript Objects in Detail	✔
Leitura: Capítulos 6, 7, 8	✔
Codecademy 7 ao 16	✔
Projetos Codecademy	✔

Anderson Pavia · Answer 6 · Thu Mar 06 2014 00:46:50 GMT+0800 (China Standard Time)

Tarefa	Status
Leitura: JavaScript Objects in Detail	✔
Leitura: Capítulos 6, 7, 8	✔
Codecademy 7 ao 16	%50
Projetos Codecademy	%0

Pedro Nauck · Answer 7 · Thu Mar 06 2014 06:47:54 GMT+0800 (China Standard Time)

Tarefa	Status
Leitura artigo sobre Objetos	✔
Leitura Cap. 6, 7, 8	6✖ 7✖ 8✖
Codecademy 7 ao 16	10%
Projetos Codecademy	-

Palmer Oliveira · Answer 8 · Sat Mar 08 2014 00:26:47 GMT+0800 (China Standard Time)

Tarefa	Status
Leitura: JavaScript Objects in Detail	✔
Leitura: Capítulos 6, 7, 8	6 ✔
Codecademy 7 ao 16	✔
Projetos Codecademy	✔

Eu Aprendi : A fazer (simular) a herança no javascript. Achei super interessante.

function Humano() {

}
Humano.prototype.nome = 'Humano sem nome';

function Homem() {

}
Homem.prototype = new Humano();
Homem.prototype.nome = 'Homem sem nome';

function Mulher() {

}
Mulher.prototype = new Humano();

// um homem
var roberto = new Homem();
console.log(roberto.nome);
roberto.nome = 'Roberto';
console.log(roberto.nome);

// uma mulher
var suzana = new Mulher();
console.log(suzana.nome);
suzana.nome = 'Suzana';
console.log(suzana.nome);

Jéssica · Answer 9 · Sat Mar 08 2014 23:53:13 GMT+0800 (China Standard Time)

Tarefa	Status
Leitura - JavaScript Objects in Detail	✔
Codecademy	100%
Leitura Cap. 6, 7, 8	6✔ 7✔ 8✖
Projetos Codecademy	✖
Curso Try jQuery	✖

Gustavo Rodrigues · Answer 10 · Sun Mar 09 2014 06:51:30 GMT+0800 (China Standard Time)

Tudo concluído dia 08/03/14