You are on page 1of 29

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

etc. dependen de los eventos asociados a la página. • 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. el script está definido desde el principio del documento. • Los URL correspondientes a un JavaScript poseen generalmente la extención . como pueden ser la marcas de imágenes. Se conseguiría lo mismo que en el ejemplo anterior de esta forma: <HEAD> <SCRIPT LANGUAGE="JavaScript"> <-. además del script mediante el atributo SRC. anclas.Disimula el contenido del script para navegadores incompatibles function alerta() { alert(" Ir al índice"). De este modo. se pone un controlador de eventos y después del signo igual y entre comillas se incluye el código de JavaScript. . Por ejemplo: <SCRIPT LANGUAGE="JavaScript"> <-. el cliente evaluará en primer lugar el insertado mediante el atributo SRC y seguidamente los incluidos en el documento. lo que garantiza que éste se visible en todo el documento. Veamos a continuación un ejemplo: <A HREF="index. y es incluir estos script como controladores de eventos de algunas marcas. dentro de la marca. • La inserción del script mediante la marca SCRIPT puede colocarse en cualquier lugar del documento HTML pero se recomienda colocarla en la cabecera. como atributo de esta. • Si se definen. no distinque mayúsculas de minúsculas salvo en las cadanas de caracteres literales.js. botonoes. Por último. comentar otra forma de introducir scripts en documentos HTML. links. Se recomienda esta segunda opción ya que es una manera más limpia y clara de escribir páginas. también es posible llamar a una función del HEAD del documento.Disimula el contenido del script para navegadores no compatibles Código del script //--> </SCRIPT> • El lenguaje JavaScript no es case sensitive.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. Ahora bien. es decir. Las funciones definidas no se ejecutan inmediatamente. en la zona definida por el HEAD.htm" OnClick="alert('ir al índice')"> Ir al índice </A> Como puede verse. es decir. scripts en el propio documento.

Por ejemplo para la versión: LANGUAGE="JavaScript1. precedidos por la barra oblicua doble // y los comentarios en varias líneas delimitados por los símbolos /* y por */..2 creada para ajustarse al estándar internacional ECMA que regula el lenguaje JavaScript.0 pero con algunas incompatibilidades. </BODY> Las versiones de JavaScript. Por ejemplo: // esto es un comentario /* esto es un comentario de varias líneas con una longitud cualquiera */ . El interprete JavaScript los ignora y posee por ello una sintaxis particular.. </HEAD> <BODY> <A HREF="index.1" Los comentarios en JavaScript. También existe una versión 1. En cuanto a Microsoft Internet Explorer en su versión 3.0 de JavaScript nació con el Netscape Navigator 2. Posteriormente. aunque no por ello son los menos importantes. estamos hablando de los comentarios. que es muy similar a JavaScript 1. Pero ya su versión 4.0 interpreta JScript.. surgieron las versiones 1.} //--> </SCRIPT> . Se distinguen los comentarios en una sola línea. la versión 1.07 del Netscape Navigator. introducida en la versión 4.1 y 1. Los comentarios en el código permiten insertar observaciones observaciones del autor del código para describir las distintas partes del programa.htm" OnClick="alerta()"> Ir al índice </A> . 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.0.3.1 de JavaScript.0 soporta sin nigún problema. Esta versión es una pequeña revisión de la 1. Para tener en cuenta la versiones colocar en el atributo LANGUAGE de la marca SCRIPT la versión con la que se pienza trabajar.2 de JavaScript con las versiones 3 y 4 del Netscape.. La versión 1.

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. objetos. que nosotros definimos en dicho lenguaje. Veamos algunos ejemplos de nombres de variables: Num_linea aux1 _exit Las palabras reservadas.. Identificadores en JavaScript. Los identificadores deben seguir las siguientes reglas: • El identificador debe empezar por una letra o por el caracter '_'. 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. además de letras o el caracter '_'. estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definición. A continuación veremos un cuadro en el que se muestran todas las palabras reservadas existentes en JavaScript. • Los caracteres siguientes.. pueden ser cifras. etc. constantes. estas palabras tiene o tendrán un significado especial dentro del lenguaje: . Primeramente decir que las palabras reservadas son palabras especiles que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables. funciones.. Estas palabras no pueden usarse como identificadores. Identificadores y palabras reservadas.

. 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. 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. } //--> </SCRIPT> . <HEAD> . <CENTER><FORM> El cuadrado de 5 es: <INPUT Type="button" Value=" ejemplo2 " onClick="alert(Cuadrado(5))"> </FORM></CENTER> El cuadrado de 5 es: ... Como primer ejemplo no hay nada mejor que el clásico programa ¡Hola mundo!. <SCRIPT Laguage="JavaScript"> <!-- function Cuadrado(numero) { return numero * numero. Ejemplo 1: Visualización de texto mediante una ventana.. Éste mostrará una ventana conteniendo el famoso mensaje cuando se pulse sobre el botón ejemplo1. 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. Algunos ejemplos sencillos. Esto se llevará a cabo cuando se pulse sobre el bot´n ejemplo2.</SCRIPT>) que se encuentran dentro de la cabecara (HEAD) del documento. Como sabemos la función se tendrá que definir entre las marcas (<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..value). <HEAD> . es decir. else alert("Inténtelo de nuevo..").expr.value = eval (form.. Se comprobará si de verdad la expresión está bien o mal. </HEAD> <BODY> . esta es una de las aplicaciones en la que los programadores de páginas Web echan mano de JavaScript.. no se limitará a preguntarle al usuario y a fiarse de su respuesta.form)"> </FORM></CENTER> Introduzca la expresión: Resultado: . <SCRIPT Laguage="JavaScript"> <!-- function evalua(form) { if (confirm("¿Está seguro?")) form. . 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.Ejemplo 3: Interacción con un formulario..result.. Este ejemplo es refleja la interacción de un script con un formulario. } //--> </SCRIPT> ..

Los tipos de datos Antes de empezar este capítulo hay que aclarar que más que tipos de datos. pues que JavaScript trata a todos los tipos por igual realizando una conversión automática de los mismos. lo que JavaScript reconoce son tipos de valores. Tipos numéricos. Tipo numérico entero. Hexadecimal: enteros en base 16. //mi_variable es de tipo string. La parte fraccionaria puede estar compuesta por un indicador de exponente E o e . Ejemplo: Estas tres variables númericas tendrán un entero con el mismo valor. Los tipos numéricos los podemos dividir en reales y enteros. Colocamos un cero antes de dicho número en octal. Octal: enteros en base 8. Los enterosPueden ser representados en tres formatos distintos: Decimal: enteros en base 10. Los reales se componen de una parte entera y otra fraccionaria separada por un punto de la anterior. Se coloca antes del número en base 16 0x o 0X. mi_variable = "hola". Tipo numérico real. // mi_varible es de tipo entero. var2 = 0x14. var1 = 20. var3 = 024. ya que como veremos más adelante JavaScript no requiere que las variables tengan un tipo determinado en su declaración. Por lo tanto. en JavaScript se habla de representación de datos. Ejemplo: mi_variable = 345. más que de tipos de datos.

A continuación se mostrarón algunos ejemplos: 25.. Las comillas serán simples o dobles atendiendo a una determinada regla. Ejemplo: confirm("¿Estas seguro?"). OnMouseOver = "confirm('¿Estas seguro?'). Por defecto se usarán comillas dobles ("). pero si alguna sentencia a de ir incluida entre dichas comillas.seguido de un número entero que indica el valor del exponente.6E-2 -3. Tipo booleano. si esa sentencia contiene una string o a su vez otra sentencia que también deba ir delimitada por dichas comillas. un estado de éxito o de activado valor verdadero true.3e45 5. estas comillas serán entonces comillas simples (').789 . 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. Una string es una ristra de caracteres delimitadas por comillas. Las strings. Por otro lado. Las secuencias de escape representan un único carácter en las strings en donde aparecen..478 2. . valor false. El tipo booleano simplemente distingue entre dos estados. hay que tener en cuenta la escritura de caracteres especiales en lo que denominamos secuencias de escape. y un estado de fracaso o de desactivado.

por consiguiente. la segunda expresión convierte la cadena una_string en un valor numérico porque el operando de la izquierda un_numero.El valor nulo. La conversión de datos. En JavaScript a las variables se les puede asignar un valor que indica el vacío. Por el contrario. Tales conversiones generan un error. var un_numero = 578. // ERROR: Pepe no puede convertirse en número A continuación mostraremos una tabla que resume la conversión de tipos en JavaScript. 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. x = una_string + un_numero. Si evaluamos las siguientes expresiones. Esta expresión concatena las dos cadenas de caracteres y el resultado x es: "742". es como su propio nombre indica. cuando se declara una variable no es necesario precisar su tipo. Por ejemplo. este valor es el valor null. El contenido de la variable se convertirá automáticamente en el transcurso del programa según su uso. Esta segunda expresión suma los dos números y el resultado y es: 49. 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: var una_string = "Pepe". recordar que JavaScript no es un lenguaje con tipos. supongamos la definición de las variables siguientes: var una_string = "7". y = una_numero + una_string. La coversión de tipos no puede hacerse en todos los casos posibles: ciertas cadenas de caracteres no pueden convertirse en número. Antes que nada. y = una_numero + una_string. un número. var un_numero = 42. .

es decir. a la variable que contendrá el array. 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++). mi_array[2] = 35. observar que los array tienen una propiedad length que nos muestra la longitud de dicho array. El código fuente de esta página será el siguiente: . Los elementos que se pasan al vector sólo puede tener tres caracteres como mucho.Los arrays en JavaScript. Por otro lado.length. // new: Creamos una instancia del objeto. return this. } Comentar sobre la función que la palabra reservada this hace referencia a la variable a actual. i++) this[i] = 0. for (var i=1. Por último mostrar el uso de dicha función: mi_array = new CreaArray (2). //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). Para crear un array es necesario definirnos una función como la que veremos a continuación: function CreaArray(n) { this.length = n. El usuario podrá ir insertando los elementos y ver el estado del vector en el momento que lo crea oportuno. longitud = mi_array. En los arrays al igual que con las variables no existen tipos predeterminados. i<=n. en este caso un array // Llenamos el array mi_array[1] = "Pepe". El valor inicial de los elementos del vector es cero.

i++) resultado += array[i]+ " "..value.elemets. <FORM> <CENTER> <H3><U>Inserta elementos en un vector>/U></H3> </CENTER> <TABLE> . else { alert("Dimensión incorrecta"). i++) this[i] = 0.pos){ if (array. return this. function CreaArray(n) { this. i<=array.. // Posición a insertar el elemento actual var vector. // Variable que contendrá el vector //--> </SCRIPT> . if (ch>='0' && ch<='9') return ch..array. } // Asigna un elemento en una posición determinada function AsignaElemento(form..length = n. } // Determina se la dimensión es correcta function Inicia(form){ var ch=form. else array[pos] = form. } //Variables globales var numele=0. i<=n.<HEAD> . for (var i=1.number. return resultado.value. </HEAD> <BODY> .length < pos) alert("Asignación fuera de rango"). <SCRIPT> <!-- // Crea el vector con todos sus elementos a 0. for (var i=1. return -1. // Numero de elementos del vector var pos=1. } } // Forma una ristra con los elementos del vector function Mostrar(array){ var resultado=""..length..

value=Mostrar(vector)"> </tr> </TABLE> </FORM> . pos=1"> <!-.form.pos). el valor de sus propiedades.<tr><td>Introducir el número de elementos del vector: <input type="text" name="number" size=1 onChange="numele=Inicia(this. es decir..//--> </tr> <tr> <td>Elementos: <input type="text" name="elemets" size=3> <td> <input type="button" value=" insertar " onClick="alert('Insertar elemento '+pos). Los objetos se componen de un conjunto de valores propiedades y un conjunto de operaciones aplicados a esos valores métodos.vector.onChange: Se activa cuando cambia el contenido del text. . . pos++"> </tr> <tr><tr> <input type="text" name="valores" size=45> <td> <input type="button" value=" Mostrar Vector " onClick="this. AsignaElemento(this. Son estas últimas las que nos permiten modificar el estado de dicho objeto.form.form)..valores. Inserta elementos en un vector Introducir el número de elementos del vector: Elementos: Los objetos en JavaScript. vector= new CreaArray(numele).

Uni1[3] = 13. Uni1["Facultad"] = "Telecomunicaciones". Como ya mencionamos con anterioridad un método es una función asignada a un objeto. Apellido. Las propiedades de los objetos. Este tipo de vectores se denominan arrays asociativos. Ejemplo: Uni1[1] = "Pedro". Uni1. Suponiendo que tenemos una variable Uni1 que contienen en un momento determinado un objeto Universitario: Uni1. Así para asignar una función como método de un objeto se utiliza la siguiente sintaxis: Objeto. Uni1[2] = "Navarro". A parte el programador también puede crearse sus propios objetos. Edad y Facultad. Uni1.En JavaScript existen objetos predefinidos. Uni1[4] = "Telecomunicaciones". ya que.Edad = 13.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. Pero no sólo podemos acceder a las propiedades de un objeto mediante la notación expuesta anteriormente. existe una relación entre los objetos y los arrays. Uni1["Apellido"] = "Navarro". Uni1["Nombre"] = "Pedro". . 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.Facultad = "Telecomunicaciones". Uni1["Edad"] = 13.nombreDelMétodo = NombreFunción. Para hacer uso de las propiedades de un objeto basta con utilizar la siguiente notación: mi_objeto.Nombre = "Pedro". Los métodos. Uni1.Apellido = "Navarro".

Un método puede ser llamado en un contexto mediante la sintaxis: Objeto.nombreDelMétodo(parámetros). Definir el objeto mediante una función. tendremos: function validate(obj.edad = edad. el cliente y el servidor tienen un conjunto de objetos predefinidos que pueden ser completados mediante nuevos objetos. dni){ this. supongamos que la función validate permite validar las propiedades de un objeto mediante un mínimo y un máximo asociados. edad y dni. si se quiere crear un objeto universitario cuyas propiedades serían nombre. Así.dni = dni. this. hival){ if((obj. La creación de un objeto se hace en dos etapas: 1. } 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. } // this: propiedad del objeto a partir de los argumentos . nombre del método es la manera en la que queremos nombrar a la función dentro del objeto. this.18.value > hival)) alert("Valor no válido"). se creará una función que permita precisar su nombre. edad.99)"> De manera general. para definir un objeto. la palabra this se refiere al objeto actual.value < lowval) || (obj. se definirá la función genérica siguiente: function Univers(nom. this.Podemos observar que. sus funciones y sus métodos asociados. Por ejemplo. Crear un objeto mediante la palabra reservada new. Por ejemplo. Comprobación de valores correctos: La creación de objetos. 2. lowval. apell. Como ya hemos mencionado anteriormente. apellido.apell = apell. Utilización de la palabra reservada this. Esto se hace mediante la marca HTML y el evento: <INPUT TYPE = "text" NAME = "edad" OnChange = "validate(this. La palabra reservada this permite referenciar al objeto actual.nom = nom.

curso2 + " " + this.expediente. exp){ this.44565789).apellido = apell.curso2 = curso2. curso3. La definición de métodos asociados a un objetos puede precisarse en la definición del objeto.curso3 + " " + this.dni = 44567234 Ahora la propiedad dni pertenece a la instancia del objeto contenido en alumno.curso3 = curso3. this. apellidos.curso1 + " " + this.expediante. final){ this.dni + " " + this."Delgado". ya que para añadir una pripiedad a un tipo de objeto esta debe figurar en la definición del mismo.apellido + " " + this.final.nombre + " " + this. this. this.expediente. this. Las propiedades de un objeto puedean describirse mediante otros objetos. Por ejemplo: function Nota_M(curso1.expediente. edad. para el objeto universitario definimos una función que muestre el nombre.edad + " " + this. apell.curso1 = curso1.final Cuando se define un objeto. dni y facultad de un alumno. } Hacemos que el objeto universitario tenga un propiedad del objeto Nota_Media por tanto: function Univers(nom.dni = dni.nombre = nom. dni.expediente = exp.expediente. alert(ristra). } Por tanto. } . es posible enriquecer su descripción mediante nuevas propiedades. Por ejemplo.edad = edad. this.final = final.12.La instacia del objeto la crearemos de la siguiente forma: alumno = new univers("Juan". La definición de métodos en la creación de objetos. this. Esta modificación no afectará a los otros objetos del tipo universitario. this. function Datos() { var ristra = this. para acceder a la nota final: alumno. Por ejemplo: alumno. curso2.

form)"> </CENTER> .edad = edad.Datos = Datos. this. apell. exp){ this.Datos() En el siguiente ejemplo se muestra el funcionamiento del tipo universitario que hemos creado.//this: objeto al que pertenece el método. this. this. edad. this. this.expediente = exp.nombre = nom.apellido = apell. } Su forma de uso será: alumno.dni = dni. Esta función se convierte en un método asociado al tipo realizando en su definición lo siguiente: function Univers(nom. 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. dni.

var alumno = new Univers(form. Así. form. } Nota: Como se puede ver en este ejemplo no se comprueba si los datos que se insertan en el formulario son "correctos".nota2.value.</FORM> La función Mostrar_Univers(form) se define como sigue: function Mostrar_Univers(form){ var notas = new Nota_M(form. 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.value. que sólo requieren un operando. . alumno. si las notas están entre 0 y 10 o si los nombres y apellidos se componen sólo de letras.Datos(). que actú sobre dos operandos y unarios.nota3. Estos operadores los podemos distinguir en dos grupos: binarios. form. notas).edad.apellido.final.value). Se carece de operadores más complejos.value. es decir.nombre.nota1.DNI. form. aunque el objeto Math definido en JavaScript posee dichas tareas.value. form. form.value.value.value. 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. form.

// El valor de k se asigna a n y luego se incrementa k. haciendo que primero tome el valor y después se incremente la variable.Nota: El operador + aplicado strings. El operador de decremento actúa de igual forma al de incremento. Además de modificar la variable. // Primero se incrementa k y luego se asigna a n. El operador de incremento o decremento puede ir delante p detrás de la variable teniendo diferente significado. Operadores relacionales Se emplean típicamente en las expresiones condicionales. 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. devuelven el valor de la misma. Operadores de incremento (++) y decremento (--). concatena ambas strings en una sola. Ejemplo: n=k++. Ejemplo: n=++k. Si el operador es ++ se sitúa después de la variable se denomina postincremento. Los operandos pueden ser tanto númericos como strings. . Estos operadores son unarios y realizan el autoincremento y el autodecremento a la variable que se les aplica. Los operadores relacionales devuelven valores booleanos.

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. 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. Operadores de asignación.Operadores lógicos. Operadores bit a bit. El operador de asignación en JavaScript es =. La asignación también es un operador que devuelve la variable modificada. La forma de trabajar de estos operadores es convertir a binario los operandos y luego operar con ellos bit a bit. aunque a veces sean más ilegibles. 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. .

Este operador aplicado a una variable devuelve el tipo de objeto al que pertenece el dato contenido por dicha variable. 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. Este operador se utiliza para ejecutar una operación u otra dependiendo de la condición.. La sintaxis a seguir es la siguiente: variableObjeto = new tipoDeObjeto(parámetro 1.. Otros operadores. 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. Su sintaxis es: . Podemos poner un sólo valor.) Estos parámetros son los que se le pasan al constructor de dicho objeto en cuestión. parámetro 2. El operador typeof. Operador de selección. .

Valores booleanos: true y false. Los objetos: Creados por el programador o predefinidos por el lenguaje. typeof(variable) Precedencia. JavaScript reconoce los siguientes tipos de valores: 1. Por tanto se realiza una conversión automática de tipos. 4. En cuanto a las variables en JavaScript decir que no se les asigna un tipo predefinido. A continuación veremos la sintaxis de las mismas. Números: enteros y reales. El valor null. 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. La precedencia de los operadores va a determinar el orden en que se ejecuten en una expresión determinada. . 3. 5. En JavaScript el tipo de las variables dependen del valor que contengan las mismas en cada momento. Strings. 2. Declaración de variables. Usando paréntesis controlaremos que las operaciones se lleven a cabo según nosotros queramos.

. La sentencia for. en JavaScript podemos distinguir dos variantes: El bucle for "clásico". en caso contrario se ejecuta si existe la instrucción 2. La sentencia while tiene la forma: while ( Condición ) Instrucción o bloque de instrucciones. En cuando a dicha sentencia. Los paréntesis no son opcionales. ] Los paréntesis asociados que delimitan la condición no son opcionales. La sentencia if tiene la forma: if ( Condición ) Instrucción 1 o bloque de instrucciones. [ else Instrucción 2 o bloque de instrucciones. Este bucle. Es decir: { Instrucción 1. [expresión] ) Instrucción o bloque de instrucciones.. Instrucción 2. como a continuación podremos ver. no hemos de especificar el tipo de variable cuando la declaramos. Si se cumple la condición se ejecute la instrucción o el bloque de instrucciones y se repite el proceso. La sentencia if. ..Dado que no existen tipos de variables a priori. } La sentencia while. [condición]. var mi_variable. Es posible asignarle el valor cuando la declaramos. for ([inicialización]. Un bloque de instrucciones es un conjunto de intrucciones delimitadas por llaves. tiene una sintaxis muy parecida a la de C/C++. por ejemplo: var mi_entero = 124. Instrucción N. La declaración de variables se hace anteponiendo la palabra reservada var al nombre de la variable. En caso de que la condición sea verdadera se ejecutará la instrucción 1.

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. Depende de la variable índice. Su sintaxis es: switch ( Expresión ) . while (condición ) { Instrucción 1. Esta estructura itera una variable var sobre todas las propiedades de un objeto obj que se le pasa. Actualización: Actualiza el valor de la variable índice. La sentencia switch. La sentencia continue. El equivalente de esta expresión con while es: inicialización. Así para cada valor de var se ejecutaran las sentencias del bucle. Instrucción N. En el bucle for la ejecución del continue hace que la expresión de incremento.En esta sintaxis: Inicialización: Crea la variable contador y le da un valor inicial. Hace que se seleccione un grupo de sentencias entre varias posibles. expresión. En el bucle while la ejecución del continue hace que el flujo del programa salte a la condición. Instrucción 2. A todos los efectos la sentencia break actúa como un salto a la instrucción siguiente al bucle en el que se ejecuta. } El bucle for/in. . Condición: lo que se debe cumplir para que el bucle se ejecute. para después continuar normalmente con la condición. La sentencia break se puede colocar dentro de un bucle o bucles anidados. La sentencia continue.. Por lo tanto. La sentencia break. Cuando se ejecuta la sentencia break se abandona el bucle más interno. Es decir. no abandona el bucle si no hace que se ejecute la siguiente iteración.. la ejecución del continue evita que se ejecute el resto del cuerpo del bucle.

y se continuará como un case... [break. [break. } . } La expresión entre paréntesis del switch debe ser entera. 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. La sentencia return es la que permite devolver el resultado de una función. param2. 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. paramn){ instrucciones en JavaScript. case Valor N: Instrucción o bloque de instrucciones. No puede haber dos case con el mismo valor. [break. [break. Su resultado se comparará con los distintos valores del case. si la hubiera. Las funciones Definición de funciones.] . function Area(lado){ return lado*lado. 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.. La instrucción function permite la definición de funciones.] [default:]Instrucción o bloque de instrucciones.{ case Valor 1: Instrucción o bloque de instrucciones.] case Valor 3: Instrucción o bloque de instrucciones.. se muestra una función que devuelve el área de un cuadrado de lado l...] case Valor 2: Instrucción o bloque de instrucciones. } La sentencia return. En el ejemplo que se verá a continuación. Los valores en los case pueden ser una expresión constante.

La edición efectuada mediante un campo de formulario es una cadena de . Estas propiedades permiten respectivamente la gestión de los parámetros opcionales y la identificacíón de la función que llama. La propiedad arguments. Así. • El paso de parámetros se realiza por valor. Suma(4.arguments. La función eval tiene como argumento una expresión y devuelve el valor de la misma.length. JavaScript asocia a cada función dos propiedades: arguments y caller. esta modificación es local y no repercute ni globalmente ni a la función que llama. La propiedad caller. var num_op = suma. por lo tanto. Es un array que contiene los parámetros que le son pasados a la función. Las funciones predefinidas por el lenguaje. i<num_op. esta propiedad devolverá una cadena de caracteres. si una función modifica el contenido de sus argumentos.arguments.7) devuelve 16 y Suma(56) devuelve 56. la función suma definida como: function Suma(x){ var sumandos = suma. Propiedades de las funciones. 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. Consideraciones a tener en cuenta. var resultado = 0. for (var i=0. Esta función resulta útil para evaluar una cadena de caracteres que representa una expresión numérica. i++) resultado += sumandos[i]. return resultado. La función eval. Por ejemplo.5. Muestra el nombre de la función que llama. } Vemos como esta función permite calcular la suma de los números pasados como argumentos. Es decir.

// 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.char.value = eval(obj.form)"> </FORM> Introducir expresión: Resultado: Las funciones escape y unescape.char. <SCRIPT> function calcula(obj){ obj. Ejemplo: escape("#").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.result.value=escape(this.caracteres que a veces es necesario convertir en valor numérico.value)"> formato estándar a URL<br> <INPUT type="radio" name="codificacion" value="URL" onClick="this.char. 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. // devuelve %23 unescape("%23"). 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.value=unescape(this.value)"> formato URL a estándar<br> </form> .form.char.expr.form. Estas dos funciones permiten codificar cadenas de caracteres en formato URL.form.form.

if (isNaN(number)==true) alert("No es numérico"). si el primer caracter no se puede convertir a número devolverá cero. Función que comprueba si el valor pasado por parámetros es númerico o no. } </SCRIPT> . evalúa un argumento para ver si es NaN: Not Number. el signo '+'.Introducir carácter en formato URL o normal: formato estándar a URL formato URL a estándar La función isNaN. el '-' o un exponente. devuelve el valor encontrado hasta ese punto. else form. parseFloat(cadena de caracteres) Ejemplo <form> . Es decir.value)... Si se encuentra otros caracteres que no sean números. Convierte una string a un número en punto flotante. <form> Introducir un valor numérico: <input type="text" name="valor"> <br> <input type="button" value=" Comprobar " onClick="Comprueba(this. isNaN(valor de entrada) Ejemplo <SCRIPT> function Comprueba(form){ var number = parseFloat(form. alert("Es numérico").value = number.form)"> </form> Introducir un valor numérico: Las función parseFloat.valor.valor. Del mismo modo. El resultado de esta función es un booleano.

float.int. el '-' o un exponente.value. //base es opcional.int. el signo '+'.base) Ejemplo Introducir entero: <input type="text" name="int"> <br> <INPUT type="radio" name="conversion" value="decimal" onClick="this.int.value=parseInt(this. Del mismo modo.int. 10 ó 16.form.int.form. si el primer caracter no se puede convertir a número devolverá cero.float.int.form. 10)"> Expresar entero en decimal<br> <INPUT type="radio" name="conversion" value="hexadecimal" onClick="this.Convierte a real: <input type="text" name="float"> <br> <input type="button" value=" Convierte " onClick="this.form. devuelve el valor encontrado hasta ese punto.value.value=parseInt(this.value)"> </form> Convierte a real: Las función parseInt. 16)"> Expresar entero en hexadecimal<br> <INPUT type="radio" name="conversion" value="octal" onClick="this.form.value=parseFloat(this.form. Si se encuentra otros caracteres que no sean números.form. Convierte una cadena de caracteres de entrada a un número entero con una base especificada. 8)"> Expresar entero en octal<br> </form> Introducir entero: Expresar entero en decimal Expresar entero en hexadecimal Expresar entero en octal .value.value=parseInt(this. La base puede ser 8.form. parseInt(ristra.