JavaScript: A Programação

JavaScript: A Programação

Funções, Objetos, Propriedades e Eventos

Prof. Giuliano Prado

giucontato@gmail.com

Funções

As funções são definidas com a palavra reservada function

function calcular() {.. }

Uma função pode ter argumentos e retornar valores

function calcular (n,m) {

return n * m

}

Associar código JavaScript ao clique

no botão

Associar a função ao botão

Eventos

Um evento é gerado como resultado de uma ação:

Um clique,

Um movimento do mouse, Uma seleção de texto,

O abandono da página etc.

O tratamento de eventos é feito por trechos de código associados a eventos específicos

A associação é realizada em HTML nos elementos que suportam eventos do tipo Event através dos atributos:

onEvent

Por exemplo, para capturar o clique num botão (evento click) seria:

<input type = "button" onclick= 'alert("Ola");'/>

Resposta a eventos

Eventos

Os Eventos são definidos na especificação do HTML Cada Tag HTML define os seus eventos. Exemplos:

onFocus: quando o elemento ganha foco onBlur: quando o elemento perde o foco onSelect: quando um texto é selecionado

onChange: quando o valor de um elemento é modificado

Por cada evento pode-se definir qual o JS a executar

(normalmente uma chamada a uma função)

Eventos dos Elementos HTML

Eventos Importantes para Forms

onSubmit: Ocorre quando um botão tipo Submit recebe um click do mouse. Válido apenas para o Form.

onkeyPress: Ocorre quando um uma tecla foi

pressionada.

Eventos Comuns

Document, Window e Body

Elementos Evento Quando executa Document e

Body onload Quando o documento inicia o carregamento

Document e

Body onunload Quando é iniciada a finalização do documento (o usuário foi para outra página)

Window onload Quando o documento foi totalmente

carregado e processado

Eventos Comuns

Forms

Evento Quando executa

onchange Quando o conteúdo do elemento foi alterado onfocus Quando o elemento ganhou foco

onselect Quando um item foi selecionado (combo box)

onsubmit Quando formulário for enviado

Eventos Comuns

Teclado (quase todos os elementos)

Evento Quando executa

onkeydown Quando uma tecla é apertada onkeyup Quando uma tecla é solta

onkeypress Quando uma tecla for apertada e solta

Eventos Comuns

Mouse (quase todos os elementos)

Evento Quando executa

onclick Quando o elemento for clicado

ondbclick Quando o elemento for duplamente clicado onmousemove Quando o mouse se mover sobre o elemento onmouseout Quando o mouse sair de cima do elemento onmouseover Quando o mouse passar sobre o elemento onmouseup Quanto o botão do mouse for solto sobre o

elemento

Objetos

Um objeto é uma coleção de propriedades Cada propriedade tem um nome

As propriedades armazenam valores que podem ser lidos ou escritos.

As propriedades que armazenam funções

denominam-se métodos, que podem ser

chamados.

Objeto Window (janela)

Alguns atributos/objetos do objeto window

window.document: Contém o objeto document window.frames: É um array com todas os frames da janela

window.history: É um Objeto com a lista dos URL visitados

window.location: URL da presente página

window.status: Mensagem que aparece na barra de estado

window.length: Número de frames na janela window.name: Nome da janela atual

window.open: Este método abre uma nova janela

window.defaultStatus: mostrar uma mensagem

na barra de status .

Atributos de Janela (window.)

Mudar janela

Ex: desligar barra de status window.statusbar = false;

Muitos atributos podem ser acessados

Atributos de Janela (window.)

Atributo Se Refere A

location Endereço da janela (URL atual)

name Nome da janela

parent

personalbar Barra de links pessoais scrollbars Barras de rolagem

status Mensagem da barra de status statusbar Barra de status

toolbar Barra de ferramentas

Atributos window. ...

Atributos de Janela (window.)

Atributo Se Refere A

alert() Abre janela de mensagem

confirm() Abre uma janela Cancel prompt() Abre uma janela de entrada blur() Tira o foco da janela atual close() Fecha a janela atual

open() Abre uma nova janela do navegador print() Abre a janela de impressão

createPopup() Abre uma janela do tipo popup

Métodos window. ...

window.alert

Exemplo de PopUps

navegador carregando uma página específica.

window.open('pagina2.html', 'wnd2');

Podemos criar uma variável para se referenciar a esta nova aba.

janela2 = window.open('pagina2.html', 'wnd2');

Endereço que será aberto Nome o PopUp

(opcional)

Lembrando - Testando JavaScript ^(com

arquivo externo)

JavaScript Externo

Da mesma forma como nos arquivos CSS, podemos deixar funções e comandos JavaScript em arquivos externos:

Estes arquivos devem ter a extensão .JS Para importar:

<script type="text/javascript" src="meuScript.js"></script>

Testando PopUp

1. Crie um arquivo meuScript.js em seu projeto 2. Crie neste arquivo uma função executar() e

coloque o código anterior de criação de PopUp.

3. Crie uma página index.hml e coloque somente um botão no mesmo (sem <form>).

4. Carregue o arquivo meuScript.js nessa página e chame a função executar() no evento onClick do botão.

5. Crie a página pagina2.html e nele coloque um -

6. Teste a aplicação!

Exemplo de PopUps: Gerenciamento

width Serve para especificar a largura do popup;

height Serve para especificar a altura do popup;

top Serve para especificar o quão distante estará o popup do topo da tela;

left Serve para especificar o quão distante estará o popup do lado esquerdo da tela;

scrollbars Habilitar a barra de rolagem do popup (0/no desabilita; 1/yes - habilita) resizable Serve para manipular a opção de redimensionar o popup;

directories Serve para habilitar a barra de diretórios;

menubar Serve para habilitar o menu de um browser;

location Serve para manipular (habilitar e acessar) a barra de endereços de um popup;

status Serve para manipular a barra de status de um popup;

toolbar Serve para habilitar a barra de ferramentas de um popup;

titlebar Serve para manipular a barra de título de um popup.

Exemplo de PopUps

janela2 = window.open ( 'pagina2.html',

'pagina',

"width=350, height=255, top=100, left=110, scrollbars=no ");

Adiciona um terceiro parâmetro, onde as propriedades

são colocadas separadas por vírgula dentre dele.

Exemplo de PopUps

A importância de usar a variável para referenciar a janela:

funtion executar() {

wnd1 = window.open (' ', 'pagina', "width=250, height=250");

wnd1.document.write ("Aqui você pode por o que quiser");

}

Acesso ao seu

conteúdo

Exemplo de PopUps

A importância de usar a variável para referenciar a janela (usando em outra função) :

function abrirPopup(){

abrirWindow = window.open('', 'pagina');

}

function fecharPopup(){

abrirWindow.close();

}

Atributos de Janela (window.)

Atributo Se Refere A

moveBy() Move a janela de maneira relativa moveTo() Move a janela de maneira absoluta

resizeBy() Redimensiona a janela de maneira relativa resizeTo() Redimensiona a janela de maneira absoluta

Métodos window. ...

Mover a janela

window.moveTo(100,100);

Atributos de Janela (window.)

Atributo Se Refere A

location.assign() Carrega um novo documento location.reload(); Recarrega o documento atual

location.replace() Substitui documento atual por outro

Métodos window. ...

Mudar endereço atual

Exemplo de Location

window.location.assign

possui o mesmo efeito que

window.location.replace

Atributos de T ela ( sc reen .)

Atributo Se Refere A

availHeight Altura da tela (menor barra de tarefas) height Altura total da tela

width Largura total da tela

Atributos screen. ...

Objeto Document

Propriedades Comuns

Plano de Fundo

Textos

Propriedade O que altera

backgroundColor Cor de fundo do elemento

backgroundImage Imagem de fundo do elemento

Propriedade O que altera

color Muda cor do texto

fontSize Muda tamanho da fonte

textAlign Muda alinhamento do texto

textDecoration

Propriedades Comuns

Bordas e Margens

Propriedade O que altera

borderColor Muda cor do texto

borderStyle Muda tamanho da fonte

borderWidth Muda alinhamento do texto margin

outlineColor Muda cor da linha de contorno outlineStyle Muda estilo da linha de contorno outlineWidth Muda largura da linha de contorno

padding Muda o espaçamento interno do elemento

Layout

Propriedade O que altera

cursor Muda o cursor apresentado

display Muda a maneira de apresentação do elemento

overflow Comportamento para conteúdos maiores que o elemento

visibility Muda a visibilidade do elemento width Muda a largura do elemento

Propriedades Comuns

Propriedades Comuns

Listas

Posicionamento

Propriedades gerais

Propriedade O que altera

listStyleImage Muda imagem do marcador de lista listStyleType Muda tipo de marcador de lista

Propriedade O que altera

zIndex Define a ordem vertical do elemento

Propriedade O que altera

title Muda o texto de título do elemento

JavaScript: Validação de dados

Validação de dados em formulários, controle de submissão

Prof. Giuliano Prado

giucontato@gmail.com

Manipulação de eventos e componentes de

Formulários HTML

* onsubmit - Ocorre quando um botão tipo Submit

recebe um click do mouse. Válido apenas para o Form.

* onkeyPress - Ocorre quando um uma tecla foi

pressionada.

Formulário

<form name="form1" action=“pagina.html"

method="post" onSubmit="return validacao()">

Senha: <input type="password" name="senha"

size="20">

Confirme a senha: <input type="password"

name="senha2" size="20">

<input type="submit" value="Enviar">

</form>

<script language="JavaScript">

function validacao(){

senha = document.form1.senha.value senha2 = document.form1.senha2.value if (senha != senha2){

alert("Confirmação de Senha Incorreta") document.form1.senha.focus()

return false }

}

</script>

<script language="JavaScript">

function validacao(){

senha = document.forms|"form1"||"senha"|.value

if (senha != senha2){

alert("Confirmação de Senha Incorreta") document.form1.senha.focus()

return false }

}

</script>

senha2 = document.forms|"form1"||"senha2"|.value

<script language="JavaScript">

function validacao(){

senha = document.form1.senha.value senha2 = document.form1.senha2.value if (senha = = senha2){

if (senha.length<6){

alert("Senha deverá conter no mínimo 6 caracteres") return false

}}else{

alert("Confirmação de Senha Incorreta") document.form1.senha.focus()

return false

}} </script>

<script language="JavaScript">

function validacao(){

senha = document.form1.senha.value senha2 = document.form1.senha2.value if (senha == senha2){

if (senha.length<6){

alert("Senha deverá conter no mínimo 6 caracteres") return false }

else if (senha.length>12){

alert("Senha deverá conter no máximo 12 caracteres") return false }

}else{

alert("Confirmação de Senha Incorreta") document.form1.senha.focus()

return false

}} </script>

Formulário

<form name="form1" action=“pagina.html" method="post"

onSubmit="return validacao()">

E-mail: <input type="text" name="email" size="20">

Nome: <input type="text" name="nome" size="20">

<input type="submit" value="Enviar">

</form>

<script language="JavaScript">

function validacao(){

nome = document.form1.nome.value email= document.form1.email.value msg = ""

if (nome == "" || email == ""){

if (nome == ""){

msg = " \n NOME "}

if (email == ""){

msg = msg + " \n EMAIL"}

alert("FAVOR PREENCHER OS CAMPOS ABAIXO OBRIGATÓRIOS " + msg)

return false }else{

return true}}

</script>

<script language="JavaScript">

document.write("<form name=History>")

document.write("<input type=button value='<<' onClick=history.back()>")

document.write("<input type=button value='>>' onClick=history.forward()>")

document.write("</form>");

</script>