<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>ejercicio</title>
<style type="text/css">
td {
	text-align: center;
}
</style>

<script type="text/javascript" >
	var vInicial ;
	var vFinal ;
	var incremento
	var variable = dato(0,24,0);
	var caso = Math.random();
	 vInicial = 0;
	 vFinal = 7;
	var	incremento;
	if (caso<0.6){
	 vInicial = 0;
	 vFinal = 7;
		incremento = dato(2,3,0);
	}else {
	 vInicial = 7;
	 vFinal = 0;	
	 incremento = dato(-2,-1,0);	
	}




function dato(menor,mayor,decimales) {// funcion para conseguir datos aleatorios
var d = Math.round((Math.random()*(mayor-menor)+menor)*Math.pow(10,decimales))/Math.pow(10,decimales);
return d;	
}


function high(salida) { 
	var c= "#ff0000";//c almacena el color del led
	

	setTimeout('document.getElementById(' + salida + ').style.background ="'+ c+ '"',tiempo);	
}
  		
 function low(salida) { 
 	setTimeout('document.getElementById(' + salida + ').style.background ="#FFFFFF"',tiempo);	
 
}

var tiempo = 0;

function pausa(milisegundos) {
	tiempo = tiempo + milisegundos;
}

var tiempoDp;//almacena el tiempo que tarda p() en ejecutarse
function p() {//aquí debemos escribir el programa que se repite una sola vez
	tiempo = 0;

	document.getElementById('inicial').innerHTML=vInicial;
	document.getElementById('final').innerHTML=vFinal;
	document.getElementById('incremento').innerHTML=incremento;
	for (i=0; i<2;i++){
	document.getElementsByName('variable')[i].innerHTML=variable;
	}
		//apagamos todas las salidas
	for (i=0;i<8;i++) {
		low(i);
		
	}
		pausa(200);//un retraso inicial para ver mejor el inicio del programa
	//escribir aquí el programa
	if (caso<0.6){
	
	for (i=vInicial;i<= vFinal;i= i + incremento)  {
		high(i);
		pausa(500);
	
			
	}
	}else {
		for (i=vInicial;i>= vFinal;i= i + incremento)  {
		high(i);
		pausa(500);
	}
	}
	
	
				
}

function bucle(){//esta función se comporta como un bucle infinito sobre la función p()
	p();
	setInterval('p()',tiempo);

}
function reinicio() {

document.location.href = document.location.href;

}
</script>

</head>
<body onload="p()"><!-- bucle() para bucle infinito  y p()para una sola vez.Esto carga el programa nada mas cargar la página-->

<p>Prueba el siguiente programa para entender un bucle for complejo</p>


<pre>
for b<span name="variable"></span> = <span id="inicial">0</span> to <span id="final">7</span> step <span id="incremento">1</span>
high b<span name="variable"></span>
pause 500
next
</pre>



<table border="1" cellpadding="2" cellspacing="2">
	<tbody><tr>
		<td id="7">7</td>
		<td id="6">6</td>
		<td id="5">5</td>
		<td id="4">4</td>
		<td id="3">3</td>
		<td id="2">2</td>
		<td id="1">1</td>
		<td id="0">0</td>
		
	</tr>
	
</tbody></table>
<br>
<p>Pulsa el siguiente botón para ver otra vez el programa escrito.</p>
<input value="reiniciar" onclick="p()" type="submit">
<p>Pulsa el siguiente botón si quieres ver otro programa de ejemplo</p>
<input value="nuevo ejemplo" onclick="reinicio()" type="submit">
</body></html>