UENF – Curso de Javascript – Prof. Sérgio Rodrigues Pg 1 - Ocorre quando o objeto recebe o...

UENF – Curso de Javascript – Prof. Sérgio Rodrigues Pg 1

ÍNDICE • Javascript - Módulo I 02

• Introdução 02 • Escrevendo no documento 02 • Criando variáveis 03 • Mensagens 04

• Alerta 04 • Confirmação 04 • Receptor 05

• Operadores lógicos 05 • Operadores matemáticos 05 • Controles especiais 06 • Comandos condicionais 07

• Comando if 07 • Comando for 08 • Comando while 08 • Move condicional 09

• Javascript - Módulo II 10 • Eventos 10 • Criando funções 11 • Funções intrínsecas 12 • Criando um menu completo 13 • Interagindo com o usuário 16

• Focando um Objeto 16 • Validando um Formulário 17 • Calculando o preço de um computador 18

• Criando novas instâncias 20 • Manipulando Arrays 20 • Manipulando Datas 21 • Manipulando String’s 23 • Exibindo Informações do Navegador 24 • Alterando a linha de Status 24 • Animando páginas com setTimeout 25

• Rolando mensagens na linha de status 25 • Criando um Texto Animado 26 • Texto Animado com várias Camadas 28


Javascript – Módulo I Introdução

Javascript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Markup Language). As páginas HTML podem ser escritas utilizando-se editores de texto, como o NotePad, Write, etc. O código Javascript fica junto ao de HTML e, portanto, não é necessário o uso de editores diferentes.

Os parágrafos de lógica do Javascript podem estar "soltos" ou atrelados a ocorrência de eventos. Os parágrafos soltos são executados na seqüência em que aparecem na página (documento) e os atrelados a eventos são executados apenas quando o evento ocorre. Para inserir parágrafos de programação dentro do HTML é necessário identificar o início e o fim do set de Javascript, da seguinte forma:

<html> .... <SCRIPT> Set de instruções </SCRIPT> ... </html>

Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhor visualização e facilidade de manutenção, recomenda-se que toda a lógica seja escrita no início do documento, através da criação de funções a serem invocadas quando se fizer necessário (normalmente atreladas a eventos).

Se a lógica é escrita a partir de um determinado evento, não é necessário o uso dos comandos <SCRIPT> e </SCRIPT>. Os comandos Javascript são sensíveis ao tipo de letra (maiúsculas e minúsculas) em sua sintaxe. Portanto, é necessário que seja obedecida a forma de escrever os comandos, de acordo com a forma apresentada. Caso seja cometido algum erro de sintaxe na escrita de um comando, o Javascript interpretará, o que seria um comando, como sendo o nome de uma variável. Escrevendo no Documento

O Javascript permite que o programador escreva linhas dentro de uma página (documento), através do método write. As linhas escritas desta forma, podem conter textos, expressões Javascript e comandos Html. As linhas escritas através deste método aparecerão no ponto da tela onde o comando for inserido.


Exemplo 21 – Escrevendo no documento <html> <head> <title>Exemplo 21</title> </head> <body> <h1>Primeiro exemplo</h1> <br> <script language="JavaScript"> document.write("Meu primeiro script !!!"); </script> </body> </html> Criando Variáveis

Algumas linguagens de programação exigem que você declare uma variável antes de utilizá-la. O Javascript inclui a palavra-chave var, que pode ser utilizada para declarar uma variável. Você pode omitir var em muitos casos, fazendo com que a variável seja criada automaticamente, pela simples associação de valores a mesma.

Exemplo: novaVariavel = "Jose"; var valor = 5; As variáveis podem ser Locais ou Globais. As variáveis que são criadas

dentro de uma função são Locais e referenciáveis apenas dentro da função. As variáveis criadas fora de funções são Globais, podendo serem referenciadas em qualquer parte do documento. Desta forma, variáveis que precisam ser referenciadas por várias funções ou em outra parte do documento, precisam ser definidas como globais. Exemplo 22 – Criando uma variavel <html> <head> <title>Exemplo 22</title> </head> <body> <br> <script language="JavaScript"> valorInicial = 5; document.write("<b>Valor Inicial</b> = " + valorInicial); document.write("<br>");


document.write("<b>Valor Final</b> = " + (valorInicial+15)); </script> </body> </html> Mensagens

Existem três formas de comunicação com o usuário através de mensagens. 1 – Apenas Observação. alert ( mensagem ) Exemplo 23 – Mensagens - alert <html> <head> <title>Exemplo 23</title> <script> alert("Texto de Alerta!"); </script> </head> <body> Testando mensagem de alerta! </body> </html> 2 – Mensagem que retorna confirmação de OK ou CANCELAR confirm (mensagem) Exemplo 24 – Mensagens - confirm <html> <head> <title>Exemplo 24</title> <script> var resposta = confirm("Confirma Dados?"); </script> </head> <body> <script> document.write("A resposta dada foi <b>" + resposta + "</b>"); </script> </body> </html>


3 – Recebe mensagem via caixa de texto Input Receptor = prompt ("Mensagem", "Texto") Onde:

Receptor é o campo que vai receber a informação digitada pelo usuário. Mensagem é a mensagem que vai aparecer como Label da caixa de input Texto é um texto, opcional, que aparecerá na linha de digitação do usuário

Exemplo 25 – Mensagens - prompt <html> <head> <title>Exemplo 25</title> <script> senha = prompt("Digite a senha desta página:",""); </script> </head> <body> <script> document.write("A senha dada foi <b>" + senha + "</b>"); </script> </body> </html> Operadores Lógicos

São operadores a serem utilizados em comandos condicionais, tais como: if , for e while. Os comandos condicionais serão vistos mais a frente.

== Igual != Diferente > Maior >= Maior ou Igual < Menor <= Menor ou Igual && E || Ou Operadores Matemáticos

São operadores a serem utilizados em cálculos, referências de indexadores e manuseio de strings. Ao longo desta apostila estes operadores serão largamente utilizados, dando, assim, uma noção mais precisa do seu potencial.


+ adição de valor e concatenação de strings - subtração de valores * multiplicação de valores / divisão de valores % obtém o resto de uma divisão:

Ex: 150 % 15 retornará 0 7 % 3 retornará 1

+= concatena /adiciona ao string/valor já existente. Ex: x += y é o mesmo que x = x + y, da mesma forma podem ser utilizados: -= , *= , /= ou %=

Um contador pode ser simplificado utilizando-se : X++ ou X-- o que equivale

as expressões: X = X + 1 ou X = X - 1 respectivamente. Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

Exemplo 26 – Operadores matematicos <html> <head> <title>Exemplo 26</title> </head> <body> <script> var valor1 = 5; var valor2 = valor1 + 5; var valor3 = valor2 / 2; var valor4 = valor2 % 2; valor3--; valor4+=2; var valor5 = valor3 * valor4; document.write("valor 1 = " + valor1 + "<br>"); document.write("valor 2 = " + valor2 + "<br>"); document.write("valor 3 = " + valor3 + "<br>"); document.write("valor 4 = " + valor4 + "<br>"); document.write("valor 5 = " + valor5 + "<br>"); </script> </body> </html> Controles Especiais \n nova linha \t tabulação // Linha de comentário


/*...*/ Delimitadores para inserir um texto com mais de uma linha como comentário.

Os delimitadores naturais para uma string são " ou ' . Caso seja necessário a utilização destes caracteres como parte da string, utilize \ precedendo " ou '. Exemplo 27 – Controles especiais <html> <head> <title>Exemplo 27</title> </head> <body> <h1> Confira os textos abaixo:</h1> <script> document.write("Cuidado com o uso de \" ou \' em uma string"); /* Este texto nao ira aparecer na pagina */ alert("Texto 1\nTexto2\tTexto3"); // comentario... </script> </body> </html> Comandos Condicionais

São comandos que condicionam a execução de uma certa tarefa à veracidade ou não de uma determinada condição, ou enquanto determinada condição for verdadeira. São eles: Comando if if (condição) { ação para condição satisfeita } else { ação para condição não satisfeita } Exemplo 28 – Comando if <html> <head>


<title>Exemplo 28</title> <script> senha = prompt("Digite a senha desta página:",""); if (senha == "12345") msg = "Senha Correta !"; else msg = "Senha Incorreta !"; </script> </head> <body> <script> document.write("<b>" + msg + "</b>"); </script> </body> </html> Comando for for (inicialização de variável de controle ; condição ; incremento da variável de controle) { ação } Exemplo 29 – Comando for <html> <head> <title>Exemplo 29</title> </head> <body> <h1>Confira os Resultados abaixo</h1> <script> for (x = 0 ; x <= 5 ; x++) { document.write("Valor Atual = <b>" + x + "</b><br>"); } </script> </body> </html> Comando while

Executa uma ação enquanto determinada condição for verdadeira.

while (condição) {


ação } Exemplo 30 – Comando while <html> <head> <title>Exemplo 30</title> </head> <body> <h1>Confira os Resultados abaixo</h1> <script> var x = 0; while (x <= 5) { document.write("Valor Atual = <b>" + x + "</b><br>"); x++; } </script> </body> </html> Move condicional variavel = (condição) ? verdadeiro : falso Exemplo 31 – Move condicional <html> <head> <title>Exemplo 31</title> <script> senha = prompt("Digite a senha desta página:",""); msg = (senha=="12345") ? "Senha Correta!" : "Senha Incorreta!"; </script> </head> <body> <script> document.write("<b>" + msg + "</b>"); </script> </body> </html>


Javascript – Módulo II Eventos

São fatos que ocorrem durante a execução do sistema, a partir dos quais o programador pode definir ações a serem realizadas pelo programa. Abaixo apresentamos a lista dos eventos possíveis, indicando os momentos em que os mesmos podem ocorrer, bem como, os objetos passíveis de sua ocorrência. onload - Ocorre na carga do documento. onunload - Ocorre na descarga (saída) do documento. onchange - Ocorre quando o objeto perde o focus e houve mudança de conteúdo. onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudança. onfocus - Ocorre quando o objeto recebe o focus. onclick - Ocorre quando o objeto recebe um Click do Mouse. onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto. onselect - Ocorre quando o objeto é selecionado. onsubmit - Ocorre quando um botão tipo Submit recebe um click do mouse. Exemplo 32 – Eventos I <html> <head> <title>Exemplo 32</title> </head> <body onload="alert('Seja Bem-vindo!');" onunload="alert('Obrigado pela visita!');"> Bla! Bla! Bla! ... </body> </html> Exemplo 33 – Eventos II <html>


<head> <title>Exemplo 33</title> </head> <body> <form> <input type="button" value="Teste 1" onclick="alert('evento onclick');"> <p> <input type="button" value="Teste 2" onmouseover="alert('evento onmouseover');"> <p> </form> </body> </html> Criando Funções Uma função é composta por um conjunto de instruções, que só devem ser executadas quando a função for acionada. A sintaxe geral é a seguinte: function NomeFuncao (Parâmetros) { Conjunto de ações ... } Exemplo 34 – Funcoes I <html> <head> <title>Exemplo 34</title> <script language="Javascript"> function entrou() { alert("Seja Bem-vindo!"); } function saiu() { alert("Obrigado pela visita!"); } </script> </head> <body onload="entrou();" onunload="saiu();"> Texto... </body> </html>


Funções Intrínsecas

São funções embutidas na própria linguagem. A sintaxe geral é a seguinte:

Result = função (informação a ser processada) eval – Calcula o conteúdo da string parseInt – Retorna a parte inteira de uma string parseFloat - Transforma string em número com ponto flutuante date() - Retorna a data e a hora Exemplo 1: Result = eval ( " (10 * 20) + 2 - 8") Exemplo 2: Result = eval (string)

No primeiro exemplo Result seria igual a 194. No segundo, depende do conteúdo da string, que também pode ser o conteúdo (value) de uma caixa de texto. Exemplo 35 – Funcoes II <html> <head> <title>Exemplo 35</title> </head> <script> function mostra() { document.all.camada1.style.display = "block"; } function esconde() { document.all.camada1.style.display = "none"; } </script> <body> <div id="camada1" style="position:absolute; left:60; top:50; background-color:yellow; display:block;"> Camada 1 </div> <form> <input type="button" value="Mostrar" onclick="mostra();"> <input type="button" value="Esconder" onclick="esconde();">


</form> </body> </html> Exemplo 36 – Funcoes III <html> <head> <title>Exemplo 36</title> </head> <script> function mostra(opcao) { eval("document.all."+opcao+".style.display = 'block'"); } function esconde(opcao) { eval("document.all."+opcao+".style.display = 'none'"); } </script> <body> <div id="camada1" style="position:absolute; left:60; top:50; background-color:yellow; display:block;"> Camada 1 </div> <div id="camada2" style="position:absolute; left:240; top:50; background-color:yellow; display:block;"> Camada 2 </div> <form> <input type="button" value="Mostrar1" onclick="mostra('camada1');"> <input type="button" value="Esconder1" onclick="esconde('camada1');"> <input type="button" value="Mostrar2" onclick="mostra('camada2');"> <input type="button" value="Esconder2" onclick="esconde('camada2');"> </form> </body> </html> Criando um menu completo Agora já sabemos o suficiente para criarmos um Menu completo, abrangendo folhas de estilo e os eventos abordados anteriormente.


Veja o código abaixo: Exemplo 37 – Menu – Criando um menu completo <html> <head> <title>Exemplo 20</title> <style> a { font-family:verdana, arial; font-size:12px; color:#006000; font-weight:bold; text-decoration:none; height:20px; } a:hover { font-family:verdana, arial; font-size:12px; color:#006000; font-weight:bold; text-decoration:underline; height:20px; } </style> <script> function mostraMenu(menu) { esconde(); eval("document.all."+menu+".style.display = 'block'"); } function esconde() { for(i=1;i<=3;i++) eval("document.all.opcao"+i+".style.display = 'none';"); } </script> </head> <body> <div id="op0" style="position:absolute; width:'100%'; top:10; background-color:'#008000'; color:'white'"> </div> <div id="op1" style="position:absolute; left:50; top:10;


background-color:'#008000'; color:'white'" onmouseover="mostraMenu('opcao1');"> <font face="verdana, arial"><b> Menu 1 </font> </div> <div id="op2" style="position:absolute; left:200; top:10; background-color:'#008000'; color:'white'" onmouseover="mostraMenu('opcao2');"> <font face="verdana, arial"><b> Menu 2 </font> </div> <div id="op3" style="position:absolute; left:350; top:10; background-color:'#008000'; color:'white'" onmouseover="mostraMenu('opcao3');"> <font face="verdana, arial"><b> Menu 3 </font> </div> <div id="op0" style="position:absolute; width:'100%'; top:30; height:100; background-color:'#FFFFF0'; color:'white'" onmouseover="esconde();"> </div> <div id="opcao1" style="position:absolute; left:50; top:30; background-color:'#FFFFDD'; display:none;"> <a href="exemplo1.htm">Exemplo 1</a><br> <a href="exemplo2.htm">Exemplo 2</a><br> <a href="exemplo3.htm">Exemplo 3</a><br> </div> <div id="opcao2" style="position:absolute; left:200; top:30; background-color:'#FFFFDD'; display:none;"> <a href="exemplo4.htm">Exemplo 4</a><br> <a href="exemplo5.htm">Exemplo 5</a><br> <a href="exemplo6.htm">Exemplo 6</a><br> </div> <div id="opcao3" style="position:absolute; left:350; top:30; background-color:'#FFFFDD'; display:none;"> <a href="exemplo7.htm">Exemplo 7</a><br> <a href="exemplo8.htm">Exemplo 8</a><br> <a href="exemplo9.htm">Exemplo 9</a><br> </div> </body> </html>


Interagindo com o Usuário

A interação com o usuário se dá através de objetos para entrada de dados (textos), marcação de opções (radio, checkbox e combo), botões e link's para outras páginas. Conceitualmente, os objetos são divididos em: Input, Textarea e Select, sendo que o objeto Input divide-se (propriedade Type) em: Password, Text, Hidden, Checkbox, Radio, Button, Reset e Submit.

A construção destes objetos é feita pela linguagem HTML, mas eles também podem ser manipulados pelo Javascript. Abaixo estão relacionadas algumas formas de utilização do Javascript em Formulários. Focando um Objeto

Este método permite que o cursor seja ativado em um determinado objeto (focado). Isso pode ser feito na carga do documento, a partir da ocorrência de um evento ou mesmo dentro de uma função.

Observe que até agora o usuário tinha que dar um "Click" para focar o objeto desejado. De forma semelhante existe o método "Select". Este método marca o conteúdo do objeto com uma tarja roxa, permitindo ao usuário, em caso de substituição do conteúdo do campo, não ter que deletar o conteúdo anterior, pois, com este método, a deleção se dá de forma automática quando da digitação do novo conteúdo. Exemplo 38 – Focando um Objeto <html> <head> <title>Exemplo 38</title> </head> <body onload="document.frmMatricula.matricula.focus()"> <form name="frmMatricula"> Matricula:<input type="text" name="matricula" size="10"><br> Nome:<input type="text" name="nome" size="30"><br> Turma: <select name="turma"> <option value="0">Escolha a Turma</option> <option value="1">Turma 1</option> <option value="2">Turma 2</option> <option value="3">Turma 3</option> </select> </form> </body> </html>


Validando um Formulário Uma outra maneira de incrementar seu formulário é tratá-lo de forma que seus campos sempre estejam corretos. Por exemplo, em um cadastro de Matricula de Alunos, não se pode submeter um formulário sem o nome e sem a matrícula do aluno... veja um exemplo prático desta situação: Exemplo 39 – Validando um Formulario <html> <head> <title>Exemplo 39</title> <script> function validaForm() { var frm = document.frmMatricula; if (frm.matricula.value == "") { alert("Preencha a Matricula!"); frm.matricula.focus(); } else if (frm.nome.value == "") { alert("Preencha o Nome!"); frm.nome.focus(); } else if (frm.turma.value == "0") { alert("Escolha a Turma!"); frm.turma.focus(); } else { alert("Matricula efetuada com sucesso!"); } } </script> </head> <body onload="document.frmMatricula.matricula.focus();"> <form name="frmMatricula"> Matricula:<input type="text" name="matricula" size="10"><br> Nome:<input type="text" name="nome" size="30"><br> Turma: <select name="turma"> <option value="0">Escolha a Turma</option> <option value="1">Turma 1</option>


<option value="2">Turma 2</option> <option value="3">Turma 3</option> </select> <p> <input type="button" name="btnConfirma" value="Confirmar" onclick="validaForm();"> <input type="reset" name="btnLimpar" value="Limpar"> </form> </body> </html> Calculando o preço de um computador Podemos criar várias outras páginas de iteração com o usuário. O exemplo a seguir trata-se de uma página para calcular o preço de um computador dinamicamente, dado a configuração feita pelo cliente. Exemplo 40 – Calculando o preco de um computador <html> <head> <title>Exemplo 38</title> </head> <script> function calcula() { var total = 0; var frm = document.frmPreco; total += parseInt(frm.computador.value); total += parseInt(frm.impressora.value); for(i=1;i<=5;i++) { if ( eval("frm.acessorio"+i+".checked") == true) total += parseInt(eval("frm.acessorio"+i+".value")); } eval("alert('Total = R$' + total + ',00')"); } </script> <body> <center><h1>Calcule o preco do seu computador!!!</h1></center> <br> <form name="frmPreco"> <table border=1 width="80%" align="center"> <tr> <th width="50%">Computador</th> <td>


<select name="computador"> <option value="1000">Configuracao 1</option> <option value="1500">Configuracao 2</option> <option value="2000">Configuracao 3</option> <option value="2500">Configuracao 4</option> <option value="3000">Configuracao 5</option> </select> </td> </tr> <tr> <th width="50%">Impressora</th> <td> <select name="impressora"> <option value="0">-- Nenhuma --</option> <option value="200">Impressora 1</option> <option value="500">Impressora 2</option> <option value="800">Impressora 3</option> </select> </td> </tr> <tr> <th width="50%">Acessorios</th> <td> <input type="checkbox" name="acessorio1" value="100">Acessorio 1</input><br> <input type="checkbox" name="acessorio2" value="200">Acessorio 2</input><br> <input type="checkbox" name="acessorio3" value="300">Acessorio 3</input><br> <input type="checkbox" name="acessorio4" value="400">Acessorio 4</input><br> <input type="checkbox" name="acessorio5" value="500">Acessorio 5</input><br> </td> </tr> </table> <p> <center> <input type="button" value="Calcula o valor total" onclick="calcula();"> </center> </form> </body> </html>


Criando novas instâncias

Através do operador new podem ser criadas novas instâncias a objetos já existentes, mudando o seu conteúdo, porém, mantendo suas propriedades. A sintaxe geral é a seguinte:

NovoObjeto = new ObjetoExistente (parâmetros) Exemplo1: MinhaData = new Date () MinhaData passou a ser um objeto tipo Date, com o mesmo conteúdo existente em Date (data e hora atual) Exemplo2: MinhaData = new Date(1996, 05, 27) MinhaData passou a ser um objeto tipo Date, porém, com o conteúdo de uma nova data. Exemplo 41 – Criando novas instâncias <html> <head> <title>Exemplo 41</title> <script> function data() { dataAtual = new Date(); return dataAtual; } </script> </head> <body> <form> <input type="button" value="Data Atual" onclick="alert(data());"> </form> </body> </html> Manipulando Arrays A forma de se criar um array em Javascript é simples, basta associar a uma variável a instância Array(nro). Onde nro é o número de objetos criados.


Exemplo 42 – Manipulando Arrays <html> <head> <title>Exemplo 42</title> <script> var diaSemana = new Array(7) diaSemana[0] = "Domingo"; diaSemana[1] = "Segunda"; diaSemana[2] = "Terca"; diaSemana[3] = "Quarta"; diaSemana[4] = "Quinta"; diaSemana[5] = "Sexta"; diaSemana[6] = "Sabado"; var hoje = new Date(); var diaHoje = hoje.getDay(); </script> </head> <body> <form> <input type="button" value="Data Atual" onclick="alert(diaSemana[diaHoje]);"> </form> </body> </html>

É importante lembrar que, embora os exemplos estejam com indexadores fixos, os indexadores podem ser referências ao conteúdo de variáveis. Manipulando Datas

A função Date() devolve data e hora no formato:Dia da semana, Nome do mês, Dia do mês, Hora:Minuto:Segundo e Ano Ex. Fri May 24 16:58:02 1996 Para se obter os dados separadamente, existem os seguintes métodos: getDate() - Obtém o dia do mês (numérico de 1 a 31) getDay() - Obtém o dia da semana (0 a 6) getMonth() - Obtém o mês (numérico de 0 a 11) getYear() - Obtém o ano getHours() - Obtém a hora (numérico de 0 a 23) getMinutes() - Obtém os minutos (numérico de 0 a 59) getSeconds() - Obtém os segundos (numérico de 0 a 59)


No exemplo abaixo obteremos a data do sistema em português, na forma:

Dia da semana, Dia do mês, nome do Mês e Ano. Exemplo 43 – Manipulando Datas <html> <head> <title>Exemplo 43</title> <script> var diaSemana = new Array(7); var mes = new Array(12); diaSemana[0] = "Domingo"; diaSemana[1] = "Segunda"; diaSemana[2] = "Terca"; diaSemana[3] = "Quarta"; diaSemana[4] = "Quinta"; diaSemana[5] = "Sexta"; diaSemana[6] = "Sabado"; mes [0] = "Janeiro"; mes [1] = "Fevereiro"; mes [2] = "Marco"; mes [3] = "Abril"; mes [4] = "Maio"; mes [5] = "Junho"; mes [6] = "Julho"; mes [7] = "Agosto"; mes [8] = "Setembro"; mes [9] = "Outubro"; mes[10] = "Novembro"; mes[11] = "Dezembro"; var hoje = new Date(); var diaHoje = hoje.getDay(); var nroDia = hoje.getDate(); var mesHoje = hoje.getMonth(); var anoHoje = hoje.getYear(); msg = diaSemana[diaHoje] + ", "; msg += nroDia + " de " + mes[mesHoje]; msg += " de " + anoHoje; </script> </head> <body> <script> document.write("<b>"+msg+"</b>"); </script> </body> </html>


Manipulando String’s

O Javascript é bastante poderoso no uso de String´s, fornecendo ao programador uma total flexibilidade em seu manuseio. Abaixo estão apresentados os métodos mais comuns para o tratamento de string´s. string.length - retorna o tamanho da string (quantidade de bytes) string.charAt(posição) - retorna o caracter da posição especificada (inicia em 0) string.indexOf("string") - retorna o número da posição onde começa a primeira "string" string.substring(index1, index2) - retorna o conteúdo da string que corresponde ao intervalo especificado. Começando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2. Vamos verificar o exemplo: Exemplo 44 – Manipulando String’s <html> <head> <title>Exemplo 44</title> <script> var msg = "Joao Carlos da Silva" </script> </head> <body> <h1>Veja os resultados</h1> <br> Mensagem = <script>document.write(msg);</script><p> Tamanho da Mensagem = <script>document.write(msg.length);</script><br> Caracter da Posicao 0 = <script>document.write(msg.charAt(0));</script><br> Caracter da Posicao 10 = <script>document.write(msg.charAt(10));</script><br> Caracter da ultima Posicao = <script>document.write(msg.charAt(msg.length-1));</script><br> Posicao da string "Carlos" = <script>document.write(msg.indexOf("Carlos"));</script><br> Caracteres entre as posicoes 5 e 10 =


function mensagem(msg) { window.status = msg; } </script> </head> <body onload="mensagem('Texto na linha de status!!!')"> <h1>Olhe a linha de Status</h1> </body> </html> Animando páginas com setTimeout

O método setTimeout permite a programação para que uma determinada ação só ocorra após o transcurso de um determinado tempo. setTimeout ("Ação", tempo) Onde:

Ação é a ação que se quer realizar e tempo é o tempo (em milisegundos) de espera para que a ação ocorra.

É importante observar que a ação só ocorrerá uma vez. Para que a ação volte a ocorrer, será necessário repetir o comando dentro da ação, obtendo-se, assim, um LOOP.

Rolando mensagens na linha de status

Abaixo encontra-se um exemplo de rolagem de mensagens na linha de status. Exemplo 47 – Rolando mensagens na linha de status <html> <head> <title>Exemplo 47</title> <script> var msg = ""; msg += " --- Mensagem 1 --- "; msg += " --- Mensagem 2 --- "; msg += " --- Mensagem 3 --- "; msg += " --- Mensagem 4 --- "; msg += " --- Mensagem 5 --- "; var pos = 0; function rolarmsg() {


window.status = msg.substring(pos, msg.length) + msg.substring(0,pos); pos++; if (pos > msg.length) pos=0; setTimeout("rolarmsg()", 200); } </script> </head> <body onload="rolarmsg()"> <h1>Olhe a linha de Status</h1> </body> </html> Criando um Texto Animado O próximo exemplo simula um texto piscando na tela. Veremos adiante, como animar ainda mais este exemplo. Exemplo 48 – Texto Animado I <html> <head> <title>Exemplo 48</title> <script language="Javascript"> var i = 0; var cor = new Array(2); cor [0]="#FFFFFF"; cor [1]="#000000"; function next() { i++; if (i > 1) i = 0; document.all.camada.style.color = cor[i]; setTimeout("next()", 300); } </script> </head> <body onload="next()"> <b> <div align="center" id="camada" style="position:relative;"> <font face="verdana, arial" size=7>UENF</font> <br>


<font face="verdana, arial" size=3> Universidade Estadual do Norte Fluminense </font> </div> </b> </body> </html> Agora, adicionaremos algumas cores intermediárias(em tons de cinza) para dar um efeito visual melhor ao nosso texto. Exemplo 49 – Texto Animado II <html> <head> <title>Exemplo 49</title> <script language="Javascript"> var i = 0; var cor = new Array(44); cor [0]="#FFFFFF"; cor [1]="#FFFFFF"; cor [2]="#EEEEEE"; cor [3]="#DDDDDD"; cor [4]="#CCCCCC"; cor [5]="#BBBBBB"; cor [6]="#AAAAAA"; cor [7]="#999999"; cor [8]="#888888"; cor [9]="#777777"; cor[10]="#666666"; cor[11]="#555555"; cor[12]="#444444"; cor[13]="#333333"; cor[14]="#222222"; cor[15]="#111111"; cor[16]="#000000"; cor[17]="#000000"; cor[18]="#000000"; cor[19]="#000000"; cor[20]="#000000"; cor[21]="#000000"; cor[22]="#000000"; cor[23]="#000000"; cor[24]="#000000"; cor[25]="#000000"; cor[26]="#000000";


cor[27]="#000000"; cor[28]="#000000"; cor[29]="#000000"; cor[30]="#111111"; cor[31]="#222222"; cor[32]="#333333"; cor[33]="#444444"; cor[34]="#555555"; cor[35]="#666666"; cor[36]="#777777"; cor[37]="#888888"; cor[38]="#999999"; cor[39]="#AAAAAA"; cor[40]="#BBBBBB"; cor[41]="#CCCCCC"; cor[42]="#DDDDDD"; cor[43]="#EEEEEE"; function next() { i++; if (i > 44) i = 0; document.all.camada.style.color = cor[i]; setTimeout("next()", 100); } </script> </head> <body onload="next()"> <b> <div align="center" id="camada" style="position:relative;"> <font face="verdana, arial" size=7>UENF</font> <br> <font face="verdana, arial" size=3> Universidade Estadual do Norte Fluminense </font> </div> </b> </body> </html> Texto Animado com várias Camadas E finalmente, vamos incluir algumas camadas ao nosso exemplo. Veja que efeito interessante.


Exemplo 50 – Texto Animado III <html> <head> <title>Exemplo 50</title> <script language="Javascript"> var i = 0; var j = 0; var cor = new Array(44); cor [0]="#FFFFFF"; cor [1]="#FFFFFF"; cor [2]="#EEEEEE"; cor [3]="#DDDDDD"; cor [4]="#CCCCCC"; cor [5]="#BBBBBB"; cor [6]="#AAAAAA"; cor [7]="#999999"; cor [8]="#888888"; cor [9]="#777777"; cor[10]="#666666"; cor[11]="#555555"; cor[12]="#444444"; cor[13]="#333333"; cor[14]="#222222"; cor[15]="#111111"; cor[16]="#000000"; cor[17]="#000000"; cor[18]="#000000"; cor[19]="#000000"; cor[20]="#000000"; cor[21]="#000000"; cor[22]="#000000"; cor[23]="#000000"; cor[24]="#000000"; cor[25]="#000000"; cor[26]="#000000"; cor[27]="#000000"; cor[28]="#000000"; cor[29]="#000000"; cor[30]="#111111"; cor[31]="#222222"; cor[32]="#333333"; cor[33]="#444444"; cor[34]="#555555"; cor[35]="#666666";


cor[36]="#777777"; cor[37]="#888888"; cor[38]="#999999"; cor[39]="#AAAAAA"; cor[40]="#BBBBBB"; cor[41]="#CCCCCC"; cor[42]="#DDDDDD"; cor[43]="#EEEEEE"; function next() { i++; if (i > 44) { i = 0; j++; if (j > 2) { j=0; } if (j==0) { document.all.camada0.style.display = 'block'; document.all.camada1.style.display = 'none'; document.all.camada2.style.display = 'none'; } if (j==1) { document.all.camada0.style.display = 'none'; document.all.camada1.style.display = 'block'; document.all.camada2.style.display = 'none'; } if (j==2) { document.all.camada0.style.display = 'none'; document.all.camada1.style.display = 'none'; document.all.camada2.style.display = 'block'; } } eval("document.all.camada"+j+".style.color = cor[i]"); setTimeout("next()", 100); } </script> </head> <body onload="next()"> <b>


<div align="center" id="camada2" style="position:relative; display:none;"> <font face="verdana, arial" size=7>UFRJ</font> <br> <font face="verdana, arial" size=3> Universidade Federal do Rio de Janeiro </font> </div> <div align="center" id="camada1" style="position:relative; display:none;"> <font face="verdana, arial" size=7>UFF</font> <br> <font face="verdana, arial" size=3> Universidade Federal Fluminense </font> </div> <div align="center" id="camada0" style="position:relative; display:block;"> <font face="verdana, arial" size=7>UENF</font> <br> <font face="verdana, arial" size=3> Universidade Estadual do Norte Fluminense </font> </div> </b> </body> </html>

UENF – Curso de Javascript – Prof. Sérgio Rodrigues Pg 1 - Ocorre quando o objeto recebe o...

Documents

Transcript of UENF – Curso de Javascript – Prof. Sérgio Rodrigues Pg 1 - Ocorre quando o objeto recebe o...