Introducción al JavaScript

¿Qué es JavaScript?
JavaScript, al igual que Java o VRML, es una de las múltiples maneras que han surgido
para extender las capacidades del lenguaje HTML.Al ser la más sencilla, es por el momento
la más extendida. Antes que nada conviene aclarar lo siguiente:

JavaScript no es un lenguaje de programación propiamente dicho. Es un lenguaje script u

orientado a documento, como pueden ser los lenguajes de macros que tienen muchos
procesadores de texto. Nunca podrás hacer un programa con JavaScript, tan sólo podrás
mejorar tu página Web con algunas cosas que veremos en apartados posteriores de este
capítulo.

¿Para qué sirve JavaScript?

JavaScript sirve principalmente para mejorar la gestión de la interfaz cliente/servidor. Un
script JavaScript insertado en un documento HTML permite reconocer y tratar localmente,
es decir, en el cliente, los eventos generados por el usuario. Estos eventos pueden ser el
recorrido del propio documento HTML o la gestión de un formulario.

Ejemplo:

Cuando la página HTML es un formulario que permite acceder a una anuario telefónico, se
puede insertar un script que verifique la validez de los parámetros proporcionados por el
usuario. Esta prueba se efectúa localmente y no necesita un acceso a la red.

Por otro lado, también se podrá utilizar JavaScript para efectuar varias opciones a la vez;
por ejemplo, acompañar el acceso a un documento HTML de la visualización de un vídeo o
la ejecución de un applet de Java...

Diferencias con Java.

La principal diferencia entre JavaScript y Java, es que este último es un lenguaje de
programación completo. Lo único que comparten es la misma sintaxis.

JavaScript es un lenguaje que se integra directamente en páginas HTML. Tiene como

características principales las siguientes:

• Es interpretado (que no compilado) por el cliente, es decir,

directamente del programa fuente se pasa a la ejecución de dicho programa,
con lo que al contrario que los lenguajes compilados no se genera ni código
 objeto ni ejecutable para cada m´quina en el que se quiera ejecutar dicho
programa.
• Está basado en objetos. No es, como Java, un lenguaje de
programación orientada a objetos (OOP). JavaScript no emplea clases ni
herencia, ni otras técnicas típicas de la OOP.
• Su código se integra en las páginas HTML, incluido en las propias
páginas.
• No es necesario declarar los tipos de variables que van a utilizarse ya
que como se verá más adelante, JavaScript realiza una conversión
automática de tipos.
• Las referencias a objetos se comprueban en tiempo de ejecución. Esto
es consecuencia de que JavaScript no es un lenguaje compilado.
• No puede escribir automáticamente al disco duro. Por eso decimos
que JavaScript es un lenguaje seguro para el entorno de internet en el que se
aplicará

Utilización de JavaScript en un documento

HTML.
La inserción de un documento HTML se realiza mediante la marca SCRIPT utilizando la
sintaxis:

<SCRIPT>
Código del script
</SCRIPT>

Los atributos de esta marca son:

LANGUAGE="JavaScript"
Precisa el lenguaje del script. Este atributo es obligatorio en ausencia del
atributo SRC.
SRC=url
El atributo SRC precisa el URL del script a insertar en el documento. Este
atributo es opcional, porque el script puede insertarse directamente en un
documento HTML.

Estos dos atributos pueden especificarse simultáneamente. Por ejemplo:

<SCRIPT LANGUAGE="lenguaje" SCR=url>

Código del script
</SCRIPT>

podrá especificarse para insertar en un documento un script de un lenguaje determinado y

que cuyo código fuente se encuentra en un acrhivo especificado en un determinado url. A
continuación enunciaremos algunos puntos a tener encuenta respecto a la introducción de
JavaScript en un documento HTML:

• El script insertado mediante la marca SCRIPT es evaluado por el

cliente tras la visualización de la página HTML. Las funciones definidas no
se ejecutan inmediatamente, dependen de los eventos asociados a la página.
• La inserción del script mediante la marca SCRIPT puede colocarse
en cualquier lugar del documento HTML pero se recomienda colocarla en la
cabecera, es decir, en la zona definida por el HEAD. De este modo, el script
está definido desde el principio del documento, lo que garantiza que éste se
visible en todo el documento.
• Si se definen, además del script mediante el atributo SRC, scripts en
el propio documento, el cliente evaluará en primer lugar el insertado
mediante el atributo SRC y seguidamente los incluidos en el documento.
• Los URL correspondientes a un JavaScript poseen generalmente la
extención .js.
• Es preferible delimitar los scripts insertados en un documento por
comentarios HTML para asegurarse de que el contenido del script no
aparecerá en los clientes que no reconozcan la marca SCRIPT. Por ejemplo:

<SCRIPT LANGUAGE="JavaScript">
<-- Disimula el contenido del script para navegadores
no compatibles
Código del script
//-->
</SCRIPT>

• El lenguaje JavaScript no es case sensitive, es decir, no distinque

mayúsculas de minúsculas salvo en las cadanas de caracteres literales.

Por último, comentar otra forma de introducir scripts en documentos HTML, y es incluir
estos script como controladores de eventos de algunas marcas, como pueden ser la marcas
de imágenes, anclas, links, botonoes, etc. Veamos a continuación un ejemplo:

<A HREF="index.htm" OnClick="alert('ir al índice')">

Ir al índice
</A>

Como puede verse, dentro de la marca, como atributo de esta, se pone un controlador de
eventos y después del signo igual y entre comillas se incluye el código de JavaScript. Ahora
bien, también es posible llamar a una función del HEAD del documento. Se recomienda
esta segunda opción ya que es una manera más limpia y clara de escribir páginas. Se
conseguiría lo mismo que en el ejemplo anterior de esta forma:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<-- Disimula el contenido del script para navegadores incompatibles
function alerta() {
alert(" Ir al índice");
}
//-->
</SCRIPT>
...
</HEAD>

<BODY>
<A HREF="index.htm" OnClick="alerta()">
Ir al índice
</A>

...
</BODY>

Las versiones de JavaScript.

La versión 1.0 de JavaScript nació con el Netscape Navigator 2.0. Posteriormente,
surgieron las versiones 1.1 y 1.2 de JavaScript con las versiones 3 y 4 del Netscape.
También existe una versión 1.3, introducida en la versión 4.07 del Netscape Navigator. Esta
versión es una pequeña revisión de la 1.2 creada para ajustarse al estándar internacional
ECMA que regula el lenguaje JavaScript.

En cuanto a Microsoft Internet Explorer en su versión 3.0 interpreta JScript, que es muy
similar a JavaScript 1.0 pero con algunas incompatibilidades. Pero ya su versión 4.0 soporta
sin nigún problema, la versión 1.1 de JavaScript.

Para tener en cuenta la versiones colocar en el atributo LANGUAGE de la marca SCRIPT la

versión con la que se pienza trabajar. Por ejemplo para la versión:

LANGUAGE="JavaScript1.1"

Los comentarios en JavaScript.

A continuación empezaremos ya en este capítulo a estudiar uno de los elementos más
simples de los que se compone un lenguaje de programaciín, aunque no por ello son los
menos importantes, estamos hablando de los comentarios.

Los comentarios en el código permiten insertar observaciones observaciones del autor del
código para describir las distintas partes del programa. El interprete JavaScript los ignora y
posee por ello una sintaxis particular.

Se distinguen los comentarios en una sola línea, precedidos por la barra oblicua doble // y
los comentarios en varias líneas delimitados por los símbolos /* y por */. Por ejemplo:

// esto es un comentario /* esto es un comentario de varias líneas con

una longitud cualquiera */
 Identificadores y palabras reservadas.
Conocer cual es la sintaxis de los identificadores y cuales son las palabras reservadas son
aspectos de necesario conocimiento antes de empezar a escribir un programa en un lenguaje
de programación determinado.

Identificadores en JavaScript.

Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los

nombres de variables, constantes, funciones, objetos, etc..., que nosotros definimos en
dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares
posteriores a su definición.

Los identificadores deben seguir las siguientes reglas:

• El identificador debe empezar por una letra o por el caracter

'_'.
• Los caracteres siguientes, además de letras o el caracter '_',
pueden ser cifras.

Recordar que le uso de mayúsculas o minúsculas no es importante porque JavaScript no

diferencia de los nombres de mayúsculas o minúsculas en los identificadores. Veamos
algunos ejemplos de nombres de variables:

Num_linea
aux1
_exit

Las palabras reservadas.

Primeramente decir que las palabras reservadas son palabras especiles que se utilizan para
aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse
como identificadores.

A continuación veremos un cuadro en el que se muestran todas las palabras reservadas

existentes en JavaScript, estas palabras tiene o tendrán un significado especial dentro del
lenguaje:
 Algunos ejemplos sencillos.
Una vez que nos hemos empezado a introducir en el mundo de JavaScript es hora de
empezar a ver al lenguaje "en acción" viendo una bateria de ejemplos muy sencillos que
nos permitirán ir adentrándonos en la potencia de este lenguaje.

Ejemplo 1: Visualización de texto mediante una ventana.

Como primer ejemplo no hay nada mejor que el clásico programa ¡Hola mundo!. Éste
mostrará una ventana conteniendo el famoso mensaje cuando se pulse sobre el botón
ejemplo1. Para ello debemos generar el siguiente código fuente.

<CENTER>
<FORM>
<INPUT Type="button" Value=" ejemplo1 " onClick="Alert(' ¡Hola
mundo! ')">
</FORM>
</CENTER>

Ejemplo 2: Definición de una función.

Este ejemplo define una función que calcula el cuadrado de un número y visualiza el
resultado en una ventana parecida a la anterior. Esto se llevará a cabo cuando se pulse sobre
el bot´n ejemplo2.
Como sabemos la función se tendrá que definir entre las marcas (<SCRIPT>,</SCRIPT>)
que se encuentran dentro de la cabecara (HEAD) del documento.

...
<HEAD>
...
<SCRIPT Laguage="JavaScript">
<!--
function Cuadrado(numero) {
return numero * numero;
}
//-->
</SCRIPT>
...
</HEAD>
<BODY>
...
<CENTER><FORM>
El cuadrado de 5 es:
<INPUT Type="button" Value=" ejemplo2 "
onClick="alert(Cuadrado(5))">
</FORM></CENTER>
El cuadrado de 5 es:
Ejemplo 3: Interacción con un formulario.

Este ejemplo es refleja la interacción de un script con un formulario, esta es una de las
aplicaciones en la que los programadores de páginas Web echan mano de JavaScript.
Concretemante en este ejemplo el usuario introducirá una expresión aritmética en un campo
de texto del formulario y el script le pedirá al usuario que la confirme antes de pasar a
evaluarla.
Se comprobará si de verdad la expresión está bien o mal, es decir, no se limitará a
preguntarle al usuario y a fiarse de su respuesta.

...
<HEAD>
...
<SCRIPT Laguage="JavaScript">
<!--
function evalua(form) {
if (confirm("¿Está seguro?"))
form.result.value = eval (form.expr.value);
else
alert("Inténtelo de nuevo.");
}
//-->
</SCRIPT>
...
</HEAD>
<BODY>
...
<CENTER><FORM>
Introduzca la expresión:
<INPUT Type="text" name="expr" Size=10>

Resultado:

<INPUT Type="text" name="result" Size=10>

<INPUT Type="button" Value=" Evaluar "

onClick="evalua(this.form)">

</FORM></CENTER>

Introduzca la expresión:

Resultado:
 Los tipos de datos

Antes de empezar este capítulo hay que aclarar que más que tipos de datos, lo que
JavaScript reconoce son tipos de valores, ya que como veremos más adelante JavaScript no
requiere que las variables tengan un tipo determinado en su declaración, pues que
JavaScript trata a todos los tipos por igual realizando una conversión automática de los
mismos. Ejemplo:

mi_variable = 345; // mi_varible es de tipo entero.

mi_variable = "hola"; //mi_variable es de tipo string.

Por lo tanto, más que de tipos de datos, en JavaScript se habla de representación de datos.

Tipos numéricos.
Los tipos numéricos los podemos dividir en reales y enteros.

Tipo numérico entero.

Los enterosPueden ser representados en tres formatos distintos:

Decimal: enteros en base 10.

Hexadecimal: enteros en base 16. Se coloca antes del número en base 16 0x o 0X.

Octal: enteros en base 8. Colocamos un cero antes de dicho número en octal.

Ejemplo: Estas tres variables númericas tendrán un entero con el mismo valor.

var1 = 20;

var2 = 0x14;

var3 = 024;

Tipo numérico real.

Los reales se componen de una parte entera y otra fraccionaria separada por un punto de la
anterior. La parte fraccionaria puede estar compuesta por un indicador de exponente E o e
seguido de un número entero que indica el valor del exponente. A continuación se
mostrarón algunos ejemplos:

25.478
2.3e45
5.6E-2
-3.789
...

Las strings.
Una string es una ristra de caracteres delimitadas por comillas. Las comillas serán simples o
dobles atendiendo a una determinada regla.

Por defecto se usarán comillas dobles ("), pero si alguna sentencia a de ir incluida entre
dichas comillas, si esa sentencia contiene una string o a su vez otra sentencia que también
deba ir delimitada por dichas comillas, estas comillas serán entonces comillas simples (').
Ejemplo:
confirm("¿Estas seguro?");
OnMouseOver = "confirm('¿Estas seguro?');

Por otro lado, hay que tener en cuenta la escritura de caracteres especiales en lo que
denominamos secuencias de escape. La secuencia de escape comienza siempre con el
carácter \ y acontinuación se escribe otro carácter que representa el código especial o el
número en octal o hexadecimal de su código ASCII. Las secuencias de escape representan
un único carácter en las strings en donde aparecen.

Tipo booleano.
El tipo booleano simplemente distingue entre dos estados, un estado de éxito o de activado
valor verdadero true, y un estado de fracaso o de desactivado, valor false.
El valor nulo.
En JavaScript a las variables se les puede asignar un valor que indica el vacío, este valor es
el valor null.

La conversión de datos.
Antes que nada, recordar que JavaScript no es un lenguaje con tipos; por consiguiente,
cuando se declara una variable no es necesario precisar su tipo. El contenido de la variable
se convertirá automáticamente en el transcurso del programa según su uso.

El esquema de conversión del tipo se basa en el principio siguiente: el tipo asociado

corresponde al de operando de la izquierda. Esto se debe a que la evaluación se realiza de
izquierda a derecha. Por ejemplo, supongamos la definición de las variables siguientes:

var una_string = "7";

var un_numero = 42;

Si evaluamos las siguientes expresiones.

x = una_string + un_numero;
y = una_numero + una_string;

La primera expresión convertirá la variable un_numero en una cadena de caracteres porque

el operando de la izquierda una_string es una cadena de caracteres. Esta expresión
concatena las dos cadenas de caracteres y el resultado x es: "742".

Por el contrario, la segunda expresión convierte la cadena una_string en un valor numérico

porque el operando de la izquierda un_numero, es como su propio nombre indica, un
número. Esta segunda expresión suma los dos números y el resultado y es: 49.

La coversión de tipos no puede hacerse en todos los casos posibles: ciertas cadenas de
caracteres no pueden convertirse en número. Tales conversiones generan un error. Por
ejemplo:

var una_string = "Pepe";

var un_numero = 578;
y = una_numero + una_string;
// ERROR: Pepe no puede convertirse en número

A continuación mostraremos una tabla que resume la conversión de tipos en JavaScript.

Los arrays en JavaScript.
Podemos crear arrays a los que le daremos un nombre y a los que accederemos con un
índice que comenzará desde el elemento número 1 (no desde el 0 como en Java o C/C++).
En los arrays al igual que con las variables no existen tipos predeterminados.

Para crear un array es necesario definirnos una función como la que veremos a
continuación:

function CreaArray(n)
{
this.length = n;
for (var i=1; i<=n; i++)
this[i] = 0;
return this;
}

Comentar sobre la función que la palabra reservada this hace referencia a la variable a
actual, es decir, a la variable que contendrá el array. Por otro lado, observar que los array
tienen una propiedad length que nos muestra la longitud de dicho array. Por último mostrar
el uso de dicha función:

mi_array = new CreaArray (2);

// new: Creamos una instancia del objeto, en este caso un array
// Llenamos el array
mi_array[1] = "Pepe";
mi_array[2] = 35;
longitud = mi_array.length; //longitud será 2

Ejemplo de manejo de vectores

En este ejemplo se permitirá que el cliente que esté navegando por la página inicialice un
vector con un número de elementos determinado (máximo 9). El usuario podrá ir insertando
los elementos y ver el estado del vector en el momento que lo crea oportuno. El valor
inicial de los elementos del vector es cero. Los elementos que se pasan al vector sólo puede
tener tres caracteres como mucho.
El código fuente de esta página será el siguiente:
<HEAD>
...
<SCRIPT>
<!--

// Crea el vector con todos sus elementos a 0.

function CreaArray(n) {
this.length = n;
for (var i=1; i<=n; i++)
this[i] = 0;
return this;
}

// Asigna un elemento en una posición determinada

function AsignaElemento(form,array,pos){
if (array.length < pos)
alert("Asignación fuera de rango");
else
array[pos] = form.elemets.value;
}

// Determina se la dimensión es correcta

function Inicia(form){
var ch=form.number.value;
if (ch>='0' && ch<='9')
return ch;
else {
alert("Dimensión incorrecta");
return -1;
}
}

// Forma una ristra con los elementos del vector

function Mostrar(array){
var resultado="";
for (var i=1; i<=array.length; i++)
resultado += array[i]+ " ";
return resultado;
}

//Variables globales
var numele=0; // Numero de elementos del vector
var pos=1; // Posición a insertar el elemento actual
var vector; // Variable que contendrá el vector

//-->
</SCRIPT>
...
</HEAD>
<BODY>
...
<FORM>
<CENTER>
<H3><U>Inserta elementos en un vector>/U></H3>
</CENTER>
<TABLE>
<tr><td>Introducir el número de elementos del vector:
<input type="text" name="number" size=1
onChange="numele=Inicia(this.form);

vector= new CreaArray(numele);

pos=1">
<!-- onChange: Se activa cuando cambia el
contenido del text.//-->
</tr>
<tr>
<td>Elementos:
<input type="text" name="elemets" size=3>
<td>
<input type="button" value=" insertar "
onClick="alert('Insertar elemento '+pos);

AsignaElemento(this.form,vector,pos);

pos++">
</tr>
<tr><tr>
<input type="text" name="valores" size=45>
<td>
<input type="button" value=" Mostrar Vector "

onClick="this.form.valores.value=Mostrar(vector)">
</tr>
</TABLE>
</FORM>

...
.

Inserta elementos en un vector

Introducir el número de elementos del vector:

Elementos:

Los objetos en JavaScript.

Los objetos se componen de un conjunto de valores propiedades y un conjunto de
operaciones aplicados a esos valores métodos. Son estas últimas las que nos permiten
modificar el estado de dicho objeto, es decir, el valor de sus propiedades.
En JavaScript existen objetos predefinidos. A parte el programador también puede crearse
sus propios objetos.

Las propiedades de los objetos.

Para hacer uso de las propiedades de un objeto basta con utilizar la siguiente notación:

mi_objeto.propiedad

Esto se verá con más claridad en el siguiente ejemplo en el cual tenemos un objeto
Universitario en el que tenemos las propiedades Nombre, Apellido, Edad y Facultad.
Suponiendo que tenemos una variable Uni1 que contienen en un momento determinado un
objeto Universitario:

Uni1.Nombre = "Pedro";
Uni1.Apellido = "Navarro";
Uni1.Edad = 13;
Uni1.Facultad = "Telecomunicaciones";

Pero no sólo podemos acceder a las propiedades de un objeto mediante la notación expuesta
anteriormente, ya que, existe una relación entre los objetos y los arrays, puesto que
podemos acceder a un objeto como si este fuera un array y sus elementos fueran los
propiedades de dicho objeto en el orden en que se definieron. Ejemplo:

Uni1[1] = "Pedro";
Uni1[2] = "Navarro";
Uni1[3] = 13;
Uni1[4] = "Telecomunicaciones";

Uni1["Nombre"] = "Pedro";

Uni1["Apellido"] = "Navarro";

Uni1["Edad"] = 13;

Uni1["Facultad"] = "Telecomunicaciones";

Este tipo de vectores se denominan arrays asociativos.

Los métodos.

Como ya mencionamos con anterioridad un método es una función asignada a un objeto.

Así para asignar una función como método de un objeto se utiliza la siguiente sintaxis:

Objeto.nombreDelMétodo = NombreFunción;
Podemos observar que, nombre del método es la manera en la que queremos nombrar a la
función dentro del objeto.

Un método puede ser llamado en un contexto mediante la sintaxis:

Objeto.nombreDelMétodo(parámetros);

Utilización de la palabra reservada this.

La palabra reservada this permite referenciar al objeto actual. Por ejemplo, supongamos
que la función validate permite validar las propiedades de un objeto mediante un mínimo y
un máximo asociados; tendremos:

function validate(obj, lowval, hival){

if((obj.value < lowval) || (obj.value > hival))
alert("Valor no válido");
}

Se podrá llamar entonces a la función validate a cambio de los valores de un formulario

mediante la palabra reservada this y el atributo OnChange que permite detectar los cambios
de valores. Esto se hace mediante la marca HTML y el evento:

<INPUT TYPE = "text" NAME = "edad"

OnChange = "validate(this,18,99)">

De manera general, la palabra this se refiere al objeto actual.

Comprobación de valores correctos:

La creación de objetos.

Como ya hemos mencionado anteriormente, el cliente y el servidor tienen un conjunto de

objetos predefinidos que pueden ser completados mediante nuevos objetos. La creación de
un objeto se hace en dos etapas:

1. Definir el objeto mediante una función.

2. Crear un objeto mediante la palabra reservada new.
Así, para definir un objeto, se creará una función que permita precisar su nombre, sus
funciones y sus métodos asociados. Por ejemplo, si se quiere crear un objeto universitario
cuyas propiedades serían nombre, apellido, edad y dni, se definirá la función genérica
siguiente:
function Univers(nom, apell, edad, dni){
this.nom = nom;
this.apell = apell;
this.edad = edad;
this.dni = dni;
}
// this: propiedad del objeto a partir de los argumentos
La instacia del objeto la crearemos de la siguiente forma:

alumno = new univers("Juan","Delgado",12,44565789);

Las propiedades de un objeto puedean describirse mediante otros objetos. Por ejemplo:

function Nota_M(curso1, curso2, curso3, final){

this.curso1 = curso1;
this.curso2 = curso2;
this.curso3 = curso3;
this.final = final;
}

Hacemos que el objeto universitario tenga un propiedad del objeto Nota_Media por tanto:

function Univers(nom, apell, edad, dni, exp){

this.nombre = nom;
this.apellido = apell;
this.edad = edad;
this.dni = dni;
this.expediente = exp;
}

Por tanto, para acceder a la nota final:

alumno.expediante.final

Cuando se define un objeto, es posible enriquecer su descripción mediante nuevas

propiedades. Por ejemplo:

alumno.dni = 44567234

Ahora la propiedad dni pertenece a la instancia del objeto contenido en alumno. Esta
modificación no afectará a los otros objetos del tipo universitario, ya que para añadir una
pripiedad a un tipo de objeto esta debe figurar en la definición del mismo.

La definición de métodos en la creación de objetos.

La definición de métodos asociados a un objetos puede precisarse en la definición del

objeto. Por ejemplo, para el objeto universitario definimos una función que muestre el
nombre, apellidos, dni y facultad de un alumno.

function Datos() {
var ristra = this.nombre + " " + this.apellido + " "
+ this.dni + " " + this.edad + " "
+ this.expediente.curso1 + " " +
this.expediente.curso2
+ " " + this.expediente.curso3 + "
" + this.expediente.final;
alert(ristra);
}
//this: objeto al que pertenece el método.

Esta función se convierte en un método asociado al tipo realizando en su definición lo

siguiente:

function Univers(nom, apell, edad, dni, exp){

this.nombre = nom;
this.apellido = apell;
this.edad = edad;
this.expediente = exp;
this.dni = dni;
this.Datos = Datos;
}

Su forma de uso será:

alumno.Datos()

En el siguiente ejemplo se muestra el funcionamiento del tipo universitario que hemos

creado. Para ello creamos el siguiente formulario:

<FORM id=form1 name=form1>

<CENTER><H3>Nota media de la etapa académica</H3>
<TABLE border=1>
<tr><td>Nombre
<td>Primer Apellido
<td>edad
<td>DNI
</tr>
<tr><td><input type="text" name="nombre" value="ninguno" size=15>
<td><input type="text" name="apellido" value="ninguno" size=15>
<td><input type="text" name="edad" value="ninguno" size=15>
<td><input type="text" name="DNI" value="ninguno" size=15>
</tr>
</TABLE>
<p>
<TABLE border=1>
<tr><td>Primer curso
<td>Segundo curso
<td>Tercer curso
<td>Nota final
</tr>
<tr><td><input type="text" name="nota1" value=0 size=4>
<td><input type="text" name="nota2" value=0 size=4>
<td><input type="text" name="nota3" value=0 size=4>
<td><input type="text" name="final" value=0 size=4>
</tr>
</TABLE>
<p>
<input type="button" value=" Ver datos"
onClick="Mostrar_Univers(this.form)">
</CENTER>
</FORM>
La función Mostrar_Univers(form) se define como sigue:
function Mostrar_Univers(form){
var notas = new Nota_M(form.nota1.value, form.nota2.value,
form.nota3.value,
form.final.value);
var alumno = new Univers(form.nombre.value,
form.apellido.value,
form.edad.value, form.DNI.value,
notas);
alumno.Datos();
}
Nota: Como se puede ver en este ejemplo no se comprueba si los datos que se insertan en
el formulario son "correctos", es decir, si las notas están entre 0 y 10 o si los nombres y
apellidos se componen sólo de letras.

Nota media de la etapa académica

Nombre Primer Apellido edad DNI

Primer curso Segundo curso Tercer curso Nota final

Operadores
JavaScript posee una amplia variedad de operadores. Estos operadores los podemos
distinguir en dos grupos: binarios, que actú sobre dos operandos y unarios, que sólo
requieren un operando. Así, su sintaxis general es:

operando1 operador_Binario operando2

operando1 operador_unario

operador_unario operando1

Operadores aritméticos
JavaScript suministra las operaciones básicas con el único añadido del operador que
devuelve el resto de la división entre el operador izquierdo y el derecho. Se carece de
operadores más complejos, aunque el objeto Math definido en JavaScript posee dichas
tareas.
Nota: El operador + aplicado strings, concatena ambas strings en una sola.

Operadores de incremento (++) y decremento (--).

Estos operadores son unarios y realizan el autoincremento y el autodecremento a la variable

que se les aplica. Además de modificar la variable, devuelven el valor de la misma.

El operador de incremento o decremento puede ir delante p detrás de la variable teniendo

diferente significado. Si el operador es ++ se sitúa después de la variable se denomina
postincremento, haciendo que primero tome el valor y después se incremente la variable.
Ejemplo:

n=k++; // El valor de k se asigna a n y luego se incrementa k.

Si el operador ++ se sitúa antes de la variable se denomina preincremento y hace que

primero se incremente la variable y luego se tome el valor. Ejemplo:

n=++k; // Primero se incrementa k y luego se asigna a n.

El operador de decremento actúa de igual forma al de incremento.

Operadores relacionales
Se emplean típicamente en las expresiones condicionales. Los operadores relacionales
devuelven valores booleanos. Los operandos pueden ser tanto númericos como strings.
Operadores lógicos.
Los operandos ló está relacionados con los relacionales ya que normalmente los operandos
que usan son resultado de expresiones relacionales. Los valores resultantes son booleanos.

Operadores bit a bit.

La forma de trabajar de estos operadores es convertir a binario los operandos y luego operar
con ellos bit a bit.

Nota: Los operadores de propagación toman dos operandos: el primero es la variable a

propagar y el segundo es el número de posiciones a propagar.

Operadores de asignación.
La asignación también es un operador que devuelve la variable modificada. El operador de
asignación en JavaScript es =. Los operadores de asignación que se muestran a
continuación no son sino abreviaturas que hacen más cómoda y simples las expresiones,
aunque a veces sean más ilegibles.
 Otros operadores.
Operador de selección.

Este operador se utiliza para ejecutar una operación u otra dependiendo de la condición. El
formato es el siguiente:

Condición ? Exp1 : Exp2

Si se cumple la condición se evalú y se devuelve la expresión Exp1 si no la Exp2. Podemos

poner un sólo valor. Ejemplo:

i = (x!=y)?6:(k+1)

El operador new.

Este operador se va a utilizar para crear una instacia de un tipo de objetos previamente
definido. La sintaxis a seguir es la siguiente:

variableObjeto = new tipoDeObjeto(parámetro 1, parámetro 2, ...)

Estos parámetros son los que se le pasan al constructor de dicho objeto en cuestión.

El operador typeof.

Este operador aplicado a una variable devuelve el tipo de objeto al que pertenece el dato
contenido por dicha variable. Su sintaxis es:
 typeof(variable)

Precedencia.
La precedencia de los operadores va a determinar el orden en que se ejecuten en una
expresión determinada. Usando paréntesis controlaremos que las operaciones se lleven a
cabo según nosotros queramos. En JavaScript la precedencia de los operadores de mayor a
menor es la siguiente:

Estructuras de control

JavaScript posee las sentencias de control típicas de los lenguajes de alto nivel. A
continuación veremos la sintaxis de las mismas.

Declaración de variables.
En cuanto a las variables en JavaScript decir que no se les asigna un tipo predefinido. En
JavaScript el tipo de las variables dependen del valor que contengan las mismas en cada
momento. Por tanto se realiza una conversión automática de tipos.

JavaScript reconoce los siguientes tipos de valores:

1. Números: enteros y reales.

2. Valores booleanos: true y false.
3. Strings.
4. El valor null.
5. Los objetos: Creados por el programador o predefinidos por el
lenguaje.
Dado que no existen tipos de variables a priori, no hemos de especificar el tipo de variable
cuando la declaramos. La declaración de variables se hace anteponiendo la palabra
reservada var al nombre de la variable.

var mi_variable;
Es posible asignarle el valor cuando la declaramos, por ejemplo:
var mi_entero = 124;

La sentencia if.
La sentencia if tiene la forma:

if ( Condición ) Instrucción 1 o bloque de instrucciones;

[ else Instrucción 2 o bloque de instrucciones; ]
Los paréntesis asociados que delimitan la condición no son opcionales. En caso de que la
condición sea verdadera se ejecutará la instrucción 1; en caso contrario se ejecuta si existe
la instrucción 2.

Un bloque de instrucciones es un conjunto de intrucciones delimitadas por llaves. Es decir:

{
Instrucción 1;
Instrucción 2;
...
Instrucción N;
}

La sentencia while.
La sentencia while tiene la forma:

while ( Condición ) Instrucción o bloque de instrucciones;

Los paréntesis no son opcionales. Si se cumple la condición se ejecute la instrucción o el
bloque de instrucciones y se repite el proceso.

La sentencia for.
En cuando a dicha sentencia, en JavaScript podemos distinguir dos variantes:

El bucle for "clásico".

Este bucle, como a continuación podremos ver, tiene una sintaxis muy parecida a la de
C/C++.

for ([inicialización]; [condición]; [expresión] )

Instrucción o bloque de instrucciones;
En esta sintaxis:
Inicialización: Crea la variable contador y le da un valor inicial.

Condición: lo que se debe cumplir para que el bucle se ejecute. Depende de la variable
índice.

Actualización: Actualiza el valor de la variable índice.

El equivalente de esta expresión con while es:

inicialización;
while (condición )
{
Instrucción 1;
Instrucción 2;
...
Instrucción N;
expresión;
}

El bucle for/in.

Esta estructura itera una variable var sobre todas las propiedades de un objeto obj que se le
pasa. Así para cada valor de var se ejecutaran las sentencias del bucle. Por lo tanto, el bucle
tendrá tantas iteraciones como propiedades el objeto y en cada iteración la variable tendrá
el valor de la propiedad del objeto correspondiente con dicha iteración. Su sintaxis es:

for (var in obj)

Instrucción o bloque de instrucciones;

La sentencia break.
La sentencia break se puede colocar dentro de un bucle o bucles anidados. Cuando se
ejecuta la sentencia break se abandona el bucle más interno. A todos los efectos la
sentencia break actúa como un salto a la instrucción siguiente al bucle en el que se ejecuta.

La sentencia continue.
La sentencia continue, no abandona el bucle si no hace que se ejecute la siguiente
iteración. En el bucle while la ejecución del continue hace que el flujo del programa salte a
la condición. En el bucle for la ejecución del continue hace que la expresión de
incremento, para después continuar normalmente con la condición. Es decir, la ejecución
del continue evita que se ejecute el resto del cuerpo del bucle.

La sentencia switch.
Hace que se seleccione un grupo de sentencias entre varias posibles. Su sintaxis es:

switch ( Expresión )
{
case Valor 1: Instrucción o bloque de instrucciones;
[break;]
case Valor 2: Instrucción o bloque de instrucciones;
[break;]
case Valor 3: Instrucción o bloque de instrucciones;
[break;]
...
case Valor N: Instrucción o bloque de instrucciones;
[break;]
[default:]Instrucción o bloque de instrucciones;
}
La expresión entre paréntesis del switch debe ser entera. Su resultado se comparará con los
distintos valores del case. Si coincide con uno de ellos se pasará a la instrucción siguiente
al case con dicho valor y se seguirán ejecutando las instrucciones consecutivas hasta
encontrar una instrucción break o alcanzar el cierra llaves del switch. En caso de que el
resultado de la expresión no coincida con ningún valor se pasará la ejecución a la
instrucción siguiente de la etiqueta default, si la hubiera, y se continuará como un case. Los
valores en los case pueden ser una expresión constante. No puede haber dos case con el
mismo valor.

Las funciones
Definición de funciones.
La instrucción function permite la definición de funciones. Después de esta palabra
reservada se coloca el nombre de la función seguido de una lista de argumentos delimitados
por paréntesis y separados por comas.

function nombre (param1, param2,..., paramn){

instrucciones en JavaScript;
}

La sentencia return.
La sentencia return es la que permite devolver el resultado de una función. En el ejemplo
que se verá a continuación, se muestra una función que devuelve el área de un cuadrado de
lado l.

function Area(lado){
return lado*lado;
}
 Propiedades de las funciones.
JavaScript asocia a cada función dos propiedades: arguments y caller. Estas propiedades
permiten respectivamente la gestión de los parámetros opcionales y la identificacíón de la
función que llama.

La propiedad caller.

Muestra el nombre de la función que llama, por lo tanto, esta propiedad devolverá una
cadena de caracteres.

La propiedad arguments.

Es un array que contiene los parámetros que le son pasados a la función. Por ejemplo, la
función suma definida como:

function Suma(x){
var sumandos = suma.arguments;
var num_op = suma.arguments.length;
var resultado = 0;
for (var i=0; i<num_op; i++)
resultado += sumandos[i];
return resultado;
}

Vemos como esta función permite calcular la suma de los números pasados como
argumentos. Así, Suma(4,5,7) devuelve 16 y Suma(56) devuelve 56.

Consideraciones a tener en cuenta.

Antes de empezar a trabajar con funciones es necesario tener en cuenta los siguientes
puntos:

• El lenguaje JavaScript no permite las definiciones anidadas de

funciones.
• El paso de parámetros se realiza por valor. Es decir, si una función
modifica el contenido de sus argumentos, esta modificación es local y no
repercute ni globalmente ni a la función que llama.

Las funciones predefinidas por el lenguaje.

La función eval.

La función eval tiene como argumento una expresión y devuelve el valor de la misma. Esta
función resulta útil para evaluar una cadena de caracteres que representa una expresión
numérica. La edición efectuada mediante un campo de formulario es una cadena de
caracteres que a veces es necesario convertir en valor numérico. El código siguiente ilustra
este ejemplo permitiendo al usuario introducir una expreción numérica y visualiza a
continuación el valor de la expresión.

<SCRIPT>
function calcula(obj){
obj.result.value = eval(obj.expr.value)
}
</SCRIPT>

<FORM NAME="evalua">
Introducir expresión:
<INPUT TYPE="text" NAME="expr" SIZE=20>
<br>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=20>
<br>
<INPUT TYPE="button" VALUE="evalua"
onClick="calcula(this.form)">
</FORM>

Introducir expresión:
Resultado:

Las funciones escape y unescape.

Estas dos funciones permiten codificar cadenas de caracteres en formato URL. Esta
codificación es necesaria en la creación automática de enlaces de hipertexto o en la
definición de propiedades persistentes como los Cookies. Ejemplo:

escape("#"); // devuelve %23

unescape("%23"); // devuelve #

Ejemplo
<form>
Introducir carácter en formato URL o normal:
<input type="text" name="char" size=5>
<br>
<INPUT type="radio" name="codificacion" value="normal"

onClick="this.form.char.value=escape(this.form.char.value)">
formato estándar a URL<br>
<INPUT type="radio" name="codificacion" value="URL"

onClick="this.form.char.value=unescape(this.form.char.value)">
formato URL a estándar<br>
</form>
Introducir carácter en formato URL o normal:
formato estándar a URL
formato URL a estándar

La función isNaN.

Función que comprueba si el valor pasado por parámetros es númerico o no. El resultado de
esta función es un booleano. Es decir, evalúa un argumento para ver si es NaN: Not
Number.

isNaN(valor de entrada)

Ejemplo
<SCRIPT>
function Comprueba(form){
var number = parseFloat(form.valor.value);
if (isNaN(number)==true)
alert("No es numérico");
else
form.valor.value = number;
alert("Es numérico");
}
</SCRIPT>

...

<form>
Introducir un valor numérico:
<input type="text" name="valor">
<br>
<input type="button" value=" Comprobar " onClick="Comprueba(this.form)">
</form>

Introducir un valor numérico:

Las función parseFloat.

Convierte una string a un número en punto flotante. Si se encuentra otros caracteres que no
sean números, el signo '+', el '-' o un exponente, devuelve el valor encontrado hasta ese
punto. Del mismo modo, si el primer caracter no se puede convertir a número devolverá
cero.

parseFloat(cadena de caracteres)

Ejemplo
<form>
Convierte a real:
<input type="text" name="float">
<br>
<input type="button" value=" Convierte "
onClick="this.form.float.value=parseFloat(this.form.float.value)">
</form>

Convierte a real:

Las función parseInt.

Convierte una cadena de caracteres de entrada a un número entero con una base
especificada. La base puede ser 8, 10 ó 16. Si se encuentra otros caracteres que no sean
números, el signo '+', el '-' o un exponente, devuelve el valor encontrado hasta ese punto.
Del mismo modo, si el primer caracter no se puede convertir a número devolverá cero.

//base es opcional.
parseInt(ristra,base)

Ejemplo
Introducir entero:
<input type="text" name="int">
<br>
<INPUT type="radio" name="conversion" value="decimal"
onClick="this.form.int.value=parseInt(this.form.int.value,
10)">
Expresar entero en decimal<br>
<INPUT type="radio" name="conversion" value="hexadecimal"
onClick="this.form.int.value=parseInt(this.form.int.value,
16)">
Expresar entero en hexadecimal<br>
<INPUT type="radio" name="conversion" value="octal"
onClick="this.form.int.value=parseInt(this.form.int.value,
8)">
Expresar entero en octal<br>
</form>

Introducir entero:
Expresar entero en decimal
Expresar entero en hexadecimal
Expresar entero en octal