JavaScript, Ajax & jQuery

Professor: João Ricardo Bastos

E-mail: joaoricardobastos@gmail.com
MSN: joaoricardobastos@hotmail.com
Ementa do Curso
 Linguagem JavaScript (4 aulas)
 Introdução
 Estrutura Léxica
 Variáveis, Tipos de Dados e Valores
 Operadores, Estruturas de Controle e Funções
 Array e Objetos

 Client-Side JavaScript (2 aulas)

 DOM
 Objetos: Window, Document e Form
 Eventos

 Ajax (1 aula)
 Objeto XMLHttpRequest
 Requisições assíncronas, loadings e callbacks
 Manipulações XML

 jQuery (4 aulas)
 Seletores e Métodos
 Eventos e Animações
 Validações e Ajax
Já estudamos:
 Introdução
 Origem; linguagem interpretada; Browsers são os interpretadores
 Estrutura Léxica
 Comentários (/**/, //); Case Sensitive; ponto-e-vírgula opcional; palavras reservadas
 Tipos de dados e valores
 numbers
 strings
 booleanos
 Operadores
 +, -,*, /, %, ++, --, ==, ===, !=, !==, <, >, <=, >=, &&, ||, !
 Estruturas de Controle
 if – else if – else
 switch
 while
 do-while
 for
 for-in
 Funções
 Definição; Declaração; Execução; objeto arguments
 Variáveis
 Declaração; escopo; uso do var
Aula 4 – Vamos estudar:
 Arrays

 Objetos
Arrays

 Definição
 Criando Arrays
 Elementos de um Array

 Propriedade e Métodos
 length
 join(), sort(), reverse(), concat()
 slice(), splice()
 Arrays como pilhas e filas
 push(), pop(), unshift() e shift()
Arrays
 Array é um tipo de dado que armazena valores em uma lista
numerada
 Podemos dizer que Arrays são coleções de dados

 Cada valor numerado é chamado de elemento, enquanto o

número atribuído a um elemento é chamado índice

 Um elemento do array pode ser de qualquer tipo, inclusive um

outro array
 Semelhante às strings, cada elemento é referenciado por um
índice. Porém, com arrays podemos criar um grupo com
diferentes tipos de valores, e não apenas um conjunto de
caracteres
 Ex.:
 String: var nome = “Joao Ricardo”;
 Array: var grupo = [“joao”, 10, true, 2.5, new Array(2)];
 grupo[0] = “joao”; grupo[1] = 10; grupo[2] = true; e assim por diante
Arrays
Criando Arrays: Construtor Array()
 Utilizamos o operador new para instanciar um novo array
 var a = new Array();

 O parâmetro utilizado no construtor Array() influencia

diretamente a forma como o array será criado:
 Para criar um array vazio:
 var a = new Array(); // temos um array vazio; sem elementos.

 Passando um único valor numérico(n), cria-se um array de n

posições, e cada elemento assume o valor undefined
 var a = new Array(10); // array com 10 elementos undefined

 Quando queremos criar um array já com alguns elementos,

passamos nossos elementos por parâmetro
 var a = new Array(5, 4, “joao”, 2.5); // temos um array com os
primeiros n elementos: a[0] = 5; a[1] = 4; a[2] = “joao”; a[3] = 2.5;
Arrays
Criando Arrays: Literais de array
 Os literais de array nos permite criar arrays de outra
forma, sem ser utilizando new Array();

 var a = [5, 4.1, “joao”, true];

 Array com 4 posições, sendo:
 a[0] = 5 (number)
 a[1] = 4.1 (number)
 a[2] = “joao” (string)
 a[3] = true (boolean)

 Os literais de array podem conter literais de objetos e

outros literais de array
 var b = [[1, 2], {nome:“joao”, sobrenome:”ricardo”}]
 b[0] = array com os valores 1 e 2
 b[1] = um objeto literal
Arrays
Acessando elementos do array: operador [ ]
 Nós podemos acessar os elementos de um
array utilizando o operador []
 Sintaxe: array[indice]
 Podemos usar essa sintaxe para ler e escrever
o valor de um elemento do array
 Ex.:
Antes: a = [5, 4, “joao”, 2.5];
a[0] = “ze”;
a[3] = a[1];
Depois: a = [“ze”, 4, “joao”, 4];
Arrays
Adicionando novos elementos:
 Basta atribuir valores:
 Ex.: a[10] = “ajax”;

 Os índices não precisam ser contínuos:

 a = new Array();
a[1] = “joao”; a[10] = “elemento qualquer”;
 Isso significa que temos:
a[0] = undefined
a[1] = “joao”
a[2] até a[9] = undefined
a[10] = “elemento qualquer”
 Não é recomendado trabalhar com arrays desta maneira
 Alocação de memória desnecessária
 Ruim para percorrer o array

 Boas práticas: utilize os métodos para manipular sua coleção de dados

Arrays
 Propriedade length
 Informa o tamanho do array, ou seja, a quantidade de elementos
existentes na nossa coleção de dados
 Ex.: var a = new Array(“joao”, “ricardo”); // a.length = 2
 Podemos modificar o valor do length
 Mudando o valor, podemos truncar ou aumentar nosso array
 Lembrando: se aumentarmos o valor, criaremos elementos undefined

 Método join()
 Converte todos os elementos em string e os concatena
 Podemos usar uma string opcional que será utilizada para separar
os elementos na string resultante. Se nenhuma string for passada
por parâmetro, utiliza-se a vírgula
 Ex:
var a = new Array(“joao”, “ricardo”, “bastos”); // array 3 elementos
var nome = a.join(“ “); // espaço em branco
document.write(nome); // imprime a string “joao ricardo bastos”
 É o inverso de string.split();
Arrays
 Método reverse()
 Inverte a ordem dos elementos de um array
 Não cria outro array; o método altera o próprio array
 Ex:
var a = new Array(“joao”, “ricardo”, “bastos”); // array 3 elementos
a.reverse(); // não precisa guardar o resultado em outra variável
// a agora tem a seguinte ordem:
// a[0] = “bastos”; a[1] = “ricardo”; a[2] = “joao”

 Método concat()
 Cria e retorna um array que contém o array original + os
elementos passados por parâmetro
 Os novos elementos são colocados no fim do novo array
 Ex:
var a = new Array(“joao”, “ricardo”); // array 2 elementos
var novo = a.concat(“bastos“, 5); // novos elementos
// ‘novo’ agora é um array com “joao”, “ricardo”, “bastos”, 5
Arrays
 Método sort()
 Ordena os elementos de um array em ordem alfabética
 Aceita uma função como parâmetro opcional
 Essa função é usada para alterar a maneira da ordenação
 Por exemplo, uma ordenação numérica ao invés de alfabética
 Assim como o reverse(), Não cria outro array
 Ex: var a = new Array(1, 2, 10, 200, 3);
a.sort(); // ordenação alfabética
// a = 1, 10, 2, 200, 3
a.sort(ordenacao_numerica);
// a = 1, 2, 3, 10, 200

function ordenacao_numerica(a,b) {
return a-b;
}
Arrays
Arrays como Pilhas e Filas:
 Métodos:
 unshift() insere 1 ou mais elementos no início de um array
 push() insere 1 ou mais elementos no final de um array
 shift() retira o primeiro elemento de um array
 pop() retira o último elemento de um array

 Fila
 FIFO – First In, First Out
 Métodos push() e shift()
 Atendimento Preferencial: método unshift()
 Ex.: Idoso passar na frente dos outros em uma fila de um banco capenga, sem
fila preferencial
 Pilha
 FILO – First In, Last Out
 Métodos push() e pop()
Objetos
Objetos

 São tipos compostos de dados

 Agregam múltiplos valores numa única unidade e

permitem armazenar e recuperar esses valores por
nome
 Diferente dos arrays, que são pelos índices

 Os objetos possuem uma coleção de propriedades:

 Valores primitivos (number, string, boolean)
 Objetos
Objetos

 JavaScript não é uma linguagem orientada a

objetos completamente desenvolvida

 Não implementa alguns conceitos nativos da POO

 Herança
 Atributos públicos e privados
 Constantes

 Precisamos “simular” um ambiente Orientado a

Objetos usando os artifícios que a linguagem
oferece
Objetos
Criando Objetos: Construtor
 Para criarmos um objeto, precisamos da definição de sua
estrutura de dados. Essa estrutura é chamada de classe, ou
construtor no JavaScript

 Em JavaScript, um construtor é uma função comum

 É instanciada em uma variável
 Uso do operador new

 Ex.: Criando uma classe e uma instância dessa classe

function Circulo() {
}

var circ = new Circulo();

Objetos
Criando Objetos: Literais de objeto

 Uma outra forma de criar objetos é através dos

literais de objetos

 Consiste em uma lista de propriedades separadas por

vírgulas dentro de chaves { }
 var obj = {prop1:valor1, prop2:valor2}
Objetos
Definindo e lendo propriedades
 Quando definimos uma propriedade em um objeto, essa propriedade
só existe no objeto instanciado. Outros objetos instanciados a partir
da nossa classe não terão essa propriedade

 Exemplo utilizando tanto construtor como literais de objetos

 var func = new Object();

func.nome = “Bruna Brito”;
func.cargo = “Operadora de Slides”;
func.empresa = {nome: “Especializa”};

// lendo as propriedades do objeto

document.write(‘Nome: ‘ + func.nome);
document.write(‘<br />Cargo: ‘ + func.cargo);
document.write(‘<br />Empresa: ‘ + func.empresa.nome);
Objetos
Definindo propriedades
 O exemplo anterior não é tão útil quando desejamos definir
uma propriedade para todos os objetos criados, ou quando
queremos encarar nossos objetos em um formato de classe
 Definir atributos, métodos e passar parâmetros para inicializar
nossos atributos

 Ex.:
function Funcionario(nome, cargo, empresa) {
this.nome = nome;
this.cargo = cargo;
this.empresa = empresa;
}

func = new Funcionario(“Joao”, “Professor”, {nome:”Especializa”});

Objetos
Definindo métodos
 Os métodos nada mais são do que funções que são
invocadas por objetos
 Se existir uma função f e um objeto o, podemos
definir um método chamado m assim:
o.m = f;

e executamos assim:
o.m();
Objetos
Definindo métodos
Exemplo ruim:
function areaQuadrado(){
return (this.lado * this.lado);
}

var q = new Object();

q.lado = 10;
q.areaQuadrado = areaQuadrado;

document.write(“lado do quadrado: “+q.lado+” m”);

document.write(“<br />área: “+q.areaQuadrado()+”mº”);
Objetos
Definindo métodos
Exemplo bom:
function Quadrado(lado){
this.lado = lado;
this.areaQuadrado = function(){
return (this.lado * this.lado);
};
}

var q = new Quadrado(10);

document.write(“lado do quadrado: “+q.lado+” m”);

document.write(“<br />área: “+q.areaQuadrado()+”mº”);
Objetos
Definindo métodos
 Ambos vão exibir a mesma coisa:
Objetos
Atributos e métodos privados
 Para simular um atributo ou um método privado, é só
definirmos a propriedade utilizando o operador var no lugar do
this, criando assim uma variável local

function Pessoa(nome){
var nome = nome;
this.getNome = function(){
return nome;
}
}

var p = new Pessoa(“joao”);

document.write(“nome: “ + p.getNome()); // imprime “nome: joao”
document.write(“<br />nome: “ + p.nome); // imprime “nome: undefined”
Exercícios
 Criar as classes Quadrado e Circulo
 Atributos ‘lado’ e ‘raio’ passados por parâmetro
 Método ‘area’ em ambas as classes
 Recuperar o valor do lado e do raio usando prompt(),
instanciar um objeto do tipo Quadrado e Circulo,
passando os valores por parâmetro.
 Exibir a área do quadrado e do circulo
Exercícios
 Simular um atendimento de banco
 Temos 2 filas: normal e preferencial
 Criar 2 arrays vazios
 informar o nome e a idade do cliente, instanciando um objeto do tipo Cliente.
Perguntar se é idoso, para saber se adiciona na fila preferencial ou na fila
normal.
 Criar objeto Cliente com método ‘isIdoso’.
 Usar nome = “sair” para sair do laço
 Usar do-while para recuperar as informacoes dos clientes
do {
nome = prompt(“Nome: “);
if(nome == “sair”) break;
idade = prompt(“Idade: “);
c = new Cliente(nome, idade);
// verificar se é idoso ou nao
// depois adicionar na fila
}while(true);

 Exibir na tela as 2 filas, mostrando assim a ordem do atendimento

 Usar while(array.length > 0){
cli = array.shift();
// exibir dados do cliente
}