Presentación Javascript 2da

JAVASCRIPT
Funciones predefinidas
JavaScript incorpora una serie de herramientas y utilidades (llamadas
funciones y propiedades, como se ver ms adelante) para el manejo
de las variables. De esta forma, muchas de las operaciones bsicas con
las variables, se pueden realizar directamente con las utilidades que
ofrece JavaScript.
1. Funciones tiles para cadenas de texto
length, calcula la longitud de una cadena de texto (el nmero de

caracteres que la forman)
+ y concat, se emplea para concatenar varias cadenas de texto
toUpperCase(), transforma todos los caracteres de la cadena a sus
correspondientes caracteres en maysculas
Unidad III: Funciones en Javascript
charAt(posicion), obtiene el carcter que se encuentra en la posicin
indicada
indexOf(caracter), calcula la posicin en la que se encuentra el
carcter indicado dentro de la cadena de texto
lastIndexOf(caracter), calcula la ltima posicin en la que se
encuentra el carcter indicado dentro de la cadena de texto
substring(inicio, final), extrae una porcin de una cadena

de texto. El segundo parmetro es opcional. Si slo se indica el parmetro
inicio, la funcin devuelve la parte de la cadena original
correspondiente desde esa posicin hasta el final
split(separador), convierte una cadena de texto en un array de
cadenas de texto

2. Funciones tiles para arrays
length, calcula el nmero de elementos de un array

concat(), se emplea para concatenar los elementos de varios arrays
join(separador), es la funcin contraria a split(). Une todos los

elementos de un array para formar una cadena de texto.
pop(), elimina el ltimo elemento del array y lo devuelve. El array original

se modifica y su longitud disminuye en 1 elemento
push(), aade un elemento al final del array. El array original se
modifica y aumenta su longitud en 1 elemento. (Tambin es posible
aadir ms de un elemento a la vez)

2. Funciones tiles para arrays
shift(), elimina el primer elemento del array y lo devuelve. El array

original se ve modificado y su longitud disminuida en 1 elemento.
unshift(), aade un elemento al principio del array. El array original
se modifica y aumenta su longitud en 1 elemento. (Tambin es posible
aadir ms de un elemento a la vez)
reverse(), modifica un array colocando sus elementos en el orden

inverso a su posicin original

3. Funciones tiles para nmeros
toFixed(digitos), devuelve el nmero original con tantos decimales

como los indicados por el parmetro digitos y realiza los redondeos
necesarios. Se trata de una funcin muy til por ejemplo para mostrar
Precios.
var numero1 = 4564.34567;

numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564

Clases en Javascript
4. Clases varias
Date()
El objeto Date dispone, entre otros, de los siguientes mtodos:
getYear()
setYear(ao)
Obtiene y coloca, respectivamente, el ao de la fecha.
ste se devuelve como nmero de 4 dgitos excepto en el
caso en que est entre 1900 y 1999, en cuyo caso
devolver las dos ltimas cifras.
getFullYear()
setFullYear(ao)
getMonth()
setMonth(mes)
4. Clases varias
fecha = new Date();//creacin de un objeto de la clase Date

fecha = new Date(ao, mes, dia);
fecha = new Date(ao, mes, dia, hora, minuto, segundo);
Si no utilizamos parmetros, el objeto fecha contendr la fecha y hora
actuales, obtenidas del reloj de nuestra computadora. En caso contrario
hay que tener en cuenta que los meses comienzan por cero. As, por
ejemplo:
navidad06 = new Date(2006, 11, 25)

4. Clases varias
Math()
abs Valor absolut Math.abs(-2) 2

sin, cos, tan Funciones trigonomtricas Math.cos(Math.PI) -1
asin, acos, atan Func trigon inversas Math.asin(1) 1.57
exp, log Exp y logaritmo, base E Math.log(Math.E) 1
ceil Dev el entero ms peq Math.ceil(-2.7) -2
floor Dev el ent ms grande Math.floor(-2.7) -3
round Dev el entero ms cerca Math.round(-2.7) -3
min, max Dev el menor (o mayor) Math.min(2,4) 2
pow Exp, base y exponente Math.pow(2,3) 8
sqrt Raz cuadrada Math.sqrt(25)
random Gen aleatorio entre 0 y 1 Math.random() 0.7345

Funciones Javascript
EJERCICIO EVALUADO (FUNCIONES PREDEFINIDAS Y CLASES)
Resuelva ...

Definicin de Funciones
Cuando se desarrolla una aplicacin compleja, es muy habitual utilizar una

y otra vez las mismas instrucciones. Un script para una tienda de comercio
electrnico por ejemplo, tiene que calcular el precio total de los productos
varias veces, para aadir los impuestos y los gastos de envo.
Las funciones son la solucin a todos estos problemas, tanto en JavaScript

como en el resto de lenguajes de programacin. Una funcin es un
conjunto de instrucciones que se agrupan para realizar una tarea concreta
y que se pueden reutilizar fcilmente.

function <nombre de funcin>(argumento1, argumento2, ..., argumento n)

{
<cdigo de la funcin>
}
1. Argumentos y valores de retorno
Las variables que necesitan las funciones se llaman argumentos. Antes de

que pueda utilizarlos, la funcin debe indicar cuntos argumentos necesita
y cul es el nombre de cada argumento. Adems, al invocar la funcin, se
deben incluir los valores que se le van a pasar a la funcin.
Los argumentos se indican dentro de los parntesis que van detrs del
nombre de la funcin y se separan con una coma (,).
function suma_y_muestra(primerNumero, segundoNumero) { ... }

A continuacin, para utilizar el valor de los argumentos dentro de la
funcin, se debe emplear el mismo nombre con el que se definieron
los argumentos:
function suma_y_muestra(primerNumero, segundoNumero) { ... }

var resultado = primerNumero + segundoNumero;
alert("El resultado es " + resultado);
}

Reglas sobre los argumentos
El nmero de argumentos que se pasa a una funcin debera ser el mismo

que el nmero de argumentos que ha indicado la funcin. No obstante,
JavaScript no muestra ningn error si se pasan ms o menos argumentos
de los necesarios.
El orden de los argumentos es fundamental, ya que el primer dato que se

indica en la llamada, ser el primer valor que espera la funcin; el segundo
valor indicado en la llamada, es el segundo valor que espera la funcin
y as sucesivamente.

Se puede utilizar un nmero ilimitado de argumentos, aunque si su nmero

es muy grande, se complica en exceso la llamada a la funcin.
No es obligatorio que coincida el nombre de los argumentos que utiliza la

funcin y el nombre de los argumentos que se le pasan. En el ejemplo
anterior, los argumentos que se pasan son numero1 y numero2 y los
argumentos que utiliza la funcin son primerNumero y
segundoNumero.

A continuacin se muestra otro ejemplo de una funcin que calcula el precio

total de un producto a partir de su precio bsico:
// Definicin de la funcin
function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
}
// Llamada a la funcin
calculaPrecioTotal(23.34);
Afortunadamente, las funciones no solamente puede recibir variables y

datos, sino que tambin pueden devolver los valores que han calculado
con return.
Si la funcin llega a una instruccin de tipo return, se devuelve el valor

indicado y finaliza la ejecucin de la funcin. Por tanto, todas las
instrucciones que se incluyen despus de un return se ignoran y por ese
motivo la instruccin return suele ser la ltima de la mayora
de funciones.

2. mbito de las variables
El mbito de una variable (llamado "scope" en ingls) es la zona del

programa en la que se define la variable. JavaScript define dos mbitos
para las variables: global y local.
var mensaje = "gana la de fuera";
function muestraMensaje() {
var mensaje = "gana la de dentro";
alert(mensaje);
}
alert(mensaje);
muestraMensaje();
alert(mensaje);
3. Sentencias break y continue
La estructura de control for es muy sencilla de utilizar, pero tiene el

inconveniente de que el nmero de repeticiones que se realizan slo se
pueden controlar mediante las variables definidas en la zona de
actualizacin del bucle.
Las sentencias break y continue permiten manipular el comportamiento

normal de los bucles for para detener el bucle o para saltarse alguna
s repeticiones. Concretamente, la sentencia break permite terminar de
forma abrupta un bucle y la sentencia continue permite saltarse
algunas repeticiones del bucle.

El siguiente ejemplo muestra el uso de la sentencia break

var cadena = "En un lugar de la Mancha de cuyo nombre
no quieroacordarme...";
var letras = cadena.split("");
var resultado = "";
for(i in letras) {
if(letras[i] == 'a') {
break;
}
else {
resultado += letras[i];
}
}
alert(resultado);
En ocasiones, lo que se desea es saltarse alguna repeticin del bucle

cuando se dan algunas condiciones. Siguiendo con el ejemplo anterior,
ahora se desea que el texto de salida elimine todas las letras "a" de la
cadena de texto original:
var cadena = "En un lugar de la Mancha de cuyo nombre

no quiero acordarme...";
var letras = cadena.split("");
var resultado = "";

for(i in letras) {
if(letras[i] == 'a') {
continue;
}
else {
resultado += letras[i];
}
}
alert(resultado);

Funciones Javascript
EJERCICIO EVALUADO (FUNCIONES DEFINIDAS)
Escribir...

Eventos en Javascript
Afortunadamente, las aplicaciones web creadas con el lenguaje JavaScript
pueden utilizar el modelo de programacin basada en eventos.
En este tipo de programacin, los scripts se dedican a esperar a que el
usuario "haga algo" (que pulse una tecla, que mueva el ratn, que cierre
la ventana del navegador). A continuacin, el script responde a la accin
del usuario normalmente procesando esa informacin y generando un
resultado.
Los eventos hacen posible que los usuarios transmitan informacin a los
programas. JavaScript define numerosos eventos que permiten una
interaccin completa entre el usuario y las pginas/aplicaciones web. La
pulsacin de una tecla constituye un evento, as como pinchar o mover el
ratn, seleccionar un elemento de un formulario, redimensionar la ventana
del navegador, etc.
Unidad IV: Eventos en Javascript

Eventos en Javascript
De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su
funcin asociada. Este tipo de funciones se denominan "event handlers"
en ingls y suelen traducirse por "manejadores de eventos".
El nombre de cada evento se construye mediante el prefijo on, seguido

del nombre en ingls de la accin asociada al evento. As, el evento de
pinchar un elemento con el ratn se denomina onclick y el evento
asociado a la accin de mover el ratn se denomina onmousemove.
La siguiente tabla resume los eventos ms importantes definidos

por JavaScript:
Documento con los eventos Javascript

Eventos de Javascript
Eventos Javascript
EJERCICIO EVALUADO (EVENTOS)
Realice un cdigo Javascript...

Manejadores de Eventos
1. Manejadores de Eventos.
Las funciones o cdigo JavaScript que se definen para cada evento se

denominan "manejador de eventos" y como JavaScript es un lenguaje
muy flexible, existen varias formas diferentes de indicar los manejadores:
3 formas de incluir los manejadores
Manejadores como atributos de los elementos XHTML.

Manejadores como funciones JavaScript externas.
Manejadores "semnticos".

a. Manejadores de eventos como atributos XHTML
Se trata del mtodo ms sencillo y a la vez menos profesional de indicar

el cdigo JavaScript que se debe ejecutar cuando se produzca un evento.
En este caso, el cdigo se incluye en un atributo del propio elemento
XHTML. En el siguiente ejemplo, se quiere mostrar un mensaje cuando
el usuario pinche con el ratn sobre un botn:
<input type="button" value="Haz click y vers" onclick="alert

('Gracias por hacer click');" />
<body onload="alert('La pgina se ha cargado completamente');">
...
</body>
b. Manejadores de eventos como funciones externas
La definicin de los manejadores de eventos en los atributos XHTML es el

mtodo ms sencillo pero menos aconsejable de tratar con los eventos en
JavaScript. El principal inconveniente es que se complica en exceso en
cuanto se aaden algunas pocas instrucciones, por lo que solamente es
recomendable para los casos ms sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validacin de un

formulario, es aconsejable agrupar todo el cdigo JavaScript en una
funcin externa y llamar a esta funcin desde el elemento XHTML.

b. Manejadores de eventos como funciones externas
Siguiendo con el ejemplo anterior que muestra un mensaje al hacer click

Sobre un botn:
<input type="button" value="Presiona y vers" onclick="alert
('Gracias por hacer click');" />
Utilizando funciones externas se puede transformar en:

alert('Gracias por hacer click');
}
<input type="button" value="Presiona y vers"

onclick="muestraMensaje()" />
c. Manejadores de eventos semnticos
Los mtodos que se han visto para aadir manejadores de eventos (como
atributos XHTML y como funciones externas) tienen un grave
inconveniente: "ensucian" el cdigo XHTML de la pgina.
Como es conocido, una de las buenas prcticas bsicas en el diseo de

pginas y aplicaciones web es la separacin de los contenidos (XHTML)
y su aspecto o presentacin (CSS). Siempre que sea posible, tambin se
recomienda separar los contenidos (XHTML) y su comportamiento o
programacin (JavaScript).

Mezclar el cdigo JavaScript con los elementos XHTML solamente

contribuye a complicar el cdigo fuente de la pgina, a dificultar la
modificacin y mantenimiento de la pgina y a reducir la semntica
del documento final producido.
Afortunadamente, existe un mtodo alternativo para definir los manejadores

de eventos de JavaScript. Esta tcnica es una evolucin del mtodo de las
funciones externas, ya que se basa en utilizar las propiedades DOM de los
elementos XHTML para asignar todas las funciones externas que actan
de manejadores de eventos. As, el siguiente ejemplo:

<input id="hazclick" type="button" value="Haz click y vers"

onclick="alert('Gracias por hacer click');" />
Se puede transformar en:
// Funcin externa
alert('Gracias por hacer click');
}
// Asignar la funcin externa al elemento

document.getElementById("hazclick").onclick = muestraMensaje;
// Elemento XHTML
<input id="hazclick" type="button" value="Haz click y vers" />
La tcnica de los manejadores semnticos consiste en:

I. Asignar un identificador nico al elemento XHTML mediante el atributo
id.
II. Crear una funcin de JavaScript encargada de manejar el evento.
III. Asignar la funcin externa al evento correspondiente en el elemento
deseado.
El ltimo paso es la clave de esta tcnica. En primer lugar, se obtiene el

elemento al que se desea asociar la funcin externa:
document.getElementById("hazclick");
La gran ventaja de este mtodo es que el cdigo XHTML resultante es

muy "limpio", ya que no se mezcla con el cdigo JavaScript.
Manejadores de eventos y variable this
JavaScript define una variable especial llamada this que se crea

automticamente y que se emplea en algunas tcnicas avanzadas de
programacin. En los eventos, se puede utilizar la variable this para
referirse al elemento XHTML que ha provocado el evento. Esta variable
es muy til para ejemplos como el siguiente:
Elemento <div> original:

<div id="contenidos" style="width:150px; height:60px; border:thin
solid silver">
Seccin de contenidos...
</div>
Si no se utiliza la variable this, el cdigo necesario para modificar el color
de los bordes, sera el siguiente:
<div id="contenidos" style="width:150px; height:60px; border:thin solid

silver" onmouseover="document.getElementById('contenidos').
style.borderColor='black';" onmouseout="
document.getElementById('contenidos').style.borderColor='silver';">
</div>
El cdigo anterior es demasiado largo y demasiado propenso a cometer

errores. Dentro del cdigo de un evento, JavaScript crea automticamente
la variable this, que hace referencia al elemento XHTML que ha
provocado el evento. As, el ejemplo anterior se puede reescribir de la
siguiente manera:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"

onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
</div>

Pasando el elemento como parmetro a la funcin:
<div style="width:150px; height:60px; border:thin

solid silver" onmouseover="resalta(this)"
onmouseout="resalta(this)">
</div>

Pasando el elemento como parmetro a la funcin:

function resalta(elemento) {
switch(elemento.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
elemento.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
elemento.style.borderColor = 'silver';
break;
}
}
Eventos Javascript
EJERCICIO EVALUADO (EVENTOS Y SUS MANEJADORES)
Escribir...

Presentación Javascript 2da

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Presentación Javascript 2da

Загружено:

Авторское право:

Доступные форматы

JAVASCRIPT

1. Funciones tiles para cadenas de texto

length, calcula la longitud de una cadena de texto (el nmero de

substring(inicio, final), extrae una porcin de una cadena

Unidad III: Funciones en Javascript

length, calcula el nmero de elementos de un array

join(separador), es la funcin contraria a split(). Une todos los

pop(), elimina el ltimo elemento del array y lo devuelve. El array original

Unidad III: Funciones en Javascript

shift(), elimina el primer elemento del array y lo devuelve. El array

reverse(), modifica un array colocando sus elementos en el orden

Unidad III: Funciones en Javascript

toFixed(digitos), devuelve el nmero original con tantos decimales

var numero1 = 4564.34567;

Unidad III: Funciones en Javascript

fecha = new Date();//creacin de un objeto de la clase Date

Unidad III: Funciones en Javascript

abs Valor absolut Math.abs(-2) 2

Unidad III: Funciones en Javascript

EJERCICIO EVALUADO (FUNCIONES PREDEFINIDAS Y CLASES)

Unidad III: Funciones en Javascript

Cuando se desarrolla una aplicacin compleja, es muy habitual utilizar una

Las funciones son la solucin a todos estos problemas, tanto en JavaScript

Unidad III: Funciones en Javascript

function <nombre de funcin>(argumento1, argumento2, ..., argumento n)

Las variables que necesitan las funciones se llaman argumentos. Antes de

function suma_y_muestra(primerNumero, segundoNumero) { ... }

function suma_y_muestra(primerNumero, segundoNumero) { ... }

Unidad III: Funciones en Javascript

Reglas sobre los argumentos

El nmero de argumentos que se pasa a una funcin debera ser el mismo

El orden de los argumentos es fundamental, ya que el primer dato que se

Unidad III: Funciones en Javascript

Reglas sobre los argumentos

Se puede utilizar un nmero ilimitado de argumentos, aunque si su nmero

No es obligatorio que coincida el nombre de los argumentos que utiliza la

Unidad III: Funciones en Javascript

Reglas sobre los argumentos

A continuacin se muestra otro ejemplo de una funcin que calcula el precio

Afortunadamente, las funciones no solamente puede recibir variables y

Si la funcin llega a una instruccin de tipo return, se devuelve el valor

Unidad III: Funciones en Javascript

El mbito de una variable (llamado "scope" en ingls) es la zona del

var mensaje = "gana la de fuera";

La estructura de control for es muy sencilla de utilizar, pero tiene el

Las sentencias break y continue permiten manipular el comportamiento

Unidad III: Funciones en Javascript

El siguiente ejemplo muestra el uso de la sentencia break

En ocasiones, lo que se desea es saltarse alguna repeticin del bucle

var cadena = "En un lugar de la Mancha de cuyo nombre

Unidad III: Funciones en Javascript

Unidad III: Funciones en Javascript

EJERCICIO EVALUADO (FUNCIONES DEFINIDAS)

Unidad III: Funciones en Javascript

Unidad IV: Eventos en Javascript

El nombre de cada evento se construye mediante el prefijo on, seguido

La siguiente tabla resume los eventos ms importantes definidos

Documento con los eventos Javascript

Unidad IV: Eventos en Javascript

EJERCICIO EVALUADO (EVENTOS)

Realice un cdigo Javascript...

Unidad IV: Eventos en Javascript

Las funciones o cdigo JavaScript que se definen para cada evento se

3 formas de incluir los manejadores