lunes, 31 de octubre de 2011

MÉTODO Ceil

El método Ceil() de Prototype devuelve el menor entero mayor o igual al número dado. El número dado puede ser positivo o negativo y puede contener decimales.

-123.ceil(); --> -123
123.ceil(); -- 123
-123.56.ceil(); --> -123
123.56.ceil(); --> 124

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = -123.8;
 var numero_ceil = numero.ceil();
 alert(numero_ceil);
--> -123
</script>


También podríamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -123.8;
 var numero_ceil = numero.abs().ceil();
 alert(numero_ceil);
-->124</script>

sábado, 29 de octubre de 2011

MÉTODO Abs

El método Abs() de Prototype devuelve el valor absoluto de un número dado.

123.abs() --> 123

-123.abs() --> 123

Veamos un ejemplo de como utilizar este método:

<script>
 var numero = -123;
 var valor_absoluto_numero = numero.abs();
 alert(valor_absoluto_numero);
--> 123
</script>

También podríamos utilizarla de la siguiente manera:

<script>
 var numero1 = -123;
 var numero2 = 123;
 var suma = numero1.abs() + numero2.abs();
 alert(suma);
--> 246
</script>

jueves, 27 de octubre de 2011

MÉTODO Empty

El método Empty() de Prototype comprueba si una cadena está vacía. Entendiendo que una cadena es vacía cuando no contine ningún caracter. El resultado de empty es booleano. True si la cadena es vacía o False si no lo es.

''.empty(); --> true

'  '.empty(); --> false
 'a'.empty(); --> false

' 12 '.empty(); --> false

Veamos un ejemplo de como utilizar este método

<script>
 function comprobar(){
  if ($('textbox').value.empty())
   alert ('caja vacía');
  else
   alert ('caja con texto');
 }
</script>

<body>
 <input type="text" id="textbox">
 <input type="button" value="Comprobar" onclick="comprobar()">
</body>

martes, 25 de octubre de 2011

MÉTODO Dasherize

El método Dasherize() de Prototype reemplaza cualquier caracter "_" (guión bajo) existente en una cadena por "-" (dash o guión medio).

'border_bottom_width'.dasherize(); --> 'border-bottom-width'

Veamos un ejemplo de como utilizar este método:

<script>
var texto = "frase_separada_por_guiones";
var texto_dashes = texto.dasherize();
alert(texto_dashes);
-->frase-separa-por-guiones
</script>

El método reemplaza cualquier guión bajo que encuentre en la cadena, sin importar el lugar o la cantidad por un guión medio.

"_casa   _nueva".dasherize(); --> "-casa  -nueva"

"_casa   ____nueva".dasherize(); --> "-casa  -----nueva"

"_______________".dasherize(); --> "------------------"

"casa nueva ___".dasherize(); --> "casa nueva ---"

domingo, 23 de octubre de 2011

MÉTODO Blank

El método Blank() de Prototype se utiliza para comprobar si una cadena de texto  esta " en blanco"  es decir que está vacía (longitud de 0) o que sólo contiene espacios en blanco. Blank devuelve true en caso de hallar vacía la cadena y false en caso contrario.

"".blank(); --> true
"     ".blank(); --> true
" a " .blank() --> false

Veamos como utilizar este método: por ejemplo verifiquemos si una caja de texto (textbox) tiene o no contenido:

<script>
function comprobar(){
if ($('textbox').value.blank())
    alert ('caja vacía');
else
    alert ('caja con texto');   
}
</script>


<body>
            <input type="text" id="textbox">
            <input type="button" value="Comprobar" onclick="comprobar()">
</body>

Pudes ver más detalles de este método en este link

viernes, 21 de octubre de 2011

MÉTODO Camelize

El método Camelize() de Prototype recibe una cadena de texto separada por guines (cadena-de-texto) y la convierte en un equivalente del tipo camelCase (cadenaDeTexto).

'background-color'.camelize();  -> 'backgroundColor'

'-moz-binding'.camelize();  -> 'MozBinding'

Veamos un ejemplo de como utilizar este método:

<script>
     var texto =  "la-casa-del-lago";
     var texto_camelizado = texto.camelize();
         alert (texto_camelizado); -->laCasaDelLago
      });
</script>

Otra manera en que podríamos utilizarlo sería:

<script>
     var texto = $w('casa-pequeña auto-grande avión-alto barco-largo').each(function(transporte){
         alert (transporte.camelize());
-->casaPequeña autoGrande aviónAlto barcoLargo
      });
</script>

Para ver más detalles acerca de este método haz clic aquí

miércoles, 19 de octubre de 2011

MÉTODO Capitalize

El método Capitalize() de Prototype actúa sobre una cadena de texto transformando en mayúscula la primer letra de la cadena y en minúsculas todas las demás.

"hola".capitalize(); --> Hola
"HOLA MUNDO".capitalize() --> Hola mundo

Veamos un ejemplo de como usar este método:

<script>
     var texto = "CAPITALIZAR ESTA CADENA";
     var texto_capitalizado = texto.capitalize();
     alert(texto_capitalizado);
--> Capitalizar esta cadena</script>

Otra forma podría se esta:

 
<script>
     var texto = $w('casa auto avión barco').each(function(transporte){
          alert (transporte.capitalize());
--> Casa Auto Avión Barco      });
</script>



En este link hallarás más información acerca de este método

lunes, 17 de octubre de 2011

FUNCIÓN $W

La función $W de Prototype convierte una cadena de texto en una matriz o array, tratando a todos los espacios en blanco como delimitadores y reemplazandolos por comas. No importa la cantidad de espacios en blanco que haya entre las palabras, se cuentan como uno y se reemplazan por una coma.

$w('fruitillas manzanas  peras       bananas') --> ['fruitillas','manzanas','peras','bananas']

Conociendo la sintáxis de $W, veamos algunos ejemplos:

<script>
var frutas = $w('fruitillas manzanas peras bananas');
alert (frutas[1]) --> manzanas
</script>

Puedo aplicar el método each a $W de la siguiente manera:

<script>
$w('fruitillas manzanas peras bananas').each(function(frutas){
alert (frutas) ;
});
</script>

También podría utilizarla de esta manera:
$w('fruitillas manzanas peras bananas').each(Element.hide);

En definitiva $W nos permite crear un array sin preocuparnos por las comillas y las comas que deberíamos escribir en la construcción tradicional de un arreglo. Con $W es suficiente escribir los valores separados por un espacios y listo.

Si quieres conocer más detalles acerca de $w visita este link 

sábado, 15 de octubre de 2011

MÉTODO Insert

El método Insert de Prototype permite insertar contenido a un elemento dado (por ejemplo un DIV). Si el elemento no contiene contenido insert actualizará el elemento. Si el elemento ya tiene contenido insert le agregará el contenido pudiendo indicarle si debe hacerlo por encima o por debajo del contenido existente. Insert permite la inserción de cadenas de texto,  cadenas HTML o cualquier elemento del DOM.

Opciones de Insert:
Top: Inserta el contenido indicado dentro del elemento por encima del contenido existente.
Bottom: Inserta el contenido indicado dentro del elemento por debajo del contenido existente.
After: Inserta el contenido debajo del elemento
Before: Inserta el contenido por encima del elemento

Veamos algunos ejemplos para comprender mejor este método. Supongamos este contenido en nuestra página web, un div con id=caja con los estilos convenientes.

<body>
     <div id="caja"></div>
</body>

Usando el método insert puedo puedo agregarle contenido HTML de la siguiente manera:

<script>
      $('caja').insert("<p>Nuevo contenido para caja</p>");
</script>

Es posible insertar un elemento del DOM nuevo: en este caso insertamos la etiqueta img y le asignamos la imagen logo.png con un ancho de 100. Top le indica a insert que si existe contenido en 'caja' la imagen la coloque encima de éste.

<script>
      $('caja').insert({ top: new Element('img', {src: 'logo.png', width: '100'})});
</script>

 Si querés conocer más detalles acerca de este método pulsá aquí

jueves, 13 de octubre de 2011

Tabla con CSS

La idea de este ejercicio fue generar una tabla sin utilizar la etiqueta <table> de HTML. Dado la complejidad que representa el uso de esta etiqueta a la hora de dar formato.

En este caso utilizamos etiquetas DIV y puro CSS para construir una tabla, lo que la hace totalmente configurable en tamaño, color, fuentes, overflow, etc. Además la tabla esta contenida por un DIV lo que la hace fácil de incorporar. Ideal para generar contenido server-side.

Incorporamos un poco de Prototype para generar un cambio de color en la fila al momento de pasar el mouse por encima de ella.

martes, 11 de octubre de 2011

Panel contraible

Nos propucimos hacer un panel que se oculte a pedido del usuario. Utilizando Prototype y Scriptaculous logramos el efecto.

La idea se trata de dos paneles (izquierdo y derecho), a través de un link el usuario puede ocultar el panel izquierdo para ver mejor el contenido del panel derecho. Del mismo modo puede pedir la apertura del panel oculto.

Es simple de implementar y de estilizar. Como siempre lo hemos contruido dentro de un DIV de modo que resulte fácil de incorporar en cualquier sitio.


domingo, 9 de octubre de 2011

Sistema de Noticias con Prototype y Scriptaculous

En este ejercicio implementamos un sistema de novedades utilizando Scriptaculous y Prototype. Inicilamente se muestra un resumen de las noticias publicadas y a pedido del usuario se expande la noticia completa.

Es una función muy simple y fácil de implementar dado que se encuentra embebida en un DIV, por lo que puedes ubicarla donde más te guste. Además desde CSS puedes modificar todos los aspectos, tamaño, fuentes y colores.

viernes, 7 de octubre de 2011

Scriptaculous - Efecto SlideUp

El efecto SlideUP de Scriptaculous es el opuesto a SlideDown. Es un efecto de cierre que nos permite ocultar elementos de nuestro DOM como si fuese una persiana que se levanta.

Para invocar el efecto desde Javascript utilizamos la siguiente sintáxis:

Effect.BlindUp('id_del_elemento');

Esta es la forma predeterminada de utilizarlo, así utilizamos las opciones por defecto. A continuación la lista de opciones configurables de SlideUp:

scaleX                       boolean, defaults to false
scaleY                       boolean, defaults to true
scaleContent            boolean, defaults to true
scaleFromCenter     boolean, defaults to false
scaleMode               string, defaults to ‘box', can also be ‘contents‘
scaleFrom                integer value, percentage (0%–100%), defaults to 100
scaleTo                    integer value, percentage (0%–100%), defaults to 0
duration                   float value, in seconds, defaults to 1.0

Se podría invocar el efecto para que cultar el elemento más despacio de la siguiente manera:

Effect.BlindUp('id_del_elemento' , {duration:3.0});

Puedes ver más detalles de este efecto aquí

Ver ejemplo

miércoles, 5 de octubre de 2011

Scriptaculous - Efecto SlideDown

SlideDown es un efecto de scriptaculous que permite mostrar un elemento del DOM que se encuentra oculto. Esta es la sintáxis para invocar esta función desde javascript:

Effect.SlideDown('id_del_elemento');

De esta forma utilizamos el efecto con sus valores por defecto, a continuacuón la lista  opciones de SlideDown:

scaleX boolean, defaults to false
scaleY boolean, defaults to true
scaleContent boolean, defaults to true
scaleFromCenter boolean, defaults to false
scaleMode string, defaults to ‘box', can also be ‘contents‘
scaleFrom integer value, percentage (0%–100%), defaults to 100
scaleTo integer value, percentage (0%–100%), defaults to 0
duration float value, in seconds, defaults to 1.0

Podriamos invocar el efecto de modo que dure más tiempo

Effect.SlideDown('id_del_elemento' , {duration:2.0});

Puedes ver más detalles acerca de este efecto aquí

Ver ejemplo

lunes, 3 de octubre de 2011

FUNCIÓN $A

La función $A de Prototype genera una array a partir de una colección de valores. Veamos algunos ejemplos para comprender mejor su funcionamiento.

En este ejemplo convertimos en un array a la secuencia de valores generada por la función $R

<script>
     var valores = $R(  'a' , 'e' );
     var array_de_valores = $A(valores);
     alert (array_de_valores [3]); --> d
</script>

El código anterior también podríamos escribirlo de la siguiente manera:

<script>
     var valor = $A($R(  'a' , 'e' ));
     alert (valor[2]);
--> c
</script>

Veamos ahora como $A nos permite crear un arreglo a partir de una colección de elementos del DOM

<script>
    var valores = $A(document.getElementsByTagName('input'));
    var mostrar = valores[2].value;
    alert (mostrar); --> texto3
</script>

<body>
   <input type="text" value="texto1">
   <input type="text" value="texto2">
   <input type="text" value="texto3">
   <input type="text" value="texto4">
</body>

También podríamos acceder a los elemntos del DOM a través de su id o clase

<script>
    var valores = $A($$('.caja'));
    var mostrar = valores[3].value;
    alert (mostrar); --> texto4
</script>

<body>
   <input type="text" value="texto1" class="caja">
   <input type="text" value="texto2" class="caja">
   <input type="text" value="texto3" class="caja">
   <input type="text" value="texto4" class="caja">
</body>

Una vez construido el array con $A, podemos acceder a cada elemento y aplicarle las distintas funciones de Prototype, por ejemplo, siguiendo el ejemplo anterior, podríamos cambiar el value de unos de los input y luego mostrar el nuevo valor:

<script>
    var valores = $A($$('.caja'));
    valores[3].value = "nuevo valor";
    var mostrar = valores[3].value;
--> nuevo valor
</script>

sábado, 1 de octubre de 2011

FUNCIÓN $R

La función $R de Prototype se utiliza para generar una secuencia de valores consecutivos, ya sean numéricos, textuales o de otro tipo que semánticamente sean compatibles con rangos de valores. Para ilustrar un poco el funcionamiento y salvando la distancia $R es más o menos como la función "Rellenar serie de Excel".

La sintáxis básica es muy simple: $R(start, end) donde start y end serán los valores donde debe comenzar y terminar la serie de valores respectivamente, por ejemplo:

$R( 0 , 5 ) --> 012345
$R( 'a' , 'e' ) --> abcde
$R( '1a' , '1e' ) --> 1a1b1c1d1e
$R( 'a1' , 'a5' ) --> a1a2a3a4a5

Con $R podemos utilizar el método join, con éste incorporamos el separador deseado a la lista de valores generada, (join contempla los espacios en blanco al momento de definir el separador) por ejemplo:

$R( 0 , 5 ).join(',') --> 0,1,2,3,4,5
$R( 'a' , 'e' ).join(' ;... ') --> a ;... b ;... c ;... d ;... e
$R( '1a' , '1e' ).join(' / ') --> 1a / 1b / 1c / 1d / 1e
$R( 'a1' , 'a5' ).join(' separador ') --> a1 separador a2 separador a3 separador a4 separador a5

$R tiene un tercer parámetro en su sintáxis con el cual podemos indicar si el valor definido como final se incluye o no en la secuencia. Es un valor booleano: false --> incluye y true --> excluye. Por defecto es false.

$R( 0 , 5 ).join(',') --> 0,1,2,3,4,5
$R( 0 , 5 , false).join(',') --> 0,1,2,3,4,5
$R( 0 , 5, true ).join(',') --> 0,1,2,3,4

Podemos consultar a $R si dentro de la secuencia que generó existe un determinado valor, para ello utilizamos el método include. Este método devuelve true si encuentra el valor dentro de la secuencia y false si no lo encuentra:

$R( 0 , 5 ).include(5) --> true
$R( 0 , 5 , true ).include(5) --> false
$R( 0 , 5 ).include(15) --> false

Podemos utilizar el método each para recorrer los valores de la secuencia generada por $R

$R( 0, 5, true ).each(function(valor){
      alert (valor);
});