Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - bermartinv

Páginas: 1 ... 6 7 8 9 10 [11] 12 13 14 15
201
Si, perdón  :-[ . Adjunto el código:
Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

function ejemplo() {

var cabecera = document.querySelector('#cabecera');

var respuestaCabecera = function () {

    var that = this;
   
    alert(this);

  setTimeout(function () { alert(that);}, 2000);

};

cabecera.addEventListener('click', respuestaCabecera, false);

}

</script>

</head>

<body onload="ejemplo()"><div id="cabecera"><h2>Cursos aprenderaprogramar.com HAZ CLICK AQUÍ</h2><h3>Ejemplos JavaScript</h3></div>

</body>
</html

Saludos.

203
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

204
Hola boletos,
como sugerencia pero solo para los ejercicios que hacemos aquí, te pediria que metieras el código CSS dentro del <head> con las etiquetas <style>, es mucho más rápido para ver tus soluciones que si tienes que crear dos archivos.
Saludos.

205
Estas son mis respuestas para el tema CU01168E del curso JavaScript desde cero.

Citar
a) ¿Por qué se muestran diferentes mensajes si en ambos alert estamos invocando this?

Aunque usamos la misma palabra this, como la usamos en diferentes sitios hace referencia a distintos sitios. El primer this hace referencia al evento que es asignado de la variable cabecera, que esta proviene de la etiqueta que tiene el identificador #cabecera.Por eso al hacer alert de este this nos sale:

            object HTMLDivElement


El segundo this lo encontramos en una función que está dentro de otra función. Por lo que este this hace referencia a la definicion de esta funcion. Por eso al hacer alert de este this nos sale:

           objectWindow


Citar
b) Modifica el código para que el mensaje que se muestre con retardo muestre lo mismo que el mensaje que se muestra sin retardo. Para ello, haz que en la función anónima sea conocida la referencia a this que existe en la funcion externa.

Código: [Seleccionar]
b)
Saludos.

206
Respuesta al ejercicio CU01167E del tutorial JavaScript desde cero.

Citar
a) Haz una lista de las variables que intervienen indicando para cada variable cuál es su nombre, cuál es su tipo, cuál es su cometido y si está definida como variable global o variable local.

var target_date --> es una variable global, es de tipo Date y su cometido es que tenga almacenada la fehca que introducimos.

var days, hours, minutes, seconds --> son variables globales que podrán ser definidas en cualquier momento, pero que no estan inicializadas entonces son de tipo 'undefined'


DENTRO DE LA FUNCION ejemplo

var countdown --> es una variable local de la funcion ejemplo() y no podrá ser modificada por otra función que no sea la que la contiene. Es de tipo object.

var seconds-left --> tambien una variable local, de tipo 'number'. Está definida por una operacion que interviene  una variable local y una variable local.

days --> es de tipo number, aparte de ser utilizada en esta función en el ámbito global será inicializada. Podiendolo usar cualquier otra funcion con el valor que se obtenga de la operacion. Convierte su resultado a entero.

var seconds_left
--> variable local de tipo number

hours -->  es de tipo number, aparte de ser utilizada en esta función en el ámbito global será inicializada. Podiendolo usar cualquier otra funcion con el valor que se obtenga de la operacion. Convierte su resultado a entero.

minutes -->  es de tipo number, aparte de ser utilizada en esta función en el ámbito global será inicializada. Podiendolo usar cualquier otra funcion con el valor que se obtenga de la operacion. Convierte su resultado a entero.

seconds -->  es de tipo number, aparte de ser utilizada en esta función en el ámbito global será inicializada. Podiendolo usar cualquier otra funcion con el valor que se obtenga de la operacion. Convierte su resultado a entero.


Citar
b) ¿Qué ocurre si definimos la variable current_date en el ámbito global en vez de dentro de la función? ¿Por qué ocurre esto?

Si definimos current_date fuera de la función la variable se define nada más que le toca en el hilo de la función, se define una vez y no se modifica cada vez que la llamada de setInterval declara de nuevo la función cada segundo.


Citar
c) ¿Podríamos definir todas las variables como locales a la función y prescindir de las variables globales? Si se pudiera hacer, ¿crees que sería positivo para el diseño del código, su mantenimiento y ampliabilidad, o por el contrario, que sería negativo?

Sí se podría crear las variables como locales, pero de hacerlo así es para facilitar la lectura del codigo y facilitar el mantenimiento y reusabilidad.


Citar
d) ¿Qué métodos de los empleados en el código devuelven valores en milisegundos?

No entiendo esta pregunta. El único método que veo que se use es 'getTime()', que pertenece al objeto Date.


Saludos.

207
Pedro,, me gusta el ejemplo que has puesto para la explicación del break. ;D ;D

208
Hola Pandemia,
tienes que empezar a acostumbrarte a escribir el código CSS de otra manera, yo te recomienso que cada caracterítica lo escribas en distinta linea porque te será más fácil encontrar las cosas.
Otra cosa que quería comentarte que tienes que definir el origen de las etiquetas de otra manera.
Código: [Seleccionar]
div div div div {
                 .........
}
Eso es una cadena de div que no facilita la lectura del código, si tiene algún id nombraro sino vale la pena que lo hagas.
o --> div#identificador , o bien --> #identificador
Bueno al grano, no he mirado el enunciado del ejercicio pero puede ser que no te funcione porque has puesto background: no repeat, en vez de background:no-repeat.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<title>CSS background position attachment; clip origin y size</title>
<meta name="description" content="aprenderaprogramar.com">
<meta name="keywords" content="posicion de imagenes de fondo">
<meta charset="utf-8">
<style>
div div div div {
        width: 400px;
        height: 400px;
        margin: 40px;
        padding: 40px;
        border: solid 4px black;
}

#imagen1{
        background-image: url("http://www.ecoosfera.com/wp-content/imagenes/22-de-abril-dia-de-la-tierra.jpg");
background-color: yellow;
        background-position: center;
        background-repeat: no-repeat;
}

#imagen2{
        background-image: url("http://estaticos04.elmundo.es/assets/multimedia/imagenes/2015/12/21/14506973737666.jpg");
        background-color: blue;
background-position: center;
        background-repeat: no-repeat;
}

#imagen3{
        background-image: url("http://static.batanga.com/sites/default/files/curiosidades.batanga.com/files/Apuesto-que-no-conocias-estos-15-datos-interesantes-sobre-la-Tierra.jpg");
background-color: green;
        background-position: center top;
        background-repeat: no-repeat;
}

#imagen4{
        background-image: url("https://imagenesyfondos.files.wordpress.com/2012/12/planeta_tierra.jpg");
        background-color: pink;
background-position: center;
        background-repeat: no repeat;

}

</style>


</head>

<body>

<div id="page">
<div id="header">
<h1>Imagenes de fondo</h1>

</div>
<div id="wrapper">

<div id="menu">

</div>

<div id="body">

<div id="imagen1"></div>
<div id="imagen2"></div>
<div id="imagen3"></div>
<div id="imagen4"></div>

</div>

</div>

<div id="footer">
Realizado por PANDEMIA
</div>

</div>
</body>



</html>

209
Funciona bien
Como solo tenemos una función, también podriamos haber hecho

Código: [Seleccionar]
window.onload = function (){
      // actividad que quieres realizar
}
Esto es como  comentario porque funcionar funciona.

210
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

211
A ver si esto te ayuda

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de pequeño tamaño</title>
<meta name="description" content="web con imagen unica de pequeño tamaño 135*135 pixeles">
<meta name="keywords" content="imagen de 135*135 pixeles">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos13.css">
<style>
    body {
        background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR0HLGaq8ZZPQpgXgv01Gb_eGTO-Y_gI6eUEUg7m6iMczff9RQ2JQ");
        background-repeat: repeat;}
</style>
    </head>
    <body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

212
Hola pedro,, si es verdad que el ejercicio1 no había hecho las comprobaciones pertinentes.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>
window.onload = function (){
    numeroAleatorio();
}   

function numeroAleatorio(){

    var numeroAleatorio = Math.floor((Math.random()*(101-1))+1);
    alert (numeroAleatorio);
    var contador = 1;
   
    while (contador <= 30 ){
       var numeroUsuario = prompt ("Introduzca un numero : ");
        if (numeroUsuario<numeroAleatorio){
        alert ("El numero es mayor");
        }else if(numeroUsuario>numeroAleatorio){   
        alert ("El numero es menor");
        }
        else{
           alert ("Enhorabuena");
            break;
        }
    contador++;
       
    }   
     if (contador > 30){
        alert ("Ha utilizado las 30 posibilidades para acertar el numero");
       
    }
   

   
    }
</script>
<body>
   
</body>
</html>
Respecto del ejercicio 3, pensaba que con la función del seno valdría. He añadido la del coseno.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #volador1{
        display:inline-block;
        background-color:crimson;
        border:solid thin black;
        border-radius:12px;
        position:absolute;
        top: 300px;
        padding:10px;
        width: 65px;
    }   
    #volador2{
        display:inline-block;
        background-color:crimson;
        border:solid thin black;
        border-radius:12px;
        position:absolute;
        top: 400px;
        padding:10px;
        width: 65px;
    }   
   
</style>
<script>
    var globalID;
    var sentido = true;
    var coordenadaX = 0;
    var coordenadaY1 = 300;
    var coordenadaY2 = 300;
   
window.onload = function(){
    anchoVentana();
}
   
    function anchoVentana(){
        var ancho = window.innerWidth;
        // Condicion para rebote pared
        if (coordenadaX == (ancho - 95 )){
              sentido = false;
         }
        if (coordenadaX == 0){
            sentido = true;
        }
       
        // Condicion para sentido volador
        if (sentido == true){
            coordenadaX++;
        }else{
            coordenadaX--;
        }
       
        // Formula para sentido
        coordenadaY1 = coordenadaY1+(Math.sin(coordenadaX*0.03));
        coordenadaY2 = coordenadaY2+(Math.cos(coordenadaX*0.03));
       
        // Uso del DOM
        var volador1 = document.getElementById("volador1");
        //var volador2 = document.getElementById("volador2");
       
        volador1.style.top=coordenadaY1+'px';
        volador1.style.left=coordenadaX+'px';
        volador2.style.top=coordenadaY2+'px';
        volador2.style.left=coordenadaX+'px';
     
        // Llamada recursiva requestanimationFrame
        globalID=requestAnimationFrame(anchoVentana);
   
       
    }
     
   
    </script>
</head>

<body >
   <div id="volador1">Seno</div>
   <div id="volador2">Coseno</div>
 
   
</body>
</html>

Por cierto, me he dado cuenta que cuando vas hacer slgo con algun id del DOM, no hace falta declararlo primeo, te puedes referir directamente a él.
En vez de :
Código: [Seleccionar]
var nodoID= document.getElementByID("elemento";
nodoID.style.backgrounColor='red';
Se puede hacer
Código: [Seleccionar]
elemento.style.backgroundColor='red'Saludos.

213
Entrega ejercicios de la unidad CU01165E del curso JavaScript desde cero:

Citar
EJERCICIO 1

Crea un script que genere un número aleatorio entre 1 y 100. A continuación debe pedir al usuario que adivine el número. Si el usuario responde un número menor al número aleatorio, debe mostrarse un mensaje “El número es mayor. Inténtelo de nuevo” y dar opción a responder de nuevo. Si el usuario responde un número mayor debe mostrarse un mensaje “El número es menor. Inténtelo de nuevo”. Si el usuario acierta debe mostrarse “Enhorabuena. Ha acertado”. El programa debe terminar si el usuario acierta o si se superan los 30 intentos sin acertar. En caso de superarse los 30 intentos debe mostrarse el mensaje “Ha superado 30 intentos. El programa termina”.


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>
window.onload = function (){
    numeroAleatorio();
}   

function numeroAleatorio(){

    var numeroAleatorio = Math.floor((Math.random()*(101-1))+1);
    alert (numeroAleatorio);
    var contador = 1;
    var numeroUsuario = prompt ("Introduzca un numero : ");
   while (numeroAleatorio!=numeroUsuario){
    if (numeroUsuario<numeroAleatorio){
        numeroUsuario= prompt ("El numero es mayor.Intentelo de nuevo:");
    }
    else {
        numeroUsuario = prompt ("El numero es menor. Intentelo de nuevo:");
    }
   }
    contador++;
    if(contador>30){
         alert ("Ha superado 30 intentos.El programa termina");
    }else {
       
        alert ("Enhorabuena");
    }
   

}
   

</script>
<body>
   
</body>
</html>


Citar
EJERCICIO 2

Crea un script que pida al usuario el dato de radio en metros de la base de un cilindro y el dato de altura del cilindro. Utilizando la propiedad Math.PI debe realizarse el cálculo para determinar el área de la base del cilindro y el volumen del cilindro y mostrar estos resultados. Consulta en internet si no recuerdas las fórmulas a aplicar. .
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>
window.onload = function (){
    var radio = prompt ("Introduzca radio del cilindro");
    var altura = prompt ("Introduzca altura de un cilindro");
    var volumen = calcularVolumen(radio,altura);
    var area = calcularArea(radio);
    alert ("El resutado es:\nVolumen:"+volumen+"\nArea:"+area);
}

function calcularVolumen(radio,altura){
    var volumen = Math.PI*Math.pow(radio,2)*altura;
    return volumen;
}
   
function calcularArea(radio){
    var area = Math.PI*Math.pow(radio,2);
    return area;
}
    </script>
<body>
   
</body>
</html>


Citar
EJERCICIO 3

Crea un script que dé lugar a lo siguiente:

a) En un div con id="volador” debes tener una palabra como <<JavaScript>>.

b) Utilizando las funciones trigonométricas, las propiedades de posicionamiento CSS y funciones para control de animaciones/tiempo debes dar lugar a que dicha palabra se desplace desde la izquierda hasta la derecha de la pantalla siguiendo un movimiento sinusoidal (es decir, subiendo y bajando suavemente describiendo ondas).
Para las personas que hagan este ejercicio que tengan en cuenta la variación tan grande que hay entre el rango de valores de x.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #volador{
        display:inline-block;
        background-color:crimson;
        border:solid thin black;
        border-radius:12px;
        position:absolute;
        top: 300px;
        padding:10px;
        width: 65px;
    }   
</style>
<script>
    var globalID;
    var sentido = true;
    var coordenadaX = 0;
    var coordenadaY = 300;
   
window.onload = function(){
    anchoVentana();
}
   
    function anchoVentana(){
        var ancho = window.innerWidth;
        // Condicion para rebote pared
        if (coordenadaX == (ancho - 95 )){
              sentido = false;
         }
        if (coordenadaX == 0){
            sentido = true;
        }
       
        // Condicion para sentido volador
        if (sentido == true){
            coordenadaX++;
        }else{
            coordenadaX--;
        }
       
        // Formula para sentido
        coordenadaY = coordenadaY+(Math.sin(coordenadaX*0.03));
       
        // Uso del DOM
        var volador = document.getElementById("volador");
        volador.style.top=coordenadaY+'px';;
        volador.style.left=coordenadaX+'px';
     
        // Llamada recursiva requestanimationFrame
        globalID=requestAnimationFrame(anchoVentana);
   
       
    }
     
   
    </script>
</head>

214
Felicidades Pedro,,
yo espero seguir tus pasos y terminar con ganas el curso de JavaScript.
Si sigues evolucionando con JavaScript ya me hirás contando que tal y por dónde seguiste.
Saludos.

215
El hecho de hacerlo así fue para que se pudiera variar también la cantidad de minutos.
Gracias pedro, por tu aporte. ;)

216
Citar
EJERCICIO 1

Crea un reloj JavaScript que marque los segundos usando el método setInterval.
Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">
 window.onload = function(){
   var llamada = setInterval (reloj,500);
}
 

function reloj() {

    var hoy=new Date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds();

    m = actualizarHora(m);    s = actualizarHora(s);

    document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;

   

}

 

function actualizarHora(i) {

    if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10

    return i;

}

</script>

 

</head>

<body >

<div style="text-align:center;">

<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" >   </div>

</div>
</body></html>
Citar
EJERCICIO 2

Crea un reloj JavaScript que marque los segundos usando el método requestAnimationFrame.
Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">
var globalID;
    function empecemos(){
        var empezar = requestAnimationFrame(reloj);
}
 

function reloj() {

    var hoy=new Date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds();

    m = actualizarHora(m);    s = actualizarHora(s);

    document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;

    globalID = requestAnimationFrame(reloj);

}



function actualizarHora(i) {

    if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10

    return i;

}

</script>

 

</head>

<body onload="empecemos()" >

<div style="text-align:center;">

<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" >   </div>

</div>
</body></html>
Citar
EJERCICIO 3

Crea un reloj JavaScript que marque inicialmente 01:00 (es decir, 1 minuto) y que marche hacia atrás (00:59, 00:58, 00:57 … etc.) hasta llegar a 00:00. Cuando llegue a 00:00 debe deternerse y mostrar el mensaje: “Tu tiempo ha terminado”.
Para este ejercicio, me hice un poco de lio porque no sabía cómo hacerlo. Después de termiarlo miré cómo lo habían hecho otros compañeros y la forma que lo había heho Pedro, no hubiese caido nunca de hacerlo por ahí, pero parece más sencilla.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    body{
       
    }
    #ventana{
        margin:auto;
        display:block;
        position:absolute;
        height:200px;
        width:400px;
        background: pink;
        border:solid 1px black;
    }
    #reloj{
        position: absolute;
        top:40px;
        left:120px;
        font-size: 80px;
        color:dodgerblue;
        text-align: center;
    }
</style>
<script>
    var segundos = 0;
    var minutos = 1;
    var llamada;
    var ceromin='';
    var ceroseg='';
   
    function cuentaAtras(){
        devolvercero(minutos,segundos);
        segundos = segundos % 60;
        document.getElementById("reloj").innerHTML=ceromin+minutos+':'+ceroseg+segundos;
         if (minutos ===0 && segundos ===0){
            alert ("Se agotó su tiempo");
            clearTimeOut(llamada);
        }
        if (segundos ==0){
            minutos --;
            segundos+=60;   
        }   
        segundos --;
        var llamada = setTimeout(cuentaAtras,1000);
    }
   
    function devolvercero(minutos,segundos){
        if (minutos<10){
            ceromin='0';
           
        }
        if (segundos<10){
            ceroseg='0';
           
        }else {
            ceroseg='';
        }
         return ceroseg;return ceromin;
    }
   
</script>
</head>
<body onload="cuentaAtras()">
   <div id="ventana">
       <div id="reloj">
           
       </div>
   </div>
</body>
</html>

Saludos

217
Gracias Pedro, ahora me quedó claro  ;)
Saludos

218
Hola Pandemia, a lo que me referia que pusieras todo el codigo junto es que el código CSS lo metieras dentro del head, sin tener que enlazarlo con un archivo.
Como recomendación, pon cada característica CSS en cada fila, es la norma al escribir CSS.
Te adjunto como me saldría a mi el primer div:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<title>padding y margin css</title>
<meta name="description" content="padding y margin en css. margin negativo y centrar con margin auto">
<meta name="keywords" content="padding y margin en css">
<meta charset="utf-8">
<style>
    /*padding y margin en css */

#wrapper{text-align: center;
}

#div1{
    width: 250px;
    margin: 20px;
    float: left;
    background-color:#FFB6C1;
    border-top-style: dotted;
    border-top-width: 15px;
    border-top-color: #DC143C;
    padding-top: 30px;
    border-right-style: dashed;
    border-right-width: 10px;
    border-right-color: green;
    padding-right: 45px;
    border-bottom-style: double;
    border-bottom-width: 10px;
    border-bottom-color: #FF00FF;
    padding-bottom: 0px;
    border-left-style: ridge;
    border-left-width: 40px;
    border-left-color: #2F4F4F;
    padding-left: 60px;
}





#div2{float: left;width: 250px;margin: 20px; background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-left-style: dashed;border-left-width: 10px;border-left-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-right-style: ridge;border-right-width: 40px;border-right-color: #2F4F4F;padding: 60px;
}
</style>
</head>

<body>
<div id="wrapper">
<header>
<h1>Padding y Margin CSS</h1>
</header>
</div>

<div id="div1">

Este es el div 1

</div>

<div id="div2">

Este es es el div 2

</div>




</body>

</html>

219
Hola Pedro,
te mando este código como podría ser otro. Mi duda es como crear de una manera continua un array que contenga las cualidades de un objeto y otro problema es sacarlo por pantalla.
Código: [Seleccionar]
<!DOCTYPE>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>

</style>
<script type="text/javascript">
            window.onload = function(){
                var usuarios = new Array();
                var contador= 0;
                document.getElementById("pulsador").addEventListener('click',nuevoUsuario);
                document.getElementById("mostrar_usuarios").addEventListener('click',mostrarUsuarios);
            }
           
function usuario(nombre,pais){
this.nombre = nombre;
                this.pais = pais;
}
           
function nuevoUsuario(){
var nombre = prompt('Introduzca su nombre: ');
                var pais = prompt ('Introduzca pais de procedencia :');
                usuarios[contador] = new usuario(nombre,pais);
}
            function mostrarUsuarios(){
                for (var i=0;i<usuarios.length;i++){
                    for (x in usuarios){
                        document.getElementById("datos").innerHTML =x+':'+usuarios[x];
                    }
                }
            }
           
</script>
</head>
<body>


<button id ="pulsador"> Nuevo usuario </button>
<button id="mostrar_usuarios"> Mostrar usuarios</button>
<div id='datos'></div>
</body>
</html>

220
Hola Pandemia,
podrias poner todo el codigo junto y así facilitarias que te ayudasemos mas.
Saludos

Páginas: 1 ... 6 7 8 9 10 [11] 12 13 14 15

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".