fundo
Eu sou um desenvolvedor Java mergulhando em JavaScript usando How To Learn JavaScript Properly e o recurso do curso reddit .
Estou usando o livro Professional JavaScript For Web Developers, 3rd Edition, que pode ser adquirido na Amazon e está disponível gratuitamente aqui . Salvo indicação em contrário, todos os números de página são deste livro.
Estarei adicionando dicas, truques e coisas interessantes da perspectiva de um desenvolvedor Java aprendendo JavaScript. Isso será atualizado regularmente.
Semana 1 e 2
nulo vs indefinido
(Pg. 33)
var car = null; //null
var horse; //undefined
car == horse; //true
car === horse; //false
analisando números
(Pág. 40)
usar parseInt()
e em parseFloat()
vez de Number()
.
var num = parseInt("1234blue"); //1234
especifique a raiz ao analisar.
(Pg. 41)
var num1 = parseInt("10", 2); //2 - parsed as binary
var num2 = parseInt("10", 8); //8 - parsed as octal
var num3 = parseInt("10", 10); //10 - parsed as decimal
var num4 = parseInt("10", 16); //16 - parsed as hexadecimal
funções
declaração de função
function add(num1, num2) {
return num1 + num2;
}
e
expressão de função
var add = function(num1, num2) {
return num1 + num2;
}
codecademia
O editor do Codecademy está bem se você conhece alguns atalhos. No OS X , os atalhos são geralmente emacs
formais.
cntrl-a
– início da linha.cntrl-e
– fim da linha.cntrl-k
– matar até o fim da linha.cntrl-n
– descer uma linha.cntrl-p
– mais uma linha.cntrl-d
– exclui um caractere para frente.command-return
– execute o código.option-p
– vá para a próxima.
Semana 3 e 4
diversão com matrizes
arrays são muito semelhantes aos do java, mas possuem alguns métodos adicionais.
var numbers = [1,2,3,4];
var num = numbers[1]; //num = 2
array como pilha
numbers.push(5);
numbers.push(5,6,7);
numbers.pop();
array como fila
numbers.push(5,6,7);
numbers.shift();
Aplique
function add(num1, num2) {
return num1 + num2;
}
var numArray = [1,2];
pode passar a matriz diretamente para a add
função usandoapply
add.apply(this, numArray);
um exemplo real com Math
. Veja como obter o resultado max
de um array.
(Pág. 167)
var values = [1,2,3,4,5,6,7,8];
var max = Math.max.apply(Math, values);
this
é o contexto. O contexto pode ser alterado para algum outro objeto diferente deste. Aqui usamos call
, que é o mesmo que apply
, mas leva argumentos diretamente em vez de como um array.
add.call(this, 1,2);
(Pág. 145)
window.color = "red";
var o = { color: "blue" };
function sayColor() {
alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
objetos
criação de objeto simples
(Pág. 173)
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function() {
alert(this.name);
};
criação de objeto simples com notação literal de objeto (padrão preferido)
var person = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function() {
alert(this.name);
};
OOP
padrão de construtor / protótipo:
(Pg. 197)
O padrão de construtor define propriedades de instância, enquanto o padrão de protótipo define métodos e propriedades compartilhadas, mas todos eles compartilham referências a métodos, conservando memória. Esse padrão permite que os argumentos sejam passados para o construtor também, combinando com eficácia as melhores partes de cada padrão.
Os outros padrões e as vantagens disso são complexos demais para este contexto. Consulte o Capítulo 6 para obter mais detalhes.
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function() {
alert(this.name);
}
};
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
person1.friends; // "Shelby, Court, Van"
person2.friends; // "Shelby, Court"
person1.friends === person2.friends //false
person1.sayName === person2.sayName //true
herança: Herança de combinação
(Pág. 209)
Herança de combinação (às vezes também chamada de herança pseudoclássica) combina encadeamento de protótipo e roubo de construtor para obter o melhor de cada abordagem. A ideia básica é usar encadeamento de protótipo para herdar propriedades e métodos no protótipo e usar roubo de construtor para herdar propriedades de instância. Isso permite a reutilização da função definindo métodos no protótipo e permite que cada instância tenha suas próprias propriedades.
function SuperType(name){
this.name = name;
this.colors = [“red”, “blue”, “green”];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
//inherit properties SuperType.call(this, name);
this.age = age; }
//inherit methods
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){ alert(this.age);
};
var instance1 = new SubType(“Nicholas”, 29);
instance1.colors.push(“black”);
alert(instance1.colors); //”red,blue,green,black”
instance1.sayName(); //"Nicholas"
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red, blue, green"
instance2.sayName(); //"Greg"
instance2.sayAge(); //27