Pre-Laboratorio 4 - Facultad de Ciencias-UCV

UNIVERSIDAD CENTRAL DE VENEZUELA
FACULTAD DE CIENCIAS
ESCUELA DE COMPUTACIÓN
APLICACIÓN CON TECNOLOGÍA EN INTERNET
PRELABORATORIO- 04
JAVASCRIPT
Objetivos:
1. Uso del lenguaje de Javascript (JS).
2. Conocimientos del DOM (Document Object Model).
3. Utilización de Scripts internos y externos.
4. Investigar
5. Qué es DHTML?
6. Definición de Layer (Capa)
7. Investigar
1. ¿Qué es JavaScript?
JavaScript es un lenguaje interpretado orientado a las páginas web,
con una sintaxis semejante a la del lenguaje Java.
Se utiliza en páginas
web HTML, para realizar tareas y operaciones en el marco de la aplicación
cliente.
JScript es la implementación de ECMAScript de Microsoft, muy similar
al JavaScript de Netscape, pero con ciertas diferencias en el modelo de
objetos del navegador que hacen a ambas versiones con frecuencia
incompatibles. Para evitar estas incompatibilidades, el World Wide Web
Consortium diseñó el estándar Modelo de Objetos del Documento (DOM,
Document Object Model).
2. ¿Qué es DOM (Document Objet Model)?
EL DOM o Modelo de Objetos del Documento es una forma de
representar documentos estructurados (tales como una página web HTML o
un documento XML) que es independiente de cualquier lenguaje orientado a
objetos. Su finalidad es definir el conjunto de objetos que pueden componer
documentos HTML o XML, así como las estructuras que se definen dentro de
él, sus propiedades y sus métodos, independientemente del lenguaje de
programación utilizado, con el fin de evitar problemas de compatibilidad
entre navegadores. El custodio del DOM es el World Wide Web Consortium
(W3C). El DOM es una API para acceder, añadir y cambiar dinámicamente
contenido estructurado en documentos con lenguajes como Javascript.
3. ¿Cómo se implementan los JavaScript?
Una función JavaScript se puede implementar de dos formas, es
decir, dentro del documento html o fuera de él. Un código JavaScript es
similar a un código java.

Declaración de variables: la declaración de variables a diferencia
de java no es obligatoria, sin embargo, cuando se hace es por medio
de la palabra reservada var. Ejemplo:
var x;
y = 2;

Declaración de funciones: para declarar una función se utiliza la
palabra reservada function y el cuerpo de la función esta definida
dentro de llaves.
function pruebas() {
var z;
w = 1;
.
.
.
}

Declaración de arreglos: otro punto importante es la declaración
de arreglos. Los vectores y matrices son vistos como objetos, por
tanto es necesario realizar una instancia del objeto. Ejemplo:
miVector = new Array(20)
De que otra forma se pueden declarar arreglos?

Obteniendo el apuntador al DOM: para poder manejar el
documento hacemos referencia a cada parte de él, partiendo del
objeto document. Ejemplo:
document.write(‘HELLO MUNDO’);
Para mas información sobre la sintaxis, semántica y funciones de
JavaScript revisa http://www.programacion.net/html/tutorial/js/
Hay dos formas de implementar el código en JavaScript:
i. En código html: para colocar código JavaScript dentro del
documento html se utiliza la etiqueta <script> donde es
esencial definir el atributo language donde indicamos que el
lenguaje de scripting que usamos es Javascript.
<script language="JavaScript">
function cuadrado(i)
{
document.write("Se pasó el valor: ",i,"<br>");
return i * i;
}
document.write("La función retornó: " + cuadrado(5));
</script>
ii. Externo al código html: para colocar código JavaScript fuera
del documento html, es necesario colocar la definición de las
funciones en un archivo con extensión .js e importarlo en el
documento html por medio de:
<script language="JavaScript" src="nombre.js"></script>
Si se necesita usar una función definida en el archivo .js dentro
del body del documento html, se utiliza lo siguiente:
<script language="javascript">nombre_funcion();</script>
A continuación se le presentan una serie de funciones que pueden ser
utiles para la realización del laboratorio.

document.nombredelformulario: permite cargar todos los datos que
están dentro del form.

getValue(nombre): obtiene el valor de una etiqueta dado su nombre.

length: devuelve el tamaño de un string (Ej: nombre.length).

charAt(int i): devuelve el carácter i dentro de una cadena.

indexOf(string i): devuelve la posición del carácter a partir de donde
aparece la primera coincidencia con el string i dentro de un string j
(Ej: j.indexOf(“@”)).
4. Investigar:

Manejo de Mayuscula y Minusculas

Manejo de sucadenas

Eventos en JavaScript
5. Que es DHTML?
Cualquier página que responde a las actividades del usuario y realiza
efectos y funcionalidades se puede englobar dentro del DHTML, pero en
este caso nos referimos más a efectos en el navegador por los cuales se
pueden mostrar y ocultar elementos de la página, se puede modificar su
posición, dimensiones, color, etc.
DHTML nos da más control sobre la página, gracias a que los
navegadores modernos incluyen una nueva estructura para visualizar en
páginas Web denominada capa. Las capas se pueden ocultar, mostrar,
desplazar, etc.
Para realizar las acciones sobre la página, como modificar la apariencia
de una capa, seguimos necesitando un lenguaje de programación del
lado del cliente como Javascript.
6. Definición de Layer (Capa)
Con las hojas de estilo se tiene control sobre los elementos individuales,
pero no se tiene control sobre el documento como un todo, para ello se
utilizan los layers o capas. Nosotros vamos a entender por LAYER una
zona rectangular de la página que estamos diseñando, normalmente
creados mediante el tag <DIV> o también utilizando un nuevo tag
introducido por Netscape, llamado <LAYER>
El siguiente código es un ejemplo de cómo crear una capa con sus
características:
<div id="ejemploCapa" STYLE="background-color:#009900;
color:#0000FF; position:relative; padding:20;
border-width:10px; border-style:ridge; border-color:#FFFFFF">
Esto es un Capa "on line" de layer o bloque posicionable.
<p>
Tiene el fondo verde y las letras azules, un bonito borde de 10 pixels
de ancho y una distancia entre el borde y el contenido de 20 pixels.
</div>
Habitualmente son transparentes y usan como color y tipo de letra la
establecida hasta ese momento en el documento HTML en el que se define.
7. Investigar:

Investigar cada una de las propiedades de una capa

Como acceder a las propiedades de una capa desde JavaScript

Como utilizar DHTML en los diferentes Browser

getElementById

Cómo cambiar el estilo de una celda desde JavaScript y CSS?
Enlaces:

http://www.programacion.net/html/dinamico/tutorial/

http://flanagan.ugr.es/dhtml/

http://www.desarrolloweb.com/articulos/1040.php

http://ahinosvemos.com/archives/2005/10/27/tutorial-javascriptpara-principiantes-1/

http://www.mctekk.com/index.php/seccion/javascript/menu_javascri
pt_ver_2/330.htm
GDATI