Manual completo javascript

Neste exemplo, foi criado uma função chamada seleciona() que cria uma

variável que receberá os elementos do formulário form1. Em seguida, foi

criado um laço for que somará a variável i a quantidade de elementos

presentes no formulário, onde cada elemento deverá receber para sua

propriedade checked o valor verdadeiro, ou seja, selecionar a caixa de

verificação.

Logo mais, foi criada uma função chamada tira() que tem a função contrária

da função seleciona(). Faça um teste e veja o que acontece.

No script abaixo é apresentado uma função que exibe o dia da semana mais as

horas sendo atualizadas de um em um segundo:

<html>

<head>

function relogio(){

tempo=new Date();

dia=new Array("Domingo","Segunda-feira","Terça-feira","Quartafeira","

Quinta-feira","Sexta-feira","Sábado");

hora=tempo.getHours();

min=tempo.getMinutes();

sec=tempo.getSeconds();

if(sec<10){

sec="0"+sec;

}

defaultStatus=dia[tempo.getDay()]+", "+hora+":"+min+":"+sec;

setTimeout("relogio()","1000");

}

</script><body onLoad="relogio()">

EXERCÍCIOS:

Crie uma página que ao ser aberta apresente a data no seguinte formato

apresentado abaixo:

Segunda-feira, 17 de Setembro de 2001

Crie nesta página um script que apresente o nome do navegador e sua versão

em negrito.

Crie um link HTML nesta página que vá para outra página.

Na nova página, crie um botão de formulário que tenha a mesma função de

voltar do navegador.

Desenvolva uma página simples com cinco links como os apresentados abaixo:

GLOBO www.globo.com

UOL www.uol.com.br

AOL www.americaonline.com.br

SENAC-BRASIL www.senac.br

FACULDADES SENAC www.sp.senac.br/faculdades

EDITORA SENAC www.senac.br/editora

Crie um evento sobre cada hiperlink que faça com que sempre que o usuário

movimentar o ponteiro do mouse sobre o link, seja exibida uma mensagem na

barra de status.

Crie outro evento sobre cada hiperlink que faça com que ao usuário

movimentar o ponteiro do mouse para fora do hiperlink, seja exibida outra

mensagem.

Crie um evento no corpo desta página para que quando o usuário deixar a

página, seja exibida uma caixa de alerta com a mensagem “Prazer em

Conhecê-lo.

Utilize o evento onClick para exibir uma mensagem quando o usuário clicar

com o botão do mouse sobre cada um dos hiperlink’s.

Defina uma segunda ação para o evento onClick de cada hiperlink, fazendo-os

exibir outra mensagem de alerta com o seguinte texto:

“Aguarde o Carregamento...”

ANOTAÇÕES:

______________________________________________________

MANIPULANDO FRAMES

Como já conhecido na linguagem HTML, os frames são divisões entre páginas

que são visualizadas pelo navegador, cada frame é também chamado de

quadro que podem ser em linhas ou colunas e possuir tamanhos variados.

Este recurso é muito útil para fazer uma página de índice onde o usuário

escolhe um determinado link no menu e visualiza seu conteúdo em outro

quadro presente no navegador, sem a necessidade de sair do menu.

Teoricamente, os frames visualmente parecem simples de criar, porém são

bastante complexos que podem fazer com que o usuário se confunda

dependendo do projeto que esteja desenvolvendo. Espero que você tenha

aprendido isto de forma clara e praticado bastante este recurso, porque

inicialmente parece bem confuso, por isso, pratique mesmo a sua utilização

para que seu entendimento seja claro.

Pois bem, como já sabido, os frames possuem uma estrutura única que não

mostra nada na sua página, sua função básica é dividir a tela da sua maneira e

exibir em cada quadro uma página específica, portanto, esta página não possui

corpo. O tag de corpo de uma página de frame é substituído pelo tag de

configuração de frames chamado <FRAMESET>. Vejamos a seguir um bem

simples de utilização de frames:

<html>

<head>

<title>JavaScript e Frames</title>

</head>

</frameset>

</html>

Neste exemplo foi criado um frame de duas colunas onde a primeira possui

30% de largura do navegador e a segunda o restante. Em seguida, definiu-se

através do tag <FRAME SRC=> os arquivos que iriam aparecer em cada

frame assim que a página fosse carregada, dando a seguinte apresentação:

Um detalhe importante na utilização de scripts em páginas com frames, é a

nomeação dos frames através do atributo NAME, no exemplo anterior os dois

frames criados foram chamados de frame1 e frame2.

HIERARQUIA FRAMESET WINDOW

É bom saber que, cada frame é considerado uma janela separada para o

navegador, em razão de cada uma possuir seu próprio código HTML. Estas

janelas de frame estarão sempre subordinadas pela janela principal, aquela

que contém o tag <FRAMESET>. Como dito anteriormente, esta janela não

possui corpo sua função é dividir a tela e mostrar suas páginas filho. Entenda

então que a página que contém o tag <FRAMESET> é a página PAI, enquanto

que as que estão subordinadas à ela são as páginas FILHO.

Caso o usuário faça diversos frames aninhados, serão apresentadas janelas

netas que são subordinadas as janelas do frame-filho, com isto temos a

seguinte sintaxe no JavaScript:

parent.filho.neto

Concluindo, a página filho é nome da janela que está subordinada a janela

principal, a do frameset (pai). Já a página neto é o nome de uma janela que

está subordinada sob a janela de frame-filho.

PAI (Frameset)

FILHO

FRAME 1

FRAME 2

FRAME 3

Vejamos a utilização de código JavaScript para o gerenciamento dos frames

dividindo o navegador em 4 frames nomeados da seguinte forma: frame1,

frame2, frame3 e frame4 conforme exemplo mostrado na figura a seguir:

<html>

<head>

<title>JavaScript e Frames</title>

</head>

</frameset>

</html>

Com este código teremos a seguinte estrutura visualizada no navegador:

Criaremos agora um arquivo de controle para nosso frame que possuirá

algumas instruções JavaScript. No exemplo do código à seguir, trocaremos o

frame superior esquerdo por esta página desenvolvida, veja o resultado na

próxima figura:

<HTML>

<HEAD>

function checaFrame(frameNum){

if (frameNum==1){

alert(parent.controle.name);

}else if(frameNum==2){

alert(parent.segundo.name);

}else if(frameNum==3){

alert(parent.terceiro.name);

}else if(frameNum==4){

alert(parent.quarto.name);

}

function escreveFrame(frameNum){

if(frameNum==2){

parent.segundo.document.write("<br>Segundo Frame");

}else if(frameNum==3){

parent.terceiro.document.write("<br>Terceiro Frame");

}else if(frameNum==4){

parent.quarto.document.write("<br>Quarto Frame");

}

function limpaFrame(){

for (i=1;i<4;i++){

parent.frames[i].document.close();

parent.frames[i].document.open();

}

</SCRIPT>

</HEAD>

<BODY

<FORM>

<table>

</td><td>

<INPUT TYPE="BUTTON" VALUE="ESCREVE FRAME2"

onClick="escreveFrame(2)"><br>

<INPUT TYPE="BUTTON" VALUE="ESCREVE FRAME3"

onClick="escreveFrame(3)"><br>

<INPUT TYPE="BUTTON" VALUE="ESCREVE FRAME4"

onClick="escreveFrame(4)"><br>

</td><td>

<INPUT TYPE="BUTTON" VALUE="Limpa Todos"

onClick="limpaFrame()"><br>

</td></tr>

</table>

</FORM>

</BODY>

</HTML>

Abrindo novamente o arquivo principal dos frames, esta nova página chamada

controle.html, será aberta no primeiro frame, observe pelo exemplo da figura

a seguir:

Analisando nosso controle, foi criado três funções, cada qual com suas rotinas

a serem executadas, vejamos os detalhes destas funções:

Função checaFrame()

Nesta função foi solicitado que caso o usuário clique em um botão que está

chamando a função, será aberta uma mensagem de alerta com o nome do

frame atual definido no arquivo do frameset. Isto foi possível pela linha de

código:

alert(parent.nomeFrame.name);

O objeto parent, especifica o documento que possui o frameset.

A propriedade nomeFrame, especifica o frame que está sendo referenciado.

A propriedade name define o nome para esta janela.

Função escreveFrame()

Esta função que também é chamada com o clique sobre um botão de

formulário irá permitir que o usuário possa escreve algum texto em um frame

específico, isto é possível através do código:

parent.nomeFrame.document.write("<br>Este é um Frame");

O objeto parent, especifica o documento que possui o frameset.

A propriedade nomeFrame, especifica o frame que está sendo referenciado.

A propriedade document define a janela especificada.

O método write foi usado para escrever no documento especificado.

Função limpaFrame()

Já esta função permite que o usuário ao clicar em um botão limpe o conteúdo

de todos os frames presentes. O código que permite esta ação é:

for (i=1;i<4;i++){

parent.frames[i].document.close();

parent.frames[i].document.open();

parent.frames[i].document.writeln("");

}

Neste código foi manipulado todos os frames fazendo o uso do array

frames[]. Analisando este código:

O objeto parent, especifica o documento que possui o frameset.

frames[] é um array.

document define a janela especificada.

close, open são métodos para o documento da janela de frames.

Cada elemento do array frames[] contém um frame. É feita a contagem em 0

para o primeiro frame, 1 para o segundo, 2 para o terceiro. Para que não seja

omitido o frame que possui o controle, veja que a contagem foi iniciada em

um, em razão do frame de controle ser o primeiro ele assume zero e conta até

3. Cada frame é limpo em cada laço da instrução for.

OBJETO FORM

Através do objeto form da linguagem JavaScript o usuário poderá interagir

melhor com seus dados inseridos pelos recursos de formulários existentes na

linguagem HTML, entre eles temos os campos checkbox, radio e listas de

seleção. O formulário e seus objetos podem ser facilmente manipulados

através de scripts. Formulários também podem ser usados com um programa

CGI em um servidor ou para validação de dados.

PROPRIEDADE

Este objeto é uma propriedade do objeto document.

Veja na tabela abaixo a relação das propriedades do objeto form.

PROPRIEDADES DO OBJETO FORMS

PROPRIEDADES DESCRIÇÃO

Action

Especifica a URL do servidor onde as

variáveis do formulário são enviadas.

defaultChecked

Estado de seleção de uma caixa de

verificação de um botão de opção.

defaultSelected Seleção atual de lista de opções.

defaultValue

Valor padrão da caixa de texto ou área

de texto em um formulário.

checked

Estado padrão de um checkbox ou

botões do tipo radio em um formulário.

elements[]

Lista os elementos existentes do

formulário.

CONTINUE >>>

E-BOOKOASIS

Pesquisar este blog

Manual completo javascript - PARTE 14

Comentários

Postar um comentário