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

Páginas: 1 [2]
21
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cómo crear objetos vacíos. Añadir propiedades y métodos CU01145E
« en: 02 de Febrero 2017, 19:39 »
Solución planteada para el ejercicio CU01145E del curso básico de programación web con JavaScript.

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<script type="text/javascript">

var GestionDeUsuarios = {};

GestionDeUsuarios.preguntarNombre = function(){
var nombreUsuario = prompt("asignar nombre al usuario");
var idUsuario = prompt("asignar ID al usuario");
Object.defineProperty(GestionDeUsuarios, 'nombre', {value: nombreUsuario, writable:true,
enumerable:true, configurable:true});
Object.defineProperty(GestionDeUsuarios, 'id', {value: idUsuario, writable:true,
enumerable:true, configurable:true});
}
GestionDeUsuarios.despedir = function(){
alert("hasta luego " + this.nombre);
}
</script></head>
<body>
<button onclick="GestionDeUsuarios.preguntarNombre()"> Preguntar Nombre</button>
<button onclick="GestionDeUsuarios.despedir()"> despedir</button>
</body></html>

22
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Objetos predefinidos, global window, math ejemplo uso this CU01144E
« en: 02 de Febrero 2017, 17:30 »
Saludos! Mis respuestas para el ejercicio CU01144E del curso elemental de programación web con JavaScript.

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<script type="text/javascript">
function medico1(){
this.nombreObj = "Javier";
this.personasCuradasObj = 2;
this.especialidadObj = "cirugia";
this.mostrarDatos = datosMedico;
this.curarPersona = curarPersona;

}
function curarPersona(){
this.personasCuradasObj = this.personasCuradasObj + 1;
}
function datosMedico(){
var msg = "El medico creado con funciones externas se llama " + this.nombreObj +
", su especialidad es " + this.especialidadObj +
" y lleva curadas " + this.personasCuradasObj + " personas.";
alert(msg);
}
function medico2(){
this.nombreObj = "Enrique";
this.personasCuradasObj = 8;
this.especialidadObj = "Pediatria";
this.mostrarDatos = function (){
var msg = "El medico creado con funciones internas se llama " + this.nombreObj +
"\nSu especialidad es " + this.especialidadObj +
"\nY lleva curadas " + this.personasCuradasObj + " personas.";
alert(msg);
}
this.curarPersona = function(){
this.personasCuradasObj = this.personasCuradasObj + 1;
}


}
function creaMedico(){
var m1 = new medico1();
m1.mostrarDatos();
var m2 = new medico2();
m2.mostrarDatos();
}
</script></head>
<body onload="creaMedico()">
</body></html>

23
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cómo crear objetos ejemplo function prompt var This, new. CU01143E
« en: 01 de Febrero 2017, 18:18 »
Respuesta al ejercicio CU01143E del tutorial de programador web con JavaScript.

No veo mucha utilidad la creación de un objeto al menos en este ejercicio, ya que tal cual salga de la función crearCuentaBancaria() entiendo que todos los datos se borran verdad?

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function crearObjetoCuenta(nombreCB,apellidoCB,saldoCB){
this.nombreCuenta = nombreCB;
this.apellidoCuenta = apellidoCB;
this.saldoCuenta = saldoCB;
this.mostrarCuenta = function (){
var msg = "Se ha creado una cuenta bancaria, esto son sus datos: \n" +
"Nombre: " + this.nombreCuenta +
"\nApellido: " + this.apellidoCuenta +
"\nSaldo: " + this.saldoCuenta;
alert(msg);
}
}
function crearCuentaBancaria(){
var nombre = prompt("Introduce nombre titular");
var apellido = prompt("Introducie apellido titular");
var saldo = prompt("introduce saldo");

var cuentaBancaria = new crearObjetoCuenta(nombre,apellido,saldo);
cuentaBancaria.mostrarCuenta();
}
</script></head>
<body onload="crearCuentaBancaria()">
</body></html>

24
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cadenas de texto toLowerCase, charAt, split, replace CU01142E
« en: 01 de Febrero 2017, 02:09 »
Respuesta al ejercicio CU01142E del curso básico de programador web con JavaScript.

No he mirado que existiera el punto antes que el @, osea, si se pone nombre.apellido@gmailcom.

O si se pone nombre.apellido@gmail.com no saltaría el error pero porque detecta el primer punto, como el enunciado no dice nada sobre estos casos no he trabajado mucho en eso:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8">
<script type="text/javascript">
function validar(){
var nodeInputs = document.getElementsByClassName("inputs");

if(nodeInputs[0].value.length<3){
alert("El nombre no cumple tener al menos tres letras");
}

nodeInputs[2].value = nodeInputs[2].value.replace(/at/g,"@");

if(nodeInputs[2].value.indexOf("@")==-1 && nodeInputs[2].value.indexOf(".")==-1){
alert("Falta ambos caracteres en el correo electrónico");
}else if(nodeInputs[2].value.indexOf("@")==-1){
alert("Falta el símbolo @ en el correo electrónico");
}else if(nodeInputs[2].value.indexOf(".")==-1){
alert("Falta el símbolo . en el correo electrónico");
}
nodeInputs[2].value = nodeInputs[2].value.toLowerCase();
}
</script>
</head>
<body>
<form name="form1" action="https://www.aprenderaprogramar.com" method="GET"  onsubmit="validar()">
<input class="inputs" type="text" name="nombre"><input class="inputs" type="text" name="apellidos">
<input class="inputs" type="text" name="correo"><input type="submit" value="submit">
</form>
</body>
</html>

25
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cómo duplicar un nodo del DOM cloneNode, removeChild... CU01141E
« en: 01 de Febrero 2017, 00:48 »
Ejercicio CU01141E del tutorial de programación web con JavaScript:

1) Me ha costado identificarlo pero creo que por fin lo entendí, al tener esto:
var nodoHijo = nodoPadre;
document.body.appendChild(nodoHijo);

Al principio pensaba que appendChild creaba un espacio en el body para meter el nodoHijo, pero si fuera así habría metido a nodoHijo como un nodo nuevo y hubiera funcionado correcto, pero creo que al hacer la igualdad en la primera linea, tanto nodoHijo como nodoPadre actúan como "punteros", es decir, parece que apuntaran al mismo sitio, y appendChild hace como de apuntador entre body y ese nodo, es por eso que nodoPadre desaparece y lo reemplaza por nodoHijo, por que apuntan al mismo sitio, en cambio al hacer un cloneNode lo que haces es crear un nuevo "puntero" y así appendChild sí podrá apuntar a nodoHijo sin cargarse nodoPadre, ya que son distintos "punteros".

digo punteros y seguro que no es así, pero es la única manera que se me ocurre de describir y entender esto.


2)
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(nodoPadre) {
var nodoDiv = document.createElement("div");
var nodoTxt = document.createTextNode("Pulsa aquí para duplicar este nodo");
nodoDiv.onclick = nodoPadre.onclick;
nodoDiv.className = "nodoNuevo";
nodoDiv.appendChild(nodoTxt);
document.body.appendChild(nodoDiv);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>



3)
cambiando "var nodoHijo = nodoPadre;"  por  var nodoHijo = nodoPadre.cloneNode(true);  creo que resuelve este apartado, ya que appendChild vincula el nuevo nodo al final del Body y por eso creo que no hace falta añadir nada más, quedando así:

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(nodoPadre) {
var nodoHijo = nodoPadre.cloneNode(true);
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>

26
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript manejo del DOM createElement, createTextNode, appendChild. CU01140E
« en: 31 de Enero 2017, 15:55 »
Saludos! Mi respuesta para el ejercicio CU01140E del tutorial de JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head> <title>Curso JavaScript aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
div {border-style:solid;margin:2px;display:inline-block;}
</style>
<script type="text/javascript">
var num = 1, numAnidado = 0;
function anadir(anidar){
var nodoDiv = document.createElement("div");
nodoDiv.id = "id" + num;
var nodoTxt = document.createTextNode("nodo creado " + num);
nodoDiv.appendChild(nodoTxt);
if(anidar){
var nodoAnidado = document.getElementById("id" + numAnidado);
nodoAnidado.appendChild(nodoDiv);
numAnidado = num;
}else{
var nodoPadre = document.getElementsByTagName("body");
nodoPadre[0].innerHTML += "</br>";
nodoPadre[0].appendChild(nodoDiv);
}
num = num+1;
}
</script>
</head>
<body>
<div id="id0">
Curso JavaScript aprendeaprogramar.com
</div>
</br>
<button class="b1" type="button" onclick="anadir(0)">añadir al final</button>
<button class="b2" type="button" onclick="anadir(1)">anidar</button>
</body>
</html>

27
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Javascript document.getElementById editar nodos del DOM modificarlos CU01139E
« en: 26 de Enero 2017, 05:01 »
Solución planteada al ejercicio CU01139E del curso elemental de programación web con JavaScript.

El archivo del estilo está casi en su totalidad copiado del ejemplo ya que el body, th,tr,td no cambian y le añadí poca cosa.

el archivo html sí que lo hice sin ver el ejemplo y me salió diferente.

La "faena" está en el archivo functions.js, espero que os parezca bien.

functions.js
Código: [Seleccionar]
var editando = false, nombres = ["alimento","calorias","grasas","proteinas","carbohidratos"]; //variable es para tener guardado los nombres de las id's de los inputs, así lo manipulo en el for
function editar(nodo){
if(!editando){
  editando=true;
  var nodoPadre = nodo.parentNode, nuevoHTML = "";
  for(var i=0;i<5;i++){ nuevoHTML = nuevoHTML + "<td>"  + "<input type='text' name='" + nombres[i] + "' size='10' value='" + nodoPadre.childNodes[i].firstChild.nodeValue + "' ></td>"}
  nuevoHTML = nuevoHTML + "<td>En edición</td>";
  nodoPadre.innerHTML = nuevoHTML;
  nodoPadre.id = "modificado";
  document.getElementById('botones').style.display = "inline";
}else{alert("Solo se puede editar una línea. Recargue la página para poder editar otra");}
}
function enviarForm(){
var crearForm = "<form id='formulario' action='https://www.aprenderaprogramar.es' method='get'>"
var nodoModificado = document.getElementById('modificado');
var nodoBotones = document.getElementById('botones');
for(var i=0;i<5;i++){
 crearForm = crearForm + "<input type='text' name='" + nombres[i] + "' value='" + nodoModificado.childNodes[i].firstChild.value + "' >";
 }
 nodoBotones.innerHTML = crearForm;
 document.getElementById('formulario').submit();
}

html
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" >
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<table>
<tr><th>Alimento</th><th>Calorías (kCal)</th><th>Grasas (g)</th><th>Proteína (g)</th><th>Carbohidratos (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="editar(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="editar(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="editar(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="editar(this)">Editar</td></tr>
</table>
<div id="botones">
<p>Pulse Aceptar para guardar los cambios o Cancelar para anularlos</p>
<button class="boton" type="button" onclick="enviarForm()">Aceptar</button><button class="boton" type="button" onclick="location.reload()">Cancelar</button>
</div>
</body>
</html>


styles.css
Código: [Seleccionar]
body {font-family: Arial, Helvetica, sans-serif; background-color: #FFF8DC;}
#botones {
display:none;
}
#formulario{
  display:none;
}
table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin: 45px; width: 550px;
    text-align: center; border-collapse: collapse; }
th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff; color: #039; }
td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; }
tr:hover td { background: #d0dafd; color: #339; }
.boton {color: black; padding: 5px; margin: 10px;
  background-color: #b9c9fe;
  font-weight: bold; }
.editar {color: blue; cursor:pointer;}

28
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Javascript. Modificar contenido web con innerHTML nodeValue textContent CU01138E
« en: 25 de Enero 2017, 19:11 »
Ejercicio CU01138E del curso de JavaScript de aprenderaprogramar.com

He intentado que cada caja se modifique de manera diferente, una con innerHTML, otra con nodeValue, textContent, etc.

No se me ocurre otra manera de utilizar innerHTML sin que me cree un div dentro de su div correspondiente, lo que me gustaría más es modificar el div existente sin añadir uno, o sino eliminar el div correspondiente y reemplazarlo por uno nuevo con innerHTML, supongo que eso se aprenderá más adelante eliminando elementos del DOM.

Código: [Seleccionar]
<!DOCTYPE html>
<html><meta charset="utf-8">
<style>
#cajaPrincipal {
margin:auto;
width:200px;
height:200px;
text-align: center;
position:relative;
border: 1px solid #000000;
}
.box{
width:100px;
height:100px;
position: absolute;
border: 1px solid #000000;
line-height:6em;
}
#miniCaja2{left:100px;}
#miniCaja3{top:100px;}
#miniCaja4{left:100px;top:100px;}
#avanzar{
top:10px;
margin:auto;
width:100px;
border: 1px solid #000000;
text-align:center;
position:relative;
}
#avanzar:hover{background-color:black;color: white;}
</style>
<script type="text/javascript">
var numClic = 0;
function func(){
numClic=numClic+1;
var divElems = document.getElementsByTagName('div');
if(numClic == 1){divElems[1].innerHTML='<div id="miniCaja1" class="box" style="background-color:black;color:white;"> El </div>';}
if(numClic == 2){divElems[3].innerHTML = "poder";}
if(numClic == 3){divElems[4].textContent='de';}
if(numClic == 4){
divElems[5].style.backgroundColor="yellow";
divElems[5].firstChild.nodeValue = "Javascript";
}if(numClic >= 5){alert("No es posible avanzar más");}
}
</script>
</head>
<body>
<div id="cajaPrincipal">
<div id="miniCaja1" class="box">?</div>
<div id="miniCaja2" class="box">?</div>
<div id="miniCaja3" class="box">?</div>
<div id="miniCaja4" class="box">?</div></div>
<div id="avanzar" onclick="func()">Avanzar</div>
</body>
</html>

29
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Ejercicio resuelto ejemplo getElementsByTagName obtener div CU01136E
« en: 25 de Enero 2017, 16:05 »
Ejercicio CU01136E del tutorial básico de programación web con JavaScript.

Código: [Seleccionar]
<!DOCTYPE html>
<html><meta charset="utf-8">

<script type="text/javascript">
function func(){
var numeros = [];
for(var i=0;i<5;i++){
numeros[i] = prompt("#" + (i+1));
numeros[i] = numeros[i]*1;
}
var nodoDiv = document.getElementsByTagName('div');
var msg = "multiplicamos por 3 los números introducidos: ";
var primero = true;
for(i=0;i<5;i++){
if(primero){
msg = msg + numeros[i] + "*3 = ";
primero=false;
}else{
msg = msg + ", " + numeros[i] + "*3 = ";
}
numeros[i] = numeros[i]*3;
msg = msg + numeros[i];
}
nodoDiv[0].textContent = msg + ".";
}
</script>
</head>
<body onload="func()">
<h1>Ejercicio curso aprenderaprogramar.com</h1>
<div> </div>
</body></html>

30
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript frontend Uso for in. Convertir datos a valores numéricos. CU01135E
« en: 24 de Enero 2017, 19:25 »
Muy buenas, me he puesto a aprender este tutorial de javascript por que me gustaría saber más sobre frontend, con el tiempo pienso ponerme con angular pero por algo se empieza.

Llevo haciendo el tutorial desde el nº1 pero no se me ocurrió subir las soluciones hasta ahora, espero que a la gente le ayude, pienso ir subiendo todas a partir de ahora.

Hago una multiplicación *1 para convertirlo a número.

Código: [Seleccionar]
<!DOCTYPE html>
<html><meta charset="utf-8">

 
<script type="text/javascript">

function cargarfor(){
var v = [];
for(var i=0;i<5;i++){
v[i] = prompt("#" + (i+1));
}
var num;
var msg="Multiplicamos por 3 los números introducidos: ";
var primero = true;
for(num in v){
v[num] = v[num]*1;
if(primero){
msg = msg + v[num] + "*3 = ";
primero=false;
}
msg = msg + ", " + v[num] + "*3 = ";
v[num] = v[num]*3;
msg = msg + v[num];
}
alert(msg + ".");
}

</script>
</head>
<body onload="cargarfor()">

</body>
</html>

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