Está en la página 1de 20

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLGICOS COMPUTACIN

Nombre de la Practica: CICLO: 02/2011 Lugar de Ejecucin: Tiempo Estimado: MATERIA: DOCENTES: GUIA DE LABORATORIO #1 Fundamentos de pginas web dinmicas en el cliente con JavaScript Centro de Cmputo 2 horas con 30 minutos Lenguajes interpretados en el cliente Inga. Blanca Iris Caas (G-01L), Inga. Issela Meja (Pilet - Ricaldone), Tec. Jonathan Arvalo (Pilet Don Bosco)

I. OBJETIVOS Que el estudiante: Adquiera dominio de los elementos sintcticos bsicos del lenguaje JavaScript Practique las diferentes formas en que es posible incluir cdigo JavaScript en un documento HTML Sea capaz de generar cdigo HTML desde secuencias de comando de JavaScript Pueda crear pginas web utilizando mtodos bsicos de interaccin con el usuario Utilice mtodos bsicos de depuracin de scripts utilizando las herramientas del navegador II. INTRODUCCION TEORICA Formas de introducir cdigo JavaScript dentro de un documento HTML Existen cuatro formas de agregar cdigo JavaScript dentro de un documento web. Estas son: 1. Utilizando el elemento script Este es el mtodo bsico para incluir cdigo JavaScript dentro de HTML. Los navegadores que reconocen scripts suponen que todo texto incluido dentro de estas etiquetas tiene que interpretarse como alguna forma de lenguaje de scripts. Casi todos suponen por defecto, que se trata de cdigo JavaScript. Tradicionalmente la forma de indicar el lenguaje en un elemento script es haciendo uso del atributo language. De la siguiente forma: <script language="JavaScript"> //Sentencias JavaScript </script> De acuerdo con la asociacin W3C en lugar del atributo language, debera utilizarse el atributo type para indicar el tipo MIME del lenguaje en uso. El tipo MIME de JavaScript es "text/javascript". De acuerdo a esta recomendacin debera hacerse uso del siguiente cdigo: <script type="text/javascript"> //Sentencias JavaScript </script> Ahora bien, debido a que en la prctica es mucho ms comn hacer uso del elemento language, en lugar de type, es conveniente hacer uso de ambos atributos en un mismo elemento script, como se puede ver a continuacin:

1 / 20

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

<script language="JavaScript" type="text/javacript"> //Sentencias JavaScript </script> Esta es la forma en que codificaremos durante los ejemplos y ejercicios de las guas de prctica de este curso. 2. Creando scripts .js y vincularlos al documento con el elemento script Esta es la solucin ideal cuando se tienen cdigos de script de muchos cientos de lneas o cuando se crean funciones JavaScript que pueden llegar a utilizarse en varias pginas. En esto casos incluir todo este cdigo dentro de elementos script puede resultar poco productivo e ineficiente. En estos casos es ms conveniente crear el script en un archivo .js independiente y luego vincularlo al documento HTML mediante el atributo src del elemento script. Consideraciones a tener en cuenta al utilizar este mtodo: El archivo debe emplear formato de slo texto Debe ser almacenado con extensin .js. Si utiliza un procesador de texto o un editor de texto asegrese de que realmente fue guardado con esa extensin. No debe emplear el elementos script dentro del cdigo JavaScript creado en el archivo .js La forma sintctica es la siguiente: <script language="JavaScript" type="text/javacript" src="script.js"> </script> Es importante recordar que script es un elemento HTML cerrado, por tanto debe ir acompaado con su respectiva etiqueta de cierre para que funcione correctamente. 3. Empleando atributos HTML conocidos como manejadores de evento La forma de crear pginas web interactivas es el uso de manejadores de eventos. Esto permite responder al usuario desde la pgina web como respuesta a las acciones que realiza en la pgina. Acciones como hacer clic sobre un botn del ratn, presionar una tecla, apuntar con el ratn a algn objeto especfico en la pgina, etc. La forma ms usual de aplicar manejadores de eventos en una pgina es con atributos de ciertos elementos HTML. Algunos ejemplos de estos atributos son: onclick, onmouseover, onchange, onkeypress, etc. Puede observar el siguiente ejemplo simple: <body onUnload="decir_adios()"> 4. Haciendo uso de sintaxis de direccin pseudos-URL (javascript:) Una direccin pseudos-URL permite crear instrucciones especiales con cdigo JavaScript que es posible invocar desde la barra de direcciones del navegador. Sintcticamente estas direcciones comienzan con javascript: y a continuacin se pueden agregar instrucciones JavaScript sintcticamente bien escritas. Por ejemplo: javascript:alert('Hola, APS I'); Las pseudos-URL se pueden utilizar en enlaces como valor para el atributo href y de esta forma ejecutar varias instrucciones a la vez. Como puede verse en el siguiente ejemplo: <a href="javascript:x=5;y=7;alert('Suma:' + (x+y))">Sumar</A> Ejemplos: Los siguientes ejemplos ilustran cmo insertar cdigo de JavaScript de cada una de las formas mencionadas anteriormente:

Lenguajes Interpretados en el Cliente

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

Utilizando etiquetas <script> </script>


<html> <head> <title>Ejemplo de JavaScript - Primera forma</title> <script language="JavaScript" type="text/javascript"> <!-var html; html = "<h3 style='text-align:center;font-family:Impact;font-size:16pt; color:purple;'>"; html += "Una forma de incluir JavaScript dentro de una p&aacute;gina "; html += "web es a trav&eacute;s de las etiquetas &lt;script&gt;&lt;/script&gt;, "; html += "tal y como se ha hecho en este ejemplo</h3>"; document.write(html); //--> </script> </head> <body> </body> </html>

Vinculando un archivo independiente usando el atributo src de la etiqueta <script> Archivo html:
<html> <head> <title>Ejemplo de JavaScript - Segunda forma</title> <script language="JavaScript" type="text/javascript" src="codigo.js"></script> </head> <body> </body> </html>

Archivo independiente de JavaScript: codigo.js


var html; html = "<h3 style='text-align:center;font-family:Garamond;font-weight:bold;fontsize:15pt;color:brown;'>"; html += "Otra forma de incluir JavaScript dentro de una p&aacute;gina "; html += "web es usando el atributo src de la etiqueta &lt;script&gt;&lt;/script&gt;, "; html += "tal y como se ha hecho en este ejemplo</h3>"; document.write(html);

Utilizando los manejadores de eventos de algunas etiquetas HTML

<html> <head> <title>Ejemplo de JavaScript Tercera forma </title> </head> <body onLoad="alert('Hola desde JavaScript');"> <h1 style="text-align:center;font-family:Georgia;font-size:15pt;color:olive">JavaScript te salud</h1> </body> </html>

Lenguajes Interpretados en el Cliente

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

Utilizando sintaxis pseudo-URL


<html> <head> <title>Cuarto ejemplo</title> <style type="text/css"> a:link { font-family:"Century Gothic"; font-style:italic; font-weight:900; font-size:12pt; color:#00CD00; text-decoration:none; } a:visited { font-family:"Century Gothic"; font-style:italic; font-weight:500; font-size:12pt; color:#CDBE70; text-decoration:none; } a:hover { font-family:"Century Gothic"; font-style:italic; font-weight:900; font-size:12pt; color:#6959CD; text-decoration:underline overline; } a:active { font-family:"Century Gothic"; font-style:italic; font-weight:700; font-size:12pt; color:#00E5EE; text-decoration:underline; } </style> </head> <body> <a href="javascript:alert('Felicidades,hicistes clic!');">Hacer clic</a> </body> </html>

Depuracin de errores con el navegador Frecuentemente nos encontraremos con situaciones en donde ser necesario corregir los scripts realizados. Es un comportamiento tpico de la pgina web que contiene JavaScript que no ocurra o no aparezca lo que hemos incluido en JavaScript. Generalmente, esto sucede cuando se produce algn error en la etapa de interpretacin ejecutada por el navegador. Casi todos los navegadores brindan algn mecanismo de depuracin. A continuacin se muestran algunos: Si utiliza Internet Explorer notar que en la barra de estado aparece un pequeo icono de color amarillo de fondo, como smbolo de advertencia. Cuando aparezca este icono ser porque existe algn error de sintaxis en el script que intenta ejecutar. Para poder leer la informacin acerca del problema que ocurre puede hacer doble clic en dicho icono para que se muestre en un dilogo informacin sobre el error. Observa las siguientes figuras:

Lenguajes Interpretados en el Cliente

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

Al hacer doble clic sobre este icono de advertencia debera aparecer un dilogo como el siguiente:

Observar que el dilogo anterior le informa sobre el nmero de lnea en el que se ha producido el error, a veces puede ser que sea en la lnea anterior a la que se muestra, tambin se le informa del carcter y cdigo de error generado. Si utiliza el Mozilla Firefox o el Netscape 7.0 o superior la depuracin resulta ms fcil de realizar a travs de la consola de JavaScript que brindan estos navegadores. En primer lugar tiene que digitar el localizador de recursos URL javascript:, y luego debe presionar la tecla ENTER o hacer clic en el botn Ir a la direccin. Observe la figura de la consola de JavaScript a continuacin en Firefox y en Netscape:

En el caso de que utilice el navegador Opera, el depurador de errores tiene el siguiente aspecto:

Lenguajes Interpretados en el Cliente

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

Para abrir la consola de JavaScript desde el Opera debe hacer clic en el men Herramientas, luego apuntar a la opcin Avanzado y finalmente, hacer clic sobre Consola JavaScript.

Interaccin bsica con el usuario utilizando JavaScript La forma ms bsica de interactuar con el usuario desde JavaScript es haciendo uso de los dilogos de entrada y salida simple proporcionados por los navegadores. Existen tres dilogos para entrada y salida simple. Estos son: a) Alerta (alert()), b) Confirmacin (confirm()), y c) Solicitud de informacin (prompt()). Veamos cada uno de ellos. Dilogo de alerta El cuadro de dilogo de alerta se invoca mediante el mtodo alert() del objeto Window, que conoceremos en futuras prcticas. Este dilogo es simple y muestra un mensaje breve utilizando una cadena de texto, un icono de advertencia y un nico botn Aceptar como el que se muestra a continuacin.

Lenguajes Interpretados en el Cliente

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

Figura 1. Ventanas de dilogo de alerta de JavaScript en los navegadores de uso ms frecuente. La sintaxis bsica para un dilogo de alerta es: window.alert(mensaje); De forma abreviada se puede utilizar as: alert(mensaje); Donde mensaje es una cadena de texto, por lo tanto, si se introduce directamente el mensaje debe escribir el texto entre comillas simples o dobles. Si se utilizan variables declaradas deben ser de tipo cadena. Adems, la cadena puede ser el resultado de la evaluacin de una expresin, como por ejemplo, una concatenacin. Cuando pasa un tipo de dato que no es cadena JavaScript lo convierte en cadena. Veamos algunos ejemplos: alert("Hola desde JavaScript!"); var usuario="Ricardo Ernesto"; alert("Hola " + usuario + ". Bienvenido a JavaScript"); Dilogo de confirmacin Un dilogo de confirmacin utiliza el mtodo confirm() del objeto Window. Este dilogo muestra una pequea ventana con un mensaje para que el usuario responda si est de acuerdo, pulsando un botn Aceptar, o si no est de acuerdo, pulsando un botn Cancelar (OK y Cancel, en un navegador en ingls). El dilogo tambin muestra un icono de interrogacin. El dilogo tiene un aspecto como el que se muestra a continuacin:

Figura 2. Ventanas de dilogo de confirmacin de los navegadores de uso ms frecuente La sintaxis bsica de un dilogo de confirmacin es: window.confirm(mensaje);

Lenguajes Interpretados en el Cliente

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

O en forma resumida confirm(mensaje); Donde mensaje es cualquier variable vlida de cadena de texto o expresin que al final de por resultado un valor de cadena. Este mensaje es el que aparecer como pregunta en el mensaje de confirmacin. Ejemplo: confirm("Deseas aprender JavaScript? "); Dilogo de solicitud de informacin Este dilogo utiliza el mtodo prompt() del objeto Window. Esta ventana pequea contiene un cuadro de texto donde el usuario debe escribir la informacin que se le solicita con un mensaje y un par de botones, uno para ingresar la informacin escrita y otro para cancelar la operacin. Es importante mencionar que el dato ingresado por el usuario en este cuadro de texto, siempre ser procesado en el script con un dato de tipo cadena de texto, sin importar, que se hayan introducido valores numricos. El aspecto es el que se muestra a continuacin:

Figura 3. Ventanas de dilogo de solicitud de informacin de JavaScript en Microsoft Internet Explorer 6.0 y Netscape 7.0, respectivamente. El mtodo prompt() tiene dos argumentos. El primero es una cadena de texto que se muestra como etiqueta para indicar al usuario el tipo de informacin solicitada y el segundo es un valor predeterminado que aparece en el cuadro de texto donde se escribe la informacin solicitada. El mtodo devuelve un valor de cadena que contiene el valor que introduce el usuario en la solicitud. La sintaxis bsica del dilogo solicitud de informacin es: var result = prompt(mensaje, valor); Ntese que para poder utilizar el valor devuelto por el mtodo prompt() debe utilizarse una variable a la cual asignrselo. En la sintaxis anterior mensaje es la cadena de texto que aparece como indicacin del tipo de informacin que se est solicitando y valor es una cadena con un valor predeterminado que aparecer en el cuadro de texto del dilogo solicitud de informacin. Si no coloca un valor predeterminado en la llamada aparecer por defecto, en algunos navegadores el valor undefined. Si no desea esto coloque como valor una cadena vaca. Como se muestra a continuacin: var edad = prompt("Cul es tu color favorito? ", "");

Lenguajes Interpretados en el Cliente

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

Imprimir en la pgina web desde JavaScript Con JavaScript se puede mandar a escribir texto, datos y cdigo HTML de forma dinmica en una pgina web. Para poder hacer uso de esta caracterstica debe hacer uso del mtodo write del objeto document de JavaScript. La sintaxis a utilizar para aplicar este mtodo es la siguiente: document.write(cadena o datos a imprimir); Alternativamente, se puede utilizar tambin: document.writeln(cadena o datos a imprimir); Ejemplo:
document.write("Esta pgina fue modificada por ltima vez: " + document.lastModified);

Manejo bsico de eventos En JavaScript un evento es una accin que ocurre (o se dispara) automticamente como resultado de una accin ocurrida dentro de la pgina web, generalmente provocada por la interaccin del usuario, aunque existen casos en los que no es as. Algunos eventos tpicos son: la carga de una pgina, situar el puntero del ratn sobre un enlace, hacer clic sobre un botn, enviar un formulario, etc. Los manejadores de eventos son atributos HTML que se colocan y son aceptados por algunos elementos. Por ejemplo: onClick, se utiliza para capturar un clic sobre un botn de formulario o sobre un enlace, onSubmit, se utiliza para capturar el envo de un formulario, onMouseOver, para capturar cuando se ha posicionado el puntero del ratn sobre un objeto del documento (imagen, enlace, tabla, etc.)

Sintaxis de javascript
Es importante conocer los aspectos ms importantes de la sintaxis del lenguaje JavaScript antes de ponerse a desarrollar. Los elementos de la sintaxis de JavaScript son comunes a los que proporcionan otros lenguajes: Variables Tipos de datos Operadores Sentencias Constantes Comentarios Estructuras de control Operadores Objetos OBSERVACIN: No se dar en esta gua de prctica una explicacin muy extensa de cada uno de estos elementos de sintaxis. La informacin ya ha sido detallada en la clase terica. Los aspectos de la sintaxis de JavaScript a considerar a la hora desarrollar scripts se detallan a continuacin: JavaScript es un lenguaje sensible al uso de maysculas y minsculas. Esto quiere decir, que hace distincin entre una y otra. Por ejemplo: no es lo mismo var edad, que var Edad. Se est haciendo referencia a variables diferentes. Del mismo modo la palabra reservada var debe digitarse (o escribirse) toda en minsculas. Si se digita (o escribe) Var estar haciendo referencia a un identificador desconocido para el intrprete de JavaScript. Las instrucciones de JavaScript deben terminar en punto y coma. Aunque JavaScript permite que las instrucciones finalicen con un ENTER (retorno de carro), no debera dejarse llevar por este atajo. Es mucho mejor, terminar las instrucciones con el punto y coma. JavaScript es un lenguaje dbilmente tipificado. Esto significa que no requiere que se defina un tipo de dato cuando se declaran variables. En lugar de ello, JavaScript decide el tipo apropiado para el dato en el momento en que lo va a operar o a utilizar en el contexto de un clculo. Esto puede parecer una bondad,

Lenguajes Interpretados en el Cliente

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

pero si no se presta atencin a la hora de realizar los guiones puede llevarse sorpresas inesperadas en los clculos. Debe tenerse especial cuidado con el uso del operador +, que se utiliza tanto para concatenacin como para suma de valores numricos. Considere que si se pasan uno o dos valores de tipo cadena a un operador + este concatenar los operandos en vez de sumarlos. Puede utilizar dos tipos diferentes de comentarios en JavaScript, los mismos que se utilizan con el lenguaje C/C++. El comentario de una lnea, que se representa con el doble signo de barra inclinada (//) y el comentario de bloque, que se representa con el signo de barra inclinada y asterisco, y que se cierra de forma inversa, colocando primero el asterisco y luego, la barra inclinada (/* */). Cuando se desea agrupar un grupo de instrucciones en un mismo bloque debe encerrarlas entre llaves ({ }). Esto ser necesario, cuando se utilicen sentencias de control como el if, else, switch, for, while, do-while que contengan ms de una instruccin. Variables Como en la mayor parte de lenguajes una variable tiene el propsito de almacenar datos que pueden ser modificados posteriormente. Todas las variables tienen un nombre conocido como identificador. En JavaScript las variables se declaran utilizando la palabra clave var seguida por el identificador de la variable. Como se muestra en los siguientes ejemplos: var x; var peso; var nombre; JavaScript permite la inicializacin de variables al mismo tiempo que se hace la declaracin, como se muestra a continuacin: var i = 0; var acumulador = 1; var mensaje = ""; Es recomendable no utilizar variables sin antes declararlas. La aparicin de una variable del lado derecho de una asignacin sin declararla previamente dar lugar a un error. Tipos de datos A pesar de que JavaScript no requiere que las variables se declaren como de un tipo de datos especfico, hay que entender que una vez se le asigna un valor a una variable, en ese momento la variable pasa a ser de ese tipo de datos, aunque posteriormente ese tipo de dato pueda cambiarse si se le asigna a la variable un valor de otro tipo. JavaScript maneja tipos de datos bsicos o primitivos (cadenas, nmeros y booleanos) y tipos de datos compuestos o complejos (objetos, arreglos y funciones). La caracterstica importante de los tipos de datos complejos es que pueden estar constituidos por valores bsicos como cadenas, nmeros o booleanos, pero tambin pueden estar constituidos por datos complejos. Comentarios Los comentarios son necesarios en la medida que los scripts se vuelven mucho ms complejos y largos. JavaScript proporciona mecanismos para utilizar comentarios en sus scripts, que al igual que en C se dividen en dos categoras: a) Comentario de una sola lnea. El comentario en una sola lnea requiere la utilizacin de doble barra inclinada (//) y comenta todo lo que se coloque a continuacin de estos caracteres, siempre que estn en la misma lnea. b) Comentarios de bloque. Para utilizar el comentario de bloque debe abrirse la seccin de comentario con barra inclinada seguida de un asterisco (/*), a continuacin puede digitar el texto del comentario y, por ltimo, debe cerrar la seccin de comentario con un asterisco seguido de una barra inclinada (*/).

Lenguajes Interpretados en el Cliente

10

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

III. MATERIALES Y EQUIPO Para la realizacin de la gua de prctica se requerir lo siguiente: No. 1 2 3 Requerimiento Gua de prctica #1: Fundamentos de pginas web dinmicas en el cliente con JavaScript Computadora con navegadores y editor de texto instalado Memoria USB o disco flexible Cantidad 1 1 1

IV. PROCEDIMIENTO Indicaciones: Para todos los ejemplos de esta gua de prctica utilizaremos el Notepad++. Se pide que cuando guarde el archivo lo haga con extensin .html, a menos que se indique lo contrario. En todo caso, la nica extensin diferente que se utilizar ser la extensin .js, para cuando se requiera crear un script independiente. Ejercicio 1: Creacin de un script sencillo (nombre del archivo: tablamultiplicar.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Tabla de multiplicar</title> <style type="text/css"> hr { background-color:MidnightBlue; height:5px; width:96%; } h1 { margin:6px 33px; border:outset blue 4px; background-color:#6699CC; font-family:Impact; font-size:20pt; color:yellow; } table { background-color:SteelBlue; boder:double blue 2px; } th { font-family:"Century Gothic"; font-weight:900; font-size:12pt; font-style:normal; color:white; background-color:#335599; } td { text-align:right; font-family:"Century Gothic"; font-weight:500; font-size:11pt; font-style:normal; color:yellow; }

Lenguajes Interpretados en el Cliente

11

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

</style> </head> <body> <script language="JavaScript" type="text/javascript"> <!-var numero = prompt('De qu nmero desea la tabla?',''); document.write("<h1 align='center'>Tabla del multiplicar del "</h1><hr>"); document.write("<table align='center' border='1'>"); document.write("<tr align='center' valign='middle'><th>Tabla "</th></tr>"); document.write("<tr><td>" + numero + " * 1 = " + (numero * document.write("<tr><td>" + numero + " * 2 = " + (numero * document.write("<tr><td>" + numero + " * 3 = " + (numero * document.write("<tr><td>" + numero + " * 4 = " + (numero * document.write("<tr><td>" + numero + " * 5 = " + (numero * document.write("<tr><td>" + numero + " * 6 = " + (numero * document.write("<tr><td>" + numero + " * 7 = " + (numero * document.write("<tr><td>" + numero + " * 8 = " + (numero * document.write("<tr><td>" + numero + " * 9 = " + (numero * document.write("<tr><td>" + numero + " * 10 = " + (numero * document.write("</table>"); //--> </script> </body> </html>

" + numero +

del " + numero + 1) + "</td></tr>"); 2) + "</td></tr>"); 3) + "</td></tr>"); 4) + "</td></tr>"); 5) + "</td></tr>"); 6) + "</td></tr>"); 7) + "</td></tr>"); 8) + "</td></tr>"); 9) + "</td></tr>"); 10) + "</td></tr>");

Ejercicio 2: Operaciones bsicas (nombre del archivo: operacionesbasicas.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Calculadora simple</title> <style type="text/css"> body { background-color:coral; } a:link { text-decoration:none; font-family:"Century Gothic"; font-weight:bold; font-size:15pt; color:crimson; } a:visited{ text-decoration:none; font-family:"Century Gothic"; font-weight:bold; font-size:15pt; color:wheat; } a:hover { text-decoration:underline overline; font-family:"Century Gothic"; font-weight:bold; font-size:15pt; color:indigo; } a:active { text-decoration:underline overline;

Lenguajes Interpretados en el Cliente

12

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

font-family:"Century Gothic"; font-weight:bold; font-size:15pt; color:lime; } </style> </head> <body> <script language="JavaScript" type="text/javascript"> <!-var op1 = prompt('Introduzca el primer nmero:',''); var op2 = prompt('Introduzca el segundo nmero:',''); document.write("<h1 align='center'>Operaciones bsicas</h1><hr>"); document.write("<center>"); document.write("<a href='javascript:void(0)' onClick='alert(parseInt(op1) + parseInt(op2))'>Sumar</a><br>"); document.write("<a href='javascript:void(0)' onClick='alert(op1 op2)'>Restar</a><br>"); document.write("<a href='javascript:void(0)' onClick='alert(op1 * op2)'>Multiplicar</a><br>"); document.write("<a href='javascript:void(0)' onClick='alert(op1 / op2)'>Dividir</a><br>"); document.write("<a href='javascript:void(0)' onClick='alert(op1 % op2)'>Residuo</a><br>"); document.write("<a href='javascript:void(0)' onClick='alert(op1 + op2)'>Concatenar</a><br>"); document.write("</center>"); //--> </script> </body> </html>

Ejercicio 3: Clculo de reas geomtricas (nombre del archivo: areas.html) Script1: areas.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Areas</title> <style type="text/css"> caption { font-family:"Arial Black"; font-weight:900; font-size:14pt; color:Chocolate; } .linkOn { font-family:"Cooper Black"; font-weight:900; font-style:italic; color:BlueViolet; text-decoration:underline overline; } .linkOff { font-family:"Cooper Black"; font-weight:300; font-style:normal; color:Orchid; text-decoration:none;

Lenguajes Interpretados en el Cliente

13

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

} .backgroundOn { background-color:Gold; } .backgroundOff{ background-color:Khaki; } </style> </head> <body bgcolor="plum"> <align="center"> <table cellpadding="1" cellspacing="1" align="center" border="2"> <caption>Menu De Opciones</caption> <tr> <td class="backgroundOff" onMouseOver="this.className='backgroundOn'" onMouseOut="this.className='backgroundOff'"> <a class="linkOff" href="circulo.html" onMouseOver="this.className='linkOn'" onMouseOut="this.className='linkOff'"> Area del Circulo </a> </td> </tr> <tr> <td class="backgroundOff" onMouseOver="this.className='backgroundOn'" onMouseOut="this.className='backgroundOff'"> <a class="linkOff" href="triangulo.html" onMouseOver="this.className='linkOn'" onMouseOut="this.className='linkOff'"> Area del Triangulo </a> </td> </tr> <tr> <td class="backgroundOff" onMouseOver="this.className='backgroundOn'" onMouseOut="this.className='backgroundOff'"> <a class="linkOff" href="rectangulo.html" onMouseOver="this.className='linkOn'" onMouseOut="this.className='linkOff'"> Area del Rectangulo </a> </td> </tr> </table> </body> </html>

Script2: circulo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Area del Circulo</title> </head> <body bgcolor="pink" text="maroon" link="blue" vlink="purple" alink="red"> <script language="JavaScript" type="text/javascript"> <!-var pi=3.1416; var radio = prompt('Introduzca el Radio del Circulo?',''); var area; area=pi*radio*radio; document.write("<h1 align='center'>El area del Circulo es: " + area + "</h1><hr>"); document.write("<a href='areas.html'>Regresar al men&uacute;</a>");

Lenguajes Interpretados en el Cliente

14

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

//--> </script> </body> </html>

Script3: rectangulo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Area del Rectangulo</title> </head> <body bgcolor="teal" text="chartreuse" link="blue" vlink="purple" alink="red"> <script language="JavaScript" type="text/javascript"> <!-var base= prompt('Introduzca la base del rectangulo',''); var altura = prompt('Introduzca la altura del Rectangulo',''); var area; area=base*altura document.write("<h1 align='center'>El area del Rectangulo es: " + area + "</h1><hr>"); document.write("<a href='areas.html'>Regresar al men&uacute;</a>"); //--> </script> </body> </html>

Script4: triangulo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Area del Triangulo</title> </head> <body bgcolor="navy" text="DeepSkyBlue" link="blue" vlink="purple" alink="red"> <script language="JavaScript" type="text/javascript"> <!-var base= prompt('Introduzca la base del triangulo',''); var altura = prompt('Introduzca la altura del triangulo',''); var area; area=base*altura/2; document.write("<h1 align='center'>El area del Triangulo es: " + area + "</h1><hr>"); document.write("<a href='areas.html'>Regresar al men&uacute;</a>"); //--> </script> </body> </html>

Ejercicio 4: Clculo del presupuesto de una institucin (nombre del archivo: presupuesto.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Presupuesto</title>

Lenguajes Interpretados en el Cliente

15

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

<style type="text/css"> body { background-color:RoyalBlue; margin:30px 10px; } caption { text-decoration:underline; font-family:"Arial Rounded MT Bold"; font-weight:900; font-size:12pt; color:lavender; } table { border:solid 2px navy; width:45%; margin:auto; } th { text-align:center; font-family:Century; font-weight:800; font-size:11pt; color:salmon; background-color:Aquamarine; border:solid 2px navy; } td { text-align:center; font-family:Century; font-weight:300; font-size:11pt; color:bisque; background-color:LightSeaGreen; border:solid 2px navy; } .moneyOn { border:outset 6px DarkViolet; background-color:Thistle; text-align:center; font-family:"Franklin Gothic Medium"; font-weight:700; font-size:15pt; color:BlueViolet; } .moneyOff { border:inset 5px maroon; background-color:MistyRose; text-align:center; font-family:"Franklin Gothic Medium"; font-weight:700; font-size:15pt; color:Sienna; } hr { width:90%; height:7px; background-color:lavender; } </style> </head> <body> <table> <caption>Areas</caption>

Lenguajes Interpretados en el Cliente

16

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

<tr> <th>&Aacute;REA</th> <th>PORCENTAJE DEL PRESUPUESTO</th> </tr> <tr> <td>Dermatolog&iacute;a</td> <td> 40%</td> </tr> <tr> <td>Traumatolog&iacute;a</td> <td>35%</td> </tr> <tr> <td>Pediatr&iacute;a</td> <td>25%</td> </tr> </table> <script language="JavaScript" type="text/javascript"> <!-var presupuesto= prompt('Ingrese el presupuesto anual',''); var derma,trau,pedi; derma=presupuesto*0.40; trau=presupuesto*0.35; pedi=presupuesto*0.25; document.write("<h1 class='moneyOff' onMouseOver='this.className=\"moneyOn\"' onMouseOut='this.className=\"moneyOff\"'>El presupuesto asignado para Ginecolog&iacute;a es: $" + derma + ".00</h1><hr>"); document.write("<h1 class='moneyOff' onMouseOver='this.className=\"moneyOn\"' onMouseOut='this.className=\"moneyOff\"'>El presupuesto asignado para Traumatolog&iacute;a es: $" + trau + ".00</h1><hr>"); document.write("<h1 class='moneyOff' onMouseOver='this.className=\"moneyOn\"' onMouseOut='this.className=\"moneyOff\"'>El presupuesto asignado para Pediatr&iacute;a es: $" + pedi+ ".00</h1><hr>"); //--> </script> </body> </html>

Ejercicio 5: Manejo bsico de eventos (nombre del archivo: eventosboton.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Eventos bsicos con JavaScript</title> <script language="JavaScript" type="text/javascript"> <!-document.write("<h1 style='text-align:center'>Aplicaciones Prcticas de Software I</h1>"); //--> </script> </head> <body onLoad="document.bgColor='blue';document.fgColor='yellow';"> <button onClick="document.bgColor='Orange';document.fgColor='Purple';"> Pulseme para cambiar colores </button> </body> </html>

Lenguajes Interpretados en el Cliente

17

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

Ejercicio 6: Uso de tablas con document.writeln (nombre del archivo: tabla.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title> Ejemplo de document.write y tablas </title> <style type"text/css"> table{ width: 450px; border:1px solid #000000; border-spacing: 0px; text-align:center; } table a, table, tr, th, td { font-family: Arial, Helvetica, sans-serif; } table tr {background: #ffffff; } table tr.par { background: #800000; } </style> <script LANGUAGE="JavaScript" type="text/javascript"> var i=1; var titulooriginal = document.title; function cambiarTitulo() { document.title = titulooriginal.substring(0,i); i++; if (i>titulooriginal.length) i=0; setTimeout('cambiarTitulo()',100); } cambiarTitulo(); </script> </head> <body> <script language="JavaScript" type="text/javascript"> var x,y,z; x=2; y=x+2; z=x+y; document.writeln('<table>'); document.writeln('<tr>'); document.writeln('<th>Nombre</th>'); document.writeln('<th>Valor</th>'); document.writeln('</tr>'); document.writeln('<tr class="par">'); document.writeln('<td>Valor de x</td>'); document.writeln('<td>'+x+'</td>'); document.writeln('</tr>');

Lenguajes Interpretados en el Cliente

18

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

document.writeln('<tr>'); document.writeln('<td>Valor de y</td>'); document.writeln('<td>'+y+'</td>'); document.writeln('</tr>'); document.writeln('<tr class="par">'); document.writeln('<td>Valor de z</td>'); document.writeln('<td>'+z+'</td>'); document.writeln('</tr>'); document.writeln('</table>'); </script> </body> </html>

V. DISCUSION DE RESULTADOS 1. Cree una pgina que capture tres notas y luego imprima en la pgina web las tres notas y el promedio de estas. Asuma que la primera nota tiene una ponderacin del 30% y las otras dos una ponderacin del 35% cada una. Cree un script que imprima una pgina web completa utilizando el mtodo document.write() o document.writeln(). Lo que debe imprimirse en la pgina es su nombre que debe ser capturado al momento de cargar la pgina utilizando un mtodo prompt(). Luego con los mtodos anteriores imprima el nombre capturado centrndolo, con letra negrita, haciendo uso de un elemento H1, con borde y color de fondo personalizado.

2.

3. En un hospital existen tres reas: Ginecologa, Pediatra, Traumatologa. El presupuesto anual del hospital se reparte conforme a la siguiente tabla: REA PORCENTAJE DEL PRESUPUESTO 40% 30% 30%

Ginecologa Traumatologa Pediatra Ejemplo:

Lenguajes Interpretados en el Cliente

19

Gua # 1: Fundamentos de pginas web dinmicas en el cliente con JavaScript

VI. INVESTIGACION COMPLEMENTARIA 1. Realice los siguientes ejercicios: a. Un padre tiene una cuenta de ahorros, y desea dejar como herencia un porcentaje (%) diferente del monto almacenado a cada uno de sus 3 hijos. La aplicacin web permitir al padre ingresar el monto total ($) de la cuenta bancaria y el % que le corresponder a cada hijo y debe mostrar el monto ($) que le corresponde a cada hijo. b. Crear una aplicacin Web por medio de la cual un empleado bancario pueda conocer el monto final de un prstamo que se obtiene de las siguientes entradas de datos: un monto inicial de un prstamo (P), una tasa de inters (i) y un tiempo especfico (N: trascurridos en meses).

S = P.(1 +
Tenga en cuenta la formula siguiente

i ) 12 al realizar su anlisis y clculos.

c. Elaborar una aplicacin Web que permita calcular el salario neto de un trabajador en funcin del nmero de horas trabajadas, pago por hora de trabajo y un descuento fijo al sueldo bruto del 20 %. Los clculos a efectuar para obtener el salario neto de un trabajador se muestran a continuacin: SalarioBruto = HorasTrabajadas * PagoPorHora Descuento = 0.2 * SalarioBruto SalarioNeto = SalarioBruto - Descuento d. Solicite una medida de volumen en centmetros cbicos. Convierta y muestre el equivalente de esta medida ingresada en milmetros cbicos y pulgadas cbicas: Ejemplo: Si ingresa 3.9 centmetros cbicos, deber obtener como respuesta: VOLUMEN de 3.9 cm cbicos equivale a 3900 mm cbicos y tambin a 0.238 pulg. Cbicas 2. Investigue cmo utilizar sentencias condicionales en JavaScript (el if, if-else) y modifique el script 1 de la discusin de resultados para que adems del promedio de la nota le indique si el estudiante aprob o reprob la materia.

VII. BIBLIOGRAFIA Powell, Thomas / Schneider, Fritz. JavaScript Manual de Referencia. 1ra Edicin. Editorial McGraw-Hill. 2002. Madrid, Espaa. Flanagan, David. JavaScript La Gua Definitiva. 1ra Edicin. Editorial ANAYA Multimedia. 2007. Madrid, Espaa. McFedries, Paul. JavaScript Edicin Especial. 1ra Edicin. Editorial Prentice Hall. 2002. Madrid, Espaa. Tom Negrino / Dori Smith. JavaScript & AJAX Para Diseo Web. 6 Edicin. Editorial Pearson Prentice Hall. 2007. Madrid Espaa. Lpez Quijado, Jos. Domine JavaScript. 2da Edicin. Editorial Alfaomega RAMA. Mayo 2007. Mxico D.F.

Lenguajes Interpretados en el Cliente

20