Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Workshop de Javascript
SEÇÕES
Manuais relacionados
+Workshop de Javascript
Categorias
+Javascript
+Scripts em Javascript

Índice do Manual Workshop de Javascript
+ Efeitos rápidos com Javascript
+ Abertura e configuração de popups com Javascript
+ Acessso por senha Javascript
+ Rollover com Javascript
+ Navegador dinâmico Javascript
+ Navegador desdobrável
+ Navegador desdobrável com frames
+ Texto em movimento na barra de estado
+ Marcar ou desmarcar todos os checkboxes de um formulário com Javascript
+ Desabilitar o menu contextual do navegador com Javascript
+ Relógio em Javascript
+ Scripts diferentes para cada navegador
+ Tamanho dos campos relativo ao navegador
+ Estilos diferentes para cada navegador
+ Tabela de cores com Javascript
+ Sub-menu em outra janela
+ Degradê de cor Javascript
+ Validar inteiro no campo de formulário
+ Exemplos de funcionamento da classe String
+ Exemplo de funcionamento de Date
+ Link aleatório Javascript
+ Geração de números aleatórios Javascript
+ Comprovar se as senhas são iguais
+ Ex. de trabalho com formulários. Calculadora simples
+ Enviar ao navegador a outra página se não tiver Javascript
+ Confirmação de envio de formulário
+ Javascript para se posicionar em um select
+ Inibir um campo texto de formulário com Javascript
+ Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera
+ Mostrar e ocultar camadas com IE 5,6 NS 6,7
+ Movimento de Camadas com IE 5,6 NS 6,7
+ Escritura nas Camadas com IE 5, 6, NS 6, 7
+ Como iluminar tabelas, células ou filas
+ Inibir radio button com Javascript
+ Atualizar dois frames com um só link
+ Calcular a idade em Javascript
+ Iluminar formulários com CSS e Javascript
+ Autozoom de texto com Javascript
+ Javascript para evitar que a página se mostre em um frame
+ Elementos de formulário select associados
+ Conta os caracteres escritos em um textarea
+ Passo de parâmetros em HTML com client-side Javascript
+ Moldura dinâmica em Javascript com texto que muda
+ Criação de gráficos de barras com Javascript
+ Jogos em Javascript
+ Cross-Browser. DHTML compatível com todos os navegadores.
+ HTML Area. Editor WYSIWYG
+ Ocultar um e-mail de um link para evitar o spam
+ Função em Javascript para a inserção de datas
+ DHTML Calendar
+ Gerar uma cor aleatória com Javascript
+ A aprendizagem na Internet
+ Menu Dinâmico com Javascript
+ Página que muda aleatoriamente a cor de fundo
+ Script de recarregamento da página com Javascript
+ Mudar a cor às células de uma tabela com Javascript
+ Pop-ups DHTML – OpenPopups
+ Validar a extensão de um arquivo a subir com Javascript
+ Detectar a resolução da tela do usuário com Javascript
+ Esconder a URL de um link na barra de estado
+ Como integrar conteúdo RSS em minha página?
+ Fazer com que um iframe se ajuste à altura de uma janela com Javascript
+ É vantajoso o uso de ParseInt para validar números?
+ Efeito para desabilitar/habilitar o fundo da Página
+ Validar número de checkbox marcados com Javascript
+ Evitar que um textarea supere um número de caracteres permitidos
+ Javascript não intrusivo
+ Controle de introdução de caracteres de um campo de texto com Javascript
+ Listagem de diferentes Framework Javascript
+ Script para detecção de suporte a Ajax, Cookies e ActiveX
+ Leitor RSS com Javascript
+ Funções para validação alfanumérica de strings em Javascript

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net


Link aleatório Javascript

Criamos um link que nos leva a qualquer URL aleatoriamente, entre várias possibilidades.


Vamos criar um efeito típico em páginas web que consiste em um link que nos levará a um site escolhido de forma aleatória. Para termos um idéia exata podemos ver o exemplo em funcionamento.

Para isso vamos utilizar Javascript. Embora por algumas razões não seja a melhor linguagem para fazer este exercício, sim que vai ser extremamente simples e acreditamos que também será instrutivo para os leitores.

Para começar, vamos criar um array com os diferentes sites para onde poderia nos conduzir nosso link. Temos que definir este array, logicamente, dentro de um bloco <script> na própria página web. A razão pela qual Javascript não é a melhor linguagem para este exercício é justamente esta, que temos que escrever na página todos os possíveis endereços e um usuário avançado poderia ler o código da página e encontrar todas as opções escritas no array.

Esa declaração do array seria algo parecido a isso:

var enderecos = new Array("http://www.terra.com","http://www.google.com","http://www.yahoo.com")

Como pode ser visto, na mesma linha na qual se declara o array se introduzem os valores de cada um de seus campos, utilizando o método rápido de declaração e de preenchimento de arrays em Javascript. Quanto mais valores escrevermos, mais aleatório será o exercício, podendo colocar mais links sem ter que editar o resto do código do programa. Em nosso exemplo completo temos uma lista muito maior de links.

Continuamos colocando o link que se apresentará como "Link Aleatório", que nos levará a um site aleatório, dentro das possibilidades.

<a href="javascript:linkAleatorio()">Link Aleatorio</a>

Como vemos, o link se encarrega de chamar a uma função que será a que vai extrair uma URL do array anterior e nos transferir a este lugar. A função terá esta forma:

function linkAleatorio(){
    aleat = Math.random() * enderecos.length
    aleat = Math.floor(aleat)
    window.location=enderecos[aleat]
}


Como se pode ver, o primeiro que faz a função é obter um valor aleatório entre 0 e "enderecos.length", que é o número de URLs de nosso array. Se mudarmos o número de URLs do array este script continuará funcionando perfeitamente, porque os limites se extraem diretamente da propriedade length do array que contém os endereços.

Para obter esse número aleatório se utiliza o método random da classe Math, que devolve um número entre 0 e 1. Ao multiplica-lo pelo número de posições do array obtemos um número entre 0 e o número de posições do array. Porém este número está em um número flutuante, ou seja, é um número decimal, que não nos serve como índice de um array. Por isso lhe aplicamos o método floor, também do objeto Math, para obter a parte inteira deste número.

Por último se atualiza a propriedade location do objeto window com o valor do array na posição aleatória, o que faz com que o navegador se dirija à página aleatória, dentro das distintas possibilidades.

Exemplo completo

Para ver de maneira global este exercício, transcrevemos aqui todo o código utilizado.

<html>
<head>
    <title>Link Aleatorio</title>
<script>
    var enderecos = new Array("http://www.terra.com.br", "http://www.google.com.br", "http://jbonline.terra.com.br", "http://www.lycos.com", "http://br.yahoo.com", "http://www.altavista.com", "http://www.hotbot.com", "http://www.buscopio.com", "http://oglobo.globo.com", "http://www.excite.com", "http://br.cade.yahoo.com", "http://www.mercadolivre.com.br", "http://br.weather.com", "http://www.buscape.com.br", "http://www.msn.com", "http://www.astrolabio.net")
    function linkAleatorio(){
       aleat = Math.random() * enderecos.length
       aleat = Math.floor(aleat)
       window.location=enderecos[aleat]
    }
</script>
</head>

<body>
<a href="javascript:linkAleatorio()">LinkAleatorio</a>
</body>
</html>


Se quiser ver o exemplo em funcionamento, clique aqui.

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Workshop de Javascript

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Javascript
+ Entrar em Scripts em Javascript


Comentário sem rever
Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.
 Foram econtrados 2 comentários sem rever

VerVer os comentários não revistos



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites