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

Páginas: [1] 2 3
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. setTimeOut, setInterval, requestAnimationFrame. CU01164E
« en: 09 de Marzo 2017, 18:13 »
Visto, muchas gracias!

2
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Generar números aleatorios. Math. Función matemática random CU01165E
« en: 09 de Marzo 2017, 18:11 »
Respuestas a los ejercicios del curso básico de programador web con JavaScript entrega CU01165E:

Ejercicio 1:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function start(){
var adivinar = parseInt(Math.random()*100)+1;
var intentos = 0;
var encontrado = false;
var num;
while(intentos<30 && !encontrado){
num = prompt("Adivina el numero, introduce un numero entero");

if(num<adivinar){
alert("el numero es mayor, intentelo de nuevo");
}else if(num>adivinar){
alert("el numero es menor, intentelo de nuevo");
}else{
alert("enhorabuena, has acertado");
encontrado=true;
}
intentos++;
if(intentos==30){
alert("has superado 30 intentos, el programa termina");
}
}
}
</script>
</head>
<body onload="start()">
</body></html>

Ejercicio 2:
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function start(){
var radio = prompt("Introduce el radio en metros del cilindro");
var altura = prompt("Introduce la altura del cilindro");
var areaBase = Math.PI*Math.pow(parseInt(radio),2);
var volumenCilindro = (Math.PI*Math.pow(parseInt(radio),2))*parseInt(altura);
alert("el área de la base del cilindro es " + areaBase +
"y el volumen del cilindro es: " + volumenCilindro);
}
</script>
</head>
<body onload="start()">
</body></html>
Ejercicio 3:
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#volador{
position:relative;
width:70px;
}</style>
<script type="text/javascript">
function start(){
setInterval(sinusoidear,40);
}
function sinusoidear(){
var pLeft = document.getElementById("volador").offsetLeft;
var pTop = document.getElementById("volador").offsetTop;
var res = Math.sin(pLeft/100)*100;

if(pLeft > document.body.clientWidth){
document.getElementById("volador").style.left= 0+"px";
}else{
document.getElementById("volador").style.left=(pLeft+1)+"px";
}
document.getElementById("volador").style.top=(res+100)+"px";
}
</script>
</head>
<body onload="start()">
<div id="volador">JavaScript</div>
</body></html>

3
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. setTimeOut, setInterval, requestAnimationFrame cuenta atrás CU01164E
« en: 04 de Marzo 2017, 18:02 »
Respuestas a ejercicios de la entrega CU01164E del tutorial de codificación con JavaScript:

Ejercicio 1:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function relojSetInterval(){
var reloj = new Date();
var hora = reloj.getHours();
var minutos = reloj.getMinutes();
var segundos = reloj.getSeconds();
minutos = minutos<10 ? "0"+minutos : minutos;
segundos = segundos<10 ? "0"+segundos : segundos;
document.body.innerHTML = hora+":"+minutos+":"+segundos;
 }
 function start(){
 setInterval(relojSetInterval,500);
 }
 
</script>
</head>
<body onload="start()" >
</body></html>
Ejercicio 2:
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
var global;
function relojSetInterval(){
var reloj = new Date();
var hora = reloj.getHours();
var minutos = reloj.getMinutes();
var segundos = reloj.getSeconds();
minutos = minutos<10 ? "0"+minutos : minutos;
segundos = segundos<10 ? "0"+segundos : segundos;
document.body.innerHTML = hora+":"+minutos+":"+segundos;
global = requestAnimationFrame(relojSetInterval);
 }
 function start(){
global = requestAnimationFrame(relojSetInterval);
 }
 
</script>
</head>
<body onload="start()" >
</body></html>
Ejercicio 3:
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var segundos=60,minutos=00, global;
function cronometro(){
segundos--;
segundos = segundos<10 ? "0"+segundos : segundos;
document.getElementById("id1").innerHTML = "0"+minutos+":"+segundos;
if(segundos==0){finish();}
}
function finish(){
alert("Tu tiempo ha terminado");
clearInterval(global);
segundos=60;
reset();
}
function reset(){
document.getElementById("id1").innerHTML = "01:00";
}
function start(){
global = setInterval(cronometro,1000);
}
</script>
</head>
<body>
<button onclick="start()">Comenzar</button>
<div id="id1">01:00</div>
</body></html>

4
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript calcular tiempo transcurrido entre dos fechas o instantes CU01163E#
« en: 01 de Marzo 2017, 23:40 »
Ejercicio CU01163E del manual de programación JavaScript desde cero.

En la misma página he creado dos botones, uno para cada ejercicio, saludos!

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejercicio1(){
var respuesta1 = prompt("Introduzca su nombre");
var date1 = new Date();

var respuesta2 = prompt("Introduzca su país");
var date2 = new Date();

alert("Han pasado " + (date2.valueOf()-date1.valueOf())/1000/60 + " minutos entre su primera y segunda respuesta");
}

function ejercicio2(){
var fechas = [];
var fecha1 = prompt("Introduzca primera fecha");
fechas.push(fecha1);
var fecha2= prompt("Introduzca segunda fecha");
fechas.push(fecha2);
var fechasSplit1 = fechas[0].split(/-/g);
var fechasSplit2 = fechas[1].split(/-/g);

var date = Date.UTC(fechasSplit2[2],fechasSplit2[1],fechasSplit2[0]) - Date.UTC(fechasSplit1[2],fechasSplit1[1],fechasSplit1[0]);
alert("Entre las 00:00 horas del primer día a las 00:00 del segundo hay "+(date/1000/60/60/24)+" días");
}
</script></head>
<body>

<button onclick="ejercicio1()">Empezar Ejercicio 1</button>
<button onclick="ejercicio2()">Empezar Ejercicio 2</button>

</body>
</html>

5
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript código fuente para crear calendario dinámicamente con nodos CU01162E
« en: 28 de Febrero 2017, 03:33 »
Ejercicio CU01162E del tutorial de programación web con JavaScript.

De los ejercicios que más me ha gustado! muy entretenido.

Aprovechando que obligatoriamente tenía que hacer un recorrido por cada celda de la tabla, he creado la tabla con javascript para que a la vez vaya haciendo el análisis de lo que le toca a cada celda:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#calendario {
position: relative;
width:400px;
height:400px;
margin:100px;
border:1px solid black;
font-size:24px;
}
th, td{
text-align:center;
}
</style>
<script type="text/javascript">
window.onload = function(){

var dias = ['Lu','Ma','Mi','Ju','Vi','Sa','Do']
var mes = ['ENERO','FEBRERO','MARZO','ABRIL','MAYO','JUNIO','JULIO','AGOSTO','SEPTIEMBRE','OCTUBRE','NOVIEMBRE','DICIEMBRE']

//creamos objeto fecha y calculamos los días que tiene el mes, al usar miFecha.getFullYear() ya tendremos correcto el año bisiesto
var miFecha = new Date();
var diasDelMes = (Date.UTC(miFecha.getFullYear(), miFecha.getMonth()+1,1) -  Date.UTC(miFecha.getFullYear(), miFecha.getMonth(),1))/1000/60/60/24;

//centramos div
document.getElementById("calendario").style.left = (document.body.clientWidth-600)/2 + "px";

//creamos variables para usarlas como nodos y redimensionamos la tabla
var th, tr,td, text;
var table = document.getElementsByTagName("table")[0];
table.style.width = "300px";
table.style.height = "300px";
table.style.margin = "0 auto";

//CAPTION como cabecera de la tabla, donde irá "MES de AÑO"
var caption = document.createElement("caption");
var captionText = document.createTextNode(mes[miFecha.getMonth()] + " DE " + miFecha.getFullYear());
caption.appendChild(captionText);
table.appendChild(caption);

//creamos los días de la tabla
tr = document.createElement("tr");
for(var i=0; i<7;i++){
th = document.createElement("th");
text = document.createTextNode(dias[i]);
th.appendChild(text);
tr.appendChild(th);
}
table.appendChild(tr);

//Creamos calendario, num serán los días y dateTemp una fecha temporal para saber por cual día empieza el mes miFecha.getMonth() del año miFecha.getFullYear() (para saber bisiestos)
var num=1;
var dateTemp = new Date(miFecha.getFullYear()+'-'+(miFecha.getMonth()+1)+'-1');

for(var i = 0; i<6;i++){
tr = document.createElement("tr");
for(var j=1;j<8;j++){

td = document.createElement("td");
if((((j<dateTemp.getDay()) || (dateTemp.getDay()==0&&j!=7)) && i==0) || (num>diasDelMes)){

text = document.createTextNode("");
td.appendChild(text);

}else{
text = document.createTextNode(num++);
td.appendChild(text);
}

tr.appendChild(td);

}
table.appendChild(tr);
}

}
</script>
</head>
<body style="background-color: #02220;">
<h1 style="text-align:center;">CALENDARIO</h1>
<div id="calendario">
<table>

</table>

</div>
</body>
</html>

6
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript saber cuándo y qué tecla pulsas Capturar eventos de teclado. CU01161E
« en: 27 de Febrero 2017, 19:25 »
Respuestas a los ejercicios propuestos en la entrega CU01161E del tutorial de programación web con JavaScript:

Ejercicio 1:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#tecla{
position:relative;
width: 400px;
height:400px;
margin: 100px 100px 100px 100px;
text-align:center;
font-size: 250px;
border: 1px solid;
}
</style>
<script type="text/javascript">
function start(){
var widthBody = document.body.clientWidth;
document.getElementById("tecla").style.left = ((widthBody - 600)/2) + "px";
document.onkeypress = mostrarTecla;
document.onkeyup = function(){tecla.innerHTML = "";};
}
function mostrarTecla(objEvent){
var caracter =  String.fromCharCode(objEvent.which);
                if (objEvent.which!=0 && objEvent.which!=13) {
                tecla.innerHTML = caracter;
}
}
</script>
</head>
<body onload="start()">
<h1 style="text-align:center;">Pulsa una tecla</h1>
<div id="tecla">

</div>
</body>
</html>
Ejercicio 2:

Para este ejercicio el enunciado propone capturar el evento con onkeypress pero las flechas no se pueden capturar con este evento, solo se pueden capturar con keydown o keyup, decido hacerlo con keyup ya que en esta sesión se recomienda que la captura de teclas no imprimibles se haga con keyup y keyCode:

Citar
Regla 2: para determinar si ha sido pulsada una tecla no imprimible (como flecha de cursor, etc.), usaremos el evento keyup, determinando la tecla pulsada con la propiedad keyCode (código de la tecla física).

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#tecla{
position: absolute;
width: 300px;
height:300px;
margin: 200px 200px 200px 200px;
border: 1px solid;
top:1px;
background-color:yellow;
}
</style>
<script type="text/javascript">
var left, toper=0;
function start(){
var widthBody = document.body.clientWidth;
document.getElementById("tecla").style.left = ((widthBody - 700)/2) + "px";
left = parseInt(document.getElementById("tecla").style.left);
document.onkeyup  = mostrarTecla;
}

function mostrarTecla(objEvent){
var divElem = document.getElementById("tecla");
var caracter =  String.fromCharCode(objEvent.keyCode);
console.log(objEvent.keyCode);
if (objEvent.keyCode==37) {
left-=20;
divElem.style.left = left+"px";
}
else if(objEvent.keyCode==38){
toper-=20;
divElem.style.top = toper+"px";
}
else if(objEvent.keyCode==39){
left+=20;
divElem.style.left = left+"px";
}
else if(objEvent.keyCode==40){
toper+=20;
divElem.style.top = toper+"px";
}
}
</script>
</head>
<body onload="start()">
<h1 style="text-align:center;">Pulsa una flecha</h1>
<div id="tecla">

</div>
</body>
</html>

7
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. addEventListener, propagación, bubbling, captura. CU01158E
« en: 24 de Febrero 2017, 15:18 »
Cita de: bermartinv en 24 de Febrero 2017, 11:18
En el ejercicio solo nos pide que nos muestre los nodos dentro del div que hemos creado.
Como lo has resuelto muestra todos los nodos de la ventana.
No entiendo para que pusiste este evento:
Código: [Seleccionar]
window.addEventListener("click",function(){
alert("Soy un nodo tipo: " + this.nodeName + " y estoy burbujeando");
Prueba el código sin él, y no entendremos en undefined
Saludos  ;)

Buenas bermartinv, según el enunciado de este temario:

Citar
Crea un documento HTML donde dentro del elemento body tengamos un div con id “principal”, dentro de principal otro div denominado “secundario”, y dentro de secundario otro div con id “terciario”. Dentro de terciario debe existir un párrafo con el texto: Ejemplo de bubbling (burbujeo). Añade eventListeners con el evento click para los párrafos y todos los elementos div, document y window, y una función de respuesta común para todos ellos que emita el mensaje de alerta <<Soy un nodo tipo NombreDelNodo y estoy burbujeando>>.

Ejemplo: al hacer click sobre el texto <<Ejemplo de bubbling (burbujeo)>> deberán empezar a aparecernos mensajes como: Soy un nodo tipo P y estoy burbujenado. Soy un nodo tipo DIV y estoy burbujeando. Soy un nodo tipo DIV y estoy burbujeando…

Según lo que está marcado en rojo entiendo que debo hacer un burbujeo no sólo a los div's sino a todo, por eso añadí el addEventListener a document y window, a window ya sé que iba a dar undefined, yo creo que el enunciado pone que hagamos burbujeo a window para que nos demos cuenta de eso mismo, que window no es un nodo como todo lo demás y por eso no tiene propiedad nodeName.

Saludos

8
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Código para visualizar coordenadas del ratón en pantalla CU01160E
« en: 21 de Febrero 2017, 19:03 »
Buenas, aquí mi código:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#area{
width:500px;
height:400px;
position: relative;
}
</style>
<script type="text/javascript">
function start(){
document.getElementById('area').addEventListener('mouseout', function(){
document.getElementById('x').innerHTML = '-';
document.getElementById('y').innerHTML = '-';
});
}
function getCoordenadas(event){
var area = document.getElementById('area');

document.getElementById('x').innerHTML = event.pageX;
document.getElementById('y').innerHTML = event.pageY;
}
</script>
</head>
<body onload="start()">
<h1>Posición x: <span id="x">-</span> Posición y: <span id="y">-</span></h1>
<div id="area" onmousemove="getCoordenadas(event)"></div>
</body>
</html>

9
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Lista de eventos cambiar la imagen visible al pasar ratón CU01159E
« en: 20 de Febrero 2017, 20:25 »
Ejercicio 1 de la entrega CU01159E del manual de programación web con JavaScript:


Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">

<script type="text/javascript">
function start(){
var imgElem = document.getElementsByTagName('img')[0];
imgElem.addEventListener('mouseover', function(){
this.src = "http://i.imgur.com/SpZyc.png";
});
imgElem.addEventListener('mouseout', function(){
this.src = "http://i.imgur.com/tq5Bs.png";
});

}
</script>
</head>
<body onload="start()">
<h1>La web para aprender programación</h1>
<p>Primer párrafo de texto</p>
<p>Segundo párrafo de texto</p>
<img src="http://i.imgur.com/tq5Bs.png" title="imagen" alt="xfashion"/>
</body>
</html>

Ejercicio 2:
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">

<script type="text/javascript">
function start(){
var inputElems = document.querySelectorAll('.name, .edad, .correo');
for(var i=0;i<inputElems.length;i++){
inputElems[i].addEventListener('focus', function(){
this.style.backgroundColor = "";
});
}
}
function envio(){
var inputElems = document.getElementsByTagName('input');

if(!inputElems[0].value){
alert("campo nombre vacio");
inputElems[0].style.backgroundColor = "red";
return false;
}
if(!inputElems[3].value.match(/^\w+@\w+\.\w{2,}$/)) {
alert("Revise el campo correo electrónico");
inputElems[3].style.backgroundColor = "red";
return false;
}
if(parseInt(inputElems[2].value)<=0 || !Number(inputElems[2].value)) {
alert("Revise campo Edad");
inputElems[2].style.backgroundColor = "red";
return false;
}
return true;
}
</script>
</head>
<body onload="start()">
<h1>La web para aprender programación</h1>
<p>Primer párrafo de texto</p>
<p>Segundo párrafo de texto</p>
<form name="formulario" action="http://www.google.es" onsubmit='return envio();' method="get">
<input name="nombre" class="name" type="text" placeholder="nombre">
<input name="apellido" class="apellido" type="text" placeholder="apellido">
<input name="edad" class="edad" type="text" placeholder="edad">
<input name="correo" class="correo" type="text" placeholder="ejemplo@ejemplo">
<input type="submit" value="submit">
<input type="reset" value="cancelar">
</form>
</body>
</html>

10
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. addEventListener, propagación, bubbling, captura. CU01158E
« en: 20 de Febrero 2017, 17:52 »
Buenas, me salen todos los mensajes menos para window, y creo que es porque no es un nodo y por eso no tiene la propiedad nodeName, por lo demás creo que está bien:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
var elems = document.querySelectorAll('P, div, body, html');
var nodeDocument = document.querySelector('html').parentNode;
for(var i=0;i<elems.length;i++){
elems[i].addEventListener("click",function(){
alert("Soy un nodo tipo: " + this.nodeName + " y estoy burbujeando");
});
}
nodeDocument.addEventListener("click",function(){
alert("Soy un nodo tipo: " + this.nodeName + " y estoy burbujeando");
});
window.addEventListener("click",function(){
alert("Soy un nodo tipo: " + this.nodeName + " y estoy burbujeando");
});
}
</script>
</head>
<body>
<div id="principal">
<div id="secundario">
<div id="terciario">
<p>elemplo de bubbling(burbujeo)</p>
</div>
</div>
</div>
</body>
</html>

11
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. Eventos, manejador(event handler). CU01157E
« en: 20 de Febrero 2017, 17:34 »
Gracias por la correción Pedro! faltaba recoger los elementos de h3 y asignarles los eventos, dejo el código:

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(){
h1AndH3();
parrafo();
}
function h1AndH3(){
var h1Elems = document.getElementsByTagName('h1');
var h3Elems = document.getElementsByTagName('h3');

for(var i=0;i<h1Elems.length;i++){
h1Elems[i].onmouseover = over;
h1Elems[i].onmouseout = out;
}
for(var i=0;i<h3Elems.length;i++){
h3Elems[i].onmouseover = over;
h3Elems[i].onmouseout = out;
}
function over(){
this.style.color = "#ff8000";
}
function out(){
this.style.color = "#804000";
}
}
function parrafo(){
var pElems = document.getElementsByTagName("P");
for(var i=0;i<pElems.length;i++){
pElems[i].onmouseover = over2;
pElems[i].onmouseout = out2;
}
function over2(){
this.style.backgroundColor = "#ffff00";
}
function out2(){
this.style.backgroundColor = '';
}
}

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

12
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Eventos, manejador(event handler) onmouseover function CU01157E
« en: 17 de Febrero 2017, 18:59 »
Muy buenas

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(){
h1AndH3();
parrafo();
}
function h1AndH3(){
var h1Elems = document.getElementsByTagName('h1');
for(var i=0;i<h1Elems.length;i++){
h1Elems[i].onmouseover = over;
h1Elems[i].onmouseout = out;
}
function over(){
this.style.color = "#ff8000";
}
function out(){
this.style.color = "#804000";
}
}
function parrafo(){
var pElems = document.getElementsByTagName("P");
for(var i=0;i<pElems.length;i++){
pElems[i].onmouseover = over2;
pElems[i].onmouseout = out2;
}
function over2(){
this.style.backgroundColor = "#ffff00";
}
function out2(){
this.style.backgroundColor = '';
}
}

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

13
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Convertir String a Number y ponerle precisión dos decimales CU01156E
« en: 17 de Febrero 2017, 17:26 »
Buenas, dejo aquí mi solución de este ejercicio CU01156E del manual de programador web con JavaScript

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function pedirNumeroGrande(){
var correct=false;
var numero;
while(!correct){
numero = prompt("introduce un numero mayor a 10000000");
numero = parseInt(numero);
if(numero>10000000){
alert("el numero con precision de 2 digitos es: " + numero.toPrecision(2));
correct = true;
}
}
}

function pedirConDecimales(){
var correct=false;
var numConDecimales;
while(!correct){
numConDecimales = prompt("introduce un numero con 4 decimales");
if(numConDecimales.match(/\.[0-9]{4}$/)){
numConDecimales = parseFloat(numConDecimales);
numConDecimales = numConDecimales.toFixed(2);
alert("El numero con 2 decimales es: " + numConDecimales);
correct = true;
}
}
}

function pedirCadena(){
var correct=false;
var cadena;
while(!correct){
cadena = prompt("introduce una frase comenzando por un entero o decimal");
var matchArray = cadena.match(/^\d+\.\d+|^\d+/);
if(matchArray){
matchArray1 = cadena.match(/\d+\.\d+|\d+/g);
alert(matchArray1);
correct = true;
}
}
}

function start(){
pedirNumeroGrande();
pedirConDecimales();
pedirCadena();
}
</script>
</head>
<body onload="start()">
</body>
</html>

14
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. Paréntesis en expresiones regulares. CU01155E
« en: 16 de Febrero 2017, 17:32 »
Buenas Pedro, el apartado d no se me olvidó resolverlo, si ves en el código la expresión regular referente a lo que pide el apartado d lo tengo en la variable "regExpAt" y  un poco más abajo en la línea 11 está el if que lo usa, lo que sí pasó es que olvidé poner donde se guarda el resultado de formularioElems[2].value.replace(regExpAt,'@')  que sería en el mismo sitio, entonces la línea de código dentro de ese if quedaría así (en verde lo que faltaba);

formularioElems[2].value = formularioElems[2].value.replace(regExpAt,'@');


Dejo el código entero con esta corrección:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function validacionConExpReg(){
var regExpAt = /\sat\s/
var regExp1 = /[A-Za-z]{3,}/
var regExp2 = /(^\w+@\w+\.\w+)$|(^\w+@\w+)$/
var regExp3 = /(^\w+@\w+\.\w+)$|(^\w+\.\w+)$/
var regExpMayus = /[A-Z]/g
var formularioElems = document.getElementsByClassName('elem');
if(formularioElems[2].value.match(regExpAt)){formularioElems[2].value = formularioElems[2].value.replace(regExpAt,'@');}
var matches1 = formularioElems[0].value.match(regExp1);
var matches2 = formularioElems[2].value.match(regExp2);
var matches3 = formularioElems[2].value.match(regExp3);

if(!matches1){alert('El nombre no cumple tener al menos tres letras');}

if(!matches2 && !matches3){alert("faltan tanto @ como . en el correo electronico");
}else if(!matches2){alert("Falta el simbolo @ en el correo electronico o esta mal colocado");
}else if(!matches3){alert("Falta el simbolo . en el correo electronico o esta mal colocado");}

formularioElems[2].value = formularioElems[2].value.toLowerCase(); //Todo lo de abajo es lo mismo que esta línea (jajaj)*/

/*var emailMatchs = formularioElems[2].value.match(regExpMayus);
var emailArray = formularioElems[2].value.split("");
var emailPos;
for(var i=0;i<emailMatchs.length;i++){
emailPos = formularioElems[2].value.search(regExpMayus);
emailArray[emailPos] = emailArray[emailPos].toLowerCase();
formularioElems[2].value = emailArray.join("");
}
*/

}
</script>
</head>
<body>
<form name="formulario" action="http://www.google.es" method="GET" onsubmit="validacionConExpReg()">
<input type="text" class="elem" name="nombre" placeholder="nombre">
<input type="text" class="elem" name="apellido" placeholder="apellido">
<input type="text" class="elem" name="email" placeholder="email">
<input type="submit" class="elem" value="submit">
</form>
</body></html>


15
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript validaciones ver si falta el simbolo @ en correo electronico CU01155E
« en: 15 de Febrero 2017, 19:05 »
Respuesta para el ejercicio CU01155E del tutorial de programación en internet con JavaScript.

De largo el ejercicio que más tiempo me ha llevado a hacer, y lo peor de todo no fue por la dificultad del ejercicio, sino por que había olvidado que se podía hacer un toLowerCase() a un string, pensaba que sólo se podía hacer a un char   :-[ :-[, dejo como comentario dentro del código lo que me llevó una hora pensar en cómo podía aplicar toLowerCase() a los char's del email y que luego vi que so solucionaba con sólo una linea ::)

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function validacionConExpReg(){
var regExpAt = /\sat\s/
var regExp1 = /[A-Za-z]{3,}/
var regExp2 = /(^\w+@\w+\.\w+)$|(^\w+@\w+)$/
var regExp3 = /(^\w+@\w+\.\w+)$|(^\w+\.\w+)$/
var regExpMayus = /[A-Z]/g
var formularioElems = document.getElementsByClassName('elem');

if(formularioElems[2].value.match(regExpAt)){formularioElems[2].value.replace(regExpAt,'@');}
var matches1 = formularioElems[0].value.match(regExp1);
var matches2 = formularioElems[2].value.match(regExp2);
var matches3 = formularioElems[2].value.match(regExp3);

if(!matches1){alert('El nombre no cumple tener al menos tres letras');}

if(!matches2 && !matches3){alert("faltan tanto @ como . en el correo electronico");
}else if(!matches2){alert("Falta el simbolo @ en el correo electronico o esta mal colocado");
}else if(!matches3){alert("Falta el simbolo . en el correo electronico o esta mal colocado");}

formularioElems[2].value = formularioElems[2].value.toLowerCase(); //Todo lo de abajo es lo mismo que esta línea (jajaj)

/*var emailMatchs = formularioElems[2].value.match(regExpMayus);
var emailArray = formularioElems[2].value.split("");
var emailPos;
for(var i=0;i<emailMatchs.length;i++){
emailPos = formularioElems[2].value.search(regExpMayus);
emailArray[emailPos] = emailArray[emailPos].toLowerCase();
formularioElems[2].value = emailArray.join("");
}
*/

}
</script>
</head>
<body>
<form name="formulario" action="http://www.google.es" method="GET" onsubmit="validacionConExpReg()">
<input type="text" class="elem" name="nombre" placeholder="nombre">
<input type="text" class="elem" name="apellido" placeholder="apellido">
<input type="text" class="elem" name="email" placeholder="email">
<input type="submit" class="elem" value="submit">
</form>
</body></html>

16
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript encontrar un patrón con Expresiones regulares. RegEx. CU01154E
« en: 11 de Febrero 2017, 15:09 »
Buenas, aquí presento mi solución para el ejercicio CU01154E del curso avanzado de JavaScript, aunque con algunas dudas:

la expresión regular /^[A-C]\w+\ses\s\w+/ hace match cuando la primera letra es A,B o C seguida de cualquier letra minúscula o mayúscula, número o guión bajo una o más veces, luego un espacio seguido de la palabra "es", luego otro espacio seguido de cualquier palabra que no contenga acento o símbolo(se permite guión bajo).

Si esta deducción es correcta, mi resultado sería el siguiente.

En verde está subrayado la cadena que hace match y en rojo si no hace match ninguna parte de la cadena:

Citar
a)  Juan es guapo

b) Adriano no es feo

c) Adriano deja de ser guapo

d) Adriano ya es guapo

e) No es ahora

f) Ahora es no

g) Adriano es guapo

 

-------------------------------

Tengo una duda sobre este temario, en esta lección hay una parte que dice lo siguiente(subrayo en azul donde tengo la duda):

Citar
JavaScript permite crear expresiones regulares de dos maneras:

a) En forma de literal: var miExpresionRegular = /as?.a/ representa a todas las cadenas que contienen una subcadena con la primera letra de la subcadena una a, seguida de una s, opcionalmente seguida de cualquier letra, y seguida de una a.

b) Instanciando el objeto RegExp: var miExpresionRegular = new RegExp("as?.a") representa lo mismo.

 

Una cadena como “casamentero” contiene el patrón: contiene una a, seguida de s, el carácter opcional no está presente, y seguida una a. c-a-s-a-m-e-n-t-e-r-o

Una cadena como “castaño” contiene el patrón: c-a-s-t-a-ñ-o contiene el patrón, siendo el carácter opcional la letra t.

También contienen el patrón asa, casta, masa, castañuela, casiarina, kaspamina ó asma.

Cadenas como “sabina”, “casualidad” ó “as” no contienen el patrón.

¿No debería hacer match la expresión regular /as?.a/ cuando le pasas la cadena "casualidad"? tiene una "a" seguida de una "s", luego el carácter optativo que sería la "u" y para finalizar la "a", yo creía que sí hacía match.

17
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Funciones arrays, push, sort (ordenar números) join ejemplo CU01153E
« en: 10 de Febrero 2017, 17:56 »
Respuesta a los ejercicios planteados en la entrega CU01153E del tutorial de programador web avanzado con JavaScript:

EJERCICIO 1:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function start(){
var vOriginal = [33, 2, 36, 55, 4, 1];
var v1 = vOriginal.slice();
var v2 = vOriginal.slice();
var menorMayor = v1.sort(function(num1,num2){return num1-num2;});
var mayorMenor = v2.sort(function(num1,num2){return num2-num1;});
alert("array original: "+vOriginal+"\nArray menorMayor: "+menorMayor+"\nArray mayorMenor: "+mayorMenor);
}
</script>
</head>
<body onload="start()">
</body>
</html>

EJERCICIO 2:

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
 function start(){
 var miArray=['Moto', 'soto', 'Abaco', 'abeja', 'Sapo', 'nieve', 'Zumba', 'barco'];
 var arrayCopia = miArray.slice();

 for(var i=0;i<arrayCopia.length;i++){
 arrayCopia[i]=arrayCopia[i].toLowerCase();
 }
 var arrayCopia2 = arrayCopia.slice();
 arrayCopia.sort();
 var posicion, temporal;
 for(i=0;i<arrayCopia.length;i++){
posicion = arrayCopia2.indexOf(arrayCopia[i]);
temporal = miArray[i];
miArray[i] = miArray[posicion];
miArray[posicion] = temporal;
temporal=arrayCopia2[i];
arrayCopia2[i] = arrayCopia2[posicion];
arrayCopia2[posicion] = temporal;
 }
 alert(miArray);
 }
</script></head>
<body onload="start()">
</body></html>
Saludos!

18
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. Depurar. console.log / Error debug: Firebug. CU01151E
« en: 10 de Febrero 2017, 17:49 »
Cita de: pedro,, en 10 de Febrero 2017, 16:00
Buenas.

La primera parte del ejercicio está bien respondida, te faltaría lo siguiente:

Citar
Corrige el error que contiene el código. ¿Qué mensajes aparecen ahora en la consola? ¿Qué interpretación podemos darle a los resultados que hemos obtenido?

Saludos. ;D

Buenas Pedro, olvidé poner que el texto que está debajo del código es mi respuesta de esa pregunta, es decir arreglando el alert('Hello';  por  alert('Hello'); 
y ya funcionaría:

b)

El problema que hay en el código es que falta el cierre de paréntesis de la función alert:
 alert('Hello';

Esto provoca que la función ejemploObjetos() no termine de "crearse" ya que cuando llega a la linea del alert se deja de ejecutar javascript antes de llegar al cierre de la función (}) , entonces al hacer la llamada haciendo clic en "probar", la página busca la función "ejemploObjetos()" y no la encuentra, lanzando el error.

El problema se soluciona corrigiendo el alert: alert('Hello'); entonces se termina de crear la función y al hacer clic se ejecuta sin problemas.

quedando el código así:
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemploObjetos() {
var unObjeto = new Array();
console.log('unObjeto es' + unObjeto);
console.log(unObjeto);
console.log('this es ' + this);
alert('Hello');
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

19
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. Constructores con herencia en cadena call/apply. CU01150E
« en: 10 de Febrero 2017, 17:43 »
Cierto! lo trataba como una función más pero ahora ya puedo diferenciarlo, muchas gracias!

20
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. Jerarquía de clases, cadena de prototipos. CU01149E
« en: 10 de Febrero 2017, 17:35 »
Buenas Pedro, no sabía de ese detalle, muchas gracias por la corrección, como no puedo editar el mensaje principal dejo aquí el código modificado ya que puse 'tomate' en la clase de lechuga   ::):

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

}
vegetal.movilidad = "ser vivo sin movilidad";
vegetal.prototype.mostrarMovilidad = function(){ return vegetal.movilidad;}


function PlantaCultivada(){
this.nombreCientifico = "desconocido";
}
PlantaCultivada.prototype = new vegetal();

function Hortaliza(){

this.tipoHortaliza = "indefinido";
this.mostrarNombre = function(){return this.tipoHortaliza;}
}
Hortaliza.prototype = new PlantaCultivada();
Hortaliza.componentePrincipal = "agua";


function Zanahoria(){
this.tipoHortaliza = "zanahoria";
this.valorCalorico = 45;
}
Zanahoria.prototype = new Hortaliza();

function Lechuga(){
this.tipoHortaliza = "lechuga";
this.valorCalorico = 31;
}
Lechuga.prototype = new Hortaliza();

function Tomate(){
this.tipoHortaliza = "tomate";
this.valorCalorico = 39;
}
Tomate.prototype = new Hortaliza();


function cargarObjetos(){
 var tomate1 = new Tomate();
 var msg = tomate1.mostrarNombre() + " tiene la propiedad movilidad: " + tomate1.mostrarMovilidad();
 alert(msg);
 }

</script></head>
<body onload="cargarObjetos()" >
</body></html>
Saludos!

Páginas: [1] 2 3

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