Manual de Javascript

2
27141

TUTORIAL
DE JAVASCRIPT

JAIME
CARMONA LOECHES

SEPTIEMBRE
DE 2010

Fuente
origen

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

0.
PRERREQUISITOS

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

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

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/java
script«>
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

2 Comentarios

Dejar respuesta

Please enter your comment!
Please enter your name here