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 - Dimitar Stefanov

Páginas: 1 ... 10 11 12 13 14 [15] 16 17 18 19 20 ... 30
281
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 Abril 2016, 16:46 »
Buenas tardes. Dejo otra solución más del siguiente ejercicio del curso JavaScript desde cero y precisamente de la entrega CU01179E.

Código del ejercicio:

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;} h4 {margin:0;} div {float:left;}

.estiloForm, #encuadraImagen, #datos {background-color: #f3f3f3; border: solid 2px black; margin-left:10px; width:300px; }

.estiloForm { width: 330px; padding:10px;} #datos {margin-top: 20px; height:226px; padding:10px;}

#encuadraImagen {width:100px; height:100px;   text-align:center;}

.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 () {

                /* Variables globales (por estar declaradas sin var) */

                casillaDatos = document.getElementById('datos'); //Nodo donde vamos a mostrar los datos

                radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttons

                checkboxElements = new Array();

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

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

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

                if (elementosDelForm[i].type == 'radio') {elementosDelForm[i].addEventListener("click", actualizarDatos);}

                else {elementosDelForm[i].addEventListener("change", actualizarDatos);}

                if (elementosDelForm[i].type == 'checkbox') {checkboxElements.push(elementosDelForm[i]);}

                }

                for (var i=0; i<elementosSelect.length;i++) {elementosSelect[i].addEventListener("change", actualizarDatos);}

}

 
function actualizarDatos() {

var rutaImagen = '';
var radioButSelValue = '';

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

if (radioButSelValue != ''){
                if (radioButSelValue =='Sr.') {rutaImagen='caraHombre.jpg';} else {rutaImagen='caraMujer.jpg';}
                document.getElementById('encuadraImagen').innerHTML = '';

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

}

var checkBoxSel = new Array();

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

if (checkboxElements[i].checked ==true) {checkBoxSel.push(checkboxElements[i].name);}

}

var elementoCiudad = document.getElementById('ciudad');

casillaDatos.innerHTML='<h4> Datos introducidos: </h4><p>Tratamiento: '+(radioButSelValue||' --- ')+'</p>'+

'<p>Nombre: '+document.getElementById('nombre').value+'</p>'+

'<p>Apellidos: ' + (document.getElementById('apellidos').value||' --- ')+'</p>'+

'<p>Dirección: ' + (document.getElementById('direccion1').value||' --- ')+'</p>'+

'<p>Ciudad: ' + (elementoCiudad.options[elementoCiudad.selectedIndex].text||' --- ')+'</p>'+

'<p>Preferencias: ' + (checkBoxSel||' --- ')+'</p>';

}

</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"/>
    </div>
    <div style="float:left;">
    <div id="encuadraImagen"><h1> ? </h1></div><br/>
    <div id="datos" style="float:left;"><h4> Datos introducidos: </h4></div>
    </form>
    </div>
</body></html>
Preguntas:

Citar
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?

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='caraHombre.jpg';
                    }else{
                    rutaImagen='caraMujer.jpg';
                    }
                    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é?

La variable 'radioButTrat' es una variable global porque se ha declarado sin 'var'.

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?

La variable 'radioButTrat' es un objeto NodeList de tipo array-like

Citar
Sabemos que instrucciones como getElementsByTagName nos devuelven una colección de nodos que en algunos momentos se denomina “array” de nodos. Sin embargo, lo que devuelven este tipo de métodos no es exactamente un array, sino una estructura de datos denominada NodeList.

Respuesta obtenida de la entrega CU01136E del curso JavaScript desde cero

https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=816:nodelist-javascript-diferencias-de-nodelist-y-array-acceso-a-texto-nodos-textcontent-innertext-cu01136e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

El método length es aplicable tanto a objetos NodoList como a arrays.

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.

Única línea cambiada:

Código: [Seleccionar]
if(elementosDelForm[i].type == 'checkbox'){radioButTrat.push(elementosDelForm[i]);}
            }
El código quedaría así:

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;
    }
    h4{
        margin:0;
    }
    div{
        float:left;
    }
    .estiloForm, #encuadraImagen, #datos{
        background-color: #f3f3f3;
        border: solid 2px black;
        margin-left:10px;
        width:300px;
    }
    .estiloForm{
        width: 330px;
        padding:10px;
    }
    #datos{
        margin-top: 20px;
        height:226px;
        padding:10px;
    }
    #encuadraImagen{
        width:100px;
        height:100px;   
        text-align:center;
    }
    .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(){
        /* Variables globales (por estar declaradas sin var) */
        casillaDatos = document.getElementById('datos'); //Nodo donde vamos a mostrar los datos
        radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttons
        checkboxElements = new Array();

        var elementosDelForm = document.getElementsByTagName('input'); //Elementos input
        var elementosSelect = document.getElementsByTagName('select'); //Elementos select
            for(var i=0; i<elementosDelForm.length;i++) {
                if(elementosDelForm[i].type == 'radio') {elementosDelForm[i].addEventListener("click", actualizarDatos);
                }else{
                    elementosDelForm[i].addEventListener("change", actualizarDatos);
                }
                if(elementosDelForm[i].type == 'checkbox'){radioButTrat.push(elementosDelForm[i]);}
            }
            for (var i=0; i<elementosSelect.length;i++){elementosSelect[i].addEventListener("change", actualizarDatos);}
    }

    function actualizarDatos(){
        var rutaImagen = '';
        var radioButSelValue = '';
        for(var i=0; i<radioButTrat.length; i++){
            if(radioButTrat[i].checked == true){ radioButSelValue= radioButTrat[i].value;} }
                if(radioButSelValue != ''){
                    if (radioButSelValue =='Sr.'){rutaImagen='caraHombre.jpg';
                    }else{
                    rutaImagen='caraMujer.jpg';
                    }
                    document.getElementById('encuadraImagen').innerHTML = '';
                    document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';
                }

        var checkBoxSel = new Array();
        for(var i=0; i<checkboxElements.length;i++){
            if(checkboxElements[i].checked ==true){checkBoxSel.push(checkboxElements[i].name);}
        }

        var elementoCiudad = document.getElementById('ciudad');
        casillaDatos.innerHTML='<h4> Datos introducidos: </h4><p>Tratamiento: '+(radioButSelValue||' --- ')+'</p>'+'<p>Nombre: '+document.getElementById('nombre').value+'</p>'+'<p>Apellidos: ' + (document.getElementById('apellidos').value||' --- ')+'</p>'+'<p>Dirección: ' + (document.getElementById('direccion1').value||' --- ')+'</p>'+'<p>Ciudad: ' + (elementoCiudad.options[elementoCiudad.selectedIndex].text||' --- ')+'</p>'+'<p>Preferencias: ' + (checkBoxSel||' --- ')+'</p>';
    }

    </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"/>
    </div>
        <div style="float:left;">
        <div id="encuadraImagen">
            <h1>?</h1>
        </div><br/>
        <div id="datos" style="float:left;">
            <h4> Datos introducidos: </h4>
        </div>
    </form>
    </div>
</body>
</html>
La consola nos da el error: "radioButTrat.push in not a function"

Eso ocurre porque el método push es aplicable solamente a los arrays

Citar
push(x) Añade x al final del array como nuevo (o nuevos) elemento, y devuelve la nueva longitud del array.

Respuesta obtenida de la entrega CU01153E del curso JavaScript desde cero

https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=834:funciones-arrays-javascript-push-sort-ordenar-numeros-concat-join-pop-shift-slice-splice-etc-cu01153e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Citar
e) ¿Las imágenes son el fondo de un elemento HTML distinto de img o es el atributo source de un elemento img?

Son el fondo de un elemento HTML distinto de img.

Citar
f) ¿checkBoxSel es un array o un NodeList de tipo array-like?

La variable checkBoxSel es un array. Hemos explicado más arriba las diferencias entre un array un un NodeList.

Citar
g) ¿Qué significa y para qué sirve este código: checkBoxSel||' --- ' ?

Eso significa que o se toma como valor el valor de la variable 'checkBosSel' o en su defecto '------'.

Citar
h) ¿Y este otro: elementoCiudad.options[elementoCiudad.selectedIndex].text ?

Recuperamos la opción seleccionada del select con id="ciudad".

Citar
La propiedad selectedIndex del elemento select nos devuelve el índice numérico de la opción seleccionada

Respuesta obtenida de la entrega CU01179E del curso JavaScript desde cero.

Gracias.

282
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CU01178E bind en JavaScript
« en: 22 de Abril 2016, 13:22 »
Perdonad.

Misterio resuelto. Estaba pasando en mal orden los parámetros. Si queremos pasar los parámetros en las funcioens ligadas, lo tendrémos que hacer así:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

function conversor(toUnit, factor, offset, fromUnit, input){
offset = offset || 0;
return [input+' '+fromUnit+' equivalen a: '+((offset+input)*factor).toFixed(2), toUnit].join(' ');
}

var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0, 'miles');
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>
Gracias.

283
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo bind en JavaScript ligar parámetros a funciones crear copias CU01178E
« en: 22 de Abril 2016, 13:17 »
Buenas a todos los compañeros de aprenderaprogramar.com. A continuación dejo una posible solución del ejercicio CU01178E del curso JavaScript desde cero.

Citar
EJERCICIO

Escribe este código, ejecútalo y responde a las preguntas que aparecen a continuación.

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 que son: var milesToKm, var poundsToKg y var farenheitToCelsius.

Citar
b) ¿Qué es lo que devuelve la función conversor?

La función conversor devuelve el resultado de la conversación de unas mediadas a otras.

Citar
c) ¿Qué objeto actúa como this en la función milesToKm?

Como en dicha función el this está declarado como 'undefined' el objeto que actúa como this es el objeto global de JavaScript, es decir, el objeto Window.

Citar
d) ¿Qué tarea cumple y con qué fórmula trabaja la función milesToKm?

La tarea de la función milesToKm es convertir millas en kilómetros. La fórmula con la que trabaja la función es: el parámetro offset más las unidades de la medida que se convertirá por el factor de las unidades de la medida conversora.
(offset+input)*factor.

Citar
e) ¿Qué tarea cumple y con qué fórmula trabaja la función poundsToKg?

La tarea de la función milesToKm es convertir pounds en kilógramos. La fórmula con la que trabaja la función es: el parámetro offset más las unidades de la medida que se convertirá por el factor de las unidades de la medida conversora.
(offset+input)*factor

Citar
f) ¿Qué resultado devuelve milesToKm(10) y qué significa este resultado?

Devuelve: 16.09 km. Es decir que 10 millas equivales a 16.09 km.

Citar
g) ¿Qué resultado devuelve poundsToKg(2.5) y qué significa este resultado?

Devuelve: 1.14 kg. Quiere decir que 2.5 pounds equivales a 1.14 kg.

Citar
h) ¿Qué resultado devuelve farenheitToCelsius(98) y qué significa este resultado?

Devuelve: 36.67 gradosC. Quiere decir que 98 grados fahrenheit equivalen a 36.67 gradosC.

Citar
i) ¿Qué significado tiene la expresión offset = offset || 0;?

Quiere decir que el parámetro offset equivaldra al parámetro offset que se le ha pasado en la función y en su defecto valdrá 0.

Citar
j) ¿Cuál es la finalidad del uso de toFixed(2)?

Devuelve un String con el número o variable sobre el que se invoca el método con tantos decimales como indique el parámetro n (toFixed(n)).

Respues extraida de la entrega: CU01156E del curso JavaScript desde cero.

https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=837:convertir-string-a-number-javascript-redondear-tofixed-isnan-toprecision-parseint-parsefloat-cu01156e-&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Citar
k) ¿Por qué crees que se usa el parámetro offset en la función conversor?

Para que haya una expresión arimética y no nos salga el mensaje: NaN.

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>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

function conversor(toUnit, factor, offset, input, fromUnit){
offset = offset || 0;
return [input+' '+fromUnit+' equivalen a: '+((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, 'miles'));
alert(poundsToKg(2.5, 'pounds'));
alert(farenheitToCelsius(98, 'farenheit'));

</script>
</head>
<body>

</body>
</html>
Mi duda sale aquí, por qué cuando paso el parámetro como un parámetro en la función ligada, no funciona? A caso las funciones ligadas tienen un límite de pasarle los parámetros? Por ejemplo, el siguiente código no funciona correctamente y no entiendo por qué:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

function conversor(toUnit, factor, offset, input, fromUnit){
offset = offset || 0;
return [input+' '+fromUnit+' equivalen a: '+((offset+input)*factor).toFixed(2), toUnit].join(' ');
}

var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0, 'miles');
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>
Gracias.

284
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript, addEventListener, función anónima manejadora de eventos CU01177E
« en: 22 de Abril 2016, 12:29 »
Hola, pedro,,

Gracias por otro ejercicio más corregido.

Sí, acabo de mirar el código de bermatinv y está usando un sólo bucle. Además, está utilizando dos funciones, una que colorá el campo sobre el que se ha ejecutado el 'click' y la otra función se activa cuando el campo en cuestión deja de tener el focus, mediante el evento 'blur'. Es interesante.

Debo decir también que el compañero bermartinv siempre tiene un acabado bastante bonito (cuida el diseño), de sus ejercicios.

Gracias.

285
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CU01176E setattribute y getattribute en JavaScript
« en: 22 de Abril 2016, 12:19 »
Buenas tardes, Pedro.

Gracias por el tiempo dedicado y por corregirme el ejercicio.

Tienes razón, código corregido.

Atentamente,

dimiste :)

286
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript, addEventListener, función anónima manejadora de eventos CU01177E
« en: 21 de Abril 2016, 20:38 »
Buenas tardes.

A continuación hago la entrega del ejercicio CU01177E del curso JavaScript desde cero.

Citar
EJERCICIO

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.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
label{
display: block;
margin: 5px;
}
</style>
<script type="text/javascript">

window.onload = function(){
var formularios = document.forms;
for(var i=0; i<formularios[0].elements.length; i=i+3){
if(formularios[0].elements[i].type == 'text'){
formularios[0].elements[i].addEventListener('click',function(elEvento){cambiarColor(elEvento,'yellow',this);});
}
}
for(var i=1; i<formularios[0].elements.length; i=i+3){
if(formularios[0].elements[i].type == 'text'){
formularios[0].elements[i].addEventListener('click',function(elEvento){cambiarColor(elEvento,'blue',this);});
}
}
for(var i=2; i<formularios[0].elements.length; i=i+3){
if(formularios[0].elements[i].type == 'text'){
formularios[0].elements[i].addEventListener('click',function(elEvento){cambiarColor(elEvento,'green',this);});
}
}
}

function cambiarColor(elEvento,elColor,quienEsThis){
quienEsThis.style.backgroundColor = elColor;
}

</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<form action="accion1.html" name="formularioContacto" method="get">
<h2>Formulario de contacto</h2>
<label>Nombre:<input type="text" name="nombre" id="nombreFormContacto" maxlength="4"></label>
<label>Apellidos:<input type="text" name="apellidos" id="apellidosFormContacto"></label>
<label>Correo Electrónico: <input type="text" name="correo" id="correoFormContacto"></label>
<label>Teléfono: <input type="text" name="telefono" id="telefonoFormContacto"></label>
<label>Domicilio: <input type="text" name="domicilio" id="domicilioFormContacto"></label>
<label>País: <input type="text" name="pais" id="paisFormContacto"></label>
<label><input type="submit" value="Enviar" id="botonEnvio1"></label>
</form>
</body>
</html>
Gracias

287
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScriptscript recorrer todos los input de un form set y getattribute CU01176E
« en: 21 de Abril 2016, 18:07 »
Buenas tardes. Os dejo una posible solución del ejercicio CU01176E del curso JavaScript desde cero.

Citar
Dado el siguiente código HTML:

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;}</style>

</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>

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

Y el código modificado según los requisitos del ejercicio:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
label{
display: block;
margin: 5px;
}
</style>
<script type="text/javascript">

var formularios;

window.onload = function(){
formularios = document.forms;
document.getElementById('ejemplo').addEventListener('click',comprobar);
}

function comprobar(){
var msg = '';
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'){
formularios[i].elements[j].setAttribute('maxlength',8);
msg = msg+'El elemento con id: '+formularios[i].elements[j].id+' tiene atributo maxlength modificado en: '+formularios[i].elements[j].getAttribute('maxlength')+'\n\n';
}
}
}
alert(msg);
}

</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div id="ejemplo" style="color: blue; margin: 20px;">Pulsa aquí</div>
<form action="accion1.html" method="get" name="formularioContacto">
<h2>Formulario de contacto</h2>
<label>Nombre:<input type="text" name="nombre" id="nombreFormContacto" maxlength="4"></label>
<label>Apellidos:<input type="text" name="apellidos" id="apellidosFormContacto"></label>
<label><input type="submit" value="Enviar" id="botonEnvio1"></label>
</form>
<form action="accion2.html" name="formularioReclamacion" method="get">
<h2>Formulario de reclamación</h2>
<label>Motivo reclamación:<input type="text" name="motivo" id="motivoFormReclama"></label>
<label>Fecha del hecho:<input type="text" name="fecha" id="fechaFormReclama"></label>
<label><input type="submit" value="Enviar" id="botonEnvio2"></label>
</form>
</body>
</html>
Gracias

288
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E
« en: 21 de Abril 2016, 14:53 »
Hola, de nuevo.

Creo que he conseguido el cometido del segundo ejercicio de la entrega CU001175E.

A continuación adjunto el código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var parrent = /\w{3,}/;

var nombre;
var apellidos;
var correo;
var ciudad;
var pais;

window.onload = function(){
nombre = document.formularioContacto.nombre.value;
apellidos = document.formularioContacto.apellidos.value;
correo = document.formularioContacto.correo.value;
ciudad = document.formularioContacto.ciudad.value;
pais = document.formularioContacto.pais.value;
}

function comprobar(){
nombre = parrent.test(nombre);
apellidos = parrent.test(apellidos);
correo = parrent.test(correo);
ciudad = parrent.test(ciudad);
pais = parrent.test(pais);
if(!nombre || !apellidos || !correo || !ciudad || !pais){
alert('Todos los campos son obligatorio y tienen que tener más de 2 carácteres');
return false;
}
}

</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<form action="accion1.html" method="get" name="formularioContacto" onsubmit="return comprobar()">
<h2>Formulario de contacto</h2>
<label>Nombre: <input type="text" name="nombre" id="nombreFormContacto"></label><br><br>
<label>Apellidos: <input type="text" name="apellidos" id="apellidosFormContacto"></label><br><br>
<label>Email: <input type="text" name="correo" id="correoFormContacto"></label><br><br>
<label>Ciudad: <input type="text" name="ciudad" id="ciudadFormContacto"></label><br><br>
<label>País: <input type="text" name="pais" id="paisFormContacto"></label><br><br>
<label><input type="submit" value="Enviar" id="botonEnvio1"></label>
</form>
</body>
</html>
Sobre las variables globales, creo que de la forma que he hecho el código son necesarias.

Gracias.

Saludos.

289
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E
« en: 21 de Abril 2016, 14:10 »
Buenas, Mario.

Gracias, de nuevo, por corregirme el ejercicio. Tomo nota sobre el segundo ejercicio, lo haré de nuevo y lo subiré en el mismo hilo.

Pues, manos a la hora.

Un saludo.

290
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Crear un movimiento sinusoidal en JavaScript efecto desplazamiento CU01174E#
« en: 21 de Abril 2016, 14:08 »
Hola, Mario.

Primero que nada, gracias por el tiempo dedicado y por la corrección.

Sobre "experto", era una manera de refererme a tí, pero tampoco veo que se llamen las cosas por su propio nombre :) Para poder hacer una página como "aprenderaprogramar.com" y mantanerla y, sobre todo, tener ese contenido tan bueno, que yo lo calificaría como excelente, hay que ser un experto :)

Saludos.

291
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Error: Permission denied to access property "innerHeight" JavaScript CU01173E
« en: 21 de Abril 2016, 14:06 »
Buenas tardes, Mario.

Gracias por corregirme el ejercicio y por explicarme por qué motivo podrían producirse los errores.

Miré el enlace que me comentas en tu respuesta y veo que que también el compañero pedro,, como otros compañeros han tenido algún que otro problema a la hora de resolver este ejericicio.

Gracias por tu tiempo.

Atentamente,

dimiste.

292
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript No usar variables globales sin ser estrictamente necesarias CU01175E
« en: 12 de Abril 2016, 21:58 »
Buenas noches. Os dejo una posible solución del ejercicio CU01175E del curso JavaScript desde cero.

Citar
EJERCICIO

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>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var parrent = /\w{3,}/;

function comprobar(){
var formulario = document.forms[0];
for(var i=0;i<formulario.elements.length-1;i++){
if(!parrent.test(formulario.elements[i].value)){
alert('Todos los campos son obligatorio y tienen que tener más de 2 carácteres');
return false;
};
}
}

</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<form action="accion1.html" method="get" name="formularioContacto" onsubmit="return comprobar()">
<h2>Formulario de contacto</h2>
<label>Nombre: <input type="text" name="nombre" id="nombreFormContacto"></label><br><br>
<label>Apellidos: <input type="text" name="apellidos" id="apellidosFormContacto"></label><br><br>
<label>Email: <input type="text" name="correo" id="correoFormContacto"></label><br><br>
<label>Ciudad: <input type="text" name="ciudad" id="ciudadFormContacto"></label><br><br>
<label>País: <input type="text" name="pais" id="paisFormContacto"></label><br><br>
<label><input type="submit" value="Enviar" id="botonEnvio1"></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>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var parrent = /\w{3,}/;
var nombre;
var apellidos;
var correo;
var ciudad;
var pais;

window.onload = function(){
nombre = parrent.test(document.formularioContacto.nombre.value);
apellidos = parrent.test(document.formularioContacto.apellidos.value);
correo = parrent.test(document.formularioContacto.correo.value);
ciudad = parrent.test(document.formularioContacto.ciudad.value);
pais = parrent.test(document.formularioContacto.pais.value);
}

function comprobar(){
if(!nombre || !apellidos || !correo || !ciudad || !pais){
alert('Todos los campos son obligatorio y tienen que tener más de 2 carácteres');
return false;
}
}

</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<form action="accion1.html" method="get" name="formularioContacto" onsubmit="return comprobar()">
<h2>Formulario de contacto</h2>
<label>Nombre: <input type="text" name="nombre" id="nombreFormContacto"></label><br><br>
<label>Apellidos: <input type="text" name="apellidos" id="apellidosFormContacto"></label><br><br>
<label>Email: <input type="text" name="correo" id="correoFormContacto"></label><br><br>
<label>Ciudad: <input type="text" name="ciudad" id="ciudadFormContacto"></label><br><br>
<label>País: <input type="text" name="pais" id="paisFormContacto"></label><br><br>
<label><input type="submit" value="Enviar" id="botonEnvio1"></label>
</form>
</body>
</html>
Gracias.

293
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear un movimiento sinusoidal en JavaScript efecto desplazamiento CU01174E#
« en: 12 de Abril 2016, 16:55 »
Buenas tardes.

Expongo una posible solución del ejercicio CU01174E del curso JavaScript desde cero.

Citar
EJEMPLO Y EJERCICIO

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" coloca el objeto window en una posición valorX en horizontal, en píxeles, respecto de la esquina superior izquierda de la pantalla. Si su valor inicial es 0 es decir que el objeto window se colocará en 0px respecto de la esquina superior izquierda de la pantalla.

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

La variable "positionY" coloca el objeto window en una posición valorY en vertical, en píxeles, respecto de la esquina superior izquierda de la pantalla. Su valor inicial coloca el objeto window en el medio de la pantalla. Con la propiedad window.innerHeight optenemos la altura de la pantalla, después lo dividimos entre dos y así tenemos la mitad. Como la nueva ventana tiene una altura de 250px para poder colocarlo exactamente en la mitad de la pantalla tenemos que restar de la mitad de la pantalla la mitad de la altura del nuevo objeto window.

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

1000/30 milisegundos, es decir, 33,33 milisegundos.

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

2px.

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

Citar
La base matemática es que la función seno toma valores entre 0, 1, -1 describiendo una forma de onda, conforme se incrementan sus valores.

En cada redibujado de la ventana su posición Y varía de acuerdo con esto:

controlSinusoidal = controlSinusoidal + Math.PI/256;
  positionY = 100*Math.sin(controlSinusoidal);

Las operaciones se hacen en radianes. controlSinusoidal se ha establecido en 0 al inicializarlo y cada vez que se redibuja la ventana se incrementa un poco. La posición Y se actualiza en base al seno de ese valor que se va incrementando, y de esa manera se describe una curva sinusoidal.

Explicado por el experto Mario R. Rancel en el hilo:

https://www.aprenderaprogramar.com/foros/index.php?topic=3615.msg15703#msg15703

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>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var start = 0;
var positionY = window.innerHeight/2-215;
var nuevaVentana;
var controlSinusoidal = 0;
var movimiento;

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);
movimiento = 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);
if(start==window.innerWidth-nuevaVentana.outerWidth){
nuevaVentana.clearInterval(movimiento);
alert('Se terminó!');
}
}

</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div id="ejemplo" style="color: blue; margin: 20px;">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>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var start = 0;
var positionY = window.innerHeight/2-215;
var nuevaVentana;
var controlSinusoidal = 0;
var movimiento;
var haciaDerecha = true;

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);
movimiento = nuevaVentana.setInterval(sine, 1000/30);
}

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

</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div id="ejemplo" style="color: blue; margin: 20px;">Pulsa aquí</div>
</body>
</html>
Gracias.

294
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Error: Permission denied to access property "innerHeight" JavaScript CU01173E
« en: 12 de Abril 2016, 14:04 »
Buenas tardes.

Aquí os dejo una posible solución del ejercicio CU01173E del curso JavaScript desde cero.

Citar
El siguiente código crea una ventana cuando se pulsa en el texto “Pulsa aquí”. Esta ventana es asignada a una variable u objeto denominado nuevaVentana. Queremos conocer las siguientes propiedades del objeto nuevaVentana y mostrarlas por pantalla: si está cerrada o no, dimensiones del viewport, número de frames presentes en ella, url a la que apunta, valor de name, dimensiones de la ventana completa hasta los bordes exteriores y cuántos píxeles está desplazada en horizontal y vertical respecto al punto origen de la pantalla

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();

}

</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ñade el código JavaScript necesario para mostrar esta información por pantalla.

La solución:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var nuevaVentana = 33;

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

function ejecutarEjemplo(){
nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', 'width=300, height=300, resizable=true, menubar=yes');
nuevaVentana.focus();
var datosNuevaVentana = function (){
alert('La ventana está cerrada?: '+nuevaVentana.closed+'\nLa altura, en píxeles, de la nueva ventana es: '+nuevaVentana.innerHeight+'\nLa anchura, en píxeles, de la nueva ventana es: '+nuevaVentana.innerWidth+'\nNúmero de frames: '+nuevaVentana.length+'\nLa url de la nueva ventana es: '+nuevaVentana.location.href+'\nEl nombre de la nueva ventana es: '+nuevaVentana.name+'\nLa altura, en píxeles, de la nueva ventana completa hasta el límite exterior de sus bordes es: '+nuevaVentana.outerHeight+'\nLa anchura, en píxeles, de la nueva ventana completa hasta el límite exterior de sus bordes es: '+nuevaVentana.outerWidth+'\nLa coordenada X relativa a la pantalla es: '+nuevaVentana.screenX+'\nLa coordenada Y relativa a la pantalla es: '+nuevaVentana.screenY);
};
datosNuevaVentana();
}

function comprobar(){
nuevaVentana.focus();
alert('La ventana está cerrada?: '+nuevaVentana.closed+'\nLa altura, en píxeles, de la nueva ventana es: '+nuevaVentana.innerHeight+'\nLa anchura, en píxeles, de la nueva ventana es: '+nuevaVentana.innerWidth+'\nNúmero de frames: '+nuevaVentana.length+'\nLa url de la nueva ventana es: '+nuevaVentana.location.href+'\nEl nombre de la nueva ventana es: '+nuevaVentana.name+'\nLa altura, en píxeles, de la nueva ventana completa hasta el límite exterior de sus bordes es: '+nuevaVentana.outerHeight+'\nLa anchura, en píxeles, de la nueva ventana completa hasta el límite exterior de sus bordes es: '+nuevaVentana.outerWidth+'\nLa coordenada X relativa a la pantalla es: '+nuevaVentana.screenX+'\nLa coordenada Y relativa a la pantalla es: '+nuevaVentana.screenY);
}

function comprobarNuevaVentana(){
alert(nuevaVentana);
}

</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo JavaScript</h3>
</div>
<div id="ejemplo" style="color: blue; margin: 20px;">Pulsa aquí</div>
<div onclick="comprobar()">Comprobar</div>
<div onclick="comprobarNuevaVentana()">Comprobar valor nuevaVentana</div>
</body>
</html>
He creado dos funciones de más. El cometido de la función "comprobar()" es ver si puedo acceder a las propiedades y métodos de la variable "nuevaVentana". La conclusión es que a algunos puedo y a otros no. Concretamente, a las propiedades relacionadas con las dimensiones de la nueva ventana, como "nuevaVentanta.innerWidth" no puedo acceder si no es desde la misma función que crea la nueva ventana.

No sé porque se produce dicho fenómeno. Pienso que es porque al hacer click sobre el div que lleva asociada la función "comprobar()" la ventana creada pierde el focus y es inaccesible para el navegador. La depuradora del navegador me da el siguiente error:
 "permission denied to access property...".

La otra función "comprobarNuevaVentana" la creé para comprobar si puedo acceder a la variable "nuevaVentana". Por eso también definí dicha variable como global y no como local. Antes de crear la nueva ventana y que la variable apuntara hacia la misma si se puede acceder a la variable, pero después de dicha creación ya me de el error: "permission denied to access property Symbol". No entiendo porque se produce ese comportamiento. Lo único que se me ocurre es porque la nueva ventanta pierda focus, pero no estoy seguro. No estoy muy convencido de ello, porque en la función "comprobar" invoco nuevamente el método "nuevaVentana.focus()" y tampoco me permite acceder a según qué propiedades de la nueva ventana.

Gracias.

295
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Retroceder página anterior navegador código window.history JavaScript CU01172E
« en: 11 de Abril 2016, 13:06 »
Buenas tardes, Mario.

Acabo de ver el hilo que me habías adjuntado. Por lo visto le ha pasado a más compañeros míos. Así que es según la página relacionada con el iframe y no tiene nada que ver con el código.

Gracias por corregirme el ejercicio y por la dedicación de tu tiempo.

Saludos.

296
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript TypeError: document.getElementById(...)is null closure CU01169E
« en: 08 de Abril 2016, 09:38 »
Buenas, César.

Antes que nada, gracias por tu ayuda y por corregirme el ejercicio.

Es verdad, se me olvida siempre, en Java compilamos y tenemos compilador y en JavaScript no compilamos, sino que interpretamos, jeje.

Saludos :)

297
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript calcular el intervalo de tiempo que falta para una fecha CU01167E
« en: 08 de Abril 2016, 09:35 »
Buenos días, César.

Gracias por corregir el ejercicio.

Tienes razón, es un lenguaje interpretado, no compilado. Quería decir que está consumiendo muchos recursos de la memoría del navegador.

Sobre que una función hace dos cometidos, quería decir que normalmente en programación cada función tiene su objetivo, meta, cometido. Cuando hacemos un código, habitualmente, intentamos que cada función tenga su objetivo, para así, después poder reutilizarse el código de dicha función si lo necesitamos. Si una función hace dos o más objetivos, posteriormente es difícil que necesitemos en otro caso justo estos dos objetivos. Por lo tanto, es mejor cada función con un cometido.

Gracias

298
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Retroceder página anterior navegador código window.history JavaScript CU01172E
« en: 07 de Abril 2016, 13:06 »
Buenas tardes. Aquí os dejo una posible solución del ejercicio CU01172E del curso JavaScript desde cero.

Citar
EJERCICIO

Crea una página web que muestre en el lado izquierdo tres opciones donde podrá pulsar el usuario: clarin.com, elmercurio.cl y elespectador.com. En la parte inferior izquierda, debajo de estas opciones, habrá un frame donde deberá cargarse la página web según elija el usuario (por ejemplo si el usuario pulsa en elmercurio.cl en el frame que se encuentra debajo deberá mostrarse la web de elmercurio.cl). En el lado derecho estarán las opciones eluniversal.com.mx, elcomercio.pe y elmundo.es. En la parte inferior derecha, debajo de estas opciones, habrá un frame donde deberá cargarse la página web según elija el usuario.

El código JavaScript:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
div{
border: solid;
position: relative;
float: left;
border-radius: 40px;
background-color: yellow;
font-size: 24px;
padding: 2px;
}
</style>
<script type="text/javascript">

window.onload = function(){
var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].addEventListener('click',cambiarSrc);
}
}

function cambiarSrc(){
var iframes = document.getElementsByTagName('iframe');
var divs = this.id;
switch(divs){
case 'div01':
iframes[0].src = 'http://clarin.com';
break;
case 'div02':
iframes[1].src = 'http://eluniversal.com.mx';
break;
case 'div03':
iframes[0].src = 'http://elmercurio.cl';
break;
case 'div04':
iframes[1].src = 'http://elcomercio.pe';
break;
case 'div05':
iframes[0].src = 'http://elespectador.com';
break;
case 'div06':
iframes[1].src = 'http://elmundo.es';
break;
}
}


</script>
</head>
<body>
<div id="div01"><a href="#">clarin.com</a></div>
<div style="float: right" id="div02"><a href="#">eluniversal.com.mx</a></div><br><br>
<div id="div03"><a href="#">elmercurio.cl</a></div>
<div style="float: right" id="div04"><a href="#">elcomercio.pe</a></div><br><br>
<div id="div05"><a href="#">elespectador.com</a></div>
<div style="float: right" id="div06"><a href="#">elmundo.es</a></div><br><br><br>
<iframe src="" frameborder="1" width="500" height="500"></iframe>
<iframe src="" frameborder="1" style="float: right;" width="500" height="500"></iframe>
</body>
</html>
Lo que no entiendo porque en el primer iframe no se muestra el scroll de abajo.

Gracias.

299
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / redireccionar y recargar webs en JavaScript window.location.assign CU01171E
« en: 06 de Abril 2016, 18:37 »
Hola. Aquí os dejo una posible solución del ejercicio CU01171E del curso JavaScript desde cero.

Citar
EJERCICIO

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>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
*{
font-size: 40px;
text-align: center;
}
</style>
<script type="text/javascript">

var cuenta = setInterval(cuentaAtras, 1000);
var i = 4;

function cuentaAtras(){
var span = document.getElementsByTagName('span');
span[1].textContent = i;
i--;
if(i<0){
clearInterval(cuenta);
window.location.assign('http://aprenderaprogramar.com');
}
}

/*setTimeout(redireccionamiento, 5000);

function redireccionamiento(){
window.location.assign('http://aprenderaprogramar.com')
}*/

</script>
</head>
<body>
<div><span>Hemos cambiado de ubicación esta página. En <span style="color: red">5</span> será redireccionado…</span></div>
</body>
</html>
La parte comentada es porque se puede hacer de esta manera también. Sólo se tendrán que descomentar las líneas comentadas y dejarse la function cuentaAtras() así:

Código: [Seleccionar]
function cuentaAtras(){
var span = document.getElementsByTagName('span');
span[1].textContent = i;
i--;
if(i<0){
clearInterval(cuenta);
}
}

Gracias

300
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Cómo saber qué navegador usa el usuario de una web con JavaSCript CU01170E
« en: 06 de Abril 2016, 17:37 »
Buenas tardes. Propongo una posible solución del ejercicio CU01170E del curso JavaScript desde cero.

Citar
EJERCICIO

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.

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

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">


var detectarNavegador = window.navigator.userAgent;
var chrome = /Chrome/;
var firefox = /Firefox/;
var opera = /OPR/;
var edge = /Edge/;
var safari = /Safari/;
var navegador;
if(chrome.test(detectarNavegador) && !(opera.test(detectarNavegador)) && !(edge.test(detectarNavegador))){
navegador = 'Google Chrome';
}else if(firefox.test(detectarNavegador)){
navegador = 'Firefox Mozilla';
}else if(safari.test(detectarNavegador) && !(chrome.test(detectarNavegador))){
navegador = 'Apple Safari';
}else if(opera.test(detectarNavegador)){
navegador = 'Opera';
}else if(edge.test(detectarNavegador)){
navegador = 'Microsoft Edge';
}else{
navegador = 'un navegador desconocido';
}
alert('Detectado tu navegador con Expresión Regular.\nEstás usando: '+navegador);


if(detectarNavegador.indexOf('Chrome')!=-1 && detectarNavegador.indexOf('OPR')==-1 && detectarNavegador.indexOf('Edge')==-1){
navegador = 'Google Chrome';
}else if(detectarNavegador.indexOf('Firefox')!=-1){
navegador = 'Firefox Mozilla';
}else if(detectarNavegador.indexOf('Safari')!=-1 && detectarNavegador.indexOf('Chrome')==-1){
navegador = 'Apple Safari';
}else if(detectarNavegador.indexOf('OPR')!=-1){
navegador = 'Opera';
}else if(detectarNavegador.indexOf('Edge')!=-1){
navegador = 'Microsoft Edge';
}else{
navegador = 'un navegador Desconocido';
}
alert('Detectado tu navegador con "indexOf".\nEstás usando: '+navegador)


</script>
</head>
<body>
</body>
</html>
He intentado por pasiva y por activa hacer que no se me bloquee el JavaScript en Internet Explorer, pero no he querido perder más tiempo. Por eso he sustituido el mencionado por el Microsoft Edge.

Gracias

Páginas: 1 ... 10 11 12 13 14 [15] 16 17 18 19 20 ... 30

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