Download - Javascript
![Page 1: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/1.jpg)
Javascript
Fernando SimeoneCarlos Eduardo Chessi Melo
LEMAF – Universidade Federal de Lavras
![Page 2: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/2.jpg)
Referências
![Page 3: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/3.jpg)
Carlos Eduardo Graduando em Sistemas de
Informação;
Desde de 2011 no LEMAF;
Há dois anos atuando na área de desenvolvimento de software;
![Page 4: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/4.jpg)
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).
![Page 5: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/5.jpg)
Introdução
![Page 6: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/6.jpg)
A linguagem
• 1995 – Netscape 2
• Interpretada
• Linguagem de scripts para páginas web
• NodeJS
![Page 7: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/7.jpg)
Página web
HTML CSS
Javascript
ApresentaçãoConteúdo
Comportamento
![Page 8: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/8.jpg)
Antes e agora
Application
![Page 9: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/9.jpg)
Conhecimento
JQueryMootools
KnockoutAngularJS
BackboneJS
Javascript
![Page 10: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/10.jpg)
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
![Page 11: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/11.jpg)
Variáveis e Operadores
![Page 12: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/12.jpg)
Declaração
var cargo = “desenvolvedor”;
Palavrareservada
Nome davariável
Operador atribuição
Valor (literal ou outra variável)
![Page 13: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/13.jpg)
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)
![Page 14: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/14.jpg)
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
![Page 15: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/15.jpg)
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
![Page 16: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/16.jpg)
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
![Page 17: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/17.jpg)
Falsy Valuesfalse
null
undefined
“”
‘’
0
NaN
![Page 18: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/18.jpg)
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;
![Page 19: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/19.jpg)
Estrutura de Controle
![Page 20: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/20.jpg)
Ifif (user && user.name) { // ...} else if (name) { // ...} else { // ...}
x = (condicao) ? 10 : 20;
![Page 21: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/21.jpg)
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) { // ...}
![Page 22: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/22.jpg)
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
![Page 23: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/23.jpg)
Whilewhile (exp_condicao) {
// ...
}
do {
// ...
} while (exp_condicao);
![Page 24: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/24.jpg)
Objetos
![Page 25: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/25.jpg)
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
![Page 26: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/26.jpg)
Funções
![Page 27: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/27.jpg)
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
![Page 28: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/28.jpg)
Argumentosfunction soma (n1, n2) { return n1 + n2;}
soma (3, 4, 5, 6, 7); // argumentos 5, 6, 7 serão ignorados
soma (); // retorna undefined
![Page 29: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/29.jpg)
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
![Page 30: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/30.jpg)
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
![Page 31: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/31.jpg)
Escopos e Closures
![Page 32: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/32.jpg)
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
![Page 33: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/33.jpg)
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 }}
![Page 34: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/34.jpg)
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.
![Page 35: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/35.jpg)
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!”
![Page 36: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/36.jpg)
Chamada de Funções e this
![Page 37: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/37.jpg)
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);
![Page 38: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/38.jpg)
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”
![Page 39: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/39.jpg)
Chamada tipo “função”
function sayHello(text){
alert(text);
}
sayHello(“teste”);
// Exibe “teste” e retorna undefined
![Page 40: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/40.jpg)
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
![Page 41: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/41.jpg)
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”.
![Page 42: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/42.jpg)
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”);
![Page 43: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/43.jpg)
“Orientação a Objetos”
![Page 44: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/44.jpg)
ExemploAnimal
- peso+ nome
+ andar(distancia);
Cachorro+ raça
+ latir();
![Page 45: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/45.jpg)
Função Construtora
function Animal(nome, peso) { this.nome = nome; this._peso = peso;}
var a = new Animal(“Jimmy”, 20);
Animal
- peso+ nome
+ andar(distancia);
![Page 46: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/46.jpg)
Prototype
Object
Animal
prototype
function Animal(nome, peso) { this.nome = nome; this._peso = peso;
}
Animal.prototype = {};
![Page 47: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/47.jpg)
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__
![Page 48: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/48.jpg)
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
![Page 49: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/49.jpg)
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
![Page 50: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/50.jpg)
Padrões
![Page 51: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/51.jpg)
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
![Page 52: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/52.jpg)
Module Pattern
function mover() { // alguma outra implementação aqui }
// ... Mais código aqui
OutroArquivo.js
![Page 53: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/53.jpg)
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;
();
![Page 54: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/54.jpg)
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) });
![Page 55: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/55.jpg)
function() { // Sua implementação aqui.
}
![Page 56: Javascript](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5576243cd8b42a4e1c8b4ee5/html5/thumbnails/56.jpg)
alert(“Obrigado”);