Gostaria de saber como funciona este codigo, ele esta funcionando porem não entendi o codigo

3 de dezembro de 2012 2 respostas

Leomarjr169 3 de dezembro de 2012

<script language="JavaScript">
		var foto=1
		total=10 <!-- DIGITE AQUI O TOTAL DE FOTOS -->
		function backward(){
		if (foto>1){
		window.status='Carregando...'
		foto--
		document.images.photoslider.alt="Carregando..."
		document.images.photoslider.src=""
		document.images.photoslider.src=foto+".jpg"
		fim.style.visibility='hidden'
		window.status='';
		document.rotater.numero.value=foto;
		}
		}
		function forward(){
		if (foto<total){
		window.status='Carregando...'
		foto++
		document.images.photoslider.alt="Carregando..."
		document.images.photoslider.src=""
		document.images.photoslider.src=foto+".jpg"
		window.status=''
		document.rotater.numero.value=foto;
		}
		if (foto==total)
		{
		fim.style.width='100%'
		fim.style.height='20px'
		fim.style.visibility='visible'
		window.status='Final das fotos'
		}
		}
		function mudar(valor)
		{
		foto=valor
		document.images.photoslider.alt="Carregando..."
		document.images.photoslider.src=""
		document.images.photoslider.src=valor+".jpg"
		document.rotater.numero.value=foto;
		}

		function combo(n)
		{
		n=total
		ni=1
		document.write("<select size='1' class='botaoFotos' onChange='location = options[selectedIndex].value'>")
		   while(ni<=n)
		   {
		   document.write("<option value='Javascript:mudar("+ni+")'>"+ni+"</option>")
		   ni++
		   }
		document.write("</select>")
		}
</script>
<div class="conteudo">
				<b><font size="4" color=#ff0000><a name="start">Galeria de Fotos</a></font></b><br>
				<input type="button" value="&lt;&lt;Anterior" class="botaoFotos" name="B2" onClick="backward()">
				<input type="button" value="Próxima&gt;&gt;" class="botaoFotos" name="B1" onClick="forward()">
				<input type="button" value="Início" class="botaoFotos" onClick="foto=2;backward();return false">
				<table border="0" cellpadding="0" align="center">
				  <tr>
					<td width="100%"><img src="1.jpg" name="photoslider">
					</td>
				  </tr>
				  <tr>
					<td width="100%"><form method="POST" name="rotater">
						<div id="fim" align="center" style="visibility:hidden; width:1px height:1px z-index:1;"><b>FINAL DAS FOTOS</b></div>
						<b><font color=#ff0000>Foto <input type="text" name="numero" size="1" value="1"class="botaoFotos"> de 

						<!-- DIGITE AQUI TAMBÉM O TOTAL DE FOTOS -->10

						- Vá para foto: </font></b><script>Javascript:combo()</script></p>
										</form>
					</td>
				  </tr>
				</table>
			</div>

2 Respostas

Leomarjr169 3 de dez. de 2012

OBS: É um álbum de fotos, Preciso explicar o codigo em aula, por favor preciso da ajuda de vocês para q eu consiga entendeu um pouco o código.

windsofhell 5 de dez. de 2012

Esse codigo eh mais feio que nem a Dilma sem maquiagem dando um kick flip McTwist. Mas vamos la:

Aqui eh facil, somente define um index para a primeira foto do album e define o total de imagens.

var foto=1  
total=10 <!-- DIGITE AQUI O TOTAL DE FOTOS -->

Essa eh a funcao “back” (voltar), vou adicionar comments no codigo, eh mais facil.

function backward(){ 
   // Testa se a foto atual nao eh a primeira.
   if (foto>1){  
     // exibe mensagem na status bar do browser.
     window.status='Carregando...'  
     // subtrai o indice da foto atual.
     foto--  
     // troca a foto atual, pela foto anterior.
     document.images.photoslider.alt="Carregando..."  
     document.images.photoslider.src=""  
     document.images.photoslider.src=foto+".jpg"  
     // muda a visibilidade do div, esse div exibe a mensagem "FINAL DAS FOTOS", como nao eh a ultima foto, esconde o div.
     fim.style.visibility='hidden'  
     // limpa a mensagem da status bar.
     window.status='';  
     // attribui o indice da foto atual nesse campo text.
     document.rotater.numero.value=foto;  
   }  
}

Essa a funcao forward (Avancar).

function forward(){  
        // Testa se ainda nao atingiu o final do album.
        if (foto<total){
            // muda a mensagem no status bar.
            window.status='Carregando...'  
            // incrementa o indice, afinal vc esta avancando
            foto++  
            // troca a foto.
            document.images.photoslider.alt="Carregando..."  
            document.images.photoslider.src=""  
            document.images.photoslider.src=foto+".jpg"  
            // limpa a mensagem da status bar.
            window.status=''  
            // atribui o indice da foto atual nessa campo text.
            document.rotater.numero.value=foto;  
        }  
        // Testa, se o indice atual eh igual ao total de fotos, ou seja, ultima foto do album.
        if (foto==total) {
            // muda style e exibe o div com a mensagem "FINAL DAS FOTOS".
            fim.style.width='100%'  
            fim.style.height='20px'  
            fim.style.visibility='visible'  
            // Muda mensagem na status bar.
            window.status='Final das fotos'  
        }  
}

Essa funcao “mudar” faz exatamente isso, muda a foto do album.

function mudar(valor) {  
        foto=valor  
        document.images.photoslider.alt="Carregando..."  
        document.images.photoslider.src=""  
        document.images.photoslider.src=valor+".jpg"  
        document.rotater.numero.value=foto;  
}

Se vc reparar esse codigo esta presente nas outras duas funcoes “forward” e “backward”, entao ao invez de fazer:

// troca a foto.
document.images.photoslider.alt="Carregando..."  
document.images.photoslider.src=""  
document.images.photoslider.src=foto+".jpg"

Entao ao invez de ficar repetindo codigo, voce poderia simplesmente trocar por:

muda(foto);

E por fim, combo. A unica coisa que faz eh montar um combo com as fotos do seu album.

function combo(n) {
       // Isso foi meio estupido, porque adicionar "n" na assinatura da funcao se n = total ???
       // de qualquer forma, n vai se o total de fotos no album.
        n=total  
        // indice da primeira foto.
        ni=1  
        // Esse codigo esta muito estranho, mas eu acho que a intencao aqui eh a cada item selecionado, vai chamar a 
        // funcao muda, passando o indice da foto selecionada.
        document.write("<select size='1' class='botaoFotos' onChange='location = options[selectedIndex].value'>")  
        while(ni<=n) {  
           document.write("<option value='Javascript:mudar("+ni+")'>"+ni+"</option>")  
           ni++  
        }  
        document.write("</select>")  
}

Algumas dicas:
1) Tente nao definir variaveis globais!! Eh uma ma pratica e se vc tiver um codigo grande vai te dar muita dor de cabeca para detectar possiveis erros.

2) Coloquei nomes mais legiveis, nunca use “i”, “ni”, “n”. Coloque o nome completo, fica mais legivel e vai ajudar no entendimento do seu codigo por voce mesmo e
por outras pessoas.

3) Eh Javascript voce nunca faz, por exemplo:

if(dummyNumber == 1)
{

}

O correto seria:

if(dummyNumber == 1) {

}

Voce nao precisa mudar de linha para abri colchetes. Nao vai dar erro no seu programa por causa disso, mas eh uma questao de deixar o codigo mais bonito, claro, respeitando as convencoes da linguagem.

4) Sempre termine a linha com ponto e virgula! A falta dele podera causar varios bugs no seu codigo!

5) NUNCA! Adicione comentarios dessa maneira.

total=10 <!-- DIGITE AQUI O TOTAL DE FOTOS -->

Em Javascrip vc faz:

total=10 // DIGITE AQUI O TOTAL DE FOTOS

ou, se for varias linhas:

total=10 /* DIGITE AQUI O TOTAL DE FOTOS */

E se vc usar alguma framework como JQuery, Dojo, eles tem as suas proprias praticas. Sempre pesquise a melhor maneira e respeite as boas praticas.
Aqui tem um otimo blog post sobre o assunto: http://www.hongkiat.com/blog/source-code-comment-styling-tips/

//Daniel

Criado 3 de dezembro de 2012

Ultima resposta 5 de dez. de 2012

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados