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

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

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

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

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

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

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

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

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

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

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

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

13
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!

14
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Condicional ternario getElementsByTagName devuelve un array CU01152E
« en: 09 de Febrero 2017, 23:06 »
Respuestas al ejercicio CU01152E del tutorial de programación básica en internet con JavaScript.

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

el operador += es una doble operación y lo que hace es sumar la variable a operar con la variable destino y la guarda en la variable destino, son equivalentes:
variableDestino = variableDestino + variableOperar;
variableDestino += variableOperar;


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

Por que getElementsByTagName devuelve un array y al poner [ 0 ] le estamos diciendo que de ese array que nos devuelve sólo quedarnos con el de la posición 0, son equivalentes:
nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;

con

nodoBody = document.getElementsByTagName('body');
nodoBody[0].innerHTML = nodoBody.innerHTML[0] + htmlADevolver;

y aprovechando la pregunta anterior, también es equivalente:

nodoBody = document.getElementsByTagName('body');
nodoBody[0].innerHTML += htmlADevolver;


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

se crea una etiqueta h1: "<h1>No eligió color</h1>"
esto ocurre por que tenemos el condicional ternario donde si la variable "colorUsuario"
está vacía entonces la variable htmlADevolver guarda la etiqueta h1 mencionada antes.

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

Esto ocurre por que usamos la variable colorUsuario como valor del parametro "background-color" en la etiqueta h1, y como "pink" es una palabra reconocida por css pinta h1 de color rosa.

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=="red" || colorUsuario=="yellow" || colorUsuario=="blue" ? '<h1 style="background-color:'+colorUsuario+
';"> Usted eligió '+colorUsuario+'</h1>' : alert("no eligió color o el color no es válido");
var nodoBody = document.getElementsByTagName('body');
nodoBody[0].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(colorUsuario){
htmlADevolver += '<h1 style="background-color:'+colorUsuario+
';"> Usted eligió '+colorUsuario+'</h1>';
}
else{
htmlADevolver +=  '<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>

15
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript SyntaxError: missing ) after argument list ReferenceError: CU01151E
« en: 09 de Febrero 2017, 17:46 »
Respuestas para el ejercicio CU01151E del manual de programación web con JavaScript.

Mensaje que aparece antes:

Citar
SyntaxError: missing ) after argument list
alert('Hello';

Mensaje que aparece después:

Citar
ReferenceError: ejemploObjetos is not defined


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.

16
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Constructores con herencia diferencias entre call y apply CU01150E
« en: 09 de Febrero 2017, 17:24 »
Muy buenas, adjunto los códigos de respuesta al ejercicio CU01150E del manual de programación web 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 persona(nombre,nacionalidad){
this.nombre = nombre;
this.nacionalidad = nacionalidad;
}
persona.prototype.mostrarNacionalidad = function(){alert(this.nacionalidad);}

function medico(centroTrabajo,nombre,nacionalidad){
this.centroTrabajo = centroTrabajo;
persona.call(this,nombre,nacionalidad);
}
medico.prototype = new persona();

function medicoEspecialista(especialidad,centroTrabajo,nombre,nacionalidad){
this.especialidad = especialidad;
medico.call(this,centroTrabajo,nombre,nacionalidad);
}
medicoEspecialista.prototype = new medico();

function start(){
var medicoObj = new medicoEspecialista("pediatría","hospital san Juan", "Pedro", "Español");
medicoObj.mostrarNacionalidad();
}

</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 persona(nombre){
this.nombre = nombre;
}
persona.prototype.definicion = "ser humano";
persona.prototype.saludar = function(){alert("hola soy: " + this.nombre);}

function profesor(institucionAcademica,nombre){
this.institucionAcademica = institucionAcademica;
persona.call(this,nombre);
}
profesor.prototype = new persona();

function profesorInterino(mesesContrato,institucionAcademica,nombre){
this.mesesContrato = mesesContrato;
profesor.call(this,institucionAcademica,nombre);
}
profesorInterino.prototype = new profesor();

function profesorTitular(anosTrabajados,institucionAcademica,nombre){
this.anosTrabajados = anosTrabajados;
profesor.call(this,institucionAcademica,nombre);
}
profesorTitular.prototype = new profesor();

function start(){
var profesorTitular1 = new profesorTitular(8,"univesidad de león","Juan");
profesorTitular1.saludar();
}

</script>
</head>
<body onload="start()">
</body>
</html>

17
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Jerarquía de clases, cadena de prototipos secuencia herencia CU01149E
« en: 09 de Febrero 2017, 15:09 »
Mitad de curso! Respuestas al ejercicio CU01149E del tutorial de codificación con JavaScript.

Aquí presento una posible solución al ejercicio, saludos.

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 = "tomate";
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>

18
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript propiedades y métodos estáticos funciones para cálculos CU01148E
« en: 08 de Febrero 2017, 19:29 »
Respuesta planteada al ejercicio CU01148E del curso de programador web con JavaScript.

Saludos!

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function meteorito(d,t,n){
this.diametro = d;
this.temperatura = t;
this.nombre = n;
}
meteorito.definicionSegunDiccionario = "Fragmento de un cuerpo celeste que cae sobre la Tierra, o sobre un astro cualquiera.";

meteorito.obtenerRadio = function(diametro){return diametro/2;}
meteorito.obtenerTemperaturaFarenheit = function(temperaturaCelcius){return temperaturaCelcius*1.8;}

function obtenerSuperficie(diametro){

return Math.PI*Math.pow(meteorito.obtenerRadio(diametro),2);
}
function empezar(){
var meteor = new meteorito(30,800,"luna");
var msg = "¿Qué e sun meteorito?\n\n" + meteorito.definicionSegunDiccionario + "\n\n" +
"Nombre: " + meteor.nombre +
"\nTemperatura(farenheit): " + meteorito.obtenerTemperaturaFarenheit(meteor.temperatura) +
"\nSuperficie: " + obtenerSuperficie(meteor.diametro);
alert(msg);
}
</script>
</head>
<body onload="empezar()">

</body>
</html>

19
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript Prototipos y herencias prototype function this new ejemplo CU01147E
« en: 08 de Febrero 2017, 18:02 »
Respuesta al ejercicio CU01147E del tutorial de aprendizaje de programación web con JavaScript.

Aquí tengo mi solución, tengo una duda acerca de la sintaxis de acceso de tipo array, primero os adjunto el código que funciona y luego la duda.

Solución:
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function cometa(d,t,n){
this.diametro = d;
this.temperatura = t;
this.nombre = n;
}
function definicionSegunDiccionario(){
this.definicion = "Astro generalmente formado por un núcleo poco denso y una atmósfera luminosa que lo envuelve, precediéndolo o siguiéndolo, según su posición respecto del Sol, y que describe una órbita muy excéntrica.";
}
cometa.prototype = new definicionSegunDiccionario;
cometa.prototype.obtenerRadio = function(){ return this.diametro/2;}
cometa.prototype.obtenerTemperaturaFarenheit  = function(){ return this.temperatura*1.8;}
function cargarFuncion(){
var cometa1 = new cometa(150,1000,"Bruno");
var cometa2 = new cometa(200,1500,"Arturo");
var cometa3 = new cometa(8000,3000,"Lisa");
var cometas = [cometa1,cometa2,cometa3];
var msg = "Qué es un cometa? \n" + cometa1.definicion +
"\n\nLa información de los tres cometas son: \n";

for(var i=0;i<cometas.length;i++){
msg += "Nombre: " + cometas[i]['nombre'] +
"\nRadio: " + cometas[i]["obtenerRadio"]() +
"\nTemperatura: " + cometas[i]["obtenerTemperaturaFarenheit"]() + "\n\n";
}
alert(msg);
}
</script>
</head>
<body onload="cargarFuncion()">
</body>
</html>

Al array "cometas" puedo acceder sin problemas mediante el acceso por punto, como por ejemplo cometas[0].nombre y también con el for típico guiado por la variable "i" (cometas[ i ]["nombre"]) tal como puse en la solución.
Pero quería probar el acceso tipo array mediante for in, que me parece más correcto, entonces, inicialmente yo había escrito lo siguiente:

Código: [Seleccionar]

for(c in cometas){
msg += "Nombre: " + c['nombre'] +
"\nRadio: " + c["obtenerRadio"]() +
"\nTemperatura: " + c["obtenerTemperaturaFarenheit"]() + "\n\n";
}

Pero en este caso me sale "undefined".

Espero que alguien me pueda aclarar en esta duda, gracias!

20
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript. Recorrer propiedades de objetos con for in plus y minus CU01146E
« en: 06 de Febrero 2017, 18:50 »
Respuestas al ejercicio CU01146E del tutorial de programación web para novatos con JavaScript

a) He probado varias cosas pero la única manera que veo de poder hacer esto es cambiando el nombre de las propiedades del objeto, que no sean string, no conozco otro método.


b)
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function operaciones(){
this.suma = plus;
this.resta = minus;
}
function plus(x,y){ return x + y }
function minus(x,y){ return x - y }
function calcular(x, y, operacion){
var op = new operaciones();
if(operacion == '+'){return op.suma(x, y); }
else{return op.resta(x, y);}
}
function ejemploObjetos() {
alert ('Resultado de calcular(3, 15, \'+\') es '+ calcular(3,15, '+'));
}
</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>

c)
Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function operaciones(){
  this.suma = plus;
  this.resta = minus;
  this.mult = multi;
  this.division = divi;
}

function plus(x,y){ return x + y }
function minus(x,y){ return x - y }
function multi(x,y){ return x * y }
function divi(x,y){ return x/y }

function calcular(x, y, operacion){
var op = new operaciones();
if(operacion == '+'){return op.suma(x, y); }
else if(operacion == '-'){return op.resta(x, y);}
else if(operacion == '*'){return op.mult(x, y);}
else{return op.division(x, y);}
}

function ejemploObjetos() {
alert ('Resultado de calcular(3, 15, \'+\') es '+ calcular(3,15, '+'));
alert ('Resultado de calcular(3, 15, \'-\') es '+ calcular(3,15, '-'));
alert ('Resultado de calcular(3, 15, \'*\') es '+ calcular(3,15, '*'));
alert ('Resultado de calcular(3, 15, \'/\') es '+ calcular(3,15, '/'));
}
</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>

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