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.


Temas - bermartinv

Páginas: 1 2 [3] 4 5
41
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript costes computacionales complejidad Habilitar campos select CU01183E#
« en: 29 de Marzo 2016, 19:18 »
Hola chicos!!,

Adjunto mi solución para este tema CU01183E del tutorial de programador web JavaScript desde cero y planteo un problema que me ha surgido.

A la hora de resolver problemas tengo claro que cuanto mas condiciones haya más tiempo tarda en ejecutarse el código. Pero por ejemplo es mucha la diferencia entre por ejemplo:

- Un for o varios if,else if enlazados.
-Un switch o varios if,else if enlazados.

Citar
a) Deberá presentarse un formulario con 2 elementos select. El primer elemento select permitirá elegir país y podrá elegirse entre México, España, Perú y Colombia.

b) El segundo elemento select permitirá elegir ciudad y podrá elegirse entre México D.F., Guadalajara, Madrid, Barcelona, Lima, Trujillo, Bogotá y Cali.

c) Si el usuario selecciona ciudad sin haber elegido país, deberá mostrarse como opción elegida de país el país correspondiente a la ciudad. Por ejemplo, si el usuario selecciona Bogotá deberá aparecer como país seleccionado Colombia.

d) Si el usuario selecciona un país en primer lugar, deberán deshabilitarse todas las opciones que no correspondan a ciudades de ese país. Por ejemplo si el usuario elige España, sólo podrá elegir entre Madrid y Barcelona, debiendo estar México D.F., Guadalajara, Lima, Trujillo, Bogotá y Cali deshabilitadas. Si el usuario cambia el país, deberán cambiar las ciudades cuya elección es posible.

e) Ampliación opcional para el ejercicio: introduce medidas de seguridad adicionales para que no puedan existir incoherencias entre el país seleccionado y la ciudad. Por ejemplo, imagina que el usuario elige en primer lugar como ciudad México D.F. y luego elige como país Perú. Introduce medidas de seguridad que impidan que esto suceda.

Código: [Seleccionar]
<!DOCTYPE html>

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

<style type="text/css"> body, p {margin-left:30px; font-family: sans-serif;}

.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }

.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}

br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}

</style>

<script type="text/javascript">

window.onload = function () {

 var select1 = document.formularioContacto.pais;
   
 var select2 = document.formularioContacto.ciudad;
   
    select1.addEventListener('change',function(){primerSelect(this,select2)});
   
    select2.addEventListener('change',function(){segundoSelect(select1,this)});   
   
}   

function primerSelect(select1,select2){
    for (var i=1;i<select1.length;i++){
     if (select1.options[i].selected ){habilitarCiudad(i,select2)}
    }
}
   
   
function habilitarCiudad(opcion,select2){
    switch (opcion){
        case 1 :habilitar(select2);
                select2.options[1].disabled = false;
                select2.options[2].disabled = false;
            break;
        case 2 :habilitar(select2);
                select2.options[3].disabled = false;
                select2.options[4].disabled = false;
            break;
        case 3 :habilitar(select2);
                select2.options[5].disabled = false;
                select2.options[6].disabled = false;
            break;
        case 4 :habilitar(select2);
                select2.options[7].disabled = false;
                select2.options[8].disabled = false;
            break;
       
    }
       
}
   
function segundoSelect(select1,select2){
    for (var i=1;i<select2.length;i++){
    if (select2.options[i].selected ){habilitarPais(i,select1)}
    }
}
 

function habilitarPais(opcion,select1){
    switch (opcion){
        case 1 :
        case 2 :
                habilitar(select1);
                select1.options[1].disabled = false;
                select1.value = 'mejico';
                break;
        case 3 :
        case 4 :
                habilitar(select1);
                select1.options[2].disabled = false;
                select1.value = 'españa';
                break;
        case 5 :
        case 6 :
                habilitar(select1);
                select1.options[3].disabled = false;
                select1.value = 'peru';
                break;
        case 7 :
        case 8 :
                habilitar(select1);
                select1.options[4].disabled = false;
                select1.value = 'colombia';
                break;
       
    }
       
}

   
function habilitar(select){
    for (var i = 0; i < select.length; i++){
            select.options[i].disabled = true;
        }

}

</script>

</head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

                <div class="estiloForm">

                              <form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com">

                               <label>País de turismo</label><select id="pais" name="pais">

                               <option value="">Elija país</option>

                               <option value="mejico">México</option>

                               <option value="españa">España</option>

                               <option value="peru">Perú</option>
                               
                               <option value="colombia">Colombia</option>

                               </select><br/>
                               
                               <label>Ciudad de turismo</label><select id="ciudad" name="ciudad">

                               <option value="">Elija una ciudad</option>

                               <option value="mejicodf">México D.F.</option>

                               <option value="guadalajara">Guadalajara</option>

                               <option value="madird">Madrid</option>
                               
                               <option value="barcelona">Barcelona</option>
                               
                               <option value="lima">Lima</option>
                               
                               <option value="trujillo">Trujillo</option>
                               
                               <option value="bogota">Bogotá</option>
                               
                               <option value="cali">Cali</option>

                               </select><br/>

                               <input class="botonFormulario" type="submit" value="Enviar"/>

                               <input class="botonFormulario" type="reset" value="Cancelar"/>

                </form>

                </div>
</body></html>

Saludos!!!!

42
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Validacion formulario blur, focus, submit addEventListener CU01182E
« en: 24 de Marzo 2016, 10:03 »
Adjunto la solución del ejercicio de este tema.
Citar
Crear el código JavaScript que cumpla con las siguientes funciones:

a) Si la longitud (número de caracteres) del campo nombre es mayor de 15 o igual a cero, el formulario no se enviará.

b) Si la longitud (número de caracteres) del campo apellidos es mayor de 30 o igual a cero, el formulario no se enviará.

c) Si la longitud (número de caracteres) del campo email es mayor de 35 o igual a cero, el formulario no se enviará. Si el email no contiene el carácter @ el formulario no se enviará.

d) Si se produce cualquiera de las circunstancias anteriores, debe aparecer un recuadro con color de fondo naranja y texto negro a la derecha de la casilla de introducción de datos, informando del problema detectado en ese campo (si es que ese campo presenta algún problema). Nota: estos mensajes se deben mostrar sólo si el campo es erróneo después de pulsado el botón enviar, y deben desaparecer si el usuario realiza un nuevo intento y el campo es correcto. Los mensajes se incorporarán al DOM (no serán mensajes usando alert).

Código: [Seleccionar]
<!DOCTYPE html>

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

<style type="text/css">body {background-color:yellow; font-family: sans-serif;}

label{color: maroon; display:block; padding:5px;margin:20px;}
   
    .campoErroneo {
        background-color: orange;
        color : black;
       
        margin-left: 10px;
    }

</style>
<script>
var nombre = false;
var apellidos = false;
var email = false;
window.onload=function(){
    var formulario = document.formularioContacto;
    for (var i = 0;i < formulario.elements.length;i++){
        if (formulario.elements[i].type == 'text'){
            formulario.elements[i].addEventListener('focus',estiloIn);
            formulario.elements[i].addEventListener('blur',estiloOut);
        }
       
    }
    formulario.nombre.focus(); 
   
}

function estiloIn(){
    this.style.backgroundColor = 'lightgreen';
    this.value = '';
    this.nextSibling.innerHTML='';
    this.nextSibling.removeAttribute('class','campoErroneo');
}
   
function estiloOut(){
    this.style.backgroundColor = 'white';
}

function validarDatos(){
    validarNombre();
    validarApellidos();
    validarEmail();
   
    if (nombre && apellidos && email){
        return true;
    }else{
       
        return false;
    }
}
   
function validarNombre(){
    var msg = '';
    if (document.formularioContacto.nombre.value.length > 15){
        msg += 'El nombre debe tener menos de 15 caracteres';
        nombre = false;
    }else if (document.formularioContacto.nombre.value.length == 0 ){
        msg += 'El campo nombre está vacio';
        nombre = false;
    }else if ( /^\s*$/.test(document.formularioContacto.nombre.value)){
        msg += 'El nombre no puede estar formado por espacios';
        nombre = false;
    }else{
        nombre = true;
    }
   
    var mensaje = document.getElementById('nombre').nextSibling;
    mensaje.innerHTML = msg;
    mensaje.setAttribute('class','campoErroneo');
   
}
   
function validarApellidos(){
   
   var msg = '';
    if (document.formularioContacto.apellidos.value.length > 30){
        msg += 'Los apellidos deben tener menos de 30 caracteres';
        apellidos = false;
    }else if (document.formularioContacto.apellidos.value.length == 0 ){
        msg += 'El campo apellidos está vacio';
        apellidos = false;
    }else if ( /^\s*$/.test(document.formularioContacto.apellidos.value)){
        msg += 'Los apellidos no pueden estar formado por espacios';
        apellidos = false;
    }else{
        apellidos = true;
    }
   
    var mensaje = document.getElementById('apellidos').nextSibling;
    mensaje.innerHTML = msg;
    mensaje.setAttribute('class','campoErroneo');
   
}
   
function validarEmail(){
   
    var msg = '';
    if (document.formularioContacto.email.value.length > 15){
        msg += 'El email debe tener menos de 35 caracteres';
        email = false;
    }else if (document.formularioContacto.email.value.length == 0 ){
        msg += 'El campo email está vacio';
        email = false;
    }else if ( /^\s*$/.test(document.formularioContacto.email.value)){
        msg += 'El email no puede estar formado por espacios';
        email = false;
    }
    else if ( !(/\S+@\S+\.\S+/.test(document.formularioContacto.email.value))){
        msg += 'Escriba de nuevo un email correcto';
        email = false;
    }else{
       email = true;
    }
   
    var mensaje = document.getElementById('email').nextSibling;
    mensaje.innerHTML = msg;
    mensaje.setAttribute('class','campoErroneo');
   
}
   

</script>

</head>

<body>

<div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didáctica y divulgación de la programación</h2>

</div>

<!-- Formulario de contacto -->

<form onsubmit = "return validarDatos()" name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">

<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>

<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /><span></span></label>

<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /><span></span></label>

<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /><span></span></label>

<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>

</form>

</body></html>
Saludos!!!!

43
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript document.forms Cómo usar onsubmit en formulario validación CU01181E
« en: 23 de Marzo 2016, 10:38 »
Hola chicos,
pongo mis soluciones de este tema.
Citar
Otra forma de detener el envío de un formulario se basa en que si el código de respuesta a un evento submit es el valor booleano false, no se producirá el envío del formulario. En otro caso, sí se producirá el envío. Examina el siguiente código y responde a las cuestiones que se muestran a continuación:
Código: [Seleccionar]
<!DOCTYPE html>

<html><head><script>

function validarForm() {

    var x = document.forms["elForm1"]["nombre"].value;

    if (x==null || x=="") { alert("El formulario no puede enviarse sin rellenar el nombre");

        return false; }

}

</script></head>

<body><form style ="margin:30px;" name="elForm1" action="http://aprenderaprogramar.com" onsubmit="return validarForm()" method="get">

Nombre: <input type="text" name="nombre">

<input type="submit" value="Enviar">

</form>
</body></html>

a) ¿Qué cometido cumple este código?
Este código sirve de validacion para el input de name="nombre", cuando el campo esté vacio o sea nulo el formulario no podrá ser enviado, saliendo por pantalla un mensaje de alert y devolviendo como false a onsubmit.

Citar
b) ¿Qué ocurre si en lugar de onsubmit="return validarForm()" escribes onsubmit="validarForm()"? ¿Por qué?
Se necesita un return como respuesta al onsubmit, si no lo tenemos da igual que la función de validación devuelva true o false, ya que será enviado de todas las maneras.

Citar
c) Si x no es null ni es vacío, ¿qué devuelve la función validarForm()? ¿Qué implicaciones tiene esto en relación al envío del formulario?
No devuelve nada, pero al no devolver false el submit se realiza y se envia el formulario.

Saludos.

44
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Diferencia entre array_array-like-NodeList unshift CU01180E
« en: 23 de Marzo 2016, 10:18 »
Hola chicos, pongo mis soluciones a este tema, CU01180E del tutorial JavaScript desde cero.

 
Citar
Examina el siguiente código y responde a las cuestiones que se muestran a continuación:
Código: [Seleccionar]
var arr = [];

var divs = document.querySelectorAll('div');

for(var i = divs.length; i--; arr.unshift(divs[i]));

a) ¿Qué cometido cumple este código?
El cometido que tiene es pasar los elemento de un array-like a un array.

b) Aplicando la idea que podemos extraer de este código, modifica el código que hemos visto como ejemplo en esta entrega para crear un array con los elementos input y select del formulario y  mostrar por pantalla el número de elementos input y select existentes en el formulario.

Código: [Seleccionar]
<!DOCTYPE html>

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

<style type="text/css"> body {margin-left:30px; font-family: sans-serif;}

.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }

.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}

br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}

</style>

<script type="text/javascript">

window.onload = function () {

                var elementosInput = document.getElementsByTagName('input'); //Elementos input

                var elementosSelect = document.getElementsByTagName('select');

                var arrInput = [];
   
                var arrSelect = [];

                for(var i = elementosInput.length; i--; arrInput.unshift(elementosInput[i]));
   
                for(var i= elementosSelect.length; i--; arrSelect.unshift(elementosSelect[i]));
   
                alert ("Tenemos "+arrInput.length+" elementos de tipo input y "+arrSelect.length+" elementos de tipo select.");

}

</script></head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

    <div class="estiloForm"> <form name ="formularioContacto" method="get" action="#">

        <label>Tratamiento</label>

        <input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.

                               <input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>

                               <label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>

        <label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>

        <label>Dirección</label><input id="direccion1" name="direccion1" type="text"/><br/>

        <label>Ciudad</label><select id="ciudad" name="ciudad">

                                               <option value="">Elija opción</option>

            <option value="Mexico">México D.F. (MX)</option>

            <option value="Madrid">Madrid (ES)</option>

            <option value="Santiago">Santiago (CL)</option>

        </select><br/>

        <label>Preferencias</label><input name="Libros" type="checkbox" />Libros

        <input name="Peliculas" type="checkbox"  />Películas

        <input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>

    </form></div>
</body></html>
Saludos.

45
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript código dinámico Formulario, select, checked, selectedIndex CU01179E
« en: 22 de Marzo 2016, 12:59 »
Hola chicos,dejo mis soluciones del tema CU01179E del tutorial de programación web con JavaScript.

https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=867:eventos-forms-javascript-change-radio-checkbox-select-value-checked-options-selectedindex-cu01179e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206
Citar
Responde estas preguntas (mantén la consola activada para ver posibles mensajes de error):

a) ¿Qué código es el que hace posible que cuando se selecciona el radio button Sr aparezca la imagen caraHombre.jpg y que cuando se selecciona el radio button Sra aparezca la imagen caraMujer.jpg?
Antes de nada metemos en una variable los elementos que son radio buttons
     
Código: [Seleccionar]
radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttonsDespués le añadimos un evento en caso de hacer click en cualquiera de los radio y llamamos a la funcion actualizarDatos
       
Código: [Seleccionar]
for(var i=0; i<elementosDelForm.length;i++) {

                if (elementosDelForm[i].type == 'radio') {elementosDelForm[i].addEventListener("click", actualizarDatos);}
Posteriormente tratamos los datos de los radio button en la funcion. Recorremos lo radio que tenemos y si está alguno checkeado metenemos en la variable 'radioButSelValue' el valor de ese radio. Si esta variable es distinta a vacio y es igual a Sr. se le añade la foto de Pedro sino la de Vilma.

Código: [Seleccionar]
for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButSelValue= radioButTrat[i].value;} }

if (radioButSelValue != ''){

                if (radioButSelValue =='Sr.') {rutaImagen='http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/CU01179E_1_zps77ab9108.jpg?t=1412436617';} else {rutaImagen='http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/CU01179E_2_zpsf09ad002.jpg?t=1412436624';}

                document.getElementById('encuadraImagen').innerHTML = '';

                document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';

}
Citar
b) ¿ radioButTrat es una variable global o local a una función? ¿Por qué?
radioButTrat es una variable global, está definida en la función anónima que se carga cuando la página está abierta, y posteriormente es usada por la funcion actualizarDatos. En JavaScript es reconmendable definir las variables al principio del cuerpo de la función y preferibremente con ámbito global para posteriormente al manejar otras funciones no tener `problemas de ámbito (SCOPE).

Citar
c) ¿radioButTrat es una array o un objeto NodeList de tipo array-like? ¿El método length es aplicable a objetos de tipo array? ¿El método length es aplicable a objetos de tipo array-like?
radioButTrar es una array de nodos que tienen como name='tratamiento'.El metodo getElementsByTagName() devuelve un node list. Un node list es una colecion de nodos  array-like.
El método length si es aplicable a objetos array ya que te dá la longitud de ese vector, la cantidad de elementos dentro de el.
Lo mismo sucede con array de nodos.

Citar
d) ¿Qué ocurre si tratas de aplicar el método push a radioButTrat? Escribe el código para ello. ¿Qué mensaje visualizas en la consola? Busca información y trata de explicar por qué ocurre esto.
Nos da un error.
var conjunto = radioButTrat.push(casillaDatos);
TypeError: radioButTrat.push is not a function
 Lo que pasa es que el error dice que estas intentando usar un objeto como una función.

Citar
e) ¿Las imágenes son el fondo de un elemento HTML distinto de img o es el atributo source de un elemento img?
Código: [Seleccionar]
document.getElementById('encuadraImagen').innerHTML = '';
   document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';

.........
 
  <div id="encuadraImagen"><h1> ? </h1></div><br/>

  Las imagenes son el fondo del elemento HTML con id='encuadraImagen', primero eliminamos el codigo innerHTMML interno a él y posteriormente asignamos una url con la imagen.

Citar
f) ¿checkBoxSel es un array o un NodeList de tipo array-like?
Código: [Seleccionar]
var checkBoxSel = new Array();checkBoxSel se define como un array vacio.

Citar
g) ¿Qué significa y para qué sirve este código: checkBoxSel||' --- ' ?
Significa que si no tiene ningún valor asignado checkBoxSel coja el valor que se encuentra entre comillas en este caso ' --- '

Citar
h) ¿Y este otro: elementoCiudad.options[elementoCiudad.selectedIndex].text ?
En este código elementoCiudad es la variable que hemos utilizado para asignar el elemento select.
elementoCiudad.options --> hace referencia a los elementos options que tiene el select
[elementoCiudad.selectedIndex].text --> el elemento de los posibles options que tiene select que esta seleccionado asignamos el text que tiene para usarlo.

Saludos.

46
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / closures VS bind
« en: 21 de Marzo 2016, 13:48 »
Una vez terminado el tema CU01178E https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=866:bind-javascript-funcion-entre-parentesis-envuelta-function-statement-requires-a-name-ejemplos-cu01178e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206, que trata entre otras cosas sobre el uso de bind. Me viene una duda sobre que es preferibre usar si closures o bind. Y si no fuera equivalente en casos es preferibre usar closures o bind.
En mi caso,  me costó entender un poco lo de closures, incluso más que el uso de bind. Incluso a la hora de usar las closures todavía me cuesta en comparación con bind.
Adjunto ejemplo, para echar un vistazo y comprobar que su uso es equivalente. (He usado un ejemplo usado en el tema de closures https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=854:closures-javascript-ejemplos-concepto-que-son-y-para-que-sirven-retardar-ejecucion-settimeout-cu01169e-&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Código: [Seleccionar]
<!DOCTYPE html>

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

<style type="text/css">

body { font-family: Helvetica, Arial, sans-serif;}

h2 {  font-size: 1.5em;} h3 { font-size: 1.2em;}

div div {color:blue; margin:10px;}

</style>

<script type="text/javascript">

function cambiarDimensionFuente(size) {   return function() { document.body.style.fontSize = size + 'px';};

}
   
function cambiarDimensionFuentebind(size) {   
   
        document.body.style.fontSize = size + 'px'

}

var size8 = cambiarDimensionFuente(8);

var size16 = cambiarDimensionFuente(16);

var size24 = cambiarDimensionFuente(24);

 

function setClicks(){

document.getElementById('fuente-8').onclick = size8;

document.getElementById('fuente-16').onclick = size16;

document.getElementById('fuente-24').onclick = size24;
   
document.getElementById('fuente-8_bind').onclick = cambiarDimensionFuentebind.bind('undefined',8);

document.getElementById('fuente-16_bind').onclick = cambiarDimensionFuentebind.bind('undefined',16);

document.getElementById('fuente-24_bind').onclick = cambiarDimensionFuentebind.bind('undefined',24);


}

</script></head>

<body onload="setClicks()">

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

<div id ="fuente-8" > Poner texto a 8 </div> <div id ="fuente-16" > Poner texto a 16 </div>

<div id ="fuente-24" > Poner texto a 24 </div> </div>

<br/><br/><br/>

<h2>Esto lo hacemos con bind</h2>
<div>

<div id ="fuente-8_bind" > Poner texto a 8 </div>

 <div id ="fuente-16_bind" > Poner texto a 16 </div>

<div id ="fuente-24_bind" > Poner texto a 24 </div>

<p>En las praderas de la estepa de la Tierra del Fuego suele hacer frío</p>

</div>

</body></html>

47
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Uso de bind para crear referencias a funciones que reciban parámetros CU01178E
« en: 21 de Marzo 2016, 13:20 »
Hola chicos, paso a poner mis soluciones al tema CU01178E del tutorial de programación web JavaScript desde cero.

Código: [Seleccionar]
function conversor(toUnit, factor, offset, input) {

    offset = offset || 0;

    return [((offset+input)*factor).toFixed(2), toUnit].join(" ");

}

 

var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0);

var poundsToKg = conversor.bind(undefined, 'kg', 0.45460, 0);

var farenheitToCelsius = conversor.bind(undefined, 'gradosC',0.5556, -32);

 

alert(milesToKm(10));           

alert(poundsToKg(2.5));         

alert(farenheitToCelsius(98));
Citar
a) ¿Cuántas funciones ligadas (copias parametrizadas) de la función conversor se crean en este código?
Se crean tres funciones ligadas.

var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0);

var poundsToKg = conversor.bind(undefined, 'kg', 0.45460, 0);

var farenheitToCelsius = conversor.bind(undefined, 'gradosC',0.5556, -32);

Citar
b) ¿Qué es lo que devuelve la función conversor?
conversor devuelve un string, que es la unión de los valores de un vector. Une los valores de un vector separandolos por un espacio.

Citar
c) ¿Qué objeto actúa como this en la función milesToKm?
No actua ningun objeto como this, no nos hace falta trabajar directamente sobre el objeto en esta ocación .Si tuvieramos que trabajar o manipular un mismo objeto con la referencia a otra funcion pondriamos this en la primera posicion de la llamada de la función de referencia.

Citar
d) ¿Qué tarea cumple y con qué fórmula trabaja la función milesToKm?
La función milesToKm trabaja con la referencia que se hace sobre la funcion conversor que es la que contiene la fórmula.

Citar
e) ¿Qué tarea cumple y con qué fórmula trabaja la función poundsToKg?
Al igua que la funcion milesToKm esta funcion esta definida con una referencia sobre la funcion conversor que es la que realiza la operacion del calculo.

Citar
f) ¿Qué resultado devuelve milesToKm(10) y qué significa este resultado?
El resultado es 16.09 kms, este resultado es la transformación de 10 millas a kilometros.

Citar
g) ¿Qué resultado devuelve poundsToKg(2.5) y qué significa este resultado?
El resultado es 1.14 kg, este resultado es la forma de transformar la unidad de peso pound a kilogramos.

Citar
h) ¿Qué resultado devuelve farenheitToCelsius(98) y qué significa este resultado?
El resultado es 36.67 grados centígrados, este es el resultado de transformar 98 grados farenheit a grados centigrados.

Citar
i) ¿Qué significado tiene la expresión offset = offset || 0;?
Significa que si la variable offset no está declarada en la llamada de su función valdrá 0

Citar
j) ¿Cuál es la finalidad del uso de toFixed(2)?
Redondear en dos decimales el resultado del cálculo.

Citar
k) ¿Por qué crees que se usa el parámetro offset en la función conversor?
Se usa offset para que la fórmula sea más general y se pueda usar en diferentes cálculos.

Citar
l) Modifica el código para ampliar la información que se nos muestra: introduce un parámetro fromUnit en la función conversor de modo que el resultado nos informe del dato de origen, sus unidades, y el dato convertido y sus unidades.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script>
 function conversor(toUnit, factor, offset, fromUnit, input) {

    offset = offset || 0;

    return [((offset+input)*factor).toFixed(2), toUnit].join(" ");

}

 

var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0, 'millas');

var poundsToKg = conversor.bind(undefined, 'kg', 0.45460, 0, 'pounds');

var farenheitToCelsius = conversor.bind(undefined, 'gradosC',0.5556, -32, 'farenheit');

 

alert(milesToKm(10));           

alert(poundsToKg(2.5));         

alert(farenheitToCelsius(98));   
</script>
</head>
<body>
   
</body>
</html>

Saludos.

48
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cómo definir addEventListener con parámetros ejemplo código CU01177E
« en: 17 de Marzo 2016, 13:21 »
Hola chicos, con este tema he aclarado muchas de las dudas que había tenido en ejercicios anteriores. Porque había intentando usar los eventos con la llamada a la función añadiendo parámetros a la función, de esta forma:
Código: [Seleccionar]
elementoHTML.addEventListener('click',cambiaColor(variable1,variable2))
....
....
....
function cambiaColor(evento,variable1,variable2){
....... }
y claro está, como se explica en el tema, me daba error. Yo pensaba que no se podría hacer, y me hacia pensar que era una cosa que le quitaba potencia a JavaScript. Pero con este tema todo ha quedado más claro.

Citar
Crea un código HTML donde tengas un formulario con seis inputbox de texto que servirán para pedir al usuario Nombre, Apellidos, Correo electrónico, Teléfono, Domicilio y País. Crea el código JavaScript para que los elementos 1, 4, 7, 10 etc. del formulario tomen color de fondo amarillo cuando el usuario pulse sobre ellos. Los elementos 2, 5, 8, 11, etc. del formulario deberán tomar color de fondo azul claro cuando el usuario pulse sobre ellos. Los elementos 3, 6, 9, 12, 15, etc. del formularios deberán tomar color de fondo verde claro cuando el usuario pulse sobre ellos.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        label {
            display:block;
            margin:10px;
        }
       
        input{
            margin-left:20px;
        }
    </style>
    <script>
    window.onload = function(){
       
        formularios=document.forms;
       
        for (var i=0;i<formularios.length;i++){
           
            for (var j=0;j<formularios[i].elements.length;j++){
               
                if (formularios[i].elements[j].type == 'text' && (j+1)%3 == 0){
                   
                    formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'lightgreen',this)});
                   
                     formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
                   
                }else if (formularios[i].elements[j].type == 'text' && (j+1 == 1) || (j+1)%3 == 1){
                   
                     formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'yellow',this);});
                   
                    formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
                   
                }else{
                   
                     formularios[i].elements[j].addEventListener('click',function(evento){cambiaColorFondo(evento,'aquamarine',this);});
                   
                    formularios[i].elements[j].addEventListener('blur',cambiaColorInicial);
                   
                }
            }
           
        }
       
    }
   
    function cambiaColorFondo(evento,color,objeto){
       
        objeto.style.backgroundColor = color;
       
    }
   
    function cambiaColorInicial(evento){
       
        this.style.backgroundColor = 'white';
       
    }
       
    </script>
</head>
<body>
    <form name='formularioContaco' id='formulario' method='get' >
        <label>Nombre<input type='text' name='name' id='name'/></label>
        <label>Apellidos<input type='text' name='surname' id='surname'/></label>
        <label>Edad<input type='text' name='age' id='age'/></label>
        <label>Direccion de correo<input type='text' name='email' id='email'/></label>
        <label>Direccion<input type='text' name='adress' id='adress'/></label>
        <label>Profesion<input type='text' name='job' id='job'/></label>
        <label><input type='submit' id='botonEnvio' value='Enviar'/></label>
    </form>
</body>
</html>
Saludos

49
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript métodos setAttribute y getAttribute modificar atributos HTML CU01176E
« en: 15 de Marzo 2016, 13:20 »
Hola chicos, adjunto código para el ejercicio de este tema CU01176E del tutorial básico de programación web JavaScript desde cero.

Citar
Crea un script que recorra todos los elementos input dentro de cada uno de los formularios presentes y si son de tipo text, modifique su atributo asociado maxlength usando el método setAttribute de los objetos tipo Element para limitar a 8 el número máximo de caracteres que pueda introducir el usuario. Una vez modificado el atributo, muestra por pantalla el valor que tiene dicho atributo para todos los elementos de tipo input usando el método getAttribute.
Código: [Seleccionar]
<!DOCTYPE html>

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

<style type="text/css">
    label{
        display:block;
        margin:5px;
    }
   
    #ejemplo {
        width: 300px;
        height: 30px;
        background-color:bisque;
        border-radius:10px;
        border : solid 2px black;
        box-shadow: 10px 5px 3px;
        position: absolute;
        left: 400px;
        cursor: pointer;
        text-align:center;
        line-height: 30px;
       
    }
   
    </style>

<script>
var formulario = document.forms;
   
window.onload = function (){
   
    var boton = document.getElementById('ejemplo');
   
    boton.addEventListener('click',manejo);

}

function manejo(){
   
        asignarmaxLength();
   
        mostrarmaxLength();
       
}
       
 function asignarmaxLength(){     
       
        for (var i = 0;i<formulario.length;i++){
           
                for (var j=0;j<formulario[i].elements.length;j++){
                   
                    if (formulario[i].elements[j].type=='text'){
                       
                        formulario[i].elements[j].setAttribute ('maxlength',8);
                    }
                   
                }
           
        }
       
    }
   
    function mostrarmaxLength(){
       
        msg = 'Hay '+formulario.length+' formularios';
       
        for (var i = 0;i<formulario.length;i++){
           
            msg += '\n El formulario '+(i+1)+' tiene los siguientes elementos: ';
           
            for (var j=0;j<formulario[i].elements.length;j++){
               
                if (formulario[i].elements[j].type == 'text'){
                   
                msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' con name '+formulario[i].elements[j].name+' su id es '+formulario[i].elements[j].id+' y su maxlength es de '+formulario[i].elements[j].maxLength+' caracteres';
                   
                    // en caso de uso de getAttribute seria:
                    // formulario[i].elements[j].getAttribute('maxlength');
                }else{
                   
                msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' su id es '+formulario[i].elements[j].id+' y no tiene definido el atributo maxlength';
                   
                }
               
            }   
        }
       
        alert (msg);
       
    }
   
   
</script>
</head>

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

<div style="color:blue; margin:20px;" id ="ejemplo"> setAttribute/getAttribute con maxLength</div>

<form name ="formularioContacto" method="get" action="accion1.html">

<h2>Formulario de contacto</h2>

<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>

<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>

<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>

</form>

<form name ="formularioReclamacion" method="get" action="accion2.html">

<h2>Formulario de reclamación</h2>

<label>Motivo reclamación:<input id="motivoFormReclama" type="text" name="motivo" /></label>

<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>

<label><input id="botonEnvio2" type="submit" value="Enviar"></label>

</form>

</body>
</html>
Saludos

50
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript validar formularios antes de envío Acceso document.forms CU01175E
« en: 14 de Marzo 2016, 15:02 »
Hola, subo las soluciones a mis ejercicios sobre este tema CU01175E del tutorial básico del programador web, JavaScript desde cero:

Citar
Un uso habitual de JavaScript con formularios es usar JavaScript para validar que el contenido introducido por el usuarios sea válido. Crea un formulario que conste de cinco campos: nombre, apellidos, email, ciudad y país. Usando el evento onsubmit, realiza la validación para:

a) Comprobar que en el momento del envío ninguno de los campos tiene menos de dos caracteres (es decir, si está vacío, contiene una letra o dos letras se considerará no válido) accediendo a los campos mediante document.forms y elements.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    label{
        display:block;
        margin:10px;
    }   
   
    input{
        margin:10px;
    }
</style>
<script>
var envioFormulario = true;
   
function validar(){
   
    var formulario = document.forms['formularioContacto'];
   
    var expReg = /^\S{3,}$/;
   
    var msg= 'Los elementos que no tienen almenos tres caracteres son:';
   
    for (var i=0;i<formulario.elements.length-1;i++){
             
        if (!expReg.test(formulario.elements[i].value)){
           
            envioFormulario = false;
           
            msg += '\n'+formulario.elements[i].name;
           
        }
               
    }
   
            if (!envioFormulario){
               
                alert (msg);
               
                return false;
               
            }else{
               
                alert ('OK.Procedemos a enviar el formulario');
               
                return true;
               
            }
               
}   

</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
    <label>Nombre<input name="nombre" id="nombre"/></label>
    <label>Apellidos<input name="apellidos" id="apellidos"/></label>
    <label>Email<input name="email" id="email"/></label>
    <label>Ciudad<input name="ciudad" id="ciudad"/></label>
    <label>Pais<input name="pais" id="pais"/></label>   
    <label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>
Citar
b) Igual que el apartado a) pero accediendo a los campos directamente usando el atributo name (por ejemplo formularioContacto.apellidos haría alusión a un elemento input cuyo atributo name es apellidos en un formulario cuyo atributo name es formularioContacto)
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    label{
        display:block;
        margin:10px;
    }   
   
    input{
        margin:10px;
    }
</style>
<script>
var envioFormulario = true;
   
function validar(){
   
    var formulario = document.forms['formularioContacto'];

    var expReg = /^\S{3,}$/;
   
    var msg= 'Los elementos que no tienen almenos tres caracteres son:';
       
     if (!expReg.test(formulario.nombre.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.nombre.name;
         
        }
   
     if (!expReg.test(formulario.apellidos.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.apellidos.name;
         
        }
   
     if (!expReg.test(formulario.email.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.email.name;
         
        }
   
     if (!expReg.test(formulario.ciudad.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.ciudad.name;
         
        }
   
     if (!expReg.test(formulario.pais.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.pais.name;
         
        }
   
            if (!envioFormulario){
               
                alert (msg);
               
                return false;
               
            }else{
               
                alert ('OK.Procedemos a enviar el formulario');
               
                return true;
               
            }
               
}   

</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
    <label>Nombre<input name="nombre" id="nombre"/></label>
    <label>Apellidos<input name="apellidos" id="apellidos"/></label>
    <label>Email<input name="email" id="email"/></label>
    <label>Ciudad<input name="ciudad" id="ciudad"/></label>
    <label>Pais<input name="pais" id="pais"/></label>   
    <label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>
Saludos

51
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / mover elementos en una web con JavaScript setInterval moveTo desplazar CU01174E
« en: 11 de Marzo 2016, 12:25 »
Respuestas al ejercicio CU01174E del curso básico de programación web JavaScript desde cero.

Citar
El siguiente código nos sirve al mismo tiempo de ejemplo y de ejercicio. Ejecuta el código y comprueba sus resultados. Luego responde las preguntas y cuestiones que se plantean más abajo.


Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
 window.onload = function () {

                var ejemplo = document.getElementById('ejemplo');

                ejemplo.addEventListener("click", ejecutarEjemplo);

}

 

function ejecutarEjemplo () {

                nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');

                nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');

                nuevaVentana.focus();
                nuevaVentana.moveTo(0,positionY);
                nuevaVentana.setInterval( sine, 1000/30 );
}

 

function sine(){

  controlSinusoidal = controlSinusoidal + Math.PI/256;
  positionY = 100*Math.sin(controlSinusoidal);
  start += 2;
  nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);

}

 

</script>

</head>

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

<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
</body>
</html>

Citar
a) ¿Qué representa la variable start? ¿Qué significado tiene que su valor inicial sea cero?

La variable start que está definida como variable global, representa la posición X de la ventana que se ha creado. Su valor inicial es cero porque empieza desde la parte más a la izquierda de la pantalla y va evolucionando por la coordenad X según va incrementando su valor.


Citar
b) ¿Qué representa la variable positionY? ¿Qué significado tiene que su valor inicial sea window.innerHeight/2-125 ?

La variable posicionY representa la posición respecto la coordenada Y donde encontraremos nuestra ventana respecto a la pantalla. El valor inicial representa que la colocamos en la posción central de la pantalla respecto al eje y.
El cálculo es -->la altura de la pantalla dividido entre 2 (para buscar el centro de la pantalla) - 125 (que es la mitad de la altura de la ventana que hemos creado para buscar el centro de la nueva ventana).


Citar
c) ¿Con qué frecuencia (cada cuánto tiempo) se produce el refresco o redibujado de la pantalla?

La frecuencia de refresco lo invocamos con : ' nuevaVentana.setInterval( sine, 1000/30 )', por lo que especificamos la frecuencia cada 1000/30 ns.


Citar
d) ¿Cuántos píxeles se desplaza hacia la derecha la ventana en cada refresco de pantalla que realiza el navegador?

El desplazamiento sobre el eje x lo hacemos atraves de la expresion --> 'start += 2;' , a cada llamada de la función se inclementa su valor en 2.


Citar
e) La base matemática del movimiento que describe la ventana es el movimiento ondulatorio. ¿Por qué la ventana sube y baja?

El movimiento vertical está realizado através de la funcion seno, esta función trigonométrica segun va variando su valor x, va variando su valor y de forma ascendente y descendente repetitivamente su periodo.


Citar
f) Modifica el código para que cuando la ventana llegue al lateral derecho de la pantalla se detenga su movimiento y aparezca un mensaje (alert) con el texto ¡Se terminó!

Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
var llamada;

 window.onload = function () {
                var ejemplo = document.getElementById('ejemplo');
                ejemplo.addEventListener("click", ejecutarEjemplo);

}

 

function ejecutarEjemplo () {
                nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
                nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
                nuevaVentana.focus();
                nuevaVentana.moveTo(0,positionY);
                llamada = nuevaVentana.setInterval( sine, 1000/30 );
}

 

function sine(){
  controlSinusoidal = controlSinusoidal + Math.PI/256;
  positionY = 100*Math.sin(controlSinusoidal);
  start += 2;
  if ((window.screen.availWidth-(250+(nuevaVentana.outerWidth-nuevaVentana.innerWidth))) >= start){
      nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
  }else{
      nuevaVentana.clearInterval(llamada);
      alert ('Se terminó');
  }
}
</script>

</head>

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

<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>

</body>
</html>

Citar
g) Modifica el código para que cuando la ventana llegue al lateral derecho de la pantalla haga un efecto de “rebote” y empiece a moverse en sentido opuesto al que venía (es decir, subiendo y bajando pero ahora de derecha a izquierda), hasta llegar al lateral izquierdo y volver a rebotar, y así indefinidamente….


Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
var llamada;
 window.onload = function () {
                var ejemplo = document.getElementById('ejemplo');
                ejemplo.addEventListener("click", ejecutarEjemplo);

}

function ejecutarEjemplo () {
                nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
                nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
                nuevaVentana.focus();
                nuevaVentana.moveTo(0,positionY);
                llamada = nuevaVentana.setInterval( sine, 1000/30 );
}

 

function sine(){
  controlSinusoidal = controlSinusoidal + Math.PI/256;
  positionY = 100*Math.sin(controlSinusoidal);
  if (start ==(window.screen.availWidth-(250+(nuevaVentana.outerWidth-nuevaVentana.innerWidth)))){
      sentido = false;
  }
   
  if (start == 0){
      sentido = true;
  }
   
  if (sentido == true){
      start += 2;
  }else{
    start -= 2;
  }
 
      nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
   
}

</script>

</head>

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

<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>

</body>
</html>
Saludos y buen finde!!!!!!

52
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Capturar dimensiones de una ventana JavaScript innerWidth window.open CU01173E
« en: 10 de Marzo 2016, 19:17 »
Adjunto mi código para este tema. No he conseguido que saliese con 'nuevaVentana.href', la url de la ventana.

Código: [Seleccionar]
<!DOCTYPE html>

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

<script type="text/javascript">
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}

function ejecutarEjemplo () {
var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', 'width=300, height=300, resizable=true, menubar=yes');
nuevaVentana.focus();
rellenaDatos(nuevaVentana);
}
function rellenaDatos(nuevaVentana){
if(nuevaVentana.closed){
var ventana = "cerrado"
}else{ ventana = 'abierto'
                }   
                    var msg = 'La ventana que hemos '+ventana+' tienes las siguientes caracteristicas<br/>'
                    msg +=  'Las medidas del viewport son '+nuevaVentana.innerHeight+' para la altura y '+nuevaVentana.innerWidth+' para el ancho<br/> ';
                    msg += 'Hay '+nuevaVentana.frames.length+ ' frames abiertos<br/>';
                    msg += 'La url a la que apunta es '+nuevaVentana.location.href+'<br/>';
                    msg += 'El name que tiene la ventana es '+nuevaVentana.name+'<br\>';
                    msg += 'Las dimesiones hasta los bordes exteriores son de '+nuevaVentana.outerHeight+'X'+nuevaVentana.outerWidth+'<br\>';
                    msg += 'y la posicion de la ventana es respecto al eje x de '+nuevaVentana.screenX+' y respecto al eje y '+nuevaVentana.screenY;
                    informacion.innerHTML = msg;
                   
            }
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>

<div id="informacion"></div>

</body>
</html>
Saludos!!

53
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / HTML CSS JavaScript crear web donde incluimos contenidos de varias webs CU01172E
« en: 10 de Marzo 2016, 15:30 »
Adjunto mi solución al ejercicio CU01172E del tutorial básico del programador web JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #principal{
        margin:auto;
        width:90%;
        height:800px;
        border: solid thin black;
    }   
   
    #izquierda,#derecha{
        margin:10px;
        width: 45%;
        height:90%;
    }
   
    #izquierda{
        float:left;
    }
   
    #derecha{
        float:right;
    }
   
    #botones{
       
    }
   
    .boton{
        margin:10px;
        height:30px;
        width:200px;
        padding-top:10px;
        text-align: center;
        border:solid thin blue;
        background-color:aquamarine;
        border-radius: 10px;
        font-size: 20px;
        cursor:pointer;
    }
   
    .frame{
        margin:18px;
        width:90%;
        height:500px;
    }
</style>
<script>
window.onload = function(){
   
    var enlaces = document.getElementsByClassName("boton");
    var left = document.getElementById('iframeleft');
    var right = document.getElementById('iframeright');
   
    enlaces[0].onclick = function (){left.src = 'http://www.clarin.com'};
                                   
    enlaces[1].onclick = function(){left.src = 'http://impresa.elmercurio.com/'};
                                   
    enlaces[2].onclick = function(){left.src = 'http://www.elespectador.com'}; 
    enlaces[3].onclick = function(){right.src = 'http://www.eluniversal.com.mx'};
    enlaces[4].onclick = function(){right.src = 'http://www.elcomercio.pe'};
    enlaces[5].onclick = function(){right.src = 'http://www.elmundo.es/'};
   
}   
</script>
</head>
<body>
<div id='principal'>
    <div id='izquierda'>
        <div class='botones'>
            <div class='boton'>clarin.com</div>
            <div class='boton'>elmercurio.cl</div>
            <div class='boton'>elespectador.com</div>
        </div>
        <iframe class='frame' name='iframeleft' id='iframeleft' src=''></iframe>
    </div>
    <div id='derecha'>
        <div class='botones'>
            <div class='boton'>universal.com.mx</div>
            <div class='boton'>elcomercio.pe</div>
            <div class='boton'>elmundo.es</div>
        </div>       
        <iframe class='frame' name='iframeright' src='' id='iframeright'></iframe>
    </div>
</div>
</body>
</html>
Saludos!!!!

54
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript redireccionar a otra url recargar dirección window.location CU01171E
« en: 08 de Marzo 2016, 13:18 »
Ejercicio CU01171E del tutorial JavaScript desde cero:

Citar
Crea una página web que al ser invocada muestre un mensaje “Hemos cambiado de ubicación esta página. En breves momentos será redireccionado…” junto a una cuenta atrás que muestre 5, 4, 3, 2, 1 (correspondiente a 5 segundos). Tras transcurrir 5 segundos y mostrarse la cuenta atrás, el usuario debe ser redireccionada a la url http://aprenderaprogramar.com. Para realizar este ejercicio debes usar la propiedad window.location junto con funciones que permitan el retardo en la ejecución vistas en entregas anteriores del curso.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #mensaje{
        position:relative;
        top:200px;
        left:20%;
    }   
   
    #texto{
        position:absolute; 
        color:crimson;
        font-size: 20px;
    }
   
    #cuentaAtras{
        position: absolute;
        font-size: 500px;
        color :cadetblue;
        left:15%;
        top:30px;
    }
   
</style>

<script>
    var contador = 0;
window.onload=function(){
    contar(5);
   
   
   
    function contar(numero){
       
        document.getElementById('cuentaAtras').innerHTML=numero;
        if (contador==5 && numero==0){
            clearTimeout(llamada);
            newDirection();
        }
    contador++;
         var llamada = setTimeout(function(){contar(numero-1)},1000);
   
    }
   
    function newDirection(){
        window.location.replace('http://aprenderaprogramar.com');
    }
   
}   
   
</script>
</head>
<body>
   <div id="mensaje">
    <div id='texto'>Hemos cambiado de ubicación esta página. En breves momentos será redireccionado…</div>
    <div id='cuentaAtras'></div>
    </div>
</body>
</html>
Saludos

55
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Saber qué navegador está usando el usuario usando JavaScript userAgent CU01170E
« en: 08 de Marzo 2016, 12:04 »
No pensaba yo que userAgent devolviera ese tipos de datos, yo pensaba que sería más específico según el navegador que se usara.

Adjunto los ejercicios de estetema

Citar
Usando la propiedad userAgent de los objetos Navigator, determina el navegador que está usando el usuario y muestra un mensaje por pantalla informando de ello. El resultado debe ser del tipo: <<Estás usando: nombreNavegador>>, donde nombreNavegador será Google Chrome, Apple Safari, Opera, Mozilla Firefox, Microsoft Internet Explorer ó Desconocido. Resuélvelo de dos maneras distintas:

a) Usando expresiones regulares.


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>
window.onload=function(){
    var navegador = window.navigator.userAgent;
    var msg = "El navegador en uso es : ";
    var navegadorMozilla = /Firefox/;
    var navegadorOpera = /Opera/;
    var navegadorSafari = /Safari/;
    var navegadorChrome = /Chrome/;
    var navegadorIE = /Trident/;
    if (navegadorMozilla.test(navegador)){
        msg += 'Mozilla';
    }else if (navegadorOpera.test(navegador)){
        msg += 'Opera';
    }else if (navegadorSafari.test(navegador) && navegadorChrome.test(navegador)){
        msg += 'Google Chrome';
     }else if (navegadorSafari.test(navegador) && !navegadorChrome.test(navegador)){
        msg += 'Safari';
    }else if (navegadorIE.test(navegador)){
        msg += 'Internet Explorer';
    }else{
        msg += 'Desconocido';
    }
    alert (msg);
}   
</script>
<body>
   
</body>
</html>

Citar
b) Usando el método indexOf de los objetos tipo String de JavaScript.


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>
window.onload=function(){
    var navegador = window.navigator.userAgent;
    var msg = "El navegador en uso es : ";
    /*var navegadorMozilla = /Firefox/;
    var navegadorOpera = /Opera/;
    var navegadorSafari = /Safari/;
    var navegadorChrome = /Chrome/;
    var navegadorIE = /Trident/;*/
   if(navegador.indexOf('Firefox')!=-1){
msg += 'Mozilla Firefox.';
}else if(navegador.indexOf('Safari')!=-1 && navegador.indexOf('Chrome')==-1){
msg += 'Apple Safari.';
                }else if(navegador.indexOf('Safari')!=-1 && navegador.indexOf('Chrome')!=-1){
msg += 'Google Chrome.';
                }else if(navegador.indexOf('Opera')!=-1){
                    msg += 'Opera';
}else if(navegador.indexOf('Trident')!=-1){
msg += 'Internet Explorer.';
}else{
msg += 'Desconocido';
}
    alert (msg);
}   
</script>
<body>
   
</body>
</html>
Saludos

56
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Qué son los closures en JavaScript cierres, cerraduras o clausuras CU01169E
« en: 07 de Marzo 2016, 16:17 »
El ejercicio de la entrega CU01169E del tutorial JavaScript desde cero propone analizar un código y responder unas preguntas:


Citar
a) ¿En qué parte del código se genera un closure o cerradura? ¿Por qué?

La closure sstá en la funcion interna de cambiarDimensionFuente, esta función interna usa la variable global 'size' que se obtiene de la definición de la funcion.


Citar
b) ¿En qué parte del código se establece que al hacer click sobre el elemento con id fuente-8 se cambie el tamaño de las fuentes de la página?

En la funcion setClicks define todos los eventos onclick que queremos que realice.
'document.getElementById('fuente-8').onclick=size8;
esta definicion del evento onclick, nos lleva a la variable global que está definida por la llamada de otra función cambiarDimensionFuente(size) y que define el tamaño de la fuente del texto que se encuentra dentro de una etiqueta con un id='fuente-8'.


Citar
c) Supón que eliminamos la función setClicks y dejamos su código “libre” dentro de las etiquetas <script> … </script>. ¿Qué mensaje de error te muestra la consola de depuración? (Activa la consola si no la tienes activada) ¿Por qué aparece ese mensaje de error?

si no tenemos la funcion setClicks no está definido los eventos onclick. ada variable global tendrá un fontSize definido pero no se asigna a las etiquetas del codigo existentes.
                           " ReferenceError: setClicks is not defined "


Citar
d) ¿Debemos escribir document.getElementById('fuente-8').onclick = size8; ó document.getElementById('fuente-8').onclick = size8(); ?¿Por qué?

Si escribimos size8(), se toma como si fuera una función.


Citar
e) Supón que al cargar la página queremos que el tamaño inicial de fuente sea 8 y para ello nos valemos de la función setClicks. ¿Debemos escribir dentro de esta función size8; ó size8();? ¿Por qué?

size8()
Porque de esa manera usamos size8 como una función, si pusiésemos solo size8; no pasaría nada.


Citar
f) Las closures no siempre son necesarias, incluso a veces se generan involuntariamente o innecesariamente consumiendo recursos del sistema que podrían ahorrarse. ¿Qué ventajas le ves al uso de closures en este código? ¿Y qué inconvenientes?

Como ventaja veo que se pueden definir elementos denuestras paginas como si la closure fuese el constructor de un objeto permitiendote la reusabilidad.
Como desventaja que tienes que tener muy claro su funcionamiento, que no es fácil.


Citar
g) Reescribe el código (hazlo como mejor creas cambiando todo aquello que consideres necesario) de forma que obtengamos el mismo resultado pero sin hacer uso de closures.

Código: [Seleccionar]
<!DOCTYPE html>

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

<style type="text/css">
body { font-family: Helvetica, Arial, sans-serif;}
h2 {  font-size: 1.5em;} h3 { font-size: 1.2em;}
div div {color:blue; margin:10px;}
</style>

<script type="text/javascript">

function size8(){
    document.body.style.fontSize = 8 +'px';
}
   
function size16(){
    document.body.style.fontSize = 16 +'px';
}
   
function size24(){
    document.body.style.fontSize = 24 +'px';
}

function setClicks(){
document.getElementById('fuente-8').onclick = size8;
document.getElementById('fuente-16').onclick = size16;
document.getElementById('fuente-24').onclick = size24;
}

</script></head>
<body onload="setClicks()">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div id ="fuente-8" > Poner texto a 8 </div> <div id ="fuente-16" > Poner texto a 16 </div>
<div id ="fuente-24" > Poner texto a 24 </div> </div>
<p>En las praderas de la estepa de la Tierra del Fuego suele hacer frío</p>
</body></html>
Saludos

57
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript qué significa this ámbitos scope anidamiento closure qué es CU01168E#
« en: 02 de Marzo 2016, 16:28 »
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.

58
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript diferencia entre variables locales y globales scope o ámbito CU01167E
« en: 02 de Marzo 2016, 13:59 »
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.

59
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / código JavaScript slideshow con rotación automática imágenes setTimeout CU01166E
« 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

60
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript crear números aleatorios en rango usar objeto Math número pi CU01165E
« en: 27 de Febrero 2016, 11:48 »
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>

Páginas: 1 2 [3] 4 5

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".