4.- Tutoriales y JavaScript.
En este capítulo se revisarán algunas herramientas que permitan mejorar la interacción entre el ser humano y la computadora.
Los tutoriales manejados por medio de la computadora son interactivos
por naturaleza, ya que en ellos la participación del aprendiz es
indispensable. Sin embargo, en los tutoriales implementados por medio del
lenguaje HTML existen ciertos niveles de interactividad que no es posible
lograr, haciéndose necesaria la inserción de guiones escritos
en JavaScript o la utilización de pequeñas aplicaciones escritas
en Java.
La interacción consiste en un diálogo bilateral entre
el usuario y la computadora. y se produce cuando el usuario utiliza el
teclado, el ratón o algún otro dispositivo de señalamiento
para indicar una acción o para proporcionar un dato a la máquina.
4.1.- Programación Orientada a Objetos.
JavaScript es un lenguaje de programación basado en objetos y
Java es un lenguaje de programación orientado a objetos ( Java se
trata en el Capítulo 5 ), por lo que es necesario revisar los conceptos
básicos de la Programación Orientada a Objetos antes de adentrarse
en el estudio de ambos lenguajes.
4.1.1.- Objetos.
Un objeto es una abstracción que trata de emular a los
objetos del mundo real, para lo cual deben considerarse tres aspectos acerca
de ellos: su estado, su comportamiento y su identidad
[DECKR93].
Tanto en JavaScript como en Java :
4.1.2.- Clases.
Los lenguajes orientados a objetos permiten describir un prototipo para
un conjunto de objetos al que se le conoce como una clase.
4.1.2.1.- Instanciación.
La instanciación consiste de la creación de nuevos objetos a partir de una clase dada, por lo que los términos instancia y objeto pueden tomarse como sinónimos.
Para crear un objeto de cierta clase, ésta debe incluir tanto
la declaración como la definición ( implementación
) de un método especial denominado constructor.
4.1.3.- Herencia.
Es frecuente que se consideren varias clases de manera que se establezca una relación de herencia (similar a la herencia genética que se da entre las especies animales) donde las subclases heredan tanto el estado como el comportamiento de las superclases, pudiéndose establecer jerarquías de clases.
Dentro de una jerarquía de clases puede considerarse
una relación de dependencia entre las subclases y las superclases,
tal como se da entre padres e hijos en un árbol genealógico.
En la Figura 4.1. se muestra la estructura de una jerarquía de clases
cualquiera.
Figura 4.1.- Jerarquía de clases.
La clase A es la superclase de las clases B, C y D ; mientras que la clase B es la sueperclase de las clases E y F.
Por otra parte, las clases B, C y D son subclases de la clase A.
Las flechas indican relaciones del tipo : "hereda
de". Considerando que las subclases se derivan de las superclases,
tales relaciones pueden expresarse como :"deriva de".
En el caso del lenguaje Java, donde se considera que las subclases extienden
la jerarquía, las relaciones serían : "extiende
a" .
En una subclase no es necesario definir los atributos y comportamientos
definidos en la superclase ; debido al mecanismo de herencia, las
subclases tendrán las características de todas las clases
antecesoras.
Cuando se crea una instancia de una clase, se obtiene espacio tanto
para las variables definidas en las clases antecesoras como para las variables
definidas en la clase actual.
4.1.4.- Superposición de métodos.
Los métodos declarados en una superclase podrán definirse en ella o en la subclase. Cuando un método definido en la superclase se vuelve a definir en la subclase, se dice que el método se ha superpuesto. Por medio de la superposición, un método puede adaptarse para cubrir los requerimientos de la subclase.
La superposición funciona de la siguiente manera : cuando
se invoca un método de un objeto , primero se revisa en la clase
del objeto para buscar la definición de ese método ;
si no se encuentra, se revisa en la superclase inmediata superior ;
de no encontrarse ahí, se busca sucesivamente en las clases superiores
de la jerarquía, hasta encontrar la definición buscada .
Esto es, para cada método siempre se utiliza la definición
que se encuentra primero al recorrer la jerarquía de abajo hacia
arriba.
4.1.5.- Notación de punto.
Para indicar que una variable o un método pertenecen a un objeto
específico, se utiliza la notación de punto que conste
en escribir los nombres del objeto y de las variables y los métodos
separados por un punto. Por ejemplo, si existe un objeto denominado
carro , se puede invocar a su método enciende() con la
siguiente instrucción:
carro.enciende() ;
4.2.- JavaScript.
JavaScript es un lenguaje para el manejo de código inserto en
los guiones HTML y se originó a partir de un lenguaje para guiones
de Netscape denominado LiveScript.
4.2.1.- Estructura del lenguaje.
Para definir la estructura de un lenguaje de programación , es
necesario describir la forma en que maneja los diferentes tipos de datos,
los operadores ; además de la sintaxis para las expresiones
y para cada una de las estructuras de control.
4.2.1.1.- Tipos de datos.
JavaScript es un lenguaje de programación de tipos libres,
debido a que las variables pueden tomar y cambiar su tipo de acuerdo al
contexto, sin necesidad de asociarles un identificador de tipo.
Los datos en JavaScript pueden ser : números, cadenas, booleanos
y el valor nulo.
4.2.1.1.1.- Números
Los números pueden ser enteros o de punto flotante,
según se escriban sin punto decimal, con punto decimal explícito
o en formato exponencial. Además, los números pueden ser
positivos o negativos.
Enteros.
Los números enteros se escriben sin punto decimal y pueden representarse
en cualquiera de los siguientes formatos :
Decimal ( Base 10 ) escrito sin un cero al inicio. Por ejemplo :
213
Octal ( Base 8 ) escrito con un cero al inicio. Por ejemplo :
042
Hexadecimal ( Base 16 ) escrito con 0x o 0X al
inicio. Por ejemplo : 0x3A
De punto Flotante.
Los números de punto flotante pueden escribirse :
con punto decimal explícito : 3.1416
en formato exponencial : 31416E-4 ( 31416 por 10 elevado a la menos 4 )
4.2.1.1.2.- Cadenas.
Una cadena consta de cero o más caracteres delimitados por comillas
dobles o comilla sencillas.
Por ejemplo, las siguientes son dos formas equivalentes de escribir
la misma cadena .
El uso alternativo de los dos tipos de comillas hace posible incluir
alguno de los dos dentro de una cadena, como por ejemplo en :
' Visite el taller "Don Cuco" '
4.2.1.1.3.- Booleanos.
Los únicos datos booleanos permitidos en JavaScript son :
false (falso) y
true (verdadero)
4.2.1.1.4.- Valor nulo.
Para representar el valor nulo ( el cual significa nada ), se utiliza
la palabra null .
4.2.1.2.- Variables.
Las variables son espacios de memoria donde se almacenan valores que
pueden ser reemplazados durante la ejecución de un programa.
4.2.1.2.1.- Declaración de variables.
Una declaración de variable consiste en asociar un nombre con
el espacio de memoria reservado para ella. Ese nombre podrá utilizarse
en el resto del guión para utilizar el valor actual de la variable
o para modificarlo.
El primer carácter de los nombres o identificadores para las variables debe ser una letra o el carácter de subrayado. Los caracteres subsecuentes pueden ser letras, números o el carácter de subrayado.
Se distingue entre letras mayúsculas y minúsculas, por
lo que los identificadores :
Valor
VALOR
valor
se considerarán asociados a distintas variables.
Una variable en JavaScript puede declararse de las siguientes maneras :
a).- Utilizando la palabra var .
Ejemplos :
var calif ; // Sin asignar valor inicial.
var calif = 100 ; // Asignando valor inicial.
b).- Al utilizar el nombre por primera vez.
Ejemplo :
calif = 100 ;
Aunque la declaración de una variable en JavaScript no es obligatoria,
es muy recomendable a fin de lograr un buen estilo de programación.
En JavaScript las variables no requieren de una definición explícita
de tipo, pues lo toman en forma dinámica cuando son utilizadas por
primera vez [LEMAP96].
4.2.1.3.- Operadores.
Los operadores sirven para combinar uno o mas operandos y producir un
resultado. Dependiendo de los tipos de los operandos que utilizan y del
tipo de resultado que producen, los operadores pueden incluirse en los
siguientes grupos :
4.2.1.3.1.- Operadores aritméticos.
Los operadores aritméticos se aplican sobre operadores numéricos y pueden clasificarse en dos grupos : binarios ( que se aplican a dos operandos ) y unitarios ( aplicados sobre un solo operando).
Los operadores aritméticos binarios sirven para realizar las
operaciones básicas de suma, resta, multiplicación y división ;
además de la operación módulo, que calcula el residuo
de una división entre valores enteros. Los símbolos que identifican
a los operadores aritméticos binarios son :
+ para la suma,
- para la resta,
* para la multiplicación,
/ para la división y
% para la operación módulo.
Los símbolos utilizados para representar los operadores aritméticos
unitarios son :
- operador de negación , que cambia el signo del valor del operando.
++ operador de incremento, que incrementa en 1 el valor del operando.
-- operador de decremento, que decrementa en 1 el valor del operando.
4.2.1.3.2.- Operadores relacionales.
Los operadores relacionales generalmente sirven para comparar los valores
que resultan de evaluar dos expresiones ; aunque también pueden
utilizarse para comparar valores de cadenas de caracteres. El resultado
es un valor booleano que se representa por las palabras :
true (verdadero) y
false (falso).
En la Tabla 4.1 se describen los operadores relacionales.
|
Operador |
Descripción |
| == Igual que | regresa true si los valores de los dos operandos son iguales |
| != Diferente que | Regresa true si los valores de los dos operandos son diferentes. |
> Mayor que |
Regresa true si el valor del operando izquierdo es mayor que el valor del operando derecho. |
| < Menor que | Regresa true si el valor del operando izquierdo es menor que el valor del operando derecho. |
| >= Mayor o igual que | Regresa true si el valor del operando izquierdo es mayor o igual que el valor del operando derecho.. |
| <= Menor o igual que | Regresa true si el valor del operando izquierdo es menor o igual que el valor del operando derecho. |
Tabla 4.1.- Operadores relacionales.
Ejemplos :
100 == 100 regresa true
30 < 20 regresa false
45 >= 25 regresa true
"ella" != "el" regresa true
4.2.1.3.3.- Operadores lógicos.
Los operadores lógicos se utilizan sobre operandos de tipo booleano,
dando como resultado valores de ese mismo tipo.
El la tabla 4.2 se describen los operadores lógicos.
|
Operador |
Descripción |
| && Conjunción ( y ) | Regresa true si el valor de los dos operandos es true. |
| | | Disyunción ( o ) | Solo regresa false cuando el valor de ambos operandos es false. |
! Negación ( no ) |
Regresa true si el valor del operando es false. Regresa false si el valor del operando es true. |
Tabla 4.2.- Operadores lógicos.
Como podrá observarse, los operadores de conjunción y
de disyunción son binarios. El operador de negación es unitario.
4.2.1.3.4.- Operadores de asignación.
Los operadores de asignación sirven para almacenar un valor en
una variable, y se forman utilizando el símbolo = , según
se muestra en la Tabla 4.3.
|
Operador |
Descripción |
|
= |
Asigna el valor del operando derecho al operando izquierdo. |
|
+= |
Suma los valores de los operandos izquierdo y derecho, y el resultado lo asigna al operando izquierdo. |
|
-= |
Resta el valor del operando derecho al valor del operando izquierdo y asigna el resultado al operando izquierdo. |
|
*= |
Multiplica los valores de los operandos izquierdo y derecho, y asigna el resultado al operando izquierdo. |
|
/= |
Divide el valor del operando izquierdo entre el valor del operando derecho y asigna el resultado al operando izquierdo. |
|
%= |
Divide el valor del operando izquierdo entre el valor del operando derecho y asigna el residuo al operando izquierdo. |
Tabla 4.3.- Operadores de asignación.
El operador condicional simula la estructura de control if - else ( descrita más adelante ), y se forma con los símbolos ? :
La sintaxis para expresiones que utilizan este operador es :
(condición) ? valor1 : valor2
Si al evaluar la condición se obtiene un resultado igual
a true, el operador condicional da como resultado el valor1.
En otro caso, da como resultado valor2 .
Ejemplo :
( (dia_semana >= "Lunes") && (dia_semana<="Viernes")
) ? "A trabajar" : "A descansar"
4.2.1.3.6.- Operadores a nivel de bits.
Los operadores a nivel de bits actúan sobre valores enteros de
32 bits en su representación binaria ( la que utiliza únicamente
ceros y unos) y se describen brevemente en la Tabla 4.4.
|
Operador |
Descripción |
|
~ |
Produce el complemento del operando (a nivel de bits). |
|
<< |
Desplaza los bits hacia la izquierda. |
|
>> |
Desplaza los bits hacia la derecha. |
|
>>> |
Desplaza los bits hacia la derecha, sustituyendo con ceros los espacios que se desocupan en el extremo izquierdo. |
|
|
Conjunción lógica a nivel de bits ( and ). |
|
^ |
Disyunción exclusiva a nivel de bits( xor ) |
|
| |
|
Tabla 4.4.- Operadores a nivel de bits.
4.2.1.4.- Estructuras de control.
Las estructuras de control sirven para controlar el orden de ejecución
de las instrucciones que forman un programa y, de acuerdo a su funcionamiento,
pueden agruparse en estructuras de :
4.2.1.4.1.- Estructuras de secuencia.
Las estructuras de secuencia consisten de instrucciones que se ejecutan
una a continuación de otra, sin bifurcaciones ni iteraciones.
4.2.1.4.2.- Estructuras de selección.
Las estructuras de selección contienen bifurcaciones que se controlan
por medio de la evaluación de una condición.
JavaScript cuenta con una estructura de selección if-else
, la cual se rige por la sintaxis mostrada a continuación :
if ( condición) bloque 1
else bloque 2
donde :
condición es una expresión booleana,
bloque 1 y bloque 2 son bloques de una o más instrucciones y
la parte else es opcional.
Ejemplo :
if( x < 10 )
{
y = x + 5 ;
x++ ;
}
else
{
y = x -5 ;
x-- ;
}
4.2.1.4.3.- Estructuras de iteración.
Las estructuras de iteración sirven para ejecutar repetidamente un bloque de instrucciones.
JavaScript incluye las siguientes estructuras de iteración :
4.2.1.4.3.1.- La estructura for
Crea una iteración por medio de tres partes encerradas entre
paréntesis y separadas una de otra por medio de un punto y coma.
La sintaxis para esta estructura es :
for( inicia ; condición ; actualiza) bloque
donde :
inicia es la parte donde se asignan los valores iniciales a los elementos que sirven como cntroladores de ciclos,
condición es una expresión booleana ,
actualiza es la parte donde se incrementan o decrementan los controladores, y
bloque es un conjunto formado por una o más instrucciones a ejecutar en cada ciclo.
Ejemplo :
for(var i=1 ; i <= 100 ; i++)
{
utilidad+=10 ;
precio = costo + utilidad;
capacidad_compra = salario/precio ;
}
4.2.1.4.3.2.- La estructura for-in
Esta estructura de control permite iterar sobre todas las propiedades
de un objeto en particular. Se rige por la sintaxis :
for(var propiedad in objeto) bloque
donde :
propiedad es una variable, y
objeto es una instancia de una clase.
bloque es el conjunto de instrucciones a ejecutar en cada ciclo.
Ejemplo :
Si tenemos una clase denominada persona, podemos escribir el
siguiente código que despliega los nombres y los valores de
todas las propiedades del objeto miPersona :
var miPersona = new persona() ;
for(var prop in miPersona)
document.writeln("miPersona." + prop
+ " = " + miPersona[prop]) ;
Aquí cabe hacer mención sobre la existencia de dos maneras de accesar propiedades de objetos : la notación de punto y el uso de índices asociativos.
Por ejemplo, si el objeto miPersona tiene la propiedad nombre,
entonces se puede hacer referencia a esa propiedad utilizando cualquiera
de las siguientes notaciones :
1.- miPersona.nombre
2.- miPersona["nombre"]
3.- var x = "nombre" ; miPersona[x]
4.2.1.4.3.3.- La estructura while
Ejecuta un conjunto de instrucciones mientras se cumpla una condición
dada. Cuando la condición produce un valor false, la ejecución
continúa en la instrucción que sigue al bloque de la estructura
while. La sintaxis para esta estructura es :
while(condición) bloque
Ejemplo :
nuevo = 10 ;
while( nuevo > 0 )
{
nuevo-- ;
acum += nuevo ;
}
4.2.2.- Objetos en JavaScript.
A diferencia de otros lenguajes basados en objetos, JavaScript no permite
la extensión de clases ( subclasificación) , sino que brinda
un conjunto reducido de clases. Además, proporciona un conjunto
de objetos integrados que brindan información acerca de la página
Web cargada en ese momento y acerca de la sesión actual del visualizador
.
4.2.2.1.- Objetos del visualizador.
La mayoría de los objetos integrados en JavaScript forma
parte de la jerarquía de objetos del visualizador. Esta jerarquía
está construida con base al objeto window, como se muestra
en la Figura 4.2.
Figura 4.2.- Jerarquía de objetos del visualizador.
A continuación se describen brevemente los objetos de la Figura
4.2.
4.2.2.1.1.- El objeto window.
El objeto window de JavaScript es el que tiene la precedencia más alta en relación con la ventana del visualizador que se encuentre abierta. El visualizador crea el objeto window al momento de cargar una página que contiene propiedades que se aplican a toda la ventana .
Dado que su existencia se presupone, no se tiene que escribir el nombre
de la ventana al hacer referencia a sus objetos, propiedades o métodos.
Por ejemplo, para desplegar un mensaje en la línea de estado se
puede hacer de cualquiera de las dos formas siguientes:
window.status = "Acerca de"
status = "Acerca de"
Las propiedades del objeto window se describen en la Tabla 4.5.
|
Propiedad |
Descripción |
defaultStatus |
Valor de cadena que contiene el valor predeterminado que se despliega en la barra de estado. |
frames |
Arreglo de objetos para cada cuadro en una ventana. Los cuadros aparecen en el arreglo en el mismo orden que en el código HTML. |
length |
Valor entero que indica el número de cuadros en una ventana madre. |
name |
Valor de cadena que contiene el nombre de la ventana o cuadro. |
parent |
Nombre alternativo para la ventana que contiene la etiqueta <FRAMESET> con que se creó la ventana actual. |
| self | Nombre alternativo para la ventana actual. |
| top | Nombre alternativo para la ventana superior. |
| window | Nombre alternativo para la ventana actual. |
Tabla 4.5.- Propiedades del objeto window.
Los métodos del objeto window se describen en la Tabla 4.6.
|
Método |
Descripción |
alert(mensaje) |
Despliega el mensaje en el cuadro de diálogo del visualizador. |
| Close() | Cierra la ventana. |
confirm(mensaje) |
Despliega el mensaje en el cuadro de diálogo del visualizador donde se incluyen los botones OK y CANCEL. Cuando se elige el botón OK, devuelve true y devuelve false en caso de elegir CANCEL. |
Open( URL, nombre, características) |
Abre el URL en la ventana nombre. Si nombre
no existe, se crea una nueva ventana.
características es una cadena opcional que contiene los siguientes pares nombre=valor : toolbar=valor Agregar barra de herramientas ?. location=valor Agregar campo de ubicación ?. directories=valor Agregar botones de directorio ?. status=valor Debe tener barra de estado ?. menubar=valor Debe tener barra de menú ?. scrollbars=valor Debe tener barra de desplaza- miento ?. resizable=valor Puede redimensionarse ?. width=pixeles Anchura de la ventana en pixeles. heigth=pixeles Altura de la ventana en pixeles. donde valor puede ser : yes, no, 1, 0 |
prompt (mensaje, respuesta) |
Despliega el mensaje en el cuadro de diálogo con un campo de entrada de texto, con el valor predeterminado respuesta. |
| setTimeout(expresión, tiempo) | Evalúa la expresión después de un tiempo dado en milisegundos. Puede asignarse un nombre para la invocación a este método. Por ejemplo : nombre=setTimeout(a=b+c, 5000) |
| clearTimeout(nombre) | Cancela el tiempo fuera identificado con nombre. |
Tabla 4.6.- Métodos del objeto window.
Además, el objeto window cuenta con los siguientes manejadores
de eventos ( Los eventos son señales generadas cuando ocurren
acciones específicas, como pulsar una tecla o un botón del
ratón. Un manejador de evento es una variable que almacena valores
de un evento dado ) :
4.2.2.1.2.- El objeto location.
El objeto location contiene información acerca del URL
del documento actual. Este objeto se utiliza para determinar el URL de
cualquier documento activo, incluyendo aquellos que se encuentran en otras
ventanas o cuadros.
Las propiedades del objeto location se describen en la Tabla
4.7.
|
Propiedad |
Descripción |
hash |
Valor de cadena que contiene el nombre del ancla en el URL. |
Host |
Valor de cadena que contiene el nombre del anfitrión y el número del puerto del URL. |
Hostname |
Valor de cadena que contiene el nombre de dominio (o dirección numérica IP) del URL. |
Href |
Valor de cadena que contiene el URL completo. |
Pathname |
Valor de cadena que especifica la parte del URL correspondiente a la ruta. |
| port | Valor de cadena que contiene el número de puerto del URL. |
| protocol | Valor de cadena que contiene el protocolo del URL (hasta antes de las dos diagonales) |
| search | Valor de cadena que contiene la información pasada a una llamada GET CGI-BIN (información después del signo de interrogación). |
Tabla 4.7.- Propiedades del objeto location.
4.2.2.1.3.- El objeto history.
El objeto history contiene información acerca de los URLs de las páginas visitadas con anterioridad. Sus métodos se utilizan para navegar hacia cualquier punto en la lista.
La única propiedad de este objeto es length, que representa
el número de elementos de la lista del historial.
Los métodos del objeto history son :
back() que regresa al documento anterior en la lista del historial,
forward() que va hacia adelante, al siguiente documento en la
lista del historial, y
go(ubicación) que va al documento especificado por ubicación en la lista del
historial . El valor de ubicación puede ser una cadena o un valor
entero positivo o negativo.
4.2.2.1.4.- El objeto document.
Este es uno de los objetos base de JavaScript ya que contiene información acerca de anclas, vínculos, formularios, título, ubicación actual, URL y colores del documento actual.
El objeto document es creado por el visualizador al momento de
cargar una página (precisamente al evaluar la etiqueta <BODY>
) y existe mientras la página esté cargada.
Las propiedades del objeto document se describen en la Tabla
4.8.
|
Propiedad |
Descripción |
alinkColor |
Color de vínculos activos representado como una cadena o una tripleta en hexadecimal. |
anchors |
Arreglo de objetos de ancla dispuestos en el orden en que aparecen en el documento HTML. Para obtener el número de anclas en el documento, se escribe : anchors.length . |
bgColor |
Color del fondo del documento. |
cookie |
Valor de cadena que contiene valores de galleta para el documento actual. Una galleta es una especie de marca por medio de la cual el servidor almacena información del lado del cliente. Cuando el usuario solicite de nuevo la misma página, el visualizador enviará la galleta al servidor para que encuentre más rápido la página solicitada. |
fgColor |
Color del primer plano del documento. |
| forms | Arreglo de objetos de formularios dispuestos en el orden en que aparecen en el archivo HTML. Para obtener el número de formularios en un documento escríbase : forms.length . |
| lastModified | Valor de cadena que contiene la fecha de la última modificación del documento. |
| linkColor | Color de los vínculos escrito como una cadena o como una tripleta en hexadecimal. |
links |
Arreglo de objetos de vínculo dispuestos en el orden en que aparecen en el documento HTML. Para obtener el número de vínculos en un documento, escriba : links.length . |
location |
Cadena que contiene el URL del documento actual. |
referrer |
Valor de cadena que contiene el URL del documento invocador, cuando el usuario sigue un vínculo. |
title |
Cadena que contiene el título del documento actual. |
| vlinkColor | Color de los vínculos ya visitados, expresado como una cadena o una tripleta en hexadecimal. |
Tabla 4.8.- Propiedades del objeto document.
Los métodos del objeto document son :
clear() que despeja la ventana del documento,
close() que cierra el flujo de salida actual,
open(mimeType) que abre un flujo para permitir a los métodos
write() y writeln() escribir en la ventana del documento. El argumento
mimeType es una cadena opcional que especifica un tipo de documento soportado
por el visualizador ,
write() que despliega texto guiones HTML en el documento especificado,
y
writeln() que despliega texto guiones HTML en el documento especificado,
seguido de un carácter de nueva línea.
Además de los objetos de la jerarquía del navegador, JavaScript
proporciona los siguientes objetos que no están relacionados con
las ventanas actuales o los documentos cargados.
string : brinda propiedades y métodos para el manejo de literales y variables de cadenas de caracteres.
Math : permite el cálculo de funciones trigonométricas,
logaritmos, raices, etc.
Date : proporciona mecanismos para trabajar con fechas y horas.
4.2.2.2.- Instanciación en JavaScript.
Aunque JavaScript no permite la creación de nuevas clases, proporciona
un mecanismo de plantilla para la creación de métodos constructores
para objetos específicos.
Este mecanismo de plantilla se maneja a través de la palabra
clave function ,como se muestra en el siguiente ejemplo :
Supongamos que necesitamos almacenar las calificaciones de un grupo
de alumnos . Lo primero que necesitamos es implementar el constructor
para los objetos alumno :
function alumno( nombre, calif )
{
this.nombre = nombre ;
this.calif = calif ;
}
En este caso, a los atributos del objeto actual this ( este )
se le asignan los valores de los argumentos nombre y calif que
se le pasaron al método constructor alumno.
Utilizando la palabra reservada new , ahora se pueden crear instancias
de la clase alumno.
PerezGJ = new alumno( "Pérez García, Juan"
, 95) ;
Para referirnos a los atributos del objeto referido por PerezGJ, podemos
utilizar cualquiera de las siguientes notaciones :
PerezGJ.nombre ,cuyo valor es : "Pérez García, Juan" , se puede escribir como
PerezGJ["nombre"] , o bien como PerezGJ[0]
Un objeto puede contener otros objetos, por lo que es posible incluir objetos como parte de la definición de un método constructor.
Por ejemplo, podemos manejar información acerca del proyecto
en que está trabajando un alumno. Para esto, primero definimos un
constructor denominado proyecto :
function proyecto ( titulo, fechaEntrega, alumno )
{
this.titulo = titulo ;
this.fechaE = fechaEntrega ;
this.alumno = alumno;
}
Con el objeto PerezGJ, ahora podemos crear un nuevo objeto referenciado
por proyTut :
proyTut = new proyecto( "Elaboración de Tutoriales",
"15/DIC/97", PerezGJ ) ;
Con esto, ahora se puede hacer referencia a los atributos de PerezGJ
dentro de proyTut , así :
proyTut.titulo
proyTut.fechaE
proyTut.PerezGJ.nombre
proyTut.PerezGJ.calif
Un objeto de la clase function también puede regresar
un valor (de manera similar a las funciones de otros lenguajes de programación)
utilizando la palabra clave return.
4.2.3.- Guiones JavaScript.
Un guión JavaScript es un trozo de código escrito en lenguaje JavaScript.
JavaScript es un lenguaje interpretado, por lo que el visualizador requiere
que el código fuente del guión JavaScript se inserte en un
documento HTML.
Para que el visualizador reconozca el texto correspondiente a un guión
escrito en JavaScript, debe utilizarse la etiqueta <SCRIPT>.
Opcionalmente, se puede especificar el lenguaje que se va a utilizar, como
se observa en la siguiente plantilla de ejemplo :
<SCRIPT LANGUAGE="JavaScript">
...
Programa en JavaScript
...
</SCRIPT>
Se obtiene el mismo resultado al escribir la etiqueta <SCRIPT>
en cualquiera de las siguientes formas :
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT LANGUAGE="LiveScript">
<SCRIPT>
Ya que el código JavaScript debe insertarse en un guión HTML, por el momento no existe la posibilidad de ocultarlo de cualquier persona que visite las páginas donde aparezca dicho código. Lo que sí es posible es ocultarlo de los visualizadores que no soportan JavaScript ( no por razones de mantener el código en secreto, sino para evitar que dichos visualizadores desplieguen texto confuso).
Para ocultar el código a los visualizadores que no soportan JavaScript
deben hacerse los siguientes cambios a la plantilla mostrada en el ejemplo
anterior :
<SCRIPT LANGUAGE="JavaScript">
< !-- Oculta el guión a otros visualizadores
...
Programa en JavaScript
...
// Termina de ocultar el guión a otros visualizadores -->
</SCRIPT>
Como puede observarse en la plantilla modificada, el ocultamiento empieza
con la secuencia de caracteres:
< !
y finaliza con:
>
Los visualizadores que no soportan JavaScript interpretarán como
un comentario todo lo que encuentren entre <!
y >