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

Páginas: [1]
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript innerHTML tabla dinámica editar filas permitir cambios (CU01139E)
« en: 13 de Marzo 2016, 22:11 »
Hola, acabo de terminar el ejercicio, he de decir que me ha costado bastante ya que no tenia mucha idea de como hacerlo, aunque es la primera vez que uso "this". Bueno aunque vi el ejercicio resuelto, seguí la linea de lo que ya había hecho y eso es lo que salió.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio tabla editable</title>
    <link rel="stylesheet" href="css/editar-tabla-estilos.css">
    <script src="js/funciones.js"></script>
</head>
<body>
   <section>
       <table id="tabla">
           <tr>
               <th>Alimento</th>
               <th>Calorias (kCal)</th>
               <th>Grasas (g)</th>
               <th>Proteínas (g)</th>
               <th>Carbohidratos (g)</th>
               <th>Acciones</th>
           </tr>
           
           <tr>
               <td>Arándano</td>
               <td>49</td>
               <td>0.2</td>
               <td>0.4</td>
               <td>12.7</td>
               <td><span onclick="transformEditar(this)">Editar</span></td>
           </tr>
           
           <tr>
               <td>Plátano</td>
               <td>90</td>
               <td>0.3</td>
               <td>1.0</td>
               <td>23.5</td>
               <td><span onclick="transformEditar(this)">Editar</span></td>
           </tr>
           
           <tr>
               <td>Ceréza</td>
               <td>46</td>
               <td>0.4</td>
               <td>0.9</td>
               <td>10.9</td>
               <td><span onclick="transformEditar(this)">Editar</span></td>
           </tr>
           
           <tr>
               <td>Fresa</td>
               <td>37</td>
               <td>0.5</td>
               <td>0.8</td>
               <td>8.3</td>
               <td><span onclick="transformEditar(this)">Editar</span></td>
           </tr>
       </table>
       <form action="#" name="formulario1" id="formulario1" method="get" onreset="anular()">
           <div class="botones">
               <p>Pulse Aceptar para guardar los cambios o cancelar para anularlos</p>
               <input type="button" onclick="enviarForm()" class="btn-aceptar" value="Aceptar">
               <input type="reset" class="btn-cancelar" value="Cancelar">   
           </div>
       </form>
       <div id="hidden-form">
           
       </div>
   </section>
</body>
</html>

Código: [Seleccionar]
section {
    width: 750px;
    overflow-x: auto;
}
table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: left;
}
#tabla th {
    background: #1E90FF;
    color: #fff;
    padding-top: 11px;
    padding-bottom: 11px;
}
th, td {
    padding: 8px;
    border: 1px solid #aaaaaa;
}
span {
    color:#337ab7;
    cursor: default;
}
.en-edicion {
    color: #e61717;
}
.btn-aceptar, .btn-cancelar {
    padding: 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all ease 1s;
}
.btn-aceptar {
    background: #1E90FF;
    border: 1px solid #1777d4;
    color: #FFFFFF;
}
.btn-cancelar {
    background: #cccccc;
    border: 1px solid #b4b4b4;
    color: #000000;
}
.btn-aceptar:hover {
    background: #286090;
}
.btn-cancelar:hover {
    background: #b7b4b4;
}
.botones {
    text-align: right;
    margin-top: 8px;
    margin-right: 8px;
    display: none;
}
Código: [Seleccionar]
var editando = false;

function transformEditar(nodo) {
    if (editando == true) {alert('Solo se puede editar una línea. Pulse Cancelar para poder editar otra');}
    else {
    var tr = nodo.parentNode.parentNode;
    var valPorDef = tr.querySelectorAll('td');
    tr.innerHTML = '<td><input type="text" name="alimento" id="alimento" size="6" value="' + valPorDef[0].textContent + '"></td><td><input type="text" name="calorias" id="calorias" size="5" value="' + valPorDef[1].textContent + '"></td><td><input type="text" name="grasas" id="grasas" size="5" value="' + valPorDef[2].textContent + '"></td> <td><input type="text" name="proteinas" id="proteinas" size="5" value="' + valPorDef[3].textContent + '"></td><td><input type="text" name="carbohidratos" id="carbohidratos" size="5" value="' + valPorDef[4].textContent + '"></td><td><span class="en-edicion">En edición</span></td>';
    document.querySelector('.botones').style.display = 'block';
    editando = true;
    }
}

function anular () {
    window.location.reload();
}

function enviarForm () {
    document.querySelector('#hidden-form').innerHTML =       
    '<input type="hidden" form="formulario1" name="alimento" value="'+document.querySelector('#alimento').value+'">'+
    '<input type="hidden" form="formulario1" name="calorias" value="'+document.querySelector('#calorias').value+'">'+
    '<input type="hidden" form="formulario1" name="grasas" value="'+document.querySelector('#grasas').value+'">'+
    '<input type="hidden" form="formulario1" name="proteinas" value="'+document.querySelector('#proteinas').value+'">'+
    '<input type="hidden" form="formulario1" name="carbohidratos" value="'+document.querySelector('#carbohidratos').value+'">';
    document.getElementById('formulario1').submit();
}
Me pareció que no era necesario crear una variable para cada nombre del valor asi que me "ahorré" esas lineas de código.
Código: [Seleccionar]
var alimento = nodosEnTr[0].textContent; var calorias = nodosEnTr[1].textContent;
var grasas = nodosEnTr[2].textContent; var proteina = nodosEnTr[3].textContent;
var carbohidratos = nodosEnTr[4].textContent; var opciones = nodosEnTr[5].textContent;
No quise usar onsubmit(); porque me da la sensación de que le estamos instruyendo que envie el formulario 2 veces, una con el boton y otra con la funcion javascript, no se lo que influye en la realidad.
un saludo.

2
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Modificar el contenido de una web con textContent JavaScript ejemplo CU01136E
« en: 06 de Marzo 2016, 21:23 »
Hola. Envío mi ejercicio CU01136E del tutorial JavaScript desde cero para comprobarlo.

Citar
Crea un documento html con un texto en una etiqueta h1 como “Ejercicio curso aprenderaprogramar.com” y un div a continuación. Genera un script que pida cinco números al usuario usando un bucle for normal (usa prompt para pedir los datos y conviértelos a valor numérico posteriormente). Almacena los números introducidos por el usuario en un array. A continuación, accede al nodo del div y establece que muestre un texto informando del resultado de multiplicar cada uno de los números por 3 (para ello usa textContent).

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio textContent</title>
    <script>
        function ejemplo () {
            var introducNumeros = [];
            for (i = 0; i<5; i++) {
                introducNumeros[i] = Number(prompt("Introduce un número"));
            }

            var numMultiplicados = "Tus numeros se han multiplicado por 3: ";
            var lugar = document.getElementById('place');
            for (j in introducNumeros) {
                var calc = introducNumeros[j] * 3;
                numMultiplicados = numMultiplicados + introducNumeros[j] + ' X 3 = ' + calc + ', ';
            }
            lugar.textContent = numMultiplicados;
        }
        window.addEventListener('load', ejemplo, false);
    </script>
</head>
<body>
   <h1>Ejercicio curso aprenderaprogramar.com</h1>
   <div id="place"></div>
   
</body>
</html>
Un saludo

3
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript pedir números al usuario con prompt recorrer array for in CU01135E
« en: 02 de Marzo 2016, 00:03 »
Aqui dejo mi pequeño codigo del ejercicio for for in.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>For, for in</title>
    <script>
        function forForIn () {
            var coleccion = [];
            var msg = 'Numeros multiplicado por 5 = ';

            for (i = 0; i<5; i++){
                coleccion[i] = Number(prompt('Introducir numero'));
            }

            for (j in coleccion) {
                var multiplicar = coleccion[j] * 5;
                msg += multiplicar + ', ';
            }
            alert('Numeros introducidos = ' + coleccion + '\n' + msg);
        }
        window.onload = forForIn ();
    </script>
</head>
<body>
   
</body>
</html>

4
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript seleccionar nodos HTML CSS querySelectorAll y QuerySelector CU01134E
« en: 27 de Febrero 2016, 16:49 »
Hola, dejo el ejercicio realizado CU01134E del curso JavaScript desde cero. De primeras usar querySelector parece simple porque es igual que usar CSS. No usé querySelectorAll dado que solo había un elemento con su respectivo nombre.

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

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center;}
#calculadora {    font: bold 14px Arial,sans-serif; background-color: #9DD2EA;
border-radius: 3px; height: auto; margin: 0 auto;  padding: 20px 20px 9px; width: 295px;
}
.parteSuperior .pantalla {
background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFFFFF; float: right; font-size: 17px;
height: 40px; letter-spacing: 1px; line-height: 40px; padding: 0 10px; text-align: right; width: 180px;
}
.teclas, .parteSuperior {overflow: hidden; }
.teclas span, .parteSuperior span.limpiar {     background-color: #FFFFFF; border-radius: 3px; color: #888888;
 cursor: pointer; float: left; height: 36px; line-height: 36px; margin: 0 7px 11px 0;
 text-align: center; transition: all 0.4s ease 0s; width: 66px;
}
.parteSuperior span.limpiar { background-color:#FF7C87;}
.teclas span.operador { background-color: #FFDAB9; margin-right: 0; }
.teclas span.igual { background-color: #F1FF92; color: #888E5F;}
.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }
.teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover { background-color: #9C89F6;
color: #FFFFFF; }
 
#contenedor {width:285px;margin: 40px auto; overflow:hidden;}
#marcaNumeros, #marcaOperadores, #marcarC, #marcarPunto, #marcarPantalla {padding:15px; width: 90px; display: inline-block;
margin: 10px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#marcaNumeros:hover, #marcaOperadores:hover, #marcarC:hover, #marcarPunto:hover, #marcarPantalla:hover {background: rgb(66, 184, 221);}
</style>
 
<script type="text/javascript">
 
function marcarOperadores() {
var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
var nodoIgual = document.querySelector (".igual");
       for (var i=0; i<listaNodosOperadores.length; i++) {
                listaNodosOperadores[i].style.backgroundColor = "yellow";
                listaNodosOperadores[i].style.color = "black";
                listaNodosOperadores[i].style.border = "solid 1px";
                }
                nodoIgual.style.backgroundColor = "yellow";
                nodoIgual.style.color = "black";
                nodoIgual.style.border = "solid 1px";
}
 
function marcarNumeros() {
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
       for (var i=0; i<listaNodosNumeros.length; i++) {
                listaNodosNumeros[i].style.backgroundColor = "black";
                listaNodosNumeros[i].style.color = "white";
                listaNodosNumeros[i].style.border = "solid 1px";
                }
}
function marcarC () {
    var teclaC = document.querySelector('#calculadora .parteSuperior span.limpiar');
    teclaC.style.backgroundColor = "red";
    teclaC.style.color = "#fff";
}
function marcarPunto () {
    var teclaPunto = document.querySelector('.teclas .punto');
    teclaPunto.style.backgroundColor = '#9400D3';
    teclaPunto.style.color = '#fff';
}
    function marcarPantalla () {
    var pantalla = document.querySelector('.pantalla');
    pantalla.style.backgroundColor = '#0000ff';
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</div>
<!-- Calculadora -->
<div id="calculadora">
                <!-- pantalla y tecla limpiar -->
                <div class="parteSuperior">
                               <span class="limpiar" onclick="pulsada('C')">C</span>
                               <div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
                </div>
               
                <div class="teclas">
                               <!-- operadores y otras teclas -->
                               <span class = "numero" onclick="pulsada('7')">7</span>
                               <span class = "numero" onclick="pulsada('8')">8</span>
                               <span class = "numero" onclick="pulsada('9')">9</span>
                               <span class="operador" onclick="pulsada('+')">+</span>
                               <span class = "numero" onclick="pulsada('4')">4</span>
                               <span class = "numero" onclick="pulsada('5')">5</span>
                               <span class = "numero" onclick="pulsada('6')">6</span>
                               <span class="operador" onclick="pulsada('-')">-</span>
                               <span class = "numero" onclick="pulsada('1')">1</span>
                               <span class = "numero" onclick="pulsada('2')">2</span>
                               <span class = "numero" onclick="pulsada('3')">3</span>
                               <span class="operador" onclick="pulsada('/')">÷</span>
                               <span class = "numero" onclick="pulsada('0')">0</span>
                               <span class ="punto" onclick="pulsada('.')">.</span>
                               <span class="igual" onclick="pulsada('=')">=</span>
                               <span class="operador" onclick="pulsada('*')">x</span>
                </div>
</div>
<div id="contenedor">
<div id ="marcaNumeros" onclick="marcarNumeros()"> Marcar números </div>
<div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
<div id="marcarC" onclick="marcarC()">Marcar tecla "C"</div>
<div id="marcarPunto" onclick="marcarPunto()">Marcar tecla "."</div>
<div id="marcarPantalla" onclick="marcarPantalla()">Marcar panatalla</div>
</div>
</body>
</html>
Un saludo

5
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript para qué sirve eval, ejercicio de calculadora y botones CU01133E
« en: 14 de Febrero 2016, 19:04 »
Buenas, este es el ejercicio 1 de la entrega CU01133E del curso de JavaScript. Cambiado el codigo para usar if en vez de switch.

Código: [Seleccionar]
function pulsada (tecla) {
    var listaNodosPantalla = document.getElementsByClassName('pantalla');
    var nodoTextoPantalla = listaNodosPantalla[0].firstChild;

    if (tecla == 'C') {
      nodoTextoPantalla.nodeValue = ' ';
    } else if (tecla == '=') {
      var resultado = eval(nodoTextoPantalla.nodeValue);
      nodoTextoPantalla.nodeValue = resultado;
    } else {
      nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
    }

Ejercicio 2.

El cual no llego a entender del todo el ejemplo, especialmente la parte de eval(llamada) en la parte final. Por qué está allí? Lo he borrado y me ha dado el mismo resultado.
Aún así he intentado hacerlo yo solo.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Botones con eval</title>
<style>
div {
width: 300px;
height: 450px;
margin: auto;
overflow: hidden;
background: rgba(146, 212, 24, .5);
text-align: center;
}
a {
width: 90%;
height: 350px;
background: rgba(245, 245, 245, .8);
margin: 10px auto;
display: block;
}
button {
display: inline-block;
padding: 15px;
margin: 10px 20px 0 20px;
}
</style>
<script type="text/javascript">
function componer (sentido) {
var texto1 = 'Has pulsado el boton';
var aEvaluar = texto1 + ' ' + sentido;
alert (aEvaluar);
eval (aEvaluar);
}
</script>
</head>
<body>
<div>
<a href="#"></a>
<button type="button" onclick="componer('Atras');">Atrás</button>
<button type="button" onclick="componer('Adelante');">Adelante</button>
</div>

</body>
</html>

6
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Galería de imágenes con JavaScript código document.getElementById cambiar src
« en: 07 de Diciembre 2015, 21:05 »
Hola a todos, estoy aprendiendo JavaScript, CSS y HTML. He querido hacer esta galería de imágenes simple. Es verdad que funciona pero está claro que no está creada de la mejor manera. Quería saber como lo haría otra persona que tiene más conocimientos.

No sabía si postearlo en esta parte del foro o en otra, porque no es un ejercicio del curso.

Si alguien me puede ayudar le estaré muy agradecido!

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Practica de Galeria</title>
    <style>
        #gallery-screen {
            width: 400px;
            height: 400px;
            margin: 20px auto;
            padding: 5px;
            border: 1px solid #ddd;
        }
       
        #thumb {
            text-align: center;
        }
       
        #thumb div {
            display: inline-block;
            margin: 0 5px;
            padding: 5px;
            border: 1px solid #ddd;
            width: 90;
            height: 90;
        }
       
        #thumb div:hover {
            border: 1px solid #777;
        }
       
        #thumb div img {
            max-width: 100%;
        }
       
    </style>
   
    <script>
        //GALERIA
    function iniciar () {
        var miniatus1 = document.getElementById('1');
        var miniatus2 = document.getElementById('2');
        var miniatus3 = document.getElementById('3');
        var miniatus4 = document.getElementById('4');
        var foto = document.getElementById('foto');

        miniatus1.addEventListener('click',camb1,false);
        miniatus2.addEventListener('click',camb2,false);
        miniatus3.addEventListener('click',camb3,false);
        miniatus4.addEventListener('click',camb4,false);

        function camb1() {
            foto.src = "http://lorempixel.com/400/400/transport/1";
        }

        function camb2() {
            foto.src = "http://lorempixel.com/400/400/sports/2";
        }

        function camb3() {
            foto.src = "http://lorempixel.com/400/400/food/3";
        }

        function camb4() {
            foto.src = "http://lorempixel.com/400/400/animals/4";
        }
    }
    </script>
   
</head>
<body onload="iniciar()">
    <div class="gallery">
        <div id="gallery-screen">
            <img id="foto" src="http://lorempixel.com/400/400/transport/1" alt="">
        </div>
       
        <div id="thumb">
            <div id="1"><img src="http://lorempixel.com/90/90/transport/1" alt=""></div>
            <div id="2"><img src="http://lorempixel.com/90/90/sports/2" alt=""></div>
            <div id="3"><img src="http://lorempixel.com/90/90/food/3" alt=""></div>
            <div id="4"><img src="http://lorempixel.com/90/90/animals/4" alt=""></div>
        </div>
    </div>
</body>
</html>

7
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript bucle while deletrear una palabra prompt length charAt CU01132E
« en: 04 de Diciembre 2015, 01:55 »
Muy buenas a todos,
Envio mi respuesta para obtener algun feedback.

Citar
EJERCICIO

1) Crea una función que pida una palabra al usuario y usando un bucle while y el método charAt, muestre cada una de las letras que componen la entrada. Por ejemplo si se introduce “ave” debe mostrar:

Letra 1: a             Letra 2: v             Letra 3: e

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"><style type="text/css">body {background-color:white; font-family: sans-serif;}.boton{padding:15px; width: 200px;  text-align:center; clear:both;color: white; border-radius: 40px; background: rgb(202, 60, 60);}</style>


<script type="text/javascript">

function ejemploDoWhile() {
var palabra, msg, i;
palabra = prompt('Introduce una palabra para ser deletreada: ');
i = 0;
msg = '';

while (i < palabra.length) {
msg = msg + 'Letra '+ (i+1) + ': ' + palabra.charAt(i) + '\n';
i++;
}
alert(msg);
}

</script>



</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
<h3 class="boton" onclick="ejemploDoWhile()">Pulsa aquí</h3>
</body></html>
Gracias.

8
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejercicios JavaScript bucle for y propiedad length Dónde colocar script CU01131E
« en: 01 de Diciembre 2015, 00:57 »
Aquí van los ejercicios del curso, entrega CU01131E.

Citar
1) Crea una función que pida una palabra al usuario y usando un bucle for y el método charAt, muestre cada una de las letras que componen la entrada. Por ejemplo si se introduce “ave” debe mostrar:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 4 - bucle for</title>
</head>
<body>
<h1>AprenderAProgramar.Com</h1>

<script>
var texto, msg; //empieza ejercicio 1
var contenedorLetras = [];
msg = '';
texto = prompt('Ingrese un texto');

for (i = 0; i < texto.length; i++) {
contenedorLetras[i] = texto.charAt(i);
}

for (i = 0; i < texto.length; i++) {
msg = msg + 'Letra ' + (i+1) + ': ' + contenedorLetras[i] + '\n\n';
}

alert(msg); //fin ejercicio 1
</script>
</body>
</html>
Citar
2) Crea una función denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de tipo párrafo, muestre el texto que contienen.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 4.2 - bucle for</title>
<style>
div, button {margin-left: 30px;}
section {background: #83fccb; padding: 5px; width: 50%}
</style>
</head>
<body>
<h1>AprenderAProgramar.Com</h1>
<section>
<div>
<p>Tecla</p>
<p>Ordenador</p>
<p>Procesador</p>
<p>Agua</p>
<p>Móvil</p>
<p>Manzana</p>
<p>Pera</p>
<p>Persimón y caqui</p>
</div>
</section>
<button type="button" onclick="mostrarContParrafos();"> Obtener parrafos </button>
<script>
function mostrarContParrafos () { //empieza ejercicio 2
var parrafos = document.getElementsByTagName('p'),
msg = '';

for (i = 0; i < parrafos.length; i++) {
msg = msg + 'El párrafo ' + (i+1) + ' contiene: ' + parrafos[i].firstChild.nodeValue + '\n\n';
}
alert(msg); //fin ejercicio 2

}
</script>
</body>
</html>
Un saludo.

9
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / document.getElementsByName JavaScript comprobar checked en formulario CU01130E
« en: 28 de Noviembre 2015, 23:15 »
Buenas. Mis respuestas:

Citar
a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?

Sí, genera el mismo resultado porque JS trata de obtener el valor booleano aunque nosotros no lo especifiquemos.

Citar
b) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.
c) Utilizando la propiedad length aplicada a la colección de nodos obtenida mediante getElementsByName, modifica el código para que el resultado sea que al enviar el formulario el mensaje que aparezca sea “El número total de animales disponibles era … y usted ha elegido …”.

Para las preguntas b y c los dejo en un mismo código.
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo JavaScript - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:inline-block; padding:5px;}
</style>
<script type="text/javascript">
       
function informarItemsElegidos(nombre1) {

var elementosObtenidos = document.getElementsByName(nombre1);
var msg = 'Animales que ha elegido que le gustan incluye: ';
var elegidos = 0;
           
if (elementosObtenidos[0].checked == true) {
                msg = msg + elementosObtenidos[0].value;
elegidos=elegidos+1;
            }
           
if (elementosObtenidos[1].checked == true && elegidos >= 1) {
                msg = msg + ', ';
msg = msg + elementosObtenidos[1].value;
elegidos=elegidos+1;
} else if (elementosObtenidos[1].checked == true) {
msg = msg + elementosObtenidos[1].value;
elegidos=elegidos+1;
}
           
if (elementosObtenidos[2].checked == true && elegidos >= 1) {
                msg = msg + ', ';
msg = msg + elementosObtenidos[2].value;
elegidos=elegidos+1;
} else if (elementosObtenidos[2].checked == true) {
msg = msg + elementosObtenidos[2].value;
elegidos=elegidos+1;
}

if (elementosObtenidos[3].checked == true && elegidos >= 1) {
msg = msg + ', ';
msg = msg + elementosObtenidos[3].value;
elegidos=elegidos+1;
} else if (elementosObtenidos[3].checked == true) {
msg = msg + elementosObtenidos[3].value;
elegidos=elegidos+1;
}

if (elegidos == 0 ) {
                msg = '¡No ha elegido ningún animal!';
            }
alert (msg);
alert ('El numero de animales disponibles era: ' + elementosObtenidos.length + '\n Y usted ha seleccionado: ' + elegidos);
}
</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 -->
    <div style="width:450px;">
        <form name ="formularioContacto" class="formularioTipo1" method="get" action="" onsubmit="informarItemsElegidos('animal')">
            <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" /></label>
            <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
            <p>Elige los animales que te gusten:</p>
            <input type="checkbox" name="animal" id="leon" value="leon" />
<label for="leon">León &nbsp;&nbsp;&nbsp;    </label>
            <input type="checkbox" name="animal" id="tigre" value="tigre" />
<label for="tigre">Tigre &nbsp;&nbsp;&nbsp; </label>
            <input type="checkbox" name="animal" id="guepardo" value="guepardo" />
<label for="guepardo">Guepardo &nbsp;</label>
            <input type="checkbox" name="animal" id="jaguar" value="jaguar" />
<label for="jaguar">Jaguar </label>
            <label for="email"><span>Correo electrónico:</span>
<input id="email" type="text" name="email" />
</label>
            <label>
                <input type="submit" value="Enviar" />
                <input type="reset" value="Cancelar" />
            </label>
        </form>
    </div>
</body>
</html>

Muchísimas gracias profesores.

10
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript modificar el DOM childNodes firstChild nodeValue style CU01128E
« en: 28 de Noviembre 2015, 08:42 »
Cuando aparecen más índices que elementos realmente existen JavaScript simplemente los ignora.

El código modificado es este.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
.boton-idioma {background: #fd7416; width: 150px; margin: 10px 0 10px 100px; cursor: pointer;}
</style>
<script type="text/javascript">
function cambiarAspecto(elemento) {
var elementosObtenidos = document.getElementsByTagName(elemento);
elementosObtenidos[0].style.backgroundColor = '#FF6633';
elementosObtenidos[1].style.backgroundColor = '#FF9933';
elementosObtenidos[2].style.backgroundColor = '#FFCC33';
}

function cambiarIdioma (elemento2) {
var elementosLabel = document.getElementsByTagName(elemento2);
elementosLabel[0].childNodes[0].firstChild.nodeValue = 'name';
elementosLabel[1].childNodes[0].firstChild.nodeValue = 'surname';
elementosLabel[2].childNodes[0].firstChild.nodeValue = 'E-mail';
}
</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 -->

<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('label')">
<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" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>

<div class="boton-idioma" id="ingles" onclick="cambiarIdioma('label');">Cambiar a ingles</div>
<div class="boton-idioma" id="espanol">cambiar a español</div>
</div>
</body>
</html>

Un saludo.

11
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear slider imágenes JavaScript document.getElementById src alt title CU01127E
« en: 27 de Noviembre 2015, 22:38 »
Hola, quiero comprobar si mis respuestas al ejercicio CU01127E del tutorial son correctas.

1 - El código funciona correctamente.

2 - Lo que ocurre al poner la variable (numeroImagenActual = 9) dentro de la funcion es que siempre que la llamemos se asigna la variable a 9, entonces las condiciones (if numeroImagenActual == 11) e (if numeroImagenActual == 6) nunca se cumplen, entonces el código no funciona correctamente.

3 - El código modificado es el siguiente.

Código: [Seleccionar]
<html><head><title>Curso JavaScript aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function moverImagen(movimiento) {
var numeroImagenActual = 9;
var carousel, valorSrc = [], valorAlt = [], valorTitle = [];
carousel = document.getElementById('imgCarrusel');
valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
valorSrc[1] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
valorSrc[2] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';

valorAlt[0] = 'Camiseta 9 aprenderaprogramar.com';
valorAlt[1] = 'Camiseta 6 aprenderaprogramar.com';
valorAlt[2] = 'Camiseta 11 aprenderaprogramar.com';

valorTitle[0] = 'Diálogo entre informáticos';
valorTitle[1] = 'Desbordado por los números';
valorTitle[2] ='Estudiando programacion';

if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
carousel.src = valorSrc[0];
carousel.alt = valorAlt[0];
carousel.title = valorTitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
carousel.src = valorSrc[1];
carousel.alt = valorAlt[1];
carousel.title = valorTitle[1];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
carousel.src = valorSrc[2];
carousel.alt = valorAlt[2];
carousel.title = valorTitle[2];
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div >
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div>
</body>
</html>

4 - Cuando duplicamos el código solo se cambia la imagen de arriba, porque JavaScript devuelve los primeros elementos con los atributos ID que encuentra.

Muchas gracias a todos.

12
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript childNodes no funciona CU01126E Ejercicio nodos del DOM
« en: 25 de Noviembre 2015, 22:13 »
Buenas tardes,

Estaba tratando de descubrir por qué uno de los codigos no se ejecuta.

Y me he encontrado con que al poner este código, JS deja de funcionar.

Código: [Seleccionar]
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: ' + document.childNodes[1].childNodes[2].childNodes[0].nodeName +'\n\n';
Según parece con (document.childNodes[1]) llegamos a la etiqueta HTML, luego le sigue (.childNodes[2])...
en el índice 0 estaría HEAD, en el 1, BODY y en el 2?? eso existe o es un código erróneo?

Sé que no vamos a acceder a los nodos de este modo pero no esta mal saberlo no? es que también soy muy curioso.

Gracias por la paciencia.

Saludos

13
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript ejemplo if else if función que recibe parámetros y calcula CU01122E
« en: 22 de Noviembre 2015, 23:18 »
Muy buenas a todos alumnos y profesores.

Por fin he terminado este ejercicio, (o al menos eso creo). Estaría agradecido que me comentarais algo al respecto.

También quiero decir que para la segunda parte del ejercicio quise crear la función 2 FUERA de la función 1, e invocar desde esta, pero no me funcionaba, no se por qué. Podía invocarlo pero el array solo tenia valores 'undefined'. Eso a qué se debe? además vi que el compañero si lo pudo hacer. https://www.aprenderaprogramar.com/foros/index.php?topic=3259.msg14389#msg14389

Muchas gracias por leer.

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

<head>
<title>Ejercicio impuestos | aprender a programar.com</title>
<script>
function obtenerImporteConImpuestos (importeSinImpuestos, tipoProducto) {
var importeSinImpuestos, tipoProducto, precioFinal, funcion2;
var importes = [];
importeSinImpuestos = prompt("Ingrese importe");
tipoProducto = prompt("Ingrese tipo de producto (1, 2 ó 3)");
importeSinImpuestos = Number(importeSinImpuestos);
if (tipoProducto == 1) {
precioFinal = importeSinImpuestos * 1.21;
alert('El precio con impuestos es: ' + precioFinal + '€')
} else if (tipoProducto == 2) {
precioFinal = importeSinImpuestos * 1.10;
alert('El precio con impuestos es: ' + precioFinal + '€')
} else if (tipoProducto == 3) {
precioFinal = importeSinImpuestos * 1.05;
alert('El precio con impuestos es: ' + precioFinal + '€')
} else {
alert('El tipo de producto no existe!');
}

obtenerImporteConImpuestos2 (importeSinImpuestos);
alert(importes);
alert(importeSinImpuestos + '€ más impuestos para el tipo de producto 1: ' + importes[1] + '€');
alert(importeSinImpuestos + '€ más impuestos para el tipo de producto 2: ' + importes[2] + '€');
alert(importeSinImpuestos + '€ más impuestos para el tipo de producto 3: ' + importes[3] + '€');

function obtenerImporteConImpuestos2 (importeSinImpuestos){
importes = [undefined, (importeSinImpuestos * 1.21), (importeSinImpuestos * 1.10), (importeSinImpuestos * 1.05)];
return importes;
}
}


</script>
</head>

<body>
<button type="button" onclick="obtenerImporteConImpuestos()">Llamar funcion 1!</button>
</body>
</html>

Páginas: [1]

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