Upload
quique-fdez-guerra
View
845
Download
4
Tags:
Embed Size (px)
DESCRIPTION
Presentación que se utilizó para enseñar a unos chicos, entre 14 y 17 años, las bases de la programación. Se habló de la programación El futuro que te aporta saber programar Pseudocódigo Introducción a JavaScript Práctica 1: JavaScript sin GUI Práctica 2: JavaScript con GUI
Citation preview
Introducción a la programación
Quique Fdez GuerraDesarrollador JavaScript@CKGrafico
Agenda
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Día 1: La programación – pseudocódigoDí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 2Dí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)
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
RelaciónA nivel académico lo podríamos relacionar con
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Matemáticas
LenguaTenemos 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
Nos aportaUn 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
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.
Si tengo n personas y x cajas
Mientras queden personasvoy de una en unay las reparto en x cajas
Nos aportaUn enfoque distinto para afrontar los problemas.
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Enfoque lógica programación
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 afectaNo hay cambios entre colas.Solo una colaRapidez, eficiencia, etc..Se pone en práctica en tiendas como PRIMARK
Futuro laboralSaber programar te ofrece oportunidades laborales
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
INFINITAS
Vías de aprendizaje
Autoaprendizaje
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
FP / Equivalente
Universidad
¿Qué elegir?
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 / ….
Lenguajes de programaciónMuchos 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.
Aproximació
n
…
Delphi
…
Ruso
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
¿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
¿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
Pseudocódigo
Procesos y funcionesVariablesVectoresCondiciones
Si SegunMientrasRepetir-hastaRepetir-para
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Nota:Encontraréis muchas
maneras de expresar el pseudocódigo
ProcesosIdea: 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
ProcesosResolver 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
Procesos
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Proceso HacerLaCompraMovermeTiendaCogerProductosPagar Todo
FinProceso
Proceso MovermeTiendaAccion “irMoto”Accion “irTienda”
FinProceso…
HacerLaCompra
Proceso Coger (que:cadena)
…FinProceso
Proceso Accion (cual:cadena)
…FinProceso
Proceso CogerProductosCoger “Peras”Coger “Leche”…
FinProceso
VariablesIdea: Guardar un valor que luego voy a usar
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Define:Entero uno, dosReal alturaCadena palabraBooleano encendido
Ejecucción:uno = 1
Ejemplo:uno = 1dos = uno + unoaltura = 3.4palabra = “Hola”encendido = FALSO
FuncionesIdea: 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
VectoresIdea: 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’
CondicionesIdea: 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ónSiSegun
Condiciones de repeticiónMientrasRepetir-hastaRepetir-para
Cond. Comprobación: SiIdea: 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, dosuno = 1dos = uno * 2
Si uno > dos EntoncesEscribir “Eres más grande”
FinSi
Cond. Comprobación: SegunIdea: 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 unouno = 1
Segun uno Hacer1: Escribir “Correcto”2: Escribir “Mitad”3: Escribir “Te pasas”
De otro modoEscribir “uno > 3”
FinSegun
Cond. Repetición: MientrasIdea: 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 miTurnoEntero miNumeromiTurno = FALSOmiNumero = 342
Mientras miTurno == FALSO Hacer miTurno = EsperaTurno miNumero
FinMientras
// Así se pone un comentario// Cuando EsperaTurno devuelva CIERTO// Entonces miTurno == CIERTO
Cond. Repetición: Repetir-hastaIdea: 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 miTurnoEntero miNumeromiTurno = FALSOmiNumero = 342
Repetir miTurno = EsperaTurno miNumero
Hasta que miTurno == CIERTO
// Cuando EsperaTurno devuelva CIERTO// Entonces miTurno == CIERTO
Cond. Repetición: Repetir-paraIdea: 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 miTurnoEntero miNumero,imiTurno = FALSOmiNumero = 342
Para i = 1 Hasta 400 Si EsperaTurno miNumero == CIERTO
HacermiTurno = CIERTO
FinSiFinPara
FunctionVarArrayConditionals
ifswitchwhiledo…whilefor
JavaScript
Procesos y funcionesVariablesVectoresCondiciones
Si SegunMientrasRepetir-hastaRepetir-para
Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra
Nota:Recordar, no, no es el
mejor lenguaje del mundo.
¿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.
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’);
VarIdea: 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;
ArrayIdea: 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’]];
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’)
}
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;
}
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 = falsemyNum = 342
while (me == false){ me = waitTurn(myNum);
}
// Cuando waitTurn devuelva true// Entonces me == true
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 = falsemyNum = 342
do{ me = waitTurn(myNum);
}while(me == false);
// Cuando waitTurn devuelva true// Entonces me == true
Cond. Repetición: forIdea: 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 = falsemyNum = 342
for (var i = 0; i< 400; i++){ if (waitTurn(myNum) == true){
me = true;break; // salgo del for
}}