Autor Tema: código JavaScript slideshow con rotación automática imágenes setTimeout CU01166E (Leído 4070 veces)

bermartinv · « **en:** 02 de Marzo 2016, 12:12 »

Citar

Realiza una descripción de cada una de las instrucciones del código del ejemplo anterior indicando cuál es su cometido. Si has seguido el curso desde el principio, debes ser capaz de interpretar todo el código.

Ejemplo: La primera línea <!DOCTYPE … realiza la declaración de tipo de documento HTML a efectos de que los navegadores interpreten en qué versión de HTML está escrito el código.

La etiqueta html es la etiqueta de apertura del código HTML. La etiqueta head es …

Código: [Seleccionar]

//etiqueta para que los navegadores sepan que se trata de un documento html
  <!DOCTYPE html>
// etiquetamos nuestro documento html y el documento está definido por head y body. En head definiremos caracteristicas de la pagina
<html><head>
//titulo de la pagina web que saldrá en la etiqueta del navegador
<title>Cursos aprende a programar</title>
//definiremos los metadatos para facilitar la recogida de informacion de nuestra pagina web por el navegador
// definimos el codigo de escritura del codigo html
<meta charset="utf-8">
//definimos metadatos descripcion para el navegador
<meta name="description" content="Aprende a programar con cursos reconocidos por su calidad didáctica">
//definimos metadatos palabras clave
<meta name="keywords" content="HTML, CSS, JavaScript, Java, Visual Basic, Joomla, PHP">
//etiqueta para darle el estilo a la pagina web
<style type="text/css">
/*todo el documento tendrá el texto estilo verdana, si no lo puede editar el navegador, usará el estilo sans-serif */
*{font-family: verdana, sans-serif;}
/* la etiqueta con identificador principal , alinea el texto en su interior centrado, definimos el ancho con width usando % y 
    definimos el margen de la etiqueta, al tener todal las etiquetas dentro de este identificador estamos definiendo la etiqueta
    que contendrá todo el contenido de nuestra web */
#principal{text-align:center;width:95%; margin: 0 auto;}
/* definimos el estilo de todas las etiquetas que esten identificadas con el class="tituloCurso" */
.tituloCurso {color: white; float:left; padding: 36px 44px; font-size: 2.65em; font-style:bold; text-decoration:none;}
/* estilo para las etiqutas a cuando pasemos por encima con el raton, además añade !important porque como una etiqueta superior puede 
    estar definiendo una caracteristica de esta, le decimos que haga casa al estilo que le hemos definido aquí */
a:hover{color:orange !important;}
/*cerramos etiqueta style
</style>
<!-- introducimos codigo javascript para que la pagina sea más dinamica, le indicamos al navegador que es codigo javascript
metiendo todo el codigo entre la etiqueta script -->
<script type="text/javascript">
//definimos un funcion llamada ejemplo
function ejemplo(){
// definimos una variable que contendrá un array con todos los nodos que tengan la class tituloCurso    
var nodosTituloCurso = document.querySelectorAll(".tituloCurso");
// definimos otra variable, inicializandola con el valor 0;
var contador = 0; 
// definimos otra variable que es un array
var nodosCambiados = new Array(); 
// definimos otra variable que es de tipo boolean y la inicializamos a true
var tocaCambiar = true;
// mandamos la ejecucion de la funcion ejemploAccion tras pasar un 1,5 segundos, y le mandamos en la llamada los valores de las variables
//nodosTituloCurso, nodosCambiados, contador, tocaCambiar
setTimeout(function() {ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)}, 1500);
//cerramos la ejecucion de la funcion
}

 
// definimos la funcion que necesitará ser llamada con las variables nodosTituloCurso, nodosCambiados, contador, tocaCambiar con algun
// valor y que es llamada por la funcion que se ejecuta al abrir la pagina
function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar) {
//condicionamos los datos introducidos en la funcion. Si el valor del contador es menos al tamaño de array nodosTituloCurso devolvera true
                if (contador<nodosTituloCurso.length){
// empezamos a realizar operaciones tras la condicion. Definimos la variable indice,multiplica el tamaño del vector nodosTituloCurso por un valor aleatorio que calcula la coputatadora y redondea al numero inferior
                var indice = Math.floor((Math.random() * (nodosTituloCurso.length)));
// metemos otra condicional, si la longitud del vector es distinto a cero, si es cero salta la condicion
                if (nodosCambiados.length!=0) {
// metemos un bucle for para que recorra todos los valores del rango que queremos,desde 0 hasta que i sea menor a la longitud de nodosCambiados
                                for (var i=0; i<nodosCambiados.length; i++) {  
//metemos un condicional if para que todos los valores que recorremos pase cada valor por una condicion. Aquella etiqueta con clase .titulocurso que haya obtenido tendrá todoCambiar false asi lo tendran todos aquellos que ya hayan recibido el estilo 
                                               if(nodosCambiados[i]==indice) {tocaCambiar = false;}

                               }
//si hemos modificado ya la etiqueta lo metemos en el vector nodosCambiados y volvemos a hacer la llamada a la funcion , haciendo que sea recvursivo
                }

                if (tocaCambiar==true) {
// llamamos a la funcion para que cambie el estilo al elemento que aleatoriamente haya salido
                cambiarNodo(nodosTituloCurso[indice]);

                nodosCambiados.push(indice);

                contador = contador+1;

                setTimeout(function() {ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)}, 1500);

                } else {tocaCambiar=true; ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar);}

                }

                else { //Caso base fin de la recursión cuando ya todas las etiquetas le hemos dado caracteristica al body con fondo negro y a 
                    // todos los elementos que se encuentran dentro del div con identificador principal, le damos color a su texto blanco 
                    // menos a los elementos que tienen como clase=tituloCurso que seran de color amarillo su texto.

                               document.body.style.backgroundColor='black';

                               document.getElementById('principal').style.color='white';

                               for (var i=0; i<nodosTituloCurso.length; i++) {

                                               nodosTituloCurso[i].style.color='yellow';

                               }             

                }

}

 

function cambiarNodo(elNodo){elNodo.style.backgroundColor = 'black'; }
// cerramos el codigo javascript y luego sigue la ejecucion de codigo html
</script>
<!-- cerramos la cabecera de nuestro codigo html -->
</head>
<!-- empezamos a definir el codigo html en su cuerpo, en lo que va a ver el usuario y le indicamos que encuanto este cargado el documento
se abra del codigo javascript la funcion ejemplo() -->
<body onload="ejemplo()">
<!-- definimos el div donde contendra los elementos que vamos a definir -->
<div id="principal"><h1>Cursos de programación</h1>

<h3>Reconocidos por su calidad didáctica</h3>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59"> Fundamentos</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=68&Itemid=188"> Java</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192"> HTML</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203"> CSS</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206"> JavaScript</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193"> PHP</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=38&Itemid=152"> Joomla</a></div>

<div ><a class="tituloCurso"

href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61"> Visual Basic</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59"> Pseudocódigo</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=section&layout=blog&id=7&Itemid=26"> Libros/ebooks</a></div>

<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87">Cursos tutorizados</a></div>
</div>
<!-- cerramos el cuerpo de la pagina -->
    </body>
<!-- cerramos el codigo html -->
</html>

Citar

Crea una animación JavaScript (decide tú el efecto que quieres implementar: pueden ser cosas moviéndose por la pantalla, texto cambiando de tamaño o cualquier otra cosa que se te ocurra) con las herramientas que hemos ido conociendo a lo largo del curso. Ejecútalo en distintos navegadores y comprueba que se ejecute tal y como esperas en todos ellos.

Para este ejercicio, he intentado hacer un slideshow no sé si me ha salido bien o si cumple la finalidad de este ejercicio.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #pizarra{
        margin:20px;
        position: relative;
        width:800px;
        height: 500px;
        border:solid thin black;
        
    }    
    #flechaIzq{
        position:absolute;
        width:75px;
        height:75px;
        left:5px;
        top:210px;    
        opacity:0;
        z-index: 2;
        cursor:pointer;
    }
    
    #flechaDer{
        position:absolute;
        width:75px;
        height:75px;
        right:5px;
        top:210px;
        transform: rotate(180deg);
        opacity: 0;
        z-index: 2;
        cursor:pointer;
    }
    #imagen{
        z-index:0;
        position: relative;
        top:0;
        left:0;
    }
    ul{
        display: inline;
        position: absolute;
        top:460px;
        right:90px;
    }
    
    li{
        display: inline-block;
        border:solid thin black;
        border-radius: 12px;
        width:10px;
        height:10px;
        background-color: coral;
        margin:5px;
    }
    
    li:first-child{
        background-color: red;
    }
</style>
</head>
<script>

var titulo=['imagen1','imagen2','imagen3','imagen4','imagen5','imagen6','imagen7'];
var nombre=['altImagen1','altImagen2','altImagen3','altImagen4','altImagen5','altImagen6','altImagen7']
var enlaces=['http://lorempixel.com/800/500/animals/1/','http://lorempixel.com/800/500/animals/2/','http://lorempixel.com/800/500/animals/3/','http://lorempixel.com/800/500/animals/4/','http://lorempixel.com/800/500/animals/5/','http://lorempixel.com/800/500/animals/6/','http://lorempixel.com/800/500/animals/7/'];
var direcciones =['','','','','','','']
var puntitos = document.getElementsByTagName('li');
var recursiva ; 
window.onload=function(){
    var contador=0;
    cambiarImagen(contador);
    document.getElementById('pizarra').onmousemove= posicionRaton;
    pizarra.onmouseout=ratonFuera;
    
    
}    
function cambiarImagen(contador){
    var numero = (contador% (enlaces.length));
    mostrarPuntitos(numero);
    document.onkeyup=teclaPulsada;
    flechaDer.onclick=aumentar;
    flechaIzq.onclick=disminuir;
    puntitos[0].onclick=cambio;
    puntitos[1].onclick=cambio;
    puntitos[2].onclick=cambio;
    puntitos[3].onclick=cambio;
    puntitos[4].onclick=cambio;
    puntitos[5].onclick=cambio;
    puntitos[6].onclick=cambio;
    if (contador==-1){
        contador = 6;
        numero = contador;
    }
    
    
    imagen.src = enlaces[numero];
    imagen.title = titulo[numero];
    imagen.alt = nombre[numero];
    ancla.href = direcciones[numero];
    
    var recursiva=setTimeout(function(){cambiarImagen(contador+1)},3000);
                function teclaPulsada(evento){
                    var tecla = evento.keyCode;
                    if (tecla==37){
                        disminuir();
                    }else if(tecla==39){
                        aumentar();
                    }
                }
                function aumentar(){
                    clearTimeout(recursiva);
                    cambiarImagen(contador+1);
                }   
                function disminuir(){
                    clearTimeout(recursiva);
                    contador--;
                    cambiarImagen(contador);
                }
                function mostrarPuntitos(numero){
                    for (var i=0;i<enlaces.length;i++){
                        if (i==numero){
                            puntitos[i].style.backgroundColor='red';        
                        }else{
                            puntitos[i].style.backgroundColor='coral';
                        }
                    }
                }
                function cambio(evento){
                    var procedencia = evento.target;
                    for (var i=0;i<=puntitos.length;i++){
                        if (puntitos[i]===procedencia){
                            clearTimeout(recursiva);
                            contador=i;
                            cambiarImagen(contador);
        
                        }
                    }
                }
}
    
function posicionRaton(evento){
    if (evento.clientX<(800)/2){
        flechaIzq.style.opacity='0.5';
        flechaDer.style.opacity='0';
        
    }else if (evento.clientX>(800)/2){
        flechaDer.style.opacity='0.5';
        flechaIzq.style.opacity='0';
    }
}


function ratonFuera(evento){
    flechaIzq.style.opacity='0';
    flechaDer.style.opacity='0';
}


    </script>
<body>
    <div id="pizarra" >
        <a id="ancla" href=""><img id='imagen'  src='http://lorempixel.com/800/500/animals/1/'/></a>
        <img src="https://pixabay.com/static/uploads/photo/2014/04/03/00/40/arrows-309038__180.png" id="flechaIzq" title="imagen "/>
        <img src="https://pixabay.com/static/uploads/photo/2014/04/03/00/40/arrows-309038__180.png" id="flechaDer" alt="Imagen mas"/>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

Saludos

Mario R. Rancel · « **Respuesta #1 en:** 04 de Marzo 2016, 09:34 »

Buenos días bermartinv

En el ejercicio 1 tienes un error en el formato de comentarios. Dentro de un archivo html (ó de definición de un documento html, el archivo podría tener otra extensión como .php) podemos tener código de distintos tipos: código html, código css, código javascript... Cada lenguaje lleva los comentarios según el formato de comentarios del lenguaje y no podemos mezclar comentarios ni código de un lenguaje con comentarios y código de otro.

En este código que has presentado has escrito comentarios como:

//etiqueta para que los navegadores sepan que se trata de un documento html
<!DOCTYPE html>
// etiquetamos nuestro documento html y el documento está definido por head y body. En head definiremos caracteristicas de la pagina
<html><head>

Esto no está bien, de hecho algunos o casi todos los navegadores mostrarán por pantalla //etiqueta para que...

¿Por qué?

Porque estás poniendo el símbolo de comentario JavaScript dentro de un fragmento de código que es HTML. Al estar en HTML estos comentarios deberían ir así:


<!DOCTYPE html>

<html><head>

Los comentarios CSS deberán ir entre /* y */ y los comentarios JavaScript después de // o entre /* y */

Más abajo veo que sí has escrito los comentarios correctamente, no sé por qué se han quedado esos comentarios así.

Te faltan algunas líneas por comentar, puede complementarse con la solución propuesta en https://www.aprenderaprogramar.com/foros/index.php?topic=3578.0

En el ejercicio 2 creo que has cumplido bien el objetivo del ejercicio, felicitarte porque se ve un código bien trabajado y donde usas numerosos conceptos de JavaScript que demuestran un buen nivel en programación

Te comento algunos detalles: en lugar de ocultar la flecha izquierda cuando nos situamos en el lado derecho creo que quedaría más bonito que aparezcan ambas flechas, pero por ejemplo que la más próxima sea más opaca y la otra menos

Hay algún fragmento como

puntitos[0].onclick=cambio;
puntitos[1].onclick=cambio;
puntitos[2].onclick=cambio;
puntitos[3].onclick=cambio;
puntitos[4].onclick=cambio;
puntitos[5].onclick=cambio;
puntitos[6].onclick=cambio;

Donde hubiera sido más elegante usar un bucle for para evitar repetir tantas líneas iguales

Como ejercicio creo que está muy bien, de hecho creo que le faltaría muy poco para que fuera realmente un slideshow profesional

Saludos

bermartinv · « **Respuesta #2 en:** 06 de Marzo 2016, 11:34 »

Gracias M.Rancel.
Sobre los errores cometidos al realizar los comentarios, si estas en lo cierto, la verdad que al final te lias un poco.
Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: