Lunes, Junio 14th, 2010
JQuery es una librería programada en Javascript que permite trabajar con los elementos del DOM (Document Object Model), manejar eventos y crear animaciones sencillas y además de todo permite ejecutar funciones sin necesidad de recargar la página. JQuery actualmente es usado por cientos de proyectos a tal punto que grandes empresas como Microsoft o Nokia han llegado a implementarlo.
Algunas características generales de este framework son:
- Permite manipular la hoja de estilos.
- Se pueden añadir plugins (extensiones) para aumentar su funcionalidad.
- Nos proporciona un conjunto de funciones para realizar animaciones con muy pocas líneas de código.
Además de todo hay que decir que el framework integra funciones para trabajar directamente con Ajax, por lo que como ya se ha dicho, permite realizar acciones dentro de un documento web sin la necesidad de recargar nuevamente toda la página.
Como utilizar JQuery
Para utilizar la librería primero debemos bajarnos el archivo con extensión *.js que nos proporcionan en el sitio web oficial, que es un fichero unos 24 KB y para implementarla debemos crear una referencia hacía el fichero como se hace comúnmente con cualquier archivo externo en Javascript.
<script type="text/javascript" src="jquery.js"></script>
A continuación, un videotutorial de JQuery en español que han hecho en la página de Desarrollo web:
La librería como tal es de código abierto y esta bajo la licencia MIT y GPL (doble licenciamiento), además existe una amplia documentación tanto en ingles como en español sobre la librería. Además en la página oficial puedes encontrar tutoriales de JQuery y toda una guia de referencia de sus funciones.
Web | Sitio oficial de la librería JQuery
Descarga | Librería JQuery
Lunes, Marzo 8th, 2010
En Javascript a diferencia de otros lenguajes podemos utilizar una clase especial que nos permite definir un tipo especial de vectores que pueden contener distintos tipos de datos. La clase Array nos permite crear una cadena para que podamos acceder a cada elemento del vector. Veamos un ejemplo:
arreglo = new Array("Hola","Programando ideas","lector","de");
alert(arreglo[1]);
En realidad lo que hacemos es crear un objeto que contienen un arreglo de datos, por lo que igualmente podemos eliminar cualquier dato de este arreglo por medio de la función delete, de esta manera:
delete arreglo[0];
Inclusive también podemos modificar los datos como dándole valor a una variable normal, de esta manera:
arreglo = new Array("Hola","Programando ideas","lector","de");
arreglo[0] = "Hola programador";
alert(arreglo[0]);
También podemos definir un tamaño para el vector sin darle valores al momento de ser declarada, luego de eso si lo deseamos podemos darle valores y acceder a cada elemento.
meses = new Array(5);
meses[0] = "Enero";
meses[1] = "Febrero";
meses[2] = "Marzo";
alert(meses[2]);
Matrices en Javascript
Una matriz no es nada más que un vector de dos dimensiones, por lo que podemos crear un vector y luego a cada dimensión asignarle sus respectivos valores, de esta manera:
arreglo = new Array();
arreglo[0] = new Array("00","01","02");
arreglo[1] = new Array("10","11","12");
arreglo[2] = new Array("20","21","22");
document.write("Posición dos de la primera dimensión: "+arreglo[0]);
Ahora como sabemos que arreglo[0] equivale a 00,01,02, y lo que queremos es acceder a una posición específica lo que haremos será acceder indicándole otra posición en el vector, de esta manera:
document.write("Posición dos de la primera dimensión: "+arreglo[0][2]);
Jueves, Febrero 18th, 2010
JavaScript pretty prettifier es un conjunto de librerías (entre Javascript y css) que permiten colorear el código de distintos lenguajes de programación e implementarlo en tu web. Usarlo es bastante sencillo solo sigue estos pasos:
Primer paso: Llamar las librerías. Esto lo hacemos como normalmente se hace con cualquier otro archivo externo css y javascript.
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
Paso 2: Llamar la función desde el evento OnLoad del Body
<body onload="prettyPrint()">
Por último para implementarlo en nuestro código podemos utilizar la etiqueta “pre” y añadirle como clase prettyprint lang-code, donde code lo reemplazas por el nombre del lenguaje. Veamos un ejemplo completo:
<html>
<head>
<link href="prettify.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="prettify.js"></script>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint lang-java">
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
int dia,mes,ano,auxdia;
dia = Integer.parseInt(jTextField1.getText());
mes = Integer.parseInt(jTextField2.getText());
ano = Integer.parseInt(jTextField3.getText());
auxdia = 2009-ano;
if(auxdia < 18){
jLabel4.setText("Respuesta: Eres menor de edad");
}
else {
jLabel4.setText("Respuesta: Eres mayor de edad");
}
}
</pre>
</body>
</html>
Las librerías las descargas del sitio oficial en Code Google. Como verán es una librería bastante sencilla de implementar e incluso puede existir la posibilidad de implementarlo en algún sistema de blogs o foros pre-fabricados siempre y cuando se desarrolle una adaptación.
Sitio oficial | Descargar Code Prettifier
