Archive for the 'JavaScript' Tag

Galeria de Imagens com JavaScript

Posted 16 Fevereiro 2008
Filed under: JavaScript, XHTML | Tags: , ,
* Comments(1)

Uou! Dei uma sumida mas já estou de volta. Agora estudando e ralando, então sobra pouco tempo para blogar. Mas vou tentar não sumir por muito tempo.

Já faz algum tempo que eu queria escrever esse post para mostrar que as HB’s aprendendo Javascript não foram tão inúteis, eu vou mostrar como criar uma simples galeria de imagens com JavaScript. Vale lembrar que eu ainda estou aprendendo, então a coisa vai ser bem básica mesmo.

As imagens
Pegue 4 imagens, de preferência do mesmo tamanho e dê os nomes de 1.jpg, 2.jpg, 3.jpg, e 4.jpg. É importante que as imagens estejam na mesma pasta que você vai salvar a sua página HTML.

O HTML
Primeiro precisamos do código HTML que ficaria assim:

<html>
<head>
</head>
<body>
<h1>Galeria de Imagens</h1>
<p>Use os botões ou clique nas fotos para ampliar.</p>
<input type="button" value="Anterior" onClick="anterior()" />
<input type="button" value="Próxima" onClick="proximo()" /><br /><br />
<img src="1.jpg" id="imgg"/><br /><br />
</body>
</html>

É importante observar que os botões tem uma propriedade “onclick”, que executa uma função Javascript quando é clicado.

E o JavaScript
Essa é a parte da mágica.

<script language="JavaScript">
img =1
function proximo(){
if (img<4){
img++
i =img+".jpg"
document.getElementById("imgg").src=""+i+""
}
}
function anterior(){
if (img!=1){
img––
i =img+".jpg"
document.getElementById("imgg").src=""+i+""
}
}
</script>

Aqui eu criei uma variável chamada img e a iniciei com o valor 1. Depois criei duas funções: uma para avançar “proximo()” e outra para voltar “anterior()”. As funções são chamadas quando clicamos no botões. O Javascript deve ser colocado dentro das tags <head>.

Juntamos tudo e pronto. Como eu tinha dito, essa galeria é bem simples, mas é uma boa forma de mostrar o que se pode fazer com alguns conceitos básicos.

Se tiver alguma dúvida ou se você quiser dar alguma sugestão, comente aí.

PS.: É melhor digitar o código do que copiar pois o WordPress converte as aspas em apóstrofos.

Falando de Javascript 2

Posted 13 Janeiro 2008
Filed under: Aprender, JavaScript | Tags: , ,
* Comments(3)

No post passado fizemos um script que escrevia uma frase na tela do navegador, e falei de como é importante se dedicar para aprender. Nesse post vamos falar de variáveis e cálculos.

Variáveis
De forma resumida, as variáveis são criadas para guardar valores, como por exemplo:

meunome = diogo // A variável meunome possui o valor diogo

Para declarar uma variável é só colocar o nome da variável sem espaços, o sinal de atribuição = e o valor que ela ira guardar.

Fazendo contas
Vamos ver o seguinte script:

<script>
primeironumero = 2 // criamos a variável primeironumero e falamos que ela vale 2
segundonumero = 3 // criamos a variável segundonumero e falamos que ela vale 3
resultado = primeironumero + segundonumero // criamos a variável resultado e falamos que ela é a soma das outras duas variáveis
document.write(resultado) // escrevemos o valor do resultado
</script>

As // (duas barras) servem para fazer comentários no código, os comentários são importantes para que você não se perca no próprio código. Você também pode usar os operadores + - * /.
Agora você já tem algo para fazer no fim de semana, crie novas variáveis, altere os valores, complique os cálculos e seja feliz.
Na próxima vamos falar de extruturas de seleção, o famoso if.

Falando de Javascript

Posted 12 Janeiro 2008
Filed under: Aprender, JavaScript | Tags: , ,
* Comments(1)

Vamos concordar que eu já sou um menino bem grandinho e que já passou da hora de aprender a programar, certo? Essa semana eu estou botando a mão na massa e tentando aprender um pouco mais de Javascript. E como sempre escrevo sobre coisas que não sei, mas que gostaria de aprender, vai aqui mais uma.
Muita gente já me perguntou se é difícil programar, como eu não sei programar eu digo que sim é preciso ter uma boa base em lógica, um bom livro, e muita dedicação. Não entenda esse post como o manual definitivo, mas sim um incentivo para procurar mais sobre o assunto e que sabe ate investir uma grana nisso. Aqui tem um ótimo site para aprender Javascript.
Para começar vamos precisar de um editor de texto simples (bloco de notas ou kedit ou qualquer outro que você tiver) e um navegador (whatever).
Se Javascript é linguagem para web, nada mais justo que você também saiba um pouco sobre HTML, que é a linguagem que todo mundo que desenvolve para web deve saber (você pode aprender um pouco aqui, aqui e aqui).
Primeiramente o código Javascript pode ficar em qualquer lugar da página desde que dentro das tags <script> </script>

O “Alo mundo”
Não pense que você é mais bonito que o resto e vai se livrar dessa, pegue o seu editor de texto e digite (você leu direito? É pra digitar, e não pra fazer ctrl+c ctrl+v ouviu!), depois salve como qualquernome.htm e abra em seu navegador:

<script>
document.write(“Oi eu sou um código de Javascript, não me olhe com essa cara, eu só estou aqui por sua culpa.”)
</script>

Resultado:
Oi eu sou um código de Javascript, não me olhe com essa cara, eu só estou aqui por sua culpa.

Uou!!! Bata palmas você é um gênio. Esse simples código escreve uma frase na tela do seu navegador. O document.write() diz que é para escrever o que está dentro dos parênteses, e como é uma frase que queremos, nós colocamos “ “ antes e depois da frase.
Experiente trocar a frase ou no lugar do document.write(“…”), coloque alert(“…”).
Isso é só uma simples brincadeira, não se contente com isso, busque, aprenda, insista, se você tem vontade vale a pena correr atrás, que sabe ate um curso ou um bom livro.
Mas não acabou, espere que vem mais.

Troca de imagem com CSS + Javascript

Posted 8 Outubro 2007
Filed under: Aprender, CSS, JavaScript, XHTML | Tags: , , ,
* Comments(6)

Andando pela net, esbarrei numa dúvida de uma usuária do orkut. Eu nunca tinha feito nada com Javascript e só conhecia de nome, mas resolvi tentar.

A intenção era fazer uma rotação com duas imagens, com um tempo determinado, e sem usar flash.
Depois de muito sofrimento e de testes frustrados, a coisa saiu.

Esse é o código:
<html>
<head>
<style type=”text/css”>
#foto1{
background:#f00 url(”foto1.jpg”);
width:100px;
height:100px;
}
#foto2{
background:#00f url(”foto2.jpg”);
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id=”foto1″>
bom dia
</div>
<script>
img = document.getElementById(”foto1″)
function trocar()
{
if (img == foto1)
{
document.getElementById(”foto1″).id = “foto2″;
}
if (img == foto2)
{
window.setTimeout(function(){document.getElementById(”foto2″).id = “foto1″;},10000)
}
}
window.setInterval(”trocar()”,20000)
</script>
</body>
</html>

Na verdade foi minha primeira brincadeira com Javascript (depois do “Ola mundo”, mas isso não conta : P).

Depois eu comento com mais calma, abraços.