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 - Dimitar Stefanov

Páginas: 1 ... 12 13 14 15 16 [17] 18 19 20 21 22 ... 30
321
Ups, es verdad, jejeje. Se me había olvidado.

Añadí esto en el código:

Código: [Seleccionar]
if(mesesPares.test(titulo[0].textContent)){
diasMes = 31;
}else if(mesFebrero.test(titulo[0].textContent)){
if(anyoAlmacenado%4 == 0){
diasMes = 29;
}else{
diasMes = 28;
}
}else{
diasMes = 30;
}

De modo que todo el código quedará:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style>
div{
border: solid;
width: 400px;
height: 400px;
margin-left: 450px;
margin-top: 50px;
text-align: center;
}
table{
width: 300px;
font-size: 24px;
text-align: center;
margin-left: 50px;
margin-top: 25px;
}
</style>
<script type="text/javascript">

window.onload = function(){

var rellenarDias = ["Lu","Ma","Mi","Ju","Vi","Sa","Do"];
var diasSemana = document.getElementsByTagName('th');

for(var i=0;i<diasSemana.length;i++){
diasSemana[i].textContent = rellenarDias[i];
}

var fechaAlmacenada = new Date();

var pregunta = confirm('Quieres ver un mes en concreto?-"Aceptar"\nO quieres ver el mes actual?-"Cancelar"');

if(pregunta == true){
var anyoAlmacenado = prompt('Entra el año');
var mesAlmacenado = prompt('Entra el mes en cifras');
mesAlmacenado = mesAlmacenado-1;
}else{
mesAlmacenado = fechaAlmacenada.getMonth();
anyoAlmacenado = fechaAlmacenada.getFullYear();
}

var miFecha = new Date(anyoAlmacenado,mesAlmacenado,1)
var titulo = document.getElementsByTagName('span');
var mes = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];

titulo[0].textContent = mes[miFecha.getMonth()]+" DE "+miFecha.getFullYear();

var mesesPares = /(ENERO)|(MARZO)|(MAYO)|(JULIO)|(AGOSTO)|(OCTUBRE)|(DICIEMBRE)/;
var mesFebrero = /FEBRERO/;
var diasDelMes;

if(mesesPares.test(titulo[0].textContent)){
diasMes = 31;
}else if(mesFebrero.test(titulo[0].textContent)){
if(anyoAlmacenado%4 == 0){
diasMes = 29;
}else{
diasMes = 28;
}
}else{
diasMes = 30;
}

var celdas = document.getElementsByTagName('td');

var primerDia = miFecha.getDay();

if(primerDia==0){
primerDia = 7
}

for(var i=0; i<celdas.length; i++){
if(i<primerDia-1 || (i-(primerDia-2))>diasMes){
celdas[i].textContent = "";
}else{
celdas[i].textContent = i-(primerDia-2);
if(mesAlmacenado == fechaAlmacenada.getMonth() && anyoAlmacenado == fechaAlmacenada.getFullYear()){
celdas[fechaAlmacenada.getDate()].style.backgroundColor = "red";
}
}
}

}

</script>
</head>
<body style="text-align: center;">
<h1>Candario</h1>
<div id="central">
<table>
<span style="text-align: center;"></span>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Gracias por corregir otro ejercicio más, Pedro :)

Saludos.

322
Y otra solución con mejor visualización y más opciones:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style>
div{
border: solid;
width: 400px;
height: 400px;
margin-left: 450px;
margin-top: 50px;
text-align: center;
}
table{
width: 300px;
font-size: 24px;
text-align: center;
margin-left: 50px;
margin-top: 25px;
}
</style>
<script type="text/javascript">

window.onload = function(){

var rellenarDias = ["Lu","Ma","Mi","Ju","Vi","Sa","Do"];
var diasSemana = document.getElementsByTagName('th');

for(var i=0;i<diasSemana.length;i++){
diasSemana[i].textContent = rellenarDias[i];
}

var fechaAlmacenada = new Date();

var pregunta = confirm('Quieres ver un mes en concreto?-"Aceptar"\nO quieres ver el mes actual?-"Cancelar"');

if(pregunta == true){
var anyoAlmacenado = prompt('Entra el año');
var mesAlmacenado = prompt('Entra el mes en cifras');
mesAlmacenado = mesAlmacenado-1;
}else{
mesAlmacenado = fechaAlmacenada.getMonth();
anyoAlmacenado = fechaAlmacenada.getFullYear();
}

var miFecha = new Date(anyoAlmacenado,mesAlmacenado,1)
var titulo = document.getElementsByTagName('span');
var mes = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];

titulo[0].textContent = mes[miFecha.getMonth()]+" DE "+miFecha.getFullYear();

var mesesPares = /(ENERO)|(MARZO)|(MAYO)|(JULIO)|(AGOSTO)|(OCTUBRE)|(DICIEMBRE)/;
var mesFebrero = /FEBRERO/;
var diasDelMes;

if(mesesPares.test(titulo[0].textContent)){
diasMes = 31;
}else if(mesFebrero.test(titulo[0].textContent)){
diasMes = 29;
}else{
diasMes = 30;
}

var celdas = document.getElementsByTagName('td');

var primerDia = miFecha.getDay();

if(primerDia==0){
primerDia = 7
}

for(var i=0; i<celdas.length; i++){
if(i<primerDia-1 || (i-(primerDia-2))>diasMes){
celdas[i].textContent = "";
}else{
celdas[i].textContent = i-(primerDia-2);
if(mesAlmacenado == fechaAlmacenada.getMonth() && anyoAlmacenado == fechaAlmacenada.getFullYear()){
celdas[fechaAlmacenada.getDate()].style.backgroundColor = "red";
}
}
}

}

</script>
</head>
<body style="text-align: center;">
<h1>Candario</h1>
<div id="central">
<table>
<span style="text-align: center;"></span>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Gracias.

323
Buenas noches.

Pongo una solución del ejercicio CU01162E del curso JavaScript desde cero.

Citar
EJERCICIO

Crea un documento HTML que conste de un título h1 con el texto <<Calendario>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Dentro del div central crea una tabla de 7 columnas por 7 filas (total 49 celdas) con ancho de tabla 300 píxeles y tamaño de fuente en la tabla 24 píxeles. La primera columna corresponderá a lunes y la última a domingo. Usa un método JavaScript para determinar el mes actual. Mediante código JavaScript, haz que aparezca dinámicamente como texto encima de la tabla el mes y año de que se trate (por ejemplo <<MAYO DE 2050>>). Haz que cada celda de la primera fila se rellene indicando el día de la semana (Lu – Ma – Mi – Ju – Vi –Sa –Do). Haz que la tabla se rellene dinámicamente (al cargar la página) con:

a) Espacio en blanco si no corresponde ningún día.

b) El número del día del mes según corresponda (28, 30 ó 31 días según de qué mes se trate).

El código JavaScript:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style>
div{
border: solid;
width: 400px;
height: 400px;
margin: 100px;
text-align: center;
}
table{
width: 300px;
font-size: 24px;
text-align: center;
}
</style>
<script type="text/javascript">

window.onload = function(){

var rellenarDias = ["Lu","Ma","Mi","Ju","Vi","Sa","Do"];
var diasSemana = document.getElementsByTagName('th');

for(var i=0;i<diasSemana.length;i++){
diasSemana[i].textContent = rellenarDias[i];
}

var fechaAlmacenada = new Date();
var mesAlmacenado = fechaAlmacenada.getMonth();
var anyoAlmacenado = fechaAlmacenada.getFullYear();
var miFecha = new Date(anyoAlmacenado,mesAlmacenado,1)
var titulo = document.getElementsByTagName('span');
var mes = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];

titulo[0].textContent = mes[miFecha.getMonth()]+" DE "+miFecha.getFullYear();

var mesesPares = /(ENERO)|(MARZO)|(MAYO)|(JULIO)|(AGOSTO)|(OCTUBRE)|(DICIEMBRE)/;
var mesFebrero = /FEBRERO/;
var diasDelMes;

if(mesesPares.test(titulo[0].textContent)){
diasMes = 31;
}else if(mesFebrero.test(titulo[0].textContent)){
diasMes = 29;
}else{
diasMes = 30;
}

var celdas = document.getElementsByTagName('td');

for(var i=0; i<celdas.length+1; i++){
if(i<(miFecha.getDay()-1) || (i-(miFecha.getDay()-2))>diasMes){
celdas[i].textContent = "";
}else{
celdas[i].textContent = i-(miFecha.getDay()-2);
}
}

}

</script>
</head>
<body style="text-align: center;">
<h1>Calendario</h1>
<div id="central">
<table style="border: solid;">
<span style="text-align: center;"></span>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Gracias.

324
Buenas tardes, Pedro y a todos los compañer@s.

He podido modificar el código. He tardado un poco, pero entre semana santa y todas las vacaciones, he estado un poco liado.

Bueno, al lío.

Aquí esta el código del segundo ejecicio.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var parrent01 = /\w{1,}/;
var parrent02 = /@/;
var parrent03 = /\./;
var parrent04 = /\w@\w/;
var parrent05 = /\.\w{2,}/;
var parrent06 = /\w+@\w+(?=\.\w+)/;


function verificar(){

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
inputs[i].addEventListener('focus', quitarAtencion);
}

verificarNombre();
verificarCorreo();
verificarEdad();

if(Nombre && Correo && Edad){
alert('Los datos han sido correctos!!!');
return true;}else
{
alert(msn01+"\n"+msn02+"\n"+msn03);
return false;}

}

function verificarNombre(){
if((document.getElementById('nombre').value).match(parrent01) == null){
document.getElementById('nombre').style.backgroundColor = "red";
msn01 = 'El campo nombre es obligatorio!!!';
Nombre = false;
}else{
msn01 = "Nombre correcto!!!";
Nombre = true;}
}

function verificarCorreo(){

if((document.getElementById('correo').value).match(parrent01) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'El campo correo electrónico es obligatorio!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent02) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'El correo electrónico tiene que contener el símbolo "@"!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent03) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'El correo electrónico tiene que contener el símbolo "."!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent04) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'Antes y después del símbolo "@" tiene que haber, por lo menos, una letra!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent05) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'Después del símbolo "." tiene que haber, por lo menos, dos letras!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent06) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'En un correo electrónico siempre tiene que estar el "@" antes que el "."!!!';
Correo = false;
}else{
msn02 = "Correo correcto!!!";
Correo = true;}

}

function verificarEdad(){
if((document.getElementById('edad').value) <= 0 || (isNaN(document.getElementById('edad').value))){
document.getElementById('edad').style.backgroundColor = "red";
msn03 = 'La edad tiene que ser un valor positivo!!!';
Edad = false;
}else{
msn03 = "Edad Correcta!!!";
Edad = true;}
}

function quitarAtencion(){
this.style.backgroundColor = "";
}

</script>
</head>
<body>
<div id="contenedor" style="text-align: center;">
<h1>La web para aprender programación</h1>
<p onclick="verificar()">Aquí está el texto del párrafo 1</p>
<p>Aquí está el texto del párrafo 2</p>
<form name="formulario01"  method="get" onsubmit="return verificar()">
<label for="nombre"><span>Nombre:</span><input type="text" name="nombre" id="nombre"></label><br><br>
<label for="apellidos"><span>Apellidos: </span><input type="text" name="apellidos" id="apellidos"></label><br><br>
<label for="edad"><span>Edad:</span><input type="text" name="edad" id="edad"></label><br><br>
<label for="mail"><span>Correo Electrónico:</span><input type="text" name="correo" id="correo"></label><br><br>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>

</body>
</html>

Ahora vemos que cumple con lo que me habías comentado, Pedro. Enseguida cuando se da al botón "Enviar" te informa de todos los errores que has cometido. Lo he solucionado, un poco, a mi manera. Quería que fuera una alternativa a como lo habéis solucionado vosotros. Aunque, al fin y a la cabo, muy diferente no pude ser, jeje.

Saludos. (y espero vuestras opinión:))

325
Todos los compañeros estamos aquí para eso, para ayudarnos mutuamente :)

De todas maneras, te recomiendo que mires más soluciones en el foro.

Saludos.

326
Buenas, Pedro.

Gracias por corregirme el ejercicio.

Tomo nota sobre el primer código. Ya lo he corregido.

Sobre el segundo código lo rectificaré y subiré la solución. Aunque me parece, que tal y como me comentas lo que debería de hacer el código, no se podrá hacer sólo con una función. Debería de hacerlo de forma similar a como lo has solucionado tú o Bermatinv.

Saludos.

327
Hola, Matru.

La relación de la herencia debería ser como se muestra en https://www.aprenderaprogramar.com/foros/index.php?topic=2342.0.

A mi también me costó entenderlo. Y realmente puede prestar confusión, un poco, el ejericico pero lo que deberías interpretar es que la herencia sea desde "Producto" hacia "ProductoFresco", desde "Producto" hacia "ProductoRefrigerado" y desde "Producto" hacia "ProductoCongelado".

Y las propiedades comunes de: "ProductoFresco", "ProductoRefrigerado" y "ProductoCongelado" se deberán heredar de la clase "Producto" (cada subclase desde la superclase) y no en escala.

Espero que te haya ayudado y aclarado la duda.


328
Buenas chicos.

Gracias a los dos por haber mirado y corregido mi ejercicio.

Efectivamente, cuando me dijistéis que no funcionaba me extraño, porque a mi se me movía. Pensé que lo habías probado en otro navegador que no sea firefox, Pedro, y efectivamente es lo que dice Bermartinv, sólo funciona en éste (firefox).

He añadido la siguiente línea en el código para que funcione también en "Chrome":

Código: [Seleccionar]
document.onkeyup = inspeccionarTecla;
Graicas a los dos :)


329
Buenas tardes. Cuelgo una posible solución del ejercicio CU01161E del curso JavaScript desde cero.

Citar
EJERCICIO 1

Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una tecla>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Utiliza el evento keypress para determinar el carácter que el usuario ha escrito utilizando el teclado y haz que se muestre dentro del div con un tamaño de fuente de 250px.

El código JavaScript:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

window.onload = function(){
document.onkeypress = mostrarInformacionCaracter;
}

function mostrarInformacionCaracter(evobject){
var elCaracter = String.fromCharCode(evobject.which);
central.innerHTML = elCaracter;
}

</script>
</head>
<body>
<div id="contenedor">
<h1 style="margin-left: 180px;">Pulsa una tecla</h1>
<div style="width: 400px; height: 400px; border: solid; margin: 100px; font-size: 250px; text-align: center;" id="central"></div>
</div>
</body>
</html>

Citar
EJERCICIO 2

Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una flecha>>, y un div de 300 por 300 px con borde color negro, color de fondo amarillo y márgenes de 200px en todas direcciones. Utiliza el evento keypress para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando CSS haz que el cuadrado que define el div se desplace 20px en la dirección de flecha elegida por el usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la ventana, hacia la derecha.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: solid;
margin: 200px;
background: yellow;
position: relative;
}
</style>
<script type="text/javascript">

window.onload = function(){
document.onkeypress = inspeccionarTecla;
}

var desplazamiento = 20;
var desplazamientoVertical = 20;
function inspeccionarTecla(evobjet){
var elCaracter = evobjet.keyCode;
if(elCaracter == 39){
principal.style.marginLeft = (200+desplazamiento)+"px";
desplazamiento = desplazamiento +20;
}else if(elCaracter == 37){
principal.style.marginLeft = (200+(desplazamiento-20))+"px";
desplazamiento = desplazamiento - 20;
}else if(elCaracter == 40){
principal.style.marginTop = (200+desplazamientoVertical)+"px";
desplazamientoVertical = desplazamientoVertical + 20;
}else if(elCaracter == 38){
//alert(desplazamientoVertical);
principal.style.marginTop = (200+(desplazamientoVertical-20))+"px";
desplazamientoVertical = desplazamientoVertical - 20;
}else{
alert('Teclee una flecha!!!');
}

}

</script>
</head>
<body>
<h1>Pulsa una tecla</h1>
<div id="principal"></div>
</body>
</html>

Gracias.

330
Hola, CodingFer.

Creo que el ejercicio está correcto.

Saludos.

331
Buenos días, CodingFer.

Veo el ejercicio todo correcto.

Un saludo.

332
Buenos días, matru.

Primero, comentarte que las subclases "ProductoFresco", "ProductoRefrigerado" y "ProductoCongelado" deberían de heredar de la superclase "Producto" y no uno del otro. En el ejericicio se dice:

Citar
Todos los productos llevan esta información común: fecha de caducidad y número de lote.

Por lo tanto, lo lógico es que todos hereden de una misma clase.

Después, en varios códigos pasas como parámetros variables que luego tienen el mismo nombre que las variables declaradas en la clase, como por ejemplo en la subclase "ProductoFresco":

Código: [Seleccionar]
public void setFechaEnvasado(String fechaEnvasado){
        fechaEnvasado = fechaEnvasado;
    }

Eso no es correcto, porque el compilador a la hora de compilar no sabe que variable pertenece a la clase y cual es el parámetro. Deberías de haber puesto:

Código: [Seleccionar]
public void setFechaEnvasado(String fechaEnvasado){
        this.fechaEnvasado = fechaEnvasado;
    }

o también:

Código: [Seleccionar]
public void setFechaEnvasado(String valor_fechaEnvasado){
        fechaEnvasado = valor_fechaEnvasado;
    }

Te recomiendo que mires más soluciones en el foro.

Un saludo.

 

333
Buenas noches. A continuación voy a colgar una posible solución del ejercicio CU01160E del curso JavaScript desde cero.

Citar
EJERCICIO

Crea un documento HTML que conste de un título h1 con el texto <<Posición x:  - Posición y>>, y un div con ancho 500 px y alto 400 px. Utiliza el evento onmousemove para mostrar dinámicamente en el título h1 las coordenadas del puntero del ratón a medida que se desplaza por el elemento div.

Por ejemplo, cuando el usuario coloca el ratón sobre el div se deberá mostrar:  Posición x:  244 Posición y: 188, al mover el ratón las coordenadas indicadas cambiarán a otro valor, por ejemplo Posición x:  322 Posición y: 228, y así sucesivamente.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">


function detectarMovimiento(){
var div = document.getElementsByTagName('div');
div[0].onmousemove = mostrarPosicion;
}

function mostrarPosicion(evobject){
var screenX = evobject.screenX;
var screenY = evobject.screenY;
var spans = document.getElementsByTagName('span');
spans[0].textContent = screenX+"px";
spans[1].innerHTML = screenY+"px";
}

</script>
</head>
<body>
<div style="width: 500px; height: 400px; border: solid; margin: 0;"  onmousemove="detectarMovimiento()">
<h1>Posición X:<span></span> Posición Y:<span></span></h1>
</div>
</body>
</html>

Gracias.

334
Buenas tardes.

Procedo a exponer las soluciones del ejericicio CU01159E del curso JavaScript desde cero.

Citar
EJERCICIO 1

Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y una imagen. Utiliza los eventos onmouseover para que la imagen original sea reemplazada por otra imagen cuando el usuario pasa el ratón sobre ella. Utiliza el evento onmouseout para hacer que cuando el usuario salga del espacio de la imagen, vuelva a aparecer la imagen original.

Código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
window.onload = function(){

var imagen = document.querySelector('img');

imagen.addEventListener("mouseover",cambiarImagen);
imagen.addEventListener("mouseout",volverImagen);

function cambiarImagen(){
imagen.src = "https://www.aprenderaprogramar.com/images/thumbs_portada/thumbs_humor/78_futbolista_ordenador.jpg";
imagen.alt = "cargando imagen";
}

function volverImagen(){
imagen.src = "https://www.aprenderaprogramar.com/images/thumbs_portada/thumbs_humor/43_adictos_a_internet_apr2.jpg";
imagen.alt = "cargando imagen";
}
}
</script>
</head>
<body>
<div id="contenedor" style="text-align: center;">
<h1>La web para aprender programación</h1>
<p>Aquí está el texto del párrafo 1</p>
<p>Aquí está el texto del párrafo 2</p>
<img src="https://www.aprenderaprogramar.com/images/thumbs_portada/thumbs_humor/43_adictos_a_internet_apr2.jpg" alt="cargando imagen1">
</div>
</body>
</html>

Citar
EJERCICIO 2

Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y un formulario con los campos nombre, apellidos, edad y correo electrónico, así como con botones enviar y cancelar. Utiliza el evento onsubmit y otras herramientas para impedir que se envíe el formulario si se produce alguna de estas circunstancias:

a) El nombre está vacío ó el correo electrónico está vacío.

b) El correo electrónico no contiene los símbolos @ (arroba) y . (punto). Por ejemplo juan arroba gmail.com no es un correo válido.

c) No existe al menos una letra precediendo el símbolo @ del correo electrónico y una letra después de este símbolo. Por ejemplo a@.com no es un correo válido.

d) No existen al menos dos letras después del punto en el correo electrónico. Por ejemplo juan@gmail.c no es un correo válido.

e) La edad es cero o menor de cero.

En caso de producirse una de estas circunstancias, debe mostrarse el campo del formulario de un color distinto y un mensaje de advertencia. El color de advertencia debe desaparecer (dinámicamente) cuando el campo que tenía un problema tome el foco (para ello usa el evento onfocus).

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var parrent01 = /\w{1,}/;
var parrent02 = /@/;
var parrent03 = /\./;
var parrent04 = /\w@\w/;
var parrent05 = /\.\w{2,}/;
var parrent06 = /\w+@\w+(?=\w+\.\w+)/;


function verificar(){

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
inputs[i].addEventListener('focus', quitarAtencion);
}

if((document.getElementById('nombre').value).match(parrent01) == null){
document.getElementById('nombre').style.backgroundColor = "red";
alert('El campo nombre es obligatorio!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent01) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('El campo correo electrónico es obligatorio!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent02) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('El correo electrónico tiene que contener el símbolo "@"!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent03) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('El correo electrónico tiene que contener el símbolo "."!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent04) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('Antes y después del símbolo "@" tiene que haber, por lo menos, una letra!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent05) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('Después del símbolo "." tiene que haber, por lo menos, dos letras!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent06) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('En un correo electrónico siempre tiene que estar el "@" antes que el "."!!!');
return false;
}else if((document.getElementById('edad').value)<=0){
document.getElementById('edad').style.backgroundColor = "red";
alert('La edad tiene que ser un valor positivo!!!');
return false;
}else{
alert('Los datos han sido correctos!!!');
return true;}
}

function quitarAtencion(){
this.style.backgroundColor = "";
}

</script>
</head>
<body>
<div id="contenedor" style="text-align: center;">
<h1>La web para aprender programación</h1>
<p onclick="verificar()">Aquí está el texto del párrafo 1</p>
<p>Aquí está el texto del párrafo 2</p>
<form name="formulario01"  method="get" onsubmit="return verificar()">
<label for="nombre"><span>Nombre:</span><input type="text" name="nombre" id="nombre"></label><br><br>
<label for="apellidos"><span>Apellidos: </span><input type="text" name="apellidos" id="apellidos"></label><br><br>
<label for="edad"><span>Edad:</span><input type="text" name="edad" id="edad"></label><br><br>
<label for="mail"><span>Correo Electrónico:</span><input type="text" name="correo" id="correo"></label><br><br>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>

</body>
</html>

Como podéis ver, en el segundo ejercicio no he utilizado tantas funciones como mis compañeros. No sé si esto es una práctica errónea por no separar cada función con su cometido. Dejo a vosotros que lo valoréis.

Quería poner atención a un asunto. Para que el formulario no se envíe, ponemos en la etiqueta del formulario "<form onsubmit="return verificar()">" si sólo hubieramos puesto "<form onsubmit="verificar()">" activaría la función pero tanto si se cumplieran como si no las condicionales el formulario se enviará. Si incluimos "return" en la función, decimos que segun lo que devuelva la función (true o false) se enviará el formulario o no.

Gracias.

336
O simplemente omitir este atributo. Porque realmente no hace falta. Como el documento ya lleva el atributo "charset="utf-8" ya de por sí lee los carácteres acentuados :)

337
Hola, bermartinv.

Qué va. Lo puse para que se viera que se cambiaba realmente el mensaje cuando burbujeaban los div's, porque si no, no se notaba la diferencia.

Saludos.

338
Buenas, bermartinv.

He cambiado el código como me dijiste. Queda así:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
window.onload = function(){
var parrafo = document.getElementsByTagName('p');
var divTerciario = document.getElementById('terciario');
var divSecundario = document.getElementById('secundario');
var divPrincipal = document.getElementById('principal');
var body = document.querySelector('body');
var html = document.getElementsByTagName('html');

for(var i=0;i<parrafo.length;i++){
window.addEventListener("click",mensaje);
document.addEventListener("click",mensaje);
body.addEventListener("click",mensaje);
divPrincipal.addEventListener("click",mensaje);
divSecundario.addEventListener("click",mensaje);
divTerciario.addEventListener("click",mensaje);
parrafo[i].addEventListener("click",mensaje);
}

var contador = 1;
function mensaje(){
alert("Mensaje: "+contador+"\nSoy un nodo tipo: "+this.nodeName+" y estoy burbujeando");
contador++;
}
}
</script>
</head>
<body>
<div id="principal">
<div id="secundario">
<div id="terciario">
<p>Ejemplo de bubbling (burbujeo).</p>
<p>Ejemplo de bubbling (burbujeo).</p>
</div>
</div>
</div>
</body>
</html>

Como puedes observar, cambié también el selector del elemento "body". Ahora lo tengo declarado así:

Código: [Seleccionar]
var body = document.querySelector('body');
de la manera como lo tenía antes, el contador salía como "undefined" y "NaN" y no entiendo porque.

Un saludo.

339
Buenas, Mario.

Gracias por corregir otro ejercicio más.

Pongo <html lang="en"> porque me lo pone automáticamente así el editor con el que escribo los códigos (Sublime text 3), jeje. Sí, lo correcto sería ponerlo <html lang="es">, pero como el ejecicio tampoco que tenga muchas palabras específicamente en castellano, pues no veía la necesidad de cambiarlo.

Tomo tu observación y lo modificaré.

Un saludo.

340
Buenas, Pedro.

Claaaro, si a mi el curso de JavaScript me encantaba, pasa que por circunstancias ajenas a mi, tuve que dejar, por un momento ese curso y hacer el de Java. Sinceramente me alegro, porque se me aclararon bastantes cosas. Además, en Java los objetos se pueden ver un poquito mejor. No es todo tan abstracto como en JavaScript. En Java ves los diferentes objetos, en cambio, en JavaScript todo te lo tienes que imaginar, jejeje.

Pues nada, ahora me vereis un poquito más presente por los ejercicios de JavaScript y podéis ayudarme con las soluciones :)

Un saludo y gracias.

Páginas: 1 ... 12 13 14 15 16 [17] 18 19 20 21 22 ... 30

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