Javascript

Javascript
Fernando Simeone
Carlos Eduardo Chessi Melo
LEMAF – Universidade Federal de Lavras

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).

A linguagem
• 1995 – Netscape 2
• Interpretada
• Linguagem de scripts para páginas web
• NodeJS

Página web
HTML CSS
Javascri
pt
ApresentaçãoConteúdo
Comportamento

Conhecimento
JQuery
Mootools
KnockoutAngularJS
BackboneJS
Javascript

Execução
Java 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

Declaração
var cargo = “desenvolvedor”;
Palavra
reservada
Nome da
variável
Operador
atribuição
Valor (literal ou outra
variável)

Tipos e Literais
String
“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ões
parseInt(3.4) // 3
parseInt(“4.7”) // 4
parseFloat(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 isNaN
parseInt(“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 Values
false
null
undefined
“”
‘’
0
NaN

Operações com
Expressões Lógicas
var user = {};
var rua = user.endereco.rua; // TypeError
var rua = user.endereco && user.endereco.rua;
// trata erro
var i = 1 || 10;
var num = 0 || 10;

If
if (user && user.name) {
// ...
} else if (name) {
// ...
} else {
// ...
}
x = (condicao) ? 10 : 20;

For
for (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 gerar
Number ou String
Cláusula Case não
precisa ser constante

While
while (exp_condicao) {
// ...
}
do {
// ...
} while (exp_condicao);

Objetos
var 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

var multiplica = function (n1, n2) {
return n1 * n2;
};
Declaração e
Chamadafunction 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

Argumentos
function soma (n1, n2) {
return n1 + n2;
}
soma (3, 4, 5, 6, 7);
// argumentos 5, 6, 7 serão ignorados
soma ();
// retorna undefined

Arguments
Toda 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 4
testArgs(true, false) // retorna 2
testArgs( [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

Escopo
Escopos são definidos por funções.
function () {
var i = 3;
// um monte de código aqui.
for (var i = 0; i < 10; i++) {
// ...
}
}
Declaração
duplicada

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!”

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”,
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”,
this.name = n
alert(this.name);
}
};
var obj2 = {};
user.sayHello.call(obj2, “teste”);

Exemplo
Animal
- 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
+

Prototype
Object
Animal
prototype
this.nome = nome;
this._peso = peso;
}
Animal.prototype = {};

Prototype
Animal.prototype
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__

Prototype
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ça
function 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 km
c.latir(); // augh

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;
();

Callback
var 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.
}

Javascript

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Javascript

Similaire à Javascript (20)

Plus de Fernando Simeone

Plus de Fernando Simeone (6)

Javascript