Aula 12 Aplicação e prática do JS

Internet
Profª Rita de Cassia Gaieski
[email protected]
Aula 12
Aplicação e prática do JS
Características importantes
 Sua sintaxe é parecida com C, C++ e Java, devido aos seus comandos serem os
mesmos utilizados nas Linguagens citadas.
 É uma programação baseada em eventos, ou seja, eventos são as ações que
realizamos durante a navegação na página. Ex.: clicar em um botão, arrastar o
mouse, envio de formulário entre outras.
 Não problemas ao executar códigos com esta linguagem, pois seus comandos
são interpretados pelo navegador.
 Java Script é considerada uma Linguagem “totalmente” orientada a objetos.
 Permite uma melhor interação de páginas web com o usuário, menus
diferenciados, aberturas de janelas pop-up entre outras.
Orientação a Objetos
Orientação a Objetos é um paradigma de programação. A linguagem Java Script suporta
programação orientada a objetos – Object-Oriented Programming.
Relembrando: Objetos possuem propriedades e métodos. Propriedades são valores
associados ao objeto. Algumas propriedades do nosso objeto pessoa são altura, peso,
sexo, cor da pele, naturalidade, profissão etc. Métodos (ou funções) são ações que
podem ser executadas pelo objeto. Alguns métodos do objeto pessoa são andar(),
dormir(), comer(), trabalhar(), divertir() etc.
 Para acessar as propriedades de um objeto, usamos a seguinte sintaxe:
objeto.propriedade = valor;
altura = Pessoa.altura;
Exemplo 1: Contém a cor de fundo de um objeto: document.bgColor;
Exemplo 2: Contém o título de um objeto: document.title;
Internet
Profª Rita de Cassia Gaieski
[email protected]
 Para acessar os métodos de um objeto, usamos a seguinte sintaxe:
objeto.método(“argumento”);
Pessoa.andar();
Exemplo 3: O objeto document possui um método chamado “write”, cuja função é
inserir comandos HTML durante a execução do programa em Java Script:
Objeto window
É o principal objeto do Java Script, assume o nível mais alto na hierarquia de objetos da
linguagem.
Figura 1:
http://www.devmedia.com.br/explorando-as-propriedades-do-objeto-window-em-javascript/27254
O objeto window representa no Java Script a janela do navegador, uma janela em um
frame ou janela de diálogo contendo um documento HTML. Este objeto fornece várias
informações a respeito da janela (name, navigator, location, history, etc.), permite
acesso ao documento contido na janela e suporta vários métodos úteis (alert(),
confirm(), addEventListener(), attachEvent(), etc).
Sintaxe: window.propriedade;
window.método;
Exemplo 1: Exibindo uma mensagem ao usuário.
Internet
Profª Rita de Cassia Gaieski
[email protected]
Resultado:
Exemplo 2: Exibindo uma mensagem e um valor de variável.
Resultado:
Exemplo 3: Abrindo uma janela do navegador.
Internet
Profª Rita de Cassia Gaieski
[email protected]
Resultado:
Objeto document
O objeto document representa a página HTML e fornece possibilidades para acessar,
criar e manipular todos os elementos HTML no documento. Este objeto está logo
abaixo do objeto window na hierarquia.
Para obter um elemento em um documento HTML podemos usar as coleções (all,
anchors, applets, etc), os métodos getElementById(), getElementsByName() e
getElementsByTagName() entre outros. Se precisarmos acessar o elemento body ou
html, podemos usar as propriedades document.documentElement e document.body.
Sintaxe: window.document
Exemplo 1:
 Definindo a cor de plano de fundo da página
 Mostrando o nome do título da página.
 Criando um título <h1> com a frase “Testando o Objeto document”.
Internet
Profª Rita de Cassia Gaieski
[email protected]
Resultado:
Trabalhando com Eventos
Eventos são ações que ocorrem na página, ou seja, é o principal recurso da Linguagem
Java Script.
Exemplo:
 Um click do mouse.
 Carregamento de outra página.
 Pressionar uma tecla.
 Mover o ponteiro do mouse sobre um objeto

Propriedade dos Eventos:
Os objetos na linguagem possuem propriedades que são acesso aos eventos. Essas
propriedades tem o nome iniciado com a palavra “on”, seguido do nome do evento.
Sintaxe:
Internet
Profª Rita de Cassia Gaieski
[email protected]
objeto.evento(“argumento”)
Exemplo: O objeto button reage ao evento “onClick”, que ocorre quando o usuário da
um clique com o ponteiro do mouse sobre o objeto.
No HTML
Resultado:
Lista de Eventos do Java Script
Abort
Este evento acontece quando o usuário interrompe o carregamento da imagem
(onAbort)
Blur
Ocorre quando o elemento perde o foco, ou seja, quando o usuário clica fora do
(onBlur)
elemento, este não será mais selecionado como estando ativo.
Change
Ocorre quando o usuário altera o conteúdo de um campo de dados.
(onChange)
Click
Ocorre quando o usuário clica no elemento associado ao evento.
(onClick)
dblclick
Ocorre quando o usuário clica duas vezes no elemento associado ao evento (um
(onDblclick)
hiperlink ou um elemento de formulário). Este evento só é suportado pelas versões do
JavaScript 1.2 e superior
dragdrop
Ocorre quando o usuário efetua um arrastar-largar na janela do navegador.
(onDragdrop)
Este evento só é suportado pelas versões do JavaScript 1.2 e superior
error
É desencadeada quando ocorre um erro durante o carregamento da página.
(onError)
Este evento faz parte do JavaScript 1.1.
Internet
Profª Rita de Cassia Gaieski
[email protected]
Focus
Ocorre quando o usuário dá foco a um elemento, isso significa que este elemento foi
(onFocus)
selecionado como estando ativo.
keydown
Ocorre quando o usuário pressiona uma tecla do seu teclado.
(onKeydown)
Este evento só é suportado pelas versões do JavaScript 1.2 e superior
keypress
Ocorre quando o usuário mantém pressionada uma tecla do seu teclado.
(onKeypress)
Este evento só é suportado pelas versões do JavaScript 1.2 e superior
keyup
Ocorre quando o usuário deixa de pressionar uma tecla. Este evento ocorre no
(onKeypress)
momento que ele libera a tecla.
Este evento só é suportado pelas versões do JavaScript 1.2 e superior
Load
Ocorre quando o navegador do usuário carrega a página em curso
(onLoad)
MouseOver
Ocorre quando o usuário põe o cursor do mouse acima de um elemento
(onMouseOver)
MouseOut
Ocorre quando o cursor do mouse deixa um elemento.
(onMouseOut)
Este evento faz parte do Javascript 1.1.
Reset
Ocorre quando o usuário apaga os dados de um formulário com o botão Reset.
(onReset)
Resize
Ocorre quando o usuário redimensiona a janela do navegador
(onResize)
Select
Ocorre quando o usuário seleciona um texto (ou uma parte de um texto) em um campo
(onSelect)
do tipo "text" ou "textarea"
Submit
Ocorre quando o usuário clica no botão de submissão de um formulário (o botão que
(onSubmit)
permite enviar o formulário)
Unload
Ocorre quando o navegador do usuário sai da página em curso
(onUnload)
Associação dos eventos com os objetos
Eventos
Objetos interessados
abort
Image
blur
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
TextArea, window
change
FileUpload, Select, Submit, Text, TextArea
Internet
Profª Rita de Cassia Gaieski
[email protected]
click
Button, document, Checkbox, Link, Radio, Reset, Select, Submit
dblclick
document, Link
dragdrop
window
error
Image, window
focus
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
TextArea, window
keydown
document, Image, Link, TextArea
keypress
document, Image, Link, TextArea
keyup
document, Image, Link, TextArea
load
Image, Layer, window
mousedown
Button, document, Link
mousemove
Nenhum especificamente
mouseout
Layer, Link
mouseover
Area, Layer, Link
mouseup
Button, document, Link
move
window
reset
form
resize
window
select
text, Textarea
submit
Form
unload
window
Importante: Para rodar páginas com as formatações em JS é necessário inserir a sua tag
padrão <script></script> conforme imagem abaixo:
“Design não é como uma coisa aparenta, é como ela funciona.”
- Steve Jobs