Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduccion a la programacion (Pseudocódigo + JavaScript)

1,023 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Introduccion a la programacion (Pseudocódigo + JavaScript)

  1. 1. Introducción a la programación Quique Fdez Guerra Desarrollador JavaScript @CKGrafico
  2. 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. 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. 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. 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. 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. 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. 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. 9. Futuro laboral Saber programar te ofrece oportunidades laborales Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra INFINITAS
  10. 10. Vías de aprendizaje Autoaprendizaje Introducción a la programación Braval – Julio 2014 Quique Fdez. Guerra FP / Equivalente Universidad
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 } }

×