4.2 Elementos de Programacion
Cualquier acción o evento que causa un cambio
dinámico en una página web usando javascript
debe ser agrupado bajo DOM (Modelo Objeto
dinamico). Cualquier elemento HTML, pude ser
accedido o cambiado dinámicamente usando
javascript DOM.
El W3C Documento de Objeto Modelo (DOM) es
una plataforma e interface de lenguaje neutral que
brinda a los programas y scripts acceso dinámico y
actualizaciones de contenido, estructura y estilo de un
documento. El Documento Object Modelo (DOM) es
una aplicación de programa de interface (API) para
HTML válido.
Todos los elementos HTML y sus atributos pueden
ser accedidos mediante el árbol DOM. Sus contenidos
pueden ser modificados o eliminados, nuevos
elementos pueden ser creados usando DOM.
Por ejemplo, el form nombrado "ssss" en un documento.
dinámico en una página web usando javascript
debe ser agrupado bajo DOM (Modelo Objeto
dinamico). Cualquier elemento HTML, pude ser
accedido o cambiado dinámicamente usando
javascript DOM.
El W3C Documento de Objeto Modelo (DOM) es
una plataforma e interface de lenguaje neutral que
brinda a los programas y scripts acceso dinámico y
actualizaciones de contenido, estructura y estilo de un
documento. El Documento Object Modelo (DOM) es
una aplicación de programa de interface (API) para
HTML válido.
Todos los elementos HTML y sus atributos pueden
ser accedidos mediante el árbol DOM. Sus contenidos
pueden ser modificados o eliminados, nuevos
elementos pueden ser creados usando DOM.
Por ejemplo, el form nombrado "ssss" en un documento.
ESTRUCTURA DE OBJETOS
JavaScript es un lenguaje de objetos. Un objeto es un ente
abstracto que agrupa por un lado a un conjunto de propiedades que
definen al propio objeto y por otro, una serie de métodos que interactúan
sobre él (funciones o procedimientos). Un ejemplo de objeto en un
entorno de gestión de una empresa podría ser un empleado.
En JavaScript, se identifican una serie de objetos sobre los que
podremos interactuar, como las ventanas, las páginas, las imágenes, los formularios, ... Por
ejemplo, El objeto ventana tendrá, entre otras, una propiedad que sea el ancho de la ventana.
Un método (funciones en el caso de JavaScriupt) asociado a este objeto será la función que
abre una nueva ventana.
JavaScript es un lenguaje de objetos. Un objeto es un ente
abstracto que agrupa por un lado a un conjunto de propiedades que
definen al propio objeto y por otro, una serie de métodos que interactúan
sobre él (funciones o procedimientos). Un ejemplo de objeto en un
entorno de gestión de una empresa podría ser un empleado.
En JavaScript, se identifican una serie de objetos sobre los que
podremos interactuar, como las ventanas, las páginas, las imágenes, los formularios, ... Por
ejemplo, El objeto ventana tendrá, entre otras, una propiedad que sea el ancho de la ventana.
Un método (funciones en el caso de JavaScriupt) asociado a este objeto será la función que
abre una nueva ventana.
Contiene a los siguientes tres objetos:
document: agrupa las propiedades del documento actual, tales como el título, formularios,
imágenes, colores de texto o fondo, ...
history: contiene las URLs que el cliente ha visitado anteriormente.
location: propiedades de la URL de la página.
Veamos un ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
</HEAD>
<BODY BGCOLOR=“#000000” FGCOLOR=“#FFFFFF”>
<FORM NAME=“mi_formulario” ACTION=“procesa_formulario( )” METHOD=“get”>
Escribe tu texto: <INPUT TYPE=“text” NAME=“texto1” VALUE=“Hola” SIZE=25><br>
</FORM>
<CENTER>
<IMG SRC=“mi_imagen1.jpg”><IMG SRC=“mi_imagen2.jpg”>
</CENTER>
</BODY>
document: agrupa las propiedades del documento actual, tales como el título, formularios,
imágenes, colores de texto o fondo, ...
history: contiene las URLs que el cliente ha visitado anteriormente.
location: propiedades de la URL de la página.
Veamos un ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
</HEAD>
<BODY BGCOLOR=“#000000” FGCOLOR=“#FFFFFF”>
<FORM NAME=“mi_formulario” ACTION=“procesa_formulario( )” METHOD=“get”>
Escribe tu texto: <INPUT TYPE=“text” NAME=“texto1” VALUE=“Hola” SIZE=25><br>
</FORM>
<CENTER>
<IMG SRC=“mi_imagen1.jpg”><IMG SRC=“mi_imagen2.jpg”>
</CENTER>
</BODY>
Veamos algunas propiedades:
document.fgColor = #FFFFFF
document.bgColor = #000000
document.title = Ejemplo
location.href = www.iua.upf.es/~tnavarrete/ejemplo.html
location.host = www.iua.upf.es
history.length = 5
document.mi_formulario.action = procesa_formulario( )
document.mi_formulario.method = get
document.mi_formulario.texto1.name = texto1
document.mi_formulario.texto1.value = Hola
document.fgColor = #FFFFFF
document.bgColor = #000000
document.title = Ejemplo
location.href = www.iua.upf.es/~tnavarrete/ejemplo.html
location.host = www.iua.upf.es
history.length = 5
document.mi_formulario.action = procesa_formulario( )
document.mi_formulario.method = get
document.mi_formulario.texto1.name = texto1
document.mi_formulario.texto1.value = Hola
EL OBJETO LOCATION
La propiedad más importantes es:
href: indica la URL actual completa. De hecho, si no se indica propiedad alguna, se hace
referencia a href. Por ejemplo:
window.location = “http://www.upf.es” , es similar a:
window.location.href = “http://www.upf.es”
Otras propiedades indican, por ejemplo, el nombre del servidor (propiedad host) o del puerto
(propiedad port).
EL OBJETO HISTORY
Contiene una lista con las URLs que el navegador ha visitado. Las propiedades
history.current, history.next y history.previous hacen referencia a las entradas actual,
siguiente y anterior, respectivamente.
Para las demás, se puede hacer utilizando un índice; por ejemplo: history(3).
El método go permite cargar el contenido de una entrada concreta: history.go(3). en
concreto history.go(0) carga de nuevo la página actual.
EL OBJETO NAVIGATOR
El objeto navigator contiene información sobre la versión del navegador que se está
utilizando. Por ejemplo, la propiedad appName especifica el nombre del navegador,
mientras que la propiedad appVersion nos da información sobre la versión de dicho
navegador.
En cuando a sus métodos, pueden ser de interés javaEnabled que especifica si Java está
habilitado en el navegador y preference que permite ver y modificar algunas preferencias
del usuario (este último método apareció con la versión 1.2 de JavaScript).
Un caso típico del uso del objeto navigator es cuando necesitamos detectar si el browser
del usuario es uno u otro (debido a problemas de compatibilidad). El siguiente ejemplo
detecta si el navegador es un Netscape 4 o posterior:
if ((navigator.appName==’Netscape’) && (navigator.appVersion.indexOf(’Win’)>-1) &&
(parseInt(navigator.appVersion)<=4) )
alert("Tu navegador es Netscape de Windows, versión 4 o posterior")
...
También es importante hacer notar que el objeto navigator tiene dos objetos hijo, que
son Plugin y MimeType, para interactuar con los plugins y diferentes tipos
MIME.
OBJETO WINDOW
Como aspecto importante de notación, todos los métodos y propiedades asociados al objeto
window no es necesario que antepongan dicho nombre al nombre del método o propiedad.
Por ejemplo, basta escribir document.write(“hola”) en vez de window.document.write(“hola”),
o open(“hola.html”) en vez de window.open(“hola.html”).
El objeto window tiene varios métodos dedicados a crear cajas de diálogo y nuevas
ventanas. Veamos los más empleados:
El método alert abre una ventana de aviso (con sólo la opción de “Aceptar”), mientras que el
método confirm, abre una ventana de diálogo con confirmación (con dos opciones). Por otra
parte, el método open abre una ventana nueva. Los parámetros son:
window.open(“URL”,”nombre de la nueva ventana”,”parámetros auxiliares”)
los parámetros auxiliares son:
− toolbar = yes/no ( o tambíen 1/0): la barra de los botones Back, Forward, Stop, ...
− location = yes/no ( o tambíen 1/0): la barra donde se escribe la URL
− directories = yes/no ( o tambíen 1/0): la barra con What’s New, Search, ...
− status = yes/no ( o tambíen 1/0): la barra inferior de la ventana, donde se escribe el % que
se ha cargado del fichero, su peso, ...
− menubar = yes/no ( o tambíen 1/0): la barra de menús
Fuente: http://es.wikibooks.org/wiki/Programaci%C3%B3n_en_VHDL/Elementos_b%C3%A1sicos_del_lenguaje
https://www.youtube.com/watch?v=D7TrueDqyUM
No hay comentarios:
Publicar un comentario