DFD es un programa didáctico para crear diagramas de flujo. Nuestro curso de informática está limitado a explorar sólo las entradas, salidas y asignaciones. DFD también soporta ciclos y funciones pero esa parte no la puedo enseñar en mis cursos. Como la idea no es hacer un tutorial sobre el tema, les reseño éste tutorial de DFD que me parece completo e ilustrativo. Mi intención, como ya les dije, es mostrar cómo podemos convertir un diagrama de flujo en un programa en Javascript y empezar a explorar este interesante lenguaje a partir de lo que sabemos de DFD.
Uso de los diagramas de flujoDesarrollar un programa es una tarea difícil por muchas razones. Si decidieramos sólo escribir un programa, sin planificarlo, enfrentaríamos todos los problemas simultáneamente, lo que haría muy difícil terminar la tarea, en especial cuando apenas estamos aprendiendo. Por ejemplo, antes de desarrollar un programa hay que prever qué información se va a necesitar, cómo debe reaccionar el programa a las entradas el usuario y qué cálculos debe efectuar el programa mismo. Todas éstas operaciones deben ser comprobadas en su lógica antes de escribir el programa. Dado que un programa es una secuencia de instrucciones que se le dan al PC y que se pueden recorrer de forma diferente cada vez que se ejecute el programa según los datos con los que se trabaje en cada ocasión particular, la sola lógica es complicada al punto de ser una tarea difícil en la medida que crece el programa o incluso para pequeños programas donde el objetivo o la forma de llegar al objetivo no se tiene claro. Todo lo anterior sucede antes de generar un programa que haga algo, por eso es necesario una herramienta que nos ayude con todo este proceso antes de enfrentarnos con problemas técnicos simultáneamente con los problemas lógicos. Los diagramas de flujo son una forma de ver qué secuencia de órdenes sigue un programa cada vez que se ejecuta, nos ayuda a observar cómo reacciona el programa a diferentes entradas del usuario, facilita el análisis y diseño previo a cualquier programa simple. Una vez que el análisis y la lógica del programa están comprobadas, procedemos a escribir y generar un programa que el PC ya pueda ejecutar solo. Generar un programa implica ciertas dificultades (adicionales a las de la lógica del programa): conocer bien la sintaxis del lenguaje seleccionado, conocer la semántica o la forma en que se generan los programas en alguna plataforma (compilación y enlace por ejemplo) y muchas otras cosas. Un diagrama de flujo y en especial DFD es una herramienta perfecta para organizar gráficamente un algoritmo, o por lo menos para aprender a programar y tener una idea general de la estructura del programa. Un diagrama de flujo representa con íconos las acciones que puede efectuar un programa, por ejemplo hay un ícono para la impresión a la pantalla, otro para la lectura del teclado y otro para la asignación de un valor a una variable. Una vez que tenemos un diagrama de flujo, cada uno de esos íconos se puede traducir a un lenguaje en particular, de tal manera que cuando tenemos el algoritmo y sabemos cómo traducir cada ícono al lenguaje específico también tenemos un programa que funciona realmente. En nuestro caso vamos a convertir un diagrama de flujo simple en un programa ejecutable en el navegador.
Ejecutar programas en el navegadorJavascript es un lenguaje de programación que se adjunta a las páginas web y su sintaxis recoge elementos de muchos lenguajes que lo precedieron históricamente como lenguaje C/C++. Lo que haremos, para no extendernos, es crear una página web que sólo contenga un programa de Javascript y le ordenaremos al navegador que ejecute el programa que escribamos apenas se inicie la carga del documento. La página que escribiremos será así: <html><head> <script language=»javascript»> function ejecutar(){ // Nuestro programa irá en éste espacio y // nada por encima o por debajo de ésta línea debe cambiar. return true; } </script> </head> <body onload=»ejecutar();»> </body> </html> Quienes conozcan un poco de html reconocen que esa es la estructura básica de cualquier página web, lo único extraño es que en la etiqueta BODY se agrega un parámetro onload y con éste se llama a nuestro programa apenas carga la página. Nuestro programa ejecutará cualquier instrucción que escribamos entre la definición de la función function ejecutar(){ y la sentencia de regreso return true; (con punto y coma incluído).
Traducción de íconos de DFD a JavascriptSalida
En DFD, dentro del ícono que identifica la salida se pondrá bien sea el nombre de una variable cuyo contenido queremos mostrar en la pantalla o un mensaje literal entre comillas simples, en el ícono que muestro acá lo que se mostrará a la pantalla es el mensaje literal César Cabrera. Si queremos juntar mensajes literales con contenidos de variables usamos el caracter coma (,) o más (+). En Javascript usaremos la función alert() y dentro de los paréntesis escribiremos lo que escribíamos dentro del ícono de la salida, por ejemplo, alert(«César Cabrera»); para el caso del ejemplo.
Entrada
En DFD, dentro del ícono de la entrada escribimos el nombre de la variable donde se va a almacenar lo que escriba un usuario cuando aparece la petición de entrada. En Javascript se juntan una asignación, una lectura y una salida en la función prompt(), dentro de los paréntesis usamos primero un mensaje y, opcionalmente, separado por coma un valor por defecto. Lo que ingrese el usuario por el teclado se convertirá en el contenido de la variable a la que asignemos la función, es decir, la orden nombre=prompt(«Escriba su nombre»); equivale a que salte a la pantalla una ventana que dice «Escriba su nombre» y justo debajo del mensaje un espacio para escribir, lo que escribamos queda guardado en la variable nombre.
La imagen siguiente equivale a la instrucción en Javascript radio=prompt(«Por favor digite el radio del círculo»);
Condiciones
Las condiciones en DFD corresponden al rombo del siguiente diagrama:
Una condición compara el valor de una variable con el contenido de otra o con una expresión conocida digitada por el programador. Si la condición se cumple, se ejecutan las instrucciones de la parte verdadera y si la condición no se cumple se ejecutan las instrucciones del otro lado. En Javascript se agrupan las instrucciones de cada lado entre corchetes o llaves {} y se marca cada camino alternativo (verdadero y falso) con las palabras if/else. La condición que en DFD se escribe dentro del rombo se escribe dentro de los paréntesis de la sentencia if(), cambiando el = de DFD por == en Javascript (porque un sólo = sería una asignación y si se pone en lugar de una condición siempre se evaluaría como verdadero, ¡sin sacar error!). Para ver cómo se traduce la imagen del ejemplo a Javascript mire el ejemplo que tiene el diagrama completo.
Observaciones
Finalmente hay que observar una serie de patrones. Todas las instrucciones terminan en punto y coma y hay que acostumbrarse a estar cerrando cosas: comillas, paréntesis, llaves, etc. En DFD hay una clara diferenciación entre textos literales, números y variables. Siempre que se va a imprimir a la pantalla (una salida) o a ingresar una letra o palabra(s) se debe usar comillas simples (‘), cuando se digitan números no se deben usar las comillas y cuando se quiere imprimir en pantalla el valor de una variable tampoco. En Javascript hay una diferenciación parecida: cuando se lee del usuario un valor numérico hay que traducirlo a número ya que si no se hace será interpretado como letras. Cuando leemos un número debemos rodear la función prompt() por parseInt(), que convierte lo que digite el usuario a número entero. Vamos a verlo en el ejemplo:
EjemploNuestro programa de ejemplo es un programa que calcula el área de un círculo cuyo radio solicitamos al usuario. Lo guardamos como una página web (archivo de texto con extensión .htm) y lo ejecutamos abriendolo en cualquier navegador. Dos consideraciones especiales: el proceso de probar el programa es editarlo en block de notas, guardar cuando se hace un cambio y recargar la página que lo ejecuta, no hay necesidad de cerrar el navegador ni de volver a buscar el archivo, sólo recargar la página. El navegador debe ejecutar Javascript, si por seguridad ha sido deshabilitado, se debe habilitar de nuevo (dependiendo del navegador a usar sería por herramientas –> opciones –> contenido o herramientas –> opciones de internet y no sé qué más), así sea sólo para probar nuestros programitas.
 |
<html>
<head>
<script language="javascript">
function ejecutar()
{ // De esta marca hacia atrás es el inicio del programa
0 // El programa comienza a partir de acá
1 alert("César A. Cabrera E.,\n http://cesarcabrera.info/blog/");
2 alert("Este programa calculará el área de un círculo dado el radio.");
3 radio=parseInt(prompt("Por favor digite el radio del círculo"));
4 if(radio>0)
{
5 area=3.141592*radio*radio;
6 alert("El área de una circunferencia de radio "+radio+" es "+area);
}
else
{
7 alert("¡El radio del círculo no puede ser negativo!");
}
8 // El programa termina acá.
// De acá en adelante es el fin del programa.
return true;
}
</script>
</head>
<body onload="ejecutar();">
Para comprobar éste programa ejecútelo 3 veces:<br>
1) Indicando un radio negativo<br>
2)Usando un radio mayor que 0<br>
3) Indicando una opción no válida<br>
Para ejecutar de nuevo el programa
<a href="#" onclick="document.location.reload(); return true;">recargue
ésta página</a>. Use punto para separación decimal.
</body>
</html>
|
Conclusiones
Muchas gracias man buen aporte
Hola estimado amigo, es muy buela tu tutoría pero sería mejor si publicaras un video donde nosotros los que empsamos de cero podamos entender mejor sguiendo paso a paso las practicas
Que el todopoderoso te bendiga
Muchas gracias por sus aportes, han sido de valiosa aplicacion y les ha servido de inspiracion para muchas personas, continue en este ejercicio y publique mas ayudas, que nosotros, DIOS y la historia se lo agradeceremos.
Hola Iván,
muchas gracias por el comentario y el ánimo, créame que me resulta muy reconfortante. Me alegra que le haya servido.
Gracias y hasta pronto.
necesito que me ayudes a pasar alguno diagramas a javascrpt por favor es urgente de esto depende parte de mi vida gracias de ante mano