U04 Programacion1

PROGRAMACIÓN
JAVASCRIPT
CURSO 2017 / 2018
Mª Isabel Torres Carazo

Tecnologías de la Información y la Comunicación I.E.S. Antigua Sexi - Curso 17/18
Unidad 4
Programación
1. CONCEPTOS PREVIOS
En la naturaleza hay muchos procesos que puedes considerar como Algoritmos ya que tienen
procedimientos y reglas. Incluso, muchas veces no somos conscientes de ellos.
Por ejemplo, el proceso digestivo es un concepto de algoritmo con el que convivimos a diario
sin que nos haga falta una definición precisa de este proceso. El hecho de que conozcamos
cómo funciona el sistema digestivo, no implica que los alimentos que consumimos nos
alimenten más o menos.
La familiaridad de lo que sucede día a día nos impide ver muchos algoritmos que pasan a
nuestro alrededor. Procesos naturales como la gestación, las estaciones, la circulación
sanguínea, los ciclos planetarios, etc., son algoritmos naturales que generalmente pasan
desapercibidos.
EJERCICIO 1 en GRUPO: ¡¡¡¡A bailarrrrr!!! Haz que otro grupo baile. Escribe en un papel los
movimientos que el otro grupo debe realizar para bailar tal y como queráis. Comprobaremos el
resultado…
¿Cuáles son los pasos para lavarse los ¿Cuáles son los pasos para cambiar una
dientes? bombilla?
1. Tomar la crema dental 1. Ubicar una escalera o un banco debajo de la
2. Destapar la crema dental bombilla fundida
3. Tomar el cepillo de dientes 2. Tomar una bombilla nueva
4. Aplicar crema dental al cepillo 3. Subir por la escalera o al banco
5. Tapar la crema dental 4. Girar la bombilla fundida hacia la izquierda
6. Abrir la llave del lavamanos hasta soltarla
7. Remojar el cepillo con la crema dental 5. Enroscar la bombilla nueva hacia la derecha
8. Cerrar la llave del lavamanos en el plafón hasta apretarla
9. Frotar los dientes con el cepillo 6. Bajar de la escalera o del banco
10. Abrir la llave del lavamanos 7. Fin
11. Enjuagarse la boca
12. Enjuagar el cepillo
13. Cerrar la llave del lavamanos
14. Secarse la cara y las manos con una
toalla
ALGORITMO
Los Algoritmos permiten describir claramente una serie de instrucciones que debe realizar el
computador para lograr un resultado previsible. Vale la pena recordar que un procedimiento
de computador consiste de una serie de instrucciones muy precisas y escritas en un lenguaje
de programación que el computador entienda.
En resumen, un Algoritmo es una serie ordenada de instrucciones, pasos o procesos a realizar
en orden para resolver un problema. Los hay tan sencillos y cotidianos como seguir la receta
del médico, abrir una puerta, lavarse las manos, etc.; hasta los que conducen a la solución de
problemas muy complejos.
Mª Isabel Torres Carazo 1

Programador: persona que resuelve problemas de un modo riguroso y sistemático.

Metodología de la programación: metodología necesaria para resolver problemas mediante
programas.
EJERCICIO 1 en PAPEL: Describe, lo más detalladamente posible y en orden, los pasos a realizar
para llevar a cabo cada una de las siguientes tareas.
1. Comprar una revista 3. Tirar la basura
2. Envolver un regalo 4. Freír un huevo
Pasos para resolver un problema:

1. Diseño del algoritmo que describe la secuencia ordenada de pasos sin ambigüedades
que conducen a la solución de un problema dado.
2. Análisis del sistema y desarrollo del algoritmo.
3. Expresar el algoritmo en un lenguaje de programación adecuado (codificación).
4. Ejecución y validación del programa por el ordenador.
Características de un algoritmo:
- Independiente. Son independientes del lenguaje de programación y del ordenador que
lo ejecuta. Ej. Una receta siempre es la misma aunque se exprese en idiomas distintos.
- Ordenado. Debe ser preciso e indicar el orden de realización de cada paso.
- Definible. Debe estar definido. Si se sigue el algoritmo dos veces, se debe obtener el
mismo resultado cada vez.
- Finito. Debe ser finito. Si se sigue un algoritmo, se debe terminar en algún momento;
es decir, debe tener un número finito de pasos.
¿Se ha entendido? Vamos a comprobarlo… EJERCICIO 2 en GRUPO

Escribe un conjunto detallado y ordenado de pasos, en lenguaje sencillo, que permitan guiar a
una persona, que tendrá los ojos vendados, para ir desde su puesto hasta que salga del aula
sólo escuchando las instrucciones que se le den.
Concepto de programa
Un programa de ordenador es un conjunto de instrucciones que producirán la ejecución de
determinada tarea. En esencia, un programa es un medio para conseguir un fin.
El proceso de programación es un proceso de solución de problemas y el desarrollo de un
programa requiere las siguientes fases:
1. Definición y análisis del problema
2. Diseño del algoritmo (diagramas, pseudocódigo, etc.)
3. Codificación del programa
4. Depuración y verificación
5. Documentación
6. Mantenimiento

2. LENGUAJES DE PROGRAMACIÓN
Lenguajes de programación: Son los lenguajes utilizados para escribir programas de ordenador.
Tipos:
- Lenguaje máquina: aquellos escritos en lenguaje directamente entendible por el
ordenador (lenguaje binario). Depende de la máquina. Ej. 0011110101010100000111
- Lenguaje de bajo nivel o ensamblador: utiliza nemotécnicos y tiene que ser traducido
al lenguaje máquina. Ej. ADD A,B,C
- Lenguaje de alto nivel: lenguajes similares al lenguaje humano. Ej. READ dato
Estructura de un programa informático

Un algoritmo debe tener tres partes: entrada, proceso y salida.
Partes de un programa
Un programa se considera como una caja negra que transforma las entradas del programa
(datos) en salidas (resultados). El programador debe establecer de dónde provienen las
entradas (dispositivos de entrada: discos, teclado…) y dónde se mostrarán los resultados
(dispositivos de salida: disco, impresora, pantalla, etc.).

Instrucciones
Las acciones o instrucciones se deben escribir y posteriormente almacenar en memoria en el
mismo orden en el que se han de ejecutar: en secuencia.
Un programa puede ser:
- Lineal: si las instrucciones se ejecutan secuencialmente sin bifurcaciones, decisiones ni
comparaciones.
- No lineal: se interrumpe la secuencia mediante instrucciones de bifurcación.
Tipos de instrucciones
- Inicio y Fin: begin-end
- Asignación: A  5
- Lectura y escritura: read-write
- Bifurcación: positiva (hacia delante), negativa (hacia atrás), incondicional (salto)
condicional (salto si se cumple una condición).
EJERCICIO 2 en PAPEL: Elabora dos programas que dibujen las siguientes figuras.

EJERCICIO 3 en PAPEL: Sigue los pasos del siguiente algoritmo.

3. ELEMENTOS BÁSICOS DEL LENGUAJE

Palabras reservadas.
Palabras que permiten estructurar los programas (inicio-fin), establecer acciones, etc.
Tipos básicos de datos.

DATO: expresión general que describe los objetos con los que opera un ordenador. Los datos de
entrada se transforman en datos de salida tras pasar por el programa.
- Simples: sin estructura: numéricos, lógicos y caracteres
o Numéricos: enteros, reales, etc.
o Lógicos: sólo pueden tomar dos valores: V y F
o Carácter: conjunto finito y ordenado de caracteres que el ordenador reconoce:
Alfabéticos: A, B, C, …, Z a, b, c, …, z
Numéricos: 0, 1, 2, …, 9
Especiales: +, -, *, /, ., ;, <, >, $, &….
o Cadenas de caracteres: sucesión de caracteres delimitados por comillas
simples o dobles.
- Compuestos: con estructura, arrays. Ej. DNI: nombre, número, dirección, fecha…
o Estáticas
 Arreglo o array: vector
 Arreglo o array bidimensional: matriz
 Archivo: fichero
 Cadena (string): sucesión de caracteres
 Registros: conjunto de elementos del mismo o distinto tipo
 Listas: sucesión de elementos
 Pilas: primero en entrar, último en salir
 Colas: primero en entrar, primero en salir
o Dinámicas
 Arreglo o array: vector
 Arreglo o array bidimensional: matriz
 Archivo: fichero
 Cadena (string)
 Registros
 Pilas
 Colas
 Árboles
 Grafos

Array unidimensional y bidimensional Ficheros
Este es un
fichero que
contiene texto
y datos
Cadena
Cola y pila Registro
Árboles Grafos

Identificadores: Constantes y variables.

Variables: datos que pueden cambiar su valor durante la ejecución de un programa. Ej. Suma
 Es un espacio en la memoria del ordenador para guardar datos
 “Contenedor” o “caja” que nos permite guardar datos temporalmente y acceder a
ellos
 Dependiendo del tipo de datos usaremos un tipo de variable
 Cuando guardamos un dato en una variable se borra el dato que hubiera previamente
en la misma
Constantes: datos que no cambian su valor durante la ejecución del programa. Ej. PI
Para nombrar las constantes y las variables deben seguirse las siguientes reglas para asignar
nombres de manera estándar, para que no se presente ningún problema en ningún entorno de
desarrollo.
 Los nombres pueden estar formados por una combinación de letras y números
(barcoGrande, barcoMediano, balon1, balon2, etc.).
 El primer carácter de un nombre debe ser una letra.
 La mayoría de los lenguajes de programación diferencian las letras mayúsculas de las
minúsculas.
 Con solo leer los nombres se debe entender lo que contienen. Deben ser significativos;
no utilizar abreviaturas, a menos que se justifique.
 Es conveniente utilizar una sola palabra para nombrarlos.
 No utilizar caracteres reservados (%, +, /, >, etc.), ni letras acentuadas (á, é, í, ó, ú, ü,
etc.).
El tipo de nombre –identificadores- que se asigne a objetos y escenarios, es muy importante.

Cuando dejas de trabajar en un proyecto por varios días, es más fácil para ti retomar la
actividad si los identificadores describen muy bien el contenido de estos elementos.

Operadores y expresiones.
Operadores aritméticos
+ Suma
- Resta
* Producto
/ División (reales)
^ Exponenciación
DIV División entera.
Ej. A=15 y B=6 enteros. 15 DIV 6 = 2
MOD Módulo (resto)
Ej. A=15 y B=6 enteros. 15 MOD 6 = 3
Prioridad
() Paréntesis
^ Exponenciación
*/ Producto y División
DIV y MOD División entera y módulo
+y- Suma y resta
Operadores lógicos
Operador Significado
NOT Negación
AND Conjunción
OR Disyunción
< Menor que
> Mayor que
IGUAL = Igual que
<= Menor o igual que
>= Mayor o igual que
<> Distinto de
A Not A
V F
F V
A B A AND B A OR B
F F F F
F V F V
V F F V
V V V V

Funciones internas
Función Descripción
abs(x) Valor absoluto de x
arctan(x) Arco tangente de x
cos(x) Coseno de x
exp(x) Exponencial de x
Ln(x) Logaritmo neperiano de x
log10(x) Logaritmo en base 10 de x
round(x) Redondeo de x
sin(x) Seno de x
sqr(x) Cuadrado de x
sqrt(x) Raiz cuadrada de x
trunc(x) Truncamiento de x (parte entera de x)
Operaciones de entrada y salida de datos
Operación Descripción
Read(x) Lectura de x
Write(x) Escritura de x
Expresiones.
Son combinaciones de constantes, variables, operadores, paréntesis y nombres de funciones
especiales. Ej. Leer(dato); X 56*8/3
Comentarios.
Todo programa informático debe contener las explicaciones pertinentes acerca de los pasos
que se siguen y su significado.
Suelen utilizarse caracteres especiales para indicar su presencia y que no sean procesados.
// Esto es un comentario de una línea
‘ Esto es un comentario de una línea
/* Esto
es un comentario
de varias líneas */

3.1. ESTRUCTURAS DE CONTROL
Nos permiten controlar y modificar el flujo del programa: tomar decisiones, realizar acciones
repetitivas, etc. dependiendo de ciertas condiciones que podemos establecer.
Todas las estructuras de control tienen un único punto de entrada y se pueden clasificar en:
Secuenciales
- Asignación: X ← A+B
- Entrada: Read (x)
- Salida: Write (x)
Condicionales
- Simples
IF (Condición) THEN IF (Condición 1) THEN
(Bloque de sentencias 1) (Bloque de sentencias 1)
ELSE ELSEIF (Condición 2) THEN
(Bloque de sentencias 2) Bloque de sentencias 2)
END IF .....
ELSEIF (Condición n) THEN

(Bloque de sentencias n)
ELSE
(Bloque de sentencias else)
END IF
- Múltiples
Select (Expresión)
Case Valor1
(Bloque de sentencias 1)
Case Valor2
(Bloque de sentencias 2)
Case Valor n
(Bloque de sentencias n)
Case Else
(Bloque de sentencias "Else")
End Select

Cíclicas
- Para
For (Variable) = (Expresión1) To (Expresión2) STEP (Salto)
(Bloque de sentencias)
Next
- Hacer mientras que

Do
Loop Until (Condición)
- Repite hasta
Do While (Condición)
Loop
3.2. ACTIVIDADES
1. Deduce el valor de las siguientes expresiones siendo A=5, B=25 y C=10

a. X  A+B+C
b. X  A+B*C
c. X  A+B/C
d. X  A+B div C
e. X  A+B mod C
f. X  A/B div C
2. Calcula el valor de las siguientes expresiones

a. 8+7*3+4*6
b. -2^3
c. (33+3*4)/5
d. 2^2*3
e. 3+2*(18-4^2)
f. 16*6-3*2

4. REPRESENTACIÓN GRÁFICA DE LOS ALGORITMOS

La intención es independizar los algoritmos del lenguaje de programación elegido. Métodos
usuales:
 Diagramas de flujo
 Diagramas Nassi-Schneiderman (N-S)
 Lenguaje de especificación de algoritmos (pseudocódigo)
 Lenguaje español (u otro idioma): difícil de traducir
 Fórmulas: difícil de traducir. Fórmulas si, el resto no.
4.1. DIAGRAMAS DE FLUJO
Son diagramas que utilizan símbolos estándar y tiene todos los pasos del algoritmo escritas en
esas cajas unidas por flechas (líneas de flujo) que indican la secuencia de ejecución.
Reglas básicas:
 Todas los símbolos deben estar conectados
 A un símbolo de proceso pueden llegarle varias líneas
 A un símbolo de decisión sólo puede llegarle un línea y pueden salir varias
 A un símbolo de inicio nunca le llegan líneas
 De un símbolo de fin nunca sale ninguna línea
Símbolos principales Función
Inicio / Fin. Parada o interrupción necesaria
Entrada / Salida de datos
Proceso (operaciones a realizar)
Decisión

Decisión múltiple
Conector
Línea de flujo
Línea conectora
Conector (enlaza páginas distintas)
Llamada a subrutina
Símbolos secundarios Función
Pantalla
Impresora
Teclado
Comentarios

Ejemplo básico Ejemplo general
Los programas de computador tienen como finalidad resolver

problemas y el primer paso consiste en comprender el
problema. Una forma de lograr esto se basa en formular
claramente el problema, especificar los resultados que se
desean obtener, identificar la información disponible (datos),
determinar las restricciones y definir los procesos necesarios
para convertir los datos disponibles (materia prima) en la
información requerida (resultados).
COMPRENDER EL PROBLEMA.
 Leer el problema varias veces
 ¿Qué datos me dan en el enunciado del problema?
 ¿Cuál es la pregunta del problema?
 ¿Qué debo lograr?
 ¿El problema tiene alguna incógnita que debo encontrar?
 ¿Qué procesos o cálculos necesito para encontrar la incógnita?
 ¿Tengo toda la información organizada?
 ¿Tengo los datos agrupados en categorías?
 ¿Ya elaboré una figura o diagrama que represente la solución?

Algunos ejemplos de diagramas de flujo…
4.2. EJERCICIOS DIAGRAMAS DE FLUJO

Hacer un diagrama de flujo para cada uno de los siguientes problemas.
1. Leer dos valores por teclado e imprimir por pantalla cuál de los dos es mayor
2. Leer tres valores por teclado e imprimir por pantalla cuál es mayor y cuál es menor
3. Comprobar que los tres valores sean distintos.
4. Hacer el diagrama de flujo para sumar dos números leídos por teclado y escribir el
resultado por pantalla.
5. Realizar la sumatoria de los números enteros entre el 1 y el 10. Es decir: 1+2+3+…+10
6. Realizar la suma de N números leídos por teclado. El valor de N se debe leer
previamente por teclado.
7. Leer un valor por teclado y decir si el número es par o impar
8. Hacer un diagrama de flujo que permita escribir los 100 primeros pares.
9. Sumar los N primeros números impares
10. Convertir en valor entero las calificaciones decimales de N alumnos
11. Calcular la nota media de un alumno que ha realizado N exámenes
12. Realizar el producto de N números que deben ser distintos de cero
13. Calcular la hipotenusa de un triángulo rectángulo conocidas las longitudes de sus dos
catetos
14. Calcular el número de segundos que hay en D días, H horas, M minutos y S segundos,
valores introducidos por teclado por el usuario

15. Calcular el volumen de un ortoedro (las bases son cuadrados y los laterales
rectángulos)
16. Dado un número introducido por teclado, decir por cuántas cifras está formado. Por
ejemplo, 1452 tiene cuatro cifras; 56 dos cifras…
17. Calcular el valor de una potencia de base B y exponente E
18. Leer números por teclado y mostrarlos por pantalla hasta que el usuario introduzca el
número cero
19. Determinar la edad de una persona dada solamente su fecha de nacimiento
20. Calcular la nota media, la mediana y la moda de una clase. Las notas están
almacenadas en un vector de tamaño N y ordenadas en sentido creciente
- La media aritmética es la suma de todos los datos dividida entre el número total
de datos.
- La moda de un conjunto de datos es el dato que más veces se repite, es decir,
aquel que tiene mayor frecuencia absoluta.
- La mediana es el valor que ocupa el lugar central entre todos los valores del
conjunto de datos, cuando estos están ordenados en forma creciente o
decreciente.
21. La sucesión de Fibonacci se define de la siguiente forma: a1=1, a2=1 y an=an-1+an-2
para n>2, es decir los dos primeros son 1 y el resto cada uno es la suma de los dos
anteriores, los primeros son: 1, 1, 2, 3, 5, 8, 13, 21, ... Hacer un diagrama de flujo para
calcular el Nésimo término de la sucesión.
22. Calcular el precio anual que tiene que pagar un ganadero por la comida para sus
animales teniendo en cuenta que por cada vaca (C) necesita 50Kg de alimento al mes,
por cada caballo (H) 30Kg y por cada cerdo (P) 25Kg. Cada kilogramo le cuesta 0,40
céntimos, pero le devuelven un 20% al final del año si ha comprado más de 1000Kg.
23. La política de la compañía telefónica “chimefón” es: “Chismea + x -”. Cuando se realiza
una llamada, el cobro es por el tiempo que ésta dura, de tal forma que los primeros
cinco minutos cuestan 1.00€, los siguientes tres, 0,8€, los siguientes dos minutos,
0,70€, y a partir del décimo minuto, 0,50€. Además, se carga un impuesto de 3%
cuando es domingo, y si es día hábil, en turno matutino, 15%, y en turno vespertino,
10%. Determinar cuánto debe pagar por cada concepto una persona que realiza una
llamada.
24. Realizar el diagrama de flujo para resolver una ecuación de segundo grado, teniendo
en cuenta las soluciones complejas.
25. Hacer un organigrama que calcule el total de una factura, partiendo de una lista de
parejas importe, iva. La lista finaliza cuando el importe sea 0. El iva puede ser el 4%, el
7% o el 16%, en cualquier otro caso se rechazan importe e iva y se deben introducir de
nuevo.
Finalmente hay que realizar un descuento, en función de la suma de los importes,
dicho descuento es del 0% si es menor que 1000, es del 5% si es mayor o igual que
1000 y menor que 10000 y es de un 10% si es mayor o igual que 10000. El descuento
se debe aplicar a la suma de los importes y a la suma de los ivas. Para acabar se debe
imprimir el importe y el iva resultantes (total menos descuento) y la suma de ambos.
26. Hacer un diagrama de flujo para calcular el máximo común divisor de dos números
enteros positivos N y M siguiendo el algoritmo de Euclídes, que es el siguiente:
1. Se divide N por M, sea R el resto.
2. Si R=0, el máximo común divisor es M y se acaba.
3. Se asigna a N el valor de M y a M el valor de R y volver al paso 1.

¿Por qué el método anterior acaba alguna vez? ¿Por qué calcula el máximo común
divisor de N y M?
27. Hacer el diagrama de flujo para calcular el factorial de N (N!=1·2·3·...·N).
28. Hacer un diagrama de flujo para convertir un número decimal N dado por teclado a
binario.
29. Hacer un diagrama de flujo para calcular el máximo de N números leídos por teclado,
se debe realizar de dos formas, una almacenando previamente los números dados por
teclado en un array y la otra calculando el máximo directamente según se leen los
números del teclado.
30. Hacer un diagrama de flujo para ordenar N números leídos por teclado y almacenados
en un array A. El algoritmo es el siguiente:
1. Se lee N y después los N números al array A.
2. Se busca el máximo de los elementos del 1 al N y su índice J.
3. Se intercambian los elementos A(J) y A(N).
4. Se decrementa N en 1.
5. Se compara N con 1, si es mayor se vuelve a 2.
6. Si es menor o igual se termina.
31. Hacer el organigrama de un programa que dado un array A ordenado de N elementos,
encuentre la posición de uno B leído por teclado. El algoritmo a emplear es el
siguiente:
1. Se fijan los extremos de la porción a buscar: I=1, J=N.
2. Se calcula el índice del elemento medio K=(I+J)/2.
3. Se compara B con el elemento medio A(K).
4. Si es igual se escribe K y se termina.
5. Si es mayor se cambian los extremos a I=K+1, J=N y se vuelve a 2.
6. Si es menor se cambian los extremos a I=1, J=K-1 y se vuelve a 2.
Pensar después que habrá que modificar para que busque también valores de B que
no estén en el array A, si se da ese caso y no lo encuentra debe poner un mensaje
diciendo que no está.
32. Hacer un organigrama de un programa que adivine el número entre 1 y 1000 pensado
por un humano. El programa debe ir diciendo números y el humano responderá con
los símbolos '<', '>' o '=', según el número pensado sea menor, mayor o igual que el
dicho por el ordenador. Cuando lo adivine deberá poner un mensaje especificando
cuantas preguntas ha necesitado y finalizar. No debe realizar más de 10 preguntas y
debe detectar si el humano le engaña diciéndole cosas imposibles, por ejemplo es
mayor que 4 y menor que 5.
Si en lugar de estar el número de partida entre 1 y 1000 estuviera entre 1 y 1000000,
¿cuantas preguntas serían necesarias?
33. Dados dos números enteros positivos N y D, se dice que D es un divisor de N si el resto
de dividir N entre D es 0. Se dice que un número N es perfecto si la suma de sus
divisores (excluido el propio N) es N. Por ejemplo 28 es perfecto, pues sus divisores
(excluido el 28) son: 1, 2, 4, 7 y 14 y su suma es 1+2+4+7+14=28. Hacer un organigrama
que dado un número N nos diga si es o no perfecto.
34. Hacer un organigrama que dados un día D, un mes M y un año A, calcule cual es el día
siguiente. Se debe tener en cuenta que en los años bisiestos Febrero tiene 29 días y en
los no bisiestos 28.

35. El Miércoles de Ceniza es 46 días antes que el Domingo de Resurrección. Hacer un

organigrama para que dados el día D, el mes M y el año A del Domingo de
Resurrección calcule la fecha del Miércoles de Ceniza en ese año. Se debe tener en
cuenta si el año es o no bisiesto.
36. Una empresa paga a sus 100 operarios semanalmente, de acuerdo con el número de
horas trabajadas, a razón de E euros por hora y de 1,5· E euros por cada hora extra. Las
horas extras son las que exceden de 40h. Hacer el organigrama que dado el número de
horas trabajadas y el valor de P calcule el salario que le corresponde.
37. Disponemos de una máquina que puede dar vueltas con 5 tipos de monedas distintas:
2€, 1€, 50, 20, 10, 5, 2 y 1 céntimos. Realizar el organigrama de un programa que
dados el precio del artículo y la cantidad entregada por el consumidor nos indique la
vuelta a entregar empleando el menor número posible de monedas.
4.3. EJERCICIOS DIAGRAMAS DE FLUJO - PRÁCTICAS

Instala en tu ordenador pseint.exe y realiza las actividades propuestas.
PSeInt es un entorno que cuenta con múltiples opciones y merece mención aparte. Permite
representar algoritmos utilizando tanto diagramas de flujo como pseudocódigo, incluso pasar
de una forma a otra de manera inmediata. Posibilita la ejecución del algoritmo como si éste ya
estuviera implementado en un lenguaje de programación, con la opción, si se desea, de ir
ejecutándolo paso a paso (esta manera de ejecutar un programa es muy utilizada cuando se
intenta detectar el origen de algún problema).
El editor ofrece distintos niveles de ayuda, lo que permite familiarizarse con la sintaxis de las
instrucciones de una forma sencilla y rápida. Otra característica muy interesante es la
posibilidad de traducir el algoritmo a distintos lenguajes de programación, lo que constituye
una ventaja enorme para los programadores que están iniciándose.
PSeInt es software libre, gratuito y multiplataforma y, por sus características, una excelente
herramienta para todo programador.

ACTIVIDADES PROPUESTAS
1. Dado el radio de una esfera, calcula su volumen y superficie.
2. Calcula la velocidad final de un cuerpo en caída libre desde una altura H.
3. Calcula seno, coseno y tangente de un ángulo dado por teclado.
4. Dada una frase por teclado, calcula su longitud, el primer y último carácter.
5. Dados tres ángulos por teclado indica si forman un triángulo.
6. Dados tres números por teclado, calcula la suma, la media y el mayor.
7. Dado un número entero por teclado indica si es par o impar.
8. Pedir una clave por teclado hasta teclear “ASEXI”.
9. Mostrar en pantalla los cien primeros números pares.
10. Calcula el factorial de un número dado por teclado.
11. Genera seis números aleatorios entre 1 y 100.
12. Calcula la suma de los N primeros números naturales.

5. DIAGRAMAS NASSI-SCHNEIDERMAN
En estos diagramas se omiten las flechas unión y las cajas son contiguas. Las acciones sucesivas
se escriben en cajas sucesivas y, como en los diagramas de flujo, se pueden escribir diferentes
acciones en una caja.
Todo algoritmo se representa de la siguiente manera:
Representación de las instrucciones permitidas en la programación estructurada:
Secuenciales
Condicionales
Simple Doble

Múltiple Condicionales anidadas
Iterativas

6. PSEUDOCÓDIGO
Es un lenguaje de especificación (descripción) de algoritmos. Se considera como un primer
borrador, dado que tiene que traducirse a un lenguaje de programación. El pseudocódigo no
puede ser ejecutado por un computador. Ayuda al programador a encontrar la lógica y las
estructuras de control. Utiliza, para representar las acciones sucesivas, palabras reservadas en
inglés, tales como: start, end, stop, read, write, if-then-else, while-end, repeat-until, etc.

7. LENGUAJE NATURAL
Es el medio que utilizamos normalmente para establecer la comunicación con otras personas.
Es un lenguaje muy ambiguo y poco claro.
Ejemplo: ¿Qué hacer para ver la película Tiburón?
Algoritmo general
1. Ir al cine
2. Comprar una entrada
3. Ver la película
4. Regresar a casa
Refinamiento
1. Inicio
2. Ver la cartelera del cine
3. Si no proyectan “Tiburón” entonces
a. Decidir otra actividad
b. Ir al paso 9
4. Si no
a. Ir al cine
5. Fin si
6. Si hay cola entonces
a. Ponerse en ella
b. Mientras haya personas delante hacer
i. Avanzar en la cola
c. Fin mientras
7. Fin si
8. Si hay localidades entonces
a. Comprar una entrada
b. Pasar a la sala
c. Localizar la butaca
d. Mientras proyectan la película hacer
i. Ver la película
e. Fin mientras
f. Abandonar el cine
9. Si no
a. Refunfuñar
10. Fin si
11. Volver a casa
12. Fin

8. LENGUAJE DE PROGRAMACIÓN C

9. TÉCNICAS DE PROGRAMACIÓN
a. PROGRAMACIÓN CONVENCIONAL
El programador desarrolla el programa sin preocuparse de su mantenimiento. Los programas
no tienen estructura y están compuestos por instrucciones seguidas, donde es muy difícil
localizar las partes funcionales de un programa.
Problemas
- Dificultad para depurar, localizar y corregir errores
- Dificultad en la modificación, ampliación o desarrollo de nuevos módulos en el
programa, de modo que a veces es mejor volver a implementarlo.
- Dificultades en la transportabilidad del programa
- No suelen estar documentados, lo que dificulta su comprensión
- Problemas de redundancia en el código, ya que una misma secuencia de instrucciones
se puede repetir en varias partes del programa.
Esta técnica no es aconsejable para el desarrollo del software, por lo que se hace necesario
usar otras técnicas que faciliten la labor del programador y que den como resultado un
programa más legible, eficiente, actualizable y, en general, de mayor calidad.
b. PROGRAMACIÓN MODULAR
“Es más fácil resolver problemas más pequeños que un gran problema”.
Consiste en la descomposición de un programa en partes más pequeñas llamadas módulos o
subprogramas, en cada una de estas partes se realizará una tarea concreta y bien definida, y se
agruparán según su funcionalidad. Cada uno de estos módulos se analizará y codificará por
separado.
Un programa modular constará de un programa o módulo principal que controlará todo lo que
suceda y será el encargado de llamar al resto de los módulos, a los que les transferirá el control
para que ejecuten sus funciones. Al finalizar, los módulos transferirán el control al módulo
principal. Los submódulos pueden hacer llamadas a otros submódulos.
Ya no hay redundancia de código, ya que las funciones están agrupadas en módulos y se les
invocará cada vez que sea necesario.
El proceso sucesivo de subdivisión de módulos continúa hasta que cada módulo tenga una sola
tarea específica a ejecutar. Ej. Entrada o salida de datos, manipulación, control de otros
módulos, etc.
Dado que los módulos son independientes,
- Diferentes programadores pueden trabajar simultáneamente en diferentes partes del
mismo programa.
- Se reduce el tiempo de diseño del algoritmo y posterior codificación.
- Un módulo se puede modificar radicalmente sin que afecte a otros módulos.

Características de los módulos:

- Cada uno debe tener un nombre propio asignado que lo identifique y lo diferencie de
los demás y será el usado para invocarlos.
- Se puede transferir información entre el módulo principal y el resto de los módulos a
través de parámetros.
- Cada módulo puede ser programado y compilado por separado y almacenado
posteriormente en librerías.
- Cada módulo consta de dos partes: la cabecera, que es donde aparece el nombre y los
datos que se le pasan y/o genera y el cuerpo o estructura interna que es donde se
desarrolla el código.
c. PROGRAMACIÓN ESTRUCTURADA
Este tipo de programación tiene las características de la programación modular y además
establece que un programa debe cumplir las siguientes condiciones:
1. El programa se desarrolla dividiéndolo en partes bien definidas y fácilmente
ensamblables. Cada una debe poder ser modificada individualmente sin que afecte al
resto del programa.
2. El código deberá contener la información necesaria para ser comprendido y verificado
de forma autónoma.
3. En mayor o menor medida, el programa deberá contener una serie de elementos
básicos que son: estructuras básicas, recursos abstractos y razonamiento top-down.
a. Estructuras básicas: un programa debe poder escribirse solamente utilizando
las estructuras de control secuenciales, selectivas y repetitivas.
b. Recursos abstractos: consiste en descomponer una determinada acción
compleja en función de un número de acciones más simples, capaces de ser
ejecutadas por una computadora y que constituirán sus instrucciones.
c. Top-Down: un problema se descompone en una serie de niveles o pasos
sucesivos de refinamiento. Esta metodología consiste en descomponer el
programa en estructuras jerárquicas, de modo que se puede considerar cada
estructura desde dos puntos de vista: qué hace y cómo se hace.
Qué hace Cómo lo hace

Unidad 5
Javascript
1. CONCEPTOS PREVIOS
a. ¿QUÉ ES JAVASCRIPT?
Javascript es un lenguaje de programación que permite a los desarrolladores crear acciones en
sus páginas web. Pero ¿Qué es Javascript?, ¿Cómo nace Javascript? son algunas de la
preguntas que el siguiente artículo intenta resolver.
Javascript es un lenguaje que puede ser utilizado por profesionales y para quienes se inician en
el desarrollo y diseño de sitios web. No requiere de compilación ya que el lenguaje funciona
del lado del cliente, los navegadores son los encargados de interpretar estos códigos.
Muchos confunden el Javascript con el Java pero ambos lenguajes son diferentes y tienes sus
características singulares. Javascript tiene la ventaja de ser incorporado en cualquier página
web, puede ser ejecutado sin la necesidad de instalar otro programa para ser visualizado.
Java por su parte tiene como principal característica ser un lenguaje independiente de la
plataforma. Se puede crear todo tipo de programa que puede ser ejecutado en cualquier
ordenador del mercado: Linux, Windows, Apple, etc. Debido a sus características también es
muy utilizado para internet.
Como síntesis se pude decir que Javascript es un lenguaje interpretado, basado en prototipos,
mientras que Java es un lenguaje más orientado a objetos.
Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas
que luego son insertados en una página web y en programas más grandes, orientados a
objetos mucho más complejos. Con Javascript podemos crear diferentes efectos e interactuar
con nuestros usuarios.
Este lenguaje posee varias características, entre ellas podemos mencionar que es un lenguaje
basado en acciones que posee menos restricciones. Además, es un lenguaje que utiliza
Windows y sistemas X-Windows, gran parte de la programación en este lenguaje está centrada
en describir objetos, escribir funciones que respondan a movimientos del mouse, aperturas,
utilización de teclas, cargas de páginas entre otros.
Es necesario resaltar que hay dos tipos de JavaScript: por un lado está el que se ejecuta en el
cliente, este es el Javascript propiamente dicho, aunque técnicamente se denomina Navigator
JavaScript. Pero también existe un Javascript que se ejecuta en el servidor, es más reciente y se
denomina LiveWire Javascript.
b. ¿CÓMO NACE JAVASCRIPT?

Javascript nació con la necesidad de permitir a los autores de sitio web crear páginas que
permitan intercambiar con los usuarios, ya que se necesitaba crear webs de mayor
complejidad. El HTML solo permitía crear páginas estáticas donde se podía mostrar textos con
estilos, pero se necesitaba interactuar con los usuarios.
En los años de 1990, Netscape creo Livescript; las primeras versiones de este lenguaje fueron
principalmente dedicadas a pequeños grupos de diseñadores Web que no necesitaban utilizar
un compilador, o sin ninguna experiencia en la programación orientada a objetos.

A medida que estuvieron disponibles nuevas versiones de este lenguaje incluían nuevos
componentes que dan gran potencial al lenguaje, pero lamentablemente esta versión solo
funcionaba en la última versión del Navigator en aquel momento.
En diciembre de 1995, Netscape y Sun Microsystems (el creador del lenguaje Java) luego de
unirse objetivo de desarrollar el proyecto en conjunto, reintroducen este lenguaje con el
nombre de Javascript. En respuesta a la popularidad de Javascript, Microsoft lanzo su propio
lenguaje de programación a base de script, VBScript (una pequeña versión de Visual Basic).
En el año de 1996 Microsoft se interesa por competir con Javascript por lo que lanza su
lenguaje llamado Jascript, introducido en los navegadores de Internet Explorer. A pesar de las
diferentes críticas que se le hacen al lenguaje Javascript, este es uno de los lenguajes de
programación más populares para la web. Desde que los navegadores incluyen el Javascript,
no necesitamos el Java Runtime Environment (JRE), para que se ejecute.
El Javascript es una tecnología que ha sobrevivido por más de 10 años, es fundamentales en la
web, junto con la estandarización de la “European Computer Manufacturers Association”
(ECMA) (adoptada luego por la ISO) y W3C DOM, Javascript es considerado por muchos
desarrolladores web como la fundación para la próxima generación de aplicaciones web
dinámicas del lado del cliente.
La estandarización de Javascript comenzó en conjunto con ECMA en Noviembre de 1996. Es
adoptado este estándar en Junio de 1997 y luego también por la “Internacional Organization
for Standardization” (ISO). El DOM por sus siglas en inglés “Modelo de Objetos del
Documento” fue diseñado para evitar incompatibilidades.
c. ¿DÓNDE PUEDO VER FUNCIONANDO JAVASCRIPT?

Entre los diferentes servicios que se encuentran realizados con Javascript en Internet se
encuentran:
 Correo
 Chat
 Buscadores de Información
También podemos encontrar o crear códigos para insertarlos en las páginas como:
 Reloj
 Contadores de visitas
 Fechas
 Calculadoras
 Validadores de formularios
 Detectores de navegadores e idiomas
d. ¿CÓMO IDENTIFICO EL CÓDIGO JAVASCRIPT?

El código Javascript, por lo general, se inserta entre: <script></script>.
Podemos encontrarlo dentro de las etiquetas <body></body> y/o <head></head> de nuestras

páginas web del siguiente modo:

- Se situarán entre etiquetas <head> cuando queramos que esté disponible para
cualquier evento que ocurra en la página web, por ejemplo al hacer clic sobre un
botón.
El resultado es:
- Se situarán entre etiquetas <body> cuando se necesite generar contenido en la página

web y no se crean funciones.
El resultado es:

- Podemos combinar ambas opciones:
El resultado es:
También podemos encontrarlo en ficheros externos del siguiente modo:
Por ejemplo, tenemos un fichero con el siguiente contenido:
Al abrir la página web obtendremos un mensaje con Hello World.

e. ¿ES COMPATIBLE CON LOS NAVEGADORES?

Javascript es soportado por la mayoría de los navegadores como Internet Explorer, Netscape,
Opera, Mozilla Firefox, entre otros.
Con el surgimiento de lenguajes como PHP del lado del servidor y Javascript del lado del
cliente, surgió Ajax en acrónimo de (Asynchronous Javascript And XML). El mismo es una
técnica para crear aplicaciones web interactivas. Este lenguaje combina varias tecnologías:
 HTML y Hojas de Estilos CSS para generar estilos.
 Implementaciones ECMAScript, uno de ellos es el lenguaje Javascript.
 XMLHttpRequest es una de las funciones más importantes que incluye, que permite
intercambiar datos asincrónicamente con el servidor web, puede ser mediante PHP,
ASP, entre otros.
Debemos tener en cuenta que aunque Javascript sea soportado en gran cantidad de
navegadores nuestros usuarios pueden elegir la opción de Activar/Desactivar el Javascript en
los mismos.
Para probar todos los ejercicios, lo haremos usando la consola de Firefox o Chrome (Abrir
consola de Firefox o de Chrome con Control + Shift + i ).
f. MI PRIMER PROGRAMA EN JAVASCRIPT

En un documento de texto escribimos el siguiente código:
Lo guardaremos con el nombre holamundo.html

Abrimos un navegador (Firefox o Chrome) y abrimos el archivo holamundo.html
El resultado será:

2. TIPOS DE DATOS
- Números
o Enteros: 1, 2, 2000, etc.
o Positivos y negativos: +3, -7
o Infinito: 9999999999999999999999… Infinity
- Cadenas
o Error de referencia cuando se escriben los caracteres
o “Esto es una cadena”
o ‘Esto es otra cadena’
- Booleanos
o Verdadero = true
o Falso = false
- Indefinido: undefined
- Nulo: null
3. VARIABLES
Una variable es un cajón con una etiqueta donde almacenamos datos de un programa. Para
definir una variable, usamos la palabra reservada var seguida del nombre que le queremos dar
a la variable.
Por ejemplo: var carta;
En este cajón podemos meter cualquier tipo de dato: numérico, cadena o booleano. Al declarar
una variable, podemos indicar su valor usando el signo =
Por ejemplo: var palindromo=”oso”.
También podemos declarar varias variables tras un mismo var separándolas con comas:
Por ejemplo: var carta, palindromo;
Podemos volver a asignar (reasignar) un valor a una variable usando también el signo =. Por
ejemplo palindromo=”radar”.
Por ejemplo, usaremos una variable carta con el contenido de una cadena con la carta
indicada. Pero para transmitir esta idea a nuestro programa, tenemos que realizar una
simplificación: usaremos dos caracteres en la cadena que representa a una carta, uno con el
palo y otro con el valor. Para el palo, en vez de usar el texto completo usaremos solamente la
primera letra.
Ejemplo: var carta = "1c"

Por tanto, para acceder al valor y al palo de una carta, podremos hacerlo con
el operador corchetes:
var valor = carta[0];
var palo = carta[1];

a. ÁMBITO DE LAS VARIABLES

Las variables pueden pertenecer al ámbito global, si están definidas y son accesibles desde
cualquier lugar o local, si sólo pertenecen al ámbito de una función.
b. NOMBRES DE LAS VARIABLES Y VARIABLES RESERVADAS

Las variables NO pueden comenzar por un número. Deberá ser por una letra o un carácter
subrayado (_). Javascript diferencia entre mayúsculas y minúsculas, por lo que Nombre y
nombre son dos variables distintas.
No se puede usar ninguna variable reservada por el sistema, que son las que se muestran en la
siguiente lista:

4. OPERADORES
- ARITMÉTICOS: + - / * % ++ -- () Ejemplo: 0/0=nan 45/0=infinity
- DE ASIGNACIÓN: = += -= *= /= %=
o C += A significa C= C+A
- CON CADENAS:
o Concatenar (+): “rápida”+”mente”
o Acceso a índice ([ ]) comienza en el índice 0: “abc”[0]  ‘a’ “abc”[3]undefined
- LÓGICOS:
o Negación (!) devuelve el valor opuesto al actual: !true  false
o Y lógico (&&) el resultado será cierto so los dos valores son distintos de 0: true &&
true  true
o O lógico (||) devuelve verdadero si uno de los operandos es distinto de 0: true ||
false  true
- COMPARACIONES:
Igualdad y desigualdad
Usaremos el operador === para las comparar que dos valores (números, cadenas o booleanos)
sean iguales, ya sean literales (valores tal cual) o variables. Para comparar que dos valores sean
distintos usamos !==. Existen también los operadores == y != pero desaconsejamos su uso
porque devuelven resultados positivos al comparar entre valores de tipo distinto, como
números y cadenas.
=== !==
Mayor y menor
Para comparar números podemos utilizar los operadores > (mayor que) y < (menor que).
Ejemplo: 3 < 4 devolverá un valor verdadero.
También podemos incluir el valor comparado con los operadores >= (mayor o igual que) y <=
(menor o igual que).
Falsy y truthly
En JavaScript tenemos dos tipos especiales que son falsy y truthy. Falsy representa un valor
falso, que puede ser el booleano false, la cadena vacía "" o el número 0. Truthy, por contra,
representa un valor verdadero que puede ser el booleano true, una cadena no vacía y un
número distinto de 0.
Ejemplo 1: 3 && true devuelve verdadero ya que tanto 3 como true son valores truthy.
Ejemplo 2: true && "" devuelve falso porque "" es un valor falsy.

5. ESTRUCTURAS DE CONTROL
a. IF-ELSE
Comenzamos la estructura de selección con la palabra if seguida de la condición lógica
(pregunta) entre paréntesis y luego un bloque de código entre { y } que será lo que nuestro
programa ejecute en caso de cumplirse la condición lógica.
Ejemplo 1: if
var carta = "3c";
if(carta[1] === "c"){
console.log("Es un 3 de corazones");
}
Nota: Usamos console.log para escribir texto y datos en la consola JavaScript del navegador.
Nota: Como estamos escribiendo varias sentencias en nuestro programa, una buena práctica en
JavaScript es escribir un punto y coma (;) al final de cada sentencia. En nuestro ejemplo, las líneas con
if/else son estructuras de selección no son sentencias y por tanto no llevan “;” al final.
Nota: Indentar consiste en poner espacios a la izquierda del código, de forma que cuando anidamos un
bloque (código entre { y }) queda visualmente más a la derecha. De esta forma, veremos visualmente el
nivel de anidamiento de nuestro código. Así, nuestro código será más legible y ordenado.
Ejemplo 2: else
var carta = "3c";
if(carta[1] === "c"){
}
else {
console.log("No es un 3 de corazones");
}
Ejemplo 3: anidamiento
Var carta = "3p";
if(carta[1] === "c"){
}
else {
if(carta[1] === "p"){
console.log("Es un 3 de picas");
}
}
El anidamiento también puede escribirse como:

b. SWITCH-CASE
Hay una opción más simple y eficiente que la de hacer múltiples if-else
si depende de hacer siempre comparaciones sobre una misma variable.
El objetivo de esta sentencia es dar una expresión para evaluar y
ejecutar otras sentencias en función del valor de ésta. Se comprueba
cada caso hasta que haya una coincidencia. Si no se encuentran
coincidencias, se ejecuta una condición por defecto.

c. ESTRUCTURAS DE ITERACIÓN
FOR
Ejemplo 1: for
for(var i=1; i<= 12; i=i+1){
console.log(i + " de picas");
}
Ejemplo 2: for
DO-WHILE
Ejemplo 3: do while
var i = 1;
do
{
console.log( i + " de picas");
i = i + 1;
}while(i <= 13)
Ejemplo 4: do while
WHILE-DO
Ejemplo 5: while-do
var i = 1;
while(i <= 13)
{
console.log( i + " de picas");
i = i + 1;
}

Ejemplo 6: while-do
A continuación podemos comprobar las diferencias entre los tres tipos de bucles mediante su
representación gráfica:
Hasta ahora hemos visto cómo trabajar con 3 tipos de datos: las cadenas, los números y los
booleanos. Con estos datos podemos hacer muchas cosas, pero sería interesante poder
trabajar con colecciones de datos.
Ejemplos de situaciones que requieren el uso de colecciones de datos: cuando trabajamos con
los meses del año, los contacto de la agenda del móvil, o, en nuestro ejemplo de la baraja, el
listado de palos de la baraja.
d. ARRAYS
Los arrays o colecciones son estructuras de datos que agrupan elementos de un mismo tipo.
Para declarar un array en JavaScript utilizamos los corchetes [ y ], e indicaremos en el interior
los elementos del array separados por coma.
Un array es un Objeto y puede declararse y asignarle valores del siguiente modo:

Ejemplo 1: arrays de números y de cadenas

var numeros = [1,2,3];
var palos = ["c", "d", "p", "t"];
Para acceder a una posición del array utilizamos corchetes [ y ] y dentro la posición a la que
queremos acceder. Recordemos que las posiciones empiezan a contarse desde el 0.
Ejemplo: palos[0] nos devolverá la cadena "c" correspondiente a corazones.
Para actualizar una posición del array, también podemos utilizar el operador [] para acceder a
una posición y usar la asignación = para darle un nuevo valor.
Ejemplo: palos[0]="nuevo palo";
Podemos crear arrays vacíos y después insertarle los valores que necesitemos.
Ejemplo 2: añadir elementos a un array
var palos = [];
palos[0] = "c";
palos[1] = "d";
También podemos consultar el tamaño de un array utilizando la propiedad length (longitud en

inglés) del mismo, a la que accedemos con el operador punto.
Ejemplo: palos.length nos devuelve el valor 4.
Ejemplo 3: recorriendo un array

var cartas = [10,3,5,7];
var total = 0;
for(var i=0; i<cartas.length; i = i + 1){
total = total + cartas[i];
}
Aquí vemos cómo puede utilizarse la propiedad de longitud de un array para recorrerlo,
usando un índice que se incrementa en uno en cada iteración. Este bucle nos permite sumar la
puntuación total de nuestra mano de cartas, que almacenamos en la variable total.
Ejemplo 4: búsqueda en un array

var cartas = ["5d","3t","2c","12c"];
var encontrado = false;
for(var i=0; i<cartas.length; i=i+1){
if(carta[i] === "1c"){
encontrado = true;
}
}
Usamos una variable booleana encontrado para almacenar el resultado de buscar una carta en
un array de cartas. De esta forma, recorremos el array con un bucle y vamos comparando cada
carta con la carta a buscar (1 de corazones). En caso de encontrarla, ponemos encontrado a
true.

Ejemplo 5: inserción de valores en un array

var cartas = ["5d", "3t", "2c", "12c"];
var resultado = [];
resultado[resultado.length] = cartas[i];
if(cartas[i] === "3t"){
resultado[resultado.length] = "1c";
}
}
En este caso, es una buena práctica si vamos a modificar un array, crear una copia del mismo.
Es decir, no vamos a modificar el array cartas sino que el resultado de la inserción lo vamos a
crear en el array resultado.
Al comienzo el array resultado está vacío. Vamos recorriendo el array original y almacenando
cada carta en la última posición, hasta que llegamos al 3 de tréboles (3t) en que añadiremos de
forma adicional el as de corazones (1c). Al terminar, en la variable resultado tendremos el
array modificado con una carta más en la posición posterior al 3 de tréboles.
Ejemplo 6: filtrado de un array

var cartas = ["5d", "3t", "2c", "12c"];
var resultado = [];
if(cartas[i][1]==="d"||cartas[i][1]==="c"){
resultado[resultado.length]=cartas[i];
}
}
En este último ejemplo de arrays, iteramos una colección de cartas para detectar las que son
de un palo de color rojo. Al igual que en el ejemplo anterior, vamos a crear un nuevo array
resultado donde almacenaremos las cartas de color rojo que encontremos, es decir, las que
sean de corazones o diamantes. Este ejemplo no termina de funcionar bien porque en el caso
del rey de corazones, el palo no se encuentra en la posición 1 sino en la 2 (usamos 3 caracteres
para definir cartas mayores que 9). Podemos modificar la condición para que dé cobertura a
ambos casos, sólo para detectar cartas de diamantes:
if(cartas[i][1]==="d"||cartas[i][2]==="d"). A continuación veremos que
para almacenar este tipo de datos, es mucho mejor usar un diccionario.
Otras funciones para usar con arrays: concat(), every(), filter(), forEach(), indexOf(), join(),
pop(), push(), reverse(), some(), slice(), etc.
e. DICCIONARIOS
Los diccionarios son estructuras que nos permiten almacenar datos estructurados. También se
les llama hash en inglés. En los diccionarios la información se almacena con una clave y un
valor. Por ejemplo, para almacenar una dirección postal tendríamos la información de una
calle, una población, un código postal y un país.
Ejemplo 1: crear un diccionario

var carta = {palo: "c", valor: 1};

Usamos la notación de llaves { } para declarar un diccionario, que consta de pares clave: valor
separados por comas ,. Para separar la clave de su valor usamos :. En JavaScript los
diccionarios se llaman Object (objeto) y tienen otras funcionalidades que veremos más
adelante.
Ejemplo 2: leer información de un diccionario

carta["palo"];
carta.palo;
Tenemos dos maneras de acceder a los valores almacenados en un diccionario. En primer

lugar, usando la misma notación que en los arrays con [ ] y poniendo entre comillas el nombre
de la clave cuyo valor queremos obtener. La segunda forma es con la notación de punto, que
separa el nombre del diccionario del de la clave cuyo valor queremos obtener. La notación más
habitual es la notación con punto, ya que de esta forma distinguimos si trabajamos con un
array o un diccionario.
Ejemplo 3: actualizar información de un diccionario

carta["palo"] = "d";
carta.palo = "t";
En este caso, usamos la misma notación anterior para modificar el valor del palo de una carta.
Ejemplo 4: array de diccionarios

var as = {palo: "c", valor: 1};
var rey = {palo: "t", valor: 12};
var cartas = [as, rey];
cartas[0].palo;
cartas[0].palo = "t";
En este ejemplo declaramos un array de cartas, siendo cada carta un diccionario que contiene
un palo y un valor. En este ejemplo hemos declarado las cartas en variable separadas, pero
podríamos declarar el array directamente con los diccionarios sin las variables intermedias de
as y rey. Luego accedemos al palo de la primera carta del array, y podemos modificarla.
Ejemplo 5: diccionario de arrays

var palos = {esp: ["c", "o", "e", "b"], poker: ["c", "t", "p", "d"]}
palos.poker[3]
En este caso, hemos definido un diccionario de palos con el listado de palos de distintas
barajas, la española y la de poker. Así, podemos acceder a cada listado, que es un array, y
luego a cada posición dentro del array. Por ejemplo, accedemos a la última posición del listado
de palos de la baraja de poker.

f. FUNCIONES
Hasta ahora los bloques de código que hemos escrito los ejecutamos sólo una vez, o varias
veces seguidas si estamos en un bucle. Vamos a ver cómo podemos llamar al código de un
bloque en distintos puntos de nuestro programa, sin que ello suponga tener que volver a
escribir todas esas líneas. Para conseguir este objetivo tenemos las funciones.
Antes de usar una función hay que definirla (crearla), para lo que usaremos la palabra
reservada function, seguida del nombre de la función que deberá ser único, una lista de
parámetros (o no) y un bloque de sentencias encerradas por { }.
Una función recibe unos parámetros de entrada, ejecuta una serie de instrucciones con esos
parámetros y nos da un resultado.
Por ejemplo, dada una mano de cartas podemos construir una función puntúa que calcule la
puntuación obtenida en la mano de cartas. En este caso, recibimos las cartas como parámetro
de la función. La lógica de la función itera (recorre) las cartas para calcular la puntuación, que
es el resultado que devuelve nuestra función. Encapsulando este código en una función, cada
vez que queramos calcular el valor de una mano de cartas, en vez de tener que volver a
escribir todo el código anterior, hacemos una llamada a nuestra función puntúa pasándole la
mano a puntuar.
Ejemplo 1: declaración de una función

function puntua (mano){
var total = 0;
for(var i=0; i<mano.length; i=i+1){
total = total + mano[i]
}
document.write(total);
}
En este caso, sólo hay un parámetro: lo llamamos mano y corresponde a

una colección de números con las puntuaciones de una mano de cartas. En el
cuerpo de la función calculamos el valor total de la mano, acumulando el valor
de cada número de la colección en una variable total. Como puedes ver, dentro del cuerpo de
la función accedemos a los parámetros mediante el nombre que le pusimos al comienzo.
Si queremos que la función nos devuelva un valor que haya calculado, debemos incluir una
sentencia return al final de la misma.
Tendríamos que cambiar la sentencia document.write(total) por return(total).

Ejemplo 2: return de una función
Esto es sólo la declaración de la función, y si lo ejecutamos en la consola no hará nada. Sólo

hemos declarado la existencia de esta nueva función, pero para poner a funcionar el código
que hemos creado, tendremos que invocar o llamar a la función.
Para llamar a una función, simplemente lo haremos escribiendo el nombre de la función y de
los valores que queramos asignarle a los parámetros.

Ejemplo 3: llamada a una función

Var mano = [10, 9, 8, 7, 8]
Var resultado = puntua(mano);
Var otra_mano = [1, 3, 5, 7, 8];
Var otro_resultado = puntua(otra_mano);
Esto se hace mediante el nombre de la función puntua seguido de los parámetros que le
pasamos entre paréntesis. En este caso, le pasamos una colección de números que
corresponde a la mano de cartas, y la función calcula el resultado que almacenamos luego en
una variable resultado podemos invocarla de nuevo con otros parámetros, en este caso con
otra mano de cartas, y sigue calculando el resultado de forma adecuada.
Las funciones nos sirven además para definir el ámbito (en inglés scope) de las variables. Si
declaramos una variable dentro de una función, no será accesible desde fuera del cuerpo de
esa función. Lo mismo sucede con los parámetros.
Ejemplo 4: ámbito de las variables

var carta = "1c";
function imprimeCarta(miCarta){
var texto = "Mi carta es "+ miCarta;
console.log(texto);
}
imprimeCarta(carta);
En este caso, la variable texto y el parámetro miCarta sólo serán accesibles desde dentro del
cuerpo de la función. Si intentamos acceder a ellas desde fuera, obtendremos un error.
g. PROGRAMAS
Un programa se compone de la ejecución de un conjunto de instrucciones de código para
desarrollar un trabajo concreto. Para estructurar el código de nuestro programa podemos
utilizar funciones, siendo una de ellas la principal que orquesta la utilización de las demás.
Ejemplo 1: un programa
function imprimePuntuacion(puntuacion){
console.log("La puntuación es "+ puntuacion);
}
function programa(){
var mano = [10, 9, 8, 7, 8];
var resultado = puntua(mano);
imprimePuntuacion(resultado);
}
programa();
En este programa, reutilizamos la función puntua del ejercicio anterior y declaramos una
nueva imprimePuntuacion que imprime por pantalla la puntuación total. Además, hemos
creado una función principal programa que utiliza al resto de funciones para completar el
trabajo de puntuar una mano de cartas e imprimir su resultado.

h. LIBRERÍAS DE CÓDIGO
Este módulo trata sobre librerías de código. Primero vamos a ver cómo podemos construir una
librería de código por nosotros mismos. Y después veremos algunos ejemplos con las librerías
de código que nos ofrece el sistema.
Hasta ahora hemos conocido la estructura de datos de diccionario que nos permitía almacenar
datos como pares de clave : valor. Pero esta misma estructura también nos permite almacenar
funciones. Volviendo a nuestro ejemplo de la baraja de cartas, vamos a modelar la figura del
croupier como un diccionario que almacena dos funciones: barajar y repartir.
Ejemplo 1: librería Croupier

Var cartas = [{palo: "c", valor: 1},{palo: "d", valor: 1},{palo: "p",
valor: 1},{palo: "t", valor: 1}];
Function barajar(cartas){
return "Barajando...";
}
Function repartir(cartas){
return "Su carta, gracias";
}
Var Croupier = {baraja: barajar, reparte: repartir};
Croupier.baraja(cartas);
Croupier.reparte(cartas);
Dada una colección de cartas, que por simplicidad son sólo los 4 ases, vamos a definir dos
funciones que un croupier puede realizar sobre ellas: barajar y repartir. En este ejemplo, no
están implementadas de verdad las funciones y sólo devuelven una cadena de texto a modo
explicativo de lo que hacen. La implementación real se deja como ejercicio.
Definimos luego la variable Croupier, para la que usamos un nombre en mayúsculas que es
una convención que se usa en muchos lenguajes de programación para denotar un objeto.
Para nuestro croupier elegimos una estructura de datos de diccionario para almacenar las
funciones anteriores. Elegimos un nombre para las claves (baraja, reparte) y referenciamos a
las funciones que hemos declarado anteriormente por su nombre.
i. LIBRERÍAS DEL SISTEMA

Vamos a ver algunas funciones útiles de la librería estándar de JavaScript. Las iremos
conociendo con ejemplos.
console
Ejemplo 2: console
console.log("Hola, buenas tardes");
console.clear();
En este caso, vamos a conocer las funcionalidades de la librería console que ya conocemos de
otros módulos. Con la función log podemos imprimir un texto en la consola. Y con clear borrar
la consola, del mismo modo que usando el botón con el mismo nombre. Esta función en el
navegador Firefox no está implementada en console sino que se ejecuta escribiendo
directamente clear().

Date
Ejemplo 3: Date
Date.now();
Date.parse("01/02/2007");
Date.parse("2007-01-02");
Date.parse("Jan 2, 2007");
La función now de la librería Date nos devuelve la fecha actual. Pero el formato en que nos lo
devuelve es curioso: es un número muy largo. Ese número corresponde al número de
milisegundos (milésimas de segundo) que han pasado desde el 1 de enero de 1970. Lo
llamamos timestamp o marca de tiempo, porque indica una fecha y hora con precisión de
milisegundos. Esta es la forma en que JavaScript trata las fechas de forma interna.
La función parse analiza una cadena de texto que le pasamos como parámetros y nos devuelve
el timestamp de esa fecha. Admite distintos tipo de formatos de fecha, algunas con texto o
también sólo números.
Math
Ejemplo 4: Math
Math.sqrt(9);
Math.sqrt(9786);
Var numeroGrande = 30000000;
Math.sqrt(numeroGrande);
Math.PI
Para terminar los ejemplos de la librería estándar de JavaScript, indagaremos en la librería de

matemáticas Math. Con ella podremos realizar cálculo matemáticos como la raíz cuadrada o
square root en inglés, con la función sqrt. Para usarla, simplemente invocamos este método
pasándole como parámetros el número al que realizar la raíz cuadrada.
Además de funciones, también podemos almacenar valores constantes en una librería. En
Math podremos acceder al número PI si lo necesitamos para realizar algún cálculo
matemático. Como convención, a la hora de nombrar constantes siempre se hace con su
nombre completo en mayúsculas. Nota que, al tratarse de una constante y no una función,
para acceder a ella no utilizamos paréntesis.
Hasta ahora hemos usado la estructura de datos de diccionario para almacenar datos y
también para almacenar funciones como en una librería o espacio de nombres (namespace en
inglés). Un objeto encapsula ambas cosas en la misma estructura de diccionario: datos y
funciones que trabajan con esos datos. Por ejemplo, nuestro amigo el croupier tiene la baraja
de cartas como parte de sus datos. Y luego funciones que permiten barajar esa baraja, repartir
cartas de la baraja o puntuar una mano. Vamos a ver algunos ejemplos.

Ejemplo 1: objeto básico croupier

var croupier = {};
croupier.baraja = [{palo:'c', valor:1}, {palo:
'c', valor:2}];
croupier.barajar = function(){
this.baraja.reverse();
}
croupier.barajar();
En nuestro objeto básico de croupier partimos de un diccionario vacío que almacenamos en la

variable croupier. Luego le añadimos los datos, es decir, una baraja que por simplicidad serán
sólo 2 cartas. A continuación definimos el comportamiento de barajar, que accede a la baraja
que hemos indicado anteriormente mediante la palabra this. De esta forma, accedemos a la
baraja con el nombre de la clave del diccionario. La librería array cuenta con muchas funciones
útiles, una de ellas es reverse que invierte el orden de un array. Lo usamos para simular
barajar. Finalmente ejercitamos nuestro objeto invocando la función (en el contexto de un
objeto también lo podemos llamar método) barajar que hemos declarado previamente.
Ejemplo 2: más funciones del objeto Croupier

croupier.repartir = function(){
console.log(this.baraja[0].valor);
}
croupier.puntuar = function(mano){
var resultado = 0;
for(var i=0; i< mano.length; i++){
resultado = resultado + mano[i].valor;
}
Return resultado;
}
croupier.repartir();
croupier.puntuar([{palo:'c', valor: 1}, {palo:'t', valor: 5}]);
En este caso, definimos un par de funciones más en nuestro objeto croupier. Una para repartir
una carta, que simplemente toma la primera y la devuelve su valor. Luego una función para
puntuar una mano, que recorre sus cartas y acumula su valor en una variable resultado, que
devuelve al final. Hemos usado la construcción i++ en el bucle for que es equivalente a i=i+1.

PROYECTO
Para terminar, realizar un proyecto para poner en práctica todo lo que se ha aprendido. Ya que
hemos estado siempre trabajando con ejemplos en el contexto de una baraja de carta, se
propone construir un juego de Blackjack.
Vamos a modelar 3 objetos para construir este juego:
1. La baraja, un conjunto de cartas con un valor y un palo.
2. El croupier tendrá la baraja, y es el encargado de barajar, dar las manos y puntuar; en
el Blackjack el croupier también juega, así que él mismo también tiene una mano de
cartas.
3. El jugador pide una carta o se planta; cuando se planta, acaba el juego y el croupier
calcula quién ha ganado
Se recomienda que todos estos objetos se manejen desde una función principal que orqueste
el juego. Esta función tendrá una referencia a los objetos modelados y un bucle donde irá
comprobando si el jugador pide una carta nueva o pasa y el juego termina.
¡A por ello!

U04 Programacion1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

U04 Programacion1

Cargado por

Copyright:

Formatos disponibles

PROGRAMACIÓN

Mª Isabel Torres Carazo

Mª Isabel Torres Carazo 1

Programador: persona que resuelve problemas de un modo riguroso y sistemático.

Pasos para resolver un problema:

¿Se ha entendido? Vamos a comprobarlo… EJERCICIO 2 en GRUPO

Mª Isabel Torres Carazo 2

Estructura de un programa informático

Mª Isabel Torres Carazo 3

Mª Isabel Torres Carazo 4

EJERCICIO 3 en PAPEL: Sigue los pasos del siguiente algoritmo.

Mª Isabel Torres Carazo 5

3. ELEMENTOS BÁSICOS DEL LENGUAJE

Tipos básicos de datos.

Mª Isabel Torres Carazo 6

Array unidimensional y bidimensional Ficheros

Cola y pila Registro

Mª Isabel Torres Carazo 7

Identificadores: Constantes y variables.

El tipo de nombre –identificadores- que se asigne a objetos y escenarios, es muy importante.

Mª Isabel Torres Carazo 8

Mª Isabel Torres Carazo 9

Operaciones de entrada y salida de datos

Mª Isabel Torres Carazo 10

3.1. ESTRUCTURAS DE CONTROL

ELSEIF (Condición n) THEN

Mª Isabel Torres Carazo 11

- Hacer mientras que

1. Deduce el valor de las siguientes expresiones siendo A=5, B=25 y C=10

2. Calcula el valor de las siguientes expresiones

Mª Isabel Torres Carazo 12

4. REPRESENTACIÓN GRÁFICA DE LOS ALGORITMOS

4.1. DIAGRAMAS DE FLUJO

Símbolos principales Función

Inicio / Fin. Parada o interrupción necesaria

Entrada / Salida de datos

Proceso (operaciones a realizar)

Mª Isabel Torres Carazo 13

Conector (enlaza páginas distintas)

Símbolos secundarios Función

Mª Isabel Torres Carazo 14

Ejemplo básico Ejemplo general

Los programas de computador tienen como finalidad resolver

Mª Isabel Torres Carazo 15

Algunos ejemplos de diagramas de flujo…

4.2. EJERCICIOS DIAGRAMAS DE FLUJO

Mª Isabel Torres Carazo 16

Mª Isabel Torres Carazo 17

Mª Isabel Torres Carazo 18

35. El Miércoles de Ceniza es 46 días antes que el Domingo de Resurrección. Hacer un

4.3. EJERCICIOS DIAGRAMAS DE FLUJO - PRÁCTICAS

Mª Isabel Torres Carazo 19

Mª Isabel Torres Carazo 20

Representación de las instrucciones permitidas en la programación estructurada:

Mª Isabel Torres Carazo 21

Múltiple Condicionales anidadas

Mª Isabel Torres Carazo 22

Mª Isabel Torres Carazo 23

Ejemplo: ¿Qué hacer para ver la película Tiburón?

Mª Isabel Torres Carazo 24

Mª Isabel Torres Carazo 25

Mª Isabel Torres Carazo 26

Características de los módulos: