LuAuF » Javascript http://luauf.com Tue, 11 May 2010 01:27:59 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Hojas de referencia de PHP, MySQL, Javascript y CSS http://luauf.com/2008/06/09/hojas-de-referencia-de-php-mysql-javascript-y-css/ http://luauf.com/2008/06/09/hojas-de-referencia-de-php-mysql-javascript-y-css/#comments Tue, 10 Jun 2008 02:48:30 +0000 Luciano http://luauf.com/?p=396 Las hojas de referencia ILoveJackDaniels ya son conocidas por la web, pero no está de más recordar algunas:

  • PHP: funciones, variables superglobales, formato de fechas, expresiones regulares y apertura de archivos.
  • MySQL: funciones de MySQL, tipos de datos, funciones en PHP y consultas de ejemplo.
  • Javascript: funciones y métodos, XMLHttpRequest, Javascript en HTML, expresiones regulares y manejadores de eventos.
  • CSS: lista de propiedades, selectores, pseudo-selectores, unidades y propiedades.

A continuación, y para su descarga, las hojas de referencia en PNG y PDF:

Vía: ILoveJackDaniels

]]> http://luauf.com/2008/06/09/hojas-de-referencia-de-php-mysql-javascript-y-css/feed/ 1 Escribe menos y haz más con jQuery http://luauf.com/2008/06/02/escribe-menos-y-haz-mas-con-jquery/ http://luauf.com/2008/06/02/escribe-menos-y-haz-mas-con-jquery/#comments Mon, 02 Jun 2008 23:51:24 +0000 Luciano http://luauf.com/?p=360 Tal como se indica en su sitio oficial, jQuery es una librería JavaScript rápida y concisa que simplifica las tediosas tareas de recorrer documentos HTML (DOM), manejar eventos, ejecutar animaciones y agregar interacciones con Ajax.

Para utilizar jQuery, solo hay que descargar la librería (un mísero .js de no más de 60Kb en su versión descomprimida) y enlazarlo a nuestras páginas web (<script type="text/javascript" src="jquery.js"></script>)

Una de las principales ventajas, además de ahorrarnos la escritura de bastante código, es que permite manipular la página apenas se ha contruido el árbol DOM de la misma, mientras que la función de JavaScript espera a que se carguen todos los elementos de la página (incluyendo todas las imágenes). En definitiva, las aplicaciones con jQuery pueden responder mucho más rápido que las aplicaciones JavaScript tradicionales.

Basta de palabras y veamos algunos ejemplos para empezar a conocer jQuery:

  • Creo un archivo html (index.html), donde le enlazo:
    • La librería jQuery (jquery.js)
    • Mi script con los ejemplos (test.js)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test jQuery
        </title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <p> Ejemplo evento toggle (Activar/Desactivar):
            <input id="textActivar" type="button" value="Activar">
        </p>
        <p> Ejemplo evento change (Text sincronizados):
            <input id="text1" type="input">
            <input id="text2" type="input">
        </p>
        <p> Efectos visuales:
            <input id="efectoHide" type="button" value="Hide">
            <input id="efectoShow" type="button" value="Show">
            <input id="efectoToggle" type="button" value="Toggle">
            <input id="efectoShowSlow" type="button" value="Show slow">
            <input id="efectoSlide" type="button" value="Slide Toggle">
            <input id="efectoFadeOut" type="button" value="Fade out">
            <div id="efecto">
                <p> Efecto visual </p>
            </div>
        </p>
    </body>
    <script type="text/javascript" src="test.js"></script>
</html>

  • Creo el archivo test.js con el código para varios ejemplos del mismo html:

/* Equivale a window.onload = function() { ... } */
$(document).ready( function() {
        alert("Benvindo!!!");
        $("div#efecto").css( { color: "red", background: "blue"} );
    }
);

/**
 * jQuery añade el evento toggle().
 * A este método se le pasan dos funciones, cuya ejecución se alterna, la primera vez
 * que se haga clic sobre el elemento (y todas las veces impares), se ejecuta la primera función
 * y la segunda vez (y todas las veces pares) se ejecuta la segunda función:
 */
$("input#textActivar").toggle( function() {
        //alert("Me acabas de activar");
        $(this).val("Desactivar");
    } , function() {
        //alert("Me acabas de desactivar");
        $(this).val("Activar");
    }
);

/**
 * Mantengo las cajas de texto sincronizadas. El valor de una caja de texto
 * siempre es igual al de la otra.
 *
 */
$("input#text1").keyup( function() {
        $("input#text2").val( $(this).val() );
    }
);

$("input#text2").keyup( function() {
        $("input#text1").val( $(this).val() );
    }
);

/**
 * Ejecuto algunos los efectos visuales, con los métodos:
 *
 * .hide();        // Ocultar un elemento
 * .show();        // Mostrar un elemento
 * .toggle();      // Si estaba oculto, mostrarlo; si era visible, ocultarlo
 * .show("slow");  // Mostrar el elemento con una animación muy suave
 * .slideToggle("fast"); // Desplegar/ocultar el elemento con una animación muy rápida
 * .fadeOut();     // El elemento desaparece con un fundido muy suave
 *
 */
$("input#efectoHide").click( function() {
        $("div#efecto").hide();
    }
);

$("input#efectoShow").click( function() {
        $("div#efecto").show();
    }
);

$("input#efectoToggle").click( function() {
        $("div#efecto").toggle();
    }
);

$("input#efectoShowSlow").click( function() {
        $("div#efecto").show("slow");
    }
);

$("input#efectoSlide").click( function() {
        $("div#efecto").slideToggle("fast");
    }
);

$("input#efectoFadeOut").click( function() {
        $("div#efecto").fadeOut();
    }
);

Estos ejemplos no representan ni una pequeña parte de las bondades de jQuery, pero por más simple que sean, por algo hay que empezar.

Para finalizar, recomiendo esta excelente guía visual.

Vía: MaestrosdelWeb

]]> http://luauf.com/2008/06/02/escribe-menos-y-haz-mas-con-jquery/feed/ 5 Cambiar la clase de un tag HTML mediante Javascript http://luauf.com/2008/05/26/cambiar-la-clase-de-un-tag-html-mediante-javascript/ http://luauf.com/2008/05/26/cambiar-la-clase-de-un-tag-html-mediante-javascript/#comments Tue, 27 May 2008 02:55:09 +0000 Luciano http://luauf.com/?p=329 Utilizando las bondades de DOM, Javascript y CSS, podemos lograr combinaciones muy interesantes.

Un ejemplo de ello, es cambiar el estilo de parte de un documento HTML en tiempo de ejecución; simplemente modificando la clase una etiqueta HTML con el atributo className.

Para explicarlo mejor, veamos el ejemplo en concreto para explicar:

  • Definimos dos estilos:

.Clase1 {text-align:left;}
.Clase2 {text-align:right;}

  • Creamos un DIV, con uno de los estilos declarados, que contenga un INPUT:

<div class='clase1' id='div1'>
    <input type='button' onclick='cambiarClase();'>
</div>

  • Escribimos la función Javascript que ante el clic sobre el botón, actualice el className (y por lo tanto el estilo) del DIV que lo contiene:

function cambiarClase() {
    document.getElementById('div1').className = (document.getElementById('div1').className == 'clase2') ? 'clase1' : 'clase2';
}

El ejemplo completo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
  <title>Cambio de Clase en Tiempo de Ejecuci&oacute;n</title>
  <STYLE TYPE="text/css">
  <!--
  .Clase1 {text-align:left;}
  .Clase2 {text-align:right;}
  //-->
  </STYLE>
  </head>

  <script>
  function cambiarClase() {
    document.getElementById('div1').className = (document.getElementById('div1').className == 'clase2') ? 'clase1' : 'clase2';
  }
  </script>

  <body>
    <div class='clase1' id='div1'>
    <input type='button' onclick='cambiarClase();'>
    </div>
  </body>
</html>

En el ejemplo, al hace clic sobre 'boton1', cambiará la clase del DIV que lo contiene, y por lo tanto su alineación. En definitiva, veremos como 'boton1' se, a lo ancho, de un extremo al otro de la ventana.

Vía: EMILIO

]]> http://luauf.com/2008/05/26/cambiar-la-clase-de-un-tag-html-mediante-javascript/feed/ 0 Caracteres especiales en JavaScript http://luauf.com/2008/05/20/caracteres-especiales-en-javascript/ http://luauf.com/2008/05/20/caracteres-especiales-en-javascript/#comments Wed, 21 May 2008 01:55:22 +0000 Luciano http://luauf.com/?p=301 Un problema clásico en Javascript es la representación de caracteres especiales (letras acentuadas, ñ, etc). En HTML se resuelve facilmente, mediante el código HTML del caracter. En Javascript la solución también es fácil de aplicar gracias a las cadenas de escape.

Las cadenas de escape, permiten introducir dentro de una cadena caracteres especiales como saltos de líneas, acentos, tabulaciones, etc. Entre las cadenas de escape más conocidas podemos mencionar:

  • \n: Salto de linea
  • \r: Retorno de carro
  • \t: Tabulación horizontal
  • \v: Tabulación vertical
  • \': Comilla simple o apostrofe
  • \": Comilla doble
  • \\: Barra invertida
  • \xdd: Caracter especial especificado por dos dígitos hexadecimanes dd

Este último caracter de escape (\xdd) es quien permite, por ejemplo, insertar letras acentuadas o la letra ñ. Lo único que se está necesitando es una tabla de caracteres unicode, que facilmente la puedes por Google.

Un sumplemento latino de esa tabla es la siguiente:

Un breve ejemplo:

function ErrorFecha() {
    alert("Atenci\xf3n: A\xf1o de nacimiento incorreto");
}

Vía: unijimpe

]]> http://luauf.com/2008/05/20/caracteres-especiales-en-javascript/feed/ 0