InfoTic: abril 2017

martes, 11 de abril de 2017

Javascript Parte XXXVI

El objeto screen colabora directamente con el objeto window:

El objeto screen ofrece información acerca del monitor donde se está ejecutando el navegador.
La propiedades principales del objeto screen son:

availHeight : El alto de la pantalla en pixeles disponible para el navegador.
availWidth : El ancho de la pantalla en pixeles disponible para el navegador.
colorDepth : Representa el número de bits usados para representar los colores.
height : El alto de la pantalla en pixeles.
width : El ancho de la pantalla en pixeles.

El siguiente programa muestra el valor almacenado en las cinco propiedades que tiene el objeto screen:

<html>
<head>
<title>Problema</title>
</head>
<body>

<script type="text/javascript">
  document.write('Valores de las propiedades del objeto screen:<br>');
  document.write('availHeight :' + screen.availHeight + '<br>');
  document.write('availWidth :' + screen.availWidth + '<br>');
  document.write('height :' + screen.height + '<br>');
  document.write('width :' + screen.width + '<br>');
  document.write('colorDepth :' + screen.colorDepth);
</script>

</body>
</html>

No olvidar que el objeto screen es una propiedad del objeto window, por lo que haber dispuesto la sintaxis: window.screen.width etc. es la forma más completa, pero más tediosa de escribir (recordar que el objeto window es el principal y lo podemos obviar cuando accedemos a sus propiedades o métodos)

Javascript Parte XXXV

El objeto history colabora directamente con el objeto window:

El objeto history almacena todas las páginas que visitamos. Luego, con una serie de funciones, podemos extraer de la memoria de la computadora las páginas ya visitadas, sin tener que pedirlas nuevamente al servidor.
Cuenta con las siguientes funciones:

  window.history.back();    //Retrocede a la página anterior
  window.history.forward(); //Avanza a la página siguiente almacenada en la 
                              cache de la máquina.
  window.history.go();  //Avanza o retrocede en la lista de páginas visitadas.

Llamar a la función back, tiene el mismo comportamiento que presionar el botón "Atrás" del navegador.
El siguiente ejemplo nos permite cargar una segunda página y luego retroceder a la primera página sin tener que solicitarla nuevamente al servidor:

<html>
<head>
<title>Problema</title>

<script type="text/javascript">
  function avanzar()
  {
    window.history.go(1);
  }
  </script>

</head>
<body>
<a href="pagina2.html">Ir a la página 2</a>
<br>
<br>
<a href="javascript:avanzar()">Extraer del cache la segunda página</a>
</body>
</html>

En esta primera página, la primera vez, debemos cargar la segunda página seleccionando el hipervínculo pagina2.
La segunda página:

<html>
<head>
<title>Problema</title>

<script type="text/javascript">
  function retornar()
  {
    window.history.go(-1);
  }
</script>

</head>
<body>
<a href="javascript:retornar()">Retornar</a>
</body>
</html>

En la segunda página, mediante el método go y pasándole un valor negativo, retrocedemos a la primera página sin tener la necesidad de recargarla.
Podemos mejorar el ejemplo accediendo al atributo length (almacena la cantidad de páginas de la lista) del objeto history:

  if (window.history.length>0)
  {
    window.history.go(1);
  }
  else
  {
    alert('no hay otra página en la cache hacia adelante');
  }

Javascript Parte XXXIV

El objeto location colabora directamente con el objeto window:

Cuando le asignamos una nueva dirección a la propiedad location del objeto window, el navegador redirecciona a dicha página.
Implementaremos un pequeño ejemplo para ver la utilidad de esta propiedad: Supongamos que tenemos un hipervínculo que al ser presionado entre al periódico La Nación, pero primero muestre una ventana de confirmación, si queremos ingresar al periódico. En caso que el visitante presione el botón afirmativo, redireccionamos al sitio de La Nación, en caso contrario mostramos un mensaje:

<html>
<head>
</head>
<body>

<script type="text/javascript">
  function verificarEntrada()
  {
    if (window.confirm('Desea salir del sitio e ingresar al periódico La Nación?'))
    {
      window.location='http://www.lanacion.com.ar';
    }
    else
    {
      window.alert('No hay problema');
    }
  }
</script>

<a href="javascript:verificarEntrada()">Ingresar a La Nación</a>
</body>
</html>

Lo primero que tenemos que indicar es que para llamar a una función de javascript desde un hipervínculo debemos anteceder la palabra javascript seguida de dos puntos y por último, el nombre de la función:

<a href="javascript:verificarEntrada()">Ingresar a La Nación</a>

La función verificarEntrada() muestra la ventana con los botones confirmar y cancelar (recordar que el método confirm del objeto window hace esto en forma automática).
Si se presiona el botón confirmar, la función confirm retorna true y por lo tanto se ejecuta el verdadero del if:

    if (window.confirm('Desea salir del sitio e ingresar al periódico La Nación?'))
    {
      window.location='http://www.lanacion.com.ar';
    }
    else
    {
      window.alert('No hay problema');
    }

Javascript Parte XXXIII

Al objeto window lo hemos estado usando constantemente. Representa la ventana del navegador.
window es un objeto global y tiene los siguienes métodos:

alert: Muestra un diálogo de alerta con un mensaje 
       (a esta responsabilidad la hemos utilizado desde los primeros temas)
prompt: Muestra un diálogo para la entrada de un valor de tipo string 
       (utilizado desde el primer momento)
confirm: Muestra un diálogo de confirmación con los botones Confirmar y Cancelar.
open y close: abre o cierra una ventana del navegador. 
       Podemos especificar el tamaño de la ventana, su contenido, etc.
       [Variable=][window.]open(URL, nombre, propiedades) 
       Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella 
       desde la ventana donde la creamos, deberemos asignarle una variable, 
       sino simplemente invocamos el método: el navegador automáticamente sabrá 
       que pertenece al objeto window. 
       El parámetro URL es una cadena que contendrá la dirección de la ventana 
       que estamos abriendo: si está en blanco, la ventana se abrirá con una página
       en blanco. 
       Las propiedades son una lista, separada por comas, de algunos de los 
       siguientes elementos:
? toolbar[=yes|no] 
? location[=yes|no] 
? directories[=yes|no] 
? status[=yes|no] 
? menubar[=yes|no] 
? scrollbars[=yes|no] 
? resizable[=yes|no] 
? width=pixels 
? height=pixels

Es bueno hacer notar que a todas estas funciones las podemos llamar anteponiéndole el nombre del objeto window, seguida del método o en forma resumida indicando solamente el nombre del método (como lo hemos estado haciendo), esto es posible ya que el objeto window es el objeto de máximo nivel.

Ej:
valor=window.prompt("Ingrese valor","");
o 
valor=prompt("Ingrese valor","");

Para reducir la cantidad de caracteres que se tipean normalmente encontraremos los programas tipeados de la segunda forma.

El siguiente programa muestra varios de los métodos disponibles del objeto window:

<html>
<head></head>
<body>

<script type="text/javascript">

  function abrir()
  {
    var ventana=open();
    ventana.document.write("Estoy escribiendo en la nueva ventana<br>");
    ventana.document.write("Segunda linea");
  }

  function abrirParametros()
  {
    var ventana=open('','','status=yes,width=400,height=250,menubar=yes');
    ventana.document.write("Esto es lo primero que aparece<br>");
  }
 
  function mostrarAlerta()
  {
    alert("Esta ventana de alerta ya la utilizamos en otros problemas.");
  }

  function confirmar()
  {
    var respuesta=confirm("Presione alguno de los dos botones");
    if (respuesta==true)
      alert("presionó aceptar");
    else
      alert("presionó cancelar");  
  }

  function cargarCadena()
  {
    var cad=prompt("cargue una cadena:","");
    alert("Usted ingreso "+cad);
  }
</script>

Este programa permite analizar la llamada a distintas responsabilidades del objeto window.<br>
<form>
  <br>
  <input type="button" value="open()" onClick="abrir()">
  <br>
  <input type="button" value="open con parámetros" onClick="abrirParametros()" >
  <br>
  <input type="button" value="alert" onClick="mostrarAlerta()">
  <br>
  <input type="button" value="confirm" onClick="confirmar()">
  <br>
  <input type="button" value="prompt" onClick="cargarCadena()">
</form>
</body>
</html>

Javascript Parte XXXII

El evento onLoad se ejecuta cuando cargamos una página en el navegador. Uno de los usos más frecuentes es para fijar el foco en algún control de un formulario, para que el operador no tenga que activar con el mouse dicho control.
Este evento está asociado a la marca body.
La página completa es:

<html>
<head></head>
<body onLoad="activarPrimerControl()">

<script type="text/javascript">
  function activarPrimerControl()
  {
    document.getElementById('nombre').focus();
  }
</script>

<form>
  Ingrese su nombre:
  <input type="text" id="nombre"><br>
  Ingrese su edad:
  <input type="text" id="edad"><br>
  <input type="button" value="Confirmar">
</form>
</body>
</html>

En la marca body inicializamos el evento onLoad con la llamada a la función activarPrimerControl:

<body onLoad="activarPrimerControl()">

La función da el foco al control text donde se cargará el nombre:

  function activarPrimerControl()
  {
    document.getElementById('nombre').focus();
  }