Javascript

OBJETOS, FUNCIONES Y MÉTODOS

LOS OBJETOS

Un objeto es una agrupación de variables denominada

propiedades que realizan operaciones con las variables
propias del mismo, es decir, un conjunto de datos
definido por el usuario junto con las operaciones que
actúan sobre ellos.
En JavaScript podemos crear nuestros propios objetos
o utilizar los implementados por el lenguaje.
 Javascript
Propiedades de un objeto

Un objeto en JavaScript tiene una serie de propiedades

asociadas a él. Para acceder a dichas propiedades
utilizaremos la notación del punto.
objeto.propiedad
Ejemplo
mipc.marca = “GigaByte”;
mipc.cpu = “AMD QUAD CORE 2.3 GHZ”;
mipc.memoria = “DDR2 800 CORSAIR DUAL”;
 Javascript
LAS FUNCIONES

Es un conjunto de sentencias JavaScript que realian

alguna tarea específica. Las partes que define una
función son:
 El nombre de la función
 La lista de argumentos de la función, encerrados
entre paréntesis y separado por comas (“,”)
 Las sentencias en JS que definen la función,
encerradas entre laves (“{ }”).
 Javascript
Una función puede incluir llamadas a otras funciones
definidas en la aplicación, pero únicamente de la página
actual.
La sintaxis de definición de una función sería:
Function nombreFuncion(parametro1, parametro2,…)
{
instrucciones
}
Javascript
 Javascript
Para que una función devuelva el resultado de una serie de operaciones
procedentes de la misma función, utilizaremos la instrucción return.
 Javascript
Argumentos de la función
Los argumentos de una función permiten que el
resultado varíe según el valor indicado en la misma.
Los argumentos pueden ser variables, números u
objetos.
Javascript
Javascript
 Javascript

Se llama evento a un suceso que ocurre en el sistema

cuando u usuario ejecuta algún tipo de acción. Un
evento debe asociarse a un elemento HTML, no a un
código JavaScript.
EVENTOS DE JAVASCRIPT
 El OBJETO event
Los eventos sólo permiten detectar el suceso sin
aportar más información. Por ejemplo, cuando se pulsa
un botón del ratón, se produce un evento onclick, sin
poder determinar si se ha pulsado el botón izquierdo o
derecho del ratón.
 Javascript

El objeto event permite obtener y gestionar eventos en

los que es necesaria una mayor información.
Vamos a relacionar a continuación algunas de sus
propiedades.
 keyCode. Propiedad que muestra en formato ASCII
el valor de la tecla presionada. Puede ser modificado
para enviar un carácter.
 altKey. Devuelve el estado de la tecla ALT. Puede
ser true o false.
 Javascript

 ctrlKey. Devuelve el estado de la tecla CTRL. Puede

ser true o false.
 shiftKey. Muestra el estado de la tecla SHIFT.
Puede ser true o false.
 button. Permite conocer que botón del ratón se ha
pulsado:
 0 NO se ha pulsado el botón
 1 Sólo se ha pulsado el botón izquierdo del ratón.
 2 Sólo se ha pulsado el botón derecho del ratón.
 3 Se pulsaron ambos botones del ratón
 Javascript

 cancelBubble. Se utiliza para cancelar un posible

efecto burbuja (rellamada) de un evento, es decir,
evita que un evento se repita mientras se está
esperando respuesta al mismo.
 fromElement. Devuelve el nombre del último
elemento sobre el que ha pasado el cursor del ratón,
es decir, detecta el elemento que ha perdido el foco
en un evento onMouseover y onMouseout.
 returnvalue. Determina el valor que deberá devolver
un evento.
 Javascript

 srcElement. Propiedad que contiene el elemento

que recibe por primera vez el suceso.
 toElement. Esta propiedad es similar a fromElement
pero en este caso, hace referencia al objeto que
recibe el foco ante un evento onMouseOver y
onMouseOut.
 x e y. Posición horizontal y vertical del puntero del
ratón en píxeles desde el borde del documento.
 screenX y screenY. Devuelve la coordenada X o Y
del puntero del ratón en relación con la pantalla.
 Javascript

 clientX y clientY. Devuelve las coordenadas X o Y

de un elemento.
Ejemplo:
Javascript
 Javascript

 LOS EVENTO onclick y ondblclick

Sin lugar a dudas, éste es uno de los eventos más
conocidos de Javascript, y se produce cuando el usuario
efectúa un clic (onclick) o un doble clic (ondblclick)
con algún botón del ratón sobre algún elemento de un
documento.
Ejemplo de aplicación:
<input type=“tipo de elemento” onClick=“función” />
 Javascript

El tipo de elemento puede ser un botón, una caja de

comprobación o un botón de reset por ejemplo, mientras
que la función es la instrucción o instrucciones a
procesar cuando se produzca el evento.
Javascript
 Javascript

LOS EVENTOS onmouseover Y onmouseout

El evento onmouseover sucede cada vez que el cursor
del ratón pasa por encima de un elemento de la página,
mientras que el evento onmouseout sucede cuando se
deja de seleccionar dicho elemento.
La sintaxis para los respectivos eventos es la siguiente:
<a href=“url” onmouseover=“función”>Enlace</a>
<a href=“url” onmouseout=“función”>Enlace</a>
Javascript
 Javascript

LOS EVENTOS onload Y onunload

El evento onload es aquel que se produce cuando un
navegador carga un documento XHTML o una imagen.
Este evento se utiliza dentro de la etiqueta <body> del
documento XHTML o dentro de la etiqueta <frameset>
en el supuesto de estar trabajando con frames.
Su sintaxis para cada uno de las opciones será la
siguiente:
<body onload=“script a ejecutar”>
<frameset onload=“script a ejecutar”>
 Javascript

LOS EVENTOS onload Y onunload

El evento onunload es el evento opuesto a onload. Su
misión consiste en ejecutar un script cuando la página
web actual se descarga, ya sea porque se accede a otra
web o bien porque se utiliza los botones de avanzar y
retroceder.
La sintaxis es similar a la vista anteriormente:
<body onunload=“script a ejecutar”>
<frameset onunload=“script a ejecutar”>
Javascript
 Javascript

EL EVENTOS onchange
El evento onchange se produce cuando un elemento
select, text o textarea de un formulario pierde el focus y
además su valor ha sido modificado.
Para que el evento funcione el usuario tiene que cambiar
de elemento en el formulario, es decir, si estamos
introduciendo datos en una casilla de texto, el evento
onchange no se activará hasta que no pasemos a otra
casilla. Su sintaxis es la siguiente:
<input type=“tipo de elemento” onchange=“función”/>
Javascript
 Javascript

EL EVENTO onsubmit
Este evento se encarga d ejecutar un determinado código
JS al realizarse el envío de un formulario.
El ejemplo más claro de utilización de este evento es
evitar que un formulario sea enviado si determinadas
condiciones no son cumplidas.
Javascript
Javascript
 Javascript

Los Eventos onfocus y onblur

El evento onfocus detecta la entrada en un elemento de
un formulario, por ejemplo un text, textarea o window,
mientras que onblur actúa de manera contraria, es decir,
detecta la pérdida del focus.
La sintaxis es la siguiente:
<input type=“tipo de entrada” onfocus=“función”/>

<input type=“tipo de entrada” onblur=“función”/>

Javascript
 Javascript

El EVENTO onselect
Este evento hace que se ejecute un script cuando se
selecciona texto dentro de un elemento de un formulario,
ya sea una casilla de texto o de área de texto.
La sintaxis es la siguiente:
<input type=“tipo de elemento” onselect=“función”/>
Javascript
 Javascript

El EVENTO onreset
El evento onreset se produce cuando se pulsa un botón
de Reset en un formulario.
La sintaxis es la siguiente:
<input type=“reset” onreset=“función”/>

Este evento puede servir, por ejemplo, para advertir al usuario

antes de efectuar un reset del formulario.
Javascript
 Javascript

LOS EVENTOS onkeydown, onkeyup Y onkeypress

onkeydown. Se ejecuta cuando se pulsa una tecla.
onkeyup. Se ejecuta cundo se deja de pulsar una tecla.
onkeypress. Se ejecuta cuando se mantiene pulsada una
tecla.
Javascript
 Javascript
EVENTOS onmousedown, onmousemove onmouseup
Estos eventos permiten detectar la utilización del ratón,
se utiliza principalmente en movimiento de capas en
HTML dinámico.
onmousedown. Evento que se genera cuando el usuario
pulsa un botón del ratón.
onmousemove. Evento que se genera cuando el usuario
mueve el cursor del ratón.
onmouseup. Evento que se genera cuando deja de
pulsarse un botón del ratón.
Estos eventos pertenecen a los objetos botton,
document y link
Javascript
Javascript
 Javascript
Los EVENTOS onmove y onresize
El evento onmove se genera cuando el usuario mueve
una ventana o frame de la pantalla principal del
navegador.
Cuando un usuario modifica el tamaño de la ventana o del
frame actual, se genera un evento onresize
Estos eventos están incorporados en los objetos window y
frame.
<body onresize=“alert(‘La ventana está siendo
redimensionada’),”>
 Javascript
El EVENTOS onerror
La utilización de este evento permite capturar errores de
carga de un documento o imagen. El resto de errores no
son tratados por este evento.
Por ejemplo, podemos conseguir que JavaScript muestre
una ventana de alerta en caso de que una imagen no
exista o esté mal referenciada.

<img src=“imágenes/noestoy.jpg” onerror=“alert(‘La imagen ‘ +

src + ‘ no se ha localizado’) width=“50” height=“50” />
Javascript