Universidad de San Carlos de Guatemala Facultad de Ingeniera Escuela de Ciencias y Sistemas Organizacin de Lenguajes y Compiladores 2 Segundo Semestre 2010

Navegador Web 1.0

Introduccin En la actualidad el internet ha tomado un gran auge en la vida de las personas,

cada vez ms personas son dependientes de este servicio tan innovador, dado que a

travs de l pueden encontrar entretenimiento, informacin de inters, productos,

negocio, etc.

El nico medio nativo de comunicacin entre la World Wide Web (servicio de

aplicacin de Internet) y el usuario final es a travs de un navegador web que es un

programa que permite visualizar la informacin que contiene una pgina web.

Con un navegador web, el usuario es capaz de hacer todas esas transacciones en

lnea con un solo clic y sin necesidad de saber mucho de computadoras adems la

informacin se transmite casi instantneamente.

El presente proyecto est orientado al desarrollo de una aplicacin de escritorio

que permita simular un navegador web el cual ser capaz de mostrar una o ms

pginas web a partir de archivos de entrada, que no son ms que archivos con cdigo

fuente.

A continuacin especificaremos cada uno de los lenguajes de programacin

que el navegador web debe reconocer, luego explicaremos acerca del manejo de

errores y por ltimo definiremos requerimientos de interfaz grfica.

Objetivos generales Aplicar conocimientos del anlisis y diseo de sistemas para poder construir un

navegador Web.

Objetivos especficos Generar gramticas capaces de reconocer lenguajes de alto nivel y que aplique

definiciones dirigidas por la sintaxis para la resolucin del problema planteado.

Disear y construir un intrprete que permita reconocer archivos de entrada

creados en HTML, CSS y Java Script.

Utilizar herramientas de diseo y construccin de gramticas.

Representar grficamente las ideas que el desarrollador web plasm en un

cdigo fuente y mostrar el comportamiento de sus sitios de manera que un

usuario inexperto pueda interactuar con ellos sin complicacin.

Descripcin general El proyecto consiste en una aplicacin de escritorio que sea capaz de explorar o

navegar sobre pginas web (Navegador Web). Como tal, la aplicacin muestra el

resultado del anlisis a partir de una serie de archivos (PNG, HTML, CSS y js).

El proyecto tiene las siguientes caractersticas:

El programa recibir como entrada archivos HTML (puede contener cdigo java script,

CSS y HTML).

Internamente poseer intrpretes que van a analizar esos archivos de entrada.

Cada etiqueta HTML, ser mapeada de alguna manera hacia controles de C# (no generar

archivo de salida, solo una visualizacin en una ventana en tiempo de ejecucin), que

sern mostrados en la ventana del navegador. Por ejemplo en el momento que

ingresamos un archivo HTML con un botn y dos cajas de texto, definidas con cdigo

HTML, se debe colocar el botn y las cajas de texto en la ventana del navegador como

controles de c#.

Percepcin del usuario al usar la aplicacin En el momento que un usuario (inexperto) utilice la aplicacin debe ocurrir esta serie de

eventos:

1. El usuario ingresa una direccin de un sitio Web (Para efectos del proyecto sera una

direccin local de su disco duro).

2. Luego el navegador mostrar, en la barra de estado, que la pgina est cargando.

3. La pgina debe aparecer en la pantalla principal de la aplicacin, o sea en el navegador.

4. El usuario va a interactuar con la pgina web, que seguramente tendr un

comportamiento y lgica definida (en este caso podra ser que el usuario de clic en

algn link y este haga cargar otro sitio Web, por lo tanto se repite el proceso).

Los archivos de entrada estarn definidos en HTML, CSS y Java script.

HTML: Permite definir la estructura de las pginas.

CSS: Permite dar formato a los objetos HTML que contiene la pgina.

Java Script: Permite definir un comportamiento a los objetos HTML, entindase eventos,

operaciones aritmticas, etc.

A continuacin vamos a explicar a fondo como van a ser definidos los lenguajes dentro

del alcance del proyecto adems, a medida que vayamos explicando cada lenguaje, vamos a ir

construyendo un ejemplo para mostrar que roles tiene cada lenguaje en la construccin de la

pgina web.

Definicin de los lenguajes de programacin

Lenguaje HTML Vamos a dividir en dos partes la definicin del lenguaje HTML. La primera parte solo definir

algunas etiquetas bsicas y la segunda definir objetos grficos de HTML.

Recuerde que este leguaje define la estructura de la pgina que debe ser mostrada en la

ventana principal del navegador web. En el ejemplo, que se explicar al final de la definicin

de este lenguaje, se asumir que an no tiene estilo ni comportamiento solo HTML puro.

La idea que se persigue es mostrar el rol que tiene el lenguaje HTML dentro de la construccin

de una pgina y facilitar la comprensin de este enunciado.

Etiqueta Propiedades y ejemplos

a Permite insertar vnculos

Href: Permite crear un link a una pgina web o a alguna accin JavaScript Ejemplo: este es un link este es un link Resultado: Este es un link

b Permite escribir texto en negrita Ejemplo: texto en negrita Resultado: Texto en negrita

br Fuerza al quiebre de una lnea

i Muestra el texto en itlica Ejemplo: texto en negrita Resultado: Texto en Itlica

table Permite crear una tabla para organizar los objetos de la pgina web. Propiedades: Border: Permite definirle un grosor de borde a las celdas de la tabla. Id: Un identificador que en algn momento puede ser usado para distinguir el objeto de los dems. Name: Un nombre que en algn momento podra ser usado para agrupar un conjunto de objetos con el mismo nombre Width: Permite definir que tanto ocupar en la ventana la tabla, se definir en porcentaje. Ejemplo:

tr Especifica una fila en una table. Es requerido que este dentro de un etiqueta Table Propiedades: Id: Un identificador que en algn momento puede ser usado para distinguir el objeto de los dems. Name: Un nombre que en algn momento podra ser usado para agrupar un conjunto de objetos con el mismo nombre Ejemplos:

td Especifica un dato en una tabla. Es requerido que este dentro de un etiqueta tr Propiedades: Id: Un identificador que en algn momento puede ser usado para distinguir el objeto de los dems.

Name: Un nombre que en algn momento podra ser usado para agrupar un conjunto de objetos con el mismo nombre.

align Define la alineacin del contenido de una celda. Puede ser uno de los siguientes valores (insensibles a maysculas/minsculas):

left: El contenido es alineado a la izquierda. Este es el valor predeterminado para celdas comunes.

center: El contenido es centrado. Este es el valor predeterminado para celdas de encabezado.

right: El contenido es alineado a la izquierda.

valign Especifica la alineacin vertical del contenido de una celda. Funciona exactamente como el atributo "align" pero para el espacio vertical. Los valores posibles son:

top: El contenido es alineado arriba. middle: La informacin es centrada verticalmente. Este es el valor

predeterminado. bottom: El contenido es alineado abajo.

Colspan Especifica el nmero de de filas que una celda ocupar. Su valor debe ser numrico. Ejemplo:

center Permitir centrar cualquier objeto que se encuentre encerrado entre este etiqueta. Ejemplo:

Title Permitir poner un ttulo a la pgina web que se est trabajando

head Define un encabezado de una pgina web

body Define el cuerpo de la pgina web

div Es un container donde se pueden agrupar varios objetos. En este caso lo utilizaremos para darle un estilo CSS comn a una serie de objetos contenido

A continuacin se detallar como hacer algunos objetos de interfaz grfica con el

lenguaje HTML.

Control cdigo Eventos

Botn Existen dos tipos de botones: Submit: Este botn hace un request al servidor de aplicacin. Deber llevar la siguiente estructura: Button: Este botn no hace request al servidor sino que enva un evento.

onClick()

Checkbox Valor Si en caso esta chequeado agreagar la palabra selected Valor

Onchange()

radioButton Para que los radioButton puedan ser agrupados, es necesario asignarles el mismo nombre. En caso que este seleccionado alguno, aplica lo mismo que los CheckBox. Valor

Onchange()

comboBox Opcion1 Opcion2 Opcion3

Onchange()

TextBox

TextArea Este es un texto que pertenece al TextArea

Comentarios

Cada uno de los atributos de las etiquetas que se han detallado, son opcionales por lo

tanto no necesariamente todos los atributos deben estar presentes o venir en orden

(si en caso algn atributo falta, se le debe dar un valor por defecto pero todos los

atributos deben estar presentes lgicamente, entindase en su estructura interna que

definan), adems todas las etiquetas pueden ser anidadas, es decir dentro de las

etiquetas puede ir cualquier cantidad de etiquetas de cualquier tipo.

A continuacin se mostrar un ejemplo con un archivo de entrada donde solo hay

cdigo HTML:

Ejemplo de compiladores 2 BIENVENIDOS unodostrescuatro uno y dos tres y cuatro Nombre

sexo Masculino femenino cometarios: Escriba aca su comentario

La salida debe ser la siguiente:

Figura 2.0

Note que con este lenguaje solo definimos que debe llevar la pgina.

A continuacin continuaremos definiendo el lenguaje CSS.

Lenguaje CSS

Para poder posicionar, redimensionar, colorear, dar borde y estilos de letra a nuestras

pginas web, utilizaremos hojas de estilo en cascada (CSS). Es un lenguaje usado para

definir la presentacin de un documento estructurado escrito en HTM.

La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un

documento de su presentacin.

El navegador solo modifica las propiedades grficas de cada objeto mapeado a

controles de C#.

A continuacin definiremos que partes del cdigo CSS sern soportados por el

navegador.

Atributo Descripcin

Background-image

Permitir agregar una imagen. Ejemplo de uso: background-image:url('paper.gif');

background-color

Permitir agregar un color de fondo. Ejemplo de uso: background-color:yellow; background-color:#00ff00; background-color:rgb(255,0,255);

height Permite definir una altura a cierto objeto. Puede ser definido en pixeles. Ejemplo de uso height:100px;

width Permite definir una anchura a cierto objeto. Puede ser definido en pixeles. Ejemplo de uso width:100px;

border Permite hacer un borde a algn objeto. Ejemplo de uso: border:5px solid red;

font Permite definir un estilo de letra para un texto determinado. Ejemplos de uso: font:italic bold 12px Georgia,serif; font:15px arial,sans-serif;

position Permite determinar que tipo de posicin tiene el objeto. Puede ser de dos formas:

1. Relative, o sea si este objeto esta dentro de otro, la posicin que se le determine al objeto ser con respecto a su container.

2. Absolute, el objeto se posicionara sin contemplar su container.

Ejemplo de uso:

position:absolute; position:relative;

top Permite posicionar un objeto en un determinado lugar. Top solamente toma en cuenta el eje vertical y toma como referencia la parte superior del mismo. Ejemplo de uso: top:5px;

left Permite posicionar un objeto en un determinado lugar. left solamente toma en cuenta el eje horizontal y toma como referencia la parte izquierdo del mismo. Ejemplo de uso: left:5px;

color Setea un color a un texto determinado. Ejemplos de uso: color:red; color:#00ff00; color:rgb(0,0,255);

text-align Permite determinar cmo se puede alinear un texto. text-align:center text-align:left text-align:right

vertical-align Permite alinear un texto verticalmente. vertical-align:text-top vertical-align:text-middle vertical-align:text-bottom

Comentario

/*este es un comentario De varias lneas*/

Para poder crear un estilo para uno o ms objetos se llevar la siguiente sintaxis:

#objeto {

background-color:#00ff00;

width:100px;

height:100px;

}

Hay dos formas de implementarlo:

Hoja de estilo interna:

Dentro de una pgina web, se pueden ingresar etiquetas de tipo los cuales deben ir en el encabezado de la pagina.

#objeto {

background-color:#00ff00;

width:100px;

height:100px;

}

Hoja de estilo externa

Se pueden definir archivos aparte con extensin CSS y luego importarlo a la pgina

web por medio de las etiquetas

Ejemplo:

Tomando como base el ejemplo anterior, vamos a agregar cdigo CSS para mostrar el

efecto que tiene sobre las pginas web, por lo tanto ahora nuestro cdigo contiene

HTML y CSS. Vamos a resaltar con un color las partes que se le agregaron al HTML.

Para el archivo estilo.css

#inicio{ text-align:center; color:red; font:50px arial,sans-serif } #tabla{ text-align:left; color:blue; left:500px; top:500px; font:20px arial,sans-serif } #inferior{ text-align:center; color:red; font:bold 15px arial,sans-serif }

Para el archivo de nuestro ejemplo HTML le hicimos algunos ajustes:

Ejemplo de compiladores 2 #todo{ background-color:yellow; } BIENVENIDOS unodostrescuatro uno y dos tres y cuatro Nombre sexo Masculino femenino cometarios: Escriba aca su comentario

La imagen resultante ser como sigue:

Figura 3.0

Ntese que para cada bloque de cdigo CSS hay una etiqueta que le corresponde

y coincide en nombre. Esta ser la forma como se debe hacer que se relacione CSS con

HTML.

Adems en el ejemplo se muestra un archivo por separado y tambin cdigo CSS

dentro del mismo HTML.

Como puede observar en la figura 3.0, ahora la pgina tiene un formato definido. Los

objetos fueron posicionados y se le ha dado un estilo de letra a los textos adems se

definieron algunos colores.

A continuacin vamos a definir el lenguaje Java Script:

Lenguaje Java Script

Es un lenguaje que funciona del lado del cliente que permite programar cierta lgica a

nuestras pginas web. Este cdigo es estimulado por medio de algn evento con los controles

HTML.

El cdigo HTML debe ir como sigue:

O bien podran usarse archivos por aparte con cdigo java script. Estos archivos debern tener

extensin js. Luego se usarn la siguiente etiqueta para poder incluirlas al documento.

Deben manejar una tabla de smbolos para cada variable y objeto HTML definido. La razn de

incluir objetos HTML (todo tipo de etiqueta y sus respectivos atributos) es que es necesario

aplicar acciones sobre esos objetos.

Forma de implementacin

1. Cuando se haya analizado todo el archivo de entrada (archivo .html) y sus referencias

(archivos .js), van a ir copiando el cdigo fuente de java Script en archivos temporales,

se aconseja que hagan un archivo por funcin para facilitar el anlisis (no deben

traducir nada), tambin se debe construir de una vez la tabla de smbolos.

2. Van a crear una gramtica exclusivamente para Java Script. Esta adems de reconocer

Java Script debe tener acciones semnticas correspondientes a cada instruccin

(operaciones aritmticas, sentencias de control, declaracin de variables) de manera

que se puedan ejecutar.

3. Cuando su navegador quiere realizar alguna funcin Java Script (podra ser en

cualquier momento y en repetidas ocasiones), este buscar el archivo donde

almacenaron las funciones y luego buscar la que se ha mandado a llamar. Esta

funcin est guardada como cdigo fuente, por lo tanto se debe invocar el analizador

de Java Script el cual se encargar de ejecutar lo que est definido en esa funcin y por

supuesto va a usar la tabla de smbolos, que ya esta creada, para acceder a las

variables.

Descripcin general del lenguaje:

Sentencia Descripcin

Declaracin de variables var variable1, variable2, variable3 variableN; var variable1=valor; Las variables manejarn un mbito desde donde son alcanzables. La declaracin de variables locales y globales es exactamente igual.

Declaracin de arrays Var variable=new Array(tamao) Definicin de funciones Function nombre(parmetros){

} Donde los parmetros son opcionales y no deben llevar tipo, solamente los nombres de las variables.

Sentencia If if(condicin){ } Si en caso solo viene una operacin dentro del if se puede escribir de esta manera: if(condicin) operacin

Sentencia If-else if(condicion1){ } else if (condicion2){ } else if(condicion3){ } . else{ }

Sentencia switch switch(id){ case valor1: . break; case valor2: . break; case valor3: break; . . . default: }

Return Permite salir de una funcin y devolver algn valor

Todas las sentencias mencionadas pueden ser anidadas entre s (es posible declarar

variables dentro de cualquier sentencia y su mbito es restringido a dicha sentencia) y

deben ser ejecutadas por la aplicacin en tiempo real.

Operadores

Tipos de operadores Smbolo

Asignacin = += -= *= /= %= Ternario Var1=condicin?valor1:valor2 Or || And && Relacionales < =< => > Comparacin == != Adicin + - Multiplicacin * / % Unarios ! + - Postfijos variable++ variable-- Prefijos --variable ++variable Ejemplos de una expresin N=(y-x*(19%t))>10 && x==34

N=x>3||x3||x

Operaciones especiales

Operacin Caracterstica

toString() Convierte un numero en cadena subString(inicio, fin) Parte una cadena de caracteres alert(variable) Muestra un mensaje con un cuadro de texto getElementsByName Permite obtener un elemento HTML a partir de su nombre.

Recuerde que todos esos objetos como tales poseen una serie de atributos, tales como value, id, name, width, etc, los cuales podran cambiar por ejemplo: Var x=document.getElemntByName(caja); x.value=nuevo texto; En ese momento la caja de texto obtendr nuevo valor lo cual permite manipular fcilmente a un control HTML.

getElementById Permite obtener un elemento HTML a partir de su Id Aplican lo mismo que la funcin anterior

open Abre una ventana nueva HTML window.open(URL,nombre_de_la_ventana,forma_de_la_ventana) URL: Representa el URL que deseamos abrir en la ventana secundaria. nombre_de_la_ventana: Es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo target del HTML forma_de_la_ventana: Se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede definir su altura, anchura, si tiene barras de desplazamiento, etc. Ejemplo: window.open("c:\users\mensaje.html" , "ventana1" , "width=120,height=300,scrollbars=NO")

close Cierra la ventana actual HTML Close()

redirect Redireccin a una pagina nueva HTML parseInt Permite convertir cadenas en enteros Parse Float Permite convertir cadenas en Flotantes Comentarios /*este es un comentario de varias

lneas*/ //este es un comentario de una sola lnea

Para las funciones especiales hay que validar que los parmetros que se le ingresen

son correctos de otra manera se deber marcar un error. Los cuales sern explicados

ms adelante.

Para acceder a los objetos definidos en HTML ya se mostraron dos funciones

especiales. Haremos un poco de nfasis en cuanto al acceso y modificacin de los

atributos de objetos HTML:

Acceso de atributos HTML

Var = document.getElementById().;

Para este caso se est dando el valor del atributo de cierto objeto HTML, diferenciando

su Id, a alguna variable definida.

Var = document.getElementsByName().;

Para este caso se est dando el valor del atributo de cierto objeto HTML, tomando su

Nombre como base, a alguna variable definida (Tomar en cuenta que si varios objetos

HTML se llaman igual, es posible agruparlos en un array y accederlos por medio de

posiciones).

Modificacin de atributos HTML

document.getElementById().=valor;

Ejemplo:

Vamos a tomar de referencia el ejemplo que hemos venido armando a medida que se

va explicando el enunciado. Ahora vamos a agregar una funcionalidad a la pgina web.

Ac es donde entra en accin el lenguaje Java Script. Vamos a hacer que se tome el

texto del textArea y se muestre en un cuadro de dilogo al darle clic al botn:

Ejemplo de compiladores 2 #todo{ background-color:yellow; } function MostrarTexto(){ var texto=document.getElementById("txtArea").value alert(texto); } BIENVENIDOS

unodostrescuatro uno y dos tres y cuatro Nombre sexo Masculino femenino cometarios: Escriba aca su comentario

Notar que lo que esta resaltado en verde es el evento que se especific en el apartado

de HTML. Y lo que se encuentra en amarillo es una funcin java script que contiene

cierta lgica para poder mostrar esa alerta.

Nota: No confundir el lenguaje Java Script con el lenguaje Java, aunque su sintaxis sea

parecida son dos lenguajes totalmente diferentes. Java Script es para definir acciones

en pginas web y Java es un lenguaje de programacin orientado a objetos.

Figura 5.0

Este debera ser el resultado. Como se muestra en la figura 5.0, ya la pgina

tiene un comportamiento definido, esto permite que el usuario pueda interactuar con

la pgina web.

Manejo de errores En general debe mostrarse un reporte de que error se encontr, en que archivo, la lnea y la

posicin.

Ejemplo:

Tipo de error Localizacin Descripcin

Lxico Salida.html, lnea 2, posicin 34 No se pudo reconocer el smbolo $

Sintctico Lgica.js, lnea 34, posicin 10 Falta un operador para la expresin

Semntico Lgica.js, lnea 20, posicin 13 No se declaro la variable x

Adems del reporte que se debe detallar se deben tomar las siguientes consideraciones a la

hora de algn error en los siguientes lenguajes:

HTML Recuperarse del error y terminar de construir la pgina web. En el peor de los casos no aplicar

la o las etiquetas con el error.

CSS No aplicar cambios en los controles HTML.

Java Script No aplicar operaciones debido a que la lgica est defectuosa.

A continuacin definiremos los requerimientos de interfaz grfica:

Interfaz grfica Debe contener lo que se detalla a continuacin:

1. Una la barra de direcciones donde se pueden ingresar las direcciones de las

pginas web.

2. Pestaas de pginas abiertas. Tomar en cuenta que es posible que algunas no

se han terminado de cargar por lo tanto deben usarse hilos para que carguen

simultneamente.

3. Botones donde se ir controlando la navegacin de cada pgina, se deben crear

los siguientes:

Atrs, significa que se volver a la pgina que se encontraba

anteriormente, recordar que si bien se le haya hecho cambios al cdigo

fuente, esta no debe haberlos percibidos debido a que se est viendo

una pgina que ya fue cargada.

Adelante, Significa que se regresar a una pgina de la cual uno

presion el botn atrs anteriormente.

Actualizar, Debe volver a cargar la pgina desde el cdigo fuente.

Home, El programa tendr una pgina default que ser cargada a la

hora de seleccionar esta opcin

Detener, Abortar la carga a la pgina sin embargo eso no significa que

la pgina ya no deba mostrarse. Lo que ocurre internamente es que ya

no se sigue ejecutando el cdigo fuente, por lo tanto solo se mostrar lo

que ya se ha cargado.

4. Una barra de direcciones donde se vea el estado de la pgina (cargando,

cancelada, con errores, etc.).

5. Se debe guardar un historial de las pginas visitadas, de esta manera podr

tenerse un histrico de los mismos.

6. Una carpeta de archivos temporales.

Figura 6.0

En la figura 6.0 se muestra una propuesta de interfaz grfica, desarrollada por Mozilla.

El diseo de la interfaz queda a criterio del estudiante y ser tomado en cuenta la

creatividad y el ingenio que presente.

Barra de direcciones

Pestaas de pginas abiertas

Botones para navegar entre las

pginas (atrs, adelante,

actualizar, detener y home)

rea donde se muestra la pgina

Barra de estado que muestre el

status de la carga de las pginas

Lenguajes y herramientas a utilizar El lenguaje de programacin ser C# 2008 de .Net

La herramienta de generacin de compiladores ser goldParser

Datos importantes

La calificacin del proyecto es personal y deber realizarse el da acordado para su respectiva entrega y calificacin. La aplicacin de conocimientos correspondientes a cursos de semestres anteriores o el actual, es indispensable para realizar una parte o la totalidad de la prctica o los proyectos. Si existe alguna duda al respecto, se pueden dirigir a los auxiliares a quienes les pueden preguntar acerca de sus dudas. Copias en cualquiera de las actividades tericas o prcticas tendrn una nota de cero puntos y sern reportados al catedrtico titular de su seccin y a la Escuela de Ciencias y Sistemas para su respectiva sancin.

Se deben de utilizar los lenguajes y herramientas indicados, de caso contrario se tendr cero de nota. Copias de gramticas y cdigo, totales o parciales tienen cero y sern reportados al catedrtico de su seccin y a la Escuela de Ciencias y Sistemas. Cdigo bajado de internet tiene cero. Gramtica bajada de internet tiene cero.

Entregables 1. Gramticas de cada uno de los lenguajes explicados en este enunciado.

2. Navegador Web funcional.

3. Diagrama de clases, secuencias, componentes y casos de uso.

4. Manual de usuario.

Fecha de entrega:

10 de septiembre del 2010 No hay prrroga. Se entrega todo en un solo disco compacto y es presencial la entrega. El lugar y hora ser acordado con su auxiliar.

Fases a entregar Las fases sern enviadas por medio de correo electrnico. No se recibirn fases fuera de esas

fechas.

Fecha de entrega Descripcin

5 de agosto Entrega de las gramticas de los lenguajes y los diagramas de clases, secuencias, componentes y casos de uso.

12 de agosto Acciones semnticas de los lenguajes 22 de agosto Interfaz grfica completa, incluye el

reconocimiento de cdigo HTML y CSS 29 de agosto Generacin de tablas de smbolos para HTML

y Java Script 10 de septiembre Entrega del proyecto completo (presencial)

Para tener derecho a entrega y calificacin de proyecto, los alumnos debern cumplir con la entrega de las fases del proyecto indicadas en este documento. Quien no las entregue no tiene derecho de calificacin del proyecto.

Ejemplo complementario:

Calculadora var op1; var op2; var status=1; var operador; function IngresarNum(numero){ var cajaTexto=document.getElementById("txtTexto").value; document.getElementById("txtTexto").value=cajaTexto+numero.toString(); }; function almacenar(op){ op1=parseInt(document.getElementById("txtTexto").value,10); document.getElementById("txtTexto").value=''; operador=op; }; function operar(){ op2=parseInt(document.getElementById("txtTexto").value,10); document.getElementById("txtTexto").value=''; var resultado=0; if(operador==1){ resultado=op1+op2; } else if(operador==2){ resultado=op1-op2; } op1=op2=0; document.getElementById("txtTexto").value=resultado.toString(); }; #todo{ background-color:Blue; position:relative; left:300px; top:200px; width:400px; }

Salida respectiva en nuestra aplicacin: