tel./fax: +34 91 675 33 06 [email protected] - …...de JavaScript al mercado, cuando solamente...
Transcript of tel./fax: +34 91 675 33 06 [email protected] - …...de JavaScript al mercado, cuando solamente...
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)
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...
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...
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...
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...
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...
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...
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...
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...
(===), 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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...