Modelo de objetos y eventos en JavaScript

1
Modelo de objetos y eventos en JavaScript
2
Modelo de Objetos JavaScript

• Objetos
• Propiedades Atributos que determinan el estado
  del objeto
• Métodos Funciones que puede realizar
• Objeto.propiedad / Objeto.metodo()
• Ejemplos
• Button Propiedades value, name. Método click
• Document document.write

3
Modelo de Objetos JavaScript

• JavaScript tiene objetos preconstruidos, con
  propiedades, métodos y que responden a eventos
• Jerarquía basada en contenedores
  (contenedor-contenido)
• Dos grupos de objetos
• Objetos del navegador
• Objetos del lenguaje

4
OBJETOS DEL NAVEGADOR
5
OBJETOS DEL NAVEGADOR
6
Notación

• window.document.miformulario.areatexto
• Se puede ignorar la referencia a la ventana
  actual
• Notación arreglo
• Document.forms0.elements0

7
El objeto Window

• Propiedades
• closed
• defaultStatus
• frames
• history
• length
• name
• opener
• parent
• self
• status
• top
• window

8
El objeto Window

• Métodos
• alert(mensaje)
• blur
• clearInterval(id)
• clearTimeout(nombre)
• close()
• confirm(mensaje)
• eval()
• focus()
• moveBy(x,y)
• moveTo(x,y)
• open(url,nombre caracteristicas))

• prompt(mensaje, respuesta)
• resizeBy(x,y)
• resizeTo(ancho, alto)
• scroll(x,y)
• srcollBy(x,y)
• scrollTo(x,y)
• setInterval(expr, tiempo)
• setTimeout(expr, tiempo)
• toString()
• valueOf()

9
El objeto Window

• Características del método open
• toolbar yes,no,1,0
• location yes,no,1,0
• directories yes,no,1,0
• status yes,no,1,0
• menubar yes,no,1,0
• scrollbars yes,no,1,0
• resizabel yes,no,1,0
• width pixels
• height pixels
• VER 058.HTM

10
El objeto Frame

• Propiedades
• frames
• parent
• self
• top
• window

11
El objeto Frame

• Métodos
• alert(mensaje)
• blur
• clearInterva(id)
• clearTimeout(nombre)
• close()
• confirm(mensaje)
• eval()
• focus()
• moveBy(x,y)
• moveTo(x,y)
• open(url,nombre caracteristicas))

• prompt(mensaje, respuesta)
• scroll(x,y)
• srcollBy(x,y)
• scrollTo(x,y)
• setInterval(expr, tiempo)
• setTimeout(expr, tiempo)
• toString()
• valueOf()
• VER 061.HTM

12
El objeto Location

• Encapsula la URL de la página actual
• Propiedades
• hash, host, hostname, href, pathname, port,
  protocol
• Métodos
• eval(), reload(), replace(), replace(cadenaURL),
  toString(), valueOf()

13
El objeto History

• Almacena los sitios por los que se ha estado
  navegando
• Propiedades
• current, next, length, previous
• Métodos
• back(), eval(), forward(), go(posicion),
  toString(), valueOf()

14
El objeto Navigator

• Encapsula información sobre el navegador
• Propiedades
• appCodeName, appName, mimeType, plugins,
  userAgent
• Métodos
• eval(), javaEnabled(), taintEnable(), toString(),
  valueOf()
• Ver 065.html

15
El objeto Document

• Propiedades
• alinkColor, anchors, applets, bgColor, cookie,
  domain, embeds, fgColor, forms, images,
  lastModified, linkColor, links, location,
  referrer, title, vlinkColor
• Métodos
• clear(), close(), eval(), open(mime, replace),
  toString(), valueOf(), write(), writeln()

16
El objeto Link

• Permite realizar enlaces externos al documento
  actual
• Propiedades
• target, hash, host, hostname, href,pathname,
  port, protocol, search
• Métodos
• eval(), toString(), valueOf

17
El objeto Anchor

• Permite definir enlaces internos
• Propiedades
• href, target
• Métodos
• eval(), valueOf()

18
El objeto Image

• Propiedades
• boder, complete, heigtht, hspace, lowsrc, name,
  prototype, scr, vspace, width
• Métodos
• eval() , toString(), valueOf()

19
El objeto Form

• Propiedades
• action, elements, encoding, method, target
• Métodos
• eval(). reset(), submit(), toString(), valueOf()

20
Los objetos Text y Textarea

• Propiedades
• defaultValue, name, value
• Métodos
• blur(), eval(), focus(), select(), toString(),
  valueOf()
• Ver 072,html

21
Los objetos Button (Submit, Reset y Button)

• Propiedades
• name, value
• Métodos
• click(), eval(), toString(), valueOf()
• Ver 074.html

22
El objeto Checkbox

• Propiedades
• checked, defaultChecked, name, value
• Métodos
• click(), eval(), toString(), valueOf()
• Ver 076.html

23
El objeto Radio

• Propiedades
• checked, defaultChecked, length, name, value
• Métodos
• click(), eval(), toString(), valueOf()
• Ver 078.html

24
El objeto Select

• Propiedades
• length, name, options, selectedIndex
• Propiedades de optionsi
• defaultSelected, index, length, options,
  selected, selectedIndex, text, value
• Métodos
• eval(), toString(), valueOf()
• Ver 081.html

25
El objeto Password

• Propiedades
• defaultValue, name, value
• Métodos
• blur(), eval(), focus(), select(), toString(),
  valueOf()
• Ver 083.html

26
El objeto Hidden

• Propiedades
• name, value
• Métodos
• eval(), toString(), valueOf()

27
OBJETOS DEL LENGUAJE

• String
• Array
• Boolean
• Number
• Function
• Math
• Date

28
El objeto String

• Propiedades
• length
• Métodos
• anchor(nombre), big(), blink(), charAt(index),
  eval(), fixed(), fontColor(color),
  fontSize(tamaño), indexOf(cadena_buscada,
  indice), italics(), lastIndexOf(cadena_buscada,
  indice), link(url), small(), split(separador),
  strike(), sub(), substring(primeroindice,
  segundoindice), sup(), toLowerCase(), toString(),
  toUpperCase(), valueOf()
• Ver 087.html

29
El objeto Array

• NuevoArreglo new Array(15)
• Propiedades
• length
• Métodos
• join(separador), reverse(), sort(), eval,
  toString, valueOf()
• Ver 090.html, 092.html

30
El objeto Math

• Propiedades
• E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT_2
• abs(numero), acos(numero), asin(numero), ...,
  ceil(numero), cos(numero), ... floo(numero), ...
  etc.
• Ver 095.html , 095m.html

31
El objeto Date

• Creación
• nuevoObjeto new Date()
• nuevoObjeto new Date(mes dia, año)
• nuevoObjeto new Date(mes dia, año hhmmss)
• nuevoObjeto new Date(año, mes, dia)
• nuevoObjeto new Date(año, mes, dia, hh, mm, ss)

32
El objeto Date

• Métodos
• getDate(), getDay(), getHours(), getMinutes(),
  getMonth(), getSeconds(), getTime(),
  getTimeZoneOffset(), getYear(), parse(fecha)
  (estático), setDate(dia), setHours(horas),
  setMinutes(min), setMonth(mes), setSeconds(seg),
  setTime(fecha), setYear(), toGMTString(),
  tolocalString(), UTC(año, mes, dia, hh, mm, ss),
  eval(), toString(), valueOf()
• Ver 099.html

33
El objeto Boolean

• NuevoBooleano new Boolean(valor)
• Métodos
• eval(), toString(), valueOf()

34
El objeto Number()

• Propiedades
• MAX-VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY,
  POSITIVE_INFINITE,
• Métodos
• eval(), toString(), value()

35
El objeto Function

• Permite crear funciones en tiempo de ejecucion
• nuevaFuncion new Function( argumentos ,
  sentencias)

36
EL MODELO DE EVENTOS DE JAVASCRIPT
37
EL MODELO DE EVENTOS DE JAVASCRIPT
38
EL MODELO DE EVENTOS DE JAVASCRIPT
39
Ejemplos

• onClick, 104.html
• onSubmit, onReset, 105.html
• onChange, 107.html
• onFocus, 109.html
• onBlur, 110.html
• onMouseOver, onMouseOut, 112.html
• onLoad, onUnload, 114.html