PROGRAMA INFORMTICA Y SISTEMAS INTERNET 2 FUNDAMENTOS DE JAVA SCRIPT (APLICACIONES AL LADO DEL CLIENTE)

HTLM DINMICO PRIMERA PARTE: FUNDAMENTOS DEL LENGUAJE JavaScript OBJETIVOS: Conocer y estudiar las principales caractersticas del lenguaje JavaScript, la sintaxis, los operadores, las estructuras de control y funciones, como base principal para la creacin de programas web al lado del cliente Realizar ejercicios prcticos aplicando los conceptos y la sintaxis conocida en esta parte

1.1 INTRODUCCIN JavaScript es un lenguaje de alto nivel, basado en objetos, diseados para permitir a los programadores WEB la generacin de documentos WEB interactivos de un modo sencillo. Ofrece las caractersticas bsicas de un lenguaje orientado a objetos sin las complejas realizaciones que acompaan realizaciones que acompaan a lenguajes como java y C++. No permite la definicin de clases ni la utilizacin de herencia.

El vocabulario de JavaScript es relativamente pequeo, es fcil de comprender y nos da un amplio nmero de posibilidades, antes no disponibles. JavaScript nos proporciona un conjunto de herramientas compactas propias que realizan interacciones entre los usuarios y las pginas HTML. Estas herramientas nos permiten responder a eventos del Mouse, teclado, a las entradas de los formularios, a la navegacin de la pgina y a otros eventos. Las respuestas a los usuarios pueden ser invocadas sin necesidad de hacer transmisiones por la red, esta es la mayor ventaja de JavaScript respecto a otras soluciones como ASP( active Server pages) o CGI (common getway interface): las interacciones del usuario al ser procesadas en el computador del propio usuario evitan la sobrecarga en Internet. Con ASP o CGI, las interacciones con el usuario deben ser procesadas en un equipo servidor y, por lo tanto, transmitidas por la red.

1.1.1 Javascript es un lenguaje interpretado Como la mayora de los lenguajes de los lenguajes script, JavaScript es interpretado en tiempo de ejecucin por el navegador antes de que se ejecute. La desventaja de los lenguajes interpretados es el tiempo en que se tarda en ejecutar el cdigo, porque el navegador compila las instrucciones antes de ser ejecutadas. Sin embargo, la ventaja es que es mucho ms fcil de utilizar. Los programas JavaScript se insertan en pginas HTML. Si el navegador es compatible con JavaScript interpretar el cdigo y lo ejecutar. Por lo tanto, la ejecucin depende de la capacidad que tenga el navegador para interpretar el cdigo JavaScript. 1.1.2 Eventos Una de las caractersticas de JavaScript es su capacidad para capturar un nmero ilimitado de acciones del usuario, conocidas por la mayora de los programadores como eventos. Algunos elementos HTML reaccionan a los eventos, como los enlaces que al pulsar sobre ellos nos muestran un nuevo documento; como los textos o grficos en los que cuando el puntero de ratn pasa sobre ellos este cambia de una flecha a una pequea mano apuntando. Algunos navegadores tambin responden mostrando la URL de destino en la barra de estado. JavaScript denomina este evento como MouseOver y se activa siempre que se mueva el puntero del ratn sobre el elemento. Si se pulsa sobre cualquier parte de un enlace, el navegador reacciona envindonos a una localizacin diferente en la web o abriendo un nuevo archivo. Esta accin se denomina evento click, el cual se desencadena siempre que se pulsa un botn de ratn sobre un enlace. 1.1.3 Importancia de JavaScript?

Existen varias razones para usar java JavaScript dentro de los documentos html. Nos permiten hacer cosas con las pginas que de alguna otra forma sera difcil de realizar. En algunos casos se puede utilizar CGI en lugar de JavaScript, pero CGI es ms complicado de aprender y utilizar. Como otros lenguajes script que aumentan las capacidades de las aplicaciones con las que trabajan, JavaScript extienden las pginas html ms all de uso normal. Nos permite dinamizar los sitios web, gracias a su gran flexibilidad. En un sitio web estndar podemos obtener ms informacin pulsando sobre un enlace de hipertexto, que indica al navegador que nos enve a otra pgina. En una pgina ms interactiva , podemos rellenar un formulario, enviar resultados al servidor y esperar una respuesta. En una pgina mejorada con JavaScript, existe cdigo JavaScript insertado dentro del cdigo HTML. El JavaScript puede proporcionar informacin instantnea, sin necesidad de esperar por una respuesta del servidor. Esta informacin puede venir de una entrada de usuario, del cdigo oculto dentro del documento o de otros documentos de diferentes marcos e incluso de diferentes ventanas.

1.2 FUNDAMENTOS DE PROGRAMACION JAVASCRIPT

1.2.1. Sintaxis bsica Se puede implementar JavaScript de cualquiera de estas dos maneras: insertando el cdigo en un documento HTML entre un conjunto de etiquetas <SCRIPT>, o insertndolo dentro de etiquetas HTML para responder a un evento. JavaScript se inserta dentro de los documentos HTML por medio de las etiquetas de comienzo y final de script. El navegador comienza buscando la primera etiqueta de escript: <script language="javascript"> //sentencias </script> Bloque de cdigo JavaScript El siguiente es un ejemplo muy sencillo de un programa JavaScript dentro de un documento html. <html> <head> <title>MI PRIMER SCRIPT</title> </head> <body> <!- -se oculta la informacin de los navegadores antiguos <script language="javascript"> document.write("MI PRIMER SCRIPT JavaScript"); //final del comentario - -> </script> </body> </html>

El listado anterior muestra una pgina HTML bsica que fija el valor de la barra de titulo del navegador a MI PRIMER SCRIPT. Despus de la primera etiqueta de script se incluyen unas etiquetas de comentarios que engloban el cdigo fuente JavaScript, y que evitan que dicho cdigo se muestre como texto plano en los navegadores que no entienden las etiquetas. La palabras document y write son reconocidas por JavaScript y usadas conjuntamente para realizar una aacin, especficamente, el mtodo write() coloca la frase MI PRIMER SCRIPT JavaScript dentro del documento HTML antes de que sea visualizado por el navegador del cliente; de este modo se puede generar una pgina html completa.

1.2.2 Tokens Los tokens son palabras, las frases o los caracteres ms pequeos que JavaScript puede entender. Cuando JavaScript es interpretado, el navegador trocea el script en estos tokens ignorando los espacios y los comentarios. Los tokens de JavaScript se agrupan en cinco categoras: identificadores, palabras reservadas, literales, operadores y separadores. Como en todos los lenguajes de programacin, existen mltiples formas de ordenar estos tokens para indicar que realice una funcin especfica. La sintaxis del lenguaje es la que indica la forma de combinar estos tokens. 1.2.3 Identificadores Los identificadores son simplemente nombres que representan variables, funciones, mtodos u objetos. Consisten en una combinacin de caracteres o en una combinacin de caracteres y dgitos. Algunos de estos nombres forman parte del lenguaje y estn reservados. Existen unas reglas que es importante tener en cuenta a la hora de definir identificadores: - Todos los identificadores deben comenzar por una letra o por un guin bajo ( _ ) - Despus se puede utilizar cualquier combinacin de letras (maysculas o minsculas) de dgitos y de guiones bajos. La siguiente tabla muestra algunos ejemplos de identificadores vlidos e invlidos Validos Valor_total edadpromediodevida Valor2 N Invlidos Valor total Edad-promedio de vida 2valor return (palabra reservada)

1.2.4 Palabras reservadas Las palabras reservadas son identificadores predefinidos que no pueden ser usados por el usuario para denominar variables,, funciones, mtodos u objetos. Forman parte del lenguaje JavaScript. La siguiente tabla muestra palabras reservadas de JavaScript.

abstract boolean break byte case catch class const continue default Do double

else extends false final finally flota for function Goto If in instanceof

Palabras reservadas int interface labeled long native new null package private protected sort static

super switch sinchronized this throw throws trasient true try typeof while with

1.2.5 Literales

Los literales son datos que comprenden nmeros o caracteres usados para representar valores fijos en JavaScript. Son valores que no cambian durante la ejecucin del script. 1.2.6 Tipos de literales 1.2.6.1 Literales enteros Los enteros se pueden representar en formato decimal (base 10), octal (base 8) o hexadecimal (base 16). Ejemplo: Decimal Octal hexadecimal 123 2344 071 0582 0xA25 0x1239

1.2.6.2 Literales en coma flotante Literales en coma flotante representan nmeros decimales con parte fraccionaria. Se pueden expresar en forma estndar o con notacin cientfica. En notacin cientfica se utiliza E o e para designar el exponente. Ambos el nmero el numero decimal y el exponente pueden ser positivos y negativos.

Valores 3470.345 -1.98 8.33 E12 4.0 e-44 1.2.6.3 Literales bolanos JavaScript implementa tipos de datos bolanos, soporta los literales true, false. Estos representan los valores 1 y 0 respectivamente. Literales de cadena Una cadena esta encerrada entre 0 ms caracteres encerrados entre comillas dobles ( ) o entre comillas simples ( ) . Literales Hola a todos Error de ejecucucin Buena Suerte 1.2.6.4 Caracteres especiales Cuando se escribe scripts, a veces es necesario decirle al computador que utilice caracteres especiales o teclas, tales como la tabulacin o el retorno de carro. Para hacer esto, se utiliza el carcter \ delante de un cdigo de escape como muestra la siguiente tabla: Cdigo de escape \b \f \n \r \t \\ \ \ 1.2.7 Variables Significado Espacio hacia atrs Alimentacin de lnea Nueva lnea Retorno de carro Tabulacin Blackslash Comilla simple Comilla doble

Una variable es el nombre que se le da a una posicin de memoria del computador en la cual se almacena informacin. Conociendo de esta posicin de memoria (direccin), es posible de encontrar, actualizar, o recuperar la informacin cuando la necesitamos durante la ejecucin de un programa. 1.2.7.1 Nombrado variables Para decir a JavaScript que un identificador se va utilizar como variable, esta se debe declarar primero. Para declarar variables en JavaScript se utiliza la palabra reservada var seguida del nombre de la nueva variable. Esta accin reserva el nombre como una variable que ser utilizada como rea de almacenamiento para cualquier tipo de datos que se quiera guardar en ella. Declaraciones var nombres; var n; var i,j,k; var prueba,dato Una vez una variable se declara esta puede ser inicializada con un valor. Esto se hace utilizando el operador de asignacin ( = ). Se puede iniciar una variable a mismo tiempo que se declara o en cualquier otro punto despus en el script. Asignar una variable cuando se declara puede ayudarnos a recordar el tipo de valor original para el que se cre la variable. La siguiente tabla muestra las declaraciones previas con inicializacin: Declaraciones var nombres=CARLOS; Var n = 0.00; var i=1, j=1; 1.2.7.2 Tipos de variables Cuando se almacena informacin en una variable automticamente se le clasifica en uno de los cinco tipos de datos validos de JavaScript: Tipos de datos number bolean string function object Ejemplo -19, 3.1416 Trae, false BUENAS TARDES A TODOS unescape, write Window, document, null

1.2.7.3 mbito de variables El mbito de una variable hace referencia al rea o reas dentro del programa en las cuales la variable puede ser referenciada, suponiendo que insertamos el script en la cabecera de un documento HTML y otro destino dentro del cuerpo del mismo documento HTML, JavaScript considera que las variables declaradas en cualquiera de estas dos reas tienen el mismo mbito. Ests variables se consideran globales, y son accesibles por cualquier script en el documento actual. Las variables declaradas dentro de funciones se consideran locales y no son accesibles por cualquier script. 1.2.8 Constantes Una constante es un identificador que mantiene el mismo valor durante toda la ejecucin de un programa. JavaScript utiliza constantes propias del programa como por ejemplo la constante PI la cual se puede utilizar a travs del objeto Math. Las constantes definidas por el usuario son variables creadas por el programador cuyos valores no pueden cambiar. Las constantes suelen representarse con letras maysculas y minsculas y son definidas y son definidas al inicio de un programa. JavaScript no soporta constantes en el sentido tradicional. Normalmente, un lenguaje que soporta variables definidas por el usuario, asegura que en ninguna parte de la aplicacin se pueda cambiar el valor de la constante una vez que se define. En JavaScript no hay forma de asegurar que el valor de una variable no puede ser alterado.

1.2.9 Expresiones

Las expresiones son conjuntos de sentencias que, como un grupo, son evaluadas a un valor simple. Es valor resultante es clasificado dentro de los cinco tipos de datos de JavaScript.

1.2.10 Cometarios Java JavaScript permite insertar comentarios dentro de los bloques de cdigo JavaScript. Para comentar lneas se utilizan los carateres ( // ), de esta forma la lnea ser ignorada. Para comentar varios bloques de lneas, estas se deben rodear de las marcas ( /* ) para el inicio del bloque y ( */ ) para el final del bloque. 1.2.11 Operadores Los operadores son smbolos o identificadores que representan el mundo en el que una combinacin de expresiones se evala o manipula. Los operadores se dividen en: 1. 2. 3. 4. 5. 6. operadores de asignacin; operadores aritmticos; operadores relacionales; operadores lgicos; operadores sobre bit, que suelen utilizarse slo para generar colores; operadores cadenas.

Pueden ser unitarios o binarios: los primeros precisan un nico operando, los segundos, dos. El primer operador que hay que conocer es el operador de asignacin cuyo signo es el igual (=). Su uso en Javascript es similar al que tiene en C y distinto del que posee en matemticas porque sirve para asignar un valor y no a establecer relaciones de igualdad. Para esto ltimo existe otro operador (= =). Con el uso del operador de asignacin se crea como una fotocopia del valor de la expresin que queda a la derecha del operador en el lado de la izquierda del operador. Los operadores aritmticos son binarios o unitarios. Los operadores unitarios modifican el valor al que se aplican y son: Operador Smbolo Accin Incremento ++ Incrementa una unidad Disminucin -Disminucin Menos Vuelve negativo un nmero unitario

Los operadores unitarios matemticos pueden colocarse antes (prefijos) o despus (sufijos) del operando y su valor vara segn esta posicin, ya que el operador prefijo modifica el operando antes de utilizar su valor, mientras eloperador sufjo modifica el operando despus de haber utilizado el valor. Un ejemplo puede facilitar la comprensin: x=10; x=10; y=x++; por lo que y=++x; por lo que y=10 y x=11 y=11 y x=11 Los operadores binarios matemticos no cambian el valor de los operandos, sino que memorizan el resultado en un tercer operando. Incluyen las principales operaciones aritmticas: Operador Suma Resta Multiplicacin Divisin Smbolo Accin + Suma dos operandos Reste el segundo operando del primero * Multiplica los dos operandos / Divide el primer operando por el segundo Facilita el resto de la divisin entre dos Resto (mdulo) % operandos

no es posible, sin embargo, utilizar el operador de clculo del mdulo cuando los operandos tienen coma mvil. El operador de divisin aplicado a variables de tipo entero produce un resultado truncado en la parte decimal. Si se divide el mdulo entre cero, se tendr una excepcin en la ejecucin: si la operacin excede del lmite inferior (underflow), el resultado ser cero; si excede del lmite superior (overflow), se obtendr una aproximacin. El operador de asignacin puede tambin ser compactado, es decir, puede combinarse con un operador aritmtico. En general, cuando las expresiones son del tipo: variable=variable operador expresin pueden cambiarse en: variable operador = expresin es decir, se tiene la siguiente tabla: Escritura compacta x += y x -= y x *= y x /= y x %= y Escritura equivalente x=x+y x=x-y x=x*y x=x/y x=x%y

Con operador relacional entendemos la relacin que tiene un valor respecto a otro. Se basan en el concepto de verdadero o falso y en todos los casos operan con slo dos estados diversos (0/1, encendido/apagado, verdadero/falso). Los operadores relacionales son: Operador > >= < <= == != Accin Mayor que Mayor o igual Menor que Menor o igual Igual Distinto

Los operadores relacionales, como ya hemos dicho, producen un resultado 1 si la relacin es verdadera, y 0 si la relacin es falsa. Es importante comprender que el output est constituido slo por dos valores a fin de evitar confusiones entre el operador de asignacin y el de igualdad. Los operadores lgicos son muy parecidos a los relacionales, en el sentido de que dan tambin como output slo dos valores que, en este caso, son: 0 si la expresin lgica es verdadera, 1 si es falsa. Los operadores lgicos son (el NOT es un operador unitario): Operador AND OR AND OR XOR NOT Smbolo & | && || ^ ! Significado AND lgico OR lgico AND valoracin OR valoracin OR exclusivo Negacin

La negacin (!) equivale al complemento a uno (~). Los operadores &, | valoran ambos lados del argomento y deciden el resultado. Los operadores && y || pueden emplearse para evitar la valoracin de los operandos de la derecha si la valoracin es necesaria. Las tablas de verdad correspondientes son: X 0 Y 0 X&&Y X| |Y 0 0 X^Y 0 !X 1

0 1 1

1 0 1

0 1 0

1 1 0

1 0 1

1 0 0

Estos operadores son muy tiles para agrupar diversas expresiones que, en otro caso, se utilizaran con if nidificados. Existen tambin operadores de asignacin combinados con operadores lgicos (&=, |=, ^=). Las operaciones bit a bit se ocupan de controlar e impostar los bit. Hay que recordar que el resultado de estas operaciones no siempre es 0 1, como para los operadores lgicos. Los operadores son: Operador & | ^ ~ >> << >>> Accin AND OR XOR Complemento a uno Shift a la derecha Shift a la izquierda Shift a la derecha rellenando los ceros

Las tablas de verdad son las mismas que las de los operadores lgicos. El operador AND bit a bit se puede concebir como un modo para cancelar un bit llevndolo a 0. El operador OR bit a bit es el contrario de AND y puede utilizarse para impostar en 1 un bit, mientras que el operador XOR puede utilizarse para impostar en 1 un bit si los bit comparados son distintos. Los operadores de shift corren todos los bit de una variable hacia la derecha o hacia la izquierda un nmero determinado de posiciones y los nuevos bit que se crean se impostan en 1, mientras que los bit que salen se pierden (excepto los del signo). Las operaciones de shift son tiles para descifrar el input de un dispositivo externo, como un conversor analgico/digital, y permiten realizar operaciones rapidsimas entre enteros en cuanto el hecho de correrse a la derecha divide un nmero por dos, mientras que correrse a la izquierda lo multiplica tambin por dos. El operador de complemento a uno, por su parte, invierte el estado de los bit, por lo que todos los 1 se cambiarn en 0, y viceversa. Naturalmente, dos operaciones de complemento en el mismo nmero producen como resultado el nmero original. Los operadores sobre cadenas son: Operador + += == != Nombre Suma Adjunta Igualdad Desigualdad Sintaxis cadena=cadenaA+cadenaB cadena=cadenaA+="hola" if (cadenaA==cadenaB) if (cadenaA!=cadenaB

1.2.12 El operador typeof El operador typeof devuelve una cadena describiendo el tipo de datos que corresponde con operando que se el pasa. De este modo podemos saber si el operando que estamos utilizando es una funcin (tipo funcin), un valor numrico (tipo number), una cadena de caracteres (tipo string) , un valor booleano (tipo boolean), un objecto tipo object o si es un valor sin definir tipo (tipo undefined). Este operador es especialmente til cunado queremos saber si una variable ha sido bien definida para el tipo de operacin a la que se va a someter. El siguiente ejemplo muestra el funcionamiento del typeof sobre los 6 tipos de operandos bsicos que admite. El siguiente ejemplo muestra el funcionamiento del operador typeof sobre los 6 tipos de operandos bsicos que admite.

<html> <head> <title>javascript typeof ejemplo</title> </head> <body> <script language="javascript"> var mivar document.write("<h2> MANEJANDO EL OPERADOR typeof... </h2>"); document.write("<br>"); document.write("<table border=1 cellpadding=4>"); document.write("<tr aling=center> <td> Operandos </td>"); document.write("<td> 7.34E4 </td>"); document.write("<td> hola </td>"); document.write("<td> true </td>"); document.write("<td>isNaN </td>"); document.write("<td>Document</td>"); document.write("<td> mivar </td></tr>"); document.write("<tr aling=center> <td> tipos </td>"); document.write("<td>" +typeof 7.34E4 + "</td>"); document.write("<td>" +typeof 'hola' +"</td>"); document.write("<td>" +typeof true +"</td>"); document.write("<td>" +typeof isNaN +"</td>"); document.write("<td>" +typeof document +"</td>"); document.write("<td>" +typeof mivar +"</td></tr>"); document.write("</table>"); </script> </body> </html>

1.2.13 Estructuras de control

Las estructuras de control permiten cambiar el flujo de ejecucin bsico del script, es decir, gracias a ellas la ejecucin del script no tiene que ser toda lineal. Tambin permite que ciertas partes del script no tengan que ejecutarse siempre. 1.2.13.1 Sentencias condicionales

La expresin base del control de flujo es: if(expresin) instruccin[else instruccin]... donde la expresin es booleana, es decir, puede asumir los valores true o false. La instruccin principal puede ir seguida de else, que indica una instruccin alternativa que se ejecutar cuando la primera no se haya verificado. Si hay que efectuar una serie de test se puede iterar el else de esta manera: If (expresin) { Instruccin } else(expresin){ instruccin } Una alternativa de la anterior es la instruccin switch. Su forma sintctica es:

switch(expresin) { case constante1: instrucciones case constante 2: instrucciones .... default instrucciones } El valor de la expresin se compara con los diversos valores de los case y cuando se encuentra una correspondencia, se ejecuta la instruccin o las secuencias de instrucciones asociadas, aun cuando al case est asociado un statement vaco o bien un ulterior switch. La instruccin de default es opcional y se ejecuta slo si no se ha encontrado correspondencia. La instruccin break es opcional, en cuanto permite slo que el programa salga del ciclo de switch, por lo que si no apareciera el programa continuara comparando el valor. Muy vlida tambin la expresin condicional ternario que funde el if...else en un nico comando, que es el ?, tambin conocido como operador ternario.Su forma es (prestad atencin a los dos puntos): Expresin1 ? Expresin2 :Expresin3 donde si es verdad la primera expresin, se ejecuta la segunda; si es falsa, se ejecuta la tercera. Obsrvese el ejemplo:
<script language="javascript"> var edad=-1,res; edad=prompt("entre su edad"); edad>=18?res="USTED PUEDE VOTAR ":res="USTED NO PUEDE VOTAR" document.write(res); </script>

break; break;

1.2.13.2 Los bucles La utilizacin de los bucles dentro de un script sirve para muchos propsitos, uno sencillo, pero habitual, es utilizar los bucles para contar. Tambin se utilizan para recorrer objetos o estructuras compuestas por ms de un elemento, como ocurre con las estructuras de tipo array. El bucle for un poderoso instrumento de iteracin de instrucciones es el loop for que ejecuta una serie de instrucciones hasta que no se llega al lmite indicado por una condicin. La variable asume a menudo el nombre de contador y debe ser inicializada, despus, en cada paso, se incremente y, despus, se compara con la condicin: si es falsa el ciclo contina, si es verdadera, el ciclo se interrumpe. La instruccin es: for (inicializacin; condicin; incremento) instruccin; donde la primera expresin nos dice dnde inicializar la variable contador, la segunda expresin, pone el lmite condicional a la reiteracin de la instruccin, y la ltima expresin dice al loop cunto debe aumentar o disminuir la variable. As por ejemplo, es muy til el ciclo que sirve para inicializar un array (en nuestro caso, tomamos un array de 10 elementos: for(i=0;i<10;i++){

matriz[i]=0;

} Os recordamos que las matrices empiezan a contarse desde 0, por lo que, cuando el contador asume valor 10, el ciclo no se repite. Otro tipo de ciclo es for...en que trabaja con las propiedades de un objeto. La sintaxis es: for (ndice in objeto) {instrucciones} Dicha funcin se usa para analizar las propiedades del objeto que se indica. Es una instruccin algo compleja pero de enorme utilidad para conocer el valor que en un momento dado poseen las propiedades de un objeto. Aqu no entraremos en pormenores. Baste un ejemplo:
for (i en navigator){ document.write("Propiedad :"+i); document.writeln (" valor: :" +navigator[i]); }

El bucle While y do ... While Podemos tener otro control de flujo con: while (condicin) expresin que ejecuta la expresin siempre que la condicin el verdad. Para crear un ciclo infinito, puede funcionar perfectamente la instruccin: while (true) {...} do ... While Si hay que ejecutar el bloque de instrucciones por lo menos una vez, acuede en nuestra ayuda otro control de flujo: do {instrucciones} while (condicin) que ejecuta la expresin siempre que la condicin sea verdad. Los comandos break y continue sirven para optimizar los ciclos for y while, as como para el operador condicional if. El comando break, de hecho, interrumpe un bloque de instrucciones saltando a la primera instruccin que sigue al bloque que contiene el break. Un uso apropiado evitar la formacin de loop sin salida: Function interrumpe() { while (x>0) { if (x>3) break; //aqu la instruccin se interrumpe y sale del if x++; } return x;

} El ejemplo muestra cmo el ciclo contina incrementando la variable x hasta que sta llega a ser superior a 3, en cuyo caso encuentra la instruccin break que interrumpe el ciclo y contina con la instruccin que sigue al bloque (return x;). El comando continue, por su parte, indica que se continue el bloque pero interrumpiendo la iteracin en ese punto y volviendo a comenzar desde el inicio del bloque. while(x<10) { x++; if (x>3) continue; a+=x; } El ejemplo muestra cmo el ciclo se repite si x es inferior a 10, mientras que si es igual a 8, la instruccin continue interrumpe el ciclo y vuelve a empezar desde el principio.

1.2.14 Funciones Algunas secciones del cdigo de un script deben ser ejecutadas tan pronto como la pgina web se carga en el navegador. Otras veces es preferible que el cdigo acte despus de que un formulario HTML haya aceptado informacin desde el cliente. Tambin es habitual que partes del cdigo se repitan un nmero indeterminado de veces durante la ejecucin del script. Estas necesidades hace que nazca la idea de dividir el cdigo de un script en partes menores, para que cada una de las cuales sirva a un propsito especfico e individual. Una funcin en JavaScript es simplemente una seccin de cdigo a la que se la ha dado un nombre. Utilizando este este nombre, un script puede llamar a esta seccin del cdigo tantas veces como quiera y en los momentos en los que lo necesite. Las funciones pueden recibir valores desde las sentencias que las llaman. Estos valores se denominan argumentos, y pueden devolver valores de las sentencias que las llaman. Los argumentos se pueden utilizar como variables dentro del bloque de sentencias que conforman la funcin. 1.2.14.1 Creacin de funciones La sintaxis para crear una funcin es la siguiente: Fuction nombrefuncin(argumento1, argumento2,... ,argumenton) { sentencias } Las funciones se deben declarar dentro de las etiquetas <SCRIPT> y fuera de la declaracin de otra funcin y de cualquier estructura de control. Suele recomendarse que las funciones se declaren dentro de un script que este incluido en la seccin <HEAD> del documento. De esta manera nos aseguramos que la funcin este disponible para cualquier otro script declarado, en el mismo momento en que se carga la pgina.

1.2.14.2 Llamadas a funciones Una vez declarada una funcin, sta no se ejecuta hasta que se llama de cualquier script. Para llamar una funcin solo hay que escribir una sentencia que contenga el nombre de la funcin y entre parntesis los valores de los argumentos de llamada de la misma.

En el siguiente ejemplo se muestra la creacin de una funcin y el llamado de la misma en un documento html.

<html> <head> <title>Pagina nueva 1</title> <script language="javascript"> function pares() { k=k + 50; for(i=k+1-50;i<=k;i++) { par=i*2; document.write(par + ","); if(i%10==0) { document.write("<br>"); } } } </script> </head> <body> <script language="javascript"> var k=0; document.write("<H3> NUMERO DE PARES ENTRE 1 Y.... </H3>"); do{ pares(); } while(confirm("DESEA VER LOS PRXIMOS 50 PARES")); </script> </body> </html>

1.2.15 Funciones propias del lenguaje JavaScript cuenta con una serie de funciones propias del lenguaje e independiente de los objetos que componen su modelo.

1.2.15.1 Funciones ESCAPE y UNSCAPE La funcin scape(carcter) devuelve el cdigo ASCII correspondiente al carcter pasado como parmetro. El Cdigo ASCII devuelto tiene el formato %xx donde xx es el valor numrico de codificacin del carcter. La funcin unscape(cadena) es la opuesta a la anterior, es decir, devuelve el carcter cuya codificacin ASCII coincide con la cadena pasada como parmetro. La cadena deber tener alguno de los formatos siguientes %entero o valor hexadecimal 1.2.15.2 Funciones PARSEINT y PARSEFLOAT La funcin parseInt(cadena,base) convierte la cadena pasada como parmetro en un entero en la base indicada en el segundo parmetro, base y devuelve el resultado. Si este segundo parmetro no se pasa en la llamada de la funcin, se utiliza por defecto la base decimal. La funcin parseFloat(cadena) convierte la cadena pasada como parmetro en un nmero real en coma flotante.

1.2.15.3 Funcin ISNAN La funcin isNaN(valor) evala el valor pasado como parmetro para ver si es o no de tipo numric. La funcin devuelve trae, si el valor evaluado no es numrico y falso en caso contrario.

1.2.15.4 Funcin EVAL La funcin eval(expresin) devuelve el resultado de la expresin pasado como parmetro. 1.3 Ambiente de programacin JavaScript Para escribir nuestros programas en JavaScript podemos utilizar cualquier editor de texto, como el bloc de notas (programa aplicativo incluido en los sistemas Microsoft 9x). Tambin podemos hacer uso de un editor de pginas web como frontpage, Dreamweaver entre otros. Utilizar un editor de pginas web nos facilitara el trabajo de escribir nuestros scripst, ya que podramos utilizar la vista diseo del editor para no tener que escribir todas las instrucciones HTML (ETIQUETAS) y la vista cdigo para escribir nuestros programas JavaScript. 1.4 Ejercicios prcticos 1. Primer programa JavaScript (bienvenida.htm) Con este ejemplo utilizando el bloc de notas, vamos a crear una sencilla pgina web de bienvenida al diplomado utilizando un script JavaScript. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>BIENVENIDA</title> </head> <body> <script language="javascript"> document.write("BIENVENIDOS AL DIPLOMADO EN DISEO DE PGINAS WEB"); </script> </body> </html>

Guardar el documento con el nombre de bienvenida con extensin htm (bienvenida.htm) y cargar el documento en el navegador para ver el resultado.

2. Dentro del argumento de la instruccin document.write podemos incluir etiquetas HTML para realizar ciertas acciones sobre el texto que va a aparecer en la pgina. Por ejemplo: Ubiquemos el texto de bienvenida de la pgina anterior en el centro del documento con fuente arial de color rojo, negrita y con un tamao de 14 . <html> <head> </head> <body> <script language="javascript"> document.write("<center><b><font face='Arial' size='4' color=#FF0000> BIENVENIDOS AL DIPLOMADO EN DISEO DE PGINAS WEB"); document.write("</font></b></center>"); </script> </body> </html> 3. Trabajando con identificadores Construir un script que sume reste y multiplique 3 nmeros enteros definidos. Mostrar los resultados en una tabla. <html> <head> <title>usando identificadores 1</title> </head> <body> <script language="javascript"> var num1=10,num2=30,num3=40; //definir las variables de tipo entero var suma,resta,mult; //definir las variables para almacenar las respuestas suma=num1 + num2 + num3; resta=num1 - num2 - num3; mult=num1 * num2 * num3; document.write("<center><b><font face='arial' size='4'> PROBANDO OPERADORES </font>"); document.write("</b></center><p>"); //construir la tabla para mostrar resultados document.write("<table border='1' "); document.write("<tr> <td> NUMERO 1</td>" ); document.write("<td> NUMERO 2</td>" ); document.write("<td> NUMERO 3 </td>" ); document.write("<td> SUMA </td>" ); document.write("<td> RESTA </td>" ); document.write("<td> MULTIPLICACIN </td> </tr>" ); document.write("<tr> <td>" +num1 + "</td>" ); document.write("<td>" +num2 + "</td>" ); document.write("<td>" +num3 + "</td>" ); document.write("<td>" +suma + "</td>" ); document.write("<td>" +resta + "</td>" ); document.write("<td>" +mult + "</td></tr></table> " ); </script> </body> </html>

4. Trabajando con estructuras de control Crear un script que calcule que determine si los nmeros 20 y -45 son positivos o negativos. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Pagina nueva 1</title> </head> <body> <script language="javascript"> var num1=20,num2=-45 //definir las variables de tipo entero document.write("<center><b><font face='arial' size='4'> PROBANDO CONDICIONALES</font>"); document.write("</b></center><p>"); //calcular si num1 es positivo o negativo if(num1>0) { document.write("EL NUMERO " +num1 +" ES POSITIVO"); } else { document.write("EL NUMERO " +num1 +" ES NEGATIVO"); } //calcular si num2 es positivo o negativo document.write("<br>"); if(num2>0) { document.write("EL NUMERO " +num2 +" ES POSITIVO"); } else { document.write("EL NUMERO " +num2 +" ES NEGATIVO"); } </script> </body> </html>

5. Trabajando con cliclos Crear un script que imprima la series de los primeros 300 nmeros impares y los 100 pimeros mltiplos de 4. <html> <head> <title>USUANDO CICLOS</title> </head> <body> <script language="javascript"> var i, impar; document.write("<center><b><font face='arial' size='4'> PROBANDO BUCLES</font>"); document.write("</b></center><br >SERIE DE LOS PRIMEROS 300 IMPARES <br ><p>"); //GENERAR LOS 300 PRIMEROS IMPARES UTILIZANDO EL CICLO FOR for(i=1;i<=300;i++) { impar=i*2 -1; document.write(impar + ","); //hacer un salto cada vez que se pinten 20 impares if(i%20==0) { document.write("<br>"); } } //generar los 100 primeros mltipos de 4 con el ciclo while document.write("<br><p>SERIE DE LOS PRIMEROS 100 MLTIPLOS DE 4 <br ><p>"); i=4; salto=1 while(i<= 4 * 100) { document.write(i + ","); i=i+4; salto+=1; //hacer un salto cada vez que se pinten 20 mltiplos if(salto%20==0) { document.write("<br>"); } } </script> </body> </html>

6. Obtener datos del usuario Podemos obtener datos del usuario utilizando la funcin promt como se muestra en el siguiente ejercicio. Dados tres nmeros por el usuario calcular el nmero mayor: <html> <head> <title>ENTRADAS DE USUARIO</title> </head> <body> <script language="javascript"> var n1,n2,n3; //declaramos variables para almacenar los tres nmeros de usuario document.write("<center><b><font face='arial' size='4'> PROBANDO ENTRADAS DE USUARIO</font>"); document.write("</b> CALCULAR NUMERO MAYOR</center><br ><p>"); //PEDIR EL PRIMER NUMERO Y ASIGNAR EL VALOR A LA VARIABLE n1 n1=prompt("ENTRE EL PRIMER NUMERO",""); //PEDIR EL SEGUNDO NUMERO Y ASIGNAR EL VALOR A LA VARIABLE n2 n2=prompt("ENTRE EL SEGUNDO NUMERO",""); //PEDIR EL TERCER NUMERO Y ASIGNAR EL VALOR A LA VARIABLE n3 n3=prompt("ENTRE EL TERCER NUMERO",""); //CALCULAR EL NUMERO MAYOR if(n1>n2 && n1>n3) { document.write("EL NUMERO MAYOR ENTRE " + n1 + "," + n2 +" y " +n3 + " es " +n1); } else { if(n2>n1 && n2>n3) { document.write("EL NUMERO MAYOR ENTRE " + n1 +"," +n2 +" y " +n3 +" es " +n2); } else { if(n3>n2 && n3>n1) { document.write("EL NUMERO MAYOR ENTRE " + n1 +"," +n2 +" y " +n3 +" es " +n3); } else { document.write("LOS NUMEROS " + n1 +"," +n2 + " y " +n3 + " SON IGUALES" ); } } } </script> </body> </html>

7. Trabajar con funciones Calcular el factorial de un nmero x dado por el usuario

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows1252"> <title>funcin factorial 1</title> <script language="javascript"> function factorial(n) { var fact; if(n<0) { fact =-1;; //la funcin devuelve -1 para entradas no validas } else { if(n==0) { fact= 1; // factorial de 0 es 1 } else { //calcular factorial para n mayores que 0 fact=1; for(i=1;i<=n;i++) { fact=fact*i; } //devolver el calculo de el factorial de n } } return fact; } </script> </head> <body> <script language="javascript"> var f,x; //variables globales document.write("<center><b><font face=arial size=5>TRABAJANDO CON FUNCIONES<br>"); document.write("FUNCIN FACTORIAL</font></b></center><br><p>"); //pedir el factorial a calcular x=prompt("ENTRE EL FACTORIAL A CALUCALR",""); //VERIFICAR QUE LA ENTRADA ES UN NMERO if( isNaN(x)==true) { alert("EL VALOR DADO NO ES UN NUMERO") } else { //EL VALOR SI ES UN NUMERO. LLAMAR A LA FUNCION FACTORIAL f=factorial(x); document.write("EL FACTORIAL DE " +x +" ES " +f); } </script> </body> </html>

1.5 TALLER DE EJERCICIOS 1. Imprimir la serie y calcular la suma de los primeros n mltiplos de 10 2. Dado un numero entero generar la tabla de multiplicar de dicho nmero 3. Dado lo nombres y apellidos de una persona. Generar una pgina donde se muestre un mensaje de bienvenida a la persona al sito (mostrar los nombres y apellidos de la persona dentro de la pgina) 4. Dado el nombre de un municipio de caldas generar una pagina que muestre la siguiente informacin: Nombre municipio Numero de habitantes Altura sobre el nivel del mar Temperatura promedio Tomar solo 3 municipios de ejemplo. 5. construir una funcin que dado un nmero x indicar si este nmero es un nmero primo 6. Construir una funcin que calcule el numero intermedio entre tres nmeros