Linha de comando.com - Tecnologia, Informação, Dicas e muito mais. » Adicionar nova tag

JavaScript: getElementById (Exemplo)

Tiago — Wed, 29 Jul 2009 11:07:29 +0000

Vamos ao primeiro exemplo de utilização da função getElementById.



<script type="text/javascript">
function verificaCampo(){
   var v_campoTexto = document.getElementById('campoTexto');
   if(v_campoTexto.value != "")
      alert("Você digitou: " + v_campoTexto.value)
   else
      alert("Por favor, preencha o campo!")		
}
script>

Resultado:

Campo de texto: id = campoTexto.
Botão: evento onclick chama função verificaCampo().
Função verificaCampo(): atribui o valor do campo de texto a uma variável. Depois é verificado se o valor obtido é diferente de “branco”. Conforme o conteúdo da variável é exibido uma mensagem através do método Alert.

JavaScript: Redirecionando (novo domínio)

Tiago — Tue, 28 Jul 2009 14:56:43 +0000

Quando mudamos o endereço de um site (domínio), uma boa prática é avisar os visitantes sobre a mudança.

Uma maneira fácil de fazer isso, é redirecionar o visitante para o seu novo endereço.

Vamos ao código:

   <script type="text/javascript">
      window.location = "http://www.linhadecomando.com/"
   script>

Acontece que com este código o redirecionamento ocorre instantaneamente.

No próximo post, vamos melhorar este código. Colocaremos um texto informativo e um delay para que ocorra o redirecionamento.

JavaScript: Colocando o texto em maiúsculo

Tiago — Tue, 07 Jul 2009 21:33:35 +0000

Olá pessoal, estamos de volta.

Nos próximos posts estaremos falando de alguns métodos do Objeto String.

Método: toUpperCase
Definição: Converte todos os textos (caracteres) minúsculos em maiúsculos.

Exemplo:

<script>
    var str_texto = "Tecnologia em Primeiro Lugar";
    document.write(str_texto.toUpperCase());
script>

Resultado:
TECNOLOGIA EM PRIMEIRO LUGAR

JavaScript: Carregando uma página em uma nova janela

Tiago — Tue, 30 Jun 2009 01:16:56 +0000

Estarei explicando como utilizar o JavaScript para carregar uma página em uma nova janela, ao pressionar um link.

1º. Vamos criar uma função que servirá de base para a execução do código.

<html>
  <head>
  <script language=javascript>
	function novaJanela (URL){
   		window.open(URL,"janela1","width=800, 
                                   height=600,
                                   directories=no,
                                   location=no,
                                   menubar=no,
                                   scrollbars=no,
                                   status=no,
                                   toolbar=no,
                                   resizable=no")
	}
  script> 
  head>
  <body>
      <a href="javascript:novaJanela('pagina.html')">Clique aqui para abrira>  
  body>
html>

Explicando: O carregamento da nova página vai ocorrer quando clicar em “Clique aqui para abrir”. O link é criado dentro do html com a tag a + href. No atributo href da tag a, foi inserido o código que vai executar a função.

Esta função deve receber como parâmetro a página que deseja abrir. Podemos, alterar alguns parâmetros desta função, como: tamanho da janela (width e height), se a janela pode ser redimensionada (resizable), se é permitido barra de rolagem (scrollbars) entre outros.

Poderíamos também executar esta função através de um botão, porém neste caso devemos utilizar um manipulador de evento (onClick).

Photoshop: Traduções

Tiago — Wed, 29 Apr 2009 02:52:14 +0000

Dhonishow: Criando uma Galeria de Fotos

Tiago — Wed, 28 Jan 2009 17:37:01 +0000

DhoniShow é um javascript criado para você desenvolver galeria de fotos com transição e aplicar em sites.

1. Primeira coisa a se fazer é baixar os códigos javascripts necessários para o funcionamento.

- Dhonishow – versão atualizada: http://lifedraft.de/projekte/dhonishow/

Frameworks necessários:
- Prototype: http://prototypejs.org/
- Script.aculo.us: http://script.aculo.us

2. Após baixar os arquivos, vamos organizar a estrutura de pasta, para ficar mais organizado. Crie uma pasta “site” e as subpastas “js” / “css” / “img”.

site (raiz www)
   |——-js
   |——-css
   |——-img

3. Copie para dentro da pasta “js” os arquivos: dhonishow.js, prototype.js (arquivo foi renomeado), effects.js e scriptaculous.js e para dentro da pasta “css” o arquivo: dhonishow.css.

4. Agora, faça a chamada destes scripts dentro das tags do seu código HTML.

Deverá ficar assim:

5. Veja como é fácil criar uma galeria de fotos com efeitos surpreendentes. Basta colocar as suas imagens dentro da tag

. Esta tag deverá conter uma classe de nome “dhonishow”.

obs. as imagens devem estar dentro da pasta “img”.

6. Para visualizar os botões de navegação, deve-se copiar a pasta “dhoni_img”, que está junto com o pacote de download do dhonishow, para o diretório onde está localizado o seu arquivo index.html.

obs. se você quiser alterar o nome desta pasta ou até mesmo colocá-la em outro lugar, deve-se alterar os dados no arquivo dhonishow.css

.dhonishow-navi .dhonishow-next-picture {
margin-right: 15px;
background: url(../dhoni_img/next.gif) no-repeat;
}
.dhonishow-previous-picture {
background: url(../dhoni_img/previous.gif) no-repeat;
}
.dhonishow-next-picture:hover {
background: url(../dhoni_img/next_hover.gif) no-repeat;
}
.dhonishow-previous-picture:hover {
background: url(../dhoni_img/previous_hover.gif) no-repeat;
}