Embed Size (px)
DESCRIPTION
Palestra sobre Javascript realizada no primeiro ciclo do Plano de Geração de Conhecimento realizado em outubro de 2013, no LEMAF - Universidade Federal de Lavras. O Plano de geração de conhecimento é um trabalho realizado para tutoria de desenvolvedores com estagiários no estudo de tecnologias, com o objetivo de disseminação de conhecimento. Palestra ministrada por Fernando Simeone , Carlos Eduardo Chessi Melo, Eduardo Assis da Silva e José Henrique Santos Andrade. ### Atualização 20/02/2015 Palestra melhorada, com algumas correções. Reapresentada por Fernando Simeone e Carlos Eduardo Chessi Melo na SETI (Semana de Tecnologia da Informação) na Universidade Federal de Lavras.
Citation preview
Javascript
Fernando SimeoneCarlos Eduardo Chessi Melo
LEMAF – Universidade Federal de Lavras
Referências
Carlos Eduardo Graduando em Sistemas de
Informação;
Desde de 2011 no LEMAF;
Há dois anos atuando na área de desenvolvimento de software;
Fernando Simeone Graduação em Ciência da
Computação (UFLA);
• Pós-graduação em Engenharia de Software Centrada em Métodos Ágeis (UNA);
• Mestrado em Ciência da Computação (em andamento)
• Há 7 anos trabalhando com desenvolvimento (desde 2010 no LEMAF).
Introdução
A linguagem
• 1995 – Netscape 2
• Interpretada
• Linguagem de scripts para páginas web
• NodeJS
Página web
HTML CSS
Javascript
ApresentaçãoConteúdo
Comportamento
Antes e agora
Application
Conhecimento
JQueryMootools
KnockoutAngularJS
BackboneJS
Javascript
ExecuçãoJava Javascript
hello() -------------------
-----------
User.java
hello() -------------------
-----------
Car.java
hello() -------------------
-----------
Client.java
hello() -------------------
-----------
Product.java
main() -------
-----------------------
App.java
<html><script><script></html>
index.html
function() { ... }
User.js
function() { ... }
Car.js
function() { ... }
App.js
1
2
3
Variáveis e Operadores
Declaração
var cargo = “desenvolvedor”;
Palavrareservada
Nome davariável
Operador atribuição
Valor (literal ou outra variável)
Tipos e LiteraisString “Desenvolvedor”
‘DBA’
Number 1 3.14 1e2 1E2 5E2
Boolean true false
Object
{ “id”: 12, nome: “João”, perfil: { id: 1 }}
Array [1, true, ‘test’, {}, [3]]
Function function test (arg) {}
Regular Expression /\w+\s/
1*(10^2)
5*(10^2)
Operações
var a = 10 + 5; // a = 15
a += 4; // a = 19
a++; // a = 20
a = a / 2; // a = 10
a = a * 2; // a = 20
2 == “2”; // true
2 === “2”; // false
Tipos e ConversõesparseInt(3.4) // 3
parseInt(“4.7”) // 4parseFloat(5) // 5
parseFloat(“4.5”) // 4.5
(6.4).toString() // “6.4”
typeof 5 // “number”
typeof “5” // “string”
typeof {} // “object”
typeof null // “object”
typeof [] // “object”
[] instanceof Array // true
NaN e isNaNparseInt(“3“) // 3
parseInt(“tres”) // NaN
isNaN(“4”) // false
isNaN(“3.4”) // false
isNaN(“quatro”) // true
isNaN(4) // false
isNaN(NaN) // true
NaN == NaN // false
typeof NaN // “number”
not a number
Falsy Valuesfalse
null
undefined
“”
‘’
0
NaN
Operações com Expressões
Lógicasvar user = {};var rua = user.endereco.rua; // TypeError
var rua = user.endereco && user.endereco.rua; // trata erro
var i = 1 || 10;var num = 0 || 10;
Estrutura de Controle
Ifif (user && user.name) { // ...} else if (name) { // ...} else { // ...}
x = (condicao) ? 10 : 20;
Forfor (i = 0; i < 3; i++) { // ...}
• i = 0• i = 1• i = 2
{ id: 1, nome: “João”, idade: 26}
• p = “id”• p = “nome”• p = “idade”
for (p in obj) { // ...}
Switchswitch (x) { case 1: // ... break;
case “test”:
// ... break;
case y:
case w: // ... break;
default:
//...}
Expressão pode gerarNumber ou String
Cláusula Case nãoprecisa ser constante
Whilewhile (exp_condicao) {
// ...
}
do {
// ...
} while (exp_condicao);
Objetos
Objetosvar usuario = {
id: 12,
nome: “João”,
casado: false,
“cpf-cnpj”: 12222233322,
endereco: {}
};
usuario.nome // “João”
usuario[“nome”] // “João”
usuario.nome = “José”; // atribuindo nome
usuario[“nome”] = “José”; // atribuindo nome
delete usuario.nome; // deleta a prop.
usuario.nome // undefined
usuario.sexo = “masculino”; // cria um novo atributo
usuario.hasOwnProperty(“nome”); // false
Funções
var multiplica = function (n1, n2) {
return n1 * n2;
};
Declaração e Chamada
function soma (n1, n2) {
return n1 + n2;
}
Função anônima
Se não tiver “return”, o valor retornado é undefined
soma(3, 5); // retorna 8
multiplica(5, 10); // retorna 50
Argumentosfunction soma (n1, n2) { return n1 + n2;}
soma (3, 4, 5, 6, 7); // argumentos 5, 6, 7 serão ignorados
soma (); // retorna undefined
ArgumentsToda função recebe uma variável arguments, que
é um objeto similar a um array.
function testArgs() { return arguments.length;}
testArgs(1, 4, 5, 2); // retorna 4testArgs(true, false) // retorna 2testArgs( [1, 2, 3] ) // retorna 1
Acessando itens de arguments
function soma () {
var result = 0,
i = 0;
for (i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
soma (1, 3, 6, 1); // retorna 11
Escopos e Closures
EscopoEscopos são definidos por funções.
function () {
var i = 3;
// um monte de código aqui.
for (var i = 0; i < 10; i++) {
// ...
}
}
Declaraçãoduplicada
EscopoArquivo teste.js
Escopo Global
Escopo função soma
Escopo função teste
Escopo função testeInterno
var x = 1;
function soma (n1, n2) {
return n1 + n2;}
function teste () {
var y = 3;
function testeInterno () {
var z = 4; w = 10; // variável global }}
Closure
Closure é uma função que referencia as variáveis que
foram declaradas no mesmo escopo que ela.
Em Javascript, todas as funções são closures.
Closure
sayHello = null
msg = “Hello!”
var sayHello = null;
function init() {
var msg = “Hello!”;
sayHello = function() {
alert(msg);
};
}
init();
sayHello = Function
Escopo referenciado pela função
sayHello(); // exibe “Hello!”
Chamada de Funções e this
Chamadas de Função
• Método
• Função
• Construtor
• Apply e Call
obj.sayHello();
sayHello();
new sayHello();
sayHello.apply(obj, [p1, p2]);sayHello.call(obj, p1, p2);
Chamada tipo “método”
var user = {
name: “João”,
sayHello: function(n) {
this.name = n
alert(this.name);
}
};
Chamada utilizando ponto
user.sayHello(“Pedro”); // Altera “nome” do objeto e exibe “Teste”
Chamada tipo “função”
function sayHello(text){
alert(text);
}
sayHello(“teste”);
// Exibe “teste” e retorna undefined
Chamada tipo “função”var user = {
name: “João”,
sayHello: function(n) {
this.name = n
alert(this.name);
}
};
Chamada não utilizando ponto
var hello2 = user.sayHello;
hello2(“teste”);
// Exibe “teste” e retorna undefined e
// não altera o objeto
Chamada tipo “Construtor”
function User (username) {
this.name = username;
}
Chamada utilizando new
var user1 = new User(“joao”);
// retorna um novo objeto
// com a propriedade “name” = “joao”.
Apply e Call
user.sayHello.apply(obj2, [“teste”]);
var user = {
name: “João”,
sayHello: function(n) {
this.name = n
alert(this.name);
}
};
var obj2 = {};
user.sayHello.call(obj2, “teste”);
“Orientação a Objetos”
ExemploAnimal
- peso+ nome
+ andar(distancia);
Cachorro+ raça
+ latir();
Função Construtora
function Animal(nome, peso) { this.nome = nome; this._peso = peso;}
var a = new Animal(“Jimmy”, 20);
Animal
- peso+ nome
+ andar(distancia);
Prototype
Object
Animal
prototype
function Animal(nome, peso) { this.nome = nome; this._peso = peso;
}
Animal.prototype = {};
PrototypeAnimal.prototy
pe
Animal { }
__proto__
a1 = new Animal();
a1.andar(40);a1.toString();a1.__proto__ == a2.__proto__; // true
Animal { }
a2 = new Animal();
__proto__
Animal { }
a3 = new Animal();
__proto__
Prototypefunction Animal(nome, peso) { this.nome = nome; this._peso = peso;}
Animal.prototype.andar = function(d){
alert(“andando ” + d + “ Km”);};
var a = new Animal();a.andar(400); // andando 400 km
Herançafunction Cachorro(raca) { this.raca = raca;}
Animal
Cachorro
+ raça
+ latir();+ getPeso();
Cachorro.prototype = new Animal();
Cachorro.prototype.latir = function(){alert(“augh”);
};
var c = new Cachorro();c.andar(400); // andando 400 kmc.latir(); // augh
Padrões
Module Pattern
function mover(obj, direcao, dist) { // alguma implementação aqui }
function Animal(nome) { this.nome = nome;}
Animal.prototype.andar = function(d) { mover(this, “right”, d);}
Animal.js
Module Pattern
function mover() { // alguma outra implementação aqui }
// ... Mais código aqui
OutroArquivo.js
Module Pattern
function () {
}
(
)
function mover(obj, direcao, dist) {
// alguma implementação aqui
}
function Animal(nome) {
this.nome = nome;
}
Animal.prototype.andar = function(d) {
mover(this, “right”, d);
}
window.Animal = Animal;
();
Callbackvar pessoa = get("http://myapp.com/pessoas/12");
alert(pessoa.nome); //undefined get("http://myapp.com/pessoas/12", function (){ alert(pessoa.nome) }); get("http://myapp.com/pessoas/12", function (){ console.log(pessoa.nome) });
function() { // Sua implementação aqui.
}
alert(“Obrigado”);
