Este documento presenta un curso introductorio de 6 días a la programación. El día 1 se introducirá el pseudocódigo. El día 2 se enseñará JavaScript básico con ejercicios. Los días 3 y 4 se desarrollarán la primera práctica sin interfaz gráfica. Los días 5 y 6 se desarrollará la segunda práctica con interfaz gráfica y se repasarán conceptos.

1. Introducción a la programación
Quique Fdez Guerra
Desarrollador JavaScript
@CKGrafico

2. Agenda
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Día 1: La programación – pseudocódigo
Día 2: Introducción básica a JavaScript + ejercicios simples.
Día 3: Plantear entre todos 1ª práct. – Empezar 1ª práct.
Día 4: Terminar 1ª práct. – Plantear 2ª pract.
Día 5: Práctica 2
Día 6: Terminar práctica 2 – repasar entre todos y dudas del curso
Nota:
Práctica 1: 3 en raya sin GUI (consola nodejs)
Práctica 2: 3 en raya con GUI (en un navegador)

3. Programación
La programación, es el proceso de diseñar,
codificar, depurar y mantener el código fuente
de programas computacionales.
Wikipedia
La lógica de la programación, es el conjunto de
ideas y acciones que utilizamos para construir un
programa que resuelva un problema.
Quique
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra

4. Relación
A nivel académico lo podríamos relacionar con
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Matemáticas Lengua
Tenemos muchos idiomas.
Nadie se expresa igual.
Diferentes idiomas pueden parecerse.
Has de comprender.
…
Usas símbolos y números.
Resuelves problemas.
Diferentes caminos mismo resultado.
…
Abstracción de las ideas (ir más allá).
Hay una base obligatoria y
perfeccionable con la práctica.
Filosofía y otros

5. Nos aporta
Un enfoque distinto para afrontar los problemas.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Enfoque matemático
Si tengo 11 personas y 3
cajas
11/3 = 4 por caja y en una 3

6. Nos aporta
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Enfoque matemático (problemas reales)
Ocupa mucho espacio.
Si una caja se estropea…
Cambios entre colas.
Colas más largas que otras.
Etc.

7. Si tengo n personas y x cajas
Mientras queden personas
voy de una en una
y las reparto en x cajas
Nos aporta
Un enfoque distinto para afrontar los problemas.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Enfoque lógica programación

8. Nos aporta
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Enfoque lógica programación (lo que nos aporta)
Ocupa mucho menos espacio.
Si una caja se estropea casi no nos afecta
No hay cambios entre colas.
Solo una cola
Rapidez, eficiencia, etc..
Se pone en práctica en tiendas como PRIMARK

9. Futuro laboral
Saber programar te ofrece oportunidades
laborales
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
INFINITAS

10. Vías de aprendizaje
Autoaprendizaje
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
FP / Equivalente Universidad

11. Vías de aprendizaje
Autoaprendizaje
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
FP / Equivalente / Universidad
Mi opinión y mi experiencia
Autoaprendizaje Charlas / Trabajo en equipo /
Talleres / Cursos / ….

12. Lenguajes de programación
Muchos lenguajes de programación, todos son distintos y comparten
algunas cosas.
Nos pueden servir para transmitir mensajes similares en distintas
situaciones.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Programación
C
JavaScriptC++ Perl
Árbol idiomas: http://bit.ly/1pm4u3sÁrbol lenguajes prog: http://bit.ly/1jQsLXn
… …
Objective-C
Lenguas
Latín
Cat.Franc. Cast.
… …
Ita.
…
Delphi
…
Ruso

13. En este taller
- Aprenderemos las bases de la programación.
- Trataremos con pseudocódigo
- Aprenderemos las bases de JavaScript
- Haremos dos prácticas:
- JavaScript sin GUI (utilizando NodeJS)
- JavaScript con GUI (Navegador)
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra

14. ¿Pseudoqué…?
“Lenguaje de programación” Utilizado, sobretodo, en ámbitos
académicos.
No lo puedes ejecutar en un ordenador, puedes escribirlo en
cualquier idioma (no inglés obligatorio).
Te va a servir para entender un poco más la lógica de
programación e iniciarte al código de programación.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra

15. ¿JavaScript?
No es el lenguaje de programación más usado.
Pero es el único UNIVERSAL (servidor, hardware, browser, etc..)
Es muy fácil de aprender (con sus pros y sus contras).
Es de los que más crecimiento está teniendo últimamente.
Están cocinando una nueva versión bastante buena (ECMA6)
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra

16. Pseudocódigo
Procesos y funciones
Variables
Vectores
Condiciones
Si
Segun
Mientras
Repetir-hasta
Repetir-para
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Nota:
Encontraréis muchas maneras
de expresar el pseudocódigo

17. Procesos
Idea: Resolver un problema pequeño, ejecutar una acción
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Define:
Proceso Ejemplo
…
FinProceso
Proceso Escribir (texto:cadena)
…
FinProceso
Ejecucción:
Escribir texto
Ejemplo:
Proceso HolaAlumno
Escribir “Hola Quique”
FinProceso
HolaAlumno

18. Procesos
Resolver un problema
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Hacer la compra
Moverme a tienda Pagar todo
Coger productos
Coger “Peras” Coger “Leche”
Coger “Pan” Coger “Flanes”
Accion
“irMoto”
Accion
“irTienda”
Accion
“abreCartera”
Pagar 22
Define:
Proceso Escribir (texto:cadena)
…
FinProceso

19. Procesos
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Proceso HacerLaCompra
MovermeTienda
CogerProductos
Pagar Todo
FinProceso
Proceso MovermeTienda
Accion “irMoto”
Accion “irTienda”
FinProceso
…
HacerLaCompra
Proceso Coger (que:cadena)
…
FinProceso
Proceso Accion (cual:cadena)
…
FinProceso
Proceso CogerProductos
Coger “Peras”
Coger “Leche”
…
FinProceso

20. Variables
Idea: Guardar un valor que luego voy a usar
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Define:
Entero uno, dos
Real altura
Cadena palabra
Booleano encendido
Ejecucción:
uno = 1
Ejemplo:
uno = 1
dos = uno + uno
altura = 3.4
palabra = “Hola”
encendido = FALSO

21. Funciones
Idea: Un proceso que me devuelve un resultado
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Define:
Funcion Ejemplo
…
FinFuncion
Ejecucción:
variable = Ejemplo
Ejemplo:
Funcion HolaAlumno
retorna “Hola
Quique”
FinFuncion
hola = HolaAlumno

22. Vectores
Idea: Guardar un conjunto de valores
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Define:
Caracter vocales[5]
Ejecucción:
vocales[1] = ‘a’
Ejemplo:
vocales[1] = ‘a’
vocales[2] = ‘e’
vocales[3] = ‘i’
vocales[4] = ‘o’
vocales[5] = ‘u’

23. Condiciones
Idea: Nos ayudan a trabajar con nuestro código,
No son ni procesos ni funciones pero nos van a servir para
conseguir diferentes acciones o gestionar nuestros datos.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Condiciones de comprobación
Si
Segun
Condiciones de repetición
Mientras
Repetir-hasta
Repetir-para

24. Cond. Comprobación: Si
Idea: Si pasa esto haré eso.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
Si condición Entonces
…
FinSi
Si condición Entonces
…
Sino Si condición Entonces
…
Sino
…
FinSi
Ejemplo:
Entero uno, dos
uno = 1
dos = uno * 2
Si uno > dos Entonces
Escribir “Eres más grande”
FinSi

25. Cond. Comprobación: Segun
Idea: Desencadena una acción u otra dependiendo del valor.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
Segun valor Hacer
…
De otro modo:
…
FinSegun
Ejemplo:
Entero uno
uno = 1
Segun uno Hacer
1: Escribir “Correcto”
2: Escribir “Mitad”
3: Escribir “Te pasas”
De otro modo
Escribir “uno > 3”
FinSegun

26. Cond. Repetición: Mientras
Idea: Hacer una acción mientras se cumpla una condición.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
Mientras condición Hacer
…
FinMientras
Ejemplo:
Booleano miTurno
Entero miNumero
miTurno = FALSO
miNumero = 342
Mientras miTurno == FALSO Hacer
miTurno = EsperaTurno miNumero
FinMientras
// Así se pone un comentario
// Cuando EsperaTurno devuelva CIERTO
// Entonces miTurno == CIERTO

27. Cond. Repetición: Repetir-hasta
Idea: Repetir una acción hasta que se cumpla una condición.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
Repetir
…
Hasta que condición
Ejemplo:
Booleano miTurno
Entero miNumero
miTurno = FALSO
miNumero = 342
Repetir
miTurno = EsperaTurno miNumero
Hasta que miTurno == CIERTO
// Cuando EsperaTurno devuelva CIERTO
// Entonces miTurno == CIERTO

28. Cond. Repetición: Repetir-para
Idea: Repetir una acción un cierto número de veces.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
Para contador Hasta final
…
FinPara
Ejemplo:
Booleano miTurno
Entero miNumero,i
miTurno = FALSO
miNumero = 342
Para i = 1 Hasta 400
Si EsperaTurno miNumero == CIERTO Hacer
miTurno = CIERTO
FinSi
FinPara

29. Function
Var
Array
Conditionals
if
switch
while
do…while
for
JavaScript
Procesos y funciones
Variables
Vectores
Condiciones
Si
Segun
Mientras
Repetir-hasta
Repetir-para
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Nota:
Recordar, no, no es el mejor
lenguaje del mundo.

30. ¿Cómo trabajaremos?
Se puede usar JavaScript de muchas maneras, nosotros veremos 3
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
1.- Escribir en un archivo de texto y ejecutar en la consola de nodejs.
2.- Escribir en un archivo de texto y ejecutar en el navegador.
3.- Escribir en la consola del navegador y ejecutar en la consola del
navegador.

31. Function
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Idea: En JavaScript no diferenciamos entre procesos y funciones
Define:
function example(){
…
}
function example(name){
…
}
Ejecucción:
ejemplo();
Ejemplo:
function helloGuy(name){
return ‘Hola ’ + name;
}
helloGuy(‘Quique’);

32. Var
Idea: Guardar un valor que luego voy a usar
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Define:
var one;
var word = ‘hi’;
var myName = function(name) {
return name;
};
Ejemplo:
one = 1;
var word = myName(‘Quique’);
one = 2;
one = 4;

33. Array
Idea: Guardar un conjunto de valores
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Define:
var arr = [];
Ejemplo:
var nums = [1,2,3,2];
nums[3] = 4; //Empieza en 0
var words = [‘hola’, ‘quique’];
var some = [
nums[2],
‘hi’,
2,
4,
[‘a’, ‘b’, ‘c’]
];

34. Cond. Comprobación: if
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
if (condición){
…
}
if (condición){
…
}else if (condición){
…
}else{
…
}
Ejemplo:
var one, two;
one = 1;
two = one * 2;
if (uno > dos){
console.log(‘Eres más grande’)
}
if (uno > dos && 1 > 2 || 1== 2){
console.log(‘se cumple’)
}

35. Cond. Comprobación: switch
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
switch (valor){
…
default:
…
}
Ejemplo:
var one, two;
one = 1;
switch (one){
case 1:
two = -2;
break;
case 2:
two = -2;
break;
default:
two = 0;
}

36. Cond. Repetición: while
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
while (condicion){
…
}
Ejemplo:
var me, myNum;
me = false
myNum = 342
while (me == false){
me = waitTurn(myNum);
}
// Cuando waitTurn devuelva true
// Entonces me == true

37. Cond. Repetición: do…while
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
do{
…
}while (condición);
Ejemplo:
var me, myNum;
me = false
myNum = 342
do{
me = waitTurn(myNum);
}while(me == false);
// Cuando waitTurn devuelva true
// Entonces me == true

38. Cond. Repetición: for
Idea: Repetir una acción un cierto número de veces.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Utilización:
Para contador Hasta final
…
FinPara
Ejemplo:
var me, myNum;
me = false
myNum = 342
for (var i = 0; i< 400; i++){
if (waitTurn(myNum) == true){
me = true;
break; // salgo del for
}
}