Programación en AJAX

JavaScript and HTML DOM Reference

Programación en AJAX, Programacion en PHP, Recomendaciones 1 Comentario »

abr 122010

Cuando programo en javascript, me pasa de repente que se me olvida que propiedades puedo utilizar de algunos objetos… por decir…

Si queremos manipular el elemento document … y no recordamos que propiedades tiene, pues vamos a la página de referencia que tiene w3, y encontramos todo un menú de objetos de donde elegir:

This section contains a complete reference of

All built-in JavaScript objects

All browser objects

All HTML DOM objects

JavaScript Objects Reference

The references describe the properties and methods of each object, along with examples.

* Array object
* Boolean object
* Date object
* Math object
* Number object
* String object
* RegExp object
* Global properties and functions

Browser Objects Reference

The references describe the properties and methods of each object, along with examples.

* Window object
* Navigator object
* Screen object
* History object
* Location object

HTML DOM Objects Reference

The references describe the properties and methods of each object, along with examples.

* Document object
* Event object
* HTMLElement object
* Anchor object
* Area object
* Base object
* Body object
* Button object
* Form object
* Frame/IFrame object
* Frameset object
* Image object
* Input Button object
* Input Checkbox object
* Input File object
* Input Hidden object
* Input Password object
* Input Radio object
* Input Reset object
* Input Submit object
* Input Text object
* Link object
* Meta object
* Object object
* Option object
* Select object
* Style object
* Table object
* TableCell object
* TableRow object
* Textarea object

De hecho, de esa página no solo nos presenta propiedades de los objetos, si no que al entrar a determinado objeto, podemos ver también sus propiedades, métodos y eventos, por lo que esta página de referencia se me ha hecho muy buena para visitar mientras trabajo.

Dirección:

http://www.w3schools.com/jsref/default.asp

Apuntes AJAX, parte 4

Programación en AJAX Ninguna Respuesta »

mar 262009

Continuando con Javascript

Ser�a bueno hacer una recomendaci�n antes de seguir con los apuntes. Es mejor poner en archivos separados el javascript del html, pues entre otras cosas, nos facilita la administraci�n de nuestros sitios un poco m�s que si embebemos todo directo en los documentos html. Para hacer �sto colocamos entre las etiquetas de head la referencia al archivo .js de la siguiente manera:

<html>

<head>

<title>Mas javascript!</title>

</head>

<body>

</body>

</html>

Funciones

Las funciones son bloques de c�digo que nos permiten evitar el tener que repetir determinadas l�neas de c�digo. Una funci�n puede recibir par�metros de entrada (argumentos) y regresar valores. Una funci�n en Javascript se forma de la siguiente manera:

function nombreFuncion(parametro1, parametro2) {

//Codigo

}

Interactuando con el usuario

En los ejemplos hemos mandado las salidas de nuestros programas mediante document.write(), sin embargo hay diferentes formas para el feedback como:

alert()

Utilizaremos ahora el objeto window y varios de sus m�todos. El m�s com�n de utilizar es el m�todo alert(), el cual es recomendable dejar su uso solamente para cuando se busca mandar mensajes de alerta, peligro o evitar que el usuario se equivoque con una ayuda visual bastante molesta. Forma de usarlo:

alert(‘Ingrese su mensaje aqui’);

confirm()

Parecido al m�todo alert() solo que confirm() espera la toma de decisi�n y regresa un valor verdadero o falso seg�n la elecci�n.

alert(‘Ingrese su mensaje aqui’);

prompt()

SI queremos que el usuario ingrese datos para interactuar con nuestra aplicaci�n nos podemos valer de �ste m�todo:

var nombre= prompt(‘Ingrese su nombre’, ”);

alert(‘Bienvenido ‘+nombre);

Apuntes AJAX, parte 3

Programación en AJAX Ninguna Respuesta »

mar 192009

Arreglos

Podemos inicializar un arreglo cuando lo creamos:

var arreglo= new Array( �uno�, �dos�, �tres�);

var arreglo2= [1,2,3];

var arreglo3= [�uno�, �dos�, �tres�];

Definirle el n�mero de elementos que puede contener:

var arreglo= new Array(3);

O crear un arreglo vacio:

var arreglo= new Array();

Podemos agregarle elementos al arreglo:

var arreglo= new Array(3);

arreglo[0]= �uno�;

arreglo[1]=�dos�;

arreglo[2]=�tres�;

Ejemplo 1:

<html>

<head>

<title>Arreglos</title>

</head>

<body>

//Generar frases de bienvenida aleatorias, tambien podrian ser imagenes

var arreglo= new Array();

var aleatorio= Math.round(Math.random() * 2);

arreglo[0]=”Frase 1″;

arreglo[1]=”Frase 2″;

arreglo[2]=”Frase 3″;

document.write(“<h1>”+arreglo[aleatorio]+”</h1>”);

</script>

</body>

</html>

Ejemplo 2:

<html>

<head>

<title>Arreglos</title>

</head>

<body>

//Recorrer arreglo

var arreglo= new Array();

arreglo[0]=”uno”;

arreglo[1]=”dos”;

arreglo[2]=”tres”;

for(var i=0; i<3; i++) {

document.write(arreglo[i]+”<br>”);

}

</script>

</body>

</html>

Cortar, unir , convertir y ordenar

El m�todo slice() lo podemos utilizar para cortar los elementos de un arreglo, recibe dos parametros, el primero es el �ndice de donde se va a empezar a cortar y el segundo es el �ndice del �ltimo elemento (el final).

Podemos concatenar dos o m�s arreglos con el m�todo concat().

Podemos convertir un array a string utilizando el m�todo join() y visceversa, de string a array mediante el m�todo split().

Ordenar los elementos de un arreglo en orden alfab�tico o num�rico mediante el m�todo sort(). Solo hay que tener cuidado, por que los ordena estrictamente por su orden num�rico en ASCII. Tambi�n podemos utilizar el m�todo reverse().

Ejemplo:

<html>

<head>

<title>Arreglos</title>

</head>

<body>

* Cortar, unir, convertir y ordenar

* slice / concat / join, split / sort, reverse

//Variables para slice

var arreglo= new Array(“uno”, “dos”, “tres”);

var arregloCortado= arreglo.slice(1,3);

//variables para concat

var arregloUno= new Array(“uno”, “dos”);

var arregloDos= new Array(“tres”, “cuatro”);

var arregloUnoDos= arregloUno.concat(arregloDos);

//variables para join

var arregloNombres= new Array(“Hugo”, “Paco”, “Luis”);

var arregloNombresMod= arregloNombres.join(‘ es hermano de ‘);

//variables para split

var operacion = “2+ 1 + 4 + 3″;

var numeros= operacion.split(‘+ ‘);

//Impresiones para slice

document.write(“<p>Ejemplo Slice</p>”);

for(var i=0; i<2; i++) {

document.write(arregloCortado[i]+”<br>”);

}

//Impresiones para concat

document.write(“<p>Ejemplo Concat</p>”);

for(var j=0; j<4; j++) {

document.write(arregloUnoDos[j]+”<br>”);

}

//Impresiones para join

document.write(“<p>Ejemplo Join</p>”);

document.write(arregloNombresMod);

//Impresiones para split

document.write(“<p>Ejemplo Split</p>”);

for(var k=0; k<numeros.length; k++) {

document.write(numeros[k]+”<br>”);

}

</script>

</body>

</html>

Ok, hasta la pr�xima! jaja

Apuntes AJAX, parte 2

Programación en AJAX Ninguna Respuesta »

mar 182009

Los objetos: String y Math

String

El objeto String nos permite almacenar una cadena de texto y nos proporciona propiedades y m�todos para trabajar con las cadenas, el objeto Math nos proporciona m�todos para la manipulaci�n de datos matem�ticos.

<html>

<head>

<title>Pagina de prueba </title>

</head>

<body>

//Podemos declarar de forma expl�cita el string

var cadena= “Cadena de texto”;

//Obtenemos el numero de caracteres que componen el string cadena

var caracteresCadena= cadena.length;

//Otra forma de crear el objeto string, modo impl�cito

var cadena2= new String(“Cadena de texto”);

document.write(“\”"+cadena+”\” tiene ” + caracteresCadena +

” caracteres.<BR>”+cadena2);

</script>

</body>

</html>

Las cadenas est�n conformadas por caracteres y cada uno de �stos tiene un n�mero �ndice que lo identifica, la primera posici�n es la que corresponde al n�mero de �ndice cero, la segunda es el 1 y as� sucesivamente. Para trabajar con �stos �ndices tenemos el m�todo indexOf():

<html>

<head>

<title>Pagina de prueba </title>

</head>

<body>

var email= prompt(“Ingrese su email:”, “”);

var condicion= email.indexOf(“@”);

if(condicion<0)

document.write(“El email que ingres� no es v�lido, le falta @”);

else

document.write(“Email correcto!”);

</script>

</body>

</html>

Math

Este objeto tiene la particularidad de que no se puede crear expl�citamente, simplemente se utiliza y ya! Y a diferencia de String o Date, no almacena datos.

Unos m�todos muy �tilos de Math son los que utilizamos para redondear cantidades: round() (redondea para arriba cuando el decimal es >= a .5), ceil() (siempre redondea para arriba) y floor() (siempre redondea para abajo). Algo interesante de �stos m�todos es que si obtenemos los valores num�ricos utilizando la funci�n prompt(), autom�ticamente nos tratar� el string como si se tratase de un n�mero (hace la conversi�n, en ejemplos anteriores lo convertiamos utilizando parseInt() ).

Otro m�todo de Math es el m�todo random(), con el cual generamos un n�mero fraccionario aleatorio < 1 pero > 0.

Ejemplo:

<html>

<head>

<title>Trabajando con Math </title>

</head>

<body>

var numero= prompt(“Ingrese un numero decimal para redondear:”, “”);

//Se le suma 1 por que no queremos que aparesca el 0

var aleatorio= Math.round((Math.random() * 9) + 1);

document.write(“round() nos da “+Math.round(numero)

+”<br> ceil() nos da “+ Math.ceil(numero)

+”<br> floor() nos da “+ Math.floor(numero));

document.write(“<br>Ahora generando un n�mero aleatorio del 1 al 10 obtenemos: “+aleatorio);

</script>

</body>

</html>

Listo… es todo por ahora

Apuntes AJAX, parte 1

Programación en AJAX Ninguna Respuesta »

mar 062009

Que tal, recientemente me ha dado mucha curiosidad por aprender AJAX y creo que es buena idea utilizar el blog para ir haciendo apuntes los cuales posteriormente pueda consultar (bien sea yo, o cualquiera que nos visite) … espero le sea de utilidad a alguien! … me alejo un poco de la teor�a en estos apuntes y trato de resumir las cosas en cuestiones pr�cticas, si alguien requiere conocer a fondo sobre AJAX, Javascript, HTML, etc … pues ser�a buena idea consultar un libro especializado (de hecho, siempre es buena idea basarse en un libro).

Notas: Programando bajo Windows XP (ya tengo que instalarme mi Lenny :S), usando Adobe Dreamweaver CS3.

code

Primeros pasos con Javascript

Para poder aplicar Javascript a un documento w

eb se hace de la siguiente manera:

//El c�digo va aqu�

</script>

Se puede incluir Javascript en cualquier parte de un documento HTML. Nuestro primer programa ser� el cl�sico Hola mundo!… se imprimir� esta cadena de texto en la p�gina:

<html>

<head>

<title>Primer programa</title>

</head>

<body>

document.write(“Hola mundo!”);

</script>

</body>

</html>

La siguiente lista nos indica secuencias de escape, las cuales siempre son �tiles:

Secuencia de escape	Car�cter que representa
\b	Backspace
\f	Form feed
\n	Nueva l�nea
\r	Retorno de carro
\t	Tabulaci�n
\�	Single quote
\�	Double quote
\\	Backslash

Operadores v�lidos para la manipulaci�n de datos:

Operador	�Qu� hace?
+	Adiciona dos n�meros o concatena dos cadenas
-	Sustrae el segundo n�mero del primero
*	Multiplica dos n�meros
/	Divide el primer n�mero por el segundo
%	M�dulo (sobrante de la divisi�n)
–	Decrece el n�mero por una unidad
++	Incrementa el valor de un n�mero por una unidad

Ejemplo:

<html>

<head>

<title>Primer programa</title>

</head>

<body>

document.write(“Conca”+”tenar”);

document.write( 1 + 3 );

</script>

</body>

</html>

Variables

Para declararlas:

var primeraVariable;

Se pueden declarar e inicializar al mismo tiempo:

var primeraVariable= “Cadena de texto”;

Tambi�n podemos usar la funci�n de Javascript prompt() con la cual podemos hacer que el usuario ingrese los valores:

<html>

<head>

<title>Primer programa</title>

</head>

<body>

var primeraVariable= parseInt(prompt(“Ingrese primer numero: “,”"));

var segundaVariable= parseInt(prompt(“Ingrese segundo numero: “, “”));

var total= primeraVariable + segundaVariable;

document.write(“El valor de la sumatoria es: “+total);

</script>

</body>

</html>

Del c�digo podemos ver que utilizamos la funci�n parseInt� esto se hace debido a que el valor regresado por la funci�n prompt es del tipo string, y si lo dejaramos sin el parseInt el resultado que arrojar�a la variable �total� ser�a una concatenaci�n de textos y no una sumatoria.

Una funci�n interesante de Javascript es la funci�n typeof() la cual nos arroja que tipo de datos tenemos:

<html>

<head>

<title>Primer programa</title>

</head>

<body>

var pruebaString= “prueba”;

document.write(“pruebaString es: “+typeof(pruebaString));

</script>

</body>

</html>

Ahora un ejemplo donde usaremos funciones, el objeto date y pondremos el script en otro archivo para que desde el archivo html lo llamemos:

prueba.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<title>Pagina de pruebas</title>

</head>

<body>

</body>

</html>

tiempo.js

function fecha() {

var fechaActual= new Date();

//MMDDYY HMSMs

var fecha= fechaActual.getDate() +

” / ” + fechaActual.getMonth() +

” / ” + fechaActual.getFullYear();

document.write( fecha );

}

function hora() {

var horaActual= new Date();

//MMDDYY HMSMs

var hora= horaActual.getHours() +

” : ” + horaActual.getMinutes() +

” : ” + horaActual.getSeconds();

document.write(hora);

}

function navegador() {

var nombreNavegador= navigator.appName;

var versionNavegador= navigator.appVersion;

document.write(“Corriendo en: “+nombreNavegador+”<BR>Versión: “

+versionNavegador);

}

fecha();

document.write(“<P>”);

hora();

alert(“Script fecha y hora!”);

alertas.js

var nombre= prompt(‘Ingrese su nombre’, ”);

document.write(“<p>Usuario <strong>”+nombre+”</strong> validado!</p>”);

Es todo por ahora, en cuanto tenga tiempo seguir� con los apuntes J

Cualquier duda o comentario ya saben! Dejen comentarios!

10 razones para usar (aprender) AJAX

Programación en AJAX 2 Comentarios »

dic 122008

ajax

Pues llevo un rato trabajando con PHP… y vaya, tengo que decir que a mis necesidades se ha acomodado bastante bien y de hecho me ha sorprendido el uso que se le puede dar. Luego, este �ltimo semestre trabaj� un poco con Flex de Adobe y aunque me gust� como que me dej� con un poco de dudas… digo, est� excelente para darle a nuestros programos una vista m�s profesional, pero al programar uno se topa con cosas un poco molestas (que giran en torno a como maneja los errores), en fin.

Y bueno, �ltimamente tengo la espinita de ver que onda con AJAX y me encontr� vagando en la red una entrada en un blog donde hablan de 10 razones para usarlo… y bueno… de lo que he investigado se me hace bastante interesante lo que se puede hacer con AJAX.

Recomiendo de hecho el siguiente ebook el cual es gratuito con el que uno puede empezar a aprender un poco respecto a AJAX: http://www.librosweb.es/ajax/

Fuera de ese libro, yo me estoy basando en el libro AJAX:The Definitive Guide de OReilly el cual est� bastante bien … pero en fin… a continuaci�n hago la cita de la entrada que les comento y al final pongo la fuente!

�Porqu� yo deber�a considerar usar Ajax? Les voy a dar diez razones por las que el uso de Ajax deber�a ser considerado.1. Basado en los est�ndares abiertos
2. Usabilidad
3. V�lido en cualquier plataforma y navegador
4. Beneficia las aplicaciones web
5. No es dificil su utilizaci�n
6. Compatible con Flash
7. Adoptado por los �gordos� de la tecnolog�a web
8. Web 2.0
9. Es independiente del tipo de tecnolog�a de servidor que se utilice
10. Mejora la estetica de la web

1. Basado en los est�ndares abiertos

Ajax esta formado por las tecnologias Javascript, html, xml, css, y XML HTTP Request Object, siendo este �ltimo el unico que �no es� estandar pero es soportado por los navegadores mas utilizados de internet como son los basados en mozilla, internet explorer, safari y opera.

2. Usabilidad

Permite a las p�ginas hacer una peque�a petici�n de datos al servidor y recibirla sin necesidad de cargarla p�gina entera. El incremento de las actualizaciones �on the fly� elimina el tener que refrescar el navegador, algo bastante apreciado a la hora de operar en una aplicaci�n web.

3. V�lido en cualquier plataforma y navegador

Internet explorer, los basados en mozilla y firefox son los que se llevan la palma en el mercado de internet y adem�s son los navegadores en los que es mas f�cil programar aplicaciones Web AJAX, pero ahora es posible construir aplicaciones web basadas en AJAX para que funcionen en los navegadores mas modernos. Es una de las razonas mas importantes por las que AJAX se ha vuelto tan popular. Aunque si bien muchos desarrolladores sab�an que era posible usarse a�os atr�s con Internet Explorer, no era viable realizarse. Ahora ya es posible su avance gracias a Mozilla y Firefox.

4. Beneficia las aplicaciones web

AJAX es la cara del presente en las aplicaciones web – las aplicaciones web conllevan ciertos beneficios sobre las aplicaciones sobre escritorio (aplicaciones que dependan de un sistema operativo, librerias, lo que entendemos por programas compilados). Esto incluyo un menor coste de creaci�n, facilidad de soporte y mantenimiento, menores tiempos a la hora de desarrollarlas, y sin necesidad de instalaciones; �stas son algunas de los beneficios que han llevado a las empresas y usuarios el adoptar aplicaciones web desde mediados de los 90. AJAX solo ayudar� a las aplicaciones web a mejorar y conseguir un mejor resultado de cara al usuario final.

5. No es dificil su utilizaci�n

Porque AJAX esta basada en los est�ndares que han sido utilizados durante muchos a�os, muchos desarrolladores web han tenido que utilizar las tecnolog�as que las aplicaciones AJAX requieren. �sto significa que no es un gran esfuerzo el aprendizaje de los desarrolladores el pasar de un simple c�digo HTML y aplicaciones web a una potente aplicaci�n AJAX. Tambi� significa que los desarrolladores pueden actualizar poco a poco las interfaces de usuario hacia unas interfaces con AJAX; no necesita una re-escritura de la aplicaci�n entera, se puede hacer incrementalmente.

6. Compatible con Flash

Muchos desarrolladores tienen serias dudas sobre usar Flash o AJAX. Definitivamente hay ventajas y desventajas en ambas tecnolog�as seg�n la situaci�n que se de pero tambi�n hay muchas posibilidades y muy buenas para que ambas funcionen en conjunto.

7. Adoptado por los �gordos� de la tecnolog�a web

La difusi�n de AJAX en los l�deres de la industria de internet prueba que el mercado acepta y valida el uso de esta tecnolog�a. Todo el mundo esta migrando hacia AJAX incluyendo Google, Yahoo, Amazon, Microsoft (por nombrar unas pocos). Google Maps fue lo que capt� la atenci�n de los desarrolladores web. Cuando empezaron a investigar como google era capaz de llevar esa increible herramienta dentro de un navegador sin necesidad de ning�n tipo de plug-in, encontraron que AJAX estaba detr�s del tema.

8. Web 2.0

El movimiento Web 2.0 est� cada vez mas en auje y dando quebraderos de cabeza de muchos programadores, usuarios, y vendedores. Esto esta ayudando la adopci�n de AJAX. Las interfaces de AJAX son un componente clave de muchas de las aplicaciones Web 2.0, como puede ser BackPack (un organizador de disco online en entorno Web) y Google Maps. Afortunadamente gracias bombo que se le esta dando, acelerar� la adopci�n de AJAX y la los beneficios de su uso lo mantendr� en escena. Una de las claves principales de Web 2.0 es el usar la red como plataforma para el desarrollo de aplicaciones, en vez de simples p�ginas web. Siendo importante la iteracci�n de los usuarios con la apliaci�n en s�.

9. Es independiente del tipo de tecnolog�a de servidor que se utilice

As� como AJAX funciona en cualquier navegador, es perfectamente compatible con cualquier tipo de servidor est�ndar y lenguage de programaci�n Web. PHP, ASP. ASP.Net, Perl, JSP, Cold Fusion. El ser completamente compatible el desarrollo en �stas tecnolog�as ha ayudado a AJAX a que vaya cada vez mas en auge.

10. Mejora la estetica de la web

Con AJAX se puede interactuar la imaginaci�n del desarrollador con la usabilidad de una apliaci�n web de forma que se pueda realizar una aplicaci�n que si no estuviera dentro de un navegador, podr�a pasar por una aplicacion normal de escritorio.

Fuente:

http://jorgesaavedra.wordpress.com/2007/06/22/10-razones-para-usar-ajax/

Mas info en: http://developers.sun.com/jscreator/archive/reference/techart/2/ajax_overview.html

Y por supuesto wikipedia jeje, salu2!

JavaScript and HTML DOM Reference

Apuntes AJAX, parte 4

Apuntes AJAX, parte 3

Apuntes AJAX, parte 2

Apuntes AJAX, parte 1

10 razones para usar (aprender) AJAX

1. Basado en los est�ndares abiertos

2. Usabilidad

3. V�lido en cualquier plataforma y navegador

4. Beneficia las aplicaciones web

5. No es dificil su utilizaci�n

6. Compatible con Flash

7. Adoptado por los �gordos� de la tecnolog�a web

8. Web 2.0

9. Es independiente del tipo de tecnolog�a de servidor que se utilice

10. Mejora la estetica de la web

Síguenos:

Traducir esta Página

Entradas recientes

Comentarios recientes

Categorías