Skip to content

Apuntes AJAX, parte 1

marzo 6, 2009

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:

<script type=”text/javascript”>

//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>

<script type=”text/javascript”>

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>

<script type=”text/javascript”>

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>

<script type=”text/javascript”>

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>

<script type=”text/javascript”>

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”&gt;

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<title>Pagina de pruebas</title>

<script type=”text/javascript” src=”scripts/tiempo.js”></script>

<script type=”text/javascript” src=”scripts/alertas.js”></script>

</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&oacute;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!

No comments yet

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: