Javascript
Fernando Simeone
Carlos 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
desenvol...
Fernando Simeone
 Graduação em Ciência da Computação
(UFLA);
• Pós-graduação em Engenharia de
Software Centrada em Método...
Introdução
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
Antes e agora
Application
Conhecimento
JQuery
Mootools
KnockoutAngularJS
BackboneJS
Javascript
Execução
Java Javascript
hello()
-------
--------
----
--------
---
User.java
hello()
-------
--------
----
--------
---
C...
Variáveis e
Operadores
Declaração
var cargo = “desenvolvedor”;
Palavra
reservada
Nome da
variável
Operador
atribuição
Valor (literal ou outra
var...
Tipos e Literais
String
“Desenvolvedor”
‘DBA’
Number 1 3.14 1e2 1E2 5E2
Boolean true false
Object
{
“id”: 12,
nome: “João”...
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”; /...
Tipos e Conversões
parseInt(3.4) // 3
parseInt(“4.7”) // 4
parseFloat(5) // 5
parseFloat(“4.5”) // 4.5
(6.4).toString() //...
NaN e isNaN
parseInt(“3“) // 3
parseInt(“tres”) // NaN
isNaN(“4”) // false
isNaN(“3.4”) // false
isNaN(“quatro”) // true
i...
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....
Estrutura de
Controle
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”
...
Switchswitch (x) {
case 1:
// ...
break;
case “test”:
// ...
break;
case y:
case w:
// ...
break;
default:
//...
}
Express...
While
while (exp_condicao) {
// ...
}
do {
// ...
} while (exp_condicao);
Objetos
Objetos
var usuario = {
id: 12,
nome: “João”,
casado: false,
“cpf-cnpj”: 12222233322,
endereco: {}
};
usuario.nome // “Joã...
Funções
var multiplica = function (n1, n2) {
return n1 * n2;
};
Declaração e
Chamadafunction soma (n1, n2) {
return n1 + n2;
}
Fun...
Argumentos
function soma (n1, n2) {
return n1 + n2;
}
soma (3, 4, 5, 6, 7);
// argumentos 5, 6, 7 serão ignorados
soma ();...
Arguments
Toda função recebe uma variável arguments, que
é um objeto similar a um array.
function testArgs() {
return argu...
Acessando itens de
arguments
function soma () {
var result = 0,
i = 0;
for (i = 0; i < arguments.length; i++) {
result += ...
Escopos e Closures
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++...
EscopoArquivo teste.js
Escopo Global
Escopo função soma
Escopo função teste
Escopo função testeInterno
var x = 1;
function...
Closure
Closure é uma função que
referencia as variáveis que
foram declaradas no mesmo escopo
que ela.
Em Javascript, toda...
Closure
sayHello = null
msg = “Hello!”
var sayHello = null;
function init() {
var msg = “Hello!”;
sayHello = function() {
...
Chamada de
Funções e this
Chamadas de
Função
• Método
• Função
• Construtor
• Apply e Call
obj.sayHello();
sayHello();
new sayHello();
sayHello.appl...
Chamada tipo “método”
var user = {
name: “João”,
sayHello: function(n) {
this.name = n
alert(this.name);
}
};
Chamada util...
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 ...
Chamada tipo
“Construtor”function User (username) {
this.name = username;
}
Chamada utilizando new
var user1 = new User(“j...
Apply e Call
user.sayHello.apply(obj2, [“teste”]);
var user = {
name: “João”,
sayHello: function(n) {
this.name = n
alert(...
“Orientação a Objetos”
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);
A...
Prototype
Object
Animal
prototype
function Animal(nome, peso) {
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...
Prototype
function Animal(nome, peso) {
this.nome = nome;
this._peso = peso;
}
Animal.prototype.andar = function(d){
alert...
Herança
function Cachorro(raca) {
this.raca = raca;
}
Animal
Cachorro
+ raça
+ latir();
+ getPeso();
Cachorro.prototype = ...
Padrões
Module Pattern
function mover(obj, direcao, dist) {
// alguma implementação aqui
}
function Animal(nome) {
this.nome = nom...
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(nom...
Callback
var pessoa = get("http://myapp.com/pessoas/12");
alert(pessoa.nome); //undefined
get("http://myapp.com/pessoas/12...
function() {
// Sua implementação aqui.
}
alert(“Obrigado”);
Próximos SlideShares
Carregando em…5
×

Javascript

858 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Javascript

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

×