UF1305 - Programación con lenguajes de guión en páginas web

Por Lorena Rodríguez Cortés

La finalidad de esta Unidad Formativa es enseñar a interpretar componentes software desarrollados en lenguajes de guión de cliente y ajustar componentes software ya desarrollados en páginas web para añadir funcionalidades a las mismas.

Para ello, se estudiarán en primer lugar la metodología de la programación, el lenguaje de guión y los elementos básicos del lenguaje de guión.

Por último, se profundizará en el desarrollo de scripts y en la gestión de objetos del lenguaje de guión, para terminar con un análisis de los eventos del lenguaje de guión y la búsqueda y análisis de scripts.

Tema 1. Metodología de la programación
1.1. Lógica de programación.
1.2. Ordinogramas.
1.3. PseTema ocódigos.
1.4. Objetos.
1.5. Ejemplos de códigos en diferentes lenguajes.

Tema 2. Lenguaje de guión
2.1. Características del lenguaje.
2.2. Relación del lenguaje de guión y el lenguaje de marcas.
2.3. Sintaxis del lenguaje de guión.
2.4. Tipos de scripts: inmediatos, diferidos e híbridos.
2.5. Ejecución de un script.

Tema 3. Elementos básicos del lenguaje de guión
3.1. Variables e identificadores.
3.2. Tipos de datos.
3.3. Operadores y expresiones.
3.4. Estructuras de control.
3.5. Funciones.
3.6. Instrucciones de entrada / salida.

Tema 4. Desarrollo de scripts
4.1. Herramientas de desarrollo, utilización.
4.2. Depuración de errores: errores de sintaxis y de ejecución.
4.3. Mensajes de error.

Tema 5. Gestión de objetos del lenguaje de guión
5.1. Jerarquía de objetos.
5.2. Propiedades y métodos de los objetos del navegador.
5.3. Propiedades y métodos de los objetos del documento.
5.4. Propiedades y métodos de los objetos del formulario.
5.5. Propiedades y métodos de los objetos del lenguaje.

Tema 6. Los eventos del lenguaje de guión
6.1. Utilización de eventos.
6.2. Eventos en elementos de formulario.
6.3. Eventos de ratón. Eventos de teclado.
6.4. Eventos de enfoque.
6.5. Eventos de formulario.
6.6. Eventos de ventana.
6.7. Otros eventos.

Tema 7. Búsqueda y análisis de scripts
7.1. Búsqueda en sitios especializados.
7.2. Operadores booleanos.
7.3. Técnicas de búsqueda.
7.4. Técnicas de refinamiento de búsquedas.
7.5. Reutilización de scripts.

• Idioma: Español
• Editorial: Editorial Elearning
• Fecha de lanzamiento: 14 ene 2019

Vista previa del libro

1.1. Lógica de programación

1.1.1. Descripción y utilización de operaciones lógicas

1.1.2. Secuencias y partes de un programa

1.2. Ordinogramas

1.2.1. Descripción de un ordinograma

1.2.2. Elementos de un ordinograma

1.2.3. Operaciones en un programa

1.2.4. Implementación de elementos y operaciones en un ordinograma

1.3. Pseudocódigos

1.3.1. Descripción de pseudocódigo

1.3.2. Creación del pseudocódigo

1.4. Objetos

1.4.1. Descripción de objetos

1.4.2. Funciones de los objetos

1.4.3. Comportamientos de los objetos

1.4.4. Atributos de los objetos

1.4.5. Creación de objetos

1.5. Ejemplos de códigos en diferentes lenguajes

1.5.1. Códigos en lenguajes estructurales

1.5.2. Códigos en lenguajes scripts

1.5.3. Códigos en lenguajes orientados a objetos

1.1.Lógica de programación

Un ordenador está formado por un conjunto de componentes electrónicos físicos (Hardware) que reciben órdenes de programas o aplicaciones (Software) para ejecutar una determinada tarea.

Un programa está formado por un conjunto de instrucciones que indican al ordenador como debe llevar a cabo una tarea; para crear un programa es necesaria la utilización de un lenguaje de programación.

Existen diferentes tipos de lenguajes de programación:

–Lenguajes de Alto-Bajo Nivel.

–Lenguajes Interpretados o Compilados.

–Lenguajes Clásicos, Visuales y de Internet.

–Por Objetivo.

El más utilizado hoy en día es el Lenguaje de Alto Nivel por asemejarse más al lenguaje humano utilizando el idioma inglés.

Para que un programa funcione, las instrucciones que lo componen deben estar secuenciadas y organizadas en el orden correcto para que ofrezcan el resultado esperado, es decir, resuelva la tarea o problema para lo cual ha sido creado el programa.

La Lógica de Programación es la base sobre la que se desarrollan los programas o aplicaciones, es necesario aclarar que la Programación y la Lógica de Programación son conceptos y tareas diferentes, mientras que la Programación requiere el conocimiento de técnicas e instrucciones de un determinado lenguaje, a través de los cuales se hace sencillo lograr que la computadora obtenga unos resultados mucho más rápidos que una persona y la Lógica de Programación involucra, de una manera técnica y organizada, los conceptos que permiten diseñar en términos generales, la solución a problemas que pueden llegar a ser implementados a través de una computadora.

A la hora de afrontar el desarrollo de un programa para la resolución de un determinado problema se sigue un proceso:

–Representación del problema a través de diagramas de flujo u ordinogramas (que se estudiaran más adelante).

–A partir de los diagramas de flujo, escribir el código utilizando el pseudocódigo, concepto que desarrollaremos en siguientes apartados.

–Codificación del pseudocódigo a través de un lenguaje de programación concreto.

A continuación, estudiaremos los siguientes conceptos:

1.1.1.Descripción y utilización de operaciones lógicas

La lógica de programación es la base sobre la cual se sustenta la programación en sí. Según la RAE, en su quinta acepción de la palabra (en el ámbito de la informática), programar significa Elaborar programas para la resolución de problemas mediante ordenadores.

La Lógica de programación permitir ofrecer soluciones a determinados problemas a través de un ordenador.

Cuando un programador se enfrenta a la construcción de un programa buscando una solución determinada, se enfrentará a las dos siguientes tareas:

1.El Qué: acciones que debe realizar para acceder a la resolución del problema. Esta tarea será parte del trabajo de mesa que se debe realizar siempre antes de cualquier actividad de programación.

2.El Cómo: instrucciones de las que nos valdremos para poder escribir el código que realice las acciones determinadas en el Qué. Éstas, estarán determinadas por el lenguaje de programación que hayamos escogido.

Veamos ahora por separado una definición más profunda sobre qué es la lógica de programación:

Lógica

Para poder estudiar Lógica de Programación no tendremos que tener ningún estudio previo sobre computadoras ni si quiera de tecnología en general.

Tampoco nos exige hacer uso de algún lenguaje de programación en especial, aunque gracias a éste podremos ver cómo se transforman en realidad los objetivos que buscamos en base a los conceptos que manejaremos previamente tras las soluciones que encontraremos a través de manejar ésta lógica de programación.

La Lógica es la ciencia de relaciones, ya que estudia el pensamiento, y a su vez el pensar es ya establecer relaciones (algo propio de las ciencias).

Pero si afinamos un poco el significado de la lógica, no es que la ciencia estudie estas relaciones, si no que se preocupa por las relaciones mismas, de modo que es por esto por lo que la lógica es una ciencia formal.

Aplicando el concepto de Lógica al entorno que nos ocupa, hay que tener en cuenta que los ordenadores solamente entienden el lenguaje binario que se basa en la utilización de 0 y 1, la lógica es el razonamiento que permite distinguir al ordenador entre lo verdadero (1) y lo falso (0); una operación lógica asigna un valor, verdadero o falso, para cada una de las variables que intervienen en dicha operación.

En las operaciones lógicas, a cada una de las variables se les asigna el valor verdadero o falso y estas operaciones tienen como resultado también verdadero o falso.

Normalmente, para entender mejor el funcionamiento de las operaciones lógicas se presentan en forma de tablas en las que se establecen dos entradas, una verdadera y una falsa, y el resultado de salida, que puede ser verdadero o falso.

Programación:

Acción y efecto de programar. El verbo en sí tiene varios usos:

Proceso de toma de decisiones. Esto se produce cuando se establecen un grupo de actividades en un contexto y tiempo determinados para posteriormente enseñar los contenidos seleccionados en función de los objetivos establecidos. El proceso es continuo, dinámico, no acabado ni rígido.

Algoritmo

En ocasiones no sabemos cómo comenzar el objetivo que tenemos entre manos, estamos perdidos, o el desarrollo del problema no está claro. Cuando nos encontremos en estas situaciones comenzaremos con un algoritmo.

Definición

El algoritmo es un conjunto de pasos ordenados y secuenciales a través de los cuales podremos lograr un objetivo. Secuenciales significa que serán ejecutados uno después de otro, y ordenados significa que deberán llevar un orden casi obligatorio. Así, el algoritmo nos permitirá lograr el objetivo propuesto.

Un algoritmo debe ser:

–Preciso: debe indicar claramente los pasos a seguir y el orden en que deben ser ejecutados.

–Definido: cada paso debe ser definido correctamente, sin ambigüedades, las acciones a realizar deben ser específicas.

–Finito: debe contener un determinado número de acciones, es decir, que debe tener un fin después de haber realizo un numero finito de acciones.

Existen dos tipos de algoritmos:

Algoritmos Informales

Los algoritmos informales son todos aquellos que no pueden realizarse a través de una computadora (o al menos no de una forma fácil). En este tipo de algoritmos, el ejecutor real es el ser humano, como el algoritmo para escuchar música, el algoritmo para cocinar, o el algoritmo para conseguir un libro.

Veamos un ejemplo de cuál sería la secuencia de un algoritmo para adquirir un libro:

Gracias al avance de la tecnología, muchos algoritmos que en el pasado no podían estar implementados en una computadora, ahora pueden estarlos, y actualmente lo son de una forma mucho más sencilla, como en el caso del algoritmo del ejemplo anterior: ahora se piensa de una forma mucho más globalizada, ya que gracias a Internet tenemos más probabilidades de conseguirlo y usando menos esfuerzo.

Algoritmos Computacionales

Son algoritmos computacionales los que están implementados en una computadora, aprovechando así su velocidad de procesamiento. Por ejemplo, uno de estos algoritmos puede ser el que genere los cien primeros números primos, de forma que la computadora nos ahorrará tiempo en calcularlo, y además será totalmente fiable.

Veamos un ejemplo de un algoritmo computacional, por ejemplo, colocarnos una camisa:

1.1.2.Secuencias y partes de un programa

¿Qué es un programa? Un programa puede considerarse como una secuencia de acciones o instrucciones que manipulan un conjunto de objetos (datos).

El programa se divide en dos bloques:

Podemos diferenciar, dentro del bloque de instrucciones de un programa, tres partes fundamentales. En algunos casos, estas tres partes estarán perfectamente delimitadas, pero en la mayoría de sus instrucciones quedan entremezcladas a lo largo del programa, aunque mantienen cierta localización geométrica impuesta por la propia naturaleza de las mismas.

Las partes principales de un programa son las siguientes:

Ya que el programa se constituye en sí mismo por un bloque de instrucciones, veamos en profundidad cuál es la clasificación de las Instrucciones y qué son.

Una instrucción se caracteriza por tener un estado inicial y final del entorno. El estado final de una instrucción coincide con el inicial de la siguiente. Deberemos saber que no siempre una instrucción modifica el entorno, ya que su cometido puede limitarse a la simple observación del mismo o a un cambio en el orden de ejecución de otras instrucciones. Las instrucciones pueden ser las siguientes:

–Instrucciones de declaración: Se utilizan en aquellos lenguajes de programación que no tienen declaración explícita de los objetos.

Su misión consiste en indicar al procesador que reserve espacio en la memoria para un objeto del programa, indicando asimismo su nombre, tipo y características.

–Instrucciones primitivas: Son las más básicas, ejecutan el procesador de modo inmediato. Se trata de las instrucciones que permiten realizar asignaciones, lecturas y salidas.

–Instrucción de asignación: Consiste en calcular el valor de una expresión y almacenarlo en una variable. En algún lenguaje es preciso calcular previamente el resultado de la expresión, pues la instrucción de asignación sólo permite el movimiento de un valor simple.

–Instrucción de entrada: Toma un dato de un dispositivo de entrada y lo almacena en un objeto. En algún lenguaje, los datos de entrada no provienen de un dispositivo externo, sino que han sido colocados previamente en el mismo programa.

–Instrucción de salida: Toma el valor de una expresión u objeto y lo lleva a un dispositivo externo.

–Instrucciones compuestas: Son aquellas que el procesador no puede ejecutar directamente, es decir, no es capaz de resolver de una sola vez, sino que realiza una llamada a un subprograma, subrutina o párrafo y posteriormente unifica resultados.

–Instrucciones de control: Son aquellas encargadas de controlar la ejecución de otras instrucciones.

–Instrucción alternativa: Controla la ejecución de unas u otras instrucciones según una determinada condición. Puede ser simple o doble (SI y SINO).

–Instrucción de salto incondicional: Altera la secuencia normal de ejecución de un programa, continuando la misma en la línea indicada en la propia instrucción (IR A), se cumpla o no una determinada condición.

–Instrucción de salto condicional: Altera la secuencia normal de ejecución de un programa únicamente en el caso de cumplimiento de una condición asociada a la propia instrucción (SI ... IR A).

–Instrucción repetitiva: Hace que se repitan una o varias instrucciones un número determinado o indeterminado de veces (PARA, MIENTRAS, HASTA e ITERAR).

También debemos tener en cuenta los elementos auxiliares de un programa.

Éstos elementos consisten en una serie de variables que realizan funciones específicas dentro de un programa, y gracias a su gran utilidad, frecuencia de uso y peculiaridades, las veremos a continuación más detalladamente.

Los elementos auxiliares de un programa son los siguientes:

1.Contadores: Un contador es un campo de memoria cuyo valor se incrementa en una cantidad fija, positiva o negativa, generalmente asociado a un bucle. Toma un valor inicial antes de comenzar su función, y cada vez que se realiza el suceso, incrementa su valor. Se utiliza en los siguientes casos:

∙Para contabilizar el número de veces que es necesario repetir una acción (variable de control de un bucle).

∙Para contar un suceso particular solicitado por el enunciado del problema (asociado a un bucle o independientemente).

2.Acumuladores: Un acumulador es un campo de memoria cuyo valor se incrementa sucesivas veces en cantidades variables. Se utiliza en aquellos casos en que se desea obtener el total acumulado de un conjunto de cantidades, siendo preciso inicializarlo con el valor 0. También en las situaciones en que hay que obtener un total como producto de distintas cantidades se utiliza un acumulador, debiéndose inicializar con el valor 1.

3.Interruptores (switches): Un interruptor es un campo de memoria que puede tomar dos valores exclusivos (0 y 1, -1 y 1, FALSO y CIERTO, etc.). Se utiliza para:

∙Recordar en un determinado punto de un programa la ocurrencia o no de un suceso anterior, para salir de un bucle o para decidir en una instrucción alternativa qué acción realizar.

∙Para hacer que dos acciones diferentes se ejecuten alternativamente dentro de un bucle.

También tendremos que tener en cuenta que existen varios tipos de programas. Un programa se compone por una secuencia de acciones, donde algunas de las cuales son alternativas y otras repetitivas. En determinados programas sencillos, esta mezcla de acciones no se da, en cuyo caso se pueden clasificar de la siguiente forma:

También se puede hacer una clasificación relativa a la aplicación desarrollada por el programa. Sería la siguiente:

1.2.Ordinogramas

Los Diagramas de Flujo permiten decir lo mismo que los algoritmos que hemos visto anteriormente, pero lo hacen a partir de unos símbolos, por lo que podemos verlo de una manera gráfica y mucho más entendibles. Los símbolos siguientes junto con su significado son algunos de los diagramas que se han acordado utilizar como Diagramas de Flujo o Flujogramas:

Símbolos de los Flujogramas.

Veamos a continuación una pequeña descripción de cada uno de ellos:

Los Flujogramas tienen una serie de ventajas y desventajas que veremos a continuación:

Ventajas

–Permite visualizar gráficamente el camino que sigue la solución a un problema.

–Por ser tan simplifacado es facilmente entendible.

–No se necesitan muchos conocimientos técnicos para el uso de esta técnica.

Desventajas

–Dado que los flujos (flechas) pueden ir de cualquier lugar a cualquier lugar da espacio para que el diagrama llegue a ser casi inentendible.

–Deben conocerse bien los simbolos que se van a utilizar.

–No todos los simbolos estan estandarizados.

–Los ciclos deben ser reinterpretados para poder ser diagramados en esta técnica.

Para la elaboración adecuada de un flujograma se han de seguir los siguientes pasos:

1.Elaborar una lista con las actividades que contiene el proceso.

2.Describir las actividades de forma específica y clara y anotar los puntos de decisión y las actividades que deriven de las alternativas.

3.Especificar los agentes que van a ejecutar cada actividad.

4.Dibujar la secuencia de actividades.

5.Añadir las entradas y salidas.

6.Revisión final y reflexión.

7.Retroalimentación para la mejora del proceso.

1.2.1.Descripción de un ordinograma

Una vez que se ha determinado el algoritmo que nos hace falta para llegar a nuestro objetivo, deberemos escribirlo en un lenguaje de alto nivel. Es por eso que lo mejor es escribir el algoritmo en un lenguaje restringido que sea fácil de traducir a un lenguaje de alto nivel.

Hay dos formas básicas de escribir los algoritmos para poder conseguir esto:

Centrémonos en los ordinogramas:

Los ordinogramas o diagramas de flujo son dibujos que representan de manera gráfica tanto las tareas como la sucesión de tareas del algoritmo. Las tareas se representan mediante formas rectangulares, rombos y romboides, y el flujo de tareas mediante flechas que enlazan las diferentes tareas.

Definición:

Un diagrama de flujo u ordinograma son herramientas gráficas para la representación visual y gráfica de algoritmos, compuestos por una serie de símbolos icónicos unidos por flechas.

Veamos un ejemplo de un ordinograma:

1.2.2.Elementos de un ordinograma

Ya sabemos que los ordinogramas o diagramas de flujo son dibujos que representan de manera gráfica las tareas como la sucesión de tareas del algoritmo. Ahora conoceremos cuáles son los elementos que componen un ordinograma.

Las tareas se representan mediante rectángulos, rombos y romboides y el flujo de tareas mediante flechas que enlazan las diferentes tareas.

Las características de estos símbolos son los siguientes:

–Los símbolos representan acciones o funciones en el programa.

–Las flechas representan el orden de realización de las acciones o funciones, marcando el sentido o flujo lógico del algoritmo.

–Cada símbolo tendrá al menos una flecha que conduzca a él y una flecha que parta de él, a excepción de los terminadores y conectores.

–Se leen de arriba a abajo y de izquierda a derecha.

–Las instrucciones se representan en rectángulos:

–Las entradas y salidas en romboides:

–Las condiciones en rombos:

–El inicio, el final y los puntos de reunión de flujo en círculos:

1.2.3.Operaciones en un programa

El Ordinograma se compone de representaciones gráficas (de la secuencia lógica de las operaciones que se han de realizar) para la resolución de un problema por medio de un programa dirigido a la computadora.

Un diagrama que representa un programa debe reflejar con claridad algunos de los elementos esenciales del mismo, como son:

Deberemos seguir una serie de reglas:

1.Los Diagramas de flujo deben escribirse de arriba hacia abajo, y/o de izquierda a derecha.

2.Los símbolos se unen con líneas, las cuales tienen en la punta una flecha que indica la dirección en que fluye la información de procesos, se deben de utilizar solamente líneas de flujo horizontal o verticales (nunca diagonales).

3.Se debe evitar el cruce de líneas, si quisiera separar el flujo del diagrama a un sitio distinto, se puede realizar utilizando los conectores. Se debe tener en cuenta que solo se van a utilizar conectores cuando sea estrictamente necesario.

4.No deben quedar líneas de flujo sin conectar.

5.Todo texto escrito dentro de un símbolo debe ser legible, preciso, evitando el uso de muchas palabras.

6.Todos los símbolos pueden tener más de una línea de entrada, a excepción del símbolo final.

7.Solo los símbolos de decisión pueden y deben tener más de una línea de flujo de salida.

1.2.4.Implementación de elementos y operaciones en un ordinograma

El ordinograma nos permite tener claro cuál es el problema y como se debe resolver.

Ya sabemos que los ordinogramas o diagramas de flujo son dibujos que representan de manera gráfica tanto las tareas como la sucesión de tareas de un algoritmo.

Estas tareas se representan mediante rectángulos, rombos y romboides; y el flujo de tareas mediante flechas que enlazan las diferentes tareas.

Veamos a continuación un ejemplo donde se implementarán éstos elementos que realizarán una serie de operaciones dentro de un ordinograma.

Podremos observar que en el problema se integran muchos de los elementos que se usan en un ordinograma, además de seguir las reglas que se han nombrado anteriormente.

En el ejemplo se resuelve el problema de conseguir el mínimo y el máximo de 3 números enteros.

Para construir este ordinograma se han de seguir, para empezar, una serie de pasos:

1.Hay que empezar colocando los elementos INICIO y FIN.

2.El usuario debe introducir los números y que sean almacenados como variables.

3.Se comprueba cual es el máximo y el mínimo de los números introducidos, en función de los resultados obtenidos, se bifurcará el flujo de ejecución y se muestra una respuesta u otra en función de la respuesta de la condición.

4.En función del camino de ejecución que haya tomado la operación IMPRIMIR, mostrará un mensaje u otro.

Ejemplo: Diseño de un algoritmo que lea tres números e imprima el mayor y el menor valor de los tres.

1.3.Pseudocódigos

El pseudocódigo es una manera de escribir los algoritmos de forma poco estricta (con una sintaxis poco depurada) o estructuras de datos poco detalladas, aunque intentan acercar las ideas del algoritmo a estructuras y sintaxis similares a las de los lenguajes de alto nivel en los que vamos a programar el algoritmo.

Por lo tanto, el pseudocódigo será otra forma de representar un algoritmo, como hemos podido ver anteriormente.

El pseudocódigo se utiliza para que pueda ser leído por personas, por lo que no se preocupa en detalles sintácticos.

Veamos un ejemplo de un algoritmo donde se dice si un número es par a partir del problema siguiente: dado un número, decir si es positivo o negativo:

En el ejemplo se intenta resolver un problema usando el pseudocódigo.

En resumen, el pseudocódigo es un lenguaje intermedio entre natural y de programación, que tiene más libertad que un lenguaje de programación concreto pero mantiene las reglas de programación estructurada.

1.3.1.Descripción de pseudocódigo

Además del ordinograma, otra de las herramientas de las que también disponemos para poder representar algoritmos es el Pseudocódigo.

El pseudocodigo consiste en describir textualmente un algoritmo de programación, está confeccionado para ser leído por un humano en lugar de por un ordenador, aunque utiliza términos cercanos a la computación por lo que se le conoce como un lenguaje de pseudoprogramación.

El Pseudocódigo no tiene una sintaxis estándar, por lo que se utiliza una mezcla de lenguaje natural usa sumado a una serie de símbolos, términos y otras características, que son propias de los lenguajes de alto nivel de programación, como Pascal o APL.

Y es ésta característica precisamente la que permite escribir la resolución de un problema, a través de palabras y frases (en nuestro lenguaje natural), y que se encuentra sujeto a unas reglas que posteriormente facilitarán la traducción del algoritmo a un determinado programa, el cual estará escrito en un lenguaje de programación determinado.

El Pseudocódigo está compuesto por tres partes:

–Cabecera: Donde se especifica el nombre del algoritmo que se va a resolver usando pseudocódigo.

–Declaraciones: Es la parte del pseudocódigo donde se especifican las variables y constantes y sus correspondientes tipos de datos.

–Cuerpo: Recoge las instrucciones u operaciones de las que se compone el pseudocódigo.

La estructura de un algoritmo presentado en pseudocódigo seria la siguiente:

Las principales ventajas