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

Páginas: 1 2 [3] 4
41
Hola.. después de varias vueltas y gracias a la ayuda de los moderadores, he conseguido sacar una solución al problema propuesto ejercicio CU01140E del tutorial básico de programación web JavaScript desde cero.

Seguro que es mejorable y me gustaría recibir opiniones de como hacerlo mejor. De hecho ahora me propondré a mirar otros ejercicios resueltos

Espero que os sirva.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>My div</title>
<meta charset="utf-8">
<style type="text/css">

body {font-family: sans-serif; text-align:center; margin-top: 50px;}

#añadirID, #anidarID {padding:15px; width: 130px; margin: 0 auto; color: white; border-radius: 40px; background: rgb(202, 60, 60); cursor: pointer;}
#añadirID:hover, #anidarID:hover {background: rgb(66, 184, 221);}

</style>
<script type="text/javascript">

contador = 1;

function introducirDiv(action) {

if (action == 'añadir') {

var nodoHijo = document.createElement("div");

nodoHijo.textContent = "Nodo creado " + contador;

nodoHijo.style.borderStyle = "solid";
nodoHijo.style.width = "500px";
nodoHijo.style.marginLeft = "450px";
nodoHijo.style.marginTop = "50px";
nodoHijo.style.background = "#F5DA81";

document.body.appendChild(nodoHijo);

contador = contador +1;

}
else {
var nodoLarva = document.createElement("div");

nodoLarva.textContent = "Nodo creado" + contador;

var probeta = document.getElementById('paciente');

probeta.appendChild(nodoLarva);

nodoLarva.style.borderStyle = "solid";
nodoLarva.style.margin = "30px";
nodoLarva.style.background = "#81BEF7";
nodoLarva.style.padding = "25px";
nodoLarva.style.display ="inline-block";
contador = contador +1;

}

}

</script>
</head>
<body>
<div id="paciente" style="border-style:solid; margin: 30px; padding:25px; display:inline-block">Curso de Javascript aprendeaprogramar.com</div>
<br><br><br>
<div style="width: 500px; display:inline-block; margin-left:170px">
<div id="añadirID" style="float:left" onclick="introducirDiv('añadir')">Añadir al final</div>
<div id="anidarID" onclick="introducirDiv('anidar')">Anidar</div>
</div>

</body>
</html>

Por ejemplo me gustaría saber de que mejor forma puedo dar estilos css a los elementos de nueva creación que no sea uno por uno.

Gracias


42
Muchas gracias.. me ha servido..

Sigo investigando para resolver el ejercicio

43
Disculpa pedro,, pero realizando la opración me he dado cuenta de que hay algo que me falta..

Según el método que me has mostrado, aún necesito de un elemento span, div, h1, etc.. donde poder alojar mi nuevo elemento creado...

lo que a mi me gustaría es crear dentro del body, un nuevo elemento. Un div, span, etc... siendo el body su nodo padre directo..

Es posible eso?

Y si es posible, como puedo dotar a ese nuevo elemento de características con css antes de crearlo?

gracias

44
Vale si, esto me aclara muchas cosas.. En este caso ya puedo resolver como introducir en mi función nuevos elementos para trabajar con ellos, usando el getElement... Gracias.. Cuando avance en el ejercicio seguro necesitaré mas ayuda.. XD

45
Hola, estoy atascado en la entrega CU01140E del curso básico de programación web con Javascript desde cero.

Habiendo entendido los dos ejemplos del apartado relacionados con la creación de un nuevo elemento a través de "createElement", he aprendido a crear un nuevo elemento (por ejemplo div) dentro de otro elemento en el cual invocamos una función.

Aquí ejemplo básico:

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

<html>

<head> <title>Curso JavaScript aprenderaprogramar.com</title>

<meta charset="utf-8">

<style type="text/css">

body {font-family: sans-serif; text-align:center; }

div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}

div div {background-color: yellow;}

</style>

<script type="text/javascript">

var contador = 1

function crearNodoHijo(nodoPadre) {

var nodoHijo = document.createElement("div");

var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);

nodoHijo.appendChild(nodoTexto);

nodoPadre.appendChild(nodoHijo);

contador = contador +1;

}

</script>

</head>

<body>

<div id="nodoRaiz" onclick="crearNodoHijo(this)">

Contenido inicial es este texto

</div>

</body>
</html>

Mi problema llega al intentar resolver el ejercicio propuesto. Ya que me piden que cree un elemento 'div' fuera del elemento que invoca a la función.. Y no tengo ningún caso anterior que me enseñe hacer eso.

En mi caso invoco a la función de creación de elementos desde un botón.. y me gustaría crear un elemento 'div' que su nodo padre sea body...

Podéis darme algunas nociones? gracias

46
Hola gracias por la respuesta...

Y aprovecho para hacerte una pregunta ya que has mencionado el hilo de aprendizaje para los cursos de programación.

Y es que como has indicado ya he realizado los cursos de HTML y CSS. Actualmente sigo el curso de Javascript.. Mi pregunta es si es necesario después hacer el curso de php. Se que todo depende de si se quiere especializar alguine en Front o en Back-end.. Yo por mi parte no lo tengo muy claro.. Me gusta el lenguaje JAvascript y me gustaría seguir avanzando en él.. pero no se muy bien hacia que dirección...

Gracias

47
Hola aqui os dejo la resolución del ejercicio CU01138E del tutorial de programación web desde cero con JavaScript.

He tenido algunas dificultades con el css, por que no tengo frescos los conocimientos. Por ejemplo no he sabido cuadrar el texto en el medio de la caja sin que ello me desmoronase la estructura cuadrada... En fin cuando acabe con Javascript tendré que darle una vuelta a CSS..

Por lo demás creo que la solución no está del todo desencaminada

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Pawa</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}

div {text-align: center;}

#contenedor {width: 400px; height: 400px; margin: 0 auto; margin-top: 50px; ba border-style: solid; border-width: 0px;}
#superior {width: 400px; height: 200px; }
#inferior {width: 400px; height: 200px; }
#caja1 {border-style: solid; border-width: 2px; width: 196px; height: 196px; margin: 0px; float: left;}
#caja2 {border-style: solid; border-width: 2px; width: 196px; height: 196px; margin: 0px; display: inline-block;}
#caja3 {border-style: solid; border-width: 2px; width: 196px; height: 196px; margin: 0px; float: left;}
#caja4 {border-style: solid; border-width: 2px; width: 196px; height: 196px; margin: 0px; display: inline-block;}
#adelante {padding:15px; width: 130px; margin: 0 auto; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, {background: rgb(66, 184, 221);}

</style>
<script type="text/javascript">
var numeroActual = 1;

function cambiarImagen(movimiento){

if (numeroActual == 1 && movimiento == 'adelante') {
var valorNuevoImagen = 2;

document.getElementById('caja1').innerHTML='<div style=\' background-color: black; height: 196px; color: white; \'>El</div>';

}

if (numeroActual == 2 && movimiento == 'adelante') {
var valorNuevoImagen = 3;

document.getElementById('caja2').innerHTML='<div style=\' height: 196px; \'>poder</div>';

}

if (numeroActual == 3 && movimiento == 'adelante') {
var valorNuevoImagen = 4;

document.getElementById('caja3').innerHTML='<div style=\' height: 196px; \'>de</div>';

}

if (numeroActual == 4 && movimiento == 'adelante') {
var valorNuevoImagen = 5

document.getElementById('caja4').innerHTML='<div style=\' background-color: yellow; height: 196px; color: black; \'>javascript</div>';

}

if (numeroActual == 5 && movimiento == 'adelante'){
alert('No se puedde continuar');
}


numeroActual = valorNuevoImagen;
}


</script>

</head>
<body>
<div id="contenedor">

<div id="superior">
<div id="caja1">?</div>
<div id="caja2">?</div>
</div>

<div id="inferior">
<div id="caja3">?</div>
<div id="caja4">?</div>
</div>

</div>

<div id="adelante" onclick="cambiarImagen('adelante')">Pulsa aquí</div>
</body>
</html>

48
Hola yo no he entendido que significa :
"window.addEventListener('load',ejemplo,false)"

Me lo podrías explicar?

49
Hola aquí os dejo mi propuesta para el ejercico CU01135E del tutorial básico de programación web con JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>for-in</title>
<meta charset="utf-8">
<script type="text/javascript">
function pedirNumeros() {

var numeros = new Array();


for (var i = 0; i <= 4 ; i++) {
numeros[i] = prompt('Por favor introduzca un numero: ');
}
var msg = '';
for(i in numeros){ msg = msg + '3*' + numeros[i] + ' = ' + (numeros[i]*3) + ', ';}

alert('Multiplicamos por 3 los número introducidos: ' + msg);
}
</script>
</head>
<body>
<img onclick="pedirNumeros()" src="http://fotosdeamorconfrases.com/wp-content/uploads/2015/08/imagenes-de-monitos-tiernos-bebes.jpg" alt="La fiesta el monkey" title="Como molan los monitos">
</body>
</html>

50
Hola aquí os dejo mi propuesta para la resolución del ejercicio CU01132E del tutorial de programación desde cero con JavaScript.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>while</title>
<meta charset="utf-8">
<script type="text/javascript">
function damePalabra() {
var palabra = prompt('Por favor introduzca una palabra cualquiera: ');
var i = 0; var msg = '';

while (i<palabra.length) { i++;

msg = msg + 'Letra '+ i + ': ' + palabra.charAt(i-1) + '\t\t';

}

alert ('Su palabra consta de las letras: \n\n'+ msg);

}
</script>
</head>
<body style="margin:center">
<h1>Presiona la foto para resolver el ejercicio</h1>
<img onclick="damePalabra()" src="http://i138.photobucket.com/albums/q278/jorgeletralia/mono.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">

</body>
</html>

Saludos  :o

51
Vale y ya por fin, gracias a la paciencia de los moderadores del Chat, aquí dejo mis propuestas para el ejercico mencionado CU01131E del curso básico de programación con JavaScript.

Ejercicio nº 1

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Bucles</title>
<meta charset="utf-8">
<script type="text/javascript">
function solicitarNombre() {

var palabra= prompt('Por favor introduzca una palabra: ');

var msg = 'Su palabra tiene las letras: \n\n';

for (var i=1; i<=palabra.length; i++){

msg = msg + 'Letra '+ i + ': '+ palabra.charAt(i-1) + '\n';

}

alert(msg);



}


</script>
</head>
<body>
<img onclick="solicitarNombre()" src="https://nosinmimono.files.wordpress.com/2012/06/estudiando.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
</body>
</html>


Ejercicio º2

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

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

var izqda_dcha = true;

function cambiarColores(elemento) {

var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow'];

var elementosObtenidos = document.getElementsByTagName(elemento);

if (izqda_dcha == true) {

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

                elementosObtenidos[i].style.backgroundColor = color[i%4];

                }

} else {

                for (var j=elementosObtenidos.length-1; j>=0; j--) {

                elementosObtenidos[j].style.backgroundColor = color[(j+3)%4];

                }

}

if (izqda_dcha == false) { izqda_dcha = true; } else { izqda_dcha = false; }

}

function mostrarContParrafos(elemento2) {

var elementosObtenidos = document.getElementsByTagName(elemento2);

var msg = 'Los párrafos contienen las siguientes palabras: \n\n';

for (var i=0; i<elementosObtenidos.length; i++) {
msg = msg + 'Párrafo ' + (i+1) + ' contiene la palabra: ' + elementosObtenidos[i].childNodes[0].nodeValue + '\n\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>

<h3 class="boton" onclick="cambiarColores('p')">Pulse aquí para cambiar colores</h3>
<h3 class="boton" onclick="mostrarContParrafos('p')">Pulse aquí para mostrar el texto que contienen los parrafos</h3>



</body>
</html>


52
Parece increible pero se ha solucionado solo con esos cambios.

Gracias, y espero que no me cojais manía por postear tanto en domingo..   :o

53
Hola de nuevo

Estoy resolviendo el prmier apartado del ejercicio CU01131E del curso básico de programación con JavaScript de aprenderaprogramar.com:

 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

Con lo aprendido recientemente he creado una función con un bucle for pero no me funciona.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Bucles</title>
<meta charset="utf-8">
<script type="text/javascript">
function solicitarNombre() {

var palabra= prompt('Por favor introduzca una palabra: ');

var msg = 'Su palabra tiene las letras: \n\n';

for (var i=1; i=<palabra.length; i++){

msg = msg + 'Letra '+ i + ': '+ palabra.charAt(i-1);

alert(msg);

}


</script>
</head>
<body>
<img onclick="solicitarNombre()" src="https://nosinmimono.files.wordpress.com/2012/06/estudiando.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
</body>
</html>

he comprobado un ejercico resuelto por pedro,, y he visto que has utilizado un elemento If else para solucionarlo. Pero me gustaría saber si es estrictamente necesario o se puede resolver de alguna manera con mi propuesta. gracias

Propuesta de pedro,,
Código: [Seleccionar]
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);

55
Hola buenas.. habiendo comprendido la dinámica de los bucles 'for', ahora en el segundo exjemplo de este apartado del curso hay todavía algo que no tengo tan claro. Estoy en la entrega CU01131E del tutorial de programación con JavaScript desde cero de aprenderaprogramar.com

Código: [Seleccionar]
var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow'];

var elementosObtenidos = document.getElementsByTagName(elemento);

if (izqda_dcha == true) {

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

                elementosObtenidos[i].style.backgroundColor = color[i%4];

si i=0; color[i%4]= 0 y de aquí obtenemos el nuevo color para elementosObtenidos[0] = Manzana verdad?

Pero no entiendo como funciona el operador %, no encuentro la lógica de su funcionamiento incluso habiendo releido su definición unas 50 veces. Podrías por favor ponerme un ejemplo de como se opera y como obtenemos el 'resto' de la division?

después no tengo muy claro el siguiente apartado del ejemplo, quería confirmar que es así como funciona

Código: [Seleccionar]
for (var j=elementosObtenidos.length-1; j>=0; j--) {

                elementosObtenidos[j].style.backgroundColor = color[(j+3)%4]


aquí j=elementosObtenidos.length-1; significa que j=13 ??
Si es así color[(j+3)%4] debería ser color[16%4] que su resultado es 0.

si j=13; elementosObtenidos[j], ha de ser el elmento 13 del Array que es frambuesa, es correcto?

En definitiva no se muy bien si estoy comprendiendo la función length y sobre todo no comprendo el operador %.

y por ultimo si me lo permites, no consigo entender del todo como funciona el mecanismo 'izqda_dcha' para hacer rotar las posiciones de los colores. Por una lado declaramos la var izqda_dcha fuera de la función, no se por que.. y luego al final de la función utilizamos un If else con la sentencia if (izqda_dcha == false) { izqda_dcha = true; } else { izqda_dcha = false; }..

Si pudieras darme algunas nociones sobre esto te lo agradecería mucho.

Gracias

56
Vale vale vale ya lo he entendido.. el primer for es para darle valores a la matriz subpalabra... y el segundo for es para incrustar esos valores en la variable msg para poder luego mostrarlos en la alerta... ..... madre mia lo que me ha costado

El tercer apartado de este ejemplo también lo he logrado entender despues de aplicar la lógica aprendida.

Cuando sea capaz de asimilar esto si no te importa volveré a escribir una entrada para poder entender el ejemplo numero dos del apartado. El refetente al cambio de colores de las etiquetas <p>.

Pero primero voy a volver a verlo con lo aprendido.

muchas gracias

57
Hola buenas, escribo este post no por que haya resulto el ejercicio, sino todo lo contrario es por que me he atascado en este apartado del curso y no puedo avanzar. El ejercicio es el CU01131E del tutorial básico de programador web JavaScript.

Mi problema es que no llego a entender como funciona la función 'for'. Y es que intento entender los dos ejemplos propuestos en este apartado por el curso, pero no logro entenderlos.

No entiendo como esto:

Código: [Seleccionar]
function ejemploFor() {

var palabra = 'Esternocleidomastoideo';

var subpalabra = new Array();

subpalabra[0]='';

var msg = 'Diez primeras letras: \n\n';

for (var i=1; i<=10; i++){subpalabra[i] = subpalabra[i-1] + palabra.charAt(i-1);}

for (var i=1; i<=10; i++){msg = msg + subpalabra[i] +'\n';}

msg = msg + '\nPalabra al revés: \n\n';

for (var i=palabra.length; i>0; i--){

msg = msg + palabra.charAt(i-1);

}

alert (msg);

}

puede llegar a convertirse en esto:

Diez primeras letras:

E
Es
Est
Este
Ester
Estern
Esterno
Esternoc
Esternocl
Esternocle

Palabra al revés:

oediotsamodielconretsE


No escribiría pidiendo ayuda si no me sintiera realmente frustado por que me impide avanzar en el curso. Hay alguna manera de explicarme mejor como funciona la estructura de bucles con los mismos ejemplos del apartado del curso.

Muchas gracias

58
Genial la explicación.. la verdad es que no sabía como resolver el ejercicio y me ha quedado muy claro. No se me había ocurrido recurrir a la sentencia If else para hacer funcionar los botones...

Gracias pedro,,

59
Por cierto pedro,, hay algún ejemplo de este ejercicio resuelto correctamente en los foros.. Es que no consigo verlo del todo.

Gracias

Páginas: 1 2 [3] 4

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