Documentos de Académico
Documentos de Profesional
Documentos de Cultura
(Compi2) Proyecto1 1sem 2018v9.0
(Compi2) Proyecto1 1sem 2018v9.0
Facultad de Ingeniería
Escuela de Ingeniería en Ciencias y Sistemas
Organización de lenguajes y compiladores 2
Primer Semestre 2018
Catedráticos: Ing. Bayron López, Ing. Edgar Sabán
Tutores académicos: Juan Ruiz, José Cano, Henry Taracena y Daniel Alvarez.
USAC-WEB
Primer proyecto de laboratorio
Tabla de contenido
1 Descripción ......................................................................................................... 4
2 Objetivos ............................................................................................................. 5
2.1 Objetivo General ........................................................................................... 5
2.2 Objetivos Específicos .................................................................................... 5
3 USAC-WEB ......................................................................................................... 5
3.1 Componentes ................................................................................................ 5
3.2 Opciones ....................................................................................................... 7
4 Ejemplo de página web ....................................................................................... 9
4.1 Pasos de interpretación del ejemplo ........................................................... 10
4.1.1 Paso 1 .................................................................................................. 10
4.1.2 Paso 2 .................................................................................................. 11
4.1.3 Paso 3 .................................................................................................. 12
4.1.4 Paso 4 .................................................................................................. 13
4.1.5 Paso 5 .................................................................................................. 16
4.1.6 Paso 6 .................................................................................................. 17
5 Lenguajes ......................................................................................................... 18
5.1 CHTML ........................................................................................................ 18
5.2 CJS ............................................................................................................. 28
5.2.1 Comentarios ......................................................................................... 28
5.2.2 Variables............................................................................................... 28
5.2.3 Asignación de valores........................................................................... 29
5.2.4 Tipos de datos ...................................................................................... 29
5.2.5 Operadores........................................................................................... 30
5.2.6 Condiciones .......................................................................................... 31
5.2.7 Expresiones relacionales ...................................................................... 31
5.2.8 Expresiones lógicas .............................................................................. 31
5.2.9 Precedencia de operadores y Asociatividad ......................................... 32
5.2.10 Vectores ............................................................................................ 32
5.2.11 Acceso a los elementos del vector .................................................... 33
5.2.12 Tamaño del Vector ............................................................................ 33
5.2.13 Convertir a cadena ............................................................................ 34
5.2.14 Si ....................................................................................................... 34
5.2.15 Selecciona ......................................................................................... 35
5.2.16 Ciclo Para .......................................................................................... 36
5.2.17 Ciclo Mientras.................................................................................... 36
5.2.18 Detener ............................................................................................. 37
5.2.19 Imprimir ............................................................................................. 37
5.2.20 Funciones .......................................................................................... 37
5.2.21 Retornar ............................................................................................ 38
5.2.22 Mensaje ............................................................................................. 39
5.2.23 Eventos ............................................................................................. 39
5.2.24 Documento ........................................................................................ 40
5.2.25 Obtener ............................................................................................. 40
5.2.26 SetElemento ...................................................................................... 41
5.2.27 Observador ....................................................................................... 41
5.3 CCSS .......................................................................................................... 42
5.3.1 Comentarios de línea ........................................................................... 42
5.3.2 Comentarios múltiples línea ................................................................. 42
5.3.3 Case Insensitive ................................................................................... 43
5.3.4 Tipo de Datos ....................................................................................... 43
5.3.5 Operaciones Aritméticas....................................................................... 43
5.3.6 Cadenas ............................................................................................... 44
5.3.7 Elementos............................................................................................. 44
5.3.8 Editado de elementos ........................................................................... 48
6 Requisitos Mínimos ........................................................................................... 51
7 Entregables y Restricciones .............................................................................. 53
7.1 Entregables ................................................................................................. 53
7.2 Restricciones............................................................................................... 53
Índice de imágenes
Imagen 1: Sugerencia de historial de páginas cargadas en el navegador. ................ 6
Imagen 2: Sugerencia de navegador web. ................................................................. 6
Imagen 3: Sugerencia de opción ver código CHTML. ................................................ 7
Imagen 4: Sugerencia de opción ver código CJS. ..................................................... 7
Imagen 5: Sugerencia de opción ver código CCSS. .................................................. 8
Imagen 6: Sugerencia de opción consola salida. ....................................................... 8
Imagen 7: Sugerencia de opción consola de errores. ................................................ 9
Imagen 8: Ejemplo de página web. .......................................................................... 10
Imagen 9: Sugerencia de panel_1. .......................................................................... 12
Imagen 10: Sugerencia de panel_2.......................................................................... 13
Imagen 11: Sugerencia de panel_4.......................................................................... 15
Imagen 12: Sugerencia de panel_5.......................................................................... 17
Imagen 13: ejemplo index con CJS .......................................................................... 18
Índice de Tablas
Tabla 1: Elementos de etiqueta cuerpo. ................................................................... 20
Tabla 2: Elementos de etiqueta cjs. ......................................................................... 20
Tabla 3: Elementos de etiqueta ccss........................................................................ 20
Tabla 4: elementos de etiqueta imagen. .................................................................. 22
Tabla 5: elementos de la etiqueta botón. ................................................................. 23
Tabla 6: elementos de la etiqueta enlace. ................................................................ 23
Tabla 7: elementos de la etiqueta caja de opciones. ............................................... 25
Tabla 8: elementos de la etiqueta opción. ................................................................ 26
Tabla 9: elementos generales .................................................................................. 27
Tabla 10: tipo de datos ............................................................................................. 29
Tabla 11: operadores de lenguaje CJS. ................................................................... 30
Tabla 12: Tabla de operaciones posibles según los operadores ............................. 30
Tabla 13: expresiones relacionales. ......................................................................... 31
Tabla 14: operadores lógicos del lenguaje CJS. ...................................................... 32
Tabla 15: Tabla de precedencia de operadores y asociatividad .............................. 32
Tabla 16: operadores permitidos en CCSS. ............................................................. 43
Tabla 17: precedencia de operaciones en CCSS. ................................................... 44
Tabla 18: valores de elemento alineado................................................................... 44
Tabla 19: valores del elemento formato. .................................................................. 45
Tabla 20: resumen de los elementos CHTML validos en CCSS. ............................. 50
1 Descripción
Para el primer proyecto del laboratorio deberán desarrollar un navegador web, capaz
de interpretar variaciones de los lenguajes HTML, JavaScript y CSS. De esta manera
poder desplegar páginas web.
Este navegador web tendrá el nombre de USAC-WEB que tendrá los componentes y
opciones descritas en el punto 3. Este navegador deberá ser desarrollado e
implementado en Java.
3 USAC-WEB
USAC-WEB será un navegador web que interpretará los lenguajes CHTML, CJS y
CCSS y mostrará el resultado en forma de página web. Este navegador debe ser
desarrollado como una aplicación de escritorio de Java.
3.1 Componentes
Los componentes que deberá tener USAC-WEB se encuentran listados a
continuación:
1. Ruta: es un espacio en donde se podrá ingresar la ruta física del archivo
CHTML que se interpretará.
2. Botón ir atrás: cargará la página anterior. Si no se ha cargado una página
anteriormente el botón deberá estar deshabilitado.
3. Botón ir adelante: si se usó el botón de ir atrás, con este botón se puede
mostrar la página que se cargó posteriormente. Si no se usó el botón de ir atrás
este botón debe estar deshabilitado.
4. Botón de Cargar Página: Buscará e interpretará el archivo CHTML que tenga
ingresado en la ruta del navegador.
5. Pestañas: el navegador deberá manejar varias pestañas con diferentes
páginas web. Cada pestaña mostrará el título de la página web. En caso no se
tenga configurado el titulo se quedará vacío.
6. Área de página de web: mostrará el resultado de la interpretación de los
lenguajes.
7. Barra de favoritas: barra de accesos directos en donde aparecerán las páginas
web que hayan sido marcadas como favoritas. Al final de la barra deberá
aparecer el botón que permitirá agregar la página actual como favorita.
8. Historial: botón que mostrará el historial de páginas web que han sido
consultadas en orden de fecha, al seleccionar una página del historial deberá
cargarla siempre que el archivo siga existiendo en la ruta que se consultó. En
la imagen 1 se puede apreciar un ejemplo de cómo debe visualizarse el
historial.
9. Opciones: botón que desplegará las opciones del sistema.
Imagen 1: Sugerencia de historial de páginas cargadas en el navegador.
2. Ver código CJS: opción que permitirá ver el código fuente del lenguaje CJS de
la página web. Se deberán mostrar todos los archivos CJS que haya
interpretado el navegador para esa página web. En la imagen 4 se muestra un
ejemplo de esta opción.
Imagen 4: Sugerencia de opción ver código CJS.
3. Ver código CCSS: opción que permitirá ver el código fuente del lenguaje CCSS
de la página web. Se deberán mostrar todos los archivos CCSS que haya
interpretado el navegador para esa página web. En la imagen 5 se muestra un
ejemplo de esta opción.
Imagen 5: Sugerencia de opción ver código CCSS.
4.1.1 Paso 1
Se creará el encabezado de la página web. Dentro del encabezado se llamará al
archivo CCSS, en donde se definirán los estilos, y al archivo CJS, que implementará
las funcionalidades. Esto se implementará de la siguiente forma.
<TITULO>PAGINA 1<FIN-TITULO>
<FIN-ENCABEZADO>
4.1.2 Paso 2
Se empezará a crear las etiquetas en el cuerpo de la página web. Lo primero que se
creará serán los botones, que por orden se pondrán dentro de un panel. Se
implementará un estilo que aplique para los botones, para esto se creará un elemento
grupo para los tres botones y un conjunto de reglas en CCSS que aplicará para dicho
grupo. Esto se implementará de la siguiente forma.
<CUERPO>
<//- al ingresar los elementos deberá de iniciar desde la parte inicial de la página -//>
<//- área de botones para rediccionar -//>
<PANEL id = panel_1; grupo= panel_redireccion; ancho = 716; alto = 50;>
<BOTON grupo = boton_redireccion; alto = 35; ancho = 120; ruta= "C:\proyecto1\informacion.chtml">Informacion<FIN-
BOTON>
<BOTON grupo = boton_redireccion; alto = 35; ancho = 160; ruta= "C:\proyecto1\tabla.chtml">Tabla Estudiante<FIN-
BOTON>
<BOTON grupo = boton_redireccion; alto = 35; ancho = 100; ruta= "C:\proyecto1\index.chtml"> Principal <FIN-BOTON>
<FIN-PANEL>
<SALTO-FIN>
4.1.3 Paso 3
Se creará un panel tenga el texto “Calificación Compiladores 2 Proyecto 2”. Esto se
implementará de la siguiente forma.
El código anterior creará un panel, con id “panel_2”, que pertenece al grupo “titulo”
con un ancho de 716 y altura 50. Dentro de este panel se creará un texto con id
“titulo_doc”, que pertenece al grupo “titulo”. Esta etiqueta mostrará el texto
“Calificación Compiladores 2 Proyecto 2”.
Con el estilo aplicado al panel con id "panel_2", tendrá todos los elementos alineados
al centro, este panel tendrá un borde de grosor 5, con las esquinas con una pequeña
curva y de color azul, el panel deberá de ser color verde.
También se tiene definido un estilo que será aplicado al elemento que contenga id
"titulo_doc". El tipo de letra deberá ser "times new roman" con tamaño en el texto de
18 y el texto deberá de tener formato en negrilla y letra capita en todas las palabras
que contenga el texo.
El resultado de esta interpretación debería visualizarse como en la imagen 10.
Imagen 10: Sugerencia de panel_2.
4.1.4 Paso 4
Se crearán las etiquetas necesarias para recibir la información del estudiante, estas
etiquetas estarán agrupadas en un panel. Estas etiquetas serán la fuente de datos
para la funcionalidad de la página. Se creará un botón que ejecute la funcionalidad
por medio de un método de CJS. Esto se implementará de la siguiente forma.
<//- ingreso de espacios en blanco para las separaciones entre etiquetas -//>
<TEXTO> <FIN-TEXTO>
<TEXTO alto= 16; ancho =90; grupo=formulario_1;>Nota Proyecto 2: <FIN-TEXTO>
<SPINNER ancho = 50; alto =25; id=nota_2; id=nota_2; grupo=formulario_2;> <FIN-SPINNER>
<//- se agregó dos salto de linea entre elementos -//>
<SALTO-FIN>
<SALTO-FIN>
<TEXTO alto= 16; ancho =105; grupo=formulario_1;>Nombre Estudiante:<FIN-TEXTO>
<CAJA_TEXTO alto= 20; ancho =200; id=nombre; grupo=formulario_2;>Nombre<FIN-CAJA_TEXTO>
<SALTO-FIN>
<TEXTO alto= 16; ancho =65; grupo=formulario_1;>Comentario:<FIN-TEXTO>
<TEXTO_A alto=95; ancho=200 id=comentario; grupo=formulario_2;><FIN-TEXTO_A>
<SALTO-FIN>
<CAJA id=caja_1; grupo=formulario_2;>
<OPCION valor= "promedio"; >Promedio<FIN-OPCION>
<OPCION valor= "suma"; >Suma<FIN-OPCION>
<OPCION valor= "resta"; >Resta<FIN-OPCION>
<OPCION valor= "multiplicar"; >Multiplicacion<FIN-OPCION>
<OPCION valor= 7; >Modulo P1 % 7<FIN-OPCION>
<OPCION valor= 11; >Modulo P2 % 11<FIN-OPCION>
<FIN-CAJA>
<BOTON click=operacion_datos(); alto= 30; ancho =210; id=boto_cal; grupo=formulario_2;> Calcular <FIN-BOTON>
<FIN-PANEL>
<TEXTO> <FIN-TEXTO>
//inicio - panel 4
id (panel_4);
alineadO := izquierda;
FondoElemento = "cian";
borde := [5, "blue", false];
//fin panel 4
//inicio titulo_formulario
ID (titulo_fomulario);
LetrA := "Centaur";
TamTex := 24;
forMAto := negrilla, Capital-t, cursiva;
ColorTEx := "blue";
//fin titulo_formulario
//inicio formulario 1
grupo (formulario_1);
LetrA := "Centaur";
TamTex := 14;
forMAto := Capital-t, cursiva;
ColorTEx := "blue";
//fin formulario 1
//inicio formulario 2
grupo (formulario_2);
LetrA := "Courier New";
TamTex := 12;
//fin formulario 2
El código anterior creará un panel, con id “panel_3”, que pertenece al grupo “titulo”
con un ancho de 716 y altura 320. Dentro de este panel se creará el primer panel
interno, con id “panel_4”, que dentro de él se mostrará un texto que dirá “Formulario
de notas”, un texto que dirá “Notas proyecto 1:”, un spinner con id ”nota_1” y grupo
“formulario_2”, un texto que dirá “Nombre estudiante:”, una caja de texto con id
“nombre” y grupo “formulario_2” , una caja que contendrá 6 opciones a desplegar y
un botón que ejecutará el método CJS llamado operacion_datos.
El código anterior del CCSS, aplicará al panel, con id "panel_4", fondo celeste claro,
deberá de agregar un borde de grosor 5 y de color azul, este borde sus esquinas
deberán ser cuadradas. Aplicará un estilo a todos los elementos que contendrá el
panel con id "panel_4", donde el elemento con id "titulo_fomulario", deberá tener el
tipo de letra "Centaur", letra cursiva y de tamaño 24. A los elementos que pertenezcan
al grupo con id "formulario_1", aplicará el formato al texto con tipo de letra "Centaur",
tamaño de letra 14, color azul y cursiva.
El resultado de esta interpretación debería visualizarse como en la imagen 11.
Imagen 11: Sugerencia de panel_4
4.1.5 Paso 5
Se crearán las etiquetas que mostrarán el resultado de la funcionalidad, estas
etiquetas estarán agrupadas en un panel específico. Al ejecutar la funcionalidad de la
página se deberán modificar los valores de estas etiquetas. Esto se implementará de
la siguiente forma.
4.1.6 Paso 6
El código CJS que se cargó a memoria en el paso 1 es el siguiente.
//este ejemplo debe modificar la etiqueta cuerpo para ponerle color de fondo rosado
//También muestra un cuadro de dialogo con el contenido
Documento.Observador("Listo", cambiar_color());
funcion cambiar_color(){
DimV Cuerpo : Documento.Obtener("Cuerpo");
Cuerpo.setAtributo("FondoElemento","Pink");
Mensaje("Se cambio el color a Rosado ");
}
Este archivo modificará la página web de tal forma que tendrá la salida
correspondiente a la imagen 13.
Imagen 13: ejemplo index con CJS
5 Lenguajes
USAC-WEB podrá interpretar 3 lenguajes. El lenguaje base será CHTML ya que será
el que USAC-WEB llamará directamente y este se encargará de llamar a los otros
lenguajes.
5.1 CHTML
Lenguaje que define el contenido de la página web. Al interpretar el lenguaje se
deberá mostrar los componentes de la página en el área de la página web. Las
instrucciones deben venir dentro de los símbolos ‘<’ y ’>’. Estas instrucciones tendrán
el nombre de etiquetas.
Cada etiqueta tiene un conjunto específico de elementos opcionales para configurar
las etiquetas.
El lenguaje CHTML contiene una etiqueta especial, esta etiqueta es utilizada para
poder agregar comentarios, en cualquier parte del documento CHTML. Todo
contenido del comentario deberá de venir dentro de los símbolos '<//-' y '-//>'.
Ejemplo
<//- Este es un comentario -//>
<//- Este es otro comentario
Solo que contiene
Saltos de línea-//>
Ejemplo
<CHTML>
...
<//- contenido dentro de la etiqueta CHTML -//>
...
<FIN-CHTML>
Etiqueta Encabezado
Etiqueta en la cual se podrá definir información de la página web. Esta etiqueta deberá
venir dentro de una etiqueta <CHTML>.
Ejemplo
<ENCABEZADO>
...
<//- Contenido encabezado -//>
...
<FIN-ENCABEZADO>
<ENCABEZADO>
<//- archivo que será utilizado en la página -//>
<CJS ruta = “C:/fichero/fichero_1.cjs”;> <FIN-CJS>
<//- archivo con contenido ccss para agregarle estilos a los elementos de la página -//>
<CCSS ruta = “C:/fichero/estilo_2.ccss”;> <FIN-CCSS>
<FIN-ENCABEZADO>
Etiqueta Cuerpo
Etiqueta en la cual se podrá agregar el contenido que se mostrará dentro del área de
la página web. Esta etiqueta deberá venir dentro de una etiqueta <CHTML>. Los
elementos de esta etiqueta están definidos en la tabla 1.
Tabla 1: Elementos de etiqueta cuerpo.
Elemento Descripción
fondo Permitirá configurar un color de fondo
Ejemplo
<CUERPO>
…
<//- Contenido del cuerpo -//>
…
<FIN-CUERPO>
Etiqueta CJS
Etiqueta que servirá para llamar un archivo CJS. Esta etiqueta deberá venir dentro de
una etiqueta <ENCABEZADO>. Los elementos de esta etiqueta están definidos en la
tabla 2.
Tabla 2: Elementos de etiqueta cjs.
Elemento Descripción
Ruta Permitirá colocar la ruta del archivo cjs.
Ejemplo
<CJS ruta = ”””Ruta del archivo *.cjs”;> <FIN-CJS>
Etiqueta CCSS
Etiqueta se utilizará para llamar un archivo CCSS. Esta etiqueta deberá venir dentro
de una etiqueta <ENCABEZADO>. Los elementos de esta etiqueta están definidos en
la tabla 3.
Tabla 3: Elementos de etiqueta ccss.
Elemento Descripción
Ruta Permitirá colocar la ruta del archivo cjs.
Ejemplo
<CCSS ruta = “Ruta del archivo*.ccss”;> <FIN-CCSS>
<CCSS ruta = “C:/fichero/estilo_1.ccss”;> <FIN-CCSS>
Etiqueta Título
Etiqueta que servirá para definir el título de la página web. Este título se deberá
mostrar en la pestaña de la página web. Esta etiqueta deberá venir dentro de una
etiqueta <ENCABEZADO>.
Ejemplo
<TITULO> <//- Titulo de la página web -//> <FIN-TITULO>
Etiqueta Panel
Etiqueta que mostrará un área específica de trabajo en donde se podrán definir más
componentes. Esta etiqueta deberá venir dentro de una etiqueta <CUERPO>.
Esta etiqueta tiene la misma funcionalidad que la etiqueta <CUERPO>, es decir esta
etiqueta podrá contener más etiquetas dentro.
Ejemplo
<PANEL> <//- Contenido del panel o área del panel -//> <FIN-PANEL>
<PANEL>
<TEXTO> Esta es una etiqueta<FIN-TEXTO>
<CAJA_TEXTO> Contenido en la caja de texto <FIN-CAJA_TEXTO>
<PANEL>
<FIN-PANEL>
<FIN-PANEL>
Ejemplo
<TEXTO> <//- Texto a mostrar -//> <FIN-TEXTO>
<TEXTO> Esta es
una
Etiqueta
<FIN-TEXTO>
Etiqueta Imagen
Etiqueta que mostrará una imagen en el área de la página web. Esta etiqueta deberá
venir dentro de una etiqueta <CUERPO>. En la etiqueta deberá de colocarse la
dirección donde se encuentre la imagen, al cargar la imagen se deberá de validar que
acepte cualquier formato para imágenes.
Esta etiqueta, al momento de no encontrar una imagen en la ruta dada, deberá de
mostrar una imagen con un mensaje de error o advertencia. Los elementos de esta
etiqueta están definidos en la tabla 4.
Tabla 4: elementos de etiqueta imagen.
Elemento Descripción
Click Se podrá definir la llamada a una función del lenguaje CJS, con
la que se podrá realizar una acción.
Ruta Permitirá colocar la ruta del archivo CHTML, con el que
funcionará como enlace para redirigir a otra página.
Ejemplo
<IMAGEN> <//- Imagen a mostrar -//> <FIN-IMAGEN>
Etiqueta Botón
Etiqueta que mostrará un botón en el área de la página web. Esta etiqueta deberá
venir dentro de una etiqueta <CUERPO>. Los elementos de esta etiqueta están
definidos en la tabla 5.
Tabla 5: elementos de la etiqueta botón.
Elemento Descripción
Click Se podrá definir la llamada a una función del lenguaje CJS, con
la que se podrá realizar una acción.
Ruta Permitirá colocar la ruta del archivo CHTML, con el que
funcionará como enlace para redirigir a otra página.
Ejemplo
<BOTON> <//- Contenido del botón -//> <FIN-BOTON>
Etiqueta Enlace
Etiqueta que mostrará un texto que realizará una redirección a otra página web en
caso sea seleccionado. Mostrará el texto que se desee de color azul y subrayado
como valor predeterminado. Esta etiqueta deberá venir dentro de una etiqueta
<CUERPO>. Los elementos de esta etiqueta se mostrarán en la tabla 6.
Tabla 6: elementos de la etiqueta enlace.
Elemento Descripción
Ruta Permitirá colocar la ruta del enlace.
Ejemplo
<ENLACE ruta="ruta/ruta";> <//- Texto a mostrar en la etiqueta -//>
<FIN-ENLACE>
Etiqueta Tabla
Etiqueta que mostrará el contenido de una tabla. Esta etiqueta deberá venir dentro de
una etiqueta <CUERPO>.
Ejemplo
<TABLA> <//- Contenido de la tabla -//> <FIN-TABLA>
Etiqueta Fila
Etiqueta que contendrá el contenido de las filas de la tabla. Esta etiqueta deberá de
venir dentro de la etiqueta <TABLA>.
Ejemplo
<FIL_T> <//- Contenido de las filas de la tabla -//> <FIN-FIL_T>
Ejemplo
<CB> <//- Contenido del encabezado de una tabla -//> <FIN-CB>
Etiqueta Celda
Etiqueta que mostrará el contenido de la celda. Esta etiqueta mostrará el texto que se
desea visualizar por cada celda de la tabla. Esta etiqueta deberá de venir dentro de
la etiqueta <FIL_T>
Ejemplo
<CT> <//- Contenido o texto que llevará la celda -//> <FIN-CT>
Ejemplo
<TEXTO_A> <//- Contenido de la caja de Texto -//> <FIN-TEXTO_A>
Ejemplo
<CAJA_TEXTO> <//- Contenido de la caja de Texto -//> <FIN-CAJA_TEXTO>
<CAJA_TEXTO> <FIN-CAJA_TEXTO>
Elemento Descripción
click Se podrá definir la llamada a una función del lenguaje CJ, con
la que se podrá realizar una acción.
Ejemplo
<CAJA> <//- Opciones para agregar -//> <FIN-CAJA>
Etiqueta Opción
Etiqueta que mostrará el contenido para visualizar en una caja de texto. Esta etiqueta
deberá de venir dentro de la etiqueta <CAJA>. Dentro de la etiqueta deberá de venir
el valor que tomará la ser seleccionada una etiqueta, si en todo caso no tiene un valor
predefinido seleccionará el contenido de la opción como su valor. Los elementos de
esta etiqueta se mostrarán en la tabla 8.
Tabla 8: elementos de la etiqueta opción.
Elemento Descripción
valor Valor que tomará la opción al ser seleccionada.
Ejemplo
<OPCION > <//- Contenido -//> <FIN-OPCION>
<OPCION valor="1";>Uno<FIN-OPCION>
Etiqueta Contador
Etiqueta que mostrará una caja con la funcionalidad de una caja de texto con la
diferencia que solo aceptará valores de números enteros. Su valor por defecto o inicial
será 0, en todo caso no es especificado o el valor dado no es válido.
Esta etiqueta deberá venir dentro de la etiqueta <CUERPO>.
Ejemplo
<SPINNER> 15 <FIN-SPINNER>
<SPINNER> 0<FIN-SPINNER>
<SPINNER> <FIN-SPINNER>
Etiqueta Salto
Etiqueta salto, esta etiqueta tendrá la funcionalidad de un salto de línea en los
elementos del lenguaje CHTML. Esta etiqueta deberá de venir dentro de la etiqueta
<CUERPO>.
Ejemplo
<SALTO-FIN>
<CAJA>
<OPCION valor="1";>Uno<FIN-OPCION>
<OPCION valor="2";>Dos<FIN-OPCION>
<FIN-CAJA>
<SALTO-FIN>
<CAJA_TEXTO> Contenido en la caja de texto <FIN-CAJA_TEXTO>
Todas las etiquetas descritas anteriormente tendrán los elementos que aparecen en
la tabla 9.
Sintaxis
<< elemento = valor ; >>
Ejemplo
Grupo = grupo_1; Alto = 15; ancho = 50;
Elemento Descripción
Id Permitirá colocar un texto que identifique la etiqueta.
Grupo Permitirá definir una clase o un grupo, este grupo servirá para
la aplicación de estilos con CCSS.
Alto Permitirá colocar un valor numérico para asignar el alto de un
elemento del CHTML.
Ancho Permitirá colocar un valor numérico para asignar el ancho de un
elemento del CHTML.
Alineado Permitirá colocar forma o formato a los elementos del CHTML,
los valores válidos para poder asignar serán izquierda, derecha,
centrado.
ccss Permitirá llamar a un grupo de estilo que esta identificados por
un ID.
5.2 CJS
El lenguaje CJS será el encargado de realizar gran parte de la lógica y manejo de
datos que la página web deberá de realizar, este podrá tomar propiedades de los
elementos CHTML. Este lenguaje se encontrará en archivos con extensión “.cjs” y
deberán ser importados desde el lenguaje CHTML.
5.2.1 Comentarios
En el lenguaje CJS, permitirá agregar comentarios los cuales podrán ser simples o
multilínea. Esto con la finalidad que el programador pueda dejar información respecto
al código que está generando.
Comentario Simple: este utilizará el carácter ‘, para dar inicio a un comentario.
Ejemplo
‘Comentario simple
5.2.2 Variables
Las variables serán contenedores en los se podrán almacenar valores. Primero se
deberá declarar la variable con la palabra reservada DimV, seguida del nombre que
le quiera dar.
Sintaxis
DimV Nombre_de_Variable;
Ejemplo
DimV mi_variable;
5.2.3 Asignación de valores
Las variables podrán tomar cualquier tipo de valor, por lo que no es necesario
especificar un tipo de valor en específico. Los tipos de valores admitidos se
encuentran detallados en la tabla 10. El signo para la asignación de variables será el
“:”.
Sintaxis
DimV Nombre_de_Variable: valor;
Nombre_de_Variable: valor;
Ejemplo
DimV NOMBRE: “Henry”;
Nombre: “Julia”;
95+0.5+1.5
- Resta Operación aritmética que consiste en 100-0.5-95
restar o quitar cantidades y obtener la
diferencia 50-1.5-5
* Multiplicación Operación aritmética que consiste en 10*15*10
multiplicar es decir sumar las
cantidades las veces indicadas a otro 30*0.5*2
número.
/ División Operación aritmética que devolver el 10/2
resultado de una división.
200/5
^ Potencia Operación aritmética de potencia, a : b^2;
toma la primera expresión como base
y la segunda como exponente.
% Modulo Operación aritmética que devolver el a : b%2;
residuo de una división.
++ Adición Suma 1 a la expresión. a++;
-- Sustracción Resta 1 a la expresión. (b+2)--
Los operadores aritméticos deberán de cumplir con las reglas de operatoria que se
encuentran en la tabla 12.
Tabla 12: Tabla de operaciones posibles según los operadores
5.2.6 Condiciones
Las condiciones son operaciones que servirán para poder determinar la veracidad o
falsedad de la misma. Para ello se hace uso de operaciones aritméticas, relacionales
y lógicas.
5.2.10 Vectores
Los vectores serán contenedores de una dimensión. Estos podrán contener cualquier
elemento de forma mixta, esto quiere decir que no serán exclusivamente de un tipo
de dato. Las listas se definirán al momento de darle valor a la variable que se desea
utilizar, el tamaño de este dependerá de la cantidad de elementos que se introducirán
en este, una vez definida la cantidad de elementos esta no podrá cambiar, haciendo
que el vector sea estático.
Sintaxis
DimV Nombre_de_Vector : {elemento1[,elemento2, ….. , elementoN] };
DimV Nombre_de_Vector{Tamanio_vector};
Ejemplo
Dimv miVector : { 14 ,240 , 350 };
DimV vectorStatico{3};
vectorEstatico : { “Hola” , “Otra vez” , 250};
DimV miNumero: 4;
DimV vector_miNumero{miNumero};
vectorEstatico : { 51 , 200 , 40 , 56};
Sintaxis
Nombre_de_vector{ Indice };
Ejemplo
DimV valorVector;
Sintaxis
Nombre_de_vector.Conteo;
Ejemplo
DimV tamanioVector;
Sintaxis
Nombre_de_vector.aTexto();
Ejemplo
DimV miCadena;
DimV miVector : { “hola” , 1 , 2 , 3 , “prueba” };
5.2.14 Si
Esta instrucción deberá iniciar con la palabra reservada “Si”, seguida de una condición
encerrada entre paréntesis. Cuenta con un cuerpo que consiste en un conjunto de
sentencias encerradas entre llaves ( {} ), que se ejecutarán si la condición tiene un
valor verdadero. De manera opcional se puede incluir un conjunto de sentencias que
se ejecutarán en caso de que la condición sea falsa, este cuerpo de instrucciones
viene seguido de la palabra reservada “SINO”, este cuerpo de instrucciones también
debe ir encerrado entre llaves ( {} ).
Sintaxis
Si( <Condición> ){
< Instrucciones >
}
Sino {
< Instrucciones >
}
Ejemplo
Si( a < 10 ){
b : 23;
}Sino{
b : 46;
}
5.2.15 Selecciona
Esta sentencia de control evaluará una expresión y comparará su resultado con cada
uno de los valores definidos en los casos del cuerpo de la sentencia. Cada caso
cuenta con un valor y un cuerpo de instrucciones.
La sentencia de control iniciará con la palabra reservada “Selecciona”, seguido de
una expresión encerrada entre paréntesis. Cuenta con una lista de casos, cada caso
iniciará con la palabra reservada “Caso” seguida del valor puntual del caso, dos
puntos ( : ), y un cuerpo de sentencias. Opcionalmente, se puede agregar un caso
que se ejecute por defecto si ninguno de los casos cumple con la expresión inicial con
la palabra reservada “Defecto” seguida por dos puntos ( : ) y un cuerpo de sentencias.
El comportamiento de esta sentencia de control preguntará cuál es el caso que
cumple con la expresión inicial, y de ahí en adelante ejecuta todas las sentencias de
los casos, sin incluir las instrucciones asociadas al bloque “Defecto”, hasta encontrar
la palabra reservada “Detener”. Si no se cumple con ninguna de las condiciones se
debe ejecutar el bloque de instrucciones asociadas al bloque “Defecto”.
Sintaxis
Selecciona ( < Expresión > ){
Caso < Valor_1 > :
< Instrucciones >
Caso < Valor_2 > :
< Instrucciones >
Caso < Valor_N >:
< Instrucciones >
Defecto :
< Instrucciones >
}
Ejemplo
Selecciona ( a * 15 ){
Caso 10 :
< Instrucciones >
Caso 15 :
< Instrucciones >
Defecto :
< Instrucciones >
}
Ejemplo
Para( a : 10; a > 0; --){
b : 23;
}
Ejemplo
Mientras( a < 10 ){
a : a + 1;
}
5.2.18 Detener
Esta sentencia se aplicará siempre y cuando se encuentre dentro del cuerpo de un
ciclo Para o Mientras, o dentro del cuerpo de un caso de una sentencia Selecciona.
Al ser encontrada la ejecución deberá ser detenida y regresar a un nivel superior de
la sentencia o ciclo que ha sido detenido.
Sintaxis
Detener;
Ejemplo
Mientras( a < 10 ){
a : a + 1;
Detener;
}
5.2.19 Imprimir
Esta instrucción permitirá mostrar un texto en la consola de salida. Esta instrucción
solamente recibirá como parámetro una expresión que dará como resultado un texto.
Sintaxis
Imprimir(Expresión);
Ejemplo
Imprimir("Hola mundo!");
5.2.20 Funciones
Las funciones ejecutarán una serie de pasos. Toda función deberá ser identificada
con un nombre único. Seguido del ID de la función se deberán ir paréntesis los cuales
pueden o no contener parámetros, los parámetros de una función, estarán dados por
una lista de valores los cuales van separados por coma. El cuerpo de las funciones
empezarán con el carácter “{“ y finalizar con “}”.Las funciones serán capaces de
devolver un valor de retorno las mismas el cual no es necesario especificar al
momento de declarar la función.
Sintaxis
funcion nombre_funcion([Parámetro1, Parámetro2 , … , ParámetroN]){
<Instrucciones>
}
Ejemplo
funcion prueba(){
Imprimir(“Hola mundo”);
}
funcion valor_mayor( x , y){
si(x > y){
Imprimir(x);
}sino{
Imprimir(y);
}
}
Las funciones podrán tener el mismo identificador, pero tener diferente número de
parámetros, al momento de realizar la llamada, la cantidad de parámetros que serán
recibidos determinará la función que se estará utilizando.
Ejemplo
funcion prueba(x){
Imprimir(“El valor es” + x);
}
funcion prueba( x , y){
si(x > y){
Imprimir(“Variable1 es mayor que Variable2”);
}sino{
Imprimir(“Variable2 es mayor que Variable1”);
}
}
‘Llamada a funciones
Dimv v1 , v2;
v1: 10;
v2: 11;
5.2.21 Retornar
La palabra reservada retornar se podrá colocar dentro de una función, esta indicará
que la función está retornando un valor, cada vez que una función llegue a una
sección donde se contenga la palabra reservada retornar la ejecución de la misma
terminará y será posible capturar el valor devuelto por esta.
Sintaxis
funcion nombre_funcion(){
Retornar Valor_de_retorno;
}
Ejemplo
funcion numeroMayor(x,y){
si(x > y){
Retornar x;
}sino{
Retornar y;
}
}
‘Captura de valor
Dimv v1 , v2 , mayor;
v1: 10;
v2: 11;
mayor: numeroMayor(v1,v2);
5.2.22 Mensaje
La sentencia mensaje desplegará un cuadro de texto emergente con información que
se deseará mostrar al usuario, este cuadro de texto bloqueará todas las acciones
sobre la página hasta que el usuario cierre el mismo.
Sintaxis
Mensaje(Expresión);
Ejemplo
Mensaje(“Hola mundo”);
Dimv X : 10;
Mensaje(X);
5.2.23 Eventos
Los eventos son acciones que se dispararán al momento que determinará la acción
se esté realizando o se haya concluido. Los eventos están enfocado a diferentes
acciones de los elementos CHTML. Cuando un elemento CHTML llegará a activar un
evento estos pueden realizar determinadas acciones en CJS.
Los Eventos que existirán en CJS son los siguientes:
• Listo: este elemento se disparará cuando se haya cargado el elemento
CHTML en la página web, si el elemento tiene contenidos más elementos
CHTML se activará al terminar de cargar todos estos elementos.
• Modificado: se disparará al modificar el contenido del elemento, ya sea por
CCSS o por CJS.
• Cliqueado: se disparará al hacer clic sobre un elemento CHTML.
5.2.24 Documento
La sentencia documento hace referencia al documento de CHTML, en donde se
encontrará ejecutándose el archivo CJS, este será necesario cuando se requiera
trabajar sobres lo elementos contenidos en esta. Esta sentencia por sí sola no
realizará ninguna acción, se utilizará para obtener o editar los elementos CHTML o
para realizar acciones con base a sus eventos.
Ejemplo
Documento.Observador(“listo”, mi_funcion());
Documento.Obtener(“id_titulo”);
5.2.25 Obtener
Esta función de la sentencia documento permitirá acceder a los elementos que se
encuentran dentro del archivo CHTML, y se estarán ejecutando en el explorador. Para
poder acceder a los elementos será necesario llamar por el identificador el elemento
en CHTML que se desea acceder.
Sintaxis
Documento.Obtener(ID_ELEMENTO);
Ejemplo
Documento.Obtener(“mi_boton”);
Los elementos que se obtendrán por medio de la función obtener, podrán ser
guardados en variables para trabajar con estos, de igual forma será posible acceder
a las propiedades y eventos de dicho elemento seleccionado.
Ejemplo
Dimv mi_boton : Documento.Obtener(“mi_boton”);
Mi_boton.setElemento(“ruta”, ”C:/…”);
5.2.26 SetElemento
La función SetElemento será la encargada de poder modificar los diferentes
elementos de las etiquetas CHTML desde código CJS. Para utilizar dicha función
deberá ser necesario haber obtenido previamente el elemento a modificar. Esta
función especial de CJS recibirá como parámetro el nombre del elemento que será
modificado y el nuevo valor a asignarle. Si el nombre del elemento a ser modificado
no existe, se deberá desplegar un mensaje de error en consola.
Sintaxis
Elemento.setElemento(“Nombre_elemento”,Expresión);
Ejemplo
Dimv mi_boton : Documento.Obtener(“mi_boton”);
Mi_boton.setElemento(“ruta”, ”C:/…”);
5.2.27 Observador
Los observadores serán utilizados para detectar cuando a un elemento se le disparen
cierto evento. En otras palabras, cuando se crea un observador a un elemento este
observador estará monitoreando al elemento en busca de detectar cuando el evento
indicado sea disparado, y en ese momento mandará a ejecutar la función asignada.
Se le podrá asignar un observador a documento o a cualquier elemento recuperado
por la función obtener.
Sintaxis
Elemento.Observador(‘evento’, funcion(){
<Instrucciones>
});
Ejemplo
Documento.Observador(“listo”, funcion(){
Imprimir(“Documento listo”);
})
Dónde:
ID: deberá ser el nombre que definirá al bloque de código de CCSS.
“[”: Inicio del contenido del bloque.
“]”: Fin del contenido del bloque.
Ejemplo
//Comentario de una línea
95+0.5+1.5
- Resta Operación aritmética que consistirá 100-0.5-95
en restar o quitar cantidades y
obtener la diferencia 50-1.5-5
* Multiplicación Operación aritmética que consistirá 10*15*10
en multiplicar es decir sumar las
cantidades las veces indicadas a 30*0.5*2
otro número.
/ División Operación aritmética que devolverá 10/2
el residuo de una división.
200/5
Precedencia Operador
Mayor /, *
Menor +, -
5.3.6 Cadenas
Las cadenas son un conjunto de caracteres que estarán dentro de comillas dobles.
Este lenguaje permitirá hacer concatenación de cadenas por lo que se deberá poder
realizar concatenaciones con el símbolo "+".
Ejemplo
"Hola " + " " + "Mundo"
5.3.7 Elementos
El lenguaje CCSS tendrá los siguientes elementos.
Alineado
Estilo con el cual se podrá asignar maneras en la que deberá de alinease los
elementos del CHTML.
Los valores posibles que podrá tener este elemento esta descrito en la tabla 18.
Tabla 18: valores de elemento alineado.
Valor Descripción
Izquierda Todos los elementos del CHTML deberán de posicionarse a la
izquierda de la página.
Derecha Todos los elementos del CHTML deberán de posicionarse a la
derecha de la página.
Centrado Todos los elementos del CHTML deberán de posicionarse al
centro de la página.
Justificado Todos los elementos del CHTML deberán de abarcar todo el
ancho de la página.
Texto
Estilo con el cual deberá asignar el valor del estilo al elemento del CHTML que hizo
la llamada.
El valor de este estilo deberá de aceptar cadena o valores numéricos.
Ejemplo
Texto := "cambio a este texto al llamar el ccss";
TEXTO := "hola proyecto" + " compiladores " + "2";
Formato
Estilo que deberá de asignar a los elementos o valores que contienen los elemento
un formato. Si se desea agregar más de un formato al texto deberán ser agregadas
separadas por una coma ",".
Los valores posibles que podrá tener el elemento formato están descritos en la tabla
19.
Tabla 19: valores del elemento formato.
Ejemplo
Formato := mayuscula, NEGRILLA, capital-t;
Formato := MINUSCULA;
FORMATO := cursiva;
Letra
Estilo que deberá de asignar al texto de los elemento o valores un tipo de fuente.
Los valores se deberán de asignar dentro de comillas dobles (“fuente”) o comillas
simples (‘fuente’).
Ejemplo
Letra := "Arial";
Ejemplo
Tamtex := 16;
Tamtex := 15.5;
Tamtex := 13.0068;
FondoElemento
Estilo que deberá de asignar al elemento del CHTML un fondo del color asignado o
dado.
Los valores válidos para asignar pueden ser un valor del código de colores o nombre
del color dado en inglés, dentro de comillas dobles.
Ejemplo
Fondoelemento := "gray";
Fondoelemento := "green";
AutoRedimension
Estilo que asignará al elemento del CHTML la función de redimensionarse de manera
automática al momento de maximizar o des-maximizar la ventana de la página. Se
deberá especificar si la redimensión del elemento es para el área vertical u horizontal.
La asignación será de la siguiente manera:
Sintaxis
AutoRedimension := [valor, área];
Ejemplo
AutoRedimension := [false, Horizontal];
Visible
Estilo que asignará si es visible un elemento o no del CHTML.
Los valores válidos para este estilo pueden ser verdadero o falso.
Ejemplo
Visible := true;
Visible := false;
Visible := TRUE;
Borde
Estilo que asignará un borde con un color asignado a un elemento del CHTML.
Los valores válidos para asignar deberán ser el tamaño del grosor del borde, el color
del borde y si se desea que las esquinas sean con curva este valor deberá ser
verdadero o falso, el color para asignar al borde deberá estar dentro de comillas
dobles y podrá ser un valor del código de colores o el nombre del color en inglés.
Sintaxis
Borde := [tamaño, color, curva];
Ejemplo
BORDE := [15, "black", true];
Ejemplo
Opaque := true;
OpaQUe := faLSe;
ColorText
Estilo que asignará un color al texto que contenga un elemento del CHTML.
Los valores válidos para asignar pueden ser un valor del código de colores o nombre
del color dado en inglés, dentro de comillas dobles.
Ejemplo
Colortext := "black";
colortext := "#A04343"
Ejemplo
//detectar a un grupo en especifico
GRUPO (grupo_areas_1);
Grupo (grupo_1);
GrUpo (grupo_accion_2);
ID (identificador_2);
Funcionamiento
En la sintaxis el lenguaje detectará que se desea aplicar estilos CCSS a los grupos
creados en CHTML o identificadores datos ahí mismo, se le aplicarán todas las
funcionalidades que se agregaron debajo de esta misma solicitud hasta donde se
encuentre otra solicitud para otro grupo o hasta donde contenga el corchete cerrado.
Ejemplo de Aplicación:
Titular_ccss [
//Inicio Grupo_areas_1
GRUPO (grupo_areas_1);
Formato := mayuscula, NEGRILLA, capital-t;
Letra := "Courier New";
Tamtex := 15.5;
Tamelemento := [150, 75];
Fondoelemento := "green";
SelectTextColor:= "blue";
ColorSelect := "black";
IdElemento := area15;
//Fin Grupo_areas_1
//Inicio Grupo_areas_2
GRUPO (grupo_areas_2);
Formato := mayuscula, NEGRILLA, capital-t;
Letra := "Courier New";
Tamtex := 13;
Tamelemento := [200, 200];
//Fin Grupo_areas_2
//Inicio identificador_1
ID (identificador_1);
Formato := mayuscula, NEGRILLA, capital-t;
Letra := "Arial";
Tamtex := 12;
Tamelemento := [50, 50];
]
//Fin identificador_1
caja_de_texto [
ID (identificador_2);
Formato := NEGRILLA;
Letra := "Arial";
Tamtex := 18;
Tamelemento := [150, 75];
IdElemento := caja25;
]
En las tablas 20 se podrá ver los estilos que son aplicables y válidos para las etiquetas
del lenguaje CHTML.
Tabla 20: resumen de los elementos CHTML validos en CCSS.
Estilo AutoRedimension
Etiqueta
CHTML X
Encabezado X
Cuerpo X
CJS X
CCSS X
Titulo O
Panel O
Área de O
Texto
Imagen O
Botón O
Enlace O
Tabla O
Fila O
Celda O
Encabezado
Celda O
Caja área de O
texto
Caja de texto O
Caja de O
opciones
Opción O
Contador O
Salto X
6 Requisitos Mínimos
Para que la entrega y calificación del primer proyecto sea efectiva, la solución
entregada deberá contener los siguientes requisitos mínimos:
• Ruta.
• Botón de Cargar Página.
• Pestañas.
• Área de página de web.
• Opciones.
o Consola Salida.
o Consola de Errores.
• Lenguaje CHTML
o Comentarios
o Etiqueta CHTML
o Etiqueta Encabezado
o Etiqueta Cuerpo
o Etiqueta CJS
o Etiqueta CCSS
o Etiqueta Titulo
o Etiqueta Panel
o Etiqueta Área de Texto
o Etiqueta Imagen
o Etiqueta Botón
o Etiqueta Enlace
o Etiqueta Caja Área de Texto
o Etiqueta Caja de Texto
o Etiqueta Caja de Opciones
o Etiqueta Opción
o Etiqueta Salto
o Todos los Elementos del Lenguaje CHTML (id, grupo, valor, alto, ancho,
etc.)
• Lenguaje CJS
o Declaración de variables
o Instancia de variables
o Declaración y uso de arreglos
o Si
o Mientras
o Funciones
o Retorna
o Sentencia Documento
o Obtener
o Utilización de eventos
• Lenguaje CCSS
o Comentarios Múltiples líneas
o Comentarios de Línea
o Case Insensitive
o Operaciones aritméticas Básicas
o Alineado
o Texto
o Formato
o ColorText
o Letra
o TamTex
o TamElemento
o FondoElemento
o Grupo
o ID
7 Entregables y Restricciones
7.1 Entregables
• Código fuente
• Aplicación Funcional
• Gramáticas (CHTML, CJ, CCSS)
• Manual Técnico
• Manual de Usuario
7.2 Restricciones
• El navegador deberá ser desarrollado utilizando el lenguaje Java.
• Los intérpretes deben ser desarrollados con JFlex y Cup.
• Copias de proyectos tendrán automáticamente nota de 0 puntos y se reportará
a los involucrados a la Escuela de Ingeniería en Ciencias y Sistemas
• No se recibirán proyectos después de la fecha de entrega.
• La calificación se realizará sobre archivos ejecutables.