http://www.ulpgc.es/otros/tutoriales/JavaScript/index.htm

Tutorial de JavaScript1. Introduccin al JavaScript1.1. Qu es JavaScript? 1.2. Para qu sirve? 1.3. Diferencias con Java 1.4. Utilizacin de JavaScript en un documento HTML 1.5. Las versiones en JavaScript 1.6. Los Comentarios en JavaScript 1.7. Identificadores y Palabras reservadas 1.8. Ejemplos sencillos

2. Los tipos de datos en JavaScript2.1. Tipos numricos. 2.2. Las strings. 2.3. Tipo Booleano. 2.4. El valor nulo. 2.5. Los arrays. 2.6. Los objetos.

3. Operadores

3.1. Operadores Aritmticos 3.2. Operadores relacionales 3.3. Operadores lgicos 3.4. Operadores a nivel de bits 3.5. Operadores de asignacin 3.6. Otros Operadores 3.7. Precedencia de operadores

4. Las Estructuras de control4.1. Las variables en JavaScript 4.2. Sentencia if 4.3. Sentencia while 4.4. Sentencia for 4.5. Sentencia break 4.6. Sentencia continue 4.7. Sentencia switch

5. Las funciones en JavaScript5.1. Definicin de funciones 5.2. La sentencia return 5.3. Propiedades de las funciones 5.4. Consideraciones a tener en cuenta 5.5. Funciones predefinidas en JavaScript

6. La gestin de eventos en JavaScript6.1. La importancia de la gestion de eventos 6.2. Cmo se gestionan los eventos? 6.3. Clasificacin de eventos 6.4. Ejemplo de la gestion de eventos

7. Los objetos predefinidos.7.1. Los objetos predefinidos por el lenguaje JavaScript 7.2. Los objetos propios del cliente WWW.

8. Aplicaciones prcticas.8.1. Los marcos 8.2. La creacin de ventanas. 8.3. La verificacin de formularios.

9. Los cookies.9.1. Qu son los cookies? 9.2. Propiedades de los cookies. 9.3. La definicin de cookies. 9.4. Ejemplo definicin de cookies mediante JavaScript.

Captulo 1:Introduccin al JavaScript1.1. Qu es JavaScript?JavaScript, al igual que Java o VRML, es una de las mltiples maneras que han surgido para extender las capacidades del lenguaje HTML.Al ser la ms sencilla, es por el momento la ms extendida. Antes que nada conviene aclarar lo siguiente:JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto. Nunca podrs hacer un programa con JavaScript, tan slo podrs mejorar tu pgina Web con algunas cosas que veremos en apartados posteriores de este captulo.

1.2. Para qu sirve JavaScript?JavaScript sirve principalmente para mejorar la gestin de la interfaz cliente/servidor. Un script JavaScript insertado en un documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los eventos generados por el usuario. Estos eventos pueden ser el recorrido del propio documento HTML o la gestin de un formulario.Vemos un ejemplo:

Cuando la pgina HTML es un formulario que permite acceder a una anuario telefnico, se puede insertar un script que verifique la validez de los parmetros proporcionados por el usuario. Esta prueba se efecta localmente y no necesita un acceso a la red. Por otro lado, tambin se podr utilizar JavaScript para efectuar varias opciones a la vez; por ejemplo, acompaar el acceso a un documento HTML de la visualizacin de un vdeo o la ejecucin de un applet de Java...

1.3. Diferencias con Java.

La principal diferencia entre JavaScript y Java, es que este ltimo es un lenguaje de programacin completo. Lo nico que comparten es la misma sintaxis. JavaScript es un lenguaje que se integra directamente en pginas HTML. Tiene como caractersticas principales las siguientes:

Es interpretado (que no compilado) por el cliente, es decir, directamente del programa fuente se pasa a la ejecucin de dicho programa, con lo que al contrario que los lenguajes compilados no se genera ni cdigo objeto ni ejecutable para cada mquina en el que se quiera ejecutar dicho programa. Est basado en objetos. No es, como Java, un lenguaje de programacin orientada a objetos (OOP). JavaScript no emplea clases ni herencia, ni otras tcnicas tpicas de la OOP. Su cdigo se integra en las pginas HTML, incluido en las propias pginas. No es necesario declarar los tipos de variables que van a utilizarse ya que como se ver ms adelante, JavaScript realiza una conversin automtica de tipos. Las referencias a objetos se comprueban en tiempo de ejecucin. Esto es consecuencia de que JavaScript no es un lenguaje compilado. No puede escribir automticamente al disco duro. Por eso decimos que JavaScript es un lenguaje seguro para el entorno de internet en el que se aplicar

1.4. Utilizacin de JavaScript en un documento HTML.La insercin de un documento HTML se realiza mediante la marca SCRIPT utilizando la sintaxis: Cdigo del script

Los atributos de esta marca son:LANGUAGE="JavaScript" Precisa el lenguaje del script. Este atributo es obligatorio en ausencia del atributo SRC. SRC=url El atributo SRC precisa el URL del script a insertar en el documento. Este atributo es opcional, porque el script puede insertarse directamente en un documento HTML.

Estos dos atributos pueden especificarse simultneamente. Por ejemplo: Cdigo del script

podr especificarse para insertar en un documento un script de un lenguaje determinado y que cuyo cdigo fuente se encuentra en un acrhivo especificado en un determinado url. A continuacin enunciaremos algunos puntos a tener encuenta respecto a la introduccin de JavaScript en un documento HTML:

El script insertado mediante la marca SCRIPT es evaluado por el cliente tras la visualizacin de la pgina HTML. Las funciones definidas no se ejecutan inmediatamente, dependen de los eventos asociados a la pgina. La insercin del script mediante la marca SCRIPT puede colocarse en cualquier lugar del documento HTML pero se recomienda colocarla en la cabecera, es decir, en la zona definida por el HEAD. De este modo, el script est definido desde el principio del documento, lo que garantiza que ste se visible en todo el documento. Si se definen, adems del script mediante el atributo SRC, scripts en el propio documento, el cliente evaluar en primer lugar el insertado mediante el atributo SRC y seguidamente los incluidos en el documento. Los URL correspondientes a un JavaScript poseen generalmente la extencin .js. Es preferible delimitar los scripts insertados en un documento por comentarios HTML para asegurarse de que el contenido del script no aparecer en los clientes que no reconozcan la marca SCRIPT. Por ejemplo:

El lenguaje JavaScript no es case sensitive, es decir, no distinque maysculas de minsculas salvo en las cadanas de caracteres literales.

Por ltimo, comentar otra forma de introducir scripts en documentos HTML, y es incluir estos script como controladores de eventos de algunas marcas, como pueden ser la marcas de imgenes, anclas, links, botonoes, etc. Veamos a continuacin un ejemplo: Ir al ndice

Ir al ndice

Como puede verse, dentro de la marca, como atributo de esta, se pone un controlador de eventos y despus del signo igual y entre comillas se incluye el cdigo de JavaScript. Ahora bien, tambin es posible llamar a una funcin del HEAD del documento. Se recomienda esta segunda opcin ya que es una manera ms limpia y clara de escribir pginas. Se conseguira lo mismo que en el ejemplo anterior de esta forma:

... Ir al ndice ...

Ir al ndice

1.5. Las versiones de JavaScript.La versin 1.0 de JavaScript naci con el Netscape Navigator 2.0. Posteriormente, surgieron las versiones 1.1 y 1.2 de JavaScript con las versiones 3 y 4 del Netscape. Tambin existe una versin 1.3, introducida en la versin 4.07 del Netscape Navigator. Esta versin es una pequea revisin de la 1.2 creada para ajustarse al estndar internacional ECMA que regula el lenguaje JavaScript. En cuanto a Microsoft Internet Explorer en su versin 3.0 interpreta JScript, que es muy similar a JavaScript 1.0 pero con algunas incompatibilidades. Pero ya su versin 4.0 soporta sin nign problema, la versin 1.1 de JavaScript. Para tener en cuenta la versiones colocar en el atributo LANGUAGE de la marca SCRIPT la versin con la que se pienza trabajar. Por ejemplo para la versin:LANGUAGE="JavaScript1.1"

1.6. Los comentarios en JavaScript.A continuacin empezaremos ya en este captulo a estudiar uno de los elementos ms simples de los que se compone un lenguaje de programacin, aunque no por ello son los menos importantes, estamos hablando de los comentarios. Los comentarios en el cdigo permiten insertar observaciones observaciones del autor del cdigo para describir las distintas partes del programa. El interprete JavaScript los ignora y posee por ello una sintaxis particular. Se distinguen los comentarios en una sola lnea, precedidos por la barra oblicua doble // y los comentarios en varias lneas delimitados por los smbolos /* y por */. Por ejemplo:

// esto es un comentario /* esto es un comentario de varias lneas con una longitud cualquiera */

1.7. Identificadores y palabras reservadas.Conocer cual es la sintaxis de los identificadores y cuales son las palabras reservadas son aspectos de necesario conocimiento antes de empezar a escribir un programa en un lenguaje de programacin determinado.1.7.1. Identificadores en JavaScript.

Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc..., que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definicin. Los identificadores deben seguir las siguientes reglas:

El identificador debe empezar por una letra o por el caracter '_'. Los caracteres siguientes, adems de letras o el caracter '_', pueden ser cifras.

Recordar que le uso de maysculas o minsculas no es importante porque JavaScript no diferencia de los nombres de maysculas o minsculas en los identificadores. Veamos algunos ejemplos de nombres de variables:Num_linea aux1 _exit

1.7.2. Las palabras reservadas.

Primeramente decir que las palabras reservadas son palabras especiles que se utilizan para aumentar la legibilidad y separar las entidades sintcticas. Estas palabras no pueden usarse como identificadores. A continuacin veremos un cuadro en el que se muestran todas las palabras reservadas existentes en JavaScript, estas palabras tiene o tendrn un significado especial dentro del lenguaje:

1.8. Algunos ejemplos sencillos.Una vez que nos hemos empezado a introducir en el mundo de JavaScript es hora de empezar a ver al lenguaje "en accin" viendo una bateria de ejemplos muy sencillos que nos permitirn ir adentrndonos en la potencia de este lenguaje.Ejemplo 1: Visualizacin de texto mediante una ventana.

Como primer ejemplo no hay nada mejor que el clsico programa Hola mundo!. ste mostrar una ventana conteniendo el famoso mensaje cuando se pulse sobre el botn ejemplo1. Para ello debemos generar el siguiente cdigo fuente.

Ejemplo 2: Definicin de una funcin.

Este ejemplo define una funcin que calcula el cuadrado de un nmero y visualiza el resultado en una ventana parecida a la anterior. Esto se llevar a cabo cuando se pulse sobre el botn ejemplo2. Como sabemos la funcin se tendr que definir entre las marcas (,) que se encuentran dentro de la cabecara (HEAD) del documento.... ... ...

... El cuadrado de 5 es:

El cuadrado de 5 es: Ejemplo 3: Interaccin con un formulario.

Este ejemplo es refleja la interaccin de un script con un formulario, esta es una de las aplicaciones en la que los programadores de pginas Web echan mano de JavaScript. Concretemante en este ejemplo el usuario introducir una expresin aritmtica en un campo de texto del formulario y el script le pedir al usuario que la confirme antes de pasar a evaluarla. Ms adelante ( captulo 8 ), se comprobar si de verdad la expresin est bien o mal, es decir, no se limitar a preguntarle al usuario y a fiarse de su respuesta.... ... ... ... Introduzca la expresin:

Resultado:

Introduzca la expresin:

Resultado:

Captulo 2:Los tipos de datosAntes de empezar este captulo hay que aclarar que ms que tipos de datos, lo que JavaScript reconoce son tipos de valores, ya que como veremos ms adelante JavaScript no requiere que las variables tengan un tipo determinado en su declaracin, pues que JavaScript trata a todos los tipos por igual realizando una conversin automtica de los mismos. Ejemplo: mi_variable = 345; // mi_varible es de tipo entero.mi_variable = "hola"; //mi_variable es de tipo string.

Por lo tanto, ms que de tipos de datos, en JavaScript se habla de representacin de datos.

2.1. Tipos numricos.Los tipos numricos los podemos dividir en reales y enteros.2.1.1. Tipo numrico entero.

Los enterosPueden ser representados en tres formatos distintos:Decimal: enteros en base 10.

Hexadecimal: enteros en base 16. Se coloca antes del nmero en base 16 0x o 0X.

Octal: enteros en base 8. Colocamos un cero antes de dicho nmero en octal. Ejemplo: Estas tres variables nmericas tendrn un entero con el mismo valor. var1 = 20; var2 = 0x14; var3 = 024;2.1.2. Tipo numrico real.

Los reales se componen de una parte entera y otra fraccionaria separada por un punto de la anterior. La parte fraccionaria puede estar compuesta por un indicador de exponente E o e seguido de un nmero entero que indica el valor del exponente. A continuacin se mostrarn algunos ejemplos:25.478 2.3e45 5.6E-2 -3.789 ...

2.2. Las strings.Una string es una ristra de caracteres delimitadas por comillas. Las comillas sern simples o dobles atendiendo a una determinada regla.Por defecto se usarn comillas dobles ("), pero si alguna sentencia a de ir incluida entre dichas comillas, si esa sentencia contiene una string o a su vez otra sentencia que tambin deba ir delimitada por dichas comillas, estas comillas sern entonces comillas simples ('). Ejemplo:confirm("Estas seguro?"); OnMouseOver = "confirm('Estas seguro?');

Por otro lado, hay que tener en cuenta la escritura de caracteres especiales en lo que denominamos secuencias de escape. La secuencia de escape comienza siempre con el carcter \ y acontinuacin se escribe otro carcter que representa el cdigo especial o el nmero en octal o hexadecimal de su cdigo ASCII. Las secuencias de escape representan un nico carcter en las strings en donde aparecen.

2.3. Tipo booleano.El tipo booleano simplemente distingue entre dos estados, un estado de xito o de activado valor verdadero true, y un estado de fracaso o de desactivado, valor false.

2.4. El valor nulo.En JavaScript a las variables se les puede asignar un valor que indica el vaco, este valor es el valor null.

2.5. La conversin de datos.Antes que nada, recordar que JavaScript no es un lenguaje con tipos; por consiguiente, cuando se declara una variable no es necesario precisar su tipo. El contenido de la variable se convertir automticamente en el transcurso del programa segn su uso. El esquema de conversin del tipo se basa en el principio siguiente: el tipo asociado corresponde al de operando de la izquierda. Esto se debe a que la evaluacin se realiza de izquierda a derecha. Por ejemplo, supongamos la definicin de las variables siguientes:var una_string = "7"; var un_numero = 42;

Si evaluamos las siguientes expresiones.x = una_string + un_numero; y = una_numero + una_string;

La primera expresin convertir la variable un_numero en una cadena de caracteres porque el operando de la izquierda una_string es una cadena de caracteres. Esta expresin concatena las dos cadenas de caracteres y el resultado x es: "742".

Por el contrario, la segunda expresin convierte la cadena una_string en un valor numrico porque el operando de la izquierda un_numero, es como su propio nombre indica, un nmero. Esta segunda expresin suma los dos nmeros y el resultado y es: 49. La coversin de tipos no puede hacerse en todos los casos posibles: ciertas cadenas de caracteres no pueden convertirse en nmero. Tales conversiones generan un error. Por ejemplo:var una_string = "Pepe"; var un_numero = 578; y = una_numero + una_string; // ERROR: Pepe no puede convertirse en nmero

A continuacin mostraremos una tabla que resume la conversin de tipos en JavaScript.

2.6. Los arrays en JavaScript.Podemos crear arrays a los que le daremos un nombre y a los que accederemos con un ndice que comenzar desde el elemento nmero 1 (no desde el 0 como en Java o C/C++). En los arrays al igual que con las variables no existen tipos predeterminados. Para crear un array es necesario definirnos una funcin como la que veremos a continuacin:function CreaArray(n) { this.length = n; for (var i=1; i ... ... Inserta elementos en un vector>/U> Introducir el nmero de elementos del vector: