tel./fax: +34 91 675 33 06 [email protected] - …...de JavaScript al mercado, cuando solamente...

25
Avenida de Castilla,1 - Edificio Best Point - Oficina 21B 28830 San Fernando de Henares (Madrid) tel./fax: +34 91 675 33 06 [email protected] - www.autentia.com Somos su empresa de Soporte a Desarrollo Informático. Ese apoyo que siempre quiso tener... 1. Desarrollo de componentes y proyectos a medida Tecnología Desarrollo Sistemas Gran Empresa Producción autentia Certificación o Pruebas Verificación previa RFP Concurso Consultora 1 Consultora 2 Consultora 3 Equipo propio desarrollo Piloto 3a 3b 1. Definición de frameworks corporativos. 2. Transferencia de conocimiento de nuevas arquitecturas. 3. Soporte al arranque de proyectos. 4. Auditoría preventiva periódica de calidad. 5. Revisión previa a la certificación de proyectos. 6. Extensión de capacidad de equipos de calidad. 7. Identificación de problemas en producción. 3. Arranque de proyectos basados en nuevas tecnologías ¿Qué ofrece Autentia Real Business Solutions S.L? Para más información visítenos en: www.autentia.com Compartimos nuestro conociemiento en: www.adictosaltrabajo.com Gestor portales (Liferay) Gestor de contenidos (Alfresco) Aplicaciones híbridas Tareas programadas (Quartz) Gestor documental (Alfresco) Inversión de control (Spring) BPM (jBPM o Bonita) Generación de informes (JasperReport) ESB (Open ESB) Control de autenticación y acceso (Spring Security) UDDI Web Services Rest Services Social SSO SSO (Cas) Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery JPA-Hibernate, MyBatis Motor de búsqueda empresarial (Solr) ETL (Talend) Dirección de Proyectos Informáticos. Metodologías ágiles Patrones de diseño TDD 2. Auditoría de código y recomendaciones de mejora 4. Cursos de formación (impartidos por desarrolladores en activo)

Transcript of tel./fax: +34 91 675 33 06 [email protected] - …...de JavaScript al mercado, cuando solamente...

Page 1: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 [email protected] - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

Page 2: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

Síguenos a través de:

Agile Open Spain 2010

Disponibles gratis, para

el iPhone, las cartas de Planning Poker tipo cómic de Autentia

Histórico de

NOTICIAS

Últimos Tutoriales

Instalación de Ubuntu

Server 10.04 LTS 32bits en una máquina virtual con VMWare Workstation

Sniping en eBay (o

cómo ganar las subastas)

Instalación de Ubuntu

Desktop 8.04 LTS 32bits en una máquina virtual con VMWare Workstation

Crear una máquina

virtual con VMWare Workstation

Resolviendo el cubo de

Rubik

TUTORIAL DE JAVASCRIPT

JAIME CARMONA LOECHES

SEPTIEMBRE DE 2010

Fuente origen

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

Página 2 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 3: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas 2.5

Últimas ofertas de empleo

2010-08-30 Otras - Electricidad

- BARCELONA.

2010-08-24 Otras Sin catalogar -

LUGO.

2010-06-25 T. Información

- Analista / Programador - BARCELONA.

Copyright 2003-2010 © All Rights Reserved | Texto legal y condiciones de uso | Banners | Powered by Autentia | Contacto

Página 3 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 4: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

0. PRERREQUISITOS

Antes de leer este tutorial, se recomienda saber HTML y XHTML.

Los siguientes enlaces pueden ser de interés al respecto:

http://es.wikipedia.org/wiki/Html•

http://es.wikipedia.org/wiki/XHTML•

Página 4 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 5: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

1. INTRODUCCIÓN

Este tutorial pretende ser una introducción al lenguaje de Javascript, mostrando ejemplos prácticos de código fuente aplicados a páginas web, y sintaxis del lenguaje.

El objetivo del autor ha sido agrupar la información más importante y realizar un manual de uso organizado, de tal manera que el desarrollador de páginas web pueda utilizarlo como una pequeña guía de referencia.

Página 5 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 6: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

2. PRIMERA PARTE: JAVASCRIPT BÁSICO

2.1. Características

A continuación, y a modo de introducción al lenguaje JavaScript, se mencionan las características principales de este lenguaje.

Permite añadir interactivo al HTML: antes de la salida de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre el usuario y la página web, salvo algunos pocos eventos como el envío de datos del formulario, la navegación entre páginas, etc. JavaScript permite mejorar la comunicación entre eventos producidos entre la página web y el usuario, por ejemplo: "el usuario ha entrado dentro de una caja de texto, ¿realizamos alguna acción, por ejemplo, de cambio de color de la caja?".

Se puede incrustar con facilidad en las páginas HTML, sirviendo de complemento y sumando, entre ambas tecnologías, un mayor conjunto de herramientas para generar páginas web más potentes.

Es un lenguaje interpretado, no necesita compilación, esto nos permite definir el código fuente de JavaScript y evitar la fase de compilación.

Es de licencia libre, lo que significa que no es necesario pagar por hacer uso del mismo.

2.2. Aplicaciones prácticas

Complementando al punto anterior, se enumeran las siguientes aplicaciones prácticas para que el lector pueda ver, con facilidad, qué utilidades prácticas podría aportarle el hacer uso de este lenguaje.

JavaScript permite insertar texto y formato de manera dinámica dentro de una página HTML, escuchando eventos del usuario.

Ejemplo: "El usuario ha modificado un valor de una caja de texto, ¿quieres que le mostremos un mensaje diciendo que éste dato no cumple el formato esperado?", "El usuario ha entrado en una tabla, ¿quieres que modifiquemos el color de la misma para que tenga una mejor experiencia visual?".

Página 6 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 7: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

JavaScript permite acceder a elementos en HTML a través del estándar DOM, lo que le permite validar datos.

Ejemplo: Un usuario de una página web, después de rellenar un formulario, selecciona la opción de "Enviar". Antes de realizar la petición al servidor, JavaScript puede recoger este formulario, chequear los datos, y comprobar si estos son correctos. En caso de no serlos, puede enviar un mensaje de error al usuario, advirtiéndole de la necesidad de adaptar nuevamente los datos a los formatos que se esperan.

Puede ser usado para detectar el navegador del visitante.

Ejemplo: En el contexto de diversidad de navegadores web existentes, es importante que una aplicación sepa adaptarse al navegador del cliente, lo que le proporcionará una mejor experiencia al usuario e incrementará las posibilidades de éxito. Javascript puede detectar el navegador que ha llamado a nuestra página web, y poder adaptar el formato de la misma al formato que más le convenga al navegador, eliminando código HTML que no reacciona a un navegador determinado y colocándolo en otro formato que sí pueda interpretarlo...

Permite crear y manipular cookies. •

Ejemplo: Un usuario entra en una página web de compra por Internet, y una vez logueado, realiza la compra. Pasados unos días, vuelve a entrar en la misma página web, y vé que no tiene que introducir de nuevo el login, puesto que JavaScript ha sido capaz de generar las cookies de login y contraseña anteriormente, y recuperarlas en esta segunda visita.

2.3. Cómo y dónde insertar Javascript dentro de una web

Para poder hacer uso de este lenguaje, es necesario incluirlo dentro de una página web. Para ello, hay diferentes maneras.

2.3.1. Como script dentro del head

<html> <head> <script type="text/javascript">

Página 7 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 8: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>

En este ejemplo, definimos una función de JavaScript en la cabecera del fichero HTML.

2.3.2. Como script dentro del body

<html> <head> </head>

<body>

<script type="text/javascript"> document.write("Este es un mensaje escrito con JS dentro del <body> de la página."); </script>

</body> </html>

En este ejemplo, definimos una sentencia de JavaScript en el cuerpo del fichero HTML

2.3.3. Incluyendo un fichero externo

<html> <head> <script type="text/javascript" src="xxx.js"></script> </head> <body> </body> </html>

En este ejemplo, incluimos la definición de un fichero de JavaScript externo a nuestra página web.

2.4. Características sobre el código

A continuación, se enumeran alguna de las características más relevantes de JavaScript.

El código Javascript es sensible a mayúsculas: no es lo mismo definir una variable llamada "A", que una variable llamada "a".

JavaScript actúa mediante sentencias, que se traducen por comandos a los navegadores. Por ejemplo, "alert('1')" es una sentencia.

Una función en JavaScript es un conjunto de sentencias agrupadas secuencialmente que cumplen una acción global determinada.

2.5. Comentarios

Los comentarios permiten realizar, principalmente, aportes al lector del código fuente.

Página 8 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 9: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

Los tipos de comentarios aceptados por JavaScript son los siguientes:

De línea (//). Por ejemplo, •

//esto es un comentario de linea

Pero esta linea no está comentada

De bloque (/* */)•

/*esto es un comentario de bloque

esta linea pertenece al comentario de bloque*/

2.6. Variables

Las variables sirven para almacenar valores o expresiones. Es importante tener en cuenta las siguientes advertencias al respecto.

Son sensibles a mayúsculas, y deben empezar con una letra, o bien el carácter '_'.

Se declaran con el comando var (por ejemplo, var x;), y se pueden inicializar en la declaración (por ejemplo, var x=5).

Dentro de una variable, se pueden hacer operaciones aritméticas (y=x-5).

Una variable es visible dentro del bloque de código que se defina. Por ejemplo, una variable definida en la función holaMundo() no será visible en una función adiosMundo().

2.7. Operadores aritméticos

Los operadores permiten a cualquier lenguaje realizar operaciones con varios operandos. Los siguientes operadores están soportados por JavaScript.

Operadores aritméticos: existen la suma (+), la resta (-), la multiplicación (*), la división (/), el resto (%), incrementar una unidad (++), decrementar una unidad (--).

Ejemplos:◦

Suma de dos valores: var a = 3 + 2. ■

De comparación: comparación de la igualdad de valores (==), comparación de la igualdad de valores y tipos

Página 9 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 10: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

(===), comparación de desigualdad (!=), comparación de mayor (>), comparación de menor (<), comparación de mayor o igual (>=), comparación de menor o igual (<=).

Ejemplos:◦

Comparación de dos variables: var a = 10; var b = 20; if (a != b) {alert ('a y b son diferentes)} else {alert ('a y b son iguales)}.

Lógicos: and (&&), or (||).•

Ejemplos:◦

Comprobación lógica de dos valores añadidos: if ((a>10) && (a<20)) {alert('Condiciones cumplidas');

}

Condicionales: variablename=(condition)?value1:value2. Son utilizados para facilitar el desarrollo al programador.

2.8. Sentencias condicionales

Las sentencias condicionales permiten ejecutar unas partes del código u otras, teniendo en cuenta una serie de condicionantes lógicos.

Ejemplo: imagine que, comprobando su cuenta, comprueba que tiene menos de una cantidad mínima fijada. Es posible que en este caso le interese que el sistema le alerte por pantalla de esta situación.

2.8.1 Sentencia if

Permite realizar una acción si una condición es cierta.

if (condition) { code to be executed if condition is true }

Sintaxis de la sentencia if

2.8.2 Sintaxis de if / else

Permite realizar una acción si una condición es cierta, o realizar otra acción en caso de no serlo.

if (condition) { code to be executed if condition is true } else {

Página 10 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 11: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

code to be executed if condition is not true }

Sintaxis de la sentencia if / else

2.8.3. Sintaxis de switch(n)

Permite realizar una acción determinada discriminando por el valor de un atributo.

switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }

Sintaxis de la sentencia switch

2.9. Cajas Popup

Las cajas de Popup permiten mostrar información o establecer un pequeño diálogo con el mismo. Existen tres tipos de cajas.

2.9.1 alert()

La sentencia alert se encarga de transmitir información por pantalla.

Por ejemplo: ◦

alert("Esto es una alerta").

2.9.2 confirm()

La sentencia confirm permite que el usuario verifique o acepte algo, retornando true o false.

Por ejemplo: ◦

confirm("¿Está seguro de querer eliminar el registro seleccionado?");

2.9.3. prompt

La sentencia prompt tiene como finalidad preguntar al usuario sobre la introducción de un valor.

Por ejemplo: ◦

prompt("Introduzca un n°","0");

permite al usuario introducir un n°, y en caso de no hacerlo, coger el valor de 0 por defecto.

Página 11 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 12: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

2.10. Funciones

Como se comentó anteriormente, una función es un conjunto de sentencias agrupadas secuencialmente para realizar una función determinada.

<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> </body> </html>

Ejemplo de cómo definir una función en el "head" de la página web html, y cómo es llamada desde el evento "onclick".

2.10.1 Sentencia return

Al igual que en otros lenguajes, se usa para especificar el valor que es retornado dentro de la función.

<html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> </body> </html>

Función que recibe dos parámetros y devuelve como resultado su multiplicación.

2.11. Bucles en Javascript

En Javascript existen comandos que coordinan la ejecución de bucles. Un bucle es

una repetición de ejecución de bloques de código, siguiendo unas condiciones.

2.11.1. For

Este bucle ejecutada un bloque de código, con una condición inicial, que es modificada en cada ejecución de bucle hasta que se deja de cumplir la condición de evaluación.

Página 12 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 13: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

for (var=startvalue;var<=endvalue;var=var+increment) { code to be executed }

Sintaxis del bucle if

2.11.2. While

Es un subconjunto del bucle for, pues sólo tiene en cuenta la condición de evaluación para ejecutar el mismo. El programador se encarga de ir actualizando los valores de la variable que es evaluada dentro del bloque de código.

while (var<=endvalue) { code to be executed }

Sintaxis del bucle while

2.11.3. Sintaxis de do.. while

Es un subconjunto del bucle for, pues sólo tiene en cuenta la condición de evaluación para ejecutar el mismo. El programador se encarga de ir actualizando los valores de la variable que es evaluada dentro del bloque de código.

do.. while

do { code to be executed } while (var<=endvalue);

Sintaxis del bucle do / while

2.11.4. Sentencia For...In

Este modo de bucle recorre todos los elementos de un array.

for (variable in object) { code to be executed }

Sintaxis del bucle for..in

2.11.5. Sentencia break

Esta sentencia se encarga de detener la ejecución del bloque de código que esté en ejecución, y los siguientes.

2.11.6. Sentencia continue

Esta sentencia se encarga de detener la ejecución del bloque de código que este en ejecución, y continua la ejecución de los siguientes bloques de código.

2.12. Eventos

Los eventos son acciones que pueden ser detectadas por Javascript

Página 13 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 14: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

2.12.1. onLoad and onUnload

Son activados cuando el usuario entra en la página o sale de la misma.

2.12.2. onFocus, onBlur and onChange

Son activados en el contexto de la validación de los campos de texto. OnFocus se acciona cuando el usuario entra en el foco de un campo, onBlur cuando sale del mismo y onChange cuando un objeto cambia de valor.

2.12.3. onSubmit

Es activado cuando un formulario quiere enviar los datos. Esto nos permite ser capaces de validar los datos de un formulario javascript antes de enviar la información al servidor.

2.12.4. onMouseOver and onMouseOut

Son activados cuando el ratón entra en un campo de texto, o bien sale del mismo.

2.13. Gestión de errores

Al igual que otros lenguajes de programación, JavaScript proporciona soporte para la gestión de errores.

2.13.1. Try...catch

Intenta ejecutar un bloque de código, y en caso de no poder hacerlo, por un error interno, es capaz de gestionarlo y reaccionar al mismo.

try { //Run some code here } catch(err) { //Handle errors here }

Sintaxis de try / catch

try { if(x>10) { throw "Err1"; } else if(x<0) { throw "Err2"; } else if(isNaN(x)) { throw "Err3"; } } catch(er) {

Página 14 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 15: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

if(er=="Err1") { alert("Error! The value is too high"); } if(er=="Err2") { alert("Error! The value is too low"); } if(er=="Err3") { alert("Error! The value is not a number"); } }

El siguiente ejemplo evalúa el valor de la variable x, y lanza la excepción correspondiente en función del caso individual, mediante la sentencia throw.

Después, captura la excepción generada y la trata en función de cual sea.

2.14. Caracteres especiales

La barra invertida (\) se utiliza para insertar apóstrofes, nuevas líneas, comillas y otros caracteres especiales dentro del string de texto.

var txt="We are the so-called \"Vikings\" from the north."; document.write(txt);

Ejemplo 1

document.write ("You \& I are singing!");Ejemplo 2

2.15. Recomendaciones sobre la codificación de Javascript

Javascript es sensible a mayúsculas.•

Los espacios en blanco son ignorados, lo que permite realizar documentos más legibles.

Es posible partir un string para mejorar la lectura: •

Por ejemplo, es válida la siguiente sentencia.

document.write("Hello \ World!");

Página 15 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 16: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

3. SEGUNDA PARTE: OBJETOS EN JAVASCRIPT

3.1.1. Introducción

Javascript es un lenguaje orientado a objetos, Un objeto es una representación del mundo real mediante el uso de atributos o propiedades y métodos.

3.1.2. Propiedades

Las propiedades son valores asociados a un objeto.

<script type="text/javascript"> var txt="Hello World!"; document.write(txt.length); </script>

Ejemplo: acceso al atributo length del objeto String.

3.1.3. Métodos

Son las acciones o métodos que pueden ser ejecutadas sobre objetos.

<script type="text/javascript"> var txt="Hello World!"; document.write(txt.length); </script>

Ejemplo: acceso al método write del objeto document.

3.2. Objetos propios de Javascript.

El lenguaje Javascript incorpora sus propios objetos

3.2.1. El objeto String.

Sirve para la manipulación de una variable de texto. •

Atributos relevantes: length.•

Método relevantes: toLowerCase, toUpperCase, match, replace(), indexOf().

var txt="Hello world!"; document.write(txt.length);

var txt="Hello world!"; document.write(txt.toUpperCase());

Página 16 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 17: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

Ejemplo: escribir en mayúsculas el documento.

3.2.2. El objeto Date.

Es utilizado para trabajar con fechas y tiempos•

Tiene diferentes constructores: Date() / Date(milliseconds) / Date(dateString) / Date(year, month, day, hours, minutes, seconds, milliseconds)

Métodos relevantes: getTime(), setFullYear(), getDay()•

var myDate=new Date(); myDate.setFullYear(2010,0,14);

Ejemplo: asignar una fecha a un objeto myDate.

var myDate=new Date(); myDate.setFullYear(2010,0,14); var today = new Date(); if (myDate>today) { alert("Today is before 14th January 2010"); } else { alert("Today is after 14th January 2010"); }

Ejemplo: comparar dos fechas.

3.2.3. Array

Es utilizado para almacenar múltiples valores dentro de una variable única.

var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; myCars[2]="BMW";

Ejemplo 1: creación

document.write(myCars[0]);

Modificaciones de un array

myCars[0]="Opel";Ejemplo 2: acceso a un elemento del array

Página 17 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 18: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

3.2.4. Boolean

Es utilizado para demostrar si un objeto es verdadero o falso.

Constructor: new Boolean() / new Boolean(0) / new Boolean(null) / new Boolean("") / new Boolean(false) / new Boolean(NaN);

3.2.5. Math

Es un objeto que permite realizar tareas matemáticas•

Constantes: Math.E / Math.PI / Math.SQRT2 / Math.SQRT1_2 / Math.LN2 / Math.LN10 / Math.LOG2E / Math.LOG10E

var sqrt_value=Math.sqrt(16);

Ejemplo 1: raíz cuadrada de 16

document.write(Math.round(4.7));Ejemplo 2: redondeo de 4,7

3.2.6. RegExp

Es una expresión regular que describe un patrón de caracteres.

var str="Is this all there is?"; var patt1=/is/gi;

Ejemplo

Métodos importantes

test: permite una búsqueda para un valor específico, y retorna verdadero o falso, dependiendo del resultado.

exec(): permite una búsqueda de un string para un valor especificado, y retorna el texto en el valor encontrado. Si no encuentra resultado, devuelve null.

var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free"));

Ejemplo

Página 18 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 19: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

4. TERCERA PARTE: JAVASCRIPT AVANZADO

4.1. DETECCIÓN DEL NAVEGADOR

El objeto Navigator contiene información sobre el nombre del navegador visitante, y más.

<html> <body> <script type="text/javascript"> document.write("Browser CodeName: " + navigator.appCodeName); document.write("<br /><br />"); document.write("Browser Name: " + navigator.appName); document.write("<br /><br />"); document.write("Browser Version: " + navigator.appVersion); document.write("<br /><br />"); document.write("Cookies Enabled: " + navigator.cookieEnabled); document.write("<br /><br />"); document.write("Platform: " + navigator.platform); document.write("<br /><br />"); document.write("User-agent header: " + navigator.userAgent); </script> </body> </html>

Ejemplo: mostrar información sobre el navegador.

4.2. COOKIES

Una cookie es una variable que es almacenada en la computadora del visitante.

Los cookies son localizadas desde un navegador desde un ordenador.

Con JavaScript, se puede crear y recuperar valores de cookies.

Ejemplos prácticos son los siguientes:•

Nombre: la primera vez que llega un visitante a una web, introduce el nombre. El nombre es almacenado dentro de una cookie, y en la próxima visita aparecerá de manera automática.

Password: la primera vez que un visitante llega a la página web, él o ella debe rellenar una password, que se almacena en una página, y se recupera de la cookie la próxima vez.

Date: La primera vez que un visitante llega a una página, la fecha actual se almacena en una cookie.

Página 19 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 20: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

La próxima vez, él o ella recibirá un mensaje del tipo "Su última visita fue el 11 de Agosto de 2005.

function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); }

Función 1: setCookie

function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }

Función 2: getCookie

function checkCookie() { username=getCookie('username'); if (username!=null && username!="") { alert('Welcome again '+username+'!'); } else { username=prompt('Please enter your name:',""); if (username!=null && username!="") { setCookie('username',username,365); } } }

Función 3: checkCookie

<html> <head> <script type="text/javascript"> function getCookie(c_name) { if (document.cookie.length>0) {

Página 20 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 21: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); } function checkCookie() { username=getCookie('username'); if (username!=null && username!="") { alert('Welcome again '+username+'!'); } else { username=prompt('Please enter your name:',""); if (username!=null && username!="") { setCookie('username',username,365); } } } </script> </head> <body onload="checkCookie()"> </body> </html>

Ejemplo: uso de cookies

4.3. VALIDACIONES

JavaScript puede ser usado para validar datos en los formularios HTML antes de enviar el contenido del mismo al servidor.

El formulario de datos puede ser chequeado por JavaScript, y ayudar a responder a preguntas del tipo:

¿Ha dejado el usuario sin rellenar campos obligatorios?

¿Ha introducido un email válido?◦

¿Ha introducido una fecha válida?◦

¿El usuario ha introducido un valor alfanumérico cuando se esperaba un campo numérico?

Página 21 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 22: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

4.3.1. Campos requeridos

function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else { return true; } } }

Ejemplo

4.3.2. Validación de email

function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2) {alert(alerttxt);return false;} else {return true;} } }

Ejemplo

4.4. Animación en JavaScript

Mediante JavaScript se pueden realizar ciertos efectos visuales sobre una página web.

<script type="text/javascript"> function mouseOver() { document.getElementById("b1").src ="b_blue.gif"; } function mouseOut() { document.getElementById("b1").src ="b_pink.gif"; } </script>

Ejemplo que permite cambiar la imagen asociada a un elemento cuando el ratón realiza eventos sobre el mismo.

Página 22 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 23: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

4.5. Eventos de Tiempo

Mediante JavaScript es posible realizar operaciones teniendo en cuenta el factor del tiempo.

4.5.1. setTimeout.

<html> <head> <script type="text/javascript"> function timedMsg() { var t=setTimeout("alert('5 seconds!')",5000); } </script> </head> <body> <form> <input type="button" value="Display timed alertbox!" onClick="timedMsg()" /> </form> </body> </html>

Ejemplo que muestra el mensaje "5 segundos" después de que haya

transcurrido dicho intervale de tiempo.

4.5.2. clearTimeout

<html> <head> <script type="text/javascript"> var c=0; var t; var timer_is_on=0; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); }

Página 23 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 24: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); } } function stopCount() { clearTimeout(t); timer_is_on=0; } </script> </head> <body> <form> <input type="button" value="Start count!" onClick="doTimer()"> <input type="text" id="txt"> <input type="button" value="Stop count!" onClick="stopCount()"> </form> </body> </html>

Ejemplo

4.6. Creación de objetos en JavaScript

Javascript permite la creación de objetos, añadiendo propiedades y métodos.

Para acceder a las propiedades, basta con seleccionar objName.propName.

Añadir propiedades a un objeto se hace de la siguiente manera:

personObj.firstname="John";◦

personObj.lastname="Doe";◦

personObj.age=30;◦

personObj.eyecolor="blue"; ◦

Un ejemplo de acceso al método de un objeto es el siguiente:

Página 24 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...

Page 25: tel./fax: +34 91 675 33 06 info@autentia.com - …...de JavaScript al mercado, cuando solamente existía el HTML estático, no era posible escuchar los eventos que se producían entre

Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con tu ayuda, podemos ofrecerte un mejor servicio.

Enviar comentarioEnviar comentario

(Sólo para usuarios registrados)

» Registrate y accede a esta y otras ventajas «

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

objName.methodName()◦

function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor;

}

Ejemplo: creación de la plantilla persona

COMENTARIOS

Página 25 de 25Manual de Javascript

15/09/2010http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=tutorial...