Julio Battisti - Artigos e tutoriais gratuitos; Venda de livros, e-books, video-aulas e cursos online.

SITES DINÂMICOS COM ASP 3.0 - CURSO COMPLETO
Autor: Júlio Battisti

Lição 025 - Capítulo 03 - Trabalhando com Eventos no VBScript

Com o Internet Explorer, temos um conjunto de Objetos a nossa disposição. Cada um destes objetos possui um conjunto de eventos, para os quais podemos criar código.

Um evento é uma ação realizada pelo usuário em uma página. Por exemplo, quando o usuário clica com o mouse, em um botão de comando, é gerado o evento onclick deste botão. Para cada evento, existe uma Sub-rotina associada, para a qual podemos criar código em resposta ao evento. Por exemplo, quando o usuário clica em um botão de comando, podemos colocar código no evento onclick deste botão, que valida os dados digitados pelo usuário. Caso algum dado esteja com problemas, uma mensagem de erro é exibida, solicitando que o usuário corrija os dados com problema.

No Modelo de Objetos do Internet Explorer, temos quatro objetos que podem responder a eventos:

Window
Document
Form
Element

Para criar procedimentos que respondam a eventos utilizamos o seguinte formato:

<!--

Sub NomeDoObjeto_NomeDoEvento

Comando1

Comando2

...

Comandon

End Sub

-->

</SCRIPT>

O nome da Sub-rotina é que define a qual evento a mesma irá responder. O padrão para o nome da Sub-rotina é: NomeDoObjeto_NomeDoEvento.

Na Listagem 3.10, temos um exemplo de utilização do evento Onload, do objeto Window. Este evento, conforme o próprio nome sugere, ocorre quando a página é carregada. Observe que o nome da Sub-rotina é: Window_onload, o que conforme descrito, significa o evento onload, do objeto Window.

Listagem 3.10 – O evento onload do objeto Window.

1 <HTML>

2 <HEAD>

3 <TITLE>Exemplo de eventos.</TITLE>

4 <SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>

5 <!--

6 Sub window_onload

7 MsgBox "A página está sendo carregada !!"

8 End Sub

9 -->

10 </SCRIPT>

11 </HEAD>

12 <BODY>

13 <P>Exemplo de utilização do evento onload do objeto Window.</P>

14 </BODY>

15 </HTML>

Ao ser carregada esta página, o evento onload do objeto Window é disparado, e o código da Sub-rotina window_onload é executado. Com isso é exibida uma caixa de mensagem, conforme indicado na Figura 3.47:

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 3.47 Caixa de diálogo criada pelo evento window_onload.

Principais Eventos dos objetos do Internet Explorer

O Objeto Window o objeto de mais alto nível. Ele representa a janela do Internet Explorer e todos os seus elementos. Existem diversos eventos disponíveis para o objeto Window, conforme descrito na Tabela 3.6:

Evento	Descrição
Onbeforeunload	Ocorre quando a janela está para ser fechada
Onblur	Ocorre quando a janela perde o foco
Onerror	Ocorre quando um erro é gerado na janela
Onfocus	Ocorre quando a janela recebe o foco
Onhelp	Ocorre quando é pressionada a tecla F1
Onload	Ocorre quando a janela está sendo carregada
Onresize	Ocorre quando a janela é redimensionada
Onscroll	Ocorre quando o usuário rola através do conteúdo da janela
Onunload	Ocorre quando a janela é fechada

Tabela 3.6 Os eventos do objeto Window

Na Listagem 3.11, temos código definido para os eventos window_onload, window_onhelp e window_onunload.

Listagem 3.11 – Utilizando alguns eventos do objeto Window.

1 <HTML>

2 <HEAD>

3 <TITLE>Exemplo de eventos.</TITLE>

4 <SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>

5 <!--

6 Sub window_onload

7 MsgBox "A página está sendo carregada !!"

8 End Sub

9 Sub window_onhelp

10 MsgBox "Você pressionou a tecla F1 !!"

11 End Sub

12 Sub window_onunload

13 MsgBox "Você está fechando este documento !!!"

14 End Sub

15 -->

16 </SCRIPT>

17 </HEAD>

18 <BODY>

19 <P>Exemplo de utilização de eventos do objeto Window.</P>

20 </BODY>

21 </HTML>

Ao pressionar F1, será exibida a mensagem indicada na Figura 3.48, e logo em seguida será aberta uma janela com a Ajuda do Internet Explorer, conforme indicado na Figura 3.49, uma vez que F1 é a tecla padrão de Ajuda no Windows.

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 3.48 Mensagem exibida pelo evento window_onhelp.

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 3.49 Janela com a Ajuda do Internet Explorer.

O Objeto Document representa todo o conteúdo existente dentro do objeto Window. Existem diversos eventos disponíveis para o objeto Document, conforme descrito na Tabela 3.7:

Evento	Descrição
OnAfterUpdate	Ocorre após os dados terem sido enviados para o servidor Web. Por exemplo, quando a página possui um formulário, no qual o usuário preenche os campos e depois clica no botão Enviar, para enviar os dados para o servidor Web. Este na verdade, é um evento que ocorre no objeto Form, mas como o objeto Form está contido no objeto Document, o objeto Documento também é capaz de responder a este evento.
OnBeforeUpdate	Ocorre antes que os dados tenham sido enviados para o servidor Web. Por exemplo, quando a página possui um formulário, no qual o usuário preenche os campos e depois clica no botão Enviar, para enviar os dados para o servidor Web. Este na verdade, é um evento que ocorre no objeto Form, mas como o objeto Form está contido no objeto Document, o objeto Document também é capaz de responder a este evento
OnClick	Ocorre cada vez que o usuário clica no documento.
OnDblClick	Ocorre quando o usuário dá um clique duplo no documento.
OnDragStart	Ocorre quando o usuário começa a arrastar algum elemento no documento.
OnHelp	Ocorre quando o usuário pressiona a tecla F1.
OnKeyDown	Ocorre quando uma tecla é pressionada, com exceção de algumas teclas especiais, como Alt, por exemplo.
OnKeyPress	Ocorre quando qualquer tecla é pressionada, inclusive as teclas especiais.
OnKeyUp	Ocorre quando um tecla que estava pressionada, é liberada.
OnMouseDown	Ocorre quando um botão do mouse é pressionado.
OnMouseMove	Ocorre quando o mouse é movimentado sobre o documento.
OnMouseUp	Ocorre quando um botão que estava pressionado, é liberado.
OnSelectStart	Ocorre quando um elemento do documento é selecionado.

Tabela 3.7 Os eventos do objeto Documento

Agora vamos listar os principais eventos do objeto Form. O Objeto Form é criado com a tag <FORM> </FORM>. Podemos ter mais do que um objeto FORM em um documento, desde que os mesmos possuam nomes diferentes. Existem diversos eventos disponíveis para o objeto FORM, conforme descrito na Tabela 3.8:

Evento	Descrição
OnAfterUpdate	Ocorre após os dados terem sido enviados para o servidor Web. Por exemplo, quando a página possui um formulário, no qual o usuário preenche os campos e depois clica no botão Enviar, para enviar os dados para o servidor Web.
OnBeforeUpdate	Ocorre antes que os dados tenham sido enviados para o servidor Web. Por exemplo, quando a página possui um formulário, no qual o usuário preenche os campos e depois clica no botão Enviar, para enviar os dados para o servidor Web.
OnClick	Ocorre cada vez que o usuário clica no formulário.
OnDblClick	Ocorre quando o usuário dá um clique duplo no formulário.
OnDragStart	Ocorre quando o usuário começa a arrastar algum elemento noformulário.
OnHelp	Ocorre quando o usuário pressiona a tecla F1.
OnKeyDown	Ocorre quando uma tecla é pressionada, com exceção de algumas teclas especiais, como Alt, por exemplo.
OnKeyPress	Ocorre quando qualquer tecla é pressionada, inclusive as teclas especiais.
OnKeyUp	Ocorre quando um tecla que estava pressionada, é liberada.
OnMouseDown	Ocorre quando um botão do mouse é pressionado.
OnMouseOver	Ocorre quando o mouse repousa sobre o formulário.
OnMouseOut	Ocorre quando o usuário move o mouse para fora da área do formulário.
OnMouseUp	Ocorre quando um botão que estava pressionado, é liberado.
OnSelectStart	Ocorre quando um elemento do formulário é selecionado.
OnSubmit	Ocorre quando o usuário clica no botão Enviar do formulário.
OnReset	Ocorre quando o usuário clica no botão Reset do formulário.

Tabela 3.8 Os eventos do objeto FORM

Agora vamos listar os principais eventos do objeto Element. O Objeto Element, representa qualquer controle ou elemento visível que possa ser colocado em uma página. Podemos ter mais do que um objeto Element em um documento, sendo que cada objeto é identificado pelo seu nome. Não podemos ter dois elementos com o mesmo nome. Existem diversos eventos disponíveis para o objeto Element, conforme descrito na Tabela 3.9:

Evento	Descrição
OnAfterUpdate	Ocorre após os dados terem sido enviados para o servidor Web. Por exemplo, quando a página possui um formulário, no qual o usuário preenche os campos e depois clica no botão Enviar, para enviar os dados para o servidor Web.
OnBeforeUpdate	Ocorre antes que os dados tenham sido enviados para o servidor Web. Por exemplo, quando a página possui um formulário, no qual o usuário preenche os campos e depois clica no botão Enviar, para enviar os dados para o servidor Web.
OnBlur	Ocorre quando o elemento perde o foco.
OnChange	Ocorre quando os dados do elemento são alterados. Por exemplo, quando alteramos o valor de um campo de texto, em um formulário.
OnClick	Ocorre quando o usuário dá um clique no elemento.
OnDblClick	Ocorre quando o usuário dá um clique duplo no elemento.
OnDragStart	Ocorre quando o usuário começa a arrastar algum elemento pela primeira vez.
OnFocus	Ocorre quando o elemento recebe o foco.
OnHelp	Ocorre quando o usuário pressiona a tecla F1.
OnKeyDown	Ocorre quando uma tecla é pressionada, com exceção de algumas teclas especiais, como Alt, por exemplo.
OnKeyPress	Ocorre quando qualquer tecla é pressionada, inclusive as teclas especiais.
OnKeyUp	Ocorre quando um tecla que estava pressionada, é liberada.
OnMouseMove	Ocorre quando o mouse é movimentado sobre o formulário.
OnMouseOut	Ocorre quando o usuário move o mouse para fora da área do formulário.
OnMouseUp	Ocorre quando um botão que estava pressionado, é liberado.
OnResize	Ocorre quando o elemento é redimensionado.
OnSelectStart	Ocorre quando um elemento é selecionado.
OnSubmit	Ocorre quando o usuário clica no botão Enviar do formulário.
OnSelect	Ocorre quando o usuário termina de selecionar os dados de um controle de entrada, como uma caixa de texto, por exemplo.

Tabela 3.9 Os eventos do objeto Element.

Apenas para exemplificar a utilização de eventos, vamos criar uma página onde temos uma caixa de seleção. Nesta caixa de seleção temos três opções: Axcel Books, Developers Magazine e Microsoft. Quando o usuário seleciona uma destas opções, o Internet Explorer, automaticamente, carrega a página relacionada.

A Figura 3.50, mostra a página de exemplo.

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 3.50 Criando uma lista de navegação.

Para tornar esta lista dinâmica, utilizamos o modelo de eventos, e código VBScript, conforme indicado na Listagem 3.12.

Listagem 3.12 – Criando uma lista de navegação dinâmica.

1 <HTML>

2 <HEAD>

3 <TITLE></TITLE>

4 <SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>

5 <!--

6 Sub navega_onchange

7 window.navigate window.navega.value

8 End Sub

9 -->

10 </SCRIPT>

11 </HEAD>

12 <BODY>

13 <P>Selecione uma opção na lista, para ir para a página selecionada:</P>

14 <P>

15 <SELECT id=”navega” name=”navega” >

16 <OPTION selected value=Informativo>Selecione uma opção na lista</OPTION>

17 <OPTION value=http://www.axcel.com.br>Axcel Books Editora</OPTION>

18 <OPTION value=http://www.developers.com.br>Developers Magazine</OPTION>

19 <OPTION value=http://www.microsoft.com>Microsoft</OPTION>

20 SELECT>

21 </P>

22 </BODY>

23 </HTML>

Para tornar a lista dinâmica, utilizamos o evento onchange, do controle navega. O controle navega é uma Caixa de combinação. Para maiores informações sobre criação de formulário com HTML, consulte o Capítulo 2. Utilizamos o evento navega_onchange, o qual acontece, toda vez que um elemento da lista for selecionado, o que dispara o evento onchange do controle navega.

Vejam que com uma única linha de código, tornamos a lista dinâmica. A linha de código foi a seguinte:

window.navigate window.navega.value

A primeira parte, utiliza o método navigate do objeto window. Este método é utilizado para carregar uma página no Internet Explorer. O método navigate espera receber um único parâmetro, que é o endereço da página que deve ser carregada. Este parâmetro é obtido a partir do propriedade value do controle navega. Cada opção da Caixa de combinação possui um valor associado. Por exemplo, quando o usuário seleciona Microsoft, a propriedade value é definida como http://www.microsoft.com, e este parâmetro é passado para o método window.navigate, fazendo com que seja carregada a página da Microsft. Este é o comportamento desejado para a nossa página, ou seja, quando uma opção é selecionada, a página associada com a opção selecionada, deve ser carregada no Internet Explorer.

IMPORTANTE! Estamos utilizando o modelo de objetos e de eventos do Internet Explorer. O Nestcape Navigator possui um modelo de objetos diferente do modelo do Internet Explorer. Por isso, scripts desenvolvidos para o modelo do Internet Explorer, podem não funcionar corretamente no Netscape.

« Lição anterior

Δ Página principal

¤ Capítulos

Próxima lição »

GRANDES DESTAQUES DO SITE:

MEGA FORMAÇÃO EM Infraestrutura de TI - Formação Completa e Profissional em Infra de TI: Domine Hardware e Manutenção - Redes de Computadores - Windows Server - Servidores Linux - Banco de Dados e Segurança da Informação e Torne-se o Profissional que o Mercado está Desesperado para Contratar

MAIS DETALHES | COMPRAR

Curso Online de SAP MM HANA - Formação Completa + Acesso ao SAP Hana para Praticar + Acesso a IA que Responde Todas as tuas Dúvidas sobre SAP + 2 horas de Consultoria com o Autor do Curso

MAIS DETALHES | COMPRAR

Formação Completa Purple Team - Equipe Roxa - Formação Blue Team Defesa com Wazuh + Formação Red Team Ataque - Hacker Ético Profissional - Online e Vitalício

MAIS DETALHES | COMPRAR

Formação Online em Power BI e Análise de Dados - do Básico ao Avançado - Criação de Dashboards no Power BI - Funções e Linguagem DAX no Power BI - Análise de Dados com Power Query e Linguagem M e Análise de Dados com o Excel - Formação Completa

MAIS DETALHES | COMPRAR

Cursos Online com Certificado - Formação Completa em Banco de Dados e Linguagem SQL - Linux - Hacker Ético Profissional - Wazuh - Mikrotik e pfSense - Tudo para Alavancar a sua Carreira

MAIS DETALHES | COMPRAR

Formação Profissional em Hardware Montagem Manutenção de Computadores e Impressoras Recuperação de Dados em HDs e SSDs Redes de Computadores e Como Ganhar Dinheiro com Este Conhecimento

MAIS DETALHES | COMPRAR

Júlio Battisti Livros e Cursosa sua sala de aula na internet

GRANDES DESTAQUES DO SITE:

Livros

Vídeo-Aulas

E-books

Cursos Online

Conteúdo Gratuito

Institucional