Ejercicios resueltos

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado.)

Desarrollaremos una aplicación que muestre un tablero con letras que se puedan mover con el mouse. Lo interesante será que cada un cierto tiempo nos comunicaremos con el servidor e informaremos las letras que se han desplazado dentro de la ventana, esto permitirá que cualquier otro usuario que esté ejecutando en ese momento la misma página verá el desplazamiento que efectuó otra persona.

Para probar si realmente funciona esta característica ejecutarlo con el FireFox y el Internet Explorer en forma simultánea. Podremos observar como se sincronizan las posiciones de las letras dentro de la ventana (si un usuario mueve una letra hacia la derecha, luego de algunos segundos todos los otros usuarios verán reflejado el cambio en sus navegadores)

Si lo ejecuta en dos instancias de navegadores debe quedar en claro que cada uno se comunica con el servidor en forma independiente para enviar y recuperar los cambios de posición.

pagina1.html

funciones.js

addEvent(window,'load',inicializarEventos,false);

function desactivarSeleccion(e)
{
 return false
}

var conexion1;
function inicializarEventos()
{
  document.onmousedown=desactivarSeleccion;
  document.onmousemove=desactivarSeleccion;

conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php', true);
  conexion1.send(null);
}

var datos;
var datosNuevos;
var datosMovil;
var vectorLetras=new Array();
var reloj=null;
var relojGeneral=null;
var pasos=0;
function procesarEventos()
{
  if(conexion1.readyState == 4)
  {
    datos=conexion1.responseText.parseJSON();
    crearLetras();
    relojGeneral=window.setInterval(actualizarCoordenadas, 5000);
  } 
}

function crearLetras()
{

for(f=0;f<datos.length;f++)
  {
    var ob=document.createElement('div');
    ob.style.left=datos[f].x+'px';
    ob.style.top=datos[f].y+'px';
    ob.style.width='17px';
    ob.style.height='17px';
    ob.style.background='#eee';
    ob.style.position='absolute';
    ob.style.fontSize='18px';
    ob.style.padding='3px';
    ob.style.cursor='pointer';
    ob.id='div'+f;
    ob.style.textAlign='center';
    var x=document.getElementById('letras');
    x.appendChild(ob);
    var ref=document.getElementById('div'+f);
    ref.innerHTML=datos[f].letra;
    vectorLetras[f]=new Recuadro(ob,datos[f].letra,f+1,datos[f].x,datos[f].y);
  }
}

function letrasMovidas(cod,x,y) {
  this.codigo=cod;
  this.x=x;
  this.y=y;
}

function actualizarCoordenadas()
{
  var let=new Array();
  var con=0;
  for(f=0;f<vectorLetras.length;f++)
  {
    if (datos[f].x!=vectorLetras[f].retornarX() ||
        datos[f].y!=vectorLetras[f].retornarY())
    {
      datos[f].x=vectorLetras[f].retornarX();
      datos[f].y=vectorLetras[f].retornarY();
      let[con]=new

letrasMovidas(datos[f].codigo,vectorLetras[f].retornarX(),vectorLetras[f].retornarY());
      con++;
    } 
 }
  var aleatorio=Math.random();
  var cadena=let.toJSONString();
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventosContinuos;
  conexion1.open('GET','pagina2.php?letras='+cadena+"&aleatorio="+aleatorio, true);
  conexion1.send(null);

}

function procesarEventosContinuos()
{
  if(conexion1.readyState == 4)
  {
    datosNuevos=conexion1.responseText.parseJSON();
    datosMovil=conexion1.responseText.parseJSON();

function moverLetras()
{
    var cambios=false;
    pasos--;
    for(f=0;f<datosNuevos.length;f++)
    {
       if (datosNuevos[f].x!=datos[f].x ||
           datosNuevos[f].y!=datos[f].y)
       {
           cambios=true;
           var dx=Math.abs(datosNuevos[f].x-datos[f].x);
           var avancex;
           if ((datosNuevos[f].x-datos[f].x)>0)
             avancex=Math.round(dx/20);
           else
             avancex=Math.round(-dx/20);
           datosMovil[f].x=parseInt(datosMovil[f].x)+avancex;
          
           var dy=Math.abs(datosNuevos[f].y-datos[f].y);
           var avancey;
           if ((datosNuevos[f].y-datos[f].y)>0)
             avancey=Math.round(dy/20);
           else
             avancey=Math.round(-dy/20);
           datosMovil[f].y=parseInt(datosMovil[f].y)+avancey;

cambios=true;
           if (pasos==0)
           {
             vectorLetras[f].fijarX(datosNuevos[f].x);
             vectorLetras[f].fijarY(datosNuevos[f].y);
           }
           else
           {
             vectorLetras[f].fijarX(datosMovil[f].x);
             vectorLetras[f].fijarY(datosMovil[f].y);
           }
       }
    } 
    if (pasos==0)
    {
      clearInterval(reloj);
      reloj=null;
      relojGeneral=window.setInterval(actualizarCoordenadas, 5000);
    }
}

//Drag and Drop

Recuadro=function(div)
{
    tX=0;
    tY=0;
    difX=0;
    difY=0;
    addEvent(div,'mousedown',inicioDrag,false);

function coordenadaX(e)
    {
      if (window.event)
        return event.clientX+document.body.scrollTop;
      else
        return e.pageX;
    }

function coordenadaY(e)
    {
      if (window.event)
        return event.clientY+document.body.scrollTop;
      else
        return e.pageY;
    }

function inicioDrag(e) 
    {

if (window.event)
        e=window.event;
      var eX=coordenadaX(e);
      var eY=coordenadaY(e);
      var oX=parseInt(div.style.left);
      var oY=parseInt(div.style.top);
      difX=oX-eX;
      difY=oY-eY;
      addEvent(document,'mousemove',drag,false);
      addEvent(document,'mouseup',soltar,false);

}

function drag(e) 
    { 
      if (window.event)
        e=window.event;
      tX=coordenadaY(e)+difY+'px';
      tY=coordenadaX(e)+difX+'px'
      div.style.top=tX; 
      div.style.left=tY; 
    }

this.retornarX=function()
    {
      return parseInt(div.style.left);
    }
    
    this.retornarY=function()
    {
      return parseInt(div.style.top);
    }

this.fijarX=function(xx)
    {
      div.style.left=xx+'px'; 
    }
    
    this.fijarY=function(yy)
    {
      div.style.top=yy+'px'; 
    }

}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

pagina1.php

pagina2.php

25 - Pizarra interactiva multiusuario