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:
 Parte I – Linguagem JavaScript (Pura)

Aula 5 – Vamos estudar:

 Client-Side JavaScript
 DOM
 Objeto window
 Objeto document
DOM
 Document Object Model – Modelo Objeto de Documentos
 É uma Especificação
 Criado pela W3C (World Wide Web Consortium)
 Objetivo: Padronizar a forma como as diferentes linguagens e
plataformas lidam com a estrutura e os elementos HTML
 API DOM: interface criada para que as linguagens e plataformas
implementassem o modelo objeto de documentos

 Navegadores
 Antigamente, cada navegador tinha seu modelo para
interpretar um HTML
 Problemas de sites incompatíveis em navegadores diferentes
 Hoje, os navegadores implementam o DOM para interpretar um
HTML
DOM

 Onde o JavaScript entra nessa história?

 JavaScript é uma linguagem baseada em objetos

 A linguagem foi criada inicialmente para manipular HTML
 HTML: conjunto de elementos (tags)
 Navegadores são os interpretadores de HTML e JavaScript

 Conclusão: JavaScript utiliza o padrão DOM para

interagir com um documento HTML e com os
navegadores, através de objetos que representam os
elementos e propriedades desse ambiente de execução
DOM
DOM
DOM

Objeto:
window
DOM

Objeto:
window
document
DOM

Objeto:
window
document
anchors, images,
forms, layers, etc
DOM

Objeto:
window
document
anchors, images,
forms, layers, etc
input (password,
text, submit, etc),
select, textarea,
etc
Objeto window
Objeto window

 É o principal objeto na hierarquia de objetos em

Client-Side JavaScript

 Representa a janela do Navegador

 Contém propriedades e métodos que servem para

controlar a janela do nosso browser
 Os objetos que são filhos na hierarquia de objetos são
propriedades do objeto window
 window.document
 window.frames[]
Objeto window
Propriedades:
 window.document
 Objeto Document, que representa o nosso HTML
 window.frames[]
 Array de objetos window; São os frames de uma janela
 window.history
 Objeto History, que representa o histórico de navegação
 window.location
 Objeto Location, que representa a URL do documento atual
 Usamos essa propriedade para redirecionamentos
 Window.screen
 Objeto Screen, que representa as configurações de exibição
 window.self, window.parent, window.top
 self: referência da própria página
 parent: no frame atual, referencia o frame que contém esse frame atual
 top: referencia o frame de maior nível
Objeto window
Principais Eventos:

 window.onload
 Evento chamado quando termina o carregamento da página

 window.onunload
 Evento chamado quando saímos da página atual
 Seja por entrar em outra página ou por fechar o browser
Objeto window
Métodos:
 Caixas de Diálogo
 window.alert(msg)
 window.confirm(msg)
 window.prompt(msg, valor_default)
Objeto window
Métodos:
 Abrir, fechar e parar
 window.open(url, nome, configuracoes)
 Abre uma nova janela de acordo com as configuracoes
 A página a ser carregada é a passada para o parâmetro URL

 window.close()
 Fecha a janela atual

 Imprimir
 window.print()
 Imprime o que está sendo exibido na janela
Objeto window
Métodos:
 Navegação
 window.navigate() // apenas Internet Explorer
 Abre uma nova janela de acordo com as configuracoes

 window.forward()
 Avança uma página. Semelhante a clicar no “avançar” do browser

 window.back()
 Volta uma página. Semelhante a clicar no “voltar” do browser

 window.stop()
 Para o carregamento do documento
 Mesma coisa que apertar “stop” no browser ou “esc” no teclado
Objeto window
Métodos:
 Intervalos e Timeout
 window.setTimeout(funcao, tempo)
 Executa a função quando passar o tempo especificado
 window.setInterval(funcao, intervalo)
 Executa a função de tempos em tempos, de acordo com o intervalo

 window.clearTimeout(variavel_timeout)
 Interrompe um Timeout criado
 window.clearInterval(variavel_interval)
 Interrompe um Interval criado
Objeto document
Objeto document

 Representa o documento HTML carregado na página

 Contém propriedades e métodos que servem para

controlar o nosso documento
 Os objetos que são filhos na hierarquia de objetos são
propriedades do objeto document
 window.document.forms[]
 window.document.title
 window.document.images[]
Objeto document
Para utilizar na aula de hoje

 Recuperar qualquer elemento do documento

 var elem = window.document.getElementById(id);

 Acessando os atributos dos elementos

 var elem = document.getElementById(id);
 elem.style.atributo_css = valor;
 elem.focus(); // coloca o foco naquele elemento
 elem.innerHTML = “texto”; // insere a string no HTML do elemento
Exemplos e Projeto