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

Páginas: [1] 2

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Prototype herencia propiedades y métodos Ejercicio resuelto CU01147E#

« en: 12 de Mayo 2020, 16:57 »

Solución propuesta para el tutorial de programación web con JavaScript y editor Notepad++ ejercicio CU01147E.

Citar

Define un tipo de objeto Cometa cuyas propiedades de instancia (específicas de cada objeto) sean diametro, temperatura y nombre. La temperatura será un valor numérico que suponemos está en grados centígrados. Como propiedad común a todos los objetos de tipo cometa define definicionSegunDiccionario (que debe contener la definición de cometa según el diccionario) y como métodos comunes obtenerRadio (que debe devolver el radio) y obtenerTemperaturaFarenheit (que debe devolver el valor de temperatura expresado en grados Farenheit). Crea tres objetos de tipo cometa y comprueba que puedes acceder tanto a las propiedades específicas como a las propiedades comunes y métodos comunes desde cada objeto.

Paso a explicar mi solución:

En primer lugar hice un constructor con las propiedades de nombre, diametro y temperatura con los valores obtenidos a través de los parametros.
Luego creé una propiedad (definicionSegunDiccionario) y dos métodos (obtenerRadio y obtenerTemperaturaFarenheit) comunes a todos los objetos Cometa.
Por último una función ejemeploCometa donde tiene un array con los cometas creados y una serie de alert que irán apareciendo con el cometa respectivo al valor "i" pasado en la función ejemploCometa según el boton que apretemos.

Espero que se entienda el razonamiento...

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Ejercicio CU01147E</title>
        <script>
            function Cometa(nombre, diametro, temperatura){
                this.nombre = nombre;
                this.diametro = diametro;
                this.temperaturaCelsius = temperatura;
            }

            Cometa.prototype = {
                definicionSegunDiccionario: 'Cuerpo celeste del sistema solar de pequeñas dimensiones que, cuando se acerca al Sol, deja tras de sí una cola luminosa de miles de kilómetros.',
                obtenerRadio: function(){
                    var radio = (this.diametro/2);
                    return radio;
                },
                obtenerTemperaturaFarenheit: function(){
                    var temperturaFarenheit = (this.temperaturaCelsius * 1.8) + 32;
                    return temperturaFarenheit;
                }
            };

            function ejemploCometa(i){
                var cometa = [];
                cometa[0] = new Cometa('Halley', 1000, 50);
                cometa[1] = new Cometa('Swan', 550, 100);
                cometa[2] = new Cometa('Atlas', 330, 155);

                alert('La definición de cometa es: ' + cometa[i].definicionSegunDiccionario);
                alert('El cometa ' + cometa[i].nombre + ', tiene un diametro de ' + cometa[i].diametro + ' metros y una temperatura de ' + cometa[i].temperaturaCelsius + '°C.');
                alert('El radio es de ' + cometa[i].obtenerRadio() + ' y la temperatura en Farenheit es de ' + cometa[i].obtenerTemperaturaFarenheit());
            };
        </script>
    </head>
    <body>
        <input type="button" value="Cometa Halley" onclick="ejemploCometa(0)">
        <input type="button" value="Cometa Swan" onclick="ejemploCometa(1)">
        <input type="button" value="Cometa Atlas" onclick="ejemploCometa(2)">
    </body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Crear objeto vacio. Añadir propiedades y métodos. Ejercicio CU01145E

« en: 10 de Mayo 2020, 16:23 »

Respuesta al ejercicio CU01145E del manual de programación JavaScript con ejercicios resueltos de aprenderaprogramar.

Citar

Crea un objeto vacío denominado GestionDeUsuarios y añádele dos métodos: un método preguntarNombre y un método despedir. Al invocar GestionDeUsuarios.preguntarNombre() se debe establecer la propiedad nombre del objeto con un nombre introducido por el usuario y un id de usuario introducido también por el usuario. Al invocar el método GestionDeUsuarios.despedir() se debe mostrar un mensaje de despedida “Hasta luego nombreDeUsuario” donde nombreDeUsuario será el nombre correspondiente.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01145E</title>
    <script>
        var gestionDeUsuarios = {};
        
        gestionDeUsuarios.preguntarNombre = function(){
            this.nombreUsuario = prompt('Introduzca su nombre');
            this.idUsuario = prompt('Introduzca un id personal');
        }

        gestionDeUsuarios.despedir = function(){
            alert('Hasta luego ' + this.nombreUsuario);
        }
    </script>
</head>
<body>
    <input type="button" value="Registrarse" onclick="gestionDeUsuarios.preguntarNombre()">
    <input type="button" value="Salir" onclick="gestionDeUsuarios.despedir()">
</body>
</html>

Citar

Responde la siguiente pregunta: ¿si se crea una función despedir entrará en conflicto con el método definido?

No entrará en conflicto ya que el método despedir solo funciona si se hace referencia al objeto creado, mientras que la función se ejecuta de forma 'global'. Para que la función despedir se ejecute, se llamaría de la siguiente forma:

onclick="despedir()";

En cambio para que el método despedir funciona se haría de la siguiente forma:

onclick="nombreDelObjeto.despedir()";

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Objetos con métodos internos y externos invocar con botón CU01144E

« en: 10 de Mayo 2020, 15:31 »

Dejo las dos soluciones del ejercicio CU01144E del curso de desarrollo web con JavaScript.

Citar

Define un tipo de objeto Medico en JavaScript que tenga como propiedades: nombre (String), personasCuradas (número entero), especialidad (String) y como métodos un método denominado curarPersona y otro método denominado mostrarDatos. El método curarPersona deberá añadir una unidad al valor de la propiedad personasCuradas y el método mostrarDatos deberá mostrar los datos el médico. Por ejemplo, “El médico se llama Juan Eslava, su especialidad es traumatología y lleva curadas 8 personas”. Crea dos objetos del tipo definido, e invoca sus métodos para comprobar que funcionan correctamente.

Crea las dos alternativas de código: métodos con funciones internas anónimas o métodos con referencia a funciones externas.

Método con funciones internas...

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01144E</title>
    <script>
        /* Método con funciones internas */
        function Medico(nombre, personasCuradas, especialidad){
            this.nombre = nombre;
            this.personasCuradas = personasCuradas;
            this.especialidad = especialidad;

            this.curarPersonas = function(){
                this.personasCuradas = this.personasCuradas + 1;
		alert('Persona curada');
            };

            this.mostrarDatos = function(){
                var msg;
                msg = 'El médico se llama '+this.nombre+', su especialidad es '+this.especialidad+' y lleva curadas '+this.personasCuradas+' personas';
                alert(msg);
            };
        }
        var medico1 = new Medico ('Juan Eslava', 0, 'traumatología')
    </script>
</head>
<body>
    <h1>Médico</h1>
    <h2>Juan Eslava</h2>
    <input type="button" value="Mostrar datos" onclick="medico1.mostrarDatos()">
    <input type="button" value="Curar persona" onclick="medico1.curarPersonas()">
</body>
</html>

Método con funciones externas...

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01144E</title>
    <script>
        /* Método con funciones externas */
        function Medico(nombre, personasCuradas, especialidad){
            this.nombre = nombre;
            this.personasCuradas = personasCuradas;
            this.especialidad = especialidad;
            this.curarPersonas = curarPersonas;
            this.mostrarDatos = mostrarDatos;
        }

        function mostrarDatos(){
            var msg;
                msg = 'El médico se llama '+this.nombre+', su especialidad es '+this.especialidad+' y lleva curadas '+this.personasCuradas+' personas';
                alert(msg);
        }

        function curarPersonas(){
                this.personasCuradas = this.personasCuradas + 1;
		alert('Persona curada');
            };

        var medico1 = new Medico ('Juan Eslava', 0, 'traumatología')
    </script>
</head>
<body>
    <h1>Médico</h1>
    <h2>Juan Eslava</h2>
    <input type="button" value="Mostrar datos" onclick="medico1.mostrarDatos()">
    <input type="button" value="Curar persona" onclick="medico1.curarPersonas()">
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript - querySelectorAll y QuerySelector CU01134E

« en: 10 de Mayo 2020, 15:09 »

Hola victor, funciona perfecto. Una recomendación, solo para que sea de más fácil lectura, sería organizar mejor el código respecto al tabulado según la jerarquía.
Un ejemplo simple sería, donde alert() está dentro de <script> y este dentro de <head>.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        alert();
    </script>
</head>
<body>
</body>
</html>

El único error, que si no recuerdo mal ya viene con el código que copiamos del enunciado, es que la parte de estilos hay un error en la línea 20.

Código: [Seleccionar]

.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }

La coma luego de 'span.limpiar' no va.

Citar

Adjunto ejercicio JavaScript CU01134E para ver si está correcto o ver formas mejor de hacerlo ya que no lo veo por el foro.

https://aprenderaprogramar.com/foros/index.php?topic=7559.0

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript orientado a objetos Crear un objeto this new Ejercicio resue CU01143E

« en: 04 de Mayo 2020, 16:27 »

Propuesta de solución para el ejercicio CU01143E del tutorial de desarrollo web con javascript desde cero.

Citar

Crea un documento HTML (página web) donde exista un botón “Crear cuenta bancaria”. Cuando el usuario pulse sobre el botón debe:

a) Pedirse al usuario un nombre de titular, apellidos de titular y saldo de la cuenta.

b) Crear un nuevo objeto cuentaBancaria (similar al que hemos creado en los ejemplos) que se inicializará con los datos facilitados por el usuario.

c) Mostrar un mensaje informando de que se ha creado la nueva cuenta bancaria y de los datos asociados a la cuenta bancaria creada.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>EJERCICIO CU01143E</title>
    <script>
        function crearCuentaBancaria(datoNombre, datoApellido, datoSaldo){
            this.nombreDelTitular = datoNombre;
            this.apellidoDelTitular = datoApellido;
            this.saldoDelTitular = datoSaldo;
            this.mostrarDatos = function(){
                var msg = 'La cuenta a sido creada con éxito. Los datos son:' + '\n' +
                'Nombre: ' + this.nombreDelTitular + '\n' +
                'Apellido: ' + this.apellidoDelTitular + '\n' +
                'Saldo: ' + this.saldoDelTitular + '\n';

                alert(msg);
            }
        }

        function nuevaCuenta(){
            var nombre = prompt('Ingrese su nombre');
            var apellido = prompt('Ingrese su apellido');
            var saldo = prompt('Ingrese su saldo')
            var cuenta1 = new crearCuentaBancaria(nombre, apellido, saldo);
            cuenta1.mostrarDatos();
        }
    </script>
</head>
<body>
    <h1>BANCO</h1>
    <button onclick="nuevaCuenta()">Crear cuenta bancaria</button>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Formulario función toLowerCase replace() Ejercicio resuelto CU01142E

« en: 03 de Mayo 2020, 15:42 »

Dejo la solución del ejercicio CU01142E del curso básico de JavaScript con ejercicios resueltos.

Citar

Crea un documento HTML (página web) donde exista un formulario que se envíe por el método GET. Se pedirá al usuario que introduzca nombre, apellidos y correo electrónico. Define dentro de la etiqueta form que cuando se produzca el evento onsubmit (pulsación del botón de envío del formulario) se ejecute una función a la que denominaremos validar que no recibe parámetros.

La función validar debe realizar estas tareas y comprobaciones:

a) Comprobar que el nombre contiene al menos tres letras. Si no es así, debe aparecer un mensaje por pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar Ka como nombre debe aparecer el mensaje: “El nombre no cumple tener al menos tres letras”.

b) Comprobar que el correo electrónico contiene el carácter @ (arroba) y el carácter . (punto). De no ser así, deberá aparecer un mensaje indicando que al correo electrónico le falta uno o ambos caracteres. Por ejemplo si se trata de enviar pacogmail.com deberá aparecer el mensaje: “Falta el símbolo @ en el correo electrónico”.

c) Antes de enviarse los datos del formulario a la página de destino, todas las letras del correo electrónico deben transformarse a minúsculas. Por ejemplo si se ha escrito PACO@GMAIL.COM debe enviarse paco@gmail.com
d) Antes de enviarse los datos del formulario a la página de destino, si el correo electrónico contiene la subcadena “ at “ debe reemplazarse por el símbolo @. Por ejemplo si se ha escrito paco at gmail.com debe enviarse paco@gmail.com

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01142E</title>
    <style>
        body {
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        div {
            margin: 15px;
            padding: 5px;
            background-color: lightcoral;
            width: 250px;
        }
        input {
            width: 240px;
        }
        #submit {
            margin-left: 15px;
        }
    </style>
    <script>
        function validar(){
            var nombreIntroducido = document.getElementById('nombre').value;
            var correoIntroducido = document.getElementById('correoElectronico').value;

            if (nombreIntroducido.length <= 3){
                alert('El nombre es demasiado corto. Debe tener más de 3 letras')
                return false;
            } if (correoIntroducido.indexOf('@') == -1){
                document.getElementById('correoElectronico').value = correoIntroducido.replace(/at/g, '@');
                alert('Falta el símbolo @ en el correo electrónico');
                return false;
            } else {
                document.getElementById('correoElectronico').value = correoIntroducido.toLowerCase();
                return true;
            };
        }
    </script>
</head>
<body>
    <form action="action.html" method="GET" onsubmit="return validar()">
        <h2>Complete los datos</h2>
        <div>Nombre: <br><input type="text" id="nombre" name="nombre"></div>
        <div>Apellido: <br><input type="text" id="apellido" name="apellido"></div>
        <div>Correo electrónico: <br><input type="text" id="correoElectronico" name="correoElectronico"></div>
        <!-- <input type="submit" id="submit"> -->
        <button type="submit" id="submit">Enviar</button>
    </form>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript - EJERCICIO CU01131E

« en: 29 de Abril 2020, 04:13 »

Hola Victor, bienvenido. Te dejo la manera en que resolví el problema del primer enunciado utilizando un for. Espero que te sirva.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01131E</title>
    <script>
        function palabraElegida(palabra){
            for (i = 0; i < palabra.length; i++){
                document.write('Letra ' + Number(i+1) + ': ' + palabra.charAt(i) + '<br>');
            }
        }
    </script>
</head>
<body>
    <script>
        palabraElegida(prompt('Escribe una palabra'));
    </script>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejercicios resueltos JavaScript Crear div con appendChild anidados fin CU01140E

« en: 27 de Abril 2020, 22:59 »

Solución propuesta para el ejercicio CU01140E del tutorial de programación JavaScript con ejercicios resueltos de aprenderaprogramar.

Citar

Crea una página web donde inicialmente exista un div con borde solid y ancho delimitado con el texto “Curso JavaScript aprenderaprogramar.com”. Debajo del div deben mostrarse dos botones o pulsadores. Un botón debe indicar “Añadir al final” y otro “Anidar”. Cuando se pulse el botón “Añadir al final”, debe añadirse un div al final de la página con el texto “Nodo creado 1” (o Nodo creado 2, 3, 4… según corresponda). Cuando se pulse el botón “Anidar” debe añadirse un div dentro del div inicial con el texto “Nodo creado 5” (o Nodo creado 6, 7, 8… según corresponda). La numeración será única, es decir, podremos saber en qué orden han sido creados los div estén dentro o fuera del div inicial.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01140E</title>
    <style>
        body {
            font-family: sans-serif;
            text-align:center;
        }
        
        div {
            border: solid black 1px;
            background-color: burlywood;
            width: 200px;
            height: 50px;
            margin: 10px;
            padding: 10px;  
        }
    </style>
    <script>
        var contador = 0;
        var contadorDivAnidado = 0;

        // div al final de la página con el número correspondiente
        function añadirAlFinal(){
            var divHijo = document.createElement('div');
            document.body.appendChild(divHijo);
            divHijo.textContent = 'Nodo N° ' + contador;
            contador = contador + 1;
        }

        // div dentro del div inicial con el número correspondiente
        function anidar(){
            var divPadre = document.getElementById('div'+contadorDivAnidado); // busco el div principal
            var nuevoDiv = document.createElement('div'); // creo la variable div
            nuevoDiv.id = 'div'+(contadorDivAnidado+1); // le asigno un id con el número siguiente
            nuevoDiv.textContent = 'Nodo N°' + contador;
            divPadre.appendChild(nuevoDiv);
            contador = contador + 1;
            contadorDivAnidado = contadorDivAnidado + 1;
        }

    </script>
</head>
<body>
    <div id="div0">
        Curso JavaScript aprenderaprogramar.com
    </div>

    <input type="button" value="Añadir al final" onclick="añadirAlFinal()">
    <input type="button" value="Anidar" onclick="anidar()">
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Página con tabla dinamica: Editar tablas Ejercicio resuelto CU01139E

« en: 25 de Abril 2020, 04:23 »

Dejo la resolución del ejercicio CU01139E del curso de desarrollo web con JavaScript. Cabe destacar que lo resolví sin leer las orientaciones para la solución, por eso la diferencia de código con el propuesto.

Citar

Se desea que al pulsar en el texto Editar de la columna Acciones, ocurra lo siguiente:

a) El texto de esa columna que ponía <<Editar>> en color azul, será reemplazado por el texto <<En edición>> en color gris o negro.

b) Los datos en la fila correspondiente se convertirán en casillas de texto editables de modo que el usuario pueda modificar los datos de esa fila.

c) Debe aparecer en la parte inferior de la tabla el texto: <<Pulse Aceptar para guardar los cambios o cancelar para anularlos>> y dos botones: Aceptar y Cancelar, que podrán ser pulsados por el usuario para Aceptar los cambios o para cancelar.

Si el usuario pulsa en el botón Aceptar los datos de la fila en edición deben ser enviados a una url de destino por el método get. Por ejemplo si la url de destino es aprenderaprogramar.com y editáramos la fila correspondiente a Fresa y pulsamos aceptar, el navegador debe enviarnos a una url como esta:

http://aprenderaprogramar.com/?alimento=Fresa&calorias=57&grasas=1.5&proteina=0.4&carbohidratos=12.8

Atención: los datos que se deben enviar a la url de destino son los datos editados por el usuario, no los datos originales de la tabla.

Si el usuario pulsa en Cancelar se recargará la tabla original (de forma que no habrá ninguna fila en edición).

Si estando seleccionada una fila en edición el usuario pulsa sobre Editar en otra fila, se mostrará un mensaje indicando lo siguiente: “Solo se puede editar una línea. Recargue la página para poder editar otra”.

Al código lo realicé en un solo archivo, aun que lo más óptimo hubiese sido hacer 3 archivos archivos diferentes.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01139E</title>
    <style>
        table {
            padding: auto;
            margin: auto;
            background-color: black;
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20px;
            border: 1px black solid;
        }

        th, td {
            background-color: goldenrod;
            width: 170px;
            height: 50px;
        }

        button {
            padding: 5px;
            margin: 5px;
            float: left;
        }

        .editar {
            color: blue;
            cursor: pointer;
        } 

        .enEdicion {
            color: black;
            font-style: italic;
        }

        input {
            width: 120px;
            height: 15px;
            font-size: 15px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
    </style>
        
    <script>
        fila = 0;
        function editar(numeroFila){
            var filas = document.getElementsByTagName('tr');
            fila = fila + (numeroFila/numeroFila);

            if(fila > 1){
                alert('Solo se puede editar una línea. Recargue la página para poder editar otra');
            } else {
                filas[numeroFila].childNodes[1].innerHTML = '<input type="text" name="Alimento">';
                filas[numeroFila].childNodes[3].innerHTML = '<input type="text" name="Calorias">';
                filas[numeroFila].childNodes[5].innerHTML = '<input type="text" name="Grasas">';
                filas[numeroFila].childNodes[7].innerHTML = '<input type="text" name="Proteinas">';
                filas[numeroFila].childNodes[9].innerHTML = '<input type="text" name="Carbohidratos">';
                document.getElementsByTagName('tr')[numeroFila].childNodes[11].textContent = 'En edición';
                document.getElementsByTagName('tr')[numeroFila].childNodes[11].classList.add('enEdicion');

                document.body.getElementsByTagName('div')[0].textContent = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos';
                document.body.getElementsByTagName('div')[1].innerHTML = '<button type="submit" class="boton" id="aceptar">Aceptar</button>';
                document.body.getElementsByTagName('div')[2].innerHTML = '<button type="reset" class="boton" id="cancelar" onclick="location.reload()">Cancelar</button>';
            }
        }
    </script>
</head>
<body>
    <form method="GET" action="https://aprenderaprogramar.com">
        <h2 style="text-align: center">Contenido nutricional cada 100 g de alimento</h2>   
        <table>
            <tr>
                <th>Alimento</th>
                <th>Calorías (kCal)</th>
                <th>Grasas (g)</th>
                <th>Proteína (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 onclick="editar(1)" class="editar">Editar</td>
            </tr>
            <tr>
                <td>Plátano</td>
                <td>90</td>
                <td>0.3</td>
                <td>1.0</td>
                <td>23.5</td>
                <td onclick="editar(2)" class="editar">Editar</td>
            </tr>
            <tr>
                <td>Cereza</td>
                <td>46</td>
                <td>0.4</td>
                <td>0.9</td>
                <td>10.9</td>
                <td onclick="editar(3)" class="editar">Editar</td>
            </tr>
            <tr>
                <td>Fresa</td>
                <td>37</td>
                <td>0.5</td>
                <td>0.8</td>
                <td>8.3</td>
                <td onclick="editar(4)" class="editar">Editar</td>
            </tr>
        </table>
        <div> </div>
        <div class="div1"> </div>
        <div class="div1"> </div>
    </form>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Cambiar estilo y texto de cuadrados div. Ejercicio resuelto CU01138E

« en: 24 de Abril 2020, 01:56 »

Solución propuesta para el ejercicio CU01138E del tutorial pdf de programación web con JavaScript y ejercicios resueltos de aprenderaprogramar.

Citar

Crea un documento html con div central (“el cuadrado principal”) que contenga a su vez cuatro divs (los cuadrados secundarios). Debajo del cuadrado principal debe aparecer un botón con el texto “Avanzar”. Inicialmente los cuatro cuadrados tendrán fondo blanco y un signo ? de gran tamaño. Al pulsar en el botón por primera vez, el cuadrado superior izquierdo debe aparecer con fondo negro, texto blanco, y tener como texto “El”. Al pulsar de nuevo el botón, el cuadrado superior derecho debe aparecer con fondo blanco y texto negro y tener como texto “poder”. Al pulsar de nuevo el botón el cuadrado inferior izquierdo debe aparecer con fondo blanco y texto negro y tener como texto “de”. Al pulsar de nuevo el botón el cuadrado inferior derecho debe aparecer con fondo amarillo y texto negro y tener como texto “JavaScript”. Si se pulsa nuevamente el botón avanzar debe mostrarse un mensaje que indique “No es posible avanzar más”.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01138E</title>
    <style>
        .cuadradoPrincipal {
            width: 504px;
            height: 504px;
            margin: auto;
            padding: auto;
        }

        .cuadradoSecundario {
            float: left;
            width: 250px;
            height: 250px;
            justify-content: center;
            align-items: center;
            display: flex; 
            border: 1px solid black;
            font-size: 50px;
        }

        .boton {
            width: 150px;
            height: auto;
            margin: auto;
            padding: auto;
            margin-top: 10px;
            text-align: center;
            border: 2px solid grey;
            font-size: 25px;
            border-radius: 10px;
            background-color: black;
            transition: all 0.4s ease 0s; 
            cursor: pointer;
            color: white;
        }
    </style>
    <script>
            var i = 0;
        function avanzarCuadrado(agregarUnClick){
            i = i + agregarUnClick;
            var div = document.body.childNodes[1].getElementsByTagName('div');

                if(i==1){
                    div[0].style.backgroundColor = 'black';
                    div[0].style.color = 'white'
                    div[0].textContent = 'El'
                } else if (i==2){
                    div[1].style.backgroundColor = 'white';
                    div[1].style.color = 'black'
                    div[1].textContent = 'poder'
                } else if (i==3){
                    div[2].style.backgroundColor = 'white';
                    div[2].style.color = 'black'
                    div[2].textContent = 'de'
                } else if (i==4){
                    div[3].style.backgroundColor = 'yellow';
                    div[3].style.color = 'black'
                    div[3].textContent = 'JavaScript'
                } else {
                    alert('No es posible avanzar más');
                }
        }       
    </script>
</head>
<body>
    <div class="cuadradoPrincipal">
        <div class="cuadradoSecundario">?</div>
        <div class="cuadradoSecundario">?</div>
        <div class="cuadradoSecundario">?</div>
        <div class="cuadradoSecundario">?</div>
    </div>
    <div class="boton" onclick="avanzarCuadrado(1)">AVANZAR</div>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript HTML Modificar el contenido de un div utilizando textContent CU01136E

« en: 23 de Abril 2020, 02:11 »

Acá traigo resuelto el ejercicio CU01136E del curso de desarrollo web con JavaScript de aprenderaprogramar.

Creo que la resolución del ejercicio cumple con lo planteado, mis únicas dos dudas son las siguientes:

En mi navegador (Google Chrome) lo primero que se ejecuta es el script y una vez ingresado los números aparece el titulo (h1) y obviamente el mensaje de los números con sus operación correspondiente. Yo entiendo que el apartado pide que primero se ejecute el título + div vacio y luego pida los 5 números y modifique el div agregando el mensaje. No se si hay un error de interpretación del enunciado o está mal el código por eso no se ejecuta en el orden correcto.
El enunciado dice que el mensaje debe ser los números ingresados * 3 = resultado de la multiplicación, y a todo esto separado por una coma (,). Eso está bien resuelto, pero yo por ser más ordenado, quise suplantar la coma por un salto de linea y no pude lograrlo. Probé con \n y con <br> y no hubo forma

Enunciado:

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). Ejemplo:

Al cargar la página aparecerá: Ejercicio curso aprenderaprogramar.com

… (div vacío)

Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7

A continuación en la página se visualizará: Ejercicio curso aprenderaprogramar.com

Multiplicamos por 3 los números introducidos: 1*3 = 3, 3*3 = 9, 9*3 = 27, 10*3 = 30 y 7*3 =21.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01136E</title>
    <script>
        var numeroGuardado = [];
        var msg = '';
        var nodoDiv = document.getElementsByTagName('div');
        function pedirNumeros(){
            for(i=0; i<5; i++){
                numeroPedido = prompt('Ingrese un número');
                numeroGuardado[i] = Number(numeroPedido);
                msg = msg + numeroGuardado[i] + '*3 = ' + (numeroGuardado[i] * 3) + ', ';
            }
            nodoDiv[0].textContent = msg;
        }
    </script>
</head>
<body>
    <h1>Ejercicio curso aprenderaprogramar.com</h1>
    <div> </div>
    <script>pedirNumeros();</script>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejercicios resueltos curso JavaScript. Bucles o ciclos for y for in CU01135E

« en: 22 de Abril 2020, 14:58 »

Hola, dejo mi propuesta de solución para el ejercicio de la entrega CU01135E del programa formativo de programador web de aprenderaprogramar con JavaScript.

Citar

1) 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 usando un for in que recorra el array, muestra un mensaje informando del resultado de multiplicar cada uno de los números por 3. Ejemplo:

Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7

A continuación se mostrará el mensaje:

Multiplicamos por 3 los números introducidos: 1*3 = 3, 3*3 = 9, 9*3 = 27, 10*3 = 30 y 7*3 =21.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01135E</title>
    <script>
        function pedirNumeros(){
            var numeroGuardado = [];
            var msg = 'Multiplicamos los números elejidos por 3:\n';
            for(i=0; i<5; i++){
                numeroPedido = prompt('Ingrese un número');
                numeroGuardado[i] = Number(numeroPedido);
            } 
            for (i in numeroGuardado){
                msg = msg + numeroGuardado[i] + '*3 = ' + (numeroGuardado[i] * 3) + '\n';
            }
            alert(msg);
        }
    </script>
</head>
<body>
    <script>
        pedirNumeros();
    </script>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejercicios resueltos JavaScript Acceder a nodos DOM por selectores CSS CU01134E

« en: 22 de Abril 2020, 04:01 »

Solución propuesta para el ejercicio CU01134E del curso pdf de programación JavaScript para desarrollos web.

Citar

1) Modifica el código del ejemplo de la calculadora JavaScript para que además de tener dos botones que permitan marcar números y operadores con distintos colores tenga:

a) Un botón que permita marcar la tecla C con color rojo fuerte y símbolo C en blanco.

b) Un botón que permita marcar la tecla con el punto con color violeta fuerte y símbolo . en blanco.

c) Un botón que permita marcar la pantalla visor de la calculadora en azul oscuro.

d) Un botón que permita limpiar todo lo que se haya marcado y volver a la situación original (es decir, que la calculadora se vea tal y como se veía inicialmente).

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio CU01134E</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, #teclaC, #teclaPunto, #cambiarPantalla, #restablecer{
                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, #teclaC:hover, #teclaPunto:hover, #cambiarPantalla:hover, #restablecer: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 teclaC(){
                var teclaC = document.querySelector('#calculadora .parteSuperior span.limpiar');
                teclaC.style.backgroundColor = "red";
                teclaC.style.color = "white";
            }

            function teclaPunto(){
                var teclaPunto = document.querySelector('#calculadora .teclas span.punto');
                teclaPunto.style.backgroundColor = "violet";
                teclaPunto.style.color = "white";
            }

            function cambiarPantalla(){
                var cambiarPantalla = document.querySelector('#calculadora .parteSuperior div.pantalla');
                cambiarPantalla.style.backgroundColor = "blue";
            }

            function restablecer(){
                var cambiarPantalla = document.querySelector('#calculadora .parteSuperior div.pantalla');
                cambiarPantalla.style.backgroundColor = "rgba(0, 0, 0, 0.2)";

                var teclaPunto = document.querySelector('#calculadora .teclas span.punto');
                teclaPunto.style.backgroundColor = "#FFFFFF";
                teclaPunto.style.color = "#888888";
                
                var teclaC = document.querySelector('#calculadora .parteSuperior span.limpiar');
                teclaC.style.backgroundColor = "#FF9FA8";
                teclaC.style.color = "#FFFFFF";
            
                var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
                    for (var i=0; i<listaNodosNumeros.length; i++) {
                        listaNodosNumeros[i].style.backgroundColor = "#FFFFFF";
                        listaNodosNumeros[i].style.color = "#888888";
                        listaNodosNumeros[i].style.border = "0px";
                    }

                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 = "#FFDAB9";
                        listaNodosOperadores[i].style.color = "#888888";
                        listaNodosOperadores[i].style.border = "0px";
                    }
                nodoIgual.style.backgroundColor = "#F1FF92";
                nodoIgual.style.color = "#888888";
                nodoIgual.style.border = "0px";
            }
        </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="teclaC" onclick="teclaC()">Tecla "C"</div>
            <div id="teclaPunto" onclick="teclaPunto()">Tecla "punto"</div>
            <div id="cambiarPantalla" onclick="cambiarPantalla()">Cambiar pantalla</div>
            <div id="restablecer" onclick="restablecer()">Restablecer</div>
        </div>
    </body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejercicios resueltos JavaScript Uso de while bucle método charAt letras CU01132E

« en: 20 de Abril 2020, 01:24 »

Solución propuesta para el ejercicio CU01132E del tutorial de programación JavaScript con ejercicios resueltos.

Citar

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 lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01132E</title>
    <script>
        var palabra = prompt('Ingrese una palabra');
        function ingreseLaPalabra(){
            var i = 0;
            var msg = '';
            while(i < palabra.length){
                msg = msg + ('Letra ' + i + ': ' + palabra.charAt(i) + '\n');
                i ++;
            }
            alert(msg);
        }
    </script>
</head>
<body>
    <h2 onclick="ingreseLaPalabra()">Pulse aquí</h2>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript ejercicios resueltos bucle for document.getElementsByTagName CU01131E

« en: 20 de Abril 2020, 00:29 »

Solución propuesta para los ejercicios de la entrega CU01131E del tutorial básico de programación web con JavaScript de aprenderaprogramar.

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.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01131E</title>
    <script>
        function palabraElegida(palabra){
            for (i = 0; i < palabra.length; i++){
                document.write('Letra ' + Number(i+1) + ': ' + palabra.charAt(i) + '<br>');
            }
        }
    </script>
</head>
<body>
    <script>
        palabraElegida(prompt('Escribe una palabra'));
    </script>

</body>
</html>

Citar

Crea una función denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de tipo párrafo, muestre el texto que contienen. Por ejemplo para el código de ejemplo visto anteriormente el resultado debería ser: Párrafo 1 contiene: manzana; Párrafo 2 contiene: pera. Párrafo 3 contiene: fresa. Párrafo 4 contiene … (etc., hasta que no haya más párrafos).

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio CU01131E</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {background-color:white; font-family: sans-serif;}
            p {font-size: 24px; color: maroon; float: left; margin:10px; border: solid black; padding:10px;}
            .boton{padding:15px; width: 330px;  text-align:center; clear:both;
            color: white; border-radius: 40px; background: rgb(202, 60, 60);}
            .boton:hover {background: rgb(66, 184, 221);}
        </style>
        <script type="text/javascript">
            function mostrarContParrafo(elemento){
                var parrafo = document.getElementsByTagName(elemento);
                var msg = '';
                for(i = 0; i < parrafo.length; i++){
                    msg = msg + ('Parrafo ' + Number(i+1) + ': ' + parrafo[i].firstChild.nodeValue + '\n');
                }
                alert(msg)
            }
        </script>
    </head>
    <body>
        <h1>Portal web aprenderaprogramar.com</h1>
        <h2>Didáctica y divulgación de la programación</h2>
        <div style="width:500px; float:left; margin-bottom:30px;">
            <p>Manzana</p><p>Pera</p><p>Fresa</p><p>Ciruela</p>
            <p>Naranja</p><p>Kiwi</p><p>Pomelo</p><p>Melón</p>
            <p>Sandía</p><p>Mango</p><p>Papaya</p><p>Cereza</p>
            <p>Nectarina</p><p>Frambuesa</p>
        </div>
        <h2 class="boton" onclick="mostrarContParrafo('p')">Pulse aquí</h2>
    </body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript checkbox atributo checked ejempl getElementsByName ejercicio CU01130E

« en: 18 de Abril 2020, 03:22 »

Propuesta de solución para el ejercicio CU01130E del tutorial pdf de programación JavaScript con ejercicios resueltos:

Citar

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

Daría el mismo resultado porque .checked funciona como tipo booleano.

Citar

Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.

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 …”. Por ejemplo, si tenemos 4 animales (León, Tigre, Guepardo, Jaguar) y hemos elegido Tigre nos debe aparecer el mensaje “El número total de animales disponibles era 4 y usted ha elegido 1”.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio</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(elemento){
                var animalesTotal = document.getElementsByName(elemento);
                var animalesElegidos = 0;

                if(animalesTotal[0].checked){
                    animalesElegidos += 1;
                } 

                if(animalesTotal[1].checked){
                    animalesElegidos += 1;
                }

                if(animalesTotal[2].checked){
                    animalesElegidos += 1;
                } 

                if(animalesTotal[3].checked){
                    animalesElegidos += 1;
                }
                alert('El número de animales elegidos es: ' + animalesElegidos + ' y el total es: ' + animalesTotal.length)
            }
        </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</label>
                <input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre</label>
                <input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo</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>

Otra solución sin utilizar if sería cambiar la variable animalesElegidos por esta:

Código: [Seleccionar]

var animalesElegidos = animalesTotal[0].checked + animalesTotal[1].checked + animalesTotal[2].checked + animalesTotal[3].checked;

Esto funcionaría porque el valor booleano de true vale 1 y el de false vale 0. Entonces las casillas que estén tildadas darán true y se sumarían.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:getElementsByName JavaScript length conocer número elementos marcados CU01130E

« en: 18 de Abril 2020, 02:42 »

Para las personas que están siguiendo el curso en orden, este ejercicio está resuelto utilizando for que todavía no fue explicado. No recomiendo seguir este ejemplo hasta poder resolverlo solamente con if.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cambios dinámicos en formulario texto getElementsByTagName CU01128E

« en: 16 de Abril 2020, 19:09 »

Traigo el ejercicio CU01128E resuelto del curso de programación JavaScript básico.

Citar

Modifica el código anterior para que en vez de pasarse como parámetro label pases como parámetro: div, input, h1 y h2. ¿Se usan los tres índices del array en todos los casos? ¿Qué ocurre si aparecen más índices que elementos realmente existen en el documento html?

Si hay más índices que elementos, los índices que sobren no se ejecutarán.

Citar

Modifica el código anterior para introducir div que simule un botón con el texto “Cambiar a Inglés” y otro div simulando un botón “Cambiar a español”. Al pulsar sobre el botón cambiar a inglés, debes acceder a los nodos del DOM de tipo label y usando relaciones de parentesco entre nodos acceder a aquellos nodos cuyo nodeValue es Nombre:, Apellidos:, y Correo electrónico: y cambiar su nodeValue por Name:, Surname: y e-mail:.

Código: [Seleccionar]

<!DOCTYPE html>
<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;
            }
        </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(idioma){
                var nombre = document.getElementsByTagName('span')[0].firstChild,
                    apellidos = document.getElementsByTagName('span')[1].firstChild,
                    email = document.getElementsByTagName('span')[2].firstChild;

                if (idioma == 'ingles'){
                    nombre.nodeValue = 'Name: '
                    apellidos.nodeValue = 'Surname: ';
                    email.nodeValue = 'E-mail: ';

                } else if (idioma == 'español') {
                    nombre.nodeValue = 'Nombre: '
                    apellidos.nodeValue = 'Apellidos: ';
                    email.nodeValue = 'Correo electrónico: ';
                } else {}      
            }

        </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>
        <div>
            <input type="button" value="Cambiar a inglés" onclick="cambiarIdioma('ingles')">
        </div>
        <div>
            <input type="button" value="Cambiar a español" onclick="cambiarIdioma('español')">
        </div>
    </body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Curso JavaScript getElementById Cambiar imagen img src url Ejercicio CU01127E

« en: 15 de Abril 2020, 03:08 »

Acá está el ejercicio CU01127E del curso de JavaScript para principiantes.

Citar

2. En el código anterior hay una declaración de variables (var numeroImagenActual =9;) que no está dentro de una función. ¿Por qué crees que se ha hecho esto así? Prueba a colocarla dentro de la función, comprueba qué ocurre y razona el por qué.

En este caso, lo que entiendo es que numeroImagenActual es una variable de tipo global, declarada (obviamente) fuera de la función, entonces cuando la función se ejecuta, el valor inicial de la variable numeroImagenActual va a ser igual a 9. Pero una vez ocurran las acciones de movimiento "Atras" o "Adelante", la variable numeroImagenActual va a ir modificando su valor con respecto al valor de valorNuevoNumeroImagen que está dentro de cada if.
Entonces si pusieramos la variable global numeroImagenActual dentro de la función, tendremos como resultado que valorNuevoNumeroImagen siempre será 9, y al presionar "Atras" o "Adelante" pasaremos de la imagen 6 a la 11 o viceversa sin poder ver la imagen 9 (solamente cuando carga la página).

Citar

3. Modifica el código anterior para que en lugar de definirse src, alt y title para cada imagen dentro de los if, se definan estos valores usando arrays declarados en cabecera de la función.

Código: [Seleccionar]

<html>
    <head>
        <title>Ejercicio CU01127E</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">
            var numeroImagenActual = 9;
            function moverImagen(movimiento) {

                var valorSrc = [], valorTitle = [], valorAlt = [];
                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_9_humor_informatico_foto.jpg';
                valorSrc[3] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
                valorTitle[1] = 'Desbordado por los números';
                valorTitle[2] = 'Diálogo entre informáticos';
                valorTitle[3] = 'Estudiando programacion';
                valorAlt[1] = 'Camiseta 6 aprenderaprogramar.com';
                valorAlt[2] = 'Camiseta 9 aprenderaprogramar.com';
                valorAlt[3] = 'Camiseta 11 aprenderaprogramar.com';

                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;
                    document.getElementById('imgCarrusel').src = valorSrc[2];
                    document.getElementById('imgCarrusel').alt = valorAlt[2];
                    document.getElementById('imgCarrusel').title = valorTitle[2];

                } if (numeroImagenActual == 9 && movimiento == 'atras') {
                    valorNuevoNumeroImagen = 6;
                    document.getElementById('imgCarrusel').src = valorSrc[1];
                    document.getElementById('imgCarrusel').alt = valorAlt[1];
                    document.getElementById('imgCarrusel').title = valorTitle[1];

                } if (numeroImagenActual == 9 && movimiento == 'adelante') {
                    valorNuevoNumeroImagen = 11;
                    document.getElementById('imgCarrusel').src = valorSrc[3];
                    document.getElementById('imgCarrusel').alt = valorAlt[3];
                    document.getElementById('imgCarrusel').title = valorTitle[3];
                }
                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>

Citar

4. Duplica todo el código HTML existente dentro de la etiqueta body, de modo que se muestren dos veces el texto, dos veces la imagen y dos veces los botones. Cuando pulsas el botón situado debajo de la imagen inferior, ¿qué ocurre? ¿Por qué ocurre esto?

Lo que sucede es que tenemos dos ID con el mismo nombre. Lo que da como resultado que se ejecute solo el primer ID.

Cita de "GET ELEMENT BY ID" de la entrega N° 27:

Citar

Recordar que en un documento HTML no debería existir más de un elemento con un mismo id. Es decir, los ids deben ser únicos (identificadores únicos de un elemento). En caso de tener dos elementos dentro de nuestro documento HTML que tengan el mismo id, pueden surgir errores (seguramente JavaScript devuelva el primer elemento con el id especificado que encuentre, pero no deberíamos trabajar teniendo ids repetidos porque esto es incorrecto).

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Acceder a nodos DOM hijos childNode[] firstChild nextSibling CU01126E

« en: 15 de Abril 2020, 01:58 »

Acá les dejo el ejercicio CU01126E del tutorial pdf de programación JavaScript desde cero, donde cambio los childNode[] por firstChild y nextSibling.

Cabe aclarar que cambié alert(msg) por document.write(msg) y así también las etiquetas de salto de lineas ('\n\n') por ('<br><br>') para que sea más fácil de leer el resultado ya que dentro del alert no entraba todo el contenido.

Para esté enunciado utilicé el código del navegador 1.

Citar

Una vez tengas el código ejecutándose, modifica la forma de acceso a los nodos de modo que en vez de childNodes uses firstChild y nextSibling para acceder a todos los nodos.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio CU01126E</title>
        <meta charset="utf-8">
    </head>
    <body> Texto en body
        <div id="cabecera" class="brillante">
            <h1>Portal web <span class="destacado">aprenderaprogramar.com</span>, para aprender</h1>
            <img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
        </div>
    <!-- Final del código-->
        <script type = "text/javascript">
            var msg = '';
            msg = '¿Quién es el nodo padre de document? '+ document.parentNode + '<br><br>';
            msg = msg + 'Para el nodo document el nodeType vale: ' + document.nodeType +' , y el nodeName vale '+ document.nodeName + '<br><br>';
            msg = msg + 'El valor de nodeValue para el nodo document es: ' + document.nodeValue +'<br><br>';
            msg = msg + 'Nodo hijo del nodo raíz es la declaración DOCTYPE con nodeName: ' + document.firstChild.nodeName +'<br><br>';
            msg = msg + 'Nodo hijo del nodo raíz es etiqueta html con nodeName: ' + document.firstChild.nextSibling.nodeName +' y nodeType: '+ document.firstChild.nextSibling.nodeType + '<br><br>';
            msg = msg + 'Número de hijos de nodo etiqueta html: ' + document.firstChild.nextSibling.childElementCount + '(' + document.firstChild.nextSibling.children.length +')<br><br>';
            msg = msg + 'Nodo hijo de etiqueta html es etiqueta head con nodeName: ' + document.firstChild.nextSibling.firstChild.nodeName +' y nodeType: '+ document.firstChild.nextSibling.firstChild.nodeType +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta html es tipo texto vacío (salto de línea entre terminación de head y comienzo de body): ' + document.firstChild.nextSibling.firstChild.nextSibling.nodeName +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta html es etiqueta body con nodeName: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nodeName +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' + document.firstChild.nextSibling.firstChild.nextSibling.nextSibling.firstChild.nodeValue +'<br><br>';
            var nodoBody = document.firstChild.nextSibling.firstChild.nextSibling.nextSibling;
            msg = msg + '(Repetimos) Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' + nodoBody.firstChild.nodeValue +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta body es div con nodeName: ' + nodoBody.firstChild.nextSibling.nodeName +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta div es texto vacío (salto de línea) con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nodeName +' y node value: '+ nodoBody.firstChild.nextSibling.firstChild.nodeValue + '<br><br>';
            msg = msg + 'Nodo hijo de etiqueta div es etiqueta H1 con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nodeName +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nodeName +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta h1 es etiqueta span con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling.nodeName +'<br><br>';
            var nodoSpan = nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling;
            msg = msg + 'Nodo hijo de etiqueta span es texto con nodeName: ' + nodoSpan.firstChild.nodeName +' y nodeValue: '+ nodoSpan.firstChild.nodeValue +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +' y nodeValue: '+ nodoBody.firstChild.nextSibling.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeValue +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta div es texto vacío (salto de línea) con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nodeName +'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta div es img con nodeName: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling.nodeName +'<br><br>';
            msg = msg + 'Valor del atributo name de la imagen: ' + nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling.name +'<br><br>';
            var nodoImg = nodoBody.firstChild.nextSibling.firstChild.nextSibling.nextSibling.nextSibling;
            msg = msg + 'Valor del atributo src de la imagen: ' + nodoImg.src +', valor de alt: ' + nodoImg.alt + '<br><br>';
            msg = msg + 'Valor del atributo title de la imagen: '+ nodoImg.title+'<br><br>';
            msg = msg + 'Nodo hijo de etiqueta body es texto vacío (salto de línea) con nodeName: ' + nodoBody.firstChild.nextSibling.nextSibling.nodeName +' y nodeType: '+nodoBody.firstChild.nextSibling.nextSibling.nodeType+' <br><br>';
            msg = msg + 'Nodo hijo de etiqueta body es comentario con nodeName: ' + nodoBody.firstChild.nextSibling.nextSibling.nextSibling.nodeName +' y nodeType: '+nodoBody.firstChild.nextSibling.nextSibling.nextSibling.nodeType+' y nodeValue: '+nodoBody.firstChild.nextSibling.nextSibling.nextSibling.nodeValue+' <br><br>';
            document.write(msg);
        </script>
    </body>
</html>

Páginas: [1] 2

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

Noticias: