Scripts dentro de HTML
Diseño de páginas dinámicas que interactúan con el usuario.
Los scripts
Los scripts nos permiten crear páginas Web más dinámicas y atractivas.
Un script es un programa que puede acompañar a un documento HTML o que puede estar insertado en él.
El programa se ejecuta en el navegador del cliente cuando se carga el documento o junto con los eventos, como por ejemplo cuando se activa un enlace, o cuando se pasa el puntero del mouse por alguna imagen, etc.
Un código script puede ser ubicado tanto en la sección head como en la sección body de un documento.
Insertando un script dentro de un documento HTML
Para insertar un script dentro de HTML, debemos utilizar la etiqueta <script> junto con el atributo type para especificar el lenguaje de scripts que vamos a utilizar.
Ejemplo |
|
|
Código
<html><head> <title>Inserción de un Script</title> </head> <body> <script type="text/javascript"> document.write("Este es un script en javascript") </script> </body> </html> |
Resultado
|
| Nota: en este ejemplo el tipo de script insertado "text/javascript" es en JavaScript. | |
El elemento object
El elemento object está definido por las etiquetas <object> y </object> y se utiliza para insertar objetos dentro de una página Web.
Entendemos por objetos:
- documentos HTML
- imágenes
- audio
- video
- Flash
- documentos PDF
- ActiveX
- Java applets
- etc.
Ejemplo de como insertar una imagen JPEG
Ejemplo |
|
|
Código
<object data="fotos/flores.jpg" type="image/jpeg" style="width:100px; height:100px"></object> |
Resultado
|
| Nota: el atributo data="flores.jpg" nos especifica la dirección del documento a insertar. El atributo type="image/jpeg" el tipo de documento o archivo a insertar. | |
El elemento param
El elemento param está definido por la etiqueta <param> y se utiliza para especificar parámetros que pueden ser necesarios, para un objeto insertado con el elemento object, en tiempo de ejecución.
Veamos este ejemplo de un archivo de audio.
Ejemplo |
|
|
Código
<object data="media/applause.wav" type="audio/x-wav" style="width: 100%; height: 50px"><param name="src" value="media/applause.wav"> <param name="autoplay" value="false"> <param name="autostart" value="0"> </object> |
Resultado
|
Notas:
- name="src" junto con value="media/applause.wav" - Internet Explorer necesita la dirección src para ubicar el archivo a ejecutar.
- name="autoplay" se usa para ejecutar Quicktime - value="false" es para que no se autoejecute al cargar la página.
- name="autostart" se usa para ejecutar Windows Media Player y Real Audio - value="0" es para que no se autoejecute al cargar la página.
Etiquetas y atributos de los scripts
| Etiquetas | Atributos | Valor | Descripción | Ej |
|---|---|---|---|---|
| <script> | Coloca un script dentro de un documento. | |||
| src | URL | Especifica la localización de un script externo. | ||
| type Obligatorio
|
tipo de contenido | Especifica el lenguaje de scripts. | ![]() |
|
| lenguaje Desaprobado
|
Especifica el lenguaje de scripts. Use type en su lugar. | ![]() |
||
| defer | Indica al navegador, que el script no va a generar ningún contenido en el documento. | |||
| charset | codificación de caracteres | Define la codificación de caracteres usadas en el script. | ![]() |
|
| <noscript> | Texto alternativo en caso que el script no se ejecute. | ![]() |
||
| <object> | Define un objeto embebido. Usado para insertar multimedia a la página | |||
| align Desaprobado
|
left | Alineamiento del texto alrededor del objeto. Use CSS en su lugar. |
![]() |
|
| right | ![]() |
|||
| top | ![]() |
|||
| bottom | ![]() |
|||
| archive | lista URLs | Especifica una lista de URLs, separados por espacios, de archivos que contienen recursos relevantes para el objeto. | ||
| border Desaprobado
|
píxeles | Define un borde alrededor del objeto. Use CSS Bordes en su lugar. |
![]() |
|
| classid | URL | Especifica la localización de la implementación de un objeto. Puede usarse junto con el atributo data. | ||
| codebase | URL | Especifica la ruta de acceso base de los URLs especificados por los atributos classid, data y archive. | ||
| codetype | tipo de contenido | Tipo de contenido de datos cuando se carga el objeto especificado por classid. | ||
| data | URL | Especifica la localización de los datos del objeto. | ||
| declare | declaración | Hace que la definición actual de object sea solamente una declaración. | ||
| height Desaprobado
|
píxeles | Define la altura del objeto. Use CSS Height en su lugar. |
![]() |
|
| hspace Desaprobado
|
píxeles | Define los espacios horizontales alrededor del objeto. Use CSS Padding en su lugar. |
![]() |
|
| name | nombre único | Asigna el nombre de control. | ||
| standby | texto | Especifica un mensaje que puede presentar un navegador mientras carga los datos del objeto. | ||
| type | tipo de contenido | Especifica el tipo de contenido de los datos especificados por data. | ||
| usemap | URL | Asocia un mapa de imágenes con un elemento. | ||
| vspace Desaprobado
|
píxeles | Define los espacios verticales alrededor del objeto. Use CSS vertical-align en su lugar. |
![]() |
|
| width Desaprobado
|
píxeles | Define el ancho del objeto. Use CSS width en su lugar. |
![]() |
|
| <param> | Especifica los parámetros para un objeto insertado en el documento. | |||
| name | nombre único | Define el nombre de un parámetro de ejecución que se supone que el objeto insertado conoce. | ||
| type | tipo de contenido | Especifica el tipo de medio para el parámetro. | ||
| value | valor | Especifica el valor del parámetro de ejecución especificado por name. | ||
| valuetype | data | Especifica el tipo de atributo value. | ||
| ref | ||||
| object |
Atributos estándard
Si deseas una descripción completa, dirígete a: atributos estándard.
Eventos intrínsecos
Si deseas una descripción completa, dirígete a: eventos intrínsecos.
<<< Explicación sobre URL Atributos Stándard >>>

