Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Temas - Salvadoruve2

Páginas: [1] 2
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / (CU01156E) Convertir String a Number JavaScript. Redondear. toFixed, isNaN, toPr
« en: 11 de Diciembre 2016, 14:27 »
Hola aquí dejo mi solución para el ejercicio planteado en dicho apartado.

Es la segunda vez que hago el ejercicio, puesto que he retomado hace poco los cursos de aprendeaprogramar, y es curioso ver las diferentes formas de resolverlo antes y despues.

Espero que esté correcto. Gracias

Citar
Crea un script donde:

a) Se pida al usuario que introduzca un número superior a 10000000 y se muestre por pantalla ese número con tres dígitos significativos. Si el número introducido no cumple la condición, se volverá a solicitar que se introduzca.

b) Se pida al usuario que introzca un número con 4 decimales y se muestre por pantalla ese número redondeado a dos decimales. Si el número introducido no cumple la condición, se volverá a solicitar que se introduzca (para ello habrá que analizar que la cadena introducida cuente con cuatro dígitos después del carácter de punto decimal).

c) Se pida al usuario que introduzca una frase que comience por un número que puede ser entero o decimal. Para dicha frase, se devolverá el número entero que se pueda extraer, y el número decimal que se pueda extraer. Deberá analizarse la entrada con una expresión regular, de modo que si no cumple la condición, se vuelva a solicitar la introducción de la frase.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Numerología</title>
<meta charset="utf-8">
<style type="text/css"></style>
<script type="text/javascript">
window.onload = function() {
var numeroUsuario = prompt ('Por favor introduzca un número igual o mayor a 10000000');

if (Number(numeroUsuario) && numeroUsuario.length >= 8) {
var numeroUsuario = Number (numeroUsuario);
var precision = (numeroUsuario).toPrecision(3);
alert('El número con tres dígitos significativos es: ' + precision);

}else{
alert('Ha cometido un error, asegúrese que el numero introducido cumple con los requisitos de la alerta');
window.location.reload();
}


var numeroUsuario2 = prompt ('Por favor introduzca ahora un número con cuatro decimales, ejm: "4.1416"');

var expReg = /\d+\.\d{4,4}$/;

if (expReg.test(numeroUsuario2)) {
numeroUsuario2 = Number (numeroUsuario2);
alert('El número redondeado a dos decimales es: ' +numeroUsuario2.toFixed(2));
}else{
do { alert('Ha comoetido algún error, asegúrese que ofrece la información requerida en la alerta y que ela separación de los decimales es el símbolo "."');
var numeroUsuario2 = prompt ('Por favor introduzca ahora un número con cuatro decimales, ejm: "4.1416"');
  }
while (expReg.test(numeroUsuario2) == false);

numeroUsuario2 = Number (numeroUsuario2);

alert('El número redondeado a dos decimales es: ' + numeroUsuario2.toFixed(2));
}


var fraseUsuario =  prompt ('Por favor introduzca ahora una frase que empiece por un número entero o decimal. Ejm: "25 dias tiene un mes ficticio" o "3,1416 veces te dije ayer que compraras mistol".');

var expReg2 = /^\d+\.{0,1}\d+\s*\w+/;
var expRegExtraer = /^\d+\.{0,1}\d+/;
var expRegDecimal = /\.\d+/;

if (expReg2.test(fraseUsuario)) {
var extraerNumero = Number(expRegExtraer.exec(fraseUsuario));
var numeroEntero = parseInt(extraerNumero);
var numeroDecimal = expRegDecimal.exec(extraerNumero);
alert('El primer número que podemos extraer es: ' + extraerNumero);
alert('El número entero es : ' + numeroEntero + '\nY el número decimal es: ' + numeroDecimal);
}else{
do {alert('Ha comoetido algún error, asegúrese que ofrece la información requerida en la alerta');
fraseUsuario =  prompt ('Por favor introduzca una frase que empiece por un número entero o decimal. Ejm: "25 dias tiene un mes ficticio" o "3,1416 veces te dije ayer que compraras mistol".');
}
while (expReg2.test(fraseUsuario) == false);

var extraerNumero = Number(expRegExtraer.exec(fraseUsuario));
var numeroEntero = parseInt(extraerNumero);
var numeroDecimal = expRegDecimal.exec(extraerNumero);
alert('El primer número que podemos extraer es: ' + extraerNumero);
alert('El número entero es : ' + numeroEntero + '\nY el número decimal es: ' + numeroDecimal);

}

var nodoBody = document.getElementsByTagName('body')[0];
var despedida = '<h1>Buen trabajo!! has completado con éxito el recorrido. Si quieres volver a intentalo por favor recarga la página</h1>';
nodoBody.innerHTML = despedida;

}
</script>
</head>
<body>

</body>
</html>

2
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Paréntesis en expresiones regulares JavaScript. Flag. exec, test, mat CU01155E
« en: 09 de Diciembre 2016, 22:06 »
Hola, he retomado mis cursos de JavaScript despues de una pequeña pausa en un curso de idiomas.

He intentado resolver el ejercicio propuesto por el apartado. He comprobado otros ejercicios resueltos y no sé si mi ejercicio me ha quedado demasiado simple. Quizás me haya saltado algo.

Aqui está la respuesta:

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 validacionConExpReg que no recibe parámetros.

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

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>
<head>
<title>susodicho</title>
<meta charset="utf-8">
<script type="text/javascript">
function validacionConExpReg() {
var nombreUsuario = document.getElementById('nombre');
var apellidosUsuario = document.getElementById('apellidos');
var emailUsuario = document.getElementById('email');

//alert(emailUsuario.value);
var regExpNombre = /\w{3}/;
var regExpEmail = /\w+@{1,1}\w+\.\w+/;

if (regExpNombre.test(nombreUsuario.value)==true && regExpEmail.test(emailUsuario.value)==true) {
alert('ay! qué bien');
emailUsuario.value = atFuncion(emailUsuario);
emailUsuario.value = minusculas(emailUsuario.value);
}
else{
alert('Uno de los datos es incorrecto. Por favor comprueba que: \n -El nombre contiene al menos 3 letras. \n -El email contiene el simbolo "@" y al menos un punto "."');
nombreUsuario.value = " ";
apellidosUsuario.value = " ";
emailUsuario.value = " ";
window.location.reload();
}

function minusculas(email) {
return email.toLowerCase();
}

function atFuncion(email) {
return email.replace(/\sat\s/g, '@');
}

}
</script>
</head>
<body>
<h1>Cuestionario sobre la vida y el mamor</h1>
<h2>Por favor introduzca sus datos personales de verdad: </h2>
<div>
<form name="formularioDeContacto" class="formularioTipo1" method="get" onsubmit="validacionConExpReg()">
<p>Aquí abajo es donde colocar sus datos</p>
<label><span>Nombre: </span><input id="nombre" type="text" name="nombre"> </label><br><br>
<label><span>Apellidos: </span><input id="apellidos" type="text" name="apellidos"> </label><br><br>
<label><span>e-Mail: </span><input id="email" type="text" name="email"> </label><br><br>
<label>
<input type="submit" value="enviar">
</label>
<label>
<input type="reset"  value="cancelar">
</label>
</form>
</div>
</body>
</html>

3
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Prototype JavaScript sintaxis ¿separación por comas o punto y coma? (CU01147E)
« en: 03 de Diciembre 2016, 17:59 »
Hola quería hacer alusión a un error de sintaxis o una errata en la descripción siguiente de este apartado:

Citar
Alternativa 3: definir un objeto y asignarle contenido a su propiedad prototype creando un objeto único con la sintaxis de literal (propiedades enumeradas con dos puntos y separadas por comas):

function nombreObjeto (par1, par2, …, parN) {

this.propiedad1 = valorPropiedad1; this.propiedad2 = valorPropiedad2; …

}

nombreObjeto.prototype = {

propiedadComún1: valorPropiedadComún1;

propiedadComún2: valorPropiedadComún2;

…

métodoComún1: function (par1, par2, …, parN) { … },

métodoComún2: function (par1, par2, …, parN) { … },

…

}

 



.. y es que en la parte de las propiedades (propiedadComún1: valorPropiedadComún1;

propiedadComún2: valorPropiedadComún2;) no iría ";" sino "," para delimitar sentencias.

Siento la molestia, pero es que me ha traido un poco de cabeza a la hora de comprender la sintaxis. Luego en el ejemplo ya he caido en la cuenta del error.

Gracias



4
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Curso de C#
« en: 19 de Noviembre 2016, 16:38 »
Hola me gustaría hacer una pregunta, pues en la temática o apartado de esta línea de mensajes aparecen los lenguajes c, c++, c#, java, etc... Y quisiera saber si hay algún curso en la web sobre C# por que no lo he encontrado en el apartado de cursos.

Gracias

5
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / (CU01120E) switch JavaScript (condicional de selección). Diagrama de flujo y eje
« en: 19 de Noviembre 2016, 16:25 »
Hola me gustaría compartir que en este apartado hay una error en los textos y es que se repite un párrafo entero en el siguiente apartado:

Citar
La cláusula default es opcional y representa las instrucciones que se ejecutarán en caso de que no se verifique ninguno de los casos evaluados. El último break dentro de un switch (en default si existe esta cláusula, o en el último caso evaluado si no existe default) también es opcional, pero lo incluiremos siempre para ser metódicos.

break es opcional (pero en general recomendable) y provoca que una vez encontrada una coincidencia termine la evaluación de casos. Si no se incluye, se evaluarían el resto de casos (ejecutándose si fueran ciertos). De no incluirse break, podría producirse que se ejecuten dos o más casos.

La cláusula default es opcional y representa las instrucciones que se ejecutarán en caso de que no se verifique ninguno de los casos evaluados. El último break dentro de un switch (en default si existe esta cláusula, o en el último caso evaluado si no existe default) también es opcional, pero lo incluiremos siempre para ser metódicos.

Por lo demás el apartado me ha servido de mucha ayuda. Gracias

6
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Eventos Javascript cambiar color de texto al pasar el ratón por encima CU01157E
« en: 06 de Agosto 2016, 14:59 »
Hola alguien me puede decir por que no me funciona el código siguiente para el ejercicio propuesto CU01157E del curso básico de desarrollo web con lenguaje JavaScript?

Aqui el ejercicio propuesto:

Citar
a) Mediante el control de los eventos onmouseover y onmouseout, debemos hacer que cuando el usuario pase el ratón sobre las etiquetas h1 y h3, el color del texto pase a ser orange y cuando deje de pasarlo el texto quede en marrón.

aqui mi solución (VERSIÓN 1):

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

<html> <head><title>Portal web - aprenderaprogramar.com</title>

<meta name="description" content="Portal web aprenderaprogramar.com">

<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">

<script type="text/javascript">

window.onload = function () {

elemH1 = getElementsByTagName('h1');
elemH3 = getElementsByTagName('h3');

elemH1.onmouseover = function () { elemH1[0].style.color = 'orange'; }
elemH3.onmouseover = function() {elemH3[0].style.color = 'orange'; elemH3[1].style.color = 'orange';}

elemH1.onmouseout = function() {elemH1[0].style.color = 'braun';}
elemH13.onmouseout = function() {elemH3[0].style.color = 'braun'; elemH3[1].style.color = 'braun';}
}

//onmouseover y onmouseout naranja y marron
</script>

</head>

 <body> <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>

<h1>Novedades</h1>

<p>Aquí presentamos las novedades del sitio.</p>

<h3>Lanzamos el producto X-FASHION</h3>

<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>

<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>

<h3>Mejoramos el producto T-MOTION</h3>

<p>Hemos lanzado una nueva versión del producto T-MOTION</p>

<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>

</body>
</html>
Querría saber si así (o casi así) se puede resolver el ejercicio o de lo contrario hay que utilizar un bucle.

Gracias

7
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript redondear número con dos decimales convertir texto a número CU01156E
« en: 04 de Agosto 2016, 22:30 »
Hola, aquí mi resultado para el ejercicio propuesto CU01156E del curso básico de desarrollo web con lenguaje JavaScript desde cero:

Citar
Crea un script donde:

a) Se pida al usuario que introduzca un número superior a 10000000 y se muestre por pantalla ese número con tres dígitos significativos. Si el número introducido no cumple la condición, se volverá a solicitar que se introduzca.

b) Se pida al usuario que introzca un número con 4 decimales y se muestre por pantalla ese número redondeado a dos decimales. Si el número introducido no cumple la condición, se volverá a solicitar que se introduzca (para ello habrá que analizar que la cadena introducida cuente con cuatro dígitos después del carácter de punto decimal).

c) Se pida al usuario que introduzca una frase que comience por un número que puede ser entero o decimal. Para dicha frase, se devolverá el número entero que se pueda extraer, y el número decimal que se pueda extraer. Deberá analizarse la entrada con una expresión regular, de modo que si no cumple la condición, se vuelva a solicitar la introducción de la frase.


Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Number</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; margin: 0 auto;}
div {padding:15px; width: auto; display: inline-block; margin: 25px; margin-top: 300px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function start() {

var usuario = prompt('Por favor introduzca un número superior a 10000000');

var usuario2 = prompt('Introduzca ahora un número con 4 decimales, por ejemplo, \"3.1224\"');

var usuario3 = prompt('Introduzca ahora una frase que comience con un numero entero o decimal. Ejm: \"3 coches locos\"');

var expReg = /^[^0-9]/;

var usuario3Text = expReg.test(usuario3);

if (usuario < 10000000) {
alert('El numero introducido no es correcto, por favor intruzca de nuevo el número según las indicaciones');

}

if (usuario2.slice(-5,-4) != ".") {

alert('El numero introducido no es correcto, por favor compruebe que cuenta con los decimales indicados en el ejemplo');
}

if (usuario3Text == true) {alert('Frase introducida incorrecta. Por favor compruebe la frase de ejemplo');}

else{

var usuario = Number(usuario);

var usuario2 = Number(usuario2);

alert('Cadena de texto significativa de tres números para '+ usuario + ' es : ' + usuario.toPrecision(3));

alert('Si redondeamos el numero ' + usuario2+ ' a dos decimales, obtenemos: '+ usuario2.toFixed(2));

alert('El numero entero o decimal que podemos extraer de ' + usuario3 + 'es: ' + parseFloat(usuario3));

}

}
</script>
</head>
<body>
<div onclick="start()">Number</div>
</body>
</html>

8
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript ordenar palabras por orden alfabético ignorando mayúsculas CU01153E
« en: 03 de Agosto 2016, 13:47 »
Hola, propuesta de solución para ejercicio CU01153E del tutorial de desarrollo web con JavaScript del lado cliente.

Respecto al ejercicio siguiente :

Citar
EJERCICIO 1

Crea un script donde a partir del array [33, 2, 36, 55, 4, 1] se realicen los siguientes procesos:

a) Mostrar el array ordenado de menor a mayor y de mayor a menor usando la función sort y definiendo la función de ordenación de forma anónima, es decir, deberás invocar X.sort(function (…) { … } ) definiendo la función de forma anónima en vez de cómo función con nombre.

b) Crea una variable de nombre deMenorAMayor que contenga el resultado de ordenar de menor a mayor los elementos del array.

c) Crea una variable de nombre deMayorAMenor que contenga el resultado de ordenar de mayor a menor los elementos del array.

d) Muestra por pantalla el array original, la variable deMenorAMayor y la variable deMayorAMenor.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

EJERCICIO 2

Crea un script donde sea posible ordenar palabras por orden alfabético sin tener en cuenta la existencia de mayúsculas o minúsculas. Por ejemplo, declarar var miArray=['Moto', 'soto', 'Abaco', 'abeja', 'Sapo', 'nieve', 'Zumba, 'barco'] y tras ordenar obtener =[ 'Abaco', 'abeja', 'barco', 'Moto', 'nieve', 'Sapo', 'soto', 'Zumba].

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

El apartado 1 lo he resuelto de una manera rudimentaria, no se si se acerca a la acertada

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>No te Arrayes</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; margin: 0 auto;}
div {padding:15px; width: auto; display: inline-block; margin: 25px; margin-top: 300px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">

function start () {
var arrayModel = [33,2,36,55,4,1];

var msg = 'El array original es: ' + arrayModel + '\n';

msg = msg + 'El array ordenado de menor a mayor sería: ' + arrayModel.sort(function (elem1,elem2) {return elem1 - elem2;})+'\n';
msg = msg + 'El array ordenado de mayor a menor sería: ' + arrayModel.sort(function (elem1,elem2) {return elem2 - elem1;})+'\n';

alert(msg);

var newArrayModel = [33,2,36,55,4,1];

var msg2 = 'El array original es: ' + newArrayModel+ '\n';

var deMenorAMayor = newArrayModel.sort(function (elem1,elem2) {return elem1 - elem2;});

var newArrayModel = [33,2,36,55,4,1];

var deMayorAMenor = newArrayModel.sort(function (elem1,elem2) {return elem2 - elem1;});

msg2 = msg2 + 'El array ordenado de menor a mayor sería: ' + deMenorAMayor+ '\n';
msg2 = msg2 + 'El array ordenado de mayor a menor sería: ' + deMayorAMenor+ '\n';

alert(msg2);
}

</script>
</head>
<body>
<div onclick="start()">About Arrays</div>
</body>
</html>
El apartado numero dos no lo he sabido resolver correctamente con las herramientas que poseo hasta ahora. Si hay alguna sugerencia estaría encantado de saberla, gracias!

9
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / condicional if interrogante JavaScript document.getElementsByTagName CU01152E
« en: 02 de Agosto 2016, 18:00 »
Hola respecto al ejercicio de este apartado CU01152E del manual de desarrollo web con JavaScript. Código propuesto por el enunciado.

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

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

function ejemplo() {

var htmlADevolver = '';

var colorUsuario = prompt('Elija color red, yellow o blue');

htmlADevolver += colorUsuario ? '<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>' : '<h1>No eligió color</h1>';

var nodoBody = document.getElementsByTagName('body')[0];

nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;

}

</script>

</head>

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>

</body>
</html>
Preguntas:

a) ¿Qué significa el operador += que se emplea en el código?

Viene de la expresión: a += b;  equivale: a = a+b;


b) ¿Por qué usamos [ 0 ] para establecer nodoBody?

Para que el nuevo elemento H1 se anide en el hijo [ 0 ] de Body que en este caso es el mismo Body


c) ¿Qué ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qué ocurre esto.

htmlADevolver = ' ' significa que al menos hemos de escribir un caracter para que sea True la condición


d) ¿Qué ocurre si escribimos pink cuando nos pide el color? Razona por qué ocurre esto.

La sintaxis "style = background-color:" reconoce a Pink como un color verdadero y lo ejecuta según lo establecido


e) Modifica el código para que usando el operador ternario, si el usuario no introduce como color red, yellow o blue aparezca el mensaje ‘No eligió color o el color es no válido’

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

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

function ejemplo() {

var htmlADevolver = '';

var colorUsuario = prompt('Elija color red, yellow o blue');

htmlADevolver += colorUsuario && colorUsuario== 'yellow' || colorUsuario=='red' || colorUsuario=='blue'? '<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>' : '<h1>No eligió color</h1>';

var nodoBody = document.getElementsByTagName('body')[0];

nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;

}

</script>

</head>

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>

</body>
</html>

f) Reescribe el código inicial de partida sustituyendo el condicional ternario por if tradicionales.

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

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

function ejemplo() {

var htmlADevolver = '';

var colorUsuario = prompt('Elija color red, yellow o blue');

if (htmlADevolver += colorUsuario) {
if (colorUsuario== 'yellow') {
'<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>'
}
if (colorUsuario=='red') {
'<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>'
}
if (colorUsuario=='blue') {
'<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>'
}
} 

else {'<h1>No eligió color</h1>'}


htmlADevolver += colorUsuario && colorUsuario== 'yellow' || colorUsuario=='red' || colorUsuario=='blue'? '<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>' : '<h1>No eligió color</h1>';

var nodoBody = document.getElementsByTagName('body')[0];

nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;

}

</script>

</head>

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>

</body>
</html>


Este ultimo apartado he tenido un error que no he sabido solventar

10
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / SyntaxError: missing ) after argument list Depurar JavaScript. Ejemplo CU01151E
« en: 02 de Agosto 2016, 13:21 »
Ejercicio CU01151E del tutorial básico de desarrollo web desde cero con JavaScript.

Este es el mensaje que obtenemos al cargar la página.

Citar
SyntaxError: missing ) after argument list

alert('Hello';

Cuando activamos "probar"

Se activa el código y obtenemos:

Citar
unObjeto es
Array [  ]
this es [object Window]

La primera línea proviene de la sintaxis "console.log('unObjeto es' + unObjeto);" y obtenemos solo "unObjeto es" por que el Array está definido pero su contenido está vacío.

La segunda línea proviene de "console.log(unObjeto);" y obtenemos "Array []" por que aquí se nos pide el tipo de objeto que es unObjeto.

La tercera línea proviene de "console.log('this es ' + this);" y obtenemos "this es [object Window]" por que this hace referencia al objeto contenedor. Y el objeto contenedor de la función es objeto Padre predeterminado [object Window].

11
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo call JavaScript Diferencia con apply Constructores con herencia CU01150E
« en: 01 de Agosto 2016, 21:11 »
Ejercicios del curso básico de desarrollo web con JavaScript desde cero.

Ejercicio 1.

Hola he resuelto el ejercicio y no estoy muy serguro de haberlo hecho correctamente.

He conseguido que un objeto herede propiedades comunes y propiedades especificas de otros supertipos.. Pero lo que no he logrado es que los atributos tambien se hereden. He tenido que repetir el atributo de "nacionalidad" en la invocación de Médico y de médico especialista para conseguir hacer funcionar el programa.

No se si eso es correcto o hay una mejor forma de llevarlo a cabo.

Aquí mi propuesta

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Herencia prototype</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; margin: 0 auto;}
div {padding:15px; width: auto; display: inline-block; margin: 25px; margin-top: 300px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">


function Persona(nacionalidad) {
this.nombre = 'Marco';
this.nacionalidad = nacionalidad;
}

Persona.prototype.mostrarNAcionalidad = function() {alert('La nacionalidad del médico es ' + this.nacionalidad);}



function Medico(institucion,nacionalidad) {
Persona.call(this,nacionalidad);
this.institucion = institucion || 'Desconocida';

}


Medico.prototype = new Persona();


function MedicoEspecialista(especialidad,nacionalidad) {
Persona.call(this, nacionalidad);
this.especialidad = especialidad;
}

MedicoEspecialista.prototype = new Medico();


function start() {
var tipo = new Persona();

var profesion = new Medico('Hospital Central','Chilena');

alert('La nacionalidad del medico es ' + profesion.nacionalidad);

var cardiologo = new MedicoEspecialista('cardiología','Chilena');

alert('La institucion es ' + profesion.institucion);

cardiologo.mostrarNAcionalidad();

}

</script>
</head>
<body>
<div onclick="start()">Herencia</div>
</body>
</html>
PD: el ejercicio dos pensaba terminarlo cuando tuviera primero estos conceptos claros. Gracias

12
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / prototype Herencia JavaScript ejemplo código básico. Ejercicio resuelto CU01149E
« en: 28 de Julio 2016, 21:50 »
Hola mi resultado al ejercicio propuesto en este apartado CU01149E del curso básico de desarrollo web con JavaScript. Espero que esté correcto y como siempre abierto a sugerencias.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Herencia prototype</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; margin: 0 auto;}
div {padding:15px; width: auto; display: inline-block; margin: 25px; margin-top: 300px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">

function Vegetal() {this.definicion = 'Ser vivo sin movilidad'};

function PlantaCultivada() {this.nombreCinetifico = 'desconocido';}

PlantaCultivada.prototype = new Vegetal();

function Hortaliza() {this.nombreCinetifico = 'indefinido';}

Hortaliza.prototype.componentePrincipal = 'Agua';

Hortaliza.prototype = new PlantaCultivada();

function Tomate() {this.calorias = 39;}

Tomate.prototype = new Hortaliza();

function Lechuga() {this.calorias = 31;}

Lechuga.prototype = new Hortaliza();

function Zanahoria() {this.calorias = 45;}

Zanahoria.prototype = new Hortaliza();

function start() {
var tomate1 = new Tomate();
var lechuga1 = new Lechuga();
var zanahoria = new Zanahoria();

alert('El tomate es un ' + tomate1.definicion);


}
</script>
</head>
<body>
<div onclick="start()">Veganismo</div>
</body>
</html>

13
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / static Javascript. Propiedades y métodos estáticos. Ejercicio Resuelto CU01148E
« en: 28 de Julio 2016, 18:27 »
Hola aquí dejo mi solucion para el ejercicio propuesto en la entrega CU01148E del tutorial básico de desarrollo web con JavaScript.

Me gustaría saber si voy en la dirección correcdta o no con las propiedades estáticas.

Muchas gracias

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>empty heart</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; margin: 0 auto;}
div {padding:15px; width: auto; display: inline-block; margin: 25px; margin-top: 300px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function Meteoritos(diametro, temperatura, nombre) {
this.diametro = diametro; this.temperatura = temperatura; this.nombre = nombre;
}

Meteoritos.definicionDiccionario = 'Un meteorito es un meteoroide que alcanza la superficie de un planeta debido a que no se desintegra por completo en la atmósfera. La luminosidad dejada al desintegrarse se denomina meteoro.';

Meteoritos.obtenerRadio = function () {alert('El valor del radio del meteorito Armagedon es de: 350 metros' );}

Meteoritos.obtenerTemperaturaF = function () {alert('El valor de la temperatura en ºF del meteorito Armagedon es de: ' + (50*(9/5)+32) + ' grados.')};

function start() {
var meteorito1 = new Meteoritos(700,50, 'Armagedon');

alert('La definición de meteorito según el diccionario es: ' + Meteoritos.definicionDiccionario);

Meteoritos.obtenerRadio();

Meteoritos.obtenerTemperaturaF();

}
  </script>
</head>
<body>
<div onclick="start()">Dame tu fuerza pegaso</div>
</body>
</html>

14
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo herencia Prototype JavaScript crear objetos Ejercicio resuelto CU01147E
« en: 25 de Julio 2016, 16:28 »
Hola aquí dejo mi solución para el ejercicio propuesto en este apartado CU01147E del tutorial básico de programación web con JavaScript desde cero.

Me encantaría escuchar vuestras sugerencias. Gracias

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>empty heart</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; margin: 0 auto;}
div {padding:15px; width: auto; display: inline-block; margin: 25px; margin-top: 300px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function cometas(diametro, temperatura, nombre) {
this.diametro = diametro; this.temperatura = temperatura; this.nombre = nombre;
}

cometas.prototype = {
definicionDiccionario: '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 (variacion) {
this.radio = this.diametro/variacion;
},

obtenerTemperaturaF: function () {
this.nuevaTemperatura = ((this.temperatura*(9/5))+32);
},
}

function start() {
var cometa1 = new cometas(15000,77, 'Halley');
var cometa2 = new cometas(20000, 60, 'Hale-Bopp');
var cometa3 = new cometas(13500, 65, 'Wild 2');

alert('La definición de cometa según el diccionario es: ' + cometa1.definicionDiccionario);

cometa1.obtenerRadio(2);
alert('El valor del radio del cometa ' + cometa1.nombre + ' es de: ' + cometa1.radio + ' metros.');

cometa2.obtenerTemperaturaF();
alert('El valor de la temperatura en ºF del cometa ' + cometa2.nombre + ' es de: ' + cometa2.nuevaTemperatura + ' ºF');

}
  </script>
</head>
<body>
<div onclick="start()">Something about Cometas</div>
</body>
</html>

15
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Conflictos de nombres. Constructores JavaScript. Crear objetos vacíos. CU01145E
« en: 20 de Julio 2016, 14:28 »
Hola aquí dejo mi resultado al ejercicio propuesto en este apartado.

Como siempre abierto a sugerencias estoy.

Solo añadir que he introducido un ejemplo en el código al crear una función de nombre "despedir" en el que intento crear un conflicto con el método "gestionUsuario.despedir" y resulta que no hay ningún conflicto. El código se ejecuta correctamente.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>empty heart</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; margin: 0 auto;}
div {padding:15px; width: auto; display: inline-block; margin: 25px; margin-top: 300px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function start() {
var gestionUsuario = {};

gestionUsuario.preguntarNombre = function () {
this.nombreUsuario = prompt('Por favor introduzca su nombre');
this.idUsuario = prompt('Por favor introduzca su Id de Usuario');
}
gestionUsuario.preguntarNombre();

gestionUsuario.despedir = function () {
alert('Has visto que fácil era? Hasta luego ' + this.nombreUsuario);
}

gestionUsuario.despedir();

var conflictos = new despedir();
}

function despedir() {
alert('Comprobando conflictos');
}
</script>
</head>
<body>
<div onclick="start()">Crear Usuario</div>
</body>
</html>

16
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / class JavaScript Clases? Objetos predefinidos Global Ejercicio resuelto CU01144E
« en: 18 de Julio 2016, 21:06 »
Hola mi resultado para el ejercicio propuesto en este apartado CU01144E del taller práctico de programación web con JavaScript desde cero.

He añadido un pequeño contador para ir sumando el numero de pacientes a partir del método "curarPersona".

Estoy abierto a sugerencias. Gracias

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>objeto presente</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; margin: 0 auto;}
div {padding:15px; width: auto; display: inline-block; margin: 25px; margin-top: 300px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var contador = 0;

function funcionInterna() {
this.nombre = "Juan José Millán-Astray";
this.personasCuradas = 220;
this.especialidad = "Neurocirujano";
this.curarPersona = function () {
this.personasCuradas = this.personasCuradas + contador;
}
this.mostrarDatos = function () {
alert("El Médico se llama " + this.nombre + ", su especialidad es " + this.especialidad + " y lleva curadas " + this.personasCuradas +" personas");
}
}

function funcionExterna() {
this.nombre = "Juan José Millán-Astray";
this.personasCuradas = 220;
this.especialidad = "Neurocirujano";
this.curarPersona = funcionCurar;
this.mostrarDatos = funcionMostrar;
}

function funcionCurar() {
this.personasCuradas = this.personasCuradas + contador;
}

function funcionMostrar() {
alert("El Médico se llama " + this.nombre + ", su especialidad es " + this.especialidad + " y lleva curadas " + this.personasCuradas +" personas");
}

function openOne() {

var abrirFuncionUno = new funcionInterna();

if (contador == 0) {
abrirFuncionUno.mostrarDatos();

} else {abrirFuncionUno.curarPersona(); abrirFuncionUno.mostrarDatos();}

contador ++;
}

function openTwo() {
var abrirFuncionDos = new funcionExterna();

if (contador == 0) {
abrirFuncionDos.mostrarDatos();

} else {abrirFuncionDos.curarPersona(); abrirFuncionDos.mostrarDatos();}

contador ++;

}

</script>
</head>
<body>
<div id="interno" onclick="openOne()">Objeto Médico 1</div>
<div id="externo" onclick="openTwo()">Objeto Médico 2</div>
</body>
</html>

17
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Function JavaScript crear objetos this, new reload Ejercicio resuelto. CU01143E
« en: 17 de Julio 2016, 17:14 »
Hola aquí os dejo mi solución para el ejercicio propuesto en la entrega CU01143E del tutorial básico de programación web con JavaScript.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>DOOM</title>
<meta charset="utf-8">
<style type="text/css">
div {padding:15px; width: auto; display: inline-block; margin: 25px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
div:hover, div:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">

function cuenta1() {

this.titular = prompt('Introduzca el nombre del titular:');
this.apellidos = prompt('Introduzca los apellidos del titular');
this.saldo = prompt('Introduzca el saldo de la cuenta');

if (Number(this.saldo)) {;}
else {

alert('El saldo introducido es incorrecto. Por favor introduzca carácteres numéricos');

window.location.reload();
}

this.mostrarDatos = function () {

var msg = 'Su cuenta se ha creado correctamente';

var msg2 = 'Su datos bancarios son los siguientes:\n\n' + '-Titular de la cuenta: '+ this.titular + ' ' + this.apellidos +'\n-Saldo total de la cuenta: ' + this.saldo;

alert(msg); alert(msg2);

}

}


function stealMoney() {

var cuentaBancaria = new cuenta1();

cuentaBancaria.mostrarDatos();
}

</script>

</head>
<body>
<div id="genesis" onclick="stealMoney()">Give me the money Please!</div>
</body>
</html>

18
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript clonenode removechild, replacechild, insertbefore. Ejercicio CU01141E
« en: 11 de Julio 2016, 17:13 »
Hola en relación al ejercicio propuesto en la entrega CU01141E del curso de programador web Javascript para dummies.

Citar
El siguiente código pretendía duplicar un nodo cada vez que se pulsara sobre él, de modo que inicialmente apareciera en pantalla el mensaje “Pulsa aquí para duplicar este nodo” y que cada vez que se pulsara sobre él, se duplicara (tantas veces como veces se pulsara). El problema es que no funciona, es decir, no obtenemos ningún resultado. Analiza el código y responde estas cuestiones:

1) ¿Por qué no funciona?

Hay varias deficiencias en el código. Primero la propuesta da a  la var nodoHijo = nodoPadre; Y esto es un error y una contradicción que no dejará funcionar el código.

Después hay que escribir una sintaxis por ejemplo, creatElement para poder crear unnuevo nodo.

Otro error es que se asocia nodoPadre con "this" haciendo este último alusión al div con id = nodoRaiz.. y nosotros en realidad queremos alojar el nuevo nodo en el body directaente y no en el div raiz.

Citar
2) Realiza los cambios en el código que nos permitan realizar lo que teníamos previsto creando un nuevo nodo del mismo tipo y con el mismo texto que el deseado y añadiéndolo como último hijo del nodo body.

La primera solución para el ejercicio sin utilizar cloneNode sería la siguiente

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

function crearNodoHijo() {

var nodoAlpha = document.querySelector('#nodoRaiz');

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

var nodoTexto = document.createTextNode('Pulsa aquí para duplicar este nodo');

nodoHijo.onclick = function() {crearNodoHijo()};

nodoHijo.appendChild(nodoTexto);

document.body.appendChild(nodoHijo);

}

</script>

</head>

<body>

<div id="nodoRaiz" onclick="crearNodoHijo()">Pulsa aquí para duplicar este nodo</div>
</body></html>

Citar
3) Realiza los cambios en el código que nos permitan realizar lo que teníamos previsto clonando el nodo con el método cloneNode y añadiendo el nodo clonado como último hijo del nodo body.

Y más fácil sería utilizando cloneNode por ejemplo:

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

function crearNodoHijo() {

var nodoAlpha = document.querySelector('#nodoRaiz');

var nodoHijo = nodoAlpha.cloneNode(true);

document.body.appendChild(nodoHijo);

}

</script>

</head>

<body>

<div id="nodoRaiz" onclick="crearNodoHijo()">Pulsa aquí para duplicar este nodo</div>
</body></html>
Hasta aquí mi solución.. si hay alguna mejor de hacerlo me encantaría aprender a resolverlo mejor.

19
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript nodos clonenode removechild, replacechild, insertbefore CU01141E
« en: 11 de Julio 2016, 13:28 »
Hola, alguien podría explicarme algunos asuntos que no entiendo de la entrega CU01141E del curso básico de programador web con Javascript?

1- No entiendo bien como fuciona la sintaxis:

Citar
nodoQueSeráPadreDelNuevoNodo.insertBefore(nuevoNodo, nodoAntesDelQueHaremosLaInserción);

en el ejemplo mas abajo está la función:
Código: [Seleccionar]
var nodoForm = document.querySelector('form');

var nuevoNodo = document.createElement('div');

contador = contador+1;

nuevoNodo.innerHTML = '<label for="nombre'+contador+'"><span>Nombre persona '+contador+':</span> <input id="nombre'+contador+

'" type="text" name="nombre'+contador+'" /></label>'+

'<label for="apellidos'+contador+'"><span>Apellidos persona '+contador+':</span> <input id="apellidos'+contador+

'" type="text" name="apellidos'+contador+'" /></label>'+

'<label for="email'+contador+'"><span>Correo electrónico persona '+contador+':</span> <input id="email"'+contador+

' type="text" name="email'+contador+'" /></label>'+

'<p>Si quieres apuntar simultáneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa aquí</span></p>';

nodoForm.insertBefore(nuevoNodo, nodoForm.querySelector('#referenciaVacia1'));

No entiendo si nuestro nuevoNODO está ahora dentro de nodoFORM o por el contrario está alojado en el div con id = referenciaVacia1, que está vacío y ha sido creado abajo.

Aquí el código completo del ejemplo:

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

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

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

</style>

<script type="text/javascript">

var contador = 1;

function addPersona () {

var nodoForm = document.querySelector('form');

var nuevoNodo = document.createElement('div');

contador = contador+1;

nuevoNodo.innerHTML = '<label for="nombre'+contador+'"><span>Nombre persona '+contador+':</span> <input id="nombre'+contador+

'" type="text" name="nombre'+contador+'" /></label>'+

'<label for="apellidos'+contador+'"><span>Apellidos persona '+contador+':</span> <input id="apellidos'+contador+

'" type="text" name="apellidos'+contador+'" /></label>'+

'<label for="email'+contador+'"><span>Correo electrónico persona '+contador+':</span> <input id="email"'+contador+

' type="text" name="email'+contador+'" /></label>'+

'<p>Si quieres apuntar simultáneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa aquí</span></p>';

nodoForm.insertBefore(nuevoNodo, nodoForm.querySelector('#referenciaVacia1'));

}

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

<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">

<p>Indica los datos de la persona que se apunta al curso:</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>

<p>Si quieres apuntar simultáneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa aquí</span></p>

<div id="referenciaVacia1"></div>

<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form></body></html>

20
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript document.createElement createTextNode appendChild Ejercicio CU01140E
« en: 09 de Julio 2016, 14:56 »
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


Páginas: [1] 2

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