Md1 fundamentos de la programación by sanromanempresas

MATERIAL DIDÁCTICO

FUNDAMENTOS DE LA PROGRAMACIÓN

ÍNDICE FUNDAMENTOS DE LA PROGRAMACIÓN ................................. ¡Error! Marcador no definido.

PROGRAMACIÓN CLIENTE

MATERIAL DIDÁCTICO 1.1. Fundamentos de programación Hay dos formas básicas de incluir código JavaScript en las páginas HTML. 1. JavaScript incrustado en el código HTML 2. JavaScript en un archivo .js incluido en la página Ambas formas requieren las etiquetas HTML <script> y </script> Estas etiquetas alertan al navegador que debe interpretar las líneas de código contenidas entre ellas como código JavaScript. Para introducir código JavaScript en una página HTML: <SCRIPT LANGUAGE="JavaScript"> <!-Sentencias JavaScript //--> </SCRIPT> Debido a que otros lenguajes de script pueden coexistir en una misma página HTML, como por ejemplo el VBScript, que tiene preferencia sobre estas etiquetas, es importante indicar que el lenguaje es JavaScript. Otro aspecto importante a tener en cuenta es que JavaScript es sensible a las mayúsculas y minúsculas. Esto significa que cualquier palabra del lenguaje JavaScript, debe estar correctamente escrita con las letras en minúsculas o mayúsculas, ya que de otro modo el navegador produciría un error. Este problema no existe en el lenguaje HTML, por lo cual las etiquetas pueden escribirse de cualquiera de las dos formas.

PROGRAMACIÓN CLIENTE

En HTML los comentarios se incluyen dentro de las etiquetas, pero, debido a algunas versiones antiguas de los navegadores, que interpretan de forma distinta el final de comentario, es necesario añadir //, que sirve para comentar una línea en JavaScript. JavaScript incrustado en el código HTML El código JavaScript puede ubicarse en el cuerpo del documento o bien en la cabecera de éste. En el cuerpo del documento: Un script situado en el cuerpo del documento se ejecuta cuando se carga la página. Por tanto, las etiquetas <script> y </script> estarán situadas en algún lugar entre las etiquetas <body> y </body> del documento. <HTML> <HEAD> <TITLE>Mi documento</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-Sentencias JavaScript //--> </SCRIPT> </BODY> </HTML>

El siguiente ejemplo incluye un script situado en el cuerpo del documento. El código JavaScript escribe un texto en la página HTML <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY>

PROGRAMACIÓN CLIENTE

<SCRIPT LANGUAGE="JavaScript"> <!-document.write("Esto es un ejemplo. El script está en el cuerpo del documento.") //--> </SCRIPT> </BODY> </HTML> El resultado de la página en el navegador es el siguiente:

En la cabecera del documento: Un script situado en la cabecera del documento se carga antes que la página. La cabecera es el lugar apropiado para aquellos scripts que no modifican los atributos de la página y que se ejecutan en respuesta a una acción del usuario. <HTML> <HEAD> <TITLE>Mi documento</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-Sentencias JavaScript //-->

PROGRAMACIÓN CLIENTE

</SCRIPT> </HEAD> <BODY> </BODY> </HTML> El siguiente ejemplo incluye un script situado en la cabecera del documento. El código JavaScript escribe un texto en la página HTML desde una función que es llamada cuando se carga la página. <HTML> <HEAD> <TITLE>Ejemplo 2</TITLE> <SCRIPT language="JavaScript"> <!-function saludo() { alert("Hola") } //--> </SCRIPT> </HEAD> <BODY onLoad="saludo()"> </BODY> </HTML> El resultado de la página en el navegador es una ventana emergente como ésta:

Para garantizar que una función se carga antes de que sea llamada, debe ponerse en la cabecera del documento.

PROGRAMACIÓN CLIENTE

En una página HTML se pueden usar tantas etiquetas <script> y </script> como sean necesarias. Por tanto, es posible ubicar scripts en la cabecera y en el cuerpo de un mismo documento. <HTML> <HEAD> <TITLE>Mi documento</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-Sentencias JavaScript //--> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-Sentencias JavaScript //--> </SCRIPT> </BODY> </HTML> Inclusión de ficheros .js en las páginas HTML En aplicaciones web complejas, es conveniente que el código escrito pueda ser reutilizado en diferentes páginas. Una alternativa a duplicar código en diferentes páginas (cada modificación de este código implicaría actualizar todas las páginas que lo contienen) es crear ficheros independientes e incluirlos en cada una de las páginas, es decir, utilizar librerías externas de scripts. Estas librerías no incluyen las etiquetas <script> y </script> ni ningún otro código HTML, sólo contienen los scripts. Son ficheros de texto y su extensión, para JavaScript, es .js. Para indicar al navegador que debe incluir un fichero .js, entre las etiquetas <script> y </script> de la página HTML, se debe incluir el nombre y la ubicación del fichero .js que contiene el código JavaScript.

PROGRAMACIÓN CLIENTE

<HTML> <HEAD> <TITLE>Ejemplo .js</TITLE> <SCRIPT language="JavaScript" src="libreria.js"> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> En el caso anterior, el fichero librería.js se encuentra ubicado en el mismo directorio que la página HTML, pero si hay que hacer referencia a rutas absolutas, el protocolo para el fichero es http://, igual que con los ficheros HTML. <SCRIPT language="JavaScript" src="http://www.gem.com/libreria.js"> </SCRIPT> Si se observa el código fuente de una página HTML desde el navegador, el código del fichero .js no aparece en la ventana. Lo que si aparece es la ruta completa en donde se encuentra el fichero. Por tanto, el usuario podrá acceder a esta ruta, si está accesible, y visualizar el código fuente del fichero .js En el ejemplo expuesto, el fichero libreria.js contiene el siguiente script: alert("En la librería estoy"); Sentencias JavaScript Cada línea de código escrita entre las etiquetas <script> y </script> es una sentencia. Para ser compatible con los hábitos de programadores con experiencia en otros lenguajes, JavaScript admite el uso del punto y coma al final de cada sentencia, pero éste no es obligatorio. El navegador interpreta el salto de línea como final de sentencia.

PROGRAMACIÓN CLIENTE

Los diferentes tipos de sentencias son los siguientes: •

Definición o inicialización de una variable

•

Asignación de un valor a una variable o a una propiedad de un objeto

•

Cambio del valor de una variable o de una propiedad de un objeto

•

Llamada al método de un objeto

•

Llamada a una función

•

Toma de decisiones

A excepción de los comentarios, todas las sentencias implican una acción.

1.3.1 Identificadores. Palabras Reservadas. Literales. Variables. Constantes. Expresiones. Comentarios. Funciones En un lenguaje de programación, los tokens son el equivalente a las palabras y signos de puntuación en el lenguaje natural escrito Un token, también llamado componente léxico es una cadena de caracteres que tiene un significado coherente en cierto lenguaje de programación. Ejemplos de tokens, podrían ser palabras clave (if, while, int, ...), identificadores, números, signos, o un operador de varios caracteres, (por ejemplo, :=). Palabras reservadas Se trata de palabras que ya tienen significado en JavaScript. Por ejemplo, la palabra if se utiliza para construir estructuras condicionales, y por tanto, no debe utilizarse con otro propósito como sería el asignar dicho nombre a una variable. En la tabla siguiente se indican las palabras reservadas de JavaScript, aunque hay que tener en cuenta que algunas de ellas aunque no se usan en las versiones actuales están reservadas para futuras versiones del lenguaje.

Palabras reservadas de javaScript abstract

delete

function

null

throw

boolean

goto

package

throws

break

double

private

transient

PROGRAMACIÓN CLIENTE

byte

else

implements protected

true

case

enum

import

public

try

catch

export

return

typeof

char

extends instanceof

short

var

class

false

int

static

void

const

final

interface

super

while

continue

finally

long

switch

with

debugger float

native

syncronized true

default

new

this

for

Datos Los scripts pueden manejar datos para producir resultados. En todo lenguaje de programación existen unos tipos de estándar para los datos que definen el rango de valores que pueden tomar. Así por ejemplo, un dato de tipo numérico tomará valores numéricos y nunca valores de texto. En JavaScript existen los siguientes tipos: Tipo

Comentario

Ejemplos

Número

Cualquier valor numérico

5, 12.8, 2e6, … (*)

Cadena

Cualquier cadena de texto. Se expresa entre comillas dobles o simples

"Hola", 'Hola'

Booleano Sólo dos posibles valores: true (verdadero) y false (falso)

If (entrada == 10) paso = true else paso = false

NULL

Palabra clave para indicar que no hay valor

Nombre.value = null

Objeto

Estructura compleja que contiene propiedades y métodos

Función

Conjunto de sentencias que realizan una tarea específica

(*) Los datos de tipo numérico pueden expresarse en distintas bases: •

Decimal: cualquier número que no empiece por 0 estará representado en base 10

•

Octal: si el número se escribe empezando con el dígito 0, estará en base 8

•

Hexadecimal: un número empezado por 0x o 0X, por ejemplo 0x1A, estará expresado en base 16

PROGRAMACIÓN CLIENTE

Literales Los literales son valores fijos y pueden ser: •

Literales numéricos: un literal numérico es cualquier número entero o real expresado en base decimal, octal o hexadecimal, por ejemplo, 13, -8, 125.34, 0xFF

•

Literal cadenas de texto: se expresan entre comillas dobles o simples, por ejemplo, "Hola", "1234", 'Pepe'

•

Literales booleanos: son dos posibles valores, true y false

Comentarios Los comentarios se usan en cualquier lenguaje para añadir explicaciones en el código, y son líneas que el intérprete o el compilador ignoran. JavaScript utiliza el mismo formato de comentarios que los lenguajes C/C++. Para comentar una línea se ponen los caracteres // al inicio de la línea: // línea de comentario Para comentar varias líneas se usan los caracteres /* (inicio de comentario) y */ (fin de comentario): /* comentario de varias líneas */ Variables Los datos no fijos que maneja un script se almacenan en variables, definiendo variable como un contenedor de información. Cada variable del script debe tener un nombre que la identifique. El nombre puede estar formado por letras, números y el signo _, pero no puede contener espacios o cualquier otro signo de puntuación ni empezar por un número. Tampoco pueden ser usadas las palabras clave y al igual que el lenguaje en general, son sensibles a las mayúsculas y minúsculas. Nombres válidos para las

PROGRAMACIÓN CLIENTE

variables son por ejemplo: resultado, miNum, _num, num2 y num_1 mientras que 2sier, mi resultado o mi;casa no lo son. Los valores que puede almacenar una variable pueden ser de cualquier tipo de datos permitido en el lenguaje. Declaración y asignación de variables Para declarar una variable y asignarle un valor se utiliza la siguiente sintaxis: var nombre_variable nombre_variable = valor La primera línea declara la variable y la segunda asigna un valor a la variable declarada. Como se verá más adelante, la primera línea es opcional. En el siguiente ejemplo se declara una variable de nombre resultado, y se le asigna el resultado de la suma de dos números. var resultado resultado = 5 + 2 Como se observa en el ejemplo anterior, en JavaScript no es necesario indicar de qué tipo es una variable en el momento de su definición. El tipo de dato queda definido en el momento en que se asigna un valor a la variable. En el siguiente ejemplo, el dato que se asigna a la variable es de tipo cadena de texto: <HTML> <HEAD> <TITLE>Ejemplo</TITLE> </HEAD> <BODY> <SCRIPT> <!-nombre = "María" document.write( "Hola" + nombre) //-->

PROGRAMACIÓN CLIENTE

</SCRIPT> </BODY> </HTML> A la hora de declarar una variable también es posible realizar la asignación de forma simultánea: var resultado = 5 + 2 Otra posibilidad que ofrece el lenguaje, es declarar más de una variable en una misma línea: var x,y,z Ámbito de las variables Una variable puede tener ámbito local o global. Cuando no se usa la palabra reservada var (es decir se omite la línea de declaración de la variable) se considera que la variable tiene ámbito global, en caso contrario, es de ámbito local si está declarada dentro de una función y de ámbito global si está declarada fuera de cualquier función existente en la página. El ámbito de una variable hace referencia a las partes del código desde las que ésta puede ser usada. En el siguiente ejemplo, las variables x, w e y son globales, mientras que la variable z es local: var x = 1

// x es accesible desde dentro y fuera de la función pruebas

y=x+2

// y es accesible desde dentro y fuera de la función pruebas

funcion pruebas(){ var z = y + 1

// z sólo es accesible desde dentro de la función pruebas

w=x+z+4

// w es accesible des de dentro y fuera de la función pruebas

document.write( "El valor de w es " + w ) } Conversiones de tipo Como se ha visto, las variables toman el tipo del dato asignado. Así pues, en la expresión:

PROGRAMACIÓN CLIENTE

mi_var = "1000" la variable mi_var es de tipo cadena de texto, mientras que en: mi_var = 1000 la variable mi_var es de tipo número. El tipo de la variable o del dato determinará qué cosas se puede hacer con ella/el. En general, en una expresión el tipo asociado a la variable está determinado por el tipo de los operandos. Una particularidad de JavaScript es la conversión a cadena de un tipo numérico cuando en una operación + cuando uno de los operandos es una cadena. Por ejemplo, dada la siguiente inicialización: mi_var1 = "13" mi_var2 = 5 después de las siguientes expresiones: x = mi_var1 + mi_var2 se tiene que: la variable x toma el tipo cadena de caracteres, ya que mi_var1 es de tipo cadena de caracteres. El valor que toma x es "135" ya que el operador + en este caso, concatena los dos valores. Además de las normas comentadas, JavaScript dispone de funciones especiales para realizar conversiones específicas. Son las funciones eval, parseInt y parseFloat que se verán más adelante. Constantes Las constantes no existen como tales en JavaScript. Salvando el caso del objeto Math, que veremos más adelante, no las tenemos disponibles. Si se quiere usar una constante en el programa, no quedará más remedio que declarar una variable, asignarle un valor desde el principio del programa, y procurar no tocarlo. Es lo más parecido a las constantes que se puede obtener.

PROGRAMACIÓN CLIENTE

1.3.2. Operadores Los operadores permiten formar expresiones. Un literal o una variable ya forman por sí solos una expresión, pero junto con los operadores se pueden construir expresiones más complejas. Por ejemplo, en la expresión x = y + 1, x e y son variables, 1 es un literal y los signos = y + son operadores. Los operadores se clasifican según su funcionalidad en los siguientes grupos: •

operadores aritméticos

•

operadores de asignación

•

operadores de comparación

•

operadores booleanos

•

operadores de bits

•

operadores especiales: el operador +, el operador :?, los signos de puntuación (coma, paréntesis y corchetes) y los operadores para el trabajo con objetos.

Operadores aritméticos Los operadores aritméticos permiten realizar operaciones matemáticas. Operador

Descripción

Ejemplo Resultado ejemplo

Suma

3+4

Resta

3-4

-1

Incremento

3++

PROGRAMACIÓN CLIENTE

Decremento

3--

Producto

3*4

División

3/4

0.75

Módulo (resto de la división) 3 % 4

Menos unario (negación)

-7

-(3 + 4)

Los operadores de incremento y decremento se pueden usar de dos formas distintas dentro de una expresión de asignación. •

Delante de una expresión: primero se realiza el incremento y después la asignación. Por ejemplo: x = 13 y = ++x En este primer caso el resultado es x = 14 e y = 14 ya que primero se ha incrementado el valor de x, y después se ha asignado el resultado del incremento a la variable y.

•

Detrás de una expresión: primero se realiza la asignación y después el incremento. Por ejemplo: x = 13 y = x++ El resultado es x = 14 e y = 13 ya que primero se ha asignado el valor de inicial de x a la variable y, y después se ha incrementado el valor de la variable y.

A continuación vemos algunos ejemplos de operaciones: <HTML> <HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-/* Partimos de dos variables, 'a' y 'b', y vamos a realizar distintas operaciones con ellas */ var a = 10, b = 6;

PROGRAMACIÓN CLIENTE

document.write('a = ' + a + ', b = ' + b + '<P>'); document.write('a + b = ' + (a + b) + '<BR>'); document.write('a - b = ' + (a - b) + '<BR>'); document.write('a * b = ' + (a * b) + '<BR>'); document.write('a / b = ' + (a / b) + '<BR>'); document.write('a % b = ' + (a % b) + '<BR>'); document.write('a++ : ' + (a++) + '<P>'); /* Notar que aquí ya se ha incrementado 'a' */ document.write('-a = ' + (-a) + '<P>'); document.write(' a += b : a = ' + (a += b) + '<BR>'); document.write(' a %= b : a = ' + (a %= b) + '<BR>'); //--> </SCRIPT> </BODY> </HTML>

Operadores de asignación Los operadores de asignación permiten asignar el resultado de una expresión a una variable. Operador

Descripción

Ejemplo Equivale a...

Asigna

x=y+z

Suma y asigna

x += y

x=x+y

Resta y asigna

x -= y

x=x-y

Multiplica y asigna

x *= y

x=x*y

Divide y asigna

x /= y

x=x/y

Calcula el módulo y asigna x %= y

x=x%y

Operadores de comparación Los operadores de comparación permiten comparar el resultado de dos expresiones. Operador ==

PROGRAMACIÓN CLIENTE

Descripción Igualdad

Ejemplo Resultado ejemplo 3 == "3"

Cierto

Desigualdad

3 != "3"

Falso

Menor

3<3

Falso

Mayor

3>3

Falso

Menor o igual

3 <= 3

Cierto

Mayor o igual

3 >= 3

Cierto

===

Igualdad estricta

3 === "3" Falso

!==

Desigualdad estricta 3 !== "3"

Cierto

La igualdad y desigualdad estricta sirven para lo mismo que la igualdad y la desigualdad no estrictas pero hacen una comprobaciรณn estricta de tipo. Han sido incluidos en el estรกndar ECMAScript y lo soportan Netscape 4.06 y superiores y Explorer 3 y superiores. Hay que indicar que las versiones mรกs antiguas de Netscape tratan la igualdad normal como si fuera estricta. Veamos un sencillo ejemplo para aclarar conceptos:

<HTML> <HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-/* Partimos de dos variables, 'a' y 'b', y vamos a realizar distintas operaciones con ellas */ var a = 10, b = 6; document.write('a = ' + a + ', b = ' + b + '<P>'); document.write('a == b : ' + (a == b) + '<BR>'); document.write('a != b : ' + (a != b) + '<BR>'); document.write('a < b : ' + (a < b) + '<BR>'); document.write('a > b : ' + (a > b) + '<BR>'); document.write('a <= b : ' + (a <= b) + '<BR>'); document.write('a >= b : ' + (a >= b) + '<BR>'); a = '6'; document.write('Ahora a = ' + a + ' (tipo: ' + typeof a + ')<BR>'); document.write(' a === b : ' + (a === b) + '<BR>'); a = 6;

PROGRAMACIร N CLIENTE

document.write('Ahora a = ' + a + ' (tipo: ' + typeof a + ')<BR>'); document.write(' a === b : ' + (a === b) + '<BR>'); document.write(' a !== b : ' + (a !== b) + '<BR>'); a = '6'; document.write('Ahora a = ' + a + ' (tipo: ' + typeof a + ')<BR>'); document.write(' a !== b : ' + (a !== b) + '<BR>'); //--> </SCRIPT> </BODY> </HTML>

Operadores booleanos Los operadores lógicos permiten formar expresiones que tienen como resultado un valor booleano (true o false). Operador

Descripción

Ejemplo

Resultado ejemplo

y (AND)

x=1 Cierto (x > 0) && (x <= 5)

o (OR)

x=1 (x > 5) || (x == 0)

Falso

Negación (NOT)

x=1 !(x > 5 )

Cierto

Operadores de bits Estos operadores permiten modificar o comparar valores a nivel de bits, es decir, operan con conjuntos de unos y ceros aunque el resultado que retornan está expresado en la forma estándar de JavaScript para los valores numéricos. Operador

Descripción

(AND) Retorna un 1 si los dos valores son 1

(OR) Retorna un 1 si al menos uno de los dos valores es 1

PROGRAMACIÓN CLIENTE

(XOR) Retorna un 1 si solamente uno de los dos valores es 1

Desplazamiento a la izquierda de un determinado número de bits. Los espacios de la derecha que quedan "vacíos" se rellenan con 0.

Desplazamiento a la derecha de un determinado número de bits y añade por la izquierda los bits que se han desbordado por la derecha

>>>

Desplazamiento a la derecha de un determinado número de bits. Los espacios de la izquierda que quedan "vacíos" se rellenan con 0.

&= x&=y

equivale a x=x&y

x|=y equivale a x=x|y

x^=y equivale a x=x^y

<<=

x<<=y equivale a x=x<<y

>>=

x>>=y equivale a x=x>>y

>>>=

x>>>=y equivale a x=x>>>y

Veamos un ejemplo: <HTML> <HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-/* Partimos de tres variables, 'a', 'b' y 'c', y vamos a realizar distintas operaciones con ellas */ var a = 10, b = 6, c = 11; document.write('a = ' + a + ', b = ' + b + ', c = ' + c + '<P>'); document.write('(a > b) && (a > c) : ' + ((a > b) && (a > c)) + '<BR>'); document.write('(a > b) && (a < c) : ' + ((a > b) && (a < c)) + '<BR>'); document.write('!(a < b) : ' + !(a < b) + '<BR>'); document.write('(a > b) || (a > c) : ' + ((a > b) || (a > c)) + '<BR>'); //--> </SCRIPT> </BODY> </HTML>

La primera comparación nos dice si 'a' es mayor que 'b' y a la vez mayor que 'c'. La segunda, si 'a' es mayor que 'b' y a la vez menor que 'c'. La tercera nos dice si no se cumple que 'a' sea menor que 'b'. La cuarta nos dice si 'a' es mayor que 'b' o bien 'a' es mayor que 'c'.

PROGRAMACIÓN CLIENTE

El operador + El significado del símbolo + es diferente en función del tipo de las expresiones entre las que se encuentra. Cuando las expresiones son números el símbolo + actúa como operador aritmético, por ejemplo: x=1 y = x + 15 en donde la variable y tomaría el valor 16. Cuando las expresiones son cadenas de texto, o cuando uno de los operadores es del tipo cadena de texto, el símbolo + realiza la concatenación de las dos expresiones. Por ejemplo: nombre = "María" frase = "Hola " + nombre document.write(frase) como resultado, en el documento html aparecería la frase "Hola María"

El operador :? Este operador que se verá con más detalle en el apartado sobre las estructuras de control condicionales, tiene la siguiente sintaxis: condición ? valor1 : valor2 Si la condición se cumple, devuelve el primer valor y en caso contrario el segundo. Por ejemplo: x = 5 <= 8 ? 1 : 4 tiene como resultado x = 1

PROGRAMACIÓN CLIENTE

Signos de puntuación El signo de puntuación coma , se utiliza para delimitar series de elementos. •

Los signos ( ) se utilizan para llamar a una función. Entre los paréntesis se especifican los parámetros.

•

Los signos [ ] se utilizan para referenciar los elementos que pertenecen a un array.

Operadores para el trabajo con objetos Permiten crear, eliminar y referenciar los objetos del lenguaje así como los objetos definidos por el programador. Operador

Descripción

Ejemplo

new

Crea un objeto

hoy = new Date()

delete

Destruye un objeto

delete hoy

this

Referencia el objeto actual

Ítem en el objeto

typeof

Instancia del objeto

void

Retorno de ningún valor

Precedencia de operadores En una expresión compleja en la que intervienen más de un operador es posible determinar el orden en que estos deben evaluarse mediante el uso de paréntesis. Por ejemplo: document.write( 5 - ( 2 * 2 ) ) mostraría el valor 1 en el documento html, mientras que la expresión:

PROGRAMACIÓN CLIENTE

document.write( ( 5 - 2 ) * 2 ) mostraría como resultado el valor 6. En caso de no usar paréntesis, la prioridad se establece según el siguiente orden: Prioridad de operadores Llamada a una función y Miembro de ...

()[]

Negación, menos unario, incremento y decremento ! - ++ -Producto, división y módulo

*/%

Suma y resta

Desplazamiento de bits

>> << >>>

Comparación de relación

< <= > >=

Comparación de igualdad y desigualdad

== !=

AND binario

XOR binario

OR binario

AND lógico

OR lógico

Condicional

Asignación

= += -= *= /= %= &= |= ^= <<= >>= >>>=

Coma

Cuando en una expresión intervienen operadores de igual prioridad, estos se evalúan de izquierda a derecha.

1.3.3. Estructuras de control En este apartado veremos las estructuras de control siguientes: •

Condicionales

•

Iterativas

•

La sentencia with

PROGRAMACIÓN CLIENTE

Estructuras de control condicionales Una sentencia condicional es una estructura de control de flujo que hace que el programa realice una tarea u otra dependiendo del resultado de evaluar una condición. En JavaScript las estructuras de control condicionales son: •

if ... else, que en su forma más simple puede omitir el else y que en los casos más complejos puede tomar la forma if ... else if...

•

switch

La estructura de control if ... Se realiza una acción específica en caso de cumplirse una condición. En general la sintaxis es: if ( condición ){ grupo de sentencias }

PROGRAMACIÓN CLIENTE

El siguiente ejemplo muestra un texto adicional a la página, tan solo si el usuario introduce la clave de entrada correcta, en este caso "csi". <HTML> <HEAD> <TITLE>Ejemplo estructura if ...</TITLE> <SCRIPT language="JavaScript"> <!-var resp = prompt("Introduzca el código para ver saludo","") if ( resp == "csi" ) document.write("<H3>Bienvenido a nuestra página web</H3>") //--> </SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <P> En esta podrá encontrar toda la información referente a ... </P> </BODY> </HTML> La estructura de control if ... else En general la sintaxis es: if ( condición ){ grupo de sentencias 1 } else{ Grupo de sentencias 2 }

PROGRAMACIÓN CLIENTE

Diagrama de flujo para la estructura de control if ... else

En el siguiente ejemplo se muestra como incluir una acción alternativa en el caso de no cumplirse la condición: <HTML> <HEAD> <TITLE>Ejemplo estructura if ... else</TITLE> <SCRIPT language="JavaScript"> <!-var resp = prompt("Introduzca el número del mes actual","") if ( resp == "8" ) document.write("Estamos en agosto") else document.write("No estamos en agosto") //--> </SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> </BODY> </HTML> Una forma alternativa de escribir esta sentencia es usar la forma:

PROGRAMACIÓN CLIENTE

condición ? expresión1 : expresión2 Si la condición se cumple se ejecuta expresión1 y en caso contrario expresión2. El ejemplo anterior quedaría de la siguiente forma: resp == "8" ? document.write("Estamos en agosto") : document.write("No estamos en agosto") En el caso en que el grupo de sentencias quede reducido a una sola sentencia, las llaves pueden omitirse. Esto también sirve para todas las estructuras que se explican a continuación. La estructura de control if ... else if ... En general la sintaxis es: if ( condición1 ){ grupo de sentencias 1 } else if ( condición2 ) { grupo de sentencias 2 }

Diagrama de flujo para la estructura de control if ... else if ...

PROGRAMACIÓN CLIENTE

En el siguiente ejemplo se muestran varias estructuras if ... else anidadas: <HTML> <HEAD> <TITLE>Ejemplo estructura if ... else if ...</TITLE> <SCRIPT language="JavaScript"> <!-var dia = prompt("Introduzca el número de día de la semana:", 0); if (dia == 1) document.write("El dia actual es lunes"); else if (dia == 2) document.write("El día actual es martes"); else if (dia == 3) document.write("El día actual es miércoles"); else if (dia == 4) document.write("El día actual es jueves"); else if (dia == 5) document.write("El día actual es viernes"); else if (dia == 6) document.write("El día actual es sábado"); else if (dia == 7) document.write("El día actual es domingo"); else document.write("El día debe estar entre 1 y 7"); //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> La estructura de control switch En general la sintaxis es: switch ( variable ){

PROGRAMACIÓN CLIENTE

case valor1: {grupo de sentencias 1} break; case valor2: {grupo de sentencias 2} break; ................... case valorN: {grupo de sentencias N} break; default: {grupo de sentencias si no se cumple ninguno de los casos anteriores }

Diagrama de flujo para la estructura de control switch

El siguiente ejemplo muestra una estructura alternativa múltiple: <HTML> <HEAD> <TITLE>Ejemplo estructura switch</TITLE> <SCRIPT language="JavaScript"> <!-var diac = prompt("Introduzca el número de día de la semana:", 0); var dia = parseInt(diac); switch(dia){

PROGRAMACIÓN CLIENTE

case 1: document.write("El dia actual es lunes"); break; case 2: document.write("El dia actual es martes"); break; case 3: document.write("El dia actual es miércoles"); break; case 4: document.write("El dia actual es jueves"); break; case 5: document.write("El dia actual es viernes"); break; case 6: document.write("El dia actual es sábado"); break; case 7: document.write("El dia actual es domingo"); break; default:document.write("El día debe estar entre 1 y 7"); } //--> </SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> </BODY> </HTML>

Estructuras de control iterativas Una sentencia iterativa, repetitiva o bucle es una estructura que permite repetir una tarea un número de veces, determinado por una condición. En JavaScript las estructuras de control iterativas son: •

for

•

while

•

do ... while

PROGRAMACIÓN CLIENTE

En estas estructuras el número de iteraciones viene determinado por la condición de finalización, aunque es posible interrumpir la ejecución mediante el uso de las sentencias break y continue. La estructura de control for. Se utiliza un contador que determina cuantas veces debe realizarse una acción específica. Se utiliza esta estructura cuando el número de iteraciones es un valor conocido. En general la sintaxis es: for ( [expresión inicialización]; [condición]; [expresión incremento o decremento] ){ grupo de acciones } En esta estructura se utiliza un contador. El contador puede ser usado de forma que incremente su valor, en una cierta cantidad, en cada iteración hasta un valor determinado, o bien de forma que el valor inicial se vaya decrementando en cada iteración. Con un contador ascendente la expresión toma la siguiente forma: for (contador = valor inicial; contador <= valor final; contador += incremento ){ grupo de acciones } Con un contador descendente la expresión toma la siguiente forma: for (contador = valor inicial; contador >= valor final; contador -= incremento ){ grupo de acciones }

PROGRAMACIÓN CLIENTE

Diagrama de flujo para la estructura de control for

El ejemplo siguiente calcula y muestra la tabla de multiplicar del 2: <HTML> <HEAD> <TITLE>Ejemplo estructura for</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-for ( var i = 0; i <= 10; i++ ){ result = i * 2; document.write( "2 * " + i + " = " + result + "<BR>"); } //--> </SCRIPT> </BODY> </HTML>

PROGRAMACIĂ&#x201C;N CLIENTE

En la primera línea del for del ejemplo, la expresión ( var i = 0; i < 11; i++ ) inicializa la variable i a 0 la primera vez que entra en el bucle. En las siguientes entradas la variable i se incrementa en 1, y este proceso se repite mientras i tenga un valor menor a 11. La estructura de control while. Se realiza una acción específica en caso de cumplirse una condición. El grupo de acciones puede no ejecutarse nunca si la condición no se cumple, ya que esta se encuentra al inicio de la expresión. La sintaxis es: while (condición){ grupo de acciones }

Diagrama de flujo para la estructura de control while

El siguiente ejemplo calcula la suma de los valores positivos menores o igual a un número introducido por el usuario. <HTML> <HEAD> <TITLE>Ejemplo estructura while</TITLE> </HEAD> <BODY>

PROGRAMACIÓN CLIENTE

<SCRIPT language="JavaScript"> <!-var suma = 0; var num = parseInt(prompt("Introduzca un número mayor que 0", "")); if (num > 0){ while(num > 0){ suma += num; num--; } document.write("La suma de los valores inferiores o iguales al valor introducido es: <b>" + suma + "</b>"); } //--> </SCRIPT> </BODY> </HTML>

La estructura de control do ... while. Se trata de un bloque repetitivo en el que las acciones se ejecutan al menos una vez. Esto es debido a que la condición de finalización se encuentra al final del bloque. La sintaxis es: do{ grupo de acciones } while(condición)

PROGRAMACIÓN CLIENTE

Diagrama de flujo para la estructura de control do ... while

En el siguiente ejemplo permite calcular el resultado de expresiones matemáticas. El usuario decide al final de cada cálculo si desea o no seguir realizando operaciones. <HTML> <HEAD> <TITLE> Ejemplo estructura do ... while </TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-var resp = ""; var exp = "" do{ exp = prompt("Introduzca una expresión matemática", ""); alert("El resultado de la expresión es: " + eval(exp)); resp = prompt("¿Desea realizar un nuevo cálculo? (s/n)", "s"); }while( resp == "S" || resp == "s") //--> </SCRIPT> <h1>Fin</h1> </BODY> </HTML>

PROGRAMACIÓN CLIENTE

La sentencia break. La sentencia break interrumpe la ejecución del bucle inmediatamente superior en el que se encuentra. En el siguiente ejemplo, se usa la instrucción break para detener el bucle que calcula la tabla de multiplicar del 2 cuando el usuario lo decide. <HTML> <HEAD> <TITLE>Ejemplo break</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-for ( var i = 0; i < 11; i++ ){ result = i * 2; document.write( "2 * " + i + " = " + result + "<BR>"); resp = prompt("¿Desea continuar?","s"); if ( resp == "n" || resp == "N" ) break; } //--> </SCRIPT> </BODY> </HTML>

La sentencia continue. La sentencia continue interrumpe la ejecución de la iteración actual y transfiere el control a la siguiente iteración.

PROGRAMACIÓN CLIENTE

En el siguiente ejemplo, se usa la instrucción continue para no imprimir el resultado del producto 2*5 en la tabla de multiplicar del 2. <HTML> <HEAD> <TITLE>Ejemplo continue</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-for ( var i = 0; i < 11; i++ ){ if ( i == 5 ) continue; result = i * 2; document.write( "2 * " + i + " = " + result + "<BR>"); } //--> </SCRIPT> </BODY> </HTML>

La sentencia with La sentencia with permite usar un grupo de sentencias que hacen referencia a un objeto de manera que no sea necesario indicar, en cada sentencia, el objeto al que hacen referencia. La sintaxis es la siguiente: with ( objeto ){ grupo de sentencias }

PROGRAMACIÓN CLIENTE

En el siguiente ejemplo se omite el nombre del array en las sentencias que hacen referencia a él dentro de la estructura with: <html> <head> <title>Ejemplo with</title> </head> <body bgcolor="#FFFFFF"> Los datos iniciales del array son: Barcelona, Palma de Mallorca, Cáceres,Sevilla <P> <script> <!-ciudades = new Array("Barcelona", "Palma de Mallorca", "Cáceres", "Sevilla") with (ciudades){ sort() reverse() } document.write("Los datos finalmente son: " + ciudades); //--> </script> </body> </html> Sin la estructura with, se tendría que especificar el nombre del array de la siguiente manera: ciudades.sort() ciudades.reverse()

PROGRAMACIÓN CLIENTE

1.3.4. Funciones Las funciones son una de las partes fundamentales en JavaScript. Una función se define como un conjunto de sentencias que realizan una tarea específica, y que puede ser llamada desde cualquier parte de la aplicación. Una función se define mediante el uso de la palabra function, seguida de: •

el nombre de la función

•

la lista de parámetros de la función, encerrados entre paréntesis y separados por comas

•

las sentencias JavaScript que definen la función, encerradas entre llaves

function nombre_funcion( [parámetro 1, parámetro 2, … ] ){ bloque de sentencias } La existencia de argumentos, así como el número de estos, es opcional y depende de cada función en concreto. El nombre de la función puede contener el carácter _ pero no espacios ni acentos y al igual que el resto de código JavaScript, es sensible a las mayúsculas y minúsculas.

El bloque de sentencias va entre los caracteres { y } que especifican el inicio y el final de la función. Las funciones se definen en la cabecera del documento HTML entre las etiquetas <script> y </script>, pero pueden definirse también en el cuerpo del documento o en un fichero externo.

PROGRAMACIÓN CLIENTE

<HTML> <HEAD> <TITLE>Mi documento</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function nombre_funcion(parámetros){ bloque de sentencias } //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> En el caso de haber más de una función, éstas se ubicarían también entre las etiquetas <script> y </script>. <HTML> <HEAD> <TITLE>Mi documento</TITLE> <SCRIPT language="JavaScript"> <!-function nombre_funcion_1(parámetros){ bloque de sentencias } function nombre_funcion_2(parámetros){ bloque de sentencias } //--> </SCRIPT> </HEAD> <BODY>

PROGRAMACIÓN CLIENTE

</BODY> </HTML> En un documento se pueden incluir tantas funciones como hagan falta. Las funciones no se ejecutan por sí solas, tienen que ser llamadas, ya sea desde otra función o bien desde el cuerpo del documento. Para que una función se ejecute debe ser llamada. En el siguiente ejemplo se realiza la llamada a una función desde el cuerpo del documento, concretamente se realiza la llamada cuando el usuario pulsa un botón:

<HTML> <HEAD> <TITLE>Ejemplo 5</TITLE> <SCRIPT language="JavaScript"> <!-function saludo() { alert("Hola"); } //--> </SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <P>Pulse el botón: <FORM name="miform"> <INPUT type="button" name="boton" value="Recibir saludo" onClick="javaScript:saludo()"> </FORM> </P> </BODY> </HTML>

PROGRAMACIÓN CLIENTE

Los parámetros son los datos de entrada, que la función necesita para realizar una tarea. Una función puede recibir tantos parámetros como sea necesario. En el siguiente script, a diferencia del que se muestra en el ejemplo anterior, la función recibe el texto que mostrará en el mensaje: function saludo(texto) { alert(texto); }

Los parámetros son los datos de entrada a la función. A continuación se muestra cómo una función puede ser llamada varias veces: <html> <head> <title>Ejemplo 6</title> <script language="JavaScript"> <!-function saludo(texto) { alert(texto); } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <p>Pulse el bot&oacute;n: <form name="miform">

PROGRAMACIÓN CLIENTE

<input type="button" name="boton1" value="Saludo 1" onClick="javaScript:saludo(‘Hola Juan’)"> <BR><BR> <input type="button" name="boton2" value="Saludo 2" onClick="javaScript:saludo(‘Hola María’)"> </form> </p> </body> </html> Ejemplo.htm.

El resultado que se visualizará en el navegador será diferente para cada llamada, ya que depende del valor del parámetro.

PROGRAMACIÓN CLIENTE

Resultado al pulsar el botón 1

Resultado al pulsar el botón 2

En este ejemplo se puede ver también como en algunos casos es necesario alternar el uso de las comillas dobles con las comillas simples. Concretamente en la línea: onClick="javaScript:saludo('Hola Juan')"

PROGRAMACIÓN CLIENTE

el texto que se pasa a la función como parámetro, se ha puesto entre comillas simples. El motivo de ello es no confundir al navegador, puesto que las comillas dobles están siendo usadas para indicar el inicio y el fin de la llamada. Por ejemplo, si se escribiera: onClick="javaScript:saludo("Hola Juan")" el navegador podría interpretar que la sentencia a ejecutar en onClick es javaScript:saludo( lo que provocaría un error. Otra aspecto que se debe destacar es el ámbito en el que la variable texto tiene valor. Cuando se pasa un parámetro a una función, éste se usa dentro de la función como una variable. Fuera de la función no existe y, por tanto, no puede ser usado fuera de ella. El parámetro de una función sólo existe dentro de la propia función. Además cuando se pasa una variable como parámetro de una función, esta se pasa por su valor, es decir, la manipulación en el interior de la función de la variable no modifica el valor de la variable en el exterior de la función. Pero esta característica no es siempre así, ya que cuando se le pasan tipos compuestos como arrays o objetos, estos son pasados por referencia, con lo que la modificación de sus valores en el interior de la función modifica los valores en el exterior. Por otra parte, si se realiza una llamada a una función que espera ciertos parámetros pero estos no se le pasan, la función rellena los parámetros con el valor "null". Propiedades de las funciones Cuando se crea una función, esta adquiere un conjunto de propiedades y métodos que se estudiarán en etapas posteriores, pero hay una especialmente útil relacionado con los parámetros de entrada, length. Mediante esta propiedad, de solo lectura, se puede consultar el número de parámetros que admite la función, es decir, el número de parámetros de entrada que se han definido al crear la función.

PROGRAMACIÓN CLIENTE

PROGRAMACIÓN CLIENTE

La llamada a la función podría ser: alert(sumadora(2,3,6,5,4,1); Retorno de la función. Las funciones también pueden devolver un valor, aunque como ya se ha visto en ejemplos anteriores, no es imprescindible. function cuadrado(num){ resultado = num * num return resultado } En consecuencia, es posible asignar una función a una variable. nombre_variable = nombre_funcion(parámetros) Además una función puede contener varias sentencias return, de esta forma se fuerza la finalización de la función al ejecutar el return y devuelve el valor asignado. Por otro lado, cabe comentar que toda función, cuando no dispone de sentencia return, devuelve el valor undefined. El ejemplo siguiente muestra cómo hacerlo y como realizar llamadas entre funciones: <HTML> <HEAD> <TITLE>Ejemplo 7</TITLE> <SCRIPT language="JavaScript"> <!function cuadrado(num){ resultado = num * num return resultado } function calculo() { resul = cuadrado(7) alert("el cuadrado del número 7 es: " + resul); } //-->

PROGRAMACIÓN CLIENTE

</SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <P>Pulse el botón: <FORM name="miform"> <INPUT type="button" name="boton" value="Calcula" onClick="javaScript:calculo()"> <BR><BR> </FORM> </P> </BODY> </HTML> También se podría haber escrito la función de la siguiente manera: function calculo() { alert("el cuadrado del número 7 es: " + cuadrado(7)); } ya que al devolver un valor, la función tiene valor por sí misma. Funciones locales. En ciertas ocasiones es útil limitar el ámbito de uso de una función a otra función, es decir, que la primera función solo pueda ser utilizada en el interior de la segunda. En este caso se habla de funciones locales. Para crear una función local solo es necesario declararla en el interior del bloque de instrucciones de la función que la contiene. function nombre_funcion( [parámetro 1, parámetro 2, … ] ){ function nombre_local([parámetro 1, parámetro 2, ...]){ bloque de sentencia } bloque de sentencias }

PROGRAMACIÓN CLIENTE

Funciones como objetos. Como se estudiará en las siguientes unidades, en JavaScript prácticamente todo es un objeto y el caso de las funciones no es una excepción. Es posible definir funciones a partir del objeto Function, la sintaxis del constructor de este objeto es: var nombreFuncion = new Function("parámetro 1", "parámetro 2",...,"bloque de sentencias"); de esta forma, en primer lugar se definen los parámetros de la función y en último lugar se especifica el bloque de sentencias que define el comportamiento de la función. En el siguiente ejemplo se observa la asignación del objeto a una variable saludo: var saludo = new Function("nombre", "alert('Bienvenido '+nombre);"); de esta forma se puede llamar a la función con la siguiente sintaxis: saludo("Victor");

El JavaScript admite también funciones recursivas. Una función recursiva es la que se llama a sí misma. La recursividad es una herramienta muy potente en algunas aplicaciones, especialmente las de cálculo, y puede ser usada como una alternativa a la repetición o estructura repetitiva. La escritura de una función recursiva es similar a su homónima no recursiva; sin embargo, para evitar que la recursión continúe indefinidamente es preciso incluir una condición de finalización. Muchas funciones matemáticas se definen recursivamente. Un ejemplo de ello es el factorial de un número entero n.

PROGRAMACIÓN CLIENTE

La función factorial se define como:

Si se observa la fórmula anterior cuando n>0, es fácil definir n! en función de (n - 1)!. Por ejemplo, 5! 5! = 5 * 4 * 3 * 2 * 1 = 120 4! = 4 * 3 * 2 * 1 = 24 3! = 3 * 2 * 1 =6 2! = 2 * 1 =2 1! = 1 * 1 =1 0! = 1 =1 Las expresiones anteriores se pueden transformar en: 5! = 5 * 4! 4! = 4 * 3! 3! = 3 * 2! 2! = 2 * 1! 1! = 1 * 0! En términos generales sería:

La implementación en JavaScript de la función factorial sería: <html> <head> <title>Ejemplo 8</title> <script language="JavaScript"> <!— function Factorial(num) { if (num==0) return 1; else return ( num * Factorial(num - 1) ) } //--> </script> </head> <body> <SCRIPT language="JavaScript"> document.write( Factorial(5) ) </SCRIPT>

PROGRAMACIÓN CLIENTE

</body> </html>

Funciones predefinidas Las funciones predefinidas en JavaScript no son métodos asociados a un objeto, sino que forman parte del lenguaje por sí mismas. Estas funciones que permiten evaluar expresiones, realizar conversiones de tipo y testear el resultado de una expresión, son las que se describen a continuación.

Función eval Descripción Sintaxis

Evalúa y ejecuta la expresión o sentencia contenida en la cadena de texto que recibe como parámetro. eval( cadena de texto)

Ejemplo

mensaje = 'Hola Juan’ eval(&quot;alert(' &quot; + mensaje + &quot; ')&quot;)

Función parseInt Descripción

Convierte una cadena de texto en un número entero según la base indicada. Si se omite la base, se supone que está en base 10.

Sintaxis

Si la conversión produce un error, retorna el valor NaN. parseInt( cadena de texto, [base])

Ejemplo

Anio = parseInt(&quot;2001&quot;) Anio += 100

Función parseFloat Descripción

Convierte una cadena de texto en un número real.

Sintaxis

Si la conversión produce un error, retorna el valor NaN. parseFloat( cadena de texto)

Ejemplo

Pi = parseFloat(&quot;3.141516&quot;)

PROGRAMACIÓN CLIENTE

A = pi * r * r Función isNaN Descripción Sintaxis

Retorna true si el parámetro es NaN y false en caso contrario. isNaN( valor )

Ejemplo

If ( isNaN(&quot;2001&quot;) )

alert( &quot;No es un dato numérico&quot; ) El valor NaN devuelto por una función indica que se ha producido un error. Función isFinite Descripción Sintaxis

Retorna true si el parámetro es un número finito y false en caso contrario. isFinite( numero )

Ejemplo

if ( isFinite(2001) ) alert( &quot;ok&quot; )

Función Number Descripción

Convierte a número una expresión.

Sintaxis

Si la conversión produce un error, retorna el valor NaN. Number( expresión )

Ejemplo

Number( &quot;2001&quot; ) retorna 2001 Number( &quot;Hola&quot; ) retorna NaN

Función String Descripción

Convierte a cadena de texto una expresión.

Sintaxis

Si la conversión produce un error, retorna el valor NaN. String( expresión )

Ejemplo

String(123456)

El siguiente ejemplo muestra diversas posibilidades en la utilización de las funciones descritas: <html> <head>

PROGRAMACIÓN CLIENTE

<title>Ejemplo 9</title> </head> <body bgcolor="#FFFFFF"> <script language="JavaScript"> vcadena = "Hola Juan" vnumero = 2001 alert(eval(vnumero + "25")) alert(eval(vnumero + 25))

// muestra 200125 // muestra 2026

alert( parseInt(vcadena)) alert( parseInt("2001")) alert( parseInt(3.141516)) alert( parseInt(vnumero + 3.141516)) alert( parseInt("24 horas"))

// muestra NaN // muestra 2001 // muestra 3 // muestra 2004 // muestra 24

alert( parseFloat(vcadena)) alert( parseFloat(vnumero)) alert( parseFloat("3.141516")) 3.141516

true

alert(isNaN(eval(vnumero + "25"))) alert(isNaN(parseInt(vcadena))) alert(isFinite(vnumero))

true

NaN

// muestra false // muestra // muestra

alert(isFinite(vcadena)) alert(isFinite(vnumero/0))

// muestra false // muestra false

alert(Number("1234")) alert(Number(vcadena))

// muestra 1234 // muestra

alert(Number("2 peces"))

// muestra NaN

alert(String(vnumero) + " años") el texto 2001 años alert( String(vnumero + 3.141516)) 2004.141516 </script> </body> </html>

PROGRAMACIÓN CLIENTE

// muestra NaN // muestra 2001 // muestra

// muestra // muestra

Las funciones decodeURI, decodeURIComponent, encodeURI y encodeURIComponent Estas funciones implementadas para IE5.5 y NN6 permiten realizar la conversión de strings a strings URI (Uniform Resource Identifier) válidos, y viceversa. Estos strings, que por ejemplo pueden ser direcciones web, llamadas a CGI, etc. deben sufrir una conversión que permita pasar cada carácter de un sitio a otro por Internet. Así por ejemplo, el carácter espacio en blanco tendrá una conversión hexadecimal a %20. Se utilizan encodeURI y decodeURI para URI completas ya que algunos símbolos, como :// que forman parte del protocolo o el ? en los strings de búsqueda o los delimitadores de directorios, no se codifican. Para URI simples que no contengan delimitadores se usarán las funciones encodeURIComponent y decodeURIComponent. encodeURI Descripción Convierte una cadena de texto que representa una cadena URI válida. Sintaxis

encodeURI( String )

Ejemplo

<html> <body onLoad="javascript:location.href=encodeURI('http://www.eldominio.es/pepeillo de los palotes.htm')"> </body> </html> El retorno sería el texto: http://www.eldominio.es/pepeillo%20de%20los%20palotes.htm

decodeURI Descripci ón Sintaxis

Descodifica una cadena URI codificada.

Ejemplo

<html>

decodeURI( String )

<body onLoad="javascript:alert(decodeURI('http://www.eldominio.es/pepeillo%20de%20lo s%20palotes.htm'))"> </body> </html> El retorno sería: http://www.eldominio.es/pepeillo de los palotes.htm encodeURIComponent Descripción Convierte una cadena de texto que representa un componente de una

PROGRAMACIÓN CLIENTE

cadena URI. Sintaxis

encodeURIComponent( String )

Ejemplo

<html> <body onLoad="javascript:alert(encodeURIComponent('pagina:2.htm'))"> </body> </html> El retorno sería el texto: pagina%3A2.htm con la función encodeURI habría devuelto: pagina:2.htm

ya que los : son un delimitador. decodeURIComponent Descripción Descodifica un componente de una cadena URI codificada. Sintaxis

decodeURIComponent( String )

Ejemplo

<html> <body onLoad="javascript:alert(decodeURIComponent('pagina%3A2.htm'))"> </body> </html> El retorno sería: pagina:2.htm

Las funciones escape y unescape En versiones anteriores de los navegadores, las funciones escape y unescape cumplían la misma función que encodeURI y decodeURI, aunque estas no eran capaces de codificar/descodificar todos los caracteres de la recomendación RFC2396. escape Descripción Sintaxis

Convierte una cadena de texto que representa una cadena URI válida. escape( String, [,1] ) el parámetro opcional 1, determina si se van a codificar los caracteres delimitadores

unescape

PROGRAMACIÓN CLIENTE

Descripción Sintaxis

Descodifica una cadena de texto que representa una cadena URI válida. unescape( String )

Función toString toString Descripción

Convierte un objeto en una cadena de texto. El resultado depende del objeto al que se aplica. Los casos son los siguientes: String : retorna el mismo string Number: retorna el string equivalente Boolean: true o false Array: los elementos del array separados por comas Function: el texto que define la función

Sintaxis

Algunos de los objetos DOM que no tienen nada que retornar como string, si se les aplica la función toString retornan algo como: [object tipo del objeto] toString( [base] )

Ejemplo

… var letras= new Array(&quot;a&quot;, &quot;b&quot;, &quot;c&quot;) document.write(letras.toString()) … El resultado en la página sería: a,b,c

Las funciones watch y unwatch Para versiones de Netscape a partir de la 4, las funciones watch y unwatch se pueden aplicar a cualquier objeto, incluso los definidos por el programador. No implementado en IE.

watch Descripción

PROGRAMACIÓN CLIENTE

Aplicada a un objeto al que se asigna un valor a una de sus propiedades, invoca a una función definida por el programador que recibirá el nombre de la propiedad, su valor anterior y su nuevo valor.

watch( propiedad, función )

Sintaxis unwatch Descripción

Desactiva la funcionalidad activada por la función match. watch( propiedad )

Sintaxis

Ejemplo watch y unwatch <html> <head> <title>Ejemplo watch y unwatch</title> <script language="JavaScript"> function cambio(){ document.mif.entrada.value = "papagayo" ver(true) document.mif.entrada.value = "loro" ver(false) } function ver(activado){ var mi_obj = document.mif.entrada

}

if (activado) mi_obj.watch('value', muestra) else mi_obj.unwatch('value')

function muestra( prop, valor1, valor2){ alert("La propiedad " + prop + " era " + valor1 + " y ahora es " + valor2) return valor2 } </script> </head> <body> <form name='mif'> <input type='text' name='entrada' value='papagayo'> <input type='button' name='boton' value='cambio' onClick='cambio()'> </form> </body> </html>

PROGRAMACIÓN CLIENTE