Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Javascript sólo "para validar formularios"

 Estas en el tema de Javascript sólo "para validar formularios" en el foro de Javascript en Foros del Web. Hace una semana, un amigo del instituto me dijo textualmente, que "Javascript sólo sirve para validar formularios"; y me reto a hacer algo que le ...
  #1 (permalink)  
Antiguo 29/01/2012, 08:02
Avatar de patkoala  
Fecha de Ingreso: julio-2011
Mensajes: 62
Antigüedad: 12 años, 9 meses
Puntos: 19
Javascript sólo "para validar formularios"
Hace una semana, un amigo del instituto me dijo textualmente, que "Javascript sólo sirve para validar formularios"; y me reto a hacer algo que le sorprendiese con Javascript(sin ayuda de frameworks) en una semana, y los resultados han sido estos:
1.Dibujo de cuadrados:
Controles:n para crear cuadrado,+ para aumentar su tamaño, - para reducirlo,moverlo con las teclas de arriba,abajo, izquierda y derecha y pulsar sobre cualquier cuadrado para seleccionarlo.
Cita:
<html><head><script type="text/javascript">
window.onload = function (){
id = document.getElementById('pixel');
}
window.onclick = function (e){
id = e.target;
}
document.onkeydown = function (e){
car = e.keyCode;
pixel = id;
if(car == 37){
pixel.style.left = parseInt(pixel.style.left.split("px")[0]) - 10 + "px";
}
if(car == 39){
pixel.style.left = parseInt(pixel.style.left.split("px")[0]) + 10 + "px";
}
if(car == 38){
pixel.style.top = parseInt(pixel.style.top.split("px")[0]) - 10 + "px";
}
if(car == 40){
pixel.style.top = parseInt(pixel.style.top.split("px")[0]) + 10 + "px";
}
if(car == 107 || car == 187){
pixel.style.width = parseInt(pixel.style.width.split("px")[0]) + 10 + "px";
pixel.style.height = parseInt(pixel.style.height.split("px")[0]) + 10 + "px";
}
if(car == 109 || car == 189){
pixel.style.width = parseInt(pixel.style.width.split("px")[0]) - 10 + "px";
pixel.style.height = parseInt(pixel.style.height.split("px")[0]) - 10 + "px";
}
if(car == 46){
document.body.removeChild(pixel);
}
if(car == 78){
nuevodiv();
}
}
function nuevodiv(){
elemento = document.createElement("div");
elemento.style.width = "50px";
elemento.style.height = "50px";
elemento.style.position = "absolute";
elemento.style.left = "0px";
elemento.style.top = "0px";
elemento.style.backgroundColor="rgb("+Math.round(M ath.random()*255)+","+Math.round(Math.random()*255 )+","+Math.round(Math.random()*255)+")";
document.body.appendChild(elemento);
id = elemento;
}
</script></head><body></body>
</html>
http://jsfiddle.net/patkoala/WdzTx/embedded/result/
2.Pantalla llena de colores aleatorios:
Creo que no hay nada más que explicar
http://jsfiddle.net/patkoala/WdzTx/
PD:Quite el código de este en el post para evitar el máximo de caracteres.
3.Convertidor de imágenes a div's
Convierte una imágen en un monton de divs de diferentes colores que forman dicha imágen.Sólo hay que especificar la ruta de la imágen en el input text y pulsar en convertir, y en el textarea aparecerá el resultado HTML.
Cita:
<html><head><script type="text/javascript">
function sacaimagen(src){
i = 0;
var img = new Image();
img.src = src;
context = document.getElementById('canvas').getContext('2d') ;
ancho = img.width;
alto = img.height;
document.getElementById('canvas').width = ancho;
document.getElementById('canvas').height = alto;
context.drawImage(img, 0, 0);
elemento = "";
intervalo = setInterval(function (){
i++;
console.log(alto);
for(o = 1;o<ancho;o++){
data = context.getImageData(o, i, 1, 1).data;
elemento += "<div style='position:absolute;left:"+o+"px;top:"+i+"px; width:1px;height:1px;background-color:rgb("+data[0]+","+data[1]+","+data[2]+");'></div>";
if(i == alto-1){
document.getElementById('textarea').value = elemento;
clearInterval(intervalo);
}
}
},100);
}
</script></head><body><canvas id="canvas" style="visibility:hidden;"></canvas><textarea id="textarea"></textarea><input type="text" id="texto"><button onclick="sacaimagen(document.getElementById('texto ').value);">Convertir</button><body></html>
4.Laberinto
En realidad no es un laberinto, pero no sabía como llamarlo exactamente:
Cita:
<html><head><script type="text/javascript">
window.onload = function (){
lugar = new Array();
lugar[0] = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1];
lugar[1] = [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,1];
lugar[2] = [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,1];
lugar[3] = [1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1];
lugar[4] = [0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0];
lugar[5] = [0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1];
lugar[6] = [0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,1];
lugar[7] = [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,0,1];
lugar[8] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,0,1];
lugar[9] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1, 1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1];
lugar[10] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0, 0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,1];
lugar[11] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0, 0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,1];
lugar[12] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1, 0,0,1,1,1,0,0,0,0,0,0,0,0,0,1,1];
lugar[13] = [0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0];
lugar[14] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0];
lugar[15] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0];
lugar[16] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0];
lugar[17] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0];
lugar[18] = [0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0];
lugar[19] = [0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0];
lugar[20] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 1,1,1,1,1,0,1,1,1,1,1,0,0,0,0,0];
lugar[21] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,0,0,0,1,1,1,1,1,1,1,1];
lugar[22] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,1];
lugar[23] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1,1,1,1,1,1,1,1];
lugar[24] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1];
lugar[25] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1];
lugar[26] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1];
lugar[27] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,0,1,0,0,1];
lugar[28] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,1,1,1,0,1,1];
lugar[29] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,1,0];
lugar[30] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,1,0];
lugar[31] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,1,0];
lugar[32] = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,1,0];
lugar[33] = [0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1];
lugar[34] = [0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1];
lugar[35] = [0,0,0,0,0,0,0,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
lugar[36] = [0,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
lugar[37] = [0,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
lugar[38] = [0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0];
for(i in lugar){
for(o in lugar[i]){
elemento = document.createElement("div");
elemento.style.backgroundColor = (lugar[i][o] == 0) ? "white":"black";
elemento.style.position = "absolute";
elemento.style.left = o * 10;
elemento.style.top = i * 10;
elemento.style.width = 10;
elemento.style.height = 10;
elemento.id = i+","+o;
document.body.appendChild(elemento);
}
}
alto = 10;
largo = 10;
elemento = document.createElement("div");
elemento.style.position = "absolute";
elemento.style.backgroundColor = "red";
elemento.style.left = largo;
elemento.style.top = alto;
elemento.style.width = 10;
elemento.style.height = 10;
elemento.id = "person";
document.body.appendChild(elemento);
}
function actualizar(largo,alto){
document.getElementById('person').style.left = largo;
document.getElementById('person').style.top = alto;
if(largo/10 == 34 && alto/10 == 22){
var larg = largo / 10 - 1;
document.getElementById(alto/10 + "," + larg).style.backgroundColor = "black";
lugar[alto/10][larg] = 1;
alert("Has perdido :(");
}
if(largo/10 == 5 && alto/10 == 18){
var alt = alto / 10 - 1;
document.getElementById(alt + "," + largo/10).style.backgroundColor = "black";
lugar[alt][largo/10] = 1;
alert("Has perdido :(");
}
if(largo/10 == 10 && alto/10 == 34){
var larg = largo / 10 + 1;
document.getElementById(alto/10 + "," + larg).style.backgroundColor = "black";
lugar[alto/10][larg] = 1;
alert("Has perdido :(");
}
}
window.onkeydown = function (e){
abajo = 40;
arriba = 38;
derecha = 39;
izquierda = 37;
if(e.keyCode == abajo){
alto = alto + 10;
if(lugar[alto/10][largo/10] == 0){
} else {
alto = alto - 10;
}
if(largo/10 == 12 && alto/10 == 37){
alto = 160;
largo = 50;
}
}
if(e.keyCode == arriba){
alto = alto - 10;
if(lugar[alto/10][largo/10] == 0){
} else {
alto = alto + 10;
}
if(largo/10 == 5 && alto/10 == 14){
alto = 110;
largo = 280;
}
if(largo/10 == 28 && alto/10 == 10){
alert("Has ganado :)");
}
}
if(e.keyCode == derecha){
largo = largo + 10;
if(lugar[alto/10][largo/10] == 0){
} else {
largo = largo - 10;
}
}
if(e.keyCode == izquierda){
largo = largo - 10;
if(lugar[alto/10][largo/10] == 0){
} else {
largo = largo + 10;
}
}
actualizar(largo,alto);
}
</script>
</head><body></body></html>
No quedó convencido del todo, y me gustaría llevar este reto un poco más allá y compartirlo con los miembros del foro, ya que hay verdaderos genios aquí.
  #2 (permalink)  
Antiguo 29/01/2012, 21:07
Avatar de Aijoona
Colaborador
  
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 12 años, 11 meses
Puntos: 343
Respuesta: Javascript sólo "para validar formularios"
Siendo amables, hay que decir que tu amigo del instituto es bastante idiota.

JavaScript per se es un lenguaje de programación como tantos otros, no entiendo que argumento puede tener para semejante afirmación.
__________________
blog | @aijoona
Última edición por Aijoona; 30/01/2012 a las 11:20 Razón: Typo
  #3 (permalink)  
Antiguo 30/01/2012, 08:39
Avatar de patkoala  
Fecha de Ingreso: julio-2011
Mensajes: 62
Antigüedad: 12 años, 9 meses
Puntos: 19
Respuesta: Javascript sólo "para validar formularios"
Su argumento es, que ya que fue creado para eso, no es potente para hacer otras cosas.
Ya le explique mil veces, que los lenguajes de programación evolucionan, pero parece que no llega a entenderlo.
  #4 (permalink)  
Antiguo 30/01/2012, 11:47
Colaborador
  
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 15 años, 11 meses
Puntos: 528
Respuesta: Javascript sólo "para validar formularios"
patkoala, sin ser experto ni mucho menos en js, ya que apenas si voy profundizando en la creación de objetos, creo que algo que podría mostrar un poco mejor la validez de js (que no la necesita) es la de aplicaciones no tan triviales. Ya desde AJAX js tiene un uso más allá de los formularios.

Yo acabo de finalizar una aplicación en js a la cual le paso los datos de una base de datos y a partir de ellos y una descripción de estructura, con js puro creo un sistema de filtros para consultas.

Técnicamente son filtros dependientes unos de otros, pero en vez de select utiliza chebox, de tal forma que al ir seleccionando opciones en un filtro, los demás van cambiando según se relacionen entre sí.

Antes lo hacía con llamadas ajax, sin embargo como los filtrados pueden ser muy complejos (incluir muchas opciones de varios filtros) en ocasiones tardaba mucho en responder o se encolaban los cambios y no respondía bien. Ahora que es puro js, los cambios son instantáneos.

Esto es parte de un modelador de consultas, el cual por cierto, una vez que genera el reporte, permite mediante JS cambiar de lugar las columnas, lo cual virtualmente permite crear cualquier tipo consulta mientras que los datos existan.
  #5 (permalink)  
Antiguo 30/01/2012, 12:20
Avatar de patkoala  
Fecha de Ingreso: julio-2011
Mensajes: 62
Antigüedad: 12 años, 9 meses
Puntos: 19
Respuesta: Javascript sólo "para validar formularios"
Y además Javascript no sólo sirve para crear "utilidades", también existen muchos juegos y efectos que demuestran su potencial

Etiquetas: formulario, html, input, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:05.