Bloque Bloque Bloque Bloque Bloque Bloque Bloque

I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final

Bloque Bloque Bloque Bloque Bloque Bloque Bloque

I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final

Bloque I: Introduccin
Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida

Bloque I: Introduccin
Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida

Lenguaje de programacin basado en scripts Caractersticas:

Lenguaje de programacin interpretado Se interpreta en el navegador Lenguaje orientado a eventos Lenguaje orientado a objetos

Programa -> cualquier editor de texto o HTML. (Nosotros vamos a usar Dreamweaver)

Bloque I: Introduccin
Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida

Los programas JavaScript se encuentran dentro de las pginas HTML Entre las etiquetas<script> y </script>
Etiqueta de inicio del programa JavaScript

Etiqueta de final del programa JavaScript

Se pueden incluir mediante un programa .js

Vamos a cargar el cdigo JavaScript de un programa ya creado.

Ejemplo de programa en JavaScript

Bloque I: Introduccin
Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida

Comentarios:

Comentario de una lnea

Comentario varia lneas

Tipo de instrucciones:
Declaracin Inicializacin

Estructuras de control
Entrada y salida

Bloque I: Introduccin
Introduccin a JavaScript JavaScript y HTML Elementos de un programa JavaScript Entrada y salida

Nos permiten visualizar y recibir informacin Se usan con cadenas de caracteres Algunos caracteres importantes son:
Carcter \n \t \r \b Significado Nueva lnea Tabulador Retorno de carro Retroceso de un espacio

Document.write()

Alert()

Prompt()

Bloque Bloque Bloque Bloque Bloque Bloque Bloque

I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final

Bloque II: Elementos Bsicos

Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones

Bloque II: Elementos Bsicos

Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones

Variables:

Operadores:
Expresiones:

Sentencias:

Funciones:

Bloque II: Elementos Bsicos

Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones

Creacin de la variable:
Palabra reservada var No iniciarse por nmero No coincidir con palabras reservadas

Almacenamiento informacin en la variable:

Se puede almacenar cualquier tipo de informacin Se usa el operador de asignacin

Si introducimos informacin en una variable no inicializada, se inicializa automticamente, pero no es una prctica aconsejada

Consulta o utilizacin de un valor

Se puede hacer referencia al contenido
Incremento de un contador

Concatenacin de cadenas

Operacin con variables

Bloque II: Elementos Bsicos

Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones

Nmeros:
Cualquier formato de los habituales
Formato decimal Formato hexadecimal Formato octal

Cadenas:
Cadenas de caracteres.

Booleanos:
Valores lgicos

Objetos:
Contienen propiedades y mtodos

Nulo (Null):
Su utilidad es saber si hemos iniciado o no una variable.

Bloque II: Elementos Bsicos

Elementos bsicos Variables e identificadores Tipos de datos Operadores y expresiones

 Binarios: Operador
= += -=

Descripcin

Asigna el valor del operando de la derecha al operando de la izquierda Suma el operando de la derecha al de la izquierda y se lo asigna a la variable de la izquierda Resta el operando de la derecha al de la izquierda y se lo asigna a la variable de la izquierda Multiplica el operando de la derecha al de la izquierda y se lo asigna a la variable de la izquierda Divide el operando de la izquierda entre el de la derecha y se lo asigna a la variable de la izquierda Divide el operando de la izquierda entre el de la derecha y el valor del resto se lo asigna a la variable de la izquierda

*=

/=

%=


++x x++ -=

Unarios:
Operador Descripcin
Incrementa x en una unidad y devuelve el valor Devuelve el valor de x y lo deja incrementado en una unidad Resta el operando de la derecha al de la izquierda y se lo asigna a la variable de la izquierda Devuelve x negado

-x

&& || !

Lgicos:
Operador
Y lgico O lgico No lgico

Descripcin


== != >

Comparacin:
Descripcin
Devuelve verdadero si los dos operandos son iguales Devuelve verdadero si los dos operandos no son iguales Devuelve verdadero si el primer operando es mayor que el segundo

Operador

<

Devuelve verdadero si el primer operando es menor que el segundo

>=

Devuelve verdadero si el primer operando es mayor o igual que el segundo

<=

Devuelve verdadero si el primero operando es menor o igual que el segundo

Resumen:

Concatenacin: Se usa para unir cadenas de caracteres Aritmticos: Se usa con datos numricos Asignacin: Asigna un determinado valor a una variable

Comparacin: Compara dos valores

Lgicos: Se utiliza cuando es necesario unir dos expresiones


1
2

Orden de evaluacin de las expresiones:

Operador Operacin

Prioridad

++,--,-,!
*,/,%

Incremento, decremento, cambio de signo y negacin

Multiplicacin, divisin, mdulo

3
4 5 6 7 8

+,<,>,<=,>= ==, != && || =,+=,-=,*=,/=,%=

Suma, resta
Mayor, menor, mayor o igual, menor o igual Igual, distinto Conjuncin Inclusin Asignacin, asignacin y suma, etc

Orden de evaluacin de las expresiones:

Calcula primero la divisin 1/numero2 y luego le suma numero1
Realiza primero la divisin y luego incrementa el valor de la variable numero2

Compara el valor de la variable numero2 con a numero 1 incrementada en 1

Bloque Bloque Bloque Bloque Bloque Bloque Bloque

I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Simplificado: Alternativa Alternativa simple:

Si cumple una condicin se ejecuta un cdigo

 Ejemplo de uso

Alternativa Doble:
Si cumple una condicin se ejecuta un cdigo, en caso contrario, otro cdigo

 Ejemplo de uso

Prueba de condicin (?):

Forma compacta de condicin doble

Ejemplo de uso

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Es una alternativa ms compleja

Ejemplo de uso

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Forma parte de las estructuras de control

Ejemplo de uso

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Es parecido al While, pero primero se ejecuta el bucle y luego se comprueba la condicin

Ejemplo de uso

Estructura repetitiva por excelencia

Variable interna controla el bucle

que

Condicin que determina si se sigue ejecutando el bucle

Valor que toma la variable de control inicialmente

Expresin que variar el valor de la variable de control

Ejemplo de uso

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Simplificacin del bucle for, aplicado a arrays

Variable de control

Es donde se encuentran los elementos

Ejemplo de uso

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Estructura que permite guardar ms de un elemento

Simplifica muchos aspectos a la hora de programar

 Creacin de un array:

Indicador que hace referencia al array

Nmero de elementos que contendr el array

Manipulacin de un array:
Se trabaja igual que si fuese una variable Operador asignacin Visualizacin

 Se puede acceder mediante variables

Recorrido de un array:
Se suele combinar con estructuras de control

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Viene predefinido por el lenguaje

Propiedades del objeto
length Nmero de elementos del array

Mtodos
concat() join() Une dos arrays y devuelve el resultado en un array Devuelve la cadena de texto que contiene la unin de los elementos de un array

pop()
push() reverse() shift() slice()

Devuelve y borra el ltimo elemento

Devuelve y aade un elemento Refleja el contenido Devuelve y borra el primero elemento Extrae una seccin del array y la devuelve como una nuevo

splice() sort()

Aade y/o elimina elementos Ordena los elementos

toString()
unshift()

Devuelve la cadena que representa

Aade uno o ms elementos al inicio y devuelve el nmero de elementos actualizado

Ejemplo:

Bloque III: Estructuras de control

If Switch While DoWhile For For in Arrays El objeto Array Ejemplo completo

Ejemplo del uso de bucles y arrays

Bloque Bloque Bloque Bloque Bloque Bloque Bloque

I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final

Bloque IV: Funciones

Qu es una funcin? Llamada a una funcin Argumentos Cmo utilizar funciones? Funciones predefinidas Ejemplo global

Bloque IV: Funciones

Qu es una funcin? Llamada a una funcin Argumentos Cmo utilizar funciones? Funciones predefinidas Ejemplo global

Permiten la ejecucin de una serie de instrucciones cuando se produzca un evento Conjunto de instrucciones a las que se le asignan un nombre

Nombre que se le asigna la funcin

Parmetros que acepta la funcin

Cdigo de la funcin

Valor que devolvemos, es opcional

Las funciones se declaran en cualquier parte de la pgina HTML

Deben de estar entre etiquetas <SCRIPT> </SCRIPT> Normalmente se define dentro de la cabecera

Bloque IV: Funciones

Qu es una funcin? Llamada a una funcin Argumentos Cmo utilizar funciones? Funciones predefinidas Ejemplo global

Las funciones se pueden llamar desde cualquier parte del cdigo

Si una funcin retorna un valor, se debe de asignar a una variable

Funciones recursivas
Es aquella que se llama a s misma

Clculo del factorial de un nmero de forma recursiva

Bloque IV: Funciones

Qu es una funcin? Llamada a una funcin Argumentos Cmo utilizar funciones? Funciones predefinidas Ejemplo global

Variables locales Reciben unos valores diferentes dependiendo de la invocacin Se usan para interactuar con la funcin desde el programa

Bloque IV: Funciones

Qu es una funcin? Llamada a una funcin Argumentos Cmo utilizar funciones? Funciones predefinidas Ejemplo global

Cosas a tener en cuenta:

Entre etiquetas <SCRIPT> </SCRIPT> La clusula return facilita la devolucin de resultados por parte de las funciones Los parmetros que no se le pasen quedan a valor

null

Puede ser conveniente comprobar el nmero de parmetros

mbito de las variables

Variables locales:
Se declaran dentro de la funcin Solo son accesibles desde ella

Variables globales:
Se declaran fuera de la funcin Son accesibles desde todo el programa

Bloque IV: Funciones

Qu es una funcin? Llamada a una funcin Argumentos Cmo utilizar funciones? Funciones predefinidas Ejemplo global

Funciones internar al lenguaje.

parseFloat(cadena) parseInt(cadena, base) toString(argumento) typeof(argumento) escape(cadena) unescape(cadena) isNaN(argumento) eval(expresion)

Bloque IV: Funciones

Qu es una funcin? Llamada a una funcin Argumentos Cmo utilizar funciones? Funciones predefinidas Ejemplo global

Ejemplo del uso de funciones con lo aprendido anteriormente

Bloque Bloque Bloque Bloque Bloque Bloque Bloque

I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final

Bloque V: Objetos
Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados

Bloque V: Objetos
Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados

Objeto es un concepto o vista abstracta de una entidad

Posee caractersticas que lo definen y propiedades Realizan muchas acciones

Tipos de objetos:
Objetos navegador Objetos predefinidos Objetos creados por el usuario

Formas de hacer referencia:

Nombre:

Posicin:

Objeto actual:

Bloque V: Objetos
Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados

Objeto window
Representa la ventana del navegador
Propiedades closed, defalutStattus, frames, history, length, location, name, parent, opener, self, status, top Mtodos alert(mensajes), open(), close(), confirm(mensaje), prompt(), moveBy(x,y), moveTo(x,y), print(), setTimeout(), resizeBy(x,y), resizeTo(ancho,alto), scroll(x,y), scrollBy(x,y), scrollTo(x,y), clearInterval(), setInterval(), setTimeout()

Objeto window
Representa la ventana del navegador
Propiedades closed, defalutStattus, frames, history, length, location, name, parent, opener, self, status, top Mtodos alert(mensajes), open(), close(), confirm(mensaje), prompt(), moveBy(x,y), moveTo(x,y), print(), setTimeout(), resizeBy(x,y), resizeTo(ancho,alto), scroll(x,y), scrollBy(x,y), scrollTo(x,y), clearInterval(), setInterval(), setTimeout()

Objeto window
Representa la ventana del navegador
Propiedades closed, defalutStattus, frames, history, length, location, name, parent, opener, self, status, top Mtodos alert(mensajes), open(), close(), confirm(mensaje), prompt(), moveBy(x,y), moveTo(x,y), print(), setTimeout(), resizeBy(x,y), resizeTo(ancho,alto), scroll(x,y), scrollBy(x,y), scrollTo(x,y), clearInterval(), setInterval(), setTimeout()

Objeto window
Representa la ventana del navegador

Open(URL, nombre, caractersticas): Abre la url que le pasamos como primer parmetro en la ventana cuyo nombre se indica en el segundo parmetro. Si no Propiedades Mtodos existe esa ventana, abre otra nueva con las caractersticas que se le pasen por parmetro: closed, defalutStattus, alert(mensajes), open(),
Caractersticas tollbar Location Directories Status Menubar Scrollbars Resizable Width Height Left Top

frames,Valores history, length, close(), confirm(mensaje), Nos indica Yes, no, 1, 0 Si tendr herramientas location, name, parent, barra deprompt(), moveBy(x,y), Si top opener,Yes, no, 1, status,tendr campo de localizacin self, 0 moveTo(x,y), print(), Yes, no, 1, 0 Si tendr botones de direcciones setTimeout(), Yes, no, 1, 0 Si tendr barra de estado resizeBy(x,y), Yes, no, 1, 0 Si tendr barra de mens Yes, no, 1,0 Si tendr barra deresizeTo(ancho,alto), desplazamiento Yes, no, 1, 0 Si se podr cambiar de tamao con el scrollBy(x,y), scroll(x,y), ratn scrollTo(x,y), N pixels Ancho de la ventana N pixels Alto de la ventanaclearInterval(), N pixels Distancia a la izquierda setInterval(), setTimeout()
N pixels Distancia hacia arriba

Objeto window
Representa la ventana del navegador
Propiedades closed, defalutStattus, frames, history, length, location, name, parent, opener, self, status, top Mtodos alert(mensajes), open(), close(), confirm(mensaje), prompt(), moveBy(x,y), moveTo(x,y), print(), setTimeout(), resizeBy(x,y), resizeTo(ancho,alto), scroll(x,y), scrollBy(x,y), scrollTo(x,y), clearInterval(), setInterval(), setTimeout()

Objeto window

Objeto frame
Se comporta igual que el objeto window
Propiedades defalutStattus window frames self Status top Mtodos alert(), confirm(mensaje), clearInterval(), setInterval(), clearTimeout(), setTimeout(), focus(), blur(), moveBy(x,y), moveTo(x,y), open(), close(), prompt(), scroll(x,y)

Objeto frame

Objeto location
Informacin sobre la url actual
Propiedades hash host hostname href pathname port protocol search Mtodos reload() replace(cadenaURL)

Objeto location
Informacin sobre la url actual
Propiedades hash host hostname href pathname port protocol search Mtodos reload() replace(cadenaURL)

Objeto location
Informacin sobre la url actual
Propiedades hash host hostname href pathname port protocol search Mtodos reload() replace(cadenaURL)

Objeto location

Objeto history
Informacin sobre las url vistadas
Propiedades
length

Mtodos
back() forward() go(url)

Objeto history
Informacin sobre las url vistadas
Propiedades
length

Mtodos
back() forward() go(url)

Objeto history
Informacin sobre las url vistadas
Propiedades
length

Mtodos
back() forward() go(url)

Objeto history

Objeto navigator
No tiene relacin con el resto de los objetos Informa sobre el navegador
Propiedades appCodeName appName appVersion lenguage mimeTypes platform plugins userAgent Mtodos javaEnabled()

Objeto navigator
No tiene relacin con el resto de los objetos Informa sobre el navegador
Propiedades appCodeName appName appVersion lenguage mimeTypes platform plugins userAgent Mtodos javaEnabled()

Objeto navigator

Bloque V: Objetos
Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados

Abarca gran parte del modelo de objetos

Propiedades alinkColor anchors applets bgColor Cookie fgColor forms Images lastModified linkColor links location referrer title vlinkColor clear() open() close() write() writeln() Mtodos

Abarca gran parte del modelo de objetos

Propiedades alinkColor anchors applets bgColor Cookie fgColor forms Images lastModified linkColor links location referrer title vlinkColor clear() open() close() write() writeln() Mtodos

Abarca gran parte del modelo de objetos

Propiedades alinkColor anchors applets bgColor Cookie fgColor forms Images lastModified linkColor links location referrer title vlinkColor clear() open() close() write() writeln() Mtodos

Los objetos link y Anchor

El objeto link engloba las propiedades de los enlaces externos, y el anchor la de los enlaces locales
Propiedades Length Mtodos

Los objetos link y Anchor

El objeto link engloba las propiedades de los enlaces externos, y el anchor la de los enlaces locales
Propiedades Length Mtodos

El objeto Image
Permite manipular imgenes
Propiedades border complete height hspace lowsrc name src vspace width Mtodos

El objeto Image
Permite manipular imgenes
Propiedades border complete height hspace lowsrc name src vspace width Mtodos

El objeto Form
Permite manipular formulario
Propiedades action elemnts encoding length method target reset() submit() Mtodos

El objeto Form
Permite manipular formulario
Propiedades action elemnts encoding length method target reset() submit() Mtodos

El objeto Form
Permite manipular formulario
Propiedades action elemnts encoding length method target reset() submit() Mtodos

El objeto Form
Casi la totalidad de etiquetas HTML se pueden definir como elementos del formulario
Etiqueta HTML <INPUT type=text> <TEXTAREA> <INPUT type=password> <INPUT type=button> <INPUT type=submit> <INPUT type=reset> <INPUT type=checkbox> <INPUT type=radio> <SELECT> <INPUT type=hidden> Objeto JavaScript text textarea password button submit reset checkbox radio select hidden

El objeto Form
Objetos text, textarea, password
Obtener el texto introducido por el usuario
Propiedades defaultValue name value blur() focus() select() Mtodos

El objeto Form
Objetos text, textarea, password
Obtener el texto introducido por el usuario
Propiedades defaultValue name value blur() focus() select() Mtodos

El objeto Form
Objetos text, textarea, password
Obtener el texto introducido por el usuario
Propiedades defaultValue name value blur() focus() select() Mtodos

El objeto Form
Objetos button, reset, submit
Botones
Propiedades Mtodos

name value

click()

El objeto Form
Objetos button, reset, submit
Botones
Propiedades Mtodos

name value

click()

El objeto Form
Objetos button, reset, submit
Botones
Propiedades Mtodos

name value

click()

El objeto Form
Objetos checkbox
Casillas de verificacin
Propiedades Mtodos

checked defaultChecked name value

click()

El objeto Form
Objetos checkbox
Casillas de verificacin
Propiedades Mtodos

checked defaultChecked name value

click()

El objeto Form
Objetos checkbox
Casillas de verificacin
Propiedades Mtodos

checked defaultChecked name value

click()

El objeto Form
Objetos radio
Elegir una posibilidad en una lista
Propiedades checked defaultChecked length name value click() Mtodos

El objeto Form
Objetos radio
Elegir una posibilidad en una lista
Propiedades checked defaultChecked length name value click() Mtodos

El objeto Form
Objetos radio
Elegir una posibilidad en una lista
Propiedades checked defaultChecked length name value click() Mtodos

El objeto Form
Objetos select
Representa una lista de opciones dentro de un formulario
Propiedades Length Name Options selectedIndex Options[n].index Options[n].selected Options[n].text Options[n].value Mtodos

El objeto Form
Objetos select
Representa una lista de opciones dentro de un formulario
Propiedades Length Name Options selectedIndex Options[n].index Options[n].selected Options[n].text Options[n].value Mtodos

El objeto Form
Objetos hidden
Cadenas de caracteres no visibles
Propiedades name value Mtodos

El objeto Form
Objetos hidden
Cadenas de caracteres no visibles
Propiedades name value Mtodos

El objeto Document

El objeto Document

Bloque V: Objetos
Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados

Objeto propio de JavaScript Nos permite manipular cadenas de caracteres Propiedades: Mtodos:
length prototype

big() blink() bold() charAt(indice) concat(cadena) fixed() fontcolor(color) fontsize(tamao) indexOf(cadenaBuscada,indice)

italics() lastIndexOf(cadenaBuscada, indice) link(url) small() split(carcter) strike() slice(inicio, fin) sub() substr(numeroCaracteres, inicio) substring(inicio, fin) sup() toLowerCase() toUpperCase()

Ejemplo

Bloque V: Objetos
Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados

Nos permite realizar clculos en el script Propiedades: (constantes de inters)

Math.E Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.PI Math.SQRT1_2 Math.SQRT2

Mtodos:
Math.sqrt(N) Math.pow(N1,N2) Math.abs(N) Math.round(N) Math.ceil(N) Math.floor(N) Math.random() Math.max(N1,N2) Math.min(N1,N2)

Ejemplo

Bloque V: Objetos
Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados

Nos permite manipular fechas y horas Creacin:

Mtodos:

objetoFecha.getTime() objetoFecha.getDate() objetoFecha.getDay() objetoFecha.getHours() objetoFecha.getMonth() objetoFecha.getSeconds()

objetoFecha.getYear() objetoFecha.setDate(dia) objetoFecha.setDay(diaDeLaSemana) objetoFecha.setHours(horas) objetoFecha.setMinutes(minutos) objetoFecha.setMonth(mes) objetoFecha.setSeconds(segundos) objetoFecha.setTime(milisegundos) objetoFecha.setYear(ao) objetoFecha.tcGMTString() objetoFecha.tcLocaleString()

Ejemplo

Bloque V: Objetos
Definicin El objeto navegador El objeto documento El objeto string El objeto math El objeto date Objetos personalizados

JavaScript nos permite crear nuestros propios objetos

Los mtodos se declaran fuera de la funcin

Bloque Bloque Bloque Bloque Bloque Bloque Bloque

I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final

Bloque VI: Eventos

Definicin Eventos ms comunes Ejemplo de uso

Bloque VI: Eventos

Definicin Eventos ms comunes Ejemplo de uso

Son las acciones que el usuario realiza al visitar una web.

Elemento Accin
Clic Clic Clic Situar el puntero Clic Tabulador/Clic Tabulador/Clic para cambio Deseleccin Click Click Click MouseOver Click Focus Blur Change Focus

Evento
onClick onClick onClick

Manejador

Botn Casilla Enlace Botn opcion Seleccin

onMouseOver onClick onFocus onBlur onChange onFocus

Campo texto

Tabulador/Clic

Tabulador/Clic para cambio

Deseleccin Seleccin texto

Blur
Change Select

onBlur
onChange onSelect

Bloque VI: Eventos

Definicin Eventos ms comunes Ejemplo de uso

Eventos de ratn:
Evento
onmousedown onmousemove onmouseover onmouseout onmouseup onclick ondbloclick onselect

Causa
Se ha presionado el ratn Se ha movido el ratn Se pasa el puntero por una determinada zona El puntero del ratn sale de una zona Se ha levantado el botn izquierdo del ratn Se pulsa el botn izquierdo Se ha realizado una doble pulsacin Se realiza una seleccin

Eventos de teclado:
Evento
onkeydown onkeypress onkeyup

Causa
bajada de tecla correspondiente a una pulsacin El usuario pulsa una tecla Subida de tecla correspondiente a una pulsacin

Eventos de enfoque:
Evento
onblur onfocus

Causa
El objeto pierde el foco de entrada El objeto recibe el foco

Eventos de formulario:
Evento
onreset

Causa
El usuario inicializa un formulario

onsubmit

El formulario est a punto de enviarse

Eventos de carga de pgina:

Evento
onload onunload

Causa
El navegador ha cargado la pgina El objeto se ha descargado

Otros eventos:
Evento
onAbort onChange onDragDrop

Causa
El usuario cancela la carga de una imagen El contenido de un objeto o seleccin ha cambiado Se dispara continuamente en el objeto fuente durante la operacin de arrastre Se produce un error en la carga de un objeto Se mueve la ventana Se redimensiona la ventana

onError onMove onResize

Bloque VI: Eventos

Definicin Eventos ms comunes Ejemplo de uso

Bloque Bloque Bloque Bloque Bloque Bloque Bloque

I: Introduccin II: Elementos Bsicos III: Estructuras de control IV: Funciones V: Objetos VI: Eventos VII: Ejercicio final