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 - pedro,,

Páginas: 1 ... 57 58 59 60 61 [62] 63 64 65
1221
Citar
Gracias pedro, pero cual seria la forma correcta de hacerlo, es decir entiendo lo que  me dices mas no como corregirlo, gracias de nuevo

Vendría bien que mirases esta resolución del ejercicio, https://www.aprenderaprogramar.com/foros/index.php?topic=3337.0
y este otro, que resuelve de manera distinta, https://www.aprenderaprogramar.com/foros/index.php?topic=2089.msg10280#msg10280.

Como podrás comprobar, el fallo principal de tu ejercicio es que comparas las cadenas de caracteres antes de saber si una es mayor que otra.

Espero que te sirva.

Saludos.


1222
Hola, dejo otro ejercicio JavaScript

Citar
EJERCICIO
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(user) se debe crear un objeto de tipo usuario con id de usuario user y almacenar su nombre e id de usuario. Al invocar el método GetionDeUsuarios.despedir(user) se debe mostrar un mensaje de despedida “Hasta luego nombreDeUsuario” donde nombreDeUsuario será el nombre correspondiente.

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

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 aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px; cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
</style>
<script type="text/javascript">
var gestionDeUsuarios = {};
Object.defineProperty(gestionDeUsuarios,'usuario',{value:'',writable:true},'idUsuario',{value:0,writable:true});
gestionDeUsuarios.preguntarNombre = function(user, idUser){
var usuario = prompt('Introduzca el nombre del usuario: ');
var idUsuario = prompt('Introduzca el id del usuario: ');
gestionDeUsuarios.usuario=usuario;
gestionDeUsuarios.idUsuario=idUsuario;
}
gestionDeUsuarios.despedir = function(usuario){
alert('(Desde método despedir)Hasta luego ' + gestionDeUsuarios.usuario);
}
gestionDeUsuarios.preguntarNombre();
gestionDeUsuarios.despedir();
despedir();
function despedir(){
alert('(Desde función despedir())Hasta luego ' + gestionDeUsuarios.usuario);
}
</script>
</head>
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2></div>
<div id ="pulsador" onclick="despedir()"> Probar </div>
</body>
</html>

En cuanto a la pregunta:
Diría que no, creé una función con el mismo nombre que uno de los método y funcionan correctamente.

Saludos.


1223
Gracias Ogramar.

Quise intentar resolver esa parte, pero como dices, eso se explica mas adelante, así que no quise adelantarme.

Saludos.

1224
Hola Javieerg.

En el for pones esto:

Código: [Seleccionar]
i<=cadena1.length()|| i<=cadena2.length()
si escribes la palabra "rata" tanto en la cadea1 como en la cadena 2 ,cadena1.length() valdrá 4 y el for según está se ejecutará 5 veces, de 0 hasta 4.

en esta otra línea pones esto:

Código: [Seleccionar]
if(cadena1.substring(i, i+1).equals(cadena2.substring(i, i+1))){
lo que quiere decir que cuando i=4 al sumarle uno estarás intentando comparar un carácter que no existe ya que la palabra solo tiene 4 letras.

espero haberme explicado bien y te sirva para poder resolver el ejercicio.

Saludos.

1225
Otro ejercicio mas de JavaScript.

Citar
EJERCICIO
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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>
<script type="text/javascript">
function validar(){
var nodoNombre = document.getElementById('nombre');
var nodoEmail = document.getElementById('email');
var msg = comprobarNombre(nodoNombre.value);
if(msg!=''){alert(msg);}
nodoEmail.value = pasarEmailAMinusculas(nodoEmail.value);
nodoEmail.value = comprobrarAtEnEmail(nodoEmail.value);
msg = comprobarEmail(nodoEmail.value);
if(msg!=''){alert(msg);}
}
function comprobrarAtEnEmail(email){
return email.replace(/at/g,'@');
}
function pasarEmailAMinusculas(email){
return email.toLowerCase();
}
function comprobarNombre(nombre){
if(nombre.length<3){
var msg = 'El nombre no cumple tener al menos tres letras.';
return msg;
}else{
return msg='';
}
}
function comprobarEmail(email){
var msg = '';
var hayArroba = false;
var hayPunto = false;
for(var i=0; i<email.length; i++){
if(email[i]=='@'){hayArroba = true;}
if(email[i]=='.'){hayPunto = true;}
}
if(hayArroba==false && hayPunto==false){
msg = 'Faltan el símbolo \'@\' y el \'.\'';
}else{
if(hayArroba==false){msg = 'Falta el símbolo \'@\' en el correo electrónico.';}
if(hayPunto==false){msg = 'Falta el símbolo \'.\' en el correo electrónico.';}
}
return msg;
}
</script>
</head>
<body>
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="validar()">
<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>
</body
</html>

Saludos.


1226
Hola Mario.

Lo primero darte las gracias por tu tiempo.

Y ya que comentas sobre las referencias genéricas hice algunos cambios en el código, espero haberte entendido bien.

el código CSS es el mismo y el HTML le hice algún cambio sobre lo que comentaste, quedando así:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Ejercicio_CU01139E.css">
<script type="text/javascript" src="Ejercicio_CU01139E3.js"></script>
</head>
<body>
<div id="tabla1">
<form action="https://www.aprenderaprogramar.com" method="get">
<table>
<caption>Contenido nutricional por cada 100g de alimento.</caption>
<tr>
<th>Alimento</th><th>Calorias<br/>(kCal)</th><th>Grasas<br/>(g)</th><th>Proteina<br/>(g)</th><th>Carbohidratos<br/>(g)</th><th>Opciones</th>
</tr>
<tr>
<td>Arándano</td><td>49</td><td>0.2</td><td>0.4</td><td>12.7</td><td class="editar" onclick="editarFila(this)">Editar</td>
</tr>
<tr>
<td>Plátano</td><td>90</td><td>0.3</td><td>1.0</td><td>23.5</td><td class="editar" onclick="editarFila(this)">Editar</td>
</tr>
<tr>
<td>Cereza</td><td>46</td><td>0.4</td><td>0.9</td><td>10.9</td><td class="editar" onclick="editarFila(this)">Editar</td>
</tr>
<tr>
<td>Fresa</td><td>37</td><td>0.5</td><td>0.8</td><td>8.3</td><td class="editar" onclick="editarFila(this)">Editar</td>
</tr>
</table><br/>
<div id="botonesForm"></div>
</form>
</div>
</body>
</html>

y el código JS ahora quedaría de la siguiente forma:

Código: [Seleccionar]
var datos = new Array();
var enEdicion = true;
var ultimoNodoEditado;
function editarFila(nodo){
var nodoTd = nodo.previousSibling;
if (enEdicion==true){
cambiarEnEdicion(nodo);
creaCajasTexto(nodoTd);
var nodoDiv = document.getElementById('botonesForm');
nodoDiv.innerHTML = '<span id=\'texto1\'>Pulse Aceptar para guardar los cambios o cancelar para anularlos.</span><br/>' +
'<input type=\'submit\' value=\'Aceptar\' class=\'botonForm\'><input type=\'reset\' value=\'Cancelar\' class=\'botonForm\' onclick=\'reiniciarFila()\'>';
enEdicion = false;
}else{
alert('Solo se puede editar una línea. Recargue la página para poder editar.')
}
}
function creaCajasTexto(nodoTd){
var nameForm = ['alimento', 'calorias', 'grasas', 'proteina', 'carbohidratos'];
var instruccion = new Array();
for(var i=0; i<5; i++){
datos[i] = nodoTd.textContent;
instruccion = '<input type=\'text\' style=\'width:70px\' name=\'' + nameForm[i] + '\' value=\'' + nodoTd.textContent + '\'>';
nodoTd.innerHTML = instruccion;
if(i<4){nodoTd = nodoTd.previousSibling;}
}
ultimoNodoEditado = nodoTd;
}
function reiniciarFila(){
var nodoDiv = document.getElementById('botonesForm');
for(var i=4; i>-1; i--){
ultimoNodoEditado.innerHTML = datos[i];
ultimoNodoEditado = ultimoNodoEditado.nextSibling;
}
cambiarEnEdicion(ultimoNodoEditado);
enEdicion = true;
nodoDiv.innerHTML = '';
}
function cambiarEnEdicion(nodo){
if(enEdicion==true){
nodo.textContent = 'En edición';
nodo.style.color = 'gray';
}else{
nodo.textContent = 'Editar';
nodo.style.color = '#3300FF';
}
}

Saludos.

1228
Hola Javieerg.

Ejercicio resuelto perfectamente.


1229
Hola, dejo mi ejercicio CU01139E del tutorial de programación web con JavaScript resuelto, decir que resolví el ejercicio sin querer ver la solución propuesta en el tema, y lo que no me dí cuenta es que había unas sugerencias a seguir antes de dicha resolución, así que lo resolví de esta manera...

Citar
Una página web carga una tabla con datos relativos al contenido nutricional de los alimentos como se muestra a continuación:


Contenido nutricional por cada 100 g de alimento.
]Alimento   Calorías (kCal)   Grasas (g)   Proteína (g)   Carbohidratos (g)   Acciones
Arándano   49   0.2   0.4   12.7   Editar
Plátano   90   0.3   1.0   23.5   Editar
Cereza   46   0.4   0.9   10.9   Editar
Fresa   37   0.5   0.8   8.3   Editar
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”.

El HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Ejercicio_CU01139E.css">
<script type="text/javascript" src="Ejercicio_CU01139E.js"></script>
</head>
<body>
<div id="tabla1">
<form action="https://www.aprenderaprogramar.com" method="get">
<table>
<caption>Contenido nutricional por cada 100g de alimento.</caption>
<tr>
<th>Alimento</th><th>Calorias<br/>(kCal)</th><th>Grasas<br/>(g)</th><th>Proteina<br/>(g)</th><th>Carbohidratos<br/>(g)</th><th>Opciones</th>
</tr>
<tr>
<td>Arándano</td><td>49</td><td>0.2</td><td>0.4</td><td>12.7</td><td class="editar" onclick="editarFila(1)">Editar</td>
</tr>
<tr>
<td>Plátano</td><td>90</td><td>0.3</td><td>1.0</td><td>23.5</td><td class="editar" onclick="editarFila(2)">Editar</td>
</tr>
<tr>
<td>Cereza</td><td>46</td><td>0.4</td><td>0.9</td><td>10.9</td><td class="editar" onclick="editarFila(3)">Editar</td>
</tr>
<tr>
<td>Fresa</td><td>37</td><td>0.5</td><td>0.8</td><td>8.3</td><td class="editar" onclick="editarFila(4)">Editar</td>
</tr>
</table><br/>
<div id="botonesForm"></div>
</form>
</div>
</body>
</html>

El archivo CSS:
Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/

body {font-family: Arial, Helvetica, sans-serif;}
#tabla1{background-color: #FFFF99; padding: 11px; margin: 45px auto; width: 750px;}
table { width: 700px; text-align: center; border-collapse: collapse; margin: 0 auto; color: #0066FF;}
th {background-color: #0099FF; border-bottom: 1px solid white; color: #3300FF; }
td {padding: 11px; background-color: #00FFFF; border-bottom: 1px solid white; color: #3300FF; border-top: 1px solid white; }
tr:hover td { background-color: #3300FF; color: #00FFFF; }
.botonForm{margin: 11px 22px; background-color: #3300FF; color: #00FFFF;}
.editar{color: #3300FF; cursor: pointer;}
#texto1{margin: 0 22px;}

El archivo js:
Código: [Seleccionar]
var datos = new Array();
var nodoTd = document.getElementsByTagName('td');
var numFila;
var enEdicion = true;
function creaCajasTexto(inicio, fin){
var nameForm = ['alimento', 'calorias', 'grasas', 'proteina', 'carbohidratos'];
var instruccion = new Array();
for(var i=inicio; i<fin; i++){
datos[i-inicio] = nodoTd[i].textContent;
instruccion[i-inicio] = '<input type=\'text\' style=\'width:70px\' name=\'' + nameForm[i-inicio] + '\' value=\'' + datos[i-inicio] + '\'>';
nodoTd[i].innerHTML = instruccion[i-inicio];
}
cambiarEnEdicion(fin);
}
function editarFila(numeroFila){
if(numeroFila==1 && enEdicion==true){creaCajasTexto(0, 5);}
if(numeroFila==2 && enEdicion==true){creaCajasTexto(6, 11);}
if(numeroFila==3 && enEdicion==true){creaCajasTexto(12, 17);}
if(numeroFila==4 && enEdicion==true){creaCajasTexto(18, 23);}
if (enEdicion==true){
var nodoDiv = document.getElementById('botonesForm');
nodoDiv.innerHTML = '<span id=\'texto1\'>Pulse Aceptar para guardar los cambios o cancelar para anularlos.</span><br/>' +
'<input type=\'submit\' value=\'Aceptar\' class=\'botonForm\'><input type=\'reset\' value=\'Cancelar\' class=\'botonForm\' onclick=\'reiniciarFila()\'>';
numFila = numeroFila;
enEdicion = false;
}else{
alert('Solo se puede editar una línea. Recargue la página para poder editar.')
}
}
function reiniciarFila(){
var inicio; var fin;
var nodoDiv = document.getElementById('botonesForm');
if(numFila==1){inicio=0; fin=5;}
if(numFila==2){inicio=6; fin=11;}
if(numFila==3){inicio=12; fin=17;}
if(numFila==4){inicio=18; fin=23;}
var instruccion = new Array();
for(var i=inicio; i<fin; i++){
instruccion[i-inicio] = datos[i-inicio];
nodoTd[i].innerHTML = instruccion[i-inicio];
}
cambiarEnEdicion(fin);
enEdicion = true;
nodoDiv.innerHTML = '';
}
function cambiarEnEdicion(numEdicion){
if(enEdicion==true){
nodoTd[numEdicion].textContent = 'En edición';
nodoTd[numEdicion].style.color = 'gray';
}else{
nodoTd[numEdicion].textContent = 'Editar';
nodoTd[numEdicion].style.color = '#3300FF';
}
}

Saludos.

1230
Hola.

Dejo el ejercicio siguiendo las indicaciones que comentaste.

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 aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; margin:25px;}
#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px; cursor: pointer;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#pulsador:hover{background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function gestionProceso(){
var nodoDiv = document.getElementById('respuesta');
var cincoNumeros = pedirCincoNumeros();
var numerosMultiplicados = multiplicarPorCinco(cincoNumeros);
var msg = crearMensaje(numerosMultiplicados, cincoNumeros);
mostrarResultados(msg, nodoDiv);
}
function pedirCincoNumeros(){
var cincoNumeros = new Array;
for(var i=0; i<5; i++){
cincoNumeros[i] = prompt('Introduce un número: ');
cincoNumeros[i] = Number(cincoNumeros[i]);
}
return cincoNumeros;
}
function multiplicarPorCinco(cincoNumeros){
var numerosMultiplicados = new Array;
for(var i=0; i<5; i++){
numerosMultiplicados[i] = cincoNumeros[i]*5;
}
return numerosMultiplicados;
}
function crearMensaje(numerosMultiplicados, cincoNumeros){
var msg = 'Multiplicamos por 5 los número introducidos: ';
for(var i in cincoNumeros){
msg = msg + cincoNumeros[i] + '*5 = ' + (numerosMultiplicados[i]);
if(i!=3){
if(i!=4){
msg = msg + ', ';
}else{
msg = msg + '.';
}
}else{
msg = msg + ' y ';
}
}
return msg;
}
function mostrarResultados(msgParaMostrar, nodo){
nodo.textContent = msgParaMostrar;
}
</script>
</head>
<body>
<h1>Ejercicio curso aprenderaprogramar.com</h1>
<div id = "respuesta"></div>
<div id ="pulsador" onclick="gestionProceso()"> Empezar </div>
</body>
</html>

1231
Ya verás como no  ;D


Cualquier duda que tengas, no dejes de exponerla.

Saludos.


1232
Hola Pasandav.

En tu resolución, no haces uso del método substring.

Usas esta linea:
Código: [Seleccionar]
boolean empiezaConA = entradaTeclado.substring(0).toLowerCase().startsWith("a");
colocando substring(0) lo que le estás diciendo es que coja la palabra entera, así que si dejas la linea de esta otra forma:
Código: [Seleccionar]
boolean empiezaConA = entradaTeclado.toLowerCase().startsWith("a");
El resultado seguirá siendo el mismo.

Aquí tienes un ejercicio bien resuelto que podrías usar para entenderlo bien, https://www.aprenderaprogramar.com/foros/index.php?topic=2873.msg13102#msg13102

Saludos.

1233
Hola, otra solución mas.

Citar
EJERCICIO
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 5 los números introducidos: 1*5 = 5, 3*5 = 15, 9*5 = 45, 10*5 = 50 y 7*5 =35.

y por aquí el 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 aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; margin:25px;}
#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px; cursor: pointer;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#pulsador:hover{background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function multiplicarPorCinco() {
var nodoDiv = document.getElementsByTagName('div');
var numero = new Array();
var num = 0;
var msg = 'Multiplicamos por 5 los número introducidos: ';
for(var i=0; i<5; i++){
num = prompt('Introduce un número: ');
numero[i]= Number(num);
}
for(i in numero){
msg = msg + numero[i] + '*5 = ' + (numero[i]*5);
if(i!=3){
if(i!=4){
msg = msg + ', ';
}else{
msg = msg + '.';
}
}else{
msg = msg + ' y ';
}
}
nodoDiv[0].textContent = msg;
}
</script>
</head>
<body>
<h1>Ejercicio curso aprenderaprogramar.com</h1>
<div></div>
<div id ="pulsador" onclick="multiplicarPorCinco()"> Empezar </div>
</body>
</html>

Saludos.

1234
Hola aquí dejo otro ejercicio.

Citar
EJERCICIO
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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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, #marcaC, #marcaPunto, #marcaReinicio, #marcaVisor{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, #marcaC:hover, #marcaPunto:hover, #marcaReinicio:hover, #marcaVisor: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 nodoLimpiar = document.querySelector ('.limpiar');
nodoLimpiar.style.backgroundColor = 'red';
nodoLimpiar.style.color = 'white';
}
function marcarPunto(){
var nodoPunto = document.querySelector('.punto');
nodoPunto.style.backgroundColor = 'violet';
nodoPunto.style.color = 'white';
}
function marcarVisor(){
var nodoPantalla = document.querySelector('.pantalla');
nodoPantalla.style.backgroundColor = 'blue';
}
function reiniciarColores(){
var nodoLimpiar = document.querySelector ('.limpiar');
nodoLimpiar.style.backgroundColor = '#FF7C87';
nodoLimpiar.style.color = '#888888';
var nodoPunto = document.querySelector('.punto');
nodoPunto.style.backgroundColor = '#FFFFFF';
nodoPunto.style.color = '#888888';
var nodoPantalla = document.querySelector('.pantalla');
nodoPantalla.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
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 = 'none';
}
var listaNodosOperadores = document.querySelectorAll('#calculadora .teclas span.operador');
   for (var i=0; i<listaNodosOperadores.length; i++) {
listaNodosOperadores[i].style.backgroundColor = '#FFDAB9';
listaNodosOperadores[i].style.color = '#888888';
listaNodosOperadores[i].style.border = 'none';
}
var nodoIgual = document.querySelector ('.igual');
nodoIgual.style.backgroundColor = '#F1FF92';
nodoIgual.style.color = '#888888';
nodoIgual.style.border = 'none';
}
function pulsada(tecla) {
var listaNodosPantalla = document.getElementsByClassName('pantalla');
var nodoTextoPantalla = listaNodosPantalla[0].firstChild;
switch(tecla) {
case 'C':
nodoTextoPantalla.nodeValue = ' ';
break;
case '=':
var resultado = eval(nodoTextoPantalla.nodeValue);
nodoTextoPantalla.nodeValue = resultado;
break;
default:
nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
break;
}
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>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="marcaC" onclick="marcarC()" >Marcar C</div>
<div id="marcaPunto" onclick="marcarPunto()" >Marcar punto</div>
<div id="marcaVisor" onclick="marcarVisor()" >Marcar visor</div>
<div id="marcaReinicio" onclick="reiniciarColores()" >Reiniciar colores</div>
</div>
</body>
</html>


En el punto d no se me ocurrió otra forma de reiniciar los colores. Bueno, si se me ocurrió, pero son formas que todavía no se han estudiado en el curso.

Saludos.


1235
Hola Carlos Andres.

Lo primero, para próximos ejercicio, cuando vayas a introducir código en el foro, antes presiona el botón # (insertar código) que se encuentra arriba del campo de escritura, te saldrán unas etiquetas similares a estas: [cod] [/cod] y a continuación pega tu código entre esas etiquetas para que quede así:

Código: [Seleccionar]
import java.util.*;
public class Desarmador{
   public static void main(String [] args){
   System.out.println("Escribe una palabra");     
   Scanner escaner=new Scanner(System.in);   
   String Cadena=escaner.nextLine();   
   for( int i =0; i<(Cadena.length()); i++){
      System.out.println("Letra "+(i+1)+": "+Cadena.substring (i,i+1));
   }//Cierre del bucle for
   }//Cierre del metodo main
    }//Cierre de la clase desarmador
De esta manera será mas fácil revisarlo.

En cuanto a la resolución del ejercicio, decirte que realiza exactamente lo que se pide.
Todo correcto.

Saludos.

1236
Si, es lo que devuelve, pero el problema que tuve era porque yo hacia esto:

if(palabra.lenght == 0)


Escribiendo eso el código javascript no se me ejecutaba.


1237
Hola freddychpo.

Tu ejercicio está bien resuelto, hace exactamente lo que pide el enunciado.

Lo único en esta linea que pongo abajo se te coló un espacio entre Box2 y las comillas.

<div id="Box2 " class="box"></div>


Saludos.

1238
Hola GonzaH, gracias por tu tiempo.

Tomo nota como siempre.

En cuanto a la comparación la hice para saber que resultado devolvía length si la variable palabra no recibía ningún dato, porque en un principio pensaba que devolvería 0.

Saludos.

1239
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

El código:

Código: [Seleccionar]
<html>
<head>
<title>Concepto de Bucles. Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function deletrearPalabra(){
var palabra;
var msg = 'Letra ';
palabra = prompt('Introduzca una palabra: ');
var i=1;
if(palabra.length==''){
msg = 'No se introdujo ningún carácter.';
}else{
while(i<=palabra.length){
if(i==palabra.length){
msg = msg + i + ': ' + palabra.charAt(i-1);
}else{
msg = msg + i + ': ' + palabra.charAt(i-1) + '\nLetra ';
}
i++;
}
}
alert(msg);
}
</script>
</head>
<body>
<div>
<p>
<p>EJERCICIO</p>
<p>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.</p>
<p>Por ejemplo si se introduce “ave” debe mostrar:</p>
<p>Letra 1: a</p>
<p>Letra 2: v</p>
<p>Letra 3: e</p>
</p>
<img onclick="deletrearPalabra()" src="http://i.imgur.com/0rendoU.png" alt="Ejercicio 1" title="Ejercicio 1 CU01131E">
</div>
</body>
</html>

Saludos.


1240
Aquí van las dos partes del ejercicio:

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:
Letra 1: a
Letra 2: v
Letra 3: e

y el 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>Concepto de Bucles. Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function deletrearPalabra(){
var palabra;
var msg = 'Letra ';
palabra = prompt('Introduzca el primer nombre: ');
for(var i=1; i<=palabra.length; i++){
if(i==palabra.length){
msg = msg + i + ': ' + palabra.charAt(i-1);
}else{
msg = msg + i + ': ' + palabra.charAt(i-1) + '\nLetra ';
}
}
alert(msg);
}
</script>
</head>
<body>
<div>
<p>
<p>EJERCICIO 1</p>
<p>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.</p>
<p>Por ejemplo si se introduce “ave” debe mostrar:</p>
<p>Letra 1: a</p>
<p>Letra 2: v</p>
<p>Letra 3: e</p>
</p>
<img onclick="deletrearPalabra()" src="http://i.imgur.com/0rendoU.png" alt="Ejercicio 1" title="Ejercicio 1 CU01131E">
</div>
</body>
</html>

y el segundo ejercicio:
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. 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 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;}
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 mostrarParrafos(){
var msg = 'Párrafo ';
var parrafosObtenidos = document.getElementsByTagName('p');
for(var i=0; i<parrafosObtenidos.length; i++){
if((i+1)==parrafosObtenidos.length){
msg = msg + (i+1) + ' contiene:  ' + parrafosObtenidos[i].childNodes[0].nodeValue;
}else{
msg = msg + (i+1) + ' contiene:  ' + parrafosObtenidos[i].childNodes[0].nodeValue + '\nPárrafo ';
}
}
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><p>Ciruela</p>
<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>
<h3 class="boton" onclick="mostrarParrafos()">Pulse aquí para contar los párrafos</h3>
</body>
</html>

Saludos.

Páginas: 1 ... 57 58 59 60 61 [62] 63 64 65

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