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

Páginas: [1]
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Objeto Event, posición del cursor window.onload = function JavaScript CU01160E
« en: 18 de Febrero 2017, 02:23 »
Mi propuesta a la solución del ejercicio propuesto CU01160E del manual de programación web desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Objetc Event</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div{width: 500px; height: 400px; border: 1px solid;}
</style>
</head>
<body>
<h1>Posición x: 0 - Posición y: 0</h1>
<div>

</div>
<script type="text/javascript" >
window.onload = function () {
var nodoDiv = document.getElementsByTagName("div")[0];
nodoDiv.addEventListener("mousemove", mover)
}
function mover(eventoMove) {
var cX = eventoMove.clientX;
var cY = eventoMove.clientY;
document.querySelector("h1").innerHTML = "Posición x: " + cX + " - Posición y: " + cY;
}
</script>
</body>
</html>

2
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Lista de eventos JavaScript cómo detectar eventos usar addEventListener CU01159E
« en: 15 de Febrero 2017, 03:26 »
Respuesta a los ejercicios de la entrega CU01159E del manual avanzado de programación web con JavaScript.

Mi solución propuesta al ejercicio 1 es:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>cambiar imagen</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>La web para aprender programación</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
 </p>
<img width="300" src="https://mundoentrenamiento.com/wp-content/uploads/2016/06/futbol-rendimiento-fuerza-resistencia-exito.jpg" alt="imagen">
<script type="text/javascript">
var nodoImg = document.querySelector("img");
nodoImg.addEventListener("mouseover", function () {
this.src = "http://fundacion.eidos1.netdna-cdn.com/wp-content/uploads/2016/07/Futbol.jpg";
});
nodoImg.addEventListener("mouseout", function () {
this.src = "https://mundoentrenamiento.com/wp-content/uploads/2016/06/futbol-rendimiento-fuerza-resistencia-exito.jpg";
})
</script>
</body>
</html>


Para el ejercicio 2 propongo esta solución, creo que el código lo hice muy largo, siento que realice muchas lineas.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>ejercicio 2</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="Michael" >
<meta name="date" content="2017-02-14T20:19:14-0600" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
</head>
<body>
<h1>La web de aprender programación</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
</p>
<form action="#" method="get" onsubmit="return envio()" onreset="recargar()">
<input type="textbox" name="nom" placeholder="Nombre" />
<input type="textbox" name="ape" placeholder="Apellidos" />
<input type="textbox" name="edad" placeholder="Edad" />
<input type="textbox" name="correo" placeholder="Correo Electrónico" /><br>
<span> </span>
<br><br>
<button type="submit">Enviar</button>
<button type="reset">Cancelar</button>
</form>
<script type="text/javascript">
function envio() {
var nombre = document.getElementsByTagName("input")[0].value;
var correo = document.getElementsByTagName("input")[3].value;
var edad = document.getElementsByTagName("input")[2].value;
console.log("El nombre es: " + nombre + " correo es: " + correo + " edad es: "+ edad);
var envio = [false, false, false];
if (nombre.length == 0 && correo.length == 0) {
document.querySelector("span").innerHTML = "El nombre y correo son necesarios.";
document.getElementsByTagName("input")[0].style.background = "yellow";
document.getElementsByTagName("input")[3].style.background = "yellow";
envio[0] = true;
}
else if (nombre.length == 0) {
document.querySelector("span").innerHTML = "El nombre es necesario.";
document.getElementsByTagName("input")[0].style.background = "yellow";
envio[0] = false;
}
else if (correo.length == 0) {
document.querySelector("span").innerHTML = "El correo es necesario.";
document.getElementsByTagName("input")[3].style.background = "yellow";
envio[0] = false;
}
else {
envio[0] = true;
}
var patron = /^\w{2,}@\w{2,}\.\w{2,}/;
if (!patron.test(correo)) {
document.querySelector("span").innerHTML = "El correo no tiene el formato correcto, \"ejemplo@dominio.com\".";
document.getElementsByTagName("input")[3].style.background = "yellow";
envio[1] = false;
}
else {
envio[1] = true;
}
if (edad <= 0) {
document.querySelector("span").innerHTML = "Ingresa es una edad valida";
document.getElementsByTagName("input")[2].style.background = "yellow";
envio[2] = false;
}
else {
envio[2] = true;
}
if (envio[0] == true && envio[1] == true && envio[2] == true) {
console.log("envio es: " + envio);
return true;
}
else {
return false;
}
}
function recargar() {
location.reload();
}
window.onload = function () {
var nodosInput = document.getElementsByTagName("input");
for (var i=0; i<nodosInput.length; i++) {
nodosInput[i].addEventListener("focus", function () {
this.style.backgroundColor = "white";
})
}
}
</script>
</body>
</html>

3
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Eventos Javascript cómo detectar paso ratón onmouseover, onmouseout CU01157E
« en: 14 de Febrero 2017, 00:02 »
Solución al ejercicio propuesto CU01157E del curso avanzado de programación web con JavaScript:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>eventos</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" >
window.onload = function () {
var nodos = document.querySelectorAll('h1, h3');
for (var i=0; i<nodos.length; i++) {
nodos[i].onmouseover = function() {
this.style.color = "orange";
}
nodos[i].onmouseout = function() {
this.style.color = "maroon";
}
}
var nodosP = document.querySelectorAll("p");
for (i in nodosP) {
nodosP[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
}
nodosP[i].onmouseout = function () {
this.style.backgroundColor = "transparent";
}
}
}
</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 producto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>

4
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript evento onsubmit envío de formulario ejecutar función validar CU01142E
« en: 08 de Febrero 2017, 05:31 »
Muchisimas gracias por las recomendaciones, he tomado todos los cursos desde el principio pero hasta ahora aprendi a publicar, gracias y muchos saludos desde México!!.

5
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript expresiones regulares Paréntesis encontrar patrones cadenas CU01155E
« en: 08 de Febrero 2017, 05:25 »
Hola este es mi codigo, me cuesta mucho entender los patrones pero ayudandome de los demas se pide lo que quiere, gracias.
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>validacion Regex</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
*{margin: 0; padding: 0;}
form{width: 500px;}
label, input, button {
display:  block; padding: 5px; width: 100%; margin: 5px auto;}
span{display: none; color: red; background-color: lightyellow;}
</style>
<script type="text/javascript">
function validar(){
var patronNombre = new RegExp("[a-zA-Z]{3,}");
var patronCorreo = /\w+@{1}\w+\.{1}\w+/
var nodosInput = document.getElementsByTagName("input");
var enviar = true;
var msg = document.getElementsByTagName("span");

var nombre = nodosInput[0].value;
if (!patronNombre.test(nombre)) {
msg[0].textContent = "El nombre no cumple con tener al menos 3 letras";
msg[0].style.display = "block";
enviar = false;
}
else {
msg[0].style.display = "none";
}
var patronAT = /\sat\s/g;
nodosInput[2].value = nodosInput[2].value.replace(patronAT, '@');

if (!patronCorreo.test(nodosInput[2].value)) {
msg[2].textContent = "El formato de correo es incorrecto falta @ ó .";
msg[2].style.display = "block";
enviar = false;
}
else {
msg[2].style.display = "none";
}
nodosInput[2].value = nodosInput[2].value.toLowerCase();

return enviar;
}

</script>
<body>
</head>
<div>
<form method="GET" action="#" name="miformulario" onsubmit="return validar()" >
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" placeholder="Introducir Nombre" />
<span class="msg"></span>
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Introducir Apellidos" />
<span class="msg"></span>
<label for="correo">Correo Electrónico:</label>
<input type="text" name="email" id="correo" placeholder="Introducir Correo Electrónico" />
<span class="msg"></span>
<button name="enviar" value="enviar" type="submit">Enviar</button>
</form>
</div>
</body>
</html>

6
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript evento onsubmit envío de formulario ejecutar función validar CU01142E
« en: 17 de Enero 2017, 18:15 »
Hola dejo mi respuesta para el ejercicio de validar con las funciones de cadenas.
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Validar con funciones de cadenas</title>
<style type="text/css">
label, input{display: block;}
button{border: none; cursor: pointer; background-color: blueviolet; border-radius: 10px; padding: 10px; margin: 5px 10px; }
button:hover{background-color: violet; color: white;}
</style>
</head>
<body>
<div>
<form method="get" action="#" onsubmit="return validar()" name="formulario" role="form">
<label for="nombre">Nombre: </label>
<input type="text" id="nombre" name="nombre" />
<label for="apellidos">Apellidos: </label>
<input type="text" id="apellidos" name="apellidos" />
<label for="mail">Correo: </label>
<input type="text" id="mail" name="mail" />
<button type="submit"> Enviar </button>
<button type="reset">Limpiar </button>
</form>

</div>
<script type="text/javascript" >
var envio = false;
function validar() {
var nom = document.getElementById('nombre').value;
var ape = document.getElementById('apellidos').value;
var correo = document.getElementById('mail').value;
var nombrebien = validnom(nom);
var correobien = correovalido(correo);
//var correomin = mayusculas();

if (nombrebien == true && correobien == true) {
return true;
}
else {
return false;
}
}
function validnom(nombre) {
if(nombre.length < 3){
alert("El nombre debe tener al menos 3 letras y tiene: " + nombre.length + nombre);
return false;
}
document.getElementById('nombre').value = nombre;
return true;
}
function correovalido(email) {
var mail = email.replace(/at/g,'@');
if(mail.indexOf('@') == -1 && mail.indexOf('.') == -1){
alert("El Formato es incorrecto falta '@' y '.' en el correo");
return false;
}
else if (mail.indexOf('@') == -1) {
alert("El Formato es incorrecto falta un \'@\' en el correo");
return false;
}
else if (mail.indexOf('.') == -1) {
alert("El Formato es incorrecto falta un \'.\' en el correo");
return false;
}
else {
document.getElementById('mail').value = mail.toLowerCase();
return true;
}
}
</script>
</body>
</html>

Páginas: [1]

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