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

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.

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?».

• 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»>
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.

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 (===), 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
{
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.

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.

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

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)
{
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!»);

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());

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

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

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. 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)
{
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?

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.

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);
}

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:

  • 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